/* ============================================================================
   instrument.css — House "Instrument" design tokens (Phase 1 pilot)
   Ref: ~/codexpro-bridge/design/HOUSE-DESIGN-SYSTEM.md
   Site: Physics hub — accent gold #e3b341 + teal #4cc2a8 ("lab instrument").

   SCOPE / SAFETY:
   - ADDITIVE ONLY. This file defines CSS custom properties + a small set of
     OPT-IN utility/component classes (all prefixed `.inst-`).
   - It deliberately does NOT restyle bare element selectors (body, table, h1…)
     so it cannot break the ~102 existing hand-built pages, which carry their
     own inline <style>. Nothing here uses !important.
   - Existing per-page tokens (e.g. --line, --bg) are NOT overridden; house
     tokens live under the `--inst-` namespace to avoid collisions.
   ========================================================================== */

:root{
  /* surfaces — Physics admin + NOLA Chill dark family */
  --inst-ink-900:#0a0e15;
  --inst-ink-850:#0f141d;
  --inst-ink-800:#121823;
  --inst-ink-700:#1e293b;
  --inst-ink-600:#334155;
  --inst-page:var(--inst-ink-900);
  --inst-surface:var(--inst-ink-850);

  /* text */
  --inst-text:#eef1f7;
  --inst-text-muted:#8a93a6;
  --inst-text-faint:#5b6376;

  /* hairlines — the signature edge */
  --inst-line:rgba(255,255,255,.07);
  --inst-line-strong:rgba(255,255,255,.13);

  /* accent — Physics hub identity: her colors — blue primary + yellow highlight */
  --inst-accent:#4f8cff;
  --inst-accent-2:#ffc83d;

  /* status */
  --inst-pos:#34d399;
  --inst-warn:#ffc83d;
  --inst-neg:#ff6b6b;
  --inst-info:#4f8cff;

  /* radius — UNIFIED. one value, no mixing. */
  --inst-r:8px;
  --inst-r-sm:6px;

  /* type */
  --inst-font-ui:'Inter','Inter Tight',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --inst-font-display:'Inter Tight','Inter',system-ui,-apple-system,sans-serif;
  --inst-font-mono:'JetBrains Mono','Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* spacing — 4pt grid */
  --inst-s1:4px;
  --inst-s2:8px;
  --inst-s3:12px;
  --inst-s4:16px;
  --inst-s6:24px;
  --inst-s8:32px;
}

/* ----------------------------------------------------------------------------
   Type scale — opt-in utility classes (pick one; don't mix)
   -------------------------------------------------------------------------- */
.inst-micro-label{
  font-family:var(--inst-font-ui);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--inst-text-faint);
}
.inst-body{
  font-family:var(--inst-font-ui);
  font-size:13.5px;
  line-height:1.5;
  color:var(--inst-text);
}
.inst-lead{
  font-family:var(--inst-font-ui);
  font-size:17px;
  line-height:1.5;
  color:var(--inst-text-muted);
}
.inst-display{
  font-family:var(--inst-font-display);
  font-size:clamp(28px,4vw,44px);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.08;
  color:var(--inst-text);
}
.inst-num{
  font-family:var(--inst-font-mono);
  font-variant-numeric:tabular-nums lining-nums;
}

/* ----------------------------------------------------------------------------
   Card — surface bg, 1px hairline, unified radius, NO drop shadow.
   Content sets height; no min-height voids.
   -------------------------------------------------------------------------- */
.inst-card{
  background:var(--inst-surface);
  border:1px solid var(--inst-line);
  border-radius:var(--inst-r);
  padding:var(--inst-s4);
  color:var(--inst-text);
}

/* ----------------------------------------------------------------------------
   Table (the hero element) — dense rows, hairline dividers, no zebra,
   10px uppercase header, mono right-aligned numerics, sticky header.
   Scoped under .inst-table so it never touches existing page tables.
   -------------------------------------------------------------------------- */
.inst-table{
  width:100%;
  border-collapse:collapse;
  font-family:var(--inst-font-ui);
  font-size:13.5px;
  color:var(--inst-text);
}
.inst-table thead th{
  position:sticky;
  top:0;
  background:var(--inst-surface);
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--inst-text-faint);
  text-align:left;
  padding:var(--inst-s2) var(--inst-s3);
  border-bottom:1px solid var(--inst-line-strong);
}
.inst-table tbody td{
  padding:var(--inst-s2) var(--inst-s3);
  border-bottom:1px solid var(--inst-line);
}
.inst-table td.inst-num,
.inst-table th.inst-num{
  font-family:var(--inst-font-mono);
  font-variant-numeric:tabular-nums lining-nums;
  text-align:right;
}

/* ----------------------------------------------------------------------------
   KPI scorecard — grid where a hairline grid shows through the cells;
   tight padding; big mono number + micro-label.
   -------------------------------------------------------------------------- */
.inst-kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;
  background:var(--inst-line);
  border:1px solid var(--inst-line);
  border-radius:var(--inst-r);
  overflow:hidden;
}
.inst-kpi{
  background:var(--inst-surface);
  padding:var(--inst-s4);
}
.inst-kpi__label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--inst-text-faint);
}
.inst-kpi__value{
  margin-top:var(--inst-s1);
  font-family:var(--inst-font-mono);
  font-variant-numeric:tabular-nums lining-nums;
  font-size:26px;
  line-height:1.1;
  color:var(--inst-text);
}

/* ----------------------------------------------------------------------------
   Button — small radius; primary = solid accent (no gradient); 1px lift.
   secondary = hairline border, transparent.
   -------------------------------------------------------------------------- */
.inst-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--inst-font-ui);
  font-size:13px;
  font-weight:600;
  border-radius:var(--inst-r-sm);
  padding:var(--inst-s2) var(--inst-s4);
  border:1px solid var(--inst-line-strong);
  background:transparent;
  color:var(--inst-text);
  cursor:pointer;
  transition:transform 160ms cubic-bezier(.34,1.56,.64,1),
             border-color 160ms ease, background 160ms ease;
}
.inst-btn:hover{ transform:translateY(-1px); }
.inst-btn--primary{
  background:var(--inst-accent);
  border-color:var(--inst-accent);
  color:var(--inst-ink-900);
}

/* ----------------------------------------------------------------------------
   Hairline helpers + accent rule (used by nav underlines, dividers)
   -------------------------------------------------------------------------- */
.inst-hairline{ border:0; border-top:1px solid var(--inst-line); }
.inst-accent-text{ color:var(--inst-accent); }
.inst-accent-2-text{ color:var(--inst-accent-2); }

/* ----------------------------------------------------------------------------
   Active site skin
   Add `theme-terminal` to <body> to apply the house finish to existing pages.
   The page-specific layout remains intact; this layer removes glass/shadow
   treatment and normalizes the interface to the instrument system.
   -------------------------------------------------------------------------- */
body.theme-terminal{
  --bg:#0a0e15;
  --panel:#0f141d;
  --panel2:#121823;
  --glass:#0f141d;
  --glass2:#121823;
  --line:rgba(255,255,255,.09);
  --line2:rgba(255,255,255,.16);
  --ink:#eef1f7;
  --soft:#c7cfdd;
  --muted:#8b94a7;
  --faint:#5f687a;
  --blue:#4f8cff;
  --cyan:#43d5de;
  --yellow:#ffc83d;
  --green:#69d7a1;
  --red:#ff6b6b;
  --violet:#8aa2c0;
  --brand:#4f8cff;
  --brand-2:#4f8cff;
  --accent:#4f8cff;
  --accent-2:#ffc83d;
  --r:8px;
  --sans:var(--inst-font-ui);
  --mono:var(--inst-font-mono);
  color:var(--ink);
  background:#0a0e15;
  font-family:var(--inst-font-ui);
  font-variant-numeric:tabular-nums lining-nums;
}

body.theme-terminal:before,
body.theme-terminal::before{
  background:none;
  opacity:0;
}

body.theme-terminal *,
body.theme-terminal *::before,
body.theme-terminal *::after{
  box-shadow:none;
}

body.theme-terminal h1,
body.theme-terminal h2,
body.theme-terminal h3,
body.theme-terminal .title,
body.theme-terminal .display,
body.theme-terminal .heroTitle{
  letter-spacing:0;
}

body.theme-terminal a{
  color:inherit;
}

body.theme-terminal :focus-visible{
  outline:2px solid color-mix(in srgb,var(--accent) 62%,white 12%);
  outline-offset:2px;
}

body.theme-terminal .wrap,
body.theme-terminal .shell,
body.theme-terminal main{
  isolation:isolate;
}

body.theme-terminal .mast,
body.theme-terminal .card,
body.theme-terminal a.card,
body.theme-terminal .panel,
body.theme-terminal .hero,
body.theme-terminal .heroMain,
body.theme-terminal .command,
body.theme-terminal .fact,
body.theme-terminal .dailyhome,
body.theme-terminal .pathhome,
body.theme-terminal .finderHome,
body.theme-terminal .repairHero,
body.theme-terminal .focusBrief,
body.theme-terminal .priorityHome,
body.theme-terminal .adaptiveNext,
body.theme-terminal .homepanel,
body.theme-terminal .studyfactbar,
body.theme-terminal .funfact,
body.theme-terminal .wallet,
body.theme-terminal .syncstate,
body.theme-terminal .qcard,
body.theme-terminal .storeCard,
body.theme-terminal .screenCard,
body.theme-terminal .staticCard,
body.theme-terminal .learnCard,
body.theme-terminal .flash,
body.theme-terminal .question,
body.theme-terminal .overview,
body.theme-terminal .module,
body.theme-terminal .choice,
body.theme-terminal .feedback,
body.theme-terminal .comboBank,
body.theme-terminal .comboPrompt,
body.theme-terminal .precisionCoach,
body.theme-terminal .precisionOut,
body.theme-terminal .repairPanel,
body.theme-terminal .memory,
body.theme-terminal .answer,
body.theme-terminal .photoPick,
body.theme-terminal .fallback-card,
body.theme-terminal .topicCard,
body.theme-terminal details,
body.theme-terminal .session,
body.theme-terminal .kpi,
body.theme-terminal .stat,
body.theme-terminal .usage,
body.theme-terminal .profileCard,
body.theme-terminal .dcard,
body.theme-terminal .fx,
body.theme-terminal .work,
body.theme-terminal .note,
body.theme-terminal .rule,
body.theme-terminal .ex,
body.theme-terminal .calc,
body.theme-terminal .tableWrap,
body.theme-terminal .pathStep,
body.theme-terminal .priorityItem,
body.theme-terminal .focusChip,
body.theme-terminal .repairTip,
body.theme-terminal .finderResult,
body.theme-terminal .flagLine,
body.theme-terminal .dailyQuestion input,
body.theme-terminal .comboPrompt,
body.theme-terminal .nojs-game{
  background:#0f141d;
  border:1px solid var(--line);
  border-radius:8px;
}

body.theme-terminal .card:hover,
body.theme-terminal a.card:hover,
body.theme-terminal .module:hover,
body.theme-terminal .choice:hover,
body.theme-terminal .focusChip:hover,
body.theme-terminal .pathStep:hover,
body.theme-terminal .priorityItem:hover{
  transform:none;
  background:#121823;
  border-color:var(--line2);
}

body.theme-terminal .topNav a,
body.theme-terminal .nav a,
body.theme-terminal nav a,
body.theme-terminal .appswitch a,
body.theme-terminal .btn,
body.theme-terminal .button,
body.theme-terminal .miniBtn,
body.theme-terminal .mode,
body.theme-terminal button,
body.theme-terminal .gbtn,
body.theme-terminal .ch,
body.theme-terminal .factbtn,
body.theme-terminal .fileButton,
body.theme-terminal .refreshLatest,
body.theme-terminal .masterBtn,
body.theme-terminal .repBtn,
body.theme-terminal .chip,
body.theme-terminal .tag,
body.theme-terminal .b,
body.theme-terminal .pill,
body.theme-terminal .badge{
  border:1px solid var(--line2);
  border-radius:8px;
  background:#121823;
  color:var(--ink);
  box-shadow:none;
}

body.theme-terminal .topNav a:hover,
body.theme-terminal .nav a:hover,
body.theme-terminal nav a:hover,
body.theme-terminal .appswitch a:hover,
body.theme-terminal .btn:hover,
body.theme-terminal .button:hover,
body.theme-terminal .miniBtn:hover,
body.theme-terminal .mode:hover,
body.theme-terminal button:hover,
body.theme-terminal .gbtn:hover,
body.theme-terminal .ch:hover,
body.theme-terminal .factbtn:hover,
body.theme-terminal .fileButton:hover,
body.theme-terminal .refreshLatest:hover{
  background:#16202d;
  border-color:rgba(255,255,255,.24);
  transform:none;
}

body.theme-terminal .primary,
body.theme-terminal .cur,
body.theme-terminal .on,
body.theme-terminal .active,
body.theme-terminal .mode.on,
body.theme-terminal .button.primary,
body.theme-terminal .btn.primary,
body.theme-terminal .gbtn.primary,
body.theme-terminal .topNav a.primary,
body.theme-terminal .nav a.cur,
body.theme-terminal .appswitch a.cur,
body.theme-terminal .focusChip.active,
body.theme-terminal .module.on,
body.theme-terminal .choice.on{
  background:color-mix(in srgb,var(--accent) 18%,#0f141d 82%);
  border-color:color-mix(in srgb,var(--accent) 48%,transparent);
  color:#eefcff;
}

body.theme-terminal .button.yellow,
body.theme-terminal .btn.warn,
body.theme-terminal .dailyhome button.primary,
body.theme-terminal .repairActions a:first-child,
body.theme-terminal .warn,
body.theme-terminal .gold{
  background:rgba(227,179,65,.12);
  border-color:rgba(227,179,65,.34);
  color:#ffe5a3;
}

body.theme-terminal .button.danger,
body.theme-terminal .danger,
body.theme-terminal .bad,
body.theme-terminal .down{
  background:rgba(226,112,107,.10);
  border-color:rgba(226,112,107,.34);
  color:#ffd0cd;
}

body.theme-terminal .good,
body.theme-terminal .up,
body.theme-terminal .ok,
body.theme-terminal .oknote{
  background:rgba(105,215,161,.09);
  border-color:rgba(105,215,161,.28);
  color:#d9fff0;
}

/* --- finish pass (Claude): flatten remaining gradient pills, restore the
   category wayfinding edges the global box-shadow:none removed, and give
   in-content links an affordance back. --- */
body.theme-terminal .pseg,
body.theme-terminal .qkind,
body.theme-terminal .appswitch a.cur{
  background:#121823;
  background-image:none;
  color:var(--ink);
  border:1px solid var(--line2);
}
body.theme-terminal .pseg.on{
  background:color-mix(in srgb,var(--accent) 24%,#0f141d 76%);
  background-image:none;
  border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);
  color:#fff3d6;
}
body.theme-terminal .dailyhome,
body.theme-terminal .fact,
body.theme-terminal .repairHero,
body.theme-terminal .finderHome,
body.theme-terminal .priorityItem,
body.theme-terminal .pathStep{
  border-left:3px solid color-mix(in srgb,var(--accent) 60%,transparent);
}
body.theme-terminal p a,
body.theme-terminal li a,
body.theme-terminal .lead a,
body.theme-terminal .pageLead a,
body.theme-terminal td a{
  color:var(--accent-2);
}

body.theme-terminal input,
body.theme-terminal textarea,
body.theme-terminal select{
  border:1px solid var(--line2);
  border-radius:8px;
  background:#0a0e15;
  color:var(--ink);
  box-shadow:none;
}

body.theme-terminal button,
body.theme-terminal input,
body.theme-terminal select,
body.theme-terminal .btn,
body.theme-terminal .button,
body.theme-terminal .miniBtn,
body.theme-terminal .gbtn,
body.theme-terminal .factbtn,
body.theme-terminal .fileButton,
body.theme-terminal .refreshLatest,
body.theme-terminal .topNav a,
body.theme-terminal .nav a,
body.theme-terminal nav a,
body.theme-terminal .appswitch a,
body.theme-terminal .adminnav a,
body.theme-terminal .adminnav button,
body.theme-terminal .sub a,
body.theme-terminal .footer a,
body.theme-terminal .bar a,
body.theme-terminal .chip{
  min-height:40px;
}

body.theme-terminal .sub a,
body.theme-terminal .footer a,
body.theme-terminal .bar a{
  display:inline-flex;
  align-items:center;
}

body.theme-terminal input:focus,
body.theme-terminal textarea:focus,
body.theme-terminal select:focus{
  border-color:color-mix(in srgb,var(--accent) 55%,white 5%);
  outline:2px solid rgba(67,213,222,.16);
  outline-offset:0;
  box-shadow:none;
}

body.theme-terminal table{
  width:100%;
  border-collapse:collapse;
  background:#0f141d;
  border-radius:0;
}

body.theme-terminal th{
  position:sticky;
  top:0;
  background:#121823;
  color:var(--faint);
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  border-bottom:1px solid var(--line2);
}

body.theme-terminal td{
  color:var(--soft);
  border-bottom:1px solid var(--line);
}

body.theme-terminal .num,
body.theme-terminal .bal,
body.theme-terminal .pay,
body.theme-terminal .dailyPay,
body.theme-terminal .comboCount,
body.theme-terminal .qkind,
body.theme-terminal .pseg,
body.theme-terminal .kpi b,
body.theme-terminal .stat b,
body.theme-terminal .ring-num,
body.theme-terminal .money,
body.theme-terminal .value,
body.theme-terminal .score,
body.theme-terminal .wallet b,
body.theme-terminal code,
body.theme-terminal pre,
body.theme-terminal .formulaBox,
body.theme-terminal .mini-work,
body.theme-terminal .eq,
body.theme-terminal .work{
  font-family:var(--inst-font-mono);
  font-variant-numeric:tabular-nums lining-nums;
}

body.theme-terminal .route,
body.theme-terminal .kicker,
body.theme-terminal .label,
body.theme-terminal .miniLabel,
body.theme-terminal .sectionLabel,
body.theme-terminal .h2,
body.theme-terminal .repairMeta,
body.theme-terminal .comboMeta,
body.theme-terminal .dcount,
body.theme-terminal .qz-num,
body.theme-terminal .micro{
  color:var(--faint);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body.theme-terminal .go,
body.theme-terminal .pathGo,
body.theme-terminal .accent,
body.theme-terminal .accentText{
  color:var(--accent);
}

body.theme-terminal .coin,
body.theme-terminal .logo,
body.theme-terminal .emoji,
body.theme-terminal .resemoji{
  display:none;
}

body.theme-terminal .bar,
body.theme-terminal .pbar,
body.theme-terminal .repairDot{
  background:#0a0e15;
  border:1px solid var(--line);
}

body.theme-terminal .bar i,
body.theme-terminal .repairDot.on{
  background:var(--accent);
}

body.theme-terminal .updateBanner{
  border-radius:8px;
  background:#16120a;
  border-color:rgba(227,179,65,.34);
  color:#ffe5a3;
}

body.theme-terminal .ring,
body.theme-terminal .ring::before{
  border-radius:50%;
}

body.theme-terminal .flash,
body.theme-terminal .cardStage,
body.theme-terminal .answer{
  min-height:auto;
}

body.theme-terminal .destGrid .card,
body.theme-terminal .homepanel,
body.theme-terminal .dailyhome,
body.theme-terminal .finderHome,
body.theme-terminal .pathhome,
body.theme-terminal .fact{
  min-height:0;
}

body.theme-terminal .syncstate{
  padding:10px 12px;
}

@media (max-width:560px){
  body.theme-terminal .nav a,
  body.theme-terminal .topNav a,
  body.theme-terminal .appswitch a{
    min-height:44px;
  }
}