/* ==========================================================================
   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;
  /* Solid button fills only — deliberately darker than the accent colours above
     so white button labels clear WCAG AA. Pills, tints, meters, step badges and
     icon tiles keep the style-guide green and purple. */
  --green-btn: #33710f;
  --green-btn-hover: #2a5d0c;
  --purple-btn: #5c2b5a;
  --purple-btn-hover: #4a2249;
  --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-btn); color: #fff; }
.btn-primary:hover { background: var(--green-btn-hover); }

.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-btn); color: #fff; }
.btn-purple:hover { background: var(--purple-btn-hover); }

.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 {
  display: block;               /* .meter is sometimes a <span> — force a box */
  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; }
}

/* ==========================================================================
   28g. PAGE 19 — MEMBER DASHBOARD  (member-dashboard.html)
   Logged-in member view of /musicuploads/index.php. Reuses the public-site
   shell (.site-top / .site-drawer / .site-foot) so a member sees one system
   from the marketing page through to their account.
   ========================================================================== */

/* --- notice: red variant + per-colour icon tint (base only tinted amber) --- */
.notice.red { background: var(--tint-red); border-color: var(--red); }
.notice.red h4 { color: var(--ink-red); }
.notice.red.notice-flex > .ic    { color: var(--ink-red); }
.notice.blue.notice-flex > .ic   { color: var(--ink-blue); }
.notice.green.notice-flex > .ic  { color: var(--ink-green); }
.notice.purple.notice-flex > .ic { color: var(--ink-purple); }

/* --- page shell --- */
.md-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 24px 64px;
  display: flex; flex-direction: column; gap: 30px;
}

.md-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.md-head .page-title { margin: 2px 0 6px; }
.md-head .fine { max-width: 56ch; }
.md-head-act { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- top bar extras --- */
.site-nav a.is-here { color: var(--navy); position: relative; }
.site-nav a.is-here::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; border-radius: 2px; background: var(--green);
}
.md-cart { position: relative; }
.md-cart-n {
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 10px; background: var(--navy); color: #fff;
  font-size: 11px; line-height: 19px; text-align: center;
  font-weight: 800; letter-spacing: .2px;
}
.md-out { padding-left: 10px; padding-right: 10px; }

/* --- notices on this page --- */
.md-notice > div { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.md-notice b { color: var(--navy); font-size: 15px; }
.md-notice p { margin: 0; color: var(--ink); font-size: 14px; line-height: 21px; }
.md-inline-note { margin: 0; font-size: 14px; line-height: 21px; }
.md-inline-note > span { color: var(--ink); }

/* --- section headings --- */
.md-sec-head { margin-bottom: 14px; }
.md-sec-head .h-title { margin: 0 0 4px; }
.md-sec-head .fine { margin: 0; }

/* --- the three steps --- */
.md-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.md-step {
  display: flex; flex-direction: column; gap: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  text-align: left; text-decoration: none; padding: 0; overflow: hidden;
  font: inherit; color: inherit; cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.md-step:hover { border-color: var(--line-strong); box-shadow: 0 6px 20px rgba(28,67,100,.09); transform: translateY(-2px); }
.md-step:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.md-step-top {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.md-step-green  .md-step-top { background: var(--tint-green); }
.md-step-blue   .md-step-top { background: var(--tint-blue); }
.md-step-purple .md-step-top { background: var(--tint-purple); }
.md-step-n {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #fff;
}
.md-step-green  .md-step-n { background: var(--green); }
.md-step-blue   .md-step-n { background: var(--mid-blue); }
.md-step-purple .md-step-n { background: var(--purple); }
.md-step-lbl {
  flex: 1 1 auto; font-size: 11.5px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
}
.md-step-green  .md-step-lbl { color: var(--ink-green); }
.md-step-blue   .md-step-lbl { color: var(--ink-blue); }
.md-step-purple .md-step-lbl { color: var(--ink-purple); }
.md-step-top .tile { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; }
.md-step-top .tile .ic { width: 17px; height: 17px; }
.md-step-body { display: flex; flex-direction: column; gap: 7px; padding: 16px; flex: 1 1 auto; }
.md-step-body b { color: var(--navy); font-size: 16px; line-height: 22px; }
.md-step-body > span:not(.linkish) { color: var(--ink); font-size: 14px; line-height: 21px; }
.md-step-body .linkish { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; }
.md-step-body .linkish .ic { width: 15px; height: 15px; }

/* --- storage meter --- */
.md-meter-card { padding: 20px 22px; }
.md-meter { display: grid; grid-template-columns: minmax(0,1fr) minmax(160px,260px) auto; gap: 18px 24px; align-items: center; }
.md-meter-txt .eyebrow { margin: 0 0 4px; }
.md-meter-big { margin: 0 0 3px; font-size: 20px; line-height: 26px; color: var(--navy); }
.md-meter-big b { font-weight: 800; }
.md-meter-txt .fine { margin: 0; }
.md-meter-bar { height: 10px; border-radius: 6px; background: #e9edf4; overflow: hidden; }
.md-meter-bar > span { display: block; height: 100%; border-radius: 6px; background: var(--green); }
.md-meter-act { display: flex; gap: 10px; flex-wrap: wrap; }
.md-ph { margin: 12px 0 0; color: var(--ink-soft); font-style: italic; }

/* --- competition rows --- */
.md-rows { display: flex; flex-direction: column; gap: 14px; }
.md-row {
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1.25fr) auto;
  gap: 16px 22px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 18px 20px;
}
.md-row-comp { margin: 0 0 3px; font-size: 17px; font-weight: 800; color: var(--navy); line-height: 23px; }
.md-row-region { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 20px; }
.md-row-meta { display: flex; gap: 22px; flex-wrap: wrap; }
.md-fact { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.md-fact-lbl { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.md-fact-val { font-size: 14.5px; color: var(--navy); display: inline-flex; align-items: center; gap: 6px; }
.md-fact-val .ic { width: 15px; height: 15px; }
.md-warn { color: var(--ink-amber); font-weight: 800; }
.md-shut { color: var(--ink-soft); }
.md-row-act { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.md-shut-note { margin: 0; max-width: 20ch; text-align: right; }

/* --- storage bin --- */
.md-bin .card-head { align-items: center; }
.card-head > .tile {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; color: #fff;
}
.card-head > .tile .ic { width: 19px; height: 19px; }
.md-bin-wrap { overflow-x: auto; }
/* These two tables carry their own base styles rather than .tbl, because the
   shared .tbl mobile treatment is a bespoke five-column grid built for the
   critique report and does not fit a file list. */
.md-bin-tbl, .md-sect-tbl {
  width: 100%; border-collapse: collapse; font-size: 14.5px;
}
.md-bin-tbl thead th, .md-sect-tbl thead th {
  text-align: left; padding: 10px 12px;
  background: var(--page); border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); white-space: nowrap;
}
.md-bin-tbl tbody td, .md-sect-tbl tbody td {
  padding: 12px; border-bottom: 1px solid var(--line);
  color: var(--ink); vertical-align: middle;
}
.md-bin-tbl tbody tr:last-child td, .md-sect-tbl tbody tr:last-child td { border-bottom: 0; }
.md-bin-tbl tbody tr:hover, .md-sect-tbl tbody tr:hover { background: #fbfcfe; }
.md-c-chk { width: 42px; }
.md-c-act { width: 1%; white-space: nowrap; }
.md-c-act .btn { margin-left: 6px; }
.md-file { display: inline-flex; align-items: center; gap: 8px; }
.md-file .ic { width: 16px; height: 16px; color: var(--mid-blue); flex: 0 0 16px; }
.md-bin-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 14px 0 0; margin-top: 14px; border-top: 1px solid var(--line);
}
.md-bin form { padding: 18px 20px 20px; }

/* --- how-to videos --- */
.md-vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.md-vid {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 13px 15px; text-decoration: none; min-height: 60px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.md-vid:hover { border-color: var(--line-strong); box-shadow: 0 4px 14px rgba(28,67,100,.08); }
.md-vid:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.md-vid-ic { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; background: var(--tint-purple); display: grid; place-items: center; }
.md-vid-ic .ic { width: 17px; height: 17px; color: var(--purple); }
.md-vid-t { font-size: 14px; line-height: 20px; color: var(--navy); }

/* --- support --- */
.md-two { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; }
.md-sup-body { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding: 18px 20px 20px; }
.md-sup-body p { margin: 0; }
.md-sup-body .home-ticks { margin: 0; }
.md-sup-act { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- dialog extras --- */
.md-dlg-wide { width: min(760px, calc(100vw - 32px)); }
.md-plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.md-plist li { display: flex; flex-direction: column; gap: 2px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.md-plist b { color: var(--navy); font-size: 15px; }
.md-plist span { color: var(--ink-soft); font-size: 13.5px; }
.md-plist-plain li { border: 0; padding: 0; }
.md-plist-plain li, .md-plist-plain b { color: var(--ink); font-size: 14.5px; line-height: 21px; }
.md-fs { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.md-fs .field-label { margin-bottom: 2px; }
.md-pick { display: flex; flex-direction: column; gap: 10px; }
.md-pick-o {
  display: flex; align-items: center; gap: 13px; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 15px;
}
.md-pick-o:hover { border-color: var(--line-strong); background: var(--page); }
.md-pick-o .tile { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.md-pick-o .tile .ic { width: 18px; height: 18px; }
.md-pick-o > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.md-pick-o b { color: var(--navy); font-size: 15px; }
.md-pick-o span span { color: var(--ink-soft); font-size: 13.5px; }
.md-vids-dlg { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

/* ------------------------------ responsive ------------------------------ */
@media (max-width: 1100px) {
  .md-steps { grid-template-columns: 1fr; }
  .md-two   { grid-template-columns: 1fr; }
  .md-meter { grid-template-columns: 1fr; }
  .md-meter-act { justify-content: flex-start; }
  .md-row { grid-template-columns: 1fr; }
  .md-row-act { justify-content: flex-start; }
  .md-shut-note { text-align: left; max-width: none; }
}

@media (max-width: 940px) {
  .md-main { padding: 24px 18px 56px; gap: 26px; }
}

@media (max-width: 720px) {
  /* stack the two tables into labelled rows so the page never scrolls sideways */
  .md-bin-wrap { overflow-x: visible; }
  .md-bin-tbl thead, .md-sect-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .md-bin-tbl tr, .md-sect-tbl tr {
    display: block; border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: 12px 14px; margin-bottom: 10px;
  }
  .md-bin-tbl td, .md-sect-tbl td {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    border: 0; padding: 5px 0; width: auto;
  }
  .md-bin-tbl td::before, .md-sect-tbl td::before {
    content: attr(data-lbl);
    font-size: 11px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-soft); flex: 0 0 auto;
  }
  .md-bin-tbl td.md-c-chk {
    justify-content: flex-start; align-items: center; gap: 10px;
    padding: 0 0 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
  }
  .md-bin-tbl td.md-c-chk::before {
    content: "Select this file"; order: 2; text-transform: none;
    letter-spacing: 0; font-size: 13.5px; font-weight: 300; color: var(--ink);
  }
  .md-c-act { white-space: normal; }
  .md-bin-tbl tbody td, .md-sect-tbl tbody td { border-bottom: 1px solid var(--line); }
  .md-bin-tbl tbody tr td:last-child, .md-sect-tbl tbody tr td:last-child { border-bottom: 0; }
  .md-c-act .btn { margin-left: 0; }
  /* Actions keep the label on its own line and the controls in one row, so a
     three-action file does not become three stacked lines. */
  .md-bin-tbl td.md-c-act, .md-sect-tbl td.md-c-act {
    flex-direction: row; flex-wrap: wrap; align-items: center;
    justify-content: flex-start; gap: 8px;
  }
  .md-bin-tbl td.md-c-act::before, .md-sect-tbl td.md-c-act::before { flex: 0 0 100%; }
}

@media (max-width: 560px) {
  .md-main { padding: 20px 14px 48px; }
  .md-head { align-items: stretch; }
  .md-head-act { flex-direction: column; }
  .md-head-act .btn { width: 100%; justify-content: center; }
  .md-row-act { flex-direction: column; align-items: stretch; }
  .md-row-act .btn { width: 100%; justify-content: center; }
  .md-meter-act { flex-direction: column; }
  .md-meter-act .btn { width: 100%; justify-content: center; }
  .md-sup-body .btn { width: 100%; justify-content: center; }
  .md-sup-act { flex-direction: column; width: 100%; }
  .md-bin-foot { flex-direction: column; align-items: stretch; }
  .md-bin-foot .btn { width: 100%; justify-content: center; }
  .md-vids { grid-template-columns: 1fr; }
  .md-notice > div { align-items: stretch; }
  .md-notice .btn { width: 100%; justify-content: center; }
  .md-bin form { padding: 16px 14px 18px; }
  .md-sup-body { padding: 16px 14px 18px; }
  .md-bin-tbl td.md-c-act .btn, .md-sect-tbl td.md-c-act .btn { justify-content: center; }
}

@media (max-width: 420px) {
  .md-row-meta { flex-direction: column; gap: 12px; }
  .md-bin-tbl td:not(.md-c-act):not(.md-c-chk),
  .md-sect-tbl td:not(.md-c-act) { flex-direction: column; align-items: flex-start; gap: 3px; }
  .md-vid { min-height: 56px; }
}

/* Support cards reuse .card-head; give their tiles a box and white icons. */
.md-sup .card-head .tile {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; color: #fff;
}
.md-sup .card-head .tile .ic { width: 19px; height: 19px; }

/* ==========================================================================
   28h. PAGE 19 — MEMBER DASHBOARD  (member-dashboard.html)
   Rebuilt on the Event Manager shell (.shell / .sidebar / .header / .content)
   so the member area and the admin portal are visibly one product.
   ========================================================================== */

/* --- pill: red variant, to match the red notice --- */
.pill.red { background: var(--tint-red); color: var(--ink-red); }
.pill.red .bullet { background: var(--red); }

/* --- an icon-only button that means "destructive" --- */
.btn-red-ic { color: var(--red); }
.btn-red-ic:hover { background: var(--tint-red); border-color: var(--red); }

/* --- sidebar: counts on a nav item, and the help card at the foot --- */
.nav-badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--amber); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
}
.side-help {
  margin: auto 14px 16px; padding: 14px 15px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-sm);
}
.side-help-h { margin: 0 0 5px; font-size: 14px; font-weight: 800; color: #fff; }
.side-help .fine { margin: 0 0 9px; color: var(--navy-soft); }
.side-help .linkish { color: #fff; display: inline-flex; align-items: center; gap: 6px; }
.side-help .linkish .ic { width: 15px; height: 15px; }

/* --- header: search, cart --- */
.mem-search { position: relative; flex: 1 1 260px; max-width: 380px; min-width: 0; }
.mem-search .input { padding-left: 38px; height: 40px; }
.mem-search-ic {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--ink-soft); pointer-events: none;
}
.mem-cart { position: relative; gap: 7px; }
.mem-cart-n {
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: var(--navy); color: #fff; font-size: 11px; line-height: 19px;
  text-align: center; font-weight: 800;
}

/* ---------------------- HOW-TO VIDEO DROPDOWN ---------------------- */
.vidmenu { position: relative; }
.vidmenu-btn { gap: 7px; }
.vidmenu-chev { width: 15px; height: 15px; transition: transform .18s ease; }
.vidmenu-btn[aria-expanded="true"] .vidmenu-chev { transform: rotate(90deg); }
.vidmenu-btn[aria-expanded="true"] { border-color: var(--navy-soft); background: var(--tint-blue); }

.vidmenu-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: min(420px, calc(100vw - 32px));
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-card);
  box-shadow: 0 18px 46px rgba(22, 55, 79, .18);
  overflow: hidden;
}
.vidmenu-panel[hidden] { display: none; }
.vidmenu-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 14px 10px;
}
.vidmenu-h { margin: 0; font-size: 15px; font-weight: 800; color: var(--navy); }
.vidmenu-x { display: none; }
.vidmenu-search { position: relative; padding: 0 14px 12px; }
.vidmenu-search .input { padding-left: 38px; height: 40px; }
.vidmenu-search-ic {
  position: absolute; left: 26px; top: 20px; width: 17px; height: 17px;
  color: var(--ink-soft); pointer-events: none;
}
.vidmenu-list {
  overflow-y: auto; max-height: min(52vh, 420px);
  border-top: 1px solid var(--line); padding: 6px;
  overscroll-behavior: contain;
}
.vidmenu-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 10px; border-radius: var(--r-sm);
  text-decoration: none; min-height: 44px;
}
.vidmenu-item:hover, .vidmenu-item:focus-visible { background: var(--page); text-decoration: none; }
.vidmenu-item:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: -2px; }
.vidmenu-item[hidden] { display: none; }
.vidmenu-ic {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 8px;
  background: var(--tint-purple); color: var(--purple);
  display: grid; place-items: center;
}
.vidmenu-ic .ic { width: 16px; height: 16px; }
.vidmenu-t { flex: 1 1 auto; font-size: 14px; line-height: 20px; color: var(--navy); }
.vidmenu-ext { flex: 0 0 14px; width: 14px; height: 14px; color: var(--ink-soft); }
.vidmenu-none { margin: 0; padding: 16px; color: var(--ink-soft); font-size: 14px; text-align: center; }
.vidmenu-none[hidden] { display: none; }
.vidmenu-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 11px 14px; border-top: 1px solid var(--line);
  background: var(--page);
}
.vidmenu-foot .fine { margin: 0; }
/* Sits just under the sticky header (z-index 30) so the panel, which lives
   inside the header's stacking context, is never dimmed by its own scrim. */
.vidmenu-scrim { position: fixed; inset: 0; z-index: 29; background: rgba(22, 55, 79, .34); }
.vidmenu-scrim[hidden] { display: none; }

/* ------------------------------ page body ------------------------------ */
.mem-ph { color: var(--ink-soft); font-style: italic; margin: -6px 0 0; }
.mem-ph-pad { padding: 0 20px 18px; margin: 0; }
.mem-ph-inline { color: inherit; }
.mem-sec-head { margin-bottom: 14px; }
.mem-sec-head .h-title { margin: 0 0 4px; }
.mem-sec-head .fine { margin: 0; }
.mem-col { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.mem-head-act { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- tabs --- */
.mem-tabs { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.mem-tab {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 999px; padding: 8px 15px; min-height: 38px;
  font: inherit; font-size: 13.5px; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mem-tab:hover { border-color: var(--line-strong); background: var(--page); }
.mem-tab:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.mem-tab.is-on { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 800; }

/* --- competition rows --- */
.mem-rows { display: flex; flex-direction: column; gap: 0; container-type: inline-size; }
.mem-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr) minmax(0, .95fr) minmax(0, 1.1fr) auto;
  gap: 14px 18px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.mem-row:first-child { padding-top: 0; }
.mem-row:last-child { border-bottom: 0; padding-bottom: 4px; }
.mem-row[hidden] { display: none; }
.mem-cell { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.mem-lbl {
  display: none; margin: 0;
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.mem-cell-name b { font-size: 15.5px; font-weight: 800; color: var(--navy); line-height: 21px; }
.mem-cell-name .fine { margin: 0; }
.mem-date { font-size: 14.5px; color: var(--navy); }
.mem-filerow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 14px; color: var(--ink); }
.mem-meter { width: 100%; max-width: 210px; }
.mem-shut { margin: 0; max-width: 22ch; }
.mem-cell-act { align-items: flex-end; gap: 8px; }
.mem-row.is-urgent { background: linear-gradient(90deg, var(--tint-red), transparent 42%); }

.mem-people {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border: 0; background: none; padding: 4px 0; margin: 0;
  font: inherit; font-size: 14px; color: var(--navy); cursor: pointer;
  text-align: left; min-height: 34px;
}
.mem-people:hover { color: var(--brand-blue); }
.mem-people:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 3px; border-radius: 6px; }
.mem-av {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--mid-blue); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .3px;
  display: grid; place-items: center;
}
.mem-av + .mem-av { margin-left: -12px; box-shadow: 0 0 0 2px #fff; }
.mem-none { margin: 0; padding: 22px 0; color: var(--ink-soft); font-size: 14.5px; text-align: center; }
.mem-none[hidden] { display: none; }

.mem-check { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); cursor: pointer; }

/* --- rules --- */

/* --- support --- */
.mem-sup { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.mem-sup .btn { justify-content: center; }
.mem-sup .fine { margin: 2px 0 0; }

/* --- floating tips button --- */
.mem-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 45;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px; min-height: 48px;
  border: 0; border-radius: 999px;
  background: var(--navy); color: #fff; font: inherit; font-weight: 800;
  box-shadow: 0 10px 28px rgba(22, 55, 79, .3); cursor: pointer;
}
.mem-fab:hover { background: var(--navy-deep); }
.mem-fab:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.mem-fab .ic { width: 19px; height: 19px; }

/* ------------------------------ responsive ------------------------------ */
@media (max-width: 1100px) {
  /* Scoped to the member page so the other 18 headers keep their single row. */
  .mem-page .header { flex-wrap: wrap; row-gap: 10px; }
  .mem-page .header-titles { flex: 1 1 auto; }
  .mem-page .header-actions { margin-left: auto; }
  .mem-search { order: 5; flex: 1 1 100%; width: 100%; max-width: none; }
  .mem-search .input { width: 100%; min-width: 0; }
}

@media (max-width: 940px) {
  /* The video menu becomes a sheet anchored to the top of the screen. */
  .vidmenu-panel {
    position: fixed; top: 12px; right: 12px; left: 12px;
    width: auto; max-height: calc(100dvh - 24px);
  }
  .vidmenu-list { max-height: calc(100dvh - 230px); }
  /* beats .header-actions .icon-btn:not(.hamburger) { display: none } */
  .mem-page .header-actions .vidmenu-panel .vidmenu-x { display: grid; }
}

/* The rows sit in a column that is far narrower than the viewport, so they
   respond to their own width rather than to the screen. */
@container (max-width: 1000px) {
  .mem-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1fr) auto; }
  .mem-row .mem-cell-files { grid-column: 1 / -1; }
  .mem-meter { max-width: none; }
}

@container (max-width: 780px) {
  .mem-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--line); border-radius: var(--r-card);
    padding: 15px 16px; margin-bottom: 10px;
  }
  .mem-row:first-child { padding-top: 15px; }
  .mem-row:last-child { padding-bottom: 15px; margin-bottom: 0; }
  .mem-lbl { display: block; }
  .mem-cell-files, .mem-cell-act { grid-column: 1 / -1; }
  .mem-cell-act { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
  .mem-cell-act .mem-lbl { flex: 1 1 100%; }
  .mem-cell-act { gap: 10px; }
  .mem-cell-act .btn { flex: 0 1 auto; justify-content: center; }
  .mem-shut { max-width: none; }
}

@container (max-width: 560px) {
  .mem-row { grid-template-columns: 1fr 1fr; }
  .mem-cell-name { grid-column: 1 / -1; }
}

@container (max-width: 430px) {
  .mem-row { grid-template-columns: 1fr; }
  .mem-cell-act .btn { flex: 1 1 100%; }
}

@media (max-width: 720px) {
  .mem-head-act { width: 100%; }
  .mem-head-act .btn { flex: 1 1 auto; justify-content: center; }
  .mem-ph-pad { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 560px) {
  .mem-fab { right: 12px; bottom: 12px; padding: 11px 15px; }
  .mem-tabs { gap: 6px; }
  .mem-tab { flex: 1 1 auto; text-align: center; }
  .vidmenu-btn .lbl-full { display: none; }
  .vidmenu-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
}

@media (min-width: 561px) {
  .vidmenu-btn .lbl-short { display: none; }
}

@media (max-width: 420px) {
  .mem-fab span:not(.ic) { display: none; }
  .mem-fab { padding: 13px; border-radius: 50%; }
}

/* Page 19: [hidden] must beat the stacked-row display rules on both tables. */
.md-bin-tbl tbody tr[hidden] { display: none; }

/* Page 19 fixes found in visual QA. */
.mem-page .glance { flex-basis: 540px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vidmenu-foot .linkish,
.notice-list .linkish,
.mem-page .footer .linkish { display: inline-flex; align-items: center; gap: 6px; }
.vidmenu-foot .linkish .ic,
.notice-list .linkish .ic { flex: 0 0 15px; width: 15px; height: 15px; }
.notice-list .linkish { margin-top: 5px; }

@media (max-width: 1240px) {
  .mem-page .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); flex-basis: 420px; }
}
@media (max-width: 560px) {
  .mem-page .glance { grid-template-columns: 1fr; }
}

/* Every inline "…→" link on the member page uses the same small arrow. */
.mem-page .linkish { display: inline-flex; align-items: center; gap: 6px; }
.mem-page .linkish .ic { flex: 0 0 15px; width: 15px; height: 15px; }

/* Page 19: the storage card sits full width, so its header button never wraps. */
.md-bin .card-head .btn { white-space: nowrap; }

/* Page 19: the storage actions cell holds a button plus two icon buttons —
   .icon-btn is display:grid, so it needs a flex row to sit inline. */
@media (min-width: 721px) { .md-bin-tbl td.md-c-act { text-align: right; } }
.md-bin-tbl td.md-c-act .icon-btn { display: inline-grid; vertical-align: middle; margin-left: 6px; }
.md-bin-tbl td.md-c-act .btn { vertical-align: middle; }
.md-bin .mem-ph { margin: 0; padding: 0 20px 18px; }

@media (max-width: 720px) {
  .md-bin .mem-ph { padding-left: 16px; padding-right: 16px; }
}

/* =====================================================================
   28i. DASHBOARD REDESIGN OPTIONS (member-dashboard-a / -b)
   Two alternative layouts for the member dashboard. Both reuse the
   portal shell, tokens and buttons unchanged — only the arrangement of
   the page body differs. Scoped to .mem-a / .mem-b so neither can
   affect any existing page.
   ===================================================================== */

/* ---- shared by both options ---------------------------------------- */
.mem-a .content,
.mem-b .content { padding-top: 22px; }

.opt-flag {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 11px;
  background: var(--tint-purple); border: 1px solid #E4D3E3;
  color: var(--ink-purple); margin-bottom: 20px;
}
.opt-flag b { font-weight: 800; }
.opt-flag p { margin: 0; font: 400 12.5px/1.5 var(--font-fine); color: var(--ink-purple); }
.opt-flag .opt-switch { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .opt-flag .opt-switch { margin-left: 0; width: 100%; }
  .opt-flag .opt-switch .btn { flex: 1 1 auto; justify-content: center; }
}

/* greeting + inline stats -------------------------------------------- */
.a-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px 24px; flex-wrap: wrap; margin-bottom: 18px;
}
.a-hello h2 { margin: 0; font: 800 26px/1.2 var(--font); color: var(--navy); letter-spacing: -.2px; }
.a-hello p { margin: 5px 0 0; font: 300 14.5px/1.5 var(--font); color: var(--ink); }
.a-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.a-stat {
  display: flex; flex-direction: column; gap: 5px; min-width: 132px;
  padding: 11px 14px 12px; background: #fff;
  border: 1px solid var(--line); border-radius: 12px;
}
.a-stat .eyebrow { margin: 0; font-size: 10px; }
.a-stat b { font: 800 19px/1 var(--font); color: var(--navy); }
.a-stat b span { font: 300 12.5px/1 var(--font); color: var(--ink-soft); margin-left: 3px; }
.a-stat .meter { height: 4px; margin-top: 1px; }

/* the single next action --------------------------------------------- */
.a-next {
  display: grid; grid-template-columns: 46px 1fr auto; gap: 0 16px;
  align-items: center; padding: 18px 20px; margin-bottom: 22px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  border-left: 5px solid var(--amber);
  box-shadow: 0 1px 2px rgba(28, 67, 100, .05);
}
.a-next.is-urgent { border-left-color: var(--red); }
.a-next.is-done { border-left-color: var(--green); }
.a-next > .tile { width: 46px; height: 46px; border-radius: 12px; }
.a-next-txt .eyebrow { margin: 0 0 3px; }
.a-next-txt h3 { margin: 0; font: 800 17px/1.3 var(--font); color: var(--navy); }
.a-next-txt p { margin: 4px 0 0; font: 300 14px/1.55 var(--font); color: var(--ink); max-width: 62ch; }
.a-next-act { display: flex; align-items: center; gap: 10px; }

/* full-width competition cards ---------------------------------------- */
.a-sec-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px;
}
.a-sec-head h2 { margin: 0; font: 800 19px/1.2 var(--font); color: var(--navy); }
.a-sec-head .fine { margin: 0; }
.a-sec-head .a-sec-act { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.a-comps { display: flex; flex-direction: column; gap: 12px; }
.a-comp {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; box-shadow: 0 1px 2px rgba(28, 67, 100, .04);
}
.a-comp[hidden] { display: none; }
.a-comp.is-closed { background: #FBFCFE; }
.a-comp-row {
  display: grid; grid-template-columns: minmax(200px, 1.5fr) 150px 1fr auto;
  gap: 14px 20px; align-items: center;
}
.a-comp-name h3 { margin: 0; font: 800 16.5px/1.3 var(--font); color: var(--navy); }
.a-comp-name p { margin: 3px 0 0; font: 300 12.5px/1.4 var(--font); color: var(--ink-soft); }
.a-comp-when b { display: block; font: 300 14px/1.3 var(--font); color: var(--ink); }
.a-comp-when .pill { margin-top: 6px; }
.a-comp-prog p { margin: 0 0 6px; font: 300 13px/1.3 var(--font); color: var(--ink); }
.a-comp-prog p b { font-weight: 800; color: var(--navy); }
.a-comp-do { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.a-comp-more {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line);
}
.a-comp-more .mem-people { margin: 0; }

/* collapsed storage --------------------------------------------------- */
.a-store {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(28, 67, 100, .04); overflow: hidden;
}
.a-store-sum {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 18px; background: var(--tint-blue);
  border-bottom: 1px solid transparent;
}
.a-store.is-open .a-store-sum { border-bottom-color: #CFE4F5; }
.a-store-sum > .tile { flex: 0 0 auto; }
.a-store-sum-txt h2 { margin: 0; font: 800 17px/1.25 var(--font); color: var(--navy); }
.a-store-sum-txt p { margin: 3px 0 0; font: 300 13px/1.45 var(--font); color: var(--ink); }
.a-store-sum-act { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.a-store-body { padding: 4px 0 0; }
.a-store-body[hidden] { display: none; }
.a-caret { transition: transform .18s ease; }
.a-store.is-open .a-caret { transform: rotate(90deg); }

/* the three steps, demoted to one quiet row --------------------------- */
.a-steps {
  display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap;
  margin-top: 22px; padding: 14px 18px;
  background: #fff; border: 1px dashed var(--line-strong); border-radius: 13px;
}
.a-steps > b { font: 800 13.5px/1.3 var(--font); color: var(--navy); }
.a-step-link { display: inline-flex; align-items: center; gap: 8px; }
.a-step-n {
  display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px;
  border-radius: 6px; font: 800 11px/1 var(--font); color: #fff;
}
.a-step-n.g { background: var(--green); }
.a-step-n.b { background: var(--brand-blue); }
.a-step-n.p { background: var(--purple); }
.a-steps .a-step-link a { font: 300 13.5px/1.3 var(--font); }
.a-steps .a-sep { color: var(--line-strong); }

@media (max-width: 1100px) {
  .a-comp-row { grid-template-columns: 1fr 1fr; }
  .a-comp-do { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 620px) {
  .a-top { align-items: stretch; }
  .a-stats { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .a-stat { min-width: 0; }
  .a-next { grid-template-columns: 1fr; gap: 12px; }
  .a-next-act { flex-direction: column; align-items: stretch; }
  .a-next-act .btn { width: 100%; justify-content: center; }
  .a-comp-row { grid-template-columns: 1fr; }
  .a-comp-do { flex-direction: column; align-items: stretch; }
  .a-comp-do .btn { width: 100%; justify-content: center; }
  .a-store-sum-act { width: 100%; }
  .a-store-sum-act .btn { flex: 1 1 auto; justify-content: center; }
  .a-sec-head .a-sec-act { width: 100%; }
  .a-sec-head .a-sec-act .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 620px) {
  .a-steps .a-sep { display: none; }
}
@media (max-width: 420px) {
  .a-stats { grid-template-columns: 1fr 1fr; }
  .a-stat b { font-size: 17px; }
}

/* =====================================================================
   Option B — two-pane workspace
   ===================================================================== */
.b-strip {
  display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 16px;
  background: var(--navy); border-radius: 14px; color: #fff;
}
.b-strip h2 { margin: 0; font: 800 18px/1.2 var(--font); color: #fff; }
.b-strip .b-strip-sub { margin: 3px 0 0; font: 300 13px/1.4 var(--font); color: var(--navy-soft); }
.b-mini { display: flex; gap: 22px; flex-wrap: wrap; margin-left: auto; }
.b-mini-i .eyebrow { margin: 0 0 3px; color: var(--navy-soft); font-size: 9.5px; }
.b-mini-i b { font: 800 17px/1 var(--font); color: #fff; }
.b-mini-i b span { font: 300 12px/1 var(--font); color: var(--navy-soft); margin-left: 2px; }
.b-mini-i .meter { width: 96px; height: 4px; margin-top: 6px; background: rgba(255, 255, 255, .22); }

.b-wrap { display: grid; grid-template-columns: 316px minmax(0, 1fr); gap: 16px; align-items: start; }

.b-list {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; box-shadow: 0 1px 2px rgba(28, 67, 100, .04);
}
.b-list-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.b-list-head h2 { margin: 0; font: 800 15px/1.2 var(--font); color: var(--navy); }
.b-list-head .fine { margin: 3px 0 0; }
.b-items { display: flex; flex-direction: column; }
.b-item {
  display: grid; grid-template-columns: 8px 1fr auto; gap: 10px;
  align-items: center; width: 100%; text-align: left;
  padding: 13px 14px; background: none; border: 0;
  border-bottom: 1px solid var(--line); cursor: pointer;
  font: inherit; color: inherit;
  transition: background .14s ease;
}
.b-item[hidden] { display: none; }
.b-item:last-child { border-bottom: 0; }
.b-item:hover { background: #F7FAFD; }
.b-item.is-sel { background: var(--tint-blue); }
.b-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-soft); }
.b-dot.red { background: var(--red); }
.b-dot.amber { background: var(--amber); }
.b-dot.green { background: var(--green); }
.b-item-txt strong { display: block; font: 800 14px/1.3 var(--font); color: var(--navy); }
.b-item-txt span { display: block; font: 300 12px/1.4 var(--font); color: var(--ink-soft); margin-top: 2px; }
.b-item-meta { font: 300 11.5px/1.3 var(--font); color: var(--ink-soft); text-align: right; white-space: nowrap; }
.b-item.is-sel .b-item-meta { color: var(--ink); }
.b-list-foot { padding: 12px 14px; border-top: 1px solid var(--line); }
.b-list-foot .btn { width: 100%; justify-content: center; }

.b-pane {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; box-shadow: 0 1px 2px rgba(28, 67, 100, .04);
}
.b-tabs {
  display: flex; gap: 4px; padding: 10px 14px 0; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); background: #FBFCFE;
}
.b-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px 10px; border: 0; background: none; cursor: pointer;
  font: 300 13.5px/1 var(--font); color: var(--ink);
  border-bottom: 3px solid transparent; margin-bottom: -1px;
  border-radius: 8px 8px 0 0; min-height: 44px;
}
.b-tab > span:not(.b-cnt) { white-space: nowrap; }
.b-tab .ic { width: 17px; height: 17px; flex: 0 0 auto; color: var(--ink-soft); }
.b-tab.is-on .ic { color: var(--brand-blue); }
.b-tab:hover { background: #F1F5FA; }
.b-tab.is-on { font-weight: 800; color: var(--navy); border-bottom-color: var(--brand-blue); }
.b-tab .b-cnt {
  display: inline-grid; place-items: center; min-width: 19px; height: 19px;
  padding: 0 6px; border-radius: 999px; background: var(--amber); color: #fff;
  font: 800 10.5px/1 var(--font);
}
.b-panel { padding: 18px 20px 20px; }
.b-panel[hidden] { display: none; }

.b-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.b-head h3 { margin: 0; font: 800 20px/1.25 var(--font); color: var(--navy); }
.b-head p { margin: 4px 0 0; font: 300 13.5px/1.5 var(--font); color: var(--ink-soft); }
.b-head-act { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.b-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.b-fact { padding: 12px 14px; background: var(--page); border: 1px solid var(--line); border-radius: 11px; }
.b-fact .eyebrow { margin: 0 0 4px; font-size: 10px; }
.b-fact b { font: 800 15.5px/1.25 var(--font); color: var(--navy); }
.b-fact .pill { margin-top: 7px; }
.b-fact .meter { margin-top: 8px; }

.b-rows { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.b-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 130px auto;
  gap: 12px; align-items: center; padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.b-row:last-child { border-bottom: 0; }
.b-row:nth-child(even) { background: #FBFCFE; }
.b-row-n { font: 800 12px/1 var(--font); color: var(--ink-soft); }
.b-row-t strong { display: block; font: 800 14px/1.3 var(--font); color: var(--navy); }
.b-row-t span { display: block; font: 300 12px/1.4 var(--font); color: var(--ink-soft); margin-top: 2px; }
.b-row-a { display: flex; gap: 6px; justify-content: flex-end; }

.b-empty { padding: 34px 20px; text-align: center; }
.b-empty p { margin: 8px 0 0; font: 300 14px/1.55 var(--font); color: var(--ink-soft); }

.b-side-note { margin-top: 16px; }

@media (max-width: 1100px) {
  .b-wrap { grid-template-columns: 1fr; }
  .b-list { order: -1; }
  .b-facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .b-strip { flex-direction: column; align-items: flex-start; }
  .b-mini { margin-left: 0; gap: 14px; }
  .b-mini-i .meter { width: 74px; }
  .b-facts { grid-template-columns: 1fr; }
  .b-head-act { margin-left: 0; width: 100%; }
  .b-head-act .btn { flex: 1 1 auto; justify-content: center; }
  .b-row { grid-template-columns: 24px 1fr; }
  .b-row-when { grid-column: 2; }
  .b-row-a { grid-column: 1 / -1; justify-content: stretch; }
  .b-row-a .btn { flex: 1 1 auto; justify-content: center; }
  .b-tabs { padding-left: 8px; padding-right: 8px; }
  .b-tab { flex: 1 1 auto; justify-content: center; padding-left: 8px; padding-right: 8px; }
  .b-panel { padding: 16px 14px 18px; }
}

/* Storage-table file name cell: icon + name on one line (Options A and B). */
.md-fname { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.md-fname .ic { width: 17px; height: 17px; flex: 0 0 auto; color: var(--ink-soft); }

/* =====================================================================
   28j. DASHBOARD REDESIGN OPTIONS C AND D (member-dashboard-c / -d)
   Both reuse the components the client liked from Options A and B
   unchanged — .a-next (Do this next), .a-store (blue storage bar),
   .a-steps (New here? row) and the coloured urgency dots. Only the way
   the competitions themselves are presented differs.
   Scoped to .mem-c / .mem-d so no existing page is affected.
   ===================================================================== */
.mem-c .content,
.mem-d .content { padding-top: 22px; }

/* ---------------------------------------------------------------------
   Option C — vertical timeline, one competition open at a time
   --------------------------------------------------------------------- */
.c-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.c-head h2 { margin: 0; font: 800 19px/1.2 var(--font); color: var(--navy); }
.c-head .fine { margin: 0; }
.c-head .c-act { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.c-line {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(28, 67, 100, .04); overflow: hidden;
}
.c-item { border-bottom: 1px solid var(--line); }
.c-item[hidden] { display: none; }
.c-item:last-child { border-bottom: 0; }

.c-sum {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 132px auto;
  gap: 0 14px; align-items: center; width: 100%; text-align: left;
  padding: 15px 18px; background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; min-height: 44px;
  transition: background .14s ease;
}
.c-sum:hover { background: #F7FAFD; }
.c-item.is-open > .c-sum { background: var(--tint-blue); }

/* the rail: a dot with a connector line running through it */
.c-rail { position: relative; align-self: stretch; display: grid; place-items: center; }
.c-rail::before {
  content: ""; position: absolute; top: -16px; bottom: -16px; left: 50%;
  width: 2px; margin-left: -1px; background: var(--line);
}
.c-item:first-child .c-rail::before { top: 50%; }
.c-item:last-child .c-rail::before { bottom: 50%; }
.c-dot {
  position: relative; z-index: 1; width: 13px; height: 13px; border-radius: 50%;
  background: var(--ink-soft); box-shadow: 0 0 0 4px #fff;
}
.c-item.is-open .c-dot { box-shadow: 0 0 0 4px var(--tint-blue); }
.c-dot.red { background: var(--red); }
.c-dot.amber { background: var(--amber); }
.c-dot.green { background: var(--green); }

.c-name strong { display: block; font: 800 16px/1.3 var(--font); color: var(--navy); }
.c-name span { display: block; font: 300 12.5px/1.4 var(--font); color: var(--ink-soft); margin-top: 3px; }
.c-when b { display: block; font: 300 13.5px/1.3 var(--font); color: var(--ink); white-space: nowrap; }
.c-when .pill { margin-top: 5px; }
.c-open { display: flex; align-items: center; gap: 9px; justify-content: flex-end; }
.c-open .c-prog { width: 132px; }
.c-open .c-prog p { margin: 0 0 6px; font: 300 12px/1.3 var(--font); color: var(--ink-soft); text-align: right; white-space: nowrap; }
.c-caret { transition: transform .18s ease; color: var(--ink-soft); }
.c-item.is-open .c-caret { transform: rotate(90deg); }

.c-body { padding: 2px 18px 18px 66px; }
.c-body[hidden] { display: none; }
.c-body-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.c-rows { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.c-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 108px auto;
  gap: 10px 14px; align-items: center; padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}
.c-row:last-child { border-bottom: 0; }
.c-row-n { font: 800 12px/1 var(--font); color: var(--ink-soft); }
.c-row-t strong { display: block; font: 800 13.5px/1.3 var(--font); color: var(--navy); }
.c-row-t span { display: block; font: 300 12px/1.4 var(--font); color: var(--ink-soft); margin-top: 2px; }
.c-row-a { display: flex; gap: 6px; justify-content: flex-end; }
.c-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 13px; }
.c-foot .mem-people { margin: 0; }

@media (max-width: 1100px) {
  .c-open .c-prog p { white-space: normal; }
  .c-sum { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .c-open { grid-column: 2 / -1; justify-content: flex-start; margin-top: 10px; }
  .c-open .c-prog p { text-align: left; }
}
@media (max-width: 620px) {
  .c-sum { grid-template-columns: 26px minmax(0, 1fr); padding: 14px; }
  .c-when { grid-column: 2; margin-top: 8px; }
  .c-open { grid-column: 1 / -1; flex-direction: column; align-items: stretch; }
  .c-open .c-prog { width: auto; }
  .c-open .btn { width: 100%; justify-content: center; }
  .c-caret { display: none; }
  .c-head .c-act { width: 100%; }
  .c-head .c-act .btn { flex: 1 1 auto; justify-content: center; }
  .c-body { padding: 2px 14px 16px; }
  .c-row { grid-template-columns: 1fr; }
  .c-row-n { display: none; }
  .c-row-a { justify-content: stretch; }
  .c-row-a .btn { flex: 1 1 auto; justify-content: center; }
  .c-body-act .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------------------------------------------------------------------
   Option D — competition tiles, with a slide-in panel for the detail
   --------------------------------------------------------------------- */
.d-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 14px;
}
.d-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(28, 67, 100, .04); overflow: hidden;
}
.d-card[hidden] { display: none; }
.d-card .d-strip { height: 4px; background: var(--ink-soft); }
.d-card[data-state="attention"] .d-strip { background: var(--red); }
.d-card[data-state="open"] .d-strip { background: var(--amber); }
.d-card[data-state="complete"] .d-strip { background: var(--green); }
.d-card.is-closed { background: #FBFCFE; }
.d-body { padding: 16px 17px 0; flex: 1 1 auto; }
.d-title { display: flex; align-items: flex-start; gap: 9px; }
.d-title .c-dot { margin-top: 6px; box-shadow: none; }
.d-title h3 { margin: 0; font: 800 16px/1.3 var(--font); color: var(--navy); }
.d-title p { margin: 3px 0 0; font: 300 12.5px/1.4 var(--font); color: var(--ink-soft); }
.d-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 13px 0 0; }
.d-meta .eyebrow { margin: 0; }
.d-meta b { font: 300 13.5px/1.3 var(--font); color: var(--ink); }
.d-prog { margin-top: 11px; }
.d-prog p { margin: 0 0 6px; font: 300 13px/1.3 var(--font); color: var(--ink); }
.d-prog p b { font-weight: 800; color: var(--navy); }
.d-who { margin-top: 12px; }
.d-who .mem-people { margin: 0; }
.d-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 14px 17px 16px; margin-top: 14px;
}
.d-foot .btn { flex: 1 1 auto; justify-content: center; }

/* the slide-in detail panel */
.d-panel {
  margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh;
  width: min(560px, 100vw); max-width: 100vw;
  border: 0; border-radius: 0; padding: 0;
  background: var(--page); color: var(--ink);
  box-shadow: -14px 0 44px rgba(22, 55, 79, .22);
}
.d-panel::backdrop { background: rgba(22, 55, 79, .44); }
.d-panel[open] { display: flex; flex-direction: column; animation: d-slide .2s ease-out; }
@keyframes d-slide { from { transform: translateX(28px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .d-panel[open] { animation: none; } }
.d-panel-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 20px; background: #fff; border-bottom: 1px solid var(--line);
}
.d-panel-head h2 { margin: 0; font: 800 18px/1.25 var(--font); color: var(--navy); }
.d-panel-head p { margin: 4px 0 0; font: 300 13px/1.45 var(--font); color: var(--ink-soft); }
.d-panel-head .icon-btn { margin-left: auto; flex: 0 0 auto; }
.d-panel-body { padding: 18px 20px; overflow: auto; flex: 1 1 auto; }
.d-panel-foot {
  display: flex; gap: 9px; flex-wrap: wrap;
  padding: 14px 20px; background: #fff; border-top: 1px solid var(--line);
}
.d-panel-foot .btn { flex: 1 1 auto; justify-content: center; }
.d-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.d-fact { background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; }
.d-fact .eyebrow { margin: 0 0 4px; }
.d-fact b { font: 800 15px/1.25 var(--font); color: var(--navy); }
.d-fact .pill { margin-top: 7px; }

@media (max-width: 560px) {
  .d-facts { grid-template-columns: 1fr; }
  .d-panel-foot { flex-direction: column-reverse; }
  .d-panel-foot .btn { width: 100%; }
}

/* ======================================================================
   §28k  MEMBER DASHBOARD — original layout restore
   Account menu in the header, hero stat header row, expandable
   "Needs your attention" rows, help FAB count.
   ====================================================================== */

/* ------------------------- header account menu ------------------------- */
.acct { position: relative; }
.acct-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 10px 5px 5px; min-height: 40px;
  background: #fff; border: 1px solid var(--line-strong); border-radius: 999px;
  font: inherit; font-weight: 800; color: var(--navy); cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.acct-btn:hover { background: var(--page); border-color: var(--navy-soft); }
.acct-btn:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.acct-av {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 999px;
  background: var(--navy); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; letter-spacing: .3px;
}
.acct-name { font-size: 14px; white-space: nowrap; }
.acct-chev { width: 15px; height: 15px; color: var(--ink-soft); transition: transform .18s ease; }
.acct-btn[aria-expanded="true"] .acct-chev { transform: rotate(90deg); }

.acct-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  width: 244px; padding: 8px;
  background: #fff; border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(22, 55, 79, .18);
}
.acct-menu[hidden] { display: none; }
.acct-menu-h {
  font-family: var(--font-fine); font-size: 12px; color: var(--ink-soft);
  padding: 6px 10px 8px; margin: 0; border-bottom: 1px solid var(--line);
}
.acct-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; min-height: 44px; border-radius: 10px;
  font-size: 14px; font-weight: 800; color: var(--navy); text-decoration: none;
}
.acct-item:hover { background: var(--tint-blue); color: var(--ink-blue); }
.acct-item:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: -2px; }
.acct-item .ic { width: 17px; height: 17px; flex: 0 0 17px; color: var(--ink-soft); }
.acct-item:hover .ic { color: inherit; }
.acct-out { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; }
.acct-out:hover { background: #fbeae8; color: #8e2018; }

/* video menu reduced to an icon button in the header */
.vidmenu-btn-ic { padding: 0; width: 40px; min-height: 40px; justify-content: center; }
.vidmenu-btn-ic .ic { width: 18px; height: 18px; }

/* ------------------------------ hero tweaks ---------------------------- */
.mem-hero { align-items: flex-start; }
.mem-hero .hero-main { flex: 1 1 620px; }
.mem-hero .hero-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mem-hero .hero-plan { text-transform: uppercase; letter-spacing: .4px; font-size: 11px; }
.mem-hero .glance {
  margin-top: 20px; display: grid; gap: 26px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mem-hero .stat { background: none; border: 0; padding: 0; min-width: 0; }
.stat-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.stat-top .eyebrow { margin: 0; }
.stat-x {
  margin-left: auto; font-size: 12px; font-weight: 800; letter-spacing: .3px;
  color: #cfe0ee; white-space: nowrap;
}
.mem-hero .stat .meter { margin-top: 9px; max-width: 210px; }
.mem-hero .hero-cta { flex: 0 0 auto; flex-direction: column; margin-top: 0; align-items: stretch; }
.mem-hero .hero-cta .btn { justify-content: flex-start; white-space: nowrap; }

/* --------------------- expandable "needs attention" -------------------- */
.att-row { display: block; padding: 0; }
.att-sum {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 14px 16px; min-height: 44px;
  background: none; border: 0; font: inherit; text-align: left; cursor: pointer;
  border-radius: 12px;
}
.att-sum:hover { background: var(--page); }
.att-sum:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: -2px; }
.att-txt { min-width: 0; flex: 1 1 auto; display: block; }
.att-txt b { display: block; font-size: 15px; line-height: 21px; color: var(--navy); }
.att-txt .fine { display: block; margin-top: 3px; }
.att-chev {
  width: 16px; height: 16px; flex: 0 0 16px; margin-top: 3px;
  color: var(--ink-soft); transition: transform .18s ease;
}
.att-sum[aria-expanded="true"] .att-chev { transform: rotate(90deg); }
.att-body { padding: 0 16px 16px 50px; }
.att-body[hidden] { display: none; }
.att-body .fine { margin: 0 0 9px; }

/* ------------------------------- help FAB ------------------------------ */
.fab-n {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: rgba(255, 255, 255, .22); color: #fff;
  font-size: 11px; line-height: 20px; text-align: center; font-weight: 800;
}

/* ------------------------------ responsive ----------------------------- */
@media (max-width: 1100px) {
  .mem-hero .glance { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .mem-hero .hero-cta { flex-direction: row; width: 100%; margin-top: 18px; }
  .mem-hero .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 940px) {
  .acct-name { display: none; }
  .acct-btn { padding: 5px; gap: 4px; }
}
@media (max-width: 720px) {
  .mem-hero .glance { grid-template-columns: 1fr; gap: 16px; }
  .mem-hero .stat .meter { max-width: none; }
}
@media (max-width: 560px) {
  .mem-hero .hero-cta { flex-direction: column; }
  .acct-menu { width: min(244px, calc(100vw - 32px)); }
  .att-body { padding-left: 16px; }
}

/* ---------------- competition table: header row + wider main column ----- */
.mem-page .split { grid-template-columns: minmax(0, 1fr) 312px; }
.mem-thead { display: none; }
.mem-thead > span {
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* Wins over the max-width container stanzas above because it comes later:
   keeps the single-line table down to a 700px-wide rows container. */
@container (min-width: 700px) {
  .mem-page .mem-thead {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr) minmax(0, .95fr) minmax(0, 1.1fr) auto;
    gap: 14px 18px; align-items: end;
    padding: 0 0 10px; border-bottom: 1px solid var(--line-strong);
  }
  .mem-page .mem-row {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr) minmax(0, .95fr) minmax(0, 1.1fr) auto;
    border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
    padding: 16px 0; margin-bottom: 0;
  }
  .mem-page .mem-row:first-of-type { padding-top: 16px; }
  .mem-page .mem-row:last-child { border-bottom: 0; padding-bottom: 4px; margin-bottom: 0; }
  .mem-page .mem-lbl { display: none; }
  .mem-page .mem-cell-files { grid-column: auto; }
  .mem-page .mem-cell-act {
    grid-column: auto; flex-direction: row; flex-wrap: wrap;
    align-items: center; justify-content: flex-end; gap: 8px;
  }
  .mem-page .mem-meter { max-width: 200px; }
  .mem-page .mem-shut { max-width: 22ch; }
}
.mem-page .mem-cell-act .btn-quiet { border-color: transparent; background: none; }
.mem-page .mem-cell-act .btn-quiet:hover { background: var(--page); border-color: var(--line-strong); }

/* hero stat block sits at the left of the card, as in the original */
.mem-hero .glance { max-width: 660px; }

@media (max-width: 1100px) {
  .mem-page .split { grid-template-columns: minmax(0, 1fr); }
}

/* count chip beside a card title */
.cnt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 8px; border-radius: 999px;
  background: var(--page); border: 1px solid var(--line-strong);
  font-size: 12px; font-weight: 800; color: var(--ink-soft); vertical-align: 2px;
}
/* rebalance the table columns now the actions are text-only */
@container (min-width: 700px) {
  .mem-page .mem-thead,
  .mem-page .mem-row {
    grid-template-columns:
      minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1.05fr) minmax(0, 1.05fr) auto;
    gap: 14px 16px;
  }
  .mem-page .mem-cell-act .btn { padding-left: 14px; padding-right: 14px; }
  .mem-page .mem-meter { max-width: 180px; }
}

/* final column balance so a long competition name stays on one line */
.mem-page .split { grid-template-columns: minmax(0, 1fr) 296px; }
@container (min-width: 700px) {
  .mem-page .mem-thead,
  .mem-page .mem-row {
    grid-template-columns:
      minmax(0, 1.5fr) minmax(0, .75fr) minmax(0, 1.05fr) minmax(0, .95fr) auto;
  }
  .mem-page .mem-cell-name b { font-size: 15px; }
  .mem-page .mem-meter { max-width: 155px; }
}
@media (max-width: 1100px) { .mem-page .split { grid-template-columns: minmax(0, 1fr); } }

/* ---------------- member dashboard: three steps, full width ------------- */
.mem-page .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* heading and note sit on one line above the row */
.mem-page .mem-sec-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.mem-page .mem-sec-head .h-title { margin: 0; font-size: 19px; line-height: 26px; }
.mem-page .mem-sec-head .fine { margin: 0; }

/* coloured top edge above the tinted band */
.mem-page .step-band { border-top: 3px solid transparent; margin-top: -1px; }
.mem-page .step.s1 .step-band { border-top-color: var(--green); }
.mem-page .step.s2 .step-band { border-top-color: var(--mid-blue); }
.mem-page .step.s3 .step-band { border-top-color: var(--purple); }

/* the card is an <a>, so its children must be given their own colours */
.mem-page .step-body { gap: 8px; padding: 18px 20px 20px; }
.mem-page .step-body b {
  font-size: 16px; line-height: 23px; font-weight: 800; color: var(--navy);
}
.mem-page .step-body > span:not(.linkish) {
  font-size: 14px; line-height: 21px; color: var(--ink-soft); font-weight: 300;
}
.mem-page .step-body .linkish {
  margin-top: auto; padding-top: 12px;
  font-size: 14px; font-weight: 800; text-decoration: none;
}
.mem-page .step:hover .step-body .linkish { text-decoration: underline; }
.mem-page .step.s1 .step-body .linkish { color: var(--ink-green); }
.mem-page .step.s2 .step-body .linkish { color: var(--ink-blue); }
.mem-page .step.s3 .step-body .linkish { color: var(--ink-purple); }

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

/* ---------------- competition table: alternating row bands -------------- */
/* Striping is applied by app.js (class .is-alt) rather than :nth-child, so the
   alternation stays correct after the state tabs or the search box hide rows. */
.mem-page .mem-row.is-alt { background: var(--page); }

/* Urgent rows keep their meaning through a red left rule instead of a tinted
   background, so the grey banding underneath stays readable. */
.mem-page .mem-row.is-urgent { background: none; box-shadow: inset 3px 0 0 var(--red); }
.mem-page .mem-row.is-urgent.is-alt { background: var(--page); }

@container (min-width: 700px) {
  /* Bleed the band out to the card edges. */
  .mem-page .mem-thead,
  .mem-page .mem-row {
    padding-left: 16px; padding-right: 16px;
    margin-left: -16px; margin-right: -16px;
  }
  .mem-page .mem-row.is-alt { border-radius: 10px; }
  .mem-page .mem-row.is-alt + .mem-row { border-top: 0; }
}

/* ---------------- Your competitions: slate header strip ----------------- */
#YourComps > .card-head {
  background: #607995;
  border-bottom-color: #526a84;
  border-radius: var(--r-card) var(--r-card) 0 0;
}
#YourComps > .card-head h2 { color: #fff; }
#YourComps > .card-head .fine { color: #fff; }
#YourComps > .card-head .cnt {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .38);
  color: #fff;
}
/* the ghost button needs a solid white face to stay legible on the slate */
#YourComps > .card-head .btn-ghost {
  background: #fff; border-color: #fff; color: var(--navy);
}
#YourComps > .card-head .btn-ghost:hover {
  background: #eef2f7; border-color: #eef2f7;
}

/* ---------------- header support menu ("Need a hand?") ------------------ */
.sup { position: relative; }
.sup-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: min(340px, calc(100vw - 32px));
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  box-shadow: 0 18px 44px rgba(22, 55, 79, .18);
  overflow: hidden;
}
.sup-menu[hidden] { display: none; }
.sup-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 14px 14px 16px;
  background: var(--tint-green);
  border-bottom: 1px solid var(--line);
}
.sup-head-txt { min-width: 0; flex: 1; }
.sup-h { margin: 0 0 2px; font-size: 17px; line-height: 23px; font-weight: 800; color: var(--navy); }
.sup-head .fine { margin: 0; }
.sup-head .tile {
  flex: none;
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; color: #fff;
}
.sup-head .tile .ic { width: 19px; height: 19px; }
.sup-x { flex: none; margin: -4px -4px 0 0; }
.sup-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.sup-body .btn { width: 100%; justify-content: center; }
.sup-body .fine { margin: 2px 0 0; }
.sup-btn[aria-expanded="true"] { background: var(--page); border-color: var(--line-strong); }

@media (max-width: 940px) {
  .sup-btn .lbl-full { display: none; }
  .sup-btn { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 560px) {
  .sup-menu { right: -8px; }
}

/* On phones the header button sits near the left edge, so a right-anchored
   absolute panel would hang off screen. Pin it to the viewport instead. */
@media (max-width: 560px) {
  .sup-menu {
    position: fixed; top: auto; right: 16px; left: 16px;
    width: auto;
    margin-top: 8px;
  }
}

/* The panel's own close button must survive the ≤560px rule that hides header
   icon buttons — it lives inside .header-actions but belongs to the popover. */
.mem-page .header-actions .sup-menu .sup-x { display: grid; }

/* ---------------- welcome banner: support card -------------------------- */
/* A white card inside the navy banner, under the plan buttons. */
.hero-cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-cta-row .btn { flex: 1 1 auto; justify-content: center; }

.hero-sup {
  background: var(--white);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(11, 33, 50, .22);
  width: 330px; max-width: 100%;
}
.hero-sup-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  background: var(--tint-green);
}
.hero-sup-ic {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--green); color: #fff;
}
.hero-sup-ic .ic { width: 19px; height: 19px; }
.hero-sup-copy { min-width: 0; }
.hero-sup-h {
  margin: 0 0 3px; font-size: 18px; line-height: 24px;
  font-weight: 800; color: var(--navy);
}
.hero-sup-n {
  margin: 0; font-family: var(--font-fine); font-size: 13px; line-height: 19px;
  color: var(--ink-soft);
}
.hero-sup-title {
  margin: 0; padding: 13px 16px;
  background: var(--tint-blue);
  font-family: var(--font); font-weight: 800; font-size: 13px; line-height: 17px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-blue);
  border-bottom: 1px solid var(--line);
}
.hero-sup-body { padding: 14px 16px 16px; }
.hero-sup-body .btn { width: 100%; justify-content: center; }

@media (max-width: 1100px) {
  .hero-sup { width: 100%; }
}
@media (max-width: 560px) {
  .hero-cta-row { flex-direction: column; }
  .hero-cta-row .btn { width: 100%; }
}

/* ---------------- storage: paged reveal --------------------------------- */
.md-bin-more {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 14px 0 2px;
  border-top: 1px dashed var(--line-strong);
  margin-top: 4px;
}
.md-bin-more[hidden] { display: none; }
.md-bin-count {
  margin: 0; font-family: var(--font-fine); font-size: 13px; line-height: 18px;
  color: var(--ink-soft);
}
.md-bin-more .btn .ic { transform: rotate(90deg); }

@media (max-width: 560px) {
  .md-bin-more { flex-direction: column; align-items: stretch; text-align: center; }
  .md-bin-more .btn { width: 100%; justify-content: center; }
}

/* ---------------- competition table: one shared set of columns ----------
   The heading strip and each row were separate grids, so the `auto` actions
   track measured 0 in the heading (its last span is empty) but ~215px in a
   row — every heading drifted right of the data it labelled.

   .mem-rows is now the grid and both the heading strip and every row adopt it
   with `subgrid`, so they share one set of tracks and cannot disagree. The
   actions track stays `auto`, so it sizes to the widest button pair on the
   page instead of a guessed fixed width.

   .mem-rows is itself a size container, and an element is never matched by its
   own container query — so the card is made a container too, and the rule that
   turns .mem-rows into a grid is written against the card. The card is 32px
   wider than the rows area, hence 732px here against 700px below.          */
.mem-page #YourComps { container-type: inline-size; }

@container (min-width: 732px) {
  .mem-page .mem-rows {
    display: grid; align-content: start;
    grid-template-columns:
      minmax(0, 1.35fr) minmax(0, .95fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  }
}
@container (min-width: 700px) {
  .mem-page .mem-thead,
  .mem-page .mem-row {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }
}

/* Engines without subgrid keep the old behaviour, with the actions track
   pinned so the two grids still resolve identically. */
@supports not (grid-template-columns: subgrid) {
  @container (min-width: 700px) {
    .mem-page .mem-thead,
    .mem-page .mem-row {
      grid-template-columns:
        minmax(0, 1.35fr) minmax(0, .95fr) minmax(0, 1fr) minmax(0, 1fr) 216px;
    }
  }
}
/* The date pill must not creep under the performer avatars. */
@container (min-width: 700px) {
  .mem-page .mem-cell { min-width: 0; }
  .mem-page .mem-cell-when .pill { max-width: 100%; }
}
/* Micro-labels drop to 10px so "Upload closes" stays on one line in its column
   at every container width. All five match, so the strip still reads evenly. */
.mem-thead > span { font-size: 10px; letter-spacing: .06em; white-space: nowrap; }
/* Full-width table: the status pill always sits under its count, so all four
   rows read the same way instead of some wrapping and some not. */
@container (min-width: 700px) {
  .mem-page .mem-filerow { flex-direction: column; align-items: flex-start; gap: 6px; }
  .mem-page .mem-meter { max-width: 240px; }
}

/* =====================================================================
   Add Region/Competition (p_index.php) — prefix .ar-
   ===================================================================== */
.ar-crumbs {
  display: flex; flex-wrap: wrap; gap: 10px;
  list-style: none; margin: 20px 0 0; padding: 0;
}
.ar-crumb {
  flex: 1 1 170px; min-width: 0;
  display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto;
  column-gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 11px;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
}
.ar-crumb-n {
  grid-row: 1 / 3; align-self: center;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800; color: #fff;
  background: rgba(255,255,255,.18);
}
.ar-crumb.is-on { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34); }
.ar-crumb.is-done .ar-crumb-n { background: var(--green); }
.ar-crumb-t { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--navy-soft); }
.ar-crumb-v {
  font-size: 14px; line-height: 20px; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ar-crumb-v.is-empty { color: var(--navy-soft); }

.ar-msg:empty { display: none; }
.ar-msg { margin: 18px 0 0; }

/* ---- step 1: states ---- */
.ar-states {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(206px, 1fr));
}
.ar-state {
  display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 11px;
  min-height: 56px; padding: 9px 12px; text-align: left;
  background: #fff; border: 1px solid var(--line-strong); border-radius: 12px;
  cursor: pointer; font: inherit; color: var(--ink);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.ar-state:hover { border-color: var(--green); background: var(--tint-green); }
.ar-state:focus-visible { outline: 3px solid var(--mid-blue); outline-offset: 2px; }
.ar-state-k {
  display: grid; place-items: center;
  height: 30px; border-radius: 8px;
  background: #eef1f6; color: var(--navy);
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
}
.ar-state-n { font-size: 14px; line-height: 19px; }
.ar-state.is-on { border-color: var(--green-btn); background: var(--tint-green); box-shadow: inset 0 0 0 1px var(--green-btn); }
.ar-state.is-on .ar-state-k { background: var(--green-btn); color: #fff; }

/* ---- step 2: competitions ---- */
.ar-filter { position: relative; margin-bottom: 16px; }
.ar-filter .input { padding-left: 40px; }
.ar-filter-ic {
  position: absolute; left: 13px; top: 13px;
  width: 18px; height: 18px; color: var(--ink-soft); pointer-events: none;
}
.ar-filter-n { margin: 7px 0 0; }
.ar-comps {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.ar-comp {
  display: grid; grid-template-columns: 1fr 18px; align-items: center; gap: 10px;
  min-height: 54px; padding: 11px 13px; text-align: left;
  background: #fff; border: 1px solid var(--line-strong); border-radius: 12px;
  cursor: pointer; font: inherit; color: var(--navy);
  transition: border-color .16s ease, background .16s ease;
}
.ar-comp:hover { border-color: var(--mid-blue); background: var(--tint-blue); }
.ar-comp:focus-visible { outline: 3px solid var(--mid-blue); outline-offset: 2px; }
.ar-comp.is-on { border-color: var(--brand-blue); background: var(--tint-blue); box-shadow: inset 0 0 0 1px var(--brand-blue); }
.ar-comp-n { font-size: 14px; line-height: 19px; font-weight: 800; }
.ar-comp-s { display: block; margin-top: 2px; font-size: 12px; line-height: 17px; color: var(--ink-soft); font-weight: 300; }
.ar-comp .ic { width: 18px; height: 18px; color: var(--ink-soft); }
.ar-none { margin: 0; font-size: 14px; color: var(--ink-soft); }
.ar-none[hidden], .ar-comps[hidden], .ar-filter[hidden],
.ar-empty[hidden], .ar-list[hidden], .ar-regs-head[hidden] { display: none; }

/* ---- empty states ---- */
.ar-empty {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px; border-radius: 12px;
  background: var(--tint-amber); border: 1px solid #f0dcb4;
}
.ar-empty > .ic { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; color: var(--ink-amber); }
.ar-empty-h { margin: 0 0 4px; font-size: 15px; line-height: 21px; font-weight: 800; color: var(--ink-amber); }
.ar-empty .fine { margin: 0; }

/* ---- step 3: regions ---- */
.ar-regs-head {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.ar-regs-h { margin: 0; font-size: 15px; line-height: 21px; color: var(--ink); }
.ar-regs-h span { font-weight: 800; color: var(--navy); }
.ar-list { display: grid; gap: 12px; }
.ar-reg {
  display: grid; grid-template-columns: 62px 1fr 190px; gap: 16px;
  padding: 15px; border: 1px solid var(--line-strong); border-radius: 14px; background: #fff;
}
.ar-reg.is-urgent { border-left: 4px solid var(--red); padding-left: 12px; }
.ar-logo {
  width: 62px; height: 62px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--tint-purple); color: var(--purple);
  font-size: 17px; font-weight: 800; letter-spacing: .04em;
}
.ar-reg-b { min-width: 0; }
.ar-reg-n { margin: 0 0 8px; font-size: 16px; line-height: 22px; font-weight: 800; color: var(--navy); }
.ar-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.ar-facts div { min-width: 0; }
.ar-facts dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.ar-facts dd { margin: 1px 0 0; font-size: 14px; line-height: 20px; color: var(--ink); }
.ar-facts dd.ar-genre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ar-reg-s {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  padding-left: 16px; border-left: 1px solid var(--line);
}
.ar-price { margin: 0; font-size: 20px; line-height: 24px; font-weight: 800; color: var(--navy); }
.ar-price small { font-size: 12px; font-weight: 300; color: var(--ink-soft); }
.ar-reg-s .btn { width: 100%; justify-content: center; }

/* ---- confirmation dialog ---- */
.ar-dlg { width: min(560px, calc(100vw - 32px)); }
.ar-conf-card { padding: 14px; border-radius: 12px; background: var(--page); border: 1px solid var(--line); }
.ar-conf-name { margin: 0 0 10px; font-size: 17px; line-height: 23px; font-weight: 800; color: var(--navy); }
.ar-conf-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 0; }
.ar-conf-dl dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.ar-conf-dl dd { margin: 1px 0 0; font-size: 14px; line-height: 20px; color: var(--ink); }
.ar-conf-warn {
  display: flex; gap: 9px; align-items: flex-start;
  margin: 14px 0 0; padding: 12px; border-radius: 11px;
  background: #fbeae8; color: #8e2018; font-size: 14px; line-height: 20px;
}
.ar-conf-warn .ic { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; }
.ar-note { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; }
.ar-note[hidden] { display: none; }
.ar-note .ic { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; color: var(--red); }

@media (max-width: 1100px) {
  .ar-reg { grid-template-columns: 62px 1fr; }
  .ar-reg-s {
    grid-column: 1 / -1; flex-direction: row; align-items: center;
    justify-content: space-between; flex-wrap: wrap;
    padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line);
  }
  .ar-reg-s .btn { width: auto; }
}
@media (max-width: 560px) {
  .ar-crumb { flex: 1 1 100%; }
  .ar-states, .ar-comps { grid-template-columns: 1fr; }
  .ar-reg { grid-template-columns: 1fr; }
  .ar-logo { width: 54px; height: 54px; }
  .ar-facts { flex-direction: column; gap: 8px; }
  .ar-reg-s { flex-direction: column; align-items: stretch; gap: 10px; }
  .ar-reg-s .btn { width: 100%; }
  .ar-reg-s .ar-pill-row { display: flex; justify-content: space-between; align-items: center; }
  .ar-conf-dl { grid-template-columns: 1fr; }
  .ar-regs-head .btn { width: 100%; justify-content: center; }
}

/* --tint-red / --ink-red were never defined; the red pill needs literals. */
.pill.red { background: #fbeae8; color: #8e2018; }
.pill.red .bullet { background: var(--red); }

/* --------------------------------------------------------------------------
   Cart — musicuploads/cart.php
   -------------------------------------------------------------------------- */
.crt-hero .hero-note { max-width: 66ch; }

/* progress trail: cart -> pay -> confirmation */
.crt-steps {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.crt-step {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 13px 8px 9px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
}
.crt-step-n {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
  background: rgba(255, 255, 255, .22); color: #fff;
}
.crt-step-t { font-size: 13.5px; color: rgba(255, 255, 255, .82); }
.crt-step.is-now { background: #fff; border-color: #fff; }
.crt-step.is-now .crt-step-n { background: var(--green); color: #fff; }
.crt-step.is-now .crt-step-t { color: var(--navy); font-weight: 800; }

.crt-msg:empty { display: none; }
.crt-msg { margin-bottom: 16px; }

/* two-column shell */
.crt-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 372px;
  gap: 20px; align-items: start;
}
.crt-col { display: grid; gap: 20px; min-width: 0; }
.crt-side { display: grid; gap: 20px; min-width: 0; position: sticky; top: 88px; }

/* ---- item rows ---- */
.crt-list { list-style: none; margin: 0; padding: 0; display: grid; }
.crt-row {
  display: grid;
  grid-template-columns: 26px 46px minmax(0, 1fr) auto auto;
  align-items: center; gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.crt-row:first-child { padding-top: 2px; }
.crt-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.crt-n {
  font-size: 12px; font-weight: 800; color: var(--ink-soft);
  text-align: center;
}
.crt-logo {
  width: 46px; height: 46px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--tint-blue); color: var(--ink-blue);
  font-size: 14px; font-weight: 800; letter-spacing: .04em;
}
.crt-main { min-width: 0; }
.crt-name {
  margin: 0; font-size: 15.5px; line-height: 21px;
  font-weight: 800; color: var(--navy);
  overflow-wrap: anywhere;
}
.crt-comp {
  margin: 3px 0 0; font-size: 13.5px; color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.crt-dot { padding: 0 4px; }
.crt-facts {
  margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: 12.5px; color: var(--ink-soft);
}
.crt-fact b { font-weight: 800; color: var(--ink); margin-right: 5px; }
.crt-price { text-align: right; display: grid; gap: 2px; }
.crt-amt { font-size: 17px; font-weight: 800; color: var(--navy); }
.crt-price .fine { white-space: nowrap; }
.crt-act { display: flex; justify-content: flex-end; }
.crt-act .btn { min-height: 44px; }

/* ---- empty state (new — the legacy page had none) ---- */
.crt-empty { text-align: center; padding: 26px 12px 30px; }
.crt-empty[hidden] { display: none; }
.crt-empty-ic {
  width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 14px;
  display: grid; place-items: center;
  background: var(--tint-blue); color: var(--ink-blue);
}
.crt-empty-ic .ic { width: 26px; height: 26px; }
.crt-empty-h { font-size: 17px; color: var(--navy); margin: 0 0 6px; }
.crt-empty-p {
  margin: 0 auto 18px; max-width: 46ch;
  font-size: 14.5px; color: var(--ink-soft);
}

/* ---- coupon ---- */
.crt-coupon { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.crt-coupon .field { flex: 1 1 240px; min-width: 0; margin: 0; }
.crt-coupon .btn { flex: 0 0 auto; }
.crt-coupon-note { margin: 12px 0 0; }
.crt-coupon-note[hidden] { display: none; }

/* ---- payment method ---- */
.crt-eyebrow { margin: 18px 0 9px; }
.crt-fee-note { margin-bottom: 4px; }
.crt-pays { display: grid; gap: 10px; }
.crt-pay {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center; gap: 11px;
  width: 100%; text-align: left;
  padding: 11px 13px;
  background: var(--white);
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  font-family: inherit; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.crt-pay:hover { border-color: var(--navy-soft); background: #fbfcfe; }
.crt-pay-ic {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--page); color: var(--navy);
}
.crt-pay-ic .ic { width: 18px; height: 18px; }
.crt-pay-t { font-size: 14.5px; font-weight: 800; color: var(--navy); }
.crt-pay-f { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.crt-pay.is-on {
  border-color: var(--purple);
  background: var(--tint-purple);
  box-shadow: 0 0 0 3px rgba(115, 60, 113, .12);
}
.crt-pay.is-on .crt-pay-ic { background: var(--purple); color: #fff; }
.crt-pay.is-on .crt-pay-f { color: var(--ink-purple); }
.crt-pay:focus-visible { outline: 2px solid var(--mid-blue); outline-offset: 2px; }

/* ---- totals ---- */
.crt-tot {
  margin: 16px 0 14px; padding: 4px 14px;
  background: var(--page); border: 1px solid var(--line); border-radius: 12px;
}
.crt-tot[hidden] { display: none; }
.crt-tot-r {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.crt-tot-r:last-child { border-bottom: 0; }
.crt-tot-r .title { font-size: 14px; color: var(--ink); }
.crt-tot-r .title .fine { display: inline; margin-left: 4px; }
.crt-tot-r .sum-amount { font-size: 15px; font-weight: 800; color: var(--navy); white-space: nowrap; }
.crt-tot-r.is-total { padding: 13px 0; }
.crt-tot-r.is-total .title { font-size: 15px; font-weight: 800; color: var(--navy); }
.crt-tot-r.is-total .sum-amount { font-size: 20px; color: var(--ink-green); }

.crt-go-note { margin: 9px 0 0; text-align: center; }
.crt-trust { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.crt-trust .fine { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 7px; }
.crt-trust .fine .ic { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 2px; }
.crt-brands {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0;
}
.crt-brands span {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong); border-radius: 6px;
  padding: 4px 8px;
}
.crt-help .h-card { margin-bottom: 6px; }
.crt-help .linkish { margin-top: 10px; display: inline-flex; }

/* current-page state on the header cart button */
.mem-cart.is-current { border-color: var(--navy-soft); background: #eef4f9; }

/* ---- remove-confirmation dialog ---- */
.crt-dlg { width: min(460px, calc(100vw - 32px)); }
.crt-conf-name {
  margin: 0 0 8px; font-size: 16px; font-weight: 800; color: var(--navy);
  overflow-wrap: anywhere;
}

@media (max-width: 1240px) {
  .crt-grid { grid-template-columns: minmax(0, 1fr) 330px; }
}
@media (max-width: 1100px) {
  .crt-grid { grid-template-columns: 1fr; }
  .crt-side { position: static; }
}
@media (max-width: 720px) {
  .crt-row {
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-areas:
      "logo main"
      "logo price"
      "act  act";
    gap: 4px 12px;
    padding: 16px 0;
  }
  .crt-n { display: none; }
  .crt-logo { grid-area: logo; width: 40px; height: 40px; font-size: 13px; align-self: start; }
  .crt-main { grid-area: main; }
  .crt-price { grid-area: price; text-align: left; margin-top: 8px; }
  .crt-price .fine { white-space: normal; }
  .crt-act { grid-area: act; margin-top: 12px; }
  .crt-act .btn { width: 100%; justify-content: center; }
}
@media (max-width: 560px) {
  .crt-step { flex: 1 1 100%; }
  .crt-coupon { flex-direction: column; align-items: stretch; }
  .crt-coupon .btn { width: 100%; justify-content: center; }
  .crt-pay { grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: "ic t" "ic f"; gap: 2px 10px; }
  .crt-pay-ic { grid-area: ic; width: 30px; height: 30px; align-self: center; }
  .crt-pay-t { grid-area: t; }
  .crt-pay-f { grid-area: f; white-space: normal; }
  .crt-empty .btn { width: 100%; justify-content: center; }
}

/* cart — disabled primary action (empty cart) */
.btn.is-disabled,
.btn.is-disabled:hover {
  background: #c9d3cd; border-color: #c9d3cd; color: #f4f7f5;
  cursor: not-allowed; box-shadow: none;
}
@media (max-width: 560px) {
  #CrtItemsCard .set-head { flex-wrap: wrap; }
  #CrtItemsCard .set-head .pill { flex-basis: 100%; margin-left: 0; }
}

/* ===================== thank-you.php — order confirmation ===================== */
.crt-step.is-done { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.30); }
.crt-step.is-done .crt-step-n { background: var(--green); color: #fff; }
.crt-step.is-done .crt-step-t { color: #fff; }
.crt-step.is-done .crt-step-n .ic { width: 13px; height: 13px; }

.ty-hero .hero-note { max-width: 60ch; }
.ty-msg { margin: 0 0 18px; }
.ty-msg:empty { display: none; }

.ty-top { display: flex; gap: 16px; align-items: flex-start; padding: 4px 0 20px; }
.ty-tick {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; background: var(--tint-green, #EAF6E2); color: #3F7A1C;
  border: 2px solid #cbe7b6;
}
.ty-tick .ic { width: 26px; height: 26px; }
.ty-top-h { margin: 2px 0 6px; font-weight: 800; font-size: 18px; color: var(--navy); }
.ty-top-p { margin: 0; color: var(--ink); font-size: 14.5px; line-height: 1.6; max-width: 62ch; }

.ty-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  margin: 0 0 22px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.ty-facts > div { background: #fff; padding: 14px 16px; }
.ty-facts dt { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px; }
.ty-facts dd { margin: 0; font-weight: 800; color: var(--navy); font-size: 15.5px; }
.ty-facts .ty-paid { color: #3F7A1C; }

.ty-eyebrow { margin: 0 0 10px; }
.ty-list { list-style: none; margin: 0 0 24px; padding: 0; border: 1px solid var(--line); border-radius: 12px; }
.ty-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.ty-row:last-child { border-bottom: 0; }
.ty-row-main { flex: 1 1 auto; min-width: 0; }
.ty-row .crt-amt { flex: 0 0 auto; }

.ty-acts { display: flex; flex-wrap: wrap; gap: 12px; }
.ty-acts .btn { min-height: 44px; }
.ty-acts-note { margin: 12px 0 0; }

.ty-next { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 18px; }
.ty-next-i { display: flex; gap: 14px; align-items: flex-start; }
.ty-next-n {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-blue); color: #fff; font-weight: 800; font-size: 14px;
}
.ty-next-h { margin: 4px 0 4px; font-weight: 800; color: var(--navy); font-size: 15.5px; }
.ty-next-i .fine { margin: 0 0 8px; max-width: 66ch; }
.ty-help { margin: 0; }

@media (max-width: 1100px) { .ty-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .ty-facts { grid-template-columns: 1fr; }
  .ty-top { flex-direction: column; align-items: center; text-align: center; }
  .ty-top-p { text-align: left; }
  .ty-acts { flex-direction: column; }
  .ty-acts .btn { width: 100%; justify-content: center; }
  .ty-row { flex-wrap: wrap; }
  .ty-row .crt-amt { margin-left: 44px; }
}

/* ===================== select_plan.php — Storage plans ===================== */
.sp-hero-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.sp-hero-acts .btn { min-height: 44px; }
.sp-current .hero-sup-n { font-weight: 800; }

/* --- what every plan stores --- */
.sp-inc { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-inc-i { display: flex; gap: 14px; align-items: flex-start; }
/* .tile has no intrinsic box of its own — every use scopes one. */
.sp-inc-i .tile { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.sp-inc-i .tile .ic { width: 19px; height: 19px; }
.sp-inc-i > div { min-width: 0; }
.sp-inc-h { margin: 2px 0 4px; font-weight: 800; color: var(--navy); font-size: 15.5px; }
.sp-inc-i .fine { margin: 0; }
.sp-addon { margin: 0; }

/* --- plan cards --- */
.sp-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.sp-plan {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line-strong); border-radius: 14px; background: #fff; padding: 22px 20px 20px;
}
.sp-plan.is-featured { border: 2px solid var(--green); box-shadow: 0 10px 26px rgba(28, 67, 100, .10); }
.sp-flag {
  position: absolute; top: -13px; left: 20px; margin: 0;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--green); color: #fff; border-radius: 999px;
  padding: 5px 13px; font-size: 12px; font-weight: 800; letter-spacing: .02em;
}
.sp-flag .bullet { width: 6px; height: 6px; border-radius: 50%; background: #fff; display: inline-block; }
.sp-plan-head { margin-bottom: 14px; }
.sp-plan-n { margin: 0 0 3px; font-size: 19px; font-weight: 800; color: var(--navy); }
.sp-plan-head .fine { margin: 0; }
.sp-plan-price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.sp-from { font-size: 12.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.sp-amt { font-size: 34px; font-weight: 800; color: var(--navy); line-height: 1.05; }
.sp-per { font-size: 13px; color: var(--ink-soft); }
.sp-terms { margin: 6px 0 16px; font-size: 13px; color: var(--ink-soft); }
.sp-feats { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 11px; flex: 1 1 auto; }
.sp-feats li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink); line-height: 1.5; }
.sp-feats .ic { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; color: #3F7A1C; }
.sp-feats strong { color: var(--navy); font-weight: 800; }
.sp-feat-note { color: var(--ink-soft); font-size: 13px; }
.sp-feat-note .ic { color: var(--mid-blue); }
.sp-act { min-height: 46px; margin-top: auto; }
.sp-act-note { margin: 10px 0 0; text-align: center; }

/* --- comparison table --- */
.sp-tbl-wrap { overflow-x: auto; }
.sp-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.sp-tbl th, .sp-tbl td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.sp-tbl thead th {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #fff;
  background: #607995; border-bottom: 0; white-space: nowrap;
}
.sp-tbl thead th:first-child { border-radius: 10px 0 0 0; }
.sp-tbl thead th:last-child { border-radius: 0 10px 0 0; }
.sp-tbl tbody th { font-weight: 800; color: var(--navy); width: 30%; background: #FBFCFE; }
.sp-tbl tbody td { color: var(--ink); }
.sp-tbl tbody tr:last-child th, .sp-tbl tbody tr:last-child td { border-bottom: 0; }

/* --- before you buy --- */
.sp-faq { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 16px; }
.sp-faq dt { font-weight: 800; color: var(--navy); font-size: 15px; margin-bottom: 5px; }
.sp-faq dd { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.6; }
.sp-tc { margin: 0; }
.sp-tc .ic { width: 13px; height: 13px; vertical-align: -2px; }

/* --- walkthrough dialog --- */
.sp-dlg { width: min(760px, calc(100vw - 32px)); }
.sp-stage { position: relative; aspect-ratio: 16 / 10; background: #14202b; border-radius: 12px; overflow: hidden; }
.sp-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sp-load { position: absolute; inset: 0; display: grid; place-items: center; color: #cfe0ee; font-size: 14px; margin: 0; }

@media (max-width: 1240px) {
  .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-inc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 940px) {
  .sp-grid, .sp-inc, .sp-faq { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  /* the comparison table restructures into one block per plan row */
  .sp-tbl-wrap { overflow: visible; }
  .sp-tbl, .sp-tbl tbody, .sp-tbl tr, .sp-tbl th, .sp-tbl td { display: block; width: auto; }
  .sp-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sp-tbl tbody tr { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
  .sp-tbl tbody tr:last-child { margin-bottom: 0; }
  .sp-tbl tbody th { width: auto; background: #EFF3F8; border-bottom: 1px solid var(--line); }
  .sp-tbl tbody td { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; }
  .sp-tbl tbody td::before {
    content: attr(data-h); flex: 0 0 auto; font-size: 12px; text-transform: uppercase;
    letter-spacing: .06em; color: var(--ink-soft); font-weight: 800;
  }
  .sp-tbl tbody tr:last-child td:last-child { border-bottom: 0; }
}
@media (max-width: 560px) {
  .sp-hero-acts { flex-direction: column; }
  .sp-hero-acts .btn { width: 100%; justify-content: center; }
  .sp-amt { font-size: 30px; }
}

/* ===================== pay/apply_coupon.php — coupon step ===================== */
/* New shared notice variant. Used for a rejected coupon; reuse anywhere a
   message is a plain failure rather than a warning. */
.notice.red { background: #fbeae8; border-color: var(--red); }
.notice.red h4 { color: #8e2018; }

.cpn-form { margin-bottom: 4px; }
.cpn-form .input { text-transform: uppercase; letter-spacing: .04em; }
.cpn-form .input::placeholder { text-transform: none; letter-spacing: 0; }
.cpn-msg { margin-top: 16px; }
.cpn-msg[hidden] { display: none; }
.cpn-skip { margin: 16px 0 0; }

.cpn-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cpn-tips li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink); line-height: 1.55; }
.cpn-tips .ic { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; color: #005E9C; }

.cpn-plan {
  border: 1px solid var(--line); border-radius: 12px;
  background: #FBFCFE; padding: 13px 15px; margin-bottom: 16px;
}
.cpn-plan-n { margin: 0 0 2px; font-weight: 800; color: var(--navy); font-size: 16px; }
.cpn-plan .fine { margin: 0; }
.cpn-tot { margin-bottom: 10px; }
.cpn-disc .sum-amount { color: #3F7A1C; }
.cpn-disc[hidden] { display: none; }
.cpn-gst { margin: 0 0 16px; }
.cpn-next { margin: 0; }
.cpn-next .btn { min-height: 46px; }

@media (max-width: 560px) {
  .cpn-form .btn { width: 100%; justify-content: center; }
}
/* Tap-target floor for the hero support card and the coupon Apply button. */
.hero-sup .btn { min-height: 44px; }
.cpn-form .btn { min-height: 44px; }
/* Bug fix, applies to cart.html too: below 560px .crt-coupon becomes a column,
   so the field's `flex-basis: 240px` was being read as a 240px HEIGHT and left a
   gap between the input and the Apply button. */
@media (max-width: 560px) {
  .crt-coupon .field { flex: 0 0 auto; }
}

/* ============================================================
   PAYMENT METHOD  (pay/payment_method.php → payment-method.html)
   ============================================================ */
.pay-result{margin:0 0 18px}
.pay-result[hidden]{display:none}
#Details:empty{display:none}

.pm-opts{display:flex;flex-direction:column;gap:12px}
.pm-opt{position:relative;display:flex;align-items:flex-start;gap:14px;
  padding:16px 18px;border:1.5px solid var(--line-strong);border-radius:14px;
  background:#fff;cursor:pointer;transition:border-color .16s,box-shadow .16s,background .16s}
.pm-opt:hover{border-color:var(--navy-soft)}
.pm-opt:focus-within{outline:2px solid var(--brand-blue);outline-offset:2px}
.pm-opt.is-sel{border-color:var(--green);background:#F7FCF3;box-shadow:0 1px 0 rgba(28,67,100,.04)}
.pm-radio{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pm-ic{flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:flex;
  align-items:center;justify-content:center;margin-top:2px}
.pm-ic .ic{width:20px;height:20px}
.pm-ic.blue{background:var(--tint-blue,#DFEEFA);color:#005E9C}
.pm-ic.purple{background:#F1E5F0;color:#5C2B5A}
.pm-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.pm-name{font-weight:800;color:var(--navy);font-size:16px;line-height:1.3}
.pm-fee{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;
  gap:1px;text-align:right;padding-right:26px}
.pm-fee b{font-weight:800;color:var(--navy);font-size:15px;white-space:nowrap}
.pm-tick{position:absolute;top:16px;right:16px;width:22px;height:22px;border-radius:50%;
  background:var(--green);color:#fff;display:none;align-items:center;justify-content:center}
.pm-tick .ic{width:14px;height:14px}
.pm-opt.is-sel .pm-tick{display:flex}

.pm-pay{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.pm-pay[hidden]{display:none}
.pm-form .btn{min-height:52px}
.pm-go-note{margin-top:10px}
.pm-ppl{max-width:100%;min-height:52px;border:1.5px dashed var(--line-strong);
  border-radius:12px;display:flex;align-items:center;justify-content:center;
  padding:14px 16px;text-align:center;background:var(--page)}
.pm-ppl-ph{margin:0}

.pm-ren .field{max-width:420px}
.pm-ren-state{margin-top:8px;color:#3F7A1C;font-weight:800}
.pm-ren-state[hidden]{display:none}
.pm-ren-note{margin-top:16px}
.pm-ren-note[hidden]{display:none}
.pm-feerow .fine{display:block;font-size:12px}

@media (max-width:720px){
  .pm-opt{flex-wrap:wrap}
  .pm-txt{flex:1 1 60%}
  .pm-fee{width:100%;align-items:flex-start;text-align:left;padding-right:0;
    padding-left:54px;margin-top:2px}
}
@media (max-width:560px){
  .pm-opt{padding:14px 14px 14px 14px}
  .pm-tick{top:12px;right:12px}
  .pm-form .btn{width:100%;justify-content:center}
  .pm-ren .field{max-width:none}
}
.pm-opt.is-disabled{opacity:.5;cursor:not-allowed;background:var(--page);border-color:var(--line)}
.pm-opt.is-disabled:hover{border-color:var(--line)}
.pm-opt.is-disabled .pm-name::after{content:" — not available with auto renewal";
  font-weight:400;font-family:var(--font-fine);font-size:12px;color:var(--ink-soft)}

/* ============================================================
   CHOOSE HOW LONG  (pay/select_duration.php → select-duration.html)
   Reuses .pm-opt from the payment page.
   ============================================================ */
.dur-badge{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:20px;
  background:var(--tint-blue,#DFEEFA);color:#005E9C;font-family:var(--font-fine);
  font-weight:400;font-size:12px;line-height:1.6;vertical-align:middle;white-space:nowrap}
.dur-badge.is-best{background:#EAF6E2;color:#3F7A1C}
.dur-studio{margin-top:18px}
.dur-studio[hidden]{display:none}
.dur-opts .pm-fee b{font-size:17px}
@media (max-width:560px){
  .dur-badge{margin-left:0;margin-top:4px}
  .dur-opts .pm-name{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
}

/* ======================================================================
   UPLOAD FILE TO STORAGE (uploadTOaccount.php)
   ====================================================================== */
.ua-tile { width: 38px; height: 38px; border-radius: 11px; display: flex;
  align-items: center; justify-content: center; flex: 0 0 38px; }
.ua-tile .ic { width: 20px; height: 20px; }

.ua-quota { margin-top: 18px; max-width: 460px; }
.ua-quota-r { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
  justify-content: space-between; margin-bottom: 8px; }
.ua-quota-h { font-size: 13.5px; color: rgba(255,255,255,.82); letter-spacing: .2px; }
.ua-quota-v { font-size: 14px; color: #fff; }
.ua-quota-v b { font-weight: 800; }
.ua-quota-rem { color: #CDEBB6; }
.ua-quota .meter { background: rgba(255,255,255,.22); }
.ua-quota .fine { margin-top: 7px; color: rgba(255,255,255,.70); }

.ua-limit { margin-bottom: 20px; }
.ua-limit[hidden] { display: none; }
.ua-limit-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.ua-steps { margin-bottom: 20px; }

.ua-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px;
  align-items: start; }
.ua-col { display: grid; gap: 20px; min-width: 0; }
.ua-side { display: grid; gap: 20px; min-width: 0; }

/* --- drop zone --- */
.ua-drop { position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 8px; cursor: pointer;
  padding: 34px 20px; border: 2px dashed var(--line-strong); border-radius: 14px;
  background: var(--page); transition: border-color .16s, background .16s; }
.ua-drop:hover, .ua-drop.is-over { border-color: var(--brand-blue); background: #F4F9FD; }
.ua-drop:focus-within { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.ua-file { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ua-drop-ic { width: 58px; height: 58px; border-radius: 50%; background: var(--tint-blue);
  color: var(--ink-blue); display: flex; align-items: center; justify-content: center; }
.ua-drop-ic .ic { width: 27px; height: 27px; }
.ua-drop-h { font-size: 16px; font-weight: 800; color: var(--navy); line-height: 1.4; }
.ua-drop-link { color: var(--brand-blue); text-decoration: underline; }
.ua-drop-n { max-width: 420px; }

.ua-msg { margin-top: 16px; }
.ua-msg[hidden] { display: none; }

/* --- selected file list --- */
.ua-list { margin-top: 16px; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; }
.ua-list[hidden] { display: none; }
.ua-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border-bottom: 1px solid var(--line); background: #fff; min-width: 0; }
.ua-row:last-child { border-bottom: 0; }
.ua-row-ic { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tint-blue); color: var(--ink-blue); }
.ua-row-ic .ic { width: 16px; height: 16px; }
.ua-row.is-bad .ua-row-ic { background: #fbeae8; color: #8e2018; }
.ua-row.is-conv .ua-row-ic { background: var(--tint-amber); color: var(--ink-amber); }
.ua-row-txt { flex: 1 1 auto; min-width: 0; }
.ua-row-txt { display: block; }
.ua-row-n { display: block; font-weight: 800; color: var(--navy); font-size: 14.5px;
  overflow-wrap: anywhere; line-height: 1.35; }
.ua-row-s { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 2px;
  line-height: 1.45; }
.ua-row.is-bad .ua-row-s { color: #8e2018; }
.ua-row-p { flex: 0 0 auto; }

.ua-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  justify-content: space-between; margin-top: 14px; }
.ua-sum[hidden] { display: none; }

/* --- progress --- */
.ua-prog { margin-top: 18px; }
.ua-prog[hidden] { display: none; }
.ua-prog-top { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  justify-content: space-between; margin-bottom: 8px; }
.ua-prog-h { font-weight: 800; color: var(--navy); font-size: 14.5px; }
.ua-prog-p { font-weight: 800; color: var(--ink-blue); font-size: 14.5px; }
.ua-bar { height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.ua-bar i { display: block; height: 100%; width: 0; border-radius: 5px;
  background: var(--brand-blue); transition: width .35s linear; }
.ua-prog.is-done .ua-bar i { background: var(--green); }
.ua-prog .fine { margin-top: 8px; }

.ua-after { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ua-after[hidden] { display: none; }

/* --- side panels --- */
.ua-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ua-rules li { display: flex; gap: 11px; align-items: flex-start;
  font-size: 14px; line-height: 21px; color: var(--ink); }
.ua-rules b { font-weight: 800; color: var(--navy); }
.ua-rule-ic { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 9px;
  background: var(--tint-amber); color: var(--ink-amber);
  display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.ua-rule-ic .ic { width: 15px; height: 15px; }

.ua-next { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 11px;
  font-size: 14px; line-height: 21px; color: var(--ink); }
.ua-next b { font-weight: 800; color: var(--navy); }

.ua-foot { margin-top: 20px; max-width: 900px; }
.ua-dlg { width: min(560px, calc(100vw - 32px)); }
.ua-dlg-h { font-size: 14.5px; font-weight: 800; color: var(--navy); margin: 16px 0 4px; }
.ua-dlg-h:first-child { margin-top: 0; }

@media (max-width: 1100px) {
  .ua-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ua-drop { padding: 26px 14px; }
  .ua-drop-ic { width: 50px; height: 50px; }
  .ua-drop-ic .ic { width: 23px; height: 23px; }
  .ua-limit-btns .btn, .ua-after .btn { width: 100%; justify-content: center; }
  .ua-sum { justify-content: stretch; }
  .ua-sum .btn { width: 100%; justify-content: center; }
  .ua-row { flex-wrap: wrap; }
  .ua-row-p { width: 100%; padding-left: 42px; }
}

/* Step strip on a light page background (upload to storage) */
.ua-steps { margin: 0 0 20px; padding: 10px 12px; border-radius: 14px;
  background: var(--navy); }

/* =============================================================
   PAGE 28 — Transfer to Competition (MusicTransfer.php)
   Appended. Do not edit rules above this block.
   ============================================================= */

/* Hero selection summary */
.tc-sel { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.tc-sel-r { display: flex; flex-direction: column; gap: 3px; min-width: 150px; }
.tc-sel-k { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--navy-soft); }
.tc-sel-v { display: block; font-size: 15px; font-weight: 800; color: #fff; word-break: break-word; }

/* Step strip — needs its own navy plate on this light page */
.tc-steps { margin: 0 0 20px; padding: 10px 12px; border-radius: 14px; background: var(--navy); }
.tc-steps .crt-step { border: 0; font: inherit; text-align: left; cursor: pointer; }
.tc-steps .crt-step[disabled] { cursor: not-allowed; }
.tc-steps .crt-step.is-locked { opacity: .45; }
.tc-steps .crt-step.is-locked .btn,
.tc-steps .crt-step.is-locked button { pointer-events: none; }

.tc-pane[hidden] { display: none; }
.tc-pane > .card + .card,
.tc-pane > .card + .tc-foot,
.tc-pane > .notice + .card,
.tc-pane > div + .card { margin-top: 18px; }
.tc-pane > .card { margin-bottom: 0; }
#GetUpBoxes > .card + .card { margin-top: 18px; }
.tc-instruct { margin-bottom: 18px; }

.tc-tile { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; flex: 0 0 auto; }
.tc-tile .ic { width: 20px; height: 20px; }

/* Studio "what are you uploading" picks */
.tc-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tc-pick {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 16px; border: 1px solid var(--line-strong); border-radius: 14px;
  background: #fff; cursor: pointer; text-align: left; font: inherit;
  min-height: 44px; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.tc-pick:hover { border-color: var(--navy-soft); }
.tc-pick[aria-pressed="true"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: #fbfcfe; }
.tc-pick-ic { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; }
.tc-pick-ic .ic { width: 18px; height: 18px; }
.tc-pick-ic.green  { background: #EAF6E2; color: #3F7A1C; }
.tc-pick-ic.blue   { background: #DFEEFA; color: #005E9C; }
.tc-pick-ic.purple { background: #F1E5F0; color: #5C2B5A; }
.tc-pick-t { display: block; font-size: 15px; font-weight: 800; color: var(--navy); }
.tc-pick-n { display: block; font-size: 13px; color: var(--ink-soft); line-height: 1.45; }

/* Sub-question block */
.tc-sub { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--page); }
.tc-sub[hidden] { display: none; }
.tc-sub-q { margin: 0 0 10px; font-size: 14.5px; color: var(--ink); }
.tc-msp { border-color: var(--amber); background: #FDF1DD; }

.tc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.tc-actions-split { justify-content: space-between; }

/* Fields */
.tc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.tc-fields .field { margin: 0; }
.tc-up { text-transform: uppercase; }
.tc-help {
  margin-left: 8px; border: 0; background: none; padding: 0; font: inherit;
  font-size: 12.5px; color: var(--brand-blue); cursor: pointer; text-decoration: underline;
}
.tc-tip { margin: 8px 0 0; font-size: 13px; color: var(--ink-soft); line-height: 1.5;
  padding: 9px 11px; border-radius: 10px; background: #DFEEFA; }
.tc-tip[hidden] { display: none; }

.tc-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; align-items: center; }
.tc-foot-split { justify-content: space-between; }

/* Performer list */
.tc-perf { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.tc-perf-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 15px; border: 1px solid var(--line-strong); border-radius: 12px;
  background: #fff; cursor: pointer; text-align: left; font: inherit; min-height: 44px;
  transition: border-color .15s ease, background .15s ease;
}
.tc-perf-row:hover { border-color: var(--navy-soft); background: #fbfcfe; }
.tc-perf-row.is-sel { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.tc-perf-ic { width: 34px; height: 34px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: #DFEEFA; color: #005E9C; }
.tc-perf-ic .ic { width: 18px; height: 18px; }
.tc-perf-txt { flex: 1 1 auto; min-width: 0; }
.tc-perf-n { display: block; font-size: 15px; font-weight: 800; color: var(--navy); word-break: break-word; }
.tc-perf-s { display: block; font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.tc-perf-go { flex: 0 0 auto; color: var(--ink-soft); }
.tc-perf-go .ic { width: 18px; height: 18px; }

/* Found entries */
.tc-found { margin-top: 16px; padding: 16px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--page); }
.tc-found[hidden] { display: none; }
.tc-found-head { margin-bottom: 12px; }
.tc-found-h { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: var(--navy); }
.tc-found-q { margin: 0; font-size: 14px; color: var(--ink); }
.tc-found-n { display: inline-block; min-width: 24px; padding: 1px 7px; border-radius: 7px; background: var(--navy); color: #fff; text-align: center; }

/* Simple table */
.tc-tbl { border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; overflow: hidden; }
.tc-tbl-r { display: grid; grid-template-columns: 80px 170px minmax(0, 1fr); gap: 12px; padding: 11px 14px; border-top: 1px solid var(--line); align-items: center; }
.tc-tbl-r:first-child { border-top: 0; }
.tc-tbl-r > span { font-size: 14px; color: var(--ink); word-break: break-word; }
.tc-tbl-h { background: #607995; }
.tc-tbl-h > span { color: #fff; font-weight: 800; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; }

.tc-confirm { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; }
.tc-confirm[hidden] { display: none; }
.tc-confirm-h { margin: 0 0 4px; font-size: 15px; font-weight: 800; color: var(--navy); }
.tc-confirm-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-top: 12px; }
.tc-confirm-row .field { margin: 0; max-width: 220px; flex: 1 1 180px; }
.tc-chk { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-size: 14px; color: var(--ink); cursor: pointer; }
.tc-chk input { width: 19px; height: 19px; flex: 0 0 auto; accent-color: var(--green); }

/* Routine cards */
.tc-rt .set-head { flex-wrap: wrap; }
.tc-rt-pill { margin-left: auto; background: #e8eef4; color: var(--navy); }
.tc-rt-pill .bullet { background: var(--ink-soft); }
.tc-rt-pill[data-state="done"] { background: #EAF6E2; color: #3F7A1C; }
.tc-rt-pill[data-state="done"] .bullet { background: var(--green); }
.tc-rt-pill[data-state="fail"] { background: #fbeae8; color: #8e2018; }
.tc-rt-pill[data-state="fail"] .bullet { background: var(--red); }
.tc-rt-pill[data-state="busy"] { background: #FDF1DD; color: #8F5B00; }
.tc-rt-pill[data-state="busy"] .bullet { background: var(--amber); }
.tc-rt.is-done .card-body > .tc-q,
.tc-rt.is-done .tc-filebox { opacity: .55; pointer-events: none; }

.tc-q { padding: 14px 0; border-top: 1px solid var(--line); }
.tc-q:first-of-type { border-top: 0; padding-top: 4px; }
.tc-q-h { margin: 0 0 4px; font-size: 15px; font-weight: 800; color: var(--navy); }
.tc-q .fine { margin: 0 0 10px; }
.tc-req { display: inline-block; margin-left: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-red, #8e2018); }
.tc-radios { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.tc-radio {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: #fff; font-size: 14.5px; color: var(--ink); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.tc-radio:hover { border-color: var(--navy-soft); }
.tc-radio input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--green); }
.tc-radio:has(input:checked) { border-color: var(--navy); background: #f2f6fa; font-weight: 800; color: var(--navy); }
.tc-detbox { margin-top: 12px; }
.tc-detbox[hidden] { display: none; }
.tc-filebox[hidden] { display: none; }
.tc-both[hidden] { display: none; }
.tc-both { margin-top: 12px; }
.tc-msg[hidden] { display: none; }
.tc-msg { margin-bottom: 14px; padding: 12px 14px; border-radius: 11px; border: 1px solid; font-size: 14.5px; line-height: 1.5; }
.tc-msg.ok   { background: #EAF6E2; border-color: var(--green); color: #3F7A1C; }
.tc-msg.bad  { background: #fbeae8; border-color: var(--red);   color: #8e2018; }
.tc-msg b { display: block; margin-bottom: 2px; }
.tc-wait { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.tc-wait[hidden] { display: none; }

/* Finished dialog */
.tc-dlg { width: min(620px, calc(100vw - 32px)); }
.tc-dlg-h { margin: 18px 0 6px; font-size: 15px; font-weight: 800; color: var(--navy); }
.tc-dlg-h:first-child { margin-top: 0; }
.tc-dlg .dialog-body > p { font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.tc-understand { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--green-btn); }
.tc-understand[hidden] { display: none; }
.tc-understand-h { margin: 0 0 4px; font-size: 15px; font-weight: 800; color: #fff; }
.tc-understand-n { margin: 0; font-size: 14px; color: rgba(255,255,255,.9); line-height: 1.5; }
.tc-vid { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--navy-deep); display: flex; align-items: center; justify-content: center; }
.tc-vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tc-vid-play { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; min-height: 44px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(255,255,255,.10); color: #fff; font: inherit; font-size: 15px; cursor: pointer; }
.tc-vid-play:hover { background: rgba(255,255,255,.18); }

/* ---------------- Responsive ---------------- */
@media (max-width: 1100px) {
  .tc-choice { grid-template-columns: 1fr; }
  .tc-fields { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .tc-tbl-r { grid-template-columns: 1fr; gap: 4px; }
  .tc-tbl-h { display: none; }
  .tc-tbl-r > span[data-k]::before { content: attr(data-k) " · "; font-weight: 800; color: var(--ink-soft); }
  .tc-rt-pill { margin-left: 0; }
}
@media (max-width: 560px) {
  .tc-foot, .tc-foot-split, .tc-actions, .tc-actions-split { flex-direction: column; align-items: stretch; }
  .tc-foot .btn, .tc-actions .btn, .tc-foot a.btn, .tc-actions a.btn { width: 100%; justify-content: center; }
  .tc-confirm-row .field { max-width: none; flex: 1 1 100%; }
  .tc-radios { flex-direction: column; align-items: stretch; }
  .tc-radio { justify-content: flex-start; border-radius: 12px; }
  .tc-dlg .dialog-foot { flex-direction: column-reverse; }
  .tc-dlg .dialog-foot .btn, .tc-dlg .dialog-foot a.btn { width: 100%; justify-content: center; }
  .tc-sel-r { min-width: 0; flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .tc-pick, .tc-perf-row, .tc-radio { transition: none; }
}

/* Page 28 — explicit hidden wins over any display rule */
.card[hidden], .tc-pane[hidden], section.card.set[hidden] { display: none !important; }
/* Account-type rows read as a stacked label + explanation, not name/price */
.tc-actype .pm-txt { flex-direction: column; align-items: flex-start; gap: 2px; }
.tc-actype .pm-fee { color: var(--ink-soft); font-weight: 400; text-align: left; }

/* ==========================================================================
   MANAGE / CHECK UPLOADS  (manage_music.php)                        [page 29]
   ========================================================================== */

#mmPrompt[hidden], #mmFiles[hidden], #mmExpired[hidden],
.mm-none[hidden], .mm-locknote[hidden], .mm-file-warn[hidden],
.mm-sheet[hidden] { display: none !important; }

/* --- prompt / empty ------------------------------------------------------ */
.mm-empty-body { text-align: center; padding: 34px 20px 38px; }
.mm-empty-tile { width: 46px; height: 46px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.mm-empty-tile .ic { width: 23px; height: 23px; }
.mm-empty-body .h-card { margin: 0 0 6px; }
.mm-empty-body .fine { margin: 0; }

/* --- generic action row -------------------------------------------------- */
.mm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* --- notices / tips ------------------------------------------------------ */
.mm-howto { margin-bottom: 14px; }
.mm-howto-links { margin: 10px 0 0 !important; }
.mm-locknote { margin-bottom: 14px; }
.mm-tip { margin: 0 0 14px; }
.mm-ph { margin: 16px 0 0; }

/* --- file list ----------------------------------------------------------- */
.mm-list { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px; }

.mm-file { border: 1px solid var(--line-strong); border-radius: 14px;
  background: #fff; padding: 14px 16px 15px; }

.mm-file-head { display: flex; align-items: flex-start; gap: 13px; }

.mm-num { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px;
  background: var(--page); color: var(--ink-soft); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-family: var(--font-fine); }

.mm-file-id { flex: 1 1 auto; min-width: 0; }
.mm-file-name { margin: 0; font-size: 15px; line-height: 1.42; color: var(--navy);
  word-break: break-word; overflow-wrap: anywhere; }
.mm-file-meta { margin: 3px 0 0; font-size: 12px; font-family: var(--font-fine);
  color: var(--ink-soft); }

.mm-status { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px; font-size: 12px;
  font-family: var(--font-fine); white-space: nowrap; }
.mm-status .bullet { width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto; }
.mm-status.ok    { background: #EAF6E2; color: #3F7A1C; }
.mm-status.wait  { background: #FDF1DD; color: #8F5B00; }
.mm-status.fault { background: #fbeae8; color: #8e2018; }

.mm-file-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 13px 0 0; padding-top: 13px; border-top: 1px solid var(--line); }
.mm-file-acts .mm-sep { flex: 1 1 auto; }

.mm-file-warn { margin: 12px 0 0; padding: 10px 12px; border-radius: 11px;
  background: #fbeae8; color: #8e2018; font-size: 13px;
  font-family: var(--font-fine); line-height: 1.5; }

/* row state tints */
.mm-file.is-checked { border-color: #BFE1A6; background: #F7FCF3; }
.mm-file.is-video   { border-color: #EBCB86; background: #FFFCF3; }
.mm-file.is-fault   { border-color: #E3A9A3; background: #FDF6F5; }

/* --- no results ---------------------------------------------------------- */
.mm-none { text-align: center; padding: 30px 18px 34px;
  border: 1px dashed var(--line-strong); border-radius: 14px; background: var(--page); }
.mm-none .h-card { margin: 0 0 6px; }
.mm-none .fine { margin: 0 0 14px; }

/* --- dialogs ------------------------------------------------------------- */
.mm-dlg { width: min(680px, calc(100vw - 32px)); }
.mm-dlg-sm { width: min(520px, calc(100vw - 32px)); }
.mm-dlg-h { margin: 18px 0 6px; font-size: 15px; color: var(--navy); }
.mm-dlg-file { margin: 0 0 14px; padding: 10px 12px; border-radius: 11px;
  background: var(--page); border: 1px solid var(--line);
  font-size: 13px; font-family: var(--font-fine); color: var(--ink);
  word-break: break-word; overflow-wrap: anywhere; }

.mm-steps-list { margin: 12px 0 0; padding-left: 20px; }
.mm-steps-list li { margin-bottom: 10px; line-height: 1.58; }

.mm-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.mm-choice { display: flex; align-items: flex-start; gap: 13px;
  padding: 14px 15px; border: 1px solid var(--line-strong); border-radius: 13px;
  background: #fff; text-decoration: none; color: inherit;
  transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.mm-choice:hover, .mm-choice:focus-visible {
  border-color: var(--brand-blue); background: #FAFCFE; transform: translateY(-1px); }
.mm-choice-tile { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; }
.mm-choice-tile .ic { width: 20px; height: 20px; }
.mm-choice-tile.blue   { background: #DFEEFA; color: #005E9C; }
.mm-choice-tile.purple { background: #F1E5F0; color: #5C2B5A; }
.mm-choice-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mm-choice-name { font-family: 'Gilroy', system-ui, sans-serif; font-weight: 800;
  font-size: 14px; color: var(--navy); }
.mm-choice-note { font-size: 12.5px; font-family: var(--font-fine);
  color: var(--ink-soft); line-height: 1.5; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 720px) {
  .mm-file-head { flex-wrap: wrap; }
  .mm-status { margin-left: 41px; }
}
@media (max-width: 560px) {
  .mm-file { padding: 13px 13px 14px; }
  .mm-file-acts { flex-direction: column; align-items: stretch; }
  .mm-file-acts .btn { width: 100%; justify-content: center; }
  .mm-file-acts .mm-sep { display: none; }
  .mm-actions .btn, .mm-none .btn { width: 100%; justify-content: center; }
  .mm-choice { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-choice { transition: none; }
  .mm-choice:hover, .mm-choice:focus-visible { transform: none; }
}

/* manage_music.php — hero counter + faulty-row flag */
.mm-count { font-family: 'Gilroy', system-ui, sans-serif; font-weight: 800;
  font-size: 26px; line-height: 32px; color: var(--navy); margin: 2px 0 4px !important; }
.mm-fault-flag { display: inline-flex; align-items: center; gap: 8px;
  color: #8e2018; font-size: 13px; font-family: var(--font-fine); line-height: 1.45; }
.mm-fault-flag .ic { flex: 0 0 auto; width: 17px; height: 17px; }

/* manage_music.php — legible disabled action (shared .is-disabled is too faint here) */
.mm-file-acts .btn.is-disabled,
.mm-file-acts .btn.is-disabled:hover,
.mm-file-acts .btn[disabled] {
  background: #E3E8EE; border-color: #D4DCE5; color: #5A6672;
  cursor: not-allowed; box-shadow: none; opacity: 1;
}

/* manage_music.php — keep the replace choices free of the global link underline */
.mm-choice, .mm-choice:hover, .mm-choice:focus, .mm-choice:focus-visible,
.mm-choice .mm-choice-name, .mm-choice .mm-choice-note { text-decoration: none !important; }
.mm-choice:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }

/* =========================================================================
   PAGE: Critiques & Videos (MediaCenter.php)  — prefix cv-
   ========================================================================= */

.cv-count{
  font-family:'Gilroy';font-weight:800;font-size:32px;line-height:1;
  color:var(--navy);margin:0 0 6px;
}
.cv-count-unit{font-weight:800;font-size:18px;color:var(--ink-soft);}

.cv-tile{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
.cv-tile .ic{width:22px;height:22px;}

.cv-explain{margin:22px 0 0;}
.cv-explain p{margin:0 0 8px;}
.cv-explain p:last-child{margin-bottom:0;}
.cv-delay{display:flex;align-items:flex-start;gap:8px;margin-top:10px !important;}
.cv-delay .ic{width:18px;height:18px;flex:0 0 auto;margin-top:2px;}

.cv-p{margin:0 0 14px;color:var(--ink);line-height:1.6;}
.cv-sub{
  font-family:'Gilroy';font-weight:800;font-size:15px;color:var(--navy);
  margin:18px 0 10px;
}

.cv-expired{margin-top:22px;}
.cv-expired[hidden]{display:none !important;}

.cv-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}

.cv-list-card{margin-top:22px;}
.cv-head-tools{margin-left:auto;flex:0 0 auto;}
.cv-filter-wrap{position:relative;}
.cv-filter-ic{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--ink-soft);pointer-events:none;
}
.cv-filter{padding-left:36px !important;min-width:260px;}

/* loading */
.cv-loading{display:flex;flex-direction:column;align-items:center;gap:12px;padding:34px 0;}
.cv-loading[hidden]{display:none !important;}
.cv-spin{
  width:30px;height:30px;border-radius:50%;
  border:3px solid var(--line-strong);border-top-color:var(--brand-blue);
  animation:cv-spin .8s linear infinite;
}
@keyframes cv-spin{to{transform:rotate(360deg);}}

/* folder rows */
.cv-folders{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.cv-folders[hidden]{display:none !important;}
.cv-folder{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:13px;background:#fff;
  padding:14px 16px;transition:border-color .15s ease, box-shadow .15s ease;
}
.cv-folder[hidden]{display:none !important;}
.cv-folder:hover{border-color:var(--navy-soft);box-shadow:0 2px 10px rgba(28,67,100,.06);}
.cv-folder-main{display:flex;align-items:center;gap:14px;flex:1 1 300px;min-width:0;}
.cv-avatar{
  width:44px;height:44px;flex:0 0 auto;border-radius:50%;
  background:var(--tint-blue,#DFEEFA);color:#005E9C;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Gilroy';font-weight:800;font-size:15px;letter-spacing:.5px;
}
.cv-folder-txt{min-width:0;}
.cv-name{
  font-family:'Gilroy';font-weight:800;font-size:16px;color:var(--navy);
  margin:0 0 6px;overflow-wrap:anywhere;
}
.cv-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0;}
.cv-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:#DFEEFA;color:#005E9C;border-radius:999px;
  padding:4px 11px;font-size:12.5px;line-height:1.3;overflow-wrap:anywhere;
}
.cv-chip .ic{width:14px;height:14px;flex:0 0 auto;}
.cv-chip-quiet{background:var(--page);color:var(--ink-soft);}
.cv-folder-actions{display:flex;gap:9px;flex:0 0 auto;flex-wrap:wrap;align-items:center;}
.cv-folder-actions .btn{text-decoration:none !important;}

/* empty states */
.cv-empty{text-align:center;padding:34px 12px;}
.cv-empty[hidden]{display:none !important;}
.cv-empty-ic{width:40px;height:40px;color:var(--navy-soft);margin-bottom:10px;}
.cv-empty h4{font-family:'Gilroy';font-weight:800;font-size:16px;color:var(--navy);margin:0 0 6px;}
.cv-empty .fine{max-width:440px;margin:0 auto 14px;}

.cv-help{margin:22px 0 0;}
.cv-help p{margin:0;}

/* dialogs */
.cv-dlg-video{width:min(760px, calc(100vw - 32px));}
.cv-dlg-before{width:min(620px, calc(100vw - 32px));}
.cv-dlg-support{width:min(720px, calc(100vw - 32px));}
.cv-dlg-send{width:min(560px, calc(100vw - 32px));}
.cv-dlg-video[open],.cv-dlg-before[open],.cv-dlg-support[open],.cv-dlg-send[open]{
  display:flex;flex-direction:column;max-height:calc(100vh - 32px);
}
.cv-dlg-video .dlg-form,.cv-dlg-before .dlg-form,
.cv-dlg-support .dlg-form,.cv-dlg-send .dlg-form{
  display:flex;flex-direction:column;min-height:0;flex:1 1 auto;
}
.cv-dlg-video .dialog-head,.cv-dlg-before .dialog-head,
.cv-dlg-support .dialog-head,.cv-dlg-send .dialog-head,
.cv-dlg-video .dialog-foot,.cv-dlg-before .dialog-foot,
.cv-dlg-support .dialog-foot,.cv-dlg-send .dialog-foot{flex:0 0 auto;}
.cv-dlg-video .dialog-body,.cv-dlg-before .dialog-body,
.cv-dlg-support .dialog-body,.cv-dlg-send .dialog-body{
  flex:1 1 auto;min-height:0;overflow-y:auto;
}
.cv-grid-2 > .field{margin:0;}

.cv-video{
  aspect-ratio:16/10;background:#16374F;border-radius:12px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.cv-video iframe{width:100%;height:100%;border:0;display:block;}
.cv-video-ph{text-align:center;color:#fff;padding:20px;}
.cv-video-ph .ic{width:44px;height:44px;margin-bottom:10px;}
.cv-video-ph .fine{color:rgba(255,255,255,.82);}

.cv-check{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:10px;}
.cv-check li{display:flex;align-items:flex-start;gap:10px;line-height:1.55;color:var(--ink);}
.cv-check .ic{width:18px;height:18px;flex:0 0 auto;margin-top:3px;color:#3F7A1C;}

.cv-inline-notice{margin:16px 0 0;}
.cv-inline-notice:first-child{margin-top:0;}
.cv-inline-notice + .cv-grid-2{margin-top:18px;}

.cv-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;align-items:start;}

.cv-textarea{min-height:96px;resize:vertical;}

.cv-link-btn{
  background:none;border:0;padding:0;cursor:pointer;
  color:var(--brand-blue);text-decoration:underline;font:inherit;
}
.cv-act-hint{margin:0 0 8px;}
.cv-act-help{
  background:var(--page);border:1px solid var(--line);border-radius:11px;
  padding:12px 14px;margin:0 0 12px;
}
.cv-act-help[hidden]{display:none !important;}
.cv-act-help .fine{margin:0 0 6px;}
.cv-act-help .fine:last-child{margin-bottom:0;}
.cv-acts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.cv-add-act{margin-top:10px;}

.cv-msg{
  border-radius:11px;padding:12px 14px;margin-top:16px;font-size:14px;line-height:1.5;
}
.cv-msg[hidden]{display:none !important;}
.cv-msg-ok{background:#EAF6E2;color:#3F7A1C;border:1px solid #cfe7bd;}
.cv-msg-err{background:#fbeae8;color:#8e2018;border:1px solid #f0cdc9;}

.cv-send-sum{
  display:flex;align-items:center;gap:14px;
  background:var(--page);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;margin-bottom:18px;
}
.cv-send-sum .cv-name{margin-bottom:3px;}
.cv-send-sum .fine{margin:0;}

/* ---- responsive ---- */
@media (max-width:940px){
  .cv-head-tools{margin-left:0;width:100%;}
  .cv-filter{min-width:0;width:100%;}
  .cv-acts{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:720px){
  .cv-grid-2{grid-template-columns:1fr;}
  .cv-folder{align-items:flex-start;}
}
@media (max-width:560px){
  .cv-count{font-size:28px;}
  .cv-folder{flex-direction:column;align-items:stretch;gap:12px;}
  .cv-folder-main{flex:1 1 auto;}
  .cv-folder-actions{flex-direction:column;align-items:stretch;}
  .cv-folder-actions .btn{width:100%;justify-content:center;}
  .cv-actions{flex-direction:column;align-items:stretch;}
  .cv-actions .btn{width:100%;justify-content:center;}
  .cv-empty .btn{width:100%;justify-content:center;}
  .cv-acts{grid-template-columns:1fr;}
  .cv-add-act{width:100%;justify-content:center;}
}
@media (max-width:420px){
  .cv-avatar{width:38px;height:38px;font-size:13px;}
  .cv-chip{font-size:12px;}
}

/* notice variants that carry a leading icon (Critiques & Videos) */
.cv-explain, .cv-help, .cv-inline-notice{display:flex;align-items:flex-start;gap:12px;}
.cv-explain > .ic, .cv-help > .ic, .cv-inline-notice > .ic{
  width:20px;height:20px;flex:0 0 auto;margin-top:2px;
}
.cv-explain > .ic{color:var(--ink-blue);}
.cv-help > .ic{color:var(--ink-purple);}
.cv-inline-notice.blue > .ic{color:var(--ink-blue);}
.cv-inline-notice.amber > .ic{color:var(--ink-amber);}
.cv-explain > div, .cv-help > div, .cv-inline-notice > div{min-width:0;}

/* Critiques & Videos — card header stacks before the filter squeezes the title */
@media (max-width:1100px){
  .cv-list-card .set-head{flex-wrap:wrap;}
  .cv-list-card .card-head-txt{flex:1 1 100%;min-width:0;}
  .cv-list-card .cv-head-tools{margin-left:0;flex:1 1 100%;width:100%;}
  .cv-filter{min-width:0;width:100%;}
}
@media (max-width:560px){
  .cv-folder-main{align-items:flex-start;}
  .cv-avatar{margin-top:2px;}
}

/* Critiques & Videos — hero buttons size to their label */
.cv-hero .hero-cta-row .btn{flex:0 0 auto;}
@media (max-width:560px){
  .cv-hero .hero-cta-row .btn{flex:1 1 100%;width:100%;justify-content:center;}
}

/* ===================================================================
   PAGE: my-account.html  (Manage Account / View Invoices)
   Scoped with .acct-* — appended, nothing above is modified.
   =================================================================== */

/* --- hero ------------------------------------------------------- */
.acct-hero .hero-cta-row .btn { flex: 0 0 auto; }
.acct-sup-k { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 4px; }
.acct-sup-v { font-size: 20px; line-height: 26px; font-weight: 800; color: var(--navy); margin: 0; }
.acct-sup-n { font-size: 13px; line-height: 19px; color: var(--ink-soft); margin: 6px 0 0; }
.acct-sup-n b { color: var(--ink); }
.acct-sup-f { margin-top: 10px; }

/* --- shared bits ------------------------------------------------ */
.acct-sec { margin-bottom: 18px; }
.acct-sec .set-head { align-items: center; }
.acct-tile { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; color: #fff; }
.acct-tile .ic { width: 19px; height: 19px; }
.acct-toggle { margin-left: auto; flex: 0 0 auto; }
.acct-toggle .ic { width: 14px; height: 14px; transition: transform .18s ease; }
.acct-toggle[aria-expanded="true"] .ic { transform: rotate(90deg); }
.acct-acc[hidden] { display: none !important; }
.acct-pane[hidden] { display: none !important; }
.acct-lead { font-size: 14px; line-height: 21px; color: var(--ink-soft); margin: 0 0 14px; }
.acct-lead a { font-weight: 800; }
.acct-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.acct-actions + .fine { margin-top: 12px; }
.acct-status { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }

/* notice with an icon slot (base .notice has no icon column) */
.acct-notice { display: flex; gap: 12px; align-items: flex-start; }
.acct-notice > div { min-width: 0; }
.acct-notice-ic { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; background: rgba(255,255,255,.72); color: inherit; }
.acct-notice-ic .ic { width: 17px; height: 17px; }
.notice.amber  .acct-notice-ic { color: var(--ink-amber); }
.notice.blue   .acct-notice-ic { color: var(--ink-blue); }
.notice.purple .acct-notice-ic { color: var(--ink-purple); }
.notice.green  .acct-notice-ic { color: var(--ink-green); }
.acct-foot { margin-bottom: 8px; }
.acct-foot .acct-actions { margin-top: 12px; }

/* --- your details ---------------------------------------------- */
.acct-dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 0; }
.acct-dt { background: #fff; padding: 12px 14px; min-width: 0; }
.acct-dt dt { font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 4px; }
.acct-dt dd { margin: 0; font-size: 15px; line-height: 21px; font-weight: 800; color: var(--navy);
  overflow-wrap: anywhere; }
.acct-dt-n { display: block; font-family: var(--font-fine); font-weight: 400; font-size: 12px;
  line-height: 17px; color: var(--ink-soft); margin-top: 3px; }

/* --- plan & auto renewal ---------------------------------------- */
.acct-plan-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,340px); gap: 20px; }
.acct-plan-facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px;
  align-content: start; }
.acct-fact { background: var(--page); border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; }
.acct-fact[hidden] { display: none !important; }
.acct-fact-k { font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 5px; }
.acct-fact-v { margin: 0; font-size: 16px; line-height: 22px; font-weight: 800; color: var(--navy); }
.acct-renew { background: #fff; border: 1px solid var(--line-strong); border-radius: 14px; padding: 16px; }
.acct-renew .field-label { margin-bottom: 10px; }
.acct-radio-set { display: grid; gap: 9px; margin-bottom: 14px; }
.acct-radio { display: block; position: relative; cursor: pointer; }
.acct-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.acct-radio-box { display: block; border: 1.5px solid var(--line-strong); border-radius: 11px;
  padding: 11px 13px; transition: border-color .15s ease, background .15s ease; }
.acct-radio:hover .acct-radio-box { border-color: var(--navy-soft); }
.acct-radio input:checked + .acct-radio-box { border-color: var(--brand-blue); background: var(--tint-blue); }
.acct-radio input:focus-visible + .acct-radio-box { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.acct-radio-t { display: block; font-weight: 800; font-size: 14px; line-height: 20px; color: var(--navy); }
.acct-radio-d { display: block; font-family: var(--font-fine); font-weight: 400; font-size: 13px;
  line-height: 19px; color: var(--ink-soft); margin-top: 3px; }
.acct-renew .fine { margin-top: 10px; }

/* --- performers -------------------------------------------------- */
.acct-count { background: var(--tint-purple); border: 1px solid var(--purple); border-radius: 12px;
  padding: 11px 14px; margin-bottom: 14px; }
.acct-count-t { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-purple); }
.acct-count .fine { margin-top: 3px; }
.acct-perf-list { display: grid; gap: 9px; }
.acct-perf { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 13px; background: #fff; }
.acct-avatar { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; background: var(--tint-purple); color: var(--ink-purple);
  font-weight: 800; font-size: 13px; letter-spacing: .4px; }
.acct-perf-main { min-width: 0; flex: 1 1 auto; }
.acct-perf-n { margin: 0; font-size: 15px; line-height: 21px; font-weight: 800; color: var(--navy);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acct-msp { font-size: 11px; }
.acct-perf-m { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px 12px; }
.acct-chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-fine);
  font-weight: 400; font-size: 12.5px; line-height: 18px; color: var(--ink-soft); }
.acct-chip .ic { width: 14px; height: 14px; flex: 0 0 14px; }
.acct-rm { flex: 0 0 auto; color: var(--red); }
.acct-rm:hover { background: #fbeae8; border-color: var(--red); }

/* --- invoice tabs + tables --------------------------------------- */
.acct-tabs { display: flex; flex-wrap: wrap; gap: 6px; background: var(--page);
  border: 1px solid var(--line); border-radius: 12px; padding: 5px; margin-bottom: 14px; }
.acct-tab { flex: 1 1 auto; min-height: 40px; border: 0; border-radius: 9px; background: transparent;
  font-family: inherit; font-weight: 800; font-size: 13.5px; color: var(--ink-soft);
  cursor: pointer; padding: 8px 12px; transition: background .15s ease, color .15s ease; }
.acct-tab:hover { color: var(--navy); }
.acct-tab.is-on { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(28,67,100,.14); }
.acct-tab:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.acct-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.acct-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.acct-table th { text-align: left; font-size: 11.5px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: #fff; background: #607995; padding: 10px 12px; white-space: nowrap; }
.acct-table td { padding: 11px 12px; border-top: 1px solid var(--line); color: var(--ink);
  line-height: 19px; vertical-align: middle; }
.acct-table tbody tr:nth-child(even) td { background: #FAFBFD; }
.acct-table td:first-child { font-weight: 800; color: var(--navy); white-space: nowrap; }
.acct-td-act { white-space: nowrap; }
.acct-td-act .btn { margin-right: 6px; }
.acct-td-act .btn:last-child { margin-right: 0; }
.acct-table .btn-sm .ic { width: 14px; height: 14px; }

/* --- notes ------------------------------------------------------- */
.acct-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.acct-notes[hidden] { display: none !important; }
.acct-note { background: #DFEEFA; border: 1px solid var(--mid-blue); border-radius: 12px; padding: 11px 14px; }
.acct-note-d { margin: 0 0 3px; font-size: 12px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--ink-blue); }
.acct-note-b { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink); }
.acct-empty { text-align: center; padding: 26px 16px; border: 1px dashed var(--line-strong); border-radius: 12px; }
.acct-empty[hidden] { display: none !important; }
.acct-empty-ic { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: var(--tint-blue); color: var(--ink-blue); margin-bottom: 10px; }
.acct-empty-ic .ic { width: 20px; height: 20px; }
.acct-empty h4 { font-size: 15px; line-height: 21px; margin: 0 0 3px; color: var(--navy); }
.acct-empty p { margin: 0; font-size: 13.5px; line-height: 20px; color: var(--ink-soft); }

/* --- dialogs ----------------------------------------------------- */
.acct-dlg { width: min(620px, calc(100vw - 32px)); }
.acct-dlg[open] { display: flex; flex-direction: column; max-height: calc(100vh - 40px); }
.acct-dlg .dlg-form { display: flex; flex-direction: column; min-height: 0; }
.acct-dlg .dialog-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.acct-dlg .dialog-body > * + * { margin-top: 14px; }
.acct-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.acct-grid-2 .field { margin: 0; }
.acct-opt { font-family: var(--font-fine); font-weight: 400; font-size: 12px; color: var(--ink-soft); }
.acct-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.acct-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 21px;
  color: var(--ink); }
.acct-list li .ic { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; color: var(--ink-soft); }
.acct-rm-who { display: flex; align-items: center; gap: 12px; }
.acct-dlg-rm .acct-avatar { flex: 0 0 44px; width: 44px; height: 44px; font-size: 15px; }

/* --- responsive --------------------------------------------------- */
@media (max-width: 1240px) {
  .acct-dl { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 1100px) {
  .acct-plan-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 720px) {
  .acct-dl { grid-template-columns: minmax(0,1fr); }
  .acct-plan-facts { grid-template-columns: minmax(0,1fr); }
  .acct-grid-2 { grid-template-columns: minmax(0,1fr); }

  /* stack tables into rows */
  .acct-tablewrap { overflow-x: visible; border: 0; border-radius: 0; }
  .acct-table, .acct-table tbody, .acct-table tr, .acct-table td { display: block; width: 100%; }
  .acct-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
    clip-path: inset(50%); white-space: nowrap; }
  .acct-table tr { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 9px;
    background: #fff; padding: 4px 0; }
  .acct-table tbody tr:nth-child(even) td { background: transparent; }
  .acct-table td { border-top: 0; padding: 6px 13px; display: flex; gap: 12px;
    align-items: baseline; justify-content: space-between; white-space: normal; }
  .acct-table td::before { content: attr(data-label); font-size: 11.5px; font-weight: 800;
    letter-spacing: .5px; text-transform: uppercase; color: var(--ink-soft); flex: 0 0 auto; }
  .acct-table td:first-child { padding-top: 10px; }
  .acct-table td:last-child { padding-bottom: 10px; }
  .acct-table td > * { text-align: right; }
  .acct-td-act { white-space: normal; justify-content: flex-end; flex-wrap: wrap; }
  .acct-td-act::before { content: none; }
}
@media (max-width: 560px) {
  .acct-actions { flex-direction: column; align-items: stretch; }
  .acct-actions .btn { width: 100%; justify-content: center; }
  .acct-tabs { flex-direction: column; }
  .acct-tab { width: 100%; }
  .acct-perf { flex-wrap: wrap; }
  .acct-rm { width: 100%; justify-content: center; margin-top: 4px; }
  .acct-td-act .btn { width: 100%; justify-content: center; margin: 4px 0 0; }
  .acct-dlg .dialog-foot { flex-direction: column-reverse; }
  .acct-dlg .dialog-foot .btn { width: 100%; justify-content: center; }
  .acct-sec .set-head { flex-wrap: wrap; }
  .acct-toggle { margin-left: 0; width: 100%; justify-content: center; }
}

/* ================================================================
   NOTICE — red variant (shared; first used by Replace a Music File)
   ================================================================ */
.notice.red    { background: #fbeae8; border-color: var(--red); }
.notice.red h4 { color: #8e2018; }

/* ================================================================
   PAGE — Replace a Music File (select_replace.php)
   ================================================================ */
.repl-card + .repl-card { margin-top: 18px; }
.repl-tile { width: 40px; height: 40px; }
.repl-step {
  display: inline-block; font-family: var(--font-fine); font-weight: 400;
  font-size: 12px; letter-spacing: .4px; text-transform: uppercase;
  color: var(--ink-soft); margin-right: 8px;
}

/* hero side card — purple for the converter */
.repl-sup-head { background: var(--tint-purple); }
.repl-sup-ic   { background: var(--purple); }

/* entry summary */
.repl-dl .repl-dt-wide { grid-column: 1 / -1; }
.repl-ph-note { margin-top: 10px; }
.repl-ph-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; background: var(--page); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 5px;
}

/* notices with a leading icon */
.repl-notice { display: flex; align-items: flex-start; gap: 12px; }
.repl-notice-ic { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.repl-notice-ic .ic { width: 22px; height: 22px; }
.notice.amber .repl-notice-ic { color: var(--ink-amber); }
.notice.green .repl-notice-ic { color: var(--ink-green); }
.notice.red   .repl-notice-ic { color: #8e2018; }
.repl-notice-txt { min-width: 0; }

#upfile { margin-top: 18px; }
#upfile[hidden] { display: none !important; }
.repl-field { max-width: 560px; }
.repl-select { font-weight: 800; color: var(--navy); }

/* chosen file summary */
.repl-pick {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding: 13px 15px;
  background: var(--tint-green); border: 1px solid var(--green);
  border-radius: 12px; max-width: 560px;
}
.repl-pick[hidden] { display: none !important; }
.repl-pick-ic {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; background: var(--green); color: #fff;
}
.repl-pick-ic .ic { width: 18px; height: 18px; }
.repl-pick-txt { flex: 1 1 200px; min-width: 0; }
.repl-pick-n {
  margin: 0; font-size: 15px; line-height: 21px; font-weight: 800;
  color: var(--ink-green); overflow-wrap: anywhere;
}
.repl-pick-m {
  margin: 2px 0 0; font-family: var(--font-fine); font-weight: 400;
  font-size: 12px; line-height: 17px; color: var(--ink-green); opacity: .85;
}
.repl-pick-pill { flex: none; }

/* empty storage */
.repl-empty {
  margin-top: 4px; padding: 20px; text-align: center;
  background: var(--page); border: 1px dashed var(--line-strong); border-radius: 14px;
}
.repl-empty[hidden] { display: none !important; }
.repl-empty h4 { font-size: 16px; line-height: 22px; color: var(--navy); margin: 0 0 4px; }
.repl-empty p {
  margin: 0 0 14px; font-family: var(--font-fine); font-weight: 400;
  font-size: 13px; line-height: 19px; color: var(--ink-soft);
}

.repl-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.repl-actions[hidden] { display: none !important; }

/* busy */
.repl-busy {
  display: flex; align-items: center; gap: 14px;
  margin-top: 18px; padding: 18px 20px;
  background: var(--tint-blue); border: 1px solid var(--mid-blue); border-radius: 14px;
}
.repl-busy[hidden] { display: none !important; }
.repl-busy h4 { font-size: 16px; line-height: 22px; color: var(--ink-blue); margin: 0 0 2px; }
.repl-busy p {
  margin: 0; font-family: var(--font-fine); font-weight: 400;
  font-size: 13px; line-height: 19px; color: var(--ink-blue);
}
.repl-busy-txt { min-width: 0; }
.repl-spin {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid rgba(0, 94, 156, .25); border-top-color: var(--brand-blue);
  animation: repl-spin 900ms linear infinite;
}
@keyframes repl-spin { to { transform: rotate(360deg); } }

.repl-result { margin-top: 18px; }
.repl-result[hidden] { display: none !important; }

/* before you replace */
.repl-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.repl-tips li { display: flex; align-items: flex-start; gap: 13px; }
.repl-tip-n {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--tint-purple); color: var(--ink-purple);
  font-size: 14px; font-weight: 800;
}
.repl-tips h4 { font-size: 15px; line-height: 21px; color: var(--navy); margin: 0 0 2px; }
.repl-tips p {
  margin: 0; font-family: var(--font-fine); font-weight: 400;
  font-size: 13px; line-height: 19px; color: var(--ink);
}

.repl-foot { margin-top: 18px; }

/* dialog */
.repl-dlg { width: min(560px, calc(100vw - 32px)); }
.repl-dlg[open] { display: flex; flex-direction: column; max-height: calc(100vh - 40px); }
.repl-dlg .dialog-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.repl-dlg .dialog-body > * + * { margin-top: 14px; }
.repl-swap { display: grid; gap: 8px; justify-items: stretch; }
.repl-swap-row { border-radius: 11px; padding: 11px 13px; border: 1px solid var(--line); }
.repl-swap-old { background: #fbeae8; border-color: var(--red); }
.repl-swap-new { background: var(--tint-green); border-color: var(--green); }
.repl-swap-k {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; margin-bottom: 3px;
}
.repl-swap-old .repl-swap-k { color: #8e2018; }
.repl-swap-new .repl-swap-k { color: var(--ink-green); }
.repl-swap-v {
  display: block; font-size: 14px; line-height: 20px; font-weight: 800;
  color: var(--navy); overflow-wrap: anywhere;
}
.repl-swap-arrow {
  display: grid; place-items: center; color: var(--ink-soft);
  transform: rotate(90deg);
}
.repl-swap-arrow .ic { width: 20px; height: 20px; }

@media (max-width: 720px) {
  .repl-field { max-width: none; }
  .repl-pick { max-width: none; }
}
@media (max-width: 560px) {
  .repl-actions { flex-direction: column; align-items: stretch; }
  .repl-actions .btn { width: 100%; justify-content: center; }
  .repl-empty .btn { width: 100%; justify-content: center; }
  .repl-busy { flex-direction: column; align-items: flex-start; gap: 10px; }
  .repl-dlg .dialog-foot { flex-direction: column-reverse; }
  .repl-dlg .dialog-foot .btn { width: 100%; justify-content: center; }
  .repl-step { display: block; margin-bottom: 2px; }
}

.repl-notice[hidden] { display: none !important; }

/* ===================== payment-failed.php — payment not completed ===================== */
.pf-hero .hero-note { max-width: 62ch; }
.pf-tile { width: 40px; height: 40px; }

.pf-top { display: flex; gap: 16px; align-items: flex-start; padding: 4px 0 20px; }
.pf-mark {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; background: #fbeae8; color: #8e2018;
  border: 2px solid #e8b7b2;
}
.pf-mark .ic { width: 26px; height: 26px; }
.pf-top-h { margin: 2px 0 6px; font-weight: 800; font-size: 18px; color: var(--navy); }
.pf-top-p { margin: 0; color: var(--ink); font-size: 14.5px; line-height: 1.6; max-width: 62ch; }

.pf-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  margin: 0 0 22px; background: var(--line); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
}
.pf-facts > div { background: #fff; padding: 14px 16px; }
.pf-facts dt {
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 6px;
}
.pf-facts dd {
  margin: 0; font-weight: 800; color: var(--navy); font-size: 15.5px;
  overflow-wrap: anywhere;
}
.pf-facts .acct-dt-n {
  display: block; margin-top: 3px; font-family: var(--font-fine); font-weight: 400;
  font-size: 12px; line-height: 17px; color: var(--ink-soft);
}
.pf-facts .pf-amt { color: #8e2018; }
.pf-facts .pf-dt-wide { grid-column: 1 / -1; }

.pf-notice { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 22px; }
.pf-notice-ic { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--ink-green); }
.pf-notice-ic .ic { width: 22px; height: 22px; }
.pf-notice-txt { min-width: 0; }

.pf-acts { display: flex; flex-wrap: wrap; gap: 12px; }
.pf-acts .btn { min-height: 44px; }
.pf-acts-note { margin: 12px 0 0; }

.pf-why { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 18px; }
.pf-why-i { display: flex; gap: 14px; align-items: flex-start; }
.pf-why-n {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--brand-blue); color: #fff;
  font-weight: 800; font-size: 14px;
}
.pf-why-h { margin: 4px 0 4px; font-weight: 800; color: var(--navy); font-size: 15.5px; }
.pf-why-i p:not(.pf-why-h) {
  margin: 0; font-family: var(--font-fine); font-weight: 400;
  font-size: 13.5px; line-height: 20px; color: var(--ink); max-width: 66ch;
}
.pf-help { margin: 0 0 16px; }
.pf-help-acts { display: flex; flex-wrap: wrap; gap: 12px; }
.pf-help-acts .btn { min-height: 44px; }

@media (max-width: 940px) { .pf-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .pf-facts { grid-template-columns: 1fr; }
  .pf-top { flex-direction: column; align-items: center; text-align: center; }
  .pf-top-p { text-align: left; }
  .pf-acts, .pf-help-acts { flex-direction: column; }
  .pf-acts .btn, .pf-help-acts .btn { width: 100%; justify-content: center; }
}

/* ===================== payment-confirm.php — storage plan confirmation ===================== */
.pc-hero .hero-note { max-width: 62ch; }
.pc-tile { width: 40px; height: 40px; }

.pc-msg { margin: 0 0 18px; }
.pc-msg:empty { display: none; }

.pc-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pc-facts .acct-dt-n {
  display: block; margin-top: 3px; font-family: var(--font-fine); font-weight: 400;
  font-size: 12px; line-height: 17px; color: var(--ink-soft);
}
.pc-facts dd { overflow-wrap: anywhere; }

.pc-renew { margin: 0 0 22px; }

.ty-next-i .btn-sm { margin-top: 2px; }

@media (max-width: 940px) { .pc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .pc-facts { grid-template-columns: 1fr; }
  .ty-next-i .btn-sm { width: 100%; justify-content: center; }
}

/* ===================== convert-audio.html — file converter ===================== */
.cv-steps { margin-top: 18px; }
.cv-warn { margin-bottom: 18px; }

.cv-rec {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--tint-green);
}
.cv-rec-copy { flex: 1 1 auto; min-width: 0; }
.cv-rec-h {
  font-weight: 800;
  font-size: 16px;
  color: var(--ink-green);
  margin: 0 0 4px;
}
.cv-rec-copy .fine { margin: 0; }
.cv-rec-btn { flex: 0 0 auto; white-space: nowrap; }
.cv-rec-n { margin: 12px 0 0; }

.cv-frame {
  position: relative;
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  aspect-ratio: 16 / 11;
  min-height: 420px;
}
.cv-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.cv-frame-fall {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
}
.cv-frame-fall .fine { margin: 0; flex: 1 1 auto; }
.cv-frame-fall .btn { white-space: nowrap; }
.cv-mob-note { display: none; }

.cv-drop { margin-top: 0; }
.cv-sum { margin-top: 14px; }
.cv-go { margin-top: 16px; }
.cv-prog { margin-top: 18px; }
.cv-msg { margin-top: 16px; }
.cv-msg[hidden] { display: none !important; }
.cv-foot-n { margin: 16px 0 0; }
#uploadStatus:empty { display: none; }
#uploadStatus { margin-top: 16px; }

@media (max-width: 940px) {
  .cv-frame { min-height: 360px; aspect-ratio: 4 / 5; }
}
/* The embedded converter does not render usefully on a phone-width viewport,
   so below 720px we hide the frame and send members to it in its own tab. */
@media (max-width: 720px) {
  .cv-frame { display: none; }
  .cv-desk-note { display: none; }
  .cv-mob-note { display: block; }
}
@media (max-width: 560px) {
  .cv-rec { flex-direction: column; align-items: stretch; text-align: left; }
  .cv-rec-btn { width: 100%; justify-content: center; }
  .cv-frame-fall { flex-direction: column; align-items: stretch; }
  .cv-frame-fall .btn { width: 100%; justify-content: center; }
  .cv-frame { min-height: 320px; aspect-ratio: 3 / 4; }
}

/* ==================================================================
   RECEIPT  (receipt.php)  —  standalone printable tax invoice
   ================================================================== */
body.rc-page { background: var(--page); }

.rc-wrap { max-width: 880px; margin: 0 auto; padding: 28px 24px 56px; }

.rc-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-bottom: 18px; flex-wrap: wrap; }

.rc-sheet { background: #fff; border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 2px 5px rgba(28, 67, 100, .05), 0 14px 34px rgba(28, 67, 100, .07);
  padding: 34px 38px 30px; }

/* --- masthead ----------------------------------------------------- */
.rc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px;
  padding-bottom: 22px; border-bottom: 2px solid var(--navy); }
.rc-logo { display: block; height: 42px; width: auto; margin-bottom: 12px; }
.rc-abn { margin: 0 0 2px; font-family: var(--font-fine); font-weight: 400;
  font-size: 12.5px; line-height: 18px; color: var(--ink-soft); }
.rc-abn a { color: var(--brand-blue); text-decoration: none; }
.rc-abn a:hover { text-decoration: underline; }

.rc-head-doc { text-align: right; flex: 0 0 auto; }
.rc-doc-kind { margin: 0 0 4px; font-size: 20px; line-height: 27px; font-weight: 800;
  color: var(--navy); }
.rc-doc-no { margin: 0 0 10px; font-size: 15px; line-height: 21px; font-weight: 800;
  color: var(--ink-soft); letter-spacing: .4px; }
.rc-doc-pill { margin-left: auto; }

/* --- top facts strip ---------------------------------------------- */
.rc-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; margin: 22px 0 0; }
.rc-fact { background: var(--page); padding: 12px 14px; min-width: 0; }
.rc-fact-k { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.rc-fact-v { display: block; font-size: 14.5px; line-height: 20px; font-weight: 800;
  color: var(--navy); overflow-wrap: anywhere; }
.rc-mono { font-variant-numeric: tabular-nums; letter-spacing: .3px; }

/* --- sections ----------------------------------------------------- */
.rc-sec { margin-top: 26px; }
.rc-sec-h { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; color: var(--ink-soft); }
.rc-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --- charge lines -------------------------------------------------- */
.rc-lines { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.rc-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 13px 16px; background: #fff; border-top: 1px solid var(--line); }
.rc-line:first-child { border-top: 0; }
.rc-line-d { min-width: 0; }
.rc-line-n { display: block; font-size: 15px; line-height: 21px; font-weight: 800; color: var(--navy); }
.rc-line-d .fine { margin: 2px 0 0; }
.rc-line-v { flex: 0 0 auto; font-size: 15px; line-height: 21px; font-weight: 800;
  color: var(--navy); font-variant-numeric: tabular-nums; }
.rc-line-item { background: var(--page); }
.rc-line-total { background: var(--tint-green); border-top: 1px solid #cfe7bd; }
.rc-line-total .rc-line-n { color: var(--ink-green); }
.rc-total { font-size: 21px; line-height: 27px; color: var(--ink-green); }
.rc-lines-n { margin: 9px 2px 0; }

/* --- terms --------------------------------------------------------- */
.rc-terms { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.rc-terms-h { margin: 0 0 6px; font-size: 15px; line-height: 21px; font-weight: 800; color: var(--navy); }
.rc-terms p { margin: 0 0 8px; font-family: var(--font-fine); font-weight: 400;
  font-size: 13.5px; line-height: 20px; color: var(--ink); }
.rc-terms .fine { margin: 0 0 12px; }
.rc-terms-c { margin: 0 !important; font-size: 12.5px !important; color: var(--ink-soft) !important; }
.rc-terms-c a { color: var(--brand-blue); text-decoration: none; }
.rc-terms-c a:hover { text-decoration: underline; }

.rc-ph { margin: 16px 2px 0; }

/* --- print --------------------------------------------------------- */
@media print {
  @page { size: A4 portrait; margin: 14mm 12mm; }
  body.rc-page { background: #fff; }
  .rc-wrap { max-width: none; margin: 0; padding: 0; }
  .rc-actions, .rc-ph { display: none !important; }
  .rc-sheet { border: 0; border-radius: 0; box-shadow: none; padding: 0; }
  .rc-sec, .rc-lines, .rc-facts, .rc-terms { break-inside: avoid; page-break-inside: avoid; }
  .rc-fact, .rc-line-item { background: #fff !important; }
  .acct-dt, .rc-line { background: #fff !important; }
  a[href]::after { content: ""; }
}

/* --- responsive ----------------------------------------------------- */
@media (max-width: 720px) {
  .rc-wrap { padding: 20px 16px 40px; }
  .rc-sheet { padding: 24px 20px 22px; border-radius: 16px; }
  .rc-head { flex-direction: column; gap: 16px; }
  .rc-head-doc { text-align: left; }
  .rc-doc-pill { margin-left: 0; }
  .rc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-dl { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .rc-actions { flex-direction: column-reverse; align-items: stretch; }
  .rc-actions .btn { width: 100%; justify-content: center; }
  .rc-facts { grid-template-columns: minmax(0, 1fr); }
  .rc-line { flex-direction: column; gap: 4px; }
  .rc-line-v { align-self: flex-start; }
  .rc-total { font-size: 19px; line-height: 25px; }
  .rc-logo { height: 36px; }
}

/* receipt — refinements */
.rc-facts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rc-logo { height: 52px; }
.rc-terms p.rc-terms-h { font-family: inherit; font-weight: 800; font-size: 15px; line-height: 21px;
  color: var(--navy); }
@media (max-width: 720px) {
  .rc-facts-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .rc-facts-3 { grid-template-columns: minmax(0, 1fr); }
  .rc-logo { height: 42px; }
}

/* receipt — keep the printed invoice on a single A4 page */
@media print {
  .rc-head { padding-bottom: 14px; }
  .rc-logo { height: 40px; margin-bottom: 8px; }
  .rc-facts { margin-top: 14px; }
  .rc-fact { padding: 9px 12px; }
  .rc-sec { margin-top: 16px; }
  .rc-sec-h { margin-bottom: 8px; }
  .acct-dt { padding: 9px 12px; }
  .rc-line { padding: 9px 14px; }
  .rc-lines-n { margin-top: 6px; }
  .rc-terms { margin-top: 16px; padding-top: 12px; }
  .rc-terms p { font-size: 12px; line-height: 17px; margin-bottom: 6px; }
  .rc-terms p.rc-terms-h { font-size: 13.5px; line-height: 19px; margin-bottom: 4px; }
  .rc-terms-c { font-size: 11px !important; }
}

/* receipt — region / competition purchase list */
.rc-regions { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; }
.rc-region { display: flex; align-items: center; gap: 11px; padding: 12px 16px;
  background: #fff; border-top: 1px solid var(--line); }
.rc-region:first-child { border-top: 0; }
.rc-region-ic { flex: 0 0 30px; width: 30px; height: 30px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 9px;
  background: var(--tint-blue); color: var(--ink-blue); }
.rc-region-ic .ic { width: 17px; height: 17px; }
.rc-region-n { font-size: 15px; line-height: 21px; font-weight: 800; color: var(--navy);
  overflow-wrap: anywhere; }
@media print {
  .rc-region { padding: 8px 14px; }
  .rc-region-ic { background: #fff; }
}

/* region receipt — keep the printed invoice on a single A4 page */
@media print {
  .rc-regions { break-inside: avoid; page-break-inside: avoid; }
  .rc-page .rc-sec { margin-top: 14px; }
}

/* receipts — final print compaction (applies to both receipt pages) */
@media print {
  @page { size: A4 portrait; margin: 12mm 12mm; }
  .rc-page .rc-head { padding-bottom: 10px; }
  .rc-page .rc-facts { margin-top: 10px; }
  .rc-page .rc-fact { padding: 7px 12px; }
  .rc-page .rc-sec { margin-top: 11px; }
  .rc-page .rc-sec-h { margin-bottom: 6px; }
  .rc-page .acct-dt { padding: 7px 12px; }
  .rc-page .rc-line { padding: 7px 14px; }
  .rc-page .rc-region { padding: 6px 14px; }
  .rc-page .rc-lines-n { margin-top: 5px; }
  .rc-page .rc-terms { margin-top: 11px; padding-top: 9px; }
  .rc-page .rc-terms p { margin-bottom: 5px; }
}

/* receipt — credit / discount line */
.rc-line-v.is-credit { color: var(--ink-green); }

/* =====================================================================
   SUPPORT  (advanced-support.html)
   ===================================================================== */
.sup-hours-v { font-family: var(--font); font-weight: 800; font-size: 21px; color: var(--navy); margin: 0 0 4px; }
.sup-hours-n { font-size: 13px; line-height: 19px; color: var(--ink-soft); margin: 0; }

.sup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.sup-grid > .card { align-self: start; }
.sup-card { margin-bottom: 18px; }
.sup-grid .sup-card { margin-bottom: 0; }
.sup-tile { width: 38px; height: 38px; }
.sup-pill { margin-left: auto; flex: 0 0 auto; }

.sup-p { font-size: 15px; line-height: 23px; color: var(--ink); margin: 0 0 14px; }

.sup-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 9px; }
.sup-list li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; line-height: 21px; color: var(--ink); }
.sup-list li .ic { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 2px; color: var(--ink-green); }

.sup-dl { margin: 0 0 16px; }
.sup-fee { font-family: var(--font); font-weight: 800; font-size: 19px; color: var(--ink-purple); }
.sup-fee-n { display: block; margin-top: 2px; }
.sup-cutoff { margin: 0 0 12px; }
.sup-avail { margin: 0 0 16px; }

.sup-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.sup-steps { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 10px; }
.sup-steps li { font-size: 14px; line-height: 21px; color: var(--ink); }

.sup-alert { border-radius: 11px; padding: 11px 14px; font-size: 14px; line-height: 21px; margin: 0 0 14px; }
.sup-alert[hidden] { display: none !important; }
.sup-alert.is-ok { background: var(--tint-green); color: var(--ink-green); border: 1px solid #CBE7B8; }

.sup-msg { min-height: 120px; resize: vertical; }
.sup-ph { margin-top: 4px; }

@media (max-width: 1100px) {
  .sup-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sup-actions { flex-direction: column; align-items: stretch; }
  .sup-actions .btn { width: 100%; justify-content: center; }
  .sup-pill { margin-left: 0; }
  .sup-hours-v { font-size: 19px; }
}

/* --------------------------------------------------------------------------
   REGISTER (register.html)
   Public sign-up. Reuses the .auth split-screen shell from the sign-in page;
   the only structural difference is that the form is long, so the panel is
   top-aligned instead of centred and the card is wider.
   -------------------------------------------------------------------------- */

.auth-reg .auth-panel { justify-content: flex-start; }
/* The sign-up form is much taller than the brand copy, so the copy rides
   along instead of being centred in a very tall column. */
.auth-reg .auth-brand { align-items: flex-start; }
.auth-reg .auth-brand-inner { position: sticky; top: 56px; }
.auth-card.reg-card { max-width: 560px; }
.auth-foot > span { flex: 1 1 auto; min-width: 0; }
.auth-reg .auth-legal { max-width: 560px; }

/* Fieldsets carry no chrome of their own — the numbered legend does the work. */
.reg-set { border: 0; margin: 0 0 26px; padding: 0; min-width: 0; }
.reg-set:last-of-type { margin-bottom: 22px; }

.reg-legend {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 0 0 12px; margin: 0 0 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font); font-weight: 800;
  font-size: 16px; line-height: 22px; color: var(--navy);
}
.reg-num {
  flex: none; width: 24px; height: 24px; border-radius: 8px;
  display: inline-grid; place-items: center;
  font-size: 13px; line-height: 1; color: #fff;
  background: var(--green);
}
.reg-num.blue   { background: var(--mid-blue); }
.reg-num.purple { background: var(--purple); }
.reg-num.amber  { background: var(--amber); }

.reg-hint {
  margin: -6px 0 16px; font-family: var(--font-fine);
  font-size: 13px; line-height: 20px; color: var(--ink-soft);
}

/* ---- Account-type cards ---- */
.reg-types { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.reg-type { display: block; cursor: pointer; }
.reg-type input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.reg-type-body {
  display: block; height: 100%;
  padding: 14px 15px 15px;
  border: 1.5px solid var(--line-strong); border-radius: 12px;
  background: var(--white);
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.reg-type-body .ic {
  width: 22px; height: 22px; margin-bottom: 9px;
  color: var(--ink-soft);
  transition: color .14s ease;
}
.reg-type-t {
  display: block; font-family: var(--font); font-weight: 800;
  font-size: 15px; line-height: 21px; color: var(--navy);
}
.reg-type-n {
  display: block; margin-top: 4px; font-family: var(--font-fine);
  font-size: 12.5px; line-height: 18px; color: var(--ink-soft);
}
.reg-type:hover .reg-type-body { border-color: var(--navy-soft); }
.reg-type input:focus-visible + .reg-type-body {
  outline: 2px solid var(--brand-blue); outline-offset: 2px;
}
.reg-type input:checked + .reg-type-body {
  border-color: var(--green);
  background: var(--tint-green);
  box-shadow: inset 0 0 0 1px var(--green);
}
.reg-type input:checked + .reg-type-body .ic { color: var(--ink-green); }

/* ---- Two-up field row ---- */
.reg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* Helper line under an input. Sits tighter than a standalone .fine. */
.field-note { margin: 6px 0 0; font-size: 12.5px; line-height: 18px; }
.reg-form .field { margin-bottom: 18px; }
.reg-form .reg-row .field { margin-bottom: 18px; }
.reg-set > .field:last-child { margin-bottom: 0; }

/* ---- Timer warning, above the agreement ---- */
.reg-timer { margin: 4px 0 18px; }

/* ---- Success dialog list ---- */
.reg-next {
  margin: 14px 0 0; padding-left: 20px;
  font-family: var(--font-fine); font-size: 14px; line-height: 21px; color: var(--ink);
}
.reg-next li { margin-bottom: 7px; }
.reg-next li:last-child { margin-bottom: 0; }
.reg-next b { font-family: var(--font); font-weight: 800; color: var(--navy); }

@media (max-width: 560px) {
  .reg-types { grid-template-columns: 1fr; }
  .reg-row { grid-template-columns: 1fr; gap: 0; }
  .auth-reg .dialog-foot .btn { width: 100%; justify-content: center; }
}