/* ==========================================================================
 * album.css
 *
 * PORTED, NOT REWRITTEN. Lines 22-220 of dad-album-2026-09-09-hidden-inline.html,
 * copied verbatim, then amended in the clearly-marked block at the bottom.
 *
 * This file is the keepsake: the paper texture, the corkboard, the tape
 * corners, the handwriting fonts, the 3D card flip, the Lakers purple-and-gold
 * palette, the gold-for-Leo / purple-for-Dad stars, the HIDDEN watermark.
 * Do not tidy it. It is finished. (decision 26)
 * ========================================================================== */

:root{
  --paper:#E4D5B7; --paper-deep:#D3BE92; --paper-light:#F7EFDC;
  --ink:#2B2420; --ink-soft:#6b6152;
  --purple:#552583; --gold:#c98f0d; --gold-bright:#e0a91b; --rust:#a8552e; --moss:#5c6b3f;
  --tape:rgba(226,212,178,0.9); --shadow:rgba(43,36,32,0.28);
  --font-display:'Fraunces',serif; --font-hand:'Caveat',cursive;
  --font-body:'Source Serif 4',serif; --font-mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;
  /* No swipe anywhere should ever reload this page. The in-page pull-to-refresh
     gesture has been removed in favour of the explicit refresh button in the
     header; this stops the BROWSER's own pull-to-refresh as well, for the case
     where the album is opened as an ordinary Safari tab rather than from the
     Home Screen icon. */
  overscroll-behavior-y:contain;overscroll-behavior-x:none;}
body{font-family:var(--font-body);color:var(--ink);
  background:#000;
  min-height:100%;overflow-x:hidden;}
::selection{background:var(--gold-bright);color:var(--ink);}
button{font-family:inherit;cursor:pointer;}
input,textarea{font-family:inherit;}
:focus-visible{outline:3px solid var(--purple);outline-offset:2px;}

#app{max-width:1080px;margin:0 auto;padding:10px 16px 80px;}
.header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:6px;flex-wrap:wrap;}
.title-block h1{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,6vw,44px);margin:0;line-height:1;color:var(--ink);letter-spacing:-0.01em;}
.title-block .sub{font-family:var(--font-hand);font-size:20px;color:var(--ink-soft);margin-top:2px;}
.ledger-toggle{display:flex;align-items:center;gap:8px;background:var(--paper-light);border:1px solid var(--paper-deep);border-radius:999px;padding:6px 12px 6px 8px;font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);box-shadow:0 1px 2px var(--shadow);}
.switch{position:relative;width:34px;height:19px;background:#c9b896;border-radius:999px;transition:background .2s;flex-shrink:0;}
.switch.on{background:var(--purple);}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;background:#fff;border-radius:50%;transition:left .2s;box-shadow:0 1px 2px rgba(0,0,0,.3);}
.switch.on::after{left:17px;}

.tabs{display:flex;gap:6px;margin:0 0 12px;flex-wrap:wrap;align-items:center;}
.tab{font-family:var(--font-display);font-weight:600;font-size:14px;padding:8px 16px 7px;border-radius:8px 8px 2px 2px;border:1px solid transparent;background:transparent;color:rgba(247,239,220,0.75);border-bottom:3px solid transparent;}
.tab.active{background:var(--paper-light);color:var(--ink);border-bottom:3px solid var(--purple);box-shadow:0 1px 3px var(--shadow);}
.tab .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle;}
/* Icon-only refresh control. Visually small, but min 44x40 so it is still a
   comfortable thumb target on a phone. */
.tab-icon{padding:8px 12px 7px;min-width:44px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;font-size:17px;line-height:1;}
.tab-icon .glyph{display:inline-block;}
.tab-icon:disabled{opacity:1;}
.tab-icon.spinning{color:var(--gold-bright);}
.tab-icon.spinning .glyph{animation:tabspin .7s linear infinite;}
@keyframes tabspin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.tab[data-tab="dad"] .dot{background:var(--purple);}
.tab[data-tab="son"] .dot{background:var(--gold-bright);}

.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px;}
.pill{font-size:12.5px;font-family:var(--font-mono);padding:5px 11px;border-radius:999px;border:1px solid var(--paper-deep);background:var(--paper-light);color:var(--ink-soft);}
.pill.active{background:var(--ink);color:var(--paper-light);border-color:var(--ink);}
.pill.special{border-style:dashed;}
.pill.special.fav.active{background:var(--gold-bright);color:#2B2420;border-color:var(--gold);font-weight:700;}
.pill.special.graded.active{background:var(--purple);color:var(--paper-light);border-color:var(--purple);font-weight:700;}
.pill-sep{display:inline-block;width:1px;height:18px;background:var(--paper-deep);opacity:.7;align-self:center;margin:0 2px;}
.pin-stars{position:absolute;top:4px;left:5px;display:flex;gap:1px;z-index:3;pointer-events:none;}
.fav-star{font-size:16px;line-height:1;text-shadow:0 0 3px rgba(0,0,0,.95),0 1px 2px rgba(0,0,0,.85);}
.fav-star.leo{color:#e0a91b;}
.fav-star.dad{color:#b07fe0;}
.fav-row{display:flex;gap:8px;margin:6px 0 12px;}
.fav-btn{flex:1;font-family:var(--font-mono);font-size:12px;padding:8px 6px;border-radius:8px;border:1px solid var(--paper-deep);background:var(--paper-light);color:var(--ink-soft);cursor:pointer;text-align:center;}
.fav-btn.leo.on{background:var(--gold-bright);border-color:var(--gold);color:#2B2420;font-weight:700;}
.fav-btn.dad.on{background:var(--purple);border-color:var(--purple);color:#F7EFDC;font-weight:700;}
.sale-row{display:flex;gap:8px;margin:-6px 0 12px;flex-wrap:wrap;}
.sale-btn{flex:1;min-width:96px;font-family:var(--font-mono);font-size:12px;padding:8px 6px;border-radius:8px;border:1px solid var(--paper-deep);background:var(--paper-light);color:var(--ink-soft);cursor:pointer;text-align:center;}
.sale-btn.on{background:var(--moss);border-color:var(--moss);color:#F7EFDC;font-weight:700;}
.sale-mark{font-size:14px;line-height:1;color:#9ec46a;text-shadow:0 0 3px rgba(0,0,0,.95),0 1px 2px rgba(0,0,0,.85);}
/* Hidden cards render inline in Dad's grid with this watermark. DAD_MODE-gated. */
.hidden-wm{position:absolute;inset:0;z-index:6;pointer-events:none;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.hidden-wm span{display:block;width:160%;text-align:center;transform:rotate(-20deg);font-family:var(--font-mono);font-weight:700;letter-spacing:.28em;font-size:13px;line-height:1.1;padding:3px 0;color:#fff;background:rgba(18,15,11,.58);border-top:1px solid rgba(255,255,255,.6);border-bottom:1px solid rgba(255,255,255,.6);text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 7px rgba(0,0,0,.8);}
.hidden-wm.lg span{font-size:22px;letter-spacing:.34em;padding:7px 0;}
.hidden-chip{display:inline-block;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.16em;color:#fff;background:rgba(18,15,11,.82);border:1px solid rgba(255,255,255,.38);border-radius:999px;padding:2px 9px;margin-left:8px;vertical-align:middle;}
.pill.special.sale.active{background:var(--moss);color:var(--paper-light);border-color:var(--moss);font-weight:700;}
.pill.special.hiddenonly.active{background:#3b332a;color:#F7EFDC;border-color:#3b332a;font-weight:700;}
.search-wrap{position:relative;flex:1;min-width:160px;}
.search-wrap input{width:100%;padding:7px 12px;border-radius:999px;border:1px solid var(--paper-deep);background:var(--paper-light);font-family:var(--font-mono);font-size:12.5px;color:var(--ink);}
.search-wrap input::placeholder{color:#9c9080;}

.corkboard{background:radial-gradient(circle at 15% 20%, rgba(0,0,0,0.10) 0, transparent 3%),radial-gradient(circle at 60% 70%, rgba(0,0,0,0.10) 0, transparent 3%),radial-gradient(circle at 85% 35%, rgba(0,0,0,0.10) 0, transparent 3%),radial-gradient(circle at 35% 85%, rgba(0,0,0,0.10) 0, transparent 3%),linear-gradient(135deg,#a9764f,#8f6440 60%,#7d5636);border-radius:16px;padding:10px;box-shadow:inset 0 2px 14px rgba(0,0,0,0.35), 0 4px 16px var(--shadow);}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:2px;}
@media(min-width:700px){
  .grid{grid-template-columns:repeat(4,1fr);}
}
.pin-card{background:#000;border-radius:3px;box-shadow:0 3px 8px rgba(0,0,0,.4);position:relative;transition:transform .15s ease;cursor:pointer;}
.pin-card:hover{transform:scale(1.015);}
.pin-card:active{transform:scale(.99);}
.pin-photo{width:100%;aspect-ratio:2.5/3.5;background:linear-gradient(135deg,#2a2a2a,#161616);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;}
.pin-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.placeholder-ph{font-family:var(--font-display);font-weight:600;font-size:26px;color:#7a7a7a;text-align:center;padding:8px;}
.pin-owner{position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 2px #000;z-index:2;cursor:pointer;}
.pin-owner::before{content:'';position:absolute;top:-12px;left:-12px;right:-12px;bottom:-12px;}
.pin-owner.dad{background:var(--purple);}
.pin-owner.son{background:var(--gold-bright);}
.pin-lock{position:absolute;top:6px;left:6px;font-size:12px;background:rgba(255,255,255,.85);border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;z-index:2;}
.pin-name{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 6px;background:linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,0));font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:12.5px;font-weight:600;color:#fff;text-align:center;line-height:1.2;text-transform:uppercase;letter-spacing:.02em;}
.pin-top-stack{position:absolute;left:0;right:0;top:0;z-index:1;display:flex;flex-direction:column;}
.pin-price-banner{padding:5px 22px 10px 6px;background:linear-gradient(to bottom, rgba(92,107,63,.92), rgba(92,107,63,0));font-family:var(--font-mono);font-size:11px;font-weight:700;color:#fff;text-align:center;line-height:1.25;white-space:normal;word-break:break-word;}
.pin-tag-banner{padding:4px 22px 8px 6px;background:linear-gradient(to bottom, rgba(85,37,131,.88), rgba(85,37,131,0));font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:12.5px;font-weight:600;color:#fff;text-align:center;line-height:1.25;text-transform:uppercase;letter-spacing:.02em;white-space:normal;word-break:break-word;}
.empty-note{font-family:var(--font-hand);font-size:22px;color:rgba(255,255,255,.85);text-align:center;padding:40px 20px;}
.empty-note-plain{font-family:var(--font-hand);font-size:22px;color:rgba(247,239,220,0.75);text-align:center;padding:40px 20px;grid-column:1/-1;}

.overlay{position:fixed;inset:0;background:rgba(20,15,10,.55);z-index:50;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
.overlay.show{opacity:1;pointer-events:auto;}
@media(min-width:760px){.overlay{align-items:center;}}
.spread{background:var(--paper-light);width:100%;max-width:820px;max-height:94vh;max-height:94dvh;overflow-y:auto;border-radius:18px 18px 0 0;box-shadow:0 -6px 30px rgba(0,0,0,.4);transform:translateY(30px);transition:transform .25s ease;padding:0 0 24px;}
.close-fab{position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);right:14px;z-index:100;width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--paper-light);display:flex;align-items:center;justify-content:center;font-size:19px;box-shadow:0 3px 10px rgba(0,0,0,.45);border:none;}
.nav-arrow-btn{position:fixed;top:50%;transform:translateY(-50%);z-index:99;width:46px;height:46px;border-radius:50%;background:rgba(43,36,32,0.55);color:#F7EFDC;display:flex;align-items:center;justify-content:center;font-size:22px;border:none;cursor:pointer;}
.nav-arrow-btn.prev{left:14px;}
.nav-arrow-btn.next{right:14px;}
.nav-arrow-btn:disabled{opacity:0.25;cursor:default;}
@media(min-width:760px){.spread{border-radius:18px;transform:translateY(10px);}}
.overlay.show .spread{transform:translateY(0);}
.spread-top{display:flex;justify-content:flex-end;gap:8px;padding:12px 14px 0;position:sticky;top:0;background:var(--paper-light);z-index:2;}
.icon-btn{background:var(--paper);border:1px solid var(--paper-deep);border-radius:8px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--ink-soft);}
.spread-body{display:flex;flex-direction:column;gap:0;padding:6px 22px 0;}
@media(min-width:640px){.spread-body{flex-direction:row;gap:26px;padding:6px 28px 0;}}
.photo-stage{flex:0 0 auto;width:100%;max-width:280px;margin:8px auto 0;perspective:1200px;}
@media(min-width:640px){.photo-stage{margin:8px 0 0;}}
.flip-card{position:relative;width:100%;aspect-ratio:2.5/3.5;cursor:pointer;}
.flip-inner{position:relative;width:100%;height:100%;transition:transform .55s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d;}
.flip-card.flipped .flip-inner{transform:rotateY(180deg);}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:6px;overflow:hidden;background:linear-gradient(135deg,#efe5cf,#e2d3ae);border:6px solid #fff;box-shadow:0 8px 20px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;}
.flip-face img{width:100%;height:100%;object-fit:cover;}
.flip-face.back{transform:rotateY(180deg);}
.tape-corner{position:absolute;width:34px;height:16px;background:var(--tape);opacity:.85;box-shadow:0 1px 2px rgba(0,0,0,.15);}
.tape-corner.tl{top:-8px;left:14px;transform:rotate(-8deg);}
.tape-corner.tr{top:-8px;right:14px;transform:rotate(7deg);}
.photo-fix-btn{position:absolute;bottom:6px;right:6px;z-index:2;width:26px;height:26px;border-radius:50%;background:rgba(43,36,32,0.72);color:#F7EFDC;border:none;font-size:12px;display:flex;align-items:center;justify-content:center;}
.photo-adjust-btn{position:absolute;bottom:6px;left:6px;z-index:2;padding:5px 9px;border-radius:12px;background:rgba(43,36,32,0.72);color:#F7EFDC;border:none;font-family:var(--font-mono);font-size:10.5px;display:flex;align-items:center;gap:3px;}
.photo-revert-btn{position:absolute;top:6px;right:6px;z-index:2;padding:5px 9px;border-radius:12px;background:rgba(140,58,42,0.85);color:#F7EFDC;border:none;font-family:var(--font-mono);font-size:10.5px;display:flex;align-items:center;gap:3px;}
.lightbox{position:fixed;inset:0;background:rgba(10,8,6,0.94);z-index:200;display:flex;align-items:center;justify-content:center;padding:env(safe-area-inset-top,20px) 16px env(safe-area-inset-bottom,20px);overflow:hidden;}
.photo-editor{position:fixed;inset:0;background:#0a0806;z-index:250;overflow-y:auto;padding:env(safe-area-inset-top,16px) 16px calc(env(safe-area-inset-bottom,16px) + 20px);}
.pe-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.pe-title{font-family:var(--font-display);font-weight:700;font-size:18px;color:#F7EFDC;}
.pe-stage{position:relative;width:100%;max-width:480px;margin:0 auto;touch-action:none;background:#000;border-radius:8px;overflow:hidden;}
.pe-stage img{display:block;width:100%;height:auto;user-select:none;-webkit-user-select:none;pointer-events:none;}
.pe-handle{position:absolute;width:30px;height:30px;margin-left:-15px;margin-top:-15px;border-radius:50%;background:rgba(224,169,27,0.85);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.5);touch-action:none;cursor:grab;}


.pe-handle:active{cursor:grabbing;background:var(--gold-bright);}
.pe-quad-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.pe-preview-label{font-family:var(--font-mono);font-size:11px;color:rgba(247,239,220,0.6);text-align:center;margin:14px 0 6px;text-transform:uppercase;letter-spacing:.05em;}
.pe-preview-stage{max-width:280px;margin:0 auto;background:#000;border-radius:8px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.5);}
.pe-preview-stage canvas{display:block;width:100%;height:auto;}
.pe-controls{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px;}
.pe-btn{font-family:var(--font-mono);font-size:12.5px;padding:9px 16px;border-radius:8px;border:1px solid rgba(247,239,220,0.3);background:rgba(247,239,220,0.08);color:#F7EFDC;}
.pe-btn.primary{background:var(--purple);border-color:var(--purple);font-family:var(--font-display);font-weight:600;}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;cursor:pointer;}
.lightbox-close{position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);right:14px;z-index:201;width:42px;height:42px;border-radius:50%;background:rgba(247,239,220,0.15);color:#F7EFDC;border:none;font-size:19px;display:flex;align-items:center;justify-content:center;}
.lightbox-hint{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);left:0;right:0;text-align:center;font-family:var(--font-mono);font-size:10.5px;color:rgba(247,239,220,0.7);letter-spacing:.03em;text-transform:uppercase;}
/* 2026-10-03 — v1 ruling, now LIVE here too. v1 renders .album-photo with NO
   HIDDEN watermark over the image. Gideon: "the full picture shouldn't say
   hidden". The watermark's job is to flag at a glance, in the grid, which cards
   Leo cannot see; full screen is for looking at the card itself. Keep .hidden-wm
   on the grid pin (album.js tile) and on the detail spread (album.js detail),
   and keep the .hidden-chip in .album-info — but never put .hidden-wm inside
   .album-photo, and never inside the lightbox.
   As of 2026-10-05 v2 HAS both an album-mode full-screen view and a lightbox,
   so this rule is now load-bearing rather than ported-but-unused. */
.album-fullscreen{position:fixed;inset:0;background:#000;z-index:150;overflow:hidden;}
.album-photo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden;}
.album-flip-btn{position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);left:14px;z-index:151;background:rgba(247,239,220,0.15);color:#F7EFDC;border:none;border-radius:999px;padding:12px 20px;font-family:var(--font-mono);font-size:15px;}
.album-hint{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);left:0;right:0;text-align:center;font-family:var(--font-mono);font-size:10px;color:rgba(247,239,220,0.65);letter-spacing:.03em;text-transform:uppercase;pointer-events:none;}
.album-photo .photo-adjust-btn{bottom:calc(env(safe-area-inset-bottom,0px) + 60px);padding:8px 13px;font-size:12.5px;}
.album-photo .photo-fix-btn{bottom:calc(env(safe-area-inset-bottom,0px) + 60px);width:32px;height:32px;font-size:14px;}
.album-photo .photo-revert-btn{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 108px);right:6px;padding:8px 13px;font-size:12.5px;}
.album-info{position:absolute;left:0;right:0;bottom:0;max-height:85%;overflow-y:auto;background:var(--paper-light);border-radius:18px 18px 0 0;padding:18px 20px calc(env(safe-area-inset-bottom,0px) + 24px);transform:translateY(100%);transition:transform .3s ease;box-shadow:0 -6px 30px rgba(0,0,0,.5);}
@media(min-width:700px){
  .album-info{left:16px;right:auto;bottom:16px;width:340px;max-height:82vh;border-radius:14px;padding:16px 18px;transform:translateY(120%);box-shadow:0 8px 26px rgba(0,0,0,.5);}
  .album-info.show{transform:translateY(0);}
}
.album-info.show{transform:translateY(0);}
.flip-hint{text-align:center;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-soft);margin-top:10px;letter-spacing:.03em;text-transform:uppercase;}
.card-info{flex:1;padding:18px 0 8px;min-width:0;}
.owner-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:11px;padding:3px 10px;border-radius:999px;margin-bottom:8px;letter-spacing:.02em;}
.owner-badge.dad{background:rgba(85,37,131,.12);color:var(--purple);}
.owner-badge.son{background:rgba(224,169,27,.16);color:#8a6510;}
.card-name{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,4vw,30px);line-height:1.08;margin:0 0 2px;}
.card-tags{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 14px;}
.tag-chip{font-family:var(--font-mono);font-size:10.5px;padding:3px 9px;border-radius:5px;text-transform:uppercase;letter-spacing:.03em;background:rgba(85,37,131,.12);color:var(--purple);}
.stat-block{border-top:1px solid var(--paper-deep);border-bottom:1px solid var(--paper-deep);padding:10px 0;margin-bottom:16px;}
.stat-row{display:flex;justify-content:space-between;gap:10px;font-family:var(--font-mono);font-size:14px;padding:3px 0;color:var(--ink);}
.stat-row .k{color:var(--ink-soft);flex-shrink:0;}
.stat-row .v{text-align:right;flex:1;min-width:0;word-break:break-word;}
.stat-edit-input{border:none;border-bottom:1px dashed var(--paper-deep);background:transparent;font-family:var(--font-mono);font-size:14px;color:var(--ink);text-align:right;width:60%;padding:1px 2px;resize:none;overflow:hidden;line-height:1.4;}
.stat-edit-input:focus{border-bottom:1px dashed var(--purple);}
.story-label{font-family:var(--font-hand);font-size:21px;color:var(--rust);margin:14px 0 2px;display:flex;align-items:center;gap:8px;}
.story-label.thesis{color:var(--purple);margin-top:0;}
.save-indicator{font-family:var(--font-mono);font-size:10px;color:var(--moss);opacity:0;transition:opacity .4s;}
.save-indicator.show{opacity:1;}
.canvas-input{width:100%;border:none;background:transparent;resize:none;overflow:hidden;font-family:var(--font-body);font-size:16.5px;line-height:1.55;color:var(--ink);padding:2px 2px 6px;border-bottom:1px dashed var(--paper-deep);}
.canvas-input::placeholder{color:var(--ink-soft);font-style:italic;opacity:.75;}
.canvas-input:focus{border-bottom:1px dashed var(--purple);}
.story-text{font-family:var(--font-body);font-size:16.5px;line-height:1.55;color:var(--ink);white-space:pre-wrap;}
.story-empty{font-family:var(--font-body);font-style:italic;color:var(--ink-soft);font-size:15px;}
.tag-rename-input:hover{border-color:var(--paper-deep) !important;background:var(--paper) !important;}
.tag-rename-input:focus{border-color:var(--gold-bright) !important;background:var(--paper) !important;outline:none;}
.btn{font-family:var(--font-display);font-weight:600;font-size:13px;padding:7px 14px;border-radius:8px;border:none;}
.btn.primary{background:var(--purple);color:#fff;}
.btn.ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--paper-deep);}
.listing-box{margin-top:14px;padding:9px 11px;background:var(--paper);border-radius:8px;font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);line-height:1.5;word-break:break-word;}
.listing-box a{color:var(--purple);}
.ledger-box{margin-top:10px;padding:10px 12px;background:var(--paper);border-radius:8px;border:1px dashed var(--paper-deep);}
.ledger-box .stat-row{font-size:12px;}
.ledger-box .title{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:4px;}
.footer-note{text-align:center;font-family:var(--font-hand);font-size:16px;color:rgba(247,239,220,0.6);margin-top:26px;}
/* Selection total, 2026-09-28. Styling only, and it carries no value -- the
   markup is built by owner-only/price.js, which a child never downloads, so an
   unused rule is all this is in Leo's browser. Same arrangement as
   .pin-price-banner above, which has always lived here. */
.selection-total{max-width:600px;margin:26px auto 0;padding:12px 16px;border:1px solid rgba(247,239,220,0.28);border-radius:10px;background:rgba(43,36,32,0.55);font-family:var(--font-mono);text-align:center;color:#F7EFDC;box-sizing:border-box;}
.selection-total .st-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:rgba(247,239,220,0.6);margin-bottom:4px;}
.selection-total .st-amount{font-size:21px;font-weight:700;letter-spacing:.01em;}
.selection-total .st-note{font-size:11px;color:rgba(247,239,220,0.6);margin-top:5px;line-height:1.45;}
#toastBanner{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#2B2420;color:#F7EFDC;padding:10px 16px;border-radius:8px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;z-index:999;max-width:88%;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.4);opacity:0;transition:opacity .3s;pointer-events:none;}
#toastBanner.show{opacity:1;}

/* ---- WALL MOUNTS -- ported from the deployed v1 build (2026-10-04) ------- */
.wm-wrap{margin-top:10px;}
.wm-intro{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-soft);margin:0 2px 12px;line-height:1.55;}
.wm-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px;}
.wm-mount{background:var(--paper-light);border:1px solid var(--paper-deep);border-radius:12px;padding:10px;}
.wm-head{display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.wm-name{flex:1;min-width:0;font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--ink);background:transparent;border:1px solid transparent;border-radius:6px;padding:4px 6px;}
.wm-name:focus{outline:none;border-color:var(--paper-deep);background:var(--paper);}
.wm-count{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-soft);white-space:nowrap;}
.wm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.wm-slot{position:relative;aspect-ratio:5/7;border-radius:8px;border:1px dashed var(--paper-deep);background:var(--paper);overflow:hidden;display:flex;align-items:center;justify-content:center;}
.wm-slot.filled{border-style:solid;}
.wm-slot.noted{border-style:solid;background:#efe6d2;}
.wm-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;}
.wm-ph{font-family:var(--font-mono);font-weight:700;font-size:15px;color:var(--ink-soft);}
.wm-cap{position:absolute;left:0;right:0;bottom:0;background:rgba(18,15,11,.72);color:#F7EFDC;font-family:var(--font-mono);font-size:9px;line-height:1.3;padding:2px 3px;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.wm-note{position:absolute;inset:0;padding:6px 5px;font-family:var(--font-mono);font-size:10px;line-height:1.35;color:var(--ink);overflow:auto;white-space:pre-wrap;word-break:break-word;cursor:text;}
.wm-x{position:absolute;top:2px;right:2px;z-index:4;width:18px;height:18px;border-radius:50%;border:none;background:rgba(18,15,11,.72);color:#F7EFDC;font-size:11px;line-height:18px;padding:0;cursor:pointer;}
.wm-acts{display:flex;flex-direction:column;gap:4px;}
.wm-acts button{font-family:var(--font-mono);font-size:10px;padding:3px 8px;border-radius:999px;border:1px solid var(--paper-deep);background:var(--paper-light);color:var(--ink-soft);cursor:pointer;}
.wm-noteinput{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;border:1px solid var(--moss);border-radius:8px;padding:5px;font-family:var(--font-mono);font-size:10px;line-height:1.35;resize:none;background:var(--paper-light);color:var(--ink);}
.wm-picker{position:fixed;inset:0;z-index:230;background:rgba(18,15,11,.72);display:flex;align-items:flex-end;justify-content:center;}
.wm-pbox{background:var(--paper);width:100%;max-width:720px;max-height:88vh;border-radius:14px 14px 0 0;display:flex;flex-direction:column;overflow:hidden;}
.wm-phead{padding:12px 14px 10px;border-bottom:1px solid var(--paper-deep);}
.wm-ptitle{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12.5px;font-weight:700;color:var(--ink);}
.wm-ptitle button{margin-left:auto;border:none;background:transparent;font-size:18px;line-height:1;color:var(--ink-soft);cursor:pointer;}
.wm-psearch{width:100%;box-sizing:border-box;margin-top:9px;padding:8px 12px;border-radius:999px;border:1px solid var(--paper-deep);background:var(--paper-light);font-family:var(--font-mono);font-size:13px;color:var(--ink);}
.wm-plist{overflow:auto;-webkit-overflow-scrolling:touch;}
.wm-row{display:flex;align-items:center;gap:10px;padding:7px 14px;border-bottom:1px solid rgba(0,0,0,.06);cursor:pointer;}
.wm-row.placed{opacity:.45;}
.wm-thumb{width:34px;height:48px;border-radius:4px;background:var(--paper-deep);object-fit:cover;flex:none;display:block;}
.wm-rtext{flex:1;min-width:0;}
.wm-rp{font-family:var(--font-mono);font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wm-rs{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wm-badge{flex:none;font-family:var(--font-mono);font-size:9.5px;border-radius:999px;padding:3px 8px;white-space:nowrap;}
.wm-badge.free{background:#dfe9d2;color:#4a5c36;border:1px solid #b9cca0;}
.wm-badge.taken{background:#e6ddcb;color:#6b5f49;border:1px solid var(--paper-deep);}
.wm-confirm{position:fixed;inset:0;z-index:240;background:rgba(18,15,11,.78);display:flex;align-items:center;justify-content:center;padding:20px;}
.wm-cbox{background:var(--paper);border-radius:12px;padding:18px;max-width:380px;width:100%;}
.wm-cbox p{font-family:var(--font-mono);font-size:12.5px;line-height:1.55;color:var(--ink);margin:0 0 14px;}
.wm-crow{display:flex;gap:8px;}
.wm-crow button{flex:1;font-family:var(--font-mono);font-size:12px;padding:9px;border-radius:8px;border:1px solid var(--paper-deep);background:var(--paper-light);color:var(--ink-soft);cursor:pointer;}
.wm-crow button.go{background:var(--moss);border-color:var(--moss);color:#F7EFDC;font-weight:700;}

/* ==========================================================================
 * AMENDMENTS -- album-v2 only. Everything above this line is the ported file.
 * ========================================================================== */

/* ---- Login page (new: there was no server-side login before) ------------ */
body.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:linear-gradient(160deg,#3b1f6b,#1d1030 70%);padding:24px;}
.login-card{background:var(--paper-light);border:1px solid var(--paper-deep);border-radius:14px;
  padding:28px 26px 22px;max-width:360px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.5);}
.login-card h1{font-family:var(--font-display);font-size:30px;margin:0;line-height:1;}
.login-card .sub{font-family:var(--font-hand);font-size:20px;color:var(--ink-soft);margin:2px 0 18px;}
.login-card label{display:block;font-family:var(--font-mono);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:12px;}
.login-card input{display:block;width:100%;margin-top:5px;padding:10px 12px;border-radius:8px;
  border:1px solid var(--paper-deep);background:#fff;font-family:var(--font-body);font-size:16px;}
.login-card button{width:100%;margin-top:6px;padding:12px;border-radius:8px;border:none;
  background:var(--purple);color:var(--paper-light);font-family:var(--font-display);
  font-weight:600;font-size:15px;}
.login-card .err{background:#8c3a2a;color:#F7EFDC;font-family:var(--font-mono);font-size:12px;
  padding:8px 10px;border-radius:6px;margin:0 0 14px;}
.login-card .hint{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-soft);
  line-height:1.5;margin:16px 0 0;}

/* ---- Shell chrome ------------------------------------------------------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  max-width:1080px;margin:0 auto;padding:10px 16px 4px;}
.album-title{font-family:var(--font-display);font-weight:700;margin:0;line-height:1;
  font-size:clamp(26px,5.5vw,40px);color:var(--paper-light);}
.topbar-actions{display:flex;gap:6px;}
/* Z1 2026-10-12: scoped to the (hidden) topbar. Unscoped, it overrode v1's
   34x34 paper .icon-btn on the quick-edit and photo-editor close buttons. */
.topbar .icon-btn{min-width:44px;min-height:40px;display:inline-flex;align-items:center;
  justify-content:center;font-size:19px;line-height:1;border-radius:8px;
  border:1px solid rgba(247,239,220,.28);background:rgba(247,239,220,.08);color:var(--paper-light);}
.topbar .icon-btn.spinning{color:var(--gold-bright);animation:tabspin .7s linear infinite;}
.status{max-width:1080px;margin:0 auto;padding:0 16px;font-family:var(--font-mono);
  font-size:11.5px;color:rgba(247,239,220,.7);min-height:18px;}
/* Z1 (2026-10-12): v1 has no status line above the grid, so an empty one
   takes no space; it only appears while something is loading or saving. */
.status:empty{display:none;}
/* Width and padding only: v1 had these on #app, which v2 has no element for.
   The columns and the 2px gap come from the ported .grid above -- do not
   override them here, or the pin grid stops looking like v1's.
   Top padding 12px + .filters' 4px bottom padding = v1's 16px between the
   search box and the first row of tiles (measured at 390px and 820px). */
.grid{max-width:1080px;margin:0 auto;padding:12px 16px 0;}
/* v1's #app ends with 80px of padding BELOW the footer; the footer itself sits
   26px under the tiles (.footer-note margin-top). */
#footerNote{max-width:1080px;margin-left:auto;margin-right:auto;padding:0 16px 80px;}
#selectionTotal{padding:0 16px;}
/* v1's Wall Mounts and Wish List live inside #app (max-width 1080, 16px sides);
   v2's #view had no rule at all, so the board ran edge to edge and got an
   extra column on an iPad. 6px top restores v1's gap under the tools row. */
#view:not(:empty){max-width:1080px;margin:0 auto;padding:6px 16px 0;}
.filters{max-width:1080px;margin:0 auto;padding:6px 16px 4px;}

/* ==========================================================================
 * UI PARITY WITH v1 -- 2026-10-05.
 *
 * Everything in this block exists because v2's chrome had drifted from the
 * deployed v1 build (200,932 bytes, verified by re-fetching the served bytes).
 * Each rule says which v1 element it is matching, because the point of the
 * block is that the two apps look and feel the same on a phone.
 * ========================================================================== */

/* --- the two nav rows, v1's `.tabs` ------------------------------------- */
/* v1 has these inside #app, which v2 has no element for, so the width and the
   padding are applied here instead. The look comes from the ported .tabs/.tab
   rules above -- do not restate those. */
.navrow{max-width:1080px;margin:0 auto 6px;padding:0 16px;}
.navrow.tools{margin-top:-2px;}   /* v1: 12px - 8px = 4px between the rows */
.navrow .spacer{margin-left:auto;}
.navrow .sortlabel{font-family:var(--font-mono);font-size:10.5px;
  align-self:center;margin-right:4px;color:var(--ink-soft);}
#tagFilters .sortlabel{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-soft);
  align-self:center;margin-right:2px;}
.navrow .ledger-toggle{max-width:170px;}

/* --- THE PRICE COMES OFF THE ARTWORK -----------------------------------
 *
 * Gideon, 2026-10-05: "Price is printed across the card artwork ... Move it
 * off the art." v1 paints `.pin-price-banner` INSIDE `.pin-photo`, over the
 * top of the image; v2 now paints it on its own strip UNDER the photo, where
 * it cannot sit over a face or an autograph. The old overlay rule is kept
 * above, unused by the price, because `.pin-top-stack` still carries the TAG
 * banner -- which is text he chose and expects over the art.
 *
 * It is still gated on the price toggle, exactly as v1 gates it on
 * SHOW_PRICES: with prices toggled off there is no strip at all. */
.pin-card{display:flex;flex-direction:column;}
.pin-card .pin-photo{flex:none;}
.pin-price-line{font-family:var(--font-mono);font-size:11px;font-weight:700;
  color:#F7EFDC;background:#1f1b16;text-align:center;line-height:1.25;
  padding:4px 5px 5px;border-top:1px solid rgba(247,239,220,.14);
  white-space:normal;word-break:break-word;}

/* --- the card sheet: a centred panel, not an edge-to-edge sprawl --------
 *
 * v1 puts the detail inside `.overlay > .spread`, which is max-width:820px and
 * centred, with a dimmed backdrop. v2's `.sheet` was `inset:auto 0 0 0`, so on
 * a 2560px monitor the buttons stretched the whole width and the content sat
 * in a sea of gaps. Same 820px, same bottom-sheet-on-a-phone behaviour. */
.scrim{position:fixed;inset:0;background:rgba(20,15,10,.55);z-index:210;}
.sheet{position:fixed;left:50%;right:auto;bottom:0;top:auto;
  transform:translateX(-50%);width:100%;max-width:820px;
  max-height:88vh;max-height:88dvh;overflow-y:auto;z-index:220;
  background:var(--paper);border-radius:16px 16px 0 0;
  padding:18px 20px calc(env(safe-area-inset-bottom,12px) + 24px);
  box-shadow:0 -8px 40px rgba(0,0,0,.55);}
@media(min-width:760px){
  .sheet{bottom:auto;top:50%;transform:translate(-50%,-50%);
    max-height:92vh;border-radius:16px;box-shadow:0 12px 50px rgba(0,0,0,.6);}
}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
/* Menus and managers only. The card spread (.sheet.overlay) keeps v1's 16px
   (Z1, 2026-10-12: v2's 12px made the panel 4px shorter than v1's). */
.sheet:not(.overlay) .stat-block{margin-bottom:12px;}
/* Z1: unscoped so album mode's .album-info gets them too; v1's chips are
   var(--paper) with a 3px gap (paper-light vanished into the panel). */
.tag-check{display:flex;align-items:center;gap:3px;font-family:var(--font-mono);
  font-size:10.5px;background:var(--paper);padding:3px 7px;border-radius:6px;}
.tag-check input{width:13px;height:13px;}
.tag-wrap{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end;max-width:65%;}

/* A manager row (Manage Tags, Edit Categories, Hidden Cards). */
.mgr-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--paper-deep);}
.mgr-row input[type=text]{flex:1;min-width:0;border:1px solid transparent;border-radius:6px;
  padding:5px 7px;font-family:var(--font-mono);font-size:13px;background:transparent;color:var(--ink);}
.mgr-row input[type=text]:focus{border-color:var(--gold-bright);background:var(--paper-light);outline:none;}
.mgr-row .ord{display:flex;gap:4px;}
.mgr-row .ord button{width:28px;height:28px;border-radius:6px;border:1px solid var(--paper-deep);
  background:var(--paper-light);color:var(--ink-soft);font-size:12px;line-height:1;}
.mgr-add{display:flex;gap:8px;margin-top:12px;}
.mgr-add input{flex:1;min-width:0;border:1px solid var(--paper-deep);border-radius:8px;
  padding:8px 10px;font-family:var(--font-mono);font-size:13px;background:var(--paper-light);color:var(--ink);}

/* ---- CROP EDITOR: the fourteen catalogued defects ----------------------- */

/* Defect 39 -- precision was capped by CSS at 480px on a 1080px iPad.
   One value; roughly doubles the source-pixels-per-display-pixel ratio.
   Padding added so a handle dragged past the image edge (defect 44) is
   still visible and grabbable. */
.pe-stage{max-width:min(96vw,760px);}
.pe-stage-pad{position:relative;padding:34px;margin:0 auto;width:100%;
  max-width:min(96vw,760px);touch-action:none;}
.pe-stage-pad .pe-stage{max-width:100%;}

/* Defect 40 -- you were judging a 750x1050 result inside a 280px box. */
.pe-preview-stage{max-width:min(60vw,380px);}
.pe-preview-stage.one-to-one{max-width:none;width:750px;max-height:70vh;overflow:auto;}

/* Defect 41 -- on a wide screen the stage and the preview sit side by side,
   so the preview is never below the fold while a finger is on a handle.
   On a narrow screen the preview and the Save/Cancel buttons dock instead. */
.pe-layout{display:flex;flex-direction:column;align-items:center;gap:8px;}
@media (min-width:900px){
  .pe-layout{flex-direction:row;align-items:flex-start;justify-content:center;gap:24px;}
  .pe-layout > *{flex:0 1 auto;}
  .pe-side{position:sticky;top:8px;}
}
@media (max-width:899px){
  .photo-editor{padding-bottom:calc(env(safe-area-inset-bottom,16px) + 132px);}
  .pe-dock{position:fixed;left:0;right:0;bottom:0;z-index:260;display:flex;align-items:center;
    gap:10px;padding:8px 12px calc(env(safe-area-inset-bottom,8px) + 8px);
    background:rgba(10,8,6,.94);border-top:1px solid rgba(247,239,220,.18);}
  .pe-dock .pe-dock-preview{width:56px;flex:0 0 56px;border-radius:4px;background:#000;overflow:hidden;}
  .pe-dock .pe-dock-preview canvas{display:block;width:100%;height:auto;}
  .pe-dock .pe-controls{margin:0;flex:1;justify-content:flex-end;}
}

/* Defect 38 -- THE LOUPE. Your fingertip covers roughly 45-57px; the handle
   is 30px. The corner you are placing is underneath your finger and cannot be
   seen. This is a 4x magnified view of the pixels under the dragged handle,
   with crosshairs, drawn from the source canvas already in memory. */
.pe-loupe{position:absolute;z-index:12;width:132px;height:132px;border-radius:50%;
  overflow:hidden;border:3px solid #fff;box-shadow:0 4px 18px rgba(0,0,0,.7);
  background:#000;pointer-events:none;opacity:0;transition:opacity .12s;}
.pe-loupe.on{opacity:1;}
.pe-loupe canvas{display:block;width:100%;height:100%;}

/* Defect 45 -- the output is always 750x1050. If the quad you drew is not
   roughly 2.5:3.5 the card is silently stretched. Make it visible. */
.pe-readout{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:11px;color:rgba(247,239,220,.72);margin:8px 0 0;}
.pe-readout .ok{color:#9ec46a;}
.pe-readout .warn{color:var(--gold-bright);font-weight:700;}

/* Defect 46 -- fine tilt. 90-degree rotation was the only rotation available. */
.pe-slider-row{display:flex;align-items:center;gap:10px;justify-content:center;
  font-family:var(--font-mono);font-size:11px;color:rgba(247,239,220,.72);margin-top:10px;}
.pe-slider-row input[type=range]{width:min(60vw,260px);}
.pe-nudge{display:flex;gap:4px;justify-content:center;margin-top:8px;}
.pe-nudge button{min-width:40px;min-height:36px;border-radius:6px;
  border:1px solid rgba(247,239,220,.3);background:rgba(247,239,220,.08);
  color:#F7EFDC;font-family:var(--font-mono);font-size:14px;}

/* The active handle reads differently, so you can tell which corner the
   nudge buttons and the loupe are talking about. */
.pe-handle{width:34px;height:34px;margin-left:-17px;margin-top:-17px;}
.pe-handle.selected{background:var(--purple);border-color:var(--gold-bright);}
.pe-handle.dragging{background:var(--gold-bright);}
.pe-corner-label{position:absolute;transform:translate(-50%,-50%);font-family:var(--font-mono);
  font-size:9px;font-weight:700;color:#2B2420;pointer-events:none;z-index:13;}

.pe-banner{background:#8c3a2a;color:#F7EFDC;font-family:var(--font-mono);font-size:12px;
  padding:9px 12px;border-radius:6px;margin:0 auto 12px;max-width:760px;line-height:1.5;}

/* ==========================================================================
 * PARITY PACKAGE 2 -- 2026-10-09. Gideon: v2 must be IDENTICAL to v1.
 * See V2_PARITY_CHECKLIST.md for the row each rule closes.
 * ========================================================================== */

/* A1 -- the `hidden` attribute must always win. .grid / .filters set display,
   which beat the UA's [hidden]{display:none}, so the whole card grid rendered
   under WALL MOUNTS and WISH LIST. */
[hidden]{display:none !important;}

/* A2 -- v1 has no title bar: the page starts with the All / Dad / Leo row.
   The markup stays (tests and the shell reference #refreshBtn / #menuBtn); the
   menu is reachable from a ☰ tab at the end of row 1 instead. */
.topbar{display:none !important;}
.navrow:first-of-type{padding-top:10px;}

/* D1 -- the card detail is v1's `.overlay > .spread`, hosted in #sheet. The
   v2-only .sheet panel styling must not leak onto it. */
#sheet.overlay{left:0;right:0;top:0;bottom:0;transform:none;width:auto;max-width:none;
  max-height:none;background:rgba(20,15,10,.55);border-radius:0;padding:0;box-shadow:none;
  overflow:visible;z-index:50;}

/* E14 -- a mouse drag on a tile must start the reorder, not the browser's
   native image drag (seen live 2026-10-10: the native drag swallowed it). */
.pin-card img{-webkit-user-drag:none;user-select:none;}

/* E11 -- v1's Wall Mounts drag, verbatim from v1 (names frozen in v1). */
.wm-slot.filled,.wm-slot.noted{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
.wm-slot.wm-drag-src{opacity:.28;}
.wm-slot.wm-drag-over{outline:2px solid var(--moss);outline-offset:-2px;box-shadow:inset 0 0 0 3px rgba(122,142,92,.28);}
.wm-ghost{position:fixed;z-index:95;left:0;top:0;width:74px;aspect-ratio:5/7;border-radius:8px;overflow:hidden;pointer-events:none;box-shadow:0 10px 22px rgba(0,0,0,.5);opacity:.92;background:var(--paper-light);border:1px solid var(--paper-deep);transform:translate(-9999px,-9999px);}
.wm-ghost img{width:100%;height:100%;object-fit:cover;display:block;}

/* ==========================================================================
 * Z1 -- PHONE / iPAD SIDE-BY-SIDE, 2026-10-12. Verbatim v1 rules v2 lacked.
 * ========================================================================== */
/* "To grade" is amber in v1 everywhere: the on-button, the active pill, the
   ◇ mark on a tile (v1 lines 96, 97, 115). */
.sale-btn.grade.on{background:#c98a2b;border-color:#c98a2b;color:#F7EFDC;}
.grade-mark{font-size:14px;line-height:1;color:#e0a33f;text-shadow:0 0 3px rgba(0,0,0,.95),0 1px 2px rgba(0,0,0,.85);}
.pill.special.grade.active{background:#c98a2b;color:var(--paper-light);border-color:#c98a2b;font-weight:700;}
/* The wall-mount picker is v1's PHOTO TILES (v1 lines 161, 185-192). */
.wm-phint{font-family:var(--font-mono);font-size:10px;color:var(--ink-soft);margin-top:7px;}
.wm-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;padding:12px 12px 20px;}
.wm-tile{position:relative;border-radius:8px;overflow:hidden;background:var(--paper-light);border:1px solid var(--paper-deep);cursor:pointer;-webkit-tap-highlight-color:transparent;}
.wm-tile.placed{opacity:.42;}
.wm-tphoto{position:relative;aspect-ratio:5/7;background:var(--paper-deep);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.wm-tphoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.wm-tph{font-family:var(--font-mono);font-weight:700;font-size:20px;color:var(--ink-soft);}
.wm-tcap{font-family:var(--font-mono);font-size:9.5px;line-height:1.3;color:var(--ink);padding:3px 4px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wm-tmark{position:absolute;left:0;right:0;top:0;z-index:3;background:rgba(18,15,11,.78);color:#F7EFDC;font-family:var(--font-mono);font-size:8.5px;line-height:1.3;padding:2px 3px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wm-ghost .wm-gnote{padding:5px;font-family:var(--font-mono);font-size:10px;line-height:1.35;color:var(--ink);overflow:hidden;white-space:pre-wrap;word-break:break-word;}
body.wm-noscroll{touch-action:none;-webkit-user-select:none;user-select:none;}