/* ==========================================================================
   KGES 2026 — Karachi Grammar School Entrepreneurship Summit
   Main page (served at /preview until registration opens). Implements the
   "KGES 2026 v2" design (Claude Design project: KGES Summit signup design).
   ========================================================================== */

:root {
  --bg: #000510;
  --navy: #030D27;
  --ink: #EEF1F8;
  --accent: #F38C2E;
  --accent-2: #ffb672;
  --accent-hover: #f79a45;
  --ok: #7bd88f;
  --ink-75: rgba(238, 241, 248, .75);
  --ink-72: rgba(238, 241, 248, .72);
  --ink-70: rgba(238, 241, 248, .7);
  --ink-60: rgba(238, 241, 248, .6);
  --ink-55: rgba(238, 241, 248, .55);
  --ink-50: rgba(238, 241, 248, .5);
  --ink-45: rgba(238, 241, 248, .45);
  --ink-40: rgba(238, 241, 248, .4);
  --ink-30: rgba(238, 241, 248, .3);
  --ink-18: rgba(238, 241, 248, .18);
  --line-06: rgba(255, 255, 255, .06);
  --line-08: rgba(255, 255, 255, .08);
  --line-10: rgba(255, 255, 255, .1);
  --line-12: rgba(255, 255, 255, .12);
  --line-20: rgba(255, 255, 255, .2);
  --line-22: rgba(255, 255, 255, .22);
  --well-25: rgba(0, 5, 16, .25);
  --well-30: rgba(0, 5, 16, .3);
  --well-35: rgba(0, 5, 16, .35);
  --well-50: rgba(0, 5, 16, .5);
  --gutter: max(24px, calc((100% - 1240px) / 2));
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Archivo', 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: var(--ink); }
a:hover { color: var(--accent); }
::selection { background: var(--accent); color: var(--navy); }
img { display: block; max-width: 100%; }
input, select, button { font-family: inherit; }
input::placeholder { color: rgba(238, 241, 248, .32); }
input:focus, select:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(243, 140, 46, .22);
}
select option { background: #0A1633; color: var(--ink); }
button { cursor: pointer; color: inherit; }
button:focus-visible, a:focus-visible, label.drop:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
h1, h2, h3, p, dl, dd, figure, address { margin: 0; }
address { font-style: normal; }
ul { margin: 0; padding: 0; list-style: none; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 18px; border-radius: 99px; background: var(--accent); color: var(--navy);
  font-weight: 700; font-size: 13px; text-decoration: none; transition: top .15s;
}
.skip-link:focus { top: 16px; color: var(--navy); }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: center; gap: 32px;
  height: 84px; padding: 0 var(--gutter);
  background: rgba(0, 5, 16, 0);
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
  transition: background .4s, border-color .4s, backdrop-filter .4s, -webkit-backdrop-filter .4s;
}
.nav.is-scrolled {
  background: rgba(0, 5, 16, .65);
  border-bottom-color: rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
}
.nav__progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px rgba(243, 140, 46, .8);
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; flex: none; }
.brand__logo { width: 52px; height: 52px; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .6)); }
.brand__eyebrow { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--accent); line-height: 1.2; }
.brand__title { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.02em; margin-top: 3px; white-space: nowrap; line-height: 1.2; }

.nav__pills {
  display: flex; gap: 4px; padding: 4px; border-radius: 99px; flex: none;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line-08);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.pill {
  text-decoration: none; padding: 9px 16px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--ink-72);
  transition: color .15s, background .15s;
}
.pill:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }
.pill--primary {
  padding: 9px 18px; font-weight: 700; background: var(--accent); color: var(--navy); white-space: nowrap;
  transition: transform .1s ease-out, background .15s;
}
.pill--primary:hover { color: var(--navy); background: var(--accent-hover); }
.pill--primary:active { transform: scale(.96); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: clip;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 110px var(--gutter) 0;
}
.hero__photo { position: absolute; inset: -8% 0; overflow: hidden; will-change: transform; transform: scale(1.06); }
.hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* The shade and vignette are siblings of the photo, not children, so they stay pinned to the
   section while the photo moves: the fade to the page background always lands on the section edge. */
.hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 5, 16, .82) 0%, rgba(0, 5, 16, .22) 32%, rgba(0, 5, 16, .38) 68%, var(--bg) 100%);
}
.hero__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 45%, transparent 40%, rgba(0, 5, 16, .55) 100%);
}
.hero__glow {
  position: absolute; inset: -20%; pointer-events: none; will-change: transform;
  background:
    radial-gradient(700px 500px at 78% 10%, rgba(243, 140, 46, .22), transparent 65%),
    radial-gradient(800px 600px at 10% 60%, rgba(61, 111, 165, .35), transparent 70%);
}
/* No grid over the hero photo: its faint 72px lines were taken out on 5 October 2026 ("remove the
   grid effect as well"), with the ones in the trailer band's glow. */

/* The hero's depth, driven by the scroll itself.
   On a phone the page scrolls on the graphics chip, and a script that reads window.scrollY and
   then moves the photo is always a frame or more behind it: the text glides and the photo
   catches up in steps. That was the choppy parallax on mobile. Where the browser can tie an
   animation to the scroll position, the SAME movement is declared here instead and the browser
   applies it in the same step as the scroll, with no script in between.
   The numbers are js/app.js's own, over the same 1.2 screens of scroll:
     photo  y = scroll x .28, scale 1.06 -> 1.06 + 1.2 x .06      glow y = scroll x .14
     card   y = scroll x -.06
   `vh` here is the phone's FULL screen height and does not change when the address bar slides
   away, which also removes the small jump the script's innerHeight had.
   They animate `translate` and `scale`, not `transform`, so the script can still add the
   pointer's sideways drift and the card's tilt through `transform` on a laptop.
   js/app.js adds .fx-scroll to <html> only when the browser supports this and the visitor has
   not asked for reduced motion; without the class nothing here applies and the script does it all. */
@supports (animation-timeline: scroll()) {
  .fx-scroll .hero__photo { transform: none; animation: hero-photo-depth linear both; animation-timeline: scroll(root block); animation-range: 0 120vh; }
  .fx-scroll .hero__glow { animation: hero-glow-depth linear both; animation-timeline: scroll(root block); animation-range: 0 120vh; }
  @media (min-width: 768px) {   /* under that the card is stacked below the intro and must not drift */
    .fx-scroll .countdown { animation: hero-card-depth linear both; animation-timeline: scroll(root block); animation-range: 0 120vh; }
  }
  @keyframes hero-photo-depth { from { translate: 0 0; scale: 1.06; } to { translate: 0 33.6vh; scale: 1.132; } }
  @keyframes hero-glow-depth { from { translate: 0 0; } to { translate: 0 16.8vh; } }
  @keyframes hero-card-depth { from { translate: 0 0; } to { translate: 0 -7.2vh; } }
}
.hero__inner {
  position: relative; pointer-events: none;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; padding-bottom: 48px;
}
.hero__intro {
  display: flex; flex-direction: column; gap: 18px; max-width: 620px; min-width: 0; pointer-events: auto;
  text-shadow: 0 2px 18px rgba(0, 5, 16, .55); /* keeps the copy legible over bright parts of the photo */
}
.hero__meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink-75); letter-spacing: .02em; }
.hero__meta-sep { color: var(--ink-40); }
.hero__headline {
  font-family: var(--font-display); font-stretch: 100%; font-weight: 800;
  font-size: clamp(42px, 6vw, 80px); line-height: .96; letter-spacing: -.03em;
  text-wrap: balance;
}
.hero__sub { font-size: 17px; line-height: 1.6; color: var(--ink-72); max-width: 500px; text-wrap: pretty; }
.hero__actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 6px; }
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; padding: 14px 26px; border-radius: 99px;
  background: var(--accent); color: var(--navy); font-weight: 800; font-size: 14px; text-decoration: none; text-shadow: none;
  box-shadow: 0 10px 30px -10px rgba(243, 140, 46, .6); transition: background .15s, transform .1s ease-out;
}
.btn-primary:hover { background: var(--accent-hover); color: var(--navy); }
.btn-primary:active { transform: scale(.96); }
.btn-link { display: inline-block; padding: 12px 4px; font-size: 14px; font-weight: 600; color: var(--ink-72); text-decoration: none; transition: color .15s; }
.btn-link:hover { color: var(--accent); }
.hero__timer { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex: none; }
.countdown__caption {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-40); font-weight: 600; text-align: right;
}
.countdown__caption strong { color: var(--ink-72); font-weight: 700; white-space: nowrap; }

/* Countdown card */
.countdown {
  pointer-events: auto;
  display: grid; grid-template-columns: repeat(4, auto); gap: 1px;
  border-radius: 22px; overflow: hidden;
  background: var(--line-08); border: 1px solid var(--line-12);
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .95), inset 0 1px 0 var(--line-12);
  transform-style: preserve-3d; will-change: transform;
}
.countdown__group {
  padding: 22px 28px; background: rgba(3, 13, 39, .72); text-align: center;
  -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
}
.countdown__digits {
  display: flex; justify-content: center; font-family: var(--font-display); font-stretch: 100%;
  font-size: 56px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.countdown__group--accent .countdown__digits { color: var(--accent); }
.digit { width: .66em; height: 1em; overflow: hidden; text-align: center; }
.digit__reel {
  display: flex; flex-direction: column;
  transition: transform .7s cubic-bezier(.2, .9, .2, 1); will-change: transform;
}
.digit__reel span { display: block; height: 1em; }
.countdown__label {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-45);
  margin-top: 10px; font-weight: 600;
}
@media (max-width: 1180px) {
  .countdown__digits { font-size: 46px; }
  .countdown__group { padding: 18px 22px; }
}

/* --------------------------------------------------------------------------
   Shared bits
   -------------------------------------------------------------------------- */
.eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 700; }

[data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.media-card[data-reveal], .glance[data-reveal], .venue__map[data-reveal], .register__fees[data-reveal] {
  transform: translateY(40px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
/* Keep this after the card rule above: same specificity, so source order decides. */
[data-reveal].is-in { opacity: 1; transform: none; }
[data-tilt].is-settled { transition: opacity 1s var(--ease); }

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.about {
  position: relative; padding: 140px var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start;
  scroll-margin-top: 80px;
  background: linear-gradient(180deg, var(--bg), var(--navy) 40%, var(--navy) 60%, var(--bg));
}
.about__copy { position: sticky; top: 120px; }
.about__lede {
  font-family: var(--font-display); font-stretch: 100%;
  font-size: clamp(26px, 2.9vw, 38px); line-height: 1.18; letter-spacing: -.025em; font-weight: 700;
  margin: 20px 0 0; text-wrap: pretty;
}
.about__lede [data-word] { color: var(--ink-18); transition: color .3s; }
.about__lede [data-word].is-lit { color: var(--ink); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-top: 36px; border-top: 1px solid var(--line-10); }
.facts__item { padding: 16px 0; border-bottom: 1px solid var(--line-08); }
.facts dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-40); font-weight: 600; }
.facts dd { margin-top: 5px; font-size: 15px; font-weight: 700; }
/* An odd number of facts (there are three): the last one takes the whole row, so the line under
   it runs the full width instead of stopping halfway. One column on a phone, where this is moot. */
.facts__item:last-child:nth-child(odd) { grid-column: 1 / -1; }

.about__media { display: flex; flex-direction: column; gap: 20px; }
.about__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.media-card {
  position: relative; margin: 0; overflow: hidden; border-radius: 24px; border: 1px solid var(--line-10);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 16px), rgba(3, 13, 39, .5);
  will-change: transform;
}
.media-card--wide { aspect-ratio: 4 / 3; }
.media-card--square { aspect-ratio: 1; }
.media-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 22px 18px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0, 5, 16, .85));
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--ink-75);
}
.glance {
  aspect-ratio: 1; border-radius: 24px; border: 1px solid rgba(243, 140, 46, .4);
  background: linear-gradient(160deg, rgba(243, 140, 46, .25), rgba(243, 140, 46, .05));
  display: flex; flex-direction: column; padding: 22px; min-width: 0; will-change: transform;
}
.glance__title { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.glance__list { display: flex; flex-direction: column; justify-content: space-between; flex: 1; margin-top: 14px; gap: 10px; }
.glance__list dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-50); font-weight: 600; }
.glance__list dd { font-size: 14px; font-weight: 700; margin-top: 2px; line-height: 1.35; }

/* Read by screen readers, not drawn: a table's caption, an empty header cell's name. */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Fee table: on the front page inside the Register a team section (.register__fees), and
   smaller (.fee-table--compact) at the top of the form, in .fee-box.
   -------------------------------------------------------------------------- */
.fee-table-wrap { overflow-x: auto; }
.fee-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fee-table th, .fee-table td { text-align: left; vertical-align: top; padding: 14px 12px; border-bottom: 1px solid var(--line-10); }
.fee-table tr > :first-child { padding-left: 0; }
.fee-table tr > :last-child { padding-right: 0; }
.fee-table tbody tr:last-child > * { border-bottom: 0; }
.fee-table thead th { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.fee-table__who { display: block; margin-top: 5px; font-size: 12px; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--ink-55); font-weight: 500; }
.fee-table tbody th { font-size: 14px; font-weight: 600; color: var(--ink-75); padding-top: 18px; }
.fee-table__cur { font: inherit; }
.fee-table__note { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--ink-45); }
.fee-table td {
  font-family: var(--font-display); font-stretch: 100%; font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 800; letter-spacing: -.02em; white-space: nowrap;
}
/* In the form: smaller, and the column that applies to this team is lit once the form knows it. */
.fee-table--compact th, .fee-table--compact td { padding: 10px 10px; }
.fee-table--compact tbody th { padding-top: 12px; font-size: 13px; }
.fee-table--compact td { font-size: 19px; }
.fee-table .fee-table__cell.is-yours { color: var(--accent); background: rgba(243, 140, 46, .1); }
.fee-table thead .fee-table__cell.is-yours { border-radius: 10px 10px 0 0; }
.fee-table tr > .fee-table__cell:last-child { padding-right: 10px; }
.fee-box {
  margin: 20px 0 28px; padding: 18px 20px; border-radius: 18px;
  background: rgba(243, 140, 46, .06); border: 1px solid rgba(243, 140, 46, .3);
}
.fee-box__title { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.fee-box__line { margin-top: 12px; font-size: 13px; line-height: 1.55; color: var(--ink-60); }
.fee-box__line strong { color: var(--ink); font-weight: 700; }

/* --------------------------------------------------------------------------
   Registration
   -------------------------------------------------------------------------- */
.register {
  position: relative; padding: 120px var(--gutter) 160px;
  display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 48px; align-items: start;
  scroll-margin-top: 80px;
  background: linear-gradient(180deg, var(--bg), var(--navy) 30%);
}
.register__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(800px 500px at 100% 0%, rgba(243, 140, 46, .12), transparent 60%);
}
.register__aside { position: sticky; top: 100px; }
/* Teaser variant: main page just points to the standalone /registration page, no panel column. */
.register--teaser { grid-template-columns: minmax(0, 640px); justify-content: center; text-align: center; }
.register--teaser .register__aside { position: static; }
.register--teaser .register__title, .register--teaser .register__intro { white-space: normal; }
/* Positioned, so it paints over the fee card's shadow above it rather than under it (dimmed). */
.register--teaser .btn-primary { margin-top: 28px; position: relative; }
/* What a team pays, between the intro and the button, so the teaser reads as one block: who
   registers, what it costs, then the way in. The teaser is centred; the card reads from the left.
   A flat surface a shade lighter than the section, with a 1px orange edge that fades down the
   sides (as the form's panel border does). No wide wash or glow: the orange-to-navy gradient
   and the 80px orange halo it had showed as stepped rings (colour banding) on a dark screen. */
.register__fees {
  position: relative; margin-top: 36px; padding: 26px 30px 24px; text-align: left;
  border-radius: 24px; border: 1px solid transparent;
  background: linear-gradient(#0A1633, #0A1633) padding-box,
    linear-gradient(180deg, rgba(243, 140, 46, .6), rgba(243, 140, 46, .16) 70%) border-box;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
  will-change: transform;
}
/* Its table fills the card: a label column, then two equal fee columns whose headings and
   amounts sit flush right, so each amount is under its heading and the last column ends at the
   card's edge instead of leaving an empty strip. Labels sit level with their amounts. */
.register__fees .fee-table { table-layout: fixed; }
.register__fees .fee-table thead th:first-child { width: 30%; }
.register__fees .fee-table thead th + th, .register__fees .fee-table td { text-align: right; }
.register__fees .fee-table__who { text-wrap: balance; }
.register__fees .fee-table tbody th, .register__fees .fee-table tbody td { vertical-align: middle; padding-top: 16px; padding-bottom: 16px; }
.register__fees-title { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.register__fees-note { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line-10); font-size: 13px; line-height: 1.6; color: var(--ink-60); text-wrap: pretty; }
.register__title {
  font-family: var(--font-display); font-size: 56px; line-height: .96; letter-spacing: -.03em; font-weight: 800;
  font-stretch: 100%; margin: 14px 0 16px; white-space: nowrap;
}
.register__intro { font-size: 15px; line-height: 1.6; color: var(--ink-60); }
.progress { height: 3px; border-radius: 2px; background: var(--line-08); margin-top: 28px; overflow: hidden; }
.progress__bar {
  height: 100%; width: 12%; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .6s var(--ease);
}
.steps { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.step {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 0; text-align: left;
  font-size: 13px; font-weight: 600; background: transparent; color: var(--ink-55);
  transition: background .2s ease, color .2s ease, transform .1s ease-out;
}
.step:active:not(:disabled) { transform: scale(.985); }
.step:disabled { color: var(--ink-30); cursor: default; }
.step.is-active { background: rgba(255, 255, 255, .07); color: var(--ink); }
.step.is-done { color: var(--ink); }
.step__dot {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-size: 11px; font-family: var(--font-mono); background: transparent; color: inherit; border: 1px solid var(--line-20);
}
.step.is-done .step__dot { background: rgba(243, 140, 46, .15); color: var(--accent); border-color: rgba(243, 140, 46, .5); }
.step.is-active .step__dot { background: var(--accent); color: var(--navy); border-color: var(--accent); }
.register__note { margin-top: 24px; font-size: 12px; line-height: 1.6; color: var(--ink-40); }

.panel-wrap { position: relative; will-change: transform, opacity; min-width: 0; } /* min-width:0 lets the review table scroll instead of widening the page */
.panel-border {
  position: relative; border-radius: 28px; padding: 1px;
  background: linear-gradient(180deg, rgba(243, 140, 46, .45), var(--line-08) 40%);
}
.panel {
  min-width: 0; padding: 36px; border-radius: 27px; background: rgba(3, 13, 39, .88); min-height: 520px;
  -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .95);
}
.panel__noscript { color: var(--accent); font-weight: 600; }
.panel__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.panel__title { font-weight: 700; font-size: 20px; letter-spacing: -.015em; }
.panel__title-muted { color: var(--ink-45); font-weight: 500; }
.panel__step { font-family: var(--font-mono); font-size: 12px; color: var(--ink-45); white-space: nowrap; }

/* Choice cards (team type, team origin) */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.choice-grid--compact { margin-top: 14px; }
.choice {
  text-align: left; padding: 22px; border-radius: 18px; background: var(--well-30); border: 1px solid var(--line-10); color: var(--ink);
  transition: border-color .2s, background .2s, transform .1s ease-out;
}
.choice--compact { padding: 16px 18px; border-radius: 14px; }
.choice:active { transform: scale(.985); }
.choice.is-selected { background: rgba(243, 140, 46, .1); border-color: var(--accent); }
.choice__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.choice__name { font-weight: 700; font-size: 16px; }
.choice--compact .choice__name { font-size: 15px; }
.choice__radio {
  width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); display: grid; place-items: center;
}
.choice__radio-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.choice.is-selected .choice__radio { border-color: var(--accent); }
.choice.is-selected .choice__radio-dot { background: var(--accent); }
.choice__desc { font-size: 13px; color: var(--ink-60); margin-top: 8px; line-height: 1.5; }
.choice--compact .choice__desc { margin-top: 6px; }
.form-error { font-size: 13px; color: var(--accent); margin-top: 10px; font-weight: 600; }
.form-error--tight { margin-top: 8px; }

/* Fields */
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.fields--member { margin-top: 20px; }
.fields--teacher { margin-top: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--full { grid-column: span 2; }
.field__label { font-size: 12px; font-weight: 600; color: var(--ink-60); }
.input {
  height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-12);
  background: var(--well-50); color: var(--ink); font-size: 15px; width: 100%; min-width: 0;
  transition: border-color .15s, box-shadow .15s;
}
select.input {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23EEF1F8' stroke-opacity='.5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.input.has-error { border-color: var(--accent); }
.field__error { font-size: 12px; color: var(--accent); font-weight: 600; }
.phone-row { display: flex; gap: 8px; }
.phone-row .input--code { flex: none; width: 164px; padding-right: 34px; }
.field--phone .field__error { grid-column: 1 / -1; }
.phone-row .input:not(.input--code) { min-width: 0; flex: 1; }
.sub-block { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line-08); }
.sub-block--first { margin-top: 0; padding-top: 0; border-top: 0; }
.sub-block__title { font-weight: 700; font-size: 15px; }
.sub-block__hint { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--ink-40); }

/* File drop zones */
.drop {
  position: relative; height: 150px; border-radius: 14px; border: 1px dashed var(--line-22); background: var(--well-30);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; overflow: hidden; transition: border-color .15s, background .15s;
}
.drop:hover, .drop.is-dragging { background: rgba(243, 140, 46, .06); border-color: rgba(243, 140, 46, .6); }
.drop.has-error { border-color: var(--accent); }
.drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop__preview { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .85; pointer-events: none; }
.drop__label {
  position: relative; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 99px; pointer-events: none;
  background: rgba(3, 13, 39, .75); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.drop__hint {
  position: relative; font-size: 11px; color: var(--ink-55); padding: 0 12px; pointer-events: none; text-align: center;
  /* Wraps (7 Oct 2026): kept on one line, the photo box's longer hint ("Your face, not a CNIC or
     B-Form ...") widened the box past a 390 px phone and the page scrolled sideways. A long file
     name breaks anywhere instead of being cut off. */
  max-width: 100%; overflow-wrap: anywhere; text-wrap: balance;
}

/* Compact variant used inside member cards */
.fields--compact .input { height: 48px; border-radius: 12px; font-size: 14px; }
.fields--compact .drop { height: 130px; border-radius: 12px; }

/* Member accordion */
.member-list { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.member-card { border-radius: 20px; border: 1px solid var(--line-08); background: var(--well-25); overflow: hidden; }
.member-card__head {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 20px; background: transparent; border: 0; color: var(--ink); text-align: left; transition: background .15s;
}
.member-card__head:hover { background: rgba(255, 255, 255, .03); }
.member-card__left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
.member-card__num { font-family: var(--font-mono); font-size: 12px; color: var(--accent); }
.member-card__title { font-weight: 700; font-size: 15px; }
.member-card__sub { font-size: 12px; color: var(--ink-45); }
.member-card__right { display: flex; align-items: center; gap: 14px; flex: none; }
.member-card__status { font-size: 12px; font-weight: 600; color: var(--ink-40); }
.member-card__status.is-ok { color: var(--ok); }
.member-card__status.is-bad { color: var(--accent); }
.member-card__chev { display: inline-block; color: var(--ink-50); transition: transform .25s var(--ease); transform: rotate(0deg); }
.member-card__chev.is-open { transform: rotate(180deg); }
.member-card__body { padding: 4px 20px 20px; }
.member-card__body .fields { margin-top: 0; }
.member-card__actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.link-btn { background: transparent; border: 0; color: var(--ink-50); font-size: 12px; font-weight: 600; padding: 6px 0; transition: color .15s; }
.link-btn:hover { color: var(--accent); }
.add-btn {
  height: 56px; border-radius: 16px; border: 1px dashed var(--line-20); background: transparent; color: var(--ink-75);
  font-size: 14px; font-weight: 700; transition: border-color .15s, background .15s, color .15s, transform .1s ease-out;
}
.add-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(243, 140, 46, .05); }
.add-btn:active { transform: scale(.99); }
.add-btn__hint { font-weight: 500; color: var(--ink-45); }

/* Review */
.review-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.review-card { padding: 16px 18px; border-radius: 16px; background: var(--well-35); border: 1px solid var(--line-08); min-width: 0; }
.review-card__label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-40); font-weight: 600; }
.review-card__value { font-weight: 700; font-size: 15px; margin-top: 6px; overflow-wrap: anywhere; }
.review-teacher {
  margin-top: 12px; padding: 14px 18px; border-radius: 16px; background: var(--well-35); border: 1px solid var(--line-08);
  font-size: 13px; color: var(--ink-70); overflow-wrap: anywhere;
}
.review-teacher__label { color: var(--ink-40); font-weight: 600; }
.review-table { margin-top: 20px; border-radius: 18px; border: 1px solid var(--line-08); overflow: hidden; overflow-x: auto; }
.review-table__row {
  display: grid; grid-template-columns: 40px 1.4fr 1.1fr .8fr 1.1fr 1.5fr 64px; align-items: center; /* #, name, school, class, phone, ID (as typed), photo */
  padding: 14px 18px; font-size: 14px; border-top: 1px solid var(--line-06);
}
.review-table__row--head {
  padding: 10px 18px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-40); font-weight: 600;
  background: var(--well-35); border-top: 0;
}
.review-table__row > span { min-width: 0; overflow-wrap: anywhere; }
.review-table__num { font-family: var(--font-mono); font-size: 12px; color: var(--accent); }
.review-table__name { font-weight: 600; }
.review-table__role { font-size: 12px; color: var(--ink-45); font-weight: 500; }
.review-table__muted { color: var(--ink-75); }
.review-table__flag { font-size: 12px; font-weight: 700; }
.review-table__id { font-family: var(--font-mono); font-size: 12px; }
.review-table__flag.is-ok { color: var(--ok); }
.review-table__flag.is-bad { color: var(--accent); }
/* What the team is handing over, read once, just above the box they tick. Quieter than the
   checkbox itself so the thing that has to be agreed to still reads first. */
.consent-note { margin: 24px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-50); }
.consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; font-size: 13px; line-height: 1.5; color: var(--ink-70); cursor: pointer; }
.consent-note + .consent { margin-top: 12px; }
.consent input { margin: 3px 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }

/* Success */
.done { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 20px; }
.done__check {
  width: 72px; height: 72px; border-radius: 50%; background: rgba(243, 140, 46, .12); border: 1px solid rgba(243, 140, 46, .5);
  display: grid; place-items: center; font-size: 30px; color: var(--accent); box-shadow: 0 0 60px rgba(243, 140, 46, .35);
}
.done__title { font-family: var(--font-display); font-size: 40px; font-weight: 800; font-stretch: 100%; letter-spacing: -.03em; margin-top: 24px; }
.done__text { font-size: 15px; color: var(--ink-60); margin-top: 10px; max-width: 420px; line-height: 1.6; overflow-wrap: anywhere; }
.done__ref {
  margin-top: 24px; padding: 12px 20px; border-radius: 12px; background: var(--well-50); border: 1px solid var(--line-10);
  font-family: var(--font-mono); font-size: 16px; letter-spacing: .08em;
}
.done__ref-label { margin-top: 8px; font-size: 12px; color: var(--ink-60); }
.done__again { margin-top: 28px; font-size: 13px; }
/* The payment notice on the confirmation: what the team owes and where to take it. */
.done__due {
  margin-top: 28px; padding: 20px 24px; width: min(100%, 420px); border-radius: 18px;
  background: rgba(243, 140, 46, .08); border: 1px solid rgba(243, 140, 46, .35);
}
.done__due-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--orange, #F38C2E); }
.done__due-amount { font-family: var(--font-display); font-size: 34px; font-weight: 800; letter-spacing: -.02em; margin-top: 6px; }
.done__due-sum { font-size: 13px; color: var(--ink-60); margin-top: 4px; font-variant-numeric: tabular-nums; }
.done__due-text { font-size: 14px; color: var(--ink-60); margin-top: 8px; line-height: 1.6; }
.done__due-text strong { color: inherit; font-weight: 700; }
.done__due-pin { display: inline-block; margin-top: 12px; font-size: 13px; }
/* The help line under the amount due. The address is long, so it may break anywhere on a phone. */
.done__help { margin-top: 18px; max-width: 460px; font-size: 14px; line-height: 1.6; color: var(--ink-60); }
.done__help a { color: var(--accent); overflow-wrap: anywhere; }

/* Panel footer */
.panel__footer {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line-08);
}
.back-btn { flex: none; white-space: nowrap; background: transparent; border: 0; color: var(--ink-55); font-size: 14px; font-weight: 600; padding: 12px 4px; transition: color .15s; }
.back-btn:hover { color: var(--ink); }
.back-btn.is-hidden { visibility: hidden; }
/* The message beside the button can be a full sentence from the server ("the human check could
   not load..."). It takes the room that is left and wraps inside it, right-aligned against the
   button; when there is no room (a phone) it goes on a line of its own above the button. It must
   never squeeze Back into two lines, which it used to. */
.panel__footer-right { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; justify-content: flex-end; }
.step-error { flex: 1 1 240px; min-width: 0; font-size: 13px; line-height: 1.45; color: var(--accent); font-weight: 600; text-align: right; text-wrap: pretty; }
.panel__footer-right .next-btn { flex: none; }
.next-btn {
  padding: 14px 26px; border-radius: 99px; border: 0; background: var(--accent); color: var(--navy); font-weight: 800; font-size: 14px;
  transition: background .15s, transform .1s ease-out, opacity .15s; box-shadow: 0 10px 30px -10px rgba(243, 140, 46, .6);
}
.next-btn:hover { background: var(--accent-hover); }
.next-btn:active { transform: scale(.96); }
.next-btn:disabled { opacity: .7; cursor: progress; transform: none; }

/* --------------------------------------------------------------------------
   Modules (front page). The cards are the dashboard's own .course cards, so a
   module looks the same before and after a team registers: same photograph,
   same hue. Each card sits in a wrapper because .course brings its own
   transition and hover transform, which would fight the scroll reveal if both
   were on one element.
   -------------------------------------------------------------------------- */
.modules { position: relative; padding: 120px var(--gutter) 130px; scroll-margin-top: 80px; background: var(--bg); }
.modules__head { max-width: 720px; }
.modules__title {
  font-family: var(--font-display); font-stretch: 100%; font-weight: 800;
  font-size: clamp(34px, 4vw, 52px); line-height: .98; letter-spacing: -.03em; margin-top: 14px; text-wrap: balance;
}
.modules__lede { font-size: 16px; line-height: 1.65; color: var(--ink-72); margin-top: 20px; max-width: 560px; text-wrap: pretty; }
.modules__lede a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
/* Five modules since 7 Oct 2026 (Technological Turmoil removed): three cards, then two centred
   under them. A six-column grid with each card two columns wide lets the fourth card start in
   the second column. */
.modules__grid { margin-top: 52px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.modules__item { display: flex; grid-column: span 2; }
.modules__item:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
/* .course and its parts are declared further down this file with the same specificity, so
   these are written one class heavier or the dashboard's own numbers would win. */
.modules .module-card { flex: 1 1 auto; min-height: 320px; cursor: default; }
.modules .module-card .course__main { padding-right: 0; }
.modules .module-card .course__name { font-size: 27px; }
.modules .module-card .course__desc { max-width: none; margin-top: 12px; font-size: 14px; line-height: 1.6; }
/* Two a row, the fifth centred under them. */
@media (max-width: 1100px) {
  .modules__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .modules__item:nth-child(4):nth-last-child(2) { grid-column: span 2; }
  .modules__item:nth-child(odd):last-child { grid-column: 2 / span 2; }
}
@media (max-width: 680px) {
  .modules { padding: 88px var(--gutter) 96px; }
  .modules__grid { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  .modules__item, .modules__item:nth-child(4):nth-last-child(2), .modules__item:nth-child(odd):last-child { grid-column: auto; }
  .modules .module-card { min-height: 0; padding-top: 96px; }
}

/* --------------------------------------------------------------------------
   Venue
   -------------------------------------------------------------------------- */
.venue {
  position: relative; padding: 120px var(--gutter) 140px; scroll-margin-top: 80px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 56px; align-items: center;
  background: linear-gradient(180deg, var(--navy), var(--bg) 40%);
}
.venue__title {
  font-family: var(--font-display); font-stretch: 100%; font-weight: 800;
  font-size: clamp(34px, 4vw, 52px); line-height: .98; letter-spacing: -.03em; margin-top: 14px; text-wrap: balance;
}
.venue__lede { font-size: 16px; line-height: 1.65; color: var(--ink-72); margin-top: 20px; max-width: 460px; text-wrap: pretty; }
.venue__address {
  display: flex; flex-direction: column; gap: 2px; margin-top: 24px; padding: 18px 0;
  border-top: 1px solid var(--line-10); border-bottom: 1px solid var(--line-10); font-size: 15px; line-height: 1.5;
}
.venue__address-line:first-child { font-weight: 700; }
.venue__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 24px; }
.venue__map {
  position: relative; aspect-ratio: 16 / 11; border-radius: 24px; overflow: hidden;
  border: 1px solid var(--line-10); background: var(--navy);
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .95);
}
.venue__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.venue[hidden] { display: none; } /* .venue's own `display: grid` would otherwise beat the [hidden] default */

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  position: relative; border-top: 1px solid var(--line-06); padding: 22px var(--gutter);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-40); background: var(--bg);
}
.footer__links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer a { display: inline-block; padding: 10px 0; color: var(--ink-40); text-decoration: none; font-weight: 600; }
.footer a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .about { grid-template-columns: 1fr; gap: 48px; padding: 100px var(--gutter); }
  .about__copy { position: static; }
  .section-head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .register { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 96px var(--gutter) 120px; }
  .register__aside { position: static; }
  .register__title { white-space: normal; font-size: 56px; }
  .venue { grid-template-columns: 1fr; gap: 36px; align-items: start; padding: 96px var(--gutter) 110px; }
  .review-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* /registration and /venue are standalone pages: this section is the first thing under
     the fixed nav there, so it needs the hero's clearance, not the mid-page default above. */
  .register--page, .venue--page { padding-top: 124px; padding-bottom: 120px; }
}

/* Standalone pages (/registration, /venue) have one section and a footer. Without this the
   section is only as tall as its content, so on a tall screen the form hugs the nav and the
   footer floats mid-screen over a bare band of body background. The main column now fills
   the viewport, the footer sits at the bottom, and a short section (step 1 of the form) is
   centred in the space left instead of pressed against the top. */
.main--page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.main--page > .register--page, .main--page > .venue--page { flex: 1; align-content: center; }
.register--page .panel { min-height: 440px; }

@media (max-width: 767px) {
  .nav { height: 72px; gap: 12px; }
  .brand { gap: 10px; flex: 1 1 auto; min-width: 0; }
  .brand__logo { width: 44px; height: 44px; flex: none; }
  .brand__text { min-width: 0; }
  .brand__title { font-size: 14px; white-space: normal; line-height: 1.15; }
  .pill:not(.pill--primary) { display: none; }
  .hero { padding-top: 96px; }
  .hero__inner { flex-direction: column; align-items: stretch; gap: 22px; padding-bottom: 24px; }
  .hero__intro { max-width: none; gap: 14px; }
  .hero__meta { display: none; }           /* dates and venue are in the About section */
  .hero__sub { font-size: 15px; }
  .hero__actions .btn-link { display: none; }
  .hero__timer { align-items: stretch; }
  .countdown { transform: none !important; } /* no parallax/tilt when the card is stacked under the intro */
  .countdown__caption { text-align: left; line-height: 1.6; }
  .countdown__caption span { display: block; }
  .countdown__caption span:first-child, .countdown__caption .countdown__caption-sep { display: none; } /* one line: the closing date */
  /* Solid enough to read over content even where backdrop blur is unavailable */
  .nav.is-scrolled { background: rgba(0, 5, 16, .88); }
  .about { padding-top: 80px; padding-bottom: 80px; }
  .countdown { grid-template-columns: repeat(2, 1fr); }
  .countdown__group { padding: 18px 22px; }
  .countdown__digits { font-size: 42px; }
  .facts { grid-template-columns: 1fr; }
  .about__row { grid-template-columns: 1fr; }
  .glance { aspect-ratio: auto; }
  .glance__list { gap: 14px; }
  .register__title { font-size: 40px; }
  .register { padding-top: 72px; }
  .panel { padding: 22px; min-height: 0; }
  .fields, .choice-grid { grid-template-columns: 1fr; }
  .field--full { grid-column: auto; }
  .review-cards { grid-template-columns: 1fr; }
  .review-table__row { min-width: 760px; }
  .panel__footer { flex-wrap: wrap; }
  .input { font-size: 16px; } /* keeps iOS from zooming into fields */
  .fields--compact .input { font-size: 16px; }
  .done__title { font-size: 36px; }
  .venue { padding: 72px var(--gutter) 90px; }
  .register__fees { margin-top: 28px; padding: 22px 18px 20px; }
  .fee-table th, .fee-table td { padding: 12px 8px; }
  .fee-table td { font-size: 22px; }
  .fee-table--compact td { font-size: 17px; }
  .fee-box { padding: 16px 14px; }
  /* Same standalone-first-section clearance as the tablet rule above, sized for the 72px phone nav. */
  .register--page, .venue--page { padding-top: 104px; }
  .venue__map { aspect-ratio: 4 / 3; }
  .footer { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 479px) {
  :root { --gutter: 16px; }
  .brand__eyebrow { display: none; }
  .brand__title { margin-top: 0; white-space: normal; line-height: 1.15; }
  .countdown__digits { font-size: 36px; }
  .countdown__group { padding: 16px 18px; }
  .register__title { font-size: 40px; }
  .done { padding: 24px 0; }
  .hero__actions { gap: 14px; }
  .fee-table td { font-size: 19px; }
  .fee-table--compact th, .fee-table--compact td { padding: 8px 6px; }
  .fee-table--compact td { font-size: 18px; }
  /* Narrow phones: "PKR" goes above the number, so two columns of amounts fit beside the labels. */
  .fee-table__cur { display: block; font-family: var(--font-body); font-size: 11px; letter-spacing: .12em; font-weight: 700; color: var(--ink-50); margin-bottom: 2px; }
  .fee-table .is-yours .fee-table__cur { color: inherit; }
  /* Too narrow for equal columns: the front-page table sizes them to their content again, so the
     long External caption keeps two lines (four at 320 px) instead of a thin stack of five. */
  .register__fees .fee-table { table-layout: auto; }
  .register__fees .fee-table thead th:first-child { width: auto; }
}
@media (max-width: 359px) {
  .brand__title { font-size: 12px; }
  .pill--primary { padding: 8px 12px; font-size: 12px; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__photo { transform: none; }
}

/* --------------------------------------------------------------------------
   Team account: header control, login page, dashboard (js/auth.js)
   -------------------------------------------------------------------------- */
/* Sits inside .nav__pills as its last item, so it reads as part of the same capsule. */
.account { position: relative; display: flex; flex: none; }
/* Inside the header capsule the account control is a different kind of thing from the nav
   pills, so it gets room and a short divider instead of sitting 4px from the last pill. */
.nav__pills { align-items: center; }
.nav__pills .account { margin-left: 8px; padding-left: 12px; margin-right: 2px; }
.nav__pills .account::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 1px; height: 18px; transform: translateY(-50%);
  background: var(--line-12);
}
.account__btn {
  display: flex; align-items: center; gap: 8px; height: 36px; min-width: 36px; padding: 0 9px; border-radius: 99px;
  border: 1px solid var(--line-12); background: rgba(255, 255, 255, .04); color: var(--ink-72);
  font-size: 12px; font-weight: 700; transition: color .15s, background .15s, border-color .15s, transform .1s ease-out;
}
.account__btn:hover, .account__btn[aria-expanded="true"] { color: var(--ink); background: rgba(255, 255, 255, .1); border-color: var(--line-22); }
.account__btn:active { transform: scale(.96); }
.account__btn:disabled { opacity: .5; cursor: default; }
.account__btn.is-in { color: var(--accent); border-color: rgba(243, 140, 46, .45); background: rgba(243, 140, 46, .1); padding-right: 12px; }
.account__icon { flex: none; }
.account__btn-id { font-family: var(--font-mono); letter-spacing: .04em; white-space: nowrap; }
.account__menu {
  position: absolute; top: calc(100% + 12px); right: -4px; z-index: 50; width: 248px; padding: 6px;
  border-radius: 18px; border: 1px solid var(--line-12); background: rgba(3, 13, 39, .97);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .9);
  animation: account-in .16s var(--ease) both; transform-origin: top right;
}
@keyframes account-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.account__head { display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line-08); }
.account__label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--ink-45); }
.account__id { font-family: var(--font-mono); font-size: 16px; letter-spacing: .06em; color: var(--ink); margin-top: 4px; }
.account__name { font-size: 13px; color: var(--ink-60); overflow-wrap: anywhere; }
.account__hint { font-size: 12px; line-height: 1.5; color: var(--ink-55); margin-top: 4px; }
.account__item {
  display: block; width: 100%; padding: 11px 12px; border: 0; border-radius: 12px; background: transparent; text-align: left;
  font-size: 13px; font-weight: 600; color: var(--ink-72); text-decoration: none; transition: color .15s, background .15s;
}
.account__item:hover, .account__item:focus-visible { color: var(--ink); background: rgba(255, 255, 255, .07); }
.account__item:disabled { opacity: .6; cursor: progress; }
.account__item--primary { background: var(--accent); color: var(--navy); font-weight: 800; text-align: center; }
.account__item--primary:hover, .account__item--primary:focus-visible { background: var(--accent-hover); color: var(--navy); }

/* Login + dashboard reuse the /registration page's section and panel. */
.register--auth .panel { min-height: 0; }
.register--auth { isolation: isolate; overflow: clip; }
.register--auth::before {
  /* Fills the whole section, however tall the window: a fixed height left the photograph
     ending mid-page on a tall screen. It only fades out over the last stretch, into the footer. */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 5, 16, .2), rgba(0, 5, 16, .78) 62%),
    url(../assets/backdrop-tables-1280.jpg) 30% 50% / cover no-repeat;
  opacity: .34;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}
.register--staff::before { background-image: linear-gradient(90deg, rgba(0, 5, 16, .2), rgba(0, 5, 16, .78) 62%), url(../assets/backdrop-stage-1280.jpg); background-position: 0 0, 24% 30%; }
.fields--auth { grid-template-columns: 1fr; }
.fields--auth .field--full { grid-column: auto; }
.input--mono { font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.input--mono::placeholder { letter-spacing: .08em; }
.input-row { position: relative; display: flex; }
.input-row .input { padding-right: 72px; }
.input-row__btn {
  position: absolute; right: 6px; top: 6px; bottom: 6px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent;
  font-size: 12px; font-weight: 700; color: var(--ink-55); transition: color .15s, background .15s;
}
.input-row__btn:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }
.panel__footer--auth { justify-content: flex-end; }
.panel__footer--auth .next-btn { min-width: 140px; }
.register__note a { color: var(--ink-72); }
.register__note a:hover { color: var(--accent); }
/* "Change password" from a team's account menu reuses the first-login form (js/auth.js,
   initChangePassword): Cancel sits on the left of the footer, a line says the change is done,
   and the organisers' address can sit in an error. (The current-password field hides by its
   classless wrapper in login/index.html, so it needs no rule here.) */
.panel__footer--auth .back-btn { margin-right: auto; text-decoration: none; }
.form-done { font-size: 13px; font-weight: 600; color: var(--ok); margin-top: 10px; }
.form-error a { color: inherit; text-decoration: underline; overflow-wrap: anywhere; }

.dashboard { grid-template-columns: minmax(0, 1fr); }
.dashboard__wait { font-size: 14px; color: var(--ink-45); }
.dashboard__title { white-space: normal; overflow-wrap: anywhere; }
.dashboard__id { font-family: var(--font-mono); letter-spacing: .06em; color: var(--ink); }

@media (max-width: 767px) {
  /* The header is tight on a phone: keep the divider, give back most of the width. */
  .nav__pills .account { margin-left: 4px; padding-left: 9px; margin-right: 0; }
  .account__btn-id { display: none; }        /* icon only: the Team ID is one tap away, in the menu */
  .account__btn.is-in { padding-right: 9px; }
  .account__menu { position: fixed; top: 66px; right: var(--gutter); width: min(280px, calc(100vw - 2 * var(--gutter))); }
}
@media (prefers-reduced-motion: reduce) {
  .account__menu { animation: none; }
}
/* The account button takes ~40px of a phone header that was already full: the brand title
   is one unbreakable word ("Entrepreneurship"), so make room rather than let it slide
   under the pills. */
@media (max-width: 479px) {
  .nav { gap: 8px; }
  .brand { gap: 8px; }
  .brand__logo { width: 38px; height: 38px; }
  .brand__title { font-size: 12.5px; }
  .pill--primary { padding: 8px 11px; font-size: 12px; }
  .account__btn { height: 33px; min-width: 33px; padding: 0 7px; }
  .account__btn.is-in { padding-right: 7px; }
}
@media (max-width: 359px) {
  .brand__title { font-size: 11px; }
  .pill--primary { padding: 7px 9px; font-size: 11px; }
}

/* --------------------------------------------------------------------------
   Portal: team dashboard (js/portal.js), module page and admin panel (js/staff.js)
   -------------------------------------------------------------------------- */
.portal {
  position: relative; isolation: isolate; overflow: clip; flex: 1; padding: 132px var(--gutter) 120px;
  background: linear-gradient(180deg, var(--bg), var(--navy) 30%);
}
/* The hall on a summit morning, faded into the page, with the hero's glow and grid over it:
   the same depth as the landing page, so the portal does not feel like a different site. */
.portal::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 640px; z-index: -2; pointer-events: none;
  background: url(../assets/backdrop-hall-1280.jpg) 50% 60% / cover no-repeat; opacity: .22;
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .55) 46%, transparent);
  mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .55) 46%, transparent);
}
.portal::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 780px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(720px 420px at 84% 0%, rgba(243, 140, 46, .17), transparent 65%),
    radial-gradient(860px 540px at 6% 34%, rgba(61, 111, 165, .32), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 72px 72px;
  -webkit-mask-image: linear-gradient(180deg, #000 28%, transparent);
  mask-image: linear-gradient(180deg, #000 28%, transparent);
}
.portal__body, .portal > .portal__wait { position: relative; max-width: 880px; margin: 0 auto; }
.portal--wide .portal__body { max-width: 1180px; }
.portal__wait { font-size: 14px; color: var(--ink-45); }
.portal__head { margin-bottom: 36px; }
.portal__title { font-family: var(--font-display); font-size: 56px; line-height: 1; letter-spacing: -.03em; font-weight: 800; margin-top: 12px; overflow-wrap: anywhere; }
.portal__sub { margin-top: 12px; font-size: 14px; color: var(--ink-60); }
.portal__glance { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.portal__glance .chip { padding: 7px 14px; font-size: 12px; }
.portal__section { margin: 40px 0 14px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--ink-45); }
.portal__empty { padding: 28px; border-radius: 18px; border: 1px dashed var(--line-12); color: var(--ink-55); font-size: 14px; }
.portal__back { display: inline-block; margin-bottom: 18px; padding: 8px 0; font-size: 13px; font-weight: 600; color: var(--ink-60); text-decoration: none; }
.portal__back:hover { color: var(--accent); }
.mono { font-family: var(--font-mono); letter-spacing: .04em; }
.muted { color: var(--ink-45); font-size: 12px; }
.ok { color: var(--ok); font-size: 12px; }
.field__label-muted { color: var(--ink-40); font-weight: 500; }
.input--area { height: auto; min-height: 96px; padding: 14px 16px; line-height: 1.5; resize: vertical; font-family: inherit; }
.pill--static { cursor: default; color: var(--ink-45); }
.pill--static:hover { background: transparent; color: var(--ink-45); }

/* Photo backdrops. Four photographs from past summits, greyscale in the file (cheaper than a
   CSS filter on a phone) and tinted here with the module's hue. js/auth.js backdrop() picks
   one per module; -640 sits behind cards, -1280 behind banners. */
.bd { --photo-s: none; --photo-l: none; --focus: 50% 45%; }
.bd--hall   { --photo-s: url(../assets/backdrop-hall-640.jpg);   --photo-l: url(../assets/backdrop-hall-1280.jpg);   --focus: 50% 64%; }
.bd--tables { --photo-s: url(../assets/backdrop-tables-640.jpg); --photo-l: url(../assets/backdrop-tables-1280.jpg); --focus: 46% 58%; }
.bd--stage  { --photo-s: url(../assets/backdrop-stage-640.jpg);  --photo-l: url(../assets/backdrop-stage-1280.jpg);  --focus: 24% 30%; }
.bd--pitch  { --photo-s: url(../assets/backdrop-pitch-640.jpg);  --photo-l: url(../assets/backdrop-pitch-1280.jpg);  --focus: 62% 46%; }
.bd--alt    { --focus: 84% 72%; }   /* a second crop, for the second module on the same photograph */

/* Module list: a card per module over its photograph. --h is the hue js/portal.js derives
   from the module, so a module looks the same in the list and on its own page. */
.course-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.course {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 196px; padding: 24px 24px 22px; border-radius: 24px; text-decoration: none; color: var(--ink);
  background: var(--navy); border: 1px solid var(--line-10);
  transition: transform .35s var(--ease), border-color .25s, box-shadow .35s var(--ease);
}
.course::before {
  content: ''; position: absolute; inset: 0; z-index: -2; background: var(--photo-s) var(--focus) / cover no-repeat;
  opacity: .62; transform: scale(1.03); transition: transform .9s var(--ease), opacity .35s;
}
.course::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(3, 13, 39, .28), rgba(3, 13, 39, .8) 54%, rgba(3, 13, 39, .97)),
    linear-gradient(120deg, hsla(var(--h), 78%, 52%, .55), hsla(var(--h), 78%, 52%, .1) 48%, transparent 72%);
}
.course:hover, .course:focus-visible {
  color: var(--ink); transform: translateY(-4px); border-color: hsla(var(--h), 80%, 68%, .6);
  box-shadow: 0 30px 70px -36px hsla(var(--h), 85%, 50%, .8);
}
.course:hover::before, .course:focus-visible::before { transform: scale(1.09); opacity: .86; }
.course:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.course--general { grid-column: 1 / -1; min-height: 156px; --h: 27; }
.course__main { min-width: 0; display: flex; flex-direction: column; padding-right: 56px; }
.course__name { font-family: var(--font-display); font-weight: 800; font-size: 25px; line-height: 1.05; letter-spacing: -.028em; overflow-wrap: anywhere; }
.course__desc { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--ink-75); max-width: 46ch; }
.course__meta { margin-top: 10px; font-size: 12px; color: var(--ink-55); }
.course__side { position: absolute; top: 18px; right: 18px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.course .chip, .banner .chip { background: rgba(0, 5, 16, .62); color: var(--ink-75); }
.course .chip--new, .banner .chip--new { color: var(--navy); background: var(--accent); }
.course .chip--ok, .banner .chip--ok { color: var(--ok); }
.course .chip--due, .banner .chip--due { color: var(--accent-2); }
.course__go {
  position: absolute; right: 22px; bottom: 22px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-size: 16px; line-height: 1; color: var(--ink); border: 1px solid var(--line-20); background: rgba(0, 5, 16, .4);
  transition: transform .35s var(--ease), background .25s, color .25s, border-color .25s;
}
.course:hover .course__go, .course:focus-visible .course__go { transform: translateX(4px); background: var(--accent); color: var(--navy); border-color: transparent; }
.chip { display: inline-block; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--ink-60); background: rgba(255, 255, 255, .07); }
.chip--new { color: var(--navy); background: var(--accent); }
.chip--ok { color: var(--ok); background: rgba(123, 216, 143, .12); }
.chip--due { color: var(--accent-2); background: rgba(243, 140, 46, .14); }

/* "Your team" under the module list (js/portal.js membersHtml): the members as registered,
   read-only, with whom to email to correct a name. */
.roster {
  padding: 20px 24px; border-radius: 20px; border: 1px solid var(--line-10);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
}
.roster__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.roster__item { min-width: 0; display: flex; flex-direction: column; }
.roster__name { font-size: 15px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.roster__class { margin-top: 2px; font-size: 12px; color: var(--ink-55); }
.roster__note { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-08); font-size: 13px; line-height: 1.6; color: var(--ink-60); }
.roster__note a { color: var(--accent); overflow-wrap: anywhere; }

/* "Files" on a module's page and on the organisers' page (js/portal.js downloadsHtml): one row
   per file and the whole row is the button. A round's files sit under the round's name. */
.downloads__group { display: flex; flex-direction: column; gap: 8px; }
.downloads__group + .downloads__group { margin-top: 18px; }
.downloads__head { font-size: 13px; font-weight: 700; color: var(--ink-75); overflow-wrap: anywhere; }
.dl-row {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; text-align: left; font: inherit; color: var(--ink);
  border-radius: 16px; border: 1px solid var(--line-10); cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  transition: border-color .2s, background-color .2s;
}
.dl-row:hover, .dl-row:focus-visible { border-color: var(--line-22); background-color: rgba(255, 255, 255, .04); }
.dl-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dl-row:disabled { cursor: progress; opacity: .7; }
.dl-row__tag {
  flex: none; min-width: 48px; padding: 8px 6px; border-radius: 10px; text-align: center;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--navy); background: var(--accent-2);
}
.dl-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dl-row__title { font-size: 15px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.dl-row__meta { font-size: 12px; color: var(--ink-55); overflow-wrap: anywhere; }
.dl-row__go { flex: none; font-size: 13px; font-weight: 700; color: var(--accent); }
/* A file this device has not shown before (js/portal.js, "new files"): an orange edge and a
   "New" chip beside its title, as a new announcement has. */
.dl-row.is-new { border-color: rgba(243, 140, 46, .55); background: linear-gradient(180deg, rgba(243, 140, 46, .12), rgba(255, 255, 255, .02)); }
.dl-row.is-new:hover, .dl-row.is-new:focus-visible { border-color: var(--accent); }
.dl-row.is-new .dl-row__title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
@media (max-width: 767px) {
  .roster { padding: 18px; border-radius: 18px; }
  .roster__list { grid-template-columns: 1fr; gap: 10px; }
}

/* A module: banner over its photograph, "your work", stream of posts */
.banner {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 310px; padding: 40px; border-radius: 28px; border: 1px solid var(--line-12); background: var(--navy);
  box-shadow: 0 60px 120px -70px hsla(var(--h), 85%, 50%, .75);
}
.banner::before {
  content: ''; position: absolute; inset: -6%; z-index: -2; background: var(--photo-l) var(--focus) / cover no-repeat;
  opacity: .8; animation: banner-drift 38s ease-in-out infinite alternate; will-change: transform;
}
.banner::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(3, 13, 39, .95), rgba(3, 13, 39, .68) 46%, rgba(3, 13, 39, .3)),
    linear-gradient(180deg, transparent 38%, rgba(3, 13, 39, .92)),
    radial-gradient(720px 340px at 100% 0%, hsla(var(--h), 85%, 58%, .55), transparent 70%);
}
@keyframes banner-drift { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.08) translate3d(-1.5%, -1%, 0); } }
.banner--slim { min-height: 230px; }
.banner + .cards { margin-top: 20px; }
.banner__eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--accent-2); }
.banner__title { font-family: var(--font-display); font-size: 58px; line-height: .98; letter-spacing: -.035em; font-weight: 800; margin-top: 12px; overflow-wrap: anywhere; text-wrap: balance; }
.banner__desc { margin-top: 14px; font-size: 15px; line-height: 1.55; color: var(--ink-75); max-width: 56ch; }
.banner__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.banner__meta .chip { padding: 6px 13px; font-size: 12px; }
.stream { display: flex; flex-direction: column; gap: 12px; }
.post {
  padding: 22px 24px; border-radius: 20px; border: 1px solid var(--line-10);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  transition: border-color .2s, transform .3s var(--ease);
}
.post:hover { border-color: var(--line-20); }
.post.is-new { border-color: rgba(243, 140, 46, .5); background: linear-gradient(180deg, rgba(243, 140, 46, .1), rgba(243, 140, 46, .03)); }
.post__head { display: flex; align-items: center; gap: 12px; }
.post__avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--navy); background: var(--accent-2); }
.post__by { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.post__from { font-size: 13px; font-weight: 700; }
.post__when { font-size: 12px; color: var(--ink-45); }
.post__title { margin-top: 14px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.post__body { margin-top: 6px; font-size: 14px; line-height: 1.65; color: var(--ink-75); white-space: pre-wrap; overflow-wrap: anywhere; }
.post__actions { display: flex; gap: 18px; align-items: center; margin-top: 14px; }
.post--editing { display: flex; flex-direction: column; gap: 12px; }
.link-btn--danger:hover { color: #ff8f8f; }
/* Deleting a team: folded away under the everyday buttons of an open team, and plainly the
   dangerous part of the row once it is open. */
.team-delete { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line-08); }
.team-delete summary { cursor: pointer; font-weight: 600; font-size: 12px; color: var(--ink-55); }
.team-delete summary:hover, .team-delete[open] summary { color: #ff8f8f; }
.team-delete > * + * { margin-top: 14px; }   /* a <details> does not lay its children out as a grid */
.team-delete .detail__actions { margin-top: 16px; }
.team-delete__row { display: grid; grid-template-columns: minmax(0, 260px); }
/* Deleted teams, kept 30 days: folded away below the Teams table (js/staff.js drawDeleted). */
.deleted-teams { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line-08); }
.deleted-teams summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--ink-55); }
.deleted-teams summary:hover, .deleted-teams[open] summary { color: var(--ink-75); }
.deleted-teams > * + * { margin-top: 14px; }
.deleted-teams__note { display: block; margin-top: 2px; font-size: 12px; }
.deleted-teams__actions { display: inline-flex; gap: 16px; flex-wrap: wrap; }
/* Files for teams to download (js/staff.js filesPanel): on a module's page, and beside the
   composer in the admin's Announcements tab. */
.files-panel .card__title { margin-bottom: 6px; }
.files-panel__intro { font-size: 13px; line-height: 1.6; margin-bottom: 18px; max-width: 72ch; }
/* Flex, not an auto-fit grid: a full-width row in an auto-fit grid keeps an empty column open. */
.files-panel__form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.files-panel__form > .field { flex: 1 1 220px; min-width: 0; }
.files-panel__form .meter, .files-panel__form .composer__foot { flex: 1 1 100%; }
.files-panel__form .meter { margin-top: 0; }
.files-panel__form input[type="file"] { height: auto; padding: 13px 14px; font-size: 13px; }
.files-panel__list { margin-top: 26px; display: flex; flex-direction: column; gap: 22px; }
.dl-group__title { font-size: 13px; font-weight: 700; color: var(--ink-75); overflow-wrap: anywhere; }
.dl-group__note { margin-top: 2px; font-size: 12px; }
.dl-group__empty { margin-top: 10px; font-size: 13px; color: var(--ink-45); }
.dl-item { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-08); }
.dl-item__main { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dl-item__title { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.dl-item__meta { font-size: 12px; overflow-wrap: anywhere; }
.dl-item__actions { display: flex; gap: 18px; }
.toolbar [data-teams-flash] { flex: 1 1 100%; }
.receipts { margin-top: 12px; font-size: 13px; color: var(--ink-60); }
.receipts summary { cursor: pointer; font-weight: 600; font-size: 12px; color: var(--ink-55); }
.receipts ul { margin-top: 8px; display: grid; gap: 4px; }

.work {
  margin-top: 16px; padding: 24px; border-radius: 22px; border: 1px solid var(--line-12);
  background: linear-gradient(180deg, rgba(243, 140, 46, .07), rgba(3, 13, 39, .72) 46%);
  box-shadow: 0 40px 90px -60px rgba(0, 0, 0, .9);
}
.work__title { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.work__tag { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; color: var(--ink-60); background: rgba(255, 255, 255, .07); }
.work__file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; font-size: 14px; }
.work__check { color: var(--ok); font-weight: 800; }
.work__name { font-weight: 600; overflow-wrap: anywhere; }
.work__size { color: var(--ink-45); font-size: 12px; }
.work__hint { margin-top: 12px; font-size: 12px; line-height: 1.6; color: var(--ink-45); }
.work__status { margin-top: 10px; font-size: 13px; color: var(--ink-60); }
.work__pick { position: relative; display: inline-block; margin-top: 16px; cursor: pointer; }
.work__pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.work__pick .next-btn { display: inline-block; pointer-events: none; }
.work__pick:focus-within .next-btn { outline: 2px solid var(--accent); outline-offset: 3px; }
.work__actions { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
.meter { height: 8px; margin-top: 14px; border-radius: 99px; background: var(--line-08); overflow: hidden; }
.meter__bar { height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .3s ease; }

/* Staff pages */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start; }
.card {
  padding: 26px; border-radius: 22px; border: 1px solid var(--line-10); min-width: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(3, 13, 39, .72) 38%);
  box-shadow: 0 40px 90px -60px rgba(0, 0, 0, .9);
}
.card__title { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.composer { display: flex; flex-direction: column; gap: 14px; }
.composer .card__title { margin-bottom: 0; }
.composer__foot { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; }
.notice { font-size: 13px; font-weight: 600; color: var(--ok); }
.notice--bad { color: var(--accent); }
p.notice { margin: 16px 0; padding: 12px 16px; border-radius: 12px; background: rgba(243, 140, 46, .08); }
.picker { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.picker__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; max-height: 220px; overflow: auto; padding: 12px; border-radius: 12px; border: 1px solid var(--line-10); background: var(--well-30); }
.picker__list[hidden] { display: none; }
.radio, .check, .switch { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-75); cursor: pointer; }
.radio input, .check input, .switch input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.secret { margin-bottom: 18px; padding: 18px 20px; border-radius: 16px; border: 1px solid rgba(243, 140, 46, .5); background: rgba(243, 140, 46, .08); }
.secret__title { font-size: 13px; font-weight: 700; color: var(--accent-2); margin-bottom: 10px; }
.secret__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; padding: 3px 0; }
.secret__label { width: 80px; font-size: 12px; color: var(--ink-55); }
.secret code { font-family: var(--font-mono); font-size: 15px; letter-spacing: .04em; user-select: all; overflow-wrap: anywhere; }

.tabs { display: flex; gap: 4px; padding: 4px; margin: 22px 0 24px; border-radius: 99px; width: max-content; max-width: 100%; overflow-x: auto; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-08); }
.tab { padding: 9px 18px; border: 0; border-radius: 99px; background: transparent; font-size: 13px; font-weight: 600; color: var(--ink-60); white-space: nowrap; transition: color .15s, background .15s; }
.tab:hover { color: var(--ink); }
.tab.is-active { background: var(--accent); color: var(--navy); font-weight: 700; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }   /* eight tiles: 4 x 2, never an orphan row */
.tile {
  position: relative; padding: 20px 22px; border-radius: 20px; border: 1px solid var(--line-10); min-width: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
  transition: border-color .2s, transform .3s var(--ease);
}
.tile:hover { border-color: var(--line-22); transform: translateY(-2px); }
/* State is said twice: by the number's colour and by a dot, so it reads at a glance. */
.tile--ok::after, .tile--warn::after, .tile--bad::after { content: ''; position: absolute; top: 20px; right: 20px; width: 8px; height: 8px; border-radius: 50%; }
.tile--ok::after { background: var(--ok); box-shadow: 0 0 0 4px rgba(123, 216, 143, .16); }
.tile--warn::after { background: var(--accent-2); box-shadow: 0 0 0 4px rgba(255, 182, 114, .16); }
.tile--bad::after { background: var(--accent); box-shadow: 0 0 0 4px rgba(243, 140, 46, .2); }
.tile__label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--ink-45); }
.tile__value { margin-top: 10px; font-variant-numeric: tabular-nums; font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.tile__sub { margin-top: 4px; font-size: 12px; color: var(--ink-55); overflow-wrap: anywhere; }
.tile--ok .tile__value { color: var(--ok); }
.tile--warn .tile__value { color: var(--accent-2); }
.tile--bad { border-color: rgba(243, 140, 46, .5); }
.tile--bad .tile__value { color: var(--accent); }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 140px; margin-bottom: 14px; overflow-x: auto; }
.bars__col { flex: 1 0 22px; max-width: 48px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.bars__bar { width: 100%; min-height: 2px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--accent), rgba(243, 140, 46, .35)); }
.bars__n { font-size: 11px; font-weight: 700; order: -1; }
.bars__d { font-size: 10px; color: var(--ink-40); font-family: var(--font-mono); }
.log { display: grid; gap: 8px; max-height: 320px; overflow: auto; font-size: 13px; line-height: 1.5; color: var(--ink-75); overflow-wrap: anywhere; }
.log__when { display: inline-block; min-width: 108px; font-size: 11px; color: var(--ink-40); font-family: var(--font-mono); }
.toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar .input { max-width: 460px; }
.table-wrap { overflow-x: auto; border-radius: 20px; border: 1px solid var(--line-10); background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015)); }
.table tbody tr.row { transition: background .15s; }
.table tbody tr.row:hover td { background: rgba(255, 255, 255, .035); }
.address-note { margin: 0 0 18px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line-08); background: var(--well-25); font-size: 12px; line-height: 1.6; color: var(--ink-55); }
.table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
.table th { text-align: left; padding: 12px 16px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-45); border-bottom: 1px solid var(--line-10); white-space: nowrap; }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--line-06); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table a { color: var(--ink); }
/* A row's buttons, in a <div> inside the cell: never on the <td> itself, which would leave the
   table layout and draw its border and hover off the row's line (Modules tab, 7 Oct 2026). */
.table .actions { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.row.is-open td { background: rgba(255, 255, 255, .04); }
.row-detail td { background: rgba(255, 255, 255, .025); }
.detail { display: flex; flex-direction: column; gap: 14px; padding: 6px 0 10px; }
.detail__grid { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 14px; }
.detail__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
/* A line under one control of a detail form (js/staff.js: what "rejected" and "withdrawn" do).
   Not .muted: the phone rule `.table td .muted { display: block }` would beat [hidden]. */
.detail__note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-45); }
.detail__note[hidden] { display: none; }
/* The module heads on one module, inside the Modules tab's expanded row. A plain list
   rather than a second table, so it still reads as one line per person on a phone. */
.people { list-style: none; margin: 0; padding: 0; }
.people__row { display: flex; align-items: center; justify-content: space-between; gap: 6px 20px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line-06); }
.people__row:first-child { border-top: 0; padding-top: 0; }
.people__who { min-width: 0; overflow-wrap: anywhere; }
.people__who .muted { margin-top: 3px; font-size: 12px; }
/* Two fields of the same weight, unlike the Teams tab's narrow status beside a wide note. */
.detail__grid--even { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* The top padding clears the fixed .nav (84px tall here, 72px under the phone breakpoint
   below) so a modal never opens with its title row under the header. The box's own
   max-height matches that same padding, so a box taller than the space left scrolls inside
   itself instead of pushing back up under the header or off the bottom of the screen; the
   Save/Cancel row at its foot stays reachable by scrolling, not by resizing the modal. */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 104px 20px 24px; background: rgba(0, 5, 16, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.modal[hidden] { display: none; }
.modal__box { width: min(100%, 900px); max-height: calc(100vh - 128px); overflow-y: auto; padding: 18px; border-radius: 20px; border: 1px solid var(--line-12); background: var(--navy); }
.modal__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.modal__video { display: block; width: 100%; max-height: 70vh; border-radius: 12px; background: #000; }
.account__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(243, 140, 46, .25); flex: none; }
.account__count { float: right; font-size: 11px; font-weight: 700; color: var(--accent); }

/* --------------------------------------------------------------------------
   Admin panel: a list's toolbar (search, filter, then the CSV links pushed to the right), the
   grey chip, and the small heading over each part of an open row. Used by the Revenue tab.
   First written for the Venture Pass tab (removed with the Venture Pass, 9 October 2026, when
   these were renamed from vp-*). The table, the open row (.row-detail and .detail) and the
   other chips are the Teams tab's.
   -------------------------------------------------------------------------- */
.list-toolbar .list-toolbar__filter { width: auto; flex: 0 1 200px; }
.list-toolbar__actions { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-left: auto; }
.chip.chip--muted { color: var(--ink-45); background: rgba(255, 255, 255, .04); }
.detail__heading { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--ink-45); }
@media (max-width: 767px) {
  .list-toolbar .list-toolbar__filter { flex: 1 1 100%; }
  .list-toolbar__actions { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Admin panel: the Revenue tab (js/staff.js, "revenue"). ADDED October 2026, a block of its
   own; nothing outside it changed. The tiles are the Overview's, the toolbar and grey chip are
   the block above, the table and open row the Teams tab's; these are only the pieces they did
   not have. With seven tabs a phone shows them as rows of three, three and one.
   -------------------------------------------------------------------------- */
.rev-tiles { margin-bottom: 12px; }
.rev-note { margin: 0 0 14px; font-size: 12px; line-height: 1.6; }
.rev-split { margin-bottom: 10px; }
.rev-split .table { min-width: 560px; }
.table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rev-table td .muted { display: block; margin-top: 2px; font-size: 12px; white-space: normal; }
.rev-over { font-weight: 600; color: var(--ok); }
.rev-detail__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px 28px; align-items: start; margin-top: 12px; }
.rev-pays { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.rev-pay { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-08); background: var(--well-25); font-size: 13px; line-height: 1.5; color: var(--ink-75); overflow-wrap: anywhere; }
.rev-pay__when { min-width: 92px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-45); }
.rev-pay__amount { font-variant-numeric: tabular-nums; }
.rev-pay .muted { flex: 1 1 100%; font-size: 12px; }
.rev-pay .link-btn { margin-left: auto; }
.rev-form { display: flex; flex-direction: column; gap: 12px; }
.rev-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.rev-waive { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-08); font-size: 13px; line-height: 1.6; color: var(--ink-75); }
.rev-waive__row { display: flex; flex-wrap: wrap; gap: 10px; }
.rev-waive__row .input { flex: 1 1 220px; }
.rev-deleted { margin-top: 18px; }
.bot-card { margin-bottom: 18px; }
.bot-item .chip { align-self: center; }
.bot-item__notes { flex: 1 1 100%; font-size: 12px; color: var(--accent-2); }
.bot-toolbar { flex-wrap: wrap; }
.bot-toolbar .input[type="search"] { flex: 1 1 220px; }
.bot-log { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bot-entry { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-08); background: var(--well-25); }
.bot-entry--trial { border-style: dashed; border-color: var(--line-20); }
.bot-entry__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: var(--ink-75); }
.bot-entry__from { margin-left: auto; overflow-wrap: anywhere; }
.bot-entry .bot-item__notes { margin: 0; }
.bot-entry__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 24px; }
.bot-entry__col .detail__heading { margin-bottom: 6px; }
.bot-entry__text { margin: 0; max-height: 22em; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.55; color: var(--ink-75); }
.bot-entry__reply { padding-left: 10px; border-left: 2px solid var(--accent); }
.bot-entry__read { margin: 8px 0 0; font-size: 12px; line-height: 1.5; }
.bot-pics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bot-pic { display: grid; place-items: center; width: 112px; height: 112px; padding: 0; overflow: hidden; border-radius: 10px; border: 1px solid var(--line-12); background: var(--line-06); color: var(--ink-45); font: inherit; font-size: 12px; cursor: zoom-in; }
.bot-pic[disabled] { cursor: default; }
.bot-pic[data-bot-kind="pdf"] { cursor: pointer; color: var(--accent-2); font-weight: 600; }
.bot-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bot-pic:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bot-view { max-width: min(92vw, 900px); max-height: 92vh; padding: 12px; border-radius: 14px; border: 1px solid var(--line-12); background: var(--navy); color: var(--ink); }
.bot-view::backdrop { background: rgba(0, 5, 16, .8); }
.bot-view img { display: block; max-width: 100%; max-height: calc(92vh - 64px); margin-top: 8px; }
.bot-view__close { display: block; margin-left: auto; }
@media (max-width: 767px) {
  .bot-entry__cols { grid-template-columns: minmax(0, 1fr); }
  .bot-entry__from { margin-left: 0; flex: 1 1 100%; }
}
@media (max-width: 1000px) {
  .rev-detail__cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .rev-split .table { min-width: 0; }
  .rev-form__grid { grid-template-columns: minmax(0, 1fr); }
  .rev-waive__row .btn-secondary { width: 100%; }
  .rev-pay .link-btn { margin-left: 0; }
}

@media (max-width: 767px) {
  .portal { padding: 104px var(--gutter) 90px; }
  .portal__title { font-size: 36px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { padding: 16px; }
  .tile__value { font-size: 24px; }
  .portal::before { height: 460px; }
  .banner { min-height: 250px; padding: 26px 22px 24px; border-radius: 24px; }
  .banner--slim { min-height: 200px; }
  .banner::before { animation: none; inset: 0; }   /* a slow zoom is wasted work on a phone's GPU */
  .banner__title { font-size: 36px; }
  .banner__desc { font-size: 14px; }
  .course-list { grid-template-columns: 1fr; gap: 12px; }
  .course { min-height: 168px; padding: 20px 20px 18px; border-radius: 22px; }
  .course--general { min-height: 148px; }
  .course__name { font-size: 22px; }
  .course__go { right: 18px; bottom: 18px; width: 34px; height: 34px; }
  .detail__grid { grid-template-columns: 1fr; }
  .card { padding: 20px; }
}

/* Loading skeletons (js/portal.js, js/staff.js): the layout's shapes, gently pulsing, until
   the first answer arrives. Static for anyone who prefers reduced motion (rule above). */
.skel-wrap { display: flex; flex-direction: column; gap: 10px; }
.skel { border-radius: 18px; background: linear-gradient(90deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .09), rgba(255, 255, 255, .04)); background-size: 200% 100%; animation: skel 1.4s ease-in-out infinite; }
.skel--title { height: 46px; width: min(420px, 70%); margin-top: 28px; border-radius: 12px; }
.skel--line { height: 14px; width: min(220px, 45%); margin-bottom: 34px; border-radius: 8px; }
.skel--row { height: 84px; }
.skel--banner { height: 168px; border-radius: 24px; margin-bottom: 30px; }
.skel--post { height: 132px; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* --------------------------------------------------------------------------
   Phones. Everything above already reflows; this block is about thumbs and cheap GPUs:
   controls at least 40px tall, tables turned into cards instead of scrolling sideways, a
   registration header that does not push the form a screen down, and lighter effects.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Tap targets */
  .pill--primary { min-height: 40px; display: inline-flex; align-items: center; }
  .account__btn { height: 40px; min-width: 40px; padding: 0 10px; justify-content: center; }
  .account__btn.is-in { padding-right: 10px; }
  .account__item { padding: 14px 12px; }
  .link-btn { min-height: 40px; padding: 10px 2px; font-size: 13px; }
  .back-btn { min-height: 44px; }
  .portal__back { padding: 12px 0; margin-bottom: 10px; }
  .footer a { padding: 13px 0; }
  .footer__links { gap: 4px 20px; flex-wrap: wrap; }
  .radio, .check, .switch { min-height: 40px; font-size: 14px; }
  .radio input, .check input, .switch input, .consent input { width: 22px; height: 22px; }
  .receipts summary { padding: 11px 0; font-size: 13px; }
  .input-row__btn { padding: 0 16px; font-size: 13px; }
  .member-card__head { min-height: 56px; }
  .chip { font-size: 12px; padding: 5px 10px; }
  .drop__hint, .review-card__label, .countdown__label, .work__tag { font-size: 12px; }

  /* Tabs: all six visible, none cut off. Two rows of three: in one row Settings (where the
     kill switches are) was off the edge of a phone with nothing to say it was there. */
  .tabs { width: 100%; gap: 2px; flex-wrap: wrap; border-radius: 22px; overflow: visible; }
  .tab { flex: 1 1 30%; min-height: 40px; padding: 10px 8px; font-size: 12.5px; text-align: center; }

  /* Tables become a list of cards; each cell is labelled from its data-label */
  .table-wrap { overflow: visible; border: 0; background: transparent; border-radius: 0; }
  .table { min-width: 0; display: block; font-size: 14px; }
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table tbody { display: flex; flex-direction: column; gap: 10px; }
  .table tr { display: block; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line-10); background: rgba(255, 255, 255, .03); }
  /* label | value. A grid rather than flex, so a value made of text plus a muted second line
     stays one column instead of becoming two side-by-side flex items. */
  .table td { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; align-items: baseline; padding: 7px 0; border: 0; text-align: left; overflow-wrap: anywhere; min-width: 0; }
  .table td > * { grid-column: 2; min-width: 0; }
  .table td > .chip, .table td > .link-btn { justify-self: start; }
  .table td > a { padding: 9px 0; margin: -9px 0; }   /* a 40px target without moving the text */
  .table td::before { content: attr(data-label); grid-column: 1; grid-row: 1 / span 4; padding-top: 2px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--ink-45); }
  .table td:first-child { padding-top: 0; font-size: 16px; }
  .table td .muted { display: block; }
  .table td.cell-actions, .table td.cell-action { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 0 18px; padding-bottom: 0; }
  .table td.cell-actions::before, .table td.cell-action::before { content: none; }
  .table td.cell-actions .actions { gap: 0 18px; }
  .table tr.row.is-open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; background: rgba(255, 255, 255, .05); }
  .table tr.row-detail { margin-top: -10px; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; background: rgba(255, 255, 255, .05); }
  .table tr.row-detail td { display: block; text-align: left; padding: 0; }
  .table tr.row-detail td::before { content: none; }
  .row.is-open td, .row-detail td { background: transparent; }
  .detail__actions { gap: 4px 18px; }
  .detail__actions .next-btn { width: 100%; }
  .toolbar .input { max-width: none; }
  .picker__list { grid-template-columns: 1fr; max-height: 260px; }
  .composer__foot { justify-content: stretch; }
  .composer__foot .next-btn, .panel__footer--auth .next-btn { width: 100%; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile { padding: 14px 16px; }
  .tile__value { font-size: 20px; }
  .log__when { display: block; min-width: 0; }
  .secret code { font-size: 14px; }
  .modal { padding: 88px 12px 16px; }   /* clears the 72px phone nav (see the desktop rule above) */
  .modal__box { padding: 14px; max-height: calc(100vh - 104px); }

  /* Registration: the four steps become one compact row, so the form starts on the first
     screen instead of the second. Only the current step keeps its label. */
  .register__aside { display: flex; flex-direction: column; }
  .register__intro { font-size: 14px; }
  .progress { margin-top: 20px; }
  .steps { flex-direction: row; gap: 6px; margin-top: 12px; }
  .step { flex: 0 0 auto; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 10px; font-size: 0; }
  .step.is-active { flex: 1 1 auto; justify-content: flex-start; font-size: 13px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .step__dot { width: 26px; height: 26px; font-size: 12px; }
  .register__note { margin-top: 14px; }
  .register { gap: 24px; }
  .panel__footer { position: sticky; bottom: 0; z-index: 5; margin: 24px -22px -22px; padding: 14px 22px calc(14px + env(safe-area-inset-bottom)); border-radius: 0 0 27px 27px; background: rgba(3, 13, 39, .96); }
  .panel__footer-right { flex: 1; justify-content: flex-end; }
  .panel__footer--auth { position: static; margin: 24px 0 0; padding: 22px 0 0; background: transparent; border-radius: 0; }

  /* Review: each member is a small card, not a row of a table that scrolls sideways */
  .review-table { overflow: visible; }
  .review-table__row--head { display: none; }
  .review-table__row { min-width: 0; grid-template-columns: auto 1fr 1fr; gap: 6px 12px; padding: 14px 0; align-items: baseline; }
  .review-table__row > span:nth-child(2) { grid-column: 2 / -1; font-size: 15px; }
  .review-table__row > span:nth-child(3), .review-table__row > span:nth-child(4), .review-table__row > span:nth-child(5) { grid-column: 2 / -1; }
  .review-table__row > span:nth-child(6), .review-table__row > span:nth-child(7) { grid-row: auto; }
  .review-table__row > span:nth-child(6), .review-table__row > span:nth-child(7) { grid-column: 2 / -1; }
  .review-table__row > span:nth-child(3)::before { content: 'School  '; }
  .review-table__row > span:nth-child(4)::before { content: 'Class  '; }
  .review-table__row > span:nth-child(5)::before { content: 'Phone  '; }
  .review-table__row > span:nth-child(6)::before { content: 'ID  '; }
  .review-table__row > span:nth-child(7)::before { content: 'Photo  '; }
  .review-table__row > span::before { color: var(--ink-40); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; white-space: pre; }
  .review-table__row > span:nth-child(1)::before, .review-table__row > span:nth-child(2)::before { content: none; }

  /* Blur behind large surfaces is the most expensive thing on the page for a budget phone's
     GPU, and these surfaces are nearly opaque anyway. The header keeps its blur. */
  .panel, .account__menu, .nav__pills { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .panel { background: rgba(3, 13, 39, .96); }
  .modal { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 5, 16, .92); }
  .course:hover { transform: none; }
  .course:hover::before { transform: scale(1.03); }
}

/* Very narrow phones: the header has to fit a logo, a two-line title, a button and the
   account control in 320px. */
@media (max-width: 359px) {
  .nav__pills .account { margin-left: 2px; padding-left: 7px; }
  .brand__logo { width: 34px; height: 34px; }
  .pill--primary { padding: 7px 9px; font-size: 11px; }
  .account__btn { height: 38px; min-width: 38px; padding: 0 8px; }
  .tiles { grid-template-columns: 1fr; }
  .tab { font-size: 12px; padding: 10px 5px; }
}

/* Touch screens have no hover: keep pressed feedback, drop hover-only motion. */
@media (hover: none) {
  .course:hover { transform: none; }
  .course:hover::before { transform: scale(1.03); opacity: .62; }
  .course:hover { box-shadow: none; border-color: var(--line-10); }
  .course:active { border-color: hsla(var(--h), 80%, 68%, .6); }
  .course:active::before { opacity: .86; }
  .tile:hover { transform: none; }
  .next-btn:hover, .btn-primary:hover, .pill--primary:hover { background: var(--accent); }
}

@media (min-width: 768px) and (max-width: 1100px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Reduced motion: the photographs stay, the movement goes. */
@media (prefers-reduced-motion: reduce) {
  .banner::before { animation: none; }
  .course, .course::before, .course__go, .tile, .post { transition: none; }
  .course:hover, .course:focus-visible, .tile:hover { transform: none; }
  .course:hover::before, .course:focus-visible::before { transform: scale(1.03); }
}

/* ==========================================================================
   The outline button, and two small fixes that came with the Venture Pass page (September
   2026; the page itself was removed on 9 October 2026, and its styles with it). APPENDED —
   nothing above this line is changed.
   ========================================================================== */

/* The quieter action beside or under a primary one: the same pill and size as .btn-primary,
   but an outline rather than the solid orange fill (the trailer's "Watch again", the members
   page's "I'm finished", the email check's buttons). */
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; padding: 14px 26px; border-radius: 99px;
  background: transparent; color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none;
  border: 1px solid var(--line-22);
  transition: background .15s, border-color .15s, color .15s, transform .1s ease-out;
}
.btn-secondary:hover { background: rgba(243, 140, 46, .1); border-color: var(--accent); color: var(--accent); }
.btn-secondary:active { transform: scale(.96); }

/* A link inside a page's intro paragraph. */
.register__intro a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* The success block is .done, which the existing rule above sets to display:flex. An author
   rule beats the browser's own "[hidden] { display: none }", so a hidden success panel would be
   drawn ANYWAY. Same trap for any flex element carrying the attribute: honour `hidden`. */
.done[hidden], .btn-secondary[hidden] { display: none; }

/* Where Cloudflare draws the "Verify you are human" box (js/human-check.js). The box is an
   iframe of its own height; the min-height only stops the Submit button jumping when it
   arrives. Nothing is drawn here until js/config.js has a site key. */
/* The head delegate confirms their email here, when the organiser has switched that on
   (js/email-check.js). Hidden and empty otherwise. */
.email-check { margin-top: 18px; }
.email-check__box { max-width: 620px; padding: 16px 18px; border: 1px solid var(--line-10); border-radius: 14px; background: rgba(255, 255, 255, 0.02); }
.email-check__title { font-size: 14px; font-weight: 700; color: var(--ink); }
.email-check__text { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-60); overflow-wrap: anywhere; }
.email-check__text strong { color: var(--ink); }
.email-check__row { display: flex; align-items: flex-end; gap: 12px 14px; flex-wrap: wrap; margin-top: 14px; }
.email-check__code { flex: 0 1 170px; }
.email-check__code .input { letter-spacing: 0.18em; font-variant-numeric: tabular-nums; }
.email-check__ok { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: #7fe0a3; overflow-wrap: anywhere; }
.email-check__msg { margin: 10px 0 0; min-height: 1.2em; font-size: 13px; line-height: 1.5; color: var(--ink-60); }
.email-check__msg.is-bad { color: var(--accent); font-weight: 600; }
.email-check__msg:empty { display: none; }
.human-check { margin-top: 18px; min-height: 65px; max-width: 420px; }
/* Cloudflare's script could not be fetched (a filter, an extension, a school network): the box
   becomes a note saying so, in the place the box would have been. */
.human-check__note { margin: 0; max-width: 560px; padding: 12px 14px; border: 1px solid var(--line-10); border-radius: 12px; font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--accent); }

/* The admin panel's Settings tab: one card per switch. The cards in a row are the same height
   with their buttons on one line, and each part of a card has room: title and state chip, what
   the state means, who changed it, then the button. */
.cards--settings { align-items: stretch; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.setting { display: flex; flex-direction: column; }
.setting__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 0; }
.setting__state { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--ink-75); max-width: 60ch; }
.setting__meta { margin-top: 12px; font-size: 12.5px; line-height: 1.5; }
.setting__actions { margin-top: auto; padding-top: 22px; }
.setting__actions .next-btn { margin: 0; }
/* The registration card: full width, first, with the closing date and time in Pakistan time. */
.setting--wide { grid-column: 1 / -1; }
.setting__when { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.setting__when-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.setting__when-row .input { width: auto; min-width: 0; flex: 0 1 190px; }
.setting__when-row .next-btn { margin: 0; }
/* Grey, so none of the orange glow every .next-btn carries: a hairline edge instead. */
.next-btn--danger { background: rgba(255, 255, 255, .1); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-10); }
.next-btn--danger:hover { background: rgba(243, 140, 46, .22); }

/* Registration has closed (js/app.js, initRegistrationWindow): the form's notice, and the
   "Register a team" links, which stay (they lead to the page that explains) but stop shouting. */
.reg-closed { padding: 8px 0 4px; }
.reg-closed .panel__title { margin-bottom: 12px; }
.reg-closed a { color: var(--accent); }
.reg-closed .done__text { max-width: 540px; margin-top: 12px; }
.reg-closed .done__text a { overflow-wrap: anywhere; }
.reg-closed__links { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 26px; }
.reg-closed .btn-primary { color: var(--navy); }   /* .reg-closed a paints links orange, which hid this button's label */
.btn-primary.is-closed, .pill--primary.is-closed { background: rgba(255, 255, 255, .1); color: var(--ink-72); box-shadow: none; }
.btn-primary.is-closed:hover, .pill--primary.is-closed:hover { background: rgba(255, 255, 255, .14); color: var(--ink); }

/* ==========================================================================
   The trailer (index.html #trailer, the player <dialog> and js/trailer.js).
   APPENDED, October 2026 — nothing above this line is changed. It is built from
   the page's own pieces: the hero's glow and grid, the banner's photograph under
   a navy shade, the fee card's orange edge that fades down the sides, the nav's
   glass capsule, the countdown's deep shadow, .eyebrow, .btn-primary and
   .btn-secondary. The frame is 2.34:1, the film's own letterbox; the player is
   16:9, the film's own frame, because its title cards fill it edge to edge.
   ========================================================================== */

/* The band. It belongs to the hero's foot: the same navy ground, the same two glows (orange
   high on the right, blue low on the left), faded out long before the edges so nothing is cut
   where the About section starts (no grid lines since 5 October 2026). z-index lifts it
   over About's background, so the frame's shadow falls on that section's empty top. */
.trailer { position: relative; z-index: 1; padding: 40px var(--gutter) 0; background: var(--bg); }
.trailer__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(48% 52% at 84% 30%, rgba(243, 140, 46, .16), transparent 70%),
    radial-gradient(52% 56% at 10% 74%, rgba(61, 111, 165, .26), transparent 72%);
  -webkit-mask-image: radial-gradient(60% 62% at 50% 50%, #000 30%, transparent 78%);
  mask-image: radial-gradient(60% 62% at 50% 50%, #000 30%, transparent 78%);
}
.trailer__reveal { position: relative; }
.trailer__reveal[data-reveal] { transform: translateY(48px) scale(.985); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.trailer__reveal[data-reveal].is-in { transform: none; }

/* The frame stacks the picture, the words and the pause button in one grid cell (the words in
   its lower left corner, the pause button in the lower right); on a phone the words come out
   above the picture instead (further down). */
.trailer__frame { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); cursor: pointer; }
.trailer__screen {
  grid-area: 1 / 1; position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 2.34 / 1;
  border-radius: 28px; border: 1px solid transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(180deg, rgba(243, 140, 46, .55), rgba(255, 255, 255, .1) 46%, rgba(255, 255, 255, .06)) border-box;
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .95), 0 60px 140px -80px rgba(243, 140, 46, .55);
  view-timeline: --trailer-screen block;
}
/* Taller than the frame by 8% at each end, so the picture can drift inside it with the scroll
   (the hero photo's parallax, at the frame's scale) without ever showing an edge. */
.trailer__media { position: absolute; inset: -8% -2%; z-index: -2; will-change: transform; }
.trailer__still, .trailer__loop {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  transform: scale(1.02); transition: transform 1.2s var(--ease), opacity .9s var(--ease);
}
/* The loop starts 0.9 s in, past its own fade up from navy, so it takes over from the still
   (the same picture) in one cross-fade instead of dipping dark first. */
.trailer__loop { opacity: 0; }
.trailer__loop.is-live { opacity: 1; }
/* Hover is the frame's wrapper's (.trailer__reveal): the picture zooms in a touch and the play
   button lights up. Nothing tilts (removed 5 October 2026). */
.trailer__reveal:hover .trailer__still, .trailer__reveal:hover .trailer__loop { transform: scale(1.06); }
/* The banner's shade: navy from the left, where the words are, and from the foot, with the
   film's own golden light left untouched on the right. */
.trailer__shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 5, 16, .86), rgba(0, 5, 16, .55) 30%, rgba(0, 5, 16, .06) 60%, transparent),
    linear-gradient(180deg, rgba(0, 5, 16, .28), transparent 28%, transparent 58%, rgba(0, 5, 16, .62)),
    radial-gradient(60% 90% at 100% 0%, rgba(243, 140, 46, .16), transparent 70%);
}
.trailer__copy {
  grid-area: 1 / 1; align-self: end; justify-self: start; position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  max-width: 600px; padding: 0 0 46px 52px; pointer-events: none;
  text-shadow: 0 2px 18px rgba(0, 5, 16, .55);
}
.trailer__copy > * { pointer-events: auto; }
/* The size of Modules' title, the page's other section heads, on three short lines, so the
   words keep to the left third and the six people in the picture stay clear of them even as
   they walk away across the field at the end of the loop. */
.trailer__title {
  font-family: var(--font-display); font-stretch: 100%; font-weight: 800;
  font-size: clamp(34px, 3.6vw, 52px); line-height: .98; letter-spacing: -.03em; text-wrap: balance;
}
.trailer__sub { font-size: 16px; line-height: 1.6; color: var(--ink-72); max-width: 420px; text-wrap: pretty; }

/* Play: the orange disc of .btn-primary's colour and glow, in the nav's glass capsule with its
   name and running time beside it. */
.trailer__play {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 16px;
  padding: 7px 26px 7px 7px; border-radius: 99px; border: 1px solid var(--line-12);
  background: rgba(3, 13, 39, .5); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  color: var(--ink); text-align: left; text-shadow: none;
  transition: border-color .2s, background .2s, opacity .9s var(--ease), transform .9s var(--ease);
}
.trailer__play.is-settled { transition: border-color .2s, background .2s, transform .1s ease-out; }
.trailer__play:hover, .trailer__reveal:hover .trailer__play { border-color: rgba(243, 140, 46, .55); background: rgba(3, 13, 39, .66); }
.trailer__play.is-settled:active { transform: scale(.97); }
.trailer__play-disc {
  position: relative; display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 50%;
  background: var(--accent); color: var(--navy);
  box-shadow: 0 14px 36px -10px rgba(243, 140, 46, .8), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .35s var(--ease), background .15s;
}
.trailer__play-disc svg { margin-left: 3px; }
/* A ring goes out from the disc twice once the button has landed, and then never again: the
   page's motion is otherwise the scroll's and the pointer's, and this stays under five seconds.
   Only where motion is welcome: the site's reduced-motion rule (* { animation: none }) does not
   reach a ::before, so the ring is not started at all otherwise. */
.trailer__play-disc::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(243, 140, 46, .7);
  opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .trailer__play.is-settled .trailer__play-disc::before { animation: trailer-ring 2.4s var(--ease) .2s 2; }
}
@keyframes trailer-ring { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.65); opacity: 0; } }
.trailer.is-away .trailer__play-disc::before { animation-play-state: paused; }
.trailer__play:hover .trailer__play-disc, .trailer__reveal:hover .trailer__play-disc { transform: scale(1.06); background: var(--accent-hover); }
.trailer__play-text { display: flex; flex-direction: column; gap: 3px; }
.trailer__play-label { font-size: 16px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.trailer__play-meta { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--ink-55); font-variant-numeric: tabular-nums; }

/* Pause: the moving picture runs three times and rests on its still by itself; this stops or
   restarts it sooner (WCAG 2.2.2). A small glass disc in the corner, where ambient video keeps
   its control, shown only while there is a moving picture to control. */
.trailer__pause {
  grid-area: 1 / 1; align-self: end; justify-self: end; position: relative;
  display: grid; place-items: center; width: 36px; height: 36px; margin: 0 22px 22px 0; border-radius: 50%;
  border: 1px solid var(--line-12); background: rgba(3, 13, 39, .5); color: var(--ink-72);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  transition: color .15s, border-color .15s, background .15s, transform .1s ease-out;
}
.trailer__pause[hidden] { display: none; }
.trailer__pause:hover { color: var(--ink); border-color: var(--line-22); background: rgba(3, 13, 39, .7); }
.trailer__pause:active { transform: scale(.94); }
.trailer__pause-on { display: none; margin-left: 2px; }
.trailer__pause.is-paused .trailer__pause-off { display: none; }
.trailer__pause.is-paused .trailer__pause-on { display: block; }

/* The picture drifts inside the frame as the page scrolls past: the browser ties it to the
   frame's own passage through the screen, as it does the hero's (.fx-scroll, js/app.js). */
@supports (animation-timeline: view()) {
  .fx-scroll .trailer__media { animation: trailer-drift linear both; animation-timeline: --trailer-screen; animation-range: cover; }
  @keyframes trailer-drift { from { translate: 0 -6%; } to { translate: 0 6%; } }
}

/* Wide: the words take the left third, so the picture is drawn from its left edge, which moves
   the six people about 6% of the frame to the right, clear of the headline. */
@media (min-width: 900px) {
  .trailer__still, .trailer__loop { object-position: 0% 50%; }
}
/* Tablet: the same overlay with less room. */
@media (max-width: 1180px) {
  .trailer__copy { padding: 0 0 36px 40px; gap: 12px; }
  .trailer__sub { font-size: 15px; }
}
/* Under 900px the words would cover the picture: they move above it, as a section head like
   Modules' (eyebrow, title, one line), and play comes out under it, as its caption. As the six
   walk away at the end of the loop they fill the picture to its foot, so nothing sits on it
   there; the pause button takes the top corner, over the building, where nobody stands. The
   copy box steps aside (display: contents) so its children can take rows of the frame's grid. */
@media (max-width: 899px) {
  .trailer { padding-top: 64px; }
  .trailer__frame { grid-template-rows: auto auto auto auto auto; cursor: default; }
  .trailer__copy { display: contents; }
  .trailer__eyebrow { grid-row: 1; }
  .trailer__title { grid-row: 2; margin-top: 12px; font-size: clamp(32px, 7vw, 46px); }
  .trailer__br { display: none; }        /* above the picture there is room for "Bigger than ever." */
  .trailer__sub { grid-row: 3; margin-top: 12px; max-width: none; }
  .trailer__screen { grid-row: 4; margin-top: 26px; border-radius: 22px; cursor: pointer; }
  .trailer__play {
    grid-row: 5; grid-column: 1; align-self: start; justify-self: start; position: relative;
    margin: 18px 0 0; padding: 5px 20px 5px 5px; gap: 12px;
  }
  .trailer__play-disc { width: 48px; height: 48px; }
  .trailer__play-disc svg { width: 18px; height: 18px; margin-left: 2px; }
  .trailer__play-label { font-size: 14px; }
  .trailer__play-meta { font-size: 10px; }
  .trailer__pause { grid-row: 4; grid-column: 1; align-self: start; width: 32px; height: 32px; margin: 40px 14px 0 0; }
  .trailer__shade {
    background:
      linear-gradient(180deg, rgba(0, 5, 16, .4), rgba(0, 5, 16, .08) 30%, transparent 60%, rgba(0, 5, 16, .4)),
      radial-gradient(60% 90% at 100% 0%, rgba(243, 140, 46, .14), transparent 70%);
  }
}
@media (max-width: 479px) {
  .trailer { padding-top: 56px; }
  .trailer__screen { aspect-ratio: 16 / 9; border-radius: 20px; }
  .trailer__play { margin-top: 16px; }
  .trailer__play-disc { width: 44px; height: 44px; }
  .trailer__play-disc svg { width: 17px; height: 17px; }
  .trailer__play-text { gap: 2px; }
  .trailer__pause { width: 30px; height: 30px; margin: 38px 12px 0 0; }
}

/* The player. A <dialog> opened with showModal(), so the rest of the page is inert while it is
   up. It fills the window itself (its ::backdrop is not used: a pseudo-element cannot be faded
   in the same step as the picture), with a veil a shade deeper than .modal's and the hero's
   glows behind the picture, so the film plays in a darkened room rather than a box. When the
   window is too short for it (a laptop zoomed to 200-400%, or large text) the dialog scrolls,
   so Close and the words under the film can always be reached. */
.tplayer {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 24px 0; border: 0; background: transparent; color: var(--ink);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}
.tplayer[open] { display: flex; }
.tplayer::backdrop { background: transparent; }
.tplayer__veil {
  position: fixed; inset: 0;
  background:
    radial-gradient(900px 520px at 80% 0%, rgba(243, 140, 46, .16), transparent 65%),
    radial-gradient(900px 620px at 6% 100%, rgba(61, 111, 165, .26), transparent 70%),
    rgba(0, 5, 16, .9);
  -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%);
}
/* margin: auto centres it while it fits and lets it scroll from its top when it does not. */
.tplayer__body {
  position: relative; margin: auto; display: flex; flex-direction: column; gap: 16px;
  width: min(1240px, calc(100vw - 2 * var(--gutter)), max(280px, calc((100vh - 220px) * 16 / 9)));
  width: min(1240px, calc(100vw - 2 * var(--gutter)), max(280px, calc((100dvh - 220px) * 16 / 9)));
}
/* The focus guards at either end (js/trailer.js): focusable, never seen, and they hand focus on
   the moment they get it. */
.tplayer__guard { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); outline: none; }
.tplayer__head, .tplayer__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tplayer__head { align-items: flex-end; }
/* A section head, as on the page: the small orange word over the title. The words are in
   reading order in the markup ("KGES IV trailer"); only the drawing puts "trailer" on top. */
.tplayer__title { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 8px; min-width: 0; }
.tplayer__name {
  font-family: var(--font-display); font-stretch: 100%; font-weight: 800;
  font-size: clamp(26px, 2.6vw, 36px); line-height: .96; letter-spacing: -.03em;
}
.tplayer__close {
  display: inline-flex; align-items: center; gap: 8px; flex: none; height: 40px; padding: 0 16px 0 13px; border-radius: 99px;
  border: 1px solid var(--line-12); background: rgba(255, 255, 255, .05); color: var(--ink-75);
  font-size: 13px; font-weight: 700; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  transition: color .15s, background .15s, border-color .15s, transform .1s ease-out;
}
.tplayer__close:hover { color: var(--ink); background: rgba(255, 255, 255, .1); border-color: var(--line-22); }
.tplayer__close:active { transform: scale(.96); }
/* The picture's shadow and glow live on a layer of their own behind it, because the picture is
   clipped while it grows (js/trailer.js) and a clip takes the shadow with it; this one fades in
   once the picture has landed. */
.tplayer__stage { position: relative; }
.tplayer__halo {
  position: absolute; inset: 0; border-radius: 20px; pointer-events: none;
  box-shadow: 0 60px 140px -50px rgba(0, 0, 0, 1), 0 40px 160px -60px rgba(243, 140, 46, .55);
}
.tplayer__screen {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 20px; border: 1px solid transparent;
  background: linear-gradient(#000, #000) padding-box,
    linear-gradient(180deg, rgba(243, 140, 46, .5), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .06)) border-box;
  transform-origin: 50% 50%;
}
/* The film's still sits UNDER a transparent <video>, rather than as its poster: a poster is not
   painted until the element is ready to, and the first frames of the grow were a black box.
   The still goes once the film has a frame of its own to show. */
.tplayer__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s; }
.tplayer.has-frames .tplayer__poster { opacity: 0; }
.tplayer__video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: transparent; object-fit: contain; }
.tplayer__video:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tplayer__caption { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink-55); }
.tplayer__sep { color: var(--ink-30); }
.tplayer__register { padding: 8px 4px; white-space: nowrap; }
/* While the end card is up it carries Register a team itself; the link under the film steps
   back (hidden, not removed, so nothing below it moves). */
.tplayer.is-ended .tplayer__register { visibility: hidden; }

/* When the film ends: its last field, whose painted words ("KGES IV · Bigger than ever · Don't
   miss your chance") have just said it, sinks into navy at the foot, under the two things to
   do next. */
.tplayer__end { position: absolute; inset: 0; display: flex; align-items: flex-end; animation: tplayer-fade .8s var(--ease) both; }
.tplayer__end[hidden] { display: none; }
.tplayer__end-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tplayer__end::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 5, 16, .08) 22%, rgba(0, 5, 16, .5) 54%, rgba(0, 5, 16, .86) 78%, rgba(0, 5, 16, .95)),
    linear-gradient(90deg, rgba(0, 5, 16, .4), transparent 55%);
}
.tplayer__end-actions {
  position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px;
  padding: 0 clamp(20px, 4vw, 48px) clamp(20px, 4vw, 44px);
}
@keyframes tplayer-fade { from { opacity: 0; } }

/* When the film will not play: the sentence and the link to the file, on two lines, over the
   film's last field dimmed (drawn only then: a hidden element's background is not fetched),
   so the frame never reads as a dead player. */
.tplayer__error {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px;
  padding: 24px; text-align: center; font-size: 15px; line-height: 1.6; font-weight: 600; color: var(--ink-75);
  background: linear-gradient(rgba(3, 13, 39, .74), rgba(3, 13, 39, .9)), url(../assets/kges-trailer-poster-sunset-v1.jpg) center / cover, var(--navy);
}
.tplayer__error[hidden] { display: none; }
.tplayer__error a { color: var(--accent); }
.tplayer.has-error .tplayer__video { visibility: hidden; }

/* The page behind stays where it was while the player is up. The gutter is kept, so nothing
   shifts sideways when the scrollbar goes. */
html.is-trailer-open { overflow: hidden; scrollbar-gutter: stable; }

@media (max-width: 767px) {
  /* As for .panel and .modal on a phone: no blur over moving pictures or the whole screen, a
     denser fill instead, because a budget phone's graphics chip pays for every frame of it. */
  .trailer__play, .trailer__pause { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(3, 13, 39, .74); }
  /* Unblurred, any trace of the page behind reads as clutter around the caption: the room
     goes fully dark instead, with the same two glows. */
  .tplayer__veil { -webkit-backdrop-filter: none; backdrop-filter: none; background:
    radial-gradient(520px 360px at 80% 0%, rgba(243, 140, 46, .14), transparent 65%),
    radial-gradient(520px 420px at 6% 100%, rgba(61, 111, 165, .24), transparent 70%),
    var(--bg); }
  .tplayer__close { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tplayer__body { gap: 14px; }
  .tplayer__foot { flex-direction: column; align-items: flex-start; gap: 4px; }
  .tplayer__register { padding-left: 0; }
  .tplayer__screen, .tplayer__halo { border-radius: 14px; }
  .tplayer__end-actions .btn-primary, .tplayer__end-actions .btn-secondary { padding: 10px 18px; font-size: 13px; }
}
@media (max-width: 479px) {
  .tplayer__end-actions { gap: 8px; padding: 0 14px 14px; }
  .tplayer__end-actions .btn-primary, .tplayer__end-actions .btn-secondary { padding: 8px 14px; font-size: 12px; }
  .tplayer__error { font-size: 14px; gap: 2px; }
}
/* The narrowest phones: the player's dates over its venue, so no dot is left hanging. */
@media (max-width: 359px) {
  .tplayer__caption { flex-direction: column; gap: 2px; }
  .tplayer__sep { display: none; }
}
/* A phone on its side: the picture gets the height, the words around it step back. "trailer"
   is only no longer drawn: it is still read, so the dialog is still "KGES IV trailer". */
@media (max-height: 520px) and (orientation: landscape) {
  .tplayer { padding: 8px 0; }
  .tplayer__body { width: min(1240px, calc(100vw - 2 * var(--gutter)), max(280px, calc((100vh - 66px) * 16 / 9))); width: min(1240px, calc(100vw - 2 * var(--gutter)), max(280px, calc((100dvh - 66px) * 16 / 9))); gap: 8px; }
  .tplayer__head { align-items: center; }
  .tplayer__kind { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tplayer__foot { display: none; }
  .tplayer__name { font-size: 20px; }
  .tplayer__close { height: 34px; }
}

/* Touch screens: no hover zoom on the band. */
@media (hover: none) {
  .trailer__reveal:hover .trailer__still, .trailer__reveal:hover .trailer__loop { transform: scale(1.02); }
  .trailer__reveal:hover .trailer__play-disc { transform: none; background: var(--accent); }
}
/* Reduced motion: the still stays (js/trailer.js never starts the loop, and stops it if the
   setting changes while the page is open), the ring does not go out (it is only started under
   no-preference, above), the picture does not drift, and the player opens without its grow. */
@media (prefers-reduced-motion: reduce) {
  .trailer__reveal[data-reveal] { transform: none; }
  .trailer__media { animation: none; }
  .trailer__pause { display: none; }
}

/* ==========================================================================
   Team members (members/index.html, js/members.js). APPENDED, October 2026 —
   nothing above this line is changed. A head delegate's 24-hour link from the
   organisers: the panel holds one of three views (open, the team, a message),
   built from the registration panel's own pieces (.fields, .field, .input,
   .work__pick, .next-btn, .panel__footer, .sub-block).
   ========================================================================== */
/* Admin ▸ Teams ▸ Manage: the link's own block, above "Delete this team…". */
.team-link { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line-08); display: flex; flex-direction: column; gap: 6px; }
.team-link .detail__actions { margin-top: 2px; }
.mem-team, .mem-message { display: flex; flex-direction: column; gap: 14px; }
.mem-team[hidden], .mem-message[hidden], .mem-add[hidden], .mem-full[hidden], .mem-add .field[hidden] { display: none; }
.mem-team .panel__title, .mem-message .panel__title { outline: none; }
.mem-text { font-size: 14px; line-height: 1.6; color: var(--ink-60); max-width: 560px; overflow-wrap: anywhere; }
.mem-meta { font-size: 13px; color: var(--ink-55); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mem-status { padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--ink);
  background: rgba(123, 216, 143, .1); border: 1px solid rgba(123, 216, 143, .28); outline: none; }
.mem-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line-08); }
.mem-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding: 14px 0; border-bottom: 1px solid var(--line-08); }
/* The name keeps at least 160px; when the buttons (Edit, Make head delegate, Remove) do not fit
   beside it on a phone, they move under it, to the right, instead of squeezing it. */
.mem-row__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 160px; }
.mem-row__who strong { font-size: 15px; overflow-wrap: anywhere; }
.mem-row__sub { font-size: 12px; color: var(--ink-50); }
.mem-row__acts { flex: 0 1 auto; margin-left: auto; max-width: 100%; display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; justify-content: flex-end; }
.mem-row__edit, .mem-row__head, .mem-row__remove { flex: none; font-size: 13px; padding: 8px 4px; }
.mem-row__edit { color: var(--ink-72); }
.mem-cancel { font-size: 13px; padding: 12px 6px; }
.mem-add .sub-block__title { outline: none; }
.mem-add .input[readonly] { opacity: .65; cursor: not-allowed; }
.mem-add { margin-top: 18px; }
.mem-add .fields { margin-top: 16px; }
.mem-hint { font-size: 12px; line-height: 1.5; color: var(--ink-45); }
.mem-files { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 18px; }   /* the photograph only: the ID is typed in */
.mem-file { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mem-file .work__pick { margin-top: 8px; align-self: flex-start; }
.mem-file__state { font-size: 12px; color: var(--ink-60); overflow-wrap: anywhere; min-height: 1em; }
.mem-add__footer { justify-content: flex-end; flex-wrap: wrap; }
.mem-add__footer .form-error { flex: 1 1 240px; margin-top: 0; }
.mem-finish { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-08); }
.mem-finish .mem-text { flex: 1 1 260px; }
@media (max-width: 640px) {
  .mem-files { grid-template-columns: 1fr; }
  .mem-add .fields { grid-template-columns: 1fr; }
  .mem-add .field--full { grid-column: auto; }
  .mem-finish .btn-secondary { width: 100%; }
}

/* ==========================================================================
   The national team and the endorsements (index.html #national, the
   registration page's line). The hero's "Endorsed by" logo row was taken out
   on 5 October 2026: "the main landing viewport looks cluttered now". APPENDED, October 2026 —
   nothing above this line is changed. The organisers' own words and logos from
   the KGES IV invitation; built from the page's pieces (.eyebrow, the display
   face, the trailer's glows, the glance card's orange edge).
   ========================================================================== */

.national { position: relative; z-index: 1; padding: 120px var(--gutter) 40px; scroll-margin-top: 80px; background: var(--bg); overflow: hidden; }
.national__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(38% 48% at 8% 28%, rgba(243, 140, 46, .14), transparent 70%),
    radial-gradient(46% 52% at 92% 82%, rgba(61, 111, 165, .22), transparent 72%);
}
.national__team { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 24px 64px; padding-bottom: 64px; border-bottom: 1px solid var(--line-10); }
.national__count {
  font-family: var(--font-display); font-stretch: 100%; font-weight: 800; font-size: clamp(140px, 17vw, 240px); line-height: .78;
  letter-spacing: -.06em; color: var(--accent); text-shadow: 0 30px 90px rgba(243, 140, 46, .35); font-variant-numeric: tabular-nums;
}
.national__title {
  font-family: var(--font-display); font-stretch: 100%; font-weight: 800; font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.04; letter-spacing: -.03em; margin-top: 14px; max-width: 760px; text-wrap: balance;
}
.national__text { font-size: 17px; line-height: 1.65; color: var(--ink-72); margin-top: 18px; max-width: 640px; text-wrap: pretty; }
.national__stats { display: flex; flex-wrap: wrap; gap: 14px 48px; margin-top: 28px; }
.national__stats dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-45); font-weight: 600; }
.national__stats dd { margin-top: 4px; font-family: var(--font-display); font-stretch: 100%; font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.national__endorse { position: relative; padding-top: 56px; }
.national__label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.national__orgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 22px; }
.endorser {
  display: flex; flex-direction: column; gap: 14px; padding: 30px; border-radius: 24px; min-width: 0;
  border: 1px solid rgba(243, 140, 46, .28);
  background: linear-gradient(160deg, rgba(243, 140, 46, .12), rgba(255, 255, 255, .02) 55%);
}
.endorser img { display: block; height: 64px; width: auto; max-width: 100%; align-self: flex-start; }
.endorser__name { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--ink); margin: 6px 0 0; }
.endorser__text { margin: 0; }
.endorser__text { font-size: 15px; line-height: 1.65; color: var(--ink-60); text-wrap: pretty; }
.national__note { margin-top: 22px; max-width: 760px; font-size: 15px; line-height: 1.65; color: var(--ink-55); font-style: italic; text-wrap: pretty; }

/* The registration page, under its intro. */
.register__national { margin-top: 18px; max-width: 420px; font-size: 14px; line-height: 1.6; color: var(--ink-60); }
.register__national a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* The society's Instagram, in every footer a visitor or a team sees. */
.footer a.footer__social { display: inline-flex; align-items: center; gap: 7px; }
.footer__icon { flex: none; }

@media (max-width: 767px) {
  .national { padding-top: 88px; }
  .national__team { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-bottom: 48px; }
  .national__count { font-size: 120px; }
  .national__orgs { grid-template-columns: minmax(0, 1fr); }
  .endorser { padding: 24px; }
  .endorser img { height: 52px; }
}

/* ==========================================================================
   The delegate guide, on the home page after the trailer (9 Oct 2026): its cover, which tilts
   like the About cards, what is inside, and a download. One column on a phone.
   ========================================================================== */
.guide { position: relative; z-index: 1; padding: 110px var(--gutter) 0; scroll-margin-top: 80px; background: var(--bg); }
.guide__panel {
  position: relative; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: center; gap: 40px 72px;
  padding: 56px 64px; border-radius: 28px; border: 1px solid rgba(243, 140, 46, .28); overflow: hidden;
  background: linear-gradient(150deg, rgba(243, 140, 46, .1), rgba(255, 255, 255, .02) 45%, rgba(3, 13, 39, .6));
}
.guide__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(42% 70% at 16% 50%, rgba(243, 140, 46, .2), transparent 70%),
    radial-gradient(40% 60% at 96% 100%, rgba(61, 111, 165, .24), transparent 72%);
}
.guide__cover {
  position: relative; display: block; border-radius: 12px; overflow: hidden; will-change: transform;
  box-shadow: 0 44px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08);
}
.guide__cover img { display: block; width: 100%; height: auto; }
.guide__copy { position: relative; min-width: 0; }
.guide__title {
  font-family: var(--font-display); font-stretch: 100%; font-weight: 800; font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.04; letter-spacing: -.03em; margin-top: 14px; max-width: 640px; text-wrap: balance;
}
.guide__inside {
  list-style: none; margin: 26px 0 0; padding: 0; max-width: 680px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid var(--line-10);
}
.guide__inside li { position: relative; padding: 13px 0 13px 20px; border-bottom: 1px solid var(--line-08); font-size: 15px; font-weight: 600; line-height: 1.45; }
.guide__inside li::before { content: ''; position: absolute; left: 0; top: 21px; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
.guide__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 32px; }
.guide__download { gap: 10px; padding: 16px 28px; font-size: 15px; }
.guide__download svg { flex: none; }
.guide__meta { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--ink-55); font-variant-numeric: tabular-nums; }

@media (max-width: 767px) {
  .guide { padding-top: 72px; }
  .guide__panel { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px 22px 30px; border-radius: 24px; }
  .guide__cover { width: 160px; max-width: 50%; }
  /* On a phone the download comes straight after the intro, before what is inside. */
  .guide__copy { display: flex; flex-direction: column; }
  .guide__actions { order: 1; margin-top: 26px; }
  .guide__inside { order: 2; margin-top: 28px; }
  .guide__glow { background: radial-gradient(80% 40% at 20% 15%, rgba(243, 140, 46, .2), transparent 70%), radial-gradient(60% 40% at 100% 100%, rgba(61, 111, 165, .24), transparent 72%); }
  .guide__inside { grid-template-columns: minmax(0, 1fr); }
  .guide__download { width: 100%; }
  .guide__actions { gap: 12px; }
}

/* ==========================================================================
   Accommodation for delegations from outside Karachi (index.html and venue/index.html, #stay;
   12 Oct 2026): the two partner hotels, the confirm-by date and the pack. Under the venue.
   ========================================================================== */
.stay { position: relative; z-index: 1; padding: 0 var(--gutter) 120px; scroll-margin-top: 80px; background: var(--bg); }
.venue--page + .stay { padding-top: 0; }
.stay__panel {
  position: relative; padding: 44px 48px; border-radius: 28px; border: 1px solid rgba(243, 140, 46, .28);
  background: linear-gradient(150deg, rgba(243, 140, 46, .09), rgba(255, 255, 255, .02) 45%, rgba(3, 13, 39, .6));
}
.stay__title {
  font-family: var(--font-display); font-stretch: 100%; font-weight: 800; font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.06; letter-spacing: -.03em; margin-top: 12px; max-width: 760px; text-wrap: balance;
}
.stay__text { font-size: 16px; line-height: 1.65; color: var(--ink-72); margin-top: 14px; max-width: 680px; text-wrap: pretty; }
.stay__hotels { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.stay__hotel { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; border-radius: 18px; border: 1px solid var(--line-10); background: rgba(0, 5, 16, .35); min-width: 0; }
.stay__name { font-family: var(--font-display); font-stretch: 100%; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.stay__where { font-size: 13.5px; color: var(--ink-55); }
.stay__rate { margin-top: 10px; font-size: 15px; color: var(--ink-75); }
.stay__rate strong { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.stay__deadline { margin-top: 20px; font-size: 15px; line-height: 1.6; color: var(--ink-75); }
.stay__deadline strong { color: var(--accent); }
.stay__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 22px; }
.stay__download { gap: 10px; padding: 15px 26px; font-size: 15px; }
.stay__download svg { flex: none; }
.stay__meta { font-size: 12.5px; color: var(--ink-55); max-width: 360px; line-height: 1.5; }
@media (max-width: 767px) {
  .stay { padding-bottom: 88px; }
  .stay__panel { padding: 26px 20px 28px; border-radius: 22px; }
  .stay__hotels { grid-template-columns: minmax(0, 1fr); }
  .stay__download { width: 100%; }
}
/* The accommodation pack in the registration form (js/app.js accommodationNoteHtml) and on the
   team dashboard (js/portal.js accommodationHtml): built from existing pieces; only these two. */
.stay-note .stay-note__link { margin-top: 14px; }
/* What is left of a team's fee after a member was added (js/members.js paidLine, js/portal.js
   feeHtml; 20261101100000_fee_top_up.sql): the change page's line and the dashboard's box. */
.fee-due { padding: 14px 16px; border-radius: 14px; font-size: 14px; line-height: 1.6; color: var(--ink-75);
  background: rgba(243, 140, 46, .08); border: 1px solid rgba(243, 140, 46, .32); max-width: 640px; overflow-wrap: anywhere; }
.fee-due strong { color: var(--ink); }
.fee-due p + p { margin-top: 8px; }
.fee-due a { color: var(--accent); }
.mem-paid[hidden] { display: none; }
a.dl-row { text-decoration: none; }

/* ==========================================================================
   The Waiver of Liability (waiver/index.html, js/waiver.js; 20261031100000_waiver.sql, 13 Oct
   2026): signed once for each team, by its head delegate, before the dashboard opens. The
   dashboard's portal section and the login's panel, plus the text in a box of its own, the two
   ticks and the name. Nothing sticks to the screen (a phone scrolls the page, and the box inside
   it, nothing else) and every control is a full-size tap target. The classes are .wol-* because
   "waiver" alone already means the Revenue tab's fee waivers (js/staff.js, css/rounds-staff.css).
   ========================================================================== */
.wol .portal__head { margin-bottom: 28px; }
.wol-head__for { margin-top: 14px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: var(--ink); overflow-wrap: anywhere; }
.wol-head__intro { max-width: 640px; line-height: 1.6; text-wrap: pretty; }
.wol-panel { margin: 0; }
.wol-panel__inner { min-height: 0; padding: 32px; }
/* The organisers' text. It scrolls inside the panel (the ticks open once it has been read to the
   end, js/waiver.js), and never scrolls the page past its own end on a phone. */
.wol-text {
  margin-top: 20px; max-height: min(56vh, 460px); overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 24px; border-radius: 18px; border: 1px solid var(--line-12); background: var(--well-50);
  font-size: 15px; line-height: 1.7; color: var(--ink-75); text-wrap: pretty;
  transition: border-color .2s;
}
.wol-text:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wol-text.is-read { border-color: rgba(123, 216, 143, .35); }
.wol-text__list { margin: 0; padding-left: 1.5em; list-style: decimal; }
.wol-text__list li { padding-left: .25em; }
.wol-text__list li + li { margin-top: 14px; }
.wol-text__list li::marker { color: var(--accent); font-weight: 700; font-family: var(--font-mono); font-size: 13px; }
.wol-text__fill { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.wol-scroll-note { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--accent-2); }
.wol-checks { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.wol-check {
  display: flex; gap: 14px; align-items: flex-start; min-height: 52px; padding: 14px 16px;
  border-radius: 14px; border: 1px solid var(--line-10); background: var(--well-30);
  font-size: 14px; line-height: 1.5; color: var(--ink-75); cursor: pointer;
  transition: border-color .15s, opacity .15s, background .15s;
}
.wol-check:hover { border-color: var(--line-22); }
.wol-check input { margin: 0; width: 22px; height: 22px; flex: none; accent-color: var(--accent); cursor: inherit; }
.wol-check:has(input:checked) { border-color: rgba(243, 140, 46, .5); background: rgba(243, 140, 46, .06); color: var(--ink); }
.wol-check:has(input.has-error) { border-color: var(--accent); }
/* Closed until the text has been read: dimmed, and nothing reacts to the pointer. */
.wol-check.is-locked { opacity: .5; cursor: not-allowed; }
.wol-check.is-locked:hover { border-color: var(--line-10); }
.wol-check__error { margin: 0 0 4px 4px; }
.wol-fields { margin-top: 22px; }
.wol-hint { font-size: 12.5px; line-height: 1.5; color: var(--ink-55); overflow-wrap: anywhere; }
.wol-trouble { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; border-radius: 18px; border: 1px solid var(--line-12); background: var(--well-35); }
.wol-trouble[hidden] { display: none; }   /* its own display: flex would otherwise beat [hidden] */
.wol-trouble__text { font-size: 14px; line-height: 1.6; color: var(--ink-75); text-wrap: pretty; }
@media (max-width: 767px) {
  .wol-panel__inner { padding: 20px 16px 22px; }
  .wol-text { max-height: 58vh; padding: 18px 16px 18px 14px; }
  .wol-check { padding: 14px 14px; }
  .wol-footer .next-btn { width: 100%; min-height: 52px; }
  .wol-trouble .next-btn { width: 100%; min-height: 52px; }
}