/* BIL console — Creatorcoded reference system.
   Near-black canvas, frosted zinc glass panels, Inter, crimson brand accent.

   TYPE SCALE — four roles only. Everything maps to one of these:
   - display:  48px/700          white    (h1 only)
   - title:    16px/700          white    (h3, row titles, postures scale up)
   - body:     14px/500          zinc-300 (default text, table cells, inputs)
   - meta:     12px/500          zinc-500 (dates, ids, secondary info)
   - micro:    10px/900/.1em UPPER zinc-500 (th, labels, badges, eyebrow)
   - section:  12px/900/.1em UPPER zinc-500 (h2, .an-h2 — section dividers)
   Mono (JetBrains) is reserved for literal identifiers/code, at 12px. */
:root {
  color-scheme: dark;
  --bg: #080808;
  --brand-400: #ff3d64;
  --brand-500: #ff0038;
  --brand-600: #e60032;

  --zinc-100: #f4f4f5;
  --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa;
  --zinc-500: #71717a;
  --zinc-600: #52525b;
  --zinc-700: #3f3f46;

  /* surfaces */
  --canvas: var(--bg);
  --surface: rgba(24,24,27,.3);        /* zinc-900/30 frosted */
  --surface-solid: #121214;
  --sunken: rgba(39,39,42,.2);         /* zinc-800/20 — machine output */
  --hairline: rgba(255,255,255,.08);
  --hairline-soft: rgba(255,255,255,.05);
  --hairline-strong: rgba(255,255,255,.14);

  /* text ramp */
  --text: #ffffff;
  --body: var(--zinc-300);
  --muted: var(--zinc-400);
  --faint: var(--zinc-500);
  --ink: var(--brand-400);
  --ink-strong: #ffffff;
  --ink-soft: var(--zinc-400);
  --ink-faint: var(--zinc-500);

  /* risk — warm hues stay for risk; brand crimson is the accent */
  --green: #4ade80;
  --amber: #fbbf24;
  --red: #f87171;
  --deep-red: #ef4444;
  --violet: #a78bfa;
  --orange: #fb923c;
  --lime: #a3e635;
  --ochre: #d6bb8a;
  --slate: #a1a1aa;

  --green-bg: rgba(74,222,128,.10);
  --amber-bg: rgba(251,191,36,.10);
  --red-bg: rgba(248,113,113,.12);
  --deep-red-bg: rgba(239,68,68,.14);
  --violet-bg: rgba(167,139,250,.12);
  --orange-bg: rgba(251,146,60,.12);
  --lime-bg: rgba(163,230,53,.10);
  --ochre-bg: rgba(214,187,138,.10);
  --slate-bg: rgba(161,161,170,.10);

  --sans: 'Inter', system-ui, sans-serif;
  --serif: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --r: 24px;
  --r-sm: 16px;

  /* the dropdown arrow, drawn by us rather than the browser. Muted at rest,
     one step brighter under the cursor and while focused. A data URI cannot
     read a custom property, so the two ramp stops are written out: zinc-400
     (#a1a1aa) and zinc-300 (#d4d4d8). */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7' fill='none' stroke='%23a1a1aa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 2 5 6 9 2'/%3E%3C/svg%3E");
  --chevron-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7' fill='none' stroke='%23d4d4d8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 2 5 6 9 2'/%3E%3C/svg%3E");
  /* the tick inside a chosen box, drawn the same way and in the same white the
     brand fill behind it is designed for */
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 4.3 3.7 7 9 1'/%3E%3C/svg%3E");

  /* type roles */
  --fs-body: 14px;
  --fs-meta: 12px;
  --fs-micro: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
::selection { background: rgba(255,0,56,.3); }
body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.6;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* label hierarchy — three literal styles from the reference:
   micro-label:  10px/700/.1em upper zinc-500  (th, form labels, small heads)
   section-head: 12px/900/.1em upper zinc-500  (h2 — "Recent Briefs" head)
   eyebrow:      10px/900/.1em upper zinc-500  (page eyebrow only) */
.micro, th, label, .group-head, .crumbs,
.side-by-side .col .lbl, #nav .nav-sect {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--zinc-500);
}
h2 {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--zinc-500);
}
.eyebrow span, .brand span {
  font-size: var(--fs-micro); font-weight: 900;
  text-transform: uppercase; color: var(--zinc-500);
}

/* top marquee strip — reference signature */
.marquee {
  display: flex; overflow: hidden; white-space: nowrap;
  font-size: 9px; font-weight: 900; letter-spacing: .3em;
  color: var(--zinc-700); text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.05);
  padding: 12px 0;
}
.marquee-track { display: flex; gap: 48px; animation: marquee 30s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

#shell { display: grid; grid-template-columns: 288px 1fr; min-height: 100vh; }
#main-col { min-width: 0; }
@media (max-width: 860px) { #shell { grid-template-columns: 1fr; } #sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--hairline-soft); } }

/* ------------------------------------------------------------- sidebar
   Values lifted verbatim from the design-reference HTML (Submit Roster). */
#sidebar {
  position: sticky; top: 0; height: 100vh; z-index: 50;
  display: flex; flex-direction: column;
  background: rgba(28,28,28,.8);
  backdrop-filter: blur(64px);
  border-right: 1px solid #242424;
  overflow-y: auto;
}
/* Logo block: p-8 */
.side-logo { padding: 32px; display: flex; align-items: center; gap: 16px; cursor: pointer; text-decoration: none; color: inherit; }
.logo-box {
  width: 48px; height: 48px; border-radius: 16px; flex: none;
  background: var(--brand-600);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-style: italic; letter-spacing: -.05em; font-size: 18px;
  box-shadow: 0 0 20px rgba(255,0,56,.3);
  transition: transform .15s;
}
.side-logo:hover .logo-box { transform: scale(1.05); }
.logo-name { font-weight: 900; font-size: 14px; letter-spacing: -.025em; line-height: 1; margin-bottom: 4px; color: #fff; }
.logo-tag { font-size: 10px; font-weight: 700; color: var(--zinc-500); text-transform: uppercase; letter-spacing: .2em; }
/* Nav container: 32px gutters */
.side-body { padding: 0 32px; flex: 1; }
/* Action buttons (Spaces / Home) */
.side-actions { display: flex; flex-direction: column; gap: 4px; }
.side-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-radius: 16px;
  font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0;
  line-height: normal; cursor: pointer; transition: all .3s; text-decoration: none;
  background: rgba(255,255,255,.02); color: var(--zinc-400);
  border: 1px solid rgba(255,255,255,.06);
}
.side-btn:hover { color: #e4e4e7; background: rgba(255,255,255,.05); }
.side-btn .lbl, .nav-btn .lbl { display: flex; align-items: center; gap: 16px; }
.side-btn .lbl svg { width: 20px; height: 20px; flex: none; color: var(--zinc-500); transition: color .3s; }
.side-btn:hover .lbl svg { color: var(--zinc-300); }
.side-btn.active {
  background: rgba(230,0,50,.15); color: #fff;
  border: 1px solid rgba(255,0,56,.2);
  box-shadow: 0 0 15px rgba(255,0,56,.1);
}
.side-btn.active .lbl svg { color: var(--brand-500); }
.active-dot {
  width: 6px; height: 6px; border-radius: 9999px; flex: none;
  background: var(--brand-500);
  box-shadow: 0 0 10px rgba(255,0,56,.8);
}
/* Main nav: mt-8, dotted separators, 18px icons */
.side-nav { margin-top: 32px; display: block; }
.nav-sep { border-top: 1px dotted rgba(255,255,255,.1); }
.nav-item-wrap { padding: 4px 0; }
.nav-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-radius: 16px;
  font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0;
  line-height: normal; color: var(--zinc-500); background: none; border: 1px solid transparent;
  cursor: pointer; transition: all .3s; text-decoration: none;
}
.nav-btn:hover { color: var(--zinc-300); background: rgba(255,255,255,.05); }
.nav-btn .lbl svg { width: 18px; height: 18px; flex: none; transition: color .3s; }
.nav-btn.active { background: rgba(255,255,255,.05); color: #fff; border-color: rgba(255,255,255,.1); box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); }
.nav-btn.active .lbl svg { color: var(--brand-500); }
/* About card: current-space context */
.about-card-wrap { margin-top: 40px; }
.about-card {
  position: relative; overflow: hidden;
  padding: 24px; border-radius: 24px;
  background: linear-gradient(to bottom right, rgba(230,0,50,.1), transparent);
  border: 1px solid rgba(255,0,56,.1);
}
.about-card .blob {
  position: absolute; right: -16px; top: -16px; width: 64px; height: 64px;
  background: rgba(255,0,56,.1); border-radius: 9999px; filter: blur(24px);
  transition: transform .15s;
}
.about-card:hover .blob { transform: scale(1.5); }
.about-card h4 { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; color: var(--brand-400); margin-bottom: 8px; }
.about-card p { font-size: 11px; color: var(--zinc-400); line-height: 1.6; font-weight: 500; }
/* Footer user row: p-6, border-t */
.side-foot { padding: 24px; margin-top: auto; border-top: 1px solid #242424; position: relative; }
.user-row {
  width: 100%; display: flex; align-items: center; gap: 16px;
  padding: 12px; border-radius: 16px; background: none; border: none;
  font-family: inherit; color: inherit; cursor: pointer; transition: background .2s;
  text-align: left;
}
.user-row:hover { background: rgba(255,255,255,.05); }
.avatar {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: #27272a; border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; color: #fff;
}
.user-meta { flex: 1; min-width: 0; }
.user-name { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.user-email { font-size: 10px; font-weight: 500; color: var(--zinc-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; }
.user-row .chev { width: 16px; height: 16px; color: var(--zinc-500); flex-shrink: 0; }
/* Profile pop-up menu: w-60, rounded-3xl, opens upward */
.user-menu {
  position: absolute; bottom: calc(100% - 16px); left: 24px;
  width: 240px; padding: 8px; border-radius: 24px;
  background: rgba(24,24,27,.8);
  backdrop-filter: blur(64px);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  z-index: 60;
}
.user-menu-item {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px; border-radius: 16px;
  font-size: 13px; font-weight: 700; letter-spacing: 0;
  color: var(--zinc-400); text-decoration: none; transition: all .15s;
}
.user-menu-item:hover { color: #e4e4e7; background: rgba(255,255,255,.05); }
.user-menu-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.user-menu-item svg { width: 20px; height: 20px; color: var(--zinc-500); flex-shrink: 0; }

/* theme toggle — the console is single-theme now; keep the control hidden */
#theme-toggle { display: none; }

/* ---------------------------------------------------------------- main */
#app { padding: 48px 24px 80px; max-width: 944px; width: 100%; margin: 0 auto; }
h1 { font-size: 48px; font-weight: 700; line-height: 1.05; color: #fff; margin: 0 0 .4rem; }
h1 .muted, h1 .h1-muted { color: var(--zinc-500); font-weight: 500; }
.page-header { margin-bottom: 48px; }
/* Title and its primary action share one line. The action is pushed right by
   margin rather than space-between so that when it wraps onto its own line on a
   narrow screen it stays right-aligned under the title instead of jumping left. */
.page-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; }
.page-title-row h1 { margin: 0; }
.page-title-action { margin-left: auto; flex-shrink: 0; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.eyebrow svg { width: 16px; height: 16px; color: var(--brand-500); }
.eyebrow a { text-decoration: none; }
.eyebrow span { letter-spacing: 0; }
.eyebrow a:hover span { color: var(--brand-400); }
.page-sub { margin-top: 16px; color: var(--zinc-500); font-size: var(--fs-body); max-width: 420px; font-weight: 500; line-height: 1.5; }
h2 { margin: 3rem 0 .9rem; }
h3 { font-size: 16px; color: #fff; margin: 1rem 0 .4rem; font-weight: 700; }
a { color: var(--brand-400); }
p { margin: .4rem 0 .8rem; }
.muted { color: var(--zinc-500); }
.small { font-size: var(--fs-meta); }
.mono { font-family: var(--mono); font-size: var(--fs-meta); }
.serif { font-family: var(--sans); }
.crumbs { letter-spacing: .1em; margin-bottom: .5rem; color: var(--zinc-600); }
.crumbs a { color: var(--zinc-500); text-decoration: none; }
.crumbs a:hover { color: var(--brand-400); text-decoration: none; }

.card {
  position: relative;
  background: var(--surface); border: 1px solid var(--hairline);
  backdrop-filter: blur(64px);
  border-radius: 40px; padding: 32px; margin: 1rem 0;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
  overflow: hidden;
}
.card::before {
  content: ''; position: absolute; top: 0; right: 0; width: 256px; height: 256px;
  background: rgba(255,0,56,.05); border-radius: 9999px;
  filter: blur(100px); pointer-events: none;
}
.card > * { position: relative; z-index: 10; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 760px) { .cols { grid-template-columns: 1fr; } }
.grid3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 760px) { .grid2 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- tables
   Legibility first: generous row height, 14px body text, white 600 for the
   one column that identifies the row, 12px zinc-500 for secondary columns,
   clear hover affordance on clickable rows. */
table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: rgba(24,24,27,.2); border: 1px solid var(--hairline-soft);
  border-radius: var(--r); overflow: hidden;
}
th {
  text-align: left; letter-spacing: .15em;
  padding: 14px 20px; border-bottom: 1px solid var(--hairline-soft);
  background: rgba(255,255,255,.02); white-space: nowrap;
}
td {
  padding: 16px 20px; border-bottom: 1px solid var(--hairline-soft);
  vertical-align: middle; font-size: var(--fs-body); line-height: 1.5;
}
td .small, td.small, td .muted { font-size: var(--fs-meta); }
td .mono { font-size: var(--fs-meta); color: var(--zinc-400); }
tr:last-child td { border-bottom: 0; }
tr.click { cursor: pointer; }
tr.click td { transition: background .15s; }
tr.click:hover td { background: rgba(39,39,42,.4); }
tr.click:hover td strong { color: var(--brand-400); }
td strong { color: #fff; font-weight: 600; transition: color .2s; }
/* The lens kind's mark leads the row it belongs to, so the three kinds are
   told apart before the title is read; the kind's name follows in its own
   column rather than being carried twice. */
.lens-cell { display: flex; align-items: center; gap: 12px; }
.row-icon { padding: 8px; background: rgba(255,0,56,.05); border-radius: 12px; flex-shrink: 0; display: flex; }
.row-icon svg { width: 16px; height: 16px; color: var(--brand-500); }
.kind-cell { white-space: nowrap; color: var(--zinc-400); }

/* a tickbox column takes only the width of its tickbox, which sizes itself
   (see the tickbox block in the forms section) */
.tick-cell { width: 1px; padding-right: 0; white-space: nowrap; }
.tick-cell label { display: flex; align-items: center; margin: 0; }

/* key/value tables inside cards read as definition lists, not data grids */
.card table, .card tr td { border: 0; background: transparent; box-shadow: none; border-radius: 0; }
.card td { padding: 8px 12px 8px 0; border-bottom: 1px dashed var(--hairline-soft); }
.card td:first-child { color: var(--zinc-500); font-size: var(--fs-meta); white-space: nowrap; }

/* ---------------------------------------------------------------- forms */
label { display: block; letter-spacing: .1em; margin: .8rem 0 .3rem; }
input, select, textarea {
  width: 100%; font: inherit; font-size: var(--fs-body); color: var(--zinc-300);
  border: 1px solid var(--hairline-soft); border-radius: var(--r-sm);
  padding: 12px 16px; background: rgba(39,39,42,.2);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.06);
  transition: all .2s;
}
::placeholder { color: var(--zinc-500); font-weight: 500; opacity: .8; }
textarea { border-radius: 24px; padding: 24px; font-family: var(--mono); font-size: var(--fs-meta); line-height: 1.7; }
/* background-color, not the background shorthand: a shorthand here would wipe
   the chevron a dropdown carries as its background image. */
input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(255,0,56,.3); background-color: rgba(39,39,42,.4); }
select option { background: #18181b; color: var(--zinc-300); }
/* Dropdowns wear the console's own chevron. The browser paints its native
   arrow hard against the inline end whatever padding the control carries, so
   a select that keeps it reads as clipped; taking the arrow over lets it sit
   inset from the border, with room reserved on the right so even the longest
   option label stops short of it.

   Which chevron is a variable, so hover and focus only have to flip the ramp
   and every size below keeps its own inset. The rule that paints it reaches
   collapsed dropdowns only: a multi-select or a sized picker draws as an open
   list with no arrow to take over, so it is never given `appearance: none` in
   the first place and keeps whatever list box the browser draws — Firefox
   included. :where() keeps the whole thing at plain-element weight, so the
   compact variants further down still win on their own inset. */
select { --arrow: var(--chevron); }
select:hover, select:focus { --arrow: var(--chevron-lit); }
select:where(:not([multiple]):not([size])),
select:where(:not([multiple])[size="1"]) {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 40px;
  background-image: var(--arrow);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 7px;
  /* named properties, never the `all` the form controls above transition: the
     chevron is a background image, so `all` animates the swap between the two
     ramp stops and the arrow fades out and back in under the cursor */
  transition: border-color .2s, background-color .2s, color .2s, box-shadow .2s;
}
/* Tickboxes are drawn by the console too, for the same reason the dropdowns
   took their arrow over: the browser paints a system square with a system-blue
   tick, which reads as borrowed next to everything around it. Here it is the
   sunken input background as a small rounded square, filled with the brand and
   carrying the same tick the picker's own boxes use once it is ticked.

   Suppressing the native rendering also drops the states the browser drew, so
   they are written back: a lit border under the cursor, and the console's focus
   ring on keyboard focus. `:focus-visible`, so a click leaves no ring behind
   but tabbing to the box always shows one. Toggling stays the browser's. */
input[type="checkbox"] {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  flex: none; width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0;
  vertical-align: middle; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--zinc-600);
  background-color: rgba(39,39,42,.2);
  background-repeat: no-repeat; background-position: center; background-size: 10px 8px;
  /* named properties, never the `all` the form controls above transition: the
     tick is a background image, so `all` fades it in and out of every toggle */
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
input[type="checkbox"]:hover { border-color: var(--zinc-500); background-color: rgba(39,39,42,.4); }
input[type="checkbox"]:checked {
  /* background-color, never the shorthand: it would wipe the tick out again */
  background-color: var(--brand-600); border-color: var(--brand-600);
  background-image: var(--tick);
}
/* a ticked box has already taken the brand fill, so the hover above is invisible
   on it: it answers the cursor one step brighter instead */
input[type="checkbox"]:checked:hover { background-color: var(--brand-500); border-color: var(--brand-500); }
input[type="checkbox"]:focus-visible {
  outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(255,0,56,.25);
}
/* Picker (.pick) — the console's own dropdown, in a pick-one and a pick-several
   mode. A `<select>` only lets a page style the closed box: the list it opens
   is drawn by the browser, so two dropdowns standing together in one form open
   into two different-looking things, and `<select multiple>` is not a dropdown
   at all. Closed, this wears exactly the dropdown styling above; open, it
   drops its own panel of choices below itself. */
.pick { position: relative; }
.pick-btn {
  /* the chevron ramp is set on `select`, which this is not: start it here or
     the closed control carries no arrow at all until it is hovered */
  --arrow: var(--chevron);
  width: 100%; text-align: left; cursor: pointer;
  font: inherit; font-size: var(--fs-body); font-weight: 500;
  text-transform: none; letter-spacing: 0; color: var(--zinc-300);
  border: 1px solid var(--hairline-soft); border-radius: var(--r-sm);
  padding: 12px 40px 12px 16px;
  background-color: rgba(39,39,42,.2);
  background-image: var(--arrow);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 7px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.06);
  /* named properties, never the `all` the button ramp below transitions: the
     chevron is a background image, and a transition that includes it makes the
     arrow fade as the hover ramp swaps one chevron for the other */
  transition: border-color .2s, background-color .2s, color .2s, box-shadow .2s;
}
/* the global button ramp lifts and shrinks on press; a form control must not */
.pick-btn:hover, .pick-btn:focus, .pick-btn:active {
  transform: none; background-color: rgba(39,39,42,.4); --arrow: var(--chevron-lit);
}
.pick-btn:focus { outline: none; border-color: rgba(255,0,56,.3); }
.pick.open .pick-btn { border-color: rgba(255,0,56,.3); background-color: rgba(39,39,42,.4); --arrow: var(--chevron-lit); }
.pick-face { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-face.empty { color: var(--zinc-500); }
.pick-menu {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px);
  max-height: 17rem; overflow: auto; padding: 8px;
  border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.1);
  background: rgba(24,24,27,.92); backdrop-filter: blur(64px);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -4px rgba(0,0,0,.3);
}
/* the rows are choices, not form labels: they shed the micro-label ramp every
   `label` in the console otherwise wears */
.pick-opt {
  display: flex; align-items: center; gap: 12px; margin: 0;
  padding: 10px 12px; border-radius: 12px; cursor: pointer;
  font-size: var(--fs-body); font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--zinc-400); transition: color .15s, background .15s;
}
.pick-opt:hover { color: #e4e4e7; background: rgba(255,255,255,.05); }
.pick-opt input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.pick-box {
  flex: 0 0 16px; width: 16px; height: 16px; border-radius: 5px;
  border: 1px solid var(--zinc-600); background: rgba(39,39,42,.4); transition: all .15s;
}
.pick-opt:hover .pick-box { border-color: var(--zinc-500); }
.pick-opt input:checked + .pick-box {
  background-color: var(--brand-600); border-color: var(--brand-600);
  background-image: var(--tick); background-repeat: no-repeat;
  background-position: center; background-size: 10px 8px;
}
.pick-opt input:focus-visible + .pick-box { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(255,0,56,.25); }
.pick-name { font-size: var(--fs-body); font-weight: 600; }
.pick-opt input:checked ~ .pick-name { color: #e4e4e7; }
/* pick-one marks its choice the way a radio does — one round box, filled */
.pick.single .pick-box { border-radius: 50%; }
.pick.single .pick-opt input:checked + .pick-box {
  background-image: radial-gradient(circle at center, #fff 0 2.5px, transparent 2.6px);
  background-size: auto;
}

button, .btn {
  font: inherit; font-weight: 900; font-size: 12px; line-height: normal; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0; white-space: nowrap;
  background: var(--brand-600); color: #fff; border: none;
  border-radius: 20px; padding: 16px 40px; text-decoration: none; display: inline-block;
  transition: all .2s;
}
/* background-color, not the background shorthand: a shorthand resets every
   background longhand, so it blanks the chevron on any button that carries one
   (the picker trigger) — and would tile what it left behind at the top left. */
button:hover, .btn:hover { background-color: var(--brand-500); transform: translateY(-2px); }
button:active, .btn:active { transform: scale(.97); }
button:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }
.btn-link { background: none; border: none; box-shadow: none; color: var(--brand-400); font-size: var(--fs-meta); padding: 0 .25rem; transform: none !important; }
.btn-link:hover { background: none; color: var(--brand-300); text-decoration: underline; transform: none !important; box-shadow: none; }
.btn-icon { background: none; border: none; box-shadow: none; color: var(--zinc-500); padding: 4px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color .15s, background .15s; transform: none !important; }
.btn-icon svg { width: 15px; height: 15px; }
.btn-icon:hover { background: rgba(255,255,255,.06); color: var(--zinc-200); transform: none !important; box-shadow: none; }
.btn-icon-danger:hover { background: rgba(248,113,113,.1); color: var(--red); }
.member-actions { white-space: nowrap; display: flex; align-items: center; gap: .15rem; }
/* the inline role picker is a small control: same chevron, inset scaled down
   so it keeps the same balance as the full-size dropdowns */
.member-role-select {
  font-size: var(--fs-meta); padding: .2rem 1.3rem .2rem .4rem; border-radius: 4px;
  border: 1px solid var(--zinc-700); background: var(--surface); color: var(--text);
  background-image: var(--arrow); background-repeat: no-repeat;
  background-position: right .4rem center; background-size: 8px 6px;
}
button.secondary, .btn.secondary {
  background: rgba(255,255,255,.05); color: var(--zinc-400);
  border: 1px solid rgba(255,255,255,.1); box-shadow: none;
  border-radius: 20px; padding: 15px 40px;
  font-size: 12px; font-weight: 900; letter-spacing: 0; text-transform: uppercase;
}
button.secondary:hover, .btn.secondary:hover { color: #fff; background: rgba(255,255,255,.1); transform: none; box-shadow: none; }
button.danger { background: var(--deep-red); }
form.inline { display: flex; gap: .7rem; align-items: end; max-width: 520px; }
form.inline > div { flex: 1; }

/* -------------------------------------------------- add-member form card */
.card-form { margin-top: 2rem; }
.add-member-form .field-group {
  display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap;
}
.add-member-form .field { flex: 1 1 180px; min-width: 0; }
.add-member-form .field-role { flex: 0 1 140px; }
.add-member-form label { margin-top: 0; }
.add-member-form .field-hint {
  margin: .3rem 0 0; font-size: var(--fs-meta); color: var(--zinc-500); line-height: 1.4;
}
.add-member-form button { margin-top: 1.2rem; }
@media (max-width: 600px) {
  .add-member-form .field-group { flex-direction: column; }
  .add-member-form .field, .add-member-form .field-role { flex: 1 1 100%; }
}

/* --------------------------------------------------------------- badges */
.badge {
  display: inline-block; font-size: var(--fs-micro); font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: var(--slate-bg); color: var(--slate); border: 1px solid var(--hairline-soft);
  vertical-align: middle;
}
.badge.ratified, .badge.COMPLETE { background: var(--green-bg); color: var(--green); border-color: rgba(74,222,128,.2); }
.badge.draft, .badge.drafting { background: var(--ochre-bg); color: var(--ochre); border-color: rgba(214,187,138,.2); }
.badge.FAILED { background: var(--red-bg); color: var(--red); border-color: rgba(248,113,113,.2); }
.badge.RUNNING, .badge.QUEUED { background: var(--violet-bg); color: var(--violet); border-color: rgba(167,139,250,.2); }
.badge-danger { background: var(--red-bg); color: var(--red); border-color: rgba(248,113,113,.2); }
.badge-success { background: var(--green-bg); color: var(--green); border-color: rgba(74,222,128,.2); }

/* action chips — the ladder Stay Out → Post. Zinc fill progression;
   the chosen/strongest state carries the brand accent. */
.action { display: inline-block; font-weight: 900; font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--hairline); background: transparent; color: var(--zinc-400); }
/* One pill treatment for every rung of the ladder — tinted fill, matching
   border, hue-matched text. The hues track the risk chips beside them, so a
   row reads at a glance: red Stay Out sits with High risk, amber Comment with
   Medium, green Post with Low, and the two rungs between them bridge the
   ramp. Same colour language in both columns, one story per row. */
.action.stay-out { background: var(--red-bg); color: var(--red); border-color: rgba(248,113,113,.25); }
.action.monitor  { background: var(--orange-bg); color: var(--orange); border-color: rgba(251,146,60,.24); }
.action.comment  { background: var(--amber-bg); color: var(--amber); border-color: rgba(251,191,36,.22); }
.action.story    { background: var(--lime-bg); color: var(--lime); border-color: rgba(163,230,53,.22); }
.action.post     { background: var(--green-bg); color: var(--green); border-color: rgba(74,222,128,.22); }

/* risk chips — warm hues only */
.risk { display: inline-block; font-weight: 900; font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.risk.Low { background: var(--green-bg); color: var(--green); border: 1px solid rgba(74,222,128,.2); }
.risk.Medium { background: var(--amber-bg); color: var(--amber); border: 1px solid rgba(251,191,36,.2); }
.risk.High { background: var(--red-bg); color: var(--red); border: 1px solid rgba(248,113,113,.25); }

/* alignment band as a pill — same treatment and the same red-to-green ramp as
   the risk and action chips beside it. Off-brand is red for the same reason
   High risk and Stay Out are: it is the end of the row that argues against
   posting. Core is green for the same reason Post is. One colour
   language across all three columns, so a row reads as a single story. */
.band { display: inline-block; font-weight: 900; font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--hairline); background: rgba(255,255,255,.03); color: var(--zinc-400); white-space: nowrap; }
.band.b1 { background: var(--red-bg); color: var(--red); border-color: rgba(248,113,113,.25); }
.band.b2 { background: var(--orange-bg); color: var(--orange); border-color: rgba(251,146,60,.24); }
.band.b3 { background: var(--amber-bg); color: var(--amber); border-color: rgba(251,191,36,.22); }
.band.b4 { background: var(--lime-bg); color: var(--lime); border-color: rgba(163,230,53,.22); }
.band.b5 { background: var(--green-bg); color: var(--green); border-color: rgba(74,222,128,.22); }

/* alignment band meter — the filled segments carry the reached band's own
   colour, so the meter can never disagree with the pill above it. */
.band-meter { display: flex; gap: 3px; margin: .4rem 0 .2rem; }
.band-meter .seg { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,.05); }
.band-meter .seg.fill-1 { background: var(--red); }
.band-meter .seg.fill-2 { background: var(--orange); }
.band-meter .seg.fill-3 { background: var(--amber); }
.band-meter .seg.fill-4 { background: var(--lime); }
.band-meter .seg.fill-5 { background: var(--green); box-shadow: 0 0 16px rgba(74,222,128,.35); }
.posture { font-size: 16px; font-weight: 700; color: #fff; }

/* action ladder */
.ladder { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin: .5rem 0; }
.ladder .rung { font-size: var(--fs-meta); font-weight: 700; padding: 4px 12px; border-radius: 10px; border: 1px solid var(--hairline); color: var(--zinc-400); background: transparent; }
/* The chosen rung is the action chip itself — one colour source, so the ladder
   can never disagree with the chip beside it. The unchosen rungs stay outlines,
   which keeps the ladder a fill progression rather than five coloured pills. */
.ladder .rung.chosen { background: transparent; border-color: transparent; padding: 0; box-shadow: none; }
.ladder .rung.overruled { text-decoration: line-through; opacity: .6; }
.ladder .arrow { color: var(--zinc-500); font-size: var(--fs-meta); }

/* gate record — floor/cap applied is the system's hardest state */
.cap { border: 1px solid rgba(239,68,68,.3); border-left: 3px solid var(--deep-red); background: var(--deep-red-bg); border-radius: var(--r-sm); padding: .8rem 1rem; margin: .6rem 0; }
.cap .by { font-family: var(--mono); font-size: var(--fs-meta); color: var(--deep-red); margin-bottom: .15rem; }
.cap .remedy { font-style: italic; font-size: var(--fs-body); margin-top: .3rem; }
.gate-silent { border: 1px solid rgba(74,222,128,.2); border-left: 3px solid var(--green); background: var(--green-bg); border-radius: var(--r-sm); padding: .7rem 1rem; margin: .6rem 0; color: var(--green); }

/* red lines the model held: disclosed, not alarming */
.judged { border: 1px solid var(--border); border-left: 3px solid var(--zinc-500); background: var(--panel); border-radius: var(--r-sm); padding: .7rem 1rem; margin: .45rem 0; }
.judged .by { font-family: var(--mono); font-size: var(--fs-meta); color: var(--zinc-500); margin-bottom: .15rem; }

/* uncertainty — violet, before the recommendation */
.uncert { border: 1px solid rgba(167,139,250,.2); border-left: 3px solid var(--violet); background: var(--violet-bg); border-radius: var(--r-sm); padding: .6rem 1rem; margin: .45rem 0; }
.uncert .mono { color: var(--violet); }

/* ways-in */
.wayin {
  border: 1px solid var(--hairline-soft); border-radius: var(--r-sm);
  padding: 1.1rem 1.25rem; background: rgba(24,24,27,.2);
  display: flex; flex-direction: column; gap: .75rem;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.wayin:hover { background: rgba(39,39,42,.45); border-color: var(--hairline); box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.wayin.flagged { border-color: rgba(251,191,36,.3); background: var(--amber-bg); }
.wayin.flagged:hover { border-color: rgba(251,191,36,.5); }

/* card body — who it is for, then title + meta + angle */
.wi-body { display: flex; flex-direction: column; gap: .45rem; }
/* the persona leads the card, but as a name, not a judgement: no colour from
   the action ramp, which on these cards means what to do with the angle.
   Uppercased in the styling, not in the text, so the name a strategist typed
   is what is read out and what a search of the page finds. */
.wi-who {
  font-size: var(--fs-micro); font-weight: 900; color: var(--zinc-400);
  text-transform: uppercase; letter-spacing: .1em;
}
.wi-title { font-size: 1rem; font-weight: 700; color: #fff; line-height: 1.35; }
.wi-meta { font-size: var(--fs-meta); color: var(--zinc-500); }
.wi-angle { font-size: var(--fs-sm); color: var(--zinc-400); line-height: 1.55; }

/* flagged callout */
.wi-flag-note {
  font-size: var(--fs-meta); color: var(--amber);
  border-left: 2px solid rgba(251,191,36,.5); padding-left: .6rem;
  margin-top: .2rem; line-height: 1.4;
}
.wi-flag-label { font-weight: 600; margin-right: .25rem; }

/* footer — the moment this angle was read for, and the action */
.wi-footer {
  font-size: var(--fs-meta); color: var(--zinc-500);
  border-top: 1px solid var(--hairline-soft); padding-top: .6rem;
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
}
/* the source reads as the footer's own text and only shows itself as a link
   under the pointer — but a keyboard has no pointer, so focus underlines too */
.wi-src { color: inherit; text-decoration: none; }
.wi-src:hover, .wi-src:focus-visible { color: var(--zinc-300); text-decoration: underline; }

/* override */
.override-block { border: 1px solid var(--hairline); border-radius: var(--r); padding: 1.2rem 1.4rem; margin: .8rem 0; background: var(--surface); backdrop-filter: blur(64px); }
.side-by-side { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; text-align: center; margin: .8rem 0; }
.side-by-side .col { border: 1px solid var(--hairline-soft); border-radius: var(--r-sm); padding: .9rem; background: rgba(24,24,27,.2); }
.side-by-side .col .lbl { letter-spacing: .15em; color: var(--zinc-600); margin-bottom: .35rem; }

/* modal */
#modal-root:empty { display: none; }
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal { background: #121214; border: 1px solid var(--hairline); border-radius: var(--r); padding: 1.6rem 1.8rem; max-width: 620px; width: 92%; max-height: 88vh; overflow: auto; box-shadow: 0 25px 60px rgba(0,0,0,.6); }

/* reading progress */
.steps { list-style: none; padding: 0; margin: .6rem 0; }
.steps li { display: flex; gap: .7rem; align-items: baseline; padding: .45rem 0; border-bottom: 1px dashed var(--hairline-soft); }
.steps .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--green); flex: none; position: relative; top: -1px; }
.steps .dot.skip { background: var(--amber); }
.steps .ev { font-family: var(--mono); font-size: var(--fs-meta); color: #fff; }
.steps .detail { font-size: var(--fs-meta); color: var(--zinc-500); }
.pending-step { color: var(--zinc-600); font-style: italic; }

/* ----------------------------------------- pdf upload progress bar */
.upload-progress-wrap {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
}
.upload-progress-label { color: var(--zinc-400); font-size: var(--fs-meta); }
.upload-progress-label strong { color: var(--zinc-200); font-weight: 500; }
.upload-progress-track {
  flex: 1 1 120px; min-width: 80px; max-width: 260px;
  height: 5px; border-radius: 999px;
  background: var(--zinc-800, #27272a); overflow: hidden;
}
.upload-progress-bar {
  height: 100%; border-radius: 999px;
  background: var(--green, #22c55e);
  transition: width .15s ease;
}
.upload-progress-pct {
  font-family: var(--mono); font-size: var(--fs-meta);
  color: var(--zinc-400); min-width: 3ch; text-align: right;
}

/* ----------------------------------------- space home dashboard helpers */
/* demoted ID line under the row's primary label */
.row-id { margin-top: 2px; }
/* the time under a date in a table cell */
.row-time { margin-top: 2px; color: var(--faint); }
.row-id .mono { color: var(--zinc-600); }

/* uncertainty preview: JS-truncated to whole-word boundary, displayed as one line */
.uncert-preview {
  display: block; font-size: var(--fs-meta); color: var(--zinc-400); line-height: 1.4;
}

/* subtle source count — replaces the loud violet pill on the dashboard */
.src-count {
  display: inline-block; margin-left: .4rem;
  font-size: var(--fs-micro); font-weight: 700; color: var(--zinc-600);
  letter-spacing: .02em;
}

/* date cells that must never wrap */
td.nowrap { white-space: nowrap; }

/* misc */
.field-row { border: 0; border-radius: var(--r-sm); background: rgba(24,24,27,.2); padding: .8rem 1rem; margin: .5rem 0; transition: all .2s; }
.field-row .head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.field-row .name { font-weight: 800; font-size: 15px; color: var(--zinc-200); }
.field-row .name { line-height: 1.2; }
.field-row .field-desc { margin: .1rem 0 0; font-size: 13px; line-height: 1.3; color: var(--zinc-500); }
/* A signed field whose source changed under it: the signature stands, but the
   strategist is being asked to read the change and confirm it again. */
.field-row .field-stale,
.doc-field .field-stale { margin: .35rem 0 0; line-height: 1.4; color: var(--amber); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.field-row .field-stale a,
.doc-field .field-stale a { color: var(--amber); text-decoration: underline; }
.field-row .field-stale button,
.doc-field .field-stale button { padding: .2rem .6rem; font-size: 12px; }
.row-tags { display: inline-flex; align-items: center; gap: .5rem; flex-shrink: 0; }

/* Lens-kind descriptor under the tabs */
#kindnote { font-size: 14px; border-bottom: 1px solid var(--hairline-soft); padding-bottom: 1rem; }

/* Analysis full render (inline, human-readable) */
.an-section { max-width: 68ch; margin-bottom: 2rem; }
.an-head { max-width: 68ch; } /* title column matches the body text column */
.an-h2 { font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--zinc-500); border-bottom: 1px solid var(--hairline-soft); padding-bottom: .3rem; margin: 2.2rem 0 .6rem; }
.an-excerpt { border-left: 2px solid var(--hairline); padding-left: 1rem; margin: 1rem 0; font-style: italic; color: var(--zinc-300); }
.an-excerpt cite { display: block; font-size: 11px; color: var(--zinc-600); font-style: normal; margin-top: .3rem; }

.field-row .val {
  font-family: inherit; font-size: 15px; line-height: 1.6; color: var(--zinc-300);
  border-radius: 16px; padding: 14px 16px; margin-top: .5rem; width: 100%;
}
/* answer boxes grow with their content — no inner scrollbar, no resize handle.
   Height is set from JS, so it must not animate (Safari mis-measures a box
   whose height is mid-transition) and must never collapse below one line. */
textarea.val {
  overflow: hidden; resize: none; min-height: 3.4em;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
select.val.choice {
  font-family: inherit; font-size: 15px; color: var(--zinc-300);
  border-radius: 16px; padding: 14px 44px 14px 16px; margin-top: .5rem; width: 100%;
  background-position: right 16px center; background-size: 11px 8px;
}
/* short-label answers: chips you add and remove, one per label */
.tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin-top: .5rem; padding: 9px 11px; min-height: 46px;
  border: 1px solid var(--hairline-soft); border-radius: 14px;
  background: rgba(24,24,27,.35); cursor: text;
}
.tags:focus-within { border-color: var(--hairline-strong); }
.tags.ro { cursor: default; background: none; border-color: transparent; padding-left: 0; }
.tag {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: 5px 6px 5px 12px; border-radius: 999px;
  border: 1px solid var(--hairline-strong); background: rgba(255,255,255,.04);
  color: var(--zinc-300); font-size: 14px; line-height: 1.3;
}
.tags.ro .tag { padding: 5px 12px; }
.tag-x {
  background: none; border: 0; box-shadow: none; padding: 0 3px; margin: 0;
  width: auto; min-height: 0; font-size: 15px; line-height: 1;
  color: var(--zinc-500); cursor: pointer;
}
.tag-x:hover { color: var(--red); background: none; }
.tag-new {
  flex: 1 1 10ch; min-width: 10ch; border: 0; box-shadow: none; background: none;
  padding: 4px 2px; color: var(--zinc-300); font: inherit; font-size: 14px;
}
.tag-new:focus { outline: none; box-shadow: none; }

/* list-shaped answers: one editable card per record, ids kept intact.
   .rec-edit is the same card standing alone — an answer that is one record,
   not a list of them, so it carries no id line and nothing to remove it with. */
.list-edit, .map-edit, .rec-edit { margin-top: .5rem; }
.rec-edit .li-item { margin-bottom: 0; }
.rec-edit .li-label:first-child { margin-top: 0; }
.li-item {
  border: 1px solid var(--hairline-soft); border-radius: 16px;
  padding: 14px 16px; margin-bottom: .6rem; background: rgba(24,24,27,.35);
}
.li-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
/* a card with no id to show: what removes it still sits where it always does */
.li-head-bare { justify-content: flex-end; }
.li-id { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--zinc-500); text-transform: uppercase; }
.li-del {
  background: none; border: 0; padding: 0; box-shadow: none;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--zinc-500); cursor: pointer; width: auto; min-height: 0;
}
.li-del:hover { color: var(--red); background: none; }
/* the label over a box inside a card: read as words, not as a heading —
   shouted micro-caps belong to page furniture, not to a form a person fills.
   `label` is uppercased for the whole console, so this has to say otherwise. */
.li-label { font-size: 12px; font-weight: 700; letter-spacing: .01em; text-transform: none; color: var(--zinc-500); margin: .6rem 0 .2rem; }
.li-f { font-family: inherit; font-size: 15px; line-height: 1.6; color: var(--zinc-300); border-radius: 12px; padding: 10px 14px; }
/* two boxes with no caption between them are still two questions — the gap is
   what says so. A box under its own label already has one. */
.li-item > .li-f + .li-f { margin-top: .5rem; }
/* a picker inside a record row: the arrow of a choice box, the geometry of the
   boxes beside it — a platform is chosen, never typed */
select.li-f.choice {
  width: 100%; margin-top: .5rem; padding: 10px 40px 10px 14px;
  background-position: right 14px center; background-size: 11px 8px;
}
/* one format per line: the name chosen on the left, what it is for written on
   the right. They are two halves of one statement, so they sit on one line —
   and wrap into two only when the screen leaves no room for both. */
.fmt-list { margin-top: .5rem; }
.fmt-item { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .45rem; }
.fmt-item select.fmt-name { flex: 0 0 32%; min-width: 150px; width: auto; margin-top: 0; }
.fmt-item .fmt-guide { flex: 1 1 220px; min-width: 0; margin-top: 0; }
.fmt-item .fmt-del { flex: 0 0 auto; }
.li-carried { margin: .6rem 0 0; }
/* what the card is still missing before it can be saved, said on the card */
.li-note { margin: .5rem 0 0; }
/* the drafter's guess at how a rule fires in code, still awaiting a signature:
   the strategist is signing these along with the words, so they read as text,
   not as a hidden key on a record. */
.li-proposed { margin: .4rem 0 0; line-height: 1.5; color: var(--amber); }
.li-trigger { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; white-space: nowrap; }
.li-add { margin-top: .2rem; }
/* the second layer of a rule: what the gate checks for, written in the same
   card as the words. Set apart by a rule, because it is a different kind of
   statement — the words are the brand's, these are what code can look at. */
.cond-edit { margin-top: .9rem; padding-top: .7rem; border-top: 1px dashed var(--hairline-soft); }
.cond {
  border: 1px solid var(--hairline-soft); border-radius: 12px;
  padding: 8px 10px 10px; margin-bottom: .5rem; background: rgba(0,0,0,.18);
}
.cond-head { display: flex; align-items: center; gap: .6rem; }
.cond-kind, .cond-scope, .rule-cap, .rule-risk {
  font-family: inherit; font-size: 14px; color: var(--zinc-300);
  border-radius: 10px; padding: 7px 32px 7px 12px; margin-top: .4rem; width: auto; min-width: 22ch;
  background-position: right 12px center;
}
.cond-head .cond-kind { margin-top: 0; flex: 1 1 auto; }
.cond-guess {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--amber); white-space: nowrap;
}
.cond-del {
  background: none; border: 0; padding: 0 2px; box-shadow: none; margin: 0;
  width: auto; min-height: 0; font-size: 16px; line-height: 1;
  color: var(--zinc-500); cursor: pointer;
}
.cond-del:hover { color: var(--red); background: none; }
.cond-body .tags { margin-top: .4rem; }
.cond-opt {
  font-size: 13px; color: var(--zinc-400); margin-top: .4rem; margin-right: 1rem;
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.cond-note { margin: .4rem 0 .2rem; line-height: 1.5; color: var(--zinc-500); }
/* who judges a rule: a statement, not a warning about missing work */
.cond-none, .cond-model { color: var(--zinc-500); }
.linkish {
  background: none; border: 0; padding: 0; margin-top: .35rem;
  color: var(--brand-400); font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: 0; text-transform: none; text-decoration: underline; cursor: pointer;
}
.linkish:hover { opacity: .8; }
.linkish:disabled { color: var(--zinc-500); cursor: default; text-decoration: none; }
.rule-silent { color: var(--amber); }
.cond-add { margin-top: .3rem; }
.rule-f { margin-top: .4rem; }
/* who judged the rule, said plainly where the rule is read */
.doc-unchecked { color: var(--zinc-500); }
/* tagged sub-brands: the brand's product catalog, pulled in rather than typed */
.sb-picker { margin-top: .5rem; }
.sb-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sb-tag {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 7px 8px 7px 14px; border-radius: 999px;
  border: 1px solid var(--hairline-strong); background: rgba(255,255,255,.04);
  font-size: 14px; line-height: 1.3;
}
.sb-tag a { color: var(--zinc-300); font-weight: 700; text-decoration: none; }
.sb-tag a:hover { color: var(--brand-400); }
.sb-tag .badge { font-size: 11px; }
.sb-x {
  background: none; border: 0; box-shadow: none; padding: 0 4px; margin: 0;
  width: auto; min-height: 0; font-size: 15px; line-height: 1;
  color: var(--zinc-500); cursor: pointer;
}
.sb-x:hover { color: var(--red); background: none; }
.sb-add-row .sb-pick { width: auto; min-width: 14rem; margin: 0; }
.sb-add-row .sb-add { width: auto; margin: 0; }
.val-ro {
  font-size: 15px; line-height: 1.6; color: var(--zinc-300);
  border: 1px solid var(--hairline-soft); border-radius: 16px;
  padding: 14px 16px; margin-top: .5rem;
}
.val-ro .ro-line { margin: .15rem 0; }
/* a format under the platform it belongs to */
.val-ro .ro-sub { padding-left: 1rem; color: var(--zinc-400); }
.val-ro .ro-item { padding: .45rem 0; }
.val-ro .ro-item + .ro-item { border-top: 1px solid var(--hairline-soft); }
.val-ro .ro-title { font-weight: 800; color: #fff; margin: 0 0 .15rem; }
.val-ro .ro-meta { margin: .25rem 0 0; font-size: 13px; color: var(--zinc-500); }
.val-ro .ro-kv { white-space: nowrap; }

/* A ratified lens, read as a document: the Analysis reader's single column and
   sectioned rhythm, so finished work never looks like a half-filled form. */
.doc-head { max-width: 68ch; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin: -32px 0 8px; }
.doc-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin: 0; font-size: 13px; color: var(--zinc-500); }
.doc-actions { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.doc-actions button { width: auto; margin: 0; }
.doc-field { max-width: 68ch; margin: 0 0 1.8rem; }
.doc-label { margin: 0 0 .3rem; font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--zinc-200); }
.doc-answer { font-size: 15px; line-height: 1.7; color: var(--zinc-300); }
.doc-p { margin: 0 0 .7rem; }
.doc-p:last-child { margin-bottom: 0; }
.doc-inline { color: var(--zinc-300); }
.doc-list { margin: 0 0 .7rem; padding-left: 1.1rem; }
.doc-list li { margin: .2rem 0; }
.doc-record { padding: .55rem 0; }
.doc-record + .doc-record { border-top: 1px solid var(--hairline-soft); }
.doc-rec-name { margin: 0 0 .2rem; font-weight: 800; color: #fff; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.doc-rec-name a { color: #fff; text-decoration: none; }
.doc-rec-name a:hover { color: var(--brand-400); }
.doc-rec-name .badge { font-size: 11px; }
.doc-rec-meta { margin: .25rem 0 0; font-size: 13px; color: var(--zinc-500); }
.doc-sig { margin: .4rem 0 0; font-size: 12px; color: var(--zinc-600); }
.doc-empty { margin: 0; }
.field-row textarea.borderless { border: 0; box-shadow: none; background: transparent; }
.field-row textarea.borderless:focus { border: 0; background: transparent; }
.group-head { letter-spacing: 0; margin: 1.8rem 0 .4rem; font-size: 14px; }
pre { background: var(--sunken); border: 1px solid var(--hairline-soft); border-radius: var(--r-sm); padding: .7rem .9rem; overflow: auto; font-family: var(--mono); font-size: var(--fs-meta); margin: .4rem 0; color: var(--zinc-300); }
details summary { cursor: pointer; color: var(--zinc-400); font-size: var(--fs-body); font-weight: 700; }
details summary:hover { color: var(--brand-400); }
.error { background: var(--red-bg); color: var(--red); border: 1px solid rgba(248,113,113,.3); border-radius: var(--r-sm); padding: .7rem 1rem; margin: .6rem 0; }
.notice { background: var(--amber-bg); color: var(--amber); border: 1px solid rgba(251,191,36,.3); border-radius: var(--r-sm); padding: .7rem 1rem; margin: .6rem 0; }
.success { background: var(--green-bg); color: var(--green); border: 1px solid rgba(74,222,128,.3); border-radius: var(--r-sm); padding: .7rem 1rem; margin: .6rem 0; }
.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--hairline-soft); margin: .8rem 0 1.4rem; }
#kindtabs { justify-content: flex-start; }
.tabs a { padding: 8px 16px; text-decoration: none; color: var(--zinc-500); font-size: var(--fs-meta); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-bottom: 2px solid transparent; transition: all .2s; }
.tabs a:hover { color: var(--zinc-300); }
.tabs a.on { color: #fff; font-weight: 900; border-bottom-color: var(--brand-500); }
.filters { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; margin: .6rem 0 1rem; }
.filters > div { min-width: 150px; }
.filters label { margin-top: 0; }
.chiprow { display: flex; gap: .4rem; flex-wrap: wrap; }
.compare-grid { display: grid; gap: 1rem; align-items: start; }

/* ------------------------------------------------------------- hero panel (Briefing Room reference) */
.panel {
  position: relative;
  background: rgba(24,24,27,.3);
  backdrop-filter: blur(64px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 40px;
  padding: 32px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
  overflow: hidden;
}
.panel .glow {
  position: absolute; top: 0; right: 0; width: 256px; height: 256px;
  background: rgba(255,0,56,.05); border-radius: 9999px;
  filter: blur(100px); pointer-events: none;
}
.panel-inner { position: relative; z-index: 10; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.panel-title-group { display: flex; align-items: center; gap: 12px; }
.icon-chip {
  padding: 12px; background: rgba(255,0,56,.1);
  border: 1px solid rgba(255,0,56,.2); border-radius: 16px;
  display: flex;
}
.icon-chip svg { width: 20px; height: 20px; color: var(--brand-400); }
.panel-title { font-size: 20px; font-weight: 700; margin: 0; color: #fff; }
.micro-label {
  font-size: 10px; font-weight: 700; color: var(--zinc-500);
  text-transform: uppercase; letter-spacing: .1em; margin: 0;
}
.btn-ghost {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 20px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1); border-radius: 16px;
  font-size: 11px; font-weight: 700; color: var(--zinc-400);
  font-family: inherit; line-height: normal; letter-spacing: 0; text-transform: none;
  cursor: pointer; transition: all .2s;
}
.btn-ghost:hover { color: #fff; background: rgba(255,255,255,.1); }
.btn-ghost svg { width: 14px; height: 14px; }
.brief-field-wrap { position: relative; margin-bottom: 32px; }
textarea.brief-field {
  width: 100%; height: 128px;
  background: rgba(39,39,42,.2);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 24px; padding: 32px;
  font-size: 14px; color: var(--zinc-300); line-height: 1.6;
  font-family: inherit; resize: none; outline: none;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.06);
  transition: all .2s;
}
textarea.brief-field::placeholder { color: var(--zinc-600); font-weight: 500; opacity: .5; }
textarea.brief-field:focus { border-color: rgba(255,0,56,.3); background: rgba(39,39,42,.4); }
.field-icons {
  position: absolute; bottom: 24px; right: 32px;
  display: flex; gap: 16px; pointer-events: none; opacity: .4;
}
.field-icons svg { width: 16px; height: 16px; color: var(--zinc-600); }
.panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.hint { display: flex; align-items: center; gap: 12px; color: var(--zinc-500); }
.hint .dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--brand-500); flex-shrink: 0; }
.hint p { font-size: 14px; font-weight: 500; line-height: 1.3; margin: 0; }
.btn-primary {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 40px; background: var(--brand-600);
  border: none; border-radius: 20px; color: #fff;
  font-family: inherit; font-weight: 900; font-size: 12px; line-height: normal;
  text-transform: uppercase; letter-spacing: 0; white-space: nowrap;
  cursor: pointer; transition: all .2s;
}
.btn-primary:hover {
  background: var(--brand-500);
  transform: translateY(-2px);
}
.btn-primary:active { transform: scale(.95); }
.btn-primary svg { width: 16px; height: 16px; }
/* Recent rows */
.recent { margin-top: 40px; }
.recent-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.recent-head svg { width: 16px; height: 16px; color: var(--zinc-600); }
.recent-head h3 {
  font-size: 12px; font-weight: 900; color: var(--zinc-500);
  text-transform: uppercase; margin: 0;
}
.recent-list { display: flex; flex-direction: column; gap: 12px; }
.brief-row {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; background: rgba(24,24,27,.2);
  border: 1px solid rgba(255,255,255,.05); border-radius: 16px;
  cursor: pointer; transition: all .2s; text-decoration: none; color: inherit;
}
.brief-row:hover { background: rgba(39,39,42,.4); border-color: rgba(255,255,255,.1); }
.brief-row:hover .brief-row-title { color: var(--brand-400); }
.brief-row:hover .row-arrow { color: var(--zinc-400); }
.brief-icon { padding: 8px; background: rgba(255,0,56,.05); border-radius: 12px; flex-shrink: 0; display: flex; }
.brief-icon svg { width: 16px; height: 16px; color: var(--brand-500); }
.brief-row-body { flex: 1; min-width: 0; }
.brief-row-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 0 12px; }
.brief-row > .badge { flex-shrink: 0; margin-left: auto; }
.brief-row-inline .brief-row-title { -webkit-line-clamp: 1; }
.brief-row-inline .brief-row-meta { margin: 0; font-size: 14px; }
.brief-row-title {
  font-size: 14px; font-weight: 700; color: #fff;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  transition: color .2s; margin: 0; line-height: 1.4;
}
.brief-row-meta {
  font-size: var(--fs-meta); color: var(--zinc-500); font-weight: 500;
  margin: 4px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0;
}
.brief-row-meta .author { color: var(--zinc-400); }
.brief-row-meta .sep { margin: 0 8px; color: var(--zinc-700); }
.meta-dim { color: var(--zinc-600); }
.row-arrow { width: 16px; height: 16px; color: var(--zinc-700); flex-shrink: 0; transition: color .2s; }
/* Narrow screens: stack the panel header and tighten padding so nothing clips */
@media (max-width: 640px) {
  .panel { padding: 20px; border-radius: 28px; }
  .panel-head { flex-wrap: wrap; gap: 12px; }
  textarea.brief-field { padding: 20px; }
  .field-icons { right: 20px; bottom: 16px; }
  .panel-foot { justify-content: center; }
}

/* ------------------------------------------------- mode toggle pill (reference) */
.mode-toggle {
  display: flex; align-items: center; gap: 4px; width: fit-content;
  background: rgba(24,24,27,.5); border: 1px solid rgba(255,255,255,.05);
  border-radius: 16px; padding: 4px; margin: 24px 0;
}
.mode-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 12px; border: none; background: none;
  font-family: inherit; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; line-height: normal;
  color: var(--zinc-500); cursor: pointer; transition: all .2s;
}
.mode-btn:hover { color: var(--zinc-300); }
.mode-btn.active { background: rgba(255,255,255,.1); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.mode-btn svg { width: 14px; height: 14px; }

/* ------------------------------------------------- dropzone hero panel (reference) */
.dropzone {
  position: relative; text-align: center; cursor: pointer;
  background: rgba(24,24,27,.3);
  backdrop-filter: blur(64px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 40px; padding: 48px;
  overflow: hidden; transition: all .5s;
}
.dropzone:hover, .dropzone.dragover { border-color: rgba(255,255,255,.2); }
.dropzone .radial {
  position: absolute; inset: 0; opacity: .1; pointer-events: none;
  background: radial-gradient(circle at center, var(--brand-500), transparent);
  filter: blur(100px); transition: opacity .2s;
}
.dropzone:hover .radial, .dropzone.dragover .radial { opacity: .2; }
.dropzone-inner { position: relative; z-index: 10; padding: 28px 0; display: flex; flex-direction: column; align-items: center; }
.dropzone-icon {
  width: 72px; height: 72px; border-radius: 18px;
  background: rgba(39,39,42,.5); border: 1px solid rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; color: var(--zinc-600); transition: all .7s;
}
.dropzone-icon svg { width: 40px; height: 40px; }
.dropzone h2 {
  font-size: 30px; font-weight: 900; margin: 0 0 8px;
  color: #fff; text-transform: none;
}
.dropzone .sub { color: var(--zinc-500); font-size: 14px; font-weight: 500; margin: 0 0 20px; }
.badge-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 24px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.05); border-radius: 16px;
}
.badge-pill svg { width: 16px; height: 16px; color: var(--brand-500); }
.badge-pill span {
  font-size: 10px; font-weight: 900; text-transform: uppercase;
  letter-spacing: .2em; color: var(--zinc-400);
}
/* in-dropzone upload states (uploading / done) */
.dropzone.uploading { cursor: default; }
.dz-state {
  position: relative; z-index: 10; padding: 28px 0;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
.dz-state .upload-progress-wrap { justify-content: center; width: 100%; max-width: 420px; }

/* in-dropzone upload hero — big percentage, file name, glowing track */
.up-hero { width: 100%; max-width: 520px; text-align: center; padding: 8px 0; }
.up-pct {
  font-size: 72px; font-weight: 900; line-height: 1; color: #fff;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.up-pct-sign { font-size: 30px; font-weight: 800; color: var(--zinc-500); margin-left: 2px; }
.up-title {
  font-size: 20px; font-weight: 900; color: #fff; margin: 14px 0 2px;
  text-transform: uppercase; letter-spacing: .16em;
}
.up-file {
  font-size: 15px; font-weight: 600; color: var(--zinc-400); margin: 0 0 18px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.up-track {
  position: relative; height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.07);
}
.up-bar {
  position: relative; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-400, #ff4d6d));
  box-shadow: 0 0 18px rgba(255,0,56,.55);
  transition: width .25s cubic-bezier(.4,0,.2,1);
}
/* travelling sheen so the bar reads as alive even on a slow upload */
.up-bar-glow {
  position: absolute; inset: 0; border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: up-sheen 1.4s ease-in-out infinite;
}
@keyframes up-sheen { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .up-bar-glow { animation: none; } }
.dz-state #pdfstatus { color: var(--zinc-400); }
.dz-state #pdfreview, .dz-state #pastepanel { width: 100%; max-width: 640px; text-align: left; cursor: default; }

/* Once text is extracted, the dropzone itself becomes the reading surface:
   the inner textarea loses its own box (no border, no fill, no radius). */
.dropzone.review { cursor: default; }
.dropzone.review .corner { display: none; }
.dropzone.review #pdftext, .dropzone.paste #pastetext {
  background: none; border: none; border-radius: 0; padding: 0;
  box-shadow: none; resize: vertical;
  font-family: inherit; font-size: 15px; line-height: 1.7; color: var(--zinc-300);
  min-height: 480px;
}
.dropzone.review #pdftext:focus, .dropzone.paste #pastetext:focus { outline: none; border: none; background: none; }
.review-head { width: 100%; margin-bottom: 12px; }
.review-head h3 { font-size: 22px; font-weight: 900; color: #fff; margin: 0 0 6px; }
.review-head #pdfstatus { font-size: 14px; font-weight: 700; color: var(--zinc-300); }
.review-head .review-note { font-size: 14px; font-weight: 500; color: var(--zinc-500); margin: 4px 0 0; }
.dz-state .dz-again { text-align: left; margin: .8rem 0 0; }
/* in-dropzone error state */
.dz-state.dz-error { display: flex; flex-direction: column; align-items: center; }
.dz-error-icon { color: var(--red, #ef4444); border-color: rgba(239,68,68,.35); }
.dz-error-icon svg { color: #ef4444; }
.dz-state.dz-error h2 { margin: 0 0 6px; }
.dz-error-msg { max-width: 480px; text-align: center; color: #ef4444 !important; }
.dropzone:hover .corner { opacity: .4; }
.dropzone .corner.bl { bottom: 40px; left: 40px; }
.dropzone .corner.tr { top: 40px; right: 40px; }
.dropzone .corner svg { width: 24px; height: 24px; color: var(--zinc-500); }
@media (max-width: 640px) {
  .dropzone { padding: 24px; border-radius: 28px; }
  .dropzone-inner { padding: 32px 0; }
  .dropzone h2 { font-size: 22px; }
}

/* Autosave receipt — a draft that saves itself has to say so. Fixed, so it
   stays visible wherever you are on a long lens page. */
/* The saving pill wears the sidebar's selected-item look: in this console that
   red already means "this is the live thing right now". It fades itself out
   once the save lands, so each appearance reads as fresh reassurance. */
.autosave {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: 16px;
  /* The sidebar's selected red, flattened against the page background so the
     pill is solid: it floats over live text and must not let it show through. */
  background: #29070e; color: #fff;
  border: 1px solid #540616;
  box-shadow: 0 0 15px rgba(255,0,56,.1);
  font-size: 13px; font-weight: 700; line-height: normal;
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.autosave.show { opacity: 1; transform: none; }
.autosave .dot {
  width: 6px; height: 6px; border-radius: 9999px; flex: none;
  background: var(--brand-500); box-shadow: 0 0 10px rgba(255,0,56,.8);
}
.autosave.saving .dot { animation: autosave-pulse 1.1s ease-in-out infinite; }
/* A failure holds its place on screen, so it says so louder. */
.autosave.error { background: #4d0c1a; border-color: #86032c; }
@keyframes autosave-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@media (max-width: 640px) { .autosave { right: 12px; bottom: 12px; } }

/* ------------------------------------------------------------------ sign-in */
/* Signed out there is no navigation to show — the sidebar would only be a
   list of doors that are all locked. */
#shell.signed-out { grid-template-columns: 1fr; }
#shell.signed-out #sidebar { display: none; }
#shell.signed-out .marquee { opacity: .35; }

.signin-wrap {
  min-height: calc(100vh - 200px);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
}
.signin-card {
  position: relative; width: 100%; max-width: 440px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 40px; padding: 48px 40px;
  backdrop-filter: blur(64px); text-align: center;
  overflow: hidden;
}
.signin-card::before {
  content: ''; position: absolute; top: -80px; right: -80px; width: 280px; height: 280px;
  background: rgba(255,0,56,.12); border-radius: 9999px;
  filter: blur(100px); pointer-events: none;
}
.signin-card > * { position: relative; z-index: 10; }
.signin-mark {
  width: 56px; height: 56px; margin: 0 auto 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-600); border-radius: 18px;
  font-size: 15px; font-weight: 900; letter-spacing: .04em; color: #fff;
}
.signin-mark-sent { background: rgba(255,255,255,.06); border: 1px solid var(--hairline); font-size: 22px; color: var(--brand-500); }
.signin-title { font-size: 26px; font-weight: 900; color: #fff; margin: 0 0 10px; letter-spacing: -.02em; }
.signin-sub { font-size: 14px; font-weight: 500; color: var(--zinc-400); line-height: 1.6; margin: 0 0 28px; }
.signin-sub strong { color: #fff; font-weight: 700; word-break: break-all; }
.signin-alert { text-align: left; margin: 0 0 20px; }
.signin-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.signin-form label {
  font-size: 10px; font-weight: 700; color: var(--zinc-500);
  text-transform: uppercase; letter-spacing: .1em;
}
.signin-form input { border-radius: 16px; padding: 14px 18px; }
.signin-form .btn-primary { justify-content: center; margin-top: 4px; }
.signin-form .btn-primary:disabled { opacity: .55; cursor: default; transform: none; }
.signin-note { font-size: 13px; font-weight: 500; color: var(--zinc-500); line-height: 1.6; margin: 0 0 28px; }
.signin-foot {
  font-size: 12px; font-weight: 500; color: var(--zinc-600);
  line-height: 1.6; margin: 28px 0 0;
  padding-top: 20px; border-top: 1px solid var(--hairline-soft);
}
.signin-card .btn-ghost { display: inline-flex; margin: 0 auto; }
/* a <button> in the user menu, so it has to shed the global button styling */
button.user-menu-signout {
  width: 100%; text-align: left; background: transparent; border: none;
  padding: 12px 16px; border-radius: 16px;
  font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0;
  color: var(--zinc-400); cursor: pointer; transition: all .15s;
}
button.user-menu-signout:hover { color: #e4e4e7; background: rgba(255,255,255,.05); transform: none; }

/* verified, but not invited anywhere yet */
.empty-access {
  max-width: 520px; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 32px; padding: 32px;
}
.empty-access p { font-size: 15px; font-weight: 500; color: var(--zinc-300); line-height: 1.7; margin: 0 0 10px; }
.empty-access p:last-child { margin: 0; }
.empty-access strong { color: #fff; font-weight: 700; word-break: break-all; }

/* --------------------------------------------- danger zone (delete a space)
   Deliberately unlike every other section: a red-walled box at the very bottom
   of the admin-only area, so nobody arrives at it by accident. */
.danger-zone {
  margin: 4rem 0 1rem;
  border: 1px solid rgba(239,68,68,.3);
  border-left: 3px solid var(--deep-red);
  background: var(--deep-red-bg);
  border-radius: var(--r-sm);
  padding: 1.6rem 1.8rem;
}
.danger-zone h2 { margin: 0 0 .8rem; color: var(--red); }
.danger-zone p { font-size: 15px; font-weight: 500; color: var(--zinc-300); line-height: 1.7; margin: 0 0 .7rem; }
.danger-zone strong { color: #fff; font-weight: 700; }
.dz-counts {
  list-style: none; padding: 0;
  margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .4rem .5rem;
}
.dz-counts li {
  font-size: var(--fs-meta); color: var(--zinc-400);
  background: rgba(0,0,0,.25); border: 1px solid rgba(239,68,68,.2);
  border-radius: 999px; padding: .25rem .7rem;
}
.dz-counts strong { color: var(--red); font-weight: 900; font-family: var(--mono); }
#dz-confirm { max-width: 420px; }