* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.4;
}

.topbar {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.topbar h1 { margin: 0; font-size: 1.25rem; }
.subtitle { margin: 4px 0 0; color: var(--muted); font-size: 0.85rem; }

/* .main-nav / .nav-group / .theme-toggle / .activity-* / .passkey-offer moved to
   the SHARED css/components.css (SI-DEV-REQ-058 R3): templates/_nav.html is a
   shared include rendered by pages that do not load this file (/inheritance/). */

/* Activity page (SI-DEV-REQ-035): board table + filter form + status chips.
   UX defect fix 2026-08-28: each board table scrolls inside its own
   .activity-table-wrap with the heading frozen (same technique as the
   screener / trap tables). */
.activity-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.activity-table th, .activity-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.activity-table thead th {
  position: sticky; /* frozen heading while the rows scroll under it */
  top: 0;
  z-index: 1;
  background: var(--panel);
  color: var(--muted);
  font-weight: var(--fw-semibold, 600);
  text-transform: uppercase;
  font-size: var(--fs-xs, 0.7rem);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.activity-table-wrap { max-height: 72vh; overflow: auto; border-radius: var(--radius-sm); }
.chip--success { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 40%, transparent); }
.chip--failed { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 40%, transparent); }
.chip--running { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.chip--warning { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.chip--skipped { color: var(--muted); border-color: color-mix(in srgb, var(--muted) 40%, transparent); }
.add-trail {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 6px 10px; margin: 6px 0;
}
.add-trail summary { cursor: pointer; }
.add-trail__stages {
  list-style: none; margin: 8px 0 2px; padding-left: 10px;
  display: grid; gap: 4px;
}
.add-trail__stages li { font-size: 0.85rem; }
.activity-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 10px 0 16px; }
.activity-filters label {
  display: block; font-size: var(--fs-xs, 0.7rem);
  color: var(--muted); margin-bottom: 2px;
}
.activity-filters select { padding: 4px 8px; border-radius: var(--radius-sm); }
.activity-detail summary { cursor: pointer; color: var(--accent); }
.activity-detail pre {
  margin: 6px 0 0; padding: 8px 10px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.8rem; white-space: pre-wrap;
}

/* Module groups + nav user chrome: moved to shared components.css (R3). */

.login-body { display: grid; place-items: center; min-height: 100vh; background: var(--bg); padding: var(--space-5) 0; box-sizing: border-box; }
.login-card { width: min(360px, 92vw); }
.login-card--wide { width: min(460px, 94vw); }
.login-card h1 { font-size: 1.2rem; margin-bottom: 2px; }
.login-card h2 { font-size: 0.95rem; margin: var(--space-5) 0 var(--space-2); color: var(--fg); }
.login-card > p { margin-top: var(--space-2); }
.login-form label { display: block; margin: 10px 0 2px; color: var(--muted); font-size: 0.85rem; }
.login-form input {
  width: 100%; box-sizing: border-box;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--fg);
  padding: 9px 11px; border-radius: var(--radius-sm); font: inherit;
}
.login-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.login-form .btn { margin-top: 14px; width: 100%; }

/* Stacked action rows (SI-DEV-REQ-053): sibling forms/buttons never overlap. */
.login-actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.login-actions form { margin: 0; }
.login-actions .btn { width: 100%; }

/* Two-factor wizard (SI-DEV-REQ-053) */
.step-badge {
  display: inline-block; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent);
  background: var(--accent-weak); border-radius: var(--radius-sm);
  padding: 2px var(--space-2); margin-bottom: var(--space-2);
}
.qr-plate {
  display: inline-block; background: var(--qr-bg);
  padding: var(--space-3); border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.qr-plate img { display: block; width: 200px; height: 200px; }
.secret-key {
  display: block; font-family: var(--font-mono); font-size: var(--fs-sm);
  word-break: break-all; background: var(--panel-2); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); margin: var(--space-2) 0 var(--space-3);
}
/* Contextual passkey offer: now a POPUP PANEL in shared components.css (R3). */

.backup-codes {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
  margin: var(--space-4) 0; padding: 0; list-style: none; counter-reset: backup-code;
}
.backup-codes li {
  font-family: var(--font-mono); font-size: var(--fs-sm); text-align: center;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--space-2);
  counter-increment: backup-code;
}
.backup-codes li::before { content: counter(backup-code) ". "; color: var(--muted); }

.layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--gap);
  padding: var(--gap);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.panel h2 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Manage Tickers page (2026-08-23): the retired watchlist page's panel, rehomed. */
.manage-layout { display: flex; flex-direction: column; gap: var(--gap); padding: var(--gap); }
.panel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.symbol { font-weight: 600; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.muted { color: var(--muted); }

.chart-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.chart-controls input {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 7px 10px;
  border-radius: 6px;
  width: 120px;
}
.chart-controls button {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
}
.chart-controls button:hover { filter: brightness(1.1); }
.chart-status { font-size: 0.8rem; }
.chart-wrap { position: relative; height: 320px; }
#price-chart { width: 100%; height: 100%; }

/* Range toggle + candlestick toggle (SI-REQ-019). Pure CSS-custom-property styling. */
.range-group { display: inline-flex; gap: 2px; }
.range-btn, .toggle-btn {
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
}
.range-btn:hover, .toggle-btn:hover { color: var(--fg); border-color: var(--accent); }
/* Range % change readout (2026-08-23): the % move over the selected chart window */
.range-pct { font-size: var(--fs-sm); font-weight: var(--fw-semibold); min-width: 5.5em; }
.range-pct.is-pos { color: var(--pos); }
.range-pct.is-neg { color: var(--neg); }
.range-btn.is-active {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}
.toggle-btn[aria-pressed="true"] {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}
.chart-legend { font-size: 0.78rem; min-height: 1.1em; }

@media (max-width: 899px) {  /* SI-DEV-REQ-068: unified scale 1199/899/599 */
  .layout { grid-template-columns: 1fr; }
}

.intraday-panel { padding: 0 var(--gap) var(--gap); }
.intraday-panel h3 {
  margin: 0 0 8px;
  font-size: 0.9rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.intraday { width: 100%; max-width: 360px; border-collapse: collapse; font-size: 0.9rem; }
.intraday th, .intraday td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: right;
}
.intraday th:first-child, .intraday td:first-child { text-align: left; }
.intraday th { color: var(--muted); font-weight: 600; }

/* ticker management (SI-REQ-008) */
.ticker-manager-panel { margin: 0; }
.ticker-add {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.ticker-add input {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 7px 10px;
  border-radius: 6px;
}
.ticker-add input[name="symbol"] { width: 160px; }
.ticker-add input[name="label"] { width: 200px; }
/* .btn / .btn--ghost live ONLY in components.css (single source of truth);
   a duplicate base class here would load later and clobber the ghost variant. */
.btn:hover { filter: brightness(1.1); }
.btn.rm { background: var(--neg); padding: 4px 10px; font-size: 0.8rem; }
/* Light/dark theme toggle (SI-DEV-REQ-023): subtle ghost button pushed to the nav's right edge.
   Overrides the default .btn accent fill so it reads as a utility, not a primary action. */
/* .theme-toggle moved to shared components.css (R3). */
.ticker-mgr { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ticker-mgr th, .ticker-mgr td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.ticker-mgr th { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.04em; }
.ticker-mgr td:last-child { text-align: right; }
.ticker-mgr .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Home-market label (2026-08-23): names the index each row's Corr/Beta/Alpha use */
.mkt { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }

/* Tags (2026-08-23): shadow-investor groupings + tag filter chips */
.tag-chip {
  display: inline-block; padding: 1px 7px; margin-left: 4px;
  border: 1px solid var(--border); border-radius: 999px;
  font-size: 0.68rem; color: var(--accent); background: var(--panel);
  white-space: nowrap;
}
.tag-chip--lg { font-size: 0.8rem; padding: 3px 10px; margin-left: 0; margin-right: 6px; }

/* Twin badge (2026-08-27, SI-DEV-REQ-037): links a row to its cross-listing twin */
.twin-badge {
  display: inline-block; padding: 1px 6px; margin-left: 4px;
  border: 1px solid var(--border); border-radius: 999px;
  font-size: 0.68rem; color: var(--muted); background: var(--panel);
  white-space: nowrap;
}
.tags-panel { margin: 6px 0; }
.tags-panel .muted { color: var(--muted); font-size: 0.72rem; }
.tag-add-form { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.tag-add-form input[type="text"] { flex: 1 1 160px; }
.tags-cell { max-width: 160px; }

/* Inline ticker edit (2026-08-23) — screener rows + toolbar tags popover share it */
.row-actions { display: inline-flex; gap: 6px; align-items: center; }
.ticker-edit, .tags-edit { position: relative; display: inline-block; }
.ticker-edit summary, .tags-edit summary { list-style: none; cursor: pointer; }
.ticker-edit summary::-webkit-details-marker, .tags-edit summary::-webkit-details-marker { display: none; }
.ticker-edit[open] .ticker-edit-popover, .tags-edit[open] .ticker-edit-popover {
  position: absolute; left: auto; right: 0; top: calc(100% + 6px); z-index: 40;
  display: flex; flex-direction: column; gap: 8px; min-width: 280px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px; box-shadow: var(--shadow-md); text-align: left;
}
.ticker-edit form, .tags-edit form { display: flex; flex-direction: column; gap: 8px; }
.ticker-edit label, .tags-edit label { display: flex; flex-direction: column; gap: 2px; font-size: 0.78rem; color: var(--muted); }
.ticker-edit input[type="text"], .tags-edit input[type="text"] { width: 100%; box-sizing: border-box; }
.ticker-edit fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; }
.ticker-edit legend { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.tag-choice { flex-direction: row !important; align-items: center; gap: 6px !important; color: var(--fg) !important; font-size: 0.85rem !important; }
.ticker-remove-form { margin-top: 4px; }

/* Screener toolbar (2026-08-23): add-ticker + tags popover + bulk import/export */
.screener-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: var(--gap) var(--gap) 0; }
.screener-toolbar .ticker-add--bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
#action-feedback { padding: var(--gap) var(--gap) 0; min-height: 0; }
#action-feedback:empty { display: none; }
.tags-panel { margin: 4px 0 0; }
.tags-panel .muted { color: var(--muted); font-size: 0.72rem; }

/* Intraday strip (rehomed to the screener page, 2026-08-23) */
.intraday-panel { padding: 0 var(--gap) var(--gap); }

/* Add/remove feedback banners (defect fix 2026-08-23: silent add/remove outcomes) */
.ticker-feedback {
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}
.ticker-feedback--success { border-color: var(--pos); color: var(--pos); }
.ticker-feedback--warning { border-color: var(--warn); color: var(--warn); }
.ticker-feedback--error { border-color: var(--neg); color: var(--neg); }

/* bulk import (SI-REQ-008 Step 3) */
.ticker-import { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.ticker-import textarea {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--fg);
  padding: 8px 10px; border-radius: 6px; font-family: inherit; resize: vertical;
}
.import-result h3 { margin: 12px 0 4px; font-size: 0.85rem; color: var(--muted); text-transform: uppercase; }
.import-accepted { color: var(--pos); }
.import-rejected { color: var(--neg); }
.import-accepted li, .import-rejected li { list-style: none; }

/* Quote header (SI-DEV-REQ-027 Step 3) */
.quote-header { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.quote-id { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.quote-company { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--fg); }
.quote-symbol { font-size: var(--fs-base); color: var(--muted); }
.quote-meta { font-size: var(--fs-sm); color: var(--muted); }
.quote-price-row { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.quote-price { font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--fg); }
.quote-change { font-size: var(--fs-md); font-weight: var(--fw-medium); }
.quote-change.is-pos { color: var(--pos); }
.quote-change.is-neg { color: var(--neg); }
.quote-close { font-size: var(--fs-sm); color: var(--muted); }
.quote-after-hours { font-size: var(--fs-sm); color: var(--fg); }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}