/* Hallmark · shape: app screen · genre: modern-minimal · theme: Coral (deal 1/3, seed private-paper-trading-dashboard-d0b2·ff23ccc6·2026-11-11·r0)
 * nav: top bar, wordmark, mode chip, ledger status · signature: the decision ledger as index cards with risk checks and a pressed "Filled" · states: loading, empty, error, full
 * axes: light/grotesk-sans/warm · posture: restrained · contrast: pass · modes: light+dark · data: sample on the demo, simulated and labelled · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H- E3 S3 R3 V3 · weakest: the stat row reads like a KPI strip; kept to four honest figures, each with its comparison, no icons or trend arrows */

/* Layout: one capped column; a top bar, then results (figures, one chart, one table), the ledger, holdings, controls. */
.container { padding-left: max(var(--space-md), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-md), env(safe-area-inset-right, 0px)); }
@media (min-width: 60rem) { .container { padding-left: max(var(--space-xl), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-xl), env(safe-area-inset-right, 0px)); } }

body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 310; background: var(--color-paper); }
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-sticky-nav); background: color-mix(in oklab, var(--color-paper) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-rule); }
.bar-inner { max-width: var(--container); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); padding-block: var(--space-sm); padding-left: max(var(--space-md), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-md), env(safe-area-inset-right, 0px)); min-height: 56px; }
.wordmark { font-weight: 600; letter-spacing: var(--tracking-display); font-size: var(--text-lg); text-decoration: none; color: var(--color-ink); }
.chip { font-size: var(--text-sm); padding: var(--space-2xs) var(--space-sm); border: 1px solid var(--color-ink-2); border-radius: var(--radius-input); color: var(--color-ink); }
.bar-meta { margin-left: auto; font-size: var(--text-sm); color: var(--color-muted); display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); }
.ledger[data-ok="no"] { color: var(--color-down); font-weight: 600; }

main { padding-block: var(--space-xl) var(--space-2xl); display: grid; gap: var(--space-xl); }
.intro { display: grid; gap: var(--space-xs); }
.intro h1 { font-size: var(--text-3xl); }
.muted { color: var(--color-muted); font-size: var(--text-sm); }
code { font-family: var(--font-outlier); font-size: 0.92em; background: var(--color-paper-2); padding: 0 var(--space-2xs); border-radius: 4px; }
.num { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }

.jump { display: flex; gap: var(--space-md); overflow-x: auto; border-bottom: 1px solid var(--color-rule); padding-bottom: var(--space-xs); font-size: var(--text-sm); }
.jump a { color: var(--color-ink-2); text-decoration: none; padding-block: var(--space-xs); white-space: nowrap; }
.jump a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent-2); }

[data-state="full"] { display: grid; gap: var(--space-2xl); }
.block { display: grid; gap: var(--space-md); min-width: 0; }
.block-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-sm); }
.block h2 { font-size: var(--text-2xl); }

/* Figures */
.stats { display: grid; grid-template-columns: repeat(var(--stat-cols, 4), minmax(0, 1fr)); border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
.stat { position: relative; padding: var(--space-md) var(--space-md) var(--space-md) 0; display: grid; gap: var(--space-3xs); align-content: start; min-width: 0; }
.stat + .stat { padding-left: var(--space-md); border-left: 1px solid var(--color-rule); }
.stat .swatch { position: absolute; top: calc(var(--space-md) + 6px); }
.stat + .stat .swatch { left: var(--space-md); }
.stat-label { padding-left: var(--space-lg); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); }
.stat-figure { font-variant-numeric: tabular-nums; font-size: var(--text-2xl); color: var(--color-ink); line-height: 1.2; }
.stat-note { font-size: var(--text-xs); color: var(--color-muted); }
[data-trend="up"] { color: var(--color-up); }
[data-trend="down"] { color: var(--color-down); }
.stat-note[data-trend] { color: var(--color-muted); }
@media (max-width: 52rem) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(3) .swatch { left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--color-rule); }
}
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }

/* Chart */
.chart-wrap { margin: 0; display: grid; gap: var(--space-xs); min-width: 0; }
.chart { width: 100%; min-height: 220px; }
.chart .grid { stroke: var(--color-rule); stroke-width: 1; }
.chart .baseline { stroke: var(--color-rule-2); stroke-width: 1; }
.chart .series { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .axis { fill: var(--color-muted); font-family: var(--font-outlier); font-size: 11px; }
.legend { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.legend li { display: flex; align-items: center; gap: var(--space-xs); }

/* Tables */
.table-wrap { overflow-x: auto; min-width: 0; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { text-align: left; padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); white-space: nowrap; }
thead th { font-weight: 500; color: var(--color-muted); }
th.num, td.num { text-align: right; padding-right: 0; padding-left: var(--space-sm); }
tbody th { font-weight: 500; }
tbody th .swatch { margin-right: var(--space-xs); }
@media (max-width: 40rem) {
  .results thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .results tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xs) var(--space-sm); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
  .results th, .results td { border: 0; padding: 0; text-align: left; white-space: normal; }
  .results tbody th { grid-column: 1 / -1; font-size: var(--text-md); }
  .results td::before { content: attr(data-label); display: block; font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-muted); }
}

/* The ledger: decisions as index cards on cotton stock */
.cards { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); align-items: start; }
.card { background: var(--color-cotton); color: var(--color-print); border-radius: var(--radius-stock); box-shadow: var(--edge-stock), var(--cast-stock); padding: var(--space-md); display: grid; gap: var(--space-sm); min-width: 0; }
.card-head { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--space-sm); align-items: start; padding-bottom: var(--space-xs); border-bottom: 1px solid var(--color-rule); }
.card-date { font-size: var(--text-xs); color: var(--color-muted); grid-column: 1; }
.card-head h3 { grid-column: 1; font-size: var(--text-lg); color: var(--color-print); }
.card-head .pressed, .card-head .outline { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.pressed { font-weight: 600; color: var(--color-paid); font-size: var(--text-md); transform: rotate(-4deg); padding: var(--space-3xs) var(--space-xs); border: 1.5px solid var(--color-paid); border-radius: 4px; opacity: 0.92; }
.outline { font-size: var(--text-sm); color: var(--color-ink-2); border: 1px solid var(--color-rule-2); border-radius: 4px; padding: var(--space-3xs) var(--space-xs); }
.card-text { font-size: var(--text-sm); line-height: 1.6; color: var(--color-print); overflow-wrap: anywhere; }
.orders { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); font-size: var(--text-sm); }
.orders li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3xs) var(--space-sm); padding-block: var(--space-2xs); border-bottom: 1px dotted var(--color-rule-2); }
.orders li[data-status="filled"] .order-status { color: var(--color-muted); }
.orders li:not([data-status="filled"]) { color: var(--color-muted); }
.order-status { font-size: var(--text-xs); }
.checks summary { cursor: pointer; font-size: var(--text-sm); color: var(--color-ink-2); padding-block: var(--space-2xs); min-height: 32px; display: flex; align-items: center; }
.checks summary:hover { color: var(--color-ink); }
.checks ul { margin: var(--space-xs) 0 0; padding-left: var(--space-lg); display: grid; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.checks li[data-passed="no"] strong { color: var(--color-down); }
.checks strong { font-weight: 500; }
.card-hash { font-size: var(--text-xs); color: var(--color-muted); }

/* Holdings */
.holdings { display: grid; gap: var(--space-lg) var(--space-xl); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.holding { display: grid; gap: var(--space-xs); align-content: start; min-width: 0; }
.holding h3 { font-size: var(--text-lg); }
.mini th, .mini td { padding-block: var(--space-xs); }
.cash { font-size: var(--text-sm); color: var(--color-muted); }

/* Controls */
.controls { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 0; margin: 0; max-width: 60rem; }
.controls dt, .controls dd { padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); margin: 0; font-size: var(--text-sm); }
.controls dt { font-weight: 600; padding-right: var(--space-md); }
.controls dd { color: var(--color-ink-2); }
@media (max-width: 40rem) { .controls { grid-template-columns: minmax(0, 1fr); } .controls dt { border-bottom: 0; padding-bottom: 0; } }

/* Controls on the page */
.field { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
select { min-height: 40px; padding: 0 32px 0 var(--space-sm); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-cotton); color: var(--color-ink); font-size: max(16px, var(--text-sm)); }
select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; }
.button { min-height: 40px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-stock); background: var(--color-board); color: var(--color-board-type); font-weight: 500; cursor: pointer; box-shadow: var(--cast-stock); transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.button:hover { transform: translateY(-1px); box-shadow: var(--cast-stock-lift); }
.button:active { transform: translateY(1px); box-shadow: none; }
.button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
select:disabled, .button:disabled { opacity: 0.55; cursor: not-allowed; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* States */
.state { display: grid; gap: var(--space-sm); max-width: 44rem; }
.state h2 { font-size: var(--text-xl); }
.skeleton { background: var(--color-paper-2); border-radius: var(--radius-card); animation: pulse 1.4s var(--ease-in-out) infinite alternate; }
.skeleton-row { height: 84px; }
.skeleton-chart { height: 240px; }
@keyframes pulse { from { opacity: 1; } to { opacity: 0.55; } }
.empty-inline { padding-block: var(--space-md); }

.foot { padding-block: var(--space-lg) var(--space-2xl); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.foot p { max-width: 70ch; }

/* Series colours, one per strategy, the benchmark in a neutral */
.swatch.s-trend { background: var(--series-1); } .series.s-trend { stroke: var(--series-1); }
.swatch.s-rebalance { background: var(--series-2); } .series.s-rebalance { stroke: var(--series-2); }
.swatch.s-momentum { background: var(--series-3); } .series.s-momentum { stroke: var(--series-3); }
.swatch.s-benchmark { background: var(--series-bench); } .series.s-benchmark { stroke: var(--series-bench); }
.stats:has(.stat:nth-child(5)) { --stat-cols: 3; }
.stats:has(.stat:nth-child(5)) .stat:nth-child(4) { padding-left: 0; border-left: 0; }
.stats:has(.stat:nth-child(5)) .stat:nth-child(4) .swatch { left: 0; }
.stats:has(.stat:nth-child(5)) .stat:nth-child(n+4) { border-top: 1px solid var(--color-rule); }
.swatch.s-dayrules { background: var(--series-4); } .series.s-dayrules { stroke: var(--series-4); }
.swatch.s-dayml { background: var(--series-5); } .series.s-dayml { stroke: var(--series-5); }
@media (max-width: 52rem) {
  .stats:has(.stat:nth-child(5)) { --stat-cols: 2; }
  .stats:has(.stat:nth-child(5)) .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stats:has(.stat:nth-child(5)) .stat:nth-child(odd) .swatch { left: 0; }
  .stats:has(.stat:nth-child(5)) .stat:nth-child(even) { padding-left: var(--space-md); border-left: 1px solid var(--color-rule); }
  .stats:has(.stat:nth-child(5)) .stat:nth-child(even) .swatch { left: var(--space-md); }
  .stats:has(.stat:nth-child(5)) .stat:nth-child(n+3) { border-top: 1px solid var(--color-rule); }
}
.dot.s-trend { fill: var(--series-1); } .dot.s-rebalance { fill: var(--series-2); } .dot.s-momentum { fill: var(--series-3); }
.dot.s-dayrules { fill: var(--series-4); } .dot.s-dayml { fill: var(--series-5); } .dot.s-benchmark { fill: var(--series-bench); }

/* Desks: one switcher, so each chart compares books of the same size and period */
.segmented { display: inline-flex; border: 1px solid var(--color-rule-2); border-radius: var(--radius-input); padding: 2px; gap: 2px; background: var(--color-paper-2); }
.segmented button { min-height: 36px; padding: 0 var(--space-sm); border: 0; border-radius: calc(var(--radius-input) - 2px); background: transparent; color: var(--color-ink-2); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--color-cotton); color: var(--color-ink); font-weight: 600; box-shadow: var(--edge-stock); }
.segmented button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.segmented[hidden] { display: none; }
.swatch.s-orch { background: var(--series-1); } .series.s-orch { stroke: var(--series-1); } .dot.s-orch { fill: var(--series-1); }
.swatch.s-orchfast { background: var(--series-bench); } .series.s-orchfast { stroke: var(--series-bench); stroke-dasharray: 5 4; } .dot.s-orchfast { fill: var(--series-bench); }

/* Agents */
.facts { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); border-top: 1px solid var(--color-rule); }
.facts dt, .facts dd { padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); margin: 0; }
.facts dt { font-weight: 500; color: var(--color-ink-2); font-size: var(--text-sm); }
.facts dd { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; font-size: var(--text-sm); }
@media (max-width: 40rem) { .facts { grid-template-columns: minmax(0, 1fr); } .facts dt { border-bottom: 0; padding-bottom: 0; } }
.scores tr[data-fresh="no"] { color: var(--color-muted); }
.holdings-note { grid-column: 1 / -1; }
.scores th.num, .scores td.num { text-align: left; padding-right: var(--space-lg); white-space: nowrap; width: 6rem; }