/* The Campus Ambassador Toolkit deck (/science/sandbox/toolkit, v1.1.2 sandbox). The page bar follows the site theme (Temple Dark
   or light); the slides are Temple Dark by default or parchment with "Paper-friendly slides" (.is-paper). Every size inside a
   slide is in container units (cqw), so a slide looks the same on a phone, a projector and an 11 × 6.19 in PDF page.
   Print: @page 11in × 6.1875in (16:9), margin 0, one slide per page; the header, footer and tools are hidden.
   Behaviour: assets/js/sandbox-pages.js. */

.sbx-deck {
  --s-bg: #0D0B09; --s-bg2: #171411; --s-ink: #FCFBF7; --s-muted: #BBA996; --s-gold: #F2B54C; --s-accent: #67E8F9; --s-line: rgba(242, 181, 76, 0.32);
  --s-card: rgba(255, 255, 255, 0.04); --s-head1: #FFF3D6; --s-head2: #F2B54C; --s-head3: #D97706;
  display: block; padding-bottom: clamp(48px, 7vw, 96px);
}
.sbx-deck.is-paper {
  --s-bg: #FCFBF7; --s-bg2: #F6EEDC; --s-ink: #2A1614; --s-muted: #6B4F3F; --s-gold: #881337; --s-accent: #B45309; --s-line: rgba(136, 19, 55, 0.28);
  --s-card: rgba(136, 19, 55, 0.045); --s-head1: #881337; --s-head2: #9F1239; --s-head3: #B45309;
}

/* ---------- page bar (site theme) ---------- */
.sbx-deck__bar { padding-block: clamp(28px, 5vw, 64px) clamp(18px, 3vw, 32px); }
.sbx-deck__bar-inner { display: grid; gap: 18px; align-items: end; }
@media (min-width: 1024px) { .sbx-deck__bar-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; } }
.sbx-deck__eyebrow { margin: 0 0 10px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.sbx-deck__eyebrow a { color: var(--accent); text-decoration: none; }
.sbx-deck__h1 { margin: 0 0 12px; font-family: var(--serif); font-weight: 600; font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.6rem); line-height: 1.05; color: var(--ink); }
.sbx-deck__lead { margin: 0; max-width: 46rem; color: var(--muted); font-size: 0.98rem; line-height: 1.65; }
.sbx-deck__lead strong { color: var(--ink); }
.sbx-deck__tools { display: flex; flex-wrap: wrap; gap: 10px; }
.sbx-deck__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0.5em 1.3em; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--champagne-strong, rgba(245, 158, 11, 0.42)); background: transparent; color: var(--ink); font: 600 0.92rem/1.2 var(--sans); }
.sbx-deck__btn--gold { color: #1F0A06; border-color: transparent; background: linear-gradient(135deg, #FDE7AE 0%, #F2B54C 45%, #D97706 100%); }
.sbx-deck__btn[aria-pressed="true"] { border-color: #F2B54C; background: rgba(242, 181, 76, 0.14); }
.sbx-deck__btn--switch::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; }
.sbx-deck__btn--switch[aria-pressed="true"]::before { background: #F2B54C; border-color: #F2B54C; }
.sbx-deck__btn:focus-visible { outline: 2px solid var(--focus, #FCD34D); outline-offset: 3px; }

/* ---------- slides ---------- */
.sbx-deck__slides { display: grid; gap: clamp(18px, 3vw, 32px); width: min(100% - 2 * max(var(--gutter, 16px), var(--safe-x, 0px)), var(--wrap, 1280px)); margin-inline: auto; }
.slide { position: relative; container-type: inline-size; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; display: flex; flex-direction: column;
  padding: 5cqw 6.2cqw 6.4cqw; color: var(--s-ink); font-family: var(--sans);
  background: radial-gradient(70% 90% at 92% 0%, color-mix(in srgb, var(--s-gold) 12%, transparent), transparent 60%), linear-gradient(160deg, var(--s-bg2), var(--s-bg) 60%);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--s-line); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.slide__frame { position: absolute; inset: 1.7cqw; border: 1px solid var(--s-line); border-radius: 0.8cqw; pointer-events: none; }
.slide__frame::before, .slide__frame::after { content: ""; position: absolute; width: 1cqw; height: 1cqw; border: 1px solid var(--s-gold); transform: rotate(45deg); background: var(--s-bg); top: -0.55cqw; }
.slide__frame::before { left: 50%; margin-left: -0.5cqw; }
.slide__frame::after { left: 50%; margin-left: -0.5cqw; top: auto; bottom: -0.55cqw; }
.slide__kicker { position: relative; margin: 0 0 1cqw; font-size: 1.15cqw; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--s-accent); }
.slide__h { position: relative; margin: 0 0 2.4cqw; font-family: var(--serif); font-weight: 600; font-size: 4cqw; line-height: 1.05; color: var(--s-head1); max-width: 28ch; }
.slide__h1 { margin: 0 0 1.6cqw; font-family: var(--serif); font-weight: 600; font-size: 6.4cqw; line-height: 1; color: var(--s-head2);
  background: linear-gradient(100deg, var(--s-head1), var(--s-head2) 50%, var(--s-head3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.slide__lead { margin: 0 auto 2cqw; max-width: 48ch; font-family: var(--serif); font-size: 2.2cqw; line-height: 1.4; color: var(--s-ink); }
.slide__meta { margin: 0; font-size: 1.3cqw; letter-spacing: 0.06em; color: var(--s-muted); }
.slide--title .slide__body { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.slide__emblem { width: 9cqw; height: 9cqw; margin-bottom: 2cqw; color: var(--s-gold); }
.slide__cols { position: relative; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 3.2cqw; align-items: start; }
.slide__cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.slide__card { padding: 2cqw 2.2cqw; border-radius: 1.2cqw; background: var(--s-card); border: 1px solid var(--s-line); font-size: 1.55cqw; line-height: 1.5; color: var(--s-ink); }
.slide__card p { margin: 0; }
.slide__ck { margin: 0 0 0.8cqw !important; font-family: var(--serif); font-size: 2.6cqw; font-weight: 600; color: var(--s-gold); }
.slide__eq { margin: 0 0 1.8cqw; font-family: var(--serif); font-size: 2.3cqw; line-height: 1.3; color: var(--s-gold); }
.slide__eq i { font-style: italic; }
.slide__small { font-family: var(--sans); font-size: 0.55em; color: var(--s-muted); }
.slide__list { margin: 0; padding-left: 1.2em; display: grid; gap: 1cqw; font-size: 1.62cqw; line-height: 1.45; }
.slide__list li::marker { color: var(--s-gold); }
.slide__list strong { color: var(--s-head2); }
.slide__aside { padding: 1.8cqw 2.2cqw; border-left: 0.3cqw solid var(--s-gold); border-radius: 0 1.2cqw 1.2cqw 0; background: var(--s-card); font-family: var(--serif); font-size: 1.9cqw; line-height: 1.42; }
.slide__aside p { margin: 0; }
.slide__tag { margin: 0 0 0.8cqw !important; font-family: var(--sans); font-size: 1cqw; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--s-gold); }
.slide__prompts { margin: 0; padding-left: 1.4em; columns: 2; column-gap: 4cqw; font-size: 1.42cqw; line-height: 1.45; }
.slide__prompts li { break-inside: avoid; margin-bottom: 1.1cqw; }
.slide__prompts li::marker { color: var(--s-gold); font-weight: 600; }
.slide__plan { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.1cqw; font-size: 1.45cqw; line-height: 1.4; }
.slide__plan li { display: grid; grid-template-columns: 9cqw 1fr; gap: 1.6cqw; align-items: baseline; padding-bottom: 1cqw; border-bottom: 1px solid var(--s-line); }
.slide__plan strong { color: var(--s-head2); }
.slide__pt { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 600; color: var(--s-accent); }
.slide__refs { margin: 0; padding-left: 1.6em; columns: 2; column-gap: 3.4cqw; font-size: 1.08cqw; line-height: 1.38; }
.slide__refs li { break-inside: avoid; margin-bottom: 0.8cqw; }
.slide__refs em { color: var(--s-muted); }
.slide__foot { position: absolute; left: 3.6cqw; right: 3.6cqw; bottom: 2.6cqw; display: flex; justify-content: space-between; gap: 2cqw; font-size: 0.95cqw; letter-spacing: 0.04em; color: var(--s-muted); }
.slide__num { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--s-gold); }

/* ---------- Present mode ---------- */
.sbx-present { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 12px; background: #000; }
.sbx-present[hidden] { display: none !important; }
.sbx-present__slide { width: min(100%, calc((100vh - 96px) * 16 / 9)); cursor: pointer; }
.sbx-present__slide .slide { border-radius: 6px; }
.sbx-present__bar { display: flex; align-items: center; gap: 10px; }
.sbx-present__bar .sbx-deck__btn { color: #FCFBF7; border-color: rgba(242, 181, 76, 0.45); }
.sbx-present__n { min-width: 5em; text-align: center; color: #BBA996; font: 600 0.9rem/1 ui-monospace, Menlo, monospace; }
html.sbx-presenting, html.sbx-presenting body { overflow: hidden; }

/* ---------- Print: one slide per 16:9 landscape page ---------- */
@page { size: 11in 6.1875in; margin: 0; }
@media print {
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  body > :not(main), .sbx-deck__bar, .sbx-present { display: none !important; }
  .sbx-deck { padding: 0 !important; }
  .sbx-deck__slides { display: block; width: auto; margin: 0; gap: 0; }
  .slide { width: 11in; height: 6.1875in; aspect-ratio: auto; border-radius: 0; box-shadow: none; margin: 0; break-after: page; page-break-after: always; break-inside: avoid; }
  .slide:last-child { break-after: auto; page-break-after: auto; }
}
@media (prefers-reduced-motion: reduce) { .sbx-deck * { transition: none !important; animation: none !important; } }