/* ==========================================================================
   BrewNight · base — element defaults shared by every page (dashboard,
   Play setup, the board). Tokens only; load after tokens.css and fonts.css.
   Convention: every <button> is a "house button" unless it carries .bare.
   Control states, in the order a person meets them: rest · hover · pressed · focus-visible · busy · disabled · invalid.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font-ui); font-size: var(--fs-14); -webkit-text-size-adjust: 100%; }
.brand-symbol { display: block; flex: none; width: var(--sp-7); height: var(--sp-7); object-fit: contain; border-radius: var(--r-3); }
body { margin: 0; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
::selection { background: var(--gold-a30); color: var(--text); }

/* Type: Archivo Black for the wordmark and short headings, DM Sans for everything that is read */
h1, h2, h3, p { margin: 0; }
h1, h2, .serif { font-family: var(--font-display); font-weight: var(--fw-heavy); letter-spacing: var(--ls-display); }
h1 { font-size: var(--fs-48); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-28); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-14); }
a { color: var(--gold); text-underline-offset: 3px; }
.muted { color: var(--muted); }
code, kbd, pre, .mono { font-family: var(--font-mono); }

/* Focus: one ring everywhere. Its colour is fixed (--focus-color), so it never reads as a selection or a status. */
:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
html[data-focus-modality="pointer"] :focus-visible:not(input, textarea, select, [contenteditable]:not([contenteditable="false"])) { outline: none; }

/* Buttons — the house button; .btn gives the same look to <a> and <div role=button> */
button, .btn {
  font: inherit; cursor: pointer; text-decoration: none; color: var(--text);
  border: 1px solid var(--edge); background: var(--panel); border-radius: var(--r-2); padding: 8px 14px;
  transition: background var(--t-2), border-color var(--t-2), color var(--t-2), opacity var(--t-2);
}
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); }
button:hover, .btn:hover { background: var(--panel3); border-color: var(--line3); }
button:active, .btn:active { background: var(--panel3); border-color: var(--line3); box-shadow: inset 0 1px 2px var(--black-a45); }
button.primary, .btn.primary { background: var(--action-bg); border-color: var(--edge); color: var(--ink); font-weight: var(--fw-bold); box-shadow: var(--sh-1); }
button.primary:hover, .btn.primary:hover { background: var(--action-hover); border-color: var(--line3); }
button.primary:active, .btn.primary:active { background: var(--action-hover); box-shadow: inset 0 1px 2px var(--black-a60); }
button.ghost, .btn.ghost { background: transparent; border-color: transparent; }
button.ghost:hover, .btn.ghost:hover { background: var(--panel2); border-color: var(--line2); }
button.small, .btn.small { padding: 5px 10px; font-size: var(--fs-12); }
button.danger, .btn.danger { color: var(--danger); }
button.danger:hover, .btn.danger:hover { border-color: var(--danger-a30); background: var(--danger-a08); }
button.pill, .btn.pill { border-radius: var(--r-pill); }
button.icon, .btn.icon { padding: 0; width: var(--control-h); height: var(--control-h); display: inline-grid; place-items: center; }
button.block, .btn.block { width: 100%; }
/* Pending work: the control stays where it is and says so; the script that sets aria-busy also guards the double submit. */
button[aria-busy=true], .btn[aria-busy=true] { cursor: progress; opacity: .7; }
button:disabled, .btn[aria-disabled=true] { opacity: .55; cursor: not-allowed; box-shadow: none; }
button:disabled:hover, .btn[aria-disabled=true]:hover { background: var(--panel); border-color: var(--line2); }
button.primary:disabled:hover, .btn.primary[aria-disabled=true]:hover { background: var(--action-bg); border-color: var(--edge); }
/* .bare: a <button> used as a plain clickable surface (cards, tiles, orbs) — no house chrome */
button.bare { background: none; border: 0; border-radius: 0; padding: 0; color: inherit; font: inherit; text-align: inherit; transition: none; box-shadow: none; }
button.bare:hover, button.bare:active { background: none; border-color: transparent; box-shadow: none; }

/* Fields */
input, select, textarea {
  font: inherit; width: 100%; color: var(--text); background: var(--panel);
  border: 1px solid var(--edge); border-radius: var(--r-2); padding: 9px 12px;
  transition: border-color var(--t-2), background var(--t-2);
}
input:not([type=checkbox], [type=radio], [type=range], [type=file]), select { min-height: var(--control-h); }
select:not([multiple]):not([size]) {
  appearance: none; padding-inline-end: 36px;
  background-image: linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position: right 16px center,right 11px center;
  background-size: 5px 5px; background-repeat: no-repeat;
}
@media (forced-colors: active) { select:not([multiple]):not([size]) { appearance: auto; background-image: none; } }
input:hover, select:hover, textarea:hover { border-color: var(--line3); }
input:disabled, select:disabled, textarea:disabled { background: var(--panel2); color: var(--dim); border-color: var(--line2); cursor: not-allowed; }
input[aria-invalid=true], select[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--danger); }
textarea { resize: vertical; line-height: var(--lh-body); }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--gold); }
input::placeholder, textarea::placeholder { color: var(--dim); }
label { display: block; color: var(--muted); font-size: var(--fs-12); font-weight: var(--fw-medium); }
label input, label select, label textarea { margin-top: 7px; }
/* A field under 16px makes iOS zoom the page when it takes focus. */
@media (pointer: coarse) { input, select, textarea { font-size: var(--fs-16); } }

/* Tables */
table { border-collapse: collapse; width: 100%; text-align: left; white-space: nowrap; }
th { color: var(--muted); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: var(--ls-caps-sm); font-weight: var(--fw-medium); background: var(--panel); padding: 14px 18px; }
td { font-size: var(--fs-13); padding: 13px 18px; border-top: 1px solid var(--line); }

/* Thin, quiet scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }

/* Touch: a control a finger must hit is 44px, outside the game board (play/css sizes its own and reads --tap).
   :where() keeps this at zero specificity, so a component that sets its own min-height still wins. */
@media (pointer: coarse), (max-width: 560px) {
  :where(body:not(.in-game)) :is(button:not(.bare), .btn) { min-height: var(--tap); }
}

em { font-style: normal; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}