/* ==========================================================================
   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; }

  /* The drawer button only exists on touch widths, so it has to meet the
     44px target from the moment it appears — not just on phones. */
  .hamburger { display: grid; min-width: 44px; min-height: 44px; }
  .icon-btn.drawer-close { display: grid; min-width: 44px; min-height: 44px; }
  /* 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; }
}

/* --------------------------------------------------------------------------
   25. COMPETITION UPLOADS DETAILS  (DetailedView.php)

   The legacy page put a 9-column, 720px-wide Bootstrap table straight into a
   390px viewport, which is why it overflowed the document by 66px. Here the
   same data is a real <table> on desktop and a stack of labelled rows below
   940px, so nothing ever scrolls the page sideways.
   -------------------------------------------------------------------------- */

/* A red destructive button. Deleting a program entry is irreversible in the
   legacy code (it is a hard DELETE, not a hide), so it must not look like the
   navy secondary actions. */
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: #99231a; }

/* --- step 1: region + day -------------------------------------------------- */
.dv-setup .card-body > * + * { margin-top: 20px; }

.dv-ctx {
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 15px 17px;
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 11px;
}
.dv-ctx-item { min-width: 0; }
.dv-ctx-val {
  margin: 4px 0 0;
  font-weight: 800; font-size: 16px; line-height: 22px; color: var(--navy);
  overflow-wrap: anywhere;
}
.dv-ctx-swap {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 7px;
  font-size: 13px; line-height: 18px; font-weight: 800;
}
.dv-ctx-swap .ic { width: 15px; height: 15px; }

.dv-dayform {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
}
.dv-dayform .field { flex: 1 1 300px; max-width: 420px; }
.dv-dayform .btn { flex: 0 0 auto; }

/* --- at a glance ----------------------------------------------------------- */
.dv-stats {
  display: grid; gap: var(--gap, 20px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--gap, 20px);
}
.dv-stat {
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.dv-stat .fine { margin: 6px 0 0; }
.dv-stat-n {
  margin: 5px 0 0;
  font-weight: 800; font-size: 29px; line-height: 34px;
  color: var(--navy); letter-spacing: -.6px;
  font-variant-numeric: tabular-nums;
}
.dv-stat.is-good { border-left-color: var(--green); }
.dv-stat.is-good .dv-stat-n { color: var(--ink-green); }
.dv-stat.is-wait { border-left-color: var(--amber); background: var(--tint-amber); }
.dv-stat.is-wait .dv-stat-n { color: var(--ink-amber); }
.dv-stat.is-info { border-left-color: var(--mid-blue); }
.dv-stat.is-info .dv-stat-n { color: var(--ink-blue); }
.dv-stat.is-info .fine a,
.dv-stat.is-info .fine .linkish { font-weight: 800; }

/* --- two-up: lockout + chase ---------------------------------------------- */
.dv-two {
  display: grid; gap: var(--gap, 20px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  margin-top: var(--gap, 20px);
}
.dv-two > .card { overflow: hidden; }
.dv-two .card-body > .lead-p:first-child { margin-top: 0; }

.dv-lockform {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
  margin-top: 18px;
}
.dv-lockform .field { flex: 1 1 190px; max-width: 260px; }
.dv-lockform .btn { flex: 0 0 auto; }
.dv-countdown {
  margin: 16px 0 0;
  padding: 11px 14px;
  background: var(--tint-amber);
  border-radius: 9px;
  font-size: 15px; line-height: 21px; color: var(--ink-amber);
}
.dv-countdown strong { font-size: 18px; }
.dv-countdown.is-urgent { background: var(--tint-red); color: var(--ink-red); }
.dv-countdown.is-closed { background: #e8eef4; color: var(--navy); }

.dv-actions { list-style: none; margin: 0; padding: 0; }
.dv-actions > li {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.dv-actions > li:first-child { padding-top: 0; border-top: 0; }
.dv-actions > li:last-child { padding-bottom: 0; }
.dv-actions > li > div { flex: 1 1 auto; min-width: 0; }
.dv-actions > li > form,
.dv-actions > li > .btn { flex: 0 0 auto; }
.dv-act-t {
  margin: 0 0 3px;
  font-weight: 800; font-size: 15px; line-height: 21px; color: var(--navy);
}
.dv-actions .fine { margin: 0; }

/* --- report toolbar -------------------------------------------------------- */
.dv-report { overflow: hidden; }
.dv-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfe;
}
.dv-search {
  display: flex; align-items: center; gap: 9px;
  flex: 1 1 340px; min-width: 0;
}
.dv-search .input-wrap { flex: 1 1 auto; min-width: 0; }
.dv-search .btn { flex: 0 0 auto; }

.dv-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.dv-chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px;
  padding: 7px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill, 999px);
  background: var(--white);
  font-weight: 800; font-size: 14px; line-height: 20px;
  color: var(--navy);
  white-space: nowrap;
}
.dv-chip:hover { border-color: var(--navy-soft); text-decoration: none; }
.dv-chip-n {
  display: inline-block;
  padding: 0 7px;
  border-radius: 999px;
  background: #e8eef4;
  font-size: 12px; line-height: 18px;
  font-variant-numeric: tabular-nums;
}
.dv-chip.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.dv-chip.is-on .dv-chip-n { background: rgba(255, 255, 255, .22); color: #fff; }
.dv-chip-wait.is-on { background: var(--amber); border-color: var(--amber); }
.dv-chip-done.is-on { background: var(--green); border-color: var(--green); }

/* --- selection bar --------------------------------------------------------- */
.dv-selbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  padding: 12px 20px;
  background: var(--tint-red);
  border-bottom: 1px solid #f2cfca;
}
.dv-selbar[hidden] { display: none; }
.dv-selcount { margin: 0; color: var(--ink-red); font-size: 15px; line-height: 21px; }
.dv-selcount strong { font-variant-numeric: tabular-nums; }
.dv-selacts { display: flex; flex-wrap: wrap; gap: 9px; margin-left: auto; }

/* --- the table ------------------------------------------------------------- */
.dv-tablewrap { overflow-x: auto; }
.dv-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px; line-height: 20px;
}
.dv-cap {
  caption-side: top; text-align: left;
  padding: 0 20px 12px;
  font-family: var(--font-fine); font-weight: 400;
  font-size: 12px; line-height: 18px; color: var(--ink-soft);
}
.dv-tbl thead th {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-strong);
  background: #f4f7fb;
  text-align: left;
  font-size: 11px; line-height: 15px; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--navy);
  white-space: nowrap;
}
.dv-tbl thead th:first-child { padding-left: 20px; }
.dv-tbl thead th:last-child { padding-right: 20px; }
.dv-tbl td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.dv-tbl td:first-child { padding-left: 20px; }
.dv-tbl td:last-child { padding-right: 20px; }
.dv-tbl tbody tr:last-child td { border-bottom: 0; }
.dv-tbl tbody tr.is-sel { background: var(--tint-red); }

/* Rows carry the legacy MusicFound / WaitingMusic classes so the developer's
   own selectors keep working. WaitingMusic is what the organiser is chasing,
   so it is the one that gets tinted. */
.dv-tbl tbody tr.WaitingMusic { background: #fffaf0; }
.dv-tbl tbody tr.WaitingMusic td { border-bottom-color: #f3e0bd; }

/* Legacy rule: a row whose Program Section text contains SCHEDULED BREAK is
   highlighted. The legacy colour was #f0d506, which fails contrast against
   dark text; this is the same idea at an accessible weight. */
.dv-tbl tbody tr.highlight-break { background: #fdf6cf; }
.dv-tbl tbody tr.highlight-break td { border-bottom-color: #ecdd8c; }
.dv-tbl tbody tr.highlight-break .dv-c-sec { font-weight: 800; color: #6b5900; }

.dv-c-sel { width: 1%; }
.dv-c-sel input[type="checkbox"] {
  width: 20px; height: 20px;
  accent-color: var(--red);
  cursor: pointer;
}
.dv-selall { display: inline-flex; }
.dv-selall input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--navy); cursor: pointer; }

.dv-c-act { width: 74px; }
.dv-act {
  display: inline-block; min-width: 34px;
  padding: 2px 8px;
  border-radius: 7px;
  background: #e8eef4;
  font-weight: 800; color: var(--navy);
  font-variant-numeric: tabular-nums; text-align: center;
}
.dv-c-sec { min-width: 190px; }
.dv-c-perf { min-width: 180px; }
.dv-perf {
  display: block;
  font-weight: 800; font-size: 15px; line-height: 20px; color: var(--navy);
  overflow-wrap: anywhere;
}
.dv-nil { color: var(--ink-soft); }

.dv-editname {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 4px; padding: 0;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 800; font-size: 13px; line-height: 18px;
  color: var(--brand-blue);
}
.dv-editname:hover { color: var(--ink-blue); text-decoration: underline; }
.dv-editname .ic { width: 14px; height: 14px; }

.dv-nolock {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 4px;
  font-size: 12px; line-height: 17px; color: var(--ink-soft);
}
.dv-nolock .ic { width: 13px; height: 13px; flex: 0 0 13px; }

.dv-c-music { min-width: 150px; }
.dv-check {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px 2px 6px;
  border-radius: 999px;
  font-size: 12px; line-height: 18px; font-weight: 800;
  white-space: nowrap;
}
.dv-check .ic { width: 13px; height: 13px; flex: 0 0 13px; }
.dv-check.ok { background: var(--tint-green); color: var(--ink-green); }
.dv-check.no { background: var(--tint-amber); color: var(--ink-amber); }

.dv-listen {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 6px;
  min-height: 34px; padding: 6px 12px;
  border: 1px solid var(--line-strong); border-radius: 9px;
  background: var(--white);
  font-weight: 800; font-size: 13px; line-height: 18px; color: var(--navy);
  white-space: nowrap;
}
.dv-listen:hover { border-color: var(--navy-soft); text-decoration: none; }
.dv-listen .ic { width: 14px; height: 14px; }
.dv-listen.is-off {
  background: var(--page); border-style: dashed; color: var(--ink-soft);
  cursor: not-allowed;
}
.dv-listen.is-off:hover { border-color: var(--line-strong); }

.dv-c-sms { min-width: 138px; }
.dv-sms {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 6px 12px;
  border: 1px solid #b9cdf5; border-radius: 9px;
  background: #eef4fe;
  cursor: pointer;
  font: inherit; font-weight: 800; font-size: 13px; line-height: 18px;
  color: var(--ink-blue);
  white-space: nowrap;
}
.dv-sms:hover { border-color: var(--mid-blue); }
.dv-sms .ic { width: 14px; height: 14px; flex: 0 0 14px; }
.dv-sms-n {
  display: inline-block; padding: 0 6px;
  border-radius: 999px; background: #fff;
  font-size: 11px; line-height: 17px;
  font-variant-numeric: tabular-nums;
}
.dv-sms.has-sent { border-color: var(--amber); background: var(--tint-amber); color: var(--ink-amber); }
.dv-sms:disabled { cursor: not-allowed; opacity: .75; border-color: var(--line-strong); background: var(--page); color: var(--ink-red); }

.dv-c-stat { min-width: 158px; }
.dv-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 800; font-size: 13px; line-height: 18px;
  white-space: nowrap;
}
.dv-badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: 0 0 7px;
}
.dv-badge.done  { background: var(--tint-green);  color: var(--ink-green); }
.dv-badge.wait  { background: #fbe6bd;            color: var(--ink-amber); }
.dv-badge.break { background: #f6ecc4;            color: #6b5900; }
.dv-badge.withdrawn { background: #e8eef4;        color: var(--ink-soft); }

.dv-empty { margin: 0; padding: 30px 20px; text-align: center; color: var(--ink-soft); }
.dv-empty[hidden] { display: none; }

/* --- pagination ------------------------------------------------------------ */
.dv-pager {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  padding: 15px 20px;
  border-top: 1px solid var(--line);
  background: #fbfcfe;
}
.dv-pager .fine { margin: 0; }
.dv-pager #dv-range { flex: 0 0 auto; }
.dv-pages {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0; padding: 0;
}
.dv-page {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 40px; padding: 8px 12px;
  border: 1px solid var(--line-strong); border-radius: 9px;
  background: var(--white);
  font-weight: 800; font-size: 14px; line-height: 20px; color: var(--navy);
}
.dv-page:hover { border-color: var(--navy-soft); text-decoration: none; }
.dv-page.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.dv-page.is-off { color: var(--ink-soft); background: var(--page); cursor: not-allowed; pointer-events: none; }
.dv-pager #dv-showall { margin-left: auto; }
.dv-slow { flex: 1 1 100%; }

/* --- exports --------------------------------------------------------------- */
.dv-exports {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 16px;
}
.dv-exports form { display: contents; }

/* --- dialogs --------------------------------------------------------------- */
.dv-dlg-wide { width: min(720px, calc(100vw - 32px)); }
.dv-dlg-wide .dv-tablewrap { border: 1px solid var(--line); border-radius: 11px; }
.dv-tbl-sms { font-size: 13px; }
.dv-tbl-sms thead th:first-child,
.dv-tbl-sms td:first-child { padding-left: 14px; }
.dv-tbl-sms thead th:last-child,
.dv-tbl-sms td:last-child { padding-right: 14px; }
.dv-dlg-wide .dialog-body > * + * { margin-top: 16px; }

.dv-mailprev {
  padding: 15px 17px;
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 11px;
  font-size: 14px; line-height: 21px;
}
.dv-mailprev > *:first-child { margin-top: 0; }
.dv-mailprev > *:last-child { margin-bottom: 0; }
.dv-mailprev p { margin: 0 0 10px; }
.dv-mailprev ul { margin: 0 0 10px; padding-left: 20px; }
.dv-mailsub {
  font-weight: 800; color: var(--navy);
  padding-bottom: 9px; margin-bottom: 11px !important;
  border-bottom: 1px solid var(--line);
}

.dv-steps { margin: 0; padding-left: 22px; }
.dv-steps > li { margin-bottom: 20px; }
.dv-steps > li:last-child { margin-bottom: 0; }
.dv-steps .fine { margin: 0 0 10px; }
.dv-steps .field { margin-top: 12px; }

.dv-kv {
  margin: 16px 0 0;
  display: grid; grid-template-columns: auto 1fr; gap: 8px 18px;
}
.dv-kv dt { font-weight: 800; color: var(--navy); font-size: 14px; line-height: 20px; }
.dv-kv dd { margin: 0; font-size: 14px; line-height: 20px; }

.dv-dellist { margin: 12px 0 0; padding-left: 20px; font-size: 14px; line-height: 21px; }
.dv-dellist li { margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   25b. Responsive — Competition Uploads Details
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  .dv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .dv-two { grid-template-columns: minmax(0, 1fr); }
  .dv-ctx { grid-template-columns: minmax(0, 1fr); }
}

/* Below 940px the sidebar becomes a drawer and the content column is narrow
   enough that a 7-column table cannot fit. Each row becomes a labelled block
   instead, so the page never scrolls sideways. */
@media (max-width: 940px) {
  .dv-tablewrap { overflow-x: visible; }
  .dv-tbl, .dv-tbl tbody, .dv-tbl tr, .dv-tbl td { display: block; width: auto; }
  .dv-tbl thead { display: none; }
  .dv-cap { display: block; padding: 0 20px 14px; }

  .dv-tbl tbody tr {
    position: relative;
    margin: 0 20px 14px;
    padding: 14px 15px 14px 52px;
    background: var(--white);
    border: 1px solid var(--line-strong);
    border-radius: 12px;
  }
  .dv-tbl tbody tr:last-child { margin-bottom: 20px; }
  .dv-tbl tbody tr.WaitingMusic { border-left: 4px solid var(--amber); padding-left: 49px; }
  .dv-tbl tbody tr.highlight-break { border-left: 4px solid #d9c227; padding-left: 49px; }
  .dv-tbl tbody tr.is-sel { border-color: var(--red); }

  .dv-tbl tbody td { padding: 0; border: 0; }
  .dv-tbl tbody td:first-child,
  .dv-tbl tbody td:last-child { padding: 0; }
  .dv-tbl tbody td + td { margin-top: 9px; }

  /* the checkbox floats into the gutter so it is easy to hit */
  .dv-tbl tbody .dv-c-sel {
    position: absolute; left: 0; top: 0;
    width: 48px; height: 100%;
    display: flex; align-items: center; justify-content: center;
    margin: 0;
  }
  .dv-tbl tbody .dv-c-sel input[type="checkbox"] { width: 22px; height: 22px; }

  /* act + section share the first line */
  .dv-tbl tbody .dv-c-act { display: inline-block; margin-right: 9px; vertical-align: middle; }
  .dv-tbl tbody .dv-c-sec {
    display: inline; margin: 0;
    font-weight: 800; color: var(--navy); font-size: 15px; line-height: 22px;
  }
  .dv-tbl tbody .dv-c-perf { margin-top: 8px; }

  /* every remaining cell gets its column name back */
  .dv-tbl tbody .dv-c-music::before,
  .dv-tbl tbody .dv-c-sms::before,
  .dv-tbl tbody .dv-c-stat::before {
    content: attr(data-th);
    display: block; margin-bottom: 4px;
    font-size: 11px; line-height: 15px; letter-spacing: 1.1px;
    text-transform: uppercase; font-weight: 800; color: var(--ink-soft);
  }
  .dv-tbl tbody .dv-c-sel::before { content: none; }

  .dv-tbl .dv-listen { margin-top: 6px; }

  /* the SMS report table inside the dialog stacks the same way */
  .dv-tbl-sms tbody td::before {
    content: attr(data-th) ": ";
    font-weight: 800; color: var(--ink-soft);
    text-transform: none; letter-spacing: 0; font-size: 13px;
    display: inline;
  }
  .dv-tbl-sms tbody td + td { margin-top: 3px; }
  .dv-tbl-sms tbody tr { padding-left: 15px; margin: 0 0 10px; }
}

@media (max-width: 720px) {
  .dv-stats { grid-template-columns: minmax(0, 1fr); }
  .dv-toolbar { flex-direction: column; align-items: stretch; }
  .dv-search { flex: 1 1 auto; }
  .dv-actions > li { flex-direction: column; align-items: stretch; gap: 12px; }
  .dv-actions > li > .btn,
  .dv-actions > li > form .btn { width: 100%; }
  .dv-pager { flex-direction: column; align-items: stretch; }
  .dv-pager #dv-showall { margin-left: 0; width: 100%; }
  .dv-pages { justify-content: center; }
}

@media (max-width: 560px) {
  .dv-dayform,
  .dv-lockform { flex-direction: column; align-items: stretch; }
  /* In a column flex container flex-grow stretches the field vertically and
     leaves a dead gap above the button, so growth is switched off here. */
  .dv-dayform .field,
  .dv-lockform .field { flex: 0 0 auto; max-width: none; }
  .dv-dayform .btn,
  .dv-lockform .btn { width: 100%; }
  .dv-search { flex-wrap: wrap; }
  .dv-search .input-wrap { flex: 1 1 100%; }
  .dv-search .btn { flex: 1 1 auto; }
  .dv-filters .dv-chip { flex: 1 1 auto; justify-content: center; }
  .dv-selbar { flex-direction: column; align-items: stretch; }
  .dv-selacts { margin-left: 0; }
  .dv-selacts .btn { flex: 1 1 auto; justify-content: center; }
  .dv-exports { flex-direction: column; }
  .dv-exports .btn { width: 100%; }
  .dv-tbl .dv-listen,
  .dv-tbl .dv-sms { width: 100%; justify-content: center; }
  .dv-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .dv-kv dd { margin-bottom: 10px; }
}

@media (max-width: 420px) {
  .dv-tbl tbody tr { margin-left: 14px; margin-right: 14px; }
  .dv-cap { padding: 0 14px 14px; }
  .dv-toolbar,
  .dv-pager,
  .dv-selbar { padding-left: 14px; padding-right: 14px; }
  .dv-stat-n { font-size: 26px; line-height: 31px; }
}

/* --------------------------------------------------------------------------
   25c. Competition Uploads Details — tap targets

   A native checkbox is 22px at best, so each one sits inside a 44px label.
   Clicking anywhere in the label toggles the box (implicit association), so
   the visible control stays small while the thing you can hit is not.
   -------------------------------------------------------------------------- */
.dv-selbox {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  margin: -11px -11px;   /* keeps the column as narrow as the box looks */
  cursor: pointer;
}
.dv-c-sel .dv-selbox input[type="checkbox"] { margin: 0; }

/* Below the drawer breakpoint every control in this page reaches 44px. */
@media (max-width: 940px) {
  .dv-setup .btn,
  .dv-two .btn,
  .dv-toolbar .btn,
  .dv-selbar .btn,
  .dv-exports .btn,
  .dv-pager .btn { min-height: 44px; }

  .dv-chip { min-height: 44px; }
  .dv-page { min-height: 44px; }
  .dv-listen,
  .dv-sms { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .dv-editname,
  .dv-ctx-swap,
  .dv-report .linkish,
  .dv-stat .linkish {
    min-height: 44px;
    display: inline-flex; align-items: center;
  }
  .dv-selbox { margin: -11px; }
  .dv-c-sel .dv-selbox { margin: 0; }
}

/* --------------------------------------------------------------------------
   26. PROGRAM ENTRIES & UPLOAD STATUS  (NQuickView.php)

   Almost everything here is reused from section 25. What is genuinely new is
   the two-mode chooser (one day / one performer) and the Day column, which the
   day view hides because every row shares the same day, and the performer
   lookup shows because its rows span the whole region.
   -------------------------------------------------------------------------- */

/* The two mutually exclusive ways of loading the report, side by side so it is
   obvious they are alternatives rather than a sequence. */
.qv-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}
.qv-mode {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.qv-mode-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.qv-mode-head .tile { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; }
.qv-mode-head .tile .ic { width: 19px; height: 19px; }
.qv-mode-head .h-card { margin: 0 0 3px; }
.qv-mode-head .fine { margin: 0; }
.qv-mode .dv-dayform { margin-top: auto; }

.qv-xor { margin-top: 4px; }
.qv-scope { margin: -6px 0 22px; }
.qv-filternote { margin: 0; }

/* The Day column. Hidden while a single day is on screen — the day is already
   stated once in the card header — and shown for a performer lookup, whose
   results come from every day in the region. */
.dv-c-day { white-space: nowrap; color: var(--ink-soft); }
.dv-tbl.mode-day .dv-c-day { display: none; }

/* A filtered-out row must actually disappear. Below 940px the rows are
   display:block cards, which outranks the [hidden] attribute on its own. */
.dv-tbl tbody tr[hidden] { display: none !important; }
.dv-pager[hidden] { display: none; }
.dv-empty[hidden] { display: none; }

/* The uploaded file name. The legacy page hid this behind a hover tooltip,
   which is unreachable on a touch screen, so it is printed under the badge. */
.qv-file {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft);
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 320px;
}
.qv-file.is-none { font-style: normal; color: #98a2ad; }

/* -------- 26b. Responsive -------- */

@media (max-width: 1100px) {
  .qv-modes { grid-template-columns: 1fr; }
}

@media (max-width: 940px) {
  /* In the stacked card layout the Day column needs its own label like the
     rest, and it must still disappear in day mode. */
  .dv-tbl tbody .dv-c-day::before {
    content: attr(data-th);
    display: block;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--ink-soft);
    margin-bottom: 3px;
  }
  .dv-tbl tbody .dv-c-day { margin-top: 9px; }
  .dv-tbl.mode-day tbody .dv-c-day { display: none; }
  .qv-file { max-width: none; }
}

@media (max-width: 560px) {
  .qv-mode { padding: 15px; }
  .qv-mode .btn,
  .qv-mode .dv-dayform .btn { width: 100%; justify-content: center; }
  .dv-filters { width: 100%; }
  .dv-filters .dv-chip { flex: 1 1 auto; justify-content: center; }
}

/* -------- 26c. Tap targets -------- */

@media (max-width: 940px) {
  .qv-mode .btn,
  .qv-report .dv-chip { min-height: 44px; }
}

/* --------------------------------------------------------------------------
   27. ADD LATE ENTRY — "sections under the selected day" panel

   The legacy page carries a second, independent day dropdown above a four
   column table (ACT / Performer Name / Section Name / Delete) with a red trash
   icon per row. Section 25's list gave the first three but tied the day to
   step 1 and hid the section name in a sub-line. This section restores the
   independent day picker and gives Section Name and Delete their own columns.
   -------------------------------------------------------------------------- */

.ale-daybar {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px;
  margin: 0 0 6px;
  background: var(--tint-blue);
  border-radius: 12px;
}
.ale-daybar .field { flex: 0 1 320px; min-width: 0; margin: 0; }
.ale-daybar .fine { flex: 1 1 260px; margin: 0 0 10px; }

/* Column headings. Hidden below 720px, where each row becomes a card that
   labels its own fields. */
.entries-head {
  display: grid;
  grid-template-columns: 58px minmax(0, 1.05fr) minmax(0, 1.35fr) 112px;
  gap: 14px;
  align-items: center;
  padding: 14px 0 8px;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ink-soft);
}
.entries-head-del { text-align: center; }
.entries-head[hidden] { display: none; }

/* Same grid on the rows, so the columns actually line up with the headings. */
#list-card .entry {
  display: grid;
  grid-template-columns: 58px minmax(0, 1.05fr) minmax(0, 1.35fr) 112px;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
}
#list-card .entry-main { margin-right: 0; }
.entry-sec {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.entry.is-break .entry-sec { color: var(--ink-amber); }

/* The delete control. Red, but quiet until it is hovered or focused — it is a
   permanent delete sitting next to twelve rows of ordinary text. */
.entry-del {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--red, #B4291F);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.entry-del .ic { width: 19px; height: 19px; flex: 0 0 auto; }
.entry-del-txt {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.entry-del:hover,
.entry-del:focus-visible {
  background: var(--tint-red, #fbeae8);
  border-color: var(--red, #B4291F);
  color: var(--ink-red, #8e2018);
}
.entry-del:focus-visible { outline: 2px solid var(--ink-red, #8e2018); outline-offset: 2px; }

/* Scheduled breaks have no section row behind them, so nothing to delete. */
.entry-nodel {
  justify-self: center;
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  text-align: center;
}

/* -------- 27b. Responsive -------- */

@media (max-width: 940px) {
  .entries-head,
  #list-card .entry {
    grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1.15fr) 60px;
    gap: 10px;
  }
}

@media (max-width: 720px) {
  /* Each row becomes its own card, labelling its own fields, so nothing has to
     scroll sideways and the trash icon keeps a 44px target. */
  .entries-head { display: none; }
  #list-card .entry {
    grid-template-columns: 52px minmax(0, 1fr) 44px;
    grid-template-areas: "act name del" ".  sec  sec";
    row-gap: 4px;
    padding: 12px 0;
  }
  #list-card .entry-act  { grid-area: act; }
  #list-card .entry-main { grid-area: name; }
  #list-card .entry-sec  { grid-area: sec; font-size: 13px; }
  #list-card .entry-del,
  #list-card .entry-nodel { grid-area: del; }
  #list-card .entry-sec::before {
    content: "Section";
    display: block;
    font-size: 10px;
    letter-spacing: .07em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--ink-soft);
  }
  /* section 25 made every .entry button full width; that must not apply here */
  #list-card .entry .btn { width: auto; margin-top: 0; }
  .ale-daybar { padding: 14px; }
  .ale-daybar .field,
  .ale-daybar .fine { flex: 1 1 100%; }
  .ale-daybar .fine { margin: 0; }
}

@media (max-width: 560px) {
  #list-card .entry { flex-wrap: nowrap; }
  .entry-nodel { font-size: 11px; line-height: 14px; }
}

/* ==================================================================== */
/* 28. PUBLIC SITE — musicuploads/index.php                             */
/*     The member-facing landing and login page. No sidebar: this is a  */
/*     public page, so it uses a full-width top bar and a centred       */
/*     content column instead of the portal shell. Everything else is   */
/*     the same design system.                                          */
/* ==================================================================== */

.home-body { background: #fff; }

.wrap { width: min(1180px, 100% - 48px); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 0 0 12px 0;
}
.skip:focus { left: 0; }

/* ---------------------------- top bar ---------------------------- */
.site-top {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-top-inner {
  width: min(1180px, 100% - 48px); margin-inline: auto;
  min-height: 74px; display: flex; align-items: center; gap: 24px;
}
.site-brand {
  /* The sidebar .brand carries 62px of right padding for the collapse
     control. In the public header there is no collapse control, and that
     padding pushed the header buttons off a 390px viewport. */
  flex: 0 1 auto; min-width: 0; padding: 0; gap: 0;
  color: var(--navy); text-decoration: none;
}
.site-brand .wordmark { font-size: 21px; }
.site-brand .wordmark b { color: var(--navy); }
.site-brand .wordmark span { color: var(--brand-blue); }
.site-brand .brand-sub {
  display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 3px;
}

.site-nav { display: flex; gap: 4px; margin-left: auto; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 13px;
  border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 14.5px;
}
.site-nav a:hover { background: var(--page); color: var(--navy); }
.site-nav a:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }

.site-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.site-burger { display: none; }

/* -------------------------- mobile drawer -------------------------- */
.site-scrim {
  position: fixed; inset: 0; z-index: 80; background: rgba(22, 55, 79, .45);
}
.site-scrim[hidden] { display: none; }

.site-drawer {
  position: fixed; z-index: 90; top: 0; right: 0; bottom: 0;
  width: min(320px, 88vw); background: var(--navy); color: #fff;
  padding: 18px 18px 28px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.site-drawer[hidden] { display: none; }
.site-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-bottom: 14px; margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.site-drawer-head .wordmark { font-size: 19px; }
.site-drawer-head .wordmark b { color: #fff; }
.site-drawer-head .wordmark span { color: var(--navy-soft); }
.site-drawer-head .icon-btn { color: #fff; min-width: 44px; min-height: 44px; }
.site-drawer-head .icon-btn:hover { background: rgba(255, 255, 255, .12); }
.site-drawer a {
  display: flex; align-items: center; min-height: 46px; padding: 0 12px;
  border-radius: 10px; color: #fff; text-decoration: none; font-size: 15px;
}
.site-drawer a:hover { background: rgba(255, 255, 255, .12); }
.site-drawer-lbl {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy-soft); padding: 18px 12px 6px;
}

/* ------------------------------ hero ------------------------------ */
.home-hero {
  background:
    radial-gradient(1100px 460px at 12% -10%, rgba(0, 114, 187, .12), transparent 62%),
    linear-gradient(180deg, var(--page), #fff);
  border-bottom: 1px solid var(--line);
  padding: 56px 0 64px;
}
.home-hero-inner {
  width: min(1180px, 100% - 48px); margin-inline: auto;
  display: grid; grid-template-columns: 1.05fr 420px; gap: 56px; align-items: start;
}
.home-h1 {
  font-weight: 800; font-size: 46px; line-height: 1.1; letter-spacing: -.015em;
  color: var(--navy); margin: 10px 0 0;
}
.home-lead {
  font-size: 17.5px; line-height: 1.62; color: var(--ink); max-width: 56ch;
  margin: 18px 0 0;
}
.home-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.home-ticks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; }
.home-ticks li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px; color: var(--ink);
}
.home-ticks .ic { width: 19px; height: 19px; color: var(--green); flex: 0 0 auto; margin-top: 2px; }

.home-patent {
  margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-soft); max-width: 52ch;
}
.home-patent span { display: block; }

/* --------------------------- sign in card --------------------------- */
.home-signin { position: sticky; top: 96px; }
.home-signin-card { box-shadow: 0 18px 44px -26px rgba(28, 67, 100, .38); }
.home-form { display: grid; gap: 16px; }
.btn-wide { width: 100%; justify-content: center; }
.home-signin-foot {
  display: flex; flex-wrap: wrap; gap: 2px 22px; justify-content: center;
  margin: 2px 0 0; text-align: center;
}
.home-signin-note {
  display: flex; align-items: flex-start; gap: 9px; margin: 14px 2px 0;
  line-height: 1.55;
}
.home-signin-note p { margin: 0; }
.home-signin-note .ic { width: 17px; height: 17px; color: var(--brand-blue); flex: 0 0 auto; margin-top: 1px; }

/* --------------------------- content bands --------------------------- */
.home-sec { padding: 66px 0; }
.home-sec-alt { background: var(--page); border-block: 1px solid var(--line); }
.home-sec .lead-p { margin-top: 6px; }

.home-feat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 30px;
}
.home-feat {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 22px 20px 24px;
}
.home-feat .tile { margin-bottom: 14px; }
.home-feat h3 { margin: 0 0 8px; }
.home-feat p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); }

.home-users {
  display: flex; align-items: center; gap: 11px; margin: 28px 0 0;
  padding: 16px 18px; border-radius: 12px;
  background: var(--tint-blue); color: var(--ink-blue); font-size: 15px;
}
.home-users .ic { width: 20px; height: 20px; flex: 0 0 auto; }

.home-two { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 56px; }
.home-art h2 { margin: 0 0 12px; }
.home-art p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.68; color: var(--ink); }
.home-art p:last-child { margin-bottom: 0; }

.portal-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 30px;
}
.portal {
  display: block; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 20px; text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.portal:hover {
  border-color: var(--line-strong); transform: translateY(-2px);
  box-shadow: 0 12px 26px -20px rgba(28, 67, 100, .5);
}
.portal:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.portal .tile { margin-bottom: 13px; }
.portal b { display: block; color: var(--navy); font-size: 15.5px; margin-bottom: 4px; }
.portal .fine { display: block; }

/* ------------------------ Australia wide band ------------------------ */
.home-band { background: var(--navy); color: #fff; padding: 44px 0; }
.home-band-inner { display: flex; align-items: center; gap: 22px; }
.home-band .tile { flex: 0 0 auto; background: rgba(255, 255, 255, .14); color: #fff; }
.home-band-h { font-weight: 800; font-size: 22px; margin: 0 0 6px; color: #fff; }
.home-band p { margin: 0; color: var(--navy-soft); font-size: 15px; line-height: 1.6; max-width: 72ch; }

/* ----------------------------- footer ----------------------------- */
.site-foot { background: var(--navy-deep); color: #fff; padding: 52px 0 26px; }
.site-foot-inner {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 34px;
}
.site-foot .wordmark { font-size: 20px; }
.site-foot .wordmark b { color: #fff; }
.site-foot .wordmark span { color: var(--navy-soft); }
.site-foot .fine { color: var(--navy-soft); }
.site-foot-brand .fine { margin: 14px 0 0; max-width: 40ch; line-height: 1.6; }
.site-foot-col { display: flex; flex-direction: column; align-items: flex-start; }
.site-foot-lbl {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy-soft); margin-bottom: 8px;
}
.site-foot-col a,
.site-foot-btn {
  display: inline-flex; align-items: center; min-height: 44px;
  color: #fff; text-decoration: none; font-size: 14.5px;
}
.site-foot-col a:hover,
.site-foot-btn:hover { color: var(--navy-soft); text-decoration: underline; }
.site-foot-btn {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  text-align: left;
}
.site-foot-col .fine { margin: 8px 0 0; line-height: 1.55; max-width: 34ch; }
.site-foot-legal {
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  margin-top: 38px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14);
}
.site-foot-legal a { color: #fff; }

/* --------------------------- sales dialog --------------------------- */
#sales-dlg { width: min(560px, calc(100vw - 32px)); }
.home-msg { min-height: 128px; resize: vertical; font: inherit; }
.cap-row { display: flex; align-items: center; gap: 12px; }
.cap-img {
  border: 1px solid var(--line-strong); border-radius: 9px; background: #fff;
  flex: 0 0 auto; height: 48px; width: auto;
}
.cap-row .input { flex: 1 1 auto; min-width: 0; }

/* ==================================================================== */
/* 28b. PUBLIC SITE — responsive                                        */
/* ==================================================================== */

@media (max-width: 1100px) {
  .home-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .home-signin { position: static; max-width: 520px; }
  .home-h1 { font-size: 40px; }
  .home-feat-grid,
  .portal-grid { grid-template-columns: repeat(2, 1fr); }
  .site-foot-inner { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 940px) {
  .wrap,
  .site-top-inner,
  .home-hero-inner { width: min(1180px, 100% - 32px); }
  /* The nav collapses into the drawer, same as the portal sidebar does. */
  .site-nav { display: none; }
  .site-burger { display: grid; min-width: 44px; min-height: 44px; }
  .site-actions { margin-left: auto; }
  .home-two { grid-template-columns: 1fr; gap: 30px; }
  .home-sec { padding: 52px 0; }
}

@media (max-width: 720px) {
  .home-hero { padding: 38px 0 46px; }
  .home-h1 { font-size: 33px; }
  .home-lead { font-size: 16.5px; }
  .home-feat-grid,
  .portal-grid { grid-template-columns: 1fr; }
  .home-band-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .site-foot-inner { grid-template-columns: 1fr; gap: 26px; }
  .site-foot-brand .fine,
  .site-foot-col .fine { max-width: none; }
}

@media (max-width: 560px) {
  /* Below this the two header buttons crowd the wordmark, so the ghost
     "Log in" drops out — the drawer and the hero sign-in card both still
     reach it. */
  .site-actions .btn-ghost { display: none; }
  .site-brand .brand-sub { display: none; }
  .site-top-inner { min-height: 66px; gap: 12px; }
  .home-h1 { font-size: 29px; }
  .home-cta { flex-direction: column; align-items: stretch; }
  .home-cta .btn { width: 100%; justify-content: center; }
  .home-sec { padding: 44px 0; }
  .home-signin-foot { flex-direction: column; align-items: center; gap: 0; }
  .cap-row { flex-direction: column; align-items: stretch; }
  .cap-img { align-self: flex-start; }
  .site-foot-legal { flex-direction: column; gap: 6px; }
}

@media (max-width: 420px) {
  .home-h1 { font-size: 26px; }
  .site-brand .wordmark { font-size: 18px; }
  .site-actions .btn-primary { padding-inline: 14px; }
}

/* 28c. Header CTA label swap. Below 560px "Create an account" plus the menu
   button overflows a 390px viewport, so the label shortens rather than the
   button disappearing. */
.lbl-short { display: none; }
@media (max-width: 560px) {
  .lbl-full { display: none; }
  .lbl-short { display: inline; }
  /* Header buttons are touch targets once the menu button appears. */
  .site-actions .btn { min-height: 44px; }
}

/* 28d. Touch targets. Standalone links (as opposed to links inside a
   sentence) need a 44px hit area on touch. Inline prose links are left at
   their natural height so the paragraph leading is not distorted. */
.site-brand { display: flex; align-items: center; min-height: 44px; }
.home-signin-foot .linkish {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px;
}
@media (max-width: 720px) {
  .site-foot-legal a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* 28e. Icon tiles on the public page.
   .tile in this stylesheet only carries a background colour — every existing
   use scopes its own box (.support-row .tile, .tile-link .tile, .set-head
   .tile). The public page needs the same, or the span stays inline and the
   SVG falls back to its intrinsic 300x150. */
.home-feat .tile,
.portal .tile,
.home-band .tile {
  display: grid; place-items: center; color: #fff;
  width: 42px; height: 42px; border-radius: 12px; flex: 0 0 42px;
}
.home-feat .tile .ic,
.portal .tile .ic,
.home-band .tile .ic { width: 21px; height: 21px; }
.home-band .tile { width: 50px; height: 50px; flex-basis: 50px; }
.home-band .tile .ic { width: 25px; height: 25px; }

.home-feat .h-card,
.portal b { display: block; }
.home-ticks .ic,
.home-signin-note .ic,
.home-users .ic { flex: 0 0 auto; }

/* 28f. Logo in the sign-in card header.
   The card header is normally an icon tile plus text. On the public page the
   lock tile is replaced by the Music Uploads logo, sitting to the right of the
   heading as in the approved mock-up. */
.home-signin-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.home-signin-head .card-head-txt { min-width: 0; }
.home-signin-logo {
  flex: 0 0 auto;
  width: auto; height: 84px;
  /* The source art is a PNG with the background keyed out, so it sits on the
     blue tint without a white box behind it. */
  display: block;
}
@media (max-width: 420px) {
  /* Below this the logo and the two-line heading fight for the same row, so
     the logo drops under the text and centres. */
  .home-signin-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .home-signin-logo { height: 62px; align-self: center; }
}