/* Vandelin Capital: the investor portal. Black surfaces, gold hairlines, figures in clean lining numerals. */

:root {
  --ink: #07070A;
  --surface: #0E0E12;
  --surface-2: #141418;
  --gold: #C8A86B;
  --gold-light: #E5D4A8;
  --gold-dim: #7A6540;
  --cream: #F2EDE2;
  --stone: #9C9483;
  --line: rgba(200, 168, 107, .16);
  --line-strong: rgba(200, 168, 107, .32);
  --gain: #7FC8A0;
  --loss: #E0857A;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }  /* a class that sets display must not bring a hidden thing back */

html { background: var(--ink); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--cream);
  font: 400 .9375rem/1.55 var(--sans);
  font-variant-numeric: tabular-nums lining-nums;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-light); }

button { font: inherit; cursor: pointer; border-radius: 0; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

h1, h2, h3, p { margin: 0; }

/* the brand's small label: upper case, widely spaced */
.label, .panel-head h2, .table th, .side a, .chip, .badge, .button {
  font: 500 .68rem/1.4 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.quiet { color: var(--stone); }
.problem { color: var(--loss); }
.gain { color: var(--gain); }
.loss { color: var(--loss); }

.wordmark {
  font: 400 1.05rem/1 var(--serif);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream);
}
.wordmark span { color: var(--gold); }
a.wordmark:hover { color: var(--cream); }

/* ---------------------------------------------------------------- the shell */

.topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 3.75rem;
  padding: 0 1.75rem;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}
.who { display: flex; align-items: center; gap: 1.25rem; }
.who-name { color: var(--stone); }

.layout { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); min-height: calc(100vh - 3.75rem); }

.side {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1.75rem 0;
  border-right: 1px solid var(--line);
}
.side a {
  padding: .8rem 1.75rem;
  color: var(--stone);
  border-left: 2px solid transparent;
}
.side a:hover { color: var(--cream); }
.side a[aria-current] { color: var(--cream); border-left-color: var(--gold); background: var(--surface); }

.view { padding: 2rem 2.25rem 4rem; max-width: 76rem; width: 100%; }

.page-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: 1.5rem; }
.page-head h1 { font: 400 2rem/1.15 var(--serif); letter-spacing: .01em; }
.asof { color: var(--stone); }

/* ---------------------------------------------------------------- panels and figures */

.panel { background: var(--surface); border: 1px solid var(--line); }
.panel + .panel, .stats + .panel, .grid + .panel, .panel + .grid, .stats + .grid, .notice + .stats, .notice + .panel { margin-top: 1.25rem; }
.panel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.panel-head h2 { color: var(--gold-light); }
.panel-body { padding: 1.25rem; }

.grid { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.25rem; }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.stack > .panel + .panel { margin-top: 0; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { background: var(--surface); border: 1px solid var(--line); padding: 1.1rem 1.25rem 1.2rem; }
.stat .label { color: var(--stone); }
.stat-value { margin-top: .55rem; font: 400 1.7rem/1.15 var(--sans); letter-spacing: -.01em; white-space: nowrap; }
.stat-sub { margin-top: .4rem; color: var(--stone); font-size: .85rem; }

.notice { padding: .85rem 1.1rem; border: 1px solid var(--line); border-left: 2px solid var(--gold); background: var(--surface); color: var(--gold-light); }
.notice + .notice { margin-top: .6rem; }

.empty { padding: 3rem 1.5rem; text-align: center; }
.empty h2 { font: 400 1.5rem/1.2 var(--serif); margin-bottom: .5rem; }

/* ---------------------------------------------------------------- tables */

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: .75rem 1.25rem; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
.table th { color: var(--stone); font-weight: 500; background: var(--surface-2); }
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table tbody th { font: inherit; letter-spacing: 0; text-transform: none; color: var(--cream); background: none; }
.table .num { text-align: right; }
.table tr.total td, .table tr.total th { color: var(--gold-light); background: var(--surface-2); }
.table td.wrap { white-space: normal; }
.table.compact th, .table.compact td { padding: .7rem .6rem; }
.table.compact th:first-child, .table.compact td:first-child { padding-left: 1.25rem; }
.table.compact th:last-child, .table.compact td:last-child { padding-right: 1.25rem; }
.table.compact thead th { white-space: normal; }
.table.pairs tbody th { color: var(--stone); }

.badge { display: inline-block; padding: .2rem .5rem; border: 1px solid var(--line-strong); color: var(--stone); font-size: .6rem; }
.badge.deposit { color: var(--gain); border-color: rgba(127, 200, 160, .4); }
.badge.withdrawal { color: var(--gold-light); }
.badge.fee { color: var(--stone); }
.badge.provisional { color: var(--gold); border-color: var(--gold-dim); margin-left: .6rem; }

.facts { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); margin: 0; }
.facts dt, .facts dd { margin: 0; padding: .8rem 1.25rem; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--stone); }
.facts dt:last-of-type, .facts dd:last-of-type { border-bottom: 0; }

/* ---------------------------------------------------------------- buttons, chips */

.button {
  display: inline-block;
  padding: .7rem 1.1rem;
  color: var(--gold-light);
  background: none;
  border: 1px solid var(--line-strong);
}
.button:hover { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.button.ghost { border-color: transparent; color: var(--stone); padding-right: 0; }
.button.ghost:hover { background: none; color: var(--cream); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.chips { display: flex; gap: .35rem; }
.chip { padding: .4rem .7rem; color: var(--stone); background: none; border: 1px solid transparent; }
.chip:hover { color: var(--cream); }
.chip[aria-pressed="true"] { color: var(--ink); background: var(--gold); }
.chip:disabled { opacity: .35; cursor: default; }

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

.readout { display: flex; flex-wrap: wrap; gap: .35rem 1.75rem; margin-bottom: .75rem; color: var(--stone); }
.readout strong { color: var(--cream); font-weight: 400; }
.readout .key::before { content: ""; display: inline-block; width: .9rem; margin-right: .5rem; vertical-align: middle; border-top: 2px solid var(--gold); }
.readout .key-invested::before { border-top: 1px dashed var(--stone); }

.chart { display: block; width: 100%; height: auto; touch-action: pan-y; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-axis { fill: var(--stone); font: 400 11px var(--sans); }
.chart-axis-y { text-anchor: end; }
.chart-axis-mid { text-anchor: middle; }
.chart-area { fill: rgba(200, 168, 107, .09); stroke: none; }
.chart-value { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-invested { fill: none; stroke: var(--stone); stroke-width: 1.25; stroke-dasharray: 3 4; }
.chart-cursor { stroke: var(--line-strong); stroke-width: 1; }
.chart-dot { fill: var(--gold-light); stroke: var(--ink); stroke-width: 2; }
.chart-hit { fill: transparent; }

/* ---------------------------------------------------------------- fee charges */

.charge { border-bottom: 1px solid var(--line); }
.charge:last-child { border-bottom: 0; }
.charge summary { display: grid; grid-template-columns: 1rem minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .9rem 1.25rem; cursor: pointer; list-style: none; }
.charge summary::-webkit-details-marker { display: none; }
.charge summary::before { content: "+"; color: var(--gold); }
.charge[open] summary::before { content: "\2212"; }
.charge[open] summary { background: var(--surface-2); }
.charge .table th, .charge .table td { padding-left: 3rem; }

/* ---------------------------------------------------------------- signing in */

.signin-page { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.signin { width: 100%; max-width: 25rem; padding: 2.25rem 2rem 2rem; background: var(--surface); border: 1px solid var(--line); }
.signin-title { font: 400 1.9rem/1.15 var(--serif); margin: 1.75rem 0 .35rem; }
.signin .quiet { margin-bottom: 1.5rem; }
.signin-foot { margin-top: 1.25rem; text-align: center; color: var(--stone); font-size: .8rem; }

.field { display: block; margin-bottom: 1.1rem; }
.field-label { display: block; margin-bottom: .4rem; color: var(--stone); }
.field-hint { display: block; margin-top: .4rem; color: var(--stone); font-size: .85rem; }
.field input {
  width: 100%;
  padding: .75rem .85rem;
  color: var(--cream);
  background: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  font: inherit;
}
.field input:focus-visible { outline-offset: 0; border-color: var(--gold); }

/* the primary button is the brand's own: gold, black text, upper case, widely spaced */
button.primary {
  display: block;
  width: 100%;
  margin-top: 1.5rem;
  padding: 1rem 1.5rem;
  color: var(--ink);
  background: var(--gold);
  border: 0;
  font: 500 .72rem/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
}
button.primary:hover { background: var(--gold-light); }
button.primary:disabled { opacity: .55; cursor: default; }

/* ---------------------------------------------------------------- the manager's pages */

.back { display: inline-block; margin-bottom: .35rem; color: var(--stone); font: 500 .68rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.back::before { content: "\2039\00a0"; }
.page-head .badge { margin-left: .9rem; vertical-align: middle; }

.subtabs { display: flex; gap: 1.5rem; margin: -.5rem 0 1.5rem; border-bottom: 1px solid var(--line); overflow-x: auto; }
.subtabs a { padding: .75rem 0; color: var(--stone); border-bottom: 2px solid transparent; white-space: nowrap;
  font: 500 .68rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.subtabs a:hover { color: var(--cream); }
.subtabs a[aria-current] { color: var(--cream); border-bottom-color: var(--gold); }
.sub-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: 1.25rem; }

.notice.warn { border-left-color: var(--loss); color: var(--cream); }
/* what was just done is said where the manager is looking, however far down the page that is */
.notice.done { position: sticky; top: 3.75rem; z-index: 1; border-left-color: var(--gain); color: var(--cream); margin-bottom: 1.25rem; }
.notice + .stats, .notice + .panel, .notice + .grid, .stats + .notice { margin-top: 1.25rem; }
.notice a, .panel-body a:not(.button) { text-decoration: underline; text-underline-offset: .2em; }

.steps { margin: 0; padding: 1.25rem 1.25rem 1.25rem 2.75rem; }
.steps li { padding: .35rem 0 .35rem .35rem; }
.steps li::marker { color: var(--gold); }
.empty .button { margin-top: 1.25rem; }
.lead { margin-bottom: 1.25rem; max-width: 46rem; }
.panel-foot { border-top: 1px solid var(--line); }
.panel-aside { display: flex; align-items: center; gap: 1rem; }
.panel-aside .badge { margin-left: 0; }

/* forms: two columns where there is room; each input carries its unit, an example and its own problem */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 24rem)); gap: 0 2rem; }
.form > .tick, .form > .problem, .form > .form-actions, .form > .group, .form > .tally, .form > .notice { grid-column: 1 / -1; }
.form > .notice { margin-bottom: 1.1rem; }
.field-optional { color: var(--stone); }
.field-box { display: flex; align-items: center; background: var(--ink); border: 1px solid var(--line-strong); }
.field-box:focus-within { border-color: var(--gold); }
.field-box:has([aria-invalid="true"]) { border-color: var(--loss); }
.field-box input, .field-box textarea {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: .75rem .85rem;
  color: var(--cream);
  background: none;
  border: 0;
  border-radius: 0;
  font: inherit;
  resize: vertical;
}
.field-box input:focus-visible, .field-box textarea:focus-visible { outline: 0; }
.field-box input[type="date"] { color-scheme: dark; }
.field-unit { padding: 0 0 0 .85rem; color: var(--stone); white-space: nowrap; }
.field-box input + .field-unit { padding: 0 .85rem 0 0; }
.field-echo { display: block; margin-top: .3rem; color: var(--gold-light); font-size: .85rem; }
.field-echo:empty { display: none; }
.field-problem { display: block; margin-top: .4rem; color: var(--loss); font-size: .85rem; }
.field-hint + .field-hint { margin-top: 0; }

.segmented { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-strong); }
.segmented .chip { padding: .7rem .75rem; }
.chip[aria-checked="true"] { color: var(--ink); background: var(--gold); }
.tick { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1.1rem; cursor: pointer; }
.tick input { width: 1.05rem; height: 1.05rem; margin: .2rem 0 0; accent-color: var(--gold); flex: none; }
.tick .field-hint { margin-top: .2rem; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: .4rem; }
.form button.primary { width: auto; margin-top: 0; }
.form > .problem { margin-bottom: .75rem; }
.tally { margin: 0 0 1rem; color: var(--gold-light); }
.tally.problem { color: var(--loss); }

.group { display: grid; grid-template-columns: repeat(2, minmax(0, 24rem)); gap: 0 2rem; margin: 0 0 1.25rem; padding: 1rem 1.25rem .25rem; border: 1px solid var(--line); min-width: 0; }
.group legend { padding: 0 .5rem; color: var(--gold-light); font: 500 .68rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.group .disclose { grid-column: 1 / -1; display: block; margin-bottom: 1rem; }
.group .disclose[open] { display: grid; grid-template-columns: inherit; gap: inherit; }
.group .disclose summary { grid-column: 1 / -1; }

.disclose summary { cursor: pointer; color: var(--gold); margin-bottom: 1rem; }
.disclose summary:hover { color: var(--gold-light); }
.disclose > .quiet { margin-bottom: 1.25rem; max-width: 46rem; }

/* a list of things with what can be done to each: versions of terms, logins */
.entry { padding: 0 0 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.entry:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.entry-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: .3rem; }
.entry-head strong { font-weight: 500; }
.entry .actions { margin-top: .9rem; align-items: center; }
.entry .problem { margin-top: .6rem; }

.confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.confirm-question { color: var(--cream); }
.file { position: absolute; width: 1px; height: 1px; opacity: 0; }
label.button { cursor: pointer; }
.button:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.button:disabled { opacity: .55; cursor: default; }

.secret { margin-bottom: 1.25rem; padding: 1.25rem; border: 1px solid var(--gold-dim); background: var(--surface-2); }
.secret-value { margin: .6rem 0 1rem; font: 400 1.6rem/1.2 var(--sans); letter-spacing: .08em; color: var(--gold-light); overflow-wrap: anywhere; user-select: all; }
.secret .quiet { margin-top: 1rem; max-width: 40rem; }

/* a row can carry two badges (From Dhan, Held): they wrap rather than widen the table */
.moves .kind { white-space: normal; }
.moves .kind .badge { margin: .15rem .5rem .15rem 0; }
.table .act { text-align: right; white-space: nowrap; }
.table .act .button.ghost { padding: .3rem 0 .3rem 1rem; }
.change { display: block; margin-top: .3rem; font-size: .85rem; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- the inbox, the feed, the portfolio */

.side a .count { display: inline-block; min-width: 1.35rem; margin-left: .6rem; padding: .05rem .35rem; color: var(--ink); background: var(--gold); text-align: center; letter-spacing: 0; }
.reasons { margin: .35rem 0 0; padding-left: 1.15rem; color: var(--stone); }
.reasons li { padding: .12rem 0; }
.reasons li::marker { color: var(--gold); }
.notice .reasons { color: inherit; }
.entry .form { margin-top: .9rem; }
/* a ledger line: the three things it can be sit in one row, and whose it is beside them */
.entry.line .form { grid-template-columns: minmax(0, 34rem) minmax(0, 20rem); }
.table tbody th .badge { margin-left: .6rem; }
.panel + .notice { margin-top: 1.25rem; }
.entry .disclose { margin-top: .9rem; }
.entry .disclose summary { margin-bottom: .75rem; }
.panel-body > .notice { margin-bottom: 1.1rem; }
.panel-head .confirm { justify-content: flex-end; }
.field-box select {
  width: 100%;
  padding: .7rem .85rem;
  color: var(--cream);
  background: var(--ink);
  border: 0;
  border-radius: 0;
  font: inherit;
  color-scheme: dark;
}
.field-box select:focus-visible { outline: 0; }
.weight { display: inline-block; min-width: 7rem; text-align: right; }
.bar { display: block; width: 100%; height: 4px; margin-top: .4rem; }
.bar-track { fill: var(--line); }
.bar-fill { fill: var(--gold); }
.holdings tbody th { white-space: normal; }

/* ---------------------------------------------------------------- going live */

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { position: relative; padding: .8rem 1.25rem .8rem 3rem; border-bottom: 1px solid var(--line); }
.checklist li::before { position: absolute; left: 1.25rem; top: .8rem; width: 1rem; text-align: center; }
.checklist .done { color: var(--stone); }
.checklist .done::before { content: "\2713"; color: var(--gain); }
.checklist .todo::before { content: "\25CB"; color: var(--gold); }
.panel + .stats { margin-top: 1.25rem; }

/* ---------------------------------------------------------------- small screens */

@media (min-width: 48.0625rem) {
  /* seven columns: closer together than in the other tables, so they fit a tablet */
  .blocks th, .blocks td { padding-left: .6rem; padding-right: .6rem; }
  .blocks th:first-child { padding-left: 1.25rem; }
  .blocks th:last-child, .blocks td:last-child { padding-right: 1.25rem; }
  .blocks thead th { white-space: normal; vertical-align: bottom; }
  .blocks tbody th { white-space: normal; }  /* a name with a badge beside it wraps rather than widening the table */
}

@media (max-width: 79rem) {
  /* the figures pair up, the chart takes the full width, and returns and fees sit side by side below it */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 64rem) {
  /* no room for navigation down the side: it runs across the top instead */
  .topbar { padding: 0 1.5rem; }
  .layout { display: block; min-height: 0; }
  .side {
    position: sticky;
    top: 3.75rem;
    z-index: 1;
    flex-direction: row;
    gap: 0;
    padding: 0 .75rem;
    overflow-x: auto;
    background: var(--ink);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .side a { padding: .9rem .75rem; border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .side a[aria-current] { border-bottom-color: var(--gold); background: none; }
  .view { padding: 1.75rem 1.5rem 3.5rem; }
  .notice.done { top: 6.7rem; }  /* below the top bar and the navigation under it */
}

@media (max-width: 48rem) {
  .topbar { padding: 0 1rem; height: 3.5rem; }
  .who-name { display: none; }
  .side { top: 3.5rem; padding: 0 .25rem; }
  .notice.done { top: 6.45rem; }
  .view { padding: 1.25rem 1rem 3rem; }
  .page-head h1 { font-size: 1.7rem; }
  .stats, .stats.three, .stack { gap: .75rem; }
  .stack { grid-template-columns: minmax(0, 1fr); }
  .stat { padding: .9rem 1rem 1rem; }
  .stat-value { font-size: min(1.3rem, 5vw); }  /* a large balance still fits half a small phone */
  .panel-head, .panel-body { padding: .9rem 1rem; }
  .table th, .table td { padding: .7rem 1rem; }
  .table tbody th { white-space: normal; }
  .table.compact .num { width: 1%; }  /* figures take only the room they need, so a label wraps last */
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts dt { border-bottom: 0; padding: .8rem 1rem 0; }
  .facts dd { padding: .15rem 1rem .8rem; }
  .charge summary { padding: .85rem 1rem; }
  /* wide tables do not fit a phone: their headings step aside and each row becomes a short block */
  .blocks thead, .moves thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  /* an activity row: date, type and detail down the left, the amount on the right */
  .moves tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
  .moves tbody tr:last-child { border-bottom: 0; }
  .moves td { padding: 0; border: 0; }
  .moves .when { grid-column: 1; grid-row: 1; }
  .moves .kind { grid-column: 1; grid-row: 2; padding-top: .4rem; white-space: normal; }
  .moves .detail { grid-column: 1; grid-row: 3; padding-top: .35rem; font-size: .85rem; }
  .moves .detail:empty { display: none; }
  .moves .num { grid-column: 2; grid-row: 1 / span 3; }
  .blocks tr { display: block; padding: .85rem 1rem .6rem; border-bottom: 1px solid var(--line); }
  .blocks tbody tr:last-child { border-bottom: 0; }
  .blocks tbody th { display: block; padding: 0 0 .35rem; border: 0; color: var(--gold-light); }
  .blocks td { display: flex; justify-content: space-between; gap: 1rem; padding: .22rem 0; border: 0; }
  .blocks td::before { content: attr(data-label); color: var(--stone); }
  .blocks td:empty { display: none; }
  .entry.line .form { grid-template-columns: minmax(0, 1fr); }
  .blocks tr.total th { color: var(--gold-light); }
  .weight { min-width: 5.5rem; }
  .charge .table th, .charge .table td { padding-left: 1rem; }
  .form, .group, .group .disclose[open] { grid-template-columns: minmax(0, 1fr); }
  .group { padding: .9rem 1rem .25rem; }
  .subtabs { gap: 1.25rem; }
  .moves .act { grid-column: 1 / -1; grid-row: 4; padding-top: .5rem; text-align: left; white-space: normal; }
  .moves .act:empty { display: none; }
  .table .act .button.ghost { padding: .3rem 1rem .3rem 0; }
  .log td { display: block; padding: 0 1rem; border: 0; }
  .log tr { display: block; padding: .75rem 0; border-bottom: 1px solid var(--line); }
  .log thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .secret-value { font-size: 1.25rem; }
}

@media (max-width: 40rem) {
  .stats.three { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- paper */

@media print {
  html, .topbar, .side, .panel, .stat, .table th, .table tr.total td, .table tr.total th { background: #fff !important; }
  body, .wordmark, .wordmark span, .panel-head h2, .table tbody th, .stat-value, .gain, .loss { color: #000 !important; }
  .quiet, .asof, .stat-sub, .stat .label, .table th, .badge { color: #444 !important; }
  .panel, .stat, .table th, .table td, .panel-head, .topbar { border-color: #bbb !important; }
  .side, .actions, .who, .chips { display: none !important; }
  .layout { display: block; }
  .view { padding: 1rem 0; max-width: none; }
  .topbar { position: static; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}