/* ==========================================================================
   musicuploads.css — MusicUploads master design system
   Built to Brand Style Guide v2.1 (August 2026).
   Shared stylesheet: load this on every musicuploads.com.au page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typeface — Gilroy, Light 300 + ExtraBold 800 only.
   On musicuploads.com.au replace this block with the existing
   /musicuploads/stylefont/font.css, corrected to one family + two weights.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Gilroy';
  src: url('fonts/Gilroy-Light.woff2') format('woff2'),
       url('fonts/Gilroy-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('fonts/Gilroy-ExtraBold.woff2') format('woff2'),
       url('fonts/Gilroy-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Core palette — style guide v2.1 */
  --navy: #1c4364;
  --navy-deep: #16374f;
  --brand-blue: #0072bb;
  --mid-blue: #007fb6;
  --green: #62bd2d;
  --purple: #733c71;
  --amber: #d88a00;

  /* Neutrals */
  --ink: #42505c;
  --ink-soft: #7b8794;
  --line: #e6e9f0;
  --page: #f6f7fb;
  --navy-soft: #9fc0dc;
  --white: #fff;

  /* Tints — backgrounds only, never body text */
  --tint-green: #eaf6e2;
  --tint-blue: #dfeefa;
  --tint-purple: #f1e5f0;
  --tint-amber: #fdf1dd;

  /* Readable ink on tints (derived, for labels sitting on a tint band) */
  --ink-green: #3f7a1c;
  --ink-blue: #005e9c;
  --ink-purple: #5c2b5a;
  --ink-amber: #8f5b00;

  /* Type */
  --font: 'Gilroy', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-fine: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Radii — 9px buttons, 11–14px cards, 20px pills */
  --r-btn: 9px;
  --r-card: 14px;
  --r-sm: 11px;
  --r-pill: 20px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(22, 55, 79, .06);
  --shadow: 0 2px 8px rgba(22, 55, 79, .07), 0 1px 2px rgba(22, 55, 79, .05);
  --shadow-lg: 0 12px 32px rgba(22, 55, 79, .12);

  /* Layout */
  --sidebar-w: 262px;
  --header-h: 68px;
  --gap: 20px;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 300;
  font-size: 15px;
  line-height: 23px;
  color: var(--ink);
  background: var(--page);
  /* Gilroy free has no 400/500/600/700 — stop the browser faking them */
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, strong, b, th, button, .eyebrow { font-weight: 800; }

h1, h2, h3, h4 { margin: 0; color: var(--navy); letter-spacing: -.2px; }

a { color: var(--brand-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 3px solid var(--mid-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* Type roles from the guide */
.page-title  { font-size: 31px; line-height: 38px; letter-spacing: -.5px; }
.hero-title  { font-size: 25px; line-height: 32px; color: var(--white); letter-spacing: -.3px; }
.h-section   { font-size: 19px; line-height: 26px; }
.h-card      { font-size: 16px; line-height: 22px; }
.body-soft   { color: var(--ink-soft); }
.eyebrow {
  font-size: 11px; line-height: 14px; text-transform: uppercase;
  letter-spacing: 1.3px; color: var(--ink-soft); margin: 0;
}
.fine {
  font-family: var(--font-fine); font-weight: 400;
  font-size: 12px; line-height: 18px; color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   4. App shell
   -------------------------------------------------------------------------- */
.shell { display: flex; min-height: 100vh; }

/* --- Sidebar --- */
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--white);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 40;
}

.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 20px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  color: var(--white);
}
.brand:hover { text-decoration: none; }

/* Close button inside the drawer. The open drawer covers the header hamburger
   on a phone, so it needs its own visible way out — tapping the scrim and
   pressing Escape both still work. Desktop never shows it. */
.icon-btn.drawer-close {
  display: none;
  position: absolute; top: 14px; right: 12px; z-index: 2;
  min-width: 44px; min-height: 44px;
  color: var(--white); background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .18);
}
.drawer-close:hover { background: rgba(255, 255, 255, .2); }
.wordmark { font-size: 20px; line-height: 1; letter-spacing: -.4px; }
.wordmark b { font-weight: 800; }
.wordmark span { font-weight: 300; color: var(--navy-soft); }
.brand-sub {
  display: block; margin-top: 4px; font-size: 11px; letter-spacing: 1.3px;
  text-transform: uppercase; font-weight: 800; color: var(--navy-soft);
}

.nav { flex: 1; overflow-y: auto; padding: 14px 12px 24px; }
.nav::-webkit-scrollbar { width: 8px; }
.nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 8px; }

.nav-group { margin-top: 16px; }
.nav-group:first-child { margin-top: 0; }
.nav-group > .eyebrow {
  color: rgba(255, 255, 255, .5);
  padding: 0 10px 8px;
}

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  color: rgba(255, 255, 255, .82);
  font-size: 14px; line-height: 19px; font-weight: 300;
  transition: background .15s ease, color .15s ease;
}
.nav-item:hover { background: rgba(255, 255, 255, .09); color: var(--white); text-decoration: none; }
.nav-item.active { background: rgba(255, 255, 255, .14); color: var(--white); font-weight: 800; }
.nav-item.active .ic { color: var(--white); }
.nav-item .ic { flex: 0 0 18px; width: 18px; height: 18px; color: var(--navy-soft); }
.nav-item .tag {
  margin-left: auto; font-size: 11px; font-weight: 800; letter-spacing: .3px;
  background: var(--amber); color: #fff;
  border-radius: var(--r-pill); padding: 1px 8px;
}
.nav-item.danger:hover { background: rgba(216, 138, 0, .22); }

/* --- Header --- */
.header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  min-height: var(--header-h);
  padding: 12px 24px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-titles { min-width: 0; }
.header-titles .page-title { font-size: 24px; line-height: 30px; white-space: nowrap; }
.header-titles .fine { margin: 2px 0 0; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.event-chip {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 12px 6px 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--navy);
  font-size: 14px; font-weight: 800;
  box-shadow: var(--shadow-sm);
}
.event-chip:hover { text-decoration: none; border-color: var(--navy-soft); }
.event-chip > span:not(.dot) { white-space: nowrap; }

/* Support / how-to videos — lives in the header, collapses to icon-only on small screens */
.header-help { white-space: nowrap; }
.header-help .ic { width: 17px; height: 17px; }
.event-chip .dot {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: grid; place-items: center;
  font-size: 11px; letter-spacing: .3px;
}
.event-chip .ic { width: 14px; height: 14px; color: var(--ink-soft); }

.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--white);
  border-radius: var(--r-btn); color: var(--navy);
  cursor: pointer;
}
.icon-btn:hover { border-color: var(--navy-soft); }
.icon-btn .ic { width: 18px; height: 18px; }

.hamburger { display: none; }

/* --- Main --- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.content { padding: 24px; display: grid; gap: var(--gap); max-width: 1400px; width: 100%; }

.footer {
  margin-top: auto;
  padding: 20px 24px 28px;
  border-top: 1px solid var(--line);
}
.footer p { margin: 0; }

/* --------------------------------------------------------------------------
   5. Cards, buttons, pills
   -------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
}
.card-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.card-head .h-section { margin-right: auto; }
.card-body { padding: 20px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-family: var(--font); font-weight: 800; font-size: 15px; line-height: 20px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn .ic { width: 17px; height: 17px; }
.btn-sm { padding: 7px 12px; font-size: 14px; }

/* One green primary action per screen — style guide v2.1 */
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: #56a827; }

.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-deep); }

.btn-blue { background: var(--brand-blue); color: #fff; }
.btn-blue:hover { background: #005e9c; }

.btn-purple { background: var(--purple); color: #fff; }
.btn-purple:hover { background: #5c2b5a; }

.btn-amber { background: var(--amber); color: #fff; }
.btn-amber:hover { background: #b57300; }

.btn-ghost { background: var(--white); border-color: var(--line); color: var(--navy); }
.btn-ghost:hover { border-color: var(--navy-soft); }

.btn-quiet { background: transparent; color: var(--brand-blue); padding-left: 0; padding-right: 0; }
.btn-quiet:hover { color: #005e9c; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px;
  border-radius: var(--r-pill);
  font-size: 12px; line-height: 18px; font-weight: 800;
  white-space: nowrap;
}
.pill.green  { background: var(--tint-green);  color: var(--ink-green); }
.pill.blue   { background: var(--tint-blue);   color: var(--ink-blue); }
.pill.purple { background: var(--tint-purple); color: var(--ink-purple); }
.pill.amber  { background: var(--tint-amber);  color: var(--ink-amber); }
.pill.navy   { background: #e8eef4;            color: var(--navy); }
.pill .bullet { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Notice boxes — tinted background, 4px left border, dark text of same hue */
.notice {
  border-radius: var(--r-sm);
  border-left: 4px solid;
  padding: 14px 16px;
}
.notice h4 { font-size: 15px; line-height: 21px; margin-bottom: 2px; }
.notice p { margin: 0; }
.notice.amber  { background: var(--tint-amber);  border-color: var(--amber);  }
.notice.amber h4  { color: var(--ink-amber); }
.notice.purple { background: var(--tint-purple); border-color: var(--purple); }
.notice.purple h4 { color: var(--ink-purple); }
.notice.blue   { background: var(--tint-blue);   border-color: var(--mid-blue); }
.notice.blue h4   { color: var(--ink-blue); }
.notice.green  { background: var(--tint-green);  border-color: var(--green); }
.notice.green h4  { color: var(--ink-green); }

/* --------------------------------------------------------------------------
   6. Hero / at-a-glance
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--navy-deep) 0%, var(--navy) 55%, #1f5079 100%);
  border-radius: var(--r-card);
  padding: 24px 26px;
  color: var(--white);
  display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap;
}
.hero::after {
  content: ''; position: absolute; right: -70px; top: -90px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(159, 192, 220, .22), transparent 68%);
  pointer-events: none;
}
.hero-main { flex: 1 1 380px; min-width: 0; position: relative; }
.hero .eyebrow { color: var(--navy-soft); margin-bottom: 6px; }
.hero-note { color: #cfe0ee; margin: 8px 0 0; max-width: 54ch; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.hero-cta .btn-ghost {
  background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); color: #fff;
}
.hero-cta .btn-ghost:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .5); }

.glance {
  flex: 0 1 420px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  position: relative;
}
.stat {
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}
.stat .eyebrow { color: var(--navy-soft); margin-bottom: 5px; }
.stat .v { font-size: 22px; line-height: 26px; font-weight: 800; color: #fff; }
.stat .v small { font-size: 13px; font-weight: 300; color: #cfe0ee; }
/* Progress meter — reusable. On navy (inside .stat) the track is a white wash;
   on white surfaces it falls back to the standard line colour. */
.meter {
  height: 5px; border-radius: 3px; background: var(--line);
  margin-top: 9px; overflow: hidden;
}
.meter i { display: block; height: 100%; border-radius: 3px; width: 0; transition: width .9s cubic-bezier(.2, .7, .2, 1); }
.stat .meter { background: rgba(255, 255, 255, .18); }

/* --------------------------------------------------------------------------
   7. Step / quick-action cards — green, blue, purple, amber in that order
   -------------------------------------------------------------------------- */
.steps {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.step {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.step:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.step-band {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
}
.step-band .n {
  width: 24px; height: 24px; border-radius: 7px;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800; color: #fff;
}
.step-band .eyebrow { color: inherit; }
.step-band .ic-tile {
  margin-left: auto;
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .6);
}
.step-band .ic-tile .ic { width: 16px; height: 16px; }
.step-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.step-body .h-card { margin-bottom: 2px; }
.step-body p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 21px; }
.step-body .go { margin-top: auto; padding-top: 12px; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.step-body .go .ic { width: 14px; height: 14px; }

.step.s1 .step-band { background: var(--tint-green);  color: var(--ink-green); }
.step.s1 .step-band .n { background: var(--green); }
.step.s1 .go { color: var(--ink-green); }
.step.s2 .step-band { background: var(--tint-blue);   color: var(--ink-blue); }
.step.s2 .step-band .n { background: var(--mid-blue); }
.step.s2 .go { color: var(--ink-blue); }
.step.s3 .step-band { background: var(--tint-purple); color: var(--ink-purple); }
.step.s3 .step-band .n { background: var(--purple); }
.step.s3 .go { color: var(--ink-purple); }
.step.s4 .step-band { background: var(--tint-amber);  color: var(--ink-amber); }
.step.s4 .step-band .n { background: var(--amber); }
.step.s4 .go { color: var(--ink-amber); }

/* --------------------------------------------------------------------------
   8. Split layout
   -------------------------------------------------------------------------- */
.split { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }

/* --- Notice board --- */
.notice-list { display: grid; }
.notice-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.notice-row:last-child { border-bottom: 0; }
.notice-row .flag {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
}
.notice-row .flag .ic { width: 17px; height: 17px; }
.notice-row.warn .flag  { background: var(--tint-amber);  color: var(--ink-amber); }
.notice-row.info .flag  { background: var(--tint-blue);   color: var(--ink-blue); }
.notice-row.tool .flag  { background: var(--tint-purple); color: var(--ink-purple); }
.notice-row .meta { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; }
.notice-row .date { font-size: 12px; font-weight: 800; color: var(--ink-soft); letter-spacing: .2px; }
.notice-row h4 { font-size: 15px; line-height: 21px; }
.notice-row p { margin: 3px 0 0; font-size: 14px; line-height: 21px; color: var(--ink-soft); }
.notice-row .link { font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; }
.notice-row .link .ic { width: 14px; height: 14px; }

/* --- Support panel --- */
.support-rows { display: grid; gap: 12px; }
.support-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--ink);
}
.support-row:hover { border-color: var(--navy-soft); text-decoration: none; }
.support-row .tile {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; color: #fff;
}
.support-row .tile .ic { width: 19px; height: 19px; }
.support-row .lbl { min-width: 0; display: block; }
.support-row .lbl .eyebrow { display: block; margin-bottom: 2px; }
.support-row .lbl .val { display: block; font-weight: 800; font-size: 15px; line-height: 21px; color: var(--navy); overflow-wrap: anywhere; }
.support-row .qr {
  margin-left: auto; flex: 0 0 54px;
  width: 54px; height: 54px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--page);
  display: grid; place-items: center;
  overflow: hidden;
}
.support-row .qr img { width: 100%; height: 100%; object-fit: contain; }
.tile.navy { background: var(--navy); }
.tile.blue { background: var(--mid-blue); }
.tile.green { background: var(--green); }
.tile.purple { background: var(--purple); }
.tile.amber { background: var(--amber); }

/* --- Tool tiles --- */
.tiles {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.tile-link {
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--navy);
  transition: border-color .15s ease, transform .15s ease;
}
.tile-link:hover { border-color: var(--navy-soft); transform: translateY(-1px); text-decoration: none; }
.tiles { align-items: stretch; }
.tile-link { align-items: flex-start; }
.tile-link .tile { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.tile-link .tile .ic { width: 18px; height: 18px; }
.tile-link > span:not(.tile) { display: block; min-width: 0; }
.tile-link .t { display: block; font-weight: 800; font-size: 15px; line-height: 20px; }
.tile-link .s { display: block; color: var(--ink-soft); font-size: 13px; line-height: 18px; margin-top: 1px; }
.tile-link .ext { margin-left: auto; width: 14px; height: 14px; color: var(--ink-soft); flex: 0 0 14px; }

/* --------------------------------------------------------------------------
   9. Mobile drawer + responsive
   -------------------------------------------------------------------------- */
.scrim {
  position: fixed; inset: 0; z-index: 35;
  background: rgba(22, 55, 79, .5);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
body.nav-open .scrim { opacity: 1; visibility: visible; }

@media (max-width: 1240px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .glance { flex-basis: 100%; }
}

@media (max-width: 940px) {
  :root { --gap: 16px; }

  .hamburger { display: grid; }
  .icon-btn.drawer-close { display: grid; }
  /* A touch wider as a drawer so the wordmark and the close button
     both fit on one line without colliding. */
  .sidebar { width: 288px; flex-basis: 288px; }
  .brand { padding-right: 62px; }
  .wordmark { font-size: 18px; }

  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    transform: translateX(-100%);
    transition: transform .24s cubic-bezier(.2, .7, .2, 1);
    box-shadow: var(--shadow-lg);
    height: 100dvh;
  }
  body.nav-open .sidebar { transform: translateX(0); }

  .content { padding: 16px; }
  .header { padding: 10px 16px; gap: 12px; }
  .header-titles .page-title { font-size: 20px; line-height: 26px; }
  .footer { padding: 18px 16px 24px; }
}

@media (max-width: 720px) {
  .hero { padding: 20px; }
  .hero-title { font-size: 21px; line-height: 28px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .header-titles .fine { display: none; }
  .header-titles .page-title { font-size: 19px; line-height: 25px; }
  .event-chip { padding: 5px 10px 5px 6px; font-size: 13px; }
  .event-chip .dot { width: 22px; height: 22px; font-size: 10px; }
  .card-head { flex-wrap: wrap; row-gap: 4px; padding: 14px 16px; }
  .card-head .h-section { flex: 1 1 100%; }
  .card-body { padding: 16px; }
  .notice-row { padding: 14px 16px; gap: 12px; }
}

@media (max-width: 560px) {
  /* Help and Logout also live in the drawer — drop the duplicates */
  .header-actions .icon-btn:not(.hamburger) { display: none; }
  .header-help .label-hide { display: none; }
  .header-help { padding: 8px 10px; }

  /* The event chip shrinks to just its initials so the page title keeps its
     room. Long titles then wrap to a second line rather than sliding under
     the chip. They used to ellipsis here, which clipped "Critique Upload &
     Sync" and "Send Missing Critiques" on a phone. The clamp stops a very
     long title pushing the header open indefinitely. */
  .event-chip { padding: 4px; gap: 0; }
  .event-chip > span:not(.dot),
  .event-chip > .ic { display: none; }
  .header-titles { flex: 1 1 auto; min-width: 0; }
  .header-titles .page-title {
    white-space: normal;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (max-width: 420px) {
  .glance { grid-template-columns: minmax(0, 1fr); }
  .support-row .qr { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   11. Form controls  (shared — used by every data-entry page in the portal)
   -------------------------------------------------------------------------- */
.field { display: block; }
.field + .field { margin-top: 18px; }
.field-label {
  display: block;
  font-weight: 800; font-size: 14px; line-height: 20px;
  color: var(--navy); margin-bottom: 6px;
}
.select, .input {
  display: block; width: 100%;
  font-family: inherit; font-weight: 300; font-size: 15px; line-height: 22px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-strong, #D8DDE8);
  border-radius: 9px;
  padding: 11px 13px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.select {
  font-weight: 800; color: var(--navy);
  padding-right: 40px;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C4364' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 17px 17px;
}
.select:hover { border-color: var(--navy-soft); }
.select:focus-visible, .input:focus-visible {
  border-color: var(--mid-blue);
  box-shadow: 0 0 0 3px rgba(0, 127, 182, .22);
  outline: none;
}
.input::placeholder { color: var(--ink-soft); }
.field .fine { margin-top: 6px; }

/* --------------------------------------------------------------------------
   12. Download Competition Data page
   -------------------------------------------------------------------------- */
.picker { border-color: var(--navy-soft); }
.picker .lead { max-width: 62ch; margin-bottom: 20px; }
.picker-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
}
.picker-row .field { flex: 1 1 340px; max-width: 460px; }
.picker-row .btn { flex: 0 0 auto; }

.section-lead { margin: 30px 0 12px; }

.sets {
  display: grid; gap: var(--gap, 20px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.set { display: flex; flex-direction: column; overflow: hidden; }
.set-head {
  display: flex; align-items: center; gap: 13px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.set-head .tile {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; color: #fff;
}
.set-head .tile .ic { width: 20px; height: 20px; }
.set-head .h-card { margin: 0; }
.set-head .fine { margin: 1px 0 0; }
.tint-blue   { background: var(--tint-blue,   #DFEEFA); }
.tint-purple { background: var(--tint-purple, #F1E5F0); }
.set .card-body > p:first-child { margin-top: 0; }
.set .card-body > .btn { margin-top: 18px; }

.daylist { list-style: none; margin: 18px 0 12px; padding: 0; }
.day {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.day:last-child { border-bottom: 1px solid var(--line); }
.day-when { display: flex; flex-direction: column; min-width: 0; }
.day-when b { font-weight: 800; font-size: 15px; line-height: 21px; color: var(--navy); }
.day-when .fine { margin: 0; }
.day .btn { flex: 0 0 auto; }

.steps-inline {
  margin: 16px 0 0;
  padding: 14px 16px;
  background: var(--page);
  border-radius: 11px;
}
.steps-inline p { margin: 0; }
.steps-inline p + p { margin-top: 6px; }
.steps-inline b { color: var(--navy); }

.run-status[hidden] { display: none; }
.run-status {
  display: flex; align-items: center; gap: 9px;
  margin-top: 12px; color: var(--ink-purple);
  font-size: 14px; line-height: 20px;
}
.spinner {
  flex: 0 0 15px; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--tint-purple, #F1E5F0);
  border-top-color: var(--purple);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.run-grid {
  display: grid; gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.run-col > .eyebrow { margin: 0 0 6px; }
.run-col > .h-card { margin: 0 0 8px; }
.run-col > p { margin: 0 0 16px; }
.run-col > .btn { margin-bottom: 8px; }
.run-col > .fine { margin: 0; }
.run-grid .run-col + .run-col {
  padding-left: 24px;
  border-left: 1px solid var(--line);
}

.share[hidden] { display: none; }
.share {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.share > .eyebrow { color: var(--ink-green); margin: 0 0 10px; }
.share-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.share .fine { margin: 10px 0 0; }

/* --- Dialog --- */
.dialog {
  width: min(520px, calc(100vw - 32px));
  padding: 0; border: 1px solid var(--line);
  border-radius: 14px; background: var(--white);
  box-shadow: 0 24px 60px rgba(22, 55, 79, .28);
  color: var(--ink);
}
.dialog::backdrop { background: rgba(22, 55, 79, .5); }
.dialog-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--line);
}
.dialog-head .h-card { margin: 0; }
.dialog-body { padding: 20px; }
.dialog-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 20px; border-top: 1px solid var(--line);
  background: var(--page);
  border-radius: 0 0 13px 13px;
}

/* --- Locked state: nothing is actionable until a region is chosen --- */
.is-locked { opacity: .5; }
.is-locked .btn, .is-locked a, .is-locked button,
.is-locked input, .is-locked select, .is-locked textarea { pointer-events: none; }

@media (max-width: 1100px) {
  .sets, .run-grid { grid-template-columns: minmax(0, 1fr); }
  .run-grid .run-col + .run-col {
    padding-left: 0; padding-top: 24px;
    border-left: 0; border-top: 1px solid var(--line);
  }
}
@media (max-width: 560px) {
  .picker-row .field { flex: 1 1 100%; max-width: none; }
  .picker-row .btn { width: 100%; justify-content: center; }
  .day { flex-wrap: wrap; }
  .day .btn { width: 100%; justify-content: center; }
  .share-btns .btn { width: 100%; justify-content: center; }
  .dialog-foot { flex-direction: column-reverse; }
  .dialog-foot .btn { width: 100%; justify-content: center; }
}

/* --- Additions used by the form pages --- */
:root { --line-strong: #d8dde8; }
.lead-p { font-size: 16px; line-height: 24px; }
.notice-flex { display: flex; gap: 12px; align-items: flex-start; }
.notice-flex > .ic { flex: 0 0 19px; width: 19px; height: 19px; margin-top: 1px; color: var(--ink-amber); }

/* --------------------------------------------------------------------------
   13. Change Lockout Date page
   -------------------------------------------------------------------------- */
.lock-grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.lock-grid .set .card-body { flex: 1 1 auto; }
.tint-amber { background: var(--tint-amber); }

.bigdate {
  margin: 0; font-weight: 800; font-size: 25px; line-height: 32px;
  color: var(--navy); letter-spacing: -.3px;
}
.bigdate-sub {
  margin: 3px 0 0; font-weight: 800; font-size: 13px; line-height: 19px;
  color: var(--ink-amber);
}
.picker .select { padding-right: 42px; text-overflow: ellipsis; }
.meter-row { margin-top: 20px; }
.meter-row .fine { margin-top: 7px; }

.shift-label { margin: 20px 0 8px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip {
  font-family: inherit; font-weight: 800; font-size: 14px; line-height: 20px;
  color: var(--navy); background: var(--white);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  padding: 7px 15px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.chip:hover { background: var(--tint-blue); border-color: var(--mid-blue); }
.chip:focus-visible {
  outline: none; border-color: var(--mid-blue);
  box-shadow: 0 0 0 3px rgba(0, 127, 182, .22);
}

/* --- Before / after summary in the dialog --- */
.dlg-region { margin: 0 0 14px; font-weight: 800; color: var(--navy); }
.ba {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; border-radius: var(--r-sm); background: var(--page);
}
.ba-col { flex: 1 1 0; min-width: 0; }
.ba-col .eyebrow { margin: 0 0 4px; }
.ba-date {
  margin: 0; font-weight: 800; font-size: 17px; line-height: 24px;
  color: var(--ink-soft);
}
.ba-date.to { color: var(--navy); }
.ba-arrow { flex: 0 0 auto; color: var(--ink-soft); display: grid; place-items: center; }
.ba-arrow .ic { width: 20px; height: 20px; }
.ba-note {
  margin: 12px 0 0; font-size: 14px; line-height: 21px; color: var(--ink-soft);
}
.ba-note.warn { color: var(--ink-amber); font-weight: 800; }

/* --- Toast --- */
.toast[hidden] { display: none; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 60;
  display: flex; align-items: center; gap: 9px;
  padding: 12px 18px; border-radius: var(--r-pill);
  background: var(--navy); color: #fff;
  font-weight: 800; font-size: 15px; line-height: 21px;
  box-shadow: 0 12px 32px rgba(22, 55, 79, .34);
  animation: toast-in .22s ease-out;
}
.toast .ic { width: 18px; height: 18px; color: var(--green); }
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 1100px) {
  .lock-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .chip { flex: 1 1 calc(50% - 4px); text-align: center; }
  .lock-grid .btn { width: 100%; justify-content: center; }
  .bigdate { font-size: 22px; line-height: 29px; }
  .ba { flex-direction: column; align-items: stretch; gap: 10px; }
  .ba-arrow { transform: rotate(90deg); }
  .toast { left: 16px; right: 16px; transform: none; justify-content: center; }
  @keyframes toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* Disabled buttons — used by the confirm dialog when the date is unchanged */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; box-shadow: none;
}

/* --------------------------------------------------------------------------
   14. Touch targets
   On phones every control is brought up to the 44px minimum tap height.
   Applies to every page, so keep new components inside .btn / .icon-btn /
   .chip rather than styling bare buttons.
   -------------------------------------------------------------------------- */
@media (max-width: 940px) {
  /* Drawer navigation — the rows were 37px */
  .nav-item { padding-top: 11px; padding-bottom: 11px; min-height: 44px; }
  .nav-group { gap: 2px; }
}

@media (max-width: 560px) {
  .btn,
  .btn-sm,
  .btn-quiet,
  .chip,
  .select,
  .input { min-height: 44px; }

  .icon-btn,
  .hamburger { min-width: 44px; min-height: 44px; }

  .header-help { min-width: 44px; min-height: 44px; justify-content: center; }

  /* Collapsed to initials only, so give the hit area its height back */
  .event-chip { min-width: 44px; min-height: 44px; justify-content: center; }

  /* Stacked calls to action read better full-width than ragged */
  .hero-cta .btn,
  .hero-actions .btn,
  .card-body > .btn,
  .notice-row .btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   15. Sign-in page (auth)
   The one page in the portal with no sidebar: there is no session yet, so
   there is no navigation to show. Two panels on desktop, stacked on mobile.
   -------------------------------------------------------------------------- */

/* Error/danger notice variant. The style guide has no error colour — these
   three values are a PROPOSED addition, chosen to sit with the navy, and are
   still awaiting sign-off. */
:root {
  --red: #b4291f;
  --tint-red: #fbeae8;
  --ink-red: #8e2018;
}
.notice.red { background: var(--tint-red); border-color: var(--red); }
.notice.red h4 { color: var(--ink-red); }

/* Per-variant icon colour. The base rule fixes the icon to amber, which is
   wrong on the other four variants. */
.notice.blue   > .ic { color: var(--ink-blue); }
.notice.green  > .ic { color: var(--ink-green); }
.notice.purple > .ic { color: var(--ink-purple); }
.notice.red    > .ic { color: var(--ink-red); }

.auth-body { background: var(--navy-deep); }

.auth {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---- Left: brand panel ---- */
.auth-brand {
  position: relative;
  display: flex; align-items: center;
  padding: 56px clamp(32px, 5vw, 76px);
  color: var(--white);
  background:
    radial-gradient(120% 90% at 88% 6%, rgba(0, 114, 187, .5) 0%, rgba(0, 114, 187, 0) 58%),
    radial-gradient(70% 55% at 0% 104%, rgba(98, 189, 45, .13) 0%, rgba(98, 189, 45, 0) 60%),
    linear-gradient(168deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.auth-brand-inner { width: 100%; max-width: 520px; }

/* .brand carries the sidebar's divider and padding — neither belongs here. */
.auth-logo, .auth-logo-sm { padding: 0; border-bottom: 0; }
.auth-logo { display: inline-flex; margin-bottom: 40px; text-decoration: none; }
.auth-logo .wordmark { font-size: 24px; }
.auth-logo .brand-sub { margin-top: 6px; }

.auth-hero {
  font-size: 31px; line-height: 38px; letter-spacing: -.5px;
  color: var(--white); margin: 0 0 12px;
}
.auth-hero-note {
  font-size: 15px; line-height: 23px; font-weight: 300;
  color: var(--navy-soft); margin: 0 0 34px; max-width: 44ch;
}

.auth-points { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 18px; }
.auth-points li { display: flex; gap: 14px; align-items: flex-start; }
.auth-points .ic {
  flex: 0 0 34px; width: 34px; height: 34px; padding: 8px;
  border-radius: 10px; color: var(--white);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
}
.auth-points b { display: block; font-size: 15px; line-height: 22px; color: var(--white); }
.auth-points span {
  display: block; margin-top: 2px; font-size: 14px; line-height: 21px;
  font-weight: 300; color: var(--navy-soft);
}

.auth-help {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin: 0; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 14px; line-height: 22px; color: var(--navy-soft);
}
.auth-help .ic { width: 16px; height: 16px; color: var(--navy-soft); }
.auth-help a { color: var(--white); font-weight: 800; text-decoration: none; }
.auth-help a:hover { text-decoration: underline; }

/* ---- Right: form panel ---- */
.auth-panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; padding: 48px clamp(20px, 4vw, 56px);
  background: var(--page);
}
.auth-card {
  width: 100%; max-width: 424px;
  padding: 34px 32px 30px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(22, 55, 79, .1);
}

/* Wordmark repeated inside the card, for phones where the brand panel
   collapses to a thin strip. Hidden on desktop — the panel already has it. */
.auth-logo-sm { display: none; margin-bottom: 22px; text-decoration: none; }
.auth-logo-sm .wordmark { font-size: 19px; color: var(--navy); }
.auth-logo-sm .wordmark span { color: var(--brand-blue); }

.auth-card > .eyebrow { color: var(--brand-blue); margin-bottom: 8px; }
.auth-title { font-size: 25px; line-height: 32px; margin: 0 0 6px; color: var(--navy); }
.auth-sub { margin: 0 0 22px; font-size: 15px; line-height: 23px; color: var(--ink-soft); }

.auth-notice { margin-bottom: 20px; }
.auth-notice[hidden], .notice[hidden] { display: none; }
.auth-notice p { font-size: 14px; line-height: 21px; color: var(--ink); }

.auth-form { display: block; }

.label-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.link-btn {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 800; color: var(--brand-blue);
}
.link-btn:hover { text-decoration: underline; }
.link-btn:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 3px; border-radius: 4px; }

/* Password field with a reveal button sitting inside it */
.input-wrap { position: relative; }
.input-wrap .input { padding-right: 50px; }
.reveal {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: 9px; background: none; cursor: pointer;
  color: var(--ink-soft);
}
.reveal:hover { background: var(--page); color: var(--navy); }
.reveal:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.reveal .ic { width: 19px; height: 19px; }

.check {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 20px; cursor: pointer;
  font-size: 15px; line-height: 22px; color: var(--ink);
}
.check input {
  flex: 0 0 18px; width: 18px; height: 18px; margin: 2px 0 0;
  accent-color: var(--brand-blue); cursor: pointer;
}
.check-note { margin: 6px 0 0 28px; }

.auth-submit { width: 100%; justify-content: center; margin-top: 22px; min-height: 48px; }

.auth-foot {
  display: flex; gap: 9px; align-items: flex-start;
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
}
.auth-foot .ic { flex: 0 0 16px; width: 16px; height: 16px; color: var(--ink-soft); margin-top: 1px; }

.auth-legal { width: 100%; max-width: 424px; margin: 0; text-align: center; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .auth { grid-template-columns: 1fr; min-height: 0; }
  .auth-brand { padding: 40px clamp(20px, 5vw, 48px); }
  .auth-brand-inner { max-width: 620px; margin: 0 auto; }
  .auth-logo { margin-bottom: 28px; }
  .auth-panel { padding: 36px clamp(20px, 5vw, 48px) 44px; }
}

/* Below the tablet breakpoint the brand panel is a compact strip: the
   reassurance list and support line move out of the way so the form is the
   first thing on screen. The wordmark inside the card takes over. */
@media (max-width: 720px) {
  .auth-brand { display: none; }
  .auth-logo-sm { display: inline-flex; }
  .auth-panel { justify-content: flex-start; padding-top: 28px; }
  .auth-card { padding: 26px 22px 24px; border-radius: 16px; }
  .auth-hero { font-size: 25px; line-height: 32px; }
}

/* Touch sizing. This page is the one most likely opened on a tablet at the
   venue, so the comfortable hit areas start at the tablet breakpoint, not at
   phone width. */
@media (max-width: 940px) {
  .reveal { min-width: 44px; min-height: 44px; width: 44px; height: 44px; }
  .check { min-height: 44px; align-items: center; }
  .check input { flex-basis: 22px; width: 22px; height: 22px; }
  .check-note { margin-left: 32px; }
  .link-btn { min-height: 44px; display: inline-flex; align-items: center; }
  .label-row { align-items: center; }
  .auth-help a { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 560px) {
  .auth-panel { padding-left: 14px; padding-right: 14px; }
  .auth-card { padding: 24px 18px 22px; }
  .auth-title { font-size: 23px; line-height: 30px; }
}

/* --------------------------------------------------------------------------
   16. Detailed Report — region selection page
   -------------------------------------------------------------------------- */

/* Read-only fields are still fields, but they must not read as editable. */
.input[readonly] {
  background: var(--page);
  color: var(--navy); font-weight: 800;
  border-color: var(--line);
  cursor: default;
}
.input[readonly]:focus-visible { border-color: var(--line-strong); box-shadow: none; }

/* Echo of the chosen region, above the primary action. */
.chosen[hidden] { display: none; }
.chosen {
  padding: 14px 16px; margin-bottom: 20px;
  background: var(--page); border-radius: 11px;
  border-left: 4px solid var(--mid-blue);
}
.chosen > .eyebrow { margin: 0 0 3px; color: var(--ink-blue); }
.chosen-name {
  margin: 0; font-weight: 800; font-size: 17px; line-height: 24px;
  color: var(--navy); overflow-wrap: anywhere;
}

/* Standing prompt shown in place of the echo while no region is chosen. */
.await[hidden] { display: none; }
.await {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 16px; margin-bottom: 20px;
  background: var(--page); border-radius: 11px;
}
.await > .ic { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; color: var(--ink-soft); }
.await p { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink-soft); }

.open-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#open-card .card-body > .fine { margin: 14px 0 0; }

/* Feature list — two columns of icon + copy, no card chrome. */
.feats {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; gap: 22px 30px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.feat { display: flex; align-items: flex-start; gap: 13px; }
.feat-ic {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--tint-blue); color: var(--brand-blue);
}
.feat-ic .ic { width: 18px; height: 18px; }
.feat .h-card { margin: 0 0 3px; }
.feat .fine { margin: 0; }
/* The card head already supplies the top rule and spacing — the intro
   paragraph does not need its own inherited top margin as well. */
.card-body > .lead-p:first-child { margin-top: 0; }

@media (max-width: 940px) {
  /* Touch sizing — this page is routinely opened on a tablet backstage. */
  .picker .select, .picker .input { min-height: 46px; }
  .open-row .btn { min-height: 46px; }
}
@media (max-width: 720px) {
  .feats { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 560px) {
  .open-row { flex-direction: column; align-items: stretch; }
  .open-row .btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   17. Add New or Late Entry page
   The legacy flow was three pages with a JS-only preview between them. It is
   one page here, so the pieces below are the entry form, the live preview of
   the composed line, and the list of what is already on the chosen day.
   -------------------------------------------------------------------------- */

/* Green head strip, to sit with the existing blue/purple/amber tints. */
.tint-green { background: var(--tint-green, #EAF6E2); }

/* The three fields. Item number and performer pair up on desktop; section
   details takes the full width because it is the longest value typed. */
.entry-grid {
  display: grid; gap: 18px 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.entry-grid .field + .field { margin-top: 0; }
.field-wide { grid-column: 1 / -1; }

/* Item number is a number and a letter that read as one value, so they are
   joined rather than spaced. */
.num-row { display: flex; gap: 8px; align-items: stretch; }
.input.num { flex: 1 1 auto; min-width: 0; }
.select.letter { flex: 0 0 82px; text-align: center; padding-left: 14px; }

/* Live preview of the composed running-order line. Deliberately large — this
   is the thing being checked before it goes into a live program. */
.preview-line[hidden] { display: none; }
.preview-line {
  margin: 0 0 18px; padding: 16px 18px;
  background: var(--page); border-radius: 11px;
  border-left: 4px solid var(--green);
  font-weight: 800; font-size: 19px; line-height: 27px;
  color: var(--navy); overflow-wrap: anywhere;
}
.preview-line span { color: var(--navy); }
#pv-act { color: var(--ink-green); }

/* What is already on the day. A table in the legacy page; stacked rows here so
   it survives 390px without its own scroller. */
.entries[hidden] { display: none; }
.entries { list-style: none; margin: 0; padding: 0; }
.entry {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.entry:last-child { border-bottom: 1px solid var(--line); }
.entry-act {
  flex: 0 0 58px;
  font-weight: 800; font-size: 15px; line-height: 21px;
  color: var(--navy); text-align: center;
  background: var(--page); border-radius: 8px; padding: 6px 4px;
}
.entry-main { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.entry-main b { font-weight: 800; font-size: 15px; line-height: 21px; color: var(--navy); overflow-wrap: anywhere; }
.entry-main .fine { margin: 1px 0 0; }
.entry .btn { flex: 0 0 auto; }

/* Scheduled breaks stay in the list so the running order still reads in order,
   but they are not entries and cannot be removed from here. */
.entry.is-break .entry-act { background: var(--tint-amber); color: var(--ink-amber); }
.entry.is-break .entry-main b { color: var(--ink-amber); }

/* A row that has just been added, so the eye can find it in a long day. */
.entry.is-new { animation: entry-in .5s ease-out; }
@keyframes entry-in {
  from { background: var(--tint-green, #EAF6E2); }
  to   { background: transparent; }
}

.entries-empty[hidden] { display: none; }
.entries-empty {
  margin: 0; padding: 16px;
  background: var(--page); border-radius: 11px;
  font-size: 14px; line-height: 21px; color: var(--ink-soft);
}
#list-card .card-head .pill { margin-left: auto; }
#list-note { margin: 14px 0 0; }

@media (max-width: 1100px) {
  .entry-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  /* Row wraps to two lines: number + name, then the button full width. */
  .entry { flex-wrap: wrap; }
  .entry .btn { width: 100%; justify-content: center; margin-top: 4px; }
  .preview-line { font-size: 17px; line-height: 25px; }
  .select.letter { flex: 0 0 74px; }
}

@media (prefers-reduced-motion: reduce) {
  .entry.is-new { animation: none; }
}

/* ==========================================================================
   18. CRITIQUE UPLOAD & SYNC  (upSync.php)
   ========================================================================== */

/* Visually hidden — used for the real file input behind its own label. */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- folder chooser ------------------------------------------------------ */
.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px 22px 26px;
  margin: 18px 0 0;
  text-align: center;
  background: var(--page);
  border: 1.5px dashed var(--line-strong);
  border-radius: 14px;
}
.drop.is-over { border-color: var(--green); background: var(--tint-green); }
.drop .drop-ic { width: 34px; height: 34px; color: var(--navy-soft); }
.drop .drop-h {
  margin: 0;
  font-size: 16px; line-height: 22px;
  font-weight: 800;
  color: var(--navy);
}
.drop .fine { max-width: 46ch; margin: 0; }
.drop .btn { margin-top: 6px; }
.drop input:focus-visible + .btn,
.drop .btn:focus-within { outline: 2px solid var(--brand-blue); outline-offset: 2px; }

/* --- the count line ----------------------------------------------------- */
.sum {
  /* Plain block, not flex — as a flex row the bold count became its own
     item and the sentence broke after it on narrow screens. */
  display: block;
  margin: 16px 0 0;
  padding: 12px 14px;
  font-size: 15px; line-height: 23px;
  color: var(--ink);
  background: var(--tint-blue);
  border-radius: 11px;
}
.sum[hidden] { display: none; }
.sum b { font-weight: 800; color: var(--navy); }

/* --- per-file rows ------------------------------------------------------ */
.filelist {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.filelist[hidden] { display: none; }
.frow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}
.frow:last-child { border-bottom: 0; }
.frow-main { flex: 1 1 auto; min-width: 0; }
.frow-name {
  margin: 0;
  font-size: 15px; line-height: 21px;
  color: var(--navy);
  overflow-wrap: anywhere;
}
.frow-meta { margin: 2px 0 0; font-size: 12px; line-height: 18px; color: var(--ink-soft); }
.frow-state {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px; line-height: 18px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--ink-soft);
}
.frow-state .ic { width: 15px; height: 15px; }

.frow.is-queued { background: #fff; }
.frow.is-going { background: var(--tint-blue); }
.frow.is-going .frow-state { color: var(--ink-blue); }
.frow.is-done .frow-state { color: var(--ink-green); }
.frow.is-skip { background: var(--page); }
.frow.is-skip .frow-name { color: var(--ink-soft); }
.frow.is-bad { background: var(--tint-red); }
.frow.is-bad .frow-name,
.frow.is-bad .frow-state { color: var(--ink-red); }

/* the thin per-file progress line */
.bar {
  position: relative;
  height: 4px;
  margin-top: 7px;
  background: var(--line-strong);
  border-radius: 2px;
  overflow: hidden;
}
.bar i {
  position: absolute;
  inset: 0 100% 0 0;
  display: block;
  background: var(--mid-blue);
  border-radius: 2px;
  transition: right .18s linear;
}

/* While the queue is running the button is blocked, but fading it to .45
   makes white-on-green unreadable — hold full colour and show progress. */
.btn.is-busy:disabled { opacity: 1; cursor: progress; }

/* --- confirmation contact form ----------------------------------------- */
.ep-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  margin-top: 16px;
}
.ep-form .field { flex: 1 1 220px; min-width: 0; margin: 0; }
.ep-form .btn { flex: 0 0 auto; }

@media (max-width: 560px) {
  .drop { padding: 24px 16px 22px; }
  .drop .btn { width: 100%; justify-content: center; }
  .ep-form { gap: 12px; }
  .ep-form .field { flex: 1 1 100%; }
  .ep-form .btn { width: 100%; justify-content: center; }
  .frow { flex-wrap: wrap; gap: 6px 10px; }
  .frow-main { flex: 1 1 100%; }
  .filelist { max-height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .bar i { transition: none; }
}

/* [hidden] must beat the flex display on these three, or a hidden button and
   a hidden notice both stay on screen. */
.btn[hidden],
.notice[hidden],
.fine[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   19. CRITIQUE REPORT  (CritiquesSyncCheck.php)
   A read-only report: three totals, a search box, and one table. The legacy
   page printed no total at all and its DataTables search never initialised,
   so both are new here.
   -------------------------------------------------------------------------- */

/* --- the three totals ---------------------------------------------------- */
.tallies {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 20px;
}
.tally {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--page);
  padding: 14px 16px;
}
.tally-n {
  margin: 0;
  font-weight: 800;
  font-size: 25px;
  line-height: 32px;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.tally-l {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--ink-soft);
}
.tally.ok  { background: var(--tint-green); border-color: #cfe6bd; }
.tally.ok  .tally-n { color: var(--ink-green); }
.tally.bad { background: var(--tint-amber); border-color: #f0d8a8; }
.tally.bad .tally-n { color: var(--ink-amber); }
/* When nothing needs attention the amber box would read as a warning, so it
   drops back to the neutral surface. */
.tally.bad.is-clear { background: var(--page); border-color: var(--line); }
.tally.bad.is-clear .tally-n { color: var(--ink-soft); }

/* --- search + filter ----------------------------------------------------- */
.tbl-tools {
  display: flex;
  align-items: center;
  gap: 12px 20px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.tbl-tools .srch { flex: 1 1 280px; margin: 0; }
.tbl-tools .srch .input { width: 100%; }

.chk {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  line-height: 23px;
  color: var(--ink);
  cursor: pointer;
  min-height: 44px;
}
.chk input {
  width: 18px; height: 18px;
  accent-color: var(--brand-blue);
  flex: none;
  cursor: pointer;
}

.tbl-count { margin: 0 0 10px; }

/* --- the table ----------------------------------------------------------- */
/* Its own scroll container, so a wide report never scrolls the page. */
.tbl-wrap {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: auto;
  max-height: 620px;
}
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 23px;
}
.tbl thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eef2f7;
  color: var(--navy);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.tbl td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  color: var(--ink);
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:nth-child(even) { background: #fbfcfe; }
.tbl .c-act,
.tbl .c-size { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .c-act { width: 68px; font-weight: 800; color: var(--navy); }
.tbl .t-name { font-weight: 800; color: var(--navy); }
.tbl .t-file {
  display: block;
  font-size: 12px;
  line-height: 18px;
  color: var(--ink-soft);
  word-break: break-word;
}
/* A row that needs attention is tinted and carries its own action button. */
.tbl tr.is-bad,
.tbl tbody tr.is-bad:nth-child(even) { background: var(--tint-amber); }
.tbl tr.is-bad td { border-bottom-color: #f0d8a8; }
.tbl .c-do { width: 1%; }
.tbl .t-act { white-space: nowrap; text-align: right; }
/* Make the scroll affordance visible — an overlay scrollbar leaves a clipped
   row looking like a rendering fault rather than a list you can scroll. */
.tbl-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.tbl-wrap::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 6px;
  border: 2px solid #fff;
}
.tbl-wrap::-webkit-scrollbar-track { background: #fff; border-radius: 6px; }
.tbl-wrap { scrollbar-width: thin; scrollbar-color: var(--line-strong) #fff; }
.tbl .t-act .btn { padding: 7px 12px; font-size: 14px; }

/* The empty result of a search that matches nothing. */
.tbl-none { margin: 0; padding: 26px 14px; text-align: center; color: var(--ink-soft); }

/* Between the sidebar collapsing and the desktop grid there is not enough
   width for six columns, so the table scrolls inside its own wrapper rather
   than crushing the performer names. */
/* Below 1100px the table becomes stacked cards, so this floor only applies
   to the narrow-desktop band where the sidebar is still pinned open. */
.tbl { min-width: 840px; }

@media (max-width: 1240px) {
  .tbl-tools .srch { flex: 1 1 100%; }
}

/* --- narrow screens: the table becomes stacked rows ---------------------- */
@media (max-width: 1100px) {
  .tallies { grid-template-columns: 1fr; gap: 8px; }
  .tally { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; }
  .tally-n { font-size: 19px; line-height: 26px; }
  .tally-l { margin: 0; }

  .tbl-wrap { max-height: none; overflow: visible; border: 0; border-radius: 0; }
  .tbl { min-width: 0; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl thead { display: none; }
  /* One compact card per critique. A label above every cell made each row
     nearly 400px tall, which is unusable at 109 rows, so the act number,
     name, section and size share three tight lines instead. */
  .tbl tbody tr,
  .tbl tbody tr:nth-child(even) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "act  name name"
      "sec  sec  size"
      "st   st   st"
      "do   do   do";
    column-gap: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 12px 14px;
    margin: 0 0 8px;
    width: auto;
  }
  .tbl tbody tr.is-bad { background: var(--tint-amber); border-color: #f0d8a8; }
  .tbl td { border: 0; padding: 0; }
  .tbl td::before { content: none; }

  .tbl .c-act {
    grid-area: act;
    align-self: baseline;
    font-size: 19px;
    line-height: 26px;
    width: auto;
  }
  .tbl .c-act::before {
    content: "Act";
    display: block;
    font-weight: 800;
    font-size: 11px;
    line-height: 14px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .tbl td:nth-child(2) { grid-area: name; align-self: baseline; }
  .tbl td:nth-child(4) {
    grid-area: sec;
    margin-top: 8px;
    font-size: 13px;
    line-height: 20px;
    color: var(--ink-soft);
  }
  .tbl .c-size {
    grid-area: size;
    margin-top: 8px;
    text-align: right;
    font-size: 13px;
    line-height: 20px;
    color: var(--ink-soft);
  }
  .tbl td:nth-child(3) { grid-area: st; margin-top: 10px; }
  .tbl .t-act { grid-area: do; margin-top: 12px; text-align: left; }
  .tbl .t-act:empty { display: none; }
  .tbl .t-act .btn { width: 100%; justify-content: center; }
  /* The "nothing matched" row is a single cell and must not be gridded. */
  .tbl tbody tr.tbl-none-row { display: block; }
}

@media (max-width: 560px) {
  .tbl-tools .srch { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   20. SOFTWARE DOWNLOAD  (software.php)
   The legacy page was two columns of bare "- link" anchors with no versions
   and no explanation. One card per program instead.
   -------------------------------------------------------------------------- */

.sw-warn {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 22px;
}
/* The shared .notice is a plain block with no icon slot, so the icon is sized
   here rather than by changing .notice for every other page. */
.sw-warn > .ic {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--ink-amber);
}
.sw-warn > div { min-width: 0; }
.sw-warn-2 { margin-top: 6px !important; }
.sw-warn .link {
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.sw-warn .link .ic { width: 13px; height: 13px; }

/* --- the two platform columns ------------------------------------------- */

.sw-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 26px;
}
.plat { display: grid; align-content: start; gap: 14px; }

.plat-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 2px;
}
.plat-ic {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: #fff;
}
.plat-ic .ic { width: 22px; height: 22px; }
.plat-head .h-section { margin-bottom: 1px; }

/* --- one program ---------------------------------------------------------- */

.app {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px 16px;
}
.app-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}
.app-top .h-card { margin: 0; }
.app-desc {
  margin: 0 0 15px;
  font-size: 14px;
  line-height: 22px;
  color: var(--ink-soft);
}
.app-acts { display: flex; flex-wrap: wrap; gap: 10px; }
/* Tap targets on this page stay at or above 44px. The legacy page had 12 of
   its 21 links under that, most of them bare one-line anchors. */
.app-acts .btn,
.dl-list .btn { min-height: 44px; }

.app-links {
  list-style: none;
  margin: 15px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 4px;
}
.app-links a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 4px 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 800;
  color: var(--brand-blue);
}
.app-links a:hover { color: #005e9c; text-decoration: underline; }
.app-links .ic { flex: none; width: 16px; height: 16px; color: var(--ink-soft); }
.app-links a:hover .ic { color: var(--brand-blue); }
.app-links .fine { display: inline; font-weight: 300; }

/* --- test files list ----------------------------------------------------- */

.dl-list { list-style: none; margin: 0; padding: 0; display: grid; }
.dl-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.dl-list li:first-child { padding-top: 0; }
.dl-list li:last-child { padding-bottom: 0; border-bottom: 0; }
.dl-txt { min-width: 0; flex: 1 1 auto; }
.dl-txt h4 { font-size: 15px; line-height: 21px; margin: 0 0 2px; }
.dl-txt .fine { margin: 0; }
.dl-list .btn { flex: none; }

/* --- guides and reference tiles ------------------------------------------ */

.ref-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.ref {
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 17px 18px 18px;
  color: inherit;
  transition: border-color .16s ease, transform .16s ease;
}
.ref:hover {
  border-color: var(--navy-soft);
  text-decoration: none;
  transform: translateY(-2px);
}
.ref-ic {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}
.ref-ic .ic { width: 19px; height: 19px; }
.ref-ic.tint-blue   { background: var(--tint-blue);   color: var(--ink-blue); }
.ref-ic.tint-purple { background: var(--tint-purple); color: var(--ink-purple); }
.ref-ic.tint-green  { background: var(--tint-green);  color: var(--ink-green); }
.ref-ic.tint-amber  { background: var(--tint-amber);  color: var(--ink-amber); }
.ref h4 {
  font-size: 15px;
  line-height: 21px;
  margin: 0 0 4px;
  color: var(--navy);
}
.ref .fine { margin: 0; }

.sw-foot { margin-top: 22px; }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 1240px) {
  .ref-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .sw-grid { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 560px) {
  .ref-grid { grid-template-columns: 1fr; }
  .sw-warn .link { white-space: normal; }
  .dl-list li { flex-direction: column; align-items: stretch; gap: 11px; }
  .dl-list .btn { width: 100%; justify-content: center; }
  .app-acts .btn { width: 100%; justify-content: center; }
  .app { padding: 16px 16px 14px; }
}

/* --------------------------------------------------------------------------
   21. SMS CREDIT  (sms_credit.php)
   Kept structurally identical to the legacy page at the user's request —
   balance, sent-message history, deposit history, deposit modal — with only
   the theme applied. The two tables use a simple stacked-row component rather
   than .tbl, which is tuned for the 6-column critique report.
   -------------------------------------------------------------------------- */

.sms-alert { margin-bottom: 20px; }
.sms-alert[hidden] { display: none; }

/* --- the balance panel ---------------------------------------------------- */

.bal-body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.bal-main { min-width: 0; }
.bal-main .fine { margin: 6px 0 0; }
.bal-n {
  font-size: 40px;
  line-height: 46px;
  font-weight: 800;
  color: var(--navy);
  margin: 2px 0 0;
  font-variant-numeric: tabular-nums;
}
.bal-act { display: grid; justify-items: start; gap: 7px; }
.bal-act .btn { min-height: 44px; }
.bal-act .fine { margin: 0; }

/* --- a plain 4-column table ---------------------------------------------- */

.stbl-wrap { overflow-x: auto; }
.stbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 20px;
}
.stbl thead th {
  text-align: left;
  padding: 0 14px 10px;
  border-bottom: 1px solid var(--line-strong);
  font-size: 11px;
  line-height: 15px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.stbl td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
}
.stbl tbody tr:last-child td { border-bottom: 0; }
.stbl .c-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stbl .t-name { font-weight: 800; color: var(--navy); }
.stbl .t-txn {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--ink-soft);
  word-break: break-all;
}
.stbl-none {
  margin: 0;
  padding: 22px 0;
  text-align: center;
  color: var(--ink-soft);
}
.stbl-none-row td { border-bottom: 0; }
.stbl-key { margin: 16px 0 0; }
.stbl-key .pill { vertical-align: baseline; }

/* --- the amount field ----------------------------------------------------- */

.amt { position: relative; }
.amt-in { padding-left: 32px; padding-right: 56px; }
/* The number spinner sits under the AUD suffix, so it is removed. The chips
   and the keyboard both still work, and inputmode="numeric" keeps the phone
   keypad numeric. */
.amt-in::-webkit-outer-spin-button,
.amt-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.amt-in { -moz-appearance: textfield; appearance: textfield; }
.amt-cur,
.amt-aud {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1;
  pointer-events: none;
}
.amt-cur { left: 15px; font-weight: 800; color: var(--navy); }
.amt-aud { right: 15px; font-size: 12px; letter-spacing: .6px; }
.amt-quick { margin: 14px 0 0; }
.amt-quick .chip.is-on {
  background: var(--tint-blue);
  border-color: var(--mid-blue);
  color: var(--ink-blue);
}

.sms-foot { margin-top: 22px; }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 720px) {
  .bal-body { align-items: stretch; }
  .bal-act { justify-items: stretch; }
  .bal-n { font-size: 34px; line-height: 40px; }
}

/* Below 560px the tables restack as one labelled block per row, so nothing
   scrolls sideways. The labels come from data-label on each cell. */
@media (max-width: 560px) {
  .bal-act .btn { width: 100%; justify-content: center; }

  .stbl-wrap { overflow-x: visible; }
  .stbl, .stbl tbody, .stbl tr, .stbl td { display: block; width: 100%; }
  .stbl thead { display: none; }
  .stbl tbody tr {
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 4px 0;
    margin-bottom: 10px;
  }
  .stbl tbody tr:last-child { margin-bottom: 0; }
  .stbl td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 14px;
    border-bottom: 0;
    text-align: right;
  }
  .stbl td::before {
    content: attr(data-label);
    flex: none;
    font-size: 11px;
    line-height: 15px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-align: left;
  }
  .stbl .c-num { text-align: right; }
  .stbl tbody tr.stbl-none-row {
    display: block;
    border: 0;
    padding: 0;
    margin: 0;
  }
  .stbl-none-row td { display: block; text-align: center; padding: 0; }
  .stbl-none-row td::before { content: none; }
}
.fine.is-bad { color: var(--ink-red); font-weight: 800; }

/* ==========================================================================
   22. SEND MISSING CRITIQUES  (AddCritiqueManual.php)
   Adds three things: a searchable performer list box, a destination-path
   preview, and a small footnote. Everything else on the page reuses the
   existing picker / set / await / drop / filelist / notice components.
   ========================================================================== */

.pf[hidden] { display: none; }
.pf { display: grid; gap: 20px; margin-bottom: 20px; }

/* Search box with the icon on the LEFT. The shared .input-wrap pads the right
   for a trailing icon, so that padding is undone here. */
.pf-search .input { padding-left: 42px; padding-right: 14px; }
.pf-search > .ic {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--ink-soft); pointer-events: none;
}

/* A sized list box rather than a dropdown: the performer count runs to the
   hundreds and a size="8" select is scannable and keyboard-navigable without
   a third-party widget. */
.pf-list {
  height: auto; min-height: 210px; padding: 6px;
  background-image: none; /* kills the shared .select chevron */
}
.pf-list option {
  padding: 9px 11px; border-radius: 7px;
  font-size: 15px; line-height: 21px; color: var(--ink);
}
.pf-list option:checked {
  background: var(--navy); color: #fff; font-weight: 800;
}
.pf-list option:disabled { color: var(--ink-soft); font-style: italic; }

/* --- destination path -------------------------------------------------- */
.dest[hidden] { display: none; }
.dest {
  margin-top: 18px; padding: 15px 17px;
  background: var(--page); border-radius: 12px;
  border-left: 4px solid var(--purple);
}
.dest > .eyebrow { margin: 0 0 8px; color: var(--ink-purple); }
.dest .fine { margin: 9px 0 0; }
.dest-path {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px;
  margin: 0; font-size: 14px; line-height: 22px; color: var(--ink);
}
/* The separator is drawn rather than typed so it never gets copied into a
   real path by mistake. */
.dest-path span { display: inline-flex; align-items: center; overflow-wrap: anywhere; }
.dest-path span + span::before {
  content: "/"; margin: 0 7px; color: var(--navy-soft); font-weight: 800;
}
.dest-path .dest-file { font-weight: 800; color: var(--navy); }

/* .drop is display:flex, which outranks the [hidden] attribute on its own. */
.drop[hidden] { display: none; }

#acm-file-card .open-row .btn { min-height: 44px; }

.acm-foot { margin: 26px 0 0; max-width: 78ch; }

@media (max-width: 560px) {
  .pf-list { min-height: 240px; }
  /* Slashes wrapping to the start of a line read like a typo, so on a phone
     the path becomes one indented segment per line instead. */
  .dest-path { display: block; font-size: 13px; line-height: 20px; }
  .dest-path span { display: block; }
  .dest-path span + span { padding-left: 12px; }
  .dest-path span + span::before { content: none; }
  .dest-path span + span + span { padding-left: 24px; }
  .dest-path span + span + span + span { padding-left: 36px; }
  .dest-path span + span + span + span + span { padding-left: 48px; }
  #acm-chosen .frow { flex-wrap: wrap; }
  #acm-chosen .frow-state { width: 100%; }
  #acm-chosen .frow-state .btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   23. PROMO POSTERS AND INFO  (competition_downloads.php)
   The legacy page was a bare numbered <ol> of PDF names with 14px Font Awesome
   icon links, plus a floated strip of 8 images captioned "1" to "5". Nothing
   said what any file was for. Three things are added here: a coloured icon
   tile for the card headers, a numbered document row, and a poster tile with
   a real thumbnail. Everything else reuses .card, .dl-list, .stbl and .notice.
   -------------------------------------------------------------------------- */

/* --- coloured icon tile in a card header ---------------------------------- */

.cd-ic {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
}
.cd-ic .ic { width: 20px; height: 20px; }
.cd-ic.tint-blue   { background: var(--tint-blue);   color: var(--ink-blue); }
.cd-ic.tint-purple { background: var(--tint-purple); color: var(--ink-purple); }
.cd-ic.tint-green  { background: var(--tint-green);  color: var(--ink-green); }
.cd-ic.tint-amber  { background: var(--tint-amber);  color: var(--ink-amber); }

/* --- document rows -------------------------------------------------------- */
/* .dl-list itself is the shared list from the Software Download page. Only the
   leading number and the two-button action group are new. */

.dl-list li { align-items: flex-start; }

.dl-num {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--page);
  border: 1px solid var(--line-strong);
  color: var(--navy);
  font-size: 12px;
  line-height: 24px;
  font-weight: 800;
  text-align: center;
}

.dl-txt > .fine { line-height: 20px; }
.dl-meta { margin-top: 5px !important; color: var(--ink-soft); }

.dl-acts {
  flex: none;
  display: flex;
  gap: 9px;
  align-items: center;
}
.dl-acts .btn { min-height: 44px; white-space: nowrap; }

/* --- poster gallery ------------------------------------------------------- */

.pg-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.pg {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.pg-shot {
  display: block;
  background: var(--page);
  border-bottom: 1px solid var(--line);
  line-height: 0;
}
/* Seven of the eight posters are 1.61:1; the microphone hanger card is 1.52:1.
   A fixed ratio with object-fit: contain keeps every tile in a row the same
   height, so the captions and Download buttons line up, and letterboxes the
   odd one out rather than cropping wording off it. */
.pg-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 1748 / 1085;
  height: auto;
  object-fit: contain;
  transition: transform .18s ease;
}
.pg-shot:hover img { transform: scale(1.03); }
.pg-shot:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: -2px; }

.pg-txt { padding: 15px 16px 0; flex: 1 1 auto; }
.pg-txt h4 {
  font-size: 15px;
  line-height: 21px;
  margin: 0 0 4px;
  color: var(--navy);
}
.pg-txt .fine { margin: 0; }

.pg-foot {
  padding: 13px 16px 15px;
  display: grid;
  gap: 11px;
}
.pg-meta { margin: 0 !important; color: var(--ink-soft); }
.pg-foot .btn { min-height: 44px; width: 100%; justify-content: center; }

.pg-note { margin: 18px 0 0 !important; }
.cd-foot { margin-top: 24px; }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 1240px) {
  .pg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 940px) {
  .pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .pg-grid { grid-template-columns: 1fr; gap: 16px; }
  /* .dl-list li already stacks below 560px. The number moves inline with the
     heading instead of sitting in a column of its own. */
  .dl-list li { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 0 12px; }
  .dl-txt { flex: 1 1 0; }
  .dl-acts { flex: 1 1 100%; margin-top: 13px; }
  .dl-acts .btn { flex: 1 1 0; }
}
@media (max-width: 420px) {
  .dl-acts { flex-wrap: wrap; }
  .dl-acts .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   24. HELP AND GETTING STARTED  (help-videos.html)

   Video tiles are facades: a bundled thumbnail plus a play badge. The real
   player is the <dialog id="vp"> at the bottom of the page, and the iframe
   inside it is created on open and destroyed on close.
   ========================================================================== */

/* --- search --------------------------------------------------------------- */
.hv-intro p { margin: 0; }
.hv-intro p + p { margin-top: 4px; }

.hv-search { margin: 0 0 18px; }
.hv-search-label {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px;
}
.hv-search .pf-search { max-width: 460px; }
.hv-count { margin: 8px 0 0; min-height: 18px; }

.hv-empty {
  margin: 0 0 18px; padding: 14px 16px;
  background: var(--white); border: 1px solid var(--line); border-radius: 11px;
}
.hv-empty[hidden] { display: none; }

.linkish {
  border: 0; background: none; padding: 0; font: inherit;
  color: var(--brand-blue); text-decoration: underline; cursor: pointer;
}
.linkish:hover { color: var(--navy); }

/* --- group card header ---------------------------------------------------- */
.card-head-txt { flex: 1 1 auto; min-width: 0; }
.card-head-txt .fine { margin: 3px 0 0; }
.vgroup + .eyebrow.section-lead { margin-top: 26px; }
.vgroup[hidden] { display: none; }
.vgroup-none[hidden] { display: none; }

/* --- the tile grid -------------------------------------------------------- */
.vt-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vt {
  display: flex; flex-direction: column; text-align: left;
  padding: 0; border: 1px solid var(--line); border-radius: 12px;
  background: var(--white); cursor: pointer; overflow: hidden;
  font: inherit; color: inherit;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.vt:hover { border-color: var(--navy-soft); box-shadow: 0 10px 24px rgba(22, 55, 79, .10); transform: translateY(-2px); }
.vt:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 2px; }
.vt[hidden] { display: none; }

.vt-shot {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9; background: #123049;
  border-bottom: 1px solid var(--line);
}
.vt-shot img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}

/* Play badge, centred over the thumbnail. */
.vt-play {
  position: absolute; inset: 0; margin: auto;
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(28, 67, 100, .88);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
  transition: background .16s ease, transform .16s ease;
}
.vt-play svg {
  width: 22px; height: 22px; fill: none;
  stroke: #FFFFFF; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  margin-left: 2px;
}
.vt:hover .vt-play { background: var(--brand-blue); transform: scale(1.06); }

.vt-txt { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1 1 auto; }
.vt-title { font-size: 16px; line-height: 22px; font-weight: 800; color: var(--navy); }
.vt-desc { font-size: 14px; line-height: 21px; font-weight: 300; color: var(--ink); flex: 1 1 auto; }

.vt-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

.vt-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ink-blue); background: var(--tint-blue);
  padding: 4px 9px; border-radius: 20px;
}
.vt-badge .ic { width: 13px; height: 13px; }
.vt-badge-img { color: var(--ink-purple); background: var(--tint-purple); }

.vt-tag {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ink-soft); background: var(--page);
  border: 1px solid var(--line); padding: 3px 9px; border-radius: 20px;
}

/* --- the player ----------------------------------------------------------- */
.vp { width: min(1040px, calc(100vw - 32px)); }
.vp .dialog-head { align-items: flex-start; }
.vp-head-txt { min-width: 0; }
.vp-head-txt .eyebrow { margin: 0 0 3px; color: var(--ink-soft); }
.vp-head-txt .h-card { margin: 0; }

.vp-x {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--white); cursor: pointer;
  color: var(--ink); padding: 0;
}
.vp-x:hover { background: var(--page); color: var(--navy); border-color: var(--line-strong); }
.vp-x:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 2px; }
.vp-x .ic { width: 20px; height: 20px; }

.vp-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #0F2A40; overflow: auto;
}
.vp-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.vp-stage img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* A picture guide is a tall screenshot, not a 16:9 video — let it breathe. */
.vp-stage.is-image { aspect-ratio: auto; max-height: min(70vh, 620px); background: var(--page); }
.vp-stage.is-image img { height: auto; }

.vp-load {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #FFFFFF; font-size: 14px; font-weight: 300; letter-spacing: .3px;
}

.vp-info { padding: 16px 20px; }
.vp-info .fine { margin: 0; }
.vp-hint { margin-top: 6px !important; color: var(--ink-purple); }
.vp-hint[hidden] { display: none; }
/* Nudge that the picture scrolls, without a permanent scrollbar gutter. */
.vp-stage.is-image { box-shadow: inset 0 -14px 18px -12px rgba(22, 55, 79, .35); }

.vp-foot { justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.vp-nav { display: flex; align-items: center; gap: 8px; }
.vp-count { margin: 0; white-space: nowrap; }
.vp-nav .btn .ic { width: 16px; height: 16px; }
/* #i-chev points right in the sprite, so only Previous needs flipping. */
#vp-prev .ic { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .vt, .vt-play { transition: none; }
  .vt:hover { transform: none; }
  .vt:hover .vt-play { transform: none; }
}

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 1240px) {
  .vt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 940px) {
  .vt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 720px) {
  .vt-grid { grid-template-columns: 1fr; }
  .vp .dialog-head { padding: 14px 16px; }
  .vp-info { padding: 14px 16px; }
}
@media (max-width: 560px) {
  .hv-search .pf-search { max-width: none; }
  .vp-foot { flex-direction: column-reverse; align-items: stretch; }
  .vp-foot .btn { width: 100%; justify-content: center; }
  .vp-nav { width: 100%; justify-content: space-between; }
  .vp-nav .btn { flex: 0 0 auto; width: auto; }
  .vp-stage.is-image { max-height: 60vh; }
}
@media (max-width: 420px) {
  .vt-txt { padding: 12px 13px 14px; }
  .vp-nav .btn span[data-label] { display: none; }
  .vp-nav .btn { padding-left: 14px; padding-right: 14px; min-width: 44px; justify-content: center; }
}