/* Kroki web app — mobile-first. Base styles target the phone; @media (min-width)
   layers add tablet (≥600) then desktop (≥1024). Tokens from shared/tokens.json.
   Neutrals do the layout; Vermillion is the only voice accent; the four colourways
   belong to the artwork, never to UI chrome. */

:root{
  /* brand constants (never re-themed) */
  --paper:#F4F1E9; --card:#FCFAF3; --chalk:#E8E4D8; --stone:#A19B8C;
  --warm-grey:#6E695E; --ink:#17150F; --vermillion:#D6491F; --ultramarine:#2E5FE0;
  --marigold:#F0A800; --frame-wood:#2A2722; --camera-bg:#131210;

  --f-display:'Young Serif',Georgia,"Iowan Old Style",serif;
  --f-ui:'Hanken Grotesk',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-mono:'Space Mono',ui-monospace,"SF Mono","Roboto Mono",Menlo,monospace;
  --f-hand:'Shantell Sans',"Bradley Hand","Segoe Print",var(--f-ui);

  --screen-x:20px; --radius:4px; --radius-lg:14px; --topbar-h:56px;
  --ease:cubic-bezier(.2,.7,.2,1); --spring:cubic-bezier(.34,1.32,.5,1);

  /* Semantic tokens — every component reads THESE, never a raw brand colour, so
     light and dark stay consistent by construction (this is what was broken). */
  --tokens-light: ;
}
/* LIGHT (default) */
:root, :root[data-theme="light"]{
  --bg:#F1EDE2; --surface:#FCFAF3; --surface-2:#FFFFFF; --well:#E9E4D7;
  --text:var(--ink); --text-2:var(--warm-grey); --text-3:#8F897B;
  --hairline:rgba(23,21,15,.10); --strong:rgba(23,21,15,.24); --line:rgba(23,21,15,.14);
  --btn-bg:var(--ink); --btn-fg:#F7F3EA; --btn-press:#322E27;
  --accent:var(--vermillion); --accent-fg:#FCFAF3; --ring:var(--ultramarine);
  --shadow-sm:0 1px 2px rgba(23,21,15,.05), 0 2px 6px rgba(23,21,15,.05);
  --shadow-md:0 6px 22px rgba(23,21,15,.10), 0 1px 3px rgba(23,21,15,.06);
  --shadow-lg:0 22px 50px rgba(23,21,15,.20), 0 4px 12px rgba(23,21,15,.10);
  --glass:color-mix(in srgb, var(--bg) 82%, transparent);
  /* legacy aliases */
  --shadow-card:var(--shadow-md); --shadow-print:var(--shadow-lg);
}
/* DARK — warm near-black, never a flat pure black */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#141210; --surface:#211E19; --surface-2:#282420; --well:#211E18;
  --text:#F2EEE4; --text-2:#C7C1B2; --text-3:#938C7C;
  --hairline:rgba(244,241,233,.12); --strong:rgba(244,241,233,.30); --line:rgba(244,241,233,.16);
  --btn-bg:#F2EEE4; --btn-fg:var(--ink); --btn-press:#DCD6C8;
  --accent:#E7623B; --accent-fg:#1B1712; --ring:#7CA0F0;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 8px 26px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
  --shadow-lg:0 26px 54px rgba(0,0,0,.62), 0 6px 14px rgba(0,0,0,.5);
  --glass:color-mix(in srgb, var(--bg) 78%, transparent);
  --shadow-card:var(--shadow-md); --shadow-print:var(--shadow-lg);
}}
:root[data-theme="dark"]{
  --bg:#141210; --surface:#211E19; --surface-2:#282420; --well:#211E18;
  --text:#F2EEE4; --text-2:#C7C1B2; --text-3:#938C7C;
  --hairline:rgba(244,241,233,.12); --strong:rgba(244,241,233,.30); --line:rgba(244,241,233,.16);
  --btn-bg:#F2EEE4; --btn-fg:var(--ink); --btn-press:#DCD6C8;
  --accent:#E7623B; --accent-fg:#1B1712; --ring:#7CA0F0;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 8px 26px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
  --shadow-lg:0 26px 54px rgba(0,0,0,.62), 0 6px 14px rgba(0,0,0,.5);
  --glass:color-mix(in srgb, var(--bg) 78%, transparent);
  --shadow-card:var(--shadow-md); --shadow-print:var(--shadow-lg);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--f-ui);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
img,svg{max-width:100%; display:block;}
a{color:inherit;}
button{font:inherit; cursor:pointer;}
h1,h2,h3{font-family:var(--f-display); font-weight:400; letter-spacing:-.01em; margin:0;}

/* ── App shell ─────────────────────────────────────────────────────────────── */
#app{min-height:100dvh; display:flex; flex-direction:column;}
.screen{flex:1; padding:calc(var(--topbar-h) + 12px) var(--screen-x) 96px; max-width:640px; margin:0 auto; width:100%;}
.screen.wide{max-width:960px;}
.screen.narrow{max-width:520px;}

/* ── Top bar ───────────────────────────────────────────────────────────────── */
.topbar{position:fixed; top:0; left:0; right:0; height:var(--topbar-h); z-index:30;
  display:grid; grid-template-columns:44px 1fr 44px; align-items:center; gap:8px;
  padding:0 12px; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--hairline);}
.tb-wordmark{font-family:var(--f-display); font-size:22px; padding-left:8px;}
.tb-title{text-align:center; font-size:14px; font-weight:600; color:var(--text-2);}
.tb-back{width:44px; height:44px; display:grid; place-items:center; background:none;
  border:none; color:var(--text); border-radius:var(--radius);}
.tb-back:active{background:var(--well);}
.tb-trailing{display:flex; justify-content:flex-end; align-items:center;}

/* ── Type roles ────────────────────────────────────────────────────────────── */
.eyebrow{font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); margin:0 0 12px;}
.eyebrow.muted{color:var(--text-3);}
.meta{font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-3); margin:0;}
.screen-title{font-size:29px; line-height:1.12; text-wrap:balance; margin:0 0 6px;}
.lede{font-size:17px; color:var(--text-2); margin:0 0 18px;}
.hand{font-family:var(--f-hand);}

/* ── Buttons — one consistent, theme-aware system with real states ───────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-ui); font-size:15px; font-weight:600; letter-spacing:.005em;
  padding:15px 26px; border-radius:var(--radius); border:1px solid transparent;
  background:var(--btn-bg); color:var(--btn-fg); text-decoration:none;
  box-shadow:var(--shadow-sm); cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform .14s var(--spring), box-shadow .22s var(--ease),
             background .18s var(--ease), border-color .18s var(--ease), opacity .2s;}
.btn:hover{background:var(--btn-press); box-shadow:var(--shadow-md);}
.btn:active{transform:scale(.975); box-shadow:var(--shadow-sm);}
.btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--ring);}
.btn.block{width:100%;}
.btn.ghost{background:transparent; color:var(--text); border-color:var(--strong); box-shadow:none;}
.btn.ghost:hover{background:color-mix(in srgb, var(--text) 6%, transparent); border-color:var(--text); box-shadow:none;}
.btn.accent{background:var(--accent); color:var(--accent-fg);}
.btn.accent:hover{background:var(--accent); filter:brightness(1.06);}
.btn:disabled{opacity:.42; pointer-events:none; box-shadow:none;}
/* trailing arrow that nudges on hover — a subtle "go" cue for primary CTAs */
.btn .arrow{transition:transform .2s var(--ease);}
.btn:hover .arrow{transform:translateX(3px);}

/* Sticky bottom action bar (mobile primary CTAs) */
.action-bar{position:fixed; left:0; right:0; bottom:0; z-index:25;
  padding:12px var(--screen-x) calc(12px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(8px); border-top:1px solid var(--hairline);
  display:flex; gap:10px; align-items:center;}
.action-bar .btn{flex:1;}
.action-bar .price{font-family:var(--f-mono); font-size:15px; white-space:nowrap;}

/* ── Grids: mobile 2-up, tablet 3, desktop 4 ───────────────────────────────── */
.grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:12px;}

/* Tiles (previews / gallery cells) */
.tile{display:flex; flex-direction:column; gap:8px; text-align:center; background:none; border:none; padding:0;}
.tile-inner{position:relative; aspect-ratio:1 / 1.05; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--hairline); box-shadow:var(--shadow-card); background:var(--surface);
  display:flex; align-items:center; justify-content:center;}
.tile-img{width:100%; height:100%; object-fit:cover;}
.tile-bird{width:74%; height:auto;}
.tile-hand{position:absolute; bottom:8px; left:0; right:0; font-family:var(--f-hand);
  font-size:15px; color:var(--ink);}
.tile-name{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tile.disabled{opacity:.9; pointer-events:none;}
.tile-blocked{background:var(--well); flex-direction:column; gap:6px;}
.tile-blocked-label{font-family:var(--f-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);}
.tile-add .tile-inner{border:1.5px dashed var(--strong); box-shadow:none; background:transparent; color:var(--warm-grey);}

/* Shimmer */
.shimmer{position:relative; overflow:hidden; background:var(--well);}
.shimmer::after{content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.35) 50%, transparent 80%);
  transform:translateX(-100%); animation:shimmer 1.3s infinite;}
@keyframes shimmer{to{transform:translateX(100%);}}
@media (prefers-color-scheme:dark){ .shimmer::after{background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.08) 50%, transparent 80%);} }

/* ── Framed artwork ────────────────────────────────────────────────────────── */
.fa{background:var(--frame-wood); padding:3.5%; border-radius:2px; box-shadow:var(--shadow-print);
  width:100%; max-width:340px; margin:0 auto;}
.fa.flat{background:transparent; padding:0; box-shadow:var(--shadow-card);}
.fa.tilt{transform:rotate(1.2deg);}
/* Frame + passepartout are proportional (percent, not fixed px) so the framed preview keeps
   the same look at every size — the large piece/room preview AND the small checkout thumbnail.
   Fixed px made the mount dwarf the image on the 96px checkout thumb. */
.fa-mount{background:var(--card); padding:7%; box-shadow:inset 0 0 0 1px rgba(23,21,15,.06);}
.fa.flat .fa-mount{padding:0; background:transparent; box-shadow:none;}
.fa-art{aspect-ratio:1 / 1.05; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--card);}
.fa-art img{width:100%; height:100%; object-fit:cover;}
/* fit mode: the whole image on the paper white (a larger passepartout) */
.fa-art--fit img{object-fit:contain;}

/* ── Wall label / credit lockup ────────────────────────────────────────────── */
.wall-label{background:var(--card); color:var(--ink); border:1px solid rgba(23,21,15,.18);
  padding:14px 18px; width:160px; box-shadow:var(--shadow-card); transform:rotate(-2deg);}
.wl-title{font-family:var(--f-mono); font-size:12px;}
.wl-rule{height:1px; width:20px; background:var(--ink); margin:9px 0;}
.wl-by{font-family:var(--f-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--warm-grey);}

/* ── Colourway row ─────────────────────────────────────────────────────────── */
.cw-row{display:flex; gap:14px; align-items:center; padding:4px 0;}
.cw-dot{width:30px; height:30px; border-radius:50%; border:none; padding:0;}
.cw-dot.sel{outline:2px solid var(--text); outline-offset:3px;}

/* ── Forms ─────────────────────────────────────────────────────────────────── */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.field label{font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);}
.field input, .field textarea, .field select{font:inherit; font-size:16px; padding:13px 14px;
  border-radius:var(--radius); border:1px solid var(--strong); background:var(--surface); color:var(--text); width:100%;}
.field input:focus, .field textarea:focus{outline:2px solid var(--ultramarine); outline-offset:1px;}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}

/* Option chips (size / frame / mount) */
.opt-group{margin:18px 0;}
.opt-group > .meta{margin-bottom:10px;}
.opt-row{display:flex; gap:10px; flex-wrap:wrap;}
.opt{flex:1 1 auto; min-width:84px; text-align:center; padding:12px 10px; border-radius:var(--radius);
  border:1px solid var(--strong); background:var(--surface); color:var(--text); font-size:14px;}
.opt.sel{background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-bg); box-shadow:var(--shadow-sm);}
.opt .opt-price{font-family:var(--f-mono); font-size:11px; display:block; margin-top:3px; opacity:.85;}
.swatch-opt{display:flex; align-items:center; gap:8px; justify-content:center;}
.swatch-chip{width:16px; height:16px; border-radius:50%; border:1px solid var(--strong);}
/* Real product-photo swatch (frame corner / mount board) — a larger rounded square reads better. */
.swatch-chip--img{width:28px; height:28px; border-radius:7px; background-size:cover; background-position:center;}
/* "The craft" strip — real Prodigi photography that makes the quality tangible. */
.craft{margin-top:2px;}
.craft-row{display:flex; gap:12px; overflow-x:auto; padding:10px 0 4px; -webkit-overflow-scrolling:touch;}
.craft-card{flex:none; width:164px;}
.craft-img{width:164px; height:118px; border-radius:var(--radius); background-size:cover; background-position:center;
  border:1px solid rgba(23,21,15,.12);}
.craft-title{font-family:var(--f-ui); font-weight:600; font-size:13px; color:var(--ink); margin-top:8px;}
.craft-line{font-size:11px; color:var(--warm-grey); line-height:1.4; margin-top:2px;}
.craft-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px;}
.craft-more{font-family:var(--f-mono); font-size:11px; letter-spacing:.05em; color:var(--vermillion);
  background:none; border:none; cursor:pointer; padding:0;}
.craft-card{flex:none; width:164px; background:none; border:none; padding:0; margin:0; cursor:pointer; text-align:left; font:inherit;}
.craft-card:active{transform:scale(.98);}
/* Full-screen "The craft" showcase — a light, scrollable page of large material photography. */
.craft-detail{position:fixed; inset:0; z-index:95; background:var(--paper); display:block;
  overflow-y:auto; -webkit-overflow-scrolling:touch; animation:zoomIn .26s var(--ease) both;}
.craft-detail .zoom-close{color:var(--ink); background:var(--card); border-color:rgba(23,21,15,.15);}
.craft-detail .zoom-close:hover{background:var(--card);}
.craft-detail-body{max-width:640px; margin:0 auto; padding:64px 20px 96px; display:flex; flex-direction:column; gap:38px;}
.craft-detail-head{display:flex; flex-direction:column; gap:8px;}
.craft-detail-sec{display:flex; flex-direction:column; gap:12px;}
.craft-detail-img{width:100%; aspect-ratio:4 / 3; border-radius:var(--radius); background-size:cover;
  background-position:center; border:1px solid rgba(23,21,15,.12); box-shadow:var(--shadow-card);}
.craft-detail-title{font-family:var(--f-display); font-size:24px; color:var(--ink); margin:0;}
.craft-detail-text{font-size:15px; line-height:1.55; color:var(--warm-grey); margin:0;}
.craft-cert{display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border-radius:var(--radius);
  background:var(--card); border:1px solid rgba(23,21,15,.12);}
.craft-cert-ico{color:var(--vermillion); font-size:20px; line-height:1;}
.craft-cert-title{font-family:var(--f-ui); font-weight:600; font-size:14px; color:var(--ink);}
.craft-cert-text{font-size:12px; color:var(--warm-grey); margin:3px 0 0; line-height:1.45;}

/* ── Cards / wells ─────────────────────────────────────────────────────────── */
.well{background:var(--well); border:1px solid var(--hairline); border-radius:var(--radius); padding:20px;}
.card{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius); padding:18px;}
.spec{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); line-height:1.7;}

/* ── Order tracking row ────────────────────────────────────────────────────── */
.track-row{display:flex; align-items:center; gap:12px; padding:12px; background:var(--surface);
  border:1px solid var(--hairline);}
.track-dot{width:8px; height:8px; border-radius:50%; background:var(--vermillion); flex:none;}
.track-dot.done{background:#6FA544;}

/* ── Home hero (compact, app entry) ────────────────────────────────────────── */
.home-hero{padding-top:calc(var(--topbar-h) + 20px);}
.home-hero .eyebrow{margin-bottom:14px;}
.home-hero h1{font-size:40px; line-height:1.05; margin:0 0 16px; text-wrap:balance;}
.home-hero .lede{max-width:34ch;}
.home-poster{margin:28px auto 0; position:relative; max-width:300px;}
.poster-bird{width:78%; height:auto;}

/* ── Consent sheet (modal) ─────────────────────────────────────────────────── */
.overlay{position:fixed; inset:0; z-index:50; background:rgba(23,21,15,.5);
  display:flex; align-items:flex-end; justify-content:center;}
.sheet{background:var(--bg); width:100%; max-width:560px; border-radius:16px 16px 0 0;
  padding:26px var(--screen-x) calc(26px + env(safe-area-inset-bottom)); max-height:92dvh; overflow:auto;
  box-shadow:0 -8px 40px rgba(0,0,0,.3);}
.sheet h2{font-size:24px; margin:0 0 12px;}
.consent-list{list-style:none; margin:16px 0; padding:0; display:flex; flex-direction:column; gap:12px;}
.consent-list li{display:flex; gap:10px; font-size:14.5px; color:var(--text-2);}
.consent-list b{color:var(--text); font-weight:600;}
.check-row{display:flex; gap:10px; align-items:flex-start; margin:14px 0; font-size:14px;}
.check-row input{margin-top:3px; width:18px; height:18px;}

/* ── Capture ───────────────────────────────────────────────────────────────── */
.capture{min-height:100dvh; background:var(--camera-bg); color:var(--paper);
  display:flex; flex-direction:column; padding:24px var(--screen-x) calc(24px + env(safe-area-inset-bottom));}
/* On phones the content column simply fills the stage; on tablet/desktop it is capped +
   centred (see the ≥600 block) so the dark stage doesn't stretch the dropzone edge-to-edge. */
.capture-inner{flex:1; width:100%; display:flex; flex-direction:column;}
.dropzone{flex:1; border:2px dashed rgba(244,241,233,.3); border-radius:18px; margin:16px 0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px;}
.dropzone.drag{border-color:var(--marigold); background:rgba(240,168,0,.06);}
.capture .meta{color:rgba(244,241,233,.7);}

/* ── The Piece (room visualization) ────────────────────────────────────────── */
/* The framed piece composited onto a real room photo, entirely on-device. The room
   is a fixed-aspect stage (4:3, matching the bundled photos); the photo fills it and
   the frame is absolutely positioned over the wall per ROOM_RECT in data/rooms.js. */
.room{position:relative; border-radius:var(--radius); overflow:hidden; background:var(--well);
  box-shadow:var(--shadow-card);}
.room-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
/* Frame wrapper: centred at ROOM_RECT.centerX/centerY (set inline), width tuned so the
   frame height ≈ 0.34 × room-image-height (see rooms.js derivation). */
.room-frame{position:absolute; width:24.5%; transform:translate(-50%, -50%);
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.4)); transition:left .2s var(--ease), top .2s var(--ease);}
/* Make the frame fully self-similar at any size: percentage paddings scale with the
   frame's own width, so the frame stays proportional as the room photo scales. */
.room-frame .fa{width:100%; max-width:none; margin:0; padding:3.5%; border-radius:1px;
  box-shadow:none;}
.room-frame .fa-mount{padding:7%;}
.room-strip{display:flex; gap:10px; overflow-x:auto; padding:12px 0 6px; -webkit-overflow-scrolling:touch;}
.room-chip{flex:none; padding:8px 14px; border-radius:20px; border:1px solid var(--strong);
  background:var(--surface); font-size:13px; white-space:nowrap;}
.room-chip.sel{background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-bg); box-shadow:var(--shadow-sm);}

/* "See it on your wall" affordance (web degrades to a note; true AR is the iOS app). */
.wall-ar{display:flex; align-items:flex-start; gap:12px; margin-top:16px; padding:14px 16px;
  border:1px solid var(--hairline); border-radius:var(--radius); background:var(--well);}
.wall-ar-ico{flex:none; font-size:18px; line-height:1.3; color:var(--vermillion);}
.wall-ar-title{font-size:14px; font-weight:600;}
.wall-ar-sub{font-size:13px; color:var(--muted); margin-top:2px; line-height:1.45;}

/* ── Marketing sections (first-time home, below the fold) ───────────────────── */
.mkt{border-top:1px solid var(--hairline); padding:56px 0;}
.mkt h2{font-size:30px; margin:0 0 8px; text-wrap:balance;}
.mkt-steps{display:grid; grid-template-columns:1fr; gap:14px; margin-top:24px;}
.mkt-step{background:var(--well); border:1px solid var(--hairline); border-radius:var(--radius); padding:22px;}
.mkt-step .num{font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--vermillion);}

/* ── Toast ─────────────────────────────────────────────────────────────────── */
.toast{position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(10px);
  background:var(--btn-bg); color:var(--btn-fg); padding:12px 18px; border-radius:22px; font-size:14px; z-index:60;
  box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; max-width:90vw;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ── Spinner ───────────────────────────────────────────────────────────────── */
.spinner{width:22px; height:22px; border-radius:50%; border:2px solid var(--strong); border-top-color:var(--text);
  animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── Wait interstitial ("the magic is happening") ──────────────────────────────
   A full-screen dark stage over the Atelier while the twelve editions render. The
   merel bird bobs gently; the status line rotates; a fade lifts it to reveal the grid. */
.wait-overlay{position:fixed; inset:0; z-index:80; background:var(--camera-bg);
  display:flex; align-items:center; justify-content:center; padding:24px;
  animation:vt-in .4s var(--ease) both;}
.wait-overlay.leaving{animation:waitLeave .52s var(--ease) both;}
@keyframes waitLeave{to{opacity:0; transform:scale(1.015);}}
.wait-inner{max-width:340px; width:100%; text-align:center; color:var(--paper);}
.wait-inner .eyebrow{color:rgba(244,241,233,.62);}
.wait-anim{width:150px; height:auto; margin:0 auto 26px; transform-origin:center bottom;
  animation:waitBob 3.4s ease-in-out infinite;}
/* birdSVG() returns the bare <svg> (its class is dropped), so target the svg directly. */
.wait-anim svg{width:100%; height:auto; filter:drop-shadow(0 6px 16px rgba(0,0,0,.4));}
@keyframes waitBob{0%,100%{transform:translateY(0) rotate(-1.6deg);} 50%{transform:translateY(-10px) rotate(1.6deg);}}
.wait-title{color:var(--paper); font-size:30px; line-height:1.15; margin:2px 0 14px;}
.wait-line{font-size:17px; color:rgba(244,241,233,.86); min-height:1.6em; margin:0 0 24px;
  transition:opacity .22s var(--ease);}
.wait-bar{height:4px; max-width:240px; margin:0 auto 12px; border-radius:4px;
  background:rgba(244,241,233,.16); overflow:hidden;}
.wait-bar-fill{height:100%; border-radius:4px; background:var(--paper);
  transform:scaleX(.04); transform-origin:left; transition:transform .6s var(--ease);}
.wait-meta{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(244,241,233,.6); margin:0;}
@media (prefers-reduced-motion:reduce){ .wait-anim{animation:none;} }

/* ── Merel's Flight — the wait mini-game (waitGame.js) ──────────────────────────
   The game takes over the whole overlay: a full-bleed canvas draws the warm sky,
   the ornate frames + the merel; two small DOM affordances (Skip + a round-end card)
   sit on top for accessible buttons. Calm, premium, never arcade-garish. */
.wait-overlay--game{padding:0; display:block; background:var(--paper);}
.wg-canvas{position:absolute; inset:0; width:100%; height:100%; display:block;
  touch-action:none; -webkit-tap-highlight-color:transparent;}
/* Quiet, low-emphasis Skip — always available, never shouts. */
.wg-skip{position:absolute; top:calc(env(safe-area-inset-top,0px) + 14px); right:14px; z-index:3;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--warm-grey); background:rgba(252,250,243,.72); border:1px solid rgba(23,21,15,.12);
  border-radius:999px; padding:7px 13px; cursor:pointer; backdrop-filter:blur(6px);
  transition:color .2s var(--ease), background .2s var(--ease);}
.wg-skip:hover{color:var(--ink); background:rgba(252,250,243,.92);}
/* Round-end card — "so close" retry, or the "gallery is ready" reveal. */
.wg-card-layer{position:absolute; inset:0; z-index:2; display:flex; align-items:center;
  justify-content:center; padding:24px; pointer-events:none;}
.wg-card{pointer-events:auto; text-align:center; background:var(--card); color:var(--ink);
  border:1px solid rgba(23,21,15,.12); border-radius:var(--radius-lg); padding:26px 30px;
  box-shadow:var(--shadow-lg); max-width:300px; width:100%;
  animation:wgCardIn .34s var(--spring) both;}
@keyframes wgCardIn{from{opacity:0; transform:translateY(10px) scale(.96);} to{opacity:1; transform:none;}}
.wg-card-eyebrow{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--vermillion); margin:0 0 8px;}
.wg-card-title{font-family:var(--f-display); font-size:24px; line-height:1.15; margin:0;}
.wg-card-sub{font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--warm-grey); margin:10px 0 0;}
.wg-card-hint{font-size:14px; color:var(--warm-grey); margin:14px 0 0;}
.wg-card-btn{margin-top:18px; font-family:var(--f-ui); font-size:15px; font-weight:600;
  background:var(--btn-bg); color:var(--btn-fg); border:none; border-radius:var(--radius);
  padding:12px 22px; cursor:pointer; transition:background .2s var(--ease);}
.wg-card-btn:hover{background:var(--btn-press);}

/* ── Wait-screen dock: time-expectation + optional "add the details" (feature #2) ──
   A calm, honest time hint sits near the render status; a quiet "✍️ Add the details"
   toggle opens a small card (thumbnail + maker name + title) the user can fill WHILE
   the twelve render. Never blocks the reveal — the game stays the default. */
.wait-dock{margin-top:22px; display:flex; flex-direction:column; align-items:center; gap:12px; width:100%;}
.wait-timehint{font-size:13px; line-height:1.5; color:rgba(244,241,233,.72); margin:0; max-width:34ch; text-align:center;}
.wait-details-toggle{font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(244,241,233,.92); background:rgba(244,241,233,.08); border:1px solid rgba(244,241,233,.24);
  border-radius:999px; padding:9px 16px; cursor:pointer; transition:background .18s var(--ease);}
.wait-details-toggle:hover{background:rgba(244,241,233,.15);}
/* Floating over the game (the light paper overlay). The dock lets taps pass through to
   the playfield except on its own controls, so the game stays fully playable. */
.wait-dock--float{position:absolute; left:0; right:0; bottom:calc(env(safe-area-inset-bottom,0px) + 30px);
  z-index:2; margin-top:0; padding:0 16px; pointer-events:none;}
.wait-dock--float > *{pointer-events:auto;}
.wait-dock--float .wait-timehint{color:var(--warm-grey); background:rgba(252,250,243,.80); border:1px solid rgba(23,21,15,.10);
  border-radius:999px; padding:7px 14px; backdrop-filter:blur(6px); box-shadow:var(--shadow-sm); max-width:32ch;}
.wait-dock--float .wait-details-toggle{color:var(--ink); background:rgba(252,250,243,.88);
  border:1px solid rgba(23,21,15,.14); backdrop-filter:blur(6px);}
.wait-dock--float .wait-details-toggle:hover{background:var(--card);}
/* The editor card — reads well on either overlay (mirrors the round-end card). */
.wait-details{width:100%; max-width:340px; text-align:left; background:var(--card); color:var(--ink);
  border:1px solid rgba(23,21,15,.12); border-radius:var(--radius-lg); padding:16px 18px;
  box-shadow:var(--shadow-lg); animation:wgCardIn .3s var(--spring) both;}
.wait-details[hidden]{display:none;}
.wait-details-head{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.wait-details-thumb{width:52px; height:52px; border-radius:var(--radius); object-fit:cover; flex:none;
  box-shadow:0 2px 8px rgba(23,21,15,.16);}
.wait-details-intro{min-width:0;}
.wait-details-intro .eyebrow{color:var(--vermillion); margin:0 0 3px;}
.wait-details-sub{font-size:12.5px; color:var(--warm-grey); margin:0; line-height:1.4;}
.wait-details .field{margin-bottom:10px;}
/* Force a light field + dark ink text so the title/maker inputs are always legible, whatever
   the ambient --surface/--text tokens are (the details card is light in every context). */
.wait-details .field input{background:var(--paper); color:var(--ink);}
.wait-details-save{width:100%; margin-top:4px; font-family:var(--f-ui); font-size:14px; font-weight:600;
  background:var(--btn-bg); color:var(--btn-fg); border:none; border-radius:var(--radius);
  padding:11px 18px; cursor:pointer; transition:background .18s var(--ease);}
.wait-details-save:hover{background:var(--btn-press);}
.wait-details-save:disabled{opacity:.6; cursor:default;}
.wait-details-status{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.06em; color:var(--warm-grey);
  min-height:1.4em; margin:8px 0 0; text-align:center;}

/* ── Fullscreen zoom + select on the twelve-style grid (feature #3) ──────────────
   Tapping a ready edition opens a large, dark-backdrop look: the styled image framed,
   its name + blurb, paging arrows between ready editions, and a bottom bar to proceed.
   "Select this" advances to the Piece. Escape / ✕ / backdrop close; arrows page. */
.zoom{position:fixed; inset:0; z-index:90; background:rgba(19,18,16,.94);
  display:flex; flex-direction:column; animation:zoomIn .26s var(--ease) both;
  -webkit-tap-highlight-color:transparent;}
@keyframes zoomIn{from{opacity:0;} to{opacity:1;}}
.zoom-body{flex:1; min-height:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:16px; padding:60px 20px 14px; animation:zoomRise .3s var(--ease) both;}
@keyframes zoomRise{from{opacity:0; transform:translateY(10px) scale(.98);} to{opacity:1; transform:none;}}
.zoom-stage{display:flex; align-items:center; justify-content:center; width:100%; max-width:min(88vw, 460px);}
.zoom-stage .fa{width:100%; max-width:100%;}
.zoom-caption{text-align:center; color:var(--paper); max-width:38ch;}
.zoom-caption .eyebrow{color:rgba(244,241,233,.6);}
.zoom-name{font-family:var(--f-display); font-size:28px; line-height:1.12; color:var(--paper); margin:6px 0 7px;}
.zoom-blurb{font-size:15px; line-height:1.5; color:rgba(244,241,233,.82); margin:0;}
/* Single-style reveal: Merel's Flight fills the body; a small header sits above it. */
.reveal-head{text-align:center; flex:none;}
.reveal-head .eyebrow{color:rgba(244,241,233,.6);}
.reveal-head .zoom-blurb{color:rgba(244,241,233,.72); margin-top:4px;}
.reveal-game{position:relative; width:100%; max-width:min(92vw,520px); flex:1 1 auto;
  min-height:min(46vh,380px); border-radius:var(--radius); overflow:hidden; background:var(--paper);
  box-shadow:var(--shadow-sm);}
.zoom-close{position:absolute; top:calc(env(safe-area-inset-top,0px) + 14px); right:14px; z-index:2;
  width:40px; height:40px; display:grid; place-items:center; font-size:18px; line-height:1;
  color:var(--paper); background:rgba(244,241,233,.12); border:1px solid rgba(244,241,233,.2);
  border-radius:999px; cursor:pointer; transition:background .18s var(--ease);}
.zoom-close:hover{background:rgba(244,241,233,.22);}
.zoom-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; display:grid; place-items:center; font-size:26px; line-height:1;
  color:var(--paper); background:rgba(244,241,233,.10); border:1px solid rgba(244,241,233,.18);
  border-radius:999px; cursor:pointer; transition:background .18s var(--ease);}
.zoom-nav:hover{background:rgba(244,241,233,.2);}
.zoom-prev{left:12px;} .zoom-next{right:12px;}
.zoom-bar{flex:none; display:flex; align-items:center; gap:14px;
  padding:14px 20px calc(env(safe-area-inset-bottom,0px) + 16px);
  background:rgba(19,18,16,.55); border-top:1px solid rgba(244,241,233,.12); backdrop-filter:blur(6px);}
.zoom-count{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:rgba(244,241,233,.72); white-space:nowrap;}
.zoom-bar .btn{flex:1; max-width:340px; margin-left:auto;}
/* Two-action reveal bar (Choose another style · Frame this): center the pair, no right-clump. */
.zoom-bar.duo{justify-content:center;}
.zoom-bar.duo .btn{margin-left:0;}
.zoom-close:focus-visible, .zoom-nav:focus-visible, .zoom-bar .btn:focus-visible{
  outline:2px solid var(--ring); outline-offset:2px;}
@media (min-width:600px){
  .zoom-stage{max-width:min(70vw, 440px);}
  .zoom-name{font-size:32px;}
  .zoom-prev{left:24px;} .zoom-next{right:24px;}
}

/* ── Utilities ─────────────────────────────────────────────────────────────── */
.stack{display:flex; flex-direction:column; gap:18px;}
.center{text-align:center;}
.muted{color:var(--text-2);}
.hide{display:none !important;}
.spacer{flex:1;}

/* ══ TABLET (≥600) ══════════════════════════════════════════════════════════ */
@media (min-width:600px){
  :root{--screen-x:32px; --topbar-h:60px;}
  .grid{grid-template-columns:repeat(3, 1fr); gap:14px;}
  .home-hero h1{font-size:52px;}
  .screen-title{font-size:34px;}
  .btn.auto-wide{width:auto;}
  .mkt-steps{grid-template-columns:repeat(3, 1fr);}
  .fa{max-width:400px;}
  /* On tablet the primary CTA can live inline rather than a fixed bar for reading screens */
  .action-bar.inline-tablet{position:static; border:none; background:none; backdrop-filter:none; padding:24px 0 0;}
  /* Capture stage ("Try now"): keep the dark stage full-bleed, but centre its content column
     (a focused card) instead of stretching the dropzone + buttons edge-to-edge on iPad/desktop. */
  .capture{justify-content:center; padding-top:calc(var(--topbar-h) + 24px);}
  .capture-inner{flex:0 1 auto; max-width:600px; margin:0 auto;}
  .capture-inner .dropzone{flex:0 0 auto; height:min(48vh, 440px);}
  .capture-inner .spacer{display:none;}
}

/* ══ DESKTOP (≥1024) ════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  :root{--screen-x:40px;}
  .screen{max-width:680px; padding-bottom:64px;}
  .screen.wide{max-width:1040px;}
  .grid{grid-template-columns:repeat(4, 1fr); gap:16px;}
  .home-hero{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; max-width:1040px;}
  .home-hero h1{font-size:60px;}
  .home-poster{margin-top:0; max-width:340px;}
  /* Two-column layout for the Piece + Order on desktop (preview left, controls right) */
  .split{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;}
  .split .sticky{position:sticky; top:calc(var(--topbar-h) + 24px);}
}

/* ── Style example gallery ─────────────────────────────────────────────────── */
.style-ex{aspect-ratio:1 / 1; border-radius:var(--radius); border:1px solid var(--hairline);
  box-shadow:var(--shadow-card); display:flex; align-items:center; justify-content:center;}
.style-ex .ex-bird{width:66%; height:auto; position:relative; z-index:2;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.18));}
.style-ex .ex-layer{pointer-events:none;}
.style-ex-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; margin-top:24px;}
.style-ex-card{margin:0; display:flex; flex-direction:column; gap:10px;}
.style-ex-name{font-family:var(--f-display); font-size:18px; line-height:1.2;}
.style-ex-blurb{color:var(--text-2); font-size:13.5px; line-height:1.5; margin:6px 0 0;}
/* Compact preview strip (e.g. on the home page): a horizontal scroller of swatches */
.style-strip{display:flex; gap:12px; overflow-x:auto; padding:4px 0 8px; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;}
.style-strip .style-ex-card{flex:0 0 44%; max-width:180px; scroll-snap-align:start;}
@media (min-width:600px){
  .style-ex-grid{grid-template-columns:repeat(3, 1fr); gap:18px;}
  .style-strip .style-ex-card{flex-basis:200px;}
}
@media (min-width:1024px){
  .style-ex-grid{grid-template-columns:repeat(4, 1fr); gap:20px;}
}

/* ══ Motion & micro-interactions ════════════════════════════════════════════ */
/* Cross-screen transition via the View Transitions API (router wraps renders). */
@keyframes vt-in{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
@keyframes vt-out{from{opacity:1;} to{opacity:0;}}
::view-transition-old(root){animation:vt-out .18s var(--ease) both;}
::view-transition-new(root){animation:vt-in .34s var(--ease) both;}

/* Grid cells rise + fade in with a gentle stagger (atelier, gallery, styles). */
@keyframes rise{from{opacity:0; transform:translateY(12px) scale(.985);} to{opacity:1; transform:none;}}
.grid > *, .style-ex-grid > *{animation:rise .52s var(--ease) both;}
.grid > *:nth-child(1),.style-ex-grid > *:nth-child(1){animation-delay:.02s;}
.grid > *:nth-child(2),.style-ex-grid > *:nth-child(2){animation-delay:.07s;}
.grid > *:nth-child(3),.style-ex-grid > *:nth-child(3){animation-delay:.12s;}
.grid > *:nth-child(4),.style-ex-grid > *:nth-child(4){animation-delay:.17s;}
.grid > *:nth-child(5),.style-ex-grid > *:nth-child(5){animation-delay:.22s;}
.grid > *:nth-child(6),.style-ex-grid > *:nth-child(6){animation-delay:.27s;}
.grid > *:nth-child(n+7),.style-ex-grid > *:nth-child(n+7){animation-delay:.32s;}

/* The Piece: the framed artwork makes an entrance — a small ceremony. */
@keyframes framedReveal{from{opacity:0; transform:scale(.9) translateY(14px);} to{opacity:1; transform:none;}}
#app[data-route="piece"] .fa, #app[data-route="confirmation"] .fa{
  animation:framedReveal .62s var(--spring) both; animation-delay:.08s;}

/* Tiles + chips: tactile press feedback. */
.tile{transition:transform .16s var(--spring);}
.tile:active{transform:scale(.97);}
.opt, .room-chip, .cw-dot{transition:transform .14s var(--spring), background .18s var(--ease),
  border-color .18s var(--ease), box-shadow .2s var(--ease), color .18s var(--ease);}
.opt:active, .room-chip:active{transform:scale(.97);}
.cw-dot{box-shadow:var(--shadow-sm);}
.cw-dot:active{transform:scale(.9);}
.cw-dot.sel{transform:scale(1.06);}

/* Colourway swap on the framed art crossfades softly. */
.fa-art img, .tile-img{transition:opacity .2s var(--ease), filter .3s var(--ease);}

/* Interactive things advertise themselves. */
.tile, .opt, .room-chip, .cw-dot, .style-ex-card{-webkit-tap-highlight-color:transparent;}

/* ══ Reduced motion ═════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  ::view-transition-old(root),::view-transition-new(root){animation:none !important;}
}