/* Reps — scoreboard direction. Colours only via tokens. */

body { display: flex; flex-direction: column; }
main { flex: 1; display: flex; flex-direction: column; }

/* ---------- display type ---------- */
.screen-title, .ex-name, .band-name, .hist-name, .pex-name, .wordmark, .cell-num, .set-w,
.mini-num, .band-num, .day, .mon, .delta, .tabs > button, .sheet-head h2, .key, .key-unit, .pex-num, .set-add {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: uppercase;
}
.num, .cell-num, .set-w, .mini-num, .band-num, .day, .key, .clock {
  font-variant-numeric: tabular-nums;
  line-height: .85;
}

/* ---------- top band ---------- */
.topband { background: var(--bg); }
.topband-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3); }
.wordmark {
  font-size: var(--text-xl); letter-spacing: .02em; line-height: 1;
  background: var(--accent); color: var(--accent-contrast);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-s);
  transform: skewX(-8deg);
}
.wordmark > span { display: inline-block; transform: skewX(8deg); }

.tabs.segmented { background: transparent; padding: 0; gap: 0; }
.tabs > button {
  position: relative; min-height: 44px; padding: 0 var(--space-2);
  font-size: var(--text-lg); letter-spacing: .03em; color: var(--text-muted); border-radius: 0;
}
.tabs > button::after {
  content: ""; position: absolute; left: var(--space-2); right: var(--space-2); bottom: 2px; height: 3px;
  background: var(--accent); transform: scaleX(0); transition: transform var(--dur) var(--ease);
}
.tabs > button { font-weight: 600; }
.tabs > button[aria-selected="true"] { background: transparent; box-shadow: none; color: var(--text); font-weight: 800; }
/* light: volt is a fill, never a thin line on white — mark the active tab in ink */
.tabs > button::after { background: var(--text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tabs > button::after { background: var(--accent); } }
:root[data-theme="dark"] .tabs > button::after { background: var(--accent); }
.tabs > button[aria-selected="true"]::after { transform: scaleX(1); }
.tabs > button:hover { color: var(--text); }
@media (min-width: 420px) { .tabs > button { padding: 0 var(--space-3); } .tabs > button::after { left: var(--space-3); right: var(--space-3); } }

.stripe { height: 8px; background: repeating-linear-gradient(-45deg, var(--accent) 0 6px, transparent 6px 12px);
  border-bottom: var(--border-w) solid var(--border); }

.offline-band { margin: 0; padding: var(--space-2) 0; background: var(--surface-2); font-size: var(--text-sm); }
.offline-band .container { display: block; }

.danger-band { background: color-mix(in oklab, var(--danger) 12%, var(--bg)); border-bottom: var(--border-w) solid var(--danger); padding: var(--space-3) 0; }
.danger-band p { color: var(--danger); font-weight: 600; font-size: var(--text-sm); }
.danger-band .row { flex-wrap: wrap; }

/* ---------- screens ---------- */
.view { flex: 1; display: flex; flex-direction: column; }
.screen { flex: 1; display: flex; flex-direction: column; }
.screen-head { display: flex; align-items: flex-end; gap: var(--space-2); padding: var(--space-5) 0 var(--space-4); min-width: 0; }
.screen-head .grow { display: grid; gap: var(--space-1); }
.screen-title { font-size: var(--text-2xl); line-height: .9; letter-spacing: .01em; }
.screen-body { display: flex; flex-direction: column; gap: var(--space-5); padding-bottom: var(--space-6); }
.intro { max-width: 34rem; }

/* primary action: sticky bottom bar on phone, inline at ≥900px */
.actionbar {
  order: 99; margin-top: auto;
  position: sticky; bottom: 0; z-index: 5;
  margin-inline: calc(-1 * var(--space-4));
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  margin-bottom: calc(-1 * env(safe-area-inset-bottom));
  background: var(--bg); border-top: var(--border-w) solid var(--border);
}
.toast-region { bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) {
  /* title and primary action share one row */
  .screen { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; align-content: start; column-gap: var(--space-4); }
  .screen > .screen-head { grid-column: 1; grid-row: 1; }
  .screen > .actionbar { grid-column: 2; grid-row: 1; align-self: end; padding-bottom: var(--space-4); }
  .screen > .screen-body { grid-column: 1 / -1; grid-row: 2; }
  .actionbar { order: 0; position: static; margin: 0; padding: 0; border: 0; display: flex; justify-content: flex-end; }
  .actionbar .btn-block { width: auto; min-width: 14rem; }
  /* scoreboard identity holds up on desktop */
  :root { --container: 60rem; }
  .topband-inner { min-height: 80px; }
  .wordmark { font-size: var(--text-2xl); padding: var(--space-1) var(--space-4); }
  .tabs > button { font-size: var(--text-xl); min-height: 56px; }
  .toast-region { bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
}

/* ---------- scoreboard cells ---------- */
.board {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-block: var(--border-w) solid var(--border); border-radius: 0;
}
.cell {
  position: relative; container-type: inline-size;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3);
  min-height: 7.5rem; padding: var(--space-3);
}
.cell + .cell { border-left: var(--border-w) solid var(--border); }
.cell .label { line-height: 1.2; min-height: 2.4em; }
/* numerals fill their cell: as big as --text-3xl, shrinking only as digits are added; right-aligned like a readout */
.cell-num { display: flex; justify-content: flex-end; }
.cell-num .roll, .cell-num .clock { font-size: clamp(2rem, calc(175cqi / var(--len, 3)), var(--text-3xl)); }
.clock { display: inline-block; line-height: 1; }
.sk-num { display: block; height: 3rem; width: 60%; }

.board.race .cell::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--accent); transform-origin: left; animation: race 300ms var(--ease) both;
}
.board.race .cell:nth-child(2)::after { animation-delay: 60ms; }
.board.race .cell:nth-child(3)::after { animation-delay: 120ms; }
@keyframes race { from { transform: scaleX(0); } }

/* ---------- roll counter ---------- */
.roll { display: inline-flex; position: relative; line-height: 1; font-variant-numeric: tabular-nums; }
.roll-digits { display: inline-flex; align-items: flex-start; }
.rd { display: inline-block; height: 1em; overflow: hidden; }
.rd-strip { display: flex; flex-direction: column; transform: translateY(calc(-1em * var(--d, 0)));
  transition: transform 150ms var(--ease); }
.rd-strip > span, .rs { display: block; height: 1em; line-height: 1; }

/* delta chip */
.delta {
  position: absolute; top: var(--space-2); right: var(--space-2); z-index: 2;
  padding: 2px var(--space-2); border-radius: var(--radius-s);
  background: var(--accent); color: var(--accent-contrast);
  font-size: var(--text-lg); line-height: 1.1; letter-spacing: .02em; pointer-events: none;
  transform: skewX(-8deg); animation: pop 1000ms var(--ease) forwards;
}
@keyframes pop {
  0% { opacity: 0; transform: skewX(-8deg) scale(.6); }
  15% { opacity: 1; transform: skewX(-8deg) scale(1); }
  85% { opacity: 1; transform: skewX(-8deg) scale(1); }
  100% { opacity: 0; transform: skewX(-8deg) scale(1); }
}

/* ---------- active session ---------- */
.exercises { display: flex; flex-direction: column; }
.ex { border-top: var(--border-w) solid var(--border); padding: var(--space-3) 0 var(--space-4); }
.ex:last-child { border-bottom: var(--border-w) solid var(--border); }
.ex-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.ex-name { flex: 1; min-width: 0; font-size: var(--text-xl); line-height: 1.05; }
.ex-count { white-space: nowrap; }

.sets {
  display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin;
  border: var(--border-w) solid var(--border); border-radius: var(--radius-m); background: var(--surface);
  margin-inline: calc(-1 * var(--space-1));
}
.set-cell {
  flex: 0 0 auto; min-width: 96px; min-height: 7rem; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-3); border: 0; border-right: var(--border-w) solid var(--border);
  background: transparent; color: var(--text); cursor: pointer; text-align: left;
  transition: background var(--dur-fast);
}
.set-cell:hover { background: var(--surface-2); }
.set-cell:active { background: var(--surface-2); box-shadow: var(--shadow-press); }
.set-cell:focus-visible { outline-offset: -4px; }
.set-w { font-size: 3.25rem; }
@media (min-width: 600px) { .set-w { font-size: 4rem; } .set-cell { min-width: 120px; } }
.set-cell.is-new { animation: set-in 220ms var(--ease); }
@keyframes set-in { from { opacity: 0; transform: translateX(-12px); } }

.set-add {
  align-items: center; justify-content: center; flex-direction: column; gap: var(--space-1);
  border-right: 0; margin: var(--space-2); min-height: calc(7rem - 2 * var(--space-2));
  border: var(--border-w) dashed var(--border); border-radius: var(--radius-s);
  font-size: var(--text-lg); letter-spacing: .04em; color: var(--text);
}
.set-add i { font-size: 1.5rem; }

.add-ex { align-self: flex-start; margin-left: calc(-1 * var(--space-4)); }

/* ---------- bands (plans, history, sheets) ---------- */
.bands { list-style: none; margin: 0; padding: 0; border-top: var(--border-w) solid var(--border); }
.bands > li { border-bottom: var(--border-w) solid var(--border); }
.band, .hist-row {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 72px;
  padding: var(--space-3) var(--space-1); border: 0; background: transparent; color: var(--text);
  text-align: left; cursor: pointer; transition: background var(--dur-fast);
}
.band:hover, .hist-row:hover { background: var(--surface-2); }
.band:active, .hist-row:active { background: var(--surface-2); }
.band:focus-visible, .hist-row:focus-visible { outline-offset: -2px; }
.band-name { flex: 1; min-width: 0; font-size: var(--text-xl); line-height: 1.05; }
.band-count { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.band-num { font-size: var(--text-2xl); }
.band-ghost { color: var(--text-muted); border: var(--border-w) dashed var(--border); border-radius: var(--radius-m); margin-top: var(--space-3); padding-inline: var(--space-3); }
.band-ghost:hover { color: var(--text); }
.band-ghost i, .band-danger i { font-size: 1.5rem; }
.band-danger { color: var(--danger); border-bottom: var(--border-w) solid var(--border); }

.hist-row { border-radius: 0; }
.date-block { display: grid; justify-items: center; gap: var(--space-1); width: 3.25rem; flex: 0 0 auto; }
.day { font-size: 2.5rem; }
.mon {
  font-size: var(--text-sm); letter-spacing: .06em; line-height: 1.2;
  background: var(--accent); color: var(--accent-contrast); padding: 0 var(--space-2);
  border-radius: var(--radius-s); transform: skewX(-8deg);
}
.hist-main { flex: 1; min-width: 0; display: grid; gap: var(--space-1); }
.hist-name { font-size: var(--text-xl); line-height: 1.05; }
.hist-meta { font-size: var(--text-sm); }
.mini { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); min-width: 3rem; flex: 0 0 auto; }
.mini + .mini { padding-left: var(--space-3); border-left: var(--border-w) solid var(--border); }
.mini-num { font-size: 2rem; }
@media (min-width: 600px) { .mini-num { font-size: 2.5rem; } .mini { min-width: 4.5rem; } }

/* ---------- sheets ---------- */
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.sheet-head h2 { font-size: var(--text-xl); letter-spacing: .01em; line-height: 1; }
.sheet-head .btn-icon { margin-right: calc(-1 * var(--space-2)); }
.sheet-kicker { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); }
.sheet-foot .btn-primary { min-width: 9rem; margin-left: auto; }
.sheet-foot .btn-ghost.btn-danger { margin-left: calc(-1 * var(--space-3)); }
.sheet-note { margin-bottom: var(--space-2); }
.menu-body { display: flex; flex-direction: column; }
.menu-body .band-ghost { margin-top: var(--space-3); }
#start-sheet .band-num { font-size: var(--text-xl); }
dialog.sheet { border-radius: var(--radius-l) var(--radius-s) 0 0; }

/* set editor */
.key-wrap {
  position: relative; display: flex; align-items: flex-end; justify-content: center; gap: var(--space-2);
  padding: var(--space-4) 0 var(--space-5);
  border-block: var(--border-w) solid var(--border); margin-bottom: var(--space-4);
}
.key { font-size: clamp(6rem, 30vw, 11rem); letter-spacing: -.01em; }
.key-unit { font-size: var(--text-xl); color: var(--text-muted); padding-bottom: .4em; }
.key-wrap .delta { top: var(--space-3); right: 0; font-size: var(--text-xl); }
.stepper { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: var(--space-3); }
.step { width: 64px; height: 64px; padding: 0; font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-xl); }
.weight-input { text-align: center; font-size: var(--text-lg); font-weight: 600; min-height: 64px; }
.weight-input[aria-invalid="true"] { border-color: var(--danger); }
#set-error { margin-top: var(--space-2); }

/* plan editor */
.plan-ex-list { border-block: var(--border-w) solid var(--border); }
.plan-ex-list .list-item { gap: var(--space-2); }
.pex-num { width: 1.75rem; font-size: var(--text-lg); color: var(--text-muted); }
.pex-name { font-size: var(--text-lg); }
.pex-empty { padding: var(--space-3) 0; font-size: var(--text-sm); }
.add-row { display: flex; gap: var(--space-2); }
.add-row .input { flex: 1; min-width: 0; }

/* ---------- misc ---------- */
/* empty state = a ghost of the board that will fill in */
.empty-board { display: grid; justify-items: start; gap: var(--space-2); text-align: left; }
.ghost-cells { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: 4.5rem; margin-bottom: var(--space-2);
  border-block: var(--border-w) solid var(--border); }
.ghost-cells > span { background: var(--surface-2); }
.ghost-cells > span:first-child { background: repeating-linear-gradient(-45deg, color-mix(in oklab, var(--accent) 55%, var(--surface-2)) 0 6px, var(--surface-2) 6px 12px); }
.ghost-cells > span + span { border-left: var(--border-w) solid var(--border); }
.empty-lead { font-family: var(--font-display); font-weight: var(--weight-display); text-transform: uppercase;
  font-size: var(--text-xl); line-height: 1; letter-spacing: .02em; }
.empty-board p { max-width: 26rem; }
.empty-board .btn { margin-top: var(--space-2); margin-left: calc(-1 * var(--space-3)); }
.btn i { font-size: 1.25em; }
.btn-l { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: var(--text-xl); }

::view-transition-old(root), ::view-transition-new(root) { animation-duration: 150ms; }

@media (prefers-reduced-motion: reduce) {
  .rd-strip { transition-delay: 0s !important; }
  .delta { animation: none !important; }
  .board.race .cell::after { animation: none !important; }
}