/* VANTAGE UI enhancement layer (premium refinement pass).

   Loads AFTER components.css and BEFORE any page-specific CSS, so it refines the
   shared vocabulary without editing the base files (easy to review/revert). It
   is a POLISH layer: elevation, type rendering, spacing rhythm and interaction
   states — no new markup, no structural change. Every value is token-driven.

   Scope: the authenticated web shell + guest/auth (both link this file). The
   field PWA does NOT link it (its own lean, precached shell is untouched). */

/* ---------------------------------------------------------------- typography */
/* Real Inter is now loaded (fonts.css). Turn on the polish that a proper type
   face unlocks: crisper rendering, contextual alternates, and tabular figures
   everywhere numbers are compared in columns/tiles. */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv05" 1, "ss03" 1, "calt" 1;
    text-rendering: optimizeLegibility;
}

/* Numbers that line up (KPI values, table figures, meters, deltas, stat tiles)
   use tabular, lining figures so digits share a fixed width and never jitter. */
.text-num,
.kpi-value,
.stat-value,
.tile-value,
.rank-val,
.delta,
.data-table .num,
.coverage-tile-val,
.donut-center-num,
.crumbs code,
code, kbd {
    font-feature-settings: "tnum" 1, "lnum" 1, "zero" 1, "cv05" 1;
    font-variant-numeric: tabular-nums lining-nums;
}

/* Headings: slightly tighter tracking + heavier optical weight reads premium
   with a real face. h1 gets a touch more presence on content pages. */
h1, h2, h3 { letter-spacing: -.011em; }
.page-head h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1.15; }
.page-head .page-head-sub { font-size: var(--fs-base); max-width: 78ch; line-height: 1.5; }

/* ---------------------------------------------------------------- surfaces */
/* Deeper page/card separation. The page sits one step down from cards; cards
   carry a real (but soft) elevation instead of the near-invisible xs shadow, so
   the surface hierarchy (page < card < raised/float) actually reads. */
.content { background: var(--surface-2); }

.card {
    box-shadow: var(--shadow);
    border-color: var(--line-2);
}
.card--raised { box-shadow: var(--shadow-md); }

/* Cards that are links / carry an explicit .card--interactive lift on hover —
   a quiet, premium motion cue. Static content cards do NOT move. */
a.card,
.card--interactive {
    transition: transform var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}
a.card:hover,
.card--interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--green-mid);
}

/* Card headers get a hairline divider under the title row — a classic
   enterprise-console cue that separates the header from the body cleanly. The
   icon chip gains a subtle inner ring so it reads as a crafted object. */
.card-head {
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--line-2);
    margin-bottom: var(--sp-4);
}
.card-head-titles h2,
.card-head-titles h3 { font-weight: var(--fw-semibold); }
.card-ico { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent); }

/* Section-title labels: a touch more air below so grouped sections breathe. */
.section-title { margin-bottom: var(--sp-4); }

/* ---------------------------------------------------------------- KPI tiles */
/* The accent rail becomes a soft gradient and the whole tile lifts on hover,
   so the KPI row reads as a set of crafted instruments rather than flat boxes. */
.kpi {
    box-shadow: var(--shadow);
    border-color: var(--line-2);
    transition: transform var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}
.kpi::before {
    width: 3px;
    background: linear-gradient(to bottom,
        var(--kpi-accent, var(--green)),
        color-mix(in srgb, var(--kpi-accent, var(--green)) 55%, transparent));
}
.kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.kpi-value { font-size: var(--fs-3xl); letter-spacing: -.02em; }
.kpi-ico {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent);
}

/* Stat tiles (register/board parity) match the KPI elevation + hover language. */
.tile, .stat-tile {
    box-shadow: var(--shadow);
    border-color: var(--line-2);
}

/* ---------------------------------------------------------------- tables */
/* Denser, more legible enterprise tables: subtle header treatment, quiet row
   hover, tabular numbers already handled above. */
.data-table thead th {
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--muted);
    font-weight: var(--fw-semibold);
    background: var(--surface-2);
}
.data-table tbody tr { transition: background var(--dur-fast) var(--ease); }
.data-table tbody tr:hover { background: var(--surface-2); }

/* ---------------------------------------------------------------- meters */
/* Meter fills get a faint sheen so bars look lit rather than painted. */
.meter { background: var(--surface-3); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-strong) 40%, transparent); }
.meter > span { background-image: linear-gradient(to bottom, color-mix(in srgb, #fff 18%, transparent), transparent); }

/* ---------------------------------------------------------------- buttons */
/* Primary button: a subtle brand gradient + shadow so the main action reads as
   a real, pressable control. Ghost/outline stay flat (secondary). */
.btn:not(.btn-ghost):not(.btn-outline):not(.btn-small):not(.btn--sm) {
    background-image: linear-gradient(to bottom,
        color-mix(in srgb, #fff 10%, var(--green)), var(--green));
    box-shadow: var(--shadow-xs), inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
}
.btn { transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease); }
.btn:not(.btn-ghost):not(.btn-outline):active { transform: translateY(1px); }
.btn:not(.btn-ghost):not(.btn-outline):hover { box-shadow: var(--shadow); filter: brightness(1.04); }

/* ---------------------------------------------------------------- chips */
/* Chips gain a hairline ring so status pills read as crafted tokens. */
.chip { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent); }

/* ---------------------------------------------------------------- forms */
/* app.css's `.field input { width:100%; min-height:44px }` was written for
   text inputs but also inflated checkboxes/radios into giant misaligned
   squares (the "broken checkbox" look on broadcast/settings forms). Scope
   toggles back to their natural size, brand-tinted. */
.field input[type="checkbox"],
.field input[type="radio"] {
    width: 18px;
    height: 18px;
    min-height: 0;
    flex-shrink: 0;
    accent-color: var(--green);
}

/* ---------------------------------------------------------------- focus */
/* One consistent, offset focus ring for keyboard users across every control. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--focus);
    border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}