/* =============================================================
LAOUTS · Engine chrome · clean rebuild
-----------------------------------------------------------
Loaded AFTER ui/laouts-brand-tokens.css. Deferred structural
blocks (tool rail, flyouts, cull/category chrome) import from
laouts-engine-deferred-shell.css below — they used to ship from
dark-matcha / velvet-plum; index.html no longer loads those.
Tokens + chrome are the sole engine skin.
============================================================= */
@import url("/ui/laouts-engine-deferred-shell.css?v=20260506-nuke");
/* ───────── RESET prior patches ───────── */
/* Walk back the floating-glass panels Layout A introduced.
The chrome below uses anchored sidebars, never overlapping
the spread. */
body.laouts .libDock {
position: static !important;
width: auto !important;
height: auto !important;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
top: auto !important;
left: auto !important;
z-index: auto !important;
}
body.laouts .sidebar#rightInspector,
body.laouts aside#rightInspector {
position: static !important;
height: auto !important;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
top: auto !important;
right: auto !important;
z-index: auto !important;
max-height: none !important;
overflow-y: auto !important;
}
/* .appMain column template · single canonical definition in ⬢ SHIP · v2
(below) including responsive breakpoints — do not duplicate here. */
body.laouts .centerColumn {
padding: 0 24px !important;
}
/* ───────── Topbar · slim ───────── */
body.laouts .laoutsBrandTopbar {
padding: 10px 24px !important;
min-height: 56px !important;
}
body.laouts .laoutsBrandTopbar__crumbs {
font-family: var(--laouts-font-serif) !important;
font-style: italic !important;
font-size: 14px !important;
color: var(--laouts-bone-soft) !important;
letter-spacing: -0.005em !important;
}
body.laouts .laoutsBrandTopbar__crumbs em {
font-style: italic !important;
color: var(--laouts-coral) !important;
background: transparent !important;
font-family: var(--laouts-font-serif) !important;
font-weight: 400 !important;
}
/* ───────── Step bar · slim ───────── */
body.laouts .laoutsStageBar,
body.laouts .laoutsStepperBar {
padding: 6px 24px !important;
}
/* CHRISTINA 2026-05-06 · center the step rail (PRODUCT · UPLOAD ·
CURATE · DESIGN · REVIEW · PRINT) horizontally as a group.
The actual element is .laoutsStepper / .laoutsStepper__inner
built by laouts-engine-shell.js — NOT .laoutsStepperBar (typo). */
body.laouts .laoutsStepper,
body.laouts .laoutsStepper__inner {
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
/* Force the inner wrapper to NOT stretch — center as a group. */
body.laouts .laoutsStepper__inner {
max-width: 100% !important;
margin: 0 auto !important;
width: auto !important;
flex: 0 1 auto !important;
}
/* ───────── Library column ───────── */
body.laouts .libraryColumn,
body.laouts .libraryColumn.lightTableStrip {
display: flex !important;
flex-direction: column !important;
background: transparent !important;
/* CHRISTINA 2026-05-06 · kill the right border on the library
column entirely. The libResizeHandle (3px, transparent) is
the only seam between library and canvas — no double line. */
border-right: none !important;
/* CHRISTINA 2026-05-06 (round 4) · breathing room between major
sections — mirror the right inspector's gaps. The Share for Review →
Drop zone close-pack lives in pair-specific overrides below. */
padding: 10px 14px 14px 14px !important;
gap: 10px !important;
/* CHRISTINA 2026-05-06 · DO NOT use overflow-y here — it
implicitly sets overflow-x:hidden which clips pill right
edges (Order book, Share for Review, Drop photos, etc.).
Scroll lives ONLY on the photo grid below. */
overflow: visible !important;
scrollbar-width: none;
scrollbar-color: var(--laouts-hairline-2) transparent;
}
/* CHRISTINA 2026-05-06 · she zoomed in and showed the FAT
gray scrollbar was the visible seam. Make scrollbar invisible
(zero width) — scroll behaviour still works via mousewheel /
trackpad / arrow keys. */
body.laouts .libraryColumn::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
background: transparent !important;
display: none !important;
}
body.laouts .libraryColumn::-webkit-scrollbar-thumb {
background: transparent !important;
display: none !important;
}
body.laouts .libraryColumn::-webkit-scrollbar-track {
background: transparent !important;
display: none !important;
}
/* CHRISTINA 2026-05-06 · Option A · Order/Share moved to centered top
* bar (focus-mode.js builds #laoutsTopActionBar above .appMain).
* The legacy library-column .laoutsLibraryActions wrapper is now empty
* — keep it hidden so it doesn't add stray spacing. */
body.laouts .libraryColumn .laoutsLibraryActions {
display: none !important;
}
/* The new centered top action bar */
body.laouts .laoutsTopActionBar {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
padding: 10px 18px !important;
margin: 0 !important;
background: rgba(36, 20, 32, 0.45) !important;
border-bottom: 1px solid var(--laouts-hairline) !important;
z-index: 5;
}
body.laouts .laoutsTopActionBar #topBarShareReview,
body.laouts .laoutsTopActionBar .editorTbBtn--review {
height: 34px !important;
padding: 0 16px !important;
background: transparent !important;
border: 1px solid var(--laouts-hairline-2) !important;
color: var(--laouts-bone-soft) !important;
border-radius: 999px !important;
font-family: var(--laouts-font-sans) !important;
font-size: 12px !important;
font-weight: 400 !important;
cursor: pointer !important;
transition: border-color .15s ease, color .15s ease, background .15s ease !important;
}
body.laouts .laoutsTopActionBar #topBarShareReview:hover,
body.laouts .laoutsTopActionBar .editorTbBtn--review:hover {
border-color: var(--laouts-coral) !important;
color: var(--laouts-coral) !important;
}
body.laouts .laoutsTopActionBar #topBarExport,
body.laouts .laoutsTopActionBar .editorTbBtn--export {
height: 34px !important;
padding: 0 20px !important;
background: var(--laouts-coral) !important;
color: var(--laouts-bg) !important;
border: 1px solid var(--laouts-coral) !important;
border-radius: 999px !important;
font-family: var(--laouts-font-sans) !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
cursor: pointer !important;
box-shadow: 0 6px 16px var(--laouts-coral-shadow) !important;
}
body.laouts .laoutsTopActionBar #topBarExport::before,
body.laouts .laoutsTopActionBar .editorTbBtn--export::before {
content: "Order book → ";
margin-right: 0;
}
body.laouts .laoutsTopActionBar #topBarExport:hover,
body.laouts .laoutsTopActionBar .editorTbBtn--export:hover {
filter: brightness(1.06);
}
body.laouts .libraryColumn .laoutsLibraryActions #topBarExport,
body.laouts .libraryColumn .laoutsLibraryActions .editorTbBtn--export {
height: 40px !important;
padding: 0 18px !important;
background: var(--laouts-coral) !important;
color: var(--laouts-bg) !important;
border: 1px solid var(--laouts-coral) !important;
border-radius: var(--laouts-radius-sm) !important;
font-family: var(--laouts-font-sans) !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
box-shadow: 0 8px 18px var(--laouts-coral-shadow) !important;
}
body.laouts .libraryColumn .laoutsLibraryActions #topBarShareReview,
body.laouts .libraryColumn .laoutsLibraryActions .editorTbBtn--review {
height: 32px !important;
padding: 0 14px !important;
background: transparent !important;
border: 1px solid var(--laouts-hairline-2) !important;
color: var(--laouts-bone-soft) !important;
border-radius: var(--laouts-radius-sm) !important;
font-family: var(--laouts-font-sans) !important;
font-size: 12px !important;
font-weight: 400 !important;
}
/* CHRISTINA 2026-05-06 (round 3) · Killed the phantom .libraryTopBar
* (Photos label + Tour button + dark-matcha padding) that sat between
* the relocated actions cluster and the drop zone. Tour is reachable
* from the help menu / keyboard shortcut. */
body.laouts .libraryTopBar {
display: none !important;
}
/* Drop zone · sits with normal column gap under Share for Review.
* Earlier negative margin pulled it too tight. The column gap (10px)
* is the right rhythm. */
body.laouts .libraryUploadZone {
margin: 0 !important;
padding: 8px 12px !important;
border-radius: var(--laouts-radius-md) !important;
background: linear-gradient(180deg, rgba(232, 165, 133, 0.04), transparent) !important;
border: 1.5px dashed var(--laouts-hairline-2) !important;
min-height: 0 !important;
}
/* Compress the inside of the upload zone too — gap between art / head
* / sub. Otherwise it looks tall even with tight outer padding. */
body.laouts .libraryUploadZone__inner {
gap: 4px !important;
}
body.laouts .libraryUploadZone__art {
width: 26px !important;
height: 26px !important;
}
body.laouts .libraryUploadZone__inner h3 {
font-size: 13px !important;
}
body.laouts .libraryUploadZone__inner small,
body.laouts .libraryUploadZone__sub {
font-size: 10px !important;
}
/* Library masthead · keep editorial feel but trim padding */
body.laouts .laoutsLibMast {
margin: 0 !important;
padding: 14px 14px 12px !important;
}
body.laouts .laoutsLibMast__head {
padding-bottom: 10px !important;
margin-bottom: 12px !important;
}
body.laouts .laoutsLibMast__title {
font-size: 26px !important;
}
body.laouts .laoutsLibMast__breakdown--four {
gap: 5px !important;
}
body.laouts .laoutsLibMast__statCard {
padding: 8px 4px !important;
}
body.laouts .laoutsLibMast__statNum {
font-size: 17px !important;
}
body.laouts .laoutsLibMast__statLab {
font-size: 8.5px !important;
letter-spacing: 0.10em !important;
}
/* CHRISTINA 2026-05-06 · Sort + density row CENTERED.
* Was justify-content: space-between which pushed Date/Name to the
* left and the 3-icon density grid to the right. Centered now so
* both groups sit symmetrically under the masthead. */
body.laouts .laoutsLibTools__row--tools {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 18px !important;
padding: 0 !important;
margin: 0 !important;
}
body.laouts .laoutsLibTools__sort,
body.laouts .laoutsLibTools__density {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
flex: 0 0 auto !important;
}
body.laouts .laoutsLibTools__sortBtn,
body.laouts .laoutsLibTools__sortDir {
height: 26px !important;
padding: 0 10px !important;
font-size: 11px !important;
border-radius: 999px !important;
}
/* CHRISTINA 2026-05-07 · sort-dir asc/desc toggle was rendering the
* SVG arrow at 11px inside a 26px-tall pill, reading as a tiny dot
* between NAME and the density grid. Swap to a Unicode arrow glyph
* that matches the visual weight of the DATE / NAME pills next to it:
* coral hairline border, bone arrow, JetBrains Mono. */
body.laouts .laoutsLibTools__sortDir {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 26px !important;
width: 26px !important;
padding: 0 !important;
background: transparent !important;
border: 1px solid var(--laouts-coral, rgba(232, 165, 133, 0.55)) !important;
color: var(--laouts-bone, #f3e6dc) !important;
}
body.laouts .laoutsLibTools__sortDir:hover {
background: rgba(232, 165, 133, 0.12) !important;
border-color: var(--laouts-coral, #e8a585) !important;
color: var(--laouts-bone, #ffffff) !important;
}
body.laouts .laoutsLibTools__sortDirGlyph {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
font-size: 14px !important;
line-height: 1 !important;
font-weight: 500 !important;
display: inline-block !important;
transform: translateY(-0.5px) !important;
}
body.laouts .laoutsLibTools__densityBtn {
width: 26px !important;
height: 26px !important;
}
body.laouts .laoutsLibTools__horizonBtn {
display: none !important;
}
/* CHRISTINA 2026-05-06 · KILLED · "+ Add more photos" was redundant
* with the big "Drop photos here / or browse" zone at the top of the
* library column. One way to add photos, not two. */
body.laouts .laoutsLibMast__addMore {
display: none !important;
}
/* ================================================================
CHRISTINA 2026-05-06 · LIBRARY POP-OUT (Option B · approved).
The library column is slim by default. Click "Pop out library" and
the column slides wider over the canvas with a backdrop scrim. Click
X / scrim / ESC to dismiss.
============================================================== */
body.laouts .laoutsLibraryPopBtn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
margin: 8px 0 0 0 !important;
padding: 8px 12px !important;
border-radius: 999px !important;
background: transparent !important;
border: 1px solid var(--laouts-hairline-2) !important;
color: var(--laouts-bone-soft) !important;
cursor: pointer !important;
font-family: 'JetBrains Mono', monospace !important;
font-size: 9.5px !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
transition: border-color .15s ease, color .15s ease, background .15s ease !important;
}
body.laouts .laoutsLibraryPopBtn:hover {
border-color: var(--laouts-coral) !important;
color: var(--laouts-coral) !important;
background: rgba(232, 165, 133, 0.10) !important;
}
body.laouts .laoutsLibraryPopBtn__icon {
font-size: 13px !important;
line-height: 1 !important;
}
/* Scrim · semi-transparent overlay behind the popped library */
body.laouts .laoutsLibraryPopScrim {
display: none;
position: fixed !important;
inset: 0 !important;
background: rgba(15, 8, 12, 0.55) !important;
backdrop-filter: blur(3px) !important;
-webkit-backdrop-filter: blur(3px) !important;
z-index: 90 !important;
cursor: pointer;
}
body.laouts.laouts-library-popped .laoutsLibraryPopScrim {
display: block !important;
animation: laoutsScrimFade 0.18s ease-out;
}
@keyframes laoutsScrimFade {
from { opacity: 0; }
to { opacity: 1; }
}
/* Close button · only visible while popped */
body.laouts .laoutsLibraryPopClose {
display: none;
position: absolute !important;
top: 10px !important;
right: 10px !important;
z-index: 102 !important;
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
background: rgba(36, 20, 32, 0.85) !important;
border: 1px solid var(--laouts-hairline-2) !important;
color: var(--laouts-bone) !important;
font-size: 18px !important;
font-weight: 400 !important;
line-height: 1 !important;
cursor: pointer !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
backdrop-filter: blur(8px) !important;
}
body.laouts.laouts-library-popped .laoutsLibraryPopClose {
display: inline-flex !important;
}
body.laouts .laoutsLibraryPopClose:hover {
border-color: var(--laouts-coral) !important;
color: var(--laouts-coral) !important;
}
/* POPPED STATE · transform the library column into a wide drawer */
body.laouts.laouts-library-popped #libDock,
body.laouts.laouts-library-popped .libDock {
position: fixed !important;
top: 0 !important;
left: 0 !important;
bottom: 0 !important;
width: 720px !important;
max-width: calc(100vw - 60px) !important;
z-index: 100 !important;
background: rgba(20, 12, 18, 0.97) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
border-right: 1px solid var(--laouts-hairline-2) !important;
box-shadow: 24px 0 80px rgba(0, 0, 0, 0.65) !important;
animation: laoutsDrawerSlide 0.22s ease-out;
}
@keyframes laoutsDrawerSlide {
from { transform: translateX(-32px); opacity: 0.4; }
to { transform: translateX(0); opacity: 1; }
}
body.laouts.laouts-library-popped .libraryColumn,
body.laouts.laouts-library-popped #imageGalleryDock {
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
padding: 16px 18px !important;
position: relative !important;
}
/* Photo grid in popped state · FIXED-SIZE tiles to keep them square.
* minmax(_, 1fr) made tiles stretch tall when grid-auto-rows didn't
* follow. Use a fixed track size instead so each tile is a clean square. */
body.laouts.laouts-library-popped #imageGalleryDock .userGallery {
grid-template-columns: repeat(auto-fill, 110px) !important;
grid-auto-rows: 110px !important;
justify-content: center !important;
gap: 8px !important;
max-height: none !important;
}
body.laouts.laouts-library-popped #imageGalleryDock .userGallery .galleryItem {
width: 110px !important;
height: 110px !important;
aspect-ratio: auto !important;
}
body.laouts[data-laouts-lib-density="lg"].laouts-library-popped #imageGalleryDock .userGallery {
grid-template-columns: repeat(auto-fill, 140px) !important;
grid-auto-rows: 140px !important;
}
body.laouts[data-laouts-lib-density="lg"].laouts-library-popped #imageGalleryDock .userGallery .galleryItem {
width: 140px !important;
height: 140px !important;
}
body.laouts[data-laouts-lib-density="sm"].laouts-library-popped #imageGalleryDock .userGallery {
grid-template-columns: repeat(auto-fill, 80px) !important;
grid-auto-rows: 80px !important;
}
body.laouts[data-laouts-lib-density="sm"].laouts-library-popped #imageGalleryDock .userGallery .galleryItem {
width: 80px !important;
height: 80px !important;
}
/* Hide the pop-out trigger while already popped */
body.laouts.laouts-library-popped .laoutsLibraryPopBtn {
display: none !important;
}
/* CHRISTINA 2026-05-06 · Run AI cull · the visible opt-in entry point.
* Auto-cull is OFF by default — this pill is the user's gesture to
* trigger scanning. Auto-hides once detectors are on. */
body.laouts .laoutsLibMast__cullCta {
display: flex !important;
align-items: center !important;
gap: 10px !important;
width: 100% !important;
margin: 10px 0 0 0 !important;
padding: 9px 14px !important;
background: rgba(232, 165, 133, 0.12) !important;
border: 1px solid rgba(232, 165, 133, 0.45) !important;
border-radius: 999px !important;
color: var(--laouts-bone) !important;
cursor: pointer !important;
font-family: 'Inter', system-ui, sans-serif !important;
text-align: left !important;
transition: background .15s ease, border-color .15s ease, transform .12s ease !important;
}
body.laouts .laoutsLibMast__cullCta:hover {
background: rgba(232, 165, 133, 0.20) !important;
border-color: var(--laouts-coral) !important;
transform: translateY(-1px) !important;
}
body.laouts .laoutsLibMast__cullCta[hidden] {
display: none !important;
}
body.laouts .laoutsLibMast__cullCtaIcon {
font-size: 14px !important;
flex: 0 0 auto !important;
filter: drop-shadow(0 0 6px rgba(232, 165, 133, 0.45)) !important;
}
body.laouts .laoutsLibMast__cullCtaLab {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
gap: 1px !important;
line-height: 1.15 !important;
}
body.laouts .laoutsLibMast__cullCtaLab strong {
font-size: 11px !important;
letter-spacing: 0.10em !important;
text-transform: uppercase !important;
color: var(--laouts-coral) !important;
font-weight: 600 !important;
}
body.laouts .laoutsLibMast__cullCtaLab span {
font-size: 10px !important;
color: var(--laouts-bone-soft) !important;
letter-spacing: 0.02em !important;
}
/* CHRISTINA 2026-05-06 · Center BUILD MY BOOK label within the pill.
* The dark-matcha theme set the label to flex:1 + text-align:left, which
* pushed "BUILD MY BOOK" hard to the left with the icon. Center the
* whole content cluster instead. */
body.laouts .laoutsLibSticky__build {
justify-content: center !important;
text-align: center !important;
}
body.laouts .laoutsLibSticky__buildLab {
flex: 0 1 auto !important;
text-align: center !important;
}
body.laouts .laoutsLibSticky__buildHint {
text-align: center !important;
}
/* (legacy block kept hidden) */
body.laouts .laoutsLibMast__addMore--legacy {
height: 36px !important;
padding: 0 14px !important;
margin: 0 !important;
font-size: 12px !important;
border-radius: var(--laouts-radius-sm) !important;
}
/* Photo grid · takes remaining space */
body.laouts .libraryColumn .imageGalleryDock,
body.laouts .libraryColumn #imageGalleryDock {
flex: 1 1 auto !important;
min-height: 0 !important;
margin: 0 !important;
}
/* Build my book · simple text, small button at end of column */
body.laouts .laoutsLibSticky {
position: relative !important;
width: 100% !important;
margin: 12px 0 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
z-index: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
}
body.laouts .laoutsLibSticky__inner {
background: transparent !important;
border: none !important;
padding: 0 !important;
box-shadow: none !important;
}
body.laouts .laoutsLibSticky__build {
width: 100% !important;
height: 42px !important;
padding: 0 18px !important;
background: var(--laouts-coral) !important;
color: var(--laouts-bg) !important;
border: 1px solid var(--laouts-coral) !important;
border-radius: var(--laouts-radius-sm) !important;
font-family: var(--laouts-font-sans) !important;
font-size: 13px !important;
font-weight: 500 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
box-shadow: 0 8px 18px var(--laouts-coral-shadow) !important;
animation: none !important;
}
body.laouts .laoutsLibSticky__build:hover {
filter: brightness(1.06) !important;
}
body.laouts .laoutsLibSticky__buildSub,
body.laouts .laoutsLibSticky__buildStack {
display: none !important;
}
body.laouts .laoutsLibSticky__buildLab {
font-size: 13px !important;
font-weight: 500 !important;
}
body.laouts .laoutsLibSticky__buildIcon {
font-size: 13px !important;
}
/* ───────── Right inspector · clean stack ───────── */
body.laouts aside#rightInspector,
body.laouts .sidebar#rightInspector {
padding: 14px 14px 14px 14px !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
border-left: 1px solid var(--laouts-hairline) !important;
}
body.laouts aside#rightInspector .card,
body.laouts .sidebar#rightInspector .card {
background: var(--laouts-bg-1) !important;
border: 1px solid var(--laouts-hairline-2) !important;
border-radius: var(--laouts-radius-md) !important;
padding: 14px !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
overflow: visible !important;
}
body.laouts aside#rightInspector .card .title,
body.laouts .sidebar#rightInspector .card .title {
font-family: var(--laouts-font-mono) !important;
font-size: 10px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--laouts-coral) !important;
margin-bottom: 10px !important;
}
body.laouts aside#rightInspector .card label,
body.laouts .sidebar#rightInspector .card label {
font-family: var(--laouts-font-sans) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
color: var(--laouts-bone-soft) !important;
margin: 0 0 6px !important;
}
body.laouts aside#rightInspector .card p,
body.laouts .sidebar#rightInspector .card p {
font-size: 12px !important;
line-height: 1.5 !important;
color: var(--laouts-bone-soft) !important;
margin: 0 0 10px !important;
}
body.laouts aside#rightInspector .card select,
body.laouts .sidebar#rightInspector .card select {
width: 100% !important;
height: 34px !important;
padding: 0 10px !important;
background: var(--laouts-bg-2) !important;
border: 1px solid var(--laouts-hairline-2) !important;
border-radius: var(--laouts-radius-sm) !important;
color: var(--laouts-bone) !important;
font-family: var(--laouts-font-sans) !important;
font-size: 12px !important;
margin-bottom: 10px !important;
}
/* Density buttons (Touch / Small / Med / Large) — equal flex, no overflow */
body.laouts aside#rightInspector .gridSpacing__sizes,
body.laouts .sidebar#rightInspector .gridSpacing__sizes,
body.laouts .laoutsGridSizes,
body.laouts [data-grid-sizes] {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 4px !important;
width: 100% !important;
}
body.laouts aside#rightInspector .gridSpacing__sizes button,
body.laouts .sidebar#rightInspector .gridSpacing__sizes button,
body.laouts .laoutsGridSizes button,
body.laouts [data-grid-sizes] button {
width: 100% !important;
min-width: 0 !important;
height: 28px !important;
padding: 0 4px !important;
font-size: 11px !important;
border-radius: var(--laouts-radius-sm) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Split row · 2-up grid, never overflows */
body.laouts aside#rightInspector .laoutsSplit__row,
body.laouts aside#rightInspector .splitMode__row,
body.laouts .sidebar#rightInspector .laoutsSplit__row,
body.laouts .sidebar#rightInspector .splitMode__row {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 6px !important;
margin-bottom: 10px !important;
}
body.laouts aside#rightInspector .laoutsSplit__row > *,
body.laouts aside#rightInspector .splitMode__row > * {
width: 100% !important;
min-width: 0 !important;
padding: 8px !important;
font-size: 11px !important;
}
/* "Diptych · same photo, mirrored crop" wraps to two lines */
body.laouts aside#rightInspector .splitDiptych,
body.laouts aside#rightInspector [data-split-diptych],
body.laouts .sidebar#rightInspector .splitDiptych {
white-space: normal !important;
line-height: 1.3 !important;
font-size: 11px !important;
padding: 8px 10px !important;
}
/* Tip / hint copy at the bottom */
body.laouts aside#rightInspector .tip,
body.laouts aside#rightInspector .hint,
body.laouts .sidebar#rightInspector .tip,
body.laouts .sidebar#rightInspector .hint {
font-size: 11px !important;
line-height: 1.4 !important;
color: var(--laouts-mauve) !important;
}
/* Spread layout preview at bottom of inspector */
body.laouts aside#rightInspector .spreadLayout__previewBox,
body.laouts .sidebar#rightInspector .spreadLayout__previewBox {
width: 100% !important;
aspect-ratio: 2 / 1 !important;
background: var(--laouts-bg-2) !important;
border: 1px solid var(--laouts-hairline-2) !important;
border-radius: var(--laouts-radius-sm) !important;
margin-top: 8px !important;
}
/* ───────── Center · spread + toolbar ───────── */
body.laouts .centerColumn {
display: flex !important;
flex-direction: column !important;
min-height: 0 !important;
}
body.laouts .spreadRail {
padding: 8px 0 !important;
background: transparent !important;
border: none !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
body.laouts .spreadRail__top {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
flex-wrap: nowrap !important;
}
body.laouts .spreadRail__nav {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
flex-shrink: 0 !important;
}
body.laouts .spreadRail__roundBtn {
width: 26px !important;
height: 26px !important;
border-radius: 50% !important;
background: transparent !important;
border: 1px solid var(--laouts-hairline-2) !important;
color: var(--laouts-bone-soft) !important;
font-size: 12px !important;
}
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 8px !important;
}
body.laouts .spreadRail__actions {
display: inline-flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 4px !important;
flex: 1 !important;
}
body.laouts .spreadRail__actions .btn,
body.laouts .spreadRail__btn,
body.laouts .spreadRail__toggleStrip {
height: 26px !important;
padding: 0 10px !important;
background: rgba(58, 36, 53, 0.5) !important;
border: 1px solid var(--laouts-hairline-2) !important;
border-radius: 999px !important;
color: var(--laouts-bone-soft) !important;
font-family: var(--laouts-font-sans) !important;
font-size: 11px !important;
font-weight: 400 !important;
letter-spacing: 0 !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__iconBtn {
width: 26px !important;
height: 26px !important;
padding: 0 !important;
border-radius: 50% !important;
background: transparent !important;
border: 1px solid var(--laouts-hairline-2) !important;
color: var(--laouts-bone-soft) !important;
font-size: 12px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
body.laouts .laoutsSmartTextBtn--inline {
height: 26px !important;
padding: 0 12px !important;
font-size: 11px !important;
}
/* Filmstrip thumbs */
body.laouts .spreadRail__stripWrap {
margin-top: 4px !important;
padding: 4px 0 !important;
overflow-x: auto !important;
overflow-y: visible !important;
}
body.laouts .bookSpreadStrip {
display: inline-flex !important;
gap: 8px !important;
padding: 0 !important;
}
/* Stage bar layout · cutoff + SHIP sections use 3-column grid (no outdated flex row here). */
/* CHRISTINA 2026-05-06 · the layout-cycle arrows MUST be visible
above the spread. Was at 0.55 opacity — too faded. Now full
visibility so they read as actionable. */
body.laouts .laoutsSpreadArrows__pair {
opacity: 1 !important;
transition: none !important;
}
/* ───────── Hide noise · keep screen calm ───────── */
/* CHRISTINA AUDIT 2026-05-06 · Round 2 · Kill TWO redundant
left-edge controls that were the bottleneck:
1. .laoutsToolRail · 8 numbered tool icons (Photos / Layouts /
Text / AI Studio etc.) — features moved elsewhere in v2.
2. #libPanelHandle · the "Hide photo library" `‹` toggle on
the very left edge — library is always visible in v2, no
collapse needed.
Both go away. The library can finally breathe. */
body.laouts .laoutsToolRail,
body.laouts aside.laoutsToolRail {
display: none !important;
}
body.laouts .laoutsToolRail::before,
body.laouts .laoutsToolRail::after {
display: none !important;
content: none !important;
}
body.laouts .libPanelHandle,
body.laouts #libPanelHandle {
display: none !important;
}
/* Defense: if the engine ever tries to apply lib-panel-collapsed
state, ignore it — the library is always visible in v2. */
body.laouts.lib-panel-collapsed .libraryColumn,
body.laouts.lib-panel-collapsed .libDock {
display: flex !important;
}
body.laouts.lib-panel-collapsed .appMain {
grid-template-columns: minmax(420px, var(--lib-px, 420px)) minmax(0, 1fr) 360px !important;
}
/* Old "Showing X" filter dropdown · masthead stat cards replace it */
body.laouts .laoutsLibTools__row--top,
body.laouts .laoutsLibTools__filterWrap,
body.laouts .laoutsLibTools__countWrap {
display: none !important;
}
/* Empty breadcrumb pill placeholder */
body.laouts .laoutsBrandTopbar__crumbsPill:empty,
body.laouts [data-project-name]:empty,
body.laouts .laoutsBrandTopbar__projectPill:empty {
display: none !important;
}
/* Engine spread layout preview thumb (was rendering ghost masthead) */
body.laouts .spreadLayout__previewBox img.spreadLayout__previewClone {
display: none !important;
}
/* Category review modal · sharper photos + flag-as picker.
The modal sits above the engine's blur backdrop, so its own
thumbnails were inheriting filter softness. Force crisp
rendering and isolate from any ancestor filter. */
body.laouts .laoutsCategoryReview {
filter: none !important;
isolation: isolate !important;
}
body.laouts .laoutsCategoryReview__shell {
filter: none !important;
isolation: isolate !important;
/* Width fix · 2026-05-08 · was min(1080px, calc(100vw - 48px)) which let
the shell exceed laptop viewport at 100% zoom. Cap at 95vw with a
1400px ceiling so the tab row + tile grid never bleed off-screen. */
width: min(95vw, 1400px) !important;
max-width: 95vw !important;
}
/* Tab row should wrap gracefully if the viewport is narrow — was
`display: flex` with `overflow-x: auto`, so the tabs were hidden behind
the right edge instead of falling onto a second line. */
body.laouts .laoutsCategoryReview__tabs {
flex-wrap: wrap !important;
overflow-x: visible !important;
}
body.laouts .laoutsCategoryReview__thumb img {
image-rendering: auto !important;
filter: none !important;
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
/** CHRISTINA 2026-05-08 · was `transform: translateZ(0) !important`
* which clobbered the inline rotate(...) we set on auto-leveled
* thumbs (the cull review tile was showing the original pixels with
* no visible rotation, and the "rescued" badge felt like a lie).
* Move the GPU hint to will-change so the inline transform survives. */
will-change: transform;
}
/** Tile container clips the over-scaled rotated img so corners don't
* poke out and expose the tile background. */
body.laouts .laoutsCategoryReview__thumb {
overflow: hidden !important;
}
/* Inline flag-as picker on a keepers card */
body.laouts .laoutsCategoryReview__card--picking {
position: relative !important;
overflow: visible !important;
}
body.laouts .laoutsCategoryReview__card--picking .laoutsCategoryReview__thumb,
body.laouts .laoutsCategoryReview__card--picking .laoutsCategoryReview__name,
body.laouts .laoutsCategoryReview__card--picking .laoutsCategoryReview__hint {
opacity: 0.18 !important;
pointer-events: none !important;
transition: opacity .18s ease;
}
body.laouts .laoutsCategoryReview__pick {
position: absolute !important;
inset: 0 !important;
z-index: 5 !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: center !important;
gap: 6px !important;
padding: 14px !important;
background: linear-gradient(180deg, rgba(28,17,25,0.96), rgba(28,17,25,0.99)) !important;
border: 1px solid rgba(232, 165, 133, 0.40) !important;
border-radius: var(--laouts-radius-md) !important;
box-shadow: 0 12px 36px rgba(0,0,0,0.55) !important;
animation: laoutsCatPickIn 0.18s ease-out !important;
}
@keyframes laoutsCatPickIn {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
body.laouts .laoutsCategoryReview__pickTitle {
font-family: var(--laouts-font-mono) !important;
font-size: 9px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: var(--laouts-bone-soft) !important;
text-align: center !important;
margin-bottom: 4px !important;
}
body.laouts .laoutsCategoryReview__pickBtn {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 1px !important;
padding: 8px 12px !important;
background: rgba(243, 230, 220, 0.04) !important;
border: 1px solid rgba(243, 230, 220, 0.12) !important;
border-radius: 8px !important;
color: var(--laouts-bone) !important;
cursor: pointer;
text-align: left !important;
font-family: var(--laouts-font-sans) !important;
transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
body.laouts .laoutsCategoryReview__pickBtn:hover {
border-color: var(--laouts-coral) !important;
background: rgba(232, 165, 133, 0.10) !important;
transform: translateX(2px);
}
body.laouts .laoutsCategoryReview__pickHead {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
width: 100% !important;
}
body.laouts .laoutsCategoryReview__pickLab {
font-size: 13px !important;
font-weight: 500 !important;
color: var(--laouts-bone) !important;
line-height: 1.2 !important;
}
body.laouts .laoutsCategoryReview__pickTag {
font-family: var(--laouts-font-mono) !important;
font-size: 8.5px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--laouts-coral) !important;
background: var(--laouts-coral-soft) !important;
border: 1px solid rgba(232, 165, 133, 0.40) !important;
padding: 2px 7px !important;
border-radius: 999px !important;
}
body.laouts .laoutsCategoryReview__pickBtn--current {
border-color: rgba(232, 165, 133, 0.40) !important;
background: rgba(232, 165, 133, 0.06) !important;
cursor: default !important;
}
body.laouts .laoutsCategoryReview__pickBtn--current:hover {
transform: none !important;
background: rgba(232, 165, 133, 0.06) !important;
border-color: rgba(232, 165, 133, 0.40) !important;
}
body.laouts .laoutsCategoryReview__pickSub {
font-size: 10px !important;
color: var(--laouts-bone-soft) !important;
font-family: var(--laouts-font-mono) !important;
letter-spacing: 0.04em !important;
line-height: 1.2 !important;
}
body.laouts .laoutsCategoryReview__pickCancel {
margin-top: 6px !important;
padding: 6px !important;
background: transparent !important;
border: none !important;
font-family: var(--laouts-font-mono) !important;
font-size: 9.5px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--laouts-bone-soft) !important;
cursor: pointer;
}
body.laouts .laoutsCategoryReview__pickCancel:hover {
color: var(--laouts-coral) !important;
}
/* Library resize handle — restore visible drag affordance.
Velvet-plum had set this transparent which left users with no
way to find the column edge to drag. Coral hairline + grippy
dots on hover. */
/* CHRISTINA 2026-05-06 · THE BIG FIX after 2 days of misdirection:
the "white/gray border" she kept pointing at was the
.centerColumn background gradient (`--center-bg`) defined
inline in index.html:
--center-bg: linear-gradient(180deg, #e4e5e9 0%, #dddee4 100%);
That's pale gray. Override the whole centerColumn fill with
dark plum to match the surrounding library + inspector so the
engine reads as ONE continuous dark surface. */
body.laouts .centerColumn,
body.laouts.laouts .centerColumn {
background: var(--laouts-bg) !important;
background-image: none !important;
}
/* CHRISTINA 2026-05-06 · KILL the libResizeHandle entirely. The
inline-style version in index.html forces 8px width + gray
gradient + 1px white inset shadow + 1px gray border-left, AND
has its own ::before stripe. All of that combines into the
FAT GRAY BAR she's been pointing at. The library doesn't need
to be resizable for v2 — kill it cold so library and canvas
sit flush together with NO seam. */
/* Library pill clipping fix · libDock + libraryColumn must show
children fully (Order book pill, Drop zone, etc.) without
right-edge cutoff. */
body.laouts .libDock,
body.laouts #libDock {
overflow: visible !important;
}
/* CHRISTINA 2026-05-06 ROUND 2 · diagnostic showed Order book
button was 2px wider than column (322 vs 320), getting clipped
by overflow:hidden which was set by velvet-plum's
`.libraryColumn.lightTableStrip` rule (same specificity as mine
but loaded later somehow). Boost specificity with html prefix
AND set overflow on every axis explicitly. */
html body.laouts .libraryColumn,
html body.laouts .libraryColumn.lightTableStrip,
html body.laouts #libDock .libraryColumn,
html body.laouts #libDock .libraryColumn.lightTableStrip {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
/* Bump padding so children have a 4px safety margin from the
column edge. Diagnostic showed button extending 2px past
the column — this guarantees that can't happen. */
padding-left: 14px !important;
padding-right: 18px !important;
}
/* Kill any leftover margin/padding on the actions wrapper that
could push children beyond the libraryColumn content area. */
html body.laouts .libraryColumn .laoutsLibraryActions,
html body.laouts #libDock .libraryColumn .laoutsLibraryActions {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Force every child of laoutsLibraryActions to fit precisely
within the wrapper. */
html body.laouts .libraryColumn .laoutsLibraryActions > * {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
box-sizing: border-box !important;
}
/* Children must NOT exceed column content width. The Order book
button + .laoutsLibraryActions wrapper need calc-based width
that respects the column's 14px padding on each side. */
body.laouts .libraryColumn > *,
body.laouts .libraryColumn .laoutsLibraryActions,
body.laouts .libraryColumn .laoutsLibraryActions > *,
body.laouts .libraryColumn .libraryUploadZone,
body.laouts .libraryColumn .laoutsLibMast,
body.laouts .libraryColumn .laoutsLibSticky {
box-sizing: border-box !important;
max-width: 100% !important;
width: 100% !important;
}
body.laouts .libResizeHandle,
body.laouts #libResizeHandle {
display: none !important;
width: 0 !important;
min-width: 0 !important;
flex: 0 0 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
body.laouts .libResizeHandle::before,
body.laouts #libResizeHandle::before,
body.laouts .libResizeHandle::after,
body.laouts #libResizeHandle::after {
display: none !important;
content: none !important;
}
/* =============================================================
v2 · cutoff fixes from approved mockup
----------------------------------------------------------- */
/* Top of canvas needs breathing room. Real selector is
.spreadRail__header (not __top — that was a typo).
Critical: do NOT touch overflow on .stageWorkArea / .stageWrap
— those own the spread's pan/zoom + scroll behaviour. Just
give .stageWrap real top padding so the rail's round buttons
land inside its scroll area instead of clipping at edge. */
body.laouts .centerColumn {
padding-bottom: 14px !important;
}
body.laouts .spreadRail {
margin-top: 0 !important;
padding: 0 0 8px !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
flex-shrink: 0 !important;
}
body.laouts .spreadRail__header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
flex-wrap: nowrap !important;
min-height: 36px !important;
/* CHRISTINA 2026-05-06: bump LEFT padding to 20px so the
ALL SPREADS eyebrow + Spread X/Y label aren't kissing the
canvas frame's left edge. Right side already breathes via
the actions cluster. */
padding: 4px 20px 0 20px !important;
margin: 0 !important;
}
body.laouts .spreadRail__nav {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
flex-shrink: 0 !important;
}
body.laouts .spreadRail__roundBtn,
body.laouts .spreadRail__iconBtn {
flex-shrink: 0 !important;
width: 28px !important;
height: 28px !important;
}
body.laouts .spreadRail__actions {
display: inline-flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 6px !important;
flex: 1 !important;
min-width: 0 !important;
}
body.laouts .spreadRail__stripWrap {
margin-top: 4px !important;
/* CHRISTINA 2026-05-06 · Was creating blank space below thumbnails.
* Tighten bottom padding/margin so spread sits closer to filmstrip. */
margin-bottom: 0 !important;
padding-bottom: 0 !important;
overflow-x: auto !important;
overflow-y: visible !important;
}
/* Stage view itself — sits flush against the filmstrip; gap above
* the spread is provided by .spreadCanvasStack > #laoutsSpreadArrows
* (the cycler row) only. No extra padding-top here. */
body.laouts .spreadStageView {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Spread rail itself — gap was 10px between header + thumbs + (killed)
* stage bar. Bring down to 6px since we don't have the stage bar to
* separate from anymore. */
body.laouts .spreadRail {
gap: 6px !important;
}
/* "All Spreads · N" heading on the spread rail — render the
existing label loud-and-clear instead of letting it wrap or
collapse against the action pills. */
body.laouts .spreadRail__top {
padding: 0 4px !important;
min-height: 32px !important;
row-gap: 6px !important;
}
body.laouts .spreadRail__label {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
white-space: nowrap !important;
}
/* Stage bar — single tidy row, never overlaps the filmstrip.
The undo/redo circles + the centered "1 photo · 1/47" pill
+ the LAYOUT pill on the right need to live in three columns
that never collide. Force a 3-col grid with the meta centered. */
/* CHRISTINA 2026-05-06 · KILL the entire stage bar. Christina
audited the redundancy: per-page arrows from spread-arrows.js
already cycle layouts (3 scopes: left / both / right). Spread
page chevrons handle prev/next spread. Recipe meta shows up
in the inspector's "Spread Layout" card (`1 of 53`). The bar
was contributing nothing not already on screen. Gone. */
body.laouts .laoutsStageBar,
body.laouts #laoutsStageBar,
body.laouts .laoutsStageBar__inner {
display: none !important;
}
body.laouts .laoutsStageUndo {
display: none !important;
}
/* CHRISTINA 2026-05-06 · ROUND 2 of clean canvas:
1. Hide undo/redo circles (still showing — engine's editorTopBar
copies leaking past my display:none).
2. Hide the faded filmstrip-wrapper bar with side chevrons that
shows above the spread when only 1 spread exists.
3. Move spread page chevrons OFF the spread (back to outside
the canvas frame, per the v2 mockup).
4. Hide the floating zoom pill (100% −+ Fit). */
/* 1 · undo/redo · BELT AND SUSPENDERS. Hide every variant. */
body.laouts .laoutsStageUndo,
body.laouts .laoutsStageUndo__btn,
body.laouts #topBarUndo,
body.laouts #topBarRedo,
body.laouts .editorTopBarGroup--left,
body.laouts .editorTopBar__cell--left {
display: none !important;
visibility: hidden !important;
}
/* 2 · filmstrip wrapper · KEEP visible · Christina wants spread
thumbnails above the spread. Removed the nonexistent body
class hiding rule that was always true. */
body.laouts .spreadRail__stripWrap {
display: block !important;
}
/* Hide just the empty strip-scroll chevron pair when there's
only 1 thumbnail and they have nothing to scroll. */
body.laouts .bookSpreadStripScroll__prev,
body.laouts .bookSpreadStripScroll__next,
body.laouts [class*="StripScroll__"][class*="prev"],
body.laouts [class*="StripScroll__"][class*="next"] {
display: none !important;
}
/* CHRISTINA 2026-05-06 · Index.html inline CSS sets the strip-scroll
* to min-height: 84px, leaving blank space below short thumbnails.
* Override so wrapper hugs its actual content. */
body.laouts .bookSpreadStripScroll {
min-height: 0 !important;
padding: 2px 2px 4px 2px !important;
}
/* 3 · spread structure · 3 components, properly stacked:
┌─────────────────────────────────────────────┐
│ spreadCanvasStack (column) │
│ ┌─────────────────────────────────────┐ │
│ │ #laoutsSpreadArrows (3 pairs · L/M/R) │ │ ← layout cycler
│ └─────────────────────────────────────┘ │
│ ┌─┐ ┌────────────────────────────┐ ┌─┐ │
│ │‹│ │ #wrap.bookSpreadFrame │ │›│ │ ← spread + page chevrons
│ └─┘ │ (the white paper spread) │ └─┘ │
│ └────────────────────────────┘ │
└─────────────────────────────────────────────┘ */
body.laouts .spreadCanvasStack {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
position: relative !important;
}
/* CHRISTINA 2026-05-06 · Spread layout-cycle arrows · final position-locked layout
* Per spread-arrows-mockup.html (approved):
* - The cycler ROW shares the spread's exact width (~540px desktop)
* - 3 chevron pairs absolute-positioned at 25 % / 50 % / 75 %
* → over the center of LEFT page, the SEAM, and the RIGHT page.
* - Outer labels "Left pg" / "Right pg" pushed to the row edges.
* - No "Spread" label on middle pair — position carries the meaning.
*/
/** CHRISTINA 2026-05-08 (later) · Cycler row RESTORED. Three chevron pairs
* above the spread:
* LEFT pair (left%:25) → cycles left-page layout
* MID pair (left%:50) → cycles whole-spread layout (over the spine)
* RIGHT pair (left%:75) → cycles right-page layout
* Keyboard shortcuts remain live: ← / → / Space.
* (Earlier display:none rule removed — was hiding the cyclers Christina
* now wants visible again.) */
/* All three pairs share the same anchor; they only differ in left%.
* Per mockup: pairs are bare — each chevron is its own circle, no
* pair-level pill background. Defeats dark-matcha-theme.css's pill bg. */
body.laouts .laoutsSpreadArrows__pair {
position: absolute !important;
top: 50% !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
pointer-events: auto !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
}
body.laouts .laoutsSpreadArrows__pair[data-scope="left"] { left: 25% !important; }
body.laouts .laoutsSpreadArrows__pair[data-scope="mid"] { left: 50% !important; gap: 18px !important; }
body.laouts .laoutsSpreadArrows__pair[data-scope="right"] { left: 75% !important; }
/* Outer labels at the row edges */
body.laouts .laoutsSpreadArrows__lab {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-family: 'JetBrains Mono', monospace !important;
font-size: 9px !important;
letter-spacing: 0.18em !important;
color: var(--laouts-coral) !important;
text-transform: uppercase !important;
white-space: nowrap !important;
pointer-events: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.laouts .laoutsSpreadArrows__lab--left { left: 0 !important; }
body.laouts .laoutsSpreadArrows__lab--right { right: 0 !important; }
body.laouts .laoutsSpreadArrows__arrow {
/** CHRISTINA 2026-05-08 · Same chrome treatment as the page-flip
* chevrons (.laoutsFlip__chev) so the cyclers read as the same
* family of off-spread controls. */
width: 28px !important;
height: 28px !important;
border-radius: 50% !important;
background: rgba(28, 17, 25, 0.7) !important;
border: 1px solid rgba(232, 165, 133, 0.35) !important;
color: var(--laouts-bone-soft) !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 13px !important;
padding: 0 !important;
margin: 0 !important;
transition: border-color .15s ease, color .15s ease, background .15s ease !important;
}
body.laouts .laoutsSpreadArrows__arrow:hover {
border-color: var(--laouts-coral) !important;
color: var(--laouts-coral) !important;
background: rgba(232, 165, 133, 0.12) !important;
}
/* CHRISTINA 2026-05-06 · Page chevrons sit OFF the white paper.
* The nav row is now a SIBLING of #wrap inside .spreadCanvasStack
* (ship.js ensures this). We anchor the row to the stack so the
* chevrons land in the gutter between the spread and the column edge.
* Stack is overflow:visible so chevrons aren't clipped. */
body.laouts .spreadCanvasStack {
position: relative !important;
overflow: visible !important;
}
body.laouts .spreadStageView {
position: relative !important;
overflow: visible !important;
}
body.laouts #spreadPageNavRow,
body.laouts .spreadPageNavRow {
position: absolute !important;
top: 50% !important;
left: 0 !important;
right: 0 !important;
transform: translateY(-50%) !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
pointer-events: none !important;
padding: 0 !important;
z-index: 6 !important;
margin: 0 !important;
}
body.laouts #spreadPageNavRow .spreadNavSideBtn,
body.laouts .spreadPageNavRow .spreadNavSideBtn {
pointer-events: auto !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
background: rgba(36, 20, 32, 0.55) !important;
border: 1px solid var(--laouts-hairline-2) !important;
color: var(--laouts-bone-soft) !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
}
body.laouts #spreadPageNavRow .spreadNavSideBtn:hover,
body.laouts .spreadPageNavRow .spreadNavSideBtn:hover {
border-color: var(--laouts-coral) !important;
color: var(--laouts-coral) !important;
background: rgba(232, 165, 133, 0.14) !important;
}
/* CHRISTINA 2026-05-06 · Floating zoom pill on the spread is KILLED.
* Zoom controls now live in the inspector's DOCUMENT card. Nothing on
* the working spread that doesn't belong on a printed page.
* Two selectors needed: the `.editorTopBar__zoomPill.laoutsZoomFloat`
* variant comes from focus-mode.js's _relocateZoomPill() which adds the
* .laoutsZoomFloat class to the engine's existing pill DOM and moves it
* to the spread stage. Higher-specificity rules in dark-matcha-theme.css
* give it a position:absolute. We override with extra specificity. */
body.laouts .laoutsZoomFloat,
body.laouts .editorTopBar__zoomPill.laoutsZoomFloat,
body.laouts .editorTopBar__zoomPill {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Inspector zoom row · part of the DOCUMENT card */
body.laouts .laoutsInspZoomRow {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin: 0 !important;
}
body.laouts .laoutsInspZoomBtn {
width: 36px !important;
min-height: 36px !important;
height: 36px !important;
border-radius: 8px !important;
background: transparent !important;
border: 1px solid var(--laouts-hairline-2) !important;
color: var(--laouts-bone-soft) !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1 !important;
transition: border-color .15s ease, color .15s ease, background .15s ease !important;
}
body.laouts .laoutsInspZoomBtn:hover {
border-color: var(--laouts-coral) !important;
color: var(--laouts-coral) !important;
background: rgba(232, 165, 133, 0.10) !important;
}
body.laouts .laoutsInspZoomFit {
flex: 1 1 auto !important;
min-height: 36px !important;
border-radius: 8px !important;
background: transparent !important;
border: 1px solid var(--laouts-hairline-2) !important;
color: var(--laouts-bone-soft) !important;
cursor: pointer !important;
font-family: 'JetBrains Mono', monospace !important;
font-size: 10px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
padding: 0 12px !important;
transition: border-color .15s ease, color .15s ease, background .15s ease !important;
}
body.laouts .laoutsInspZoomFit:hover {
border-color: var(--laouts-coral) !important;
color: var(--laouts-coral) !important;
background: rgba(232, 165, 133, 0.10) !important;
}
body.laouts .laoutsInspZoomPct {
font-family: 'JetBrains Mono', monospace !important;
font-size: 12px !important;
letter-spacing: 0.10em !important;
color: var(--laouts-bone) !important;
min-width: 50px !important;
text-align: center !important;
}
body.laouts .laoutsStageBar__inner {
display: grid !important;
/* Two columns now (no left undo/redo): meta · LAYOUT pill */
grid-template-columns: 1fr auto !important;
align-items: center !important;
flex-wrap: nowrap !important;
min-height: 28px !important;
padding: 4px 0 !important;
column-gap: 14px !important;
margin: 0 !important;
position: relative !important;
z-index: 2 !important;
background: rgba(36, 20, 32, 0.45) !important;
border: 1px solid var(--laouts-hairline) !important;
border-radius: var(--laouts-radius-md) !important;
}
body.laouts .laoutsStageBar__nav {
white-space: nowrap !important;
flex-shrink: 0 !important;
}
body.laouts .laoutsStageBar__meta {
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Undo/redo group on the left — keep it tight on its own column. */
body.laouts .laoutsStageBar__inner > *:first-child {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
flex-shrink: 0 !important;
}
/* LAYOUT pill on the right — never bleeds into the meta. */
body.laouts .laoutsStageBar__inner > *:last-child {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 6px !important;
flex-shrink: 0 !important;
}
/* CHRISTINA 2026-05-06 · KILLED · This block was the bug.
* It made each .laoutsSpreadArrows__pair position:absolute width:100%
* with justify-content:space-between, which stacked all 3 pairs on top
* of each other across the spread — the "long pill with chevrons at each
* end where only the right works" Christina was seeing. The pairs are now
* properly position-locked at 25/50/75% in the canonical block above.
* Do not re-add. */
/* ================================================================
CHRISTINA 2026-05-06 · SAFE-ZONE overlay on the spread.
Per spread-arrows-mockup.html (approved). Transparent coral wash
over the GUTTER + outer 18px bleed edges. Injected as a real DOM
sibling of the canvas via laouts-engine-spread-arrows.js because
#wrap.bookSpreadFrame::before/::after are already taken by the
layout-cycle PULSE animation in dark-matcha-theme.css.
pointer-events:none so the user can still drag/click photos.
============================================================== */
body.laouts .laoutsSafeZone {
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
z-index: 4 !important;
opacity: 0.85;
transition: opacity .25s ease;
}
/* Gutter wash · 64px wide centered on the seam */
body.laouts .laoutsSafeZone__gutter {
position: absolute !important;
left: 50% !important;
top: 0 !important;
bottom: 0 !important;
width: 64px !important;
transform: translateX(-50%) !important;
background: linear-gradient(90deg,
rgba(232, 165, 133, 0) 0%,
rgba(232, 165, 133, 0.18) 35%,
rgba(232, 165, 133, 0.28) 50%,
rgba(232, 165, 133, 0.18) 65%,
rgba(232, 165, 133, 0) 100%
) !important;
}
/* Outer bleed wash · 18px each side, fading inward */
body.laouts .laoutsSafeZone__bleed {
position: absolute !important;
inset: 0 !important;
background:
linear-gradient(90deg, rgba(232, 165, 133, 0.20), rgba(232, 165, 133, 0) 18px),
linear-gradient(270deg, rgba(232, 165, 133, 0.20), rgba(232, 165, 133, 0) 18px) !important;
}
/* Tiny gutter warning tag */
body.laouts .laoutsSafeZone__tag {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
font-family: 'JetBrains Mono', monospace !important;
font-size: 8.5px !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
color: rgba(120, 55, 40, 0.85) !important;
background: rgba(255, 255, 255, 0.78) !important;
padding: 3px 8px !important;
border-radius: 3px !important;
border: 1px solid rgba(232, 165, 133, 0.55) !important;
white-space: nowrap !important;
pointer-events: none !important;
}
/* Hide the safe-zone wash while the user is actively dragging
or editing — don't get in the way. */
body.laouts.is-dragging .laoutsSafeZone,
body.laouts.is-editing .laoutsSafeZone {
opacity: 0 !important;
}
/* ================================================================
CHRISTINA 2026-05-06 · Eyedropper · INLINE in PAGE BACKGROUND row.
Small icon button next to the Reset button. When active, crosshair
cursor over the spread + first click samples the page background.
============================================================== */
body.laouts .pageBgRow {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
body.laouts .laoutsEyedropperInlineBtn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
padding: 0 !important;
color: var(--laouts-bone-soft) !important;
background: transparent !important;
border: 1px solid var(--laouts-hairline-2) !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: border-color .15s ease, color .15s ease, background .15s ease !important;
}
body.laouts .laoutsEyedropperInlineBtn:hover {
border-color: var(--laouts-coral) !important;
color: var(--laouts-coral) !important;
background: rgba(232, 165, 133, 0.10) !important;
}
body.laouts .laoutsEyedropperInlineBtn.is-active {
border-color: var(--laouts-coral) !important;
color: var(--laouts-coral) !important;
background: rgba(232, 165, 133, 0.18) !important;
box-shadow: 0 0 0 2px rgba(232, 165, 133, 0.25) !important;
}
/* CHRISTINA 2026-05-06 · Eyedropper · simple cursor + tiny live chip.
* Killed the magnifier loupe entirely — it was oversized and the visual
* center of the loupe didn't match the actual sample point. Now: a
* proper eyedropper-icon cursor + a small chip near the cursor that
* shows the live sampled color and hex. The cursor IS the sample point. */
body.laouts.laouts-eyedropper-pick-mode #wrap.bookSpreadFrame,
body.laouts.laouts-eyedropper-pick-mode #c {
/* Inline SVG eyedropper cursor with hot-spot at the tip (x=2, y=22). */
cursor: url("data:image/svg+xml;utf8,") 2 22, crosshair !important;
}
body.laouts.laouts-eyedropper-pick-mode .laoutsSafeZone {
opacity: 0 !important; /* don't sample the wash */
}
/* Tiny live color chip following the cursor — small swatch + hex */
body.laouts .laoutsEyedropperChip {
position: fixed !important;
z-index: 10002 !important;
display: none;
align-items: center;
gap: 6px;
padding: 4px 8px 4px 4px;
border-radius: 999px;
background: rgba(20, 12, 18, 0.92);
border: 1px solid var(--laouts-hairline-2);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
pointer-events: none;
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
letter-spacing: 0.14em;
color: var(--laouts-bone);
}
body.laouts .laoutsEyedropperChip__swatch {
width: 16px;
height: 16px;
border-radius: 50%;
background: #000;
border: 1px solid rgba(243, 230, 220, 0.4);
flex-shrink: 0;
}
body.laouts .laoutsEyedropperChip__hex {
white-space: nowrap;
}
/* Tiny toast */
body.laouts .laoutsEyedropperToast {
position: fixed !important;
bottom: 32px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 10001 !important;
font-family: 'JetBrains Mono', monospace !important;
font-size: 10px !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: var(--laouts-bone) !important;
background: rgba(20, 12, 18, 0.92) !important;
border: 1px solid var(--laouts-hairline-2) !important;
padding: 8px 14px !important;
border-radius: 999px !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
pointer-events: none !important;
opacity: 0 !important;
transition: opacity 0.25s ease !important;
}
/* Force the BOOK SIZE select to render its current value text
even when the engine hasn't repainted yet. */
body.laouts aside#rightInspector .card select#bookSizeSelect,
body.laouts aside#rightInspector .card #bookSizeSelect {
color: var(--laouts-bone) !important;
font-weight: 500 !important;
}
/* =============================================================
Flagged drawer · the box that surfaces culled photos
----------------------------------------------------------- */
/* CHRISTINA 2026-05-06 · KILL the cull drawer CTA pill entirely.
Redundant with the masthead's flagged stat cards (Dups / Blur /
Eyes) which already open the same modal. Less stuff, more
obvious affordance. See library-redundancy-mockup.html. */
body.laouts .laoutsCullDrawer,
body.laouts .laoutsCullDrawer__open {
display: none !important;
}
/* Beef the flagged stat cards (Dups / Blur / Eyes) so they read
more clearly as actionable. The Keep card stays neutral since
it's a filter, not a modal-opener. */
body.laouts .laoutsLibMast__statCard[data-mast-filter="duplicates"],
body.laouts .laoutsLibMast__statCard[data-mast-filter="blurry"],
body.laouts .laoutsLibMast__statCard[data-mast-filter="closed-eyes"] {
background: linear-gradient(180deg, rgba(232, 165, 133, 0.08), rgba(232, 165, 133, 0.02)) !important;
border-color: rgba(232, 165, 133, 0.30) !important;
transition: border-color .18s ease, background .18s ease, transform .18s ease !important;
position: relative !important;
}
body.laouts .laoutsLibMast__statCard[data-mast-filter="duplicates"]:hover,
body.laouts .laoutsLibMast__statCard[data-mast-filter="blurry"]:hover,
body.laouts .laoutsLibMast__statCard[data-mast-filter="closed-eyes"]:hover {
border-color: var(--laouts-coral) !important;
background: rgba(232, 165, 133, 0.14) !important;
transform: translateY(-1px) !important;
}
body.laouts .laoutsLibMast__statCard[data-mast-filter="duplicates"] .laoutsLibMast__statLab,
body.laouts .laoutsLibMast__statCard[data-mast-filter="blurry"] .laoutsLibMast__statLab,
body.laouts .laoutsLibMast__statCard[data-mast-filter="closed-eyes"] .laoutsLibMast__statLab {
color: var(--laouts-coral) !important;
}
/* The ↗ arrow on flagged cards · subtle by default, brighter on hover. */
body.laouts .laoutsLibMast__statReview {
opacity: 0.55 !important;
transition: opacity .18s ease !important;
}
body.laouts .laoutsLibMast__statCard:hover .laoutsLibMast__statReview {
opacity: 1 !important;
}
/* Review hint below stat cards · "tap any flagged card to review" */
body.laouts .laoutsLibMast__reviewHint {
font-family: var(--laouts-font-mono) !important;
font-size: 8.5px !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--laouts-coral) !important;
text-align: center !important;
margin-top: 10px !important;
opacity: 0.72 !important;
font-weight: 500 !important;
}
/* (legacy cull drawer rules below kept for back-compat but the
element is hidden above so they don't render) */
body.laouts .laoutsCullDrawer--legacy-keep {
margin: 8px 0 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
display: block !important;
}
body.laouts .laoutsCullDrawer[hidden] {
display: none !important;
}
body.laouts .laoutsCullDrawer__open {
width: 100% !important;
display: grid !important;
grid-template-columns: auto 1fr auto !important;
align-items: center !important;
gap: 10px !important;
padding: 12px 14px !important;
background: linear-gradient(180deg, rgba(232, 165, 133, 0.06), rgba(232, 165, 133, 0.02)) !important;
border: 1px solid rgba(232, 165, 133, 0.30) !important;
border-radius: var(--laouts-radius-md) !important;
color: var(--laouts-bone) !important;
cursor: pointer;
font-family: var(--laouts-font-sans) !important;
text-align: left !important;
transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
body.laouts .laoutsCullDrawer__open:hover {
border-color: var(--laouts-coral) !important;
background: linear-gradient(180deg, rgba(232, 165, 133, 0.10), rgba(232, 165, 133, 0.04)) !important;
transform: translateY(-1px);
}
body.laouts .laoutsCullDrawer__icon {
font-size: 16px !important;
color: var(--laouts-coral) !important;
line-height: 1 !important;
}
body.laouts .laoutsCullDrawer__lab {
font-family: var(--laouts-font-sans) !important;
font-size: 13px !important;
font-weight: 500 !important;
color: var(--laouts-bone) !important;
display: flex !important;
flex-direction: column !important;
gap: 1px !important;
}
body.laouts .laoutsCullDrawer__lab b {
color: var(--laouts-coral) !important;
font-weight: 600 !important;
margin-right: 4px;
}
body.laouts .laoutsCullDrawer__sub {
font-family: var(--laouts-font-mono) !important;
font-size: 9px !important;
letter-spacing: 0.10em !important;
text-transform: uppercase !important;
color: var(--laouts-bone-soft) !important;
display: block !important;
margin-top: 2px !important;
grid-column: 2 / 3 !important;
}
body.laouts .laoutsCullDrawer__chev {
font-size: 16px !important;
color: var(--laouts-coral) !important;
font-weight: 500 !important;
transition: transform .18s ease;
}
body.laouts .laoutsCullDrawer__open:hover .laoutsCullDrawer__chev {
transform: translateX(3px);
}
/* =============================================================
Welcome / opt-in / ready popups · centered focused modals
-----------------------------------------------------------
When any of the cull-panel decision states are showing
(welcome=Pick your book, optin=Want help sorting,
ready=Ready to build), present them as a centered modal
over a blurred engine — like the path picker. The right-
side Document panel still owns book size as the persistent
edit-anytime control. */
body.laouts .laoutsCullPanel:has([data-cull-welcome]:not([hidden])),
body.laouts .laoutsCullPanel:has([data-cull-optin]:not([hidden])),
body.laouts .laoutsCullPanel:has([data-cull-ready]:not([hidden])) {
position: fixed !important;
inset: 0 !important;
z-index: 9100 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(28, 17, 25, 0.62) !important;
backdrop-filter: blur(10px) saturate(1.1) !important;
-webkit-backdrop-filter: blur(10px) saturate(1.1) !important;
padding: 32px !important;
margin: 0 !important;
width: 100vw !important;
height: 100vh !important; height: 100dvh !important;
border: none !important;
border-radius: 0 !important;
pointer-events: auto !important;
}
body.laouts .laoutsCullPanel:has([data-cull-welcome]:not([hidden])) [data-cull-welcome],
body.laouts .laoutsCullPanel:has([data-cull-optin]:not([hidden])) [data-cull-optin],
body.laouts .laoutsCullPanel:has([data-cull-ready]:not([hidden])) [data-cull-ready] {
width: min(640px, 100%) !important;
max-height: calc(100vh - 64px) !important; max-height: calc(100dvh - 64px) !important;
overflow-y: auto !important;
background: linear-gradient(180deg, #2a1827 0%, #1f1019 100%) !important;
border: 1px solid rgba(232, 165, 133, 0.30) !important;
border-radius: 18px !important;
padding: 32px 36px !important;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(232, 165, 133, 0.06) inset !important;
animation: laoutsPickBookIn 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Welcome state needs more width because it has 3 size + 2 cover cards. */
body.laouts .laoutsCullPanel:has([data-cull-welcome]:not([hidden])) [data-cull-welcome] {
width: min(760px, 100%) !important;
}
/* Velvet / plum default 720px on cull prompts — ship chrome widens for polish. */
body.laouts .laoutsCullPrompt__choices {
max-width: min(760px, 92vw) !important;
}
/* Optin / ready · stack vertically inside the modal */
body.laouts .laoutsCullPanel:has([data-cull-optin]:not([hidden])) [data-cull-optin] .laoutsCurateHero__row,
body.laouts .laoutsCullPanel:has([data-cull-ready]:not([hidden])) [data-cull-ready] .laoutsCurateHero__row {
display: flex !important;
flex-direction: column !important;
gap: 22px !important;
align-items: stretch !important;
text-align: center !important;
}
body.laouts .laoutsCullPanel:has([data-cull-optin]:not([hidden])) [data-cull-optin] .laoutsCurateHero__copy,
body.laouts .laoutsCullPanel:has([data-cull-ready]:not([hidden])) [data-cull-ready] .laoutsCurateHero__copy {
text-align: center !important;
}
body.laouts .laoutsCullPanel:has([data-cull-optin]:not([hidden])) [data-cull-optin] .laoutsCurateHero__lab,
body.laouts .laoutsCullPanel:has([data-cull-ready]:not([hidden])) [data-cull-ready] .laoutsCurateHero__lab {
justify-content: center !important;
}
body.laouts .laoutsCullPanel:has([data-cull-optin]:not([hidden])) [data-cull-optin] .laoutsCurateHero__title,
body.laouts .laoutsCullPanel:has([data-cull-ready]:not([hidden])) [data-cull-ready] .laoutsCurateHero__title {
font-size: 32px !important;
line-height: 1.15 !important;
margin-bottom: 8px !important;
}
body.laouts .laoutsCullPanel:has([data-cull-optin]:not([hidden])) [data-cull-optin] .laoutsCurateHero__sub,
body.laouts .laoutsCullPanel:has([data-cull-ready]:not([hidden])) [data-cull-ready] .laoutsCurateHero__sub {
font-size: 14px !important;
line-height: 1.5 !important;
max-width: 480px !important;
margin: 0 auto !important;
}
body.laouts .laoutsCullPanel:has([data-cull-optin]:not([hidden])) [data-cull-optin] .laoutsCurateHero__cta,
body.laouts .laoutsCullPanel:has([data-cull-ready]:not([hidden])) [data-cull-ready] .laoutsCurateHero__cta {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
align-items: center !important;
width: 100% !important;
}
body.laouts .laoutsCullPanel:has([data-cull-optin]:not([hidden])) [data-cull-optin] .laoutsCurateHero__primary,
body.laouts .laoutsCullPanel:has([data-cull-ready]:not([hidden])) [data-cull-ready] .laoutsCurateHero__primary {
width: min(360px, 100%) !important;
height: 50px !important;
font-size: 15px !important;
font-weight: 500 !important;
}
body.laouts .laoutsCullPanel:has([data-cull-optin]:not([hidden])) [data-cull-optin] .laoutsCurateHero__secondary,
body.laouts .laoutsCullPanel:has([data-cull-ready]:not([hidden])) [data-cull-ready] .laoutsCurateHero__secondary {
font-size: 12px !important;
}
@keyframes laoutsPickBookIn {
from { opacity: 0; transform: translateY(12px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Stack the row vertically inside the modal — no more side-by-side. */
body.laouts .laoutsCullPanel:has([data-cull-welcome]:not([hidden])) [data-cull-welcome] .laoutsCurateHero__row {
display: flex !important;
flex-direction: column !important;
gap: 22px !important;
align-items: stretch !important;
}
body.laouts .laoutsCullPanel:has([data-cull-welcome]:not([hidden])) [data-cull-welcome] .laoutsCurateHero__copy {
text-align: left !important;
max-width: 100% !important;
}
body.laouts .laoutsCullPanel:has([data-cull-welcome]:not([hidden])) [data-cull-welcome] .laoutsCurateHero__title {
font-size: 30px !important;
line-height: 1.15 !important;
margin-bottom: 8px !important;
}
body.laouts .laoutsCullPanel:has([data-cull-welcome]:not([hidden])) [data-cull-welcome] .laoutsCurateHero__sub {
font-size: 13.5px !important;
line-height: 1.5 !important;
color: var(--laouts-bone-soft) !important;
margin: 0 0 8px !important;
max-width: 560px !important;
}
body.laouts .laoutsCurateHero__tip {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
font-family: var(--laouts-font-mono) !important;
font-size: 11px !important;
letter-spacing: 0.06em !important;
color: var(--laouts-coral) !important;
background: rgba(232, 165, 133, 0.08) !important;
border: 1px solid rgba(232, 165, 133, 0.22) !important;
border-radius: 999px !important;
padding: 6px 12px !important;
margin: 4px 0 0 !important;
width: fit-content !important;
}
body.laouts .laoutsCurateHero__tipIcon {
font-size: 13px;
line-height: 1;
}
/* + Add more photos · subtle but discoverable inline option in
the welcome popup so users can grow their library without
leaving the decision modal. */
body.laouts .laoutsCurateHero__addMore {
display: inline-flex !important;
align-items: baseline !important;
gap: 8px !important;
padding: 8px 12px !important;
margin: 12px 0 0 !important;
background: transparent !important;
border: 1px dashed rgba(232, 165, 133, 0.30) !important;
border-radius: 999px !important;
cursor: pointer;
font-family: var(--laouts-font-sans) !important;
color: var(--laouts-bone) !important;
width: fit-content !important;
transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
body.laouts .laoutsCurateHero__addMore:hover {
border-color: var(--laouts-coral) !important;
background: rgba(232, 165, 133, 0.06) !important;
transform: translateY(-1px);
}
body.laouts .laoutsCurateHero__addMoreIcon {
font-size: 16px !important;
color: var(--laouts-coral) !important;
line-height: 1 !important;
font-weight: 500 !important;
}
body.laouts .laoutsCurateHero__addMoreLab {
font-size: 12.5px !important;
font-weight: 500 !important;
color: var(--laouts-bone) !important;
}
body.laouts .laoutsCurateHero__addMoreSub {
font-family: var(--laouts-font-mono) !important;
font-size: 9.5px !important;
letter-spacing: 0.10em !important;
color: var(--laouts-bone-soft) !important;
}
body.laouts .laoutsCullPanel:has([data-cull-welcome]:not([hidden])) [data-cull-welcome] .laoutsCurateHero__cta {
width: 100% !important;
}
body.laouts .laoutsCullPanel:has([data-cull-welcome]:not([hidden])) [data-cull-welcome] .laoutsBookPicker__opts {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
}
body.laouts .laoutsCullPanel:has([data-cull-welcome]:not([hidden])) [data-cull-welcome] .laoutsBookPicker__opts--two {
grid-template-columns: 1fr 1fr !important;
}
/* Secondary row sits ABOVE the primary now · spacing flipped. */
body.laouts .laoutsCullPanel:has([data-cull-welcome]:not([hidden])) [data-cull-welcome] .laoutsCurateHero__secondaryRow {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
margin-top: 18px !important;
margin-bottom: 0 !important;
}
body.laouts .laoutsCullPanel:has([data-cull-welcome]:not([hidden])) [data-cull-welcome] .laoutsCurateHero__secondary {
height: 38px !important;
font-size: 12px !important;
}
body.laouts .laoutsCullPanel:has([data-cull-welcome]:not([hidden])) [data-cull-welcome] .laoutsCurateHero__primary {
width: 100% !important;
height: 50px !important;
margin-top: 10px !important;
font-size: 15px !important;
font-weight: 500 !important;
}
/* While ANY decision popup (welcome / optin / ready) is showing,
blur the engine + the path picker + everything else behind so
the centered modal is the only focused thing. */
body.laouts:has(.laoutsCullPanel [data-cull-welcome]:not([hidden])) .appMain,
body.laouts:has(.laoutsCullPanel [data-cull-optin]:not([hidden])) .appMain,
body.laouts:has(.laoutsCullPanel [data-cull-ready]:not([hidden])) .appMain {
filter: blur(8px) brightness(0.7) !important;
pointer-events: none !important;
user-select: none !important;
transition: filter 0.3s ease;
}
body.laouts:has(.laoutsCullPanel [data-cull-welcome]:not([hidden])) .laoutsToolRail,
body.laouts:has(.laoutsCullPanel [data-cull-welcome]:not([hidden])) .laoutsBrandTopbar,
body.laouts:has(.laoutsCullPanel [data-cull-optin]:not([hidden])) .laoutsToolRail,
body.laouts:has(.laoutsCullPanel [data-cull-optin]:not([hidden])) .laoutsBrandTopbar,
body.laouts:has(.laoutsCullPanel [data-cull-ready]:not([hidden])) .laoutsToolRail,
body.laouts:has(.laoutsCullPanel [data-cull-ready]:not([hidden])) .laoutsBrandTopbar {
filter: blur(6px) brightness(0.7) !important;
pointer-events: none !important;
}
/* Path picker · blurred + non-interactive while a decision popup
is open, so it's clearly background context. */
body.laouts:has(.laoutsCullPanel [data-cull-welcome]:not([hidden])) .laoutsPathPicker,
body.laouts:has(.laoutsCullPanel [data-cull-optin]:not([hidden])) .laoutsPathPicker,
body.laouts:has(.laoutsCullPanel [data-cull-ready]:not([hidden])) .laoutsPathPicker {
filter: blur(8px) brightness(0.5) !important;
pointer-events: none !important;
opacity: 0.5 !important;
z-index: 8000 !important;
}
/* =============================================================
⬢ SHIP · v2 · engine-mockup-v2 contract (canonical)
-----------------------------------------------------------
Single override layer · /ENGINE_CRITIQUE.md + relay ten bullets.
Three rows above the spread · hide duplicate top bar · 320 | flex | 340.
Responsive breakpoints live here ONLY (verified in DevTools cascade).
============================================================= */
/* 1 · Hidden editor top row · undo/zoom/export live in stage bar /
floating pill · library duplicate actions unchanged in DOM. */
body.laouts #editorTopBar.editorTopBar {
display: none !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
overflow: hidden !important;
}
/* 2 · STAGE GRID · columns + padding + breakpoints (no duplicate rules upstream) */
body.laouts .appMain {
padding-top: 12px !important;
padding-left: 0 !important;
padding-right: 0 !important;
grid-template-columns: minmax(420px, var(--lib-px, 420px)) minmax(0, 1fr) 360px !important;
}
@media (max-width: 1280px) {
body.laouts .appMain {
grid-template-columns: minmax(380px, var(--lib-px, 380px)) minmax(0, 1fr) minmax(300px, 320px) !important;
}
}
/* CHRISTINA 2026-05-07 · Bug 5 fix · removed the legacy
"<=1080px → 1fr + display:none for inspector and library" rule.
Replaced by the graceful breakpoints at the bottom of this file
(drawer-style inspector + responsive banner). The old display:none
was making the engine completely unusable on tablets. */
body.laouts .libDock {
min-width: 320px !important;
}
body.laouts .libraryColumn,
body.laouts .libraryColumn.lightTableStrip {
min-width: 320px !important;
}
/* 3 · INSPECTOR · 340px (was 320), no clipping */
body.laouts aside#rightInspector,
body.laouts .sidebar#rightInspector {
width: 340px !important;
min-width: 340px !important;
}
/* 4 · "All spreads · N" eyebrow on spread rail header */
body.laouts .laoutsAllSpreadsEyebrow {
display: inline-flex !important;
align-items: baseline !important;
gap: 6px !important;
/* CHRISTINA 2026-05-06: was `0 12px 0 4px` — 4px left was too
tight, eyebrow was kissing the canvas frame. Match the
parent header's 20px LEFT padding so they reinforce each
other and the eyebrow can never sit flush. */
padding: 0 12px 0 0 !important;
margin-right: 4px !important;
flex-shrink: 0 !important;
font-family: var(--laouts-font-mono) !important;
font-size: 9px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: var(--laouts-bone-muted, var(--laouts-bone-soft)) !important;
}
body.laouts .laoutsAllSpreadsEyebrow__lab {
color: var(--laouts-bone-soft) !important;
}
body.laouts .laoutsAllSpreadsEyebrow__sep {
color: var(--laouts-bone-mute) !important;
}
body.laouts .laoutsAllSpreadsEyebrow__count {
color: var(--laouts-bone) !important;
font-weight: 500 !important;
letter-spacing: 0.06em !important;
}
/* The original "Spread 1 / N" label · keep it but mute it
since the eyebrow now states the album count. */
body.laouts .spreadRail__label {
font-size: 10px !important;
color: var(--laouts-bone-mute) !important;
letter-spacing: 0.10em !important;
}
/* CHRISTINA 2026-05-06 · the .laoutsStageUndo styling block was
overriding the earlier display:none rule (later in cascade
wins). Removed entirely — undo/redo runs via Cmd+Z keyboard
shortcut. See line ~968 for the hide rule. */
/* Stage bar engine's left "← Layout" pill is now redundant.
Spread chevrons handle prev spread; the right "Layout →"
pill handles recipe cycling. */
body.laouts .laoutsStageBar__nav--hidden,
body.laouts #laoutsStageLayoutPrev {
display: none !important;
}
/* 6 · FLOATING ZOOM PILL · bottom-right of canvas */
body.laouts .laoutsZoomFloat {
position: absolute !important;
right: 24px !important;
bottom: 18px !important;
z-index: 8 !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
padding: 5px 6px !important;
border-radius: 999px !important;
background: rgba(36, 20, 32, 0.85) !important;
border: 1px solid var(--laouts-hairline-2) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35) !important;
}
body.laouts .laoutsZoomFloat__btn,
body.laouts .laoutsZoomFloat__fit {
width: 26px !important;
height: 26px !important;
border: none !important;
background: transparent !important;
color: var(--laouts-bone-soft) !important;
font-size: 14px !important;
cursor: pointer !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
body.laouts .laoutsZoomFloat__btn:hover,
body.laouts .laoutsZoomFloat__fit:hover {
background: rgba(232, 165, 133, 0.12) !important;
color: var(--laouts-coral) !important;
}
body.laouts .laoutsZoomFloat__pct {
font-family: var(--laouts-font-mono) !important;
font-size: 10px !important;
letter-spacing: 0.06em !important;
color: var(--laouts-bone-soft) !important;
padding: 0 6px !important;
min-width: 36px !important;
text-align: center !important;
}
body.laouts .laoutsZoomFloat__fit {
font-size: 9px !important;
letter-spacing: 0.10em !important;
font-family: var(--laouts-font-mono) !important;
font-weight: 500 !important;
width: auto !important;
padding: 0 8px !important;
border-left: 1px solid var(--laouts-hairline-2) !important;
border-radius: 0 999px 999px 0 !important;
}
/* 7 · Photo grid · scrolls inside the library so BUILD MY BOOK
stays anchored at the bottom even with 100+ photos. */
body.laouts .libraryColumn .imageGalleryDock,
body.laouts .libraryColumn #imageGalleryDock,
/* ================================================================
CHRISTINA 2026-05-06 · Recraft.ai integration · cover-art generator.
Contextual entry points (spread 1 cover, empty-page backgrounds)
instead of a separate "AI Studio" page. Modal opens in-place.
============================================================== */
/* AI cover button · CHRISTINA 2026-05-08 · Day 1 SUBTRACT · was bolted
* top-right of the canvas via position: absolute, which crowded the
* spread. Hidden for Day 1; will be surfaced as a regular pill in the
* inspector Document card later.
* TODO Day 5: surface AI cover in inspector */
body.laouts .laoutsRecraftCoverBtn {
display: none !important;
}
/* Modal · scrim + card */
body.laouts .laoutsRecraftModal {
position: fixed !important;
inset: 0 !important;
z-index: 200 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
body.laouts .laoutsRecraftModal[hidden] { display: none !important; }
body.laouts .laoutsRecraftModal__scrim {
position: absolute;
inset: 0;
background: rgba(15, 8, 12, 0.78);
backdrop-filter: blur(10px);
cursor: pointer;
}
body.laouts .laoutsRecraftModal__card {
position: relative;
width: min(680px, calc(100vw - 40px));
max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px);
overflow-y: auto;
background: rgba(28, 17, 25, 0.98);
border: 1px solid var(--laouts-hairline-2);
border-radius: 16px;
padding: 28px 30px;
box-shadow: 0 28px 100px rgba(0, 0, 0, 0.6);
font-family: 'Inter', system-ui, sans-serif;
color: var(--laouts-bone);
}
body.laouts .laoutsRecraftModal__close {
position: absolute;
top: 14px;
right: 14px;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--laouts-hairline-2);
color: var(--laouts-bone-soft);
font-size: 16px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
body.laouts .laoutsRecraftModal__close:hover {
border-color: var(--laouts-coral);
color: var(--laouts-coral);
}
body.laouts .laoutsRecraftModal__head { margin-bottom: 14px; }
body.laouts .laoutsRecraftModal__kicker {
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
letter-spacing: 0.18em;
color: var(--laouts-coral);
text-transform: uppercase;
}
body.laouts .laoutsRecraftModal__title {
font-family: 'Fraunces', serif;
font-size: 22px;
font-weight: 500;
margin: 6px 0 4px;
color: var(--laouts-bone);
}
body.laouts .laoutsRecraftModal__sub {
font-size: 12.5px;
color: var(--laouts-bone-soft);
line-height: 1.5;
}
body.laouts .laoutsRecraftModal__prompt {
width: 100%;
margin-top: 14px;
padding: 12px 14px;
background: rgba(20, 12, 18, 0.6);
border: 1px solid var(--laouts-hairline-2);
border-radius: 10px;
color: var(--laouts-bone);
font-family: 'Inter', system-ui, sans-serif;
font-size: 13px;
line-height: 1.45;
resize: vertical;
}
body.laouts .laoutsRecraftModal__prompt:focus {
outline: none;
border-color: var(--laouts-coral);
}
body.laouts .laoutsRecraftModal__styleRow {
display: flex;
align-items: center;
gap: 6px;
margin-top: 12px;
flex-wrap: wrap;
}
body.laouts .laoutsRecraftModal__styleLab {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 0.16em;
color: var(--laouts-bone-soft);
text-transform: uppercase;
margin-right: 6px;
}
body.laouts .laoutsRecraftModal__styleChip {
padding: 6px 12px;
border-radius: 999px;
background: transparent;
border: 1px solid var(--laouts-hairline-2);
color: var(--laouts-bone-soft);
font-family: 'Inter', system-ui, sans-serif;
font-size: 11.5px;
cursor: pointer;
transition: border-color .15s ease, color .15s ease, background .15s ease;
}
body.laouts .laoutsRecraftModal__styleChip:hover {
border-color: var(--laouts-coral);
color: var(--laouts-coral);
}
body.laouts .laoutsRecraftModal__styleChip.is-active {
background: rgba(232, 165, 133, 0.18);
border-color: var(--laouts-coral);
color: var(--laouts-coral);
}
body.laouts .laoutsRecraftModal__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
margin-top: 18px;
}
body.laouts .laoutsRecraftModal__cancel {
padding: 10px 16px;
border-radius: 999px;
background: transparent;
border: 1px solid var(--laouts-hairline-2);
color: var(--laouts-bone-soft);
font-family: 'Inter', system-ui, sans-serif;
font-size: 12px;
cursor: pointer;
}
body.laouts .laoutsRecraftModal__cancel:hover {
border-color: var(--laouts-bone-soft);
color: var(--laouts-bone);
}
body.laouts .laoutsRecraftModal__generate {
padding: 10px 22px;
border-radius: 999px;
background: var(--laouts-coral);
border: 1px solid var(--laouts-coral);
color: #1a0d14;
font-family: 'Inter', system-ui, sans-serif;
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
box-shadow: 0 6px 18px rgba(232, 165, 133, 0.4);
}
body.laouts .laoutsRecraftModal__generate[disabled] { opacity: 0.6; cursor: wait; }
body.laouts .laoutsRecraftModal__results { margin-top: 18px; }
body.laouts .laoutsRecraftModal__results[hidden] { display: none !important; }
body.laouts .laoutsRecraftModal__loading {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.14em;
color: var(--laouts-bone-soft);
text-transform: uppercase;
text-align: center;
padding: 32px;
}
body.laouts .laoutsRecraftModal__error {
font-size: 12px;
color: #ff8580;
background: rgba(255, 133, 128, 0.10);
border: 1px solid rgba(255, 133, 128, 0.42);
padding: 12px 14px;
border-radius: 8px;
line-height: 1.45;
}
body.laouts .laoutsRecraftModal__error code {
background: rgba(255, 255, 255, 0.06);
padding: 1px 5px;
border-radius: 3px;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
}
body.laouts .laoutsRecraftModal__resultsHead,
body.laouts .laoutsRecraftModal__resultsFoot {
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
letter-spacing: 0.16em;
color: var(--laouts-bone-soft);
text-transform: uppercase;
margin-bottom: 8px;
}
body.laouts .laoutsRecraftModal__resultsFoot { margin: 12px 0 0; text-align: center; }
body.laouts .laoutsRecraftModal__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
body.laouts .laoutsRecraftModal__pick {
position: relative;
padding: 0;
border: 1px solid var(--laouts-hairline-2);
border-radius: 10px;
background: #1a0d14;
cursor: pointer;
overflow: hidden;
aspect-ratio: 1;
transition: border-color .15s ease, transform .12s ease;
}
body.laouts .laoutsRecraftModal__pick:hover {
border-color: var(--laouts-coral);
transform: translateY(-2px);
}
body.laouts .laoutsRecraftModal__pick img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
body.laouts .laoutsRecraftModal__pickHint {
position: absolute;
inset: auto 0 0 0;
padding: 6px 10px;
background: rgba(20, 12, 18, 0.88);
color: var(--laouts-bone);
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
text-align: center;
opacity: 0;
transition: opacity .15s ease;
}
body.laouts .laoutsRecraftModal__pick:hover .laoutsRecraftModal__pickHint {
opacity: 1;
}
/* Toast */
body.laouts .laoutsRecraftToast {
position: fixed;
bottom: 36px;
left: 50%;
transform: translateX(-50%);
z-index: 250;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--laouts-bone);
background: rgba(20, 12, 18, 0.94);
border: 1px solid var(--laouts-coral);
padding: 10px 18px;
border-radius: 999px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
pointer-events: none;
opacity: 0;
transition: opacity .25s ease;
}
/* CHRISTINA 2026-05-06 · Photo-used badge · marks library tiles whose
* photo is already placed on a spread. Coral checkmark in the corner +
* subtle dim on the tile so the unused photos pop more. */
body.laouts .galleryItem.laouts-tile--used {
position: relative;
}
body.laouts .galleryItem.laouts-tile--used::after {
content: "";
position: absolute;
top: 4px;
right: 4px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--laouts-coral) center/12px 12px no-repeat
url("data:image/svg+xml;utf8,");
box-shadow: 0 2px 6px rgba(232, 165, 133, 0.5);
z-index: 5;
pointer-events: none;
}
body.laouts .galleryItem.laouts-tile--used .galleryThumb,
body.laouts .galleryItem.laouts-tile--used img {
opacity: 0.55 !important;
transition: opacity .18s ease !important;
}
body.laouts .galleryItem.laouts-tile--used:hover .galleryThumb,
body.laouts .galleryItem.laouts-tile--used:hover img {
opacity: 0.85 !important;
}
/* CHRISTINA 2026-05-06 (round 9) · KEEP FIXED-SIZE TILES.
* Earlier flex attempt (minmax(_, 1fr)) made tiles stretch into vertical
* strips because grid-auto-rows didn't follow. Restore the dark-matcha
* pattern: fixed pixel tiles in fixed pixel rows, justify-content
* spreads them to fill the column edge-to-edge. */
body.laouts #imageGalleryDock .userGallery,
body.laouts .libraryColumn #userGallery {
justify-content: space-between !important; /* fill column edge-to-edge */
width: 100% !important;
}
body.laouts .libraryColumn .userGallery,
body.laouts .libraryColumn #userGallery {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
scrollbar-width: thin !important;
scrollbar-color: var(--laouts-hairline-2) transparent !important;
}
/* 8 · Spread page chevrons · vertical centre on #wrap.bookSpreadFrame
(LAOUTS_RELAY_ENGINE_V2_POLISH · ship moves #spreadPageNavRow inside #wrap). */
body.laouts #wrap.bookSpreadFrame {
position: relative !important;
overflow: visible !important;
}
body.laouts #wrap.bookSpreadFrame #spreadPageNavRow {
position: absolute !important;
top: 50% !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
transform: translateY(-50%) !important;
margin: 0 !important;
padding: 0 6px !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
pointer-events: none !important;
z-index: 7 !important;
background: transparent !important;
border: none !important;
box-sizing: border-box !important;
}
body.laouts #wrap.bookSpreadFrame #spreadPageNavRow .spreadNavSideBtn {
pointer-events: auto !important;
}
body.laouts #wrap.bookSpreadFrame .spreadNavSideBtn {
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
background: rgba(36, 20, 32, 0.52) !important;
border: 1px solid var(--laouts-hairline-2) !important;
color: var(--laouts-bone-soft) !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
backdrop-filter: blur(36px) !important;
-webkit-backdrop-filter: blur(36px) !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
}
body.laouts #wrap.bookSpreadFrame .spreadNavSideBtn:hover:not(:disabled) {
border-color: var(--laouts-coral) !important;
color: var(--laouts-coral) !important;
background: rgba(232, 165, 133, 0.14) !important;
}
/* Matcha hides page-nav buttons globally — reinstate inside wrap when visible. */
body.laouts #wrap.bookSpreadFrame #spreadNavPrev:not([hidden]),
body.laouts #wrap.bookSpreadFrame #spreadNavNext:not([hidden]) {
display: inline-flex !important;
}
/* 9 · Add more photos in masthead · cleaner copy, no "→ re-cull" oddity */
body.laouts .laoutsLibMast__addMoreSub {
font-size: 9px !important;
color: var(--laouts-bone-mute) !important;
letter-spacing: 0.10em !important;
}
/* 10 · Inspector cards · width-safe internal padding */
body.laouts aside#rightInspector .card,
body.laouts .sidebar#rightInspector .card {
width: 100% !important;
max-width: 100% !important;
padding: 14px !important;
box-sizing: border-box !important;
}
/* Diptych row · always wraps, never clips */
body.laouts aside#rightInspector .splitDiptych,
body.laouts aside#rightInspector [data-split-diptych] {
white-space: normal !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
line-height: 1.4 !important;
font-size: 11.5px !important;
display: block !important;
width: 100% !important;
padding: 10px 12px !important;
}
/* Spread rail row 1 · eyebrow · nav · actions (explicit grid).
CHRISTINA 2026-05-06 · she circled the WHOLE center column
showing the eyebrow kissing the left frame edge, while the
actions cluster on the right has natural slack because of
the 1fr column. Bump LEFT padding to 56px (was 24) so the
eyebrow visually matches the actions' breathing room on the
right. */
body.laouts #spreadNavBar.spreadRail > .spreadRail__header {
display: grid !important;
grid-template-columns: auto auto minmax(0, 1fr) !important;
align-items: center !important;
column-gap: 12px !important;
row-gap: 8px !important;
justify-items: stretch !important;
/* CHRISTINA 2026-05-06 (round 7) · Was 4px 24px 4px 56px — the 56px
* left padding pushed the filmstrip thumbnails ~56px right, leaving
* a black strip on the left. Symmetric 12px now so thumbnails use
* the canvas column edge-to-edge. */
padding: 4px 12px 4px 12px !important;
box-sizing: border-box !important;
}
/* Same minimal padding on the filmstrip wrapper + stage bar so
* thumbnails align flush with the column. */
body.laouts .spreadRail__stripWrap,
body.laouts .laoutsStageBar,
body.laouts .laoutsStageBar__inner {
padding-left: 12px !important;
padding-right: 12px !important;
box-sizing: border-box !important;
}
body.laouts #spreadNavBar.spreadRail > .spreadRail__header .spreadRail__actions {
justify-self: end !important;
}
/* Canvas stack + framed spread · mockup .spreadStage horizontal band.
* CHRISTINA 2026-05-06 · MUST be align-items: center so the spread sits
* centered horizontally in the column. Earlier `stretch` made #wrap span
* full width and the canvas left-aligned inside it — which is what
* caused the spread to drift right of center (more black gap on the
* left, less on the right). */
body.laouts .spreadCanvasStack {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
overflow: visible !important;
min-height: 0 !important;
}
/* Diptych control is #btnSplitDiptych · not .splitDiptych. */
body.laouts #btnSplitDiptych.laoutsSplitDiptychBtn {
align-items: flex-start !important;
justify-content: center !important;
flex-wrap: wrap !important;
white-space: normal !important;
text-align: center !important;
line-height: 1.35 !important;
min-height: auto !important;
}
body.laouts #btnSplitDiptych.laoutsSplitDiptychBtn > span:last-of-type {
flex: 1 1 100% !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
}
/* Library dock · masthead + grid contained; BUILD pill stays anchored. */
body.laouts #libDock.libDock {
flex: 1 1 auto !important;
min-height: 0 !important;
}
body.laouts #imageGalleryDock.libraryColumn {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow: hidden !important;
}
/* Center scroll viewport · consolidated.
* CHRISTINA 2026-05-06 · Was 24px 16px 16px — that 16px of horizontal
* padding compounded with column gaps to leave a black wasteland
* between the library and the canvas. Cut to 4px so the canvas
* fills as much of the column as the aspect ratio allows. */
body.laouts .stageWrap {
padding: 12px 4px 8px !important;
}
body.laouts .cepFocusShellBar[hidden] {
display: none !important;
}
body.laouts .stageWrap .emptySpread__hint,
body.laouts .stageWrap .emptyDropHint {
font-size: 13px !important;
color: var(--laouts-bone-soft) !important;
text-align: center !important;
padding: 24px !important;
}
/* =============================================================
Organize book · contact-sheet overview (LAOUTS_RELAY_ENGINE_V2_POLISH)
Full-width stage; library + inspector hidden; density grid on strip. */
body.laouts.cep-focus-workspace.cep-focus-book-overview .libDock,
body.laouts.cep-focus-workspace.cep-focus-book-overview aside#rightInspector,
body.laouts.cep-focus-workspace.cep-focus-book-overview #rightInspector.sidebar {
display: none !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .appMain {
grid-template-columns: minmax(0, 1fr) !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .centerColumn {
max-width: none !important;
width: 100% !important;
min-width: 0 !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .stageWorkArea {
flex: 1 1 0 !important;
min-height: 0 !important;
}
/* Shell bar duplicates organize header while in book overview. */
body.laouts.cep-focus-workspace.cep-focus-book-overview:not(.laouts--focusMode) .cepFocusShellBar {
display: none !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview #cepFocusBookOverview {
padding: 0 !important;
/* CHRISTINA 2026-05-08 · Was a gradient (#1f1019 → #12060d) which
read as VIOLET against the rest of the warm Velvet Plum engine.
Flat warm plum at 92% with backdrop-blur reads as overlay, not
violet block. */
background: rgba(28, 17, 25, 0.92) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border: none !important;
flex: 1 1 0 !important;
min-height: 0 !important;
overflow: hidden !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeShell {
display: flex !important;
flex-direction: column !important;
flex: 1 1 0 !important;
min-height: 0 !important;
width: 100% !important;
max-width: 1400px !important;
margin: 0 auto !important;
/* CHRISTINA 2026-05-07 · trimmed top from 12px → 4px (and the
Velvet Plum block below pulls 28px → 8px) so headline sits
~24-28px below the engine step rail instead of 60+. */
padding: 4px 20px 16px !important;
box-sizing: border-box !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeader {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
align-items: center !important;
gap: 12px 16px !important;
flex: 0 0 auto !important;
padding-bottom: 10px !important;
border-bottom: 1px solid rgba(232, 165, 133, 0.15) !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeader__left {
min-width: 0 !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeader__lab {
font-family: var(--laouts-font-mono) !important;
font-size: 11px !important;
letter-spacing: 0.04em !important;
text-transform: none !important;
color: var(--laouts-bone-soft) !important;
margin-bottom: 4px !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeader__kickerUp {
text-transform: uppercase !important;
letter-spacing: 0.14em !important;
font-size: 9px !important;
color: var(--laouts-bone-mute) !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeader__kickerAccent {
color: var(--laouts-coral) !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeader__title {
font-family: var(--laouts-font-sans) !important;
font-size: 22px !important;
font-weight: 600 !important;
color: var(--laouts-bone) !important;
margin: 0 !important;
line-height: 1.2 !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeader__title em {
font-style: italic !important;
color: var(--laouts-coral) !important;
}
/* CHRISTINA 2026-05-08 · header__center removed entirely · SPREAD
DETAIL / REORDER mode toggle was redundant. Defensive
`display:none` so any stale-DOM instance from cached prior
versions stays invisible. */
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeader__center {
display: none !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeader__right {
display: flex !important;
gap: 8px !important;
justify-content: flex-end !important;
flex-wrap: wrap !important;
}
/* CHRISTINA 2026-05-08 · .laoutsOrganizeModeBtn (SPREAD DETAIL /
REORDER) styles removed entirely · the toggle was redundant.
Defensive `display:none` so any stale-DOM instance from cached
prior versions stays invisible. */
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeModeBtn {
display: none !important;
}
/* CHRISTINA 2026-05-06 · Pre-existing orphaned property block — selector
was missing, leaving a stray `}` that broke the brace count.
Re-adding the canonical selector for the Organize-book header buttons. */
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeaderBtn {
font-size: 12px !important;
padding: 8px 14px !important;
border-radius: 999px !important;
border: 1px solid var(--laouts-hairline-2) !important;
background: transparent !important;
color: var(--laouts-bone-soft) !important;
cursor: pointer !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeaderBtn--primary {
background: var(--laouts-coral) !important;
border-color: var(--laouts-coral) !important;
color: #1a0d14 !important;
font-weight: 600 !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeaderBtn--coralGhost {
border-color: rgba(232, 165, 133, 0.45) !important;
color: var(--laouts-coral) !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeTools {
display: flex !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
align-items: center !important;
gap: 12px !important;
padding: 10px 0 8px !important;
flex: 0 0 auto !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeTools__group {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 8px !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeTools__stat {
font-size: 12px !important;
color: var(--laouts-bone-soft) !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeTools__stat b {
color: var(--laouts-bone) !important;
}
/* CHRISTINA 2026-05-08 · density chips removed entirely · grid is
locked at 2-up so spread thumbs are as LARGE as possible.
Defensive `display:none` so any stale-DOM instance from cached
prior versions stays invisible. */
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeDensityChip,
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeDensityChip--on {
display: none !important;
}
/* CHRISTINA 2026-05-08 · "Back to editor" exit pill · top-left of the
modal next to the eyebrow row. Compact, low-emphasis link
register so it reads as exit, not commit. */
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeader__labRow {
display: flex !important;
align-items: center !important;
gap: 14px !important;
flex-wrap: wrap !important;
margin-bottom: 4px !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeExitLink {
font-family: var(--laouts-font-mono) !important;
font-size: 10px !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
padding: 5px 10px !important;
border-radius: 999px !important;
border: 1px solid var(--laouts-hairline-2) !important;
background: transparent !important;
color: var(--laouts-bone-soft) !important;
cursor: pointer !important;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeExitLink:hover,
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeExitLink:focus {
border-color: var(--laouts-coral) !important;
color: var(--laouts-coral) !important;
background: rgba(232, 165, 133, 0.08) !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeGrid {
display: flex !important;
flex-direction: column !important;
flex: 1 1 0 !important;
min-height: 0 !important;
gap: 10px !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeGrid .cepFocusBookOverview__scroll {
flex: 1 1 0 !important;
min-height: 0 !important;
padding: 0 0 8px !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview #cepFocusOverviewStrip.cepFocusBookOverview__strip,
body.laouts.cep-focus-workspace.cep-focus-book-overview #cepFocusOverviewStrip {
display: grid !important;
flex-direction: unset !important;
flex-wrap: unset !important;
/* CHRISTINA 2026-05-08 · default grid 3-up → 2-up · density chips
are gone, this is the one fixed density. Locking at 2-up makes
spread thumbs as LARGE as possible so users can easily see and
drag spreads. */
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 18px !important;
align-items: start !important;
justify-content: unset !important;
align-content: start !important;
width: 100% !important;
padding: 12px 4px 20px !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview #cepFocusOverviewStrip.laoutsOrganizeDensity--6 {
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview #cepFocusOverviewStrip.laoutsOrganizeDensity--3 {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview #cepFocusOverviewStrip.laoutsOrganizeDensity--2 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .cepFocusBookOverview__strip .focusSpreadGroup.bookStripItem {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
justify-self: center !important;
}
/* CHRISTINA 2026-05-07 · Big dashed "+ Add spread" insert slot
killed. The 3 typed-pills in the top "Add" row already provide
that affordance — Blank / Divider / Cover. Defensive `display:
none` so any stale-DOM instance from cached prior versions is
guaranteed invisible. */
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeInsertSlot,
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeFooter__add {
display: none !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeFooter {
display: flex !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
align-items: center !important;
gap: 12px !important;
padding-top: 12px !important;
margin-top: auto !important;
border-top: 1px solid rgba(232, 165, 133, 0.12) !important;
flex: 0 0 auto !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeFooter__hint {
font-size: 11px !important;
color: var(--laouts-bone-mute) !important;
max-width: 520px !important;
line-height: 1.45 !important;
}
@media (max-width: 920px) {
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeader {
grid-template-columns: 1fr !important;
text-align: center !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeader__left,
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeader__right {
justify-self: stretch !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeader__right {
justify-content: center !important;
}
}
/* =============================================================
⬢ VELVET PLUM · launch surfaces · 2026-05-07
-----------------------------------------------------------
1) Right inspector · warm bone/coral/plum register
2) Organize book · editorial rebuild
The cool-gray remap in laouts-brand-tokens.css
(`body.laouts:has(#imageGalleryDock)`) had pulled the inspector
into matcha territory. We unwind that locally on
#rightInspector + #cepFocusBookOverview by re-asserting the
Velvet Plum tokens. Surgical — no engine logic touched.
============================================================= */
/* ── 1 · INSPECTOR · Velvet Plum reskin ───────────────────────── */
/* Re-assert warm tokens on the inspector itself so every nested
`var(--laouts-bg-1)` / `--laouts-hairline` / `--laouts-bone`
resolves to plum, regardless of the body-level remap. */
body.laouts aside#rightInspector,
body.laouts .sidebar#rightInspector {
--laouts-bg: #1c1119 !important;
--laouts-bg-1: #241420 !important;
--laouts-bg-2: #2a1825 !important;
--laouts-bg-3: #3a2435 !important;
--laouts-bone: #f3e6dc !important;
--laouts-bone-soft: #d8b8b5 !important;
--laouts-mauve: #c9a8a8 !important;
--laouts-muted: #a88a8c !important;
--laouts-hairline: rgba(232, 165, 133, 0.18) !important;
--laouts-hairline-2: rgba(232, 165, 133, 0.28) !important;
/* legacy shim · acid → coral */
--laouts-acid: #e8a585 !important;
--laouts-acid-soft: #f3c8a8 !important;
--laouts-acid-glow: rgba(232, 165, 133, 0.18) !important;
background: transparent !important;
color: var(--laouts-bone) !important;
font-family: var(--laouts-font-sans) !important;
border-left: 1px solid rgba(232, 165, 133, 0.18) !important;
}
/* CHRISTINA 2026-05-07 · Bug 3 fix · The previous linear-gradient
(#241420 → #1c1019) plus inner card hover states was reading as
violet/plum in the Horizon + Zoom regions. Dialing back to a flat
warm-dark surface (#1f1418) — slightly warmer than #241420, no
gradient — keeps the dark warm bone-on-plum read while removing
the overlapping violet bands. Coral hairlines preserved. */
body.laouts aside#rightInspector .card,
body.laouts .sidebar#rightInspector .card {
background: #1f1418 !important;
border: 1px solid rgba(232, 165, 133, 0.18) !important;
border-radius: 14px !important;
padding: 16px !important;
box-shadow: 0 2px 8px rgba(20, 8, 18, 0.25) !important;
}
/* Bug 3 fix · ensure no inner element paints an opposing gradient over
the card surface. Specifically targets the slider/horizon/zoom
wrapper rows that were stacking violet on violet. */
body.laouts aside#rightInspector .card > div,
body.laouts aside#rightInspector .card .row,
body.laouts aside#rightInspector .card .field,
body.laouts .sidebar#rightInspector .card > div,
body.laouts .sidebar#rightInspector .card .row,
body.laouts .sidebar#rightInspector .card .field {
background: transparent !important;
}
/* Section labels (DOCUMENT, VIEW, LAYOUT TOOLS, APPEARANCE,
BLOCKS & TEXT) · JetBrains Mono coral, 11px, .18em tracking */
body.laouts aside#rightInspector .card .title,
body.laouts .sidebar#rightInspector .card .title {
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
font-size: 11px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
font-weight: 500 !important;
color: #e8a585 !important;
margin: 0 0 14px 0 !important;
padding-bottom: 10px !important;
border-bottom: 1px solid rgba(232, 165, 133, 0.10) !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
body.laouts aside#rightInspector .card .title::before,
body.laouts .sidebar#rightInspector .card .title::before {
content: "" !important;
width: 14px !important;
height: 1px !important;
background: #e8a585 !important;
flex: 0 0 auto !important;
}
/* Field labels (BOOK SIZE, PRINT PRODUCT, PAGE BACKGROUND, etc.)
· JetBrains Mono 10px coral, .16em tracking */
body.laouts aside#rightInspector .card .uxLabel,
body.laouts .sidebar#rightInspector .card .uxLabel {
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
font-size: 10px !important;
font-weight: 500 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
color: #e8a585 !important;
margin: 14px 0 8px !important;
opacity: 0.92 !important;
}
body.laouts aside#rightInspector .card .uxLabel:first-child,
body.laouts .sidebar#rightInspector .card .uxLabel:first-child {
margin-top: 0 !important;
}
/* Body copy · Inter 14 bone */
body.laouts aside#rightInspector .card p,
body.laouts aside#rightInspector .card .cardSub,
body.laouts .sidebar#rightInspector .card p,
body.laouts .sidebar#rightInspector .card .cardSub {
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
line-height: 1.55 !important;
color: #d8b8b5 !important;
}
/* Selects · plum recess + bone text + coral focus */
body.laouts aside#rightInspector .card select,
body.laouts aside#rightInspector .card input[type="text"],
body.laouts aside#rightInspector .card input[type="number"],
body.laouts .sidebar#rightInspector .card select,
body.laouts .sidebar#rightInspector .card input[type="text"],
body.laouts .sidebar#rightInspector .card input[type="number"] {
width: 100% !important;
height: 38px !important;
padding: 0 12px !important;
background: #1c1119 !important;
border: 1px solid rgba(232, 165, 133, 0.18) !important;
border-radius: 8px !important;
color: #f3e6dc !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
transition: border-color 0.15s ease !important;
}
body.laouts aside#rightInspector .card select:focus,
body.laouts aside#rightInspector .card input:focus,
body.laouts .sidebar#rightInspector .card select:focus,
body.laouts .sidebar#rightInspector .card input:focus {
border-color: #e8a585 !important;
outline: none !important;
}
/* Buttons inside inspector cards · JetBrains Mono uppercase 11
· transparent bg · hairline border · coral on hover */
body.laouts aside#rightInspector .card .btn,
body.laouts .sidebar#rightInspector .card .btn {
background: transparent !important;
border: 1px solid rgba(232, 165, 133, 0.22) !important;
border-radius: 8px !important;
color: #f3e6dc !important;
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.10em !important;
text-transform: uppercase !important;
padding: 0 12px !important;
min-height: 36px !important;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease !important;
cursor: pointer !important;
}
body.laouts aside#rightInspector .card .btn:hover:not(:disabled),
body.laouts .sidebar#rightInspector .card .btn:hover:not(:disabled) {
border-color: #e8a585 !important;
color: #e8a585 !important;
background: rgba(232, 165, 133, 0.08) !important;
}
body.laouts aside#rightInspector .card .btn.on,
body.laouts .sidebar#rightInspector .card .btn.on {
border-color: #e8a585 !important;
color: #e8a585 !important;
background: rgba(232, 165, 133, 0.14) !important;
}
body.laouts aside#rightInspector .card .btn:disabled,
body.laouts .sidebar#rightInspector .card .btn:disabled {
opacity: 0.35 !important;
cursor: not-allowed !important;
}
/* Range sliders · coral track + thumb */
body.laouts aside#rightInspector input[type="range"],
body.laouts .sidebar#rightInspector input[type="range"] {
-webkit-appearance: none !important;
appearance: none !important;
width: 100% !important;
height: 4px !important;
background: linear-gradient(
to right,
#e8a585 var(--vp-slider-pct, 50%),
rgba(232, 165, 133, 0.18) var(--vp-slider-pct, 50%)
) !important;
background-color: rgba(232, 165, 133, 0.18) !important;
border-radius: 999px !important;
outline: none !important;
border: none !important;
}
body.laouts aside#rightInspector input[type="range"]::-webkit-slider-thumb,
body.laouts .sidebar#rightInspector input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none !important;
appearance: none !important;
width: 16px !important;
height: 16px !important;
border-radius: 50% !important;
background: #e8a585 !important;
border: 2px solid #1c1119 !important;
cursor: pointer !important;
box-shadow: 0 1px 4px rgba(232, 165, 133, 0.40) !important;
}
body.laouts aside#rightInspector input[type="range"]::-moz-range-thumb,
body.laouts .sidebar#rightInspector input[type="range"]::-moz-range-thumb {
width: 16px !important;
height: 16px !important;
border-radius: 50% !important;
background: #e8a585 !important;
border: 2px solid #1c1119 !important;
cursor: pointer !important;
}
/* Inline value chips beside sliders (gap 4.2 mm, zoom %, etc.) */
body.laouts aside#rightInspector .card span[id$="Val"],
body.laouts aside#rightInspector .card #gapVal,
body.laouts aside#rightInspector .card #cornerVal,
body.laouts aside#rightInspector .card #textSizeVal,
body.laouts .sidebar#rightInspector .card span[id$="Val"] {
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
font-size: 11px !important;
letter-spacing: 0.06em !important;
color: #f3e6dc !important;
font-weight: 500 !important;
}
/* Page-bg color swatch · coral hairline */
body.laouts aside#rightInspector .pageBgRow {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
body.laouts aside#rightInspector .pageBgRow label {
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
color: #d8b8b5 !important;
flex: 1 1 auto !important;
min-width: 80px !important;
}
body.laouts aside#rightInspector input[type="color"].uxColor {
width: 38px !important;
height: 38px !important;
padding: 2px !important;
background: #1c1119 !important;
border: 1px solid rgba(232, 165, 133, 0.28) !important;
border-radius: 8px !important;
cursor: pointer !important;
flex: 0 0 auto !important;
}
/* Inspector zoom row override (DOCUMENT card) */
body.laouts aside#rightInspector .laoutsInspZoomBtn,
body.laouts aside#rightInspector .laoutsInspZoomFit {
border: 1px solid rgba(232, 165, 133, 0.22) !important;
color: #f3e6dc !important;
background: transparent !important;
}
body.laouts aside#rightInspector .laoutsInspZoomBtn:hover,
body.laouts aside#rightInspector .laoutsInspZoomFit:hover {
border-color: #e8a585 !important;
color: #e8a585 !important;
background: rgba(232, 165, 133, 0.10) !important;
}
body.laouts aside#rightInspector .laoutsInspZoomFit {
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
font-size: 11px !important;
letter-spacing: 0.18em !important;
}
body.laouts aside#rightInspector .laoutsInspZoomPct {
color: #f3e6dc !important;
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}
/* Tip / hint copy */
body.laouts aside#rightInspector .tip,
body.laouts aside#rightInspector .hint {
font-family: 'Fraunces', Georgia, serif !important;
font-style: italic !important;
font-size: 12px !important;
line-height: 1.5 !important;
color: #c9a8a8 !important;
}
/* Spread layout preview at bottom · plum recess */
body.laouts aside#rightInspector .spreadLayout__previewBox {
background: #1c1119 !important;
border: 1px solid rgba(232, 165, 133, 0.18) !important;
border-radius: 8px !important;
}
/* Checkbox accent (range/dev toggles) */
body.laouts aside#rightInspector .card input[type="checkbox"] {
accent-color: #e8a585 !important;
}
/* Recipe kicker chip · coral when on */
body.laouts aside#rightInspector .laoutsRecipeKicker {
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
font-size: 9px !important;
letter-spacing: 0.18em !important;
color: rgba(232, 165, 133, 0.55) !important;
border: 1px solid rgba(232, 165, 133, 0.22) !important;
border-radius: 999px !important;
padding: 3px 8px !important;
}
/* ── 2 · ORGANIZE BOOK · editorial rebuild ─────────────────────── */
/* Re-assert warm tokens on the organize surface so the workspace
doesn't inherit the cool-gray engine remap. */
body.laouts.cep-focus-workspace.cep-focus-book-overview #cepFocusBookOverview {
--laouts-bg: #1c1119 !important;
--laouts-bg-1: #241420 !important;
--laouts-bg-2: #2a1825 !important;
--laouts-bg-3: #3a2435 !important;
--laouts-bone: #f3e6dc !important;
--laouts-bone-soft: #d8b8b5 !important;
--laouts-bone-mute: #a88a8c !important;
--laouts-mauve: #c9a8a8 !important;
--laouts-hairline: rgba(232, 165, 133, 0.14) !important;
--laouts-hairline-2: rgba(232, 165, 133, 0.22) !important;
/* CHRISTINA 2026-05-08 · Was a gradient (#241420 → #14080d) which
pushed perception toward VIOLET against the warm engine. Flat
Velvet Plum @ 92% + 12px backdrop blur reads as a true overlay
over the same warm plum the rest of the engine uses. */
background: rgba(28, 17, 25, 0.92) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
}
/* Header · editorial Fraunces, larger, with coral italic accent */
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeShell {
/* CHRISTINA 2026-05-07 · top padding 28px → 8px so the headline
sits ~24-28px below the engine step rail. Was wasting ~60px
of dark Velvet Plum at the top of the page. */
padding: 8px 32px 20px !important;
max-width: 1480px !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeader {
/* CHRISTINA 2026-05-08 · padding-bottom 12 → 8 — subline gone +
headline clamp dropped to 28px max means the masthead block
is much shorter, so the pad below it can shrink too. */
padding-bottom: 8px !important;
border-bottom: 1px solid rgba(232, 165, 133, 0.16) !important;
gap: 10px 24px !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeader__lab {
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
font-size: 10px !important;
letter-spacing: 0.20em !important;
text-transform: uppercase !important;
color: #e8a585 !important;
margin-bottom: 8px !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeader__lab::before {
content: "" !important;
width: 18px !important;
height: 1px !important;
background: #e8a585 !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeader__kickerUp {
color: #e8a585 !important;
font-size: 10px !important;
letter-spacing: 0.20em !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeader__kickerAccent {
color: #f3e6dc !important;
font-weight: 500 !important;
letter-spacing: 0.10em !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeader__title {
font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
font-weight: 300 !important;
/* CHRISTINA 2026-05-08 · clamp upper bound 44px → 28px so the
masthead reclaims ~16px of vertical real estate for the actual
spread thumbs at the bottom of the page. */
font-size: clamp(22px, 3.0vw, 28px) !important;
letter-spacing: -0.018em !important;
line-height: 1.10 !important;
color: #f3e6dc !important;
margin: 0 !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeader__title em {
font-style: italic !important;
color: #e8a585 !important;
font-weight: 400 !important;
}
/* CHRISTINA 2026-05-08 · subline element was deleted in the JS shell
render. Defensive `display:none` on .laoutsOrganizeHeader__sub
so any stale-DOM instance from cached prior versions stays
invisible. */
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeader__sub {
display: none !important;
}
/* CHRISTINA 2026-05-08 · Velvet Plum mode-pill rules removed · the
SPREAD DETAIL / REORDER toggle is gone. Defensive `display:none`
so any stale-DOM instance from cached prior versions stays
invisible. */
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeModeBtn,
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeModeBtn--toStage,
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeModeBtn--fake,
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeader__center {
display: none !important;
}
/* Header buttons · primary Done = coral, ghost = hairline */
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeaderBtn {
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
font-size: 10px !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
padding: 10px 18px !important;
border-radius: 999px !important;
border: 1px solid rgba(232, 165, 133, 0.22) !important;
background: transparent !important;
color: #f3e6dc !important;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeaderBtn:hover {
border-color: #e8a585 !important;
color: #e8a585 !important;
background: rgba(232, 165, 133, 0.08) !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeaderBtn--primary {
background: #e8a585 !important;
border-color: #e8a585 !important;
color: #1c1119 !important;
font-weight: 600 !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeHeaderBtn--primary:hover {
background: #f3c8a8 !important;
border-color: #f3c8a8 !important;
color: #1c1119 !important;
}
/* Bulk actions row · between header and grid */
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeBulk {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 8px !important;
padding: 14px 0 !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeBulk__lab {
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
font-size: 9px !important;
letter-spacing: 0.20em !important;
text-transform: uppercase !important;
color: #e8a585 !important;
margin-right: 8px !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeBulk__btn {
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
font-size: 10px !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
padding: 8px 14px !important;
border-radius: 999px !important;
border: 1px solid rgba(232, 165, 133, 0.22) !important;
background: transparent !important;
color: #f3e6dc !important;
cursor: pointer !important;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeBulk__btn:hover {
border-color: #e8a585 !important;
color: #e8a585 !important;
background: rgba(232, 165, 133, 0.08) !important;
}
/* Tools row · stat copy in serif italic for warmth */
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeTools {
padding: 8px 0 14px !important;
border-bottom: 1px solid rgba(232, 165, 133, 0.10) !important;
margin-bottom: 14px !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeTools__stat {
font-family: 'Fraunces', Georgia, serif !important;
font-style: italic !important;
font-size: 14px !important;
color: #d8b8b5 !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeTools__stat b {
font-style: normal !important;
color: #f3e6dc !important;
font-weight: 500 !important;
}
/* CHRISTINA 2026-05-08 · Velvet Plum density-chip rules removed ·
the 6/4/3/2-up toggle is gone, grid is locked at 2-up. Defensive
`display:none` so any stale-DOM instance from cached prior
versions stays invisible. */
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeDensityChip,
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeDensityChip--on {
display: none !important;
}
/* Spread thumbs · larger, bone hairline, coral selection,
coral drop indicator on either side, hover overlay actions */
body.laouts.cep-focus-workspace.cep-focus-book-overview #cepFocusOverviewStrip {
padding: 18px 4px 28px !important;
gap: 24px !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .cepFocusBookOverview__strip .focusSpreadGroup.bookStripItem,
body.laouts.cep-focus-workspace.cep-focus-book-overview .cepFocusBookOverview__strip .bookStripItem {
position: relative !important;
background: linear-gradient(165deg, #241420 0%, #1c1019 100%) !important;
border: 1px solid rgba(232, 165, 133, 0.18) !important;
border-radius: 14px !important;
/* CHRISTINA 2026-05-08 · card padding 14px → 8px so the spread
thumbnail inside occupies more of the card surface. Hover
lift + active glow + drop indicator unchanged. */
padding: 8px !important;
transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .cepFocusBookOverview__strip .bookStripItem:hover {
border-color: rgba(232, 165, 133, 0.40) !important;
transform: translateY(-2px) !important;
box-shadow: 0 12px 28px rgba(20, 8, 18, 0.45) !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .cepFocusBookOverview__strip .bookStripItem--active {
border-color: #e8a585 !important;
box-shadow: 0 0 0 1px #e8a585, 0 16px 32px rgba(232, 165, 133, 0.18) !important;
}
body.laouts.cep-focus-workspace.cep-focus-book-overview .cepFocusBookOverview__strip .bookStripItem--drag {
opacity: 0.50 !important;
transform: scale(0.96) !important;
}
/* Coral drop indicator — left side of the over-target */
body.laouts.cep-focus-workspace.cep-focus-book-overview .cepFocusBookOverview__strip .bookStripItem--over::before {
content: "" !important;
position: absolute !important;
top: 4px !important;
bottom: 4px !important;
left: -13px !important;
width: 2px !important;
background: #e8a585 !important;
border-radius: 999px !important;
box-shadow: 0 0 12px rgba(232, 165, 133, 0.55) !important;
}
/* Spread number badge */
body.laouts.cep-focus-workspace.cep-focus-book-overview .cepFocusBookOverview__strip .bookStripItem .bookStripIndex,
body.laouts.cep-focus-workspace.cep-focus-book-overview .cepFocusBookOverview__strip .bookStripItem [data-strip-index] {
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
font-size: 11px !important;
letter-spacing: 0.14em !important;
color: #e8a585 !important;
font-weight: 500 !important;
}
/* CHRISTINA 2026-05-07 · Velvet-Plum dashed insert-slot rules
removed. See earlier `.laoutsOrganizeInsertSlot { display: none }`
override above — the 3 top "Add" pills are the single source of
spread-add affordance now. */
/* CHRISTINA 2026-05-08 · footer + footer__hint deleted entirely.
The tip line was a redundant restatement of the tools-row hint
"Drag spreads to reorder · right-click for more". Defensive
`display:none` so any stale-DOM instance from cached prior
versions stays invisible and reclaims its ~50px of vertical
real estate for spread thumbs. */
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeFooter,
body.laouts.cep-focus-workspace.cep-focus-book-overview .laoutsOrganizeFooter__hint {
display: none !important;
}
/* =============================================================
CHRISTINA 2026-05-07 · Bug 5 fix · graceful responsive
breakpoints. Real mobile-first redesign is post-launch — this
keeps the engine usable on tablets/laptops/phones for now.
>1280 · full 3-column (library / canvas / inspector)
900-1280 · library + canvas only · inspector becomes drawer
<900 · stacks vertically · banner asks for wider screen
The earlier `(max-width: 1080px) → 1fr` rule has been
superseded by the 900-1280 / <900 split below.
============================================================= */
/* Tablet / small laptop · 900-1280px · hide inspector by default,
give it a slide-in drawer treatment so library + canvas can
actually breathe.
CHRISTINA 2026-05-07 · launch-day fix · upstream `(max-width:1280px)`
rule (line ~2222) STILL declared a 3-column grid with a 300-320px
inspector track even after the inspector was lifted out into a
fixed-position drawer below. That left an empty third column
reserving real estate, which squeezed the canvas column and
clipped the spread on the left. We now force a true 2-track grid
AT THIS BREAKPOINT, AND give .stage / .spreadCanvasStack
overflow:visible + min-width:0 so the canvas content is never
clipped by a too-narrow track. */
@media (max-width: 1279px) and (min-width: 900px) {
html body.laouts .appMain,
html body.laouts.lib-panel-collapsed .appMain {
grid-template-columns: minmax(320px, 380px) minmax(0, 1fr) !important;
grid-template-areas: none !important;
}
/* Center column / canvas zone · breathe + don't clip the spread */
html body.laouts .centerColumn,
html body.laouts .stage,
html body.laouts .spreadCanvasStack,
html body.laouts .spreadStageView,
html body.laouts #wrap,
html body.laouts .canvasShell {
min-width: 0 !important;
overflow: visible !important;
}
/* Library column · keep within its own track, never bleed right */
html body.laouts .libDock,
html body.laouts #libDock,
html body.laouts .libraryColumn {
max-width: 380px !important;
overflow: hidden !important;
z-index: 1 !important;
}
body.laouts aside#rightInspector,
body.laouts .sidebar#rightInspector {
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 320px !important;
max-width: 90vw !important;
z-index: 60 !important;
transform: translateX(100%) !important;
transition: transform 0.24s ease !important;
box-shadow: -8px 0 32px rgba(0, 0, 0, 0.45) !important;
}
body.laouts.inspector-open aside#rightInspector,
body.laouts.inspector-open .sidebar#rightInspector {
transform: translateX(0) !important;
}
/* Inspector toggle pill (created lazily by Bug 5 shim if absent) */
.laoutsInspectorToggle {
position: fixed !important;
top: 14px !important;
right: 14px !important;
z-index: 70 !important;
background: #1f1418 !important;
color: #e8a585 !important;
border: 1px solid rgba(232, 165, 133, 0.35) !important;
border-radius: 999px !important;
padding: 8px 14px !important;
font: 500 11px/1 'JetBrains Mono', ui-monospace, monospace !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
cursor: pointer !important;
}
}
/* Phone · <900px · stack vertically + banner. */
@media (max-width: 899px) {
body.laouts .appMain {
display: flex !important;
flex-direction: column !important;
grid-template-columns: 1fr !important;
}
body.laouts .libDock {
width: 100% !important;
max-height: 40vh !important;
border-right: none !important;
border-bottom: 1px solid rgba(232, 165, 133, 0.18) !important;
}
body.laouts .centerColumn,
body.laouts .stage {
width: 100% !important;
}
body.laouts aside#rightInspector,
body.laouts .sidebar#rightInspector {
position: fixed !important;
inset: auto 0 0 0 !important;
width: 100% !important;
max-height: 65vh !important;
z-index: 60 !important;
transform: translateY(100%) !important;
transition: transform 0.24s ease !important;
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.55) !important;
}
body.laouts.inspector-open aside#rightInspector,
body.laouts.inspector-open .sidebar#rightInspector {
transform: translateY(0) !important;
}
.laoutsInspectorToggle {
position: fixed !important;
bottom: 14px !important;
right: 14px !important;
top: auto !important;
z-index: 70 !important;
}
/* Wider-screen advisory banner */
.laoutsResponsiveBanner {
display: flex !important;
position: sticky !important;
top: 0 !important;
z-index: 50 !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
padding: 10px 14px !important;
background: #1f1418 !important;
color: #f3e6dc !important;
border-bottom: 1px solid rgba(232, 165, 133, 0.22) !important;
font: 500 12px/1.4 'Inter', sans-serif !important;
}
.laoutsResponsiveBanner__close {
background: transparent !important;
border: 1px solid rgba(232, 165, 133, 0.35) !important;
color: #e8a585 !important;
border-radius: 999px !important;
padding: 4px 10px !important;
font: 500 10px/1 'JetBrains Mono', ui-monospace, monospace !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
cursor: pointer !important;
}
}
/* >=900px · banner is hidden, inspector is part of the grid */
@media (min-width: 900px) {
.laoutsResponsiveBanner { display: none !important; }
}
/* >=1280px · revert to original 3-column. Reset the drawer
transforms in case the user resized from narrower → wider. */
@media (min-width: 1280px) {
body.laouts aside#rightInspector,
body.laouts .sidebar#rightInspector {
position: static !important;
transform: none !important;
box-shadow: none !important;
width: auto !important;
max-width: none !important;
}
.laoutsInspectorToggle { display: none !important; }
}