:root {
  --bg: #f7f7f5;
  --surface: #ffffff;
  --surface-2: #f0f0ec;
  --border: #e2e2dc;
  --text: #1b1b19;
  --muted: #6b6b66;
  --up: #12805c;
  --down: #c2392b;
  --accent: #2f5fd0;
  --warn-bg: #fdecc8; --warn-fg: #7a4b00;
  --bad-bg: #fbd9d5;  --bad-fg: #8f1d12;
  --ok-bg: #d9f2e6;   --ok-fg: #0d5c40;
  --neutral-bg: #ececea; --neutral-fg: #55554f;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  /* Compare-chart lines, fixed order (validated for colorblind separation of neighbors, both themes). */
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --series-5: #e87ba4; --series-6: #008300; --series-7: #6250d6; --series-8: #e34948;
  /* Correlation heatmap: two hues around a neutral middle (not up/down green and red). */
  --div-pos: #2a78d6; --div-neg: #e0702f;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121312; --surface: #1b1c1b; --surface-2: #232523; --border: #2f312f;
    --text: #e8e8e4; --muted: #9a9a94; --up: #3ccf91; --down: #ff6b5c; --accent: #7aa2ff;
    --warn-bg: #4a3608; --warn-fg: #ffd27a; --bad-bg: #4d1a14; --bad-fg: #ffb4a8;
    --ok-bg: #123d2c; --ok-fg: #8de3bd; --neutral-bg: #2a2c2a; --neutral-fg: #b4b4ae;
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
    --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767;
    --div-pos: #4a8fe8; --div-neg: #e07a45;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121312; --surface: #1b1c1b; --surface-2: #232523; --border: #2f312f;
  --text: #e8e8e4; --muted: #9a9a94; --up: #3ccf91; --down: #ff6b5c; --accent: #7aa2ff;
  --warn-bg: #4a3608; --warn-fg: #ffd27a; --bad-bg: #4d1a14; --bad-fg: #ffb4a8;
  --ok-bg: #123d2c; --ok-fg: #8de3bd; --neutral-bg: #2a2c2a; --neutral-fg: #b4b4ae;
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
    --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767;
  --div-pos: #4a8fe8; --div-neg: #e07a45;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.4 var(--font); }
/* The page uses the whole width of the screen; the side margin grows a little with it. */
:root { --gutter: clamp(12px, 2vw, 32px); }
main { margin: 0 auto; padding: 0 var(--gutter) 48px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.up { color: var(--up); }
.down { color: var(--down); }

.topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  padding: 12px var(--gutter); margin: 0 auto; gap: 8px 12px; }
.topbar h1 { font-size: 18px; margin: 0; }
.topbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.icon-btn { background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 9px; cursor: pointer; font-size: 14px; }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn:disabled { opacity: .6; cursor: progress; }

.pill, .badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px;
  font-weight: 600; white-space: nowrap; }
.s-fresh { background: var(--ok-bg); color: var(--ok-fg); }
.s-stale, .s-bad { background: var(--bad-bg); color: var(--bad-fg); }
.s-quiet, .s-warn { background: var(--warn-bg); color: var(--warn-fg); }
.s-closed, .s-nodata, .s-neutral, .s-computed { background: var(--neutral-bg); color: var(--neutral-fg); }

.overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));  /* fit: the cards share the full row */ gap: 8px; margin: 4px 0 20px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
  cursor: pointer; min-width: 0; }
.card:hover { border-color: var(--accent); }
.card.is-stale { border-color: var(--down); }
.card .c-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .c-price { font-family: var(--mono); font-size: 17px; margin-top: 2px; }
.card .c-chg { font-family: var(--mono); font-size: 12px; }
.card .c-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; gap: 4px; }

/* Two columns under the overview strip: groups on the left (half width), a free panel on the right. */
.columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.side-panel { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 14px; }
.side-placeholder { border: 1px dashed var(--border); border-radius: 8px; min-height: 140px;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; }
.side-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
.sc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.sc-price { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-top: 4px; }
.sc-price .big { font-family: var(--mono); font-size: 22px; }
.side-card .chart { height: 250px; }
.slot.drop-target .side-placeholder, .slot.drop-target .side-card { border-color: var(--accent); }

/* Replace / Add zones shown over a filled slot while a stock is dragged onto it.
   pointer-events: none so the drop still lands on the slot underneath. */
.slot { position: relative; }
.drop-zones { display: none; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; }
.slot.drop-target:has(.side-card) .drop-zones { display: grid; }
.slot.drop-target:has(.side-card) .side-card { outline: none; }
.dz { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  border: 2px dashed var(--accent); border-radius: 8px; font-weight: 600; color: var(--muted);
  background: color-mix(in srgb, var(--surface) 88%, transparent); }
.slot.zone-replace .dz-replace, .slot.zone-add .dz-add {
  border-style: solid; color: var(--text); background: color-mix(in srgb, var(--accent) 20%, var(--surface)); }

.sc-buttons { display: flex; gap: 6px; flex: none; }

/* Full-screen chart: the chart fills the window above a scrollable tray holding the
   overview strip and the groups (moved there by setFocus in app.js). */
body.focus-mode main { max-width: none; height: calc(100vh - 60px); min-height: 600px; display: flex;
  flex-direction: column; gap: 12px; padding-bottom: 12px; }
body.focus-mode .columns { display: block; flex: 1 1 auto; min-height: 380px; }  /* short windows scroll instead */
body.focus-mode .side-panel { position: static; height: 100%; display: block; }
body.focus-mode .slot:not(.expanded) { display: none; }
body.focus-mode .status-panel { display: none; }
.slot.expanded { height: 100%; }
.slot.expanded .side-card { height: 100%; display: flex; flex-direction: column; }
.slot.expanded .side-card .chart-wrap { flex: 1 1 auto; min-height: 220px; }
.slot.expanded .side-card .chart { cursor: crosshair; }

/* Measure tool (full screen only): band between the two dates, dates on top,
   each line's % change at the end date. Text stays in text ink; the dot carries identity. */
.chart-wrap { position: relative; }
.measure-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; }  /* above the chart's own canvases */
.measure-hint { display: none; margin-left: auto; align-self: center; }
.slot.expanded .measure-hint { display: inline; }
.ms-band { position: absolute; top: 0; bottom: 26px; background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-left: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.ms-head { position: absolute; top: 6px; transform: translateX(-50%); white-space: nowrap; font-size: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.ms-label { position: absolute; display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.ms-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ms-name { color: var(--text); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
#tray { flex: 0 0 34vh; min-height: 180px; overflow: auto; border-top: 1px solid var(--border); padding-top: 10px; }
#tray .overview { margin-bottom: 12px; }
#tray #groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 0 16px; align-items: start; }
#tray #groups .new-group-form { grid-column: 1 / -1; }

/* Portfolio tab: the Compare folder (two chart slots side by side, chips to drag from). */
.pf-compare { margin-bottom: 22px; }
.pf-compare > h2 { display: flex; align-items: baseline; gap: 10px; font-size: 14px; margin: 0 0 8px; }
.pf-compare.collapsed .pfc-body { display: none; }
.pf-compare.collapsed .chev { transform: rotate(-90deg); }
.pf-compare.collapsed .pfc-hint { display: none; }
.pfc-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.pfc-label { margin: 0 2px 0 6px; }
.pfc-label:first-child { margin-left: 0; }
.pfc-chip { border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font-size: 13px;
  background: var(--surface); cursor: grab; white-space: nowrap; user-select: none; }
.pfc-chip:hover { border-color: var(--accent); }
.pfc-chip.dragging, #pf-total h2.dragging { opacity: .5; }
#pf-total h2[draggable] { cursor: grab; }
.pf-table tr[draggable] { cursor: grab; }
/* Side by side, both boxes as tall as the taller one (a long legend makes one header taller):
   the chart grows to fill the difference, so the two boxes always line up. */
.pfc-slots { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.pfc-slots .slot { display: flex; flex-direction: column; }
.pfc-slots .side-card, .pfc-slots .side-placeholder { flex: 1 1 auto; display: flex; flex-direction: column; }
.pfc-slots .side-card .chart-wrap { flex: 1 1 auto; min-height: 250px; }
/* Laid over its box, not in its flow: a chart that fills a box sized by its content would
   grow it at every resize (the two slots stretch to the same height), without end. */
.pfc-slots .side-card .chart, .slot.expanded .side-card .chart { position: absolute; inset: 0; height: auto; }
@media (max-width: 900px) { .pfc-slots { grid-template-columns: minmax(0, 1fr); } }

/* Full screen from the Compare folder: only that chart stays, the chips go to the tray. */
body.focus-mode #portfolio { flex: 1 1 auto; min-height: 380px; display: flex; flex-direction: column; }
body.focus-mode #portfolio > :not(#pf-compare) { display: none; }
body.focus-mode #pf-compare { flex: 1 1 auto; margin: 0; display: flex; flex-direction: column; }
body.focus-mode #pf-compare > h2 { display: none; }
body.focus-mode .pfc-body, body.focus-mode .pfc-slots { flex: 1 1 auto; display: block; height: 100%; }
#tray .pfc-sources { margin-bottom: 0; }

/* Compare-mode legend: swatch carries identity, text stays in text ink. */
.sc-legend { display: grid; gap: 2px 18px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); flex: 1; min-width: 0; }
.lg-row { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 13px; }
.lg-row b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-row .muted { white-space: nowrap; }
.sc-head .sc-title { flex: 1; min-width: 0; }
.lg-swatch { width: 14px; height: 3px; border-radius: 2px; align-self: center; flex: none; }
.lg-val { margin-left: auto; font-size: 13px; }
.lg-rm { all: unset; cursor: pointer; color: var(--muted); padding: 0 4px; font-size: 14px; }
.lg-rm:hover { color: var(--down); }
@media (max-width: 900px) {
  .columns { grid-template-columns: minmax(0, 1fr); }
  .side-panel:not(:has(.side-card)) { display: none; }  /* both slots empty */
  #side .slot:has(.side-placeholder) { display: none; }
}

.group { margin-bottom: 22px; }
.group h2 { font-size: 14px; margin: 0 0 6px; }
.group-toggle { all: unset; cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; padding: 2px 0; }
.group-toggle:hover { color: var(--text); }
.group-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.group-toggle .chev { display: inline-block; transition: transform .15s; }
.group-toggle .g-count { font-weight: 400; font-size: 12px; letter-spacing: 0; }
.group-toggle .g-summary { display: none; font-family: var(--mono); font-size: 12px; letter-spacing: 0; text-transform: none; }
.group.collapsed .chev { transform: rotate(-90deg); }
.group.collapsed .table-wrap { display: none; }
.group.collapsed .g-summary { display: inline; }
.group.collapsed { margin-bottom: 10px; }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 7px 10px; border-bottom: 1px solid var(--border); }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600;
  text-align: left; background: var(--surface-2); }
th.num { text-align: right; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
td .sym { color: var(--muted); font-size: 12px; margin-left: 6px; }

/* Views: Markets / Portfolio */
.views { display: flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.view-tab { all: unset; cursor: pointer; padding: 5px 14px; border-radius: 6px; font-weight: 700; font-size: 15px; color: var(--muted); }
.view-tab:hover { color: var(--text); }
.view-tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.view-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Portfolio */
.portfolio { margin-bottom: 24px; }
.trade-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; }
.tf-title { flex-basis: 100%; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tf-field { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.tf-field select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 8px; font: inherit; font-size: 14px; min-width: 140px; }
.tf-field input { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 8px; font: inherit; font-size: 14px; width: 130px; }
.tf-field input[name="symbol"] { width: 120px; text-transform: uppercase; }
.tf-field input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.trade-form { padding-bottom: 22px; }
/* Deposit / Withdraw: only the amount; Buy / Sell: ticker, quantity, price, fees. */
.trade-form.cash-mode .tf-stock, .trade-form:not(.cash-mode) .tf-cash { display: none; }
.pf-table tr.cash-row td { color: var(--muted); }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; align-self: flex-end; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 6px 14px; cursor: pointer; font-weight: 600; color: var(--muted); }
.seg input:checked + span { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); color: var(--text); }
/* Only the trade form's buy/sell carry meaning in colour. */
.seg input[value="BUY"]:checked + span { background: var(--ok-bg); color: var(--ok-fg); }
.seg input[value="SELL"]:checked + span { background: var(--bad-bg); color: var(--bad-fg); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); padding: 7px 14px; font-size: 13px; font-weight: 600; }
.btn.primary:disabled { opacity: .6; }
.trade-form .add-msg { flex-basis: 100%; }
.trade-form .add-msg:empty { display: none; }
/* Portfolio folders: same look and behavior as the Markets groups. */
.pf-folder { margin-bottom: 22px; }
.pf-folder > h2 { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0 0 8px; cursor: grab; }
.pf-folder.collapsed .pf-body { display: none; }
.pf-folder.collapsed .chev { transform: rotate(-90deg); }
.pf-folder.collapsed { margin-bottom: 10px; }
.pf-head-sum { margin-left: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--muted); }
.pf-folder.drop-before { box-shadow: 0 -6px 0 -2px var(--accent); }
.pf-folder.drop-after { box-shadow: 0 6px 0 -2px var(--accent); }
.del-pf, .rename-pf { font-size: 11px; white-space: nowrap; }
.pf-folder > h2.renaming { cursor: default; }
.pf-folder > h2.renaming .pf-toggle, .pf-folder > h2.renaming .rename-pf { display: none; }
.group > h2.renaming .group-toggle, .group > h2.renaming .rename-pf, .group > h2.renaming .del-group { display: none; }.rename-pf-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1; text-transform: none; letter-spacing: 0; }
.rename-pf-form input { background: var(--bg); color: var(--text); border: 1px solid var(--accent); border-radius: 6px;
  padding: 4px 8px; font: inherit; font-size: 14px; font-weight: 700; flex: 0 1 260px; min-width: 0; }
.rename-pf-form .add-msg { flex-basis: 100%; font-weight: 400; }
.rename-pf-form .add-msg:empty { display: none; }
.del-pf.armed { background: var(--down); border-color: var(--down); color: #fff; font-weight: 600; }
#pf-total .pf-summary { margin-bottom: 22px; }
.new-pf-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 22px; }
.new-pf-form input { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 9px; font: inherit; font-size: 13px; flex: 0 1 280px; min-width: 0; }
.new-pf-form .add-msg { flex-basis: 100%; }
.new-pf-form .add-msg:empty { display: none; }
.pf-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pf-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; }
.pf-tile .k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pf-tile .v { font-size: 22px; margin-top: 2px; }
.pf-tile .s { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pf-warn { display: inline-block; margin: 0 6px 10px 0; white-space: normal; }
.pf-h { font-size: 14px; margin: 6px 0 6px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pf-table tbody tr { cursor: pointer; }
.pf-table tfoot td { font-weight: 700; border-top: 2px solid var(--border); border-bottom: 0; }
#pf-trades .pf-table tbody tr { cursor: default; }
.pf-empty { padding: 14px 4px; }
#pf-closed { margin-top: 16px; }
.pf-history { margin-top: 16px; }
.pf-history summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
.pf-del.armed { background: var(--down); border-color: var(--down); color: #fff; font-weight: 600; }
/* Contribution: diverging mini-bar around a center line; the number carries the value. */
.contrib { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.cbar { position: relative; width: 60px; height: 8px; background: var(--surface-2); border-radius: 2px; }
.cbar::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--muted); }
.cbar-fill { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.cbar-fill.pos { background: var(--up); }
.cbar-fill.neg { background: var(--down); }

/* Edit mode */
body:not(.editing) .edit-only { display: none !important; }
.card { position: relative; }
.rm { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 50%;
  width: 22px; height: 22px; line-height: 18px; padding: 0; cursor: pointer; font-size: 15px; }
.rm:hover { color: var(--down); border-color: var(--down); }
.rm.armed { width: auto; border-radius: 999px; padding: 0 9px; font-size: 12px; font-weight: 600;
  background: var(--down); border-color: var(--down); color: #fff; }
.card .rm { position: absolute; top: 6px; right: 6px; }
body.editing .card .c-name { padding-right: 22px; }
td.rm-cell { width: 34px; text-align: right; }
.group h2 { display: flex; align-items: center; gap: 8px; }
.group-toggle { flex: 1; min-width: 0; }
.del-group { font-size: 11px; white-space: nowrap; }
.del-group.armed { background: var(--down); border-color: var(--down); color: #fff; font-weight: 600; }
.empty-row td { padding: 12px 10px; }
.new-group-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 22px; }
.new-group-form input { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 9px; font: inherit; font-size: 13px; flex: 0 1 280px; min-width: 0; }
.new-group-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.new-group-form .add-msg { flex-basis: 100%; }
.new-group-form .add-msg:empty { display: none; }

/* right-click menu */
.ctxmenu { position: fixed; z-index: 20; min-width: 220px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 4px; box-shadow: 0 8px 28px rgba(0, 0, 0, .25); display: flex; flex-direction: column; }
.ctxmenu[hidden] { display: none; }
.ctx-title { font-size: 11px; color: var(--muted); padding: 6px 10px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-item { all: unset; padding: 7px 10px; border-radius: 5px; cursor: pointer; font-size: 13px; color: var(--text); }
.ctx-item:hover, .ctx-item:focus-visible { background: var(--surface-2); }
.ctx-item.danger { color: var(--down); }
/* Chg % header: hover (or focus) opens the period menu. */
.chg-head { cursor: pointer; white-space: nowrap; user-select: none; }
.chg-head:hover, .chg-head:focus-visible { color: var(--text); }
.chg-head .chev { font-size: 10px; color: var(--muted); }
.chg-period { color: var(--accent); font-weight: 600; }
.chg-menu { min-width: 150px; }
.chg-menu .ctx-item.current { font-weight: 600; color: var(--accent); }
.ctx-item.armed { background: var(--down); color: #fff; font-weight: 600; }

/* drag and drop */
.group > h2[draggable="true"] { cursor: grab; }
.group.drop-before { box-shadow: 0 -6px 0 -2px var(--accent); }
.group.drop-after { box-shadow: 0 6px 0 -2px var(--accent); }
/* The handle only appears on hover, to keep the normal view clean. */
.drag-handle { color: var(--muted); margin-right: 8px; cursor: grab; user-select: none; opacity: 0; transition: opacity .1s; }
tr:hover .drag-handle, body.editing .drag-handle { opacity: 1; }
[draggable="true"]:active { cursor: grabbing; }
.dragging { opacity: .4; }
.drop-target { outline: 2px dashed var(--accent); outline-offset: 3px; border-radius: 8px; }
tr.drop-before td { box-shadow: inset 0 3px 0 var(--accent); }
tr.drop-after td { box-shadow: inset 0 -3px 0 var(--accent); }
.card.drop-before { box-shadow: -4px 0 0 var(--accent); }
.card.drop-after { box-shadow: 4px 0 0 var(--accent); }

.add-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px; }
.add-form input { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 8px; font: inherit; font-size: 13px; min-width: 0; flex: 1 1 120px; }
.add-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.add-form .add-msg { flex-basis: 100%; }
.add-form .add-msg:empty { display: none; }
.add-card { border-style: dashed; cursor: default; padding: 4px; }
.add-card:hover { border-color: var(--border); }
.add-card .add-form { flex-direction: column; align-items: stretch; padding: 4px; }
.add-card .add-form input { flex: none; }
.table-wrap .add-form { border-top: 1px solid var(--border); }

.stale-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--down);
  margin-right: 6px; vertical-align: middle; }
.hovercard { position: fixed; z-index: 10; width: 280px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); pointer-events: none; font-size: 13px; }
.hovercard .hc-head { margin-bottom: 6px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.hovercard dl { margin: 0 0 6px; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; }
.hovercard dt { color: var(--muted); }
.hovercard .hc-foot { border-top: 1px solid var(--border); padding-top: 6px; display: grid; gap: 2px; }
.hovercard dd {margin: 0; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

.status-panel {background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; }
.status-panel summary { cursor: pointer; font-weight: 600; }
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 10px 0; }
.status-grid dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.status-grid dt { color: var(--muted); }
.status-grid dd { margin: 0; overflow-wrap: anywhere; }
.status-panel table td, .status-panel table th { font-size: 12px; padding: 4px 8px; }
.err { color: var(--down); overflow-wrap: anywhere; }
.btn { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 10px; cursor: pointer; font-size: 12px; }

.detail { width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); color: var(--text); padding: 16px; }
.detail::backdrop { background: rgba(0, 0, 0, .45); }
.detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }

/* Account dialog and the sign-in page share these form styles. */
.account-dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); color: var(--text); padding: 16px; }
.account-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.account-dialog h2 { margin: 0; font-size: 18px; }
.acct-section { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px; }
.acct-section h3 { font-size: 14px; margin: 0 0 6px; }
.acct-section p { margin: 0 0 8px; }
.acct-link { display: flex; gap: 6px; margin-top: 8px; }
/* Settings: a row that opens the Account sub-page, and the way back. */
.set-row { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.set-row:hover { border-color: var(--accent); }
.set-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.set-row > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-row .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-chev { font-size: 20px; color: var(--muted); }
.link-btn { all: unset; cursor: pointer; color: var(--accent); font-size: 13px; margin-bottom: 4px; }
.link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#settings-btn { display: inline-flex; align-items: center; gap: 6px; }
#settings-btn .gear { display: block; }
#paused { overflow: hidden; }  /* short content: no scrollbars */
#paused p { margin: 10px 0 14px; }
.acct-link input { flex: 1; min-width: 0; }
#acct-password, .auth-card form { display: flex; flex-direction: column; gap: 10px; }
#acct-password label, .auth-card label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
#acct-password input, .acct-link input, .auth-card input {
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font: inherit; }
#acct-password input:focus-visible, .auth-card input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#acct-password .btn.primary, .auth-card .btn.primary { align-self: flex-start; }
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.auth-card { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
.auth-card h1 { margin: 0 0 6px; font-size: 20px; }
.auth-card #auth-intro { margin: 0 0 16px; }
.auth-card #auth-msg:empty { display: none; }
.auth-card #auth-foot { margin: 16px 0 0; }
.auth-card a { color: var(--accent); }
.detail h2 { margin: 0; font-size: 18px; }
.d-price { margin: 8px 0 12px; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.d-price .big { font-family: var(--mono); font-size: 24px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.tab { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 6px; padding: 3px 10px; cursor: pointer; }
.tab.active { color: var(--text); background: var(--surface-2); }
.chart { height: 300px; width: 100%; }
.chart-empty { padding: 8px 0; }
.fund { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-top: 14px; }
.fund .f { background: var(--surface-2); border-radius: 6px; padding: 8px 10px; }
.fund .f .k { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.fund .f .v { font-family: var(--mono); font-size: 15px; margin-top: 2px; }
.fund .note { grid-column: 1 / -1; }

@media (max-width: 640px) {
  .hide-sm { display: none; }
  #updated { display: none; }  /* phone: keep the top bar to one or two lines */
}

/* Admin tab (admins only). Tables reuse .pf-table; actions wrap under each other on narrow screens. */
.admin-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.admin-head p { margin: 0; }
.admin-block { margin-bottom: 26px; }
.admin-block > p { margin: 0 0 8px; }
.admin-table td { vertical-align: top; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 4px; min-width: min(260px, 60vw); }
.admin-actions .btn, .admin .danger-btn { font-size: 11px; white-space: nowrap; }
.admin .danger-btn { color: var(--down); }
.admin .btn.armed { background: var(--down); border-color: var(--down); color: #fff; font-weight: 600; }
.admin-out { background: var(--surface); border: 1px solid var(--accent); border-radius: 8px; padding: 10px 12px; margin: 8px 0; font-size: 13px; }
.admin-out .acct-link input { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font: inherit; }
.admin-filter { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.admin-filter select { margin-left: 6px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; }
.admin-scroll { max-height: 420px; overflow: auto; }
.admin-table tr.admin-alert td:nth-child(2) { color: var(--down); font-weight: 600; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.admin-dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 6px 0 0; font-size: 13px; }
.admin-dl dt { color: var(--muted); }
.admin-dl dd { margin: 0; overflow-wrap: anywhere; }
.admin-sub { font-size: 13px; margin: 16px 0 6px; }
.admin-checks { list-style: none; padding: 0; margin: 0; font-size: 13px; display: grid; gap: 4px; }
.admin-fetches { margin-top: 12px; }
.admin-fetches summary { cursor: pointer; font-size: 13px; }
.reauth-buttons { display: flex; gap: 8px; }
#reauth-form { display: flex; flex-direction: column; gap: 10px; }
#reauth-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
#reauth-form input { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font: inherit; }
#reauth-form h2 { margin: 0; font-size: 18px; }
#reauth-form p { margin: 0; }
#reauth-msg:empty { display: none; }
.admin-clip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Analysis tab. */
.ta-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
#ta-pick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#ta-pick input { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; font: inherit; width: 200px; }
.ta-title { text-align: right; }
.ta-title .sc-price { justify-content: flex-end; }
.ta-toolbar, .ta-draw { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.ta-toolbar .tabs { margin: 0; }
.ta-ctl { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.ta-ctl select, .ta-section-head select { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; }
.ta-menu { position: relative; }
.ta-menu > summary { list-style: none; display: inline-block; }
.ta-menu > summary::-webkit-details-marker { display: none; }
.ta-menu-body { position: absolute; z-index: 15; top: calc(100% + 4px); left: 0; min-width: min(330px, calc(100vw - 2 * var(--gutter))); background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); display: grid; gap: 6px; }
.ta-ind-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.ta-ind-row > label:first-child { display: flex; align-items: center; gap: 6px; min-width: 190px; }
.ta-ind-row input[type=number] { width: 56px; margin-left: 4px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 2px 4px; }
.ta-menu-body p { margin: 4px 0 0; }
.ta-draw .btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.ta-draw .danger-btn { color: var(--down); }
.ta-draw .btn.armed { background: var(--down); border-color: var(--down); color: #fff; }
.ta-chart-wrap { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0; overflow: hidden; }
.ta-chart { height: 440px; }
.ta-legend { position: absolute; z-index: 3; top: 6px; left: 8px; right: 70px; display: flex; flex-wrap: wrap; gap: 2px 12px;
  font-size: 12px; pointer-events: none; font-variant-numeric: tabular-nums; }
.ta-legend span { display: inline-flex; align-items: center; gap: 4px; }
.ta-overlay { position: absolute; z-index: 2; top: 0; left: 0; pointer-events: none; }
.ta-overlay.active { pointer-events: auto; cursor: crosshair; }
.ta-overlay.erasing { cursor: default; }
.ta-overlay .ta-item { pointer-events: none; }
.ta-overlay.erasing .ta-item { pointer-events: auto; cursor: pointer; }
.ta-overlay.erasing .ta-item:hover .ta-line { stroke: var(--down); }
.ta-hit { stroke: transparent; stroke-width: 12; }
.ta-line { stroke: var(--accent); stroke-width: 1.5; }
.ta-fib { stroke-dasharray: 4 3; opacity: .75; }
.ta-dot { fill: var(--accent); }
.ta-label { fill: var(--text); font-size: 11px; font-family: var(--mono); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.ta-note-bg { fill: var(--surface); stroke: var(--accent); }
.ta-note-text { fill: var(--text); font-size: 12px; }
.ta-note-input { position: absolute; z-index: 4; width: 220px; background: var(--surface); color: var(--text); border: 1px solid var(--accent); border-radius: 6px; padding: 4px 8px; font: inherit; }
#ta-note { margin: 6px 0 0; min-height: 1em; }
.ta-section { margin-top: 22px; }
.ta-section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 8px; }
.ta-section-head .pf-h, .ta-section-head .admin-sub { margin: 0; }
.ta-corr-custom { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font: inherit; min-width: min(280px, 100%); }
.ta-range { position: relative; display: inline-block; width: 90px; height: 6px; border-radius: 3px; background: var(--surface-2); vertical-align: middle; }
.ta-range span { position: absolute; top: -3px; width: 4px; height: 12px; margin-left: -2px; border-radius: 2px; background: var(--accent); }
.ta-heat { border-collapse: separate; border-spacing: 2px; font-size: 12px; font-variant-numeric: tabular-nums; }
.ta-heat th { font-weight: 600; padding: 4px 6px; white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.ta-heat thead th { color: var(--muted); font-weight: 500; }
.ta-heat tbody th { text-align: left; }
.ta-heat td { min-width: 52px; text-align: center; padding: 6px 4px; border-radius: 4px; }
.ta-heat .ta-cell { cursor: pointer; }
.ta-heat .ta-cell:hover { outline: 2px solid var(--accent); }
.ta-heat .ta-diag { color: var(--muted); background: var(--surface-2); }
.ta-heat-key { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.ta-key { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.ta-pair-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; }
.ta-small-chart { height: 220px; margin-top: 6px; }
@media (max-width: 700px) { .ta-title { text-align: left; } .ta-title .sc-price { justify-content: flex-start; } }

/* Create tab: custom values. */
.cv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 10px; }
.cv-card { display: grid; gap: 6px; }
.cv-card-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cv-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cv-actions select, .cv-form select { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; font: inherit; font-size: 13px; }
.cv-actions .btn.armed { background: var(--down); border-color: var(--down); color: #fff; }
.cv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .cv-grid { grid-template-columns: minmax(0, 1fr); } }
.cv-form { display: grid; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.cv-form .seg { align-self: start; justify-self: start; }
.cv-form p { margin: 0; }
.cv-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.cv-form .tf-field { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.cv-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
.cv-check input { accent-color: var(--accent); margin: 0; }
.cv-form input:not([type=radio]):not([type=checkbox]) { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 14px; width: 140px; }
.cv-form input[name=name] { width: 220px; }
.cv-form input[type=number] { width: 100px; }
.cv-form input:disabled { opacity: .7; }
.cv-symbol { display: inline-flex; align-items: center; gap: 2px; font-family: var(--mono); color: var(--text); }
.cv-comp .cv-rm { align-self: flex-end; margin-bottom: 3px; }
.cv-preview { position: sticky; top: 12px; }
.cv-preview #cv-preview-text { margin: 6px 0; min-height: 2.6em; }
.cv-preview-chart { height: 300px; }

/* ---- Phones: mostly for looking ------------------------------------------------------------
   Same pages, rearranged so that what matters comes first and nothing needs a sideways scroll. */
@media (max-width: 640px) {
  .topbar { padding-top: 8px; padding-bottom: 8px; }
  /* The tabs swipe sideways when they don't fit (an admin has five). */
  .views { max-width: 100%; box-sizing: border-box; overflow-x: auto; scrollbar-width: none; }
  .views::-webkit-scrollbar { display: none; }
  .view-tab { flex: none; padding: 5px 11px; font-size: 14px; }
  #settings-btn .btn-label { display: none; }  /* the gear alone */
  #settings-btn { padding: 6px 9px; }
  /* Index cards: one row to swipe, instead of a whole screen. */
  .overview { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter)) 16px; padding: 2px var(--gutter) 4px; scroll-padding: 0 var(--gutter); }
  .overview::-webkit-scrollbar { display: none; }
  .overview .card { flex: 0 0 136px; scroll-snap-align: start; padding: 8px 10px; }
  .overview .card .c-price { font-size: 15px; }
  /* Portfolio: what it's worth first, then the charts; recording a trade comes last. */
  #portfolio { display: flex; flex-direction: column; }
  #pf-compare { order: 5; }
  #trade-form { order: 10; margin: 8px 0 0; }
  #new-pf-form { order: 11; }
  .pf-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pf-tile { padding: 8px 10px; }
  .pf-tile .v { font-size: 18px; }
  /* Positions: stock, value, P&L, return. The rest (quantity, costs, weights) is in the
     stock's details and on a computer. */
  .pf-positions :is(th, td):is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5), :nth-child(7), :nth-child(10)) { display: none; }
  .pf-compare > h2 { flex-wrap: wrap; }
  /* Names only: the tickers are in each stock's details (tap it). */
  .col-ticker, .c-sym, .pf-positions .sym, .chip-sym { display: none; }
  /* No empty chart boxes, except one to say what to do when both are empty. */
  #pfc-slots .slot:has(.side-placeholder) { display: none; }
  #pfc-slots:not(:has(.side-card)) .slot:first-child { display: flex; }
}

/* ---- Touch screens: no hover, no drag-and-drop ---------------------------------------------
   A tap opens details or adds to a chart instead (app.js, TOUCH). Drawing on a chart needs a
   precise pointer: the Analysis drawing tools stay on computers. */
@media (hover: none) and (pointer: coarse) {
  .ta-draw { display: none; }
  .pfc-chip { padding: 6px 12px; }
}