/* ═══════════════════════════════════════════════════════════════════
   Jetfolio Component Kit — Design System 2.0 (Phase 2)
   Shared primitives available on every page (linked right after
   css/tokens.css). Pages migrate onto these classes during their
   Phase 3 sweep; page-local re-implementations are then deleted.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Accessibility primitives (also for pages without global.css) ─── */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-to-content, .skip-link {
    position: absolute; top: -100px; left: 0;
    background: var(--accent); color: #fff;
    padding: 0.75rem 1.5rem; text-decoration: none; font-weight: 600;
    border-radius: 0 0 var(--radius-md) 0; z-index: var(--z-tooltip);
    transition: top var(--transition-normal);
}
.skip-to-content:focus, .skip-link:focus { top: 0; outline: 3px solid var(--accent-light); outline-offset: 2px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Icons: one inline-SVG language (2px stroke, currentColor) ────── */
.jf-icon { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.jf-icon-sm { width: 14px; height: 14px; }
.jf-icon-lg { width: 20px; height: 20px; }
.jf-icon-xl { width: 32px; height: 32px; }

/* ── Status pills: the five states, reused by every subsystem ─────── */
.jf-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
    border-radius: var(--radius-full); padding: 3.5px 10px;
    white-space: nowrap;
}
.jf-pill-ok      { background: var(--ok-bg);      color: var(--ok-ink); }
.jf-pill-warn    { background: var(--warn-bg);    color: var(--warn-ink); }
.jf-pill-bad     { background: var(--bad-bg);     color: var(--bad-ink); }
.jf-pill-info    { background: var(--info-bg);    color: var(--info-ink); }
.jf-pill-neutral { background: var(--neutral-bg); color: var(--neutral-ink); }

/* ── Empty state: icon + one sentence + one action ────────────────── */
.jf-empty {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 48px 24px; gap: 6px;
}
.jf-empty .jf-empty-icon { color: var(--line-strong); margin-bottom: 6px; }
.jf-empty .jf-empty-icon svg { width: 40px; height: 40px; }
.jf-empty h3, .jf-empty .jf-empty-title {
    font-size: 15px; font-weight: 700; color: var(--ink); margin: 0;
}
.jf-empty p, .jf-empty .jf-empty-hint {
    font-size: 13.5px; color: var(--text-secondary); margin: 0; max-width: 44ch;
}
.jf-empty .jf-empty-action { margin-top: 12px; }

/* ── Skeleton loading blocks ──────────────────────────────────────── */
.jf-skeleton {
    background: linear-gradient(90deg, var(--line) 25%, #e9edf4 50%, var(--line) 75%);
    background-size: 200% 100%;
    animation: jf-shimmer 1.4s ease infinite;
    border-radius: var(--radius-sm);
    min-height: 12px;
    color: transparent; user-select: none;
}
@keyframes jf-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ── Overline label (KPI/table-header style) ──────────────────────── */
.jf-label {
    font-size: 11px; font-weight: 600; letter-spacing: .09em;
    text-transform: uppercase; color: var(--ink-label);
}

/* ── Motion respect ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .jf-skeleton { animation: none; }
    .skip-to-content, .skip-link { transition: none; }
}