:root {
  --bg: #08090c;
  --bg-elev: #101318;
  --bg-elev-2: #161a21;
  --line: #21262f;
  --line-soft: #1a1e25;
  --text: #e9edf3;
  --text-dim: #99a3b2;
  --text-faint: #6b7482;
  --up: #2ee08a;
  --up-soft: rgba(46, 224, 138, 0.12);
  --down: #ff5d6c;
  --down-soft: rgba(255, 93, 108, 0.12);
  --flat: #8b93a1;
  --accent: #6c8cff;
  --shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
  --radius: 14px;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Compare-mode pens (6.2). Categorical and deliberately NOT the up/down
     palette — five overlaid lines are five tickers, not five verdicts, and
     borrowing red/green here would read as five opinions. Chosen to stay
     distinguishable for the common forms of colour blindness. */
  --c1: #6c8cff;
  --c2: #ffb454;
  --c3: #4dd4c4;
  --c4: #d98bff;
  --c5: #9aa6b8;
}

html[data-theme='light'] {
  --bg: #f5f6f9;
  --bg-elev: #ffffff;
  --bg-elev-2: #f2f4f8;
  --line: #e2e6ee;
  --line-soft: #eaedf3;
  --text: #10141b;
  --text-dim: #5a6474;
  --text-faint: #8a93a2;
  --up: #0f9d58;
  --up-soft: rgba(15, 157, 88, 0.12);
  --down: #d92b3a;
  --down-soft: rgba(217, 43, 58, 0.1);
  --flat: #7b8494;
  --accent: #3b5bdb;
  --shadow: 0 14px 34px -24px rgba(15, 22, 40, 0.5);
}

* {
  box-sizing: border-box;
}

/* A layout `display` beats the UA rule for [hidden], which silently turns every
   hidden="" into a no-op. Anything given a display value below needs this. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  padding: 0 clamp(14px, 3vw, 34px) 60px;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.glow {
  position: fixed;
  inset: -30% -10% auto -10%;
  height: 60vh;
  background:
    radial-gradient(50% 60% at 20% 0%, rgba(108, 140, 255, 0.13), transparent 70%),
    radial-gradient(40% 60% at 80% 10%, rgba(46, 224, 138, 0.09), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Lift page content above .glow — but leave anything deliberately fixed
   (the modals, the toast stack, the command palette) to its own positioning.
   Anything new that needs position: fixed must be added to this list. */
body > *:not(.glow):not(.modal):not(.toasts):not(.palette) {
  position: relative;
  z-index: 1;
}

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

.muted {
  color: var(--text-faint);
}

/* ------------------------------------------------------------------ topbar */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 22px 0 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
}

.brand h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.brand-sub {
  margin: 1px 0 0;
  font-size: 12.5px;
  color: var(--text-faint);
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--bg-elev-2), var(--bg-elev));
  border: 1px solid var(--line);
}

.brand-mark svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: var(--up);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.status-cluster {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.market-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  font-size: 12.5px;
  font-weight: 550;
  color: var(--text-dim);
}

.market-status .pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--flat);
}

.market-status[data-state='open'] {
  color: var(--up);
  border-color: color-mix(in srgb, var(--up) 32%, var(--line));
}
.market-status[data-state='open'] .pip {
  background: var(--up);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 60%, transparent);
  animation: pulse 2.4s ease-out infinite;
}
.market-status[data-state='pre'],
.market-status[data-state='after'] {
  color: #f0b429;
  border-color: rgba(240, 180, 41, 0.32);
}
.market-status[data-state='pre'] .pip,
.market-status[data-state='after'] .pip {
  background: #f0b429;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.refresh {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}

.icon-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, transform 0.15s;
}

.icon-btn:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.icon-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn.is-spinning svg {
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  color: var(--text-faint);
  user-select: none;
}

.switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch .track {
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  padding: 2px;
  transition: background 0.18s, border-color 0.18s;
}

.switch .thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-faint);
  transition: transform 0.18s, background 0.18s;
}

.switch input:checked + .track {
  background: color-mix(in srgb, var(--up) 22%, transparent);
  border-color: color-mix(in srgb, var(--up) 45%, var(--line));
}

.switch input:checked + .track .thumb {
  transform: translateX(14px);
  background: var(--up);
}

.switch input:focus-visible + .track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- index strip */

.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.index-tile {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  border-radius: 12px;
  padding: 10px 13px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: 82px;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.16s;
}

.index-tile:hover {
  border-color: color-mix(in srgb, var(--tone, var(--flat)) 45%, var(--line));
}

.idx-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.index-tile .idx-label {
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.index-tile .idx-price {
  font-family: var(--mono);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.index-tile .idx-delta {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.index-tile .spark {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  opacity: 0.6;
  margin: 0;
}

/* ----------------------------------------------------------------- toolbar */

.toolbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0 12px;
  margin-bottom: 6px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.search {
  position: relative;
  flex: 1 1 240px;
  max-width: 340px;
  display: flex;
  align-items: center;
}

.search svg {
  position: absolute;
  left: 11px;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 2;
  stroke-linecap: round;
}

.search input {
  width: 100%;
  padding: 9px 12px 9px 33px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}

.search input::placeholder {
  color: var(--text-faint);
}

.search input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
}

.chips {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
}

.chip {
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 12.5px;
  font-weight: 550;
  padding: 5px 11px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, color 0.15s;
}

.chip svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chip:hover {
  color: var(--text);
}

.chip.is-active {
  background: var(--bg-elev-2);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line);
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.select select {
  appearance: none;
  padding: 8px 30px 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-elev)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888f9c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 9px center / 14px;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.select select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
}

/* ------------------------------------------------------------------- board */

.board {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-top: 10px;
}

.group {
  border-radius: 16px;
}

.group.is-empty {
  display: none;
}

.group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 2px 12px;
  width: 100%;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.group-head.static {
  cursor: default;
}

.group-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.group-title h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.group-blurb {
  font-size: 12.5px;
  color: var(--text-faint);
}

.group-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.count {
  font-size: 11.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.pill {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  background: var(--bg-elev-2);
  color: var(--flat);
}

.pill.up { background: var(--up-soft); color: var(--up); }
.pill.down { background: var(--down-soft); color: var(--down); }

.chev {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s;
}

.group.is-collapsed .chev { transform: rotate(-90deg); }
.group.is-collapsed .group-body { display: none; }

/* ------------------------------------------------------------- stock cards */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 10px;
}

.card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  border-radius: var(--radius);
  padding: 12px 13px 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 132px;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--tone, var(--flat)) 40%, var(--line));
  box-shadow: var(--shadow);
}

.card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.card::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--tone, var(--flat));
  opacity: 0.7;
}

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.ticker {
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.company {
  font-size: 11.5px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 132px;
  display: block;
}

.delta {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  padding: 3px 7px;
  border-radius: 7px;
  white-space: nowrap;
  background: var(--bg-elev-2);
  color: var(--flat);
}

.delta.up { background: var(--up-soft); color: var(--up); }
.delta.down { background: var(--down-soft); color: var(--down); }

.delta.is-pending {
  background: var(--bg-elev-2);
  color: var(--text-faint);
  animation: breathe 1.4s ease-in-out infinite;
}

@keyframes breathe {
  50% { opacity: 0.45; }
}

.price {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.price-sub {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- move context

   Context is information, not a verdict. It never takes --up or --down: a −3σ
   day is not "bad", and coloring it red would quietly turn the panel into
   advice. It stays in the neutral text tones so red and green keep meaning
   "the price went up or down" and nothing else. */

.ctx-cell:empty {
  display: none;
}

.ctx-badge {
  display: inline-block;
  max-width: 100%;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--text-dim);
  background: var(--bg-elev-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 2px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ctx-badge::before {
  content: '⚡';
  margin-right: 4px;
  opacity: 0.6;
}

.spark-cell {
  margin-top: auto;
}

.spark {
  width: 100%;
  height: 40px;
  display: block;
  overflow: visible;
}

.spark path.line {
  fill: none;
  stroke: var(--tone, var(--flat));
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.spark path.area { stroke: none; }

.spark line.base {
  stroke: var(--text-faint);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.45;
  vector-effect: non-scaling-stroke;
}

.card.flash-up { animation: flashUp 0.9s ease-out; }
.card.flash-down { animation: flashDown 0.9s ease-out; }

@keyframes flashUp {
  0% { background: color-mix(in srgb, var(--up) 14%, var(--bg-elev)); }
  100% { background: var(--bg-elev); }
}
@keyframes flashDown {
  0% { background: color-mix(in srgb, var(--down) 14%, var(--bg-elev)); }
  100% { background: var(--bg-elev); }
}

.card.is-error {
  opacity: 0.55;
  cursor: default;
}

.card.is-loading .price,
.card.is-loading .delta {
  color: transparent;
  background: linear-gradient(90deg, var(--bg-elev-2), var(--line), var(--bg-elev-2));
  background-size: 200% 100%;
  border-radius: 6px;
  animation: shimmer 1.3s linear infinite;
}

@keyframes shimmer {
  to { background-position: -200% 0; }
}

/* ------------------------------------------------------------- table view */

.board.view-table .cards {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elev);
}

.board.view-table .card {
  display: grid;
  width: 100%; /* a <button> is shrink-to-fit unless told otherwise */
  grid-template-columns: 86px minmax(0, 1fr) 120px 92px minmax(120px, 200px);
  align-items: center;
  gap: 14px;
  min-height: 0;
  padding: 8px 14px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
}

.board.view-table .card:last-child { border-bottom: 0; }
.board.view-table .card:hover { transform: none; box-shadow: none; background: var(--bg-elev-2); }
.board.view-table .card::after { display: none; }

/* Flatten the card's wrappers so its fields land in real table columns. */
.board.view-table .card-top,
.board.view-table .id-cell { display: contents; }

.board.view-table .ticker { order: 1; }
.board.view-table .company { order: 2; max-width: none; font-size: 12.5px; }
.board.view-table .price-cell { order: 3; text-align: right; }
.board.view-table .delta { order: 4; justify-self: stretch; text-align: center; }
.board.view-table .spark-cell { order: 5; margin: 0; }

.board.view-table .price { font-size: 14px; }
.board.view-table .price-sub { display: none; }
.board.view-table .spark { height: 28px; }

/* The table row has no space for the badge; the modal still carries it. */
.board.view-table .ctx-cell { display: none; }

@media (max-width: 720px) {
  .board.view-table .card { grid-template-columns: 74px minmax(0, 1fr) 92px; }
  .board.view-table .spark-cell,
  .board.view-table .company { display: none; }
}

/* -------------------------------------------------------------- dip radar */

.radar-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 0 0 14px;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
}

.radar-filter {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
}

.radar-filter output {
  font-family: var(--mono);
  font-weight: 650;
  color: var(--text);
}

.radar-filter input[type='range'] {
  width: 118px;
  accent-color: var(--accent);
}

.radar-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
}

.check input {
  accent-color: var(--accent);
}

.radar-note {
  flex-basis: 100%;
  margin: 0;
  font-size: 11.5px;
  color: var(--text-faint);
}

.radar {
  display: grid;
  gap: 8px;
}

.radar-row {
  position: relative;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
  overflow: hidden;
}

.radar-row::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--tone, var(--flat));
  opacity: 0.75;
}

.radar-open {
  flex: 1;
  display: grid;
  grid-template-columns: 62px minmax(120px, 200px) 118px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 11px 14px;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.radar-open:hover { background: var(--bg-elev-2); }
.radar-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* The σ figure is the ranking key, so it reads first — but stays neutral, since
   the size of a move is not a verdict on it. */
.radar-z {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.radar-id { display: grid; gap: 1px; min-width: 0; }

.radar-price {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
}

.radar-price .price { font-size: 14px; }

.radar-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  font-size: 11px;
  color: var(--text-faint);
  min-width: 0;
}

.radar-facts span {
  padding: 1px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: var(--bg-elev-2);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .radar-open { grid-template-columns: 52px minmax(0, 1fr) 96px; }
  .radar-facts { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------- portfolio */

.portfolio { display: grid; gap: 16px; }

.pf-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
}

.pf-stat { display: grid; gap: 2px; }
.pf-stat dt { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.pf-stat dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pf-stat dd.up { color: var(--up); }
.pf-stat dd.down { color: var(--down); }

.pf-table {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
  overflow: hidden;
}

.pf-head,
.pf-open {
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) 150px 110px minmax(150px, 1fr) 76px;
  gap: 14px;
  align-items: center;
  padding: 9px 15px;
}

.pf-head {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--line-soft);
}

.pf-row { position: relative; border-bottom: 1px solid var(--line-soft); }
.pf-row:last-child { border-bottom: 0; }
.pf-row::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--tone, var(--flat));
  opacity: 0.7;
}

.pf-open {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pf-open:hover { background: var(--bg-elev-2); }
.pf-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.pf-id { display: grid; gap: 1px; min-width: 0; }
.pf-qty,
.pf-value,
.pf-pl,
.pf-weight {
  font-family: var(--mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.pf-qty { color: var(--text-faint); }
.pf-weight { text-align: right; color: var(--text-dim); }
.pf-pl.up { color: var(--up); }
.pf-pl.down { color: var(--down); }

.pf-exposure,
.pf-closed {
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-elev-2);
}

.pf-bar {
  display: grid;
  grid-template-columns: minmax(110px, 180px) 1fr 52px;
  gap: 12px;
  align-items: center;
  margin-bottom: 7px;
  font-size: 12px;
  color: var(--text-dim);
}

.pf-bar-track {
  height: 7px;
  border-radius: 4px;
  background: var(--bg);
  overflow: hidden;
}

/* Neutral: concentration is a fact about the book, not a warning. */
.pf-bar-fill { display: block; height: 100%; background: var(--accent); opacity: 0.65; }
.pf-bar-pct { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.pf-note { margin: 10px 0 0; font-size: 11.5px; color: var(--text-faint); }

.pf-closed-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  padding: 4px 0;
  font-family: var(--mono);
}
.pf-closed-row .up { color: var(--up); }
.pf-closed-row .down { color: var(--down); }

@media (max-width: 860px) {
  .pf-head { display: none; }
  .pf-open { grid-template-columns: 1fr 1fr; gap: 6px 14px; }
}

/* ------------------------------------------------------------- record a trade */

.trade-panel {
  margin-top: 12px;
  padding: 12px 15px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--bg-elev-2);
}

.trade-toggle {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.trade-toggle:hover { text-decoration: underline; }
.trade-hint { font-weight: 400; color: var(--text-faint); }

.trade-form { display: grid; gap: 9px; margin-top: 11px; }
.trade-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.trade-at { color: var(--text-faint); font-size: 12px; }
#tradeQty, #tradePrice, #tradeFees { width: 92px; }
#tradeDate { width: 148px; }
.trade-thesis { width: 100%; resize: vertical; font-family: inherit; line-height: 1.45; }

.trade-actions { display: flex; align-items: center; gap: 11px; }
.trade-note { font-size: 11.5px; color: var(--text-faint); }
.trade-note.is-ok { color: var(--text-dim); }
.trade-note.is-bad { color: var(--down); }

.trade-holdings {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--text-faint);
}
.trade-holdings .ticker { font-size: 12.5px; color: var(--text); }
.trade-holdings .up { color: var(--up); }
.trade-holdings .down { color: var(--down); }

/* ------------------------------------------------------------------- journal */

.journal-filters { margin: 16px 0 12px; }
.journal-list { display: grid; gap: 10px; max-height: 60vh; overflow-y: auto; }

.jr-entry {
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--bg-elev-2);
}

/* Structural marks only — a journal entry is never good or bad. */
.jr-entry.is-due { border-left: 3px solid var(--accent); }
.jr-entry.is-reviewed { opacity: 0.82; }

.jr-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

.jr-symbol {
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  cursor: pointer;
}
.jr-symbol:hover { text-decoration: underline; }

.jr-when { font-size: 11.5px; color: var(--text-faint); }
.jr-since {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.jr-since.up { color: var(--up); }
.jr-since.down { color: var(--down); }

.jr-thesis {
  margin: 9px 0;
  padding-left: 11px;
  border-left: 2px solid var(--line);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

.jr-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 7px;
  align-items: center;
  font-size: 11px;
  color: var(--text-faint);
}
.jr-facts-label { letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.8; }
.jr-facts span:not(.jr-facts-label) {
  padding: 1px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: var(--bg-elev);
}

.jr-review { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line-soft); }
.jr-review-label {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.jr-review p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }

.jr-review-form { display: grid; gap: 7px; margin-top: 10px; }
.jr-review-form textarea {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.45;
  resize: vertical;
}
.jr-review-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.jr-review-form button { justify-self: start; }

/* ------------------------------------------------------------------- star */

.star,
.star-btn {
  border: 0;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  font: inherit;
  transition: color 0.14s ease;
}

.star {
  padding: 0 14px;
  font-size: 17px;
  line-height: 1;
}

.star:hover,
.star-btn:hover { color: var(--text); }
.star.is-on,
.star-btn.is-on { color: #f5c451; }

.star-btn {
  margin-top: 6px;
  padding: 3px 9px;
  font-size: 11.5px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg-elev-2);
}

/* ----------------------------------------------------------------- private */

.private {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}

.private-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 10px;
}

.private-card {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-elev) 60%, transparent);
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.private-card h3 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
}

.badge {
  align-self: flex-start;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--bg-elev-2);
  color: var(--text-faint);
  font-weight: 600;
}

.private-note {
  font-size: 12px;
  color: var(--text-faint);
  margin: 0;
}

.comps {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.comp {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--bg-elev-2);
  border: 0;
  color: var(--text-dim);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

.comp:hover { color: var(--text); }
.comp .cmp-delta { margin-left: 5px; }
.comp .cmp-delta.up { color: var(--up); }
.comp .cmp-delta.down { color: var(--down); }

/* ------------------------------------------------------------------ footer */

/* --------------------------------------------------------- alerts & toasts */

.icon-btn { position: relative; }

.badge-count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

.toasts {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: grid;
  gap: 8px;
  max-width: min(340px, calc(100vw - 36px));
}

.toast {
  display: grid;
  gap: 2px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg-elev);
  box-shadow: var(--shadow);
  font-size: 12.5px;
  animation: toastIn 0.22s ease-out;
}

.toast strong { font-weight: 620; }
.toast span { color: var(--text-faint); font-size: 11.5px; }
.toast.is-clickable { cursor: pointer; }
.toast.is-clickable:hover { border-color: var(--accent); }
.toast.is-leaving { opacity: 0; transition: opacity 0.6s ease; }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
}

.rule-form {
  display: grid;
  gap: 9px;
  margin: 16px 0 6px;
  padding: 13px 15px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--bg-elev-2);
}

.rule-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.text-input {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-family: var(--mono);
}

.text-input:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Fixed widths so the row doesn't wrap the submit button onto its own line. */
#ruleThreshold { width: 66px; }
#ruleSymbol { width: 88px; text-transform: uppercase; }
.rule-row .select select { font-size: 12px; }

.rule-preview {
  margin: 0;
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
}

.alert-section { margin-top: 18px; }
.alert-section .ctx-title { display: flex; align-items: center; justify-content: space-between; }

.chip.tiny { padding: 2px 7px; font-size: 10px; letter-spacing: 0.02em; text-transform: none; }
.icon-btn.tiny { width: 24px; height: 24px; }
.icon-btn.tiny svg { width: 13px; height: 13px; }

.rule-list { display: grid; gap: 6px; }

.rule {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: var(--bg-elev-2);
  font-size: 12.5px;
}

.rule.is-off { opacity: 0.5; }
.rule-text { flex: 1; color: var(--text-dim); }
.switch.tiny .track { width: 30px; height: 17px; }
.switch.tiny .thumb { width: 13px; height: 13px; }

.alert-history { display: grid; gap: 4px; max-height: 320px; overflow-y: auto; }

.alert-event {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: var(--bg-elev-2);
}

/* An unread alert is marked structurally, not by color — the same discipline as
   the context panel. Red here would read as "this is bad news". */
.alert-event.is-unseen { border-left: 3px solid var(--accent); }

.alert-open {
  flex: 1;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  padding: 8px 11px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 12.5px;
}

.alert-open:hover { background: var(--bg-elev); }
.alert-what { color: var(--text-dim); }
.alert-when { font-size: 11px; white-space: nowrap; }

.alert-since {
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.alert-since .up { color: var(--up); }
.alert-since .down { color: var(--down); }

.alert-foot { margin-top: 16px; font-size: 11.5px; }

.footer {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--text-faint);
  max-width: 760px;
}

.footer p { margin: 0 0 6px; }

/* ------------------------------------------------------------------- modal */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 18px;
}

.modal[hidden] { display: none; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 10, 0.66);
  backdrop-filter: blur(3px);
}

.modal-panel {
  position: relative;
  width: min(760px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 32px 70px -30px rgba(0, 0, 0, 0.85);
  animation: rise 0.18s ease-out;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding-right: 40px;
}

.modal-symbol {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}

.modal-head h3 {
  margin: 2px 0 2px;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.modal-head p { margin: 0; font-size: 12px; }

.modal-price { text-align: right; }

.price-lg {
  font-family: var(--mono);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.modal-ranges { margin: 16px 0 12px; }

.modal-chart {
  position: relative;
  height: 240px;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: var(--bg-elev-2);
  overflow: hidden;
}

.modal-chart svg { width: 100%; height: 100%; display: block; }

.modal-chart .grid-line {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.modal-chart .axis-text {
  fill: var(--text-faint);
  font-size: 10px;
  font-family: var(--mono);
}

.modal-chart .crosshair {
  stroke: var(--text-faint);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.chart-tip {
  position: absolute;
  pointer-events: none;
  padding: 6px 9px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  white-space: nowrap;
  transform: translate(-50%, -130%);
  opacity: 0;
  transition: opacity 0.1s;
}

.chart-tip.is-on { opacity: 1; }

/* ----------------------------------------------------- context panel (modal) */

.context-panel {
  margin-top: 16px;
  padding: 13px 15px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--bg-elev-2);
}

.ctx-title {
  margin: 0 0 10px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.ctx-sub {
  margin-left: 8px;
  font-weight: 450;
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.75;
}

.ctx-rows {
  margin: 0;
  display: grid;
  gap: 8px;
}

.ctx-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}

.ctx-row dt {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.ctx-row dd {
  margin: 0;
  display: grid;
  gap: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.ctx-line {
  display: block;
}

/* The figure that carries the row, lifted by weight rather than by hue. */
.ctx-em {
  font-style: normal;
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 620px) {
  .ctx-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* -------------------------------------------------------- headlines panel */

/* ------------------------------------------------- base rates (phase 5) */

/* Deliberately monochrome. Red and green are reserved for price direction, and
   a base rate coloured green-good would be advice wearing a statistic's coat. */
.baserate-panel {
  margin-top: 12px;
  padding: 13px 15px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--bg-elev-2);
}

.br-lede {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
}

.br-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.br-row > th,
.br-row > td {
  padding: 5px 8px 5px 0;
  text-align: left;
  border-top: 1px solid var(--line-soft);
  color: var(--text-dim);
  font-weight: 400;
}

.br-row > th {
  color: var(--text);
  font-weight: 600;
  width: 3.5em;
}

.br-median { color: var(--text); font-weight: 600; }
.br-range { white-space: nowrap; }
.br-n { text-align: right; white-space: nowrap; }

/* A thin sample is flagged rather than hidden — see roadmap phase 5. */
.br-row.is-thin > td { opacity: 0.62; }
.br-row.is-empty > td { font-style: italic; opacity: 0.62; }

.br-caveats {
  margin: 10px 0 0;
  padding: 0 0 0 15px;
  display: grid;
  gap: 3px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-faint, var(--text-dim));
  opacity: 0.85;
}

.news-panel {
  margin-top: 12px;
  padding: 13px 15px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--bg-elev-2);
}

.news-empty { margin: 0; font-size: 12.5px; }

.news-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.news-item {
  display: grid;
  gap: 2px;
  padding-left: 10px;
  border-left: 2px solid var(--line);
}

/* Anything published during today's session gets the marker — that's the set
   most likely to explain the move you're looking at. */
.news-item.is-today { border-left-color: var(--accent); }

.news-item a {
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.4;
  text-decoration: none;
}

.news-item a:hover { text-decoration: underline; }

.news-meta {
  font-size: 11px;
  color: var(--text-faint);
}

/* A market wrap is still an answer to "why did it move" — just a weaker one.
   Dimmed rather than hidden, so the company-specific stories read first. */
.news-item.is-broad a { color: var(--text-dim); }
.news-item.is-broad.is-today { border-left-color: var(--line); }
.news-broad { font-style: italic; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 16px 0 0;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
}

.stat {
  background: var(--bg-elev);
  padding: 10px 12px;
}

.stat dt {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 3px;
}

.stat dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.range-bar {
  grid-column: 1 / -1;
  background: var(--bg-elev);
  padding: 12px;
}

.range-track {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--down-soft), var(--bg-elev-2), var(--up-soft));
  margin: 8px 0 6px;
}

.range-dot {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text);
  transform: translate(-50%, -50%);
  border: 2px solid var(--bg-elev);
}

.range-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
}

.demo-banner {
  position: relative;
  z-index: 60;
  margin: 0 calc(-1 * clamp(14px, 3vw, 34px));
  padding: 8px 16px;
  text-align: center;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: #1a1205;
  background: linear-gradient(90deg, #f0b429, #f7c948);
}

.empty-state {
  padding: 40px 0;
  text-align: center;
  color: var(--text-faint);
}

@media (max-width: 560px) {
  .cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .modal-panel { padding: 16px; }
  .modal-chart { height: 190px; }
  .toolbar-right { margin-left: 0; }
  .search { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* =========================================================== phase 6 =====
   Compare, correlations, command palette.
   ======================================================================== */

/* ------------------------------------------------------- compare (6.2) */

.compare { display: grid; gap: 12px; }

.compare-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 13px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--bg-elev);
}

.compare-label { font-size: 12px; color: var(--text-dim); }

#compareAdd {
  min-width: 170px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
}

.compare-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--pen);
  border-radius: 999px;
  background: color-mix(in srgb, var(--pen) 14%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.compare-chip:hover { background: color-mix(in srgb, var(--pen) 26%, transparent); }

.compare-chart {
  padding: 12px 13px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--bg-elev);
}
.compare-chart svg { width: 100%; height: auto; display: block; }

.compare-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.compare-legend li { display: inline-flex; align-items: center; gap: 6px; }
.compare-pen { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }

.compare-note { margin: 8px 0 0; font-size: 11.5px; color: var(--text-faint); }

/* --------------------------------------------------- correlations (6.6) */

.correlations { display: grid; gap: 14px; }

.corr-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
.corr-title { margin: 0 0 3px; font-size: 15px; }
.corr-head .muted { margin: 0; font-size: 12.5px; max-width: 62ch; }

.corr-book {
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--bg-elev);
  font-size: 12.5px;
}

.corr-grid-wrap { overflow-x: auto; }

.corr-grid { border-collapse: collapse; font-size: 9px; }

.corr-rowlabel {
  position: sticky;
  left: 0;
  z-index: 1;
  padding: 0 6px 0 0;
  text-align: right;
  font-weight: 500;
  color: var(--text-dim);
  background: var(--bg);
  white-space: nowrap;
}

/* A magnitude ramp on the accent, NOT the price palette: a high correlation is
   neither good nor bad, and red/green here would say it was. Negative
   correlation gets its own hue because its sign genuinely is different
   information — two names moving opposite each other is a real, rare thing. */
.corr-cell {
  width: 9px;
  height: 9px;
  padding: 0;
  background: color-mix(in srgb, var(--accent) calc(var(--r, 0) * 100%), transparent);
}
.corr-cell[data-sign="neg"] {
  background: color-mix(in srgb, var(--c2) calc(var(--r, 0) * 100%), transparent);
}
.corr-cell.is-blank {
  background: repeating-linear-gradient(45deg, var(--line-soft) 0 2px, transparent 2px 4px);
}

.corr-legend {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.corr-key { display: inline-flex; gap: 2px; }
.corr-key i {
  width: 13px;
  height: 9px;
  display: inline-block;
  background: color-mix(in srgb, var(--accent) calc(var(--r) * 100%), transparent);
}

.corr-tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.corr-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.corr-table th,
.corr-table td { padding: 4px 8px 4px 0; text-align: left; border-top: 1px solid var(--line-soft); font-weight: 400; }
.corr-table th { color: var(--text); font-weight: 500; }
.corr-mean { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }

.corr-pairs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  font-size: 12.5px;
}
.corr-pairs li { display: flex; justify-content: space-between; gap: 10px; }
.corr-r { font-variant-numeric: tabular-nums; color: var(--text-dim); }

/* ------------------------------------------------ command palette (6.4) */

/* position: fixed needs the body-children exclusion — see CLAUDE.md. */
.palette {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  justify-items: center;
  align-items: start;
  padding-top: 12vh;
}

.palette-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

.palette-panel {
  position: relative;
  width: min(560px, 92vw);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-elev);
  box-shadow: var(--shadow);
  overflow: hidden;
}

#paletteInput {
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
}
#paletteInput:focus { outline: none; }

.palette-list {
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 46vh;
  overflow-y: auto;
}

.palette-item {
  display: grid;
  grid-template-columns: 4.5em 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.palette-item.is-active { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.palette-item:hover { background: color-mix(in srgb, var(--accent) 11%, transparent); }

.palette-kind {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.palette-label { color: var(--text); }
.palette-detail {
  color: var(--text-dim);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 22ch;
}
.palette-empty { padding: 12px 10px; color: var(--text-dim); font-size: 13px; }

.palette-hint {
  margin: 0;
  padding: 8px 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 11px;
  color: var(--text-faint);
}
.palette-hint kbd {
  padding: 1px 5px;
  margin-right: 3px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  font: inherit;
  font-size: 10.5px;
}

@media (max-width: 620px) {
  .palette { padding-top: 6vh; }
  .palette-item { grid-template-columns: 1fr auto; }
  .palette-kind { display: none; }
}

/* ------------------------------------------- breadth & dispersion (8.3/8.4) */

.market-strip {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  padding: 11px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--bg-elev);
  font-size: 12.5px;
}

.market-line { display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap; }

.market-key {
  min-width: 5.5em;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
}

.market-strip .muted { font-size: 12px; }

/* The one place in phase 8 where red/green is correct: this bar IS price
   direction, not a judgement about the regime. */
.breadth-bar {
  display: flex;
  height: 5px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--bg-elev-2);
  margin: 1px 0 3px;
}
.breadth-down { background: var(--down); }
.breadth-up { background: var(--up); }
.breadth-flat { background: var(--line); }

/* ------------------------------------------------ regime split (8.2) */

.br-regime { margin-top: 12px; }

.br-regime-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 5px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
}

.br-regime-axis {
  display: inline-flex;
  gap: 4px;
  text-transform: none;
  letter-spacing: 0;
}
.br-regime-axis button {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.br-regime-axis button.is-active { background: var(--bg-elev-2); color: var(--text); }

/* =========================================================== phase 9 =====
   The book in context.
   ======================================================================== */

/* Monochrome by design. The unrealised figure in the heading keeps its red/green
   because that IS price direction; the framing around it must not, or a
   statement of position becomes a verdict on it. */
.book-panel {
  margin-top: 12px;
  padding: 13px 15px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--bg-elev-2);
}

.book-lines {
  margin: 0;
  padding: 0 0 0 15px;
  display: grid;
  gap: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-dim);
}
.book-lines li::marker { color: var(--text-faint); }

/* 9.1 — the cost-basis line's label on the detail chart. */
.basis-label { fill: var(--accent); opacity: 0.85; font-size: 10px; }

/* 9.2 — the radar's book filter. */
.radar-owned { display: inline-flex; align-items: center; gap: 6px; }
.radar-owned select {
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}

/* 9.4 — capture a thesis from a fired alert. */
.alert-journal {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.alert-journal:hover { color: var(--text); border-color: var(--accent); }

/* 9.5 — the weight gate on a holdings-scoped rule. */
.rule-weight { width: 5em; }
#ruleWeightField { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-dim); }