/* base.css — replaces static/main.css (Phantom). Reset, type, layout, grid,
   forms, buttons, tables, panels. Every value comes from tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, pre, form, fieldset, blockquote, table { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

html { background: var(--page-bg); }
body {
  min-height: 100vh;
  background: var(--page-bg);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}

/* Type */
a { color: var(--text-link); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 2px; }
strong, b { font-weight: 600; }
em, i { font-style: italic; }
p { margin: 0 0 var(--space-md) 0; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
h1 { font-size: var(--font-size-xl); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; margin: 0; }
h2 { font-size: var(--font-size-lg); font-weight: 600; line-height: 1.3; margin: 0 0 var(--space-md) 0; }
h3 { font-size: var(--font-size-base); font-weight: 600; line-height: 1.4; margin: 0 0 var(--space-sm) 0; }
h4, h5, h6 { font-size: var(--font-size-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin: 0 0 var(--space-sm) 0; }
h1 a, h2 a, h3 a { color: inherit; }
code, pre, .mono { font-family: var(--font-mono); font-size: 0.92em; }
code { background: var(--surface-bg-sunken); border-radius: var(--radius-sm); padding: 0.1em 0.4em; }
pre { white-space: pre-wrap; word-break: break-word; }
hr { border: 0; border-top: var(--border-width) solid var(--border-color); margin: var(--space-md) 0; }
small, .muted { color: var(--text-muted); }
.small { font-size: var(--font-size-sm); }
.align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; }
.placeholder { color: var(--text-muted); font-style: italic; }

/* Layout */
#wrapper { display: flex; flex-direction: column; min-height: 100vh; }
#main { flex: 1; padding: var(--space-lg) 0 var(--space-xl); }
#wrapper > * > .inner, .inner { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--space-lg); }
@media (min-width: 1920px) { #wrapper > * > .inner, .inner { max-width: 1320px; } }
@media (max-width: 736px) { #wrapper > * > .inner, .inner { padding: 0 var(--space-md); } #main { padding: var(--space-md) 0 var(--space-lg); } }

/* Page header: eyebrow (game) + title + optional right-side controls */
.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-sm) var(--space-lg); margin-bottom: var(--space-lg); }
.page-header .page-title { min-width: 0; }
.page-header .eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); font-weight: 600; color: var(--text-secondary); letter-spacing: 0.02em; margin-bottom: 2px; }
.page-header .eyebrow .dot { width: 8px; height: 8px; border-radius: 2px; background: var(--game-accent); }
.page-header .page-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.page-header .page-controls label { margin: 0; font-size: var(--font-size-sm); color: var(--text-muted); }
.page-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.page-controls label { margin: 0; font-size: var(--font-size-sm); color: var(--text-muted); }
.page-controls select { width: auto; min-width: 14em; }

/* Section / panel — <section> in the React pages and div.section */
section, div.section, .box, .panel {
  background: var(--surface-bg);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-sm);
}
section > :last-child, .box > :last-child, .panel > :last-child, div.section > :last-child { margin-bottom: 0; }
section > h2, div.section > h2, .panel > h2 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-sm); margin-bottom: var(--space-md); border-bottom: var(--border-width) solid var(--border-color-light); }
section > h2 .hint, .panel > h2 .hint { font-size: var(--font-size-sm); font-weight: 400; color: var(--text-muted); }
section > h3, div.section > h3 { color: var(--text-secondary); font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.06em; }
section.plain, .panel.plain { background: transparent; border: 0; box-shadow: none; padding: 0; }
@media (max-width: 736px) { section, div.section, .box, .panel { padding: var(--space-md); border-radius: var(--radius); } }

/* Grid (the React markup uses .row / .col-N / .col-N-small / .gtr-uniform) */
.row { display: flex; flex-wrap: wrap; margin: 0 0 0 calc(-1 * var(--space-md)); align-items: stretch; }
.row > * { padding-left: var(--space-md); min-width: 0; }
.row.gtr-uniform { margin-top: calc(-1 * var(--space-md)); }
.row.gtr-uniform > * { padding-top: var(--space-md); }
.row.gtr-0 { margin-left: 0; } .row.gtr-0 > * { padding-left: 0; }
.row.aln-middle { align-items: center; } .row.aln-top { align-items: flex-start; }
.row > .col-1 { width: 8.3333%; } .row > .col-2 { width: 16.6667%; } .row > .col-3 { width: 25%; } .row > .col-4 { width: 33.3333%; }
.row > .col-5 { width: 41.6667%; } .row > .col-6 { width: 50%; } .row > .col-7 { width: 58.3333%; } .row > .col-8 { width: 66.6667%; }
.row > .col-9 { width: 75%; } .row > .col-10 { width: 83.3333%; } .row > .col-11 { width: 91.6667%; } .row > .col-12 { width: 100%; }
@media (max-width: 980px) {
  .row > .col-4-medium { width: 33.3333%; } .row > .col-6-medium { width: 50%; } .row > .col-12-medium { width: 100%; }
}
@media (max-width: 736px) {
  .row > .col-3-small { width: 25%; } .row > .col-4-small { width: 33.3333%; } .row > .col-6-small { width: 50%; } .row > .col-12-small { width: 100%; }
}

/* Key/value rows — replaces the "<ul class=actions><li><span>value</span></li><li><Edit/></li></ul>"
   pattern that put a text span and a 3.5em button side by side with no alignment. */
.kv-list { display: flex; flex-direction: column; }
.kv-row { display: grid; grid-template-columns: minmax(8em, 12em) minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm) var(--space-md); padding: 10px 0; border-bottom: var(--border-width) solid var(--border-color-light); min-height: 44px; }
.kv-row:last-child { border-bottom: 0; }
.kv-row .kv-label { font-weight: 500; color: var(--text-secondary); font-size: var(--font-size-sm); }
.kv-row .kv-value { min-width: 0; overflow-wrap: anywhere; }
.kv-row .kv-value.secret { letter-spacing: 0.2em; color: var(--text-muted); }
.kv-row .kv-actions { display: flex; gap: var(--space-sm); justify-content: flex-end; }
.kv-row .kv-edit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.kv-row .kv-edit input[type="text"], .kv-row .kv-edit input[type="password"], .kv-row .kv-edit select { flex: 1 1 12em; width: auto; }
@media (max-width: 736px) { .kv-row { grid-template-columns: minmax(0, 1fr) auto; } .kv-row .kv-label { grid-column: 1 / -1; padding-bottom: 0; margin-bottom: -6px; } }

/* Actions list */
ul.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin: 0; padding: 0; }
ul.actions li { display: flex; align-items: center; }
ul.actions.special { justify-content: center; }
ul.actions.end { justify-content: flex-end; }
ul.actions.stacked { flex-direction: column; align-items: stretch; }
ul.actions + ul.actions, p + ul.actions, form ul.actions { margin-top: var(--space-md); }
form > ul.actions:first-child { margin-top: 0; }

/* Forms */
form { margin: 0; }
label { display: block; font-size: var(--font-size-sm); font-weight: 500; color: var(--text-secondary); margin: 0 0 var(--space-xs) 0; }
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], select, textarea {
  appearance: none; -webkit-appearance: none;
  display: block; width: 100%; height: 34px; padding: 0 10px;
  background: var(--interactive-bg); color: var(--text-primary);
  border: var(--border-width) solid var(--interactive-border); border-radius: var(--radius);
  outline: 0; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus, select:focus, textarea:focus { border-color: var(--interactive-focus-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--interactive-focus-ring) 22%, transparent); }
textarea { height: auto; min-height: 5em; padding: 8px 10px; resize: vertical; }
select {
  padding-right: 32px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%238b94a2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
  text-overflow: ellipsis;
}
select option { background: var(--surface-bg); color: var(--text-primary); }
input.inline, select.inline { display: inline-block; width: auto; }
.field { margin-bottom: var(--space-md); }
.field:last-child { margin-bottom: 0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); gap: var(--space-md); }
.form-grid .full { grid-column: 1 / -1; }
.form-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-sm); }
.form-inline > * { margin: 0; }
.form-inline input[type="text"] { width: auto; flex: 1 1 14em; }
.form-inline label { width: 100%; }
form.form-inline + form.form-inline { margin-top: var(--space-sm); }

/* Checkbox / radio: keep the input+label sibling structure the React Checkbox component renders */
input[type="checkbox"], input[type="radio"] { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
input[type="checkbox"] + label, input[type="radio"] + label {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 22px; padding-left: 26px; margin: 0;
  font-size: var(--font-size-base); font-weight: 400; color: var(--text-primary); cursor: pointer; line-height: 1.35;
}
input[type="checkbox"] + label::before, input[type="radio"] + label::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 4px; border: var(--border-width) solid var(--interactive-border); background: var(--interactive-bg);
  transition: background 0.15s ease, border-color 0.15s ease;
}
input[type="radio"] + label::before { border-radius: 50%; }
input[type="checkbox"]:checked + label::before, input[type="radio"]:checked + label::before { background: var(--control-fill); border-color: var(--control-fill); }
input[type="checkbox"]:checked + label::after {
  content: ''; position: absolute; left: 6px; top: 50%; width: 5px; height: 9px; margin-top: -6px;
  border: solid var(--control-fill-text); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
input[type="radio"]:checked + label::after { content: ''; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--control-fill-text); }
input[type="checkbox"]:focus-visible + label::before, input[type="radio"]:focus-visible + label::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--interactive-focus-ring) 25%, transparent); }
input[type="checkbox"]:disabled + label { opacity: 0.5; cursor: default; }
span.checkbox { display: inline-flex; align-items: center; position: relative; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14em, 1fr)); gap: 6px var(--space-md); }

/* Buttons */
button, .button, input[type="submit"], input[type="reset"], input[type="button"] {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px;
  background: var(--interactive-bg); color: var(--text-primary);
  border: var(--border-width) solid var(--interactive-border); border-radius: var(--radius);
  font-size: var(--font-size-sm); font-weight: 500; line-height: 1; letter-spacing: 0; text-transform: none; white-space: nowrap;
  cursor: pointer; text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
button:hover, .button:hover, input[type="submit"]:hover, input[type="button"]:hover { background: var(--interactive-bg-hover); color: var(--text-primary); text-decoration: none; }
button:active, .button:active, input[type="submit"]:active { background: var(--interactive-bg-active); }
button:focus-visible, .button:focus-visible, input[type="submit"]:focus-visible { outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--interactive-focus-ring) 30%, transparent); }
.button.small, button.small, input[type="submit"].small, input[type="button"].small { height: 28px; padding: 0 10px; font-size: var(--font-size-sm); }
.button.large, button.large, input[type="submit"].large { height: 38px; padding: 0 16px; font-size: var(--font-size-base); }
.button.primary, button.primary, input[type="submit"].primary { background: var(--control-fill); color: var(--control-fill-text); border-color: var(--control-fill); }
.button.primary:hover, button.primary:hover, input[type="submit"].primary:hover { background: color-mix(in srgb, var(--control-fill) 85%, var(--surface-bg)); color: var(--control-fill-text); }
.button.delete, button.delete { color: var(--btn-delete-text); border-color: var(--btn-delete-border); background: var(--surface-bg); }
.button.delete:hover, button.delete:hover { background: var(--btn-delete-bg); color: var(--btn-delete-text); }
.button.ghost, button.ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.button.ghost:hover, button.ghost:hover { background: var(--interactive-bg-hover); color: var(--text-primary); }
.button.fit, button.fit, input[type="submit"].fit { width: 100%; }
button:disabled, .button.disabled, input[type="submit"]:disabled, input[type="button"]:disabled { opacity: 0.45; cursor: default; pointer-events: none; }
/* Tab-like Nav buttons (components/nav.react.js). Selected = .primary */
button.nav { height: 28px; padding: 0 10px; border-radius: 999px; font-weight: 500; }
button.nav.primary { background: var(--control-fill); color: var(--control-fill-text); border-color: var(--control-fill); }
button.nav span.alert { color: var(--alert-text); margin-left: 4px; }
.tabs, .segmented { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-md); }
.icon-button { width: 32px; height: 32px; padding: 0; border-radius: var(--radius); }

/* Tables */
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--space-lg)); padding: 0 var(--space-lg); }
/* Wide tables scroll sideways inside the wrapper. Phones show no scrollbar, so
   a shadow along whichever edge still has content off-screen says there is
   more; the two cover gradients scroll with the content and hide the shadow
   at the ends. */
.table-wrapper { background:
    linear-gradient(to right, var(--surface-bg) 40%, transparent) 0 0 / 40px 100%,
    linear-gradient(to left, var(--surface-bg) 40%, transparent) 100% 0 / 40px 100%,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.18), transparent) 0 0 / 14px 100%,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.18), transparent) 100% 0 / 14px 100%;
  background-repeat: no-repeat; background-attachment: local, local, scroll, scroll; }
@media (max-width: 736px) { .table-wrapper { margin: 0 calc(-1 * var(--space-md)); padding: 0 var(--space-md); } }
table { width: 100%; border-collapse: collapse; border-spacing: 0; margin: 0; font-variant-numeric: tabular-nums; }
table th { text-align: left; font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); padding: 6px 10px 8px; border-bottom: var(--border-width) solid var(--border-color); white-space: nowrap; vertical-align: bottom; }
table th[onclick], table th.sortable { cursor: pointer; }
table th span.sort { display: inline-block; vertical-align: middle; margin-left: 4px; color: var(--text-primary); }
table th span.sort.unsorted { color: var(--text-muted); opacity: 0.6; }
table td { padding: 8px 10px; border-bottom: var(--border-width) solid var(--border-color-light); vertical-align: middle; }
table tbody tr:last-child td { border-bottom: 0; }
table tbody tr:hover td { background: var(--surface-bg-alt); }
table td.num, table th.num { text-align: right; }
table td.center { text-align: center; }
table td.edit, table th.action { text-align: right; white-space: nowrap; }
table td.edit .button, table td .button, table td button, table td input[type="submit"], table td input[type="button"] { height: 26px; padding: 0 8px; font-size: var(--font-size-xs); }
table td.edit > * + * { margin-left: 6px; }
table td.nochart { background: repeating-linear-gradient(-45deg, transparent 0 6px, var(--surface-bg-sunken) 6px 7px); }
table .subheader, table th.subheader { background: var(--surface-bg-alt); color: var(--text-secondary); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 10px; border-top: var(--border-width) solid var(--border-color); border-bottom: var(--border-width) solid var(--border-color); }
table.list input[type="text"], table.list select { height: 28px; }

}
table.records td, table.attempts td, table.topscores td, table.players td { white-space: nowrap; }
table.records td:first-child, table.attempts td.song, table.records th:first-child { white-space: normal; min-width: 19em; }
table.compact td { padding: 5px 10px; }
table.machines td:not(:nth-child(3)), table.arcade td:first-child, table.client td:first-child { white-space: nowrap; }

/* Stacked tables: below the phone breakpoint a table marked stack-sm drops its
   header row and lays every row out as a card, one labelled line per cell.
   Sorting goes with the header; these tables keep their default order there. */
@media (max-width: 736px) {
  .table-wrapper table.stack-sm, .table-wrapper table.stack-sm tbody { display: block; }
  .table-wrapper table.stack-sm thead { display: none; }
  .table-wrapper table.stack-sm tbody { display: flex; flex-direction: column; gap: var(--space-sm); }
  .table-wrapper table.stack-sm tbody tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 8px 12px; background: var(--surface-bg); border: var(--border-width) solid var(--border-color); border-radius: var(--radius); }
  .table-wrapper table.stack-sm tbody tr:hover td { background: transparent; }
  .table-wrapper table.stack-sm td { display: grid; grid-template-columns: minmax(5.5em, 7.5em) minmax(0, 1fr); gap: var(--space-sm); align-items: start; padding: 5px 0; border-bottom: var(--border-width) solid var(--border-color-light); text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .table-wrapper table.stack-sm tbody tr td:last-child { border-bottom: 0; }
  .table-wrapper table.stack-sm td::before { content: attr(data-label); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); padding-top: 3px; white-space: normal; line-height: 1.3; }
  .table-wrapper table.stack-sm td[data-label=""] { grid-template-columns: minmax(0, 1fr); justify-items: end; }
  .table-wrapper table.stack-sm td[data-label=""]::before { content: none; }
  .table-wrapper table.stack-sm td.num, .table-wrapper table.stack-sm td.edit { text-align: left; }
  .table-wrapper table.stack-sm td.edit > * + * { margin-left: 6px; }
  .table-wrapper table.stack-sm td .stack { gap: 6px; }

/* Messages (flash) */
div.messages { margin-bottom: var(--space-md); }
ul.messages { display: flex; flex-direction: column; gap: var(--space-sm); }
ul.messages:empty { display: none; }
ul.messages li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: 8px 12px; border-radius: var(--radius); font-size: var(--font-size-sm); border: var(--border-width) solid; }
ul.messages li.error { background: var(--status-error-bg); color: var(--status-error-text); border-color: var(--status-error-border); }
ul.messages li.warning { background: var(--status-warning-bg); color: var(--status-warning-text); border-color: var(--status-warning-border); }
ul.messages li.success { background: var(--status-success-bg); color: var(--status-success-text); border-color: var(--status-success-border); }
ul.messages li.info { background: var(--status-info-bg); color: var(--status-info-text); border-color: var(--status-info-border); }
ul.messages div.close { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px; cursor: pointer; color: currentColor; flex-shrink: 0; }
ul.messages div.close:hover { background: rgba(0, 0, 0, 0.08); }

/* Auth pages (login / register) */
.auth-card { max-width: 440px; margin: 8vh auto 0; }
.auth-card.wide { max-width: 720px; }
.auth-card h1 { margin-bottom: var(--space-lg); }
.auth-card section { padding: var(--space-lg); }
.auth-card .below { text-align: center; color: var(--text-secondary); font-size: var(--font-size-sm); margin-top: var(--space-md); }
.auth-card .field:last-child input[type="submit"] { height: 38px; font-size: var(--font-size-base); }
.auth-card #passkey-login { height: 38px; font-size: var(--font-size-base); }
/* "── or ──" between the password form and the passkey button */
.auth-divider { display: flex; align-items: center; gap: var(--space-md); margin: var(--space-md) 0; color: var(--text-muted); font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.06em; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; border-top: var(--border-width) solid var(--border-color); }