/* WYCF Interface System v1. Canonical tokens and component styles.
   Brand primitives live in brand-tokens.css; layout remains page-owned. */
:root{
 --ui-font:DM,Arial,sans-serif;
 --ui-text-caption:12px;--ui-text-body:14px;--ui-text-title:16px;
 --ui-text-section:20px;--ui-text-page:32px;
 --ui-weight-body:400;--ui-weight-control:500;--ui-weight-heading:550;
 --ui-space-1:4px;--ui-space-2:8px;--ui-space-3:12px;--ui-space-4:16px;--ui-space-6:24px;--ui-space-8:32px;
 --ui-control-radius:10px;--ui-inner-radius:10px;--ui-panel-radius:16px;--ui-dialog-radius:20px;
 --ui-control-sm:36px;--ui-control-md:40px;--ui-control-lg:44px;--ui-touch-target:44px;
 --ui-panel-border:color-mix(in srgb,var(--brand-border) 65%,transparent);
 --ui-panel-shadow:4px 5px 14px rgba(58,53,46,.04),inset 1px 1px 0 rgba(254,251,252,.8);
 --ui-panel-hover-shadow:5px 6px 16px rgba(58,53,46,.07),inset 1px 1px 0 rgba(254,251,252,.8);
 --ui-focus:var(--brand-text-secondary);--ui-error:#9B3429;
 --ui-ease:cubic-bezier(.22,1,.36,1);--ui-fast:160ms;--ui-motion:220ms;--ui-enter:240ms;
 --ui-hover-scale:1.035;--ui-press-scale:.97;
 --ui-glass-bg:rgba(242,239,232,.18);--ui-glass-hover:rgba(242,239,232,.30);--ui-glass-border:rgba(242,239,232,.55);
}
/* Buttons: explicit intent and density, shared by React and HTML. */
body [data-ui-button][data-variant][data-size]{
 display:inline-flex;align-items:center;justify-content:center;gap:var(--ui-space-2);
 box-sizing:border-box;min-width:0;width:auto;min-height:var(--ui-control-md);height:var(--ui-control-md);
 padding:0 var(--ui-space-4);border:1px solid transparent;border-radius:var(--ui-control-radius);
 font-family:var(--ui-font);font-size:var(--ui-text-body);font-weight:var(--ui-weight-control);line-height:1.3;
 text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:none;
 color:var(--brand-text);background:transparent;
}
body [data-ui-button][data-variant=default][data-size]{background:var(--brand-text);color:var(--brand-surface-light)}
body [data-ui-button][data-variant=default][data-size]:hover{background:var(--brand-ink)}
body [data-ui-button][data-variant=secondary][data-size]{background:var(--brand-surface);color:var(--brand-text)}
body [data-ui-button][data-variant=secondary][data-size]:hover{background:var(--brand-border)}
body [data-ui-button][data-variant=outline][data-size]{background:transparent;border-color:var(--brand-border);color:var(--brand-text)}
body [data-ui-button][data-variant=outline][data-size]:hover,body [data-ui-button][data-variant=ghost][data-size]:hover{background:var(--brand-surface)}
body [data-ui-button][data-variant=ghost][data-size]{color:var(--brand-text-secondary)}
body [data-ui-button][data-variant=inverse][data-size]{background:var(--brand-surface-light);color:var(--brand-text)}
body [data-ui-button][data-variant=inverse][data-size]:hover{background:var(--brand-border)}
body [data-ui-button][data-variant=link][data-size]{padding-inline:0;color:var(--brand-text-secondary);text-underline-offset:4px}
body [data-ui-button][data-variant=link][data-size]:hover{text-decoration:underline}
body [data-ui-button][data-variant=destructive][data-size]{background:var(--ui-error);color:#fff}
body [data-ui-button][data-variant][data-size=sm]{height:var(--ui-control-sm);min-height:var(--ui-control-sm);padding-inline:var(--ui-space-3);font-size:var(--ui-text-caption)}
body [data-ui-button][data-variant][data-size=lg]{height:var(--ui-control-lg);min-height:var(--ui-control-lg);padding-inline:var(--ui-space-6)}
body [data-ui-button][data-variant][data-size=icon]{height:var(--ui-control-sm);min-height:var(--ui-control-sm);width:var(--ui-control-sm);padding:0;flex-shrink:0}
body [data-ui-button][data-variant][data-size=compact]{width:56px;height:40px;min-height:40px;padding:4px;font-size:10px;white-space:normal}
body [data-ui-button][data-variant][data-size][data-align=start]{justify-content:flex-start;text-align:left}
body [data-ui-button][data-variant][data-size][data-full-width=true]{width:100%}
body [data-ui-button][data-variant][data-size][aria-pressed=true]{background:var(--brand-surface-light);color:var(--brand-text);box-shadow:0 1px 3px rgba(26,24,21,.1)}
body [data-ui-button]:disabled,body [data-ui-button][aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none;scale:1}
body [data-ui-button]>svg{width:16px;height:16px;flex-shrink:0;pointer-events:none;stroke-width:1.8}
body [data-ui-button][data-variant][data-size=icon]>svg{width:18px;height:18px}
body [data-ui-button]:focus-visible,body :is(a,button,summary,input,textarea,select):focus-visible{outline:2px solid var(--ui-focus);outline-offset:3px}
/* Form controls: one border, height, type size and focus treatment. */
body :is(.field,.lead-form label){font-size:var(--ui-text-caption);font-weight:500;line-height:1.5;gap:var(--ui-space-2)}
body :is(.field,.lead-form) :is(input,select,textarea){font:400 var(--ui-text-body)/1.5 var(--ui-font);width:100%;min-width:0;min-height:var(--ui-control-lg);padding:10px 12px;border:1px solid var(--brand-border-strong);border-radius:var(--ui-control-radius);background:var(--brand-background);color:var(--brand-text);transition:border-color var(--ui-fast),box-shadow var(--ui-fast)}
body :is(.field,.lead-form) textarea{min-height:104px;resize:vertical}
body :is(.field,.lead-form) :is(input,textarea)::placeholder{color:var(--brand-text-tertiary);opacity:1}
body [aria-invalid=true]{border-color:var(--ui-error)}
body .lead-form [role=alert]{color:var(--ui-error);font-size:var(--ui-text-caption)}
/* Surfaces are shared; content determines layout, not a new card style. */
body :is(.ui-panel,.plan,.about-capture,.review){border:1px solid var(--ui-panel-border);border-radius:var(--ui-panel-radius);background:var(--brand-surface-light);box-shadow:var(--ui-panel-shadow)}
body .film-card:hover{box-shadow:var(--ui-panel-hover-shadow)}
body :is(.ai-research-box,.episode-faq,.stablewatch-panel,.plan,.about-capture,.review){padding:var(--ui-space-6)}
body :is(.capture-dialog){border-radius:var(--ui-dialog-radius)}
body :is(.film-title){font-size:var(--ui-text-title);font-weight:var(--ui-weight-heading);line-height:1.35;text-decoration:none}
body :is(.film-copy p,.episode-v2-title p,.chart-heading h3,.dash-source,.preview-note){font-size:var(--ui-text-caption)}
body :is(.ai-research-box,.episode-faq,.dash-panel-heading)>h2,body .ai-research-intro h2{font-size:var(--ui-text-title);font-weight:var(--ui-weight-heading);letter-spacing:-.2px}
body :is(.plan,.about-capture,.about-copy,.call-footer) h2{font-size:var(--ui-text-section);font-weight:var(--ui-weight-heading);line-height:1.3;letter-spacing:-.4px}
body :is(.description,.about-copy p,.heading p){font-size:var(--ui-text-body);line-height:1.65}
body :is(.heading,.episode-v2-title) h1{font-size:var(--ui-text-page);font-weight:var(--ui-weight-heading);line-height:1.15;letter-spacing:-.8px}
body :is(.nav,.channel-link,.season-nav){font-size:var(--ui-text-body);font-weight:var(--ui-weight-control);border-radius:var(--ui-control-radius)}
body .season-nav strong{font-size:inherit;font-weight:inherit}
body .sidebar{overflow-y:auto;overscroll-behavior:contain}
body .sidebar>*{flex-shrink:0}
body .range-selector{gap:4px}
body .card-action svg{color:currentColor}
/* Keep small embedded actions comfortably tappable. */
@media(max-width:750px){
 body [data-ui-button][data-variant][data-size]{min-height:var(--ui-touch-target);height:auto}
 body [data-ui-button][data-variant][data-size=icon]{width:var(--ui-touch-target);height:var(--ui-touch-target)}
 body :is(.field,.lead-form) :is(input,select,textarea){font-size:16px}
 body :is(.ai-research-box,.episode-faq,.stablewatch-panel,.plan,.about-capture,.review){padding:var(--ui-space-4)}
 body :is(.heading,.episode-v2-title) h1{font-size:28px}
 body .sidebar-legal a{min-height:44px;display:inline-flex;align-items:center}
 body .film-footer{flex-wrap:wrap;gap:4px}
 body .episode-faq summary{min-height:44px}
 body .preview-toggle{min-width:44px;min-height:44px}
}
/* Playback overlay is one shared primitive. Its containing video never scales. */
body .ui-play.ui-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;display:grid;place-items:center;width:64px;height:64px;padding:0;border-radius:50%;background:var(--ui-glass-bg);border:1px solid var(--ui-glass-border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--brand-surface-light);box-shadow:0 2px 12px rgba(26,24,21,.1);pointer-events:none;transition:scale var(--ui-motion) var(--ui-ease),opacity var(--ui-fast),background-color var(--ui-fast)}
body .ui-play.ui-play svg{width:25px;height:25px;margin-left:3px;stroke-width:1.5}
body .episode-start .ui-play{opacity:1}
body .film-image .ui-play{opacity:0}
@media(hover:hover){body :is(.film-image,.episode-start):hover .ui-play{opacity:1;scale:1.14;background:var(--ui-glass-hover)}}
body :is(.film-image,.episode-start):focus-visible .ui-play{opacity:1;scale:1.14;background:var(--ui-glass-hover)}
body :is(.film-image,.episode-start):active .ui-play{scale:1.04}
@media(hover:none){body .film-image .ui-play{opacity:1;width:52px;height:52px}}
@media(prefers-reduced-motion:reduce){body .ui-play.ui-play{scale:1!important;transition:none}}
.ui-separator{flex-shrink:0;background:var(--brand-border)}
.ui-separator[data-orientation=horizontal]{height:1px;width:100%}
.ui-separator[data-orientation=vertical]{width:1px;height:100%}
.ui-badge{display:inline-flex;align-items:center;padding:4px 8px;border:1px solid transparent;border-radius:6px;font:500 12px/1.3 var(--ui-font)}
.ui-badge-muted{background:var(--brand-surface);color:var(--brand-text-secondary)}
.ui-badge-ink{background:var(--brand-text);color:var(--brand-surface-light)}
.ui-badge-outline{border-color:var(--brand-border);color:var(--brand-text-secondary)}
.ui-badge-error{color:var(--ui-error);border-color:currentColor}
.system-catalog{max-width:1080px;padding:32px 24px 64px;margin:auto}
.system-catalog>header{margin:32px 0 48px}.system-catalog h1{font-size:32px;font-weight:550;letter-spacing:-.8px;line-height:1.2}
.system-catalog section{margin:40px 0}.system-catalog section>h2{font-size:20px;font-weight:550;margin-bottom:16px}
.system-catalog p,.system-catalog footer{font-size:14px;line-height:1.65;color:var(--brand-text-secondary)}
.system-eyebrow{font-size:12px!important;letter-spacing:.1em}.system-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:16px 0}
.system-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px}.system-swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.system-swatches>div{display:grid;gap:8px}.system-swatches span{height:72px;border:1px solid var(--brand-border);border-radius:10px}.system-swatches strong{font-size:14px;font-weight:500}.system-swatches code{font-size:11px;color:var(--brand-text-secondary)}
.system-inverse{padding:24px;display:flex;gap:24px;align-items:center;border-radius:16px;background:var(--brand-ink);color:var(--brand-surface-light)}
.system-types p{margin:12px 0}.system-play-demo{position:relative;height:180px;border-radius:16px;background:var(--brand-ink-alt)}.system-play-demo button{position:absolute;inset:0;width:100%;height:100%;background:none;border:0}
@media(max-width:750px){.system-columns{grid-template-columns:1fr}.system-swatches{grid-template-columns:1fr 1fr}.system-catalog{padding:24px 16px}.system-catalog h1{font-size:28px}}

/* Responsive visibility belongs to the shell, not the button primitive. */
body [data-ui-button][data-variant][data-size].close-mobile{display:none}
@media(max-width:750px){body [data-ui-button][data-variant][data-size].close-mobile{display:inline-flex}}
@media(max-width:750px){body [data-ui-button][data-variant][data-size].sidebar-toggle{display:none}}
body .channel-link:disabled,body .season-nav:disabled{cursor:default;background:transparent}
/* Collection headers share a single composition and readable text scrim. */
body :is(.series-banner,.season-banner){height:220px;border-radius:var(--ui-panel-radius);position:relative;overflow:hidden;margin-bottom:24px;isolation:isolate}
body :is(.series-banner,.season-banner)::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,18,16,.18),rgba(19,18,16,.8));pointer-events:none;z-index:1}
body :is(.series-banner-copy,.season-banner-copy){position:absolute;inset:auto 24px 24px;z-index:2;color:#FEFBFC}
body :is(.series-banner-copy,.season-banner-copy) h1{font-size:36px;line-height:1.1;font-weight:550;letter-spacing:-.8px;margin:8px 0 12px}
body :is(.series-banner-copy,.season-banner-copy) p{font-size:14px;line-height:1.5;color:#FEFBFC;max-width:65ch;margin:0}
body .series-shade{display:none}
body .series-overview{margin-bottom:0}
@media(max-width:750px){body :is(.series-banner,.season-banner){height:220px;margin-bottom:16px}body :is(.series-banner-copy,.season-banner-copy){inset:auto 20px 20px}body :is(.series-banner-copy,.season-banner-copy) h1{font-size:30px}}
.rail-tooltip-anchor{display:block;border-radius:var(--ui-control-radius)}
.rail-tooltip-anchor>button:disabled{pointer-events:none}
.rail-tooltip-anchor:focus-visible{outline:2px solid var(--ui-focus);outline-offset:3px}

body .lead-options [data-ui-button][aria-pressed=false]{background:transparent;color:var(--brand-text-secondary)}
/* Quiet outbound links: grow without changing text width or weight. */
.sidebar-legal a{display:inline-flex;align-items:center;transform-origin:center;transition:scale var(--ui-motion) var(--ui-ease),color var(--ui-fast)}
@media(hover:hover) and (pointer:fine){.sidebar-legal a:hover{scale:1.06;color:var(--brand-text)}}
.sidebar-legal a:active{scale:.97}
@media(prefers-reduced-motion:reduce){.sidebar-legal a{scale:1!important;transition:none}}
@media(min-width:751px){.lead-form.partner-form{grid-template-columns:1fr 1fr}.partner-form>label:nth-of-type(n+5),.partner-form>button,.partner-form>small,.partner-form>p{grid-column:1/-1}}

/* Editorial voice: collection and episode page titles. Controls and data retain DM Sans. */
body :is(.series-banner-copy,.season-banner-copy) h1,
body .episode-v2-title h1,
body .capture-dialog #capture-title,
body .brand-editorial{
 font-family:var(--brand-font-editorial);font-style:normal;font-weight:400;
 font-synthesis:none;letter-spacing:var(--brand-tracking-editorial);line-height:1.15;
}
body .capture-dialog #capture-title{font-size:32px}

/* Card titles retain the interface face, with -2% tracking. */
body .film-title{font-family:var(--ui-font);font-size:var(--ui-text-title);font-weight:var(--ui-weight-heading);font-style:normal;letter-spacing:-.02em;line-height:1.35;text-decoration:none}