/* ==========================================================================
   Story Collage — studio (cg-*, cc-*, cp-*) + marketing pages (cl-*).
   Loaded after main.css (tokens: --ink, --surface*, --border, --radius-*, .btn).
   Rules that matter for correctness, not taste:
     - #collage-canvas is NEVER CSS-zoomed or transformed (editor.js measures it).
     - .cc-* geometry comes from editor.js inline px; CSS only gives positioning
       contexts, colours and transitions.
     - Paper #F7F5F0 and ink #2B2B2B are the print values (CONTRACT §11).
     - Mobile (<1024px) tap targets are >= 44px.
   ========================================================================== */

@font-face {
  font-family: 'EB Garamond Collage';
  src: url('/api/v1/collage/fonts/garamond.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter Medium Collage';
  src: url('/api/v1/collage/fonts/inter.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Collage';
  src: url('/api/v1/collage/fonts/cormorant.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Italic Collage';
  src: url('/api/v1/collage/fonts/cormorant_italic.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces Collage';
  src: url('/api/v1/collage/fonts/fraunces.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --cg-paper: #F7F5F0;
  --cg-ink: #2B2B2B;
  --cg-amber: #d9962b;
  --cg-green: #2f8f5b;
  --cg-red: #c0392b;
  --cg-blue: #1976d2;
  --cg-header-h: 64px;
  --cg-steps-h: 48px;
  --cg-font-garamond: 'EB Garamond Collage', 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
  --cg-font-inter: 'Inter Medium Collage', 'Inter', system-ui, sans-serif;
}

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cg-font-garamond { font-family: var(--cg-font-garamond); }
.cg-font-inter { font-family: var(--cg-font-inter); }
.cg-font-cormorant { font-family: 'Cormorant Collage', 'Cormorant Garamond', Georgia, serif; font-weight: 500; }
.cg-font-cormorant_italic { font-family: 'Cormorant Italic Collage', 'Cormorant Garamond', Georgia, serif; font-weight: 500; }
.cg-font-fraunces { font-family: 'Fraunces Collage', 'Fraunces', Georgia, serif; font-weight: 400; }
.cg-story-sample.cg-font-cormorant, .cg-story-sample.cg-font-cormorant_italic, .cl-story-sample.cg-font-cormorant, .cl-story-sample.cg-font-cormorant_italic { font-size: 1.2rem; }

/* ------------------------------------------------------------------ shell */
/* --cg-consent-h: height of the cookie banner while it is unanswered (set by consent_offset.js, 0 otherwise).
   The studio's fixed/sticky bottom bars sit directly above the banner and the page pads by it, so the
   primary actions stay reachable on a first visit (qa-mobile r2 #4). */
.cg-body { background: var(--surface); color: var(--ink); min-height: 100vh; --cg-consent-h: 0px; padding-bottom: var(--cg-consent-h); }
.cg-body.has-sheet { overflow: hidden; }
.cg-header .cg-nav-link { font-size: 0.82rem; color: var(--text-muted); text-decoration: none; font-weight: 500; white-space: nowrap; }
.cg-story-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--text-muted); }
.cg-story-switch select { font: inherit; font-size: 0.82rem; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); min-height: 36px; }
@media (max-width: 600px) { .cg-story-switch span { display: none; } }
/* no story yet (S1 of a fresh start): the select would only show '—' — app.js setStorySwitch reveals it */
.cg-story-switch[hidden] { display: none !important; }
/* Header tap targets (qa-mobile r2, SPEC §15.1 V1): below 1024px every header control — logo, story select,
   Products, EN, DE, Cart — is a >= 44 x 44 px hit box. The text stays the same size; the box grows around it
   (inline-flex + min-width/min-height), so the row keeps its look. Vertical padding drops from 14 to 10 px so
   the header stays compact (10 + 44 + 10 + 1 border = 65 px) and --cg-header-h follows it: the sticky canvas
   (S4) and side columns offset by that variable. The shared _lang_switch.html partial is untouched; its inline
   gap is overridden here only. Width budget on a 320 px DE phone (Produkte / Warenkorb) is 2 px short, so under
   360 px the "|" between EN and DE goes and the side padding tightens; the story select is the one item that
   shrinks (never below 44 px) when the row would otherwise overflow — its options stay full-length in the picker. */
@media (max-width: 1023px) {
  :root { --cg-header-h: 65px; }
  .cg-header { padding-top: 10px; padding-bottom: 10px; }
  .cg-header .header-actions { min-width: 0; gap: 0; }
  .cg-header .header-actions > * { flex: 0 0 auto; }
  .cg-header .logo { min-width: 44px; min-height: 44px; justify-content: center; }
  .cg-header .cg-story-switch { display: inline-flex; flex: 0 1 auto; min-width: 44px; margin-right: 6px; }
  .cg-header .cg-story-switch span { white-space: nowrap; }
  .cg-header .cg-story-switch select { flex: 1 1 auto; min-width: 0; max-width: 100%; min-height: 44px; }
  .cg-header .cg-nav-link, .cg-header .lang-switch a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; box-sizing: border-box; }
  .cg-header .lang-switch { gap: 0 !important; min-height: 44px; }
}
@media (max-width: 359px) {
  .cg-header { padding-left: 4px; padding-right: 4px; }
  .cg-header .lang-switch > span { display: none !important; }
  /* 320 px phones (iPhone 5 / SE 1st gen): the de cell-bar dock row ('zurücksetzen' + three one-word labels,
     padding, gaps) needs 321 px at 0.8rem; 0.74rem brings it to ~290 px so the row still never scrolls.
     Extra .cg-studio in the selector: this block precedes the portrait dock block, so it wins by specificity. */
  .cg-studio .cg-cellbar .btn { font-size: 0.74rem; padding: 4px 4px; }
}

/* Viewport-proportional, never a px tier: --content-w (min(92vw, 1900px)) caps the shared site chrome, but
   the studio keeps growing past 2560 px so the canvas scales with the screen (qa-edge r2 viewport sweep:
   the 5K canvas was smaller than the 2.5K one). 74vw == 1894px at 2560, so nothing changes below that. */
.cg-studio { max-width: max(var(--content-w), 74vw); margin: 0 auto; padding: 0 max(16px, 2vw) 96px; }
.cg-fatal { background: #fdecec; color: #8a1f1f; border: 1px solid #f3bcbc; border-radius: var(--radius-md); padding: 12px 16px; margin: 12px 0; font-size: 0.92rem; }
.cg-fatal[hidden] { display: none; }

.cg-steps { list-style: none; display: flex; gap: 4px; padding: 8px 0; margin: 0; min-height: var(--cg-steps-h); overflow-x: auto; scrollbar-width: none; }
.cg-steps::-webkit-scrollbar { display: none; }
.cg-steps li { flex: 0 0 auto; }
.cg-steps button { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border: 0; background: transparent; color: var(--text-subtle); font: inherit; font-size: 0.82rem; font-weight: 500; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; }
.cg-steps button:disabled { cursor: default; opacity: 0.6; }
.cg-steps .cg-step-n { flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-strong); font-size: 0.72rem; }
.cg-steps li.is-current button { color: var(--ink); }
.cg-steps li.is-current .cg-step-n { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.cg-steps li.is-done button { color: var(--text-muted); }
.cg-steps li.is-done .cg-step-n { background: var(--surface-3); border-color: var(--surface-3); }
/* Phones (qa-mobile r2): five full labels are ~490px wide, so the row used to scroll with the scrollbar
   hidden and steps 4-5 were simply gone. Below 768px the row never scrolls: every step keeps its number,
   only the current step shows its label (the others stay in the accessibility tree, visually hidden) and
   the other four share the remaining width as equal tap slots. The current pill never shrinks (DE
   "Prüfansicht" current on a 320px phone is the longest case, 112px of 262px). */
@media (max-width: 767px) {
  .cg-steps { overflow: visible; gap: 0; }
  .cg-steps li { flex: 1 1 0; min-width: 0; }
  .cg-steps li.is-current { flex: 0 0 auto; max-width: 70%; }
  .cg-steps button { padding: 6px; gap: 6px; max-width: 100%; }
  .cg-steps li:not(.is-current) button { width: 100%; justify-content: center; }
  .cg-steps li:not(.is-current) .cg-step-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .cg-steps li.is-current .cg-step-label { overflow: hidden; text-overflow: ellipsis; }
}

.cg-step { padding-top: 8px; }
.cg-step[hidden] { display: none; }
.cg-step h1 { font-size: clamp(1.6rem, 2.4vw, 2.4rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1.15; margin: 8px 0 6px; }
.cg-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); margin: 12px 0 0; }
.cg-sub { color: var(--text-muted); font-size: clamp(0.95rem, 1.05vw, 1.1rem); line-height: 1.55; max-width: 60ch; margin: 0 0 20px; }
.cg-hint { color: var(--text-subtle); font-size: 0.82rem; line-height: 1.45; margin: 6px 0 0; }
.cg-error { color: var(--cg-red); font-size: 0.82rem; min-height: 1.2em; margin: 4px 0 0; }
.cg-notice { background: #fff8e8; color: #6a4b00; border-radius: var(--radius-sm); padding: 8px 12px; font-size: 0.86rem; }
.cg-link { background: none; border: 0; padding: 0; color: var(--text-muted); font: inherit; font-size: 0.84rem; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cg-link:hover { color: var(--ink); }
.cg-chip { display: inline-block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--ink); color: var(--surface); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.cg-chip-soft { background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border); }
.cg-desktop-only { display: none; }
.cg-mobile-only { display: inline; }
@media (min-width: 1024px) { .cg-desktop-only { display: initial; } .cg-mobile-only { display: none; } }

/* segmented controls (look / material / orientation / tabs) */
.cg-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 3px; gap: 2px; background: var(--surface); max-width: 100%; }
.cg-seg button { border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 0.84rem; font-weight: 500; padding: 8px 14px; min-height: 36px; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; }
.cg-seg button.is-on { background: var(--ink); color: var(--surface); }
.cg-seg button[hidden] { display: none; }

.cg-studio .btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.cg-studio .btn-sm { min-height: 34px; }
@media (max-width: 1023px) {
  .cg-studio .btn, .cg-studio .btn-sm, .cg-seg button, .cg-link, .cg-steps button, .cg-sheet-close { min-height: 44px; }
  .cg-link { display: inline-flex; align-items: center; }
}

/* --------------------------------------------------------------- S1 story */
.cg-story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 28px); margin-top: 8px; }
.cg-story-card { position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; cursor: pointer; font: inherit; color: inherit; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.cg-story-card:hover, .cg-story-card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-md); outline: none; }
.cg-story-card:focus-visible { box-shadow: 0 0 0 3px var(--cg-blue); }
.cg-story-img { display: block; aspect-ratio: 1600 / 1661; background: var(--surface-3); overflow: hidden; }
.cg-story-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-story-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.cg-story-name { font-size: 1.2rem; font-weight: 600; }
.cg-story-desc { color: var(--text-muted); font-size: 0.9rem; line-height: 1.45; min-height: 2.9em; }
.cg-story-sample { color: var(--cg-ink); background: var(--cg-paper); padding: 8px 12px; border-radius: var(--radius-sm); font-size: 1.05rem; text-align: center; margin: 4px 0; }
.cg-story-pick { align-self: flex-start; margin-top: 4px; }
@media (max-width: 1023px) {
  .cg-story-grid { grid-template-columns: 1fr; }
  .cg-story-card { min-height: 70vh; }
  .cg-story-img { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
  .cg-story-pick { align-self: stretch; }
}

/* -------------------------------------------------------------- S2 upload */
.cg-dropzone { border: 2px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-2); padding: clamp(24px, 4vw, 48px) 16px; text-align: center; transition: border-color 0.15s, background 0.15s; }
.cg-dropzone.is-over { border-color: var(--ink); background: var(--surface-3); }
.cg-drop-title { font-size: 1.1rem; font-weight: 600; margin: 0; }
.cg-drop-or { color: var(--text-subtle); font-size: 0.82rem; margin: 6px 0 12px; }
.cg-drop-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cg-sources { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-start; margin: 14px 0 8px; }
.cg-ig { flex: 1 1 320px; max-width: 480px; }
.cg-ig[hidden] { display: none; }
.cg-ig label { display: block; font-size: 0.84rem; font-weight: 600; margin-bottom: 6px; }
.cg-ig-row { display: flex; gap: 8px; }
.cg-ig-row input { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; min-height: 40px; }
.cg-gather { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.cg-upload-status { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 12px 0 4px; min-height: 24px; }
.cg-upload-count { margin: 0; font-weight: 600; font-size: 0.9rem; }
.cg-upload-count:empty { display: none; }
.cg-upload-progress { margin: 0; color: var(--text-muted); font-size: 0.86rem; }
.cg-upload-progress[hidden], .cg-notice[hidden] { display: none; }
.cg-upload-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 10px 0 16px; }
.cg-upload-grid:empty { display: none; }
.cg-thumb { position: relative; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-3); }
.cg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.55; transition: opacity 0.25s; }
.cg-thumb img:not([src]) { display: none; }
.cg-thumb.is-done img { opacity: 1; }
.cg-thumb-bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--ink); transition: width 0.15s linear; }
.cg-thumb.is-done .cg-thumb-bar { display: none; }
.cg-thumb-label { position: absolute; inset: auto 0 0 0; font-size: 0.62rem; line-height: 1.2; padding: 4px 6px; background: rgba(0,0,0,0.55); color: #fff; }
.cg-thumb-label:empty { display: none; }
/* placeholder tile (S2 thumb / S4 tray): icon + file name when there is no image to show — a HEIC before its
 * proxy, or an unreadable photo (analysis failed, no proxy ever comes). Never a blank or broken <img>. */
.cg-thumb-ph, .cg-tray-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 14px 8px 0; color: var(--text-muted); font-size: 0.62rem; line-height: 1.2; text-align: center; pointer-events: none; }
.cg-thumb-ph svg, .cg-tray-ph svg { flex: 0 0 auto; opacity: 0.75; }
.cg-thumb-ph span, .cg-tray-ph span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-thumb-ph span:empty, .cg-tray-ph span:empty { display: none; }
.cg-thumb.is-failed .cg-thumb-label { background: rgba(140, 32, 32, 0.78); }
.cg-failed { border: 1px solid #f3bcbc; background: #fdf3f3; border-radius: var(--radius-md); padding: 12px 16px; margin: 12px 0; }
.cg-failed[hidden] { display: none; }
.cg-failed-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cg-failed-head h2 { font-size: 0.95rem; font-weight: 600; margin: 0; }
.cg-failed-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.cg-failed-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; font-size: 0.84rem; }
.cg-failed-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.cg-failed-reason { color: var(--text-muted); }
.cg-boundary { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px; margin: 12px 0; background: var(--surface-2); }
.cg-boundary[hidden] { display: none; }
/* the single-print link leaves the too_small variant (a photo that cannot print cannot be a single print); .btn sets display, so [hidden] needs its own rule */
.cg-boundary .btn[hidden] { display: none; }
.cg-boundary h2 { font-size: 1.05rem; font-weight: 600; margin: 0 0 4px; }
.cg-boundary p { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 12px; }
.cg-upload-sticky { display: flex; gap: 10px; justify-content: flex-end; align-items: center; padding: 12px 0; }
.cg-upload-sticky[hidden] { display: none; }
@media (max-width: 1023px) {
  .cg-upload-sticky { position: fixed; left: 0; right: 0; bottom: var(--cg-consent-h, 0px); z-index: 60; background: rgba(255,255,255,0.96); backdrop-filter: blur(12px); border-top: 1px solid var(--border); padding: 10px max(12px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)); }
  .cg-upload-sticky .btn-primary { flex: 1 1 auto; }
}

/* -------------------------------------------------------------- S4 studio */
.cg-stale { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff8e8; color: #6a4b00; border: 1px solid #f1dfae; border-radius: var(--radius-md); padding: 10px 14px; margin: 8px 0 12px; font-size: 0.9rem; }
.cg-stale[hidden] { display: none; }
.cg-studio-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.cg-studio-head h1 { margin: 0; }
.cg-status { margin: 0; color: var(--text-muted); font-size: 0.86rem; }
.cg-status[hidden] { display: none; }
.cg-save { margin-left: auto; font-size: 0.74rem; color: var(--text-subtle); min-width: 60px; text-align: right; }
.cg-save[data-state="error"] { color: var(--cg-red); }
.cg-save[data-state="saved"] { color: var(--cg-green); }
.cg-studio-grid { display: grid; grid-template-columns: minmax(0, 64fr) minmax(280px, 36fr); gap: clamp(16px, 2vw, 32px); align-items: start; margin-top: 10px; }
.cg-canvas-col { min-width: 0; }
.cg-canvas-wrap { background: var(--surface-3); border-radius: var(--radius-lg); padding: clamp(10px, 1.4vw, 24px); }
/* height follows the viewport; the cap scales with it too (65vh ≥ 1400px only above 2154 px tall) instead of a fixed 1400px tier */
.cg-canvas { position: relative; width: 100%; height: calc(100vh - var(--cg-header-h) - var(--cg-steps-h) - 140px); min-height: 360px; max-height: max(1400px, 65vh); display: flex; align-items: center; justify-content: center; outline: none; touch-action: pan-y; }
.cg-canvas:focus-visible { box-shadow: 0 0 0 2px var(--cg-blue); border-radius: var(--radius-sm); }
.cg-mobile-chips, .cg-cellbar, .cg-mobile-bar, .cg-sheet-mobile { display: none; }
.cg-kbd { margin: 10px 0 0; font-size: 0.74rem; color: var(--text-faint); }

.cg-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: calc(var(--cg-header-h) + 8px); }
.cg-panel { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; background: var(--surface); }
.cg-panel h2 { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-subtle); margin: 0 0 8px; }
.cg-note-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cg-note-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 0.86rem; line-height: 1.4; padding-left: 14px; position: relative; }
.cg-note-list li::before { content: "·"; position: absolute; left: 2px; color: var(--text-subtle); }
.cg-note-list li.is-undone { color: var(--text-faint); text-decoration: line-through; }
.cg-note-list .cg-link { flex: 0 0 auto; white-space: nowrap; }
#textBlock[hidden], #textAdd[hidden] { display: none; }
#textField { width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; font-size: 1rem; min-height: 42px; }
#textField[aria-invalid="true"] { border-color: var(--cg-red); }
#textField::placeholder { color: var(--text-faint); }
/* text style + size (each style label is set in its own typeface) */
.cg-type { margin: 12px 0 2px; display: grid; gap: 10px; }
.cg-type-label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-subtle); margin: 0 0 6px; }
.cg-tstyles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cg-tstyle { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--cg-paper); color: var(--cg-ink); cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; line-height: 1.1; }
.cg-tstyle:hover { border-color: var(--border-strong); }
.cg-tstyle.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cg-tstyle:focus-visible { outline: 2px solid var(--cg-blue); outline-offset: 2px; }
.cg-tstyle-name { font-size: 1.25rem; white-space: nowrap; }
.cg-tstyle[data-tstyle="modern"] .cg-tstyle-name { font-size: 1.12rem; }
.cg-tstyle[data-tstyle="minimal"] .cg-tstyle-name { font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; margin-right: -0.22em; }
.cg-tsize-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cg-tsize-row .cg-type-label { margin: 0; }
.cg-tsize button { min-width: 44px; padding: 8px 12px; }
.cg-type[hidden] { display: none; }
.cg-actions { display: grid; gap: 10px; }
.cg-undo-row { display: flex; gap: 8px; }
.cg-undo-row .btn { flex: 1 1 0; }
.cg-sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cg-sheet-close { display: none; border: 0; background: transparent; font-size: 1.5rem; line-height: 1; color: var(--text-muted); cursor: pointer; width: 44px; height: 44px; border-radius: 50%; }
/* Desktop only: the text/look "sheets" are plain sidebar panels, always shown. Must be
   media-scoped — unscoped it outranks the mobile `.cg-sheet[hidden]` rule by specificity. */
@media (min-width: 1024px) { .cg-side .cg-sheet[hidden] { display: block; } }

/* tray */
.cg-tray { margin-top: 14px; }
.cg-tray-title { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-subtle); margin: 0 0 4px; }
.cg-tray-hint { margin: 0 0 8px; }
#trayEmpty[hidden] { display: none; }
.cg-tray-strip { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 10px; scrollbar-width: thin; }
.cg-tray-strip:empty { display: none; }
.cg-tray-item { position: relative; flex: 0 0 auto; width: 96px; height: 96px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-3); cursor: grab; outline: none; }
.cg-tray-item:focus-visible { box-shadow: 0 0 0 3px var(--cg-blue); }
.cg-tray-item.is-selected { box-shadow: 0 0 0 3px var(--ink); }
.cg-tray-item img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.cg-tray-item .cg-chip { position: absolute; left: 4px; bottom: 4px; right: 4px; font-size: 0.6rem; line-height: 1.25; padding: 2px 6px; background: rgba(0,0,0,0.7); white-space: normal; overflow-wrap: anywhere; text-overflow: clip; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.cg-tray-item .cg-chip-soft { bottom: auto; top: 4px; background: rgba(255,255,255,0.9); color: var(--text); }
.cg-tray-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; max-height: 50vh; overflow-y: auto; padding: 4px 2px; }
.cg-tray-grid .cg-tray-item { width: auto; height: auto; aspect-ratio: 1; }
/* tray-only photo (too small / screenshot / unreadable): selectable so the chip can be read, never addable */
.cg-tray-item.is-trayonly { cursor: default; }
.cg-tray-item.is-trayonly img { opacity: 0.55; }
.cg-tray-item.is-trayonly.is-selected { box-shadow: 0 0 0 3px var(--text-muted); }
.cg-sheet-status { margin: 10px 0 0; font-size: 0.84rem; color: var(--text-muted); }
.cg-sheet-status[hidden] { display: none; }
.cg-sheet-actions { display: flex; gap: 8px; margin-top: 12px; }
.cg-sheet-actions .btn { flex: 1 1 0; }

/* sheets (mobile) + backdrop. The site header (main.css `header`) is sticky at z-index 100, so the
   backdrop + sheet must sit ABOVE it (a tap on the logo / nav / story select with a sheet open must close
   the sheet, never leave the studio) and BELOW the cart drawer / modal / drag ghost (200+). */
.cg-sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 150; }
.cg-sheet-backdrop[hidden] { display: none; }
/* Refusal toast while a sheet is open: the editor's .cc-toast lives inside the (sticky, z 20) canvas and is
   covered by the backdrop, so app.js repeats the message here, fixed above the sheet (z 170 > sheet 160). */
.cg-sheet-toast { position: fixed; left: 50%; bottom: 12px; transform: translate(-50%, 8px); z-index: 170; background: rgba(17,17,17,0.92); color: #fff; font-size: 0.8rem; padding: 7px 12px; border-radius: var(--radius-pill); opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s; white-space: nowrap; max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis; }
.cg-sheet-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.cg-sheet-toast[hidden] { display: none; }
/* Cookie banner (static/js/consent.js injects `#mz-consent{z-index:2147483000}` at runtime; the shared
   file is untouched). On the studio page it only needs to clear the site header (100) and the studio's
   bottom bars (60) — it must NOT sit above the sheet layer, otherwise an open Text/Look/Tray sheet is
   partly covered by the banner. Backdrop 150 dims it, sheets 160 cover it, cart/modal/lightbox/ghost
   (200+) keep their precedence. `.cg-body #mz-consent` outranks the injected id-only selector. */
.cg-body #mz-consent { z-index: 140; }

@media (max-width: 1023px) {
  .cg-studio { padding-bottom: 120px; }
  .cg-studio-grid { display: block; }
  .cg-canvas-wrap { position: sticky; top: var(--cg-header-h); z-index: 20; padding: 8px; border-radius: 0; margin: 0 calc(-1 * max(16px, 2vw)); }
  /* 58vh is only the pre-boot fallback: app.js fitStudioCanvas sets the height to the paper's aspect at
     full width, capped so the canvas + note/tray chips end above the studio bar (studio_fit.js). The
     floor matches its CANVAS_FLOOR; 300 kept a landscape paper (247 px tall at 375) floating in grey. */
  .cg-canvas { height: 58vh; min-height: 200px; }
  /* The text + look sheets are children of the sidebar (one DOM instance for both layouts):
     the sidebar must not be display:none or the fixed-position sheets can never show. */
  .cg-side { display: contents; }
  .cg-side .cg-note, .cg-side .cg-actions { display: none; }
  .cg-desktop-tray { display: none; }
  .cg-mobile-chips { display: flex; gap: 8px; padding: 10px 0 0; flex-wrap: wrap; }
  .cg-chip-btn { min-height: 44px; padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); font: inherit; font-size: 0.84rem; font-weight: 500; color: var(--ink); cursor: pointer; }
  .cg-chip-btn:empty { display: none; }
  /* Cell action bar: a fixed second row of the bottom dock, directly ABOVE the studio bar — never in
     the page flow. In flow it sat below the sticky canvas + chips, and at scrollY 0 on a 667 px phone
     (iPhone SE) the steps + title pushed it entirely under the fixed studio bar: a 'Reset crop' tap
     landed on Undo. Docked, it is visible whenever a cell is selected, whatever the scroll position.
     --cg-mobile-bar-h is the studio bar's natural height (8 + 48 + 8 + 1 border); app.js overwrites
     it with the measured height so the two rows always meet. Sits on the same consent offset as the
     studio bar, same z (60): below the sheet backdrop (150) / sheets (160). */
  .cg-studio { --cg-mobile-bar-h: calc(65px + env(safe-area-inset-bottom)); }
  .cg-cellbar { position: fixed; left: 0; right: 0; bottom: calc(var(--cg-consent-h, 0px) + var(--cg-mobile-bar-h)); z-index: 60; display: flex; gap: 6px; padding: 8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left)); overflow-x: auto; scrollbar-width: none; background: var(--surface); border-top: 1px solid var(--border); }
  .cg-cellbar[hidden] { display: none; }
  /* four equal columns (flex-basis 0) that share the row; a long label (de 'Ausschnitt zurücksetzen')
     wraps at the space instead of pushing the row into a horizontal scroll. min-width stays `auto`
     (= the label's longest word): with `min-width: 0` the basis-auto columns let the long label steal
     width and 'Ersetzen' / 'Entfernen' spilled past their own border; with the word floor a column
     only takes more than its share when a single word needs it. Worst case (de, 4 words + padding +
     gaps) is 321 px, so nothing scrolls from 360 px up; below that the font steps down (see below). */
  .cg-cellbar .btn { flex: 1 1 0; min-width: auto; min-height: 44px; padding: 4px 5px; white-space: normal; line-height: 1.2; text-align: center; font-size: 0.8rem; }
  /* the dock grows by a row while a cell is selected: keep the page's last content reachable above it */
  .cg-studio:has(.cg-cellbar:not([hidden])) { padding-bottom: 180px; }
  /* Studio dock (bar + cell bar) is opaque: the frosted 0.96 white let the chips scrolled beneath it show
     through, and with the disabled labels at --text-faint the 375 px bar read 'Text Look Shuffle Ur' with
     no visible Choose size (qa-design f1, r2 #26). Columns are minmax(min-content, 1fr): five equal fifths,
     except that a column never gets narrower than its longest word (de 'Rückgängig' ~71 px) — it takes
     that from the short labels (Text / Stil) instead of being cut or hyphenated. 5 columns of min-content
     total ~250 px, so nothing overflows down to 320 px. */
  .cg-mobile-bar { position: fixed; left: 0; right: 0; bottom: var(--cg-consent-h, 0px); z-index: 60; display: grid; grid-template-columns: repeat(5, minmax(min-content, 1fr)); gap: 4px; background: var(--surface); border-top: 1px solid var(--border); padding: 8px max(8px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)); }
  .cg-body:not([data-step="S4"]) .cg-mobile-bar { display: none; }
  .cg-mobile-bar button { min-height: 48px; border: 0; background: transparent; font: inherit; font-size: 0.78rem; font-weight: 600; line-height: 1.2; color: var(--ink); border-radius: var(--radius-sm); padding: 4px 2px; cursor: pointer; }
  .cg-mobile-bar button:disabled { color: var(--text-subtle); }
  .cg-mobile-bar button.is-primary { background: var(--ink); color: var(--surface); }
  .cg-mobile-bar button.is-primary:disabled { background: var(--surface-4); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border-strong); }
  .cg-sheet, .cg-sheet-mobile { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 160; background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-lg); padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); max-height: 80vh; overflow-y: auto; }
  .cg-sheet[hidden], .cg-sheet-mobile[hidden] { display: none; }
  /* The text sheet holds the only text input in the studio: anchor it at the TOP of the viewport so the
     field and its error line stay clear of the on-screen keyboard (which covers the bottom ~40%) on
     every mobile browser — Safari ignores interactive-widget and Chrome Android's default
     resizes-visual never pushes a fixed-bottom sheet up (QA mobile r2 "text_field"). */
  #sheetText { top: 0; bottom: auto; border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: calc(14px + env(safe-area-inset-top)) 16px 16px; max-height: 55vh; }
  .cg-sheet-close { display: inline-flex; align-items: center; justify-content: center; }
  .cg-sheet .cg-seg { display: flex; width: 100%; }
  .cg-sheet .cg-seg button { flex: 1 1 0; }
  .cg-kbd { display: none; }
}
/* Phone in landscape (short viewport, e.g. iPhone 13 844×390, SE 667×375). The portrait layout cannot
   work here: header 64 + sticky canvas (min-height 300 + padding) + fixed bottom bar 65 > 390, so only
   ~150 px of the paper showed and the sticky wrap could not scroll the rest out from under the bar
   (qa-mobile r2 'landscape_paper_under_bar_px:147'). Here the dock moves to the RIGHT EDGE as side
   columns (studio bar outermost, the cell bar beside it while a cell is selected), the page pads by
   their width, and the canvas is sized to the full viewport height below the header (no min-height),
   still sticky. The note/tray chips move ABOVE the canvas (flex order) so nothing is left in the flow
   under a pinned full-height canvas; the steps bar + title scroll away above it, and app.js scrolls
   the page to that pinned position once on rotation (the whole paper is in view without a gesture).
   app.js (dockCellBar) reads the same query to skip the bottom-dock scroll nudge. Same z (60) and
   consent offset as the portrait dock. Must stay AFTER the portrait block: it overrides by source
   order, not specificity. */
@media (max-width: 1023px) and (max-height: 520px) and (orientation: landscape) {
  /* padding-bottom 0: anything below the canvas column (the portrait dock clearance) would shorten
     the sticky travel and push the pinned paper under the header at max scroll */
  .cg-studio { --cg-dock-col-w: 112px; padding-right: var(--cg-dock-col-w); padding-bottom: 0; }
  .cg-studio:has(.cg-cellbar:not([hidden])) { padding-right: calc(2 * var(--cg-dock-col-w)); padding-bottom: 0; }
  .cg-canvas-col { display: flex; flex-direction: column; }
  .cg-mobile-chips { order: -1; padding: 0 0 8px; }
  .cg-canvas-wrap { margin-right: 0; }
  .cg-canvas { height: calc(100vh - var(--cg-header-h) - var(--cg-consent-h, 0px) - 16px); height: calc(100svh - var(--cg-header-h) - var(--cg-consent-h, 0px) - 16px); min-height: 160px; }
  .cg-mobile-bar { top: var(--cg-header-h); left: auto; right: 0; bottom: var(--cg-consent-h, 0px); width: var(--cg-dock-col-w); grid-template-columns: 1fr; grid-auto-rows: minmax(44px, auto); align-content: start; overflow-y: auto; border-top: 0; border-left: 1px solid var(--border); padding: 8px calc(8px + env(safe-area-inset-right)) 8px 8px; }
  .cg-mobile-bar button { min-height: 44px; }
  .cg-cellbar { top: var(--cg-header-h); left: auto; right: var(--cg-dock-col-w); bottom: var(--cg-consent-h, 0px); width: var(--cg-dock-col-w); flex-direction: column; overflow-x: hidden; overflow-y: auto; border-top: 0; border-left: 1px solid var(--border); padding: 8px; }
  .cg-cellbar .btn { flex: 0 0 auto; }
}

/* -------------------------------------------------- editor canvas (cc-*) */
.cc-root { position: relative; }
.cc-paper { position: relative; background: var(--cg-paper); box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 12px 32px rgba(0,0,0,0.12); overflow: visible; }
.cc-pixels { position: absolute; left: 0; top: 0; pointer-events: none; }
.cc-pixels[hidden] { display: none; }
.cc-cells { position: absolute; inset: 0; }
.cc-cell { position: absolute; overflow: hidden; background: #e4e1dc; outline: 0; cursor: pointer; -webkit-user-select: none; user-select: none; transition: left 0.2s ease, top 0.2s ease, width 0.2s ease, height 0.2s ease; }
.cc-cell.is-new { transition: none; }
.cc-cell img { position: absolute; left: 0; top: 0; max-width: none; display: block; -webkit-user-drag: none; user-select: none; pointer-events: none; transition: left 0.2s ease, top 0.2s ease, width 0.2s ease, height 0.2s ease; }
.cc-cell.is-placeholder img { display: none; }
.cc-paper.has-pixels .cc-cell img { opacity: 0; }
/* With the pixel layer active the cells are hit-targets only: transparent, so the canvas below shows through. */
.cc-paper.has-pixels .cc-cell { background: transparent; }
.cc-paper.has-pixels .cc-cell.is-placeholder { background: #e4e1dc; }
.cc-paper.is-bw:not(.has-pixels) .cc-cell img { filter: grayscale(1); }
.cc-cell::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 0 transparent; transition: box-shadow 0.12s; }
.cc-cell.is-selected::after { box-shadow: inset 0 0 0 3px var(--cg-blue); }
.cc-cell:focus-visible::after { box-shadow: inset 0 0 0 3px var(--cg-blue); }
.cc-cell.is-target::after { box-shadow: inset 0 0 0 4px var(--cg-green); }
.cc-cell.is-refused::after { box-shadow: inset 0 0 0 4px var(--cg-red); }
.cc-cell.is-lifted { opacity: 0.4; }
.cc-cell.is-clamped { animation: cc-shake 0.3s ease; }
@keyframes cc-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.cc-shimmer { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(110deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 70%); background-size: 220% 100%; }
.cc-cell.is-pending .cc-shimmer { opacity: 1; animation: cc-shimmer 1.4s linear infinite; }
@keyframes cc-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.cc-faces { position: absolute; inset: 0; pointer-events: none; }
.cc-face { position: absolute; outline: 2px solid rgba(255, 60, 60, 0.85); box-shadow: 0 0 0 1px rgba(255,255,255,0.6); }
.cc-tools { position: absolute; right: 4px; top: 4px; display: flex; gap: 4px; opacity: 0; transition: opacity 0.12s; }
.cc-cell:hover .cc-tools, .cc-cell.is-selected .cc-tools, .cc-cell:focus-within .cc-tools { opacity: 1; }
/* Hover tools never intercept a press while hidden, and a finger (no hover) only gets them on the selected
   cell: on touch the invisible ★/✕ used to cover a small cell's centre (QA mobile f2, iPad landscape). */
.cc-tools { pointer-events: none; }
.cc-cell:hover .cc-tools, .cc-cell.is-selected .cc-tools, .cc-cell:focus-within .cc-tools { pointer-events: auto; }
@media (hover: none) {
  .cc-cell:not(.is-selected) .cc-tools, .cc-cell:hover:not(.is-selected) .cc-tools, .cc-cell:focus-within:not(.is-selected) .cc-tools { opacity: 0; pointer-events: none; }
}
.cc-tool { width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.92); color: var(--ink); font-size: 0.8rem; line-height: 1; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.25); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.cc-tool:disabled { opacity: 0.35; cursor: default; }
.cc-hero-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
/* No amber dot in the studio: .is-amber is a state marker only; the dot is drawn on the proof (.cp-amber), SPEC PPI 110–149. */
.cc-hero-badge { position: absolute; left: 6px; top: 6px; display: none; font-size: 0.7rem; line-height: 1; padding: 3px 5px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.92); color: var(--ink); }
.cc-cell.is-hero .cc-hero-badge { display: inline-block; }
.cc-cell.is-pinned::before { content: ""; position: absolute; right: 6px; bottom: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--cg-blue); z-index: 1; }
@media (max-width: 1023px) { .cc-tools { display: none; } .cc-cell { transition: none; } }
.cc-gutter { position: absolute; background: transparent; transition: background 0.12s; }
.cc-root.is-tray-dragging .cc-gutter { background: rgba(25,118,210,0.08); }
.cc-gutter.is-target { background: var(--cg-green); opacity: 0.6; }
.cc-text { position: absolute; display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; color: var(--cg-ink); line-height: 1; pointer-events: none; }
.cc-text.is-placeholder { color: #a39f98; }
.cc-text.is-overflow { color: var(--cg-red); }
.cc-text.is-styled { display: block; overflow: visible; }
.cc-text-canvas { display: block; position: absolute; left: 0; top: 0; }
.cc-ghost { position: fixed; left: 0; top: 0; width: 84px; height: 84px; pointer-events: none; z-index: 200; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-md); opacity: 0.9; }
.cc-ghost img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-root.is-dragging { cursor: grabbing; }
.cc-toast { position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 8px); background: rgba(17,17,17,0.92); color: #fff; font-size: 0.8rem; padding: 7px 12px; border-radius: var(--radius-pill); opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s; white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; z-index: 5; }
.cc-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- S5 size */
.cg-size-controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.cg-size-hint { margin: 0 0 8px; min-height: 1.2em; }
.cg-size-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 24px); }
.cg-size-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; }
.cg-size-card.is-selected { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.cg-size-card.is-infeasible { opacity: 0.6; }
.cg-size-preview { background: var(--surface-3); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 14px; }
.cg-size-body { padding: 12px 14px 14px; display: grid; gap: 4px; }
.cg-size-body h3 { font-size: 1.05rem; font-weight: 600; margin: 0; }
.cg-size-price { margin: 0; font-size: 0.95rem; }
.cg-size-price small { color: var(--text-subtle); font-size: 0.74rem; }
.cg-size-verdict { margin: 2px 0 8px; font-size: 0.82rem; line-height: 1.4; color: var(--text-muted); min-height: 2.8em; }
.cg-size-verdict.is-sharp { color: var(--cg-green); }
.cg-size-verdict.is-moved { color: var(--cg-amber); }
.cg-size-verdict.is-tray, .cg-size-verdict.is-capacity, .cg-size-verdict.is-infeasible { color: var(--cg-red); }
.cg-size-verdict.is-pending { color: var(--text-faint); }
.cg-static-paper { position: relative; background: var(--cg-paper); box-shadow: 0 2px 10px rgba(0,0,0,0.12); max-width: 100%; }
.cg-static-cell { position: absolute; overflow: hidden; background: #e4e1dc; }
.cg-static-cell img { position: absolute; left: 0; top: 0; max-width: none; display: block; }
.cg-static-paper.is-bw img { filter: grayscale(1); }
.cg-static-band { position: absolute; }
.cg-digital-note { margin: 16px 0 0; font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; }
.cg-digital-note strong { color: var(--ink); font-weight: 600; }
.cg-step-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }
@media (max-width: 1023px) {
  .cg-size-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 4px 2px 12px; margin: 0 calc(-1 * max(16px, 2vw)); padding-left: max(16px, 2vw); padding-right: max(16px, 2vw); }
  /* A card must fit between the strip's top (at scroll 0) and the sticky Back / See-the-proof bar, or
     its Select button sits under the bar and the tap opens the proof instead (qa-mobile r2 #8).
     size_fit.js measures that room and publishes --cg-size-preview-h (the preview height the cards
     may use) and --cg-size-paper-scale (fits the paper, rendered at its natural 220 px width by
     renderStatic, into it). Unset (desktop / before the first measure) the preview keeps its natural
     height. When even a 150 px preview cannot fit (iPhone SE, phones in landscape) the module adds
     `cg-nav-inflow` to <body> and the bar leaves the sticky path: nothing is covered, the page scrolls. */
  .cg-size-card { flex: 0 0 min(78vw, 320px); scroll-snap-align: center; scroll-margin-bottom: calc(var(--cg-step-nav-h, 70px) + var(--cg-consent-h, 0px) + 8px); }
  .cg-size-preview { aspect-ratio: auto; height: var(--cg-size-preview-h, auto); min-height: 0; flex: 0 0 auto; overflow: hidden; }
  .cg-size-preview .cg-static-paper { transform: scale(var(--cg-size-paper-scale, 1)); transform-origin: center center; flex: 0 0 auto; }
  .cg-size-controls .cg-seg { display: flex; width: 100%; }
  .cg-size-controls .cg-seg button { flex: 1 1 0; }
  .cg-step-nav { position: sticky; bottom: var(--cg-consent-h, 0px); background: rgba(255,255,255,0.96); backdrop-filter: blur(12px); padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); margin: 12px 0 0; }
  .cg-step-nav .btn-primary { flex: 1 1 auto; }
  .cg-body.cg-nav-inflow .cg-step-nav { position: static; }
}

/* --------------------------------------------------------------- S6 proof */
.cg-proof-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.cg-proof-head h1 { margin-top: 0; }
.cg-proof-head .cg-sub { margin-bottom: 8px; }
.cg-proof-grid { display: grid; grid-template-columns: minmax(0, 64fr) minmax(280px, 36fr); gap: clamp(16px, 2vw, 32px); align-items: start; margin-top: 12px; }
.cg-proof-main { min-width: 0; }
.cg-proof-pane, .cg-wall-pane { position: relative; background: #2a2a2a; border-radius: var(--radius-lg); overflow: hidden; }
.cg-proof-pane[hidden], .cg-wall-pane[hidden] { display: none; }
.cg-proof-root { position: relative; width: 100%; height: calc(100vh - var(--cg-header-h) - var(--cg-steps-h) - 200px); min-height: 380px; max-height: max(1400px, 65vh); }
.cg-proof-status { position: relative; z-index: 2; padding: 10px 0; }
.cg-proof-tools { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 10px; font-size: 0.86rem; }
.cg-tools-label { font-weight: 600; font-size: 0.78rem; color: var(--text-subtle); letter-spacing: 0.04em; text-transform: uppercase; }
.cg-check { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; min-height: 32px; }
.cg-check[hidden] { display: none; }
.cg-check input { width: 18px; height: 18px; accent-color: var(--ink); flex: 0 0 auto; }
.cg-calibrate { margin-top: 10px; }
.cg-calibrate[hidden] { display: none; }
.cg-proof-side { display: grid; gap: 12px; position: sticky; top: calc(var(--cg-header-h) + 8px); }
.cg-trust { margin: 0; font-weight: 600; font-size: 0.95rem; line-height: 1.45; }
.cg-trust:empty, #ppiLine:empty, #proofPrice:empty, #emailMsg:empty { display: none; }
.cg-proof-price { margin: 0; font-size: 1rem; color: var(--text); }
.cg-preflight { border: 1px solid #f3bcbc; background: #fdf3f3; color: #8a1f1f; border-radius: var(--radius-md); padding: 12px 14px; }
.cg-preflight[hidden] { display: none; }
.cg-preflight h2 { font-size: 0.92rem; font-weight: 600; margin: 0 0 6px; }
.cg-preflight ul { margin: 0 0 10px; padding-left: 18px; font-size: 0.86rem; display: grid; gap: 4px; }
.cg-preflight-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-preflight-actions [hidden] { display: none; }
.cg-checklist { display: grid; gap: 4px; }
.cg-checkout { width: 100%; }
.cg-email label { display: block; font-size: 0.84rem; font-weight: 600; margin-bottom: 6px; }
.cg-email-row { display: flex; gap: 8px; }
.cg-email-row input { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; min-height: 40px; }
@media (max-width: 1023px) {
  .cg-proof-grid { display: block; }
  .cg-proof-root { height: 62vh; min-height: 320px; }
  .cg-proof-side { position: static; margin-top: 14px; }
  /* checkbox rows (overlays + proof checklist) are the tap target: 44 px on touch (SPEC §15.1 V1).
     This MUST stay below the base `.cg-check { min-height: 32px }` rule — same specificity, so the
     later rule wins; inside the earlier touch-target block (line ~129) it would lose the cascade. */
  .cg-check { min-height: 44px; }
  .cg-checklist { gap: 0; }
}
/* fix-proof-f2: phones. The overlay row wrapped one 44 px control per line (with a 14 px gap between lines),
   so the four toggles took ~280 px between the proof and the price. On narrow screens they form a tidy
   2 × 2 grid under a full-width "Overlays" label: rows touch (each row is already a 44 px tap target), the
   columns share the width, long DE labels wrap inside their cell. Wider screens keep the single wrapped row. */
@media (max-width: 599px) {
  .cg-proof-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 0; align-items: center; }
  .cg-proof-tools .cg-tools-label { grid-column: 1 / -1; margin-bottom: 2px; }
  .cg-proof-tools .cg-check { min-width: 0; line-height: 1.25; }
  .cg-proof-tools .cg-link { justify-self: start; text-align: left; line-height: 1.25; }
}

/* proof module (cp-*), built by proof.js.
   The HOST sizes .cp-root (.cg-proof-root: calc()/vh height + min/max) — cp-root must not set `height`
   (a later `height:100%` won the cascade, resolved to auto against the auto-height pane and collapsed
   every percent height below it to 0). .cp-stage is absolutely positioned, so its box is definite no
   matter how the root got its height, and .cp-viewer can be a plain 100% child: OpenSeadragon writes
   inline `position:relative` on its element, which would defeat `position:absolute; inset:0` here. */
.cp-root { position: relative; width: 100%; }
.cp-stage { position: absolute; inset: 0; overflow: hidden; background: #2a2a2a; }
.cp-viewer { display: block; width: 100%; height: 100%; min-height: 100%; background: #2a2a2a; }
.cp-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.cp-trim { fill: none; stroke: #e33; stroke-width: 3; vector-effect: non-scaling-stroke; }
.cp-safe { fill: none; stroke: #3a3; stroke-width: 3; stroke-dasharray: 12 8; vector-effect: non-scaling-stroke; }
.cp-amber { fill: var(--cg-amber); }
.cp-loupe { position: absolute; left: 24px; top: 24px; width: 220px; height: 220px; border-radius: 50%; overflow: hidden; box-shadow: 0 2px 14px rgba(0,0,0,0.55), 0 0 0 3px rgba(255,255,255,0.9); z-index: 5; cursor: grab; touch-action: none; background: var(--cg-paper); }
.cp-loupe[hidden] { display: none; }
.cp-loupe canvas { display: block; width: 100%; height: 100%; }
.cp-cal { display: grid; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; background: var(--surface-2); max-width: 520px; }
.cp-cal-hint { margin: 0; font-size: 0.86rem; color: var(--text-muted); }
.cp-cal-card { height: 54px; border: 2px solid var(--ink); border-radius: 6px; background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(0,0,0,0.05) 8px 16px); max-width: 100%; }
.cp-cal input[type="range"] { width: 100%; accent-color: var(--ink); }
.cp-wall { position: relative; width: 100%; overflow: hidden; background: #ddd; }
.cp-wall-room { position: absolute; left: 0; top: 0; width: 100%; max-width: none; display: block; }
.cp-wall-print { position: absolute; box-shadow: 0 6px 18px rgba(0,0,0,0.28), 0 1px 2px rgba(0,0,0,0.2); background: var(--cg-paper); }
.cp-wall-caption { position: absolute; left: 12px; bottom: 10px; margin: 0; font-size: 0.78rem; color: #fff; background: rgba(0,0,0,0.5); padding: 4px 8px; border-radius: var(--radius-pill); }

/* ==========================================================================
   Marketing pages (cl-*): landing, story pages, SEO pages
   ========================================================================== */
.cl-page { background: var(--surface); color: var(--ink); }
.cl-wrap { max-width: var(--content-w); margin: 0 auto; padding: 0 max(16px, 2vw); }
.cl-nav-link { font-size: 0.82rem; color: var(--text-muted); text-decoration: none; font-weight: 500; white-space: nowrap; }
.cl-section { padding: clamp(32px, 4.5vw, 80px) 0; border-top: 1px solid var(--border); }
.cl-section h2 { font-size: clamp(1.5rem, 2.2vw, 2.3rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 8px; }
.cl-section .cl-sub { color: var(--text-muted); font-size: clamp(0.95rem, 1.05vw, 1.1rem); line-height: 1.6; max-width: 64ch; margin: 0 0 clamp(20px, 2.5vw, 36px); }
.cl-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); margin: 0 0 12px; }
.cl-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; background: var(--ink); color: var(--surface); padding: 12px 26px; border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; font-size: 0.98rem; border: 0; font-family: inherit; cursor: pointer; transition: background 0.15s; }
.cl-cta:hover { background: var(--text); }
.cl-cta-note { color: var(--text-subtle); font-size: 0.82rem; margin: 10px 0 0; }
.cl-trust { color: var(--text-muted); font-size: 0.9rem; margin: 14px 0 0; }
.cl-season { margin: 12px 0 0; font-size: 0.86rem; color: #143d2b; background: #eef6f1; border-radius: var(--radius-sm); padding: 8px 12px; display: inline-block; }

/* hero: before (pile) / after (print on the wall) */
.cl-hero { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 72px); align-items: center; padding: clamp(28px, 4vw, 72px) 0 clamp(28px, 4vw, 56px); }
.cl-hero h1 { font-size: clamp(2rem, 3.4vw, 3.6rem); font-weight: 300; line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 16px; }
.cl-hero h1 strong { font-weight: 600; }
.cl-lead { color: var(--text-muted); font-size: clamp(1rem, 1.15vw, 1.25rem); line-height: 1.6; margin: 0 0 24px; max-width: 48ch; }
.cl-ba { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(10px, 1.4vw, 24px); align-items: end; }
.cl-ba-col { display: grid; gap: 8px; }
.cl-ba-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); margin: 0; text-align: center; }
.cl-pile { position: relative; aspect-ratio: 3 / 4; background: var(--surface-2); border-radius: var(--radius-lg); overflow: hidden; }
.cl-pile img { position: absolute; display: block; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border: 3px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.18); border-radius: 2px; }
.cl-room { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--surface-3); }
.cl-room img { width: 100%; height: auto; display: block; }
.cl-ba-caption { grid-column: 1 / -1; margin: 4px 0 0; font-size: 0.82rem; color: var(--text-subtle); text-align: center; }
@media (max-width: 1023px) {
  .cl-hero { grid-template-columns: 1fr; gap: 24px; padding-top: 20px; }
  .cl-hero h1 { font-size: clamp(1.8rem, 7vw, 2.6rem); }
}
@media (max-width: 560px) {
  .cl-ba { grid-template-columns: 1fr; }
  .cl-pile { aspect-ratio: 4 / 3; }
}

/* story page hero (example print large) */
.cl-example { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--surface-3); }
.cl-example img { width: 100%; height: auto; display: block; }
.cl-example-caption { margin: 8px 0 0; font-size: 0.82rem; color: var(--text-subtle); text-align: center; }

/* story cards */
.cl-stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 28px); }
.cl-story { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; background: var(--surface); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.cl-story:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cl-story.is-current { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.cl-story-img { aspect-ratio: 4 / 3; background: var(--surface-3); overflow: hidden; }
.cl-story-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-story-body { padding: 16px 18px 18px; display: grid; gap: 6px; }
.cl-story-body h3 { font-size: 1.2rem; font-weight: 600; margin: 0; }
.cl-story-body p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; margin: 0; }
.cl-story-sample { color: var(--cg-ink); background: var(--cg-paper); padding: 8px 12px; border-radius: var(--radius-sm); font-size: 1.05rem; text-align: center; margin: 4px 0; }
.cl-story-link { font-size: 0.86rem; font-weight: 600; color: var(--ink); }
@media (max-width: 860px) { .cl-stories { grid-template-columns: 1fr; } }

/* how we design it */
.cl-how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 32px); }
.cl-how article { border-top: 2px solid var(--ink); padding-top: 14px; }
.cl-how h3 { font-size: 1.02rem; font-weight: 600; margin: 0 0 6px; }
.cl-how p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; margin: 0; }
.cl-proof-note { margin: clamp(20px, 3vw, 40px) auto 0; max-width: var(--text-w); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 22px; background: var(--surface-2); }
.cl-proof-note h3 { font-size: 1rem; font-weight: 600; margin: 0 0 6px; }
.cl-proof-note p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; margin: 0; }
@media (max-width: 1023px) { .cl-how { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cl-how { grid-template-columns: 1fr; } }

/* sizes table + prices */
.cl-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cl-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 480px; }
.cl-table th, .cl-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.cl-table th { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.cl-table td:last-child, .cl-table th:last-child { text-align: right; }
.cl-table tbody tr:hover { background: var(--surface-2); }
.cl-table-note { color: var(--text-muted); font-size: 0.88rem; line-height: 1.5; margin: 14px 0 0; max-width: 70ch; }
.cl-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 28px); }
.cl-price { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 22px 24px; display: grid; gap: 6px; align-content: start; }
.cl-price.is-featured { border-color: var(--ink); }
.cl-price.is-muted { background: var(--surface-2); color: var(--text-muted); }
.cl-price h3 { font-size: 1.05rem; font-weight: 600; margin: 0; }
.cl-price-amount { font-size: clamp(1.6rem, 2.2vw, 2.2rem); font-weight: 300; letter-spacing: -0.02em; margin: 4px 0; }
.cl-price-amount small { font-size: 0.8rem; color: var(--text-subtle); font-weight: 500; margin-right: 6px; }
.cl-price p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; margin: 0; }
.cl-includes { margin: clamp(20px, 3vw, 36px) 0 0; }
.cl-includes h3 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); margin: 0 0 10px; }
.cl-includes ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.cl-includes li { position: relative; padding-left: 20px; font-size: 0.92rem; line-height: 1.5; color: var(--text); }
.cl-includes li::before { content: "✓"; position: absolute; left: 0; color: var(--cg-green); font-weight: 700; }
@media (max-width: 860px) { .cl-prices { grid-template-columns: 1fr; } .cl-includes ul { grid-template-columns: 1fr; } }

/* long-form sections (story / seo pages) */
.cl-prose { max-width: var(--text-w); margin: 0 auto; }
.cl-prose h2 { font-size: clamp(1.35rem, 1.9vw, 1.9rem); font-weight: 400; letter-spacing: -0.015em; margin: clamp(24px, 3vw, 40px) 0 10px; }
.cl-prose h2:first-child { margin-top: 0; }
.cl-prose p { color: var(--text); font-size: clamp(0.98rem, 1.08vw, 1.12rem); line-height: 1.7; margin: 0 0 14px; }

/* FAQ */
.cl-faq { max-width: var(--text-w); margin: 0 auto; }
.cl-faq details { border-bottom: 1px solid var(--border); padding: 4px 0; }
.cl-faq summary { cursor: pointer; font-weight: 600; font-size: 1rem; padding: 12px 28px 12px 0; position: relative; list-style: none; min-height: 44px; display: flex; align-items: center; }
.cl-faq summary::-webkit-details-marker { display: none; }
.cl-faq summary::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); color: var(--text-subtle); font-weight: 300; font-size: 1.3rem; }
.cl-faq details[open] summary::after { content: "–"; }
.cl-faq .cl-faq-a { color: var(--text-muted); font-size: 0.95rem; line-height: 1.65; padding: 0 0 16px; margin: 0; max-width: 72ch; }

/* waitlist / canvas notify / closing CTA */
.cl-waitlist { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 44px); text-align: center; }
.cl-waitlist h2 { margin-bottom: 6px; }
.cl-waitlist .cl-sub { margin: 0 auto 18px; }
.cl-waitlist-form { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; max-width: 520px; margin: 0 auto; }
.cl-waitlist-form input { flex: 1 1 240px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; font-size: 1rem; min-height: 48px; }
.cl-waitlist-msg { margin: 12px 0 0; font-size: 0.9rem; min-height: 1.3em; color: var(--text-muted); }
.cl-waitlist-msg.is-ok { color: var(--cg-green); }
.cl-waitlist-msg.is-err { color: var(--cg-red); }
.cl-closing { text-align: center; }
.cl-closing h2 { margin-bottom: 14px; }

/* sticky mobile CTA (appears once the hero scrolls away) */
.cl-sticky { display: none; }
@media (max-width: 1023px) {
  .cl-sticky { display: flex; position: fixed; left: 0; right: 0; bottom: var(--cg-consent-h, 0px); z-index: 60; padding: 10px max(12px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,0.96); backdrop-filter: blur(12px); border-top: 1px solid var(--border); transform: translateY(110%); transition: transform 0.2s ease; }
  .cl-sticky.is-on { transform: translateY(0); }
  .cl-sticky .cl-cta { flex: 1 1 auto; }
  .cl-page { padding-bottom: 72px; }
}

/* footer */
.cl-footer { border-top: 1px solid var(--border); margin-top: clamp(24px, 4vw, 56px); padding: clamp(24px, 3vw, 40px) 0; color: var(--text-subtle); font-size: 0.84rem; }
.cl-footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 24px; }
.cl-footer h4 { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); margin: 0 0 10px; }
.cl-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cl-footer a { color: var(--text-muted); text-decoration: none; min-height: 28px; display: inline-flex; align-items: center; }
@media (max-width: 1023px) { .cl-footer a { min-height: 44px; min-width: 44px; } .cl-footer ul { gap: 0; } }
.cl-footer a:hover { color: var(--ink); }
.cl-footer-brand { font-weight: 600; color: var(--ink); font-size: 1rem; margin: 0 0 4px; }
.cl-footer-copy { margin: 18px 0 0; font-size: 0.78rem; }
@media (max-width: 860px) { .cl-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .cl-footer-grid { grid-template-columns: 1fr; } }

/* Touch at desktop widths (QA mobile f1: iPad landscape 1024×768). The <1024 px blocks above size tap targets
   for phones only, so a 1024 px touch screen got 15 px header links, 36 px step buttons, 28 px cell tools and
   32 px checklist rows. Same 44 px minimums for any coarse pointer (SPEC §15.1 V4/V5); layout is unchanged. */
@media (pointer: coarse) and (min-width: 1024px) {
  .cg-header .logo { min-height: 44px; }
  .cg-header .cg-story-switch select { min-height: 44px; }
  .cg-header .cg-nav-link, .cg-header .lang-switch a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; box-sizing: border-box; }
  .cg-studio .btn, .cg-studio .btn-sm, .cg-seg button, .cg-link, .cg-steps button, .cg-sheet-close { min-height: 44px; }
  .cg-link { display: inline-flex; align-items: center; }
  .cg-check { min-height: 44px; }
  .cc-tool { width: 44px; height: 44px; font-size: 1rem; }
}