/**
 * assets/css/site.css — North of the Cut shared design system
 *
 * Added 2026-09-04 as part of the sitewide CSS consolidation ("Each page
 * has it's own css styles. I would like to consolidate the css styles to
 * one or two separate css style files."). Before this, all 17 real pages
 * embedded their own <style> block, most of which was byte-for-byte (or
 * near byte-for-byte) duplicated across many pages: the design-token
 * system, the CSS reset, the header/nav/footer chrome, the button system,
 * the form/auth-card system, badges, modals, etc.
 *
 * This file holds everything that is SHARED across two or more pages —
 * the theme tokens plus the common "default" version of every shared
 * component rule. Page-specific CSS (both genuinely page-unique
 * components, and small per-page deltas on a shared component above)
 * lives in the sibling file assets/css/pages.css instead — see that
 * file's own header comment for how the two work together.
 *
 * HOW THIS WAS BUILT (so a future edit doesn't accidentally reintroduce
 * per-page drift): every page's original <style> block was extracted and
 * parsed into individual top-level rules. For any selector that appeared
 * on 2+ pages, every page's declarations for that selector were compared
 * property-by-property, WITH one important rule: a page that never
 * declared a given selector AT ALL still counts as a real data point —
 * "this page had none of these properties" — not as "this page has no
 * opinion, give it the shared default". That distinction matters most
 * for plain-tag selectors (body, header, footer, main, h1, p, form,
 * label, select, ...) and for the handful of classes rendered by the
 * shared includes on every page (.wordmark, .wordmark .dot) — those
 * elements exist on literally every page's markup, so silently applying
 * a "majority" rule to a page that opted out of it entirely would be a
 * real behavior change, not a no-op. Whichever value was most common
 * (including "not declared" as one of the possible values) became this
 * file's canonical rule; every page that differed from that outcome got
 * an explicit, scoped override in pages.css instead — see that file's
 * per-page section comments, and `revert` there specifically means "this
 * page has none of this property, full stop". This was done mechanically
 * and then self-verified (base rule + that page's overrides reconstructed
 * back to exactly that page's original per-page CSS, property for
 * property) — so this refactor changes nothing about how any existing
 * page looks; it only stops duplicating the declarations.
 *
 * Cache-busting: bump the ?v= query string on this file's <link> tag
 * (and pages.css's) whenever either file's content changes, same
 * convention as assets/css/nav.css / assets/js/nav.js. Note that
 * assets/css/nav.css itself is untouched by this refactor and still
 * supplies its own base styling for the sitewide menu/wordmark
 * (includes/nav.php) — this file's .wordmark/.wordmark .dot rules are
 * page-level refinements layered on top of nav.css's defaults, exactly
 * as each page's own old <style> block used to layer on top of nav.css.
 */

/* ==========================================================================
   Design tokens (dark is the default; light overrides via prefers-color-
   scheme and/or the explicit [data-theme] attribute nav.js sets from
   localStorage — see includes/nav.php's docblock for the theme switcher).
   A couple of pages define one or two extra tokens (profile.php's
   --bg-card/--shadow-card, used by its .profile-card component) — those
   are harmless to declare globally even on pages that never reference
   them, so they're folded into this single canonical block rather than
   scattered as page-specific overrides.
   ========================================================================== */

:root{
  color-scheme: dark;
  --bg: #0E0F14;
  --bg-elevated: #181A22;
  --bg-panel: #14151C;
  --bg-card: #3c3d42;
  --text: #F2F1EC;
  --text-muted: #9A9CAB;
  --text-faint: #6D707F;
  --border: #FFFFFF;
  --border-soft: rgba(255,255,255,0.18);
  --accent: #F2A93B;
  --accent-strong: #FFC15E;
  --accent-ink: #16130A;
  --accent-2: #E2483D;
  --ok: #6FCF97;
  --shadow: 0 20px 50px -25px rgba(0,0,0,0.6);
  --shadow-card: 0 24px 60px -22px rgba(0,0,0,0.75);

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', monospace;
}

@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme: light;
    --bg: #EEF0F2;
    --bg-elevated: #FFFFFF;
    --bg-panel: #14151C;
    --bg-card: #FFFFFF;
    --text: #16171D;
    --text-muted: #565A68;
    --text-faint: #797D8C;
    --border: #D8DBE0;
    --border-soft: #E3E5E9;
    --accent: #B8721A;
    --accent-strong: #9C5F14;
    --accent-ink: #FFFFFF;
    --accent-2: #C22E24;
    --ok: #1E8A50;
    --shadow: 0 20px 50px -25px rgba(20,21,28,0.18);
    --shadow-card: 0 24px 60px -20px rgba(20,21,28,0.30);
  }
}

:root[data-theme="light"]{
  color-scheme: light;
  --bg: #EEF0F2;
  --bg-elevated: #FFFFFF;
  --bg-panel: #14151C;
  --bg-card: #FFFFFF;
  --text: #16171D;
  --text-muted: #565A68;
  --text-faint: #797D8C;
  --border: #D8DBE0;
  --border-soft: #E3E5E9;
  --accent: #B8721A;
  --accent-strong: #9C5F14;
  --accent-ink: #FFFFFF;
  --accent-2: #C22E24;
  --ok: #1E8A50;
  --shadow: 0 20px 50px -25px rgba(20,21,28,0.18);
  --shadow-card: 0 24px 60px -20px rgba(20,21,28,0.30);
}

/* index.php (home) is the one page where --bg-panel needs its own light-
   theme value (#FFFFFF, matching its elevated cards) rather than the
   #14151C every other page uses — see pages.css's home section. */

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
/* index.php (home) extends this with extra reduced-motion properties for
   its scroll-reveal effect — see pages.css's home section. */

/* ==========================================================================
   Reset / base
   ========================================================================== */

*,*::before,*::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{ margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 15.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; }

h1,p{ margin: 0; text-wrap: balance; }

a{ color: inherit; }

::selection{ background: var(--accent); color: var(--accent-ink); }

:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.container{ width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }

/* ==========================================================================
   Header / nav / footer chrome (shared markup from includes/nav.php,
   includes/header-cta.php, includes/subheader.php)
   ========================================================================== */

header{ border-bottom: 1px solid var(--border-soft); }

.nav{ display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px clamp(20px, 5vw, 56px); }

.wordmark{ font-size: 18px; }

.wordmark .dot{ font-size: 22px; }

.nav-aside{ font-size: 13.5px; color: var(--text-muted); }

.nav-aside a{ font-weight: 700; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); }

.nav-aside a:hover{ border-color: var(--accent); color: var(--accent); }

main{ flex: 1; padding: clamp(28px, 5vw, 48px) 20px; display: flex; justify-content: center; }

footer{ border-top: 1px solid var(--border-soft); padding: 20px 0; }

.footer-inner{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.footer-meta{ font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); letter-spacing: 0.02em; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 700; font-size: 14.5px; padding: 12px 20px; border-radius: 4px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background .15s ease, transform .15s ease; }

.btn:active{ transform: translateY(1px); }

.btn-solid{ background: var(--accent); color: var(--accent-ink); }

.btn-solid:hover{ background: var(--accent-strong); }

.btn-outline{ background: transparent; color: var(--text-muted); border-color: var(--border); }

.btn-outline:hover{ border-color: var(--accent); color: var(--accent); }

.btn-ghost{ background: transparent; color: var(--text); border-color: var(--border); }

.btn-ghost:hover{ border-color: var(--text-muted); }

.btn-small{ padding: 7px 14px; font-size: 12.5px; }

.btn-danger-outline{ background: transparent; color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 45%, transparent); }

.btn-danger-outline:hover{ background: color-mix(in srgb, var(--accent-2) 10%, transparent); }

/* ==========================================================================
   Eyebrow / letter formatting (about.php, support.php, and the shared
   .eyebrow label used a few other places)
   ========================================================================== */

.eyebrow{ display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }

.eyebrow::before{ content: ""; width: 18px; height: 1px; background: var(--accent); }

.section-head{ max-width: 640px; margin-bottom: clamp(36px, 5vw, 56px); }

.letter-eyebrow{ display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; justify-content: center; }

.letter-eyebrow::before, .letter-eyebrow::after{ content: ""; width: 18px; height: 1px; background: var(--accent); }

.letter-body{ max-width: 640px; margin: 0 auto; font-size: 16px; line-height: 1.85; color: var(--text); }

.letter-body p{ margin-top: 28px; }

.letter-body p:first-of-type{ margin-top: 0; }

.letter-signoff{ max-width: 640px; margin: clamp(40px, 6vw, 56px) auto 0; padding-top: clamp(28px, 4vw, 36px); border-top: 1px solid var(--border-soft); }

.letter-signoff .closing-line{ font-size: 16px; line-height: 1.85; color: var(--text); }

.letter-signature{ margin-top: 22px; }

.letter-signature .names{ font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--text); letter-spacing: -0.005em; }

.letter-signature .title{ margin-top: 4px; font-size: 13.5px; color: var(--text-muted); }

.letter-cta{ max-width: 640px; margin: clamp(36px, 5vw, 48px) auto 0; display: flex; gap: 12px; flex-wrap: wrap; }

/* ==========================================================================
   Forms / auth cards
   ========================================================================== */

.auth-card{ width: 100%; max-width: 440px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: clamp(24px, 4vw, 32px) clamp(22px, 4vw, 30px) 28px; box-shadow: var(--shadow); }

.auth-card p{ margin-top: 10px; font-size: 14px; color: var(--text-muted); }

.form-card{ width: 100%; max-width: 720px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: clamp(26px, 4vw, 34px) clamp(24px, 4vw, 34px) 30px; box-shadow: var(--shadow); }

.narrow-card{ width: 100%; max-width: 440px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: clamp(24px, 4vw, 32px) clamp(22px, 4vw, 30px) 28px; box-shadow: var(--shadow); margin-top: clamp(20px, 6vh, 64px); }

.detail-card{ width: 100%; max-width: 780px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; padding: clamp(28px, 4vw, 36px) clamp(26px, 4vw, 38px) 32px; box-shadow: var(--shadow); }

.detail-top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

.detail-title h1{ font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 3.4vw, 30px); letter-spacing: -0.01em; }

.detail-section{ margin-top: 28px; }

.auth-head{ margin-bottom: 22px; }

.auth-eyebrow{ display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }

.auth-eyebrow::before{ content: ""; width: 18px; height: 1px; background: var(--accent); }

.auth-head h1{ font-family: var(--font-display); font-weight: 600; font-size: 27px; letter-spacing: -0.005em; }

.auth-head p{ margin-top: 8px; font-size: 14px; color: var(--text-muted); }

.form-section{ display: flex; flex-direction: column; gap: 14px; }

.section-title{ font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.01em; padding-bottom: 10px; margin: 0; border-bottom: 1px solid var(--border-soft); }

.row{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.field{ display: flex; flex-direction: column; gap: 6px; }

.field-hint{ font-size: 11px; color: var(--text-faint); }

.field-error{ font-size: 11.5px; color: var(--accent-2); font-family: var(--font-mono); }

.input{ width: 100%; font-family: var(--font-body); font-size: 14.5px; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; transition: border-color .15s ease, box-shadow .15s ease; }

.input::placeholder{ color: var(--text-faint); }

.input:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); outline: none; }

.input.error{ border-color: var(--accent-2); }

.pw-wrap{ position: relative; }

.pw-wrap .input{ padding-right: 42px; }

.pw-toggle{ position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: none; border: none; border-radius: 4px; color: var(--text-faint); cursor: pointer; padding: 0; }

.pw-toggle:hover{ color: var(--text); }

.pw-toggle svg{ display: block; }

.money-wrap{ position: relative; }

.money-sign{ position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 14.5px; pointer-events: none; }

.money-input{ padding-left: 24px; }

.checkbox-row{ display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-muted); cursor: pointer; }

.checkbox-row input{ width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }

.fine-print{ margin-top: 14px; font-size: 12px; color: var(--text-faint); text-align: center; }

.fine-print a{ font-weight: 700; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); }

.fine-print a:hover{ border-color: var(--accent); color: var(--accent); }

.form-banner{ font-family: var(--font-mono); font-size: 12px; border-radius: 4px; padding: 10px 12px; display: flex; align-items: flex-start; gap: 8px; }

.form-banner.error{ color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent-2) 35%, transparent); }

.form-banner.success{ color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); }

.form-banner.warn{ color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }

.form-banner svg{ flex-shrink: 0; margin-top: 1px; }

.back-link{ display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-faint); text-decoration: none; margin-bottom: 18px; }

.back-link:hover{ color: var(--accent); }

.profile-col-left{ padding-right: 40px; border-right: 1px solid var(--border-soft); }

.meta-row{ display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--text-muted); }

.meta-row svg{ flex-shrink: 0; margin-top: 2px; width: 17px; height: 17px; color: var(--text-faint); }

/* ==========================================================================
   Badges
   ========================================================================== */

.badge{ display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 11px; border-radius: 4px; border: 1px solid var(--border); color: var(--text-muted); }

.empty-note{ font-size: 13.5px; color: var(--text-muted); }

.badge-draft{ color: var(--text-muted); border-color: var(--border); }

.badge-active{ color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); }

.badge-complete{ color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 45%, transparent); background: color-mix(in srgb, var(--accent-2) 10%, transparent); }

.badge-open{ color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); }

/* ==========================================================================
   Modals (registrations.php / tournament_details.php team-management
   modals) and status icons (team-invite.php / verify.php)
   ========================================================================== */

.modal-overlay{ position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: 20px; }

.modal-overlay[hidden]{ display: none; }

.modal-panel{ width: 100%; max-width: 460px; max-height: calc(100vh - 40px); overflow-y: auto; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 24px; }

.modal-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.modal-head h3{ font-family: var(--font-display); font-weight: 600; font-size: 19px; margin: 0; }

.modal-close{ background: transparent; border: none; cursor: pointer; color: var(--text-faint); font-size: 20px; line-height: 1; padding: 2px 4px; flex-shrink: 0; }

.modal-close:hover{ color: var(--text); }

.modal-sub{ margin-top: 6px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }

.modal-footer-actions{ margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-soft); }

.transfer-options{ display: flex; flex-direction: column; gap: 10px; }

.transfer-option{ display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--text); cursor: pointer; padding: 9px 10px; border-radius: 5px; border: 1px solid var(--border-soft); background: var(--bg); }

.transfer-option input[type="radio"]{ margin-top: 3px; flex-shrink: 0; }

.status-icon{ width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

.status-icon.success{ background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }

.status-icon.error{ background: color-mix(in srgb, var(--accent-2) 16%, transparent); color: var(--accent-2); }

.status-icon.neutral{ background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }