/* ==========================================================================
   Mesa Academy Drama Club - site styles
   You normally do not need to edit this file. Content lives in /data/*.json
   ========================================================================== */

:root {
  --green-900: #14331f;
  --green-700: #1f5c33;
  --green-500: #3f8f4a;
  --green-300: #8fc87a;
  --gold: #e0a53c;
  --gold-soft: #fdf1d8;
  --pink: #d4436e;
  --pink-soft: #fde7ee;
  --plum: #6b3f8f;
  --plum-soft: #efe6f7;

  --bg: #f7f5ef;
  --bg-raised: #ffffff;
  --bg-sunken: #efece3;
  --ink: #1d2a21;
  --ink-soft: #556155;
  --line: #ddd8ca;

  --radius: 14px;
  --shadow: 0 1px 2px rgba(20, 51, 31, .06), 0 8px 24px rgba(20, 51, 31, .06);
  --wrap: 1020px;
  --navh: 50px;   /* height of the sticky nav bar; sticky headers park below it */
  --art-inset: 28px;        /* how far the house is held in from the content column */
  --art-inset-wide: 60px;   /* the outhouse, Fiona's tower and the Duloc towers */
  --show-green: #a9d49a;   /* the show title in the slim header */
  --font: "Lexend", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12180f;
    --bg-raised: #1b2318;
    --bg-sunken: #161d14;
    --ink: #eef2e8;
    --ink-soft: #a9b5a4;
    --line: #2e3a2b;
    --pink-soft: #3a1b26;
    --gold-soft: #3a2f14;
    --plum-soft: #2c2038;
    --green-300: #9ed48c;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #12180f;
  --bg-raised: #1b2318;
  --bg-sunken: #161d14;
  --ink: #eef2e8;
  --ink-soft: #a9b5a4;
  --line: #2e3a2b;
  --pink-soft: #3a1b26;
  --gold-soft: #3a2f14;
  --plum-soft: #2c2038;
  --green-300: #9ed48c;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--green-700); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) a { color: var(--green-300); }
}
:root[data-theme="dark"] a { color: var(--green-300); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* ---------- Banner ---------- */
.banner {
  background: var(--gold);
  color: #2a1d00;
  text-align: center;
  font-weight: 600;
  font-size: .95rem;
  padding: 10px 20px;
}

/* ---------- Header ---------- */
.masthead {
  background: linear-gradient(180deg, var(--green-700), var(--green-900));
  color: #fff;
  text-align: center;
  padding: 24px 20px 16px;
}
.masthead a { color: #fff; }
.masthead .school {
  font-size: clamp(1rem, 2.6vw, 1.3rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 14px 0 2px;
  font-weight: 600;
}
.masthead .presents {
  font-size: .85rem; letter-spacing: .2em; text-transform: uppercase;
  opacity: .8; margin: 0 0 14px;
}
.masthead .season {
  font-size: .85rem; letter-spacing: .18em; text-transform: uppercase;
  opacity: .85; margin: 8px 0 0;
}
.masthead h1 {
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  margin: 0;
  line-height: 1.15;
}
.logo-club { width: 120px; height: auto; }
.logo-show { width: min(420px, 80%); height: auto; margin: 6px auto 0; display: block; }

/* Every page but the home page wears a slim version of the header. */
.masthead.is-compact { padding: 10px 20px; }
.masthead.is-compact .brand {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  text-decoration: none; color: #fff;
}
.masthead.is-compact .logo-club { width: 44px; }
.masthead.is-compact .brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.masthead.is-compact .school {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  opacity: .85; margin: 0; font-weight: 600;
}
.masthead.is-compact .show {
  font-family: "Bree Serif", Georgia, serif;
  font-size: 1.15rem; font-weight: 400; letter-spacing: .01em;
  color: var(--show-green);
}
@media (max-width: 480px) {
  .masthead.is-compact .school { font-size: .62rem; letter-spacing: .1em; }
  .masthead.is-compact .show { font-size: 1.02rem; }
}

/* ---------- Nav ---------- */
.nav {
  background: var(--green-900);
  border-bottom: 3px solid var(--gold);
  position: sticky; top: 0; z-index: 30;
}
.nav .wrap {
  display: flex; gap: 2px; flex-wrap: nowrap; justify-content: safe center;
  padding: 0 8px; overflow-x: auto; scrollbar-width: none;
}
.nav .wrap::-webkit-scrollbar { display: none; }
.nav a {
  color: #e9f2e5; text-decoration: none; white-space: nowrap;
  padding: 12px 13px; font-size: .92rem; font-weight: 600;
  border-bottom: 3px solid transparent; margin-bottom: -3px;
}
@media (max-width: 480px) {
  .nav .wrap { gap: 0; padding: 0 4px; }
  .nav a { padding: 12px 7px; font-size: .82rem; }
}
@media (max-width: 760px) {
  :root { --art-inset: 14px; --art-inset-wide: 24px; }
}
.nav a:hover { color: #fff; border-bottom-color: var(--green-300); }
.nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--gold); }

/* ---------- Contact strip ---------- */
/* Contacts sit quietly in the footer on every page. */
.contact-strip {
  display: grid; gap: 10px 28px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin: 0 0 20px; padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  text-align: left;
}
.contact-card .label {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  opacity: .7; margin-bottom: 1px;
}
.contact-card .value { font-weight: 600; word-break: break-word; }
.contact-card .detail { opacity: .7; font-size: .82rem; word-break: break-word; }

/* ---------- Sections ---------- */
section { margin: 40px 0; scroll-margin-top: 70px; }
main > section:first-of-type, main > div:first-of-type > section:first-of-type { margin-top: 22px; }
main > div:first-of-type > .jump-bar { margin-top: 18px; }
h2 {
  font-size: clamp(1.3rem, 3.4vw, 1.75rem);
  margin: 0 0 6px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--gold);
}
h3 {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); margin: 26px 0 10px;
}
.section-intro { color: var(--ink-soft); margin: 10px 0 0; }
p.lead { font-size: 1.05rem; }

/* ---------- Announcements ---------- */
.announce-grid {
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 18px;
}
.announce {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-left: 5px solid var(--green-500);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
}
.announce .when {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pink); font-weight: 700;
}
.announce .title { font-weight: 700; font-size: 1.05rem; margin-top: 2px; }
.announce .detail { color: var(--ink-soft); font-size: .95rem; }
.announce .detail strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.announce .more { display: inline-block; margin-top: 8px; font-size: .88rem; font-weight: 600; }
.announce.is-show { border-left-color: var(--pink); }
.announce.is-next { border-left-color: var(--gold); background: var(--gold-soft); }

/* ---------- Links ---------- */
.link-grid {
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.link-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
  transition: transform .12s ease, border-color .12s ease;
}
.link-card:hover { transform: translateY(-2px); border-color: var(--green-500); }
.link-card .title { font-weight: 700; }
.link-card .title .arrow { color: var(--green-500); }
.link-card .note { color: var(--ink-soft); font-size: .9rem; margin-top: 2px; }

/* ---------- Calendar ---------- */
.jump-bar { margin: 20px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.cast-picker { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cast-picker-label { font-weight: 600; font-size: .9rem; }
.cast-picker select {
  font: inherit; font-size: .92rem; color: var(--ink);
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px; min-width: 210px; max-width: 100%;
}
.cast-picker select:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.jump {
  font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer;
  background: var(--gold); color: #2a1d00;
  border: 1px solid var(--gold); border-radius: 999px; padding: 9px 18px;
}
.jump:hover { filter: brightness(1.06); }
.jump:focus-visible { outline: 3px solid var(--green-500); outline-offset: 2px; }
details.month { margin: 26px 0 0; }
.month-label {
  position: sticky; top: var(--navh); z-index: 5;
  background: var(--bg); cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: 10px;
  font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700;
  padding: 8px 0 6px; border-bottom: 2px solid var(--line);
}
.month-label::-webkit-details-marker { display: none; }
.month-label::before {
  content: "\25be"; font-size: 1rem; line-height: 1;
  transition: transform .15s ease; color: var(--green-500);
}
details.month:not([open]) > .month-label::before { transform: rotate(-90deg); }
.month-label:hover { color: var(--ink); }
.month-label:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.month-count {
  margin-left: auto; letter-spacing: .08em; font-weight: 600; text-transform: none;
  font-size: .78rem; opacity: .8;
}
details.month.is-done > .month-label { opacity: .65; }
.events { display: grid; gap: 10px; padding-top: 10px; }
/* An explicit display on a details child would otherwise defeat the collapse. */
details.month:not([open]) > .events { display: none; }

.event {
  /* Clears the sticky nav and the sticky month heading when jumped to. */
  scroll-margin-top: calc(var(--navh) + 46px);
  display: grid; grid-template-columns: 92px 1fr;
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
}
.event .date {
  background: var(--bg-sunken); padding: 12px 8px; text-align: center;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: center;
}
.event .date .mon {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700;
}
.event .date .num { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.event .date .wd {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
}
.event .body { padding: 12px 16px; min-width: 0; }
.event .head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.event .head .title { font-weight: 700; font-size: 1.05rem; }
.event .event-link { font-size: .9rem; margin-top: 2px; }
/* Extra lines from the Title cell: quieter than the title, and plainer than the
   times and the bulleted notes below them. */
.event .subtitle {
  margin-top: 3px; font-size: .92rem; line-height: 1.35;
  color: var(--ink-soft); font-style: italic;
}
.event .subtitle + .subtitle { margin-top: 1px; }

.blocks {
  display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px;
  margin-top: 8px;
}
.blocks .btime {
  font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--ink);
}
.blocks .bwhat { color: var(--ink-soft); }

.notes { margin-top: 6px; font-size: .93rem; color: var(--ink-soft); }
.notes ul { margin: 2px 0 0; padding-left: 20px; }
.notes li + li { margin-top: 2px; }
.notes-time {
  margin-top: 8px; font-weight: 600; color: var(--ink);
  font-size: .85rem; font-variant-numeric: tabular-nums;
}
.cast-needed { margin-top: 8px; font-size: .9rem; color: var(--ink-soft); }
.cast-needed-label { margin-right: 8px; }
/* Loading placeholders: grey bars in the shape of the cards, with a soft
   shimmer, shown until the Google Sheet content arrives. */
.sk-bar {
  display: block; height: .8rem; max-width: 100%; margin: 8px 0 0; border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-sunken) 0%, var(--line) 50%, var(--bg-sunken) 100%);
  background-size: 200% 100%; animation: sk-shimmer 1.4s ease-in-out infinite;
}
.sk-bar:first-child { margin-top: 0; }
.sk-bar.sk-small { height: .6rem; }
.sk-bar.sk-big { height: 1.5rem; margin: 6px auto; }
.sk-bar.sk-title { height: 1.05rem; margin-top: 6px; }
.sk-bar.sk-h2 { height: 1.6rem; margin: 26px 0 0; }
.sk-bar.sk-h3 { height: 1.1rem; margin: 26px 0 0; }
.sk-bar.sk-pill { height: 2.3rem; border-radius: 999px; margin: 0; }
.sk-bar.sk-grow { flex: 1 1 240px; }
.skeleton .event .date .sk-bar { margin-left: auto; margin-right: auto; }
.skeleton .events .event { min-height: 96px; }
.sk-rows { display: grid; gap: 8px; margin-top: 12px; }
.sk-row {
  display: flex; align-items: center; gap: 18px; padding: 14px 18px;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
}
.sk-row .sk-bar { margin: 0; }
@keyframes sk-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .sk-bar { animation: none; } }
@media (max-width: 560px) {
  .skeleton .event .date .sk-bar { margin: 0; }
  .skeleton .event .date .sk-big { height: 1.1rem; }
}

.backup-note {
  margin: 18px 0 0; padding: 10px 14px; border-radius: 10px;
  background: var(--gold-soft); border: 1px solid var(--gold); color: var(--ink); font-size: .9rem;
}
.cast-names { display: inline; }
/* Each name shows its role on hover, or on tap, since a tap focuses it. */
.cast-name {
  position: relative; display: inline-block; margin: 2px 4px 0 0;
  padding: 1px 8px; border-radius: 999px; cursor: help;
  background: var(--bg-sunken); border: 1px solid var(--line); color: var(--ink);
  font-size: .84rem; line-height: 1.5;
}
.cast-name:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.cast-name[data-role]:hover::after,
.cast-name[data-role]:focus::after {
  content: attr(data-role);
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  z-index: 20; white-space: nowrap; pointer-events: none;
  background: var(--green-900); color: #fff; border-radius: 6px;
  padding: 4px 9px; font-size: .78rem; font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
/* The student picked in "Show rehearsals for": a brighter ring so they can spot themselves. */
.cast-name.is-picked {
  border-color: var(--green-500); font-weight: 700;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--green-500) 45%, transparent);
}
.cast-name.is-unmatched { cursor: default; border-style: dashed; color: var(--ink-soft); font-style: italic; }
@media (max-width: 560px) {
  /* Centred labels would run off the edge of a narrow screen; start them at the name instead. */
  .cast-name[data-role]:hover::after,
  .cast-name[data-role]:focus::after {
    left: 0; transform: none; white-space: normal; width: max-content; max-width: 70vw;
  }
}
/* Cards clip their contents for the rounded corners; let a name's role label
   rise above the card edge instead of being cut off. */
.event:has(.cast-name:hover), .event:has(.cast-name:focus) { overflow: visible; z-index: 3; }
.cast-needed-label { font-weight: 600; color: var(--ink); }

/* Picking a name on the calendar: say whether they are called, and fade the
   rehearsals they can skip. */
.call-note {
  display: inline-block; margin-top: 6px;
  font-size: .8rem; font-weight: 700; border-radius: 999px; padding: 3px 12px;
}
/* The display above would otherwise beat the browser's rule for hidden elements,
   leaving the badge on screen after switching back to Everyone. */
.call-note[hidden] { display: none; }
.call-note.is-yes { background: var(--green-500); color: #fff; }
.call-note.is-no { background: var(--bg-sunken); color: var(--ink); border: 1px solid var(--line); }
.call-note.is-study { background: var(--gold-soft); color: var(--ink); border: 1px solid var(--gold); }
.call-note.is-unposted { background: transparent; color: var(--ink-soft); border: 1px dashed var(--line); }
.event.is-not-called { opacity: .45; }
.event.is-not-called .call-note { opacity: 1; }
.event.is-called { border-color: var(--green-500); }

.study {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: .88rem; color: var(--ink-soft);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.study-label { font-weight: 600; }
.study-name { color: var(--ink); }
/* A date still waiting for a parent: say so in pink, with a sign-up button beside it. */
.study-open { color: var(--pink); font-weight: 700; }
.study-link {
  text-decoration: none; font-weight: 700; font-size: .82rem;
  background: var(--green-500); color: #fff !important;
  border-radius: 999px; padding: 3px 12px;
}
.study-link:hover { background: var(--green-700); }
.study-note { flex-basis: 100%; }

.badge {
  display: inline-block; background: var(--pink); color: #fff;
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 10px; font-weight: 700;
}
.badge.next { background: var(--gold); color: #2a1d00; }

.event.is-show { border-color: var(--pink); }
.event.is-show .date { background: var(--pink-soft); border-right-color: var(--pink); }
.event.is-past { opacity: .5; }
.event.is-next { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft), var(--shadow); }

@media (max-width: 560px) {
  .event { grid-template-columns: 1fr; }
  .event .date {
    flex-direction: row; gap: 8px; align-items: baseline; justify-content: flex-start;
    text-align: left; padding: 8px 16px;
    border-right: none; border-bottom: 1px solid var(--line);
  }
  .event .date .num { font-size: 1.15rem; }
  .blocks { grid-template-columns: 1fr; gap: 0; }
  .blocks .bwhat { margin-bottom: 6px; }

}

/* ---------- Checklist ---------- */
.checklist { list-style: none; padding: 0; margin: 16px 0 0; }
.checklist li {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-left: 5px solid var(--gold);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 8px;
  color: var(--ink-soft); font-size: .95rem;
}

/* ---------- Cast page ---------- */

/* Wide screens: the banner hangs to the right of the proclamation.
   Phones: his initial goes behind the text instead, since a tall banner
   would push the reading column into a sliver. */
.cast-head {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 28px;
  align-items: start; margin-bottom: 8px;
}
.cast-intro { position: relative; min-width: 0; }
.cast-intro p { position: relative; z-index: 1; }
.cast-intro p:first-of-type { margin-top: 0; }

.cast-banner {
  width: 132px; height: auto; align-self: start;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .25));
}

.cast-watermark { display: none; }
.cast-watermark svg {
  width: 100%; height: 100%; display: block;
}

@media (max-width: 760px) {
  .cast-head { display: block; }
  .cast-banner { display: none; }
  .cast-watermark {
    display: block; position: absolute; z-index: 0;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    height: 92%; width: auto; aspect-ratio: 338 / 773;
    color: var(--ink); opacity: .12; pointer-events: none;
  }
}
.legend { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 18px 0 4px; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--ink-soft); }

.track {
  display: inline-block; border-radius: 999px; padding: 2px 10px;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; white-space: nowrap;
  border: 1px solid transparent;
}
.track-castle { background: var(--plum-soft); color: var(--plum); border-color: var(--plum); }
.track-storybook { background: var(--pink-soft); color: var(--pink); border-color: var(--pink); }
.track-both { background: var(--bg-sunken); color: var(--ink-soft); border-color: var(--line); }
.track-tbd { background: var(--gold-soft); color: #8a6110; border-color: var(--gold); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .track-castle { color: #d4b6ef; }
  :root:not([data-theme="light"]) .track-storybook { color: #f7a5be; }
  :root:not([data-theme="light"]) .track-tbd { color: #e8c67e; }
}

.search-row { margin: 14px 0 10px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.search-row input {
  flex: 1 1 240px; padding: 11px 14px; font: inherit;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-raised); color: var(--ink);
}
.search-row .count { color: var(--ink-soft); font-size: .9rem; }
.filter-note { color: var(--ink-soft); font-size: .9rem; margin: 0 0 12px; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filter {
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  background: var(--bg-raised); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px;
}
.filter:hover { border-color: var(--green-500); box-shadow: 0 0 0 3px var(--bg-sunken); }
.filter.is-on { background: var(--green-700); border-color: var(--green-700); color: #fff; }

/* Each track button wears its own colour: a ring on hover, filled once chosen. */
.filter-castle:hover { border-color: var(--plum); box-shadow: 0 0 0 3px var(--plum-soft); }
.filter-castle.is-on { background: var(--plum); border-color: var(--plum); color: #fff; }
.filter-storybook:hover { border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-soft); }
.filter-storybook.is-on { background: var(--pink); border-color: var(--pink); color: #fff; }

/* No overflow here: a scroll container would trap the sticky header inside the
   table instead of parking it under the navigation bar. */
.table-scroll { border: 1px solid var(--line); border-radius: var(--radius); }
/* Round off the table's own corners inside that border. overflow: clip trims the
   square cell backgrounds without creating a scroll container. */
@media (min-width: 761px) {
  .table-scroll { overflow: clip; }
}
/* Fixed column widths, so searching or filtering does not re-measure the columns
   and squeeze a role like "Storyteller 3" onto two lines. */
table.cast {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--bg-raised); table-layout: fixed;
}
table.cast th:nth-child(1) { width: 13rem; }
table.cast th:nth-child(2) { width: 17rem; }
table.cast th:nth-child(3) { width: auto; }
table.cast th {
  position: sticky; top: var(--navh); z-index: 10;
  text-align: left; background: var(--green-700); color: #fff;
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 11px 14px; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
table.cast th:first-child { border-top-left-radius: var(--radius); }
table.cast th:last-child { border-top-right-radius: var(--radius); }
table.cast td { padding: 10px 14px; vertical-align: top; }
table.cast tbody.member > tr.first > td { border-top: 2px solid var(--line); }
table.cast tbody.member > tr.more > td { border-top: 1px dashed var(--line); }
table.cast td.actor {
  font-weight: 700; white-space: nowrap;
  border-right: 1px solid var(--line);
}
table.cast td.actor .actor-name { display: block; }
table.cast td.actor a.actor-name {
  color: inherit; text-decoration: underline dotted;
  text-decoration-color: var(--ink-soft); text-underline-offset: 3px;
}
table.cast td.actor a.actor-name:hover,
table.cast td.actor a.actor-name:focus-visible { color: var(--green-700); text-decoration: underline; }
:root[data-theme="dark"] table.cast td.actor a.actor-name:hover { color: var(--green-300); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) table.cast td.actor a.actor-name:hover { color: var(--green-300); }
}
table.cast td.actor .actor-count {
  display: block; font-weight: 600; font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
table.cast td.role { font-weight: 700; color: var(--green-700); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) table.cast td.role { color: var(--green-300); }
}
:root[data-theme="dark"] table.cast td.role { color: var(--green-300); }
/* One line per role, with its track pill beside it. */
table.cast .role-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
table.cast .role-line + .role-line { margin-top: 8px; }

/* By role: a heading row per group of roles, and the role name leads each row. */
.cast-views { margin: 4px 0 12px; }
.table-scroll[hidden] { display: none; }
table.cast tbody.roster-group th {
  position: static; box-shadow: none; border-radius: 0;
  text-align: left; padding: 16px 14px 6px; font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); background: var(--bg);
}
table.cast tbody.roster-group[hidden] { display: none; }
table.cast.by-role td.role-title { font-size: 1.02rem; border-right: 1px solid var(--line); }
table.cast.by-role td.actors .actor-name { font-weight: 600; }
table.cast.by-role td.actors a.actor-name {
  color: inherit; text-decoration: underline dotted;
  text-decoration-color: var(--ink-soft); text-underline-offset: 3px;
}

/* Scenes & songs: a scene list per track that opens into the songs. */
table.cast td.scenes-cell { font-size: .93rem; }
.my-scenes-box + .my-scenes-box { margin-top: 8px; }
.my-scenes-box summary { cursor: pointer; color: var(--ink); }
.my-scenes-box summary .track { font-size: .68rem; vertical-align: 1px; }
.my-scenes-box summary .scene-nums { display: block; font-size: .8rem; color: var(--ink-soft); margin-top: 2px; }
ol.my-scenes { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
ol.my-scenes > li { border-top: 1px dashed var(--line); padding-top: 8px; }
.my-scene-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.my-scene-name { font-weight: 700; color: var(--ink); }
.my-scene-head small { color: var(--ink-soft); }

/* Meet the characters: one card per role. */
.cast-list-head { margin-top: 28px; }
.characters { margin-top: 36px; }
.characters h3 { margin: 22px 0 10px; }
.character-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.character {
  background: var(--bg-raised); border: 1px solid var(--line); border-top: 4px solid var(--green-500);
  border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
}
.character-head { display: flex; align-items: center; gap: 10px; }
.character-icon {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.25rem; background: var(--bg-sunken);
}
.character-name { display: block; font-family: "Bree Serif", Georgia, serif; font-size: 1.12rem; line-height: 1.2; color: var(--green-700); }
:root[data-theme="dark"] .character-name { color: var(--green-300); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .character-name { color: var(--green-300); } }
.character-tags { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; font-size: .85rem; font-weight: 600; }
.character-who { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.character-who .track { font-size: .66rem; }
.character-who small { font-weight: 400; color: var(--ink-soft); font-size: .78rem; }
.character-desc strong { color: var(--ink); font-weight: 600; }
.character-desc { margin: 8px 0 0; color: var(--ink-soft); font-size: .93rem; }
table.cast tbody.member:nth-of-type(even) > tr > td {
  background: color-mix(in srgb, var(--bg-sunken) 55%, transparent);
}
/* Filtered-out people. The phone layout sets display on the group, which would
   otherwise beat the browser's own rule for hidden elements. */
table.cast tbody.member[hidden] { display: none; }

/* On a phone the table becomes one card per person: name across the top, then a
   line per role with its track pill, and the description underneath. Every cell
   border from the desktop table has to be cancelled here, or its stub shows up
   under an inline-block cell. */
@media (max-width: 760px) {
  .table-scroll { border: none; border-radius: 0; }
  table.cast { background: transparent; }
  table.cast, table.cast tbody, table.cast tr, table.cast td { display: block; width: 100%; }
  table.cast thead { display: none; }

  table.cast tbody.member {
    background: var(--bg-raised);
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px 16px 16px; margin-bottom: 12px;
  }
  table.cast tbody.member:nth-of-type(even) > tr > td,
  table.cast tbody.member > tr > td { background: transparent; }

  /* No borders on any cell; the dividers below live on the rows instead. */
  table.cast tbody.member > tr > td,
  table.cast tbody.member > tr.first > td,
  table.cast tbody.member > tr.more > td {
    border: 0; padding: 0;
  }

  table.cast tbody.member > tr.more {
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  }

  table.cast td.actor {
    white-space: normal; font-size: 1.2rem; font-weight: 700; line-height: 1.3;
    padding-bottom: 10px; margin-bottom: 12px;
    border-bottom: 2px solid var(--line);
  }
  table.cast td.actor .actor-count { display: none; }

  table.cast td.role { font-size: .95rem; font-weight: 700; letter-spacing: .02em; }
  table.cast tbody.roster-group { display: block; }
  table.cast tbody.roster-group th { display: block; padding: 14px 2px 6px; background: transparent; }
  table.cast.by-role tbody.member > tr.first > td.role-title {
    font-size: 1.2rem; line-height: 1.3; padding-bottom: 10px; margin-bottom: 12px;
    border-bottom: 2px solid var(--line);
  }
  table.cast tbody.member > tr.first > td.scenes-cell { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
}

.name-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 12px 0 0; }
.name-pills li {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px; font-size: .92rem;
}

.note-box {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; margin-top: 16px;
  color: var(--ink-soft);
}
.note-box p { margin: 0 0 8px; }
.note-box p:last-child { margin-bottom: 0; }

/* ---------- Boosters page ---------- */
.cta-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 20px 0; }
.cta {
  display: block; text-decoration: none; text-align: center;
  background: var(--green-700); color: #fff !important;
  border: 1px solid var(--green-700); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow);
  transition: transform .12s ease;
}
.cta:hover { transform: translateY(-2px); background: var(--green-500); }
.cta-icon { display: block; font-size: 1.6rem; }
.cta-label { display: block; font-weight: 700; font-size: 1.1rem; }
.cta-note { display: block; font-size: .85rem; opacity: .85; }
.cta.is-disabled {
  background: var(--bg-sunken); color: var(--ink-soft) !important;
  border: 1px dashed var(--line); box-shadow: none;
}

.committee-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); margin-top: 16px; }
.committee {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-left: 5px solid var(--green-500);
  border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
}
.committee .title { font-weight: 700; }
.committee .note { color: var(--ink-soft); font-size: .92rem; margin-top: 2px; }
.committee-link { font-size: .88rem; font-weight: 600; margin-top: 6px; }
.closing-line { margin-top: 24px; font-weight: 600; }

/* ---------- Page artwork ---------- */
/* Each page carries a piece of scenery along its foot, sitting on the footer's
   green edge. Cards above it are slightly see-through so it reads behind them.
   Everything is held the same distance in from the window edge. */
main.has-art { position: relative; }
main.has-art > section, main.has-art > div { position: relative; z-index: 1; }
main.has-art + footer.site { margin-top: 0; padding-top: 46px; }

.page-art {
  position: absolute; z-index: 0; bottom: 0; right: var(--art-inset);
  height: auto; pointer-events: none; user-select: none;
}

/* Held back until the page has drawn, so the scenery does not flash near the
   top of a still-empty page and then drop into place. */
.page-art, .duloc, .citizens { opacity: 0; transition: opacity .35s ease; }
body.art-ready .page-art, body.art-ready .duloc, body.art-ready .citizens { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .page-art, .duloc, .citizens { transition: none; }
}

/* Home: Shrek's house. Its foundation sits 10.86% up from the foot of the
   artwork, measured off the wall colour, so the image drops by a hair more. */
main.has-house { padding-bottom: 44px; }
.house { width: 440px; max-width: 48%; transform: translateY(11%); }

/* Calendar: the outhouse, aligned on the black shadow beneath it. */
main.has-outhouse { padding-bottom: 40px; }
.outhouse { right: var(--art-inset-wide); width: 210px; max-width: 34%; transform: translateY(2.8%); }

/* Shows: Fiona's tower, tall enough to reach the first show on a wide screen. */
main.has-tower { padding-bottom: 40px; }
/* Sized so the spire lands inside the first show card rather than above it. */
.fiona { right: var(--art-inset-wide); width: 128px; max-width: 26%; transform: translateY(0.4%); }

@media (max-width: 760px) {
  main.has-house { padding-bottom: 40px; }
  .house {
    right: auto; left: 50%; transform: translate(-50%, 11%);
    width: 100%; max-width: 460px;
  }
  .outhouse { width: 150px; max-width: 40%; }
  .fiona { width: 84px; max-width: 30%; }
}

/* Cast: the wall of Duloc. The middle is one merlon of wall repeated, and it
   runs only between the towers, which hide its cut ends. The band is a sibling
   of <main>, so it spans the window without the scrollbar arithmetic that 100vw
   drags in; a negative margin lifts it back over the foot of the page and a
   negative z-index keeps it behind the cards. */
main.has-castle { padding-bottom: 210px; }
/* Same centred column as the rest of the page, so the towers line up with the
   artwork on the other pages rather than with the window edge. */
.duloc {
  position: relative; z-index: -1;
  width: 100%; max-width: var(--wrap); height: 210px;
  margin: -210px auto 0;
  pointer-events: none; user-select: none;
}
.duloc + footer.site { margin-top: 0; padding-top: 20px; }
.duloc-wall {
  position: absolute; bottom: 0; height: 94px;
  left: var(--art-inset-wide); right: var(--art-inset-wide);
  background: url("../img/duloc-wall.png") repeat-x bottom left / auto 100%;
}
.duloc-tower { position: absolute; bottom: 0; height: 210px; width: auto; }
.duloc-tower.left { left: var(--art-inset-wide); }
/* The right tower's pennant overhangs its stonework by 11 of the artwork's
   pixels, so nudge it out to line the tower itself up with its twin. */
.duloc-tower.right { right: calc(var(--art-inset-wide) - 3px); }
.duloc-door {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 74px;
}

@media (max-width: 760px) {
  main.has-castle { padding-bottom: 150px; }
  .duloc { height: 150px; margin-top: -150px; }
  .duloc-wall { height: 67px; }
  .duloc-tower { height: 150px; }
  .duloc-tower.right { right: calc(var(--art-inset-wide) - 2px); }
  .duloc-door { height: 53px; }
}

/* Scenes: a line of Duloc citizens from the show flyer, repeated across the
   window. Bob hair and red top alternates with pigtails and blue top, and the
   tile is eight wide so each of the flyer's four skin tones wears both. */
main.has-citizens { padding-bottom: 28px; }
.citizens {
  height: 110px; pointer-events: none; user-select: none;
  background: url("../img/duloc-citizens.svg") repeat-x center bottom / auto 100%;
}
.citizens + footer.site { margin-top: 0; padding-top: 20px; }
@media (max-width: 760px) {
  .citizens { height: 80px; }
}

/* Card surfaces are slightly see-through so the page artwork reads behind them. */
.link-card, .event, .announce, .committee, .note-box, .name-pills li {
  background: color-mix(in srgb, var(--bg-raised) 72%, transparent);
  backdrop-filter: blur(1.5px);
}
.link-card:hover { background: color-mix(in srgb, var(--bg-raised) 92%, transparent); }
.event.is-next { background: color-mix(in srgb, var(--bg-raised) 88%, transparent); }

/* ---------- Footer ---------- */
footer.site {
  margin-top: 56px; padding: 26px 0 36px;
  background: var(--green-900); color: #cfe0c8; text-align: center; font-size: .9rem;
}
footer.site .wrap { text-align: center; }
#footer-note { font-style: italic; font-size: 1rem; opacity: .92; margin: 4px 0 0; }
.footer-feedback { margin: 0 0 16px; }
footer.site .footer-feedback a {
  display: inline-block; text-decoration: none; font-weight: 600; font-size: .92rem;
  color: #2a1d00; background: var(--gold); border-radius: 999px; padding: 8px 18px;
}
footer.site .footer-feedback a:hover { filter: brightness(1.07); }
footer.site .footer-feedback a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
footer.site a, footer.site .contact-card .value a { color: #fff; }
footer.site a { color: #fff; }

/* ---------- Utility ---------- */
.loading, .error {
  padding: 18px; border-radius: var(--radius); border: 1px dashed var(--line);
  color: var(--ink-soft); text-align: center;
}
.error { border-color: var(--pink); color: var(--pink); }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 8px; top: 8px; position: fixed; z-index: 99;
  background: #fff; color: #000; padding: 10px 14px; border-radius: 8px;
}

/* ---------- scenes page ---------- */

.scene-head h2 { margin: 0 0 4px; }
.scene-tabs { margin: 14px 0 10px; }
.scene-tracks { margin: 0 0 12px; }
.scene-panel[hidden] { display: none; }

/* grid: the scene names run up the columns so 30-odd of them fit across */
/* The grid scrolls inside its own box, no taller than the window, so the scene
   names across the top stay in view however far down the cast you go. */
.grid-scroll {
  overflow: auto; max-height: calc(100vh - var(--navh) - 24px); max-height: calc(100dvh - var(--navh) - 24px);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised);
}
table.scene-grid { border-collapse: separate; border-spacing: 0; font-size: .85rem; width: 100%; }
table.scene-grid th, table.scene-grid td { padding: 0; }
table.scene-grid thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-raised); border-bottom: 1px solid var(--line); vertical-align: bottom; }
table.scene-grid th.corner {
  left: 0; z-index: 3; text-align: left; padding: 10px 12px; white-space: nowrap;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
}
table.scene-grid th.scene-col { width: auto; min-width: 30px; font-weight: 500; }
table.scene-grid th.scene-col span {
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  padding: 10px 7px; max-height: 160px; overflow: hidden; text-overflow: ellipsis;
}
table.scene-grid th.corner, table.scene-grid tbody th.who { width: 190px; }
/* A scene with a song: a note under its name and a gold tint. */
table.scene-grid th.has-song { background: color-mix(in srgb, var(--gold-soft) 70%, var(--bg-raised)); }
table.scene-grid th .song-mark { display: block; padding: 0 0 6px; color: var(--gold); font-size: .95rem; line-height: 1; }

table.scene-grid tbody th.who {
  position: sticky; left: 0; z-index: 1; background: var(--bg-raised); text-align: left;
  border-right: 1px solid var(--line); padding: 3px 12px; white-space: nowrap; font-weight: 600;
}
table.scene-grid tbody th.who small { display: block; font-weight: 400; color: var(--ink-soft); font-size: .72rem; }
.who-link { font: inherit; font-weight: 600; color: var(--green-700); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.who-link:hover { text-decoration: underline; }
:root[data-theme="dark"] .who-link { color: var(--green-300); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .who-link { color: var(--green-300); } }
table.scene-grid tr.group-row th {
  position: sticky; left: 0; background: var(--bg-raised); text-align: left; font-family: inherit;
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
  padding: 14px 12px 4px;
}
table.scene-grid td.cell { border-bottom: 1px solid var(--bg-sunken); height: 26px; min-width: 30px; text-align: center; }
.cell-num { font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
table.scene-grid td.cell.on { background: var(--cos-bg); box-shadow: inset 0 0 0 1px var(--cos-line); border-radius: 5px; }

/* one colour per costume, in the order a student first wears it */
.cos-1 { --cos-bg: var(--bg-sunken); --cos-line: var(--ink-soft); }
.cos-2 { --cos-bg: #ffe2b8; --cos-line: #d98800; }
.cos-3 { --cos-bg: #ffd0cc; --cos-line: #d63a30; }
.cos-4 { --cos-bg: #d4f3c4; --cos-line: #3f9c22; }
.cos-5 { --cos-bg: #d6e4ff; --cos-line: #3d6fd6; }
.cos-6 { --cos-bg: #ecdcf7; --cos-line: #8a4fc0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cos-2 { --cos-bg: #4a3212; --cos-line: #ffae40; }
  :root:not([data-theme="light"]) .cos-3 { --cos-bg: #4d1a17; --cos-line: #ff6b61; }
  :root:not([data-theme="light"]) .cos-4 { --cos-bg: #1f4214; --cos-line: #6fe04a; }
  :root:not([data-theme="light"]) .cos-5 { --cos-bg: #1b2c4d; --cos-line: #7fa6ff; }
  :root:not([data-theme="light"]) .cos-6 { --cos-bg: #33204a; --cos-line: #c39af0; }
}
:root[data-theme="dark"] .cos-2 { --cos-bg: #4a3212; --cos-line: #ffae40; }
:root[data-theme="dark"] .cos-3 { --cos-bg: #4d1a17; --cos-line: #ff6b61; }
:root[data-theme="dark"] .cos-4 { --cos-bg: #1f4214; --cos-line: #6fe04a; }
:root[data-theme="dark"] .cos-5 { --cos-bg: #1b2c4d; --cos-line: #7fa6ff; }
:root[data-theme="dark"] .cos-6 { --cos-bg: #33204a; --cos-line: #c39af0; }

.cos {
  display: inline-block; background: var(--cos-bg); border: 1px solid var(--cos-line);
  border-radius: 7px; padding: 1px 8px; font-size: .8rem; font-weight: 600; white-space: nowrap;
}

/* student view */
.scene-picker {
  flex: 1 1 240px; padding: 11px 14px; font: inherit; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg-raised);
}
.student-out { display: grid; gap: 16px; }
/* Both tracks side by side once there is room; stacked on a narrow screen. */
@media (min-width: 900px) {
  .student-out { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.track-card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.track-card h3 { margin: 0; font-size: 1.25rem; }
.track-card-castle h3 { color: var(--plum); }
.track-card-storybook h3 { color: var(--pink); }
/* Same scenes on both tracks: one card, across the full width. */
.track-card-both { grid-column: 1 / -1; }
.track-card-both h3 { color: var(--green-700); }
:root[data-theme="dark"] .track-card-both h3 { color: var(--green-300); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .track-card-both h3 { color: var(--green-300); } }
.track-sub { color: var(--ink-soft); font-size: .9rem; margin: 2px 0 12px; }
.scene-run { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.scene-run > li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: start; }
.scene-run > li > :only-child { grid-column: 1 / -1; }
.run-num { color: var(--ink-soft); font-size: .85rem; text-align: right; padding-top: 7px; font-variant-numeric: tabular-nums; }
.run-on {
  border: 1px solid var(--cos-line, var(--line)); border-radius: 10px; padding: 7px 12px; display: flex;
  flex-wrap: wrap; gap: 4px 12px; align-items: center; justify-content: space-between;
  background: color-mix(in srgb, var(--cos-bg, transparent) 30%, var(--bg-raised));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cos-line, var(--line)) 22%, transparent);
}
.run-on strong { font-size: 1.02rem; }
.run-on small { display: block; color: var(--ink-soft); }
.run-on ul.songs { flex-basis: 100%; }
/* The intermission, as a labelled line in a list of scenes. */
.break-line, .scene-run > li.run-break, .off-list > li.off-break {
  display: flex; align-items: center; gap: 10px; color: var(--ink-soft);
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.break-line::before, .break-line::after,
.scene-run > li.run-break::before, .scene-run > li.run-break::after,
.off-list > li.off-break::before, .off-list > li.off-break::after {
  content: ""; flex: 1; border-top: 2px solid var(--gold);
}
.break-line { margin: 4px 0; }
.scene-run > li.run-break { margin: 6px 0; }
.run-change { background: var(--gold-soft); border-radius: 10px; padding: 6px 12px; font-size: .9rem; }
.run-change.is-quick { background: var(--pink-soft); }
.run-change.is-quick strong { color: var(--pink); }
.run-off { border: 1px dashed var(--line); border-radius: 10px; }
.run-off summary { cursor: pointer; padding: 6px 12px 6px 30px; position: relative; display: grid; gap: 1px; list-style: none; }
.run-off summary::-webkit-details-marker { display: none; }
.run-off summary::before { content: "▸"; position: absolute; left: 12px; top: 6px; color: var(--ink-soft); }
.run-off[open] summary::before { content: "▾"; }
.off-count { color: var(--ink-soft); font-size: .85rem; }
.off-cue { font-size: .9rem; }
.off-list { list-style: none; margin: 0; padding: 0 12px 8px 30px; display: grid; gap: 2px; font-size: .85rem; color: var(--ink-soft); }
.off-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px; }
.off-list li.is-cue { color: var(--ink); font-weight: 600; }
.off-list .run-num { padding-top: 0; }

/* The scene page is a wide table, so it gets the window rather than the reading
   column the other pages use. */
.wrap-wide { max-width: min(1760px, 100%); }
.wrap-wide .scene-head p, .wrap-wide .track-sub { max-width: 80ch; }

/* Phones get the scene list; a 33-column table only works on a big screen. */
.scene-cards { display: none; }
@media (max-width: 760px) {
  .grid-scroll { display: none; }
  .scene-cards { display: grid; gap: 8px; }
  .student-out .track-card { padding: 14px; }
}
.scene-card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); }
.scene-card summary {
  cursor: pointer; padding: 10px 14px; display: flex; gap: 10px; align-items: baseline; list-style: none;
}
.scene-card summary::-webkit-details-marker { display: none; }
.scene-card .scene-no {
  flex: none; min-width: 26px; text-align: center; font-variant-numeric: tabular-nums;
  font-size: .8rem; font-weight: 700; color: var(--ink-soft);
}
.scene-card .scene-title small { display: block; color: var(--ink-soft); font-size: .82rem; font-weight: 400; }
.scene-card[open] summary { border-bottom: 1px solid var(--line); }
.scene-card-group {
  margin: 10px 14px 0; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
}
.scene-card-list { list-style: none; margin: 6px 0 0; padding: 0 14px 4px; display: grid; gap: 6px; }
.scene-card-list:last-child { padding-bottom: 12px; }
.scene-card-list li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.scene-card-list small { color: var(--ink-soft); }
.scene-card .filter-note { padding: 0 14px 12px; margin: 6px 0 0; }

/* Songs tab: each scene's songs, each with its two practice tracks. */
.song-scenes { display: grid; gap: 12px; margin-top: 12px; }
.song-scene {
  background: var(--bg-raised); border: 1px solid var(--line); border-left: 4px solid var(--green-500);
  border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow);
}
.song-scene h4 { margin: 0; font-size: .95rem; }
ul.songs { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
li.song { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .9rem; }
.song-title { font-weight: 600; }
.song-links { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.song-link {
  text-decoration: none; font-size: .78rem; font-weight: 700;
  border-radius: 999px; padding: 2px 10px;
  background: var(--green-700); color: #fff !important;
}
.song-link:hover { background: var(--green-500); }
.song-link.is-track { background: var(--bg-sunken); color: var(--ink) !important; border: 1px solid var(--line); }
.song-link.is-track:hover { border-color: var(--green-500); }
.song-link.is-playing { box-shadow: 0 0 0 3px var(--gold); }
.song-none { font-size: .78rem; color: var(--ink-soft); font-style: italic; }

/* A practice track playing on the page, under its song. */
.song-player {
  flex-basis: 100%; width: 100%; max-width: 640px; margin: 6px 0 4px;
  border-radius: 12px; overflow: hidden; background: #000; box-shadow: var(--shadow);
}
.song-player iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
/* A Google Drive audio file: Drive's player (play, waveform, time, volume and
   progress). 180px leaves room under the volume button for its hover circle. */
.song-player.is-audio { max-width: 460px; background: #1f1f1f; }
.song-player.is-audio iframe { aspect-ratio: auto; height: 180px; }
.song-player-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 6px 10px; background: var(--green-900); font-size: .8rem;
}
.song-player-foot a { color: #fff !important; }
.song-player-close {
  font: inherit; font-weight: 700; color: #fff; background: none;
  border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; padding: 2px 10px; cursor: pointer;
}
.song-player-close:hover { background: rgba(255, 255, 255, .12); }

/* A scene split over two columns keeps them together under one number. */
table.scene-grid th.scene-col.part-more span { color: var(--ink-soft); }
table.scene-grid th.scene-col:not(.part-more), table.scene-grid td.cell.part-start { border-left: 1px solid var(--line); }
/* The intermission: a gold line down the grid before the first scene after it. */
table.scene-grid th.scene-col.after-break, table.scene-grid td.cell.after-break { border-left: 3px solid var(--gold); }
.run-cos { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.run-part { display: inline-flex; gap: 5px; align-items: center; }
.run-part small { color: var(--ink-soft); }

/* The grid bands students by where they first come on, so a hairline marks each
   new entrance point instead of a character-group heading. */
table.scene-grid tr.band-start td.cell, table.scene-grid tr.band-start th.who { border-top: 1px solid var(--line); }
.song-scene.warm-up { border-color: var(--gold); background: var(--gold-soft); }
.music-link { margin: 12px 0 0; font-size: .92rem; color: var(--ink-soft); }

@media print {
  .nav, .banner, .search-row, .legend, footer.site { display: none; }
  body { background: #fff; }
  .event, .link-card, .announce, table.cast, .committee { box-shadow: none; }
  table.cast th { position: static; }
  .month-label { position: static; }
}