/**
* LAOUTS · Velvet Plum theme · v1.0
*
* Final brand identity locked 2026-05-05.
* • Cinematic dark plum base with single coral peach accent
* • Type system: Fraunces (display only, italic emphasis at 22px+)
* · Inter (wordmark + body) · JetBrains Mono (tracked labels)
* • Pinyon Script intentionally NOT loaded — cursive script is dead.
* • Italic only at headline scale (≥22px). Body copy is roman regular.
* • All text 14px minimum.
*
* Ships AFTER ui/laouts-ui.css and REPLACES laouts-dark-matcha-theme.css.
*
* Brand mark lives in /ui/brand/laouts-mark.svg (cream + coral on dark)
* and /ui/brand/laouts-mark-on-cream.svg (plum + coral on cream).
* Favicon lives in /ui/brand/laouts-favicon.svg (coral square on plum).
*/
/* ──────────────── Brand fonts ────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,ital,wght@9..144,0,200;9..144,0,300;9..144,0,400;9..144,0,500;9..144,0,700;9..144,0,900;9..144,1,200;9..144,1,300;9..144,1,400&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
/* ──────────────── Brand tokens (scoped to body.laouts) ───────── */
body.laouts {
/* Surfaces — Velvet Plum */
--laouts-bg: #1c1119; /* deep cocoa-plum, the canvas */
--laouts-bg-1: #241420; /* raised card baseline */
--laouts-bg-2: #2a1825; /* selected card mid */
--laouts-bg-3: #3a2435; /* selected card upper / divider strong */
/* Card gradients (tactile inner) */
--laouts-card-grad-rest: linear-gradient(165deg, #241420 0%, #1c1019 100%);
--laouts-card-grad-selected: linear-gradient(165deg, #3a2435 0%, #2a1825 100%);
--laouts-card-grad-strip: linear-gradient(165deg, #2a1825 0%, #1c1019 100%);
/* Accent — coral peach, the singular warmth */
--laouts-coral: #e8a585; /* primary accent */
--laouts-coral-deep: #d4856a; /* hover / pressed */
--laouts-coral-soft: #f3c8a8; /* sticker gradient top */
--laouts-coral-glow: rgba(232, 165, 133, 0.18);
--laouts-coral-shadow: rgba(232, 165, 133, 0.28);
/* Type colors */
--laouts-bone: #f3e6dc; /* primary text */
--laouts-bone-soft: #d8b8b5; /* body / description */
--laouts-mauve: #c9a8a8; /* muted */
--laouts-mauve-soft: #a88a8c; /* labels / subtle */
--laouts-taupe: #6a5a55; /* hairline text */
/* Borders & dividers */
--laouts-hairline: #2a1a26;
--laouts-hairline-2: #3a2435;
/* Type families */
--laouts-font-serif: "Fraunces", Georgia, "Times New Roman", serif;
--laouts-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--laouts-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Monaco", monospace;
/* Type scale floors — never go below */
--laouts-text-min: 14px; /* hard floor everywhere */
--laouts-body: 17px;
--laouts-body-large: 18px;
--laouts-italic-min: 22px; /* italic only allowed at this size or larger */
/* Radii */
--laouts-radius-sm: 8px;
--laouts-radius-md: 14px;
--laouts-radius-lg: 18px;
--laouts-radius-pill: 999px;
background: var(--laouts-bg);
color: var(--laouts-bone);
font-family: var(--laouts-font-sans);
font-size: var(--laouts-body);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
/* ──────────────── Brand topbar · the wordmark + L Anagram ───── */
.laoutsBrandTopbar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
align-items: center;
gap: 18px;
padding: 14px 28px;
background: rgba(28, 17, 25, 0.94);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-bottom: 1px solid var(--laouts-hairline);
font-family: var(--laouts-font-sans);
}
/* The custom L Anagram + wordmark + tagline lockup */
.laoutsBrandTopbar__wordmark {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
color: var(--laouts-bone);
}
.laoutsBrandTopbar__mark {
width: 32px;
height: 32px;
flex-shrink: 0;
color: var(--laouts-bone); /* drives currentColor on the L strokes */
}
.laoutsBrandTopbar__lockup {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
line-height: 1;
}
.laoutsBrandTopbar__name {
font-family: var(--laouts-font-sans);
font-weight: 600;
font-size: 16px;
letter-spacing: 0.32em;
color: var(--laouts-bone);
text-transform: uppercase;
}
.laoutsBrandTopbar__name em {
font-style: italic;
color: var(--laouts-coral, #e8a585);
}
.laoutsBrandTopbar__tagline {
font-family: var(--laouts-font-sans);
font-style: italic;
font-weight: 400;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--laouts-mauve-soft);
}
.laoutsBrandTopbar__divider {
width: 1px;
height: 22px;
background: var(--laouts-hairline-2);
}
.laoutsBrandTopbar__crumbs {
display: flex;
align-items: center;
gap: 22px;
font-size: 14px;
color: var(--laouts-mauve);
}
.laoutsBrandTopbar__link {
color: var(--laouts-mauve);
text-decoration: none;
font-size: 14px;
font-weight: 400;
padding: 6px 0;
transition: color 0.15s ease;
}
.laoutsBrandTopbar__link:hover {
color: var(--laouts-bone);
}
.laoutsBrandTopbar__link--accent {
padding: 9px 18px;
background: var(--laouts-coral);
color: var(--laouts-bg);
border-radius: var(--laouts-radius-pill);
font-family: var(--laouts-font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.laoutsBrandTopbar__link--accent:hover {
background: var(--laouts-coral-deep);
color: var(--laouts-bg);
}
.laoutsBrandTopbar__right {
margin-left: auto;
display: flex;
align-items: center;
gap: 18px;
}
.laoutsBrandTopbar__pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: transparent;
border: 1px solid var(--laouts-hairline-2);
border-radius: var(--laouts-radius-pill);
color: var(--laouts-mauve);
font-family: var(--laouts-font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
}
.laoutsBrandTopbar__pillDot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--laouts-coral);
box-shadow: 0 0 6px var(--laouts-coral-shadow);
}
.laoutsBrandTopbar__version {
font-family: var(--laouts-font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--laouts-taupe);
}
.laoutsBrandTopbar__version em {
font-style: normal;
color: var(--laouts-mauve-soft);
}
/* ──────────────── Velvet Plum body offset ───────────────────── */
body.laouts {
padding-top: 60px; /* matches topbar height — keeps content clear of fixed bar */
}
/* ──────────────── Type primitives ───────────────────────────── */
.laoutsHeading {
font-family: var(--laouts-font-serif);
font-weight: 300;
letter-spacing: -0.04em;
line-height: 0.92;
color: var(--laouts-bone);
}
.laoutsHeading em,
.laoutsHeadingItalic {
font-style: italic;
color: var(--laouts-coral);
}
.laoutsLabel {
font-family: var(--laouts-font-mono);
font-weight: 500;
font-size: 14px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--laouts-mauve-soft);
}
.laoutsLabel--accent {
color: var(--laouts-coral);
}
.laoutsBody {
font-family: var(--laouts-font-sans);
font-weight: 400;
font-size: var(--laouts-body);
line-height: 1.55;
color: var(--laouts-bone-soft);
}
.laoutsCaption {
font-family: var(--laouts-font-serif);
font-style: italic;
font-weight: 400;
font-size: var(--laouts-italic-min); /* 22px floor for italic */
line-height: 1.5;
color: var(--laouts-mauve);
}
/* ──────────────── Card system · 18px corners + tactile gradient ── */
.laoutsCard {
background: var(--laouts-card-grad-rest);
border: 1px solid var(--laouts-hairline-2);
border-radius: var(--laouts-radius-lg);
padding: 26px 24px 24px;
color: var(--laouts-bone);
box-shadow: 0 14px 28px rgba(20, 8, 18, 0.4);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.laoutsCard--selected {
background: var(--laouts-card-grad-selected);
border-color: var(--laouts-coral);
box-shadow:
0 0 0 4px var(--laouts-coral-glow),
0 24px 40px rgba(20, 8, 18, 0.45);
transform: translateY(-3px);
}
/* ──────────────── Buttons · pill + hard CTA ─────────────────── */
.laoutsBtn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 22px 30px;
background: var(--laouts-coral);
color: var(--laouts-bg);
border: 0;
border-radius: var(--laouts-radius-pill);
font-family: var(--laouts-font-mono);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 14px 32px var(--laouts-coral-shadow);
transition: filter 0.15s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.laoutsBtn:hover {
filter: brightness(1.06);
transform: translateY(-1px);
}
.laoutsBtn:active {
transform: translateY(0);
}
.laoutsBtn--ghost {
background: transparent;
color: var(--laouts-bone);
border: 1px solid var(--laouts-hairline-2);
box-shadow: none;
}
.laoutsBtn--ghost:hover {
border-color: var(--laouts-coral);
color: var(--laouts-coral);
}
/* ──────────────── Sticker · coral peach gradient badge ─────── */
.laoutsSticker {
display: inline-block;
padding: 11px 20px;
background: linear-gradient(165deg, var(--laouts-coral-soft), var(--laouts-coral));
border: 1px solid rgba(244, 200, 168, 0.6);
border-radius: var(--laouts-radius-md);
font-family: var(--laouts-font-mono);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--laouts-bg);
box-shadow: 0 12px 28px var(--laouts-coral-shadow);
transform: rotate(7deg);
}
/* ──────────────── Strikethrough · coral on plum ─────────────── */
.laoutsStrike {
text-decoration: line-through;
text-decoration-color: var(--laouts-coral);
text-decoration-thickness: 2px;
color: var(--laouts-mauve-soft);
}
/* ──────────────── Footer status strip ───────────────────────── */
.laoutsStatStrip {
display: flex;
align-items: center;
gap: 20px;
padding: 22px 28px;
background: var(--laouts-card-grad-strip);
border: 1px solid var(--laouts-hairline-2);
border-radius: var(--laouts-radius-lg);
color: var(--laouts-bone);
font-family: var(--laouts-font-mono);
font-size: 15px;
letter-spacing: 0.04em;
}
.laoutsStatStrip__moment {
font-family: var(--laouts-font-serif);
font-style: italic;
font-weight: 400;
font-size: 26px;
line-height: 1.05;
color: var(--laouts-coral);
flex-shrink: 0;
}
.laoutsStatStrip__divider {
color: var(--laouts-hairline-2);
}
.laoutsStatStrip__body {
color: var(--laouts-bone-soft);
}
.laoutsStatStrip__body strong {
color: var(--laouts-bone);
font-weight: 500;
}
.laoutsStatStrip__body .laoutsCoralStrong {
color: var(--laouts-coral);
font-weight: 500;
}
.laoutsStatStrip__suffix {
margin-left: auto;
font-family: var(--laouts-font-sans);
font-weight: 500;
font-size: 16px;
color: var(--laouts-coral);
flex-shrink: 0;
}
/* ──────────────── Selection / cull glow utilities ──────────── */
.laoutsCoralGlowDot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--laouts-coral);
box-shadow: 0 0 8px var(--laouts-coral-shadow);
vertical-align: middle;
}
/* ──────────────── Reset legacy theme overrides ─────────────── */
/* Old dark-matcha tokens — kept aliased so legacy class names still
* read coherent values until they're rewritten. After full migration
* these aliases can be deleted. */
body.laouts {
--rc-bg: var(--laouts-bg);
--rc-bg-elev: var(--laouts-bg-1);
--rc-bg-elev-2: var(--laouts-bg-2);
--rc-text: var(--laouts-bone);
--rc-text-soft: var(--laouts-bone-soft);
--rc-text-mute: var(--laouts-mauve-soft);
--rc-accent: var(--laouts-coral);
--rc-accent-soft: var(--laouts-coral-soft);
--rc-accent-glow: var(--laouts-coral-glow);
--rc-hairline: var(--laouts-hairline);
--rc-hairline-2: var(--laouts-hairline-2);
--laouts-acid: var(--laouts-coral);
--laouts-acid-soft: var(--laouts-coral-soft);
--laouts-acid-glow: var(--laouts-coral-glow);
}
/* ──────────────── Italic discipline guard ──────────────────── */
/* Italic body copy below 22px is intentionally disabled — kills any
* residual cursive rendering at body sizes where flowing letterforms
* become hard to read. Authors who need italic at small scale should
* use small caps or a different emphasis (color, weight). */
body.laouts p,
body.laouts span,
body.laouts li,
body.laouts td,
body.laouts li small,
body.laouts label {
font-style: normal;
}
body.laouts em,
body.laouts i {
font-style: italic;
}
/* Author opt-out for the rare italic moment under 22px. */
body.laouts em.laoutsKeepItalic,
body.laouts i.laoutsKeepItalic {
font-style: italic;
}
/* ──────────────── Book picker · welcome-card size + cover ──── */
/* Pre-build size + cover selection — Christina: "they need to be able
* to choose their books and sizes first." Lives inside the welcome-card
* CTA column above the Build my book button. Active option = coral
* border + faint coral wash + cream type. */
.laoutsBookPicker {
margin-bottom: 14px;
padding: 14px 16px;
background: var(--laouts-card-grad-rest);
border: 1px solid var(--laouts-hairline-2);
border-radius: var(--laouts-radius-md);
}
.laoutsBookPicker__lab {
font-family: var(--laouts-font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--laouts-mauve-soft);
margin-bottom: 8px;
}
.laoutsBookPicker__opts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.laoutsBookPicker__opts--two {
grid-template-columns: repeat(2, 1fr);
}
.laoutsBookPicker__opt {
display: flex;
flex-direction: column;
gap: 3px;
padding: 10px 12px;
background: transparent;
color: var(--laouts-mauve);
border: 1px solid var(--laouts-hairline-2);
border-radius: var(--laouts-radius-sm);
font-family: var(--laouts-font-sans);
text-align: left;
cursor: pointer;
transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.laoutsBookPicker__opt:hover {
border-color: var(--laouts-mauve);
color: var(--laouts-bone);
}
.laoutsBookPicker__opt--active {
border-color: var(--laouts-coral);
background: rgba(232, 165, 133, 0.07);
color: var(--laouts-bone);
}
.laoutsBookPicker__optName {
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
}
.laoutsBookPicker__optDim {
font-family: var(--laouts-font-mono);
font-size: 11.5px;
letter-spacing: 0.04em;
color: var(--laouts-mauve-soft);
}
.laoutsBookPicker__opt--active .laoutsBookPicker__optName {
color: var(--laouts-bone);
}
.laoutsBookPicker__opt--active .laoutsBookPicker__optDim {
color: var(--laouts-coral);
}
/* ──────────────── Cull tile group · with Restore action ──── */
/* Each "warn" cull tile (Duplicates / Blurry / Closed eyes) is wrapped in
* a group container so we can stack a small "Restore" button beneath the
* tile. Christina: "users need a dropdown where they can add back to
* library if not labelled correctly." */
body.laouts .laoutsCurateHero__tileGroup {
display: flex;
flex-direction: column;
gap: 6px;
}
body.laouts .laoutsCurateHero__tileRestore {
font-family: var(--laouts-font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: none;
padding: 8px 12px;
background: transparent;
color: var(--laouts-coral);
border: 1px solid var(--laouts-hairline-2);
border-radius: var(--laouts-radius-sm);
cursor: pointer;
transition: border-color 0.15s, color 0.15s, background 0.15s;
}
body.laouts .laoutsCurateHero__tileRestore:hover {
border-color: var(--laouts-coral);
background: rgba(232, 165, 133, 0.08);
color: var(--laouts-bone);
}
/* Inline toast that confirms a restore action */
.laoutsRestoreToast {
position: fixed;
bottom: 28px;
left: 50%;
transform: translateX(-50%) translateY(20px);
z-index: 10000;
padding: 14px 22px;
background: var(--laouts-bg-1);
color: var(--laouts-bone);
border: 1px solid var(--laouts-coral);
border-radius: var(--laouts-radius-pill);
box-shadow: 0 18px 36px rgba(20, 8, 18, 0.5);
font-family: var(--laouts-font-sans);
font-size: 14px;
letter-spacing: 0.02em;
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease, transform 0.22s ease;
}
.laoutsRestoreToast--in {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ──────────────── Magic indicator · unicorn → L Anagram ────── */
/* The previous engine used a 🦄 unicorn glyph as the cull mascot. We
* replaced the unicorn with the L Anagram brand mark. The CSS overrides
* here recolor the icon container, kill the unicorn-specific keyframes,
* and make the SVG mark inherit the brand cream color so it reads on
* any background. */
body.laouts .laoutsMagic__icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex-shrink: 0;
color: var(--laouts-bone);
}
body.laouts .laoutsMagic__mark {
width: 28px;
height: 28px;
display: block;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
animation: laoutsMagicBreathe 2.6s ease-in-out infinite;
}
@keyframes laoutsMagicBreathe {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.85; transform: scale(0.97); }
}
body.laouts .laoutsMagic__sparkle {
position: absolute;
top: -4px;
right: -4px;
font-size: 11px;
color: var(--laouts-coral);
filter: drop-shadow(0 0 6px var(--laouts-coral-shadow));
animation: laoutsMagicTwinkle 1.4s ease-in-out infinite;
}
/* Hide any residual unicorn span that may live in cached HTML. */
body.laouts .laoutsMagic__unicorn {
display: none !important;
}
/* Done state · the celebration moment */
body.laouts .laoutsMagic--done .laoutsMagic__mainTitle {
color: var(--laouts-coral);
}
body.laouts .laoutsMagic--celebrating .laoutsMagic__mark {
animation: laoutsMagicCelebrate 1.4s ease-out;
}
@keyframes laoutsMagicCelebrate {
0% { transform: scale(1) rotate(0deg); }
30% { transform: scale(1.15) rotate(-4deg); }
60% { transform: scale(1.1) rotate(3deg); }
100% { transform: scale(1) rotate(0deg); }
}
/* ──────────────── Engine surface override block ─────────────
*
* The legacy laouts-dark-matcha-theme.css hardcodes acid-lime (#c8e87b /
* #a8c75c) AND Recraft violet (#6366f1 / #8b5cf6 / #a78bfa) into engine
* chrome (smart-text pill, sticky-bar BUILD MY BOOK, active spread
* outline, photo-mover drop targets). This block forces those surfaces
* to coral peach so the Velvet Plum brand is consistent everywhere.
*
* Uses !important strategically to win against the legacy theme's own
* !important rules. Once dark-matcha is fully retired, this block can
* be removed and the source file edited directly. */
/* — Smart Text button — inline pill in the spread action toolbar.
* Christina: relocated from floating position:fixed to inline. */
body.laouts .laoutsSmartTextBtn--inline {
display: inline-flex !important;
align-items: center;
gap: 6px;
padding: 0 14px !important;
height: 32px !important;
background: linear-gradient(135deg, rgba(232, 165, 133, 0.22), rgba(232, 165, 133, 0.10)) !important;
border: 1px solid rgba(232, 165, 133, 0.55) !important;
color: var(--laouts-bone) !important;
font-family: var(--laouts-font-sans) !important;
font-size: 12.5px !important;
font-weight: 500 !important;
letter-spacing: 0.005em !important;
border-radius: 999px !important;
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
z-index: auto !important;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease !important;
}
body.laouts .laoutsSmartTextBtn--inline:hover {
background: linear-gradient(135deg, rgba(232, 165, 133, 0.36), rgba(232, 165, 133, 0.18)) !important;
border-color: var(--laouts-coral) !important;
transform: translateY(-1px);
}
body.laouts .laoutsSmartTextBtn--inline.laoutsSmartTextBtn--clear {
background: rgba(168, 138, 140, 0.18) !important;
border-color: var(--laouts-mauve-soft) !important;
color: var(--laouts-mauve) !important;
}
body.laouts .laoutsSmartTextBtn--inline [data-icon] {
font-size: 12px;
}
/* Legacy floating Smart text · only shows if --inline isn't on it (fallback) */
body.laouts .laoutsSmartTextBtn:not(.laoutsSmartTextBtn--inline) {
background: linear-gradient(135deg, rgba(232, 165, 133, 0.22), rgba(232, 165, 133, 0.14)) !important;
border-color: rgba(232, 165, 133, 0.55) !important;
box-shadow: 0 6px 16px rgba(232, 165, 133, 0.28) !important;
color: var(--laouts-bone) !important;
}
/* — Spread rail action toolbar · unify the pill aesthetic so every button
* reads as part of the same family. Smart text slots in cleanly here. */
body.laouts .spreadRail__actions {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
body.laouts .spreadRail__actions .btn,
body.laouts .spreadRail__btn,
body.laouts .spreadRail__toggleStrip {
height: 32px !important;
padding: 0 14px !important;
background: rgba(58, 36, 53, 0.5) !important;
border: 1px solid var(--laouts-hairline-2) !important;
color: var(--laouts-bone-soft) !important;
font-family: var(--laouts-font-sans) !important;
font-size: 12.5px !important;
font-weight: 400 !important;
letter-spacing: 0.005em !important;
border-radius: 999px !important;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease !important;
text-transform: none !important;
}
body.laouts .spreadRail__actions .btn:hover,
body.laouts .spreadRail__btn:hover,
body.laouts .spreadRail__toggleStrip:hover {
border-color: var(--laouts-coral) !important;
color: var(--laouts-bone) !important;
background: rgba(232, 165, 133, 0.08) !important;
}
body.laouts .spreadRail__actions .spreadRail__iconBtn {
width: 32px !important;
height: 32px !important;
padding: 0 !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: 1px solid var(--laouts-hairline-2) !important;
color: var(--laouts-bone-soft) !important;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease !important;
}
body.laouts .spreadRail__actions .spreadRail__iconBtn:hover {
border-color: var(--laouts-coral) !important;
color: var(--laouts-bone) !important;
background: rgba(232, 165, 133, 0.08) !important;
}
/* Spread label between the prev/next nav buttons */
body.laouts .spreadRail__label {
font-family: var(--laouts-font-mono) !important;
font-size: 11px !important;
letter-spacing: 0.10em !important;
text-transform: uppercase !important;
color: var(--laouts-bone-soft) !important;
padding: 0 12px !important;
}
body.laouts .spreadRail__roundBtn {
width: 28px !important;
height: 28px !important;
border-radius: 50% !important;
background: transparent !important;
border: 1px solid var(--laouts-hairline-2) !important;
color: var(--laouts-bone-soft) !important;
font-size: 14px !important;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease !important;
}
body.laouts .spreadRail__roundBtn:hover {
border-color: var(--laouts-coral) !important;
color: var(--laouts-bone) !important;
background: rgba(232, 165, 133, 0.08) !important;
}
/* Wrap the whole spread rail in a frame so it reads as a contained header */
body.laouts .spreadRail {
padding: 14px 16px !important;
background: linear-gradient(180deg, rgba(232, 165, 133, 0.04) 0%, transparent 100%) !important;
border-bottom: 1px solid var(--laouts-hairline) !important;
margin-bottom: 14px !important;
}
/* Layout cycler arrows · per-page + spread-level chevron pairs.
* CHRISTINA 2026-05-08 · Day 1 SUBTRACT · removed 60% baseline opacity.
* Cyclers now full-opacity at all times. (v1.1 may add hover emphasis.)
*
* CHRISTINA 2026-05-08 · Day 1 FINAL · arrows still didn't read as
* controls (chevrons were floating on dark canvas with no chrome).
* Give them a coral hairline + warm-plum circular ground so they
* read as buttons. ~32px hit target. Chevron color/size unchanged. */
body.laouts .laoutsSpreadArrows,
body.laouts .laoutsSpreadArrows__pair {
transition: opacity 0.25s ease;
}
body.laouts .laoutsSpreadArrows__arrow {
width: 32px !important;
height: 32px !important;
background: rgba(28, 17, 25, 0.7) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
border: 1px solid rgba(232, 165, 133, 0.35) !important;
border-radius: 50% !important;
color: var(--laouts-bone-soft) !important;
font-size: 12px !important;
cursor: pointer !important;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease !important;
}
body.laouts .laoutsSpreadArrows__arrow:hover {
border-color: var(--laouts-coral) !important;
color: var(--laouts-bone) !important;
background: rgba(232, 165, 133, 0.12) !important;
}
/* Empty spread state · "Drop photos onto this spread" — make it inviting,
* coral-tinted, with a gentle pulse so it reads as the next action. */
body.laouts .canvasFrame .emptyHint,
body.laouts .canvasFrame .emptyState,
body.laouts #spreadStageView .emptyHint,
body.laouts .spreadStageView__empty {
font-family: var(--laouts-font-serif) !important;
font-size: 18px !important;
font-weight: 400 !important;
font-style: italic !important;
color: var(--laouts-bone-soft) !important;
letter-spacing: 0.005em !important;
line-height: 1.5 !important;
}
body.laouts .canvasFrame .emptyHint::before,
body.laouts #spreadStageView .emptyHint::before {
content: "✦ ";
color: var(--laouts-coral);
margin-right: 4px;
}
/* Stage layout nav (← Layout / Layout →) · cohesive pill styling */
body.laouts .laoutsStageBar__nav {
height: 32px !important;
padding: 0 14px !important;
background: rgba(58, 36, 53, 0.5) !important;
border: 1px solid var(--laouts-hairline-2) !important;
color: var(--laouts-bone-soft) !important;
font-family: var(--laouts-font-sans) !important;
font-size: 12.5px !important;
font-weight: 500 !important;
letter-spacing: 0.02em !important;
border-radius: 999px !important;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease !important;
}
body.laouts .laoutsStageBar__nav:hover {
border-color: var(--laouts-coral) !important;
color: var(--laouts-bone) !important;
background: rgba(232, 165, 133, 0.08) !important;
}
body.laouts .laoutsStageBar__inner {
background: linear-gradient(180deg, rgba(232, 165, 133, 0.04) 0%, transparent 100%) !important;
border: 1px solid var(--laouts-hairline) !important;
border-radius: var(--laouts-radius-md) !important;
}
/* — Photo mover ghost → coral outline + glow */
body.laouts .laoutsMover__ghost {
box-shadow:
0 0 0 2px var(--laouts-coral),
0 12px 32px rgba(0, 0, 0, 0.45),
0 0 32px var(--laouts-coral-shadow) !important;
}
body.laoutsMover__canvas--over #c {
outline: 3px dashed var(--laouts-coral) !important;
}
/* — Cross-spread filmstrip drop target (SLICE-CROSS-SPREAD-DRAG v1) */
body.laouts .bookStripItem.laouts-cross-spread-drop-target {
outline: 2px solid var(--laouts-coral, #F4A384) !important;
outline-offset: 3px !important;
border-color: var(--laouts-coral) !important;
box-shadow:
0 0 0 3px var(--laouts-coral),
0 0 0 6px rgba(232, 165, 133, 0.32),
0 8px 24px rgba(232, 165, 133, 0.42) !important;
transform: translateY(-2px) scale(1.04);
transition: transform 120ms ease, box-shadow 120ms ease;
}
/* — Photo mover · cross-spread thumbnail drop highlight (Bug 2 fix) */
body.laouts .bookStripItem.laoutsMover__strip--over {
border-color: var(--laouts-coral) !important;
box-shadow:
0 0 0 3px var(--laouts-coral),
0 0 0 6px rgba(232, 165, 133, 0.32),
0 8px 24px rgba(232, 165, 133, 0.42) !important;
transform: translateY(-2px) scale(1.04);
transition: transform 120ms ease, box-shadow 120ms ease;
}
/* — Active spread thumbnail in the filmstrip */
body.laouts .bookStripItem--active {
border-color: var(--laouts-coral) !important;
background: linear-gradient(
180deg,
rgba(232, 165, 133, 0.12) 0%,
rgba(232, 165, 133, 0.05) 100%
) !important;
box-shadow:
0 0 0 2px var(--laouts-coral),
0 0 0 4px rgba(232, 165, 133, 0.28),
0 4px 16px rgba(232, 165, 133, 0.32) !important;
}
body.laouts .bookStripItem--active::after {
background: linear-gradient(
135deg,
rgba(243, 200, 168, 0.18) 0%,
transparent 45%
) !important;
}
body.laouts .bookStripItem--active .bookStripLabel {
color: var(--laouts-coral) !important;
}
/* — Acid-lime fallback hex everywhere → coral peach
* Many engine elements declare `color: var(--laouts-acid, #c8e87b)`.
* The first arg already cascades to coral via the alias, but if
* any element gets the literal hex (cached file, stray !important),
* force it back to coral here. */
body.laouts [style*="#c8e87b"],
body.laouts [style*="#a8c75c"] {
/* Inline-style escapees — no clean override possible without
* touching the JS that wrote them. Tracked but not auto-fixed. */
}
/* — Sticky-bar BUILD MY BOOK button (the giant acid-green CTA)
* The legacy class uses --laouts-acid which already aliases to
* coral. We add a redundant explicit override so it can't get
* confused by inline styles. */
body.laouts .laoutsLibSticky__build,
body.laouts .laoutsLibSticky__build:not([disabled]) {
background: var(--laouts-coral) !important;
color: var(--laouts-bg) !important;
border-color: var(--laouts-coral) !important;
box-shadow: 0 14px 32px var(--laouts-coral-shadow) !important;
}
body.laouts .laoutsLibSticky__build:hover {
filter: brightness(1.06) !important;
}
/* — Top brand topbar Step indicator dot.
* Christina: only the DOT elements should have coral background. The
* Step 4 element should have coral TEXT only — setting bg
* was painting a solid coral rectangle next to the LAOUTS logo. */
body.laouts .laoutsBrandTopbar__crumbsDot,
body.laouts .laoutsBrandTopbar__pillDot {
color: var(--laouts-coral);
background: var(--laouts-coral);
}
body.laouts .laoutsBrandTopbar__crumbs em {
color: var(--laouts-coral) !important;
background: transparent !important;
font-style: italic;
}
/* — Spread filmstrip "+ Spread" / "Duplicate" / "Organize book" pills
* The active "+ Spread" pill was acid green; bring all to coral. */
body.laouts .bookStripPills__btn--accent,
body.laouts .laoutsSpreadActions__btn--primary,
body.laouts .laoutsSpreadActions__btn[aria-pressed="true"] {
background: var(--laouts-coral) !important;
color: var(--laouts-bg) !important;
border-color: var(--laouts-coral) !important;
}
/* — Engine status indicator dots (the small pulsing acid bullets) */
body.laouts .laoutsStatusDot,
body.laouts .laoutsBrandTopbar__pill::before {
background: var(--laouts-coral) !important;
box-shadow: 0 0 8px var(--laouts-coral-shadow) !important;
}
/* — Recipe card · acid-green layout outline → coral */
body.laouts .laoutsRecipeCard__svg [fill="#c8e87b"],
body.laouts .laoutsRecipeCard__svg [stroke="#c8e87b"] {
/* Cannot override SVG inline attrs from CSS. Fixed in recipe-card JS. */
}
/* ──────────────── Engine library column · scrollable ──────── */
/* The curate hero band + welcome card + book picker push the library
* upload zone + photo grid down. Without overflow-y:auto the library
* column can't scroll back up to show what got pushed off-screen.
* Christina: "i can't scroll up." */
body.laouts .libraryColumn,
body.laouts .libraryColumn.lightTableStrip {
overflow-y: auto !important;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--laouts-hairline-2) transparent;
padding-top: 36px !important;
padding-left: 14px !important;
padding-right: 14px !important;
}
/* Library top zone · Order book / Share for Review premium polish */
body.laouts .libraryColumn .laoutsLibraryActions {
margin: 0 0 18px 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
body.laouts .libraryColumn .laoutsLibraryActions #topBarExport,
body.laouts .libraryColumn .laoutsLibraryActions .editorTbBtn--export {
height: 48px !important;
padding: 0 22px !important;
background: var(--laouts-coral) !important;
border: 1px solid var(--laouts-coral) !important;
color: var(--laouts-bg) !important;
font-family: var(--laouts-font-sans) !important;
font-size: 14.5px !important;
font-weight: 600 !important;
letter-spacing: 0.005em !important;
border-radius: var(--laouts-radius-md) !important;
box-shadow: 0 14px 32px var(--laouts-coral-shadow) !important;
transition: filter 0.15s ease, transform 0.15s ease !important;
}
body.laouts .libraryColumn .laoutsLibraryActions #topBarExport:hover,
body.laouts .libraryColumn .laoutsLibraryActions .editorTbBtn--export:hover {
filter: brightness(1.06) !important;
transform: translateY(-1px) !important;
}
body.laouts .libraryColumn .laoutsLibraryActions #topBarShareReview,
body.laouts .libraryColumn .laoutsLibraryActions .editorTbBtn--review {
height: 38px !important;
padding: 0 18px !important;
background: transparent !important;
border: 1px solid var(--laouts-hairline-2) !important;
color: var(--laouts-bone-soft) !important;
font-family: var(--laouts-font-sans) !important;
font-size: 13px !important;
font-weight: 400 !important;
border-radius: var(--laouts-radius-md) !important;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease !important;
}
body.laouts .libraryColumn .laoutsLibraryActions #topBarShareReview:hover,
body.laouts .libraryColumn .laoutsLibraryActions .editorTbBtn--review:hover {
border-color: var(--laouts-coral) !important;
color: var(--laouts-bone) !important;
background: rgba(232, 165, 133, 0.06) !important;
}
body.laouts .libraryColumn::-webkit-scrollbar,
body.laouts .libraryColumn.lightTableStrip::-webkit-scrollbar {
width: 6px;
}
body.laouts .libraryColumn::-webkit-scrollbar-thumb,
body.laouts .libraryColumn.lightTableStrip::-webkit-scrollbar-thumb {
background: var(--laouts-hairline-2);
border-radius: 3px;
}
body.laouts .libraryColumn::-webkit-scrollbar-track,
body.laouts .libraryColumn.lightTableStrip::-webkit-scrollbar-track {
background: transparent;
}
/* ──────────────── Cull tile counts · always visible ────────── */
/* Christina: "the dropdown doesn't actually show the number of
* duplicates etc." The cull tiles in the welcome state currently show 0
* before any scan. Display a placeholder dash so users know counts will
* populate after scan, instead of looking broken. */
body.laouts .laoutsCurateHero__tileNum:empty::before,
body.laouts .laoutsCurateHero__tileNum[data-pre-scan="1"]::before {
content: "—";
color: var(--laouts-mauve-soft);
}
/* ──────────────── Inline scan ribbon · countdown UI ─────────── */
/* Christina: "maybe you have a better way of the countdown to come up.."
* The old full-screen blurred overlay hid the work. The new pattern lives
* inline at the top of the curate band: a thin coral phase ribbon + the
* 4 cull tiles ticking up live as each phase completes. No backdrop, no
* modality — the user can keep interacting with the engine while AI works. */
body.laouts .laoutsCurateHero__scan {
display: none;
flex-direction: column;
gap: 10px;
padding: 14px 18px 16px;
background: linear-gradient(165deg, rgba(232,165,133,0.10) 0%, rgba(232,165,133,0.04) 100%);
border: 1px solid rgba(232, 165, 133, 0.35);
border-radius: var(--laouts-radius-md);
margin-bottom: 18px;
position: relative;
overflow: hidden;
}
body.laouts .laoutsCullPanel--scanning .laoutsCurateHero__scan,
body.laouts .laoutsCullPanel--done .laoutsCurateHero__scan {
display: flex;
}
body.laouts .laoutsCurateHero__scan::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(232,165,133,0.18), transparent);
transform: translateX(-100%);
animation: laoutsScanShimmer 2.6s linear infinite;
pointer-events: none;
}
body.laouts .laoutsCullPanel--done .laoutsCurateHero__scan::before {
animation: none;
background: rgba(232, 165, 133, 0.10);
transform: none;
}
@keyframes laoutsScanShimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
body.laouts .laoutsCurateHero__scanRow {
display: flex;
align-items: center;
gap: 14px;
position: relative;
z-index: 1;
}
body.laouts .laoutsCurateHero__scanIcon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex-shrink: 0;
color: var(--laouts-bone);
animation: laoutsMagicBreathe 2.6s ease-in-out infinite;
}
body.laouts .laoutsCurateHero__scanMark {
width: 28px;
height: 28px;
display: block;
}
body.laouts .laoutsCullPanel--done .laoutsCurateHero__scanIcon {
animation: laoutsScanDoneBounce 0.7s ease-out;
}
@keyframes laoutsScanDoneBounce {
0% { transform: scale(0.92); }
50% { transform: scale(1.14); }
100% { transform: scale(1); }
}
body.laouts .laoutsCurateHero__scanText {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
body.laouts .laoutsCurateHero__scanLab {
font-family: var(--laouts-font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--laouts-coral);
}
body.laouts .laoutsCurateHero__scanPhase {
font-family: var(--laouts-font-sans);
font-size: 16px;
font-weight: 400;
font-style: normal !important;
color: var(--laouts-bone);
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.laouts .laoutsCurateHero__scanPhase strong {
color: var(--laouts-coral);
font-weight: 500;
}
body.laouts .laoutsCurateHero__scanMeta {
display: flex;
align-items: baseline;
gap: 14px;
font-family: var(--laouts-font-mono);
font-size: 12px;
letter-spacing: 0.05em;
color: var(--laouts-mauve);
flex-shrink: 0;
}
body.laouts .laoutsCurateHero__scanCount {
color: var(--laouts-bone-soft);
}
body.laouts .laoutsCurateHero__scanPct {
font-size: 18px;
font-weight: 500;
color: var(--laouts-coral);
font-feature-settings: "tnum";
}
body.laouts .laoutsCurateHero__scanBar {
position: relative;
height: 3px;
background: rgba(58, 36, 53, 0.6);
border-radius: 2px;
overflow: hidden;
z-index: 1;
}
body.laouts .laoutsCurateHero__scanFill {
display: block;
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--laouts-coral-deep) 0%, var(--laouts-coral) 50%, var(--laouts-coral-soft) 100%);
border-radius: 2px;
transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/** Skip-the-cull button · the quiet escape during the scan. Christina
* 2026-05-10. Always visible while the scan is in progress · sets a
* global flag, dismisses the panel, and uses all photos as keepers. */
body.laouts .laoutsCurateHero__scanSkip {
display: inline-flex;
margin: 14px auto 0;
padding: 8px 14px;
background: transparent;
border: 1px solid rgba(243, 230, 220, 0.18);
color: rgba(243, 230, 220, 0.74);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 11.5px;
letter-spacing: 0.04em;
border-radius: 999px;
cursor: pointer;
align-self: center;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
body.laouts .laoutsCurateHero__scanSkip:hover,
body.laouts .laoutsCurateHero__scanSkip:focus-visible {
color: var(--laouts-coral, #e8a585);
border-color: var(--laouts-coral, #e8a585);
background: rgba(232, 165, 133, 0.06);
outline: none;
}
body.laouts .laoutsCurateHero__scan {
display: flex;
flex-direction: column;
}
/* Title swap · "Curating…" during scan, full celebration after.
* IMPORTANT: must respect [hidden] attribute — display: none has to win
* over display: inline-block, so we use !important on the hidden state. */
body.laouts .laoutsCurateHero__titleScan,
body.laouts .laoutsCurateHero__titleDone {
display: inline;
}
body.laouts .laoutsCurateHero__titleScan[hidden],
body.laouts .laoutsCurateHero__titleDone[hidden] {
display: none !important;
}
/* During scan, soften the supporting copy + hide the heavy CTAs so the
* ribbon + tiles are the visual center. Build CTA returns at done. */
body.laouts .laoutsCullPanel--scanning .laoutsCurateHero__sub,
body.laouts .laoutsCullPanel--scanning .laoutsCurateHero__wow,
body.laouts .laoutsCullPanel--scanning .laoutsCurateHero__cta {
opacity: 0.4;
pointer-events: none;
transition: opacity 0.4s ease;
}
body.laouts .laoutsCullPanel--scanning .laoutsCurateHero__primary {
filter: grayscale(0.4);
}
/* Live tile count animation · numbers tick up during scan with a soft
* pulse so the user sees the AI working. */
body.laouts .laoutsCullPanel--scanning .laoutsCurateHero__tile {
animation: laoutsScanTilePulse 2.0s ease-in-out infinite;
}
body.laouts .laoutsCullPanel--scanning .laoutsCurateHero__tile:nth-child(1) { animation-delay: 0s; }
body.laouts .laoutsCullPanel--scanning .laoutsCurateHero__tileGroup:nth-child(2) .laoutsCurateHero__tile { animation-delay: 0.25s; }
body.laouts .laoutsCullPanel--scanning .laoutsCurateHero__tileGroup:nth-child(3) .laoutsCurateHero__tile { animation-delay: 0.5s; }
body.laouts .laoutsCullPanel--scanning .laoutsCurateHero__tileGroup:nth-child(4) .laoutsCurateHero__tile { animation-delay: 0.75s; }
@keyframes laoutsScanTilePulse {
0%, 100% {
border-color: rgba(232, 165, 133, 0.18);
box-shadow: 0 0 0 0 rgba(232, 165, 133, 0);
}
50% {
border-color: rgba(232, 165, 133, 0.55);
box-shadow: 0 0 0 3px rgba(232, 165, 133, 0.10);
}
}
/* Restore buttons aren't actionable until scan done. */
body.laouts .laoutsCullPanel--scanning .laoutsCurateHero__tileRestore {
opacity: 0.3;
pointer-events: none;
}
/* Done state · brief celebration glow on the band, then settles to calm. */
body.laouts .laoutsCullPanel--done .laoutsCurateHero__scan {
background: linear-gradient(165deg, rgba(232,165,133,0.16) 0%, rgba(232,165,133,0.04) 100%);
border-color: var(--laouts-coral);
animation: laoutsScanDoneGlow 1.6s ease-out;
}
@keyframes laoutsScanDoneGlow {
0% { box-shadow: 0 0 0 0 rgba(232, 165, 133, 0.45); }
60% { box-shadow: 0 0 0 14px rgba(232, 165, 133, 0); }
100% { box-shadow: 0 0 0 0 rgba(232, 165, 133, 0); }
}
/* ──────────────── Curate hero · all eyebrow + em → coral ─────── */
/* dark-matcha hardcodes the lab strip color (#c8e87b acid lime). Christina:
* "still green on top left." That eyebrow "STEP 4 · DESIGN · 160 PHOTOS · CURATED"
* is `.laoutsCurateHero__lab` — force the text color here. */
body.laouts .laoutsCurateHero__lab {
color: var(--laouts-coral) !important;
}
body.laouts .laoutsCurateHero__lab > span:first-of-type,
body.laouts .laoutsCurateHero__lab span:not(.laoutsCurateHero__labMuted):not(.laoutsCurateHero__labSep):not(.laoutsCurateHero__labDot) {
color: var(--laouts-coral) !important;
}
body.laouts .laoutsCurateHero__labSep {
color: var(--laouts-mauve-soft) !important;
}
body.laouts .laoutsCurateHero__labMuted {
color: var(--laouts-bone-soft) !important;
}
body.laouts .laoutsCurateHero__dismiss {
border-color: var(--laouts-hairline-2) !important;
color: var(--laouts-bone-soft) !important;
}
body.laouts .laoutsCurateHero__dismiss:hover {
border-color: var(--laouts-coral) !important;
color: var(--laouts-bone) !important;
}
/* The em italics in "We curated 160 photos in 91s" were
* rendering acid lime via dark-matcha. Force them to coral. */
body.laouts .laoutsCurateHero__titleEm,
body.laouts .laoutsCurateHero__title em,
body.laouts .laoutsCurateHero__titleScan em,
body.laouts .laoutsCurateHero__titleDone em,
body.laouts [data-scan-title] em,
body.laouts [data-done-title] em {
color: var(--laouts-coral) !important;
font-style: italic !important;
}
/* ──────────────── Curate hero tiles + brag line · kill remaining acid ── */
/* Hardcoded acid (#c8e87b) and saffron (#d4b467) leak through dark-matcha
* onto: tile labels, the --good tile accent bar, the wow line dot, the
* helper sticky-note. Force every one to coral / cream. */
body.laouts .laoutsCurateHero__tileLab {
color: var(--laouts-coral) !important;
}
body.laouts .laoutsCurateHero__tile--warn .laoutsCurateHero__tileLab {
color: var(--laouts-mauve) !important;
}
body.laouts .laoutsCurateHero__tile--good::before {
background: var(--laouts-coral) !important;
}
body.laouts .laoutsCurateHero__tileNum {
color: var(--laouts-bone) !important;
font-weight: 400 !important;
}
body.laouts .laoutsCurateHero__tile--good .laoutsCurateHero__tileNum {
color: var(--laouts-coral) !important;
}
body.laouts .laoutsCurateHero__wowDot {
background: var(--laouts-coral) !important;
box-shadow: 0 0 6px var(--laouts-coral-shadow) !important;
}
body.laouts .laoutsCurateHero__labDot {
background: var(--laouts-coral) !important;
box-shadow: 0 0 6px var(--laouts-coral-shadow) !important;
}
body.laouts .laoutsCurateHero__helper {
background: rgba(232, 165, 133, 0.06) !important;
border-left: 2px solid var(--laouts-coral) !important;
color: var(--laouts-bone-soft) !important;
}
body.laouts .laoutsCurateHero__helper [data-cull-leveled-helper-n] {
color: var(--laouts-coral) !important;
}
body.laouts .laoutsCurateHero__wowText strong {
color: var(--laouts-bone) !important;
}
/* Hide the Keep-all buttons under each tile. Christina: "they can't
* accidentally click keep all without seeing what they're keeping."
* The right pattern is: click the tile → library filters to that
* category → user reviews and reclassifies individual photos there. */
body.laouts .laoutsCurateHero__tileRestore {
display: none !important;
}
/* Tile click is the safe pattern: prominent, big surface, hover-glow.
* Add a hover hint so users know to click. */
body.laouts .laoutsCurateHero__tile {
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
body.laouts .laoutsCurateHero__tile:hover {
transform: translateY(-2px);
border-color: var(--laouts-coral) !important;
box-shadow: 0 8px 24px rgba(232, 165, 133, 0.18);
}
body.laouts .laoutsCurateHero__tile:hover .laoutsCurateHero__tileSub {
color: var(--laouts-coral) !important;
}
body.laouts .laoutsCurateHero__tile::after {
content: "→ Review";
position: absolute;
bottom: 10px;
right: 14px;
font-family: var(--laouts-font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--laouts-coral);
opacity: 0;
transition: opacity 0.18s ease;
}
body.laouts .laoutsCurateHero__tile {
position: relative;
}
body.laouts .laoutsCurateHero__tile:hover::after {
opacity: 0.85;
}
/* ──────────────── Curate hero · primary/secondary CTA color override ── */
/* The "Build my book" CTA in the curate band was rendering acid lime
* via the dark-matcha cascade. Force coral here so the brand stays cohesive. */
body.laouts .laoutsCurateHero__primary,
body.laouts .laoutsCurateHero__primary:not([disabled]) {
background: var(--laouts-coral) !important;
color: var(--laouts-bg) !important;
border: 1px solid var(--laouts-coral) !important;
box-shadow: 0 14px 32px var(--laouts-coral-shadow) !important;
font-family: var(--laouts-font-sans) !important;
font-weight: 500 !important;
font-style: normal !important;
letter-spacing: 0.02em !important;
}
body.laouts .laoutsCurateHero__primary:hover {
filter: brightness(1.06) !important;
}
body.laouts .laoutsCurateHero__secondary {
background: transparent !important;
color: var(--laouts-bone-soft) !important;
border: 1px solid var(--laouts-hairline-2) !important;
font-family: var(--laouts-font-sans) !important;
font-weight: 400 !important;
font-style: normal !important;
}
body.laouts .laoutsCurateHero__secondary:hover {
border-color: var(--laouts-coral) !important;
color: var(--laouts-bone) !important;
}
/* ──────────────── Library upload zone · kill cursive Fraunces italic ── */
/* Christina explicitly: no cursive on body-size text. The dark-matcha rule
* forces Fraunces italic onto h3/p inside .libraryUploadZone, which renders
* as loopy cursive at small sizes. Force these back to Inter regular. */
body.laouts .libraryUploadZone__inner h3,
body.laouts .libraryUploadZone__inner p,
body.laouts .libraryUploadZone__head {
font-family: var(--laouts-font-sans) !important;
font-style: normal !important;
font-weight: 400 !important;
letter-spacing: -0.005em !important;
font-size: 15px !important;
}
body.laouts .libraryUploadZone__sub,
body.laouts .libraryUploadZone__inner small {
font-family: var(--laouts-font-mono) !important;
font-style: normal !important;
}
body.laouts .libraryUploadZone__inner a,
body.laouts .libraryUploadZone a {
color: var(--laouts-coral) !important;
text-decoration-color: rgba(232, 165, 133, 0.5) !important;
}
body.laouts .libraryUploadZone__art,
body.laouts .libraryUploadZone__art svg path {
stroke: var(--laouts-coral) !important;
color: var(--laouts-coral) !important;
}
body.laouts .libraryUploadZone:hover,
body.laouts .libraryUploadZone.is-dragover,
body.laouts .libraryUploadZone--over {
border-color: var(--laouts-coral) !important;
background: linear-gradient(180deg, rgba(232, 165, 133, 0.10), rgba(232, 165, 133, 0.02)) !important;
}
/* ──────────────── Curate band · slim collapse strip ─────────── */
/* Christina: "once done, the top part needs to somehow go away so the
* entire engine can show, but we still see the work that was just done."
* The collapsed state is a 52px sticky strip at the top of the engine —
* brand glow + "✨ 160 curated in 91s · 104 keepers" + tile pills +
* Build my book CTA + Expand toggle. The full hero is behind it; click
* Expand to bring it back. The library + canvas + inspector own the
* remaining viewport. */
/* HARD HIDE every heavy element when collapsed. */
body.laouts .laoutsCullPanel--collapsed .laoutsCurateHero__sub,
body.laouts .laoutsCullPanel--collapsed .laoutsCurateHero__wow,
body.laouts .laoutsCullPanel--collapsed .laoutsCurateHero__helper,
body.laouts .laoutsCullPanel--collapsed .laoutsCurateHero__tiles,
body.laouts .laoutsCullPanel--collapsed [data-cull-rows],
body.laouts .laoutsCullPanel--collapsed .laoutsCurateHero__tileGroup,
body.laouts .laoutsCullPanel--collapsed .laoutsCurateHero__tile,
body.laouts .laoutsCullPanel--collapsed .laoutsCurateHero__secondaryRow,
body.laouts .laoutsCullPanel--collapsed .laoutsCurateHero__secondary,
body.laouts .laoutsCullPanel--collapsed .laoutsCurateHero__scan,
body.laouts .laoutsCullPanel--collapsed .laoutsCurateHero__lab {
display: none !important;
}
/* Container · slim band, single row */
body.laouts .laoutsCullPanel.laoutsCullPanel--collapsed {
padding: 0 !important;
margin: 0 !important;
background: linear-gradient(180deg, rgba(232, 165, 133, 0.06), rgba(28, 17, 25, 0.95)) !important;
border-bottom: 1px solid var(--laouts-coral) !important;
}
body.laouts .laoutsCullPanel--collapsed [data-cull-main] {
padding: 10px 24px !important;
margin: 0 !important;
display: flex;
align-items: center;
gap: 18px;
min-height: 52px;
}
body.laouts .laoutsCullPanel--collapsed .laoutsCurateHero__row {
display: contents !important;
}
body.laouts .laoutsCullPanel--collapsed .laoutsCurateHero__copy {
display: contents !important;
}
/* Title shrinks to a one-line celebration brag */
body.laouts .laoutsCullPanel--collapsed .laoutsCurateHero__title {
font-family: var(--laouts-font-sans) !important;
font-size: 14px !important;
font-weight: 500 !important;
margin: 0 !important;
line-height: 1.2 !important;
color: var(--laouts-bone) !important;
flex-shrink: 0;
display: inline-flex !important;
align-items: center;
gap: 8px;
letter-spacing: 0.005em;
}
body.laouts .laoutsCullPanel--collapsed .laoutsCurateHero__title::before {
content: "✦";
color: var(--laouts-coral);
font-size: 14px;
}
body.laouts .laoutsCullPanel--collapsed .laoutsCurateHero__titleScan {
display: none !important;
}
body.laouts .laoutsCullPanel--collapsed .laoutsCurateHero__titleDone {
display: inline !important;
font-family: inherit !important;
font-size: inherit !important;
color: inherit !important;
font-weight: inherit !important;
}
body.laouts .laoutsCullPanel--collapsed .laoutsCurateHero__titleEm,
body.laouts .laoutsCullPanel--collapsed .laoutsCurateHero__title em {
font-size: inherit !important;
font-style: normal !important;
font-weight: 600 !important;
color: var(--laouts-coral) !important;
}
body.laouts .laoutsCullPanel--collapsed .laoutsCurateHero__title br {
display: none !important;
}
/* Compact summary pills · only visible in collapsed mode */
body.laouts .laoutsCurateHero__summary {
display: none;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-family: var(--laouts-font-mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--laouts-mauve);
flex: 1;
margin: 0;
}
body.laouts .laoutsCullPanel--collapsed .laoutsCurateHero__summary {
display: flex;
flex: 1 1 auto;
min-width: 0;
}
body.laouts .laoutsCurateHero__summaryPill {
display: inline-flex;
align-items: baseline;
gap: 5px;
padding: 3px 9px;
border: 1px solid rgba(201, 168, 168, 0.18);
border-radius: 999px;
background: rgba(58, 36, 53, 0.55);
white-space: nowrap;
}
body.laouts .laoutsCurateHero__summaryPill--good {
border-color: var(--laouts-coral);
background: rgba(232, 165, 133, 0.08);
color: var(--laouts-bone);
}
body.laouts .laoutsCurateHero__summaryPillNum {
font-family: var(--laouts-font-serif);
font-size: 13px;
font-weight: 500;
color: var(--laouts-bone);
}
body.laouts .laoutsCurateHero__summaryPill--good .laoutsCurateHero__summaryPillNum {
color: var(--laouts-coral);
}
/* In collapsed mode, the CTA group becomes inline · Build right + Expand */
body.laouts .laoutsCullPanel--collapsed .laoutsCurateHero__cta {
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
flex-shrink: 0;
}
body.laouts .laoutsCullPanel--collapsed .laoutsCurateHero__primary {
font-size: 13px !important;
padding: 8px 14px !important;
box-shadow: none !important;
letter-spacing: 0.02em !important;
}
body.laouts .laoutsCullPanel--collapsed .laoutsCurateHero__arrow {
font-size: 13px !important;
}
/* Expand toggle · re-opens full hero */
body.laouts .laoutsCurateHero__expand {
display: none;
font-family: var(--laouts-font-mono);
font-size: 10.5px;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 6px 11px;
background: transparent;
color: var(--laouts-bone-soft);
border: 1px solid rgba(201, 168, 168, 0.22);
border-radius: var(--laouts-radius-sm);
cursor: pointer;
transition: border-color 0.15s, color 0.15s, background 0.15s;
}
body.laouts .laoutsCurateHero__expand:hover {
border-color: var(--laouts-coral);
color: var(--laouts-bone);
background: rgba(232, 165, 133, 0.06);
}
body.laouts .laoutsCullPanel--collapsed .laoutsCurateHero__expand {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* Hide the dismiss × in collapsed mode — expand replaces it */
body.laouts .laoutsCullPanel--collapsed .laoutsCurateHero__dismiss {
display: none !important;
}
/* ──────────────── Per-photo reclassify · safe manual override ───── */
/* Christina: "they need to be able to manually re-organize any photo
* to any category after the cull." Single-photo, reversible, no scary
* Keep-all bulk action. The badge sits in the top-right of each gallery
* tile and only shows on hover so it doesn't clutter the photo. Click
* it to open the Move-to menu. */
body.laouts .laoutsReclassifyBadge {
position: absolute;
top: 6px;
right: 6px;
z-index: 4;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(28, 17, 25, 0.85);
color: var(--laouts-coral);
border: 1px solid var(--laouts-coral);
border-radius: 50%;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease, background 0.15s ease, transform 0.15s ease;
backdrop-filter: blur(6px);
}
body.laouts .galleryItem:hover .laoutsReclassifyBadge,
body.laouts .galleryItem:focus-within .laoutsReclassifyBadge {
opacity: 1;
pointer-events: auto;
}
body.laouts .laoutsReclassifyBadge:hover {
background: var(--laouts-coral);
color: var(--laouts-bg);
transform: scale(1.08);
}
body.laouts .laoutsReclassifyMenu {
position: fixed;
z-index: 9000;
min-width: 200px;
padding: 6px;
background: var(--laouts-bg-1);
border: 1px solid var(--laouts-coral);
border-radius: var(--laouts-radius-md);
box-shadow: 0 18px 48px rgba(20, 8, 18, 0.55);
font-family: var(--laouts-font-sans);
}
body.laouts .laoutsReclassifyMenu[hidden] { display: none; }
body.laouts .laoutsReclassifyMenu__head {
font-family: var(--laouts-font-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--laouts-mauve);
padding: 6px 10px 8px;
}
body.laouts .laoutsReclassifyMenu__opt {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 9px 10px;
background: transparent;
color: var(--laouts-bone);
border: none;
border-radius: var(--laouts-radius-sm);
font-size: 14px;
font-family: var(--laouts-font-sans);
text-align: left;
cursor: pointer;
transition: background 0.12s ease;
}
body.laouts .laoutsReclassifyMenu__opt:hover {
background: rgba(232, 165, 133, 0.10);
}
body.laouts .laoutsReclassifyMenu__opt--current {
color: var(--laouts-coral);
}
body.laouts .laoutsReclassifyMenu__opt--current::after {
content: "·current";
margin-left: auto;
font-family: var(--laouts-font-mono);
font-size: 10px;
letter-spacing: 0.1em;
color: var(--laouts-mauve-soft);
}
body.laouts .laoutsReclassifyMenu__optDot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
body.laouts .laoutsReclassifyMenu__optDot[data-cat="keeper"] { background: var(--laouts-coral); }
body.laouts .laoutsReclassifyMenu__optDot[data-cat="duplicate"] { background: var(--laouts-mauve); }
body.laouts .laoutsReclassifyMenu__optDot[data-cat="blurry"] { background: var(--laouts-mauve-soft); }
body.laouts .laoutsReclassifyMenu__optDot[data-cat="closed-eyes"] { background: var(--laouts-bone-soft); }
/* ──────────────── Engine walkthrough · spotlight + tooltip ─────── */
/* Christina: "We also need a walk me through the software demo for each
* thing." First-visit guided tour: spotlight overlay carves a hole around
* the target, ring pulse highlights it, tooltip card explains it. Skip /
* Back / Next controls + Esc / arrow keys. Re-trigger from Tour topbar btn. */
body.laouts .laoutsTour {
position: fixed;
inset: 0;
z-index: 9500;
pointer-events: none;
}
body.laouts .laoutsTour[hidden] { display: none; }
body.laouts .laoutsTour__mask {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh; height: 100dvh;
pointer-events: auto;
}
body.laouts .laoutsTour__ring {
position: fixed;
border-radius: 14px;
pointer-events: none;
box-shadow:
0 0 0 1.5px var(--laouts-coral),
0 0 0 6px rgba(232, 165, 133, 0.18),
0 24px 48px rgba(20, 8, 18, 0.4);
transition: left 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
top 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
height 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.laouts .laoutsTour__ring::after {
content: "";
position: absolute;
inset: -8px;
border: 1.5px solid var(--laouts-coral);
border-radius: 18px;
opacity: 0;
animation: laoutsTourPulse 2.2s ease-out infinite;
}
@keyframes laoutsTourPulse {
0% { opacity: 0.55; transform: scale(0.96); }
60% { opacity: 0; transform: scale(1.12); }
100% { opacity: 0; transform: scale(1.12); }
}
body.laouts .laoutsTour__card {
position: fixed;
width: 380px;
max-width: calc(100vw - 32px);
background: linear-gradient(165deg, var(--laouts-bg-1) 0%, #1c1019 100%);
border: 1px solid var(--laouts-coral);
border-radius: var(--laouts-radius-lg);
padding: 22px 24px 18px;
box-shadow: 0 24px 64px rgba(20, 8, 18, 0.6);
pointer-events: auto;
font-family: var(--laouts-font-sans);
color: var(--laouts-bone);
transition: left 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
top 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.laouts .laoutsTour__head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
body.laouts .laoutsTour__progress {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--laouts-font-mono);
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--laouts-mauve);
}
body.laouts .laoutsTour__progressDot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--laouts-coral);
box-shadow: 0 0 6px var(--laouts-coral-shadow);
}
body.laouts .laoutsTour__progressLab {
color: var(--laouts-coral);
}
body.laouts .laoutsTour__close {
width: 28px; height: 28px;
border-radius: 50%;
border: 1px solid var(--laouts-hairline-2);
background: transparent;
color: var(--laouts-bone-soft);
font-size: 16px;
line-height: 1;
cursor: pointer;
transition: border-color 0.15s, color 0.15s, background 0.15s;
}
body.laouts .laoutsTour__close:hover {
border-color: var(--laouts-coral);
color: var(--laouts-bone);
background: rgba(232, 165, 133, 0.08);
}
body.laouts .laoutsTour__title {
font-family: var(--laouts-font-serif);
font-weight: 500;
font-size: 22px;
line-height: 1.2;
letter-spacing: -0.005em;
color: var(--laouts-bone);
margin: 0 0 8px;
}
body.laouts .laoutsTour__body {
font-size: 14.5px;
line-height: 1.55;
color: var(--laouts-bone-soft);
margin: 0 0 18px;
font-style: normal;
}
body.laouts .laoutsTour__nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding-top: 14px;
border-top: 1px solid var(--laouts-hairline-2);
}
body.laouts .laoutsTour__navRight {
display: inline-flex;
align-items: center;
gap: 8px;
}
body.laouts .laoutsTour__btnGhost {
font-family: var(--laouts-font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 8px 12px;
background: transparent;
color: var(--laouts-bone-soft);
border: 1px solid var(--laouts-hairline-2);
border-radius: var(--laouts-radius-sm);
cursor: pointer;
transition: all 0.15s ease;
}
body.laouts .laoutsTour__btnGhost:hover {
border-color: var(--laouts-coral);
color: var(--laouts-bone);
background: rgba(232, 165, 133, 0.06);
}
body.laouts .laoutsTour__btnPrimary {
font-family: var(--laouts-font-sans);
font-weight: 500;
font-size: 13px;
padding: 9px 16px;
background: var(--laouts-coral);
color: var(--laouts-bg);
border: 1px solid var(--laouts-coral);
border-radius: var(--laouts-radius-sm);
cursor: pointer;
box-shadow: 0 8px 18px var(--laouts-coral-shadow);
transition: all 0.15s ease;
letter-spacing: 0.01em;
}
body.laouts .laoutsTour__btnPrimary:hover {
filter: brightness(1.08);
transform: translateY(-1px);
}
/* Topbar Tour trigger */
body.laouts .laoutsTour__trigger {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: transparent;
border: 1px solid var(--laouts-hairline-2);
border-radius: 999px;
color: var(--laouts-bone-soft);
font-family: var(--laouts-font-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.05em;
cursor: pointer;
transition: all 0.15s ease;
}
body.laouts .laoutsTour__trigger:hover {
border-color: var(--laouts-coral);
color: var(--laouts-coral);
background: rgba(232, 165, 133, 0.06);
}
/* ──────────────── Cull panel · clear top padding so ribbon shows ── */
/* Christina: scan ribbon "AI IS CURATING" was clipped at top. The cull
* panel sits above .appMain but had no breathing room from the engine
* topbar + stage stepper above. Push it down with explicit top padding. */
body.laouts .laoutsCullPanel {
padding-top: 24px !important;
}
/* Hide the legacy Shortcuts pill if it ever sneaks in */
body.laouts #laoutsBrandTopbarShortcuts {
display: none !important;
}
/* ──────────────── Cull lock-focus · blur engine during scan ───── */
/* Christina: "blur everything below the culling countdown till it's done."
* While the cull is scanning, the engine workspace dims + blurs so the
* user's focus is on the work being done. Released the moment the scan
* completes (band transitions to prompt state). */
body.laouts.laouts--cull-locked .appMain,
body.laouts.laouts--cull-locked .laoutsLibSticky,
body.laouts.laouts--cull-locked .editorTopBar,
body.laouts.laouts--cull-locked .canvasFrame {
filter: blur(6px) saturate(0.6);
opacity: 0.55;
pointer-events: none;
transition: filter 0.5s ease, opacity 0.5s ease;
}
/* Position-fixed elements bypass parent blur, so kill them explicitly. */
body.laouts.laouts--cull-locked .laoutsSmartTextBtn,
body.laouts.laouts--cull-locked .laoutsTour__trigger,
body.laouts.laouts--cull-locked #laoutsNextStepTip,
body.laouts.laouts--cull-locked .editorTbBtn,
body.laouts.laouts--cull-locked [data-laouts-magic-pulse] {
display: none !important;
}
/* Christina: hide the Focus mode pill from the topbar by default — it was
* adding noise to a chrome users were already overwhelmed by. Only surface
* it when the user is in the Organize Book view where re-flowing pages
* benefits from a wider canvas. */
body.laouts #laoutsFocusModeBtn,
body.laouts .laoutsFocusToggle {
display: none !important;
}
body.laouts.cep-focus-book-overview #laoutsFocusModeBtn,
body.laouts.cep-focus-book-overview .laoutsFocusToggle {
display: inline-flex !important;
}
/* During the cull scan + prompt, pill remains hidden (cull state already
* forces focus mode internally; users don't need to see this control). */
body.laouts.laouts--cull-locked #laoutsFocusModeBtn,
body.laouts:has(.laoutsCullPanel--prompting) #laoutsFocusModeBtn {
display: none !important;
}
/* Top clip safety · the engine canvas zone (filmstrip + stage bar + canvas)
* was bleeding past the step bar above it on bigger viewports. Belt and
* suspenders — push appMain down + give the spreadStageView its own pad. */
body.laouts .appMain {
padding-top: 16px !important;
}
body.laouts .spreadStageView,
body.laouts #spreadStageView {
padding-top: 14px !important;
}
body.laouts .spreadRail__stripWrap {
padding-top: 4px !important;
overflow: visible !important;
}
body.laouts .spreadRail {
margin-top: 0 !important;
}
/* Kill the legacy "0 keepers:" count below the new masthead — the old
* engine wrapper (.laoutsLibTools__countWrap) renders a redundant total
* line that was wrapping ugly on narrow columns. The masthead carries
* this number now. */
body.laouts .laoutsLibTools__countWrap,
body.laouts .laoutsLibTools__count,
body.laouts .laoutsLibTools__sub,
body.laouts .laoutsLibTools__sep {
display: none !important;
}
/* Hide the engine's tiny "spread layout preview" thumb at the bottom of
* the inspector — Christina spotted a ghost render of the library DOM
* showing up there. Until we figure out the source, hide cleanly. */
body.laouts .laoutsSpreadLayoutPreview,
body.laouts [data-spread-layout-preview],
body.laouts .spreadLayout__previewBox img.spreadLayout__previewClone {
display: none !important;
}
/* Library column · bottom padding so photo grid clears the floating
* AUTO-ARRANGE pill at the bottom of the viewport. Christina: "the
* button is in the way of seeing photos underneath." */
body.laouts .libraryColumn,
body.laouts .libraryColumn.lightTableStrip {
padding-bottom: 110px !important;
}
/* Spread top toolbar (Hide pages / Larger filmstrip / + Spread / etc.)
* was overlapping itself when narrow. Force flex-wrap so pills break
* into a second row instead of stacking on top of each other. */
body.laouts .spreadRail__top,
body.laouts .spreadRail__inner {
flex-wrap: wrap !important;
gap: 8px !important;
}
body.laouts .spreadRail__actions {
flex-wrap: wrap !important;
}
/* Inspector right panel · Touch / Small / Med / Large was overflowing
* at narrow widths. Make the row a flex-wrap grid that breaks cleanly. */
body.laouts .sidebar#rightInspector,
body.laouts aside#rightInspector {
overflow-x: hidden !important;
}
body.laouts .sidebar#rightInspector .card,
body.laouts aside#rightInspector .card {
max-width: 100% !important;
overflow: hidden !important;
}
body.laouts .sidebar#rightInspector button,
body.laouts aside#rightInspector button {
max-width: 100%;
white-space: nowrap;
}
/* The grid-spacing density buttons row · ensure they wrap not overflow */
body.laouts .gridSpacing__sizes,
body.laouts [data-grid-sizes],
body.laouts .laoutsGridSizes {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
}
body.laouts .gridSpacing__sizes > *,
body.laouts [data-grid-sizes] > *,
body.laouts .laoutsGridSizes > * {
flex: 0 1 auto !important;
min-width: 56px !important;
}
/* Zoom controls at bottom of canvas · ensure they're never clipped */
body.laouts .canvasZoom,
body.laouts .laoutsZoom,
body.laouts [data-zoom-controls] {
z-index: 30 !important;
position: relative !important;
}
/* AUTO-ARRANGE pill · slightly smaller after first build kicks off so
* it doesn't cover library content. The button still pulses but it's
* less aggressive once the user has clicked it once. */
body.laouts .laoutsLibSticky__build--working,
body.laouts .laoutsLibSticky__build[data-laouts-build-book]:active {
animation: none !important;
box-shadow: 0 8px 18px var(--laouts-coral-shadow) !important;
}
/* Christina: kill the dashed dot column on the left edge of the engine.
* It's the .laoutsToolRail::before "teaser hint" that the collapsed
* tool rail exists — distracting during the cull, doesn't read as a
* meaningful control. The rail itself stays accessible on hover.
* Also kill the rail entirely during cull-locked + prompting states. */
body.laouts .laoutsToolRail::before,
body.laouts .laoutsToolRail::after {
display: none !important;
content: none !important;
}
body.laouts.laouts--cull-locked .laoutsToolRail,
body.laouts:has(.laoutsCullPanel--prompting) .laoutsToolRail,
body.laouts:has(.laoutsPathPicker.laoutsPathPicker--in) .laoutsToolRail {
display: none !important;
}
/* AUTO-ARRANGE pill · Christina: it kept covering library photos.
* The fix: make it a NORMAL FLOW element at the bottom of the library
* column. No sticky, no fixed, no floating. It sits at the end of the
* user's photo grid where they naturally land after scrolling, never
* covering anything. */
body.laouts .laoutsLibSticky {
position: relative !important;
width: 100% !important;
margin: 16px 0 24px !important;
z-index: auto !important;
background: transparent !important;
padding: 0 !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
}
body.laouts .laoutsLibSticky__inner {
background: linear-gradient(165deg, rgba(232, 165, 133, 0.95), rgba(212, 133, 106, 0.92)) !important;
backdrop-filter: blur(12px) !important;
border: 1px solid var(--laouts-coral) !important;
border-radius: var(--laouts-radius-md) !important;
padding: 4px !important;
box-shadow: 0 14px 32px var(--laouts-coral-shadow) !important;
}
body.laouts .laoutsLibSticky__build {
width: 100% !important;
border-radius: var(--laouts-radius-sm) !important;
padding: 14px 18px !important;
}
/* Sticky button no longer floating over viewport · drop the bottom-pad
* that was reserving space for it (back to sane default). */
body.laouts .libraryColumn,
body.laouts .libraryColumn.lightTableStrip {
padding-bottom: 16px !important;
}
/* Empty breadcrumb pill next to LAOUTS · the project-name slot was
* showing a blank coral rectangle when no project name set. Hide if
* empty. */
body.laouts .laoutsBrandTopbar__crumbsPill:empty,
body.laouts [data-project-name]:empty,
body.laouts .laoutsBrandTopbar__projectPill:empty {
display: none !important;
}
body.laouts .laoutsBrandTopbar__crumbsPill,
body.laouts .laoutsBrandTopbar__projectPill {
background: transparent !important;
border: 1px solid var(--laouts-hairline-2) !important;
color: var(--laouts-bone-soft) !important;
font-size: 11px !important;
letter-spacing: 0.10em !important;
}
/* Top spread toolbar · the Spread X/X navigation + Hide pages + Larger
* filmstrip + + Spread + Duplicate + Organize book + Smart text + ⋯
* was overlapping. Force the whole bar onto its own row underneath the
* spread label, with smaller pills + tighter gap. */
body.laouts .spreadRail__top {
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
}
body.laouts .spreadRail__nav {
justify-content: center !important;
}
body.laouts .spreadRail__actions {
justify-content: center !important;
flex-wrap: wrap !important;
gap: 6px !important;
}
body.laouts .spreadRail__actions .btn,
body.laouts .spreadRail__btn,
body.laouts .spreadRail__toggleStrip {
height: 28px !important;
padding: 0 11px !important;
font-size: 11.5px !important;
}
/* Inspector right side overflow · "Diptych · same photo, mirrored cr"
* and "Lar" cut off. Bump panel width + tighten internal text so labels
* fit cleanly. */
body.laouts .sidebar#rightInspector,
body.laouts aside#rightInspector {
width: 320px !important;
padding: 14px !important;
}
body.laouts .sidebar#rightInspector .card,
body.laouts aside#rightInspector .card {
padding: 12px 14px !important;
margin-bottom: 10px !important;
}
body.laouts .sidebar#rightInspector .card * ,
body.laouts aside#rightInspector .card * {
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Density buttons (Touch / Small / Med / Large) · ensure all four fit */
body.laouts .laoutsGridSizes button,
body.laouts .gridSpacing__sizes button {
flex: 1 1 0 !important;
min-width: 0 !important;
padding: 6px 4px !important;
font-size: 11.5px !important;
}
body.laouts .laoutsSplit__row,
body.laouts .splitMode__row {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 6px !important;
}
body.laouts .laoutsSplit__row > *,
body.laouts .splitMode__row > * {
width: 100% !important;
min-width: 0 !important;
}
/* Reduce engine top header height so canvas is visible without scroll */
body.laouts .laoutsBrandTopbar {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
body.laouts .laoutsStageBar,
body.laouts .laoutsStepperBar {
padding-top: 6px !important;
padding-bottom: 6px !important;
}
/* Auto-arrange button · contextual sub-text when book is built. The
* old "REFINE EACH SPREAD AFTER" copy was tight; let it breathe. */
body.laouts .laoutsLibSticky__buildSub {
font-size: 9px !important;
letter-spacing: 0.08em !important;
white-space: normal !important;
}
/* Auto-arrange button · subtle coral pulse when library has photos but
* the user hasn't kicked off a build yet. Christina: "show the next
* important steps the user needs to take." */
@keyframes laoutsAutoArrangeIdlePulse {
0%, 100% {
box-shadow: 0 14px 32px var(--laouts-coral-shadow);
}
50% {
box-shadow: 0 14px 32px var(--laouts-coral-shadow),
0 0 0 6px rgba(232, 165, 133, 0.18);
}
}
body.laouts .laoutsLibSticky__build:not([disabled]):not([hidden]):not(.laoutsLibSticky__build--working) {
animation: laoutsAutoArrangeIdlePulse 3.2s ease-in-out infinite;
}
body.laouts.laouts--cull-locked .laoutsCullPanel {
position: relative;
z-index: 30;
}
/* Smooth release · the fade-back when scan finishes */
body.laouts:not(.laouts--cull-locked) .appMain,
body.laouts:not(.laouts--cull-locked) .laoutsLibSticky,
body.laouts:not(.laouts--cull-locked) .editorTopBar,
body.laouts:not(.laouts--cull-locked) .canvasFrame {
transition: filter 0.6s ease, opacity 0.6s ease;
}
/* ──────────────── Post-scan prompt · next-stage picker ─────────── */
/* Christina: "prompt the user for the next stage." Three choices:
* Auto-arrange, Review flagged, or take me to the editor. After the
* user picks one the band fully disappears. */
body.laouts .laoutsCullPrompt {
display: none;
padding: 8px 0 0;
}
body.laouts .laoutsCullPanel--prompting .laoutsCullPrompt {
display: block;
animation: laoutsCullPromptIn 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes laoutsCullPromptIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* During the prompt state, lock focus on the prompt — blur everything
* below it the same way the scan does. Belt-and-suspenders in case the
* body cull-locked class is dropped for any reason. */
body.laouts:has(.laoutsCullPanel--prompting) .appMain,
body.laouts:has(.laoutsCullPanel--prompting) .laoutsLibSticky,
body.laouts:has(.laoutsCullPanel--prompting) .editorTopBar,
body.laouts:has(.laoutsCullPanel--prompting) .canvasFrame {
filter: blur(6px) saturate(0.6) !important;
opacity: 0.55 !important;
pointer-events: none !important;
transition: filter 0.5s ease, opacity 0.5s ease;
}
body.laouts:has(.laoutsCullPanel--prompting) .laoutsSmartTextBtn,
body.laouts:has(.laoutsCullPanel--prompting) .laoutsTour__trigger,
body.laouts:has(.laoutsCullPanel--prompting) #laoutsNextStepTip {
display: none !important;
}
/* Hide everything else in the cull panel during prompt state */
body.laouts .laoutsCullPanel--prompting .laoutsCurateHero__row,
body.laouts .laoutsCullPanel--prompting .laoutsCurateHero__tiles,
body.laouts .laoutsCullPanel--prompting [data-cull-rows],
body.laouts .laoutsCullPanel--prompting .laoutsCurateHero__tile,
body.laouts .laoutsCullPanel--prompting .laoutsCurateHero__tileGroup,
body.laouts .laoutsCullPanel--prompting .laoutsCurateHero__wow,
body.laouts .laoutsCullPanel--prompting .laoutsCurateHero__helper,
body.laouts .laoutsCullPanel--prompting .laoutsCurateHero__sub,
body.laouts .laoutsCullPanel--prompting .laoutsCurateHero__lab,
body.laouts .laoutsCullPanel--prompting .laoutsCurateHero__scan,
body.laouts .laoutsCullPanel--prompting .laoutsCurateHero__cta,
body.laouts .laoutsCullPanel--prompting .laoutsCurateHero__title {
display: none !important;
}
body.laouts .laoutsCullPrompt__inner {
max-width: 920px;
margin: 0 auto;
padding: 24px 24px 28px;
}
body.laouts .laoutsCullPrompt__head {
text-align: center;
margin-bottom: 28px;
}
body.laouts .laoutsCullPrompt__lab {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--laouts-font-mono);
font-size: 11px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--laouts-coral);
margin-bottom: 12px;
}
body.laouts .laoutsCullPrompt__labDot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--laouts-coral);
box-shadow: 0 0 8px var(--laouts-coral-shadow);
}
body.laouts .laoutsCullPrompt__title {
font-family: var(--laouts-font-serif);
font-weight: 400;
font-size: clamp(28px, 3.4vw, 38px);
line-height: 1.18;
letter-spacing: -0.012em;
color: var(--laouts-bone);
margin: 0;
max-width: 30ch;
margin-left: auto;
margin-right: auto;
}
body.laouts .laoutsCullPrompt__title em {
font-style: italic;
color: var(--laouts-coral);
}
body.laouts .laoutsCullPrompt__titleSub {
display: block;
margin-top: 6px;
font-style: italic;
color: var(--laouts-mauve);
font-size: 0.72em;
}
body.laouts .laoutsCullPrompt__choices {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 720px;
margin: 0 auto;
}
body.laouts .laoutsCullPrompt__choice {
display: flex;
align-items: center;
gap: 18px;
padding: 18px 22px;
background: linear-gradient(165deg, var(--laouts-bg-1) 0%, #1c1019 100%);
border: 1px solid var(--laouts-hairline-2);
border-radius: var(--laouts-radius-lg);
text-align: left;
cursor: pointer;
font-family: var(--laouts-font-sans);
color: var(--laouts-bone);
transition: all 0.18s ease;
}
body.laouts .laoutsCullPrompt__choice:hover {
border-color: var(--laouts-coral);
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(20, 8, 18, 0.4);
}
body.laouts .laoutsCullPrompt__choice--primary {
background: linear-gradient(165deg, rgba(232, 165, 133, 0.16) 0%, rgba(232, 165, 133, 0.06) 100%);
border-color: var(--laouts-coral);
box-shadow: 0 14px 32px var(--laouts-coral-shadow);
}
body.laouts .laoutsCullPrompt__choice--primary:hover {
background: linear-gradient(165deg, rgba(232, 165, 133, 0.22) 0%, rgba(232, 165, 133, 0.10) 100%);
box-shadow: 0 18px 40px var(--laouts-coral-shadow);
}
body.laouts .laoutsCullPrompt__choice--ghost {
background: transparent;
border-style: dashed;
}
body.laouts .laoutsCullPrompt__choiceIcon {
flex-shrink: 0;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(232, 165, 133, 0.10);
border: 1px solid var(--laouts-hairline-2);
border-radius: 50%;
color: var(--laouts-coral);
font-size: 18px;
}
body.laouts .laoutsCullPrompt__choice--primary .laoutsCullPrompt__choiceIcon {
background: var(--laouts-coral);
color: var(--laouts-bg);
border-color: var(--laouts-coral);
}
body.laouts .laoutsCullPrompt__choiceTxt {
flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
body.laouts .laoutsCullPrompt__choiceTitle {
font-size: 17px;
font-weight: 500;
letter-spacing: 0.005em;
color: var(--laouts-bone);
}
body.laouts .laoutsCullPrompt__choiceSub {
font-size: 13px;
color: var(--laouts-bone-soft);
font-family: var(--laouts-font-sans);
font-style: normal;
}
body.laouts .laoutsCullPrompt__choiceArrow {
font-size: 18px;
color: var(--laouts-coral);
flex-shrink: 0;
transition: transform 0.18s ease;
}
body.laouts .laoutsCullPrompt__choice:hover .laoutsCullPrompt__choiceArrow {
transform: translateX(3px);
}
/* ──────────────── Category review modal ────────────────────────── */
/* Christina: "we need that drop down so users can select back photos
* that we categorized — full access if they want." Clicking Duplicates,
* Blurry, or Closed eyes opens a proper grid where each photo can be
* toggled in/out of its category. Bulk restore + per-photo control. */
body.laouts .laoutsCategoryReview {
position: fixed;
inset: 0;
z-index: 9700;
pointer-events: none;
}
body.laouts .laoutsCategoryReview[hidden] { display: none; }
body.laouts .laoutsCategoryReview__backdrop {
position: absolute;
inset: 0;
background: rgba(20, 8, 18, 0.78);
backdrop-filter: blur(8px);
pointer-events: auto;
opacity: 0;
transition: opacity 0.22s ease;
}
body.laouts .laoutsCategoryReview--in .laoutsCategoryReview__backdrop {
opacity: 1;
}
body.laouts .laoutsCategoryReview__shell {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.96);
width: min(1080px, calc(100vw - 48px));
max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px);
background: linear-gradient(165deg, var(--laouts-bg-1) 0%, #1c1019 100%);
border: 1px solid var(--laouts-coral);
border-radius: var(--laouts-radius-lg);
pointer-events: auto;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 32px 80px rgba(20, 8, 18, 0.6);
opacity: 0;
transition: opacity 0.22s ease, transform 0.22s ease;
}
body.laouts .laoutsCategoryReview--in .laoutsCategoryReview__shell {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
body.laouts .laoutsCategoryReview__head {
position: relative;
padding: 26px 32px 20px;
border-bottom: 1px solid var(--laouts-hairline-2);
}
body.laouts .laoutsCategoryReview__lab {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--laouts-font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--laouts-coral);
margin-bottom: 10px;
}
body.laouts .laoutsCategoryReview__labDot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--laouts-coral);
box-shadow: 0 0 6px var(--laouts-coral-shadow);
}
body.laouts .laoutsCategoryReview__title {
font-family: var(--laouts-font-serif);
font-weight: 500;
font-size: 30px;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--laouts-bone);
margin: 0 0 8px;
}
body.laouts .laoutsCategoryReview__title em {
font-family: var(--laouts-font-mono);
font-style: normal;
font-size: 16px;
letter-spacing: 0.06em;
color: var(--laouts-coral);
margin-left: 6px;
}
body.laouts .laoutsCategoryReview__sub {
font-size: 14.5px;
line-height: 1.55;
color: var(--laouts-bone-soft);
max-width: 64ch;
margin: 0;
}
body.laouts .laoutsCategoryReview__close {
position: absolute;
top: 22px;
right: 22px;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--laouts-hairline-2);
background: transparent;
color: var(--laouts-bone-soft);
font-size: 18px;
cursor: pointer;
transition: all 0.15s ease;
}
body.laouts .laoutsCategoryReview__close:hover {
border-color: var(--laouts-coral);
color: var(--laouts-bone);
background: rgba(232, 165, 133, 0.08);
}
body.laouts .laoutsCategoryReview__tabs {
display: flex;
gap: 4px;
padding: 0 32px;
border-bottom: 1px solid var(--laouts-hairline-2);
background: rgba(20, 8, 18, 0.4);
overflow-x: auto;
scrollbar-width: none;
}
body.laouts .laoutsCategoryReview__tabs::-webkit-scrollbar { display: none; }
body.laouts .laoutsCategoryReview__tab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 16px;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
color: var(--laouts-bone-soft);
font-family: var(--laouts-font-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.005em;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
white-space: nowrap;
margin-bottom: -1px;
}
body.laouts .laoutsCategoryReview__tab:hover {
color: var(--laouts-bone);
background: rgba(232, 165, 133, 0.04);
}
body.laouts .laoutsCategoryReview__tab--active {
color: var(--laouts-coral);
border-bottom-color: var(--laouts-coral);
}
body.laouts .laoutsCategoryReview__tabCount {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 22px;
padding: 0 8px;
border-radius: 999px;
background: rgba(58, 36, 53, 0.6);
color: var(--laouts-bone-soft);
font-family: var(--laouts-font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
}
body.laouts .laoutsCategoryReview__tab--active .laoutsCategoryReview__tabCount {
background: var(--laouts-coral);
color: var(--laouts-bg);
}
body.laouts .laoutsCategoryReview__bulkRow {
display: flex;
gap: 10px;
padding: 16px 32px;
background: rgba(232, 165, 133, 0.05);
border-bottom: 1px solid var(--laouts-hairline-2);
flex-wrap: wrap;
}
body.laouts .laoutsCategoryReview__bulk {
font-family: var(--laouts-font-sans);
font-size: 13px;
font-weight: 500;
padding: 9px 16px;
background: var(--laouts-coral);
color: var(--laouts-bg);
border: 1px solid var(--laouts-coral);
border-radius: var(--laouts-radius-sm);
cursor: pointer;
transition: all 0.15s ease;
letter-spacing: 0.01em;
}
body.laouts .laoutsCategoryReview__bulk:hover {
filter: brightness(1.06);
transform: translateY(-1px);
}
body.laouts .laoutsCategoryReview__bulk--ghost {
background: transparent;
color: var(--laouts-bone-soft);
border-color: var(--laouts-hairline-2);
}
body.laouts .laoutsCategoryReview__bulk--ghost:hover {
border-color: var(--laouts-coral);
color: var(--laouts-bone);
background: rgba(232, 165, 133, 0.06);
transform: none;
}
body.laouts .laoutsCategoryReview__grid {
flex: 1;
overflow-y: auto;
padding: 22px 32px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
scrollbar-width: thin;
scrollbar-color: var(--laouts-hairline-2) transparent;
}
body.laouts .laoutsCategoryReview__grid::-webkit-scrollbar {
width: 6px;
}
body.laouts .laoutsCategoryReview__grid::-webkit-scrollbar-thumb {
background: var(--laouts-hairline-2);
border-radius: 3px;
}
body.laouts .laoutsCategoryReview__card {
display: flex;
flex-direction: column;
gap: 6px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--laouts-radius-md);
padding: 0;
text-align: left;
cursor: pointer;
font-family: var(--laouts-font-sans);
color: var(--laouts-bone);
transition: all 0.18s ease;
}
body.laouts .laoutsCategoryReview__card:hover {
transform: translateY(-2px);
}
body.laouts .laoutsCategoryReview__thumb {
position: relative;
aspect-ratio: 1 / 1;
background: var(--laouts-bg-2);
border-radius: var(--laouts-radius-md);
overflow: hidden;
border: 2px solid rgba(201, 168, 168, 0.25);
transition: border-color 0.18s ease, opacity 0.18s ease;
}
body.laouts .laoutsCategoryReview__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: 0.65;
filter: saturate(0.8);
transition: opacity 0.18s ease, filter 0.18s ease;
}
body.laouts .laoutsCategoryReview__card--rescued .laoutsCategoryReview__thumb {
border-color: var(--laouts-coral);
box-shadow: 0 8px 24px rgba(232, 165, 133, 0.20);
}
body.laouts .laoutsCategoryReview__card--rescued .laoutsCategoryReview__thumb img {
opacity: 1;
filter: none;
}
body.laouts .laoutsCategoryReview__badge {
position: absolute;
top: 8px; left: 8px;
font-family: var(--laouts-font-mono);
font-size: 9.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 999px;
background: rgba(20, 8, 18, 0.85);
color: var(--laouts-bone-soft);
border: 1px solid var(--laouts-hairline-2);
}
body.laouts .laoutsCategoryReview__badge--keeper {
background: var(--laouts-coral);
color: var(--laouts-bg);
border-color: var(--laouts-coral);
display: none;
}
body.laouts .laoutsCategoryReview__card--rescued .laoutsCategoryReview__badge--flagged {
display: none;
}
body.laouts .laoutsCategoryReview__card--rescued .laoutsCategoryReview__badge--keeper {
display: inline-block;
}
body.laouts .laoutsCategoryReview__name {
font-size: 12px;
color: var(--laouts-bone-soft);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: var(--laouts-font-mono);
letter-spacing: 0.02em;
}
body.laouts .laoutsCategoryReview__hint {
font-size: 11px;
color: var(--laouts-mauve);
font-family: var(--laouts-font-mono);
letter-spacing: 0.06em;
}
body.laouts .laoutsCategoryReview__card--rescued .laoutsCategoryReview__hint::before {
content: "✓ rescued · ";
color: var(--laouts-coral);
}
body.laouts .laoutsCategoryReview__empty {
grid-column: 1 / -1;
text-align: center;
padding: 64px 32px;
color: var(--laouts-mauve);
font-family: var(--laouts-font-mono);
font-size: 13px;
letter-spacing: 0.06em;
}
body.laouts .laoutsCategoryReview__empty button {
margin-left: 12px;
padding: 8px 14px;
background: var(--laouts-coral);
color: var(--laouts-bg);
border: none;
border-radius: var(--laouts-radius-sm);
cursor: pointer;
font-family: var(--laouts-font-sans);
font-size: 12px;
}
body.laouts .laoutsCategoryReview__foot {
padding: 16px 32px;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--laouts-hairline-2);
background: rgba(20, 8, 18, 0.4);
}
body.laouts .laoutsCategoryReview__footHint {
font-family: var(--laouts-font-mono);
font-size: 11px;
letter-spacing: 0.06em;
color: var(--laouts-mauve);
}
body.laouts .laoutsCategoryReview__done {
font-family: var(--laouts-font-sans);
font-weight: 500;
font-size: 14px;
padding: 11px 22px;
background: var(--laouts-coral);
color: var(--laouts-bg);
border: 1px solid var(--laouts-coral);
border-radius: var(--laouts-radius-sm);
cursor: pointer;
box-shadow: 0 8px 18px var(--laouts-coral-shadow);
transition: all 0.15s ease;
}
body.laouts .laoutsCategoryReview__done:hover {
filter: brightness(1.08);
transform: translateY(-1px);
}
/* ──────────────── Phase-shift handoff · pulse + tip ──────────── */
/* Christina: "once the cull is done, there's no real shift to the next
* phase." After the band collapses, the Build CTA pulses for 8s and a
* floating tip points at it explaining the next step. */
@keyframes laoutsBuildPulseAnim {
0%, 100% {
box-shadow:
0 14px 32px var(--laouts-coral-shadow),
0 0 0 0 rgba(232, 165, 133, 0.55);
}
50% {
box-shadow:
0 14px 32px var(--laouts-coral-shadow),
0 0 0 12px rgba(232, 165, 133, 0);
}
}
body.laouts .laoutsBuildPulse {
animation: laoutsBuildPulseAnim 1.6s ease-out 4 !important;
}
body.laouts .laoutsNextStepTip {
position: fixed;
z-index: 9300;
width: 340px;
background: linear-gradient(165deg, var(--laouts-bg-1) 0%, #1c1019 100%);
border: 1px solid var(--laouts-coral);
border-radius: var(--laouts-radius-md);
padding: 16px 18px 14px;
box-shadow: 0 18px 40px rgba(20, 8, 18, 0.5);
font-family: var(--laouts-font-sans);
color: var(--laouts-bone);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.24s ease, transform 0.24s ease;
}
body.laouts .laoutsNextStepTip--in {
opacity: 1;
transform: translateY(0);
}
body.laouts .laoutsNextStepTip__head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
body.laouts .laoutsNextStepTip__lab {
font-family: var(--laouts-font-mono);
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--laouts-coral);
}
body.laouts .laoutsNextStepTip__close {
width: 24px; height: 24px;
border-radius: 50%;
border: 1px solid var(--laouts-hairline-2);
background: transparent;
color: var(--laouts-bone-soft);
font-size: 14px;
line-height: 1;
cursor: pointer;
transition: all 0.15s ease;
}
body.laouts .laoutsNextStepTip__close:hover {
border-color: var(--laouts-coral);
color: var(--laouts-bone);
}
body.laouts .laoutsNextStepTip__body {
font-size: 14px;
line-height: 1.5;
color: var(--laouts-bone-soft);
margin: 0;
}
body.laouts .laoutsNextStepTip__body strong {
color: var(--laouts-coral);
font-weight: 500;
}
body.laouts .laoutsNextStepTip__body em {
font-style: italic;
color: var(--laouts-bone);
font-family: var(--laouts-font-serif);
}
body.laouts .laoutsNextStepTip__arrow {
position: absolute;
bottom: -8px;
left: 50%;
width: 14px;
height: 14px;
background: linear-gradient(135deg, transparent 50%, var(--laouts-bg-1) 50%);
border-right: 1px solid var(--laouts-coral);
border-bottom: 1px solid var(--laouts-coral);
transform: translateX(-50%) rotate(45deg);
}
/* ──────────────── Build CTA · two-line label ────────────────── */
/* Auto-arrange my photos / refine each spread after */
body.laouts .laoutsLibSticky__buildStack {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.15;
gap: 2px;
text-align: left;
}
body.laouts .laoutsLibSticky__buildLab {
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0.005em !important;
color: inherit;
}
body.laouts .laoutsLibSticky__buildSub {
font-family: var(--laouts-font-mono);
font-size: 10px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(28, 17, 25, 0.75);
font-weight: 400;
}
/* ──────────────── Library editorial masthead · mission control ──── */
/* Christina: this section "is almost an afterthought and it's one of the
* most important boxes." Treat it like a magazine masthead — uppercase
* eyebrow, big serif number, italic accent, hairline-divided meta line,
* three clickable stat cards for the cull breakdown, then the controls
* row, then a dedicated "+ Add more photos · re-cull" CTA. */
body.laouts .laoutsLibMast {
background: linear-gradient(165deg, var(--laouts-bg-1) 0%, #1c1019 100%);
border: 1px solid var(--laouts-hairline-2);
border-radius: var(--laouts-radius-lg);
padding: 18px 18px 16px;
margin: 0 0 14px 0;
}
body.laouts .laoutsLibMast__head {
text-align: center;
border-bottom: 1px solid var(--laouts-hairline-2);
padding-bottom: 12px;
margin-bottom: 14px;
}
body.laouts .laoutsLibMast__eyebrow {
font-family: var(--laouts-font-mono);
font-size: 9.5px;
letter-spacing: 0.30em;
text-transform: uppercase;
color: var(--laouts-mauve-soft);
margin-bottom: 4px;
}
body.laouts .laoutsLibMast__title {
font-family: var(--laouts-font-serif);
font-size: 30px;
font-weight: 400;
color: var(--laouts-bone);
line-height: 1.05;
letter-spacing: -0.012em;
margin-bottom: 4px;
display: flex;
justify-content: center;
align-items: baseline;
gap: 8px;
}
body.laouts .laoutsLibMast__num {
font-feature-settings: "tnum";
}
body.laouts .laoutsLibMast__lab {
font-style: italic;
color: var(--laouts-coral);
font-size: 0.7em;
}
body.laouts .laoutsLibMast__meta {
font-family: var(--laouts-font-mono);
font-size: 10px;
letter-spacing: 0.08em;
color: var(--laouts-mauve);
}
body.laouts .laoutsLibMast__meta strong {
color: var(--laouts-bone-soft);
font-weight: 500;
}
body.laouts .laoutsLibMast__breakdown {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
}
body.laouts .laoutsLibMast__breakdown--four {
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
body.laouts .laoutsLibMast__statCard--active {
background: rgba(232, 165, 133, 0.18) !important;
border-color: var(--laouts-coral) !important;
box-shadow: 0 0 0 1px var(--laouts-coral), 0 8px 18px rgba(232, 165, 133, 0.20) !important;
}
body.laouts .laoutsLibMast__statCard--active .laoutsLibMast__statNum {
color: var(--laouts-coral) !important;
}
body.laouts .laoutsLibMast__statCard--active .laoutsLibMast__statLab {
color: var(--laouts-bone) !important;
}
body.laouts .laoutsLibMast__statReview {
position: absolute;
top: 4px;
right: 4px;
width: 16px;
height: 16px;
border-radius: 50%;
background: rgba(232, 165, 133, 0.20);
color: var(--laouts-coral);
font-family: var(--laouts-font-mono);
font-size: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.15s ease, transform 0.15s ease;
z-index: 2;
}
body.laouts .laoutsLibMast__statReview:hover {
background: var(--laouts-coral);
color: var(--laouts-bg);
transform: scale(1.12);
}
body.laouts .laoutsLibMast__statCard {
position: relative;
}
/* Hide the old "Showing X" filter dropdown — masthead stat cards
* replace it. Christina: redundant control, confusing the section. */
body.laouts .laoutsLibTools__filterWrap,
body.laouts .laoutsLibTools__row--top {
display: none !important;
}
body.laouts .laoutsLibMast__statCard {
background: rgba(201, 168, 168, 0.08);
border: 1px solid rgba(201, 168, 168, 0.20);
border-radius: 8px;
padding: 10px;
text-align: center;
cursor: pointer;
font-family: var(--laouts-font-sans);
transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
body.laouts .laoutsLibMast__statCard:hover {
border-color: var(--laouts-coral);
background: rgba(232, 165, 133, 0.08);
transform: translateY(-1px);
}
body.laouts .laoutsLibMast__statCard--coral {
background: rgba(232, 165, 133, 0.08);
border-color: rgba(232, 165, 133, 0.30);
}
body.laouts .laoutsLibMast__statNum {
display: block;
font-family: var(--laouts-font-serif);
font-size: 18px;
font-weight: 500;
color: var(--laouts-mauve);
line-height: 1;
}
body.laouts .laoutsLibMast__statCard--coral .laoutsLibMast__statNum {
color: var(--laouts-coral);
}
body.laouts .laoutsLibMast__statLab {
display: block;
font-family: var(--laouts-font-mono);
font-size: 9px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--laouts-mauve-soft);
margin-top: 3px;
}
body.laouts .laoutsLibMast__addMore {
width: 100%;
margin-top: 12px;
padding: 11px 14px;
background: rgba(232, 165, 133, 0.10);
border: 1px solid var(--laouts-coral);
border-radius: var(--laouts-radius-md);
color: var(--laouts-bone);
font-family: var(--laouts-font-sans);
font-size: 13px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: background 0.15s ease, transform 0.15s ease;
}
body.laouts .laoutsLibMast__addMore:hover {
background: rgba(232, 165, 133, 0.16);
transform: translateY(-1px);
}
body.laouts .laoutsLibMast__addMoreLab {
color: var(--laouts-bone);
}
body.laouts .laoutsLibMast__addMoreSub {
font-family: var(--laouts-font-mono);
font-size: 11px;
letter-spacing: 0.06em;
color: var(--laouts-coral);
}
/* ──────────────── Path picker · lock focus · blur engine behind ──── */
/* Christina: the path picker felt non-modal — engine still functional
* behind it. Match the cull-lock pattern: blur and disable everything
* else when the picker is up. */
body.laouts:has(.laoutsPathPicker.laoutsPathPicker--in) .appMain > *:not(.canvasFrame),
body.laouts:has(.laoutsPathPicker.laoutsPathPicker--in) .libDock,
body.laouts:has(.laoutsPathPicker.laoutsPathPicker--in) .sidebar#rightInspector,
body.laouts:has(.laoutsPathPicker.laoutsPathPicker--in) aside#rightInspector,
body.laouts:has(.laoutsPathPicker.laoutsPathPicker--in) .laoutsLibSticky,
body.laouts:has(.laoutsPathPicker.laoutsPathPicker--in) .editorTopBar,
body.laouts:has(.laoutsPathPicker.laoutsPathPicker--in) .spreadRail {
filter: blur(6px) saturate(0.6) !important;
opacity: 0.55 !important;
pointer-events: none !important;
transition: filter 0.4s ease, opacity 0.4s ease;
}
body.laouts:has(.laoutsPathPicker.laoutsPathPicker--in) .laoutsSmartTextBtn,
body.laouts:has(.laoutsPathPicker.laoutsPathPicker--in) .laoutsTour__trigger,
body.laouts:has(.laoutsPathPicker.laoutsPathPicker--in) #laoutsNextStepTip {
display: none !important;
}
/* ──────────────── Post-cull canvas path picker (Option C) ──────── */
/* Christina picked Option C — when post-cull and no spreads built yet,
* surface a path picker INSIDE the canvas: Auto-arrange vs drag manually. */
body.laouts .laoutsPathPicker {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.96);
width: min(640px, calc(100vw - 48px));
background: linear-gradient(165deg, var(--laouts-bg-1) 0%, #1c1019 100%);
border: 1px solid var(--laouts-coral);
border-radius: var(--laouts-radius-lg);
padding: 28px 32px 24px;
box-shadow: 0 32px 80px rgba(20, 8, 18, 0.55);
z-index: 9000;
opacity: 0;
pointer-events: auto;
transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
font-family: var(--laouts-font-sans);
}
body.laouts .laoutsPathPicker--in {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
body.laouts .laoutsPathPicker__head {
text-align: center;
margin-bottom: 22px;
}
body.laouts .laoutsPathPicker__lab {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--laouts-font-mono);
font-size: 11px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--laouts-coral);
margin-bottom: 12px;
}
body.laouts .laoutsPathPicker__labDot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--laouts-coral);
box-shadow: 0 0 8px var(--laouts-coral-shadow);
}
body.laouts .laoutsPathPicker__title {
font-family: var(--laouts-font-serif);
font-weight: 400;
font-size: 26px;
line-height: 1.2;
letter-spacing: -0.012em;
color: var(--laouts-bone);
margin: 0;
}
body.laouts .laoutsPathPicker__title em {
font-style: italic;
color: var(--laouts-coral);
}
body.laouts .laoutsPathPicker__choices {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 600px) {
body.laouts .laoutsPathPicker__choices { grid-template-columns: 1fr; }
}
body.laouts .laoutsPathPicker__choice {
background: linear-gradient(165deg, var(--laouts-bg-2) 0%, #1c1019 100%);
border: 1px solid var(--laouts-hairline-2);
border-radius: var(--laouts-radius-md);
padding: 18px 18px 16px;
text-align: left;
cursor: pointer;
font-family: var(--laouts-font-sans);
color: var(--laouts-bone);
transition: all 0.18s ease;
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
}
body.laouts .laoutsPathPicker__choice:hover {
border-color: var(--laouts-coral);
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(20, 8, 18, 0.4);
}
body.laouts .laoutsPathPicker__choice--primary {
background: linear-gradient(165deg, rgba(232, 165, 133, 0.18) 0%, rgba(232, 165, 133, 0.06) 100%);
border-color: var(--laouts-coral);
box-shadow: 0 14px 32px var(--laouts-coral-shadow);
animation: laoutsPathPickerPulse 3.2s ease-in-out infinite;
}
@keyframes laoutsPathPickerPulse {
0%, 100% { box-shadow: 0 14px 32px var(--laouts-coral-shadow); }
50% { box-shadow: 0 14px 32px var(--laouts-coral-shadow), 0 0 0 6px rgba(232, 165, 133, 0.18); }
}
body.laouts .laoutsPathPicker__choice--ghost {
background: transparent;
border-style: dashed;
}
body.laouts .laoutsPathPicker__badge {
font-family: var(--laouts-font-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--laouts-coral);
align-self: flex-start;
}
body.laouts .laoutsPathPicker__badge--ghost {
color: var(--laouts-mauve);
}
body.laouts .laoutsPathPicker__choiceTitle {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--laouts-font-serif);
font-weight: 500;
font-size: 19px;
line-height: 1.2;
letter-spacing: -0.005em;
color: var(--laouts-bone);
}
body.laouts .laoutsPathPicker__choiceIcon {
font-size: 16px;
color: var(--laouts-coral);
}
body.laouts .laoutsPathPicker__choiceMeta {
font-size: 13px;
line-height: 1.5;
color: var(--laouts-bone-soft);
}
body.laouts .laoutsPathPicker__choiceFoot {
margin-top: auto;
font-family: var(--laouts-font-mono);
font-size: 11px;
letter-spacing: 0.05em;
color: var(--laouts-mauve);
padding-top: 8px;
}
/* ──────────────── ENGINE LAYOUT A · canvas hero, floating panels ──── */
/* Christina picked Layout A. The 3-column grid collapses into a canvas-
* dominant single surface. Library and Inspector lift off the page edges
* and float as backdrop-blurred glass panels with a draggable feel. */
body.laouts .appMain {
grid-template-columns: 1fr !important;
position: relative !important;
}
/* Library panel · floats top-left, glass surface */
body.laouts .libDock {
position: fixed !important;
top: 96px !important;
left: 16px !important;
width: 320px !important;
height: calc(100vh - 132px) !important; height: calc(100dvh - 132px) !important;
z-index: 35;
/** v1 launch · 2026-05-10 · lag fix
* Was: backdrop-filter: blur(18px) saturate(1.1). Decorative, but
* with a heavy library of photos behind the panel, the GPU
* re-composites on every render. Solid bg is enough — the panel
* isn't actually overlapping a photo (the right column lives
* outside the canvas). */
background: var(--laouts-bg, #1c1119) !important;
border: 1px solid var(--laouts-hairline) !important;
border-radius: var(--laouts-radius-lg) !important;
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4) !important;
overflow: hidden !important;
transition: width 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
left 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
body.laouts .libraryColumn {
background: transparent !important;
border-right: none !important;
}
body.laouts.lib-panel-collapsed .libDock {
width: 56px !important;
}
body.laouts .libResizeHandle,
body.laouts .libPanelHandle {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
body.laouts .libPanelHandle {
background: rgba(232, 165, 133, 0.10) !important;
color: var(--laouts-coral) !important;
border-radius: 0 var(--laouts-radius-lg) var(--laouts-radius-lg) 0 !important;
}
/* Right inspector · floats top-right, glass surface */
body.laouts .sidebar#rightInspector,
body.laouts aside#rightInspector {
position: fixed !important;
top: 96px !important;
right: 16px !important;
width: 300px !important;
max-height: calc(100vh - 132px) !important; max-height: calc(100dvh - 132px) !important;
overflow-y: auto !important;
z-index: 35;
/** v1 launch · 2026-05-10 · lag fix · drop expensive backdrop-blur. */
background: var(--laouts-bg, #1c1119) !important;
border: 1px solid var(--laouts-hairline) !important;
border-radius: var(--laouts-radius-lg) !important;
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4) !important;
padding: 12px !important;
scrollbar-width: thin;
scrollbar-color: var(--laouts-hairline-2) transparent;
}
body.laouts .sidebar#rightInspector::-webkit-scrollbar,
body.laouts aside#rightInspector::-webkit-scrollbar { width: 6px; }
body.laouts .sidebar#rightInspector::-webkit-scrollbar-thumb,
body.laouts aside#rightInspector::-webkit-scrollbar-thumb {
background: var(--laouts-hairline-2);
border-radius: 3px;
}
/* Center column / canvas takes full width now */
body.laouts .centerColumn {
width: 100% !important;
margin: 0 auto !important;
padding: 0 360px !important;
}
@media (max-width: 1280px) {
body.laouts .centerColumn { padding: 0 24px !important; }
body.laouts .libDock,
body.laouts .sidebar#rightInspector,
body.laouts aside#rightInspector { display: none; }
}
/* Sticky bottom Build button · move to floating bottom-center */
body.laouts .laoutsLibSticky {
position: fixed !important;
bottom: 16px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: auto !important;
z-index: 40;
background: transparent !important;
border: none !important;
padding: 0 !important;
}
body.laouts .laoutsLibSticky__inner {
background: rgba(28, 17, 25, 0.92) !important;
backdrop-filter: blur(18px) !important;
border: 1px solid var(--laouts-coral) !important;
border-radius: 999px !important;
padding: 6px !important;
box-shadow: 0 18px 40px var(--laouts-coral-shadow) !important;
}
body.laouts .laoutsLibSticky__build {
border-radius: 999px !important;
}
/* During the cull lock, panels need to stay blurred too */
body.laouts.laouts--cull-locked .libDock,
body.laouts.laouts--cull-locked .sidebar#rightInspector,
body.laouts.laouts--cull-locked aside#rightInspector,
body.laouts.laouts--cull-locked .laoutsLibSticky {
filter: blur(6px) saturate(0.6);
opacity: 0.55;
pointer-events: none;
transition: filter 0.5s ease, opacity 0.5s ease;
}
body.laouts:has(.laoutsCullPanel--prompting) .libDock,
body.laouts:has(.laoutsCullPanel--prompting) .sidebar#rightInspector,
body.laouts:has(.laoutsCullPanel--prompting) aside#rightInspector,
body.laouts:has(.laoutsCullPanel--prompting) .laoutsLibSticky {
filter: blur(6px) saturate(0.6);
opacity: 0.55;
pointer-events: none;
}
/* ──────────────── Pinyon Script · explicitly killed ────────── */
body.laouts [class*="pinyon"],
body.laouts [class*="Pinyon"],
body.laouts [class*="cursive"] {
font-family: var(--laouts-font-serif) !important;
font-style: italic !important;
}
/* ──────────────── Day 1 final · library warm bone/cream ────────
* CHRISTINA 2026-05-08 · the library column / libDock had a violet
* tint bleeding through the translucent rgba(28,17,25,0.86) glass +
* backdrop-filter combo, especially on photo thumbnails. Same root
* issue we fixed on Organize Book. Force a flat warm cocoa-plum
* (#1f1418) so photos read true and there is no violet push.
* No gradient endpoints. Drop backdrop-filter so blur can't pick up
* stage canvas violet. */
body.laouts .libDock {
background: #1f1418 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.laouts .libraryColumn,
body.laouts .libraryColumn.lightTableStrip,
body.laouts #libDock .libraryColumn,
body.laouts #libDock .libraryColumn.lightTableStrip,
body.laouts #imageGalleryDock,
body.laouts #imageGalleryDock.libraryColumn {
background: #1f1418 !important;
background-image: none !important;
}
/* ──────────────── Day 1 final · page-nav chevrons match ─────────
* The 3D page-flip chevrons (.laoutsFlip__chev) sit at viewport
* edges and read as quiet glass slivers. Apply the same coral
* hairline + warm-plum ground as the cycler arrows so they read
* as controls. */
body.laouts .laoutsFlip__chev {
background: rgba(28, 17, 25, 0.7) !important;
border: 1px solid rgba(232, 165, 133, 0.35) !important;
color: var(--laouts-bone-soft) !important;
}
body.laouts .laoutsFlip__chev:hover {
background: rgba(232, 165, 133, 0.12) !important;
border-color: var(--laouts-coral) !important;
color: var(--laouts-bone) !important;
}
/* ──────────────── SINGLE RIGHT COLUMN · 2026-05-10 ────────────────────
*
* Christina: 'i want all the menu in one long stack, not 2 menus side
* by side.'
*
* Was (3 columns): Canvas | Library | Inspector — library + inspector
* read as two separate panels.
* Now (2 columns): Canvas | (Library on top of Inspector) — single
* continuous right column, library and inspector
* stacked vertically inside it.
*
* Mechanism: collapse appMain to a 2-column grid, give the canvas
* full height (rows 1+2), put library in row 1 of column 2 and
* inspector in row 2. The vertical split is 60/40 — library gets
* more height because the photo grid has more content; inspector is
* compact and scrolls inside its row.
*
* Selector specificity: `html body.laouts X` (3) beats engine-chrome's
* `body.laouts X` (2) regardless of CSS load order. */
/* Grid · tab bar at top of right column · 4 tabs · only one section
* visible at a time. Library + Inspector now BOTH live in row 2 of
* column 2; CSS toggles which one is display:block based on the
* body.right-tab-X class set by right-tabs.js. */
html body.laouts .appMain {
grid-template-columns: minmax(0, 1fr) 460px !important;
grid-template-rows: 44px minmax(0, 1fr) !important;
}
/* Top-bar action buttons centered in their row instead of hugging
* the right edge. Christina: 'send preview and order book button
* should be centered on that row it's on.' */
/* v3.23 · Christina 2026-05-12 · Share/Order were forcibly centered in
* the topbar's right cell — read like the page's primary CTAs even
* though they're end-of-flow actions. Right-align them so the canvas
* gets the visual center back. */
html body.laouts .editorTopBar__cell--right {
justify-content: flex-end !important;
}
html body.laouts .editorTopBar__pack#editorTopBarNormalActions {
justify-content: flex-end !important;
}
/* v3.24 · Christina 2026-05-12 · Share + Order book buttons should
* not show up on the "Curate complete · What's next?" prompt — wrong
* spot. Hide them while the cull panel is in the prompting state
* (and while the cull is still scanning, for symmetry). The buttons
* return as soon as the user picks a path. */
html body.laouts:has(.laoutsCullPanel--prompting) .editorTopBar__pack#editorTopBarNormalActions,
html body.laouts:has(.laoutsCullPanel--scanning) .editorTopBar__pack#editorTopBarNormalActions,
html body.laouts.laouts--cull-locked .editorTopBar__pack#editorTopBarNormalActions {
visibility: hidden !important;
pointer-events: none !important;
}
/* v3.22 · Christina 2026-05-12 · 'Send a preview + Order book export
* buttons take too much real estate.' Compact variants for the topbar
* Share + Order pair. Shorter padding, smaller font. Hover still
* legible. */
html body.laouts .editorTopBar__pack--compact {
gap: 4px !important;
}
html body.laouts .editorTbBtn--compact {
padding: 6px 12px !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
min-height: 30px !important;
line-height: 1.1 !important;
}
/* v3.28 · Christina 2026-05-12 · take it further — icon-only.
* Same hover tooltips via title=. Tiny coral ring on the export
* (primary action) so it still reads as the next step. */
html body.laouts .editorTopBar__pack--icons {
gap: 6px !important;
}
html body.laouts .editorTbBtn--icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
padding: 0 !important;
border-radius: 8px !important;
border: 1px solid rgba(232,165,133,0.20) !important;
background: transparent !important;
color: var(--laouts-bone-soft, #c8b6a8) !important;
cursor: pointer !important;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease !important;
}
html body.laouts .editorTbBtn--icon:hover {
color: var(--laouts-bone, #f3e6dc) !important;
background: rgba(232,165,133,0.08) !important;
border-color: rgba(232,165,133,0.35) !important;
}
html body.laouts .editorTbBtn--icon.editorTbBtn--export {
color: var(--laouts-coral, #e8a585) !important;
border-color: rgba(232,165,133,0.40) !important;
}
html body.laouts .editorTbBtn--icon.editorTbBtn--export:hover {
background: rgba(232,165,133,0.14) !important;
border-color: rgba(232,165,133,0.60) !important;
}
/* v3.30 · Christina 2026-05-12 · Share + Order moved to the brand
* topbar (where the version chip used to live). Hide the editor-topbar
* clones — same DOM ids, same handlers, just don't paint them.
*
* v3.33 · ALSO hide #laoutsTopActionBar defensively. focus-mode.js
* used to physically move these buttons into a separate centered bar
* (the doubled-button regression Christina hit on v3.32). That
* relocation is disabled now, but a stale bar could still exist from
* earlier sessions — kill it on sight. */
html body.laouts .editorTopBar__pack#editorTopBarNormalActions,
html body.laouts #laoutsTopActionBar {
display: none !important;
}
/* v3.37 · stepper is now a flex CHILD of the brand topbar (mounted
* there by laouts-engine-shell.js). Wordmark on the left, stepper
* flex-grows in the middle, float dock floats over the right. One
* row · ~48px of vertical real estate handed back to the canvas. */
html body.laouts .laoutsBrandTopbar .laoutsStepper {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
height: auto !important;
flex: 1 1 auto !important;
min-width: 0 !important;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom: none !important;
padding: 0 !important;
margin-right: 120px !important; /* leave room for the float dock pinned right */
}
html body.laouts .laoutsBrandTopbar .laoutsStepper__inner {
max-width: 100% !important;
justify-content: center !important;
}
/* drop body padding · the stepper is in the topbar row now */
html body.laouts {
padding-top: var(--laouts-topbar-h, 60px) !important;
}
html body.laouts.laouts--lookStripActive {
padding-top: calc(var(--laouts-topbar-h, 60px) + var(--laouts-look-strip-h, 36px)) !important;
}
html body.laouts.laouts--lookStripActive .laoutsLookStrip {
top: var(--laouts-topbar-h, 60px) !important;
}
/* When the stepper hasn't yet been mounted inside the topbar (boot
* race) fall back to hiding the body-level stepper so we don't get
* a doubled row briefly. */
html body.laouts > .laoutsStepper {
display: none !important;
}
/* v3.36 · NEED A HAND pill moves to bottom-LEFT so it stops
* overlapping the BUILD MY BOOK sticky bar (bottom of the right
* library column). Both Share/Order (top-right) and BUILD (bottom-
* right) are on the right · the left edge is empty real estate. */
html body.laouts .laoutsCoachPill {
right: auto !important;
left: 18px !important;
bottom: 18px !important;
}
/* v3.49 · Christina 2026-05-13 · Hide BUILD MY BOOK sticky CTA once
* the book has been auto-built. The user came through /create →
* cull → path picker (Auto-arrange) which already ran the build;
* leaving the button visible at the bottom of the library suggests
* the book ISN'T built yet, which is confusing. It still shows for
* the manual-arrange path where the user actually needs to click it. */
html body.laouts.laouts--has-built .laoutsLibSticky__build,
html body.laouts.laouts--has-built [data-laouts-build-book] {
display: none !important;
}
/* v3.40 · Christina 2026-05-12 · Hide the NEED A HAND coach pill
* entirely during cull · clicking it during cull opens the design-
* surface coach walkthrough (Try a different layout, Add a caption,
* etc.) which is wrong context. Bring it back when cull settles. */
html body.laouts.laouts--cull-locked .laoutsCoachPill,
html body.laouts:has(.laoutsCullPanel--scanning) .laoutsCoachPill,
html body.laouts:has(.laoutsCullPanel [data-cull-welcome]:not([hidden])) .laoutsCoachPill,
html body.laouts:has(.laoutsCullPanel [data-cull-optin]:not([hidden])) .laoutsCoachPill,
html body.laouts:has(.laoutsCullPanel [data-cull-ready]:not([hidden])) .laoutsCoachPill,
html body.laouts:has(.laoutsCullPanel [data-cull-main]:not([hidden])) .laoutsCoachPill {
display: none !important;
}
/* v3.44 · Christina 2026-05-13 · Two more things to lock during the
* cull (so the user can't touch a half-built book):
* 1) The floating Share/Order dock · disabled + dimmed
* 2) The editor canvas + library + inspector below the curate hero ·
* kept blurred + non-interactive through the ENTIRE scan, not
* just the welcome/optin/ready prompts (chrome.css only blurred
* on those three states; the long scanning phase was leaving
* the engine partially visible). */
html body.laouts.laouts--cull-locked .laoutsFloatDock,
html body.laouts:has(.laoutsCullPanel--scanning) .laoutsFloatDock {
pointer-events: none !important;
opacity: 0.35 !important;
filter: grayscale(0.6) !important;
}
html body.laouts.laouts--cull-locked .appMain,
html body.laouts:has(.laoutsCullPanel--scanning) .appMain {
filter: blur(8px) brightness(0.7) !important;
pointer-events: none !important;
user-select: none !important;
transition: filter 0.3s ease !important;
}
html body.laouts.laouts--cull-locked .laoutsBrandTopbar,
html body.laouts:has(.laoutsCullPanel--scanning) .laoutsBrandTopbar {
filter: blur(6px) brightness(0.7) !important;
}
/* Keep the stepper (which lives inside the brand topbar) visible
* but non-interactive · the user can still see "I'm at step 3 · CURATE"
* even while the rest of the topbar is blurred. */
html body.laouts.laouts--cull-locked .laoutsBrandTopbar .laoutsStepper,
html body.laouts:has(.laoutsCullPanel--scanning) .laoutsBrandTopbar .laoutsStepper {
pointer-events: none !important;
}
/* v3.46 · Christina 2026-05-13 · Build-progress curtain UI · the
* existing BUILDING state of the curate hero was a spinner + 'Building
* your book…' headline only. The user had no idea how far along the
* build was or how much longer it'd take. Expanded into a determinate
* progress bar + spread counter + phase narrator + ETA. */
html body.laouts .laoutsCurateHero__buildBar {
width: min(540px, 80vw) !important;
height: 6px !important;
margin: 18px auto 12px auto !important;
background: rgba(232, 165, 133, 0.12) !important;
border-radius: 999px !important;
overflow: hidden !important;
}
html body.laouts .laoutsCurateHero__buildFill {
height: 100% !important;
background: linear-gradient(90deg, #e8a585 0%, #f3c8a8 60%, #f3e6dc 100%) !important;
border-radius: 999px !important;
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-shadow: 0 0 12px rgba(232, 165, 133, 0.35) !important;
}
html body.laouts .laoutsCurateHero__buildMeta {
font-family: var(--laouts-font-mono, 'JetBrains Mono', monospace) !important;
font-size: 11px !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: var(--laouts-bone-soft, #c8b6a8) !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
justify-content: center !important;
max-width: min(620px, 90vw) !important;
margin: 0 auto !important;
line-height: 1.6 !important;
}
html body.laouts .laoutsCurateHero__buildMeta [data-build-counter] {
color: var(--laouts-coral, #e8a585) !important;
font-weight: 600 !important;
}
html body.laouts .laoutsCurateHero__buildMeta [data-build-phase] {
font-style: italic !important;
text-transform: none !important;
letter-spacing: 0.02em !important;
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 13px !important;
color: var(--laouts-bone, #f3e6dc) !important;
}
html body.laouts .laoutsCurateHero__buildMeta [data-build-eta] {
color: var(--laouts-muted, #8a7d72) !important;
}
html body.laouts .laoutsCurateHero__buildSep {
opacity: 0.4 !important;
}
/* v3.42 · Christina 2026-05-12 · A small element (likely a chevron
* tail or focus dot) was overlapping the 'LEFT PG' / 'RIGHT PG'
* cycler labels. Defensive fix: push the LEFT pair from 25% → 30%
* and RIGHT from 75% → 70%, and add 14px horizontal padding to
* label positions so nothing crowds the text. The cyclers still
* read as positioned over each page's center, just slightly closer
* to the seam. */
html body.laouts .laoutsSpreadArrows__pair[data-scope="left"] { left: 30% !important; }
html body.laouts .laoutsSpreadArrows__pair[data-scope="right"] { left: 70% !important; }
html body.laouts .laoutsSpreadArrows__lab--left { left: 14px !important; }
html body.laouts .laoutsSpreadArrows__lab--right { right: 14px !important; }
/* v3.40 · EMERGENCY BLUR RELEASE · once the user has clicked
* 'Skip the cull · use all my photos', body gets data-cull-skipped="1"
* and we forcibly kill every blur source. This overrides the
* chrome.css :has() selectors that might still match if some inner
* cull div is visible. The user's intent ("skip") always wins. */
html body.laouts[data-cull-skipped="1"] .appMain,
html body.laouts[data-cull-skipped="1"] .laoutsToolRail,
html body.laouts[data-cull-skipped="1"] .laoutsBrandTopbar,
html body.laouts[data-cull-skipped="1"] .laoutsPathPicker,
html body.laouts[data-cull-skipped="1"] .stageWorkArea,
html body.laouts[data-cull-skipped="1"] .centerColumn,
html body.laouts[data-cull-skipped="1"] #wrap,
html body.laouts[data-cull-skipped="1"] .libraryColumn,
html body.laouts[data-cull-skipped="1"] #rightInspector {
filter: none !important;
-webkit-filter: none !important;
pointer-events: auto !important;
opacity: 1 !important;
user-select: auto !important;
}
/* v3.33 · floating action dock — TOP-right of the viewport now.
* v3.32 was bottom-right but collided with the BUILD MY BOOK sticky
* action bar and the NEED HELP coach pill. Top-right is empty real
* estate (just above the brand topbar, opposite the wordmark). */
html body.laouts .laoutsFloatDock {
position: fixed !important;
right: 18px !important;
top: 14px !important;
bottom: auto !important;
z-index: 9000 !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 6px !important;
border-radius: 999px !important;
background: rgba(15, 13, 16, 0.85) !important;
border: 1px solid rgba(232,165,133,0.20) !important;
backdrop-filter: blur(8px) saturate(110%) !important;
-webkit-backdrop-filter: blur(8px) saturate(110%) !important;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(232,165,133,0.04) inset !important;
}
html body.laouts .laoutsFloatDock__btn {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 8px 16px 8px 12px !important;
border-radius: 999px !important;
border: 1px solid transparent !important;
background: transparent !important;
color: var(--laouts-bone-soft, #c8b6a8) !important;
font-family: var(--laouts-font-sans, 'Inter', system-ui) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.01em !important;
cursor: pointer !important;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease !important;
}
html body.laouts .laoutsFloatDock__btn svg {
flex-shrink: 0 !important;
}
html body.laouts .laoutsFloatDock__btn:hover,
html body.laouts .laoutsFloatDock__btn:focus-visible {
color: var(--laouts-bone, #f3e6dc) !important;
background: rgba(232,165,133,0.08) !important;
outline: none !important;
transform: translateY(-1px) !important;
}
html body.laouts .laoutsFloatDock__btn--primary {
color: #1a1218 !important;
background: var(--laouts-coral, #e8a585) !important;
border-color: var(--laouts-coral, #e8a585) !important;
}
html body.laouts .laoutsFloatDock__btn--primary:hover,
html body.laouts .laoutsFloatDock__btn--primary:focus-visible {
color: #1a1218 !important;
background: #f3b899 !important;
border-color: #f3b899 !important;
transform: translateY(-1px) !important;
box-shadow: 0 6px 18px rgba(232,165,133,0.30) !important;
}
/* Hide dock on phone widths — the spread takes the whole screen,
* Share/Order belong on a mobile bottom-sheet instead (future work). */
@media (max-width: 620px) {
html body.laouts .laoutsFloatDock { display: none !important; }
}
/* v3.32 · slim the brand topbar now that the actions left it.
* Saves ~16-20px of vertical space that the spreads + canvas
* inherit. The wordmark + back arrow are the only content. */
html body.laouts .laoutsBrandTopbar {
min-height: 36px !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
}
html body.laouts .centerColumn {
grid-column: 1 !important;
grid-row: 1 / 3 !important;
}
html body.laouts #rightTabBar {
grid-column: 2 !important;
grid-row: 1 !important;
display: flex !important;
gap: 4px !important;
padding: 6px 10px !important;
/* v3.23 · Christina 2026-05-12 · the gray hairline between the tab
* row and the card below was visually noisy. Removed — the tab's
* coral active state already separates the row from content. */
border-bottom: none !important;
background: var(--laouts-bg, #1c1119) !important;
align-items: center !important;
overflow-x: auto !important;
}
html body.laouts #rightTabBar button {
flex: 1 1 auto !important;
padding: 8px 10px !important;
background: transparent !important;
color: var(--laouts-bone-soft, #c8b6a8) !important;
border: 1px solid transparent !important;
border-radius: 8px !important;
font-family: var(--laouts-mono, "JetBrains Mono", monospace) !important;
font-size: 10.5px !important;
font-weight: 600 !important;
letter-spacing: 0.10em !important;
text-transform: uppercase !important;
cursor: pointer !important;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease !important;
}
html body.laouts #rightTabBar button:hover {
color: var(--laouts-bone, #f3e6dc) !important;
background: rgba(232, 165, 133, 0.06) !important;
}
html body.laouts #rightTabBar button.is-active {
color: var(--laouts-coral, #e8a585) !important;
border-color: rgba(232, 165, 133, 0.50) !important;
background: rgba(232, 165, 133, 0.10) !important;
}
html body.laouts .libDock {
grid-column: 2 !important;
grid-row: 2 !important;
min-height: 0 !important;
overflow: hidden !important;
}
html body.laouts aside#rightInspector,
html body.laouts .sidebar#rightInspector {
grid-column: 2 !important;
grid-row: 2 !important;
min-height: 0 !important;
overflow-y: auto !important;
}
/* ── ONE-SECTION-AT-A-TIME visibility rules ────────────────────────
* When right-tab-library: show .libDock, hide #rightInspector
* When right-tab-pages/photo/text: hide .libDock, show #rightInspector
* then INSIDE the inspector, hide all .card except the ones
* for the active tab. */
html body.laouts.right-tab-library .libDock { display: flex !important; }
html body.laouts.right-tab-library aside#rightInspector,
html body.laouts.right-tab-library .sidebar#rightInspector { display: none !important; }
html body.laouts.right-tab-pages .libDock,
html body.laouts.right-tab-photo .libDock,
html body.laouts.right-tab-text .libDock { display: none !important; }
html body.laouts.right-tab-pages aside#rightInspector,
html body.laouts.right-tab-pages .sidebar#rightInspector,
html body.laouts.right-tab-photo aside#rightInspector,
html body.laouts.right-tab-photo .sidebar#rightInspector,
html body.laouts.right-tab-text aside#rightInspector,
html body.laouts.right-tab-text .sidebar#rightInspector {
display: block !important;
}
/* Hide all inspector cards by default when a non-library tab is on,
* then re-show only the ones that belong to the active tab. */
html body.laouts.right-tab-pages aside#rightInspector .card,
html body.laouts.right-tab-pages .sidebar#rightInspector .card,
html body.laouts.right-tab-photo aside#rightInspector .card,
html body.laouts.right-tab-photo .sidebar#rightInspector .card,
html body.laouts.right-tab-text aside#rightInspector .card,
html body.laouts.right-tab-text .sidebar#rightInspector .card {
display: none !important;
}
/* Show rules · selectors mirror the hide rules above so they win
* specificity. Each show rule includes `aside#rightInspector` so the
* total specificity matches (1 ID, 3 classes, 3 tags) but loads
* AFTER the hide rule so it wins by source order. The dim engine
* (.card--insp-active vs .card--insp-dim) keeps working independently
* — those classes only affect opacity/border, never display. */
/* PAGES tab → cardDocument + cardView + cardLayoutTools */
html body.laouts.right-tab-pages aside#rightInspector #cardDocument,
html body.laouts.right-tab-pages .sidebar#rightInspector #cardDocument,
html body.laouts.right-tab-pages aside#rightInspector #cardView,
html body.laouts.right-tab-pages .sidebar#rightInspector #cardView,
html body.laouts.right-tab-pages aside#rightInspector #cardLayoutTools,
html body.laouts.right-tab-pages .sidebar#rightInspector #cardLayoutTools {
display: block !important;
opacity: 1 !important;
}
/* PHOTO tab → cardPhotoEdit + cardPhotoLook + cardColorCorrection
* + cardPortraitFace + cardPhotoFinish
* + cardLaoutsPhotoAdjust (v3.47 · pan / zoom / horizon · the
* card photo-inspector.js injects, was missing from the
* allowlist so pan/zoom was invisible on photo click) */
html body.laouts.right-tab-photo aside#rightInspector #cardPhotoEdit,
html body.laouts.right-tab-photo .sidebar#rightInspector #cardPhotoEdit,
html body.laouts.right-tab-photo aside#rightInspector #cardPhotoLook,
html body.laouts.right-tab-photo .sidebar#rightInspector #cardPhotoLook,
html body.laouts.right-tab-photo aside#rightInspector #cardColorCorrection,
html body.laouts.right-tab-photo .sidebar#rightInspector #cardColorCorrection,
html body.laouts.right-tab-photo aside#rightInspector #cardPortraitFace,
html body.laouts.right-tab-photo .sidebar#rightInspector #cardPortraitFace,
html body.laouts.right-tab-photo aside#rightInspector #cardPhotoFinish,
html body.laouts.right-tab-photo .sidebar#rightInspector #cardPhotoFinish,
html body.laouts.right-tab-photo aside#rightInspector #cardLaoutsPhotoAdjust,
html body.laouts.right-tab-photo .sidebar#rightInspector #cardLaoutsPhotoAdjust {
display: block !important;
opacity: 1 !important;
}
/* TEXT tab → cardBlockText */
html body.laouts.right-tab-text aside#rightInspector #cardBlockText,
html body.laouts.right-tab-text .sidebar#rightInspector #cardBlockText {
display: block !important;
opacity: 1 !important;
}
/* The engine's contextual dimming (.card--insp-dim) drops opacity to
* 0.58 when no cell is selected — which makes Pages/Photo/Text tabs
* look 'empty'-ish even when content is there. Override that for any
* card the user explicitly tabbed to. */
html body.laouts.right-tab-pages aside#rightInspector .card--insp-dim,
html body.laouts.right-tab-photo aside#rightInspector .card--insp-dim,
html body.laouts.right-tab-text aside#rightInspector .card--insp-dim {
opacity: 1 !important;
}
/* Force inner scroll so the keeper card + photo grid + inspector cards
* can actually move when content overflows their grid cell.
* - .libDock holds layout chrome; the actual scroll target is the
* .libraryColumn / #imageGalleryDock inside it.
* - #userGallery is the photo grid itself — it should scroll inside
* the gallery dock, not push everything else off-screen.
* - #rightInspector already gets overflow-y:auto above; this also
* ensures the inner cards stack properly. */
html body.laouts .libDock #imageGalleryDock,
html body.laouts .libDock .libraryColumn {
overflow-y: auto !important;
max-height: 100% !important;
min-height: 0 !important;
}
html body.laouts #userGallery {
overflow-y: auto !important;
min-height: 0 !important;
flex: 1 1 auto !important;
}
html body.laouts aside#rightInspector .card,
html body.laouts .sidebar#rightInspector .card {
flex: 0 0 auto !important;
}
/* Library now lives on the right edge — drop the right border that
* used to separate it from the canvas, swap to a left border. */
html body.laouts .libraryColumn {
border-right: none !important;
border-left: 1px solid var(--laouts-hairline) !important;
}
/* End single-right-column block. */
/* ──────────────── FILMSTRIP STAYS ABOVE CANVAS · 2026-05-10 ─────────
*
* Christina: 'users are going to want the spreads above the main
* canvas, because we can't see what page they are on, there should
* be 1/24 or whatever.'
*
* Filmstrip lives in its original place (.spreadRail above the
* canvas). We KEEP the spread label (#bookSpreadLabel reads
* 'Spread N / M' — that's the page indicator) but drop the duplicate
* ‹ › round chevrons since we have the circle .laoutsFlip__chev
* already on the sides of the canvas. */
html body.laouts #bookNavPrev,
html body.laouts #bookNavNext {
display: none !important;
}
/* Center the remaining spread label since the chevrons that flanked
* it are gone. */
html body.laouts .spreadRail__nav {
justify-content: center !important;
}
/* ──────────────── SLIM CULL CARD · 2026-05-10 ───────────────────────
* Christina: 'cull box is taking up way too much real estate. user
* does need to see the library of photos more completely.'
*
* Default cull card had: huge '30 keepers' headline, eyebrow,
* 'curated from N · 0 flagged' subtitle, 4 big stat tiles,
* POP OUT LIBRARY pill, 'TAP ANY FLAGGED CARD TO REVIEW' hint,
* 'RUN AI CULL · finds duplicates' big pill. ~half the right
* column wasted before user sees one photo.
*
* Now: eyebrow + 4 small filter tiles + nothing else. The
* RUN AI CULL re-runs on click of '+ Add more photos' which
* users actually do; the explicit pill was redundant clutter.
* Pop-out library button moved to a small icon if needed. */
/* Kill the wasteful chrome */
html body.laouts .laoutsLibMast__reviewHint,
html body.laouts .laoutsLibMast__cullCta,
html body.laouts .laoutsLibMast__addMore,
html body.laouts .laoutsLibraryPopBtn,
html body.laouts #laoutsLibraryPopBtn {
display: none !important;
}
/* Slim the head: eyebrow + title on ONE row */
html body.laouts .laoutsLibMast {
padding: 8px 10px !important;
margin: 0 0 8px 0 !important;
}
html body.laouts .laoutsLibMast__head {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: baseline !important;
gap: 6px !important;
margin-bottom: 6px !important;
padding-bottom: 6px !important;
}
html body.laouts .laoutsLibMast__eyebrow {
font-size: 9px !important;
letter-spacing: 0.10em !important;
margin: 0 !important;
opacity: 0.6 !important;
}
html body.laouts .laoutsLibMast__title {
display: inline-flex !important;
align-items: baseline !important;
gap: 4px !important;
margin: 0 !important;
}
html body.laouts .laoutsLibMast__num {
font-size: 18px !important;
font-weight: 600 !important;
margin: 0 !important;
}
html body.laouts .laoutsLibMast__lab {
font-size: 11px !important;
margin: 0 !important;
}
html body.laouts .laoutsLibMast__meta {
font-size: 9.5px !important;
margin-left: auto !important;
opacity: 0.6 !important;
}
/* Smaller stat tiles */
html body.laouts .laoutsLibMast__breakdown {
gap: 4px !important;
}
html body.laouts .laoutsLibMast__statCard {
padding: 6px 4px !important;
min-height: 0 !important;
}
html body.laouts .laoutsLibMast__statNum {
font-size: 14px !important;
font-weight: 600 !important;
}
html body.laouts .laoutsLibMast__statLab {
font-size: 8px !important;
letter-spacing: 0.08em !important;
}
/* ──────────────── KILL PAGE-TURN BOUNCE ANIMATIONS · 2026-05-10 ────
* Christina: 'still some bouncing when turning page.'
*
* After we made the page change instant, the canvas frame still
* had #wrap.bookSpreadFrame--turn / --turnNext / --turnPrev
* applying the @keyframes bookSpreadPageTurn animations from
* index.html line 963-980 (a 0.4s scale/translate bounce). That's
* the visible bounce. Killing all three. */
html body.laouts #wrap.bookSpreadFrame--turn,
html body.laouts #wrap.bookSpreadFrame--turnNext,
html body.laouts #wrap.bookSpreadFrame--turnPrev,
html body.laouts .bookSpreadFrame--turn,
html body.laouts .bookSpreadFrame--turnNext,
html body.laouts .bookSpreadFrame--turnPrev {
animation: none !important;
}
/* DUPLICATE side page-nav arrows · 2026-05-10
* Christina: 'arrows on either side of the canvas to turn the actual
* pages are doubled up.' There are two systems running in parallel:
* - .laoutsFlip__chev (the CIRCLE arrows, JS-injected by
* laouts-engine-page-flip.js) · KEEP these
* - #spreadNavPrev / #spreadNavNext (rectangular spreadNavSideBtn
* buttons in #spreadPageNavRow, controlled by app.js
* updateSpreadNavArrows() which removes their `hidden` attr
* whenever there's a payload) · KILL these
* Same job, two visual styles next to each other on each side of the
* canvas. Hiding the rectangular set leaves only the circle chevrons. */
html body.laouts #spreadPageNavRow,
html body.laouts .spreadPageNavRow,
html body.laouts #spreadNavPrev,
html body.laouts #spreadNavNext,
html body.laouts .spreadNavSideBtn {
display: none !important;
}
/* No canvas jump + no temporary scrollbar on page flip · 2026-05-10
* Christina: 'turning pages makes the canvas jump and for a moment
* there is a scroll bar, we don't want next to the canvas on the
* right.'
*
* .stageWrap had `overflow-y: auto`. The page-flip animation
* (.laoutsFlip__overlay) briefly pushes content height during the
* page-turn, which triggers the y-scrollbar to appear, which
* narrows the content area, which shoves the canvas left — the
* "jump" Christina sees. As soon as the animation finishes the
* scrollbar disappears and the canvas snaps back.
*
* Fix: pin the wrap to overflow:hidden vertically too. Canvas zoom
* sizes the canvas element directly so we don't lose scrolling for
* any real content. */
html body.laouts .stageWrap {
overflow-y: hidden !important;
overflow-x: hidden !important;
scrollbar-gutter: auto !important;
}
/* End filmstrip-in-pages-tab block. */