/* base.css — CSS variables, reset, shared body, header, and toast */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: dark;
  --bg:           #0f1410;
  --surface:      #181f1a;
  --surface2:     #1f2921;
  --border:       #2e3d30;
  --blue:         #1a5fa8;
  --blue-lt:      #4a90d9;
  --gold:         #c49a1a;
  --gold-lt:      #e8b82a;
  --text:         #e8ede9;
  --text-dim:     #7a8f7d;
  --text-mute:    #5f7862;
  --win-color:    #4a9a4a;
  --lose-color:   #c05050;
  --elim-bg:      #2a1f1f;
  --elim-text:    #8a5a5a;
  --line-color:   #4a7a8a;
  --clear-color:  #c05050;
  --clear-border: #8a3a3a;
  --live-color:   #e03030;

  /* Medal colors for bucket top-3 */
  --medal-gold-bg:     #3d2d00;
  --medal-gold-border: #7a5c10;
  --medal-gold-text:   #f2c83a;
  --medal-silver-bg:   #1e2630;
  --medal-silver-border:#40566a;
  --medal-silver-text: #a8c0d0;
  --medal-bronze-bg:   #2d1600;
  --medal-bronze-border:#5c3018;
  --medal-bronze-text: #c87840;

  /* Per-field tag colors (defaults; user-overridable in Settings > Fields) */
  --field-1: #0d9488; /* teal */
  --field-2: #ea580c; /* orange */
  --field-3: #7c3aed; /* purple */
  --field-4: #db2777; /* pink */
  --field-5: var(--blue-lt);

  /* Border radius scale */
  --radius-sm: 0.35em;
  --radius-xs: 0.2em;
  --radius-md: 0.6em;

  /* Type scale */
  --text-xs: 0.72rem;
  --text-sm: 0.78rem;
  --text-md: 0.9rem;
  --text-lg: 1rem;

  /* Button sizing tokens — change here to resize all buttons at once */
  --btn-font-size: var(--text-sm);
  --btn-pad-v:     0.55em;
  /* Horizontal padding tiers: standard for full buttons, compact for
     dense toolbars (mode switchers, inline clears). Anything else is a
     deliberate one-off and should say why. */
  --btn-pad-h:         1.1em;
  --btn-pad-h-compact: 0.6em;
  --btn-h:         1.8rem;

  /* Bracket slot sizing — set by JS via setProperty */
  --slot-h:    10vh;
  --card-h:    8vh;
  --row-h:     calc(var(--card-h) / 3);
  --col-w:     14vw;
  --col-gap:   2vw;
  --col-hdr-h: 1.6em;
}

body.light {
  color-scheme: light;
  --bg:        #f0f4f1;
  --surface:   #ffffff;
  --surface2:  #e8ede9;
  --border:    #c8d8ca;
  --blue:      #1a5fa8;
  --blue-lt:   #1a4a8a;
  --gold:      #a07800;
  --gold-lt:   #7a5800;
  --text:      #1a2a1c;
  --text-dim:  #4a6a50;
  --text-mute: #557a5b; /* ≥4.5:1 on white surface (WCAG AA) */
  --win-color: #2a6a18;
  --lose-color:#8a2a2a;
  --elim-bg:   #f5e8e8;
  --elim-text: #8a4a4a;
  --line-color:#5a8a9a;
  --clear-color:#8a2a2a;
  --clear-border:#c05050;
  --live-color: #c81e1e; /* ≥4.5:1 on white surface */

  /* Medal colors — light mode */
  --medal-gold-bg:     #fffacc;
  --medal-gold-border: #c8a000;
  --medal-gold-text:   #5a3c00;
  --medal-silver-bg:   #e4edf5;
  --medal-silver-border:#7090a8;
  --medal-silver-text: #283848;
  --medal-bronze-bg:   #f5e8d8;
  --medal-bronze-border:#a86030;
  --medal-bronze-text: #4a2010;

  /* Per-field tag colors — darker shades for AA contrast on light surfaces.
     --field-5 references --blue-lt, which is already overridden above. */
  --field-1: #0f766e; /* teal */
  --field-2: #c2410c; /* orange */
  --field-3: #6d28d9; /* purple */
  --field-4: #be185d; /* pink */
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Barlow', sans-serif;
  font-size: clamp(0.92rem, 0.08vw + 0.9rem, 1rem);
  min-height: 100vh;
  min-height: 100svh;
  transition: background 0.2s, color 0.2s;
}

/* ── Header name block ── */
.header-name-block { flex: 1; min-width: 0; }
.site-subtitle {
  display: block;
  visibility: hidden;
  font-size: 0.65em;
  color: var(--gold);
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.12em;
  margin-top: 0.1em;
}

/* ── Header ── */
.site-header {
  background: var(--surface);
  border-bottom: 0.15em solid var(--gold);
  padding: 0.8em 1em;
  padding-top: max(0.8em, calc(0.8em + env(safe-area-inset-top, 0px)));
  display: flex;
  align-items: center;
  gap: 0.8em;
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header h1 {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.05rem, 0.18vw + 1rem, 1.35rem);
  font-weight: 700;
  color: var(--gold-lt);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
}
.header-controls { margin-left: auto; display: flex; align-items: center; gap: 0.6em; }
.theme-toggle {
  background: none;
  border: 0.07em solid var(--border);
  border-radius: 2em;
  padding: 0.35em 0.9em;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--text-dim);
  min-height: 2.5em;
  touch-action: manipulation;
}
.theme-toggle:hover,
.theme-toggle:active { color: var(--text); }

/* Cross-app toggle button (admin ↔ public) — shared by all pages */
.admin-public-btn {
  font-family: 'Oswald', sans-serif;
  font-size: var(--btn-font-size);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: var(--btn-pad-v) 0.88em;
  border-radius: var(--radius-xs);
  border: 0.07em solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}
.admin-public-btn:hover,
.admin-public-btn:active { color: var(--text); border-color: var(--text-dim); }

/* Results timestamp — end-justified in header name div */
.header-timestamp {
  font-family: 'Barlow', sans-serif;
  font-size: 0.62rem;
  color: var(--text-mute);
  letter-spacing: 0.04em;
  margin-top: 0.3em;
  text-align: right;
}

/* ── Toast ── */
.toast { position: fixed; bottom: 1.5em; left: 50%; transform: translateX(-50%) translateY(1.2em); background: var(--surface2); border: 0.07em solid var(--blue); border-radius: 0.4em; padding: 0.6em 1.2em; font-size: 0.84rem; color: var(--blue-lt); opacity: 0; transition: all 0.25s; pointer-events: none; z-index: 999; white-space: nowrap; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { border-color: var(--clear-color); color: var(--clear-color); }

/* ── Focus-visible ring ── */
button:focus-visible,
[role="tab"]:focus-visible,
a:focus-visible,
select:focus-visible,
.view-tab:focus-visible,
.team-chip:focus-visible,
.lineup-tool-btn:focus-visible { outline: 0.13em solid var(--blue-lt); outline-offset: 0.15em; }

/* ── Primary buttons (shared baseline) ── */
.admin-save-btn,
.sched-save-btn,
.bucket-edit-save-btn,
.lineup-submit-btn {
  font-family: 'Oswald', sans-serif;
  font-size: var(--btn-font-size);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: var(--btn-pad-v) var(--btn-pad-h);
  border-radius: var(--radius-xs);
  background: var(--blue);
  color: #fff;
  border: 0.07em solid var(--blue);
  cursor: pointer;
}
.admin-save-btn:hover, .admin-save-btn:active,
.sched-save-btn:hover, .sched-save-btn:active,
.bucket-edit-save-btn:hover, .bucket-edit-save-btn:active,
.lineup-submit-btn:hover, .lineup-submit-btn:active { background: var(--blue-lt); border-color: var(--blue-lt); }
.admin-save-btn:disabled,
.sched-save-btn:disabled,
.bucket-edit-save-btn:disabled,
.lineup-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 1023px) {
  .toast { bottom: calc(6em + env(safe-area-inset-bottom, 0px)); }
}

/* ── Touch target sizing (coarse pointer = touchscreen) ── */
@media (pointer: coarse) {
  .theme-toggle    { min-height: 2.75rem; min-width: 2.75rem; }
  .admin-public-btn { min-height: 2.75rem; }
}

/* Per-tournament header logo (white-label). Set via img.src from the
   validated theme-colors logo data URI; hidden when none is configured. */
.site-logo { height: 2.4em; width: auto; max-width: 6em; object-fit: contain; border-radius: 0.25em; margin-right: 0.15em; align-self: center; }

/* ── tt-dialog: shared in-app confirm/prompt (tt-common.js ttDialog) ── */
.tt-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
}
.tt-dialog {
  background: var(--surface);
  border: 0.07em solid var(--border);
  border-radius: 0.5em;
  padding: 1.3em 1.3em 1.1em;
  width: min(92vw, 26em);
  display: flex;
  flex-direction: column;
  gap: 1em;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55);
}
.tt-dialog-msg {
  font-family: 'Barlow', sans-serif;
  font-size: var(--text-md);
  color: var(--text);
  line-height: 1.5;
  white-space: pre-line;   /* messages use \n for emphasis lines */
}
.tt-dialog-input {
  font-family: 'Barlow', sans-serif;
  font-size: max(1rem, 16px);
  padding: 0.45em 0.55em;
  border-radius: var(--radius-xs);
  border: 0.07em solid var(--border);
  background: var(--surface2);
  color: var(--text);
}
.tt-dialog-input:focus { outline: 0.13em solid var(--blue-lt); border-color: var(--blue-lt); }
.tt-dialog-actions {
  display: flex;
  gap: 0.6em;
  justify-content: flex-end;
}
.tt-dialog-btn {
  font-family: 'Oswald', sans-serif;
  font-size: var(--btn-font-size);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--btn-pad-v) var(--btn-pad-h);
  border-radius: var(--radius-xs);
  border: 0.07em solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.tt-dialog-btn:hover { color: var(--text); border-color: var(--text-dim); }
.tt-dialog-btn--primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.tt-dialog-btn--primary:hover { opacity: 0.88; color: #fff; }
.tt-dialog-btn--danger {
  background: var(--lose-color);
  border-color: var(--lose-color);
}
@media (pointer: coarse) { .tt-dialog-btn { min-height: 44px; } }

/* ── Print: force a white-paper palette ──────────────────────────────────
   Everything derives from the tokens, so overriding them (at body AND
   body.light specificity, after the theme blocks, so print wins in either
   theme) restyles the whole app for paper. */
@media print {
  body, body.light {
    color-scheme: light;
    --bg:        #ffffff;
    --surface:   #ffffff;
    --surface2:  #f2f2f2;
    --border:    #999999;
    --blue:      #1a4a8a;
    --blue-lt:   #1a4a8a;
    --gold:      #7a5800;
    --gold-lt:   #7a5800;
    --text:      #000000;
    --text-dim:  #333333;
    --text-mute: #555555;
    --win-color: #2a6a18;
    --lose-color:#8a2a2a;
    --line-color:#666666;
    --live-color:#c81e1e;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  * { box-shadow: none !important; text-shadow: none !important; }
}

/* The hidden attribute must always win: JS toggles visibility exclusively
   via el.hidden (CSP forbids inline style attributes), and several hidden
   elements carry classes whose display rules would otherwise override the
   UA default. */
[hidden] { display: none !important; }
.u-mx-auto { margin: 0 auto; }
/* CSP refactor: spacing/visibility utilities replacing one-off inline styles */
.u-invisible { visibility: hidden; }
.u-dim-70 { opacity: 0.7; }
.u-push-right-b { margin-left: auto; }
.u-flexrow-gap { display: flex; gap: 0.6em; margin-top: 0.5em; }
.u-mt-05 { margin-top: 0.5em; }
.u-mt-06 { margin-top: 0.6em; }
.u-mt-075 { margin-top: 0.75em; }
.u-mt-09 { margin-top: 0.9em; }
.u-mt-1 { margin-top: 1em; }
.u-mt-15 { margin-top: 1.5em; }
.u-mb-06 { margin-bottom: 0.6em; }
.u-mb-1 { margin-bottom: 1em; }
.u-maxw-10 { max-width: 10em; }