/* ============================================================
   team-nia.css — the Nia visual language, for the ops tools
   ============================================================
   The hub, the six desks and the twelve course pages carry this system in
   their own stylesheets (css/team-hub.css v4, and a v4 block inside each
   course page). The ops tools could not: they are seventeen pages with
   seventeen private token blocks, three of which have no <style> of their
   own and pull css/team.css and css/style.css — and style.css is the
   PUBLIC marketing site, which this change must not touch.

   So this file is linked LAST on those pages and wins on document order.
   Link order is the whole mechanism: a <link> after a <style> beats it at
   equal specificity, which is why almost nothing here needs !important.

   Every value is measured from Nia (nia.networksandcommunications.com),
   the same readings recorded in TEAM-HUB.md § "Look and feel":
     system font, no webfont · no display serif · no uppercase eyebrows
     10px cards / 6px controls · shadows that barely register · flat fills
     ink #0B1937 · muted #596B86 · paper #F7F9FC · line #DCE5F0
     chrome #052039 · link #096C9E · kicker #76DEF8

   What this file deliberately does NOT do: recolour semantic accents. A
   dashboard's amber "needs attention" and a chargeback page's red are
   information, not decoration, and they stay. It also leaves small caps on
   data-table headers alone — that is a document convention. What it takes
   out is the pairing of uppercase WITH wide tracking, which is the
   section-eyebrow signature and reads as styling.
   ============================================================ */

/* ---------- 1. Tokens ----------
   Name-matched, value-agnostic: each page names these differently in
   places (--paper vs --bg, --ink2 vs --ink-2), so every spelling in use
   across the seventeen pages is redefined here. Tokens a given page does
   not use simply sit unread. */
:root {
  --paper: #F7F9FC;  --bg: #F7F9FC;      --panel: #FFFFFF;   --panel-2: #F5F8FC;
  --ink: #0B1937;    --ink2: #2A3A55;    --ink-2: #2A3A55;
  --muted: #596B86;  --faint: #75859C;
  --line: #DCE5F0;   --line2: #EAF0F8;   --line-2: #EAF0F8;
  /* 🚨 --navy is NOT redefined here, and must never be. Four reading pages
     (field-services, field-services-training, terms-training,
     quoting-training) define --navy as a LIGHT value — #F5F8FA, #FAFAF7 —
     and use it as the page background. Overriding it to the chrome colour
     turned all four dark. Pages that want dark chrome already set it
     themselves. The lesson generalises: only override a token whose
     meaning is the same everywhere it appears. */
  --shadow: 0 3px 14px rgba(20,45,78,.045);
  --shadow-sm: 0 1px 3px rgba(20,45,78,.05);
  --shadow-lg: 0 8px 26px rgba(20,45,78,.075);
  /* Nia loads no webfont. Redefining --serif to the sans is what stops
     every existing var(--serif) rule from being a serif, without editing
     each rule in seventeen files. */
  --sans: -apple-system, 'Segoe UI', Inter, Roboto, Helvetica, Arial, sans-serif;
  --serif: -apple-system, 'Segoe UI', Inter, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* Three ops tools keep their display face in a --display token rather
     than --serif. Same treatment: it resolves to the sans. */
  --display: -apple-system, 'Segoe UI', Inter, Roboto, Helvetica, Arial, sans-serif;
  --nia-r: 10px;
  --nia-r-sm: 6px;
}

/* ---------- 2. Base type ----------
   :where() keeps this at zero specificity so any component rule still
   wins; it only fills in where a page set nothing. */
:where(body) {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* Pages that hard-coded the old pairing in a font shorthand or a
   font-family declaration need the stack replaced, not filled in. */
body, .wrap, .doc, .page, .shell, .container, main, section, article, aside, header, footer,
h1, h2, h3, h4, h5, h6, p, li, td, th, label, input, select, textarea, button, .btn {
  font-family: var(--sans);
}
code, pre, kbd, samp, .mono { font-family: var(--mono); }

:where(h1, h2, h3, h4) { letter-spacing: -.025em; text-wrap: balance; }
h1 { font-weight: 700; letter-spacing: -.045em; }
h2, h3 { font-weight: 650; }
/* No display serif and no editorial italic anywhere in the chrome. Italic
   inside body copy that an author wrote on purpose is left alone. */
:where(h1, h2, h3, h4, .eyebrow, .k, .kicker, .label, .pill, .chip, .tag, .badge) { font-style: normal; }

/* ---------- 3. The eyebrow signature ----------
   Uppercase paired with wide tracking. Nia has two uppercase strings on
   her entire site and both are brand lockups. These class names are the
   ones actually used across the ops tools. */
.eyebrow, .k, .kicker, .overline, .section-label, .card__eyebrow, .tile__label,
.stat__label, .panel__eyebrow, .sec__eyebrow, .hd__eyebrow {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.eyebrow .dot, .k .dot, .kicker .dot { display: none; }

/* The list below was not guessed. Every rule block across the ops tools
   that pairs `text-transform: uppercase` with tracking of .085em or more
   was extracted from the source — in em OR in px against that rule's own
   font-size, because Ruth expresses tracking in px. Those are the section
   eyebrows, and they are the signature this change removes.

   Three kinds were deliberately kept:
     • `.brand` and `.topbar__sub` — brand lockups in a top bar, which is
       exactly what Nia's own two uppercase strings are.
     • `thead th` — small caps on a data-table column header is a document
       convention, not a graphic device.
     • `.cert .seal` — a certificate seal. Formality is the point. */
.cp .cl, .defs__h, .doc__eyebrow, .dupehead, .eyebrow, .flip__b .tag,
.flip__f .tag, .hero .ey, .hero .eyebrow, .kick, .krow .l, .lbl, .mbody h5,
.modal__ey, .nextbox-h, .qr__cap, .repbox .rl, .rhero .pill, .sched-meta .k,
.sched-terms .tl, .sched-title .ey, .sched-total .lbl, .sec h3, .stat__k,
.step h4, .tile .k, .tip .th, .welcome .k, h2.section,
/* Three more on Ruth sit just under the tracking threshold but are the
   same device: uppercase section headings and a column label. */
.howto h2, .cases h2, .dev-head, .case-badge {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--sans);
  font-weight: 600;
}
/* These carried their size from a mono face or a 10px lockup; give them a
   readable size back rather than leaving tiny text in the interface font. */
.cp .cl, .defs__h, .doc__eyebrow, .hero .ey, .hero .eyebrow, .kick, .krow .l,
.lbl, .modal__ey, .nextbox-h, .qr__cap, .repbox .rl, .sched-meta .k,
.sched-terms .tl, .sched-title .ey, .stat__k, .tile .k, .tip .th,
.welcome .k, .dev-head {
  font-size: 13px;
  color: var(--muted);
}
.howto h2, .cases h2, .sec h3, h2.section { font-size: 16px; letter-spacing: -.025em; }

/* Scout (/team/procurement) keeps its styles in the shared css/team.css
   rather than a page <style>, so its selectors are listed separately. Same
   extraction, same threshold. `.cc-table th` is a data-table header and is
   therefore NOT in this list — it keeps its small caps. */
.ask-scout__intro-sub, .cc-matrix__sort-label, .cc-stat__label,
.cc-uploader__recent-title, .legend-dims dt, .legend-section__title,
.cc-daily__title, .cc-catalog__source-badge, .cc-matrix__title-tag,
.team-topbar__agent-chip, .scout-live {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--sans);
  font-weight: 600;
}
.ask-scout__intro-sub, .cc-stat__label, .cc-matrix__sort-label,
.cc-uploader__recent-title, .legend-dims dt, .legend-section__title { font-size: 13px; }

/* Remaining strays found by rendering each page and reading the computed
   text-transform, rather than by reading the source: a label and a heading
   on the device schedule, a caption on the T&C library, the academy's
   lesson sub-label. */
.fields label, .help h3, .mockq__box .c, .objective b, .branch-outcome b,
.lc-detail .dr b, .lc-sub, .qcard h3, .cc-uploader__field > span {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--sans);
  font-size: 12.5px;
}
.qcard h3 { font-size: 15px; font-weight: 650; letter-spacing: -.025em; }

/* Four strings stay uppercase across the whole team area, and all four are
   brand lockups inside a top bar — `.topbar__sub`, `.brand .kick`,
   `.top__brand small`, `.team-topbar__brand-sub`. That is precisely the
   pattern Nia uses, and the only place she uses it. Data-table column
   headers keep small caps as a document convention. Nothing else does. */

/* ---------- 4. Shape ----------
   Scoped to container classes rather than a blanket rule, so genuine
   circles — avatars, status dots, spinners — keep their radius. */
.card, .panel, .tile, .box, .block, .sheet, .well, .modal, .dialog, .drawer,
.section-card, .stat, .statcard, .table-wrap, .tablewrap, .result, .row-card,
.policycard, .itemcard, .notice, .callout, .alert, .banner, .empty, .form-card {
  border-radius: var(--nia-r);
  box-shadow: var(--shadow);
}
.btn, button, input, select, textarea, .input, .field, .control, .seg, .toggle, .filter,
.tab, .tabs a, .tabs button, .chipbtn, .linkbtn {
  border-radius: var(--nia-r-sm);
}
/* Flat fills. Every gradient panel in these tools was decoration. */
.card, .panel, .tile, .box, .notice, .callout, .banner, .hero, .head, .header-band {
  background-image: none;
}

/* ---------- 5. Bullets ----------
   Hanging indent so a wrapped line aligns under the text and not under
   the marker, and real space between items. */
.card ul:not(.plain):not(.reset), .panel ul:not(.plain):not(.reset),
.prose ul, .copy ul, .body ul {
  list-style: none;
  padding-left: 0;
}
.card ul:not(.plain):not(.reset) > li, .panel ul:not(.plain):not(.reset) > li,
.prose ul > li, .copy ul > li, .body ul > li {
  position: relative;
  padding-left: 17px;
  margin-bottom: 9px;
  line-height: 1.6;
}
.card ul:not(.plain):not(.reset) > li::before, .panel ul:not(.plain):not(.reset) > li::before,
.prose ul > li::before, .copy ul > li::before, .body ul > li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: .58em;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: #096C9E;
}
.prose ol > li, .copy ol > li { margin-bottom: 9px; line-height: 1.6; }

/* ---------- 6. Focus ---------- */
:focus-visible { outline: 2px solid #096C9E; outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }