/* ============================================================
   NeuAnalytics 2026, About page: "The Kitchen Table" film section
   Scoped to .film-section. Colours, spacing, radii and type are the site's tokens (theme-variables.css), so the section follows the light/dark toggle
   (data-theme on <html>) with no rule of its own. Targets are 44 px or more; the layout reflows to 320 px.
   ============================================================ */
.film-section { padding: var(--space-20, 5rem) 0; }
.film-section .film-stage { position: relative; margin: var(--space-8) 0 var(--space-4); }
.film-section video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; border-radius: var(--border-radius-md); }
.film-section video::cue { background-color: rgba(0, 0, 0, 0.8); color: #fff; }
.film-section :focus-visible { outline: 3px solid var(--text-accent); outline-offset: 3px; border-radius: 4px; }
@media (forced-colors: active) { .film-section :focus-visible { outline-color: Highlight; } }

.film-section .film-panel { background: var(--card-bg); border: var(--card-border); border-left: 6px solid var(--text-accent); border-radius: var(--border-radius-md); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0 var(--space-3); min-height: 4.5rem; }
.film-section .film-panel p { margin: 0 0 var(--space-2); color: var(--text-primary); max-width: none; }
.film-section .film-panel p:empty { margin: 0; }
.film-section .film-panel .film-panel__label { font-size: var(--text-sm); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.film-section .film-note, .film-section .film-help { color: var(--text-secondary); font-size: var(--text-sm); margin: var(--space-2) 0 0; max-width: 75ch; }
.film-section .film-text, .film-section .film-transcript > p { max-width: 70ch; }
.film-section .film-note:empty { margin: 0; }
.film-section .film-subheading { margin: var(--space-10) 0 var(--space-3); }

.film-section fieldset { border: 1px solid var(--border-hover); border-radius: var(--border-radius-md); padding: var(--space-3) var(--space-4) var(--space-4); margin: var(--space-4) 0; min-width: 0; }
.film-section legend { font-weight: var(--weight-bold); padding: 0 var(--space-2); color: var(--text-heading); }
.film-section .film-choice { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.55rem 0.6rem; min-height: 2.75rem; border-radius: var(--border-radius-sm); cursor: pointer; color: var(--text-primary); }
.film-section .film-choice input { width: 1.4rem; height: 1.4rem; margin: 0.15rem 0 0; flex: none; accent-color: var(--btn-primary-bg); }
.film-section .film-choice.off { opacity: 0.65; cursor: not-allowed; }
.film-section .film-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 0; color: var(--text-primary); }
.film-section select, .film-section .film-continue { font: inherit; min-height: 2.75rem; border-radius: var(--border-radius-sm); padding: 0.5rem 0.8rem; }
.film-section select { color: var(--input-text); background: var(--input-bg); border: 1px solid var(--input-border); }
.film-section .film-continue { cursor: pointer; font-weight: var(--weight-semibold); background: var(--btn-primary-bg); color: var(--btn-primary-text); border: 1px solid var(--btn-primary-bg); }
.film-section .film-continue:hover { background: var(--btn-primary-hover); }
.film-section .film-continue[hidden] { display: none; }

.film-section .film-transcript { margin: var(--space-6) 0; border: 1px solid var(--border-hover); border-radius: var(--border-radius-md); padding: var(--space-3) var(--space-4); }
.film-section .film-transcript summary { cursor: pointer; font-weight: var(--weight-semibold); min-height: 2.75rem; display: flex; align-items: center; color: var(--text-heading); }
.film-section .film-tr { border-top: 1px solid var(--border-default); margin-top: var(--space-3); }
.film-section .film-tr p { margin: 0; padding: 0.55rem 0; border-bottom: 1px solid var(--border-default); display: grid; grid-template-columns: 3.5rem 6rem 1fr; gap: 0 0.75rem; max-width: none; color: var(--text-primary); }
.film-section .film-tr .when { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.film-section .film-tr .label { font-weight: var(--weight-bold); }
.film-section .film-tr .pic .text { font-style: italic; }
.film-section .film-tr .sound .text { color: var(--text-secondary); }
@media (max-width: 34rem) { .film-section .film-tr p { grid-template-columns: 3rem 1fr; } .film-section .film-tr .label, .film-section .film-tr .text { grid-column: 2; } }

.film-section .film-about { color: var(--text-primary); max-width: 70ch; }
.film-section .film-links { padding-left: 1.25rem; }
.film-section .film-links a { display: inline-block; padding: 0.7rem 0; }

/* the panel under the film shows only while a description choice is on; otherwise it stays in the page for screen readers (a status region has to exist before its text changes) but is not drawn */
.film-section .film-panel:not(.is-on), .film-section .film-sr { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* everything under the film except the AI notice: one native disclosure */
.film-section .film-options { margin: var(--space-4) 0 0; border: 1px solid var(--border-hover); border-radius: var(--border-radius-md); background: var(--card-bg); }
.film-section .film-options > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 3rem; padding: var(--space-2) var(--space-4); font-weight: var(--weight-semibold); color: var(--text-heading); border-radius: var(--border-radius-md); }
.film-section .film-options > summary::-webkit-details-marker { display: none; }
.film-section .film-options > summary::after { content: ""; flex: none; width: 0.6rem; height: 0.6rem; margin-right: 0.3rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.15s; }
.film-section .film-options[open] > summary::after { transform: rotate(-135deg); }
.film-section .film-options__body { padding: 0 var(--space-4) var(--space-4); }
.film-section .film-options__body > .film-subheading { margin-top: var(--space-2); }
@media (prefers-reduced-motion: reduce) { .film-section * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }