/* src/styles/generated-content.css */
/* Styles for HTML that isn't built in the page editor:
   - lacc.site plugin output (.requirements__*, .program-links__*)
   - site.js output (.disclosure__list / __chip)
   The publisher prunes class rules it can't find in the editor's node tree,
   so these live in a plain stylesheet instead. */

/* ---------- Degree requirements (plugin: pathway-requirements) ---------- */
.requirements { display: grid; gap: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); margin-top: 0.5rem; }
.requirements__group { margin: 0; }
.requirements__title {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
  margin: 0 0 0.85rem;
  font-family: var(--font-body); font-weight: 700; font-size: 1.125rem; line-height: 1.3;
  text-transform: none; letter-spacing: 0; color: var(--text);
}
.requirements__count {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0.1rem 0.6rem;
  font: 400 0.78rem/1.2 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--control); border-radius: 3px;
}
.requirements__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.requirements__item {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 0.25rem 1.25rem; margin: 0; padding: 0.9rem 1.1rem;
  background-color: var(--ink-1); border: 1px solid var(--line); border-radius: 4px;
  transition: border-color 0.2s, transform 0.3s cubic-bezier(.2,.8,.2,1);
}
.requirements__item:hover { border-color: var(--control); }
.requirements__link {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: baseline; gap: 0.15rem 1rem;
  color: var(--text); text-decoration: none; font-weight: 600; line-height: 1.4;
}
a.requirements__link::after { content: ""; position: absolute; inset: 0; border-radius: 4px; }
a.requirements__link:focus-visible { outline: none; }
.requirements__item:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.requirements__code { font: 400 0.9rem var(--font-mono); color: var(--gold); letter-spacing: 0.03em; white-space: nowrap; }
.requirements__link--static .requirements__code { color: var(--muted); }
.requirements__name { background: linear-gradient(currentColor, currentColor) 0 100% / 0% 0.08em no-repeat; transition: background-size 0.35s cubic-bezier(0.65, 0, 0.25, 1); }
.requirements__item:hover .requirements__name { background-size: 100% 0.08em; }
.requirements__meta { font-size: var(--step--1); color: var(--muted); white-space: nowrap; text-align: right; }
.requirements__empty { color: var(--muted); margin: 0; }

/* ---------- "Counts toward" on course pages (plugin: course-programs) ---------- */
.program-links__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.program-links__item {
  position: relative; display: flex; flex-direction: column; gap: 0.3rem; margin: 0; padding: 0.95rem 1.1rem;
  background-color: var(--ink-1); border: 1px solid var(--line); border-radius: 4px; transition: border-color 0.2s;
}
.program-links__item:hover { border-color: var(--control); }
.program-links__link {
  width: fit-content; font-weight: 700; font-size: 1.0625rem; color: var(--text); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% 0.08em no-repeat;
  transition: background-size 0.35s cubic-bezier(0.65, 0, 0.25, 1);
}
.program-links__link::after { content: ""; position: absolute; inset: 0; border-radius: 4px; }
.program-links__link:focus-visible { outline: none; }
.program-links__item:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.program-links__item:hover .program-links__link { background-size: 100% 0.08em; }
.program-links__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; font: 400 0.78rem var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* Award badge (plugin "Counts toward"; colours come from [data-credential] rules in site CSS) */
.credential-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0.22rem 0.55rem 0.15rem; font: 700 0.72rem/1.1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; border-radius: 3px; }
.program-links__empty { color: var(--muted); margin: 0; }

/* ---------- Bulleted lists (site.js: data-split-lines, .facility__highlights) ---------- */
.bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; max-width: 62ch; color: var(--text); }
.bullets__item { position: relative; padding-left: 1.5rem; line-height: 1.5; }
.bullets__item::before { content: ""; position: absolute; left: 0.1rem; top: 0.62em; width: 0.45rem; height: 0.45rem; background: var(--gold); border-radius: 1px; }
@media (forced-colors: active) { .bullets__item::before { background: CanvasText; } }

/* ---------- Contact rows (faculty profile) ---------- */
.contact { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 0.5rem; }
.contact__item { margin: 0; }
.contact__link, .contact__item--static {
  display: flex; align-items: center; gap: 0.85rem; min-height: 56px; padding: 0.6rem 0.9rem;
  background-color: var(--ink-1); border: 1px solid var(--line); border-radius: 4px; color: var(--text); text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s;
}
.contact__link:hover { border-color: var(--gold); color: var(--text); background-color: var(--ink-2); }
.contact__link:hover .contact__value { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
.contact__icon { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background-color: rgba(255, 191, 26, 0.12); }
.contact__icon::before { content: ""; width: 1.15rem; height: 1.15rem; background-color: var(--gold); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.contact__icon--phone, .contact__icon[data-kind="phone"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
.contact__icon--email, .contact__icon[data-kind="email"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E"); }
.contact__icon--web, .contact__icon[data-kind="social"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15 15 0 0 1 4 10 15 15 0 0 1-4 10 15 15 0 0 1-4-10 15 15 0 0 1 4-10z'/%3E%3C/svg%3E"); }
.contact__icon--office, .contact__icon[data-kind="address"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.contact__icon--person { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
.contact__icon[data-kind="transit"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='14' rx='3'/%3E%3Cpath d='M5 11h14M8 21l2-4M16 21l-2-4'/%3E%3Ccircle cx='9' cy='14' r='.5'/%3E%3Ccircle cx='15' cy='14' r='.5'/%3E%3C/svg%3E"); }
.contact__icon[data-kind="hours"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.contact__link--static:hover { border-color: var(--line); background-color: var(--ink-1); }
/* Contact page aside: two loops styled as one list */
.contact-info__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.contact-info__list + .contact-info__list { margin-top: 0.5rem; }
.contact-info__list .contact__item { margin: 0; }
.contact__item--group { display: grid; gap: 0.5rem; }
.contact__text { display: flex; flex-direction: column; min-width: 0; }
.contact__label { font: 400 0.75rem/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.contact__value { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
@media (forced-colors: active) {
  .contact__link, .contact__item--static { border-color: CanvasText; }
  .contact__icon::before { forced-color-adjust: none; background-color: CanvasText; }
}

/* ---------- Education (faculty profile) ---------- */
.profile__education { margin: 0 0 var(--space-4); }
.profile__education-title { margin: 0 0 0.75rem; font: 400 0.8rem/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
p.profile__education-list { margin: 0; font-weight: 600; }
.profile__education-list.bullets { gap: 0.45rem; }
.profile__education-list .bullets__item { font-weight: 600; }

/* ---------- Testimonial slider (.tslider; plugin filters slides, site.js drives it) ---------- */
.tslider { margin: 0; }
.tslider--wide { grid-column: 1 / -1; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.tslider--home { margin-top: var(--space-4); }
.tslider__title { margin-bottom: var(--space-3); }
.tslider__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 var(--space-3); }
.tslider__controls[hidden] { display: none; }
.tslider__btn {
  min-height: 44px; min-width: 44px; padding: 0.55rem 1rem 0.4rem; border: 1px solid var(--control); border-radius: 3px;
  background: transparent; color: var(--text); font: 600 0.95rem/1.1 var(--font-body); cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.tslider__btn:hover { border-color: var(--gold); color: var(--gold-hi); }
.tslider__btn--toggle { min-width: 5.5rem; }
.tslider__status { margin: 0 0 0 0.5rem; font: 400 0.85rem var(--font-mono); color: var(--muted); letter-spacing: 0.04em; }
.tslider__track { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.tslider--enhanced .tslider__track { display: block; }
.tslider__slide { margin: 0; }
.tslider__slide[hidden] { display: none; }
.tslider__figure {
  position: relative; margin: 0; padding: clamp(1.75rem, 1.25rem + 2vw, 3rem); max-width: 60rem;
  background-color: var(--ink-1); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 4px;
}
.tslider__quote { margin: 0 0 var(--space-3); }
.tslider__text {
  margin: 0; max-width: 52ch; font: 500 clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem)/1.45 var(--font-body); color: var(--text); text-wrap: pretty;
}
.tslider__text::before { content: "\201C"; color: var(--gold); margin-right: 0.05em; }
.tslider__text::after { content: "\201D"; color: var(--gold); margin-left: 0.05em; }
.tslider__caption { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.tslider__photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--ink-2); }
.tslider__who { display: flex; flex-direction: column; gap: 0.15rem; }
.tslider__name { font-weight: 700; color: var(--text); }
.tslider__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; font-size: var(--step--1); color: var(--muted); }
.tslider__meta > * + *::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 0.75rem; vertical-align: middle; background: var(--control); border-radius: 50%; }
.tslider__sample {
  margin-left: auto; align-items: center; padding: 0.25rem 0.6rem 0.15rem; border: 1.5px dashed var(--muted); border-radius: 3px;
  font: 700 0.75rem/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
@media (forced-colors: active) {
  .tslider__figure { border-left-color: CanvasText; }
  .tslider__btn { border-color: ButtonText; }
}
@media (prefers-reduced-motion: reduce) { .tslider__btn { transition: none; } }

/* ---------- FAQ answers split into paragraphs + bullets (site.js formatLongText) ---------- */
/* Animated plus/minus for FAQ and disclosure accordions: the vertical bar
   collapses into the horizontal one while the icon turns half a turn. */
details.faq__item > .faq__question::after,
details.disclosure > .disclosure__summary::after {
  content: ""; display: block; flex: 0 0 auto; justify-self: end; width: 1.1rem; height: 1.1rem; color: var(--gold);
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1), background-size 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
details.faq__item[open] > .faq__question::after,
details.disclosure[open] > .disclosure__summary::after {
  content: ""; transform: rotate(180deg);
  background-size: 100% 2px, 2px 0%;
}
@media (prefers-reduced-motion: reduce) {
  details.faq__item > .faq__question::after, details.disclosure > .disclosure__summary::after { transition: none; }
}
@media (forced-colors: active) {
  details.faq__item > .faq__question::after, details.disclosure > .disclosure__summary::after { content: "+"; background: none; width: auto; height: auto; color: CanvasText; font: 400 1.5rem/1 var(--font-mono); transform: none; }
  details.faq__item[open] > .faq__question::after, details.disclosure[open] > .disclosure__summary::after { content: "\2013"; }
}
details.faq__item > summary { transition: color 0.2s; }
details.faq__item[open] > summary { color: var(--gold); }
details.faq__item > summary:hover { color: var(--gold-hi); }
@media (forced-colors: active) { details.faq__item[open] > summary { color: Highlight; } }
.faq__answer-body { padding-bottom: 40px; }
.faq__answer-body > * { margin-top: 0; margin-bottom: 0; }
.faq__answer-body > .faq__answer { padding-bottom: 0; }
.faq__answer-body > * + * { margin-top: 0.9rem; }
.faq__list { max-width: 64ch; }

/* ---------- Footer social links ---------- */
.social { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.social__item { margin: 0; }
.social__link { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; color: var(--text); text-decoration: none; font-weight: 600; }
.social__link:hover { color: var(--gold-hi); }
.social__link:hover .social__handle { text-decoration: underline; text-underline-offset: 0.18em; }
.social__icon { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--control); transition: border-color 0.2s, background-color 0.2s; }
.social__link:hover .social__icon { border-color: var(--gold); background-color: rgba(255, 191, 26, 0.12); }
.social__icon::before { content: ""; width: 1.05rem; height: 1.05rem; background-color: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.social__icon--instagram { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h3l2-3h6l2 3h3a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E"); }
.social__icon--substack { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v16H4z'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E"); }
.social__text { display: flex; flex-direction: column; line-height: 1.2; }
.social__handle { font: 400 0.8rem var(--font-mono); color: var(--muted); }
@media (forced-colors: active) { .social__icon::before { forced-color-adjust: none; background-color: LinkText; } }

/* ---------- External links (site.js initExternalLinks) ---------- */
.sr-only--external { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
a[data-external]:not(.social__link):not(.contact__link):not(.brand)::after {
  content: ""; display: inline-block; width: 0.7em; height: 0.7em; margin-left: 0.3em; vertical-align: 0.05em; flex: none;
  background-color: currentColor; opacity: 0.8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%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='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (forced-colors: active) { a[data-external]::after { forced-color-adjust: none; background-color: LinkText; } }
/* Menu: the arrow swings 45° down (↗ → →) on hover/focus */
.nav a[data-external]::after { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.nav a[data-external]:hover::after, .nav a[data-external]:focus-visible::after { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .nav a[data-external]::after { transition: none; } }

@media (max-width: 640px) {
  .requirements__item { grid-template-columns: 1fr; }
  .requirements__link { grid-template-columns: 1fr; gap: 0.2rem; }
  .requirements__meta { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .requirements__name, .program-links__link { transition: none; }
}

.letter {
  display: inline-block;
}

/* Individual offset variations to mimic the hillside */
.up {
  transform: translateY(-7px) rotate(-1deg);
}

.up-mid {
  transform: translateY(-3px) rotate(1deg);
}

.down-mid {
  transform: translateY(px) rotate(-0.5deg);
}

.down {
  transform: translateY(15px) rotate(1.5deg);
}

/* src/styles/crew.css */
/* Crew directory, crew calls and crew account (markup built by src/scripts/crew.js). */
.crew__status { margin: 0 0 var(--space-3); color: var(--muted); }
.crew__status:empty { display: none; }
/* Hold room for the account while it loads so the footer doesn't jump up and back down. */
[data-crew="account"] { min-height: 70vh; }
/* Alum badge on crew cards (set from the end-of-semester "Did you finish at LACC?" email). */
:root .crew-card__alum { display: inline-block; margin: 0.3rem 0 0.15rem; padding: 0.1rem 0.6rem; border: 1px solid rgba(255, 191, 26, 0.55); border-radius: 999px; color: var(--gold); font-size: 0.82rem; font-weight: 700; line-height: 1.5; }
@media (forced-colors: active) { :root .crew-card__alum { border-color: CanvasText; color: CanvasText; } }
.crew-dir__alum { align-self: end; }
/* New alum page (/alumni/?a=1…) */
.alum-hello { border-color: rgba(255, 191, 26, 0.45); }
.alum-status .form__check { margin: 0.35rem 0; }
.alum-undo { margin-top: 1.25rem; color: var(--muted); }
/* "Keep your account after LACC" prompt above the account tabs (students without a personal email yet). */
.crew-keep { max-width: 46rem; margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid rgba(255, 191, 26, .45); border-radius: 14px; background: rgba(255, 191, 26, .06); }
.crew-keep__title { margin: 0 0 var(--space-1); font-size: var(--step-1); }
.crew-keep > p { margin: 0 0 var(--space-2); max-width: 60ch; }
.crew-keep__form .form__field { margin: 0 0 var(--space-2); max-width: 28rem; }
.crew-keep__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.crew-keep__msg { margin: var(--space-2) 0 0; }
.crew-keep__msg:empty { display: none; }
@media (forced-colors: active) { .crew-keep { border-color: CanvasText; } }
.crew__note { max-width: 62ch; margin: var(--space-3) 0 0; color: var(--muted); font-size: var(--step--1); }
.crew__alert { margin: 0 0 var(--space-3); padding: 0.8rem 1rem; border-left: 4px solid #d9534f; background: rgba(217, 83, 79, 0.12); border-radius: 4px; }
.crew__alert:empty, .crew__alert[hidden] { display: none; }
.crew__ok { margin: 0 0 var(--space-3); padding: 0.8rem 1rem; border-left: 4px solid #3fae6e; background: rgba(63, 174, 110, 0.12); border-radius: 4px; }
.crew__ok:empty, .crew__ok[hidden] { display: none; }
.crew-btn-link { background: none; border: 0; padding: 0.25rem 0; min-height: 44px; color: var(--purple-hi, #a98ce0); font: inherit; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.crew-btn-link:hover { color: var(--gold-hi); }

/* Tags */
.crew-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.crew-tags li { margin: 0; padding: 0.25rem 0.6rem; font-size: 0.85rem; line-height: 1.3; border: 1px solid var(--control); border-radius: 999px; color: var(--text); }
.crew-tags li.is-match { border-color: var(--gold); color: var(--gold-hi); }

/* Directory */
.crew-dir__filters { display: grid; grid-template-columns: minmax(12rem, 18rem) minmax(12rem, 1fr); gap: 0.75rem 1rem; align-items: end; margin: 0 0 var(--space-3); }
.crew-dir__filters .form__check { grid-column: 1 / -1; }
.crew-dir__filters[hidden] { display: none; }
@media (max-width: 640px) { .crew-dir__filters { grid-template-columns: 1fr; } }
.crew-dir__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
.crew-card { margin: 0; display: flex; flex-direction: column; gap: 0.75rem; padding: 1.1rem 1.15rem 1.2rem; background-color: var(--ink-1); border: 1px solid var(--line); border-radius: 4px; scroll-margin-top: 6rem; }
.crew-card.is-target { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(243, 177, 14, 0.25); }
.crew-card__head { display: flex; align-items: center; gap: 0.85rem; }
.crew-card__photo { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--ink-2); }
.crew-card__initials { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ink-2); color: var(--muted); font-weight: 700; font-size: 1.15rem; }
.crew-card__name { margin: 0; font-size: 1.2rem; line-height: 1.2; }
.crew-card__name:focus { outline: none; }
.crew-card__focus { margin: 0.2rem 0 0; color: var(--gold-hi); font-weight: 600; font-size: 0.95rem; display: flex; align-items: center; gap: 0.4rem; }
.crew-card__star { flex: none; width: 1.05em; height: 1.05em; fill: currentColor; }
@media (forced-colors: active) { .crew-card__star { fill: CanvasText; } }
.crew-card__label { margin: 0 0 0.35rem; font: 400 0.75rem/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.crew-card__bio { margin: 0; white-space: pre-line; color: var(--text); line-height: 1.5; }
.crew-card__bio.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
.crew-card__toggle { align-self: flex-start; margin-top: -0.4rem; }
.crew-card__links { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; }
.crew-card__links a { display: inline-flex; align-items: center; min-height: 44px; }
.crew-card__links:has(.crew-icon-link) { gap: 0.5rem; }
.crew-card__links a.crew-icon-link { justify-content: center; width: 44px; height: 44px; border: 1px solid var(--control); border-radius: 50%; color: var(--gold); background: none; text-decoration: none; transition: color 0.2s, border-color 0.2s, background-color 0.2s; }
.crew-card__links a.crew-icon-link:hover { color: var(--ink); background-color: var(--gold); border-color: var(--gold); }
.crew-card__links a.crew-icon-link:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.crew-icon-link svg { display: block; pointer-events: none; }
@media (forced-colors: active) { .crew-card__links a.crew-icon-link { border-color: LinkText; color: LinkText; } }

/* Crew calls */
.crew-calls__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
/* Cards never grow past the screen: long words and links wrap instead of stretching the card. */
.crew-call { min-width: 0; overflow-wrap: anywhere; }
.crew-call { margin: 0; padding: clamp(1.1rem, 0.9rem + 1vw, 1.75rem); background-color: var(--ink-1); border: 1px solid var(--line); border-left: 4px solid var(--purple, #7b51c2); border-radius: 4px; scroll-margin-top: 6rem; }
.crew-call.is-target { border-color: var(--gold); border-left-color: var(--gold); }
.crew-call__title { margin: 0 0 0.35rem; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.15; }
.crew-call__title:focus { outline: none; }
.crew-call__by { margin: 0 0 1rem; color: var(--muted); }
.crew-call__facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.3rem 1.25rem; margin: 0 0 1rem; }
.crew-call__facts dt { color: var(--muted); }
.crew-call__facts dd { margin: 0; font-weight: 600; }
.crew-call__desc { margin: 1rem 0; max-width: 68ch; white-space: pre-line; line-height: 1.55; }
.crew-call__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.crew-call__panel { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.crew-call__panel[hidden] { display: none; }
.crew-calls__past { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 0.5rem; }
.crew-calls__past li { margin: 0; padding: 0.75rem 1rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; border-bottom: 1px solid var(--line); }
.crew-calls__past strong { font-size: 1.05rem; }
.crew-calls__past span { color: var(--muted); font-size: var(--step--1); }
.crew-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0.15rem 0.5rem; font: 700 0.72rem/1.1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; border-radius: 3px; border: 1px solid var(--control); color: var(--muted); }
.crew-badge--live { border-color: #3fae6e; color: #7fd8a4; }
.crew-badge--pending { border-color: var(--gold); color: var(--gold-hi); }
.crew-badge--no { border-color: #d9534f; color: #f19d9a; }

/* Account */
.crew-account { max-width: 46rem; }
.crew-panel { margin: 0 0 var(--space-4); padding: clamp(1.1rem, 0.9rem + 1vw, 1.75rem); background-color: var(--ink-1); border: 1px solid var(--line); border-radius: 4px; scroll-margin-top: 6rem; }
.crew-panel__title { margin: 0 0 0.5rem; font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem); }
.crew-panel__title:focus { outline: none; }
.crew-panel__lede { margin: 0 0 1.25rem; color: var(--muted); max-width: 60ch; }
.crew-who { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0 0 var(--space-3); }
.crew-who p { margin: 0; }
.crew-fieldset { margin: 1.25rem 0 0; padding: 0; border: 0; }
.crew-fieldset legend { padding: 0; margin: 0 0 0.35rem; font-weight: 700; }
.crew-fieldset__hint { margin: 0 0 0.6rem; color: var(--muted); font-size: var(--step--1); }
.crew-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0.15rem 1rem; }
.crew-checks .form__check { margin: 0; min-height: 44px; display: flex; align-items: center; gap: 0.5rem; }
.crew-hint { display: block; margin: 0.3rem 0 0; color: var(--muted); font-size: var(--step--1); }
.crew-form__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1.5rem; }
.crew-mycalls { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.crew-mycalls li { margin: 0; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: 4px; display: grid; gap: 0.5rem; }
.crew-mycalls__head { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; }
.crew-mycalls__note { margin: 0; color: var(--muted); white-space: pre-line; }

/* How it works */
.crew-steps { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; counter-reset: step; }
.crew-steps__item { margin: 0; padding: 1.1rem 1.15rem; border-top: 3px solid var(--gold); background: var(--ink-1); border-radius: 0 0 4px 4px; counter-increment: step; }
.crew-steps__title { margin: 0 0 0.4rem; font-size: 1.15rem; }
.crew-steps__title::before { content: counter(step) ". "; color: var(--gold); }
.crew-steps__text { margin: 0; color: var(--muted); }

/* Contact form helpers (src/scripts/contact.js) */
.form [hidden] { display: none !important; }
/* Leftover spam-trap field: never shown or announced. */
.form > input[data-instatic-field-id="company"] { display: none !important; }
.contact-form > form:empty, .contact-form > form:not(:has(:not([data-instatic-honeypot]))) { display: none; }
.form__hint { margin: 0.35rem 0 0; color: var(--muted); font-size: var(--step--1); }
.form__hint:empty { display: none; }
.form__fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 0.1rem; }
.form__fieldset .form__check { min-height: 44px; display: flex; align-items: center; gap: 0.5rem; margin: 0; }

@media (forced-colors: active) {
  .crew-card, .crew-call, .crew-panel, .crew-tags li, .crew-badge { border-color: CanvasText; }
}

/* Crew account: on-page jump links */
.crew-jump { margin: 0 0 var(--space-3); }
.crew-jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.crew-jump li { margin: 0; }
.crew-jump a { display: inline-flex; align-items: center; min-height: 44px; }

/* Student showcase (src/scripts/crew.js initShowcase) */
.showcase-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.showcase__filters { display: grid; grid-template-columns: minmax(10rem, 14rem) minmax(8rem, 10rem) minmax(12rem, 1fr); gap: 0.75rem 1rem; align-items: end; margin: 0 0 var(--space-3); }
.showcase__filters[hidden] { display: none; }
@media (max-width: 720px) { .showcase__filters { grid-template-columns: 1fr 1fr; } .showcase__filters .form__field:last-child { grid-column: 1 / -1; } }
@media (max-width: 420px) { .showcase__filters { grid-template-columns: 1fr; } }
.showcase__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1.5rem 1.25rem; }
.showcase-card { margin: 0; display: flex; flex-direction: column; background-color: var(--ink-1); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; scroll-margin-top: 6rem; }
.showcase-card.is-featured { border-color: var(--gold); }
.showcase-card.is-target { box-shadow: 0 0 0 3px rgba(243, 177, 14, 0.35); }
.showcase-card__watch { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: linear-gradient(135deg, #2a1f45, var(--ink-2, #1a1a24)); cursor: pointer; overflow: hidden; }
.showcase-card__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.showcase-card__play { position: absolute; left: 0.85rem; bottom: 0.85rem; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0.4rem 1rem 0.4rem 0.8rem; background: rgba(10, 10, 14, 0.85); color: #fff; font-weight: 700; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); }
.showcase-card__play::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 0.45em 0 0.45em 0.75em; border-color: transparent transparent transparent var(--gold, #f3b10e); }
.showcase-card__watch:hover .showcase-card__play, .showcase-card__watch:focus-visible .showcase-card__play { background: var(--purple, #7b51c2); }
.showcase-card__watch:focus-visible { outline: 3px solid var(--gold, #f3b10e); outline-offset: -3px; }
.showcase-card__body { display: flex; flex-direction: column; gap: 0.45rem; padding: 1rem 1.15rem 1.15rem; flex: 1; }
.showcase-card__flag { margin: 0; color: var(--gold-hi); font-weight: 700; font-size: 0.9rem; }
.showcase-card__title { margin: 0; font-size: 1.3rem; line-height: 1.2; }
.showcase-card__meta, .showcase-card__by, .showcase-card__notes { margin: 0; color: var(--muted); font-size: var(--step--1); }
.showcase-card__logline { margin: 0.2rem 0; line-height: 1.5; }
.showcase-card__body .crew-btn-link { align-self: flex-start; margin-top: auto; }

.showcase-dialog { width: min(100% - 2rem, 60rem); max-height: calc(100dvh - 2rem); padding: 0; color: var(--text); background: var(--ink-1, #14141c); border: 1px solid var(--line); border-radius: 6px; }
.showcase-dialog::backdrop { background: rgba(5, 5, 10, 0.82); }
.showcase-dialog__inner { padding: clamp(1rem, 0.8rem + 1vw, 1.75rem); display: grid; gap: 0.85rem; }
.showcase-dialog__bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.showcase-dialog__title { margin: 0; font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem); line-height: 1.15; }
.showcase-dialog__close { flex: none; }
.showcase-dialog__notes { margin: 0; padding: 0.6rem 0.9rem; border-left: 4px solid var(--gold); background: rgba(243, 177, 14, 0.1); }
.showcase-dialog__stage { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 4px; overflow: hidden; }
.showcase-dialog__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.showcase-dialog__play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; display: grid; place-items: center; }
.showcase-dialog__play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.75; }
.showcase-dialog__playlabel { position: relative; min-height: 44px; display: inline-flex; align-items: center; padding: 0.6rem 1.25rem; background: var(--purple, #7b51c2); color: #fff; font-weight: 700; border-radius: 999px; }
.showcase-dialog__play:focus-visible { outline: 3px solid var(--gold, #f3b10e); outline-offset: -3px; }
.showcase-dialog__meta { margin: 0; color: var(--muted); }
.showcase-dialog__logline { margin: 0; font-size: 1.1rem; line-height: 1.5; max-width: 68ch; }
.showcase-dialog__text { margin: 0; white-space: pre-line; line-height: 1.55; max-width: 68ch; }
@media (forced-colors: active) {
  .showcase-card, .showcase-dialog, .showcase-card__play, .showcase-dialog__playlabel { border: 1px solid CanvasText; }
}

/* Account: pending review notes and headshot upload */
.crew__pending { margin: 0 0 var(--space-3); padding: 0.8rem 1rem; border-left: 4px solid var(--gold); background: rgba(243, 177, 14, 0.1); border-radius: 4px; }
.crew-photo { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.crew-photo__preview { flex: none; }
.crew-photo__img, .crew-photo__initials { display: grid; place-items: center; width: 128px; height: 128px; border-radius: 50%; object-fit: cover; background: var(--ink-2); color: var(--muted); font-weight: 700; font-size: 2rem; }
.crew-photo__actions { margin-top: 0; }
.crew-photo__file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Crew account: signed-in bar + three separate areas (Profile / Crew Calls / Showcase) */
.crew-account__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin: 0 0 var(--space-4); padding: 0 0 1rem; border-bottom: 1px solid var(--line); }
.crew-account__bar .crew-who { margin: 0; color: var(--muted); }
.crew-account__bar .crew-who strong { color: var(--text); font-weight: 600; }
.crew-tabs ul { list-style: none; margin: 0; padding: 4px; display: flex; flex-wrap: wrap; gap: 4px; background: var(--ink-1); border: 1px solid var(--line); border-radius: 999px; }
.crew-tabs li { margin: 0; padding: 0; }
/* The tab bar is a plain <ul>, so it was picking up the gold bullets meant for lists in page text. */
:root .crew-tabs ul > li { margin: 0; padding: 0; }
:root .crew-tabs ul > li::before { content: none; display: none; }
/* Sliding gold pill behind the current tab */
.crew-tabs--pill { position: relative; }
.crew-tabs__pill { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 1; border-radius: 999px; background: var(--gold); box-shadow: 0 0 22px -6px rgba(255, 191, 26, 0.55); pointer-events: none; }
.crew-tabs--pill .crew-tabs__link { position: relative; z-index: 2; transition: color 0.25s ease, background-color 0.2s ease; }
.crew-tabs--pill .crew-tabs__link[aria-current="page"], .crew-tabs--pill .crew-tabs__link[aria-current="page"]:hover { background: none; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .crew-tabs--pill .crew-tabs__link { transition: none; } }
@media (forced-colors: active) {
  .crew-tabs__pill { display: none; }
  :root .crew-tabs--pill .crew-tabs__link[aria-current="page"] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
}
/* Signed-in account: the bar and tabs stay the same width on every tab; only the planner's content goes full width. */
:root .crew-account:has(> .crew-account__bar) { max-width: none; }
:root .crew-account:has(> .crew-account__bar) > .crew-view:not([data-view="planner"]) { max-width: 46rem; }
.crew-tabs__link, .crew-tabs__link:link, .crew-tabs__link:visited { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.15rem; border-radius: 999px; color: var(--text); font-weight: 600; text-decoration: none; border: 0; background: none; box-shadow: none; }
.crew-tabs__link:hover { color: var(--gold-hi); background: var(--ink-2); }
.crew-tabs__link[aria-current="page"] { background: var(--gold); color: var(--ink); }
.crew-tabs__link:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.crew-view[hidden] { display: none; }
.crew-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0 0 var(--space-3); color: var(--muted); }
.crew-status-line a { color: var(--gold); }
@media (max-width: 40rem) {
  .crew-tabs, .crew-tabs ul { width: 100%; }
  .crew-tabs li { flex: 1 1 0; }
  .crew-tabs__link { justify-content: center; width: 100%; padding: 0 0.5rem; }
}

/* Role chips (button cloud). The checkbox stays a real checkbox; only its drawing changes. */
.crew-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.crew-chip { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.crew-chip__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.crew-chip__label { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 1rem; border: 1px solid var(--control); border-radius: 999px; color: var(--text); background: var(--ink-1); font-weight: 600; font-size: 0.95rem; line-height: 1.2; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.crew-chip__label::before { content: "+"; font-weight: 700; color: var(--muted); }
.crew-chip:hover .crew-chip__label { border-color: var(--gold); }
.crew-chip__input:checked + .crew-chip__label { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.crew-chip__input:checked + .crew-chip__label::before { content: "✓"; color: var(--ink); }
.crew-chip__input:focus-visible + .crew-chip__label { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .crew-chip__label { transition: none; } }
@media (forced-colors: active) {
  .crew-chip__label, .crew-tabs ul { border-color: CanvasText; }
  .crew-chip__input:checked + .crew-chip__label, .crew-tabs__link[aria-current="page"] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
}

/* Equipment catalog (/equipment-room/catalog) */
.gear-filters { display: grid; gap: 1.25rem; margin: 0 0 var(--space-3); }
.gear-search { margin: 0; max-width: 32rem; }
.gear-filter__label { margin: 0 0 0.5rem; font-weight: 700; }
.gear-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gear-pill { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 1rem; border: 1px solid var(--control); border-radius: 999px; color: var(--text); background: var(--ink); font: inherit; font-weight: 600; font-size: 0.95rem; line-height: 1.2; cursor: pointer; }
.gear-pill:hover { border-color: var(--gold); }
.gear-pill[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.gear-pill[aria-pressed="true"]::before { content: "✓"; }
.gear-pill:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.gear-filters .crew-fieldset__hint { margin: -0.5rem 0 0; }
.gear-count { margin: 0 0 var(--space-3); color: var(--muted); }
.gear-group { margin: 0 0 var(--space-4); }
.gear-group__title { margin: 0 0 1rem; }
.gear-group__count { color: var(--muted); font-size: 0.6em; font-weight: 600; }
.gear-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 0 2rem; }
.gear-card { display: flex; gap: 1rem; align-items: flex-start; margin: 0; padding: 1rem 0; border-top: 1px solid var(--line); }
.gear-card__img { flex: none; width: 88px; height: 88px; object-fit: contain; background: #fff; border-radius: 10px; }
.gear-card__img--none { display: block; background: var(--ink-2); }
.gear-card__body { min-width: 0; }
.gear-card__title { margin: 0 0 0.25rem; font-family: var(--font-body); font-size: 1rem; line-height: 1.3; letter-spacing: 0; text-transform: none; }
.gear-card__meta, .gear-card__classes { margin: 0 0 0.35rem; color: var(--muted); font-size: 0.875rem; }
.gear-card__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; margin: 0.2rem 0 0.45rem; font-size: 0.875rem; }
.gear-cat { --c: var(--muted); display: inline-flex; align-items: center; min-height: 26px; padding: 0.1rem 0.7rem; border-radius: 999px; font-weight: 600; font-size: 0.8rem; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); }
.gear-cat--camera { --c: #ffcf4d; }
.gear-cat--electric { --c: #ffa26b; }
.gear-cat--grip { --c: #ff8fa3; }
.gear-cat--sound { --c: #6fd6e8; }
.gear-cat--production { --c: #b99bff; }
.gear-cat--educational-entry-level { --c: #8fe0a6; }
.gear-cat--general-support { --c: #c3c3d8; }
.gear-qty { color: var(--muted); font-variant-numeric: tabular-nums; }
.gear-card__classes-label { color: var(--text); font-weight: 600; }
.gear-card__reserve { margin: 0.5rem 0 0; font-size: 0.9rem; }
@media (forced-colors: active) { .gear-cat { box-shadow: none; border: 1px solid CanvasText; } .gear-pill[aria-pressed="true"] { background: Highlight; color: HighlightText; forced-color-adjust: none; } .gear-card { border-color: CanvasText; } }
/* Paged lists: the Show more button under long lists */
.crew-more { display: flex; justify-content: center; margin-top: 2rem; }
.crew-more[hidden] { display: none; }
/* Crew call: Instagram tag options appear under the story checkbox */
.crew-call__tag { margin-top: 1rem; padding-left: 1.75rem; display: grid; gap: 0.75rem; }
.crew-call__tag[hidden], .crew-call__handle[hidden] { display: none; }
.crew-call__handle .form__input { max-width: 22rem; }
/* Pills and chips: the check mark never changes the width, and the text sits on the optical
   center (Overpass's ascender pushes caps ~0.17em above center, so the top padding nudges it down). */
.gear-pill { position: relative; justify-content: center; padding: 0.34em 1.4rem 0; }
.gear-pill::before { content: "✓"; position: absolute; left: 0.6rem; top: 50%; transform: translateY(-42%); font-size: 0.85em; opacity: 0; }
.gear-pill[aria-pressed="true"]::before { content: "✓"; opacity: 1; }
.crew-chip__label { padding: 0.34em 1rem 0; }
.crew-chip__label::before { display: inline-block; width: 0.9em; text-align: center; }
.gear-cat { padding-top: calc(0.1rem + 0.3em); padding-bottom: 0.1rem; }


/* src/styles/brand.css */
/* Brand refresh (Oct 2026): "Tungsten" palette + glass cards
   Warm charcoal darks, gold for anything you can act on, ember for special moments.
   Depth comes from light: warm stage lights drifting behind the page (site.js adds
   .stage-lights and moves them slowly with GSAP), film grain, and frosted glass cards
   that let that light through.
   Selectors start with :root so they win over the older component rules.
   To go back to the original palette, delete the "Palette" block below. */

/* ---------- Palette (overrides the design-system tokens) ---------- */
:root {
  --ink: #0e0d0c;
  --ink-1: #1a1815;
  --ink-2: #26231e;
  --line: #36322b;
  --text: #f5f1ea;
  --muted: #b3ab9c;
  --control: #8a8172;
  --frame: #7a7366;
  /* The second accent: ember instead of purple. -hi is for text on dark. */
  --purple: #c2410c;
  --purple-deep: #7c2d12;
  --purple-hi: #fdba74;
  --violet: #fdba74;
  --violet-hi: #fed7aa;
}

/* ---------- Depth tokens ---------- */
:root {
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --glass: rgba(38, 33, 28, 0.72);
  --glass-hover: rgba(50, 43, 36, 0.8);
  --glass-edge: rgba(255, 236, 214, 0.09);
  --glass-shine: inset 0 1px 0 rgba(255, 244, 228, 0.12);
  --drop: 0 22px 44px -26px rgba(0, 0, 0, 0.95), 0 2px 6px -2px rgba(0, 0, 0, 0.5);
  --drop-hover: 0 30px 56px -24px rgba(0, 0, 0, 1), 0 16px 36px -20px rgba(255, 191, 26, 0.35);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Light ---------- */
/* Smooth scrolling: no background-attachment: fixed (it repaints the whole screen on every scroll frame).
   The bottom ember glow now lives in the fixed vignette layer (body::before), which the GPU just moves. */
:root body {
  background-color: var(--ink);
  background-image: none;
}
/* Stage lights: soft warm beams fixed behind everything (added by site.js) */
.stage-lights { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.stage-lights__beam { position: absolute; border-radius: 50%; will-change: transform; } /* soft gradients only: a blur filter here re-rendered every frame */
.stage-lights__beam--ember { width: 46vmax; height: 34vmax; right: -10vmax; top: -6vmax; background: radial-gradient(closest-side, rgba(194, 65, 12, 0.30), transparent); }
.stage-lights__beam--gold { width: 40vmax; height: 34vmax; left: -12vmax; bottom: -8vmax; background: radial-gradient(closest-side, rgba(255, 191, 26, 0.13), transparent); }
.stage-lights__beam--warm { width: 30vmax; height: 26vmax; left: 38%; top: 42%; background: radial-gradient(closest-side, rgba(253, 186, 116, 0.07), transparent); }
@media (prefers-reduced-transparency: reduce) { .stage-lights { display: none; } }
/* Slow drift (site.js sets each beam's path). Transform-only, so it runs on the compositor with no page redraws. */
@media (prefers-reduced-motion: no-preference) {
  .stage-lights__beam--drift { animation: stage-drift var(--drift-d, 20s) ease-in-out var(--drift-delay, 0s) infinite alternate; }
}
@keyframes stage-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(var(--drift-x, 0), var(--drift-y, 0)) scale(var(--drift-s, 1)); } }

:root .page-head {
  position: relative;
  border-bottom: 0;
  background:
    radial-gradient(55% 140% at 0% 0%, rgba(255, 191, 26, 0.10), transparent 62%),
    radial-gradient(45% 120% at 100% 0%, rgba(194, 65, 12, 0.18), transparent 60%);
}
:root .page-head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent);
}
:root .section--surface,
:root .subscribe {
  border-top: 0;
  background:
    radial-gradient(60% 100% at 100% 0%, rgba(194, 65, 12, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(26, 24, 21, 0.7), rgba(14, 13, 12, 0.2));
}
:root .revival { background-image: radial-gradient(80% 120% at 0% 0%, rgba(194, 65, 12, 0.20), transparent 60%); }

/* ---------- Glass cards: things you click, and forms ---------- */
:root .card,
:root .pathway,
:root .person,
:root .program-tile,
:root .crew-card,
:root .crew-call,
:root .showcase-card,
:root .crew-panel {
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-lg);
  background: var(--glass);
  /* No backdrop blur: with the stage lights moving behind, every card re-blurred every frame while scrolling. */
  box-shadow: var(--glass-shine), var(--drop);
  transition: transform 0.35s cubic-bezier(.2, .7, .2, 1), box-shadow 0.35s ease, background-color 0.35s ease, border-color 0.35s ease;
}
:root .person { overflow: hidden; }
/* Pointer light: a soft neutral glow that follows the mouse across the card (site.js eases --mx/--my with GSAP). */
:root .card, :root .pathway, :root .person, :root .program-tile, :root .crew-card, :root .showcase-card, :root .gear-card { position: relative; isolation: isolate; }
:root .card::after, :root .pathway::after, :root .person::after, :root .program-tile::after, :root .crew-card::after, :root .showcase-card::after, :root .gear-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1; /* sits under the card's text so it never washes it out */
  background: radial-gradient(20rem circle at var(--mx, 50%) var(--my, 0%), rgba(255, 240, 215, 0.07), rgba(255, 240, 215, 0.025) 45%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
:root .card:hover::after, :root .pathway:hover::after, :root .person:hover::after, :root .program-tile:hover::after, :root .crew-card:hover::after, :root .showcase-card:hover::after, :root .gear-card:hover::after { opacity: 1; }
:root .card:has(.card__link):hover,
:root .pathway:hover,
:root .person:hover,
:root .program-tile:hover,
:root .crew-card:hover,
:root .showcase-card:hover {
  transform: translateY(-3px);
  background-color: var(--glass-hover);
  border-color: rgba(255, 191, 26, 0.38);
  box-shadow: var(--glass-shine), var(--drop-hover);
}
:root .crew-card.is-target, :root .crew-call.is-target, :root .crew-panel.is-target, :root .showcase-card.is-target { border-color: rgba(255, 191, 26, 0.5); box-shadow: var(--glass-shine), var(--drop-hover); }
:root .program-tile--cinema { background: radial-gradient(80% 100% at 0% 0%, rgba(255, 191, 26, 0.14), transparent 60%), var(--glass); }
:root .program-tile--television { background: radial-gradient(80% 100% at 100% 0%, rgba(194, 65, 12, 0.26), transparent 60%), var(--glass); }
:root .card__media, :root .facility__photo, :root .showcase-card__thumb { border-radius: calc(var(--radius-lg) - 6px); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 1); }
:root .slate__body { border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--glass-shine), var(--drop); }

/* Gear list: lighter glass (no blur) so hundreds of items scroll smoothly */
:root .gear-card {
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(48, 42, 35, 0.5), rgba(30, 27, 23, 0.42));
  box-shadow: var(--glass-shine), var(--drop);
  padding: 1rem;
  transition: border-color 0.35s ease, transform 0.35s cubic-bezier(.2, .7, .2, 1);
}
:root .gear-card:hover { border-color: rgba(255, 191, 26, 0.3); transform: translateY(-2px); }
:root .gear-list { gap: 1rem; }

/* ---------- Open layouts: information, not objects ---------- */
:root .equipment__contact { row-gap: 0; }
:root .equipment__contact-row,
:root .glance__item,
:root .pathway-page__fact {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0.85rem 0;
}
:root .equipment__contact-row:first-child,
:root .pathway-page__fact:first-child { border-top: 0; }
:root .glance { column-gap: 1.5rem; row-gap: 0; }
:root .info-table { border-collapse: collapse; }
:root .info-table__label,
:root .info-table__value {
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding-left: 0;
}
:root .info-table tbody .info-table__row:first-child > * { border-top: 0; }
:root .quote {
  border: 0;
  border-left: 2px solid var(--purple-hi);
  border-radius: 0;
  background: radial-gradient(70% 90% at 0% 0%, rgba(194, 65, 12, 0.16), transparent 70%);
}
:root .quote--television { border-left-color: var(--violet); }
:root .revival__item { border-left-width: 2px; }

/* ---------- Type roles ---------- */
/* The typewriter face stays for metadata (codes, units, dates, breadcrumbs), in normal case. */
:root .breadcrumbs__list,
:root .program-links__meta,
:root .kicker { text-transform: none; letter-spacing: 0; }
/* Labels and hints move to the body face. */
:root .glance__label,
:root .equipment__contact-label,
:root .facility__category,
:root .info-table__label,
:root .info-table__caption,
:root .site-footer__heading {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
}
:root .glance__label,
:root .equipment__contact-label,
:root .facility__category,
:root .info-table__label { font-size: var(--step--1); font-weight: 600; color: var(--muted); }
:root .info-table__caption,
:root .site-footer__heading { font-size: 1rem; font-weight: 700; color: var(--text); }
:root .tag,
:root .person__badge,
:root .pathway__credential,
:root .pathway-page__credential {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  border-radius: var(--radius-pill);
}
:root .pathway__credential,
:root .pathway-page__credential { padding-inline: 0.75rem; }
:root [data-credential="coa"] { color: #fff; }
:root [data-credential="skills"] { background-color: rgba(194, 65, 12, 0.18); }

/* ---------- Actions ---------- */
:root .btn { border-radius: var(--radius-pill); }
:root .btn--volt { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 24px -14px rgba(255, 191, 26, 0.6); }
:root .btn--volt:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 14px 32px -12px rgba(255, 191, 26, 0.65); }
:root .btn--ghost { background: rgba(255, 244, 228, 0.05); }
:root .filter__btn,
:root .disclosure__chip { border-radius: var(--radius-pill); }
:root .program-links__link:hover { color: var(--gold); }
:root .crew-btn-link { color: var(--gold); }
/* Underlines are only as wide as the words. */
:root .program-tile__cta,
:root .card__action,
:root .pathway__cue,
:root .section__link { align-self: flex-start; width: fit-content; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root .card, :root .pathway, :root .person, :root .program-tile, :root .crew-card, :root .crew-call, :root .showcase-card, :root .crew-panel { background: rgba(38, 33, 28, 0.92); }
}
@media (prefers-reduced-motion: reduce) {
  :root .card, :root .pathway, :root .person, :root .program-tile, :root .crew-card, :root .showcase-card { transition: none; }
  :root .card:has(.card__link):hover, :root .pathway:hover, :root .person:hover, :root .program-tile:hover, :root .crew-card:hover, :root .showcase-card:hover, :root .gear-card:hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  :root .card, :root .pathway, :root .person, :root .program-tile, :root .crew-card, :root .crew-call, :root .showcase-card, :root .crew-panel, :root .gear-card { background: #26211c; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  :root .card, :root .pathway, :root .person, :root .program-tile, :root .crew-card, :root .crew-call, :root .showcase-card, :root .crew-panel, :root .gear-card { border: 1px solid CanvasText; }
}
/* No flash before the entrance animations: things that animate in start hidden from the very
   first paint (only when motion is allowed). site.js adds .motion-ready and animates them in.
   If the script never runs, a fallback shows everything after 3s. */
@media (prefers-reduced-motion: no-preference) {
  :is(.page-head .container > *:not(.breadcrumbs), .section__header > *, .section__actions, .grid > *, .facts__item, .program-split > *, .pathway-list > *, .facility, .steps__item, .course-group, .glance, .disclosures, .equipment__section, .course-page__section, .info-table, .site-footer__grid > *):not(.hero *, .nav *, .mega *, details *),
  .hero :is(.hero__line, .hero__lede, .hero__actions, .slate) { opacity: 0; animation: lacc-show 0s 3s forwards; }
  .hero .kicker { clip-path: inset(0 100% 0 0); animation: lacc-show-clip 0s 3s forwards; }
  .hero .hero__line--accent { --wipe: 0; }
  .motion-ready :is(.page-head .container > *:not(.breadcrumbs), .section__header > *, .section__actions, .grid > *, .facts__item, .program-split > *, .pathway-list > *, .facility, .steps__item, .course-group, .glance, .disclosures, .equipment__section, .course-page__section, .info-table, .site-footer__grid > *),
  .motion-ready .hero :is(.hero__line, .hero__lede, .hero__actions, .slate, .kicker) { animation: none; }
}
@keyframes lacc-show { to { opacity: 1; --wipe: 1; } }
/* Forms: tighter rhythm. Label sits close to its box; fields are grouped closer together
   (was 24px between fields and 40px between stacked pairs on phones). */
:root .form { row-gap: 1.125rem; }
:root .form__row { row-gap: 1.125rem; column-gap: 1.25rem; }
:root .form__field { row-gap: 0.4rem; }
:root .form__field .form__hint { margin-top: 0; }
/* Intro note above a form ("All fields are required…") belongs to the heading, not the first label. */
:root :is(h1, h2, h3):has(+ .form__note) { margin-bottom: 0.75rem; }
:root .form__note:has(+ form, + .form) { margin-bottom: 2rem; }
/* Labels as script slug lines: Courier Prime Bold, normal case. Hints, errors and typed text stay in Overpass. */
:root .form__label, :root .crew-fieldset > legend, :root .gear-filter__label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
/* Anything inside a label that isn't the slug line ("(optional)", hints) keeps the body face and normal case. */
:root :is(.form__label, .crew-fieldset > legend, .gear-filter__label) :is(.prod-opt, .form__optional, small, .crew-hint) { font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: 0; }
/* Field boxes recede until used: quieter border at rest (still 3.5:1 against the page), warmer on hover, gold on focus. */
:root .form__input, :root .form__select, :root .form__textarea {
  border-color: #6f685c;
  background-color: rgba(26, 24, 21, 0.7);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
:root .form__input:hover, :root .form__select:hover, :root .form__textarea:hover { border-color: var(--control); }
:root .form__input:focus, :root .form__select:focus, :root .form__textarea:focus {
  border-color: var(--gold);
  background-color: var(--ink-1);
  box-shadow: 0 0 0 3px rgba(255, 191, 26, 0.18);
}
@media (forced-colors: active) { :root .form__input, :root .form__select, :root .form__textarea { border-color: CanvasText; } }
/* ---------- Film look ----------
   1. Living grain: fine gray noise over the whole page (about 6%), jumping position ~12 times a second like
      grain changing frame to frame. Moved with transform only, so it stays cheap. Still with reduced motion.
   2. Lens vignette: edges fall off slightly darker, behind the content (never over text).
   3. Halation: big gold type and gold buttons bleed a warm ember glow, like film highlights. */
/* Grain tile: white specks whose strength comes from contrast-stretched noise (flat gray noise just reads as haze). */
:root { --film-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 3.2 0 0 0 -1.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E"); --film-grain-opacity: 0.05; }
body::after {
  content: "";
  position: fixed;
  inset: -120px;
  z-index: 2147483000;
  pointer-events: none;
  background-image: var(--film-grain);
  background-size: 200px 200px;
  opacity: var(--film-grain-opacity, 0.05);
  will-change: transform;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 125% 95% at 50% 42%, transparent 55%, rgba(0, 0, 0, 0.42) 100%),
    radial-gradient(50% 35% at 50% 105%, rgba(194, 65, 12, 0.10), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  body::after { animation: film-grain 0.6s steps(1) infinite; }
}
@keyframes film-grain {
  0% { transform: translate(0, 0); }
  14% { transform: translate(-37px, 23px); }
  28% { transform: translate(29px, -41px); }
  42% { transform: translate(-13px, 57px); }
  57% { transform: translate(51px, 11px); }
  71% { transform: translate(-55px, -17px); }
  85% { transform: translate(17px, 43px); }
}
:root .facts__value, :root .slate__value { text-shadow: 0 0 0.3em rgba(255, 130, 40, 0.35), 0 0 1.1em rgba(194, 65, 12, 0.3); }
:root details.faq__item[open] > summary, :root #primary-nav .nav__trigger[aria-expanded="true"] { text-shadow: 0 0 0.6em rgba(255, 120, 30, 0.3); }
:root .btn--volt { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 24px -14px rgba(255, 191, 26, 0.6), 0 0 22px -6px rgba(255, 120, 30, 0.35); }
:root .btn--volt:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 14px 32px -12px rgba(255, 191, 26, 0.65), 0 0 34px -4px rgba(255, 110, 30, 0.5), 0 0 70px -10px rgba(194, 65, 12, 0.45); }
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  body::after, body::before { display: none; }
  :root .facts__value, :root .slate__value, :root details.faq__item[open] > summary, :root #primary-nav .nav__trigger[aria-expanded="true"] { text-shadow: none; }
}
@media print { body::after, body::before { display: none; } }
/* Gold buttons: light that follows the pointer (site.js tweens these with GSAP).
   Inside: a soft white hotspot at --bx/--by (only lightens the gold, so the dark text gets more contrast, not less).
   Outside: the ember glow leans toward the pointer (--gx/--gy, -1..1) and blooms with --halo. */
@property --sheen { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --halo { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --gx { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --gy { syntax: '<number>'; inherits: false; initial-value: 0; }
:root .btn--volt, :root .btn--volt:hover {
  background-image: radial-gradient(5rem circle at var(--bx, 50%) var(--by, 50%), rgba(255, 255, 255, calc(0.42 * var(--sheen))), rgba(255, 255, 255, 0) 70%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 10px 24px -14px rgba(255, 191, 26, 0.6),
    calc(var(--gx) * 14px) calc(var(--gy) * 10px + 2px) calc(22px + 16px * var(--halo)) calc(-6px + 2px * var(--halo)) rgba(255, 120, 30, calc(0.35 + 0.2 * var(--halo))),
    calc(var(--gx) * 24px) calc(var(--gy) * 16px) calc(56px * var(--halo)) calc(-12px * var(--halo)) rgba(194, 65, 12, calc(0.45 * var(--halo)));
}
/* Key light on big headings. site.js moves the light with the mouse on desktop; this is the fixed version
   (light up and to the left) for phones, reduced motion, and the moment before the mouse moves.
   The yellow highlighted hero line is excluded. */
:root :is(.hero__title .hero__line:not(.hero__line--accent), .page-head h1) {
  text-shadow: -1px -1px 0 rgba(255, 214, 150, 0.45), -2px -2px 6px rgba(255, 160, 60, 0.12), 3px 4px 4px rgba(0, 0, 0, 0.55), 8px 11px 14px rgba(0, 0, 0, 0.45);
}
:root :is(.revival__title, .section__title, .contact-form__title) {
  text-shadow: -0.7px -0.7px 0 rgba(255, 214, 150, 0.4), 2px 3px 3px rgba(0, 0, 0, 0.5), 6px 8px 10px rgba(0, 0, 0, 0.35);
}
@media (forced-colors: active) { :root :is(.hero__title .hero__line, .page-head h1, .revival__title, .section__title, .contact-form__title) { text-shadow: none; } }
/* Without the pointer script (touch, reduced motion) hovering still blooms, centered. */
:root .btn--volt:hover { --halo: 1; --sheen: 0.5; }
/* Mobile menu: the section buttons (Programs, Students…) and links get side padding so the hover/open fill
   doesn't sit right against the text. */
@media (max-width: 1080px) {
  :root #primary-nav .nav__trigger, :root #primary-nav .nav__item > .nav__link { padding-inline: 1rem; border-radius: 12px; }
  :root #primary-nav .nav__panel { padding-left: 2rem; }
}
/* Dropdowns (FAQs, program disclosures): room on the left and right, and a soft fill on hover and when open. */
:root details.faq__item > .faq__question, :root details.disclosure > .disclosure__summary { padding-inline: clamp(0.875rem, 0.6rem + 1vw, 1.25rem); }
:root details.faq__item .faq__answer-body, :root details.faq__item .faq__answer, :root details.disclosure .disclosure__body { padding-inline: clamp(0.875rem, 0.6rem + 1vw, 1.25rem); }
:root details.faq__item .faq__answer-body .faq__answer { padding-inline: 0; }
:root details.faq__item, :root details.disclosure { transition: background-color 0.3s ease; }
:root details.faq__item:hover, :root details.disclosure:hover, :root details.faq__item[open], :root details.disclosure[open] { background-color: rgba(255, 240, 215, 0.035); }
@keyframes lacc-show-clip { to { clip-path: inset(0 0 0 0); } }
/* Typewriter sub-headlines read like a scene heading in a script: all caps, a touch of tracking.
   (Form labels, codes and breadcrumbs keep their own case.) */
:root :is(.kicker, .mega__hint, .brand__sub, .course-group__head, .profile__education-title, .crew-card__label, .breadcrumbs__list) {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


/* src/styles/planner.css */
/* Degree Planner (Your Account → Planner). Uses the site tokens from brand.css. */
/* "See what you have left" box on program pages (links into the planner set to that program). */
:root .planner-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: center; margin: 2rem 0; padding: 1.25rem 1.5rem; border: 1px solid rgba(255, 191, 26, 0.45); border-radius: 16px; background: radial-gradient(70% 140% at 0% 0%, rgba(255, 191, 26, 0.12), transparent 65%), var(--ink-1); }
:root .planner-cta[hidden] { display: none; }
:root .planner-cta__title { margin: 0 0 0.35rem; font: 800 clamp(1.5rem, 3.5vw, 2rem)/1 var(--font-display); text-transform: uppercase; }
:root .planner-cta__lede { margin: 0; max-width: 60ch; color: var(--muted); }
:root .planner-cta__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
:root .planner-cta__demo { color: var(--gold); text-underline-offset: 3px; }
@media (max-width: 700px) { :root .planner-cta { grid-template-columns: 1fr; } }
@media (forced-colors: active) { :root .planner-cta { border-color: CanvasText; } }
.planner { display: grid; gap: 1.5rem; }
.planner .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pl-slug { font-family: var(--font-mono); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 0; }
.pl-h { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.7rem, 4.5vw, 2.4rem); line-height: 1; margin: 0 0 0.4rem; text-wrap: balance; }
.pl-h:focus { outline: none; }
.pl-sub { font-family: var(--font-mono); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; margin: 1.75rem 0 0.25rem; }
.pl-step { display: grid; gap: 0.5rem; }

/* steps */
.pl-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; counter-reset: pl; }
.pl-steps li { counter-increment: pl; }
.pl-steps button { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0.45rem 0.8rem 0.45rem 0.6rem; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--muted); font: 600 0.95rem var(--font-body); cursor: pointer; }
.pl-steps button::before { content: counter(pl); display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid currentColor; font: 700 0.8rem var(--font-mono); }
.pl-steps button[aria-current="step"] { color: var(--text); border-color: var(--gold); background: rgba(255, 191, 26, 0.1); }
.pl-steps button:disabled { opacity: 0.45; cursor: not-allowed; }

/* checklists */
.pl-cls { border: 0; margin: 0 0 1.25rem; padding: 0; min-width: 0; }
.pl-cls > legend { font-family: var(--font-mono); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0; margin-bottom: 0.6rem; }
.pl-grp { font-family: var(--font-mono); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 1rem 0 0.5rem; }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 8px; }
.pl-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.1rem 0.7rem; align-items: start; align-content: start; min-height: 58px; padding: 0.7rem 0.85rem 0.6rem; border: 1.5px solid var(--line); border-radius: 12px; background: var(--ink-1); cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.pl-check input { grid-row: 1 / 3; width: 22px; height: 22px; margin: 0.05rem 0 0; accent-color: var(--gold); }
.pl-check b { font: 700 0.88rem var(--font-mono); }
.pl-check span { font-size: 0.92rem; line-height: 1.3; color: var(--muted); }
.pl-check:hover { border-color: rgba(255, 191, 26, 0.6); }
.pl-check:has(input:checked) { border-color: var(--gold); background: linear-gradient(rgba(255, 191, 26, 0.1), rgba(255, 191, 26, 0.1)), var(--ink-1); }
.pl-check:has(input:checked) span { color: var(--text); }
.pl-check:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.pl-check--goal b { font: 800 1.35rem/1.05 var(--font-display); text-transform: uppercase; }
.pl-more > summary, .pl-other > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--gold); font-weight: 600; }
.pl-more > summary { text-decoration: underline; text-underline-offset: 3px; width: fit-content; margin-bottom: 0.5rem; }
.pl-other { border-top: 1px solid var(--line); padding-top: 1rem; }
.pl-other > summary { font: 800 1.4rem/1 var(--font-display); text-transform: uppercase; }
.pl-filter { max-width: 440px; margin: 0.5rem 0 1rem; }
.pl-bar { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; justify-content: space-between; padding-top: 0.75rem; }
/* Only the long class checklist keeps its button in reach, as a floating bar that matches the panel. */
[data-pane="classes"] .pl-bar { position: sticky; bottom: max(12px, env(safe-area-inset-bottom, 0px)); z-index: 2; padding: 0.6rem 0.6rem 0.6rem 1.1rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(26, 24, 21, 0.94); box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.9); }
.pl-count, .pl-saved { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* results */
.pl-results { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.pl-result { display: grid; gap: 0.45rem; align-content: start; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(26, 24, 21, 0.72); box-shadow: inset 0 1px 0 rgba(255, 240, 215, 0.06), 0 18px 40px -24px rgba(0, 0, 0, 0.8); }
.pl-result.is-mine { border-color: rgba(255, 191, 26, 0.45); }
.pl-result__t { font: 800 1.6rem/1 var(--font-display); text-transform: uppercase; margin: 0; }
.pl-left { font-weight: 700; margin: 0; }
.pl-result .btn { justify-self: start; margin-top: 0.3rem; }
.pl-meter { display: block; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.pl-meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--purple, #c2410c), var(--gold)); }

/* goal bar + map */
.pl-goalbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.25rem; align-items: center; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(26, 24, 21, 0.72); box-shadow: inset 0 1px 0 rgba(255, 240, 215, 0.06); }
.pl-goalbar:focus { outline: none; }
.pl-goalbar:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.pl-togo { margin: 0; font-weight: 700; }
.pl-ring { width: 84px; height: 84px; }
.pl-ring circle { fill: none; stroke-width: 9; }
.pl-ring .bg { stroke: var(--line); }
.pl-ring .fg { stroke: var(--gold); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.pl-ring text { fill: var(--text); font: 800 24px var(--font-display); }
@media (max-width: 600px) { .pl-goalbar { grid-template-columns: auto minmax(0, 1fr); } .pl-goalbar .btn { grid-column: 1 / -1; justify-content: center; } }

.pl-canvas { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background-color: var(--ink-1); background-image: radial-gradient(var(--line) 1px, transparent 1.4px); background-size: 22px 22px; }
.pl-board { position: relative; padding: 20px; min-width: fit-content; }
.pl-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.pl-wires path { fill: none; stroke: #57514a; stroke-width: 2; }
/* Lit wires flow. No glow filter: a filtered, animating SVG had to be redrawn every frame. */
.pl-wires path.is-on { stroke: var(--gold); stroke-dasharray: 6 6; animation: pl-flow 1.1s linear infinite; }
@keyframes pl-flow { to { stroke-dashoffset: -12; } }
.pl-terms { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 48px; align-items: start; }
/* The account column is kept narrow for forms; the planner tab uses the full page width. */
:root .crew-account:has(> .crew-panel > .planner) { max-width: none; }
.pl-term h5 { display: flex; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.75rem; font: 700 0.8rem var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.pl-term ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pl-node { position: relative; display: block; width: 100%; min-height: 66px; padding: 0.65rem 0.8rem 0.55rem 2.75rem; text-align: left; color: var(--text); font: inherit; cursor: pointer; background: var(--ink-2); border: 1.5px solid var(--line); border-radius: 12px; transition: border-color 0.2s, box-shadow 0.2s; }
.pl-node::before { content: ""; position: absolute; left: 0.75rem; top: 0.75rem; width: 1.35rem; height: 1.35rem; border-radius: 6px; border: 2px solid var(--muted); }
.pl-node__code { display: block; font: 700 0.85rem var(--font-mono); }
.pl-node__name { display: block; font-size: 0.9rem; line-height: 1.3; }
.pl-node__state { display: block; margin-top: 0.2rem; font-size: 0.78rem; color: var(--muted); }
.pl-node:hover { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255, 191, 26, 0.08); }
.pl-node[data-s="ready"] { border-color: rgba(255, 191, 26, 0.5); }
.pl-node[data-s="ready"] .pl-node__state { color: var(--gold); }
.pl-node[data-s="locked"] .pl-node__code, .pl-node[data-s="locked"] .pl-node__name { color: var(--muted); }
.pl-node[data-s="done"] { border-color: var(--gold); background: linear-gradient(rgba(255, 191, 26, 0.12), rgba(255, 191, 26, 0.12)), var(--ink-2); box-shadow: 0 0 24px -8px rgba(255, 191, 26, 0.45); }
.pl-node[data-s="done"]::before { border-color: var(--gold); background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%230e0d0c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100%; }
.pl-node--slot { border-style: dashed; }
.pl-node--slot[data-s="done"] { border-style: solid; }
.pl-node--slot:not([data-s="done"])::before { border: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23ffbf1a' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100%; }
.pl-node--slot:not([data-s="done"]) .pl-node__code { color: var(--gold); }
.pl-port { position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--ink-2); border: 2px solid #57514a; }
.pl-port--in { left: -5.5px; } .pl-port--out { right: -5.5px; }
.pl-node[data-s="done"] .pl-port { background: var(--gold); border-color: var(--gold); }
@media (max-width: 760px) {
  .pl-canvas { overflow: visible; }
  .pl-board { padding: 16px 14px 18px 34px; min-width: 0; }
  .pl-terms { grid-auto-flow: row; grid-auto-columns: auto; gap: 28px; }
  .pl-port { display: none; }
}
/* Stacked map: used on phones and whenever the semesters don't fit side by side (set by planner.js). */
.pl-canvas.is-stacked { overflow: visible; }
.pl-canvas.is-stacked .pl-board { padding: 16px 14px 18px 34px; min-width: 0; }
.pl-canvas.is-stacked .pl-terms { grid-auto-flow: row; grid-auto-columns: auto; gap: 28px; }
.pl-canvas.is-stacked .pl-term ol { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.pl-canvas.is-stacked .pl-port { display: none; }
.pl-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 32px; }
.pl-list { list-style: none; margin: 0; padding: 0; }
.pl-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 1rem; padding: 0.7rem 0; border-top: 1px solid var(--line); }
.pl-list .pl-meter { grid-column: 1 / -1; height: 6px; }
.pl-list li { align-items: start; }
.pl-also__name { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; min-width: 0; }
.planner .pl-also__name .crew-btn-link { text-align: left; padding: 0; margin: 0; font-size: 1rem; line-height: 1.35; }
.pl-list .pl-slug { white-space: nowrap; }

/* opt-in: its own section, name split into first and last */
.pl-share { display: grid; gap: 1rem; margin: 0; padding: 1.75rem 0 0; border: 0; border-top: 1px solid var(--line); min-width: 0; }
.pl-share > legend { float: left; width: 100%; padding: 0; margin: 0 0 0.25rem; }
.pl-share .form__check { margin: 0; max-width: 62ch; }
.pl-name { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1rem; max-width: 560px; padding-left: 2.1rem; }
.pl-name[hidden] { display: none; }
.pl-name .form__field { margin: 0; }
.pl-saved:empty { display: none; }

/* secondary buttons read as buttons */
.planner .btn:not(.btn--volt) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.55rem 1.2rem 0.4rem; border: 1px solid var(--control, #8a8172); border-radius: 999px; background: transparent; color: var(--text); }
.planner .btn:not(.btn--volt):hover { border-color: var(--gold); color: var(--gold); }

/* elective picker: dialog on desktop, bottom sheet on phones */
.pl-dlg { width: min(560px, calc(100vw - 32px)); max-height: min(80vh, 720px); padding: 0; color: var(--text); background: var(--ink-1); border: 1px solid var(--line); border-radius: 16px; }
/* Centered in the viewport (the site reset zeroes dialog margins, which pinned it to the top left). */
:root .pl-dlg[open] { position: fixed; inset: 0; margin: auto; height: fit-content; overscroll-behavior: contain; }
.pl-dlg::backdrop { background: rgba(0, 0, 0, 0.6); }
/* Page behind the picker stays put while it's open. */
html.pl-locked, html.pl-locked body { overflow: hidden; }
.pl-sheet { display: flex; flex-direction: column; max-height: inherit; }
.pl-sheet header { padding: 1.1rem 1.25rem 0.6rem; border-bottom: 1px solid var(--line); }
.pl-sheet__body { overflow: auto; padding: 0.75rem 1.25rem 1rem; display: grid; gap: 0.6rem; }
.pl-picklist { display: grid; gap: 0.6rem; }
.pl-sheet footer { display: flex; justify-content: flex-end; padding: 0.75rem 1.25rem max(1rem, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.pl-choice { display: grid; gap: 0.15rem; width: 100%; min-height: 56px; padding: 0.6rem 0.85rem 0.5rem; text-align: left; color: var(--text); font: inherit; cursor: pointer; background: var(--ink-2); border: 1.5px solid var(--line); border-radius: 12px; }
.pl-choice small { color: var(--muted); font-size: 0.8rem; }
.pl-choice[aria-pressed="true"] { border-color: var(--gold); background: linear-gradient(rgba(255, 191, 26, 0.12), rgba(255, 191, 26, 0.12)), var(--ink-2); }
@media (max-width: 600px) { :root .pl-dlg[open] { margin: auto 0 0; width: 100%; max-width: 100%; border-radius: 16px 16px 0 0; max-height: 85vh; } }

.planner :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .pl-wires path.is-on { animation: none; stroke-dasharray: none; } }
@media (forced-colors: active) { .pl-wires { display: none; } .pl-node[data-s="done"]::before { forced-color-adjust: none; background-color: Highlight; } }


/* src/styles/productions.css */
/* Productions (src/scripts/productions.js): Your Account → Productions, and the instructor review page. */
.prod-head .crew-panel__lede { max-width: 62ch; }
.prod [hidden] { display: none !important; }
.prod-goes { margin: 0.4rem 0 0; }
.prod-goes:empty { display: none; }
.prod-body { display: grid; gap: var(--space-3); }
.prod-opt { font-family: var(--font-body); font-weight: 400; color: var(--muted); }
.prod-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.prod-back { min-height: 44px; }
.prod-saved { margin: 0; color: var(--muted); font-size: var(--step--1); }
.prod-saved:empty { display: none; }
.prod-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1.125rem 1.25rem; align-items: start; }
.prod-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.prod-narrow .form__input { max-width: 10rem; }
.prod-pane { display: grid; gap: 1.125rem; }
.prod-pane__title { margin: 0; font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem); }
.prod-pane__title:focus { outline: none; }
.prod-pane .crew-panel__lede { margin: -0.5rem 0 0.25rem; }
.prod-sub { margin: 0.75rem 0 0; font-family: var(--font-mono); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; }
.prod-next { margin-top: 0.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }

/* Step bar: a real sequence, so it's numbered. Current step is gold. */
.prod-steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; counter-reset: none; }
:root .prod-steps ol > li { margin: 0; padding: 0; }
:root .prod-steps ol > li::before { content: none; display: none; }
.prod-step { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0 1rem 0 0.4rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 244, 228, 0.03); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.prod-step__n { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid var(--control); font-family: var(--font-mono); font-size: 0.9rem; }
.prod-step:hover { border-color: var(--gold); }
.prod-step[aria-current="step"] { border-color: var(--gold); color: var(--gold-hi); }
.prod-step[aria-current="step"] .prod-step__n { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.prod-step:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (max-width: 40rem) { .prod-step { padding-right: 0.75rem; } .prod-step span:last-child { font-size: 0.92rem; } }

/* Shoot days */
.prod-days { display: grid; gap: 1.25rem; }
.prod-day { margin: 0; padding: 1.1rem 1.15rem 1.2rem; display: grid; gap: 1rem; border: 1px solid var(--line); border-radius: var(--radius, 12px); background: rgba(14, 13, 12, 0.35); min-width: 0; }
.prod-day__legend { padding: 0 0.4rem; font-family: var(--font-mono); font-weight: 700; color: var(--gold-hi); text-transform: uppercase; letter-spacing: 0.04em; }
.prod-kind { margin: 0; }
.prod-kind .form__check, .prod-day > .form__check, .prod-flag .form__check, .prod-basics .form__check, .prod-share, .crew-fieldset .form__check { display: flex; align-items: flex-start; gap: 0.6rem; min-height: 44px; margin: 0; padding: 0.55rem 0; line-height: 1.45; }
.prod-kind .form__checkbox, .prod-flag .form__checkbox, .prod-basics .form__checkbox, .prod-share .form__checkbox, .prod-day .form__checkbox { flex: none; margin-top: 0.2rem; }
.prod-day__notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.prod-day__notes:empty { display: none; }
:root .prod-day__notes > li::before { content: none; display: none; }
.prod-note { margin: 0; padding: 0.6rem 0.85rem; border-left: 4px solid var(--control); border-radius: 4px; background: rgba(255, 244, 228, 0.04); line-height: 1.45; }
.prod-note--warn { border-left-color: var(--gold); background: rgba(243, 177, 14, 0.09); }
.prod-day > .crew-btn-link { justify-self: start; }

/* Crew rows */
.prod-crew { display: grid; gap: 0.75rem; }
.prod-crew:empty { display: none; }
.prod-crew__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 0.75rem 1rem; align-items: end; }
@media (max-width: 34rem) { .prod-crew__row { grid-template-columns: 1fr; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line); } .prod-crew__row .crew-btn-link { justify-self: start; } }

/* Safety flags: chips open a panel each */
.prod-flags { margin-top: -0.25rem; }
.prod-chip--stop .crew-chip__label { border-style: dashed; }
.prod-chip--stop .crew-chip__input:checked + .crew-chip__label { background: #8f2d22; border-color: #e07a6c; color: #fff; }
.prod-chip--stop .crew-chip__input:checked + .crew-chip__label::before { content: "✕"; color: #fff; }
.prod-flags__panels { display: grid; gap: 1rem; }
.prod-flags__panels:empty { display: none; }
.prod-flag { padding: 1rem 1.15rem 1.15rem; display: grid; gap: 0.75rem; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 6px; background: rgba(14, 13, 12, 0.35); }
.prod-flag h4 { margin: 0; font-size: 1.15rem; }
.prod-flag h4:focus { outline: none; }
.prod-flag > .crew-hint { margin-top: -0.5rem; }
.prod-flag .crew-fieldset { margin: 0; }
.prod-flag--stop { border-left-color: #e07a6c; background: rgba(143, 45, 34, 0.18); }
.prod-flag--stop p { margin: 0; max-width: 64ch; line-height: 1.55; }
.prod-basics { margin: 0.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--line); }
/* "Still needed" box on Review: a calm to-do list grouped by step, not an error wall. */
.prod-problems { padding: 1.1rem 1.25rem 1.2rem; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 8px; background: rgba(255, 191, 26, 0.05); }
.prod-problems:focus { outline: 3px solid var(--gold); outline-offset: 3px; }
.prod-problems > p:only-child { margin: 0; }
.prod-problems__h { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.prod-problems__lede { margin: 0.25rem 0 0.9rem; color: var(--muted); font-size: var(--step--1); }
.prod-problems__group + .prod-problems__group { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.prod-problems__step { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.25rem; font-weight: 700; color: var(--text); }
.prod-problems__step .prod-step__n { width: 1.6rem; height: 1.6rem; font-size: 0.8rem; color: var(--muted); }
.prod-problems__list { list-style: none; margin: 0; padding: 0 0 0 2.15rem; display: grid; gap: 0.1rem; }
:root .prod-problems__list > li { margin: 0; padding: 0; }
:root .prod-problems__list > li::before { content: none; display: none; }
:root .prod-problems__list > li { padding: 0.35rem 0; line-height: 1.45; }
:root .prod-problems__list a, :root .prod-problems__list a:visited { display: inline; padding: 0; background: none; border: 0; box-shadow: none; color: var(--text); font-size: 0.98rem; text-decoration: underline; text-decoration-color: rgba(255, 191, 26, 0.5); text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
:root .prod-problems__list a:hover { color: var(--gold-hi); text-decoration-color: currentColor; background: none; }
.prod-problems__list a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
@media (forced-colors: active) { .prod-problems { border-color: CanvasText; } }
.prod-share { font-weight: 600; }

/* ---------- The slate ----------
   A production shows up as a clapperboard: striped sticks on top, chalk on a dark board.
   The top stick is the one thing that moves (it snaps shut the first time you see a new number). */
.prod-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1.5rem 1.25rem; }
:root .prod-list > li { margin: 0; padding: 0; }
:root .prod-list > li::before { content: none; display: none; }
.prod-slate { --chalk: #f5f1ea; --board: #151311; position: relative; min-width: 0; overflow-wrap: anywhere; }
.prod-slate__sticks { position: relative; height: 2.6rem; }
.prod-slate__stick { position: absolute; left: 0; right: 0; bottom: 0; height: 1.15rem; border-radius: 4px 4px 0 0; background: repeating-linear-gradient(-55deg, var(--chalk) 0 1.1rem, #111 1.1rem 2.2rem); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6); }
.prod-slate__stick--top { bottom: 1.3rem; border-radius: 4px; transform-origin: 0.4rem 100%; transform: rotate(-9deg); background: repeating-linear-gradient(55deg, var(--chalk) 0 1.1rem, #111 1.1rem 2.2rem); }
.prod-slate.has-number .prod-slate__stick--top { transform: rotate(0); bottom: 1.35rem; }
.prod-slate__board { padding: 1rem 1.15rem 1.15rem; border: 1px solid rgba(245, 241, 234, 0.22); border-radius: 0 0 var(--radius, 12px) var(--radius, 12px); background: var(--board); box-shadow: var(--drop); color: var(--chalk); }
.prod-slate__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding-bottom: 0.85rem; border-bottom: 1px solid rgba(245, 241, 234, 0.25); }
.prod-slate__cell { display: grid; gap: 0.2rem; align-content: start; }
.prod-slate__k { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); }
.prod-slate__num { font-family: var(--font-mono); font-weight: 700; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); letter-spacing: 0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.prod-slate.has-number .prod-slate__num { color: var(--gold-hi); text-shadow: 0 0 0.35em rgba(255, 130, 40, 0.35); }
.prod-slate__title { margin: 0.85rem 0 0.75rem; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); line-height: 1.15; color: var(--chalk); }
.prod-slate__title:focus { outline: none; }
.prod-slate__facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1rem; }
.prod-slate__facts div { min-width: 0; }
.prod-slate__facts dt { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); }
.prod-slate__facts dd { margin: 0.1rem 0 0; font-weight: 600; }
.prod-slate__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.85rem; }
@media (max-width: 26rem) { .prod-slate__facts { grid-template-columns: 1fr; } }
@media (forced-colors: active) { .prod-slate__stick { background: CanvasText; } .prod-slate__board { border-color: CanvasText; } }
.prod-body > .prod-slate { max-width: 34rem; }

.prod-empty { padding: 1.1rem 1.25rem; border: 1px dashed var(--control); border-radius: var(--radius, 12px); }
.prod-empty p { margin: 0 0 0.5rem; }
.prod-empty__list { margin: 0; padding-left: 1.25rem; color: var(--muted); }

/* ---------- Safety sheet (on screen and printed) ---------- */
.prod-sheetbox { border-top: 1px solid var(--line); padding-top: 0.5rem; }
.prod-sheetbox > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--gold); }
.prod-sheetbox > summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.prod-sheet { display: grid; gap: 1.25rem; max-width: 52rem; }
.prod-sheet__head { padding-bottom: 0.85rem; border-bottom: 2px solid var(--text); }
.prod-sheet__dept { margin: 0 0 0.25rem; font-family: var(--font-mono); font-size: 0.9rem; color: var(--muted); }
.prod-sheet__title { margin: 0; font-family: var(--font-display, inherit); font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); line-height: 1.15; }
.prod-sheet__num { margin: 0.35rem 0 0; font-family: var(--font-mono); font-weight: 700; }
.prod-sheet__facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0.6rem 1.25rem; }
.prod-sheet__facts dt { font-family: var(--font-mono); font-size: 0.85rem; color: var(--muted); }
.prod-sheet__facts dd { margin: 0.1rem 0 0; font-weight: 600; }
.prod-sheet__logline { margin: 0; max-width: 68ch; font-size: 1.05rem; line-height: 1.5; }
/* Sheet hierarchy: title > section labels (gold slug lines with a rule above) > item headings > body text > muted details. */
.prod-pane > .prod-sheet { padding: clamp(1rem, 0.8rem + 1vw, 1.5rem); border: 1px solid var(--line); border-radius: 10px; background: rgba(14, 13, 12, 0.4); }
:root .prod-sheet .prod-sheet__title { margin: 0.15rem 0 0; font-size: clamp(1.55rem, 1.25rem + 1vw, 2.1rem); line-height: 1.1; }
.prod-sheet__num { display: inline-block; margin: 0.6rem 0 0; padding: 0.2rem 0.7rem; border: 1px solid var(--control); border-radius: 999px; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.prod-sheet__num.has-number { border-color: var(--gold); color: var(--gold-hi); }
.prod-sheet__head { border-bottom-width: 1px; border-bottom-color: var(--control); }
.prod-sheet__sec { padding-top: 1rem; border-top: 1px solid var(--line); }
.prod-sheet__h { margin: 0 0 0.75rem; font-family: var(--font-mono); font-size: 0.9rem; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold-hi); }
.prod-sheet__fh { margin: 0 0 0.35rem; font-size: 1.05rem; line-height: 1.3; }
.prod-sheet__sec p { margin: 0 0 0.5rem; max-width: 68ch; line-height: 1.55; }
.prod-sheet__empty { color: var(--muted); font-style: italic; }
/* Lists: the site resets list markers, so the sheet draws its own (decoration only; the list semantics stay). */
:root .prod-sheet :is(ul, ol) { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
:root .prod-sheet :is(ul, ol) > li { position: relative; margin: 0; padding: 0 0 0 1.5rem; line-height: 1.5; }
:root .prod-sheet ul > li::before { content: ""; display: block; position: absolute; left: 0.3rem; top: 0.62em; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--gold); }
/* Emergency steps are a sequence, so they're numbered. */
:root .prod-sheet ol.prod-sheet__list { counter-reset: prod-step; gap: 0.6rem; }
:root .prod-sheet ol.prod-sheet__list > li { counter-increment: prod-step; padding-left: 2.35rem; min-height: 1.7rem; }
:root .prod-sheet ol.prod-sheet__list > li::before { content: counter(prod-step); display: grid; place-items: center; position: absolute; left: 0; top: 0; width: 1.65rem; height: 1.65rem; border-radius: 50%; border: 1px solid var(--control); background: none; font: 700 0.8rem/1 var(--font-mono); color: var(--text); }
/* Shoot days: one row per day, date first. */
:root .prod-sheet ol.prod-sheet__days { gap: 0.6rem; }
:root .prod-sheet ol.prod-sheet__days > li { display: grid; gap: 0.15rem; padding: 0.75rem 0.95rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 244, 228, 0.03); }
:root .prod-sheet ol.prod-sheet__days > li::before { content: none; display: none; }
.prod-sheet__days strong { font-size: 1.02rem; }
.prod-sheet__days span { color: var(--muted); }
/* Special circumstances: each one is a block with its checklist ticked or open. */
.prod-sheet__flag { padding: 0.25rem 0 0.25rem 0.95rem; border-left: 3px solid var(--gold); }
.prod-sheet__flag + .prod-sheet__flag { margin-top: 1rem; }
.prod-sheet__flag ul { margin-top: 0.4rem; }
:root .prod-sheet .prod-sheet__flag li::before { content: "✓"; width: auto; height: auto; background: none; top: 0; left: 0.1rem; color: var(--gold); font-weight: 700; border-radius: 0; }
:root .prod-sheet .prod-sheet__flag li.is-open { color: var(--muted); }
:root .prod-sheet .prod-sheet__flag li.is-open::before { content: "○"; color: var(--muted); }
.prod-sheet__flag li.is-open::after { content: " (not checked)"; font-style: italic; }
.prod-sheet__crew strong { font-weight: 700; }
.prod-sheet__pre { white-space: pre-line; }
.prod-review__head .crew-panel__lede { margin-bottom: 0; }
.prod-decide .crew-fieldset { margin-top: 0; }

@media print {
  html.prod-printing body > *:not(#prod-print) { display: none !important; }
  html.prod-printing, html.prod-printing body { background: #fff !important; color: #000 !important; }
  #prod-print { display: block; padding: 0; color: #000; font-size: 11pt; }
  #prod-print .prod-sheet { max-width: none; gap: 10pt; }
  #prod-print .prod-sheet__head { border-color: #000; }
  #prod-print .prod-sheet__dept, #prod-print .prod-sheet__facts dt, #prod-print .prod-sheet__days span, #prod-print .prod-sheet__flag li.is-open { color: #333; }
  #prod-print .prod-sheet__h, #prod-print .prod-sheet__num { color: #000; border-color: #000; }
  #prod-print .prod-sheet ul > li::before { background: #000; }
  #prod-print .prod-sheet .prod-sheet__flag li::before, #prod-print .prod-sheet ol.prod-sheet__list > li::before { color: #000; border-color: #000; background: none; }
  #prod-print .prod-sheet__flag { border-left-color: #000; }
  #prod-print .prod-sheet ol.prod-sheet__days > li { border-color: #999; background: none; }
  #prod-print .prod-sheet__sec { break-inside: avoid; }
  #prod-print a { color: #000; }
}
#prod-print { display: none; }
@media print { html.prod-printing #prod-print { display: block; } }
/* Five account tabs: on phones they wrap into rows instead of squeezing into one. */
@media (max-width: 40rem) {
  :root .crew-tabs li { flex: 1 1 auto; }
  :root .crew-tabs ul { border-radius: 24px; }
}