/* Hallmark · shape: app screen · genre: modern-minimal · theme: Coral (deal claude-usage-dashboard-share-71fc·6ed8a2a4·2026-11-06·r0)
 * nav: top bar, wordmark and three account links, filter toolbar below · signature: the weekly statement sheet on the desk · states: loading, empty, empty period, error, pct unknown, stale
 * axes: light/grotesk-sans/warm · posture: restrained · contrast: pass · modes: light+dark · data: live API · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 · weakest: P, a usage dashboard argues little; the statement makes one claim (what each project costs the partners) and sets it on paper */
/* Hallmark · dismissed F4 · .btn--card is the Coral cotton card secondary beside the ink retry, the theme asks for letterpress cards not an outline */
/* Hallmark · dismissed F6 · .big-num--word holds the word Onbekend when the weekly percentage is missing, it never shows digits */
@import url("./tokens.css");
@import url("./base.css");

:root {
  color-scheme: light dark;
  --app-max: 1200px;
  --color-bar: var(--color-ink-2);
  --color-bar-on: var(--color-accent-2);
  --color-bar-unknown: var(--color-rule-2);
  --color-track: var(--color-paper-3);
  --color-skel: var(--color-paper-3);
  --color-notice: var(--color-paper-2);
  --text-big: clamp(3.25rem, 2.2rem + 4vw, 5.25rem);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper: oklch(16% 0.01 55); --color-paper-2: oklch(19% 0.011 55); --color-paper-3: oklch(23% 0.012 55);
    --color-ink: oklch(94% 0.008 70); --color-ink-2: oklch(85% 0.01 65); --color-muted: oklch(72% 0.012 60);
    --color-rule: oklch(30% 0.012 55); --color-rule-2: oklch(38% 0.013 55);
    --color-accent: oklch(78% 0.1 30); --color-accent-2: oklch(74% 0.12 30); --color-focus: oklch(76% 0.13 30);
    --color-cotton: oklch(21% 0.01 60); --color-desk: oklch(13% 0.009 55); --color-print: oklch(93% 0.008 70);
    --color-board: oklch(90% 0.01 70); --color-board-type: oklch(18% 0.011 45); --color-paid: oklch(76% 0.12 33);
    --color-bar: oklch(80% 0.012 65); --color-bar-unknown: oklch(42% 0.013 55); --color-track: oklch(31% 0.012 55); --tex-cotton: none; --tex-desk: none;
    --edge-stock: inset 0 0 0 1px var(--color-rule); --cast-stock: 0 0 0 0 transparent; --cast-stock-lift: 0 0 0 0 transparent;
    --press-groove: inset 0 0 0 1px var(--color-rule);
  }
}
:root[data-theme="dark"] {
  --color-paper: oklch(16% 0.01 55); --color-paper-2: oklch(19% 0.011 55); --color-paper-3: oklch(23% 0.012 55);
  --color-ink: oklch(94% 0.008 70); --color-ink-2: oklch(85% 0.01 65); --color-muted: oklch(72% 0.012 60);
  --color-rule: oklch(30% 0.012 55); --color-rule-2: oklch(38% 0.013 55);
  --color-accent: oklch(78% 0.1 30); --color-accent-2: oklch(74% 0.12 30); --color-focus: oklch(76% 0.13 30);
  --color-cotton: oklch(21% 0.01 60); --color-desk: oklch(13% 0.009 55); --color-print: oklch(93% 0.008 70);
  --color-board: oklch(90% 0.01 70); --color-board-type: oklch(18% 0.011 45); --color-paid: oklch(76% 0.12 33);
  --color-bar: oklch(80% 0.012 65); --color-bar-unknown: oklch(42% 0.013 55); --color-track: oklch(31% 0.012 55); --tex-cotton: none; --tex-desk: none;
  --edge-stock: inset 0 0 0 1px var(--color-rule); --cast-stock: 0 0 0 0 transparent; --cast-stock-lift: 0 0 0 0 transparent;
  --press-groove: inset 0 0 0 1px var(--color-rule);
}

.container { max-width: var(--app-max); }
body { min-height: 100vh; }
.muted { color: var(--color-muted); }
.fig { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; font-size: var(--text-sm); white-space: nowrap; }
h1, h2, h3 { color: var(--color-ink); }

.skip { position: absolute; left: var(--space-md); top: -4rem; z-index: var(--z-modal); padding: var(--space-xs) var(--space-md); background: var(--color-board); color: var(--color-board-type); border-radius: var(--radius-input); }
.skip:focus-visible { top: var(--space-xs); }

/* ---- top bar ------------------------------------------------------------------------------- */
.top { border-bottom: 1px solid var(--color-rule); background: var(--color-paper); }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 56px; }
.wordmark { white-space: nowrap; font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.02em; text-decoration: none; color: var(--color-ink); }
.top-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; column-gap: var(--space-md); row-gap: var(--space-3xs); font-size: var(--text-sm); }
.top-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-muted); text-decoration: none; transition: color var(--dur-micro) var(--ease-out); }
.top-nav a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent-2); }

/* ---- filter toolbar ------------------------------------------------------------------------- */
.tools { background: var(--color-paper-2); border-bottom: 1px solid var(--color-rule); }
.tools-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-sm) var(--space-md); padding-block: var(--space-sm) var(--space-md); }
.field { display: grid; gap: var(--space-2xs); min-width: 0; margin: 0; padding: 0; border: 0; font-size: var(--text-sm); }
.field > span, .field > legend { color: var(--color-muted); font-weight: 500; padding: 0; }
.field > legend { margin-bottom: var(--space-2xs); }
select, input[type="date"], .pick > summary {
  min-height: 40px; padding: 0 var(--space-sm); border: 1px solid var(--color-rule-2); border-radius: var(--radius-input);
  background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out);
}
select:hover, input[type="date"]:hover, .pick > summary:hover { border-color: var(--color-muted); }
select:focus-visible, input[type="date"]:focus-visible, .pick > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -1px; }
input[type="date"] { font-family: var(--font-body); cursor: text; }
input[type="date"]:invalid { outline: 2px solid var(--color-error); outline-offset: -1px; }

/* split-by: a groove pressed into the paper, a card riding to the chosen stop */
.groove { display: inline-flex; padding: var(--space-2xs); border-radius: 9px; background: var(--color-paper-3); box-shadow: var(--press-groove); }
.groove input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.groove label { display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--space-sm); border-radius: var(--radius-input); color: var(--color-muted); font-size: var(--text-md); font-weight: 500; cursor: pointer; transition: color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.groove label:hover { color: var(--color-ink); }
.groove input:checked + label { background: var(--color-cotton); color: var(--color-print); box-shadow: var(--edge-stock), var(--cast-stock); }
.groove input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 1px; }

/* multi-select pickers */
.pick { position: relative; }
.pick > summary { display: inline-flex; align-items: center; gap: var(--space-xs); min-width: 9rem; list-style: none; }
.pick > summary::-webkit-details-marker { display: none; }
.pick > summary::after { content: ""; width: 7px; height: 7px; margin-left: auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.pick[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.pick-panel { position: absolute; z-index: var(--z-dropdown); top: calc(100% + var(--space-2xs)); left: 0; min-width: 14rem; max-height: 20rem; overflow: auto; padding: var(--space-xs); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-cotton); color: var(--color-print); box-shadow: var(--shadow-card); }
.check { display: flex; align-items: center; gap: var(--space-xs); min-height: 40px; padding: 0 var(--space-xs); border-radius: var(--radius-input); cursor: pointer; font-size: var(--text-md); }
.check:hover { background: var(--color-paper-2); }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-accent-2); }
.check input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.link-btn { min-height: 40px; padding: 0 var(--space-xs); border: 0; background: none; color: var(--color-ink); font-size: var(--text-sm); text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; cursor: pointer; transition: text-decoration-color var(--dur-micro) var(--ease-out); }
.link-btn:hover { text-decoration-color: var(--color-accent-2); }

/* ---- buttons -------------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-stock); font-size: var(--text-md); font-weight: 500; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out); }
.btn--ink { background: var(--color-board); color: var(--color-board-type); box-shadow: var(--cast-stock); }
.btn--card { background-color: var(--color-cotton); color: var(--color-print); box-shadow: var(--edge-stock), var(--cast-stock); }
.btn:hover { transform: translateY(-1px); box-shadow: var(--edge-stock), var(--cast-stock-lift); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ---- notices -------------------------------------------------------------------------------- */
.notice { margin-top: var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); background: var(--color-notice); font-size: var(--text-sm); max-width: none; }
.notice a { color: var(--color-ink); text-decoration-color: var(--color-accent-2); }

/* ---- the desk and the statement ------------------------------------------------------------ */
.desk { margin-top: var(--space-lg); padding-block: var(--space-xl); background-color: var(--color-desk); background-image: radial-gradient(90% 120% at 0% 30%, var(--color-cotton), transparent 62%), var(--tex-desk); border-block: 1px solid var(--color-rule); }
.desk-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
@media (min-width: 60rem) { .desk-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.stock { background-color: var(--color-cotton); background-image: linear-gradient(100deg, var(--color-cotton), transparent 45%), var(--tex-cotton); color: var(--color-print); box-shadow: var(--edge-stock), var(--cast-stock); border-radius: var(--radius-stock); }
.sheet { display: grid; gap: var(--space-lg); padding: var(--space-xl); }
.sheet-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2xs) var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.sheet-head h1 { font-size: var(--text-xl); color: var(--color-print); }
.sheet-period { color: var(--color-muted); font-size: var(--text-md); }
.sheet-figure { display: grid; gap: var(--space-xs); }
.big { display: flex; align-items: baseline; gap: var(--space-2xs); line-height: 0.85; }
.big-num { font-size: var(--text-big); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.05em; color: var(--color-print); }
.big-frac { font-size: 0.62em; letter-spacing: -0.03em; }
.big-num--word { font-size: var(--text-3xl); letter-spacing: var(--tracking-display); }
.big-unit { font-size: var(--text-2xl); font-weight: 500; color: var(--color-print); }
.big-label { font-size: var(--text-lg); font-weight: 500; color: var(--color-print); max-width: 34ch; }
.big-sub { font-size: var(--text-sm); color: var(--color-muted); max-width: 60ch; }

.ledger { width: 100%; border-collapse: collapse; }
.ledger th, .ledger td { padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); text-align: left; font-weight: 400; vertical-align: baseline; }
.ledger thead th { padding-top: 0; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); white-space: nowrap; }
.ledger tbody th { font-weight: 500; overflow-wrap: break-word; }
.ledger .share { width: 46%; padding-inline: var(--space-md); }
.share-cell { display: flex; align-items: center; gap: var(--space-sm); }
.ledger .fig:last-child, .ledger th.num, .data th.num { text-align: right; }
.data th.num .sort { flex-direction: row-reverse; }
.share-track { position: relative; flex: 1; min-width: 2rem; height: 6px; border-radius: 2px; background: var(--color-track); overflow: hidden; }
.share-fill { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: var(--color-bar); }
.ledger td.share .fig { min-width: 4.5rem; text-align: right; }
.ledger td.share.fig { text-align: right; }
.ledger tfoot th, .ledger tfoot td { border-bottom: 0; }
.ledger-bft th, .ledger-bft td { padding-top: var(--space-md); border-top: 1px solid var(--color-print); }
.ledger-bft th { font-weight: 600; }
.ledger-hint { display: block; font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); }
.ledger-total th, .ledger-total td { color: var(--color-muted); }
.ledger-unused th, .ledger-unused td { color: var(--color-muted); }
/* the settled amount the partners read: coral pressed into the stock */
.pressed { display: inline-block; font-family: var(--font-body); font-size: var(--text-lg); font-weight: 600; color: var(--color-paid); text-shadow: 0.5px 0.75px 0 var(--color-cotton), -0.4px -0.5px 0 oklch(var(--shade) / 0.18); }
.sheet-foot { font-size: var(--text-sm); color: var(--color-muted); max-width: 70ch; }

.desk-note { display: grid; gap: var(--space-sm); padding-top: var(--space-xs); font-size: var(--text-md); color: var(--color-ink-2); }
.desk-note h2 { font-size: var(--text-lg); margin-bottom: var(--space-2xs); }

/* ---- blocks, charts ------------------------------------------------------------------------- */
.block { padding-block: var(--space-xl) 0; }
.block:last-child { padding-bottom: var(--space-2xl); }
.block-head { display: grid; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.block-head h2 { font-size: var(--text-xl); }
.block-sub { color: var(--color-muted); font-size: var(--text-md); max-width: 72ch; }
.filtered { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-size: var(--text-md); }
.multiples { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--space-xl) var(--space-xl); }
.chart { margin: 0; min-width: 0; padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); }
.chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2xs) var(--space-sm); margin-bottom: var(--space-sm); }
.chart-head h3 { font-size: var(--text-lg); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.chart-total { color: var(--color-muted); font-size: var(--text-sm); }
.chart-total .fig { color: var(--color-ink); }
.plot { min-height: 148px; border-radius: var(--radius-input); cursor: crosshair; }
.plot:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.plot svg { overflow: visible; }
.plot .grid { stroke: var(--color-rule); stroke-width: 1; shape-rendering: crispEdges; }
.plot .tick { fill: var(--color-muted); font-family: var(--font-outlier); font-size: 11px; font-variant-numeric: tabular-nums; }
.plot .bar { fill: var(--color-bar); transition: fill var(--dur-micro) var(--ease-out); }
.plot .bar.on { fill: var(--color-bar-on); }
.plot .bar-unknown { fill: var(--color-bar-unknown); }
.plot .bar-unknown.on { fill: var(--color-bar-on); }
.is-stale .desk, .is-stale .block { opacity: 0.55; transition: opacity var(--dur-short) var(--ease-out); }

.tip { position: fixed; left: 0; top: 0; z-index: var(--z-tooltip); display: grid; gap: var(--space-3xs); max-width: min(20rem, calc(100vw - 16px)); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-input); background: var(--color-board); color: var(--color-board-type); font-size: var(--text-sm); line-height: 1.4; pointer-events: none; opacity: 0; transition: opacity var(--dur-micro) var(--ease-out); }
.tip.is-on { opacity: 1; }
.tip strong { font-weight: 600; }
.tip span { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }

/* ---- table ---------------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
.data { width: 100%; border-collapse: collapse; }
.data th, .data td { padding: var(--space-xs) var(--space-md); border-bottom: 1px solid var(--color-rule); text-align: left; font-weight: 400; white-space: nowrap; }
.data th:first-child, .data td:first-child { padding-left: 0; }
.data th:last-child, .data td:last-child { padding-right: 0; }
.data thead th { padding-block: 0; font-size: var(--text-sm); }
.data .fig { text-align: right; }
.data tbody th { font-weight: 500; }
.data tfoot th, .data tfoot td { border-bottom: 0; border-top: 1px solid var(--color-ink-2); font-weight: 500; }
.data tbody tr:hover { background: var(--color-paper-2); }
.sort { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 40px; padding: 0; border: 0; background: none; color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: color var(--dur-micro) var(--ease-out); }
.sort:hover, [aria-sort] .sort { color: var(--color-ink); }
.sort:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.sort-mark { display: inline-block; width: 0.8em; font-family: var(--font-outlier); }
.data .fig .sort { flex-direction: row-reverse; }
@media (max-width: 40rem) {
  .data th:first-child, .data td:first-child { position: sticky; left: 0; z-index: var(--z-raised); background: var(--color-paper); padding-right: var(--space-md); }
}

/* ---- states --------------------------------------------------------------------------------- */
.state-panel { display: grid; gap: var(--space-md); justify-items: start; max-width: 44rem; padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); }
.state-panel h1, .state-panel h2 { max-width: none; font-size: var(--text-xl); }
.state-panel code { font-family: var(--font-outlier); font-size: 0.9em; overflow-wrap: anywhere; }
.state-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.state-msg { padding-block: var(--space-xl); }
.skel { display: block; border-radius: var(--radius-input); background: var(--color-skel); }
.skel-title { width: 12rem; height: 1.5rem; margin-bottom: var(--space-md); }
.skel-big { width: 9rem; height: 4.5rem; margin-bottom: var(--space-md); }
.skel-line { width: 100%; height: 1rem; margin-bottom: var(--space-sm); }
.skel-plot { width: 100%; height: 148px; }
.skel-sheet { min-height: 28rem; }

/* ---- the gate: login and "not set up yet", one cotton card on the desk ----------------------- */
.gate { display: grid; min-height: 100vh; min-height: 100dvh; background-color: var(--color-desk); background-image: radial-gradient(90% 120% at 0% 30%, var(--color-cotton), transparent 62%), var(--tex-desk); }
.gate-main { display: grid; align-content: center; justify-items: center; gap: var(--space-md); padding: var(--space-xl) var(--space-md); }
.gate-card { display: grid; gap: var(--space-md); width: min(100%, 24rem); padding: var(--space-xl) var(--space-lg); }
.gate-mark { font-size: var(--text-xl); color: var(--color-print); }
.gate-lead { color: var(--color-muted); font-size: var(--text-md); margin-top: calc(var(--space-xs) * -1); }
.gate-field { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.gate-field input { min-height: 44px; padding: 0 var(--space-sm); border: 1px solid var(--color-rule-2); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); font-weight: 400; transition: border-color var(--dur-micro) var(--ease-out); }
.gate-field input:hover { border-color: var(--color-muted); }
.gate-field input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -1px; }
.gate-note { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-input); background: var(--color-paper-2); color: var(--color-ink-2); font-size: var(--text-sm); }
.gate-btn { justify-content: center; min-height: 44px; }
.gate-lang { font-size: var(--text-sm); }
.gate-lang a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-muted); transition: color var(--dur-micro) var(--ease-out); }
.gate-lang a:hover { color: var(--color-ink); text-decoration-color: var(--color-accent-2); }

/* ---- settings: one form, one card per section, one save bar ---------------------------------- */
.set-main { display: grid; gap: var(--space-lg); padding-block: var(--space-xl) 0; }
.set-main > h1 { font-size: var(--text-2xl); }
.set-form { display: grid; gap: var(--space-lg); }
.set-card { display: grid; gap: var(--space-md); min-width: 0; padding: var(--space-lg); }
.set-card h2 { font-size: var(--text-xl); color: var(--color-print); }
.set-help { color: var(--color-muted); font-size: var(--text-sm); max-width: 72ch; }
.set-field { display: grid; gap: var(--space-2xs); min-width: 0; margin: 0; padding: 0; border: 0; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.set-field > legend { padding: 0; margin-bottom: var(--space-2xs); }
.set-radios { justify-items: start; }
.set-row { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.in { min-height: 36px; width: 100%; min-width: 0; padding: 0 var(--space-xs); border: 1px solid var(--color-rule-2); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); font-weight: 400; transition: border-color var(--dur-micro) var(--ease-out); }
.in:hover { border-color: var(--color-muted); }
.in:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -1px; }
.in--num { width: 6.5rem; text-align: right; font-family: var(--font-outlier); font-variant-numeric: tabular-nums; font-size: var(--text-sm); }
.in--date { width: 8.5rem; font-family: var(--font-outlier); font-variant-numeric: tabular-nums; font-size: var(--text-sm); }
.in--wide { min-width: 14rem; }
.in--line { max-width: 28rem; }
.in--area { min-height: 16rem; padding: var(--space-xs); font-family: var(--font-outlier); font-size: var(--text-sm); line-height: 1.6; resize: vertical; }
.set-table { width: 100%; border-collapse: collapse; }
.set-table th, .set-table td { padding: var(--space-2xs) var(--space-xs); border-bottom: 1px solid var(--color-rule); text-align: left; font-weight: 400; white-space: nowrap; vertical-align: middle; }
.set-table th:first-child, .set-table td:first-child { position: sticky; left: 0; z-index: var(--z-raised); padding-left: 0; background: var(--color-cotton); }
.set-table thead th { padding-block: 0 var(--space-xs); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.set-table .num { text-align: right; }
.set-table .in:not(.in--num):not(.in--date):not(.in--wide) { width: 9rem; }
.set-radios .groove label { white-space: nowrap; }
.notice--warn { overflow-wrap: anywhere; }
.set-table tbody th { font-weight: 500; color: var(--color-print); }
.set-model { font-family: var(--font-outlier); font-size: var(--text-sm); }
.set-sub { display: block; font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); }
.set-date { font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-muted); }
.set-new td, .set-new th { border-bottom: 0; padding-top: var(--space-xs); }
.notice--ok { margin: 0; border: 1px solid var(--color-success); }
.notice--warn { margin: 0; border: 1px solid var(--color-accent-2); color: var(--color-print); }
.savebar { position: sticky; bottom: 0; z-index: var(--z-sticky); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-md); margin-inline: calc(var(--gutter) * -1); padding: var(--space-sm) var(--gutter); border-top: 1px solid var(--color-rule); background: var(--color-paper); }

/* ---- small screens -------------------------------------------------------------------------- */
@media (max-width: 40rem) {
  .top-row { gap: var(--space-sm); }
  .wordmark { font-size: var(--text-md); }
  .top-nav { flex-wrap: nowrap; column-gap: var(--space-sm); }
  .tools-row > .field { flex: 1 1 calc(50% - var(--space-md)); }
  .tools-row > .field:has(.groove) { flex-basis: 100%; }
  .groove { display: flex; }
  .groove label { flex: 1; justify-content: center; padding: 0 var(--space-xs); }
  select, input[type="date"], .pick > summary { width: 100%; min-width: 0; min-height: 44px; }
  .pick-panel { min-width: 100%; }
  #pick-machine .pick-panel { left: auto; right: 0; }
  .sheet { padding: var(--space-lg) var(--space-md); }
  .ledger .share { width: auto; padding-inline: var(--space-xs); }
  .ledger thead th { white-space: normal; }
  .share-track { display: none; }
  .desk { padding-block: var(--space-lg); }
}
@media (max-width: 40rem) { .set-card { padding: var(--space-md); } .savebar .btn { flex: 1; justify-content: center; } }
@media (pointer: coarse) { .groove label, .check, .link-btn, .sort { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .tip, .plot .bar { transition: none; } }