/* Main actions share geometry; colours still express their existing purpose. */
/* Keep native checkbox behavior while sharing the app's shape, colour and focus states. */
input[type=checkbox] {
  appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center;
  width: 18px; height: 18px; min-width: 18px; flex: 0 0 18px; padding: 0; margin: 0 6px 0 0;
  vertical-align: -4px; border: 1.5px solid color-mix(in srgb, var(--muted) 80%, var(--line));
  border-radius: 5px; background: var(--panel); color: #fff; cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
input[type=checkbox]::before {
  content: ""; width: 11px; height: 11px; background: currentColor; transform: scale(0);
  clip-path: polygon(12% 44%, 0 57%, 38% 92%, 100% 20%, 85% 7%, 36% 65%);
  transition: transform 100ms ease;
}
input[type=checkbox]:checked, input[type=checkbox]:indeterminate { background: var(--orange); border-color: var(--orange); }
input[type=checkbox]:checked::before, input[type=checkbox]:indeterminate::before { transform: scale(1); }
input[type=checkbox]:indeterminate::before { clip-path: inset(42% 5%); }
input[type=checkbox]:enabled:hover { border-color: var(--orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 10%, transparent); }
input[type=checkbox]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
input[type=checkbox]:disabled { opacity: .4; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { input[type=checkbox], input[type=checkbox]::before { transition: none; } }
@media (forced-colors: active) {
  input[type=checkbox] { appearance: auto; -webkit-appearance: auto; }
  input[type=checkbox]::before { display: none; }
}

.button-link, .head-link, .rw-button, .history-load-more, .nothing-left a.button, .player-head .claim > a, .player-head .claim button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--control-height); max-width: 100%; padding: var(--control-padding);
  border: 1px solid var(--line); border-radius: var(--control-radius);
  background: var(--panel); color: var(--ink); font: inherit; font-size: var(--control-font);
  font-weight: 600; line-height: var(--control-line); text-align: center; text-decoration: none;
  white-space: normal; overflow-wrap: anywhere; cursor: pointer;
}
@media (max-width: 360px) {
  table.players th, table.players td, table.brackets th, table.brackets td { padding-left: 5px; padding-right: 5px; }
  table.players th.n:not(:first-child), table.players td.n:not(:first-child) { padding-left: 2px; padding-right: 3px; }
  table.brackets td { font-size: 12px; }
}
.button-link:hover, .head-link:hover, .rw-button:hover, .history-load-more:hover { text-decoration: none; }
.head-link:hover, .player-head .claim > a:hover { border-color: var(--accent); color: var(--accent); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
:where(button, input[type=submit]):disabled { opacity: .45; cursor: not-allowed; }
.panel:not(.curves-controls) button:not(.bookmark, .viewed, .what, .link, .seg button, .picker-field), .panel input[type=submit] { min-height: var(--control-height); }
.curves-controls select { min-height: 0; }
.quiet-button { font-size: var(--control-font); line-height: var(--control-line); border-radius: var(--control-radius); }
.seg [hidden], .button-link[hidden], .head-link[hidden], .rw-button[hidden], .history-load-more[hidden] { display: none; }
/* Secondary controls use the same rhythm without enlarging actions inside game rows. */
.picker-field, .pager a, .pager b, .pager .off, .look-form input[type=submit], .rw-queue-search input[type=submit], .hall-badge-search button, .world-back {
  min-height: var(--control-height); border-radius: var(--control-radius); font-size: var(--control-font); line-height: var(--control-line);
}
.pager a, .pager b, .pager .off { display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-height); }
.picker-field { padding-block: 8px; }
.filters .picked button { min-height: var(--control-height); max-width: 100%; overflow-wrap: anywhere; }
.name-picker input[type=text], .clan-picker input[type=text], .auth input:not([type=checkbox]):not([type=submit]) { min-height: var(--control-height); }
.country-choice { min-height: var(--control-height); }
.country-choice select { min-height: calc(var(--control-height) - 2px); }
.panel .button-link, .panel button:not(.seg button, .bookmark, .viewed, .what, .link, .picker-field), .panel input[type=submit] { max-width: 100%; white-space: normal; }
.panel input[type=submit] { white-space: pre-wrap; }
.auth input[type=submit], button.discord { min-height: var(--control-height); border-radius: var(--control-radius); font-size: var(--control-font); line-height: var(--control-line); }
@media (max-width: 640px) {
  :root { --control-height: 44px; }
  .leaderboard-tabs { min-width: 0; flex-wrap: wrap; gap: 6px 0; }
  .leaderboard-tabs > .seg { flex-shrink: 1; }
  .page-head .aside { white-space: normal; }
  .picker [role=option], .menu-panel a, .menu-panel form button { min-height: 44px; }
  .picker [role=option] { overflow-wrap: anywhere; }
}