/* THE WORK GALLERY (render/work-gallery.ts, assets/work-gallery.js; lane WR, 2026-11-01). One gallery, card and drawer
   for the six Work pages. Site tokens only; spacing is the --s scale, type the site ramp. The drawer frame is .pc-dlg
   (production-checklist.css); this sheet adds only what a Work drawer holds.
   The motif: a purple seam where two Aesthetics meet. Purple marks a join or a choice (the seam, the hover ring, the one
   primary action) and nothing else. */

/* ---- 1. the head: title, one sentence, one action ----------------------------- */
.wg-head { margin: 0 0 var(--s7); max-width: 46rem; }
.wg-h1 { margin: 0; font: 800 clamp(2.5rem, 6vw, 4.5rem)/.98 var(--display); letter-spacing: -.04em; color: var(--ink); }
.wg-h1:focus { outline: none; }
.wg-line { margin: var(--s4) 0 0; font: var(--t-md)/1.4 var(--ui); color: var(--ink-2); max-width: 38rem; }
.wg-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin: var(--s5) 0 0; }
.wg-cta, .ia a.wg-cta, .ia a.wg-cta:visited { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--s5);
  font: 650 var(--t-base)/1 var(--ui); color: var(--paper); background: var(--brand); border-radius: var(--r-soft); text-decoration: none; }
.wg-cta:hover, .ia a.wg-cta:hover { background: var(--brand-lift); }
.wg-acts [hidden] { display: none; }
.wg-quiet { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; font: 500 var(--t-sm)/1 var(--ui); color: var(--ink-2); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.wg-quiet:hover { color: var(--ink); }
:is(.wg-cta, .wg-quiet, .wg-btn, .wg-hit):focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ---- 2. a section over a gallery: a plain label and its count ----------------- */
.wg-sec { margin: 0 0 var(--s7); }
.wg-sec__h { display: flex; align-items: baseline; gap: var(--s3); margin: 0 0 var(--s4); font: 650 var(--t-md)/1.2 var(--ui); color: var(--ink); }
.wg-sec__n { font: 400 var(--t-sm)/1 var(--mono); color: var(--ink-3); }
.wg-sec__lead { margin: calc(-1 * var(--s2)) 0 var(--s4); font: var(--t-sm)/1.5 var(--ui); color: var(--ink-2); }
.wg-sec__lead:focus { outline: none; }

/* ---- 3. the gallery: as many columns as keep each card 17rem wide; a rule, not breakpoints */
.wg-gal { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6) var(--s5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.wg-card { position: relative; min-width: 0; }
/* the title is the card's one control; its ::after covers the whole card, so the picture is the button too */
.wg-name { margin: var(--s3) 0 0; font: 600 var(--t-md)/1.25 var(--ui); letter-spacing: -.005em; color: var(--ink); overflow-wrap: anywhere; text-wrap: balance; }
.wg-hit, .ia a.wg-hit { display: inline; padding: 0; font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; text-decoration: none; border-radius: var(--r-soft); }
.wg-hit::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.wg-card:has(.wg-hit:focus-visible) .wg-hit { outline: none; }
.wg-card:has(.wg-hit:focus-visible)::before { content: ""; position: absolute; inset: calc(-1 * var(--s2)); border: 2px solid var(--brand); border-radius: var(--r-soft); pointer-events: none; }
.wg-card:is(:hover, :focus-within) .wg-hit { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.wg-meta { margin: var(--s1) 0 0; font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); overflow-wrap: anywhere; }
.wg-tag { display: inline-block; margin: var(--s2) 0 0; padding: var(--s1) var(--s2); font: var(--t-xs)/1.3 var(--mono); color: var(--ink); background: var(--brand-wash); border: 1px solid var(--brand-edge); border-radius: var(--r-soft); }

/* ---- 4. the picture well: stills side by side, joined by the purple seam ------ */
.wg-well { display: block; overflow: hidden; border-radius: var(--r-soft); background: var(--paper-3); outline: 1px solid var(--rule); outline-offset: -1px; }
.wg-stills { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 2px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--brand); }
.wg-stills img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; object-position: 0 0; transition: filter .2s ease; }
.wg-stills--none { display: grid; place-items: center; padding: var(--s4); background: var(--paper-3); font: var(--t-sm)/1.4 var(--ui); color: var(--ink-3); text-align: center; }
.wg-pal { display: flex; height: var(--s2); }
.wg-pal i { flex: 1; }
.wg-card:is(:hover, :focus-within) .wg-well { outline: 2px solid var(--brand); outline-offset: -2px; }
.wg-card:is(:hover, :focus-within) .wg-stills img { filter: brightness(1.1); }

/* a worksheet drawn as a page, with the visitor's own first answers (Outputs) */
.wg-sheet { display: flex; flex-direction: column; gap: var(--s2); aspect-ratio: 16 / 9; padding: var(--s4) var(--s5); overflow: hidden;
  background: var(--paper-deep); border-left: 3px solid var(--brand); }
.wg-sheet__t { font: 650 var(--t-sm)/1.25 var(--ui); color: var(--ink); }
.wg-sheet__l { display: block; padding-top: var(--s1); border-top: 1px solid var(--rule); font: var(--t-xs)/1.4 var(--ui); color: var(--ink-2);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wg-sheet__l i { display: block; font: normal var(--t-xs)/1.3 var(--mono); color: var(--ink-3); }

/* ---- 4b. filters, the undo line, a gated gallery's one panel ------------------ */
.wg-filters { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s5); }
.wg-chip { display: inline-flex; align-items: center; gap: var(--s2); min-height: 2.75rem; padding: 0 var(--s4); font: 600 var(--t-sm)/1 var(--ui);
  color: var(--ink-2); background: none; border: 1px solid var(--rule-firm); border-radius: var(--r-soft); cursor: pointer; }
.wg-chip:hover { color: var(--ink); background: var(--paper-3); }
.wg-chip[aria-pressed="true"] { color: var(--ink); border-color: var(--brand); background: var(--brand-wash); }
.wg-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.wg-chip__n { font: 400 var(--t-xs)/1 var(--mono); color: var(--ink-3); }
.wg-undo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: 0 0 var(--s5); padding: var(--s2) var(--s4);
  font: var(--t-sm)/1.4 var(--ui); color: var(--ink); background: var(--paper-3); border-radius: var(--r-soft); }
.wg-gate { container-type: inline-size; display: grid; gap: var(--s5); align-items: center; margin: 0; padding: 0; }
.wg-gate__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-soft); outline: 1px solid var(--rule); outline-offset: -1px; background: var(--paper-3); }
.wg-gate__h { margin: 0; font: 650 var(--t-lg)/1.15 var(--display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.wg-gate__p { margin: var(--s3) 0 0; font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink-2); max-width: 32rem; }
@media (min-width: 48rem) { .wg-gate { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s6); } }
.wg-also { margin: var(--s6) 0 0; font: var(--t-sm)/1.6 var(--ui); color: var(--ink-2); }
.ia .wg-also a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.wg-foot-note { margin: var(--s7) 0 0; padding-top: var(--s4); border-top: 1px solid var(--rule); font: var(--t-sm)/1.55 var(--ui); color: var(--ink-2); }

/* ---- 5. inside a drawer --------------------------------------------------------- */
.wg-dlg .pc-dlg__t { padding-right: var(--s7); } /* clear of the × */
.wg-dlg__sub { margin: 0; width: 100%; font: var(--t-sm)/1.4 var(--mono); color: var(--ink-3); }
.wg-dlg .wg-well { margin: 0 0 var(--s5); }
.wg-dlg__h { margin: var(--s6) 0 var(--s2); font: 400 var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); letter-spacing: 0; }
.wg-dlg__h:first-child { margin-top: 0; }
.wg-dlg__p { margin: 0; font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink-2); max-width: 36rem; }
.wg-dlg__p + .wg-dlg__p { margin-top: var(--s3); }
.wg-dlg .fv-work { margin: var(--s3) 0 0; font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink-2); } /* Saved's link to Outputs, a pinned class */
.ia .wg-dlg .fv-work a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.wg-dlg__p b { color: var(--ink); font-weight: 600; }
.ia .wg-dlg__p a, .ia .wg-rows a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
/* label / value rows (who controls what, an item's facts) */
.wg-rows { margin: 0; padding: 0; list-style: none; }
.wg-rows > li, .wg-rows > div { display: grid; grid-template-columns: minmax(7rem, 2fr) minmax(0, 3fr); gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--rule); }
.wg-rows > :last-child { border-bottom: 1px solid var(--rule); }
.wg-rows dt, .wg-rows .wg-k { font: var(--t-sm)/1.5 var(--ui); color: var(--ink-3); }
.wg-rows dd, .wg-rows .wg-v { margin: 0; font: var(--t-sm)/1.5 var(--ui); color: var(--ink); overflow-wrap: anywhere; }
/* a list of Aesthetics with their stills */
.wg-who { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.wg-who li { display: flex; align-items: center; gap: var(--s3); font: 600 var(--t-base)/1.3 var(--ui); color: var(--ink); }
.wg-who img { flex: none; width: 3rem; height: 3rem; object-fit: cover; object-position: 0 0; border-radius: var(--r-soft); outline: 1px solid var(--rule); outline-offset: -1px; }
.wg-note { margin: var(--s2) 0 0; font: var(--t-sm)/1.5 var(--ui); color: var(--ink-3); }
.wg-status { margin: 0; padding-left: var(--s3); border-left: 2px solid var(--rule-firm); font: var(--t-base)/1.5 var(--ui); color: var(--ink-2); max-width: 36rem; }
.wg-status.is-ready { border-left-color: var(--brand); color: var(--ink); }
/* the foot: actions on the left; the item's own housekeeping (rename, delete) on the right */
.wg-dlg .pc-dlg__foot { align-items: center; }
.wg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); width: 100%; }
.wg-foot__go, .wg-foot__keep { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.wg-foot__keep { margin-left: auto; }
.wg-btn { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--s4); font: 600 var(--t-sm)/1 var(--ui);
  color: var(--ink); background: none; border: 1px solid var(--rule-firm); border-radius: var(--r-soft); cursor: pointer; text-decoration: none; }
.ia .wg-dlg a.wg-btn { color: var(--ink); text-decoration: none; }
.wg-btn:hover { background: var(--paper-3); }
.wg-btn--go, .ia .wg-dlg a.wg-btn--go { color: var(--paper); background: var(--brand); border-color: var(--brand); }
.wg-btn--go:hover, .ia .wg-dlg a.wg-btn--go:hover { background: var(--brand-lift); border-color: var(--brand-lift); }
.wg-btn--quiet { border-color: transparent; color: var(--ink-2); }
.wg-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); width: 100%; margin: 0; }
.wg-confirm__q { flex-basis: 100%; margin: 0; font: var(--t-sm)/1.45 var(--ui); color: var(--ink); }
.wg-confirm__q:focus { outline: none; }
.wg-btn--stop { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.wg-btn--stop:hover { background: var(--ink-2); }
.wg-rename { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); width: 100%; margin: 0; }
.wg-rename label { flex-basis: 100%; font: 600 var(--t-xs)/1.3 var(--ui); color: var(--ink-2); }
.wg-rename input { flex: 1 1 14rem; min-width: 0; min-height: 2.75rem; padding: 0 var(--s3); font: 500 var(--t-base)/1.3 var(--ui); color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-firm); border-radius: var(--r-soft); }
.wg-rename input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.wg-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .wg-stills img { transition: none; } }

/* ROWS (WR v3, 2026-11-01): the Work pages draw Saved's category rows (ia.css .fv-*); these few lines are what they add. */
.wg-top .lc-job { margin-bottom: 0; }
.wg-top__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin: var(--s4) 0 0; }
.wg-top__acts .wg-btn { min-height: 2.25rem; }
.wg-row-note { margin: var(--s1) 0 0; font: var(--t-sm)/1.5 var(--ui); color: var(--ink-3); }
.wg-stack { margin-top: var(--s6); }
.fv-card .wg-well { border-radius: 0; outline: 0; }
.fv-card .wg-tag { align-self: flex-start; }
.fv-card .wg-sheet { aspect-ratio: 16 / 9; }
.wg-undo-line { margin: 0 0 var(--s4); }
.wg-bar { display: block; height: var(--s1); margin-top: var(--s1); background: var(--rule-firm); border-radius: 2px; overflow: hidden; }
.wg-bar > i { display: block; height: 100%; background: var(--brand); }
.ia .wg-top__acts a.wg-btn, .ia .wg-top__acts a.wg-btn:visited { color: var(--ink); text-decoration: none; }
.ia .wg-top__acts a.wg-btn--go, .ia .wg-top__acts a.wg-btn--go:visited { color: var(--paper); }
.wg-stack > :not(:first-child) > .fv-sec, .wg-stack > .fv-sec:not(:first-child) { margin-top: var(--s5); }
.wg-stack > :empty + * > .fv-sec, .wg-stack > :empty + .fv-sec { margin-top: 0; }
.fv-card .wg-tag { white-space: nowrap; }
.wk [hidden] { display: none; }
.wk-rest { margin: var(--s5) 0 0; font: var(--t-sm)/1.6 var(--ui); color: var(--ink-2); }
.wg-stack > .wk-rest:first-child { margin-top: 0; }
.ia .wk-rest a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.wk-start { margin-top: auto; padding-top: var(--s2); font: 600 var(--t-sm)/1 var(--ui); color: var(--brand); }

/* OUTPUTS: EVERY DELIVERABLE (2026-11-02). A deliverable not made yet is an empty sheet: a dashed edge, the paper's own
   ground, the first questions its worksheet asks as labels over blank lines. Nothing in it reads as an answer. */
.wg-sheet--blank { background: transparent; border: 1px dashed var(--rule-firm); box-shadow: none; }
.wg-sheet--blank .wg-sheet__t { color: var(--ink-2); }
/* each label on its own blank line: one line, no clamp, the line drawn under it */
.wg-sheet--blank .wg-sheet__l { display: block; -webkit-line-clamp: unset; padding: var(--s1) 0 var(--s3); border-top: 0; border-bottom: 1px dashed var(--rule-firm); }
.wg-sheet--blank .wg-sheet__l i { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-state { font: var(--t-xs)/1.4 var(--mono); color: var(--ink-2); }
.wk-ask { margin: 0; padding-left: 1.1em; display: grid; gap: var(--s1); font: var(--t-sm)/1.45 var(--ui); color: var(--ink); }
.wk-badge { display: inline-block; padding: 1px var(--s2); font: 500 var(--t-xs)/1.4 var(--mono); color: var(--ink-2); border: 1px solid var(--rule-firm); border-radius: 2px; }

/* MADE, AT A GLANCE (2026-11-04, Annie: "a saved card looks almost the same as the not-started ones"). A made
   deliverable takes the brand violet on its whole edge and a violet status line with a check; not started stays a dashed,
   muted sheet. --brand is the text-safe violet in both themes (8.6:1 on white; the plate strength on night). */
/* the edge is drawn over the card (its sheet and body both), so the picture can't cover it */
.wk-made > .fv-card { position: relative; }
.wk-made > .fv-card::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--brand); border-radius: inherit; pointer-events: none; }
.wk-made .wg-sheet { border-left-color: var(--brand); }
.wk-made__s { color: var(--brand); font-weight: 600; }
.wk-made__ck { display: inline-block; margin-right: .15em; }