/* ============================================================
   platform.css — The Orrery platform chrome
   Extracted from the design prototype (Platform Chrome.dc.html).
   ONE semantic token set, dark-first; light overrides adjacent.
   Hand-authored vanilla CSS — no build step.
   ============================================================ */

/* ============================================================
   platform.css — campaigns.crepeau.io chrome
   ONE semantic token set. Dark is the base (:root).
   Light overrides live in the adjacent block below and are
   commented so the two never drift.
   ============================================================ */

/* ---- DARK (base) ---- */
:root{
  --surface:#14161a; --surface-elevated:#1c2028; --surface-sunken:#0e1013;
  --surface-hover:#232833; --border:#2a2f3a; --border-strong:#3a414f;
  --text:#e7e9ee; --text-muted:#b6becb; --text-faint:#8a93a2;
  --accent:#5e9bf0; --accent-strong:#7db0ff; --accent-weak:rgba(94,155,240,.14);
  --success:#43b581; --success-weak:rgba(67,181,129,.15);
  --warning:#e0a13c; --warning-weak:rgba(224,161,60,.15);
  --danger:#e5545a;  --danger-weak:rgba(229,84,90,.15);
  --focus-ring:rgba(94,155,240,.55); --overlay:rgba(8,10,14,.66);
  --shadow-1:0 1px 2px rgba(0,0,0,.45);
  --shadow-2:0 8px 24px rgba(0,0,0,.5);
  --shadow-3:0 24px 64px rgba(0,0,0,.62);
  --astral:radial-gradient(120% 90% at 50% -30%, rgba(94,155,240,.16), rgba(94,155,240,.05) 38%, transparent 68%);

  /* type */
  --font-ui:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
  --font-display:var(--font-ui);
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-lg:1.25rem; --fs-xl:1.75rem; --fs-2xl:2.25rem;
  /* spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  /* radius + motion */
  --r-1:6px; --r-2:10px; --r-3:14px; --r-full:999px;
  --motion-fast:120ms; --motion:180ms; --ease:cubic-bezier(.2,.6,.2,1);
  --maxw:1120px;
  color-scheme:dark;
}

/* ---- LIGHT (override) — keep every var in the SAME ORDER as dark above ---- */
@media (prefers-color-scheme:light){ :root:not([data-theme]){
  --surface:#f7f8fa; --surface-elevated:#ffffff; --surface-sunken:#eceef2;
  --surface-hover:#eef1f6; --border:#d8dce3; --border-strong:#c2c8d2;
  --text:#1a1d23; --text-muted:#464e5b; --text-faint:#6d7683;
  --accent:#2f6fe0; --accent-strong:#1f57c2; --accent-weak:rgba(47,111,224,.12);
  --success-weak:rgba(67,181,129,.15); --warning-weak:rgba(224,161,60,.15); --danger-weak:rgba(229,84,90,.15);
  --focus-ring:rgba(47,111,224,.5); --overlay:rgba(20,25,35,.42);
  --shadow-1:0 1px 2px rgba(20,25,35,.06),0 1px 3px rgba(20,25,35,.09);
  --shadow-2:0 8px 24px rgba(20,25,35,.12);
  --shadow-3:0 24px 64px rgba(20,25,35,.18);
  --astral:radial-gradient(120% 90% at 50% -30%, rgba(47,111,224,.10), rgba(47,111,224,.03) 40%, transparent 70%);
  color-scheme:light;
}}
[data-theme="light"]{
  --surface:#f7f8fa; --surface-elevated:#ffffff; --surface-sunken:#eceef2;
  --surface-hover:#eef1f6; --border:#d8dce3; --border-strong:#c2c8d2;
  --text:#1a1d23; --text-muted:#464e5b; --text-faint:#6d7683;
  --accent:#2f6fe0; --accent-strong:#1f57c2; --accent-weak:rgba(47,111,224,.12);
  --focus-ring:rgba(47,111,224,.5); --overlay:rgba(20,25,35,.42);
  --shadow-1:0 1px 2px rgba(20,25,35,.06),0 1px 3px rgba(20,25,35,.09);
  --shadow-2:0 8px 24px rgba(20,25,35,.12);
  --shadow-3:0 24px 64px rgba(20,25,35,.18);
  --astral:radial-gradient(120% 90% at 50% -30%, rgba(47,111,224,.10), rgba(47,111,224,.03) 40%, transparent 70%);
  color-scheme:light;
}
[data-theme="dark"]{ color-scheme:dark; } /* forces base dark vars in a light OS */

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--surface);color:var(--text);font-family:var(--font-ui);font-size:var(--fs-base);line-height:1.5;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4,p{margin:0}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-strong)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-1)}
::selection{background:var(--accent-weak)}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-full);border:2px solid transparent;background-clip:padding-box}

/* ---------- primitives ---------- */
.eyebrow{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-weight:500}
.mono{font-family:var(--font-mono)}
.muted{color:var(--text-muted)}
.faint{color:var(--text-faint)}
.rule{height:1px;background:var(--border);border:0;margin:var(--space-6) 0}
.icon{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:9px 15px;border-radius:var(--r-1);
  font-size:var(--fs-sm);font-weight:600;border:1px solid transparent;cursor:pointer;
  transition:background var(--motion-fast) var(--ease),border-color var(--motion-fast) var(--ease),color var(--motion-fast) var(--ease);white-space:nowrap}
.btn--primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn--primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.btn--danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn--danger:hover{filter:brightness(1.08)}
.btn--secondary{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn--secondary:hover{background:var(--surface-hover);border-color:var(--text-faint)}
.btn--ghost{background:transparent;color:var(--text-muted);border-color:transparent;padding:6px 10px}
.btn--ghost:hover{background:var(--surface-hover);color:var(--text)}
.btn--sm{padding:5px 10px;font-size:var(--fs-xs)}
.btn[disabled],.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}

/* ---------- fields ---------- */
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field > label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-weight:500}
.input{width:100%;background:var(--surface-sunken);color:var(--text);border:1px solid var(--border);
  border-radius:var(--r-1);padding:10px 12px;font:inherit;font-size:var(--fs-sm);
  transition:border-color var(--motion-fast) var(--ease),box-shadow var(--motion-fast) var(--ease)}
.input::placeholder{color:var(--text-faint)}
.input:hover{border-color:var(--border-strong)}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)}
.input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-weak)}
.hint{font-size:var(--fs-xs);color:var(--text-muted)}
.hint--error{color:var(--danger)}
.hint--ok{color:var(--success)}

/* ---------- pills / chips / badges ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:var(--r-full);
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.02em}
.pill .dot{width:6px;height:6px;border-radius:var(--r-full);background:currentColor;flex:none}
.pill--success{background:var(--success-weak);color:var(--success)}
.pill--danger{background:var(--danger-weak);color:var(--danger)}
.pill--warning{background:var(--warning-weak);color:var(--warning)}
.pill--muted{background:var(--surface-hover);color:var(--text-muted)}
.pill--accent{background:var(--accent-weak);color:var(--accent)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:var(--r-1);
  background:var(--surface-sunken);border:1px solid var(--border);color:var(--text-muted);font-size:var(--fs-xs);font-weight:500}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--r-full);background:var(--accent);color:#fff;font-size:11px;font-weight:600;line-height:1}

/* ---------- card ---------- */
.card{background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--r-2);
  box-shadow:var(--shadow-1);transition:border-color var(--motion) var(--ease)}
.card:hover{border-color:var(--border-strong)}
.card__pad{padding:var(--space-5)}

/* ---------- tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-4)}
.tile{position:relative;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5);
  background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--r-2);box-shadow:var(--shadow-1);
  cursor:pointer;transition:border-color var(--motion) var(--ease),background var(--motion) var(--ease)}
.tile:hover{border-color:var(--accent);background:var(--surface-hover)}
.tile__icon{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-2);
  background:var(--accent-weak);color:var(--accent);font-size:20px}
.tile__title{font-weight:600;font-size:var(--fs-base);color:var(--text)}
.tile__blurb{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.45}
.tile .badge{position:absolute;top:var(--space-4);right:var(--space-4)}

/* ---------- table ---------- */
.table-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-2);background:var(--surface-elevated)}
table.table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:640px}
.table th{text-align:left;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);
  font-weight:500;padding:11px var(--space-4);border-bottom:1px solid var(--border);white-space:nowrap;background:var(--surface-elevated)}
.table td{padding:13px var(--space-4);border-bottom:1px solid var(--border);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:nth-child(even){background:var(--surface-sunken)}
.table tbody tr:hover{background:var(--surface-hover)}
.table .row-actions{display:flex;gap:var(--space-1);justify-content:flex-end}
.select{background:var(--surface-sunken);color:var(--text);border:1px solid var(--border);border-radius:var(--r-1);
  padding:6px 10px;font:inherit;font-size:var(--fs-xs)}
.select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)}

/* ---------- notification item ---------- */
.notif{display:flex;gap:var(--space-3);padding:var(--space-4);border-bottom:1px solid var(--border);position:relative}
.notif:last-child{border-bottom:0}
.notif:hover{background:var(--surface-hover)}
.notif__glyph{width:34px;height:34px;flex:none;border-radius:var(--r-2);display:grid;place-items:center;font-size:16px;
  background:var(--accent-weak);color:var(--accent)}
.notif--service .notif__glyph{background:var(--warning-weak);color:var(--warning)}
.notif__body{flex:1;min-width:0}
.notif__title{font-weight:500;color:var(--text-muted)}
.notif__text{font-size:var(--fs-sm);color:var(--text-faint);margin-top:2px}
.notif__ts{font-size:var(--fs-xs);color:var(--text-faint);white-space:nowrap}
.notif--unread{background:var(--accent-weak)}
.notif--unread::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent)}
.notif--unread .notif__title{color:var(--text);font-weight:600}
.notif--unread .notif__text{color:var(--text-muted)}
.notif__dot{width:8px;height:8px;border-radius:var(--r-full);background:var(--accent);flex:none;margin-top:7px}

/* ---------- connection card ---------- */
.conn{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);
  background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--r-2);box-shadow:var(--shadow-1)}
.conn__icon{width:42px;height:42px;flex:none;border-radius:var(--r-2);display:grid;place-items:center;
  background:var(--surface-sunken);border:1px solid var(--border);color:var(--text-muted);font-size:20px}
.conn__main{flex:1;min-width:0}
.conn__label{font-weight:600}
.conn__meta{font-size:var(--fs-sm);color:var(--text-muted);margin-top:2px;display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.conn__actions{display:flex;gap:var(--space-2)}

/* ---------- states ---------- */
.state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-3);
  padding:var(--space-12) var(--space-6);border:1px dashed var(--border);border-radius:var(--r-2)}
.state__disc{width:52px;height:52px;border-radius:var(--r-full);display:grid;place-items:center;font-size:24px;
  background:var(--accent-weak);color:var(--accent)}
.state--error .state__disc{background:var(--danger-weak);color:var(--danger)}
.state__title{font-weight:600;font-size:var(--fs-lg)}
.state__body{color:var(--text-muted);max-width:38ch;font-size:var(--fs-sm)}
.spinner{width:34px;height:34px;border-radius:var(--r-full);border:3px solid var(--border);border-top-color:var(--accent);
  animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.shimmer{position:relative;overflow:hidden;background:var(--surface-sunken);border-radius:var(--r-1)}
.shimmer::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--surface-hover),transparent);animation:sh 1.4s infinite}
@keyframes sh{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){
  .spinner{animation:none;border-top-color:var(--accent)}
  .shimmer::after{animation:none}
  *{transition-duration:1ms!important}
}

/* ---------- modal ---------- */
.overlay{position:absolute;inset:0;background:var(--overlay);display:grid;place-items:center;padding:var(--space-6);z-index:40;
  backdrop-filter:blur(1px)}
.modal{width:100%;max-width:440px;background:var(--surface-elevated);border:1px solid var(--border-strong);
  border-radius:var(--r-3);box-shadow:var(--shadow-3);overflow:hidden}
.modal__title{padding:var(--space-5) var(--space-6) 0;font-size:var(--fs-lg);font-weight:600}
.modal__body{padding:var(--space-3) var(--space-6);color:var(--text-muted);font-size:var(--fs-sm)}
.modal__actions{display:flex;justify-content:flex-end;gap:var(--space-2);padding:var(--space-4) var(--space-6) var(--space-6)}

/* ---------- header / nav (in-screen chrome) ---------- */
.screen{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-3);overflow:hidden;isolation:isolate}
.screen__glow{position:absolute;inset:0 0 auto 0;height:280px;background:var(--astral);pointer-events:none;z-index:0}
.starfield{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, var(--text-faint), transparent),
    radial-gradient(1px 1px at 28% 42%, var(--text-faint), transparent),
    radial-gradient(1.5px 1.5px at 47% 12%, var(--accent), transparent),
    radial-gradient(1px 1px at 63% 34%, var(--text-faint), transparent),
    radial-gradient(1px 1px at 78% 20%, var(--text-faint), transparent),
    radial-gradient(1.5px 1.5px at 88% 46%, var(--text-faint), transparent),
    radial-gradient(1px 1px at 38% 62%, var(--text-faint), transparent),
    radial-gradient(1px 1px at 70% 68%, var(--accent), transparent),
    radial-gradient(1px 1px at 18% 78%, var(--text-faint), transparent),
    radial-gradient(1.5px 1.5px at 55% 84%, var(--text-faint), transparent);
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 45%,transparent 80%);
  mask-image:linear-gradient(180deg,#000 0%,#000 45%,transparent 80%)}
@media (prefers-reduced-motion:no-preference){
  .starfield{animation:twinkle 6s var(--ease) infinite alternate}
}
@keyframes twinkle{from{opacity:.4}to{opacity:.7}}
.appbar{position:relative;z-index:2;display:flex;align-items:center;gap:var(--space-4);
  padding:0 var(--space-6);height:60px;background:var(--surface-elevated);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:var(--space-3);font-weight:600;letter-spacing:-.01em}
/* Brand-mark = SUPPLIED raster emblem (identity), placed as-is — never recolored.
   The chrome palette stays neutral; the gold lives in the artwork only. */
.brand__mark{width:28px;height:28px;border-radius:var(--r-full);flex:none;
  background:url("brand/emblem.webp?v=1") center/contain no-repeat}
/* Header lockup = supplied horizontal raster (emblem + wordmark), placed as-is */
.brand__lockup{height:30px;width:auto;display:block;flex:none}
.brand small{color:var(--text-faint);font-weight:400;font-size:var(--fs-xs)}
.nav{display:flex;align-items:center;gap:var(--space-1);margin-left:var(--space-4)}
.nav__item{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--r-1);
  background:transparent;border:0;color:var(--text-muted);font-size:var(--fs-sm);font-weight:500;cursor:pointer;
  transition:background var(--motion-fast),color var(--motion-fast)}
.nav__item:hover{background:var(--surface-hover);color:var(--text)}
.nav__item--active{background:var(--accent-weak);color:var(--text)}
.appbar__right{margin-left:auto;display:flex;align-items:center;gap:var(--space-2)}
.iconbtn{position:relative;width:36px;height:36px;border-radius:var(--r-1);background:transparent;border:1px solid transparent;
  color:var(--text-muted);display:grid;place-items:center;cursor:pointer;font-size:18px;transition:background var(--motion-fast),color var(--motion-fast)}
.iconbtn:hover{background:var(--surface-hover);color:var(--text)}
.iconbtn .badge{position:absolute;top:2px;right:2px;min-width:15px;height:15px;font-size:10px}
.avatar{width:30px;height:30px;border-radius:var(--r-full);background:var(--surface-sunken);border:1px solid var(--border-strong);
  display:grid;place-items:center;font-size:var(--fs-xs);font-weight:600;color:var(--text-muted)}
.hamburger{display:none}

.screen__body{position:relative;z-index:1;padding:var(--space-8) var(--space-6)}
.wrap{max-width:var(--maxw);margin:0 auto}
.page-title{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:600;letter-spacing:-.01em}

/* generic layout helpers */
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}

@media (max-width:760px){
  .nav{display:none}
  .hamburger{display:grid}
  .grid2{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
}

/* ---------- harness ---------- */
.harness{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.rail{position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;background:var(--surface-elevated);
  border-right:1px solid var(--border);display:flex;flex-direction:column;padding:var(--space-5) var(--space-4)}
.rail__brand{display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-2) var(--space-5);font-weight:600}
.rail__group{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint);padding:var(--space-4) var(--space-3) var(--space-2)}
.rail__item{display:flex;align-items:center;gap:var(--space-2);width:100%;text-align:left;padding:8px var(--space-3);
  border-radius:var(--r-1);background:transparent;border:0;color:var(--text-muted);font-size:var(--fs-sm);font-weight:500;cursor:pointer;
  transition:background var(--motion-fast),color var(--motion-fast)}
.rail__item:hover{background:var(--surface-hover);color:var(--text)}
.rail__item--active{background:var(--accent-weak);color:var(--text)}
.rail__spacer{flex:1}
.toggle{display:flex;gap:4px;padding:4px;background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--r-full)}
.toggle button{flex:1;padding:6px;border-radius:var(--r-full);border:0;background:transparent;color:var(--text-muted);
  font-size:var(--fs-xs);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.toggle button[aria-pressed="true"]{background:var(--surface-elevated);color:var(--text);box-shadow:var(--shadow-1)}
.stage{padding:var(--space-8);overflow-x:hidden}
.anno{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-5)}
.anno span{font-size:var(--fs-xs);color:var(--text-muted);background:var(--surface-elevated);border:1px solid var(--border);
  border-radius:var(--r-full);padding:3px 10px}
.anno span b{color:var(--text);font-weight:600}

/* design-system page bits */
.ds-sec{margin-bottom:var(--space-12)}
.ds-sec > h2{font-size:var(--fs-lg);font-weight:600;margin-bottom:var(--space-2)}
.ds-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--space-3)}
.sw{border:1px solid var(--border);border-radius:var(--r-2);overflow:hidden;background:var(--surface-elevated)}
.sw__chip{height:56px}
.sw__meta{padding:8px 10px}
.sw__name{font-size:var(--fs-xs);font-weight:600}
.sw__val{font-size:11px;color:var(--text-muted)}
.panel{border:1px solid var(--border);border-radius:var(--r-2);background:var(--surface);padding:var(--space-5)}
.panel--label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);margin-bottom:var(--space-4)}
.specimen{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.scale-row{display:flex;align-items:baseline;gap:var(--space-4);padding:var(--space-2) 0;border-bottom:1px solid var(--border)}
.scale-row .tok{font-size:11px;color:var(--text-faint);width:120px;flex:none}
/* ---- dashboard hero tiles: image on top, container-query icon fallback when narrow ---- */
.tile--hero{padding:0;gap:0;overflow:hidden;container-type:inline-size}
.tile--hero .tile__media{position:relative;width:100%;aspect-ratio:16/10;background:var(--surface-sunken);border-bottom:1px solid var(--border)}
.tile--hero .tile__media image-slot{position:absolute;inset:0}
.tile--hero .tile__meta{display:flex;align-items:flex-start;gap:10px;padding:var(--space-4)}
.tile--hero .tile__meta .tile__icon{display:none;width:32px;height:32px;font-size:16px}
.tile__txt{display:flex;flex-direction:column;gap:3px;min-width:0}
@container (max-width:212px){
  .tile--hero .tile__media{display:none}
  .tile--hero .tile__meta .tile__icon{display:grid}
}
/* compact icon tile — utilities and the small-screen treatment */
.tile--compact{flex-direction:row;align-items:flex-start;gap:12px}
.tile--compact .tile__icon{width:34px;height:34px;font-size:17px}

/* ---- landing: cross-fading campaign panel (atmosphere, campaign art) ---- */
.cyc-frame{position:relative;aspect-ratio:4/3;width:100%;border-radius:var(--r-3);overflow:hidden;
  border:1px solid var(--border-strong);box-shadow:var(--shadow-2);background:var(--surface-sunken)}
.cyc{position:absolute;inset:0;opacity:0;animation:cyc 32s var(--ease) infinite}
.cyc image-slot{position:absolute;inset:0}
.cyc:nth-child(1){animation-delay:0s}
.cyc:nth-child(2){animation-delay:8s}
.cyc:nth-child(3){animation-delay:16s}
.cyc:nth-child(4){animation-delay:24s}
.cyc-cap{position:absolute;left:14px;bottom:14px;z-index:6;pointer-events:none}
@keyframes cyc{0%{opacity:0}3%{opacity:1}22%{opacity:1}25%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cyc{animation:none}.cyc:first-child{opacity:1}}
/* ---- landing full-bleed hero (image spans the block; content sits on top) ---- */
.hero-full{position:relative;overflow:hidden;min-height:460px;display:flex;align-items:center;isolation:isolate}
.hero-full > .cyc,.hero-full > image-slot{position:absolute;inset:0;z-index:0}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,10,14,.88),rgba(8,10,14,.6) 46%,rgba(8,10,14,.34))}
.hero-content{position:relative;z-index:2;width:100%;pointer-events:none;padding:var(--space-12) var(--space-8)}
.hero-content a,.hero-content button,.hero-content .btn{pointer-events:auto}
.hero-content h1,.hero-content .hero-tag{color:#fff}
.hero-content p{color:rgba(255,255,255,.82)}
.hero-content .eyebrow{color:rgba(255,255,255,.68)}
.btn--onimg{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.32)}
.btn--onimg:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6)}
/* ---- landing "inside" cover tiles: full image, text plate over the bottom ---- */
.tile--cover{position:relative;padding:0;overflow:hidden;min-height:230px;display:flex;flex-direction:column;justify-content:flex-end;container-type:inline-size}
.tile--cover image-slot{position:absolute;inset:0;z-index:0}
.tile--cover .tile__plate{position:relative;z-index:2;width:100%;pointer-events:none;
  padding:var(--space-8) var(--space-4) var(--space-4);
  background:linear-gradient(180deg,transparent,rgba(8,10,14,.55) 42%,rgba(8,10,14,.92))}
.tile--cover .tile__plate .tile__title{color:#fff}
.tile--cover .tile__plate .tile__blurb{color:rgba(255,255,255,.82)}
.tile--cover .tile__icon{background:rgba(255,255,255,.16);color:#fff}
@container (max-width:212px){
  .tile--cover{align-items:stretch;min-height:0}
  .tile--cover image-slot{display:none}
  .tile--cover .tile__plate{background:none;padding:var(--space-4)}
  .tile--cover .tile__plate .tile__title{color:var(--text)}
  .tile--cover .tile__plate .tile__blurb{color:var(--text-muted)}
  .tile--cover .tile__icon{background:var(--accent-weak);color:var(--accent)}
}

/* ============================================================
   Production adaptations (mockup port)
   The design shipped platform.css against a review harness that
   rendered each screen as a .screen card and used <image-slot>
   placeholders. In production each screen is a FULL PAGE and the
   slots are real <img>. These few rules are that glue — no tokens
   or component looks are changed. (Harness-only classes above —
   .harness/.rail/.stage — are unused here and prune at build.)
   ============================================================ */

/* Full-page app shell — replaces the prototype's .screen wrapper.
   Same relative/isolate context the glow + starfield need. */
.app{position:relative;min-height:100dvh;isolation:isolate;background:var(--surface);display:flex;flex-direction:column}
.app > .screen__body{flex:1}

/* Overlays/drawers start hidden until opened (app.js toggles [hidden]).
   .overlay sets display:grid, so [hidden] needs to win — it does on
   specificity, no !important. */
.overlay[hidden]{display:none}
[data-drawer][hidden]{display:none}

/* Real content images fill the slots <image-slot> used to occupy. */
.tile--hero .tile__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tile--cover > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
.hero-full > img,.hero-full > .cyc > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.avatar img{width:100%;height:100%;border-radius:inherit;object-fit:cover;display:block}

/* Raster icons: <img class="icon"> replaces the SVG sprite where wired. Same 1em
   sizing as the sprite (scales with the parent font-size), so markup swaps 1:1. */
img.icon{width:1em;height:1em;object-fit:contain;vertical-align:middle;flex:none}
/* Raster icons are fixed-azure (no currentColor). On filled/on-image buttons the icon
   must read white like the label — force it white there. */
.btn--primary img.icon,.btn--danger img.icon,.btn--onimg img.icon{filter:brightness(0) invert(1)}

/* Landing hero: when it stacks to one column (≤760px), show the RIGHT column
   (lockup + tagline) first, then the left column (copy + sign-in). */
@media (max-width:760px){
  .hero-content .grid2 > :first-child{order:2}
  .hero-content .grid2 > :last-child{order:1}
}

/* Site footer (version bar) sits at the bottom of the flex-column .app shell. */
.site-footer{position:relative;z-index:1;margin-top:auto}

/* ============================================================
   W4 shell helpers — class-only re-expressions of the mockups'
   inline layout styles (ADR 0008: no inline style=, style-src 'self').
   ============================================================ */
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.site-footer{border-top:1px solid var(--border);background:var(--surface-elevated);padding:var(--space-5) var(--space-6)}
.footer__row{justify-content:space-between;flex-wrap:wrap;gap:var(--space-3)}
.footer__brand{gap:var(--space-2)}
.footer__status{gap:var(--space-4)}
.appbar__right{gap:var(--space-3)}
.acct__name{font-size:var(--fs-sm);font-weight:500}
.acct__logout{display:inline-flex}
.card__title{font-weight:600;margin-bottom:var(--space-2)}
.card__body{color:var(--text)}
.card__actions{display:flex;gap:var(--space-2);margin-top:var(--space-4);flex-wrap:wrap}
.tile__head{gap:var(--space-2)}
.tile__txt{display:flex;flex-direction:column;gap:2px}
.notif__action{margin-left:auto}
.conn__meta{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center;margin-top:4px}
.conn__actions{margin-left:auto}
/* Auth (login) layout — centered brand + form card, stripped chrome. */
.auth{display:grid;place-items:center;min-height:0;padding:var(--space-8) var(--space-6)}
.auth__inner{width:100%;max-width:380px}
.auth__brand{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6)}
.auth__lockup{width:80%;height:auto}
.auth__note{text-align:center;font-size:var(--fs-xs);margin-top:var(--space-4)}
.auth__error{padding:var(--space-4);border-style:solid;border-color:var(--danger);background:var(--danger-weak);flex-direction:row;text-align:left;align-items:flex-start;gap:var(--space-2)}
.auth__error .state__title{font-size:var(--fs-base)}
/* Dashboard scaffolding. */
.dash-head{justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:var(--space-2)}
.section-head{gap:var(--space-3);margin:var(--space-6) 0 var(--space-4);align-items:center}
.section-head__rule{flex:1;height:1px;background:var(--border)}
.form-actions{display:flex;gap:var(--space-2);flex-wrap:wrap}
.stack--gap{gap:var(--space-4)}
.row--gap{gap:var(--space-3)}

/* ============================================================
   Public landing page (pages.landing → chrome:'landing').
   Class-only re-expression of docs/design/mockups/landing.html's
   inline style= attributes (ADR 0008: no inline style=, style-src
   'self'). No tokens or component looks change — just the one-off
   layout the mockup had inlined (glow height, hero copy widths,
   CTA sizing, brand lockup, "inside" section header + tile grid).
   ============================================================ */
/* Public appbar: transparent over the hero, no bottom rule. */
.appbar--public{background:transparent;border-bottom:0}
.appbar__domain{font-size:var(--fs-xs)}
/* The atmospheric layer is taller on the landing (spans the hero). */
.screen__glow--landing{height:560px}
.starfield--landing{height:560px}
/* Floating theme toggle, bottom-right, above the fold. */
.toggle--floating{position:fixed;right:16px;bottom:74px;z-index:60;width:auto;box-shadow:var(--shadow-2)}
/* Hero layout — two columns, centered, generous gap. */
.hero-grid{align-items:center;gap:var(--space-10)}
.hero-eyebrow{margin-bottom:var(--space-4)}
.hero-title{font-size:var(--fs-2xl);max-width:15ch;margin-bottom:var(--space-4);line-height:1.14}
.hero-lede{font-size:var(--fs-lg);font-weight:400;max-width:46ch;margin-bottom:var(--space-6);line-height:1.5}
.hero-actions{gap:var(--space-3);flex-wrap:wrap}
.hero-actions .btn{padding:13px 22px;font-size:var(--fs-base)}
.hero-note{font-size:var(--fs-xs);margin-top:var(--space-5);text-transform:none;letter-spacing:0}
/* Right column — centered brand lockup + tagline. */
.hero-brand{text-align:center}
.hero-lockup{display:block;width:min(560px,92%);height:auto;margin:0 auto var(--space-4);
  filter:drop-shadow(0 10px 44px rgba(0,0,0,.55))}
.hero-tag{font-size:var(--fs-lg);font-weight:500;opacity:.92}
/* "Inside the workshop" section — extra bottom padding + a titled rule. */
.landing-inside{padding-bottom:var(--space-12)}
.inside-head{gap:var(--space-4);align-items:center;margin-bottom:var(--space-6)}
.tiles--fit{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}