/* =========================================================
   MDX Debate Tourney — page-specific styles.
   Brand tokens, glass, buttons, header/footer, clip-text and
   reveal base-states all come from css/style.css; this file
   only adds what's unique to this single-screen registration page.
   ========================================================= */

/* The admin console hides things by setting the `hidden` attribute. The UA rule
   for that is only `display: none`, which loses to any explicit display in our
   own CSS - `img { display: block }`, `.register-teaser { display: inline-flex }`
   and so on - so an element would stay on screen with `hidden` set. Make it win. */
[hidden] { display: none !important; }

.hero-video {
  object-fit: cover;
  transform-origin: center;
  will-change: transform;
  mix-blend-mode: screen;
  opacity: 0.85;
}

/* The lockup now sits centred in the hero instead of in a header bar, so it
   can be sized generously. */
/* How wide the glass runs, and so how much room is left for a speaker on
   either side of it. Everything in the header is measured off vmin - the
   smaller side of the viewport - so a short laptop window shrinks the header
   instead of pushing the register box off the bottom. */
.hero {
  --hero-column: min(1100px, 92vw);
}
@media (min-width: 1280px) {
  .hero { --hero-column: min(1100px, 66vw); }
}

.hero-logo {
  position: relative;
  top: calc(-1 * clamp(14px, 2.8vmin, 34px));
  height: clamp(52px, 10vmin, 118px);
  width: auto;
  margin: 0 auto clamp(18px, 3vmin, 30px);
}
.footer-logo { height: 56px; }

/* The hero is the entire page — no header above it, no footer below — so it
   sits on one screen with symmetric breathing room. */
.hero {
  padding-top: clamp(56px, 9vmin, 96px);
  padding-bottom: clamp(56px, 9vmin, 96px);
}

/* The clip has a bright flash at its climax — darken more evenly than the
   hub's edge-only vignette so the glass panels stay legible through it. */
.hero .hero-scrim {
  background: radial-gradient(75% 65% at 50% 40%, rgba(34, 26, 66, 0) 0%,
                              rgba(34, 26, 66, 0.25) 60%, rgba(23, 17, 49, 0.7) 100%);
}

/* =========================================================
   HERO PROPS — podium, gavel, quote bubble
   Purely atmospheric: they set the "you're about to debate"
   scene around the video collision, so they sit behind the
   glass panels (z-index below .hero-content) and never take
   pointer events or distract from the actual registration flow.
   ========================================================= */
.hero-props {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-prop {
  position: absolute;
  opacity: 1;
  filter: drop-shadow(0 22px 30px rgba(47, 37, 82, 0.32));
}

/* Sized so its left edge clears the register box across the desktop range —
   at 50vw the podium ran straight through the CTA. */
.hero-prop-podium {
  height: clamp(190px, calc((100vw - var(--hero-column)) / 2 / 0.6 * 0.9), 74%);
  width: auto;
  right: 0;
  bottom: 0;
}
.hero-prop-gavel {
  width: min(120px, 14vw);
  top: 8%;
  left: 6%;
  animation: propFloat 6s ease-in-out infinite;
}
.hero-prop-quote {
  width: min(110px, 13vw);
  top: 5%;
  right: 7%;
  animation: propFloat 5.5s ease-in-out infinite reverse;
}

@keyframes propFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-14px) rotate(4deg); }
}
@keyframes propFloatCenter {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-prop { animation: none; }
}

/* Layer a dark tint under the shared glass gradient — the hub's frosted-white
   glass reads fine over a calm particle field, but washes out against this
   video's bright flash unless it's pulled darker for reliable text contrast. */
.hero-title-wrap,
.register-teaser,
.register-panel,
.auth-card {
  background:
    linear-gradient(155deg, rgba(10, 8, 24, 0.35), rgba(10, 8, 24, 0.2)),
    linear-gradient(155deg, var(--glass-fill-strong), var(--glass-fill));
}

/* The shared 900px content column left the one-line title 1px short of
   fitting, so it broke across two lines on desktop. Widen it here — this
   page has nothing else in the column to keep narrow. */
.hero-content { max-width: var(--hero-column); }

.hero-title-wrap {
  display: inline-block;
  padding: clamp(16px, 2.6vmin, 28px) clamp(22px, 4vmin, 44px);
  border-radius: var(--radius-lg);
  margin-bottom: clamp(20px, 3.6vmin, 40px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.16) inset,
    0 30px 60px -24px rgba(0, 0, 0, 0.65);
}
.hero-title-wrap .hero-title-sm {
  margin: 0;
  font-size: clamp(1.7rem, 4.4vmin + 0.5rem, 3.9rem);
}

/* The headline stays white. The red-to-yellow sweep that the shared
   clip-text pattern paints over every heading is right on a small one and
   wrong at this size - it turned the event's name into a gradient and read
   as a different brand beside a white MDX lockup. The two stacked layers
   stay (the reveal animation is built on them); both are simply white, so
   the sweep passes over the title without changing its colour. */
.hero-title .clip-text .base,
.hero-title .clip-text .fill {
  background: none;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

/* =========================================================
   REGISTER TEASER — the hero's compact call to action.
   Deliberately small: it only has to say "entries are open"
   and hand off to the modal, so it stays well clear of the
   podium prop instead of blanketing the whole hero.
   ========================================================= */
.register-teaser {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.8vmin, 16px);
  padding: clamp(16px, 2.4vmin, 24px) clamp(20px, 3.2vmin, 32px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.16) inset,
    0 30px 60px -24px rgba(0, 0, 0, 0.65);
}
.teaser-copy {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-dim);
}

/* Date and venue sit with the call to action, so they are in front of anyone
   at the moment they decide whether to enter. */
.teaser-meta {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.meta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}
.meta-row svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.meta-row svg path,
.meta-row svg circle,
.meta-row svg rect { stroke: var(--mdx-yellow); }

.teaser-rule {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

/* =========================================================
   REGISTER PANEL — the participant-type chooser, shown in
   the modal once "Register Now" is clicked.
   ========================================================= */
.register-panel {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  padding: 40px;
}

.type-prompt {
  margin: 0 0 20px;
  font-size: 0.98rem;
  color: var(--ink-dim);
}

.type-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

.type-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: rgba(0,0,0,0.18);
  color: var(--ink);
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.type-icon { font-size: 1.6rem; }
.type-title { font-weight: 700; font-size: 0.95rem; }
.type-note {
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--ink-faint);
}

.type-option:hover,
.type-option:focus-visible {
  border-color: var(--mdx-pink);
  background: linear-gradient(155deg, rgba(230,5,31,0.16), rgba(229,0,89,0.08));
  box-shadow: 0 0 0 3px rgba(229,0,89,0.18);
  outline: none;
}
.type-option:hover .type-title,
.type-option:focus-visible .type-title { color: #fff; }
.type-option:active { transform: scale(0.985); }

.type-helper {
  margin: 0;
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.82rem;
}

.modal-signin {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-dim);
}
.modal-signin a {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid rgba(229, 0, 89, 0.55);
}
.modal-signin a:hover { color: #fff; border-bottom-color: var(--mdx-pink); }

/* =========================================================
   AUTH PAGES — login.html / signup.html
   They reuse .hero wholesale (same video, same scrim, same
   glass) so the sign-in surface is continuous with the
   landing page rather than looking like a different site.
   ========================================================= */
.auth-hero { padding-top: 72px; padding-bottom: 72px; }

.auth-card {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 36px 38px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.16) inset,
    0 30px 60px -24px rgba(0, 0, 0, 0.65);
  text-align: left;
}

.auth-eyebrow {
  margin: 0 0 10px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mdx-pink);
}
.auth-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 12px;
}
.auth-copy {
  margin: 0 0 26px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-dim);
}

.auth-form { display: flex; flex-direction: column; gap: 16px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-dim);
}
.field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.24);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.field input::placeholder { color: var(--ink-faint); }
.field input:focus {
  outline: none;
  border-color: var(--mdx-pink);
  box-shadow: 0 0 0 3px rgba(229, 0, 89, 0.18);
}
.field input[aria-invalid="true"] { border-color: var(--mdx-red); }

.field-hint {
  margin: 0;
  font-size: 0.76rem;
  color: var(--ink-faint);
}
.field-error {
  margin: 0;
  min-height: 1em;
  font-size: 0.76rem;
  color: #ff8a9c;
}
.field-error:empty { min-height: 0; }

.auth-submit { width: 100%; justify-content: center; margin-top: 6px; }

.auth-note {
  margin: 14px 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-dim);
}
.auth-note:empty { margin: 0; }

.auth-alt {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 0.85rem;
  color: var(--ink-dim);
}
.auth-alt a {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid rgba(229, 0, 89, 0.55);
}
.auth-alt a:hover { color: #fff; border-bottom-color: var(--mdx-pink); }

.auth-back {
  display: inline-block;
  margin-top: 24px;
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.auth-back:hover { color: var(--ink); }

/* =========================================================
   REGISTRATION FORM — register.html
   Same card, same glass, same tokens as the auth pages; only
   wider, and with the numbered-question layout the form needs.
   ========================================================= */
.form-card {
  max-width: 620px;
  padding: 38px 40px;
  text-align: left;
}

.form-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 18px;
}

.form-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.form-progress .step.is-current { color: var(--mdx-pink); }
.form-progress .step-sep {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}

/* Several clauses inside one question, agreed to with a single answer: the
   line naming a clause is set apart from the statement under it. */
.q-label-block { display: block; }
.q-label-block .q-clause {
  margin: 14px 0 4px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
}
.q-label-block .q-clause:first-child { margin-top: 0; }
.q-label-block .q-line { margin: 0; font-weight: 400; }

/* A named clause above a question: "Payment Confirmation & Capacity:" over
   the statement it introduces. */
.q-heading {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
}
.q + .q .q-heading { margin-top: 10px; }

.required-note {
  margin: 0 0 22px;
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.req { color: var(--mdx-red); font-weight: 700; }

.form-section-title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  margin: 0 0 10px;
}
.form-section-copy {
  margin: 0 0 28px;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ink-dim);
}

/* Counter rather than list markers, so the number can be styled and sit on the
   same line as a question that wraps. */
.q-list {
  list-style: none;
  counter-reset: q;
  margin: 0 0 26px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.q { counter-increment: q; }
.q-label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
}
.q-label::before {
  content: counter(q) ". ";
  color: var(--ink-dim);
  font-weight: 700;
}
/* A question written as several clauses puts its number on the first line
   rather than on a line of its own above them. */
.q-label-block::before { content: none; }
.q-label-block > :first-child::before {
  content: counter(q) ". ";
  color: var(--ink-dim);
  font-weight: 700;
}
.q input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.24);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.q input::placeholder { color: var(--ink-faint); }
.q input:focus {
  outline: none;
  border-color: var(--mdx-pink);
  box-shadow: 0 0 0 3px rgba(229, 0, 89, 0.18);
}
.q input[aria-invalid="true"] { border-color: var(--mdx-red); }

.q-hint {
  margin: 7px 0 0;
  font-size: 0.76rem;
  color: var(--ink-faint);
}
.q .field-error { margin-top: 6px; }

/* =========================================================
   ADMIN SHELLS — itadmin / eventsadmin / financesadmin
   ========================================================= */
.admin-warning {
  margin: 0 0 26px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(230, 5, 31, 0.42);
  background: rgba(230, 5, 31, 0.12);
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ink);
}
.admin-warning strong { color: #ff8a9c; }

.admin-list {
  margin: 0 0 24px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-dim);
}
.admin-list li::marker { color: var(--mdx-yellow); }

.auth-alt a + a { margin-left: 16px; }

.admin-actions {
  display: flex;
  gap: 22px;
  justify-content: center;
  margin: 24px 0 0;
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.admin-actions a { color: var(--ink-faint); }
.admin-actions a:hover { color: var(--ink); }

/* =========================================================
   IT ADMIN CONSOLE
   A page of its own rather than a hero: a header, tabs, and a
   grid of cards that expand in place.
   ========================================================= */
.console-body {
  min-height: 100vh;
  background: radial-gradient(ellipse 120% 60% at 50% -10%, #241d52 0%, var(--bg-0) 55%);
}

.console-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: clamp(12px, 1.2vw, 18px) clamp(14px, 1.6vw, 32px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(10, 8, 24, 0.55);
  backdrop-filter: blur(18px);
  /* The blur makes this a stacking context of its own. Without a z-index of
     its own that context sits below the cards further down the page, and the
     Settings menu - which lives inside the header - was being painted over by
     them halfway down the list. */
  position: relative;
  z-index: 80;
}
.console-brand { display: flex; align-items: center; gap: 14px; }
.console-brand img { height: 40px; width: auto; }
.console-brand div { display: flex; flex-direction: column; line-height: 1.3; }
.console-brand strong { font-family: var(--font-display); font-size: 1rem; }
.console-brand span { font-size: 0.78rem; color: var(--ink-faint); }
.console-header-actions { display: flex; gap: 10px; }

/* The console takes the width it is given rather than sitting in a 1180px
   column with empty margins either side of it: capped so text lines never run
   absurdly long, but on a wide screen that cap is far wider than the old one,
   and the padding shrinks with the viewport instead of holding 32px on a
   phone. */
.console-main {
  width: 100%;
  max-width: min(1720px, 96vw);
  margin: 0 auto;
  padding: clamp(16px, 1.8vw, 28px) clamp(14px, 1.6vw, 32px) 96px;
}

.console-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 22px 0 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
/* Inside Settings there are nine of these. Wrapped, they broke into two
   ragged lines that read as two unrelated groups; kept on one line they read
   as what they are - a strip of pages - and scroll sideways on a screen too
   narrow to hold them. */
body.is-settings .console-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}
body.is-settings .console-tab { flex: none; }
.console-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 100px;
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.console-tab:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.console-tab.is-active {
  color: #fff;
  background: linear-gradient(135deg, rgba(230, 5, 31, 0.9), rgba(229, 0, 89, 0.9));
}
.console-tab-count {
  font-size: 0.72rem;
  padding: 1px 7px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.28);
}

/* Cards sit in a responsive grid; an expanded one spans the full width so its
   fields are not squeezed into a single column. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  align-items: start;
}

.console-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.console-card:hover { border-color: rgba(255, 255, 255, 0.24); }
.console-card.is-wide { grid-column: 1 / -1; }
.console-card.is-off { opacity: 0.62; }
.console-card.is-open { border-color: rgba(229, 0, 89, 0.38); }

.console-card-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
}
.console-card-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.console-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.96rem;
  font-weight: 700;
}
.console-card-sub {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-faint);
}
.console-chevron {
  flex: none;
  font-size: 0.7rem;
  color: var(--ink-faint);
  transition: transform var(--dur-fast) var(--ease-out);
}
.console-card.is-open .console-chevron { transform: rotate(90deg); }

.console-pill {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 100px;
  color: #ff8a9c;
  background: rgba(230, 5, 31, 0.16);
}

/* Sits over the header rather than inside it, so flipping the switch does not
   also expand the card. */
.console-card-switch {
  position: absolute;
  top: 16px;
  right: 46px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink-dim);
  cursor: pointer;
}
.console-card-switch input { accent-color: var(--mdx-pink); cursor: pointer; }
.console-card-head { padding-right: 150px; }

.console-card-body {
  padding: 4px 20px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 2px;
}
.console-card.is-wide .console-card-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 24px;
  align-items: start;
}
/* The two columns exist for short labelled fields and nothing else. Everything
   else spans - listing what may span was a whitelist that quietly squeezed each
   new kind of content into half a card until somebody remembered to add it. */
.console-card.is-wide .console-card-body > * { grid-column: 1 / -1; }
.console-card.is-wide .console-card-body > .admin-field { grid-column: auto; }

/* A settings page is a form to fill in once, not a grid to scan. Transport
   gives each field a line of its own - label and hint on top, the box
   underneath - and stops the box before it runs the width of the monitor.
   Ours took as many columns as the screen would allow, which on a wide
   screen stood four fields side by side and cut every label in half. The
   column editors and tables in these cards still span, because they are
   tables, not fields. */
.console-card.is-settings .console-card-body > .admin-field { grid-column: 1 / -1; }
.console-card.is-settings .admin-field { max-width: 620px; }
.console-card.is-settings .admin-field textarea { min-height: 96px; }

.admin-section-note {
  margin: 16px 0 18px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-faint);
}

.admin-field { margin: 16px 0 0; }
.admin-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-dim);
}
.admin-field input[type="text"],
.admin-field textarea,
.admin-field select {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.32);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.88rem;
  resize: vertical;
}
.admin-field input[type="text"]:focus,
.admin-field textarea:focus,
.admin-field select:focus {
  outline: none;
  border-color: var(--mdx-pink);
  box-shadow: 0 0 0 3px rgba(229, 0, 89, 0.18);
}
.admin-field-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-field-toggle label { margin: 0; color: var(--ink); }
.admin-field-toggle input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--mdx-pink);
  cursor: pointer;
  flex: none;
}

.admin-subheading {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 26px 0 4px;
}

.admin-item {
  margin: 16px 0 0;
  padding: 14px 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.22);
}
.admin-item-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.admin-item-head strong { font-size: 0.9rem; flex: 1; min-width: 0; }
.admin-remove {
  flex: none;
  padding: 5px 12px;
  border-radius: 100px;
  border: 1px solid rgba(230, 5, 31, 0.45);
  background: rgba(230, 5, 31, 0.12);
  color: #ff8a9c;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
}
.admin-remove:hover { background: rgba(230, 5, 31, 0.26); color: #fff; }

/* Workflow steps are numbered so their order reads at a glance. */
.wf-step.is-off { opacity: 0.55; }
.wf-step-num {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(229, 0, 89, 0.22);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
}

.admin-add { margin-top: 18px; }

.admin-warning {
  margin: 0 0 8px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(230, 5, 31, 0.42);
  background: rgba(230, 5, 31, 0.12);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink);
}
.admin-warning strong { color: #ff8a9c; }
.admin-warning code {
  font-size: 0.95em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
}

.admin-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding: 16px 0;
  background: linear-gradient(to top, var(--bg-0) 72%, rgba(13, 10, 31, 0));
}
.admin-status { margin: 0; font-size: 0.82rem; color: var(--ink-faint); }
.admin-status.is-dirty { color: var(--mdx-yellow); }
.admin-status.is-ok { color: #6ee7a8; }
.admin-status.is-error { color: #ff8a9c; }
.admin-savenote {
  margin: 0 0 0 auto;
  font-size: 0.76rem;
  color: var(--ink-faint);
}

.console-links {
  margin: 34px 0 0;
  font-size: 0.84rem;
  color: var(--ink-faint);
}
.console-links a { color: var(--ink-dim); margin-left: 14px; }
.console-links a:hover { color: var(--ink); }

.admin-actions {
  display: flex;
  gap: 22px;
  justify-content: center;
  margin: 24px 0 0;
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.admin-actions a { color: var(--ink-faint); }
.admin-actions a:hover { color: var(--ink); }

.admin-list {
  margin: 0 0 24px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-dim);
}
.admin-list li::marker { color: var(--mdx-yellow); }

.auth-alt a + a { margin-left: 16px; }

/* A locked answer comes from the account, so it must not look like somewhere
   to type. Read-only on its own is invisible next to an editable box - hence
   the flat panel, the dashed edge and the padlock. */
.q-locked { position: relative; display: block; }
.q input.is-locked {
  background: rgba(255, 255, 255, 0.03);
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--ink-dim);
  cursor: not-allowed;
  padding-right: 42px;
}
.q input.is-locked:focus {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}
.q-locked svg {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  pointer-events: none;
  stroke: var(--ink-faint);
}

@media (max-width: 700px) {
  .console-header { padding: 14px 18px; }
  .console-main { padding: 20px 18px 110px; }
  .console-card-head { padding-right: 20px; }
  .console-card-switch { position: static; margin: 0 20px 14px; }
  .admin-savenote { margin-left: 0; }
}

/* =========================================================
   MODAL — participant-type chooser
   ========================================================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
}

/* `display: grid` above out-ranks the UA stylesheet's `[hidden] { display: none }`,
   which would otherwise leave a transparent full-screen overlay sitting over the
   page and eating every click. Keep it out of the way while closed, and let
   clicks through during the closing fade. */
.modal[hidden] { display: none; }
.modal:not(.is-open) { pointer-events: none; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 20, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

/* Focused on open so screen readers land inside the dialog, but it's a
   container rather than a control — the visible ring belongs on the cards. */
.modal-dialog:focus { outline: none; }

.modal-dialog {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.modal.is-open .modal-backdrop { opacity: 1; }
.modal.is-open .modal-dialog { opacity: 1; transform: none; }

.modal-dialog .type-prompt { padding-right: 36px; }

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.24);
  color: var(--ink-dim);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.modal-close:hover {
  color: #fff;
  border-color: rgba(229, 0, 89, 0.5);
  background: rgba(229, 0, 89, 0.14);
}

/* Stops the page scrolling behind an open modal. */
body.modal-open { overflow: hidden; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* Between tablet and small-desktop the CTA box stays a fixed width while the
   viewport shrinks, so the podium has to give up ground faster than 28vw does. */
@media (max-width: 1279px) {
  .hero-prop-podium { height: clamp(170px, 40vh, 54%); opacity: 0.6; }
}

@media (max-width: 700px) {
  .hero-prop-gavel, .hero-prop-quote { display: none; }
  .hero-prop-podium { height: 38%; opacity: 0.45; }
}

@media (max-width: 600px) {
  .register-teaser { width: 100%; }
  .meta-row { font-size: 0.82rem; }
  .register-panel { padding: 28px 22px; }
  .modal { padding: 16px; }
  .auth-card { padding: 28px 22px; }
  .form-card { padding: 26px 20px; }
  .form-title { font-size: 1.2rem; }
  .q-list { gap: 20px; }
  .auth-title { font-size: 1.3rem; }
  .type-toggle { grid-template-columns: 1fr 1fr; gap: 10px; }
  .type-option { padding: 16px 10px; }
}

/* Multi-section form: progress, and the Back/Next pair. */
.form-progress { flex-wrap: wrap; }
.form-progress .step.is-done { color: var(--ink-dim); }
.form-progress .step-sep { min-width: 16px; }

.form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 6px;
}
.form-actions .btn-primary { flex: 1; justify-content: center; }
.form-actions #backBtn { flex: none; }

/* Sections nest inside a form card, so they need to read as a level up from
   the questions they contain. */
.admin-section-item {
  border-color: rgba(229, 0, 89, 0.28);
  background: rgba(0, 0, 0, 0.3);
}
.admin-section-item.is-off { opacity: 0.6; }
.admin-question { background: rgba(255, 255, 255, 0.04); }

.admin-subheading-sm {
  font-size: 0.72rem;
  margin: 22px 0 2px;
  color: var(--ink-faint);
}

.admin-moves { display: flex; gap: 4px; flex: none; }
.admin-move {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink-dim);
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
}
.admin-move:hover:not(:disabled) { color: #fff; border-color: var(--mdx-pink); }
.admin-move:disabled { opacity: 0.3; cursor: not-allowed; }

/* Repeating participant blocks, dropdowns and radio groups on the form. */
.q-group-head {
  list-style: none;
  counter-increment: none;
  margin-top: 26px;
}

/* Inside a participant block the fields are not numbered. The heading above
   them carries the only number that means anything there - Participant 2 -
   and repeating 5., 6., 7. under each one just buried it. The questions
   outside the blocks keep their numbers and run on unbroken, because the
   blocks no longer take any of them. */
.q.q-group { counter-increment: none; }
.q-group .q-label::before,
.q-group .q-label-block > :first-child::before { content: none; }
.q-group-head h3 {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mdx-yellow);
}

.q select {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.24);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.q select:focus {
  outline: none;
  border-color: var(--mdx-pink);
  box-shadow: 0 0 0 3px rgba(229, 0, 89, 0.18);
}

.q-radios { display: flex; flex-direction: column; gap: 10px; }
.q-radios[aria-invalid="true"] { padding-left: 10px; border-left: 2px solid var(--mdx-red); }
.q-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--ink);
  cursor: pointer;
}
.q-radio input {
  width: 17px;
  height: 17px;
  accent-color: var(--mdx-pink);
  cursor: pointer;
  flex: none;
}

.form-section-copy a {
  color: var(--ink);
  border-bottom: 1px solid rgba(229, 0, 89, 0.55);
}
.form-section-copy a:hover { color: #fff; border-bottom-color: var(--mdx-pink); }

/* The repeating block sits a level inside a section in the console. */
.admin-repeat {
  margin-top: 22px;
  padding: 14px 16px 18px;
  border: 1px dashed rgba(245, 157, 0, 0.42);
  border-radius: var(--radius-sm);
  background: rgba(245, 157, 0, 0.05);
}
.admin-repeat > .admin-subheading-sm { color: var(--mdx-yellow); margin-top: 0; }

/* A write-only secret: the badge says whether one is stored, never what. */
.secret-state {
  margin-left: 10px;
  padding: 1px 8px;
  border-radius: 100px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: rgba(255, 255, 255, 0.08);
}
.secret-state.is-set { color: #6ee7a8; background: rgba(110, 231, 168, 0.14); }
.admin-field input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.32);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.88rem;
}
.admin-field input[type="password"]:focus {
  outline: none;
  border-color: var(--mdx-pink);
  box-shadow: 0 0 0 3px rgba(229, 0, 89, 0.18);
}
.console-card-body .admin-warning { margin-top: 20px; grid-column: 1 / -1; }

/* =========================================================
   PAYMENT SECTION + CONFIRMATION
   ========================================================= */
.pay-section { list-style: none; counter-increment: none; }
.pay-heading {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mdx-yellow);
}

.pay-summary {
  margin: 0 0 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 18px;
  font-size: 0.86rem;
}
.pay-summary dt { color: var(--ink-faint); min-width: 0; }
.pay-summary dd { margin: 0; color: var(--ink); font-weight: 600; min-width: 0; word-break: break-word; }
.pay-summary-group {
  grid-column: 1 / -1;
  margin: 12px 0 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mdx-yellow);
}

.pay-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.26);
}
.pay-total span { color: var(--ink-dim); font-size: 0.86rem; }
.pay-total strong { font-family: var(--font-display); font-size: 1.3rem; }

.pay-declined {
  margin: 0 0 20px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(230, 5, 31, 0.42);
  background: rgba(230, 5, 31, 0.12);
  font-size: 0.85rem;
  line-height: 1.55;
}
.pay-declined strong { color: #ff8a9c; display: block; margin-bottom: 3px; }

.pay-consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 6px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink);
  cursor: pointer;
}
.pay-consent input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--mdx-pink);
  cursor: pointer;
}

.confirm-ref,
.confirm-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 8px;
  font-size: 0.86rem;
}
.confirm-ref {
  margin-bottom: 20px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(245, 157, 0, 0.4);
  background: rgba(245, 157, 0, 0.08);
}
.confirm-ref span, .confirm-row span { color: var(--ink-dim); }
.confirm-ref strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--mdx-yellow);
  letter-spacing: 0.04em;
}
.confirm-paid {
  margin: 0 0 26px;
  padding: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.22);
}
.confirm-paid .confirm-row:last-child { margin-bottom: 0; }

#confirmBody .btn { margin-top: 22px; }

@media (max-width: 600px) {
  .pay-summary { grid-template-columns: 1fr; gap: 2px 0; }
  .pay-summary dt { margin-top: 10px; }
}

/* =========================================================
   SETTINGS MENU
   ========================================================= */
.settings-menu { position: relative; }
.settings-gear { font-size: 0.95em; margin-right: 2px; }
.settings-caret { font-size: 0.6em; opacity: 0.7; margin-left: 2px; }

.settings-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 230px;
  padding: 6px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(155deg, rgba(24, 19, 48, 0.98), rgba(13, 10, 31, 0.98));
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(20px);
  /* Long enough lists scroll rather than running off the bottom of the screen. */
  max-height: calc(100vh - 96px);
  overflow-y: auto;
}
.settings-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.settings-item:hover { background: rgba(255, 255, 255, 0.07); color: var(--ink); }
.settings-item.is-active {
  color: #fff;
  background: linear-gradient(135deg, rgba(230, 5, 31, 0.75), rgba(229, 0, 89, 0.75));
}

.console-tab-back { color: var(--ink-faint); }
.console-card.is-settings .console-card-head { cursor: default; }
.console-card.is-settings .console-chevron { display: none; }

.console-pill.is-ok { color: #6ee7a8; background: rgba(110, 231, 168, 0.16); }

.admin-url-link {
  display: inline-block;
  margin: 2px 0 4px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--mdx-yellow);
  border-bottom: 1px solid rgba(245, 157, 0, 0.4);
}
.admin-url-link:hover { color: #fff; border-bottom-color: var(--mdx-yellow); }
.admin-url .admin-item-head { margin-bottom: 6px; }

/* Field hints sit beside the label, so a field name becomes an instruction. */
.field-hint-inline {
  font-weight: 400;
  font-size: 0.92em;
  color: var(--ink-faint);
}
.admin-field input.is-mono,
.admin-field textarea.is-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.84rem;
  letter-spacing: 0.01em;
}

.sso-eyebrow {
  margin: 0 0 2px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sso-eyebrow .is-live { color: #6ee7a8; font-weight: 400; text-transform: none; }
.sso-eyebrow .is-off { color: var(--ink-faint); font-weight: 400; text-transform: none; }

.sso-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
}

.sso-exact {
  margin: 6px 0 4px;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--ink-faint);
}
.sso-exact code {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--mdx-yellow);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
}

.sso-callout {
  margin: 10px 0 4px;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.28);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink-dim);
}
.sso-callout code {
  display: inline-block;
  margin-top: 5px;
  padding: 4px 8px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--mdx-yellow);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95em;
  word-break: break-all;
}

.admin-url-live {
  display: block;
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--mdx-yellow);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  word-break: break-all;
}

/* Sub-headings inside an account card sit a level below the section ones. */
.admin-item h5.admin-subheading {
  margin: 18px 0 8px;
  font-size: 0.68rem;
  color: var(--ink-faint);
}
.admin-item .admin-status { margin-top: 12px; }

/* =========================================================
   SITE & ADMIN VIEW
   Looking at the other teams' areas without signing out.
   ========================================================= */
.card-grid.is-view { display: block; }

.view-address { margin: 0 0 12px; font-size: 0.8rem; color: var(--ink-faint); }
.view-address a {
  color: var(--mdx-yellow);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  border-bottom: 1px solid rgba(245, 157, 0, 0.4);
}

.view-frame {
  width: 100%;
  height: 72vh;
  min-height: 460px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  background: var(--bg-0);
}

/* The view entry and its sub-views sit in the header, each behind a rule, the
   way transport separates them from the title. */
.console-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.console-nav-group {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: 14px;
  margin-left: 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.console-nav-item { display: flex; align-items: center; }
.console-nav-btn,
.console-nav-view {
  border: none;
  background: none;
  color: var(--ink-faint);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 4px;
}
.console-nav-btn:hover,
.console-nav-view:hover { color: var(--ink); }
.console-nav-btn.is-active { color: #fff; }
.console-nav-view.is-active {
  color: #fff;
  background: linear-gradient(135deg, rgba(230, 5, 31, 0.9), rgba(229, 0, 89, 0.9));
  border-radius: 100px;
  padding: 6px 14px;
}
/* Home is the way back from anywhere, so it reads as a control rather than
   another label in the row - and it is the first thing in the header. */
.console-nav-home {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--ink-dim);
}
.console-nav-home:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.console-nav-home.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, rgba(230, 5, 31, 0.9), rgba(229, 0, 89, 0.9));
}
.console-nav-icon { font-size: 1rem; line-height: 1; }

/* It is the first entry, so it has nothing to be divided from. */
.console-nav > .console-nav-group:first-child {
  padding-left: 0;
  margin-left: 0;
  border-left: none;
}

.console-nav-rename {
  border: none;
  background: none;
  color: rgba(245, 244, 251, 0.35);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 2px 6px 2px 3px;
}
.console-nav-rename:hover { color: var(--ink); }

@media (max-width: 900px) {
  .console-nav-group { padding-left: 0; margin-left: 0; border-left: none; }
}

/* =========================================================
   TEAM DASHBOARD + MASTER SHEET
   ========================================================= */
.dash-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 4px;
}
.dash-subtitle { margin: 0 0 24px; font-size: 0.9rem; color: var(--ink-dim); }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.kpi-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
}
.kpi-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.kpi-value { font-family: var(--font-display); font-size: 1.9rem; line-height: 1; }

.sheet-wrap {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  padding: 20px;
}
/* The panel's own header: what this sheet is and how much of it you are
   looking at on the left, the things you can do to it on the right - the
   shape the transport master sheet uses. */
.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.sheet-head-text { min-width: 0; }
.sheet-head-text .sheet-title { display: block; margin-bottom: 3px; }
.sheet-head-text .sheet-note { margin: 6px 0 0; }
.sheet-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.sheet-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.sheet-btn:hover { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.sheet-btn.is-set { border-color: rgba(229, 0, 89, 0.6); }
.sheet-btn.is-primary {
  border-color: transparent;
  background: linear-gradient(135deg, rgba(230, 5, 31, 0.92), rgba(229, 0, 89, 0.92));
  color: #fff;
}
/* The two downloads are the things people come to this panel for, so they
   look like buttons you would press rather than quiet links. Excel gets the
   green the transport sheet gives it. */
.sheet-btn.is-download { border-color: rgba(255, 255, 255, 0.3); }
.sheet-btn.is-excel {
  border-color: transparent;
  background: #1e874b;
  color: #fff;
}
.sheet-btn.is-excel:hover { background: #23a05a; color: #fff; }

.sheet-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-faint);
}

/* Which columns to show. Remembered per person, per computer. */
.sheet-menu { position: relative; }
.sheet-menu-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  min-width: 280px;
  max-height: 380px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #17122f;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  text-align: left;
}
.sheet-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 6px 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sheet-menu-all {
  border: none;
  background: none;
  color: var(--mdx-pink, #ff5c8a);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.sheet-menu-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 6px;
  font-size: 0.82rem;
  cursor: pointer;
}
.sheet-menu-row input { width: 15px; height: 15px; cursor: pointer; }

/* The line under the header: search on the left, what is waiting to be saved
   on the right. */
.sheet-bar {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.sheet-search { display: flex; flex-direction: column; gap: 4px; flex: 0 1 280px; }
.sheet-field-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sheet-search-input {
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 8, 24, 0.6);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
}
.sheet-search-input:focus { outline: none; border-color: rgba(229, 0, 89, 0.7); }
.sheet-clear {
  border: none;
  background: none;
  color: var(--mdx-pink, #ff5c8a);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  padding: 9px 0;
}
.sheet-saving { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.sheet-pending { font-size: 0.8rem; font-weight: 600; color: #f0cf8f; white-space: nowrap; }
.sheet-error { font-size: 0.8rem; font-weight: 600; color: #ff8095; }

/* A second handle on the table's own sideways scroll, above the header rather
   than only at the foot of a table taller than the screen. */
.sheet-topscroll {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: rgba(255, 255, 255, 0.03);
}
.sheet-topscroll-spacer { height: 1px; }

/* The first two columns stay put while the rest scrolls past them, so a row
   never loses its reference and its name. */
.sheet th.sheet-sticky-1, .sheet td.sheet-sticky-1 { position: sticky; left: 0; z-index: 2; }
.sheet th.sheet-sticky-2, .sheet td.sheet-sticky-2 {
  position: sticky;
  left: var(--sheet-freeze, 150px);
  z-index: 2;
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.12);
}
.sheet thead th.sheet-sticky-1, .sheet thead th.sheet-sticky-2 { z-index: 4; }
.sheet tbody td.sheet-sticky-1, .sheet tbody td.sheet-sticky-2 { background: #14102c; }

/* The filter row under the column names. */
.sheet-filter-row th {
  top: 38px;
  padding: 6px 12px 10px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.sheet-filter {
  width: 100%;
  min-width: 110px;
  padding: 5px 8px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(10, 8, 24, 0.7);
  color: var(--ink);
  font: inherit;
  font-size: 0.74rem;
}
.sheet-title { font-family: var(--font-display); font-size: 1.05rem; margin: 0; }
.sheet-count { font-size: 0.78rem; color: var(--ink-faint); }
.sheet-note { margin: 6px 0 16px; font-size: 0.8rem; color: var(--ink-faint); }
.sheet-empty {
  margin: 24px 0;
  padding: 28px;
  text-align: center;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  color: var(--ink-faint);
  font-size: 0.88rem;
}
.sheet-status { margin: 12px 0 0; font-size: 0.8rem; color: var(--ink-faint); min-height: 1.2em; }

/* Wide sheets scroll inside their own box; the page never scrolls sideways. */
.sheet-scroll {
  overflow-x: auto;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.sheet { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.sheet th {
  position: sticky;
  top: 0;
  padding: 11px 12px;
  text-align: left;
  white-space: nowrap;
  background: rgba(20, 16, 44, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.sheet-editable {
  margin-left: 7px;
  padding: 1px 6px;
  border-radius: 100px;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--mdx-yellow);
  background: rgba(245, 157, 0, 0.14);
}
.sheet td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--ink);
  vertical-align: middle;
  white-space: nowrap;
}
.sheet tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }
.sheet td.is-editable { padding: 5px 8px; }

.sheet-input {
  width: 100%;
  min-width: 130px;
  padding: 6px 9px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.3);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.82rem;
}
.sheet-input:focus {
  outline: none;
  border-color: var(--mdx-pink);
  box-shadow: 0 0 0 2px rgba(229, 0, 89, 0.2);
}
.sheet-input.is-saving { opacity: 0.6; }
.sheet-input.is-saved { border-color: #6ee7a8; }
/* Typed, but not written down yet - it goes when Save does. */
.sheet-input.is-changed {
  border-color: rgba(240, 207, 143, 0.75);
  background: rgba(240, 207, 143, 0.12);
}

.view-dashboard { margin-top: 8px; }

/* =========================================================
   IT Administration — the Home tab.
   The overview sits above the tab's own card and spans the
   full width; the card underneath is what edits it.
   ========================================================= */
.card-grid.is-home { grid-template-columns: 1fr; }

.home-pane { margin-bottom: 6px; }

/* In a team view the console shows the team's own page and nothing else, so
   the console's own notices step out of the way. */
body.is-viewing .admin-warning,
body.is-viewing .console-tabs { display: none; }
body.is-viewing .admin-bar { display: none; }

/* The overview is a card in its own right, so its body is a plain column
   rather than the two-column field grid the editing cards use. */
.home-card { margin-bottom: 6px; }
.home-card .console-card-head { padding-right: 20px; cursor: default; }
.home-card .console-card-body { padding-top: 18px; }
/* Six tiles that sit on one row on a wide window, and wrap evenly rather
   than leaving one stranded on a line of its own. */
.home-card .kpi-grid {
  margin-bottom: 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.home-card .kpi-tile { padding: 14px 16px; gap: 6px; }
.home-card .admin-subheading { margin-top: 22px; }
.home-card .home-links { margin-bottom: 0; }

/* A tile whose figure needs attention — closed, incomplete, still on the
   starting password. Warned, not alarmed: the border carries it. */
.kpi-tile.is-warn {
  border-color: rgba(240, 207, 143, 0.42);
  background: linear-gradient(155deg, rgba(240, 207, 143, 0.13), rgba(255, 255, 255, 0.04));
}
.kpi-note {
  font-size: 0.76rem;
  color: var(--ink-faint);
  line-height: 1.35;
}

.home-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  margin-bottom: 26px;
}
.home-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.home-link:hover,
.home-link:focus-visible {
  border-color: rgba(240, 207, 143, 0.5);
  transform: translateY(-2px);
}
.home-link strong { font-size: 0.95rem; }
.home-link span { font-size: 0.78rem; color: var(--ink-faint); line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
  .home-link:hover,
  .home-link:focus-visible { transform: none; }
}

/* =========================================================
   Registration form — the payment step.

   The last screen before money changes hands, so it shows
   back everything that was typed. Label and value sit on one
   row so a long entry stays scannable rather than turning
   into a column of paragraphs.
   ========================================================= */
.pay-section { counter-increment: none; }

.pay-heading {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0 0 4px;
}
.pay-lead {
  margin: 0 0 18px;
  font-size: 0.85rem;
  color: var(--ink-dim);
  line-height: 1.5;
}

.pay-summary {
  margin: 0 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.035);
  padding: 4px 18px 14px;
}
.pay-summary dt {
  font-size: 0.78rem;
  color: var(--ink-faint);
  line-height: 1.4;
  padding-top: 12px;
}
.pay-summary dd {
  margin: 2px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
  word-break: break-word;
}

/* Two columns once there is room for them: the label reads down the left, the
   answer down the right, which is far quicker to check than alternating rows. */
@media (min-width: 620px) {
  .pay-summary {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: 20px;
    align-items: baseline;
  }
  .pay-summary dt { grid-column: 1; }
  .pay-summary dd { grid-column: 2; padding-top: 12px; margin-top: 0; }
  .pay-summary-group { grid-column: 1 / -1; }
}

.pay-summary-group {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mdx-yellow);
}
.pay-summary-group:first-child { margin-top: 0; border-top: none; padding-top: 14px; }

.pay-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(229, 0, 89, 0.38);
  background: linear-gradient(135deg, rgba(229, 0, 89, 0.14), rgba(255, 255, 255, 0.03));
}
.pay-total span { font-size: 0.85rem; color: var(--ink-dim); }
.pay-total strong { font-family: var(--font-display); font-size: 1.5rem; }

.pay-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  cursor: pointer;
}
.pay-consent input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.pay-consent span { font-size: 0.85rem; color: var(--ink-dim); line-height: 1.5; }
.pay-consent input:disabled + span { color: var(--ink-faint); }

/* A declined attempt lands back here; it needs to be impossible to miss. */
.pay-declined {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(200, 16, 46, 0.55);
  background: rgba(200, 16, 46, 0.14);
  font-size: 0.85rem;
  line-height: 1.5;
}
.pay-declined strong { display: block; margin-bottom: 4px; }

/* A disabled button has to look disabled. Without this the Pay button stays
   bright and inviting while doing nothing, which reads as a broken page
   rather than a step that is not ready yet. */
.btn:disabled,
.btn[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.45);
  box-shadow: none;
}
.btn:disabled:hover,
.btn[disabled]:hover { transform: none; }

/* =========================================================
   Settings — Data management.
   The entry list and the only place a row can be removed.
   ========================================================= */
.entries-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 14px;
}
/* The count sits left, the buttons keep together on the right. */
.entries-bar .sheet-count { margin-right: auto; white-space: nowrap; }
.entries-bar .btn {
  padding: 9px 16px;
  font-size: 0.8rem;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .entries-bar { flex-wrap: wrap; }
  .entries-bar .sheet-count { width: 100%; margin: 0 0 4px; }
}

/* Destructive buttons say so before they are pressed, not after. */
.admin-danger {
  border-color: rgba(200, 16, 46, 0.55);
  color: #ff8095;
}
.admin-danger:hover:not(:disabled) {
  border-color: var(--mdx-red);
  background: rgba(200, 16, 46, 0.16);
  color: #fff;
}

/* Roomier than the teams' sheet: this one is read and acted on, not scanned. */
.entries-table th,
.entries-table td { padding-top: 12px; padding-bottom: 12px; }
.entries-table th:first-child,
.entries-table td:first-child { width: 34px; padding-right: 0; }
/* The last column holds the row's Delete, so it stays at the right edge. */
.entries-table th:last-child,
.entries-table td:last-child { text-align: right; width: 1%; }
.entries-table input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.entries-table tr.is-picked { background: rgba(229, 0, 89, 0.1); }
.entries-table td.is-paid { color: #7ee2a8; font-weight: 600; }
.entries-table .admin-remove { white-space: nowrap; }

/* =========================================================
   Settings — configuration tables.

   One row per thing, the way the transport console lays them
   out. A stacked box per row is readable at five rows and
   unreadable at forty.
   ========================================================= */
.cfg-table {
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 14px;
}

.cfg-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 150px 120px auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.cfg-row:last-child { border-bottom: none; }
.cfg-row:hover { background: rgba(255, 255, 255, 0.03); }

/* A switched-off row stays legible - it is still being read and set. */
.cfg-row.is-off { opacity: 0.55; }

.cfg-head {
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 9px 14px;
}
.cfg-head:hover { background: rgba(255, 255, 255, 0.05); }

.cfg-input {
  width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(11, 8, 30, 0.55);
  color: var(--ink);
  font: inherit;
  font-size: 0.83rem;
}
.cfg-input:focus {
  outline: none;
  border-color: var(--mdx-pink);
}
/* The dropdown's choices sit under its row rather than widening every row. */
.cfg-choices { grid-column: 2 / -1; margin-top: 2px; }

.cfg-select {
  width: 100%;
  padding: 7px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(11, 8, 30, 0.9);
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
}
.cfg-select:disabled { opacity: 0.4; }

.cfg-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  color: var(--ink-dim);
  white-space: nowrap;
  cursor: pointer;
}
.cfg-check input { width: 16px; height: 16px; cursor: pointer; }

.cfg-name { font-size: 0.85rem; }

.cfg-row .admin-moves { gap: 2px; }
.cfg-row .admin-remove { white-space: nowrap; }

/* Edit access is three columns, not six. */
.cfg-table-edit .cfg-row {
  grid-template-columns: auto minmax(0, 1fr) 150px;
}

@media (max-width: 780px) {
  .cfg-row { grid-template-columns: auto minmax(0, 1fr); row-gap: 8px; }
  .cfg-row > * { grid-column: 2; }
  .cfg-row > .admin-moves { grid-column: 1; grid-row: 1 / span 5; }
  .cfg-head { display: none; }
  .cfg-table-edit .cfg-row { grid-template-columns: auto minmax(0, 1fr); }
}

/* Offered beside a refused save, so a stale console has a way forward. */
.admin-status-action {
  margin-left: 10px;
  padding: 5px 12px;
  font-size: 0.78rem;
}

/* Places left, on the landing page and the payment step. */
.teaser-places {
  margin: 12px 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--mdx-yellow);
}
.pay-places {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(245, 157, 0, 0.4);
  background: rgba(245, 157, 0, 0.1);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mdx-yellow);
}

/* Why a Microsoft sign-in did not end in the registration form. */
.teaser-sso {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(200, 16, 46, 0.5);
  background: rgba(200, 16, 46, 0.14);
  font-size: 0.84rem;
  line-height: 1.5;
  text-align: left;
}

/* The student-list file picker. */
.roster-file {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-dim);
  font: inherit;
  font-size: 0.83rem;
  cursor: pointer;
}
.roster-file:disabled { opacity: 0.5; cursor: wait; }
.roster-file::file-selector-button {
  margin-right: 12px;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

/* Finding a teammate by MISIS number. */
.lookup-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.lookup-btn {
  padding: 8px 20px;
  font-size: 0.82rem;
  flex: none;
}
.lookup-note {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-faint);
  line-height: 1.4;
}
.lookup-note.is-ok { color: #7ee2a8; font-weight: 600; }
.lookup-note.is-error { color: #ff8095; }

/* The padlock goes when the sheet had nothing to fill the field with. */
.q-locked.is-open svg { display: none; }
.q-locked.is-open input { padding-right: 14px; }

/* Test mode. Loud on purpose: it is a way into the site with no password. */
.mock-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 10px 18px;
  background: repeating-linear-gradient(135deg,
    #f59d00 0 18px, #d98a00 18px 36px);
  color: #1a1206;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.4;
}
body.has-mock-banner { padding-top: 44px; }
@media (max-width: 620px) {
  body.has-mock-banner { padding-top: 70px; }
}

/* Who to contact, at the foot of the confirmation page. */
.confirm-contact {
  margin: 8px 0 22px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.035);
}
.confirm-contact .form-section-title { margin-top: 0; }
.confirm-contact .form-section-copy { margin-bottom: 10px; }
.confirm-contact .confirm-row a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 207, 143, 0.5);
}
.confirm-contact .confirm-row a:hover { border-bottom-color: var(--mdx-yellow); }

/* =========================================================
   Two sheets, and MDX (IFP) approval.
   ========================================================= */
.sheet-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 4px 0 16px;
}
.sheet-tab {
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.sheet-tab:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.sheet-tab.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, rgba(230, 5, 31, 0.9), rgba(229, 0, 89, 0.9));
}

.approval-bar {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.85rem;
  color: var(--ink-dim);
}
.approval-bar strong { color: var(--ink); }
.approval-bar.is-full {
  border-color: rgba(240, 207, 143, 0.45);
  background: rgba(240, 207, 143, 0.1);
}

.decision-cell { white-space: nowrap; }
.decision-btn {
  padding: 5px 12px;
  margin-right: 6px;
  border-radius: 100px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}
.decision-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.decision-btn.is-approve {
  background: rgba(126, 226, 168, 0.16);
  border-color: rgba(126, 226, 168, 0.5);
  color: #7ee2a8;
}
.decision-btn.is-reject {
  background: transparent;
  border-color: rgba(200, 16, 46, 0.55);
  color: #ff8095;
}
.decision-state {
  display: inline-block;
  margin-right: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-dim);
}
.decision-state.is-approved,
.decision-state.is-paid { color: #7ee2a8; }
.decision-state.is-rejected { color: #ff8095; }

/* Where an MDX team has got to. */
.team-tracker ol {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.team-tracker ol li {
  flex: 1;
  padding: 10px 8px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-faint);
}
.team-tracker ol li.is-done { color: #7ee2a8; border-color: rgba(126, 226, 168, 0.45); }
.team-tracker ol li.is-current {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, rgba(230, 5, 31, 0.85), rgba(229, 0, 89, 0.85));
}
.mdx-rejected { margin: 0 0 18px; }
.mdx-rejected p { margin: 4px 0 0; }
.q.pay-places strong,
.q.pay-declined strong { display: block; margin-bottom: 4px; }
.q.pay-places p,
.q.pay-declined p { margin: 0; }

/* =========================================================
   Settings — the master sheet cards, laid out the way the
   transport console lays them out: several entries per row,
   so forty columns read as a grid rather than a scroll.
   ========================================================= */
/* Two columns to a row, never three: a wide screen made room for a third and
   the result was a wall of boxes nobody could read across. */
.cfg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 30px;
  margin-bottom: 14px;
}
@media (min-width: 900px) {
  .cfg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The tick lists - edit access, required fields - stay three across, since a
   tick and a label need far less room than a column's whole set of controls. */
.cfg-grid.is-narrow { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* A column reads as two lines: what it is called, then what is done with it.
   On one line the name was the thing that gave way, and a sheet of columns
   with no names on it is unusable. */
/* Transport's shape: the name and its badge, then the team and its ticks,
   then Delete - all on one line, and the name reading as text rather than as
   a boxed field. */
.cfg-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 4px 12px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.cfg-entry > .cfg-entry-set {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
/* The controls share one line: two dropdowns sized to their content, the two
   ticks, and Delete pushed to the end. A select left at full width took a
   line each and turned every column into a four-line block. */
.cfg-entry-set > select {
  flex: 0 1 auto;
  width: auto;
  min-width: 118px;
  max-width: 190px;
}
.cfg-entry-set > .admin-remove { margin-left: auto; }
.cfg-entry > .cfg-entry-extra { grid-column: 1 / -1; margin-left: 46px; }
/* The small word that names what the ticks beside it are for. */
.cfg-entry-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.console-body .cfg-entry-tag { color: var(--c-muted); }
/* A figure's name and what it counts share the first line. */
.cfg-entry-name > select { flex: 0 1 auto; width: auto; min-width: 150px; }
/* A figure that needs no second line keeps everything on the first one. */
.cfg-entry.is-oneline { padding: 7px 0; }
.cfg-entry.is-oneline .cfg-entry-name { width: 100%; }
.cfg-entry.is-oneline .admin-remove { margin-left: auto; }
.cfg-entry-name .cfg-input { flex: 1 1 auto; min-width: 90px; }

/* A field that looks like text until you point at it. */
.cfg-input.is-quiet {
  border-color: transparent;
  background: transparent;
  font-weight: 600;
  padding-left: 6px;
  padding-right: 6px;
}
.cfg-input.is-quiet:hover { border-color: rgba(255, 255, 255, 0.18); }
.cfg-input.is-quiet:focus { border-color: rgba(229, 0, 89, 0.7); background: rgba(10, 8, 24, 0.5); }
.console-body .cfg-input.is-quiet { background: transparent; border-color: transparent; }
.console-body .cfg-input.is-quiet:hover { border-color: var(--c-line); background: var(--c-surface); }
.console-body .cfg-input.is-quiet:focus {
  border-color: var(--c-accent);
  background: var(--c-surface);
}

/* Delete as a plain word, not a bordered pill. */
.admin-remove.is-quiet {
  border-color: transparent;
  background: transparent;
  padding-left: 4px;
  padding-right: 4px;
}
.console-body .admin-remove.is-quiet { border-color: transparent; background: transparent; }
.console-body .admin-remove.is-quiet:hover { background: var(--c-danger-bg); }
.cfg-entry.is-off { opacity: 0.55; }
.cfg-entry-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cfg-entry-name .cfg-input { flex: 1; min-width: 0; }
.cfg-entry-set { display: flex; align-items: center; gap: 8px; }
.cfg-entry-extra { grid-column: 1 / -1; padding-bottom: 4px; }

/* Who sees a column, at a glance, the way transport badges it. */
.team-badge {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}
.team-badge.is-shared { background: rgba(255,255,255,0.08); color: var(--ink-dim); }
/* A column shown to some of the teams rather than one or all of them. */
.team-badge.is-some { background: rgba(255,214,102,0.16); color: #ffd666; }
.team-badge.is-events { background: rgba(126,226,168,0.14); color: #7ee2a8; }
.team-badge.is-finance { background: rgba(229,0,89,0.16); color: #ff8095; }

.cfg-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 0.83rem;
  color: var(--ink);
  cursor: pointer;
}
.cfg-check-label input { width: 16px; height: 16px; flex: none; cursor: pointer; }
.cfg-check-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cfg-group-title {
  grid-column: 1 / -1;
  margin: 14px 0 2px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mdx-yellow);
}

/* =========================================================
   The admin console, in daylight.

   Everything behind the sign-in - IT Administration, Events,
   Finance - is laid out on paper rather than on the dark hero,
   the way the transport site's admin is: white cards on a warm
   grey page, hairline borders, near-black text, and MDX indigo
   for the thing you are meant to press.

   Scoped to .console-body, which only the admin pages carry, so
   the public site and the sign-in screen keep the dark brand
   treatment.
   ========================================================= */
body.console-body {
  --c-page: #f7f5f4;
  --c-surface: #ffffff;
  --c-surface-2: #f4f2f1;
  --c-line: #e7e3e1;
  --c-line-soft: #f2f0ee;
  --c-text: #1a1a1a;
  --c-text-2: #4a4642;
  --c-muted: #a39d98;
  --c-accent: #2f2552;
  --c-green: #1e874b;
  --c-amber-bg: #faeeda;
  --c-amber-text: #854f0b;
  --c-amber-line: #e8d3ab;
  --c-danger: #9e1620;
  --c-danger-bg: #fcebeb;

  background: var(--c-page);
  color: var(--c-text);
}

/* --- header --- */
.console-body .console-header {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
}
.console-body .console-brand strong { color: var(--c-text); }
.console-body .console-brand span,
.console-body .console-card-sub,
.console-body .admin-savenote,
.console-body .field-hint,
.console-body .field-hint-inline,
.console-body .admin-section-note,
.console-body .dash-subtitle,
.console-body .sheet-note,
.console-body .sheet-count,
.console-body .kpi-label,
.console-body .kpi-note { color: var(--c-muted); }

.console-body .btn-ghost,
.console-body .console-nav-btn,
.console-body .console-nav-item,
.console-body .console-tab-back {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  color: var(--c-text-2);
}
.console-body .btn-ghost:hover,
.console-body .console-nav-btn:hover,
.console-body .console-nav-item:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}
.console-body .console-nav-home,
.console-body .console-nav-item.is-active,
.console-body .console-nav-view.is-active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}
.console-body .console-nav-group,
.console-body .console-nav { color: var(--c-muted); }

/* The team view buttons kept the dark theme's near-white text, which on paper
   left them all but invisible. They read as plain dark text, and the one you
   are on fills its box the way the Home button does. */
.console-body .console-nav-view {
  color: var(--c-text);
  font-weight: 700;
}
.console-body .console-nav-view:hover { color: var(--c-accent); }
.console-body .console-nav-view.is-active { color: var(--c-accent); }
.console-body .console-nav-item:has(.console-nav-view.is-active) {
  background: var(--c-accent);
  border-color: var(--c-accent);
}
.console-body .console-nav-item:has(.console-nav-view.is-active) .console-nav-view,
.console-body .console-nav-item:has(.console-nav-view.is-active) .console-nav-rename {
  color: #fff;
}
/* Small marks that were pale-on-dark and would be invisible on paper. */
.console-body .console-nav-rename,
.console-body .console-nav-icon,
.console-body .console-chevron,
.console-body .settings-caret,
.console-body .settings-gear { color: var(--c-muted); }
.console-body .console-nav-home .console-nav-icon,
.console-body .console-nav-item.is-active .console-nav-icon,
.console-body .console-card.is-open .console-chevron { color: inherit; }

.console-body .settings-dropdown {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: 0 14px 34px rgba(20, 22, 26, 0.18);
}
.console-body .settings-item { color: var(--c-text); }
.console-body .settings-item:hover,
.console-body .settings-item.is-active { background: var(--c-surface-2); }

/* --- the note about the host --- */
.console-body .admin-warning {
  background: var(--c-amber-bg);
  border: 1px solid var(--c-amber-line);
  color: var(--c-amber-text);
}
.console-body .admin-warning strong { color: var(--c-amber-text); }
.console-body .admin-warning a { color: var(--c-danger); }

/* --- tabs --- */
.console-body .console-tabs { border-bottom: 1px solid var(--c-line); }
.console-body .console-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--c-text-2);
}
.console-body .console-tab:hover { background: var(--c-surface-2); color: var(--c-text); }
.console-body .console-tab.is-active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}
.console-body .console-tab-count { background: rgba(0, 0, 0, 0.07); color: inherit; }
.console-body .console-tab.is-active .console-tab-count { background: rgba(255, 255, 255, 0.22); }

/* --- cards --- */
.console-body .console-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04);
}
.console-body .console-card:hover { border-color: #d9d4d1; }
.console-body .console-card.is-open { border-color: var(--c-accent); }
.console-body .console-card-title { color: var(--c-text); }
.console-body .console-card-body { border-top: 1px solid var(--c-line-soft); }
.console-body .console-pill { background: var(--c-surface-2); color: var(--c-muted); }
/* A head row with nothing but the state pill on it. */
.admin-item-head.is-bare { justify-content: flex-end; margin-bottom: 2px; }
.console-body .console-card-switch { color: var(--c-text-2); }

/* --- fields --- */
.console-body .admin-field label,
.console-body .admin-subheading,
.console-body .admin-subheading-sm,
.console-body .cfg-name,
.console-body .cfg-head { color: var(--c-text-2); }
.console-body .admin-field input[type="text"],
.console-body .admin-field input[type="email"],
.console-body .admin-field input[type="number"],
.console-body .admin-field input[type="password"],
.console-body .admin-field input[type="url"],
.console-body .admin-field textarea,
.console-body .admin-field select,
.console-body .cfg-input,
.console-body .cfg-select,
.console-body .sheet-search-input,
.console-body .sheet-filter,
.console-body .sheet-input {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  color: var(--c-text);
}
.console-body .admin-field input:focus,
.console-body .admin-field textarea:focus,
.console-body .admin-field select:focus,
.console-body .cfg-input:focus,
.console-body .cfg-select:focus,
.console-body .sheet-search-input:focus,
.console-body .sheet-input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(47, 37, 82, 0.12);
}
.console-body input::placeholder,
.console-body textarea::placeholder { color: var(--c-muted); }
.console-body input[type="checkbox"],
.console-body input[type="radio"] { accent-color: var(--c-accent); }

/* --- lists, items, small buttons --- */
.console-body .admin-item,
.console-body .admin-question,
.console-body .admin-section-item,
.console-body .admin-repeat {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}
.console-body .admin-item-head strong { color: var(--c-text); }
.console-body .admin-move,
.console-body .admin-add,
.console-body .cfg-check {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  color: var(--c-text-2);
}
.console-body .admin-move:hover:not(:disabled),
.console-body .admin-add:hover { border-color: var(--c-accent); color: var(--c-accent); }
.console-body .admin-remove,
.console-body .admin-danger {
  background: var(--c-surface);
  border: 1px solid #edc9c9;
  color: var(--c-danger);
}
.console-body .admin-remove:hover { background: var(--c-danger-bg); }
.console-body .cfg-row,
.console-body .cfg-entry { border-bottom: 1px solid var(--c-line-soft); }
.console-body .cfg-group-title { color: var(--c-accent); }
.console-body .cfg-check-label { color: var(--c-text); }
.console-body .admin-url,
.console-body .admin-url-link { color: var(--c-accent); }
.console-body .admin-url-live { color: var(--c-green); }

/* --- who a column belongs to --- */
.console-body .team-badge.is-shared { background: var(--c-surface-2); color: var(--c-text-2); }
.console-body .team-badge.is-some { background: #efe9fa; color: var(--c-accent); }
.console-body .team-badge.is-events { background: #e4f3ea; color: var(--c-green); }
.console-body .team-badge.is-finance { background: var(--c-danger-bg); color: var(--c-danger); }

/* --- the save bar --- */
.console-body .admin-bar {
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
}
.console-body .admin-status { color: var(--c-muted); }
.console-body .admin-status.is-dirty { color: var(--c-amber-text); }
.console-body .admin-status.is-ok { color: var(--c-green); }

/* --- the figures across the top --- */
.console-body .kpi-tile {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}
.console-body .kpi-value { color: var(--c-text); }
.console-body .kpi-tile.is-warn {
  background: var(--c-amber-bg);
  border-color: var(--c-amber-line);
}
.console-body .home-link {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  color: var(--c-text);
}
.console-body .home-link:hover { border-color: var(--c-accent); }
.console-body .home-link span { color: var(--c-muted); }
.console-body .dash-title,
.console-body .sheet-title,
.console-body h1,
.console-body h2,
.console-body h3 { color: var(--c-text); }

/* --- the master sheet --- */
.console-body .sheet-wrap {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}
.console-body .sheet-bar { border-bottom: 1px solid var(--c-line); }
.console-body .sheet-field-label { color: var(--c-muted); }
.console-body .sheet-btn {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  color: var(--c-text-2);
}
.console-body .sheet-btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.console-body .sheet-btn.is-primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}
.console-body .sheet-btn.is-excel {
  background: var(--c-green);
  border-color: var(--c-green);
  color: #fff;
}
.console-body .sheet-btn:disabled {
  background: var(--c-surface-2);
  border-color: var(--c-line);
  color: var(--c-muted);
}
.console-body .sheet-clear,
.console-body .sheet-menu-all { color: var(--c-accent); }
.console-body .sheet-pending { color: var(--c-amber-text); }
.console-body .sheet-error { color: var(--c-danger); }
.console-body .sheet-menu-pop {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: 0 14px 34px rgba(20, 22, 26, 0.18);
}
.console-body .sheet-menu-head {
  border-bottom: 1px solid var(--c-line-soft);
  color: var(--c-muted);
}
.console-body .sheet-menu-row { color: var(--c-text); }
.console-body .sheet-menu-row:hover { background: var(--c-surface-2); }

.console-body .sheet-topscroll {
  background: #fbfaf9;
  border: 1px solid var(--c-line);
  border-bottom: none;
}
.console-body .sheet-scroll { border: 1px solid var(--c-line); }
.console-body .sheet th {
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-line);
  color: var(--c-text-2);
}
.console-body .sheet-filter-row th { background: var(--c-surface); }
.console-body .sheet td {
  border-bottom: 1px solid var(--c-line-soft);
  color: var(--c-text);
}
.console-body .sheet tbody tr:hover td { background: #fbfaf9; }
.console-body .sheet tbody td.sheet-sticky-1,
.console-body .sheet tbody td.sheet-sticky-2 { background: var(--c-surface); }
.console-body .sheet tbody tr:hover td.sheet-sticky-1,
.console-body .sheet tbody tr:hover td.sheet-sticky-2 { background: #fbfaf9; }
.console-body .sheet th.sheet-sticky-2,
.console-body .sheet td.sheet-sticky-2 { box-shadow: 1px 0 0 var(--c-line); }
.console-body .sheet-editable { color: var(--c-accent); }
.console-body .sheet-input.is-changed {
  background: var(--c-amber-bg);
  border-color: var(--c-amber-line);
}
.console-body .sheet-empty {
  border: 1px dashed var(--c-line);
  color: var(--c-muted);
}
.console-body .sheet-status { color: var(--c-muted); }

/* --- the two sheets, and MDX approval --- */
.console-body .sheet-tab {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  color: var(--c-text-2);
}
.console-body .sheet-tab:hover { border-color: var(--c-accent); color: var(--c-accent); }
.console-body .sheet-tab.is-active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}
.console-body .approval-bar {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  color: var(--c-text-2);
}
.console-body .approval-bar strong { color: var(--c-text); }
.console-body .approval-bar.is-full {
  background: var(--c-amber-bg);
  border-color: var(--c-amber-line);
  color: var(--c-amber-text);
}
.console-body .decision-btn.is-approve {
  background: #e4f3ea;
  border-color: #b7dcc6;
  color: var(--c-green);
}
.console-body .decision-btn.is-reject {
  background: var(--c-surface);
  border-color: #edc9c9;
  color: var(--c-danger);
}
.console-body .decision-state { color: var(--c-muted); }
.console-body .decision-state.is-approved,
.console-body .decision-state.is-paid { color: var(--c-green); }
.console-body .decision-state.is-rejected { color: var(--c-danger); }

/* --- and the same for the things inside it ------------------------------ */

/* A wide screen gets more cards per row, not wider cards; a narrow one gets
   one card and its full attention. */
@media (max-width: 720px) {
  .console-main { padding-bottom: 72px; }
  .card-grid { grid-template-columns: 1fr; gap: 12px; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .console-card-head { padding-right: 20px; }
  .console-card-switch { position: static; margin: 0 20px 12px; }
  .sheet-wrap { padding: 14px; }
  .sheet-head, .sheet-bar { gap: 10px; }
  .sheet-saving { margin-left: 0; width: 100%; }
  .sheet-search { flex: 1 1 100%; }
  .home-links { grid-template-columns: 1fr; }
}

@media (min-width: 1500px) {
  /* Room for a fourth card across, and tiles that do not stretch into
     billboards. */
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

/* =========================================================
   Admin accounts — one line per account.

   The same shape the transport site uses: who it is and what
   it can reach on the left, what it is on the right, and the
   handful of things you can do to it as small buttons. The
   ticks and the password box open underneath only when asked
   for, so four accounts are four lines rather than four
   screens.
   ========================================================= */
.acct {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
}
.acct-row {
  display: flex;
  align-items: center;
  gap: 10px;
  row-gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
}
.acct-main { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acct-name { font-size: 0.87rem; font-weight: 600; }
.acct-sub {
  font-size: 0.74rem;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct-flag {
  flex: none;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(240, 207, 143, 0.16);
  color: #f0cf8f;
  white-space: nowrap;
}
.acct-pill {
  flex: none;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink-dim);
  white-space: nowrap;
}
.acct-btn {
  flex: none;
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.acct-btn:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.45); }
.acct-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.acct-btn.is-danger { border-color: transparent; color: #ff8095; }
.acct-btn.is-danger:hover { border-color: rgba(200, 16, 46, 0.5); }

.acct-panel {
  padding: 12px 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}
.acct-panel-title {
  margin: 0 0 8px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.acct-panel-title + .acct-checks { margin-bottom: 14px; }
.acct-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 4px 18px;
}
.acct-panel-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.acct-panel-line .cfg-input { flex: 1 1 240px; }

/* --- on paper --- */
.console-body .acct { border-color: var(--c-line); }
.console-body .acct-name { color: var(--c-text); }
.console-body .acct-sub { color: var(--c-muted); }
.console-body .acct-pill { background: var(--c-surface-2); color: var(--c-text-2); }
.console-body .acct-pill.is-super {
  background: rgba(154, 106, 0, 0.12);
  color: var(--c-amber-text);
}
.console-body .acct-flag { background: var(--c-amber-bg); color: var(--c-amber-text); }
.console-body .acct-btn {
  background: var(--c-surface);
  border-color: var(--c-line);
  color: var(--c-accent);
}
.console-body .acct-btn:hover:not(:disabled) { border-color: var(--c-accent); }
.console-body .acct-btn.is-set,
.console-body .acct-btn.is-open { background: rgba(47, 37, 82, 0.08); }
.console-body .acct-btn.is-primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}
.console-body .acct-btn.is-danger { color: var(--c-danger); border-color: transparent; }
.console-body .acct-btn.is-danger:hover { border-color: #edc9c9; }
.console-body .acct-panel {
  background: #fbfaf9;
  border-top-color: var(--c-line);
}
.console-body .acct-panel-title { color: var(--c-muted); }

/* =========================================================
   The team pages: figures that filter, and a queue to work in.
   ========================================================= */
.kpi-tile.is-filter { cursor: pointer; text-align: left; font: inherit; }
.kpi-tile.is-filter:hover { border-color: rgba(255, 255, 255, 0.35); }
.kpi-tile.is-on { border-color: var(--mdx-pink); }
.kpi-tile.is-sheet {
  cursor: pointer;
  font: inherit;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.kpi-tile.is-sheet .kpi-label { font-size: 0.74rem; }
.kpi-go { font-size: 1.1rem; }

.queue-wrap {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  padding: 20px;
}
.queue-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}
.queue-list { display: flex; flex-direction: column; gap: 8px; }
.queue-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.queue-main { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.queue-name { font-size: 0.9rem; font-weight: 600; }
.queue-sub {
  font-size: 0.76rem;
  color: var(--ink-faint);
  font-family: ui-monospace, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.queue-badge {
  flex: none;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 20px;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink-dim);
}

/* --- on paper --- */
.console-body .kpi-tile.is-filter:hover { border-color: var(--c-accent); }
.console-body .kpi-tile.is-on {
  border-color: var(--c-accent);
  box-shadow: inset 0 0 0 1px var(--c-accent);
}
.console-body .kpi-tile.is-sheet {
  background: var(--c-accent);
  border-color: var(--c-accent);
}
.console-body .kpi-tile.is-sheet .kpi-label,
.console-body .kpi-tile.is-sheet .kpi-go { color: #fff; }
.console-body .queue-wrap {
  background: var(--c-surface);
  border-color: var(--c-line);
}
.console-body .queue-row { border-color: var(--c-line); background: var(--c-surface); }
.console-body .queue-row:hover { background: #fbfaf9; }
.console-body .queue-name { color: var(--c-text); }
.console-body .queue-sub { color: var(--c-muted); }
.console-body .queue-badge { background: var(--c-surface-2); color: var(--c-text-2); }
.console-body .queue-badge.is-waiting { background: var(--c-amber-bg); color: var(--c-amber-text); }
.console-body .queue-badge.is-approved,
.console-body .queue-badge.is-paid { background: #e4f3ea; color: var(--c-green); }
.console-body .queue-badge.is-rejected { background: var(--c-danger-bg); color: var(--c-danger); }

/* =========================================================
   How dark the hero sits.

   The scrim over the clip, in three steps. "Dark" is the
   original; the others pull the wash back so the hero reads
   lighter without changing anything else about it. Set from
   IT admin, so it can be moved either way without a deploy.
   ========================================================= */
.hero.is-soft .hero-scrim {
  background: radial-gradient(80% 70% at 50% 40%, rgba(34, 26, 66, 0) 0%,
                              rgba(34, 26, 66, 0.14) 60%, rgba(23, 17, 49, 0.52) 100%);
}
.hero.is-soft .hero-video { opacity: 0.92; }

.hero.is-softest .hero-scrim {
  background: radial-gradient(85% 75% at 50% 40%, rgba(34, 26, 66, 0) 0%,
                              rgba(34, 26, 66, 0.06) 60%, rgba(23, 17, 49, 0.34) 100%);
}
.hero.is-softest .hero-video { opacity: 1; }

/* The panels gain a little more body as the background lightens, so the text
   on them keeps the same contrast it had on near-black. */
.hero.is-soft .hero-title-wrap,
.hero.is-soft .register-teaser { background: rgba(14, 11, 33, 0.52); }
.hero.is-softest .hero-title-wrap,
.hero.is-softest .register-teaser { background: rgba(14, 11, 33, 0.62); }

/* The speaker on the other side of the title, facing in. */
.hero-prop-podium-left {
  height: clamp(190px, calc((100vw - var(--hero-column)) / 2 / 0.6 * 0.9), 74%);
  width: auto;
  left: 0;
  bottom: 0;
}
@media (max-width: 1279px) {
  .hero-prop-podium-left { height: clamp(170px, 40vh, 54%); opacity: 0.6; }
}
@media (max-width: 700px) {
  .hero-prop-podium-left { height: 38%; opacity: 0.45; }
}

/* The {tokens} an email template may use. One that has no value at that
   stage is greyed rather than hidden, so the limit is visible.

   A button, not a label: clicking one puts it where the cursor is. That
   means undoing what a browser does to a button of its own accord - the
   border, the system font, the centred text - so it still reads as a chip
   and not as a row of tiny grey buttons. */
.token-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.token-chip {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
  line-height: 1.4;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink-dim);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.token-chip:hover,
.token-chip:focus-visible { background: rgba(255, 255, 255, 0.18); color: var(--ink); }
.token-chip:focus-visible { outline: 2px solid var(--c-accent, #d6001c); outline-offset: 1px; }
.token-chip:active { transform: translateY(1px); }
/* Greyed, but still clickable - it is legal to write and simply comes out
   empty at this stage, which the tooltip says. Lifting it on hover stops it
   looking disabled to someone about to click it. */
.token-chip.is-blank { opacity: 0.4; text-decoration: line-through; }
.token-chip.is-blank:hover,
.token-chip.is-blank:focus-visible { opacity: 0.75; }
.console-body .token-chip { background: var(--c-surface-2); color: var(--c-text-2); }
.console-body .token-chip:hover,
.console-body .token-chip:focus-visible {
  background: var(--c-line-soft);
  color: var(--c-text);
}

/* The "forgot your password?" line under the sign-in form, and the way back
   out of the reset steps. Quieter than the alternative-action line below it:
   this is a recovery path, not a choice between two journeys. */
.auth-forgot {
  margin: 14px 0 0;
  font-size: 0.82rem;
  text-align: center;
  color: var(--ink-faint);
}
.auth-forgot a { color: var(--ink-dim); text-decoration: underline; }
.auth-forgot a:hover { color: var(--ink); }

/* "or" between the password form and the Microsoft button on the admin
   sign-in page. A rule either side, so the two routes read as alternatives
   rather than as one thing following another. */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 16px;
  color: var(--ink-faint);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--glass-border);
}
.auth-microsoft { justify-content: center; }
.auth-foot {
  margin: 10px 0 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--ink-faint);
  text-align: center;
}

/* Session durations: a bold label, a muted line saying what it covers, then
   the number and its translation into hours side by side - transport's
   layout, because this is the same decision being made. */
.session-row { margin-bottom: 18px; }
.session-help {
  margin: 4px 0 7px;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--ink-faint);
}
.session-line { display: flex; align-items: center; gap: 8px; }
.session-minutes {
  width: 120px;
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.32);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.85rem;
}
.session-aside { font-size: 0.78rem; color: var(--ink-faint); }
.console-body .session-minutes {
  background: #fff; border: 1.5px solid var(--c-line); color: var(--c-text);
}