/* VIRPP x ADE 2026 — shared styles. ADE base (black / bone / yellow, square corners, Anton display) with VIRPP accents. No gradients, no rounded cards. */
/* All fonts are self-hosted woff2 subsets (OFL, licences in /fonts/OFL-*.txt): Anton (display) and DM Sans 400 (body) are preloaded.
   No third-party font requests. ADE's own font (Helvetica Neue) is licensed and deliberately not used on the web. */
@font-face {
  font-family: "Anton";
  src: url("../fonts/anton-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-latin-ext-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-latin-ext-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-latin-ext-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-latin-ext-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Metric-matched fallback for Anton: Impact is close; size-adjust keeps line lengths stable during swap. */
@font-face { font-family: "Anton Fallback"; src: local("Impact"), local("Arial Narrow Bold"), local("Liberation Sans Narrow Bold"); size-adjust: 92%; ascent-override: 118%; descent-override: 33%; }
:root {
  --ground: #0B0B0C;
  --ground-2: #121214;
  --bone: #F2EFE8;
  --bone-dim: #B9B5AC; /* 9.3:1 on ground */
  --yellow: #FFFF00;
  --rule: #2A2A2D;
  --card: #141416;      /* submission card / raised surfaces */
  --field-line: #3A3A3F;/* input borders */
  --virpp: #F71454;     /* VIRPP pink: VIRPP-owned elements only (logo, "Powered by VIRPP") */
  --error: #FF6B5B;     /* 6.4:1 on ground */
  --ok: #7CFF8A;
  --wave-dim: #5A5A60;  /* waveform bars outside the fragment window */
  --display: "Anton", "Anton Fallback", "Impact", "Arial Narrow", sans-serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--bone);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--bone); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--yellow); }
p { margin: 0 0 1em; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--yellow); color: var(--ground);
  padding: 12px 16px; font-family: var(--mono); font-weight: 700; z-index: 100;
}
.skip:focus { left: 16px; top: 16px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* Type */
h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
  margin: 0 0 0.4em;
}
h1 { font-size: clamp(44px, 7vw, 96px); line-height: 0.98; overflow-wrap: anywhere; }
h2 { font-size: clamp(32px, 4.4vw, 56px); }
h3 { font-size: clamp(20px, 2.4vw, 28px); }
.label, .mono {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.label { color: var(--bone-dim); }
.accent { color: var(--yellow); }
.lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; max-width: 60ch; color: var(--bone); }

/* Header */
.site-header {
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 50;
  background: var(--ground);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 64px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; }
.brand-virpp { height: 23px; width: auto; }
.brand-ade { height: 31px; width: auto; }
.wordmark {
  font-family: var(--display); font-size: 32px; letter-spacing: 0.04em;
  line-height: 1; color: var(--bone);
}
.brand .x, .x { font-family: var(--body); font-weight: 300; color: var(--bone-dim); font-size: 18px; line-height: 1; }
.site-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.site-nav a {
  font-family: var(--body); font-size: 14px; font-weight: 500;
  text-decoration: none; padding: 10px 12px; min-height: 44px; display: inline-flex; align-items: center; color: var(--bone-dim);
}
.site-nav a:hover { color: var(--bone); }
@media (max-width: 760px) { .site-nav .opt { display: none; } }

/* Sections */
section { border-bottom: 1px solid var(--rule); padding: clamp(48px, 7vw, 96px) 0; }
.section-head { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: clamp(24px, 4vw, 40px); }
.section-head .label { order: -1; }

/* Hero */
.hero { padding-top: clamp(40px, 7vw, 96px); }
.hero h1 { margin-bottom: 0.15em; }
.hero h1 .num { color: var(--yellow); display: block; }
.hero-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top: 1px solid var(--rule); margin-top: 40px;
}
.hero-meta div { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--rule); }
.hero-meta dt { margin: 0 0 4px; }
.hero-meta dd { margin: 0; font-family: var(--display); font-size: 26px; text-transform: uppercase; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; min-width: 44px; padding: 0 22px;
  font-family: var(--body); font-size: 15px; font-weight: 700;
  letter-spacing: 0.01em; text-decoration: none; line-height: 1.2;
  background: var(--yellow); color: var(--ground);
  border: 1px solid var(--yellow); border-radius: 0; cursor: pointer;
}
.btn:hover { background: var(--bone); border-color: var(--bone); color: var(--ground); }
.btn.ghost { background: transparent; color: var(--bone); border-color: #4A4A50; }
.btn.ghost:hover { border-color: var(--yellow); color: var(--yellow); }
.btn.small { min-height: 44px; padding: 0 14px; font-size: 14px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn.on { background: var(--yellow); color: var(--ground); border-color: var(--yellow); }

/* Steps / how it works */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.steps li { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 24px; }
.steps .n { font-family: var(--display); font-size: 64px; line-height: 1; color: var(--yellow); display: block; margin-bottom: 12px; }
.steps h3 { font-size: 26px; }

/* Rules */
.rules { list-style: none; counter-reset: r; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.rules li {
  counter-increment: r; display: grid; grid-template-columns: 64px 1fr; gap: 16px;
  padding: 20px 0; border-bottom: 1px solid var(--rule);
}
.rules li::before {
  content: counter(r, decimal-leading-zero);
  font-family: var(--mono); color: var(--yellow); font-size: 15px; padding-top: 4px;
}
.rules strong { font-family: var(--body); font-weight: 700; font-size: 17px; display: block; }

/* Forms */
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
.field { display: grid; gap: 6px; margin-bottom: 20px; align-content: start; }
.field label, .field .label-text, .field-label { font-family: var(--body); font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--bone); }
.field .hint, .hint { font-size: 13px; line-height: 1.45; color: var(--bone-dim); }
.field .hint { margin: 0; }
.req { color: var(--yellow); }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 14px;
  background: var(--ground); color: var(--bone);
  border: 1px solid var(--field-line); border-radius: 0;
  font: inherit; font-size: 16px; line-height: 1.4;
}
input::placeholder { color: #77757A; }
input:hover, select:hover { border-color: #55555B; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--yellow); outline: 1px solid var(--yellow); outline-offset: 0; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--error); }
input[type=file] {
  width: 100%; min-height: 48px; padding: 12px; color: var(--bone);
  background: var(--ground-2); border: 1px dashed #55555B; font: inherit; font-size: 15px;
}
input[type=file]::file-selector-button {
  font-family: var(--mono); text-transform: uppercase; font-weight: 700; font-size: 12px;
  background: var(--bone); color: var(--ground); border: 0; padding: 10px 14px; margin-right: 12px; cursor: pointer;
}
.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; padding: 12px 0; min-height: 44px; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.5; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--yellow); }
.check label { cursor: pointer; }
.err { color: var(--error); font-size: 13px; min-height: 0; margin: 0; }
.err:empty { display: none; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }

/* Wizard */
/* Wizard: see "Submission card" at the end of this file. */

.contest-switch { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); margin-bottom: 28px; }
.contest-switch button {
  background: transparent; color: var(--bone); border: 0; border-right: 1px solid var(--rule);
  min-height: 64px; padding: 12px 16px; text-align: left; cursor: pointer; font: inherit;
}
.contest-switch button:last-child { border-right: 0; }
.contest-switch button[aria-pressed="true"] { background: var(--yellow); color: var(--ground); }
.contest-switch button[aria-pressed="true"] .label { color: var(--ground); }
.contest-switch .name { font-family: var(--display); font-size: 24px; text-transform: uppercase; display: block; line-height: 1.05; }
.label-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 20px; }

.progress { height: 12px; background: var(--ground-2); border: 1px solid var(--rule); margin: 16px 0 8px; }
.progress > span { display: block; height: 100%; width: 0; background: var(--yellow); }
.status { font-family: var(--mono); font-size: 14px; }
.result { border: 1px solid var(--yellow); padding: 24px; margin-top: 20px; }
.result .id { font-family: var(--display); font-size: clamp(40px, 9vw, 72px); color: var(--yellow); line-height: 1; word-break: break-all; }
.result .sum { font-family: var(--mono); font-size: 12px; word-break: break-all; color: var(--bone-dim); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:first-child { border-top: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; min-height: 44px;
  font-family: var(--body); font-weight: 600; font-size: clamp(16px, 1.6vw, 18px); line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-family: var(--mono); color: var(--yellow); font-size: 22px; }
.faq details[open] summary::after { content: "-"; }
.faq details > div { padding: 0 0 20px; max-width: 70ch; color: var(--bone-dim); }

.two-col { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: start; }
.two-col .section-head { position: sticky; top: 96px; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; gap: 0; } .two-col .section-head { position: static; } }
.prose { max-width: 70ch; }
.prose ul { padding-left: 20px; }

/* Footer */
.site-footer { padding: 48px 0 40px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: flex-end; }
.site-footer nav a { display: inline-flex; min-height: 44px; align-items: center; margin-right: 18px; font-size: 14px; color: var(--bone-dim); }
.site-footer nav a:hover { color: var(--bone); }

/* Tables (jury / dashboard) */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bone-dim); font-weight: 400; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }

/* App pages */
.app-main { padding: 32px 0 80px; }
.panel { border: 1px solid var(--rule); padding: clamp(20px, 4vw, 32px); margin-bottom: 24px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin-bottom: 20px; }
.toolbar .field { margin: 0; min-width: 160px; flex: 1 1 160px; }
.counters { display: flex; gap: 0; flex-wrap: wrap; border: 1px solid var(--rule); margin-bottom: 20px; }
.counters div { padding: 12px 20px; border-right: 1px solid var(--rule); }
.counters div:last-child { border-right: 0; }
.counters b { font-family: var(--display); font-weight: 400; font-size: 32px; display: block; line-height: 1; }
.counters .full { color: var(--yellow); }
.tag { font-family: var(--mono); font-size: 11px; text-transform: uppercase; padding: 3px 6px; border: 1px solid var(--rule); white-space: nowrap; display: inline-block; }
.tag.held { border-color: var(--error); color: var(--error); }
.tag.review { border-color: var(--yellow); color: var(--yellow); }
.tag.passed { color: var(--ok); border-color: var(--ok); }
.actions { display: flex; flex-wrap: wrap; gap: 6px; }
audio { width: 100%; max-width: 360px; height: 44px; margin-top: 6px; }
.notice { border-left: 3px solid var(--yellow); padding: 10px 14px; background: var(--ground-2); margin-bottom: 20px; }
.notice.error { border-color: var(--error); }

/* Submission cards for jury on small screens */
.sub-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.sub-item { display: grid; grid-template-columns: 1fr auto; gap: 12px 20px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.sub-item .t { font-family: var(--display); text-transform: uppercase; font-size: 24px; line-height: 1.05; }
.sub-item .meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; font-size: 14px; color: var(--bone-dim); }
.sub-item .players { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 640px) { .sub-item { grid-template-columns: 1fr; } }

/* Dashboard */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); margin-bottom: 32px; }
.kpi { padding: 20px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.kpi .v { font-family: var(--display); font-size: clamp(44px, 7vw, 72px); line-height: 1; display: block; margin-top: 8px; font-variant-numeric: tabular-nums; }
.kpi.hl .v { color: var(--yellow); }
.chart-wrap { border: 1px solid var(--rule); padding: 16px; margin-bottom: 32px; }
.chart-wrap svg { width: 100%; height: auto; display: block; }
.chart-wrap svg text { fill: var(--bone-dim); font-family: var(--mono); font-size: 11px; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.bar-cell { display: flex; align-items: center; gap: 10px; }
.bar-cell span.bar { height: 8px; background: var(--yellow); display: inline-block; min-width: 2px; }

.center-page { min-height: 70vh; display: flex; align-items: center; }
.big-status { font-family: var(--display); text-transform: uppercase; font-size: clamp(48px, 12vw, 120px); line-height: 0.95; }

.page-title { font-size: clamp(48px, 10vw, 112px); }
.panel-title { font-size: 36px; }
.login-panel { max-width: 520px; }
.code-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.code-sent { color: var(--bone); margin: 0 0 12px; }
.login-panel #totp-code { font-family: var(--mono); letter-spacing: 0.3em; font-size: 20px; }
section.bare, section.panel { border-bottom: 0; padding: 0; }
section.panel { padding: clamp(20px, 4vw, 32px); border: 1px solid var(--rule); }
.gap-top { margin-top: 32px; }
.dash-grid .panel-title { font-size: 28px; margin-top: 8px; }
.chart { position: relative; }
.chart-wrap { position: relative; margin-left: 0; margin-right: 0; }
.chart-tip {
  position: absolute; pointer-events: none; background: var(--ground); color: var(--bone);
  border: 1px solid var(--bone-dim); padding: 6px 10px; font-size: 12px; white-space: nowrap; z-index: 2; margin: 0;
}
.chart-table { margin-top: 12px; }
.chart-table summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.chart-wrap svg .grid { stroke: var(--rule); stroke-width: 1; }
.chart-wrap svg .line { fill: none; stroke: var(--yellow); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-wrap svg .dot { fill: var(--yellow); stroke: var(--ground); stroke-width: 2; }
.chart-wrap svg .cross { stroke: var(--bone-dim); stroke-width: 1; }
.stepup { border-top: 1px solid var(--rule); margin-top: 20px; padding-top: 20px; max-width: 640px; }
.stepup-title { font-family: var(--display); text-transform: uppercase; font-size: 24px; line-height: 1.1; margin-bottom: 8px; }
.stepup-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 12px; }
.stepup-row .field { margin: 0; flex: 0 1 200px; }
.stepup-row #stepup-code { font-family: var(--mono); letter-spacing: 0.3em; font-size: 20px; }
.stepup .err { margin-top: 10px; }
#export-status { margin-top: 12px; }
#export-status:empty { display: none; }

/* Admin export panel + offline picks import */
.export-title { font-family: var(--display); text-transform: uppercase; font-size: 28px; line-height: 1.1; margin: 0 0 8px; }
.export-panel > .hint { color: var(--bone-dim); max-width: 70ch; margin-bottom: 16px; }
.export-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 16px; align-items: start; }
.export-grid .field { align-content: start; }
.export-grid .field { margin-bottom: 12px; }
.export-check { border-bottom: 0; padding: 4px 0 12px; }
.export-preview { font-family: var(--mono); font-size: 15px; margin: 4px 0 12px; }
.export-preview b { color: var(--yellow); font-weight: 700; }
.export-preview.warn { color: var(--error); }
.import-box { border-top: 1px solid var(--rule); margin-top: 24px; padding-top: 20px; max-width: 760px; }
.import-box .field { margin-bottom: 12px; }
.import-results { list-style: none; margin: 12px 0 0; padding: 0; font-family: var(--mono); font-size: 13px; max-height: 320px; overflow: auto; }
.import-results li { padding: 6px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 4ch 14ch 1fr; gap: 10px; }
.import-results .applied { color: var(--ok); }
.import-results .conflict, .import-results .error { color: var(--error); }
.import-results .unchanged { color: var(--bone-dim); }
@media (max-width: 560px) { .import-results li { grid-template-columns: 4ch 1fr; } .import-results li span:last-child { grid-column: 1 / -1; } }

/* ---------- Session chooser (landing) ---------- */
.hero-more { margin-top: 24px; max-width: 60ch; color: var(--bone-dim); }
.hero-more a { color: var(--bone); }
.choose { border: 0; padding: 0; margin: 0 0 32px; }
.choose-title { font-size: clamp(28px, 5vw, 44px); margin-bottom: 8px; }
.choose-intro { color: var(--bone-dim); max-width: 64ch; }
.session-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
@media (max-width: 820px) { .session-cards { grid-template-columns: 1fr; } }
.session-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--rule); background: var(--ground); padding: clamp(18px, 3vw, 28px); cursor: pointer;
}
.session-card:hover { border-color: var(--bone-dim); }
.session-card.is-selected { border: 2px solid var(--yellow); padding: calc(clamp(18px, 3vw, 28px) - 1px); }
.session-card:focus-within { outline: 3px solid var(--yellow); outline-offset: 3px; }
.session-card.is-disabled { cursor: not-allowed; opacity: 0.62; }
.session-card.is-disabled:hover { border-color: var(--rule); }
.session-card-head { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: start; }
.session-radio { width: 26px; height: 26px; margin: 6px 0 0; accent-color: var(--yellow); cursor: pointer; }
.session-radio:focus-visible { outline: none; } /* focus ring is drawn on the whole card */
.session-label { cursor: pointer; display: block; min-width: 0; }
.session-card.is-disabled .session-label, .session-card.is-disabled .session-radio { cursor: not-allowed; }
.session-name { display: block; font-family: var(--display); text-transform: uppercase; font-size: clamp(30px, 5vw, 46px); line-height: 0.95; margin-top: 6px; overflow-wrap: anywhere; }
.session-badge {
  font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 4px 8px; border: 1px solid var(--ok); color: var(--ok); white-space: nowrap;
}
.session-badge[data-state="full"], .session-badge[data-state="closed"] { border-color: var(--error); color: var(--error); }
.session-lede { font-size: 18px; margin: 16px 0 12px; }
.session-facts { margin: 0 0 20px; border-top: 1px solid var(--rule); }
.session-facts div { display: grid; grid-template-columns: 9.5em 1fr; gap: 4px 14px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
@media (max-width: 480px) { .session-facts div { grid-template-columns: 1fr; } }
.session-facts dt { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bone-dim); padding-top: 3px; }
.session-facts dd { margin: 0; }
.session-state {
  margin: auto 0 0; min-height: 48px; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  border: 1px solid var(--bone); color: var(--bone);
}
.session-state .when-on, .session-state .when-disabled { display: none; }
.session-card.is-selected .session-state { background: var(--yellow); border-color: var(--yellow); color: var(--ground); }
.session-card.is-selected .when-on { display: inline; }
.session-card.is-selected .when-off { display: none; }
.session-card.is-disabled .session-state { border-color: var(--error); color: var(--error); }
.session-card.is-disabled .when-off { display: none; }
.session-card.is-disabled .when-disabled { display: inline; }
.wizard-hint { margin-top: 8px; }
.wizard-session { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 12px clamp(16px, 3vw, 24px); border-bottom: 1px solid var(--rule); background: var(--ground-2); }
.wizard-session-text { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.wizard-session strong { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 24px; color: var(--yellow); letter-spacing: 0.01em; }

/* ---------- Sessions overview page ---------- */
.sessions-hero { padding-top: clamp(32px, 6vw, 80px); }
.sessions-hero h1 { font-size: clamp(44px, 11vw, 140px); }
.sessions-hero .dates { color: var(--yellow); display: block; }
.ov-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) { .ov-cards { grid-template-columns: 1fr; } }
.ov-card { border: 1px solid var(--rule); padding: clamp(18px, 3vw, 28px); display: flex; flex-direction: column; min-width: 0; }
.ov-card h3 { font-size: clamp(30px, 5vw, 46px); margin: 6px 0 12px; }
.ov-card .session-facts { margin-bottom: 20px; }
.ov-card .cta-row { margin-top: auto; }
.ov-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.btn[aria-disabled="true"] { pointer-events: none; }
.programme { list-style: none; margin: 8px 0 0; padding: 30px 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; position: relative; }
.programme::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--rule); }
.programme > li { position: relative; background: var(--card); border: 1px solid var(--rule); padding: 16px; min-width: 0; }
.programme > li[hidden] { display: none; }
.programme > li::before { content: ""; position: absolute; left: 16px; top: -30px; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--bone-dim); background: var(--ground); }
.programme > li.key { border-color: var(--yellow); }
.programme > li.key::before { border-color: var(--yellow); background: var(--yellow); box-shadow: 0 0 0 6px rgba(255, 255, 0, 0.14); }
.programme > li.key .date { color: var(--yellow); }
.programme > li.open::before { border-color: var(--yellow); }
@media (max-width: 760px) {
  .programme { grid-auto-flow: row; grid-auto-columns: auto; padding: 0 0 0 32px; gap: 10px; }
  .programme::before { left: 8px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .programme > li::before { left: -32px; top: 18px; }
}
.programme .day { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bone-dim); }
.programme .date { font-family: var(--display); font-size: 40px; line-height: 1; display: block; margin: 4px 0 10px; }
.programme ul { list-style: none; margin: 0; padding: 0; }
.programme ul li { padding: 10px 0 0; border-top: 1px solid var(--rule); font-size: 15px; }
.programme ul li b { display: block; font-weight: 600; }
.programme .tbc { font-family: var(--mono); font-size: 11px; text-transform: uppercase; border: 1px solid var(--bone-dim); color: var(--bone-dim); padding: 1px 5px; margin-left: 4px; white-space: nowrap; }
.programme .meta-line { color: var(--bone-dim); font-size: 14px; display: block; }
.programme .empty-day { color: var(--bone-dim); font-size: 14px; }
/* Phased journey timeline (How it works / How selection works) */
.journey { list-style: none; margin: 0; padding: 0; position: relative; }
.journey > .phase { position: relative; padding: 0 0 36px 40px; }
.journey > .phase:last-child { padding-bottom: 0; }
.journey > .phase::before { content: ""; position: absolute; left: 8px; top: 22px; bottom: -2px; width: 2px; background: linear-gradient(var(--yellow), var(--rule) 70%); }
.journey > .phase:last-child::before { display: none; }
.journey > .phase::after { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--yellow); background: var(--ground); }
.journey > .phase.key::after { background: var(--yellow); box-shadow: 0 0 0 6px rgba(255, 255, 0, 0.14); }
.phase-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 14px; }
.phase-when { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--yellow); border: 1px solid var(--yellow); padding: 3px 8px; white-space: nowrap; }
.phase.key .phase-when { background: var(--yellow); color: var(--ground); }
.phase-title { font-family: var(--display); font-size: clamp(26px, 3vw, 34px); line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; margin: 0; }
.phase-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.phase-steps li { background: var(--card); border: 1px solid var(--rule); padding: 14px 16px; min-width: 0; }
.phase.key .phase-steps li { border-color: rgba(255, 255, 0, 0.45); }
.phase-steps h4 { font-family: var(--body); text-transform: none; letter-spacing: 0; font-size: 16px; font-weight: 700; line-height: 1.35; margin: 0 0 4px; }
.phase-steps p { margin: 0; color: var(--bone-dim); font-size: 15px; line-height: 1.5; }
@media (max-width: 560px) { .journey > .phase { padding-left: 32px; } .phase-steps { grid-template-columns: 1fr; } }
.timeline { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.timeline li { counter-increment: t; display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--rule); position: relative; }
.timeline li:first-child { border-top: 1px solid var(--rule); }
.timeline li::before { content: counter(t, decimal-leading-zero); font-family: var(--mono); font-size: 13px; line-height: 1.9; color: var(--yellow); }
.timeline h3 { font-family: var(--body); text-transform: none; font-weight: 700; font-size: 17px; line-height: 1.4; letter-spacing: 0; margin: 0 0 2px; }
.timeline p { margin: 0; color: var(--bone-dim); }
.partners { max-width: 70ch; }
.label-names { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.label-names li { font-family: var(--display); text-transform: uppercase; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.1; }
.faq-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.faq-links a { display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 56px; padding: 10px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-family: var(--display); text-transform: uppercase; font-size: clamp(18px, 3vw, 26px); line-height: 1.15; }
.faq-links a::after { content: "\2192"; font-family: var(--mono); color: var(--yellow); }
.site-nav a[aria-current="page"] { color: var(--yellow); }
.tbc-title { font-size: 24px; margin: 28px 0 8px; }
.tbc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.tbc-list li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.tbc-list b { display: block; font-weight: 600; }
.tbc-list .meta-line, .programme .meta-line { color: var(--bone-dim); font-size: 14px; display: block; }

/* ---------- ADE partner strip, breadcrumbs, footer note ---------- */
.ade-strip { border-bottom: 1px solid var(--rule); background: var(--ground-2); }
.ade-strip .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
.ade-strip img { width: 40px; height: 40px; flex: none; }
.ade-strip p { margin: 0; flex: 1 1 260px; font-size: 15px; }
.ade-strip strong { color: var(--yellow); font-weight: 600; }
.ade-strip a { font-family: var(--mono); font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; overflow-wrap: anywhere; }
.breadcrumbs { padding-top: 16px; padding-bottom: 0; }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }
.breadcrumbs li + li::before { content: "/"; padding: 0 10px; color: var(--bone-dim); }
.breadcrumbs a { min-height: 44px; display: inline-flex; align-items: center; }
.breadcrumbs a[aria-current="page"] { color: var(--bone-dim); text-decoration: none; }
.ade-note { color: var(--bone-dim); font-size: 14px; max-width: 60ch; margin-top: 12px; }
.site-footer.slim { padding: 24px 0 40px; border-top: 1px solid var(--rule); }
.site-footer.slim .wrap { display: block; }
.session-more { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.ade-link { font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; min-height: 44px; display: inline-flex; align-items: center; }
.ov-card .cta-row { gap: 12px; }
.faq-more { margin-top: 20px; }

/* ---------- Embed kit page ---------- */
.kit-toc ol { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.kit-toc a { display: flex; min-height: 48px; align-items: center; border-bottom: 1px solid var(--rule); text-decoration: none; font-family: var(--mono); font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; }
.kit-section { border: 0; border-top: 1px solid var(--rule); padding: 48px 0 8px; margin-top: 40px; }
.kit-h { font-size: clamp(32px, 6vw, 56px); }
.kit-h3 { font-size: 22px; margin: 28px 0 10px; }
.kit-variant { margin-top: 12px; }
.kit-stage { display: flex; flex-wrap: wrap; gap: 12px; padding: 24px; border: 1px solid var(--rule); }
.kit-code { position: relative; margin-top: 10px; }
.kit-code pre { margin: 0; padding: 14px 14px 56px; background: var(--ground-2); border: 1px solid var(--rule); font-family: var(--mono); font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-all; max-height: 240px; overflow: auto; }
.kit-code .kit-copy { position: absolute; right: 8px; bottom: 8px; background: var(--ground); }
.kit-options div { display: grid; grid-template-columns: 12em 1fr; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
@media (max-width: 520px) { .kit-options div { grid-template-columns: 1fr; } }
.kit-options dd { margin: 0; }
code { font-family: var(--mono); font-size: 0.92em; color: var(--yellow); overflow-wrap: anywhere; }
.kit-preview-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.kit-preview { border: 1px dashed var(--bone-dim); padding: 12px; background: var(--ground); }
.kit-preview.light { background: #FFFFFF; }
.kit-preview iframe { display: block; border: 0; width: 100%; background: transparent; }
.kit-assets { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.kit-assets li { display: grid; grid-template-columns: 96px 1fr auto; gap: 8px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.kit-assets li > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.kit-assets .hint { overflow-wrap: anywhere; font-size: 13px; }
@media (max-width: 560px) { .kit-assets li { grid-template-columns: 72px 1fr; } .kit-assets li .btn { grid-column: 1 / -1; justify-self: start; } }
.kit-thumb { display: block; width: 96px; height: 50px; background: repeating-conic-gradient(#1a1a1d 0 25%, #26262a 0 50%) 0 0 / 12px 12px; border: 1px solid var(--rule); }
@media (max-width: 560px) { .kit-thumb { width: 72px; height: 38px; } }
.kit-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kit-rules { padding-left: 20px; }
.kit-rules li { margin-bottom: 10px; max-width: 75ch; }
/* Reserve space for async content so it doesn't shift the layout when data arrives. */
.chart { min-height: 220px; }
@media (min-width: 541px) { .chart { min-height: 300px; } }
.kpi .v { min-height: 1em; }
#live-status:empty::before, #updated:empty::before { content: "\00a0"; }
/* Dashboard: the not-logged-in/error notice gets a reserved slot so the KPIs don't jump when it appears. */
.dash-msg { min-height: 64px; margin-bottom: 20px; }
.dash-msg .notice { margin: 0; }

/* ---------- Overview + detail pages (IA v2) ---------- */
.ov-hero h1 .num { display: block; font-size: 0.42em; line-height: 1.05; margin-top: 0.2em; }
.opps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) { .opps { grid-template-columns: 1fr; } }
.opp { border: 1px solid var(--rule); padding: clamp(18px, 3vw, 28px); display: flex; flex-direction: column; min-width: 0; }
.opp-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.opp-name { font-size: clamp(32px, 5vw, 48px); margin: 8px 0 8px; }
.opp-lede { font-size: 18px; margin-bottom: 8px; }
.opp-urgency, .opp-countdown { font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--yellow); margin: 0 0 4px; min-height: 1.4em; }
.opp-urgency:empty, .opp-countdown:empty { min-height: 1.4em; }
.opp .session-facts { margin: 12px 0 20px; }
.opp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.opp-ade { margin: 8px 0 0; }
.both-note { margin-top: 20px; border: 1px dashed var(--yellow); padding: 16px 20px; max-width: 760px; }
.both-note p { margin: 0; }
.both-title { font-family: var(--display); text-transform: uppercase; font-size: 26px; color: var(--yellow); margin-bottom: 4px !important; }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 15px; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
.hero-countdown { margin: 0; font-family: var(--mono); font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--yellow); min-height: 1.4em; }
.hero-countdown.urgent { color: var(--error); }
.trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
@media (max-width: 860px) { .trust { grid-template-columns: 1fr 1fr; } }
.trust li { padding: 14px var(--gutter); border-right: 1px solid var(--rule); font-size: 14px; color: var(--bone-dim); }
.trust li:last-child { border-right: 0; }
@media (max-width: 860px) { .trust li:nth-child(2n) { border-right: 0; } .trust li:nth-child(-n+2) { border-bottom: 1px solid var(--rule); } }
.trust b { display: block; color: var(--bone); font-weight: 600; font-size: 15px; }
.proof { padding: clamp(32px, 6vw, 56px) 0; }
.proof-title { font-size: clamp(24px, 4vw, 32px); }
.proof-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
@media (max-width: 640px) { .proof-list { grid-template-columns: 1fr; } }
.proof-list li { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 2px; }
.proof-list b { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 30px; line-height: 1.05; }
.proof-list li:last-child b { color: var(--yellow); }
.sub-h { font-family: var(--body); text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 18px; line-height: 1.4; margin: 28px 0 6px; }
.gets { padding-left: 20px; }
.gets li { margin-bottom: 10px; }
.label-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .label-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .label-cards { grid-template-columns: 1fr; } }
.label-card { border: 1px solid var(--rule); padding: 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.label-logo-slot { height: 64px; display: flex; align-items: center; border: 1px dashed var(--rule); padding: 0 12px; color: var(--bone-dim); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.label-card-name { font-size: clamp(26px, 3vw, 32px); margin: 0; overflow-wrap: anywhere; }
.genre-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.genre-tags li { font-family: var(--mono); font-size: 12px; text-transform: uppercase; border: 1px solid var(--bone-dim); padding: 3px 7px; }
.tbc-flag { margin: 0; font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--yellow); }
.label-card .btn { margin-top: auto; align-self: flex-start; }
.labels-hint { margin-bottom: 16px; }
.places-meter { margin-top: 24px; max-width: 520px; }
.places-big { margin: 0 0 8px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.05em; }
.places-big b { font-family: var(--display); font-weight: 400; font-size: 56px; line-height: 1; color: var(--yellow); margin-right: 8px; letter-spacing: 0; }
.meter { height: 10px; border: 1px solid var(--rule); background: var(--ground-2); }
.meter span { display: block; height: 100%; width: 0; background: var(--yellow); }
.places-meter.urgent .places-big b, .places-meter.urgent .meter span { color: var(--error); background-color: var(--error); }
.places-meter.urgent .places-big b { background: none; }
.dates dd.hint { grid-column: 2; color: var(--bone-dim); font-size: 14px; }
.submit-section { background: var(--ground-2); }
.submit-section .wizard { background: var(--ground); }
.submit-intro { max-width: 64ch; }
.submit-live { font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--yellow); min-height: 1.4em; }
.cross-sell { border: 2px solid var(--yellow); padding: 20px; margin-top: 16px; }
.cross-sell p { margin: 0 0 12px; }
.cross-title { font-family: var(--display); text-transform: uppercase; font-size: 30px; line-height: 1; color: var(--yellow); }
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--ground); border-top: 2px solid var(--yellow); padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); }
.sticky-cta .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sticky-text { margin: 0; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--yellow); }
.sticky-cta.closed { display: none; }
@media (min-width: 900px) { .sticky-cta { display: none; } }
body[data-page="demolition"] .site-footer, body[data-page="label-session"] .site-footer { padding-bottom: 96px; }
.wizard-session .ade-link { min-height: 44px; }
/* Header: three nav items; on small screens the nav gets its own row under the brand (no overlap). */
@media (max-width: 640px) {
  .site-header { position: static; }
  .site-header .wrap { flex-wrap: wrap; gap: 0 12px; padding-top: 6px; min-height: 0; }
  .site-header .site-nav { justify-content: space-between; border-top: 1px solid var(--rule); margin: 6px calc(-1 * var(--gutter)) 0; padding: 0 calc(var(--gutter) - 8px); width: calc(100% + 2 * var(--gutter)); }
  .site-header .site-nav a { padding: 8px; font-size: 14px; }
  .brand-virpp { height: 21px; }
  .brand-ade { height: 28px; }
}
.site-nav a[aria-current="page"] { color: var(--yellow); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }


/* =====================================================================================
   v3 — "ADE Official Demo Drop": calmer ADE base + VIRPP identity (Oct 2026)
   ===================================================================================== */
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--yellow); margin: 0 0 12px; }
.hero { padding-top: clamp(24px, 3vw, 36px); padding-bottom: clamp(40px, 5vw, 64px); }
.hero h1 { margin-bottom: 14px; }
.hero h1 .num { color: var(--yellow); display: inline; }
.hero .lede { margin-bottom: 0; }

/* ADE partner line (was the full-width ADE strip) */
.ade-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0 0 18px; font-size: 13px; color: var(--bone-dim); }
.ade-line strong { color: var(--bone); font-weight: 600; }
.ade-line strong::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--yellow); margin-right: 8px; vertical-align: 1px; }
.ade-line a { color: var(--bone-dim); min-height: 32px; display: inline-flex; align-items: center; }
.ade-line a:hover { color: var(--yellow); }
.ov-hero .ade-line { margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); }
.dt-text .ade-line { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); }

/* Overview hero: the two sessions directly under the headline */
.ov-hero h1 { margin-bottom: 12px; }
.ov-hero .lede { max-width: 72ch; font-size: clamp(16px, 1.45vw, 18px); }
.opps { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(20px, 2.4vw, 28px); }
@media (max-width: 820px) { .opps { grid-template-columns: 1fr; gap: 16px; } }
/* One session on the overview (the Live A&R Listening Room has its own, unlisted page) */
.opps.opps-single { grid-template-columns: minmax(0, 760px); }
.opp { border: 1px solid var(--rule); background: var(--card); display: flex; flex-direction: column; min-width: 0; padding: 0; scroll-margin-top: 80px; }
.opp-media { display: block; overflow: hidden; border-bottom: 1px solid var(--rule); background: var(--ground-2); }
.opp-media img { width: 100%; height: auto; aspect-ratio: 16 / 3.6; object-fit: cover; }
@media (max-width: 820px) { .opp-media img { aspect-ratio: 16 / 6; } }
.opp-body { padding: 18px 24px 20px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.opp-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.opp-name { font-size: clamp(30px, 3vw, 38px); margin: 8px 0 4px; line-height: 1; }
.opp-lede { font-size: 15px; color: var(--bone-dim); margin: 0 0 12px; max-width: 52ch; }
.opp-facts { margin: 0 0 12px; border-top: 1px solid var(--rule); }
.opp-facts div { display: grid; grid-template-columns: 7.5em 1fr; gap: 2px 12px; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 14px; line-height: 1.45; }
.opp-facts dt { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bone-dim); padding-top: 2px; }
.opp-facts dd { margin: 0; min-width: 0; }
.opp-live { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 12px; min-height: 1.4em; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--yellow); }
.opp-places.urgent { color: var(--error); }
.opp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: auto; }
.opp-cta .ade-link { margin-left: auto; font-size: 12px; color: var(--bone-dim); }
.opp-cta .ade-link:hover { color: var(--yellow); }
@media (max-width: 480px) { .opp-body { padding: 18px 16px 18px; } .opp-cta .btn { flex: 1 1 auto; } .opp-cta .ade-link { margin-left: 0; } .opp-facts div { grid-template-columns: 1fr; } }
.session-badge { font-size: 11px; padding: 3px 8px; }
.both-note { margin: 16px 0 0; border: 0; padding: 0; max-width: none; font-size: 14px; color: var(--bone-dim); }
.both-note b { color: var(--bone); font-weight: 600; }
.ov-hero .status { margin: 6px 0 0; font-size: 12px; color: var(--bone-dim); }

/* ADE 2025 photo row */
.photo-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .photo-row { grid-template-columns: 1fr; } }
.photo-row figure { margin: 0; }
.photo-row img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--ground-2); }
.photo-row figcaption { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--bone-dim); padding-top: 8px; }

/* Partners */
.partner-logos { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.partner-ade { height: 64px; width: auto; }
.partner-virpp { height: 30px; width: auto; }
.label-names { margin: 16px 0 12px; }

/* Detail pages: slim key-visual band + hero with the submission card on the right */
.kv-band { height: clamp(64px, 9vw, 120px); overflow: hidden; border-bottom: 1px solid var(--rule); background: var(--ground-2); }
.kv-band picture, .kv-band img { display: block; width: 100%; height: 100%; }
.kv-band img { object-fit: cover; object-position: center 40%; opacity: 0.9; }
.dt-hero { padding-top: 20px; }
.dt-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 1000px) {
  .dt-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
  .dt-text { position: sticky; top: 88px; }
}
.dt-hero h1 { font-size: clamp(40px, 6vw, 80px); }
.dt-hero .breadcrumbs { padding: 0; margin-bottom: 18px; }
.breadcrumbs ol { font-size: 12px; }
.breadcrumbs a { min-height: 32px; }
.hero-facts { margin: 24px 0 0; border-top: 1px solid var(--rule); }
.hero-facts div { display: grid; grid-template-columns: 8.5em 1fr; gap: 2px 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.hero-facts dt { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bone-dim); padding-top: 3px; }
.hero-facts dd { margin: 0; min-width: 0; }
.dt-hero .hero-cta { margin-top: 14px; }
.hero-countdown { font-size: 12px; }
.places-meter { margin-top: 20px; max-width: none; }
.places-big b { font-size: 40px; }

/* Submission card (wizard) */
.hero-form { min-width: 0; scroll-margin-top: 80px; }
.submit-card { background: var(--card); border: 1px solid var(--rule); }
.submit-card-head { padding: 22px clamp(20px, 3vw, 32px) 18px; border-bottom: 1px solid var(--rule); }
.submit-card-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; }
.submit-card-row .label { margin: 0; color: var(--yellow); }
.also-link { font-size: 13px; color: var(--bone-dim); min-height: 32px; display: inline-flex; align-items: center; }
.also-link:hover { color: var(--yellow); }
.submit-card-title { font-size: clamp(28px, 3vw, 36px); line-height: 1; margin: 6px 0 8px; }
.submit-intro { font-size: 14px; color: var(--bone-dim); margin: 0; max-width: 60ch; }
.submit-live { margin: 6px 0 0; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--yellow); min-height: 0; }
.submit-live:empty { display: none; }
.submit-card > noscript .notice { margin: 16px clamp(20px, 3vw, 32px) 0; }

.wizard { border: 0; }
.wizard-progress-wrap { padding: 18px clamp(20px, 3vw, 32px) 0; }
.wizard-progress { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.wizard-progress li { display: grid; gap: 8px; font-size: 12px; font-weight: 600; color: var(--bone-dim); min-width: 0; }
.wizard-progress .bar { display: block; height: 3px; background: var(--rule); }
.wizard-progress li.done .bar { background: var(--bone); }
.wizard-progress li.done { color: var(--bone); }
.wizard-progress li[aria-current="step"] .bar { background: var(--yellow); }
.wizard-progress li[aria-current="step"] { color: var(--yellow); }
.wizard-progress .t { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) { .wizard-progress .t-long { display: none; } }
.step-count { margin: 10px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone-dim); }
.wizard-body { padding: 18px clamp(20px, 3vw, 32px) clamp(20px, 3vw, 28px); }
.wizard legend { width: 100%; }
.wizard legend h3 { font-family: var(--body); text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 18px; line-height: 1.3; margin: 0 0 16px; }
.wizard legend h3:focus { outline: none; }
.wizard legend h3:focus-visible { outline: 3px solid var(--yellow); }
.wizard .notice { font-size: 14px; }

/* Drop zone: the visible <label for="track">; the real file input is visually hidden but focusable */
.dropzone { position: relative; }
.dz-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.dz-zone {
  display: grid; justify-items: center; gap: 4px; text-align: center; cursor: pointer;
  padding: 26px 16px 24px; border: 1px dashed #55555B; background: var(--ground); color: var(--bone);
  transition: border-color .15s, background-color .15s;
}
.dz-zone:hover, .dropzone.is-over .dz-zone { border-color: var(--yellow); background: #18180F; }
.dz-input:focus-visible + .dz-zone { outline: 3px solid var(--yellow); outline-offset: 2px; border-color: var(--yellow); }
.dz-input[aria-invalid="true"] + .dz-zone { border-color: var(--error); }
.dz-icon { color: var(--yellow); margin-bottom: 6px; }
.dz-title { font-size: 16px; font-weight: 700; }
.dz-sub { font-size: 13px; color: var(--bone-dim); }
.dz-browse { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; }
.dz-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--field-line); background: var(--ground); }
.dropzone.is-over .dz-file { border-color: var(--yellow); }
.dz-file-icon { color: var(--yellow); }
.dz-meta { display: grid; min-width: 0; }
.dz-name { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-size { font-size: 13px; color: var(--bone-dim); }
.link-btn { background: none; border: 0; padding: 0 4px; min-height: 44px; color: var(--bone); font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--yellow); }
.link-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.label-picker { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--rule); }
.label-picker > legend { margin: 0; padding: 0; }
.label-picker > .hint { margin: 2px 0 6px; }
.label-list { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 16px; }
.label-list .check { border-bottom: 1px solid var(--rule); }

.wizard-nav { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 20px; margin-top: 4px; }
.wizard-nav .back { margin-right: auto; }
.wizard-nav .btn { min-width: 160px; }
@media (max-width: 560px) {
  .wizard-nav { flex-direction: column-reverse; align-items: stretch; }
  .wizard-nav .btn { width: 100%; }
  .wizard-nav .back { margin: 0; align-self: center; }
}

/* Review step */
.review { display: grid; gap: 10px; margin-bottom: 18px; }
.review-group { border: 1px solid var(--rule); background: var(--ground); padding: 10px 14px 6px; }
.review-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.review-head h4 { margin: 0; font-size: 12px; font-family: var(--mono); font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bone-dim); }
.review-head .link-btn { min-height: 36px; font-size: 13px; }
.review dl { margin: 0; }
.review dl div { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: 2px 12px; padding: 5px 0; font-size: 14px; border-top: 1px solid var(--rule); }
.review dl div:first-child { border-top: 0; }
.review dt { color: var(--bone-dim); }
.review dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .review dl div { grid-template-columns: 1fr; } }
.review-confirm { margin: 8px 0 0; }

.result { background: var(--ground); }
.result .id { font-size: clamp(32px, 5vw, 48px); }
.cross-sell { border-width: 1px; background: var(--ground); }
.cross-title { font-size: 24px; }

/* Under the card */
.wizard-foot { margin: 14px 0 0; font-size: 13px; color: var(--bone-dim); text-align: center; }
.powered { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 0 0; font-size: 12px; color: var(--bone-dim); }
.powered img { height: 14px; width: auto; }
.powered-name { color: var(--virpp); font-weight: 700; letter-spacing: 0.02em; }

/* Detail page sections below the hero */
.proof { border-top: 1px solid var(--rule); }
.proof-list b { font-size: 26px; }
.label-card-name { font-size: clamp(22px, 2.2vw, 26px); }

/* Footer */
.site-footer { border-top: 0; }
.site-footer .wrap { align-items: flex-start; }
.footer-logos { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.footer-logos img:first-child { height: 40px; width: auto; }
.footer-logos img:last-child { height: 20px; width: auto; }
.site-footer nav { max-width: 520px; }
.footer-base { flex-basis: 100%; border-top: 1px solid var(--rule); padding-top: 16px; display: flex; justify-content: flex-start; }
.footer-base .powered { margin: 0; justify-content: flex-start; }
.footer-base { flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; }
.built-by { margin: 0; font-size: 12px; color: var(--bone-dim); }
.built-by a { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; }
.built-by a:hover, .built-by a:focus-visible { color: var(--yellow); }


/* ==============================================================================   v4 — one-page submission form (Oct 2026): three sections that open in turn, waveform fragment picker
   ===================================================================================== */
/* Calm detail hero: facts, then one compact meta row (countdown · places · partner line) */
.hero-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--bone-dim); }
.hero-meta-row:empty { display: none; }
.hero-meta-row .hero-countdown, .hero-meta-row .hero-places { margin: 0; min-height: 0; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--yellow); }
.hero-meta-row .hero-countdown:empty, .hero-meta-row .hero-places:empty { display: none; }
.hero-meta-row .hero-places.urgent { color: var(--error); }
.hero-meta-row .ade-line { margin: 0; padding: 0; border: 0; font-size: 13px; gap: 2px 8px; }
.hero-meta-row .ade-line a { min-height: 32px; }
.dt-text .hero-facts { margin-top: 20px; }

/* Venue photo (Demolition) */
.venue-photo { margin: 0 0 24px; }
.venue-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--ground-2); }
.venue-photo figcaption { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--bone-dim); padding-top: 8px; }

/* Card head */
.submit-card-title { font-size: clamp(26px, 2.8vw, 34px); }
.submit-card-time { color: var(--bone-dim); font-size: 0.62em; letter-spacing: 0.02em; white-space: nowrap; }
.submit-intro { color: var(--bone); }

/* Sections */
.sform .wizard-body { padding-top: 6px; }
.fsec { border-bottom: 1px solid var(--rule); padding: 0; scroll-margin-top: 80px; }
.fsec:last-of-type { border-bottom: 0; }
.fsec-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 16px 0; }
.fsec-title { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--body); text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 18px; line-height: 1.3; }
.fsec-title:focus { outline: none; }
.fsec-title:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.fsec-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--bone-dim); font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--bone-dim); }
.fsec.is-open .fsec-num { background: var(--yellow); border-color: var(--yellow); color: var(--ground); }
.fsec.is-done .fsec-num { background: var(--bone); border-color: var(--bone); color: var(--ground); }
.fsec.is-locked .fsec-title { color: var(--bone-dim); }
.fsec-summary { grid-column: 1; margin: 0 0 0 40px; font-size: 14px; color: var(--bone-dim); overflow-wrap: anywhere; }
.fsec-edit { grid-column: 2; grid-row: 1 / span 2; }
.fsec-body { padding: 0 0 20px; }
.fsec-nav { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; padding-top: 8px; }
.fsec-nav .btn { min-width: 160px; }
@media (max-width: 560px) { .fsec-nav .btn { width: 100%; } }

/* Drop zone when the session is closed or full */
.dropzone.is-disabled .dz-zone { opacity: 0.45; cursor: not-allowed; }

/* Player + waveform + fragment window */
.player { margin: -4px 0 20px; }
.player-status { margin: 0 0 10px; font-size: 13px; color: var(--bone-dim); }
.player-status:empty { display: none; }
.player-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 10px; }
.player-bar .btn { min-height: 44px; }
.player-time { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--bone-dim); font-variant-numeric: tabular-nums; }
.play-btn .pi { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.player.is-playing .play-btn[aria-pressed="true"] .pi { width: 10px; height: 12px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.wave { position: relative; height: 88px; background: var(--ground); border: 1px solid var(--field-line); touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none; overflow: hidden; }
.wave-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wave-window { position: absolute; top: 0; bottom: 0; left: 0; width: 20%; border: 2px solid var(--yellow); background: rgba(255, 255, 0, 0.08); cursor: grab; }
.wave.is-dragging .wave-window { cursor: grabbing; }
.wave-window:focus { outline: none; }
/* .wave clips its overflow, so the slider's focus ring is drawn inside the window, and the waveform box gets an outer ring too. */
.wave-window:focus-visible { outline: 3px solid var(--bone); outline-offset: -6px; background: rgba(255, 255, 0, 0.2); }
.wave:has(.wave-window:focus-visible) { outline: 3px solid var(--yellow); outline-offset: 3px; }
.wave-grip { position: absolute; left: 50%; top: 50%; width: 14px; height: 22px; margin: -11px 0 0 -7px; border-left: 2px solid var(--yellow); border-right: 2px solid var(--yellow); opacity: 0.9; }
.wave-head { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: var(--bone); pointer-events: none; }
.wave-wrap .hint { margin: 8px 0 0; }
.audio-fallback { display: block; width: 100%; max-width: none; margin: 0; }

/* Label picker: name cards (no logos) */
.label-picker { margin: 4px 0 8px; padding-top: 16px; border-top: 1px solid var(--rule); }
.label-picker > legend { margin: 0; padding: 0; }
.label-picker > .hint { margin: 2px 0 10px; }
.label-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.lcard { position: relative; min-width: 0; }
.lcard-input { position: absolute; top: 16px; left: 14px; width: 20px; height: 20px; margin: 0; accent-color: var(--yellow); }
.lcard-box { display: grid; gap: 2px; min-height: 64px; padding: 12px 12px 12px 46px; border: 1px solid var(--field-line); background: var(--ground); cursor: pointer; }
.lcard-box:hover { border-color: var(--bone-dim); }
.lcard-input:checked + .lcard-box { border-color: var(--yellow); box-shadow: inset 0 0 0 1px var(--yellow); }
.lcard-input:focus-visible + .lcard-box { outline: 3px solid var(--yellow); outline-offset: 2px; }
.lcard-name { font-weight: 700; font-size: 15px; line-height: 1.3; }
.lcard-genres { font-size: 13px; color: var(--bone-dim); line-height: 1.4; }
.fit-tag { justify-self: start; margin-top: 4px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ok); border: 1px solid var(--ok); padding: 1px 6px; }

/* ADE order number: "Where do I find it?" */
.where { font-size: 13px; color: var(--bone-dim); }
.where summary { cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; color: var(--bone); text-decoration: underline; text-underline-offset: 3px; }
.where p { margin: 2px 0 4px; }

/* Confirm group */
.confirm-group { border: 1px solid var(--rule); background: var(--ground); padding: 4px 14px 8px; margin: 4px 0 8px; }
.confirm-group > legend { padding: 0 6px; margin-left: -6px; font-size: 15px; }
.confirm-group .check:last-of-type { border-bottom: 0; }
.confirm-group input[aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; }
.confirm-group .err { margin: 4px 0 6px; }

/* Upload state */
.upload-box { margin: 16px 0 4px; }
.upload-box .progress { height: 10px; margin: 0 0 8px; }
.upload-line { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--bone); font-variant-numeric: tabular-nums; }
.send-row { align-items: center; }
.btn-send { min-width: 200px; }
.sform.is-uploading .fsec-edit, .sform.is-uploading .review .link-btn { visibility: hidden; }

/* Success */
.result { border: 1px solid var(--yellow); background: var(--ground); padding: 22px clamp(16px, 3vw, 24px); margin-top: 8px; }
.result:focus { outline: none; }
.result:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.result-title { font-size: clamp(36px, 5vw, 52px); color: var(--yellow); margin: 0 0 14px; }
.result .label { margin: 0 0 4px; }
.result-id-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.result .id { margin: 0; font-size: clamp(28px, 4.5vw, 40px); }
.result-keep { margin: 8px 0 18px; }
.next-title { margin: 0 0 6px; font-family: var(--mono); font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bone-dim); }
.next-list { list-style: none; counter-reset: n; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.next-list li { counter-increment: n; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.next-list li::before { content: counter(n, decimal-leading-zero); grid-row: 1 / span 2; font-family: var(--mono); font-size: 12px; color: var(--yellow); padding-top: 2px; }
.next-list b { font-weight: 700; }
.next-list span { color: var(--bone-dim); }
.cross-sell .btn { margin-top: 4px; }
.hero-meta-row .hero-countdown.urgent { color: var(--error); }
/* Jury strip on the Demolition page (rendered only when JURY in build_pages.py has names) */
.jury-strip { padding: 28px 0; border-bottom: 1px solid var(--rule); }
.jury-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.jury-list li { background: var(--card); border: 1px solid var(--rule); padding: 14px 16px; }
.jury-list li:first-child { border-color: var(--yellow); }
.jury-list b { display: block; font-family: var(--display); font-size: 24px; line-height: 1.05; text-transform: uppercase; }
.jury-list span { color: var(--bone-dim); font-size: 14px; }

/* Jury room: hand-picked export selection */
.select-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.select-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: 4px; font-size: 14px; }
.select-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 12px; padding: 12px 16px; background: var(--ground-2); border: 1px solid var(--yellow); }
.select-count { margin: 0; font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--yellow); }

.sub-item .actions { align-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ==== 2026 public polish (feat/ui-2026) ==== */
/* Public pages only (overview, Demolition, Label Session, embed kit). Motion is opacity/transform only (no layout shift)
   and is switched off by the global prefers-reduced-motion rule at the top of this file; .motion is set by js/motion.js. */
:root { color-scheme: dark; }
:where([data-page="overview"], [data-page="demolition"], [data-page="label-session"], [data-page="embed"]) :is(h1, h2, h3) { text-wrap: balance; }
.lede, .prose p, .faq details > div, .phase-steps p, .opp-lede, .both-note { text-wrap: pretty; }

/* Notched phones (viewport-fit=cover on the public pages) */
:where([data-page="overview"], [data-page="demolition"], [data-page="label-session"], [data-page="embed"]) .wrap { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.sticky-cta { padding-bottom: max(10px, env(safe-area-inset-bottom)); }

/* Anchors land below the sticky header (the header is static on small and landscape phones) */
:where([data-page="overview"], [data-page="demolition"], [data-page="label-session"], [data-page="embed"]) :is(main section[id], .opp, .fsec, .hero-form) { scroll-margin-top: 76px; }
@media (max-width: 640px), (orientation: landscape) and (max-height: 500px) { :where([data-page="overview"], [data-page="demolition"], [data-page="label-session"], [data-page="embed"]) :is(main section[id], .opp, .fsec, .hero-form) { scroll-margin-top: 12px; } }
/* Landscape phones: the sticky header + sticky CTA would leave ~250 px for content */
@media (orientation: landscape) and (max-height: 500px) {
  :where([data-page="overview"], [data-page="demolition"], [data-page="label-session"], [data-page="embed"]) .site-header { position: static; }
  .sticky-cta { padding-top: 6px; }
  .sticky-cta .btn { min-height: 44px; }
  .dt-text { position: static; }
}

/* 320 px: the long phase chip ("Sat 24 Oct · 16:15 · Felix Meritis") forced the timeline 15 px wider than the screen */
@media (max-width: 860px) { .two-col { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) { .phase-when { white-space: normal; } }

.sticky-cta .btn { white-space: nowrap; flex: none; }
.sticky-text { min-width: 0; text-wrap: balance; }
@media (max-width: 420px) { .sticky-cta .btn { padding: 0 16px; } }

/* Detail hero: the facts list already ends with a rule, so the meta row does not draw a second one */
.hero-facts + .hero-meta-row { border-top: 0; margin-top: 0; }

/* Readable line lengths on wide screens */
.ov-hero .lede { max-width: 64ch; }
.both-note, .labels-hint { max-width: 78ch; }
.kit-section > p, .kit-section .hint { max-width: 72ch; }

/* Touch: small inline-flex links get a 44 px target */
@media (pointer: coarse), (max-width: 760px) {
  :where([data-page="overview"], [data-page="demolition"], [data-page="label-session"], [data-page="embed"]) .breadcrumbs a, .ade-line a, .hero-meta-row .ade-line a, .also-link, .where summary { min-height: 44px; }
}

/* Countdown digits keep their width while they tick */
[data-countdown], .sticky-text, .opp-places, .hero-places, #places-label-session-2026 { font-variant-numeric: tabular-nums; }
.tick { animation: tick .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes tick { from { opacity: .2; transform: translateY(-.35em); } }
.opp-countdown, .hero-countdown { display: inline-block; }

/* Places meter (Label Session): size reserved from the start, shown when live data arrives */
.pmeter { display: block; height: 3px; margin: 6px 0 2px; background: var(--rule); visibility: hidden; overflow: hidden; }
.pmeter.on { visibility: visible; }
.pmeter i { display: block; height: 100%; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) .25s; }
.pmeter.urgent i { background: var(--error); }
.opp-facts dd.pmeter { grid-column: 2; }
@media (max-width: 480px) { .opp-facts dd.pmeter { grid-column: 1; } }
.hero-meta-row .pmeter { flex: 0 0 96px; margin: 0; }

/* Hero H1: short reveal on load (CSS only; the text is in place from the first paint) */
.hero h1 { animation: h1-in .7s cubic-bezier(.2, .7, .2, 1) backwards; }
@keyframes h1-in { from { clip-path: inset(0 0 100% 0); transform: translateY(.22em); } to { clip-path: inset(0 0 -20% 0); transform: none; } }

/* Fade-and-rise on scroll */
.motion .rv { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.motion .rv.in { opacity: 1; transform: none; }
@media print { .motion .rv { opacity: 1; transform: none; } }

/* Timeline: solid rail (no gradient); with JS the yellow rail draws as you scroll */
.journey > .phase::before { background: var(--yellow); }
.journey > .phase::after { z-index: 1; }
.rail .journey > .phase::before { display: none; }
.rail .journey::before, .rail .journey::after { content: ""; position: absolute; left: 8px; top: 13px; bottom: var(--rail-end, 0); width: 2px; background: var(--rule); }
.rail .journey::after { background: var(--yellow); transform: scaleY(var(--rail, 1)); transform-origin: top; transition: transform .15s linear; }
.phase.key.in::after, .programme > li.key.in::before { animation: pulse 1.4s ease-out .2s 1; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 0, .6); } 70% { box-shadow: 0 0 0 14px rgba(255, 255, 0, 0); } 100% { box-shadow: 0 0 0 6px rgba(255, 255, 0, .14); } }

/* Micro-interactions */
:where([data-page="overview"], [data-page="demolition"], [data-page="label-session"], [data-page="embed"]) .btn { transition: background-color .15s, border-color .15s, color .15s, transform .08s; }
:where([data-page="overview"], [data-page="demolition"], [data-page="label-session"], [data-page="embed"]) .btn:active:not([disabled]):not([aria-disabled="true"]) { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .opp, .label-card, .jury-list > li, .phase-steps li, .programme > li, .proof-list > li { transition: transform .2s ease, border-color .2s ease; }
  .opp:hover, .label-card:hover, .jury-list > li:hover, .phase-steps li:hover, .programme > li:hover { transform: translateY(-2px); }
  .opp:hover, .label-card:hover, .jury-list > li:not(:first-child):hover, .phase:not(.key) .phase-steps li:hover, .programme > li:not(.key):hover { border-color: #4A4A50; }
}
.dz-icon { transition: transform .2s cubic-bezier(.2, .7, .2, 1); }
.dropzone.is-over .dz-zone { border-style: solid; border-color: var(--yellow); box-shadow: inset 0 0 0 1px var(--yellow); }
.dropzone.is-over .dz-icon { transform: translateY(-4px); }
.wave-window { transition: background-color .15s, box-shadow .15s; }
.wave.is-dragging { border-color: var(--yellow); }
.wave.is-dragging .wave-window { background: rgba(255, 255, 0, .18); box-shadow: 0 0 18px 2px rgba(255, 255, 0, .45), inset 0 0 0 1px var(--yellow); }

/* Success: the ID is "stamped" (no confetti) */
.result:not([hidden]) { animation: ring .9s ease-out .35s 1 backwards; }
.result:not([hidden]) .result-title { animation: stamp .5s cubic-bezier(.2, .7, .2, 1) backwards; transform-origin: left center; }
.result:not([hidden]) .id { display: inline-block; animation: stamp .45s cubic-bezier(.2, .7, .2, 1) .2s backwards; transform-origin: left center; }
.result-title::before { content: ""; display: inline-block; width: .32em; height: .62em; margin: 0 .34em .12em .06em; border: solid currentColor; border-width: 0 .1em .1em 0; transform: rotate(45deg); vertical-align: middle; }
@keyframes stamp { 0% { opacity: 0; transform: scale(1.5) rotate(-3deg); } 60% { opacity: 1; transform: scale(.97); } 100% { transform: none; } }
@keyframes ring { from { box-shadow: 0 0 0 0 rgba(255, 255, 0, .5); } to { box-shadow: 0 0 0 16px rgba(255, 255, 0, 0); } }
/* ==== end 2026 public polish ==== */

/* ==== Jury room 2026 (feat/jury-dashboard) ==== */
/* Jury / admin room (jury.html) and the ADE partner dashboard (dashboard.html): overview tiles, bar lists, track
   table, docked player, help popovers and tooltips. Square corners, no gradients; yellow for data, greys for chrome. */
.jr, .dash { --jr-sticky-top: 65px; --jr-line: #4A4A50; --jr-track: #1E1E21; padding-top: 24px; }
.jr .wrap, .dash .wrap { max-width: 1400px; }
.jr section, .dash section { border-bottom: 0; padding: 0; }
.jr p, .dash p { overflow-wrap: anywhere; }
kbd { font-family: var(--mono); font-size: 12px; line-height: 1.4; border: 1px solid var(--jr-line, #4A4A50); background: var(--ground-2); color: var(--bone); padding: 0 6px; white-space: nowrap; }
.jr-titlebar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: 20px; }
.jr .page-title, .dash .page-title { font-size: clamp(40px, 5vw, 64px); margin: 4px 0 0; }
.jr-titletools { display: flex; flex-wrap: wrap; gap: 8px; }
.jr-titletools kbd { margin-left: 2px; }
.jr-h2 { font-size: clamp(26px, 3vw, 40px); margin: 0; }
.jr-h3 { font-size: clamp(20px, 2vw, 26px); margin: 0; }
.jr-titled { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.jr-titled > :first-child { margin: 0; }
.jr-labelrow { display: inline-flex; align-items: center; gap: 8px; }
.jr .export-grid .field > label, .jr .export-grid .jr-labelrow { min-height: 24px; display: flex; align-items: center; }
.jr input[type=search] {
  width: 100%; min-height: 48px; padding: 10px 14px; background: var(--ground); color: var(--bone);
  border: 1px solid var(--field-line); border-radius: 0; font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none;
}
.jr input[type=search]::placeholder { color: #8A867E; }
.jr input[type=search]:focus { border-color: var(--yellow); }
html:has(body.jr-has-dock) { scroll-padding-bottom: 120px; scroll-padding-top: 120px; }
.site-nav #who { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; text-transform: none; letter-spacing: 0.02em; }

/* Help "i" buttons, popovers and tooltips (VA.ui in js/staff-ui.js) */
.ui-help { display: inline-flex; vertical-align: middle; margin-left: 2px; }
.ui-i {
  position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; min-width: 22px; padding: 0;
  border: 1px solid #5A5A60; border-radius: 0; background: transparent; color: var(--bone-dim); cursor: pointer;
  font-family: var(--mono); font-size: 12px; font-weight: 700; line-height: 1; text-transform: lowercase; letter-spacing: 0;
}
.ui-i::after { content: ""; position: absolute; inset: -11px; } /* 44 px touch target */
.ui-i:hover, .ui-i[aria-expanded="true"] { border-color: var(--yellow); color: var(--yellow); }
.ui-pop {
  position: fixed; z-index: 80; width: min(360px, calc(100vw - 16px)); max-height: calc(100vh - 32px); overflow: auto;
  padding: 16px 18px 8px; background: var(--ground-2); border: 1px solid var(--bone-dim); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
  color: var(--bone); font-family: var(--body); font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; text-align: left; white-space: normal;
}
.ui-pop p { margin: 0 0 8px; }
.ui-pop-title { font-family: var(--display); font-size: 20px; line-height: 1.1; text-transform: uppercase; color: var(--yellow); }
.ui-pop-list { margin: 0 0 8px; padding-left: 18px; }
.ui-pop-list li { margin-bottom: 4px; color: var(--bone-dim); }
.ui-pop-list b { color: var(--bone); font-weight: 700; }
.ui-pop-close { min-height: 36px; padding: 6px 0; background: none; border: 0; color: var(--bone-dim); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ui-pop-close:hover { color: var(--yellow); }
.ui-tip {
  position: fixed; z-index: 90; max-width: min(300px, calc(100vw - 16px)); padding: 7px 10px; pointer-events: none;
  background: var(--bone); color: var(--ground); font-family: var(--body); font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: 0; text-transform: none;
}

/* Bar lists (per genre, label preference, countries) */
.ui-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ui-bars.two-col { grid-template-columns: 1fr 1fr; column-gap: 28px; }
.ui-bar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 5px; column-gap: 12px; width: 100%;
  padding: 7px 8px; background: none; border: 1px solid transparent; border-radius: 0; color: var(--bone);
  font-family: var(--body); font-size: 14px; line-height: 1.3; text-align: left;
}
button.ui-bar { cursor: pointer; min-height: 44px; }
button.ui-bar:hover { border-color: var(--jr-line, #4A4A50); }
.ui-bar.on { border-color: var(--yellow); background: var(--ground-2); }
.ui-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-bar-n { display: flex; gap: 10px; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-bar-n b { font-weight: 700; }
.ui-bar-pct { min-width: 4ch; text-align: right; color: var(--bone-dim); }
.ui-bar-track { grid-column: 1 / -1; height: 6px; background: var(--jr-track, #1E1E21); }
.ui-bar-fill { display: block; height: 100%; width: 0; background: var(--yellow); }
.ui-bar.on .ui-bar-fill { background: var(--bone); }
.ui-bars-empty { padding: 8px 0; color: var(--bone-dim); font-size: 14px; }

/* Login (two steps) */
.jr-login { max-width: 540px; padding: clamp(20px, 4vw, 32px); border: 1px solid var(--rule); }
.jr-loginsteps { list-style: none; display: flex; gap: 16px; margin: 0 0 24px; padding: 0; border-bottom: 1px solid var(--rule); }
.jr-loginsteps li { display: flex; align-items: center; gap: 8px; margin-bottom: -1px; padding: 0 0 10px; border-bottom: 3px solid transparent; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone-dim); }
.jr-loginsteps li[aria-current] { color: var(--bone); border-bottom-color: var(--yellow); }
.jr-loginsteps li.done { color: var(--bone); }
.jr-loginsteps .n, .jr-steps .n { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; border: 1px solid currentColor; font-family: var(--mono); font-size: 12px; font-weight: 700; }
.jr-loginsteps li[aria-current] .n { background: var(--yellow); border-color: var(--yellow); color: var(--ground); }
.jr-loginsteps li.done .n { background: var(--bone); border-color: var(--bone); color: var(--ground); }
.jr-login .jr-h2 { margin-bottom: 8px; }
.jr-login-intro { margin-bottom: 20px; }
.jr-codesent { margin: 0 0 18px; padding: 10px 14px; border-left: 3px solid var(--yellow); background: var(--ground-2); }
.jr-codesent p { margin: 0; }
.jr-codesent-k { color: var(--yellow); margin-bottom: 2px; }
.jr-codesent.warn { border-left-color: var(--error); }
.jr-mask { font-family: var(--mono); font-weight: 700; color: var(--yellow); }
.jr-login #totp-code { max-width: 12ch; font-family: var(--mono); font-size: 22px; letter-spacing: 0.3em; }
.jr-login .code-actions .btn[disabled] { opacity: 0.7; font-variant-numeric: tabular-nums; }
.jr-resend-hint { margin: 12px 0 0; }
.jr-linkbtn { min-height: 44px; margin-top: 8px; padding: 10px 0; background: none; border: 0; color: var(--bone-dim); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.jr-linkbtn:hover { color: var(--yellow); }

/* Session tabs + refresh line */
.jr-sessionbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 24px; margin-bottom: 24px; border-bottom: 1px solid var(--rule); }
.jr-tabs { display: flex; flex-wrap: wrap; gap: 0 24px; }
.jr-tab {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; margin-bottom: -1px; padding: 8px 2px;
  background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: var(--bone-dim); cursor: pointer;
  font-family: var(--display); font-size: clamp(20px, 2.4vw, 28px); line-height: 1; text-transform: uppercase;
}
.jr-tab:hover { color: var(--bone); }
.jr-tab[aria-selected="true"] { color: var(--bone); border-bottom-color: var(--yellow); }
.jr-tab-n { min-width: 3ch; padding: 3px 7px; border: 1px solid var(--jr-line); font-family: var(--mono); font-size: 13px; line-height: 1.2; text-align: center; color: var(--bone-dim); font-variant-numeric: tabular-nums; }
.jr-tab[aria-selected="true"] .jr-tab-n { background: var(--yellow); border-color: var(--yellow); color: var(--ground); }
.jr-updated { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: var(--mono); font-size: 12px; color: var(--bone-dim); font-variant-numeric: tabular-nums; }
.jr-live { width: 8px; height: 8px; background: var(--ok); display: inline-block; }

/* How it works + shortcuts */
.jr .jr-howto { margin-bottom: 24px; padding: 20px clamp(16px, 2vw, 24px); border: 1px solid var(--yellow); }
.jr-howto-head, .jr-keys-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.jr-howto-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 12px; padding: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.jr-howto-steps li { padding: 16px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 14px; line-height: 1.5; color: var(--bone-dim); }
.jr-howto-steps .n { display: block; margin-bottom: 8px; font-family: var(--display); font-size: 36px; line-height: 1; color: var(--yellow); }
.jr-howto-steps b { display: block; margin-bottom: 4px; font-size: 16px; color: var(--bone); }
.jr-howto-steps em { font-style: normal; font-weight: 600; color: var(--bone); }
.jr-howto > .hint { margin: 0; }
.jr-howto-export { margin: 0 0 16px; padding: 16px; border: 1px solid var(--rule); }
.jr-howto-xhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.jr-howto-xhead .jr-h3 { margin: 0; }
.jr-howto-routes { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 12px; padding: 0; }
.jr-howto-routes li { padding-left: 12px; border-left: 2px solid var(--yellow); font-size: 14px; line-height: 1.5; color: var(--bone-dim); }
.jr-howto-routes b { display: block; margin-bottom: 4px; color: var(--bone); }
.jr-howto-routes em, .jr-howto-export .hint em { font-style: normal; font-weight: 600; color: var(--bone); }
.jr-howto-export .hint { margin: 0 0 8px; }
.jr-howto-export .hint:last-child { margin-bottom: 0; }
.jr-howto > .jr-howto-jury { margin-bottom: 8px; }
.jr-keys { position: fixed; z-index: 75; top: 140px; right: max(16px, calc((100vw - 1400px) / 2 + 48px)); width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 160px); overflow: auto; padding: 20px; background: var(--ground-2); border: 1px solid var(--bone-dim); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7); }
.jr-keys:focus { outline: none; }
.jr-keys:focus-visible { outline: 3px solid var(--yellow); }
.jr-keylist { margin: 0 0 12px; }
.jr-keylist div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.jr-keylist dd { margin: 0; font-size: 14px; }

/* Overview */
.jr-overview { margin-bottom: 32px; }
.jr-ov-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-bottom: 16px; }
.jr-deadline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 14px; }
.jr-deadline b { padding: 2px 8px; border: 1px solid var(--yellow); color: var(--yellow); font-family: var(--mono); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.jr-deadline b:empty { display: none; }
.jr-deadline b.is-soon { background: var(--yellow); color: var(--ground); }
.jr-deadline b.is-closed { border-color: var(--error); color: var(--error); }
.jr-kpis { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-bottom: 16px; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.jr-kpi { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.jr-kpi p { margin: 0; }
.jr-kpi-k { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 26px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone-dim); }
.jr-kpi-q { letter-spacing: 0; text-transform: none; }
.jr-kpi-v { font-family: var(--display); font-size: clamp(34px, 3.4vw, 50px); line-height: 1; font-variant-numeric: tabular-nums; }
.jr-kpi-v.full { color: var(--yellow); }
.jr-kpi-of { margin-left: 2px; font-size: 0.5em; color: var(--bone-dim); }
.jr-kpi-s { font-size: 13px; line-height: 1.35; color: var(--bone-dim); }
.jr-meter { height: 4px; margin-top: auto; background: var(--jr-track); }
.jr-meter span { display: block; width: 0; height: 100%; background: var(--yellow); }
.jr-kpi-ai { grid-column: span 2; }
.jr-stack { display: flex; height: 10px; margin: 4px 0 6px; background: var(--jr-track); }
.jr-stack .seg { display: block; height: 100%; }
.jr-stack .seg + .seg { border-left: 2px solid var(--ground); }
.ai-passed { background: var(--ok); }
.ai-review { background: var(--yellow); }
.ai-held { background: var(--error); }
.ai-checking { background: #6A6A70; }
.ai-none { background: var(--bone-dim); }
.jr-ailegend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.jr-ailg { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px; background: none; border: 1px solid var(--rule); border-radius: 0; color: var(--bone); font-family: var(--body); font-size: 13px; cursor: pointer; }
.jr-ailg:hover { border-color: var(--jr-line); }
.jr-ailg b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.jr-ailg.on { background: var(--bone); border-color: var(--bone); color: var(--ground); }
.dot { display: inline-block; width: 8px; height: 8px; }
.jr-ov-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.jr-ov-grid.has-labels { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.jr-card { min-width: 0; padding: 14px 16px; border: 1px solid var(--rule); }
.jr-card-title { margin: 0; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone-dim); }
.jr-genre-bars:not(.two-col) { grid-template-columns: 1fr; }

/* Admin: export + import */
.jr-admin { margin-bottom: 32px; border: 1px solid var(--rule); }
.jr-admin[open] { border-color: var(--jr-line); }
.jr-admin-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; min-height: 56px; padding: 14px 20px; cursor: pointer; list-style: none; }
.jr-admin-sum::-webkit-details-marker { display: none; }
.jr-admin-sum::before { content: "+"; width: 1ch; font-family: var(--mono); font-weight: 700; color: var(--yellow); }
.jr-admin[open] > .jr-admin-sum::before { content: "\2212"; }
.jr-admin-name { font-family: var(--display); font-size: 24px; line-height: 1.1; text-transform: uppercase; }
.jr-admin-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; padding: 20px; border-top: 1px solid var(--rule); }
.jr .import-box { margin: 0; padding: 0 0 0 32px; border-top: 0; border-left: 1px solid var(--rule); }
.jr-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 20px; padding: 0; border: 1px solid var(--rule); }
.jr-steps li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 12px; border-right: 1px solid var(--rule); font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bone-dim); }
.jr-steps li:last-child { border-right: 0; }
.jr-steps li[aria-current] { background: var(--yellow); color: var(--ground); font-weight: 700; }
.jr-steps li[aria-current] .n { border-color: var(--ground); }
.jr-steps li.done { color: var(--bone); }
.jr-steps li.done .n { background: var(--bone); border-color: var(--bone); color: var(--ground); }
.jr .export-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.jr .export-grid .jr-labelrow label { font-size: 14px; font-weight: 600; }
.jr-checks { margin: 4px 0 8px; }
.jr-checks .check { border-bottom: 0; padding: 6px 0; }
.jr-check-hint { margin: 0 0 8px 36px; }
.jr-xsummary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; padding-top: 16px; border-top: 1px solid var(--rule); }
.jr-xsummary .export-preview { flex: 1 1 260px; margin: 0; }
.jr-xwarn { display: block; margin-top: 4px; color: var(--error); font-size: 13px; }
.jr .stepup { max-width: none; }
.jr-stepup-what { margin: 0 0 8px; font-family: var(--mono); font-size: 14px; }
.jr .stepup-row { align-items: flex-end; }
.jr-xstatus { margin: 12px 0 0; }
.jr-xstatus:empty { display: none; }

/* Track list: search, chips, sticky header row, rows */
.jr-list-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; margin-bottom: 12px; }
.jr-count { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--bone-dim); font-variant-numeric: tabular-nums; }
.jr-filters { margin-bottom: 12px; padding: 16px; border: 1px solid var(--rule); }
.jr-filterrow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; }
.jr-filterrow .field { margin: 0; }
.jr-chiprows { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 14px; }
.jr-chipgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.jr-chiplabel { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone-dim); }
.jr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jr-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; background: none; border: 1px solid var(--jr-line); border-radius: 0; color: var(--bone); font-family: var(--body); font-size: 14px; cursor: pointer; }
.jr-chip:hover { border-color: var(--yellow); }
.jr-chip.on { background: var(--yellow); border-color: var(--yellow); color: var(--ground); font-weight: 600; }
.jr-chip-n { font-family: var(--mono); font-size: 12px; color: var(--bone-dim); font-variant-numeric: tabular-nums; }
.jr-chip.on .jr-chip-n { color: var(--ground); }
.jr-activebar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; }
.jr-active { margin: 0; font-size: 13px; color: var(--bone-dim); }
.jr-active:not(:empty), .jr-activebar .btn { margin-top: 12px; }
.jr .select-tools { align-items: center; gap: 8px 12px; margin: 0 0 8px; }
.jr-pickstatus { min-height: 1.6em; margin: 0 0 6px; color: var(--bone); }
.jr-thead, .jr-row { display: grid; grid-template-columns: 172px minmax(0, 1fr) 128px 52px 112px 196px; gap: 14px; align-items: center; }
.jr-panel.has-labels .jr-thead, .jr-panel.has-labels .jr-row { grid-template-columns: 172px minmax(0, 1fr) 124px 52px 150px 112px 196px; }
.jr-panel.is-admin .jr-thead, .jr-panel.is-admin .jr-row { grid-template-columns: 172px minmax(0, 1fr) 128px 52px 112px 196px 32px; }
.jr-panel.has-labels.is-admin .jr-thead, .jr-panel.has-labels.is-admin .jr-row { grid-template-columns: 172px minmax(0, 1fr) 124px 52px 150px 112px 196px 32px; }
.jr-panel:not(.has-labels) .c-labels, .jr-panel:not(.is-admin) .c-sel { display: none; }
.jr-thead {
  position: sticky; top: var(--jr-sticky-top); z-index: 6; padding: 10px 12px; background: var(--ground); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--bone-dim);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone-dim);
}
.jr-thead > span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.jr-rows { list-style: none; margin: 0; padding: 0; }
.jr-row { position: relative; padding: 9px 12px; border-bottom: 1px solid var(--rule); }
.jr-row:hover { background: #101012; }
.jr-row.is-current { background: var(--ground-2); box-shadow: inset 3px 0 0 var(--yellow); }
.jr-row.is-current .jr-title { color: var(--yellow); }
.jr-row .jr-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.c-play, .c-pick { display: flex; gap: 6px; }
.c-track { min-width: 0; }
.jr-t { margin: 0; overflow: hidden; font-size: 15px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.jr-artist { font-weight: 700; }
.jr-sep { color: var(--bone-dim); }
.jr-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 2px 0 0; }
.jr-id { font-family: var(--mono); font-size: 12px; color: var(--bone-dim); }
.jr-tags { display: inline-flex; gap: 6px; }
.jr-tag { padding: 0 5px; border: 1px solid; font-family: var(--mono); font-size: 10px; line-height: 1.6; letter-spacing: 0.06em; text-transform: uppercase; }
.jr-tag.new { border-color: var(--yellow); color: var(--yellow); }
.jr-tag.heard { border-color: var(--jr-line); color: var(--bone-dim); }
.jr-contact { margin: 2px 0 0; font-family: var(--mono); font-size: 12px; color: var(--bone-dim); }
.c-genre { min-width: 0; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.c-bpm { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.c-labels { min-width: 0; font-size: 13px; line-height: 1.35; }
.c-labels.none { color: var(--bone-dim); }
.jr-ai { display: inline-flex; align-items: center; gap: 6px; }
.jr-ai .tag { font-size: 11px; }
.tag.checking { border-style: dashed; color: var(--bone-dim); border-color: #6A6A70; }
.tag.none { color: var(--bone-dim); }
.jr-ai-sc { font-family: var(--mono); font-size: 11px; color: var(--bone-dim); font-variant-numeric: tabular-nums; }
.jr-play, .jr-pick {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 10px;
  background: none; border: 1px solid var(--jr-line); border-radius: 0; color: var(--bone); cursor: pointer;
  font-family: var(--body); font-size: 13px; font-weight: 600; line-height: 1;
}
.jr-play:hover, .jr-pick:hover { border-color: var(--yellow); color: var(--yellow); }
.jr-play.fragment { flex: 1.3; }
.jr-play.full { flex: 1; }
.jr-play.on { background: var(--yellow); border-color: var(--yellow); color: var(--ground); }
.jr-pick { flex: 1; font-weight: 700; }
.jr-pick.finalist { flex: 1.25; }
.jr-pick.on { background: var(--yellow); border-color: var(--yellow); color: var(--ground); }
.jr-pick.semi.on { background: var(--bone); border-color: var(--bone); }
.jr-pick[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.jr-pick[aria-disabled="true"]:hover { border-color: var(--jr-line); color: var(--bone); }
.jr-pick .ic-check { display: none; }
.jr-pick.on .ic-check { display: inline-block; width: 10px; height: 6px; margin-top: -3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.jr-sel { position: relative; display: inline-grid; place-items: center; width: 32px; height: 40px; }
.jr-sel input { width: 20px; height: 20px; margin: 0; accent-color: var(--yellow); }
.jr-sel label { position: absolute; inset: 0; cursor: pointer; }
.ic { display: inline-block; flex: 0 0 auto; }
.ic-play { width: 9px; height: 11px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ic-pause { width: 9px; height: 11px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.ic-prev, .ic-next { width: 12px; height: 12px; background: currentColor; }
.ic-prev { clip-path: polygon(0 0, 22% 0, 22% 44%, 100% 0, 100% 100%, 22% 56%, 22% 100%, 0 100%); }
.ic-next { clip-path: polygon(0 0, 78% 44%, 78% 0, 100% 0, 100% 100%, 78% 100%, 78% 56%, 0 100%); }
.jr-empty { display: grid; justify-items: center; gap: 8px; padding: 48px 16px; border-bottom: 1px solid var(--rule); text-align: center; }
.jr-empty p { margin: 0; }
.jr-empty-t { font-family: var(--display); font-size: 26px; text-transform: uppercase; }

/* Docked player (one shared <audio>) + admin selection bar */
body.jr-has-dock { padding-bottom: 96px; }
.jr-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--ground-2); border-top: 1px solid var(--jr-line); }
.jr-dock.is-playing { border-top-color: var(--yellow); }
.jr-dock-in { padding-top: 10px; padding-bottom: 10px; }
.jr-player { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.3fr); gap: 8px 16px; align-items: center; }
.jr-np { min-width: 0; cursor: pointer; }
.jr-np p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr-np-k { color: var(--yellow); font-size: 11px; }
.jr-np-t { font-size: 15px; font-weight: 700; line-height: 1.3; }
.jr-np-a { font-size: 13px; color: var(--bone-dim); }
.jr-transport { display: flex; gap: 6px; }
.jr-tbtn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: none; border: 1px solid var(--jr-line); border-radius: 0; color: var(--bone); cursor: pointer; }
.jr-tbtn:hover { border-color: var(--yellow); color: var(--yellow); }
.jr-tbtn-main { width: 52px; background: var(--yellow); border-color: var(--yellow); color: var(--ground); }
.jr-tbtn-main:hover { background: var(--bone); border-color: var(--bone); color: var(--ground); }
.jr-tbtn-main .ic-play { width: 12px; height: 14px; }
.jr-tbtn-main .ic-pause { width: 12px; height: 14px; border-left-width: 4px; border-right-width: 4px; }
audio#player { display: block; width: 100%; min-width: 0; height: 40px; color-scheme: dark; }
.jr .jr-selbar { position: static; margin: 10px 0 0; padding: 10px 0 0; background: none; border: 0; border-top: 1px solid var(--rule); }

@media (max-width: 1180px) {
  .jr-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .jr-kpi-heard { grid-column: span 2; }
  .jr-howto-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-admin-body { grid-template-columns: minmax(0, 1fr); }
  .jr .import-box { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--rule); }
}
@media (max-width: 1000px) {
  .jr-thead { display: none; }
  .jr-row, .jr-panel.has-labels .jr-row, .jr-panel.is-admin .jr-row, .jr-panel.has-labels.is-admin .jr-row { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 14px 4px; }
  .jr-row.is-current { padding-left: 12px; }
  .c-track { order: 1; flex: 1 1 calc(100% - 48px); }
  .c-sel { order: 2; flex: 0 0 auto; }
  .c-genre, .c-bpm, .c-labels, .c-ai { order: 3; flex: 0 0 auto; font-size: 13px; color: var(--bone-dim); }
  .c-bpm span:last-child::after { content: " BPM"; }
  .c-labels { flex: 1 1 100%; }
  .c-labels:not(.none)::before { content: "Prefers: "; }
  .c-play { order: 4; flex: 1 1 260px; }
  .c-pick { order: 5; flex: 1 1 260px; }
  .jr-t { white-space: normal; }
  .jr-ov-grid.has-labels { grid-template-columns: minmax(0, 1fr); }
  .jr-filterrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .jr-search { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .ui-bars.two-col { grid-template-columns: 1fr; }
  .jr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-kpi-ai, .jr-kpi-heard { grid-column: 1 / -1; }
  .jr-player { grid-template-columns: minmax(0, 1fr) auto; }
  audio#player { grid-column: 1 / -1; height: 36px; }
  body.jr-has-dock { padding-bottom: 150px; }
  .jr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-steps li:nth-child(2) { border-right: 0; }
  .jr-steps li:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .jr-chiprows { gap: 12px; }
  .jr-titletools .btn { flex: 1 1 auto; }
}
@media (max-width: 560px) {
  .jr-howto-steps { grid-template-columns: minmax(0, 1fr); }
  .jr-howto-routes { grid-template-columns: minmax(0, 1fr); }
  .jr-tabs { gap: 0 16px; }
  .jr-sessionbar { align-items: flex-start; }
  .jr-filters { padding: 12px; }
  .jr-filterrow { grid-template-columns: minmax(0, 1fr); }
  .jr-xsummary .btn { width: 100%; }
  .jr-keylist div { grid-template-columns: 64px 1fr; }
}

/* ADE dashboard (same language as the jury room) */
.dash-intro { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: 90ch; margin: -8px 0 20px; }
.dash-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.jr-kpi-v.accent { color: var(--yellow); }
.dash-days { margin-bottom: 16px; }
.dash-spark { display: flex; align-items: stretch; gap: 3px; height: 150px; border-bottom: 1px solid var(--bone-dim); }
.dash-bar { position: relative; display: flex; flex: 1 1 0; flex-direction: column; justify-content: flex-end; min-width: 2px; }
.dash-bar-fill { display: block; width: 100%; background: var(--yellow); }
.dash-bar.zero .dash-bar-fill { height: 0; }
.dash-bar:hover .dash-bar-fill { background: var(--bone); }
.dash-bar-n { font-family: var(--mono); font-size: 11px; line-height: 1.5; text-align: center; white-space: nowrap; color: var(--bone-dim); font-variant-numeric: tabular-nums; }
.dash-bar.peak .dash-bar-n { color: var(--bone); }
.dash-axis { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--mono); font-size: 11px; color: var(--bone-dim); }
.dash-caption { margin: 10px 0 0; }
.dash-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dash-note { margin: 10px 0 0; }
.dash-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dash-table th, .dash-table td { padding: 8px 0; border-bottom: 1px solid var(--rule); text-align: left; font-weight: 400; }
.dash-table thead th { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone-dim); }
.dash-table .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dash .chart-table { margin-top: 8px; }
@media (max-width: 1180px) { .dash-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .dash-grid2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-spark { height: 120px; gap: 2px; } }
/* Staff pages use the wider grid everywhere (header and footer line up with the content). */
body:has(main.jr) .wrap, body:has(main.dash) .wrap { max-width: 1400px; }
.jr .jr-card, .dash .jr-card { padding: 14px 16px; }
.dash .dash-intro { display: block; }
.dash-grid2 { align-items: start; }
.dash-grid2 > :first-child { grid-row: span 3; }
@media (max-width: 800px) { .dash-grid2 > :first-child { grid-row: auto; } }