/* COMPONENTS shared by every site. Tokens only: see design/DESIGN.md. */

/* ── Text utilities ── */
.eyebrow {
  font-size: var(--size-2xs); font-weight: var(--weight-semibold); line-height: var(--leading-snug);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-faint);
}
.mono { font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-code); font-weight: var(--weight-semibold); }
.muted { color: var(--text-muted); }
.small { font-size: var(--size-sm); }
.center { text-align: center; justify-content: center; }
.hint { color: var(--text-muted); font-size: var(--size-sm); margin: var(--space-2) var(--space-0); }
.hint.warn, .warn { color: var(--accent-text); }
.error { color: var(--danger); }
.grow { flex: 1; }
.pos { color: var(--positive); }
.neg { color: var(--negative); }

/* ── Layout ── */
.page { max-width: var(--content-max); margin: var(--space-0) auto; padding: var(--space-3) var(--space-4) calc(var(--space-16) + var(--space-8) + env(safe-area-inset-bottom)); }
.row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-3); }
.card {
  display: block; position: relative; text-decoration: none;
  background: var(--surface); border: var(--border-thin) solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-4); margin: var(--space-3) var(--space-0);
}
.section {
  display: flex; align-items: center; gap: var(--space-3); margin: var(--space-8) var(--space-1) var(--space-2);
  font-size: var(--size-2xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-faint);
}
.section::after { content: ''; flex: 1; height: var(--border-thin); background: var(--border); }

/* ── Buttons ── */
button, .button {
  font-family: var(--font-body); font-size: var(--size-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-normal);
  color: var(--text); background: var(--surface-raised); border: var(--border-thin) solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); min-height: var(--control-md); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
button:active:not(:disabled) { transform: scale(var(--press-scale)); }
button:disabled { opacity: var(--opacity-disabled); cursor: default; }
button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: var(--weight-bold); }
button.primary:active:not(:disabled) { background: var(--accent-press); }

/* Disabled primary goes neutral — a faded orange over velvet reads as brown. */
button.primary:disabled, .button.primary:disabled { opacity: var(--opacity-full); background: var(--surface-raised); border-color: var(--border); color: var(--text-faint); }
button.big, .button.big { min-height: var(--control-lg); font-size: var(--size-md); border-radius: var(--radius-lg); }
button.block { width: 100%; margin-top: var(--space-3); }
button.link {
  background: none; border: none; padding: var(--space-1) var(--space-0-5); min-height: var(--space-0);
  color: var(--accent-text); font-weight: var(--weight-medium);
  text-decoration: underline; text-decoration-thickness: var(--border-thin); text-underline-offset: var(--space-1);
}
button.link.danger { color: var(--danger); }
button.title-edit {
  display: inline; background: none; border: none; padding: var(--space-0); min-height: var(--space-0); border-radius: var(--radius-sm);
  font-family: var(--font-display); font-size: inherit; font-weight: inherit; font-stretch: inherit; letter-spacing: inherit; color: inherit; text-align: left;
  text-decoration: underline dotted var(--border-thin) var(--text-faint); text-underline-offset: var(--space-1);
}
button.icon { min-height: var(--control-sm); min-width: var(--control-sm); padding: var(--space-1) var(--space-2); background: none; border-color: transparent; font-size: var(--size-md); }

/* ── Inputs ── */
input.text, select {
  font-family: var(--font-body); font-size: var(--size-md); color: var(--text);
  background: var(--bg-sunken); border: var(--border-thin) solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-3); min-height: var(--control-md); width: 100%; flex: 1; min-width: var(--space-0);
}
input.text:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); }
input.text::placeholder { color: var(--text-faint); }
input.text.slim { padding: var(--space-1) var(--space-2); min-height: var(--control-sm); }
.numinput { display: inline-flex; align-items: stretch; }
.numinput input {
  font-family: var(--font-display); font-stretch: var(--stretch-expanded); font-size: var(--size-lg); font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums; color: var(--text);
  background: var(--bg-sunken); border: var(--border-thin) solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3); min-height: var(--control-md); width: calc(var(--space-16) + var(--space-12)); text-align: right;
}
.numinput input:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); }
.numinput input::placeholder { color: var(--text-faint); }
.numinput .pm { min-width: var(--control-sm); padding: var(--space-0); border-top-right-radius: var(--radius-none); border-bottom-right-radius: var(--radius-none); border-right: none; }
.numinput .pm + input { border-top-left-radius: var(--radius-none); border-bottom-left-radius: var(--radius-none); }
.numinput.slim input { min-height: var(--control-sm); width: calc(var(--space-16) + var(--space-2)); padding: var(--space-1) var(--space-2); font-size: var(--size-md); }
.numinput.huge input { font-size: var(--size-3xl); font-weight: var(--weight-black); width: calc(var(--space-16) * 2.25); min-height: var(--control-xl); text-align: center; border-radius: var(--radius-lg); }

/* ── Chips ── */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) var(--space-0); }
.chip { border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); min-height: var(--control-sm); font-weight: var(--weight-medium); }
.chips.big .chip { min-height: var(--control-md); padding: var(--space-2) var(--space-5); font-size: var(--size-md); }
.chip.on { background: var(--selected-bg); color: var(--selected-text); border-color: var(--selected-bg); font-weight: var(--weight-semibold); }
.chip .seat { display: inline-grid; place-items: center; width: var(--space-5); height: var(--space-5); border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: var(--size-2xs); font-weight: var(--weight-bold); }
.toggle { display: flex; gap: var(--space-3); align-items: center; min-height: var(--control-md); cursor: pointer; }
.toggle input { appearance: none; width: var(--space-6); height: var(--space-6); border: var(--border-thick) solid var(--border-strong); border-radius: var(--radius-sm); margin: var(--space-0); display: grid; place-items: center; flex: none; background: var(--bg-sunken); }
.toggle input:checked { background: var(--accent); border-color: var(--accent); }
.toggle input:checked::after { content: ''; width: var(--space-2); height: var(--space-3); border: solid var(--on-accent); border-width: var(--space-0) var(--border-thick) var(--border-thick) var(--space-0); transform: translateY(calc(var(--space-0-5) * -1)) rotate(45deg); }
.field { margin: var(--space-3) var(--space-0); }
.field-label { font-size: var(--size-2xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-faint); margin-bottom: var(--space-2); }

/* ── Home ── */
.hero { text-align: center; padding: var(--space-12) var(--space-0) var(--space-4); }
.hero h1 { margin: var(--space-0); line-height: var(--leading-tight); }
.code-input { text-transform: uppercase; letter-spacing: var(--tracking-code); font-size: var(--size-xl) !important; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.list { list-style: none; margin: var(--space-0); padding: var(--space-0); }
.list-link { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-3) var(--space-1); border-top: var(--border-thin) solid var(--border); text-decoration: none; }
.list li:first-child .list-link { border-top: none; }
.list-link .mono { color: var(--accent-text); }

/* ── Session ── */
.topbar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-0) var(--space-3); }
.topbar .title { flex: 1; font-size: var(--size-xl); margin: var(--space-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back { font-size: var(--size-xl); text-decoration: none; min-width: var(--control-sm); min-height: var(--control-sm); display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: var(--space-0); border-radius: var(--radius-pill); }
.code-pill { background: var(--accent-soft-bg); color: var(--on-accent-soft); border-color: transparent; border-radius: var(--radius-pill); letter-spacing: var(--tracking-code); font-weight: var(--weight-bold); min-height: var(--control-sm); padding: var(--space-1) var(--space-3); }
.me-line { font-size: var(--size-sm); margin-bottom: var(--space-3); }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.sheet-backdrop { position: fixed; inset: var(--space-0); background: var(--scrim); backdrop-filter: blur(var(--space-1)); display: flex; align-items: flex-end; justify-content: center; z-index: var(--z-sheet); }
.sheet { background: var(--surface-raised); width: 100%; max-width: var(--content-max); border-radius: var(--radius-xl) var(--radius-xl) var(--radius-none) var(--radius-none); border: var(--border-thin) solid var(--border); padding: var(--space-6) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom)); max-height: 90vh; overflow: auto; box-shadow: var(--shadow-raised); }
@media (min-width: 40rem) {
  .sheet-backdrop { align-items: center; }
  .sheet { border-radius: var(--radius-xl); }
}
.big-code { font-stretch: var(--stretch-expanded); font-size: var(--size-4xl); font-weight: var(--weight-black); letter-spacing: var(--tracking-code); color: var(--accent); }
.qr { display: block; margin-inline: auto; width: min(calc(var(--space-16) * 4), 66vw); height: auto; background: var(--qr-bg); border-radius: var(--radius-lg); }
.qr-ink { fill: var(--qr-fg); }
.qr-accent { fill: var(--accent); }
.back img { display: block; width: var(--space-8); }
.banner { padding: var(--space-2) var(--space-4); text-align: center; font-size: var(--size-sm); }
.banner.error { background: var(--danger); color: var(--text); }

/* ── New game ── */
.game-list { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.game-row {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--space-0-5) var(--space-3);
  width: 100%; text-align: left; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--surface);
}
.game-row-name { font-stretch: var(--stretch-expanded); font-size: var(--size-lg); font-weight: var(--weight-black); line-height: var(--leading-snug); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-row-players { font-size: var(--size-xs); font-weight: var(--weight-semibold); color: var(--accent-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.game-row-blurb { grid-column: 1 / -1; font-size: var(--size-sm); font-weight: var(--weight-regular); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-row:active:not(:disabled) .game-row-name { color: var(--accent-text); }

/* ── Game: tabs, history, sheet ── */
.tabs { display: flex; gap: var(--space-1); margin: var(--space-6) var(--space-0) var(--space-1); background: var(--bg-sunken); padding: var(--space-1); border-radius: var(--radius-md); }
.tabs button { flex: 1; background: none; border: none; min-height: var(--control-sm); color: var(--text-muted); border-radius: var(--radius-sm); }
.tabs button.on { background: var(--surface-raised); color: var(--text); }
.tabs--slide { position: relative; margin: var(--space-0) var(--space-0) var(--space-3); }
.tabs--slide::before { content: ''; position: absolute; top: var(--space-1); bottom: var(--space-1); left: var(--space-1); width: calc((100% - var(--space-1) * 3) / 2); background: var(--surface-raised); border-radius: var(--radius-sm); transition: transform var(--dur-base) var(--ease-out); }
.tabs--slide[data-on='all']::before { transform: translateX(calc(100% + var(--space-1))); }
.tabs--slide button { position: relative; transition: color var(--dur-base) var(--ease-out); }
.tabs--slide button.on { background: none; }
@media (prefers-reduced-motion: reduce) {
  .tabs--slide::before { transition: none; }
}
.toast { background: var(--selected-bg); color: var(--selected-text); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-radius: var(--radius-pill); display: flex; gap: var(--space-3); align-items: center; box-shadow: var(--shadow-raised); font-weight: var(--weight-medium); }
.toast button { min-height: var(--control-sm); background: var(--accent); border-color: var(--accent); color: var(--on-accent); border-radius: var(--radius-pill); }

/* ── Theme toggle (header icon) ── */
.theme-toggle svg { width: var(--space-5); height: var(--space-5); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.theme-toggle svg path:only-child { fill: currentColor; stroke: none; }
.topbar--end { justify-content: flex-end; padding-bottom: var(--space-0); }
.topbar--stacked { flex-wrap: wrap; }
.topbar--stacked .code-pill { margin-left: auto; }
.topbar--stacked .title { flex-basis: 100%; white-space: normal; overflow-wrap: anywhere; }
.share-btn svg { width: var(--space-5); height: var(--space-5); fill: currentColor; }

/* ── Connection status ── */
.live-status { position: sticky; top: var(--space-0); z-index: var(--z-sticky); text-align: center; font-size: var(--size-xs); font-weight: var(--weight-semibold); padding: var(--space-1) var(--space-4); background: var(--surface-raised); color: var(--text-muted); border-bottom: var(--border-thin) solid var(--border); }
.live-status.offline { color: var(--negative); }
select:disabled, .toggle input:disabled { opacity: var(--opacity-disabled); cursor: default; }

/* ── Fold (collapsible section) ── */
.fold > summary { display: flex; align-items: baseline; gap: var(--space-3); cursor: pointer; list-style: none; min-height: var(--control-sm); color: var(--accent-text); font-weight: var(--weight-semibold); padding: var(--space-2) var(--space-0); }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: '▾'; margin-left: auto; color: var(--text-faint); transition: transform var(--dur-fast) var(--ease-out); }
.fold[open] > summary::after { transform: rotate(180deg); }
.fold > summary h2 { margin: var(--space-0); color: var(--text); }
.card.fold { padding-top: var(--space-2); padding-bottom: var(--space-2); }
@media (hover: hover) {
  button:hover:not(:disabled), .button:hover { background: var(--surface-hover); border-color: var(--border-strong); }
  button.primary:hover:not(:disabled), .button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  button.link:hover:not(:disabled) { background: none; color: var(--accent-hover); }
  button.title-edit:hover:not(:disabled) { background: none; }
  button.icon:hover:not(:disabled) { background: var(--wash); border-color: transparent; }
  .chip.on:hover:not(:disabled) { background: var(--selected-bg); color: var(--selected-text); border-color: var(--selected-bg); font-weight: var(--weight-semibold); }
  .back:hover:not(:disabled) { background: var(--wash); }
  .code-pill:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
  .tabs button:hover:not(:disabled) { background: var(--wash); border: none; color: var(--text); }
}

/* ── Shared additions: layout, numbers, compact controls, static chips, logo ── */
.stack { display: flex; flex-direction: column; gap: var(--space-2); }
.num { font-variant-numeric: tabular-nums; }
.card.flush { margin: var(--space-0); }
button.compact { min-height: var(--space-0); padding: var(--space-1) var(--space-2); font-size: var(--size-xs); }
span.chip { display: inline-flex; align-items: center; background: var(--surface-raised); border: var(--border-thin) solid var(--border); }
.logo { font-family: var(--font-display); font-stretch: var(--stretch-expanded); font-size: var(--size-3xl); font-weight: var(--weight-black); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin: var(--space-0); }
.logo span { color: var(--accent); }
.earflick-crumb { display: block; padding: var(--space-4); text-align: center; font-size: var(--size-sm); color: var(--text-muted); text-decoration: none; }
@media (hover: hover) { .earflick-crumb:hover { color: var(--text); } }
.hl { color: var(--highlight); }