/* ==========================================================
   Miss Nebo: shared styles (public site + portal)
   Palette & type from the Miss America State & Local Branding Guidelines:
   Dark Grey #3C3C3C · White #FFFFFF · Gold #B49B57
   Complementary greys #757575, #DFDFDF · Logotype face: Konnect Bold
   ========================================================== */
:root {
  /* Safe areas (notch, status bar, home indicator). The Android app injects
     --safe-area-inset-* where the WebView can't report env() values. */
  --sa-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --sa-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
  --sa-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --sa-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));

  /* Official brand colors */
  --brand-grey: #3c3c3c;
  --brand-white: #ffffff;
  --brand-gold: #b49b57;
  --brand-grey-md: #757575;
  --brand-grey-lt: #dfdfdf;

  /* Working tokens (derived from the brand colors) */
  --noir-900: var(--brand-grey);
  --noir-800: var(--brand-grey);
  --noir-700: #4a4a4a;          /* hover/depth tint of Dark Grey */
  --noir-100: #efefef;          /* tint of Light Grey */
  --gold-500: var(--brand-gold);
  --gold-400: var(--brand-gold);
  --gold-hover: #c2ab6b;        /* hover tint of Gold */
  --gold-ink: #7d6b3a;          /* Gold shade for small text on gold tints */
  --gold-100: #f4efe2;          /* tint of Gold */
  --champ-400: #d6c79e;
  --champ-100: #f6f6f6;
  --ink: var(--brand-grey);
  --muted: #5e5e5e;              /* secondary text: 6.5:1 on white (the brand grey #757575 was 4.6:1) */
  --line: var(--brand-grey-lt);
  --bg: var(--brand-white);
  --card: var(--brand-white);
  --surface: #f7f7f7;           /* off-white section ground */
  --ok: #2f7d55;
  --warn: #a8741c;
  --danger: #a8443c;
  --ok-bg: #e3f3ea; --warn-bg: #fbf0dc; --danger-bg: #f8e3e1;
  --danger-line: #eac3be; --warn-line: #efd9ad; --gold-line: #e6dcc0;
  --day-other-bg: #fafafa; --day-other-ink: #b5b5b5;
  --ph-top: #ffffff; --ph-mid: #f2f2f2;          /* photo placeholders */
  --tabbar-bg: rgba(255, 255, 255, .96);
  --text-strong: var(--noir-800);               /* dark text on light surfaces */
  --radius: 14px;
  --shadow: 0 1px 2px rgba(60, 60, 60, .06), 0 8px 24px rgba(60, 60, 60, .07);
  --display: "Konnect", "Avenir Next", "Figtree", system-ui, sans-serif;
  --sans: "Avenir Next", "Avenir", "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.08; letter-spacing: -.025em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 2.9rem); }
h3 { font-size: 1.45rem; }
p { margin: 0 0 1em; }

.container { width: min(1160px, 100% - 32px); margin-inline: auto; }
.eyebrow {
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-500); font-weight: 600; margin-bottom: .8rem; display: block;
}
.section-head .eyebrow::after { content: ""; display: block; width: 36px; height: 1px; background: var(--gold-500); margin-top: .7rem; }
.section-head.center .eyebrow::after { margin-inline: auto; }
.hero h1 em { font-style: normal; color: var(--brand-gold); }
.muted { color: var(--muted); }
.center { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
  padding: .8rem 1.4rem; border-radius: 999px; font-weight: 600; font-size: .92rem;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease;
  font-family: var(--sans);
}
.btn:hover { transform: translateY(-1px); }
.btn-gold { background: var(--brand-gold); color: #fff; }
.btn-gold:hover { background: var(--gold-hover); }
.btn-outline { border-color: currentColor; color: inherit; background: transparent; }
.btn-noir { background: var(--noir-800); color: #fff; }
.btn-noir:hover { background: var(--noir-700); }
.btn-ghost { background: transparent; color: var(--text-strong); border-color: var(--line); }
.btn-sm { padding: .45rem .9rem; font-size: .8rem; }

/* ---------- Public header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(60, 60, 60, .97); backdrop-filter: blur(10px);
  color: #fff; border-bottom: 1px solid rgba(180, 155, 87, .25);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand-mark { width: 38px; height: 38px; color: var(--gold-500); }
.brand-name { font-family: var(--display); font-size: 1.55rem; font-weight: 600; letter-spacing: .02em; }
.brand-sub { display: block; font-size: .72rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gold-400); margin-top: -4px; }
.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a { text-decoration: none; font-size: .88rem; opacity: .85; }
.nav a:hover { opacity: 1; color: var(--gold-400); }
.nav-toggle { display: none; background: none; border: 0; color: #fff; font-size: 1.6rem; cursor: pointer; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: var(--noir-900); padding: 1rem 16px 1.5rem; gap: .2rem; display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav .btn { margin-top: .8rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(180, 155, 87, .35), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(180, 155, 87, .12), transparent 60%),
    linear-gradient(160deg, var(--noir-900), var(--noir-700));
  padding: clamp(4rem, 10vw, 7.5rem) 0 clamp(5rem, 10vw, 8rem);
}
.hero .container { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.hero p.lead { font-size: 1.15rem; opacity: .85; max-width: 34rem; }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.8rem; }
.mountains { position: absolute; bottom: -1px; left: 0; width: 100%; height: 120px; color: var(--bg); }
.countdown { display: flex; gap: 1rem; margin-top: 2.2rem; }
.countdown div { text-align: center; min-width: 64px; }
.countdown strong { display: block; font-family: var(--display); font-size: 2.2rem; color: var(--gold-400); line-height: 1; }
.countdown span { font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; opacity: .7; }

.hero-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(180, 155, 87, .35);
  border-radius: 22px; padding: 1.2rem; backdrop-filter: blur(6px);
}
.portrait {
  aspect-ratio: 4 / 5; border-radius: 16px; position: relative; overflow: hidden;
  background: linear-gradient(170deg, var(--ph-top), var(--ph-mid) 55%, var(--brand-grey-lt));
  display: grid; place-items: center; color: var(--noir-800);
}
.portrait .initials { font-family: var(--display); font-size: 5rem; opacity: .35; }
.portrait .ph-label {
  position: absolute; bottom: .8rem; left: .8rem; font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; background: rgba(255,255,255,.75); padding: .25rem .6rem; border-radius: 999px;
}
.hero-card .caption { padding: 1rem .4rem .3rem; }
.hero-card .caption strong { font-family: var(--display); font-size: 1.5rem; display: block; }

@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-card { max-width: 380px; }
}

/* ---------- Sections ---------- */
section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section-head { max-width: 640px; margin-bottom: 2.8rem; }
.section-head.center { margin-inline: auto; }
.alt { background: var(--surface); border-block: 1px solid var(--line); }

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem; box-shadow: var(--shadow);
}
.pillar .icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--gold-100); color: var(--gold-500); margin-bottom: 1rem;
}
.pillar .icon svg { width: 24px; height: 24px; }

.titleholder { display: grid; grid-template-columns: 240px 1fr; gap: 1.8rem; align-items: center; }
.titleholder .portrait { border-radius: 12px; }
.titleholder .role { color: var(--gold-500); font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.titleholder .csi {
  background: var(--champ-100); border-radius: 10px; padding: .8rem 1rem; font-size: .9rem; margin: 1rem 0;
}
@media (max-width: 640px) { .titleholder { grid-template-columns: 1fr; } .titleholder .portrait { max-width: 260px; } }

.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--gold-100); }
.timeline li { position: relative; padding: 0 0 1.6rem 1.6rem; }
.timeline li::before {
  content: ""; position: absolute; left: -7px; top: .35rem; width: 12px; height: 12px;
  border-radius: 50%; background: var(--gold-500); box-shadow: 0 0 0 4px var(--gold-100);
}
.timeline .date { font-size: .78rem; font-weight: 600; color: var(--gold-500); letter-spacing: .08em; text-transform: uppercase; }

.stat-band {
  background: var(--noir-900); color: #fff; border-radius: 22px; padding: 2.4rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center;
}
.stat-band strong { font-family: var(--display); font-size: 2.6rem; color: var(--gold-400); display: block; line-height: 1.1; }
.stat-band span { font-size: .82rem; opacity: .75; }
@media (max-width: 640px) { .stat-band { grid-template-columns: repeat(2, 1fr); } }

.sponsor-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.sponsor {
  height: 84px; border: 1px dashed var(--line); border-radius: 12px; display: grid; place-items: center;
  font-size: .8rem; color: var(--muted); text-align: center; padding: .5rem; background: var(--card);
}
@media (max-width: 900px) { .sponsor-row { grid-template-columns: repeat(3, 1fr); } }

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 170px; gap: .8rem; }
.gallery div { border-radius: 12px; background: linear-gradient(135deg, var(--noir-100), var(--gold-100)); }
.gallery div:nth-child(1) { grid-row: span 2; background: linear-gradient(160deg, var(--champ-100), var(--gold-100)); }
.gallery div:nth-child(4) { grid-column: span 2; background: linear-gradient(135deg, var(--gold-100), var(--champ-100)); }
@media (max-width: 640px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

form .field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
label { font-size: .82rem; font-weight: 600; }
input, select, textarea {
  font: inherit; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink);
  width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold-400); border-color: transparent; }

.cta {
  background: linear-gradient(140deg, var(--noir-800), var(--noir-700)); color: #fff; border-radius: 22px;
  padding: clamp(2rem, 5vw, 3.5rem); display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap;
}

.site-footer { background: var(--noir-900); color: rgba(255,255,255,.75); padding: 3.5rem 0 2rem; font-size: .88rem; }
.site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
.site-footer h4 { color: #fff; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 1rem; }
.site-footer a { text-decoration: none; display: block; padding: .2rem 0; }
.site-footer a:hover { color: var(--gold-400); }
.site-footer .legal { border-top: 1px solid rgba(255,255,255,.1); margin-top: 2.5rem; padding-top: 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: .78rem; }
@media (max-width: 760px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } }

/* ---------- Login ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-art {
  background:
    radial-gradient(700px 400px at 90% 0%, rgba(180, 155, 87, .35), transparent 60%),
    linear-gradient(160deg, var(--noir-900), var(--noir-700));
  color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between;
}
.auth-form { display: grid; place-items: center; padding: 2rem 16px; }
.auth-form .box { width: min(420px, 100%); }
.role-pick { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1.4rem; }
.role-pick button {
  font: inherit; text-align: left; padding: 1rem; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--card); cursor: pointer;
}
.role-pick button strong { display: block; font-size: .95rem; }
.role-pick button span { font-size: .78rem; color: var(--muted); }
.role-pick button.active { border-color: var(--gold-500); background: var(--gold-100); }
.demo-note { font-size: .8rem; background: var(--champ-100); padding: .8rem 1rem; border-radius: 10px; margin-top: 1.2rem; }
@media (max-width: 820px) { .auth-wrap { grid-template-columns: 1fr; } .auth-art { display: none; } }

/* ---------- Portal ---------- */
.portal { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--noir-900); color: rgba(255,255,255,.8); padding: 1.4rem 1rem;
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
}
.sidebar .brand { color: #fff; padding: 0 .5rem 1.4rem; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 1rem; }
.side-label { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; opacity: .45; padding: 1rem .7rem .4rem; }
/* Menu groups that fold away */
.side-group { display: flex; align-items: center; gap: .5rem; width: 100%; border: 0; background: none; color: inherit; font: inherit; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .6; cursor: pointer; text-align: left; border-radius: 8px; }
.side-group:hover { opacity: .95; background: rgba(255,255,255,.04); }
.side-group > span:first-child { flex: 1; }
.side-group .count { background: var(--champ-400); color: var(--noir-900); font-size: .72rem; letter-spacing: 0; border-radius: 999px; padding: 0 .45rem; }
.side-chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.side-group[aria-expanded="false"] .side-chev { transform: rotate(-90deg); }
html.side-collapsed .side-group > span, html.side-collapsed .side-group .side-chev { display: none; }
.side-link {
  display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border-radius: 9px;
  text-decoration: none; font-size: .9rem; cursor: pointer;
}
.side-link svg { width: 18px; height: 18px; opacity: .8; flex-shrink: 0; }
.side-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.side-link.active { background: rgba(180, 155, 87, .16); color: var(--gold-400); }
.side-link .count { margin-left: auto; background: var(--champ-400); color: var(--noir-900); font-size: .78rem; font-weight: 700; border-radius: 999px; padding: 0 .45rem; }
.sidebar .me { margin-top: auto; padding: 1rem .5rem 0; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: .7rem; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: linear-gradient(135deg, var(--gold-400), var(--champ-400)); color: var(--noir-900); font-weight: 700; font-size: .85rem;
}
.me small { display: block; opacity: .55; font-size: .78rem; }

.main { padding: 1.6rem clamp(16px, 3vw, 2.4rem) 3rem; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.topbar h1 { font-size: 2.1rem; margin: 0; }
.topbar .search { max-width: 280px; }
.mobile-menu { display: none; }

@media (max-width: 900px) {
  .portal { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; z-index: 60; width: 260px; transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar.open { transform: none; box-shadow: 0 0 0 100vmax rgba(40, 40, 40, .4); }
  .mobile-menu { display: inline-flex; }
  .search-wrap, .hide-sm { display: none; }
}

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.2rem; }
.kpi span { font-size: .78rem; color: var(--muted); }
.kpi strong { display: block; font-family: var(--display); font-size: 2rem; line-height: 1.2; }
.kpi em { font-style: normal; font-size: .78rem; color: var(--ok); }
@media (max-width: 1000px) { .kpis { grid-template-columns: repeat(2, 1fr); } }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem 1.4rem; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 1rem; flex-wrap: wrap; }
.panel-head h3 { margin: 0; font-size: 1.3rem; }
.two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.2rem; }
@media (max-width: 1000px) { .two-col { grid-template-columns: 1fr; } }
.stack > * + * { margin-top: 1.2rem; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; gap: 1rem; align-items: flex-start; padding: .85rem 0; border-top: 1px solid var(--line); }
.list li:first-child { border-top: 0; padding-top: 0; }
.date-chip {
  flex-shrink: 0; width: 52px; text-align: center; border-radius: 10px; background: var(--gold-100); padding: .35rem 0;
}
.date-chip b { display: block; font-family: var(--display); font-size: 1.4rem; line-height: 1; }
.date-chip small { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.list .grow { flex: 1; min-width: 0; }
.list .grow strong { display: block; font-size: .94rem; }
.list .grow span { font-size: .82rem; color: var(--muted); }

.tag { display: inline-block; font-size: .78rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; }
.tag-gold { background: var(--gold-100); color: var(--gold-ink); }
.tag-noir { background: var(--noir-100); color: var(--noir-700); }
.tag-champ { background: var(--noir-900); color: var(--gold-400); }
.tag-ok { background: var(--ok-bg); color: var(--ok); }
.tag-warn { background: var(--warn-bg); color: var(--warn); }
.tag-danger { background: var(--danger-bg); color: var(--danger); }

table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th { text-align: left; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
td { padding: .8rem .7rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; }

.progress { height: 8px; background: var(--noir-100); border-radius: 999px; overflow: hidden; }
.progress > div { height: 100%; background: linear-gradient(90deg, var(--gold-500), var(--champ-400)); }

.calendar { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.calendar .dow { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: .5rem; background: var(--bg); border-bottom: 1px solid var(--line); text-align: center; }
.calendar .day { min-height: 96px; padding: .4rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .78rem; }
.calendar .day:nth-child(7n) { border-right: 0; }
.calendar .day.other { background: var(--day-other-bg); color: var(--day-other-ink); }
.calendar .day.today .num { background: var(--noir-800); color: #fff; border-radius: 50%; width: 22px; height: 22px; display: inline-grid; place-items: center; }
.calendar .ev { display: block; margin-top: .25rem; padding: .15rem .35rem; border-radius: 5px; font-size: .78rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-appearance { background: var(--noir-900); color: var(--gold-400); }
.ev-board { background: var(--noir-100); color: var(--noir-700); }
.ev-prep { background: var(--gold-100); color: var(--gold-ink); }
@media (max-width: 700px) { .calendar .day { min-height: 60px; } .calendar .ev { font-size: 0; height: 6px; padding: 0; } }

.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.doc { border: 1px solid var(--line); border-radius: 12px; padding: 1rem; background: var(--card); display: flex; gap: .8rem; align-items: flex-start; }
.doc .ficon { width: 38px; height: 46px; border-radius: 6px; display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.ficon.pdf { background: var(--brand-grey); } .ficon.doc { background: var(--brand-grey-md); } .ficon.xls { background: var(--brand-gold); } .ficon.img { background: var(--gold-ink); }
.doc strong { font-size: .88rem; display: block; line-height: 1.3; }
.doc span { font-size: .78rem; color: var(--muted); }

.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--line); margin-bottom: 1.2rem; overflow-x: auto; }
.tabs button { font: inherit; font-size: .86rem; background: none; border: 0; padding: .6rem .9rem; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button.active { color: var(--text-strong); border-color: var(--gold-500); font-weight: 600; }

.thread { display: grid; grid-template-columns: 280px 1fr; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); min-height: 480px; }
.thread-list { border-right: 1px solid var(--line); }
.thread-item { padding: .9rem 1rem; border-bottom: 1px solid var(--line); cursor: pointer; }
.thread-item.active { background: var(--gold-100); }
.thread-item strong { font-size: .88rem; display: block; }
.thread-item span { font-size: .78rem; color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat { display: flex; flex-direction: column; }
.chat-body { flex: 1; padding: 1.2rem; display: flex; flex-direction: column; gap: .8rem; overflow-y: auto; }
.bubble { max-width: 75%; padding: .7rem .95rem; border-radius: 14px; font-size: .88rem; background: var(--bg); border: 1px solid var(--line); }
.bubble small { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .2rem; font-weight: 600; }
.bubble.me { align-self: flex-end; background: var(--noir-800); color: #fff; border-color: transparent; }
.bubble.me small { color: var(--gold-400); }
.chat-input { display: flex; gap: .6rem; padding: .9rem; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .thread { grid-template-columns: 1fr; } .thread-list { display: none; } }

.checklist li { align-items: center; }
.checkbox { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line); flex-shrink: 0; display: grid; place-items: center; cursor: pointer; }
.checkbox.done { background: var(--ok); border-color: var(--ok); color: #fff; }
.checklist li.done strong { text-decoration: line-through; color: var(--muted); }


.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--noir-900); color: #fff; padding: .7rem 1.2rem; border-radius: 999px; font-size: .85rem; opacity: 0; transition: all .25s ease; z-index: 100; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%); }

/* ==========================================================
   Portal refinements (v2)
   ========================================================== */
.main { background: var(--surface); }
.topbar { padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.tb-left { display: flex; align-items: center; gap: .8rem; }
.tb-right { display: flex; align-items: center; gap: .6rem; }
.tb-date { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-500); font-weight: 600; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--card);
  display: inline-grid; place-items: center; cursor: pointer; color: var(--ink); position: relative; font-size: 1rem;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { border-color: var(--gold-400); }
.bell-dot {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; border-radius: 999px; padding: 0 5px;
  background: var(--gold-500); color: var(--noir-900); font-size: .72rem; font-weight: 700; display: grid; place-items: center;
}
.bell-dot:empty { display: none; }
.search-wrap, .bell-wrap { position: relative; }
.search { width: 280px; padding: .55rem .9rem; font-size: .85rem; }
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; width: 340px; max-height: 420px; overflow-y: auto; z-index: 70;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .14); padding: .4rem;
}
.dropdown-right { left: auto; right: 0; }
.dd-head { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: .6rem .7rem .3rem; }
.dd-item { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem .7rem; border-radius: 8px; cursor: pointer; font-size: .85rem; text-decoration: none; }
.dd-item:hover { background: var(--gold-100); }
.dd-item small { display: block; color: var(--muted); font-size: .78rem; }
.dd-item .dd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); margin-top: .4rem; flex-shrink: 0; }
.dd-empty { padding: 1rem .7rem; color: var(--muted); font-size: .85rem; }

.banner {
  position: relative; overflow: hidden; color: #fff; border-radius: 16px; padding: 1.7rem 1.9rem; margin-bottom: 1.5rem;
  background:
    radial-gradient(500px 220px at 95% 0%, rgba(180, 155, 87, .38), transparent 70%),
    linear-gradient(120deg, var(--noir-900), var(--noir-700));
  border: 1px solid rgba(180, 155, 87, .35);
  display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; flex-wrap: wrap;
}
.banner h2 { font-size: 2rem; margin: 0 0 .2rem; }
.banner p { margin: 0; opacity: .75; font-size: .9rem; }
.banner .eyebrow { margin-bottom: .4rem; }
.banner-crown { position: absolute; right: 22%; bottom: -18px; width: 150px; color: rgba(180, 155, 87, .12); pointer-events: none; }
.banner > div { position: relative; }

.kpi { position: relative; }
.kpi-top { display: flex; justify-content: space-between; align-items: center; }
.kpi-top i { width: 30px; height: 30px; border-radius: 8px; background: var(--gold-100); color: var(--gold-500); display: grid; place-items: center; }
.kpi-top i svg { width: 16px; height: 16px; }
.kpi strong { font-variant-numeric: tabular-nums; }

.panel-head h3 { display: flex; align-items: center; gap: .6rem; }
.link-more { color: var(--muted); font-size: .82rem; text-decoration: none; }
.link-more:hover { color: var(--gold-500); }

.list li.clickable { cursor: pointer; border-radius: 10px; transition: background .12s ease; margin-inline: -.6rem; padding-inline: .6rem; }
.list li.clickable:hover { background: var(--gold-100); }
.calendar .ev { cursor: pointer; }
.rsvp { font-size: .78rem; font-weight: 600; color: var(--ok); white-space: nowrap; }

/* Next-up spotlight card */
.spotlight { display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center; }
.spotlight .big-date { text-align: center; border: 1px solid var(--gold-400); border-radius: 12px; padding: .6rem 1rem; }
.spotlight .big-date b { display: block; font-family: var(--display); font-size: 2.4rem; line-height: 1; }
.spotlight .big-date small { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-500); }
@media (max-width: 640px) { .spotlight { grid-template-columns: auto 1fr; } .spotlight > :last-child { grid-column: 1 / -1; } }

/* Titleholder cards (board view) */
.th-card { display: grid; grid-template-columns: 96px 1fr; gap: 1.2rem; }
.th-photo { width: 96px; aspect-ratio: 4/5; border-radius: 10px; background: linear-gradient(170deg, var(--ph-top), var(--ph-mid) 55%, var(--brand-grey-lt)); display: grid; place-items: center; font-family: var(--display); font-size: 2rem; color: rgba(60,60,60,.3); }
.th-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: .8rem 0; }
.th-stats div { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .6rem; }
.th-stats b { display: block; font-family: var(--display); font-size: 1.4rem; line-height: 1.1; }
.th-stats span { font-size: .78rem; color: var(--muted); }
@media (max-width: 520px) { .th-card { grid-template-columns: 1fr; } }

/* Profile */
.profile-grid { display: grid; grid-template-columns: 260px 1fr; gap: 1.2rem; align-items: start; }
.profile-grid .portrait { border-radius: 12px; }
@media (max-width: 860px) { .profile-grid { grid-template-columns: 1fr; } .profile-grid .portrait { max-width: 260px; } }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1rem; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.fieldset-title { font-family: var(--display); font-size: 1.15rem; margin: .6rem 0 .6rem; padding-top: .8rem; border-top: 1px solid var(--line); }

/* Drawer + modal */
.scrim { position: fixed; inset: 0; background: rgba(40, 40, 40, .4); z-index: 75; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 100%); background: var(--card); z-index: 76;
  transform: translateX(105%); transition: transform .22s ease; box-shadow: -12px 0 40px rgba(40, 40, 40, .15);
  display: flex; flex-direction: column;
}
.drawer.open { transform: none; }
.drawer-head { background: var(--noir-900); color: #fff; padding: 1.4rem 1.5rem; border-bottom: 2px solid var(--gold-500); }
.drawer-head h2 { font-size: 1.7rem; margin: .5rem 0 0; }
.drawer-body { padding: 1.3rem 1.5rem; overflow-y: auto; flex: 1; }
.drawer-foot { padding: 1rem 1.5rem; border-top: 1px solid var(--line); display: flex; gap: .6rem; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: .5rem 1rem; font-size: .88rem; margin: 0 0 1.2rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.close-x { float: right; background: none; border: 0; color: #fff; font-size: 1.4rem; cursor: pointer; opacity: .7; line-height: 1; }
.close-x:hover { opacity: 1; }

.modal-back { position: fixed; inset: 0; background: rgba(40, 40, 40, .45); z-index: 90; display: grid; place-items: center; padding: 16px; }
.modal { background: var(--card); border-radius: 16px; width: min(540px, 100%); max-height: 90vh; overflow-y: auto; border-top: 3px solid var(--gold-500); }
.modal-head { padding: 1.3rem 1.5rem .4rem; display: flex; justify-content: space-between; align-items: center; }
.modal-head h2 { font-size: 1.6rem; margin: 0; }
.modal-head .close-x { color: var(--ink); }
.modal form { padding: .6rem 1.5rem 1.5rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .6rem; }

:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .drawer, .toast, .btn { transition: none; } }
.icon-btn.mobile-menu { display: none; }
.sidebar .brand-sub { letter-spacing: .16em; white-space: nowrap; }
@media (max-width: 900px) { .icon-btn.mobile-menu { display: inline-grid; } }

/* ==========================================================
   Official brand elements (v3)
   ========================================================== */
/* Logotype: Konnect Bold, title case, stacked, tracking -35 */
.logotype {
  font-family: "Konnect", "Avenir Next", system-ui, sans-serif; font-weight: 700;
  letter-spacing: -.035em; line-height: .86; display: inline-flex; flex-direction: column;
  text-transform: none; white-space: nowrap;
}
.logotype.gold { color: var(--brand-gold); }
.logotype.white { color: #fff; }
.logotype.grey { color: var(--brand-grey); }

/* Local crown icons, recolored via mask so they only ever render in brand colors */
.crown {
  display: inline-block; aspect-ratio: 3190 / 1388; background-color: var(--brand-gold);
  -webkit-mask: url("brand/crown-icon-miss.png") center / contain no-repeat;
          mask: url("brand/crown-icon-miss.png") center / contain no-repeat;
}
.crown.teen { aspect-ratio: 3190 / 1132; -webkit-mask-image: url("brand/crown-icon-teen.png"); mask-image: url("brand/crown-icon-teen.png"); }
.crown.white { background-color: #fff; }
.crown.grey { background-color: var(--brand-grey); }
.crown.current { background-color: currentColor; }

/* Header / sidebar lockup */
.brand { gap: .75rem; }
.brand .crown { width: 46px; }
.brand .logotype { font-size: 1.28rem; }
.brand-sub { font-family: var(--sans); letter-spacing: .2em; margin-top: 4px; }
.lockup { display: inline-flex; align-items: center; gap: .75rem; }
.lockup-text { display: flex; flex-direction: column; }

/* Eyebrows & section heads echo the guideline headers: gold caps + dark rule */
.eyebrow { font-family: var(--display); letter-spacing: .12em; font-weight: 700; }
.section-head .eyebrow::after { width: 44px; height: 2px; background: var(--brand-grey); }
.hero .eyebrow, .banner .eyebrow, .auth-art .eyebrow { color: var(--brand-gold); }

/* Hero: crown image, dark grey ground, gold glow */
.hero {
  background:
    radial-gradient(700px 380px at 76% 40%, rgba(180,155,87,.30), transparent 65%),
    radial-gradient(900px 500px at -10% 110%, rgba(180,155,87,.10), transparent 60%),
    var(--brand-grey);
}
.hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.2rem); }
.hero-crown { position: relative; display: grid; place-items: center; }
.hero-crown img { width: 100%; max-width: 560px; filter: drop-shadow(0 18px 40px rgba(0,0,0,.35)); }
.hero-lockups { display: flex; gap: 2.2rem; justify-content: center; align-items: flex-end; margin-top: 1.4rem; flex-wrap: wrap; }
.hero-lockups .logotype { font-size: 1.6rem; }
.countdown strong { font-weight: 700; letter-spacing: -.02em; color: var(--brand-gold); }

/* Titleholder cards: gold logotype + crown on white */
.titleholder .th-mark { display: flex; align-items: flex-end; gap: .8rem; margin-bottom: .9rem; }
.titleholder .th-mark .crown { width: 64px; }
.titleholder .th-mark .logotype { font-size: 1.35rem; }
.titleholder .portrait .crown { width: 55%; opacity: .16; }
.division .crown { width: 70px; margin-bottom: .9rem; }
.division h3 { margin-bottom: .3rem; }

.stat-band strong { font-weight: 700; letter-spacing: -.02em; color: var(--brand-gold); }
.site-footer { background: var(--brand-grey); }
.site-footer .lockup .crown { width: 54px; }
.site-footer .lockup .logotype { font-size: 1.5rem; }
.cta { background: var(--brand-grey); }

/* Login art panel */
.auth-art { background: radial-gradient(700px 420px at 60% 45%, rgba(180,155,87,.26), transparent 65%), var(--brand-grey); }
.auth-lockup { display: flex; flex-direction: column; gap: 1.2rem; }
.auth-lockup .crown { width: 120px; }
.auth-lockup .logotype { font-size: clamp(3rem, 6vw, 4.6rem); }

/* Portal */
.sidebar { background: var(--brand-grey); }
.sidebar .brand .crown { width: 40px; }
.sidebar .brand .logotype { font-size: 1.15rem; }
.banner { background: radial-gradient(500px 240px at 88% 20%, rgba(180,155,87,.30), transparent 70%), var(--brand-grey); }
.banner .banner-crown { position: absolute; right: 20%; bottom: -14px; width: 190px; opacity: .14; }
.side-link .crown { width: 18px; opacity: .85; }
.kpi-top i .crown { width: 18px; }
.th-photo .crown { width: 70%; opacity: .35; }
.drawer-head { background: var(--brand-grey); }
.kpi strong, .date-chip b, .th-stats b, .spotlight .big-date b { font-weight: 700; letter-spacing: -.02em; }

/* ==========================================================
   Auth gate (v4)
   ========================================================== */
body.gating .portal { visibility: hidden; }
.gate-screen { display: none; }
body.gating .gate-screen {
  position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: .8rem;
  background: var(--brand-grey); color: rgba(255,255,255,.75); font-size: .9rem; z-index: 200;
}
.gate-screen .crown { width: 90px; animation: gate-pulse 1.4s ease-in-out infinite; }
@keyframes gate-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .gate-screen .crown { animation: none; } }

.notice { border-radius: 10px; padding: .75rem 1rem; font-size: .86rem; margin-bottom: 1rem; border: 1px solid; }
.notice.error { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.notice.info { background: var(--gold-100); border-color: var(--gold-line); color: var(--ink); }
.sent-card { text-align: center; border: 1px solid var(--line); border-radius: 14px; padding: 1.8rem 1.4rem; }
.sent-card .crown { width: 72px; margin-bottom: .6rem; }
.sent-card h3 { margin-bottom: .3rem; }
button[disabled] { opacity: .6; cursor: progress; }

/* ==========================================================
   Live data: empty states, onboarding, headshots (v5)
   ========================================================== */
.empty { text-align: center; padding: 2rem 1rem; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.empty .crown { width: 64px; opacity: .22; margin-bottom: .4rem; }
.empty strong { font-family: var(--display); font-size: 1.1rem; letter-spacing: -.01em; }
.empty p { color: var(--muted); font-size: .88rem; max-width: 42ch; margin: 0 0 .6rem; }

.tag-comp { background: var(--brand-gold); color: #fff; }
.calendar .ev-competition { background: var(--brand-gold); color: #fff; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: .78rem; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.link-btn:hover { color: var(--danger); }
td .link-btn, .doc .link-btn { text-decoration: none; }
td .link-btn:hover { color: inherit; }
.clickable-doc { cursor: pointer; transition: border-color .15s ease; }
.clickable-doc:hover { border-color: var(--brand-gold); }

/* Avatars with headshots */
.avatar.photo { padding: 0; overflow: hidden; background: var(--noir-100); }
.avatar.photo img { width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 32px; height: 32px; font-size: .78rem; }
.avatar.lg { width: 52px; height: 52px; font-size: 1rem; }
.avatar.xl { width: 76px; height: 76px; font-size: 1.3rem; border: 2px solid var(--brand-gold); }
.th-photo { overflow: hidden; }
.th-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Photo picker (onboarding + profile) */
.photo-pick { display: flex; flex-direction: column; align-items: center; gap: .7rem; cursor: pointer; font-weight: 400; }
.photo-frame {
  width: 170px; aspect-ratio: 4 / 5; max-width: 100%; border-radius: 14px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(170deg, var(--ph-top), var(--ph-mid) 55%, var(--brand-grey-lt)); border: 1px dashed var(--brand-grey-lt);
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.photo-frame .crown { width: 60%; opacity: .25; }
.photo-pick.big .photo-frame { width: 100%; border-style: solid; }
.photo-pick:hover .photo-frame { border-color: var(--brand-gold); }
.photo-pick:focus-within .photo-frame { outline: 2px solid var(--brand-gold); outline-offset: 2px; }

/* First-sign-in onboarding: full-width, no sidebar */
body.onboarding .portal { grid-template-columns: 1fr; }
body.onboarding .sidebar, body.onboarding .topbar { display: none; }
body.onboarding .main { display: grid; place-items: start center; padding-top: clamp(1.5rem, 5vw, 4rem); }
.onboard { width: min(860px, 100%); }
.onboard-head { text-align: center; margin-bottom: 1.6rem; display: flex; flex-direction: column; align-items: center; }
.onboard-head .crown { width: 110px; margin-bottom: .9rem; }
.onboard-head h2 { font-size: clamp(1.9rem, 4vw, 2.5rem); margin-bottom: .4rem; }
.onboard-head p { max-width: 54ch; margin: 0; }
.onboard-form { display: grid; grid-template-columns: 200px 1fr; gap: 1.8rem; align-items: start; border-top: 3px solid var(--brand-gold); }
@media (max-width: 680px) { .onboard-form { grid-template-columns: 1fr; } }
input:disabled { background: var(--surface); color: var(--muted); }
.public-empty { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.public-empty .crown { width: 70px; }
.public-empty .crown.grey { opacity: .22; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.site-check { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .7rem .9rem; font-size: .84rem; display: grid; gap: .25rem; margin-bottom: 1rem; }
.hof-empty { background: var(--surface); }
.hof-empty .crown { width: 70%; opacity: .5; }
.paste-example { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .6rem .8rem; font-size: .82rem; margin: 0 0 .8rem; }

/* ==========================================================
   Hall of Fame (public)
   ========================================================== */
.hof-hero { padding: clamp(3rem, 7vw, 5rem) 0; text-align: center; }
.hof-hero-inner { display: flex; flex-direction: column; align-items: center; }
.hof-hero h1 { font-size: clamp(2.4rem, 5.5vw, 3.8rem); }
.hof-hero .lead { max-width: 40rem; margin-inline: auto; opacity: .85; }
.hof-crowns { display: flex; gap: 1.2rem; align-items: flex-end; margin-bottom: 1rem; }
.hof-crowns .crown { width: 84px; }
.hof-crowns .crown.teen { width: 72px; }
.hof-stats { font-family: var(--display); color: var(--brand-gold); letter-spacing: .04em; margin: .4rem 0 0; }
.hof-section { padding-top: 2.5rem; }
.hof-tabs { justify-content: center; margin-bottom: 2rem; }
.hof-year { display: grid; grid-template-columns: 120px 1fr; gap: 1.5rem; padding: 1.6rem 0; border-top: 1px solid var(--line); }
.hof-year:first-child { border-top: 0; padding-top: 0; }
.hof-year-label { font-family: var(--display); font-weight: 800; font-size: 2.6rem; letter-spacing: -.03em; color: var(--brand-gold); line-height: 1; position: sticky; top: 90px; align-self: start; }
.hof-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; }
.hof-card { display: grid; grid-template-columns: 110px 1fr; gap: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); }
.hof-card.miss { border-top: 3px solid var(--brand-gold); }
.hof-card.teen { border-top: 3px solid var(--brand-grey); }
.hof-photo { aspect-ratio: 4 / 5; max-width: 100%; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(170deg, var(--ph-top), var(--ph-mid) 55%, var(--brand-grey-lt)); }
.hof-photo img { width: 100%; height: 100%; object-fit: cover; }
.hof-photo .crown { width: 62%; opacity: .25; }
.hof-body h3 { font-size: 1.25rem; margin: .35rem 0 .3rem; }
.hof-body p { font-size: .86rem; margin: 0 0 .4rem; }
.hof-title { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.hof-title .crown { width: 22px; flex-shrink: 0; }
.hof-csi { color: var(--ink); }
@media (max-width: 640px) {
  .hof-year { grid-template-columns: 1fr; gap: .8rem; }
  .hof-year-label { position: static; font-size: 2rem; }
  .hof-card { grid-template-columns: 90px 1fr; }
}

/* Calendar invites */
.form-grid.three { grid-template-columns: 1.3fr 1fr 1fr; }
@media (max-width: 560px) { .form-grid.three { grid-template-columns: 1fr 1fr; } .form-grid.three > :first-child { grid-column: 1 / -1; } }
.add-cal { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1.2rem; }
.modal-body { padding: .6rem 1.5rem 1.5rem; }
.sub-options { display: grid; gap: .6rem; }
.sub-options .btn { width: 100%; }
.event-cal { display: flex; gap: .5rem; align-items: center; font-size: .82rem; flex-wrap: wrap; }
.event-cal a, .event-cal .link-btn { color: var(--gold-ink); font-size: .82rem; }
.event-cal .link-btn:hover { color: var(--ink); }

/* Three titles */
.titleholder.stacked { grid-template-columns: 1fr; align-items: start; gap: 1.2rem; }
.titleholder.stacked .portrait { aspect-ratio: 4 / 5; max-height: 360px; width: 100%; }
.titleholder.stacked .th-mark .logotype { font-size: 1.25rem; }
.th-grid { align-items: stretch; }
.hero-lockups.three { gap: 1.6rem; }
.hero-lockups.three .logotype { font-size: 1.35rem; }
@media (max-width: 900px) and (min-width: 641px) { .th-grid { grid-template-columns: repeat(2, 1fr); } }

.th-group-label { display: flex; align-items: center; gap: .6rem; font-size: 1.15rem; margin: 2.2rem 0 1rem; }
.th-group-label:first-of-type { margin-top: 0; }
.th-group-label .crown { width: 34px; }
.grid-4.th-grid .titleholder.stacked .portrait { max-height: 300px; }
.grid-4.th-grid .titleholder.stacked .th-mark .logotype { font-size: 1.1rem; }
/* Keep the hero logotypes clear of the mountain edge on narrow screens */
@media (max-width: 900px) {
  .hero:not(.hof-hero) { padding-bottom: 9rem; }
  .hero-lockups.three { gap: 1rem 1.4rem; }
  .hero-lockups.three .logotype { font-size: 1.15rem; }
}

/* Apply to compete */
.apply-wrap { max-width: 780px; }
.apply-form { padding: clamp(1.4rem, 4vw, 2.4rem); }
.apply-step { font-size: 1.3rem; margin: 1.6rem 0 1rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.apply-step:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.comp-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 640px) { .comp-pick { grid-template-columns: 1fr; } }
.comp-option { display: block; position: relative; cursor: pointer; font-weight: 400; }
.comp-option input { position: absolute; opacity: 0; pointer-events: none; }
.comp-card { display: flex; flex-direction: column; gap: .35rem; border: 1.5px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; height: 100%; transition: border-color .15s ease, background .15s ease; }
.comp-card .crown { width: 54px; margin-bottom: .2rem; }
.comp-card small { color: var(--muted); font-size: .8rem; line-height: 1.45; }
.comp-option input:checked + .comp-card { border-color: var(--brand-gold); background: var(--gold-100); }
.comp-option input:focus-visible + .comp-card { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.agree { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; font-size: .9rem; margin: 1.2rem 0 .6rem; }
.agree input { width: auto; margin-top: .25rem; }

/* Contestant management */
.chip-row { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 1rem; }
.chip { font: inherit; font-size: .8rem; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: .3rem .8rem; cursor: pointer; color: var(--muted); }
.chip.active { background: var(--brand-grey); color: #fff; border-color: var(--brand-grey); }
.row-link { cursor: pointer; }
.row-link:hover td { background: var(--gold-100); }
.row-link:focus-visible { outline: 2px solid var(--brand-gold); }
.apply-link { margin-bottom: 1.2rem; }
.req-list li { align-items: flex-start; }
.req-list .grow > span { display: block; }
.req-side { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.review-actions { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.file-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .45rem; font-size: .84rem; }
.file-name { color: var(--ink); overflow-wrap: anywhere; }
.file-actions { display: inline-flex; gap: .35rem; }
.player-slot { flex-basis: 100%; }
.player-slot:empty { display: none; }
.music-meta { font-size: .82rem; margin-top: .35rem; }
.note-box { background: var(--danger-bg); border: 1px solid var(--danger-line); color: var(--ink); border-radius: 8px; padding: .55rem .75rem; font-size: .84rem; margin-top: .5rem; white-space: pre-line; }
.strong-link { font-size: inherit; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.checklist-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.req-card { display: flex; flex-direction: column; gap: .5rem; border-top: 3px solid var(--line); }
.req-card.approved { border-top-color: var(--ok); }
.req-card.submitted { border-top-color: var(--brand-gold); }
.req-card.needs_changes { border-top-color: var(--danger); }
.req-card-head { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; }
.req-card-head h3 { font-size: 1.1rem; margin: 0 0 .15rem; }
.req-card > .btn { align-self: flex-start; margin-top: .3rem; }
.starter-row { display: flex; gap: .7rem; align-items: flex-start; font-weight: 400; padding: .55rem 0; border-top: 1px solid var(--line); }
.starter-row:first-of-type { border-top: 0; }
.starter-row input { margin-top: .3rem; }
.thread-group { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: .9rem 1rem .4rem; border-bottom: 1px solid var(--line); background: var(--surface); }

/* Crowning */
.crown-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.crown-row:first-of-type { border-top: 0; padding-top: 0; }
.crown-row label { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .92rem; }
.crown-row label .crown { width: 30px; flex-shrink: 0; }
.crown-row select { width: auto; min-width: 190px; }
@media (max-width: 560px) { .crown-row { flex-direction: column; align-items: stretch; } .crown-row select { width: 100%; } }
.check-line { display: flex; gap: .55rem; align-items: flex-start; font-weight: 400; font-size: .9rem; margin: .4rem 0; }
.check-line input { width: auto; margin-top: .25rem; }
.crown-summary li { align-items: center; }
.crown-summary .crown { width: 34px; flex-shrink: 0; }
.crown-effects { font-size: .88rem; padding-left: 1.1rem; margin: 1rem 0; display: grid; gap: .35rem; }
.crown-results .panel { text-align: center; display: flex; flex-direction: column; align-items: center; }
.crown-results .crown { width: 70px; }

/* Personal folders */
.folder-intro { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.folder-intro p { margin: 0; max-width: 62ch; }
.folder-panel { display: flex; flex-direction: column; gap: 1.6rem; }
.folder-group { padding: 0; }
.folder-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; padding-bottom: .6rem; margin-bottom: .7rem; border-bottom: 1px solid var(--line); }
.folder-group-head h3 { margin: 0; font-size: 1.1rem; }
.folder-group-head .muted { font-size: .78rem; }
.drawer-body .folder-group { margin-top: 1.4rem; }
.folder-empty { margin: 0; font-size: .86rem; }
.folder-row { align-items: center !important; flex-wrap: wrap; }
.folder-row .grow { min-width: 13rem; }
.folder-row .grow span { display: block; }
.folder-row .file-actions { margin-left: auto; }
.folder-row .grow strong { overflow-wrap: anywhere; }
.file-note { color: var(--ink) !important; font-style: italic; margin-top: .15rem; white-space: pre-line; }
.file-kind { flex-shrink: 0; width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; background: var(--gold-100); border: 1px solid var(--line); color: var(--text-strong); font-size: .72rem; font-weight: 700; letter-spacing: .08em; }
.folder-ic { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--gold-100); color: var(--brand-gold); }
.folder-ic svg { width: 20px; height: 20px; }
.drawer .folder-row .file-actions { margin-left: calc(46px + 1rem); }
@media (max-width: 560px) { .folder-row .file-actions, .drawer .folder-row .file-actions { margin-left: 0; flex-basis: 100%; flex-wrap: wrap; } .folder-row .file-actions .btn { flex: 1; } }

/* ==========================================================
   Motion
   Quiet and quick: 180–600ms, eased, never blocking. Everything
   here is switched off for people who ask for reduced motion.
   ========================================================== */
:root {
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-soft: cubic-bezier(.45, .05, .55, .95);
}

/* --- Spinning crown loader: the local crown icon turned on a turntable.
   Seven stacked copies of the icon, a hair apart, give it a solid gold edge
   when it turns side-on; the front face catches a light sweep while it rests. */
.crown-spin { --size: 96px; width: var(--size); display: grid; justify-items: center; gap: calc(var(--size) * .1); perspective: calc(var(--size) * 7); }
.crown-spin-body { position: relative; width: 100%; aspect-ratio: 3190 / 1388; transform-style: preserve-3d; animation: crown-turn 2.8s var(--ease-soft) infinite; }
.crown-spin.teen .crown-spin-body { aspect-ratio: 3190 / 1132; }
.crown-spin-body .crown { position: absolute; inset: 0; width: 100%; transform: translateZ(calc((var(--i) - 3) * var(--size) / 80)); filter: brightness(.72); }
.crown-spin-body .crown:first-child, .crown-spin-body .crown:last-child {
  filter: none;
  background: linear-gradient(100deg, var(--brand-gold) 38%, var(--champ-400) 50%, var(--brand-gold) 62%) 120% 0 / 300% 100% no-repeat, var(--brand-gold);
  animation: crown-gleam 2.8s linear infinite;
}
.crown-spin-floor { width: 70%; height: calc(var(--size) / 14); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .28), transparent); animation: crown-floor 2.8s var(--ease-soft) infinite; }
.crown-spin.on-dark .crown-spin-floor { background: radial-gradient(closest-side, rgba(180, 155, 87, .35), transparent); }
@keyframes crown-turn { 0% { transform: rotateY(0) translateY(0); } 55% { transform: rotateY(360deg) translateY(calc(var(--size) * -.04)); } 100% { transform: rotateY(360deg) translateY(0); } }
@keyframes crown-floor { 0%, 100% { transform: scaleX(1); opacity: 1; } 14%, 41% { transform: scaleX(.55); opacity: .7; } 27% { transform: scaleX(.8); } 55% { transform: scaleX(.9); } }
@keyframes crown-gleam { 0%, 58% { background-position: 120% 0, 0 0; } 90%, 100% { background-position: -20% 0, 0 0; } }

.crown-loader { display: grid; justify-items: center; gap: .9rem; padding: 2.5rem 1rem; color: var(--muted); font-size: .9rem; text-align: center; }
.crown-loader p { margin: 0; }

/* Portal gate uses the crown loader on dark grey */
.gate-screen .crown-spin { --size: 110px; }

/* Crowning moment overlay */
.crown-moment { position: fixed; inset: 0; z-index: 120; display: grid; place-content: center; justify-items: center; gap: 1.2rem; text-align: center;
  background: radial-gradient(600px 400px at 50% 45%, rgba(180, 155, 87, .28), transparent 70%), rgba(48, 48, 48, .94); color: #fff; animation: fade-in .3s ease both; }
.crown-moment .crown-spin { --size: 150px; }
.crown-moment h2 { margin: 0; color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.crown-moment p { margin: 0; color: rgba(255, 255, 255, .72); }
.crown-moment.done .crown-spin-body { animation: crown-turn 1.1s var(--ease-out) 1; }
.crown-moment .names { display: flex; flex-wrap: wrap; gap: .4rem .9rem; justify-content: center; max-width: 34rem; color: var(--champ-400); font-weight: 600; }
.crown-moment .names span { animation: rise-in .5s var(--ease-out) both; }

/* --- Small busy ring for buttons that are saving */
.btn.is-busy { pointer-events: none; opacity: .85; }
.btn.is-busy::before { content: ""; width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn:active { transform: translateY(0) scale(.97); }

/* --- Loading placeholders */
.skeleton { position: relative; overflow: hidden; background: var(--noir-100); border-radius: 8px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent); animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.skel-card { display: grid; gap: .7rem; }
.skel-line { height: .8rem; }
.skel-line.lg { height: 1.3rem; width: 75%; }
.skel-line.sm { width: 45%; }
.skel-tag { height: 1.3rem; width: 5.5rem; border-radius: 999px; }

/* --- Portal: page change, modal and scrim */
.view-enter > * { animation: rise-in .32s var(--ease-out) both; }
.view-enter > *:nth-child(2) { animation-delay: .04s; }
.view-enter > *:nth-child(3) { animation-delay: .08s; }
.view-enter > *:nth-child(n+4) { animation-delay: .12s; }
.title-enter { animation: fade-in .3s ease both; }
.modal-back:not([hidden]) { animation: fade-in .18s ease both; }
.modal-back:not([hidden]) .modal { animation: pop-in .24s var(--ease-out) both; }
.scrim:not([hidden]) { animation: fade-in .2s ease both; }
.drawer { transition-timing-function: var(--ease-out); transition-duration: .28s; }
.drawer.open .drawer-body > * { animation: rise-in .35s var(--ease-out) both; animation-delay: .06s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* --- Public site: sections ease in as they scroll into view.
   Only armed by assets/motion.js, so content is always visible without it. */
html.reveal-on .reveal { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--d, 0s); }
html.reveal-on .reveal:not(.in) { opacity: 0; transform: translateY(18px); }
.hero .container > div:first-child > * { animation: rise-in .8s var(--ease-out) both; }
.hero .container > div:first-child > *:nth-child(2) { animation-delay: .08s; }
.hero .container > div:first-child > *:nth-child(3) { animation-delay: .16s; }
.hero .container > div:first-child > *:nth-child(n+4) { animation-delay: .24s; }
.hero-crown img { animation: crown-float 7s ease-in-out infinite; }
.hero-crown::before { content: ""; position: absolute; left: 0; right: 0; top: 0; margin-inline: auto; width: 100%; max-width: 560px; aspect-ratio: 1400 / 627; pointer-events: none; z-index: 1;
  -webkit-mask: url("brand/crown-photo-miss.png") center / contain no-repeat; mask: url("brand/crown-photo-miss.png") center / contain no-repeat;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 246, 220, .55) 50%, transparent 60%) 150% 0 / 300% 100% no-repeat;
  animation: crown-float 7s ease-in-out infinite, hero-gleam 7s ease-in-out infinite; mix-blend-mode: soft-light; }
@keyframes crown-float { 50% { transform: translateY(-8px); } }
@keyframes hero-gleam { 0%, 55% { background-position: 150% 0; } 85%, 100% { background-position: -50% 0; } }

@media (prefers-reduced-motion: reduce) {
  .crown-spin-body, .crown-spin-floor, .crown-spin-body .crown, .skeleton::after, .hero-crown img, .hero-crown::before,
  .hero .container > div:first-child > *, .view-enter > *, .title-enter, .modal-back, .modal, .scrim, .drawer-body > *, .crown-moment, .crown-moment .names span { animation: none !important; }
  .crown-spin-body { animation: gate-pulse 1.6s ease-in-out infinite !important; }
  html.reveal-on .reveal:not(.in) { opacity: 1; transform: none; }
  .btn.is-busy::before { animation-duration: 1.6s; }
}

/* ==========================================================
   Sponsors on the website
   ========================================================== */
.sponsor-wall { display: grid; gap: 2.4rem; margin-top: 2.4rem; }
.sponsor-wall:empty { display: none; }
.sponsor-level { font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); text-align: center; margin: 0 0 1rem; display: flex; align-items: center; gap: 1rem; }
.sponsor-level::before, .sponsor-level::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sponsor-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.sponsor-tile { display: grid; place-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink);
  width: 200px; height: 110px; padding: 1rem 1.2rem; transition: border-color .2s ease, transform .2s var(--ease-out), box-shadow .2s ease; }
.tier-1 .sponsor-tile { width: 260px; height: 140px; }
.tier-3 .sponsor-tile { width: 160px; height: 84px; }
a.sponsor-tile:hover { border-color: var(--brand-gold); transform: translateY(-2px); box-shadow: var(--shadow); }
.sponsor-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sponsor-name { font-family: var(--display); font-weight: 700; font-size: 1.05rem; line-height: 1.15; text-align: center; letter-spacing: -.01em; }
.tier-1 .sponsor-name { font-size: 1.3rem; }
@media (max-width: 560px) {
  .sponsor-tile, .tier-1 .sponsor-tile, .tier-3 .sponsor-tile { width: calc(50% - .5rem); height: 96px; }
  .tier-1 .sponsor-tile { width: 100%; height: 120px; }
}

/* ==========================================================
   Gallery: page grid, homepage strip, lightbox
   ========================================================== */
.gallery-grid { columns: 3 260px; column-gap: 1rem; }
.gallery-grid > * { break-inside: avoid; margin-bottom: 1rem; }
.g-skel { display: block; width: 100%; border-radius: 12px; }
.g-item { display: block; width: 100%; padding: 0; border: 0; background: var(--noir-100); border-radius: 12px; overflow: hidden; cursor: zoom-in; position: relative; }
.g-item img { width: 100%; height: auto; transition: transform .6s var(--ease-out), opacity .3s ease; }
.g-item:hover img { transform: scale(1.03); }
.g-item:focus-visible { outline: 3px solid var(--brand-gold); outline-offset: 2px; }
.gallery-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.gallery-strip .g-item { aspect-ratio: 1; }
.gallery-strip .g-item img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .gallery-strip { grid-template-columns: repeat(2, 1fr); } }

html.lb-open { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 150; background: rgba(30, 30, 30, .96); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem;
  padding: calc(var(--sa-top) + 3.2rem) max(12px, var(--sa-right)) calc(var(--sa-bottom) + 1rem) max(12px, var(--sa-left)); animation: fade-in .2s ease both; }
.lb-figure { margin: 0; min-width: 0; height: 100%; display: grid; grid-template-rows: 1fr auto; gap: .8rem; justify-items: center; }
.lb-img { max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; align-self: center; border-radius: 6px; }
.lb-img.lb-in { animation: pop-in .3s var(--ease-out) both; }
.lb-cap { color: rgba(255, 255, 255, .8); text-align: center; font-size: .9rem; display: grid; gap: .15rem; }
.lb-cap strong { color: #fff; }
.lb-count { color: rgba(255, 255, 255, .5); font-size: .78rem; }
.lb-nav, .lb-close { background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .15); border-radius: 50%; width: 48px; height: 48px; font-size: 1.8rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .2s ease; }
.lb-nav:hover, .lb-close:hover { background: rgba(180, 155, 87, .5); }
.lb-close { position: absolute; top: calc(var(--sa-top) + .7rem); right: max(12px, var(--sa-right)); font-size: 1.6rem; }
@media (max-width: 700px) { .lightbox { grid-template-columns: 1fr; } .lb-nav { display: none; } }

/* Portal: gallery management and sponsor logos */
.gallery-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.ga-item { margin: 0; position: relative; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); display: flex; flex-direction: column; }
.ga-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface); }
.ga-item.is-hidden img { opacity: .4; }
.ga-item figcaption { padding: .6rem .75rem .7rem; font-size: .82rem; display: grid; gap: .2rem; }
.ga-album { color: var(--muted); font-size: .78rem; }
.ga-actions { display: flex; gap: .8rem; margin-top: .25rem; }
.ga-flag { position: absolute; top: .5rem; left: .5rem; }
.sponsor-cell { display: flex; gap: .7rem; align-items: center; }
.sponsor-thumb { width: 54px; height: 34px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 2px; flex-shrink: 0; }
.logo-preview { display: flex; align-items: center; gap: 1rem; margin: -.3rem 0 .8rem; }
.logo-preview img { width: 120px; height: 60px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; padding: 4px; background: #fff; }
@media (prefers-reduced-motion: reduce) { .g-item img, .sponsor-tile, .lightbox, .lb-img.lb-in { transition: none; animation: none; } }

/* Sign-in code */
.code-field { text-align: left; margin-top: 1rem; }
.code-input { font-size: 1.5rem !important; letter-spacing: .25em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; padding: .7rem !important; }
.code-input::placeholder { letter-spacing: normal; font-size: 1rem; font-weight: 400; color: var(--muted); }

/* ==========================================================
   App layout (phones, and the iOS/Android app)
   Below 900px the portal becomes an app: dark top bar, bottom tab bar,
   "More" menu as a bottom sheet, full-screen detail panels and
   bottom-sheet forms. Safe areas keep everything clear of the notch,
   status bar and home indicator.
   ========================================================== */
.tabbar { display: none; }
.search-toggle { display: none; }
.sheet-handle { display: none; }
.sidebar, .main { padding-top: calc(var(--sa-top) + 1.4rem); }

@media (max-width: 900px) {
  :root { --tabbar-h: 62px; --appbar-h: 58px; }
  body { background: var(--surface); }
  .main { padding: 0 16px calc(var(--tabbar-h) + var(--sa-bottom) + 1.5rem); padding-left: max(16px, var(--sa-left)); padding-right: max(16px, var(--sa-right)); }

  /* Top app bar */
  .topbar { position: sticky; top: 0; z-index: 50; margin: 0 calc(-1 * max(16px, var(--sa-left))) 1.2rem; flex-wrap: nowrap;
    padding: calc(var(--sa-top) + .55rem) max(16px, var(--sa-right)) .55rem max(16px, var(--sa-left));
    background: var(--brand-grey); color: #fff; border-bottom: 2px solid var(--brand-gold); min-height: var(--appbar-h); }
  .topbar h1 { font-size: 1.3rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tb-left { min-width: 0; flex: 1; }
  .tb-left > div { min-width: 0; }
  .tb-date, .icon-btn.mobile-menu { display: none !important; }
  .topbar .icon-btn { background: transparent; border-color: rgba(255, 255, 255, .18); color: #fff; }
  .search-toggle { display: inline-grid; }
  body.search-open .search-wrap { display: block; position: fixed; left: 0; right: 0; top: calc(var(--sa-top) + var(--appbar-h)); z-index: 55;
    padding: .7rem 16px; background: var(--brand-grey); border-bottom: 2px solid var(--brand-gold); animation: fade-in .15s ease both; }
  body.search-open .search-wrap .search { max-width: none; width: 100%; }
  body.search-open .search-wrap .dropdown { left: 16px; right: 16px; width: auto; max-height: 60vh; overflow-y: auto; }
  .dropdown-right { right: 0; width: min(92vw, 360px); }

  /* Bottom tab bar */
  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--tabbar-bg); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-top: 1px solid var(--line); padding: 0 var(--sa-right) var(--sa-bottom) var(--sa-left); }
  .tab { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; height: var(--tabbar-h); text-decoration: none; color: var(--muted);
    font-size: .72rem; font-weight: 600; letter-spacing: .01em; background: none; border: 0; font-family: var(--sans); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .tab svg, .tab .crown { width: 24px; height: 24px; }
  .tab .crown { height: auto; }
  .tab.active { color: var(--text-strong); }
  .tab.active::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand-gold); }
  .tab .tab-badge { position: absolute; top: 7px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--brand-gold); color: #fff; font-size: .72rem; line-height: 17px; text-align: center; }
  .tab:active { transform: scale(.94); }

  /* "More" menu: the sidebar as a bottom sheet */
  .sidebar { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; height: auto; max-height: 86vh; z-index: 80; overflow-y: auto; overscroll-behavior: contain;
    border-radius: 20px 20px 0 0; padding: .4rem 1rem calc(var(--sa-bottom) + 1rem); transform: translateY(105%); transition: transform .3s var(--ease-out); }
  .sidebar.open { transform: none; box-shadow: 0 -10px 40px rgba(0, 0, 0, .25); }
  .sidebar .sheet-handle { order: -2; flex-shrink: 0; display: block; width: 42px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .25); margin: .3rem auto .9rem; }
  .sidebar .brand { padding-bottom: 1rem; }
  .sidebar .me { order: -1; margin: 0 0 .6rem; padding: 0 .5rem 1rem; border-top: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .sidebar .me #signOut { opacity: .85 !important; font-size: 1.2rem; padding: .4rem; }
  .side-link { padding: .8rem .7rem; font-size: .98rem; }
  .sidebar .brand { display: none; }

  /* Detail panels go full screen */
  .drawer { width: 100%; box-shadow: none; }
  .drawer-head { padding-top: calc(var(--sa-top) + 1rem); padding-left: max(1.2rem, var(--sa-left)); padding-right: max(1.2rem, var(--sa-right)); }
  .drawer-body { padding-bottom: calc(var(--sa-bottom) + 1.5rem); }
  .drawer .close-x { font-size: 1.9rem; padding: .2rem .4rem; margin: -.3rem -.4rem 0 0; opacity: .9; }

  /* Forms slide up as bottom sheets */
  .modal-back { place-items: end stretch; padding: 0; }
  .modal { width: 100%; max-height: calc(100vh - var(--sa-top) - 24px); border-radius: 20px 20px 0 0; border-top-width: 3px; padding-bottom: 0; }
  .modal-back:not([hidden]) .modal { animation: sheet-up .32s var(--ease-out) both; }
  /* The buttons stay at the bottom and cover the home bar's strip too, so the form never shows beneath them. */
  .modal-actions { position: sticky; bottom: 0; z-index: 2; background: var(--card); padding: .8rem 0 calc(.9rem + var(--sa-bottom)); margin-top: 1rem; }
  .modal-actions .btn { flex: 1; }

  /* Touch comfort */
  input, select, textarea { font-size: 16px !important; } /* stops iOS zooming into fields */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; padding-inline: 1rem; }
  .btn:hover, a.sponsor-tile:hover { transform: none; }
  .toast { bottom: calc(var(--tabbar-h) + var(--sa-bottom) + 14px); max-width: calc(100vw - 32px); text-align: center; border-radius: 14px; }
  .kpis { gap: .7rem; }
  .kpi { padding: .9rem 1rem; }
  .kpi strong { font-size: 1.6rem; }
  .panel { border-radius: 14px; }
  .banner { border-radius: 16px; }
}
@keyframes sheet-up { from { transform: translateY(100%); } }
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .sidebar { transition: none; } .modal-back:not([hidden]) .modal { animation: none; } }

/* Inside the app: no text selection flashes on taps, no rubber-band behind sheets */
html.native { -webkit-tap-highlight-color: transparent; }
html.native body { overscroll-behavior-y: none; }
html.native .hide-sm { display: none !important; }

/* Sign-in page on phones and in the app: brand header instead of the side panel */
.auth-mobile-brand { display: none; }
@media (max-width: 820px) {
  .auth-form { place-items: start center; align-content: start; padding: 0 0 calc(var(--sa-bottom) + 2rem); background: var(--surface); min-height: 100vh; }
  .auth-mobile-brand { display: flex; align-items: flex-end; justify-content: center; gap: .8rem; width: 100%;
    background: radial-gradient(420px 220px at 50% 100%, rgba(180, 155, 87, .28), transparent 70%), var(--brand-grey);
    border-bottom: 3px solid var(--brand-gold); padding: calc(var(--sa-top) + 2.4rem) 16px 1.8rem; margin-bottom: 1.6rem; }
  .auth-mobile-brand .crown { width: 64px; }
  .auth-mobile-brand .logotype { font-size: 1.7rem; }
  .auth-form .box { padding: 0 16px; }
}

/* Demo mode (app review): a visible label so nobody mistakes sample content for real data */
.demo-mode #pageTitle::after { content: "Demo"; display: inline-block; vertical-align: middle; margin-left: .6rem; padding: .15rem .55rem; border-radius: 999px;
  background: var(--brand-gold); color: #fff; font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* Legal pages */
.legal-text { max-width: 720px; }
.legal-text h2 { font-size: 1.5rem; margin: 2rem 0 .6rem; }
.legal-text ul { padding-left: 1.2rem; }
.legal-text li { margin-bottom: .4rem; }
.site-footer .legal a { color: inherit; }
.side-privacy { font-size: .78rem; opacity: .45; text-decoration: none; padding: .8rem .7rem 0; }
.side-privacy:hover { opacity: .8; }
/* In the app the status bar icons are light, so keep a dark band behind them on every layout (e.g. iPad) */
html.native body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: var(--sa-top); background: var(--brand-grey); z-index: 300; pointer-events: none; }
html.native body.trying::before { background: #2b2618; }
/* iOS draws date/time fields at their own width; keep them inside their container */
input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; box-sizing: border-box; text-align: left; min-height: 2.9rem; }
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; }

/* ==========================================================
   Scheduling: event types, form, map and directions
   ========================================================== */
.tag-program { background: var(--card); color: var(--gold-ink); box-shadow: inset 0 0 0 1px var(--brand-gold); }
.type-tag { display: inline-flex; align-items: center; gap: .3rem; }
.type-tag svg, .type-tag .crown { width: 12px; height: 12px; flex-shrink: 0; }
.type-tag .crown { height: auto; }
/* Calendar chips by type family */
.calendar .ev-community { background: var(--noir-900); color: var(--gold-400); }
.calendar .ev-prep { background: var(--gold-100); color: var(--gold-ink); }
.calendar .ev-program { background: var(--card); color: var(--gold-ink); box-shadow: inset 0 0 0 1px var(--brand-gold); }
.calendar .ev-board { background: var(--noir-100); color: var(--noir-700); }
.calendar .ev-competition { background: var(--brand-gold); color: #fff; }
.cal-filters { margin: .2rem 0 1rem; }
.cal-filters .chip { display: inline-flex; align-items: center; gap: .4rem; }
.fam-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.fam-community { background: var(--noir-900); }
.fam-prep { background: var(--gold-100); box-shadow: inset 0 0 0 1px var(--gold-ink); }
.fam-program { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--brand-gold); }
.fam-board { background: var(--noir-100); box-shadow: inset 0 0 0 1px var(--brand-grey-md); }
.fam-competition { background: var(--brand-gold); }
.chip.active .fam-dot { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8); }

/* Event form */
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: .45rem; margin: 0 0 1.1rem; }
.type-opt { position: relative; margin: 0; font-weight: 400; }
.type-opt input { position: absolute; opacity: 0; pointer-events: none; }
.type-opt span { display: flex; align-items: center; gap: .45rem; padding: .55rem .7rem; border: 1.5px solid var(--line); border-radius: 10px; font-size: .82rem; cursor: pointer; background: var(--card); transition: border-color .15s ease, background .15s ease; min-height: 44px; }
.type-opt span svg, .type-opt span .crown { width: 18px; height: 18px; flex-shrink: 0; color: var(--brand-grey-md); }
.type-opt span .crown { height: auto; }
.type-opt input:checked + span { border-color: var(--brand-gold); background: var(--gold-100); color: var(--ink); font-weight: 600; }
.type-opt input:checked + span svg { color: var(--gold-ink); }
.type-opt input:focus-visible + span { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.warn-notice { background: var(--warn-bg); border-color: var(--warn-line); color: var(--ink); }
.place-field { position: relative; }
.place-results { left: 0; right: 0; top: 100%; width: auto; max-height: 300px; overflow-y: auto; z-index: 5; }
.place-item { display: flex; gap: .6rem; align-items: flex-start; width: 100%; text-align: left; background: none; border: 0; font: inherit; cursor: pointer; }
.place-item.active, .place-item:hover { background: var(--gold-100); }
.place-ic svg { width: 16px; height: 16px; margin-top: .15rem; color: var(--gold-ink); }
.place-map-wrap { margin: -.3rem 0 .6rem; }
.place-tools { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin: -.2rem 0 1rem; font-size: .84rem; }
.place-tools .check-line { margin: 0; }

/* Event details */
.ev-when, .ev-where-text, .ev-online { display: flex; gap: .8rem; align-items: flex-start; }
.ev-when, .ev-online { margin-bottom: 1rem; }
.ev-when strong, .ev-where-text strong, .ev-online strong { display: block; font-size: .98rem; }
.ev-when span, .ev-where-text span, .ev-online span { display: block; font-size: .84rem; color: var(--muted); }
.ev-call { color: var(--gold-ink) !important; font-weight: 600; }
.ev-series { display: inline-flex !important; align-items: center; gap: .3rem; }
.ev-series svg { width: 13px; height: 13px; }
.ev-when-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--gold-100); display: grid; place-items: center; flex-shrink: 0; color: var(--gold-ink); }
.ev-when-ic svg { width: 18px; height: 18px; }
.ev-where { border: 1px solid var(--line); border-radius: 14px; padding: .9rem; margin-bottom: 1rem; display: grid; gap: .8rem; background: var(--card); }
.ev-online { border: 1px solid var(--line); border-radius: 14px; padding: .8rem .9rem; align-items: center; }
.ev-online > div { flex: 1; min-width: 0; }
.ev-online span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-map { height: 190px; border-radius: 10px; overflow: hidden; background: var(--noir-100); z-index: 0; }
.ev-where-actions { display: flex; gap: .45rem; flex-wrap: wrap; }
.nebo-pin { background: none; border: 0; }
.leaflet-container { font-family: var(--sans); }
.leaflet-control-attribution { font-size: .72rem !important; }
@media (max-width: 560px) { .type-grid { grid-template-columns: repeat(2, 1fr); } .ev-where-actions .btn { flex: 1; } }
/* Map tiles in greyscale so the gold pin stands out and the map matches the brand greys */
.ev-map .leaflet-tile-pane { filter: grayscale(1) contrast(.92) brightness(1.04); }

/* Notification settings: iOS-style switches */
.notif-channels, .notif-cats { display: grid; gap: 0; }
.switch-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--line); font-weight: 400; margin: 0; cursor: pointer; }
.notif-channels .switch-row:first-child, .notif-cats .switch-row:first-child { border-top: 0; }
.switch-row strong { display: block; font-size: .92rem; }
.switch-row small { display: block; color: var(--muted); font-size: .8rem; }
.switch { appearance: none; -webkit-appearance: none; width: 46px !important; height: 28px; min-height: 0 !important; padding: 0 !important; border-radius: 999px; background: var(--brand-grey-lt); position: relative; cursor: pointer; flex-shrink: 0; border: 0 !important; transition: background .2s ease; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s var(--ease-out); }
.switch:checked { background: var(--brand-gold); }
.switch:checked::after { transform: translateX(18px); }
.switch:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .switch, .switch::after { transition: none; } }

/* Settings */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
.settings-grid > .notif-panel { margin-top: 0 !important; grid-row: span 3; }
.settings-me { display: flex; gap: 1rem; align-items: center; }
.settings-me strong { display: block; font-family: var(--display); font-size: 1.3rem; }
.settings-me span { color: var(--muted); font-size: .86rem; }
.avatar.lg { width: 60px; height: 60px; font-size: 1.1rem; }
.settings-list li { align-items: center; }
.settings-list .grow span { display: block; }
@media (max-width: 1000px) { .settings-grid { grid-template-columns: 1fr; } .settings-grid > .notif-panel { grid-row: auto; } }

/* Admin */
.admin-table select, .admin-table input:not([type=checkbox]) { min-width: 0; padding: .4rem .5rem; font-size: .84rem; }
.admin-table td { vertical-align: middle; }
.admin-table input[name=title] { width: 100%; min-width: 150px; }
.admin-table input[type=date] { margin-top: .35rem; width: 150px; }
.admin-active { display: flex; align-items: center; gap: .5rem; font-weight: 400; font-size: .8rem; margin: 0; }
.chip b { font-weight: 700; margin-left: .15rem; opacity: .7; }
.admin-invites .list li { align-items: center; }
.admin-table select { min-width: 132px; }

/* Desktop sidebar: the menu scrolls inside the sidebar (it's taller than short
   windows), so the page never grows past the portal; name + sign-out stay pinned. */
@media (min-width: 901px) {
  .sidebar { overflow: hidden; }
  .sidebar #sideNav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -.4rem; padding: 0 .4rem .6rem; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
  .sidebar #sideNav::-webkit-scrollbar { width: 6px; }
  .sidebar #sideNav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 3px; }
  .sidebar .me, .sidebar .side-privacy { flex-shrink: 0; }
}
body:has(.portal) { background: var(--surface); }


/* ==========================================================
   Dark theme (portal, sign-in page and the app)
   assets/theme.js sets data-theme on <html> from each person's choice in
   Settings > Appearance: "light", "dark", or "system" (follow the device).
   Public pages never set it, so the website itself is unchanged.
   Brand colours stay: Dark Grey for bars, Gold for accents and the crown.
   ========================================================== */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #ececec; --muted: #bababa; --line: #393939;
  --bg: #1f1f1f; --card: #262626; --surface: #1a1a1a; --champ-100: #2b2b2b;
  --noir-100: #323232; --noir-700: #d4d4d4; --noir-800: #4b4b4b; --noir-900: #3c3c3c;
  --brand-grey-lt: #3a3a3a; --brand-grey-md: #a3a3a3;
  --gold-100: #342e22; --gold-ink: #d8c28c; --gold-line: #5a4d2c;
  --ok: #6cc596; --warn: #e3ae55; --danger: #e8877e;
  --ok-bg: #1f3329; --warn-bg: #3a2f1c; --danger-bg: #3b2422; --danger-line: #6b3d38; --warn-line: #5f4a26;
  --day-other-bg: #212121; --day-other-ink: #5f5f5f;
  --ph-top: #2c2c2c; --ph-mid: #262626;
  --tabbar-bg: rgba(30, 30, 30, .94);
  --text-strong: #ececec;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .35);
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
  color-scheme: dark;
  --ink: #ececec; --muted: #bababa; --line: #393939;
  --bg: #1f1f1f; --card: #262626; --surface: #1a1a1a; --champ-100: #2b2b2b;
  --noir-100: #323232; --noir-700: #d4d4d4; --noir-800: #4b4b4b; --noir-900: #3c3c3c;
  --brand-grey-lt: #3a3a3a; --brand-grey-md: #a3a3a3;
  --gold-100: #342e22; --gold-ink: #d8c28c; --gold-line: #5a4d2c;
  --ok: #6cc596; --warn: #e3ae55; --danger: #e8877e;
  --ok-bg: #1f3329; --warn-bg: #3a2f1c; --danger-bg: #3b2422; --danger-line: #6b3d38; --warn-line: #5f4a26;
  --day-other-bg: #212121; --day-other-ink: #5f5f5f;
  --ph-top: #2c2c2c; --ph-mid: #262626;
  --tabbar-bg: rgba(30, 30, 30, .94);
  --text-strong: #ececec;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .35);
  }
}
:is(html[data-theme="dark"], html.dark-auto) body { background: var(--surface); }
/* Things that need more than a colour swap */
html[data-theme="dark"] .ev-map .leaflet-tile-pane, html.dark-auto .ev-map .leaflet-tile-pane { filter: grayscale(1) invert(1) contrast(.82) brightness(.95); }
html[data-theme="dark"] .sidebar, html.dark-auto .sidebar { background: #232323; border-right: 1px solid #2f2f2f; }
html[data-theme="dark"] .btn-noir, html.dark-auto .btn-noir { background: var(--brand-gold); color: #1d1d1d; }
html[data-theme="dark"] .btn-noir:hover, html.dark-auto .btn-noir:hover { background: var(--gold-hover); }
html[data-theme="dark"] .chip.active, html.dark-auto .chip.active { background: #ececec; color: #1d1d1d; border-color: #ececec; }
html[data-theme="dark"] .bubble.me, html.dark-auto .bubble.me { background: #4b4b4b; }
html[data-theme="dark"] .calendar .day.today .num, html.dark-auto .calendar .day.today .num { background: var(--brand-gold); color: #1d1d1d; }
html[data-theme="dark"] .toast, html.dark-auto .toast { background: #ececec; color: #1d1d1d; }
html[data-theme="dark"] .modal-back, html.dark-auto .modal-back, html[data-theme="dark"] .scrim, html.dark-auto .scrim { background: rgba(0, 0, 0, .6); }
html[data-theme="dark"] .crown.grey, html.dark-auto .crown.grey { background-color: #8a8a8a; }
html[data-theme="dark"] .skeleton::after, html.dark-auto .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent); }
html[data-theme="dark"] .dd-item:hover, html.dark-auto .dd-item:hover { background: var(--gold-100); }
html[data-theme="dark"] input::placeholder, html.dark-auto input::placeholder, html[data-theme="dark"] textarea::placeholder, html.dark-auto textarea::placeholder { color: #7a7a7a; }
html[data-theme="dark"] .switch:not(:checked), html.dark-auto .switch:not(:checked) { background: #4a4a4a; }
html[data-theme="dark"] .tag-comp, html.dark-auto .tag-comp { color: #1d1d1d; }

/* Larger text (Settings > Appearance) */
html.text-large { font-size: 112.5%; }

/* Appearance picker */
.theme-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.theme-opt { font: inherit; font-size: .84rem; display: grid; gap: .5rem; justify-items: center; padding: .7rem .5rem .6rem; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); cursor: pointer; }
.theme-opt.active { border-color: var(--brand-gold); background: var(--gold-100); font-weight: 600; }
.theme-swatch { width: 100%; max-width: 110px; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; display: grid; grid-template-columns: 30% 1fr; grid-template-rows: 26% 1fr; border: 1px solid var(--line); }
.theme-swatch i:nth-child(1) { grid-row: 1 / 3; background: #3c3c3c; }
.theme-swatch i:nth-child(2) { background: #3c3c3c; border-bottom: 2px solid #b49b57; }
.sw-light i:nth-child(3) { background: #f7f7f7; }
.sw-dark i:nth-child(3) { background: #1a1a1a; }
.sw-dark i:nth-child(1) { background: #232323; }
.sw-system i:nth-child(3) { background: linear-gradient(135deg, #f7f7f7 50%, #1a1a1a 50%); }
html[data-theme="dark"] .tag-champ, html[data-theme="dark"] .calendar .ev-community { background: #4a4a4a; color: #e2cd92; }
html[data-theme="dark"] .fam-community { background: #7a7a7a; }
html[data-theme="dark"] .calendar .ev-board { background: #343434; color: #cfcfcf; }

/* Unread */
.tag-new { background: var(--brand-gold); color: #fff; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: .1rem .45rem; vertical-align: middle; }
html[data-theme="dark"] .tag-new { color: #1d1d1d; }
.thread-item.unread strong { color: var(--ink); }
.thread-item.unread span { color: var(--ink); font-weight: 600; }
.unread-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: .4rem; border-radius: 999px; background: var(--brand-gold); color: #fff; font-size: .78rem; font-weight: 700; vertical-align: middle; }
html[data-theme="dark"] .unread-count { color: #1d1d1d; }
.new-divider { display: flex; align-items: center; gap: .6rem; color: var(--gold-ink); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: .4rem 0; }
.new-divider::before, .new-divider::after { content: ""; flex: 1; height: 1px; background: var(--brand-gold); opacity: .5; }
.chat-head { padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: .8rem; }
.thread-picker { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760px) {
  .thread-picker { display: block; padding: .7rem .8rem; border-bottom: 1px solid var(--line); background: var(--surface); }
  .thread-picker select { width: 100%; font-weight: 600; }
  .thread-picker + .chat-head { display: none; }
}

/* Hall of Fame bulk photos */
.hof-match-list li { align-items: center; }
.hof-match-list .grow span, .hof-match-list .grow small { display: block; }
.hof-thumb { width: 46px; height: 58px; object-fit: cover; border-radius: 8px; background: var(--noir-100); flex-shrink: 0; }

/* Hall of Fame controls and year groups */
.hof-controls { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: end; justify-content: center; margin: 0 0 1rem; }
.hof-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--card); }
.hof-seg button { font: inherit; font-size: .88rem; border: 0; background: none; padding: .45rem 1rem; border-radius: 999px; cursor: pointer; color: var(--muted); min-height: 38px; }
.hof-seg button span { font-size: .78rem; opacity: .7; margin-left: .15rem; }
.hof-seg button.active { background: var(--brand-grey); color: #fff; }
.hof-field { display: grid; gap: .25rem; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0; }
.hof-field select, .hof-field input { min-width: 230px; font-size: .92rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); }
.hof-summary { text-align: center; color: var(--gold-ink); font-weight: 600; margin: 0 0 1.6rem; min-height: 1.4em; }
.hof-groups { display: grid; gap: 1.2rem; }
.hof-group-label { font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0 0 .6rem; display: flex; align-items: center; gap: .8rem; }
.hof-group-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
@media (max-width: 640px) { .hof-controls { justify-content: stretch; } .hof-field, .hof-field select, .hof-field input { width: 100%; min-width: 0; } .hof-seg { width: 100%; } .hof-seg button { flex: 1; } }
/* Hall of Fame / Gallery headers are a single centred column (not the homepage's two-column hero) */
.hof-hero .container.hof-hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; grid-template-columns: none; gap: 0; }
.hof-body { min-width: 0; } .hof-body h3 { overflow-wrap: break-word; hyphens: auto; }

/* Five points of the crown + Sisterhood feature */
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; }
@media (max-width: 1100px) { .grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .grid-5 { grid-template-columns: repeat(2, 1fr); } .grid-5 > :last-child { grid-column: 1 / -1; } }
@media (max-width: 480px) { .grid-5 { grid-template-columns: 1fr; } }
.pillar-featured { border-color: var(--brand-gold); box-shadow: inset 0 3px 0 var(--brand-gold); }
.sisterhood { margin-top: 2.4rem; display: grid; grid-template-columns: auto 1fr; gap: 2.2rem; align-items: center; padding: clamp(1.8rem, 4vw, 2.8rem);
  border-radius: 22px; color: #fff; background: radial-gradient(520px 260px at 12% 50%, rgba(180, 155, 87, .28), transparent 70%), var(--brand-grey); }
.sisterhood h3 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); color: #fff; margin: .2rem 0 .6rem; }
.sisterhood p { color: rgba(255, 255, 255, .82); max-width: 62ch; }
.sisterhood .eyebrow { color: var(--brand-gold); }
.sisterhood-line { font-family: var(--display); font-weight: 700; color: var(--brand-gold) !important; font-size: 1.15rem; }
.sisterhood-crowns { display: flex; align-items: flex-end; gap: .8rem; }
.sisterhood-crowns .crown { width: 92px; }
.sisterhood-crowns .crown.teen { width: 78px; }
.sisterhood .btn-outline { color: #fff; }
@media (max-width: 700px) { .sisterhood { grid-template-columns: 1fr; text-align: center; } .sisterhood-crowns { justify-content: center; } .sisterhood p { margin-inline: auto; } }
.code-row { display: flex; gap: .5rem; align-items: stretch; }
.code-row .code-input { flex: 1; min-width: 0; }
.code-row .btn { flex: none; }

/* ---------- Paperwork flow (contestant checklist, board tracker, apply guide) ---------- */
.journey { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .4rem; counter-reset: none; }
.journey li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem; padding: 0 .2rem; }
.journey li::before { content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.journey li:first-child::before { display: none; }
.journey li.done::before, .journey li.current::before { background: var(--brand-gold); }
.journey-dot { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem;
  background: var(--card); border: 2px solid var(--line); color: var(--muted); }
.journey-dot svg { width: 16px; height: 16px; }
.journey li.done .journey-dot { background: var(--brand-gold); border-color: var(--brand-gold); color: #fff; }
.journey li.current .journey-dot { border-color: var(--brand-gold); color: var(--gold-ink); box-shadow: 0 0 0 4px var(--gold-100); }
.journey-text strong { display: block; font-size: .8rem; line-height: 1.25; }
.journey-text small { display: block; color: var(--muted); font-size: .78rem; line-height: 1.3; }
.journey li:not(.done):not(.current) .journey-text strong { color: var(--muted); font-weight: 600; }
@media (max-width: 640px) {
  .journey { grid-auto-flow: row; grid-template-columns: 1fr; gap: 0; }
  .journey li { flex-direction: row; text-align: left; gap: .75rem; padding: .35rem 0; }
  .journey li::before { top: auto; bottom: 50%; right: auto; left: 15px; width: 2px; height: 100%; }
}

.paper-summary { display: flex; gap: 1.3rem; align-items: center; margin-bottom: 1.4rem; }
.paper-summary h3 { margin: 0 0 .25rem; font-size: 1.25rem; }
.paper-summary p { margin: 0 0 .7rem; font-size: .9rem; }
.paper-summary.turned-in { border-color: var(--gold-line); background: linear-gradient(135deg, var(--gold-100), var(--card) 70%); }
.paper-summary.complete { border-color: var(--ok); background: linear-gradient(135deg, var(--ok-bg), var(--card) 70%); }
.paper-counts { display: flex; flex-wrap: wrap; gap: .4rem; }
.ring-wrap { position: relative; width: 92px; height: 92px; flex: none; }
.ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 8; }
.ring-bg { stroke: var(--noir-100); }
.ring-fg { stroke: var(--brand-gold); stroke-linecap: round; transition: stroke-dashoffset .8s var(--ease-out, ease); }
.paper-summary.complete .ring-fg { stroke: var(--ok); }
.ring-num { position: absolute; inset: 0; display: grid; place-content: center; font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ring-num b { font-size: 1.5rem; color: var(--ink); line-height: 1; text-align: center; }
@media (max-width: 520px) { .paper-summary { flex-direction: column; align-items: flex-start; } }

.due-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 600; padding: .18rem .55rem; border-radius: 999px;
  background: var(--noir-100); color: var(--muted); white-space: nowrap; }
.due-chip.soon { background: var(--warn-bg); color: var(--warn); }
.due-chip.late { background: var(--danger-bg); color: var(--danger); }
.due-chip.ok { background: var(--ok-bg); color: var(--ok); }
.req-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; color: var(--muted); font-size: .82rem; }
.req-card.missing { border-top-color: var(--danger-line); }
.req-group { margin-bottom: 1.6rem; }
.req-group-title { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; margin: 0 0 .2rem; }
.req-group-title .count { font-family: var(--sans); font-size: .78rem; font-weight: 700; min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem; border-radius: 999px;
  display: inline-grid; place-items: center; background: var(--noir-100); color: var(--muted); }
.req-group.changes .count { background: var(--danger-bg); color: var(--danger); }
.req-group.missing .count { background: var(--warn-bg); color: var(--warn); }
.req-group.approved .count { background: var(--ok-bg); color: var(--ok); }
.req-group-hint { font-size: .84rem; margin: 0 0 .8rem; }

/* Celebration */
.cele { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 50% 42%, rgba(74, 64, 38, .96), rgba(24, 24, 24, .97) 62%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade-in .25s ease both; }
.cele.out { opacity: 0; transition: opacity .25s ease; }
.cele-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cele-card { position: relative; display: grid; justify-items: center; gap: .6rem; text-align: center; max-width: 26rem; color: #fff; animation: cele-pop .6s var(--ease-out, ease) both .1s; }
.cele-card .crown-spin { --size: 130px; }
.cele-card .eyebrow { color: var(--champ-400); }
.cele-card h2 { margin: 0; color: #fff; font-size: clamp(2rem, 6vw, 2.8rem); }
.cele-card p { margin: 0 0 .6rem; color: rgba(255, 255, 255, .8); }
@keyframes cele-pop { from { opacity: 0; transform: scale(.85) translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cele, .cele-card { animation: none; } .ring-fg { transition: none; } }

/* Board: who's missing what */
.tracker th { vertical-align: bottom; min-width: 64px; max-width: 110px; font-size: .78rem; line-height: 1.2; }
.tracker th span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.tracker th small { display: block; color: var(--muted); font-weight: 400; margin-top: .15rem; }
.tracker td.tk { text-align: center; font-weight: 700; }
.tk svg { width: 16px; height: 16px; }
.tk.ok, .tk-key.ok { color: var(--ok); }
.tk.wait span, .tk-key.wait span { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-gold); }
.tk.back, .tk-key.back { color: var(--danger); }
.tk.miss, .tk-key.miss { color: var(--muted); }
.tk.miss.late, .tk-key.miss.late { color: var(--danger); background: var(--danger-bg); }
.tk.na { color: var(--line); }
.tk-key { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; margin: 0 .2rem 0 .7rem; font-weight: 700; vertical-align: middle; }
.tk-key:first-child { margin-left: 0; }
.tk-key svg { width: 14px; height: 14px; }

/* Apply: how it works + paperwork list */
.apply-guide { padding: clamp(1.4rem, 4vw, 2.4rem); margin-bottom: 1.4rem; }
.apply-guide .apply-step:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
#paperList .apply-step { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.apply-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: .9rem; }
.apply-steps li { counter-increment: step; display: grid; grid-template-columns: 30px 1fr; column-gap: .8rem; align-items: start; }
.apply-steps li::before { content: counter(step); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: .85rem; border: 2px solid var(--brand-gold); color: var(--gold-ink); }
.apply-steps li.done::before { content: "\2713"; background: var(--brand-gold); color: #fff; }
.apply-steps li span { color: var(--muted); font-size: .88rem; line-height: 1.45; }
.apply-paper { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.apply-paper li { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: .8rem 1rem; }
.apply-paper li + li { border-top: 1px solid var(--line); }
.apply-paper li > div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.apply-paper li .muted { font-size: .82rem; }
.apply-due { flex: none; font-size: .78rem; font-weight: 600; color: var(--gold-ink); background: var(--gold-100); padding: .2rem .6rem; border-radius: 999px; white-space: nowrap; }
@media (max-width: 520px) { .apply-paper li { flex-direction: column; gap: .4rem; } }

/* Group appearances: public call to action + board roster */
.group-cta { display: flex; align-items: center; gap: 1.4rem; margin-top: 2rem; padding: clamp(1.2rem, 3vw, 1.8rem); border: 1px solid var(--gold-line); border-radius: var(--radius);
  background: linear-gradient(135deg, var(--gold-100), var(--card) 75%); }
.group-cta h3 { margin: 0 0 .3rem; font-size: 1.3rem; }
.group-cta p { margin: 0; max-width: 60ch; font-size: .92rem; }
.group-cta .btn { flex: none; }
.group-cta-crowns { display: flex; align-items: flex-end; gap: .2rem; flex: none; }
.group-cta-crowns .crown { width: 38px; }
.group-cta-crowns .crown:nth-child(2) { width: 30px; }
@media (max-width: 720px) { .group-cta { flex-direction: column; align-items: flex-start; } }

.roster { border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; margin: 0 0 1rem; }
.roster-head { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; }
.roster-head strong { display: block; font-size: 1.05rem; }
.roster-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--noir-100); margin: .7rem 0 .5rem; }
.roster-bar .yes { background: var(--ok); } .roster-bar .no { background: var(--danger); } .roster-bar .none { background: var(--noir-100); }
.roster-list { list-style: none; margin: 0; padding: 0; }
.roster-list li { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; }
.roster-list li + li { border-top: 1px solid var(--line); }
.roster-list strong { display: block; font-size: .88rem; }
.roster-list small { display: block; color: var(--muted); font-size: .78rem; }
.avatar.sm { width: 30px; height: 30px; font-size: .78rem; flex: none; }
.inq-trail { margin-top: .3rem; font-size: .78rem; line-height: 1.35; color: var(--muted); }

/* Spots on events */
.spots-chip { display: inline-block; font-size: .78rem; font-weight: 700; padding: .05rem .5rem; border-radius: 999px; background: var(--gold-100); color: var(--gold-ink); white-space: nowrap; }
.spots-chip.full { background: var(--noir-100); color: var(--muted); }
.waitlist-note { display: flex; align-items: center; gap: .45rem; flex: 1 1 100%; font-size: .86rem; color: var(--gold-ink); }
.waitlist-note svg { width: 16px; height: 16px; flex: none; }

/* My Impact */
.impact-hero { display: flex; align-items: center; gap: 1.6rem; margin-bottom: 1.2rem; background: linear-gradient(135deg, var(--gold-100), var(--card) 70%); border-color: var(--gold-line); }
.impact-ring { position: relative; width: 150px; height: 150px; flex: none; }
.impact-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.impact-ring circle { fill: none; stroke-width: 10; }
.impact-ring span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.impact-ring b { font-family: var(--display); font-size: 2.3rem; line-height: 1; color: var(--ink); }
@media (max-width: 600px) { .impact-hero { flex-direction: column; align-items: flex-start; } .impact-ring { width: 120px; height: 120px; } }
.month-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: .35rem; align-items: end; height: 190px; padding-top: 1rem; }
.mb { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: .25rem; min-width: 0; }
.mb-bar { display: block; width: 100%; max-width: 26px; min-height: 2px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--champ-400), var(--brand-gold)); }
.mb-val { font-size: .72rem; font-weight: 700; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.mb-label { font-size: .72rem; color: var(--muted); }
.kind-split { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.kind-split li { display: grid; grid-template-columns: minmax(0, 1fr) 40% auto; align-items: center; gap: .7rem; font-size: .88rem; }
.kind-split b { font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kind-track { height: 8px; border-radius: 999px; background: var(--noir-100); overflow: hidden; }
.kind-track span { display: block; height: 100%; background: var(--brand-gold); border-radius: 999px; }
.highlights { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.highlights blockquote { margin: 0; padding: 1rem 1.1rem; border-left: 3px solid var(--brand-gold); background: var(--surface); border-radius: 0 10px 10px 0; }
.highlights p { margin: 0 0 .5rem; font-size: .9rem; line-height: 1.55; }
.highlights cite { font-style: normal; font-size: .8rem; color: var(--muted); }

/* Printing My Impact: just the page content */
@media print {
  .sidebar, .topbar, .tabbar, .no-print, .toast, #scrim, #drawer, .page-head .head-tools { display: none !important; }
  body, .portal, .main { background: #fff !important; color: #222 !important; }
  .main { margin: 0 !important; padding: 0 !important; }
  .panel, .kpi { box-shadow: none !important; break-inside: avoid; }
}

/* Run of show */
.show-head { flex-wrap: wrap; gap: .8rem; }
.show-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.switch-row.compact { padding: .3rem .2rem; gap: .6rem; border: 0; }
.switch-row.compact strong { font-size: .82rem; font-weight: 600; }
.ros { list-style: none; margin: 0; padding: 0; }
.ros-row { display: flex; gap: .9rem; align-items: flex-start; padding: .75rem 0; }
.ros-row + .ros-row { border-top: 1px solid var(--line); }
.ros-time { flex: none; width: 4.6rem; font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; }
.ros-time small { display: block; font-weight: 400; font-size: .78rem; color: var(--muted); }
.ros-row strong { display: block; }
.ros-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .2rem; font-size: .8rem; color: var(--muted); }
.ros-notes { display: block; margin-top: .3rem; font-size: .8rem; color: var(--muted); white-space: pre-line; }
.ros-row.call .ros-time, .ros-row.break .ros-time { color: var(--muted); }
.ros-row.crowning strong { color: var(--gold-ink); }
.ros-tools { display: flex; gap: .3rem; align-items: center; flex: none; }
.ros.compact .ros-row { padding: .5rem 0; }
.ros-tools .icon-btn { width: 30px; height: 30px; font-size: .9rem; line-height: 1; }
.ros-tools .icon-btn:disabled { opacity: .35; cursor: default; }
.order-list { list-style: none; margin: 0; padding: 0; }
.order-list li { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; }
.order-list li + li { border-top: 1px solid var(--line); }
.order-list strong, .order-list small { display: block; }
.order-list small { color: var(--muted); font-size: .8rem; }
.order-num { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem;
  background: var(--gold-100); color: var(--gold-ink); border: 1px solid var(--gold-line); font-variant-numeric: tabular-nums; }
.order-num.big { width: 56px; height: 56px; font-size: 1.5rem; }
.comp-day-num { display: flex; align-items: center; gap: .9rem; margin-bottom: .8rem; }
/* Finalists (Top N) */
.fin-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.fin-cols { align-items: start; }
.fin-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .4rem; }
.fin-add { display: flex; align-items: center; gap: .55rem; text-align: left; font: inherit; font-size: .86rem; color: inherit; padding: .4rem .6rem .4rem .4rem; border-radius: 10px; border: 1px solid var(--line); background: var(--card); cursor: pointer; }
.fin-add span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-add b { color: var(--gold-ink); font-size: 1.1rem; }
.fin-add:not(:disabled):hover { border-color: var(--gold-500); background: var(--gold-100); }
.fin-add:disabled { opacity: .45; cursor: default; }
.fin-add .order-num { width: 28px; height: 28px; font-size: .8rem; }
.fin-results { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.fin-results li { display: flex; align-items: center; gap: .7rem; padding: .45rem .6rem; border-radius: 10px; border: 1px solid var(--line); }
.fin-results li.win { border-color: var(--gold-line); background: var(--gold-100); }
.fin-results li.win strong { color: var(--gold-ink); }
.fin-place { flex: none; width: 8.5rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.fin-results li.win .fin-place { color: var(--gold-ink); }
.fin-result-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.fin-result-row > span { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.fin-result-row select { width: auto; max-width: 55%; }
.live-place { display: block; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--champ-400, #cdb77a); margin-bottom: .15rem; }
@media (max-width: 640px) { .fin-place { width: 6.8rem; } .fin-pick { grid-template-columns: 1fr 1fr; } }

/* Season Plan: the season's stages */
.plan-hero { position: relative; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.plan-ring { width: 60px; height: 60px; transform: none; }
.plan-ring .ring-in b { font-size: 1.1rem; } .plan-ring .ring-in small { font-size: .66rem; }
.plan-hero .grow { min-width: 220px; }
.plan-phases { display: grid; gap: 1rem; }
.plan-phase { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.2rem .6rem; }
.plan-phase header { display: flex; align-items: center; gap: .7rem; margin-bottom: .4rem; }
.plan-phase header h3 { margin: 0; flex: 1; font-size: 1rem; }
.plan-phase header small { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.plan-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 800; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.plan-phase.complete .plan-num { background: var(--ok); border-color: var(--ok); color: #fff; }
.plan-list { list-style: none; margin: 0; padding: 0; }
.plan-item { position: relative; display: flex; align-items: center; gap: .8rem; padding: .65rem 0 .65rem .1rem; }
.plan-item + .plan-item { border-top: 1px solid var(--line); }
.plan-item strong { display: block; font-size: .92rem; } .plan-item span { display: block; font-size: .8rem; color: var(--muted); }
.plan-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); background: var(--card); }
.plan-dot svg { width: 12px; height: 12px; }
.plan-item.done .plan-dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.plan-item.active .plan-dot { border-color: var(--gold-500); background: conic-gradient(var(--gold-500) 0 50%, transparent 50% 100%); }
.plan-item.done strong { color: var(--muted); font-weight: 600; }
.plan-item.next { margin-inline: -.6rem; padding-inline: .6rem; border-radius: 10px; background: var(--gold-100); border-top-color: transparent; }
.plan-item.next + .plan-item { border-top-color: transparent; }
.plan-item.next .plan-dot { border-color: var(--gold-500); box-shadow: 0 0 0 4px var(--gold-100); }
.plan-item .btn { flex: none; }
.plan-item .grow { flex: 1; min-width: 0; }
.plan-hero .grow { flex: 1; }
.plan-hero > .btn { margin-left: auto; }
.plan-hero h2 { font-size: clamp(1.25rem, 2.6vw, 1.7rem); }
@media (max-width: 640px) { .plan-hero { align-items: flex-start; gap: .9rem; } .plan-hero .grow { min-width: 0; flex-basis: calc(100% - 76px); } .plan-hero > .btn { margin-left: 0; width: 100%; justify-content: center; } .plan-ring { width: 52px; height: 52px; --size: 52px; } .plan-item { flex-wrap: wrap; } .plan-item .grow { flex-basis: calc(100% - 40px); } .plan-item .btn { margin-left: 34px; } }

/* Number Draw: the page and the display share the stage (wheel + card) and the slots board */
.btn-lg { min-height: 50px; padding-inline: 1.6rem; font-size: 1rem; }
.dw-head { display: flex; align-items: center; gap: .8rem 1.2rem; flex-wrap: wrap; margin-bottom: 1rem; }
.dw-progress { flex: 1; min-width: 180px; display: grid; gap: .3rem; font-size: .88rem; font-variant-numeric: tabular-nums; }
.dw-progress .bar { height: 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.dw-progress .bar i { display: block; height: 100%; background: var(--gold-500); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.dw-tools, .dw-display-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.dw-display-row { margin-top: 1rem; }
.dw-setup-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1rem; }
.dw-setup-go { display: flex; align-items: flex-end; gap: .7rem; flex-wrap: wrap; }
.dw-setup-go label { display: grid; gap: .3rem; font-size: .78rem; font-weight: 600; }
.dw-names { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; margin: -.2rem 0 1rem; }
.dw-names > .muted { flex-basis: 100%; font-size: .78rem; }
.dw-names label { display: grid; gap: .25rem; font-size: .78rem; font-weight: 600; color: var(--muted); flex: 1 1 140px; max-width: 220px; }
.group-name-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0 .7rem; margin-top: .4rem; }
.group-name-fields > .muted { grid-column: 1 / -1; font-size: .8rem; margin-bottom: .3rem; }
.dw-pics { font-size: .8rem; color: var(--muted); margin: -.3rem 0 .9rem; }
.dw-pics.ok { color: var(--ok); }
.dw-note { font-size: .84rem; color: var(--warn); margin: -.4rem 0 1rem; }
.dw-tip { display: grid; gap: .2rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed var(--line); font-size: .84rem; color: var(--muted); }
.dw-tip strong { color: var(--text-strong); font-size: .8rem; }

/* The stage: a dark, theatrical panel on the page; the whole screen on the display */
.dw-stage { --ink: #fff; display: grid; grid-template-columns: 1fr; justify-items: center; align-items: center; gap: .6rem; padding: 1.4rem 1.2rem 1.8rem;
  border-radius: 20px; color: #fff; background: radial-gradient(ellipse at 30% 40%, #4a3f26 0%, #231f17 55%, #141312 100%); margin-bottom: 1rem; min-height: 420px; overflow: hidden; }
.dw-stage.done { grid-template-columns: 1fr; text-align: center; }
.dw-done h2 { font-size: clamp(1.8rem, 4vw, 3rem); margin: .2rem 0 1rem; }
.dw-eyebrow { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #d8c797; margin-bottom: .35rem; }
.dw-card { display: grid; justify-items: center; text-align: center; gap: .3rem; animation: dw-in .55s cubic-bezier(.2,.9,.25,1) both; }
.dw-card h2 { margin: 0; font-size: clamp(1.6rem, 3.6vw, 2.8rem); line-height: 1.05; }
.dw-home { margin: 0; color: rgba(255,255,255,.72); }
.dw-idle .btn { margin-top: 1rem; }
.dw-photo { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; border: 3px solid #b49b57; box-shadow: 0 0 0 8px rgba(180,155,87,.15); display: grid; place-items: center; font-size: 2.4rem; font-weight: 800; background: #2f2a1f; color: #d8c797; margin-bottom: .5rem; }
.dw-choose .dw-name { animation: dw-pop .6s cubic-bezier(.2,1.4,.4,1) .15s both; }
.dw-label { margin-top: 1.1rem; font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.75); }
.dw-entry { display: flex; gap: .5rem; width: 320px; max-width: 100%; }   /* a fixed width: it doesn't shrink as she types */
.dw-entry input { flex: 1; min-width: 0; font-size: 2rem; font-weight: 800; text-align: center; padding: .45rem .6rem; border-radius: 14px; border: 2px solid #b49b57; background: rgba(0,0,0,.35); color: #fff; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.dw-entry input::-webkit-outer-spin-button, .dw-entry input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dw-entry input:focus { outline: none; box-shadow: 0 0 0 4px rgba(226,203,138,.35); }
.dw-entry input.shake { animation: dw-shake .42s; border-color: #e07a6c; }
.dw-entry .btn { min-height: auto; padding-inline: 1.3rem; font-size: 1rem; }
.dw-hint { min-height: 2.6em; margin: .35rem 0 0; font-size: .86rem; color: rgba(255,255,255,.7); max-width: 34ch; }
.dw-hint .ok { color: #9fd9b5; } .dw-hint .bad { color: #f2a397; } .dw-hint strong { color: #fff; }
.dw-back { color: rgba(255,255,255,.6); font-size: .8rem; }
.dw-ask { font-size: 1.2rem; color: rgba(255,255,255,.8); margin: .8rem 0 0; }
.dw-number { font-size: clamp(5rem, 13vw, 10rem); font-weight: 900; line-height: .9; color: #e2cb8a; font-variant-numeric: tabular-nums; text-shadow: 0 10px 40px rgba(226,203,138,.35); animation: dw-pop .7s cubic-bezier(.2,1.5,.4,1) both; }
.dw-group { margin: .4rem 0 0; font-size: 1.3rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; animation: dw-in .5s .25s both; }
.dw-name-pick { margin-top: 1rem; font-size: .82rem; color: rgba(255,255,255,.7); }
.dw-name-pick summary { cursor: pointer; }
.dw-name-pick div { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: .6rem; max-height: 160px; overflow-y: auto; }
.dw-name-pick .chip-btn { color: #fff; border-color: rgba(255,255,255,.25); }

/* The card fan: headshot cards, seven fanned at a time */
.dw-fan { --m: 1; position: relative; width: 100%; max-width: 72rem; height: calc(19rem * var(--m) + 3rem); }
.fan-card { position: absolute; left: 50%; top: 46%; width: calc(11.5rem * var(--m)); aspect-ratio: 3 / 4; opacity: 0; will-change: transform; }
.fan-inner { position: relative; width: 100%; height: 100%; border-radius: calc(1.1rem * var(--m)); overflow: hidden; background: linear-gradient(160deg, #e2cb8a, #b49b57 45%, #6f5b2c);
  border: calc(4px * var(--m) + 1px) solid #f6efdc; box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35); transition: transform .35s cubic-bezier(.2,1.3,.4,1), box-shadow .35s, filter .4s; }
.fan-inner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fan-initials { position: absolute; inset: 0 0 22%; display: grid; place-items: center; font-weight: 900; font-size: calc(3.4rem * var(--m)); color: #2a2418; letter-spacing: .02em; }
.fan-name { position: absolute; left: 0; right: 0; bottom: 0; padding: calc(1.6rem * var(--m)) .5rem calc(.55rem * var(--m)); font-weight: 800; font-size: calc(.95rem * var(--m) + .1rem); line-height: 1.1; text-align: center; color: #fff;
  background: linear-gradient(transparent, rgba(12,10,6,.88)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-fan.wheel .fan-card:hover .fan-inner, .dw-fan.reveal .fan-card:hover .fan-inner { transform: translateY(calc(-1.6rem * var(--m))) scale(1.06); box-shadow: 0 22px 44px rgba(0,0,0,.55); }
.dw-fan.spinning .fan-card.center .fan-inner { box-shadow: 0 0 0 3px #e2cb8a, 0 16px 40px rgba(0,0,0,.55); }
.dw-fan.choosing .fan-card:not(.win) .fan-inner { filter: brightness(.45) saturate(.6); }
.dw-fan.choosing .fan-card.win .fan-inner { animation: fan-win .9s cubic-bezier(.2,1.4,.4,1) both, fan-glow 2.4s ease-in-out .9s infinite; }
.dw-spin-btn { min-width: 11rem; font-size: 1.1rem; letter-spacing: .06em; animation: dw-breathe 2.4s ease-in-out infinite; }
@keyframes fan-win { 0% { transform: none; } 60% { transform: translateY(calc(-2.2rem * var(--m))) scale(1.16); } 100% { transform: translateY(calc(-1.6rem * var(--m))) scale(1.12); } }
@keyframes fan-glow { 0%, 100% { box-shadow: 0 0 0 4px #e2cb8a, 0 0 30px 6px rgba(226,203,138,.45), 0 18px 44px rgba(0,0,0,.55); } 50% { box-shadow: 0 0 0 4px #f6efdc, 0 0 46px 12px rgba(226,203,138,.65), 0 18px 44px rgba(0,0,0,.55); } }
.draw-display .dw-fan { max-width: none; height: calc(22rem * var(--m) + 2rem); }
.draw-display .fan-card { top: 54%; }
.draw-display .dw-stage { overflow: visible; gap: .2rem; }
.draw-display .dd-main { padding-top: 1.2rem; }
.draw-display .dw-card { gap: .15rem; }
.draw-display .dw-ask { margin-top: .4rem; }
/* The reveal on the big screen: the fan steps aside for her number */
.draw-display .dw-stage.reveal .dw-fan { display: none; }
.draw-display .dw-reveal .dw-photo { width: clamp(90px, 18vh, 220px); height: clamp(90px, 18vh, 220px); }
.draw-display .dw-reveal .dw-number { font-size: clamp(5rem, 24vh, 16rem); }
.draw-display .fan-card { width: calc(14rem * var(--m)); }
.draw-display .dw-stage { grid-template-rows: auto auto; align-content: center; }
.dw-stage .dw-choose .dw-photo { display: none; }
.draw-display .dw-card h2 { font-size: clamp(1.8rem, 5.5vh, 4.5rem); }

/* The slots: one per contestant, in their groups */
.dw-board { display: grid; gap: 1.2rem; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
.dw-board.g2 { --cols: 2; } .dw-board.g3 { --cols: 3; } .dw-board.g4 { --cols: 4; }
.dw-group-col { padding: 0; margin: 0; }   /* a <section>: not the website's section spacing */
.dw-group-col h3 { margin: 0 0 .5rem; font-size: .9rem; } .dw-group-col h3 small { color: var(--muted); font-weight: 400; }
.dw-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .4rem; }
.dw-board.g1 .dw-slots { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.dw-slot { display: flex; align-items: center; gap: .45rem; min-width: 0; min-height: 42px; padding: .3rem .5rem; border-radius: 10px; border: 1px dashed var(--line); background: transparent; color: var(--muted); font: inherit; font-size: .82rem; }
.dw-slot b { font-variant-numeric: tabular-nums; min-width: 1.6em; }
.dw-slot span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-strong); }
.dw-slot.on { border-style: solid; border-color: var(--gold-line); background: var(--gold-100); color: var(--gold-ink); }
.dw-slot.fresh { animation: dw-land .9s cubic-bezier(.2,1.3,.4,1) both, dw-glow 2.6s ease-out .3s; }
button.dw-slot { cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
button.dw-slot:hover { border-color: var(--gold-500); border-style: solid; color: var(--gold-ink); transform: translateY(-1px); }
.dw-slot-photo { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; font-size: .72rem; font-weight: 800; background: var(--card); color: var(--gold-ink); }

@keyframes dw-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes dw-pop { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes dw-land { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes dw-glow { 0% { box-shadow: 0 0 0 0 rgba(180,155,87,.8); } 100% { box-shadow: 0 0 0 14px rgba(180,155,87,0); } }
@keyframes dw-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes dw-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(226,203,138,.45), 0 6px 20px rgba(0,0,0,.45); } 50% { box-shadow: 0 0 0 12px rgba(226,203,138,0), 0 6px 20px rgba(0,0,0,.45); } }
@media (max-width: 760px) {
  .dw-stage { padding: 1rem .6rem 1.4rem; min-height: 0; }
  .dw-photo { width: 96px; height: 96px; }
  .dw-board { grid-template-columns: 1fr; }
  .dw-slots { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .dw-tools .btn { flex: 1; }
}

/* The display (projector / TV): the same stage, full screen */
.draw-display { position: fixed; inset: 0; z-index: 150; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 2vh; color: #fff; overflow: hidden;
  padding: calc(2vh + var(--sa-top)) calc(3vw + var(--sa-right)) calc(2.5vh + var(--sa-bottom)) calc(3vw + var(--sa-left));
  background: radial-gradient(ellipse at 40% 35%, #4a3f26 0%, #221e16 45%, #121212 100%); font-family: var(--display, inherit); }
.draw-display .dw-stage { background: none; margin: 0; padding: 0; min-height: 0; height: 100%; gap: 4vw; }
.draw-display .dw-photo { width: clamp(110px, 24vh, 280px); height: clamp(110px, 24vh, 280px); font-size: clamp(2rem, 7vh, 5rem); }
.draw-display .dw-home, .draw-display .dw-ask { font-size: clamp(1rem, 2.8vh, 2rem); }
.draw-display .dw-number { font-size: clamp(6rem, 28vh, 18rem); }
.draw-display .dw-group { font-size: clamp(1.2rem, 4.2vh, 3rem); }
.draw-display .dw-eyebrow { font-size: clamp(.8rem, 2vh, 1.3rem); }
.draw-display .dw-board { gap: 1.5vw; }
.draw-display .dw-group-col h3 { color: #d8c797; font-size: clamp(.8rem, 1.8vh, 1.2rem); letter-spacing: .14em; text-transform: uppercase; margin-bottom: .6vh; }
.draw-display .dw-group-col h3 small { color: rgba(255,255,255,.5); }
.draw-display .dw-slots { grid-template-columns: repeat(auto-fill, minmax(clamp(80px, 9vw, 160px), 1fr)); gap: .5vh .4vw; }
.draw-display .dw-slot { min-height: 0; padding: .45vh .5vw; font-size: clamp(.62rem, 1.35vh, .95rem); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.4); }
.draw-display .dw-slot.on { background: rgba(180,155,87,.18); border-color: rgba(180,155,87,.45); color: #e2cb8a; }
.draw-display .dw-slot span { color: #fff; }
.draw-display .dw-slot-photo { width: clamp(18px, 2.6vh, 30px); height: clamp(18px, 2.6vh, 30px); }
.dd-main { min-height: 0; }
.dd-top { display: flex; align-items: baseline; justify-content: space-between; gap: 2vw; font-size: clamp(.8rem, 1.6vh, 1.1rem); letter-spacing: .14em; text-transform: uppercase; color: #cdb77a; }
.dd-top strong { color: #fff; letter-spacing: .1em; font-size: clamp(1rem, 2.4vh, 1.6rem); }
.dd-count { font-variant-numeric: tabular-nums; }
.dd-tools { position: absolute; top: calc(1vh + var(--sa-top)); right: calc(1vw + var(--sa-right)); display: flex; gap: .4rem; opacity: .25; transition: opacity .2s; }
.draw-display:hover .dd-tools { opacity: 1; }
.dd-tools button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.35); color: #fff; font-size: 1rem; cursor: pointer; }
@media (max-aspect-ratio: 1/1) { .draw-display .dw-board { grid-template-columns: 1fr; max-height: 30vh; overflow-y: auto; } .draw-display .dw-slots { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .dw-stage *, .draw-display *, .dw-slot { animation: none !important; transition: none !important; } }
@media print { .draw-display { display: none !important; } }

/* Run of Show: header, readiness, sections, timeline */
.show-top { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.2rem 1.1rem; display: grid; gap: .9rem; margin-bottom: .9rem; }
.show-top-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.seg-switch { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); max-width: 100%; overflow-x: auto; }
.seg-switch button { font: inherit; font-size: .84rem; font-weight: 600; border: 0; background: transparent; color: var(--muted); padding: .42rem .95rem; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.seg-switch button.active { background: var(--gold-100); color: var(--gold-ink); box-shadow: 0 0 0 1px var(--gold-line) inset; }
.show-go { display: flex; gap: .5rem; flex-wrap: wrap; }
.show-top .night-bar { margin: 0; padding-bottom: .15rem; }
.night-new { border-style: dashed; }
.night-new strong { color: var(--muted); }
.show-sum { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1.6rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.show-sum > div { display: grid; gap: .1rem; }
.show-sum strong { font-size: .95rem; font-variant-numeric: tabular-nums; }
.show-sum-k { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.show-sum .link-btn { margin-left: auto; font-size: .82rem; }
.show-ready { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .55rem; margin-bottom: 1rem; }
.ready-chip { display: flex; align-items: center; gap: .6rem; text-align: left; font: inherit; color: inherit; cursor: pointer; padding: .6rem .8rem; border-radius: 12px; border: 1px solid var(--warn-line); background: var(--warn-bg); }
.ready-chip small { display: block; font-size: .78rem; color: var(--muted); }
.ready-chip strong { display: block; font-size: .86rem; font-variant-numeric: tabular-nums; }
.ready-chip.ok { border-color: var(--line); background: var(--card); }
.ready-dot { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 800; border: 2px solid #c79a3c; }
.ready-chip.ok .ready-dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.ready-chip.share { border-color: var(--line); background: var(--card); }
.mini-switch { flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--line); position: relative; transition: background .15s; }
.mini-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s; }
.ready-chip.share.ok .mini-switch { background: var(--ok); }
.ready-chip.share.ok .mini-switch::after { transform: translateX(14px); }
.show-tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; overflow-x: auto; }
.show-tabs button { font: inherit; font-size: .9rem; font-weight: 600; background: none; border: 0; padding: .65rem .95rem; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.show-tabs button.active { color: var(--text-strong); border-bottom-color: var(--gold-500); }
.show-tabs .count { display: inline-block; min-width: 1.4em; padding: 0 .35em; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .78rem; font-weight: 600; text-align: center; }
.setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .7rem; }
.ros-head-tools { display: flex; gap: .4rem; flex-wrap: wrap; }
.ros2 { list-style: none; margin: 0; padding: 0; }
.ros2-row { display: flex; align-items: flex-start; gap: .8rem; padding: .7rem .6rem .7rem .7rem; border-left: 3px solid var(--line); border-radius: 0 10px 10px 0; }
.ros2-row + .ros2-row, .ros-gap + .ros2-row { margin-top: .35rem; }
.ros2-row:hover { background: var(--surface); }
.ros2-row.k-segment { border-left-color: var(--brand-gold); }
.ros2-row.k-talent { border-left-color: #8f7bb8; }
.ros2-row.k-crowning { border-left-color: var(--brand-gold); background: var(--gold-100); }
.ros2-row.k-break { border-left-style: dashed; }
.ros2-row .drag-grip { margin-top: .15rem; }
.ros2-when { flex: none; width: 5.2rem; }
.ros2-when strong { display: block; font-size: .92rem; font-variant-numeric: tabular-nums; }
.ros2-when small { display: block; font-size: .78rem; color: var(--muted); }
.ros2-row.k-call .ros2-when strong, .ros2-row.k-break .ros2-when strong { color: var(--muted); }
.ros2-body { flex: 1; min-width: 0; }
.ros2-title { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .45rem; }
.ros2-title strong { font-size: .98rem; margin-right: .15rem; }
.ros2-row.k-crowning .ros2-title strong { color: var(--gold-ink); }
.ros2-sub { font-size: .8rem; color: var(--muted); margin-top: .15rem; }
.ros2-notes { font-size: .8rem; color: var(--muted); margin-top: .3rem; white-space: pre-line; font-style: italic; }
.ros2-tools { flex: none; display: flex; gap: .3rem; align-items: center; }
.ros2-tools .icon-btn { width: 30px; height: 30px; font-size: .9rem; line-height: 1; }
.ros2-tools .icon-btn:disabled { opacity: .35; cursor: default; }
@media (hover: hover) { .ros2-tools .icon-btn { opacity: 0; } .ros2-row:hover .ros2-tools .icon-btn:not(:disabled), .ros2-tools .icon-btn:focus-visible { opacity: 1; } }
.ros-flag { display: inline-block; font-size: .78rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.ros-flag.gold { background: var(--gold-100); border-color: var(--gold-line); color: var(--gold-ink); }
.ros-gap { list-style: none; margin: .35rem 0 0 5.9rem; font-size: .78rem; color: var(--muted); }
.ros-gap span { display: inline-block; padding: .05rem .5rem; border-radius: 999px; border: 1px dashed var(--line); }
.ros-gap.warn { color: var(--danger); }
.ros-gap.warn span { border-color: var(--danger-line); background: var(--danger-bg); }
.drag-on .ros-gap { display: none; }
.ros-quick { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed var(--line); }
.ros-quick .muted { font-size: .78rem; margin-right: .2rem; }
.lineup-note { font-size: .82rem; margin: -.2rem 0 .7rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.order-list.lineup li { gap: .75rem; }
.group-pill { flex: none; font: inherit; font-size: .78rem; font-weight: 700; padding: .25rem .65rem; border-radius: 999px; cursor: pointer; border: 1px solid var(--gold-line); background: var(--gold-100); color: var(--gold-ink); }
.group-pill.none { border-style: dashed; background: transparent; color: var(--muted); border-color: var(--line); }
.lineup-music { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; color: var(--muted); border: 1px dashed var(--line); }
.lineup-music.ok { color: var(--ok); border: 1px solid var(--ok); background: var(--ok-bg); }
@media (max-width: 640px) {
  .show-top { padding: .9rem; }
  .show-go { width: 100%; } .show-go .btn { flex: 1; }
  .show-sum { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1rem; }
  .show-sum > div:first-child { grid-column: 1 / -1; }
  .show-sum .link-btn { margin-left: 0; justify-self: start; align-self: end; }
  .show-ready { grid-template-columns: 1fr 1fr; gap: .45rem; }
  .ready-chip { padding: .5rem .6rem; gap: .45rem; }
  .ready-chip strong { font-size: .8rem; }
  .ready-dot { width: 18px; height: 18px; }
  .night-chip { padding: .4rem .7rem; }
  .show-sum > div:nth-child(2) { grid-column: 1 / -1; }
  /* A program row on a phone: the time over the title, the whole width for the words. */
  .ros2-row { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "grip when tools" "grip body tools"; column-gap: .55rem; row-gap: .15rem; padding-left: .45rem; }
  .ros2-row .drag-grip { grid-area: grip; align-self: center; margin-top: 0; }
  .ros2-when { grid-area: when; width: auto; display: flex; gap: .45rem; align-items: baseline; }
  .ros2-when strong { font-size: .82rem; } .ros2-when small { font-size: .78rem; }
  .ros2-body { grid-area: body; }
  .ros2-tools { grid-area: tools; align-self: center; }
  .ros-gap { margin-left: 2.2rem; }
  .ros2-tools .btn { padding-inline: .6rem; }
  .ros2-tools .icon-btn { display: none; }
  .order-list.lineup .order-photo { display: none; }
}
@media print { .show-ready, .show-tabs, .ros-quick, .ros-gap { display: none !important; } .show-top { border: 0; padding: 0; } .ros2-row { break-inside: avoid; } }
.night-bar { display: flex; gap: .5rem; align-items: stretch; overflow-x: auto; padding: .1rem .1rem .5rem; margin: .4rem 0 .2rem; scrollbar-width: thin; }
.night-chip { flex: none; text-align: left; padding: .45rem .8rem; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: inherit; cursor: pointer; font: inherit; }
.night-chip strong { display: block; font-size: .84rem; }
.night-chip small { display: block; font-size: .78rem; color: var(--muted); }
.night-chip.active { border-color: var(--gold-line); background: var(--gold-100); }
.night-chip.active strong { color: var(--gold-ink); }
.night-bar .btn { align-self: center; flex: none; }
.show-setup { display: grid; gap: .7rem; }
.setup-choice { text-align: left; padding: .9rem 1rem; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.setup-choice:hover { border-color: var(--gold-line); background: var(--gold-100); }
.setup-choice strong { display: block; margin-bottom: .2rem; }
.setup-choice span { display: block; font-size: .84rem; color: var(--muted); line-height: 1.45; }
.phase-list { list-style: none; margin: 0; padding: 0; }
.phase-list li { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; }
.phase-list li + li { border-top: 1px solid var(--line); }
.phase-list strong, .phase-list small { display: block; }
.phase-list small { color: var(--muted); font-size: .8rem; }
.phase-where { border: 1px solid var(--line); border-radius: 10px; padding: .4rem .9rem .7rem; margin: .2rem 0 .6rem; }
.phase-where legend { font-size: .8rem; font-weight: 700; padding: 0 .3rem; }
.phase-where label { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .35rem 0; font-weight: 400; font-size: .88rem; }
.phase-where select { width: auto; max-width: 100%; }
.drag-grip { flex: none; align-self: center; display: grid; place-items: center; width: 22px; height: 32px; margin: 0 -.3rem 0 -.35rem; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: grab; touch-action: none; opacity: .55; }
.ros-row .drag-grip { align-self: flex-start; margin-top: -.3rem; }
.drag-grip:hover { opacity: 1; background: var(--gold-100); color: var(--gold-ink); }
.drag-on, .drag-on * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
li.dragging { position: relative; z-index: 5; background: var(--card); box-shadow: 0 10px 28px rgba(0,0,0,.28); border-radius: 10px; opacity: .96; }
.drag-on li:not(.dragging) { transition: transform .12s; }
.seg-presets { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 1rem; }
.seg-presets .muted { font-size: .78rem; margin-right: .2rem; }
.chip-btn { border: 1px solid var(--line); background: transparent; color: inherit; font: inherit; font-size: .8rem; padding: .3rem .7rem; border-radius: 999px; cursor: pointer; }
.chip-btn:hover, .chip-btn.active { border-color: var(--gold-line); background: var(--gold-100); color: var(--gold-ink); }
.comp-day-night { margin: .9rem 0 .2rem; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-ink); }
.comp-day-num div > strong, .comp-day-num div > span { display: block; }
@media (max-width: 600px) { .ros-row { flex-wrap: wrap; } .ros-tools { width: 100%; justify-content: flex-end; } }

/* Live show mode */
.show-live { position: fixed; inset: 0; z-index: 140; display: grid; grid-template-rows: auto 1fr auto auto; gap: 1rem; color: #fff;
  padding: calc(1rem + var(--sa-top)) calc(1.2rem + var(--sa-right)) calc(1rem + var(--sa-bottom)) calc(1.2rem + var(--sa-left));
  background: radial-gradient(circle at 50% 30%, #3f3726, #1b1b1b 70%); }
.live-top { display: flex; align-items: center; gap: 1rem; }
.live-top .eyebrow { color: var(--champ-400); flex: 1; }
.live-clock { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.1rem; }
.show-live .btn-ghost { color: #fff; border-color: rgba(255,255,255,.3); background: transparent; }
.live-main { align-self: center; max-width: 52rem; width: 100%; margin: 0 auto; text-align: center; display: grid; gap: .8rem; justify-items: center; }
.live-kind { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--champ-400); font-weight: 700; }
.live-main h1 { margin: 0; color: #fff; font-size: clamp(2.2rem, 7vw, 4.4rem); line-height: 1.05; text-wrap: balance; }
.live-sub { margin: 0; color: rgba(255,255,255,.72); }
.live-contestant { display: flex; align-items: center; gap: 1.2rem; text-align: left; margin-top: .6rem; padding: 1rem 1.3rem; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(214,199,158,.3); }
.live-contestant strong { display: block; font-size: 1.6rem; }
.live-contestant > div > span { display: block; color: rgba(255,255,255,.7); font-size: .9rem; }
.live-num { font-family: var(--display); font-size: 3.2rem; font-weight: 800; color: var(--champ-400); line-height: 1; }
.live-song { color: #fff !important; margin-top: .4rem; font-weight: 600; }
.live-cues { font-size: .85rem; margin-bottom: .5rem; }
.live-contestant .btn { margin-top: .4rem; }
.live-notes { margin: .4rem 0 0; max-width: 40rem; color: rgba(255,255,255,.75); font-size: .95rem; white-space: pre-line; }
.live-next { text-align: center; color: rgba(255,255,255,.75); }
.live-next .eyebrow { color: var(--champ-400); display: block; }
.live-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.live-controls .btn { min-width: 8rem; padding-block: .8rem; font-size: 1rem; }
.live-pos { color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .live-contestant { flex-direction: column; text-align: center; } }
.show-live.rehearsal { background: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 14px, transparent 14px 28px), radial-gradient(circle at 50% 30%, #2f3340, #1b1b1b 70%); }
.live-rehearsal { display: inline-block; padding: .15rem .55rem; border-radius: 999px; border: 1px dashed currentColor; color: #d9dcef; letter-spacing: .08em; }
@media print { .show-live { display: none !important; } }
.show-cols { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media (max-width: 1180px) { .show-cols { grid-template-columns: 1fr; } }
/* Hall of Fame: long titles (Miss Panoramaland's Teen 2019) wrap inside the card */
.hof-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.hof-card { grid-template-columns: 100px minmax(0, 1fr); }
.hof-body { min-width: 0; }
.hof-title { display: flex; align-items: flex-start; letter-spacing: .08em; line-height: 1.35; overflow-wrap: anywhere; }
@media (max-width: 520px) { .hof-card { grid-template-columns: 84px minmax(0, 1fr); } }

/* Polls */
.poll-list { display: grid; gap: 1rem; max-width: 760px; }
.poll { display: grid; gap: .8rem; }
.poll.closed { opacity: .92; }
.poll-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.poll-head h3 { margin: .15rem 0 0; font-size: 1.15rem; text-wrap: balance; }
.poll-head .tag { flex: none; }
.poll-vote { display: grid; gap: .45rem; }
.poll-choice { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; font-weight: 500; transition: border-color .15s, background .15s; }
.poll-choice input { accent-color: var(--brand-gold); width: 18px; height: 18px; flex: none; }
.poll-choice:has(input:checked) { border-color: var(--brand-gold); background: var(--gold-100); }
.poll-actions { display: flex; gap: .5rem; margin-top: .3rem; }
.poll-results { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.pr-top { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; margin-bottom: .3rem; }
.pr-top b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-bar { display: block; height: 10px; border-radius: 999px; background: var(--noir-100); overflow: hidden; }
.pr-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--champ-400); transition: width .6s var(--ease-out, ease); }
.poll-results li.mine .pr-bar > span { background: var(--brand-gold); }
.pr-names { display: block; margin-top: .25rem; font-size: .78rem; color: var(--muted); }
.poll-foot { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; font-size: .84rem; border-top: 1px solid var(--line); padding-top: .7rem; }
.poll-tools { display: flex; gap: .4rem; flex-wrap: wrap; }
.poll-waiting { margin: 0; font-size: .78rem; }
.poll-opt-row { margin-bottom: .45rem; }
.poll-opt-row input { width: 100%; }
@media (prefers-reduced-motion: reduce) { .pr-bar > span { transition: none; } }

/* ---------- Files: upload tray, drop overlay, viewer, quick review ---------- */
.up-tray { position: fixed; right: calc(16px + var(--sa-right)); bottom: calc(16px + var(--sa-bottom)); z-index: 150; width: min(360px, calc(100vw - 32px));
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.18);
  transform: translateY(24px); opacity: 0; pointer-events: none; transition: transform .3s var(--ease-out, ease), opacity .25s ease; }
.up-tray.show { transform: none; opacity: 1; pointer-events: auto; }
@media (max-width: 900px) { .up-tray { bottom: calc(80px + var(--sa-bottom)); } }
.up-tray header { display: flex; justify-content: space-between; align-items: center; padding: .65rem .9rem; border-bottom: 1px solid var(--line); font-size: .86rem; }
.up-x { border: 0; background: none; font-size: 1.2rem; color: var(--muted); cursor: pointer; line-height: 1; }
.up-tray ul { list-style: none; margin: 0; padding: .3rem 0; max-height: 50vh; overflow: auto; }
.up-tray li { display: flex; align-items: center; gap: .7rem; padding: .55rem .9rem; transform: translateX(16px); opacity: 0; transition: transform .3s var(--ease-out, ease), opacity .3s ease; }
.up-tray li.in { transform: none; opacity: 1; }
.up-tray li.out { opacity: 0; transform: translateX(30px); }
.up-ic { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-100); position: relative; }
.up-tray li.working .up-ic::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--brand-gold); border-right-color: transparent; animation: up-spin .8s linear infinite; }
.up-tray li.done .up-ic { background: var(--ok-bg); }
.up-tray li.done .up-ic::after { content: ""; width: 7px; height: 12px; border: solid var(--ok); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); animation: up-pop .35s var(--ease-out, ease); }
.up-tray li.failed .up-ic { background: var(--danger-bg); }
.up-tray li.failed .up-ic::after { content: "!"; color: var(--danger); font-weight: 800; }
.up-body { flex: 1; min-width: 0; display: grid; gap: .15rem; }
.up-name { font-size: .84rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-meta { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.up-tray li.failed .up-meta { color: var(--danger); }
.up-bar { display: block; height: 4px; border-radius: 999px; background: var(--noir-100); overflow: hidden; }
.up-bar > span { display: block; height: 100%; width: 3%; background: var(--brand-gold); border-radius: 999px; transition: width .25s ease; }
.up-tray li.done .up-bar > span { background: var(--ok); }
.up-tray li.failed .up-bar { display: none; }
.up-act { flex: none; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: .3rem .7rem; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.up-act.ghost { border-color: transparent; color: var(--muted); padding-inline: .4rem; }
@keyframes up-spin { to { transform: rotate(360deg); } }
@keyframes up-pop { from { transform: rotate(45deg) scale(.2); opacity: 0; } to { transform: rotate(45deg) translate(-1px, -1px); opacity: 1; } }

.drop-overlay { position: fixed; inset: 0; z-index: 160; display: grid; place-items: center; background: rgba(40, 36, 26, .55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.drop-overlay.in { opacity: 1; }
.drop-card { display: grid; justify-items: center; gap: .4rem; padding: 2.2rem 3rem; border: 2.5px dashed var(--brand-gold); border-radius: 22px; background: var(--card); color: var(--ink); text-align: center; transform: scale(.94); transition: transform .25s var(--ease-out, ease); }
.drop-overlay.in .drop-card { transform: none; }
.drop-card small { color: var(--muted); }
.drop-ic { width: 48px; height: 48px; border-radius: 50%; background: var(--gold-100); position: relative; }
.drop-ic::before { content: ""; position: absolute; left: 50%; top: 13px; width: 3px; height: 20px; margin-left: -1.5px; background: var(--gold-ink); border-radius: 2px; }
.drop-ic::after { content: ""; position: absolute; left: 50%; top: 12px; width: 12px; height: 12px; margin-left: -6px; border: solid var(--gold-ink); border-width: 3px 0 0 3px; transform: rotate(45deg); }

.viewer { position: fixed; inset: 0; z-index: 145; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,0); transition: background .25s ease; }
.viewer.in { background: rgba(0,0,0,.55); }
.viewer-sheet { position: relative; width: min(1000px, 100%); height: calc(100% - 28px - var(--sa-top)); display: grid; grid-template-rows: auto auto 1fr auto; background: var(--card); color: var(--ink);
  border-radius: 20px 20px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.25); transform: translateY(100%); transition: transform .32s var(--ease-out, ease); padding-bottom: var(--sa-bottom); }
.viewer.in .viewer-sheet { transform: none; }
.viewer.out .viewer-sheet { transform: translateY(100%); }
.viewer-grab { width: 42px; height: 5px; border-radius: 999px; background: var(--line); margin: .55rem auto 0; }
.viewer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .5rem 1.1rem .7rem; border-bottom: 1px solid var(--line); }
.viewer-title { min-width: 0; display: grid; gap: .1rem; }
.viewer-title strong { font-size: 1rem; overflow-wrap: anywhere; }
.viewer-title span { font-size: .78rem; color: var(--muted); }
.viewer-tools { display: flex; gap: .5rem; align-items: center; flex: none; }
.viewer-close { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 1.2rem; cursor: pointer; }
.viewer-stage { position: relative; min-height: 0; overflow: auto; display: grid; place-items: center; background: var(--surface); }
.viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer-stage iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.viewer-stage video { max-width: 100%; max-height: 100%; }
.viewer-stage.slide-left { animation: vw-left .28s var(--ease-out, ease); }
.viewer-stage.slide-right { animation: vw-right .28s var(--ease-out, ease); }
.viewer-stage.approved-flash { box-shadow: inset 0 0 0 4px var(--ok); }
@keyframes vw-left { from { transform: translateX(40px); opacity: 0; } }
@keyframes vw-right { from { transform: translateX(-40px); opacity: 0; } }
.viewer-audio, .viewer-file { display: grid; justify-items: center; gap: .6rem; text-align: center; padding: 2rem 1.2rem; max-width: 30rem; }
.viewer-audio audio { width: min(420px, 80vw); }
.viewer-note { font-size: 2.6rem; color: var(--brand-gold); line-height: 1; }
.viewer-file p { margin: 0; color: var(--muted); }
.viewer-msg { color: var(--muted); padding: 2rem; text-align: center; }
.viewer-loading span { display: block; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--brand-gold); animation: up-spin .8s linear infinite; }
.viewer-foot:not(:empty) { padding: .8rem 1.1rem; border-top: 1px solid var(--line); }
.viewer-nav { position: absolute; top: 50%; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow); }
.viewer-nav.prev { left: 12px; } .viewer-nav.next { right: 12px; }
@media (pointer: coarse) { .viewer-nav { display: none; } }
body.viewer-open-body { overflow: hidden; }
.review-actions { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }
.review-actions kbd { font: inherit; font-size: .78rem; opacity: .6; margin-left: .3rem; border: 1px solid currentColor; border-radius: 4px; padding: 0 .3rem; }
@media (pointer: coarse) { .review-actions kbd { display: none; } }
.review-note { display: grid; gap: .6rem; }
.review-note textarea { width: 100%; }
.review-done .crown { width: 70px; }
.review-start { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; padding: 1rem 1.2rem; border-radius: var(--radius); border: 1px solid var(--gold-line); background: linear-gradient(135deg, var(--gold-100), var(--card) 70%); }
.review-start strong, .review-start span { display: block; }
.review-start span { font-size: .84rem; }
@media (prefers-reduced-motion: reduce) { .up-tray, .up-tray li, .viewer, .viewer-sheet, .drop-overlay, .drop-card { transition: none; } .viewer-stage.slide-left, .viewer-stage.slide-right { animation: none; } }

/* Checklist: several at once, thumbnails, a pulse on what just arrived */
.bulk-bar { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin: -.4rem 0 1.2rem; font-size: .86rem; }
.bulk-match { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .5rem; max-height: 50vh; overflow: auto; }
.bulk-match li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .7rem; align-items: center; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; }
.bulk-match li:only-child, .bulk-match li:not(:has(select)) { grid-template-columns: 1fr; }
.bulk-file { min-width: 0; display: grid; }
.bulk-file strong { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bulk-file small { color: var(--muted); font-size: .78rem; }
@media (max-width: 560px) { .bulk-match li { grid-template-columns: 1fr; } }
.file-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; background: var(--noir-100); flex: none; }
.file-line:has(.file-thumb) { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.folder-row .file-thumb { margin-right: .2rem; }
.req-card.just-in { animation: just-in 1.6s var(--ease-out, ease); }
@keyframes just-in { 0% { box-shadow: 0 0 0 0 rgba(180,155,87,.55); } 40% { box-shadow: 0 0 0 10px rgba(180,155,87,0); } 100% { box-shadow: var(--shadow); } }
@media (prefers-reduced-motion: reduce) { .req-card.just-in { animation: none; } }

/* ---------- Public: the next pageant ---------- */
.pageant { background: linear-gradient(180deg, var(--surface), var(--bg)); }
.pageant-cards { display: grid; gap: 1.4rem; max-width: 980px; margin: 0 auto; }
.pageant-card { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 300px); gap: 1.6rem; align-items: center; padding: 1.6rem; border-radius: var(--radius); background: var(--card); border: 1px solid var(--gold-line); border-top: 4px solid var(--brand-gold); box-shadow: var(--shadow); }
.pageant-date { display: grid; justify-items: center; padding: 1rem 1.2rem; border-radius: 14px; background: var(--brand-grey); color: #fff; min-width: 108px; }
.pageant-date span { font-size: .8rem; font-weight: 700; letter-spacing: .14em; color: var(--brand-gold); }
.pageant-date strong { font-family: var(--display); font-size: 3.2rem; line-height: 1; }
.pageant-date small { font-size: .78rem; opacity: .75; }
.pageant-body h3 { margin: .2rem 0 .7rem; font-size: 1.5rem; }
.pageant-facts { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .45rem; }
.pageant-facts li { display: grid; grid-template-columns: 4rem 1fr; gap: .6rem; font-size: .95rem; }
.pageant-facts b { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); padding-top: .15rem; }
.pageant-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.pageant-actions .btn-outline { color: var(--ink); }
.pageant-map { height: 210px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); filter: grayscale(.35); }
.pageant-apply { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.1rem 1.4rem; border-radius: var(--radius); background: var(--gold-100); border: 1px solid var(--gold-line); }
.pageant-apply strong, .pageant-apply span { display: block; }
@media (max-width: 900px) { .pageant-card { grid-template-columns: auto 1fr; } .pageant-map { grid-column: 1 / -1; } }
@media (max-width: 560px) { .pageant-card { grid-template-columns: 1fr; padding: 1.2rem; } .pageant-date { grid-auto-flow: column; justify-content: start; gap: .6rem; align-items: baseline; min-width: 0; } .pageant-date strong { font-size: 2rem; } }

/* ---------- Public: become a sponsor ---------- */
.levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem; }
.level-card { display: grid; justify-items: start; gap: .3rem; text-align: left; padding: 1.1rem 1.2rem; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); cursor: pointer; font: inherit; transition: border-color .15s, background .15s, transform .15s; }
.level-card:hover { border-color: var(--brand-gold); transform: translateY(-2px); }
.level-card.active { border-color: var(--brand-gold); background: var(--gold-100); }
.level-card .crown { width: 34px; margin-bottom: .2rem; }
.level-card strong { font-size: 1.05rem; }
.level-amount { font-family: var(--display); font-size: 1.6rem; font-weight: 800; color: var(--gold-ink); line-height: 1.1; }
.level-perks { font-size: .84rem; color: var(--muted); white-space: pre-line; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .level-card { transition: none; } .level-card:hover { transform: none; } }

/* ---------- Portal: request detail ---------- */
.contact-card { border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; margin-bottom: 1rem; display: grid; gap: .7rem; }
.contact-lines { display: grid; gap: .3rem; font-size: .9rem; }
.contact-lines > span { display: grid; grid-template-columns: 3.6rem 1fr; gap: .5rem; }
.contact-lines b { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding-top: .15rem; }
.contact-actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-top: .3rem; }
.inq-message { margin: 0 0 1rem; padding: .9rem 1rem; border-left: 3px solid var(--brand-gold); background: var(--surface); border-radius: 0 10px 10px 0; white-space: pre-line; font-size: .92rem; }
.inq-notes { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .6rem; }
.inq-notes li { padding: .6rem .8rem; border-radius: 10px; background: var(--surface); font-size: .86rem; }
.inq-notes p { margin: .25rem 0 0; white-space: pre-line; }
.inq-note-form { display: grid; gap: .5rem; justify-items: start; }
.inq-note-form textarea { width: 100%; }
.inq-history { list-style: none; margin: 0; padding: 0 0 0 .9rem; border-left: 2px solid var(--line); display: grid; gap: .5rem; font-size: .84rem; }
.inq-history li { position: relative; }
.inq-history li::before { content: ""; position: absolute; left: calc(-.9rem - 5px); top: .4rem; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-gold); }
.inq-history span { display: block; font-size: .78rem; color: var(--muted); }

/* ---------- Public: FAQ ---------- */
.faq { max-width: 780px; margin: 0 auto; display: grid; gap: 1.6rem; }
.faq-group h3 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 .6rem; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; padding: 1rem 2.4rem 1rem 0; position: relative; font-weight: 600; font-size: 1.02rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; position: absolute; right: .4rem; top: 50%; width: 10px; height: 10px; border: solid var(--brand-gold); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease-out, ease); }
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; border-radius: 6px; }
.faq-answer { padding: 0 0 1.1rem; color: var(--muted); line-height: 1.65; max-width: 68ch; }
.faq-item[open] .faq-answer { animation: faq-open .3s var(--ease-out, ease); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .faq-item summary::after { transition: none; } .faq-item[open] .faq-answer { animation: none; } }

/* ---------- Public: notify me when applications open ---------- */
.notify-card { text-align: left; }
.notify-card > .crown { width: 54px; }
.notify-card.done { text-align: center; display: grid; justify-items: center; }
.chip-choice { display: flex; gap: .5rem; flex-wrap: wrap; }
.chip-choice label { cursor: pointer; font-weight: 500; }
.chip-choice input { position: absolute; opacity: 0; pointer-events: none; }
.chip-choice span { display: inline-block; padding: .45rem .9rem; border: 1.5px solid var(--line); border-radius: 999px; font-size: .9rem; transition: border-color .15s, background .15s; }
.chip-choice input:checked + span { border-color: var(--brand-gold); background: var(--gold-100); }
.chip-choice input:focus-visible + span { outline: 2px solid var(--brand-gold); outline-offset: 2px; }

/* ---------- Portal: interest list and FAQ editor ---------- */
.interest-panel { margin-bottom: 1.2rem; border-color: var(--gold-line); }
.interest-list li { padding: .45rem 0; }
.faq-admin li.is-hidden { opacity: .55; }

/* ---------- Public: volunteer sign-up ---------- */
.vol-day { margin-bottom: 1.8rem; }
.vol-date { font-size: 1.2rem; margin: 0 0 .7rem; display: flex; gap: .7rem; align-items: baseline; flex-wrap: wrap; }
.vol-date span { font-family: var(--sans); font-size: .85rem; font-weight: 600; color: var(--gold-ink); }
.vol-shifts { display: grid; gap: .6rem; }
.vol-shift { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1rem 1.1rem; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); cursor: pointer; font-weight: 400; transition: border-color .15s, background .15s; }
.vol-shift input { position: absolute; opacity: 0; pointer-events: none; }
.vol-check { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--line); display: grid; place-items: center; transition: background .15s, border-color .15s; }
.vol-shift input:checked ~ .vol-check { background: var(--brand-gold); border-color: var(--brand-gold); }
.vol-shift input:checked ~ .vol-check::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
.vol-shift:has(input:checked) { border-color: var(--brand-gold); background: var(--gold-100); }
.vol-shift input:focus-visible ~ .vol-check { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.vol-shift.full { opacity: .55; cursor: not-allowed; }
.vol-main { display: grid; gap: .15rem; min-width: 0; }
.vol-main strong { font-size: 1.02rem; }
.vol-meta { font-size: .86rem; color: var(--muted); }
.vol-desc { font-size: .84rem; color: var(--muted); }
.vol-spots { display: grid; justify-items: end; gap: .25rem; min-width: 84px; }
.vol-spots b { font-size: .86rem; color: var(--gold-ink); }
.vol-shift.full .vol-spots b { color: var(--muted); }
.vol-spots small { font-size: .78rem; color: var(--muted); }
.vol-bar { display: block; width: 84px; height: 6px; border-radius: 999px; background: var(--noir-100); overflow: hidden; }
.vol-bar > span { display: block; height: 100%; background: var(--brand-gold); border-radius: 999px; }
.vol-done { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: .6rem; max-width: 30rem; text-align: left; }
.vol-done li { padding: .7rem .9rem; border-radius: 10px; background: var(--surface); display: grid; gap: .1rem; }
.vol-done span { font-size: .86rem; color: var(--muted); }
@media (max-width: 560px) { .vol-shift { grid-template-columns: auto 1fr; } .vol-spots { grid-column: 2; justify-items: start; } }
@media (prefers-reduced-motion: reduce) { .vol-shift, .vol-check { transition: none; } }

/* ---------- Portal: volunteers ---------- */
.vol-admin-day { margin-bottom: 1.4rem; }
.vol-admin-date { font-size: 1rem; margin: 0 0 .6rem; }
.vol-admin { margin-bottom: .8rem; }
.vol-admin.is-hidden { opacity: .65; }
.vol-admin-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.vol-admin-head strong { display: block; font-size: 1.05rem; }
.vol-admin-head .muted { font-size: .84rem; }
.vol-admin-fill { display: grid; justify-items: end; gap: .25rem; flex: none; }
.vol-admin-fill b { font-variant-numeric: tabular-nums; }
.vol-admin-fill.full b { color: var(--ok); }
.vol-admin-fill.full .vol-bar > span { background: var(--ok); }
.vol-roster li { padding: .5rem 0; }
.vol-admin-tools { display: flex; gap: .4rem; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: .6rem; margin-top: .4rem; }

/* ==========================================================
   Motion and touch polish (portal and app)
   ========================================================== */
/* Page changes: only the page content moves; the menu, top bar and tab bar stay put. */
#view { view-transition-name: page; }
#pageTitle { view-transition-name: page-title; }
html:has(.portal)::view-transition-old(root), html:has(.portal)::view-transition-new(root) { animation: none; }
/* Moving between pages of the public website (and from sign-in into the portal): a soft cross-fade. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fade-out .2s ease both; }
::view-transition-new(root) { animation: fade-in .32s ease both; }
::view-transition-old(page) { animation: vt-out-fwd .16s ease-in both; }
::view-transition-new(page) { animation: vt-in-fwd .34s var(--ease-out) both; }
html[data-nav-dir="back"]::view-transition-old(page) { animation-name: vt-out-back; }
html[data-nav-dir="back"]::view-transition-new(page) { animation-name: vt-in-back; }
::view-transition-old(page-title) { animation: fade-out .14s ease both; }
::view-transition-new(page-title) { animation: vt-title .3s var(--ease-out) both; }
@keyframes vt-out-fwd { to { opacity: 0; transform: translateX(-14px); } }
@keyframes vt-in-fwd { from { opacity: 0; transform: translateX(22px); } }
@keyframes vt-out-back { to { opacity: 0; transform: translateX(14px); } }
@keyframes vt-in-back { from { opacity: 0; transform: translateX(-22px); } }
@keyframes vt-title { from { opacity: 0; transform: translateY(6px); } }
@keyframes fade-out { to { opacity: 0; } }
@media (max-width: 900px) {
  /* On phones, pages rise gently instead of sliding (feels native with the tab bar). */
  ::view-transition-new(page) { animation-name: vt-rise; }
  html[data-nav-dir="back"]::view-transition-new(page) { animation-name: vt-rise; }
  ::view-transition-old(page), html[data-nav-dir="back"]::view-transition-old(page) { animation-name: fade-out; }
}
@keyframes vt-rise { from { opacity: 0; transform: translateY(12px) scale(.995); } }

/* Touch: no grey flash on tap (Android), no double-tap zoom delay, a crisp press state. */
html { -webkit-tap-highlight-color: transparent; }
a, button, [role="button"], label, summary, .clickable, .row-link, .tab { touch-action: manipulation; }
.list li.clickable, .row-link, .poll-choice, .vol-shift, .level-card, .req-card, .th-card, .kpi { transition: transform .18s var(--ease-out), background-color .18s ease, box-shadow .2s ease; }
.list li.clickable:active, .row-link:active { transform: scale(.992); background-color: var(--gold-100); }
.poll-choice:active, .vol-shift:not(.full):active, .level-card:active { transform: scale(.985); }
.btn { transition: transform .15s var(--ease-out), background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .2s ease; }
@media (hover: hover) { .btn-noir:hover, .btn-gold:hover { box-shadow: 0 6px 18px rgba(60, 60, 60, .18); } }
:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }

/* Tab bar: the chosen tab's icon gives a small bounce. */
.tabbar .tab.active svg, .tabbar .tab.active .crown { animation: tab-pop .4s var(--ease-out); }
@keyframes tab-pop { 0% { transform: scale(.82); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* Horizontal chip and tab rows scroll without a visible bar on phones. */
.chip-row, .tabs { scrollbar-width: none; }
.chip-row::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }

/* In the app: no rubber-band bounce on Android, smooth native-feeling scrolling. */
html.native, html.native body { overscroll-behavior-y: none; }
html.native body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Toasts: an icon, and a springier entrance. */
.toast { display: inline-flex; align-items: center; gap: .55rem; transition: opacity .22s ease, transform .35s cubic-bezier(.2, 1.3, .4, 1); box-shadow: 0 10px 30px rgba(0, 0, 0, .22); }
.toast-ic { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; }
.toast-ic.ok { background: var(--brand-gold); }
.toast-ic.ok::after { content: ""; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-.5px, -1px); }
.toast-ic.bad { background: #e0a14a; }
.toast-ic.bad::after { content: "!"; color: #3c3c3c; font-weight: 900; font-size: .78rem; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(page), ::view-transition-new(page), ::view-transition-old(page-title), ::view-transition-new(page-title) { animation: none !important; }
  .tabbar .tab.active svg, .tabbar .tab.active .crown { animation: none; }
  .toast { transition: opacity .2s ease; }
}
/* Toasts size to their text (up to most of the screen) instead of squeezing into half the width. */
.toast { width: max-content; max-width: min(92vw, 480px); text-align: left; line-height: 1.35; }

/* ==========================================================
   Edge to edge: no sideways scroll, no white bands, safe areas
   - The root carries a brand color, so iOS/Android rubber-band scrolling,
     desktop zoom-out and landscape notch areas show Dark Grey (matching the
     header and footer) instead of white. Portal and sign-in use their own ground.
   - Nothing can widen the page: stray overflow is clipped at the root
     (clip, not hidden, so the sticky header keeps working).
   - Public pages use viewport-fit=cover; content stays inside the notch and
     home-indicator areas while backgrounds run to the edges.
   ========================================================== */
html { background: var(--brand-grey); overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: clip; min-height: 100vh; min-height: 100dvh; }
html:has(.portal) { background: var(--surface); }
html:has(.auth-wrap) { background: var(--bg); }

/* Visually hidden choice inputs: keep them 1px and inside their own label
   (they were 100% wide and positioned against the page, widening it). */
.comp-option input, .type-opt input, .chip-choice input, .vol-shift input {
  width: 1px; height: 1px; margin: 0; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; }
.chip-choice label, .vol-shift { position: relative; }

/* Side gutters grow to clear the notch in landscape */
.container { width: min(1160px, 100% - 2 * max(16px, var(--sa-left), var(--sa-right))); }
.site-header { padding-top: var(--sa-top); }
@media (max-width: 900px) {
  .nav { top: 100%; padding-left: max(16px, var(--sa-left)); padding-right: max(16px, var(--sa-right));
    max-height: calc(100dvh - 72px - var(--sa-top)); overflow-y: auto; overscroll-behavior: contain; }
}
.site-footer { padding-bottom: calc(2rem + var(--sa-bottom)); }
@media (min-width: 901px) {
  .modal-back { padding: max(16px, var(--sa-top)) max(16px, var(--sa-right)) max(16px, var(--sa-bottom)) max(16px, var(--sa-left)); }
}

/* Portal columns never grow past the screen: tracks can shrink below their
   content's natural width, and pages that set their own columns inline still
   stack to one column on phones and tablets. */
.two-col { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.two-col > * { min-width: 0; }
@media (max-width: 1000px) { .two-col, .two-col[style] { grid-template-columns: minmax(0, 1fr) !important; } }
.panel-head > * { min-width: 0; }
.panel-head > div { flex-wrap: wrap; }
.order-list li > :not(.ros-tools) { min-width: 0; overflow-wrap: anywhere; }
.kv { grid-template-columns: 110px minmax(0, 1fr); }
.kv dd { min-width: 0; overflow-wrap: anywhere; }
.order-list .grow { flex: 1 1 auto; }
@media (max-width: 600px) { .ros-tools { width: auto; } .ros-row .ros-tools { width: 100%; } }
.grid > *, .th-card > * { min-width: 0; }
.th-card { grid-template-columns: 96px minmax(0, 1fr); }
.th-actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.th-actions .btn svg { width: 15px; height: 15px; margin-right: .35rem; flex: none; }
/* On a phone: the photo beside her name, the numbers on one line, and her actions in a row that
   scrolls sideways, so each titleholder takes about a third of the screen instead of a screen and a half. */
@media (max-width: 600px) {
  .th-card { grid-template-columns: 60px minmax(0, 1fr); column-gap: .85rem; row-gap: 0; align-items: start; padding: 1rem; }
  .th-card > .th-main { display: contents; }
  .th-photo { width: 60px; grid-row: 1 / span 3; border-radius: 12px; }
  .th-photo .crown { width: 80%; }
  .th-main > .eyebrow, .th-main > h3, .th-main > .th-sub { grid-column: 2; }
  .th-main > h3 { font-size: 1.15rem; line-height: 1.2; }
  .th-main > .th-sub { font-size: .8rem !important; }
  .th-main > :not(.eyebrow):not(h3):not(.th-sub) { grid-column: 1 / -1; }
  .th-stats { display: flex; gap: .4rem; margin: .8rem 0 .55rem; }
  .th-stats div { flex: 1 1 0; min-width: 0; display: flex; align-items: baseline; gap: .3rem; padding: .4rem .55rem; border-radius: 10px; }
  .th-stats b { display: inline; font-size: 1.1rem; }
  .th-stats span { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .th-card .progress { margin-top: 0; }
  .th-card .progress + p { margin: .3rem 0 .6rem !important; }
  .th-actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -1rem; padding: .1rem 1rem; scroll-snap-type: x proximity; scroll-padding-inline: 1rem; }
  .th-actions::-webkit-scrollbar { display: none; }
  .th-actions .btn { flex: none; scroll-snap-align: start; }
  .th-foot { margin-top: .5rem !important; }
  .rep-lead { display: none; }
  .rep-cards li { flex-wrap: wrap; }
  .rep-cards li > .btn { margin-left: auto; }
}
.crown-row > label { min-width: 0; }
.crown-row select { min-width: min(190px, 100%); flex-shrink: 1; }

/* ==========================================================
   Road to Miss Utah (assets/road.js): state checklist, interview prep,
   on-stage practice, talent log, bio & platform, impact portfolio
   ========================================================== */
.count-pill { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .45rem; border-radius: 999px; background: var(--gold-100); color: var(--gold-ink); font-size: .78rem; font-weight: 700; }
.drawer-h { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 1.4rem 0 .6rem; }
.drawer-h:first-child { margin-top: 0; }
.inline-select { display: inline-flex; align-items: center; gap: .5rem; font-size: .84rem; font-weight: 500; color: var(--muted); }
.inline-select select { width: auto; max-width: 60vw; padding: .45rem .7rem; }
.page-tools { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.muted-row { opacity: .55; }
.road-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }

/* Titleholder hero and steps */
.road-hero { display: flex; align-items: center; gap: 1.6rem; background: linear-gradient(135deg, var(--gold-100), var(--card) 70%); border-color: var(--gold-line); }
.road-progress { display: grid; gap: .35rem; margin-top: .9rem; max-width: 460px; }
.road-progress span { font-size: .8rem; color: var(--muted); }
.road-next { margin: .7rem 0 0; font-size: .88rem; }
.road-next.ok { color: var(--ok); font-weight: 600; }
@media (max-width: 600px) { .road-hero { flex-direction: column; align-items: flex-start; } .road-ring { width: 120px; height: 120px; } }
.road-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin-top: 1.2rem; }
@media (max-width: 1100px) { .road-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .road-steps { grid-template-columns: minmax(0, 1fr); } }
.road-step { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.05rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); text-decoration: none; color: var(--ink); transition: border-color .15s ease, transform .15s var(--ease-out, ease), box-shadow .2s ease; }
.road-step:hover { border-color: var(--gold-line); box-shadow: var(--shadow); transform: translateY(-1px); }
.road-step i { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px; background: var(--gold-100); color: var(--gold-ink); }
.road-step i svg { width: 19px; height: 19px; }
.road-step span { display: grid; gap: .1rem; min-width: 0; }
.road-step strong { font-size: .95rem; }
.road-step em { font-style: normal; font-size: .82rem; color: var(--ink); }
.road-step small { font-size: .78rem; color: var(--muted); }

/* Checklist rows */
.road-list li { align-items: center; }
.road-list li.done strong { color: var(--muted); }
.road-list .grow { display: grid; gap: .15rem; min-width: 0; }
.road-tick { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; border: 1.5px solid var(--line); background: var(--card); color: #fff; font-weight: 700; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s var(--ease-out, ease); }
.road-tick svg { width: 15px; height: 15px; color: var(--muted); }
.road-tick.file { cursor: default; }
.road-tick.on { background: var(--ok); border-color: var(--ok); animation: tick-pop .35s var(--ease-out, ease); }
.road-tick:disabled { cursor: default; }
@keyframes tick-pop { 50% { transform: scale(1.18); } }
.road-details { display: block; font-size: .8rem; color: var(--muted); }
.road-board-note { display: block; font-size: .8rem; color: var(--danger); background: var(--danger-bg); border-radius: 8px; padding: .4rem .6rem; margin-top: .25rem; }
.road-board-note.block { display: block; margin: 0 0 .8rem; }
.road-notes { margin: 1rem 0 0; padding: .8rem 1rem; border-radius: 10px; background: var(--surface); font-size: .86rem; white-space: pre-line; }
.road-board-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.2rem; }

/* Interview prep: question card */
.prep-card { margin-top: 1rem; padding: clamp(1.4rem, 4vw, 2.4rem); border-radius: 20px; text-align: center; color: #fff;
  background: radial-gradient(circle at 50% 0%, #4a4130, var(--brand-grey) 70%); border: 1px solid rgba(180, 155, 87, .35); box-shadow: var(--shadow); }
.prep-cat { display: inline-block; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--champ-400); font-weight: 700; }
.prep-q { font-family: var(--display); font-size: clamp(1.35rem, 3.6vw, 2rem); line-height: 1.2; margin: .7rem auto 1.2rem; max-width: 30ch; text-wrap: balance; animation: q-in .45s var(--ease-out, ease) both; }
@keyframes q-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.prep-card .muted, .prep-hint { color: rgba(255, 255, 255, .7); }
.prep-hint { margin: .2rem 0 .8rem; font-size: .88rem; }
.prep-clock { font-family: var(--display); font-size: 2.6rem; font-variant-numeric: tabular-nums; color: var(--champ-400); line-height: 1; margin-bottom: .4rem; }
.prep-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.prep-card .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
.prep-card .btn-ghost:hover { background: rgba(255, 255, 255, .08); }
.prep-stars { display: flex; justify-content: center; gap: .3rem; flex-direction: row-reverse; }
.prep-star { font-size: 2rem; line-height: 1; background: none; border: 0; color: rgba(255, 255, 255, .3); cursor: pointer; padding: .2rem; transition: color .12s ease, transform .15s var(--ease-out, ease); }
.prep-star:hover, .prep-star:hover ~ .prep-star, .prep-star:focus-visible, .prep-star:focus-visible ~ .prep-star { color: var(--brand-gold); transform: scale(1.08); }

/* On-stage practice */
.os-intro { background: linear-gradient(135deg, var(--gold-100), var(--card) 70%); border-color: var(--gold-line); margin-bottom: 1.2rem; }
.os-options { display: grid; gap: .8rem; }
.os-label { display: block; font-size: .78rem; font-weight: 600; margin-bottom: .35rem; }
.os-stage { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; color: #fff; overflow-y: auto;
  padding: calc(1rem + var(--sa-top)) calc(1.2rem + var(--sa-right)) calc(1rem + var(--sa-bottom)) calc(1.2rem + var(--sa-left));
  background: radial-gradient(circle at 50% 35%, #463d2a, #161616 70%); animation: fade-in .25s ease both; transition: background .6s ease; }
.os-stage.out { opacity: 0; transition: opacity .25s ease; }
.os-stage.late { background: radial-gradient(circle at 50% 35%, #4d2f2a, #161616 70%); }
.os-close { position: absolute; top: calc(.8rem + var(--sa-top)); right: calc(1rem + var(--sa-right)); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .1); color: #fff; font-size: 1.6rem; cursor: pointer; }
.os-cam { position: absolute; top: calc(.8rem + var(--sa-top)); left: calc(1rem + var(--sa-left)); width: min(28vw, 180px); aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; transform: scaleX(-1); border: 2px solid rgba(255, 255, 255, .25); background: #000; }
.os-rec { position: absolute; top: calc(1.3rem + var(--sa-top)); left: calc(1.5rem + var(--sa-left)); font-size: .78rem; font-weight: 700; letter-spacing: .1em; color: #ff6b5b; animation: rec-blink 1.2s ease-in-out infinite; }
@keyframes rec-blink { 50% { opacity: .35; } }
.os-body { display: grid; justify-items: center; gap: 1.2rem; text-align: center; max-width: 40rem; width: 100%; }
.os-body .eyebrow { color: var(--champ-400); }
.os-count { font-family: var(--display); font-size: clamp(6rem, 22vw, 10rem); line-height: 1; color: var(--brand-gold); }
.os-count.pop { animation: count-pop .8s var(--ease-out, ease) both; }
@keyframes count-pop { from { opacity: 0; transform: scale(1.6); } 30% { opacity: 1; transform: scale(1); } to { opacity: .2; transform: scale(.9); } }
.os-q { font-family: var(--display); font-size: clamp(1.6rem, 4.6vw, 2.6rem); line-height: 1.18; margin: 0; text-wrap: balance; animation: q-in .5s var(--ease-out, ease) both; }
.os-ring { position: relative; width: 132px; height: 132px; }
.os-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.os-ring circle { fill: none; stroke-width: 8; }
.os-ring .ring-bg { stroke: rgba(255, 255, 255, .12); }
.os-ring .ring-fg { transition: stroke-dashoffset .1s linear, stroke .3s ease; }
.os-stage.late .os-ring .ring-fg { stroke: #e8877e; }
.os-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 2.6rem; font-variant-numeric: tabular-nums; }
.os-after { display: grid; gap: .6rem; justify-items: center; width: 100%; animation: q-in .4s var(--ease-out, ease) both; }
.os-after h2 { margin: 0; color: #fff; }
.os-after .muted { color: rgba(255, 255, 255, .7); margin: 0; }
.os-playback { width: 100%; max-width: 420px; max-height: 50vh; border-radius: 14px; background: #000; }
.os-btns { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin-top: .4rem; }
.btn-ghost-light { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .35); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .08); }
.os-small { font-size: .78rem; color: rgba(255, 255, 255, .6); margin: 0; }
@media (prefers-reduced-motion: reduce) { .os-stage, .os-count.pop, .os-q, .os-after, .prep-q { animation: none; } }

/* Mock interviews */
.mock-summary { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.mock-summary h2 small { font-size: 1rem; }
.mock-spark { width: min(100%, 320px); height: auto; }
.spark-mid { stroke: var(--line); stroke-dasharray: 3 4; }
.spark-line { fill: none; stroke: var(--brand-gold); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.spark-dot { fill: var(--card); stroke: var(--brand-gold); stroke-width: 2.5; }
.mock-areas .kind-track { position: relative; overflow: visible; }
.mock-areas .kind-track i { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--muted); border-radius: 1px; }
.mock-note { display: block; font-size: .82rem; color: var(--ink); margin-top: .3rem; }
.mock-note b { display: inline-block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--warn); margin-right: .35rem; }
.mock-note.ok b { color: var(--ok); }
.mock-score { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--gold-100); color: var(--gold-ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.mock-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }

/* Talent */
.talent-timer { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 1.2rem; background: linear-gradient(135deg, var(--gold-100), var(--card) 70%); border-color: var(--gold-line); }
.tt-clock { font-family: var(--display); font-size: clamp(3rem, 9vw, 4.6rem); line-height: 1; font-variant-numeric: tabular-nums; margin: .3rem 0 .6rem; transition: color .3s ease; }
.talent-timer.over .tt-clock { color: var(--danger); }
.tt-bar { position: relative; height: 10px; border-radius: 999px; background: var(--noir-100); max-width: 520px; }
.tt-bar span { display: block; height: 100%; border-radius: 999px; background: var(--brand-gold); transition: width .1s linear, background .3s ease; }
.talent-timer.over .tt-bar span { background: var(--danger); }
.tt-bar i { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -2px; background: var(--ink); border-radius: 1px; }
.tt-hint { margin: .5rem 0 0; font-size: .84rem; }
.tt-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.run-chip { font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; padding: .2rem .55rem; border-radius: 999px; }
.run-chip.ok { background: var(--ok-bg); color: var(--ok); }
.run-chip.over { background: var(--danger-bg); color: var(--danger); }
.coach-note { display: block; margin-top: .4rem; padding: .5rem .7rem; border-radius: 9px; background: var(--gold-100); font-size: .84rem; color: var(--ink); }
.coach-note b { color: var(--gold-ink); margin-right: .3rem; }

/* Bio & platform */
.stmt-list { display: grid; gap: 1.2rem; }
.stmt-card textarea { font-size: 1rem; line-height: 1.6; resize: vertical; min-height: 7rem; }
.stmt-tips { margin: 0 0 .7rem; font-size: .84rem; }
.stmt-tips summary { cursor: pointer; color: var(--gold-ink); font-weight: 600; }
.stmt-tips ul { margin: .4rem 0 0; padding-left: 1.2rem; color: var(--muted); }
.stmt-foot { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .6rem; }
.wc { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.wc.over { color: var(--danger); font-weight: 700; }
.stmt-approved { margin-top: 1rem; padding: .8rem 1rem; border-radius: 10px; background: var(--ok-bg); font-size: .88rem; }
.stmt-approved summary { cursor: pointer; font-weight: 600; color: var(--ok); }
.stmt-approved p { white-space: pre-line; margin: .6rem 0; color: var(--ink); }
.stmt-read { white-space: pre-line; line-height: 1.7; padding: 1rem 1.1rem; border-radius: 12px; background: var(--surface); }

/* Impact portfolio: a one-page sheet (prints on its own) */
.portfolio { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); max-width: 860px; }
.pf-head { display: flex; align-items: center; gap: 1.3rem; padding: 1.6rem clamp(1.2rem, 4vw, 2rem); background: var(--brand-grey); color: #fff; border-bottom: 3px solid var(--brand-gold); position: relative; }
.pf-photo { width: 104px; height: 128px; flex: none; object-fit: cover; border-radius: 12px; border: 2px solid rgba(180, 155, 87, .6); }
.pf-ph { display: grid; place-items: center; background: #4a4a4a; }
.pf-ph .crown { width: 56%; }
.pf-title { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--champ-400); font-weight: 700; }
.pf-head h2 { color: #fff; margin: .2rem 0 .3rem; font-size: clamp(1.7rem, 4.5vw, 2.4rem); }
.pf-csi { margin: 0; font-size: .95rem; color: rgba(255, 255, 255, .88); }
.pf-csi span { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.pf-crown { width: 64px; flex: none; opacity: .9; }
@media (max-width: 560px) { .pf-head { flex-wrap: wrap; } .pf-crown { position: absolute; top: 1rem; right: 1rem; width: 40px; } .pf-photo { width: 84px; height: 104px; } }
.pf-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.pf-stats div { padding: 1rem .8rem; text-align: center; border-left: 1px solid var(--line); }
.pf-stats div:first-child { border-left: 0; }
.pf-stats b { display: block; font-family: var(--display); font-size: clamp(1.4rem, 3.6vw, 2rem); color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.pf-stats span { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 560px) { .pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-stats div:nth-child(3) { border-left: 0; } .pf-stats div:nth-child(n+3) { border-top: 1px solid var(--line); } }
.pf-sec { padding: 1.2rem clamp(1.2rem, 4vw, 2rem) 0; }
.pf-sec h3 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 .6rem; display: flex; align-items: center; gap: .6rem; }
.pf-sec h3 .link-btn { font-size: .78rem; letter-spacing: 0; text-transform: none; }
.pf-text { white-space: pre-line; margin: 0; line-height: 1.65; }
.pf-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
@media (max-width: 700px) { .pf-cols { grid-template-columns: minmax(0, 1fr); } }
.pf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.pf-list li { position: relative; display: grid; gap: .1rem; padding-right: 1.6rem; font-size: .88rem; }
.pf-list span { font-size: .8rem; color: var(--muted); }
.pf-list em { font-style: normal; color: var(--muted); font-size: .82rem; }
.pf-list a { color: inherit; text-decoration-color: var(--gold-line); }
.pf-x { position: absolute; top: 0; right: 0; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--surface); color: var(--muted); cursor: pointer; line-height: 1; }
.pf-empty { font-size: .84rem; color: var(--muted); margin: 0; }
p.pf-empty.no-print { padding: 1.2rem clamp(1.2rem, 4vw, 2rem) 0; }
.pf-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 560px) { .pf-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pf-photos figure { position: relative; margin: 0; }
.pf-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--surface); }
.pf-photos figcaption { font-size: .78rem; color: var(--muted); margin-top: .25rem; }
.pf-photos .pf-x { top: .35rem; right: .35rem; background: rgba(0, 0, 0, .55); color: #fff; }
.pf-foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.4rem; padding: .9rem clamp(1.2rem, 4vw, 2rem); background: var(--surface); font-size: .78rem; color: var(--muted); }
@media print {
  body:has(#portfolio) .main > :not(#view), body:has(#portfolio) #view > :not(.portfolio) { display: none !important; }
  .portfolio { border: 0; box-shadow: none; border-radius: 0; max-width: none; background: #fff; color: #222; }
  .portfolio .pf-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pf-stats b, .pf-sec h3 { color: #7d6b3a; }
  .pf-foot { -webkit-print-color-adjust: exact; print-color-adjust: exact; background: #f7f7f7; }
  .pf-x { display: none !important; }
  @page { margin: 12mm; }
}
/* Phones: a checklist row's status and buttons sit under its text */
@media (max-width: 600px) {
  .road-list li, .list li:has(> .road-actions) { flex-wrap: wrap; }
  .road-list li > .grow, .list li:has(> .road-actions) > .grow { flex: 1 1 calc(100% - 50px); }
  .road-list .road-actions, .list li > .road-actions { flex: 1 1 100%; justify-content: flex-start; }
  .road-list li > .road-tick ~ .road-actions { padding-left: calc(30px + 1rem); }
}
.os-count .os-wait { display: block; font-family: var(--sans); font-size: 1.05rem; color: rgba(255, 255, 255, .75); animation: rec-blink 1.4s ease-in-out infinite; }

/* ==========================================================
   Collapsible sidebar (desktop and iPad): folds to an icon rail.
   Toggled by the button at the bottom or ⌘\ / Ctrl+\ (portal.js),
   remembered per device (theme.js sets html.side-collapsed early).
   ========================================================== */
.side-collapse { display: none; }
@media (min-width: 901px) {
  .portal { transition: grid-template-columns .28s var(--ease-out, ease); }
  .side-collapse { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; width: 100%; margin: .2rem 0 .6rem; padding: .55rem .7rem; border: 0; border-radius: 9px;
    background: none; color: rgba(255, 255, 255, .55); font: inherit; font-size: .82rem; cursor: pointer; text-align: left; transition: background .15s ease, color .15s ease; }
  .side-collapse:hover { background: rgba(255, 255, 255, .06); color: #fff; }
  .side-collapse:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
  .side-collapse svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform .28s var(--ease-out, ease); }
  .side-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  html.side-collapsed .portal { grid-template-columns: 76px minmax(0, 1fr); }
  html.side-collapsed .sidebar { padding-left: .65rem; padding-right: .65rem; }
  html.side-collapsed .sidebar .brand { justify-content: center; padding-left: 0; padding-right: 0; }
  html.side-collapsed .sidebar .brand .crown { width: 36px; }
  html.side-collapsed .sidebar .lockup-text,
  html.side-collapsed .sidebar .side-text,
  html.side-collapsed .sidebar .side-privacy,
  html.side-collapsed .sidebar .me > div:not(.avatar),
  html.side-collapsed .sidebar #signOut { display: none; }
  html.side-collapsed .side-label { font-size: 0; padding: .45rem .5rem; }
  html.side-collapsed .side-label::before { content: ""; display: block; height: 1px; background: rgba(255, 255, 255, .1); }
  html.side-collapsed .side-link { position: relative; justify-content: center; padding: .62rem 0; }
  html.side-collapsed .side-link svg, html.side-collapsed .side-link .crown { width: 20px; height: 20px; }
  html.side-collapsed .side-link .count { position: absolute; top: 2px; right: 4px; margin: 0; min-width: 17px; height: 17px; padding: 0 .28rem; line-height: 17px; font-size: .72rem; text-align: center; box-shadow: 0 0 0 2px var(--brand-grey); }
  html.side-collapsed .side-collapse { justify-content: center; padding: .6rem 0; }
  html.side-collapsed .side-collapse svg { transform: scaleX(-1); }
  html.side-collapsed .sidebar .me { justify-content: center; padding-left: 0; padding-right: 0; }
  html[data-theme="dark"].side-collapsed .side-link .count { box-shadow: 0 0 0 2px #232323; }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) { .portal, .side-collapse svg { transition: none; } }
.road-board-head > .grow, .road-hero > .grow, .mock-summary > .grow, .talent-timer > .grow, .os-intro > .grow { flex: 1 1 0; min-width: 0; }

/* Calendar connection (031): status line, schedule button, home-page invitation */
.cal-status { display: flex; gap: .5rem; align-items: baseline; margin: 0 0 .9rem; padding: .6rem .8rem; border-radius: 10px; background: var(--surface); font-size: .84rem; color: var(--muted); }
.cal-status.ok { background: var(--ok-bg); color: var(--ok); }
.cal-status span { font-weight: 700; }
.btn.cal-on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.cal-nudge { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.2rem; padding: .9rem 1rem; border-radius: var(--radius); border: 1px solid var(--gold-line); background: linear-gradient(135deg, var(--gold-100), var(--card) 75%); animation: q-in .45s var(--ease-out, ease) both; }
.cal-nudge .grow { display: grid; gap: .1rem; min-width: 0; }
.cal-nudge strong { font-size: .94rem; }
.cal-nudge .grow span { font-size: .82rem; color: var(--muted); }
.cal-nudge-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--card); color: var(--gold-ink); }
.cal-nudge-ic svg { width: 20px; height: 20px; }
.cal-nudge .close-x { color: var(--muted); }
@media (max-width: 560px) { .cal-nudge { flex-wrap: wrap; } .cal-nudge .grow { flex: 1 1 calc(100% - 60px); } .cal-nudge .btn { margin-left: calc(40px + .9rem); } }
@media (prefers-reduced-motion: reduce) { .cal-nudge { animation: none; } }

/* Live messages (032): arriving bubbles, "… is typing", offline badge */
.bubble-in { animation: bubble-in .32s var(--ease-out, ease) both; }
.bubble.me.bubble-in { transform-origin: 100% 100%; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.typing-line { display: flex; align-items: center; gap: .45rem; height: 0; overflow: hidden; padding: 0 1.2rem; font-size: .8rem; color: var(--muted); transition: height .2s ease; }
.typing-line.on { height: 1.6rem; }
.typing-dots { display: inline-flex; gap: 3px; }
.typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--brand-gold); animation: typing-dot 1.1s ease-in-out infinite; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.net-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.net-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
@media (prefers-reduced-motion: reduce) { .bubble-in, .typing-dots i { animation: none; } .typing-line { transition: none; } }

/* ==========================================================
   Quick jump (⌘K / Ctrl+K, the search box, the search icon on phones)
   ========================================================== */
.search[readonly] { cursor: pointer; caret-color: transparent; }
html.qj-open { overflow: hidden; }
.qj-back { position: fixed; inset: 0; z-index: 170; display: grid; justify-items: center; align-items: start;
  padding: calc(var(--sa-top) + 12vh) max(16px, var(--sa-right)) 16px max(16px, var(--sa-left));
  background: rgba(24, 24, 24, 0); transition: background .16s ease; }
.qj-back.in { background: rgba(24, 24, 24, .42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.qj { width: min(640px, 100%); max-height: min(560px, 76vh); display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28), 0 2px 8px rgba(0, 0, 0, .08);
  opacity: 0; transform: translateY(-8px) scale(.985); transition: opacity .16s ease, transform .2s var(--ease-out, ease); }
.qj-back.in .qj { opacity: 1; transform: none; }
.qj-search { display: flex; align-items: center; gap: .7rem; padding: .95rem 1.1rem; border-bottom: 1px solid var(--line); }
.qj-search svg { width: 20px; height: 20px; flex: none; color: var(--gold-ink); }
.qj-search input { flex: 1; min-width: 0; border: 0; padding: .2rem 0; background: none; font-size: 1.08rem; color: var(--ink); outline: none; }
.qj-search input:focus { outline: none; }
.qj-close { flex: none; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 7px; font: inherit; font-size: .78rem; padding: .2rem .45rem; cursor: pointer; }
.qj-list { overflow-y: auto; overscroll-behavior: contain; padding: .4rem; flex: 1; }
.qj-head { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: .7rem .7rem .3rem; }
.qj-item { display: flex; align-items: center; gap: .75rem; padding: .6rem .7rem; border-radius: 11px; cursor: pointer; }
.qj-item i { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--surface); color: var(--muted); }
.qj-item i svg, .qj-item i .crown { width: 17px; height: 17px; }
.qj-text { display: grid; min-width: 0; flex: 1; }
.qj-text strong { font-size: .92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qj-text small { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qj-item .count { background: var(--champ-400); color: var(--noir-900); font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 0 .45rem; }
.qj-go { font-size: .78rem; color: var(--muted); opacity: 0; white-space: nowrap; }
.qj-item.sel { background: var(--gold-100); }
.qj-item.sel i { background: var(--brand-gold); color: #fff; }
.qj-item.sel .qj-go { opacity: 1; color: var(--gold-ink); }
.qj-empty { padding: 1.6rem 1rem; text-align: center; color: var(--muted); font-size: .88rem; }
.qj-foot { display: flex; gap: 1.1rem; padding: .6rem 1rem; border-top: 1px solid var(--line); background: var(--surface); font-size: .78rem; color: var(--muted); }
.qj-foot kbd, .qj-close { font-family: var(--sans); }
.qj-foot kbd { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem; margin-right: .2rem; border-radius: 5px; border: 1px solid var(--line); background: var(--card); font-size: .78rem; }
@media (max-width: 600px) {
  .qj-back { padding: 0; align-items: stretch; }
  .qj { width: 100%; max-height: none; height: 100dvh; border-radius: 0; border: 0; padding-top: var(--sa-top); padding-bottom: var(--sa-bottom); transform: translateY(12px); }
  .qj-search input { font-size: 1.05rem; }
  .qj-foot { display: none; }
  .qj-item { padding: .75rem .7rem; }
  .qj-go { display: none; }
}
@media (prefers-reduced-motion: reduce) { .qj, .qj-back { transition: none; } }

/* ==========================================================
   Premium polish: native-feeling sheets, swipes, pull to refresh,
   collapsing title, loading outlines, photo fade-in, cards that
   open in place, and the "What's new" sheet.
   ========================================================== */
/* Cards that grow into their detail panel */
.drawer.no-slide { transition: none !important; }
html[data-morph]::view-transition-old(page), html[data-morph]::view-transition-new(page),
html[data-morph]::view-transition-old(page-title), html[data-morph]::view-transition-new(page-title) { animation: none; }
::view-transition-group(nebo-card) { animation-duration: .42s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(nebo-card) { animation: fade-out .18s ease both; }
::view-transition-new(nebo-card) { animation: fade-in .3s ease .06s both; }

/* Photos fade in as they load */
img.img-wait { opacity: 0; }
#view img, .drawer img { transition: opacity .35s ease; }

/* Loading outline */
.sk { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--noir-100) 0%, color-mix(in srgb, var(--noir-100) 55%, var(--card)) 45%, var(--noir-100) 90%); background-size: 220% 100%; animation: sk-shine 1.3s ease-in-out infinite; }
.sk-line { height: .75rem; margin: .45rem 0; }
.sk-line.big { height: 1.3rem; margin-bottom: .8rem; }
.sk.w30 { width: 30%; } .sk.w40 { width: 40%; } .sk.w45 { width: 45%; } .sk.w50 { width: 50%; } .sk.w55 { width: 55%; } .sk.w60 { width: 60%; } .sk.w70 { width: 70%; } .sk.w80 { width: 80%; } .sk.w90 { width: 90%; }
.sk-ring { width: 96px; height: 96px; border-radius: 50%; flex: none; }
.sk-chip { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.skel-hero { display: flex; align-items: center; gap: 1.4rem; padding: 1.4rem; margin-bottom: 1.2rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); }
.skel-hero > div { flex: 1; }
.sk-row { display: flex; gap: .9rem; align-items: center; padding: .7rem 0; }
.sk-row > div { flex: 1; }
.skel .kpis { margin-bottom: 1.2rem; }
@keyframes sk-shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* What's new */
.wn { display: grid; justify-items: center; text-align: center; padding: 1.8rem 1.4rem 1.4rem; }
.wn-crown { width: 64px; margin-bottom: .6rem; animation: cele-pop .6s var(--ease-out, ease) both; }
.wn h2 { margin: 0 0 1.1rem; }
.wn-list { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 1rem; text-align: left; width: 100%; }
.wn-list li { display: flex; gap: .9rem; align-items: flex-start; animation: q-in .45s var(--ease-out, ease) both; animation-delay: calc(var(--i) * 70ms + .15s); }
.wn-list i { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--gold-100); color: var(--gold-ink); }
.wn-list i svg { width: 20px; height: 20px; }
.wn-list strong { display: block; font-size: .95rem; }
.wn-list span { font-size: .84rem; color: var(--muted); }
.wn-go { width: 100%; }
@media (prefers-reduced-motion: reduce) { .wn-crown, .wn-list li { animation: none; } }

/* Swipe actions on rows (phones) */
[data-swipe-right], [data-swipe-left] { position: relative; }
.swiping > * { transform: translateX(var(--sx, 0)); }
.swipe-settle > * { transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
.swiping.swipe-right::before, .swiping.swipe-left::before { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 1.1rem; border-radius: 10px; font-size: .82rem; font-weight: 700; color: #fff; z-index: 0; }
.swiping > * { position: relative; z-index: 1; }
.swiping.swipe-right::before { content: attr(data-swipe-right-label); background: color-mix(in srgb, var(--ok) 55%, transparent); justify-content: flex-start; }
.swiping.swipe-left::before { content: attr(data-swipe-left-label); background: color-mix(in srgb, var(--danger) 50%, transparent); justify-content: flex-end; }
.swiping.swipe-armed.swipe-right::before { background: var(--ok); }
.swiping.swipe-armed.swipe-left::before { background: var(--danger); }

/* Pull to refresh */
.ptr { position: fixed; left: 50%; top: calc(var(--sa-top) + var(--appbar-h, 58px) - 44px); z-index: 45; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--card); box-shadow: 0 4px 18px rgba(0, 0, 0, .18); opacity: 0; transition: transform .25s cubic-bezier(.2, .8, .2, 1), opacity .2s ease; pointer-events: none; }
.ptr.show { opacity: 1; }
.ptr .crown { width: 24px; opacity: .55; transition: opacity .2s ease; }
.ptr.ready .crown, .ptr.spin .crown { opacity: 1; }
.ptr.spin .crown { animation: ptr-spin .9s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  /* Collapsing large title: big when at the top, a slim frosted bar once you scroll */
  .topbar { transition: background-color .25s ease, box-shadow .25s ease; }
  .topbar h1 { font-size: 1.55rem; transform-origin: 0 50%; transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
  body.tb-compact .topbar { background: rgba(60, 60, 60, .8); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); box-shadow: 0 6px 20px rgba(0, 0, 0, .12); }
  body.tb-compact .topbar h1 { transform: scale(.74); }

  /* Detail panels become bottom sheets you can swipe down */
  .drawer { top: auto; bottom: 0; height: auto; max-height: calc(100dvh - var(--sa-top) - 10px); border-radius: 20px 20px 0 0; overflow: hidden;
    transform: translateY(105%); transition: transform .32s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 -12px 40px rgba(0, 0, 0, .22); }
  .drawer.open { transform: none; }
  .drawer-head { padding-top: 1.3rem; border-radius: 20px 20px 0 0; position: relative; }
  .drawer-head::before, .modal::before { content: ""; position: absolute; top: 7px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: rgba(255, 255, 255, .35); }
  .modal { position: relative; }
  .modal::before { background: var(--line); }
  .drawer-body { overscroll-behavior: contain; }
  .scrim { transition: opacity .2s ease; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .drawer, .topbar h1 { transition: none; } }

/* Public titleholder page (/t/<name>, assets/profile.js) */
.profile-page { min-height: 60vh; background: var(--bg); }
.profile-hero { padding: clamp(2.5rem, 7vw, 5rem) 0; background: radial-gradient(900px 480px at 80% 0%, rgba(180, 155, 87, .18), transparent 60%), var(--surface); }
.profile-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(1.6rem, 5vw, 3.5rem); align-items: center; }
@media (max-width: 760px) { .profile-grid { grid-template-columns: minmax(0, 1fr); } .profile-photo { max-width: 320px; } }
.profile-photo { aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: var(--brand-grey); display: grid; place-items: center; box-shadow: 0 24px 60px rgba(40, 40, 40, .22); border: 3px solid var(--brand-gold); }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-photo .crown { width: 40%; opacity: .5; }
.profile-copy .th-mark { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.profile-copy .th-mark .crown { width: 56px; }
.profile-copy .th-mark .logotype { font-size: 1.3rem; }
.profile-copy h1 { margin: .2rem 0 .8rem; }
.profile-copy .lead { max-width: 62ch; }
.profile-facts { display: grid; gap: .9rem; margin: 1.4rem 0; }
.profile-facts div { padding: .9rem 1.1rem; border-left: 3px solid var(--brand-gold); background: var(--card); border-radius: 0 12px 12px 0; }
.profile-facts dt { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); font-weight: 700; }
.profile-facts dd { margin: .2rem 0 0; font-size: 1.02rem; }
.profile-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.profile-link { display: inline-block; margin-top: .8rem; font-size: .88rem; font-weight: 600; color: var(--gold-ink); text-decoration: none; }
.profile-link:hover { text-decoration: underline; }

/* ==========================================================
   Digital sash card (road.js: vCard)
   ========================================================== */
.sash-wrap { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (max-width: 800px) { .sash-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; } .sash-side { text-align: center; } .sash-btns { justify-content: center; } }
.sash { position: relative; width: 100%; max-width: 380px; aspect-ratio: 4 / 6; overflow: hidden; border-radius: 26px; padding: 1.5rem 1.4rem 1.2rem;
  display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff;
  background: radial-gradient(420px 300px at 80% 0%, rgba(180, 155, 87, .35), transparent 65%), linear-gradient(160deg, #464646, #2a2a2a);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(214, 199, 158, .25); isolation: isolate;
  animation: sash-in .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes sash-in { from { opacity: 0; transform: translateY(18px) rotateX(8deg) scale(.97); } to { opacity: 1; transform: none; } }
.sash::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .12) 48%, transparent 60%); background-size: 250% 100%; animation: sash-shine 5s ease-in-out 1s infinite; pointer-events: none; z-index: 3; }
@keyframes sash-shine { 0%, 60% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
.sash-band { position: absolute; left: -30%; right: -30%; top: 30%; height: 44px; transform: rotate(-35deg); z-index: -1;
  background: linear-gradient(90deg, #9c8547, #e2d4a8 50%, #9c8547); display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); opacity: .92; }
.sash-band span { font-family: var(--display); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #3c3c3c; font-size: .82rem; white-space: nowrap; }
.sash-top { display: flex; align-items: center; gap: .6rem; align-self: flex-start; }
.sash-top .crown { width: 46px; }
.sash-org { text-align: left; font-family: var(--display); font-weight: 700; font-size: 1rem; line-height: 1.05; }
.sash-org small { font-family: var(--sans); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .6); font-weight: 600; }
.sash-photo { width: 44%; aspect-ratio: 4 / 5; margin: 1rem 0 .7rem; border-radius: 16px; overflow: hidden; border: 3px solid var(--brand-gold); background: #4a4a4a; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.sash-photo img { width: 100%; height: 100%; object-fit: cover; }
.sash-photo .crown { width: 50%; opacity: .6; }
.sash h2 { color: #fff; margin: 0; font-size: 1.5rem; }
.sash-title { margin: .1rem 0 .5rem; color: var(--champ-400); font-weight: 600; font-size: .9rem; }
.sash-csi { margin: 0 0 .6rem; font-size: .84rem; line-height: 1.35; }
.sash-csi span { display: block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); font-weight: 700; margin-bottom: .1rem; }
.sash-qr { margin-top: auto; display: grid; justify-items: center; gap: .35rem; }
.sash-qr .qr { width: 104px; height: 104px; border-radius: 10px; }
.sash-qr span { font-size: .72rem; color: rgba(255, 255, 255, .7); }
.sash-url { margin-top: .5rem; font-size: .72rem; letter-spacing: .06em; color: var(--champ-400); }
.sash-side h3 { margin-top: .4rem; }
.sash-btns { display: flex; gap: .6rem; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .sash, .sash::after { animation: none; } }

/* Full-screen QR for scanning at an appearance */
.qr-full { position: fixed; inset: 0; z-index: 175; display: grid; place-items: center; align-content: center; gap: 1.2rem; padding: 1.5rem; background: rgba(24, 24, 24, 0); transition: background .2s ease; cursor: pointer; }
.qr-full.in { background: rgba(24, 24, 24, .88); }
.qr-card { display: grid; justify-items: center; gap: .3rem; padding: 1.6rem 1.6rem 1.3rem; border-radius: 26px; background: #fff; color: #3c3c3c; width: min(360px, 88vw); transform: scale(.9); opacity: 0; transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s ease; }
.qr-full.in .qr-card { transform: none; opacity: 1; }
.qr-card .qr { width: 100%; height: auto; }
.qr-card strong { font-size: 1.2rem; margin-top: .4rem; }
.qr-card span { color: #7d6b3a; font-weight: 600; font-size: .9rem; }
.qr-card small { color: #757575; margin-top: .3rem; }

/* ==========================================================
   Year in review (road.js: yearInReview)
   ========================================================== */
.yir { position: fixed; inset: 0; z-index: 180; color: #fff; overflow: hidden; user-select: none; -webkit-user-select: none;
  background: radial-gradient(900px 700px at 50% 12%, #6a5a36, #3c3c3c 55%, #1b1b1b); animation: fade-in .25s ease both; }
.yir.out { opacity: 0; transition: opacity .25s ease; }
.yir-bars { position: absolute; top: calc(var(--sa-top) + .8rem); left: max(1rem, var(--sa-left)); right: max(1rem, var(--sa-right)); display: flex; gap: 5px; z-index: 2; }
.yir-bars span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.yir-bars i { display: block; height: 100%; width: 0; background: #fff; }
.yir-x { position: absolute; top: calc(var(--sa-top) + 1.4rem); right: max(1rem, var(--sa-right)); z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.6rem; cursor: pointer; }
.yir-stage { position: absolute; inset: 0; }
.yir-slide { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .6rem; text-align: center;
  padding: calc(var(--sa-top) + 4rem) max(1.6rem, var(--sa-right)) calc(var(--sa-bottom) + 3rem) max(1.6rem, var(--sa-left));
  opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.yir-slide.on { opacity: 1; transform: none; pointer-events: auto; }
.yir-slide h2 { color: #fff; margin: 0; font-size: clamp(1.9rem, 7vw, 3rem); max-width: 16ch; text-wrap: balance; }
.yir-big { font-size: clamp(3rem, 14vw, 5.5rem) !important; color: var(--champ-400) !important; }
.yir-kicker { margin: 0; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--champ-400); font-weight: 700; }
.yir-sub { margin: .4rem 0 0; color: rgba(255, 255, 255, .8); max-width: 30ch; font-size: 1.05rem; }
.yir-num { font-family: var(--display); font-size: clamp(5rem, 26vw, 9rem); line-height: .95; color: var(--champ-400); font-variant-numeric: tabular-nums; }
.yir-crown { width: 120px; margin-bottom: .6rem; animation: cele-pop .8s var(--ease-out, ease) both; }
.yir blockquote { margin: .6rem 0 0; max-width: 34ch; font-size: 1.05rem; line-height: 1.55; color: rgba(255, 255, 255, .85); font-style: italic; }
.yir-pics { display: grid; gap: 8px; width: min(420px, 86vw); grid-template-columns: 1fr 1fr; margin-top: .6rem; }
.yir-pics.n1 { grid-template-columns: 1fr; }
.yir-pics img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; animation: q-in .6s var(--ease-out, ease) both; }
.yir-pics img:nth-child(2) { animation-delay: .12s; } .yir-pics img:nth-child(3) { animation-delay: .24s; } .yir-pics img:nth-child(4) { animation-delay: .36s; }
.yir-share img { width: min(260px, 60vw); aspect-ratio: 9 / 16; border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); background: rgba(255, 255, 255, .06); }
.yir-btns { display: flex; gap: .6rem; margin-top: .8rem; }
@media (prefers-reduced-motion: reduce) { .yir-slide { transition: opacity .2s ease; transform: none; } .yir-crown, .yir-pics img { animation: none; } }

/* App: Face ID lock screen, hidden content in the app switcher, app icon choice */
.app-lock { position: fixed; inset: 0; z-index: 400; display: grid; place-content: center; justify-items: center; gap: 1rem; color: #fff; text-align: center;
  background: radial-gradient(700px 500px at 50% 30%, #5a4e32, #2a2a2a 70%); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.app-lock .crown { width: 110px; }
.app-lock strong { font-family: var(--display); font-size: 1.4rem; }
.app-lock.out { opacity: 0; transform: scale(1.04); transition: opacity .25s ease, transform .3s ease; }
html.app-hidden body > *:not(.app-lock) { filter: blur(24px); }
.icon-choices { display: flex; gap: .8rem; margin-top: .8rem; }
.icon-choice { display: grid; justify-items: center; gap: .35rem; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: .8rem; color: var(--muted); }
.icon-choice img { width: 60px; height: 60px; border-radius: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .15s ease, transform .15s ease; }
.icon-choice.on img { outline-color: var(--brand-gold); }
.icon-choice.on span { color: var(--gold-ink); font-weight: 700; }
.icon-choice:active img { transform: scale(.94); }
.switch-wrap { display: inline-flex; align-items: center; }

/* Sash card v2: a white satin sash (SVG) with her title, photo beside it */
.sash { padding: 1.1rem 1.2rem 1.1rem; aspect-ratio: auto; }
.sash-band, .sash-top { display: none; }
.sash-hero { position: relative; width: 100%; height: 0; padding-bottom: 92%; margin-bottom: .3rem; }
.sash-ribbon { position: absolute; left: -4%; top: -3%; width: 46%; z-index: 1; }
.sash-svg { display: block; width: 100%; height: auto; overflow: visible; }
.sash-hero .sash-photo { position: absolute; right: 2%; top: 4%; width: 50%; margin: 0; }
.sash h2 { margin-top: .4rem; }

/* Public board member page (/board/<name>, assets/board-page.js) */
.board-role { margin: -.4rem 0 1rem; font-weight: 600; color: var(--gold-ink); font-size: 1.05rem; }
.board-ways { padding: clamp(2rem, 5vw, 3.5rem) 0; background: var(--bg); }
.board-ways h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); margin-bottom: 1.2rem; }
.board-way-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 760px) { .board-way-grid { grid-template-columns: minmax(0, 1fr); } }
.board-way { display: grid; gap: .3rem; padding: 1.2rem 1.3rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); text-decoration: none; color: var(--ink); transition: border-color .15s ease, transform .15s ease, box-shadow .2s ease; }
.board-way:hover { border-color: var(--gold-line); transform: translateY(-2px); box-shadow: var(--shadow); }
.board-way strong { font-size: 1.05rem; }
.board-way strong::after { content: " →"; color: var(--gold-ink); }
.board-way span { color: var(--muted); font-size: .9rem; }

/* Board card (road.js: vBoardCard) */
.board-card { padding-top: 1.4rem; }
.bc-top { display: flex; align-items: center; gap: .6rem; align-self: flex-start; }
.bc-top .crown { width: 48px; }
.bc-top .logotype { font-size: 1.05rem; }
.bc-photo { width: 52%; margin: 1.1rem 0 .7rem; }
.bc-label { margin: 0 0 .6rem; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .6); font-weight: 700; }
.bc-switches { margin: .8rem 0 1rem; border-bottom: 1px solid var(--line); }
.bc-switches .switch-row:first-child { border-top: 0; }
.bc-switches .switch:disabled { opacity: .45; }
.bc-switches { text-align: left; }

/* Add to Apple Wallet (black, per Apple's badge style) */
.wallet-btn { background: #000; color: #fff; border: 1px solid #a6a6a6; gap: .55rem; }
.wallet-btn:hover { background: #111; color: #fff; }
.wallet-ic { width: 22px; height: 17px; border-radius: 4px; flex: none; background: linear-gradient(180deg, #33a3dc 0 25%, #ffb400 25% 50%, #fc4c3e 50% 75%, #4cd964 75%); box-shadow: inset 0 -5px 0 #d8d8d8; }

/* ---------- Tickets: buying window (public.js) and "Your tickets" page (tickets-page.js) ---------- */
.buy-dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px - var(--sa-top) - var(--sa-bottom)); padding: 0; border: 0; border-radius: 18px; background: var(--card); color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); overflow: auto; overscroll-behavior: contain; }
.buy-dialog::backdrop { background: rgba(30, 30, 30, .55); backdrop-filter: blur(3px); }
.buy-form { display: flex; flex-direction: column; gap: 1rem; padding: 1.4rem clamp(1rem, 4vw, 1.8rem) calc(1.4rem + var(--sa-bottom)); }
.buy-head { display: flex; align-items: flex-start; gap: 1rem; }
.buy-head > div { flex: 1 1 auto; min-width: 0; }
.buy-head h2 { margin: .15rem 0 .2rem; font-size: 1.45rem; text-wrap: balance; }
.buy-head p { margin: 0; font-size: .92rem; }
.buy-x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.buy-note { margin: 0; padding: .7rem .9rem; border-radius: 10px; background: var(--gold-100); color: var(--gold-ink); font-size: .9rem; white-space: pre-line; }
.buy-types { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; }
.buy-types li { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; }
.buy-types li + li { border-top: 1px solid var(--line); }
.buy-types .grow { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.buy-types .grow span { font-size: .84rem; color: var(--muted); }
.buy-left { font-style: normal; font-size: .78rem; font-weight: 700; color: var(--gold-ink); }
.buy-price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; flex: none; }
.stepper button { width: 36px; height: 36px; border: 0; background: transparent; color: var(--ink); font-size: 1.2rem; cursor: pointer; }
.stepper button:disabled { color: var(--line); cursor: default; }
.stepper output { min-width: 1.6rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.buy-total { display: flex; justify-content: space-between; align-items: baseline; padding: 0 .2rem; }
.buy-total strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.buy-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .8rem; }
.buy-fields label { display: flex; flex-direction: column; gap: .3rem; font-size: .84rem; font-weight: 600; }
.buy-fields input { font: inherit; font-size: 1rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); min-width: 0; }
.buy-go { width: 100%; justify-content: center; }
.buy-go:disabled { opacity: .55; cursor: default; }
.buy-fine { margin: -.3rem 0 0; font-size: .8rem; color: var(--muted); text-align: center; }
@media (max-width: 560px) {
  .buy-dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 18px 18px 0 0; max-height: calc(100dvh - var(--sa-top) - 12px); }
  .buy-fields { grid-template-columns: minmax(0, 1fr); }
  .buy-types li { flex-wrap: wrap; }
  .buy-types .grow { flex-basis: 100%; }
  .buy-price { margin-right: auto; }
}

.tix-wrap { max-width: 760px; }
.tix-note { max-width: 560px; margin: 2rem auto; }
.tix-head h1 { margin: .2rem 0 .4rem; font-size: clamp(1.8rem, 5vw, 2.6rem); text-wrap: balance; }
.tix-head .lead { margin: 0 0 1rem; }
.tix-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.tix-actions .btn-outline { color: var(--ink); }
.tix-tip { margin: 1.2rem 0 0; font-size: .95rem; }
.tix-list { display: grid; gap: 1rem; margin-top: 1.6rem; }
.tix-card { display: flex; gap: 1.2rem; align-items: center; padding: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.tix-qr { flex: none; width: 168px; aspect-ratio: 1; max-width: 100%; background: #fff; border-radius: 10px; display: grid; place-items: center; }
.tix-qr svg { width: 100%; height: 100%; display: block; }
.tix-qr span { font-size: .85rem; color: #757575; text-align: center; padding: 1rem; }
.tix-info { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; min-width: 0; }
.tix-seq { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--gold-ink); }
.tix-info strong { font-size: 1.2rem; }
.tix-info code { font-size: 1rem; letter-spacing: .06em; color: var(--muted); }
.tix-info .wallet-btn { margin-top: .4rem; }
.tix-card.void { opacity: .6; }
.tix-foot { margin-top: 1.4rem; font-size: .85rem; }
@media (max-width: 520px) {
  .tix-card { flex-direction: column; align-items: stretch; text-align: center; }
  .tix-qr { width: min(260px, 100%); margin: 0 auto; }
  .tix-info { align-items: center; }
}

/* ---------- Tickets in the portal (boxoffice.js) ---------- */
.tk-top { flex-wrap: wrap; gap: .8rem; margin-bottom: 1rem; }
.tk-top select { max-width: min(360px, 70vw); }
.tk-tools { display: flex; gap: .5rem; flex-wrap: wrap; }
.tk-tools .btn svg { width: 16px; height: 16px; }
.tk-cols { margin-top: 1.2rem; align-items: start; }
.tk-search { font: inherit; font-size: .88rem; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); width: min(220px, 100%); min-width: 0; }
.tk-types .grow, .tk-orders .grow { min-width: 0; }
.tk-bar { height: 5px; border-radius: 3px; background: var(--noir-100); margin-top: .4rem; overflow: hidden; max-width: 260px; }
.tk-bar i { display: block; height: 100%; background: var(--brand-gold); border-radius: 3px; }
.tk-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; margin: 0 0 1rem; font-size: .92rem; }
.tk-facts div { display: contents; }
.tk-facts dt { color: var(--muted); }
.tk-facts dd { margin: 0; overflow-wrap: anywhere; }
.tk-codes { margin-bottom: 1rem; }
.tk-codes code { letter-spacing: .05em; }
.tk-order-acts { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }

/* Door scanner: full screen, camera on top, a big clear answer underneath */
.tk-scan { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; background: #111; color: #fff;
  padding: calc(var(--sa-top) + .6rem) calc(var(--sa-right) + 1rem) calc(var(--sa-bottom) + 1rem) calc(var(--sa-left) + 1rem); gap: .8rem; }
.tk-scan-top { display: flex; align-items: center; gap: 1rem; }
.tk-scan-top > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tk-scan-top strong { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-scan-top span { font-size: .85rem; color: #cfcfcf; font-variant-numeric: tabular-nums; }
.tk-scan-x { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.tk-scan-cam { position: relative; flex: 1 1 auto; min-height: 0; border-radius: 18px; overflow: hidden; background: #000; }
.tk-scan-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-scan-frame { position: absolute; inset: 50% auto auto 50%; width: min(62vw, 62%, 280px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 18px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35); outline: 3px solid rgba(214, 199, 158, .9); }
.tk-scan-wait { position: absolute; inset: auto 0 1rem; margin: 0; text-align: center; font-size: .9rem; color: #ddd; padding: 0 1rem; }
.tk-scan-result { min-height: 92px; border-radius: 16px; padding: .9rem 1.1rem; background: #262626; display: flex; flex-direction: column; justify-content: center; gap: .2rem; }
.tk-scan-result strong { font-size: 1.35rem; }
.tk-scan-result span { font-size: .92rem; color: rgba(255, 255, 255, .85); }
.tk-scan-result .link-btn { color: #fff; text-decoration: underline; align-self: flex-start; margin-top: .2rem; }
.tk-scan-result.good { background: #2f7d55; }
.tk-scan-result.warn { background: #a8741c; }
.tk-scan-result.bad { background: #a8443c; }
.tk-scan-type { display: flex; gap: .5rem; }
.tk-scan-type input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 1rem; letter-spacing: .08em; padding: .7rem .9rem; border-radius: 12px; border: 1px solid #444; background: #1c1c1c; color: #fff; }
.tk-scan-top span.offline { color: #f1c27d; }
.tk-offline { display: block; font-style: normal; font-size: .82rem; color: rgba(255, 255, 255, .9); margin-top: .15rem; }

/* Sign in with Apple (login.html, iPhone app) */
.apple-wrap { margin-top: 1.1rem; }
.or-line { display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .82rem; margin-bottom: 1rem; }
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.apple-btn { width: 100%; justify-content: center; gap: .45rem; background: #000; color: #fff; border: 1px solid #000; font-weight: 600; }
.apple-btn span { font-size: 1.15em; line-height: 1; margin-top: -2px; }
.apple-btn:hover { background: #1a1a1a; color: #fff; }
.apple-btn:disabled { opacity: .6; }
:root[data-theme="dark"] .apple-btn { background: #fff; color: #000; border-color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .apple-btn { background: #fff; color: #000; border-color: #fff; } }

/* Files shared from Photos (portal.js checkShares) */
.share-thumbs { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: 1rem; }
.share-thumbs img, .share-file { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--surface); border: 1px solid var(--line); }
.share-file { display: grid; place-items: center; font-size: .78rem; font-weight: 700; color: var(--muted); }
.share-opts { display: grid; gap: .5rem; margin-bottom: .9rem; }
.share-opt { display: flex; gap: .7rem; align-items: flex-start; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.share-opt:has(input:checked) { border-color: var(--brand-gold); background: var(--gold-100); }
.share-opt input[type=radio] { width: 18px; height: 18px; min-width: 0; flex: none; margin: .15rem 0 0; padding: 0; accent-color: var(--brand-gold); }
.share-opt span { display: flex; flex-direction: column; gap: .1rem; }
.share-opt small { color: var(--muted); font-size: .8rem; }

/* ---------- Titles & packages (Season Setup, titleholder home) ---------- */
.pkg-division + .pkg-division { margin-top: 1.4rem; }
.pkg-division h4 { margin: 0 0 .6rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); }
.pkg-title { border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; }
.pkg-title + .pkg-title { margin-top: .7rem; }
.pkg-title.retired { opacity: .65; }
.pkg-head { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.pkg-head .grow { flex: 1; min-width: 12rem; }
.pkg-head .grow strong { display: block; }
.pkg-head .grow .muted { display: block; font-size: .82rem; }
.pkg-total { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gold-ink); }
.pkg-items { margin-top: .8rem; }
.pkg-items li { align-items: center; }
.pkg-value { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.pkg-check { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1.5px solid var(--brand-grey-lt); background: var(--bg); color: #fff; display: inline-grid; place-items: center; font-size: .8rem; padding: 0; cursor: pointer; }
span.pkg-check { cursor: default; }
.pkg-check.on { background: var(--ok); border-color: var(--ok); }
.pkg-empty { margin: .6rem 0 0; font-size: .86rem; }
.pkg-sum { margin: .8rem 0 0; padding-top: .7rem; border-top: 1px solid var(--line); text-align: right; font-size: .9rem; }
.pkg-sum strong { font-variant-numeric: tabular-nums; }
.pkg-mine { margin-bottom: 1.5rem; }
/* Apply page: titles and each winner's package */
.apply-titles { display: grid; gap: .7rem; }
.apply-title { border: 1px solid var(--line); border-radius: 12px; padding: .85rem 1rem; display: flex; flex-direction: column; gap: .3rem; }
.apply-title-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.apply-title-total { font-weight: 700; color: var(--gold-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.apply-title ul { list-style: none; margin: .3rem 0 0; padding: 0; font-size: .9rem; }
.apply-title li { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-top: 1px solid var(--line); }
.apply-title-value { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Maps: State Map and the platform's national map (assets/usmap.js) ---------- */
.state-map-wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; margin-top: 1rem; }
@media (max-width: 900px) { .state-map-wrap { grid-template-columns: minmax(0, 1fr); } }
.state-map svg, .us-map { width: 100%; height: auto; display: block; }
.us-map .map-crown { cursor: pointer; }
.us-map .map-crown:hover circle, .us-map .map-crown:focus circle { stroke-width: 3; }
.us-map .map-crown:focus, .us-map .map-state:focus { outline: none; }
.us-map .map-crown:focus-visible circle { stroke: #3c3c3c; stroke-width: 3; }
.us-map .map-state { cursor: pointer; transition: filter .15s ease; }

.map-zoom-wrap { position: relative; }
.map-zoom-wrap .us-map { touch-action: none; cursor: grab; border-radius: 10px; }
.map-zoom-wrap .us-map.dragging { cursor: grabbing; }
.map-zoom-wrap .us-map:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.map-zoom-tools { position: absolute; top: .5rem; right: .5rem; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.map-zoom-tools button { width: 36px; height: 36px; border: 0; border-bottom: 1px solid #e4e1d8; background: #fff; color: #3c3c3c; font: 600 1.15rem/1 system-ui, sans-serif; cursor: pointer; }
.map-zoom-tools button:last-child { border-bottom: 0; font-size: .95rem; }
.map-zoom-tools button:hover:not(:disabled) { background: #f7f2e4; }
.map-zoom-tools button:disabled { color: #b8b8b8; cursor: default; }
.map-zoom-tools button:focus-visible { outline: 2px solid #b49b57; outline-offset: -2px; }

/* Map hover card and lift */
.map-tip { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; min-width: 120px; max-width: 240px; padding: .5rem .7rem; border-radius: 10px;
  background: #3c3c3c; color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.25); border-top: 2px solid #b49b57;
  opacity: 0; transform: translateY(6px) scale(.97); transition: opacity .16s ease, transform .18s cubic-bezier(.2,.8,.2,1); }
.map-tip.show { opacity: 1; transform: translateY(0) scale(1); }
.map-tip strong { display: block; font-size: .9rem; line-height: 1.25; }
.map-tip span { display: block; margin-top: .15rem; font-size: .8rem; color: #d6c79e; }
.us-map .map-state { transition: filter .18s ease; }
.us-map .map-state.map-hover { filter: brightness(1.04) drop-shadow(0 2px 4px rgba(60,60,60,.35)); }
.us-map .map-crown { transition: filter .15s ease; filter: drop-shadow(0 1px 2px rgba(60,60,60,.35)); }
.us-map .map-crown.map-hover { filter: drop-shadow(0 2px 4px rgba(60,60,60,.45)); }
@media (prefers-reduced-motion: reduce) { .map-tip, .us-map .map-state, .us-map .map-crown { transition: none; } }

/* Live mode: Stage manager / Emcee / Sound views (contest.js) */
.live-views { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.08); margin-inline: auto; }
.live-views button { border: 0; background: transparent; color: inherit; opacity: .75; font: inherit; font-size: .85rem; font-weight: 600; padding: .35rem .9rem; border-radius: 999px; cursor: pointer; }
.live-views button.active { background: var(--gold-500); color: #fff; opacity: 1; }
.live-views button:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 1px; }
.live-main.emcee { --emcee-size: 3; }
.emcee-script { font-size: calc(1.1rem + var(--emcee-size) * .38rem); line-height: 1.45; max-width: 46ch; margin: .8rem 0 0; font-weight: 500; }
.emcee-script mark { background: none; color: var(--gold-400); font-weight: 700; }
.emcee-missing { color: #e5877f; font-weight: 600; }
.emcee-size { display: flex; gap: .4rem; margin-top: 1.2rem; }
.live-main.sound { gap: .8rem; }
.sound-ready { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; font-size: .88rem; }
.sound-card { border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: .45rem; }
.sound-card.bg { border-style: dashed; }
.sound-who { font-size: 1.3rem; font-weight: 700; }
.sound-song { font-size: 1rem; opacity: .9; }
.sound-cues { font-size: .9rem; color: var(--gold-400); }
.sound-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; }
.sound-bar span { display: block; height: 100%; width: 0; background: var(--gold-500); transition: width .25s linear; }
.sound-time { font-variant-numeric: tabular-nums; font-size: .9rem; opacity: .8; }
.sound-buttons { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.sound-big { min-width: 9rem; font-size: 1.05rem; }
.sound-vol { display: flex; gap: .6rem; align-items: center; font-size: .88rem; }
.sound-vol input { width: min(260px, 60vw); accent-color: var(--gold-500); }
@media (prefers-reduced-motion: reduce) { .sound-bar span { transition: none; } }
/* Live mode: contestant photos and Up next (052) */
.live-photo, .live-next-photo, .emcee-photo, .sound-photo, .order-photo { object-fit: cover; border-radius: 50%; flex: none; background: rgba(180,155,87,.25); color: #fff; display: inline-grid; place-items: center; font-weight: 700; }
.live-photo { width: 88px; height: 88px; font-size: 1.6rem; border: 3px solid var(--gold-500); }
.emcee-photo { width: 110px; height: 110px; font-size: 2rem; border: 3px solid var(--gold-500); margin-top: .6rem; }
.sound-photo { width: 44px; height: 44px; font-size: .95rem; margin-right: .6rem; vertical-align: middle; border: 2px solid var(--gold-500); }
.order-photo { width: 34px; height: 34px; font-size: .8rem; color: var(--ink); margin-right: .4rem; }
.live-next.with-photo { display: flex; align-items: center; justify-content: center; gap: .9rem; text-align: left; }
.live-next.with-photo > div { display: flex; flex-direction: column; gap: .1rem; }
.live-next-photo { width: 64px; height: 64px; font-size: 1.3rem; border: 2px solid var(--gold-500); }
.live-contestant { align-items: center; }
.sound-buttons .btn.on { background: var(--gold-500); color: #fff; border-color: var(--gold-500); }

/* A new version of the portal is live (assets/update-check.js) */
#update-bar { position: fixed; left: 50%; bottom: calc(1rem + var(--sa-bottom)); transform: translateX(-50%); z-index: 400; display: flex; align-items: center; gap: .6rem;
  padding: .55rem .6rem .55rem 1rem; border-radius: 999px; background: var(--noir-900, #1b1b1b); color: #fff; border: 1px solid var(--gold-500); box-shadow: 0 10px 30px rgba(0,0,0,.35);
  font-size: .86rem; max-width: calc(100vw - 2rem); animation: dw-in .4s ease-out both; }
#update-bar button { font: inherit; font-weight: 700; border: 0; border-radius: 999px; padding: .35rem .9rem; background: var(--gold-500); color: #1b1b1b; cursor: pointer; }
#update-bar button.later { background: transparent; color: rgba(255,255,255,.7); padding: .35rem .5rem; }
@media (max-width: 760px) { #update-bar { bottom: calc(5.2rem + var(--sa-bottom)); } }
@media print { #update-bar { display: none !important; } }

/* Voice notes (assets/voice.js): the recorder sheet and the notes she hears */
.vn-back { position: fixed; inset: 0; z-index: 320; display: grid; place-items: center; padding: max(16px, var(--sa-top)) max(16px, var(--sa-right)) max(16px, var(--sa-bottom)) max(16px, var(--sa-left)); background: rgba(20,18,14,.55); backdrop-filter: blur(3px); animation: fade-in .18s ease both; }
.vn-sheet { width: min(100%, 440px); background: var(--card); color: var(--ink, inherit); border-radius: 20px; border-top: 3px solid var(--gold-500); box-shadow: 0 24px 60px rgba(0,0,0,.35); overflow: hidden; animation: dw-in .3s ease-out both; }
.vn-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.2rem .4rem; }
.vn-top strong { display: block; font-size: 1.05rem; margin-top: .15rem; }
.vn-eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.vn-x { font: inherit; font-size: 1.6rem; line-height: 1; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 .2rem; }
.vn-body { display: grid; justify-items: center; text-align: center; gap: .55rem; padding: .8rem 1.2rem 1.4rem; }
.vn-rec { width: 92px; height: 92px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 35% 30%, #e26a5c, #b8392c); box-shadow: 0 0 0 8px rgba(184,57,44,.14), 0 10px 26px rgba(184,57,44,.35); transition: transform .15s; }
.vn-rec svg { width: 38px; height: 38px; }
.vn-rec:not(:disabled):hover { transform: scale(1.05); }
.vn-rec:disabled { background: var(--line); box-shadow: none; cursor: default; }
.vn-lead { margin: .2rem 0 0; font-weight: 700; }
.vn-hint { margin: 0; font-size: .82rem; color: var(--muted); max-width: 34ch; }
.vn-err { margin: 0; font-size: .82rem; color: var(--danger); max-width: 36ch; }
.vn-file { font-size: .8rem; color: var(--muted); text-decoration: underline; cursor: pointer; }
.vn-live { display: flex; align-items: baseline; gap: .4rem; font-variant-numeric: tabular-nums; }
.vn-time { font-size: 2.2rem; font-weight: 800; }
.vn-max { color: var(--muted); font-size: .9rem; }
.vn-dot { width: 12px; height: 12px; border-radius: 50%; background: #d4483a; align-self: center; animation: vn-blink 1s ease-in-out infinite; }
.vn-meter { display: flex; align-items: center; gap: 3px; height: 54px; width: min(100%, 300px); }
.vn-meter i { flex: 1; height: 100%; border-radius: 3px; background: linear-gradient(var(--gold-500), #d4483a); transform: scaleY(.12); transform-origin: center; transition: transform .08s linear; }
.vn-stop { width: 74px; height: 74px; border-radius: 50%; border: 3px solid #d4483a; background: transparent; cursor: pointer; display: grid; place-items: center; }
.vn-stop span { width: 26px; height: 26px; border-radius: 6px; background: #d4483a; }
.vn-player { width: 100%; }
.vn-line { display: grid; gap: .3rem; width: 100%; text-align: left; font-size: .8rem; font-weight: 600; color: var(--muted); }
.vn-line textarea { width: 100%; font: inherit; font-size: .92rem; resize: vertical; }
.vn-actions { display: flex; gap: .5rem; justify-content: flex-end; width: 100%; flex-wrap: wrap; }
.vn-sending { display: grid; justify-items: center; gap: .6rem; padding: 1.4rem 0; }
.vn-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--gold-500); animation: vn-spin .8s linear infinite; }
@keyframes vn-blink { 50% { opacity: .25; } }
@keyframes vn-spin { to { transform: rotate(360deg); } }
.vn-btn { display: inline-flex; align-items: center; gap: .35rem; }
.vn-btn svg { width: 15px; height: 15px; }
.vn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; width: 100%; }
.vn-item { border: 1px solid var(--line); border-radius: 12px; padding: .65rem .75rem; background: var(--card); }
.vn-item.new { border-color: var(--gold-line); background: var(--gold-100); }
.vn-item-head { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .45rem; }
.vn-item-head strong { display: block; font-size: .9rem; }
.vn-item-head span { display: block; font-size: .8rem; color: var(--muted); }
.vn-badge { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-100); color: var(--gold-ink); border: 1px solid var(--gold-line); }
.vn-badge svg { width: 15px; height: 15px; }
.vn-item audio { width: 100%; height: 38px; }
.vn-note { margin: .45rem 0 0; font-size: .86rem; font-style: italic; color: var(--muted); }
.vn-list.compact { margin-top: .5rem; gap: .4rem; }
.vn-list.compact .vn-item { padding: .5rem .6rem; }
.vn-list.compact .vn-badge { width: 24px; height: 24px; }
.vn-missing audio { display: none; }
@media (max-width: 640px) { .vn-back { place-items: end stretch; padding: 0; } .vn-sheet { width: 100%; border-radius: 20px 20px 0 0; padding-bottom: var(--sa-bottom); } }
@media print { .vn-back, .vn-btn { display: none !important; } }
/* A note inside another list's row keeps its own layout (the row styles are for the row) */
.vn-list > li.vn-item { display: block; border-top: 1px solid var(--line); gap: 0; }
.vn-list > li.vn-item.new { border-top-color: var(--gold-line); }
.vn-list > li.vn-item + li.vn-item { border-top: 1px solid var(--line); }
.vn-list .vn-item-head { display: flex; }
.vn-list .vn-item-head .grow { min-width: 0; flex: 1; }
.vn-list .vn-item-head strong { white-space: normal; }
.vn-list .vn-item-head .link-btn { flex: none; font-size: .8rem; }

/* Dashboard: Needs you today */
.needs-panel { margin-bottom: 1.2rem; border-color: var(--gold-line); }
.needs-count { min-width: 1.6rem; padding: 0 .5rem; border-radius: 999px; background: var(--gold-500); color: #1f1c16; font-size: .8rem; font-weight: 800; text-align: center; line-height: 1.6rem; }
.needs-list { list-style: none; margin: 0; padding: 0; }
.needs-list li + li { border-top: 1px solid var(--line); }
.needs-list a { display: flex; align-items: center; gap: .8rem; padding: .7rem .2rem; color: inherit; text-decoration: none; border-radius: 10px; }
.needs-list a:hover { background: var(--surface); }
.needs-list strong { display: block; font-size: .95rem; }
.needs-list small { display: block; font-size: .82rem; color: var(--muted); margin-top: .1rem; }
.needs-icon { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--gold-100); color: var(--gold-ink); border: 1px solid var(--gold-line); }
.needs-icon svg { width: 17px; height: 17px; }
.needs-list a.late .needs-icon { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.needs-list a.late strong { color: var(--danger); }
.needs-go { flex: none; font-size: 1.4rem; color: var(--muted); }
.needs-more { margin-top: .5rem; font-size: .86rem; }
.needs-clear { display: flex; align-items: center; gap: .6rem; margin: 0; color: var(--ok); font-weight: 600; }
.needs-clear svg { width: 20px; height: 20px; }
.needs-list .grow { flex: 1; min-width: 0; }

/* Long forms: the extras fold under "More options" */
.more-options { border: 1px solid var(--line); border-radius: 12px; padding: 0 .9rem; margin: .2rem 0 1rem; }
.more-options > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: .6rem; padding: .75rem 0; font-weight: 700; font-size: .92rem; }
.more-options > summary::-webkit-details-marker { display: none; }
.more-options > summary::before { content: '+'; display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--gold-100); color: var(--gold-ink); font-weight: 800; }
.more-options[open] > summary::before { content: '−'; }
.more-options > summary small { font-weight: 400; color: var(--muted); font-size: .82rem; }
.more-options[open] { padding-bottom: .2rem; }

/* Dashboard: a new pageant's setup guide */
.setup-guide { margin-bottom: 1.2rem; border-color: var(--gold-line); background: linear-gradient(180deg, var(--gold-100), var(--card) 70%); }
.setup-steps { list-style: none; margin: 0; padding: 0; }
.setup-steps li { display: flex; align-items: center; gap: .8rem; padding: .65rem 0; }
.setup-steps li + li { border-top: 1px solid var(--line); }
.setup-steps strong { display: block; font-size: .95rem; } .setup-steps small { display: block; color: var(--muted); font-size: .82rem; }
.setup-steps .grow { flex: 1; min-width: 0; }
.setup-num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; border: 2px solid var(--line); background: var(--card); color: var(--muted); }
.setup-num svg { width: 15px; height: 15px; }
.setup-steps li.done .setup-num { background: var(--ok); border-color: var(--ok); color: #fff; }
.setup-steps li.done strong { color: var(--muted); font-weight: 600; }
.setup-steps li.next .setup-num { border-color: var(--gold-500); color: var(--gold-ink); box-shadow: 0 0 0 4px var(--gold-100); }

/* My Prep: a contestant's prep in one place */
.back-link { display: inline-block; margin: -.4rem 0 .8rem; font-size: .9rem; font-weight: 600; color: var(--gold-ink); text-decoration: none; }
.prep-hero { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; border-color: var(--gold-line); }
.prep-hero .grow { flex: 1; min-width: 220px; }
.prep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; }
.prep-card { display: grid; gap: .25rem; padding: 1rem 1.1rem; border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.prep-card:hover { border-color: var(--gold-500); transform: translateY(-2px); }
.prep-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--gold-100); color: var(--gold-ink); border: 1px solid var(--gold-line); margin-bottom: .3rem; }
.prep-ico svg { width: 18px; height: 18px; }
.prep-title { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.prep-big { font-size: 1.4rem; line-height: 1.15; }
.prep-line { font-size: .86rem; color: var(--muted); }
.prep-cta { margin-top: .4rem; font-size: .84rem; font-weight: 700; color: var(--gold-ink); }
.prep-card.ok .prep-big { color: var(--ok); }
.prep-card.warn { border-color: var(--danger-line); } .prep-card.warn .prep-big { color: var(--danger); }
.prep-card.new { border-color: var(--gold-line); background: var(--gold-100); }

/* Show day on a phone: the connection and keep-awake banner, and controls sized for thumbs in the dark */
.showday { position: fixed; z-index: 170; left: 0; right: 0; top: 0; display: grid; gap: 6px; pointer-events: none;
  padding: calc(var(--sa-top) + 6px) max(10px, var(--sa-right)) 0 max(10px, var(--sa-left)); }
.sd-bar { pointer-events: auto; max-width: 40rem; width: 100%; margin: 0 auto; display: flex; align-items: center; gap: .4rem .8rem; flex-wrap: wrap;
  padding: .7rem 1rem; border-radius: 14px; font-size: .95rem; line-height: 1.35; box-shadow: 0 8px 28px rgba(0,0,0,.4); animation: fade-in .2s ease both; }
.sd-bar strong { font-weight: 800; }
.sd-bar.bad { background: #b3261e; color: #fff; }
.sd-bar.ok { background: #1f6f43; color: #fff; }
.sd-bar.awake { background: #2b2618; color: #f3ead2; border: 1px solid rgba(214,199,158,.45); }
.sd-bar.awake span { flex: 1 1 16rem; }
.sd-bar.awake .btn { color: #fff; border-color: rgba(255,255,255,.35); background: transparent; min-height: 40px; }
@media (pointer: coarse), (max-width: 760px) {
  .show-live { gap: .7rem; padding-inline: calc(.8rem + var(--sa-left)) calc(.8rem + var(--sa-right)); }
  .live-top { flex-wrap: wrap; gap: .5rem .6rem; }
  .live-top .eyebrow { flex-basis: 100%; order: -2; }
  .live-top .btn { min-height: 44px; }
  .live-views { order: 5; flex-basis: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
  .live-views button { min-height: 48px; font-size: .95rem; }
  .live-clock { margin-right: auto; }
  .live-controls { display: grid; grid-template-columns: 1fr auto 2fr; gap: .6rem; }
  .live-controls .btn { min-width: 0; min-height: 68px; font-size: 1.15rem; border-radius: 18px; }
  .live-controls .btn-gold { font-size: 1.3rem; }
  .sound-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
  .sound-buttons .btn { min-height: 56px; font-size: 1rem; }
  .sound-buttons .sound-big, .sound-buttons .btn-gold:first-child, .sound-buttons .btn-noir:first-child { grid-column: 1 / -1; min-height: 72px; font-size: 1.25rem; }
  .sound-vol input { width: 100%; height: 36px; }
  .emcee-size .btn { min-width: 56px; min-height: 48px; }
  .dw-spin-btn { width: 100%; min-height: 68px; font-size: 1.3rem; }
  .dw-entry { display: grid; grid-template-columns: 1fr auto; gap: .6rem; }
  .dw-entry input { min-height: 60px; }
  .dw-entry .btn { min-height: 60px; min-width: 7rem; font-size: 1.15rem; }
  .dw-back { min-height: 44px; }
  .dw-tools { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; width: 100%; }
  .dw-tools .btn { min-height: 44px; white-space: nowrap; border-radius: 12px; }
  .dw-tools [data-cx="draw-window"] { display: none; }
  .dw-name-pick .chip-btn { min-height: 44px; }
  .dw-slot.open { min-height: 48px; }
}
:root { --sd-h: 0px; }
.show-live { padding-top: calc(1rem + var(--sa-top) + var(--sd-h)); }
.draw-display { padding-top: calc(2vh + var(--sa-top) + var(--sd-h)); }
body:has(.showday:not([hidden])) { padding-top: var(--sd-h); }
@media (max-width: 900px) { body:has(.showday:not([hidden])) .topbar { top: var(--sd-h); } }
.showday { padding-top: calc(var(--sa-top) + 6px); }
.live-controls .btn, .live-views button { white-space: nowrap; }
/* The controls always stay on screen; the middle scrolls if it has to. */
.show-live { grid-template-rows: auto minmax(0, 1fr) auto auto; }
.show-live .live-main { min-height: 0; max-height: 100%; overflow-y: auto; align-self: stretch; align-content: safe center; overscroll-behavior: contain; }
@media (max-width: 760px) { .live-main h1 { font-size: clamp(1.8rem, 8vw, 2.6rem); } }

/* Undo in the toast: the toast takes taps while it offers one */
.toast.has-action { pointer-events: auto; padding-right: .45rem; }
.toast-undo { border: 0; background: transparent; color: var(--champ-400, #d6c79e); font: inherit; font-weight: 800; letter-spacing: .02em; padding: .45rem .8rem; margin-left: .2rem; border-radius: 999px; cursor: pointer; min-height: 36px; }
.toast-undo:hover, .toast-undo:focus-visible { background: rgba(255,255,255,.12); outline: none; }
html[data-theme="dark"] .toast-undo, html.dark-auto .toast-undo { color: #7a6224; }
html[data-theme="dark"] .toast-undo:hover, html.dark-auto .toast-undo:hover { background: rgba(0,0,0,.08); }

/* Several contestants at once */
.pick-cell { width: 1%; padding-right: 0 !important; }
.pick { display: grid; place-items: center; width: 36px; height: 36px; margin: -.4rem -.3rem; cursor: pointer; }
.pick input { width: 18px; height: 18px; accent-color: var(--gold-500); cursor: pointer; }
tr.picked td { background: var(--gold-100); }
.pick-bar { position: sticky; top: calc(var(--sa-top) + .5rem); z-index: 20; display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; margin: 0 0 .8rem; padding: .6rem .8rem .6rem 1rem;
  border-radius: 14px; background: var(--card); border: 1px solid var(--gold-300, #d6c79e); box-shadow: 0 8px 24px rgba(0,0,0,.12); animation: fade-in .15s ease both; }
.pick-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-left: auto; }
.bulk-to { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .8rem; }
@media (max-width: 900px) {
  .pick-bar { top: calc(var(--sa-top) + 3.6rem); }
  .pick-actions { margin-left: 0; width: 100%; }
  .pick-actions .btn { flex: 1 1 auto; min-height: 44px; }
}

/* A parent's Home: what needs them, then her next two weeks */
.parent-card { margin-bottom: 1.2rem; border-color: var(--gold-300, #d6c79e); }
.parent-card .list li { align-items: center; }
.parent-needs a { color: inherit; text-decoration: none; display: grid; gap: .1rem; }
.parent-needs li > span[aria-hidden] { color: var(--muted); font-size: 1.3rem; }
.parent-needs .bad-text { color: var(--danger, #b3261e); }
.parent-sub { margin: 1rem 0 .4rem; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink, #7a6224); }
.parent-soon span b { font-weight: 700; color: var(--text, inherit); }

/* Templates and sending later */
.chat-input .chat-tool { flex: none; width: 38px; height: 38px; color: var(--muted); }
.chat-input .chat-tool svg { width: 18px; height: 18px; }
.chat-waiting { display: grid; gap: .4rem; justify-items: end; margin-top: .4rem; }
.bubble.scheduled { opacity: .85; border: 1px dashed var(--gold-500, #b49b57); background: transparent !important; color: inherit !important; }
.bubble.scheduled small { display: inline-flex; align-items: center; gap: .3rem; }
.bubble.scheduled small svg { width: 13px; height: 13px; }
.sched-tools { display: flex; gap: .8rem; margin-top: .3rem; font-size: .8rem; }
.when-switch { display: inline-flex; gap: .3rem; flex-wrap: wrap; }
.when-switch label { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--line); cursor: pointer; font-size: .9rem; }
.when-switch label:has(input:checked) { border-color: var(--gold-500, #b49b57); background: var(--gold-100); }
.label-like { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .35rem; }
.tpl-list li { align-items: center; }
.tpl-list .grow span { white-space: normal; }

/* Try it with sample data */
.try-card { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.try-card.in-guide { padding: .75rem .9rem; margin: 0 0 1rem; border-radius: 12px; background: var(--gold-100); }
.try-card .grow { display: grid; gap: .15rem; min-width: 14rem; flex: 1; }
.try-card small { color: var(--muted); line-height: 1.4; }
.try-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-500); color: #fff; flex: none; }
.try-ic svg { width: 18px; height: 18px; }
.try-bar { position: sticky; top: 0; z-index: 120; display: flex; align-items: center; gap: .5rem .9rem; flex-wrap: wrap;
  padding: calc(var(--sa-top) + .45rem) max(12px, var(--sa-right)) .45rem max(12px, var(--sa-left)); background: #2b2618; color: #f3ead2; border-bottom: 1px solid rgba(214,199,158,.45); font-size: .88rem; }
.try-label span { opacity: .8; }
.try-roles { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(255,255,255,.08); margin-left: auto; }
.try-roles button { border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; padding: .3rem .75rem; border-radius: 999px; cursor: pointer; min-height: 32px; }
.try-roles button.on { background: var(--gold-500, #b49b57); color: #fff; }
.try-exit { border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; font: inherit; font-weight: 700; padding: .3rem .9rem; border-radius: 999px; cursor: pointer; min-height: 32px; }
@media (max-width: 700px) { .try-label span { display: none; } .try-roles { margin-left: 0; order: 3; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); } .try-exit { margin-left: auto; } }
body.trying .topbar { top: var(--try-h, 0px); }
/* The sample-data bar already clears the status bar, so the header under it doesn't again. */
@media (max-width: 900px) { body.trying .topbar { padding-top: .55rem; } }
@media (min-width: 901px) { body.trying .sidebar { top: var(--try-h, 0px); height: calc(100vh - var(--try-h, 0px)); } }

/* Judges, vendors and carrying a season forward */
.judge-cols { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media (max-width: 900px) { .judge-cols { grid-template-columns: 1fr; } }
.judge-checks { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .3rem; font-size: .88rem; }
.judge-checks li { display: flex; gap: .5rem; color: var(--muted); }
.judge-checks li.ok { color: inherit; }
.judge-checks li.ok span { color: var(--ok, #2e7d4f); font-weight: 800; }
.judge-rules { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; font-size: .9rem; }
.judge-status { min-height: 34px; padding: .2rem .5rem; border-radius: 8px; }
.bad-text { color: var(--danger, #b3261e); }
.carry-line { align-items: flex-start !important; gap: .6rem; padding: .6rem 0; border-bottom: 1px solid var(--line); margin: 0 !important; }
.carry-line span { display: grid; gap: .1rem; }
.carry-line small { color: var(--muted); font-weight: 400; }

/* Sponsor portal (061) */
.sponsor-hero h2 { margin: .2rem 0 .3rem; font-size: clamp(1.6rem, 4vw, 2.2rem); }
.sponsor-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); margin-bottom: 1.2rem; }
@media (max-width: 900px) { .sponsor-cols { grid-template-columns: 1fr; } }
.sponsor-steps { margin-bottom: 1.2rem; }
.sp-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.sp-benefits li { display: flex; gap: .55rem; align-items: flex-start; }
.sp-benefits li span { color: var(--gold-500, #b49b57); flex: none; margin-top: .1rem; }
.sp-benefits svg { width: 16px; height: 16px; }
.sp-pay { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.sp-preview { display: flex; gap: 1rem; align-items: center; padding: .9rem; border-radius: 12px; border: 1px dashed var(--line); margin-bottom: 1rem; }
.sp-preview img { width: 96px; height: 64px; object-fit: contain; flex: none; background: #fff; border-radius: 8px; padding: 4px; }
.sp-preview p { margin: .25rem 0; font-size: .9rem; white-space: pre-line; }
.sp-nologo { width: 96px; height: 64px; flex: none; display: grid; place-items: center; text-align: center; font-size: .72rem; color: var(--muted); border-radius: 8px; background: var(--surface-2, rgba(0,0,0,.04)); }
.sp-order .list li { align-items: center; }

/* Paperwork: blank forms, checks before upload, send-back reasons (062) */
.form-dl { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left; padding: .65rem .8rem; margin: .1rem 0; border-radius: 12px; border: 1px dashed var(--gold-500, #b49b57); background: var(--gold-100); color: inherit; font: inherit; cursor: pointer; }
.form-dl svg { width: 22px; height: 22px; flex: none; color: var(--gold-ink, #7a6224); }
.form-dl span { display: grid; gap: .1rem; }
.form-dl small { color: var(--muted); font-size: .8rem; }
.form-dl:hover { border-style: solid; }
.req-hint { font-size: .8rem; margin: 0; }
.upload-warnings { margin: 0 0 .6rem; padding-left: 1.1rem; display: grid; gap: .45rem; }
.upload-warnings li { line-height: 1.45; }
.reason-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .6rem; }
.reason-chips .chip-btn { font-size: .8rem; }
.reason-chips .chip-btn.on { background: var(--gold-500, #b49b57); color: #fff; border-color: var(--gold-500, #b49b57); }

/* Getting around on a phone: Back, the More screen, tables as cards */
.back-btn { display: inline-flex; align-items: center; gap: .25rem; border: 0; background: none; color: var(--gold-ink, #7a6224); font: inherit; font-size: .85rem; font-weight: 700; padding: .15rem 0; margin: 0 0 .1rem; cursor: pointer; }
.back-btn span { font-size: 1.2rem; line-height: 1; margin-top: -.1rem; }
html[data-theme="dark"] .back-btn, html.dark-auto .back-btn { color: var(--champ-400, #d6c79e); }
body.has-back .tb-date { display: none; }
@media (max-width: 900px) { body.has-back .topbar h1 { font-size: 1.35rem; } }
/* More (phones): its own page, like iOS's More tab. */
.more-page { display: grid; gap: .2rem; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.more-page input { -webkit-user-select: text; user-select: text; }
.more-me { display: flex; align-items: center; gap: .75rem; padding: .75rem .85rem; border-radius: 16px; background: var(--card); border: 1px solid var(--line); color: inherit; text-decoration: none; }
.more-me .avatar { width: 48px; height: 48px; font-size: 1.05rem; }
.more-me .grow { display: grid; min-width: 0; flex: 1; }
.more-me strong { font-size: 1.05rem; }
.more-me small { color: var(--muted); font-size: .82rem; }
.more-chev { color: var(--muted); font-size: 1.5rem; line-height: 1; }
.more-me:active { background: var(--gold-100); }
.more-find { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; padding: 0 .8rem; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.more-find svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.more-find input { flex: 1; border: 0; background: transparent; min-height: 44px; font: inherit; font-size: 1rem; color: inherit; outline: none; padding: 0; box-shadow: none; }
.more-label { margin: 1.15rem 0 .55rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.more-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem .35rem; }
.more-tile { display: grid; justify-items: center; align-content: start; gap: .4rem; text-align: center; text-decoration: none; color: inherit; -webkit-touch-callout: none; user-select: none; }
.more-ic { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 17px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: transform .18s cubic-bezier(.2, .9, .3, 1); }
.more-ic svg { width: 24px; height: 24px; color: var(--gold-ink, #7a6224); }
html[data-theme="dark"] .more-ic svg, html.dark-auto .more-ic svg { color: var(--champ-400, #d6c79e); }
.more-name { font-size: .74rem; font-weight: 600; line-height: 1.2; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.more-tile:active .more-ic { transform: scale(.92); }
.more-count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 .35rem; border-radius: 999px; background: var(--gold-500, #b49b57); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg, #f6f5f2); }
.more-list { display: grid; border-radius: 14px; overflow: hidden; background: var(--card); border: 1px solid var(--line); }
.more-row { display: grid; gap: .1rem; padding: .7rem .9rem; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.more-row:first-child { border-top: 0; }
.more-row small { color: var(--muted); font-size: .8rem; }
.more-row:active { background: var(--gold-100); }
.more-empty { color: var(--muted); text-align: center; margin: 1.5rem 0; }
.more-tip { color: var(--muted); font-size: .78rem; text-align: center; margin: 1.4rem 0 0; }
.more-foot { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.more-foot svg { width: 16px; height: 16px; vertical-align: -3px; }
.tab-picks { display: grid; gap: .1rem; max-height: 50vh; overflow-y: auto; margin-bottom: .6rem; }
.tab-picks svg { width: 16px; height: 16px; vertical-align: -3px; }
.edge-back { position: fixed; left: 0; top: 50%; z-index: 200; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--gold-ink, #7a6224);
  box-shadow: 0 6px 20px rgba(0,0,0,.25); font-size: 1.6rem; font-weight: 700; transform: translate(-40px, -50%); opacity: 0; pointer-events: none; transition: background .15s; }
.edge-back.ready { background: var(--gold-500, #b49b57); color: #fff; }
.edge-back.out { transition: opacity .2s, transform .2s; opacity: 0 !important; }
@media (max-width: 700px) {
  .table-wrap:has(table.as-cards) { overflow: visible; }
  table.as-cards, table.as-cards tbody { display: block; width: 100%; min-width: 0 !important; }
  table.as-cards thead { display: none; }
  table.as-cards tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem .8rem; padding: .85rem .9rem; margin: 0 0 .6rem; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
  table.as-cards tr.picked { border-color: var(--gold-500, #b49b57); }
  table.as-cards td { display: flex; justify-content: space-between; align-items: center; gap: .8rem; grid-column: 1 / -1; padding: 0 !important; border: 0 !important; min-width: 0 !important; text-align: right; white-space: normal !important; background: none !important; }
  table.as-cards td::before { content: attr(data-label); color: var(--muted); font-size: .78rem; text-align: left; flex: none; }
  table.as-cards td.card-title { grid-column: 1; grid-row: 1; display: block; text-align: left; font-size: 1rem; }
  table.as-cards td.card-title::before, table.as-cards td.card-actions::before, table.as-cards td.card-pick::before { content: none; }
  table.as-cards td.card-pick { grid-column: 2; grid-row: 1; justify-content: flex-end; width: auto !important; }
  table.as-cards td.card-actions { justify-content: flex-start; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; text-align: left; }
  table.as-cards td:empty { display: none; }
}
@media (max-width: 700px) {
  .req-list > li { flex-wrap: wrap; }
  .req-list > li > .grow { flex: 1 1 100%; min-width: 0; }
  .req-list > li > .req-side { flex: 1 1 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .4rem; justify-content: flex-start; }
}

/* Families of pages: tabs across the top (Season: Plan · Setup · Tasks …) */
.family-tabs { display: flex; gap: .3rem; margin: 0 0 1.1rem; padding: .25rem; border-radius: 999px; background: var(--surface-2, rgba(0,0,0,.05)); width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.family-tabs::-webkit-scrollbar { display: none; }
.family-tabs a { flex: none; padding: .45rem 1rem; border-radius: 999px; text-decoration: none; color: inherit; font-weight: 600; font-size: .9rem; white-space: nowrap; min-height: 36px; display: inline-flex; align-items: center; }
.family-tabs a.active { background: var(--gold-500, #b49b57); color: #fff; }
html[data-theme="dark"] .family-tabs, html.dark-auto .family-tabs { background: rgba(255,255,255,.07); }
/* Number tiles fold into one line on a phone */
.kpi-summary { display: none; }
@media (max-width: 700px) {
  .kpi-summary { display: flex; align-items: center; gap: .6rem; width: 100%; margin: 0 0 .9rem; padding: .7rem .9rem; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .kpi-summary-text { flex: 1; display: flex; flex-wrap: wrap; gap: .15rem .45rem; font-size: .88rem; line-height: 1.4; }
  .kpi-summary-text i { color: var(--muted); font-style: normal; }
  .kpi-summary-more { flex: none; font-size: .8rem; font-weight: 700; color: var(--gold-ink, #7a6224); }
  html[data-theme="dark"] .kpi-summary-more, html.dark-auto .kpi-summary-more { color: var(--champ-400, #d6c79e); }
  .kpis.kpis-folded { display: none; }
}
/* Settings > Pages in the menu */
.menu-picks { display: grid; gap: .05rem; margin-bottom: .8rem; }
.menu-picks h4 { margin: .8rem 0 .2rem; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.menu-picks svg { width: 16px; height: 16px; vertical-align: -3px; }
.menu-picks small { font-weight: 400; }

/* ---------- Messages (chat.js, 064): conversations that feel like texting ---------- */
:root { --ch-me: #3c3c3c; --ch-me-ink: #fff; --ch-them: #efeeeb; --ch-them-ink: var(--ink); --ch-ground: #fff; --ch-quote: rgba(60, 60, 60, .07); }
html[data-theme="dark"] { --ch-me: #6f5e35; --ch-me-ink: #fff; --ch-them: #313131; --ch-ground: #222; --ch-quote: rgba(255, 255, 255, .07); }
@media (prefers-color-scheme: dark) { html[data-theme="system"] { --ch-me: #6f5e35; --ch-me-ink: #fff; --ch-them: #313131; --ch-ground: #222; --ch-quote: rgba(255, 255, 255, .07); } }
html.dark-auto { --ch-me: #6f5e35; --ch-them: #313131; --ch-ground: #222; --ch-quote: rgba(255, 255, 255, .07); }

.chat-app { display: grid; grid-template-columns: minmax(250px, 320px) 1fr; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--ch-ground); min-height: 420px; box-shadow: var(--shadow); }
.ch-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--card); }
.ch-list-head { display: flex; align-items: center; gap: .5rem; padding: .8rem .8rem .6rem; }
.ch-search { flex: 1; display: flex; align-items: center; gap: .45rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 .75rem; height: 36px; color: var(--muted); }
.ch-search svg { width: 16px; height: 16px; flex: none; }
.ch-search input { border: 0; background: transparent; padding: 0; height: 100%; width: 100%; font: inherit; font-size: .88rem; color: var(--ink); outline: none; box-shadow: none; }
.ch-threads { flex: 1; overflow-y: auto; padding: 0 .4rem .6rem; overscroll-behavior: contain; }
.ch-thread { display: flex; gap: .7rem; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-radius: 12px; padding: .6rem .55rem; cursor: pointer; font: inherit; color: var(--ink); }
.ch-thread:hover { background: var(--surface); }
.ch-thread.active { background: var(--gold-100); }
.ch-thread-main { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.ch-thread-top { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.ch-thread-top strong { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-thread-top time { font-size: .72rem; color: var(--muted); flex: none; }
.ch-thread-sub { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.ch-pre { flex: 1; min-width: 0; font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-thread.unread .ch-pre { color: var(--ink); font-weight: 600; }
.ch-thread.unread time { color: var(--gold-ink); font-weight: 700; }
.ch-badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand-gold); color: #fff; font-size: .7rem; font-weight: 800; display: grid; place-items: center; }
.ch-muted { color: var(--muted); display: inline-flex; } .ch-muted svg { width: 14px; height: 14px; }
.ch-none { color: var(--muted); font-size: .85rem; text-align: center; padding: 1.5rem .5rem; }
.ch-tav { width: 44px; height: 44px; flex: none; font-size: .9rem; }
.ch-tav.xl { width: 72px; height: 72px; }
.ch-group { display: grid; place-items: center; background: linear-gradient(140deg, #4a4a4a, #2f2f2f); color: #fff; }
.ch-group.cons { background: linear-gradient(140deg, #c8b277, #a28a48); }
.ch-group.board { background: linear-gradient(140deg, #5f5f5f, #3c3c3c); }
.ch-group svg { width: 56%; height: 56%; }
.ch-crown { display: grid; place-items: center; background: var(--gold-100); }
.ch-crown .crown { width: 60%; height: 60%; }

.ch-conv { position: relative; padding: 0; margin: 0; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--ch-ground); }
.ch-head { display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(10px); z-index: 2; }
.ch-head .ch-tav { width: 38px; height: 38px; }
.ch-title { flex: 1; min-width: 0; display: grid; }
.ch-title strong { font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-title span { font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-back { display: none; width: 36px; height: 36px; border: 0; background: none; color: var(--ink); margin-left: -.4rem; border-radius: 50%; cursor: pointer; place-items: center; }
.ch-back svg { width: 24px; height: 24px; }
.ch-ibtn { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.ch-ibtn:hover { background: var(--surface); color: var(--ink); }
.ch-ibtn.on { color: var(--gold-ink); }
.ch-ibtn svg { width: 20px; height: 20px; }
.ch-pinbar { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: var(--gold-100); color: var(--ink); padding: .5rem 1rem; cursor: pointer; font: inherit; }
.ch-pinbar > svg { width: 18px; height: 18px; color: var(--gold-ink); flex: none; }
.ch-pinbar > span { min-width: 0; display: grid; }
.ch-pinbar b { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold-ink); }
.ch-pinbar span span { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ch-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
.ch-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 1rem 1rem .4rem; }
.ch-empty { margin: auto; display: grid; justify-items: center; gap: .3rem; text-align: center; color: var(--muted); padding: 2rem 1rem; }
.ch-empty strong { color: var(--ink); font-size: 1.05rem; margin-top: .4rem; }
.ch-empty span { font-size: .8rem; } .ch-empty p { margin: .6rem 0 0; }
.ch-day { text-align: center; margin: 1rem 0 .5rem; } .ch-day span { font-size: .72rem; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.ch-new { display: flex; align-items: center; gap: .6rem; margin: .8rem 0 .4rem; color: var(--gold-ink); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.ch-new::before, .ch-new::after { content: ""; flex: 1; height: 1px; background: var(--gold-line); }

.ch-row { position: relative; display: flex; align-items: flex-end; gap: .45rem; max-width: 100%; transition: transform .18s ease; }
.ch-row.g-start { margin-top: .55rem; }
.ch-row.me { justify-content: flex-end; }
.ch-row.swiping { transition: none; }
.ch-av { width: 30px; flex: none; align-self: flex-end; }
.ch-mav { width: 30px; height: 30px; font-size: .68rem; }
.ch-col { display: flex; flex-direction: column; align-items: flex-start; max-width: min(74%, 560px); min-width: 0; }
.ch-row.me .ch-col { align-items: flex-end; }
.ch-name { font-size: .72rem; color: var(--muted); font-weight: 600; margin: 0 0 .2rem .7rem; }
.ch-line { display: flex; align-items: center; gap: .3rem; max-width: 100%; }
.ch-row.me .ch-line { flex-direction: row-reverse; }
.ch-bubble { position: relative; padding: .5rem .8rem; border-radius: 20px; background: var(--ch-them); color: var(--ch-them-ink); font-size: .92rem; line-height: 1.38; overflow-wrap: anywhere; min-width: 0; outline: none; -webkit-user-select: text; user-select: text; -webkit-touch-callout: none; }
.ch-row.me .ch-bubble { background: var(--ch-me); color: var(--ch-me-ink); }
/* A run of messages reads as one: only the outer corners stay round, the tail on the last. */
.ch-row:not(.me):not(.g-start) .ch-bubble { border-top-left-radius: 6px; }
.ch-row:not(.me):not(.g-end) .ch-bubble { border-bottom-left-radius: 6px; }
.ch-row.me:not(.g-start) .ch-bubble { border-top-right-radius: 6px; }
.ch-row.me:not(.g-end) .ch-bubble { border-bottom-right-radius: 6px; }
.ch-row.g-end:not(.me) .ch-bubble:not(.big):not(.gone) { border-bottom-left-radius: 6px; }
.ch-row.g-end.me .ch-bubble:not(.big):not(.gone) { border-bottom-right-radius: 6px; }
.ch-text { white-space: pre-wrap; }
.ch-bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ch-bubble.big { background: none !important; padding: 0 .1rem; font-size: 2.6rem; line-height: 1.15; }
.ch-bubble.gone { background: none !important; color: var(--muted) !important; border: 1px dashed var(--line); font-style: italic; font-size: .82rem; }
.ch-bubble.pinned { box-shadow: 0 0 0 2px var(--gold-line); }
.ch-bubble.media { padding: 3px; background: none !important; }
.ch-edited { display: block; font-size: .66rem; opacity: .7; margin-top: .1rem; text-align: right; }
.ch-row:focus-within .ch-bubble:focus-visible { box-shadow: 0 0 0 2px var(--brand-gold); }
.ch-img { display: block; padding: 0; border: 0; background: var(--surface); border-radius: 16px; overflow: hidden; cursor: zoom-in; max-width: 280px; margin: 0 0 .3rem; }
.ch-bubble.media .ch-img { margin: 0; }
.ch-img img { display: block; width: 100%; max-height: 360px; object-fit: cover; min-height: 120px; min-width: 160px; }
.ch-file { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 14px; background: var(--ch-quote); border: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; margin: 0 0 .3rem; min-width: 200px; }
.ch-bubble.media .ch-file { margin: 0; background: var(--ch-them); }
.ch-row.me .ch-bubble.media .ch-file { background: var(--ch-me); color: var(--ch-me-ink); }
.ch-file > svg { width: 28px; height: 28px; flex: none; opacity: .85; }
.ch-file span { display: grid; min-width: 0; } .ch-file strong { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ch-file small { font-size: .72rem; opacity: .75; }
.ch-quote { display: grid; gap: .05rem; text-align: left; max-width: 100%; margin: 0 0 -.35rem; padding: .35rem .75rem .65rem; border: 0; border-radius: 16px 16px 6px 6px; background: var(--ch-quote); color: var(--muted); font: inherit; font-size: .78rem; cursor: pointer; border-left: 3px solid var(--brand-gold); }
.ch-quote b { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--gold-ink); } .ch-quote b svg { width: 12px; height: 12px; }
.ch-quote span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.ch-taps { display: flex; gap: .25rem; margin: -.35rem .5rem 0; position: relative; z-index: 1; flex-wrap: wrap; }
.ch-row.me .ch-taps { justify-content: flex-end; }
.ch-tap { display: inline-flex; align-items: center; gap: .2rem; height: 24px; padding: 0 .45rem; border-radius: 999px; border: 2px solid var(--ch-ground); background: var(--card); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); font-size: .82rem; cursor: pointer; color: var(--ink); line-height: 1; }
.ch-tap span { font-size: .7rem; font-weight: 700; color: var(--muted); }
.ch-tap.mine { background: var(--gold-100); box-shadow: 0 0 0 1px var(--gold-line), 0 1px 3px rgba(0, 0, 0, .12); }
.ch-meta { display: flex; gap: .45rem; align-items: center; font-size: .68rem; color: var(--muted); margin: .25rem .6rem 0; }
.ch-pinned-tag { display: inline-flex; align-items: center; gap: .2rem; color: var(--gold-ink); font-weight: 700; } .ch-pinned-tag svg { width: 11px; height: 11px; }
.ch-rcpt { font-weight: 600; } .ch-rcpt.seen { color: var(--gold-ink); }
.ch-rcpt.fail { color: var(--danger); background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; }
.ch-row.pending .ch-bubble { opacity: .7; }
.ch-tools { display: flex; gap: 2px; opacity: 0; transition: opacity .12s ease; }
.ch-tools button { width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.ch-tools button:hover { background: var(--surface); color: var(--ink); }
.ch-tools svg { width: 16px; height: 16px; }
@media (hover: hover) { .ch-row:hover .ch-tools, .ch-row:focus-within .ch-tools { opacity: 1; } }
@media (hover: none) { .ch-tools { display: none; } }
.ch-swipe-ic { position: absolute; left: -34px; top: 50%; transform: translateY(-50%) scale(.6); opacity: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); color: var(--muted); display: grid; place-items: center; transition: transform .15s ease, opacity .15s ease; }
.ch-swipe-ic svg { width: 15px; height: 15px; }
.ch-row.swiping .ch-swipe-ic { opacity: .7; }
.ch-row.armed .ch-swipe-ic { opacity: 1; transform: translateY(-50%) scale(1); background: var(--brand-gold); color: #fff; }
.ch-row.flash .ch-bubble { animation: ch-flash 1.2s ease; }
@keyframes ch-flash { 0%, 40% { box-shadow: 0 0 0 3px var(--brand-gold); } 100% { box-shadow: 0 0 0 0 transparent; } }
.ch-row.arrive { animation: ch-in .32s var(--ease-out, ease) both; }
@keyframes ch-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.ch-burst { position: absolute; right: -6px; top: -18px; font-size: 1.6rem; pointer-events: none; animation: ch-burst .7s ease-out forwards; }
.ch-row.me .ch-burst { right: auto; left: -6px; }
@keyframes ch-burst { 0% { transform: scale(.3); opacity: 0; } 35% { transform: scale(1.35); opacity: 1; } 100% { transform: translateY(-14px) scale(1); opacity: 0; } }
.ch-row.lifted .ch-bubble { transform: scale(1.02); }

.ch-scroll .typing-line { padding: 0 1rem; }
.ch-down { position: absolute; right: 1rem; bottom: 86px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; z-index: 3; }
.ch-down svg { width: 18px; height: 18px; }
.ch-down b { position: absolute; top: -6px; right: -4px; min-width: 18px; height: 18px; border-radius: 999px; background: var(--brand-gold); color: #fff; font-size: .66rem; display: grid; place-items: center; padding: 0 4px; }

.ch-compose { border-top: 1px solid var(--line); background: var(--card); padding: .5rem .7rem calc(.5rem + var(--ch-safe, 0px)); }
.ch-context { display: flex; align-items: center; gap: .6rem; padding: .3rem .4rem .5rem; font-size: .8rem; }
.ch-context > span { flex: 1; min-width: 0; display: flex; align-items: center; gap: .4rem; color: var(--muted); }
.ch-context svg { width: 15px; height: 15px; color: var(--gold-ink); flex: none; }
.ch-context b { color: var(--ink); white-space: nowrap; } .ch-context em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-context button { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--surface); color: var(--muted); cursor: pointer; display: grid; place-items: center; flex: none; }
.ch-context button svg { width: 14px; height: 14px; color: inherit; }
.ch-pending-file { display: flex; align-items: center; gap: .6rem; padding: .4rem; margin: 0 0 .4rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); max-width: 360px; }
.ch-pending-file img, .ch-fi { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: none; display: grid; place-items: center; background: var(--card); }
.ch-fi svg { width: 24px; height: 24px; color: var(--muted); }
.ch-pending-file > span { flex: 1; min-width: 0; display: grid; } .ch-pending-file strong { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ch-pending-file small { font-size: .72rem; color: var(--muted); }
.ch-pending-file button { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--card); color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.ch-pending-file button svg { width: 14px; height: 14px; }
.ch-input { display: flex; align-items: flex-end; gap: .35rem; padding: 0; border: 0; }
.ch-input textarea { flex: 1; resize: none; min-height: 38px; padding: .5rem .9rem; border-radius: 20px; border: 1px solid var(--line); background: var(--ch-ground); font: inherit; font-size: .92rem; line-height: 1.35; color: var(--ink); }
.ch-input textarea:focus { outline: none; border-color: var(--brand-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-gold) 22%, transparent); }
.ch-input .ch-ibtn { width: 38px; height: 38px; }
.ch-attach { background: var(--surface) !important; color: var(--ink) !important; }
.ch-send { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--brand-gold); color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform .12s ease, opacity .12s ease, background .12s ease; }
.ch-send svg { width: 18px; height: 18px; }
.ch-send:disabled { background: var(--noir-100); color: var(--muted); cursor: default; }
.ch-send:not(:disabled):active { transform: scale(.9); }

/* The message menu: tapbacks on top, then what you can do */
.ch-sheet { position: fixed; inset: 0; z-index: 400; }
.ch-sheet-back { position: absolute; inset: 0; background: rgba(20, 20, 20, .32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .18s ease; }
.ch-sheet.pop .ch-sheet-back { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.ch-sheet-card { position: absolute; left: 50%; bottom: calc(14px + var(--sa-bottom)); transform: translate(-50%, 16px); width: min(420px, calc(100vw - 24px)); display: grid; gap: .5rem; opacity: 0; transition: opacity .18s ease, transform .2s var(--ease-out, ease); }
.ch-sheet.pop .ch-sheet-card { transform: translateY(6px); width: 300px; bottom: auto; }
.ch-sheet.open .ch-sheet-back { opacity: 1; }
.ch-sheet.open .ch-sheet-card { opacity: 1; transform: translate(-50%, 0); }
.ch-sheet.pop.open .ch-sheet-card { transform: none; }
.ch-tapbar { display: flex; justify-content: space-between; gap: .2rem; padding: .35rem; border-radius: 999px; background: var(--card); box-shadow: 0 10px 30px rgba(0, 0, 0, .22); border: 1px solid var(--line); }
.ch-tapbar button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; font-size: 1.55rem; cursor: pointer; transition: transform .12s ease, background .12s ease; display: grid; place-items: center; line-height: 1; }
.ch-tapbar button:hover, .ch-tapbar button:focus-visible { transform: scale(1.18); background: var(--surface); outline: none; }
.ch-tapbar button.mine { background: var(--gold-100); box-shadow: inset 0 0 0 2px var(--brand-gold); }
.ch-sheet.taps-only .ch-sheet-card { width: auto; }
.ch-sheet-preview { background: var(--ch-them); color: var(--ch-them-ink); border-radius: 18px; padding: .6rem .9rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); max-height: 30vh; overflow: auto; }
.ch-sheet-preview.me { background: var(--ch-me); color: var(--ch-me-ink); }
.ch-sheet-preview small { display: block; font-size: .7rem; opacity: .7; margin-bottom: .2rem; }
.ch-sheet-preview p { margin: 0; white-space: pre-wrap; font-size: .92rem; }
.ch-acts { display: grid; background: var(--card); border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.ch-acts button { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-direction: row-reverse; padding: .8rem 1rem; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; font-size: .95rem; color: var(--ink); cursor: pointer; text-align: left; }
.ch-acts button span { flex: 1; }
.ch-acts button:last-child { border-bottom: 0; }
.ch-acts button:hover { background: var(--surface); }
.ch-acts button svg { width: 19px; height: 19px; color: var(--muted); }
.ch-acts button.danger, .ch-acts button.danger svg { color: var(--danger); }
.ch-who { background: var(--card); border-radius: 16px; border: 1px solid var(--line); padding: .6rem .9rem; display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .82rem; }
.ch-who small { width: 100%; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.ch-viewer { position: fixed; inset: 0; z-index: 450; background: rgba(10, 10, 10, .92); display: grid; place-items: center; align-content: center; gap: 1rem; padding: calc(var(--sa-top) + 3rem) 16px calc(var(--sa-bottom) + 2rem); opacity: 0; transition: opacity .18s ease; }
.ch-viewer.open { opacity: 1; }
.ch-viewer img { max-width: 100%; max-height: 78vh; border-radius: 12px; object-fit: contain; }
.ch-viewer .btn { color: #fff; border-color: rgba(255, 255, 255, .3); }
.ch-viewer-x { position: absolute; top: calc(var(--sa-top) + 12px); right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center; cursor: pointer; }
.ch-viewer-x svg { width: 20px; height: 20px; }
.check-line { display: flex; gap: .6rem; align-items: flex-start; margin: .4rem 0 0; font-size: .9rem; cursor: pointer; }
.check-line input { margin-top: .25rem; }
.check-line small { display: block; font-size: .78rem; margin-top: .15rem; }

/* On a phone: the list, or one conversation, edge to edge */
@media (max-width: 760px) {
  .chat-app { grid-template-columns: 1fr; border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; margin: -1.2rem calc(-1 * max(16px, var(--sa-left))) 0; min-height: 0; }
  .chat-app[data-view="list"] .ch-conv, .chat-app[data-view="chat"] .ch-list { display: none; }
  .ch-list { border-right: 0; }
  .ch-back { display: grid; }
  .ch-thread { padding: .7rem .6rem; }
  .ch-col { max-width: 80%; }
  .ch-body { padding: .8rem .75rem .4rem; }
  .ch-compose { padding-bottom: .55rem; }
  .ch-input textarea { font-size: 16px; } /* no zoom on focus (iOS) */
  .ch-down { bottom: 78px; }
}
@media (prefers-reduced-motion: reduce) { .ch-row, .ch-row.arrive, .ch-row.flash .ch-bubble, .ch-burst, .ch-sheet-card, .ch-sheet-back { animation: none !important; transition: none !important; } }

/* Messages, liquid glass: the header and the message box float over the conversation as
   frosted glass, with a bright edge where the light catches it; messages scroll beneath. */
:root { --glass: rgba(255, 255, 255, .58); --glass-strong: rgba(255, 255, 255, .78); --glass-edge: rgba(255, 255, 255, .85); --glass-line: rgba(60, 60, 60, .10);
  --glass-shadow: 0 10px 30px rgba(40, 32, 12, .14), 0 2px 6px rgba(40, 32, 12, .08); --ch-spring: cubic-bezier(.2, 1.25, .35, 1); --ch-ease: cubic-bezier(.22, .9, .3, 1); }
html[data-theme="dark"] { --glass: rgba(38, 38, 38, .55); --glass-strong: rgba(44, 44, 44, .82); --glass-edge: rgba(255, 255, 255, .14); --glass-line: rgba(255, 255, 255, .08); --glass-shadow: 0 12px 34px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3); }
@media (prefers-color-scheme: dark) { html[data-theme="system"] { --glass: rgba(38, 38, 38, .55); --glass-strong: rgba(44, 44, 44, .82); --glass-edge: rgba(255, 255, 255, .14); --glass-line: rgba(255, 255, 255, .08); --glass-shadow: 0 12px 34px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3); } }
html.dark-auto { --glass: rgba(38, 38, 38, .55); --glass-strong: rgba(44, 44, 44, .82); --glass-edge: rgba(255, 255, 255, .14); --glass-line: rgba(255, 255, 255, .08); }
.glass { background: linear-gradient(180deg, var(--glass-strong), var(--glass)); -webkit-backdrop-filter: blur(24px) saturate(1.9); backdrop-filter: blur(24px) saturate(1.9); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--card); } }

.ch-conv { overflow: hidden; isolation: isolate; }
.ch-scroll { position: absolute; inset: 0; padding: var(--ch-top, 64px) 0 var(--ch-bottom, 72px); scroll-padding: var(--ch-top, 64px) 0 var(--ch-bottom, 72px); -webkit-overflow-scrolling: touch; overflow-anchor: none; }
.ch-scroll > .ch-body, .ch-scroll > .ch-older, .ch-scroll > .typing-line { transform: translateY(var(--pull, 0px)); transition: transform .45s var(--ch-spring); }
.ch-scroll.pulling > * { transition: none; }
.ch-top { position: absolute; top: 0; left: 0; right: 0; z-index: 4; border-bottom: 1px solid var(--glass-line); box-shadow: inset 0 -1px 0 var(--glass-edge); transition: box-shadow .25s ease; }
.ch-top.under { box-shadow: inset 0 -1px 0 var(--glass-edge), 0 8px 24px rgba(0, 0, 0, .08); }
.ch-top .ch-head { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; }
@media (max-width: 900px) {
  html.chat-open .topbar { display: none; }
  .chat-app.pinned .ch-top { padding-top: var(--ch-safe-top, 0px); }
}
.ch-top .ch-pinbar { background: color-mix(in srgb, var(--gold-100) 55%, transparent); border-bottom: 0; border-top: 1px solid var(--glass-line); }
.ch-compose { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 4; border-radius: 26px; border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-shadow); padding: .45rem .5rem; transition: box-shadow .25s ease, transform .3s var(--ch-spring); }
.ch-compose:focus-within { box-shadow: inset 0 1px 0 var(--glass-edge), 0 0 0 3px color-mix(in srgb, var(--brand-gold) 28%, transparent), var(--glass-shadow); }
.ch-input textarea { background: transparent; border-color: transparent; padding-left: .55rem; }
.ch-input textarea:focus { border-color: transparent; box-shadow: none; }
.ch-attach { background: color-mix(in srgb, var(--ink) 8%, transparent) !important; }
.ch-send { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 12px color-mix(in srgb, var(--brand-gold) 45%, transparent); transition: transform .35s var(--ch-spring), background .2s ease, box-shadow .2s ease; }
.ch-send:disabled { box-shadow: none; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.ch-send:not(:disabled) svg { animation: ch-send-ready .4s var(--ch-spring); }
@keyframes ch-send-ready { from { transform: scale(.5) rotate(-30deg); } to { transform: none; } }
.ch-context, .ch-pending-file { animation: ch-unfold .35s var(--ch-spring) both; }
@keyframes ch-unfold { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.ch-pending-file { background: color-mix(in srgb, var(--card) 70%, transparent); }

/* Day labels: small glass chips */
.ch-day span { display: inline-block; padding: .22rem .7rem; border-radius: 999px; background: var(--glass-strong); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); box-shadow: inset 0 1px 0 var(--glass-edge), 0 2px 8px rgba(0, 0, 0, .08); }

/* Newest-messages button: a glass bead that floats up when you scroll back */
.ch-down { bottom: calc(var(--ch-bottom, 72px) + 10px); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-shadow); opacity: 0; transform: translateY(12px) scale(.8); pointer-events: none; transition: opacity .2s ease, transform .4s var(--ch-spring); }
.ch-down.show { opacity: 1; transform: none; pointer-events: auto; }
.ch-down:active { transform: scale(.9); }

/* Pull to refresh, and earlier messages loading */
.ch-ptr { position: absolute; left: 50%; top: calc(var(--ch-top, 64px) - 40px); width: 38px; height: 38px; margin-left: -19px; border-radius: 50%; display: grid; place-items: center; z-index: 1;
  background: var(--glass-strong); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-shadow);
  transform: translateY(calc(var(--pull, 0px) * .9)); opacity: 0; transition: opacity .2s ease, transform .45s var(--ch-spring); }
.ch-scroll.pulling .ch-ptr, .ch-scroll.refreshing .ch-ptr { opacity: 1; }
.ch-scroll.pulling .ch-ptr { transition: opacity .2s ease; }
.ch-threads { --pull: 0px; }
.ch-threads > * { transform: translateY(var(--pull, 0px)); transition: transform .45s var(--ch-spring); }
.ch-threads.pulling > * { transition: none; }
.ch-threads.refreshing::before, .ch-threads.pulling::before { content: ""; position: sticky; top: 8px; display: block; width: 26px; height: 26px; margin: 0 auto -26px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--brand-gold) 25%, transparent); border-top-color: var(--brand-gold); animation: ch-rot .8s linear infinite; }
.ch-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--brand-gold) 25%, transparent); border-top-color: var(--brand-gold); }
.ch-scroll.armed .ch-spin, .ch-scroll.refreshing .ch-spin, .ch-older.on .ch-spin { animation: ch-rot .8s linear infinite; }
@keyframes ch-rot { to { transform: rotate(360deg); } }
.ch-older { display: flex; justify-content: center; align-items: center; gap: .5rem; height: 34px; font-size: .74rem; color: var(--muted); opacity: 0; transition: opacity .2s ease; }
.ch-older.on { opacity: 1; }

/* Motion: messages land with a little spring; yours rise from the box */
.ch-row.arrive { animation: ch-in .5s var(--ch-spring) both; }
.ch-row.sent { animation: ch-sent .5s var(--ch-spring) both; transform-origin: 100% 100%; }
@keyframes ch-in { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ch-sent { from { opacity: 0; transform: translateY(26px) scale(.86); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
.ch-tap { animation: ch-pop .45s var(--ch-spring) both; }
@keyframes ch-pop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.ch-thread { transition: background .2s ease, transform .3s var(--ch-spring); }
.ch-thread:active { transform: scale(.98); }
.ch-bubble { transition: transform .3s var(--ch-spring), box-shadow .3s ease; }
.ch-row.lifted .ch-bubble { transform: scale(1.03); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }

/* The message menu, in glass, springing open from the message */
.ch-tapbar, .ch-acts, .ch-who { background: var(--glass-strong); -webkit-backdrop-filter: blur(26px) saturate(1.9); backdrop-filter: blur(26px) saturate(1.9); border-color: var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-shadow); }
.ch-acts button { border-bottom-color: var(--glass-line); }
.ch-acts button:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.ch-sheet-card { transition: opacity .2s ease, transform .42s var(--ch-spring); transform: translate(-50%, 26px) scale(.94); }
.ch-sheet.pop .ch-sheet-card { transform: translateY(8px) scale(.94); transform-origin: 50% 100%; }
.ch-tapbar button { transition: transform .35s var(--ch-spring), background .15s ease; }
.ch-sheet.open .ch-tapbar button { animation: ch-pop .5s var(--ch-spring) both; }
.ch-sheet.open .ch-tapbar button:nth-child(2) { animation-delay: .03s; } .ch-sheet.open .ch-tapbar button:nth-child(3) { animation-delay: .06s; }
.ch-sheet.open .ch-tapbar button:nth-child(4) { animation-delay: .09s; } .ch-sheet.open .ch-tapbar button:nth-child(5) { animation-delay: .12s; } .ch-sheet.open .ch-tapbar button:nth-child(6) { animation-delay: .15s; }
.ch-viewer img { animation: ch-zoom .45s var(--ch-spring) both; }
@keyframes ch-zoom { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }

/* Phone: a conversation slides in over the list, and back out */
@keyframes ch-slide-in { from { transform: translateX(100%); } }
@keyframes ch-slide-out-left { to { transform: translateX(-28%); opacity: .6; } }
@keyframes ch-slide-in-left { from { transform: translateX(-28%); opacity: .6; } }
@keyframes ch-slide-out { to { transform: translateX(100%); } }
html[data-ch-nav="in"]::view-transition-old(page) { animation: ch-slide-out-left .38s var(--ch-ease) both; }
html[data-ch-nav="in"]::view-transition-new(page) { animation: ch-slide-in .38s var(--ch-ease) both; box-shadow: -10px 0 30px rgba(0, 0, 0, .18); }
html[data-ch-nav="out"]::view-transition-old(page) { animation: ch-slide-out .34s var(--ch-ease) both; z-index: 2; }
html[data-ch-nav="out"]::view-transition-new(page) { animation: ch-slide-in-left .34s var(--ch-ease) both; }

@media (max-width: 760px) {
  .ch-compose { left: 8px; right: 8px; bottom: 8px; border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-row.sent, .ch-tap, .ch-sheet.open .ch-tapbar button, .ch-send:not(:disabled) svg, .ch-context, .ch-pending-file, .ch-viewer img { animation: none !important; }
  .ch-scroll > *, .ch-threads > *, .ch-down, .ch-ptr { transition: none !important; }
}

/* Messages, part two (065): mentions, voice messages, polls and RSVP cards, link cards, read-by,
   search, photos and files */
.ch-at { font-weight: 700; color: var(--gold-ink); }
.ch-row.me .ch-at { color: #f1dfa8; }
.ch-at.me { background: color-mix(in srgb, var(--brand-gold) 22%, transparent); border-radius: 6px; padding: 0 .2em; }
.ch-bubble.at-me { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-gold) 55%, transparent); }

.ch-bubble.voiceb { padding: .45rem .7rem .45rem .45rem; }
.ch-voice { display: flex; align-items: center; gap: .55rem; min-width: 210px; --played: 0%; }
.ch-play { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--brand-gold); color: #fff; transition: transform .3s var(--ch-spring); }
.ch-row.me .ch-play { background: #fff; color: var(--ch-me); }
.ch-play:active { transform: scale(.88); }
.ch-play svg { width: 16px; height: 16px; }
.ch-wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 28px; -webkit-mask: linear-gradient(90deg, #000 var(--played), rgba(0, 0, 0, .38) var(--played)); mask: linear-gradient(90deg, #000 var(--played), rgba(0, 0, 0, .38) var(--played)); }
.ch-voice:not(.on) .ch-wave { -webkit-mask: none; mask: none; opacity: .6; }
.ch-wave i { flex: 1; min-width: 2px; max-width: 4px; border-radius: 2px; background: currentColor; }
.ch-voice time { font-size: .74rem; font-variant-numeric: tabular-nums; opacity: .8; min-width: 2.4em; }

.ch-bubble.pollb { padding: .7rem; min-width: min(300px, 70vw); }
.ch-poll { display: grid; gap: .4rem; }
.ch-poll-q { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .15rem; }
.ch-poll-q svg { width: 18px; height: 18px; flex: none; margin-top: .1rem; color: var(--gold-ink); }
.ch-row.me .ch-poll-q svg { color: #f1dfa8; }
.ch-poll-q strong { font-size: .95rem; line-height: 1.3; }
.ch-opt { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; padding: .55rem .75rem; border-radius: 12px; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); background: color-mix(in srgb, currentColor 5%, transparent); color: inherit; font: inherit; font-size: .88rem; cursor: pointer; text-align: left; transition: transform .3s var(--ch-spring), border-color .2s ease; }
.ch-opt:active { transform: scale(.97); }
.ch-opt-fill { position: absolute; inset: 0 auto 0 0; width: var(--pct); background: color-mix(in srgb, var(--brand-gold) 26%, transparent); transition: width .6s var(--ch-spring); }
.ch-opt.mine { border-color: var(--brand-gold); }
.ch-opt-l { position: relative; display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.ch-opt-l svg { width: 15px; height: 15px; color: var(--brand-gold); }
.ch-opt b { position: relative; font-size: .78rem; opacity: .8; }
.ch-poll-who { justify-self: start; border: 0; background: none; color: inherit; opacity: .75; font: inherit; font-size: .76rem; padding: .15rem 0 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

.ch-link { display: block; margin: .45rem 0 .1rem; border-radius: 14px; overflow: hidden; text-decoration: none !important; color: inherit; background: color-mix(in srgb, currentColor 7%, transparent); max-width: 320px; }
.ch-link img { display: block; width: 100%; max-height: 170px; object-fit: cover; }
.ch-link span { display: grid; gap: .1rem; padding: .5rem .7rem .6rem; }
.ch-link small { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.ch-link strong { font-size: .85rem; line-height: 1.3; }
.ch-link em { font-style: normal; font-size: .76rem; opacity: .8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ch-rcpt.link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; color: var(--gold-ink); }
.ch-rcpt.link:hover { text-decoration: underline; }

/* The mic: hold to talk; the message box turns into a recorder */
.ch-mic { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform .3s var(--ch-spring), background .2s ease; }
.ch-mic svg { width: 19px; height: 19px; }
.ch-input:has(.ch-mic):not(.has-text) .ch-send { display: none; }
.ch-input.has-text .ch-mic { display: none; }
.ch-input { position: relative; }
/* A long message: the text takes the full width, the buttons sit on a row underneath. */
.ch-input { flex-wrap: wrap; row-gap: .25rem; }
.ch-input.tall textarea { order: -1; flex: 1 1 100%; max-height: none; padding: .45rem .7rem .55rem; }
.ch-input.tall .ch-send, .ch-input.tall .ch-mic { margin-left: auto; }
/* Phones, like Messages: at rest just +, the box and the mic; while writing, the box takes the
   width and the tools (templates, send later) wait on the row underneath. */
@media (max-width: 900px) {
  .ch-input:not(.tall):not(:focus-within) > .ch-ibtn:not(.ch-attach) { display: none; }
  .ch-input:focus-within textarea { order: -1; flex: 1 1 100%; max-height: none; padding: .45rem .7rem .55rem; }
  .ch-input:focus-within .ch-send, .ch-input:focus-within .ch-mic { margin-left: auto; }
}
.ch-input.recording .ch-mic { transform: scale(1.35); background: #d6453d; color: #fff; box-shadow: 0 0 0 8px color-mix(in srgb, #d6453d 22%, transparent); }
.ch-rec { position: absolute; inset: 0 48px 0 0; z-index: 2; display: flex; align-items: center; gap: .6rem; padding: 0 .6rem; border-radius: 20px; background: var(--glass-strong); transform: translateX(var(--dx, 0px)); animation: ch-unfold .3s var(--ch-spring) both; }
.ch-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #d6453d; animation: ch-blink 1s ease-in-out infinite; flex: none; }
@keyframes ch-blink { 50% { opacity: .25; } }
.ch-rec time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .9rem; min-width: 2.6em; }
.ch-rec-bars { flex: 1; display: flex; align-items: center; gap: 2px; height: 26px; color: var(--brand-gold); overflow: hidden; }
.ch-rec-bars i { flex: 1; max-width: 4px; height: 10%; border-radius: 2px; background: currentColor; transition: height .08s linear; }
.ch-rec-hint { font-size: .74rem; color: var(--muted); white-space: nowrap; }
.ch-rec.cancel { color: #d6453d; } .ch-rec.cancel .ch-rec-hint { color: #d6453d; font-weight: 700; }

/* @ people picker, above the message box */
.ch-mention { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); border-radius: 18px; background: color-mix(in srgb, var(--card) 94%, transparent) !important; padding: .3rem; display: grid; border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-shadow); animation: ch-unfold .3s var(--ch-spring) both; max-height: 260px; overflow-y: auto; }
.ch-mention button { display: flex; align-items: center; gap: .6rem; padding: .45rem .55rem; border: 0; border-radius: 12px; background: none; color: var(--ink); font: inherit; cursor: pointer; text-align: left; }
.ch-mention button.on, .ch-mention button:hover { background: color-mix(in srgb, var(--brand-gold) 16%, transparent); }
.ch-mention span { display: grid; } .ch-mention strong { font-size: .88rem; } .ch-mention small { font-size: .72rem; color: var(--muted); }

/* Panels over a conversation: who's read it, votes, a new poll, search, photos and files */
.ch-panel { position: absolute; inset: 0; z-index: 6; }
.ch-panel-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .18); opacity: 0; transition: opacity .25s ease; }
.ch-panel-card { position: absolute; top: 10px; right: 10px; bottom: 10px; width: min(380px, calc(100% - 20px)); border-radius: 22px; border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-shadow); display: flex; flex-direction: column; overflow: hidden; transform: translateX(30px) scale(.97); opacity: 0; transition: transform .45s var(--ch-spring), opacity .2s ease; }
.ch-panel.open .ch-panel-back { opacity: 1; }
.ch-panel.open .ch-panel-card { transform: none; opacity: 1; }
.ch-panel-card > header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .7rem .4rem 1rem; }
.ch-panel-card > header strong { font-size: 1rem; }
.ch-panel-body { flex: 1; overflow-y: auto; padding: 0 1rem 1rem; overscroll-behavior: contain; }
.ch-panel-lead { margin: 0 0 .8rem; font-size: .86rem; color: var(--muted); }
.ch-panel-ok { margin: 0 0 .6rem; font-weight: 600; color: var(--ok); }
.ch-panel h4 { margin: 1rem 0 .3rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ch-nudge { width: 100%; }
.ch-people { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.ch-people li { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; }
.ch-people li span { display: grid; } .ch-people strong { font-size: .88rem; } .ch-people small { font-size: .74rem; color: var(--muted); }
.ch-tabs { margin: 0 0 .8rem; width: 100%; } .ch-tabs button { flex: 1; }
.ch-search.big { height: 40px; margin-bottom: .6rem; }
.ch-hitlist, .ch-files { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.ch-hitlist button, .ch-files button { display: flex; gap: .6rem; align-items: flex-start; width: 100%; text-align: left; padding: .55rem .5rem; border: 0; border-radius: 12px; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.ch-hitlist button:hover, .ch-files button:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.ch-hitlist button > span, .ch-files button > span { display: grid; gap: .1rem; min-width: 0; flex: 1; }
.ch-hit-top { display: flex; justify-content: space-between; gap: .5rem; } .ch-hit-top strong { font-size: .84rem; } .ch-hit-top time { font-size: .72rem; color: var(--muted); }
.ch-hit-text { font-size: .84rem; color: var(--muted); overflow-wrap: anywhere; }
.ch-hit-text mark { background: color-mix(in srgb, var(--brand-gold) 35%, transparent); color: var(--ink); border-radius: 3px; padding: 0 .1em; }
.ch-files svg { width: 22px; height: 22px; color: var(--muted); flex: none; margin-top: .1rem; }
.ch-files strong { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ch-files small { font-size: .74rem; color: var(--muted); }
.ch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.ch-grid button { aspect-ratio: 1; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--surface); cursor: zoom-in; }
.ch-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-pollform { display: grid; gap: .6rem; }
.ch-pollform label { display: grid; gap: .3rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
.ch-pollform input { font: inherit; padding: .55rem .75rem; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.ch-pollopts { display: grid; gap: .4rem; }
.ch-pollform .link-btn { justify-self: start; }
.ch-thread.typing .ch-pre { color: var(--gold-ink); font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }

@media (max-width: 760px) {
  .ch-panel-card { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 82%; transform: translateY(40px); }
  .ch-panel.form .ch-panel-card { max-height: 92%; }
}
@media (prefers-reduced-motion: reduce) { .ch-panel-card, .ch-opt-fill, .ch-rec, .ch-mention { transition: none !important; animation: none !important; } }
.ch-panel-card.glass { background: color-mix(in srgb, var(--card) 90%, transparent); }

/* Appearance reports (066): the board's queue to confirm, and sent-back reports */
.rep-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.rep-cards li { display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.rep-cards .grow { flex: 1; display: grid; gap: .1rem; min-width: 0; font-size: .9rem; }
.rep-cards .muted { font-size: .8rem; }
.rep-match { font-size: .76rem; font-weight: 600; color: var(--muted); }
.rep-match.ok { color: var(--ok); } .rep-match.warn { color: var(--warn); }
.rep-sum { display: grid; gap: .15rem; padding: .7rem .9rem; margin: 0 0 1rem; border-radius: 12px; background: var(--surface); border-left: 3px solid var(--brand-gold); }
.rep-sum p { margin: .3rem 0 0; font-size: .88rem; white-space: pre-line; }
.rep-note { display: block; margin-top: .3rem; padding: .45rem .65rem; border-radius: 10px; background: var(--warn-bg); color: var(--ink); font-size: .82rem; }
li.rep-back { background: color-mix(in srgb, var(--warn-bg) 50%, transparent); border-radius: 12px; }
li.rep-back .grow { display: grid; }
.rep-back-fields .chip-row { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .6rem; }
.when-switch label { white-space: nowrap; }

/* Group chats (067): start one, with a name, who's in it and a photo */
.ch-group.ths { background: linear-gradient(140deg, #e3d3a3, #b49b57); color: #3c3c3c; }
.ch-panel.floating { position: fixed; z-index: 450; }
.ch-newgroup { display: grid; gap: .9rem; }
.ch-ng-top { display: flex; gap: .9rem; align-items: center; }
.ch-gphoto { flex: none; display: grid; justify-items: center; gap: .3rem; cursor: pointer; }
.ch-gphoto img, .ch-gphoto > span { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: color-mix(in srgb, var(--brand-gold) 18%, transparent); color: var(--gold-ink); border: 2px solid var(--gold-line); }
.ch-gphoto > span svg { width: 28px; height: 28px; }
.ch-gphoto em { font-style: normal; font-size: .72rem; color: var(--gold-ink); font-weight: 600; }
.ch-ng-name, .ch-ng-first { flex: 1; display: grid; gap: .3rem; font-size: .78rem; font-weight: 600; color: var(--muted); }
.ch-ng-name input, .ch-ng-first textarea { font: inherit; font-size: .95rem; font-weight: 500; padding: .6rem .8rem; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.ch-ng-who { border: 0; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ch-ng-who legend { font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: .3rem; }
.ch-ng-opt { display: flex; gap: .6rem; align-items: center; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.ch-ng-opt:has(input:checked) { border-color: var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 10%, transparent); }
.ch-ng-opt input { accent-color: var(--brand-gold); }
.ch-ng-opt span { display: grid; } .ch-ng-opt strong { font-size: .9rem; } .ch-ng-opt small { font-size: .74rem; color: var(--muted); }

/* Scholarships (067) */
.sch-hero { display: flex; gap: 1.2rem; align-items: flex-start; background: linear-gradient(135deg, color-mix(in srgb, var(--brand-gold) 14%, var(--card)), var(--card)); }
.sch-hero > .crown { width: 54px; height: 54px; flex: none; }
.sch-meter { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; margin-top: .9rem; }
.sch-meter div { height: 100%; background: linear-gradient(90deg, #d6c79e, #b49b57); border-radius: inherit; }
.sch-how { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; font-size: .9rem; }
.sch-list { display: grid; gap: .8rem; }
.sch-card { display: grid; gap: .5rem; }
.sch-card.needs_changes { border-color: var(--warn-line); }
.sch-top { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; }
.sch-top h3 { margin: .15rem 0 0; }
.sch-steps { list-style: none; display: flex; gap: .4rem; margin: 0; padding: 0; }
.sch-steps li { flex: 1; font-size: .74rem; font-weight: 600; color: var(--muted); padding-top: .45rem; border-top: 4px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.sch-steps li.done { color: var(--ink); border-top-color: var(--brand-gold); }
.sch-steps li.back { border-top-color: var(--warn); color: var(--warn); }
.sch-addr { margin: 0; font-size: .82rem; }
.sch-paid { margin: 0; font-weight: 700; color: var(--ok); font-size: .88rem; }
.sch-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sch-types { display: grid; gap: .4rem; }
.sch-docs { display: grid; gap: .5rem; margin: .4rem 0 .8rem; }
.sch-doc { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .6rem .8rem; border: 1px dashed var(--line); border-radius: 12px; }
.sch-doc span { display: grid; } .sch-doc strong { font-size: .88rem; } .sch-doc small { font-size: .74rem; color: var(--muted); }
.sch-doc input { max-width: 52%; font-size: .78rem; }
.sch-kv dd { overflow-wrap: anywhere; }
.ch-ng-opt { justify-content: flex-start; text-align: left; }
.ch-ng-opt input[type=radio] { width: auto; height: auto; flex: none; margin: 0; padding: 0; }
.ch-ng-opt > span { flex: 1; min-width: 0; }

/* Messages on a phone: pinned between the top bar and the keyboard / tab bar; nothing behind it scrolls */
@media (max-width: 760px) {
  html.chat-lock, html.chat-lock body { overflow: hidden; overscroll-behavior: none; height: 100%; }
  .chat-app.pinned { position: fixed; left: 0; right: 0; margin: 0; z-index: 40; border-top: 0; transition: height .18s ease; }
  body.kb-open .tabbar { display: none; }
  body.kb-open .ch-compose { bottom: 6px; }
  .ch-thread { min-height: 64px; }
  .ch-list-head { padding: .7rem .75rem .5rem; }
  .ch-head { padding: .55rem .75rem; gap: .55rem; }
  .ch-row { gap: .35rem; }
  .ch-av { width: 28px; } .ch-mav { width: 28px; height: 28px; }
  .ch-tapbar button { width: 46px; height: 46px; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .chat-app.pinned { transition: none; } }

/* Bugs & Ideas (068) */
.bug-hero { display: grid; gap: 1rem; }
.bug-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.bug-tile { display: grid; gap: .25rem; justify-items: start; text-align: left; padding: .9rem; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; transition: transform .25s var(--ch-spring, ease), border-color .15s ease; }
.bug-tile:hover { border-color: var(--brand-gold); } .bug-tile:active { transform: scale(.97); }
.bug-tile svg { width: 24px; height: 24px; color: var(--gold-ink); }
.bug-tile.problem svg { color: var(--danger); }
.bug-tile strong { font-size: .92rem; } .bug-tile span { font-size: .76rem; color: var(--muted); }
.bug-list { display: grid; gap: .6rem; }
.bug-card { padding: 0; overflow: hidden; }
.bug-card.unread { border-color: var(--brand-gold); }
.bug-head { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .8rem .9rem; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.bug-head .grow { display: grid; min-width: 0; } .bug-head strong { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bug-head small { font-size: .74rem; color: var(--muted); }
.bug-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--gold-100); color: var(--gold-ink); }
.bug-ic.problem { background: var(--danger-bg); color: var(--danger); }
.bug-ic svg { width: 18px; height: 18px; }
.bug-new { font-size: .7rem; color: #fff; background: var(--brand-gold); border-radius: 999px; padding: .15rem .5rem; white-space: nowrap; }
.bug-body { display: grid; gap: .7rem; padding: 0 .9rem .9rem; animation: ch-unfold .3s var(--ch-spring, ease) both; }
.bug-msg { margin: 0; white-space: pre-wrap; font-size: .9rem; }
.bug-shot { max-width: 100%; max-height: 260px; border-radius: 10px; border: 1px solid var(--line); justify-self: start; }
.bug-thread { display: grid; gap: .45rem; }
.bug-say { max-width: 85%; padding: .5rem .75rem; border-radius: 14px; background: var(--surface); }
.bug-say.team { background: var(--gold-100); justify-self: start; border-bottom-left-radius: 4px; }
.bug-say.me { justify-self: end; border-bottom-right-radius: 4px; }
.bug-say small { display: block; font-size: .7rem; font-weight: 700; color: var(--muted); } .bug-say p { margin: .15rem 0 0; font-size: .88rem; white-space: pre-wrap; }
.bug-reply { display: flex; gap: .5rem; align-items: flex-end; }
.bug-reply textarea { flex: 1; font: inherit; padding: .5rem .7rem; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); resize: vertical; }
.bug-admin { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; padding-top: .6rem; border-top: 1px solid var(--line); }
.bug-admin label { display: grid; gap: .2rem; font-size: .74rem; font-weight: 600; color: var(--muted); }
@media (max-width: 600px) { .bug-tiles { grid-template-columns: 1fr; } .bug-tile { grid-template-columns: auto 1fr; align-items: center; column-gap: .7rem; } .bug-tile svg { grid-row: span 2; } }
.bug-head .grow { flex: 1; } .bug-hero h2 { font-size: 1.35rem; }
.sch-over { margin: -.3rem 0 .8rem; padding: .55rem .75rem; border-radius: 10px; font-size: .82rem; background: var(--surface); color: var(--muted); }
.sch-over.over { background: var(--warn-bg); color: var(--ink); border: 1px solid var(--warn-line); }
.sch-private { margin: .8rem 0 1rem; padding: .7rem .85rem; border-radius: 12px; font-size: .82rem; line-height: 1.45; background: var(--danger-bg); border: 1px solid var(--danger-line); color: var(--ink); }
.sch-private strong { display: block; margin-bottom: .15rem; color: var(--danger); }

/* My Impact (069): tabs, her own numbers, the year-in-review teaser */
.impact-tabs { margin: 0 0 1.2rem; }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; }
.metric-tile { display: grid; gap: .25rem; text-align: left; padding: .9rem; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .15s ease; }
.metric-tile:hover { border-color: var(--brand-gold); }
.metric-n { font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--gold-ink); }
.metric-name { font-weight: 700; font-size: .88rem; }
.metric-tile small { font-size: .74rem; color: var(--muted); }
.metric-wait { color: var(--warn) !important; }
.metric-bar { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; margin-top: .2rem; }
.metric-bar i { display: block; height: 100%; background: linear-gradient(90deg, #d6c79e, #b49b57); border-radius: inherit; }
.yir-teaser { text-align: center; display: grid; justify-items: center; gap: .3rem; padding: 2rem 1.2rem; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--brand-gold) 22%, var(--card)), var(--card) 70%); }
.yir-teaser > .crown { width: 64px; height: 64px; }
.yir-teaser-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem 2rem; margin: 0 0 1.2rem; }
.yir-teaser-stats div { display: grid; } .yir-teaser-stats b { font-family: var(--display); font-size: 2.1rem; color: var(--gold-ink); line-height: 1; } .yir-teaser-stats span { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* Share an appearance (share.js, 070) */
.share-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem; }
.share-pick { display: grid; gap: .2rem; text-align: left; padding: .8rem .9rem; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(135deg, color-mix(in srgb, var(--brand-gold) 10%, var(--card)), var(--card)); color: var(--ink); font: inherit; cursor: pointer; transition: transform .25s var(--ch-spring, ease), border-color .15s ease; }
.share-pick:hover { border-color: var(--brand-gold); } .share-pick:active { transform: scale(.97); }
.share-pick strong { font-size: .92rem; } .share-pick em { font-style: normal; font-size: .78rem; font-weight: 700; color: var(--gold-ink); }
.sh-studio { position: fixed; inset: 0; z-index: 460; display: grid; place-items: center; padding: calc(var(--sa-top) + 12px) 12px calc(var(--sa-bottom) + 12px); }
.sh-back { position: absolute; inset: 0; background: rgba(10, 10, 10, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .2s ease; }
.sh-card { position: relative; display: grid; grid-template-columns: minmax(220px, 340px) minmax(280px, 420px); gap: 1.2rem; max-height: 100%; width: min(820px, 100%); padding: 1.1rem; border-radius: 24px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; transform: translateY(20px) scale(.97); opacity: 0; transition: transform .4s var(--ch-spring, ease), opacity .2s ease; }
.sh-studio.open .sh-back { opacity: 1; } .sh-studio.open .sh-card { transform: none; opacity: 1; }
.sh-preview { align-self: start; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: 0 12px 30px rgba(0, 0, 0, .25); max-height: calc(100dvh - 80px); }
.sh-preview.post { aspect-ratio: 4 / 5; }
.sh-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sh-controls { overflow-y: auto; display: grid; gap: .75rem; align-content: start; padding-right: .2rem; max-height: calc(100dvh - 80px); }
.sh-head { display: flex; justify-content: space-between; align-items: center; }
.sh-head strong { font-size: 1.1rem; }
.sh-x { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--surface); color: var(--ink); font-size: 1.3rem; cursor: pointer; }
.sh-row { display: grid; gap: .35rem; }
.sh-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sh-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.sh-chip { padding: .4rem .75rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.sh-chip.on { border-color: var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 16%, var(--card)); }
.sh-chip.tpl { border-style: dashed; }
.sh-swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; background: linear-gradient(135deg, var(--a) 0 50%, var(--b) 50%); box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 6px var(--s); }
.sh-swatch.on { border-color: var(--brand-gold); transform: scale(1.08); }
.sh-field { display: grid; gap: .3rem; }
.sh-field input, .sh-field textarea { font: inherit; padding: .55rem .75rem; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); resize: vertical; }
.sh-tags { font-size: .76rem; color: var(--gold-ink); }
.sh-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.sh-note { margin: 0; font-size: .74rem; color: var(--muted); }
@media (max-width: 700px) {
  .sh-studio { padding: 0; place-items: stretch; }
  .sh-card { grid-template-columns: 1fr; border-radius: 0; width: 100%; height: 100%; padding: calc(var(--sa-top) + 10px) 14px calc(var(--sa-bottom) + 14px); overflow-y: auto; align-content: start; }
  .sh-preview { width: min(62vw, 260px); justify-self: center; max-height: none; }
  .sh-controls { max-height: none; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) { .sh-card, .sh-back { transition: none; } }

/* Photo viewer: pinch / double-tap to zoom, drag to pan, swipe down to close */
.ch-viewer { background: transparent; touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none; padding: 0; display: block; }
.ch-viewer-bg { position: absolute; inset: 0; background: rgba(8, 8, 8, .94); transition: opacity .2s ease; }
.ch-viewer-stage { position: absolute; inset: 0; display: grid; place-items: center; padding: calc(var(--sa-top) + 56px) 0 calc(var(--sa-bottom) + 64px); }
.ch-viewer-stage img { max-width: 100vw; max-height: 100%; object-fit: contain; border-radius: 6px; transform-origin: center; will-change: transform; -webkit-user-drag: none; }
.ch-viewer-x { z-index: 2; }
.ch-viewer-open { position: absolute; left: 50%; bottom: calc(var(--sa-bottom) + 16px); transform: translateX(-50%); z-index: 2; color: #fff; border-color: rgba(255, 255, 255, .3); }
.ch-rcpt.wait { color: var(--warn); display: inline-flex; align-items: center; gap: .25rem; }
.ch-rcpt.wait svg { width: 12px; height: 12px; }
.ch-row.pending .ch-bubble { transition: opacity .2s ease; }
.ch-img { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.ch-img img { width: 100%; height: 100%; object-fit: cover; }

/* Phones: thumb-sized controls, one-handed menus, swipe back */
@media (max-width: 760px) {
  .ch-ibtn, .ch-back { width: 44px; height: 44px; }
  .ch-input .ch-ibtn, .ch-send, .ch-mic { width: 44px; height: 44px; }
  .ch-input textarea { min-height: 44px; padding: .62rem .9rem; }
  .ch-tap { height: 30px; padding: 0 .55rem; font-size: .9rem; }
  .ch-tapbar { padding: .45rem; } .ch-tapbar button { width: 50px; height: 50px; font-size: 1.7rem; }
  .ch-acts button { min-height: 52px; font-size: 1rem; }
  .ch-sheet-card { bottom: calc(10px + var(--sa-bottom)); }
  .ch-thread { min-height: 68px; }
  .ch-opt { min-height: 44px; }
  .ch-quote { min-height: 40px; }
  .ch-play { width: 40px; height: 40px; }
  .ch-context button, .ch-pending-file button { width: 34px; height: 34px; }
  .ch-down { width: 46px; height: 46px; }
  .ch-sheet.ch-plus .ch-sheet-card { width: min(420px, calc(100vw - 24px)); }
}
.ch-conv.ch-dragging { transition: none !important; }

/* ---------- Private messages, announcements, safety (071) ---------- */
.ch-newgroup-btn, .ch-person { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--card); color: inherit; border-radius: 14px; padding: .6rem .75rem; cursor: pointer; min-height: 44px; font: inherit; }
.ch-newgroup-btn svg { width: 22px; height: 22px; color: var(--brand-gold); flex: none; }
.ch-newgroup-btn span, .ch-person span { display: grid; min-width: 0; }
.ch-newgroup-btn small, .ch-person small { font-size: .74rem; color: var(--muted); }
.ch-person { border: 0; background: transparent; padding: .35rem .2rem; border-radius: 10px; }
.ch-person:hover, .ch-newgroup-btn:hover { background: color-mix(in srgb, var(--brand-gold) 8%, transparent); }
.ch-people-pick h4 { margin: .9rem 0 .2rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ch-people-pick .ch-people li { padding: 0; }
.ch-compose.ch-readonly { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; font-size: .82rem; color: var(--muted); }
.ch-compose.ch-readonly svg { width: 20px; height: 20px; flex: none; color: var(--brand-gold); }
.ch-compose.ch-readonly strong { color: var(--ink, inherit); margin-right: .25rem; }
.ch-safety { position: relative; }
.ch-safety b { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--bad, #c0392b); color: #fff; font-size: .62rem; line-height: 16px; text-align: center; }
.ch-safety.alert { color: var(--bad, #c0392b); }
.ch-safety-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.ch-safety-list li { border: 1px solid var(--line); border-radius: 14px; padding: .7rem .8rem; display: grid; gap: .35rem; }
.ch-safety-list li.open { border-color: color-mix(in srgb, var(--warn, #c98a00) 55%, var(--line)); }
.ch-safety-list blockquote { margin: 0; padding: .4rem .6rem; border-left: 3px solid var(--line); font-size: .86rem; white-space: pre-line; overflow-wrap: anywhere; }
.ch-safety-list small { font-size: .74rem; color: var(--muted); }
.ch-safety-tools { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
.ch-ng-ann { margin: .4rem 0 .2rem; }
.quiet-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .6rem; align-items: end; }
.quiet-row .field { margin: 0; }
.quiet-board { margin-top: .6rem; }
@media (max-width: 560px) { .quiet-row { grid-template-columns: 1fr 1fr; } .quiet-row .field:first-child { grid-column: 1 / -1; } }
.ch-pollform label.ch-ng-opt { display: flex; gap: .6rem; align-items: center; font-size: .9rem; color: var(--ink); }
.ch-pollform .ch-ng-opt input[type=radio] { padding: 0; border: 0; width: auto; }
.ch-pollform .ch-ng-opt strong { font-weight: 600; }

/* ---------- Storage (072) ---------- */
.sto-meter { display: grid; gap: .55rem; }
.sto-figures { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.sto-figures strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.sto-meter.big .sto-figures strong { font-size: 1.6rem; letter-spacing: -.01em; }
.sto-figures span { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.sto-pill { margin-left: auto; font-style: normal; font-size: .72rem; font-weight: 600; letter-spacing: .02em; padding: .2rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--ok, #3f9c6c) 14%, transparent); color: var(--ok, #3f9c6c); }
.sto-meter.warn .sto-pill { background: color-mix(in srgb, var(--warn, #c98a00) 16%, transparent); color: var(--warn, #c98a00); }
.sto-meter.bad .sto-pill, .sto-meter.full .sto-pill { background: color-mix(in srgb, var(--bad, #c0392b) 14%, transparent); color: var(--bad, #c0392b); }
.sto-bar { display: flex; gap: 2px; height: 10px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--muted) 16%, transparent); }
.sto-meter.big .sto-bar { height: 14px; }
.sto-bar span { display: block; height: 100%; min-width: 3px; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.sto-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
.sto-hero h2 { margin: .15rem 0 .1rem; font-size: 2rem; }
.sto-hero p { margin: 0 0 1rem; }
.sto-legend { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .5rem .9rem; }
.sto-legend li { display: grid; grid-template-columns: 10px 1fr auto; grid-template-rows: auto auto; column-gap: .6rem; align-items: center; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 12px; }
.sto-legend i { width: 10px; height: 10px; border-radius: 3px; grid-row: 1 / 3; }
.sto-legend span { display: grid; min-width: 0; }
.sto-legend strong { font-size: .86rem; }
.sto-legend span small { font-size: .72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sto-legend b { font-size: .86rem; font-variant-numeric: tabular-nums; text-align: right; }
.sto-legend .sto-count { grid-column: 3; font-size: .7rem; color: var(--muted); text-align: right; }
.sto-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.2rem; }
@media (max-width: 900px) { .sto-cols { grid-template-columns: 1fr; } }
.sto-people { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.sto-people li { display: flex; align-items: center; gap: .7rem; }
.sto-people .grow { display: grid; gap: .15rem; min-width: 0; }
.sto-people strong { font-size: .88rem; } .sto-people small { font-size: .74rem; color: var(--muted); }
.sto-people b { font-size: .84rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sto-mini { display: block; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 16%, transparent); overflow: hidden; }
.sto-mini > span { display: block; height: 100%; border-radius: inherit; background: var(--brand-gold); }
.sto-mini.warn > span { background: var(--warn, #c98a00); } .sto-mini.bad > span { background: var(--bad, #c0392b); }
.sto-line { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--muted); margin-top: .3rem; }
.sto-line .sto-mini { width: 90px; flex: none; }
.sto-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; height: 120px; align-items: end; }
.sto-months > div { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 4px; }
.sto-months > div > span { align-self: end; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--brand-gold), color-mix(in srgb, var(--brand-gold) 55%, transparent)); min-height: 0; }
.sto-months small { font-size: .66rem; color: var(--muted); text-align: center; }
.sto-files li { align-items: center; }
.sto-files b { font-size: .84rem; font-variant-numeric: tabular-nums; white-space: nowrap; margin: 0 .4rem; }
.sto-ext { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: .62rem; font-weight: 700; letter-spacing: .04em; background: color-mix(in srgb, var(--brand-gold) 14%, transparent); color: var(--brand-gold); }
.sto-files .grow { min-width: 0; } .sto-files .grow strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.sto-addons { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }
.sto-addon { border: 1px solid var(--line); border-radius: 16px; padding: 1rem; display: grid; gap: .35rem; align-content: start; background: linear-gradient(160deg, color-mix(in srgb, var(--brand-gold) 7%, transparent), transparent 60%); }
.sto-addon strong { font-size: 1.25rem; }
.sto-price { font-size: 1rem; font-weight: 600; } .sto-price small { font-weight: 400; color: var(--muted); }
.sto-addon p { margin: 0 0 .4rem; font-size: .82rem; color: var(--muted); }
.sto-addon .btn { justify-self: start; }
.sto-alert { display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; border-radius: 16px; margin-bottom: 1.2rem; border: 1px solid color-mix(in srgb, var(--warn, #c98a00) 45%, var(--line)); background: color-mix(in srgb, var(--warn, #c98a00) 9%, var(--card)); }
.sto-alert.bad, .sto-alert.full { border-color: color-mix(in srgb, var(--bad, #c0392b) 45%, var(--line)); background: color-mix(in srgb, var(--bad, #c0392b) 8%, var(--card)); }
.sto-alert > svg { width: 26px; height: 26px; flex: none; color: var(--warn, #c98a00); }
.sto-alert.bad > svg, .sto-alert.full > svg { color: var(--bad, #c0392b); }
.sto-alert > div { flex: 1; display: grid; gap: .1rem; } .sto-alert span { font-size: .84rem; color: var(--muted); }
@media (max-width: 560px) { .sto-alert { flex-wrap: wrap; } .sto-files .btn { display: none; } }
.sto-hero-top { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem 1rem; flex-wrap: wrap; margin-bottom: .9rem; font-size: .82rem; }
.sto-people .grow { flex: 1; }

/* ---------- Document reader (PDF, Word, text) inside the viewer ---------- */
.viewer-stage.is-doc { display: block; overflow: hidden; background: color-mix(in srgb, var(--surface) 88%, #000 12%); }
.doc-reader { position: absolute; inset: 0; display: flex; flex-direction: column; outline: none; }
.doc-tools { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: .35rem; padding: .3rem .4rem; border-radius: 999px;
  background: color-mix(in srgb, var(--card) 82%, transparent); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(0,0,0,.22); font-size: .82rem; }
.doc-tools button { min-width: 36px; height: 36px; border-radius: 999px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1rem; cursor: pointer; display: grid; place-items: center; }
.doc-tools button:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.doc-tools .doc-pct { font-size: .78rem; font-variant-numeric: tabular-nums; min-width: 52px; }
.doc-page { display: flex; align-items: center; gap: .3rem; padding: 0 .35rem 0 .2rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.doc-page input { width: 3.2em; height: 30px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-align: center; font: inherit; -moz-appearance: textfield; }
.doc-page input::-webkit-inner-spin-button { -webkit-appearance: none; }
.doc-page b { color: var(--ink); font-weight: 600; }
.doc-zoom { display: flex; align-items: center; border-left: 1px solid var(--line); border-right: 1px solid var(--line); padding: 0 .2rem; }
.doc-find { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: .3rem; width: min(440px, calc(100% - 24px)); padding: .3rem .35rem .3rem .7rem; border-radius: 14px;
  background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.doc-find input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; outline: none; height: 32px; }
.doc-find-n { font-size: .74rem; color: var(--muted); white-space: nowrap; }
.doc-find button { width: 32px; height: 32px; border-radius: 10px; border: 0; background: transparent; color: var(--ink); font-size: 1.1rem; cursor: pointer; }
.doc-pages { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 14px 12px 84px; display: flex; flex-direction: column; align-items: center; gap: 14px; touch-action: pan-x pan-y; }
.doc-sheet { position: relative; flex: none; background: #fff; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.14); overflow: hidden; transition: box-shadow .2s ease; }
.doc-sheet:not(.drawn)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, #f4f4f4 30%, #fbfbfb 50%, #f4f4f4 70%); background-size: 200% 100%; animation: doc-shimmer 1.2s linear infinite; }
.doc-sheet canvas { width: 100%; height: 100%; display: block; }
.doc-sheet.hit { box-shadow: 0 0 0 3px var(--brand-gold), 0 8px 24px rgba(0,0,0,.14); }
.doc-pages.pinching .doc-sheet { transform: scale(var(--pinch, 1)); transform-origin: top center; transition: none; }
@keyframes doc-shimmer { to { background-position: -200% 0; } }
.doc-paper { width: min(780px, 100%); background: #fff; color: #1d1d1f; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.14); padding: clamp(1.4rem, 5vw, 3.2rem); line-height: 1.6; font-size: .95rem; overflow-wrap: anywhere; }
.doc-paper img { max-width: 100%; height: auto; }
.doc-paper table { border-collapse: collapse; width: 100%; } .doc-paper td, .doc-paper th { border: 1px solid #ddd; padding: .35rem .5rem; }
.doc-text { white-space: pre-wrap; font: .85rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; margin: 0; }
.doc-table { width: 100%; max-width: 100%; overflow: auto; background: #fff; border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.doc-table table { border-collapse: collapse; font-size: .82rem; color: #1d1d1f; }
.doc-table th, .doc-table td { border: 1px solid #e5e5e5; padding: .35rem .6rem; white-space: nowrap; text-align: left; }
.doc-table th { background: #f6f6f6; position: sticky; top: 0; }
@media (max-width: 560px) { .doc-tools { bottom: calc(10px + var(--sa-bottom, 0px)); } .doc-pages { padding: 10px 6px 84px; gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .doc-sheet:not(.drawn)::after { animation: none; } }

/* ---------- Files home (assets/drive.js, 073) ---------- */
.dv-intro { margin: 0 0 .8rem; max-width: 66ch; }
.dv-panel { padding: 1rem 1rem 1.2rem; }
.dv { position: relative; display: grid; gap: .8rem; }
.dv-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.dv-search { flex: 1 1 220px; display: flex; align-items: center; gap: .45rem; height: 40px; padding: 0 .8rem; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--muted); }
.dv-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; outline: none; }
.dv-search:focus-within { border-color: var(--brand-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-gold) 18%, transparent); }
.dv-bar select { height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: .85rem; padding: 0 .6rem; }
.dv-modes { display: inline-flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.dv-modes button { width: 40px; height: 38px; border: 0; background: var(--card); color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.dv-modes button.on { background: color-mix(in srgb, var(--brand-gold) 16%, var(--card)); color: var(--ink); }
.dv-upload { display: inline-flex; align-items: center; gap: .4rem; height: 40px; }
.dv-tabs { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; margin: 0 -.2rem; padding: 0 .2rem; }
.dv-tabs::-webkit-scrollbar { display: none; }
.dv-tabs button { flex: none; height: 34px; padding: 0 .85rem; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--muted); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.dv-tabs button.on { background: var(--ink); color: var(--card); }
.dv-tabs button:not(.on):hover { border-color: var(--line); color: var(--ink); }
.dv-folders { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .1rem; }
.dv-folders::-webkit-scrollbar { display: none; }
.dv-folders button { flex: none; display: inline-flex; align-items: center; gap: .4rem; height: 36px; padding: 0 .75rem; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: .82rem; cursor: pointer; }
.dv-folders button svg { color: var(--brand-gold); }
.dv-folders button small { color: var(--muted); font-variant-numeric: tabular-nums; }
.dv-folders button.on { border-color: var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 12%, var(--card)); }
.dv-hint { margin: 0; font-size: .8rem; color: var(--muted); }
.dv-files { list-style: none; margin: 0; padding: 0; }
.dv-files.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: .9rem; }
.dv.in-drawer .dv-files.grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.dv-item { position: relative; border-radius: 16px; cursor: pointer; outline: none; transition: transform .18s ease, box-shadow .18s ease; -webkit-touch-callout: none; user-select: none; }
.dv-files.grid .dv-item { display: grid; gap: .45rem; padding: .45rem .45rem .6rem; border: 1px solid var(--line); background: var(--card); }
.dv-files.grid .dv-item:hover { box-shadow: 0 8px 26px rgba(0,0,0,.12); transform: translateY(-1px); }
.dv-item:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-gold) 45%, transparent); }
.dv-item.selected { border-color: var(--brand-gold) !important; background: color-mix(in srgb, var(--brand-gold) 9%, var(--card)) !important; }
.dv-thumb { position: relative; aspect-ratio: 4 / 3; border-radius: 11px; overflow: hidden; background: color-mix(in srgb, var(--muted) 12%, transparent); display: grid; place-items: center; }
.dv-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
.dv-thumb img[src] { opacity: 1; }
.dv-thumb.is-pdf { background: #f3f3f3; } .dv-thumb.is-pdf img { object-fit: cover; object-position: top; }
.dv-tile { color: var(--tone, var(--muted)); background: linear-gradient(150deg, color-mix(in srgb, var(--tone, var(--muted)) 16%, transparent), color-mix(in srgb, var(--tone, var(--muted)) 5%, transparent)); }
.dv-tile b { position: absolute; left: 8px; top: 8px; font-size: .62rem; letter-spacing: .06em; padding: .15rem .4rem; border-radius: 6px; background: var(--tone, var(--muted)); color: #fff; }
.dv-tile.t-pdf { --tone: #d0473c; } .dv-tile.t-word { --tone: #2f6fd6; } .dv-tile.t-sheet { --tone: #2e9b62; } .dv-tile.t-audio { --tone: #8a6fd1; } .dv-tile.t-video { --tone: #c9a24a; } .dv-tile.t-other { --tone: #8c8c8c; }
.dv-wave { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 18px; display: flex; align-items: end; gap: 3px; opacity: .55; }
.dv-wave i { flex: 1; background: currentColor; border-radius: 2px; height: 30%; } .dv-wave i:nth-child(3n) { height: 85%; } .dv-wave i:nth-child(4n+1) { height: 55%; } .dv-wave i:nth-child(5n+2) { height: 100%; }
.dv-play { position: absolute; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dv-dur { position: absolute; right: 7px; bottom: 7px; font-size: .66rem; font-weight: 600; padding: .1rem .4rem; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; font-variant-numeric: tabular-nums; }
.dv-cap { display: grid; gap: .15rem; min-width: 0; padding: 0 .25rem; }
.dv-cap strong { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-cap small { font-size: .72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-note { font-size: .76rem; color: var(--muted); font-style: italic; }
.dv-tags { display: flex; gap: .3rem; flex-wrap: wrap; } .dv-tags:empty { display: none; }
.dv-tags span { font-size: .64rem; font-weight: 700; letter-spacing: .03em; padding: .08rem .4rem; border-radius: 6px; }
.dv-new { background: var(--brand-gold); color: #fff; } .dv-ver { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); } .dv-fold { background: color-mix(in srgb, var(--brand-gold) 14%, transparent); color: var(--ink); font-weight: 600 !important; }
.dv-check, .dv-star, .dv-more { position: absolute; z-index: 2; border: 0; cursor: pointer; display: grid; place-items: center; }
.dv-check { left: 12px; top: 12px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.88); color: transparent; box-shadow: 0 0 0 1.5px rgba(0,0,0,.25) inset; opacity: 0; transition: opacity .15s ease, background .15s ease; }
.dv-item:hover .dv-check, .dv-item.selected .dv-check, .dv-item:focus-within .dv-check { opacity: 1; }
.dv-item.selected .dv-check { background: var(--brand-gold); color: #fff; box-shadow: none; }
@media (hover: none) { .dv-check { opacity: 0; } .dv-item.selected .dv-check { opacity: 1; } }
.dv-star { right: 12px; top: 12px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.35); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .15s ease; }
.dv-item:hover .dv-star, .dv-star.on { opacity: 1; }
.dv-star.on { background: var(--brand-gold); } .dv-star.on svg { fill: currentColor; }
@media (hover: none) { .dv-star:not(.on) { display: none; } }
.dv-more { right: 6px; bottom: 6px; width: 34px; height: 34px; border-radius: 10px; background: transparent; color: var(--muted); }
.dv-more:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.dv-files.grid .dv-cap { padding-right: 2rem; }
/* List view */
.dv-files.list { display: grid; gap: 2px; }
.dv-files.list .dv-item { display: grid; grid-template-columns: 52px 1fr 40px; align-items: center; gap: .8rem; padding: .45rem .5rem; border: 1px solid transparent; }
.dv-files.list .dv-item:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.dv-files.list .dv-thumb { width: 52px; height: 52px; aspect-ratio: auto; border-radius: 10px; }
.dv-files.list .dv-tile svg { width: 22px; height: 22px; } .dv-files.list .dv-tile b, .dv-files.list .dv-wave, .dv-files.list .dv-dur, .dv-files.list .dv-play { display: none; }
.dv-files.list .dv-check { left: 18px; top: 50%; transform: translateY(-50%); }
.dv-files.list .dv-star { right: 52px; top: 50%; transform: translateY(-50%); background: transparent; color: var(--muted); backdrop-filter: none; }
.dv-files.list .dv-star.on { color: var(--brand-gold); background: transparent; }
.dv-files.list .dv-more { position: static; }
.dv-files.list .dv-cap { padding-right: 2.4rem; }
.dv-empty { display: grid; justify-items: center; gap: .4rem; text-align: center; padding: 2.4rem 1rem; border: 1.5px dashed var(--line); border-radius: 18px; color: var(--muted); }
.dv-empty svg { width: 34px; height: 34px; color: var(--brand-gold); }
.dv-empty strong { color: var(--ink); } .dv-empty span { max-width: 46ch; font-size: .86rem; } .dv-empty .btn { margin-top: .4rem; }
/* Selection bar */
.dv-selbar { position: sticky; bottom: calc(12px + var(--sa-bottom, 0px)); z-index: 5; display: flex; align-items: center; gap: .35rem; padding: .4rem .5rem; border-radius: 18px; margin-top: .4rem;
  background: color-mix(in srgb, var(--card) 85%, transparent); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border: 1px solid var(--line); box-shadow: 0 12px 34px rgba(0,0,0,.2);
  transform: translateY(20px); opacity: 0; pointer-events: none; transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s ease; }
.dv-selbar.show { transform: none; opacity: 1; pointer-events: auto; }
.dv-selbar strong { font-size: .86rem; white-space: nowrap; } .dv-selbar .grow { flex: 1; }
.dv-selbar button { display: inline-flex; align-items: center; gap: .35rem; height: 38px; padding: 0 .7rem; border-radius: 12px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.dv-selbar button:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.dv-selbar button.danger { color: var(--bad, #c0392b); }
.dv-selbar .dv-selx { width: 38px; padding: 0; justify-content: center; }
@media (max-width: 560px) { .dv-selbar button span { display: none; } .dv-selbar button { padding: 0 .55rem; } .dv-upload span { display: none; } .dv-files.grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; } .dv-bar select { max-width: 96px; } }
.dv-paper .folder-list { margin: 0; }
/* Sheets */
.dv-sheet { position: fixed; inset: 0; z-index: 150; display: flex; align-items: center; justify-content: center; }
.dv-sheet-back { position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background .2s ease; }
.dv-sheet.in .dv-sheet-back { background: rgba(0,0,0,.4); }
.dv-sheet-card { position: relative; width: min(400px, calc(100% - 24px)); max-height: min(80vh, 640px); overflow: auto; border-radius: 22px; padding: .3rem 0 .6rem;
  background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,.3);
  transform: scale(.96) translateY(8px); opacity: 0; transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s ease; }
.dv-sheet.in .dv-sheet-card { transform: none; opacity: 1; }
.dv-sheet-grab { display: none; width: 40px; height: 5px; border-radius: 999px; background: var(--line); margin: .3rem auto .2rem; }
.dv-sheet-card header { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem .9rem .3rem 1.1rem; }
.dv-sheet-card header strong { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-sheet-card header button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: none; }
.dv-sheet-body { padding: 0 .6rem; }
.dv-sheet-file { display: flex; gap: .7rem; align-items: center; padding: .3rem .5rem .6rem; }
.dv-sheet-file .dv-thumb { width: 64px; height: 64px; aspect-ratio: auto; flex: none; } .dv-sheet-file .dv-thumb b, .dv-sheet-file .dv-wave, .dv-sheet-file .dv-dur, .dv-sheet-file .dv-play { display: none; }
.dv-sheet-file span { display: grid; gap: .2rem; font-size: .8rem; color: var(--muted); } .dv-sheet-file em { color: var(--ink); }
.dv-sheet-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dv-sheet-list li { display: flex; align-items: center; gap: .3rem; }
.dv-sheet-list button { flex: 1; display: flex; align-items: center; gap: .75rem; min-height: 46px; padding: .4rem .6rem; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font: inherit; font-size: .9rem; text-align: left; cursor: pointer; }
.dv-sheet-list button:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.dv-sheet-list button svg { flex: none; color: var(--muted); } .dv-sheet-list button > span { flex: 1; display: grid; }
.dv-sheet-list button.danger, .dv-sheet-list button.danger svg { color: var(--bad, #c0392b); }
.dv-sheet-list button[aria-current] svg:last-child { color: var(--brand-gold); }
.dv-sheet-list small { font-size: .74rem; color: var(--muted); }
.dv-sheet-list .dv-mini { flex: none; width: 42px; justify-content: center; padding: 0; }
.dv-vno { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: .74rem; font-weight: 700; background: color-mix(in srgb, var(--brand-gold) 15%, transparent); }
.dv-newfolder { display: flex; gap: .4rem; padding: .6rem .3rem .2rem; }
.dv-newfolder input { flex: 1; min-width: 0; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; padding: 0 .7rem; }
.dv-sheet-msg { margin: .2rem .5rem .8rem; font-size: .9rem; } .dv-sheet-btns { display: flex; justify-content: flex-end; gap: .5rem; padding: 0 .4rem .3rem; }
.dv-viewer-acts { display: flex; align-items: center; gap: .8rem; padding: .5rem 1rem; flex-wrap: wrap; } .dv-viewer-acts .btn { display: inline-flex; align-items: center; gap: .35rem; }
@media (max-width: 560px) {
  .dv-sheet { align-items: flex-end; }
  .dv-sheet-card { width: 100%; max-height: 86vh; border-radius: 22px 22px 0 0; padding-bottom: calc(.8rem + var(--sa-bottom, 0px)); transform: translateY(100%); opacity: 1; }
  .dv-sheet-grab { display: block; }
}
@media (prefers-reduced-motion: reduce) { .dv-sheet-card, .dv-selbar, .dv-item { transition: none; } }
.btn-danger { background: var(--bad, #c0392b); color: #fff; border-color: transparent; }
.dv-bar .dv-search { width: auto; margin: 0; }
.dv-bar select { width: auto; flex: none; margin: 0; }
.dv-bar .dv-modes, .dv-bar .dv-upload { flex: none; }
.dv-thumb.no-img::after { content: ''; width: 34%; aspect-ratio: 1; opacity: .35; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m21 16-5-5-9 9'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m21 16-5-5-9 9'/%3E%3C/svg%3E") center / contain no-repeat; color: var(--muted); }
.up-tray li.waiting .up-ic { background: color-mix(in srgb, var(--warn, #c98a00) 18%, transparent); }
.up-tray li.waiting .up-ic::after { content: "⋯"; color: var(--warn, #c98a00); font-weight: 800; }
.up-tray li.waiting .up-meta { color: var(--warn, #c98a00); }
.dv, .dv > * { min-width: 0; max-width: 100%; }
.dv.in-drawer .dv-files.grid { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); }
.dv.in-drawer .dv-files.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.dv.in-drawer .dv-search { flex-basis: 100%; }
.dv.in-drawer .dv-upload { margin-left: auto; }
.doc-page > span { white-space: nowrap; }
.dv-viewer-acts { padding: .45rem 1rem; }
@media (max-width: 560px) { .viewer-title span:first-of-type { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } }

/* ---------- End of season (074) ---------- */
.sto-season-grid { display: grid; grid-template-columns: minmax(150px, 1fr) 1.4fr 1.4fr; gap: .8rem; align-items: end; }
@media (max-width: 760px) { .sto-season-grid { grid-template-columns: 1fr; } }
.sto-season .field { margin: 0; display: grid; gap: .3rem; }
.sto-season .field > span { font-size: .78rem; font-weight: 600; color: var(--muted); }
.sto-seg { display: flex; width: 100%; } .sto-seg button { flex: 1; }
.sto-carry { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .2rem .8rem; max-height: 220px; overflow: auto; padding: .2rem 0; }
.sto-season-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; margin-top: .9rem; }
.sto-season-sum > div { display: grid; gap: .15rem; padding: .7rem .9rem; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--brand-gold) 6%, transparent); }
.sto-season-sum span { font-size: .8rem; color: var(--muted); }
.dv-season { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--brand-gold) 45%, var(--line)); background: color-mix(in srgb, var(--brand-gold) 9%, var(--card)); }
.dv-season.soon { border-color: color-mix(in srgb, var(--warn, #c98a00) 55%, var(--line)); background: color-mix(in srgb, var(--warn, #c98a00) 10%, var(--card)); }
.dv-season > svg { flex: none; color: var(--brand-gold); width: 24px; height: 24px; }
.dv-season > div { flex: 1; display: grid; gap: .15rem; min-width: 0; } .dv-season strong { font-size: .9rem; } .dv-season span { font-size: .8rem; color: var(--muted); }
.dv-season .btn { flex: none; display: inline-flex; align-items: center; gap: .35rem; }
@media (max-width: 560px) { .dv-season { flex-wrap: wrap; } .dv-season .btn { width: 100%; justify-content: center; } }

/* ---------- Schedule (assets/schedule.js) ---------- */
.sc-tools { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .9rem; }
.sc-tools .chip-row { margin: 0; }
.sc-tools-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.sc-tools > .sc-tools-btns { flex: 1; flex-wrap: nowrap; }
.sc-add { margin-left: auto; white-space: nowrap; }
.sc-filter { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.sc-filter svg { width: 16px; height: 16px; }
.sc-filter.on { border-color: var(--gold-500, #b49b57); color: var(--gold-ink, #7a6224); background: var(--gold-100); }
html[data-theme="dark"] .sc-filter.on, html.dark-auto .sc-filter.on { color: var(--champ-400, #d6c79e); }
.sc-panel { padding: 1rem 1rem 1.2rem; overflow: hidden; }
.sc { --fc: var(--brand-gold); display: grid; gap: .9rem; }
.sc .fam-community { --fc: #3c3c3c; } .sc .fam-prep { --fc: #c9a24a; } .sc .fam-program { --fc: #b49b57; } .sc .fam-board { --fc: #8c8c8c; } .sc .fam-competition { --fc: #9a7b2c; }
html[data-theme="dark"] .sc .fam-community { --fc: #e2cd92; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .sc .fam-community { --fc: #e2cd92; } }
.sc-head { display: flex; align-items: center; justify-content: space-between; gap: .7rem; flex-wrap: wrap; }
.sc-nav { display: flex; align-items: center; gap: .35rem; }
.sc-title { margin: 0 .3rem; font-size: 1.15rem; min-width: 8ch; text-align: center; font-variant-numeric: tabular-nums; }
.sc-arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.sc-arrow svg { width: 18px; height: 18px; }
.sc-today { height: 34px; padding: 0 .8rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.sc-today.on { border-color: var(--brand-gold); color: var(--gold-ink, var(--brand-gold)); }
.sc-switch { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); min-width: 290px; }
.sc-switch button { position: relative; z-index: 1; height: 32px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .8rem; font-weight: 600; border-radius: 999px; cursor: pointer; transition: color .2s ease; }
.sc-switch button.on { color: var(--ink); }
.sc-switch-pill { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 4); border-radius: 999px; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.08); transform: translateX(calc(var(--i) * 100%)); transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
/* The week strip */
.sc-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; touch-action: pan-y; }
.sc-pill { display: grid; justify-items: center; gap: .15rem; padding: .45rem 0 .4rem; border-radius: 16px; border: 1px solid transparent; background: transparent; color: var(--ink); font: inherit; cursor: pointer; transition: background .2s ease, transform .15s ease; }
.sc-pill small { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sc-pill b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-size: 1rem; font-variant-numeric: tabular-nums; transition: background .2s ease, color .2s ease; }
.sc-pill i { display: flex; gap: 3px; height: 6px; } .sc-pill i em { width: 5px; height: 5px; border-radius: 50%; background: var(--fc); }
.sc-pill.today b { color: var(--brand-gold); box-shadow: inset 0 0 0 1.5px var(--brand-gold); }
.sc-pill.on b { background: var(--ink); color: var(--card); box-shadow: none; }
.sc-pill.past { opacity: .55; }
.sc-pill:active { transform: scale(.94); }
@media (max-width: 560px) { .sc-pill small span { display: none; } }
/* Agenda */
.sc-agenda { display: grid; gap: .3rem; touch-action: pan-y; }
.sc-day { display: grid; }
/* The website's roomy section spacing isn't for the schedule's days and day panel. */
.sc section { padding: 0; }
.sc-dayhead { position: sticky; top: var(--topbar-h, calc(var(--sa-top, 0px) + var(--sc-stick, 0px))); z-index: 2; margin: .5rem 0 .25rem; padding: .35rem .2rem; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.sc-day.is-today .sc-dayhead { color: var(--brand-gold); }
.sc-day.is-past { opacity: .6; }
.sc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.sc-row { position: relative; display: grid; grid-template-columns: 64px 4px 1fr auto; align-items: center; gap: .75rem; padding: .7rem .8rem .7rem .6rem; border-radius: 16px; background: var(--card); border: 1px solid var(--line); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.sc-row:hover { box-shadow: 0 8px 24px rgba(0,0,0,.1); transform: translateY(-1px); }
.sc-row:active { transform: scale(.985); }
.sc-time { display: grid; justify-items: end; font-variant-numeric: tabular-nums; } .sc-time b { font-size: .84rem; } .sc-time small { font-size: .72rem; color: var(--muted); }
.sc-bar { align-self: stretch; width: 4px; border-radius: 4px; background: var(--fc); }
.sc-main { display: grid; gap: .2rem; min-width: 0; }
.sc-main strong { font-size: .94rem; line-height: 1.25; }
.sc-main > span { display: flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--muted); min-width: 0; }
.sc-main > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-main > span svg { width: 14px; height: 14px; flex: none; color: var(--fc); }
.sc-main .spots-chip { justify-self: start; }
.sc-side { display: grid; justify-items: end; gap: .3rem; }
.sc-rsvp { font-size: .7rem; font-weight: 700; padding: .18rem .5rem; border-radius: 999px; white-space: nowrap; }
.sc-rsvp.yes { background: color-mix(in srgb, var(--ok, #3f9c6c) 15%, transparent); color: var(--ok, #3f9c6c); }
.sc-rsvp.no { background: color-mix(in srgb, var(--muted) 15%, transparent); color: var(--muted); }
.sc-rsvp.wait { background: color-mix(in srgb, var(--brand-gold) 16%, transparent); color: var(--gold-ink, var(--brand-gold)); }
.sc-rsvp.ask { background: color-mix(in srgb, var(--warn, #c98a00) 15%, transparent); color: var(--warn, #c98a00); }
.sc-rsvp.full { color: var(--muted); }
.sc-wx { font-size: .74rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .sc-wx:empty { display: none; }
.sc-now { position: relative; height: 0; margin: .1rem 0; list-style: none; } .sc-now span { position: absolute; left: 70px; right: 0; top: -1px; height: 2px; background: #d0473c; border-radius: 2px; }
.sc-now span::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #d0473c; }
.sc-earlier { justify-self: center; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .82rem; cursor: pointer; padding: .4rem .8rem; border-radius: 999px; }
.sc-earlier:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.sc-empty { display: grid; justify-items: center; gap: .4rem; padding: 2.4rem 1rem; text-align: center; color: var(--muted); border: 1.5px dashed var(--line); border-radius: 18px; }
.sc-empty svg { width: 30px; height: 30px; color: var(--brand-gold); } .sc-empty strong { color: var(--ink); }
.sc-free { margin-top: .6rem; }
@media (max-width: 560px) { .sc-row { grid-template-columns: 52px 3px 1fr; gap: .6rem; } .sc-side { grid-column: 3; grid-row: 2; display: flex; justify-content: flex-start; } .sc-now span { left: 58px; } }
/* Hour grids */
.sc-weekwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -1rem; padding: 0 1rem; scrollbar-width: thin; }
.sc-grid { --tc: 48px; display: grid; gap: 0; min-width: 0; }
.sc-grid.seven { min-width: 760px; }
.sc-ghead, .sc-allday { display: grid; grid-template-columns: var(--tc) repeat(var(--cols), 1fr); }
.sc-gday { display: grid; justify-items: center; gap: .1rem; padding: .3rem 0 .5rem; border: 0; background: transparent; color: var(--ink); font: inherit; cursor: pointer; border-radius: 12px; }
.sc-gday small { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .sc-gday b { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; }
.sc-gday.today b { background: var(--brand-gold); color: #fff; }
.sc-allday { border-bottom: 1px solid var(--line); padding: .3rem 0; align-items: start; }
.sc-allday > span { font-size: .66rem; color: var(--muted); padding-top: .25rem; }
.sc-allday > div { display: grid; gap: 3px; padding: 0 2px; }
.sc-chip { border: 0; text-align: left; font: inherit; font-size: .74rem; font-weight: 600; padding: .25rem .45rem; border-radius: 8px; cursor: pointer; background: color-mix(in srgb, var(--fc) 18%, var(--card)); color: var(--ink); box-shadow: inset 3px 0 0 var(--fc); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-gbody { display: grid; grid-template-columns: var(--tc) repeat(var(--cols), 1fr); max-height: min(70vh, 720px); overflow-y: auto; overscroll-behavior: contain; position: relative; }
.sc-grid.one .sc-gbody { max-height: none; }
.sc-hours span { display: block; font-size: .66rem; color: var(--muted); text-align: right; padding-right: .5rem; transform: translateY(-.45em); font-variant-numeric: tabular-nums; }
.sc-hours span:first-child { visibility: hidden; }
.sc-col { position: relative; border-left: 1px solid var(--line); background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px var(--h)); }
.sc-col.today { background-color: color-mix(in srgb, var(--brand-gold) 5%, transparent); }
.sc-block { position: absolute; z-index: 1; display: grid; align-content: start; gap: .1rem; padding: .3rem .45rem; border: 0; border-radius: 10px; text-align: left; font: inherit; cursor: pointer; overflow: hidden;
  background: color-mix(in srgb, var(--fc) 20%, var(--card)); color: var(--ink); box-shadow: inset 3px 0 0 var(--fc), 0 1px 2px rgba(0,0,0,.08); transition: transform .15s ease, box-shadow .15s ease; }
.sc-block:hover { transform: translateY(-1px); box-shadow: inset 3px 0 0 var(--fc), 0 6px 16px rgba(0,0,0,.14); z-index: 2; }
.sc-block strong { font-size: .78rem; line-height: 1.2; } .sc-block small { font-size: .68rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-block.short { grid-auto-flow: column; justify-content: start; gap: .4rem; align-items: center; } .sc-block.short small { display: none; }
.sc-going { position: absolute; right: 5px; top: 4px; font-style: normal; font-size: .7rem; color: var(--ok, #3f9c6c); font-weight: 800; }
.sc-nowline { position: absolute; left: -1px; right: 0; height: 2px; background: #d0473c; z-index: 3; pointer-events: none; } .sc-nowline::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #d0473c; }
/* Month */
.sc-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; touch-action: pan-y; }
.sc-dow { text-align: center; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-bottom: .2rem; }
.sc-cell { position: relative; min-height: 96px; display: grid; align-content: start; gap: .2rem; padding: .35rem; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.sc-cell.other { opacity: .45; }
.sc-cell .num { font-size: .8rem; font-weight: 600; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-variant-numeric: tabular-nums; }
.sc-cell.today .num { background: var(--brand-gold); color: #fff; }
.sc-cell.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sc-evs { display: grid; gap: 2px; min-width: 0; }
.sc-ev { display: block; font-size: .7rem; font-weight: 600; padding: .12rem .35rem; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: color-mix(in srgb, var(--fc) 18%, var(--card)); box-shadow: inset 2px 0 0 var(--fc); }
.sc-more { font-size: .68rem; color: var(--muted); padding-left: .3rem; }
.sc-dots { display: none; gap: 3px; justify-content: center; } .sc-dots em { width: 6px; height: 6px; border-radius: 50%; background: var(--fc); }
.sc-daypanel { margin-top: .4rem; } .sc-daypanel .sc-dayhead { position: static; background: transparent; backdrop-filter: none; }
.sc-none { margin: .2rem 0 0; font-size: .86rem; }
@media (max-width: 760px) {
  .sc-cell { min-height: 54px; justify-items: center; align-content: center; padding: .2rem; border-color: transparent; background: transparent; }
  .sc-cell .num { width: 30px; height: 30px; font-size: .9rem; }
  .sc-cell.on { box-shadow: none; } .sc-cell.on .num { background: var(--ink); color: var(--card); }
  .sc-evs { display: none; } .sc-dots { display: flex; height: 6px; }
  .sc-switch { min-width: 0; width: 100%; } .sc-head { gap: .5rem; } .sc-nav { width: 100%; justify-content: space-between; } .sc-title { flex: 1; font-size: 1.05rem; }
  .sc-panel { padding: .8rem .7rem 1rem; }
}
/* Sliding between days, weeks, months and views */
.sc-body { view-transition-name: sc-body; }
.sc-title { view-transition-name: sc-title; }
::view-transition-old(sc-body), ::view-transition-new(sc-body) { animation-duration: .32s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
html[data-sc-dir="next"]::view-transition-old(sc-body) { animation-name: sc-out-left; } html[data-sc-dir="next"]::view-transition-new(sc-body) { animation-name: sc-in-right; }
html[data-sc-dir="prev"]::view-transition-old(sc-body) { animation-name: sc-out-right; } html[data-sc-dir="prev"]::view-transition-new(sc-body) { animation-name: sc-in-left; }
html[data-sc-dir="view"]::view-transition-old(sc-body) { animation-name: sc-fade-out; } html[data-sc-dir="view"]::view-transition-new(sc-body) { animation-name: sc-fade-in; }
::view-transition-old(sc-title), ::view-transition-new(sc-title) { animation-duration: .25s; }
@keyframes sc-out-left { to { transform: translateX(-12%); opacity: 0; } } @keyframes sc-in-right { from { transform: translateX(12%); opacity: 0; } }
@keyframes sc-out-right { to { transform: translateX(12%); opacity: 0; } } @keyframes sc-in-left { from { transform: translateX(-12%); opacity: 0; } }
@keyframes sc-fade-out { to { opacity: 0; transform: scale(.985); } } @keyframes sc-fade-in { from { opacity: 0; transform: scale(1.015); } }
/* The event panel's extras */
.sc-hero-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 .8rem; }
.sc-count { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.sc-count.soon { background: color-mix(in srgb, var(--brand-gold) 18%, transparent); color: var(--gold-ink, var(--ink)); }
.sc-count.live { background: #d0473c; color: #fff; } .sc-count.live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: sc-pulse 1.4s ease-in-out infinite; }
.sc-count.past { color: var(--muted); }
@keyframes sc-pulse { 50% { opacity: .3; } }
.sc-going-row { display: flex; align-items: center; gap: .6rem; margin: 0 0 .9rem; font-size: .84rem; color: var(--muted); }
.sc-faces { display: flex; } .sc-faces > * { margin-left: -8px; box-shadow: 0 0 0 2px var(--card); border-radius: 50%; } .sc-faces > *:first-child { margin-left: 0; }
.sc-extras { display: grid; gap: .5rem; margin: 0 0 1rem; }
.sc-x { display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--brand-gold) 5%, var(--card)); }
.sc-x-ic { font-size: 1.4rem; width: 32px; text-align: center; flex: none; }
.sc-x > div { flex: 1; display: grid; gap: .1rem; min-width: 0; } .sc-x strong { font-size: .9rem; } .sc-x span { font-size: .78rem; color: var(--muted); }
.sc-x .btn { flex: none; }
@media (prefers-reduced-motion: reduce) { .sc-switch-pill, .sc-row, .sc-block, .sc-pill { transition: none; } .sc-count.live i { animation: none; } }
.sc > *, .sc-body { min-width: 0; max-width: 100%; }
.sc-grid.seven .sc-hours, .sc-grid.seven .sc-ghead > span:first-child, .sc-grid.seven .sc-allday > span { position: sticky; left: 0; z-index: 4; background: var(--card); }
.sc-next .sc-time small:first-child { color: var(--brand-gold); font-weight: 700; }
/* Schedule: clashes, staffing, create and move (6 & 7) */
.sc-switch { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.sc-switch-pill { width: calc((100% - 6px) / var(--n, 4)); }
@media (max-width: 760px) { .sc-switch button { font-size: .74rem; padding: 0 .1rem; } }
.sc-clash { font-size: .7rem; font-weight: 700; padding: .18rem .5rem; border-radius: 999px; white-space: nowrap; }
.sc-clash.overlap { background: color-mix(in srgb, #d0473c 14%, transparent); color: #c0392b; }
.sc-clash.tight { background: color-mix(in srgb, var(--warn, #c98a00) 15%, transparent); color: var(--warn, #c98a00); }
.sc-warn { position: absolute; right: 5px; bottom: 3px; font-style: normal; font-size: .72rem; color: #c0392b; }
.sc-x-clash { border-color: color-mix(in srgb, #d0473c 40%, var(--line)); background: color-mix(in srgb, #d0473c 7%, var(--card)); }
.sc-x-clash > div { gap: .45rem; } .sc-x-clash > div > strong + span { margin-top: -.3rem; }
.sc { -webkit-touch-callout: none; }
.sc-col, .sc-cell, .sc-block, .sc-ev { -webkit-user-select: none; user-select: none; }
html.sc-dragging, html.sc-dragging * { cursor: grabbing !important; }
.sc-block.dragging, .sc-ev.dragging { z-index: 20; opacity: .9; box-shadow: 0 14px 34px rgba(0,0,0,.28); transition: none; pointer-events: none; }
.sc-ghost { position: absolute; left: 2px; right: 2px; z-index: 5; border-radius: 10px; border: 2px dashed var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 14%, transparent); font-size: .72rem; font-weight: 700; padding: .2rem .45rem; color: var(--ink); pointer-events: none; }
.sc-cell.drop { border-color: var(--brand-gold) !important; background: color-mix(in srgb, var(--brand-gold) 14%, var(--card)) !important; }
.sc-staffing { display: grid; gap: 1rem; }
.sc-needs { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--warn, #c98a00) 45%, var(--line)); background: color-mix(in srgb, var(--warn, #c98a00) 9%, var(--card)); }
.sc-needs > svg { width: 24px; height: 24px; color: var(--warn, #c98a00); flex: none; } .sc-needs > div { display: grid; gap: .1rem; } .sc-needs span { font-size: .82rem; color: var(--muted); }
.sc-staff-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 900px) { .sc-staff-cols { grid-template-columns: 1fr; } }
.sc-staff-list, .sc-load { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.sc-staff { display: grid; grid-template-columns: 46px 1fr auto; gap: .8rem; align-items: center; padding: .7rem .8rem; border-radius: 16px; border: 1px solid var(--line); background: var(--card); cursor: pointer; transition: box-shadow .18s ease, transform .18s ease; }
.sc-staff:hover { box-shadow: 0 8px 24px rgba(0,0,0,.1); transform: translateY(-1px); }
.sc-staff.low { border-color: color-mix(in srgb, #d0473c 35%, var(--line)); }
.sc-staff-date { display: grid; justify-items: center; line-height: 1.1; } .sc-staff-date b { font-size: 1.2rem; } .sc-staff-date small { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sc-staff-main { display: grid; gap: .3rem; min-width: 0; } .sc-staff-main strong { font-size: .92rem; } .sc-staff-main > span { font-size: .76rem; color: var(--muted); }
.sc-staff-line { font-size: .76rem; color: var(--muted); } .sc-staff-line b { color: var(--ink); } .sc-staff-line em { font-style: normal; color: #c0392b; font-weight: 700; }
.sc-staff.ok .sc-staff-line em { color: inherit; }
.sc-fill { display: flex; height: 7px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--muted) 15%, transparent); gap: 2px; }
.sc-fill span { display: block; height: 100%; } .sc-fill .yes { background: var(--ok, #3f9c6c); } .sc-fill .wait { background: var(--brand-gold); } .sc-fill .none { background: color-mix(in srgb, var(--muted) 22%, transparent); }
.sc-staff-side { display: grid; justify-items: end; gap: .4rem; }
.sc-faces-more { font-size: .7rem; color: var(--muted); align-self: center; margin-left: .3rem; }
.sc-load li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .6rem; align-items: center; }
.sc-load li > :first-child { grid-row: 1 / 3; } .sc-load li > div { display: grid; gap: .25rem; } .sc-load strong { font-size: .86rem; } .sc-load small { grid-column: 2; font-size: .72rem; color: var(--muted); }
.sc-loadbar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--muted) 12%, transparent); }
.sc-loadbar .next { background: var(--brand-gold); } .sc-loadbar .past { background: color-mix(in srgb, var(--brand-gold) 40%, transparent); }
@media (max-width: 560px) { .sc-staff { grid-template-columns: 40px 1fr; } .sc-staff-side { grid-column: 2; justify-items: start; grid-auto-flow: column; align-items: center; } }
.dv-badge { position: absolute; left: 8px; top: 8px; font-size: .62rem; letter-spacing: .06em; padding: .15rem .4rem; border-radius: 6px; background: #d0473c; color: #fff; }
.dv-files.list .dv-badge, .dv-sheet-file .dv-badge { display: none; }

/* ---------- Website & web address (075) ---------- */
.web-panel .fieldset-title { margin-top: 1rem; }
.web-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; margin: .4rem 0 .8rem; }
.web-choice { display: grid; gap: .25rem; text-align: left; padding: .8rem .9rem; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.web-choice strong { font-size: .9rem; } .web-choice span { font-size: .78rem; color: var(--muted); }
.web-choice.on { border-color: var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 10%, var(--card)); box-shadow: inset 0 0 0 1px var(--brand-gold); }
.web-form { display: flex; gap: .6rem; align-items: end; flex-wrap: wrap; }
.web-form .field { flex: 1 1 260px; margin: 0; display: grid; gap: .3rem; } .web-form .field > span { font-size: .78rem; font-weight: 600; color: var(--muted); }
.web-none { margin: .2rem 0 0; font-size: .88rem; }
.dom-list { list-style: none; margin: 0 0 .4rem; padding: 0; display: grid; gap: .8rem; }
.dom-card { border: 1px solid var(--line); border-radius: 16px; padding: .9rem 1rem; display: grid; gap: .6rem; }
.dom-card.live { border-color: color-mix(in srgb, var(--ok, #3f9c6c) 40%, var(--line)); }
.dom-top { display: flex; justify-content: space-between; gap: .6rem; align-items: start; }
.dom-top > div { display: grid; gap: .1rem; min-width: 0; } .dom-top strong { overflow-wrap: anywhere; } .dom-top small { font-size: .76rem; color: var(--muted); }
.dom-live, .dom-detail, .dom-step { margin: 0; font-size: .86rem; } .dom-detail { color: var(--warn, #c98a00); font-weight: 600; }
.dom-records { width: 100%; font-size: .84rem; } .dom-records td, .dom-records th { padding: .45rem .5rem; vertical-align: middle; }
.dom-records code { font-size: .8rem; overflow-wrap: anywhere; } .dom-val { user-select: all; }
.dom-records tr.ok td { background: color-mix(in srgb, var(--ok, #3f9c6c) 7%, transparent); }
.dom-tools { white-space: nowrap; text-align: right; } .dom-ok { color: var(--ok, #3f9c6c); font-weight: 800; margin-right: .4rem; }
.dom-help summary { cursor: pointer; font-size: .84rem; font-weight: 600; } .dom-help ul { margin: .5rem 0; padding-left: 1.1rem; font-size: .82rem; display: grid; gap: .25rem; } .dom-help p { font-size: .78rem; margin: 0; }
.dom-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
/* Pieces for their own website (embed.js) */
.emb { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.emb-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .5rem; margin-bottom: .8rem; }
.emb-opts { display: flex; gap: .7rem; flex-wrap: wrap; align-items: end; margin-bottom: .8rem; }
.emb-opts .field { margin: 0; display: grid; gap: .3rem; } .emb-opts .field > span { font-size: .76rem; font-weight: 600; color: var(--muted); }
.emb-opts input[type=color] { width: 54px; height: 38px; padding: 2px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); }
.emb-preview { position: relative; padding: 1.6rem 1rem 1rem; border-radius: 16px; border: 1px dashed var(--line); background: #fafaf8; color: #2b2b2b; font-family: Georgia, 'Times New Roman', serif; }
.emb-preview.dark { background: #121212; }
.emb-label { position: absolute; top: .5rem; left: .8rem; font: 700 .64rem/1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #9a9a9a; }
.emb-code { position: relative; margin-top: .8rem; }
.emb-code pre { margin: 0; padding: .9rem 1rem; padding-right: 7.5rem; border-radius: 12px; background: #1d1d1f; color: #e8e2cf; font-size: .78rem; line-height: 1.5; white-space: pre-wrap; word-break: break-all; }
.emb-code .btn { position: absolute; top: .6rem; right: .6rem; }
@media (max-width: 560px) { .emb-code pre { padding-right: 1rem; padding-bottom: 3.2rem; } .emb-code .btn { top: auto; bottom: .6rem; } }

/* ---------- Dashboard 2.0 and Home 2.0 (assets/dash.js) ---------- */
.dcard { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 1.2rem 1.3rem; min-width: 0; }
.dcard-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.dcard-head h3 { margin: 0; font-size: 1.2rem; } .dcard-head .muted { font-size: .78rem; }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; align-items: start; }
.dash-cell { min-width: 0; } .dash-cell.wide { grid-column: 1 / -1; }
.dash-cell > .panel, .dash-cell > .dcard { margin: 0; height: 100%; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-foot { display: flex; justify-content: center; margin: 1.2rem 0 .4rem; }
.dash-foot .link-btn { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); } .dash-foot svg { width: 16px; height: 16px; }
.dash-pick { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .3rem; }
.dash-pick li { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.dash-pick .icon-btn { width: 30px; height: 30px; }
/* Today */
.dash-today { position: relative; overflow: hidden; cursor: pointer; padding: 1.3rem 1.4rem; background: linear-gradient(135deg, color-mix(in srgb, var(--brand-gold) 13%, var(--card)), var(--card) 60%); border-color: color-mix(in srgb, var(--brand-gold) 40%, var(--line)); margin-bottom: 1.1rem; transition: box-shadow .2s ease, transform .2s ease; }
.dash-cell .dash-today { margin-bottom: 0; }
.dash-today:hover { box-shadow: 0 14px 36px rgba(0,0,0,.1); transform: translateY(-1px); }
.today-main { display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center; }
.today-date { display: grid; justify-items: center; line-height: 1; padding: .7rem .9rem; border-radius: 16px; background: var(--card); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.today-date b { font-size: 2.2rem; letter-spacing: -.02em; } .today-date small { margin-top: .3rem; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-gold); }
.today-text { min-width: 0; display: grid; gap: .35rem; } .today-text h3 { margin: 0; font-size: 1.35rem; } .today-text p { margin: 0; color: var(--muted); font-size: .9rem; }
.today-chips { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }
.today-kind, .today-wx { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; color: var(--muted); } .today-kind svg { width: 14px; height: 14px; } .today-wx:empty { display: none; }
.today-who { display: flex; align-items: center; gap: .6rem; font-size: .82rem; color: var(--muted); } .today-who:empty { display: none; }
.today-acts { display: grid; gap: .4rem; justify-items: end; }
.today-later { list-style: none; margin: 1rem 0 0; padding: .8rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .35rem; }
.today-later li { display: grid; grid-template-columns: 70px 1fr auto; gap: .6rem; align-items: baseline; font-size: .84rem; cursor: pointer; padding: .2rem .3rem; border-radius: 8px; }
.today-later li:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.today-later span { color: var(--brand-gold); font-weight: 700; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; } .today-later small { color: var(--muted); }
.today-empty { display: flex; align-items: center; gap: 1rem; } .today-empty > svg { width: 28px; height: 28px; color: var(--brand-gold); } .today-empty div { flex: 1; display: grid; } .today-empty span { color: var(--muted); font-size: .86rem; }
.empty-today { cursor: default; }
@media (max-width: 640px) { .today-main { grid-template-columns: auto 1fr; } .today-acts { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; justify-content: start; } .today-text h3 { font-size: 1.15rem; } }
.comp-week { display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; align-items: center; background: linear-gradient(135deg, #3c3c3c, #2a2a2a); color: #fff; border-color: transparent; }
.comp-week .eyebrow { color: var(--brand-gold); } .comp-week h3 { margin: .2rem 0; font-size: 1.4rem; color: #fff; } .comp-week p { margin: 0; color: rgba(255,255,255,.7); font-size: .9rem; }
.cw-count { display: grid; justify-items: center; line-height: 1; padding: .2rem .6rem; } .cw-count b { font-size: 3.4rem; color: var(--brand-gold); letter-spacing: -.03em; } .cw-count small { margin-top: .4rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.cw-facts { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; } .cw-facts span { font-size: .74rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; background: rgba(255,255,255,.1); }
.cw-facts .warn { background: rgba(201,138,0,.25); color: #ffd27a; } .cw-facts .ok { background: rgba(63,156,108,.25); color: #9be3bd; }
.comp-week .today-later { grid-column: 1 / -1; border-color: rgba(255,255,255,.15); } .comp-week .today-later small { color: rgba(255,255,255,.6); }
/* Needs you today: actions right there */
.dcard.needs-panel { margin-bottom: 0; }
.needs-list li { display: flex; align-items: center; gap: .4rem; }
.needs-list li > a { flex: 1; min-width: 0; }
.needs-acts { display: flex; gap: .35rem; flex: none; }
@media (max-width: 560px) { .needs-list li { flex-wrap: wrap; } .needs-acts { padding: 0 0 .6rem 2.7rem; } }
/* At a glance */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; }
.stat { display: grid; gap: .25rem; align-content: start; padding: .9rem 1rem; border-radius: 14px; background: color-mix(in srgb, var(--ink) 3%, var(--card)); border: 1px solid var(--line); color: inherit; text-decoration: none; transition: border-color .15s ease; }
a.stat:hover { border-color: var(--brand-gold); }
.stat-label { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.stat b { font-size: 1.8rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat-line { font-size: .76rem; color: var(--muted); }
.dl { font-weight: 700; } .dl.up { color: var(--ok, #3f9c6c); } .dl.down { color: #c0392b; } .dl.flat { font-weight: 500; }
.spark { width: 100%; height: 30px; } .spark-line { fill: none; stroke: var(--brand-gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .spark-fill { fill: color-mix(in srgb, var(--brand-gold) 14%, transparent); } .spark-dot { fill: var(--brand-gold); } .spark-flat { stroke: var(--line); stroke-width: 2; }
.stat-goal { grid-template-columns: auto 1fr; align-items: center; column-gap: .9rem; } .stat-goal .stat-label { grid-column: 1 / -1; } .stat-goal > div { display: grid; gap: .15rem; } .stat-goal .link-btn { justify-self: start; font-size: .76rem; }
.funnel { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .3rem; }
.funnel li { position: relative; display: flex; justify-content: space-between; font-size: .8rem; padding: .25rem .5rem; border-radius: 8px; overflow: hidden; z-index: 0; }
.funnel li::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: color-mix(in srgb, var(--brand-gold) 22%, transparent); border-radius: 8px; z-index: -1; }
/* Rings */
.ring { position: relative; width: var(--size); height: var(--size); flex: none; }
.ring svg { width: 100%; height: 100%; } .ring-bg { fill: none; stroke: color-mix(in srgb, var(--ink) 9%, transparent); } .ring-fg { fill: none; stroke: var(--brand-gold); stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1); }
.ring.r2 .ring-fg { stroke: #8a6fd1; } .ring.r3 .ring-fg { stroke: #3f9c8c; } .ring.r4 .ring-fg { stroke: #d9776b; } .ring.no-goal .ring-fg { stroke: color-mix(in srgb, var(--brand-gold) 45%, transparent); }
.ring-in { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.05; }
.ring-in b { font-size: calc(var(--size) * .26); font-variant-numeric: tabular-nums; } .ring-in small { font-size: calc(var(--size) * .12); color: var(--muted); }
/* Titleholder progress cards */
.thc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.thc { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; padding: .7rem .8rem; border-radius: 14px; border: 1px solid var(--line); cursor: pointer; transition: box-shadow .18s ease, transform .18s ease; }
.thc:hover { box-shadow: 0 8px 22px rgba(0,0,0,.08); transform: translateY(-1px); }
.thc-text { display: grid; gap: .15rem; min-width: 0; } .thc-text strong { font-size: .95rem; } .thc-text small { font-size: .76rem; color: var(--brand-gold); font-weight: 700; }
.thc-facts { font-size: .78rem; color: var(--muted); } .thc-facts em { font-style: normal; color: var(--warn, #c98a00); font-weight: 700; }
.thc-next { display: flex; align-items: center; gap: .3rem; font-size: .76rem; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .thc-next svg { width: 13px; height: 13px; flex: none; }
@media (max-width: 560px) { .thc > .avatar, .thc > img { display: none; } .thc { grid-template-columns: auto 1fr; } }
/* My year */
.myyear { margin-bottom: 1.1rem; }
.my-rings { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .8rem; }
.my-ring { display: grid; justify-items: center; gap: .45rem; padding: .7rem .3rem; border-radius: 16px; color: inherit; text-decoration: none; transition: background .15s ease; }
.my-ring:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); } .my-ring > span { font-size: .78rem; font-weight: 700; color: var(--muted); }
.my-next { display: flex; align-items: center; gap: .5rem; margin: .9rem 0 0; padding: .6rem .8rem; border-radius: 12px; background: color-mix(in srgb, var(--brand-gold) 9%, transparent); font-size: .86rem; }
.my-next svg { width: 16px; height: 16px; color: var(--brand-gold); flex: none; }
/* Today's practice question */
.practice { margin-bottom: 1.1rem; background: linear-gradient(160deg, color-mix(in srgb, #8a6fd1 9%, var(--card)), var(--card) 65%); }
.pq-head { display: flex; align-items: center; gap: .5rem; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pq-head svg { width: 16px; height: 16px; color: var(--brand-gold); } .pq-head em { margin-left: auto; font-style: normal; font-weight: 700; letter-spacing: .02em; text-transform: none; color: var(--brand-gold); }
.pq-q { margin: .8rem 0 1rem; font-family: Georgia, 'Times New Roman', serif; font-size: 1.25rem; line-height: 1.4; }
.pq-acts { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .pq-acts .muted { font-size: .78rem; }
/* Contestants: the one thing to do next */
.nextstep { display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center; margin-bottom: 1.1rem; border-color: color-mix(in srgb, var(--brand-gold) 40%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--brand-gold) 10%, var(--card)), var(--card) 60%); }
.nextstep.warn, .nextstep.late { border-color: color-mix(in srgb, #c98a00 55%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, #c98a00 10%, var(--card)), var(--card) 60%); }
.nextstep.ok { border-color: color-mix(in srgb, #3f9c6c 45%, var(--line)); }
.ns-ring { position: relative; width: 84px; height: 84px; } .ns-ring svg { width: 100%; height: 100%; } .ns-ring > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.05; } .ns-ring b { font-size: 1.1rem; } .ns-ring small { font-size: .62rem; color: var(--muted); }
.ns-text { display: grid; gap: .3rem; justify-items: start; } .ns-text .eyebrow { margin: 0; } .ns-text h3 { margin: 0; font-size: 1.3rem; } .ns-text p { margin: 0 0 .4rem; color: var(--muted); font-size: .9rem; }
.ns-count { display: grid; justify-items: center; line-height: 1; padding: .2rem .6rem; border-left: 1px solid var(--line); } .ns-count b { font-size: 2.4rem; color: var(--brand-gold); } .ns-count small { margin-top: .3rem; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 640px) { .nextstep { grid-template-columns: auto 1fr; } .ns-count { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: .5rem; border-left: 0; border-top: 1px solid var(--line); padding-top: .7rem; } }
@media (prefers-reduced-motion: reduce) { .ring-fg, .dash-today, .thc { transition: none; } }

/* ---------- Settings: a section menu and one section at a time ---------- */
.settings2 { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 1.8rem; align-items: start; }
.set-nav { position: sticky; top: calc(var(--sa-top, 0px) + 1rem); display: grid; gap: .8rem; }
.set-me { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border-radius: 18px; background: var(--card); border: 1px solid var(--line); color: inherit; text-decoration: none; transition: border-color .15s ease, background .15s ease; }
.set-me > span { flex: 1; min-width: 0; display: grid; } .set-me strong { font-family: var(--display); font-size: 1.1rem; } .set-me small { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-me > i { font-style: normal; color: var(--muted); font-size: 1.3rem; }
.set-me.on { border-color: var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 8%, var(--card)); }
.set-nav ul { list-style: none; margin: 0; padding: .35rem; border-radius: 18px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 2px; }
.set-nav li button { width: 100%; display: flex; align-items: center; gap: .75rem; padding: .55rem .6rem; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background .15s ease; }
.set-nav li button:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.set-nav li button.on { background: color-mix(in srgb, var(--brand-gold) 13%, transparent); }
.set-ic { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand-gold) 15%, transparent); color: var(--gold-ink, var(--brand-gold)); }
.set-ic svg { width: 17px; height: 17px; }
.set-nav li button.on .set-ic { background: var(--brand-gold); color: #fff; }
.set-txt { flex: 1; min-width: 0; display: grid; } .set-txt strong { font-size: .9rem; font-weight: 600; } .set-txt small { font-size: .74rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-nav li i { font-style: normal; color: var(--muted); display: none; }
.set-body { min-width: 0; }
.set-head { display: flex; align-items: center; gap: .8rem; margin: 0 0 1rem; }
.set-head h2 { margin: 0; font-size: 1.6rem; }
.set-back { display: none; border: 0; background: transparent; color: var(--brand-gold); font: inherit; font-weight: 600; font-size: .95rem; padding: .4rem .2rem; cursor: pointer; }
.set-stack { display: grid; gap: 1.1rem; }
.set-stack > .panel, .set-stack > .dcard, .set-stack > form.panel { margin: 0 !important; }
.set-stack .panel { padding: 1.3rem 1.4rem; border-radius: 18px; }
.set-stack .panel-head { margin-bottom: .8rem; } .set-stack .panel-head h3 { font-size: 1.1rem; }
.set-stack .fieldset-title { margin: 1.2rem 0 .3rem; }
.set-stack .settings-list li { padding: .8rem 0; gap: 1rem; } .set-stack .settings-list li:first-child { padding-top: .2rem; }
.set-stack .settings-list .grow span { font-size: .82rem; color: var(--muted); margin-top: .1rem; }
.set-stack .modal-actions { margin-top: 1rem; }
.set-stack .settings-me strong { font-size: 1.2rem; }
@media (max-width: 760px) {
  .settings2 { display: block; }
  .settings2 .set-body { display: none; }
  .settings2.open .set-nav { display: none; }
  .settings2.open .set-body { display: block; }
  .set-nav { position: static; gap: 1rem; }
  .set-nav li button { padding: .7rem .7rem; min-height: 54px; }
  .set-nav li button.on { background: transparent; } .set-nav li button.on .set-ic { background: color-mix(in srgb, var(--brand-gold) 15%, transparent); color: var(--gold-ink, var(--brand-gold)); }
  .set-nav li + li button { border-radius: 0; box-shadow: 0 -1px 0 var(--line); }
  .set-nav li:first-child button { border-radius: 12px 12px 0 0; } .set-nav li:last-child button { border-radius: 0 0 12px 12px; }
  .set-nav li i { display: block; }
  .set-me.on { border-color: var(--line); background: var(--card); }
  .set-head { position: sticky; top: var(--sa-top, 0px); z-index: 5; margin: -.4rem -.2rem .9rem; padding: .3rem .2rem; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: grid; grid-template-columns: auto 1fr auto; }
  .set-head h2 { font-size: 1.15rem; text-align: center; } .set-head::after { content: ''; width: 80px; }
  .set-back { display: block; width: 80px; text-align: left; }
  .set-stack .panel { padding: 1rem 1rem; }
  .set-stack .settings-list li { flex-wrap: wrap; }
}
/* Going into a section and back (phone) */
html[data-set-dir] ::view-transition-old(root), html[data-set-dir] ::view-transition-new(root) { animation-duration: .3s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
html[data-set-dir="in"]::view-transition-old(root) { animation-name: sc-out-left; } html[data-set-dir="in"]::view-transition-new(root) { animation-name: sc-in-right; }
html[data-set-dir="out"]::view-transition-old(root) { animation-name: sc-out-right; } html[data-set-dir="out"]::view-transition-new(root) { animation-name: sc-in-left; }
.set-stack.solo > :first-child > .panel-head h3 { display: none; }
.set-stack.solo > :first-child > .panel-head:not(:has(> :not(h3))) { display: none; }
.set-stack.solo > :first-child > .panel-head { justify-content: flex-start; }

/* Delete my account (079): what goes and what stays */
.del-list { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .75rem .9rem; margin: 0 0 1rem; font-size: .88rem; }
.del-list strong { display: block; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.del-list ul { margin: .3rem 0 .7rem; padding-left: 1.1rem; }
.del-list ul:last-child { margin-bottom: 0; }

/* Confirm it's you (080): above any open dialog */
.reauth-back { position: fixed; inset: 0; z-index: 2000; background: rgba(40, 40, 40, .5); display: grid; place-items: center; padding: 16px; animation: fade-in .18s ease both; }
.reauth { background: var(--card); color: var(--ink); border-radius: 16px; border-top: 3px solid var(--gold-500); width: min(420px, 100%); padding: 1.4rem 1.4rem 1.1rem; box-shadow: var(--shadow); }
.reauth h2 { margin: 0 0 .5rem; font-size: 1.25rem; }
.reauth p { margin: 0 0 1rem; font-size: .92rem; line-height: 1.5; }
.reauth label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .35rem; }
.reauth input { width: 100%; font-size: 1.4rem; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; padding: .6rem; }
.reauth .reauth-msg { min-height: 1.3em; margin: .5rem 0 .3rem; font-size: .82rem; color: var(--muted); }
.reauth-actions { display: flex; gap: .6rem; justify-content: flex-end; }
.reauth-again { margin-top: .7rem; font-size: .82rem; }

/* ---------- Show night (081) ---------- */
/* Dialogs and the crowning moment open over the live show. */
.live-on .modal-back { z-index: 160; }
.live-on .crown-moment { z-index: 170; }
.live-timing { display: block; font-size: .72rem; opacity: .8; font-variant-numeric: tabular-nums; }
.live-timing b { font-weight: 600; }
.live-timing b.late { color: #ffb4a8; }
.live-timing b.early { color: #b9e5c8; }
.live-steptime { margin: .6rem 0 0; opacity: .8; font-variant-numeric: tabular-nums; }
.live-crown { margin-top: 1.2rem; font-size: 1.05rem; padding: .8rem 1.4rem; }
.live-main.overview { display: grid; gap: 1rem; align-content: start; justify-items: stretch; max-width: 980px; text-align: left; width: min(980px, 100%); justify-self: center; }
.ov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; }
.ov-kpi { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: .8rem 1rem; display: grid; gap: .15rem; min-width: 0; }
.ov-kpi > span { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.ov-kpi strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ov-kpi small { opacity: .75; font-size: .8rem; }
.ov-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.ov-bar span { display: block; height: 100%; background: var(--gold-500); transition: width .4s ease; }
.ov-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.ov-cols h3 { margin: 0 0 .5rem; font-size: .95rem; }
.ov-warn, .ov-crew { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.ov-warn li { background: rgba(255, 180, 168, .12); border-left: 3px solid #ffb4a8; padding: .5rem .7rem; border-radius: 8px; font-size: .9rem; }
.ov-crew li { display: flex; justify-content: space-between; gap: .8rem; font-size: .9rem; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: .4rem; }
.ov-crew li span { opacity: .7; text-align: right; }
.crew-link { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .7rem .8rem; margin-bottom: 1rem; overflow-wrap: anywhere; }
.crew-link code { font-size: .82rem; }
/* Contestant and parent: the show, live, on Home */
.live-card { display: flex; gap: .9rem; align-items: flex-start; border-left: 4px solid var(--gold-500); }
.live-card > div { display: grid; gap: .2rem; min-width: 0; }
.live-card strong { font-size: 1.05rem; }
.live-card-status { font-weight: 600; color: var(--gold-ink); }
.live-card.soon { background: var(--warn-bg); border-left-color: var(--warn); }
.live-card.soon .live-card-status { color: var(--warn); font-size: 1.1rem; }
.live-card.crowned { border-left-color: var(--gold-500); background: linear-gradient(135deg, var(--card), var(--warn-bg)); }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #d9443b; margin-top: .45rem; flex: none; box-shadow: 0 0 0 0 rgba(217,68,59,.5); animation: live-pulse 1.6s infinite; }
.live-card.crowned .live-dot { background: var(--gold-500); animation: none; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 10px rgba(217,68,59,0); } 100% { box-shadow: 0 0 0 0 rgba(217,68,59,0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* ---------- Check-in (083) ---------- */
.ci-me { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; margin: 0 0 1rem; border-radius: 14px; background: color-mix(in srgb, var(--brand-gold) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--brand-gold) 35%, var(--line)); }
.ci-me > div { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.ci-me span { font-size: .84rem; color: var(--muted); }
.ci-me.in { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.ci-badge { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff !important; font-weight: 700; font-size: 1rem !important; }
.ci-board { margin: 0 0 1rem; border: 1px solid var(--line); border-radius: 14px; padding: .8rem 1rem; }
.ci-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5rem; }
.ci-head span { color: var(--muted); font-size: .84rem; font-variant-numeric: tabular-nums; }
.ci-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; max-height: 320px; overflow-y: auto; }
.ci-list li { display: flex; align-items: center; gap: .7rem; padding: .35rem 0; }
.ci-list li .grow { display: grid; min-width: 0; } .ci-list small { color: var(--muted); font-size: .78rem; }
.ci-list li:not(.in) strong { color: var(--muted); font-weight: 500; }
.ci-tick { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; color: #fff; font-weight: 700; cursor: pointer; }
.ci-list li.in .ci-tick { background: var(--ok); border-color: var(--ok); }

/* ---------- My Wardrobe (085) ---------- */
.wd { display: grid; gap: 1rem; }
.wd-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.wd-private { margin: 0; font-size: .86rem; color: var(--muted); }
.wd-tabs { justify-self: start; }
.wd-chips { display: flex; gap: .45rem; flex-wrap: wrap; }
.wd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .9rem; }
.wd-card { display: grid; grid-template-rows: auto 1fr; text-align: left; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); overflow: hidden; cursor: pointer; font: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.wd-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.wd-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: var(--surface); }
.wd-emoji { display: grid; place-items: center; font-size: 2.6rem; }
.wd-photo.big { width: 120px; border-radius: 14px; }
.wd-card-body { display: grid; gap: .2rem; padding: .7rem .8rem .8rem; min-width: 0; }
.wd-card-body strong { font-size: .92rem; overflow-wrap: anywhere; }
.wd-card-body small { color: var(--muted); font-size: .76rem; }
.wd-tags { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .2rem; }
.wd-empty { display: grid; justify-items: center; gap: .4rem; text-align: center; padding: 2.2rem 1rem; border: 1px dashed var(--line); border-radius: 16px; }
.wd-empty > span:first-child { font-size: 2.2rem; } .wd-empty > span { color: var(--muted); max-width: 40ch; font-size: .9rem; }
.wd-lead { margin: 0; font-size: .9rem; }
.wd-plan { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem; }
.wd-occ { border: 1px solid var(--line); border-radius: 14px; padding: .8rem .9rem; background: var(--card); display: grid; gap: .5rem; }
.wd-occ-head { display: flex; justify-content: space-between; align-items: baseline; }
.wd-none { margin: 0; font-size: .84rem; }
.wd-occ-items { display: grid; gap: .4rem; }
.wd-mini { display: flex; align-items: center; gap: .6rem; border: 0; background: transparent; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wd-thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; background: var(--surface); font-size: 1.3rem; }
.wd-pack-head { display: flex; align-items: center; gap: 1rem; }
.wd-pack-head > div:nth-child(2) { flex: 1; display: grid; }
.wd-ring { --p: 0; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--brand-gold) calc(var(--p) * 1%), color-mix(in srgb, var(--ink) 10%, transparent) 0); }
.wd-ring span { width: 50px; height: 50px; border-radius: 50%; background: var(--card); display: grid; place-items: center; font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wd-pack { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.wd-pack label { display: flex; align-items: center; gap: .7rem; padding: .45rem .5rem; border-radius: 12px; cursor: pointer; }
.wd-pack label:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.wd-pack input { width: 22px; height: 22px; accent-color: var(--ok); flex: none; }
.wd-pack span { display: grid; } .wd-pack small { color: var(--muted); font-size: .76rem; }
.wd-pack li.on strong { text-decoration: line-through; color: var(--muted); }
.wd-photo-pick { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.wd-occ-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .2rem .8rem; }
.wd-choose { display: grid; gap: .3rem; max-height: 55vh; overflow-y: auto; }
.wd-choose-row { display: flex; align-items: center; gap: .7rem; padding: .35rem .3rem; border-radius: 10px; cursor: pointer; }
.wd-choose-row span { display: grid; } .wd-choose-row small { color: var(--muted); font-size: .76rem; }
.wd-delete { color: var(--danger); margin-top: .4rem; }
@media (max-width: 560px) { .wd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } }
/* 086: looks, fittings, quick changes, the emergency kit */
.wd-tabs-wrap { overflow-x: auto; scrollbar-width: none; margin-inline: -.2rem; padding-inline: .2rem; }
.wd-tabs-wrap::-webkit-scrollbar { display: none; }
.wd-tabs-wrap .wd-tabs { width: max-content; max-width: none; overflow: visible; }
.wd-tabs .count { display: inline-grid; place-items: center; min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; border-radius: 99px; background: var(--brand-gold); color: #111; font-size: .7rem; font-weight: 700; }
.wd-phases { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .9rem; }
.wd-phase { border: 1px solid var(--line); border-radius: 16px; padding: .8rem; background: var(--card); display: grid; gap: .6rem; }
.wd .wd-phase h3 { margin: 0; font-size: .98rem; }
.wd-phase-looks { display: grid; grid-template-columns: 1.4fr 1fr; gap: .6rem; align-items: stretch; }
.wd-look { display: grid; grid-template-rows: auto 1fr; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.wd-look.add { place-items: center; grid-template-rows: none; align-content: center; gap: .2rem; min-height: 130px; border-style: dashed; background: transparent; color: var(--muted); font-size: .84rem; }
.wd-look.add span { font-size: 1.4rem; line-height: 1; }
.wd-look.backup:not(.add) { opacity: .92; }
.wd-look-body { display: grid; gap: .1rem; padding: .5rem .6rem .6rem; min-width: 0; }
.wd-look-body small { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.wd-look-body strong { font-size: .86rem; overflow-wrap: anywhere; }
.wd-look-body span { color: var(--muted); font-size: .74rem; }
.wd-collage { display: grid; aspect-ratio: 4 / 3; gap: 2px; background: var(--line); }
.wd-collage.n2 { grid-template-columns: 1fr 1fr; } .wd-collage.n3 { grid-template-columns: 1fr 1fr; } .wd-collage.n4 { grid-template-columns: 1fr 1fr; }
.wd-collage.n3 > :first-child { grid-row: span 2; }
.wd-col-photo { width: 100%; height: 100%; min-height: 0; object-fit: cover; display: grid; place-items: center; background: var(--surface); font-size: 1.6rem; }
.wd-more { border-top: 1px solid var(--line); padding-top: .7rem; }
.wd-more > summary { cursor: pointer; font-weight: 600; font-size: .9rem; margin-bottom: .7rem; }
.wd-checks { display: grid; gap: .15rem; }
.wd-row-end { display: flex; justify-content: flex-end; }
.wd-appts { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.wd-appt { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--line); border-radius: 14px; padding: .55rem .7rem; background: var(--card); }
.wd-appt.soon { border-color: var(--brand-gold); box-shadow: inset 3px 0 0 var(--brand-gold); }
.wd-appt.done { opacity: .6; } .wd-appt.done strong { text-decoration: line-through; }
.wd-appt-done input { width: 22px; height: 22px; accent-color: var(--ok); }
.wd-appt-main { flex: 1; min-width: 0; display: grid; gap: .1rem; border: 0; background: transparent; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wd-appt-when { font-size: .74rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.wd-appt-main small { color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.wd-key { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; margin-left: .3rem; }
.wd-key i, .wd-change::before { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; }
.wd-key i.red { background: var(--danger); } .wd-key i.amber { background: var(--warn); }
.wd-change { border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: 14px; padding: .75rem .85rem; background: var(--card); display: grid; gap: .45rem; }
.wd-change::before { display: none; }
.wd-change.amber { border-left-color: var(--warn); } .wd-change.red { border-left-color: var(--danger); }
.wd-change-head { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; align-items: baseline; }
.wd-gap { font-weight: 700; font-size: .86rem; font-variant-numeric: tabular-nums; }
.wd-change.amber .wd-gap { color: var(--warn); } .wd-change.red .wd-gap { color: var(--danger); }
.wd-change-looks { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.wd-change-looks > span { display: flex; gap: .3rem; align-items: center; }
.wd-change-looks .wd-thumb { width: 36px; height: 36px; display: grid; place-items: center; font-size: 1.1rem; }
.wd-change-note { width: 100%; font: inherit; font-size: .86rem; border: 1px solid var(--line); border-radius: 10px; padding: .5rem .6rem; background: var(--surface); color: var(--ink); resize: vertical; }
.wd-prog { display: grid; gap: .4rem; margin-bottom: .6rem; }
.wd-prog-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 4.5rem; gap: .4rem; }
.wd-prog-row select, .wd-prog-row input { min-width: 0; font: inherit; font-size: .86rem; padding: .4rem .45rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); }
.wd-kit li { display: flex; align-items: center; } .wd-kit li label { flex: 1; }
.wd-x { border: 0; background: transparent; color: var(--muted); font-size: 1.2rem; width: 2rem; height: 2rem; border-radius: 50%; cursor: pointer; }
.wd-x:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--danger); }
.wd-kit-add { display: flex; gap: .4rem; margin-top: .4rem; }
.wd-kit-add input { flex: 1; min-width: 0; font: inherit; font-size: .88rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
/* Wardrobe icons: gold line icons on soft gold tiles, like the menu's */
.wd-ic { width: 1.25em; height: 1.25em; flex: none; display: block; }
.wd-tile { display: grid; place-items: center; color: var(--brand-gold); background: linear-gradient(160deg, color-mix(in srgb, var(--brand-gold) 14%, var(--card)), color-mix(in srgb, var(--brand-gold) 5%, var(--card))); }
.wd-tile .wd-ic { width: 34%; height: auto; aspect-ratio: 1; max-width: 56px; stroke-width: 1.4; }
.wd-thumb.wd-tile .wd-ic, .wd-change-looks .wd-tile .wd-ic { width: 52%; stroke-width: 1.7; }
.wd-col-photo.wd-tile .wd-ic { width: 40%; }
.wd-badge { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 10px; color: var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 13%, transparent); flex: none; }
.wd-badge .wd-ic { width: 1.05rem; height: 1.05rem; }
.wd .wd-phase h3 { display: flex; align-items: center; gap: .55rem; }
.wd-private { display: flex; align-items: flex-start; gap: .45rem; }
.wd-private .wd-ic { color: var(--brand-gold); width: 1.05rem; height: 1.05rem; margin-top: .12rem; }
.wd-empty-ic { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 16px; color: var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 12%, transparent); }
.wd-empty-ic .wd-ic { width: 1.6rem; height: 1.6rem; stroke-width: 1.6; }
.wd-look.add .wd-ic { width: 1.3rem; height: 1.3rem; color: var(--brand-gold); }
.wd-change-title { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.wd-change-title .wd-badge { width: 1.6rem; height: 1.6rem; border-radius: 8px; }
.wd-arrow { color: var(--muted); width: 1rem; height: 1rem; }
.wd-kit-title { display: flex; align-items: center; gap: .45rem; }
.wd-kit-title .wd-ic { color: var(--brand-gold); width: 1.1rem; height: 1.1rem; }
/* Look preview (088): her photo in the look, then the pieces, checklist and details */
.wd-preview { display: grid; gap: .7rem; }
.wd-preview .fieldset-title { margin: .4rem 0 0; }
.wd-preview-sub { display: flex; align-items: center; gap: .5rem; margin: -.3rem 0 0; color: var(--muted); font-size: .86rem; }
.wd-preview-sub .wd-badge { width: 1.6rem; height: 1.6rem; border-radius: 8px; }
.wd-worn { margin: 0; display: grid; gap: .4rem; justify-items: center; }
.wd-worn-img { width: auto; max-width: 100%; height: min(52vh, 440px); aspect-ratio: 3 / 4; object-fit: cover; border-radius: 18px; background: var(--surface); box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 14%, transparent); }
.wd-worn figcaption { font-size: .82rem; color: var(--muted); }
.wd-worn-add { display: grid; justify-items: center; gap: .3rem; text-align: center; padding: 1.6rem 1rem; border: 1.5px dashed color-mix(in srgb, var(--brand-gold) 55%, var(--line)); border-radius: 18px; cursor: pointer; color: var(--muted); font-size: .84rem;
  background: linear-gradient(160deg, color-mix(in srgb, var(--brand-gold) 10%, var(--card)), var(--card)); }
.wd-worn-add strong { color: var(--ink); font-size: .95rem; }
.wd-worn-add > .wd-ic { width: 2rem; height: 2rem; color: var(--brand-gold); stroke-width: 1.5; margin-bottom: .2rem; }
.wd-worn-add:hover { border-color: var(--brand-gold); }
.wd-pieces { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.wd-pieces li { display: flex; align-items: center; gap: .7rem; padding: .4rem; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.wd-pieces li > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.wd-pieces small { color: var(--muted); font-size: .76rem; }
.wd-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .88rem; }
.wd-checklist li { display: flex; align-items: center; gap: .5rem; color: var(--muted); }
.wd-checklist li .wd-ic { width: 1.1rem; height: 1.1rem; color: var(--line); }
.wd-checklist li.on { color: var(--ink); } .wd-checklist li.on .wd-ic { color: var(--ok); }
.wd-details { margin: 0; display: grid; gap: .1rem; }
.wd-details > div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.wd-details dt { color: var(--muted); } .wd-details dd { margin: 0; text-align: right; font-weight: 600; }
.wd-preview-notes { margin: 0; white-space: pre-line; font-size: .9rem; }
.wd-collage.worn { display: block; }
.wd-ro { border: 0; padding: 0; margin: 0; min-width: 0; }
.wd-ro .wd-photo-pick label, .wd-ro .link-btn { display: none; }
div.wd-look.add { cursor: default; }
@media (max-width: 560px) { .wd-phases { grid-template-columns: 1fr; } .wd-key { display: flex; margin: .3rem 0 0; } }

/* ---------- SashBoard for everyone (fan.html, 090) ---------- */
body.sb-app { background: var(--bg); min-height: 100vh; }
.sb-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + .8rem) 1.1rem .8rem; background: var(--noir-900, #3c3c3c); color: #fff; border-bottom: 2px solid var(--brand-gold); }
.sb-brand { display: inline-flex; align-items: center; gap: .55rem; }
.sb-brand .crown { width: 34px; height: 22px; }
.sb-brand .logotype { font-size: 1.05rem; }
.sb-icon-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; }
.sb-icon-btn svg { width: 20px; height: 20px; }
.sb-main { max-width: 560px; margin: 0 auto; padding: 1.2rem 1rem calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 2rem); display: grid; gap: 1rem; }
.sb-loading { text-align: center; color: var(--muted); margin-top: 3rem; }
.sb-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 1.3rem 1.2rem; display: grid; gap: .3rem; }
.sb-card h1 { font-size: 1.6rem; margin: .2rem 0 0; text-wrap: balance; }
.sb-card > p { margin: 0 0 .6rem; }
.sb-welcome { text-align: left; }
.sb-badge { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 13%, transparent); }
.sb-badge svg { width: 28px; height: 28px; }
.sb-birth { display: grid; grid-template-columns: 1.4fr 1fr; gap: .5rem; }
.sb-wide { width: 100%; margin-top: .6rem; }
.sb-fine { font-size: .78rem; margin: .4rem 0 0; }
.sb-opt { align-items: flex-start; font-size: .86rem; margin: .4rem 0 0; }
.sb-hero { padding: .4rem .2rem 0; }
.sb-hero h1 { font-size: 2rem; margin: .1rem 0 .2rem; }
.sb-hero p { margin: 0; color: var(--muted); }
.sb-soon { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.sb-soon li { display: flex; align-items: center; gap: .8rem; padding: .9rem; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.sb-soon li > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.sb-soon small { color: var(--muted); font-size: .8rem; line-height: 1.35; }
.sb-soon-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 12%, transparent); }
.sb-soon-ic svg { width: 22px; height: 22px; }
.sb-back { justify-self: start; margin-bottom: .2rem; }
.sb-list { padding: .3rem 0; gap: 0; }
.sb-list > a, .sb-list > button { display: block; text-align: left; padding: .9rem 1.2rem; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font: inherit; text-decoration: none; cursor: pointer; }
.sb-list > :first-child { border-top: 0; }
.sb-list .danger { color: var(--danger); }
/* The sign-in page's "Create a free account" (the app) */
.join-card { margin-top: 1.4rem; padding: 1rem 1.1rem; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--brand-gold) 45%, var(--line)); background: color-mix(in srgb, var(--brand-gold) 8%, var(--card)); display: grid; gap: .35rem; }
.join-card span { font-size: .88rem; color: var(--muted); }
.join-card .btn { margin-top: .4rem; }
/* SashBoard for everyone, phase B (091): tabs, feed, discover, a pageant's page, tickets */
body.sb-app .sb-main { padding-bottom: calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 5.5rem); }
.sb-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(3, 1fr);
  padding: .35rem .5rem calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + .35rem); background: color-mix(in srgb, var(--card) 92%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-top: 1px solid var(--line); }
.sb-tabs button { display: grid; justify-items: center; gap: .15rem; padding: .4rem 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: .7rem; font-weight: 600; cursor: pointer; min-height: 48px; }
.sb-tabs button svg { width: 24px; height: 24px; }
.sb-tabs button.on { color: var(--brand-gold); }
.sb-mono { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: .82rem; letter-spacing: .02em;
  color: var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--brand-gold) 30%, transparent); }
.sb-mono svg { width: 20px; height: 20px; }
.sb-mono.big { width: 64px; height: 64px; border-radius: 18px; font-size: 1.1rem; }
.sb-mono.sm { width: 34px; height: 34px; border-radius: 10px; }
.sb-follows { display: flex; gap: .7rem; overflow-x: auto; scrollbar-width: none; margin-inline: -1rem; padding: .2rem 1rem; }
.sb-follows::-webkit-scrollbar { display: none; }
.sb-follow { flex: none; width: 72px; display: grid; justify-items: center; gap: .3rem; border: 0; background: none; color: var(--ink); font: inherit; font-size: .7rem; text-align: center; cursor: pointer; }
.sb-follow > span:last-child { line-height: 1.2; max-width: 72px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sb-follow .sb-mono { width: 56px; height: 56px; border-radius: 50%; }
.sb-follow.add .sb-mono { border-style: dashed; background: transparent; }
.sb-month { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: .6rem 0 0; }
.sb-events, .sb-pgs, .sb-orders, .sb-ths, .sb-tix { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.sb-event, .sb-pg { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); font: inherit; text-align: left; }
button.sb-event { cursor: pointer; }
.sb-date { width: 46px; flex: none; display: grid; justify-items: center; padding: .3rem 0; border-radius: 12px; background: color-mix(in srgb, var(--brand-gold) 12%, transparent); line-height: 1.1; }
.sb-date b { font-size: .64rem; letter-spacing: .08em; color: var(--brand-gold); }
.sb-date span { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.sb-ev-body { flex: 1; min-width: 0; display: grid; gap: .08rem; }
.sb-ev-body strong { font-size: .95rem; line-height: 1.25; overflow-wrap: anywhere; }
.sb-ev-body > span, .sb-ev-body > small { color: var(--muted); font-size: .8rem; line-height: 1.3; }
.sb-ev-body > small:first-child { color: var(--brand-gold); font-weight: 700; font-size: .72rem; letter-spacing: .02em; }
.sb-pg { padding: .6rem .7rem; }
.sb-pg-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: .75rem; border: 0; background: none; color: inherit; font: inherit; text-align: left; padding: 0; cursor: pointer; }
.sb-search { display: flex; align-items: center; gap: .5rem; padding: 0 .9rem; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.sb-search span { color: var(--muted); display: grid; } .sb-search svg { width: 18px; height: 18px; }
.sb-search input { flex: 1; border: 0; background: none; padding: .8rem 0; font: inherit; color: var(--ink); outline: none; min-width: 0; }
.sb-chips { display: flex; gap: .4rem; }
.sb-back { justify-self: start; }
.sb-pg-head { display: flex; align-items: center; gap: .9rem; }
.sb-pg-head h1 { margin: 0; font-size: 1.6rem; line-height: 1.15; text-wrap: balance; }
.sb-pg-head p { margin: .15rem 0 0; color: var(--muted); }
.sb-pg-acts { display: flex; gap: .5rem; flex-wrap: wrap; }
.sb-pg-acts .btn { display: inline-flex; align-items: center; gap: .4rem; }
.sb-pg-acts .btn svg { width: 17px; height: 17px; }
.sb-bell.on { color: var(--brand-gold); border-color: color-mix(in srgb, var(--brand-gold) 50%, var(--line)); }
.sb-ths li { display: flex; align-items: center; gap: .7rem; }
.sb-ths li > span:last-child { display: grid; } .sb-ths small { color: var(--muted); }
.sb-order { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem; }
.sb-tix { margin: .6rem 0 .4rem; }
.sb-tix li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--line); font-size: .86rem; }
.sb-tix li > span { display: inline-flex; align-items: center; gap: .4rem; } .sb-tix svg { width: 16px; height: 16px; color: var(--brand-gold); }
.sb-past > summary { cursor: pointer; font-weight: 600; padding: .4rem 0; }
.sb-empty { justify-items: center; text-align: center; padding: 1.6rem 1.2rem; }
.sb-empty h2 { margin: .4rem 0 0; font-size: 1.2rem; }
.sb-sheet { position: fixed; inset: 0; z-index: 50; display: grid; align-items: end; background: rgba(0, 0, 0, .45); }
.sb-sheet[hidden] { display: none; }
.sb-sheet-box { position: relative; display: grid; justify-items: center; gap: .6rem; padding: 1.4rem 1.2rem calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 1.4rem); background: var(--card); border-radius: 22px 22px 0 0; text-align: center; animation: sb-up .28s cubic-bezier(.2, .9, .3, 1); }
@keyframes sb-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sb-sheet-x { position: absolute; top: .6rem; right: .8rem; width: 40px; height: 40px; border: 0; background: none; font-size: 1.6rem; color: var(--muted); cursor: pointer; }
.sb-qr { width: min(72vw, 280px); height: auto; image-rendering: pixelated; background: #fff; padding: 12px; border-radius: 14px; }
.sb-wallet { background: #000; color: #fff; border-color: #000; }
.sb-sub { font-size: 1rem; margin: 0 0 .4rem; }
.sb-switches { display: grid; gap: .2rem; }
.sb-switch { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0; cursor: pointer; }
.sb-switch > span { display: grid; } .sb-switch small { color: var(--muted); font-size: .78rem; }
.sb-switch input { width: 46px; height: 28px; appearance: none; -webkit-appearance: none; border-radius: 999px; background: color-mix(in srgb, var(--ink) 18%, transparent); position: relative; flex: none; cursor: pointer; transition: background .2s; }
.sb-switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s; }
.sb-switch input:checked { background: var(--brand-gold); } .sb-switch input:checked::after { transform: translateX(18px); }
.sb-main section { padding: 0; }   /* the website's section spacing doesn't belong in the app */
.sb-pg-acts { flex-wrap: nowrap; }
.sb-pg-acts .btn { flex: 1 1 auto; justify-content: center; padding-inline: .8rem; min-height: 44px; font-size: .88rem; white-space: nowrap; }
.sb-sheet-box > strong { padding: 0 2.4rem; line-height: 1.3; }

/* ---------- Mobile pass (Oct 2026): phone sizing, tap targets, spacing ---------- */
/* The dashboard rings: only the arc turns, never the numbers inside (an older .ring rule rotated the whole box). */
div.ring { transform: none; }
/* Needs you today: on a phone the words get the full width and the buttons sit underneath. */
@media (max-width: 560px) {
  .needs-list li > a { flex-basis: 100%; }
  .needs-acts { display: flex; gap: .4rem; flex-wrap: wrap; padding: 0 0 .7rem 2.7rem; }
}
/* Phones: things you tap are big enough for a thumb (Apple asks for 44 points), without changing the layout. */
@media (max-width: 700px), (pointer: coarse) {
  .back-btn { min-height: 40px; padding: .55rem .6rem .55rem 0; margin: -.45rem 0 -.35rem; }
  .chip { min-height: 38px; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .9rem; }
  .close-x { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; margin: -.6rem -.6rem 0 0; }
  .dv-more { min-width: 40px; min-height: 40px; }
  .road-tick { width: 36px; height: 36px; }
  /* Small round controls keep their look; their touch area reaches 44 points. */
  .pkg-check, .dv-star, .ros-tools .icon-btn, .ros2-tools .icon-btn, .drag-grip { position: relative; }
  .pkg-check::after, .dv-star::after, .ros-tools .icon-btn::after, .ros2-tools .icon-btn::after, .drag-grip::after { content: ''; position: absolute; inset: -10px; }
  /* A long row of filters is one line you swipe, not three rows. */
  .cal-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -1rem; padding: .1rem 1rem; scroll-padding-inline: 1rem; }
  .cal-filters::-webkit-scrollbar { display: none; }
  .cal-filters .chip { flex: none; }
  /* Storage: nothing past the screen edge. */
  .sto-cols > *, .sto-hero, .sto-season, .sto-more { min-width: 0; }
  .sto-cols { grid-template-columns: minmax(0, 1fr); }
}
/* The ring's small word stays readable however small the ring. */
.ring-in small { font-size: max(.62rem, 10px); }
@media (max-width: 700px) {
  /* My Profile: a compact portrait, not most of the first screen. */
  .profile-grid .photo-pick.big { display: grid; justify-items: center; gap: .6rem; }
  .profile-grid .photo-pick.big .photo-frame.portrait { width: 132px; max-width: 132px; margin: 0 auto; }
  .profile-grid .photo-pick.big .btn { width: auto !important; }
  /* Competition day: time on the left, the item beside it, however long its name. */
  .ros.compact .ros-row { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); align-items: start; column-gap: .6rem; }
  .ros.compact .ros-row .ros-time { white-space: nowrap; }
  /* Today's practice question: the label on one line, its topic under it. */
  .pq-head { flex-wrap: wrap; row-gap: .15rem; }
  .pq-head em { flex-basis: 100%; margin-left: calc(16px + .5rem); }
}
@media (max-width: 560px) {
  /* Schedule: no card around the calendar on a phone; the events are the cards, edge to edge. */
  .sc-panel { background: none; border: 0; box-shadow: none; padding: 0; overflow: visible; }
  .sc-row { grid-template-columns: 64px 3px minmax(0, 1fr); } .sc-time b { white-space: nowrap; } .sc-now span { left: 70px; }
}

/* SashBoard competition night (092): the show by phase, the pageant's notes, the results. */
.sb-live { display: grid; gap: .35rem; padding: 1.1rem 1.1rem 1rem; border-radius: 20px; color: #fff; background: var(--noir-900, #3c3c3c); border: 1px solid color-mix(in srgb, var(--brand-gold) 55%, transparent); margin-top: .2rem; }
.sb-live-tag { display: inline-flex; align-items: center; gap: .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-gold); }
.sb-live-tag svg { width: 16px; height: 16px; }
.sb-dot { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 0 rgba(229, 72, 77, .6); animation: sb-pulse 1.8s ease-out infinite; }
@keyframes sb-pulse { to { box-shadow: 0 0 0 9px rgba(229, 72, 77, 0); } }
@media (prefers-reduced-motion: reduce) { .sb-dot { animation: none; } }
.sb-live-now { font-size: 1.55rem; line-height: 1.15; text-wrap: balance; }
.sb-live-next { color: rgba(255, 255, 255, .72); font-size: .92rem; }
.sb-phases { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; gap: 4px; }
.sb-phases li { flex: 1; min-width: 0; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .2); }
.sb-phases li.past { background: color-mix(in srgb, var(--brand-gold) 60%, transparent); }
.sb-phases li.on { background: var(--brand-gold); }
.sb-phases span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sb-live .sb-lock { justify-self: start; margin-top: .5rem; color: #fff; border-color: rgba(255, 255, 255, .35); min-height: 40px; }
.sb-live.done .muted { color: rgba(255, 255, 255, .7); margin: .2rem 0 0; }
.sb-winners { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .45rem; }
.sb-winners li { display: grid; }
.sb-winners strong { font-size: 1.3rem; line-height: 1.2; }
.sb-winners small { color: var(--brand-gold); font-size: .85rem; }
.sb-live-link { display: grid; gap: .3rem; cursor: pointer; }
.sb-live-link > small { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-top: .4rem; }
.sb-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.sb-post { padding: .85rem 1rem; border-radius: 16px; border: 1px solid var(--line); background: var(--card); display: grid; gap: .2rem; }
.sb-post p { margin: 0; line-height: 1.4; overflow-wrap: anywhere; }
.sb-post small { color: var(--muted); font-size: .76rem; }
.sb-post-kind { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sb-post.delay .sb-post-kind, .sb-post.schedule .sb-post-kind { color: var(--danger); }
.sb-post.results .sb-post-kind { color: var(--brand-gold); }
.sb-post.delay, .sb-post.schedule { border-left: 3px solid var(--danger); }
.sb-post.results { border-left: 3px solid var(--brand-gold); }
.show-go .btn { white-space: nowrap; }
@media (max-width: 900px) { .show-go .btn[data-cx="crowd"] { flex-basis: 100%; order: 3; } }

/* SashBoard: an event's page and the program (093). */
.sb-chev { color: var(--muted); font-size: 1.4rem; line-height: 1; margin-left: auto; padding-left: .4rem; }
.sb-ev-head { display: flex; gap: .9rem; align-items: center; }
.sb-ev-head h1 { font-size: 1.5rem; line-height: 1.15; margin: .1rem 0; text-wrap: balance; }
.sb-ev-head small { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.sb-ev-head p { margin: 0; color: var(--muted); }
.sb-doors { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border-radius: 16px; background: color-mix(in srgb, var(--brand-gold) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--brand-gold) 40%, var(--line)); }
.sb-doors svg { width: 22px; height: 22px; color: var(--brand-gold); flex: none; }
.sb-doors span { display: grid; } .sb-doors small { color: var(--muted); font-size: .76rem; } .sb-doors strong { font-size: 1.1rem; }
.sb-mytix { gap: .5rem; } .sb-mytix .sb-live-tag svg { width: 16px; height: 16px; }
.sb-wide svg { width: 18px; height: 18px; }
.btn.sb-wide { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.sb-info { display: grid; border: 1px solid var(--line); border-radius: 20px; background: var(--card); overflow: hidden; }
.sb-info-row { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; }
.sb-info-row + .sb-info-row { border-top: 1px solid var(--line); }
.sb-info-row > svg { width: 20px; height: 20px; color: var(--brand-gold); flex: none; }
.sb-info-row > span { display: grid; gap: .1rem; min-width: 0; flex: 1; }
.sb-info-row small { color: var(--muted); font-size: .86rem; line-height: 1.4; overflow-wrap: anywhere; }
.sb-info-row .btn { flex: none; min-height: 40px; }
.sb-prog-link { display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left; padding: .9rem 1rem; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--brand-gold) 45%, var(--line)); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.sb-prog-link > span:nth-child(2) { display: grid; gap: .05rem; min-width: 0; }
.sb-prog-link small { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--brand-gold); font-weight: 700; }
.sb-prog-link strong { font-size: 1.05rem; } .sb-prog-link span span { color: var(--muted); font-size: .85rem; }
.sb-prog-link .sb-badge { width: 44px; height: 44px; border-radius: 14px; flex: none; } .sb-prog-link .sb-badge svg { width: 22px; height: 22px; }
.sb-seg { display: grid; grid-template-columns: repeat(3, 1fr); }
.sb-seg button { min-height: 44px; }
.sb-prog { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--line); border-radius: 20px; background: var(--card); overflow: hidden; }
.sb-prog li { display: grid; grid-template-columns: 4.6rem 1fr; gap: .6rem; padding: .8rem 1rem; align-items: baseline; }
.sb-prog li + li { border-top: 1px solid var(--line); }
.sb-prog-at { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .88rem; }
.sb-prog-t { display: grid; } .sb-prog-t small { display: inline-flex; align-items: center; gap: .4rem; color: #e5484d; font-size: .76rem; font-weight: 700; }
.sb-prog li.on { background: color-mix(in srgb, var(--brand-gold) 12%, var(--card)); }
.sb-cons { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.sb-con { display: grid; grid-template-columns: 76px 1fr; gap: .9rem; padding: .8rem; border-radius: 20px; border: 1px solid var(--line); background: var(--card); align-items: start; }
.sb-con img, .sb-con-ph { width: 76px; height: 96px; border-radius: 14px; object-fit: cover; background: color-mix(in srgb, var(--brand-gold) 12%, var(--card)); display: grid; place-items: center; color: var(--brand-gold); font-weight: 700; }
.sb-con > div { display: grid; gap: .1rem; min-width: 0; }
.sb-con-n { font-size: .74rem; font-weight: 700; color: var(--brand-gold); letter-spacing: .05em; }
.sb-con strong { font-size: 1.08rem; } .sb-con small { color: var(--muted); }
.sb-con p { margin: .3rem 0 0; font-size: .88rem; line-height: 1.4; overflow-wrap: anywhere; }
.sb-con p b { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.sb-sponsors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.sb-sponsors li { display: grid; gap: .5rem; justify-items: center; text-align: center; padding: 1rem .7rem; border-radius: 18px; border: 1px solid var(--line); background: var(--card); }
.sb-sponsors img { max-height: 54px; max-width: 100%; object-fit: contain; }
.sb-sponsors a { color: var(--ink); }

/* People's Choice voting page (vote.html, 094). */
.vote-wrap { display: grid; gap: 1.6rem; max-width: 760px; }
.vote-ballot h1, .vote-winner h1, .vote-thanks h1 { margin: .2rem 0 .4rem; text-wrap: balance; }
.vote-lede { margin: 0 0 1rem; color: var(--muted); }
.vote-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.vote-card { width: 100%; display: grid; gap: .5rem; padding: .6rem .6rem .8rem; border-radius: 18px; border: 2px solid var(--line); background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, transform .15s; }
.vote-card:hover:not([disabled]) { transform: translateY(-2px); }
.vote-card.on { border-color: var(--brand-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-gold) 25%, transparent); }
.vote-card[disabled] { cursor: default; opacity: .75; }
.vote-card img, .vote-ph { width: 100%; aspect-ratio: 4 / 5; border-radius: 12px; object-fit: cover; background: color-mix(in srgb, var(--brand-gold) 12%, var(--card)); display: grid; place-items: center; color: var(--brand-gold); font-weight: 800; font-size: 1.6rem; }
.vote-name { display: grid; } .vote-name small { color: var(--brand-gold); font-weight: 700; } .vote-name span { color: var(--muted); font-size: .86rem; }
.vote-form { display: grid; gap: .9rem; padding: 1.4rem; scroll-margin-top: 90px; }
.vote-form h2 { margin: 0; }
.vote-bundles { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: .5rem; }
.vote-bundles button { display: grid; justify-items: center; padding: .7rem .4rem; border-radius: 14px; border: 2px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; min-height: 64px; }
.vote-bundles button[aria-pressed="true"] { border-color: var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 14%, var(--card)); }
.vote-bundles strong { font-size: 1.3rem; } .vote-bundles small { color: var(--muted); font-size: .76rem; }
.vote-pay { min-height: 52px; font-size: 1.05rem; }
.vote-err { color: var(--danger); margin: 0; min-height: 1em; }
.vote-fine { font-size: .8rem; margin: 0; }
.vote-winner, .vote-thanks { display: grid; gap: .3rem; justify-items: center; text-align: center; padding: 2rem 1.4rem; }
.vote-winner .crown, .vote-thanks .crown { width: 56px; height: 40px; }

/* People's Choice in the app and on the board's Run of Show (094). */
.sb-vote { display: grid; gap: .25rem; width: 100%; text-align: left; padding: 1rem 1.1rem; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--brand-gold) 50%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--brand-gold) 16%, var(--card)), var(--card)); color: var(--ink); font: inherit; cursor: pointer; position: relative; }
.sb-vote[disabled] { cursor: default; }
.sb-vote strong { font-size: 1.2rem; } .sb-vote > span:not(.sb-live-tag):not(.btn) { color: var(--muted); font-size: .88rem; }
.sb-vote .btn { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); }
.sb-vote:not(.won) strong, .sb-vote:not(.won) > span:not(.sb-live-tag):not(.btn) { padding-right: 4.5rem; }
.sb-vote.won strong { font-size: 1.35rem; }
.sb-ballot { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.sb-ballot-card { display: flex; align-items: center; gap: .8rem; padding: .6rem .8rem .6rem .6rem; border-radius: 18px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; }
.sb-ballot-card img, .sb-ballot-card .sb-con-ph { width: 60px; height: 74px; flex: none; border-radius: 12px; object-fit: cover; }
.sb-bc-t { display: grid; min-width: 0; flex: 1; }
.sb-bc-t strong { font-size: 1.05rem; }
.sb-ballot-card small { color: var(--brand-gold); font-weight: 700; font-size: .74rem; } .sb-ballot-card em { font-style: normal; color: var(--muted); font-size: .85rem; }
.sb-ballot-card .btn { flex: none; }
.sb-fine { font-size: .8rem; text-align: center; margin: .2rem 0 0; }
.pc-acts { display: flex; gap: .4rem; flex-wrap: wrap; }
.pc-panel .panel-head { align-items: flex-start; gap: .8rem; flex-wrap: wrap; }
.pc-kpis { margin: 1rem 0; }
.pc-h { margin: 1.2rem 0 .6rem; font-size: .95rem; } .pc-h small { font-weight: 400; font-size: .78rem; margin-left: .4rem; }
.pc-board { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.pc-board li { display: grid; grid-template-columns: 2rem minmax(0, 1.4fr) minmax(0, 2fr) auto; gap: .7rem; align-items: center; padding: .55rem .7rem; border-radius: 12px; border: 1px solid var(--line); }
.pc-board li:first-child { border-color: color-mix(in srgb, var(--brand-gold) 55%, var(--line)); background: color-mix(in srgb, var(--brand-gold) 8%, transparent); }
.pc-board li.won { border-color: var(--brand-gold); }
.pc-rank { font-weight: 800; color: var(--muted); text-align: center; } .pc-board li:first-child .pc-rank { color: var(--brand-gold); }
.pc-who { display: grid; min-width: 0; } .pc-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pc-who small { color: var(--muted); font-size: .76rem; }
.pc-bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; } .pc-bar span { display: block; height: 100%; background: var(--brand-gold); border-radius: 4px; }
.pc-votes { display: grid; text-align: right; font-variant-numeric: tabular-nums; } .pc-votes small { color: var(--muted); font-size: .76rem; }
.pc-announce { margin-top: 1rem; }
@media (max-width: 600px) { .pc-board li { grid-template-columns: 1.6rem minmax(0, 1fr) auto; } .pc-bar { grid-column: 2 / -1; grid-row: 2; } }
.pc-share { margin-top: .9rem; }
.pc-share-in { display: flex; gap: .8rem; align-items: center; padding: .8rem 1rem; border-radius: 14px; background: color-mix(in srgb, var(--brand-gold) 12%, transparent); border: 1px solid color-mix(in srgb, var(--brand-gold) 45%, var(--line)); }
.pc-share-in > span { display: grid; flex: 1; min-width: 0; } .pc-share-in small { color: var(--muted); }

/* SashBoard show night, sideways (092): Happening now and Up next, the whole screen. */
.sb-stage { display: none; }
@media (orientation: landscape) {
  body.sb-stage-on { overflow: hidden; }
  body.sb-stage-on .sb-stage { display: grid; position: fixed; inset: 0; z-index: 200; grid-template-rows: auto 1fr auto; gap: 3vh;
    padding: max(4vh, var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) max(5vw, calc(var(--safe-area-inset-right, env(safe-area-inset-right, 0px)) + 2vw)) max(5vh, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))) max(5vw, calc(var(--safe-area-inset-left, env(safe-area-inset-left, 0px)) + 2vw));
    background: radial-gradient(120% 140% at 0% 0%, #4a4335 0%, #2b2b2b 55%, #1f1f1f 100%); color: #fff; }
  body.sb-stage-on #sbTabs, body.sb-stage-on .sb-top { visibility: hidden; }
}
.sb-stage-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sb-stage .sb-live-tag { font-size: clamp(.75rem, 3.2vh, 1rem); }
.sb-stage-clock { font-size: clamp(1rem, 5vh, 1.6rem); font-weight: 700; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .85); }
.sb-stage-cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 4vw; align-items: center; min-height: 0; }
.sb-stage-cols section { display: grid; gap: 1.5vh; min-width: 0; }
.sb-stage-cols small { font-size: clamp(.7rem, 3.4vh, 1.05rem); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-gold); }
.sb-stage-now strong { font-size: clamp(2rem, 15vh, 6rem); line-height: 1.02; text-wrap: balance; overflow-wrap: anywhere; }
.sb-stage-next { padding-left: 4vw; border-left: 1px solid rgba(255, 255, 255, .18); }
.sb-stage-next small { color: rgba(255, 255, 255, .6); }
.sb-stage-next strong { font-size: clamp(1.4rem, 9vh, 3.4rem); line-height: 1.05; color: rgba(255, 255, 255, .92); text-wrap: balance; overflow-wrap: anywhere; }
.sb-stage-cols span { font-size: clamp(.85rem, 4vh, 1.25rem); color: rgba(255, 255, 255, .65); }
.sb-stage-bar { margin: 0; } .sb-stage-bar li { height: 7px; }
.sb-stage-won { display: grid; justify-items: center; align-content: center; text-align: center; gap: .6vh; }
.sb-stage-won svg { width: clamp(2rem, 12vh, 4rem); height: auto; color: var(--brand-gold); }
.sb-stage-won small { font-size: clamp(.8rem, 4vh, 1.2rem); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-gold); font-weight: 700; }
.sb-stage-won strong { font-size: clamp(1.8rem, 12vh, 4.6rem); line-height: 1.05; }
.sb-stage-won span { font-size: clamp(.9rem, 4.5vh, 1.4rem); color: rgba(255, 255, 255, .75); margin-bottom: 1.5vh; }

/* SashBoard onboarding: intro slides, steps, pick your pageants, alerts, first-time tip. */
.sb-intro { position: relative; display: grid; gap: .9rem; text-align: center; justify-items: center; padding: 1.2rem .4rem 0; min-height: calc(100vh - 11rem); align-content: center; }
.sb-intro h1 { font-size: 1.85rem; line-height: 1.12; margin: .4rem 0 0; text-wrap: balance; }
.sb-intro p { margin: 0; color: var(--muted); max-width: 34ch; line-height: 1.5; }
.sb-intro .sb-wide { width: 100%; max-width: 420px; margin-top: .6rem; min-height: 52px; }
.sb-skip { position: absolute; top: 0; right: .2rem; color: var(--muted); font-size: .92rem; min-height: 44px; padding: 0 .4rem; }
.sb-art { width: 100%; max-width: 340px; aspect-ratio: 1.25; display: grid; place-items: center; border-radius: 28px; background: radial-gradient(120% 120% at 20% 0%, color-mix(in srgb, var(--brand-gold) 28%, var(--card)), var(--card) 70%); border: 1px solid color-mix(in srgb, var(--brand-gold) 30%, var(--line)); padding: 1.2rem; }
.sb-art-list { display: grid; gap: .5rem; width: 100%; }
.sb-art-list span { display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-size: .86rem; font-weight: 600; text-align: left; }
.sb-art-list b { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: .66rem; color: var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 14%, var(--card)); }
.sb-art-list i { margin-left: auto; font-style: normal; font-size: .7rem; padding: .25rem .55rem; border-radius: 999px; background: var(--ink); color: var(--card); }
.sb-art-list i.on { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.sb-art-live { width: 100%; display: grid; gap: .25rem; text-align: left; padding: 1rem; border-radius: 18px; background: #333; color: #fff; border: 1px solid color-mix(in srgb, var(--brand-gold) 55%, transparent); }
.sb-art-live small { display: inline-flex; align-items: center; gap: .4rem; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-gold); }
.sb-art-live strong { font-size: 1.4rem; } .sb-art-live em { font-style: normal; font-size: .84rem; color: rgba(255, 255, 255, .7); }
.sb-art-bar { display: flex; gap: 4px; margin-top: .5rem; } .sb-art-bar i { flex: 1; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--brand-gold) 55%, transparent); } .sb-art-bar i.on { background: var(--brand-gold); } .sb-art-bar i.on ~ i { background: rgba(255, 255, 255, .2); }
.sb-art-tix { width: 100%; display: flex; align-items: center; gap: .9rem; text-align: left; padding: 1rem; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.sb-art-tix > span:last-child { display: grid; } .sb-art-tix small { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-gold); } .sb-art-tix em { font-style: normal; color: var(--muted); font-size: .84rem; }
.sb-art-qr { width: 72px; height: 72px; flex: none; border-radius: 10px; background: conic-gradient(var(--ink) 25%, transparent 0 50%, var(--ink) 0 75%, transparent 0) 0 0 / 18px 18px; border: 6px solid var(--card); outline: 1px solid var(--line); opacity: .85; }
.sb-dots { display: flex; gap: .4rem; margin-top: .2rem; } .sb-dots span { width: 7px; height: 7px; border-radius: 4px; background: var(--line); transition: width .2s; } .sb-dots span.on { width: 22px; background: var(--brand-gold); }
.sb-steps { list-style: none; margin: 0 0 .2rem; padding: 0; display: flex; gap: .4rem; }
.sb-steps li { flex: 1; height: 4px; border-radius: 2px; background: var(--line); } .sb-steps li.done, .sb-steps li.on { background: var(--brand-gold); } .sb-steps li.on { opacity: .55; }
.sb-pick h1, .sb-alerts h1, .sb-welcome h1 { font-size: 1.6rem; margin: 0; }
.sb-pick-list { list-style: none; margin: .4rem 0; padding: 0; display: grid; gap: .5rem; }
.sb-pick-row { width: 100%; display: flex; align-items: center; gap: .75rem; padding: .7rem .8rem; border-radius: 16px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; min-height: 64px; }
.sb-pick-row.on { border-color: var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 9%, var(--card)); }
.sb-pick-row .sb-ev-body { flex: 1; min-width: 0; }
.sb-check { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; border: 1.5px solid var(--line); color: var(--muted); }
.sb-pick-row.on .sb-check { background: var(--brand-gold); border-color: var(--brand-gold); color: #fff; }
.sb-alerts { justify-items: start; }
.sb-alert-list { list-style: none; margin: .4rem 0 .8rem; padding: 0; display: grid; gap: .8rem; }
.sb-alert-list li { display: flex; gap: .75rem; align-items: flex-start; } .sb-alert-list svg { width: 22px; height: 22px; flex: none; color: var(--brand-gold); margin-top: .1rem; }
.sb-alert-list span { display: grid; } .sb-alert-list small { color: var(--muted); font-size: .86rem; }
.sb-center { justify-self: center; min-height: 44px; }
.sb-tip { display: flex; align-items: center; gap: .75rem; padding: .8rem .9rem; border-radius: 16px; background: color-mix(in srgb, var(--brand-gold) 11%, var(--card)); border: 1px solid color-mix(in srgb, var(--brand-gold) 40%, var(--line)); }
.sb-tip > span:nth-child(2) { display: grid; flex: 1; min-width: 0; } .sb-tip small { color: var(--muted); font-size: .84rem; line-height: 1.35; }
.sb-tip-ic svg { width: 24px; height: 24px; color: var(--brand-gold); }

/* Sign in: who it's for, welcome back, the code, and what to do next. */
.auth-roles { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.auth-roles li { padding: .35rem .8rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); font-size: .82rem; color: rgba(255, 255, 255, .85); }
.welcome-back { display: grid; grid-template-columns: auto 1fr; gap: .9rem 1rem; align-items: center; padding: 1.2rem; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--brand-gold) 45%, var(--line)); background: color-mix(in srgb, var(--brand-gold) 8%, var(--card)); margin-bottom: .4rem; }
.welcome-back > div { display: grid; min-width: 0; } .welcome-back small { color: var(--muted); font-size: .8rem; } .welcome-back strong { font-size: 1.05rem; overflow-wrap: anywhere; }
.wb-avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; color: var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 16%, var(--card)); }
.welcome-back .btn { grid-column: 1 / -1; min-height: 50px; }
.welcome-back .link-btn { grid-column: 1 / -1; justify-self: center; min-height: 40px; }
.code-input { min-height: 60px; font-size: 1.8rem !important; letter-spacing: .3em; }
.mail-apps { display: flex; gap: .5rem; justify-content: center; margin-top: .8rem; }
.mail-apps .btn { flex: 1; max-width: 160px; }
.code-help { font-size: .8rem; margin: .7rem 0 0; }
.code-help .link-btn[disabled] { opacity: .5; cursor: default; text-decoration: none; }
.next-step { display: grid; gap: .35rem; justify-items: start; padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid var(--line); background: var(--card); margin: -.2rem 0 1rem; }
.next-step span { color: var(--muted); font-size: .88rem; line-height: 1.45; }
.next-step .btn { margin-top: .3rem; }

/* Sign in (095): password row, show/hide, rules, remember. */
.pw-label { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.pw-label .link-btn { font-size: .82rem; }
.pw-row { position: relative; }
.pw-row input { width: 100%; padding-right: 4.2rem; }
.pw-eye { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--muted); font: inherit; font-size: .82rem; font-weight: 600; padding: .4rem .6rem; min-height: 36px; cursor: pointer; }
.remember { margin: -.2rem 0 1rem; font-size: .88rem; }
.first-time { font-size: .85rem; text-align: center; margin: 1rem 0 0; }
.back-link { display: block; margin: 1rem auto 0; }
.pw-rules { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .2rem; text-align: left; font-size: .8rem; color: var(--muted); }
.pw-rules li::before { content: "○"; margin-right: .45rem; }
.pw-rules li.ok { color: var(--ok, #2f8a4e); } .pw-rules li.ok::before { content: "✓"; }
#newPwForm .field { text-align: left; }

/* Sign in: SashBoard's icon and name at the top. */
.signin-brand { display: grid; justify-items: center; gap: .35rem; margin: 0 0 1.4rem; text-align: center; }
.signin-icon { width: 76px; height: 76px; border-radius: 18px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25), 0 0 0 1px rgba(180, 155, 87, .35); }
.signin-word { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin-top: .4rem; }
.signin-org { color: var(--muted); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }
.auth-form .box > h2 { margin-top: .8rem !important; }
@media (max-width: 820px) {
  .auth-mobile-brand { display: none !important; }
  .auth-form { padding-top: calc(var(--sa-top) + 2.2rem) !important; }
}
.pw-prompt { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; background: rgba(20, 20, 20, .55); }
.pw-prompt-box { width: min(400px, 100%); display: grid; gap: .5rem; padding: 1.5rem 1.3rem 1.2rem; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.pw-prompt-box h2 { margin: 0; font-size: 1.4rem; } .pw-prompt-box p { margin: 0 0 .4rem; }
.pw-prompt-err { color: var(--danger); font-size: .86rem; min-height: 1em; margin: 0 !important; }
.pw-later { justify-self: center; min-height: 40px; }

/* Awards (097): the board's tab, a contestant's Home, and the SashBoard app. */
.aw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.aw-card { display: grid; gap: .55rem; padding: .9rem 1rem; border-radius: 14px; border: 1px solid var(--line); }
.aw-card.done { border-color: color-mix(in srgb, var(--brand-gold) 50%, var(--line)); background: color-mix(in srgb, var(--brand-gold) 6%, transparent); }
.aw-head { display: flex; justify-content: space-between; gap: .6rem; align-items: flex-start; } .aw-head > div { display: grid; } .aw-head small { color: var(--muted); }
.aw-winners { display: flex; flex-wrap: wrap; gap: .4rem; } .aw-w { padding: .3rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--brand-gold) 14%, transparent); font-size: .88rem; } .aw-w b { margin-right: .2rem; color: var(--brand-gold); }
.aw-acts { display: flex; flex-wrap: wrap; gap: .4rem; }
.aw-vote { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .9rem; }
.aw-tally { margin: 0; padding-left: 1.2rem; font-size: .88rem; } .aw-tally li { display: flex; justify-content: space-between; gap: .6rem; max-width: 360px; }
.aw-pick { display: grid; gap: .3rem; max-height: 50vh; overflow: auto; }
.aw-start { display: grid; gap: .4rem; justify-items: start; }
.aw-ballot { padding: .2rem 0 .8rem; } .aw-choices { display: flex; flex-wrap: wrap; gap: .4rem; } .aw-voted { color: var(--ok, #2f8a4e); font-weight: 600; margin: .6rem 0 0; }
.aw-announced { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .aw-announced li { display: flex; gap: .6rem; align-items: center; } .aw-announced div { display: grid; } .aw-announced small { color: var(--muted); }
.sb-awards { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.sb-awards li { display: flex; gap: .75rem; align-items: center; padding: .8rem .9rem; border-radius: 16px; border: 1px solid var(--line); background: var(--card); }
.sb-awards li > span:last-child { display: grid; min-width: 0; } .sb-awards small { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-gold); } .sb-awards strong { font-size: 1.02rem; } .sb-awards em { font-style: normal; color: var(--muted); font-size: .82rem; }
.sb-aw-ic { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 14%, var(--card)); } .sb-aw-ic svg { width: 20px; height: 20px; }

/* Support page (shop.html, 098): donate, order ahead, silent auction. */
.shop-wrap { display: grid; gap: 1rem; max-width: 680px; }
.shop-wrap > h1 { margin: 0; }
.shop-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.shop-tabs button { min-height: 44px; }
.shop-form { display: grid; gap: .9rem; padding: 1.4rem; } .shop-form h2 { margin: 0; }
.shop-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.shop-items li { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .8rem .9rem; border-radius: 14px; border: 1px solid var(--line); }
.shop-items li > div:first-child { display: grid; gap: .1rem; min-width: 0; } .shop-items small { color: var(--muted); } .shop-items span { font-weight: 700; }
.shop-items li.out { opacity: .6; } .shop-items em { font-style: normal; color: var(--muted); }
.shop-qty { display: flex; align-items: center; gap: .5rem; } .shop-qty button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 1.2rem; cursor: pointer; } .shop-qty b { min-width: 1.4rem; text-align: center; }
.shop-lines { list-style: none; padding: 0; margin: 0; }
.shop-pickup { display: grid; justify-items: center; gap: .2rem; margin: .6rem 0; } .shop-pickup .shop-qr { width: 180px; } .shop-pickup span { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .shop-pickup strong { font-size: 2rem; letter-spacing: .2em; font-family: Menlo, Consolas, monospace; }

/* SashBoard: support the pageant, the silent auction, orders and settings (098). */
.sb-support { display: grid; gap: .6rem; padding: 1rem 1.1rem; border-radius: 20px; border: 1px solid var(--line); background: var(--card); }
.sb-support-acts { display: flex; flex-wrap: wrap; gap: .5rem; } .sb-support-acts .btn { min-height: 42px; }
.sb-won { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border-radius: 14px; border: 1px solid var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 14%, var(--card)); color: var(--ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; } .sb-won svg { width: 18px; height: 18px; color: var(--brand-gold); }
.sb-auction { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.sb-au { display: grid; gap: .35rem; padding: 1rem; border-radius: 18px; border: 1px solid var(--line); background: var(--card); }
.sb-au.lead { border-color: color-mix(in srgb, var(--ok, #2f8a4e) 55%, var(--line)); }
.sb-au-top { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; } .sb-au-top strong { font-size: 1.08rem; } .sb-au-left { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.sb-au p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.4; } .sb-au > small { color: var(--muted); }
.sb-au-bid { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .3rem; }
.sb-au-bid > span:first-child { display: grid; } .sb-au-bid small { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .sb-au-bid b { font-size: 1.3rem; } .sb-au-bid em { font-style: normal; font-size: .78rem; color: var(--muted); }
.sb-au-form { display: flex; align-items: center; gap: .35rem; }
.sb-au-form button[data-step] { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 1.1rem; cursor: pointer; }
.sb-au-form input { width: 5.2rem; text-align: center; font-weight: 700; font-size: 1.05rem; min-height: 40px; padding: .3rem; }
.sb-fo { display: grid; gap: .3rem; } .sb-fo > small { color: var(--muted); font-size: .78rem; }
.sb-code { display: grid; justify-items: center; gap: .1rem; margin-top: .4rem; padding: .8rem; border-radius: 14px; border: 1px dashed var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 8%, var(--card)); }
.sb-code span { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .sb-code b { font-size: 2rem; letter-spacing: .25em; font-family: Menlo, Consolas, monospace; } .sb-code small { color: var(--muted); }
.sb-pw { display: grid; gap: .5rem; margin-bottom: .6rem; }

/* Fundraising for the board (098). */
.fr-head { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.fr-search { width: 100%; font-size: 1.1rem; letter-spacing: .08em; margin: .2rem 0 .8rem; min-height: 48px; }
.fr-pick li { align-items: center; gap: .8rem; } .fr-pick li.done { opacity: .6; }
.fr-code { font-family: Menlo, Consolas, monospace; font-size: 1.1rem; letter-spacing: .12em; padding: .3rem .55rem; border-radius: 8px; background: color-mix(in srgb, var(--brand-gold) 14%, transparent); }

/* Budget & books and the annual report (099). */
.bk-tools { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; } .bk-tools select { width: auto; min-height: 36px; padding: .3rem .6rem; }
.bk-sum { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.bk-sum li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: .7rem; align-items: center; }
.bk-cat small { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-gold); margin-left: .3rem; }
.bk-bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; } .bk-bar i { display: block; height: 100%; border-radius: 4px; background: var(--brand-gold); } .bk-bar i.over { background: var(--danger); }
.bk-amt { display: grid; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .bk-amt small { font-weight: 400; color: var(--muted); font-size: .76rem; }
.bk-ledger li { align-items: center; gap: .7rem; } .bk-date { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .82rem; min-width: 2.6rem; }
.bk-money { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; } .bk-money.income { color: var(--ok, #2f8a4e); }
.bk-budget { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5rem .8rem; margin-bottom: .6rem; }
.bk-budget label { display: flex; justify-content: space-between; align-items: center; gap: .6rem; font-size: .9rem; } .bk-budget input { width: 7rem; text-align: right; }
.ar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; margin-bottom: .8rem; }
.ar-stat { display: grid; padding: .9rem; border-radius: 14px; background: color-mix(in srgb, var(--brand-gold) 9%, transparent); border: 1px solid color-mix(in srgb, var(--brand-gold) 30%, var(--line)); }
.ar-stat b { font-size: 1.6rem; line-height: 1.1; } .ar-stat span { color: var(--muted); font-size: .85rem; }
@media (max-width: 600px) { .bk-sum li { grid-template-columns: minmax(0, 1fr) auto; } .bk-sum .bk-bar { grid-column: 1 / -1; grid-row: 2; } }

/* The annual report (100): one page shared by annual.html and the board's preview. */
.an { display: grid; gap: clamp(2rem, 4vw, 2.8rem); max-width: 960px; margin: 0 auto; color: var(--ink); container-type: inline-size; }
.an h1 { font-family: var(--display); font-size: clamp(2.2rem, 7vw, 4rem); letter-spacing: -.03em; line-height: 1; margin: .3rem 0 0; text-wrap: balance; }
.an-year { color: var(--brand-gold); }
.an h2 { font-family: var(--display); font-size: clamp(1.3rem, 3vw, 1.75rem); margin: 0; letter-spacing: -.01em; }
.an h3 { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 .7rem; }
.an-hero { display: grid; gap: 1.2rem; }
.an-note { margin: 0; padding: .2rem 0 .2rem 1.2rem; border-left: 3px solid var(--brand-gold); max-width: 62ch; }
.an-note p { font-size: clamp(1.02rem, 2.2vw, 1.18rem); line-height: 1.65; margin: 0 0 .6rem; }
.an-note cite { font-style: normal; font-size: .85rem; color: var(--muted); } .an-note cite::before { content: "— "; }
.an-big { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.an-big > div { display: grid; align-content: start; gap: .2rem; padding: 1.2rem 1.2rem 1.2rem 0; }
.an-big > div + div { padding-left: 1.2rem; border-left: 1px solid var(--line); }
.an-big b { font-family: var(--display); font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.an-big span { color: var(--muted); font-size: .9rem; }
.an-delta { font-size: .76rem; font-weight: 700; color: var(--muted); } .an-delta.up { color: var(--ok); }
.an .an-sect { padding-block: 0; } .an-sect { position: relative; display: grid; gap: 1rem; }
.an .an-cta { padding: clamp(1.4rem, 4vw, 2.2rem); }
.an-head { display: grid; gap: .3rem; } .an-head p { margin: 0; color: var(--muted); max-width: 62ch; }
.an-off { opacity: .5; outline: 2px dashed var(--line); outline-offset: .8rem; border-radius: 4px; }
.an-off-tag { justify-self: start; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.an-chart { width: 100%; height: auto; max-height: 220px; overflow: visible; }
.an-chart rect { fill: color-mix(in srgb, var(--brand-gold) 38%, var(--card, #fff)); } .an-chart rect.peak { fill: var(--brand-gold); } .an-chart rect.zero { fill: var(--line); }
.an-chart text { fill: var(--muted); font-size: 13px; text-anchor: middle; font-family: inherit; } .an-chart text.v { fill: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.an-chart .axis { stroke: var(--line); }
.an-moments { list-style: none; margin: 0; padding: 0; display: grid; }
.an-moments li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 1rem; padding: .85rem 0; border-top: 1px solid var(--line); }
.an-moments time { font-weight: 700; color: var(--gold-ink); font-variant-numeric: tabular-nums; font-size: .9rem; padding-top: .1rem; }
.an-moments strong { display: block; font-size: 1.04rem; } .an-moments span { color: var(--muted); font-size: .88rem; }
.an-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; }
.an-people figure { margin: 0; display: grid; gap: .5rem; }
.an-photo { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: linear-gradient(170deg, var(--gold-100), var(--noir-100)); display: grid; place-items: center; }
.an-photo span { font-family: var(--display); font-size: 2rem; color: var(--gold-ink); opacity: .55; }
.an-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; } .an-photo.has img { opacity: 1; }
.an-people figcaption { display: grid; line-height: 1.3; } .an-people figcaption span { color: var(--muted); font-size: .85rem; }
.an-crowned ul, .an-awards ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.an-crowned { margin-top: .4rem; } .an-crowned ul { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; }
.an-crowned li { display: flex; gap: .8rem; align-items: center; padding: .9rem 1rem; border-radius: 14px; background: color-mix(in srgb, var(--brand-gold) 10%, transparent); }
.an-crowned .crown { width: 30px; height: 22px; flex: none; } .an-crowned li div { display: grid; } .an-crowned li span { color: var(--muted); font-size: .86rem; }
.an-awards li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-top: 1px solid var(--line); font-size: .95rem; }
.an-awards small { color: var(--muted); font-variant-numeric: tabular-nums; } .an-awards b { text-align: right; }
.an-money-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem 2.4rem; }
.an-money-head { display: flex; justify-content: space-between; align-items: baseline; } .an-money-head h3 { margin: 0; }
.an-money-head b { font-family: var(--display); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.an-stack { display: flex; height: 14px; border-radius: 99px; overflow: hidden; gap: 2px; margin: .6rem 0 .8rem; }
.an-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .9rem; }
.an-legend li { display: grid; grid-template-columns: .7rem minmax(0, 1fr) auto 2.6rem; gap: .6rem; align-items: center; }
.an-legend i { width: .7rem; height: .7rem; border-radius: 3px; } .an-legend b { font-variant-numeric: tabular-nums; } .an-legend small { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.an-money.in .s0 { background: var(--brand-gold); } .an-money.in .s1 { background: color-mix(in srgb, var(--brand-gold) 70%, var(--card, #fff)); } .an-money.in .s2 { background: color-mix(in srgb, var(--brand-gold) 48%, var(--card, #fff)); }
.an-money.in .s3 { background: color-mix(in srgb, var(--brand-gold) 32%, var(--card, #fff)); } .an-money.in .s4, .an-money.in .s5, .an-money.in .s6 { background: color-mix(in srgb, var(--brand-gold) 20%, var(--card, #fff)); }
.an-money.out .s0 { background: var(--ok); } .an-money.out .s1 { background: var(--muted); } .an-money.out .s2 { background: color-mix(in srgb, var(--muted) 70%, var(--card, #fff)); }
.an-money.out .s3 { background: color-mix(in srgb, var(--muted) 50%, var(--card, #fff)); } .an-money.out .s4, .an-money.out .s5, .an-money.out .s6 { background: color-mix(in srgb, var(--muted) 32%, var(--card, #fff)); }
.an-head p strong { color: var(--ok); }
.an-small { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1.1rem 1.4rem; }
.an-small > div { display: grid; gap: .1rem; } .an-small b { font-family: var(--display); font-size: 1.5rem; font-variant-numeric: tabular-nums; } .an-small span { color: var(--muted); font-size: .85rem; }
.an-sponsors { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
.an-sponsor { min-height: 84px; display: grid; place-items: center; padding: .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card, #fff); text-align: center; font-weight: 700; font-size: .92rem; }
.an-sponsor img { max-height: 56px; max-width: 100%; object-fit: contain; }
.an-cta { display: grid; gap: .6rem; padding: clamp(1.4rem, 4vw, 2.2rem); border-radius: 22px; background: linear-gradient(140deg, var(--brand-grey), #2a2a2a); color: #fff; }
.an-cta h2 { color: #fff; } .an-cta p { margin: 0; color: rgba(255, 255, 255, .78); max-width: 56ch; }
.an-cta-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; } .an-cta .btn-outline, .an-cta .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .4); }
.an-foot { margin: 0; color: var(--muted); font-size: .8rem; }
.ar-controls { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; }
.ar-show { display: flex; flex-wrap: wrap; gap: .3rem 1rem; border: 0; padding: 0; margin: 0; } .ar-show legend { font-size: .8rem; font-weight: 700; color: var(--muted); float: left; margin-right: .6rem; padding: 0; }
.ar-preview { margin-top: 1.2rem; padding: clamp(1.2rem, 4vw, 2.4rem); border-radius: 18px; background: var(--card, #fff); border: 1px solid var(--line); }
@container (max-width: 640px) {
  .an-big { grid-template-columns: 1fr 1fr; } .an-big > div { padding: 1rem .8rem 1rem 0; } .an-big > div + div { padding-left: .8rem; }
  .an-big > div:nth-child(odd) { border-left: 0; padding-left: 0; } .an-big > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .an-chart .mfull { display: none; } .an-chart text { font-size: 21px; } .an-chart text.v { font-size: 22px; } .an-people { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .8rem; }
}
@media (max-width: 600px) { .ar-preview { padding: 1rem; margin-inline: -.2rem; } }
@media print {
  .an-page .site-header, .site-header, .site-footer, .an-cta { display: none !important; }
  .an-page { background: #fff !important; padding: 0 !important; } .an-sect, .an-big, .an-people figure, .an-money { break-inside: avoid; }
  .an { color: #222; } .an-photo img { opacity: 1; }
}

/* Season Setup: a season strip, full-width paperwork, tidy headers (desktop and phone). */
.ss-card, .ss-reqs, .ss-titles { margin-bottom: 1.2rem; }
.ss-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ss-head h3 { margin: 0; } .ss-head h3 small { font-size: .8rem; font-weight: 600; margin-left: .3rem; }
.ss-acts { display: flex; gap: .4rem; flex-wrap: wrap; }
.ss-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.ss-tile { display: grid; gap: .2rem; align-content: start; padding: .8rem .9rem; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 3%, transparent); min-width: 0; }
.ss-tile > span { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-tile > strong { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-tile em { font-style: normal; font-weight: 500; color: var(--muted); }
.ss-tile .link-btn { justify-self: start; font-size: .82rem; }
.ss-switch { display: flex; align-items: center; gap: .55rem; border: 0; background: none; padding: 0; color: var(--ink); font: inherit; cursor: pointer; min-height: 30px; }
.ss-switch i { width: 38px; height: 22px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 18%, transparent); position: relative; flex: none; transition: background .2s; }
.ss-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.ss-switch.on i { background: var(--ok, #2f8a4e); } .ss-switch.on i::after { transform: translateX(16px); }
.ss-switch strong { font-size: 1.05rem; }
.req-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.req-rows li { display: flex; align-items: flex-start; gap: .8rem; padding: .8rem .2rem; border-top: 1px solid var(--line); cursor: pointer; }
.req-rows li:first-child { border-top: 0; }
.req-rows li:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.req-main { flex: 1; min-width: 0; display: grid; gap: .2rem; }
.req-meta { color: var(--muted); font-size: .85rem; display: flex; flex-wrap: wrap; gap: .3rem .4rem; align-items: center; }
.req-desc { color: var(--muted); font-size: .82rem; white-space: pre-line; overflow-wrap: anywhere; }
.req-icons { display: flex; gap: .3rem; flex: none; }
.icon-mini { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.icon-mini svg { width: 17px; height: 17px; } .icon-mini.danger:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, var(--line)); }
.ss-lede { margin: -.4rem 0 1rem; font-size: .88rem; max-width: 70ch; }
@media (max-width: 700px) {
  .ss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-head .ss-acts .btn { min-height: 38px; }
  .pkg-head { flex-wrap: wrap; } .pkg-head .grow { flex-basis: 100%; }
}
@media (max-width: 700px) {
  .ss-reqs .ss-head, .ss-titles .ss-head { flex-wrap: nowrap; align-items: flex-start; }
  .ss-reqs .ss-head h3, .ss-titles .ss-head h3 { flex: 1; min-width: 0; font-size: 1.2rem; line-height: 1.25; }
  .ss-titles .ss-head .ss-acts { flex-direction: column; align-items: flex-end; }
  .ss-tile > span { white-space: normal; overflow: visible; }
}

/* Phones: a list row's buttons drop under its text instead of squeezing the text into a narrow column
   (FAQ, sponsors, volunteers, judges, paperwork lists…). Rows that only carry a tag keep it beside. */
@media (max-width: 640px) {
  .list > li:has(> .grow ~ :is(span, div) :is(.btn, .icon-btn, button)) { flex-wrap: wrap; row-gap: .5rem; }
  .list > li > .grow:has(~ :is(span, div) :is(.btn, .icon-btn, button)) { flex: 1 1 calc(100% - 3rem); min-width: 0; }
  .list > li > .grow ~ :is(span, div):has(.btn, .icon-btn, button) { flex: 1 1 100%; justify-content: flex-start !important; margin-left: 0; }
}
@media (max-width: 640px) {
  .ss-titles { padding: 1rem; } .pkg-title { padding: .85rem; }
  .pkg-items li { gap: .6rem; } .pkg-items .pkg-value { margin-left: auto; }
}
/* Phones: in event lists the type tag shows its icon only, so the event's name gets the room. */
@media (max-width: 640px) {
  .list > li > div:not(.grow) > .type-tag { font-size: 0; gap: 0; padding: .3rem; }
  .list > li > div:not(.grow) > .type-tag svg, .list > li > div:not(.grow) > .type-tag .crown { width: 14px; height: 14px; }
}

/* Program book ads (101): ads.html */
.ads-wrap { max-width: 860px; display: grid; gap: 1.6rem; }
.ads-head { display: grid; gap: .5rem; } .ads-head h1 { margin: 0; text-wrap: balance; } .ads-head .lead { margin: 0; max-width: 60ch; }
.ads-due { margin: .2rem 0 0; font-size: .95rem; } .ads-due strong { color: var(--gold-ink); }
.ads-note { margin: 0; padding: .8rem 1rem; border-left: 3px solid var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 8%, transparent); border-radius: 6px; max-width: 62ch; }
.ads-form { display: grid; gap: 1.2rem; }
.ads-form > section { display: grid; gap: .9rem; padding: clamp(1.1rem, 3vw, 1.6rem); border: 1px solid var(--line); border-radius: 18px; background: var(--card, #fff); }
.ads-form h2 { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: 1.15rem; }
.ads-form h2 span { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--brand-grey); color: #fff; font-size: .85rem; }
.ads-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.ads-size { position: relative; display: grid; gap: .15rem; padding: .9rem; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.ads-size input { position: absolute; opacity: 0; pointer-events: none; }
.ads-size.on { border-color: var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 9%, transparent); }
.ads-size:has(input:focus-visible) { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.ads-size.out { opacity: .5; cursor: not-allowed; }
.ads-size small { color: var(--muted); font-size: .8rem; } .ads-size b { font-size: 1.15rem; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.ads-size em { position: absolute; top: .7rem; right: .7rem; font-style: normal; font-size: .7rem; font-weight: 700; color: var(--gold-ink); }
.ads-shape { width: 34px; aspect-ratio: 5.5 / 8.5; border: 1.5px solid var(--muted); border-radius: 3px; display: flex; align-items: flex-start; justify-content: flex-start; padding: 2px; margin-bottom: .4rem; }
.ads-shape i { display: block; background: var(--brand-gold); border-radius: 1px; min-width: 4px; min-height: 4px; }
.ads-kind { justify-self: start; }
.ads-file { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; padding: .9rem; border: 1.5px dashed var(--line); border-radius: 14px; }
.ads-file.done { border-style: solid; border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); } .ads-file.bad .ads-file-state { color: var(--danger, #b3261e); }
.ads-file label { cursor: pointer; } .ads-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ads-file label:has(input:focus-visible) .btn { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.ads-file-state { display: flex; align-items: center; gap: .7rem; font-size: .9rem; min-width: 0; }
.ads-file-state img, .ads-pdf { width: 46px; height: 58px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); flex: none; }
.ads-pdf { display: grid; place-items: center; font-size: .7rem; font-weight: 800; color: var(--gold-ink); background: var(--gold-100); }
.ads-file-state span { display: grid; min-width: 0; } .ads-file-state strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ads-file-state small { color: var(--muted); }
.ads-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--brand-gold); animation: spin .8s linear infinite; flex: none; }
.ads-spec { margin: 0; font-size: .88rem; color: var(--muted); }
.ads-wide { grid-column: 1 / -1; }
.ads-pay { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .7rem; }
.ads-pay label { position: relative; display: grid; padding: .9rem 1rem; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; }
.ads-pay label.on { border-color: var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 9%, transparent); }
.ads-pay input { position: absolute; opacity: 0; } .ads-pay small { color: var(--muted); }
.ads-pay label:has(input:focus-visible) { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.ads-submit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; }
.ads-submit > div { display: grid; } .ads-submit b { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.ads-err { flex-basis: 100%; order: 3; margin: 0; color: var(--danger, #b3261e); font-weight: 600; } .ads-err:empty { display: none; }
.ads-status { display: grid; gap: 1rem; max-width: 620px; } .ads-status h1 { margin: 0; }
.ads-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.ads-steps li { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.ads-steps p { margin: .1rem 0 0; color: var(--muted); }
.ads-dot { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 2px solid var(--line); font-weight: 800; font-size: .85rem; }
.ads-steps .done .ads-dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.ads-steps .ask .ads-dot { background: var(--brand-gold); border-color: var(--brand-gold); color: #fff; }
.ads-steps .ask p { color: var(--ink); font-weight: 500; }
.ads-fix { display: grid; gap: .8rem; padding-top: .4rem; }
@media (max-width: 600px) { .ads-sizes { grid-template-columns: 1fr 1fr; } .ads-submit .btn { width: 100%; } }

/* Program book (101): the board's page */
.pb-filters { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: 1rem; }
.pb-filters .chip { border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 99px; padding: .35rem .8rem; font: inherit; font-size: .85rem; cursor: pointer; }
.pb-filters .chip small { color: var(--muted); margin-left: .2rem; font-variant-numeric: tabular-nums; }
.pb-filters .chip.on { background: var(--brand-grey); border-color: var(--brand-grey); color: #fff; } .pb-filters .chip.on small { color: rgba(255, 255, 255, .7); }
.pb-search { margin: 0 0 0 auto; max-width: 220px; }
.pb-ads { list-style: none; margin: 0; padding: 0; display: grid; }
.pb-ad { display: flex; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); } .pb-ad:first-child { border-top: 0; padding-top: 0; }
.pb-ad .grow { display: grid; gap: .2rem; min-width: 0; }
.pb-ad-top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pb-ad .muted { font-size: .86rem; } .pb-who { overflow-wrap: anywhere; } .pb-due { color: var(--gold-ink); font-weight: 700; }
.pb-art { flex: none; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 8px; }
.pb-thumb { display: grid; place-items: center; width: 64px; height: 82px; object-fit: contain; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-size: .72rem; font-weight: 800; color: var(--gold-ink); }
.pb-thumb.pdf { background: var(--gold-100); } .pb-thumb.none { color: var(--muted); font-weight: 600; }
.pb-text { margin: .2rem 0 0; font-size: .88rem; padding: .5rem .7rem; border-radius: 8px; background: color-mix(in srgb, var(--brand-gold) 8%, transparent); }
.pb-acts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.pb-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.pb-pagecard { border: 1px solid var(--line); border-radius: 12px; padding: .8rem; display: grid; gap: .5rem; }
.pb-pagecard header { display: flex; justify-content: space-between; font-size: .88rem; } .pb-pagecard header span { color: var(--muted); }
.pb-pagecard.full header span { color: var(--ok); font-weight: 700; } .pb-pagecard.over header span { color: var(--danger); font-weight: 700; }
.pb-meter { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; } .pb-meter i { display: block; height: 100%; background: var(--brand-gold); }
.pb-pagecard.full .pb-meter i { background: var(--ok); } .pb-pagecard.over .pb-meter i { background: var(--danger); }
.pb-pagecard .list li, .pb-pages + .pb-sub + .list li { align-items: center; }
.pb-page { display: flex; align-items: center; gap: .4rem; font-size: .84rem; color: var(--muted); } .pb-page input { width: 4.2rem; }
.pb-sub { margin: 1rem 0 .4rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 600px) { .pb-search { margin-left: 0; max-width: none; flex-basis: 100%; } .pb-thumb { width: 52px; height: 66px; } }

/* Emcee script (101): Run of Show › Emcee script, and the new fill-ins in the live Emcee view */
.emcee-say { font-style: italic; opacity: .75; font-weight: 400; }
.emcee-cue { display: block; margin-top: .25em; padding-left: .9em; border-left: 2px solid color-mix(in srgb, var(--brand-gold) 60%, transparent); font-size: .82em; }
.emcee-cue small { display: inline-block; min-width: 0; margin-right: .35em; font-size: .78em; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.emcee-award, .emcee-roll { display: block; margin: .3em 0; }
.emcee-blank { display: inline-block; width: 8em; height: 1em; border-bottom: 2px solid currentColor; vertical-align: bottom; opacity: .6; }
.sc-top .panel-head { align-items: flex-start; gap: .8rem; flex-wrap: wrap; }
.sc-names { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.sc-names summary { cursor: pointer; display: flex; gap: .6rem; align-items: baseline; }
.sc-say { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .5rem 1rem; }
.sc-say li { display: grid; gap: .2rem; font-size: .88rem; } .sc-say input { font-size: .9rem; }
.sc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.sc-seg { display: grid; gap: .6rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--card, #fff); }
.sc-seg header { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: .8rem; align-items: baseline; }
.sc-seg header div { display: grid; } .sc-seg header small { color: var(--muted); font-size: .82rem; }
.sc-time { font-weight: 700; color: var(--gold-ink); font-variant-numeric: tabular-nums; font-size: .9rem; }
.sc-edit { width: 100%; font: inherit; font-size: .95rem; line-height: 1.5; resize: vertical; }
.sc-ins { display: flex; flex-wrap: wrap; gap: .35rem; }
.sc-ins button, .sc-ins select { border: 1px dashed var(--line); background: transparent; color: var(--muted); border-radius: 99px; padding: .25rem .65rem; font: inherit; font-size: .78rem; cursor: pointer; width: auto; }
.sc-ins button.big { border-style: solid; border-color: color-mix(in srgb, var(--brand-gold) 55%, var(--line)); color: var(--gold-ink); font-weight: 600; }
.sc-ins button:hover { background: var(--gold-100); }
.sc-preview { display: grid; gap: .6rem; padding: .8rem 1rem; border-radius: 12px; background: var(--surface); font-size: 1.02rem; line-height: 1.55; }
.sc-step small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-ink); }
.sc-step p { margin: 0; } .sc-step mark { background: none; color: inherit; font-weight: 700; }
.sc-more { margin: 0; font-size: .85rem; }
@media (max-width: 640px) { .sc-seg { padding: .9rem; } .sc-seg header { grid-template-columns: minmax(0, 1fr); gap: .1rem; } }

/* The ad designer (102): sponsors, businesses and the board design a program ad at its print size */
html.add-open { overflow: hidden; }
.add-back { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 20, 20, .55); display: grid; place-items: center; padding: max(12px, var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) 12px max(12px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
.add-box { width: min(1100px, 100%); height: min(860px, 100%); display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--card, #fff); color: var(--ink); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.add-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); }
.add-head div { display: grid; } .add-head small { color: var(--muted); font-size: .8rem; } .add-acts { display: flex; gap: .5rem; flex: none; }
.add-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); min-height: 0; }
.add-stage { display: grid; align-content: center; justify-items: center; gap: .8rem; padding: 1rem; background: color-mix(in srgb, var(--ink) 6%, var(--surface)); min-height: 0; overflow: hidden; }
.add-paper { box-shadow: 0 10px 30px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .06); background: #fff; }
.add-paper canvas { display: block; width: 100%; height: 100%; }
.add-note { margin: 0; font-size: .8rem; color: var(--muted); text-align: center; max-width: 42ch; }
.add-side { display: grid; align-content: start; gap: .9rem; padding: 1.1rem; overflow: auto; border-left: 1px solid var(--line); }
.add-side fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: .45rem; }
.add-side legend { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; padding: 0; }
.add-layouts { display: flex; flex-wrap: wrap; gap: .35rem; }
.add-layouts button { border: 1.5px solid var(--line); background: transparent; color: var(--ink); border-radius: 10px; padding: .45rem .75rem; font: inherit; font-size: .86rem; cursor: pointer; }
.add-layouts button.on { border-color: var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 12%, transparent); font-weight: 700; }
.add-swatches { display: flex; flex-wrap: wrap; gap: .4rem; }
.add-swatch { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--line); background: var(--b); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; padding: 6px; gap: 3px; cursor: pointer; }
.add-swatch i { border-radius: 50%; background: var(--a); } .add-swatch i + i { background: var(--t); }
.add-swatch.on { border-color: var(--brand-gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-gold) 40%, transparent); }
.add-swatch.custom { display: grid; place-items: center; width: auto; padding: 0 .7rem; border-radius: 99px; background: transparent; color: var(--ink); font: inherit; font-size: .78rem; font-weight: 700; }
.add-own { display: flex; flex-wrap: wrap; gap: .8rem; font-size: .84rem; } .add-own label { display: flex; align-items: center; gap: .35rem; } .add-own input { width: 34px; height: 28px; padding: 0; border: 0; background: none; }
.add-pic { display: flex; align-items: center; gap: .6rem; font-size: .9rem; } .add-pic > span { min-width: 5.5rem; } .add-pic small { color: var(--muted); } .add-pic em { font-style: normal; color: var(--muted); font-size: .8rem; }
.add-tip { margin: 0; font-size: .78rem; color: var(--muted); }
.add-field { display: grid; gap: .3rem; font-size: .86rem; font-weight: 600; } .add-field input, .add-field textarea { font: inherit; font-weight: 400; }
.add-err { margin: 0; color: var(--danger); font-weight: 600; } .add-err:empty { display: none; }
@media (max-width: 760px) {
  .add-back { padding: 0; } .add-box { height: 100%; border-radius: 0; }
  .add-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .add-stage { padding: .9rem; height: 42vh; } .add-note { display: none; }
  .add-side { border-left: 0; border-top: 1px solid var(--line); }
}
/* A sponsor's program ad in their portal (102) */
.sp-ad { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.sp-ad-paper { width: 100%; max-width: 100%; max-height: 300px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); display: grid; place-items: center; overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.sp-ad-paper img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.sp-ad-paper span { display: grid; text-align: center; font-weight: 700; color: var(--muted); font-size: .9rem; } .sp-ad-paper small { font-weight: 400; font-size: .78rem; }
.sp-ad-info { display: grid; gap: .6rem; align-content: start; }
.sp-ad-note { margin: 0; padding: .6rem .8rem; border-left: 3px solid var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 9%, transparent); border-radius: 6px; }
.sp-ad-acts { display: flex; flex-wrap: wrap; gap: .5rem; } .sp-ad-acts label { cursor: pointer; }
@media (max-width: 600px) { .sp-ad { grid-template-columns: minmax(0, 1fr); } .sp-ad-paper { max-width: 220px; } }
.pb-wait { margin: 0 0 1rem; padding: .8rem 1rem; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--brand-gold) 55%, var(--line)); font-size: .9rem; } .pb-wait small { color: var(--muted); }

/* Box Office (103): the door, sales and the night report */
.bo-tabs { margin: 0; }
.bo-door { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.bo-door > .panel { margin: 0; } .bo-door h3 { margin: 0 0 .7rem; }
.bo-now { display: grid; gap: .7rem; grid-column: 1 / -1; }
.bo-big { display: flex; align-items: baseline; gap: .6rem; } .bo-big b { font-family: var(--display); font-size: clamp(2.6rem, 7vw, 3.6rem); line-height: 1; font-variant-numeric: tabular-nums; } .bo-big span { color: var(--muted); font-size: 1.05rem; }
.bo-meter { height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; } .bo-meter i { display: block; height: 100%; background: var(--ok); border-radius: inherit; transition: width .4s; }
.bo-acts { display: flex; flex-wrap: wrap; gap: .6rem; } .bo-acts .btn { min-height: 48px; padding-inline: 1.3rem; }
.bo-types { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.bo-types li { display: grid; gap: .3rem; } .bo-types li > div:first-child { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; } .bo-types span { color: var(--muted); font-variant-numeric: tabular-nums; }
.bo-types .bo-meter { height: 6px; }
.bo-arr { display: flex; align-items: stretch; gap: 3px; height: 120px; }
.bo-arr div { flex: 1; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; text-align: center; min-width: 0; }
.bo-arr i { align-self: end; display: block; background: var(--brand-gold); border-radius: 3px 3px 0 0; }
.bo-arr b { font-size: .68rem; font-variant-numeric: tabular-nums; } .bo-arr small { font-size: .62rem; color: var(--muted); white-space: nowrap; overflow: hidden; }
.bo-drawer { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem 1rem; margin: 0 0 .8rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.bo-drawer:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.bo-drawer div { display: grid; gap: .1rem; } .bo-drawer dt { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .bo-drawer dd { margin: 0; font-variant-numeric: tabular-nums; }
.bo-drawer dd small { color: var(--muted); } .bo-drawer dd.ok { color: var(--ok); font-weight: 700; } .bo-drawer dd.off { color: var(--danger); font-weight: 700; }
.bo-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.bo-table th { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; text-align: right; padding: .3rem .5rem; } .bo-table th:first-child { text-align: left; }
.bo-table td { padding: .5rem; border-top: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; } .bo-table td:first-child { text-align: left; }
.bo-table td small { display: block; color: var(--muted); font-size: .76rem; } .bo-table tfoot td { font-weight: 700; } .bo-table .bo-fee td { font-weight: 400; color: var(--muted); }
.bo-report h4 { margin: 1.2rem 0 .4rem; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bo-rep-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.bo-rep-grid div { display: grid; } .bo-rep-grid b { font-family: var(--display); font-size: 1.8rem; font-variant-numeric: tabular-nums; } .bo-rep-grid span { color: var(--muted); font-size: .85rem; }
.bo-sell-types { display: grid; gap: .5rem; margin-bottom: 1rem; }
.bo-sell-type { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 12px; }
.bo-sell-type span { display: grid; } .bo-sell-type small { color: var(--muted); } .bo-sell-type input { width: 4.5rem; text-align: center; font-size: 1.1rem; }
.bo-method { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.bo-method label { position: relative; display: block; cursor: pointer; } .bo-method input { position: absolute; opacity: 0; }
.bo-method span { display: grid; padding: .7rem; border: 1.5px solid var(--line); border-radius: 12px; height: 100%; } .bo-method small { color: var(--muted); font-size: .78rem; }
.bo-method input:checked + span { border-color: var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 10%, transparent); }
.bo-method input:disabled + span { opacity: .45; } .bo-method input:focus-visible + span { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.bo-total { margin: .6rem 0 0; font-size: 1.1rem; } .bo-total b { font-size: 1.4rem; }
.bo-pay { display: grid; gap: .8rem; justify-items: center; text-align: center; } .bo-pay p { margin: 0; max-width: 40ch; }
.bo-qr { width: min(260px, 70vw); padding: .6rem; background: #fff; border-radius: 12px; } .bo-qr svg { display: block; width: 100%; height: auto; } .bo-qr.small { width: 180px; margin: 0 auto 1rem; }
.bo-pay-state { display: flex; align-items: center; gap: .5rem; font-weight: 600; } .bo-pay-state .ok { color: var(--ok); }
@media (max-width: 760px) { .bo-door { grid-template-columns: minmax(0, 1fr); } .bo-rep-grid { grid-template-columns: 1fr 1fr; } .bo-method { grid-template-columns: minmax(0, 1fr); } .tk-top { flex-wrap: wrap; } .bo-tabs { overflow-x: auto; max-width: 100%; } }

/* Door pass (103): a volunteer's phone at the door; dark, big and simple */
.door-body { margin: 0; min-height: 100vh; background: #161616; color: #f2f2f2; --card: #222; --line: #383838; --muted: #a9a9a9; --ink: #f2f2f2; --surface: #1c1c1c; }
.door { max-width: 520px; margin: 0 auto; padding: max(14px, var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) 16px max(22px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); display: grid; gap: 1rem; }
.door-loading, .door-msg { padding: 3rem 0; text-align: center; color: var(--muted); } .door-msg h1 { color: #fff; }
.door-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; }
.door-head div { display: grid; } .door-head span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-gold); } .door-head strong { font-size: 1.25rem; } .door-head small { color: var(--muted); }
.door-net { font-style: normal; font-size: .76rem; font-weight: 700; padding: .25rem .6rem; border-radius: 99px; background: #2c2c2c; color: #d8c28c; white-space: nowrap; } .door-net.off { background: #4a2a26; color: #f2b8b0; }
.door-count { display: grid; gap: .4rem; padding: 1.1rem; border-radius: 18px; background: #222; }
.door-count b { font-family: var(--display); font-size: 3.4rem; line-height: 1; font-variant-numeric: tabular-nums; } .door-count span { color: var(--muted); }
.door-result { display: grid; gap: .2rem; padding: 1rem 1.1rem; border-radius: 16px; background: #2a2a2a; }
.door-result strong { font-size: 1.3rem; } .door-result span { color: #d0d0d0; }
.door-result.good { background: #1f4d34; } .door-result.warn { background: #5a4a1f; } .door-result.bad { background: #5a2420; }
.door-result .link-btn { justify-self: start; color: #fff; }
.door-acts { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; } .door-acts .btn { min-height: 64px; font-size: 1.05rem; } .door-acts .btn:only-child { grid-column: 1 / -1; }
.door-type { display: flex; gap: .5rem; } .door-type input { flex: 1; min-width: 0; background: #222; color: #fff; border: 1px solid #3a3a3a; }
.door-foot { margin: 0; color: var(--muted); font-size: .78rem; }
.door-scan-res .door-result { margin: .8rem; }
.door-sheet { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .6); display: grid; align-items: end; }
.door-sheet-box { background: #1e1e1e; color: #f2f2f2; border-radius: 20px 20px 0 0; padding: 1.2rem 16px max(1.2rem, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); max-height: 92vh; overflow: auto; display: grid; gap: .8rem; max-width: 560px; width: 100%; margin: 0 auto; }
.door-sheet-box h2 { margin: 0; color: #fff; } .door-sheet-box form { display: grid; gap: .7rem; }
.door-sheet-box .bo-sell-type, .door-sheet-box .bo-method span { border-color: #3a3a3a; } .door-sheet-box input { background: #2a2a2a; color: #fff; border: 1px solid #3a3a3a; }
.door-sheet-box .bo-method { grid-template-columns: 1fr 1fr; margin: 0; }
.door-field { display: grid; gap: .3rem; font-size: .88rem; color: var(--muted); }
.door-err { margin: 0; color: #f2b8b0; font-weight: 600; } .door-err:empty { display: none; }
.door-sheet-acts { display: grid; grid-template-columns: 1fr 2fr; gap: .5rem; } .door-sheet-acts .btn { min-height: 52px; }
.door-sheet-box .bo-pay { color: #f2f2f2; }
.door-body .btn-ghost { color: #f2f2f2; border-color: #4a4a4a; } .door-body .link-btn { color: #f2f2f2; }
/* Card readers (104) */
.bo-reader-art { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand-gold) 14%, transparent); color: var(--gold-ink); } .bo-reader-art svg { width: 32px; height: 32px; }
.bo-reader-acts { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; } .bo-pay-state .off { color: var(--danger); }
.door-sheet-box .bo-method.three { grid-template-columns: 1fr 1fr 1fr; } .door-sheet-box .bo-method.three small { font-size: .7rem; }
.door-sheet-box select { background: #2a2a2a; color: #fff; border: 1px solid #3a3a3a; } .door-sheet-box .bo-pay-state .off { color: #f2b8b0; }
/* Announcing competition dates (105) */
.ss-announce { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1rem; padding: .8rem 1rem; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--brand-gold) 55%, var(--line)); }
.ss-announce > span { color: var(--gold-ink); display: grid; } .ss-announce > span svg { width: 20px; height: 20px; }
.ss-announce p { flex: 1 1 260px; margin: 0; font-size: .9rem; } .ss-announce.done { border-style: solid; border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); } .ss-announce.done > span { color: var(--ok); }

/* The pageant map in the SashBoard app (105) */
.sb-seg { display: inline-flex; padding: 3px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); margin: 0 0 .8rem; }
.sb-seg button { border: 0; background: none; color: var(--muted); font: inherit; font-weight: 700; font-size: .88rem; padding: .4rem 1.1rem; border-radius: 99px; cursor: pointer; }
.sb-seg button.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.sb-map { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--card); min-height: 180px; display: grid; place-items: center; padding: .4rem; }
.sb-map > div, .sb-map svg { width: 100%; }
.sb-map-back { margin: 0 0 .5rem; }
.sb-sec { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; font-size: 1.05rem; margin: 1.2rem 0 .6rem; } .sb-sec small { font-weight: 400; color: var(--muted); font-size: .8rem; }
.sb-comps { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.sb-comp { display: grid; gap: .55rem; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 16px; background: var(--card); transition: box-shadow .3s, border-color .3s; }
.sb-comp.pick { border-color: var(--brand-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-gold) 25%, transparent); }
.sb-comp-dates { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.sb-comp-dates li { display: flex; align-items: center; gap: .6rem; } .sb-comp-dates svg { width: 18px; height: 18px; color: var(--brand-gold); flex: none; }
.sb-comp-dates span { display: grid; } .sb-comp-dates small { color: var(--muted); font-size: .8rem; }
.sb-comp-tba { margin: 0; color: var(--muted); font-size: .88rem; font-style: italic; }
.sb-comp-acts { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.sb-comp-note { display: inline-flex; align-items: center; gap: .35rem; color: var(--gold-ink); font-size: .84rem; font-weight: 600; } .sb-comp-note svg { width: 16px; height: 16px; }

/* A pageant's About in the SashBoard app (106) */
.sb-about { display: grid; gap: .55rem; margin-bottom: .4rem; }
.sb-about-card { display: grid; gap: .7rem; }
.sb-about-bio { margin: 0; font-size: 1.02rem; line-height: 1.55; }
.sb-about-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.sb-about-facts li { font-size: .78rem; font-weight: 700; padding: .25rem .6rem; border-radius: 99px; background: color-mix(in srgb, var(--brand-gold) 14%, transparent); color: var(--gold-ink); }
.sb-about-story h3, .sb-past h3 { margin: 0 0 .35rem; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sb-about-text p { margin: 0 0 .6rem; line-height: 1.55; } .sb-about-text p:last-child { margin-bottom: 0; }
.sb-about-story:not(.open) .sb-about-text { max-height: 7.6em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.sb-past-list { list-style: none; margin: 0; padding: 0; display: grid; }
.sb-past-list li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: .6rem; padding: .5rem 0; border-top: 1px solid var(--line); align-items: baseline; } .sb-past-list li:first-child { border-top: 0; }
.sb-past-list b { color: var(--gold-ink); font-variant-numeric: tabular-nums; } .sb-past-list span { display: grid; } .sb-past-list small { color: var(--muted); font-size: .8rem; }
.sb-past:not(.open) .sb-past-list li:nth-child(n+7) { display: none; }
.sb-about .link-btn { margin-top: .3rem; }
/* The board's About tab */
.about-cols { align-items: start; } .about-acts { display: flex; align-items: center; gap: .8rem; }
.about-preview { display: grid; gap: .3rem; } .about-bio { margin: 0; line-height: 1.55; } .about-facts { margin: .3rem 0; font-size: .86rem; font-weight: 600; color: var(--gold-ink); }
.about-past { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .35rem; } .about-past li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .5rem; font-size: .9rem; } .about-past b { color: var(--gold-ink); } .about-past span { display: grid; } .about-past small { color: var(--muted); }

/* ---------- Apple Intelligence (on this iPhone): interview coaching and report polish ---------- */
.os-listen { position: fixed; top: calc(var(--sa-top, 0px) + 14px); left: 50%; transform: translateX(-50%); padding: .3rem .8rem; border-radius: 999px;
  background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: #fff; }
.os-coach { width: min(560px, 100%); text-align: left; display: grid; align-content: start; gap: .8rem; margin-top: .6rem; padding: 1.1rem 1.2rem; border-radius: 22px;
  background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 12px 40px rgba(0, 0, 0, .25); animation: q-in .4s var(--ease-out, ease) both; }
.os-coach section { padding: 0; margin: 0; }
.os-coach h3 { margin: 0; color: #fff; font-size: 1.1rem; }
.os-coach h4 { margin: 0 0 .3rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-gold); }
.os-coach ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; color: rgba(255, 255, 255, .92); font-size: .92rem; line-height: 1.45; }
.os-coach p { margin: 0; color: rgba(255, 255, 255, .9); line-height: 1.5; font-size: .92rem; }
.os-coach .os-stats { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .82rem; color: rgba(255, 255, 255, .75); }
.os-coach .os-stats b { color: #fff; font-variant-numeric: tabular-nums; }
.os-cgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .9rem; }
.os-tight { padding: .7rem .85rem; border-radius: 14px; background: rgba(255, 255, 255, .08); border-left: 3px solid var(--brand-gold); font-style: italic; }
.os-coach details summary { cursor: pointer; font-size: .82rem; color: rgba(255, 255, 255, .7); }
.os-coach details p { margin-top: .4rem; font-size: .85rem; color: rgba(255, 255, 255, .75); }
.ai-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; margin-top: .45rem; font-size: .8rem; }
.ai-btn { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--gold-ink); }
.ai-btn svg { width: 16px; height: 16px; }
.ai-btn[disabled] { opacity: .6; }

/* ---------- Liquid Glass (iOS 26) in the iPhone app ----------
   The tab bars float above the content as glass capsules, the sheets and toasts are glass, and the
   page shows through, as in Apple's own apps. Only in the app on iPhone (native.js marks it). */
html.native.platform-ios {
  --glass: rgba(255, 255, 255, .58); --glass-edge: rgba(255, 255, 255, .75); --glass-line: rgba(60, 60, 60, .1);
  --glass-shadow: 0 10px 34px rgba(60, 60, 60, .16), 0 1px 3px rgba(60, 60, 60, .08); --glass-pill: rgba(180, 155, 87, .16);
}
@media (prefers-color-scheme: dark) { html.native.platform-ios:not([data-theme="light"]) {
  --glass: rgba(44, 44, 44, .56); --glass-edge: rgba(255, 255, 255, .16); --glass-line: rgba(255, 255, 255, .08);
  --glass-shadow: 0 10px 34px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3); --glass-pill: rgba(180, 155, 87, .24); } }
html.native.platform-ios[data-theme="dark"] {
  --glass: rgba(44, 44, 44, .56); --glass-edge: rgba(255, 255, 255, .16); --glass-line: rgba(255, 255, 255, .08);
  --glass-shadow: 0 10px 34px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3); --glass-pill: rgba(180, 155, 87, .24);
}
@media (max-width: 900px) {
  html.native.platform-ios .tabbar { left: 12px; right: 12px; bottom: max(10px, calc(var(--sa-bottom) - 12px)); padding: 0 6px; border-radius: 32px; border: 1px solid var(--glass-line);
    background: var(--glass); -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8);
    box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-shadow); }
  html.native.platform-ios .tab { height: 60px; }
  html.native.platform-ios .tab.active::before { top: 6px; bottom: 6px; left: 4px; right: 4px; height: auto; border-radius: 26px; background: var(--glass-pill); z-index: -1; }
  html.native.platform-ios .tab.active { color: var(--gold-ink); }
  html.native.platform-ios .main { padding-bottom: calc(var(--tabbar-h) + var(--sa-bottom) + 2rem); }
    border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-shadow); padding-bottom: calc(var(--sa-bottom) + .6rem); }
  html.native.platform-ios .toast { bottom: calc(var(--tabbar-h) + max(10px, calc(var(--sa-bottom) - 12px)) + 14px); }
}
html.native.platform-ios .toast { background: var(--glass); color: var(--ink); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-shadow); }
/* SashBoard (the free app): the same floating glass tab bar. */
html.native.platform-ios .sb-tabs { left: 12px; right: 12px; bottom: max(10px, calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 12px)); padding: .3rem .4rem; border-radius: 32px;
  border: 1px solid var(--glass-line); background: var(--glass); -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8);
  box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-shadow); }
html.native.platform-ios .sb-tabs button { border-radius: 26px; }
html.native.platform-ios .sb-tabs button.on { background: var(--glass-pill); }
/* Mock interview (Apple Intelligence, on this iPhone) */
.mi-card { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.2rem; border-color: color-mix(in srgb, var(--brand-gold) 40%, var(--line)); }
.mi-card .grow { flex: 1 1 260px; }
.mi-stage .mi-step { color: var(--brand-gold); }
.mi-stage .mi-q { max-width: 34ch; }
.mi-think { margin: 0; color: rgba(255, 255, 255, .8); font-size: 1rem; animation: mi-pulse 1.4s ease-in-out infinite; }
@keyframes mi-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .mi-think { animation: none; } }
.mi-stage .os-coach details p { margin: .45rem 0 0; }
/* Apple Intelligence writing helpers */
.ai-q-list li strong { font-weight: 600; line-height: 1.4; }
.ai-qs { margin-bottom: 1.2rem; }
.ai-week .ai-week-out { line-height: 1.55; }
.ai-week h3 svg, .modal-head h2 svg { width: 18px; height: 18px; vertical-align: -2px; color: var(--gold-ink); }
.ai-hl { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.ai-hl li { display: grid; gap: .3rem; padding: .8rem .9rem; border-radius: 14px; background: var(--surface); border-left: 3px solid var(--brand-gold); }
.ai-hl blockquote { margin: 0; font-style: italic; line-height: 1.45; }
.ai-hl span { font-size: .82rem; color: var(--muted); }
.ai-hl .link-btn { justify-self: start; font-size: .82rem; }
/* The emcee's co-hosts (109): one color each, in the script editor and on their passes. */
.spk-1 { --spk: #b49b57; } .spk-2 { --spk: #5aa9c9; } .spk-3 { --spk: #c97a8f; } .spk-4 { --spk: #86b56f; } .spk-all { --spk: #d9d9d9; }
.sc-seg .spk, .sc-preview .spk, .sc-filler-body .spk { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: .1rem .5rem; border-radius: 99px; background: var(--spk); color: #1b1b1b; margin-right: .3rem; }
.sc-spk-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .4rem 0 .2rem; }
.sc-spk-row button.spk { border: 0; cursor: pointer; font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 99px; background: var(--spk); color: #1b1b1b; }
.sc-emcees { display: grid; gap: .5rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.sc-emcees > div:first-child { display: grid; gap: .1rem; } .sc-emcees small { font-size: .8rem; }
.sc-emcee-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.sc-emcee { display: flex; align-items: center; gap: .4rem; } .sc-emcee input { width: 12rem; max-width: 60vw; }
.spk-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--spk); flex: none; }
.sc-stats { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; margin-top: .9rem; font-size: .86rem; }
.sc-stats .ok { color: var(--ok, #3f7d4e); }
.sc-stat { background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: .3rem .8rem; font: inherit; font-size: .84rem; cursor: pointer; color: inherit; }
.sc-stat.warn { border-color: #d9a441; background: color-mix(in srgb, #d9a441 14%, transparent); }
.sc-rt { display: block; font-size: .74rem; color: var(--muted); margin-top: .15rem; }
.sc-step.long .sc-rt { color: #b5651d; font-weight: 600; }
.sc-fillers { margin-top: 1.2rem; }
.sc-filler-body { display: block; font-size: .86rem; color: var(--muted); white-space: normal; max-height: 4.4em; overflow: hidden; }
.ov-release, .ov-cue { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.ov-cue select { padding: .35rem .5rem; border-radius: 8px; }
.ov-cues { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .35rem; font-size: .84rem; }
.ov-cues li { display: grid; } .ov-cues span { color: var(--muted); font-size: .78rem; }
/* Her emcee card */
.ec-card summary { display: flex; align-items: center; gap: 1rem; cursor: pointer; list-style: none; }
.ec-card summary::-webkit-details-marker { display: none; }
.ec-form { display: grid; gap: .3rem; margin-top: 1rem; }
.ec-name { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; padding: .7rem .9rem; border-radius: 12px; background: var(--surface); margin-bottom: .6rem; }
.ec-name > div:first-child { display: grid; gap: .1rem; } .ec-name small { font-size: .8rem; }
.ec-name-btns { display: flex; gap: .4rem; } .ec-name-btns .rec { color: #c0392b; border-color: #c0392b; }
.ec-hint { display: block; margin: -.2rem 0 .35rem; font-size: .78rem; }
.ec-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; font-size: .78rem; color: var(--muted); margin-top: .25rem; }
.ec-rt.over { color: #b5651d; font-weight: 600; }
.ec-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .4rem; }

/* Liquid Glass, continued: the top bar is glass too (the page blurs under it as it scrolls), and
   sheets are a denser glass so forms stay easy to read. In the iPhone app only. */
@media (max-width: 900px) {
  html.native.platform-ios .topbar { background: color-mix(in srgb, var(--brand-grey) 78%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
    border-bottom: 1px solid color-mix(in srgb, var(--brand-gold) 75%, transparent); }
  html.native.platform-ios body:has(.topbar)::before { background: transparent; }
  html.native.platform-ios .modal, html.native.platform-ios .drawer { background: color-mix(in srgb, var(--card) 88%, transparent); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); }
  html.native.platform-ios .modal { border-radius: 28px 28px 0 0; box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-shadow); }
  html.native.platform-ios .modal-actions { background: color-mix(in srgb, var(--card) 80%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
}

/* ---------- Premium polish on phones ---------- */
@media (max-width: 900px) {
  /* "‹ Back" on the dark top bar: light gold, so it reads. */
  .topbar .back-btn { color: #e2cf9c; }
  /* The calendar tip: one tidy row on a phone. */
  .cal-nudge { padding: .75rem .9rem; gap: .5rem .7rem; }
  .cal-nudge .grow span { display: none; }
  .cal-nudge .grow { flex: 1; }
  .cal-nudge .close-x { flex: none; width: 32px; height: 32px; }
  .cal-nudge strong { font-size: .88rem; line-height: 1.3; }
}
/* Overlapping faces: a ring in the card's color, so each one reads (as in Instagram). */
.sc-faces .avatar + .avatar { margin-left: -4px; }
.sc-faces .avatar { letter-spacing: -.02em; }
.sc-faces .avatar { box-shadow: 0 0 0 2px var(--card); }
/* In the app: a quiet dot on the tabs, numbers only on Messages (the one count worth reading). */
html.native.platform-ios .tab:not([href="#messages"]) .tab-badge { font-size: 0; min-width: 9px; width: 9px; height: 9px; padding: 0; top: 10px; left: calc(50% + 9px); }
/* SashBoard: the top bar is glass too, and the greeting doesn't repeat the logo. */
html.native.platform-ios .sb-top { background: color-mix(in srgb, var(--brand-grey) 78%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); }
html.native.platform-ios .sb-hero > .eyebrow { display: none; }

/* ---------- Premium feel (phones) ---------- */
/* Motion: tabs cross-fade; in the app, pages push and pop like iOS (a longer, springier slide). */
html[data-nav-dir="tab"]::view-transition-old(page) { animation: fade-out .12s ease both; }
html[data-nav-dir="tab"]::view-transition-new(page) { animation: fade-in .22s ease both; }
html.native.platform-ios[data-nav-dir="forward"]::view-transition-new(page) { animation: vt-push-in .42s cubic-bezier(.2, .9, .25, 1) both; }
html.native.platform-ios[data-nav-dir="forward"]::view-transition-old(page) { animation: vt-push-out .42s cubic-bezier(.2, .9, .25, 1) both; }
html.native.platform-ios[data-nav-dir="back"]::view-transition-new(page) { animation: vt-pop-in .38s cubic-bezier(.2, .9, .25, 1) both; }
html.native.platform-ios[data-nav-dir="back"]::view-transition-old(page) { animation: vt-pop-out .38s cubic-bezier(.2, .9, .25, 1) both; }
@keyframes vt-push-in { from { transform: translateX(38%); opacity: .4; } }
@keyframes vt-push-out { to { transform: translateX(-18%); opacity: 0; } }
@keyframes vt-pop-in { from { transform: translateX(-18%); opacity: .3; } }
@keyframes vt-pop-out { to { transform: translateX(38%); opacity: 0; } }

/* Loading placeholders: the shape of the page, shimmering softly. */
.skel-page { display: grid; gap: 1rem; }
.skel { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--skel-a) 0%, var(--skel-b) 50%, var(--skel-a) 100%); background-size: 200% 100%; animation: skel 1.3s ease-in-out infinite; height: 12px; }
:root { --skel-a: #ececec; --skel-b: #f6f6f6; }
html[data-theme="dark"] { --skel-a: #2c2c2c; --skel-b: #363636; }
@media (prefers-color-scheme: dark) { html.dark-auto { --skel-a: #2c2c2c; --skel-b: #363636; } }
.skel-hero { height: 150px; border-radius: 20px; }
.skel-card { background: var(--card); border-radius: 18px; padding: 1rem; display: grid; gap: 1rem; }
.skel-row { display: flex; gap: .8rem; align-items: center; }
.skel-av { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.skel-lines { flex: 1; display: grid; gap: .45rem; }
.skel-title { width: 55%; height: 30px; border-radius: 10px; }
.skel-stories { display: flex; gap: 1rem; } .skel-story { width: 64px; height: 64px; border-radius: 50%; }
.sb-skel { padding: 1rem 1.1rem; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* Pull to refresh */
.ptr { position: fixed; top: calc(var(--topbar-h, 0px) + var(--sa-top, 0px) + 6px); left: 50%; z-index: 70; width: 34px; height: 34px; margin-top: -20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--glass, var(--card)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 4px 16px rgba(0,0,0,.14); opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.ptr .crown { width: 22px; height: 14px; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  /* Home's title is the pageant's name, like an app's logo. */
  #pageTitle.brand-title { font-family: var(--display); letter-spacing: -.02em; }
  /* Numbers line up (times, dates, counts). */
  .sc-time, .today-time, .kpi strong, .live-pos, .tab-badge, time { font-variant-numeric: tabular-nums; }
  /* Friendlier empty states. */
  .empty { padding: 2.4rem 1.2rem; gap: .45rem; }
  .empty .crown { width: 44px; opacity: .55; margin-bottom: .6rem; padding: 18px; box-sizing: content-box; border-radius: 50%; background: color-mix(in srgb, var(--brand-gold) 14%, transparent); }
  .empty p { max-width: 30ch; margin: 0 auto; color: var(--muted); line-height: 1.5; }
  /* Bigger faces, photo first. */
  .sc-faces .avatar.sm { width: 34px; height: 34px; }
}

/* In the app: iOS grouped sections instead of bordered boxes, one main action per card, and
   comfortable tap targets. */
@media (max-width: 900px) {
  html.native.platform-ios .panel, html.native.platform-ios .dcard { border: 0; box-shadow: none; border-radius: 20px; }
  html.native.platform-ios .dash-today, html.native.platform-ios .cal-nudge { border-color: transparent; }
  html.native.platform-ios .today-acts .btn-ghost, html.native.platform-ios .today-acts .btn-outline { border-color: transparent; background: transparent; padding-inline: .5rem; color: var(--muted); }
  html.native.platform-ios .close-x { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
  html.native.platform-ios .chip { min-height: 36px; }
  html.native.platform-ios .btn-sm { min-height: 38px; }
}

/* Quick actions under the greeting: round buttons, one tap away. */
.quick-row { display: flex; gap: .4rem; margin: 0 0 1.2rem; overflow-x: auto; scrollbar-width: none; padding: .1rem .1rem .2rem; }
.quick-row::-webkit-scrollbar { display: none; }
.qa { flex: 1 0 64px; max-width: 92px; display: grid; justify-items: center; gap: .35rem; text-decoration: none; color: var(--text-strong, var(--ink)); background: none; border: 0; padding: .2rem 0; font: inherit; font-size: .74rem; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.qa-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--gold-ink); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--brand-gold) 45%, transparent), 0 4px 14px rgba(60,60,60,.08); transition: transform .15s ease; }
.qa-ic svg { width: 24px; height: 24px; }
.qa:active .qa-ic { transform: scale(.92); }
@media (min-width: 901px) { .quick-row { display: none; } }

/* Large titles that tuck into the top bar as you scroll (the app on a phone). */
.large-title { display: none; }
@media (max-width: 900px) {
  body.has-lt .large-title { display: block; font-family: var(--display); font-size: 2.05rem; line-height: 1.1; letter-spacing: -.025em; margin: -.2rem 0 1rem; color: var(--text-strong, var(--ink)); text-wrap: balance; }
  body.has-lt #pageTitle { opacity: 0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease; }
  body.has-lt.lt-collapsed #pageTitle { opacity: 1; transform: none; }
}

/* Long-press on an event: an action sheet. */
.ctx-sheet { position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem; padding: 0 10px calc(10px + var(--sa-bottom, 0px)); background: rgba(0,0,0,0); transition: background .2s ease; }
.ctx-sheet.open { background: rgba(0,0,0,.28); }
.ctx-box, .ctx-cancel { border-radius: 22px; background: var(--glass, var(--card)); -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8); box-shadow: 0 10px 40px rgba(0,0,0,.25); transform: translateY(110%); transition: transform .28s cubic-bezier(.2, .9, .25, 1); }
.ctx-sheet.open .ctx-box, .ctx-sheet.open .ctx-cancel { transform: none; }
.ctx-box { overflow: hidden; display: grid; background: color-mix(in srgb, var(--card) 92%, transparent); }
.ctx-head { display: grid; gap: .15rem; padding: .9rem 1.1rem .7rem; text-align: center; border-bottom: 1px solid var(--line); }
.ctx-head span { font-size: .8rem; color: var(--muted); }
.ctx-box button { display: flex; align-items: center; gap: .8rem; padding: .95rem 1.2rem; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; font-size: 1.02rem; color: var(--text-strong, var(--ink)); text-align: left; cursor: pointer; }
.ctx-box button:first-of-type { border-top: 0; }
.ctx-box button svg { width: 20px; height: 20px; color: var(--gold-ink); }
.ctx-cancel { border: 0; padding: 1rem; font: inherit; font-weight: 700; font-size: 1.02rem; color: var(--text-strong, var(--ink)); background: var(--card); cursor: pointer; }
html.native [data-ev] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* Drafts kept on this phone */
.draft-tag { display: block; font-size: .76rem; color: var(--muted); margin-top: .3rem; }
.draft-tag.restored { color: var(--gold-ink); font-weight: 600; }
.draft-tag .link-btn { font-size: inherit; margin-left: .3rem; }

/* iOS's own tab bar in the app (native.js adds html.native-tabs): the web one steps aside, and the
   page leaves room for the native one. */
html.native-tabs .tabbar, html.native-tabs .sb-tabs { display: none !important; }
@media (max-width: 900px) {
  html.native-tabs .main { padding-bottom: calc(var(--native-tab-h, 90px) + 1.2rem); }
  html.native-tabs .toast { bottom: calc(var(--native-tab-h, 90px) + 12px); }
}
html.native-tabs body.sb-app .sb-main { padding-bottom: calc(var(--native-tab-h, 90px) + 1.2rem); }

/* Pages pushing and popping on a phone (portal.js): solid while they slide, a soft edge on the one on top. */
@media (max-width: 900px) {
  #view.sliding { position: relative; background: var(--surface); will-change: transform; }
  #view.swiping, .page-ghost.on-top { box-shadow: -12px 0 28px rgba(0, 0, 0, .12); }
  .page-ghost { background: var(--surface); will-change: transform; contain: layout paint; }
  .swipe-shade { position: fixed; inset: 0; z-index: 4; background: #000; opacity: .18; pointer-events: none; }
}

/* ---------- Home and Dashboard on a phone: less scrolling to get to what matters ---------- */
@media (max-width: 700px) {
  /* The greeting: one compact line, not a hero (its buttons are in the quick row just below). */
  .banner { padding: .85rem 1rem; margin-bottom: .9rem; gap: .5rem; border-radius: 16px; }
  .banner h2 { font-size: 1.3rem; line-height: 1.15; margin: 0 0 .1rem; }
  .banner .eyebrow { font-size: .64rem; margin-bottom: .15rem; }
  .banner p { font-size: .8rem; }
  .banner > .btn, .banner > div + div { display: none !important; }
  .banner .banner-crown { width: 110px; bottom: -10px; right: 6%; }
  /* Needs you today: the action sits beside the item, not on a row of its own. */
  .needs-list li { flex-wrap: nowrap; }
  .needs-list li > a { flex: 1 1 auto; flex-basis: auto; padding: .55rem 0; gap: .65rem; }
  .needs-list strong { font-size: .9rem; }
  .needs-acts { padding: 0; flex-wrap: nowrap; }
  .needs-acts .btn { padding: .3rem .7rem; min-height: 32px; font-size: .78rem; }
  .needs-acts .btn + .btn { display: none; }   /* the second choice (Can't, Decline) is one tap away on the item */
  /* At a glance: two to a row. */
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .stat { padding: .7rem .8rem; }
  .stat b { font-size: 1.45rem; }
  .stat .spark { height: 22px; }
  .stat-goal, .stat-funnel { grid-column: 1 / -1; }
  /* My year: the four rings in one row. */
  .my-rings { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .2rem; }
  .my-ring { padding: .3rem 0; gap: .3rem; }
  .my-ring .ring { --size: 64px !important; }
  .my-ring > span { font-size: .68rem; text-align: center; }
  /* The calendar tip: one line. */
  .cal-nudge { padding: .6rem .8rem; gap: .6rem; margin-bottom: .9rem; flex-wrap: nowrap; }
  .cal-nudge .btn { flex: none; margin-left: 0; }
  .cal-nudge .grow span { display: none; }
  .cal-nudge .grow { flex: 1; }
  .cal-nudge .close-x { flex: none; width: 32px; height: 32px; }
  .cal-nudge strong { font-size: .86rem; }
  .dcard { padding: 1rem 1rem; }
}

/* The titleholder's package: a fold-out (one line on a phone). */
.pkg-mine > summary { list-style: none; cursor: pointer; }
.pkg-mine > summary::-webkit-details-marker { display: none; }
.pkg-mine > summary::after { content: '›'; margin-left: .5rem; color: var(--muted); font-size: 1.3rem; line-height: 1; transition: transform .2s ease; }
.pkg-mine[open] > summary::after { transform: rotate(90deg); }
.pkg-mine:not([open]) > summary { margin-bottom: 0; }
@media (max-width: 700px) { .pkg-mine > summary h3 { font-size: 1rem; } }

/* SashBoard plans (110): the plan in Settings, and what a feature on a higher plan shows instead. */
.plan-gate { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; border: 1px solid var(--gold-line); background: linear-gradient(135deg, var(--gold-100), var(--card) 75%); }
.plan-gate .grow { display: grid; gap: .15rem; flex: 1; min-width: 12rem; }
.plan-gate .grow span { font-size: .86rem; color: var(--muted); }
.plan-gate-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--card); color: var(--gold-ink, #7a6224); }
.plan-gate-ic svg { width: 20px; height: 20px; }
.plan-now { display: grid; gap: .2rem; margin: 0 0 .4rem; }
.plan-now span { font-size: .88rem; color: var(--muted); }
.plan-btns { display: flex; gap: .4rem; flex: none; }
@media (max-width: 560px) { .plan-panel .settings-list li { flex-wrap: wrap; } .plan-btns { width: 100%; } .plan-btns .btn { flex: 1; } }