/* v2.css — the v2 COMPONENTS' own internals: the grid's card and captions, the feel sliders, the Read view's web and
   lines, the film template's hero and lineage rows. Nothing page-specific lives here. The FRAME — regions, the five
   controls, strips, islands, sections, lists, the wall — is v2/frame.css; pages carry no CSS. Type comes from the
   .t-* roles in site.css. Spec: /v2/patterns.html. */

/* ── the search module (components/search.js): only its drop-target state; the rest is frame controls ── */
.tools.is-drop{outline:2px dashed var(--amber-soft);outline-offset:8px;border-radius:10px}
.tools-status{min-height:1.2em;margin:0}
.tools-status:empty{display:none}

/* ── the grid's card (components/grid.js): a poster, its year, the hover card; captions only when asked.
   The + on a poster is the SITE's (nav.js decorates every poster link: .sl-add top-right, the award trophy top-left);
   the card draws none of its own and never styles bare span/img descendants of the link. No frame around a poster:
   dark art read as "dimmed boxes" inside a lighter border. */
.gcard{position:relative;display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.gcard-poster{position:relative;display:block;aspect-ratio:2/3;border-radius:6px;overflow:hidden;background:transparent;border:0}
.gcard-poster img,.gcard-poster .gcard-blank{width:100%;height:100%;object-fit:cover;display:block}
.gcard-blank{display:grid;place-items:center;text-align:center;padding:var(--s-2);background:var(--bg2)}
.gcard-year{position:absolute;left:5px;bottom:5px;font:var(--fw-semibold) var(--fs-10)/1 var(--sans);letter-spacing:.04em;color:var(--amber);background:var(--scrim);border-radius:4px;padding:3px var(--s-1)}
.gcard:focus-within .gcard-poster{outline:2px solid var(--amber-soft);outline-offset:2px}
.gcard:not(.has-cap) .gcard-cap{display:none}
.gcard-cap{display:flex;flex-direction:column;gap:2px;min-width:0}
.gcard-title{text-decoration:none}
.slg .sec-h p{max-width:none}                                                     /* a group's line runs the wall's width — one line, not two */
.slg .sec{margin:0 0 var(--s-5);padding-top:var(--s-4)}
.essay-index{gap:var(--gap-grid)}                                                                           /* an essay entry is title · subtitle · excerpt: the entries need air between them (2026-09-13) */
.slg .sec-h{margin:0 0 var(--s-2);gap:2px}                                                              /* captions read whole: no clamp on the title, the why-line or the note (2026-09-11) */
.gcard-hover{position:absolute;left:0;right:0;bottom:0;top:0;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:var(--s-5) var(--s-2) var(--s-2);background:linear-gradient(180deg,var(--scrim-soft),var(--scrim-hard) 58%);color:var(--white);opacity:0;transition:opacity .12s;pointer-events:none;text-align:left}
.gcard-poster:hover .gcard-hover,.gcard-poster:focus-visible .gcard-hover{opacity:1}
.gcard-poster:hover .gcard-year{opacity:0}
.gcard-hover b{color:var(--white);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gcard-hover i{font-style:normal;color:var(--white-a72)}
.gcard-hover em{font-style:normal;color:var(--amber);display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px}   /* the whole poster is the card: up to nine lines of why */
@media (prefers-reduced-motion: reduce){.gcard-hover{transition:none}}
@media (hover: none){.gcard-hover{display:none}}
/* edit mode: a tapped poster leaves the list */
.slg.is-editing .gcard-poster{cursor:pointer}
.slg.is-editing .gcard-poster::after{content:"remove";position:absolute;right:5px;bottom:5px;font:var(--fw-semibold) var(--fs-10)/1 var(--sans);letter-spacing:.04em;color:var(--white);background:var(--danger);border-radius:4px;padding:3px var(--s-1)}
.slg.is-editing .gcard-year{opacity:0}
/* the feel sliders (a sidebar group, or the open panel in a results page's feel island) */
.sliders{display:grid;grid-template-columns:1fr;gap:var(--s-1);padding:var(--s-2) var(--s-1) var(--s-1);margin:0}
.slider{display:grid;grid-template-columns:62px 1fr 62px;align-items:center;gap:var(--s-1)}
.slider span:first-child{text-align:right}                                     /* each label hugs its end of the track — "Adult" sits by its slider, not at the far edge of its cell */
.slider span:last-child{text-align:left}
.slider input{width:100%;accent-color:var(--amber)}
.slider .track{position:relative;display:block;min-width:0}                    /* the range input plus, on an X vs Y wall, the two films' marks over it */
.slider .track input{display:block}
.vs-mark{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 2px var(--card)}
.vs-mark.a{background:var(--vs-a)}
.vs-mark.b{background:var(--vs-b)}
.sliders--panel{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px var(--s-5);padding:0}
.sliders--panel .slider{grid-template-columns:84px 1fr 84px;gap:var(--s-2)}
.sliders--panel .pill{justify-self:start;align-self:center}
/* a viewing-thread group's extras: the valence line, the discovery chips, the bridge */
.slg-valence{color:var(--dim)}
.slg-chipline{margin:var(--s-1) 0 0}
.slg-chipline span i{font-style:normal;color:var(--amber-soft);text-transform:uppercase;letter-spacing:.06em;font-size:var(--fs-10)}
.slg-bridge a{color:var(--ink)}
.slg-bridge .t-kicker{color:var(--amber-soft)}
.slg-bridge a.slg-bridge-add{margin-left:var(--s-1);color:var(--amber-soft)}   /* outranks .slg-bridge a by specificity, not !important (2026-09-17) */

/* ── the Read view (read-view.js): the web on canvas, its relations, the lines of sight as poster rows ── */
/* the Read view (2026-09-13): films first, reading at a wide measure, the web interactive */
.rv-sub{margin:var(--s-5) 0 var(--s-1)}
.rv-web{position:relative;margin:0 0 var(--s-3)}
.rv-web svg,.rv-web canvas{display:block;width:100%;height:auto;max-width:100%;border:1px solid var(--line);border-radius:10px;background:var(--card);touch-action:none}
.rv-link{stroke:var(--line);stroke-width:1.2;opacity:.8;transition:opacity .15s,stroke .15s}
.rv-arrow{fill:var(--dim)}
.rv-node{cursor:grab;outline:none}
.rv-node:active{cursor:grabbing}
.rv-node image{clip-path:inset(0 round 4px)}
.rv-node .rv-frame{fill:var(--bg2);stroke:transparent;stroke-width:2;rx:5}
.rv-node.is-on .rv-frame{stroke:var(--amber)}
.rv-node.is-sel .rv-frame{stroke:var(--ink)}
.rv-node .rv-blank{fill:var(--bg2)}
.rv-node .rv-label{font:var(--fw-semibold) var(--fs-11)/1 var(--sans);fill:var(--ink);paint-order:stroke;stroke:var(--card);stroke-width:3px;stroke-linejoin:round;pointer-events:none;opacity:0;transition:opacity .15s}
.rv-node.is-on .rv-label,.rv-node.is-hot .rv-label,.rv-node.is-sel .rv-label,.rv-node:focus-visible .rv-label{opacity:1}
.rv-web.has-hot .rv-node:not(.is-hot):not(.is-sel){opacity:.14}                    /* with a film held, everything not on its lines steps well back (2026-09-14, Adrian: "the unselected and inactive films would have to be dimmed more") */
.rv-web.has-hot .rv-node:not(.is-hot):not(.is-sel) .rv-label{opacity:0}          /* …and loses its label, even a film from the list */
.rv-web.has-hot .rv-link{opacity:.05}
.rv-web.has-hot .rv-link:not(.is-hot) + .rv-arrow{opacity:.05}
.rv-web.has-hot .rv-link.is-hot{opacity:1;stroke:var(--amber);stroke-width:1.8}
.rv-web.has-hot .rv-link.is-hot + .rv-arrow{fill:var(--amber)}
.rv-webcard{position:absolute;left:14px;top:14px;max-width:300px;padding:var(--s-3) var(--s-3);border:1px solid var(--line);border-radius:8px;background:var(--bg);display:flex;flex-direction:column;gap:var(--s-1);box-shadow:var(--shadow-float)}
.rv-webcard .strip{margin:var(--s-1) 0 0}
.rv-edges{list-style:none;margin:var(--s-3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s-3);max-width:min(100%,110ch)}   /* the relations read whole, at a wide measure (2026-09-13: they were narrow and clipped) */
.rv-edges li{display:flex;flex-wrap:wrap;gap:3px var(--s-2);align-items:baseline}
.rv-edges a{color:var(--ink);text-decoration:none}
.rv-edges a:hover{color:var(--amber)}
.rv-craft{flex-basis:100%;color:var(--dim)}
.rv-more button{margin-top:var(--s-1)}
/* the lines of sight as an index and a reveal (2026-09-14): a strip of every anchor, the richest few open, tap to open the rest */
.rv-anchors{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-2);margin:0 0 var(--s-5);padding:0;list-style:none}
.rv-anchor{display:inline-flex;align-items:center;gap:var(--s-2);height:auto;min-height:0;box-sizing:border-box;padding:3px var(--s-2) 3px 3px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--dim);cursor:pointer;font:var(--fw-regular) var(--fs-13)/1.2 var(--sans);transition:border-color .14s,color .14s;overflow:hidden}   /* the pill sizes to its poster, never to the control height (2026-09-14: posters spilled past the border) */
.rv-anchor img{width:22px;height:33px;flex:none;object-fit:cover;border-radius:16px 4px 4px 16px;display:block;background:var(--bg2)}
.rv-anchor i{font-style:normal;color:var(--dim);opacity:.7}
.rv-anchor:hover{border-color:var(--amber-soft);color:var(--ink)}
.rv-anchor.is-open{border-color:var(--amber);color:var(--ink)}
.rv-anchor.is-open i{color:var(--amber-soft);opacity:1}
.rv-anchors .pill{align-self:center}
.rv-line{margin:0 0 var(--s-6)}
.rv-line[hidden]{display:none}
.gc-post{margin:0 0 var(--s-4)}                                                          /* a generated course's post-ready intro (2026-09-14) */
.gc-post textarea.field{width:100%;max-width:none;min-height:88px;resize:vertical;font:var(--fw-regular) var(--fs-14)/var(--lh-body) var(--sans)}
.gc-post .strip{margin:var(--s-2) 0 0}
.rv-craft-other{margin-top:var(--s-1);color:var(--dim)}                                   /* the same pair as the other film's record tells it (2026-09-14) */
.rv-craft-other .t-meta,.rv-craft .t-meta{color:var(--amber-soft)}
.t-note.is-other{opacity:.85}
.rv-line h3{margin:0 0 var(--s-2)}
.rv-linerow{display:flex;gap:var(--s-3);overflow-x:auto;padding:2px 2px var(--s-2);scrollbar-width:thin}
.rv-lf{position:relative;flex:0 0 108px;display:flex;flex-direction:column;gap:3px;text-decoration:none;color:var(--ink);min-width:0}
.rv-lf img,.rv-lf .gcard-blank{width:108px;height:162px;object-fit:cover;border-radius:6px;display:block;background:var(--bg2)}
.rv-lf.is-seed img{outline:2px solid var(--amber);outline-offset:1px}
.rv-lf b{color:var(--amber-soft);text-transform:uppercase;letter-spacing:.06em;font-size:var(--fs-10);margin-top:var(--s-1)}
.rv-bridges{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:var(--s-5) var(--s-5)}   /* Go deeper: bridges as poster rows, two or three abreast (2026-09-14, Adrian: posters "sized like other cover posters") */
.rv-written .essay-index{max-width:min(100%,110ch)}                              /* the essays, courses and threads read at the same measure as the lines above them */
.rv-written .essay-index-dek{max-width:none}
.rv-bridge{display:grid;grid-template-columns:112px minmax(0,1fr);gap:var(--s-4);align-items:start}
.rv-bridge .rv-bridge-poster{display:block;width:112px;aspect-ratio:2/3;border-radius:4px;overflow:hidden;background:var(--bg2)}   /* the wall's poster size (frame.css .wall minmax 112) */
.rv-bridge img{width:100%;height:100%;object-fit:cover;display:block}
.rv-bridge > div{display:flex;flex-direction:column;gap:var(--s-1);min-width:0;padding-top:2px}
.th-rows{grid-template-columns:1fr;gap:var(--s-5)}
article.thread .essay-dek,article.thread .lede{max-width:none}   /* the thread's line and valence run the rows' measure, not the narrow one — the page was longer than it needed to be (Adrian, 2026-09-16) */                                     /* a thread's films: one readable row each, as the shelf shows a threaded watchlist (2026-09-16) */
.th-rows .th-blurb{display:block;max-width:var(--measure-read)}
.th-rows .rv-bridge > div > .t-note{max-width:var(--measure-read)}              /* the in-for and thread lines run the blurb's measure, not the bridge line's */
.th-rows .t-note .t-kicker{margin-right:var(--s-1)}
.rv-bridge .t-note{max-width:44ch}

/* ── the Film template (film.js): the server-rendered fallback, the hero, the lineage rows, the rail's chips ── */
.fm-ssr{max-width:var(--measure-read)}
.fm-ssr .fm-hero{display:flex;gap:var(--s-4);align-items:flex-start}
.fm-ssr .fm-hero img{width:160px;border-radius:8px}
.fm-head{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s-5);align-items:start;margin:0 0 var(--s-2)}
.fm-poster img{width:200px;max-width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:8px;display:block;background:var(--bg2)}
.pg-side > .fm-poster{margin:0 0 var(--s-1)}
.fm-lens .list{max-width:var(--measure-read)}
.fm-meta h1{margin:2px 0 var(--s-1)}
.fm-line{margin:0 0 var(--s-2)}
.fm-awd{margin-left:var(--s-1);cursor:default}
.fm-feel{margin:0 0 var(--s-4);max-width:var(--measure)}
.fm-feel .t-kicker{color:var(--amber-soft)}
.fm-conv{margin:0 0 var(--s-4);padding:var(--s-2) var(--s-3);border-left:2px solid var(--amber-soft);color:var(--dim);max-width:var(--measure)}
.fm-conv .t-kicker{color:var(--amber-soft)}
.fm-lens h3{margin:var(--s-4) 0 var(--s-1)}
.fm-lens .fm-group + .fm-group{margin-top:var(--s-6)}                                  /* essays · courses · threads: air between the kinds (2026-09-16) */
.fm-lens .fm-group h3{margin-top:0}
.fm-lens .fm-cards{padding-left:var(--s-4)}
.ask-tips{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s-3) var(--s-5);list-style:none;margin:0;padding:0}   /* Ask's Tips: the phrase, then what it does (2026-09-16) */
.ask-tips li{display:flex;flex-direction:column;justify-content:flex-start;align-self:start;gap:2px;min-width:0}
.ask-tips .t-card{font-weight:var(--fw-semibold)}
.fm-lens .rv-written{display:none}                                              /* the Kindred & Sideways tab is the Read view; its "written about" section is the Essays & courses tab here (2026-09-16) */
.fm-lens .sec:first-child{border-top:0;padding-top:0}                                            /* card grids indent to the essay text's left edge (2px rule + 16px) */
.fm-doc p{margin:0 0 var(--s-2);max-width:var(--measure)}
.fm-doc .dmood{color:var(--amber-soft);font-style:italic;margin:0 0 var(--s-3)}
.fm-dossier{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--line);max-width:var(--measure-read)}
.fm-dossier h1,.fm-dossier h2,.fm-dossier h3{margin:var(--s-4) 0 var(--s-1)}
.fm-dossier p{margin:0 0 var(--s-3)}
.fm-lin{list-style:none;margin:0 0 var(--s-1);padding:0;display:flex;flex-direction:column;gap:var(--s-3);max-width:var(--measure-read)}
.fm-lin li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--s-3);align-items:start}
.fm-lin img,.fm-lin .fm-noimg{width:44px;height:66px;object-fit:cover;border-radius:4px;background:var(--bg2);display:block}
.fm-lin b{display:block}
.fm-lin b a{color:var(--ink);text-decoration:none}
.fm-lin b a:hover{color:var(--amber)}
.fm-lin > li > div > .t-meta{color:var(--amber-soft);text-transform:uppercase;letter-spacing:.06em;font-size:var(--fs-10)}
.fm-lin p{margin:3px 0 0;color:var(--dim)}
.fm-lin .t-note{display:block}
.fm-chips{display:flex;flex-wrap:wrap;gap:var(--s-1)}
.fm-chips span{border:1px solid var(--line);border-radius:999px;padding:3px var(--s-2);color:var(--dim);cursor:default}
@media (max-width:640px){.fm-head{grid-template-columns:120px 1fr;gap:var(--s-3)}.fm-poster img{width:120px}}

/* ── the content templates (content.js): the essay body, a course's film headings, the package, the courses index ── */
.essay-sub{margin:calc(-1 * var(--s-1)) 0 var(--s-3);color:var(--dim)}
.essay-dek{margin:0 0 var(--s-3);max-width:var(--measure);color:var(--dim)}
.essay-body{max-width:var(--measure-read)}
.essay-body p{margin:0 0 1em}
.essay-body h2{margin:1.6em 0 .5em}
.essay-body h3{margin:1.4em 0 .4em}
.essay-body blockquote{margin:1em 0;padding:0 0 0 var(--s-4);border-left:2px solid var(--amber-soft);color:var(--dim)}
.essay-body img{max-width:100%;border-radius:8px}
.essay-body hr{border:0;border-top:1px solid var(--line);margin:1.6em 0}
.essay-body a{color:var(--amber-soft);text-decoration:none}
.essay-body a:hover{color:var(--amber)}
.cfilm{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--s-3);align-items:center;margin:1.8em 0 .6em}
.cfilm-poster img{width:64px;aspect-ratio:2/3;object-fit:cover;border-radius:5px;display:block;background:var(--bg2)}
.cfilm-h h3{margin:0}
.cfilm-h p{margin:2px 0 0}
.course-pane{margin-top:var(--s-1)}
.pk-film{margin:0 0 var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line);max-width:var(--measure-read)}
.pk-head{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--s-3);align-items:start;margin:0 0 var(--s-3)}
.pk-head img{width:72px;aspect-ratio:2/3;object-fit:cover;border-radius:5px;display:block;background:var(--bg2)}
.pk-head h3{margin:2px 0 var(--s-1)}
.pk-head h3 a{color:var(--ink);text-decoration:none}
.pk-head h3 a:hover{color:var(--amber)}
.pk-film p{margin:0 0 var(--s-2)}
.pk-film h4{margin:var(--s-3) 0 var(--s-1)}
.pk-carry{padding:var(--s-2) var(--s-3);border-left:2px solid var(--amber-soft);color:var(--dim)}
/* the essays index as the live site lists them (2026-09-14, Adrian: "the v2 is all white… the live site is more
   interesting"): a rule down the left of each entry, the title in the serif, the subtitle in amber, the excerpt dim at a
   reading measure. The colour rules carry the list's class so the shared head's type layer (appended after this file)
   cannot wash them back to white. Serves the Essays index and the Read view's "Written about these films" alike. */
.essay-index{gap:var(--gap-grid);max-width:var(--measure-read)}
.essay-index li{gap:3px;border-left:2px solid var(--line);padding:2px 0 2px var(--s-4)}
.essay-index li > a.t-title{font-size:var(--fs-24);font-weight:var(--fw-semibold);line-height:var(--lh-tight)}   /* the index's larger title, on the type tokens (2026-09-17) */
.essay-index .essay-index-sub{color:var(--amber-soft);font-size:var(--fs-13);margin:1px 0 2px}
.essay-index .essay-index-dek{color:var(--dim);font-size:var(--fs-15);line-height:1.5;max-width:var(--measure-read)}
.essay-index li > .t-meta{color:var(--dim)}
.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:var(--gap-grid)}   /* the courses index: cards of five posters, unboxed */
.course-card{display:flex;flex-direction:column;gap:3px;min-width:0;text-decoration:none}
.course-card .course-posters{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin:0 0 var(--s-1)}
.course-hero{margin:var(--s-1) 0 var(--s-4);max-width:var(--measure-read)}
.course-hero img{width:100%;display:block;border-radius:var(--radius-lg)}
.course-list{max-width:none}
.fm-poster a{display:block;position:relative;width:max-content;max-width:100%}
/* relation rings: a seeded wall's posters ringed by their primary relation (toggle + legend in the group panel) */
.slg.rings .gcard[data-rel="seed"] .gcard-poster{outline:2px solid var(--amber);outline-offset:1px}
.slg.rings .gcard[data-rel="lineage"] .gcard-poster{outline:2px solid var(--rel-lineage);outline-offset:1px}
.slg.rings .gcard[data-rel="sideways"] .gcard-poster{outline:2px solid var(--rel-sideways);outline-offset:1px}
.slg.rings .gcard[data-rel="thread"] .gcard-poster{outline:2px solid var(--rel-thread);outline-offset:1px}
.ring-legend{display:inline-flex;align-items:center;gap:var(--s-1) var(--s-3);flex-wrap:wrap}
.ring-legend i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:var(--s-1);vertical-align:-1px}   /* the key to the rings reads at note size (2026-09-18: it was the smallest text on the wall) */
.ring-legend .rl-seed{background:var(--amber)}.ring-legend .rl-lineage{background:var(--rel-lineage)}.ring-legend .rl-sideways{background:var(--rel-sideways)}.ring-legend .rl-thread{background:var(--rel-thread)}          /* a poster that is a link: nav.js's + sits on the poster, not beside it */
/* the choice modal's launcher (js/picks.js + css/picks.css) inside a door: the frame's primary button, not picks.css's outline */
.door #dpickstart{margin-left:0;background:var(--amber);border:1px solid transparent;color:var(--ink-on-amber);border-radius:var(--radius);padding:0 var(--s-3);min-height:var(--btn-h);font:var(--fw-bold) var(--fs-14)/1 var(--sans)}
.door #dpickstart:hover{color:var(--ink-on-amber);border-color:transparent;filter:brightness(1.06)}
.course-posters{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.course-posters img,.course-posters span{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:3px;display:block;background:var(--bg2)}
.gcard.is-canon .gcard-poster{outline:2px solid var(--amber);outline-offset:1px}

/* ── print: the content only; a course or a dossier prints as its package, one film per block ── */
@media print{.tabs,.lede{display:none!important}.pk-film{break-inside:avoid;border-top:1px solid #999;padding-top:var(--s-3)}.pk-film a{color:#000;text-decoration:none}.essay-body a{color:#000}body,html.sl-type{background:#fff!important;color:#000!important}.pg{padding:0}.t-note,.t-meta,.t-kicker{color:#444!important}.gcard-year{display:none}}
@media print{nav,#sl-pill,#sl-mine-pill,#sl-fb,.pg-tools,.pg-side,.pg-foot,.strip,.tabs,.v2-foot,.island{display:none!important}.pg{display:block}.gcard-hover{display:none}.wall{grid-template-columns:repeat(5,1fr)}.rv-web canvas{display:none}}

/* ---- the taste reading (2026-09-14, big job 3): the map, the five factors, the dials and habits, the tiles — drawn by
   v2/reading.js inside the reading template; everything else on the page is the frame's own (.sec, .strip, .island). */
.reading .reading-method{margin-top:var(--s-1)}
.reading-suggest{display:flex;gap:var(--s-4);align-items:center;margin:var(--s-4) 0 var(--s-1)}
.reading-suggest-poster img{width:64px;border-radius:var(--radius);display:block}
.rd{margin-top:var(--s-2)}
.rd-sec--first{margin-top:var(--s-3)}
.rd-mapwrap{display:grid;grid-template-columns:minmax(280px,520px) 1fr;gap:var(--s-5);align-items:start}
.rd-map-svg{width:100%;height:auto;display:block}
.rd-map-ground{fill:var(--bg2);stroke:var(--line)}
.rd-map-axis{stroke:var(--amber);stroke-opacity:.35;stroke-dasharray:3 3}
.rd-quad{font:var(--fs-10) var(--sans);fill:var(--mut);letter-spacing:.08em;text-transform:uppercase}
.rd-axlab{font:var(--fs-11) var(--sans);fill:var(--dim)}
.rd-dotlab{font:var(--fs-12) var(--sans);fill:var(--ink);font-weight:var(--fw-semibold)}
.rd-map-other{fill:var(--map-dot);fill-opacity:.45}
.rd-map-halo{fill:var(--amber);fill-opacity:.12;stroke:var(--amber);stroke-opacity:.35;stroke-dasharray:3 3}
.rd-map-you{fill:var(--amber);stroke:var(--bg);stroke-width:2}
.rd-side p{max-width:46ch}
.rd-side p b{color:var(--ink)}
.rd-bars{display:flex;flex-direction:column;gap:var(--s-4);margin:var(--s-1) 0 var(--s-1)}
.rd-bar{display:grid;grid-template-columns:118px 1fr 118px;gap:var(--s-3);align-items:center}
.rd-lab{text-align:right}
.rd-lab--r{text-align:left}
.rd-lab.is-win{color:var(--ink);font-weight:var(--fw-semibold)}
.rd-track{position:relative;display:block;width:100%;height:10px;padding:0;border:0;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--white-a06),var(--white-a10) 50%,var(--white-a06));cursor:pointer}
.rd-bar.is-master .rd-track{height:16px}
.rd-track:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.rd-mid{position:absolute;left:50%;top:-4px;bottom:-4px;width:1px;background:var(--amber);opacity:.6}
.rd-bar.is-master .rd-mid{top:-6px;bottom:-6px}
.rd-tick{position:absolute;top:2px;bottom:2px;width:2px;border-radius:1px;background:var(--map-dot-a)}
.rd-you{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:var(--amber);border:2px solid var(--bg);transform:translate(-50%,-50%);box-shadow:0 0 0 2px var(--amber-halo);transition:left .35s ease}
.rd-bar.is-master .rd-you{width:22px;height:22px}
.rd-you.is-mixed{box-shadow:0 0 0 2px var(--amber-halo),0 0 0 6px var(--amber-halo-soft)}
.rd-sub{grid-column:2;margin-top:-8px}
.rd-sub b{color:var(--ink);font-weight:var(--fw-semibold)}
.rd-bar.is-on .rd-track{outline:1px solid var(--amber-outline);outline-offset:3px}
.rd-panel{display:block;margin:0 0 var(--s-1)}
.rd-panel h3{margin:0 0 2px}
.rd-film{display:flex;gap:var(--s-2);align-items:flex-start;margin:var(--s-2) 0 0}
.rd-film img,.rd-film-blank{width:38px;height:56px;object-fit:cover;border-radius:4px;flex:none;background:var(--bg2)}
.rd-film b{display:block}
.rd-film span.t-note{display:block}
.rd-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4) var(--s-6);margin:var(--s-1) 0 var(--s-1)}
.rd-two h4{margin:var(--s-3) 0 var(--s-1)}
.rd-two h4:first-child{margin-top:0}
.rd-list{margin:0;padding:0;list-style:none}
.rd-list li{padding:3px 0 3px var(--s-3);position:relative}
.rd-list li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--amber-soft)}
.rd-list li b{color:var(--ink);font-weight:var(--fw-semibold)}
.rd-habits .pill i{font-style:normal;color:var(--amber-soft)}
.rd-within{margin:0 0 var(--s-1)}
.rd-within b{color:var(--ink)}
.rd-unex-row{margin-top:var(--s-1)}
.rd-read[hidden]{display:none}
.rd-read{margin-top:var(--s-3)}
.rd-ni pre{white-space:pre-wrap;word-break:break-word;font-size:var(--fs-11);color:var(--dim);max-height:360px;overflow:auto;background:var(--bg2);padding:var(--s-2);border-radius:var(--radius)}
.rd-tile{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:var(--s-2);margin:0 0 var(--s-2);transition:border-color .12s}
.rd-tile:hover{border-color:var(--amber-soft)}
.rd-tile-pos{display:flex;gap:var(--s-1);margin-bottom:var(--s-2)}
.rd-tile-pos img{width:25%;aspect-ratio:2/3;object-fit:cover;border-radius:4px;background:var(--bg2)}
.rd-tile-t{display:block}
.rd-tile-t i{font-style:normal;color:var(--dim);font-weight:var(--fw-regular)}
.rd-tile-d,.rd-tile-go{display:block;margin-top:3px}
.rd-tile-go{color:var(--amber-soft)}
/* the results page's set line (2026-09-16, from the live site's "50 closest to Con Air · showing 50" bar): count · Show pills · Add all · tools */
.setbar{gap:var(--s-2) var(--s-4)}
.island:not([hidden]) + .setbar{margin-top:var(--s-4)}   /* on Ask the line follows the refine island; it needs air above it (Adrian, 2026-09-17) */
.setbar-count b{color:var(--amber-soft);font-variant-numeric:tabular-nums}
.setbar-show{display:inline-flex;align-items:center;gap:var(--s-2)}
.setbar-show .pills{display:inline-flex;gap:var(--s-1);flex-wrap:wrap}
.setbar-show .pill{font-variant-numeric:tabular-nums}
.rd-tile-new{display:block;margin-top:var(--s-1);color:var(--amber-soft)}   /* spec 41 C: what a sharpen round moved — "7 films joined after your choices" */
.rd-tile--moved{border-color:var(--amber-soft)}
.course-card.is-new .card-kind{color:var(--amber-soft)}
/* the reading page on the one page grid (2026-09-17, Adrian: "each section seems to have its own width…", then "use Your Films as the
   template"): the column runs to the window as Your Films' does, and every row is the frame's .doors grid — the portrait cards
   half each (a .door spans three of six), the build tiles and the door tile a third, the course row a third. No grid of its own. */
.pg--reading .pg-main{max-width:none}
.pg--reading .rd-card.door,.pg--reading .pg-main ul.rd-plines,.pg--reading .pg-main ul.rd-threads{max-width:none}   /* the cards run to the column's edge (the read page's ul measure would cap them); their text keeps the reading measure */
.pg--reading .rd--cta .island.rd-cta,.pg--reading .rd--index .rd-index{max-width:none}
.rd-plines.doors{display:grid;align-items:stretch}                       /* the base .rd-plines is a flex column (the genre list keeps it); on the doors grid it is the grid */
/* the reading in plain words (spec 41 A): family kickers, one hedged claim per line, the films after it */
.rd-pf{margin-top:var(--s-4)}
.rd-pf h4{margin:0 0 var(--s-2)}
/* each insight is a card in the shape of the Your Films door — kicker · serif title · body · posters (Adrian, 2026-09-16) */
.rd-plines{list-style:none;margin:var(--s-3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--gap-grid);max-width:none}
.rd-card.door{gap:var(--s-1)}
.rd-card > .t-kicker{margin-bottom:2px}
.rd-card > p.t-body{max-width:var(--measure-read)}
.rd-card > p.t-body b{font-weight:var(--fw-semibold);color:var(--ink)}
.rd-card > .rd-prow{margin-top:var(--s-3)}
.rd-sec--genres .rd-pline{padding:var(--s-5) var(--s-5) var(--s-5)}
.rd-index{margin:var(--s-4) 0 var(--s-1);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-2)}
.rd-index .pills{display:inline-flex;flex-wrap:wrap;gap:var(--s-1)}
/* (a rule that zeroed the genre cards' side padding from their unboxed days was removed 2026-09-17 — Adrian: "small fix on the left margin"; they keep the door padding above) */
.rd-pcards--more{margin-top:var(--s-2)}
.rd-pcards--more[hidden]{display:none}
.rd-pmore-btn{align-self:flex-start;margin-top:var(--s-2)}
.rd--cta .rd-sec--cta{margin-top:var(--s-4)}
/* the sharpen island keeps to the cards' measure, and the portrait gets air above it (Adrian, 2026-09-16: "see how crowded it looks… the call to action bar is so wide compared to the panel") */
.rd--cta .island.rd-cta{max-width:var(--measure-read);box-sizing:border-box;margin-top:var(--s-5)}
.rd--index .rd-index{max-width:var(--measure-read)}
.rd-sec--portrait{margin-top:var(--s-7)}
.rd-sec--genres{margin-top:var(--s-7)}
/* the line's films: yours as posters, then the films of that kind not on the list — one row, two groups */
.rd-prow{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);margin-top:var(--s-2)}
.rd-pgroup{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}   /* a flex item shrinks below its grid's min-content (a phone: the page zoomed out to 690px, 2026-09-17) */
.rd-pgroup--next{padding-left:var(--s-6);border-left:1px solid var(--line)}
.rd-pcards{display:flex;gap:var(--s-2);flex-wrap:wrap}
.rd-pcard{position:relative;display:flex;flex-direction:column;gap:var(--s-1);width:84px;text-decoration:none;color:inherit}
.rd-pcard img,.rd-pcard-blank{display:block;width:84px;aspect-ratio:2/3;object-fit:cover;border-radius:4px;background:var(--bg2)}
.rd-pcard .t-note{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25}
.rd-pcard:hover .t-note{color:var(--amber-soft)}
/* spec 42 F (2026-09-17): the bookmark on a suggested poster — want to watch. It feeds the person's watchlist (a 'want' list on Your
   Films), not the site's working list: they haven't seen the film, so the poster + is off on these groups (data-no-add, nav.js). */
.rd-want{position:absolute;top:var(--s-1);right:var(--s-1);z-index:5;display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:var(--radius-pill);background:var(--scrim);color:var(--white);cursor:pointer;opacity:.85;transition:opacity .14s,background .14s;--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'><path d='M6 3h12v18l-6-4-6 4z'/></svg>")}
.rd-want::before{content:"";display:block;width:13px;height:13px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.rd-want > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rd-want:hover,.rd-want:focus-visible{opacity:1}
.rd-want.is-on{opacity:1;background:var(--amber);color:var(--ink-on-amber);--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M6 3h12v18l-6-4-6 4z'/></svg>")}
@media (max-width:720px){.rd-pgroup--next{padding-left:0;border-left:0}}
/* what you keep coming back to (spec 41 B): a thread per row, the person's films as names, the films not on the list as small cards with the gem line */
.rd-threads{list-style:none;margin:var(--s-3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--gap-grid)}
.rd-thread.rd-card > h3 a{color:inherit;text-decoration:none}
.rd-thread.rd-card > h3 a:hover{color:var(--amber-soft)}
.rd-pgroup--wide{flex:1 1 100%;min-width:0;width:100%;padding-left:0;border-left:0}
.rd-pgroup--wide .rd-next{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));max-width:720px}
.rd-thread-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-3)}
.rd-thread-h .t-title{margin:0}
.rd-thread-line{margin:var(--s-1) 0 0}
.rd-thread-yours{margin:var(--s-1) 0 0}
.rd-thread-yours .t-kicker{margin-right:var(--s-1)}
.rd-next-k{margin:var(--s-3) 0 var(--s-2)}
.rd-next{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:var(--s-3) var(--s-3);max-width:none}
.rd-next-card{position:relative;display:flex;flex-direction:column;gap:var(--s-1);text-decoration:none;color:inherit;min-width:0}   /* relative: the want-to-watch bookmark sits on the poster (spec 42 F) */
.rd-next-card img,.rd-next-blank{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:4px;background:var(--bg2)}
.rd-next-card .t-card{display:block;margin-top:3px}
.rd-next-card .t-note{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.rd-next-card:hover .t-card{color:var(--amber-soft)}
.rd-thread > .t-note:last-child{margin:var(--s-3) 0 0}
/* the evidence folds (spec 41 A): a closed disclosure holding the five factors, the tone sliders, the feel and the habits */
.rd-fold{margin-top:var(--s-5);border-top:1px solid var(--line);padding-top:var(--s-4)}
.rd-fold > summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:var(--s-3)}
.rd-fold > summary::-webkit-details-marker{display:none}
.rd-fold > summary::before{content:"";flex:none;width:9px;height:9px;margin-top:var(--s-3);border-right:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);transform:rotate(-45deg);transition:transform .15s}
.rd-fold[open] > summary::before{transform:rotate(45deg)}
.rd-fold-h{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.rd-fold > summary .t-title,.rd-fold > summary .t-note{display:block;margin:0}
.rd-fold > summary .t-note{max-width:var(--measure-read)}
.rd-fold > summary:hover .t-title{color:var(--amber-soft)}
.rd-fold > .rd-sec:first-of-type{margin-top:var(--s-2)}
.rd-habits .pill{cursor:default}
.rd-habits .pill:hover{border-color:var(--line);color:var(--dim)}   /* a habit is a fact, not a control (Adrian, 2026-09-16) */
.rd-tiles{margin-top:var(--s-1)}   /* three across from a 1200px window up; no orphan tile */   /* the three build-on-taste lists as a row in the main column, not stacked in the rail (2026-09-16) */
.rd-tiles .rd-tile{margin:0}
.rd-tiles .rd-tile-d{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:720px){.rd-mapwrap,.rd-two{grid-template-columns:1fr}.rd-bar{grid-template-columns:1fr;gap:var(--s-1)}.rd-lab{text-align:left}.rd-sub{grid-column:1}.reading-suggest{align-items:flex-start}}

/* ---- the next step (2026-09-15): the door island with a quiet "not now" — one per page, under the film page's door line */
.island--next{position:relative;padding-right:var(--s-7)}
.island--next .t-body{flex:1 1 320px}
.island--next .next-line{flex:1 1 100%;margin:0}                                /* the Four island's onward links: one line of text under the reading, not pills (2026-09-16) */
.island--next .next-x{position:absolute;right:10px;top:8px;background:none;border:0;color:var(--dim);font-size:var(--fs-20);line-height:1;cursor:pointer;padding:var(--s-1) var(--s-1);border-radius:var(--radius)}
.island--next .next-x:hover,.island--next .next-x:focus-visible{color:var(--ink);background:var(--bg2)}
.island--next .next-copy{flex:1 1 100%;font:inherit;font-size:var(--fs-13);line-height:1.5;background:var(--bg2);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s-2) var(--s-3)}
.island--next .next-pills{flex:1 1 100%;margin-top:2px}

/* ---- the home masthead (P3, 2026-09-15, Adrian's decision B): one sentence of what Sightlines is and three doors — Ask
   with a real question, Bring your films, Read your taste — above the Browse wall, on the home page only */
.mast{margin:0 0 var(--s-5)}
.mast-lede{max-width:72ch;margin:0 0 var(--s-4)}
.doors--home{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.door.door--home{grid-column:auto;padding:var(--s-4) var(--s-4) var(--s-4);gap:var(--s-2)}
.door--home .t-body{flex:1 1 auto}
.door--home .strip{margin-top:var(--s-1)}
.door--home .btn{white-space:normal;text-align:left;line-height:1.25}
@media(max-width:900px){.doors--home{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.doors--home{grid-template-columns:1fr}}
.island--next .next-share{flex:1 1 100%;display:flex;flex-direction:column;gap:var(--s-2);padding-top:var(--s-2);border-top:1px solid var(--line)}
.island--next .next-share .next-copy{flex:none}
.island--next .next-share .next-copy{height:auto;min-height:168px;resize:vertical}

/* ---- clearing and dismissing (the rule, 2026-09-15): a text field's × sits inside the field at its right; a panel that
   follows the page's own input (the Ask island, a grid's island) has no × — typing a new question replaces it; an
   unprompted island (the film page's next step, "do yours") keeps one quiet × at its top right; a modal's × is top right */
.field-row .field-wrap{position:relative;flex:1 1 auto;min-width:0;display:flex}
.field-row .field-wrap .field{padding-right:var(--s-6)}
.field-row .field-wrap .field-clear{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:30px;min-height:0;height:30px;margin:0;border-radius:var(--radius);line-height:1}
.field-row .field-wrap .field-clear:hover{background:var(--card)}
.island--next.island--next-fixed{padding-right:var(--s-4)}
.next-stack{display:flex;flex-direction:column;gap:var(--s-3)}
.next-stack .island ~ .island{margin-top:0}
.slg-hint{margin:0 0 var(--s-2);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-2)}
.slg-hint b{color:var(--ink)}
.island ~ .next-stack,.next-stack ~ .island,.next-stack ~ .strip:not([hidden]){margin-top:var(--s-5)}   /* the stack keeps the islands' air on both sides */
.slg-hint{display:block}
.slg-hint b{margin:0 2px}
.slg-hint .pill{margin-left:var(--s-1);vertical-align:middle}

/* ---- the one course card, everywhere a course is linked (2026-09-15) ---- */
.course-grid--rail{grid-template-columns:1fr;gap:var(--s-4)}
.tabs--flush{margin:0;border:0}                                            /* tabs set flush inside a bar (the collection's Films / Read) — was an inline style (2026-09-17) */
.course-grid.doors{grid-template-columns:repeat(6,minmax(0,1fr))}            /* a course row on the one page grid (frame .doors): each card a third (2026-09-17) */
.doors > .course-card{grid-column:span 2}
@media (max-width:1240px){.doors > .course-card{grid-column:span 3}}
@media (max-width:640px){.doors > .course-card{grid-column:1 / -1}}
.course-grid--row{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--gap-grid)}   /* the index's width, not a quarter of the lens (Adrian, 2026-09-16: "the width of courses on the courses page is much better") */
.course-grid--row .course-card .t-note{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}   /* a card in a row keeps its note to three lines, as the thread card does */
.island .course-grid{flex:1 1 100%}
.course-card .t-card{line-height:var(--lh-snug)}
.course-card .t-note{margin-top:1px}

/* ---- the one essay card and the one thread card (2026-09-15): the essays index's look for an essay wherever it is
   linked; the course card's look for a thread ---- */
.essay-cards{display:flex;flex-direction:column;gap:var(--s-5);max-width:var(--measure-read)}
.essay-card{display:flex;flex-direction:column;gap:3px;min-width:0;border-left:2px solid var(--line);padding:2px 0 2px var(--s-4);text-decoration:none;color:inherit}
.essay-card > .t-title{font-size:var(--fs-24);font-weight:var(--fw-semibold);line-height:var(--lh-tight)}
.essay-card:hover > .t-title{color:var(--amber)}
.essay-card .essay-index-sub{color:var(--amber-soft);font-size:var(--fs-13);margin:1px 0 2px}
.essay-card .essay-index-dek{color:var(--dim);font-size:var(--fs-15);line-height:1.5}
.essay-card > .t-meta{color:var(--dim)}
.essay-cards--rail{gap:var(--s-3)}
.essay-cards--rail .essay-card > .t-title{font-size:var(--fs-16)}
.rv-written .essay-cards{max-width:min(100%,110ch)}
.thread-card .t-note{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---- a group in a grouped grid (2026-09-15): the title line carries the group's actions as pills, right; the bridge line
   closes the group under its posters ---- */
.slg-sec-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2) var(--s-4);flex-wrap:wrap}
.slg-sec-top .t-title{margin:0}
.slg-gacts{margin:0;gap:var(--s-2)}
.slg-bridge-line{margin:var(--s-2) 0 0}
.slg-bridge-line .slg-bridge{display:block}
.course-card .card-kind{font-size:var(--fs-10);margin-top:2px}
.thread-films .wall{margin-top:var(--s-1)}
.thread-films .gcard-why{color:var(--dim)}
.island--feel .feel-toggle{justify-content:flex-end}   /* Show / Hide controls sits right (Adrian, 2026-09-15: "I like these buttons right aligned") */
.island--feel .feel-toggle .pill{margin-left:auto}
.mast{margin-top:calc(-1 * var(--s-5))}   /* the doors sit up under the search field (Adrian, 2026-09-15: "move the panels up a bit") */
@media(max-width:900px){.mast{margin-top:var(--s-1)}}   /* the pull-up is a desktop measure: on a phone the intake row sits right above the doors */
@media (max-width:640px){.rd-pgroup--next{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:var(--s-2)}}   /* a phone: the Suggested group sits under Yours, not beside it; poster rows wrap (2026-09-17) */
/* spec 42 (2026-09-17): the reading answers back — the two answers on a card, the person's words, the rejected lines in the fold */
.rd-claim{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);margin-top:var(--s-3)}
.rd-claim .t-note{margin:0}
.rd-say{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-top:var(--s-2);width:100%}
.rd-say .field{flex:1 1 280px;max-width:640px}
.rd-say[hidden]{display:none}
.rd-card.is-confirmed > .t-kicker{color:var(--amber)}
.rd-words{margin-top:var(--s-2);color:var(--dim)}
.rd-words b{color:var(--ink);font-weight:var(--fw-semibold)}
.rd-rejected{list-style:none;margin:var(--s-3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s-2)}
.rd-rejected li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3)}
.rd-rejected s{color:var(--dim)}
/* the reading's running total (2026-09-17): choices folded in, and how full the genre meters are — the modal counts only its session */
.rd-prog{display:flex;grid-column:1/-1;flex:1 1 100%;width:100%;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);margin:var(--s-1) 0 var(--s-2);color:var(--dim)}   /* its own row in the island, under the sentence */
.rd-prog b{color:var(--ink);font-weight:var(--fw-semibold)}
.rd-prog-bar{display:block;flex:1 1 160px;max-width:240px;height:4px;border-radius:var(--radius-pill);background:var(--line);overflow:hidden}
.rd-prog-bar i{display:block;height:100%;background:var(--amber);border-radius:var(--radius-pill)}
.rd-prog[hidden]{display:none}
.island--next > .rd-prog{flex:1 1 100%;width:100%}   /* outranks the island's per-child flex basis: the line is its own row between the sentence and the doors */