/* Layout and chart rules for each page. Every color is a token from
   theme.css; this sheet only says where things go and how charts draw. */

#preview .mono { overflow-wrap: anywhere; }
#overview .ov-card .ov-head b { font-size: var(--fs-xs); }

/* ---------- Overview ---------- */
/* "Right now": borderless, the hero number with the tax-year picker above it */
.ov-card[data-card="now"] { margin: 0; }
.ov-card[data-card="now"] + .ov-card { border-top: 0; padding-top: 0; margin-top: var(--s-7); }
.ov-card[data-card="now"] .ov-head { margin: 0; }
.ov-card[data-card="now"] .ov-head b { display: none; }
.ov-card[data-card="now"] .tiles { max-width: 640px; margin: 0 auto; grid-template-columns: 1fr 1fr; }
.ov-card[data-card="now"] .tile { text-align: center; }
#year-select { min-height: 34px; padding: 6px 30px 6px 12px; font-size: var(--fs-sm); background-color: transparent; border-color: var(--line); border-radius: var(--pill); }
.ov-card.dragging { opacity: .5; }
.ov-card.drop-before { box-shadow: 0 -2px 0 0 var(--text); } .ov-card.drop-after { box-shadow: 0 2px 0 0 var(--text); }
.ov-grip { cursor: grab; color: var(--muted); user-select: none; touch-action: none; padding: 0 4px; letter-spacing: -3px; opacity: 0; transition: opacity .15s ease; order: 99; margin-left: 4px; }
.ov-head:hover .ov-grip, .ov-grip:focus-visible { opacity: .7; } .ov-grip:hover { opacity: 1; } .ov-grip:active { cursor: grabbing; }
.ov-card .chart-card { margin: 0; }
.whatif-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-3); margin-top: var(--s-1); }
.whatif-grid .tile .v { font-size: 20px; }
#whatif-form .row input[name="amount"] { width: 120px; }
#warnings h2 { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); margin: var(--s-4) 0 var(--s-2); font-family: var(--font); }
#warnings .card { margin: 0; }
#warnings .warn + .warn { margin-top: 4px; }

/* History chart: hairline grid, thin vertical strokes for holdings, 1.5px
   ink lines, faint area, hollow rings for buys and accent dots for sales */
#history-range { margin: 0 0 var(--s-3); gap: 6px 12px; align-items: center; }
#history-wrap { position: relative; }
#history { display: block; width: 100%; touch-action: pan-y; }
#history .bar { fill: none; stroke: var(--chart-bar); stroke-width: 1; }
#history .bar.hot { stroke: var(--chart-line); stroke-opacity: .55; }
#history.dragging { cursor: grabbing; }
#history .scrub-bg { fill: var(--chart-area); }
#history .scrub-area { fill: var(--chart-bar); }
#history .scrub-dim { fill: var(--bg); fill-opacity: .45; }
#history .scrub-win { fill: transparent; stroke: var(--chart-line); stroke-width: 1.25; cursor: grab; }
#history .scrub-handle { cursor: ew-resize; }
#history .scrub-handle .hit { fill: transparent; }
#history .scrub-handle .grip { fill: var(--ink); }
#history .scrub-handle line { stroke: var(--on-ink); stroke-width: 1; }
#history-scrub { touch-action: none; }
#history .btc { fill: none; stroke: var(--chart-line); stroke-width: 1.5; stroke-linejoin: round; }
#history .px { fill: none; stroke: var(--chart-line); stroke-width: 1.5; stroke-linejoin: round; }
#history .btc, #history .px { stroke-linecap: round; }
#history .grid { stroke: var(--chart-grid); shape-rendering: crispEdges; }
#history text { fill: var(--muted); font-size: 11px; font-family: var(--font); }
#history .title { fill: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
#history .cross { stroke: var(--line-2); stroke-dasharray: 2 3; }
#history .pt-btc, #history .pt-px { fill: var(--bg); stroke: var(--chart-line); stroke-width: 1.5; }
#history .buy-dot { fill: var(--bg); fill-opacity: .6; stroke: var(--chart-up); stroke-width: 1.5; }
#history .sell-dot { fill: var(--chart-down); fill-opacity: .85; stroke: var(--bg); stroke-width: 1; }
#history .buy-dot.hot { fill: var(--chart-up); fill-opacity: 1; }
#history.dot-hover #history-hit { cursor: pointer; }
#history .sell-dot.hot { stroke: var(--chart-line); stroke-width: 1.5; fill-opacity: 1; }
#history-hit { cursor: crosshair; touch-action: pan-y; }
.chart-key { display: inline-flex; gap: 14px; align-items: center; font-size: var(--fs-sm); color: var(--muted); }
.chart-key i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.chart-key .k-buy { border: 1.5px solid var(--chart-up); }
.chart-key .k-sell { background: var(--chart-down); }

/* Sankey summary: greys, with the taxable group in the accent */
#summary-wrap { overflow-x: auto; }
#summary { display: block; }
#summary .sk-band { fill-opacity: .55; transition: fill-opacity .12s ease; } #summary .sk-band:hover { fill-opacity: .9; }
#summary .buy { fill: var(--sk-grey-3); } #summary .income { fill: var(--sk-grey-2); } #summary .move { fill: var(--sk-grey-4); }
#summary .held { fill: var(--sk-grey-2); } #summary .unmatched { fill: var(--neg); }
#summary .sell { fill: var(--accent); }
#summary rect.sk-node.sell { fill: var(--accent); }
#summary .sk-node.acct { fill: var(--text); }
#summary .sk-band.sell { fill-opacity: .75; }
#summary .sk-label { fill: var(--text); font-size: 12.5px; font-family: var(--font); } #summary .sk-label.strong { font-weight: 600; }
#summary .sk-amt { fill: var(--muted); font-size: 11px; font-family: var(--font); }
#summary .sk-leader { stroke: var(--line-2); stroke-width: 1; }
#summary .sk-col { fill: var(--muted); }
#coin-panel { margin: 0; }

/* Lightning node card */
.node-card .bal { display: flex; gap: var(--s-6); flex-wrap: wrap; align-items: baseline; margin: 4px 0 var(--s-3); }
.node-card .big { font-family: var(--font-display); font-size: 26px; font-weight: 300; letter-spacing: -.01em; }
.ledger td { font-variant-numeric: tabular-nums; }
.ledger .in { color: var(--pos); } .ledger .out { color: var(--text); }

/* ---------- Flow ---------- */
body.flow main { max-width: none; padding-bottom: var(--s-2); }
body.flow #page-head { max-width: none; }
#graph.on { display: flex; flex-direction: column; gap: var(--s-3); }
.graph-bar { flex: none; gap: var(--s-2) var(--s-3); }
.graph-bar button { padding: 6px 12px; min-height: 32px; font-size: var(--fs-sm); }
.graph-bar label.inline { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: var(--fs-sm); color: var(--muted); }
.graph-bar label.inline select { min-height: 32px; padding: 4px 28px 4px 10px; font-size: var(--fs-sm); }
.graph-area { position: relative; height: calc(100vh - var(--nav-h) - 150px); min-height: 320px; display: flex; transition: height .2s ease; }

#graph-wrap { flex: 1; overflow: hidden; border-top: 1px solid var(--line); }
#flow { display: block; cursor: grab; touch-action: none; user-select: none; }
#flow.panning { cursor: grabbing; }
/* Flow's record details: a dialog over the graph. */
#graph-detail { width: min(920px, calc(100vw - 32px)); max-height: min(86vh, 900px); padding: 0; margin: auto; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel); color: var(--text); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); overflow: auto; }
#graph-detail::backdrop { background: rgba(0, 0, 0, .45); }
#graph-detail .detail-inner { padding: var(--s-5); }
@media (max-width: 640px) { #graph-detail { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: var(--r-sm) var(--r-sm) 0 0; } #graph-detail .detail-inner { padding: var(--s-4); } }
.detail-cols { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(260px, 1.3fr); gap: var(--s-2) var(--s-7); }
@media (max-width: 900px) { .detail-cols { grid-template-columns: 1fr; } }
#graph-detail h3 { font-size: var(--fs-md); margin: 0 0 var(--s-3); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#graph-detail dl, #lookup dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 var(--s-3); font-size: var(--fs-sm); align-items: baseline; }
#graph-detail dd, #lookup dd { margin: 0; overflow-wrap: anywhere; }
#graph-detail .trace, #lookup .trace { border-left: 1px solid var(--line-2); padding-left: var(--s-4); font-size: var(--fs-sm); }
#graph-detail .trace div, #lookup .trace div { margin: 4px 0; }
#graph-detail .trace b, #lookup .trace b { display: block; margin-top: var(--s-2); font-size: var(--fs-xs); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); }
.label-box { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; font-size: var(--fs-sm); }

/* The transaction in/out diagram */
#txflow-wrap { margin-top: var(--s-4); border-top: 1px solid var(--line); padding-top: var(--s-3); }
.txf { display: block; width: 100%; }
.txf .band { fill-opacity: .35; }
.txf .node { cursor: default; }
.txf .node.link-node { cursor: pointer; }
.txf .node.link-node:hover rect { stroke: var(--text); stroke-width: 1.5; }
.txf text { fill: var(--text); font-size: 12px; font-family: var(--font); }
.txf text.sub { fill: var(--muted); font-size: 11px; }
.txf .center { fill: var(--text); }
.txf .col { fill: var(--muted); }
.f-buy { fill: var(--sk-grey-1); } .f-sell, .f-spend, .f-sold { fill: var(--accent); } .f-income, .f-purchase, .f-gift-in { fill: var(--sk-grey-2); }
.f-unmatched { fill: var(--neg); } .f-acct, .f-transfer, .f-consolidation, .f-other { fill: var(--sk-grey-3); } .f-fee { fill: var(--sk-grey-4); }
.txf .band.f-sell, .txf .band.f-spend, .txf .band.f-sold { fill-opacity: .6; }

/* Accounts lanes: ink balance lines, faint fill, glyphs for events */
#flow text { fill: var(--muted); font-size: 11px; font-family: var(--font); }
#flow .gutter { fill: var(--bg); }
#flow .lane-name { fill: var(--text); font-size: 12.5px; cursor: grab; }
#flow .lane-name.lifting { fill: var(--pos); }
#flow .lane-drop { stroke: var(--text); stroke-width: 1.5; }
#flow .lane-bal { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
#flow .lane-bal.neg { fill: var(--neg); font-weight: 600; }
#flow .dip { fill: none; stroke: var(--neg); stroke-width: 2; pointer-events: all; }
#flow .lane { stroke: var(--chart-grid); }
#flow .lane.minor { stroke-opacity: .6; }
#flow text.major { fill: var(--text); }
#flow .band { fill: none; }
#flow .band-label { fill: var(--muted); }
#flow .bal-line, #legend .bal-line { fill: none; stroke: var(--chart-line); stroke-width: 1.5; }
#flow .bal-area { fill: var(--chart-area); }
#flow .lg-icon { font-size: 12px; cursor: pointer; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
#flow .lg-icon.hl { font-size: 15px; } #flow .lg-icon.sel { font-size: 17px; } #flow .lg-icon.dim { opacity: .15; }
.lg { font-size: 12px; }
.lg.buy, #flow .lg-icon.buy { fill: var(--chart-up); color: var(--chart-up); }
.lg.income, #flow .lg-icon.income { fill: var(--series-3); color: var(--series-3); }
.lg.in, #flow .lg-icon.in { fill: var(--series-3); color: var(--series-3); }
.lg.out, #flow .lg-icon.out { fill: var(--series-3); color: var(--series-3); }
.lg.sell, #flow .lg-icon.sell { fill: var(--chart-down); color: var(--chart-down); }
.lg.gift, #flow .lg-icon.gift { fill: var(--series-4); color: var(--series-4); }
.lg.unmatched, #flow .lg-icon.unmatched { fill: var(--neg); color: var(--neg); }
.lg.consol, #flow .lg-icon.consol { fill: var(--series-4); color: var(--series-4); }
#flow .hl { fill: var(--pos); }
#flow .sel { fill: var(--text); }
#flow .hub, #legend .hub { fill: var(--bg); stroke: var(--series-3); stroke-width: 1.5; }
#flow .hub-text, #legend .hub-text, #flow .consol-text, #legend .consol-text { font-size: 9px; font-weight: 600; fill: var(--text); pointer-events: none; }
#flow .arrowhead, #legend .arrowhead { fill: var(--series-3); }
#flow .link { stroke: var(--series-3); stroke-opacity: .45; fill: none; }
#legend .link { stroke: var(--series-3); }
#flow .link-end { fill: var(--bg); stroke: var(--series-3); stroke-width: 1.5; cursor: pointer; }
#flow .tr { cursor: pointer; }
#flow .tr.hl .link, #flow .tr.sel .link, #flow .link.hl, #flow .link-end.hl { stroke: var(--pos); stroke-opacity: 1; }
#flow .tr.hl .arrowhead, #flow .tr.sel .arrowhead { fill: var(--pos); }
#flow .consol-g { cursor: pointer; }
#flow .consol, #legend .consol { fill: var(--bg); stroke: var(--series-3); stroke-width: 1.5; }
#flow .dim { opacity: .15; }
.dot { cursor: pointer; stroke: var(--bg); stroke-width: 1.5; }
.dot.buy { fill: var(--chart-up); } .dot.sell, .dot.spend, .dot.sold { fill: var(--chart-down); }
.dot.income, .dot.purchase, .dot.gift-in { fill: var(--series-3); }
.dot.unmatched { fill: var(--neg); } .dot.gift, .dot.donation, .dot.lost, .dot.untracked, .dot.refund { fill: var(--series-4); }

/* Custody graph (vis-network canvas; its colors come from the JS via cssVar) */
#net { width: 100%; height: 100%; }
#tg { width: 100%; height: 100%; }

/* ---------- Transaction page ---------- */
#lookup h2 .mono { font-size: 13px; font-weight: 400; overflow-wrap: anywhere; }
.io { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 900px) { .io { grid-template-columns: 1fr; } }
.io td.addr { white-space: normal; overflow-wrap: anywhere; font-family: var(--mono); font-size: 12px; }
.rec { margin: var(--s-2) 0; }
.rec h3 { margin: 0 0 var(--s-3); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: var(--fs-md); }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; font-size: var(--fs-sm); align-items: baseline; }
dl.facts dd { margin: 0; }

/* ---------- Wallets, Imports, Settings ---------- */
.cosigner { display: flex; gap: var(--s-2); align-items: center; margin: 6px 0; }
.cosigner input { flex: 1; font-family: var(--mono); font-size: 12px; }
.hint-line { display: block; margin-top: 2px; }
.fresh.stale { border-color: var(--neg); }
.fresh div { margin: 2px 0; }
#recheck-status { margin-top: var(--s-3); } #recheck-bar { width: 240px; vertical-align: middle; }
#settings h3.wide { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); font-family: var(--font); margin: var(--s-3) 0 0; padding-top: var(--s-3); border-top: 1px solid var(--line); }
#settings form.card .wide.row, #wallets form.card .wide.row, #imports form.card .wide.row { gap: var(--s-2) var(--s-3); }
#settings .card b.wide { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-md); }
#settings #restore-form { padding-top: var(--s-5); margin-top: var(--s-3); }
#settings #backup-form { padding-bottom: var(--s-3); }

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  .ov-head > span.small { display: none; }
  .ov-grip { display: none; }
  .ov-card[data-card="history"] { padding: 4px 0; }
  .ov-card[data-card="now"] .ov-head { justify-content: flex-end; }
  .ov-card[data-card="now"] .tiles { grid-template-columns: 1fr 1fr; gap: var(--s-2); }
  #hero { padding: var(--s-4) 0 var(--s-4); }
  #history-range { justify-content: space-between; }
  #history-range .seg { display: flex; flex: 1; } #history-range .seg button { flex: 1; text-align: center; padding: 6px 0; }
  #history-range .muted { display: none; }
  #history text { font-size: 10px; }
  .tiles { grid-template-columns: 1fr 1fr; gap: var(--s-2); }
  .tile { padding: 10px 12px; } .tile .v { font-size: 20px; }
  #accounts-table th:nth-child(2), #accounts-table td:nth-child(2), #accounts-table th:nth-child(4), #accounts-table td:nth-child(4) { display: none; }
  .graph-area { height: calc(100vh - var(--nav-h) - 250px); }
  .whatif-grid { grid-template-columns: 1fr 1fr; }
  #review-table td.row { min-width: 220px; }
}
/* Login page */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-box { width: 100%; max-width: 380px; }
.login-box h1 { text-align: center; margin-bottom: 12px; }
.login-box form { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.login-box h2 { margin: 0; }
.login-box input { padding: 10px 12px; }
.login-box button { padding: 10px 12px; }
.login-box p { margin: 0; }
.login-error { color: var(--sell); text-align: center; margin: 8px 0 0; }

.attach-box { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.attach-box .att-add { cursor: pointer; text-decoration: underline; }

.checklist { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.checklist li { line-height: 1.4; }

a.button { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2); text-decoration: none; color: inherit; }
a.button.primary { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

.taxform { margin: 8px 0; padding: 10px 12px; }
.taxform .row { margin-top: 6px; flex-wrap: wrap; gap: 8px; }

/* Tax season: a numbered list of steps, each a card that opens. */
.season-head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin: var(--s-6) 0 var(--s-2); }
.season-head h2 { margin: 0; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.step { min-width: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.step[data-state="bad"] { border-color: var(--neg); }
.step-head { width: 100%; display: flex; align-items: center; gap: var(--s-3); padding: 14px 16px; border: 0; border-radius: var(--r-sm); background: transparent; text-align: left; font-size: var(--fs-md); font-weight: 600; min-height: 0; }
.step-head:hover { background: var(--panel-2); }
.step-n { flex: none; width: 28px; height: 28px; border-radius: var(--pill); border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-sm); }
.step[data-state="ok"] .step-n, .step[data-state="na"] .step-n { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.step-title { flex: 1; min-width: 0; }
.step-body { min-width: 0; overflow: hidden; display: none; padding: 0 16px 16px 57px; }
.step.open .step-body { display: block; }
.step-body > p:first-child { margin-top: 0; }
.step-pill { display: inline-block; padding: 3px 10px; border-radius: var(--pill); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; border: 1px solid var(--line); color: var(--muted); }
.step-pill.ok { background: var(--accent-soft); color: var(--text); border-color: transparent; }
.step-pill.bad { background: var(--neg-soft); color: var(--neg); border-color: transparent; }
.step-pill.warn { color: var(--neg); }
.tf-card { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; margin: var(--s-2) 0; display: grid; gap: 8px; }
.tf-head { display: flex; gap: var(--s-2); align-items: baseline; flex-wrap: wrap; }
.tf-form { gap: 8px; }
.dropzone { text-transform: none; letter-spacing: normal; font-weight: 400; display: block; border: 1px dashed var(--line-2); border-radius: var(--r-sm); padding: 16px; text-align: center; color: var(--muted); cursor: pointer; font-size: var(--fs-sm); }
.dropzone.inline { padding: 10px 14px; text-align: left; margin-top: var(--s-2); }
.dropzone:hover, .dropzone.over { border-color: var(--text); background: var(--accent-soft); color: var(--text); }
.dropzone .link { text-decoration: underline; }
.handoff { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin: var(--s-3) 0; }
.handoff .check { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 640px) {
  .step-body { padding: 0 12px 14px; }
  .step-head { padding: 12px; gap: var(--s-2); font-size: var(--fs-sm); }
}

/* A part of the page a link just pointed at. */
.flash { animation: flash 1.6s ease-out; border-radius: var(--r-sm); }
@keyframes flash { 0%, 30% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; box-shadow: 0 0 0 3px var(--accent); } }
/* Leave room for the fixed header when a link scrolls to a part. */
#season-steps .step, #season-alloc, #income-types-table, #gifts-table, #forms-table, .tf-card, #taxform-other { scroll-margin-top: 84px; }

/* A record: its page and Flow's popup share one layout. */
.rec-view { min-width: 0; }
.rec-head { display: flex; gap: var(--s-4); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: var(--s-4); }
.rec-title { min-width: 0; flex: 1 1 360px; }
.rec-title h2 { margin: var(--s-2) 0 0; font-size: var(--fs-xl); line-height: 1.2; font-weight: 600; overflow-wrap: anywhere; }
.rec-view.compact .rec-title h2 { font-size: var(--fs-lg); }
.rec-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.rec-actions .button, .rec-actions button { min-height: 36px; }
.rec-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); margin: 0 0 var(--s-5); }
.stat { border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); background: var(--panel); min-width: 0; }
.stat .k { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); }
.stat .v { font-size: var(--fs-lg); font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat .c { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.rec-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 0 var(--s-5); align-items: start; }
.rec-main, .rec-side { min-width: 0; }
.rec-sec { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); padding: var(--s-4); margin-bottom: var(--s-4); min-width: 0; }
.rec-sec > h3, .rec-sub { margin: 0 0 var(--s-3); font-family: var(--font); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); }
.rec-sec h4 { margin: var(--s-3) 0 var(--s-2); font-size: var(--fs-sm); font-weight: 600; }
.rec-sec .txf { margin-bottom: var(--s-2); }
.lots { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.lot { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) 48px; gap: 4px var(--s-3); padding: 8px 0; border-top: 1px solid var(--line); align-items: baseline; }
.lot.went { grid-template-columns: minmax(0, 2.6fr) repeat(2, minmax(0, 1fr)); }
.lot.head { border-top: 0; padding-top: 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); }
.lot .num { text-align: right; font-variant-numeric: tabular-nums; }
.route { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.chip { display: inline-block; padding: 1px 8px; border-radius: var(--pill); border: 1px solid var(--line-2); font-size: var(--fs-xs); white-space: nowrap; }
.rec-side .label-box { margin: 0; padding: 0; border: 0; }
.rec-side .label-box .spacer { flex-basis: 100%; height: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.rec-side dl, .rec-sec dl.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: var(--fs-sm); align-items: baseline; }
.rec-side dd, .rec-sec dl.facts dd { margin: 0; overflow-wrap: anywhere; }
.rec-side .attach-box { margin: 0; display: block; }
.att-list { list-style: none; margin: 0 0 var(--s-2); padding: 0; display: grid; gap: 4px; }
.attach-box .att-note { width: 100%; margin-top: var(--s-2); }
.src-row dt { color: var(--muted); text-transform: none; letter-spacing: normal; font-family: var(--mono); font-size: 12px; }
.rec-mini-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.rec-mini { display: inline-flex; gap: var(--s-2); align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--text); text-align: left; min-height: 0; }
.rec-mini:hover { border-color: var(--line-2); background: var(--panel-2); }
.rec-view.compact .rec-stats { margin-bottom: var(--s-4); }
.rec-view.compact .rec-treat .label-box { margin-top: 0; padding: 0 0 var(--s-3); border-top: 0; border-bottom: 1px solid var(--line); margin-bottom: var(--s-3); }
.rec-view.compact .rec-treat > p { margin: 0 0 var(--s-3); }
.rec-foot { display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap; margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.rec-foot .hint { margin-left: auto; }
@media (max-width: 760px) {
  /* One column on a phone: numbers, then what to do, then the story. */
  .rec-body { display: flex; flex-direction: column; align-items: stretch; }
  .rec-main, .rec-side { display: contents; }
  .rec-tax { order: 1; } .rec-flow { order: 2; } .rec-went { order: 3; } .rec-details { order: 4; } .rec-proof { order: 5; }
  .rec-title h2 { font-size: var(--fs-lg); }
  .rec-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .stat { padding: var(--s-2) var(--s-3); }
  .lot { grid-template-columns: minmax(0, 1fr) auto auto; }
  .lot > :nth-child(3), .lot > :nth-child(5) { display: none; }
  .lot.went > :nth-child(3) { display: block; }
  .io { grid-template-columns: 1fr; }
  .rec-foot .hint { display: none; }
  .rec-view.page { padding-bottom: 72px; }
  .rec-view.page .rec-actions { position: fixed; left: var(--s-3); right: var(--s-3); bottom: calc(var(--tabbar-h, 56px) + 28px); z-index: 25; justify-content: center;
    padding: var(--s-2); border-radius: var(--pill); background: var(--glass-fill-2); border: 1px solid var(--glass-border); box-shadow: var(--glass-hi), var(--shadow-pop);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
}
.stat .pct { font-size: var(--fs-sm); font-weight: 600; margin-left: 4px; }

/* ⓘ: the longer explanation behind a short note. */
.info { position: relative; display: inline-block; vertical-align: baseline; text-transform: none; letter-spacing: normal; font-weight: 400; }
.info-btn { min-height: 0; height: auto; padding: 0 2px; border: 0; background: none; color: var(--muted); font-size: 13px; line-height: 1; cursor: help; box-shadow: none; }
.info-btn:hover, .info.open .info-btn { color: var(--text); background: none; transform: none; }
.info-tip { display: none; position: absolute; left: -8px; top: calc(100% + 6px); z-index: 60; width: max-content; max-width: min(340px, 80vw); padding: 10px 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel); color: var(--text); box-shadow: var(--shadow-pop);
  font-size: var(--fs-sm); line-height: 1.45; white-space: normal; text-align: left; overflow-wrap: anywhere; }
.info-tip code { font-size: 12px; }
.info:hover .info-tip, .info.open .info-tip { display: block; }
@media (max-width: 640px) {
  .info-tip { position: fixed; left: 16px; right: 16px; top: auto; bottom: calc(var(--tabbar-h) + 28px); max-width: none; width: auto; }
}
/* A label's own text, when it also holds an info mark. */
label > .lbl-text { font-weight: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }

/* Flow on a phone: the key folds behind its button. */
.key-btn { display: none; }
@media (max-width: 760px) {
  .key-btn { display: inline-flex; }
  #graph:not(.show-key) .tg-legend { display: none !important; }
  #graph .tg-legend { gap: 4px 12px; font-size: var(--fs-xs); }
  #graph.show-key .key-btn { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
}
#zoom-level { display: inline-block; min-width: 4.5em; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  /* The zoom readout sits at the right, just above the chart. */
  .graph-bar #zoom-level { order: 10; margin-left: auto; align-self: flex-end; line-height: 1; position: relative; }
  #graph:not(.show-key) .graph-bar #zoom-level { top: 10px; }
}

/* Review on a phone: one item at a time (deck.js); desktop keeps the table. */
.deck { display: none; scroll-margin-top: calc(var(--nav-h) + 12px); }
@media (max-width: 760px) {
  #review .review-table-wrap { display: none; }
  .deck { display: block; margin-bottom: var(--s-6); }
}
.deck-top { display: flex; align-items: center; gap: 8px; margin: var(--s-2) 0 var(--s-3); font-size: var(--fs-sm); }
.deck-top progress { flex: 1; height: 4px; margin-left: var(--s-2); accent-color: var(--accent); }
.deck-undo { display: flex; gap: 8px; align-items: center; padding: 8px 12px; margin-bottom: var(--s-3); border-radius: var(--r-sm); background: var(--panel-2); }
.deck-undo button { margin-left: auto; }
.deck-card { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); padding: var(--s-4); }
.deck-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.deck-when { margin-left: auto; }
.deck-acct { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--muted); }
.deck-amt { font-size: var(--fs-xl); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.deck-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: var(--s-3) 0 0; font-size: var(--fs-sm); }
.deck-facts dt { color: var(--muted); }
.deck-facts dd { margin: 0; overflow-wrap: anywhere; }
.deck-links { display: flex; gap: var(--s-4); margin-top: var(--s-3); }
.deck-q { margin: var(--s-4) 0 var(--s-2); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); }
.deck-choices, .deck-pick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.deck-pick { grid-template-columns: 1fr; }
.deck-choice { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 52px; padding: 8px 12px; text-align: left;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel); color: var(--text); font-weight: 600; }
.deck-choice .small { font-weight: 400; }
.deck-choice.on { border-color: var(--text); background: var(--panel-2); }
.deck-follow { margin-top: var(--s-3); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); display: grid; gap: var(--s-2); }
.deck-follow > p { margin: 0; }
.deck-nav { display: flex; justify-content: space-between; margin-top: var(--s-4); }

/* The same space under the page title on every tab: 20px, whatever the
   page starts with. (Overview has no title.) main's own top padding is
   part of it. */
main > .tab:not(#overview) { padding-top: calc(20px - var(--s-4)); }
main > .tab > :first-child, main > .tab > :first-child > :first-child, main > .tab > [hidden]:first-child + *,
main > .tab > :empty:first-child + *, main > .tab > .season-head:first-of-type { margin-top: 0; }
@media (max-width: 760px) { main > .tab:not(#overview) { padding-top: calc(20px - var(--s-2)); } }

/* Disclaimer: its page, the first-use notice and the footer link. */
.disclaimer-text { max-width: 70ch; font-size: var(--fs); line-height: 1.55; }
.disclaimer-text ul { padding-left: 1.2em; margin: var(--s-3) 0 0; }
.disclaimer-text li { margin: 0 0 var(--s-2); }
#disclaimer-pop { width: min(640px, calc(100vw - 32px)); max-height: min(86vh, 900px); padding: 0; margin: auto; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel); color: var(--text); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); overflow: auto; }
#disclaimer-pop::backdrop { background: rgba(0, 0, 0, .55); }
#disclaimer-pop .detail-inner { padding: var(--s-5); }
#disclaimer-pop h2 { margin: 0 0 var(--s-3); outline: none; } /* focused on open, to start at the top */
#disclaimer-pop .row { justify-content: flex-end; margin-top: var(--s-3); }
#foot { margin-top: var(--s-7); padding-top: var(--s-3); border-top: 1px solid var(--line); text-align: center; }
body.flow #foot { display: none; }

/* Demo mode: a red banner under the nav (above it on a phone), and the
   parts that don't apply to a public demo hidden. */
body:not(.demo) .demo-only { display: none !important; }
body.demo .no-demo { display: none !important; }
.demo-note { margin: 0 0 var(--s-3); }
#demo-banner { position: sticky; top: var(--nav-h); z-index: 19; background: var(--neg); color: #fff; text-align: center;
  padding: 6px var(--s-4); font-size: var(--fs-sm); line-height: 1.3; }
#demo-banner .link { color: #fff; text-decoration: underline; margin-left: 6px; min-height: 0; padding: 0; background: none; border: 0; }
@media (max-width: 760px) {
  #demo-banner { position: fixed; top: auto; left: var(--s-3); right: var(--s-3); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 66px);
    border-radius: var(--pill); z-index: 29; font-size: var(--fs-xs); box-shadow: var(--shadow-pop); }
  body.demo main { padding-bottom: calc(var(--tabbar-h) + 72px); }
  body.demo #toast { bottom: calc(var(--tabbar-h) + 60px); }
  body.demo .rec-view.page .rec-actions { bottom: calc(var(--tabbar-h) + 64px); }
  body.demo .info-tip { bottom: calc(var(--tabbar-h) + 64px); }
}