/* ============================================================
   nyc.world — stylesheet
   Sections:
     1. Design tokens
     2. Base / reset
     3. Map canvas + screen effects
     4. HUD chrome (logo, hint, status, stats)
     5. Search
     6. Layers panel
     7. Tooltip
     8. Claim modal
     9. Buttons (shared)
    10. Select-area button
    11. Draw studio
    12. Toast + loading
    13. Mobile (≤720px)
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root {
  /* palette */
  --accent: #ffd166;        /* gold — brand, prices, highlights */
  --accent-deep: #b98f2f;   /* gold border/shadow */
  --sky: #7dd3fc;           /* light blue — .lol, links, owners */
  --good: #86efac;          /* green — success, prices ok */
  --warn: #fca5a5;          /* red — occupied, override */
  --ink: #e6ecf5;           /* primary text */
  --ink-dim: #b9c7e2;       /* secondary text */
  --ink-faint: #9fb4d8;     /* tertiary text */
  --ink-ghost: #6b7ea8;     /* placeholder / hints */
  --bg: #0a0e1a;            /* page background */
  --well: #0d1322;          /* input backgrounds */
  --raised: #131a2e;        /* button backgrounds */
  --raised-hi: #22304f;     /* active button backgrounds */
  --panel: rgba(10, 14, 26, 0.88);
  --border: #2e3a5c;

  /* depth */
  --shadow-sm: 4px 4px 0 #00000055;
  --shadow-md: 4px 4px 0 #00000066;
  --shadow-lg: 6px 6px 0 #00000088;

  /* z-index scale */
  --z-fx: 5;
  --z-hud: 10;
  --z-search: 15;
  --z-tooltip: 20;
  --z-drawbar: 25;
  --z-modal: 30;
  --z-toast: 40;
  --z-loading: 50;
}

/* ---------- 2. Base / reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: var(--bg); }
body { font-family: 'Press Start 2P', monospace; color: var(--ink); }

/* ---------- 3. Map canvas + screen effects ---------- */
#map { position: fixed; inset: 0; cursor: grab; touch-action: none; image-rendering: pixelated; }
#map.dragging { cursor: grabbing; }
#map.claimable { cursor: crosshair; }
#map.dragging.claimable { cursor: grabbing; }

.scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: var(--z-fx);
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0.07) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: var(--z-fx);
  background: radial-gradient(ellipse at center, transparent 62%, rgba(4,6,14,0.55) 100%);
}

/* ---------- 4. HUD chrome ---------- */
.hud { position: fixed; z-index: var(--z-hud); user-select: none; }

#logo { top: 16px; left: 18px; }
#logo h1 { font-size: 20px; color: var(--accent); text-shadow: 3px 3px 0 #00000088; letter-spacing: 1px; }
#logo h1 .lol { color: var(--sky); }
#logo .tag { margin-top: 8px; font-size: 8px; color: var(--ink-faint); text-shadow: 2px 2px 0 #00000088; }
#logo .cursor { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

#hint { top: 16px; right: 18px; font-size: 8px; color: var(--ink-faint); text-align: right; line-height: 2; text-shadow: 2px 2px 0 #000000aa; }

#status { bottom: 14px; left: 18px; font-size: 8px; line-height: 1.9; color: var(--ink-dim); text-shadow: 2px 2px 0 #000000aa; }
#status .band { color: var(--accent); font-size: 10px; }

#stats { bottom: 14px; right: 18px; font-size: 10px; text-align: right; line-height: 2; color: var(--ink-dim); text-shadow: 2px 2px 0 #000000aa; }
#stats b { color: var(--good); }
#recover-link { cursor: pointer; color: var(--sky); text-decoration: underline; }
#recover-link:hover { color: var(--ink); }

/* ---------- 4b. Site menu (about / terms / sitemap) ---------- */
#menu { top: 72px; left: 18px; }
#menu.open { z-index: var(--z-search); } /* the open panel sits above the other HUD panels */
#menu-btn {
  font-family: inherit; font-size: 9px; min-height: 36px; min-width: 36px; padding: 0 14px;
  background: var(--panel); color: var(--ink-dim); border: 2px solid var(--border);
  box-shadow: var(--shadow-sm); cursor: pointer;
}
#menu-btn:hover, #menu.open #menu-btn { color: var(--accent); border-color: var(--accent); }
#menu-btn:focus-visible, #menu-panel a:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
#menu-panel {
  display: none; margin-top: 6px; min-width: 250px;
  background: var(--panel); border: 2px solid var(--border); box-shadow: var(--shadow-md);
}
#menu.open #menu-panel { display: block; }
#menu-panel .mp-title { font-size: 7px; color: var(--ink-ghost); padding: 10px 14px 4px; }
#menu-panel a {
  display: flex; align-items: center; min-height: 40px; padding: 0 14px; font-size: 9px;
  color: var(--ink-dim); text-decoration: none; border-top: 1px solid var(--border);
}
#menu-panel a:hover, #menu-panel a:focus-visible { background: var(--raised-hi); color: var(--accent); }
@media (max-width: 720px) {
  #menu { top: 82px; left: 12px; }
  #menu-btn { min-height: 44px; min-width: 44px; }
  #menu-panel { min-width: 200px; max-width: calc(100vw - 24px); }
  #menu-panel a { min-height: 44px; }
}

/* ---------- 4c. Compass (heading) ---------- */
#compass { top: 120px; left: 18px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
#compass-btn {
  position: relative; width: 36px; height: 36px; padding: 0; cursor: grab;
  background: var(--panel); border: 2px solid var(--border); box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center; touch-action: none;
}
#compass-btn:hover, #compass.turned #compass-btn { border-color: var(--accent); }
#compass-btn:active { cursor: grabbing; }
#compass-btn:focus-visible, #compass-mnh:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
#compass-rose { display: block; transition: transform 80ms linear; }
#compass.dragging #compass-rose { transition: none; }
#compass-n {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  font-family: inherit; font-size: 6px; color: var(--ink-ghost); text-shadow: 1px 1px 0 #000;
}
#compass.turned #compass-n { color: var(--accent); }
/* heading readout sits under the rose while the map is turned */
#compass-btn::after {
  content: attr(data-deg); position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%);
  font-size: 6px; color: var(--accent); text-shadow: 1px 1px 0 #000; white-space: nowrap;
}
#compass-mnh {
  font-family: inherit; font-size: 7px; min-height: 22px; padding: 0 8px; margin-top: 8px;
  background: var(--panel); color: var(--ink-dim); border: 2px solid var(--border);
  box-shadow: var(--shadow-sm); cursor: pointer;
}
#compass-mnh:hover { color: var(--accent); border-color: var(--accent); }
#compass-mnh.active { background: var(--accent); color: #1a1408; border-color: var(--accent-deep); }
/* phone chrome (same query as M4 below): the compass stacks under the ☰
   menu in the left column (logo 10 → zoom chip 38 → menu 82+44 → 138),
   safe-area aware, both controls at the 44px tap size */
@media (max-width: 720px), ((pointer: coarse) and (max-width: 1024px)) {
  #compass { top: calc(138px + var(--sat)); left: calc(12px + var(--sal)); }
  #compass-btn { width: 44px; height: 44px; }
  #compass-mnh { min-height: 44px; min-width: 44px; padding: 0 10px; }
}

/* ---------- 7b. Recovery modal ---------- */
#recover-wrap {
  position: fixed; inset: 0; z-index: var(--z-modal); display: none;
  background: rgba(4, 6, 14, 0.6); align-items: center; justify-content: center;
}
#recover-wrap.open { display: flex; }
#recover-modal {
  width: min(460px, calc(100vw - 32px));
  background: var(--panel); border: 3px solid var(--border);
  box-shadow: var(--shadow-lg); padding: 24px;
}
#recover-modal h2 { font-size: 14px; color: var(--sky); margin-bottom: 14px; }
#recover-modal .rc-note { font-size: 9px; color: var(--ink-faint); line-height: 2; margin-bottom: 16px; }
#recover-modal input[type=email] {
  width: 100%; font-family: inherit; font-size: 11px; padding: 13px;
  background: var(--well); color: var(--ink); border: 2px solid var(--border); outline: none;
  margin-bottom: 16px;
}
#recover-modal input[type=email]:focus { border-color: var(--sky); }

/* ---------- 5. Search ---------- */
#searchwrap {
  top: 14px; left: 50%; transform: translateX(-50%);
  width: min(400px, 56vw); z-index: var(--z-search);
}
#search {
  width: 100%; font-family: inherit; font-size: 9px; padding: 11px 12px;
  background: var(--panel); color: var(--ink); border: 2px solid var(--border);
  outline: none; box-shadow: var(--shadow-sm);
}
#search:focus { border-color: var(--accent); }
#search::placeholder { color: var(--ink-ghost); }
#search-results {
  display: none; margin-top: 4px; background: var(--panel);
  border: 2px solid var(--border); box-shadow: var(--shadow-sm);
  max-height: 300px; overflow-y: auto;
}
#search-results.open { display: block; }
.sr-row { padding: 9px 12px; font-size: 8px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.sr-row:hover, .sr-row.sel { background: var(--raised-hi); }
.sr-row .sr-name { color: var(--ink); }
.sr-row.sel .sr-name { color: var(--accent); }
.sr-row .sr-where { color: var(--ink-ghost); text-align: right; }

/* ---------- 6. Layers panel ---------- */
#layers {
  top: 76px; right: 18px; background: var(--panel); border: 2px solid var(--border);
  padding: 10px 12px; box-shadow: var(--shadow-sm);
}
#layers .lt, #layers .lt2 { font-size: 7px; color: var(--ink-ghost); }
#layers .lt { margin-bottom: 8px; }
#layers .lt2 { margin: 10px 0 4px; }
#layers label {
  display: flex; align-items: center; gap: 8px; font-size: 8px; color: var(--ink-dim);
  padding: 4px 0; cursor: pointer; user-select: none;
}
#layers input[type=checkbox] {
  appearance: none; width: 12px; height: 12px; border: 2px solid var(--border);
  background: var(--well); cursor: pointer; flex-shrink: 0;
}
#layers input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
#map-alpha {
  width: 100%; appearance: none; height: 6px; background: var(--well);
  border: 2px solid var(--border); outline: none; cursor: pointer;
}
#map-alpha::-webkit-slider-thumb {
  appearance: none; width: 14px; height: 14px; background: var(--accent);
  border: 2px solid var(--accent-deep); cursor: pointer;
}

/* ---------- 7. Tooltip ---------- */
#tooltip {
  position: fixed; z-index: var(--z-tooltip); display: none; pointer-events: none;
  background: var(--panel); border: 2px solid var(--border);
  padding: 10px 12px; font-size: 9px; line-height: 1.9; max-width: 300px;
  box-shadow: var(--shadow-md);
}
#tooltip .who { color: var(--sky); }

/* ---------- 8. Claim modal ---------- */
#modal-wrap {
  position: fixed; inset: 0; z-index: var(--z-modal); display: none;
  background: rgba(4, 6, 14, 0.6); align-items: center; justify-content: center;
}
#modal-wrap.open { display: flex; }
#modal {
  width: min(580px, calc(100vw - 32px));
  background: var(--panel); border: 3px solid var(--border);
  box-shadow: var(--shadow-lg); padding: 24px;
}
#modal h2 { font-size: 18px; color: var(--accent); margin-bottom: 14px; }
#modal .where { font-size: 11px; color: var(--ink-faint); margin-bottom: 10px; line-height: 2; }
#modal #modal-price { font-size: 13px; color: var(--good); margin-bottom: 18px; line-height: 2; }
#modal .occupied { font-size: 11px; color: var(--warn); margin-bottom: 16px; line-height: 2; }

.type-row { display: flex; gap: 8px; margin-bottom: 16px; }
.type-btn {
  flex: 1; font-family: inherit; font-size: 11px; padding: 14px 4px;
  background: var(--raised); color: var(--ink-dim); border: 2px solid var(--border); cursor: pointer;
}
.type-btn.active { background: var(--raised-hi); color: var(--accent); border-color: var(--accent); }
.type-btn.disabled { opacity: 0.35; pointer-events: none; }

#modal input[type=text] {
  width: 100%; font-family: inherit; font-size: 13px; padding: 15px;
  background: var(--well); color: var(--ink); border: 2px solid var(--border); outline: none;
  margin-bottom: 12px;
}
#modal input[type=text]:focus { border-color: var(--sky); }
#modal input[type=file] {
  width: 100%; font-family: inherit; font-size: 8px; padding: 10px;
  background: var(--well); color: var(--ink-dim); border: 2px solid var(--border);
  margin-bottom: 10px; cursor: pointer;
}
#modal input[type=file]::file-selector-button {
  font-family: inherit; font-size: 8px; padding: 6px 10px; margin-right: 10px;
  background: var(--raised-hi); color: var(--accent); border: 2px solid var(--border); cursor: pointer;
}
.swatches { display: flex; gap: 8px; margin-bottom: 18px; }
.swatch { width: 26px; height: 26px; border: 2px solid #00000055; cursor: pointer; }
.swatch.active { border-color: #ffffff; box-shadow: 0 0 0 2px var(--accent); }

/* ---------- 9. Buttons (shared) ---------- */
.btn-row { display: flex; gap: 10px; }
.btn {
  font-family: inherit; font-size: 11px; padding: 14px 18px; cursor: pointer;
  border: 2px solid var(--border); background: var(--raised); color: var(--ink-dim);
}
.btn.primary { background: var(--accent); color: #1a1408; border-color: var(--accent-deep); flex: 1; }
.btn.primary:active { transform: translate(2px, 2px); }
.btn.danger { background: #7f1d1d; color: #fecaca; border-color: #b91c1c; }

#modal-report {
  margin-top: 14px; font-size: 9px; color: var(--warn); cursor: pointer;
  text-decoration: underline; text-align: center;
}
#modal-delete {
  margin-top: 14px; font-size: 9px; color: #fca5a5; cursor: pointer;
  text-decoration: underline; text-align: center;
}
#report-reasons {
  margin-top: 8px; font-size: 9px; color: var(--warn); text-align: center;
  display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap;
}
#report-reasons .reason {
  font: inherit; font-size: 9px; cursor: pointer; padding: 3px 7px;
  background: transparent; color: var(--warn); border: 1px solid var(--warn);
}
#report-reasons .reason:hover { background: var(--warn); color: #000; }
.foot-link { color: var(--ink-ghost); text-decoration: underline; }


/* ---------- 10. Explore / claim mode toggle ---------- */
#mode-toggle {
  position: fixed; z-index: 12; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; background: var(--panel); border: 2px solid var(--border);
  box-shadow: var(--shadow-md);
}
.mode-btn {
  font-family: inherit; font-size: 10px; padding: 12px 18px; cursor: pointer;
  background: transparent; color: var(--ink-ghost); border: none;
}
.mode-btn.active { background: var(--accent); color: #1a1408; }
#mode-shape { color: var(--ink-dim); border-left: 2px solid var(--border); }
#mode-shape.on { color: var(--accent); }

/* ---------- 10b. Shape menu (what a tap picks) + spot card ---------- */
#shape-menu {
  position: fixed; z-index: 13; left: 50%; bottom: 66px; transform: translateX(-50%);
  width: min(360px, calc(100vw - 24px)); background: var(--panel); border: 2px solid var(--border);
  box-shadow: var(--shadow-md); padding: 6px 0;
}
#shape-menu[hidden] { display: none; }
#shape-menu .sm-title { font-size: 7px; color: var(--ink-ghost); padding: 6px 14px 6px; }
#shape-menu .shape-btn {
  display: flex; align-items: baseline; gap: 10px; width: 100%; min-height: 36px; padding: 8px 14px;
  font-family: inherit; font-size: 9px; text-align: left; cursor: pointer;
  background: transparent; color: var(--ink-dim); border: none; border-top: 1px solid var(--border);
}
#shape-menu .shape-btn small { font-size: 7px; color: var(--ink-ghost); margin-left: auto; text-align: right; }
#shape-menu .shape-btn:hover, #shape-menu .shape-btn.active { background: var(--raised-hi); color: var(--accent); }

#spot-card {
  position: fixed; z-index: 14; right: 18px; bottom: 92px; width: min(360px, calc(100vw - 36px));
  background: var(--panel); border: 3px solid var(--border); box-shadow: var(--shadow-lg);
  padding: 14px 16px 14px; user-select: none;
}
#spot-card[hidden] { display: none; }
#spot-card .sheet-handle { display: none; }
.sc-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.sc-head > div { flex: 1; min-width: 0; }
#sc-place { font-size: 11px; color: var(--accent); line-height: 1.6; overflow-wrap: anywhere; }
#sc-sub { font-size: 7px; color: var(--ink-ghost); margin-top: 4px; line-height: 1.7; }
#sc-close {
  width: 30px; height: 30px; flex: 0 0 auto; font-family: inherit; font-size: 11px; cursor: pointer;
  background: var(--raised); color: var(--ink-dim); border: 2px solid var(--border);
}
.sc-sizes { display: flex; gap: 6px; margin-bottom: 8px; }
.sc-size {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-family: inherit; padding: 9px 4px 8px; cursor: pointer;
  background: var(--raised); color: var(--ink-dim); border: 2px solid var(--border);
}
.sc-size b { font-size: 9px; font-weight: normal; color: var(--ink); }
.sc-size .sc-price { font-size: 11px; color: var(--good); }
.sc-size .sc-tier { font-size: 6px; line-height: 1.5; color: var(--ink-ghost); text-align: center; }
.sc-size.active { background: var(--raised-hi); border-color: var(--accent); }
.sc-size.active b { color: var(--accent); }
.sc-size.capped .sc-price { color: var(--warn); }
.sc-note { font-size: 7px; color: var(--ink-ghost); line-height: 1.7; min-height: 12px; margin-bottom: 8px; }
.sc-note.bad { color: var(--warn); }
#spot-card input[type=text] {
  width: 100%; font-family: inherit; font-size: 11px; padding: 11px 12px;
  background: var(--well); color: var(--ink); border: 2px solid var(--border); outline: none;
}
#spot-card input[type=text]:focus { border-color: var(--sky); }
#sc-text { margin-bottom: 8px; }
#sc-author { flex: 1; min-width: 120px; font-size: 8px !important; padding: 9px 10px !important; }
#spot-card .sc-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
#spot-card .swatches { margin: 0; gap: 5px; flex-wrap: wrap; }
#spot-card .swatch { width: 18px; height: 18px; }
.sc-angle-row { flex-wrap: wrap; }
.sc-label { font-size: 7px; color: var(--ink-ghost); flex: 0 0 auto; min-width: 66px; }
.sc-angles { display: flex; gap: 3px; flex: 1; }
.sc-ang {
  flex: 1; min-width: 0; font-family: inherit; font-size: 7px; padding: 7px 0; cursor: pointer;
  background: var(--raised); color: var(--ink-dim); border: 2px solid var(--border);
}
.sc-ang.active { background: var(--raised-hi); color: var(--accent); border-color: var(--accent); }
#sc-angle { width: 100%; accent-color: var(--accent); margin-top: 2px; }
.sc-cta { margin-bottom: 6px !important; }
#sc-claim { font-size: 11px; padding: 13px 14px; }
.sc-peek {
  font-family: inherit; font-size: 7px; padding: 10px 8px; cursor: pointer; flex: 0 0 auto;
  background: var(--raised); color: var(--ink-dim); border: 2px solid var(--border);
}
.sc-peek:hover { color: var(--accent); border-color: var(--accent); }
.sc-links { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 7px; color: var(--ink-ghost); white-space: nowrap; }
.sc-link { font-family: inherit; font-size: 7px; background: none; border: none; color: var(--sky); text-decoration: underline; cursor: pointer; padding: 6px 2px; white-space: nowrap; }
.sc-link:hover { color: var(--ink); }
#sc-shapes { margin-top: 8px; gap: 6px; }
#sc-shapes[hidden] { display: none; }
#sc-shapes .cs-btn { font-size: 8px; padding: 8px 8px; min-height: 32px; flex: 1; }
#spot-card .cs-btn {
  font-family: inherit; cursor: pointer; background: var(--raised); color: var(--ink-dim); border: 2px solid var(--border);
}
#spot-card .cs-btn.active { background: var(--raised-hi); color: var(--accent); border-color: var(--accent); }

/* ---------- 11. Draw studio ---------- */
#drawbar {
  position: fixed; z-index: var(--z-drawbar); left: 50%; bottom: 18px; transform: translateX(-50%);
  display: none; align-items: center; gap: 12px;
  background: var(--panel); border: 3px solid var(--border);
  box-shadow: var(--shadow-lg); padding: 12px 14px;
}
#drawbar.open { display: flex; }
.draw-left { display: flex; flex-direction: column; gap: 8px; }
#draw-palette { display: flex; gap: 4px; flex-wrap: wrap; max-width: 320px; }
.draw-tools { display: flex; gap: 6px; align-items: center; }
.dt-label { font-size: 7px; color: var(--ink-ghost); }
#draw-picker {
  width: 26px; height: 26px; padding: 0; border: 2px solid var(--border);
  background: var(--well); cursor: pointer;
}
.brush-btn {
  font-family: inherit; font-size: 8px; min-width: 26px; height: 26px; cursor: pointer;
  background: var(--raised); color: var(--ink-dim); border: 2px solid var(--border); padding: 0 5px;
}
.brush-btn.active { background: var(--raised-hi); color: var(--accent); border-color: var(--accent); }
.dp-swatch { width: 20px; height: 20px; border: 2px solid #00000066; cursor: pointer; }
.dp-swatch.active { border-color: #ffffff; box-shadow: 0 0 0 2px var(--accent); }
.dp-swatch.eraser { background: repeating-linear-gradient(45deg, #333 0 4px, #555 4px 8px); }
/* cost readout floats above the toolbar, out of the tool row */
#draw-stats {
  position: fixed; z-index: var(--z-drawbar); left: 50%; transform: translateX(-50%);
  bottom: 108px; display: none; text-align: center;
  background: var(--panel); border: 2px solid var(--border);
  box-shadow: var(--shadow-md); padding: 10px 16px;
  font-size: 10px; color: var(--ink-dim); line-height: 1.9; white-space: nowrap;
}
#drawbar.open + #draw-stats { display: block; }
#draw-stats b { color: var(--good); }
@media (max-width: 720px) {
  #draw-stats { bottom: 150px; font-size: 8px; }
}

/* ---------- 11b. Onboarding ---------- */
#onboard-wrap {
  position: fixed; inset: 0; z-index: var(--z-modal); display: none;
  background: rgba(4, 6, 14, 0.7); align-items: center; justify-content: center;
}
#onboard-wrap.open { display: flex; }
#onboard {
  width: min(560px, calc(100vw - 32px)); text-align: center;
  background: var(--panel); border: 3px solid var(--border);
  box-shadow: var(--shadow-lg); padding: 36px 32px;
}
#onboard .ob-emoji { font-size: 60px; margin-bottom: 20px; }
#onboard h2 { font-size: 18px; color: var(--accent); margin-bottom: 18px; }
#onboard p { font-size: 12px; color: var(--ink-dim); line-height: 2.1; margin-bottom: 22px; min-height: 96px; }
#onboard .btn { font-size: 13px; padding: 16px 20px; }
.ob-dots { display: flex; gap: 10px; justify-content: center; margin-bottom: 22px; }
.ob-dots span { width: 12px; height: 12px; background: var(--raised-hi); }
.ob-dots span.on { background: var(--accent); }
@media (max-width: 720px) {
  #onboard { padding: 22px 18px; }
  #onboard .ob-emoji { font-size: 44px; }
  #onboard h2 { font-size: 13px; }
  #onboard p { font-size: 10px; min-height: 80px; }
  #onboard .btn { font-size: 11px; padding: 13px 16px; }
}

/* ---------- 12. Toast + loading ---------- */
#toast {
  position: fixed; z-index: var(--z-toast); left: 50%; top: 70px; transform: translateX(-50%);
  background: var(--panel); border: 2px solid var(--good); color: var(--good);
  font-size: 9px; padding: 10px 16px; display: none; box-shadow: var(--shadow-md);
}
#loading {
  position: fixed; inset: 0; z-index: var(--z-loading); display: flex; align-items: center; justify-content: center;
  background: var(--bg); flex-direction: column; gap: 18px;
}
#loading .globe { font-size: 42px; animation: spin 1.4s steps(8) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#loading .txt { font-size: 9px; color: var(--ink-faint); }

/* ---------- 13. Mobile ---------- */
@media (max-width: 720px) {
  #logo { top: 10px; left: 12px; }
  #logo h1 { font-size: 13px; }
  #logo .tag { display: none; }
  #hint { display: none; }
  #searchwrap { top: 42px; width: calc(100vw - 24px); }
  #search { font-size: 8px; padding: 9px 10px; }
  #layers { top: 86px; right: 10px; padding: 7px 9px; }
  #layers label { font-size: 7px; padding: 3px 0; gap: 6px; }
  #layers input[type=checkbox] { width: 10px; height: 10px; }
  #layers .lt, #layers .lt2 { font-size: 6px; }
  #status { bottom: 10px; left: 12px; font-size: 7px; }
  #stats { bottom: 10px; right: 12px; font-size: 7px; }
  #btn-area { bottom: 10px; font-size: 8px; padding: 9px 12px; }
  #drawbar {
    flex-wrap: wrap; justify-content: center; gap: 8px;
    max-width: calc(100vw - 16px); bottom: 10px; padding: 9px 10px;
  }
  #draw-palette { max-width: 100%; }
  #draw-stats { font-size: 7px; }
  #modal { padding: 16px; }
  #modal h2 { font-size: 12px; }
  .type-btn { font-size: 8px; padding: 9px 2px; }
  .btn { font-size: 10px; padding: 12px 14px; }
}

/* ============================================================
   ===== mobile / coarse pointer =====
   Everything below is additive: new elements (#rail, #claim-pill,
   #claim-sheet, #here-sheet, draw-drawer bits) plus a phone chrome layer.
   Branching rule (docs/MOBILE-UX-RESEARCH.md §4): gesture behaviour keys on
   (pointer: coarse); chrome keys on the "phone" query below — narrow
   screens, or any coarse-pointer screen up to tablet width.
   Sections:
    M1. base hygiene (safe area, overscroll, callouts)
    M2. new elements — desktop defaults (hidden)
    M3. tap targets on coarse pointers
    M4. phone chrome layer
   ============================================================ */

/* ---------- M1. base hygiene ---------- */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --kb: 0px; /* keyboard height, set from visualViewport (app.js) */
}
html, body { overscroll-behavior: none; }
#map { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
button, .btn, .mode-btn, .type-btn, .swatch, .dp-swatch, .brush-btn, .sr-row, .reason,
#recover-link, #modal-report, #modal-delete, #layers label {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
/* an escalated (interactive) Turnstile challenge must be visible, not at the
   bottom of the document */
#ts-widget {
  position: fixed; left: 50%; bottom: calc(80px + var(--sab)); transform: translateX(-50%);
  z-index: var(--z-toast);
}

/* ---------- M2. new elements — desktop defaults ---------- */
#rail, #claim-pill, #claim-sheet, #here-sheet, #search-close, #modal-close,
#modal .sheet-handle, #draw-cost, #btn-draw-collapse { display: none; }
.draw-actions, .draw-sizes { display: contents; } /* desktop: no layout change */
#brush-range { width: 90px; accent-color: var(--accent); vertical-align: middle; }
#brush-range[hidden] { display: none; }
.brush-btn.tool[data-tool=move].active { color: var(--sky); border-color: var(--sky); }
#btn-draw-fit { font-size: 10px; }
/* image upload: hide the raw file input behind a real button + thumbnail */
#file-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
#file-row input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#btn-file { flex: 0 0 auto; }
#file-preview { width: 44px; height: 44px; object-fit: contain; background: var(--well); border: 2px solid var(--border); image-rendering: pixelated; }
#file-name { font-size: 8px; color: var(--ink-faint); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#toast.sticky { border-color: var(--accent); color: var(--accent); }

/* ---------- M3. tap targets on coarse pointers ---------- */
@media (pointer: coarse) {
  .mode-btn { min-height: 44px; }
  #menu-btn { min-height: 44px; min-width: 44px; } /* the ☰ menu keyed on width only; tablets are coarse too */
  #menu-panel a { min-height: 44px; }
  #compass-btn { width: 44px; height: 44px; }
  #compass-mnh { min-height: 44px; min-width: 44px; padding: 0 10px; }
  .type-btn { min-height: 48px; font-size: 10px; padding: 12px 2px; }
  .btn { min-height: 48px; }
  .swatches { flex-wrap: wrap; gap: 8px; }
  .swatch { width: 44px; height: 44px; }
  .dp-swatch { width: 44px; height: 44px; flex: 0 0 auto; }
  .brush-btn { min-width: 44px; height: 44px; font-size: 10px; }
  #draw-picker { width: 44px; height: 44px; }
  #brush-range { height: 44px; width: 110px; }
  #report-reasons .reason { min-height: 44px; padding: 0 12px; }
  #modal-report, #modal-delete { min-height: 44px; padding: 14px 0; margin-top: 4px; box-sizing: border-box; }
  #recover-link { display: inline-block; padding: 14px 0; }
  #stats a { display: inline-block; min-height: 44px; padding: 14px 4px; box-sizing: border-box; }
  #layers label { min-height: 44px; padding: 0; font-size: 9px; gap: 12px; }
  #layers input[type=checkbox] { width: 22px; height: 22px; }
  #layers .lt, #layers .lt2 { font-size: 8px; }
  /* sliders: a 28px-tall hit box around a 12px track, 28px thumb */
  #map-alpha, #art-alpha {
    width: 100%; appearance: none; height: 28px; margin: 6px 0 10px; background: transparent;
    border: none; outline: none;
  }
  #map-alpha::-webkit-slider-runnable-track, #art-alpha::-webkit-slider-runnable-track {
    height: 12px; background: var(--well); border: 2px solid var(--border);
  }
  #map-alpha::-webkit-slider-thumb, #art-alpha::-webkit-slider-thumb {
    appearance: none; width: 28px; height: 28px; margin-top: -10px;
    background: var(--accent); border: 2px solid var(--accent-deep);
  }
  #map-alpha::-moz-range-track, #art-alpha::-moz-range-track {
    height: 12px; background: var(--well); border: 2px solid var(--border);
  }
  #map-alpha::-moz-range-thumb, #art-alpha::-moz-range-thumb {
    width: 28px; height: 28px; background: var(--accent); border: 2px solid var(--accent-deep); border-radius: 0;
  }
  .sr-row { min-height: 44px; align-items: center; font-size: 9px; }
  #search { font-size: 16px; padding: 12px 44px 12px 12px; }
  #modal input[type=text], #recover-modal input[type=email] { font-size: 16px; padding: 13px; }
  #in-content, #in-author { min-height: 48px; }
  #modal .where { font-size: 9px; }
  #tooltip { display: none !important; } /* no hover on touch — long-press sheet instead */
}

/* ---------- M4. phone chrome layer ---------- */
@media (max-width: 720px), ((pointer: coarse) and (max-width: 1024px)) {
  .scanlines { display: none; } /* full-screen multiply blend is GPU-expensive on phones and invisible at DPR 3 */

  /* top-left: tiny logo + zoom band chip; top-right: the icon rail */
  #logo { top: calc(10px + var(--sat)); left: calc(12px + var(--sal)); }
  #logo h1 { font-size: 13px; }
  #logo .tag { display: none; }
  #hint { display: none; }
  #status {
    top: calc(38px + var(--sat)); left: calc(12px + var(--sal)); bottom: auto;
    font-size: 8px; line-height: 1; text-shadow: none;
    background: var(--panel); border: 2px solid var(--border); padding: 6px 8px;
  }
  #status .band { font-size: 8px; }
  #status br, #coords { display: none; }

  #rail {
    top: calc(10px + var(--sat)); right: calc(10px + var(--sar));
    display: flex; flex-direction: column; gap: 8px;
  }
  .rail-btn {
    width: 48px; height: 48px; font-family: inherit; font-size: 16px; line-height: 1; cursor: pointer;
    background: var(--panel); color: var(--ink-dim); border: 2px solid var(--border);
    box-shadow: var(--shadow-sm); padding: 0;
  }
  .rail-btn.active { color: var(--accent); border-color: var(--accent); }

  /* search: hidden until the 🔍 rail button opens it as a full-width top bar */
  #searchwrap {
    display: none; top: calc(10px + var(--sat)); left: calc(12px + var(--sal)); right: calc(12px + var(--sar));
    width: auto; transform: none;
  }
  #searchwrap.open { display: block; }
  #search { width: 100%; font-size: 16px; padding: 13px 48px 13px 12px; min-height: 48px; }
  #search-close {
    display: block; position: absolute; top: 0; right: 0; width: 48px; height: 48px;
    font-family: inherit; font-size: 14px; background: transparent; color: var(--ink-dim); border: none; cursor: pointer;
  }
  #search-results { max-height: 40vh; }
  @supports (height: 1dvh) { #search-results { max-height: 40dvh; } }

  /* layers: collapsed behind the 🗺 rail button */
  /* panels open BELOW the rail (3 × 48px + gaps) so the logo / zoom chip stay visible */
  #layers {
    display: none; top: calc(178px + var(--sat)); right: calc(10px + var(--sar)); left: auto;
    width: min(280px, calc(100vw - 20px)); max-height: calc(100vh - 260px - var(--sat) - var(--sab));
    overflow-y: auto; padding: 10px 12px;
  }
  #layers.open { display: block; }

  /* stats → an ⓘ info sheet (same element, just repositioned) */
  #stats {
    display: none; top: calc(178px + var(--sat)); right: calc(10px + var(--sar)); bottom: auto;
    width: min(300px, calc(100vw - 20px)); text-align: left; font-size: 9px; line-height: 1.9;
    background: var(--panel); border: 2px solid var(--border); box-shadow: var(--shadow-sm); padding: 12px 14px;
    text-shadow: none;
  }
  #stats.open { display: block; }
  #recover-link, #stats a { display: inline-block; min-height: 44px; padding: 14px 2px; box-sizing: border-box; }

  /* desktop's mode toggle is replaced by the CTA pill + claim sheet */
  #mode-toggle { display: none !important; }
  #claim-pill {
    display: block; position: fixed; z-index: 12; left: 50%; transform: translateX(-50%);
    bottom: calc(14px + var(--sab)); min-width: min(60vw, 320px); max-width: calc(100vw - 24px); height: 52px;
    font-family: inherit; font-size: 12px; cursor: pointer;
    background: var(--accent); color: #1a1408; border: 3px solid var(--accent-deep); box-shadow: var(--shadow-md);
  }
  #claim-pill:active { transform: translate(calc(-50% + 2px), 2px); }
  #claim-pill[hidden], #claim-sheet[hidden], #here-sheet[hidden] { display: none; }
  #claim-sheet, #here-sheet {
    display: block; position: fixed; z-index: 12; left: 0; right: 0; bottom: 0;
    padding: 12px 12px calc(12px + var(--sab));
    background: var(--panel); border-top: 3px solid var(--border); box-shadow: 0 -4px 0 #00000055;
  }
  .cs-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .cs-row + .cs-row { margin-top: 8px; }
  #cs-presets { flex-wrap: nowrap; }
  #cs-presets .cs-btn { flex: 1; padding: 0 4px; font-size: 8px; white-space: nowrap; }
  #cs-presets .cs-label { display: none; }
  #cs-cancel { flex: 1; }
  #cs-text, #hs-title { flex: 1; font-size: 9px; line-height: 1.9; color: var(--ink); }
  #cs-text b { color: var(--accent); }
  #hs-title { font-size: 11px; color: var(--accent); }
  #hs-sub { font-size: 8px; line-height: 1.9; color: var(--ink-faint); margin-top: 4px; }
  .cs-label { font-size: 8px; color: var(--ink-ghost); }
  #cs-close, #hs-close {
    width: 44px; height: 44px; flex: 0 0 auto; font-family: inherit; font-size: 12px; cursor: pointer;
    background: var(--raised); color: var(--ink-dim); border: 2px solid var(--border);
  }
  .cs-btn {
    min-height: 44px; padding: 0 14px; font-family: inherit; font-size: 9px; cursor: pointer;
    background: var(--raised); color: var(--ink-dim); border: 2px solid var(--border);
  }
  .cs-btn.primary { background: var(--accent); color: #1a1408; border-color: var(--accent-deep); flex: 1; font-size: 11px; min-height: 48px; }
  .cs-btn.active { background: var(--raised-hi); color: var(--accent); border-color: var(--accent); }
  #cs-shape-row, #cs-presets { display: none; }
  #claim-sheet.shapes #cs-shape-row, #claim-sheet.anchored #cs-presets { display: flex; }
  #claim-sheet.anchored #cs-shapes, #claim-sheet.anchored #cs-shape-row { display: none; }
  #cs-zoom, #cs-confirm, #cs-cancel { display: none; }
  #claim-sheet.far #cs-zoom, #claim-sheet.confirm #cs-confirm, #claim-sheet.anchored #cs-cancel { display: flex; align-items: center; justify-content: center; }
  #claim-sheet.far #cs-shapes, #claim-sheet.far #cs-presets { display: none; }

  /* spot card → bottom sheet (same shell as the claim sheet), keyboard-aware */
  #shape-menu { display: none !important; }
  #spot-card {
    left: 0; right: 0; bottom: 0; width: auto; border-width: 3px 0 0 0; box-shadow: 0 -4px 0 #00000055;
    padding: 8px 12px calc(12px + var(--sab)); margin-bottom: var(--kb);
    max-height: calc(100vh - var(--kb) - 24px - var(--sat)); overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  @supports (height: 1dvh) { #spot-card { max-height: calc(100dvh - var(--kb) - 24px - var(--sat)); } }
  #spot-card .sheet-handle { display: block; width: 44px; height: 4px; background: var(--border); margin: 0 auto 10px; }
  #sc-close { width: 44px; height: 44px; }
  .sc-head { margin-bottom: 6px; }
  #sc-place { font-size: 10px; }
  #sc-sub { display: none; }
  .sc-sizes { margin-bottom: 6px; }
  .sc-size { min-height: 52px; padding: 6px 2px 5px; gap: 3px; }
  .sc-size b { font-size: 8px; }
  .sc-size .sc-tier { font-size: 5.5px; }
  .sc-note { margin-bottom: 6px; }
  #spot-card .sc-row { margin-bottom: 6px; }
  #spot-card input[type=text] { font-size: 16px; padding: 10px 12px; min-height: 44px; }
  #sc-text { margin-bottom: 6px; }
  #sc-author { font-size: 16px !important; padding: 10px 12px !important; flex: 1 1 140px; }
  /* swatches: 44px targets, two rows of four */
  #spot-card .swatches { flex: 1 1 100%; gap: 6px; }
  #spot-card .swatch { width: auto; height: 44px; flex: 1 1 calc(25% - 6px); }
  .sc-label { min-width: 0; flex: 0 0 100%; }
  .sc-angles { flex: 1 1 100%; }
  .sc-ang { min-height: 44px; font-size: 8px; }
  #sc-angle { display: none; } /* chips + the ↻ handle on the map cover it; the slider costs a row */
  #sc-claim { min-height: 48px; }
  .sc-peek { min-height: 44px; font-size: 7px; }
  .sc-link { min-height: 44px; padding: 12px 4px; }
  #sc-shapes .cs-btn { min-height: 44px; }
  #cs-shape-row { flex-wrap: wrap; }
  #cs-shape-row .cs-btn { flex: 1 0 28%; padding: 0 6px; font-size: 8px; }

  /* toast: top-left under the zoom chip — never over the bottom chrome
     (pill / claim sheet / draw drawer) or the right-hand rail */
  #toast {
    top: calc(68px + var(--sat)); bottom: auto; left: calc(12px + var(--sal)); transform: none;
    font-size: 9px; line-height: 1.8; max-width: calc(100vw - 84px - var(--sal) - var(--sar));
    text-align: left; padding: 10px 12px;
  }

  /* claim form → bottom sheet, keyboard-aware via --kb */
  #modal-wrap { align-items: flex-end; justify-content: stretch; }
  #modal {
    position: relative; width: 100%; max-width: none; border-width: 3px 0 0 0;
    max-height: calc(100vh - var(--kb) - 24px - var(--sat));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    margin-bottom: var(--kb);
    padding: 12px 16px calc(16px + var(--sab));
  }
  @supports (height: 1dvh) { #modal { max-height: calc(100dvh - var(--kb) - 24px - var(--sat)); } }
  #modal .sheet-handle { display: block; width: 44px; height: 4px; background: var(--border); margin: 0 auto 14px; }
  #modal-close {
    display: block; position: absolute; top: 8px; right: 8px; width: 44px; height: 44px;
    font-family: inherit; font-size: 12px; background: transparent; color: var(--ink-dim); border: none; cursor: pointer;
  }
  #modal h2 { font-size: 12px; padding-right: 44px; }
  /* the action row stays pinned to the bottom of the sheet while the rest
     scrolls under it — PLACE IT is always one tap away, keyboard or not */
  #modal .btn-row { position: sticky; bottom: calc(-16px - var(--sab)); z-index: 1; background: var(--panel); padding: 10px 0 calc(12px + var(--sab)); margin-bottom: calc(-12px - var(--sab)); }
  #modal .where { font-size: 9px; }
  #modal #modal-price { font-size: 12px; margin-bottom: 12px; }
  .type-row { gap: 6px; }
  .type-btn { font-size: 9px; padding: 12px 2px; min-height: 48px; }
  #modal input[type=text] { font-size: 16px; padding: 13px; }
  .btn { font-size: 11px; padding: 12px 14px; min-height: 48px; }
  #recover-modal { width: 100%; border-width: 3px 0 0 0; padding: 20px 16px calc(16px + var(--sab)); }
  #recover-wrap { align-items: flex-end; }
  #recover-modal input[type=email] { font-size: 16px; }

  /* onboarding: fit short screens */
  #onboard { max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px 18px; }
  @supports (height: 1dvh) { #onboard { max-height: calc(100dvh - 32px); } }
  #onboard .ob-emoji { font-size: 44px; margin-bottom: 14px; }
  #onboard h2 { font-size: 13px; }
  #onboard p { font-size: 10px; min-height: 0; line-height: 2; }
  #onboard .btn { font-size: 11px; padding: 13px 16px; }

  /* draw studio → bottom drawer */
  #drawbar {
    left: 0; right: 0; bottom: 0; transform: none; width: 100%; max-width: none;
    flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 8px;
    border-width: 3px 0 0 0; padding: 8px 12px calc(10px + var(--sab));
    max-height: min(55vh, 340px);
  }
  @supports (height: 1dvh) { #drawbar { max-height: min(55dvh, 340px); } }
  #drawbar.collapsed .draw-left { display: none; }
  .draw-left { gap: 8px; min-width: 0; }
  #draw-palette, .draw-tools {
    flex-wrap: nowrap; overflow-x: auto; max-width: 100%; gap: 8px; padding: 2px 2px 4px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  #draw-palette::-webkit-scrollbar, .draw-tools::-webkit-scrollbar { display: none; }
  .draw-sizes { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
  .draw-tools > *, .draw-sizes > * { flex: 0 0 auto; }
  #draw-picker { width: 44px; }
  .dt-label { display: none; }
  .draw-actions { display: flex; align-items: center; gap: 8px; }
  #btn-draw-collapse { display: block; width: 44px; height: 44px; }
  #draw-cost { display: block; flex: 1; font-size: 8px; line-height: 1.6; color: var(--ink-dim); text-align: center; white-space: nowrap; overflow: hidden; }
  #draw-cost b { color: var(--good); }
  #btn-draw-done { flex: 2; min-height: 48px; padding: 12px 8px; }
  #btn-draw-cancel { flex: 0 0 auto; min-width: 48px; min-height: 48px; padding: 12px 10px; font-size: 0; }
  #btn-draw-cancel::before { content: '✕'; font-size: 12px; }
  #draw-stats { display: none !important; }
}

/* ============================================================
   14. Share (self-contained — the post-claim share panel + the
   🔗 share action in the claim modal; logic: "share cards" block
   at the end of app.js)
   ============================================================ */
#modal-share {
  margin-top: 14px; font-size: 9px; color: var(--sky); cursor: pointer;
  text-decoration: underline; text-align: center;
}
@media (pointer: coarse) {
  #modal-share { min-height: 44px; padding: 14px 0; margin-top: 4px; box-sizing: border-box; }
}
#share-wrap {
  position: fixed; inset: 0; z-index: var(--z-modal); display: flex;
  background: rgba(4, 6, 14, 0.6); align-items: center; justify-content: center;
}
#share-wrap[hidden] { display: none; }
#share {
  position: relative; width: min(560px, calc(100vw - 32px));
  background: var(--panel); border: 3px solid var(--accent-deep);
  box-shadow: var(--shadow-lg); padding: 24px;
}
#share h2 { font-size: 16px; color: var(--accent); margin-bottom: 8px; padding-right: 40px; line-height: 1.6; }
#share-sub { font-size: 9px; color: var(--ink-faint); line-height: 2; margin-bottom: 14px; word-break: break-word; }
#share-close {
  position: absolute; top: 6px; right: 6px; width: 44px; height: 44px;
  font-family: inherit; font-size: 12px; background: transparent; color: var(--ink-dim); border: none; cursor: pointer;
}
#share-card-box { position: relative; border: 2px solid var(--border); background: var(--well); aspect-ratio: 1200 / 630; margin-bottom: 8px; overflow: hidden; }
#share-save { display: block; font-size: 8px; color: var(--ink-ghost); text-align: right; padding: 8px 0 10px; text-decoration: underline; }
@media (pointer: coarse) { #share-save { min-height: 44px; display: flex; align-items: center; justify-content: flex-end; padding: 0; } }
#share-save[hidden] { display: none; }
#share-card { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
#share-card[hidden] { display: none; }
#share-card-wait {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: var(--ink-ghost); animation: share-pulse 1.2s ease-in-out infinite;
}
#share-card-wait[hidden] { display: none; }
@keyframes share-pulse { 50% { opacity: 0.35; } }
#share-link-row { display: flex; gap: 8px; margin-bottom: 12px; }
#share-link {
  flex: 1; min-width: 0; border: 2px solid var(--border); background: var(--well); color: var(--ink-dim);
  font-size: 9px; padding: 14px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4;
  user-select: all; -webkit-user-select: all;
}
#share-link-row .btn { flex: 0 0 auto; min-height: 44px; padding: 12px 14px; font-size: 10px; }
#share-actions .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
#share-open { flex: 1; text-align: center; }
#share-note { margin-top: 12px; font-size: 8px; color: var(--ink-ghost); line-height: 2; text-align: center; }
@media (max-width: 720px), ((pointer: coarse) and (max-width: 1024px)) {
  #share-wrap { align-items: flex-end; justify-content: stretch; }
  #share {
    width: 100%; border-width: 3px 0 0 0; padding: 14px 16px calc(16px + var(--sab));
    max-height: calc(100vh - 24px - var(--sat)); overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  @supports (height: 1dvh) { #share { max-height: calc(100dvh - 24px - var(--sat)); } }
  #share h2 { font-size: 13px; }
  #share-link { font-size: 8px; padding: 13px 10px; }
  #share-actions { flex-wrap: wrap; }
  #share-actions .btn { flex: 1 1 45%; font-size: 10px; }
}

/* ---------- 15. Gift a spot (claim sheet block; markup in index.html #gift-block) ---------- */
/* one 44px row (checkbox + label with the occasion nudge as a second line) so
   the collapsed block costs the sheet no more than a button */
#gift-block { margin: -8px 0 10px; }
#gift-block[hidden] { display: none; }
#gift-toggle-row {
  display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer;
  font-size: 11px; color: var(--ink-dim); user-select: none;
}
#gift-toggle-row .gift-label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#gift-toggle-row:hover .gift-label { color: var(--accent); }
#gift-nudge { font-size: 8px; color: var(--ink-ghost); line-height: 1.6; }
#gift-toggle {
  appearance: none; width: 18px; height: 18px; margin: 0; flex: 0 0 auto; cursor: pointer;
  background: var(--well); border: 2px solid var(--border);
}
#gift-toggle:checked { background: var(--accent); border-color: var(--accent); }
#gift-toggle:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
#gift-fields[hidden] { display: none; }
#gift-fields { padding: 12px; margin-top: 2px; background: var(--well); border: 2px solid var(--border); }
#modal #gift-fields input, #modal #gift-fields textarea {
  display: block; width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13px; padding: 13px;
  background: var(--bg); color: var(--ink); border: 2px solid var(--border); outline: none; margin-bottom: 10px;
  resize: vertical;
}
#modal #gift-fields input:focus, #modal #gift-fields textarea:focus { border-color: var(--sky); }
#modal #gift-fields textarea { margin-bottom: 4px; min-height: 64px; line-height: 1.6; }
#modal #gift-fields input.bad { border-color: var(--warn); }
#gift-count { font-size: 9px; color: var(--ink-ghost); text-align: right; }
@media (pointer: coarse) {
  #gift-toggle { width: 24px; height: 24px; }
  #gift-toggle-row { min-height: 44px; font-size: 10px; }
  #modal #gift-fields input, #modal #gift-fields textarea { font-size: 16px; min-height: 48px; }
}