/* Toc Toc AI theme (card TOCTOC-STAGING): loaded after /assets/site.css and
   only overrides its color tokens. Base palette = toc-toc-ai site.css :root;
   the extra tokens CBAB's site.css adds are derived from it. */
:root{--aubergine:#0D0E10;--plum:#1E2126;--door:#EA4536;--door-dark:#B71F17;--brass:#FFB020;--brass-hover:#FFC452;--mint:#CFE6FF;--candy:#FFD28A;--cream:#F5F3EE;--blush:#EDEAE3;--ink:#111214;--accent-text:#B3201A;--focus:#2563EB;--night:#050607;--night-line:#3A3F47;--on-dark:#E6E6E3;--line:#DEDAD0;--line-strong:#B5AFA2;--surface:#FFFFFF;--muted:#4F5258;--placeholder:#E8E5DD}
/* Screen-reader-only separator in headings (was an inline <style> on the Pages site; CSP allows no inline style). */
.sr-sep{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Jean Phil block (restored from the Pages site's site.css, card TOCTOC-L1). */
[data-block=jean-phil]{background:var(--cream)}[data-block=jean-phil] .section-content>div{display:flex;flex-direction:column;gap:var(--ivs-ds-space-16);max-width:1000px}
/* MOP-ONLY (card MOP-SITE, design review 2026-11-12): additions after the locked toctoc.css copy. Tokens only; no new section types. */
/* 1. Upload slot: a 48 px circle holds the "+", the dancer label sits under it; the silhouette (flow.css) moves down so it is never cut off. */
.drop-zone label{gap:var(--ivs-ds-space-8);padding-top:var(--ivs-ds-space-16);min-height:150px}
.upload-symbol{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:2px solid var(--accent-text);border-radius:50%;background:var(--surface);font-size:var(--ivs-ds-text-24);line-height:1}
/* flow.css is linked after this sheet, so the id wins over its equal-specificity silhouette rule. */
#create-form .slot:not(.filled) label{background-image:none}
@media(max-width:480px){.drop-zone label{min-height:104px;gap:var(--ivs-ds-space-4);padding:var(--ivs-ds-space-8) var(--ivs-ds-space-12)}.upload-symbol{width:40px;height:40px;font-size:var(--ivs-ds-text-20)}}
/* 2. Hero sample (desktop only): the sample polaroid takes the right column of the copy, caption above the clip; the "see a sample" button is for phones. */
.hero-copy .polaroid{display:none}
@media(min-width:960px){
[data-block=hero]{align-items:start}
.hero-copy{display:grid;grid-template-columns:minmax(0,1fr) 200px;column-gap:var(--ivs-ds-space-24);row-gap:var(--ivs-ds-space-24);align-items:start}
.hero-copy>.eyebrow,.hero-copy>h1{grid-column:1/-1}
.hero-copy>.eyebrow{justify-self:start}
.hero-copy>.lead,.hero-copy>.subtitle{grid-column:1}
.hero-copy .polaroid{display:flex;flex-direction:column-reverse;grid-column:2;grid-row:3/5;align-self:start;width:200px;margin:0}
.hero-copy .polaroid>figcaption{padding-top:0;padding-bottom:var(--ivs-ds-space-8);color:var(--cream)}
.hero-copy .photo-layout{aspect-ratio:9/16;max-height:360px}
.hero-copy>.btn-outline{display:none}
}