/* ==========================================================================
   StockOrNot — dark-first UI
   One accent hue. Up/down moves carry a glyph and a signed number as well as
   colour, so nothing depends on colour alone.
   ========================================================================== */

:root {
  color-scheme: dark;

  --plane:        #0d0d0d;
  --surface-1:    #1a1a19;
  --surface-2:    #222221;
  --surface-3:    #2c2c2a;

  --ink:          #ffffff;
  --ink-2:        #c3c2b7;
  --ink-muted:    #898781;

  --line:         rgba(255,255,255,0.10);
  --line-strong:  #383835;

  --accent:       #3987e5;
  --accent-deep:  #184f95;

  --good:         #0ca30c;
  --good-ink:     #4cc94c;
  --bad:          #d03b3b;
  --bad-ink:      #e66767;
  --warning:      #fab219;

  --radius:       18px;
  --radius-sm:    10px;
  --shadow:       0 18px 50px rgba(0,0,0,.55);

  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  min-height: 100%;
  overflow-x: hidden;          /* a swiped card flies past the viewport */
}

body {
  background: var(--plane);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  display: flex;
  flex-direction: column;
}

svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
a { color: var(--accent); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; background: var(--surface-3); padding: 1px 5px; border-radius: 5px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skiplink { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--surface-2); color: var(--ink); padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0; }
.skiplink:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ============================== top bar ============================== */

.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 11px clamp(12px, 3vw, 26px);
  border-bottom: 1px solid var(--line);
  background: var(--plane);
  position: sticky; top: 0; z-index: 20;
}

.brand { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 500; white-space: nowrap; letter-spacing: -0.01em; }
.brand b { font-weight: 700; }
.logo { width: 28px; height: 28px; stroke: none; flex: none; }

.topmeta {
  margin-inline: auto;
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.topmeta .sep { opacity: .5; }

.topbar-actions { display: flex; gap: 8px; }

.ghost-btn, .icon-btn, .link-btn, .primary-btn, .chip, .swipe-btn, .search-hit {
  font: inherit; cursor: pointer; border: 0; background: none; color: inherit;
}

.ghost-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-1);
  color: var(--ink-2); font-size: 14px;
  max-width: 210px;
}
.ghost-btn:hover { background: var(--surface-2); color: var(--ink); }
.ghost-btn svg { width: 16px; height: 16px; flex: none; }
.ghost-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ghost-btn.accent.has-items { border-color: var(--accent); color: var(--ink); }
.ghost-btn .pill {
  background: var(--surface-3); color: var(--ink);
  min-width: 21px; text-align: center;
  border-radius: 999px; padding: 1px 6px; font-size: 12px; font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.ghost-btn.has-items .pill { background: var(--accent); color: #06152a; }
@keyframes bump { 0%,100% { transform: scale(1); } 40% { transform: scale(1.12); } }
.ghost-btn.bump { animation: bump .32s ease; }

.primary-btn {
  background: var(--accent); color: #06152a; font-weight: 650;
  padding: 11px 20px; border-radius: 999px; font-size: 14.5px;
}
.primary-btn:hover { filter: brightness(1.08); }

.link-btn { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-size: 13.5px; padding: 4px 0; text-align: left; }
.link-btn.danger { color: var(--bad-ink); }

.icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; color: var(--ink-2); flex: none; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn.small { width: 28px; height: 28px; }
.icon-btn.small svg { width: 15px; height: 15px; }

/* ============================== stage ============================== */

body:not(.docpage) main { flex: 1; display: flex; }

.stage { flex: 1; display: grid; place-items: start center; padding: clamp(12px, 2.4vh, 22px) 16px 24px; }
.deck-wrap { width: 100%; max-width: 430px; }

.deck { position: relative; height: min(660px, calc(100dvh - 250px)); min-height: 420px; }

/* ------------------------------- card ------------------------------- */

.card {
  position: absolute; inset: 0;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  overflow: hidden;
  will-change: transform;
  touch-action: pan-y;
  cursor: grab;
}
.card.is-drag { cursor: grabbing; transition: none !important; user-select: none; }
.card.is-settling { transition: transform .28s cubic-bezier(.22,1,.36,1); }
.card.is-gone { transition: transform .34s cubic-bezier(.4,0,.6,1), opacity .34s ease; opacity: 0; }
.card.is-behind { pointer-events: none; }
.card.is-behind .card-scroll { overflow: hidden; }

.card-scroll {
  flex: 1; min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 20px 26px;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}
.card-scroll::-webkit-scrollbar { width: 8px; }
.card-scroll::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 4px; }

.card-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46px;
  background: linear-gradient(180deg, transparent, var(--surface-1) 82%);
  pointer-events: none;
  transition: opacity .2s ease;
}

/* identity */
.c-top { display: flex; align-items: flex-start; gap: 12px; }
.c-mark {
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  background: var(--surface-3); display: grid; place-items: center;
  font-weight: 700; font-size: 18px; letter-spacing: -0.02em;
}
.c-id { min-width: 0; }
.c-ticker { margin: 0; font-size: 25px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }
.c-name { margin: 1px 0 0; font-size: 13.5px; color: var(--ink-2); }
.c-sector {
  display: inline-block; margin-top: 6px;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 9px;
}

/* price */
.c-price { margin: 18px 0 2px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.c-price-v { font-size: 36px; font-weight: 680; letter-spacing: -0.03em; line-height: 1; }
.c-cap { font-size: 12.5px; color: var(--ink-muted); flex-basis: 100%; }

.delta { display: inline-flex; align-items: center; gap: 5px; font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.delta.small { font-size: 12.5px; font-weight: 550; }
.delta .arrow { font-size: 11px; line-height: 1; }
.delta.up { color: var(--good-ink); }
.delta.down { color: var(--bad-ink); }
.delta.flat { color: var(--ink-muted); }

/* 52-week range */
.c-range { margin: 16px 0 4px; }
.c-range-head, .c-range-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-muted); }
.c-range-head { margin-bottom: 7px; letter-spacing: .05em; text-transform: uppercase; }
.c-range-ends { margin-top: 6px; font-variant-numeric: tabular-nums; }

.rangebar { position: relative; height: 10px; }
.rangebar-track { position: absolute; inset: 1px 0; background: var(--surface-3); border-radius: 4px; }
.rangebar-fill { position: absolute; inset: 1px auto 1px 0; background: var(--accent-deep); border-radius: 4px; }
.rangebar-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.rangebar-dot { display: block; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface-1); }

/* earnings strip */
.c-earnings {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 18px 0 0; padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-2);
}
.c-earnings svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--ink-muted); }
.c-earnings b { color: var(--ink); font-weight: 620; }
.c-earnings.is-soon { border-color: rgba(250,178,25,.45); }
.c-earnings.is-soon svg { color: var(--warning); }
.c-earnings.is-muted { color: var(--ink-muted); }

/* pros / cons */
.c-pc { display: grid; gap: 10px; margin: 18px 0 0; }

.pc-col { border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px; background: var(--surface-2); }
.pc-col h3 {
  margin: 0 0 8px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  display: flex; align-items: center; gap: 7px; color: var(--ink-2);
}
.pc-glyph {
  width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; line-height: 1;
  color: #06152a;
}
.pc-col.pro .pc-glyph { background: var(--good-ink); }
.pc-col.con .pc-glyph { background: var(--bad-ink); }
.pc-col.pro { border-left: 2px solid var(--good); }
.pc-col.con { border-left: 2px solid var(--bad); }

.pc-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.pc-col li { font-size: 13px; color: var(--ink); padding-left: 13px; position: relative; line-height: 1.4; }
.pc-col li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-muted); }
.pc-col.pro li::before { background: var(--good-ink); }
.pc-col.con li::before { background: var(--bad-ink); }
.pc-none { margin: 0; font-size: 12.5px; color: var(--ink-muted); }

/* blocks */
.c-block { margin-top: 22px; }
.block-h {
  margin: 0 0 10px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 600;
  padding-bottom: 7px; border-bottom: 1px solid var(--line);
}
.block-note { margin: 9px 0 0; font-size: 11.5px; color: var(--ink-muted); }
.sub-h { margin: 14px 0 6px; font-size: 12.5px; color: var(--ink-2); font-weight: 620; }
.sub-h:first-child { margin-top: 0; }

.c-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
@media (min-width: 520px) { .c-stats { grid-template-columns: repeat(3, 1fr); } }
.stat { background: var(--surface-1); padding: 9px 11px; }
.stat dt { margin: 0 0 2px; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
.stat dd { margin: 0; font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* filings */
.filing-text { margin: 0; font-size: 12.8px; color: var(--ink-2); line-height: 1.5; }
.risk-list { margin: 0; padding-left: 17px; display: grid; gap: 6px; }
.risk-list li { font-size: 12.6px; color: var(--ink-2); line-height: 1.42; }
.risk-list li::marker { color: var(--bad-ink); }

.filing-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.filing-link {
  font-size: 12.5px; text-decoration: none; color: var(--ink-2);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 12px;
}
.filing-link:hover { border-color: var(--accent); color: var(--accent); }

/* stamps */
.stamp {
  position: absolute; top: 22px; z-index: 5;
  padding: 7px 15px; border-radius: 10px;
  border: 2.5px solid currentColor;
  font-size: 16px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase;
  opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 7px;
  background: rgba(13,13,13,.78);
}
.stamp svg { width: 16px; height: 16px; stroke-width: 2.6; }
.stamp.add  { right: 20px; color: var(--good-ink); transform: rotate(10deg); }
.stamp.pass { left: 20px;  color: var(--bad-ink);  transform: rotate(-10deg); }

/* deck message */
.deck-msg {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 12px;
  text-align: center; padding: 30px;
  background: var(--surface-1);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}
.deck-msg h2 { margin: 0; font-size: 20px; }
.deck-msg p { margin: 0; color: var(--ink-2); font-size: 14px; max-width: 40ch; line-height: 1.5; }
.msg-actions { display: grid; gap: 10px; justify-items: center; margin-top: 4px; }

/* controls */
.controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; }
.swipe-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 999px;
  border: 1.5px solid var(--line-strong);
  background: var(--surface-1); color: var(--ink);
  font-size: 14.5px; font-weight: 620;
  transition: transform .12s ease, border-color .15s ease, color .15s ease;
}
.swipe-btn svg { width: 18px; height: 18px; }
.swipe-btn:hover { transform: translateY(-2px); }
.swipe-btn:active { transform: translateY(0) scale(.97); }
.swipe-btn.pass:hover { border-color: var(--bad-ink); color: var(--bad-ink); }
.swipe-btn.add { border-color: rgba(57,135,229,.5); }
.swipe-btn.add:hover { border-color: var(--accent); color: var(--accent); }
.swipe-btn[disabled] { opacity: .35; pointer-events: none; }

.deck-hint { text-align: center; color: var(--ink-muted); font-size: 12px; margin: 14px 0 0; }
kbd { font: inherit; font-size: 11px; background: var(--surface-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px; }

/* ============================== dialogs ============================== */

.sheet { border: 0; padding: 0; background: transparent; max-width: 100%; max-height: 100%; }
.sheet::backdrop { background: rgba(6,6,6,.74); backdrop-filter: blur(4px); }

.sheet-inner {
  width: min(94vw, 470px); max-height: 88dvh;
  display: flex; flex-direction: column;
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink);
}
.sheet.wide .sheet-inner { width: min(94vw, 620px); }

.sheet-head { display: flex; align-items: center; gap: 12px; padding: 15px 14px 12px 20px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { margin: 0; font-size: 18px; }
.head-note { font-size: 12px; color: var(--ink-muted); margin-left: auto; text-align: right; }
.sheet-head .icon-btn { margin-left: 4px; }
.sheet-body { padding: 18px 20px 22px; overflow-y: auto; }
.sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }

.field + .field { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.field h3 { margin: 0 0 5px; font-size: 14.5px; }
.hint { margin: 0 0 11px; font-size: 12.5px; color: var(--ink-2); }

input[type="search"] {
  width: 100%; font: inherit; font-size: 14px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink);
}
input[type="search"]::placeholder { color: var(--ink-muted); }

.search-results { display: grid; gap: 4px; margin-top: 8px; }
.search-hit {
  display: flex; gap: 10px; align-items: baseline;
  padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  text-align: left; font-size: 13.5px;
}
.search-hit:hover { border-color: var(--accent); }
.search-hit b { min-width: 54px; }
.search-hit span { color: var(--ink-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-size: 12.5px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink-2);
}
.chip[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: #06152a; font-weight: 640; }

.switch { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-2); margin-bottom: 10px; cursor: pointer; }
.switch input { width: 17px; height: 17px; accent-color: var(--accent); }

/* cart */
.cart-list { display: grid; gap: 12px; }
.cart-item { border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px; background: var(--surface-2); }
.ci-head { display: flex; align-items: flex-start; gap: 12px; }
.ci-id { min-width: 0; }
.ci-ticker { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.ci-name { display: block; font-size: 12px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-prices { margin-left: auto; text-align: right; }
.ci-now { display: block; font-size: 15px; font-weight: 620; font-variant-numeric: tabular-nums; }
.ci-meta { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-muted); }
.ci-note {
  width: 100%; margin-top: 9px; resize: vertical;
  font: inherit; font-size: 12.5px;
  padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface-1); color: var(--ink);
}
.ci-note::placeholder { color: var(--ink-muted); }

.empty-note { color: var(--ink-muted); font-size: 13.5px; text-align: center; padding: 22px 10px; line-height: 1.55; margin: 0; }

/* ============================== the score ==============================
   One hue on purpose. The arc length and the number carry the magnitude; the
   word underneath carries the tier. Colouring the ring red or green would
   turn a description of the last filing into a buy/sell signal. */

.score-box {
  margin-left: auto; flex: none;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: help;
}
.score-ring { position: relative; width: 44px; height: 44px; }
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.score-ring circle { fill: none; stroke-width: 4.5; stroke-linecap: round; }
.score-ring .sr-track { stroke: var(--surface-3); }
.score-ring .sr-arc { stroke: var(--accent); transition: stroke-dashoffset .7s cubic-bezier(.22,1,.36,1); }
.score-ring .sr-num {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.sr-label {
  font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-muted); text-align: center; max-width: 74px; line-height: 1.25;
}
.score-ring.tone-none .sr-arc { stroke: var(--surface-3); }

.score-ring.is-big { width: 82px; height: 82px; }
.score-ring.is-big circle { stroke-width: 5; }
.score-ring.is-big .sr-num { font-size: 27px; }

.score-detail { }
.score-head { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.score-head .score-box { margin-left: 0; }
.score-head .sr-label { font-size: 10.5px; max-width: 96px; }
.score-blurb p { margin: 0; font-size: 12.8px; color: var(--ink-2); line-height: 1.5; }

.factor-list { display: grid; gap: 10px; }
.factor-row { display: grid; grid-template-columns: minmax(96px, 150px) 1fr 30px; align-items: center; gap: 11px; }
.factor-label { min-width: 0; }
.fl-name { display: block; font-size: 12.5px; color: var(--ink); }
.fl-blurb { display: block; font-size: 10.5px; color: var(--ink-muted); line-height: 1.3; }
.factor-meter { height: 8px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.factor-fill { height: 100%; width: 0; border-radius: 4px; background: var(--accent); transition: width .7s cubic-bezier(.22,1,.36,1); }
.factor-val { font-size: 12px; text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.factor-row.is-na .factor-val { color: var(--ink-muted); }

@media (max-width: 430px) {
  .factor-row { grid-template-columns: 92px 1fr 28px; }
  .fl-blurb { display: none; }
}

/* ============================ detail sheet ============================ */

.more-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 22px;
  padding: 12px 16px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface-2);
  color: var(--ink); font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.more-btn:hover { border-color: var(--accent); color: var(--accent); }
.more-btn svg { width: 17px; height: 17px; }

.sheet.full .sheet-inner { width: min(96vw, 860px); max-height: 94dvh; }

.detail-head { align-items: center; gap: 14px; padding: 14px 14px 12px 20px; }
.dh-id { min-width: 0; }
.dh-id h2 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
.dh-id p { margin: 1px 0 0; font-size: 12.5px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-price { margin-left: auto; text-align: right; }
.dh-price #detailPrice { display: block; font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; }

.detail-foot {
  display: flex; gap: 12px; justify-content: center;
  padding: 14px 20px; border-top: 1px solid var(--line);
  background: var(--surface-1);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ------------------------------ chart ------------------------------ */

.range-toggle { display: flex; gap: 7px; margin-bottom: 12px; }
.range-toggle .chip.is-on { background: var(--accent); border-color: var(--accent); color: #06152a; font-weight: 640; }

.chart-wrap { position: relative; }
.pricechart { width: 100%; height: auto; display: block; overflow: visible; }
.pricechart .grid { stroke: var(--surface-3); stroke-width: 1; }
.pricechart .axis { fill: var(--ink-muted); stroke: none; font-size: 11px; font-family: var(--font); }
.pricechart .area { fill: rgba(57,135,229,.13); stroke: none; }
.pricechart .line { stroke: var(--accent); stroke-width: 2; fill: none; }
.pricechart .crosshair { stroke: var(--ink-muted); stroke-width: 1; stroke-dasharray: 3 3; transition: opacity .12s; }
.pricechart .cursor-dot { fill: var(--accent); stroke: var(--surface-1); stroke-width: 2; transition: opacity .12s; }

.chart-tip {
  position: absolute; top: 2px; transform: translateX(-50%);
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 9px; pointer-events: none;
  font-size: 12px; white-space: nowrap; display: flex; gap: 8px; align-items: baseline;
}
.chart-tip span { color: var(--ink-muted); }

.chart-caption {
  display: flex; justify-content: space-between; align-items: center;
  margin: 8px 0 0; font-size: 11.5px; color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* --------------------------- financials --------------------------- */

.table-scroll { overflow-x: auto; margin-top: 10px; }
.fin-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 460px; }
.fin-table th, .fin-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-table thead th { font-size: 11px; letter-spacing: .05em; color: var(--ink-muted); font-weight: 600; text-transform: uppercase; }
.fin-table tbody th { text-align: left; font-weight: 450; color: var(--ink-2); }
.fin-table tr.is-derived th, .fin-table tr.is-derived td { font-style: italic; color: var(--ink-muted); }
.fin-table tr.is-derived td { color: var(--ink-2); }
.fin-note { margin: 11px 0 0; font-size: 12.5px; color: var(--ink-2); border-left: 2px solid var(--accent); padding-left: 11px; }

/* ---------------------------- analysts ---------------------------- */

.rec-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.rec-key { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); }
.rec-chip { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* diverging: two poles either side of a neutral hold */
.rec-sb .rec-chip, .rec-seg.rec-sb { background: #184f95; }
.rec-b  .rec-chip, .rec-seg.rec-b  { background: #3987e5; }
.rec-h  .rec-chip, .rec-seg.rec-h  { background: #7a7973; }
.rec-s  .rec-chip, .rec-seg.rec-s  { background: #e66767; }
.rec-ss .rec-chip, .rec-seg.rec-ss { background: #d03b3b; }

.rec-rows { display: grid; gap: 9px; }
.rec-row { display: grid; grid-template-columns: 62px 1fr 78px; align-items: center; gap: 10px; }
.rec-period, .rec-total { font-size: 11.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.rec-total { text-align: right; }
.rec-bar { display: flex; height: 20px; border-radius: 5px; overflow: hidden; gap: 2px; background: var(--surface-3); }
.rec-seg {
  display: grid; place-items: center;
  font-size: 11px; font-weight: 650; color: #f4f4f2;
  min-width: 3px;
}

/* ========================= static company pages =========================
   Server-rendered pages that share the app's tokens but read like documents
   rather than a deck. */

body.docpage { display: block; }
body.docpage .topbar { position: static; }
body.docpage .brand { text-decoration: none; color: inherit; }
body.docpage .ghost-btn { text-decoration: none; }

.doc {
  display: block;
  max-width: 780px;
  margin: 0 auto;
  padding: 26px clamp(16px, 4vw, 28px) 50px;
}

.crumbs { font-size: 12.5px; color: var(--ink-muted); margin-bottom: 16px; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span { margin: 0 5px; }

.doc h1 { font-size: clamp(26px, 5vw, 34px); letter-spacing: -0.025em; margin: 0 0 4px; line-height: 1.15; }
.h1-ticker { color: var(--ink-muted); font-weight: 500; }
.doc-sub { margin: 0 0 22px; color: var(--ink-2); font-size: 14px; }
.doc h2 {
  font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 600;
  margin: 34px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.doc h2 .count { color: var(--line-strong); font-weight: 500; }
.doc-lead { font-size: 14.5px; color: var(--ink-2); margin: 0 0 6px; }

.doc-hero {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 20px;
}
.hero-price { display: flex; flex-direction: column; gap: 3px; }
.hero-num { font-size: 34px; font-weight: 680; letter-spacing: -0.03em; line-height: 1; }
.hero-asof { font-size: 11.5px; color: var(--ink-muted); }
.hero-score { display: flex; align-items: center; gap: 12px; }
.hero-score-num {
  font-size: 34px; font-weight: 700; letter-spacing: -0.03em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.hero-score-lab { font-size: 13px; color: var(--ink-2); line-height: 1.35; }
.hero-score-lab .muted { color: var(--ink-muted); font-size: 11.5px; }

.doc-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.doc-list li { font-size: 14.5px; line-height: 1.5; }
.doc-list.pro li::marker { color: var(--good-ink); }
.doc-list.con li::marker { color: var(--bad-ink); }
.doc-list.risk li { font-size: 13.5px; color: var(--ink-2); }
.doc-list.risk li::marker { color: var(--bad-ink); }

.doc-quote {
  font-size: 14px; color: var(--ink-2); line-height: 1.6;
  background: var(--surface-1); border-left: 2px solid var(--accent);
  padding: 14px 16px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 0;
}

.doc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.doc-table th, .doc-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.doc-table td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 550; }
.doc-table th { font-weight: 450; color: var(--ink-2); }
.doc-table.factor-table th { line-height: 1.3; }
.doc-table.factor-table .fl-blurb { display: block; }
.doc-table.list th a { color: var(--ink); text-decoration: none; }
.doc-table.list th a:hover b { color: var(--accent); }
.doc-table.list th span { display: block; font-size: 12px; color: var(--ink-muted); }
.doc-table.list thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); }
.doc-table.list thead th:not(:first-child) { text-align: right; }

.doc-cta { margin: 30px 0 10px; }
.doc-cta .primary-btn { display: inline-block; text-decoration: none; }

.peer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.peer {
  display: block; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface-1);
  text-decoration: none; color: var(--ink);
}
.peer:hover { border-color: var(--accent); }
.peer b { display: block; font-size: 14px; }
.peer span { display: block; font-size: 11.5px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sector-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.sector-nav a {
  font-size: 12.5px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface-2);
  color: var(--ink-2); text-decoration: none;
}
.sector-nav a:hover { border-color: var(--accent); color: var(--accent); }

/* ============================== footer ============================== */

.sitefoot { border-top: 1px solid var(--line); padding: 18px clamp(12px, 3vw, 26px) 26px; font-size: 12.5px; color: var(--ink-2); text-align: center; }
.sitefoot p { margin: 0 auto 5px; max-width: 72ch; }
.sitefoot .muted { color: var(--ink-muted); }

/* ============================== responsive ============================== */

@media (max-width: 700px) {
  .topbar { flex-wrap: wrap; gap: 9px 12px; }
  .topmeta { order: 3; width: 100%; margin: 0; justify-content: center; }
  .topbar-actions { margin-left: auto; }
  .ghost-btn { max-width: 150px; }
  .deck { height: calc(100dvh - 268px); min-height: 400px; }
  .card-scroll { padding: 17px 16px 24px; }
  .c-price-v { font-size: 32px; }
  .swipe-btn { padding: 12px 18px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (forced-colors: active) {
  .card, .sheet-inner, .pc-col { border: 1px solid CanvasText; }
  .rangebar-fill, .rangebar-dot { forced-color-adjust: none; }
}

/* ============================================================== ACCOUNT ===
   The sign-in sheet. Deliberately plain: one field at a time, the explanation
   sitting above the input rather than after it, and no second column of
   marketing to read past. Someone here has already decided; the job is to get
   out of their way. */

.auth-step { display: flex; flex-direction: column; gap: 12px; }

.auth-blurb {
  margin: 0 0 4px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.55;
}
.auth-blurb b { color: var(--ink); font-weight: 600; }

.auth-label {
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.auth-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 16px;              /* 16px stops iOS zooming the page on focus */
}
.auth-input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(57, 135, 229, .22);
}
.auth-input.code {
  font: 600 24px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .38em;
  text-align: center;
  padding: 14px;
}
.auth-input.code::placeholder { letter-spacing: .38em; color: var(--ink-muted); opacity: .5; }

.primary-btn.wide, .ghost-btn.wide { width: 100%; max-width: none; justify-content: center; }
#dlgOwner .sheet-body > button + button { margin-top: 10px; }

.auth-fine {
  margin: 2px 0 0;
  color: var(--ink-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.auth-error {
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(229, 83, 83, .35);
  border-left-width: 3px;
  border-radius: 8px;
  background: rgba(229, 83, 83, .08);
  color: #ffb4b4;
  font-size: 13.5px;
}

/* Sync status in the cart header. Quiet by default — it only earns attention
   when a write did not land. */
.sync-note {
  font-size: 12px;
  color: var(--ink-muted);
  white-space: nowrap;
}
.sync-note.is-warn { color: #e9a23b; }

@media (max-width: 420px) {
  .sync-note { display: none; }
}

/* "or" divider on the sign-in sheet — the link is the main path, the code is
   the fallback, and the rule makes that hierarchy visible without a heading. */
.auth-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 0;
  color: var(--ink-muted);
  font-size: 12.5px;
}
.auth-or::before, .auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* While we are still working out whether someone is signed in. Quieter than
   the signed-out state so it does not read as a call to action. */
.ghost-btn.is-pending { opacity: .6; pointer-events: none; }

/* --------------------------------------------- cart layout at phone width
   Two things went wrong once the cart had real content in it. The header
   crushed "Your cart" onto two lines to make room for the summary beside it,
   and a long delta like "+16.9% since you added it" wrapped so the arrow was
   orphaned on its own line. Both only appeared with three items and real
   numbers in them, which is why an empty cart looked fine. */

.sheet-head h2 { white-space: nowrap; }

.head-note {
  min-width: 0;          /* lets it shrink instead of shoving the title */
  flex: 1 1 auto;
  line-height: 1.35;
}

/* Keep the price and its change on one line each, and let the company name
   take whatever room is left rather than the other way round. */
.ci-prices { flex: 0 0 auto; white-space: nowrap; }
.ci-prices .delta { justify-content: flex-end; }
.ci-id { flex: 1 1 auto; }

@media (max-width: 460px) {
  /* Below this the summary and the title genuinely cannot share a row. Stack
     them instead of letting the browser hyphenate the title. */
  .sheet-head { flex-wrap: wrap; row-gap: 2px; }
  .sheet-head h2 { flex: 1 1 auto; }
  .sheet-head .icon-btn { order: 2; margin-left: auto; }
  .head-note { order: 3; flex-basis: 100%; text-align: left; margin-left: 0; }

  /* The delta reads better under the price than squeezed beside the ticker. */
  .ci-prices .delta { font-size: 12px; }
  .ci-name { max-width: 40vw; }
}

/* ====================================================== layout revisions ===
   Three things the full-resolution screenshots made obvious.
   ========================================================================= */

/* 1. The score is the most interesting thing on the card and it was the
      smallest element on it. Bigger ring, bigger number, same corner. */
.score-ring { width: 58px; height: 58px; }
.score-ring circle { stroke-width: 5; }
.score-ring .sr-num { font-size: 20px; }

/* 2. Counts on the pros and cons headings, so "6 for, 1 against" reads at a
      glance instead of having to be counted. The count sits in muted ink
      rather than the section colour: the coloured glyph beside it already
      carries which side this is, and repeating that in the number would make
      the badge compete with the lines underneath. */
.pc-col h3 { display: flex; align-items: center; gap: 7px; }
.pc-count {
  margin-left: auto;
  min-width: 19px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.pc-more {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--ink-muted);
}

/* 3. The header carried brand, filter, sign-in, cart, deck position and data
      age. On a phone that wrapped to two full-weight rows and ate the top of
      the card. The buttons stay; the two status figures drop to a hairline
      that reads as caption rather than chrome. */
@media (max-width: 700px) {
  .topbar { padding-block: 9px; gap: 8px 10px; }
  .topmeta {
    order: 3; width: 100%; margin: 0;
    justify-content: flex-start;
    font-size: 11px;
    opacity: .72;
  }
  .ghost-btn { max-width: 132px; }
  /* the deck gains back what the header gave up */
  .deck { height: calc(100dvh - 236px); }
}

@media (max-width: 380px) {
  /* At this width the wordmark and three buttons genuinely do not fit. The
     logo alone still identifies the site, and the buttons are what people
     came to press. */
  .brand span { display: none; }
}

/* ============================================== allowance and the wall ===
   The count sits beside the data age rather than in the card, so it is
   available without ever competing with the numbers someone is reading. */

.allowance {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
  color: var(--ink-muted);
}
.allowance.is-low { color: var(--warning); }

/* A locked card carries no data at all: no blurred text to lift out of the
   DOM, no invented numbers. Just the shape of a card and a lock. */
.card.is-locked {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(135deg,
      var(--surface-1) 0 14px, var(--surface-2) 14px 28px);
}
.lock-mark {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--line);
  position: relative;
  opacity: .55;
}
.lock-mark::before {
  content: "";
  position: absolute; inset: 0;
  margin: auto;
  width: 15px; height: 12px;
  border-radius: 2px;
  background: var(--ink-muted);
  transform: translateY(3px);
}
.lock-mark::after {
  content: "";
  position: absolute; inset: 0;
  margin: auto;
  width: 15px; height: 15px;
  border: 2.5px solid var(--ink-muted);
  border-radius: 50% 50% 0 0;
  border-bottom: 0;
  transform: translateY(-6px) scale(.62);
}

/* ============================================================ SECOND LOOK ===
   The figures added beside the score: grouped numbers, the sector view, the
   street's line on the card, and the sections they grew in the detail sheet. */

.stat-group-h { margin: 14px 0 6px; font-size: 11.5px; color: var(--ink-muted); font-weight: 600; letter-spacing: .02em; }
.c-block > .stat-group-h:nth-child(2) { margin-top: 2px; }
.stat[title] { cursor: help; }
.block-note.first { margin-top: 0; margin-bottom: 10px; }

/* where it sits in its sector */
.vs-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.vs-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.15fr); align-items: center; gap: 10px;
  background: var(--surface-1); padding: 8px 11px;
}
.vs-l, .vs-r { display: flex; flex-direction: column; min-width: 0; }
.vs-r { text-align: right; }
.vs-label { font-size: 12.5px; color: var(--ink-2); }
.vs-med, .vs-rank { font-size: 11px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-val { font-size: 14px; font-weight: 620; font-variant-numeric: tabular-nums; }
.vs-meter { position: relative; height: 4px; border-radius: 999px; background: var(--surface-3); }
.vs-meter::after { content: ""; position: absolute; left: 50%; top: -3px; width: 1px; height: 10px; background: var(--line-strong); }
.vs-dot {
  position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--surface-1); z-index: 1;
}

/* the street, on the card */
.street-bar { height: 20px; margin-bottom: 8px; }
.street-line { margin: 5px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }

/* next report, in the detail sheet */
.nr-head { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); }
.nr-head b { color: var(--ink); }
.next-report .c-stats + .block-note { margin-top: 9px; }
.next-report .link-btn { margin-top: 8px; display: inline-block; }

/* peers */
.peer-table td, .peer-table thead th { text-align: right; }
.peer-table tbody th { white-space: nowrap; }
.peer-table tr.is-self th, .peer-table tr.is-self td { color: var(--ink); font-weight: 650; }
.peer-table .link-btn { font-size: 13px; padding: 0; font-weight: 600; }

/* news */
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.news-h { display: block; color: var(--ink); text-decoration: none; font-size: 13.5px; line-height: 1.4; }
.news-h:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.news-meta { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-muted); }

/* ========================================================== EARNINGS ===== */

.notice {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px clamp(12px, 3vw, 26px);
  background: rgba(250, 178, 25, .08);
  border-bottom: 1px solid rgba(250, 178, 25, .28);
  font-size: 13px; color: var(--ink-2);
}
.notice > svg { width: 16px; height: 16px; color: var(--warning); flex: none; }
.notice #earnNoticeText { flex: 1 1 auto; min-width: 0; }
.notice .link-btn { font-size: 13px; padding: 0; }

.ci-meta.is-soon { color: var(--warning); }

.earn-list { display: grid; gap: 10px; }
.earn-list .block-h { margin-top: 6px; }
.earn-row {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px;
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; background: var(--surface-2);
}
.earn-row.is-soon { border-color: rgba(250, 178, 25, .45); }
.er-when { display: flex; flex-direction: column; font-size: 11.5px; color: var(--ink-muted); }
.er-when b { font-size: 13.5px; color: var(--ink); font-weight: 650; }
.earn-row.is-soon .er-when span:first-of-type { color: var(--warning); }
.er-head { margin: 0; font-size: 13px; color: var(--ink-2); }
.er-ticker { font-size: 15px; font-weight: 700; padding: 0; text-decoration: none; color: var(--ink); }
.er-ticker:hover { color: var(--accent); }
.er-expect { margin: 4px 0 0; font-size: 13px; color: var(--ink); }
.er-track { margin: 3px 0 0; font-size: 12px; color: var(--ink-muted); }
.er-track:empty { display: none; }

.earn-alerts { margin-top: 22px; }
.earn-alerts .switch { align-items: flex-start; margin-bottom: 4px; }
.earn-alerts .switch input { margin-top: 2px; flex: none; }
.earn-alerts .block-note { margin-top: 2px; }
.earn-alerts .block-note .link-btn { font-size: 11.5px; padding: 0; }
.earn-cal { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.earn-cal .ghost-btn { max-width: none; }
.earn-cal .block-note { margin: 0; flex: 1 1 200px; }

@media (max-width: 480px) {
  .earn-row { grid-template-columns: 1fr; gap: 6px; }
  .er-when { flex-direction: row; gap: 8px; flex-wrap: wrap; align-items: baseline; }
}

/* ========================================================= BROKERAGE ===== */

.broker-panel { margin-bottom: 14px; }
.broker-panel:empty { display: none; }
.bp-line { margin: 0; font-size: 12.5px; }
.bp-line.muted { color: var(--ink-muted); padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 12px; }
.bp-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2);
}
.broker-panel.is-connected .bp-row { border-color: rgba(57, 135, 229, .45); }
.broker-panel.is-live .bp-row { border-color: rgba(230, 103, 103, .55); }
.bp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-muted); flex: none; }
.bp-dot.is-on { background: var(--good-ink); box-shadow: 0 0 0 3px rgba(76, 201, 76, .18); }
.broker-panel.is-live .bp-dot.is-on { background: var(--bad-ink); box-shadow: 0 0 0 3px rgba(230, 103, 103, .2); }
.bp-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bp-text b { font-size: 13.5px; }
.bp-text span { font-size: 12px; color: var(--ink-muted); }
.bp-row .primary-btn { padding: 8px 16px; font-size: 13.5px; }

/* dollar amounts in the cart */
.money-in {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface-1);
  padding: 0 8px; color: var(--ink-muted); font-size: 13.5px;
}
.money-in:focus-within { border-color: var(--accent); }
.money-in input {
  width: 92px; border: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; padding: 7px 2px;
  -moz-appearance: textfield;
}
.money-in input:focus { outline: none; }
.money-in input::-webkit-outer-spin-button, .money-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ci-amount { display: flex; align-items: center; gap: 9px; margin-top: 9px; flex-wrap: wrap; }
.ci-amt-label { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
.ci-est, .ci-held { font-size: 11.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ci-held { margin-left: auto; color: var(--ink-2); }

.order-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding: 12px 13px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-2);
}
.ob-total { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.ob-label { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
.ob-total b { font-size: 17px; }
.ob-bp { font-size: 12px; color: var(--ink-muted); }
.ob-bp.is-over { color: var(--bad-ink); }
.ob-split { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-muted); }
.ob-split .money-in input { width: 70px; }
.ob-split .ghost-btn { padding: 6px 11px; font-size: 12.5px; }
.order-bar .primary-btn { margin-left: auto; }
.primary-btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; }

/* connect sheet */
.env-pick { border: 0; padding: 0; margin: 4px 0 14px; display: grid; gap: 8px; }
.env-pick legend { margin-bottom: 8px; padding: 0; }
.env-opt {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
  font-size: 13.5px; color: var(--ink-2);
}
.env-opt:has(input:checked) { border-color: var(--accent); }
.env-opt input { margin-top: 3px; accent-color: var(--accent); }
.env-opt b { color: var(--ink); margin-right: 6px; }
.env-opt.is-disabled { opacity: .5; cursor: not-allowed; }
.oauth-btn { display: flex; justify-content: center; text-decoration: none; margin-bottom: 4px; }
.auth-input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14.5px; letter-spacing: .02em; }
#brokerConnect .auth-or { margin: 12px 0; }

.acct-grid { margin-bottom: 4px; }
.acct-h { margin-top: 22px; }
.acct-table td, .acct-table thead th { text-align: right; white-space: nowrap; }
.acct-table td:first-of-type { text-align: left; }
.acct-table .link-btn { font-size: 12.5px; padding: 0; }
.ord-status { text-transform: capitalize; }
.ord-status.is-filled { color: var(--good-ink); }
.ord-status.is-rejected, .ord-status.is-canceled, .ord-status.is-expired { color: var(--ink-muted); }

/* order review */
.order-list { display: grid; gap: 8px; margin-top: 14px; }
.order-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2);
}
.order-row.is-ok { border-color: rgba(76, 201, 76, .45); }
.order-row.is-bad { border-color: rgba(230, 103, 103, .5); }
.or-id { display: flex; flex-direction: column; min-width: 0; }
.or-id b { font-size: 15px; }
.or-id span { font-size: 11.5px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.or-what { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.or-sub { font-size: 11.5px; font-weight: 400; color: var(--ink-muted); }
.or-err { font-size: 12.5px; font-weight: 500; color: var(--bad-ink); text-align: right; }
.or-lim { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 400; color: var(--ink-muted); }
.or-lim input {
  width: 84px; font: inherit; font-size: 13px; padding: 4px 6px; border-radius: 7px;
  border: 1px solid var(--line-strong); background: var(--surface-1); color: var(--ink); text-align: right;
}
.or-result { grid-column: 1 / -1; font-size: 12.5px; }
.or-warn { color: var(--warning); text-align: right; max-width: 34ch; }
.or-lim input:disabled, #orderType .chip:disabled { opacity: .55; cursor: not-allowed; }
.ci-sent { color: var(--good-ink, var(--ink-2)); }
.link-btn.danger.is-armed { font-weight: 700; text-decoration: underline; }
.confirm-live { margin-top: 14px; padding: 10px 12px; border: 1px solid rgba(230, 103, 103, .5); border-radius: 10px; }
#dlgOrders .sheet-foot .ob-total b { font-size: 18px; }

@media (max-width: 480px) {
  .vs-row { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1.2fr); gap: 8px; padding: 8px 9px; }
  .order-bar .primary-btn { width: 100%; margin-left: 0; }
  .ci-held { margin-left: 0; width: 100%; }
}

/* A group with fewer figures than columns used to show the grid's line colour
   through the empty cells as grey blocks. Draw each cell's rule on the cell
   instead, in a solid colour so overlapping edges do not double up. */
.c-stats { background: var(--surface-1); }
.c-stats .stat { box-shadow: 0 0 0 1px #30302e; }

/* Long carts: keep the total and the button that acts on it in reach. */
#dlgCart .order-bar {
  position: sticky; bottom: -22px; z-index: 2;
  box-shadow: 0 -12px 24px rgba(0, 0, 0, .45);
}
#dlgOrders .sheet-foot {
  position: sticky; bottom: -22px; z-index: 2;
  background: var(--surface-1); padding-bottom: 14px;
  box-shadow: 0 -12px 20px rgba(0, 0, 0, .35);
}

/* A long company name in a nowrap line was setting the cart column's minimum
   width, which pushed every row past the sheet's edge at phone width. */
.cart-list { grid-template-columns: minmax(0, 1fr); }
.cart-item { min-width: 0; }

/* How the score treated this company: negative equity, losses, sector rank. */
.score-notes { margin: 8px 0 0; padding-left: 16px; display: grid; gap: 4px; }
.score-notes li { font-size: 12px; color: var(--ink-muted); line-height: 1.45; }