/* ============================================================
   ENDURANCE DESIGN SCHEMA
   Source of truth: endurance-ui-library-and-agent.vercel.app

   Tokens lifted verbatim from the library, then applied over the
   portal design system. Load order is:
       theme.css  ->  circa.css  ->  endurance-schema.css
   so the schema has the final word on structure (type, radius,
   weight, elevation) while Circa keeps the brand hues.

   The schema's rules, in short:
     Geist / Geist Mono     — one type system
     0px radius             — nothing is rounded
     weight 600             — display weight; 800 is never used
     letter-spacing normal  — on headings; tracking only on labels
     no box-shadow          — elevation comes from line, not blur
     cubic-bezier(.4,0,.2,1)— one easing curve
   ============================================================ */

:root {
  /* ---- library tokens, verbatim ---- */
  --hume-night:   #0d0f12;
  --hume-field:   #121829;
  --hume-ink:     #eceef2;
  --hume-ink-2:   #c3c8d1;
  --hume-muted:   #8c939e;
  --hume-faint:   #666d78;
  --hume-line:    #232830;
  --hume-line-2:  #3a414c;
  --hume-sheet:   #14171c;
  --hume-sunk:    #1b1f26;
  --hume-signal:  #7fadea;
  --hume-flag:    #e08e72;
  --hume-radius:  0px;
  --hume-max:     1280px;
  --hume-space:   clamp(24px, 4vw, 64px);
  --hume-air:     96px;
  --hume-ease:    cubic-bezier(.4, 0, .2, 1);
  --hume-display-w: 600;

  --background: #fafafa;
  --foreground: #09090b;
  --muted:      #71717a;
  --border:     #e4e4e7;
  --card:       #fff;

  /* ---- bind the portal's type tokens to Geist ---- */
  --font-sans:  'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:  'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- radius: the schema is square ---- */
  --radius-xs: 0px; --radius-sm: 0px; --radius-md: 0px;
  --radius-lg: 0px; --radius-xl: 0px; --radius-full: 0px;

  /* ---- elevation comes from line weight, never blur ---- */
  --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none;

  --page-max-width: var(--hume-max);
}

/* ---- Light profile: the library's own neutrals ---- */
[data-theme="light"] {
  --color-bg:            var(--background);
  --color-bg-2:          var(--card);
  --color-bg-3:          #f4f4f5;
  --color-cloud-whisper: var(--foreground);
  --color-text-muted:    var(--muted);
  --color-slate-hint:    #a1a1aa;
  --color-border:        var(--border);
  --color-border-soft:   #f0f0f2;
  --glass-bg:            #ffffff;
  --glass-bg-hover:      #f7f7f8;
  --glass-border:        var(--border);
  --glass-border-top:    var(--border);
  --topbar-bg:           var(--card);
  --topbar-border:       var(--border);
  --subnav-bg:           var(--card);
  --subnav-border:       var(--border);
}

/* ---- Dark profile: the library's hume surfaces ---- */
:root:not([data-theme="light"]) {
  --color-bg:            var(--hume-night);
  --color-bg-2:          var(--hume-sheet);
  --color-bg-3:          var(--hume-sunk);
  --color-cloud-whisper: var(--hume-ink);
  --color-text-muted:    var(--hume-muted);
  --color-slate-hint:    var(--hume-faint);
  --color-border:        var(--hume-line);
  --color-border-soft:   #1a1e25;
  --glass-bg:            var(--hume-sheet);
  --glass-bg-hover:      var(--hume-sunk);
  --glass-border:        var(--hume-line);
  --glass-border-top:    var(--hume-line);
  --topbar-bg:           var(--hume-sheet);
  --topbar-border:       var(--hume-line);
  --subnav-bg:           var(--hume-sheet);
  --subnav-border:       var(--hume-line);
}

/* ============================================================
   Structural rules — these override anything set upstream.
   ============================================================ */

/* Nothing is rounded. The Endurance Pill is the system's sole rounded element,
   plus true circles (status dots, avatars). Everything else is square. */
*, *::before, *::after { border-radius: var(--hume-radius) !important; }
.chip, .sla, .ai-tag, .pill,
.nav-user-avatar, .brand-mark, .conf-bar, .conf-bar i, .status-dot { border-radius: 999px !important; }

/* Elevation is a line, never a blur. */
*, .panel, .kpi, .tbl-wrap, .lcard, .card, .nav-dropdown, .q-item { box-shadow: none !important; }
.nav-dropdown { border: 1px solid var(--color-border) !important; }

/* Frosted glass is not part of this schema — surfaces are flat. */
.ai-block, .panel, .kpi, .tbl-wrap, .hero-card, .lcard, .q-item, .lane, .card {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}

/* Display weight is 600, and headings do not track. */
.page-title, .page-hero-title, .hero-line, .sec-head h2, .lcard .addr, .a360 .name,
h1, h2, h3 { font-weight: var(--hume-display-w) !important; letter-spacing: -0.011em !important; }
.kpi .v, .lcard .price, .phase .n, .rule .num { font-weight: var(--hume-display-w) !important; }

/* Tracking survives only on the small caps labels, where it does real work. */
.kpi .l, .sec-head .eyebrow, .panel-head h3, .chip, .ai-tag, .sla, .conf,
.meta-strip .l, .lcard .facts .l, .section-subnav-label, table.ci thead th, .btn {
  letter-spacing: 0.08em !important;
}

/* One easing curve. */
* { transition-timing-function: var(--hume-ease) !important; }

/* Numerals: mono, tabular — the library ships Geist Mono for exactly this. */
.kpi .v, .lcard .price, table.ci .num, .sla, .conf, .lcard .facts .v,
.hero-card .row b, .ticker-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Ambient gradients are not in the schema; the ground is flat. */
html, body { background-image: none !important; }
.page-hero { background-image: none !important; }
[data-theme="light"] .page-hero { background: var(--card); border-bottom: 1px solid var(--border); }
:root:not([data-theme="light"]) .page-hero { background: var(--hume-field); border-bottom: 1px solid var(--hume-line); }

/* Buttons: square, quiet, uppercase micro-label. */
.btn {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  padding: 9px 16px; border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s;
}
.btn.ghost { border-color: var(--color-border); }

/* Tables: the header band is a rule, not a slab, in the light profile. */
table.ci thead th { font-weight: 600; }


/* ============================================================
   Components, matched to the library's published source.
     endurance-pill  — the only rounded element in the system
     dashboard-tile  — mono label + status dot, mono tabular value
   ============================================================ */

/* ---- Endurance Pill ----
   rounded-full · border · px-2.5 py-0.5 · font-mono 11px · tracking .15em · uppercase */
.chip, .sla, .ai-tag {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase;
  padding: 1px 10px 2px !important;
  border: 1px solid currentColor;
  line-height: 1.5;
}
.chip { color: var(--color-text-muted); background: transparent; }
.chip.teal  { color: var(--circa-blue); }
.chip.green { color: var(--color-green); }
.chip.amber { color: var(--color-amber); }
.chip.red   { color: var(--color-red); }
.chip.grey  { color: var(--color-slate-hint); }
.sla, .ai-tag { background: transparent; }

/* ---- Dashboard Tile ----
   label: mono 11px tracking-widest uppercase, preceded by a status dot
   value: mono 24px 600 tabular      sub: mono 11px tabular */
.kpi { display: flex; flex-direction: column; }
.kpi .l {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.35;
  display: flex; align-items: flex-start; gap: 6px;   /* dot tracks the first line */
  margin-top: 10px;
}
.kpi .l::before {
  content: ''; width: 6px; height: 6px; border-radius: 999px; margin-top: 4px;
  background: var(--color-slate-hint); flex: none;
}
/* the sub-line sits on a common baseline so a row of tiles reads level */
.kpi .s { margin-top: auto; padding-top: 6px; }
.kpi:has(.v.good) .l::before { background: var(--color-green); }
.kpi:has(.v.warn) .l::before { background: var(--color-amber); }
.kpi:has(.v.bad)  .l::before { background: var(--color-red); }
.kpi .v { font-size: 24px !important; font-weight: 600 !important; }
.kpi .s {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-variant-numeric: tabular-nums;
}

/* Mono carries every caption and label role. */
.sec-head .eyebrow, .panel-head h3, .conf, .meta-strip .l, .lcard .facts .l,
.section-subnav-label, table.ci thead th, .btn, .lane h4, .phase .w,
.filters .filter-label, .rule .num, .lcard .mls {
  font-family: var(--font-mono) !important;
  font-weight: 400 !important;
}
table.ci thead th { font-size: 10px !important; letter-spacing: 0.1em !important; }

/* ---- 44px touch targets on everything interactive ---- */
.btn, .filters input, .filters select, .nav-icon-btn, .nav-user-trigger,
.section-subnav-item, .nav-desktop .nav-item > a, .nav-dropdown-item, .q-item {
  min-height: 44px;
}
.btn { display: inline-flex; align-items: center; padding: 0 16px; }
.filters input, .filters select { padding: 0 12px; }
.section-subnav-item, .nav-desktop .nav-item > a { display: inline-flex; align-items: center; }
.nav-dropdown-item { display: flex; align-items: center; }
/* layout.css pins the topbar icon buttons with `min-height:0 !important`,
   so the accessible size has to be asserted at the same weight. */
.nav-icon-btn {
  width: 44px !important; height: 44px !important; min-height: 44px !important;
}
.nav-user-trigger { width: auto !important; padding: 0 10px !important; }

/* ============================================================
   DENSITY — data grids are not marketing surfaces.

   The Endurance Pill is a status element for cards and headers.
   At 11px mono with .15em tracking it is far too heavy for a
   table cell: it wrapped "Year 1" onto two lines and pushed
   every row to 53px. Inside a grid the pill keeps its shape and
   drops to a working scale.
   ============================================================ */

table.ci .chip, table.ci .sla, .q-item .chip, .q-item .sla,
.date-row .chip, .lane .chip {
  font-size: 9.5px !important;
  letter-spacing: 0.08em !important;
  padding: 0 7px 1px !important;
  line-height: 1.6;
  white-space: nowrap;
}

/* Nothing in a data row wraps. Wide grids scroll inside .tbl-wrap. */
table.ci td, table.ci th { white-space: nowrap; }
table.ci td.wrap, table.ci td[style*="max-width"] { white-space: normal; }
table.ci tbody td { padding: 6px 10px; vertical-align: middle; }
table.ci tbody tr { height: 34px; }

/* The 44px target rule is for controls a finger hits, not table rows. */
table.ci .btn, table.ci button { min-height: 28px; }

/* Multi-value cells (missing-document chips) still need to wrap — but as a
   single scrollable line, not a growing block. */
table.ci td.chips { white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
table.ci td.chips .chip { margin-right: 3px; }

/* ---- Topbar: the brand must not collapse ---- */
.portal-topbar a.brand { min-width: 82px; }
@media (max-width: 1240px) { .brand-subtitle { display: none !important; } }
@media (max-width: 1100px) {
  .portal-topbar-meta { display: none !important; }
  .nav-desktop .nav-item > a { padding-left: 9px; padding-right: 9px; font-size: 12px; }
}

/* ---- Filter bar: controls line up on one baseline ---- */
.filters { align-items: stretch; }
.filters input, .filters select { line-height: 1; }
.filters .spacer { display: flex; align-items: center; }

/* The mobile menu button ships at 42px in layout.css; the accessible floor is 44. */
.nav-toggle { width: 44px !important; height: 44px !important; min-height: 44px !important; }

/* ============================================================
   NEUTRAL PROFILE
   Structure is grey. Colour is reserved for signal.

   The brand violet was carrying table headers, headings, buttons,
   every chart bar and the ticker — which reads decorative rather
   than considered. It now appears only where it means something:
   the active nav state, links, focus, one highlighted chart
   series, and the logo. Everything structural is the library's
   own neutral ramp.
   ============================================================ */

:root {
  /* Desaturated semantics — the library's clay/sage register, not
     traffic-light primaries. */
  --color-green:    #5f7d68;  --color-green-bg: rgba(95,125,104,0.10);
  --color-amber:    #9a7b3f;  --color-amber-bg: rgba(154,123,63,0.10);
  --color-red:      #a35b4a;  --color-red-bg:   rgba(163,91,74,0.10);

  /* Chart ramp: neutral slate, one accent for the series that matters. */
  --chart-1:   #6b7280;
  --chart-2:   #9ca3af;
  --chart-mute:#d4d4d8;
  --chart-accent: var(--circa-violet);
}
[data-theme="light"] {
  --color-green: #4f6a58;  --color-green-bg: #eef2ef;
  --color-amber: #8a6d34;  --color-amber-bg: #f5f0e6;
  --color-red:   #8f4d3e;  --color-red-bg:   #f6ebe8;
  --chart-1:   #52525b;
  --chart-2:   #a1a1aa;
  --chart-mute:#e4e4e7;
}
:root:not([data-theme="light"]) {
  --chart-1:   #7d8590;
  --chart-2:   #4c545e;
  --chart-mute:#2a2f38;
  --chart-accent: #9fb8e6;
}

/* ---- Table headers: a quiet band, not a coloured slab ---- */
table.ci thead th {
  background: var(--color-bg-3) !important;
  color: var(--color-text-muted) !important;
  border-bottom: 1px solid var(--color-border);
}
:root:not([data-theme="light"]) table.ci thead th { background: var(--hume-sunk) !important; }

/* ---- Headings read as ink, not brand ---- */
.page-title, .sec-head h2, .lcard .addr, .a360 .name,
.hero-line, .page-hero-title { color: var(--color-cloud-whisper) !important; }
.hero-line .accent, .page-hero-title .accent {
  color: var(--color-text-muted) !important; font-style: normal !important;
}
[data-theme="light"] .hero-sub b { color: var(--color-cloud-whisper); }

/* Eyebrows and section labels: muted, not brand. */
.sec-head .eyebrow { color: var(--color-text-muted) !important; }

/* ---- Buttons: ink primary, quiet ghost. Brand is not a button colour. ---- */
.btn {
  background: var(--color-cloud-whisper);
  border-color: var(--color-cloud-whisper);
  color: var(--color-bg-2);
}
.btn:hover { background: var(--color-text-muted); border-color: var(--color-text-muted); }
.btn.ghost { background: transparent; color: var(--color-text-muted); border-color: var(--color-border); }
.btn.ghost:hover { background: var(--color-bg-3); color: var(--color-cloud-whisper); border-color: var(--color-border); }
.btn.teal { background: var(--circa-violet); border-color: var(--circa-violet); color: #fff; }
.btn.teal:hover { background: var(--circa-violet-deep); border-color: var(--circa-violet-deep); }

/* ---- Ticker: neutral dark rail ---- */
:root, [data-theme="light"] {
  --ticker-bg: #18181b;
  --ticker-text: #d4d4d8;
  --ticker-label-color: rgba(255,255,255,0.48);
  --ticker-sep-color: rgba(255,255,255,0.14);
  --ticker-change-color: rgba(255,255,255,0.80);
}

/* ---- Accent survives only where it carries meaning ---- */
[data-theme="light"] .nav-desktop .nav-item > a.active,
[data-theme="light"] .section-subnav-item.active { color: var(--circa-violet) !important; }
.cite { color: var(--color-text-muted); }
.cite:hover { color: var(--circa-violet); }
.ai-block { border-left-color: var(--circa-violet); }
.ai-tag { color: var(--circa-violet); border-color: var(--circa-violet); }
[data-theme="light"] .q-item.active { border-left-color: var(--circa-violet); background: var(--color-bg-3); }
.chip { color: var(--color-text-muted); }
.chip.teal { color: var(--circa-violet); }

/* KPI values are ink; only a genuine exception takes colour. */
.kpi .v { color: var(--color-cloud-whisper) !important; }
.kpi .v.bad  { color: var(--color-red) !important; }
.kpi .v.warn { color: var(--color-amber) !important; }
.kpi .v.good { color: var(--color-cloud-whisper) !important; }

/* Definition-list values can carry long strings (source names, submarkets);
   let them break rather than push their column. */
.dl dd { min-width: 0; overflow-wrap: anywhere; }