/* ============================================================================
   ICResG — Design System v4
   Loaded AFTER app.css, so this layer is authoritative.

   TWO SURFACES, ONE SYSTEM
   ------------------------
   PUBLIC   (:root)                   slate ground, ONE electric blue for every
                                      action, gold reserved strictly for earned
                                      standing. Matches chijiukaakuma.com.
   SIGNAL   ([data-surface="signal"])  the member portal and admin — an instrument
                                      panel. Dark and dense; aqua means live,
                                      amber means standing, nothing is decorative.

   Both surfaces declare the SAME token names, so every rule already in app.css
   (344 var() references) repaints correctly on either surface untouched.
   Body text is Century Gothic throughout; only the display face changes.
   ========================================================================== */

/* -------------------------------------------------------------- typefaces --
   Century Gothic is proprietary and ships with MS Office and many OS installs,
   so it is picked up via local() rather than bundled. Jost is the free
   geometric fallback carrying the same proportions where it is absent. */
@font-face {
  font-family: "Century Gothic";
  src: local("Century Gothic"), local("CenturyGothic"), local("Century Gothic Std");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic";
  src: local("Century Gothic Bold"), local("CenturyGothic-Bold"), local("Century Gothic Std Bold");
  font-weight: 700;
  font-display: swap;
}

/* ============================================================================
   SAVANNA — the public surface
   ========================================================================== */
:root {
  /* ---- Core palette --------------------------------------------------- */
  /* Tells the browser to render its OWN chrome — select dropdowns, scrollbars,
     date pickers, autofill — for a light ground. Signal flips this. */
  color-scheme: light;

  /* Warm, but only just. A saturated beige ground reads dated, and cards at
     #FFFCF6 barely separated from it — the page looked like one flat sheet.
     Near-white ground with pure-white cards gives crisp, quiet separation. */
  --paper:      #F8FAFC;   /* ground: slate-50                             */
  --paper-alt:  #F1F5F9;   /* sunk band: slate-100                          */
  --paper-sunk: #E9EEF4;
  --raise:      #FFFFFF;   /* cards                                         */
  --ink:        #0F172A;   /* slate-900                                     */
  --ink-soft:   #475569;   /* slate-600                                     */
  /* Was slate-500 #64748B, which measured 4.34:1 on --paper-alt — under the
     4.5 WCAG AA needs for body text, and it is the colour every muted caption
     on the site uses. Darkened until it clears AA on paper, paper-alt and
     raise alike (4.95 at worst). */
  --ink-faint:  #5B6B82;
  --hairline:   #E2E8F0;   /* slate-200                                     */

  --accent:      #2563EB;  /* electric blue — every action, link, focus ring */
  --accent-dark: #1D4ED8;
  --accent-soft: #EFF6FF;
  --gold:        #D97706;  /* earned standing ONLY: Fellow, Senior, awards  */
  --gold-soft:   #FEF3C7;
  --clay:        #DC2626;  /* destructive / overdue                         */

  --deep:    #0F172A;      /* dark bands: slate-900                         */
  --deep-2:  #1E293B;      /* slate-800                                     */
  --deep-3:  #0A1120;

  /* ---- Legacy token names ----------------------------------------------
     app.css was written against a navy/teal vocabulary. Remapping the names
     here repaints all 344 of its references without editing that file. */
  --navy-deep: var(--deep);
  --navy:      var(--ink);
  --navy-2:    var(--deep-2);
  --navy-3:    var(--deep-3);
  --teal:      var(--accent);
  --teal-dark: var(--accent-dark);
  --teal-soft: var(--accent-soft);
  --amber:     var(--gold);
  --amber-soft:var(--gold-soft);
  --line-blue: #334155;

  /* app.css used --navy for two opposite jobs: brand-dark TEXT and dark PANEL
     ground. On light paper one value serves both; on Signal they invert. The
     panel role now has its own token so each surface can answer separately. */
  --surface-dark:   #0F172A;
  --surface-dark-2: #1E293B;

  /* ---- Type ------------------------------------------------------------
     Body is Century Gothic on both surfaces. Only the display face changes. */
/* One family, everywhere. Century Gothic is not a web font — it ships with
   Windows and with Office on macOS — so Jost carries the same geometric
   skeleton for anyone who does not have it, and URW Gothic covers Linux.
   --head and --mono are kept as separate tokens because the rules that use
   them still differ in weight, tracking and numerals; they simply resolve to
   the same face now. */
  --body:    "Century Gothic", Jost, "URW Gothic", "Futura", "Trebuchet MS", -apple-system, sans-serif;
  --head:    var(--body);
  --display: var(--head);
  --mono:    var(--body);
  --bs-body-font-family: var(--body);
  --bs-font-sans-serif: var(--body);

  /* ---- Fluid type scale ------------------------------------------------
     clamp() adapts continuously from a 360px phone to a 4K panel rather than
     stepping at five fixed breakpoints. */
  --fs-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.80rem);
  --fs-sm:   clamp(0.82rem, 0.79rem + 0.14vw, 0.92rem);
  --fs-base: clamp(0.95rem, 0.91rem + 0.18vw, 1.08rem);
  --fs-md:   clamp(1.05rem, 0.99rem + 0.28vw, 1.25rem);
  --fs-lg:   clamp(1.25rem, 1.10rem + 0.65vw, 1.65rem);
  --fs-xl:   clamp(1.55rem, 1.25rem + 1.30vw, 2.35rem);
  --fs-2xl:  clamp(2.00rem, 1.45rem + 2.40vw, 3.60rem);
  --fs-3xl:  clamp(2.40rem, 1.60rem + 3.60vw, 5.00rem);

  /* ---- Fluid spacing ---------------------------------------------------- */
  --sp-1: clamp(0.25rem, 0.24rem + 0.05vw, 0.32rem);
  --sp-2: clamp(0.50rem, 0.47rem + 0.12vw, 0.66rem);
  --sp-3: clamp(0.75rem, 0.70rem + 0.22vw, 1.00rem);
  --sp-4: clamp(1.00rem, 0.92rem + 0.35vw, 1.45rem);
  --sp-5: clamp(1.50rem, 1.34rem + 0.70vw, 2.30rem);
  --sp-6: clamp(1.75rem, 1.55rem + 0.90vw, 2.60rem);
  --sp-7: clamp(2.25rem, 1.95rem + 1.40vw, 3.60rem);
  --sp-8: clamp(3.00rem, 2.50rem + 2.20vw, 5.00rem);

  /* ---- Radii ------------------------------------------------------------ */
  --radius-sm:   9px;
  --radius:      15px;
  --radius-lg:   22px;
  --radius-xl:   30px;
  --radius-pill: 999px;

  /* ---- Elevation: several low-opacity layers, not one soft blur --------- */
  --shadow-xs: 0 1px 2px rgba(15,23,42,.05);
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-md: 0 2px 4px rgba(15,23,42,.04), 0 8px 20px -6px rgba(15,23,42,.10);
  --shadow-lg: 0 2px 4px rgba(15,23,42,.04), 0 14px 34px -10px rgba(15,23,42,.14);
  --shadow-xl: 0 4px 10px rgba(15,23,42,.05), 0 34px 68px -20px rgba(15,23,42,.22);
  --shadow-glow: 0 0 0 1px rgba(37,99,235,.24), 0 10px 34px rgba(37,99,235,.22);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out:    cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 140ms;
  --dur:      240ms;
  --dur-slow: 420ms;
  --dur-page: 620ms;

  --chart-grid: rgba(15,23,42,.09);

  /* ---- Navbar geometry -------------------------------------------------- */
  --nav-h: 76px;
  --nav-h-stuck: 62px;
  --nav-strip-h: 34px;

  /* ---- Membership grades ------------------------------------------------
     The ladder is the point, so it reads as one: lower grades sit in quiet
     neutrals, rise through blue, and only conferred grades earn gold. */
  --tag-grade-student-bg:#EFE9DC;      --tag-grade-student-fg:#6B5B47;      --tag-grade-student-bd:#DDD1BC;
  --tag-grade-graduate-bg:#E8E5D8;     --tag-grade-graduate-fg:#5E5A42;     --tag-grade-graduate-bd:#D5CFB8;
  --tag-grade-associate-bg:#DFF0EC;    --tag-grade-associate-fg:#186356;    --tag-grade-associate-bd:#B6DCD3;
  --tag-grade-member-bg:#D7EBE4;       --tag-grade-member-fg:#14584B;       --tag-grade-member-bd:#A9D6C9;
  --tag-grade-professional-bg:#CFE6DD; --tag-grade-professional-fg:#0F4C41; --tag-grade-professional-bd:#9BCDBE;
  --tag-grade-senior-bg:#FBEFD3;       --tag-grade-senior-fg:#7A5405;       --tag-grade-senior-bd:#EBD49A;
  --tag-grade-fellow-bg:linear-gradient(135deg,#FDF3D9,#F6E3AE);
  --tag-grade-fellow-fg:#6B4903;       --tag-grade-fellow-bd:#D9B44A;
  --tag-grade-honorary-bg:#F5E7D6;     --tag-grade-honorary-fg:#7C4A1E;     --tag-grade-honorary-bd:#E4C9A8;

  /* ---- Publication types ------------------------------------------------ */
  --tag-pub-journal-bg:#DFF0EC;    --tag-pub-journal-fg:#12594C;    --tag-pub-journal-bd:#B0DACF;
  --tag-pub-conference-bg:#FBEFD3; --tag-pub-conference-fg:#7A5405; --tag-pub-conference-bd:#EBD49A;
  --tag-pub-workshop-bg:#E7EEDC;   --tag-pub-workshop-fg:#4A5C24;   --tag-pub-workshop-bd:#CBDCB0;
  --tag-pub-preprint-bg:#EDE7DE;   --tag-pub-preprint-fg:#5F5245;   --tag-pub-preprint-bd:#D8CCBC;
  --tag-pub-book-bg:#F6E3DD;       --tag-pub-book-fg:#8A3B26;       --tag-pub-book-bd:#E5C0B3;
  --tag-pub-report-bg:#EAE5DA;     --tag-pub-report-fg:#585044;     --tag-pub-report-bd:#D5CCBC;
  --tag-pub-other-bg:#EAE5DA;      --tag-pub-other-fg:#585044;      --tag-pub-other-bd:#D5CCBC;

  /* ---- Semantic states -------------------------------------------------- */
  --tag-ok-bg:#DFF0EC;      --tag-ok-fg:#12594C;      --tag-ok-bd:#AFD9CE;
  --tag-warn-bg:#FBEFD3;    --tag-warn-fg:#7A5405;    --tag-warn-bd:#EBD49A;
  --tag-bad-bg:#F8E6E1;     --tag-bad-fg:#8F3520;     --tag-bad-bd:#E8C2B6;
  --tag-info-bg:#E4EDEA;    --tag-info-fg:#2C5A50;    --tag-info-bd:#C3D9D2;
  --tag-special-bg:#F0E9DC; --tag-special-fg:#6B5320; --tag-special-bd:#DCCDAC;
  --tag-neutral-bg:#EDE7DC; --tag-neutral-fg:#5F5245; --tag-neutral-bd:#DAD0BF;
}

/* ============================================================================
   SIGNAL — the portal / admin surface
   Same token names, different values, so app.css follows automatically.
   ========================================================================== */
[data-surface="signal"] {
  color-scheme: dark;   /* native selects, scrollbars and pickers follow suit */

  --paper:      #0C1114;
  --paper-alt:  #101A1E;
  --paper-sunk: #0A0F12;
  --raise:      #131B1F;
  --ink:        #E2EAEC;
  --ink-soft:   #93A6AD;
  --ink-faint:  #6F848B;
  --hairline:   #222E33;

  --accent:      #35E0C8;   /* aqua — live, active, actionable              */
  --accent-dark: #1FB8A3;
  --accent-soft: rgba(53,224,200,.13);
  --gold:        #F2B441;   /* standing                                     */
  --gold-soft:   rgba(242,180,65,.13);
  --clay:        #FF6B7A;

  --deep:   #070C0E;
  --deep-2: #101A1E;
  --deep-3: #050A0B;

  --navy-deep: var(--deep);
  --navy:      var(--ink);        /* text role: must stay light here */
  --navy-2:    var(--ink-soft);
  --navy-3:    var(--deep-3);
  --surface-dark:   #0F1A1E;      /* panel role: the sidebar, dark cards      */
  --surface-dark-2: #16242A;
  --teal:      var(--accent);
  --teal-dark: var(--accent-dark);
  --teal-soft: var(--accent-soft);
  --amber:     var(--gold);
  --amber-soft:var(--gold-soft);
  --line-blue: #2C3D43;

  /* Century Gothic here too — the portal used to set Sora for headings. */
  --head:    var(--body);
  --display: var(--head);

  /* Instrument, not brochure: tighter corners than Savanna. */
  --radius-sm:   5px;
  --radius:      8px;
  --radius-lg:   12px;
  --radius-xl:   16px;

  /* Shadows barely read on a dark ground — separation comes from the rule. */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.45);
  --shadow-md: 0 6px 20px rgba(0,0,0,.5);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.55);
  --shadow-xl: 0 30px 70px rgba(0,0,0,.6);
  --shadow-glow: 0 0 0 1px rgba(53,224,200,.28), 0 8px 28px rgba(53,224,200,.18);

  --chart-grid: rgba(226,234,236,.09);

  /* Grades on a dark ground use transparent washes, so they sit *in* the
     surface rather than on top of it as light rectangles. */
  --tag-grade-student-bg:rgba(226,234,236,.07);    --tag-grade-student-fg:#93A6AD;      --tag-grade-student-bd:rgba(226,234,236,.14);
  --tag-grade-graduate-bg:rgba(226,234,236,.09);   --tag-grade-graduate-fg:#A9BCC2;     --tag-grade-graduate-bd:rgba(226,234,236,.16);
  --tag-grade-associate-bg:rgba(53,224,200,.09);   --tag-grade-associate-fg:#4FD8C4;    --tag-grade-associate-bd:rgba(53,224,200,.22);
  --tag-grade-member-bg:rgba(53,224,200,.12);      --tag-grade-member-fg:#5DE3D0;       --tag-grade-member-bd:rgba(53,224,200,.28);
  --tag-grade-professional-bg:rgba(53,224,200,.16);--tag-grade-professional-fg:#6FEBDA; --tag-grade-professional-bd:rgba(53,224,200,.34);
  --tag-grade-senior-bg:rgba(242,180,65,.13);      --tag-grade-senior-fg:#F2B441;       --tag-grade-senior-bd:rgba(242,180,65,.3);
  --tag-grade-fellow-bg:linear-gradient(135deg,rgba(242,180,65,.26),rgba(242,180,65,.12));
  --tag-grade-fellow-fg:#FFD07A;                   --tag-grade-fellow-bd:rgba(242,180,65,.48);
  --tag-grade-honorary-bg:rgba(255,155,110,.13);   --tag-grade-honorary-fg:#FFA97C;     --tag-grade-honorary-bd:rgba(255,155,110,.3);

  --tag-pub-journal-bg:rgba(53,224,200,.11);    --tag-pub-journal-fg:#4FD8C4;    --tag-pub-journal-bd:rgba(53,224,200,.26);
  --tag-pub-conference-bg:rgba(242,180,65,.12); --tag-pub-conference-fg:#F2B441; --tag-pub-conference-bd:rgba(242,180,65,.28);
  --tag-pub-workshop-bg:rgba(158,222,120,.11);  --tag-pub-workshop-fg:#9EDE78;   --tag-pub-workshop-bd:rgba(158,222,120,.26);
  --tag-pub-preprint-bg:rgba(226,234,236,.08);  --tag-pub-preprint-fg:#A9BCC2;   --tag-pub-preprint-bd:rgba(226,234,236,.18);
  --tag-pub-book-bg:rgba(255,107,122,.11);      --tag-pub-book-fg:#FF8C99;       --tag-pub-book-bd:rgba(255,107,122,.26);
  --tag-pub-report-bg:rgba(226,234,236,.06);    --tag-pub-report-fg:#8FA3AA;     --tag-pub-report-bd:rgba(226,234,236,.15);
  --tag-pub-other-bg:rgba(226,234,236,.06);     --tag-pub-other-fg:#8FA3AA;      --tag-pub-other-bd:rgba(226,234,236,.15);

  --tag-ok-bg:rgba(53,224,200,.12);      --tag-ok-fg:#4FD8C4;     --tag-ok-bd:rgba(53,224,200,.28);
  --tag-warn-bg:rgba(242,180,65,.12);    --tag-warn-fg:#F2B441;   --tag-warn-bd:rgba(242,180,65,.28);
  --tag-bad-bg:rgba(255,107,122,.12);    --tag-bad-fg:#FF8C99;    --tag-bad-bd:rgba(255,107,122,.28);
  --tag-info-bg:rgba(122,183,255,.11);   --tag-info-fg:#8FC0FF;   --tag-info-bd:rgba(122,183,255,.26);
  --tag-special-bg:rgba(196,164,255,.11);--tag-special-fg:#C4A4FF;--tag-special-bd:rgba(196,164,255,.26);
  --tag-neutral-bg:rgba(226,234,236,.07);--tag-neutral-fg:#93A6AD;--tag-neutral-bd:rgba(226,234,236,.15);
}

/* ============================================================================
   BASE
   ========================================================================== */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-base);
  line-height: 1.65;
}

h1, h2, h3, .display-head {
  font-family: var(--head);
  color: var(--ink);
  letter-spacing: -.025em;
  line-height: 1.08;
  text-wrap: balance;
}
h1 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.04em; }
h2 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.035em; }
h3 { font-size: var(--fs-md); font-weight: 700; }
/* One face throughout now, so this only differs in weight and tracking. */
h4, h5, h6 { font-family: var(--body); font-weight: 700; letter-spacing: -.005em; color: var(--ink); }

[data-surface="signal"] h1,
[data-surface="signal"] h2,
[data-surface="signal"] h3 { font-weight: 700; letter-spacing: -.03em; }

a { color: var(--accent-dark); text-decoration: none; transition: color var(--dur-fast); }
a:hover { color: var(--ink); text-decoration: underline; }
/* :not(.btn) — this rule is more specific than `.btn { color: var(--btn-fg) }`,
   so without the exclusion it repainted every <a class="btn btn-primary"> in
   the portal and admin with the accent colour ON the accent background. "Add
   New" was aqua text on an aqua pill: a 1:1 contrast ratio, i.e. invisible. */
[data-surface="signal"] a:not(.btn) { color: var(--accent); }
[data-surface="signal"] a:hover { color: var(--ink); }

.small-caps {
  font-family: var(--body);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent-dark);
}
.small-caps::before {
  content: ""; display: inline-block; width: 22px; height: 2px;
  background: var(--accent); vertical-align: middle; margin-right: .6rem;
}
[data-surface="signal"] .small-caps { color: var(--accent); letter-spacing: .14em; }

/* Numerals line up wherever they sit in columns. */
table, .stat-num, [data-count], .tabular { font-variant-numeric: tabular-nums; }

/* Respect the OS setting. Decoration stops; nothing becomes unusable. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- icons --- */
.ico {
  width: var(--ico-size, 1em);
  height: var(--ico-size, 1em);
  flex: none;
  vertical-align: -0.135em;
  stroke-width: 1.75;
  overflow: visible;
}
.ico--lg { --ico-size: 1.35em; }
.ico--xl { --ico-size: 2em; stroke-width: 1.5; }

/* ----------------------------------------------------------------- tags --- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .38em;
  font-family: var(--body);
  font-weight: 700;
  font-size: calc(var(--fs-xs) * var(--tag-scale, 1));
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1;
  padding: .42em .8em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--tag-bd, var(--hairline));
  background: var(--tag-bg, var(--paper-alt));
  color: var(--tag-fg, var(--ink-soft));
  white-space: nowrap;
  vertical-align: middle;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
[data-surface="signal"] .tag {
  letter-spacing: .06em;
  border-radius: var(--radius-sm);
}
.tag__ico { --ico-size: 1.05em; stroke-width: 2.1; }
.tag--state, .tag--pub { padding: .34em .68em; }
a:hover > .tag, .tag-hover:hover { transform: translateY(-1px); box-shadow: var(--shadow-xs); }

.tag--grade-student      { --tag-bg:var(--tag-grade-student-bg);      --tag-fg:var(--tag-grade-student-fg);      --tag-bd:var(--tag-grade-student-bd); }
.tag--grade-graduate     { --tag-bg:var(--tag-grade-graduate-bg);     --tag-fg:var(--tag-grade-graduate-fg);     --tag-bd:var(--tag-grade-graduate-bd); }
.tag--grade-associate    { --tag-bg:var(--tag-grade-associate-bg);    --tag-fg:var(--tag-grade-associate-fg);    --tag-bd:var(--tag-grade-associate-bd); }
.tag--grade-member       { --tag-bg:var(--tag-grade-member-bg);       --tag-fg:var(--tag-grade-member-fg);       --tag-bd:var(--tag-grade-member-bd); }
.tag--grade-professional { --tag-bg:var(--tag-grade-professional-bg); --tag-fg:var(--tag-grade-professional-fg); --tag-bd:var(--tag-grade-professional-bd); }
.tag--grade-senior       { --tag-bg:var(--tag-grade-senior-bg);       --tag-fg:var(--tag-grade-senior-fg);       --tag-bd:var(--tag-grade-senior-bd); }
.tag--grade-fellow       { --tag-bg:var(--tag-grade-fellow-bg);       --tag-fg:var(--tag-grade-fellow-fg);       --tag-bd:var(--tag-grade-fellow-bd); }
.tag--grade-honorary     { --tag-bg:var(--tag-grade-honorary-bg);     --tag-fg:var(--tag-grade-honorary-fg);     --tag-bd:var(--tag-grade-honorary-bd); }

.tag--pub-journal    { --tag-bg:var(--tag-pub-journal-bg);    --tag-fg:var(--tag-pub-journal-fg);    --tag-bd:var(--tag-pub-journal-bd); }
.tag--pub-conference { --tag-bg:var(--tag-pub-conference-bg); --tag-fg:var(--tag-pub-conference-fg); --tag-bd:var(--tag-pub-conference-bd); }
.tag--pub-workshop   { --tag-bg:var(--tag-pub-workshop-bg);   --tag-fg:var(--tag-pub-workshop-fg);   --tag-bd:var(--tag-pub-workshop-bd); }
.tag--pub-preprint   { --tag-bg:var(--tag-pub-preprint-bg);   --tag-fg:var(--tag-pub-preprint-fg);   --tag-bd:var(--tag-pub-preprint-bd); }
.tag--pub-book       { --tag-bg:var(--tag-pub-book-bg);       --tag-fg:var(--tag-pub-book-fg);       --tag-bd:var(--tag-pub-book-bd); }
.tag--pub-report     { --tag-bg:var(--tag-pub-report-bg);     --tag-fg:var(--tag-pub-report-fg);     --tag-bd:var(--tag-pub-report-bd); }
.tag--pub-other      { --tag-bg:var(--tag-pub-other-bg);      --tag-fg:var(--tag-pub-other-fg);      --tag-bd:var(--tag-pub-other-bd); }

.tag--ok      { --tag-bg:var(--tag-ok-bg);      --tag-fg:var(--tag-ok-fg);      --tag-bd:var(--tag-ok-bd); }
.tag--warn    { --tag-bg:var(--tag-warn-bg);    --tag-fg:var(--tag-warn-fg);    --tag-bd:var(--tag-warn-bd); }
.tag--bad     { --tag-bg:var(--tag-bad-bg);     --tag-fg:var(--tag-bad-fg);     --tag-bd:var(--tag-bad-bd); }
.tag--info    { --tag-bg:var(--tag-info-bg);    --tag-fg:var(--tag-info-fg);    --tag-bd:var(--tag-info-bd); }
.tag--special { --tag-bg:var(--tag-special-bg); --tag-fg:var(--tag-special-fg); --tag-bd:var(--tag-special-bd); }
.tag--neutral { --tag-bg:var(--tag-neutral-bg); --tag-fg:var(--tag-neutral-fg); --tag-bd:var(--tag-neutral-bd); }

/* ------------------------------------------------------ focus & a11y ------ */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.skip-link {
  position: fixed; left: var(--sp-3); top: -120%;
  z-index: 3000; padding: var(--sp-3) var(--sp-4);
  background: var(--ink); color: var(--paper);
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus { top: 0; color: var(--paper); text-decoration: none; }

/* ----------------------------------------------------------- utilities --- */
.text-teal, .text-accent { color: var(--accent-dark) !important; }
[data-surface="signal"] .text-teal, [data-surface="signal"] .text-accent { color: var(--accent) !important; }
.text-amber, .text-gold { color: var(--gold) !important; }
.text-navy, .text-ink   { color: var(--ink) !important; }
.text-soft  { color: var(--ink-soft) !important; }
.text-faint { color: var(--ink-faint) !important; }
.bg-paper-alt { background: var(--paper-alt) !important; }
.text-scholar  { color: #4285f4 !important; }
.text-linkedin { color: #0a66c2 !important; }
.text-github   { color: var(--ink) !important; }
.font-mono { font-family: var(--mono); }

/* ------------------------------------------------- ultra-wide container --- */
/* app.css widens .container to 92vw past 1700px, which on a 4K panel leaves
   every row a different width. Cap the measure once so headings, filter bars
   and card grids all align to the same rails. */
@media (min-width: 1700px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: min(92vw, 2400px);
    margin-inline: auto;
  }
}