/* The Director's Cut (Caleb, 2026-10-16): the site's look (styles.css tokens), laid out for many controls at once */
/* no padding at the bottom: every mode ends the same distance above the footer (Caleb, 2026-10-26) */
.dc { display: block; width: 100%; max-width: 1180px; margin: 0 auto; padding: 8px 20px 0; text-align: left; }
.dc .dc-head { width: 100%; max-width: none; text-align: center; font: 400 clamp(34px, 5vw, 52px)/1.05 var(--serif); margin: -8px auto 6px; }   /* starts where "1 of 6" does in The Feature (Caleb, 2026-10-19) */
.dc-head em { color: var(--accent); font-style: italic; }
.dc .dc-lede { text-align: center; color: var(--muted); text-align: center; max-width: 640px; margin: 0 auto 22px; }
.dc h2 { font: 400 26px/1.15 var(--serif); margin: 28px 0 4px; }
.dc .note { color: var(--muted); font-size: 15.5px; margin: 0 0 12px; }

/* start from a film */
.dc-start { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dc-start .search { max-width: 520px; }
/* the chosen film takes the search box's place at the search box's size, so the page doesn't jump (Caleb, 2026-10-20) */
.dc-start .chosen { display: flex; gap: 10px; align-items: center; justify-content: space-between; box-sizing: border-box;
  width: 100%; max-width: 520px; min-height: 68px; background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 14px; padding: 8px 14px 8px 22px; font-size: 19px; color: var(--muted); }
@media (max-width: 640px) { .dc-start .chosen { min-height: 58px; padding-left: 18px; font-size: 15px; } }
.dc-start .chosen b { color: var(--ink); }
/* a title that doesn't fit beside "Starting from" moves to its own line whole, with its year (Caleb, 2026-10-26: a
   title split across lines, with the year left alone below, looked awkward); "pretty" fills the line but keeps a lone
   last word from being left behind (balanced lines left the box's right side empty) */
.dc-start .start-film { display: inline-block; text-wrap: pretty; }

/* slider columns */
.dc-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.dc-col { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 6px; }
.dc-col h3 { font: 600 14px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 2px 0 10px; }
/* each set's on/off switch, top right (Sam, 2026-10-23): off keeps the sliders as they are but ignores them */
.dc-col-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.set-switch { flex: none; width: 34px; height: 20px; margin-top: -2px; border-radius: 999px; border: 1px solid var(--line); background: var(--accent); cursor: pointer; padding: 0; position: relative; transition: background .15s; }
.set-switch span { position: absolute; top: 2px; left: 16px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent-ink); transition: left .15s; }
.set-switch[aria-checked="false"] { background: var(--bg); }
.set-switch[aria-checked="false"] span { left: 2px; background: var(--faint); }
.dc-col.set-off h3 { color: var(--faint); }
.dc-col.set-off .sl { opacity: .35; pointer-events: none; }
.sl { padding: 6px 0 10px; border-top: 1px solid var(--line); }
.sl:first-of-type { border-top: 0; }
.sl .ends { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); gap: 8px; }
.sl.on .ends { color: var(--ink); }
.sl input[type=range] { width: 100%; accent-color: var(--accent); margin: 6px 0 2px; }
.sl:not(.on) input[type=range] { opacity: .35; }
.sl .row { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: 26px; }
.sl .val { font-size: 14px; color: var(--faint); }
.sl.on .val { color: var(--ink); font-weight: 600; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg button { font: 500 13.5px var(--sans); background: none; color: var(--muted); border: 0; padding: 3px 9px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.seg button:disabled { opacity: .35; cursor: default; }
.sl .clear, .tagpick .clear { font: 500 12.5px var(--sans); background: none; border: 0; color: var(--faint); cursor: pointer; padding: 2px 4px; }
.sl:not(.on) .seg { display: none; }
/* at no preference the ✕ becomes a +, in the same place, that sets a preference (Sam, 2026-10-21); one drawn cross,
   the same size both ways, that turns 45 degrees from + to ✕ and back (Caleb, 2026-10-24) */
.sl .clear { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; transition: color .25s; }
.sl .clear .pm { display: block; position: relative; width: 11px; height: 11px; transform: rotate(45deg); transition: transform .3s ease; }
.sl .clear .pm::before, .sl .clear .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.75px; margin: -.875px 0 0 -5.5px; border-radius: 1px; background: currentColor; }
.sl .clear .pm::after { transform: rotate(90deg); }
.sl:not(.on) .clear { color: var(--accent); }
.sl:not(.on) .clear .pm { transform: rotate(0deg); }
.sl .clear:hover { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .sl .clear, .sl .clear .pm { transition: none; } }

/* tags */
.dc-tags { display: block; }  /* the search, the chosen tags, then the two browse boxes (.tagboxes) */
#dc-prefer { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.tagbox { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.tagbox h3 { font: 600 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 2px 0 10px; }
.tagbox input { width: 100%; font: 15px var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; }
.tagbox input:focus { outline: none; border-color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.chip { font: 500 13.5px var(--sans); background: var(--bg); color: var(--muted); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 10px; cursor: pointer; }
.chip:hover { color: var(--ink); border-color: var(--faint); }
.chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.tagbox details { margin-top: 8px; }
.tagbox summary { cursor: pointer; color: var(--muted); font-size: 15px; }

/* filters */
.dc-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.f { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--muted); }
.f .lab { color: var(--ink); font-weight: 600; font-size: 15px; }
.f .seg { align-self: flex-start; }   /* no empty space after the last option */
.f input[type=number], .f input[type=text] { font: 14.5px var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 8px; width: 100%; }
.f .two { display: flex; gap: 8px; align-items: center; }
.f .two input { width: 90px; }

/* sliders for discovery */
.dc-dials { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.dial { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.dial .seg { flex-wrap: wrap; border-radius: 10px; }

/* results */
.dc-bar { position: sticky; bottom: 0; z-index: 4; display: flex; justify-content: space-between; gap: 12px; align-items: center;
  padding: 14px 16px calc(26px + env(safe-area-inset-bottom)); margin-top: 18px; }   /* room inside the pill: 20px from its sides, 14px top and bottom (Sam, 2026-11-09) */
/* Two looks, the same size, so switching never moves the page (Sam, 2026-11-09). At the end of the page: a solid bar the
   full width of the screen with a line on top. While floating (dc.js adds .floating while there's more page below): a
   rounded pill 12 pixels above the bottom of the screen, so a phone's sliding toolbar shows the page under it, not a gap. */
.dc-bar::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw);
  background: var(--bg); border-top: 1px solid var(--line); }
.dc-bar.floating::before { left: -4px; right: -4px; bottom: calc(12px + env(safe-area-inset-bottom)); border: 1px solid var(--line); border-radius: 22px;
  background: var(--surface-2); }   /* no shadow: it darkened the page just under the pill (Sam, 2026-11-09) */
.dc-bar-end { height: 0; }
.dc-bar .sum { color: var(--muted); font-size: 15.5px; }
/* when Must choices are limiting the films, the line turns gold so it isn't missed (Caleb, 2026-10-30, from testing) */
.dc-bar .sum.limited { color: var(--accent); font-weight: 600; }
.dc-bar .sum-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.dc-bar .dc-near { display: inline-flex; align-items: center; gap: 8px; font: 500 14.5px var(--sans); color: var(--ink); cursor: pointer; }
.dc-bar .dc-near[hidden] { display: none; }
.dc-bar .dc-near input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.dc-bar button { font: 600 14.5px var(--sans); background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px; padding: 8px 16px; cursor: pointer; }
.dc-bar .reset { background: none; color: var(--muted); border: 1px solid var(--line); }
.dc-results .matches { margin-top: 8px; }
.dc .match { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items: start; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.dc .match img, .dc .match .ph { width: 84px; height: 126px; border-radius: 6px; object-fit: cover; background: var(--line); }
.dc .match h3 { font: 600 17px/1.25 var(--sans); margin: 2px 0 4px; }
.dc .match .meta { color: var(--muted); font-size: 15px; }
.dc .match .why { color: var(--ink); font-size: 15px; margin-top: 6px; }
.dc .match .score { font: 600 22px var(--sans); color: var(--accent); }
.dc .match .score small { display: block; font: 500 11.5px var(--sans); color: var(--faint); text-align: right; }
.dc .warn { color: var(--accent); font-size: 15px; }
.dc .empty { color: var(--muted); padding: 20px 0; }
@media (max-width: 640px) {
  .dc { padding: 8px 16px 0; }
  .dc .match { grid-template-columns: 64px 1fr auto; }
  .dc .match img, .dc .match .ph { width: 64px; height: 96px; }
}

/* in the main site (2026-10-16): Director's Cut is a mode of index.html */
.dc .f.wide { grid-column: 1 / -1; }
.dc .sugg.all { margin-top: 10px; }
.dc .sugg { font-size: 15px; color: var(--muted); margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dc .chip.gem { align-self: flex-start; margin-top: 6px; border-color: var(--accent); color: var(--accent); }
.dc .chip.gem.on { color: var(--accent-ink); }   /* on: gold with dark text, as other chosen chips */
.dc .dc-acts { display: flex; gap: 8px; }
.dc .dc-acts .btn:disabled { opacity: .45; cursor: default; }
.dc .person { position: relative; }
.dc .person input { font: 14.5px var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; width: 100%; }
.dc .person input:focus { outline: none; border-color: var(--accent); }
.dc .person .results-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 6; }
.dc .person .results-list [role="option"] { padding: 8px 12px; cursor: pointer; }
.dc .person .chip .x { background: none; border: 0; color: inherit; cursor: pointer; padding: 0 0 0 4px; font: inherit; }
.dc .dial .sl { border-top: 0; padding-top: 0; }
/* two-point sliders: two range inputs on one track, only their thumbs take the pointer */
.dual { display: flex; flex-direction: column; gap: 4px; }
.dual-track { position: relative; height: 26px; }
.dual-track::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: 2px; background: var(--line); }
.dual-track::after { content: ""; position: absolute; top: 11px; height: 4px; border-radius: 2px; background: var(--accent);
  left: calc(var(--lo, 0) * 100%); right: calc((1 - var(--hi, 1)) * 100%); }
.dual-track input { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; z-index: 1; }
.dual-track input::-webkit-slider-runnable-track { background: none; height: 26px; }
.dual-track input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--accent);
  border: 2px solid var(--bg); margin-top: 4px; cursor: pointer; }
.dual-track input::-moz-range-track { background: none; }
.dual-track input::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); cursor: pointer; }
.dual-val { color: var(--ink); font-size: 15px; }
.dc-asked { max-width: 760px; }
.dc .seg { flex-wrap: wrap; border-radius: 12px; }
.dc .seg button { white-space: nowrap; }
@media (max-width: 640px) {   /* phones: the count on its own line, the buttons under it */
  .dc .dc-bar { flex-wrap: wrap; gap: 8px; }
  .dc .dc-bar .sum-wrap { flex-basis: 100%; }
  .dc .dc-bar .sum { font-size: 13.5px; }
  .dc .dc-acts { margin-left: auto; }
}

/* Director's Cut's controls use the width on desktop (the site's column is 760px for one question at a time);
   its results keep The Feature's width so the cards look the same (Caleb, 2026-10-16) */
body[data-view="dc"] #app { max-width: 1180px; }
/* option groups: separate rounded buttons with a gap, so they wrap cleanly when space runs out */
.dc .seg { display: flex; flex-wrap: wrap; gap: 6px; border: 0; border-radius: 0; overflow: visible; }
.dc .seg button { border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }   /* 10px: Sequels stays on one line in the narrowest column (Caleb, 2026-11-02) */
.dc .seg button + button { border-left: 1px solid var(--line); }
.dc .seg button[aria-pressed="true"] { border-color: var(--accent); }
.dc .sl .seg button { padding: 2px 9px; }
/* the start-from-a-film box has no Title/Director toggle, so its clear button sits at the far right */
.dc-start .search input { padding-right: 20px; }
.dc-start .search input::-webkit-search-cancel-button { margin-left: 8px; cursor: pointer; }
/* a result pill's pop-up */
.dc-pop { position: absolute; z-index: 30; background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; box-shadow: 0 18px 50px rgb(0 0 0 / .5); font-size: 14.5px; color: var(--ink); }
.dc-pop p { margin: 0 0 6px; }
.dc-pop .dc-pop-h { font-weight: 600; color: var(--accent); }
.dc-pop small, .dc-pop .dc-pop-c { color: var(--muted); }

/* near misses: films that miss a must, shown after the ones that meet every must (Caleb, 2026-10-18) */
.dc-near-h { font: 400 22px/1.2 var(--serif, Georgia, serif); margin: 26px 0 4px; color: var(--muted, #a39a8c); }
.dc-miss { color: #e39a5b; font-style: normal; }

/* the line under "Here are your matches": what you asked for, in plain text, never the big serif pitch line (Caleb, 2026-10-18) */
.dc-asked { text-align: center; color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 640px; margin: -4px auto 18px; }
.dc-asked em { color: var(--accent); font-style: italic; }

/* the "i" beside each slider and its pop-up: what the slider measures and a film at 0, 5 and 10 (Caleb, 2026-10-18) */
.sl .ends { align-items: center; }
.sl .end-b { display: inline-flex; align-items: center; gap: 6px; text-align: right; }
.sl-i { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--muted);
  font: italic 600 11px/16px var(--serif); padding: 0; cursor: pointer; }
.sl-i:hover, .sl-i:focus-visible { color: var(--accent); border-color: var(--accent); }
.dc-anchors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.dc-anchors figure { margin: 0; text-align: center; font-size: 12.5px; line-height: 1.3; }
.dc-anchors .pt { display: block; font: 700 11px var(--sans); letter-spacing: .08em; color: var(--accent); margin-bottom: 4px; }
.dc-anchors img, .dc-anchors .ph { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; margin-bottom: 4px; background: var(--line); }
.dc-anchors small { color: var(--muted); }

/* "Like Heat" sits one line above the details under it, not two */
.results-pitch.dc-like { margin-bottom: 4px; }
.results-pitch.dc-like + .dc-asked { margin-top: 0; }

/* one search over settings and stories, and chosen tags with Normal, ×2 and Must (Caleb, 2026-10-19) */
.dc-tagsearch input { width: 100%; font: 15px var(--sans); padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.dc-tagsearch input:focus { outline: none; border-color: var(--accent); }
/* easier to notice (Aleks, 2026-11-03: "a little bit too faint," and she looked for a magnifying glass): a magnifying glass,
   a gold edge, a taller box, and brighter words, like The Feature's film search but smaller (Caleb approved, 2026-11-08) */
.dc-tagsearch svg { position: absolute; left: 15px; top: 24px; width: 20px; height: 20px; margin-top: -10px; color: var(--accent); pointer-events: none; }
.dc-tagsearch input { height: 48px; padding-left: 46px; font-size: 16px; background: var(--surface); border: 1.5px solid rgb(242 193 78 / .55); }
.dc-tagsearch input::placeholder { color: var(--muted); }
.dc-tagsearch .hits { margin: 8px 0 4px; }
.chip .kind, .tagpick .kind { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-right: 4px; }
.chip.on .kind { color: inherit; opacity: .75; }
.tagpicks { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; }
.tagpick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; border: 1px solid var(--accent); border-radius: 12px; background: var(--surface); }
.tagpick .nm { flex: 1 1 180px; font-weight: 600; }
.dc-tagsearch + .tagboxes { margin-top: 14px; }   /* with no tags chosen, the boxes keep the usual gap under the search (Caleb, 2026-10-19) */
.tagboxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
@media (max-width: 640px) { .tagboxes { grid-template-columns: 1fr; } }

/* the genre, setting, and story search opens as a dropdown (Caleb, 2026-10-19) */
.dc-tagsearch { position: relative; }
.dc-tagdrop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; max-height: 340px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 50px rgb(0 0 0 / .5); padding: 4px; }
.dc-tagdrop .opt { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left; font: 16px var(--sans); color: var(--ink);
  background: none; border: 0; border-radius: 7px; padding: 10px 12px; cursor: pointer; }
.dc-tagdrop .opt:hover, .dc-tagdrop .opt:focus-visible { background: var(--bg); }
.dc-tagdrop .opt .kind { flex: none; width: 64px; color: var(--accent); }   /* gold, as on the chips (Caleb, 2026-10-19) */
.dc-tagdrop .opt b { margin-left: auto; color: var(--accent); }

/* a starting film's own genres, setting, and story (Caleb, 2026-10-20): marked on each chip, with one line to remove them all */
.tagpick .from-film { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.from-head { margin: 10px 0 0; font-size: 15px; color: var(--muted); }
.from-head b { color: var(--ink); }
.from-head .linkish { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; margin-left: 6px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.tagpicks.after-head { margin-top: 8px; }
/* genres cycle (Caleb, 2026-10-25): excluded genres red and struck through, so the state never rests on color alone */
.chip.gcyc.out { background: color-mix(in srgb, var(--bad, #e05a4f) 18%, transparent); border-color: var(--bad, #e05a4f); color: var(--bad, #e05a4f); }
.chip.gcyc.out s { text-decoration-thickness: 1.5px; }
.dc .note.gcycle { margin: 0 0 8px; }

/* "and 8 more" in a result's line or the asked line opens to name them all (Caleb, 2026-11-01) */
.dc-more-inline { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dashed; text-underline-offset: 3px; }
.dc-more-inline:hover { color: var(--accent); }
.dc-nowrap { white-space: nowrap; }
.why-line.full { max-height: none; display: block; overflow: visible; }
.dc-full { display: none; }
.full > .dc-short { display: none; }
.full > .dc-full { display: inline; }

/* black-and-white and animation in the Look set (Sam, 2026-11-02) */
.look-segs { display: flex; flex-direction: column; gap: 12px; margin: 14px 0 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.look-segs .seg button { padding: 3px 8px; white-space: nowrap; }
/* a why line with "and 8 more" isn't clamped, so the button can't fall out of sight */
.why-line:has(.dc-more-inline) { display: block; max-height: none; -webkit-line-clamp: unset; }