/* ============================================================================ LAOUTS · MOBILE SHELL · 20260524 ---------------------------------------------------------------------------- ONE dedicated, intentional mobile design layer for the post-funnel engine (library · cull/curate · book preview · order/share). It reuses the engine's existing elements, logic, canvas, and theme tokens — it only owns how things LOOK and are spaced on a phone, bringing the funnel's big, airy, readable type system (Fraunces serif headlines · JetBrains Mono eyebrows · Inter body) into the editor so the whole experience reads as ONE premium design. SAFETY: every rule is wrapped in `@media (max-width: 620px)`. The desktop editor never matches these selectors and is byte-for-byte unaffected. This file is loaded LAST so it wins the cascade over the theme + the legacy per-screen overrides; over time those overrides fold into here. Tokens used (already defined by the active theme — no new fonts needed): --laouts-font-serif → Fraunces (matches the funnel headlines) --laouts-font-mono → JetBrains Mono (eyebrow labels) --laouts-coral / --laouts-bone / --laouts-bone-soft / --laouts-bg ========================================================================== */ @media (max-width: 620px) { /* ---- Mobile type scale (the funnel's voice) ---------------------------- */ /* Reusable helpers; applied to engine classes in the sections below. */ body.laouts .msEyebrow, body.laouts .laoutsLibMast__eyebrow, body.laouts .laoutsCategoryReview__lab, body.laouts .laoutsCullPrompt__lab { font-family: var(--laouts-font-mono, "JetBrains Mono", monospace) !important; font-size: 11px !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: var(--laouts-coral, #e8a585) !important; } /* ====================================================================== LIBRARY · "your library / keepers" masthead + stat cards The densest, smallest-type surface — give it the funnel's air. ====================================================================== */ body.laouts .laoutsLibMast { padding: 20px 18px 16px !important; gap: 14px !important; } body.laouts .laoutsLibMast__eyebrow { margin-bottom: 8px !important; } body.laouts .laoutsLibMast__title { font-family: var(--laouts-font-serif, "Fraunces", Georgia, serif) !important; font-size: 28px !important; line-height: 1.08 !important; letter-spacing: -0.01em !important; } body.laouts .laoutsLibMast__num { font-family: var(--laouts-font-serif, "Fraunces", Georgia, serif) !important; font-size: 30px !important; } body.laouts .laoutsLibMast__lab { font-size: 15px !important; } /* Stat cards (KEEP / DUPS / BLUR / EYES) — calmer, roomier, readable */ body.laouts .laoutsLibMast__breakdown { gap: 8px !important; } body.laouts .laoutsLibMast__statCard { padding: 14px 6px !important; min-height: 64px !important; border-radius: 14px !important; } body.laouts .laoutsLibMast__statNum { font-family: var(--laouts-font-serif, "Fraunces", Georgia, serif) !important; font-size: 22px !important; } body.laouts .laoutsLibMast__statLab { font-size: 10px !important; letter-spacing: 0.12em !important; } /* Drop affordance (pre-build only; hidden once photos exist) */ body.laouts .laoutsLibDrop__title { font-family: var(--laouts-font-serif, "Fraunces", Georgia, serif) !important; font-size: 18px !important; } /* Sort chips — a touch more tappable, calmer type */ body.laouts .laoutsLibSort__chip { font-size: 11px !important; letter-spacing: 0.08em !important; } /* ====================================================================== CULL REVIEW · header + tabs (the photos stay the hero; chrome calms) ====================================================================== */ body.laouts .laoutsCategoryReview__title { font-family: var(--laouts-font-serif, "Fraunces", Georgia, serif) !important; font-size: 24px !important; line-height: 1.08 !important; } body.laouts .laoutsCategoryReview__sub { display: none !important; /* the title already says it; reclaim the space */ } body.laouts .laoutsCategoryReview__tab { font-size: 13px !important; } body.laouts .laoutsCategoryReview__footHint { font-family: var(--laouts-font-sans, "Inter", sans-serif) !important; font-size: 13px !important; text-transform: none !important; letter-spacing: 0 !important; } /* ====================================================================== CURATE-COMPLETE PICKER · "What's next?" choices Already big; just lock it to the shared type voice + generous spacing. ====================================================================== */ body.laouts .laoutsCullPrompt__title { font-family: var(--laouts-font-serif, "Fraunces", Georgia, serif) !important; font-size: 30px !important; line-height: 1.12 !important; } body.laouts .laoutsCullPrompt__choice { padding: 18px 18px !important; border-radius: 16px !important; } body.laouts .laoutsCullPrompt__choiceTitle { font-family: var(--laouts-font-serif, "Fraunces", Georgia, serif) !important; font-size: 20px !important; line-height: 1.12 !important; } body.laouts .laoutsCullPrompt__choiceSub { font-size: 14px !important; line-height: 1.5 !important; } /* ====================================================================== BOOK PREVIEW · big, clear flip controls + spread label (the book canvas itself is laid out by the engine + Phase-1 fit rules) ====================================================================== */ body.laouts #bookSpreadLabel, body.laouts .spreadRail__label { font-family: var(--laouts-font-mono, "JetBrains Mono", monospace) !important; font-size: 15px !important; letter-spacing: 0.04em !important; } /* ====================================================================== ORDER / SHARE DOCK · the persistent bottom action bar ====================================================================== */ body.laouts .laoutsFloatDock__btn { font-family: var(--laouts-font-sans, "Inter", sans-serif) !important; font-size: 15px !important; font-weight: 600 !important; padding: 11px 20px 11px 16px !important; } /* ====================================================================== BOOK PREVIEW · strip the editing chrome (auto-first = preview, not edit) The engine stacks a lot of editor controls above the book — Themes, Cover, Hide, Bigger, +Page, Copy, Organize, ⋯, the thumbnail strip, and the layout switcher. On a phone that buries the book and mostly doesn't work on touch (editing lives on desktop). Hide it so the preview is simply: the book + the ‹ flip › nav, with Order/Share in the bottom dock. ====================================================================== */ body.laouts .spreadRail__actions { display: none !important; } body.laouts .spreadRail__stripWrap { display: none !important; } body.laouts .laoutsStageBar { display: none !important; } /* Flip nav becomes a clean, centered cluster with air around the book */ body.laouts .spreadRail { padding: 4px 12px 2px !important; border: none !important; background: transparent !important; box-shadow: none !important; margin: 0 !important; } body.laouts .spreadRail__header { justify-content: center !important; } body.laouts .spreadRail__nav { display: flex !important; align-items: center !important; justify-content: center !important; gap: 16px !important; width: 100% !important; } /* ====================================================================== GLOBAL touch comfort · Apple HIG-friendly tap targets in the shell ====================================================================== */ body.laouts .laoutsLibSort__chip, body.laouts .laoutsCategoryReview__tab { min-height: 40px !important; display: inline-flex !important; align-items: center !important; } /* ====================================================================== MOBILE EDITOR · spec build (dark + coral) · injected by laouts-mobile-editor.js, wired to live engine actions ====================================================================== */ body.laouts .laoutsMobCullCard { display: flex; align-items: center; gap: 12px; margin: 10px 14px 6px; padding: 13px 14px; background: rgba(232,165,133,0.06); border: 1px solid rgba(232,165,133,0.18); border-radius: 16px; } body.laouts .laoutsMobCullCard__ic { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(125,170,110,0.16); color: #8fce86; font-size: 15px; } body.laouts .laoutsMobCullCard__txt { flex: 1; min-width: 0; } body.laouts .laoutsMobCullCard__h { font-family: var(--laouts-font-sans, "Inter", sans-serif); font-size: 14px; font-weight: 600; color: var(--laouts-bone, #f3e6dc); } body.laouts .laoutsMobCullCard__m { font-size: 12px; color: var(--laouts-bone-soft, rgba(243,230,220,0.65)); margin-top: 1px; } body.laouts .laoutsMobCullCard__m strong { color: var(--laouts-coral, #e8a585); font-weight: 600; } body.laouts .laoutsMobCullCard__btn { flex: 0 0 auto; font-family: var(--laouts-font-sans, "Inter", sans-serif); font-size: 12px; color: var(--laouts-coral, #e8a585); background: transparent; border: 1px solid rgba(232,165,133,0.35); border-radius: 999px; padding: 7px 12px; cursor: pointer; } /* ===== SCREEN 15 · declutter the live editor to the spec ===== */ /* Hide what the spec's spread editor doesn't show: the inline library, the keeper-stats block, the drop zone, the cluttered spread-arrow row, and the old float dock (its actions are reused via the new CTAs + bottom nav). */ body.laouts.laouts--has-built #libDock, body.laouts.laouts--has-built .laoutsLibMast, body.laouts.laouts--has-built .laoutsLibDrop, body.laouts.laouts--has-built .laoutsSpreadArrows, body.laouts.laouts--has-built .laoutsFloatDock { display: none !important; } /* V5 cleanup · 2026-05-26 · the 104px clearance reserved space for the dead #laoutsMobEdNav sticky bottom bar (V3/V4-era — removed). The layout stepper is inline and the contextual sheet is an overlay, so nothing in flow needs bottom clearance — only the home-bar inset. */ body.laouts.laouts--has-built .centerColumn { padding-bottom: env(safe-area-inset-bottom, 0px) !important; } /* SCROLL FIX · the editor app shell clamps to the viewport (body overflow:hidden + .app/.appMain locked to 100dvh), which clipped the taller spec content so nothing scrolled. On phones (post-build), let the content flow and the page scroll naturally. The fixed topbar stays put (position:fixed); no sticky bottom nav lives below the book anymore. */ html body.laouts.laouts--has-built { overflow-y: auto !important; height: auto !important; } html body.laouts.laouts--has-built .app, html body.laouts.laouts--has-built .appMain { height: auto !important; min-height: 100dvh !important; max-height: none !important; overflow: visible !important; -webkit-overflow-scrolling: touch !important; } /* ===== SCREEN 15 · injected spec sections (laouts-mobile-editor.js) ===== */ body.laouts .lme-sec { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 9px; } body.laouts .lme-sec__t { font-family: var(--laouts-font-mono, monospace); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--laouts-bone-soft, #c9b7ad); } body.laouts .lme-sec__a { font-size: 11px; color: var(--laouts-coral, #e8a585); text-decoration: underline; } body.laouts .lme-lvrow { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 6px; -webkit-overflow-scrolling: touch; } body.laouts .lme-lv { flex: 0 0 auto; width: 108px; height: 74px; border-radius: 12px; border: 1px solid rgba(232,165,133,0.18); background: #1a1411; overflow: hidden; position: relative; display: flex; padding: 0; cursor: pointer; } body.laouts .lme-lv--on { border: 2px solid var(--laouts-coral, #e8a585); } body.laouts .lme-lv__a { flex: 1; background: rgba(232,165,133,0.14); margin: 8px 3px 8px 8px; border-radius: 3px; } body.laouts .lme-lv__b { flex: 1; background: rgba(243,230,220,0.08); margin: 8px 8px 8px 3px; border-radius: 3px; } body.laouts .lme-lv__chk { position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--laouts-coral, #e8a585); color: #15100e; font-size: 11px; display: flex; align-items: center; justify-content: center; } body.laouts .lme-qe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; padding: 0 16px 6px; } body.laouts .lme-qe__b { background: rgba(232,165,133,0.06); border: 1px solid rgba(232,165,133,0.18); border-radius: 14px; padding: 13px 4px; font-size: 11px; color: var(--laouts-bone, #f3e6dc); display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; } body.laouts .lme-qe__i { font-size: 18px; color: var(--laouts-coral, #e8a585); } body.laouts .lme-cp { display: flex; gap: 11px; align-items: center; margin: 14px 16px 6px; padding: 14px; width: calc(100% - 32px); background: rgba(232,165,133,0.06); border: 1px solid rgba(232,165,133,0.2); border-radius: 18px; text-align: left; cursor: pointer; } body.laouts .lme-cp__i { width: 34px; height: 34px; border-radius: 50%; background: rgba(232,165,133,0.14); color: var(--laouts-coral, #e8a585); display: flex; align-items: center; justify-content: center; font-size: 16px; flex: 0 0 auto; } body.laouts .lme-cp__tx { flex: 1; min-width: 0; } body.laouts .lme-cp__h { display: block; font-size: 14px; font-weight: 600; color: var(--laouts-bone, #f3e6dc); } body.laouts .lme-cp__m { display: block; font-size: 11px; color: var(--laouts-bone-soft, #c9b7ad); margin-top: 1px; } body.laouts .lme-cp__btn { background: var(--laouts-coral, #e8a585); color: #15100e; font-weight: 600; font-size: 11px; padding: 8px 12px; border-radius: 999px; white-space: nowrap; flex: 0 0 auto; } body.laouts .lme-ovrow { display: flex; gap: 9px; overflow-x: auto; padding: 0 16px 8px; -webkit-overflow-scrolling: touch; } body.laouts .lme-ov { flex: 0 0 auto; background: none; border: none; padding: 0; cursor: pointer; text-align: center; } body.laouts .lme-ov__pg { display: block; width: 64px; height: 46px; border-radius: 7px; border: 1px solid rgba(232,165,133,0.18); background: rgba(243,230,220,0.06); } body.laouts .lme-ov--on .lme-ov__pg { border: 2px solid var(--laouts-coral, #e8a585); } body.laouts .lme-ov__lb { display: block; font-size: 10px; color: var(--laouts-bone-soft, #c9b7ad); margin-top: 4px; } body.laouts .lme-ov--on .lme-ov__lb { color: var(--laouts-coral, #e8a585); } body.laouts .lme-cta { display: flex; gap: 10px; padding: 6px 16px 16px; } body.laouts .lme-cta__pdf { flex: 0 0 auto; border: 1px solid rgba(232,165,133,0.3); border-radius: 16px; padding: 13px 16px; font-size: 13px; color: var(--laouts-bone, #f3e6dc); background: transparent; cursor: pointer; } body.laouts .lme-cta__print { flex: 1; background: var(--laouts-coral, #e8a585); color: #15100e; font-weight: 700; border: none; border-radius: 16px; padding: 13px; font-size: 14px; cursor: pointer; } /* removed: #laoutsMobEdNav · V5 cleanup 2026-05-26 · see CURSOR_HANDOFF §2.5 */ /* Suppress the on-canvas comment-pin overlay on mobile (the stray coral "dot" anchored over the book). Comments live in the share/review surface, not on the editing canvas. Desktop keeps its pins — phone-gated only. */ body.laouts .laoutsCommentOverlay, body.laouts .laoutsCommentPin { display: none !important; } /* Smart-layout wireframe previews */ body.laouts .lme-lv { padding: 0; } body.laouts .lme-wf { width: 100%; height: 100%; display: block; background: #15100e; } body.laouts .lme-wf__ph { fill: rgba(232,165,133,0.30); stroke: rgba(232,165,133,0.55); stroke-width: 0.8; } body.laouts .lme-wf__tx { fill: rgba(243,230,220,0.10); stroke: rgba(243,230,220,0.22); stroke-width: 0.6; } body.laouts .lme-wf__seam { stroke: rgba(243,230,220,0.10); stroke-width: 0.6; } body.laouts .lme-lv--on .lme-wf { background: rgba(232,165,133,0.08); } body.laouts .lme-lv--on .lme-wf__ph { fill: rgba(232,165,133,0.48); stroke: var(--laouts-coral, #e8a585); } body.laouts .lme-lv__n { position: absolute; left: 6px; bottom: 5px; font-family: var(--laouts-font-mono, monospace); font-size: 10px; color: var(--laouts-bone-soft, #c9b7ad); background: rgba(11,8,9,0.6); padding: 1px 5px; border-radius: 6px; } body.laouts .lme-lv--on .lme-lv__n { color: var(--laouts-coral, #e8a585); } body.laouts .lme-lvhint { padding: 0 16px 10px; font-size: 11px; color: var(--laouts-dim, #8d7b72); } /* ── Turn pages (spread nav) ─────────────────────────────────────── */ body.laouts .lme-spreadnav { display: flex; align-items: center; gap: 12px; padding: 14px 16px 4px; } body.laouts .lme-snav__btn { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--laouts-coral, #e8a585); background: rgba(33,23,21,0.95); color: var(--laouts-coral, #e8a585); font-size: 30px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 26px rgba(0,0,0,0.4); } body.laouts .lme-snav__btn:active { transform: scale(0.94); } body.laouts .lme-snav__mid { flex: 1; text-align: center; min-width: 0; } body.laouts .lme-snav__k { display: block; font-family: var(--laouts-font-mono, monospace); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--laouts-coral, #e8a585); } body.laouts .lme-snav__k b { color: var(--laouts-bone, #f3e6dc); } body.laouts .lme-snav__h { display: block; font-size: 12px; color: var(--laouts-bone-soft, #c9b7ad); margin-top: 3px; } /* ── HERO · layout calculator card ───────────────────────────────── */ body.laouts .lme-calc { margin: 12px 16px 8px; padding: 16px; border: 1px solid rgba(232,165,133,0.2); border-radius: 26px; background: rgba(255,255,255,0.045); box-shadow: 0 18px 50px rgba(0,0,0,0.32); } body.laouts .lme-calc__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } body.laouts .lme-calc__h { font-family: var(--laouts-font-serif, serif); font-size: 24px; line-height: 1; color: var(--laouts-bone, #f3e6dc); } body.laouts .lme-calc__m { font-size: 13px; line-height: 1.4; color: var(--laouts-bone-soft, #c9b7ad); margin-top: 6px; } body.laouts .lme-calc__count { flex: 0 0 auto; border: 1px solid rgba(232,165,133,0.3); border-radius: 999px; padding: 7px 12px; font-family: var(--laouts-font-mono, monospace); font-size: 12px; color: var(--laouts-coral, #e8a585); white-space: nowrap; } body.laouts .lme-calc__count b { color: var(--laouts-bone, #f3e6dc); } body.laouts .lme-calc__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; } body.laouts .lme-calc__prev { height: 54px; border-radius: 17px; border: 1px solid rgba(232,165,133,0.3); background: #211715; color: var(--laouts-bone, #f3e6dc); font-size: 15px; font-weight: 600; cursor: pointer; } body.laouts .lme-calc__next { height: 54px; border-radius: 17px; border: none; background: var(--laouts-coral, #e8a585); color: #15100e; font-size: 15px; font-weight: 700; cursor: pointer; } body.laouts .lme-calc__prev:active, body.laouts .lme-calc__next:active { transform: scale(0.98); } body.laouts .lme-calc__all { width: 100%; height: 46px; margin-top: 11px; border-radius: 15px; border: 1px solid rgba(232,165,133,0.22); background: transparent; color: var(--laouts-coral, #e8a585); font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; } body.laouts .lme-calc .lme-lvrow { display: none; } body.laouts .lme-calc .lme-lvrow.lme-lvrow--open { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; overflow: visible; padding: 12px 0 2px; } body.laouts .lme-lvrow--open .lme-lv { width: auto; height: 64px; } /* ── Why it's smart ──────────────────────────────────────────────── */ body.laouts .lme-why { display: flex; gap: 12px; align-items: flex-start; margin: 8px 16px; padding: 14px; border-radius: 20px; border: 1px solid rgba(232,165,133,0.18); background: linear-gradient(160deg, #211715, #120E0D); } body.laouts .lme-why__i { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: rgba(232,165,133,0.15); color: var(--laouts-coral, #e8a585); display: flex; align-items: center; justify-content: center; font-size: 18px; } body.laouts .lme-why__h { font-size: 16px; font-weight: 600; color: var(--laouts-bone, #f3e6dc); } body.laouts .lme-why__m { font-size: 13px; line-height: 1.45; color: var(--laouts-bone-soft, #c9b7ad); margin-top: 3px; } /* removed: #laoutsMobEdNav .lme-nav__primary · V5 cleanup 2026-05-26 · see CURSOR_HANDOFF §2.5 */ /* removed: .lme-modetabs / .lme-mt · V5 cleanup 2026-05-26 · see CURSOR_HANDOFF §2.5 */ /* ── Photos / Text panels ────────────────────────────────────────── */ body.laouts .lme-pnl { margin: 8px 16px; padding: 16px; border: 1px solid rgba(232,165,133,0.2); border-radius: 24px; background: rgba(255,255,255,0.045); box-shadow: 0 18px 50px rgba(0,0,0,0.3); } body.laouts .lme-pnl__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } body.laouts .lme-pnl__h { font-family: var(--laouts-font-serif, serif); font-size: 23px; line-height: 1; color: var(--laouts-bone, #f3e6dc); } body.laouts .lme-pnl__c { flex: 0 0 auto; border: 1px solid rgba(232,165,133,0.3); border-radius: 999px; padding: 6px 11px; font-family: var(--laouts-font-mono, monospace); font-size: 12px; color: var(--laouts-coral, #e8a585); white-space: nowrap; } body.laouts .lme-pnl__m { font-size: 13px; line-height: 1.4; color: var(--laouts-bone-soft, #c9b7ad); margin-top: 12px; } body.laouts .lme-pnl__note { font-size: 11px; color: var(--laouts-dim, #8d7b72); margin-top: 10px; } body.laouts .lme-tools { display: grid; gap: 9px; margin-top: 10px; } body.laouts .lme-tools--3 { grid-template-columns: repeat(3, 1fr); } body.laouts .lme-tools--2 { grid-template-columns: repeat(2, 1fr); } body.laouts .lme-tool { height: 66px; border: 1px solid rgba(232,165,133,0.18); border-radius: 17px; background: rgba(0,0,0,0.15); color: var(--laouts-bone, #f3e6dc); font-size: 12px; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; } body.laouts .lme-tool__i { font-size: 18px; color: var(--laouts-coral, #e8a585); } body.laouts .lme-tool:active { transform: scale(0.97); } body.laouts .lme-pstrip { display: flex; gap: 9px; overflow-x: auto; margin-top: 8px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } body.laouts .lme-pstrip__t { flex: 0 0 auto; width: 62px; height: 62px; padding: 0; border: 1px solid rgba(232,165,133,0.2); border-radius: 14px; overflow: hidden; background: #15100e; cursor: pointer; } body.laouts .lme-pstrip__t img { width: 100%; height: 100%; object-fit: cover; display: block; } body.laouts .lme-pstrip__t:active { border-color: var(--laouts-coral, #e8a585); } /* ── Hint toast ──────────────────────────────────────────────────── */ body.laouts #laoutsMobToast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(8px); z-index: 9300; max-width: calc(100vw - 48px); padding: 11px 18px; border-radius: 999px; background: rgba(20,12,12,0.97); border: 1px solid rgba(232,165,133,0.3); color: var(--laouts-bone, #f3e6dc); font-size: 13px; text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.18s; } body.laouts #laoutsMobToast.on { opacity: 1; transform: translateX(-50%) translateY(0); } /* ════════ V4 · tap-to-edit · contextual sheets ════════════════════ */ /* Header strip (above the book): page turn + Undo + Review */ body.laouts #laoutsMobHdr { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 10px 12px; border: 1px solid rgba(232,165,133,0.18); border-radius: 18px; background: rgba(255,255,255,0.035); } body.laouts .lme-hdr__nav { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(232,165,133,0.3); background: rgba(33,23,21,0.9); color: var(--laouts-coral, #e8a585); font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; } body.laouts .lme-hdr__mid { flex: 1; min-width: 0; } body.laouts .lme-hdr__k { font-family: var(--laouts-font-mono, monospace); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--laouts-coral, #e8a585); white-space: nowrap; } body.laouts .lme-hdr__k b { color: var(--laouts-bone, #f3e6dc); } body.laouts .lme-hdr__h { font-size: 12px; color: var(--laouts-bone-soft, #c9b7ad); margin-top: 2px; } body.laouts .lme-hdr__undo { font-size: 20px; } body.laouts .lme-hdr__undo:disabled, body.laouts .lme-hdr__undo[aria-disabled="true"] { opacity: 0.35; pointer-events: none; cursor: default; } body.laouts .lme-hdr__review { flex: 0 0 auto; background: var(--laouts-coral, #e8a585); color: #15100e; font-weight: 700; font-size: 13px; border: none; border-radius: 999px; padding: 9px 16px; cursor: pointer; } /* Width defense · small phones (≤400px): adding Undo tightens the mid label. Shrink the hint 1px AND tighten container packing + Review pill so the hint "Tap anything on the spread to edit it" wraps to 2 lines cleanly rather than 3-4 (375×812 mockup verified, PR 2 2026-05-26). */ @media (max-width: 400px) { body.laouts #laoutsMobHdr { gap: 6px; padding: 10px 8px; } body.laouts .lme-hdr__review { padding: 8px 12px; font-size: 12px; } body.laouts .lme-hdr__h { font-size: 11px; } } /* Layout stepper bar (under the book) */ body.laouts .lme-laybar { display: flex; align-items: center; gap: 12px; margin: 10px 16px 4px; } body.laouts .lme-laybar__arw { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--laouts-coral, #e8a585); background: rgba(33,23,21,0.95); color: var(--laouts-coral, #e8a585); font-size: 28px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 26px rgba(0,0,0,0.4); } body.laouts .lme-laybar__arw:active { transform: scale(0.94); } body.laouts .lme-laybar__mid { flex: 1; text-align: center; min-width: 0; } body.laouts .lme-laybar__k { font-family: var(--laouts-font-mono, monospace); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--laouts-coral, #e8a585); } body.laouts .lme-laybar__k b { color: var(--laouts-bone, #f3e6dc); } body.laouts .lme-laybar__h { font-size: 12px; color: var(--laouts-bone-soft, #c9b7ad); margin-top: 3px; } /* Contextual sheet */ body.laouts .lme-sheet { margin: 10px 16px 8px; padding: 16px; border: 1px solid rgba(232,165,133,0.2); border-radius: 26px; background: rgba(255,255,255,0.045); box-shadow: 0 18px 50px rgba(0,0,0,0.32); } body.laouts .lme-sheet__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } body.laouts .lme-sheet__hd { display: flex; align-items: center; gap: 10px; } body.laouts .lme-sheet__i { width: 34px; height: 34px; border-radius: 50%; background: rgba(232,165,133,0.15); color: var(--laouts-coral, #e8a585); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; } body.laouts .lme-sheet__h { font-family: var(--laouts-font-serif, serif); font-size: 23px; line-height: 1; color: var(--laouts-bone, #f3e6dc); } body.laouts .lme-sheet__badge { flex: 0 0 auto; border: 1px solid rgba(232,165,133,0.3); border-radius: 999px; padding: 6px 11px; font-family: var(--laouts-font-mono, monospace); font-size: 11px; color: var(--laouts-coral, #e8a585); white-space: nowrap; } body.laouts .lme-sheet__badge b { color: var(--laouts-bone, #f3e6dc); } body.laouts .lme-sheet__m { font-size: 13px; line-height: 1.4; color: var(--laouts-bone-soft, #c9b7ad); margin-top: 12px; } body.laouts .lme-sheet__note { font-size: 11px; color: var(--laouts-dim, #8d7b72); } body.laouts .lme-sheet .lme-lvrow { display: none; } body.laouts .lme-sheet .lme-lvrow.lme-lvrow--open { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; overflow: visible; padding: 12px 0 2px; } body.laouts .lme-tools--4 { grid-template-columns: repeat(4, 1fr); } /* Resize row */ body.laouts .lme-resize { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; } body.laouts .lme-resize__h { font-size: 15px; font-weight: 600; color: var(--laouts-bone, #f3e6dc); } body.laouts .lme-resize__m { font-size: 12px; color: var(--laouts-bone-soft, #c9b7ad); margin-top: 2px; } body.laouts .lme-resize__btns { display: flex; gap: 8px; flex: 0 0 auto; } body.laouts .lme-rb { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(232,165,133,0.28); background: rgba(0,0,0,0.2); color: var(--laouts-coral, #e8a585); font-size: 20px; cursor: pointer; } body.laouts .lme-rb:active { transform: scale(0.94); } /* Editable text box (edit here, never on the canvas) */ body.laouts .lme-textedit { display: block; width: 100%; margin-top: 10px; padding: 13px 14px; border: 1px solid rgba(232,165,133,0.28); border-radius: 16px; background: rgba(0,0,0,0.28); color: var(--laouts-bone, #f3e6dc); font-family: var(--laouts-font-serif, serif); font-size: 17px; line-height: 1.4; resize: none; outline: none; -webkit-appearance: none; box-sizing: border-box; } body.laouts .lme-textedit:focus { border-color: var(--laouts-coral, #e8a585); } /* Role selector · §2.6 item 6 slice 1 · sits between the sheet header and the "Edit the words…" description. Native