/* Trading bot dashboard - clean research workspace.
   CSP-safe: no external fonts, no CDN, no images, no inline styles.
   Design intent: a small number of large, plain-language answers. Anything
   technical is deliberately quieter or folded away, so the page can be read
   at a glance rather than studied. */

:root {
  color-scheme: light;
  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #edf2f9;
  --line: #dce3ed;
  --line-soft: #e9edf3;
  --text: #142137;
  --text-2: #465771;
  --muted: #526179;
  --up: #08734b;
  --down: #b5303a;
  --warn: #805407;
  --accent: #245de8;
  --danger: #b5303a;
  --danger-dim: #fff2f3;
  --danger-line: #c46970;
  --radius-sm: .35rem;
  --warn-strong: #805407;
  --r: 12px;
  --r-lg: 18px;
  --sans: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, p, dl, dd, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* Keyboard users get the skip link; it must not sit visibly on the page. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.6rem 1rem;
  background: var(--accent);
  color: #07101f;
  border-radius: 0 0 var(--r) 0;
  font-weight: 600;
  z-index: 20;
}
.skip-link:focus { left: 0; }

/* ---------- top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 5;
}
.brand { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 650; letter-spacing: -0.01em; }
.brand-mark { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.topbar-right { display: inline-flex; align-items: center; gap: 1rem; }
.topbar-link { color: var(--text-2); text-decoration: none; font-size: 0.9rem; }
.topbar-link:hover { color: var(--text); }
.chip {
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.inline-form { display: inline; }
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--text-2); font: inherit; font-size: 0.9rem;
}
.linkish:hover { color: var(--text); }

/* ---------- page ---------- */
.page {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.75rem 1.25rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

.alert { padding: 0.8rem 1rem; border-radius: var(--r); border: 1px solid var(--line); }
.alert-ok { border-color: #83b39e; background: #eff9f3; color: #086040; }
.alert-err { border-color: var(--danger-line); background: var(--danger-dim); }

/* ---------- 1. status ---------- */
.status {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1.35rem 1.4rem;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
}
.status-dot {
  width: 11px; height: 11px; border-radius: 50%;
  margin-top: 0.5rem; flex: none; background: var(--muted);
}
.status-title { font-size: 1.4rem; font-weight: 640; letter-spacing: -0.02em; }
.status-note { color: var(--text-2); font-size: 0.94rem; margin-top: 0.2rem; }
.status-nominal .status-dot { background: var(--up); }
.status-waiting .status-dot { background: var(--warn); }
/* Something is trading, so this is not an alarm; a lane being off is still
   worth noticing, which is why it is not the plain "everything is running". */
.status-partial .status-dot { background: var(--up); }
.status-degraded { border-color: #c39b58; background: #fff7e8; }
.status-degraded .status-dot { background: var(--warn); }
.status-degraded .status-title { color: var(--warn); }
/* A stopped bot must be unmissable without shouting on every other screen. */
.status-halted { border-color: var(--danger-line); background: var(--danger-dim); }
.status-halted .status-dot { background: var(--danger); }
.status-halted .status-title { color: var(--danger); }

/* ---------- 2. money ---------- */
.money { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2.5rem; }
.money-label {
  display: block; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); margin-bottom: 0.35rem;
}
.money-value { font-size: 2.6rem; font-weight: 660; letter-spacing: -0.035em; line-height: 1; }
.money-change { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text-2); }
.money-change.up { color: var(--up); }
.money-change.down { color: var(--down); }
.money-change.muted { color: var(--muted); font-size: 1.05rem; }

/* ---------- shared section ---------- */
.section-title {
  font-size: 0.98rem; font-weight: 600; color: var(--text-2);
  margin-bottom: 0.85rem;
}
.empty { color: var(--muted); font-size: 0.94rem; }

/* ---------- holdings ---------- */
.holdings { display: flex; flex-direction: column; gap: 1px; background: var(--line-soft); border-radius: var(--r); overflow: hidden; }
.holding {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
}
.holding-symbol { font-weight: 650; }
.holding-qty { color: var(--muted); font-size: 0.9rem; }
.holding-value { font-weight: 560; }
.holding-pnl { font-weight: 600; min-width: 6rem; text-align: right; color: var(--text-2); }
.holding-pnl.up { color: var(--up); }
.holding-pnl.down { color: var(--down); }

/* ---------- activity ---------- */
.activity { display: flex; flex-direction: column; }
.activity-row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.65rem 0; border-bottom: 1px solid var(--line-soft);
  font-size: 0.94rem;
}
.activity-row:last-child { border-bottom: 0; }
.activity-what { color: var(--text); }
.activity-when { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }

/* ---------- safety ---------- */
.safety {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; padding: 1.1rem 1.25rem;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
}
.safety + .safety { margin-top: 0.75rem; }
.safety-engaged { border-color: var(--danger-line); background: var(--danger-dim); }
.safety-engaged .safety-state { color: var(--danger); }
.safety-state { font-weight: 620; }
.safety-which { color: var(--muted); font-weight: 500; }
.safety-note { color: var(--muted); font-size: 0.88rem; margin-top: 0.2rem; max-width: 34rem; }
button.danger {
  background: transparent; color: var(--danger);
  border: 1px solid var(--danger-line); border-radius: 999px;
  padding: 0.5rem 1.1rem; font: inherit; font-size: 0.9rem; font-weight: 560;
  cursor: pointer; white-space: nowrap;
}
button.danger:hover { background: var(--danger-dim); }

/* ---------- details drawers ---------- */
.drawer { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.drawer + .drawer { margin-top: 0.6rem; }
.drawer > summary {
  cursor: pointer; padding: 0.85rem 1.1rem;
  font-size: 0.94rem; font-weight: 560; color: var(--text-2);
  list-style: none;
}
.drawer > summary::-webkit-details-marker { display: none; }
.drawer > summary::before { content: "+ "; color: var(--muted); }
.drawer[open] > summary::before { content: "- "; }
.drawer[open] > summary { color: var(--text); border-bottom: 1px solid var(--line-soft); }
.drawer-body { padding: 1rem 1.1rem 1.15rem; }
.drawer-intro { color: var(--muted); font-size: 0.88rem; margin-bottom: 0.9rem; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.85rem 1.5rem; }
.facts > div { display: flex; flex-direction: column; gap: 0.15rem; }
.facts dt { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.facts dd { font-size: 0.96rem; }

/* ---------- ask ---------- */
.ask { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.ask input[type="text"] {
  flex: 1 1 16rem; min-width: 0;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.6rem 1rem; font: inherit; font-size: 0.94rem;
}
.ask input[type="text"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ask button {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.6rem 1.3rem; font: inherit; font-size: 0.94rem; cursor: pointer;
}
.ask button:hover { border-color: var(--accent); }
.answer {
  margin-top: 0.9rem; padding: 0.9rem 1rem;
  border-left: 2px solid var(--accent); background: var(--surface-2);
  border-radius: 0 var(--r) var(--r) 0; color: var(--text-2); font-size: 0.94rem;
}

.foot { color: var(--muted); font-size: 0.82rem; text-align: center; padding-top: 0.5rem; }

/* ---------- login ---------- */
.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.login-card {
  width: 100%; max-width: 22rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.75rem;
}
.login-card h1 { font-size: 1.25rem; font-weight: 640; margin-bottom: 0.35rem; }
.login-card .sub { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.35rem; }
.field { display: block; margin-bottom: 0.9rem; }
.field span {
  display: block; font-size: 0.76rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.3rem;
}
.field input {
  width: 100%; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 0.65rem 0.85rem; font: inherit;
}
.field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.login-card button[type="submit"] {
  width: 100%; margin-top: 0.4rem;
  background: var(--accent); color: #07101f;
  border: 0; border-radius: var(--r);
  padding: 0.7rem 1rem; font: inherit; font-weight: 620; cursor: pointer;
}
.login-card button[type="submit"]:hover { filter: brightness(1.08); }

/* ---------- perimeter login (the outer gateway) ----------
   The gateway serves this same stylesheet to its own templates, so every class
   they use has to live here. Redesigning the dashboard alone once dropped all
   of these and left that page rendering as unstyled text. */

.brand-lockup { display: flex; align-items: center; gap: 0.7rem; }
.login-brand { margin-bottom: 1.15rem; }
.brand-lockup .brand-mark { flex: none; }
.eyebrow {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); margin-bottom: 0.1rem;
}
.brand-lockup h1 { font-size: 1.25rem; font-weight: 640; letter-spacing: -0.02em; }

/* Says plainly that this page is the first of two password layers. */
.auth-layer-track {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.75rem; color: var(--muted); margin-bottom: 1.1rem;
}
.auth-layer-track b { font-weight: 660; margin-right: 0.2rem; }
.auth-layer-track i { flex: 1; height: 1px; background: var(--line); }
.auth-layer-active { color: var(--accent); }

.login-intro { color: var(--text-2); font-size: 0.92rem; margin-bottom: 1.1rem; }

.security-note {
  display: flex; gap: 0.6rem; align-items: flex-start;
  padding: 0.7rem 0.85rem; margin-bottom: 1.2rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); font-size: 0.85rem; color: var(--text-2);
}
.security-note .status-dot { margin-top: 0.38rem; width: 8px; height: 8px; }
.security-note strong { display: block; color: var(--text); font-weight: 620; }
.security-note-perimeter .status-dot { background: var(--accent); }

/* The gateway form writes its label text as a bare node, so the input becoming
   a block is what puts the caption on its own line above the box. */
.stack { display: flex; flex-direction: column; gap: 0.85rem; }
.login-form label {
  display: block; font-size: 0.76rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted);
}
.login-form input {
  display: block; width: 100%; margin-top: 0.3rem;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 0.65rem 0.85rem; font: inherit;
  text-transform: none; letter-spacing: normal;
}
.login-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.login-footnote {
  margin-top: 1.15rem; font-size: 0.75rem; color: var(--muted); line-height: 1.5;
}
.login-return-link {
  display: block; text-align: center; margin-top: 0.15rem;
  color: var(--text-2); font-size: 0.88rem; text-decoration: none;
}
.login-return-link:hover { color: var(--text); }
.button-danger {
  width: 100%; background: var(--danger-dim); color: var(--danger);
  border: 1px solid var(--danger-line); border-radius: var(--r);
  padding: 0.7rem 1rem; font: inherit; font-weight: 620; cursor: pointer;
}
.button-danger:hover { filter: brightness(1.15); }
.alert-error { border-color: var(--danger-line); background: var(--danger-dim); }

/* ---------- dashboard leftovers the redesign did not restyle ---------- */
.chip-quiet { color: var(--muted); }
.money-primary, .money-secondary { display: flex; flex-direction: column; gap: 0.35rem; }
.section-note { color: var(--text-2); font-size: 0.9rem; }
.drawer-note { color: var(--text-2); font-size: 0.88rem; }

/* ---------- narrow screens ---------- */
@media (max-width: 34rem) {
  .page { padding: 1.25rem 1rem 3rem; gap: 1.75rem; }
  .money { gap: 1.5rem; }
  .money-value { font-size: 2.1rem; }
  .holding { grid-template-columns: 1fr auto; row-gap: 0.3rem; }
  .holding-qty { grid-column: 1; }
  .holding-pnl { min-width: 0; }
  .safety { flex-direction: column; align-items: flex-start; }
}

/* ---------- research drawers ---------- */
.boundary-lock {
  display: inline-block; margin-right: 0.5rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 0.1rem 0.4rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); color: var(--muted);
}
.volatility-lane-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }

@media (max-width: 34rem) {
  .volatility-lane-grid { grid-template-columns: 1fr; }
}
/* The redesign has no motion of its own, but a future transition must not be
   introduced without honouring this. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Forced-colors mode replaces the palette entirely; keep the status dot and
   the emergency control legible by falling back to system colours. */
@media (forced-colors: active) {
  .status-dot { forced-color-adjust: none; background: CanvasText; }
  .safety button.danger { border: 1px solid ButtonText; }
  .chip, .boundary-lock { border: 1px solid CanvasText; }
}

/* 600px is the narrow-phone breakpoint the layout tests pin. */
@media (max-width: 600px) {
  .money { flex-direction: column; align-items: flex-start; }
  .holding { grid-template-columns: 1fr auto; }
  .kronos-metrics { grid-template-columns: 1fr; }
  .volatility-metrics { grid-template-columns: 1fr; }
}

.emergency-drawer { border-left: 3px solid var(--danger, #b4232a); }
.drawer-status { margin: 0 0 .5rem; color: var(--muted); font-size: .9rem; }
.kronos-metrics,
.volatility-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.alert-warn { background: #fff7e8; color: var(--warn); border-color: #c39b58; }

/* Kronos lifecycle drawer: dense read-only metrics, never a control surface. */
.lifecycle-artifact-disabled { color: var(--muted); }
.kronos-detail { --kronos-lane-gap: 1rem; }
/* Separate the lanes so two of them do not read as one block of numbers. */
.kronos-lane + .kronos-lane {
  margin-top: var(--kronos-lane-gap);
  padding-top: var(--kronos-lane-gap);
  border-top: 1px solid var(--line-soft);
}
.kronos-lane-title { margin: .75rem 0 .35rem; font-size: .95rem; font-weight: 600; }
.runtime-truth-veto_ready { color: var(--warn-strong); }
.runtime-truth-collecting { color: var(--muted); }

.advisor-panel .ask { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Readiness meter. Widths are enumerated classes, never inline styles: the
   dashboard CSP is style-src 'self' and drops style attributes. */
.signal-meter { margin: .5rem 0 1rem; display: grid; gap: .35rem; }
.signal-label { font-size: .85rem; color: var(--muted); }
.signal-track { display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.signal-fill { display: block; height: 100%; background: var(--ok, #4a9d5f); }
.meter-w-0 { width: 0%; }
.meter-w-10 { width: 10%; }
.meter-w-20 { width: 20%; }
.meter-w-30 { width: 30%; }
.meter-w-40 { width: 40%; }
.meter-w-50 { width: 50%; }
.meter-w-60 { width: 60%; }
.meter-w-70 { width: 70%; }
.meter-w-80 { width: 80%; }
.meter-w-90 { width: 90%; }
.meter-w-100 { width: 100%; }

/* Command workspace. Shared authentication styles below intentionally apply to
   both servers; session boundaries and form fields remain independent. */
html { scroll-padding-top: 2rem; }
a { color: var(--accent); text-underline-offset: .2em; }
button, input { font: inherit; }
button { cursor: pointer; min-height: 44px; padding: .65rem 1.1rem; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent); color: white; font-weight: 600; }
button:hover { background: #194bc5; }
button:disabled { cursor: not-allowed; background: var(--surface-2); color: var(--muted); border-color: var(--line); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.up { color: var(--up); }
.down { color: var(--down); }
.skip-link { color: white; }
.brand { text-decoration: none; color: inherit; gap: .75rem; font-size: 1.1rem; line-height: 1.35; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; flex: none; border-radius: 10px; color: white; font-size: 1.1rem; font-weight: 750; }
.brand-caption { display: block; margin-top: .3rem; font-size: .6rem; letter-spacing: .12em; font-weight: 500; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 224px; display: flex; flex-direction: column; padding: 2rem 1.15rem; background: #142137; color: #f5f8ff; z-index: 10; }
.sidebar .brand { padding: 0 .4rem; }
.sidebar .brand-caption { color: #b7c7df; }
.nav-label { font-size: .72rem; color: #b7c7df; margin: 3rem .8rem .65rem; text-transform: uppercase; letter-spacing: .08em; }
.workspace-nav { display: grid; gap: .35rem; }
.workspace-nav a { display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem; min-height: 44px; border-radius: 7px; color: #d3deee; text-decoration: none; font-size: .88rem; }
.workspace-nav a span { font-size: .7rem; color: #a7bad5; }
.workspace-nav a:hover, .workspace-nav a:focus-visible { background: #273b59; color: white; }
.workspace-nav a[aria-current="location"] { background: #254678; color: white; }
.sidebar-footer { margin-top: auto; padding: 2rem .65rem 0; color: #c0cee1; font-size: .85rem; }
.sidebar-footer .chip { border-color: #5d7392; color: #deebff; margin-bottom: 1rem; font-size: .65rem; }
.sidebar-footer small { display: block; color: #b7c7df; margin-top: .6rem; }
.topbar { margin-left: 224px; min-height: 72px; padding: .8rem 2.25rem; background: var(--surface); position: static; }
.workspace-name { font-size: .85rem; font-weight: 600; }
.workspace-name .muted { margin-left: .5rem; font-weight: 400; }
.topbar-right { gap: 1.2rem; }
.topbar-link { color: var(--accent); font-size: .85rem; text-decoration: underline; }
.linkish { min-height: 44px; padding: .3rem; }
.linkish:hover { background: var(--surface-2); }
.chip { border-radius: 6px; padding: .3rem .65rem; font-size: .75rem; font-weight: 600; letter-spacing: .025em; white-space: nowrap; }
.chip-quiet { background: #edf3ff; color: #214ca8; border-color: #cbd9f7; }
.workspace { margin-left: 224px; min-width: 0; }
.workspace .topbar { margin-left: 0; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; max-width: 107.5rem; margin-inline: auto; }
.page { margin: 0 auto; width: 100%; padding: 2rem 2.25rem 3rem; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.4rem; max-width: 112rem; }
.page > * { min-width: 0; }
.page-heading, .page > .alert, .status, .money, .safety-panel, .details-panel, .training-panel, .system-flow, .page > .foot { grid-column: 1 / -1; }
.page-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-end; margin: .2rem 0 .4rem; }
.page-heading h1 { font-size: clamp(1.65rem, 2.5vw, 2.15rem); line-height: 1.2; letter-spacing: -.04em; font-weight: 650; margin: .3rem 0 .6rem; }
.eyebrow { font-size: .7rem; letter-spacing: .11em; font-weight: 650; }
.snapshot-note { color: var(--muted); font-size: .78rem; text-align: right; max-width: 13rem; }
.status { padding: 1rem 1.2rem; border-radius: var(--r); }
.status-title { font-size: 1rem; }
.status-note { font-size: .85rem; }
.money { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.money-primary, .money-secondary { display: flex; flex-direction: column; }
.money-primary, .money-secondary { gap: .55rem; min-width: 0; padding: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.money-primary { border-top: 3px solid var(--accent); padding-top: calc(1.25rem - 2px); }
.money-label { font-size: .8rem; text-transform: none; letter-spacing: normal; font-weight: 550; margin: 0; }
.money-value, .money-change { font-size: clamp(1.45rem, 2.15vw, 2rem); color: var(--text); font-weight: 650; letter-spacing: -.04em; line-height: 1.3; overflow-wrap: anywhere; }
.metric-note { font-size: .75rem; color: var(--muted); margin-top: auto; }
.metric-denominator { color: var(--muted); font-size: 1.1rem; font-weight: 450; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.35rem; }
.section-title { font-size: 1rem; font-weight: 650; color: var(--text); margin-bottom: .35rem; letter-spacing: -.015em; }
.section-note { color: var(--muted); font-size: .85rem; }
.empty { padding: 1rem 0; font-size: .9rem; }
.holdings { margin-top: 1.1rem; max-height: 30rem; overflow: auto; scrollbar-width: thin; background: none; border-radius: 0; }
.holding { grid-template-columns: minmax(4rem, .8fr) 1fr 1.2fr 1fr; gap: .7rem; padding: .9rem .1rem; border-top: 1px solid var(--line-soft); }
.holding-symbol { font-size: .9rem; overflow-wrap: anywhere; }
.holding-qty { font-size: .8rem; }
.holding-value, .holding-pnl { text-align: right; font-size: .88rem; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.activity { margin-top: 1.1rem; }
.activity-row { display: grid; gap: .2rem; padding: .8rem 0 .8rem 1rem; border-left: 2px solid #c8d9f5; }
.activity-what { font-size: .9rem; font-weight: 550; }
.activity-when { font-size: .75rem; white-space: normal; overflow-wrap: anywhere; }
.activity-detail { color: var(--muted); font-size: .8125rem; overflow-wrap: anywhere; }
.market-next { margin-top: .65rem; font-size: .875rem; font-weight: 600; }
.metric-warning { grid-column: 1 / -1; color: var(--warn); font-size: .875rem; padding: .75rem 1rem; border-left: 3px solid #c39b58; background: #fff7e8; }
.worker-heartbeat { margin-top: .6rem; font-size: .8125rem; color: var(--muted); overflow-wrap: anywhere; }
.holdings-head { display: grid; grid-template-columns: minmax(4rem, .8fr) 1fr 1.2fr 1fr; gap: .7rem; margin-top: 1.25rem; padding: .5rem .1rem; font-size: .8125rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.holdings-head span:nth-child(n+3) { text-align: right; }
.holdings-head + .holdings { margin-top: 0; }
.money-change.neutral, .holding-pnl.neutral { color: var(--text); }
.status-waiting { background: #edf3ff; border-color: #cbd9f7; }
.status-waiting .status-dot { background: #214ca8; }
.safety { padding: 1rem; border-radius: 9px; margin-top: .85rem; }
.safety-state { font-size: .9rem; }
.safety-note { font-size: .8rem; max-width: 55rem; }
button.danger, .button-danger, .login-card button.button-danger { background: white; color: var(--danger); border: 1px solid var(--danger-line); border-radius: 8px; }
.drawer { margin-top: .75rem; }
.drawer > summary { padding: 1rem 1.2rem; font-size: .92rem; color: var(--text); }
.drawer > summary::before { display: inline-block; width: 1.4rem; color: var(--accent); }
.drawer-body { padding: 1.2rem; }
.drawer-intro, .drawer-note { font-size: .85rem; margin-bottom: .9rem; }
.facts { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem 1.5rem; }
.facts + .facts { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line-soft); }
.facts > div { min-width: 0; }
.facts dt { font-size: .75rem; text-transform: none; letter-spacing: normal; }
.facts dd { font-size: .9rem; overflow-wrap: anywhere; }
.kronos-metrics, .volatility-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.signal-fill { background: var(--up); }
.ask input[type="text"], .ask button { border-radius: 8px; }
.ask input[type="text"] { border-color: #8796ac; background: white; }
.ask input::placeholder { color: var(--muted); opacity: 1; }
.foot { font-size: .75rem; }
.login-shell { display: grid; grid-template-columns: minmax(19rem, .9fr) minmax(25rem, 1.1fr); padding: 0; align-items: stretch; }
.auth-story { display: flex; flex-direction: column; padding: clamp(2rem, 5vw, 5rem); background: #142137; color: #f5f8ff; }
.auth-story .brand-caption { color: #b7c7df; }
.auth-story-copy { margin: auto 0; padding: 5rem 0; max-width: 32rem; }
.auth-story-copy h2 { font-size: clamp(2rem, 3.7vw, 3.5rem); font-weight: 550; letter-spacing: -.045em; line-height: 1.15; margin: .9rem 0 1.25rem; }
.auth-story-copy p, .auth-story .eyebrow { color: #bdcee6; }
.auth-story-foot { border-top: 1px solid #526782; padding-top: 1.4rem; color: #bdcee6; font-size: .8rem; }
.auth-stage { display: flex; align-items: center; justify-content: center; padding: 3rem; }
.login-card { max-width: 28rem; background: transparent; border: 0; border-radius: 0; padding: 0; }
.login-card h1 { font-size: 1.8rem; font-weight: 650; letter-spacing: -.035em; line-height: 1.25; margin: .65rem 0; }
.auth-layer-track { gap: .8rem; margin-bottom: 2.75rem; font-size: .8rem; }
.auth-layer-track b { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: .4rem; border-radius: 50%; border: 1px solid #8796ac; font-size: .7rem; }
.auth-layer-track i { background: #8796ac; }
.auth-layer-active { font-weight: 650; }
.auth-layer-active b { background: var(--accent); color: white; border-color: var(--accent); }
.auth-layer-complete { color: var(--up); }
.auth-layer-complete b { border-color: var(--up); }
.login-intro { font-size: .9rem; margin-bottom: 1.4rem; }
.security-note { padding: .85rem 1rem; margin: 1.2rem 0; background: #edf3ff; border-color: #cad9f5; border-radius: 9px; font-size: .8rem; }
.stack { gap: 1rem; }
.field { margin: 0; }
.login-form label, .field span { color: var(--text-2); font-size: .85rem; font-weight: 550; text-transform: none; letter-spacing: normal; }
.login-form input, .field input { margin-top: .4rem; font-size: 1rem; min-height: 46px; border-color: #8796ac; border-radius: 8px; background: white; }
.login-form input::placeholder { color: var(--muted); opacity: 1; }
.login-card button[type="submit"] { margin-top: .5rem; min-height: 48px; color: white; border-radius: 8px; }
.login-card .alert { margin: 1rem 0; }
.login-footnote { margin-top: 1.5rem; font-size: .75rem; line-height: 1.65; }
.login-return-link { color: var(--accent); padding: .5rem; text-decoration: underline; }
.training-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.training-connection { font-size: .75rem; color: var(--muted); text-align: right; max-width: 22rem; }
.is-current { color: var(--up); }
.is-unavailable { color: var(--warn); }
.training-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(16rem, 1fr); gap: 2rem; margin-top: 1.5rem; }
.training-actions { display: grid; gap: 1rem; border-left: 1px solid var(--line); padding-left: 1.5rem; }
.training-actions p { font-size: .8rem; color: var(--muted); margin: .45rem 0; }
.training-progress { margin-top: 1.25rem; }
.training-progress label { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); margin-bottom: .5rem; }
progress { display: block; width: 100%; height: 8px; accent-color: var(--accent); border: 0; border-radius: 4px; background: var(--line); }
progress::-webkit-progress-bar { background: var(--line); border-radius: 4px; }
progress::-webkit-progress-value { background: var(--accent); border-radius: 4px; }
progress::-moz-progress-bar { background: var(--accent); border-radius: 4px; }
.system-flow { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: .25rem; }
.flow-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0; padding: 0; list-style: none; }
.flow-node { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: .9rem 1rem; }
.flow-node:not(:last-child)::after { content: "→"; position: absolute; right: -.9rem; top: 1rem; color: var(--muted); }
.flow-node b { display: block; font-size: .85rem; }
.flow-node span { font-size: .75rem; color: var(--muted); }
.login-card button[type="submit"].button-danger { color: var(--danger); background: white; }
/* Readable labels on high-density screens; only secondary metadata uses 12px. */
.brand-caption, .nav-label, .workspace-nav a span, .sidebar-footer .chip, .eyebrow { font-size: .75rem; }
.money-label, .section-note, .status-note, .holding-qty, .safety-note,
.training-actions p, .training-progress label, .facts dt, .flow-node b,
.login-form label, .field span, .login-intro, .security-note, .drawer-intro { font-size: .875rem; }
.snapshot-note { font-size: .8125rem; max-width: 23rem; }
.snapshot-note time { display: block; margin-top: .35rem; font-size: .75rem; }
.holdings-panel, .activity-panel { align-self: start; }
.activity { max-height: 36rem; overflow: auto; scrollbar-width: thin; }
.activity-row { grid-template-columns: 1fr; }
.training-connection, .flow-node span, .metric-note, .login-footnote { font-size: .8125rem; }
.login-shell { min-height: 100svh; }
.auth-story-copy { padding-block: 3rem; }
.auth-stage { min-width: 0; }
.login-card { width: 100%; }
.auth-layer-track { flex-wrap: wrap; }
@media (max-width: 1150px) {
  .sidebar { width: 196px; padding-inline: .8rem; }
  .workspace { margin-left: 196px; }
  .topbar, .page { padding-inline: 1.4rem; }
  .money { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .holdings-panel, .activity-panel { grid-column: 1 / -1; }
  .activity-row { grid-template-columns: 1fr; }
  .training-layout { grid-template-columns: 1fr; }
  .training-actions { grid-template-columns: 1fr 1fr; border-left: 0; border-top: 1px solid var(--line); padding: 1.25rem 0 0; }
}
@media (max-width: 800px) {
  .sidebar { position: static; width: auto; padding: 1rem; gap: 1rem; }
  .sidebar .brand { font-size: 1rem; }
  .nav-label, .sidebar-footer { display: none; }
  .workspace-nav { display: flex; flex-wrap: wrap; gap: .35rem; }
  .workspace-nav a { padding: .4rem .65rem; font-size: .8rem; }
  .workspace-nav a span { display: none; }
  .workspace { margin-left: 0; }
  .topbar { min-height: 60px; padding: .65rem 1rem; }
  .workspace-name { display: none; }
  .topbar-right { width: 100%; justify-content: space-between; }
  .page { padding: 1.5rem 1rem 2rem; }
  .login-shell { grid-template-columns: 1fr; }
  .auth-story { padding: 1.5rem 2rem; }
  .auth-story-copy, .auth-story-foot { display: none; }
  .auth-stage { padding: 2rem 1.5rem; }
  .auth-layer-track { margin-bottom: 2rem; }
  .flow-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-node::after { display: none; }
}
@media (max-width: 600px) {
  .page { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .page-heading { flex-direction: column; align-items: flex-start; }
  .snapshot-note { text-align: left; max-width: none; }
  .money { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; align-items: stretch; }
  .money-primary, .money-secondary { padding: 1rem .85rem; }
  .money-primary { padding-top: calc(1rem - 2px); }
  .money-value, .money-change { font-size: 1.4rem; }
  .money-label { font-size: .875rem; }
  .metric-note { font-size: .8125rem; }
  .holdings-head { display: none; }
  .holding { grid-template-columns: 1fr auto; row-gap: .3rem; }
  .holding-symbol { grid-column: 1; grid-row: 1; }
  .holding-qty { grid-column: 1; grid-row: 2; }
  .holding-value { grid-column: 2; grid-row: 1; }
  .holding-pnl { grid-column: 2; grid-row: 2; }
  .holdings { max-height: none; }
  .activity-row { grid-template-columns: 1fr; }
  .safety { flex-direction: column; align-items: flex-start; }
  .kronos-metrics, .volatility-metrics, .volatility-lane-grid { grid-template-columns: 1fr; }
  .training-heading { flex-direction: column; }
  .training-connection { text-align: left; }
  .training-actions, .facts { grid-template-columns: 1fr; }
  .panel { padding: 1.1rem; }
}
@media (max-width: 380px) {
  .money, .flow-track { grid-template-columns: 1fr; }
  .topbar-right { flex-wrap: wrap; gap: .6rem; }
  .auth-stage { padding: 1.5rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}