/* PicPlots — native app UI. Rebuilt to match the live iOS/Android app
   (see design-reference/PHONE-APP-SPEC.md). Warm cream + gold, single page,
   three tabs (Top 12 / Board / Upload) + bottom sheets. Works on iOS + Android:
   safe-area insets on all four edges, touch targets, no horizontal scroll. */

:root{
  --bg:#FBFAF7;          /* live picplots.com --bg (near-white; Jesse: "on white") */
  --surface:#FFFFFF;     /* live --surface: pure white cards / sheets */
  --surface-2:#FFFDF8;   /* inputs / board (near-white) */
  --surface-soft:#F4F2EC;   /* live: secondary/pressed fills */
  --surface-muted:#F1EEE7;  /* live: hover/muted fills */
  --ink:#1E1D1A;         /* primary text */
  --ink-soft:#514c42;
  --muted:#9A948A;       /* secondary text, Open, captions */
  --faint:#B7B0A3;
  /* Gold — unified to the ELEGANT brand gold #9F7D3A (Jesse's call, 2026-07):
     the brighter #D4AF37 read "cheesy" on prices/accents, so the whole app now
     uses the wordmark's #9F7D3A for numbers, prices, badges, buttons, icons,
     active states, and board accents. (Live picplots.com uses #d4af37 for the
     logo/accents; Jesse explicitly prefers the elegant gold here — his call.) */
  --gold:#9F7D3A;        /* accent: numbers, prices, links, active */
  --gold-deep:#9F7D3A;
  --terracotta:#B4623F;
  --taupe:#A79C8A;
  --line:#E8E1D3;        /* hairlines */
  --line-soft:#EFE9DC;
  --line-strong:#D8D1C2; /* live: input borders (stronger than hairlines) */
  --grid-fine:#ECE6D9;   /* board fine gridlines (per-pixel) — phone spec */
  --grid-major:#E0D8C8;  /* board major gridlines (blocks) — phone spec */
  --btn:#C6A667;         /* primary purchase button */
  --btn-ink:#FFFFFF;
  /* live shadow system — warm-ink base rgba(35,28,14,x) */
  --shadow-soft:0 10px 24px rgba(35,28,14,.07);
  --shadow-card:0 16px 40px rgba(35,28,14,.1);
  --shadow-pill:0 4px 12px rgba(35,28,14,.08);
  /* live error / notice palette (future error, cancel-sub, destructive states) */
  --error:#B91C1C;
  --error-strong:#991B1B;
  --error-bg:#FEF2F2;
  --error-line:#FECACA;
  --amber:#92400E;
  --amber-bg:#FFFBEB;
  --amber-line:#FDE68A;
  --sat:env(safe-area-inset-top);
  --sab:env(safe-area-inset-bottom);
  --sal:env(safe-area-inset-left);
  --sar:env(safe-area-inset-right);
  --appbar-h:54px;
  /* Floating glass dock (live app: SMALLER glass dock, not a full-width bar):
     56px content height, inset from the screen edges, safe-area aware. */
  --tabbar-h:56px;
  --dock-inset:10px;   /* gap between the dock and the screen edges */
  /* space content must clear above the screen bottom (dock + gaps + safe area) */
  --dock-clear:calc(var(--tabbar-h) + var(--dock-inset) + 8px + var(--sab));
  font-synthesis:none;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;touch-action:manipulation}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overscroll-behavior:none;-webkit-tap-highlight-color:transparent;
}
button{font-family:inherit;cursor:pointer;color:inherit;border:0;background:none;-webkit-appearance:none;appearance:none}
[data-coin-commerce][hidden]{display:none!important}
input{font-family:inherit}
a{color:var(--gold-deep);text-decoration:none}
h2{margin:0;font-weight:700;letter-spacing:-.01em}

/* ---------- Standalone legal/account pages ---------- */
header.site{
  min-height:64px;padding:18px max(20px,calc((100% - 780px)/2));
  display:flex;align-items:center;border-bottom:1px solid var(--line);
  background:var(--surface);
}
header.site .brand{font-size:13px;font-weight:700;letter-spacing:.3em;color:var(--gold-deep)}
header.site .mark{
  width:28px;height:28px;display:grid;grid-template-columns:1fr 1fr;gap:3px;
  padding:5px;border:1px solid var(--gold);border-radius:7px;
}
header.site .mark i{display:block;background:var(--gold);border-radius:1px}
.back-row,.page,.site-foot{width:min(780px,calc(100% - 40px));margin-inline:auto}
.back-row{padding:20px 0 4px;font-size:13px;font-weight:600}
.page{padding:20px 0 48px;line-height:1.65}
.page h1{margin:0 0 6px;font-size:clamp(30px,7vw,46px);letter-spacing:-.035em;line-height:1.05}
.page h2{margin-top:32px;font-size:20px}
.page p,.page li{color:var(--ink-soft)}
.page ul{padding-left:22px}
.page .updated{margin-top:0;color:var(--muted);font-size:13px}
.page .notice{margin:22px 0;padding:16px 18px;border:1px solid var(--line);
  border-radius:12px;background:var(--surface-soft);color:var(--ink-soft)}
.page label{display:block;margin:14px 0 6px;font-size:13px;font-weight:650}
#manage-auth>button,#manage-code-step>button{
  min-height:44px;margin-top:10px;padding:11px 16px;border:1px solid var(--gold);
  border-radius:10px;background:var(--gold);color:#fff;font-size:14px;font-weight:700;
}
#manage-auth>button:focus-visible,#manage-code-step>button:focus-visible,
.account-action:focus-visible{
  outline:3px solid rgba(159,125,58,.28);outline-offset:2px;
}
#manage-auth>button:disabled,#manage-code-step>button:disabled{opacity:.55;cursor:not-allowed}
.account-actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 24px}
.account-action{min-height:44px;padding:11px 14px;border:1px solid var(--line-strong);border-radius:10px;
  background:var(--surface);font-size:14px;font-weight:650}
.account-action.primary{background:var(--gold);border-color:var(--gold);color:#fff}
.account-action.danger{border-color:#D9A69E;color:#A4342A}
.account-action:disabled{opacity:.55;cursor:not-allowed}
.site-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:20px 0 36px;
  border-top:1px solid var(--line);font-size:12px;color:var(--muted)}

/* ---------- App bar ---------- */
.appbar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  height:calc(var(--appbar-h) + var(--sat));
  padding:var(--sat) calc(16px + var(--sar)) 0 calc(16px + var(--sal));
  display:flex;align-items:center;justify-content:space-between;
  background:var(--bg);
}
.brand{display:flex;align-items:center;gap:8px} /* live: 8px between mark and wordmark */
.mark{width:28px;height:28px;color:var(--gold);display:block}
/* live picplots.com wordmark: spaced UPPERCASE caps, gold, in the body font
   (Space Grotesk) — .nniro-logo-mark { text-transform:uppercase; letter-spacing:.42em;
   color:var(--brand-strong); font-weight:700 }. The wide tracking is what reads
   as "Sora-like"; live's wordmark is Space Grotesk, Sora is its title font. */
.wordmark{font-weight:700;font-size:13px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold-deep)}
.appbar-context{
  text-align:right;font-size:10px;line-height:1.25;font-weight:600;
  letter-spacing:.08em;color:var(--muted);white-space:pre-line;
  font-variant-numeric:tabular-nums;
}
.appbar-context .ctx-count{display:block;font-size:11px}
.appbar-context .ctx-sub{display:block;font-size:10px}

/* ---------- Stage / views ---------- */
/* The stage runs to the screen bottom (the dock floats over it); each view
   clears the dock with --dock-clear so nothing interactive hides under glass. */
.stage{
  position:fixed;left:0;right:0;
  top:calc(var(--appbar-h) + var(--sat));
  bottom:0;
}
/* touch-action pan-y keeps vertical scrolling native while horizontal swipe
   gestures (view navigation, app.js bindSwipe) reach the pointer listeners.
   The board canvas overrides this with touch-action:none (it owns pan/pinch). */
.view{position:absolute;inset:0;display:flex;flex-direction:column;touch-action:pan-y}
.view[hidden]{display:none}
#view-top12,#view-board{padding-bottom:var(--dock-clear)}
/* swipe navigation: incoming view slides in (~220ms) from the travel direction */
.view.slide-in-left{animation:viewInL .22s cubic-bezier(.25,.8,.35,1)}
.view.slide-in-right{animation:viewInR .22s cubic-bezier(.25,.8,.35,1)}
@keyframes viewInL{from{transform:translateX(-28px);opacity:.35}to{transform:none;opacity:1}}
@keyframes viewInR{from{transform:translateX(28px);opacity:.35}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .view.slide-in-left,.view.slide-in-right{animation:none}
}

/* ---------- Top 12 grid ---------- */
/* Divider lines are drawn on a <canvas> behind the transparent cells. A 1px CSS
   border/gap rasterizes too dark on the Android emulator at fractional DPR;
   canvas hairlines composite correctly (same as the board), staying faint on
   every platform. */
.top12-wrap{flex:1;position:relative;display:flex;background:var(--bg)}
#t12-lines{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.top12-grid{
  flex:1;display:grid;
  grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);
  position:relative;z-index:1;
  padding-left:var(--sal);padding-right:var(--sar);
}
.t12-cell{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:transparent;
  position:relative;overflow:hidden;
}
.t12-cell .num{font-size:22px;font-weight:700;letter-spacing:.01em;color:var(--gold);font-variant-numeric:tabular-nums}
/* Badge tints re-checked against the LIVE iOS app (Jesse, 2026-07-16):
   02 = muted GRAY (live text-muted family), 03 = darker GOLD-BROWN — not
   terracotta red. All other ranks plain gold. */
.t12-cell.tint-taupe .num{color:#8C8478}
.t12-cell.tint-terra .num{color:#9F7D3A}
.t12-cell .state{font-size:11px;color:var(--muted);font-weight:500}
.t12-cell.taken{background-size:cover;background-position:center}
.t12-cell.taken .num,.t12-cell.taken .state{position:relative;z-index:2;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.t12-cell.taken::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.3))}

/* ---------- Board ---------- */
/* Live phone board: the canvas sits INSET in the shell with clearly rounded
   corners — the grid is clipped softly by the radius, never running to the
   screen edge. */
.board-shell{flex:1;position:relative;overflow:hidden;background:var(--bg);
  border-top:1px solid var(--line-soft);padding:10px}
#board{width:100%;height:100%;display:block;touch-action:none;cursor:grab;
  border-radius:18px;border:1px solid var(--line-soft);background:var(--surface-2)}
#board:focus:not(:focus-visible){outline:none}
#board:focus-visible{outline:3px solid rgba(159,125,58,.4);outline-offset:2px}
#board.grabbing{cursor:grabbing}
#minimap{position:absolute;right:20px;bottom:20px;width:120px;height:120px;
  border:1px solid var(--line);border-radius:11px;background:var(--surface);
  box-shadow:0 8px 20px rgba(35,27,13,.13)}   /* live navigator radius + shadow */
.board-foot{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  padding:11px calc(16px + var(--sar)) 11px calc(16px + var(--sal));
  background:var(--bg);border-top:1px solid var(--line-soft);
}
.board-hint{margin:0;font-size:12px;line-height:1.35;color:var(--muted);flex:1}
.chip{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:8px 13px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;
}
.chip .ic{width:15px;height:15px;color:var(--gold)}
.chip .ic.x{width:auto;height:auto;font-size:14px;line-height:1;font-weight:600} /* live: ✕ while the map is open */

/* ---------- Upload ---------- */
.upload-scroll{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  max-width:640px;margin-inline:auto;width:100%;
  /* bottom padding clears the floating dock — content scrolls UNDER the glass */
  padding:14px calc(16px + var(--sar)) calc(14px + var(--dock-clear)) calc(16px + var(--sal));
  display:flex;flex-direction:column;gap:13px;
}
.pick-random{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 16px;border-radius:13px;border:1.5px solid var(--gold);
  background:var(--surface);color:var(--gold-deep);font-size:15px;font-weight:600;
}
.pick-random .chev{width:18px;height:18px;color:var(--faint)}
.or-divider{display:flex;align-items:center;gap:12px;color:var(--muted);margin:2px 0}
.or-divider::before,.or-divider::after{content:"";height:1px;background:var(--line);flex:1}
.or-divider span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.xy-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.xy{display:flex;flex-direction:column;gap:6px}
.mini-label{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--muted)}
input[type=number],input[type=email],input[type=text],input[type=url]{
  width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line-strong);
  background:var(--surface-2);color:var(--ink);font-size:15px;font-weight:500;outline:none;
  transition:border-color .2s ease,box-shadow .2s ease;
}
input::placeholder{color:var(--faint);font-weight:400}
/* live focus treatment: softened gold border + 3px brand ring */
input:focus{border-color:#BFAA80;box-shadow:0 0 0 3px rgba(184,146,75,.16)}
.line-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:4px;border-top:1px solid var(--line-soft)}
.line-right{font-size:14px;color:var(--ink);font-weight:600}
.line-right.muted{color:var(--muted);font-weight:500;font-size:12px}
.price{color:var(--gold);font-weight:680;margin-left:4px}   /* live: 680 on money lines */
.field{display:flex;flex-direction:column;gap:7px}

/* option cards (coins / choose photo) */
.opt-card{
  display:flex;align-items:center;gap:12px;text-align:left;width:100%;
  padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);
}
.opt-card.photo-card{border:1.5px solid var(--gold)}
.opt-card.photo-card[aria-busy=true]{cursor:progress;background:var(--surface-soft)}
.opt-ic{flex:none;width:26px;height:26px;color:var(--ink)}
.opt-ic.gold{color:var(--gold)}
.opt-ic svg{width:100%;height:100%}
.opt-body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.opt-title{font-size:14.5px;font-weight:600;color:var(--ink)}
.opt-title.gold{color:var(--gold-deep)}
.opt-sub{font-size:12px;color:var(--muted);line-height:1.3}
.opt-card .chev{width:18px;height:18px;color:var(--faint);flex:none}
.photo-thumb{width:100%;max-height:180px;object-fit:cover;border-radius:12px;border:1px solid var(--line);margin-top:2px}

.wallet-line{font-size:15px;font-weight:600;color:var(--ink);margin-top:-4px}
.center-note{text-align:center;font-size:12.5px;color:var(--muted);margin:2px 0}

/* primary buttons */
.pay-btn{
  width:100%;padding:16px;border:none;border-radius:13px;
  background:var(--btn);color:var(--btn-ink);font-size:16px;font-weight:600;letter-spacing:.01em;
  transition:filter .15s,transform .08s ease,box-shadow .15s;
}
.pay-btn:active:not(:disabled){filter:brightness(.96);transform:scale(.99)}
.pay-btn.ready{background:var(--gold);box-shadow:0 6px 18px rgba(159,125,58,.28)}
/* consistent tactile press feedback (matches live's responsive feel) */
.opt-card,.pick-random,.applepay-btn,.chip,.use-btn,.pack,.mine-tile,.t12-cell,.side-t12-cta{
  transition:transform .08s ease,filter .12s ease,background .15s ease,border-color .15s ease}
.opt-card:active,.pick-random:active,.applepay-btn:active,.chip:active,.use-btn:active:not(:disabled),
.pack:active,.mine-tile:active,.t12-cell:active,.side-t12-cta:active{transform:scale(.985)}
@media (prefers-reduced-motion:reduce){
  .pay-btn:active:not(:disabled),.opt-card:active,.pick-random:active,.applepay-btn:active,.chip:active,
  .use-btn:active:not(:disabled),.pack:active,.mine-tile:active,.t12-cell:active,.side-t12-cta:active{transform:none}
}
.pay-btn.secondary{background:transparent;border:1px solid var(--line);color:var(--faint);box-shadow:none}
.pay-btn.secondary.ready{color:var(--gold-deep);border-color:var(--gold)}

.ghost-link{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:none;border:none;color:var(--ink-soft);font-size:13px;font-weight:500;padding:6px;
}
.ghost-link .ic{width:15px;height:15px;color:var(--ink-soft)}
.ghost-link .ext{color:var(--muted)}
.center-self{align-self:center}
.text-link{background:none;border:none;color:var(--gold-deep);font-size:13px;font-weight:600;padding:4px}

/* ---------- Tab bar: floating glass dock ---------- */
/* Live app: a SMALLER glass dock, not a full-width 64px bar — a compact
   floating inset capsule (56px content), heavier frost so the board/photos
   blur through, rounded on all corners, lifted off the home indicator.
   Blur/translucency follow the live web token family (2e579daf*.css frosted
   surfaces: rgba warm-white glass + blur), pushed to dock strength. */
.tabbar{
  position:fixed;z-index:40;
  left:calc(var(--dock-inset) + 2px + var(--sal));
  right:calc(var(--dock-inset) + 2px + var(--sar));
  bottom:calc(var(--dock-inset) + var(--sab));
  height:var(--tabbar-h);
  max-width:440px;margin-inline:auto;
  padding:5px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:4px;align-items:stretch;
  border-radius:28px;
  background:rgba(251,247,240,.55);
  backdrop-filter:saturate(180%) blur(28px);
  -webkit-backdrop-filter:saturate(180%) blur(28px);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 12px 32px rgba(35,28,14,.16), inset 0 1px 0 rgba(255,255,255,.6);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .tabbar{background:rgba(251,247,240,.94)}   /* no-blur engines: near-solid glass */
}
.tabbar button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:none;border:none;padding:4px 2px;border-radius:23px;
  color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.01em;
}
.tabbar button .tic{width:20px;height:20px}
/* active tab = frosted pill; gold icon + dark label (PHONE-APP-SPEC §1) */
.tabbar button.active{
  background:rgba(255,253,248,.85);color:var(--ink);
  box-shadow:0 2px 8px rgba(35,28,14,.12), inset 0 0 0 .5px rgba(255,255,255,.8);
}
.tabbar button.active .tic{color:var(--gold)}
/* Submission builds are intentionally browse-only until StoreKit/Play Billing
   exists. Collapse the hidden commerce tabs so the remaining Top 12 + Board
   controls stay centered instead of leaving two empty dock columns. */
html.native-browse-only .tabbar{
  grid-template-columns:repeat(2,1fr);
  max-width:240px;
}

/* ---------- Bottom sheets ---------- */
.overlay{
  position:fixed;inset:0;z-index:60;display:none;
  background:rgba(30,26,20,.34);
  align-items:flex-end;justify-content:center;
}
.overlay.show{display:flex}
.sheet{
  width:100%;max-width:640px;max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--surface);border-radius:18px 18px 0 0;   /* live + phone spec: 18px */
  padding:18px calc(18px + var(--sar)) calc(18px + var(--sab)) calc(18px + var(--sal));
  display:flex;flex-direction:column;gap:12px;
  box-shadow:0 -12px 40px rgba(35,28,14,.24);
  animation:sheetUp .26s cubic-bezier(.22,.9,.3,1);
}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sheet h2{font-size:23px}
.close-link{min-width:44px;min-height:44px;background:none;border:none;color:var(--ink);
  font-size:15px;font-weight:600;padding:8px 6px}
.mini-label.section{margin-top:4px}
.pill-box{padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);
  font-size:14px;color:var(--ink-soft)}
.pill-box b{color:var(--ink);font-weight:680}   /* live: 680 on money/total lines */
.caption{margin:0;font-size:12.5px;color:var(--muted);line-height:1.4}
.caption.center{text-align:center}
/* live legal-text colors: readable body, underlined dark-gold links, muted-gold checkbox */
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:#5D5549;line-height:1.45}
.consent input{margin-top:2px;width:17px;height:17px;accent-color:#8F7340;flex:none}
.consent a{color:#5F5033;text-decoration:underline;margin-right:8px;display:inline-block}

/* coins sheet */
.balance-card{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.use-btn{background:none;border:none;color:var(--gold);font-size:14px;font-weight:600;padding:4px 6px}
.use-btn:disabled{color:var(--faint)}
.pack-list{display:flex;flex-direction:column;gap:10px}
.pack{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);width:100%;text-align:left}
.pack .p-body{display:flex;flex-direction:column;gap:3px}
.pack .p-name{font-size:15px;font-weight:600;color:var(--ink)}
.pack .p-sub{font-size:11.5px;color:var(--muted)}
.pack .p-price{font-size:16px;font-weight:680;color:var(--gold)}   /* live: 680 on money lines */
.coins-foot{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding-top:12px;border-top:1px solid var(--line-soft);margin-top:2px}

/* ---------- In-app checkout sheet (Stripe Payment Element + Apple Pay) ---------- */
.co-summary{display:flex;align-items:center;gap:10px;padding:12px 14px;margin:2px 0 4px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.co-sum-label{font-size:14px;font-weight:600;color:var(--ink)}
.co-sum-loc{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.co-sum-price{margin-left:auto;font-size:17px;font-weight:680;color:var(--ink)}
.co-express{min-height:0;margin:2px 0}
.co-express:not(:empty){margin:6px 0}
/* stand-in Apple Pay button (mock mode; real Stripe ExpressCheckout replaces it) */
.applepay-btn{width:100%;height:46px;display:flex;align-items:center;justify-content:center;gap:7px;
  background:#000;color:#fff;border:0;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;
  font-family:-apple-system,BlinkMacSystemFont,"Space Grotesk",sans-serif;margin:2px 0}
.applepay-btn svg{margin-top:-1px}
.co-or{display:flex;align-items:center;gap:12px;margin:12px 0 8px;color:var(--muted);
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.co-or::before,.co-or::after{content:"";flex:1;height:1px;background:var(--line)}
.co-payment:not(:empty){margin:4px 0}
.co-mock-card{border:1px solid var(--line-strong);border-radius:12px;padding:12px 14px;background:var(--surface-2)}
.co-mock-field{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;color:var(--ink)}
.co-mock-field b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.co-mock-note{margin:8px 0 0;font-size:11.5px;color:var(--muted);line-height:1.4}
.co-error{margin:10px 0 0;font-size:12.5px;color:#B4462F;font-weight:600}
.co-error[hidden]{display:none}
.co-alternates{margin:12px 0 2px;padding:12px;border:1px solid #D9CBA8;border-radius:12px;background:#FFF9EA}
.co-alternates[hidden]{display:none}
.co-alt-title{margin:0 0 9px;font-size:14px;font-weight:700;color:var(--ink)}
.co-alt-list{display:flex;gap:7px;flex-wrap:wrap}
.co-alt-choice{min-height:44px;padding:10px 13px;border:1px solid var(--gold);border-radius:999px;
  background:var(--surface);color:var(--gold-deep);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.co-alt-choice:focus-visible{outline:3px solid rgba(159,125,58,.24);outline-offset:2px}
.co-alt-choice:active{transform:scale(.98)}
.co-alt-note{margin:9px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-soft)}
.conflict-only .co-express,
.conflict-only .applepay-btn,
.conflict-only .co-or,
.conflict-only .co-payment,
.conflict-only .co-mock-card,
.conflict-only .co-consent,
.conflict-only #co-pay,
.conflict-only .co-secure{display:none!important}
.co-consent{margin:12px 0 2px}
/* native "pay on the web" reassurance note */
.re-note{margin:14px 0 4px;padding:13px 15px;border-radius:12px;background:var(--surface-2);
  border:1px solid var(--line);font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.re-note b{color:var(--ink)}
.co-secure{margin-top:10px}
/* resale marketplace — listing rows */
.mk-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.mk-row{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--line);
  border-radius:13px;background:var(--surface)}
.mk-thumb{width:42px;height:42px;border-radius:9px;flex:0 0 auto;background:var(--surface-2) center/cover no-repeat;
  border:1px solid var(--line)}
.mk-body{display:flex;flex-direction:column;min-width:0;flex:1}
.mk-loc{font-weight:700;font-size:14px;color:var(--ink)}
.mk-sub{font-size:11.5px;color:var(--muted)}
.mine-badge.st-for-sale{background:var(--gold-deep);color:#fff}
/* passwordless sign-in sheet — status line under the email/code steps */
.auth-msg{margin:12px 0 0;font-size:12.5px;font-weight:600;color:var(--muted);text-align:center}
.auth-msg.err{color:#B4462F}
#auth-code{letter-spacing:.42em;font-size:19px;font-weight:700;text-align:center}
#auth-resend{display:block;margin:10px auto 0}
.checkout-sheet .pay-btn{margin-top:10px}

/* My Photos sheet — grid of a customer's own placements */
.mine-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:2px}
.mine-tile{position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:12px;
  background:var(--surface-2) center/cover no-repeat;overflow:hidden;padding:0;cursor:pointer;
  display:flex;align-items:flex-end}
.mine-tile.t12{border-color:var(--gold)}
.mine-tile .mine-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--faint)}
.mine-tile .mine-cap{position:relative;z-index:1;width:100%;padding:6px 8px;font-size:11px;font-weight:600;
  color:#FBF7F0;text-align:left;background:linear-gradient(0deg,rgba(20,17,12,.72),rgba(20,17,12,0))}
.mine-empty{margin:8px 0 2px;font-size:12.5px;color:var(--muted);line-height:1.5}
/* per-listing status pill (top-left of each tile) */
.mine-badge{position:absolute;top:6px;left:6px;z-index:2;padding:3px 7px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#2B2620;
  background:rgba(255,255,255,.92);box-shadow:0 1px 3px rgba(35,28,14,.25)}
.mine-badge.st-live{background:#2E7D46;color:#F3FBF4}
.mine-badge.st-review{background:#D8A21A;color:#2B2313}
.mine-badge.st-posting{background:#EDE6D6;color:#6B5F45}
.mine-badge.st-retry{background:#B4462F;color:#FBEDE9}

/* ---------- Placement celebration flourish ---------- */
.placed-celebrate{position:fixed;inset:0 0 auto 0;z-index:95;display:flex;align-items:flex-start;justify-content:center;
  padding-top:20vh;pointer-events:none;opacity:0}
.placed-celebrate.show{opacity:1}
.placed-celebrate .pc-card{display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:22px 30px;border-radius:20px;background:rgba(29,26,22,.97);color:#FBF7F0;
  border:1px solid rgba(224,201,109,.28);
  box-shadow:0 16px 48px rgba(35,28,14,.4);transform:scale(.82);opacity:0}
.placed-celebrate.show .pc-card{animation:pc-pop .42s cubic-bezier(.2,1.2,.3,1) forwards}
.placed-celebrate .pc-check{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#E7C860,#C99A2E);color:#2B2313}
.placed-celebrate .pc-check svg{width:30px;height:30px}
.placed-celebrate.show .pc-check svg{stroke-dasharray:26;stroke-dashoffset:26;animation:pc-check .5s .12s ease forwards}
.placed-celebrate .pc-msg{font-size:15px;font-weight:640;text-align:center;max-width:230px;line-height:1.35}
@keyframes pc-pop{from{transform:scale(.82);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes pc-check{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .placed-celebrate.show .pc-card{animation:none;transform:scale(1);opacity:1}
  .placed-celebrate.show .pc-check svg{animation:none;stroke-dashoffset:0}
}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;transform:translateX(-50%) translateY(10px);
  bottom:calc(var(--dock-clear) + 10px);z-index:80;
  max-width:88%;padding:11px 16px;border-radius:11px;
  background:rgba(33,31,27,.94);color:#FBF7F0;font-size:13px;font-weight:500;text-align:center;
  box-shadow:0 8px 24px rgba(35,28,14,.28);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:340px){
  .wordmark{font-size:12px;letter-spacing:.26em}
  .t12-cell .num{font-size:19px}
  .sheet h2{font-size:21px}
}

/* ---------- Desktop two-pane layout (board + right sidebar) ---------- */
/* Activates ONLY at ≥900px on fine-pointer devices — a wide tablet in touch
   mode keeps the 3-tab app layout above. Everything desktop-specific lives in
   this one media query; no mobile rule is modified. The sidebar hosts the
   Upload claim flow + Top 12 grid nodes moved in by app.js applyLayout().
   Geometry + card treatment follow the live site (2e579daf8262f292.css):
   centered max-width container, board card, sticky floating sidebar card. */
.sidebar{display:none}
.board-head{display:none}
.board-toolbox{display:none}
.site-footer{display:none}
/* Photo viewer works at ALL sizes (tap a plot to view + report) — base styles;
   the desktop block below re-tunes sizing for the two-pane layout. */
.lightbox{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(10,8,4,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:1.25rem;cursor:pointer;
}
.lightbox[hidden]{display:none}
.lightbox-img{max-width:92vw;max-height:78vh;border-radius:12px;object-fit:contain;cursor:default;
  box-shadow:0 24px 64px rgba(0,0,0,.5)}
.lightbox-close{position:absolute;top:calc(var(--sat) + 14px);right:16px;width:2.4rem;height:2.4rem;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.92);border:0;border-radius:50%;
  color:#333;font-size:1.15rem;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.lightbox-info{position:absolute;bottom:calc(var(--sab) + 1.4rem);left:50%;transform:translateX(-50%);
  background:rgba(255,255,255,.92);padding:.5rem 1.1rem;border-radius:10px;max-width:82vw;text-align:center;
  font-size:.8rem;font-weight:600;color:#4F473A;box-shadow:0 4px 16px rgba(0,0,0,.15)}
.lightbox-actions{position:absolute;bottom:calc(var(--sab) + 1rem);right:1rem;display:flex;
  flex-wrap:wrap;justify-content:flex-end;gap:.45rem;max-width:min(92vw,31rem)}
.lightbox-actions[hidden]{display:none}
.lightbox-action{background:rgba(255,255,255,.92);border:0;border-radius:10px;padding:.55rem .8rem;
  font-size:.75rem;font-weight:650;color:#4F473A;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.lightbox-action.report{color:#B4462F}
.lightbox-action:hover{background:#fff}

@media (min-width:900px) and (pointer:fine){
  :root{--tabbar-h:0px;--dock-clear:0px;--footer-h:32px}   /* stage + toast reclaim the dock space */
  .tabbar{display:none}     /* desktop is the two-pane site experience */

  /* header: centered logo + hairline divider (live nniro-header-min; no auth button) */
  .appbar{display:grid;grid-template-columns:1fr auto 1fr;border-bottom:1px solid var(--line)}
  .appbar .brand{grid-column:2;justify-self:center}
  .appbar-context{grid-column:3;justify-self:end}

  /* centered max-width container + live column sizing minmax(248px,320px) */
  .stage{
    display:grid;grid-template-columns:minmax(0,6fr) minmax(248px,320px);gap:12px;
    max-width:1960px;margin-inline:auto;
    padding:12px calc(20px + var(--sar)) 12px calc(20px + var(--sal));
    bottom:calc(var(--footer-h) + var(--sab));
  }
  .view{position:relative;inset:auto;grid-column:1;grid-row:1;min-height:0}
  #view-board[hidden]{display:flex!important} /* board is the permanent main pane */
  #view-top12,#view-upload{display:none}  /* their content lives in the sidebar */

  /* board card (live nniro-board-main) with heading row atop */
  #view-board{
    border:1px solid var(--line);border-radius:20px;background:var(--surface);
    box-shadow:var(--shadow-card);padding:14px;overflow:hidden;
  }
  .board-head{
    display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
    gap:6px 14px;padding:0 2px 10px;
  }
  .board-head-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
  .board-kicker{margin:0;color:#4B4338;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;font-weight:700}
  .board-head-hint{margin:0;color:#5F5649;font-size:.8rem}
  /* live board-head "✦ How It Works" pill → opens the marketing modal */
  .board-hiw{
    flex:none;border:1px solid var(--gold);border-radius:999px;
    background:var(--bg);color:var(--gold-deep);
    font-size:.78rem;font-weight:700;letter-spacing:.02em;
    padding:7px 15px;white-space:nowrap;transition:background .18s ease,color .18s ease;
  }
  .board-hiw:hover{background:var(--gold);color:#fff}
  .board-shell{border:1px solid var(--line-soft);border-radius:14px}
  .board-foot{background:transparent;border-top:0;padding:10px 2px 0}

  /* zoom toolbox (live board-toolbox) — scroll-zoom is undiscoverable by mouse */
  .board-toolbox{display:flex;position:absolute;right:12px;top:12px;gap:6px;z-index:12}
  .tb-btn{
    border:1px solid transparent;border-radius:12px;background:rgba(255,255,255,.95);
    color:#4F473A;font-size:.88rem;font-weight:650;min-width:2.16rem;height:2.16rem;
    display:inline-flex;align-items:center;justify-content:center;
    box-shadow:0 8px 16px rgba(34,26,14,.15);
    transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  }
  .tb-btn:hover{transform:translateY(-1px);background:#F5F2EA;box-shadow:0 10px 20px rgba(34,26,14,.18)}
  .tb-wide{min-width:4.35rem;padding:0 .52rem;font-size:.7rem;letter-spacing:.02em;font-weight:620}

  /* sidebar = sticky floating card (live nniro-side-panel), sections inside */
  .sidebar{
    grid-column:2;grid-row:1;min-height:0;
    display:flex;flex-direction:column;gap:12px;
    align-self:start;position:sticky;top:0;max-height:100%;overflow-y:auto;
    padding:14px;
    border:1px solid var(--line);border-radius:16px;
    background:var(--surface);box-shadow:var(--shadow-soft);
  }
  .side-card{flex:none;display:flex;flex-direction:column;gap:10px}
  .side-card + .side-card{border-top:1px solid var(--line);padding-top:12px}
  .side-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .side-badge{
    font-size:11px;font-weight:600;letter-spacing:.04em;
    color:var(--gold-deep);background:var(--bg);      /* gold on cream */
    border:1px solid var(--gold);border-radius:999px;padding:3px 9px;
    font-variant-numeric:tabular-nums;
  }
  .side-slot{display:flex;flex-direction:column}

  /* selection-driven claim card (live side-panel empty/summary/CTA/notice) */
  .side-empty{margin:0;color:#635B4F;font-size:.82rem;line-height:1.42}
  .side-summary{
    border:1px solid var(--line);border-radius:12px;background:var(--surface-soft);
    padding:11px;color:#4F473B;font-size:.82rem;line-height:1.52;
  }
  .side-summary p{margin:0}
  .side-summary p + p{margin-top:4px}
  .side-summary strong{font-weight:680;color:var(--ink)}   /* 680 money/total weight */
  .side-notice{margin:0;color:#8C5A17;font-size:.74rem;line-height:1.4}
  .side-notice:empty{display:none}

  /* featured CTA link under the Top 12 grid (live nniro-featured-card__cta) */
  .side-t12-cta{
    display:block;margin:2px auto 0;background:none;border:0;padding:4px 6px;
    font-size:.68rem;font-weight:600;color:#A08B5E;text-align:center;
  }
  .side-t12-cta:hover{text-decoration:underline}

  /* the moved Upload claim flow — same nodes, sized for the card */
  .sidebar .upload-scroll{flex:none;overflow:visible;max-width:none;padding:0}

  /* the moved Top 12 grid — same nodes (incl. #t12-lines canvas), card-sized */
  .sidebar .top12-wrap{
    flex:none;aspect-ratio:3/4;
    border:1px solid var(--line-soft);border-radius:10px;overflow:hidden;
  }
  .sidebar .t12-cell .num{font-size:18px}
  .sidebar .t12-cell .state{font-size:10px}

  /* purchase dialog: centered, full 18px radius, ~520px (live nniro-sheet) */
  /* live .nniro-sheet-backdrop: warm translucent scrim + slight blur */
  .overlay{align-items:center;padding:16px;background:rgba(245,240,231,.72);
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
  .pill-box{background:var(--surface-soft)}  /* live .nniro-sheet__block */
  .sheet{
    max-width:520px;max-height:calc(100dvh - 2rem);
    border:1px solid var(--line);border-radius:18px;
    box-shadow:0 24px 58px rgba(35,27,13,.15);
    animation:none;
  }

  /* photo lightbox for occupied plots (live nniro-lightbox) */
  .lightbox{
    position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
    background:rgba(10,8,4,.88);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    padding:2rem;cursor:pointer;
  }
  .lightbox[hidden]{display:none}
  .lightbox-img{
    max-width:90vw;max-height:85vh;border-radius:12px;object-fit:contain;cursor:default;
    box-shadow:0 24px 64px rgba(0,0,0,.5);
  }
  .lightbox-close{
    position:absolute;top:16px;right:16px;width:2.2rem;height:2.2rem;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.9);border:0;border-radius:50%;
    color:#333;font-size:1.1rem;box-shadow:0 4px 12px rgba(0,0,0,.2);
  }
  .lightbox-close:hover{background:#fff}
  .lightbox-info{
    position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);
    background:rgba(255,255,255,.92);padding:.5rem 1.2rem;border-radius:10px;
    font-size:.8rem;font-weight:600;color:#4F473A;box-shadow:0 4px 16px rgba(0,0,0,.15);
    white-space:nowrap;
  }
  .lightbox-actions{bottom:1.25rem;right:1.5rem}

  /* inline footer (live nniro-footer-inline): © + legal nav */
  .site-footer{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    height:calc(var(--footer-h) + var(--sab));
    max-width:1960px;margin-inline:auto;
    display:flex;align-items:center;justify-content:space-between;
    padding:0 calc(26px + var(--sar)) var(--sab) calc(26px + var(--sal));
    color:#9A9286;font-size:.65rem;background:var(--bg);
  }
  .site-footer nav{display:inline-flex;gap:.5rem}
  .site-footer a{color:#7A7265;text-decoration:none}
  .site-footer a:hover{text-decoration:underline}

  /* How It Works marketing modal (live values verbatim; page-*.js inline styles).
     Website-replica surface only. Reuses .overlay (desktop = centered + blur). */
  #hiw .hiw-card{
    width:100%;max-width:440px;max-height:calc(100dvh - 2rem);overflow-y:auto;
    background:#fff;border-radius:24px;
    box-shadow:0 24px 64px rgba(0,0,0,.28);
    animation:none;
  }
  .hiw-head{
    position:relative;text-align:center;
    background:linear-gradient(135deg,#2f2a22,#3a3228);
    border-radius:24px 24px 0 0;padding:2rem 1.75rem 1.5rem;
  }
  .hiw-close{
    position:absolute;top:14px;right:14px;width:2rem;height:2rem;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:1rem;line-height:1;
  }
  .hiw-close:hover{background:rgba(255,255,255,.22)}
  .hiw-kicker{margin:0 0 8px;font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#d4af37}
  .hiw-title{margin:0 0 6px;font-size:1.6rem;font-weight:900;color:#fff;line-height:1.2;letter-spacing:-.01em}
  .hiw-tagline{margin:0;font-size:.9rem;color:rgba(255,255,255,.6)}
  .hiw-body{padding:1.5rem 1.75rem}
  .hiw-draw{
    background:linear-gradient(135deg,#2f2a22,#3d362a);border:1px solid rgba(212,175,55,.2);
    border-radius:16px;padding:1.25rem;text-align:center;margin-bottom:1.25rem;
  }
  .hiw-draw-kicker{margin:0 0 4px;font-size:.65rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#d4af37}
  .hiw-draw-amount{margin:0 0 4px;font-size:2rem;font-weight:900;color:#d4af37;line-height:1.1}
  .hiw-draw-sub{margin:0;font-size:.8rem;color:rgba(255,255,255,.5)}
  .hiw-steps{display:flex;flex-direction:column;gap:14px;margin-bottom:1.5rem}
  .hiw-step{display:flex;gap:12px;align-items:flex-start}
  .hiw-step-ic{flex:none;font-size:1.35rem;line-height:1.2}
  .hiw-step-body{display:flex;flex-direction:column;gap:2px;min-width:0}
  .hiw-step-title{font-size:.95rem;font-weight:700;color:var(--text,#1f1c17)}
  .hiw-step-desc{font-size:.82rem;color:#6f685c;line-height:1.4}
  .hiw-plan-note{margin:0 0 1.25rem;font-size:.75rem;color:#8c8478;line-height:1.5;text-align:center}
  .hiw-cta{
    width:100%;padding:.9rem;border-radius:14px;
    background:linear-gradient(135deg,#2f2a22,#3a3228);border:1px solid rgba(212,175,55,.25);
    color:#d4af37;font-size:1rem;font-weight:800;letter-spacing:.02em;
    box-shadow:0 4px 16px rgba(47,42,34,.25);
  }
  .hiw-cta:hover{filter:brightness(1.08)}
}
/* My Photos owner actions (Sell / Share) */
.mine-acts{display:flex;gap:14px;justify-content:center;align-items:center;margin:-4px 0 2px}