/* ============================================================================
   ATLAS Sync Web Command Deck — design system.
   A native-browser translation of the approved WPF Command Deck theme
   (src/AtlasSync.Desktop.Prototype/Themes/Deck.Core.xaml on the
   worktree-ui+command-deck-prototype branch). Every color token below is the
   exact hex from that approved theme; the soft variants are the same ARGB
   values converted to rgba. Dark, low-glare, one warm accent; ink surfaces
   step up in three levels separated by hairlines, never drop shadows.
   ========================================================================== */

:root {
  --bg: #0C0F15;
  --rail: #090C11;
  --panel: #12161F;
  --panel-alt: #161B26;
  --elevated: #1B212E;
  --hairline: #232B3A;
  --hairline-soft: #1A202C;
  --text: #E9EDF5;
  --dim: #9AA7BD;
  --mute: #5F6C85;
  --accent: #E8A33D;
  --accent-ink: #241A08;
  --accent-soft: rgba(232, 163, 61, 0.15);
  /* The master ATLAS brand mark's reserved ATLAS Sync colorway -- sourced from the ATLAS Indicator
     website's own design system (assets/style.css there defines --signal:#33E6C0 for its product
     and an already-reserved, previously-unused --gold:#D9A94E for the next one). Used ONLY by the
     brand mark's apex shape (see .rail-brand-mark below and views/brand.js) -- every other accent
     use in this app keeps --accent unchanged. */
  --brand-gold: #D9A94E;
  --gain: #3ECD8D;
  --gain-soft: rgba(62, 205, 141, 0.12);
  --loss: #F2606A;
  --loss-soft: rgba(242, 96, 106, 0.13);
  --info: #4D9FEC;
  --info-soft: rgba(77, 159, 236, 0.12);
  --neutral: #8A94A8;
  --neutral-soft: rgba(138, 148, 168, 0.12);
  --manual: #B48CE8;
  --manual-soft: rgba(180, 140, 232, 0.13);
  --row-hover: rgba(27, 39, 51, 0.35);
  --row-selected: rgba(43, 59, 84, 0.30);
  --input-bg: #0E1219;

  /* Provider tints (matching the WPF prototype's provider badge brushes). */
  --nt-red: #D2635A;
  --nt-red-soft: rgba(210, 99, 90, 0.13);
  --rithmic-blue: #4D8BE0;
  --rithmic-blue-soft: rgba(77, 139, 224, 0.13);
  --mt5-teal: #33A98F;
  --mt5-teal-soft: rgba(51, 169, 143, 0.13);

  --font-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-mono: Consolas, "Cascadia Mono", ui-monospace, monospace;

  --rail-w: 196px;
  --topbar-h: 44px;
  --row-h: 26px;
  --radius: 5px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 12px;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select { font: inherit; color: var(--text); }
a { color: var(--info); text-decoration: none; }
::selection { background: var(--accent-soft); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--mute); }

/* ============================================================ App shell */

#app { height: 100%; }

.shell {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas: "rail topbar" "rail main";
  height: 100%;
}

/* ------------------------------------------------ Nav rail */

.rail {
  grid-area: rail;
  background: var(--rail);
  border-right: 1px solid var(--hairline-soft);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.rail-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--hairline-soft);
}

/* The approved master ATLAS geometric mark (see assets/brand/vendor/README.md for provenance and
   docs/BRAND_ASSETS.md for the full brand system) -- an inline SVG, not a filled badge, matching
   how the source design system itself renders the mark. .apex takes the reserved ATLAS Sync gold;
   .base stays neutral ink via currentColor, exactly as the source mark defines it. */
.rail-brand-mark {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  color: var(--text);
  flex: none;
}
.rail-brand-mark svg { width: 100%; height: 100%; }
.rail-brand-mark .apex { fill: var(--brand-gold); }
.rail-brand-mark .base { fill: currentColor; }

.rail-brand-name { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.4px; }
.rail-brand-sub { font-size: 9px; color: var(--mute); letter-spacing: 0.8px; text-transform: uppercase; }

.rail-nav { flex: 1; padding: 8px 0; overflow-y: auto; }

.rail-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 0 14px;
  height: 32px;
  color: var(--dim);
  border-left: 2px solid transparent;
  text-align: left;
}
.rail-item:hover { color: var(--text); background: var(--row-hover); }
.rail-item.active { color: var(--text); background: var(--panel); border-left-color: var(--accent); }
.rail-item.active .icon { color: var(--accent); }
.rail-item .icon { flex: none; }
.rail-badge {
  margin-left: auto;
  min-width: 16px; height: 15px; padding: 0 4px;
  border-radius: 8px;
  background: var(--loss-soft); color: var(--loss);
  font-size: 10px; font-weight: 600;
  display: grid; place-items: center;
}

/* Mode recap card pinned at the rail's foot (as in the approved deck). */
.rail-mode {
  margin: 8px;
  padding: 8px 10px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  background: var(--panel);
}
.rail-mode-name { font-size: 10.5px; font-weight: 600; letter-spacing: 0.8px; }
.rail-mode-desc { font-size: 10px; color: var(--mute); margin-top: 3px; line-height: 1.45; }
.rail-mode-contract { font-size: 10px; color: var(--dim); margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--hairline-soft); }

/* ------------------------------------------------ Top bar */

.topbar {
  grid-area: topbar;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center;
  gap: 12px;
  padding: 0 14px;
}

.topbar-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.topbar-spacer { flex: 1; }

/* Execution mode segmented control. LIVE keeps red text even while inactive. */
.mode-seg { display: flex; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.mode-seg button {
  padding: 4px 12px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.7px;
  color: var(--mute);
  border-right: 1px solid var(--hairline);
}
.mode-seg button:last-child { border-right: none; }
.mode-seg button.live { color: var(--loss); }
.mode-seg button.active.dryrun { background: var(--info-soft); color: var(--info); }
.mode-seg button.active.sim { background: var(--accent-soft); color: var(--accent); }
.mode-seg button.active.live { background: var(--loss-soft); color: var(--loss); }

.host-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: 10px;
  font-size: 10.5px; font-weight: 600;
  border: 1px solid transparent;
}
.host-pill.ok { color: var(--gain); background: var(--gain-soft); }
.host-pill.bad { color: var(--loss); background: var(--loss-soft); }
.host-pill.warn { color: var(--accent); background: var(--accent-soft); }

.profile-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 8px 3px 3px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
}
.profile-btn:hover { background: var(--row-hover); }
.avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--elevated); color: var(--dim);
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700;
}
.profile-name { font-size: 11px; color: var(--dim); }

.menu {
  position: absolute;
  top: calc(var(--topbar-h) - 4px); right: 12px;
  min-width: 210px;
  background: var(--elevated);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 5px;
  z-index: 60;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
}
.menu-head { padding: 7px 10px 8px; border-bottom: 1px solid var(--hairline-soft); margin-bottom: 4px; }
.menu-head .who { font-weight: 600; font-size: 12px; }
.menu-head .plan { font-size: 10.5px; color: var(--mute); margin-top: 2px; }
.menu-item { display: flex; width: 100%; text-align: left; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 4px; color: var(--dim); font-size: 12px; }
.menu-item:hover { background: var(--row-hover); color: var(--text); }
.menu-item.danger { color: var(--loss); }

/* ------------------------------------------------ Main */

.main {
  grid-area: main;
  overflow-y: auto;
  padding: 14px;
}

.screen { max-width: 1560px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }

/* ============================================================ Primitives */

.panel {
  background: var(--panel);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
}
.panel-pad { padding: 12px; }

.section-label {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--mute);
}

.hint { font-size: 10.5px; color: var(--mute); line-height: 1.5; }
.dim { color: var(--dim); }
.mute { color: var(--mute); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.gain { color: var(--gain); }
.loss { color: var(--loss); }

.icon { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon.solid { fill: currentColor; stroke: none; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--panel-alt);
  color: var(--dim);
  font-size: 11.5px; font-weight: 600;
}
.btn:hover { color: var(--text); border-color: var(--mute); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.07); }
.btn.danger { color: var(--loss); border-color: var(--loss); background: var(--loss-soft); }
.btn.small { padding: 2px 8px; font-size: 10.5px; }

/* Inputs */
.input, .select {
  background: var(--input-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 5px 9px;
  font-size: 12px;
  outline: none;
}
.input:focus, .select:focus { border-color: var(--accent); }
.input::placeholder { color: var(--mute); }
.select { appearance: none; padding-right: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%235F6C85'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
.input.num { font-family: var(--font-mono); width: 76px; text-align: right; }

/* Toggle switch (follower Sync ON/OFF, locks). */
.toggle {
  position: relative;
  width: 30px; height: 16px; flex: none;
  border-radius: 9px;
  background: var(--elevated);
  border: 1px solid var(--hairline);
  transition: background 0.15s, border-color 0.15s;
}
.toggle::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--mute);
  transition: left 0.15s, background 0.15s;
}
.toggle.on { background: var(--gain-soft); border-color: var(--gain); }
.toggle.on::after { left: 15px; background: var(--gain); }
.toggle.amber.on { background: var(--accent-soft); border-color: var(--accent); }
.toggle.amber.on::after { background: var(--accent); }

/* Pills / badges */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 17px; padding: 0 8px;
  border-radius: 9px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.5px;
  white-space: nowrap;
}
.pill .icon { width: 10px; height: 10px; }

/* Environment badges: outline pills — DEMO blue / SIM slate / FUNDED gold / LIVE red. */
.env {
  display: inline-flex; align-items: center;
  height: 15px; padding: 0 6px;
  border-radius: 8px;
  border: 1px solid;
  font-size: 9px; font-weight: 700; letter-spacing: 0.7px;
}
.env.demo { color: var(--info); border-color: var(--info); }
.env.sim { color: var(--neutral); border-color: var(--neutral); }
.env.funded { color: var(--accent); border-color: var(--accent); }
.env.live { color: var(--loss); border-color: var(--loss); }

/* Provider marks: neutral monograms, distinct silhouettes (NT sharp, Rithmic
   circle, MT5 default radius) — distinct at 20px by shape alone. */
.pmark {
  width: 20px; height: 20px; flex: none;
  display: grid; place-items: center;
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.2px;
  border: 1px solid;
}
.pmark.nt { border-radius: 2px; color: var(--nt-red); border-color: var(--nt-red); background: var(--nt-red-soft); }
.pmark.rithmic { border-radius: 50%; color: var(--rithmic-blue); border-color: var(--rithmic-blue); background: var(--rithmic-blue-soft); }
.pmark.mt5 { border-radius: 5px; color: var(--mt5-teal); border-color: var(--mt5-teal); background: var(--mt5-teal-soft); }
.pmark.lg { width: 34px; height: 34px; font-size: 12px; }

/* Hosting-mode chip: the approved dual-route glyphs. */
.hostmode { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--dim); white-space: nowrap; }
.hostmode .glyph { font-size: 11px; line-height: 1; }
.hostmode.cloud .glyph { color: var(--info); }
.hostmode.local .glyph { color: var(--neutral); }
.hostmode.offline { color: var(--loss); }
.hostmode.offline .glyph { color: var(--loss); }

/* Status badges: glyph + label + tint, three redundant signals. */
.status { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; letter-spacing: 0.4px; white-space: nowrap; }
.status .icon { width: 11px; height: 11px; }
.st-ready { color: var(--gain); }
.st-syncing { color: var(--info); }
.st-paused { color: var(--neutral); }
.st-reconciling { color: var(--info); }
.st-waiting { color: #8FC3F0; }
.st-outofsync { color: var(--accent); }
.st-risklocked { color: var(--accent); }
.st-targetlocked { color: var(--gain); }
.st-losslocked { color: var(--loss); }
.st-manuallocked { color: var(--manual); }
.st-disconnected { color: var(--neutral); }
.st-unavailable { color: var(--loss); }
.st-error { color: var(--loss); }

/* Attention chips (dashboard) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--panel-alt);
  font-size: 11px;
}
.chip:hover { border-color: var(--mute); }
.chip .who { font-weight: 600; }

/* ============================================================ Metric tiles */

.tiles { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.tile {
  background: var(--panel);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  padding: 9px 11px 8px;
  min-width: 0;
}
.tile-label { font-size: 10px; font-weight: 600; letter-spacing: 0.7px; text-transform: uppercase; color: var(--mute); }
.tile-value {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tile-value.long { font-size: 17px; padding-top: 2px; }
.tile-value.xlong { font-size: 15px; padding-top: 3px; }
.tile-foot { font-size: 9.5px; color: var(--mute); margin-top: 2px; min-height: 12px; }
.tile-foot.cover { color: var(--accent); }

/* ============================================================ Tables */

.tablewrap { overflow-x: auto; }
table.deck { width: 100%; border-collapse: collapse; font-size: 11.5px; }
table.deck th {
  text-align: left;
  font-size: 10px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--mute);
  padding: 6px 10px;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
  position: sticky; top: 0; background: var(--panel); z-index: 2;
}
table.deck th.sortable { cursor: pointer; user-select: none; }
table.deck th.sortable:hover { color: var(--dim); }
table.deck th .sort-ind { color: var(--accent); }
table.deck td {
  padding: 0 10px;
  height: var(--row-h);
  border-bottom: 1px solid var(--hairline-soft);
  white-space: nowrap;
  vertical-align: middle;
}
table.deck tbody tr:hover { background: var(--row-hover); }
table.deck tbody tr.selected { background: var(--row-selected); }
table.deck tbody tr.clickable { cursor: pointer; }
table.deck td.num, table.deck th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
table.deck td.num { font-size: 11.5px; }

/* The follower grid carries 13 columns — tighter cell padding, and the
   Target/Loss Limit columns (also on Risk, and always in the mobile cards)
   yield below 1600px so the State column never clips instead. */
table.deck.followers th, table.deck.followers td { padding-left: 7px; padding-right: 7px; }
@media (max-width: 1599px) {
  table.deck.followers .col-tl { display: none; }
}

.acct { display: inline-flex; align-items: center; gap: 7px; }
.acct .id { font-weight: 600; }
.acct .conn { color: var(--mute); font-size: 10.5px; }

/* Consumption meters (risk editors). */
.meter { height: 4px; border-radius: 2px; background: var(--elevated); overflow: hidden; }
.meter > div { height: 100%; border-radius: 2px; }
.meter.gain > div { background: var(--gain); }
.meter.loss > div { background: var(--loss); }
.meter.amber > div { background: var(--accent); }

/* ============================================================ Banners */

.banner {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 12px;
  border-radius: var(--radius);
  border: 1px solid;
  font-size: 11.5px;
  line-height: 1.45;
}
.banner.error { border-color: var(--loss); background: var(--loss-soft); color: var(--loss); }
.banner.warn { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.banner.info { border-color: var(--info); background: var(--info-soft); color: var(--info); }
.banner .body { color: var(--text); }
.banner .body b { font-weight: 600; }
.banner .icon { margin-top: 1px; }

/* ============================================================ Screen scaffolding */

.screen-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.screen-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.screen-sub { font-size: 11px; color: var(--mute); }
.screen-head .grow { flex: 1; }

.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar .grow { flex: 1; }

.cols { display: grid; gap: 12px; }
.cols.c2 { grid-template-columns: 300px 1fr; }
.cols.c2r { grid-template-columns: 1fr 340px; }

/* Master list (risk / connections left rail) */
.mlist { display: flex; flex-direction: column; overflow-y: auto; }
.mlist-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; text-align: left;
  padding: 8px 11px;
  border-bottom: 1px solid var(--hairline-soft);
  border-left: 2px solid transparent;
}
.mlist-item:hover { background: var(--row-hover); }
.mlist-item.selected { background: var(--row-selected); border-left-color: var(--accent); }
.mlist-item .primary { font-weight: 600; font-size: 12px; }
.mlist-item .secondary { font-size: 10.5px; color: var(--mute); margin-top: 1px; }
.mlist-item .right { margin-left: auto; text-align: right; }

/* Key/value strip */
.kv-strip { display: flex; flex-wrap: wrap; gap: 0; }
.kv { padding: 8px 16px 8px 0; margin-right: 16px; border-right: 1px solid var(--hairline-soft); }
.kv:last-child { border-right: none; }
.kv .k { font-size: 10px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--mute); }
.kv .v { font-family: var(--font-mono); font-size: 14px; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* Cards grid for connections */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }

/* ============================================================ Activity */

.feed { display: flex; flex-direction: column; }
.feed-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--hairline-soft);
}
.feed-item:hover { background: var(--row-hover); }
.feed-time { font-family: var(--font-mono); font-size: 10.5px; color: var(--mute); flex: none; width: 58px; padding-top: 1px; }
.feed-kind { flex: none; width: 88px; }
.feed-msg { font-size: 11.5px; line-height: 1.45; }
.feed-msg b { font-weight: 600; }

/* ============================================================ Settings */

.settings-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.settings-nav button {
  padding: 5px 12px;
  border-radius: var(--radius);
  color: var(--dim);
  font-size: 11.5px; font-weight: 600;
  border: 1px solid transparent;
}
.settings-nav button:hover { color: var(--text); }
.settings-nav button.active { background: var(--panel); border-color: var(--hairline); color: var(--text); }

.form-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--hairline-soft); }
.form-row:last-child { border-bottom: none; }
.form-row .lbl { font-size: 12px; }
.form-row .sub { font-size: 10.5px; color: var(--mute); margin-top: 2px; max-width: 520px; line-height: 1.45; }

/* Plan / usage meters */
.usage-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.usage-row .lbl { width: 150px; font-size: 11.5px; color: var(--dim); flex: none; }
.usage-row .meter { flex: 1; }
.usage-row .val { font-family: var(--font-mono); font-size: 11.5px; width: 110px; text-align: right; flex: none; }

.plan-card { border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); padding: 12px; }
.plan-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--accent); }

/* ============================================================ Auth shell */

.auth-wrap {
  height: 100%;
  display: grid; place-items: center;
  background:
    radial-gradient(1000px 500px at 70% -10%, rgba(232,163,61,0.05), transparent),
    var(--bg);
  padding: 20px;
}
.auth-card {
  width: 100%; max-width: 360px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 26px 26px 22px;
}
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.auth-brand .rail-brand-mark { width: 30px; height: 30px; }
.auth-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.auth-sub { font-size: 11px; color: var(--mute); margin: 2px 0 18px; }
.auth-field { margin-bottom: 12px; }
.auth-field label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--mute); margin-bottom: 5px; }
.auth-field .input { width: 100%; padding: 8px 10px; }
.auth-error { color: var(--loss); font-size: 11px; margin-bottom: 10px; }
.auth-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--hairline-soft); font-size: 10.5px; color: var(--mute); line-height: 1.5; }
.auth-foot a { color: var(--accent); text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }

/* Create-account variant: wider card to fit the plan choice without shrinking it. */
.auth-card.wide { max-width: 560px; }
.plan-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.plan-option {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 10px; text-align: left; cursor: pointer;
  background: var(--bg); border: 1px solid var(--hairline); border-radius: 7px;
  color: var(--fg); font: inherit;
}
.plan-option:hover { border-color: var(--mute); }
.plan-option.selected { border-color: var(--accent); background: var(--accent-soft); }
.plan-option-name { font-weight: 600; font-size: 12.5px; }
.plan-option.selected .plan-option-name { color: var(--accent); }
.plan-option-tag { font-size: 10px; font-family: var(--font-mono); color: var(--dim); }
.plan-option-desc { font-size: 10px; color: var(--mute); line-height: 1.35; }
@media (max-width: 560px) {
  .plan-pick { grid-template-columns: 1fr; }
  .auth-card.wide { max-width: 360px; }
}

/* Signup consent checkboxes -- plain inputs, never pre-checked, never inside a <form> (see auth.js's
   own LOCKED explicit-click-only note; a checkbox has no submit behavior of its own either way). */
.consent-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; font-size: 11px; color: var(--dim); line-height: 1.5; }
.consent-row input[type="checkbox"] { margin-top: 2px; width: 14px; height: 14px; accent-color: var(--accent); flex-shrink: 0; }
.consent-row a { color: var(--accent); text-decoration: none; }
.consent-row a:hover { text-decoration: underline; }

/* Legal footer on pre-auth screens (Sign In, Signup, Forgot, Verify, Reset). */
.legal-footer { margin-top: 14px; text-align: center; font-size: 10px; color: var(--mute); line-height: 1.8; }
.legal-footer a { color: var(--mute); text-decoration: none; }
.legal-footer a:hover { color: var(--dim); text-decoration: underline; }

/* Re-acceptance bar: a fixed overlay just below the topbar, shown in the authenticated shell when a
   signed-in user has an outstanding (never-accepted or superseded) required legal document. Fixed
   rather than a new shell grid row -- the .shell grid's row/column structure is otherwise untouched. */
.legal-reaccept-bar { position: fixed; left: 0; right: 0; top: var(--topbar-h); z-index: 40; background: var(--panel); border-bottom: 1px solid var(--accent); padding: 10px 16px; }
.legal-reaccept-bar .consent-row { margin: 0; color: var(--text); }

/* ============================================================ Public legal pages */
/* Deliberately not the dashboard shell -- a single readable column, no rail/tiles/tables. Reachable
   with or without a session (see app.js's ?legal= route, checked before any auth gating). */
.legal-page { min-height: 100%; background: var(--bg); }
.legal-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 20px; border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; background: var(--bg); z-index: 5;
}
.legal-header .auth-brand { margin-bottom: 0; }
.legal-nav { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; }
.legal-nav a { color: var(--mute); text-decoration: none; cursor: pointer; }
.legal-nav a:hover, .legal-nav a.active { color: var(--accent); }
.legal-body { max-width: 720px; margin: 0 auto; padding: 32px 24px 64px; }
.legal-doc-title { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin-bottom: 6px; }
.legal-meta { font-size: 11px; color: var(--mute); font-family: var(--font-mono); margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--hairline-soft); }
.legal-intro { font-size: 13px; color: var(--dim); line-height: 1.6; margin-bottom: 26px; font-style: italic; }
.legal-doc h2 { font-family: var(--font-display); font-size: 15px; font-weight: 600; margin: 26px 0 8px; color: var(--text); }
.legal-doc p { font-size: 13px; line-height: 1.7; color: var(--dim); margin-bottom: 10px; }
.legal-review-note { color: var(--accent); }

/* Security tab: MFA secret is revealed only on explicit click -- screenshots of the default state contain no secret. */
.secret-reveal { position: relative; }
.secret-reveal .secret-value { font-family: var(--font-mono); font-size: 11.5px; word-break: break-all; filter: blur(5px); user-select: none; }
.secret-reveal.revealed .secret-value { filter: none; user-select: text; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 16px; font-family: var(--font-mono); font-size: 12px; padding: 10px; background: var(--bg); border: 1px solid var(--hairline); border-radius: 7px; }

/* Modal (session expired, live gate stub) */
.modal-scrim { position: fixed; inset: 0; background: rgba(5, 7, 11, 0.72); display: grid; place-items: center; z-index: 100; padding: 20px; }
.modal { width: 100%; max-width: 420px; background: var(--elevated); border: 1px solid var(--hairline); border-radius: 8px; padding: 20px; }
.modal h3 { font-family: var(--font-display); font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.modal p { font-size: 12px; color: var(--dim); line-height: 1.55; margin-bottom: 10px; }
.modal .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ============================================================ Mobile / tablet card recompositions
   Desktop stays dense and table-oriented; below the breakpoints, tables are
   recomposed into cards (never just shrunk). Both renderings come from the
   same control-plane data. */

.cardlist { display: none; flex-direction: column; gap: 8px; }
.mcard {
  background: var(--panel-alt);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.mcard-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mcard-head .grow { flex: 1; }
.mcard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 12px; margin-top: 8px; }
.mcard-grid .cell .k { font-size: 9px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--mute); }
.mcard-grid .cell .v { font-family: var(--font-mono); font-size: 12px; margin-top: 1px; font-variant-numeric: tabular-nums; }
.mcard-actions { display: flex; align-items: center; gap: 10px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--hairline-soft); flex-wrap: wrap; }

.bottomnav { display: none; }

/* Tablet: collapse the rail to icons. */
@media (max-width: 1100px) {
  .shell { grid-template-columns: 56px 1fr; }
  .rail-brand-name, .rail-brand-sub, .rail-item .lbl, .rail-mode { display: none; }
  .rail-brand { justify-content: center; padding: 12px 0 10px; }
  .rail-item { justify-content: center; padding: 0; }
  .rail-badge { position: absolute; margin: 0; transform: translate(10px, -8px); }
  .rail-item { position: relative; }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .cols.c2 { grid-template-columns: 260px 1fr; }
  .cols.c2r { grid-template-columns: 1fr; }
}

/* Mobile: bottom tab bar, cards replace tables, tiles prioritize P&L. */
@media (max-width: 760px) {
  .shell {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-h) 1fr 52px;
    grid-template-areas: "topbar" "main" "bottomnav";
  }
  .rail { display: none; }
  .main { padding: 10px 10px 14px; }
  .topbar { padding: 0 10px; }
  .topbar-title { font-size: 14px; }
  .mode-seg button { padding: 4px 8px; font-size: 9.5px; }
  .profile-name { display: none; }

  .bottomnav {
    grid-area: bottomnav;
    display: flex;
    background: var(--rail);
    border-top: 1px solid var(--hairline);
    z-index: 50;
  }
  .bottomnav button {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--mute);
    font-size: 9px; font-weight: 600;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .bottomnav button.active { color: var(--accent); }
  .bottomnav .icon { width: 16px; height: 16px; }

  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tile-value { font-size: 17px; }
  /* Mobile priority order: Today P&L and Floating P&L first. */
  .tile.t-daypnl { order: -3; }
  .tile.t-floating { order: -2; }
  .tile.t-realized { order: -1; }
  .tile.t-equity, .tile.t-balance { order: 1; }
  .tile.t-counts { order: 2; }

  .tablewrap.responsive { display: none; }
  .cardlist { display: flex; }

  .cols.c2 { grid-template-columns: 1fr; }
  .kv { padding: 6px 12px 6px 0; margin-right: 12px; }
  .kv .v { font-size: 13px; }
  .feed-kind { display: none; }
  .screen-head .screen-sub { flex-basis: 100%; }
  .menu { right: 8px; }
}

/* Narrow phones: the top bar compacts rather than overflowing. */
@media (max-width: 480px) {
  .topbar { gap: 7px; }
  .topbar-title { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .host-pill .lbl-full { display: none; }
  .host-pill { padding: 3px 7px; }
  .mode-seg button { padding: 3px 6px; font-size: 8.5px; letter-spacing: 0.4px; }
  .cards { grid-template-columns: 1fr; }
  .mcard-grid { grid-template-columns: repeat(2, 1fr); }
  .kv-strip .kv { border-right: none; }
}