@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 var(--fs-body)/var(--lh-body) var(--font-page); font-variant-numeric: tabular-nums; }
body.paper { background: var(--paper); color: var(--paper-text); }
body.ink { background: var(--ink); color: var(--ink-text); }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h3 { font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: 0; }
p { margin: 0; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.paper ::selection { background: var(--paper-text); color: var(--paper); }
.ink ::selection { background: var(--ink-text); color: var(--ink); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.paper { scrollbar-color: var(--paper-text3) var(--paper); }
.ink { scrollbar-color: var(--ink-line) var(--ink); }
.muted { color: var(--paper-text2); }
.ink .muted { color: var(--ink-text2); }
.small { font-size: var(--fs-small); line-height: var(--lh-small); }
.cmd { font-family: var(--font-mono); font-size: var(--fs-small); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--target); min-width: var(--target); padding: 0 var(--s4);
  border-radius: var(--r-control); font: 500 var(--fs-body)/1 var(--font-page); cursor: pointer; border: 1px solid transparent; background: none; color: inherit; text-decoration: none; }
.paper .btn.primary { background: var(--paper-text); color: var(--paper); }
.ink .btn.primary { background: var(--ink-text); color: var(--ink); }
.paper .btn.secondary { border-color: var(--paper-line); }
.ink .btn.secondary { border-color: var(--ink-line); }
.btn.danger { color: var(--live-paper); border-color: var(--paper-line); }
.ink .btn.danger { color: var(--live); border-color: var(--ink-line); }
.btn:disabled { opacity: .5; cursor: default; }
.paper .btn.secondary:hover { background: var(--paper-row); }
.ink .btn.secondary:hover { background: var(--ink-raised); }

.topbar { display: flex; align-items: center; gap: var(--s5); height: 48px; padding: 0 var(--s6); background: var(--ink); color: var(--ink-text); }
.topbar .name { font-weight: 600; }
.tabs { display: flex; gap: var(--s1); height: 100%; overflow-x: auto; }
.tabs a, .tabs button { display: inline-flex; align-items: center; min-height: var(--target); height: 100%; padding: 0 var(--s3); color: var(--ink-text2); text-decoration: none;
  background: none; border: 0; border-bottom: 2px solid transparent; font: inherit; cursor: pointer; white-space: nowrap; }
.tabs [aria-selected="true"], .tabs [aria-current="page"] { color: var(--ink-text); border-bottom-color: var(--ink-text); }

.wrap { max-width: 1120px; margin: 0 auto; padding: var(--s6) var(--s6) var(--s8); }
.stack > * + * { margin-top: var(--s5); }

table.grid { width: 100%; border-collapse: collapse; }
.grid th { text-align: left; font-weight: 500; color: var(--paper-text2); background: var(--paper-row); font-size: var(--fs-small); }
.grid th, .grid td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--paper-line); vertical-align: middle; height: var(--target); }
.grid td.num, .grid th.num { text-align: right; }
.grid tr.clickable { cursor: pointer; }
.grid tr.clickable:hover td { background: var(--paper-row); }

.figures { display: flex; flex-wrap: wrap; border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); }
.figures > div { flex: 1 1 160px; padding: var(--s4) var(--s4) var(--s4) 0; }
.figures > div + div { border-left: 1px solid var(--paper-line); padding-left: var(--s4); }
.figures b { display: block; font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; }
.figures span { color: var(--paper-text2); font-size: var(--fs-small); }

.filters { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: end; }
.field { display: flex; flex-direction: column; gap: var(--s1); font-size: var(--fs-small); color: var(--paper-text2); }
.field input, .field select { min-height: var(--target); padding: 0 var(--s3); border: 1px solid var(--paper-line); border-radius: var(--r-control); font: 400 var(--fs-body) var(--font-page); color: var(--paper-text); background: var(--paper); }
.check { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--target); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--paper-text); }

.empty { padding: var(--s6) 0; border-top: 1px solid var(--paper-line); }
.empty p + p { margin-top: var(--s2); }

.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--paper); color: var(--paper-text); border-left: 1px solid var(--paper-line);
  padding: var(--s5); overflow-y: auto; z-index: 50; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.drawer h2 { margin-bottom: var(--s4); }
.drawer h3 { margin: var(--s5) 0 var(--s2); }
.coach { position: absolute; z-index: 60; width: min(320px, calc(100vw - 32px)); background: var(--ink); color: var(--ink-text); border-radius: var(--r-control); padding: var(--s4); }
.coach p { margin: var(--s2) 0 var(--s3); color: var(--ink-text2); }
.coach .row { display: flex; gap: var(--s2); justify-content: flex-end; }

@media (max-width: 480px) {
  .topbar { padding: 0 var(--s4); gap: var(--s3); }
  .wrap { padding: var(--s4) var(--s4) var(--s7); }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0s !important; animation-duration: 0s !important; } }