/* Seduh Score — theme.css v4.1 — audited June 2026 */
/* ═══════════════════════════════════════════════════════════════
   SEDUH SCORE — theme.css  (consolidated handoff build)
   Coffee competition platform · Grey Matter Coffee Werks, Brunei
   Single-file build of the design system. In the design-system project
   this is split into tokens/*.css + patterns/*.css imported by styles.css;
   this file is the flattened equivalent for diffing against production.
═══════════════════════════════════════════════════════════════ */


/* ╔══════════ tokens/fonts.css ══════════╗ */
/* ───────────────────────────────────────────────────────────────
   Seduh Score — Webfonts
   Three Google Fonts, kept from the live platform:
     · Bricolage Grotesque — display / headings (variable optical size)
     · Hanken Grotesk      — body / UI text
     · Space Mono          — labels, eyebrows, numeric data
   The platform loads these from the Google Fonts CDN. Self-host the
   .woff2 files for production if offline use is required.
─────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');


/* ╔══════════ tokens — colours · typography · spacing ══════════╗ */
/* ───────────────────────────────────────────────────────────────
   Seduh Score — Design tokens (single consolidated :root)
   Colours: warm coffee neutrals + Seduh Amber + competition semantics.
   Token NAMES are a contract — BBTC / Throwdown / shared JS read
   --txt*, --am*, --bl*, --gn*, --rd*, --pu*. Never rename them.
   Typography: Bricolage Grotesque (display) · Hanken Grotesk (body) · Space Mono (mono)
   Spacing: 4px base scale · brown-tinted shadows · warm soft-edged radius
─────────────────────────────────────────────────────────────── */
:root{
  /* ── Warm coffee neutrals (ink scale on warm paper) ── */
  --ink:#211a14;   /* primary text — warm near-black espresso */
  --ink2:#4d443c;  /* secondary text */
  --ink3:#8a7f73;  /* tertiary / muted */
  --ink4:#b4a99c;  /* faint / placeholder */

  /* Module-facing text token names (v2.0 contract — modules read these) */
  --txt:#211a14;
  --txt2:#4d443c;
  --txt3:#8a7f73;

  /* ── Surfaces ── */
  --bg:#f3efe8;        /* app background — warm paper */
  --surface:#ffffff;   /* cards, sheets */
  --surface2:#faf7f1;  /* subtle raised / input fill */
  --surface3:#f6f2ea;  /* hover wells */

  /* ── Borders (warm hairlines) ── */
  --border:#e5ddd0;
  --border2:#efe9de;
  --border3:#d9cfbe;

  /* ── Seduh Amber — the house brand constant ── */
  --am:#b45309;     /* house accent */
  --am-h:#92400e;   /* hover / pressed */
  --am-bg:#fbf0df;  /* tinted fill */
  --am-bd:#e09a36;  /* tinted border */
  --am-soft:#f6e8d2;/* selection / soft wash */

  /* ── Functional competition semantics ── */
  --bl:#1d4ed8; --bl-bg:#eaf1fe; --bl-bd:#a9c6f7;  /* Rounds / scheduled */
  --gn:#0b7a52; --gn-bg:#e6f6ee; --gn-bd:#8fd9b8;  /* Completion / winners / live */
  --rd:#a52121; --rd-bg:#fbeaea; --rd-bd:#eda3a3;  /* Destructive / ties */
  --pu:#6d28d9; --pu-bg:#f1ecfe; --pu-bd:#c3b0f5;  /* Redemption / revival */

  /* ── User-customisable accent (defaults to house amber) ──
     The "Make it your own" layer overrides these at runtime. */
  --accent:#b45309; --accent-h:#92400e; --accent-bg:#fbf0df; --accent-bd:#e09a36; --accent-ink:#ffffff;

  /* ── Grey Matter Coffee Werks — parent brand ── */
  --gmcw-teal:#3197a7;  /* coffee-bean teal segment */
  --gmcw-ink:#333333;   /* wordmark black */
  --gmcw-grey:#4d4d4d;  /* bean greyscale */

  /* ── Rank medals (leaderboard) ── */
  --rank-1:#d97706; --rank-2:#9ca3af; --rank-3:#92400e;

  /* ── Semantic text aliases ── */
  --text-strong:var(--ink);
  --text-body:var(--ink2);
  --text-muted:var(--ink3);
  --text-faint:var(--ink4);
  --text-accent:var(--accent);

  /* ── Families ── */
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --font-mono:'Space Mono',ui-monospace,monospace;

  /* ── Weights ── */
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-extrabold:800;

  /* ── Display scale (Bricolage) — clamp() fluid for hero use ── */
  --fs-hero:clamp(38px,7.5vw,76px);
  --fs-display:clamp(28px,4vw,44px);
  --fs-h2:clamp(17px,2.4vw,22px);
  --fs-stat:24px;

  /* ── Body scale (Hanken) ── */
  --fs-lead:clamp(15px,2vw,19px);
  --fs-body:14px;
  --fs-sm:13px;
  --fs-xs:12px;

  /* ── Mono scale (Space Mono) — labels & eyebrows ── */
  --fs-eyebrow:11px;
  --fs-label:10px;
  --fs-micro:9.5px;

  /* ── Tracking ── */
  --ls-tight:-.03em;
  --ls-snug:-.01em;
  --ls-eyebrow:.18em;
  --ls-label:.12em;
  --ls-tag:.2em;

  /* ── Line heights ── */
  --lh-tight:.98;
  --lh-snug:1.1;
  --lh-body:1.5;

  /* ── Radius ── */
  --rad-s:9px;     /* inputs, buttons, wells */
  --rad:14px;      /* cards, sheets, modules */
  --rad-pill:99px; /* chips, badges, pills */

  /* ── Brown-tinted elevation ── */
  --shadow-sm:0 1px 2px rgba(60,40,20,.05),0 1px 3px rgba(60,40,20,.06);
  --shadow-md:0 4px 14px rgba(70,45,20,.08),0 2px 4px rgba(70,45,20,.05);
  --shadow-lg:0 18px 50px rgba(60,40,20,.16),0 6px 16px rgba(60,40,20,.08);

  /* ── Spacing scale (4px base) ── */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:22px;
  --space-6:30px;
  --space-8:44px;
  --space-10:60px;

  /* ── Borders ── */
  --bw-hair:1px;     /* card hairline */
  --bw:1.5px;        /* inputs, buttons, chips */
  --bw-rail:4px;     /* status left-rail on rows */

  /* ── Layout ── */
  --container:1080px;       /* dashboard / page max width */
  --container-narrow:900px; /* module app width */
  --focus-ring:0 0 0 3px var(--accent-bg);

  /* —— v4.5 deep surface (org zone + future audience view) —— */
  --surface-deep: #1c1510;   /* warm near-black — café at night */
  --deep-card:    #26201a;   /* card on deep surface */
  --deep-bd:      #3a2c20;   /* border on deep surface */
  --deep-bd2:     #4a3a2c;   /* border secondary */
  --deep-ink:     #faf7f1;   /* primary text on deep */
  --deep-ink2:    #c8b6a4;   /* secondary text on deep */
  --deep-sub:     #b9aa9a;   /* subdued text on deep */
  --deep-ink3:    #9a8b7c;   /* tertiary text on deep */
  --deep-ink4:    #7d6e60;   /* quaternary / placeholder on deep */

  /* —— v4.6 audience accent (organiser-overridable per event) —— */
  --aud-accent: var(--accent);
}


/* ╔══════════ tokens/base.css ══════════╗ */
/* ───────────────────────────────────────────────────────────────
   Seduh Score — Base reset + global elements + typography helpers
─────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
input,select,button,textarea{font-family:inherit}
button{cursor:pointer}
::selection{background:var(--am-soft);color:var(--am-h)}

/* ── Typography helpers ── */
.eyebrow{
  font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--accent);font-weight:var(--fw-bold);
}
.mono{font-family:var(--font-mono)}
.label{
  font-family:var(--font-mono);font-size:var(--fs-label);font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--ink3);
}
.hint{font-size:var(--fs-xs);color:var(--ink3)}
.empty{text-align:center;padding:3rem 1rem;color:var(--ink3);font-size:var(--fs-sm)}

/* ── Layout ── */
.container{max-width:var(--container);margin:0 auto;padding:0 0 var(--space-10)}


/* ╔══════════ patterns/components.css ══════════╗ */
/* ───────────────────────────────────────────────────────────────
   Seduh Score — Core component classes
   Ported verbatim (values → tokens) from the live shared/theme.css.
   These class names are the v2.0 contract the modules depend on.
─────────────────────────────────────────────────────────────── */

/* ════════ Platform header (permanent Seduh / Grey Matter lockup) ════════ */
.plat-hdr{position:sticky;top:0;z-index:60;display:flex;align-items:center;flex-wrap:wrap;gap:14px;
  padding:14px clamp(16px,4vw,40px);background:rgba(255,255,255,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border2)}
.plat-hdr-logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.plat-hdr-ac{width:5px;height:34px;border-radius:3px;background:var(--accent);flex-shrink:0}
.plat-mark{display:flex;align-items:center;color:var(--accent);flex-shrink:0}  /* brew-waves Seduh mark — recolours via currentColor */
.plat-mark svg{display:block;width:34px;height:29px}
.plat-hdr-name{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--ink);line-height:1;white-space:nowrap}
.plat-hdr-sub{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);font-weight:700;margin-top:3px;margin-left:.5rem}
.plat-hdr-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.plat-back{font-size:12px;color:var(--ink3);text-decoration:none;padding:7px 13px;border:1.5px solid var(--border);border-radius:var(--rad-pill);font-weight:600;white-space:nowrap}
.plat-back:hover{color:var(--accent);border-color:var(--accent-bd)}

/* ── Tabs ── */
.tabs{display:flex;gap:2px;background:var(--surface);border-bottom:1px solid var(--border);padding:0 clamp(16px,4vw,40px);overflow-x:auto}
.tbtn{padding:.7rem 1rem;border:none;background:transparent;font-family:var(--font-mono);font-size:11px;cursor:pointer;
  color:var(--ink3);border-bottom:2px solid transparent;margin-bottom:-1px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;font-weight:700;min-height:44px}
.tbtn:hover{color:var(--ink2)}
.tbtn.on{color:var(--accent);border-bottom-color:var(--accent)}

/* ── Cards ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rad);overflow:hidden;box-shadow:var(--shadow-sm)}
.card-hdr{padding:.6rem 1rem;border-bottom:1px solid var(--border2);font-family:var(--font-mono);font-size:10px;color:var(--ink3);
  text-transform:uppercase;letter-spacing:.12em;background:var(--surface2);font-weight:700;display:flex;align-items:center;justify-content:space-between}
.card-body{padding:1.1rem}

/* ── Inputs ── */
.ir{display:flex;gap:8px}.ir input{flex:1}
input[type=text],input[type=number],input[type=date],input[type=email],input[type=tel],select,textarea{
  border:1.5px solid var(--border);border-radius:var(--rad-s);padding:10px 12px;font-size:14px;
  background:var(--surface2);color:var(--ink);outline:none;width:100%;transition:border-color .14s,box-shadow .14s,background .14s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-bg)}
input:disabled,select:disabled{background:var(--bg);color:var(--ink3);cursor:default}
textarea{resize:vertical;min-height:62px;line-height:1.45}
label.field-lbl{font-size:12px;font-weight:700;color:var(--ink2);display:block;margin-bottom:6px}

/* ── Chips ── */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{display:flex;align-items:center;gap:6px;padding:5px 10px 5px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--rad-pill);font-size:13px;font-weight:600}
.p-rm{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}

/* ── Buttons ── */
.btn-p{display:inline-flex;align-items:center;white-space:nowrap;background:var(--accent);color:var(--accent-ink);border:none;padding:11px 22px;border-radius:var(--rad-s);font-size:14px;font-weight:700;min-height:44px;transition:background .14s,transform .12s}
.btn-p:hover{background:var(--accent-h)}.btn-p:active{transform:scale(.99)}
.btn-p:disabled{background:var(--border);color:var(--ink3);cursor:default}
.btn-o{display:inline-flex;align-items:center;white-space:nowrap;background:var(--surface);border:1.5px solid var(--border);padding:9px 16px;border-radius:var(--rad-s);font-size:13px;color:var(--ink2);font-weight:700;min-height:44px}
.btn-o:hover{border-color:var(--ink3)}
.btn-sm{padding:6px 13px;font-size:11px;font-weight:700;border-radius:var(--rad-pill);border:1.5px solid;font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.btn-am{background:var(--am-bg);border-color:var(--am-bd);color:var(--am)}.btn-am:hover{background:var(--am);color:#fff}
.btn-bl{background:var(--bl-bg);border-color:var(--bl-bd);color:var(--bl)}.btn-bl:hover{background:var(--bl);color:#fff}
.btn-gn{background:var(--gn-bg);border-color:var(--gn-bd);color:var(--gn)}.btn-gn:hover{background:var(--gn);color:#fff}
.btn-rd{background:var(--rd-bg);border-color:var(--rd-bd);color:var(--rd)}.btn-rd:hover{background:var(--rd);color:#fff}
.btn-pu{background:var(--pu-bg);border-color:var(--pu-bd);color:var(--pu)}.btn-pu:hover{background:var(--pu);color:#fff}

/* ── Info strip ── */
.inf{display:flex;gap:1.5rem;padding:.7rem 1rem;background:var(--surface2);border-radius:var(--rad-s);border:1px solid var(--border)}

/* ── Badge ── */
.badge{display:inline-block;padding:4px 10px;border-radius:var(--rad-pill);font-size:11px;font-weight:700;border:1.5px solid}
.badge-pu{background:var(--pu-bg);border-color:var(--pu-bd);color:var(--pu)}

/* ── Section divider ── */
.section-title{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);
  padding:.5rem .9rem;background:var(--surface2);border-radius:var(--rad-s);border:1px solid var(--border);display:flex;align-items:center;gap:8px;margin-bottom:.7rem}
.cutline{display:flex;align-items:center;gap:8px;padding:.3rem .5rem;font-family:var(--font-mono);font-size:10px;color:var(--ink3);text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.cutline::before,.cutline::after{content:'';flex:1;height:2px;background:var(--gn-bd)}

/* ── Leaderboard row ── */
.lb-row{display:flex;align-items:center;gap:12px;padding:.8rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--rad);box-shadow:var(--shadow-sm)}
.lb-row.qf{background:var(--gn-bg);border-color:var(--gn-bd);border-left:4px solid var(--gn)}
.lb-row.qf .lb-name{color:var(--gn);font-weight:700}
.rnk{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;font-weight:700;flex-shrink:0}
.r1{background:var(--rank-1);color:#fff}.r2{background:var(--rank-2);color:#fff}.r3{background:var(--rank-3);color:#fff}.ro{background:var(--surface2);color:var(--ink3);border:1.5px solid var(--border)}
.lb-name{flex:1;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-pts{text-align:right;flex-shrink:0}
.lb-pn{font-family:var(--font-display);font-size:24px;color:var(--accent);line-height:1;font-weight:700}
.lb-pl{font-family:var(--font-mono);font-size:9.5px;color:var(--ink3);font-weight:700;text-transform:uppercase}


/* ╔══════════ patterns/dashboard.css ══════════╗ */
/* ───────────────────────────────────────────────────────────────
   Seduh Score — Dashboard layout (hero + modules + tools + sheet)
   Ported from the live index.html dashboard. Powers the platform
   landing view: 3 cover layouts (Band / Editorial / Ticket), the
   competition-format module grid, and the "Make it your own" sheet.
─────────────────────────────────────────────────────────────── */
.main{flex:1;width:100%;max-width:var(--container);margin:0 auto;padding:clamp(20px,4vw,40px) clamp(16px,4vw,40px) 80px}
.shell{min-height:100vh;display:flex;flex-direction:column}
.btn-customize{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--rad-pill);white-space:nowrap;
  border:1.5px solid var(--accent-bd);background:var(--accent-bg);color:var(--accent-h);font-weight:700;font-size:13px;transition:transform .12s,box-shadow .12s}
.btn-customize:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-customize svg{width:15px;height:15px}
.plat-hdr-loc{display:none;align-items:center;gap:7px;font-size:12px;color:var(--ink3);font-weight:600}
.plat-hdr-loc .dot{width:6px;height:6px;border-radius:50%;background:var(--gn)}
@media(min-width:760px){.plat-hdr-loc{display:flex}}

/* ── Hero ── */
.hero{position:relative;margin-bottom:clamp(28px,4vw,44px)}
.hero-kicker{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.hero-kicker .line{height:2px;width:34px;background:var(--accent);border-radius:2px}
.hero-name{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:.98;color:var(--ink);font-size:clamp(38px,7.5vw,76px);text-wrap:balance}
.hero-sub{font-size:clamp(15px,2vw,19px);color:var(--ink2);margin-top:16px;max-width:46ch;line-height:1.5}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.metachip{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;background:var(--surface);border:1px solid var(--border);border-radius:var(--rad-pill);font-size:13.5px;font-weight:600;color:var(--ink2);box-shadow:var(--shadow-sm)}
.metachip svg{width:15px;height:15px;color:var(--accent);flex-shrink:0}
.metachip .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);font-weight:700;display:block}
.metachip.empty{color:var(--ink4)}.metachip.empty svg{color:var(--ink4)}

/* logo slot */
.logo-slot{position:relative;display:grid;place-items:center;border:1.5px dashed var(--border3);background:var(--surface2);
  border-radius:var(--rad-s);overflow:hidden;cursor:pointer;color:var(--ink4)}
.logo-slot:hover{border-color:var(--accent-bd);color:var(--accent)}
.logo-slot img{width:100%;height:100%;object-fit:cover}
.logo-slot .ph{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:0 8px;font-weight:700}
.logo-slot input{display:none}

/* layout: BAND */
.hero[data-layout="band"]{background:linear-gradient(180deg,var(--accent-bg),var(--surface));border:1px solid var(--border);border-radius:var(--rad);overflow:hidden;box-shadow:var(--shadow-md)}
.hero[data-layout="band"] .hero-inner{position:relative;padding:clamp(28px,5vw,56px)}
.hero[data-layout="band"] .accent-rail{position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--accent)}
.hero[data-layout="band"] .hero-logo{position:absolute;top:clamp(22px,4vw,40px);right:clamp(22px,4vw,40px);width:128px;height:128px}
.hero[data-layout="band"] .hero-name{max-width:14ch}

/* layout: EDITORIAL */
.hero[data-layout="editorial"]{display:grid;grid-template-columns:1.55fr .85fr;gap:clamp(20px,4vw,44px);align-items:center}
.hero[data-layout="editorial"] .hero-figure{position:relative}
.hero[data-layout="editorial"] .hero-logo{width:100%;aspect-ratio:4/5;border-radius:var(--rad);box-shadow:var(--shadow-md)}
.hero[data-layout="editorial"] .fig-tab{position:absolute;left:-10px;bottom:22px;background:var(--accent);color:var(--accent-ink);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:8px 14px;border-radius:7px;box-shadow:var(--shadow-md)}
@media(max-width:760px){.hero[data-layout="editorial"]{grid-template-columns:1fr}
  .hero[data-layout="editorial"] .hero-figure{order:-1;max-width:240px}}

/* layout: TICKET */
.hero[data-layout="ticket"]{display:flex;justify-content:center}
.ticket{position:relative;width:100%;max-width:760px;background:var(--surface);border:1px solid var(--border);border-radius:var(--rad);
  box-shadow:var(--shadow-lg);display:grid;grid-template-columns:1fr auto;overflow:hidden}
.ticket-main{padding:clamp(26px,4.5vw,46px)}
.ticket-stub{border-left:2px dashed var(--border3);padding:clamp(22px,3vw,34px) clamp(18px,2.4vw,26px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;background:var(--surface2);min-width:148px}
.ticket-stub .hero-logo{width:96px;height:96px}
.ticket::before,.ticket::after{content:"";position:absolute;right:148px;width:22px;height:22px;border-radius:50%;background:var(--bg);transform:translateX(50%)}
.ticket::before{top:-11px}.ticket::after{bottom:-11px}
.ticket-admit{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3);font-weight:700;writing-mode:vertical-rl;transform:rotate(180deg)}
@media(max-width:640px){.ticket{grid-template-columns:1fr}
  .ticket-stub{border-left:none;border-top:2px dashed var(--border3);flex-direction:row;min-width:0}
  .ticket::before,.ticket::after{display:none}.ticket-admit{writing-mode:horizontal-tb;transform:none}}

/* ── Section heading ── */
.sec-head{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.sec-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(17px,2.4vw,22px);letter-spacing:-.01em;color:var(--ink)}
.sec-head .count{font-family:var(--font-mono);font-size:11px;color:var(--ink3);font-weight:700}
.sec-head .rule{flex:1;height:1px;background:var(--border)}

/* ── Module grid ── */
.modules{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.mod{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--rad);
  overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s,border-color .16s}
.mod:not(.soon):hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--m-bd)}
.mod-top{height:6px;background:var(--m)}
.mod-body{padding:22px}
.mod-row{display:flex;align-items:flex-start;gap:14px}
.mod-icon{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;font-size:25px;background:var(--m-bg);border:1px solid var(--m-bd);flex-shrink:0}
.mod-h{flex:1;min-width:0}
.mod-name{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.01em;color:var(--ink);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mod-fmt{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--m);font-weight:700;margin-top:5px}
.mod-desc{font-size:13.5px;color:var(--ink2);margin-top:14px;line-height:1.5}
.mod-foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding-top:15px;border-top:1px solid var(--border2)}
.status{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--gn)}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--gn);box-shadow:0 0 0 3px var(--gn-bg)}
.status.soon{color:var(--ink3)}.status.soon .dot{background:var(--ink4);box-shadow:0 0 0 3px var(--border2)}
.mod-go{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--m)}
.mod-go svg{width:15px;height:15px;transition:transform .16s}
.mod:hover .mod-go svg{transform:translateX(3px)}
.mod.soon{opacity:.72}
.soon-tag{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink3);background:var(--surface3);border:1px solid var(--border);border-radius:var(--rad-pill);padding:3px 9px}

/* ── Tools strip ── */
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:30px}
.tool{display:flex;align-items:center;gap:12px;padding:15px 16px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--rad-s)}
a.tool{text-decoration:none;cursor:pointer}
a.tool:hover{border-color:var(--accent);background:var(--surface3)}
.tool-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);font-size:18px;flex-shrink:0}
.tool-t{font-weight:700;font-size:13.5px;color:var(--ink)}
.tool-d{font-size:11.5px;color:var(--ink3);margin-top:1px}

/* ── Footer (permanent credit) ── */
.foot{margin-top:54px;padding-top:24px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:14px;
  align-items:center;justify-content:space-between;font-size:12px;color:var(--ink3)}
.foot a{color:var(--am);text-decoration:none;font-weight:700}
.foot .credit{line-height:1.7}
.live-pill{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--gn);background:var(--gn-bg);border:1px solid var(--gn-bd);border-radius:var(--rad-pill);padding:4px 11px}
.live-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--gn);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ════════ "Make it your own" slide-over ════════ */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(33,26,20,.42);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;top:0;right:0;bottom:0;z-index:81;width:min(460px,100vw);background:var(--surface);box-shadow:var(--shadow-lg);
  transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}
.sheet.open{transform:none}
.sheet-hdr{display:flex;align-items:center;gap:12px;padding:20px 22px;border-bottom:1px solid var(--border2);flex-shrink:0}
.sheet-hdr .bar{width:5px;height:30px;border-radius:3px;background:var(--accent);flex-shrink:0}
.sheet-hdr .htxt{flex:1;min-width:0}
.sheet-hdr h3{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.01em;white-space:nowrap;line-height:1.1}
.sheet-hdr .sub{font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);font-weight:700;margin-top:2px}
.sheet-close{margin-left:auto;width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;color:var(--ink2)}
.sheet-close:hover{background:var(--surface3)}
.sheet-body{flex:1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:24px}
.fieldset{display:flex;flex-direction:column;gap:14px}
.fieldset>.leg{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-weight:700}
.fieldset>.leg::after{content:"";flex:1;height:1px;background:var(--border2)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;font-weight:700;color:var(--ink2)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.swatch{position:relative;width:34px;height:34px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1.5px var(--border);cursor:pointer;transition:transform .12s}
.swatch:hover{transform:scale(1.08)}
.swatch.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--sw)}
.swatch.on::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:900}
.layout-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lp{border:1.5px solid var(--border);border-radius:var(--rad-s);background:var(--surface2);padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;transition:border-color .14s,background .14s}
.lp.on{border-color:var(--accent);background:var(--accent-bg)}
.lp svg{width:100%;height:34px}
.lp .lpn{font-size:11px;font-weight:700;color:var(--ink2)}
.lp.on .lpn{color:var(--accent-h)}
.sheet-foot{flex-shrink:0;display:flex;gap:10px;padding:16px 22px;border-top:1px solid var(--border2);background:var(--surface2)}
.sheet-foot .btn-p{flex:1}

/* ── Reveal ── */
@media(prefers-reduced-motion:no-preference){
  .reveal{animation:rise .55s cubic-bezier(.2,.7,.3,1)}
  .reveal.d1{animation-delay:.04s}.reveal.d2{animation-delay:.11s}.reveal.d3{animation-delay:.18s}.reveal.d4{animation-delay:.25s}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}


/* ╔══════════ patterns/overlays.css ══════════╗ */
/* ───────────────────────────────────────────────────────────────
   Seduh Score — Projector overlays (timer + audience)
   The class / ID names here are generated at runtime by
   shared/timer.js and shared/audience.js — they are a hard contract.
   Never rename .tmr-* / .aud-* or drop these blocks.
─────────────────────────────────────────────────────────────── */

/* ════════ Court timer overlay (dark, projector) ════════ */
#tmr-overlay{display:none;position:fixed;inset:0;z-index:1001;background:#1c1510;flex-direction:column;align-items:center;justify-content:center}
#tmr-overlay.show{display:flex}
#tmr-overlay.fs .tmr-extras{display:none}
#tmr-overlay.fs .tmr-display{font-size:30vw;cursor:pointer}
.tmr-extras{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}
.tmr-presets{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.tmr-preset{padding:10px 24px;border:2px solid #4a3d33;border-radius:var(--rad-s);background:transparent;color:#b9aa9a;
  font-family:var(--font-mono);font-size:15px;font-weight:700;cursor:pointer;transition:background .14s,border-color .14s,color .14s}
.tmr-preset:hover,.tmr-preset.on{border-color:var(--am-bd);background:var(--am-bd);color:#1c1510}
.tmr-display{font-family:var(--font-display);font-size:22vw;font-weight:800;color:#faf7f1;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums;text-align:center;min-width:2ch}
#tmr-overlay.running .tmr-display{color:var(--am-bd)}
#tmr-overlay.done .tmr-display{color:#ef4444;animation:blink 1s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.tmr-controls{display:flex;gap:10px;margin-top:1rem;flex-wrap:wrap;justify-content:center}
.tmr-btn{padding:12px 28px;border-radius:var(--rad-s);font-size:14px;font-weight:700;cursor:pointer;border:2px solid}
.tmr-start{background:var(--gn);border-color:var(--gn);color:#fff}.tmr-start:hover{background:#0c5d57}
.tmr-pause{background:var(--bl);border-color:var(--bl);color:#fff}.tmr-pause:hover{background:#1740ad}
.tmr-reset{background:#4a3d33;border-color:#4a3d33;color:#fff}.tmr-reset:hover{background:#352b24}
.tmr-footer{display:flex;gap:10px;margin-top:1.5rem;flex-wrap:wrap;justify-content:center}
.tmr-footer button{padding:8px 20px;border:2px solid #4a3d33;border-radius:var(--rad-s);background:transparent;color:#b9aa9a;
  font-size:13px;font-weight:700;cursor:pointer}
.tmr-footer button:hover{border-color:#8a7f73;color:#faf7f1}

/* ════════ Audience overlay (light, projector standings/results) ════════ */
#aud-overlay{display:none;position:fixed;inset:0;z-index:998;background:var(--bg);overflow:hidden;flex-direction:column}
#aud-overlay.show{display:flex}
.aud-banner{display:flex;align-items:center;gap:14px;padding:.9rem 2rem;background:var(--surface);border-bottom:3px solid var(--am);flex-shrink:0;box-shadow:var(--shadow-md)}
.aud-ac{width:5px;height:42px;background:var(--am);border-radius:3px;flex-shrink:0}
.aud-title-block .aud-sub{font-family:var(--font-mono);font-size:10px;color:var(--am);letter-spacing:.25em;text-transform:uppercase;margin-bottom:3px;font-weight:700}
.aud-title-block{flex-shrink:0}
.aud-title-block .aud-title{font-family:var(--font-display);font-size:22px;color:var(--ink);font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.aud-module-tag{font-size:11px;font-weight:700;padding:3px 10px;border-radius:var(--rad-pill);border:1.5px solid;margin-left:4px}
.aud-ts{margin-left:auto;text-align:right;font-family:var(--font-mono);font-size:11px;color:var(--ink3);line-height:1.7;font-weight:600}
.aud-close{background:var(--surface3);border:1.5px solid var(--border);color:var(--ink2);font-size:12px;font-weight:700;padding:7px 16px;border-radius:var(--rad-s);cursor:pointer;flex-shrink:0;text-transform:uppercase}
.aud-close:hover{background:var(--am);color:#fff;border-color:var(--am)}
.aud-body{display:grid;grid-template-columns:1fr 1fr;flex:1;overflow:hidden}
.aud-panel{overflow-y:auto;padding:1.5rem 1.75rem;background:var(--bg)}
.aud-panel:first-child{border-right:2px solid var(--border2)}
.aud-sec-title{font-family:var(--font-mono);font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--am);margin-bottom:1rem;padding-bottom:.6rem;border-bottom:2px solid var(--am);font-weight:700}
@media(max-width:720px){.aud-body{grid-template-columns:1fr}.aud-panel:first-child{border-right:none;border-bottom:2px solid var(--border2)}}

/* ── Audience round-colour chips (BTC histHTML rows) ── */
.aud-round-pre  { background-color: var(--surface2);  color: var(--txt3); }
.aud-round-qf   { background-color: var(--bl-bg);     color: var(--bl);   }
.aud-round-sf   { background-color: var(--am-bg);     color: var(--am);   }
.aud-round-fin  { background-color: var(--gn-bg);     color: var(--gn);   }

/* ════════ Audience overlay v4.6 — new architecture (POA-16) ════════ */
/* Base structural CSS already in old block above (#aud-overlay display:none etc.) */
/* These rules add theme, layout, and component classes applied by audience.js */

/* ── Themes ── */
#aud-overlay.aud-light{background:var(--bg);color:var(--txt)}
#aud-overlay.aud-dark {background:var(--surface-deep);color:var(--deep-ink)}

/* ── Header ── */
.aud-hdr{display:flex;align-items:center;gap:14px;padding:.75rem 1.5rem;flex-shrink:0;border-bottom:2px solid}
#aud-overlay.aud-light .aud-hdr{background:var(--surface);border-color:var(--border);box-shadow:var(--shadow-sm)}
#aud-overlay.aud-dark  .aud-hdr{background:var(--deep-card);border-color:var(--deep-bd)}
.aud-hdr-left {display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.aud-hdr-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.aud-hdr-sub  {font-family:var(--font-mono);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--aud-accent);margin-bottom:1px}
.aud-hdr-name {font-family:var(--font-display);font-size:clamp(14px,2vw,20px);font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#aud-overlay.aud-light .aud-hdr-name{color:var(--ink)}
#aud-overlay.aud-dark  .aud-hdr-name{color:var(--deep-ink)}

/* ── Module tag ── */
#aud-tag{font-family:var(--font-mono);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;padding:3px 9px;border-radius:var(--rad-pill);border:1.5px solid var(--aud-accent);color:var(--aud-accent);flex-shrink:0;white-space:nowrap}

/* ── Logo ── */
#aud-logo{height:48px;max-width:150px;object-fit:contain;border-radius:var(--rad-s)}
@media(max-width:640px){#aud-logo{display:none!important}}

/* ── Theme toggle ── */
.aud-toggle-btn{width:38px;height:38px;border-radius:var(--rad-s);border:1.5px solid;background:transparent;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center}
#aud-overlay.aud-light .aud-toggle-btn{border-color:var(--border);color:var(--txt2)}
#aud-overlay.aud-light .aud-toggle-btn:hover{background:var(--surface3)}
#aud-overlay.aud-dark  .aud-toggle-btn{border-color:var(--deep-bd);color:var(--deep-ink2)}
#aud-overlay.aud-dark  .aud-toggle-btn:hover{background:rgba(255,255,255,.06)}
#aud-overlay.aud-lite  .aud-toggle-btn{display:none}

/* ── Close ── */
.aud-close-btn{padding:8px 16px;border-radius:var(--rad-s);border:1.5px solid;background:transparent;cursor:pointer;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}
#aud-overlay.aud-light .aud-close-btn{border-color:var(--border);color:var(--txt2)}
#aud-overlay.aud-light .aud-close-btn:hover{background:var(--am);border-color:var(--am);color:#fff}
#aud-overlay.aud-dark  .aud-close-btn{border-color:var(--deep-bd);color:var(--deep-ink2)}
#aud-overlay.aud-dark  .aud-close-btn:hover{background:var(--am);border-color:var(--am);color:#fff}

/* ── Content area ── */
.aud-content{display:flex;flex:1;overflow:hidden}
.aud-lb-panel,.aud-hist-panel{overflow-y:auto;padding:1.5rem 1.75rem}
#aud-overlay.aud-light .aud-lb-panel,
#aud-overlay.aud-light .aud-hist-panel{background:var(--bg)}
#aud-overlay.aud-dark  .aud-lb-panel,
#aud-overlay.aud-dark  .aud-hist-panel{background:var(--surface-deep)}

/* Dual panel: 42 / 58 */
#aud-overlay.aud-dual .aud-lb-panel  {flex:0 0 42%;border-right:2px solid}
#aud-overlay.aud-dual .aud-hist-panel{flex:0 0 58%}
#aud-overlay.aud-light.aud-dual .aud-lb-panel{border-color:var(--border2)}
#aud-overlay.aud-dark.aud-dual  .aud-lb-panel{border-color:var(--deep-bd)}
/* Single panel */
#aud-overlay.aud-single .aud-hist-panel{flex:1}

/* Empty state */
.aud-empty{text-align:center;padding:2.5rem 1rem;font-size:14px}
#aud-overlay.aud-light .aud-empty{color:var(--txt3)}
#aud-overlay.aud-dark  .aud-empty{color:var(--deep-ink3)}

/* ── Mobile stack (≤640px) ── */
@media(max-width:640px){
  #aud-overlay.aud-dual .aud-content{flex-direction:column-reverse}
  #aud-overlay.aud-dual .aud-lb-panel,
  #aud-overlay.aud-dual .aud-hist-panel{flex:none;width:100%;border-right:none}
  #aud-overlay.aud-light.aud-dual .aud-lb-panel{border-top:2px solid var(--border2)}
  #aud-overlay.aud-dark.aud-dual  .aud-lb-panel{border-top:2px solid var(--deep-bd)}
}

/* ── Podium panel ── */
#aud-podium-panel{display:none;position:absolute;inset:0;background:var(--surface-deep);color:var(--deep-ink);flex-direction:column;align-items:center;justify-content:center;z-index:10;padding:2rem}
#aud-overlay.aud-podium-active #aud-podium-panel{display:flex}
.aud-podium-back-btn{position:absolute;top:1.25rem;left:1.5rem;padding:8px 16px;border-radius:var(--rad-s);border:1.5px solid var(--deep-bd);background:transparent;color:var(--deep-ink2);font-size:13px;font-weight:700;cursor:pointer}
.aud-podium-back-btn:hover{background:var(--deep-card)}
.aud-podium-stage{display:flex;align-items:flex-end;justify-content:center;gap:2rem;width:100%;max-width:900px}
.aud-podium-tile{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:2rem 1.5rem;border-radius:var(--rad);background:var(--deep-card);border:2px solid var(--deep-bd);min-width:200px;text-align:center}
.aud-podium-rank-1{border-color:var(--rank-1);transform:translateY(-24px)}
.aud-podium-rank-2{border-color:var(--rank-2)}
.aud-podium-rank-3{border-color:var(--rank-3)}
.aud-podium-empty{opacity:.4}
.aud-podium-label{font-family:var(--font-mono);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--deep-ink3)}
.aud-podium-rank-1 .aud-podium-label{color:var(--rank-1)}
.aud-podium-rank-2 .aud-podium-label{color:var(--rank-2)}
.aud-podium-rank-3 .aud-podium-label{color:var(--rank-3)}
.aud-podium-name{font-family:var(--font-display);font-weight:800;color:var(--deep-ink)}
.aud-podium-rank-1 .aud-podium-name{font-size:clamp(20px,3vw,32px)}
.aud-podium-rank-2 .aud-podium-name,
.aud-podium-rank-3 .aud-podium-name{font-size:clamp(16px,2.2vw,24px)}
@media(max-width:640px){
  .aud-podium-stage{flex-direction:column;align-items:center}
  .aud-podium-tile{min-width:min(80vw,320px);transform:none!important}
}

/* ── Bracket-tree renderer (POA-63 Phase 1) ──
   Audience.renderBracketTree() — a separate rendering target from #aud-overlay
   (mounts into a caller-provided container, e.g. Phase 2's audience/index.html),
   not a modification of the organiser overlay. Fixed 16:9 projector stage,
   scale-to-fit, no responsive/mobile breakpoint — see CONVENTIONS.md.
   Round-identity colours are hardcoded hex, component-scoped (not :root tokens),
   per the same "hardcoded hex in overlay contexts" exception already documented
   for .aud- and .pdf- prefixed overlays — see CONVENTIONS.md round-colour addendum. Connector-line
   geometry (top/bottom/right border on .aud-bkt-pair::after) is a deliberate new
   technique for this codebase; exact alignment is tuned visually against real
   rendered card heights, not hardcoded pixel math, so it holds at any match count. */

.aud-bkt-viewport{position:relative;overflow:hidden;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000}

.aud-bkt-stage{
  --bkt-stage-w:1920px;--bkt-stage-h:1080px;
  --bkt-blue:#6aa9f5;--bkt-amber:#f0ad4e;--bkt-green:#34d399;--bkt-purple:#a78bfa;--bkt-tie:#ef8f8f;
  width:var(--bkt-stage-w);height:var(--bkt-stage-h);flex-shrink:0;
  transform:scale(var(--bkt-scale,1));transform-origin:center;
  display:flex;flex-direction:column;font-family:var(--font-display);
  position:relative;overflow:hidden;
}
.aud-bkt-stage.aud-bkt-theme-dark{
  --bkt-bg:var(--surface-deep);--bkt-card:var(--deep-card);--bkt-bd:var(--deep-bd);
  --bkt-ink:var(--deep-ink);--bkt-ink2:var(--deep-ink2);--bkt-ink3:var(--deep-ink3);
  background:var(--bkt-bg);color:var(--bkt-ink);
}
.aud-bkt-stage.aud-bkt-theme-light{
  --bkt-bg:var(--bg);--bkt-card:var(--surface);--bkt-bd:var(--border2);
  --bkt-ink:var(--txt);--bkt-ink2:var(--txt2);--bkt-ink3:var(--txt3);
  background:var(--bkt-bg);color:var(--bkt-ink);
}

/* ── Header / identity ── */
.aud-bkt-hdr{display:flex;align-items:center;gap:16px;padding:18px 32px;flex-shrink:0;border-bottom:1.5px solid var(--bkt-bd)}
.aud-bkt-hdr-logo{height:56px;width:56px;object-fit:contain;border-radius:8px;flex-shrink:0}
.aud-bkt-hdr-id{min-width:0}
.aud-bkt-hdr-sub{font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--bkt-ink3);margin-bottom:2px}
.aud-bkt-hdr-name{font-size:clamp(18px,2.4vw,26px);font-weight:800;letter-spacing:-.01em;color:var(--bkt-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aud-bkt-hdr-meta{font-family:var(--font-mono);font-size:11px;color:var(--bkt-ink3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aud-bkt-hdr-live{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bkt-green);padding:5px 12px;border:1.5px solid var(--bkt-green);border-radius:var(--rad-pill)}
.aud-bkt-hdr-live .dot{width:7px;height:7px;border-radius:50%;background:var(--bkt-green);animation:pulse 1.8s ease-in-out infinite}

/* ── Tree layout ──
   Every flex-column link in this chain needs BOTH flex:1 (to actually grow
   into the parent's resolved height, not just sit at flex-basis:auto/content
   size) and min-height:0 (to override the flex-item default min-height:auto,
   which otherwise refuses to shrink below content size in a nested column-
   in-row-in-column chain). .aud-bkt-matches previously had neither — it was
   referenced in the JS template but never given a rule here, so it rendered
   as a plain block sized to its own content (~155px) instead of the ~950px
   .aud-bkt-col actually had available, and .aud-bkt-col's justify-content:
   space-around then spent that unused space as a gap instead of an error. */
.aud-bkt-tree{flex:1;display:flex;flex-direction:row;align-items:stretch;padding:24px 32px;gap:0;min-height:0}
.aud-bkt-side{flex:1;display:flex;flex-direction:row;min-width:0;min-height:0}
.aud-bkt-side-right{flex-direction:row-reverse}
.aud-bkt-center{flex:0 0 auto;width:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:0 12px}

.aud-bkt-col{flex:1;display:flex;flex-direction:column;justify-content:space-around;gap:var(--space-2,8px);padding:0 14px;min-width:0;min-height:0;position:relative}
.aud-bkt-col-label{font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;text-align:center;padding-bottom:8px;flex-shrink:0}
.aud-bkt-col-label.aud-bkt-rc-blue{color:var(--bkt-blue)}
.aud-bkt-col-label.aud-bkt-rc-amber{color:var(--bkt-amber)}
.aud-bkt-col-label.aud-bkt-rc-green{color:var(--bkt-green)}
.aud-bkt-col-label.aud-bkt-rc-purple{color:var(--bkt-purple)}

.aud-bkt-matches{flex:1;display:flex;flex-direction:column;justify-content:space-around;min-height:0}

.aud-bkt-pair{flex:1;display:flex;flex-direction:column;justify-content:space-around;gap:10px;min-height:0;position:relative}
/* Connector: a right-facing "]" bracket spanning the pair's own two matches,
   stubbing out toward the next column. Percentages, not fixed px, so this
   holds regardless of how many matches share the column (space-around). */
.aud-bkt-pair::after{
  content:'';position:absolute;right:-14px;top:25%;bottom:25%;width:14px;
  border-top:2px solid var(--bkt-bd);border-bottom:2px solid var(--bkt-bd);border-right:2px solid var(--bkt-bd);
  border-radius:0 5px 5px 0;
}
.aud-bkt-pair.aud-bkt-pair-single::after{
  top:50%;bottom:auto;height:0;border-top:2px solid var(--bkt-bd);border-bottom:none;
}
.aud-bkt-side-right .aud-bkt-pair::after{
  right:auto;left:-14px;border-right:none;border-left:2px solid var(--bkt-bd);border-radius:5px 0 0 5px;
}

.aud-bkt-match{
  background:var(--bkt-card);border:1.5px solid var(--bkt-bd);border-top-width:3px;
  border-radius:9px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.aud-bkt-match.aud-bkt-rc-blue{border-top-color:var(--bkt-blue)}
.aud-bkt-match.aud-bkt-rc-amber{border-top-color:var(--bkt-amber)}
.aud-bkt-match.aud-bkt-rc-green{border-top-color:var(--bkt-green)}
.aud-bkt-match.aud-bkt-rc-purple{border-top-color:var(--bkt-purple)}

.aud-bkt-slot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 12px}
.aud-bkt-slot+.aud-bkt-slot{border-top:1px solid var(--bkt-bd)}
.aud-bkt-slot-name{flex:1;min-width:0;font-weight:700;font-size:13px;color:var(--bkt-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aud-bkt-slot-score{flex-shrink:0;font-family:var(--font-mono);font-weight:700;font-size:12px;color:var(--bkt-ink2)}
.aud-bkt-slot.aud-bkt-slot-tbd .aud-bkt-slot-name{color:var(--bkt-ink3);font-style:italic;font-weight:600}
.aud-bkt-slot.aud-bkt-slot-winner .aud-bkt-slot-name{color:var(--bkt-green)}
.aud-bkt-slot.aud-bkt-slot-tie .aud-bkt-slot-name{color:var(--bkt-tie)}
.aud-bkt-slot.aud-bkt-bye .aud-bkt-slot-name{color:var(--bkt-ink3)}
.aud-bkt-bye-tag{flex-shrink:0;font-size:11px;color:var(--bkt-ink3)}

.aud-bkt-revival{display:inline-flex;align-items:center;gap:2px;font-family:var(--font-mono);font-size:9px;font-weight:700;color:var(--bkt-purple);background:rgba(167,139,250,.15);border:1px solid var(--bkt-purple);border-radius:3px;padding:1px 5px;margin-left:5px;vertical-align:middle;flex-shrink:0}

/* Match's own two slots both named, neither scored yet — see _bktMatchPending in audience.js */
.aud-bkt-match.aud-bkt-active{box-shadow:0 0 0 2px var(--bkt-blue),0 0 16px rgba(106,169,245,.5);animation:pulse 2s ease-in-out infinite}

/* Slot value changed since the previous renderBracketTree() call on this container */
@keyframes bktFlash{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.9)}
  30%{box-shadow:0 0 24px 4px rgba(255,255,255,.55)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
.aud-bkt-match.aud-bkt-just-resolved{animation:bktFlash 1.2s ease-out forwards}

/* ── Pool-shaped rounds (POA-66) ──
   A round that is N groups of M competitors rather than head-to-head matches
   — Throwdown's redemption round, and the shape Liga/Cup Taster heats would
   use. Rendered as ONE column of group cards: no pair wrapper, therefore no
   connector geometry, and no active-glow, since both are pair-shaped concepts
   with no meaning for a pool. Group cards deliberately reuse the match card's
   surface treatment and the existing slot-row styling, so a pool reads as the
   same visual family as the bracket columns beside it.
   The pool container needs BOTH flex:1 and min-height:0 for the same reason
   .aud-bkt-matches does — see the tree-layout note above; without them it
   sizes to content inside the nested column-in-row-in-column chain and the
   column's space-around spends the remainder as a gap. */
.aud-bkt-pool{flex:1;display:flex;flex-direction:column;justify-content:space-around;gap:10px;min-height:0}
.aud-bkt-pool-group{
  background:var(--bkt-card);border:1.5px solid var(--bkt-bd);border-top-width:3px;
  border-radius:9px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.aud-bkt-pool-group.aud-bkt-rc-blue{border-top-color:var(--bkt-blue)}
.aud-bkt-pool-group.aud-bkt-rc-amber{border-top-color:var(--bkt-amber)}
.aud-bkt-pool-group.aud-bkt-rc-green{border-top-color:var(--bkt-green)}
.aud-bkt-pool-group.aud-bkt-rc-purple{border-top-color:var(--bkt-purple)}
.aud-bkt-pool-group.aud-bkt-just-resolved{animation:bktFlash 1.2s ease-out forwards}

/* ── Champion card (champMode:'tree') ── */
.aud-bkt-champion-card{
  background:var(--bkt-card);border:2px solid var(--bkt-green);border-radius:12px;
  padding:20px 18px;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.aud-bkt-champion-label{font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--bkt-green);margin-bottom:6px}
.aud-bkt-champion-name{font-size:clamp(16px,2vw,22px);font-weight:800;color:var(--bkt-ink)}

/* ── Podium takeover (champMode:'podium') — mirrors #aud-podium-panel's
   absolutely-positioned full-panel precedent, simpler 2-entry layout since
   the bracket-tree data shape only carries champion/runnerUp. ── */
.aud-bkt-podium-panel{display:none;position:absolute;inset:0;background:var(--bkt-bg);color:var(--bkt-ink);flex-direction:column;align-items:center;justify-content:center;gap:2rem;z-index:10}
.aud-bkt-podium-panel.show{display:flex}
.aud-bkt-podium-stage{display:flex;align-items:flex-end;justify-content:center;gap:2rem}
.aud-bkt-podium-tile{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:2rem 1.5rem;border-radius:var(--rad);background:var(--bkt-card);border:2px solid var(--bkt-bd);min-width:220px;text-align:center}
.aud-bkt-podium-tile.aud-bkt-podium-champ{border-color:var(--rank-1);transform:translateY(-24px)}
.aud-bkt-podium-label{font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--bkt-ink3)}
.aud-bkt-podium-tile.aud-bkt-podium-champ .aud-bkt-podium-label{color:var(--rank-1)}
.aud-bkt-podium-name{font-weight:800;color:var(--bkt-ink)}
.aud-bkt-podium-tile.aud-bkt-podium-champ .aud-bkt-podium-name{font-size:clamp(22px,3vw,34px)}
.aud-bkt-podium-tile:not(.aud-bkt-podium-champ) .aud-bkt-podium-name{font-size:clamp(16px,2.2vw,22px)}

/* ╔══════════ MUA Chrome Components ══════════╗ */
/* ───────────────────────────────────────────────────────────────
   MUA-06a — Event band, module toolbar, sticky tabs, bottom sheet.
   Designed in MUA-05. Container query note: .eb-logo uses 13cqw —
   container-type:inline-size is added per-module in MUA-06b/c.
─────────────────────────────────────────────────────────────── */

/* ════════ .event-band ════════ */
.event-band {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) clamp(14px, 4vw, 24px);
  background: var(--event-bg, transparent);
  border-bottom: var(--bw-hair) solid var(--border);
  overflow: hidden;
}
.event-band[data-empty] {
  display: none;
}
.eb-logo {
  height: clamp(46px, 13cqw, 64px);
  width: clamp(46px, 13cqw, 64px);
  flex-shrink: 0;
  border-radius: var(--rad-s);
  display: grid;
  place-items: center;
  background: var(--surface);
  border: var(--bw) solid var(--accent-bd);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  color: var(--accent-h);
  letter-spacing: -0.02em;
  object-fit: contain;
}
.eb-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.eb-name {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--txt);
  letter-spacing: -0.01em;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eb-sub {
  font-size: var(--fs-sm);
  color: var(--txt2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eb-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--txt3);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ════════ .mod-toolbar ════════ */
.mod-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 10px clamp(12px, 4vw, 22px);
  background: var(--surface2);
  border-bottom: var(--bw-hair) solid var(--border);
  overflow: hidden;
}
.tb-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.tb-pri {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 15px 0 8px;
  background: var(--surface);
  border: var(--bw) solid var(--accent-bd);
  border-radius: var(--rad-pill);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: var(--fw-bold);
  color: var(--accent-h);
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s, box-shadow 0.14s, background 0.14s;
  white-space: nowrap;
  cursor: pointer;
}
.tb-pri:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.tb-pri:active {
  transform: scale(0.99);
}
.tb-pri .ic {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-bg);
  font-size: 15px;
  flex-shrink: 0;
}
.tb-more {
  margin-left: auto;
  display: none;
  align-items: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 13px;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--rad-pill);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--ink2);
  transition: border-color 0.14s, color 0.14s;
  flex-shrink: 0;
  cursor: pointer;
}
.tb-more:hover {
  border-color: var(--ink3);
  color: var(--ink);
}
.tb-more .dots {
  font-size: 19px;
  line-height: 0;
  letter-spacing: 0.04em;
  margin-top: -3px;
}
.tb-more .word {
  display: none;
}
.tb-more .ct {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-bold);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--rad-pill);
  background: var(--accent-bg);
  border: var(--bw-hair) solid var(--accent-bd);
  display: grid;
  place-items: center;
  color: var(--accent-h);
}
.tb-more.has-new .ct {
  background: var(--gn-bg);
  border-color: var(--gn-bd);
  color: var(--gn);
}
.tb-secondary {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
.tb-sec {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 13px;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--rad-pill);
  font-size: 12.5px;
  font-weight: var(--fw-bold);
  color: var(--ink2);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.14s, color 0.14s;
}
.tb-sec:hover {
  border-color: var(--ink3);
  color: var(--ink);
}
.tb-sec .ic {
  font-size: 14px;
}
.tb-sec-podium {
  border-color: var(--gn-bd);
  color: var(--gn);
}
.tb-sec-podium:hover {
  border-color: var(--gn);
  color: var(--gn);
}
.tb-reset {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px;
  margin-left: auto;
  background: var(--rd-bg);
  border: var(--bw) solid var(--rd-bd);
  border-radius: var(--rad-pill);
  font-size: 12.5px;
  font-weight: var(--fw-bold);
  color: var(--rd);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
}
.tb-reset:hover {
  background: var(--rd);
  color: #fff;
}
/* C1 — show word label on ⋯ More at ≥600px */
@media (min-width: 600px) {
  .tb-more .word { display: inline; }
}

/* ════════ .mod-tabs ════════ */
.mod-tabs {
  position: sticky;
  top: 0;
  z-index: 55;
  display: flex;
  gap: 2px;
  background: var(--surface);
  border-bottom: var(--bw-hair) solid var(--border);
  padding: 0 clamp(12px, 4vw, 22px);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  transition: box-shadow 0.2s;
}
.mod-tabs::-webkit-scrollbar {
  display: none;
}
.mod-tabs.stuck {
  box-shadow: var(--shadow-sm);
}
.mtab {
  padding: 0.7rem 1rem;
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  color: var(--ink3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  font-weight: var(--fw-bold);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color 0.14s;
}
.mtab:hover {
  color: var(--ink2);
}
.mtab.on {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.mtab .cond {
  font-family: var(--font-mono);
  font-size: 8px;
  padding: 1px 5px;
  border-radius: var(--rad-pill);
  background: var(--pu-bg);
  color: var(--pu);
  border: var(--bw-hair) solid var(--pu-bd);
  letter-spacing: var(--ls-label);
}

/* ════════ .sheet-scrim / .more-sheet ════════ */
.sheet-scrim {
  position: absolute;
  inset: 0;
  z-index: 140;
  background: rgba(33, 26, 20, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s;
}
.sheet-scrim.open {
  opacity: 1;
  pointer-events: auto;
}
.more-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 141;
  background: var(--surface);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: var(--shadow-lg);
  transform: translateY(105%);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
  max-height: 82%;
  padding-bottom: 12px;
}
.more-sheet.open {
  transform: none;
}
.ms-grab {
  width: 38px;
  height: 4px;
  border-radius: 99px;
  background: var(--border3);
  margin: 10px auto 4px;
  flex-shrink: 0;
}
.ms-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--txt3);
  padding: 0 20px 10px;
  flex-shrink: 0;
}
.ms-list {
  overflow-y: auto;
  flex: 1;
  padding: 0 12px 4px;
}
.ms-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 52px;
  padding: 0 10px;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--txt);
  border-radius: var(--rad);
  cursor: pointer;
  transition: background 0.12s;
  text-align: left;
}
.ms-item:hover {
  background: var(--surface2);
}
.ms-ic {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface2);
  font-size: 16px;
  flex-shrink: 0;
}
.ms-cap {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--txt3);
}
.ms-divider {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--rd);
  padding: 14px 10px 4px;
}
.ms-reset {
  color: var(--rd);
}
.ms-reset .ms-ic {
  background: var(--rd-bg);
  color: var(--rd);
}
.ms-podium {
  color: var(--gn);
}
.ms-podium .ms-ic {
  background: var(--gn-bg);
}

/*
  C2 — container query units.
  .eb-logo uses clamp(46px, 13cqw, 64px) which requires a container context.
  Applied to the module's outermost wrapper. In production modules this is the
  <div class="plat-wrap"> or equivalent top-level div that wraps .plat-hdr and
  all content. MUA-06b will add container-type:inline-size to the correct element
  in each module after reading the actual markup structure of that module.
  This comment is the spec note — the actual property is added per-module in 06b/c.
*/


/* ════════ PDF export overlay (MUA-07) ════════ */
/* Contract tokens — see CLAUDE.md/CONVENTIONS.md. Hardcoded hex, not var(--*):
   same reasoning as .aud-* — must render correctly in print context. */
#pdf-overlay{display:none;position:fixed;inset:0;z-index:1000;background:#efe9de;overflow-y:auto;flex-direction:column}
#pdf-overlay.show{display:flex}
.pdf-toolbar{display:flex;align-items:center;gap:10px;padding:.85rem 2rem;background:#fff;border-bottom:2px solid #b45309;flex-shrink:0;position:sticky;top:0;z-index:10;flex-wrap:wrap}
.pdf-toolbar-title{font-size:14px;font-weight:700;flex:1;color:#211a14}
.pdf-toolbar-hint{font-size:12px;color:#8a7f73}
.btn-print{background:#b45309;color:#fff;border:none;padding:9px 20px;border-radius:5px;font-size:13px;font-weight:700;cursor:pointer}
.btn-print:hover{background:#92400e}
.pdf-page{width:210mm;min-height:297mm;background:#fff;margin:1.5rem auto;padding:16mm;box-shadow:0 2px 20px rgba(0,0,0,.12);font-family:var(--font-body);color:#211a14;page-break-after:always}
.pdf-page:last-child{page-break-after:auto}
.pdf-logo-row{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:3px solid #b45309;padding-bottom:10px;margin-bottom:18px}
.pdf-id-block{display:flex;align-items:flex-end;gap:12px}
.pdf-logo{height:40px;max-width:130px;object-fit:contain}
.pdf-event-name{font-size:22px;font-weight:700;letter-spacing:-.01em}
.pdf-event-sub{font-size:10px;color:#b45309;letter-spacing:.2em;text-transform:uppercase;margin-bottom:4px;font-weight:700}
.pdf-event-meta{font-size:11px;color:#8a7f73;margin-top:5px}
.pdf-meta{text-align:right;font-size:11px;color:#8a7f73;line-height:1.8;font-weight:500}
.pdf-section-title{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#b45309;border-bottom:1.5px solid #efe9de;padding-bottom:5px;margin:20px 0 12px;font-weight:700}
.pdf-footer{margin-top:24px;padding-top:10px;border-top:1.5px solid #efe9de;display:flex;justify-content:space-between;font-size:9px;color:#8a7f73;letter-spacing:.06em}

/* ── Print (PDF export) ── */
@media print{
  body>*{display:none!important}
  #pdf-overlay{display:block!important;position:static!important;background:#fff!important;overflow:visible!important}
  .pdf-toolbar{display:none!important}
  .pdf-page{width:100%!important;margin:0!important;padding:12mm 14mm!important;box-shadow:none!important}
}