* { box-sizing: border-box; }

/* Structure and the base colours that Boos & Booze (themes.css) builds on. The neutral look
   below is every poll without a named theme, scoped away from that theme so the two never mix. */
body { margin: 0; font: 18px/1.4 system-ui, sans-serif; background: #fafafa; color: #222; }
main { max-width: 32rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
label { display: block; margin-top: 1.25rem; font-weight: 600; }
label > span { display: block; }
.alt { display: block; font-size: 0.8em; font-weight: 400; color: #666; }
/* 16px+ stops iOS Safari zooming the page when a box is focused. */
input { display: block; width: 100%; margin-top: 0.35rem; padding: 0.7rem; font: inherit; border: 1px solid #888; border-radius: 8px; }
button { width: 100%; margin-top: 1.5rem; padding: 0.9rem; font: inherit; font-weight: 600; border: 0; border-radius: 8px; background: #222; color: #fff; }
button:disabled { opacity: 0.6; }
#status { min-height: 1.4em; font-weight: 600; }
#message { color: #b00020; }
.note { margin-top: 2rem; font-size: 0.85rem; color: #555; }
.lang { display: flex; gap: 0.5rem; justify-content: flex-end; }
.lang button { width: auto; min-width: 2.75rem; min-height: 2.75rem; margin: 0; padding: 0.25rem 0.5rem; font-size: 1.5rem; line-height: 1; background: transparent; color: #222; border: 1px solid #888; }
.lang button[aria-pressed="true"] { background: #222; color: #fff; border-color: #222; }

/* Neutral look, light and dark. Colours are variables so the dark set swaps in one place;
   color-scheme makes the browser draw its own parts (keyboard, scrollbar, autofill) to match. */
html:not([data-theme="boos-booze"]) {
  color-scheme: light dark;
  --bg: #f6f6f7;
  --ink: #1b1b1f;
  --muted: #55555c;
  --line: #767680;
  --field: #fff;
  --action: #1b1b1f;
  --action-ink: #fff;
  --error: #b00020;
  --focus: #1a56db;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="boos-booze"]) {
    --bg: #121316;
    --ink: #ececf0;
    --muted: #aaaab4;
    --line: #8a8a96;
    --field: #1c1d22;
    --action: #ececf0;
    --action-ink: #121316;
    --error: #ff9aa8;
    --focus: #8ab4ff;
  }
}
html:not([data-theme="boos-booze"]) body { background: var(--bg); color: var(--ink); }
html:not([data-theme="boos-booze"]) h1 { margin: 0.75rem 0 0.25rem; font-size: 1.75rem; line-height: 1.2; }
html:not([data-theme="boos-booze"]) .alt,
html:not([data-theme="boos-booze"]) .note { color: var(--muted); }
html:not([data-theme="boos-booze"]) input { min-height: 3rem; background: var(--field); color: var(--ink); border-color: var(--line); }
html:not([data-theme="boos-booze"]) button { min-height: 3rem; background: var(--action); color: var(--action-ink); }
html:not([data-theme="boos-booze"]) :is(input, button):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
html:not([data-theme="boos-booze"]) #message { color: var(--error); }
html:not([data-theme="boos-booze"]) .lang button { min-width: 3rem; min-height: 3rem; background: transparent; color: var(--ink); border-color: var(--line); }
/* The inner ring keeps the pressed flag visible even though both states use ink-coloured edges. */
html:not([data-theme="boos-booze"]) .lang button[aria-pressed="true"] { background: var(--field); border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }

/* Prize text sits under the award name, lighter than it, in both themes (each defines --muted).
   The attribute rules are needed because label > span above sets display. */
.prize { font-size: 0.85em; font-weight: 400; color: var(--muted, #555); }
.prize[hidden], .about[hidden] { display: none; }
/* Collapsed by default so a long note never pushes the boxes off a small phone. */
.about { margin-top: 0.75rem; color: var(--ink, #222); }
/* Padding rather than display:flex keeps the browser's open/closed marker. */
.about summary { padding: 0.75rem 0; font-weight: 600; cursor: pointer; }
.about p { margin: 0.25rem 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.closed-note { margin-top: 1.5rem; font-size: 1.15rem; font-weight: 600; }