/* ==========================================================================
   Happy Retirement, Johanna
   Palette: paper + botanical ink, one clay accent for anything you can press.
   ========================================================================== */

:root{
  --ink:        oklch(24% 0.024 148);
  --ink-2:      oklch(38% 0.020 148);
  --ink-3:      oklch(53% 0.016 148);
  --paper:      oklch(97% 0.012 92);
  --paper-2:    oklch(93.5% 0.018 92);
  --paper-3:    oklch(89% 0.020 92);
  --line:       oklch(86% 0.014 120);
  --leaf:       oklch(46% 0.075 152);
  --leaf-deep:  oklch(29% 0.050 152);
  --clay:       oklch(57% 0.132 45);
  --clay-hi:    oklch(63% 0.140 45);
  --danger:     oklch(50% 0.150 24);
  --void:       oklch(21% 0.022 140);

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-full: 999px;

  --lift-1: 0 1px 2px oklch(21% 0.02 140 / .14), 0 2px 6px oklch(21% 0.02 140 / .08);
  --lift-2: 0 2px 6px oklch(21% 0.02 140 / .16), 0 10px 28px oklch(21% 0.02 140 / .14);
  --lift-3: 0 6px 18px oklch(21% 0.02 140 / .22), 0 26px 60px oklch(21% 0.02 140 / .22);

  --out: cubic-bezier(0.16, 1, 0.3, 1);
  --out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --in: cubic-bezier(0.7, 0, 0.84, 0);

  --z-note-focus: 30; --z-hud: 60; --z-panel: 80; --z-toast: 95;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  --display: "Fraunces", Georgia, serif;
}

*, *::before, *::after{ box-sizing: border-box; }

html, body{
  height: 100%; margin: 0;
  background: var(--void);
  overflow: hidden;
  overscroll-behavior: none;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

h1, h2{ text-wrap: balance; margin: 0; }
button{ font: inherit; color: inherit; }

:where(button, input, textarea, [tabindex]):focus-visible{
  outline: 3px solid var(--clay);
  outline-offset: 2px;
}

/* ==========================================================================
   Stage
   The camera is animated in JS now. No transition on .stage, so nothing can
   silently suppress it (the old `.is-dragging .stage { transition: none
   !important }` rule got stuck on whenever a desktop mouse-up landed outside
   the viewport, which killed every zoom and pan animation).
   ========================================================================== */

.viewport{
  position: fixed; inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  background: radial-gradient(120% 90% at 50% 20%, oklch(30% 0.03 140), var(--void));
}
.viewport.is-dragging{ cursor: grabbing; }

.stage{
  position: absolute; top: 0; left: 0;
  width: 4368px; height: 2912px;
  transform-origin: 0 0;
  backface-visibility: hidden;
  will-change: transform;
}

/* Mid-flight the whole stage is one scaling layer. Every sticker carrying two
   drop-shadow filters plus a mix-blend-mode sheen forces a fresh raster on
   every frame, which is exactly the mobile stutter. Strip the expensive paint
   while the camera moves, hand it back the moment it lands. */
body.is-gliding .note__shape{ filter: none; transition: none; }
body.is-gliding .note__sheen{ mix-blend-mode: normal; opacity: .5; }
body.is-gliding .banner{ transition: none; }
body.is-gliding .empty{ text-shadow: none; }
body.is-gliding .yard-sign{ filter: none; }

/* Don't let hover wobble or note transitions fight the camera mid-flight. */
body.is-gliding .note{ transition: opacity 320ms var(--out); }
body.is-gliding .note:hover{ transform: rotate(var(--rot)); }

.tank{
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}
body.no-photo .tank{ visibility: hidden; }
body.no-photo .stage{
  background:
    radial-gradient(60% 45% at 34% 55%, oklch(72% 0.03 110), transparent 70%),
    linear-gradient(178deg, oklch(64% 0.05 200) 0 28%, oklch(58% 0.06 140) 28% 58%, oklch(45% 0.06 120) 58% 100%);
}

/* ---------- yard sign scenery ------------------------------------------- */
.yard-sign{
  position: absolute;
  left: 65%;
  bottom: 4%;
  width: 15%;
  max-width: 700px;
  height: auto;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0px 6px 16px rgba(10, 24, 12, 0.35));
}
body.no-photo .yard-sign{ visibility: hidden; }

/* ---------- mobile top banner ------------------------------------------- */
.mobile-banner{ display: none; }
@media (max-width: 768px){
  .banner{ display: none; }
  .mobile-banner{
    display: block;
    position: fixed; top: 0; left: 0; right: 0;
    z-index: var(--z-hud);
    pointer-events: none;
  }
  .mobile-banner__cloth{
    position: relative; z-index: 2;
    padding: max(16px, env(safe-area-inset-top)) 18px 18px;
    background: linear-gradient(180deg, #FDF7EC 0%, #F6EBD6 65%, #EBDBC1 100%);
    border-bottom: 2px dashed oklch(48% 0.055 62 / .35);
    text-align: center;
    overflow: hidden;
  }
  .mobile-leaf{
    position: absolute; pointer-events: none; z-index: 1; fill: #3F6B45;
  }
  .mobile-leaf--l1{ left: 6px; bottom: 8px; width: 34px; height: 34px; transform: rotate(-22deg); }
  .mobile-leaf--l2{ left: 24px; bottom: 4px; width: 26px; height: 26px; transform: rotate(14deg); opacity: 0.78; }
  .mobile-leaf--r1{ right: 6px; bottom: 8px; width: 34px; height: 34px; transform: rotate(22deg); }
  .mobile-leaf--r2{ right: 24px; bottom: 4px; width: 26px; height: 26px; transform: rotate(-14deg); opacity: 0.78; }
  .mobile-banner__cloth h1{
    font-family: var(--display);
    font-size: 1.85rem; font-weight: 700;
    color: var(--leaf-deep); margin: 0; line-height: 1.15; position: relative; z-index: 2;
  }
  .mobile-banner__name{ font-size: 1.85rem; color: var(--leaf-deep); }
  .mobile-banner__cloth p{
    font-family: var(--display); font-style: italic; font-size: 0.875rem;
    color: oklch(42% 0.045 62); margin: 5px 0 0; line-height: 1.25; position: relative; z-index: 2;
  }
  .mobile-banner__shadow{
    position: absolute; left: 0; right: 0; bottom: -28px; height: 32px;
    background: linear-gradient(180deg, rgba(18, 30, 18, 0.5) 0%, rgba(18, 30, 18, 0) 100%);
    filter: blur(6px); z-index: 1;
  }
}

/* ---------- banner: a real cloth hung across the top of the photo -------- */

.banner{
  position: absolute; left: 0; top: 0;
  width: 4368px; height: 1000px;
  pointer-events: none;
  transition: opacity 420ms var(--out);
}
body.is-zoomed .banner{ opacity: .35; }

.banner__cloth{ position: absolute; inset: 0; display: block; overflow: visible; z-index: 2; }
.banner__rope{ fill: none; stroke: oklch(46% 0.045 70); stroke-width: 15; stroke-linecap: round; }
.banner__stitch{ fill: none; stroke: oklch(48% 0.055 62 / .5); stroke-width: 7; stroke-dasharray: 32 24; stroke-linecap: round; }
.banner__leaves{ opacity: .9; }

.banner__shadow{
  position: absolute; z-index: 1;
  left: 2%; right: 2%; top: 760px; height: 260px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(20, 32, 20, 0.45) 0%, rgba(20, 32, 20, 0) 80%);
  pointer-events: none;
}

.banner__text{
  position: absolute; z-index: 3;
  left: 0; top: 336px; width: 100%; height: 470px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 30px; text-align: center;
}
.banner__text h1{
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 600; font-size: 210px; line-height: .94;
  letter-spacing: -0.015em;
  color: var(--leaf-deep);
}
.banner__text p{
  margin: 0;
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: 76px; letter-spacing: .01em;
  color: oklch(42% 0.045 62);
}

/* ---------- placeable zone --------------------------------------------- */

.zone{
  position: absolute;
  left: 19.69%; top: 41.21%; width: 36.63%; height: 30.91%;
  border: 9px dashed oklch(97% 0.02 92 / .8);
  border-radius: 30px;
  background: oklch(97% 0.02 92 / .05);
  opacity: 0; pointer-events: none;
  transition: opacity 320ms var(--out);
}
body.is-placing .zone{ opacity: 1; }
.zone__tag{
  position: absolute; left: 6px; top: -96px;
  font-family: var(--display); font-style: italic; font-size: 62px;
  color: oklch(97% 0.02 92 / .92);
  text-shadow: 0 4px 24px oklch(20% 0.02 140 / .8);
}

/* ---------- notes ------------------------------------------------------ */

.notes{ position: absolute; inset: 0; }

.note{
  position: absolute;
  width: var(--s); height: var(--s);
  margin-left: calc(var(--s) / -2);
  margin-top: calc(var(--s) / -2);
  transform: rotate(var(--rot));
  transition: opacity 320ms var(--out), transform 420ms var(--out-quart);
  cursor: pointer;
  border: 0; padding: 0; background: none;
  color: var(--txt);
}
.note__shape{
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%;
  overflow: visible;
  filter: drop-shadow(0px 1px 1.5px rgba(10, 24, 12, 0.24)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.10));
  transition: filter 220ms var(--out);
}
.note:hover{ transform: rotate(var(--rot)) scale(1.035); }
.note:hover .note__shape{
  filter: drop-shadow(0px 1.5px 2px rgba(10, 24, 12, 0.28)) drop-shadow(0px 3px 7px rgba(0, 0, 0, 0.13));
}
.note.is-focus{ z-index: var(--z-note-focus); cursor: default; }
.note.is-focus .note__shape{
  filter: drop-shadow(0px 2px 3px rgba(10, 24, 12, 0.30)) drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.15));
}
.note__sheen{
  mix-blend-mode: overlay;
  pointer-events: none;
}
body.is-zoomed .note{ opacity: 1; }
body.is-placing .notes .note{ pointer-events: none; opacity: 0.85; }
body.is-placing .notes .note.is-editing{ display: none !important; }

.note__text{
  position: absolute;
  top: var(--it); right: var(--ir); bottom: var(--ib); left: var(--il);
  display: grid; grid-template-rows: 1fr auto;
  gap: calc(var(--s) * .022);
  font-family: var(--font);
  text-align: center;
  overflow: hidden;
}
.note__msg{
  min-height: 0; overflow: hidden;
  align-self: stretch;
  display: flex; flex-direction: column; justify-content: center;
  font-size: calc(var(--s) * var(--fs, .054));
  line-height: 1.24;
}
.note__ink{
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  hyphens: auto;
}
.note__by{
  font-size: calc(var(--s) * .048);
  font-weight: 700;
  line-height: 1.1;
  opacity: .95;
  padding-top: calc(var(--s) * .01);
  position: relative;
}

.note__pager{
  position: absolute; inset: 0;
  pointer-events: none;
  display: none;
  align-items: center;
  justify-content: space-between;
  font-family: var(--sans);
}
.note.is-focus.has-pages .note__pager,
.composer__mount .note.is-focus.has-pages .note__pager{ display: flex; }
.note__pager button{
  pointer-events: auto;
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: calc(var(--s) * .16); height: calc(var(--s) * .16);
  border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.25);
  background: var(--bg, var(--paper)); color: var(--txt, var(--ink));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  display: flex; align-items: center; justify-content: center;
  padding: 0; margin: 0;
  cursor: pointer; z-index: 10;
}
.note__pager button[data-step="-1"]{ left: calc(var(--s) * -0.1); }
.note__pager button[data-step="1"]{ right: calc(var(--s) * -0.1); }
.note__pager button:hover{ filter: brightness(0.93); }
.note__pager button svg{ display: block; margin: auto; }
.note__pager span{
  position: absolute; bottom: calc(var(--s) * -0.09); left: 50%;
  transform: translateX(-50%);
  font-size: calc(var(--s) * .05);
  font-weight: 600; color: #fff;
  background: rgba(0, 0, 0, 0.65);
  padding: 2px 8px; border-radius: 999px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* the sticker being placed: its own layer above the wall */
.drop{ position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.drop[hidden]{ display: none; }
.drop .note{ transition: none; }
.drop .note__shape{ filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.22)) drop-shadow(0px 6px 14px rgba(0, 0, 0, 0.14)); }
.drop .note.is-blocked{ opacity: .5; }
.drop .note.is-blocked .note__shape{ filter: grayscale(.7) drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.25)); }

/* ==========================================================================
   Heads-up controls
   ========================================================================== */

.fab, .back, .step{
  position: fixed; z-index: var(--z-hud);
  border: 0; cursor: pointer;
  box-shadow: var(--lift-2);
  transition: transform 160ms var(--out-quart), background-color 160ms linear, opacity 220ms var(--out);
}

.fab{
  right: max(var(--sp-5), env(safe-area-inset-right));
  bottom: max(var(--sp-5), env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 54px; height: 54px; padding: 0 24px;
  border-radius: var(--r-full);
  background: #58c750;
  color: #123e16;
  border: 3.5px solid #144319;
  font-size: 1.0625rem; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.fab:hover{ background: #62d85a; transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.42); }
.fab:active{ transform: translateY(0); }

.read-btn{
  position: fixed; z-index: var(--z-hud);
  bottom: max(var(--sp-5), env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 0 22px;
  border-radius: var(--r-full);
  background: #dbe4ff;
  color: #1e2b6b;
  border: 2.5px solid #8e9fe8;
  font-size: 1.125rem; font-weight: 700; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: transform 160ms var(--out-quart), background-color 160ms linear, box-shadow 160ms linear;
}
.read-btn:hover{ background: #e9efff; border-color: #7b8fe3; transform: translateX(-50%) translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); }
.read-btn:active{ transform: translateX(-50%) translateY(0); }
.read-btn[hidden]{ display: none; }
.read-btn__icon{ display: block; flex: none; }
.read-btn__count{ font-size: 1.15rem; font-weight: 800; }

.back{
  bottom: max(var(--sp-5), env(safe-area-inset-bottom));
  left: max(var(--sp-5), env(safe-area-inset-left));
  top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 54px; height: 54px; padding: 0 20px 0 16px;
  border-radius: var(--r-full);
  background: var(--paper); color: var(--ink);
  border: 2.5px solid oklch(76% 0.028 92);
  font-size: 1rem; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}
.back:hover{ background: var(--paper-2); border-color: oklch(68% 0.035 92); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); }
.back:active{ transform: translateY(0); }
.back[hidden]{ display: none; }

.step{
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--paper); color: var(--ink-2);
  border: 2px solid oklch(78% 0.025 92);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  display: grid; place-items: center;
}
.step:hover{ background: var(--paper-2); color: var(--ink); border-color: oklch(70% 0.032 92); transform: scale(1.05); }
.step--prev{
  left: max(var(--sp-5), env(safe-area-inset-left));
  bottom: calc(max(var(--sp-5), env(safe-area-inset-bottom)) + 68px);
}
.step--next{
  right: max(var(--sp-5), env(safe-area-inset-right));
  bottom: calc(max(var(--sp-5), env(safe-area-inset-bottom)) + 70px);
}

/* ==========================================================================
   Composer
   ========================================================================== */

.composer{
  position: fixed; z-index: var(--z-panel);
  top: 0; right: 0; bottom: 0;
  width: min(430px, 42vw);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--paper);
  box-shadow: -1px 0 0 var(--line), -24px 0 60px oklch(18% 0.02 140 / .3);
  transform: translateX(100%);
  transition: transform 460ms var(--out);
}
.composer.is-open{ transform: none; }
.composer[hidden]{ display: none; }

.composer__preview{
  position: relative;
  display: grid; place-items: center;
  padding: var(--sp-6) var(--sp-5) var(--sp-4);
  gap: var(--sp-2);
  background:
    radial-gradient(120% 90% at 50% 0%, oklch(94% 0.03 150), oklch(97% 0.014 100));
  border-bottom: 1px solid var(--line);
}
.composer__mount{ width: 210px; height: 210px; position: relative; overflow: visible; }
.composer__mount .note__pager span{ display: none !important; }
.composer__mount .note__pager button{ box-shadow: var(--lift-1), 0 0 0 1px var(--line); }
.composer__mount .note{ left: 50%; top: 50%; cursor: default; }
.composer__mount .note:hover{ transform: rotate(var(--rot)); }
.composer__pages{
  margin: 0; min-height: 1.3em;
  font-size: .875rem; font-weight: 600; letter-spacing: .02em;
  color: var(--ink-2); text-align: center;
}
.composer__close{
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: oklch(97% 0.012 92 / .7); color: var(--ink-2);
  display: grid; place-items: center; cursor: pointer;
}
.composer__close:hover{ background: var(--paper-2); color: var(--ink); }

.composer__body{
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-5);
}
.composer__foot{
  padding: var(--sp-4) var(--sp-5) max(var(--sp-4), env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.field{ display: flex; flex-direction: column; gap: 10px; }
.field > label, .field__label{
  font-family: var(--display); font-weight: 600; font-size: .9375rem;
  letter-spacing: .01em; color: var(--ink);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
}
.field output{ font-family: var(--sans); font-size: .8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

input[type="text"], textarea{
  width: 100%; font: inherit; color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 11px 13px;
  transition: border-color 140ms linear, background-color 140ms linear;
}
input[type="text"]:hover, textarea:hover{ border-color: oklch(78% 0.02 130); }
input[type="text"]:focus, textarea:focus{ background: var(--paper); border-color: var(--leaf); }
textarea{ resize: vertical; min-height: 96px; line-height: 1.5; }
::placeholder{ color: oklch(65% 0.012 130); }

.hint{ margin: 0; font-size: .75rem; line-height: 1.45; color: var(--ink-3); max-width: 60ch; }
.hint.is-over{ color: var(--danger); }

.picker{ display: grid; gap: var(--sp-2); }
.picker--shape{ grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); }
.picker--font{ grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.picker--color{ display: flex; flex-wrap: wrap; gap: 10px; }

.chip{
  border: 1px solid var(--line); background: var(--paper-2);
  border-radius: var(--r-md); padding: 6px;
  cursor: pointer; display: grid; place-items: center;
  transition: border-color 140ms linear, background-color 140ms linear, transform 140ms var(--out-quart);
}
.chip:hover{ transform: translateY(-1px); border-color: oklch(75% 0.03 140); }
.chip[aria-checked="true"]{ border-color: var(--leaf); background: var(--paper); box-shadow: inset 0 0 0 1px var(--leaf); }
.chip svg{ display: block; width: 34px; height: 34px; fill: var(--ink-3); }
.chip[aria-checked="true"] svg{ fill: var(--leaf); }

.chip--font{ padding: 9px 10px; font-size: 1.25rem; line-height: 1.15; color: var(--ink-2); min-height: 52px; }
.chip[aria-checked="true"].chip--font{ color: var(--ink); }

.chip--color{
  width: 40px; height: 40px; border-radius: 50%; padding: 0;
  border: 1px solid oklch(80% 0.02 120);
}
.chip--color[aria-checked="true"]{
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--leaf);
}

.tilt{ display: flex; align-items: center; gap: var(--sp-4); }
input[type="range"]{ flex: 1; accent-color: var(--leaf); height: 28px; }

.link{
  border: 0; background: none; padding: 0;
  color: var(--leaf); font-size: .8125rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; align-self: flex-start; white-space: nowrap;
}
.link:hover{ color: var(--leaf-deep); }
.link--danger{ color: var(--danger); }

.btn{
  border: 0; border-radius: var(--r-full);
  padding: 0 22px; min-height: 50px;
  font-weight: 600; cursor: pointer;
  transition: background-color 150ms linear, transform 150ms var(--out-quart), opacity 150ms linear;
}
.btn--primary{ background: var(--clay); color: oklch(98% 0.012 60); width: 100%; }
.btn--primary:hover{ background: var(--clay-hi); }
.btn--quiet{ background: var(--paper-2); color: var(--ink-2); }
.btn--quiet:hover{ background: var(--paper-3); color: var(--ink); }
.btn--danger{ background: var(--danger); color: oklch(98% 0.01 30); }
.btn:disabled{ opacity: .45; cursor: not-allowed; }
.btn.is-busy{ pointer-events: none; opacity: .7; }

/* ==========================================================================
   Placing bar / asks / toast / boot
   ========================================================================== */

.placing{
  position: fixed; z-index: var(--z-panel);
  left: 50%; transform: translateX(-50%);
  bottom: max(var(--sp-5), env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5);
  background: var(--paper); border-radius: var(--r-full);
  box-shadow: var(--lift-3);
  max-width: calc(100vw - 32px);
}
.placing[hidden]{ display: none; }
.placing__copy{ margin: 0; font-size: .875rem; color: var(--ink-2); }
.placing__copy strong{ color: var(--ink); }
.placing__acts{ display: flex; gap: var(--sp-2); flex: none; }
.placing__acts .btn{ min-height: 44px; padding: 0 18px; width: auto; }
.placing.is-blocked{ box-shadow: var(--lift-3), 0 0 0 2px var(--danger); }

.ask{
  border: 0; border-radius: var(--r-lg); padding: var(--sp-6);
  max-width: 400px; background: var(--paper); color: var(--ink);
  box-shadow: var(--lift-3);
}
.ask::backdrop{ background: oklch(21% 0.022 140 / .55); }
.ask h2{ font-family: var(--display); font-weight: 600; font-size: 1.375rem; margin-bottom: 10px; }
.ask p{ margin: 0 0 var(--sp-5); font-size: .9375rem; line-height: 1.55; color: var(--ink-2); max-width: 42ch; }
.ask__acts{ display: flex; gap: var(--sp-2); justify-content: flex-end; }
.ask__acts .btn{ width: auto; }

.toast{
  position: fixed; z-index: var(--z-toast);
  left: 50%; bottom: 104px; transform: translateX(-50%);
  margin: 0; padding: 12px 18px;
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-md); font-size: .875rem;
  box-shadow: var(--lift-2);
  max-width: min(90vw, 46ch);
  animation: rise 300ms var(--out);
}
.toast[hidden]{ display: none; }
@keyframes rise{ from{ opacity: 0; transform: translate(-50%, 10px); } }

.boot{
  position: fixed; z-index: var(--z-toast);
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  background: oklch(97% 0.012 92 / .92); color: var(--ink-2);
  border-radius: var(--r-full); box-shadow: var(--lift-2);
  font-size: .875rem;
  transition: opacity 400ms var(--out);
}
.boot.is-done{ opacity: 0; pointer-events: none; }
.boot__leaf{ display: block; color: var(--leaf); animation: sway 1400ms ease-in-out infinite; }
@keyframes sway{ 50%{ transform: rotate(22deg) translateY(-2px); } }

/* empty wall */
.empty{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  text-align: center; color: oklch(97% 0.02 92);
  font-family: var(--display); font-style: italic; font-size: 108px;
  text-shadow: 0 6px 30px oklch(18% 0.02 140 / .85);
  pointer-events: none;
}

/* ==========================================================================
   Small screens: the composer becomes a sheet, nav moves out of thumb reach
   ========================================================================== */

@media (max-width: 720px){
  .composer{
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto; height: min(90vh, 760px);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform: translateY(100%);
    box-shadow: 0 -1px 0 var(--line), 0 -18px 50px oklch(18% 0.02 140 / .34);
  }
  .composer__preview{ padding: var(--sp-4) var(--sp-4) var(--sp-3); }
  .composer__mount{ width: 150px; height: 150px; }
  .composer__body{ padding: var(--sp-4) var(--sp-4) var(--sp-5); gap: var(--sp-4); }
  .composer__foot{ padding: var(--sp-3) var(--sp-4) max(var(--sp-3), env(safe-area-inset-bottom)); }

  .step{ width: 46px; height: 46px; }
  .step--prev{
    left: max(var(--sp-4), env(safe-area-inset-left));
    bottom: calc(max(var(--sp-4), env(safe-area-inset-bottom)) + 60px);
  }
  .step--next{
    right: max(var(--sp-4), env(safe-area-inset-right));
    bottom: calc(max(var(--sp-4), env(safe-area-inset-bottom)) + 60px);
  }

  .fab{ min-height: 48px; height: 48px; padding: 0 18px; font-size: .9375rem; right: max(var(--sp-4), env(safe-area-inset-right)); bottom: max(var(--sp-4), env(safe-area-inset-bottom)); }
  .back{ min-height: 48px; height: 48px; padding: 0 16px 0 13px; font-size: .9375rem; left: max(var(--sp-4), env(safe-area-inset-left)); bottom: max(var(--sp-4), env(safe-area-inset-bottom)); }
  .read-btn{ min-height: 48px; padding: 0 18px; font-size: 1rem; bottom: max(var(--sp-4), env(safe-area-inset-bottom)); }

  .placing{
    left: var(--sp-3); right: var(--sp-3); transform: none;
    flex-direction: column; align-items: stretch; gap: var(--sp-3);
    border-radius: var(--r-lg); padding: var(--sp-4);
    max-width: none;
  }
  .placing__copy{ text-align: center; }
  .placing__acts .btn{ flex: 1; }
  .ask{ margin: auto var(--sp-4); }
}

/* Reduced motion is handled in JS for the camera (it jumps instead of glides). */
@media (prefers-reduced-motion: reduce){
  /* THIS is what killed desktop zoom. The `*` selector hit .stage, so any
     machine with reduced motion enabled got a 0.01ms camera. Never blanket-kill
     transitions on the stage. The camera itself is WAAPI-driven and simply
     shortens to 260ms instead (see durationFor in app.js). */
  *:not(.stage), *:not(.stage)::before, *:not(.stage)::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}