/* ==========================================================================
   Headshot Sheet — application chrome.

   The design rule this file follows: the app has almost no colour of its own.
   Chrome is paper, ink and one hairline rule; the only saturated colour on
   screen belongs to the two teams (their real school colours, pulled from the
   game) and to the semantic triad — green/amber/red — which is reserved for
   photo confidence and for problems. Red is the tally light. It never
   decorates anything.

   Type: Avenir Next carries headings because it is the geometric lineage of
   the sheet's own Century Gothic; SF Pro carries UI text; SF Mono carries
   every number, path and filename. No webfonts, no network.
   ========================================================================== */

:root {
  --paper:      #f6f4f0;
  --paper-2:    #fffefb;
  --paper-3:    #eeebe4;
  --ink:        #16181d;
  --ink-2:      #4c4f57;
  --ink-3:      #7d8089;
  --rule:       #d9d4cb;
  --rule-2:     #c3bcb0;
  --accent:     #0d6b70;
  --accent-ink: #ffffff;
  --accent-wash:#e2eeee;

  --ok:      #1e7a4b;
  --ok-wash: #e3f0e8;
  --warn:      #9a6100;
  --warn-wash: #f8ecd8;
  --bad:      #b32118;
  --bad-wash: #f8e3e1;

  --shadow: 0 1px 2px rgba(20,18,14,.07), 0 8px 24px rgba(20,18,14,.06);
  --radius: 5px;

  --f-display: "Avenir Next", "Poppins", "Questrial", "Century Gothic", system-ui, sans-serif;
  --f-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --f-data: "SF Mono", "Menlo", "Roboto Mono", ui-monospace, monospace;

  --rail-w: 232px;
  --top-h: 52px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141518;  --paper-2: #1c1e22;  --paper-3: #26282d;
    --ink: #eceae5;    --ink-2: #a8a9ae;    --ink-3: #7b7d84;
    --rule: #33353b;   --rule-2: #4a4d54;
    --accent: #4fbcbf; --accent-ink: #0b1f21; --accent-wash: #17383a;
    --ok: #5fc38b;   --ok-wash: #17352a;
    --warn: #e2a44a; --warn-wash: #3a2c14;
    --bad: #f0736a;  --bad-wash: #3b1c1a;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  }
}

:root[data-theme="dark"] {
  --paper: #141518;  --paper-2: #1c1e22;  --paper-3: #26282d;
  --ink: #eceae5;    --ink-2: #a8a9ae;    --ink-3: #7b7d84;
  --rule: #33353b;   --rule-2: #4a4d54;
  --accent: #4fbcbf; --accent-ink: #0b1f21; --accent-wash: #17383a;
  --ok: #5fc38b;   --ok-wash: #17352a;
  --warn: #e2a44a; --warn-wash: #3a2c14;
  --bad: #f0736a;  --bad-wash: #3b1c1a;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
}
:root[data-theme="light"] {
  --paper: #f6f4f0;  --paper-2: #fffefb;  --paper-3: #eeebe4;
  --ink: #16181d;    --ink-2: #4c4f57;    --ink-3: #7d8089;
  --rule: #d9d4cb;   --rule-2: #c3bcb0;
  --accent: #0d6b70; --accent-ink: #ffffff; --accent-wash: #e2eeee;
  --ok: #1e7a4b;   --ok-wash: #e3f0e8;
  --warn: #9a6100; --warn-wash: #f8ecd8;
  --bad: #b32118;  --bad-wash: #f8e3e1;
  --shadow: 0 1px 2px rgba(20,18,14,.07), 0 8px 24px rgba(20,18,14,.06);
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }

/* Several components set display, which would otherwise beat the UA rule. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 13px/1.45 var(--f-ui);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; margin: 0; text-wrap: balance; }
h1 { font-size: 19px; letter-spacing: -.01em; }
h2 { font-size: 15px; letter-spacing: -.005em; }
h3 { font-size: 12px; }

p { margin: 0; }
a { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.mono, .num { font-family: var(--f-data); font-variant-numeric: tabular-nums; }

.eyebrow {
  font: 600 10px/1 var(--f-ui);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.muted { color: var(--ink-2); }
.tiny { font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------- topbar */

.topbar {
  height: var(--top-h);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 14px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 20;
}

.brand { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.brand-mark {
  width: 20px; height: 20px;
  border-radius: 5px;
  background: url('/favicon.svg') center/contain no-repeat;
  border: 1px solid var(--paper-3);
  flex: 0 0 auto;
}
.brand-name { font-family: var(--f-display); font-weight: 600; font-size: 13px; letter-spacing: -.01em; }

/* The matchup echoes the sheet: visitor left, home right, heavy black rule. */
.matchup { display: flex; align-items: stretch; gap: 0; flex: 0 1 auto; min-width: 0; }
.matchup-rule { width: 3px; background: var(--ink); flex: 0 0 auto; }

.team-chip {
  display: flex; align-items: center; gap: 7px;
  border: 0; padding: 5px 11px;
  min-width: 0; max-width: 250px;
  font: inherit; color: var(--team-text, #fff);
  background: var(--team, var(--ink-3));
  cursor: pointer;
}
.team-chip[data-active="1"] { box-shadow: inset 0 -3px 0 rgba(255,255,255,.85); }
.chip-tri { font: 700 12px/1 var(--f-data); letter-spacing: .04em; }
.chip-name { font-family: var(--f-display); font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.savestate {
  font: 500 11px/1 var(--f-ui);
  color: var(--ink-3);
  padding: 4px 7px;
  border-radius: 3px;
}
.savestate[data-state="saving"] { color: var(--warn); }
.savestate[data-state="error"] { color: var(--bad); background: var(--bad-wash); }

/* --------------------------------------------------------------- layout */

.shell {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  height: calc(100% - var(--top-h));
}

.rail {
  border-right: 1px solid var(--rule);
  background: var(--paper-2);
  display: flex; flex-direction: column;
  overflow: auto;
}

.stage { overflow: auto; padding: 20px 22px 60px; }
.stage:focus { outline: none; }

.stage-head {
  display: flex; align-items: flex-end; gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.stage-head .grow { flex: 1 1 auto; min-width: 0; }
.stage-head p { color: var(--ink-2); margin-top: 3px; max-width: 68ch; }

/* ---------------------------------------------------------------- steps */

.steps { list-style: none; margin: 0; padding: 8px 0 0; }

.step {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 9px;
  align-items: baseline;
  width: 100%;
  padding: 8px 12px;
  border: 0; background: none;
  font: inherit; color: var(--ink-2);
  text-align: left; cursor: pointer;
  border-left: 3px solid transparent;
}
.step:hover { background: var(--paper-3); color: var(--ink); }
.step[aria-current="true"] { color: var(--ink); background: var(--paper-3); border-left-color: var(--accent); }
.step[disabled] { opacity: .4; cursor: default; }
.step[disabled]:hover { background: none; color: var(--ink-2); }

.step-n { font: 500 10px/1.6 var(--f-data); color: var(--ink-3); }
.step[aria-current="true"] .step-n { color: var(--accent); }
.step-t { font-family: var(--f-display); font-weight: 600; font-size: 12.5px; }
.step-s { grid-column: 2; font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.step-s[data-tone="ok"] { color: var(--ok); }
.step-s[data-tone="warn"] { color: var(--warn); }
.step-s[data-tone="bad"] { color: var(--bad); }

.rail-foot { margin-top: auto; padding: 12px; border-top: 1px solid var(--rule); display: grid; gap: 10px; }

.readiness { display: grid; gap: 5px; }
.ready-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-2); }
.ready-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rule-2); flex: 0 0 auto; }
.ready-row[data-tone="ok"] .ready-dot { background: var(--ok); }
.ready-row[data-tone="warn"] .ready-dot { background: var(--warn); }
.ready-row[data-tone="bad"] .ready-dot { background: var(--bad); }
.ready-row .num { margin-left: auto; color: var(--ink-3); }

/* -------------------------------------------------------------- buttons */

.btn {
  font: 500 12px/1 var(--f-ui);
  padding: 7px 11px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--paper-2);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--paper-3); }
.btn:active { transform: translateY(.5px); }
.btn[disabled] { opacity: .45; cursor: default; }
.btn[disabled]:hover { background: var(--paper-2); }

.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
.btn-quiet { border-color: transparent; background: none; color: var(--ink-2); }
.btn-quiet:hover { background: var(--paper-3); color: var(--ink); }
.btn-danger { border-color: var(--bad); color: var(--bad); background: var(--paper-2); }
.btn-danger:hover { background: var(--bad-wash); }
.btn-block { width: 100%; padding: 9px; }
.btn-sm { padding: 4px 7px; font-size: 11px; }

.btnrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* --------------------------------------------------------- form controls */

input[type="text"], input[type="search"], select, textarea {
  font: 12.5px/1.3 var(--f-ui);
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  padding: 7px 9px;
  width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
textarea { resize: vertical; min-height: 90px; font-family: var(--f-data); font-size: 11.5px; }
label.field { display: grid; gap: 4px; }
label.field > span { font: 600 10px/1 var(--f-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }

/* --------------------------------------------------------------- panels */

.panel {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--rule);
}
.panel-head h2 { flex: 1 1 auto; min-width: 0; }
.panel-body { padding: 12px; }

/* Two-team split, the sheet's own structure. */
.split { display: grid; grid-template-columns: 1fr 3px 1fr; align-items: start; }
.split > .divider { background: var(--ink); align-self: stretch; min-height: 100%; }
.side-label {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  color: var(--team-text, #fff);
  background: var(--team, var(--ink-3));
  font-family: var(--f-display); font-weight: 600; font-size: 12.5px;
}
.side-label .eyebrow { color: inherit; opacity: .75; margin-left: auto; }

/* ---------------------------------------------------------------- chips */

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 10.5px/1 var(--f-ui);
  letter-spacing: .03em;
  padding: 4px 7px;
  border-radius: 3px;
  background: var(--paper-3);
  color: var(--ink-2);
  white-space: nowrap;
}
.tag[data-tone="ok"]   { background: var(--ok-wash);   color: var(--ok); }
.tag[data-tone="warn"] { background: var(--warn-wash); color: var(--warn); }
.tag[data-tone="bad"]  { background: var(--bad-wash);  color: var(--bad); }
.tag[data-tone="accent"] { background: var(--accent-wash); color: var(--accent); }

/* ---------------------------------------------------------------- notes */

.note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink-3);
  background: var(--paper-2);
}
.note[data-tone="ok"]   { border-left-color: var(--ok);   background: var(--ok-wash); }
.note[data-tone="warn"] { border-left-color: var(--warn); background: var(--warn-wash); }
.note[data-tone="bad"]  { border-left-color: var(--bad);  background: var(--bad-wash); }
.note .grow { flex: 1 1 auto; min-width: 0; }
.note strong { font-weight: 600; }

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

.tablewrap { overflow-x: auto; }

table.grid { border-collapse: collapse; width: 100%; font-size: 12px; }
table.grid th {
  text-align: left;
  font: 600 10px/1 var(--f-ui);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 7px 8px;
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; background: var(--paper-2); z-index: 1;
}
table.grid td { padding: 5px 8px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
table.grid tr:last-child td { border-bottom: 0; }
table.grid td.n {
  font-family: var(--f-data); font-variant-numeric: tabular-nums;
  color: var(--ink-2); white-space: nowrap; width: 1%;
}

/* --------------------------------------------------------- search picker */

/* Results used to be `position: absolute`, floating over whatever was below
   the input. An absolutely-positioned box is invisible to its parent's size —
   the parent never grows to fit it — so the panel around the picker (the
   modal, or the New Sheet column) stayed exactly as tall as the empty input,
   and the results just hung off the bottom of it, clipped by the first
   ancestor that clips overflow (the modal) instead of being contained by
   anything. Keeping results in normal document flow fixes that at the root:
   the picker (and everything holding it) now grows and shrinks with the
   results the same way it would for any other paragraph of content. */
.picker-results {
  margin-top: 4px;
  max-height: 300px; overflow: auto;
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.picker-item {
  display: block; width: 100%; text-align: left;
  border: 0; background: none; font: inherit; color: var(--ink);
  padding: 7px 10px; cursor: pointer;
  border-bottom: 1px solid var(--rule);
}
.picker-item:last-child { border-bottom: 0; }
.picker-item:hover, .picker-item[data-cursor="1"] { background: var(--accent-wash); }
.picker-item small { display: block; color: var(--ink-3); font-size: 11px; }

/* -------------------------------------------------------------- lineup */

.lineup { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
.lineup > * { min-width: 0; }

.pool { display: grid; gap: 0; max-height: calc(100vh - 330px); overflow: auto; align-content: start; }

.pool-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 8px; align-items: center;
  padding: 5px 8px;
  border-bottom: 1px solid var(--rule);
  cursor: grab;
  background: var(--paper-2);
}
.pool-row:hover { background: var(--accent-wash); }
.pool-row[data-on="1"] { opacity: .52; }
.pool-row[data-on="1"] .jersey { color: var(--accent); }
.pool-row[data-on="1"]:hover { background: var(--paper-3); }
.pool-row[data-cursor="1"] { box-shadow: inset 3px 0 0 var(--accent); }
.pool-row .jersey { font: 700 12px/1 var(--f-data); font-variant-numeric: tabular-nums; text-align: right; color: var(--ink-2); }
.pool-row .who { min-width: 0; display: grid; }
.pool-row .nm { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pool-row .meta { font-size: 10.5px; color: var(--ink-3); font-family: var(--f-data); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pool-row .reason { font: 11px/1.3 var(--f-data); color: var(--accent); white-space: nowrap; }

/* the 18 */
.slots {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
}

.slot {
  position: relative;
  border: 1px solid var(--rule-2);
  border-radius: 3px;
  background: var(--paper-2);
  min-height: 104px;
  padding: 4px;
  display: flex; flex-direction: column;
  cursor: grab;
  text-align: left;
  font: inherit; color: var(--ink);
}
.slot[data-empty="1"] {
  background: repeating-linear-gradient(-45deg, transparent, transparent 5px, var(--paper-3) 5px, var(--paper-3) 10px);
  border-style: dashed;
  cursor: default;
}
.slot[data-drop="1"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash); }
.slot[data-dragging="1"] { opacity: .35; }
.slot[data-flag="review"] { border-color: var(--warn); }
.slot[data-flag="missing"] { border-color: var(--bad); }

.slot-n {
  position: absolute; top: 2px; left: 4px;
  font: 600 9px/1 var(--f-data);
  color: var(--ink-3);
}
/* Roughly the printed cell's own proportions, so what you arrange here looks
   like what comes out of the printer. */
.slot-face {
  aspect-ratio: 1 / .92; margin: 12px 0 4px;
  background: var(--paper-3);
  border-radius: 2px;
  overflow: hidden;
  display: grid; place-items: center;
}
.slot-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.slot-face[data-missing="1"] { background: var(--bad-wash); }
.slot-nm { font: 600 11px/1.25 var(--f-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-meta { font: 10px/1.3 var(--f-data); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-reason { font: 9.5px/1.25 var(--f-data); color: var(--accent); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-inj { font: 700 9.5px/1 var(--f-ui); color: #fff; background: var(--bad); padding: 2px 4px; border-radius: 2px; align-self: flex-start; margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; }

.slot-tools { position: absolute; top: 2px; right: 2px; display: flex; gap: 2px; opacity: 0; }
.slot:hover .slot-tools, .slot:focus-within .slot-tools { opacity: 1; }
.slot-tool {
  border: 0; background: var(--paper-3); color: var(--ink-2);
  width: 17px; height: 17px; border-radius: 2px;
  font: 600 10px/1 var(--f-ui); cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.slot-tool:hover { background: var(--ink); color: var(--paper-2); }

.slot-coach { border-top: 3px solid var(--team, var(--ink-3)); }

/* -------------------------------------------------------------- photos */

.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }

.review-card {
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  background: var(--paper-2);
  overflow: hidden;
  display: grid; grid-template-columns: 78px 1fr;
}
.review-card[data-state="missing"] { border-color: var(--bad); }
.review-card .shot { background: var(--paper-3); min-height: 112px; }
.review-card .shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.review-card .shot[data-missing="1"] { background: var(--bad-wash); display: grid; place-items: center; color: var(--bad); font: 600 10px/1 var(--f-ui); }
.review-card .body { padding: 8px 9px; display: grid; align-content: start; gap: 4px; min-width: 0; }
.review-card .nm { font-weight: 600; font-size: 12.5px; }
.review-card .fn { font: 11px/1.35 var(--f-data); color: var(--ink-2); word-break: break-all; }

.filelist { max-height: 320px; overflow: auto; border: 1px solid var(--rule); border-radius: var(--radius); }
.filerow {
  display: grid; grid-template-columns: 46px 1fr auto; gap: 8px; align-items: center;
  padding: 5px 8px; border-bottom: 1px solid var(--rule);
  width: 100%; border-left: 0; border-right: 0; border-top: 0;
  background: var(--paper-2); font: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.filerow:hover { background: var(--accent-wash); }
.filerow img { width: 46px; height: 46px; object-fit: cover; object-position: 50% 22%; border-radius: 2px; background: var(--paper-3); }
.filerow .fn { font: 11px/1.3 var(--f-data); word-break: break-all; }

/* ------------------------------------------------------------- preview */

.previewwrap {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow);
}
/* The sheet is rendered at print size and scaled down to fit the pane. The
   transform is on the iframe element, so the document inside is untouched and
   printing still comes out full size. */
.previewwrap .scaler { position: relative; overflow: hidden; }
.previewwrap iframe {
  border: 0; display: block; background: #fff;
  transform-origin: top left;
  width: 1100px; height: 800px;
}

/* -------------------------------------------------------------- toasts */

.toasts {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 60; display: grid; gap: 8px; justify-items: center;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  background: var(--ink); color: var(--paper);
  padding: 9px 12px; border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 12.5px;
  animation: rise .16s ease-out;
}
.toast[data-tone="bad"] { background: var(--bad); color: #fff; }
.toast .btn { background: transparent; border-color: rgba(255,255,255,.35); color: inherit; }
.toast .btn:hover { background: rgba(255,255,255,.14); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

/* --------------------------------------------------------------- modal */

.modal-veil {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(16,16,18,.42);
  display: grid; place-items: center;
  padding: 24px;
}
.modal {
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  border-radius: 7px;
  box-shadow: var(--shadow);
  width: min(560px, 100%);
  max-height: 84vh; overflow: auto;
  padding: 16px 18px;
  display: grid; gap: 12px;
}
.modal.wide { width: min(880px, 100%); }
.modal h2 { font-size: 16px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

/* -------------------------------------------------------------- banner */

.banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: var(--warn-wash);
  border-top: 1px solid var(--warn);
  color: var(--warn);
  font-size: 12px;
}
.banner .btn { margin-left: auto; border-color: var(--warn); color: var(--warn); }

/* --------------------------------------------------------------- utils */

.stack { display: grid; gap: 12px; }
.stack-sm { display: grid; gap: 7px; }
.row { display: flex; gap: 10px; align-items: center; }
.grow { flex: 1 1 auto; min-width: 0; }
.right { margin-left: auto; }
.empty { padding: 26px; text-align: center; color: var(--ink-3); }
kbd {
  font: 500 10.5px/1 var(--f-data);
  border: 1px solid var(--rule-2); border-bottom-width: 2px;
  border-radius: 3px; padding: 3px 4px; background: var(--paper-2); color: var(--ink-2);
}