/* =========================================================================
   Senova Platform Console — warm Stripe/Cloudflare, Daylight only.
   Never Night Flight. Depth = paper tints + whisper shadows.
   ========================================================================= */
:root {
  --paper-0: #FAF7F0; --paper-1: #FFFEFA; --paper-2: #F3EDE1;
  --ink-900: #221D15; --ink-700: #4A4335; --ink-500: #6E6455; --ink-300: #9A9080;
  --line-100: #EAE3D3; --line-200: #D9CFB9;
  --clay-600: #B4552D; --clay-700: #9A4423; --clay-100: #F6E3D9;
  --gold-600: #A87F2C; --gold-700: #8C6A20; --gold-100: #F3E9D2;
  --moss-600: #4A6B57; --moss-700: #3B5745; --moss-100: #E7EFE7;
  --error-600: #A33D2E;
  --font-display: "Newsreader", Georgia, serif;
  --font-ui: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --radius-card: 10px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(34,29,21,.06);
  --shadow-2: 0 2px 10px rgba(34,29,21,.09);
  --focus-ring: 0 0 0 2px var(--paper-0), 0 0 0 4px var(--gold-600);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-ui); background: var(--paper-0); color: var(--ink-700);
  font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.mono { font-family: var(--font-mono); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- app shell layout ---- */
.cx-app { display: grid; grid-template-columns: 244px 1fr; grid-template-rows: 56px 1fr; min-height: 100vh; }
.cx-topbar { grid-column: 1 / -1; }
.cx-side { grid-row: 2; }
.cx-main { grid-row: 2; grid-column: 2; min-width: 0; }

/* ---- TopBar ---- */
.cx-topbar {
  display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 20px;
  background: var(--paper-1); border-bottom: 1px solid var(--line-100); position: sticky; top: 0; z-index: 40;
}
.cx-brand { display: inline-flex; align-items: baseline; gap: 10px; }
.cx-brand-mark { font-family: var(--font-display); font-weight: 500; font-size: 20px; color: var(--ink-900); }
.cx-crumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--ink-500); }
.cx-topbar-r { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.cx-search {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; width: 300px; max-width: 34vw;
  background: var(--paper-0); border: 1px solid var(--line-100); border-radius: 8px; color: var(--ink-500); cursor: text;
  font-family: var(--font-ui); font-size: 13px;
}
.cx-search kbd { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--ink-300); border: 1px solid var(--line-100); border-radius: 4px; padding: 1px 5px; }
.cx-statusdot { width: 9px; height: 9px; border-radius: 50%; background: var(--moss-600); box-shadow: 0 0 0 3px var(--moss-100); animation: cxPulse 4s ease-in-out infinite; }
.cx-iconbtn { color: var(--ink-500); display: inline-flex; }
.cx-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--clay-100); color: var(--clay-700); display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 600; border: 0; padding: 0; cursor: pointer; }
button.cx-avatar:hover { background: var(--clay-600); color: #fff; }

/* Account dropdown menu (real session — console-auth.js) */
.cx-account-menu { position: absolute; top: 42px; right: 0; z-index: 120; min-width: 232px; background: var(--paper-1); border: 1px solid var(--line-200); border-radius: 12px; box-shadow: 0 12px 34px rgba(34,29,21,.16); padding: 6px; }
.cx-am-head { padding: 10px 12px 8px; }
.cx-am-name { font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--ink-900); }
.cx-am-email { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-500); margin-top: 2px; word-break: break-all; }
.cx-am-org { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; }
.cx-am-orgname { font-size: 13px; color: var(--ink-700); }
.cx-am-role { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--clay-700); background: var(--clay-100); border-radius: 999px; padding: 2px 8px; }
.cx-am-div { height: 1px; background: var(--line-100); margin: 6px 4px; }
.cx-am-item { display: block; width: 100%; text-align: left; background: transparent; border: 0; font-family: var(--font-ui); font-size: 13.5px; color: var(--ink-700); padding: 9px 12px; border-radius: 8px; cursor: pointer; text-decoration: none; }
.cx-am-item:hover { background: var(--paper-2); color: var(--ink-900); }
.cx-am-signout { color: var(--clay-700); font-weight: 600; }
.cx-hamburger { display: none; background: none; border: 0; color: var(--ink-700); cursor: pointer; }
@keyframes cxPulse { 0%, 100% { box-shadow: 0 0 0 3px var(--moss-100); } 50% { box-shadow: 0 0 0 5px transparent; } }

/* ---- SideNav ---- */
.cx-side { width: 244px; background: var(--paper-0); border-right: 1px solid var(--line-100); padding: 18px 12px; overflow-y: auto; position: sticky; top: 56px; height: calc(100vh - 56px); }
.cx-navlink { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; color: var(--ink-500); font-size: 13.5px; font-weight: 500; position: relative; }
.cx-navlink:hover { color: var(--ink-900); background: var(--paper-2); }
.cx-navlink.on { color: var(--ink-900); }
.cx-navlink.on::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; background: var(--clay-600); border-radius: 0 2px 2px 0; }
.cx-navgroup { margin: 16px 0 4px; padding: 0 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--ink-300); }
.cx-navpill { margin-left: auto; font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; color: var(--clay-700); background: var(--clay-100); padding: 1px 5px; border-radius: var(--radius-pill); }
.cx-navdiv { height: 1px; background: var(--line-100); margin: 14px 0; }
.cx-navlink small { color: var(--ink-300); margin-left: auto; }

/* ---- main content ---- */
.cx-content { max-width: 1240px; margin: 0 auto; padding: 40px 32px 80px; }

/* ---- masthead ---- */
.cx-masthead { margin-bottom: 40px; }
.cx-masthead h1 { font-family: var(--font-display); font-weight: 500; font-size: 44px; line-height: 1.05; color: var(--ink-900); margin: 0; letter-spacing: -.01em; }
.cx-masthead .cx-tagline { font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--ink-700); margin: 10px 0 0; }
.cx-statusline { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-500); margin-top: 18px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cx-statusline .cx-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--moss-600); }
.cx-statusline b { color: var(--ink-900); font-weight: 500; }

/* ---- instrument stat blocks ---- */
.cx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0 40px; }
.cx-stat { position: relative; background: var(--paper-1); border: 1px solid var(--line-100); border-radius: var(--radius-card); padding: 20px; overflow: hidden; }
.cx-stat-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.cx-stat-val { font-family: var(--font-mono); font-size: 34px; font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; margin-top: 8px; line-height: 1; }
.cx-stat-empty { font-size: 12px; color: var(--ink-500); margin-top: 6px; }
.cx-stat-dial { position: absolute; right: 16px; top: 16px; width: 46px; height: 46px; opacity: .8; }

/* ---- fleet strip ---- */
.cx-fleetstrip { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--paper-1); border: 1px solid var(--line-100); border-radius: var(--radius-card); font-size: 13.5px; color: var(--ink-700); margin-bottom: 40px; }
.cx-fleetstrip a { color: var(--clay-700); font-weight: 600; margin-left: auto; }

/* ---- through-line strip ---- */
.cx-throughline { margin: 8px 0 48px; overflow-x: auto; }
.cx-throughline svg { display: block; }

/* ---- family sections ---- */
.cx-family { margin: 0 0 44px; }
.cx-family-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 4px; }
.cx-family-num { font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--gold-700); }
.cx-family-title { font-family: var(--font-display); font-weight: 500; font-size: 24px; color: var(--ink-900); }
.cx-family-sub { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--ink-500); }
.cx-tickruler { width: 100%; height: 10px; margin: 12px 0 18px; display: block; }

/* ---- card grid ---- */
.cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }

/* ---- ProductCard ---- */
.cx-card { background: var(--paper-1); border: 1px solid var(--line-100); border-radius: var(--radius-card); padding: 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-1); transition: transform .16s, box-shadow .16s, border-color .16s; }
.cx-card-glyph { color: var(--ink-700); }
.cx-card-glyph svg { width: 24px; height: 24px; }
.cx-card-namerow { display: flex; align-items: flex-start; gap: 10px; }
.cx-card-name { font-family: var(--font-display); font-weight: 500; font-size: 20px; color: var(--ink-900); line-height: 1.15; flex: 1; min-width: 0; }
.cx-card-desc { font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-500); }
.cx-card-oneliner { font-size: 14px; color: var(--ink-700); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 42px; }
.cx-card-lineage { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-card-foot { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 12px; }
.cx-card-cta { color: var(--clay-700); font-weight: 600; font-size: 13.5px; }
.cx-card-cta:hover { color: var(--clay-600); }
.cx-card-stat { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.cx-card-ghost { font-size: 13px; color: var(--ink-500); border: 1px solid var(--line-100); border-radius: 7px; padding: 5px 10px; background: var(--paper-0); cursor: pointer; }
.cx-card-ghost:hover { border-color: var(--line-200); color: var(--ink-700); }
.cx-card-note { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); }
.cx-seqtag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--ink-500); margin-left: auto; }

/* status treatments — word + color + border, never color alone */
.cx-card.is-live:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); border-color: var(--gold-600); }
.cx-card.is-dev { border-color: var(--line-200); position: relative; }
.cx-card.is-dev::after { content: ""; position: absolute; top: 0; right: 0; border-width: 0 12px 12px 0; border-style: solid; border-color: transparent var(--clay-600) transparent transparent; border-top-right-radius: var(--radius-card); }
.cx-card.is-dev:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.cx-card.is-planned { border-style: dashed; border-color: var(--line-200); background: var(--paper-2); box-shadow: none; }
.cx-card.is-planned .cx-card-glyph { color: var(--ink-500); }

/* ---- StatusPill ---- */
.cx-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .06em; padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
.cx-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.cx-pill.live { color: var(--moss-700); background: var(--moss-100); }
.cx-pill.in-development { color: var(--clay-700); background: var(--clay-100); }
.cx-pill.planned { color: var(--ink-500); background: transparent; border: 1px solid var(--line-200); }

/* ---- LineageChip ---- */
.cx-lchip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-700); background: var(--paper-0); border: 1px solid var(--line-100); border-radius: var(--radius-pill); padding: 2px 9px; }
.cx-lchip .cx-check { color: var(--moss-600); }
.cx-lchip:hover { border-color: var(--line-200); color: var(--ink-900); }

/* ---- roadmap rail ---- */
.cx-roadmap { background: var(--paper-1); border: 1px solid var(--line-100); border-radius: var(--radius-card); padding: 24px; margin: 8px 0 40px; }
.cx-roadmap-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cx-rm-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--gold-700); margin: 0 0 10px; }
.cx-rm-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.cx-rm-col li { font-size: 13.5px; color: var(--ink-700); }
.cx-rm-col li small { color: var(--ink-500); }
.cx-roadmap-dep { font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--ink-500); margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-100); line-height: 1.5; }

/* ---- changelog rail ---- */
.cx-whatsnew { margin: 8px 0 40px; }
.cx-cl-item { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line-100); align-items: baseline; }
.cx-cl-date { font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); min-width: 96px; }
.cx-cl-title { font-family: var(--font-display); font-size: 16px; color: var(--ink-900); }

/* ---- section header (generic) ---- */
.cx-sech { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); margin: 0 0 14px; }

/* ---- footer ---- */
.cx-footer { border-top: 1px solid var(--line-100); margin-top: 24px; padding: 32px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; color: var(--ink-500); font-size: 13px; }
.cx-footer .cx-brand-mark { font-size: 18px; }
.cx-footer a:hover { color: var(--ink-900); }
.cx-footer .cx-foot-r { margin-left: auto; display: flex; gap: 16px; align-items: center; }

/* ---- responsive ---- */
@media (max-width: 1279px) {
  .cx-app { grid-template-columns: 64px 1fr; }
  .cx-side { width: 64px; padding: 18px 8px; }
  .cx-navlink span, .cx-navgroup, .cx-navpill, .cx-navlink small { display: none; }
  .cx-navlink { justify-content: center; }
  .cx-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1023px) {
  .cx-app { grid-template-columns: 1fr; grid-template-rows: 56px 1fr; }
  .cx-side { position: fixed; left: 0; top: 56px; z-index: 45; width: 244px; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow-2); }
  .cx-side.open { transform: none; }
  .cx-side .cx-navlink span, .cx-side .cx-navgroup, .cx-side .cx-navpill, .cx-side .cx-navlink small { display: revert; }
  .cx-side .cx-navlink { justify-content: flex-start; }
  .cx-main { grid-column: 1; }
  .cx-hamburger { display: inline-flex; }
  .cx-roadmap-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .cx-content { padding: 28px 20px 60px; }
  .cx-masthead h1 { font-size: 34px; }
  .cx-stats { grid-template-columns: 1fr; }
  .cx-grid { grid-template-columns: 1fr; }
  .cx-roadmap-cols { grid-template-columns: 1fr; }
  .cx-search { display: none; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .cx-statusdot { animation: none; }
  .cx-card, .cx-side { transition: none; }
  .cx-stat-needle { transition: none !important; }
}

/* =========================================================================
   M2 — Fleet page + "Hangar grew" note + upgraded Overview fleet strip
   ========================================================================= */
.cx-fleet-head { margin-bottom: 28px; }
.cx-fleet-head h1 { font-family: var(--font-display); font-weight: 500; font-size: 44px; line-height: 1.05; color: var(--ink-900); margin: 0; }
.cx-fleet-list { display: flex; flex-direction: column; gap: 10px; }
.cx-fleetrow {
  display: grid; grid-template-columns: 40px minmax(160px, 1.4fr) auto 1fr auto; align-items: center; gap: 16px;
  background: var(--paper-1); border: 1px solid var(--line-100); border-radius: var(--radius-card); padding: 14px 18px;
  box-shadow: var(--shadow-1); transition: transform .16s, box-shadow .16s, border-color .16s;
}
.cx-fleetrow:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); border-color: var(--gold-600); }
.cx-fleet-fav { width: 36px; height: 36px; border-radius: 8px; background: var(--clay-100); color: var(--clay-700); display: grid; place-items: center; font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.cx-fleet-name { display: flex; flex-direction: column; min-width: 0; }
.cx-fleet-name b { font-family: var(--font-display); font-weight: 500; font-size: 18px; color: var(--ink-900); }
.cx-fleet-name small { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); }
.cx-fleet-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cx-fchip { font-family: var(--font-mono); font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
.cx-fchip.ok { color: var(--moss-700); background: var(--moss-100); }
.cx-fchip.warn { color: var(--gold-700); background: var(--gold-100); }
.cx-fchip.bad { color: var(--clay-700); background: var(--clay-100); }
.cx-fleet-time { font-size: 11px; color: var(--ink-500); text-align: right; white-space: nowrap; }
.cx-fleet-actions { display: flex; gap: 14px; align-items: center; white-space: nowrap; }
.cx-fleet-open { color: var(--clay-700); font-weight: 600; font-size: 13.5px; }
.cx-fleet-open:hover { color: var(--clay-600); }
.cx-fleet-ledger, .cx-fleet-debrief { color: var(--ink-500); font-size: 12.5px; }
.cx-fleet-ledger:hover, .cx-fleet-debrief:hover { color: var(--ink-900); }

/* "The Hangar grew" one-time note */
.cx-grewnote { display: flex; align-items: center; gap: 12px; background: var(--clay-100); border: 1px solid var(--clay-600); border-radius: var(--radius-card); padding: 12px 16px; margin-bottom: 24px; color: var(--ink-900); font-size: 14px; }
.cx-grewnote a { color: var(--clay-700); font-weight: 600; }
.cx-grewnote button { margin-left: auto; background: none; border: 0; color: var(--ink-500); cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 6px; }
.cx-grewnote button:hover { color: var(--ink-900); }

@media (max-width: 767px) {
  .cx-fleetrow { grid-template-columns: 36px 1fr; row-gap: 8px; }
  .cx-fleet-chips, .cx-fleet-time { grid-column: 2; text-align: left; }
  .cx-fleet-actions { grid-column: 1 / -1; }
}

/* =========================================================================
   M3 — product detail pages (3 templates) + status page
   ========================================================================= */
.cx-pd { max-width: 860px; }
.cx-pd.is-planned .cx-pd-hero { background: var(--paper-2); border: 1px dashed var(--line-200); border-radius: var(--radius-card); padding: 24px; }
.cx-pd-hero { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 8px; }
.cx-pd-heroglyph { color: var(--ink-700); flex: 0 0 auto; margin-top: 4px; }
.cx-pd.is-planned .cx-pd-heroglyph { color: var(--ink-500); }
.cx-pd-name { font-family: var(--font-display); font-weight: 500; font-size: 32px; line-height: 1.1; color: var(--ink-900); margin: 0; }
.cx-pd-desc { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); margin-top: 6px; }
.cx-pd-pillslot { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cx-pd-oneliner { font-size: 17px; color: var(--ink-700); line-height: 1.55; margin: 18px 0 24px; max-width: 62ch; }
.cx-pd-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 8px 0 28px; }
.cx-btn-clay { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; background: var(--clay-600); color: var(--paper-1); font-weight: 600; font-size: 15px; border-radius: var(--radius-card); box-shadow: 0 1px 2px rgba(120,40,15,.25); }
.cx-btn-clay:hover { background: var(--clay-700); }
.cx-pd-doclink { color: var(--ink-500); font-size: 14px; font-weight: 500; }
.cx-pd-doclink:hover { color: var(--clay-700); }
.cx-pd-lineage { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.cx-pd-mods { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.cx-pd-banner { background: var(--clay-100); border: 1px solid var(--clay-600); border-radius: var(--radius-card); padding: 12px 16px; color: var(--clay-700); font-weight: 600; font-size: 14px; margin: 4px 0 24px; }
.cx-pd-ships { margin: 0 0 24px; padding-left: 20px; color: var(--ink-700); }
.cx-pd-ships li { margin: 8px 0; line-height: 1.5; }
.cx-pd-seqrow { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; }
.cx-seqtag.big { font-size: 12px; letter-spacing: .1em; color: var(--gold-700); background: var(--gold-100); padding: 4px 10px; border-radius: var(--radius-pill); }
.cx-pd-brief { color: var(--ink-700); line-height: 1.6; max-width: 68ch; }
.cx-pd-brief .cx-pd-briefh1 { display: none; }
.cx-pd-brief h2 { font-family: var(--font-display); font-weight: 500; font-size: 20px; color: var(--ink-900); margin: 26px 0 8px; }
.cx-pd-brief p { margin: 10px 0; }
.cx-pd-brief ul { padding-left: 20px; }
.cx-pd-brief strong { color: var(--ink-900); font-weight: 600; }
.cx-pd-glyph svg { display: block; }

/* status page */
.cx-status-hero { display: flex; align-items: center; gap: 18px; margin: 48px 0 32px; }
.cx-status-bigdot { width: 20px; height: 20px; border-radius: 50%; background: var(--moss-600); box-shadow: 0 0 0 6px var(--moss-100); flex: 0 0 auto; }
.cx-status-rows { display: flex; flex-direction: column; }
.cx-status-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-100); }
.cx-status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--moss-600); flex: 0 0 auto; }
.cx-status-name { color: var(--ink-900); font-size: 15px; }
.cx-status-time { margin-left: auto; color: var(--ink-500); font-size: 12px; }
.cx-status-row:hover .cx-status-name { color: var(--clay-700); }

@media (max-width: 767px) {
  .cx-pd-hero { flex-wrap: wrap; }
  .cx-pd-pillslot { margin-left: 0; }
  .cx-status-time { margin-left: 0; flex-basis: 100%; }
}

/* ============================================================
   M4 — command palette · present mode · public mirror · polish
   ============================================================ */

/* ghost as anchor (public mirror) keeps the button look */
a.cx-card-ghost { display: inline-block; text-decoration: none; }

/* ---- Aggregate stats (present / mirror — real map-derived counts) ---- */
.cx-stats--agg { grid-template-columns: repeat(4, 1fr); }
.cx-stat--agg { background: var(--paper-1); border: 1px solid var(--line-100); border-radius: var(--radius-card); padding: 20px; box-shadow: var(--shadow-1); text-align: left; }
.cx-stat--agg .cx-stat-val { font-family: var(--font-mono); font-size: 40px; font-weight: 500; color: var(--ink-900); font-variant-numeric: tabular-nums; line-height: 1; }
.cx-stat--agg .cx-stat-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); margin-top: 8px; }

/* ---- ⌘K Command palette ---- */
#cx-palette { position: fixed; inset: 0; z-index: 200; display: none; }
#cx-palette.show { display: block; }
.cx-pal-backdrop { position: absolute; inset: 0; background: rgba(34,29,21,.28); backdrop-filter: blur(1.5px); }
.cx-pal-dialog { position: relative; max-width: 620px; margin: 12vh auto 0; background: var(--paper-1); border: 1px solid var(--line-200); border-radius: 14px; box-shadow: 0 20px 60px rgba(34,29,21,.22); overflow: hidden; animation: cxPalIn .14s ease-out; }
@keyframes cxPalIn { from { opacity: 0; transform: translateY(-6px) scale(.99); } to { opacity: 1; transform: none; } }
.cx-pal-inputrow { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line-100); color: var(--ink-500); }
.cx-pal-input { flex: 1; border: 0; outline: none; background: transparent; font-family: var(--font-ui); font-size: 17px; color: var(--ink-900); }
.cx-pal-input::placeholder { color: var(--ink-300); }
.cx-pal-list { list-style: none; margin: 0; padding: 6px; max-height: 46vh; overflow-y: auto; }
.cx-pal-group { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-300); padding: 12px 12px 5px; }
.cx-pal-row { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.cx-pal-row.on { background: var(--clay-100); }
.cx-pal-label { color: var(--ink-900); font-weight: 500; font-size: 14.5px; }
.cx-pal-sub { color: var(--ink-500); font-size: 12.5px; }
.cx-pal-kind { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-300); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.cx-pal-row.on .cx-pal-kind { color: var(--clay-700); }
.cx-pal-empty { padding: 22px 14px; color: var(--ink-500); font-size: 13.5px; }
.cx-pal-foot { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line-100); font-size: 11.5px; color: var(--ink-500); }
.cx-pal-foot kbd, .cx-search kbd { font-family: var(--font-mono); font-size: 10.5px; background: var(--paper-2); border: 1px solid var(--line-200); border-radius: 5px; padding: 1px 6px; color: var(--ink-700); }
.cx-pal-hint { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--ink-300); }

/* ---- Present mode ---- */
.cx-app--present { display: block; }
.cx-present { height: 100vh; overflow: hidden; }
.cx-pres-scroll { position: relative; height: 100vh; overflow-y: auto; scroll-behavior: smooth; }
.cx-pres-sec { max-width: 1180px; margin: 0 auto; padding: 40px 40px 24px; scroll-margin-top: 24px; }
.cx-pres-sec .cx-content { padding: 0; max-width: none; }
.cx-pres-h { font-family: var(--font-display); font-weight: 500; font-size: 30px; color: var(--ink-900); margin: 0 0 18px; }
.cx-masthead--big { margin: 32px 0 28px; }
.cx-masthead--big h1 { font-size: 64px; }
.cx-masthead--big .cx-tagline { font-size: 26px; }
.cx-pres-exit { position: fixed; top: 18px; right: 20px; z-index: 20; font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; color: var(--ink-500); background: var(--paper-1); border: 1px solid var(--line-200); border-radius: var(--radius-pill); padding: 6px 12px; cursor: pointer; }
.cx-pres-exit:hover { color: var(--ink-900); border-color: var(--ink-500); }
.cx-pres-nav { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 20; }
.cx-pres-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-200); cursor: pointer; transition: background .16s, transform .16s; }
.cx-pres-dot.on { background: var(--gold-600); transform: scale(1.25); }
.cx-pres-hint { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 20; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-300); }
.cx-pres-sec.is-current { }

/* ---- Public mirror (marketing-framed) ---- */
.cx-mkt { display: block; }
.cx-mkt-head { display: flex; align-items: center; justify-content: space-between; max-width: 1240px; margin: 0 auto; padding: 20px 32px; }
.cx-mkt-brand .cx-brand-mark { font-family: var(--font-display); font-weight: 500; font-size: 22px; color: var(--ink-900); }
.cx-mkt-nav { display: flex; align-items: center; gap: 22px; }
.cx-mkt-nav a { color: var(--ink-700); font-size: 14px; }
.cx-mkt-nav a:hover { color: var(--ink-900); }
.cx-mkt-cta { background: var(--clay-600); color: #fff !important; padding: 9px 16px; border-radius: 8px; font-weight: 600; }
.cx-mkt-cta:hover { background: var(--clay-700); }
.cx-mkt-main .cx-content { padding-top: 8px; }
.cx-platform-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; margin: 56px 0 24px; padding: 40px; border-top: 1px solid var(--line-100); }
.cx-cta-lg { font-size: 16px; padding: 12px 22px; border-radius: 9px; background: var(--clay-600); color: #fff; }
.cx-cta-lg:hover { background: var(--clay-700); color: #fff; }
.cx-cta-ghost { background: transparent; color: var(--clay-700); border: 1px solid var(--line-200); }
.cx-cta-ghost:hover { background: var(--paper-2); color: var(--clay-700); }
.cx-mkt-foot { display: flex; align-items: center; gap: 16px; max-width: 1240px; margin: 0 auto; padding: 28px 32px 48px; border-top: 1px solid var(--line-100); color: var(--ink-500); font-size: 13px; }
.cx-mkt-foot a:hover { color: var(--ink-900); }

/* ---- responsive (M4 surfaces) ---- */
@media (max-width: 900px) {
  .cx-stats--agg { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .cx-masthead--big h1 { font-size: 40px; }
  .cx-masthead--big .cx-tagline { font-size: 20px; }
  .cx-pres-sec { padding: 28px 20px 20px; }
  .cx-pres-nav { display: none; }
  .cx-pal-dialog { margin: 8vh 12px 0; }
  .cx-pal-kind { display: none; }
  .cx-mkt-nav { gap: 12px; }
  .cx-mkt-nav a:not(.cx-mkt-cta) { display: none; }
  .cx-platform-cta { flex-direction: column; padding: 32px 16px; }
  .cx-cta-lg { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cx-pal-dialog { animation: none; }
  .cx-pres-scroll { scroll-behavior: auto; }
  .cx-pres-dot { transition: none; }
}

/* ---- Account pages: shared page head + Card 3 usage ---- */
.cx-page-head { margin: 8px 0 28px; }
.cx-page-head h1 { font-family: var(--font-display); font-weight: 500; font-size: 34px; color: var(--ink-900); margin: 0; letter-spacing: -.01em; }
.cx-page-head .cx-tagline { font-family: var(--font-display); font-style: italic; font-size: 17px; color: var(--ink-500); margin: 8px 0 0; }
.cx-usage-card { background: var(--paper-1); border: 1px solid var(--line-100); border-radius: var(--radius-card); box-shadow: var(--shadow-1); padding: 24px; max-width: 640px; }
.cx-usage-top { display: flex; align-items: center; justify-content: space-between; }
.cx-usage-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.cx-plan-pill { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--gold-700); background: var(--gold-100); border-radius: 999px; padding: 3px 10px; }
.cx-usage-nums { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 12px; }
.cx-usage-used { font-family: var(--font-mono); font-size: 44px; font-weight: 600; color: var(--ink-900); line-height: 1; font-variant-numeric: tabular-nums; }
.cx-usage-quota { font-family: var(--font-mono); font-size: 14px; color: var(--ink-500); }
.cx-usage-track { height: 8px; background: var(--paper-2); border-radius: 999px; overflow: hidden; }
.cx-usage-fill { height: 100%; background: linear-gradient(90deg, var(--moss-600), var(--gold-600)); border-radius: 999px; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.cx-usage-foot { margin-top: 12px; font-size: 13px; color: var(--ink-500); }
.cx-usage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 640px; margin: 20px 0 8px; }
.cx-mini { background: var(--paper-1); border: 1px solid var(--line-100); border-radius: var(--radius-card); padding: 16px 18px; box-shadow: var(--shadow-1); }
.cx-mini-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.cx-mini-val { font-family: var(--font-mono); font-size: 26px; font-weight: 600; color: var(--ink-900); margin-top: 6px; font-variant-numeric: tabular-nums; }
.cx-mini-val small { font-size: 14px; color: var(--ink-300); font-weight: 400; }
.cx-usage-note { margin: 18px 0 0; font-size: 11.5px; color: var(--ink-300); letter-spacing: .02em; }
@media (max-width: 640px) { .cx-usage-grid { grid-template-columns: 1fr; } }

/* ---- Card 4: API keys ---- */
.cx-btn-clay { font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: #fff; background: var(--clay-600); border: 0; border-radius: 8px; padding: 10px 16px; cursor: pointer; transition: background .15s; }
.cx-btn-clay:hover { background: var(--clay-700); }
.cx-btn-clay:disabled { opacity: .55; cursor: default; }
.cx-empty { background: var(--paper-1); border: 1px dashed var(--line-200); border-radius: var(--radius-card); padding: 28px; color: var(--ink-500); font-size: 14px; }
.cx-key-new { display: flex; gap: 10px; margin: 0 0 22px; max-width: 640px; }
.cx-key-new input { flex: 1; font-family: var(--font-ui); font-size: 14px; color: var(--ink-900); background: var(--paper-1); border: 1px solid var(--line-200); border-radius: 8px; padding: 10px 13px; outline: none; }
.cx-key-new input:focus-visible { box-shadow: var(--focus-ring); border-color: var(--gold-600); }
.cx-key-secret { background: var(--moss-100); border: 1px solid var(--moss-600); border-radius: var(--radius-card); padding: 16px 18px; margin: 0 0 22px; }
.cx-key-secret-head { font-size: 13px; font-weight: 600; color: var(--moss-700); margin-bottom: 10px; }
.cx-key-secret-row { display: flex; align-items: center; gap: 10px; }
.cx-key-secret-row code { flex: 1; font-size: 13px; color: var(--ink-900); background: var(--paper-1); border: 1px solid var(--line-200); border-radius: 7px; padding: 9px 12px; word-break: break-all; }
.cx-key-copy { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--moss-700); background: var(--paper-1); border: 1px solid var(--moss-600); border-radius: 7px; padding: 9px 14px; cursor: pointer; white-space: nowrap; }
.cx-key-table { width: 100%; border-collapse: collapse; }
.cx-key-table th { text-align: left; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-300); font-weight: 500; padding: 0 12px 10px; border-bottom: 1px solid var(--line-100); }
.cx-key-row td { padding: 14px 12px; border-bottom: 1px solid var(--line-100); font-size: 13.5px; vertical-align: middle; }
.cx-key-name { color: var(--ink-900); font-weight: 500; }
.cx-key-prefix { color: var(--ink-700); font-size: 12.5px; }
.cx-key-meta { color: var(--ink-500); font-size: 12px; }
.cx-key-row.is-revoked td { opacity: .5; }
.cx-key-action { text-align: right; }
.cx-key-revoke { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--clay-700); background: transparent; border: 1px solid var(--line-200); border-radius: 7px; padding: 6px 12px; cursor: pointer; }
.cx-key-revoke:hover { border-color: var(--clay-600); background: var(--clay-100); }
.cx-key-revoked-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-300); }

/* ---- Card 5: settings ---- */
.cx-set-card { background: var(--paper-1); border: 1px solid var(--line-100); border-radius: var(--radius-card); box-shadow: var(--shadow-1); padding: 22px 24px; margin: 0 0 18px; max-width: 640px; }
.cx-set-h { font-family: var(--font-display); font-weight: 500; font-size: 19px; color: var(--ink-900); margin: 0 0 16px; }
.cx-set-card label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-700); margin: 12px 0 6px; }
.cx-set-card label:first-of-type { margin-top: 0; }
.cx-set-card input { width: 100%; max-width: 420px; font-family: var(--font-ui); font-size: 14px; color: var(--ink-900); background: var(--paper-0); border: 1px solid var(--line-200); border-radius: 8px; padding: 10px 13px; outline: none; }
.cx-set-card input:focus-visible { box-shadow: var(--focus-ring); border-color: var(--gold-600); }
.cx-set-card input:disabled { color: var(--ink-500); background: var(--paper-2); }
.cx-set-hint, .cx-set-note { font-size: 11.5px; color: var(--ink-300); margin-top: 6px; }
.cx-set-meta { font-size: 11.5px; color: var(--ink-500); margin-top: 10px; }
.cx-set-foot { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.cx-set-status { font-size: 13px; color: var(--ink-500); }
.cx-set-status.is-ok { color: var(--moss-700); font-weight: 600; }
.cx-set-status.is-err { color: var(--error-600); }
.cx-sessions { display: flex; flex-direction: column; }
.cx-session-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-100); }
.cx-session-row:last-child { border-bottom: 0; }
.cx-session-info { display: flex; flex-direction: column; gap: 3px; }
.cx-session-info b { font-size: 13.5px; color: var(--ink-900); font-weight: 600; }
.cx-session-info small { font-size: 11.5px; color: var(--ink-500); }
.cx-session-current { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--moss-700); background: var(--moss-100); border-radius: 999px; padding: 3px 10px; }

/* ---- Card 6: status dot colors ---- */
.cx-status-dot.cx-sd-operational { background: var(--moss-600); }
.cx-status-dot.cx-sd-down { background: var(--error-600); }
.cx-status-dot.cx-sd-degraded { background: var(--gold-600); }
.cx-status-dot.cx-sd-unknown, .cx-status-dot.cx-sd-not_deployed { background: var(--ink-300); }

/* ============================================================
   WS1 — the Project Spine: fleet, doors, project hub
   ============================================================ */
.cx-flight { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid; }
.cx-flight--ink { color: var(--ink-700); background: var(--paper-2); border-color: var(--line-200); }
.cx-flight--clay { color: var(--clay-700); background: var(--clay-100); border-color: var(--clay-100); }
.cx-flight--moss { color: var(--moss-700); background: var(--moss-100); border-color: var(--moss-100); }

.cx-fleet-head2 { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 6px 0 18px; }
.cx-fleet-head2 h1 { font-family: var(--font-display); font-weight: 500; font-size: 40px; color: var(--ink-900); margin: 0; letter-spacing: -.01em; }
.cx-fleet-strip { display: inline-block; background: var(--paper-1); border: 1px solid var(--line-100); border-radius: 8px; padding: 9px 14px; font-size: 12.5px; color: var(--ink-500); margin-bottom: 24px; }
.cx-fleet-strip b { color: var(--ink-900); font-weight: 600; }
.cx-fleet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.cx-proj { display: block; background: var(--paper-1); border: 1px solid var(--line-100); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-1); transition: transform .16s, box-shadow .16s, border-color .16s; }
.cx-proj:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); border-color: var(--line-200); }
.cx-proj-cover { background: var(--paper-2); padding: 26px 20px; min-height: 96px; display: flex; align-items: center; }
.cx-proj-cover span { font-family: var(--font-display); font-weight: 500; font-size: 24px; color: var(--ink-900); line-height: 1.1; }
.cx-proj-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 9px; }
.cx-proj-titlerow { display: flex; align-items: center; gap: 10px; }
.cx-proj-name { font-size: 15px; font-weight: 600; color: var(--ink-900); flex: 1; min-width: 0; }
.cx-proj-origin { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; color: var(--ink-500); border: 1px solid var(--line-200); border-radius: 999px; padding: 2px 7px; }
.cx-proj-meta { font-size: 11.5px; color: var(--ink-500); }
.cx-proj-findings { font-size: 12px; color: var(--clay-700); font-weight: 500; }
.cx-fleet-foot { margin-top: 30px; font-size: 12px; color: var(--ink-300); }
.cx-fleet-foot a { color: var(--ink-500); }
.cx-fleet-foot a:hover { color: var(--ink-900); }
.cx-fleet-empty { text-align: center; padding: 56px 24px; max-width: 480px; margin: 0 auto; }
.cx-fleet-empty svg { margin: 0 auto 20px; display: block; }
.cx-fleet-empty h2 { font-family: var(--font-display); font-weight: 500; font-size: 26px; color: var(--ink-900); margin: 0 0 8px; }
.cx-fleet-empty p { color: var(--ink-500); margin: 0 0 20px; }
.cx-fleet-empty .cx-btn-clay { display: inline-block; text-decoration: none; }
.cx-fleet-empty-alt { font-size: 13px; margin-top: 22px !important; }
.cx-fleet-empty-alt a { color: var(--clay-700); font-weight: 600; }
.cx-inline-error { background: var(--paper-1); border: 1px solid var(--error-600); border-radius: var(--radius-card); padding: 16px 18px; color: var(--error-600); font-size: 14px; }
.cx-inline-error button { background: none; border: 0; color: var(--clay-700); font-weight: 600; cursor: pointer; text-decoration: underline; }

.cx-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.cx-door { background: var(--paper-1); border: 1px solid var(--line-100); border-radius: var(--radius-card); padding: 22px; box-shadow: var(--shadow-1); display: flex; flex-direction: column; }
.cx-door--primary { border-color: var(--clay-600); }
.cx-door--gated { background: var(--paper-2); }
.cx-door-tag { font-size: 10px; letter-spacing: .08em; color: var(--gold-700); margin-bottom: 8px; }
.cx-door-soon { color: var(--ink-300); }
.cx-door-h { font-family: var(--font-display); font-weight: 500; font-size: 19px; color: var(--ink-900); margin: 0 0 6px; }
.cx-door-p { font-size: 13px; color: var(--ink-500); margin: 0 0 14px; }
.cx-door-opt { color: var(--ink-300); font-weight: 400; }
.cx-door label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-700); margin: 10px 0 5px; }
.cx-door input, .cx-door textarea { width: 100%; font-family: var(--font-ui); font-size: 14px; color: var(--ink-900); background: var(--paper-0); border: 1px solid var(--line-200); border-radius: 8px; padding: 9px 12px; outline: none; }
.cx-door input:focus-visible, .cx-door textarea:focus-visible { box-shadow: var(--focus-ring); border-color: var(--gold-600); }
.cx-door .cx-btn-clay, .cx-door .cx-door-ghost { margin-top: 16px; align-self: flex-start; }
.cx-door-ghost { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--clay-700); background: transparent; border: 1px solid var(--line-200); border-radius: 8px; padding: 9px 16px; cursor: pointer; text-decoration: none; display: inline-block; }
.cx-door-ghost:hover { border-color: var(--clay-600); background: var(--clay-100); }
.cx-door-gatedline { font-size: 12.5px; color: var(--ink-500); margin: 6px 0 0; }

.cx-hub-head { margin-bottom: 4px; }
.cx-hub-titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cx-hub-crumb { font-size: 12px; color: var(--ink-500); }
.cx-hub-sep { color: var(--ink-300); }
.cx-hub-name { font-family: var(--font-display); font-weight: 500; font-size: 30px; color: var(--ink-900); margin: 0; }
.cx-hub-reason { font-size: 12px; color: var(--ink-500); margin: 8px 0 0; }
.cx-rail { display: flex; gap: 4px; border-bottom: 1px solid var(--line-100); margin: 18px 0 26px; overflow-x: auto; }
.cx-rail-item { padding: 10px 14px; font-size: 14px; font-weight: 500; color: var(--ink-500); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.cx-rail-item.on { color: var(--ink-900); border-bottom-color: var(--ink-900); }
a.cx-rail-item:hover { color: var(--ink-900); }
.cx-rail-soon { color: var(--ink-300); cursor: default; }
.cx-soon, .cx-soon-tag { font-size: 9px; letter-spacing: .06em; color: var(--ink-300); border: 1px solid var(--line-200); border-radius: 999px; padding: 1px 6px; }
.cx-soon-tag { display: inline-block; margin: 8px 0; color: var(--gold-700); }
.cx-pip { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cx-pip--clay { background: var(--clay-600); }
.cx-pip--moss { background: var(--moss-600); }
.cx-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.cx-hub-panel { background: var(--paper-1); border: 1px solid var(--line-100); border-radius: var(--radius-card); padding: 22px; box-shadow: var(--shadow-1); }
.cx-hub-panel h3 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-500); margin: 0 0 12px; font-weight: 500; }
.cx-hub-panel h2 { font-family: var(--font-display); font-weight: 500; font-size: 22px; color: var(--ink-900); margin: 0 0 10px; }
.cx-hub-panel--status { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.cx-hub-bigchip .cx-flight { font-size: 12px; padding: 4px 12px; }
.cx-hub-reasonbig { font-size: 15px; color: var(--ink-700); margin: 0; }
.cx-hub-panel--status .cx-btn-clay { text-decoration: none; }
.cx-facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 12.5px; }
.cx-facts dt { color: var(--ink-500); }
.cx-facts dd { color: var(--ink-900); margin: 0; word-break: break-all; }
.cx-facts a { color: var(--clay-700); }
.cx-hub-score { font-family: var(--font-mono); font-size: 36px; font-weight: 600; color: var(--ink-900); }
.cx-hub-sev { font-size: 12px; color: var(--ink-500); margin: 6px 0; }
.cx-hub-meta { font-size: 11.5px; color: var(--ink-300); margin-bottom: 10px; }
.cx-hub-panel a { color: var(--clay-700); font-weight: 600; font-size: 13.5px; }
.cx-hub-none { color: var(--ink-500); font-size: 14px; margin: 0 0 10px; }
.cx-hub-notyet p, .cx-hub-nourl p, .cx-hub-elsewhere p { color: var(--ink-500); font-size: 14px; max-width: 560px; }
.cx-hub-note { font-size: 12.5px; color: var(--ink-300); margin-top: 12px; }
.cx-hub-elsewhere { text-align: center; padding: 40px; }
.cx-hub-elsewhere svg { margin: 0 auto 16px; display: block; }
.cx-hub-url { color: var(--ink-700); margin: 10px 0; }
.cx-check-runbar { background: var(--paper-2); border-radius: 8px; padding: 12px 16px; font-size: 13px; color: var(--ink-700); margin-bottom: 14px; }
.cx-check-runbar b { color: var(--ink-900); }
.cx-check-paths { margin: 16px 0; }
.cx-hub-404 { text-align: center; padding: 72px 24px; }
.cx-hub-404 h1 { font-family: var(--font-display); font-weight: 500; font-size: 32px; color: var(--ink-900); margin: 0 0 10px; }
.cx-hub-404 p { color: var(--ink-500); margin: 0 0 22px; }
.cx-hub-404 .cx-btn-clay { text-decoration: none; }
.cx-set-stack { display: flex; flex-direction: column; gap: 18px; max-width: 640px; }
.cx-set-danger { border-color: var(--error-600); }
.cx-btn-danger { font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: #fff; background: var(--error-600); border: 0; border-radius: 8px; padding: 10px 16px; cursor: pointer; }
.cx-btn-danger:disabled { opacity: .45; cursor: default; }
@media (max-width: 767px) { .cx-fleet-grid, .cx-hub-grid, .cx-doors { grid-template-columns: 1fr; } .cx-fleet-head2 h1 { font-size: 30px; } }