/* 88 Venture OS — deployment theme over the shared Forge bundle. v1.0, 2026-09-07.
   Source of truth: engine/infra/shared/brand-guides/88vs/tokens.css (v2.8) + 88vs-brand-rules.md.
   World: Swiss rail departure board — printed timetable by day (light, DEFAULT), flap board at
   night. Warm Studio palette, Figtree, one gold, 2px radius, 44px rows, hairlines not shadows.
   Linked AFTER the bundle stylesheet (app-identity.js), so it re-values the bundle's custom
   properties and then corrects the rules the bundle hardcodes past its own variables.
   Each selector appears ONCE; the comment beside it names the rule it serves. History of the
   eleven critique rounds that produced it: vault _projects/88-venture-studio/admin/88vs-os/README.md */
@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;800&family=JetBrains+Mono:wght@400;500&display=swap");

/* ── 1. Tokens (verbatim from tokens.css) ── */
:root {
  color-scheme: light;
  --bg: #FAF7F0; --bg-2: #FFFDF8; --bg-3: #F1ECE0;
  --rule: #E6E0D3; --rule-strong: #958E7F;
  --ink: #23211E; --ink-2: #5B5750; --ink-3: #6C6860;
  --gold: #F0C24A; --amber: #8A6400;
  --red: #C2301E; --red-fill: #C2301E; --green: #22764A; --on-signal: #FAF7F0;
  --cat-1: #2FB8B2; --cat-2: #3B5FCC; --cat-3: #E07A4B; --cat-4: #7B5BD6; --cat-5: #2D8F5E; --cat-6: #A8306F;
  --tint: 18%; --tint-chip: 12%;
  --scrim: rgb(35 33 30 / .45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #232120; --bg-2: #2B2926; --bg-3: #34312D;
    --rule: #423F39; --rule-strong: #7A756C;
    --ink: #F5F1E8; --ink-2: #CFCAC0; --ink-3: #A19B90;
    --amber: #F0C24A; --red: #FF8F86; --green: #5FD48F; --on-signal: #F5F1E8;
    --cat-1: #1AA39E; --cat-2: #4F7AE8; --cat-3: #D8743F; --cat-4: #8B7BDC; --cat-5: #2B8A56; --cat-6: #DD62A4;
    --tint: 30%;
    --scrim: rgb(0 0 0 / .62);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #232120; --bg-2: #2B2926; --bg-3: #34312D;
  --rule: #423F39; --rule-strong: #7A756C;
  --ink: #F5F1E8; --ink-2: #CFCAC0; --ink-3: #A19B90;
  --amber: #F0C24A; --red: #FF8F86; --green: #5FD48F; --on-signal: #F5F1E8;
  --cat-1: #1AA39E; --cat-2: #4F7AE8; --cat-3: #D8743F; --cat-4: #8B7BDC; --cat-5: #2B8A56; --cat-6: #DD62A4;
  --tint: 30%;
  --scrim: rgb(0 0 0 / .62);
}

/* ── 2. The bundle's contract, re-valued. One rule for all three theme states, declared after
   the bundle: its dark blocks set these as literals at (0,2,0), so a plain :root mapping loses
   at night. Same specificity, later in the cascade, wins. ⛔ Nothing theme-specific may live
   here — it would override the night tokens above (that is how --accent-ink once went cream). */
:root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
  --fg: var(--ink); --muted: var(--ink-2); --muted-2: var(--ink-3);
  --surface: var(--bg-3);          /* chrome: header, toolbars, rail */
  --bubble: var(--bg-2);           /* rows, bubbles, raised paper */
  --field: var(--bg-2);            /* what you type into */
  --line: var(--rule-strong);      /* the bundle draws every CONTROL boundary with --line: 3:1 */
  --line-soft: var(--rule);        /* dividers inside an object: the hairline */
  --accent: var(--gold);           /* the ONE fill */
  --accent-ink: #23211E;           /* text on gold is the dark ink in BOTH themes */
  --accent-text: var(--amber);     /* text inside a gold tint only */
  --accent-tint: color-mix(in oklab, var(--gold) var(--tint-chip), var(--bg-2));
  --focus: var(--ink);
  --danger: var(--red);
  --danger-bg: color-mix(in oklab, var(--red) var(--tint-chip), var(--bg-2));
  --danger-tint: color-mix(in oklab, var(--red) var(--tint-chip), var(--bg-2));
  --danger-ink: var(--on-signal);
  --ok: var(--green);
  --ok-bg: color-mix(in oklab, var(--green) var(--tint-chip), var(--bg-2));
  --ok-tint: color-mix(in oklab, var(--green) var(--tint-chip), var(--bg-2));
  --brand-plate: transparent;
  --stripe: transparent;           /* zebra is OFF — hairlines carry the table */
  --chrome: var(--bg);             /* the strip above and below the installed app */
  --series-1: var(--ink); --series-2: var(--ink-3);   /* revenue/cost are not brand entities */
  --dash-canvas: var(--bg); --hero-bg: transparent; --hero-fg: var(--ink); --hero-label: var(--ink-3); --hero-spark: var(--ink-3);
  /* People are rendered as people, not brand slots: warm inks, white initials ≥5:1, visible on both grounds */
  --person-1: #4A4540; --person-2: #5B5750; --person-3: #6C6860; --person-4: #3F3B36; --person-5: #5B5750; --person-6: #4A4540;
  --radius-container: 2px; --radius-control: 2px; --radius-card: 2px;
  --row-h: 44px; --tracking: 0;
  --shadow-btn: none; --shadow-card: 0 0 0 1px var(--rule); --shadow-raised: 0 0 0 1px var(--rule-strong);
  --shadow-overlay: 0 0 0 1px var(--rule-strong); --shadow-field: none;
  --font-body: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ── 3. Type ── */
body { font-variant-numeric: tabular-nums; }
b, strong { font-weight: 600; }                                   /* nothing is ever 700 */
.bubble .md-h, .stat-value, .empty-name, .grid td.is-key, .trail-list .mark { font-weight: 600; }
.send, .stop, .approval-actions button, .drawer-inner .new, .account-settings { font-weight: 500; }   /* buttons are controls */
.roster-section, .drawer-label, .conn-section, .approval-head, .seg-label, .kind-tag, .skills-folder, .skill-label, .md-table th, .field span, .field-label {
  font-size: 11px; font-weight: 500; letter-spacing: .06em;       /* meta = 11 / 500 / 0.06em */
}
.roster-section, .drawer-label, .conn-section, .seg-label, .skills-folder, .skill-label { color: var(--ink-3); }
.drawer-label { text-transform: uppercase; }
.trail-cost, .picker-cost { font-family: var(--font-body); font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: 0; }  /* a cost is a figure, not code */
.turn.assistant .bubble { max-width: 68ch; }                      /* body measure */

/* ── 4. Links: ink, underlined in --rule-strong. Never gold text on light. ── */
.bubble a, .link-btn, .skill-back { color: inherit; text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 2px; }
.bubble a:hover { text-decoration-color: currentColor; }
.avatar-set { text-decoration: none; color: var(--ink-2); }
.tile-reuse, .ref-swap, .skill-tile, .style-toggle.is-on, .speak-btn.is-speaking { color: var(--fg); }

/* ── 5. Current state = ink 600 on the raised surface + 2px gold underline. Same grammar for
   every tab set, the phone bar, the Design segments and the theme picker. ── */
.views { background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 0; gap: 0; }
.view-tab { border-radius: 0; color: var(--muted); }
.view-tab.current { background: var(--bg-3); box-shadow: inset 0 -2px 0 var(--accent); }
.tabbar-item.current { color: var(--fg); box-shadow: inset 0 2px 0 var(--accent); }   /* phone bar: gold where the bar meets the page (the bottom edge is the home indicator's) — written deviation */
.settings-tab { border-color: transparent; }
.settings-tab.is-on { background: var(--bg-2); border-color: transparent; box-shadow: inset 0 -2px 0 var(--accent); }   /* the settings nav sits on bg-3, so raised = paper there */
.seg button.is-on, .skills-scope-btn.current { background: var(--bg-3); color: var(--fg); border-color: transparent; box-shadow: inset 0 -2px 0 var(--accent); font-weight: 600; }
.theme-option.is-on { background: var(--bg-3); color: var(--fg); border-color: transparent; box-shadow: inset 0 -2px 0 var(--accent); }
.theme-option.is-on .theme-swatch { border-color: var(--fg); }
.theme-swatch.is-light { background: #FAF7F0; border-color: var(--rule-strong); }
.theme-swatch.is-dark { background: #232120; border-color: var(--rule-strong); }
.theme-swatch.is-system { background: linear-gradient(135deg, #FAF7F0 0 50%, #232120 50% 100%); border-color: var(--rule-strong); }

/* ── 6. Controls: 44px, 2px, gold fill = action only; secondary = outline; disabled = bg-3 + rule border + ink-3 ── */
.icon-btn { border-color: var(--rule-strong); }
.bar .icon-btn, .back { border-color: transparent; }               /* icon-only chrome controls and Close: no box, same hit area */
.back { padding-left: 0; }
.picker { background: transparent; border-color: var(--rule-strong); }
.send:disabled, .composer-row .send:disabled { background: var(--bg-3); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.composer-row .stop { background: none; color: var(--danger); box-shadow: inset 0 0 0 1px var(--rule-strong); }   /* red fill is rationed to the approval decision */
.composer-row:focus-within { border-color: var(--focus); box-shadow: none; }
.composer-row .modeswitch { font-size: 13px; font-weight: 500; }
.account-settings { min-height: 44px; }
.speak-btn { align-self: flex-start; width: auto; min-height: 44px; border-color: transparent; padding-left: 0; color: var(--ink-2); }
input, textarea, select { border-color: var(--rule-strong); }
.signin { padding-top: 24vh; }
.signin input, .signin .send { border-radius: var(--radius-control); }
.approval-actions .deny { background: var(--red-fill); color: var(--on-signal); }   /* danger fill pairs with --on-signal in both themes */

/* ── 7. Surfaces: no unearned box, no side-stripe, hairline rings only ── */
.turn.user .bubble { border-radius: var(--radius-card); background: var(--bg-2); color: var(--fg); box-shadow: 0 0 0 1px var(--rule); }   /* a row of paper, not a pill */
.approval { background: var(--bg-2); box-shadow: var(--shadow-raised); }   /* the card's arrival is the signal; no stripe */
.approval-head { color: var(--ink-2); }
.skill-body { border-left: 0; padding-left: 0; }
.tile.is-mine figcaption { box-shadow: none; padding-left: 0; }
.you-edit, .settings-pane .you-edit { background: none; border: 0; padding: 0; }
.design-main .empty { padding: 0 20px; }
.brand-plate { border-radius: 2px; padding: 0; }
.brand-name { letter-spacing: -0.01em; }
.trail-head { color: var(--fg); font-weight: 500; }               /* the audit trail is the trust affordance */
.agent-flag { border-color: transparent; padding: 0; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.sample-banner { background: color-mix(in oklab, var(--gold) 18%, var(--bg-2)); box-shadow: inset 0 0 0 1px var(--rule); color: var(--fg); }   /* WATCH band; 18% in both themes (30% at night reads brown) */
.sample-banner strong { color: var(--accent-text); }
.account-mark, .account-mark .agent-mark, .facepile-mark { border-radius: var(--radius-container); }   /* one avatar shape */
.agent-mark:not([style]) { background: var(--ink-2); color: var(--bg); }
@media (max-width: 900px) {
  .settings-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
}
.app { grid-template-columns: 224px minmax(0, 1fr); }             /* rail is 224 open */

/* ── 8. Dashboards: rows on paper, ink series, deltas by meaning, flat fills ── */
.stat-row { gap: 0 16px; }
.stat { background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; box-shadow: none; padding-left: 0; padding-right: 0; }
.stat.is-hero { border-bottom-color: var(--rule); box-shadow: none; }
.stat.is-hero:not(:has(.spark))::after { display: none; }                          /* no 3px signal stripe under the hero */
.stat-label { font-size: 13px; color: var(--ink-3); }
.stat-change { font-weight: 500; }
.stat-change.is-up, .stat.is-hero .stat-change.is-up { color: var(--ok); }        /* the bundle's hero rule outranked the meaning colour */
.stat-change.is-down, .stat.is-hero .stat-change.is-down { color: var(--danger); }
.spark { width: 100%; margin-left: 0; margin-right: 0; }
.panel { border: 0; background: transparent; border-top: 1px solid var(--rule-strong); border-radius: 0; padding-left: 0; padding-right: 0; }   /* a section with a rule above */
.stat-row + .panel { border-top: 0; }                               /* one rule between the KPI block and the chart */
.bars { gap: 0; }
.bar-row { min-height: 44px; }
.bar-value { font-size: 13px; font-weight: 600; color: var(--fg); }
.dash svg stop, .spark stop, .chart stop { stop-opacity: .08; }
.chart linearGradient[id$="-0"] stop { stop-opacity: .10; }
.chart linearGradient[id$="-1"] stop { stop-opacity: .28; }        /* revenue lighter, cost darker: the gap is the story */

/* ── 9. Every non-token radius the bundle hardcodes. Dots and swatches stay round. ── */
.session-action, .error, .mention, .anchor-thumb, .anchor-add, .folder-move, .chart-swatch,
.field-row input[type="checkbox"], .unsend:focus-visible, .composer-row .modeswitch,
.ctxmeter-bar, .ctxmeter-new, .bar-track, .meter, .cellbar, .cellbar-fill { border-radius: 2px; }
.bar-fill, .meter-fill { border-radius: 0 2px 2px 0; }
.col-fill { border-radius: 2px 2px 0 0; }
a { color: inherit; text-decoration-color: var(--rule-strong); text-underline-offset: 2px; }   /* every link is ink, underlined — the Skills tab had gold links */
.skill-chip, .skill-trigger, .chip-size { font-family: var(--font-body); }                      /* labels are not code */