/* presentations.css — v07zz198
Three long cream columns; panel titles live INSIDE each panel (sticky header).
No backdrop-filter (it stuttered on sidebar-collapse over the tall panels);
off-screen picker rows skip layout via content-visibility. */
/* ── Deck-template palette + local aliases (token pass, 15 Sep 2026) ────────
Every token below is an ALIAS of one already defined in styles/tokens.css with the
IDENTICAL value, so nothing renders differently. The --ptpl-* family is the DECK
look, not app chrome: a deck Hugo sends a client must read the same whichever UI
preset he is running, so these deliberately do NOT follow styles/themes.css.
(The four --ptpl-* panel/ink tokens they sit beside already live in tokens.css;
these three belong there too the next time that file is opened.) */
:root {
--ptpl-editorial-accent: var(--red-23); /* editorial terracotta: eyebrows, rules, numerals, bars */
--ptpl-ink-light: var(--cream-12); /* slide + text-slide title ink on a dark deck */
--danger-del: var(--chart-fail); /* the slide-rail Delete affordance */
}
.presentations-view {
--pres-panel: var(--card-bg);
--pres-panel-solid: var(--card-bg-solid);
--pres-border: var(--card-border-dark);
--pres-border-soft: color-mix(in srgb, var(--umber-2) 14%, transparent);
--pres-ink: var(--ink);
--pres-muted: var(--ink-muted);
--pres-faint: var(--ink-soft);
--pres-row: color-mix(in srgb, var(--cream-18) 50%, transparent);
--pres-pill: color-mix(in srgb, var(--ink) 10%, transparent);
--pres-orange: var(--gold); /* content-row checkboxes + add buttons */
--pres-amber: var(--gold-13); /* SELECTED-slide checkbox + ring (yellow-amber) */
--pres-export: var(--moss);
--pres-label: var(--ink-on-dark-muted);
--pres-srow-h: 60px;
/* v07zz242 — layout mini-diagrams (text position / alignment / image
arrangement). Light "paper" frame so the little slide previews read clean
on the cream panel instead of the old heavy dark-green blocks. */
--pres-diag-bg: var(--ink-on-accent); /* near-white slide paper */
--pres-diag-edge: color-mix(in srgb, var(--umber-2) 20%, transparent);
--pres-diag-img: color-mix(in srgb, var(--olive) 70%, var(--mix-light)); /* soft sage = image region */
--pres-diag-txt: var(--gold-5); /* gold = text region */
display: flex; flex-direction: column;
flex: 1 1 0; min-height: 0;
/* v07zz228 — Hugo specifically wanted Presentations to keep NO background
panel (the panel treatment was only requested for Reports + To-Do). Back to
the original transparent container. */
padding: 2px 2px 0;
background: transparent;
}
/* ── Grid (tight gutters to match the rest of the app) ──── */
.presentations-view .pres-grid {
flex: 1 1 auto; min-height: 0;
display: grid;
grid-template-columns: minmax(258px, 0.82fr) minmax(190px, 0.5fr) minmax(440px, 1.5fr);
gap: 10px; align-items: stretch;
}
.pres-colwrap { min-height: 0; height: 100%; display: flex; }
/* ── Panels (NO backdrop-filter — stutter fix) ──────────── */
.pres-panel {
flex: 1 1 0; min-height: 0;
background: var(--pres-panel-solid); border: 1px solid var(--pres-border); border-radius: var(--r-md);
box-shadow: var(--shadow-card);
display: flex; flex-direction: column;
}
/* v07zz217 — reserve the scrollbar gutter so the panel doesn't reflow (left
panel flicker) the moment its scrollbar appears on load. */
.pres-panel--pick, .pres-panel--tmpl { overflow-y: auto; scrollbar-gutter: stable; padding: 0 14px 14px; }
.pres-panel--col3 { overflow: hidden; padding: 0 14px 14px; }
.pres-panel::-webkit-scrollbar, .pres-sec-body::-webkit-scrollbar, .pres-preview::-webkit-scrollbar { width: 8px; }
.pres-panel::-webkit-scrollbar-thumb, .pres-sec-body::-webkit-scrollbar-thumb, .pres-preview::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--taupe) 28%, transparent); border-radius: 99px; }
/* title INSIDE the panel, sticky; SAME cream as the panel; fixed height so the
three column titles line up even though col 3 carries the export buttons. */
.pres-panel-title {
position: sticky; top: 0; z-index: 6;
flex: 0 0 auto; height: 46px; box-sizing: border-box;
margin: 0 -14px 8px; padding: 0 14px;
display: flex; align-items: center;
background: var(--pres-panel-solid); border-bottom: 1px solid var(--pres-border-soft);
border-radius: 12px 12px 0 0;
font-size: var(--fs-11); letter-spacing: var(--track-14); text-transform: uppercase; color: var(--pres-muted); font-weight: var(--fw-heavy);
}
.pres-panel-title--row { justify-content: space-between; gap: 10px; }
/* ── Title field + add-slide toolbar ────────────────────── */
.pres-field { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; }
.pres-field-label { font-size: var(--fs-11); color: var(--pres-muted); }
.pres-input, .pres-textarea {
width: 100%; font: inherit; font-size: var(--fs-13-5); color: var(--pres-ink);
background: color-mix(in srgb, var(--mix-light) 60%, transparent); border: 1px solid var(--pres-border); border-radius: var(--r-9); padding: 9px 12px; outline: none;
transition: border-color var(--dur-1) ease, background var(--dur-1) ease;
}
.pres-input::placeholder { color: var(--pres-faint); }
.pres-input:focus { border-color: color-mix(in srgb, var(--gold) 60%, transparent); background: var(--mix-light); }
.pres-input[readonly] { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--pres-muted); cursor: default; }
.pres-field-row { display: flex; gap: 8px; padding-bottom: 8px; }
.pres-field-row .pres-field { flex: 1 1 0; padding-bottom: 0; }
.pres-field--date { flex: 0 0 38%; }
.pres-textarea { resize: vertical; min-height: 46px; line-height: 1.4; }
/* v07zz405 — custom Phase entry: the text input (reuses .pres-input) + a small
"Use schedule phase" link to flip back to the dropdown. */
.pres-phase-custom { display: flex; flex-direction: column; gap: 5px; }
.pres-phase-back {
align-self: flex-start;
font: inherit; font-size: var(--fs-10-5); color: var(--pres-muted);
background: none; border: none; padding: 0; cursor: pointer;
text-decoration: underline; text-underline-offset: 2px;
}
.pres-phase-back:hover { color: var(--pres-ink); }
/* full-deck quick-start templates */
.pres-presets { padding-bottom: 10px; }
.pres-presets-label { font-size: var(--fs-10); letter-spacing: var(--track-14); text-transform: uppercase; color: var(--pres-muted); font-weight: var(--fw-bold); margin-bottom: 6px; }
.pres-presets-row { display: flex; flex-direction: column; gap: 6px; }
.pres-preset { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; padding: 7px 10px; border-radius: var(--r-sm); border: 1px solid var(--pres-border-soft); background: color-mix(in srgb, var(--mix-light) 50%, transparent); cursor: pointer; font: inherit; transition: border-color var(--dur-1) ease, background var(--dur-1) ease; }
.pres-preset:hover { border-color: var(--pres-orange); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.pres-preset-name { font-size: var(--fs-12); font-weight: var(--fw-bold); color: var(--pres-ink); }
.pres-preset-desc { font-size: var(--fs-10); color: var(--pres-muted); }
/* v07zz232 — the Add-slide row sticks just below the sticky panel title (46px)
so it stays reachable while scrolling the content picker. Full-bleed solid
background so list rows scroll cleanly under the dashed buttons. */
/* v07zz242 — uniform pill chips that wrap onto a tidy second row instead of
stretching to 1/7 width and wrapping their labels (the old misaligned mess).
Each chip is a fixed 30px tall with a single-line label and a leading "+". */
.pres-addslides { display: flex; flex-wrap: wrap; gap: 6px; position: sticky; top: 46px; z-index: 5; margin: 0 -14px; padding: 9px 14px; background: var(--pres-panel-solid); border-bottom: 1px solid var(--pres-border-soft); }
.pres-addslides button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; font: inherit; font-size: var(--fs-11-5); font-weight: var(--fw-semi); line-height: 1; white-space: nowrap; border-radius: var(--r-round); cursor: pointer; border: 1px solid var(--pres-border-soft); background: color-mix(in srgb, var(--mix-light) 55%, transparent); color: var(--pres-muted); transition: background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease; }
.pres-addslides button::before { content: "+"; font-size: var(--fs-14); font-weight: var(--fw-heavy); line-height: 0; color: var(--pres-orange); opacity: 0.85; }
.pres-addslides button:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); border-color: var(--pres-orange); color: var(--pres-orange); }
.pres-addslides button:hover::before { opacity: 1; }
/* ── Sections + rows (content-visibility skips off-screen) ─ */
.pres-sec { border-top: 1px solid var(--pres-border-soft); padding-top: 4px; }
.pres-sec:first-of-type { border-top: 0; }
.pres-sec-head { width: 100%; display: flex; align-items: center; gap: 10px; background: transparent; border: 0; cursor: pointer; padding: 11px 2px; font: inherit; }
.pres-sec-name { font-size: var(--fs-11-5); letter-spacing: 0.13em; text-transform: uppercase; font-weight: var(--fw-heavy); color: var(--pres-ink); }
.pres-sec-count { margin-left: auto; font-size: var(--fs-10-5); font-weight: var(--fw-bold); color: var(--pres-ink); background: var(--pres-pill); border-radius: 99px; padding: 1px 9px; min-width: 22px; text-align: center; }
.pres-sec-chev { color: var(--pres-muted); font-size: var(--fs-13); transition: transform var(--dur-2) ease; }
.pres-sec-chev.is-collapsed { transform: rotate(180deg); }
/* v07zz215 — Hugo: an expanded section had a FIXED height (44vh) so a 6-row
list left a big empty gap below the rows. Hug the content instead, capping
with max-height so only genuinely long lists scroll. */
.pres-sec-body { display: flex; flex-direction: column; gap: 7px; height: auto; max-height: calc(var(--pres-srow-h) * 5 + 28px); overflow-y: auto; scrollbar-gutter: stable; padding: 2px 2px 4px; }
.pres-sec-body.is-expanded { max-height: 60vh; }
/* Characters (alwaysAll): show every row by default, but as a BOUNDED scroll
container sized to fit exactly its rows (--sec-rows set inline) — so expanding a
row's image drawer scrolls INSIDE this section instead of growing it and
reflowing the whole page below. That downstream page reflow (≈74px shift on every
toggle, amplified by Hugo's DOM-hooking extensions) WAS the "character expand
lag"; shots never lagged because their section is already a bounded scroll
container. Capped at 72vh so a very long asset list can't exceed the screen. */
.pres-sec-body.is-all { max-height: min(calc(var(--pres-srow-h) * var(--sec-rows, 7) + (var(--sec-rows, 7) - 1) * 7px + 10px), 72vh); overflow-y: auto; }
/* v07zz272 — the custom Characters picker (.pres-charsec / .pres-charsec-body /
.pres-charrow) was removed. Characters now use the generic .pres-sec-body path,
identical to Shots/Locations/Props, so no char-specific CSS is needed. */
.pres-sec-toggle { width: 100%; text-align: center; cursor: pointer; font: inherit; font-size: var(--fs-11); font-weight: var(--fw-semi); color: var(--pres-muted); background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px solid var(--pres-border-soft); border-radius: var(--r-sm); padding: 6px; margin: 4px 0 6px; transition: background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease; }
.pres-sec-toggle:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); color: var(--pres-orange); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.pres-empty, .pres-preview-empty { font-size: var(--fs-12); color: var(--pres-muted); font-style: italic; padding: 14px 6px; text-align: center; }
.pres-srow-wrap { display: flex; flex-direction: column; content-visibility: auto; contain-intrinsic-size: auto 60px; }
.pres-srow { display: flex; align-items: center; gap: 10px; height: var(--pres-srow-h); box-sizing: border-box; padding: 8px; border-radius: var(--r-9); border: 1px solid transparent; background: var(--pres-row); transition: background var(--dur-1) ease, border-color var(--dur-1) ease; }
.pres-srow:hover { background: color-mix(in srgb, var(--mix-light) 72%, transparent); }
.pres-srow.is-on { background: color-mix(in srgb, var(--gold) 12%, transparent); border-color: color-mix(in srgb, var(--gold) 42%, transparent); }
.pres-srow-thumb { flex: 0 0 auto; border-radius: var(--r-xs); background-size: cover; background-position: center top; background-color: color-mix(in srgb, var(--hi) 81%, var(--mix-dark)); cursor: pointer; }
.pres-srow-thumb--wide { width: 76px; aspect-ratio: 16 / 9; }
.pres-srow-thumb--avatar { width: 40px; height: 40px; border-radius: 50%; }
.pres-srow-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.pres-srow-title { font-size: var(--fs-13); font-weight: var(--fw-semi); color: var(--pres-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pres-srow-imgcount { font-weight: var(--fw-semi); color: var(--pres-orange); }
.pres-srow-sub { font-size: var(--fs-11-5); color: var(--pres-muted); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pres-srow-caret { flex: 0 0 auto; width: 22px; height: 22px; border-radius: var(--r-xs); border: 1px solid var(--pres-border-soft); background: color-mix(in srgb, var(--mix-light) 50%, transparent); color: var(--pres-muted); cursor: pointer; display: grid; place-items: center; font-size: var(--fs-11); transition: transform var(--dur-2) ease, color var(--dur-1) ease; }
.pres-srow-caret.is-open { transform: rotate(180deg); color: var(--pres-orange); }
.pres-srow-imgs { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 2px 10px; }
.pres-srow-imgs-empty { font-size: var(--fs-11); color: var(--pres-faint); font-style: italic; padding: 4px; }
/* v07zz233 — was a fixed 16:9 background-cover box, which center-cropped portrait
character sheets to a thin slice (looked blank / "missing"). Now height-driven
with a real ![]()
, so each thumb shows the image's true aspect ratio. */
.pres-srow-img { height: 56px; width: auto; border-radius: 5px; border: 2px solid transparent; cursor: pointer; padding: 0; overflow: hidden; display: inline-block; line-height: 0; background: color-mix(in srgb, var(--black) 12%, transparent); flex: 0 0 auto; }
.pres-srow-img img { height: 100%; width: auto; max-width: 160px; display: block; object-fit: contain; }
.pres-srow-img:hover { border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.pres-srow-img.is-sel { border-color: var(--pres-orange); }
/* ── Historical Refs / Archive Footage: expandable batch cards ─────────── */
.pres-refgroups { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; padding: 2px 2px 4px; }
.pres-refgroups::-webkit-scrollbar { width: 8px; }
.pres-refgroups::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--taupe) 28%, transparent); border-radius: 99px; }
.pres-refgroup { border: 1px solid var(--pres-border-soft); border-radius: var(--r-9); background: var(--pres-row); overflow: hidden; }
.pres-refgroup-head { width: 100%; display: flex; align-items: center; gap: 9px; background: transparent; border: 0; cursor: pointer; padding: 9px 11px; font: inherit; }
.pres-refgroup-head:hover { background: color-mix(in srgb, var(--mix-light) 50%, transparent); }
/* v07zz227 — preview thumbnail on each historical/archive batch card */
.pres-refgroup-thumb { flex: 0 0 34px; width: 34px; height: 26px; border-radius: 5px; background-size: cover; background-position: center; background-color: color-mix(in srgb, var(--umber-2) 14%, transparent); }
.pres-refgroup-name { font-size: var(--fs-12); font-weight: var(--fw-semi); color: var(--pres-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; text-align: left; }
.pres-refgroup-count { margin-left: auto; font-size: var(--fs-10); font-weight: var(--fw-bold); color: var(--pres-ink); background: var(--pres-pill); border-radius: 99px; padding: 1px 8px; }
.pres-refgroup-chev { color: var(--pres-muted); font-size: var(--fs-11); transition: transform var(--dur-2) ease; }
.pres-refgroup-chev.is-open { transform: rotate(180deg); }
.pres-refgroup-body { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 10px 11px; }
.pres-refthumb { position: relative; width: 64px; aspect-ratio: 16/9; border-radius: 5px; background-size: cover; background-position: center; border: 2px solid transparent; cursor: pointer; padding: 0; }
.pres-refthumb:hover { border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.pres-refthumb.is-on { border-color: var(--pres-orange); }
.pres-refthumb--adding.is-on { border-color: var(--pres-amber); }
.pres-refthumb-check { position: absolute; top: 2px; right: 2px; width: 15px; height: 15px; border-radius: 4px; background: var(--pres-orange); color: var(--white); font-size: var(--fs-10); font-weight: var(--fw-heavy); display: grid; place-items: center; }
.pres-refthumb--adding .pres-refthumb-check { background: var(--pres-amber); }
.pres-check { flex: 0 0 22px; width: 22px; height: 22px; border-radius: var(--r-xs); border: 1.5px solid var(--card-border); background: color-mix(in srgb, var(--mix-light) 70%, transparent); color: var(--white); font-size: var(--fs-13); font-weight: var(--fw-heavy); cursor: pointer; display: grid; place-items: center; transition: background var(--dur-1) ease, border-color var(--dur-1) ease; }
.pres-check.is-on { background: var(--pres-orange); border-color: var(--pres-orange); color: var(--white); }
/* in edit mode, content checkboxes adopt the active slide's amber */
.pres-srow--adding .pres-check { border-color: color-mix(in srgb, var(--gold-13) 70%, transparent); }
.pres-srow--adding .pres-check.is-on { background: var(--pres-amber); border-color: var(--pres-amber); }
.pres-srow--adding.pres-srow.is-on { background: color-mix(in srgb, var(--gold-13) 14%, transparent); border-color: color-mix(in srgb, var(--gold-13) 45%, transparent); }
.pres-srow--extra { height: auto; padding: 9px 8px; }
.pres-extra-tag { flex: 0 0 auto; font-size: var(--fs-9); letter-spacing: var(--track-08); text-transform: uppercase; font-weight: var(--fw-heavy); padding: 3px 7px; border-radius: 5px; color: var(--white); }
.pres-extra-tag--intro { background: var(--moss); }
.pres-extra-tag--outro { background: var(--tag-outro); }
.pres-extra-tag--text { background: color-mix(in srgb, var(--tan-deep) 93%, var(--mix-light)); }
.pres-extra-tag--grid { background: var(--tag-grid); }
.pres-extra-x { background: transparent; border: 0; color: var(--ink-red-32); font-size: var(--fs-11); cursor: pointer; }
/* ── Column 2 — Template + layout panels + settings ─────── */
.pres-sublabel { font-size: var(--fs-10-5); letter-spacing: var(--track-16); text-transform: uppercase; color: var(--pres-muted); font-weight: var(--fw-bold); }
.pres-sublabel-scope { font-weight: var(--fw-semi); letter-spacing: var(--track-04); text-transform: none; color: var(--pres-amber, var(--gold-7)); } /* v07zz213 — per-slide vs deck scope hint */
.pres-sublabel--gap { margin-top: 12px; }
.pres-tmpl-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.pres-tcard { display: flex; flex-direction: column; gap: 5px; padding: 6px; cursor: pointer; font: inherit; background: color-mix(in srgb, var(--mix-light) 45%, transparent); border: 1px solid var(--pres-border-soft); border-radius: var(--r-9); transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease; }
.pres-tcard:hover { border-color: var(--pres-border); }
.pres-tcard.is-active { border: 2px solid var(--gold-5); padding: 5px; box-shadow: 0 4px 12px color-mix(in srgb, var(--shadow-ink) 16%, transparent); }
.pres-tcard-name { font-size: var(--fs-11); font-weight: var(--fw-semi); color: var(--pres-ink); text-align: center; }
/* v07zz215 — per-template "choose + lock image" control + picker popover */
.pres-tcard-wrap { position: relative; }
.pres-tcard-imgbtn { position: absolute; top: 8px; right: 8px; z-index: 3; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-xs); cursor: pointer; color: color-mix(in srgb, var(--ink-cream-7) 75%, var(--mix-light)); background: color-mix(in srgb, var(--shade-8) 55%, transparent); border: 1px solid color-mix(in srgb, var(--white) 35%, transparent); transition: background var(--dur-1) ease, border-color var(--dur-1) ease; }
.pres-tcard-imgbtn:hover { background: color-mix(in srgb, var(--shade-8) 78%, transparent); }
.pres-tcard-imgbtn.is-set { color: color-mix(in srgb, var(--gold-13) 86%, var(--mix-light)); border-color: color-mix(in srgb, color-mix(in srgb, var(--gold-13) 86%, var(--mix-light)) 80%, transparent); background: color-mix(in srgb, var(--shade-8) 70%, transparent); }
.pres-tcard-pick { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; background: var(--pres-panel, color-mix(in srgb, var(--card-bg-light-solid) 93%, var(--mix-light))); border: 1px solid var(--pres-border, color-mix(in srgb, var(--cream-9) 84%, var(--mix-dark))); border-radius: var(--r-panel); box-shadow: 0 10px 28px color-mix(in srgb, var(--shadow-ink) 22%, transparent); padding: 8px; }
.pres-tcard-pick-head { display: flex; align-items: center; gap: 6px; font-size: var(--fs-10); font-weight: var(--fw-bold); letter-spacing: var(--track-04); text-transform: uppercase; color: var(--pres-muted); margin-bottom: 6px; }
.pres-tcard-pick-head span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pres-tcard-pick-reset, .pres-tcard-pick-x { font: inherit; font-size: var(--fs-10); font-weight: var(--fw-bold); cursor: pointer; border-radius: var(--r-xs); border: 1px solid var(--pres-border-soft); background: color-mix(in srgb, var(--mix-light) 50%, transparent); color: var(--pres-ink); padding: 2px 7px; }
.pres-tcard-pick-x { padding: 2px 6px; line-height: 1; }
.pres-tcard-pick-reset:hover, .pres-tcard-pick-x:hover { border-color: var(--pres-border); }
.pres-tcard-pick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; max-height: 168px; overflow-y: auto; }
.pres-tcard-pick-img { aspect-ratio: 16/9; border-radius: 5px; cursor: pointer; background-size: cover; background-position: center; border: 2px solid transparent; padding: 0; }
.pres-tcard-pick-img:hover { border-color: var(--pres-border); }
.pres-tcard-pick-img.is-sel { border-color: var(--gold-5); box-shadow: 0 0 0 var(--hairline-w) var(--gold-5); }
.pres-tcard-pick-empty { grid-column: 1 / -1; font-size: var(--fs-11); color: var(--pres-muted); text-align: center; padding: 10px; }
/* v07zz215 — read-only "Stage · from project" field (replaces the manual input) */
.pres-input--readonly { display: flex; align-items: center; color: var(--pres-ink); opacity: 0.85; cursor: default; }
.pres-field-hint { font-weight: var(--fw-med); color: var(--pres-muted); text-transform: none; letter-spacing: 0; }
/* template thumbnails — true mini-covers (photo + themed veil + left text),
matching the concept covers; only the colour treatment differs per template */
.ptpl { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-xs); overflow: hidden; background-size: cover; background-position: center; background-color: var(--ptpl-dark-panel); }
.ptpl-veil { position: absolute; inset: 0; }
.ptpl-cap { position: absolute; left: 9px; right: 34%; top: 50%; transform: translateY(-50%); z-index: 1; display: flex; flex-direction: column; gap: 1px; }
.ptpl-mark { width: 12px; height: 12px; display: inline-block; margin-bottom: 1px; }
.ptpl-mark svg { width: 100%; height: 100%; display: block; }
.ptpl-eyebrow { font-size: 4px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: var(--fw-bold); }
.ptpl-title { font-family: var(--font-display,"Bebas Neue",sans-serif); font-size: var(--fs-15); line-height: 0.86; letter-spacing: var(--track-02); }
.ptpl-rule { display: flex; align-items: center; gap: 3px; margin-top: 2px; width: 70%; }
.ptpl-rule i { flex: 1; height: 1px; }
.ptpl-rule b { width: 3px; height: 3px; transform: rotate(45deg); flex: 0 0 auto; }
/* Dark Cinematic — deep green left veil, gold */
.ptpl--dark-cinematic { background-color: var(--ptpl-dark-panel); }
.ptpl--dark-cinematic .ptpl-veil { background: linear-gradient(100deg, color-mix(in srgb, var(--shade-12) 95%, transparent) 30%, color-mix(in srgb, var(--shade-12) 50%, transparent) 58%, color-mix(in srgb, var(--shade-12) 8%, transparent) 80%); }
.ptpl--dark-cinematic .ptpl-mark, .ptpl--dark-cinematic .ptpl-eyebrow { color: var(--gold-11); }
.ptpl--dark-cinematic .ptpl-title { color: color-mix(in srgb, var(--ink-cream-7) 75%, var(--mix-light)); }
.ptpl--dark-cinematic .ptpl-rule i { background: color-mix(in srgb, var(--gold-11) 60%, transparent); }
.ptpl--dark-cinematic .ptpl-rule b { background: var(--gold-11); }
/* Clean Client — cream left wash, gold-brown */
.ptpl--clean-client { background-color: color-mix(in srgb, var(--cream-4) 92%, var(--mix-dark)); }
.ptpl--clean-client .ptpl-veil { background: linear-gradient(100deg, color-mix(in srgb, var(--ptpl-clean-panel) 96%, transparent) 32%, color-mix(in srgb, var(--ptpl-clean-panel) 55%, transparent) 62%, color-mix(in srgb, var(--ptpl-clean-panel) 6%, transparent) 82%); }
.ptpl--clean-client .ptpl-mark, .ptpl--clean-client .ptpl-eyebrow { color: var(--gold-7); }
.ptpl--clean-client .ptpl-title { color: var(--ptpl-ink-clean); }
.ptpl--clean-client .ptpl-rule i { background: color-mix(in srgb, var(--gold-7) 50%, transparent); }
.ptpl--clean-client .ptpl-rule b { background: var(--gold-7); }
/* Editorial — light, bottom title band, terracotta + ink */
.ptpl--editorial { background-color: color-mix(in srgb, var(--parchment) 95%, var(--mix-dark)); }
.ptpl--editorial .ptpl-veil { background: linear-gradient(0deg, color-mix(in srgb, var(--ptpl-editorial-panel) 97%, transparent) 32%, color-mix(in srgb, var(--ptpl-editorial-panel) 35%, transparent) 62%, color-mix(in srgb, var(--ptpl-editorial-panel) 4%, transparent) 100%); }
.ptpl--editorial .ptpl-cap { top: auto; bottom: 7px; transform: none; right: 16%; gap: 0; }
.ptpl--editorial .ptpl-mark, .ptpl--editorial .ptpl-eyebrow { color: var(--ptpl-editorial-accent); }
.ptpl--editorial .ptpl-title { color: var(--ptpl-ink-editorial); }
.ptpl--editorial .ptpl-rule i { background: color-mix(in srgb, var(--ptpl-editorial-accent) 55%, transparent); }
.ptpl--editorial .ptpl-rule b { background: var(--ptpl-editorial-accent); }
.pres-lay-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 7px; }
.pres-lay { min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 6px; background: color-mix(in srgb, var(--mix-light) 50%, transparent); border: 1.5px solid var(--pres-border-soft); border-radius: var(--r-panel); cursor: pointer; font: inherit; transition: border-color var(--dur-1) ease, background var(--dur-1) ease, box-shadow var(--dur-1) ease; }
.pres-lay:hover { border-color: var(--pres-border); background: color-mix(in srgb, var(--mix-light) 70%, transparent); }
.pres-lay.is-on { border-color: var(--pres-orange); background: color-mix(in srgb, var(--gold) 8%, transparent); box-shadow: 0 0 0 var(--hairline-w) var(--pres-orange) inset; }
.pres-lay-name { font-size: var(--fs-9-5); color: var(--pres-muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: var(--track-01); }
.pres-lay.is-on .pres-lay-name { color: var(--pres-orange); font-weight: var(--fw-bold); }
/* text-position diagram — light slide-paper frame, soft sage image + gold text */
.pres-lay-diag { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; background: var(--pres-diag-bg); border: 1px solid var(--pres-diag-edge); display: flex; gap: 2px; padding: 3px; }
.pres-lay-img { flex: 1 1 0; background: var(--pres-diag-img); border-radius: 2px; }
.pres-lay-txt { background: var(--pres-diag-txt); border-radius: 2px; }
.pres-lay-diag.pos-left { flex-direction: row; }
.pres-lay-diag.pos-left .pres-lay-txt { flex: 0 0 32%; }
.pres-lay-diag.pos-right { flex-direction: row-reverse; }
.pres-lay-diag.pos-right .pres-lay-txt { flex: 0 0 32%; }
.pres-lay-diag.pos-top { flex-direction: column; }
.pres-lay-diag.pos-top .pres-lay-txt { flex: 0 0 28%; }
.pres-lay-diag.pos-overlay .pres-lay-txt { position: absolute; left: 2px; right: 2px; bottom: 2px; height: 30%; }
/* arrangement diagram */
.pres-mini { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; background: var(--pres-diag-bg); border: 1px solid var(--pres-diag-edge); display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; align-content: stretch; }
.pres-mini-cell { background: var(--pres-diag-img); border-radius: 2px; flex: 1 1 0; }
.pres-mini.row1 .pres-mini-cell { flex: 1 1 0; }
.pres-mini.rows2 .pres-mini-cell, .pres-mini.grid2 .pres-mini-cell { flex: 0 0 calc(50% - 1px); height: calc(50% - 1px); }
/* v07zz241 — "3 Rows" arrangement diagram: three stacked full-width bars. */
.pres-mini.rows3lay { flex-direction: column; flex-wrap: nowrap; }
.pres-mini.rows3lay .pres-mini-cell { flex: 1 1 0; width: 100%; height: auto; }
/* v07zz241 — Text Position is 5 options: lay them out 5-across so there's no
empty 6th cell (was a 3-col grid with a dead cell). */
.pres-lay-grid--c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pres-mini.feat { flex-wrap: nowrap; }
.pres-mini.feat .pres-mini-cell.big { flex: 0 0 56%; height: 100%; }
.pres-mini-strip { flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; }
.pres-mini-strip .pres-mini-cell { flex: 1 1 0; width: 100%; }
.pres-mini.auto .pres-mini-cell.w2 { flex: 0 0 100%; height: calc(55% - 1px); }
.pres-mini.auto .pres-mini-cell:not(.w2) { height: calc(45% - 1px); }
.pres-settings { display: flex; flex-direction: column; margin-top: 4px; }
.pres-set-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--pres-border-soft); }
.pres-set-toggle:first-child { border-top: 0; }
.pres-set-toggle--fit { margin-top: 8px; border-top: 1px solid var(--pres-border-soft); }
.pres-set-txt { min-width: 0; }
.pres-set-label { font-size: var(--fs-12-5); color: var(--pres-ink); font-weight: var(--fw-med); }
.pres-set-hint { font-size: var(--fs-10-5); color: var(--pres-muted); margin-top: 2px; }
.pres-set-note { font-size: var(--fs-10-5); line-height: 1.45; color: var(--pres-muted); margin-top: 8px; padding: 9px 10px; background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px solid var(--pres-border-soft); border-radius: var(--r-sm); }
.pres-switch { flex: 0 0 auto; width: 42px; height: 23px; border-radius: 99px; border: 0; background: color-mix(in srgb, color-mix(in srgb, var(--umber-2) 67%, var(--mix-dark)) 22%, transparent); cursor: pointer; position: relative; transition: background var(--dur-2) ease; }
.pres-switch span { position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: var(--cream-12); transition: left var(--dur-2) ease; box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.pres-switch.is-on { background: var(--leaf); }
.pres-switch.is-on span { left: 21px; }
/* ── Column 3 — preview + past ──────────────────────────── */
.pres-actions { display: flex; gap: 7px; }
.pres-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: var(--fs-11-5); font-weight: var(--fw-semi); padding: 0 13px; border-radius: var(--r-sm); cursor: pointer; border: 1px solid var(--pres-border); transition: filter var(--dur-1) ease, background var(--dur-1) ease, border-color var(--dur-1) ease;
/* v07zz212 — fixed height + box-sizing so every toolbar button is the SAME
size; the Export PDF icon used to make it taller than the rest. */
height: 32px; line-height: 1; box-sizing: border-box; }
.pres-btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
.pres-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pres-btn--combine { background: color-mix(in srgb, var(--gold) 14%, transparent); border-color: color-mix(in srgb, var(--gold) 50%, transparent); color: var(--ink-gold-6); }
.pres-btn--combine:hover { background: color-mix(in srgb, var(--gold) 22%, transparent); }
.pres-btn--export { background: var(--pres-export); border-color: var(--pres-export); color: var(--ink-cream); }
.pres-btn--export:hover:not(:disabled) { filter: brightness(1.12); }
.pres-btn--save { background: color-mix(in srgb, var(--mix-light) 50%, transparent); color: var(--pres-ink); border-color: var(--pres-border); }
.pres-btn--save:hover:not(:disabled) { background: var(--mix-light); }
/* v07zz212 — Hugo: drop the out-of-place purple; use the project gold so it
matches the rest of the UI. */
.pres-btn--weekly { background: color-mix(in srgb, var(--gold-11) 14%, transparent); color: var(--ink-tan-deep); border-color: color-mix(in srgb, var(--gold-11) 50%, transparent); margin-right: auto; }
.pres-btn--weekly:hover { background: color-mix(in srgb, var(--gold-11) 24%, transparent); border-color: color-mix(in srgb, var(--gold-11) 70%, transparent); }
.pres-btn--clear { background: transparent; color: var(--ink-red-32); border-color: color-mix(in srgb, var(--red-32) 40%, transparent); }
.pres-btn--clear:hover { background: color-mix(in srgb, var(--red-32) 10%, transparent); border-color: color-mix(in srgb, var(--red-32) 60%, transparent); }
.pres-btn--undo { background: color-mix(in srgb, var(--mix-light) 50%, transparent); color: var(--pres-ink); border-color: var(--pres-border); }
.pres-btn--undo:hover { background: var(--mix-light); border-color: var(--pres-orange); color: var(--pres-orange); }
.pres-status { flex: 0 0 auto; font-size: var(--fs-11-5); color: color-mix(in srgb, var(--ink-tan-deep) 91%, var(--mix-dark)); background: color-mix(in srgb, var(--amber) 18%, transparent); border: 1px solid color-mix(in srgb, var(--gold-5) 35%, transparent); border-radius: var(--r-sm); padding: 7px 11px; margin-bottom: 8px; }
/* padding gives each slide's drop-shadow room inside the scroll container so it
isn't clipped to a hard rectangle at the panel edges */
/* ── Stage = slide drawer (true mini-slides) + preview ── */
.pres-stage { flex: 1 1 0; min-height: 0; display: flex; gap: 10px; }
/* Drawer — a bordered, rounded panel separated from the preview, mirroring the
Generate page Shots drawer (gradient header + scrollable list). */
.pres-rail { flex: 0 0 168px; min-height: 0; display: flex; flex-direction: column; background: color-mix(in srgb, var(--cream-2) 55%, transparent); border: 1px solid var(--pres-border); border-radius: 11px; overflow: hidden; }
.pres-rail-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: var(--fs-10); letter-spacing: var(--track-16); text-transform: uppercase; font-weight: var(--fw-heavy); color: var(--pres-muted); border-bottom: 1px solid var(--pres-border-soft); background: linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--gold-2) 26%, var(--mix-light)) 70%, transparent), color-mix(in srgb, color-mix(in srgb, var(--gold-8) 31%, var(--mix-light)) 42%, transparent)); }
.pres-rail-count { margin-left: auto; font-size: var(--fs-10); font-weight: var(--fw-bold); color: var(--pres-ink); background: var(--pres-pill); border-radius: 99px; padding: 1px 8px; }
.pres-rail-list { flex: 1 1 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; padding: 9px 8px 12px; }
.pres-rail-list::-webkit-scrollbar { width: 7px; }
.pres-rail-list::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--taupe) 28%, transparent); border-radius: 99px; }
/* v07zz213 — slide centered in the column; the number is an overlay badge in the
top-left corner so it no longer shoves the mini off-centre. */
.pres-rail-item { position: relative; display: flex; align-items: center; justify-content: center; padding: 5px 3px; border-radius: var(--r-sm); border: 1.5px solid transparent; cursor: grab; }
.pres-rail-item:hover { background: color-mix(in srgb, var(--mix-light) 50%, transparent); }
.pres-rail-item.is-active { border-color: var(--pres-amber); background: color-mix(in srgb, var(--gold-13) 14%, transparent); }
.pres-rail-item:active { cursor: grabbing; }
/* v07zz226 — per-slide actions (duplicate / remove), revealed on hover */
.pres-rail-acts { position: absolute; top: 3px; right: 3px; display: flex; gap: 4px; opacity: 0; transition: opacity 110ms ease; }
.pres-rail-item:hover .pres-rail-acts, .pres-rail-item.is-active .pres-rail-acts { opacity: 1; }
.pres-rail-act { width: 21px; height: 21px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-xs); border: 1px solid color-mix(in srgb, var(--umber-2) 22%, transparent); background: color-mix(in srgb, var(--cream-18) 92%, transparent); color: var(--pres-ink, var(--ink-umber)); cursor: pointer; padding: 0; box-shadow: 0 1px 2px rgba(0,0,0,0.12); }
.pres-rail-act:hover { background: var(--mix-light); border-color: var(--pres-amber); }
.pres-rail-act--del:hover { background: var(--danger-del); border-color: var(--danger-del); color: var(--white); }
.pres-rail-num { position: absolute; top: 7px; left: 9px; z-index: 2; font-size: var(--fs-10); font-weight: var(--fw-bold); color: var(--ink-cream-7); background: color-mix(in srgb, var(--shade-31) 55%, transparent); border-radius: 4px; padding: 1px 5px; line-height: 1.4; pointer-events: none; }
/* Gold drop line shown between slides while dragging (Google-Slides style). */
.pres-rail-dropline { height: 3px; margin: 0 8px; border-radius: 2px; background: var(--pres-amber, var(--gold-13)); box-shadow: 0 0 6px color-mix(in srgb, var(--gold-13) 70%, transparent); }
/* mini-slide: the real slide body rendered at 640×360 then scaled to 120×67.5 */
.pres-rail-mini { flex: 0 0 auto; width: 120px; height: 68px; border-radius: 5px; overflow: hidden; position: relative; background: var(--shade-49); box-shadow: 0 1px 4px color-mix(in srgb, var(--shadow-ink) 30%, transparent); pointer-events: none; }
.pres-rail-mini .pres-slide.pres-rail-slide { position: absolute; top: 0; left: 0; width: 640px; height: 360px; aspect-ratio: auto; min-height: 0; border-radius: 0; box-shadow: none; cursor: default; overflow: hidden; content-visibility: visible; contain: layout paint; transform: scale(0.1875); transform-origin: top left; }
.pres-rail-mini .pres-edit { cursor: default; }
.pres-preview { flex: 1 1 0; min-width: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 10px 14px 14px; }
/* ── 16:9 slides ────────────────────────────────────────── */
.pres-slide { flex: 0 0 auto; position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-panel); overflow: hidden; background: var(--shade-49); box-shadow: 0 8px 20px color-mix(in srgb, var(--shadow-ink) 24%, transparent); cursor: grab; container-type: inline-size; content-visibility: auto; }
/* v07zz243 — content-visibility:auto back on so OFF-SCREEN slides skip layout +
the container-query re-scale, which is what made resizing a big deck crawl
(every slide's 640×360 canvas was re-evaluated each frame). NO
contain-intrinsic-size this time — that was the v07zz237 bug: 210px conflicted
with the real ~340-500px height and made slides JUMP as they scrolled in. The
aspect-ratio:16/9 above already reserves the correct height even while the
content is skipped, so there's no jump. The PDF export overrides this to
content-visibility:visible so every slide still renders for print. */
/* v07zz219 — slide content renders on a FIXED 640×360 canvas, scaled to the
slide width via container-query units, so EVERY text block, padding and image
scales together — identical layout at any browser size AND in the exported
PDF (the print then scales the slide to the page, composing to a size-
independent result). Rail minis keep their own fixed-scale canvas. */
.pres-slide-canvas { position: absolute; top: 0; left: 0; width: 640px; height: 360px; transform: scale(calc(100cqw / 640px)); transform-origin: top left; }
.pres-slide:active { cursor: grabbing; }
.pres-slide.is-active { outline: 2px solid var(--pres-amber); outline-offset: 1px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-13) 22%, transparent), 0 8px 20px color-mix(in srgb, var(--shadow-ink) 24%, transparent); }
.pres-edit { outline: none; cursor: text; }
.pres-edit:focus { outline: 1px dashed color-mix(in srgb, var(--white) 45%, transparent); border-radius: 3px; }
/* selected-slide checkbox (amber) */
.pres-slide-pick { position: absolute; top: 7px; left: 7px; z-index: 6; cursor: pointer; display: inline-flex; }
.pres-slide-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.pres-slide-pick-box { width: 22px; height: 22px; border-radius: var(--r-xs); border: 1.5px solid color-mix(in srgb, var(--white) 70%, transparent); background: color-mix(in srgb, var(--shade-11) 60%, transparent); color: color-mix(in srgb, var(--ink-deep) 92%, var(--mix-dark)); display: grid; place-items: center; font-size: var(--fs-13); font-weight: var(--fw-heavy); box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: background var(--dur-1) ease, border-color var(--dur-1) ease; }
.pres-slide-pick input:checked + .pres-slide-pick-box { background: var(--pres-amber); border-color: var(--pres-amber); }
.pres-slide-tools { position: absolute; top: 7px; right: 7px; display: flex; gap: 5px; opacity: 0; transition: opacity var(--dur-1) ease; z-index: 6; }
.pres-slide:hover .pres-slide-tools { opacity: 1; }
.pres-slide-lay, .pres-slide-x, .pres-slide-dup { width: 24px; height: 24px; border-radius: var(--r-xs); border: 0; background: color-mix(in srgb, var(--shade-11) 74%, transparent); color: var(--white); cursor: pointer; display: grid; place-items: center; font-size: var(--fs-14); line-height: 1; }
.pres-slide-lay:hover, .pres-slide-x:hover, .pres-slide-dup:hover { background: color-mix(in srgb, var(--shade-11) 92%, transparent); }
.pres-slide-dup svg { display: block; }
.ps-meta, .ps-overlabel { font-size: var(--fs-9); letter-spacing: var(--track-16); text-transform: uppercase; color: color-mix(in srgb, var(--gold-11) 84%, var(--mix-light)); font-weight: var(--fw-bold); }
.ps-shotid { font-family: var(--font-mono, monospace); font-size: var(--fs-9); letter-spacing: var(--track-10); color: color-mix(in srgb, var(--ink-cream-4) 60%, transparent); }
.ps-title { font-family: var(--font-display, "Bebas Neue", sans-serif); font-size: var(--fs-24); line-height: 0.98; color: var(--ptpl-ink-light); letter-spacing: var(--track-01); }
/* v07zz232 — was max-height:3.2em which cropped any bio over ~3 lines. Clamp to
9 lines: shows the full description in the common case while staying bounded
so the title+sub+caption block still fits inside the fixed slide. */
.ps-caption { font-size: var(--fs-10-5); line-height: 1.42; color: color-mix(in srgb, var(--ink-cream-4) 78%, transparent); margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; }
.ps-splitsub { font-size: var(--fs-11); color: color-mix(in srgb, var(--ink-cream-4) 85%, transparent); margin-top: 3px; font-weight: var(--fw-med); }
.ps-badges { margin-top: 7px; display: flex; gap: 5px; flex-wrap: wrap; }
.ps-badge { font-size: var(--fs-8-5); letter-spacing: var(--track-08); text-transform: uppercase; font-weight: var(--fw-bold); padding: 2px 8px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--gold-5) 45%, transparent); color: color-mix(in srgb, var(--gold-11) 84%, var(--mix-light)); background: color-mix(in srgb, var(--gold-5) 10%, transparent); }
/* composed slide: text block + auto-grid */
.ps-compose { position: absolute; inset: 0; display: flex; }
.ps-grid-wrap { flex: 1 1 0; min-width: 0; min-height: 0; position: relative; }
.ps-tb { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 14px 16px; min-width: 0; overflow: hidden; }
.ps-tb-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.ps-compose.pos-left { flex-direction: row; }
.ps-compose.pos-left .ps-tb { flex: 0 0 34%; }
.ps-compose.pos-right { flex-direction: row-reverse; }
.ps-compose.pos-right .ps-tb { flex: 0 0 34%; }
.ps-compose.pos-top { flex-direction: column; }
.ps-compose.pos-top .ps-tb { flex: 0 0 auto; justify-content: flex-start; }
.ps-compose.pos-none { display: block; }
.ps-compose.pos-none .ps-grid-wrap { position: absolute; inset: 0; }
.ps-compose.pos-overlay { display: block; }
.ps-compose.pos-overlay .ps-grid-wrap { position: absolute; inset: 0; }
.ps-compose.pos-overlay .ps-tb { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; justify-content: flex-end; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.82)); }
/* v07zz235 — 2-axis text position for grid/compose slides (Hugo: switch the text
left/center/right and top/bottom; default = bottom-left). The PDF clones these
live nodes + inlines this CSS, so it applies to the export too. */
.ps-compose.tah-center .ps-tb { align-items: center; text-align: center; }
.ps-compose.tah-right .ps-tb { align-items: flex-end; text-align: right; }
.ps-compose.tah-center .ps-tb-row { justify-content: center; }
.ps-compose.tah-right .ps-tb-row { justify-content: flex-end; }
/* vertical: column (band) layout flips the text band above/below the grid via order;
side-column + overlay layouts move the text to the top/bottom of their column. */
.ps-compose.pos-top.tav-top .ps-tb { order: -1; }
.ps-compose.pos-left.tav-top .ps-tb, .ps-compose.pos-right.tav-top .ps-tb { justify-content: flex-start; }
.ps-compose.pos-left.tav-bottom .ps-tb, .ps-compose.pos-right.tav-bottom .ps-tb { justify-content: flex-end; }
.ps-compose.pos-overlay.tav-top .ps-tb { top: 0; bottom: auto; justify-content: flex-start; background: linear-gradient(0deg, transparent, rgba(0,0,0,0.82)); }
/* v07zz238 — restore the MIDDLE vertical text position Hugo lost. Side columns
center the band; overlay spans full height with the gradient stripped so
centered text reads cleanly over the image. */
.ps-compose.pos-left.tav-center .ps-tb, .ps-compose.pos-right.tav-center .ps-tb { justify-content: center; }
.ps-compose.pos-overlay.tav-center .ps-tb { top: 0; bottom: 0; justify-content: center; background: linear-gradient(180deg, rgba(0,0,0,0.32), rgba(0,0,0,0.32)); }
/* auto-grid: justified by aspect ratio, with padding so images never touch the edges */
.ps-grid { position: absolute; inset: 12px; display: flex; flex-direction: column; justify-content: center; gap: 5px; overflow: hidden; }
.ps-grid-row { width: 100%; min-height: 0; display: flex; gap: 5px; }
.ps-grid-cell { flex-basis: 0; min-width: 0; height: 100%; background-size: cover; background-position: center; background-color: var(--shade-67); border-radius: 4px; }
.ps-grid--cover .ps-grid-row { flex: 1 1 0; } /* Fill mode → equal-height rows */
.ps-grid-cell--pan { cursor: grab; }
.ps-grid-cell--pan:active { cursor: grabbing; }
.ps-grid--fill { inset: 0; justify-content: stretch; }
.ps-grid--fill .ps-grid-cell { position: absolute; inset: 0; height: auto; border-radius: 0; }
.ps-grid-empty { position: absolute; inset: 12px; display: grid; place-items: center; text-align: center; font-size: var(--fs-11); line-height: 1.5; color: color-mix(in srgb, var(--ink-cream-4) 50%, transparent); font-style: italic; }
/* intro / outro cover — left-aligned hero: compass + diamond-rule + outline pill */
.ps-cover { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: var(--ptpl-dark-panel); --ptpl-cover-veil: var(--shade-12); }
.ps-cover-veil { position: absolute; inset: 0; background: linear-gradient(100deg, color-mix(in srgb, var(--shade-12) 94%, transparent) 30%, color-mix(in srgb, var(--shade-12) 48%, transparent) 60%, color-mix(in srgb, var(--shade-12) 10%, transparent) 78%); }
.ps-cover-inner { position: absolute; left: 7%; right: 38%; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; z-index: 1; }
.pres-tpl-clean-client .ps-cover { --ptpl-cover-veil: var(--ptpl-clean-cover); }
.pres-tpl-editorial .ps-cover { --ptpl-cover-veil: var(--ptpl-editorial-panel); }
/* ── 9 Intro-cover layout options (⊞ + Settings). Variant veils tint with the
theme's --cv so a single rule works across every template. lay-cover (#1) is
the base above: text left, vertical middle. ─────────────────────────── */
/* Centre */
.ps-cover.lay-center .ps-cover-veil { background: linear-gradient(180deg, color-mix(in srgb, var(--ptpl-cover-veil) 55%, transparent), color-mix(in srgb, var(--ptpl-cover-veil) 78%, transparent)); }
.ps-cover.lay-center .ps-cover-inner { left: 9%; right: 9%; align-items: center; text-align: center; }
.ps-cover.lay-center .ps-cover-head { justify-content: center; }
.ps-cover.lay-center .ps-cover-rule { margin-left: auto; margin-right: auto; }
.ps-cover.lay-center .ps-cover-pill { align-self: center; }
/* Top centre */
.ps-cover.lay-topcenter .ps-cover-veil { background: linear-gradient(180deg, color-mix(in srgb, var(--ptpl-cover-veil) 90%, transparent) 6%, color-mix(in srgb, var(--ptpl-cover-veil) 40%, transparent) 40%, color-mix(in srgb, var(--ptpl-cover-veil) 5%, transparent) 74%); }
.ps-cover.lay-topcenter .ps-cover-inner { left: 9%; right: 9%; top: 12%; transform: none; align-items: center; text-align: center; }
.ps-cover.lay-topcenter .ps-cover-head { justify-content: center; }
.ps-cover.lay-topcenter .ps-cover-rule { margin-left: auto; margin-right: auto; }
.ps-cover.lay-topcenter .ps-cover-pill { align-self: center; }
/* Big centre (oversized title) */
.ps-cover.lay-bigcenter .ps-cover-veil { background: linear-gradient(180deg, color-mix(in srgb, var(--ptpl-cover-veil) 58%, transparent), color-mix(in srgb, var(--ptpl-cover-veil) 80%, transparent)); }
.ps-cover.lay-bigcenter .ps-cover-inner { left: 6%; right: 6%; align-items: center; text-align: center; }
.ps-cover.lay-bigcenter .ps-cover-head { justify-content: center; }
.ps-cover.lay-bigcenter .ps-cover-rule { margin-left: auto; margin-right: auto; }
.ps-cover.lay-bigcenter .ps-cover-pill { align-self: center; }
.ps-cover.lay-bigcenter .ps-cover-title { font-size: 52px; }
/* Bottom-left (big title) */
.ps-cover.lay-bottomleft .ps-cover-veil { background: linear-gradient(0deg, color-mix(in srgb, var(--ptpl-cover-veil) 92%, transparent) 6%, color-mix(in srgb, var(--ptpl-cover-veil) 40%, transparent) 40%, color-mix(in srgb, var(--ptpl-cover-veil) 5%, transparent) 72%); }
.ps-cover.lay-bottomleft .ps-cover-inner { left: 7%; right: 30%; top: auto; bottom: 9%; transform: none; }
.ps-cover.lay-bottomleft .ps-cover-title { font-size: var(--fs-44); }
/* Bottom-right */
.ps-cover.lay-bottomright .ps-cover-veil { background: linear-gradient(0deg, color-mix(in srgb, var(--ptpl-cover-veil) 92%, transparent) 6%, color-mix(in srgb, var(--ptpl-cover-veil) 40%, transparent) 40%, color-mix(in srgb, var(--ptpl-cover-veil) 5%, transparent) 72%); }
.ps-cover.lay-bottomright .ps-cover-inner { left: 30%; right: 7%; top: auto; bottom: 9%; transform: none; align-items: flex-end; text-align: right; }
.ps-cover.lay-bottomright .ps-cover-head { flex-direction: row-reverse; }
.ps-cover.lay-bottomright .ps-cover-rule { margin-left: auto; }
.ps-cover.lay-bottomright .ps-cover-pill { align-self: flex-end; }
/* Right (vertical middle) — flip the left wash to the right */
.ps-cover.lay-right .ps-cover-veil { transform: scaleX(-1); }
.ps-cover.lay-right .ps-cover-inner { left: 42%; right: 7%; align-items: flex-end; text-align: right; }
.ps-cover.lay-right .ps-cover-head { flex-direction: row-reverse; }
.ps-cover.lay-right .ps-cover-rule { margin-left: auto; }
.ps-cover.lay-right .ps-cover-pill { align-self: flex-end; }
/* Bottom bar (horizontal band) */
.ps-cover.lay-bar .ps-cover-veil { background: none; }
.ps-cover.lay-bar .ps-cover-inner { left: 0; right: 0; top: auto; bottom: 0; transform: none; flex-direction: row; align-items: center; gap: 14px; padding: 11px 7%; background: color-mix(in srgb, var(--ptpl-cover-veil) 96%, transparent); }
.ps-cover.lay-bar .ps-cover-head { margin-bottom: 0; flex: 0 0 auto; }
.ps-cover.lay-bar .ps-cover-title { font-size: var(--fs-22); flex: 0 0 auto; margin: 0; }
.ps-cover.lay-bar .ps-cover-rule { display: none; }
.ps-cover.lay-bar .ps-cover-meta { flex: 1 1 0; }
.ps-cover.lay-bar .ps-cover-pill { margin-top: 0; align-self: center; flex: 0 0 auto; }
/* Framed panel (left) */
.ps-cover.lay-panel .ps-cover-inner { left: 6%; right: 56%; align-items: center; text-align: center; padding: 20px 18px; border: 1px solid color-mix(in srgb, var(--gold-11) 55%, transparent); border-radius: var(--r-xs); background: color-mix(in srgb, var(--ptpl-cover-veil) 60%, transparent); }
.ps-cover.lay-panel .ps-cover-head { justify-content: center; }
.ps-cover.lay-panel .ps-cover-rule { margin-left: auto; margin-right: auto; }
.ps-cover.lay-panel .ps-cover-pill { align-self: center; }
.ps-mark { display: inline-block; width: 22px; height: 22px; color: var(--gold-11); flex: 0 0 auto; }
.ps-mark svg { width: 100%; height: 100%; display: block; }
.ps-cover-head { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.ps-cover-eyebrow { font-size: var(--fs-8-5); letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-11); font-weight: var(--fw-bold); }
.ps-cover-title { font-family: var(--font-display, "Bebas Neue", sans-serif); font-size: var(--fs-38); line-height: 0.9; color: color-mix(in srgb, var(--ink-cream-7) 75%, var(--mix-light)); margin: 2px 0; letter-spacing: var(--track-01); }
.ps-cover-rule { display: flex; align-items: center; gap: 7px; margin: 6px 0 4px; max-width: 340px; }
.ps-cover-rule .ps-rule-line { flex: 1 1 0; height: 1px; background: color-mix(in srgb, var(--gold-11) 55%, transparent); }
.ps-cover-rule .ps-rule-dot { width: 5px; height: 5px; transform: rotate(45deg); background: var(--gold-11); flex: 0 0 auto; }
.ps-cover-meta { font-size: var(--fs-9-5); letter-spacing: var(--track-16); text-transform: uppercase; color: var(--gold-11); font-weight: var(--fw-semi); }
.ps-cover-desc { font-size: var(--fs-10); line-height: 1.45; color: color-mix(in srgb, var(--ink-cream-4) 82%, transparent); margin-top: 6px; max-width: 92%; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pres-tpl-clean-client .ps-cover-desc, .pres-tpl-editorial .ps-cover-desc { color: var(--ptpl-ink-body); }
/* v07zz212 — center the pill text both axes (it was sitting top-left, esp. in
the exported PDF). inline-flex + center + line-height:1. */
.ps-cover-pill { align-self: flex-start; margin-top: 11px; border: 1px solid color-mix(in srgb, var(--gold-11) 60%, transparent); border-radius: 99px; padding: 5px 13px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.ps-cover-pill.is-empty { display: none; } /* v07zz219 — Hugo: no "In Production" pill; empty pill renders nothing */
.ps-cover-pilltext { font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-11); font-weight: var(--fw-bold); line-height: 1; text-align: center; }
.ps-cover-pill.is-empty .ps-cover-pilltext:empty::before { content: "Status"; opacity: 0.7; }
/* text slide — MUST stay scoped under .pres-slide: a bare `.ps-text` collides
with the Sidebar pipeline-stage's `.ps-text` and paints a black pill over it. */
.pres-slide .ps-text { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 18px 24px; background: var(--shade-66); }
.pres-slide .ps-text.lay-left { align-items: flex-start; text-align: left; }
.ps-text-title { font-family: var(--font-display, "Bebas Neue", sans-serif); font-size: var(--fs-30); line-height: 0.98; color: var(--ptpl-ink-light); }
.ps-text-body { font-size: var(--fs-12); line-height: 1.5; color: color-mix(in srgb, var(--ink-cream-4) 80%, transparent); margin-top: 8px; max-width: 64ch; }
/* clean-client template → cream slides (matches the old report bg), dark ink */
.pres-tpl-clean-client { background: var(--ptpl-clean-panel); }
.pres-tpl-clean-client .ps-title, .pres-tpl-clean-client .ps-cover-title, .pres-tpl-clean-client .ps-text-title { color: var(--ptpl-ink); }
.pres-tpl-clean-client .ps-caption, .pres-tpl-clean-client .ps-text-body, .pres-tpl-clean-client .ps-cover-meta, .pres-tpl-clean-client .ps-splitsub { color: var(--ptpl-ink-body); }
.pres-tpl-clean-client .ps-meta, .pres-tpl-clean-client .ps-overlabel, .pres-tpl-clean-client .ps-cover-eyebrow { color: var(--gold-7); }
.pres-tpl-clean-client .ps-shotid { color: color-mix(in srgb, var(--archive) 85%, var(--mix-dark)); }
.pres-tpl-clean-client .ps-cover, .pres-tpl-clean-client .ps-text { background: var(--ptpl-clean-panel); }
.pres-tpl-clean-client .ps-cover-veil { background: linear-gradient(160deg, color-mix(in srgb, var(--ptpl-clean-veil-hi) 50%, transparent), color-mix(in srgb, var(--ptpl-report-panel) 80%, transparent)); }
.pres-tpl-clean-client .ps-compose.pos-overlay .ps-tb { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ptpl-clean-panel) 94%, transparent)); }
.pres-tpl-clean-client .ps-edit:focus { outline-color: color-mix(in srgb, var(--shadow-ink) 40%, transparent); }
/* production-report template → warm-light slides, GREEN accents (distinct from dark-cinematic) */
.pres-tpl-production-report { background: var(--ptpl-report-panel); }
.pres-tpl-production-report .ps-title, .pres-tpl-production-report .ps-cover-title, .pres-tpl-production-report .ps-text-title { color: var(--ptpl-ink); }
.pres-tpl-production-report .ps-caption, .pres-tpl-production-report .ps-text-body, .pres-tpl-production-report .ps-cover-meta, .pres-tpl-production-report .ps-splitsub { color: var(--ptpl-ink-body-2); }
.pres-tpl-production-report .ps-meta, .pres-tpl-production-report .ps-overlabel, .pres-tpl-production-report .ps-cover-eyebrow { color: var(--ink-forest-4); }
.pres-tpl-production-report .ps-shotid { color: color-mix(in srgb, var(--ink-taupe-5) 86%, var(--mix-light)); }
.pres-tpl-production-report .ps-cover, .pres-tpl-production-report .ps-text { background: var(--ptpl-report-panel); }
.pres-tpl-production-report .ps-cover-veil { background: linear-gradient(160deg, color-mix(in srgb, var(--ptpl-report-panel) 50%, transparent), color-mix(in srgb, var(--ptpl-report-veil-lo) 82%, transparent)); }
.pres-tpl-production-report .ps-cover-rule { background: var(--surface-forest-4); }
.pres-tpl-production-report .ps-compose.pos-overlay .ps-tb { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ptpl-report-panel) 94%, transparent)); }
.pres-tpl-production-report .ps-badge { color: color-mix(in srgb, var(--ink-forest-6) 82%, var(--mix-dark)); border-color: color-mix(in srgb, var(--olive) 48%, var(--mix-light)); background: color-mix(in srgb, var(--mint) 65%, var(--mix-light)); }
.pres-tpl-production-report .ps-edit:focus { outline-color: color-mix(in srgb, var(--shadow-ink) 40%, transparent); }
/* ── Style themes (cover + content bg) — match the concept decks ── */
/* Dark Cinematic: deep forest green + gold */
.pres-tpl-dark-cinematic { background: var(--ptpl-dark-panel); }
.pres-tpl-dark-cinematic .ps-text { background: var(--ptpl-dark-panel); }
/* Clean Client: cream cover, dark ink, gold-brown accents */
.pres-tpl-clean-client .ps-cover { background-color: var(--ptpl-clean-cover); }
.pres-tpl-clean-client .ps-cover-veil { background: linear-gradient(100deg, color-mix(in srgb, var(--ptpl-clean-cover) 96%, transparent) 32%, color-mix(in srgb, var(--ptpl-clean-cover) 55%, transparent) 62%, color-mix(in srgb, var(--ptpl-clean-cover) 8%, transparent) 80%); }
.pres-tpl-clean-client .ps-cover-title { color: var(--ptpl-ink-clean); }
.pres-tpl-clean-client .ps-mark, .pres-tpl-clean-client .ps-cover-eyebrow, .pres-tpl-clean-client .ps-cover-meta, .pres-tpl-clean-client .ps-cover-pilltext { color: var(--gold-7); }
.pres-tpl-clean-client .ps-cover-rule .ps-rule-line { background: color-mix(in srgb, var(--gold-7) 50%, transparent); }
.pres-tpl-clean-client .ps-cover-rule .ps-rule-dot { background: var(--gold-7); }
.pres-tpl-clean-client .ps-cover-pill { border-color: color-mix(in srgb, var(--gold-7) 55%, transparent); }
/* Production Report: warm-light cover, green accents */
.pres-tpl-production-report .ps-cover { background-color: var(--ptpl-clean-panel); }
.pres-tpl-production-report .ps-cover-veil { background: linear-gradient(100deg, color-mix(in srgb, var(--ptpl-clean-panel) 96%, transparent) 32%, color-mix(in srgb, var(--ptpl-clean-panel) 55%, transparent) 62%, color-mix(in srgb, var(--ptpl-clean-panel) 8%, transparent) 80%); }
.pres-tpl-production-report .ps-cover-title { color: var(--ptpl-ink); }
.pres-tpl-production-report .ps-mark, .pres-tpl-production-report .ps-cover-eyebrow, .pres-tpl-production-report .ps-cover-meta, .pres-tpl-production-report .ps-cover-pilltext { color: var(--ink-forest-4); }
.pres-tpl-production-report .ps-cover-rule .ps-rule-line { background: color-mix(in srgb, var(--surface-forest-4) 45%, transparent); }
.pres-tpl-production-report .ps-cover-rule .ps-rule-dot { background: var(--surface-forest-4); }
.pres-tpl-production-report .ps-cover-pill { border-color: color-mix(in srgb, var(--surface-forest-4) 50%, transparent); }
/* ── Agenda / Deck Structure ────────────────────────────── */
/* v07zz217 — Hugo: the 44cf0a4 "match concept" rework switched to PERCENT
padding (7% 8%) + bigger px, so the agenda content scaled with the browser
width instead of the slide and looked huge. Reverted to the prior FIXED-px
layout — content stays slide-relative again. */
.ps-agenda { position: absolute; inset: 0; display: flex; gap: 24px; padding: 26px 30px; }
.ps-ag-left { flex: 0 0 40%; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.ps-ag-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.ps-title--lg { font-size: var(--fs-30); }
.ps-rule--block { max-width: 300px; margin: 8px 0; }
.ps-ag-sub { font-size: var(--fs-10-5); letter-spacing: var(--track-16); text-transform: uppercase; color: var(--gold-11); font-weight: var(--fw-semi); margin-top: 6px; }
.ps-ag-list { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; overflow: hidden; }
.ps-ag-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 5px 0; border-bottom: 1px solid color-mix(in srgb, var(--gold-11) 20%, transparent); }
.ps-ag-row:last-of-type { border-bottom: 0; }
.ps-ag-num { flex: 0 0 auto; width: 32px; height: 24px; border: 1px solid color-mix(in srgb, var(--gold-11) 50%, transparent); border-radius: 5px; display: grid; place-items: center; font-family: var(--font-mono, monospace); font-size: var(--fs-11); color: var(--gold-11); }
.ps-ag-bar { flex: 0 0 1px; align-self: stretch; background: color-mix(in srgb, var(--gold-11) 40%, transparent); }
.ps-ag-main { flex: 1 1 0; min-width: 0; display: flex; gap: 14px; align-items: baseline; }
.ps-ag-item-label { font-family: var(--font-display, "Bebas Neue", sans-serif); font-size: var(--fs-16); color: color-mix(in srgb, var(--ink-cream-7) 75%, var(--mix-light)); flex: 0 0 34%; letter-spacing: var(--track-02); }
.ps-ag-item-desc { font-size: var(--fs-10); line-height: 1.35; color: color-mix(in srgb, var(--ink-cream-4) 70%, transparent); flex: 1 1 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* ── Columns / Brief / Feature cards ────────────────────── */
.ps-cols { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 24px 30px; }
.ps-rule--full { max-width: none; }
.ps-cols-intro { font-size: var(--fs-11); line-height: 1.5; color: color-mix(in srgb, var(--ink-cream-4) 82%, transparent); margin: 6px 0 14px; max-width: 80ch; }
.ps-cols-grid { flex: 1 1 0; min-height: 0; display: grid; gap: 20px; align-content: center; }
.ps-col { position: relative; display: flex; flex-direction: column; gap: 6px; padding-left: 16px; border-left: 1px solid color-mix(in srgb, var(--gold-11) 26%, transparent); }
.ps-col:first-child { border-left: 0; padding-left: 0; }
.ps-ico { width: 22px; height: 22px; color: var(--gold-11); display: inline-block; flex: 0 0 auto; }
.ps-ico svg { width: 100%; height: 100%; display: block; }
.ps-col-head { display: flex; align-items: center; gap: 9px; }
.ps-col-label { font-size: var(--fs-11); letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-11); font-weight: var(--fw-bold); }
.ps-col-rule { width: 30px; height: 1px; background: color-mix(in srgb, var(--gold-11) 50%, transparent); }
.ps-col-text { font-size: var(--fs-10-5); line-height: 1.45; color: color-mix(in srgb, var(--ink-cream-4) 78%, transparent); }
/* item add/remove controls (edit affordances, never in the PDF) */
.ps-item-del { position: absolute; top: 0; right: 0; width: 16px; height: 16px; border: 0; border-radius: 50%; background: rgba(0,0,0,0.45); color: var(--white); font-size: var(--fs-11); line-height: 1; cursor: pointer; opacity: 0; }
.ps-ag-row:hover .ps-item-del, .ps-col:hover .ps-item-del { opacity: 1; }
.ps-item-add { align-self: flex-start; margin-top: 6px; background: transparent; border: 1px dashed color-mix(in srgb, var(--gold-11) 45%, transparent); color: var(--gold-11); border-radius: var(--r-xs); font: inherit; font-size: var(--fs-9); letter-spacing: var(--track-06); padding: 3px 9px; cursor: pointer; opacity: 0; }
.pres-slide:hover .ps-item-add { opacity: 0.85; }
/* Clean Client theme — dark ink, gold-brown accent */
.pres-tpl-clean-client .ps-ag-item-label { color: var(--ptpl-ink-clean); }
.pres-tpl-clean-client .ps-ag-item-desc, .pres-tpl-clean-client .ps-cols-intro, .pres-tpl-clean-client .ps-col-text { color: var(--ptpl-ink-body); }
.pres-tpl-clean-client .ps-ag-sub, .pres-tpl-clean-client .ps-col-label, .pres-tpl-clean-client .ps-ico { color: var(--gold-7); }
.pres-tpl-clean-client .ps-ag-num { border-color: color-mix(in srgb, var(--gold-7) 50%, transparent); color: var(--gold-7); }
.pres-tpl-clean-client .ps-ag-bar, .pres-tpl-clean-client .ps-col-rule { background: color-mix(in srgb, var(--gold-7) 50%, transparent); }
.pres-tpl-clean-client .ps-ag-row { border-bottom-color: color-mix(in srgb, var(--gold-7) 22%, transparent); }
.pres-tpl-clean-client .ps-col { border-left-color: color-mix(in srgb, var(--gold-7) 26%, transparent); }
/* Production Report theme — green accent */
.pres-tpl-production-report .ps-ag-item-label { color: var(--ptpl-ink); }
.pres-tpl-production-report .ps-ag-item-desc, .pres-tpl-production-report .ps-cols-intro, .pres-tpl-production-report .ps-col-text { color: var(--ptpl-ink-body-2); }
.pres-tpl-production-report .ps-ag-sub, .pres-tpl-production-report .ps-col-label, .pres-tpl-production-report .ps-ico { color: var(--ink-forest-4); }
.pres-tpl-production-report .ps-ag-num { border-color: color-mix(in srgb, var(--surface-forest-4) 45%, transparent); color: var(--ink-forest-4); }
.pres-tpl-production-report .ps-ag-bar, .pres-tpl-production-report .ps-col-rule { background: color-mix(in srgb, var(--surface-forest-4) 45%, transparent); }
.pres-tpl-production-report .ps-ag-row { border-bottom-color: color-mix(in srgb, var(--surface-forest-4) 20%, transparent); }
.pres-tpl-production-report .ps-col { border-left-color: color-mix(in srgb, var(--surface-forest-4) 24%, transparent); }
/* ── Past presentations ─────────────────────────────────── */
.pres-past { flex: 0 0 auto; max-height: 30%; overflow-y: auto; border-top: 1px solid var(--pres-border-soft); padding-top: 10px; margin-top: 10px; display: flex; flex-direction: column; }
.pres-past-title { font-size: var(--fs-10-5); letter-spacing: var(--track-16); text-transform: uppercase; color: var(--pres-muted); font-weight: var(--fw-bold); margin-bottom: 4px; }
/* v07zz210 — row is now a flex wrapper holding the open-link + a delete button. */
.pres-past-row { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--pres-border-soft); transition: background var(--dur-1) ease; }
.pres-past-row:last-child { border-bottom: 0; }
.pres-past-row:hover { background: color-mix(in srgb, var(--mix-light) 50%, transparent); }
.pres-past-link { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; padding: 9px 4px; text-decoration: none; color: inherit; }
.pres-past-del { flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--r-xs); border: 1px solid var(--pres-border-soft); background: transparent; color: var(--pres-muted); font-size: var(--fs-17); line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease; }
.pres-past-del:hover { background: color-mix(in srgb, var(--red-33) 12%, transparent); color: var(--ink-red-34); border-color: color-mix(in srgb, var(--red-33) 40%, transparent); }
.pres-past-icon { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-7); color: var(--white); background: var(--red-32); }
.pres-past-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pres-past-name { font-size: var(--fs-12-5); color: var(--pres-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pres-past-meta { font-size: var(--fs-10-5); color: var(--pres-muted); }
.pres-past-dl { display: inline-flex; align-items: center; gap: 5px; color: color-mix(in srgb, var(--ink-tan-deep) 91%, var(--mix-dark)); font-size: var(--fs-12); font-weight: var(--fw-semi); flex: 0 0 auto; }
/* ── Status bar (on the dark page bg) ───────────────────── */
.pres-statusbar { flex: 0 0 auto; margin-top: 10px; padding: 9px 4px 3px; font-size: var(--fs-11-5); color: var(--pres-label); letter-spacing: var(--track-02); border-top: 1px solid color-mix(in srgb, var(--cream-4) 14%, transparent); }
/* ── v2: stage badge, grid overprint label, reorder controls ───────── */
.ps-stagebadge { flex: 0 0 auto; font-size: 8px; letter-spacing: var(--track-08); text-transform: uppercase; font-weight: var(--fw-bold); padding: 2px 7px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--gold-5) 50%, transparent); color: color-mix(in srgb, var(--gold-11) 84%, var(--mix-light)); background: color-mix(in srgb, var(--gold-5) 12%, transparent); white-space: nowrap; }
.pres-tpl-clean-client .ps-stagebadge, .pres-tpl-editorial .ps-stagebadge { border-color: color-mix(in srgb, var(--gold-7) 50%, transparent); color: var(--gold-7); background: color-mix(in srgb, var(--gold-7) 10%, transparent); }
.ps-grid-cell { position: relative; } /* anchor for overprint label + reorder tools */
.ps-grid-label { position: absolute; left: 0; bottom: 0; padding: 4px 9px; font-family: var(--font-display,"Bebas Neue",sans-serif); font-size: var(--fs-16); line-height: 1; letter-spacing: var(--track-02); color: var(--white); text-shadow: 0 1px 6px rgba(0,0,0,0.72); pointer-events: none; z-index: 2; }
.ps-cell-tools { position: absolute; top: 4px; right: 4px; display: flex; gap: 3px; opacity: 0; transition: opacity var(--dur-1) ease; z-index: 3; }
.ps-grid-cell:hover .ps-cell-tools { opacity: 1; }
.ps-cell-move { width: 18px; height: 18px; border: 0; border-radius: 4px; background: color-mix(in srgb, var(--shade-11) 80%, transparent); color: var(--white); font-size: var(--fs-13); line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.ps-cell-move:hover { background: color-mix(in srgb, var(--shade-11) 96%, transparent); }
/* ── Cover layout variants (⊞ + Settings) — theme-safe ─────────────── */
/* (cover layout variants consolidated into the 9-option block above) */
/* ── Agenda: split variant — centre the title against the number badge.
The description can wrap to two lines, which makes .ps-ag-main taller than
the one-line title; baseline alignment would pin the title to the top of the
row. Centring keeps the title visually aligned with the centred .ps-ag-num
badge. Pure alignment change — row height is set by the tallest child either
way, so there is no layout shift (invariant #20). ─────────────────────── */
.ps-agenda.lay-split .ps-ag-main { align-items: center; }
/* ── Agenda: stacked variant (title top, list below) ─────────────────
The head sits ABOVE the list here, so it eats vertical space the split
layout doesn't. Tighten the head (title/rule/sub margins) + list gap +
padding so 5–6 numbered rows fit inside the fixed 360px canvas instead of
the last one clipping. Sized for the tallest realistic agenda (≈6 rows). */
.ps-agenda.lay-stack { flex-direction: column; gap: 8px; padding: 16px 30px; }
.ps-agenda.lay-stack .ps-ag-left { flex: 0 0 auto; }
.ps-agenda.lay-stack .ps-ag-list { justify-content: flex-start; gap: 4px; }
.ps-agenda.lay-stack .ps-title--lg { font-size: 27px; }
.ps-agenda.lay-stack .ps-ag-head { margin-bottom: 3px; }
.ps-agenda.lay-stack .ps-rule--block { margin: 5px 0; }
.ps-agenda.lay-stack .ps-ag-sub { margin-top: 3px; }
/* ── Columns: text-column wrapper + cards variant (Visual-Direction) ── */
.ps-cols-textcol { display: flex; flex-direction: column; min-width: 0; }
.ps-cols.lay-cards { flex-direction: row; align-items: center; gap: 26px; }
.ps-cols.lay-cards .ps-cols-textcol { flex: 0 0 40%; }
.ps-cols.lay-cards .ps-cols-grid { flex: 1 1 0; align-content: center; }
.ps-cols.lay-cards .ps-col { padding: 13px; border-left: 0; border: 1px solid color-mix(in srgb, var(--gold-11) 30%, transparent); border-radius: var(--r-sm); }
.pres-tpl-clean-client .ps-cols.lay-cards .ps-col, .pres-tpl-editorial .ps-cols.lay-cards .ps-col { border-color: color-mix(in srgb, var(--gold-7) 30%, transparent); }
.pres-tpl-clean-client .ps-cols.lay-cards .ps-col:first-child, .pres-tpl-editorial .ps-cols.lay-cards .ps-col:first-child { padding-left: 13px; }
/* ── Section / category title slide ────────────────────────────────── */
.ps-section { position: absolute; inset: 0; display: flex; gap: 24px; padding: 26px 30px; align-items: center; }
.ps-sec-textcol { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 0 0 38%; }
.ps-section.lay-grid-below { flex-direction: column; align-items: stretch; gap: 14px; }
.ps-section.lay-grid-below .ps-sec-textcol { flex: 0 0 auto; }
.ps-section.lay-title { justify-content: center; }
.ps-section.lay-title .ps-sec-textcol { flex: 1 1 0; align-items: center; text-align: center; }
.ps-section.lay-title .ps-ag-head { justify-content: center; }
.ps-section.lay-title .ps-cover-rule { margin-left: auto; margin-right: auto; }
.ps-sec-grid { flex: 1 1 0; min-width: 0; min-height: 0; align-self: stretch; position: relative; }
.ps-title--xl { font-size: 42px; }
/* ── PROSE / "Text" slide ────────────────────────────────────────────
Same top header as Columns (eyebrow + title + rule + intro) but the body
is up to 6 full-width paragraphs STACKED one after the other down the
slide (NOT columns). */
.ps-prose { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 24px 30px; }
.ps-prose-body { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; margin-top: 8px; }
.ps-para { position: relative; }
.ps-para-text { font-size: var(--fs-10-5); line-height: 1.5; color: color-mix(in srgb, var(--ink-cream-4) 86%, transparent); max-width: 100%; }
.ps-para:hover .ps-item-del { opacity: 1; }
.pres-tpl-clean-client .ps-para-text { color: var(--ptpl-ink-body); }
.pres-tpl-production-report .ps-para-text { color: var(--ptpl-ink-body-2); }
.pres-tpl-editorial .ps-para-text { color: var(--ptpl-ink-body-3); }
/* ── SECTION TITLE card ──────────────────────────────────────────────
A centred divider between sections: eyebrow + big title + rule + subtitle. */
.ps-sectitle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 30px 40px; }
.ps-sectitle-inner { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 80%; }
.ps-sectitle-inner .ps-ag-head { justify-content: center; }
.ps-sectitle-inner .ps-cover-rule { margin-left: auto; margin-right: auto; }
.ps-sectitle-title { font-size: 46px; }
.ps-sectitle-sub { font-size: var(--fs-12); letter-spacing: var(--track-16); text-transform: uppercase; color: var(--gold-11); font-weight: var(--fw-semi); margin-top: 8px; }
.pres-tpl-clean-client .ps-sectitle-sub { color: var(--gold-7); }
.pres-tpl-production-report .ps-sectitle-sub { color: var(--ink-forest-4); }
.pres-tpl-editorial .ps-sectitle-sub { color: var(--ptpl-editorial-accent); }
/* ── Asset RETAKE slide ──────────────────────────────────────────────
Two layouts: intro-card (a full-bleed hero + a text column with the
" Retake" eyebrow, name, role and two "what changed" lines) and
showcase (a compact text header + a multi-image grid of the retake
renders). The change lines are clamped so toggling layout / selecting
the slide never reflows the fixed 640×360 canvas (invariant #20). */
.ps-retake { position: absolute; inset: 0; display: flex; }
.ps-retake.lay-intro-card { flex-direction: row; }
.ps-retake .ps-rt-hero { flex: 1 1 0; min-width: 0; position: relative; }
.ps-retake .ps-rt-textcol { flex: 0 0 42%; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 22px 26px; }
.ps-retake.lay-intro-card .ps-rt-textcol .ps-title { font-size: var(--fs-34); line-height: 0.94; }
.ps-retake.lay-showcase { flex-direction: column; padding: 22px 26px 16px; gap: 12px; }
.ps-retake.lay-showcase .ps-rt-head { flex: 0 0 auto; display: flex; flex-direction: column; }
.ps-retake.lay-showcase .ps-rt-grid { flex: 1 1 0; min-height: 0; position: relative; }
.ps-rt-changes { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.ps-retake.lay-showcase .ps-rt-changes { margin-top: 8px; }
.ps-rt-changes-lbl { font-size: var(--fs-8-5); letter-spacing: var(--track-18); text-transform: uppercase; color: var(--gold-11); font-weight: var(--fw-bold); }
.ps-rt-change { position: relative; padding-left: 14px; }
.ps-rt-change::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold-11); }
.ps-rt-change-txt { font-size: var(--fs-11); line-height: 1.4; color: color-mix(in srgb, var(--ink-cream-4) 85%, transparent); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ps-rt-change-txt[contenteditable]:empty::before { content: "Describe a change…"; color: color-mix(in srgb, var(--ink-cream-4) 42%, transparent); }
/* In the builder (contenteditable) empty change lines show the placeholder; in the
LOCKED viewer + PDF (contenteditable stripped) a blank line would render an orphan
diamond bullet under "What changed". Hide empty non-editable rows, and the whole
block when BOTH are empty — never affects edit mode (it always has [contenteditable]). */
.ps-rt-change:has(> .ps-rt-change-txt:empty:not([contenteditable])) { display: none; }
.ps-rt-changes:not(:has(.ps-rt-change-txt:not(:empty))):not(:has([contenteditable])) { display: none; }
/* ── OUTFIT SELECTION slide ───────────────────────────────────────────
A text header (eyebrow + name + role + a free caption line) and a grid
of outfit images. Layouts: captioned (an editable text band on each
image), clean (no captions), split (header in a side column). */
.ps-outfit { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 20px 26px 14px; gap: 10px; }
.ps-outfit .ps-of-head { flex: 0 0 auto; display: flex; flex-direction: column; min-width: 0; }
.ps-outfit .ps-of-grid { flex: 1 1 0; min-height: 0; position: relative; }
.ps-of-line { font-size: var(--fs-11); line-height: 1.4; color: color-mix(in srgb, var(--ink-cream-4) 82%, transparent); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ps-outfit.lay-split { flex-direction: row; align-items: stretch; gap: 22px; }
.ps-outfit.lay-split .ps-of-head { flex: 0 0 34%; justify-content: center; }
/* v07zz268 — BANNER 21:9: wide image frame on top, eyebrow + two lines below
(big title hidden). Centred. */
.ps-outfit.lay-banner { justify-content: center; align-items: center; gap: 16px; }
.ps-outfit.lay-banner .ps-of-grid--banner {
flex: 0 0 auto; width: 100%; aspect-ratio: var(--project-aspect); max-height: 72%; min-height: 0;
border-radius: var(--r-sm); overflow: hidden;
}
.ps-outfit.lay-banner .ps-of-grid--banner > * { height: 100%; }
.ps-outfit.lay-banner .ps-of-head--banner { flex: 0 0 auto; align-items: center; text-align: center; max-width: 92%; }
/* per-image caption band (Outfit Selection). White text over a bottom
gradient. The gradient + placeholder only show when there's text OR while
editing, so an empty caption is invisible in the locked review deck and the
PDF (printDeck strips the contenteditable attribute, dropping the
[contenteditable] rules — so no placeholder/gradient leaks into the export). */
.ps-grid-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 7px 10px; font-size: var(--fs-10-5); line-height: 1.3; font-weight: var(--fw-semi); color: var(--white); text-shadow: 0 1px 5px rgba(0,0,0,0.7); pointer-events: none; }
.ps-grid-caption:not(:empty), .ps-grid-caption[contenteditable] { background: linear-gradient(180deg, transparent, rgba(0,0,0,0.82)); }
.ps-grid-caption[contenteditable] { pointer-events: auto; cursor: text; outline: none; min-height: 1.3em; }
.ps-grid-caption[contenteditable]:focus { background: linear-gradient(180deg, rgba(0,0,0,0.34), rgba(0,0,0,0.9)); }
.ps-grid-caption[contenteditable]:empty::before { content: attr(data-ph); opacity: 0.72; }
/* v07zz271 — "Fit whole image" — show the ENTIRE image, never crop, and HUG it:
render a real ![]()
in a transparent cell so there are NO dark letterbox bars. */
.ps-grid-cell--fit { background: transparent !important; display: flex; align-items: center; justify-content: center; overflow: visible; min-height: 0; min-width: 0; }
.ps-grid-cell--fit .ps-grid-cell-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 4px; display: block; }
/* v07zz271 — "Label each image": image (contain, never cropped) + editable
Title + Subtitle beneath, so each image can be commented on. */
/* align-content:stretch + auto-rows:1fr so each row FILLS the slide height — the
image box must get real height or it collapses and only the captions show. */
.ps-lblgrid { display: grid; gap: 14px; width: 100%; height: 100%; padding: 16px; box-sizing: border-box; align-content: stretch; grid-auto-rows: minmax(0, 1fr); }
.ps-lblcard { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.ps-lblcard-img { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.ps-lblcard-imgel { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--r-xs); display: block; }
.ps-lblcard-txt { flex: 0 0 auto; }
.ps-lblcard-t { font-family: var(--font-display, 'Bebas Neue','Inter',sans-serif); font-size: var(--fs-16); line-height: 1.12; letter-spacing: var(--track-02); color: var(--ink-cream-4); margin-top: 7px; }
.ps-lblcard-s { font-family: var(--font-body, 'Inter',sans-serif); font-size: var(--fs-10-5); line-height: 1.35; color: color-mix(in srgb, var(--ink-cream-4) 78%, transparent); margin-top: 2px; }
.ps-lblcard-t.is-empty { min-height: 1.12em; }
.ps-lblcard-t[contenteditable], .ps-lblcard-s[contenteditable] { outline: none; cursor: text; }
.ps-lblcard-t[contenteditable]:empty::before, .ps-lblcard-s[contenteditable]:empty::before { content: attr(data-ph); opacity: 0.5; }
/* cream-template ink overrides */
.pres-tpl-clean-client .ps-lblcard-t, .pres-tpl-production-report .ps-lblcard-t, .pres-tpl-editorial .ps-lblcard-t { color: var(--ptpl-ink-card); }
.pres-tpl-clean-client .ps-lblcard-s, .pres-tpl-production-report .ps-lblcard-s, .pres-tpl-editorial .ps-lblcard-s { color: color-mix(in srgb, var(--ink-taupe-3) 85%, var(--mix-dark)); }
/* Retake / Outfit text — theme ink/gold overrides (cream templates) */
.pres-tpl-clean-client .ps-rt-change-txt, .pres-tpl-production-report .ps-rt-change-txt, .pres-tpl-editorial .ps-rt-change-txt,
.pres-tpl-clean-client .ps-of-line, .pres-tpl-production-report .ps-of-line, .pres-tpl-editorial .ps-of-line { color: var(--ptpl-ink-body); }
.pres-tpl-clean-client .ps-rt-changes-lbl { color: var(--gold-7); }
.pres-tpl-clean-client .ps-rt-change::before { background: var(--gold-7); }
.pres-tpl-production-report .ps-rt-changes-lbl { color: var(--ink-forest-4); }
.pres-tpl-production-report .ps-rt-change::before { background: var(--surface-forest-4); }
.pres-tpl-editorial .ps-rt-changes-lbl { color: var(--ptpl-editorial-accent); }
.pres-tpl-editorial .ps-rt-change::before { background: var(--ptpl-editorial-accent); }
/* ── Settings: cover-layout diagrams + text-only layout buttons ────── */
.pres-lay-grid--text { grid-template-columns: repeat(2, 1fr); }
.pres-lay--text { flex-direction: row; align-items: center; justify-content: center; min-height: 34px; }
/* v07zz237 — compact 3×2 text-position picker (no labels; mini-diagram shows
where the text sits). Replaces the orphaned text-align button rows. */
.pres-align-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 7px; }
.pres-align-cell { min-width: 0; padding: 5px; background: color-mix(in srgb, var(--mix-light) 50%, transparent); border: 1.5px solid var(--pres-border-soft); border-radius: var(--r-panel); cursor: pointer; font: inherit; transition: border-color var(--dur-1) ease, background var(--dur-1) ease, box-shadow var(--dur-1) ease; }
.pres-align-cell:hover { border-color: var(--pres-border); background: color-mix(in srgb, var(--mix-light) 70%, transparent); }
.pres-align-cell.is-on { border-color: var(--pres-orange); background: color-mix(in srgb, var(--gold) 8%, transparent); box-shadow: 0 0 0 var(--hairline-w) var(--pres-orange) inset; }
.pres-align-diag { position: relative; display: block; width: 100%; aspect-ratio: 16/9; border-radius: 4px; background: var(--pres-diag-bg); border: 1px solid var(--pres-diag-edge); overflow: hidden; }
.pres-align-diag i { position: absolute; height: 22%; width: 46%; background: var(--pres-diag-txt); border-radius: 2px; }
.pres-align-diag.av-top i { top: 14%; }
.pres-align-diag.av-center i { top: 38%; }
.pres-align-diag.av-bottom i { bottom: 14%; }
.pres-align-diag.ah-left i { left: 12%; }
.pres-align-diag.ah-center i { left: 25%; }
.pres-align-diag.ah-right i { right: 12%; }
.pres-align-cell.is-on .pres-align-diag i { background: var(--pres-orange); }
.pres-cov-diag { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; background: var(--pres-diag-bg); border: 1px solid var(--pres-diag-edge); display: block; }
.pres-cov-diag .pres-cov-img { position: absolute; inset: 0; background: var(--pres-diag-img); }
.pres-cov-diag .pres-cov-txt { position: absolute; background: var(--pres-diag-txt); border-radius: 2px; }
.pres-cov-diag.cov-cover .pres-cov-img { left: 46%; }
.pres-cov-diag.cov-cover .pres-cov-txt { left: 8%; top: 34%; width: 30%; height: 32%; }
.pres-cov-diag.cov-center .pres-cov-txt { left: 50%; transform: translateX(-50%); top: 34%; width: 44%; height: 32%; }
.pres-cov-diag.cov-topcenter .pres-cov-txt { left: 50%; transform: translateX(-50%); top: 12%; width: 44%; height: 26%; }
.pres-cov-diag.cov-bigcenter .pres-cov-txt { left: 50%; transform: translateX(-50%); top: 30%; width: 64%; height: 40%; }
.pres-cov-diag.cov-bottomleft .pres-cov-txt { left: 8%; bottom: 12%; width: 40%; height: 30%; }
.pres-cov-diag.cov-bottomright .pres-cov-txt { right: 8%; bottom: 12%; width: 40%; height: 30%; }
.pres-cov-diag.cov-right .pres-cov-img { right: 46%; left: 0; }
.pres-cov-diag.cov-right .pres-cov-txt { right: 8%; top: 34%; width: 30%; height: 32%; }
.pres-cov-diag.cov-bar .pres-cov-txt { left: 8%; right: 8%; bottom: 8%; top: auto; width: auto; height: 18%; }
.pres-cov-diag.cov-panel .pres-cov-txt { left: 8%; top: 24%; width: 30%; height: 52%; }
/* ── Section title-slide button + extra tag colours ────────────────── */
.pres-sec-titlebtn { font-size: var(--fs-9); font-weight: var(--fw-bold); letter-spacing: var(--track-04); color: var(--pres-orange); background: color-mix(in srgb, var(--gold) 10%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); border-radius: var(--r-xs); padding: 2px 7px; margin-left: auto; cursor: pointer; white-space: nowrap; }
.pres-sec-titlebtn:hover { background: color-mix(in srgb, var(--gold) 18%, transparent); }
.pres-sec-head .pres-sec-titlebtn + .pres-sec-count { margin-left: 8px; }
.pres-extra-tag--section { background: color-mix(in srgb, var(--olive-6) 66%, var(--mix-dark)); }
.pres-extra-tag--columns { background: color-mix(in srgb, var(--umber-4) 92%, var(--mix-light)); }
.pres-extra-tag--agenda { background: var(--tag-agenda); }
.pres-extra-tag--retake { background: var(--tag-retake); }
.pres-extra-tag--outfit { background: color-mix(in srgb, var(--teal) 59%, var(--mix-dark)); }
/* ── Editorial preview theme — warm light, terracotta + ink, left rule on compose text ── */
.pres-tpl-editorial { background: var(--ptpl-editorial-panel); }
.pres-tpl-editorial .ps-text { background: var(--ptpl-editorial-panel); }
.pres-tpl-editorial .ps-title, .pres-tpl-editorial .ps-cover-title, .pres-tpl-editorial .ps-text-title, .pres-tpl-editorial .ps-ag-item-label { color: var(--ptpl-ink-editorial); }
.pres-tpl-editorial .ps-caption, .pres-tpl-editorial .ps-text-body, .pres-tpl-editorial .ps-cover-meta, .pres-tpl-editorial .ps-splitsub, .pres-tpl-editorial .ps-ag-item-desc, .pres-tpl-editorial .ps-cols-intro, .pres-tpl-editorial .ps-col-text { color: var(--ptpl-ink-body-3); }
.pres-tpl-editorial .ps-meta, .pres-tpl-editorial .ps-overlabel, .pres-tpl-editorial .ps-cover-eyebrow, .pres-tpl-editorial .ps-ag-sub, .pres-tpl-editorial .ps-col-label, .pres-tpl-editorial .ps-ico, .pres-tpl-editorial .ps-mark { color: var(--ptpl-editorial-accent); }
.pres-tpl-editorial .ps-shotid { color: color-mix(in srgb, var(--ink-taupe-5) 86%, var(--mix-light)); }
.pres-tpl-editorial .ps-cover { background-color: color-mix(in srgb, var(--parchment) 95%, var(--mix-dark)); }
.pres-tpl-editorial .ps-cover-veil { background: linear-gradient(100deg, color-mix(in srgb, var(--ptpl-editorial-panel) 96%, transparent) 30%, color-mix(in srgb, var(--ptpl-editorial-panel) 50%, transparent) 60%, color-mix(in srgb, var(--ptpl-editorial-panel) 6%, transparent) 80%); }
.pres-tpl-editorial .ps-cover-rule .ps-rule-line, .pres-tpl-editorial .ps-ag-bar, .pres-tpl-editorial .ps-col-rule { background: color-mix(in srgb, var(--ptpl-editorial-accent) 50%, transparent); }
.pres-tpl-editorial .ps-cover-rule .ps-rule-dot { background: var(--ptpl-editorial-accent); }
.pres-tpl-editorial .ps-cover-pill { border-color: color-mix(in srgb, var(--ptpl-editorial-accent) 55%, transparent); }
.pres-tpl-editorial .ps-cover-pilltext { color: var(--ptpl-editorial-accent); }
.pres-tpl-editorial .ps-ag-num { border-color: color-mix(in srgb, var(--ptpl-editorial-accent) 50%, transparent); color: var(--ptpl-editorial-accent); }
.pres-tpl-editorial .ps-ag-row { border-bottom-color: color-mix(in srgb, var(--ptpl-editorial-accent) 22%, transparent); }
.pres-tpl-editorial .ps-col { border-left-color: color-mix(in srgb, var(--ptpl-editorial-accent) 26%, transparent); }
.pres-tpl-editorial .ps-tb { border-left: 2px solid var(--ptpl-editorial-accent); padding-left: 16px; } /* editorial layout signature */
.pres-tpl-editorial .ps-compose.pos-overlay .ps-tb { border-left: 0; padding-left: 16px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ptpl-editorial-panel) 94%, transparent)); }
.pres-tpl-editorial .ps-compose.pos-overlay .ps-tb .ps-title, .pres-tpl-editorial .ps-compose.pos-overlay .ps-tb .ps-caption { color: var(--ptpl-ink-editorial); }
.pres-tpl-editorial .ps-badge { color: color-mix(in srgb, var(--ink-tan-deep) 95%, var(--mix-dark)); border-color: color-mix(in srgb, var(--gold-deep) 60%, var(--mix-light)); background: color-mix(in srgb, var(--gold-deep) 23%, var(--mix-light)); }
.pres-tpl-editorial .ps-stagebadge { border-color: color-mix(in srgb, var(--ptpl-editorial-accent) 50%, transparent); color: var(--ptpl-editorial-accent); background: color-mix(in srgb, var(--ptpl-editorial-accent) 10%, transparent); }
.pres-tpl-editorial .ps-edit:focus { outline-color: color-mix(in srgb, var(--shadow-ink) 40%, transparent); }
/* ── In-app confirm (replaces native window.confirm for Clear/Replace) ──── */
.pres-confirm-backdrop { position: fixed; inset: 0; z-index: var(--z-dialog); display: grid; place-items: center; background: color-mix(in srgb, var(--shade-26) 55%, transparent); padding: 20px; }
/* ── v07zz239 — Character Shots: per-row action + edit affordance + picker ── */
.pres-srow-action { flex: 0 0 auto; font: inherit; font-size: var(--fs-10); font-weight: var(--fw-bold); letter-spacing: var(--track-01); padding: 4px 7px; border-radius: var(--r-xs); cursor: pointer; border: 1px solid var(--pres-border-soft); background: color-mix(in srgb, var(--mix-light) 50%, transparent); color: var(--pres-muted); white-space: nowrap; transition: background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease; }
.pres-srow-action:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); color: var(--pres-orange); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.pres-editshots-btn { width: 100%; font: inherit; font-size: var(--fs-12); font-weight: var(--fw-bold); padding: 8px 10px; margin-bottom: 4px; border-radius: var(--r-sm); cursor: pointer; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 10%, transparent); color: var(--pres-orange); transition: background var(--dur-1) ease; }
.pres-editshots-btn:hover { background: color-mix(in srgb, var(--gold) 18%, transparent); }
/* v07zz242 — this modal renders through a PORTAL into #modal-root, which is
OUTSIDE .presentations-view, so the --pres-* vars (scoped to that element)
don't inherit here — the panel was rendering transparent. Re-declare the
handful it needs on the modal itself (they cascade to its children). */
.pres-cs-modal {
--pres-panel-solid: var(--card-bg-solid);
--pres-border: var(--card-border-dark, color-mix(in srgb, var(--umber-2) 30%, transparent));
--pres-border-soft: color-mix(in srgb, var(--umber-2) 14%, transparent);
--pres-muted: var(--ink-muted, var(--taupe-4));
--pres-text: var(--ink, var(--umber));
--pres-orange: var(--gold);
--pres-row: color-mix(in srgb, var(--cream-18) 50%, transparent);
width: min(760px, 94vw); max-height: 88vh; display: flex; flex-direction: column; background: var(--pres-panel-solid); border: 1px solid var(--pres-border); border-radius: var(--r-card); box-shadow: 0 24px 70px rgba(0,0,0,0.5); overflow: hidden;
}
.pres-cs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 10px; }
.pres-cs-x { flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--r-sm); border: 1px solid var(--pres-border-soft); background: color-mix(in srgb, var(--mix-light) 50%, transparent); color: var(--pres-muted); font-size: var(--fs-18); line-height: 1; cursor: pointer; }
.pres-cs-x:hover { color: var(--pres-orange); border-color: var(--pres-orange); }
.pres-cs-controls { display: flex; flex-wrap: wrap; gap: 14px 22px; padding: 4px 18px 8px; }
.pres-cs-ctl { display: flex; flex-direction: column; gap: 5px; }
.pres-cs-lbl { font-size: var(--fs-10); letter-spacing: var(--track-12); text-transform: uppercase; color: var(--pres-muted); font-weight: var(--fw-heavy); }
.pres-cs-select { font: inherit; font-size: var(--fs-13); padding: 7px 10px; min-width: 220px; border-radius: var(--r-sm); border: 1px solid var(--pres-border); background: color-mix(in srgb, var(--mix-light) 65%, transparent); color: var(--pres-text, inherit); cursor: pointer; }
.pres-cs-counts { display: flex; gap: 5px; }
.pres-cs-count { width: 34px; height: 34px; border-radius: var(--r-sm); font: inherit; font-weight: var(--fw-bold); cursor: pointer; border: 1px solid var(--pres-border); background: color-mix(in srgb, var(--mix-light) 55%, transparent); color: var(--pres-muted); transition: background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease; }
.pres-cs-count:hover:not(:disabled) { border-color: var(--pres-orange); color: var(--pres-orange); }
.pres-cs-count.is-on { background: var(--pres-orange); border-color: var(--pres-orange); color: var(--white); }
.pres-cs-count:disabled { opacity: 0.4; cursor: not-allowed; }
.pres-cs-hint { padding: 2px 18px 10px; font-size: var(--fs-11-5); color: var(--pres-muted); }
.pres-cs-grid { flex: 1 1 auto; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; padding: 4px 18px 12px; align-content: start; }
.pres-cs-empty { grid-column: 1 / -1; text-align: center; color: var(--pres-muted); font-size: var(--fs-12); padding: 30px 0; }
.pres-cs-shot { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 0; border: 2px solid transparent; border-radius: var(--r-9); background: none; cursor: pointer; font: inherit; text-align: left; }
.pres-cs-shot-thumb { display: block; width: 100%; aspect-ratio: 16/9; border-radius: var(--r-7); object-fit: cover; background-color: var(--pres-row); border: 1px solid var(--pres-border-soft); }
.pres-cs-shot-id { display: flex; align-items: center; gap: 3px; font-size: var(--fs-10-5); font-weight: var(--fw-bold); color: var(--pres-muted); padding-left: 2px; }
.pres-cs-star { color: var(--gold-5); }
.pres-cs-shot.is-cand .pres-cs-shot-thumb { border-color: color-mix(in srgb, var(--gold-5) 60%, transparent); }
.pres-cs-shot.is-on { border-color: var(--pres-orange); }
.pres-cs-shot.is-on .pres-cs-shot-id { color: var(--pres-orange); }
.pres-cs-shot-num { position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--pres-orange); color: var(--white); font-size: var(--fs-11); font-weight: var(--fw-heavy); display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,0.35); }
.pres-cs-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 18px; border-top: 1px solid var(--pres-border-soft); background: color-mix(in srgb, var(--mix-light) 28%, transparent); }
.pres-cs-count-txt { font-size: var(--fs-12); color: var(--pres-muted); font-weight: var(--fw-semi); }
.pres-cs-foot-btns { display: flex; gap: 8px; }
.pres-cs-save { font: inherit; font-size: var(--fs-13); font-weight: var(--fw-bold); padding: 9px 18px; border-radius: var(--r-9); cursor: pointer; border: 1px solid var(--pres-orange); background: var(--pres-orange); color: var(--white); transition: filter var(--dur-1) ease, opacity var(--dur-1) ease; }
.pres-cs-save:hover:not(:disabled) { filter: brightness(1.06); }
.pres-cs-save:disabled { opacity: 0.45; cursor: not-allowed; }
/* Retake / Outfit picker — asset-type segmented tabs (reuses .pres-cs-modal). */
.pres-as-tabs { display: flex; gap: 5px; }
.pres-as-tab { font: inherit; font-size: var(--fs-12); font-weight: var(--fw-semi); padding: 7px 12px; border-radius: var(--r-sm); cursor: pointer; border: 1px solid var(--pres-border); background: color-mix(in srgb, var(--mix-light) 55%, transparent); color: var(--pres-muted); transition: background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease; }
.pres-as-tab:hover { border-color: var(--pres-orange); color: var(--pres-orange); }
.pres-as-tab.is-on { background: var(--pres-orange); border-color: var(--pres-orange); color: var(--white); }
/* ── Review & Comment mode (v07zz244) ───────────────────── */
/* Toggle button — orange outline, fills solid when active. */
.pres-btn--review { color: var(--pres-orange, var(--gold)); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.pres-btn--review:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); }
.pres-btn--review.is-on { background: var(--pres-orange, var(--gold)); border-color: var(--pres-orange, var(--gold)); color: var(--white); }
/* Hint bar above the preview while reviewing. */
.pres-reviewbar { display: flex; align-items: center; gap: 9px; margin: 4px 0 2px; padding: 9px 13px; border-radius: var(--r-panel);
background: color-mix(in srgb, var(--gold) 10%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent); color: var(--pres-text, var(--ink-umber)); font-size: var(--fs-12-5); font-weight: var(--fw-semi); }
.pres-reviewbar svg { flex: 0 0 auto; color: var(--pres-orange, var(--gold)); }
/* Review slides: locked (no select cursor, no editing chrome). */
.pres-preview--review .pres-slide { cursor: default; }
.pres-slide--review { box-shadow: 0 6px 22px rgba(20,15,5,0.16); }
/* Image cells become clickable comment targets. */
.pres-preview--review .ps-grid-cell--review { cursor: pointer; }
.pres-preview--review .ps-grid-cell--review.is-nolink { cursor: default; }
.pres-preview--review .ps-grid-cell--review::after {
content: ""; position: absolute; inset: 0; border-radius: inherit;
box-shadow: inset 0 0 0 var(--ring-w) color-mix(in srgb, var(--gold) 0%, transparent); background: color-mix(in srgb, var(--gold) 0%, transparent);
transition: box-shadow var(--dur-1) ease, background var(--dur-1) ease; pointer-events: none;
}
.pres-preview--review .ps-grid-cell--review:not(.is-nolink):hover::after {
box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--gold) 92%, transparent); background: color-mix(in srgb, var(--gold) 10%, transparent);
}
/* a little speech-bubble badge appears on hover so the affordance is obvious */
.pres-preview--review .ps-grid-cell--review:not(.is-nolink)::before {
content: ""; position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; z-index: 2;
border-radius: 6px 6px 6px 2px; background: var(--pres-orange, var(--gold)); opacity: 0;
box-shadow: 0 2px 6px rgba(0,0,0,0.3); transition: opacity var(--dur-1) ease; pointer-events: none;
}
.pres-preview--review .ps-grid-cell--review:not(.is-nolink):hover::before { opacity: 0.95; }
/* (v07zz2xx — the old .pres-review-* modal composer was removed: the deck review
viewer is now an inline two-column layout with a persistent right-hand comment
drawer, styled below under .pdv-*. presReviewFade is kept for any reuse.) */
@keyframes presReviewFade { from { opacity: 0; } to { opacity: 1; } }
/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
.presentations-view { height: auto; }
.presentations-view .pres-grid { grid-template-columns: 1fr; }
.pres-colwrap { height: auto; }
.pres-panel { flex: 0 0 auto; max-height: 80vh; }
}
/* ── Deck Review viewer (v07zz2xx) — laid out like the Edits review: a cream MAIN
panel showing the whole locked deck (scrolls) + a persistent RIGHT-HAND comment
drawer. Renders INLINE in the Review page (not a modal). Reuses the shared slide
markup (.pres-slide/.ps-*) and the .review-detail/.review-side shells. ──────── */
/* Cap the whole detail to the space below the project banner + tabs so the OUTER
page never scrolls — only the deck panel + comment list scroll internally. flex
fills the body to whatever's left after the header, so it adapts to any chrome
height instead of guessing a fixed body height. */
.pdv-detail { display: flex; flex-direction: column; gap: 14px; height: calc(100vh - 285px); min-height: 360px; }
.pdv-detail-body { flex: 1 1 0; min-height: 0; }
.pdv-stage-col {
display: flex; flex-direction: column; min-width: 0; position: relative;
background: color-mix(in srgb, var(--cream) 55%, transparent); border: 1px solid var(--card-border);
border-radius: var(--r-card); overflow: hidden;
}
/* v07zz267 — deck loads behind a spinner, then the whole deck fades in once every
image is preloaded (no slide-by-slide / image-by-image pop-in). */
/* v07zz287 — the loader is now OPAQUE (was rgba 0.55 translucent). The flicker
on load was a cross-fade WASH: while the translucent loader faded out (360ms)
the slides were faded in (450ms) UNDER it, so for a moment you saw half-faded
slides THROUGH a half-faded cream veil = a brightness flash. With an opaque
loader covering the stage until every image is preloaded, the slides are drawn
at full opacity behind it (no fade), then ONLY the loader fades away → one
clean reveal, no flash. */
.pdv-loader { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--pres-muted); font-size: var(--fs-12-5); letter-spacing: var(--track-02); background: var(--card-bg-solid, color-mix(in srgb, var(--card-border) 40%, var(--mix-light))); opacity: 1; transition: opacity 360ms ease; pointer-events: none; }
.pdv-loader.is-hidden { opacity: 0; }
.pdv-loader-spin { width: 30px; height: 30px; border: 3px solid color-mix(in srgb, var(--gold) 22%, transparent); border-top-color: var(--gold); border-radius: 50%; animation: pdvspin 0.7s linear infinite; }
@keyframes pdvspin { to { transform: rotate(360deg); } }
/* slides render at full opacity immediately (behind the opaque loader) — no
second fade to cross with the loader's. */
.pdv-slides-fade { display: flex; flex-direction: column; gap: 14px; align-items: stretch; opacity: 1; }
.pdv-slides-fade.is-ready { opacity: 1; }
.pdv-slides-scroll {
flex: 1 1 0; min-height: 0; overflow-y: auto; scrollbar-gutter: stable;
padding: 12px; display: flex; flex-direction: column; gap: 14px; align-items: stretch;
}
/* slides fill the full width of the main panel (no max-width cap, no centering gap) */
.pdv-slide {
width: 100%; aspect-ratio: 16 / 9; flex: 0 0 auto; margin: 0;
border-radius: var(--r-panel); box-shadow: 0 8px 22px color-mix(in srgb, var(--shadow-ink) 22%, transparent); cursor: default;
content-visibility: visible;
}
.pdv-empty { padding: 40px 16px; color: var(--ink-muted, var(--ink-taupe-4)); font-size: var(--fs-13-5); text-align: center; }
.pdv-empty a { color: var(--red-23); font-weight: var(--fw-bold); }
/* every image is clickable in review mode (linked OR unlinked) */
.pdv-slide .ps-grid-cell--review { cursor: pointer; }
/* v07zz288 — review image highlight. A thin gold ring on the OUTSIDE of the
image — following its real corner radius + bounds — plus a soft gold glow, NO
tint over the image, and NO shrink (the old transform:scale band-aid that was
"shrinking the whole frame" is gone). The ring sits on the ACTUAL image element
per layout, so it hugs the picture, never the oversized cell ("not following the
original frame / sometimes wider"): the ![]()
in the labeled grid
(.ps-lblcard-imgel) and the fit grid (.ps-grid-cell-img), and the cell itself in
the cover/fill grid (its background fills the cell edge-to-edge). The selected
cell is lifted above its siblings (z-index) so the neighbouring cell can't paint
over the glow on the shared edge ("glow cut on the sides"), and the review grid
containers don't clip — .pdv-slide itself doesn't clip — so the glow shows on all
four sides. Hover = soft hint; selected = solid ring + glow, persistent (the
:hover variant outranks it only to brighten, never to wash out). */
.pdv-slide .ps-grid-cell--review .ps-lblcard-imgel,
.pdv-slide .ps-grid-cell--review.ps-grid-cell--fit .ps-grid-cell-img,
.pdv-slide .ps-grid-cell--review.ps-grid-cell:not(.ps-grid-cell--fit) { transition: box-shadow 130ms ease; }
.pdv-slide .ps-grid-cell--review:hover .ps-lblcard-imgel,
.pdv-slide .ps-grid-cell--review.ps-grid-cell--fit:hover .ps-grid-cell-img,
.pdv-slide .ps-grid-cell--review.ps-grid-cell:not(.ps-grid-cell--fit):hover { box-shadow: 0 0 0 var(--ring-w) color-mix(in srgb, var(--gold) 50%, transparent); }
.pdv-slide .ps-grid-cell--review.is-selected { position: relative; z-index: 5; }
.pdv-slide .ps-grid-cell--review.is-selected .ps-lblcard-imgel,
.pdv-slide .ps-grid-cell--review.is-selected.ps-grid-cell--fit .ps-grid-cell-img,
.pdv-slide .ps-grid-cell--review.is-selected.ps-grid-cell:not(.ps-grid-cell--fit) { box-shadow: 0 0 0 var(--ring-w) var(--gold), 0 0 13px 2px color-mix(in srgb, var(--gold) 50%, transparent); }
.pdv-slide .ps-grid-cell--review.is-selected:hover .ps-lblcard-imgel,
.pdv-slide .ps-grid-cell--review.is-selected:hover.ps-grid-cell--fit .ps-grid-cell-img,
.pdv-slide .ps-grid-cell--review.is-selected:hover.ps-grid-cell:not(.ps-grid-cell--fit) { box-shadow: 0 0 0 var(--ring-w) var(--gold), 0 0 16px 3px color-mix(in srgb, var(--gold) 55%, transparent); }
/* v07zz291 — HOVERING a note in the drawer rings its image with the SAME gold ring
but NO glow (a quiet "this is the one" preview); CLICKING it selects → the glow
appears (the is-selected rules above). is-hovered never co-occurs with is-selected
(the renderer drops it when selected), so they never fight. */
.pdv-slide .ps-grid-cell--review.is-hovered { position: relative; z-index: 4; }
.pdv-slide .ps-grid-cell--review.is-hovered .ps-lblcard-imgel,
.pdv-slide .ps-grid-cell--review.is-hovered.ps-grid-cell--fit .ps-grid-cell-img,
.pdv-slide .ps-grid-cell--review.is-hovered.ps-grid-cell:not(.ps-grid-cell--fit) { box-shadow: 0 0 0 var(--ring-w) color-mix(in srgb, var(--gold) 95%, transparent); }
/* the inner grid clips (.ps-grid has overflow:hidden + a 12px inset) would crop the
ring/glow; the deck slide doesn't clip, so let the glow breathe on every side. */
.pdv-slide .ps-grid, .pdv-slide .ps-grid-row, .pdv-slide .ps-lblgrid,
.pdv-slide .ps-lblcard, .pdv-slide .ps-lblcard-img { overflow: visible; }
/* per-image comment-count badge */
.pdv-cbadge { position: absolute; top: 6px; right: 6px; z-index: 3; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-9);
background: var(--gold); color: var(--white); font-size: var(--fs-11); font-weight: var(--fw-heavy); line-height: 18px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,0.35); pointer-events: none; }
/* hover ⤢ button → opens the image full screen (assets Lightbox) */
.pdv-slide .ps-grid-zoom { position: absolute; top: 8px; left: 8px; z-index: 4; width: 30px; height: 30px; border: 0; border-radius: var(--r-sm); background: color-mix(in srgb, var(--shade-10) 60%, transparent); color: var(--white); font-size: var(--fs-15); line-height: 1; cursor: pointer; opacity: 0; display: grid; place-items: center; transition: opacity var(--dur-1) ease, background var(--dur-1) ease; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.pdv-slide .ps-grid-cell:hover .ps-grid-zoom { opacity: 1; }
.pdv-slide .ps-grid-zoom:hover { background: color-mix(in srgb, var(--shade-10) 86%, transparent); }
/* Right-hand comment drawer (reuses the .review-side shell) */
.pdv-side { min-height: 0; }
.pdv-cmt-empty { font-size: var(--fs-12-5); color: var(--ink-muted); padding: 16px 6px; text-align: center; line-height: 1.5; }
.pdv-cmt { display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left; padding: 8px; border: 1px solid var(--card-border); border-radius: var(--r-9); background: color-mix(in srgb, var(--cream-18) 60%, transparent); cursor: pointer; font: inherit; margin-bottom: 8px; transition: border-color var(--dur-1) ease, background var(--dur-1) ease; }
.pdv-cmt:hover { border-color: color-mix(in srgb, var(--gold-deep) 55%, transparent); background: var(--mix-light); }
.pdv-cmt.is-active { border-color: color-mix(in srgb, var(--gold) 70%, transparent); background: color-mix(in srgb, var(--hi-3) 40%, transparent); }
/* contain (not cover) so the thumbnail keeps the image's real aspect ratio
instead of cropping it. Letterboxed inside a fixed box so the list stays tidy. */
.pdv-cmt-thumb { flex: 0 0 auto; width: 56px; height: 38px; border-radius: 5px; background-size: contain; background-repeat: no-repeat; background-position: center; background-color: color-mix(in srgb, var(--ink-muted) 16%, transparent); }
.pdv-cmt-thumb.is-none { background: color-mix(in srgb, var(--ink-muted) 12%, transparent); }
.pdv-cmt-main { flex: 1 1 0; min-width: 0; }
.pdv-cmt-text { font-size: var(--fs-12-5); line-height: 1.4; color: var(--ink); word-break: break-word; white-space: pre-wrap; }
.pdv-cmt-meta { font-size: var(--fs-10-5); color: var(--ink-muted); margin-top: 3px; }
/* v07zz266 — per-comment edit/delete actions (hover-reveal, top-right; absolute so
no layout shift). Inline Delete? Yes/No confirm — no native confirm dialog. */
/* v965 — the note text is SELECTABLE (Hugo: "why cant i copy notes from the
presentations??"): the row is a button, so without this the text could not be
dragged over. The row click now ignores a click that ends a selection. */
.pdv-cmt-text { -webkit-user-select: text; user-select: text; cursor: text; }
.pdv-cmt-copywrap { position: absolute; top: 6px; right: 8px; opacity: 0; transition: opacity var(--dur-1) ease; }
.pdv-cmt:hover .pdv-cmt-copywrap, .pdv-cmt-copywrap:focus-within { opacity: 1; }
.pdv-cmt-copy { font-size: var(--fs-10-5); }
/* owner rows already carry Edit/Delete at top-right, so Copy sits to their left */
.pdv-cmt-copywrap--owner { right: 62px; }
.pdv-cmt { position: relative; }
.pdv-cmt-actions { position: absolute; top: 5px; right: 5px; display: flex; gap: 4px; align-items: center; opacity: 0; transition: opacity var(--dur-1) ease; }
.pdv-cmt:hover .pdv-cmt-actions, .pdv-cmt.is-editing .pdv-cmt-actions { opacity: 1; }
.pdv-cmt-act { font: inherit; font-size: var(--fs-11); font-weight: var(--fw-semi); line-height: 1; padding: 4px 7px; border-radius: var(--r-xs); border: 1px solid var(--card-border); background: color-mix(in srgb, var(--mix-light) 92%, transparent); color: var(--ink-muted); cursor: pointer; }
.pdv-cmt-act:hover { color: var(--ink); border-color: color-mix(in srgb, var(--gold-deep) 55%, transparent); }
.pdv-cmt-act.is-danger { color: var(--red-14); border-color: color-mix(in srgb, var(--red-14) 40%, transparent); }
.pdv-cmt-act.is-danger:hover { background: var(--red-14); color: var(--white); border-color: var(--red-14); }
.pdv-cmt-act.is-go { color: color-mix(in srgb, var(--olive-7) 90%, var(--mix-dark)); border-color: color-mix(in srgb, color-mix(in srgb, var(--olive-7) 90%, var(--mix-dark)) 45%, transparent); }
.pdv-cmt-act.is-go:hover { background: var(--gold); color: var(--white); border-color: var(--gold); }
/* v07zz426 — threaded replies: a top-level comment + its indented reply list, plus a per-comment
Reply button (always visible for discoverability) and the "Replying to …" bar over the composer. */
.pdv-cmt-thread { margin-bottom: 8px; }
.pdv-cmt-thread .pdv-cmt { margin-bottom: 6px; }
.pdv-cmt-replies { margin: 0 0 0 24px; padding-left: 11px; border-left: 2px solid color-mix(in srgb, var(--gold) 35%, transparent); display: flex; flex-direction: column; }
.pdv-cmt--reply { padding: 6px 8px; background: color-mix(in srgb, var(--cream-18) 42%, transparent); }
.pdv-cmt-reply { display: inline-block; margin-left: 9px; font: inherit; font-size: var(--fs-10); font-weight: var(--fw-bold); letter-spacing: var(--track-03); text-transform: uppercase; color: var(--ink-muted); background: none; border: none; padding: 0; cursor: pointer; opacity: 0.7; transition: opacity var(--dur-1) ease, color var(--dur-1) ease; vertical-align: baseline; }
.pdv-cmt-reply:hover { opacity: 1; color: var(--gold); text-decoration: underline; }
.pdv-replybar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 10px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--gold) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); font-size: var(--fs-11); color: var(--ink); }
.pdv-replybar-txt { font-weight: var(--fw-semi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdv-replybar-x { flex: 0 0 auto; font: inherit; font-size: var(--fs-12); line-height: 1; border: none; background: none; color: var(--ink-muted); cursor: pointer; padding: 2px 4px; }
.pdv-replybar-x:hover { color: var(--ink); }
.pdv-cmt-confirm { font-size: var(--fs-11); font-weight: var(--fw-bold); color: var(--red-14); }
.pdv-cmt-editinput { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--fs-12-5); line-height: 1.4; color: var(--ink); border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); border-radius: var(--r-xs); padding: 5px 7px; resize: vertical; background: var(--mix-light); }
.pdv-composer { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-top: 1px solid color-mix(in srgb, var(--tan-deep) 18%, transparent); background: color-mix(in srgb, var(--cream) 50%, transparent); }
.pdv-composer-input { resize: none; font: inherit; font-size: var(--fs-13); line-height: 1.4; min-height: 44px; max-height: 130px; padding: 9px 11px; border: 1px solid var(--card-border); border-radius: var(--r-panel); background: color-mix(in srgb, var(--mix-light) 80%, transparent); color: var(--ink); outline: none; }
.pdv-composer-input:focus { border-color: color-mix(in srgb, var(--gold) 70%, transparent); }
.pdv-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pdv-composer-hint { font-size: var(--fs-10-5); color: var(--ink-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdv-composer-send { flex: 0 0 auto; font: inherit; font-size: var(--fs-13); font-weight: var(--fw-bold); padding: 8px 16px; border-radius: var(--r-9); cursor: pointer; border: 1px solid var(--gold); background: var(--gold); color: var(--white); transition: filter var(--dur-1) ease, opacity var(--dur-1) ease; }
.pdv-composer-send:hover:not(:disabled) { filter: brightness(1.06); }
.pdv-composer-send:disabled { opacity: 0.45; cursor: not-allowed; }
.pdv-composer-input:disabled { opacity: 0.7; cursor: default; background: color-mix(in srgb, var(--mix-light) 50%, transparent); }
/* ── Image lightbox (zoom + drag-pan) with the comment box inside ─────────────── */
.pdv-lb-backdrop { position: fixed; inset: 0; z-index: var(--z-deck-lightbox); background: color-mix(in srgb, var(--shade-30) 88%, transparent); display: flex; align-items: center; justify-content: center; padding: 22px; animation: presReviewFade var(--dur-1) ease; }
.pdv-lb { width: min(1500px, 100%); height: min(92vh, 100%); display: flex; position: relative; background: var(--card-bg-solid); border: 1px solid var(--card-border-dark, color-mix(in srgb, var(--umber-2) 30%, transparent)); border-radius: var(--r-card); overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,0.55); }
.pdv-lb-x { position: absolute; top: 10px; right: 12px; z-index: 6; width: 34px; height: 34px; border: 0; border-radius: var(--r-9); background: color-mix(in srgb, var(--shade-10) 55%, transparent); color: var(--white); font-size: var(--fs-22); line-height: 1; cursor: pointer; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.pdv-lb-x:hover { background: color-mix(in srgb, var(--shade-10) 80%, transparent); }
.pdv-lb-stage { flex: 1 1 0; min-width: 0; background: var(--shade-65); display: grid; place-items: center; overflow: hidden; cursor: zoom-in; }
.pdv-lb-stage.is-zoomed { cursor: grab; }
.pdv-lb-stage.is-zoomed:active { cursor: grabbing; }
.pdv-lb-img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center center; transition: transform 90ms ease; will-change: transform; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.pdv-lb-panel { flex: 0 0 340px; display: flex; flex-direction: column; min-height: 0; background: color-mix(in srgb, var(--cream) 62%, transparent); border-left: 1px solid var(--card-border); }
.pdv-lb-head { flex: 0 0 auto; padding: 14px 16px 10px; border-bottom: 1px solid color-mix(in srgb, var(--tan-deep) 16%, transparent); }
.pdv-lb-eyebrow { font-size: var(--fs-10); font-weight: var(--fw-heavy); letter-spacing: var(--track-16); text-transform: uppercase; color: var(--red-23); }
.pdv-lb-title { font-family: var(--font-display, "Bebas Neue"), sans-serif; font-size: var(--fs-20); color: var(--ink); line-height: 1.1; margin-top: 2px; }
.pdv-lb-comments { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.pdv-lbc { background: color-mix(in srgb, var(--cream-18) 70%, transparent); border: 1px solid var(--card-border); border-radius: var(--r-9); padding: 8px 10px; }
.pdv-lbc-body { font-size: var(--fs-12-5); line-height: 1.45; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.pdv-lbc-meta { font-size: var(--fs-10-5); color: var(--ink-muted); margin-top: 4px; }
.pdv-lb-composer { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-top: 1px solid color-mix(in srgb, var(--tan-deep) 16%, transparent); background: color-mix(in srgb, var(--cream) 50%, transparent); }
@media (max-width: 900px) {
.pdv-lb { flex-direction: column; height: 100%; }
.pdv-lb-panel { flex: 0 0 42%; border-left: 0; border-top: 1px solid var(--card-border); }
}
@media (max-width: 1000px) {
.pdv-detail-body { display: flex; flex-direction: column; height: auto; }
.pdv-stage-col { height: 60vh; }
.pdv-side { max-height: 52vh; }
}
/* v07zz264 — instant big hover preview for picker thumbnails (imperative; one
fixed layer moved/pointed by hoverBind in PresentationsPage). */
.pres-hoverprev {
position: fixed; z-index: var(--z-dialog); transform: translateY(-50%);
width: max-content; pointer-events: none; /* height set inline per-hover → same height for every aspect */
border-radius: var(--r-md); overflow: hidden; background: var(--ied-bg);
border: 2px solid color-mix(in srgb, var(--white) 90%, transparent);
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}
.pres-hoverprev img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; }
/* v07zz267 — MUCH clearer "selected" state on picker thumbnails (Hugo: "I can
barely see it"). Bold gold ring + glow + a check/number badge everywhere. */
.pres-cs-shot.is-on { border-color: transparent; }
.pres-cs-shot.is-on .pres-cs-shot-thumb {
border-color: var(--pres-orange);
box-shadow: 0 0 0 3px var(--pres-orange), 0 4px 16px color-mix(in srgb, var(--gold) 55%, transparent);
}
.pres-cs-shot:not(.is-on) .pres-cs-shot-thumb { opacity: 0.66; }
.pres-cs-shot:hover .pres-cs-shot-thumb { opacity: 1; }
.pres-cs-shot-num { width: 24px; height: 24px; font-size: var(--fs-12); border: 2px solid var(--white); }
/* v07zz406 — Sequence Shots picker: each tile is selectable (include/exclude)
and exposes a "Frames" affordance that expands a horizontal frame-version
strip inline beneath the tile. Reuses the .pres-cs-* look. */
.pres-seq-shot { cursor: default; }
.pres-seq-shot-pick {
position: relative; display: block; width: 100%; padding: 0;
border: none; background: none; cursor: pointer; border-radius: var(--r-7);
}
.pres-seq-shot .pres-cs-shot-thumb { transition: opacity var(--dur-1) ease, border-color var(--dur-1) ease, box-shadow var(--dur-1) ease; }
.pres-seq-shot:not(.is-on) .pres-cs-shot-thumb { opacity: 0.5; border-color: var(--pres-border-soft); box-shadow: none; }
.pres-seq-shot.is-on .pres-cs-shot-thumb { border-color: var(--pres-orange); box-shadow: 0 0 0 var(--ring-w) var(--pres-orange); }
.pres-seq-shot-pick:hover .pres-cs-shot-thumb { opacity: 1; }
/* include/exclude tick — top-left corner, like the Character picker's number badge */
.pres-seq-check {
position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; border-radius: 50%;
display: grid; place-items: center; font-size: var(--fs-12); font-weight: var(--fw-heavy); line-height: 1;
border: 2px solid var(--white); box-shadow: 0 1px 4px rgba(0,0,0,0.35);
background: color-mix(in srgb, var(--ink) 45%, transparent); color: transparent;
}
.pres-seq-check.is-on { background: var(--pres-orange); color: var(--white); }
.pres-seq-shot-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 2px 0; }
.pres-seq-framesbtn {
font: inherit; font-size: var(--fs-10); font-weight: var(--fw-bold); letter-spacing: var(--track-03);
padding: 2px 8px; border-radius: var(--r-xs); cursor: pointer;
border: 1px solid var(--pres-border); background: color-mix(in srgb, var(--mix-light) 60%, transparent); color: var(--pres-muted);
transition: background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.pres-seq-framesbtn:hover { background: color-mix(in srgb, var(--mix-light) 95%, transparent); color: var(--pres-ink); }
.pres-seq-framesbtn.is-open { background: var(--pres-orange); color: var(--white); border-color: var(--pres-orange); }
/* full-width inline frame strip (spans the whole grid row under the tile) */
.pres-seq-frames {
grid-column: 1 / -1;
display: flex; gap: 8px; overflow-x: auto; padding: 8px;
border-radius: var(--r-9); background: color-mix(in srgb, var(--ink) 5%, transparent); border: 1px solid var(--pres-border-soft);
scrollbar-width: thin;
}
.pres-seq-frames-empty { font-size: var(--fs-11-5); color: var(--pres-muted); font-style: italic; padding: 6px 4px; }
.pres-seq-frame {
position: relative; flex: 0 0 auto; width: 132px; padding: 0; cursor: pointer;
border: 2px solid transparent; border-radius: var(--r-sm); background: none;
}
.pres-seq-frame img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--r-xs); background-color: var(--pres-row); }
.pres-seq-frame:hover { border-color: var(--pres-border); }
.pres-seq-frame.is-sel { border-color: var(--pres-orange); box-shadow: 0 0 0 var(--ring-w) var(--pres-orange); }
.pres-seq-frame-lbl {
position: absolute; bottom: 4px; left: 4px; font-size: var(--fs-9); font-weight: var(--fw-bold);
padding: 1px 5px; border-radius: 4px; background: color-mix(in srgb, var(--shade-33) 72%, transparent); color: var(--white);
}
/* Select all / none control on the right of the Sequence dropdown row */
.pres-cs-ctl--end { margin-left: auto; align-self: flex-end; }
.pres-cs-allbtn {
font: inherit; font-size: var(--fs-11); font-weight: var(--fw-bold); padding: 7px 12px; border-radius: var(--r-sm); cursor: pointer;
border: 1px solid var(--pres-border); background: color-mix(in srgb, var(--mix-light) 60%, transparent); color: var(--pres-muted);
transition: background var(--dur-1) ease, color var(--dur-1) ease;
}
.pres-cs-allbtn:hover { background: color-mix(in srgb, var(--mix-light) 95%, transparent); color: var(--pres-ink); }
.pres-srow-img.is-sel { border-color: var(--pres-orange); box-shadow: 0 0 0 var(--ring-w) var(--pres-orange); position: relative; }
.pres-srow-img.is-sel::after {
content: "✓"; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 4px;
background: var(--pres-orange); color: var(--white); font-size: var(--fs-11); font-weight: var(--fw-heavy); line-height: 16px; text-align: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); z-index: 2;
}
.pres-refthumb.is-on { border-color: var(--pres-orange); box-shadow: 0 0 0 var(--ring-w) var(--pres-orange); }
.pres-refthumb-check { width: 18px; height: 18px; font-size: var(--fs-11); }
/* v07zz268 — pick-modal hint row + one-click "clear picks (keep 1)". */
.pres-cs-hintrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 18px; }
.pres-cs-clearpicks {
flex: 0 0 auto; font: inherit; font-size: var(--fs-11); font-weight: var(--fw-semi); padding: 4px 10px; border-radius: var(--r-7);
cursor: pointer; white-space: nowrap; border: 1px solid color-mix(in srgb, var(--danger-soft) 50%, transparent); background: color-mix(in srgb, var(--danger-soft) 10%, transparent); color: var(--amber);
}
.pres-cs-clearpicks:hover { background: color-mix(in srgb, var(--danger-soft) 20%, transparent); }
.pres-cs-hintrow .pres-cs-hint { flex: 1 1 auto; padding: 0; }
/* v07zz270 — Promoted / WIP / All image filter (asset picker modal + row drawer). */
.pres-imgfilter { display: inline-flex; flex: 0 0 auto; gap: 0; border: 1px solid var(--pres-border); border-radius: var(--r-sm); overflow: hidden; background: color-mix(in srgb, var(--mix-light) 55%, transparent); }
.pres-imgfilter-btn {
font: inherit; font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--track-02); padding: 5px 11px; cursor: pointer;
border: none; border-right: 1px solid var(--pres-border); background: transparent; color: var(--pres-muted);
transition: background var(--dur-1) ease, color var(--dur-1) ease;
}
.pres-imgfilter-btn:last-child { border-right: none; }
.pres-imgfilter-btn:hover { background: color-mix(in srgb, var(--black) 5%, transparent); }
.pres-imgfilter-btn.is-on { background: var(--pres-orange); color: var(--white); }
/* Row-drawer header: the Promoted/WIP/All toggle + "Clear picks" on one full-width
line above the thumbnails (the drawer is flex-wrap, so 100% basis breaks the row). */
.pres-srow-drawerhead { flex: 0 0 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 6px; }
.pres-srow-drawerhead .pres-imgfilter { flex: 0 0 auto; }
/* ── v07zz479 — admin "Replace image" picker in the deck review viewer ───────
Opened from the composer's ⇄ button when an image is selected. Reuses the
.confirm-delete-* backdrop/modal shell; these classes style the body. */
.pdv-swap-modal { width: min(720px, 92vw); max-height: 82vh; display: flex; flex-direction: column; gap: 10px; }
.pdv-swap-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pdv-swap-title { font-family: var(--font-display, "Bebas Neue", sans-serif); font-size: var(--fs-20); letter-spacing: var(--track-04); }
.pdv-swap-current { display: flex; align-items: center; gap: 12px; }
.pdv-swap-thumb { flex: 0 0 96px; height: 60px; border-radius: var(--r-xs); background: #222 center/cover no-repeat; box-shadow: 0 0 0 var(--hairline-w) rgba(0,0,0,.18); }
.pdv-swap-cursub { font-size: var(--fs-12); opacity: .7; line-height: 1.4; }
.pdv-swap-search { display: flex; gap: 8px; }
.pdv-swap-input { flex: 1 1 auto; padding: 7px 10px; border-radius: var(--r-7); border: 1px solid color-mix(in srgb, var(--black) 18%, transparent); background: color-mix(in srgb, var(--mix-light) 75%, transparent); font: inherit; font-size: var(--fs-13); }
.pdv-swap-err { font-size: var(--fs-12); color: var(--red-12); }
.pdv-swap-grid { flex: 1 1 auto; min-height: 120px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; padding: 2px; }
.pdv-swap-empty { grid-column: 1 / -1; font-size: var(--fs-12); opacity: .65; padding: 18px 4px; text-align: center; }
.pdv-swap-cell { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; border-radius: var(--r-7); }
.pdv-swap-cell:disabled { opacity: .5; cursor: default; }
.pdv-swap-cellimg { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-xs); background: #1d221b center/cover no-repeat; box-shadow: 0 0 0 var(--hairline-w) rgba(0,0,0,.15); transition: box-shadow var(--dur-1) ease; }
.pdv-swap-cell:hover .pdv-swap-cellimg { box-shadow: 0 0 0 var(--ring-w) var(--gold-17); }
.pdv-swap-celllabel { font-size: var(--fs-11); opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdv-swap-open { margin-right: 6px; }