/* ═══════════════════════════════════════════
   Passport Design — DIY page decoration
   Closed-cover button → page picker → fullscreen editor → save
   ═══════════════════════════════════════════ */

/* ── Design button on closed cover ─────────────────────────────── */
.passport-design-btn{
  position:absolute;top:14px;right:14px;
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(200,169,110,.12);
  border:1px solid rgba(200,169,110,.35);
  color:#C8A96E;
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:6px 10px;border-radius:14px;
  cursor:pointer;
  transition:background .15s, transform .12s, border-color .15s;
  -webkit-tap-highlight-color:transparent;
}
.passport-design-btn:hover{background:rgba(200,169,110,.2);border-color:rgba(200,169,110,.6);}
.passport-design-btn:active{transform:scale(.94);}
.passport-design-btn svg{display:block;}

/* Hide design button while passport is open / animating */
.passport-cover.book-open .passport-design-btn,
.passport-cover.book-open-final .passport-design-btn,
.passport-cover.book-close .passport-design-btn{
  opacity:0;pointer-events:none;
}

/* ── Page picker overlay ──────────────────────────────────────── */
.pdesign-picker{
  position:fixed;inset:0;z-index:200;
  background:rgba(15,15,20,.55);
  display:none;align-items:flex-end;justify-content:center;
  animation:pdesignFade .2s ease;
}
.pdesign-picker.open{display:flex;}
@keyframes pdesignFade{from{opacity:0}to{opacity:1}}

.pdesign-picker-sheet{
  width:100%;max-width:560px;
  background:var(--bg, #FAF7F2);
  border-radius:24px 24px 0 0;
  padding:20px 0 28px;
  box-shadow:0 -10px 40px rgba(0,0,0,.25);
  position:relative;
  animation:pdesignSlideUp .3s cubic-bezier(.32,.72,0,1);
}
@keyframes pdesignSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

.pdesign-picker-head{padding:0 20px 16px;position:relative;}
.pdesign-x{
  position:absolute;top:-4px;right:14px;
  width:32px;height:32px;border:none;background:rgba(0,0,0,.06);
  border-radius:50%;font-size:22px;line-height:1;color:var(--text);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.pdesign-x:active{transform:scale(.92);}
.pdesign-picker-title{
  font-family:'Playfair Display',serif;font-size:22px;font-weight:600;
  color:var(--text);margin-top:4px;
}
.pdesign-picker-sub{
  font-family:'DM Sans',sans-serif;font-size:13px;color:var(--muted);
  margin-top:4px;
}

.pdesign-picker-rail{
  display:flex;gap:14px;
  overflow-x:auto;overflow-y:hidden;
  padding:8px 20px 16px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.pdesign-picker-rail::-webkit-scrollbar{display:none;}

/* Each thumbnail is a mini version of the actual passport page */
.pdesign-thumb{
  flex:0 0 auto;
  width:148px;
  scroll-snap-align:start;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s;
}
.pdesign-thumb:active{transform:scale(.96);}
.pdesign-thumb-frame{
  width:148px;height:200px;
  border-radius:10px;overflow:hidden;
  background:#F5EFE2;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  position:relative;
  /* Container so the cloned page sizes itself relative to the thumb */
  container-type:inline-size;
}
.pdesign-thumb-frame .passport-page{
  width:100% !important;height:100% !important;
  position:relative;
  border-radius:10px;
  pointer-events:none;
}
/* Thumbnails preview the *background* only — the trip text reads as noise at
   this scale and competes with the actual goal (showing what the page looks
   like as a design canvas). Hide header + footer chrome and let the
   wallpaper carry the preview. Decorations the user has placed (.pp-deco-layer)
   stay visible because they're the point of the preview. */
.pdesign-thumb-frame .pp-header,
.pdesign-thumb-frame .pp-footer{display:none;}
.pdesign-thumb-frame .pp-wallpaper{
  opacity:.55;
  mix-blend-mode:normal;
}
[data-theme="dark"] .pdesign-thumb-frame .pp-wallpaper{opacity:.45;}
.pdesign-thumb-label{
  margin-top:8px;text-align:center;
  font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;
  color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.pdesign-picker-empty{
  display:none;padding:28px 24px 20px;
  text-align:center;
  font-family:'DM Sans',sans-serif;
  color:var(--muted);
}
.pdesign-picker-empty.open{display:block;}
.pdesign-picker-empty > div:first-child{
  font-size:15px;font-weight:600;color:var(--text);margin-bottom:6px;
}
.pdesign-picker-empty-sub{font-size:13px;line-height:1.4;}

/* ── Fullscreen editor ────────────────────────────────────────── */
.pdesign-editor{
  position:fixed;inset:0;z-index:210;
  background:#1a1a20;
  display:none;flex-direction:column;
  animation:pdesignFade .2s ease;
}
.pdesign-editor.open{display:flex;}

/* Save / Discard sit inline with the Stickers/Polaroids tabs at the right
   side of the tray header. Spacer pushes the action buttons to the far right. */
.pdesign-tab-spacer{flex:1 1 auto;}
.pdesign-action{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid transparent;
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;
  padding:6px 12px;border-radius:14px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .12s, background .15s, border-color .15s;
}
.pdesign-action:active{transform:scale(.94);}
.pdesign-action-discard{
  background:transparent;color:var(--muted);
  padding:6px;
}
.pdesign-action-discard:hover{
  color:var(--text);background:rgba(0,0,0,.04);
}
.pdesign-action-save{
  background:#C8A96E;color:#1a1a20;font-weight:600;
  box-shadow:0 3px 10px rgba(200,169,110,.25);
}
.pdesign-action-save:hover{background:#d4b785;}

/* Stage holds the page being edited — page fills the entire stage area
   (between top bar and tray) so the user has the full canvas to work with. */
.pdesign-stage{
  flex:1 1 auto;
  position:relative;
  overflow:hidden;
}
.pdesign-stage .passport-page{
  position:absolute;inset:0;
  width:100% !important;height:100% !important;
  border-radius:0;
  box-shadow:none;
  container-type:inline-size;
  overflow:hidden;
  touch-action:none;
}

/* Editor view: hide the header/footer chrome + paper wash so the canvas
   reads as one continuous surface. The containers stay in the layout (their
   children are opacity:0, not display:none) because _pdesignSafeZone reads
   their bounding rects to compute the placement guard.
   The page itself gets a CSS transform that scales + translates so only
   the safe band fills the stage — i.e. the user sees only the canvas they
   can decorate. Variables are set by _pdesignApplyEditorCrop in JS. */
.pdesign-stage .pp-header > *,
.pdesign-stage .pp-footer > *{
  opacity:0;
  pointer-events:none;
}
.pdesign-stage .pp-header,
.pdesign-stage .pp-footer{
  background:transparent !important;
  border:none !important;
}
.pdesign-stage .passport-page{
  transform-origin:top center;
  transform:
    translateY(var(--pd-crop-offset, 0))
    scale(var(--pd-crop-scale, 1));
}

/* Export mode — applied to <body> while pdesignExport() runs html2canvas on
   the page. Reverts the editor's chrome-hiding overrides so the captured PNG
   includes the full passport (header + footer chrome) and strips the
   selection outlines / handles / draw surface so the image reads cleanly. */
body.pdesign-exporting .pdesign-stage .passport-page{transform:none !important;}
body.pdesign-exporting .pdesign-stage .pp-header > *,
body.pdesign-exporting .pdesign-stage .pp-footer > *{opacity:1 !important;}
body.pdesign-exporting .pdesign-stage .pp-header,
body.pdesign-exporting .pdesign-stage .pp-footer{background:revert !important;border:revert !important;}
body.pdesign-exporting .pp-deco-handle,
body.pdesign-exporting .pp-deco-rotate,
body.pdesign-exporting .pp-deco-remove,
body.pdesign-exporting .pp-draw-surface,
body.pdesign-exporting .pp-draw-preview{display:none !important;}
body.pdesign-exporting .pp-deco-item.is-selected{outline:none !important;}

/* Decoration layer — rendered inside the page during edit & normal view.
   Container query so deco items size themselves relative to the page width
   (works for tiny thumbnails AND fullscreen editor with the same data). */
.passport-page{container-type:inline-size;}

.pp-deco-layer{
  position:absolute;inset:0;
  pointer-events:none; /* blocks the page's own scroll/click */
}
.pp-deco-layer.is-editing{pointer-events:auto;}

.pp-deco-item{
  position:absolute;
  transform:
    translate(-50%, -50%)
    rotate(var(--rot, 0deg))
    scale(
      var(--scale-x, var(--scale, 1)),
      var(--scale-y, var(--scale, 1))
    );
  transform-origin:center center;
  user-select:none;-webkit-user-select:none;
  touch-action:none;
}
.pp-deco-layer.is-editing .pp-deco-item{cursor:grab;}
.pp-deco-layer.is-editing .pp-deco-item.is-selected{
  outline:2px solid #C8A96E;
  outline-offset:4px;
  border-radius:4px;
}
/* Corner resize handles — Canva-mobile style: 4 small white dots at the
   corners, no edge handles. Hit target is a 22×22 transparent wrapper for
   mobile-friendly tapping; the visible dot is rendered via ::before so
   it stays small and clean while the tappable area stays generous.
   Counter-scale on each axis independently so the dot looks the same
   regardless of how the item is scaled. */
.pp-deco-handle{
  position:absolute;
  width:22px;height:22px;
  background:transparent;
  pointer-events:auto;
  z-index:3;
  transform-origin:center center;
  transform:translate(-50%, -50%) scale(
    calc(1 / max(var(--scale-x, var(--scale, 1)), 0.4)),
    calc(1 / max(var(--scale-y, var(--scale, 1)), 0.4))
  );
}
.pp-deco-handle::before{
  content:'';
  position:absolute;top:50%;left:50%;
  width:9px;height:9px;
  margin:-4.5px 0 0 -4.5px;
  border-radius:50%;
  background:#fff;
  border:1px solid #C8A96E;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.pp-deco-handle-nw{top:-4px;left:-4px;cursor:nwse-resize;}
.pp-deco-handle-ne{top:-4px;left:calc(100% + 4px);cursor:nesw-resize;}
.pp-deco-handle-sw{top:calc(100% + 4px);left:-4px;cursor:nesw-resize;}
.pp-deco-handle-se{top:calc(100% + 4px);left:calc(100% + 4px);cursor:nwse-resize;}

/* Three handles sit centred below the selected element: arrange, rotate, X.
   Positional offsets are divided by --scale-x / --scale-y (with --scale as
   legacy fallback) so the visual gap between handles and their distance
   below the outline stays constant under both uniform and non-uniform
   resize. Each handle's own counter-transform also scales independently
   on each axis so the buttons stay visually round when the parent is
   stretched in one dimension. */
.pp-deco-arrange,
.pp-deco-rotate,
.pp-deco-remove{
  position:absolute;
  top:calc(100% + 14px / max(var(--scale-y, var(--scale, 1)), 0.4));
  width:22px;height:22px;border-radius:50%;
  background:#fff;
  box-shadow:0 1.5px 5px rgba(0,0,0,.16);
  display:flex;align-items:center;justify-content:center;
  pointer-events:auto;
  z-index:3;
  transform-origin:center center;
  -webkit-tap-highlight-color:transparent;
  transition:background .12s, transform .1s;
}
.pp-deco-arrange{
  left:calc(50% - 28px / max(var(--scale-x, var(--scale, 1)), 0.4));
  border:1.25px solid #4A8B7F;
  color:#4A8B7F;
  cursor:pointer;
  transform:translateX(-50%) scale(
    calc(1 / max(var(--scale-x, var(--scale, 1)), 0.4)),
    calc(1 / max(var(--scale-y, var(--scale, 1)), 0.4))
  );
}
@media (hover: hover) {
  .pp-deco-arrange:hover{background:rgba(74,139,127,.06);}
}
.pp-deco-arrange:active{transform:translateX(-50%) scale(
  calc(0.92 / max(var(--scale-x, var(--scale, 1)), 0.4)),
  calc(0.92 / max(var(--scale-y, var(--scale, 1)), 0.4))
);}
.pp-deco-rotate{
  left:50%;
  border:1.25px solid #C8A96E;
  color:#C8A96E;
  cursor:grab;
  transform:translateX(-50%) scale(
    calc(1 / max(var(--scale-x, var(--scale, 1)), 0.4)),
    calc(1 / max(var(--scale-y, var(--scale, 1)), 0.4))
  );
}
.pp-deco-rotate:active{cursor:grabbing;}

.pp-deco-remove{
  left:calc(50% + 28px / max(var(--scale-x, var(--scale, 1)), 0.4));
  border:1.25px solid #B33A3A;
  color:#B33A3A;
  cursor:pointer;
  transform:translateX(-50%) scale(
    calc(1 / max(var(--scale-x, var(--scale, 1)), 0.4)),
    calc(1 / max(var(--scale-y, var(--scale, 1)), 0.4))
  );
}
@media (hover: hover) {
  .pp-deco-remove:hover{background:#FEF1F1;}
}
.pp-deco-remove:active{transform:translateX(-50%) scale(
  calc(0.92 / max(var(--scale-x, var(--scale, 1)), 0.4)),
  calc(0.92 / max(var(--scale-y, var(--scale, 1)), 0.4))
);}

/* Sticker (emoji) item */
.pp-deco-item.t-emoji{
  font-size:9cqw;line-height:1;
  text-shadow:0 2px 4px rgba(0,0,0,.12);
  /* ensure non-text glyph fonts still render large */
  display:inline-block;
}

/* Text item — sized via cqw so it scales with the page. Style is picked
   from a small set of presets (heading / body / cursive / stamp). */
.pp-deco-item.t-text{
  white-space:nowrap;
  color:#1a1a20;
  line-height:1.05;
  padding:1px 4px;
}
.pp-deco-item.t-text[data-style="heading"]{
  font-family:'Playfair Display',serif;font-weight:700;
  font-size:7cqw;
}
.pp-deco-item.t-text[data-style="body"]{
  font-family:'DM Sans',sans-serif;font-weight:500;
  font-size:4cqw;
}
.pp-deco-item.t-text[data-style="cursive"]{
  font-family:'Caveat',cursive;font-weight:600;
  font-size:6.5cqw;
}
.pp-deco-item.t-text[data-style="stamp"]{
  font-family:'IBM Plex Mono',monospace;font-weight:600;
  font-size:3cqw;
  letter-spacing:1.4px;
  text-transform:uppercase;
  border:1.5px solid currentColor;
  padding:3px 8px;
  border-radius:2px;
}
.pp-deco-item.t-text[data-style="marker"]{
  font-family:'Caveat',cursive;font-weight:700;
  font-size:8.5cqw;
}
.pp-deco-item.t-text[data-style="caps"]{
  font-family:'DM Sans',sans-serif;font-weight:600;
  font-size:3.4cqw;
  letter-spacing:2.4px;
  text-transform:uppercase;
}
.pp-deco-item.t-text[data-style="mono"]{
  font-family:'IBM Plex Mono',monospace;font-weight:400;
  font-size:3.2cqw;
  letter-spacing:.4px;
}

/* Stroke item — full-page SVG canvas containing one drawn path. The item
   itself doesn't position; it spans the whole page and the path's coords
   define where the stroke lives. Pointer-events disabled so strokes don't
   intercept selection of stickers/text on top of them. */
.pp-deco-item.t-stroke{
  position:absolute !important;
  top:0 !important;left:0 !important;
  width:100% !important;height:100% !important;
  transform:none !important;
  pointer-events:none;
}
.pp-deco-item.t-stroke svg{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;
}

/* Draw surface — only active while the Draw tab is selected. Sits above
   all items so pointer-down kicks off a stroke instead of selecting an
   item. crosshair cursor for affordance. */
.pp-draw-surface{
  position:absolute;inset:0;
  z-index:9000;
  pointer-events:none;
  cursor:crosshair;
  display:none;
}
.pp-deco-layer.is-drawing .pp-draw-surface{
  display:block;pointer-events:auto;
}
.pp-draw-preview{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;
  display:none;
  z-index:9001;
}
.pp-draw-preview.active{display:block;}

/* Edit pencil button — extra control in the floating pill, only shown
   when a text item is selected. */
.pdesign-eb-edit{
  /* inherits .pdesign-eb-btn styling */
}

/* ── Discard confirmation dialog ─────────────────────────────── */
.pdesign-discard-confirm{
  position:fixed;inset:0;z-index:230;
  background:rgba(0,0,0,.55);
  display:none;align-items:center;justify-content:center;
  padding:22px;
  animation:pdesignFade .2s ease;
}
.pdesign-discard-confirm.open{display:flex;}
.pdesign-dc-sheet{
  background:var(--card);
  border-radius:16px;
  padding:24px 22px 16px;
  max-width:300px;width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  animation:pdesignZoomIn .25s cubic-bezier(.32,.72,0,1);
}
@keyframes pdesignZoomIn{
  from{transform:scale(.94);opacity:0;}
  to{transform:scale(1);opacity:1;}
}
.pdesign-dc-title{
  font-family:'Playfair Display',serif;font-size:18px;font-weight:700;
  color:var(--text);text-align:center;margin-bottom:6px;
}
.pdesign-dc-sub{
  font-family:'DM Sans',sans-serif;font-size:13px;line-height:1.45;
  color:var(--muted);text-align:center;
  margin-bottom:18px;
}
.pdesign-dc-actions{display:flex;gap:10px;}
.pdesign-dc-keep,
.pdesign-dc-discard{
  flex:1;
  border:none;
  font-family:'DM Sans',sans-serif;font-size:14px;
  padding:11px 10px;border-radius:10px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .12s, transform .1s;
}
.pdesign-dc-keep{
  background:rgba(0,0,0,.04);
  color:var(--text);font-weight:500;
}
.pdesign-dc-keep:hover{background:rgba(0,0,0,.08);}
.pdesign-dc-discard{
  background:#B33A3A;
  color:#fff;font-weight:600;
}
.pdesign-dc-discard:hover{background:#a02f2f;}
.pdesign-dc-keep:active,
.pdesign-dc-discard:active{transform:scale(.97);}

/* ── Text editor modal ───────────────────────────────────────── */
.pdesign-text-editor{
  position:fixed;inset:0;z-index:220;
  background:rgba(0,0,0,.55);
  display:none;align-items:flex-end;justify-content:center;
  animation:pdesignFade .2s ease;
}
.pdesign-text-editor.open{display:flex;}
.pdesign-te-sheet{
  width:100%;
  background:var(--card);
  border-radius:20px 20px 0 0;
  padding:14px 16px max(16px, env(safe-area-inset-bottom));
  animation:pdesignSlideUp .25s cubic-bezier(.32,.72,0,1);
  box-shadow:0 -10px 30px rgba(0,0,0,.18);
}
.pdesign-te-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.pdesign-te-title{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--muted);
}
.pdesign-te-cancel,.pdesign-te-save{
  border:none;background:transparent;
  font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;
  padding:6px 10px;border-radius:8px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.pdesign-te-cancel{color:var(--muted);}
.pdesign-te-save{
  background:#C8A96E;color:#1a1a20;font-weight:600;
  padding:6px 14px;border-radius:14px;
}
.pdesign-te-input{
  width:100%;
  font-family:'DM Sans',sans-serif;font-size:16px;
  color:var(--text);background:rgba(0,0,0,.04);
  border:1px solid var(--border);border-radius:10px;
  padding:10px 12px;outline:none;resize:none;
  line-height:1.4;
}
.pdesign-te-input:focus{border-color:#C8A96E;}

/* Inline text formatting flags applied to rendered text items on the page.
   Bold uses 800 + !important so it overrides every preset's per-style weight
   and produces a visible change even on presets that already default to 600/700.
   font-synthesis-weight:auto lets browsers fake heavier weights on fonts that
   don't ship them (e.g. Caveat 800 → synthesised from 700). */
.pp-deco-item.t-text.is-bold{
  font-weight:800 !important;
  font-synthesis-weight:auto;
  -webkit-text-stroke:0.4px currentColor;
}
.pp-deco-item.t-text.is-italic{font-style:italic;font-synthesis-style:auto;}
.pp-deco-item.t-text.is-underline{text-decoration:underline;text-underline-offset:2px;}

/* ── Tray content for Text tab — preset style tiles ─────────── */
.pdesign-text-preset{
  flex:0 0 auto;
  width:60px;height:54px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.03);
  border:1px solid var(--border);
  border-radius:10px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .12s, transform .1s;
  color:var(--text);
}
.pdesign-text-preset:active{transform:scale(.94);background:rgba(200,169,110,.15);}
.pdesign-text-preset[data-style="heading"]{font-family:'Playfair Display',serif;font-weight:700;font-size:22px;}
.pdesign-text-preset[data-style="body"]{font-family:'DM Sans',sans-serif;font-weight:500;font-size:14px;}
.pdesign-text-preset[data-style="cursive"]{font-family:'Caveat',cursive;font-weight:600;font-size:24px;}
.pdesign-text-preset[data-style="stamp"]{
  font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:9px;
  letter-spacing:1.2px;text-transform:uppercase;
  border:1.5px solid currentColor;
  padding:3px 6px;background:transparent;
  width:48px;height:30px;
  align-self:center;
}
.pdesign-text-preset[data-style="marker"]{font-family:'Caveat',cursive;font-weight:700;font-size:28px;}
.pdesign-text-preset[data-style="caps"]{
  font-family:'DM Sans',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:1.6px;text-transform:uppercase;
}
.pdesign-text-preset[data-style="mono"]{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:13px;}

/* ── Tray content for Draw tab — tool toggle + color + thickness ── */
.pdesign-draw-controls{
  display:flex;align-items:center;gap:14px;
  padding:0 6px;flex:1 1 auto;
}
.pdesign-draw-group{
  display:flex;align-items:center;gap:6px;
}
.pdesign-tool-btn{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;
  background:rgba(0,0,0,.04);
  border:1px solid var(--border);
  color:var(--muted);cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .12s, color .12s, border-color .12s, transform .1s;
}
.pdesign-tool-btn:active{transform:scale(.92);}
.pdesign-tool-btn.active{
  background:rgba(200,169,110,.18);
  color:#1a1a20;
  border-color:rgba(200,169,110,.5);
}

/* When eraser is active, the canvas cursor changes so the user knows what
   they're about to do. */
.pp-deco-layer.is-erasing .pp-draw-surface{cursor:cell;}
.pdesign-color-swatch{
  width:28px;height:28px;border-radius:50%;
  border:2px solid transparent;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s, border-color .12s;
}
.pdesign-color-swatch:active{transform:scale(.9);}
.pdesign-color-swatch.active{
  border-color:#1a1a20;
  box-shadow:0 0 0 2px var(--card);
}
.pdesign-thickness{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;
  background:rgba(0,0,0,.04);cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.pdesign-thickness:active{transform:scale(.92);}
.pdesign-thickness.active{background:rgba(200,169,110,.2);}
.pdesign-thickness-dot{
  background:#1a1a20;border-radius:50%;
}
.pdesign-thickness[data-size="thin"] .pdesign-thickness-dot{width:5px;height:5px;}
.pdesign-thickness[data-size="medium"] .pdesign-thickness-dot{width:9px;height:9px;}
.pdesign-thickness[data-size="thick"] .pdesign-thickness-dot{width:14px;height:14px;}
.pdesign-draw-undo{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:4px;
  border:1px solid var(--border);background:transparent;
  font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;
  padding:6px 10px;border-radius:14px;
  color:var(--muted);cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.pdesign-draw-undo:active{transform:scale(.94);background:rgba(0,0,0,.04);}
.pdesign-draw-undo:disabled{opacity:.4;cursor:default;}

/* Polaroid item — just the photo with a thin white border, no Polaroid frame
   or handwritten caption. */
.pp-deco-item.t-memory{
  width:26cqw;
  background:transparent;
  padding:0;
  border-radius:2px;
}
.pp-deco-item.t-memory img{
  display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
  background:#eee;
  border:3px solid #fff;
  box-shadow:0 3px 8px rgba(0,0,0,.18);
  border-radius:1px;
}
.pp-deco-item.t-memory .pp-deco-cap{display:none;}

/* Global Save / Cancel pill — always visible at the top centre of the
   editor. Two labels of equal height, separated by a hairline divider.
   Visual hierarchy is communicated through colour only (Cancel = muted,
   Save = gold) rather than mismatched shapes. */
.pdesign-actions-pill{
  position:absolute;top:14px;left:50%;
  transform:translateX(-50%);
  display:flex;align-items:center;
  padding:0 6px;
  background:#fff;
  border-radius:999px;
  box-shadow:0 6px 20px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.08);
  z-index:11;
  font-family:'DM Sans',sans-serif;
}
.pdesign-actions-cancel,
.pdesign-actions-save-btn{
  border:none;background:transparent;
  font-size:13px;
  padding:9px 16px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  border-radius:999px;
  transition:color .12s, background .12s, transform .1s;
  letter-spacing:.1px;
}
.pdesign-actions-cancel{
  color:var(--muted);
  font-weight:500;
}
.pdesign-actions-cancel:hover{color:var(--text);background:rgba(0,0,0,.04);}
.pdesign-actions-cancel:active{transform:scale(.96);}
.pdesign-actions-save-btn{
  color:#a07f43;
  font-weight:600;
}
.pdesign-actions-save-btn:hover{background:rgba(200,169,110,.12);}
.pdesign-actions-save-btn:active{transform:scale(.96);}
.pdesign-actions-divider{
  width:1px;height:16px;
  background:rgba(0,0,0,.12);
  flex-shrink:0;
}
.pdesign-actions-history{
  border:none;background:transparent;
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  border-radius:999px;
  color:var(--muted);
  transition:color .12s, background .12s, transform .1s, opacity .12s;
}
.pdesign-actions-history:hover:not([disabled]){color:var(--text);background:rgba(0,0,0,.04);}
.pdesign-actions-history:active:not([disabled]){transform:scale(.92);}
.pdesign-actions-history[disabled]{opacity:.28;cursor:default;}

/* Per-element control pill — appears when an item is selected. Stacked
   below the global Save/Discard pill so they coexist at the top centre
   without overlapping. */
.pdesign-element-bar{
  display:none;
  position:absolute;top:60px;left:50%;
  transform:translateX(-50%);
  align-items:center;gap:4px;
  padding:5px 7px;
  background:#fff;
  border-radius:999px;
  box-shadow:0 4px 14px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.06);
  z-index:10;
  max-width:calc(100% - 32px);
}
.pdesign-element-bar.open{display:flex;}
/* Group wrappers — keeps a flat visual layout while letting JS show/hide
   the right control set per item type (text vs shape) with a single toggle. */
.pdesign-eb-group{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.pdesign-eb-btn{
  width:28px;height:28px;border-radius:50%;
  border:none;background:transparent;color:#1a1a20;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  flex-shrink:0;
  transition:background .15s, transform .1s;
}
.pdesign-eb-btn:hover{background:rgba(0,0,0,.05);}
.pdesign-eb-btn:active{transform:scale(.9);}
.pdesign-eb-divider{
  width:1px;height:18px;background:rgba(0,0,0,.1);
  flex-shrink:0;margin:0 2px;
}
.pdesign-eb-slider{
  display:flex;flex-direction:column;gap:2px;
  min-width:72px;max-width:96px;
  padding:2px 4px;
}
.pdesign-eb-label{
  font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:1.2px;
  text-transform:uppercase;color:rgba(0,0,0,.45);
  text-align:center;line-height:1;
  display:inline-flex;align-items:baseline;gap:4px;justify-content:center;
}
.pdesign-eb-val{
  font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.4px;
  text-transform:none;color:rgba(0,0,0,.78);font-weight:600;
  font-variant-numeric:tabular-nums;
}
.pdesign-eb-slider input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:3px;
  background:rgba(0,0,0,.1);border-radius:2px;outline:none;
  margin:0;
}
.pdesign-eb-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;border-radius:50%;
  background:#C8A96E;cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.pdesign-eb-slider input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;
  background:#C8A96E;cursor:pointer;border:none;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}

/* Arrangement (z-order) dropdown menu — opened by tapping the per-item
   arrange handle. Position set dynamically via JS to anchor above the handle.
   Vertical tile list with icon + label for clarity. */
.pdesign-arrange-pop{
  position:fixed;
  display:none;flex-direction:column;
  padding:5px;
  background:#fff;border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.08);
  z-index:12;
  min-width:160px;
}
.pdesign-arrange-pop.open{display:flex;animation:pdesignArrangePopIn .14s ease-out;}
@keyframes pdesignArrangePopIn{from{opacity:0;}to{opacity:1;}}
.pdesign-arrange-pop button{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:9px 10px;
  border:none;background:transparent;
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;
  color:var(--text);text-align:left;line-height:1;
  cursor:pointer;border-radius:8px;
  -webkit-tap-highlight-color:transparent;
  transition:background .12s, opacity .12s;
}
.pdesign-arrange-pop button:hover:not([disabled]){background:rgba(0,0,0,.04);}
.pdesign-arrange-pop button:active:not([disabled]){background:rgba(200,169,110,.14);}
.pdesign-arrange-pop button[disabled]{opacity:.36;cursor:default;}
.pdesign-arrange-pop button svg{flex-shrink:0;color:var(--muted);}

/* ── Tray (sticker / polaroid picker at bottom) ───────────────── */
/* Tray uses --bg (warm cream) instead of --card (near-white) so white-coloured
   stickers and polaroids contrast against the surface. Theme-aware so dark
   mode picks up the darker --bg automatically. */
.pdesign-tray{
  background:var(--bg);
  padding:0 0 max(12px, env(safe-area-inset-bottom));
  border-top:1px solid var(--border);
  display:flex;flex-direction:column;
}
/* Tray header — Canva-style icon+label tiles. Generous padding, large
   line-style icon stacked above a regular-weight label. No background box;
   active state is signalled purely through colour (light gray → white).
   Trash + save sit inline at the right edge of the same row. */
/* No border-top: body + tabs share the same --bg, so a divider here would
   stack against the tray's outer border-top and read as a double line. */
.pdesign-tray-tabs{
  display:flex;align-items:stretch;gap:0;
  padding:6px 8px 8px;
  background:var(--bg);
  position:relative;z-index:2;
}
.pdesign-tab{
  /* flex:1 1 0 gives each tab an identical width regardless of label length
     ("Polaroids" vs "Text"), so icons land on a perfectly even grid. The
     tab's content centres horizontally within its allocated slot. */
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  border:none;background:transparent;
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;
  letter-spacing:.1px;
  padding:10px 4px 8px;
  border-radius:10px;
  color:var(--muted);cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .15s;
}
.pdesign-tab:active{transform:scale(.97);}
.pdesign-tab-icon{
  width:26px;height:26px;display:block;
}
.pdesign-tab.active{
  color:var(--text);background:transparent;
}
.pdesign-tab.active .pdesign-tab-icon{color:var(--text);}

/* Text formatting toolbar — sits above the font-style tiles, only visible
   when a text item is selected. B / I / U toggles plus a numeric size
   stepper (touch-friendly) so the user can resize without dragging the
   corner handle. Animates open/closed via max-height + opacity since
   display:none can't transition. */
/* Text format controls — bold/italic/underline + colour swatch button +
   size stepper — sit inline in the floating element bar. Compact sizing
   keeps the pill aesthetically tight and non-intrusive over the canvas. */
.pdesign-tt-btn{
  width:26px;height:26px;border-radius:6px;
  border:1px solid var(--border);background:rgba(0,0,0,.03);
  color:var(--text);
  display:flex;align-items:center;justify-content:center;
  font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  flex-shrink:0;
  transition:background .12s,border-color .12s,transform .1s;
}
.pdesign-tt-btn:active{transform:scale(.92);}
.pdesign-tt-btn.active{background:rgba(200,169,110,.22);border-color:#C8A96E;}
.pdesign-tt-btn b,.pdesign-tt-btn i,.pdesign-tt-btn u{font-style:normal;font-weight:inherit;text-decoration:none;}
.pdesign-tt-btn[data-fmt="bold"] b{font-weight:800;}
.pdesign-tt-btn[data-fmt="italic"] i{font-style:italic;font-family:'Playfair Display',serif;font-weight:600;}
.pdesign-tt-btn[data-fmt="underline"] u{text-decoration:underline;text-underline-offset:2px;}

/* Colour swatch button — shows the current text colour as a filled circle.
   Tapping opens a popover with the brand palette swatches. */
.pdesign-eb-color-wrap{position:relative;display:flex;flex-shrink:0;}
.pdesign-eb-color-btn{
  width:26px;height:26px;border-radius:6px;
  border:1px solid var(--border);background:rgba(0,0,0,.03);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;-webkit-tap-highlight-color:transparent;flex-shrink:0;padding:0;
  transition:border-color .12s,transform .1s;
}
.pdesign-eb-color-btn:active{transform:scale(.92);}
.pdesign-eb-color-btn:hover{border-color:rgba(0,0,0,.18);}
.pdesign-eb-color-dot{
  width:14px;height:14px;border-radius:50%;
  background:#1a1a20;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
/* Stroke-colour button — visually a ring rather than a filled disc so users
   can tell the fill and stroke buttons apart at a glance. The dot's fill
   is "transparent" by default (no stroke), updated by JS when a stroke colour
   is picked. */
.pdesign-eb-color-dot.pdesign-eb-stroke-ring{
  background:transparent;
  box-shadow:inset 0 0 0 3px #1a1a20;
}
.pdesign-eb-color-pop{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  display:none;align-items:center;gap:6px;
  padding:6px 8px;
  background:#fff;border-radius:999px;
  box-shadow:0 6px 20px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.08);
  z-index:12;
}
/* Custom keyframe preserves the parent's translateX(-50%) centering;
   pdesignLayerPopIn (used elsewhere) sets a translateY-only transform that
   would override translateX and cause a "snap from right" on open. */
.pdesign-eb-color-pop.open{display:flex;animation:pdesignColorPopIn .14s ease-out;}
@keyframes pdesignColorPopIn{
  from{opacity:0;transform:translate(-50%, -4px);}
  to{opacity:1;transform:translate(-50%, 0);}
}

/* Shape fill and stroke popovers share a single anchor — both centred
   below the WHOLE shape group, not under each individual button. Tapping
   either button opens the picker in the same spot, so toggling between
   fill and stroke doesn't shift the menu sideways. Achieved by giving the
   group itself a positioning context and stripping it from the per-button
   colour wraps inside the group. */
#pdesignEbShapeGroup{position:relative;}
#pdesignEbShapeGroup .pdesign-eb-color-wrap{position:static;}
.pdesign-eb-color-pop button{
  width:22px;height:22px;border-radius:50%;
  border:1.5px solid rgba(0,0,0,.08);
  cursor:pointer;-webkit-tap-highlight-color:transparent;padding:0;flex-shrink:0;
  transition:transform .12s, box-shadow .12s, border-color .12s;
}
.pdesign-eb-color-pop button:active{transform:scale(.88);}
.pdesign-eb-color-pop button.active{
  border-color:#C8A96E;
  box-shadow:0 0 0 1.5px #fff inset, 0 0 0 2.5px #C8A96E;
}
/* "None" swatch — diagonal slash icon for transparent fill / no stroke. */
.pdesign-eb-color-pop .pdesign-color-none{
  background:transparent;
  border-color:transparent;
  padding:0;overflow:visible;
}
.pdesign-eb-color-pop .pdesign-color-none svg{display:block;width:100%;height:100%;}

.pdesign-tt-size{
  display:flex;align-items:center;gap:1px;
  background:rgba(0,0,0,.03);
  border:1px solid var(--border);
  border-radius:6px;
  padding:1px;
  flex-shrink:0;
}
.pdesign-tt-step{
  width:22px;height:22px;border-radius:4px;
  border:none;background:transparent;color:var(--text);
  font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;line-height:1;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:background .12s,transform .1s;
}
.pdesign-tt-step:active{transform:scale(.9);background:rgba(200,169,110,.18);}
.pdesign-tt-val{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;
  font-variant-numeric:tabular-nums;
  min-width:22px;text-align:center;color:var(--text);
}

.pdesign-tray-body{
  display:flex;align-items:center;gap:10px;
  overflow-x:auto;overflow-y:hidden;
  padding:8px 14px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* Fixed height so switching tabs doesn't jump the tray's height — the
     tallest tile (polaroid) sets the bar; shorter tiles centre within it.
     Without this, swapping from polaroids → stickers caused the tray to
     visibly shrink mid-animation. */
  min-height:96px;
  max-height:96px;
  transform-origin:bottom center;
  transition:max-height .28s cubic-bezier(.32,.72,0,1),
             min-height .28s cubic-bezier(.32,.72,0,1),
             padding-top .28s ease, padding-bottom .28s ease,
             opacity .15s ease,
             transform .28s cubic-bezier(.32,.72,0,1);
}
.pdesign-tray-body::-webkit-scrollbar{display:none;}
/* Collapsed: body retracts down behind the tabs (smooth bottom-anchored
   reveal). Tabs row stays visible at the bottom so the user can tap to
   re-open. */
.pdesign-tray.collapsed .pdesign-tray-body{
  min-height:0;max-height:0;
  padding-top:0;padding-bottom:0;
  opacity:0;
  transform:translateY(20px) scale(.98);
  overflow:hidden;
}

/* Tile reveal — each tile fades in + lifts when content is swapped, so
   switching between Stickers / Polaroids / Text / Draw feels smooth. */
.pdesign-tray-body > *{
  animation:pdesignTileReveal .28s cubic-bezier(.32,.72,0,1) both;
}
@keyframes pdesignTileReveal{
  from{opacity:0;transform:translateY(8px) scale(.96);}
  to  {opacity:1;transform:translateY(0)   scale(1);}
}

/* iOS-style: emoji floats on its own, no box, no border. The press state
   is the only visual feedback (subtle scale-down — no flash background). */
.pdesign-sticker{
  flex:0 0 auto;
  width:54px;height:54px;
  display:flex;align-items:center;justify-content:center;
  font-size:32px;line-height:1;
  background:transparent;border:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .1s;
}
.pdesign-sticker:active{transform:scale(.88);}

/* Sticker bundle picker — sticker grid sits on top, a row of round pack
   chips sits just above the bottom nav so users can one-tap between packs.
   Stickers tab swaps the body's default row layout for a column. */
.pdesign-stickers-wrap{
  display:flex;flex-direction:column;gap:8px;
  width:100%;align-self:stretch;
  min-height:0;
}
.pdesign-sticker-grid{
  display:flex;align-items:center;gap:10px;
  overflow-x:auto;overflow-y:hidden;
  flex:1 1 auto;
  /* Native horizontal pan only — vertical pan is reserved for our
     drag-onto-canvas gesture so the browser doesn't fight us. */
  touch-action:pan-x;
}
.pdesign-sticker-grid::-webkit-scrollbar{display:none;}

/* Shape tile grid — horizontal scroll of shape primitives, mirrors the
   sticker grid layout. Each tile previews exactly the shape it places. */
.pdesign-shape-grid{
  display:flex;align-items:center;gap:10px;
  overflow-x:auto;overflow-y:hidden;
  flex:1 1 auto;width:100%;
  padding:4px 2px;
  touch-action:pan-x;
}
.pdesign-shape-grid::-webkit-scrollbar{display:none;}
.pdesign-shape-tile{
  flex:0 0 auto;
  width:54px;height:54px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;padding:6px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .1s, opacity .12s;
}
.pdesign-shape-tile:active{transform:scale(.88);}
.pdesign-shape-tile svg{width:100%;height:100%;display:block;}

/* Canvas-rendered shape — SVG fills the wrapper. Default base size is 100px
   square; the parent .pp-deco-item transform scales it. overflow:visible so
   stroke + drop-shadow can extend past the wrapper bounds without clipping. */
.pp-deco-item.t-shape{
  width:100px;height:100px;
  overflow:visible;
}
.pp-deco-item.t-shape > svg{
  width:100%;height:100%;display:block;overflow:visible;
}
/* Drop shadow — applied to the SVG only, NOT the wrapper. Filter on the
   wrapper would inherit down to the per-item handles (arrange / rotate / X)
   and tint them, which is what made shape items render with off-looking
   handles compared to other item types. */
.pp-deco-item.t-shape.is-shadowed > svg{
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.28));
}
/* Belt-and-braces: ensure no parent filter or display quirk reaches the
   per-item handles when they sit inside a shape wrapper. Keeps them visually
   identical regardless of which item type is selected. */
.pp-deco-item.t-shape .pp-deco-handle,
.pp-deco-item.t-shape .pp-deco-arrange,
.pp-deco-item.t-shape .pp-deco-rotate,
.pp-deco-item.t-shape .pp-deco-remove{
  filter:none;
}

/* Ghost that follows the pointer while a sticker is being dragged out of
   the tray. Rendered at body level so it can fly over everything (tray,
   editor chrome, page) without clipping. */
.pdesign-drag-ghost{
  position:fixed;
  pointer-events:none;
  z-index:9999;
  font-size:36px;line-height:1;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));
  user-select:none;-webkit-user-select:none;
  animation:pdesignGhostLift .12s ease-out;
}
@keyframes pdesignGhostLift{
  from{transform:translate(-50%,-50%) scale(.7);opacity:.4;}
  to  {transform:translate(-50%,-50%) scale(1);  opacity:1;}
}
.pdesign-pack-rail{
  display:flex;align-items:center;justify-content:center;gap:14px;
  overflow-x:auto;overflow-y:hidden;
  flex:0 0 auto;
}
.pdesign-pack-rail::-webkit-scrollbar{display:none;}
/* Round chips, no borders. Inactive sits flat (just the emoji); active gets
   a subtle gold-tinted disc behind it. */
.pdesign-pack-btn{
  flex:0 0 auto;
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;
  background:transparent;border:none;border-radius:50%;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  opacity:.4;
  transition:background .15s, opacity .15s, transform .1s;
}
.pdesign-pack-btn:active{transform:scale(.9);}
.pdesign-pack-btn.active{
  opacity:1;
  background:rgba(0,0,0,.05);
}

.pdesign-polaroid-tile{
  flex:0 0 auto;
  width:62px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .12s;
}
.pdesign-polaroid-tile:active{transform:scale(.94);}
.pdesign-polaroid-tile img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:4px;
  background:#ddd;
  border:2px solid var(--card);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}

.pdesign-tray-empty{
  flex:1 1 auto;
  display:flex;align-items:center;justify-content:center;
  font-family:'DM Sans',sans-serif;font-size:12px;
  color:var(--muted);
  padding:0 14px;text-align:center;
}

/* Dark-mode polaroid caption ink */
[data-theme="dark"] .pp-deco-item.t-memory{background:#f6f3ec;}
[data-theme="dark"] .pp-deco-item.t-memory .pp-deco-cap{color:#222;}