/* Self-hosted variable fonts — no Google Fonts request, so the app makes no network
   call of any kind once cached. Same files the public archive uses (tools/fonts/). */
@font-face {
  font-family: 'Cinzel'; src: url('fonts/cinzel-var.woff2') format('woff2');
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter'; src: url('fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --bg: #04050a;
  --glass: rgba(9, 15, 20, 0.90);
  --glass-solid: #0a1118;
  --neon-green: #6ee7a0;
  --neon-teal: #4fe3c2;
  --neon-cyan: #57d1f5;
  --neon-blue: #6f9dff;
  --neon-violet: #9f8cff;
  --gold: #e8c987;
  --gold-dim: #a08b5c;
  --ink: #e9f1ec;
  --ink-soft: rgba(233, 241, 236, 0.6);
  --ink-faint: rgba(233, 241, 236, 0.48);
  --danger: #f08c8c;
  --dock-h: 80px;
  --serif: 'Cinzel', serif;
  --sans: 'Inter', system-ui, sans-serif;
  --border-grad: linear-gradient(120deg, rgba(217,192,138,0.55), rgba(127,191,174,0.5) 55%, rgba(217,192,138,0.4));
  --border-grad-soft: linear-gradient(120deg, rgba(217,192,138,0.24), rgba(127,191,174,0.2) 55%, rgba(217,192,138,0.16));
  --glow: 0 0 16px rgba(110,231,160,0.10), 0 0 34px rgba(87,209,245,0.08);
  --glow-strong: 0 0 14px rgba(110,231,160,0.28), 0 0 40px rgba(87,209,245,0.18), inset 0 0 18px rgba(79,227,194,0.06);
}

html { height: 100%; overflow-x: hidden; overflow-x: clip; overscroll-behavior: none; }
body {
  min-height: 100%;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  overscroll-behavior: none;
  /* clip, not hidden: overflow-x:hidden on html+body demotes scrolling from the
     viewport to the body element on Android Chrome — the source of "scrolling
     doesn't work consistently" reports. clip clips without creating a scroller;
     the hidden line stays as the fallback for engines without clip. */
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100vw;
  -webkit-font-smoothing: antialiased;
}

/* ---------- cosmos backdrop ---------- */
.cosmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(ellipse 100% 55% at 50% -8%, rgba(79,227,194,0.07), transparent 60%),
    radial-gradient(ellipse 85% 50% at 88% 108%, rgba(111,157,255,0.09), transparent 62%),
    radial-gradient(ellipse 70% 45% at 6% 70%, rgba(110,231,160,0.05), transparent 65%),
    linear-gradient(180deg, #060810 0%, #04050a 50%, #050408 100%);
}
/* the backdrop is pure ambient gradient — point "stars" kept reading as dead pixels, removed in beta-18 */

/* ---------- neon primitives ---------- */
.neon-box {
  border: 1.5px solid transparent;
  background: linear-gradient(var(--glass), var(--glass)) padding-box, var(--border-grad) border-box;
  box-shadow: var(--glow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.neon-box-soft {
  border: 1px solid transparent;
  background: linear-gradient(rgba(8,14,20,0.92), rgba(8,14,20,0.92)) padding-box, var(--border-grad-soft) border-box;
}

.wordmark { font-family: var(--serif); font-weight: 500; letter-spacing: 0.08em;
  background: linear-gradient(95deg, #6ee7a0 4%, #d9efe3 42%, #aab6f7 96%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(110,231,160,0.25)); }

.crest-img { display: block; border-radius: 50%;
  filter: drop-shadow(0 0 22px rgba(79,227,194,0.35)) drop-shadow(0 0 50px rgba(110,231,160,0.15)); }

/* ---------- shell ---------- */
.shell { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 16px); }

.topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 6px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
.topbar .wordmark { font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; }
.feedback-pill { font-size: 11px; letter-spacing: 0.08em; color: var(--neon-teal); border-radius: 999px; padding: 6px 13px; text-decoration: none;
  border: 1px solid transparent;
  background: linear-gradient(rgba(8,14,20,0.92), rgba(8,14,20,0.92)) padding-box, var(--border-grad-soft) border-box; }
.feedback-pill:active { box-shadow: var(--glow-strong); }

.view { display: none; padding: 8px 18px 24px; animation: rise 0.28s ease; }
.view.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.view-head { margin: 6px 0 12px; }
.view-head .eyebrow { margin-bottom: 2px; }
.view-head h2 { font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--ink); }

/* ---------- entry (login) screen ---------- */
.gate { position: fixed; inset: 0; z-index: 100; overflow-y: auto;
  background:
    radial-gradient(ellipse 90% 45% at 50% 0%, rgba(79,227,194,0.06), transparent 60%),
    radial-gradient(ellipse 80% 50% at 90% 105%, rgba(111,157,255,0.08), transparent 62%),
    #04050a; }
.gate[hidden] { display: none; }
.gate-inner { max-width: 480px; margin: 0 auto; padding: 8vh 26px 40px; text-align: center; }
.gate-inner .crest-img { width: 148px; height: 148px; margin: 0 auto 22px; }
.gate-inner .wordmark { font-size: 32px; }
.login-card { margin-top: 34px; border-radius: 22px; padding: 26px 20px; text-align: left;
  border: 1.5px solid transparent;
  background: linear-gradient(rgba(7,13,18,0.90), rgba(7,13,18,0.90)) padding-box, var(--border-grad) border-box;
  box-shadow: 0 0 22px rgba(110,231,160,0.12), 0 0 55px rgba(87,209,245,0.10), inset 0 0 30px rgba(79,227,194,0.04);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.login-field { display: flex; align-items: center; gap: 10px; border-radius: 14px; padding: 15px 16px; margin-bottom: 14px;
  border: 1px solid transparent;
  background: linear-gradient(rgba(5,10,14,0.93), rgba(5,10,14,0.93)) padding-box, var(--border-grad-soft) border-box; }
.login-field input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--ink); font-family: var(--sans); font-size: 16px; }
.login-field input::placeholder { color: var(--ink-faint); }
.login-forgot { font-size: 13px; color: var(--ink-faint); white-space: nowrap; cursor: pointer; }
.login-btn { display: block; width: 100%; margin-top: 10px; border-radius: 16px; padding: 16px; cursor: pointer;
  font-family: var(--sans); font-size: 18px; color: #d9ffe9; letter-spacing: 0.02em;
  border: 1.5px solid transparent;
  background: linear-gradient(rgba(10,20,22,0.94), rgba(10,20,22,0.94)) padding-box, linear-gradient(100deg, rgba(110,231,160,0.9), rgba(87,209,245,0.8)) border-box;
  box-shadow: 0 0 18px rgba(110,231,160,0.25), 0 6px 30px rgba(79,227,194,0.12), inset 0 0 20px rgba(110,231,160,0.06);
  text-shadow: 0 0 12px rgba(110,231,160,0.5); }
.login-btn:active { filter: brightness(1.15); }
.gate-links { margin-top: 30px; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.gate-link { background: none; border: none; cursor: pointer; font-family: var(--sans); color: #dfe9ef; letter-spacing: 0.02em; }
.gate-link.signup { font-size: 18px; display: flex; align-items: center; gap: 14px; color: #cfdae2; }
.gate-link.signup::before, .gate-link.signup::after { content: ''; width: 44px; height: 1px; background: rgba(233,241,236,0.18); }
.gate-link.guest { font-size: 20px; text-shadow: 0 0 14px rgba(87,209,245,0.35); }
.gate-fine { margin-top: 34px; font-size: 11px; line-height: 1.7; color: var(--ink-faint); max-width: 330px; margin-left: auto; margin-right: auto; }
.consent-row { display: flex; gap: 10px; align-items: flex-start; text-align: left; max-width: 330px; margin: 20px auto 0; cursor: pointer;
  font-size: 12px; line-height: 1.6; color: var(--ink-soft); }
.consent-row input { margin-top: 3px; accent-color: var(--gold); width: 15px; height: 15px; flex: none; cursor: pointer; }
.consent-row b { color: var(--ink); }
.consent-row a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- home ---------- */
.brand-stage { text-align: center; padding: 14px 0 6px; }
.brand-stage .crest-img { width: 104px; height: 104px; margin: 0 auto 14px; }
.brand-stage .wordmark { font-size: 32px; }
.brand-sub { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); max-width: 320px; margin-left: auto; margin-right: auto; }

.stat-row { display: flex; gap: 8px; justify-content: center; margin: 18px 0 4px; flex-wrap: wrap; }
.stat-pill { border-radius: 999px; padding: 7px 14px; font-size: 12px; color: var(--ink-soft);
  border: 1px solid transparent;
  background: linear-gradient(rgba(8,14,20,0.92), rgba(8,14,20,0.92)) padding-box, var(--border-grad-soft) border-box; }
.stat-pill strong { color: var(--neon-teal); font-weight: 600; margin-right: 4px; }

.panel[hidden] { display: none; }
.panel { border-radius: 20px; padding: 18px; margin-top: 16px;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--glass), var(--glass)) padding-box, var(--border-grad-soft) border-box;
  box-shadow: var(--glow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.eyebrow { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(110,231,160,0.65); margin-bottom: 3px; }
.panel-head h2 { font-family: var(--serif); font-weight: 500; font-size: 18px; color: var(--ink); }
.badge { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--neon-cyan); border: 1px solid rgba(87,209,245,0.3); background: rgba(87,209,245,0.06); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }

.chip { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid rgba(233,241,236,0.16); color: rgba(233,241,236,0.75); background: rgba(233,241,236,0.03); }
.chip-gold { border-color: rgba(217,192,138,0.35); color: var(--gold); background: rgba(217,192,138,0.05); }
.chip-cyan { border-color: rgba(127,191,174,0.32); color: #a9d4c5; background: rgba(127,191,174,0.05); }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }

.spotlight { position: relative; overflow: hidden; border-radius: 16px; padding: 18px; cursor: pointer;
  border: 1.5px solid transparent;
  background: linear-gradient(rgba(7,14,18,0.92), rgba(7,14,18,0.92)) padding-box, var(--border-grad) border-box;
  box-shadow: var(--glow-strong); }
.spotlight h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; margin: 4px 0 6px; color: var(--gold); }
.spotlight p { font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.spotlight .reason { margin-top: 10px; font-size: 12px; color: var(--neon-teal); }
.spotlight .tag-row { margin-top: 12px; }
.spotlight .spot-emoji { position: absolute; right: 14px; top: 12px; font-size: 34px; filter: drop-shadow(0 0 14px rgba(87,209,245,0.4)); }

/* ---------- search & filters ---------- */
.search-box { display: flex; align-items: center; gap: 10px; border-radius: 14px; padding: 12px 15px; margin-bottom: 10px;
  border: 1px solid transparent;
  background: linear-gradient(rgba(5,10,14,0.93), rgba(5,10,14,0.93)) padding-box, var(--border-grad-soft) border-box; }
.search-box svg { width: 15px; height: 15px; stroke: var(--neon-teal); fill: none; stroke-width: 2; flex-shrink: 0; opacity: 0.7; }
.search-box input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--ink); font-family: var(--sans); font-size: 16px; } /* ≥16px: sub-16 inputs make iOS auto-zoom on focus — the dock then strands mid-screen (fixed elements pin to the layout viewport while zoomed) */
.search-box input::placeholder { color: var(--ink-faint); }
.search-box input::-webkit-search-cancel-button { display: none; } /* our × instead of the browser's */
.search-clear { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1;
  color: var(--neon-teal); background: rgba(79,227,194,0.10); }
.search-clear:active { background: rgba(79,227,194,0.25); }
.search-clear[hidden] { display: none; }
.strain-field { position: relative; }
.strain-field .text-input { padding-right: 42px; }
.field-clear { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); }
/* wraps 2×2 on narrow screens — four selects across 375px clipped "Time of day";
   the font must stay ≥16px (iOS zooms on focus), so the row gives way instead */
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.filter-row select { flex: 1 1 40%; min-width: 0; appearance: none; color: var(--ink-soft); border-radius: 10px; padding: 7px 26px 7px 8px; font-family: var(--sans); font-size: 16px; outline: none; /* ≥16px or iOS zooms on focus and text sizes wander */
  border: 1px solid transparent;
  background:
    linear-gradient(45deg, transparent 50%, rgba(233,241,236,0.55) 50%) calc(100% - 14px) 51% / 5px 5px no-repeat padding-box,
    linear-gradient(135deg, rgba(233,241,236,0.55) 50%, transparent 50%) calc(100% - 9px) 51% / 5px 5px no-repeat padding-box,
    linear-gradient(rgba(5,10,14,0.93), rgba(5,10,14,0.93)) padding-box,
    var(--border-grad-soft) border-box; }
@media (min-width: 480px) { .filter-row select { flex-basis: 0; } }

/* ---------- strain cards (explore) ---------- */
/* the class-tinted spine is the row's echo of a vault card's --cc border;
   it carries the class at the edge so .class-tag can stop competing */
.strain-row { position: relative; overflow: clip; border-radius: 16px; padding: 14px 15px 14px 18px; margin-top: 12px; cursor: pointer; display: flex; gap: 13px; align-items: center;
  border: 1.5px solid transparent; transition: transform 0.15s;
  transition: transform 0.3s linear(0, 0.62, 0.94, 1.04, 0.99, 1); /* spring release; harmless fallback above */
  background: linear-gradient(rgba(7,13,18,0.92), rgba(7,13,18,0.92)) padding-box, var(--border-grad-soft) border-box;
  box-shadow: var(--glow);
  /* offscreen rows skip layout+paint — at 2,000+ cultivars the full A–Z list froze phones without this */
  content-visibility: auto; contain-intrinsic-size: auto 85px; }
.strain-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; opacity: 0.75;
  background: var(--cc, #6ee7a0); box-shadow: 0 0 10px color-mix(in srgb, var(--cc, #6ee7a0) 55%, transparent); }
.strain-row:active { transform: scale(0.985); }
/* Light archive mode for devices whose browser was killed mid-paint on the
   full-dress list (see the crash probe in renderExplore). Pretty-lite, not
   flat: the killer is the per-row blurred glow halos, so those go — the
   tinted border, a single cheap depth gradient and the coloured thumbs stay,
   which keeps ~90% of the look at a fraction of the GPU cost. */
#strainList.safe .strain-row { content-visibility: visible; box-shadow: none;
  background: linear-gradient(180deg, #0c1218, #080d13);
  border: 1.5px solid rgba(110,231,160,0.22); }
#strainList.safe .strain-row:nth-child(3n) { border-color: rgba(87,209,245,0.20); }
#strainList.safe .strain-row:nth-child(3n+1) { border-color: rgba(217,192,138,0.22); }
.strain-thumb { width: 62px; height: 62px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 28% 24%, color-mix(in srgb, var(--c1, #7fbfae) 26%, transparent) 0%, transparent 62%),
    radial-gradient(circle at 74% 80%, color-mix(in srgb, var(--c2, #9d92d9) 20%, transparent) 0%, transparent 66%),
    radial-gradient(1px 1px at 20% 60%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 70% 30%, rgba(255,255,255,0.35), transparent),
    #0a0e13;
  border: 1px solid rgba(217,192,138,0.26);
  box-shadow: inset 0 0 12px rgba(0,0,0,0.5); }
.strain-copy { flex: 1; min-width: 0; }
.strain-copy h3 { font-family: var(--serif); font-size: 18px; font-weight: 500; }
.strain-copy .desc-line { font-size: 11px; color: var(--gold); margin: 2px 0 4px; }
.strain-copy .terp-line { font-size: 11px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.class-tag { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  color: color-mix(in srgb, var(--cc, var(--neon-green)) 78%, #e9f1ec); border: 1px solid transparent;
  background: color-mix(in srgb, var(--cc, var(--neon-green)) 12%, transparent); }

/* ---------- explore: A-Z rail (iOS-contacts style) ---------- */
.alpha-rail { position: fixed; right: 3px; top: 50%; transform: translateY(-50%); z-index: 30;
  display: flex; flex-direction: column; align-items: center; max-height: 66vh; max-height: 66dvh; padding: 8px 4px;
  border-radius: 999px; background: rgba(6, 10, 14, 0.5); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  touch-action: none; user-select: none; -webkit-user-select: none;
  opacity: 1; transition: opacity 0.55s ease; }
.alpha-rail.faded { opacity: 0; pointer-events: none; }
.alpha-rail i { font-family: var(--sans); font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: 0.03em;
  color: var(--neon-teal); width: 20px; height: 15px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transform-origin: right center;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.22s ease; }
/* the section you're in swells; its neighbours ease up too, for a fluid wave */
.alpha-rail i.on { color: var(--gold); transform: scale(1.9); text-shadow: 0 0 10px rgba(232,201,135,0.5); }
.alpha-rail i.on + i, .alpha-rail i:has(+ i.on) { transform: scale(1.35); color: #f0dca8; }
.alpha-rail[hidden] { display: none; }
/* floating gold bubble that rides the finger while dragging */
.rail-bubble { position: absolute; right: 34px; transform: translateY(-50%); pointer-events: none;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 22px; font-weight: 600; color: #0a0e13;
  background: radial-gradient(circle at 38% 32%, #f6e4b4, #e8c987 55%, #c8a05a);
  box-shadow: 0 4px 20px rgba(0,0,0,0.55), 0 0 22px rgba(232,201,135,0.4);
  animation: railBubblePop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes railBubblePop { from { transform: translateY(-50%) scale(0.4); opacity: 0; } to { transform: translateY(-50%) scale(1); opacity: 1; } }
.rail-bubble[hidden] { display: none; }

/* ---------- terpene cards ---------- */
.terp-card { border-radius: 16px; padding: 15px 16px; margin-top: 12px;
  border: 1px solid transparent;
  background: linear-gradient(rgba(7,13,18,0.92), rgba(7,13,18,0.92)) padding-box, var(--border-grad-soft) border-box; }
.terp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.terp-dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 10px currentColor; flex-shrink: 0; }
.terp-head h3 { font-family: var(--serif); font-size: 18px; font-weight: 500; flex: 1; }
.evidence { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid rgba(255,255,255,0.12); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.terp-card p { font-size: 12px; line-height: 1.55; color: var(--ink-soft); margin-bottom: 10px; }
.terp-card .pairings { font-size: 11px; color: var(--ink-faint); margin-top: 8px; }
.terp-card .pairings b { color: var(--neon-teal); font-weight: 500; }

/* ---------- journal: month chapters & slim rows ---------- */
.month-block { margin-top: 8px; }
.month-head { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 14px 2px 6px; background: none; border: none; cursor: pointer; text-align: left;
  border-bottom: 1px solid rgba(217,192,138,0.22); }
.month-title { font-family: var(--serif); font-size: 13px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.month-count { font-family: var(--sans); font-size: 11px; color: var(--ink-faint); flex: 1; }
.month-head .rebuy-chevron { align-self: center; margin-bottom: 2px; }
.entry-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 4px; background: none; border: none; cursor: pointer; text-align: left;
  border-bottom: 1px solid rgba(233,241,236,0.06); }
.entry-row:active { background: rgba(233,241,236,0.03); }
.row-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 8px currentColor; }
.row-name { font-family: var(--serif); font-size: 16px; font-weight: 500; color: var(--ink); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-meta { font-family: var(--sans); font-size: 11px; color: var(--ink-faint); letter-spacing: 0.04em; white-space: nowrap; }
.row-rebuy { font-family: var(--sans); font-size: 12px; color: var(--ink-faint); width: 16px; text-align: center; }
.row-rebuy.yes { color: var(--neon-green); }
.journal-filter { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 9px 14px; border-radius: 999px;
  font-family: var(--sans); font-size: 12px; color: var(--ink-soft);
  border: 1px solid transparent;
  background: linear-gradient(rgba(8,14,20,0.92), rgba(8,14,20,0.92)) padding-box, var(--border-grad-soft) border-box; }
.journal-filter b { color: var(--gold); font-weight: 600; }
.journal-filter button { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--neon-teal); font-size: 16px; line-height: 1; }
#entryList .entry-card .entry-top { cursor: pointer; }

/* ---------- journal entries ---------- */
.entry-card { border-radius: 16px; padding: 15px 16px; margin-top: 12px;
  border: 1px solid transparent;
  background: linear-gradient(rgba(7,13,18,0.92), rgba(7,13,18,0.92)) padding-box, var(--border-grad-soft) border-box; }
.entry-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.entry-top h3 { font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--ink); }
.entry-date { font-size: 11px; color: var(--ink-faint); letter-spacing: 0.06em; white-space: nowrap; }
.entry-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; align-items: center; }
.entry-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; }
.mini-bar { display: grid; grid-template-columns: 72px 1fr 24px; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-faint); }
.mini-bar .track { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.08); overflow: hidden; }
.mini-bar .fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--neon-teal), var(--gold)); }
.mini-bar strong { color: var(--ink-soft); font-weight: 500; text-align: right; }
.entry-notes { margin-top: 10px; font-size: 12px; line-height: 1.55; color: var(--ink-soft); font-style: italic; }
.entry-actions { display: flex; gap: 12px; margin-top: 12px; }
.entry-actions button { background: none; border: none; font-family: var(--sans); font-size: 11px; letter-spacing: 0.06em; color: var(--neon-teal); cursor: pointer; padding: 2px 0; border-bottom: 1px solid rgba(79,227,194,0.35); }
.entry-actions .danger { color: var(--danger); border-color: rgba(240,140,140,0.35); }
.buy-again { font-size: 11px; color: var(--neon-green); }
.buy-again.no { color: var(--ink-faint); }

/* ---------- sheets & forms ---------- */
.sheet { position: fixed; inset: 0; z-index: 50; display: none; flex-direction: column; background: rgba(3,4,8,0.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sheet.open { display: flex; }
.sheet-body { margin-top: auto; max-height: 92vh; max-height: min(92dvh, 100%); overflow-y: auto; border-radius: 24px 24px 0 0; padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  border: 1.5px solid transparent; border-bottom: none;
  background: linear-gradient(rgba(9,15,20,0.97), rgba(6,9,14,0.99)) padding-box, var(--border-grad) border-box;
  box-shadow: 0 -10px 60px rgba(79,227,194,0.10);
  animation: sheetUp 0.3s cubic-bezier(0.2, 0.9, 0.3, 1); }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-grab { width: 42px; height: 4px; border-radius: 2px; background: rgba(110,231,160,0.35); margin: 0 auto 16px; }
.sheet-title { font-family: var(--serif); text-align: center; font-size: 16px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); margin-bottom: 18px; text-shadow: 0 0 16px rgba(110,231,160,0.3); }

.field-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(110,231,160,0.6); margin: 16px 0 8px; }
.text-input { width: 100%; border-radius: 14px; padding: 13px 15px; color: var(--ink); font-family: var(--sans); font-size: 16px; outline: none;
  border: 1px solid transparent;
  background: linear-gradient(rgba(4,8,12,0.94), rgba(4,8,12,0.94)) padding-box, var(--border-grad-soft) border-box; }
.text-input:focus { box-shadow: 0 0 0 3px rgba(79,227,194,0.12), var(--glow); }
textarea.text-input { resize: vertical; min-height: 70px; line-height: 1.5; }

.seg-row { display: flex; gap: 8px; flex-wrap: wrap; }
.seg { flex: 1; min-width: 72px; text-align: center; border-radius: 999px; padding: 9px 12px; font-size: 13px; color: var(--ink-soft); cursor: pointer; transition: all 0.15s; user-select: none;
  border: 1px solid rgba(233,241,236,0.14); background: rgba(6,10,14,0.9); }
.seg.on { border-color: var(--gold); color: #f5e3bb; background: rgba(232,201,135,0.10); box-shadow: 0 0 14px rgba(232,201,135,0.18); }
.seg-row.wrap .seg { flex: 0 1 auto; }
.seg-row.teal .seg.on { border-color: var(--neon-teal); color: #c8f5e8; background: rgba(79,227,194,0.08); box-shadow: 0 0 14px rgba(79,227,194,0.2); }

.slider-row { display: grid; grid-template-columns: 92px 1fr 34px; align-items: center; gap: 12px; margin: 13px 0; }
.slider-row label { font-size: 13px; color: var(--ink-soft); }
.slider-row output { font-size: 13px; color: var(--gold); text-align: right; font-variant-numeric: tabular-nums; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent;
  touch-action: none; } /* a slider is never a scroll surface: without this, a thumb-drag also pans the sheet — the "screen moves while I set it" bug. Scroll from the labels or the gaps. */
input[type="range"]::-webkit-slider-runnable-track { height: 5px; border-radius: 2px; background: linear-gradient(90deg, rgba(79,227,194,0.9), rgba(232,201,135,0.95) var(--pct, 50%), rgba(255,255,255,0.10) var(--pct, 50%)); box-shadow: 0 0 8px rgba(79,227,194,0.25); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 19px; height: 19px; margin-top: -7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffedbb, #e8c987 60%, #9a7b45); border: 1px solid rgba(255,240,200,0.7); box-shadow: 0 0 12px rgba(245,220,150,0.65); }
input[type="range"]::-moz-range-track { height: 5px; border-radius: 2px; background: rgba(255,255,255,0.10); }
input[type="range"]::-moz-range-progress { height: 5px; border-radius: 2px; background: linear-gradient(90deg, #4fe3c2, #e8c987); }
input[type="range"]::-moz-range-thumb { width: 19px; height: 19px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffedbb, #e8c987 60%, #9a7b45); border: 1px solid rgba(255,240,200,0.7); box-shadow: 0 0 12px rgba(245,220,150,0.65); }

.toggle-row { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 4px; }
.toggle-row span { font-size: 13px; color: var(--ink-soft); }
.switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .knob { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,0.10); border: 1px solid rgba(233,241,236,0.15); transition: all 0.2s; cursor: pointer; }
.switch .knob::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; border-radius: 50%; background: #8a938e; transition: all 0.2s; }
.switch input:checked + .knob { background: rgba(79,227,194,0.18); border-color: var(--neon-teal); }
.switch input:checked + .knob::before { transform: translateX(20px); background: radial-gradient(circle at 35% 30%, #d9fff0, #4fe3c2 70%); box-shadow: 0 0 10px rgba(79,227,194,0.7); }

.btn { display: block; width: 100%; text-align: center; font-family: var(--sans); font-size: 14px; letter-spacing: 0.06em; border-radius: 999px; padding: 14px; cursor: pointer; margin-top: 18px; }
.btn-primary { color: #d9ffe9; border: 1.5px solid transparent;
  background: linear-gradient(rgba(10,20,22,0.94), rgba(10,20,22,0.94)) padding-box, linear-gradient(100deg, rgba(110,231,160,0.9), rgba(87,209,245,0.8)) border-box;
  box-shadow: 0 0 18px rgba(110,231,160,0.25), inset 0 0 20px rgba(110,231,160,0.05);
  text-shadow: 0 0 12px rgba(110,231,160,0.5); }
.btn-primary:active { filter: brightness(1.15); }
.btn-ghost { background: none; border: 1px solid rgba(233,241,236,0.2); color: var(--ink-soft); margin-top: 10px; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }

.stepper { display: flex; align-items: center; gap: 0; border-radius: 999px; overflow: hidden;
  border: 1px solid transparent;
  background: linear-gradient(rgba(4,8,12,0.94), rgba(4,8,12,0.94)) padding-box, var(--border-grad-soft) border-box; }
.stepper button { background: none; border: none; color: var(--neon-teal); font-size: 20px; padding: 10px 16px; cursor: pointer; }
.stepper input { flex: 1; min-width: 0; text-align: center; background: none; border: none; outline: none; color: var(--ink); font-family: var(--sans); font-size: 16px; }

/* ---------- strain detail sheet ---------- */
.detail-name { font-family: var(--serif); font-size: 26px; font-weight: 500; text-align: center; margin: 2px 0 4px;
  background: linear-gradient(95deg, #f2dfae, #e8c987 60%, #d3ecd9); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.desc-line { text-align: center; font-size: 14px; margin-bottom: 14px; }
.desc-line span { color: var(--gold); }
.desc-line .sep { color: var(--ink-faint); margin: 0 5px; }
.pill-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 6px; }
.info-pill { font-size: 12px; padding: 7px 14px; border-radius: 999px; color: var(--ink-soft);
  border: 1px solid transparent;
  background: linear-gradient(rgba(5,10,14,0.93), rgba(5,10,14,0.93)) padding-box, var(--border-grad-soft) border-box; }
.info-pill b { color: var(--gold); font-weight: 600; }
.detail-hero { position: relative; display: flex; align-items: center; justify-content: center;
  margin: -8px -20px 14px; height: 168px; border-bottom: 1px solid rgba(217,192,138,0.30);
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c1, #7fbfae) 26%, transparent) 0%, transparent 64%),
    radial-gradient(circle at 72% 80%, color-mix(in srgb, var(--c2, #9d92d9) 20%, transparent) 0%, transparent 68%),
    radial-gradient(1px 1px at 22% 58%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 68% 32%, rgba(255,255,255,0.4), transparent),
    #0a0e13; }
.detail-hero .card-gem { top: 12px; right: 14px; width: 19px; height: 19px; }
/* the band carries the art now; the orb is just the monogram's box */
.detail-hero .orb { display: flex; align-items: center; justify-content: center; }
.detail-section h4 { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(110,231,160,0.6); margin: 16px 0 8px; }
.detail-section p { font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.terp-pct { display: grid; grid-template-columns: 130px 1fr 40px; align-items: center; gap: 10px; margin: 8px 0; font-size: 13px; color: var(--ink-soft); }
.terp-pct .track { height: 5px; border-radius: 2px; background: rgba(255,255,255,0.08); overflow: hidden; }
.terp-pct .fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--neon-teal), var(--gold)); box-shadow: 0 0 8px rgba(79,227,194,0.4); }
.terp-pct strong { color: var(--gold); font-weight: 600; text-align: right; }
.fine-print { font-size: 10px; line-height: 1.6; color: var(--ink-faint); margin-top: 10px; }
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 16px; }
.action-grid .seg { min-width: 0; }

/* ---------- vault: collection ---------- */
.collection-head { text-align: center; margin: 6px 0 14px; }
.collection-head .eyebrow { font-size: 12px; letter-spacing: 0.28em; color: var(--ink); margin-bottom: 4px; }
.collection-head p { font-size: 13px; color: var(--ink-soft); }
.class-counts { display: flex; gap: 8px; justify-content: center; margin: 14px 0 4px; flex-wrap: wrap; }
.class-count { font-size: 12px; padding: 7px 16px; border-radius: 999px; border: 1px solid; background: rgba(6,10,14,0.9); cursor: pointer; user-select: none; }
.class-count b { margin-left: 6px; }
.class-count.dim { opacity: 0.35; }

.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 14px; }
.strain-card { border-radius: 16px; overflow: hidden; cursor: pointer; position: relative;
  border: 1.5px solid var(--cc, #6ee7a0);
  box-shadow: 0 0 14px color-mix(in srgb, var(--cc, #6ee7a0) 30%, transparent), 0 0 22px rgba(110,231,160,0.14), 0 0 38px rgba(87,209,245,0.10), inset 0 0 10px rgba(0,0,0,0.4);
  background: #080d13; transition: transform 0.15s;
  /* spring release on tap — falls back to the plain 0.15s where linear() is unsupported */
  transition: transform 0.3s linear(0, 0.62, 0.94, 1.04, 0.99, 1); }
.strain-card:active { transform: scale(0.97); }
.card-art { position: relative; height: 118px; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 28% 24%, color-mix(in srgb, var(--c1, #7fbfae) 26%, transparent) 0%, transparent 62%),
    radial-gradient(circle at 74% 80%, color-mix(in srgb, var(--c2, #9d92d9) 20%, transparent) 0%, transparent 66%),
    radial-gradient(1px 1px at 20% 60%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 70% 30%, rgba(255,255,255,0.35), transparent),
    #0a0e13; }
.card-gem { position: absolute; top: 7px; right: 8px; width: 15px; height: 15px; transform: rotate(45deg); border-radius: 2px;
  background: var(--gem, #4fe3c2); box-shadow: 0 0 10px var(--gem, #4fe3c2); border: 1px solid rgba(255,255,255,0.5); }
/* pressings marker: how many times this specimen has been logged */
.card-press { position: absolute; top: 7px; left: 8px; z-index: 2; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--gold); padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(217,192,138,0.4); background: rgba(5,8,12,0.75); }
.card-plate { padding: 9px 10px 11px; border-top: 1px solid color-mix(in srgb, var(--cc, #6ee7a0) 45%, transparent); background: rgba(5,8,12,0.85); }
.card-plate h3 { font-family: var(--serif); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; text-align: center; color: var(--gold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-plate .card-desc { text-align: center; font-size: 10px; color: var(--ink-soft); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-plate .card-terps { text-align: center; font-size: 9px; color: var(--ink-faint); margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.07); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- vault: full card overlay ---------- */
.card-full { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center;
  padding: max(22px, env(safe-area-inset-top, 0px)) max(22px, env(safe-area-inset-right, 0px)) max(22px, env(safe-area-inset-bottom, 0px)) max(22px, env(safe-area-inset-left, 0px));
  background: rgba(2,3,6,0.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.card-full.open { display: flex; }
/* full card up: freeze the page behind, and keep the card's own scrolling from
   chaining through to it (the background crept if you scrolled past the end) */
html.cardfull-open, body.cardfull-open { overflow: hidden; }
/* the lock that holds on WebKit; scrollY is stashed and restored around it */
html.scroll-locked { overflow: hidden; }
body.scroll-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
.card-full-inner, .cf-back-split { overscroll-behavior: contain; }
.cf-character { display: block; width: 100%; border-radius: 14px; margin-top: 16px;
  border: 1px solid rgba(217,192,138,0.28); }
.card-full-inner { width: 100%; max-width: 360px; max-height: 92vh; max-height: min(92dvh, 100%); overflow-y: auto; border-radius: 22px; overflow-x: hidden;
  border: 1.5px solid transparent;
  background: linear-gradient(#070b10, #070b10) padding-box, linear-gradient(140deg, rgba(217,192,138,0.75), rgba(127,191,174,0.55) 50%, rgba(217,192,138,0.6)) border-box;
  box-shadow: 0 0 26px rgba(217,192,138,0.14), 0 0 60px rgba(127,191,174,0.10);
  animation: rise 0.25s ease; }
.card-full .art { position: relative; height: 210px; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c1, #7fbfae) 26%, transparent) 0%, transparent 64%),
    radial-gradient(circle at 72% 80%, color-mix(in srgb, var(--c2, #9d92d9) 20%, transparent) 0%, transparent 68%),
    radial-gradient(1px 1px at 22% 58%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 68% 32%, rgba(255,255,255,0.4), transparent),
    #0a0e13; }

/* serif monogram — replaces mascots on cards without artwork */
.mono { font-family: var(--serif); font-weight: 500; color: rgba(236,231,220,0.82); letter-spacing: 0.08em;
  text-shadow: 0 0 18px rgba(217,192,138,0.3); position: relative; }
.mono::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: -9px; width: 26px; height: 1px; background: rgba(217,192,138,0.55); }
.strain-thumb .mono { font-size: 20px; }
.strain-thumb .mono::after { width: 16px; bottom: -5px; }
.detail-hero .orb .mono { font-size: 52px; }
.detail-hero .orb .mono::after { width: 40px; bottom: -13px; }
.card-art .mono { font-size: 38px; }
.card-full .art .mono { font-size: 68px; }
.card-full .art .mono::after { width: 44px; bottom: -14px; }
.card-full .gem { position: absolute; top: 14px; right: 16px; width: 22px; height: 22px; transform: rotate(45deg); border-radius: 4px;
  background: var(--gem, #4fe3c2); box-shadow: 0 0 16px var(--gem, #4fe3c2); border: 1px solid rgba(255,255,255,0.6); }
.card-full .body { padding: 18px 20px 22px; }
.card-full h2 { font-family: var(--serif); font-size: 26px; font-weight: 600; text-align: center;
  background: linear-gradient(95deg, #f2dfae, #e8c987 55%, #f0d9a0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.card-full .rule { height: 1px; margin: 14px 0;
  background: linear-gradient(90deg, transparent, rgba(217,192,138,0.7) 30%, rgba(217,192,138,0.7) 70%, transparent); box-shadow: 0 0 6px rgba(217,192,138,0.25); }
.effect-scale { margin: 4px 0 2px; }
.effect-scale .effect-labels { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.effect-scale .effect-labels b { color: var(--gold); font-weight: 600; margin-left: 5px; font-size: 12px; letter-spacing: 0; }
.effect-scale .scale-track { position: relative; height: 4px; border-radius: 2px; background: linear-gradient(90deg, rgba(127,191,174,0.6), rgba(217,192,138,0.75)); box-shadow: 0 0 8px rgba(217,192,138,0.2); }
.effect-scale .scale-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4d4, #e8c987 65%); border: 1px solid rgba(255,244,212,0.8); box-shadow: 0 0 10px rgba(245,220,150,0.8); }
.effect-scale .scale-nums { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-faint); margin-top: 7px; }
.card-terp-row { display: flex; align-items: center; gap: 9px; margin: 9px 0; font-size: 13px; color: var(--ink-soft); }
.card-terp-row .dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.card-terp-row b { color: var(--ink); font-weight: 500; }
.card-terp-row .pct { margin-left: auto; color: var(--gold); font-weight: 600; }
.card-meta-line { font-size: 12px; color: var(--ink-soft); text-align: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); }
.card-formats { margin-top: 12px; text-align: center; }
.card-formats p { font-size: 12px; color: var(--ink-soft); margin: 3px 0; }
.card-formats .cf-label { display: block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--neon-teal); margin-bottom: 6px; }
.cf-strengths { display: flex; flex-direction: column; gap: 5px; max-width: 240px; margin: 0 auto; }
.cf-strength { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 12px; border-radius: 10px;
  background: rgba(233,241,236,0.03); border: 1px solid rgba(233,241,236,0.08); }
.cf-strength .cf-fmt { font-size: 12px; color: var(--ink-soft); }
.cf-strength .cf-thc { font-family: var(--serif); font-size: 14px; font-weight: 500; color: var(--gold); font-variant-numeric: tabular-nums; }
.cf-fmt-only { font-size: 11px; color: var(--ink-faint); margin-top: 6px !important; }
.cf-typical { font-size: 11px; color: var(--ink-faint); margin-top: 6px !important; }

/* THC fine +/- steppers under the strength slider */
.thc-control { margin-top: 2px; }
.thc-slider-row { margin-bottom: 4px; }
.thc-fine { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.thc-fine-hint { font-size: 10px; letter-spacing: 0.04em; color: var(--ink-faint); }
.thc-fine button { width: 34px; height: 30px; border-radius: 10px; cursor: pointer; font-size: 18px; line-height: 1; color: var(--neon-teal);
  border: 1px solid transparent;
  background: linear-gradient(rgba(4,8,12,0.94), rgba(4,8,12,0.94)) padding-box, var(--border-grad-soft) border-box; }
/* hold-to-repeat steppers: rapid taps must never double-tap-zoom (iOS ignores
   user-scalable=no), and a long press must not select the +/- glyph */
.thc-fine button, .stepper button, .qty-step button { touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.thc-fine button:active { box-shadow: var(--glow-strong); }
/* ---------- card flip: the photo lives on the reverse side ---------- */
.card-full-inner { perspective: 1600px; }
.card-full-inner.back-showing { overflow-y: hidden; }
.cf-card { position: relative; transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.35, 0.9, 0.3, 1); }
.cf-card.flipped { transform: rotateY(180deg); }
.cf-front { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cf-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transform: rotateY(180deg); overflow: hidden; border-radius: 20px;
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c1, #7fbfae) 18%, transparent) 0%, transparent 64%),
    radial-gradient(circle at 72% 80%, color-mix(in srgb, var(--c2, #9d92d9) 14%, transparent) 0%, transparent 68%),
    #080b10; }
.cf-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cf-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; }
.cf-empty svg { width: 44px; height: 44px; stroke: rgba(217,192,138,0.55); fill: none; stroke-width: 1.3; stroke-linejoin: round; }
.cf-empty p { font-family: var(--serif); font-size: 16px; letter-spacing: 0.1em; color: var(--ink-soft); }
.cf-back-plate { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 30px 18px 14px; text-align: center;
  background: linear-gradient(transparent, rgba(4,6,10,0.85)); pointer-events: none; }
.cf-back-name { display: block; font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--gold); letter-spacing: 0.06em; }
.cf-back-caption { display: block; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-top: 3px; }
/* controls shared by both faces */
.art-flip-btn, .art-photo-btn, .art-photo-remove { position: absolute; z-index: 3; cursor: pointer; border: none;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.art-flip-btn { bottom: 12px; left: 14px; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(6,10,14,0.6); border: 1px solid rgba(127,191,174,0.45); }
.art-flip-btn svg { width: 18px; height: 18px; stroke: var(--neon-teal); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.art-flip-btn:active { box-shadow: var(--glow-strong); }
.art-photo-btn { bottom: 12px; right: 14px; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(6,10,14,0.6); border: 1px solid rgba(217,192,138,0.4); }
.art-photo-btn svg { width: 19px; height: 19px; stroke: var(--gold); fill: none; stroke-width: 1.5; stroke-linejoin: round; }
.art-photo-btn:active { box-shadow: var(--glow-strong); }
.art-photo-remove { top: 12px; left: 14px; width: 28px; height: 28px; border-radius: 50%; font-size: 18px; line-height: 1; color: var(--ink);
  background: rgba(6,10,14,0.65); border: 1px solid rgba(255,255,255,0.2); }
@media (prefers-reduced-motion: reduce) { .cf-card { transition: none; } }
/* mini vault card: subtle marker that a photo waits on the back */
.card-photo-dot { position: absolute; bottom: 7px; right: 8px; z-index: 2; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,10,14,0.7); border: 1px solid rgba(217,192,138,0.4); }
.card-photo-dot svg { width: 11px; height: 11px; stroke: var(--gold); fill: none; stroke-width: 1.6; stroke-linejoin: round; }

/* vault-card rating: centred under the monogram's gold rule, so the plate reads as one
   stacked lockup — initials, rule, verdict. It was a pilled overlay in the bottom-left
   corner, which fought the gem and the press mark for the eye and sat off the card's axis.
   No box: the grid card's art is always the monogram (a photo only ever fronts the OPEN
   card, and shows here as the corner dot), so there is nothing to sit against and a
   shadow carries the stars instead.

   Two things here are load-bearing, not cosmetic.
   1. The monogram's bottom margin reserves the verdict row on EVERY card, rated or not.
      Without the reserve a rated plate centres its taller stack and the initials ride
      16px higher than the unrated plate beside it, which reads as a wobbling grid.
   2. flex-direction:column puts that margin on the axis justify-content centres. In the
      default row direction the margin is ignored, the initials drop back to where they
      were, and the gold rule lands straight through the stars.
   The stars themselves stay absolute inside the reserved band, so they can never move
   the monogram, and the card's height is unchanged. */
.card-art { flex-direction: column; }
.card-art .mono { margin-bottom: 32px; }
.card-rating { position: absolute; left: 50%; transform: translateX(-50%); bottom: 18px; line-height: 1; z-index: 2; }
.card-stars { font-size: 10px; letter-spacing: 2px; color: var(--gold);
  text-shadow: 0 0 10px rgba(217,192,138,0.45), 0 1px 3px rgba(0,0,0,0.7); }
.card-stars .dim { color: rgba(233,241,236,0.28); }
/* the full-card / detail "Your rating" control wrapper reuses .rate-stars for the buttons */
.strain-rate { margin-top: 4px; }
.detail-rate { margin-top: 10px; }

/* the leaf mark — "find this one again" */
.leaf-svg { width: 12px; height: 12px; stroke: var(--gold); fill: rgba(217,192,138,0.14); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.card-leaf { position: absolute; top: 7px; left: 8px; z-index: 2; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,9,14,0.85); border: 1.5px solid rgba(217,192,138,0.9);
  box-shadow: 0 0 9px rgba(217,192,138,0.5), inset 0 0 3px rgba(217,192,138,0.25); }
/* the leaf inside the badge reads fuller and brighter — the mark was too faint to notice */
.card-leaf .leaf-svg { width: 13px; height: 13px; fill: rgba(217,192,138,0.42); stroke: var(--gold); stroke-width: 1.6; }
.row-leaf { display: flex; align-items: center; margin-right: 6px; }
/* the full card wears it a touch larger, clear of the flip/photo buttons below */
.cf-leaf { top: 10px; left: 12px; width: 28px; height: 28px; }
.cf-leaf .leaf-svg { width: 16px; height: 16px; }
.leaf-toggle .seg-fmt-svg { stroke: currentColor; fill: none; }
.count-leaf-svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.6; vertical-align: -1px; }
.class-count.leaf-count.on { background: rgba(217,192,138,0.14); }

/* the taste report */
.taste-report-btn { width: 100%; margin-top: 12px; }
#tasteBody .cf-sec-label { text-align: left; }


/* your palate, mapped */
.pal-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.pal-label { flex: 0 0 118px; font-size: 11px; color: var(--ink-soft, #b8c4c0); text-align: right; }
.pal-track { flex: 1; height: 7px; border-radius: 4px; background: rgba(110,231,160,0.10); overflow: hidden; }
.pal-fill { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #57d1f5, #6ee7a0);
  transform-origin: left; animation: palGrow 0.5s cubic-bezier(0.22, 0.9, 0.3, 1) backwards; }
@keyframes palGrow { from { transform: scaleX(0); } }
.pal-row { animation: rise 0.3s ease backwards; }
@media (prefers-reduced-motion: reduce) { .pal-fill, .pal-row { animation: none; } }
.pal-val { flex: 0 0 42px; font-size: 11px; color: var(--gold); }
#mapBody .cf-sec-label { text-align: left; }

/* every 500 collector points — the full-screen moment */
.milestone-veil { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 42%, rgba(26,21,10,0.985), rgba(3,4,8,0.995) 70%);
  opacity: 0; transition: opacity 0.55s ease; cursor: pointer; }
.milestone-veil.in { opacity: 1; }
.milestone-inner { text-align: center; transform: scale(0.93) translateY(6px); transition: transform 0.8s cubic-bezier(0.2, 0.9, 0.3, 1); }
.milestone-veil.in .milestone-inner { transform: none; }
.milestone-eyebrow { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--gold); letter-spacing: 0.06em; }
.milestone-num { font-family: var(--serif); font-size: 78px; line-height: 1.1; color: #ecdcb2; margin: 2px 0 12px; text-shadow: 0 0 38px rgba(217,192,138,0.35); }
.milestone-gem { display: inline-block; width: 11px; height: 11px; border: 1.2px solid var(--gold); transform: rotate(45deg); opacity: 0.85; }
.milestone-sub { margin-top: 16px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
@media (prefers-reduced-motion: reduce) { .milestone-veil, .milestone-inner { transition: none; } }

/* staggered cascade when the vault renders — the plates deal themselves in */
@media (prefers-reduced-motion: no-preference) {
  #cardGrid .strain-card { animation: rise 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
    animation-delay: calc(min(var(--i, 0), 9) * 30ms); }
}

.vault-sub { margin-top: 20px; }

/* ---------- surprise me ---------- */
.view-head-row { display: flex; align-items: flex-end; justify-content: space-between; }
.surprise-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-family: var(--sans); font-size: 11px; letter-spacing: 0.06em;
  color: var(--gold); padding: 7px 13px; border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(rgba(8,14,20,0.92), rgba(8,14,20,0.92)) padding-box, var(--border-grad-soft) border-box; }
.surprise-btn svg { width: 15px; height: 15px; stroke: var(--gold); fill: none; stroke-width: 1.6; }
.surprise-btn:active { box-shadow: var(--glow-strong); }
.surprise-btn:disabled { opacity: 0.4; pointer-events: none; }
.surprise-btn.rolling svg { animation: diceRoll 0.5s cubic-bezier(0.3, 0.9, 0.4, 1); }
@keyframes diceRoll { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* feeling view: reveal the full ranked list beyond the top-12 shortlist */
.see-all-btn { display: block; width: fit-content; margin: 16px auto 6px; cursor: pointer;
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold); padding: 10px 22px; border-radius: 999px; border: 1px solid transparent;
  background: linear-gradient(rgba(8,14,20,0.92), rgba(8,14,20,0.92)) padding-box, var(--border-grad-soft) border-box; }
.see-all-btn:active { box-shadow: var(--glow-strong); }

/* ---------- on this day ---------- */
.onthisday { display: block; width: 100%; text-align: left; cursor: pointer; margin-top: 16px; padding: 13px 16px; border-radius: 16px;
  border: 1px solid transparent;
  background: linear-gradient(rgba(9,15,20,0.9), rgba(9,15,20,0.9)) padding-box, linear-gradient(120deg, rgba(217,192,138,0.5), rgba(159,140,255,0.35)) border-box; }
.otd-eyebrow { display: block; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.otd-body { display: block; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.otd-body b { color: var(--ink); font-family: var(--serif); }

/* ---------- home cards: what's-new + backup nudge ---------- */
.home-card { position: relative; margin-top: 16px; padding: 15px 17px; border-radius: 16px;
  border: 1px solid transparent;
  background: linear-gradient(rgba(9,15,20,0.92), rgba(9,15,20,0.92)) padding-box,
             linear-gradient(120deg, rgba(217,192,138,0.5), rgba(159,140,255,0.32)) border-box; }
.home-card .eyebrow { color: var(--gold); }
.home-card-x { position: absolute; top: 8px; right: 10px; background: none; border: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--ink-faint); padding: 4px 6px; }
.home-card-x:active { color: var(--ink); }
.home-card-title { font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--gold);
  margin: 2px 0 8px; padding-right: 22px; }
.home-card-body { font-size: 13px; line-height: 1.55; color: var(--ink-soft); padding-right: 18px; }
.home-card-list { list-style: none; margin: 0; padding: 0; }
.home-card-list li { position: relative; font-size: 13px; line-height: 1.5; color: var(--ink-soft);
  padding: 0 0 0 16px; margin-bottom: 7px; }
.home-card-list li:last-child { margin-bottom: 0; }
.home-card-list li::before { content: "\2022"; position: absolute; left: 2px; top: -1px; color: var(--gold); }
.home-card-ok { display: inline-block; width: auto; margin-top: 14px; padding: 9px 18px; }

/* ---------- special-specimen celebration ---------- */
.special-body { text-align: center;
  background: linear-gradient(rgba(9,15,20,0.97), rgba(6,9,14,0.99)) padding-box,
             linear-gradient(120deg, rgba(217,192,138,0.7), rgba(159,140,255,0.4) 60%, rgba(217,192,138,0.5)) border-box;
  box-shadow: 0 -10px 60px rgba(217,192,138,0.14); }
.special-plate { width: 84px; height: 84px; margin: 14px auto 12px; border-radius: 20px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 0 26px rgba(217,192,138,0.25); }
.special-plate .mono { font-family: var(--serif); font-size: 32px; font-weight: 600; color: rgba(4,5,10,0.82); }
.special-name { font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--gold); margin-bottom: 4px; }
.special-rarity { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 14px; }
.special-lore { font-size: 13px; line-height: 1.65; color: var(--ink-soft); margin-bottom: 14px; text-align: left; }
.special-facts { text-align: left; border-top: 1px solid rgba(217,192,138,0.18); padding-top: 12px; }
.special-facts p { font-size: 12px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 8px; }
.special-facts b { color: var(--gold); font-weight: 600; display: block; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 1px; }

/* ---------- badge story sheet ---------- */
.badge-story { text-align: center; }
.badge-story .goal-mark { font-size: 22px; color: var(--gold); text-shadow: 0 0 12px rgba(217,192,138,0.5); display: block; margin: 8px 0 6px; }
.badge-story-name { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--gold); margin-bottom: 3px; }
.badge-story-goal { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; }
.badge-story-why { font-size: 13px; line-height: 1.65; color: var(--ink-soft); text-align: left; }
.badge-story-stat { font-size: 12px; color: var(--gold-dim); margin-top: 12px; }
.goal.earned { cursor: pointer; }
.goal.earned:active { filter: brightness(1.25); }

/* ---------- plan / paywall ---------- */
.paywall-price { font-family: var(--serif); font-size: 20px; font-weight: 500; color: var(--gold); text-align: center; margin: 12px 0 2px; }
.licence-row { display: flex; gap: 8px; margin-top: 10px; align-items: stretch; }
.licence-row .text-input { flex: 1; margin: 0; text-transform: uppercase; }
.licence-row .btn { width: auto; padding: 12px 18px; }
.plan-status { font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; }
.plan-status b { color: var(--gold); font-family: var(--serif); letter-spacing: 0.04em; }
.plan-meter { display: grid; grid-template-columns: 110px 1fr auto; gap: 9px; align-items: center; margin-bottom: 7px; }
.plan-meter span { font-size: 11px; color: var(--ink-faint); letter-spacing: 0.06em; }
.plan-meter .track { height: 5px; border-radius: 2px; background: rgba(233,241,236,0.08); overflow: hidden; }
.plan-meter .fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--neon-teal), var(--gold)); }
.plan-meter strong { font-size: 12px; color: var(--gold); font-variant-numeric: tabular-nums; }

/* ---------- house ad (free plan) ---------- */
.house-ad { position: relative; margin-top: 16px; padding: 13px 16px; border-radius: 16px; cursor: pointer;
  border: 1px dashed rgba(217,192,138,0.35); background: rgba(217,192,138,0.03); }
.house-ad .ad-tag { position: absolute; top: 9px; right: 12px; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
.house-ad .ad-line { font-size: 13px; line-height: 1.5; color: var(--ink-soft); padding-right: 30px; }
.house-ad .ad-line b { color: var(--gold); font-family: var(--serif); }

/* ---------- rate the app ---------- */
.rate-stars { display: flex; justify-content: center; gap: 10px; margin: 12px 0 4px; }
.rate-stars button { background: none; border: none; cursor: pointer; font-size: 26px; line-height: 1; color: rgba(233,241,236,0.25); padding: 4px; transition: color 0.15s, transform 0.15s; }
.rate-stars button.lit { color: var(--gold); text-shadow: 0 0 12px rgba(217,192,138,0.5); }
.rate-stars button:active { transform: scale(1.2); }

/* ---------- entry star rating ---------- */
.star-row { display: flex; gap: 8px; margin: 4px 0 2px; }
.star-row button { background: none; border: none; cursor: pointer; font-size: 22px; line-height: 1; color: rgba(233,241,236,0.22); padding: 3px; }
.star-row button.lit { color: var(--gold); text-shadow: 0 0 10px rgba(217,192,138,0.45); }
.entry-stars { color: var(--gold); font-size: 12px; letter-spacing: 2px; }
.entry-stars .dim { color: rgba(233,241,236,0.18); }

/* ---------- collector badges ---------- */
.goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.goal { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px; border-radius: 14px; min-width: 0;
  white-space: normal; overflow-wrap: break-word;
  border: 1px solid rgba(233,241,236,0.09); background: rgba(233,241,236,0.02); opacity: 0.6; }
.goal.earned { opacity: 1; border-color: rgba(217,192,138,0.4);
  background: linear-gradient(rgba(232,201,135,0.06), rgba(232,201,135,0.02)); box-shadow: 0 0 14px rgba(217,192,138,0.1); }
.goal-mark { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.goal.earned .goal-mark { color: var(--gold); text-shadow: 0 0 10px rgba(217,192,138,0.5); }
.goal-name { font-family: var(--serif); font-size: 13px; font-weight: 500; color: var(--ink); }
.goal.earned .goal-name { color: var(--gold); }
.goal-desc { font-size: 11px; line-height: 1.4; color: var(--ink-faint); }
.goal-tier { font-family: var(--serif); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
  text-align: center; margin: 18px 0 12px; padding-top: 14px; border-top: 1px solid rgba(217,192,138,0.18); }

/* ---------- vault grouping ---------- */
.card-grid.ungrid { display: block; }
.vault-group-head { display: flex; align-items: center; gap: 9px; margin: 20px 0 4px; font-family: var(--serif);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.vault-group-head:first-child { margin-top: 6px; }
.vault-group-head b { margin-left: auto; font-family: var(--sans); font-size: 11px; color: var(--ink-faint); letter-spacing: 0; }
.vault-group-head .gem-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.vault-group-toggle.on { border-color: var(--neon-teal); color: #c8f5e8; background: rgba(79,227,194,0.08); box-shadow: 0 0 14px rgba(79,227,194,0.2); }

/* ---------- terpene radar ---------- */
.terp-radar { width: 100%; max-width: 240px; height: auto; display: block; margin: 6px auto 2px; overflow: visible; }
.terp-radar .rad-grid { fill: none; stroke: rgba(233,241,236,0.08); stroke-width: 1; }
.terp-radar .rad-axis { stroke: rgba(233,241,236,0.1); stroke-width: 1; }
.terp-radar .rad-shape { fill: rgba(79,227,194,0.16); stroke: var(--neon-teal); stroke-width: 1.6; stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(79,227,194,0.4)); }
.terp-radar .rad-label { fill: var(--ink-soft); font-family: var(--sans); font-size: 10px; font-weight: 600; }
.terp-radar .rad-pct { fill: var(--gold); font-family: var(--sans); font-size: 9px; }

/* ---------- explore: feeling & nose pickers ---------- */
.row-label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(110,231,160,0.6); margin: 12px 0 6px; }
.chip-scroll { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chip-scroll::-webkit-scrollbar { display: none; }
.chip-pick { flex: 0 0 auto; cursor: pointer; font-family: var(--sans); padding: 7px 14px; white-space: nowrap; transition: all 0.15s; }
.chip-pick.on { border-color: var(--gold); color: #f5e3bb; background: rgba(232,201,135,0.10); box-shadow: 0 0 14px rgba(232,201,135,0.18); }
.chip-pick.teal.on { border-color: var(--neon-teal); color: #c8f5e8; background: rgba(79,227,194,0.08); box-shadow: 0 0 14px rgba(79,227,194,0.2); }
.feel-blurb { font-size: 12px; line-height: 1.55; color: var(--ink-soft); margin-top: 12px; }
.feel-line { font-size: 11px; color: var(--neon-teal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rebuy-chip { cursor: pointer; font-family: var(--sans); }
.rebuy-head { width: 100%; background: none; border: none; cursor: pointer; text-align: left; padding: 0; }
.rebuy-head:only-child { margin-bottom: 0; }
.rebuy-count { font-family: var(--sans); font-size: 12px; color: var(--gold); font-weight: 500; }
.rebuy-chevron { width: 9px; height: 9px; border-right: 1.5px solid var(--neon-teal); border-bottom: 1.5px solid var(--neon-teal);
  transform: rotate(45deg); transition: transform 0.2s; margin: 0 4px 6px 0; align-self: center; }
.rebuy-chevron.folded { transform: rotate(-45deg); margin-bottom: 0; }

/* ---------- field guide ---------- */
.guide-card { border-radius: 16px; margin-top: 12px; overflow: hidden;
  border: 1px solid transparent;
  background: linear-gradient(rgba(7,13,18,0.92), rgba(7,13,18,0.92)) padding-box, var(--border-grad-soft) border-box; }
.guide-head { display: flex; align-items: center; gap: 13px; width: 100%; padding: 15px 16px; background: none; border: none; cursor: pointer; text-align: left; }
.guide-num { font-family: var(--serif); font-size: 16px; color: var(--gold-dim); letter-spacing: 0.06em; }
.guide-head h3 { font-family: var(--serif); font-size: 16px; font-weight: 500; color: var(--ink); flex: 1; }
.guide-arrow { font-size: 18px; color: var(--neon-teal); line-height: 1; }
.guide-body { padding: 0 16px 16px; }
.guide-body p { font-size: 13px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 10px; }
.guide-body p:last-child { margin-bottom: 0; }

/* ---------- PIN lock ---------- */
.pin-screen { position: fixed; inset: 0; z-index: 95; overflow-y: auto;
  background:
    radial-gradient(ellipse 90% 45% at 50% 0%, rgba(79,227,194,0.06), transparent 60%),
    radial-gradient(ellipse 80% 50% at 90% 105%, rgba(111,157,255,0.08), transparent 62%),
    #04050a; }
.pin-screen[hidden] { display: none; }
.pin-inner { max-width: 320px; margin: 0 auto; padding: 12vh 24px 40px; text-align: center; }
.pin-inner .crest-img { width: 84px; height: 84px; margin: 0 auto 20px; }
.pin-title { font-family: var(--serif); font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-bottom: 22px; }
.pin-dots { display: flex; gap: 16px; justify-content: center; margin-bottom: 14px; }
.pin-dots span { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(217,192,138,0.5); background: transparent; transition: all 0.15s; }
.pin-dots span.filled { background: var(--gold); box-shadow: 0 0 12px rgba(232,201,135,0.6); }
.pin-dots.shake { animation: pinShake 0.4s ease; }
@keyframes pinShake { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.pin-error { font-size: 12px; color: var(--danger); margin-bottom: 4px; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 68px); gap: 13px; justify-content: center; margin-top: 22px; }
.pin-key { width: 68px; height: 68px; border-radius: 50%; cursor: pointer; font-family: var(--sans); font-size: 22px; color: var(--ink);
  border: 1px solid transparent;
  background: linear-gradient(rgba(8,14,20,0.92), rgba(8,14,20,0.92)) padding-box, var(--border-grad-soft) border-box; }
.pin-key:active { box-shadow: var(--glow-strong); color: #d9ffe9; }
.pin-inner .link-btn { margin-top: 24px; font-size: 12px; }
.pin-inner .link-btn + .link-btn { margin-left: 22px; }

/* ---------- profile ---------- */
.profile-id { text-align: center; padding: 6px 0 2px; }
.profile-code { font-family: var(--serif); font-size: 20px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  background: linear-gradient(95deg, #f2dfae, #e8c987 60%, #d3ecd9); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.profile-since { margin-top: 7px; font-size: 11px; letter-spacing: 0.05em; color: var(--ink-faint); }
.rarest-find { margin-top: 12px; text-align: center; font-size: 12px; color: var(--ink-soft); }
.rarest-find b { color: var(--gold); font-weight: 600; }

/* collector score & honours */
.collection-score { margin-top: 6px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.collection-score b { font-family: var(--serif); font-size: 16px; color: var(--gold); letter-spacing: 0.04em; margin-left: 4px; }
.honours { color: var(--gold) !important; }
.alias-line { text-align: center; font-size: 11px; font-style: italic; color: var(--ink-faint); margin: -2px 0 6px; }
.breeder-line { margin-top: 6px; }
/* A .rel-chip opens another specimen; a plain .chip searches an aroma note. Those
   two behaviours wore one costume across five sections of the strain sheet, so
   specimens now take the archive's gold and its diamond marker and the notes stay
   neutral. Keep this the ONLY .rel-chip rule — it sits below .chip-cyan on purpose. */
.rel-chip { cursor: pointer; font-family: var(--sans); padding-left: 9px;
  border-color: rgba(217,192,138,0.42); color: var(--gold); background: rgba(217,192,138,0.07); }
.rel-chip::before { content: ''; width: 5px; height: 5px; margin-right: 7px; flex: none; transform: rotate(45deg); border-radius: 1px;
  background: rgba(232,201,135,0.85); box-shadow: 0 0 6px rgba(232,201,135,0.55); }
.card-honours { margin-top: 12px; text-align: center; font-size: 11px; letter-spacing: 0.08em; color: var(--gold);
  padding-top: 10px; border-top: 1px solid rgba(217,192,138,0.2); }
.card-honours::before, .card-honours::after { content: '—'; color: rgba(217,192,138,0.45); margin: 0 8px; }

/* compare */
.compare-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--dock-h) + 14px); z-index: 45;
  display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 18px; border-radius: 999px;
  font-family: var(--sans); font-size: 13px; color: var(--ink-soft); white-space: nowrap;
  border: 1px solid transparent;
  background: linear-gradient(#0c1216, #0c1216) padding-box, var(--border-grad) border-box;
  box-shadow: 0 8px 30px rgba(0,0,0,0.55), 0 0 16px rgba(217,192,138,0.12); }
.compare-bar[hidden] { display: none; }
.compare-bar button { background: none; border: none; cursor: pointer; font-family: var(--sans); }
.compare-bar #compareOpenBtn { color: var(--gold); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid rgba(217,192,138,0.4); padding: 0; }
.compare-bar #compareOpenBtn:disabled { color: var(--ink-faint); border-color: transparent; cursor: default; }
.compare-bar #compareClearBtn { color: var(--ink-faint); font-size: 18px; line-height: 1; padding: 0 4px; }

.cmp-head { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }
.cmp-head .cmp-name { text-align: center; }
.cmp-head .cmp-name h3 { font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--gold); }
.cmp-head .cmp-name p { font-family: var(--sans); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 2px; }
.cmp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(233,241,236,0.08); }
.cmp-row-label { grid-column: 1 / -1; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(217,192,138,0.55); font-family: var(--sans); margin-bottom: -4px; padding-top: 10px; border-top: 1px solid rgba(233,241,236,0.08); }
.cmp-row-label + .cmp-row { border-top: none; }
.cmp-cell { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); text-align: center; line-height: 1.6; }
.cmp-cell .shared { color: var(--gold); }
.cmp-cell .match-num { font-family: var(--serif); font-size: 24px; color: var(--gold); font-variant-numeric: tabular-nums; }

/* collection milestones */
.milestones { margin-top: 14px; display: grid; gap: 9px; }
.milestone { display: grid; grid-template-columns: 110px 1fr 52px; align-items: center; gap: 12px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.milestone .track { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.08); overflow: hidden; }
.milestone .fill { height: 100%; background: linear-gradient(90deg, rgba(127,191,174,0.7), rgba(217,192,138,0.85)); }
.milestone strong { color: var(--gold); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; letter-spacing: 0; font-size: 12px; }

.onb-chips { justify-content: center; margin-top: 16px; }
.onb-chips .seg { font-size: 12px; padding: 8px 14px; }

.link-btn { background: none; border: none; cursor: pointer; font-family: var(--sans); font-size: 11px; color: var(--gold); padding: 0; border-bottom: 1px solid rgba(217,192,138,0.4); }

/* insights */
.finding { display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(233,241,236,0.07); }
.finding:last-of-type { border-bottom: none; }
.finding .f-stat { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--gold); text-align: right; font-variant-numeric: tabular-nums; line-height: 1.1; }
.finding.warn .f-stat { color: var(--danger); }
.finding .f-text { font-family: var(--sans); font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
.insight-lock { text-align: center; padding: 10px 6px 6px; }
.insight-lock .lock-dots { display: flex; gap: 10px; justify-content: center; margin-bottom: 12px; }
.insight-lock .lock-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(233,241,236,0.14); }
.insight-lock .lock-dots span.on { background: var(--gold); box-shadow: 0 0 10px rgba(217,192,138,0.6); }
.insight-lock p { font-size: 13px; line-height: 1.6; color: var(--ink-soft); max-width: 300px; margin: 0 auto; }
.insight-lock b { color: var(--gold); }

/* invitation code */
.invite-row { margin-top: 16px; animation: rise 0.25s ease; }
.invite-row .text-input { text-align: center; letter-spacing: 0.14em; text-transform: uppercase; }
.invite-error { font-family: var(--sans); font-size: 12px; color: var(--danger); text-align: center; margin-top: 8px; }

/* aroma decoder */
.decoder-line { font-family: var(--sans); font-size: 12px; font-style: italic; color: #a9d4c5; margin-top: 10px; line-height: 1.5; }
.decoder-line b { color: var(--gold); font-weight: 600; font-style: normal; }
.label-hint { font-size: 9px; letter-spacing: 0.06em; text-transform: none; color: var(--ink-faint); font-weight: 400; margin-left: 6px; }
.entry-flavours { font-family: var(--sans); font-size: 11px; font-style: italic; color: #a9d4c5; margin-bottom: 10px; }
.card-nose { font-family: var(--sans); font-size: 13px; font-style: italic; color: #a9d4c5; text-align: center; margin-top: 6px; }

/* first-launch intro */
.intro-icon { margin-bottom: 16px; }
.intro-icon svg { width: 46px; height: 46px; filter: drop-shadow(0 0 14px rgba(217,192,138,0.35)); }
.intro-title { font-family: var(--serif); font-size: 22px; font-weight: 500; margin-bottom: 10px;
  background: linear-gradient(95deg, #6ee7a0 4%, #d9efe3 50%, #aab6f7 96%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.intro-body { font-size: 13px; line-height: 1.7; color: var(--ink-soft); min-height: 66px; }
.intro-dots { display: flex; gap: 8px; justify-content: center; margin: 18px 0 4px; }
.intro-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(233,241,236,0.18); transition: all 0.2s; }
.intro-dots span.on { background: var(--neon-teal); box-shadow: 0 0 8px rgba(79,227,194,0.7); }

/* generated card art */
.card-art img, .card-full .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-art .card-gem, .card-full .art .gem { z-index: 2; }
.empty-note { font-size: 12px; color: var(--ink-faint); font-style: italic; padding: 8px 2px; line-height: 1.6; }

/* ---------- dock: sliding strip beneath a pinned Vault orb ---------- */
.dock { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 40; width: 100%; max-width: 560px;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(4,6,10,0.4), rgba(3,4,8,0.97) 45%);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(110,231,160,0.14);
  touch-action: pan-x;
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.28s ease; }
/* on-screen keyboard up: position:fixed pins to the layout viewport, so the dock
   drifts/jumps while typing + scrolling. Do what Revolut does — slide it away. */
body.kb-open .dock { transform: translate(-50%, calc(100% + 24px)); opacity: 0; pointer-events: none; }
.dock-strip { position: relative; height: 47px; overflow: clip; } /* clip, NOT hidden: focusing a half-clipped button must never scroll the strip — that drift stranded Home off-screen with no way back */
.dock-item { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.08em; color: var(--ink-faint); padding: 4px 0; }
.dock-item svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dock-item.active { color: #c8f5e0; }
.dock-item.active svg { filter: drop-shadow(0 0 7px rgba(110,231,160,0.8)); }
.dock-strip .dock-item { position: absolute; left: 50%; top: 0; width: 74px; margin-left: -37px;
  transition: transform 0.35s cubic-bezier(0.22, 0.9, 0.3, 1), opacity 0.35s ease; }
.dock-strip .dock-item.edge { opacity: 0.3; }
.dock-item.primary { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 2; }
/* slide-affordance chevrons at the dock's edges */
.dock-arrow { position: absolute; top: 14px; z-index: 3; width: 22px; height: 34px; padding: 0;
  background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  animation: arrowBreathe 2.6s ease-in-out infinite; }
.dock-arrow.left { left: 0; }
.dock-arrow.right { right: 0; }
.dock-arrow svg { width: 15px; height: 15px; stroke: var(--neon-teal); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dock-arrow[hidden] { display: none; }
@keyframes arrowBreathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.85; } }
@media (prefers-reduced-motion: reduce) { .dock-arrow { animation: none; opacity: 0.6; } }
.dock-item.primary .orb { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid transparent;
  background: linear-gradient(rgba(7,14,16,0.96), rgba(7,14,16,0.96)) padding-box, linear-gradient(120deg, rgba(110,231,160,0.9), rgba(87,209,245,0.8)) border-box;
  box-shadow: 0 0 20px rgba(110,231,160,0.3), inset 0 0 12px rgba(79,227,194,0.1); }
.dock-item.primary svg { width: 25px; height: 25px; stroke: var(--neon-green); }
.dock-item.primary.active .orb { box-shadow: 0 0 30px rgba(110,231,160,0.55), inset 0 0 16px rgba(79,227,194,0.2); }

/* ---------- misc ---------- */
.ios-hint { display: none; margin: 14px 18px 0; border-radius: 14px; padding: 12px 14px; font-size: 12px; line-height: 1.55; color: #b9e8da;
  border: 1px solid rgba(79,227,194,0.3); background: rgba(79,227,194,0.06); }
.ios-hint.show { display: flex; gap: 10px; align-items: flex-start; }
.ios-hint button { background: none; border: none; color: var(--neon-teal); font-size: 16px; cursor: pointer; line-height: 1; }

.toast { position: fixed; left: 50%; transform: translateX(-50%) translateY(20px); bottom: calc(var(--dock-h) + 24px); z-index: 70;
  color: #d9ffe9; font-size: 13px; letter-spacing: 0.04em; border-radius: 999px; padding: 10px 20px; opacity: 0; pointer-events: none; transition: all 0.25s;
  border: 1px solid transparent;
  background: linear-gradient(#0c161a, #0c161a) padding-box, linear-gradient(100deg, rgba(110,231,160,0.8), rgba(87,209,245,0.7)) border-box;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 16px rgba(110,231,160,0.2); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.beta-note { text-align: center; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-top: 22px; }

/* glossary inside guide chapters */
.guide-terms { margin-top: 4px; }
.guide-terms dt { font-family: var(--serif); font-size: 14px; font-weight: 600; color: var(--gold); margin-top: 11px; letter-spacing: 0.02em; }
.guide-terms dd { font-size: 12px; line-height: 1.6; color: var(--ink-soft); margin: 1px 0 0; }

/* Stash — what you currently hold. Rows reuse the strain-thumb; a compact qty stepper
   and a buy-again toggle sit on the right. */
.stash-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(217,192,138,0.12); }
.stash-row .strain-thumb { width: 44px; height: 44px; }
.stash-copy { flex: 1; min-width: 0; }
.stash-copy h3 { font-family: var(--serif); font-size: 16px; font-weight: 500; margin: 0; cursor: pointer; }
.stash-copy p { font-size: 11px; color: var(--ink-faint); margin: 2px 0 0; }
.qty-step { display: flex; align-items: center; gap: 2px; }
.qty-step button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(217,192,138,0.3); background: rgba(217,192,138,0.06);
  color: var(--ink); font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.qty-step button:active { background: rgba(217,192,138,0.16); }
.qty-step span { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; font-size: 14px; }
.stash-again { border: 1px solid rgba(217,192,138,0.3); background: none; color: var(--ink-faint); border-radius: 999px;
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.04em; padding: 6px 9px; cursor: pointer; white-space: nowrap; }
.stash-again.on { color: #071016; background: var(--gold); border-color: var(--gold); }

/* detail page: family tree labels */
.detail-section .fam-label { font-size: 11px; letter-spacing: 0.16em; line-height: 1.4; text-transform: uppercase; color: rgba(110,231,160,0.6); margin: 14px 0 6px; }

/* Stash reveal: flick the orb upward — it slides up and the Stash button appears
   where it stood. Collapses on tap-through, downward flick, or a few idle seconds. */
.dock-item.primary { transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.3, 1); }
.dock.stash-open .dock-item.primary { transform: translateX(-50%) translateY(-58px); }
#dockStash { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 1;
  transform: translateX(-50%) scale(0.6); opacity: 0; pointer-events: none; color: var(--neon-teal);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 0.9, 0.3, 1); }
.dock.stash-open #dockStash { opacity: 1; pointer-events: auto; transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) { .dock-item.primary, #dockStash { transition: none; } }

/* day↔night rhythm dial on specimen pages */
.rhythm { margin-top: 12px; }
.rhythm-track { position: relative; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, #d7f56b 0%, #f0d76b 38%, #a98fe0 72%, #4a5fd0 100%); opacity: 0.85; }
.rhythm-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 50%;
  background: #0a0e13; border: 2px solid var(--gold); box-shadow: 0 0 10px rgba(217,192,138,0.7); }
.rhythm-ends { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-top: 5px; }

/* stash: format chip + grams input */

.stash-grams { width: 58px; font-size: 16px; padding: 6px 8px; border-radius: 10px; font-family: var(--sans);
  background: rgba(10,14,19,0.8); border: 1px solid rgba(217,192,138,0.25); color: var(--ink); outline: none; }
.stash-grams::-webkit-outer-spin-button, .stash-grams::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* belt-and-braces: every focusable control ≥16px so iOS never zooms on focus */
input[type="checkbox"], input[type="range"], input[type="file"] { font-size: 16px; }

/* cultivation notes on the card's reverse — a quiet 2×2 plate under the name */
.cf-grow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 9px auto 6px; max-width: 250px; }
.cf-grow div { display: flex; flex-direction: column; gap: 1px; padding: 5px 8px; border-radius: 8px;
  background: rgba(6,10,14,0.5); border: 1px solid rgba(217,192,138,0.18); }
.cf-grow b { font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: 0.01em; }
.cf-grow span { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }

/* Stash rows: identity on top, controls on their own strip beneath. The old
   single flex row collided once formats and grams joined the steppers. */
.stash-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 12px;
  align-items: center; padding: 12px 0; }
.stash-row .strain-thumb { grid-row: span 2; }
.stash-copy h3 { line-height: 1.25; }
.stash-controls { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.stash-controls .qty-step { margin-right: 2px; }

/* Dragging a sheet must own the gesture: a generous invisible grip, no browser
   panning, and no scroll chaining to the page behind. */
.sheet-grab { position: relative; touch-action: none; }
.sheet-grab::before { content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: 200px; height: 40px; }
.sheet-title { touch-action: none; }
.sheet, .sheet-body { overscroll-behavior: contain; }
/* an open sheet freezes the page behind it, exactly as the full card does */
html.sheet-open, body.sheet-open { overflow: hidden; }

/* A panel scrolls up and down and NOTHING else. overflow-y:auto silently computes
   overflow-x from visible to auto, so the body is a two-axis scroller; iOS does not
   lock a diagonal drag to one axis the way Chromium does, so scrolling with any
   sideways lean slides the panel left and right. touch-action states the intent to
   the browser, the overflow pair enforces it (clip where supported, hidden where not
   — the same fallback pair html already uses). pinch-zoom stays allowed. Sliders,
   steppers and the grab bar set their own touch-action and are unaffected. */
.sheet-body { touch-action: pan-y pinch-zoom; overflow-x: hidden; overflow-x: clip; }

/* Swipe-dismiss: the veil dissolves with the panel it belongs to. Without this the
   panel slides (or flies) out while the full-screen scrim stays fully opaque, and the
   whole blurred layer is then torn down in a single frame — which reads as a black
   frame at the end of the gesture. The transition sits on the base class so it is
   already in force when .dismissing flips the opacity; .card-full overrides the
   duration inline to match its flight time. */
.sheet, .card-full { transition: opacity 0.18s ease; }
/* backdrop-filter comes OFF the moment the fade starts. Fading an element that still
   carries a backdrop-filter is the iOS black-flash: the compositor tears the backdrop
   layer down mid-transition and paints the gap black, which is the flash left over
   after the veil fade went in. Without the filter it is a plain translucent colour
   fading out, which iOS handles cleanly. The blur snapping off is hidden by the panel
   already leaving. */
.sheet.dismissing, .card-full.dismissing { opacity: 0; pointer-events: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Stash as vault-style cards: nebula art strip with monogram + name, controls beneath */
.stash-card { margin-bottom: 12px; cursor: default; }
.stash-card:active { transform: none; }
.stash-art { display: flex; align-items: center; gap: 12px; padding: 12px 14px; position: relative;
  background:
    radial-gradient(circle at 28% 24%, color-mix(in srgb, var(--c1, #7fbfae) 26%, transparent) 0%, transparent 62%),
    radial-gradient(circle at 74% 80%, color-mix(in srgb, var(--c2, #9d92d9) 20%, transparent) 0%, transparent 66%),
    #0a0e13; }
.stash-art .mono { font-size: 24px; }
.stash-art .card-gem { top: 10px; right: 12px; }
.stash-card .stash-controls { grid-column: unset; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 14px 12px; margin-top: 0; border-top: 1px solid rgba(217,192,138,0.14); }
.stash-card .stash-copy h3 { font-size: 16px; }

/* card reverse, split into labelled sections */
.cf-back-split { overflow-y: auto; }
.cf-back-inner { padding: 20px 18px calc(20px + 46px); text-align: center; }
.cf-back-inner .cf-back-name { margin-bottom: 4px; }
.cf-sec-label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--neon-teal);
  margin: 12px 0 6px; text-align: left; }
.cf-mini { font-size: 12px; color: var(--ink-soft); text-align: left; margin: 0 0 8px; }
.cf-back-split .cf-grow { max-width: none; margin: 0; }
.cf-photo-box { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px;
  border: 1px solid rgba(217,192,138,0.25); display: block; }
/* archive-plate stand-in shown on the reverse when the photo is on the front and the
   specimen has no portrait art — sized to match .cf-photo-box */
.cf-photo-mono { display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(217,192,138,0.12), rgba(6,9,14,0.45)); }
.cf-photo-mono .mono { font-size: 52px; }
.cf-front-note { text-align: center; opacity: 0.7; margin-top: 6px; }
.cf-photo-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 16px;
  border: 1px dashed rgba(217,192,138,0.35); border-radius: 12px; }
.cf-photo-empty svg { width: 38px; height: 38px; stroke: rgba(217,192,138,0.55); fill: none; stroke-width: 1.3; }
.cf-photo-empty p { font-family: var(--serif); font-size: 14px; letter-spacing: 0.08em; color: var(--ink-soft); margin: 0; }
/* the back scrolls via its inner wrapper, so the flip control stays pinned and tappable */
.cf-back-split { overflow: hidden; }
.cf-back-split .cf-back-inner { overflow-y: auto; height: 100%; overscroll-behavior: contain; }

/* stash cards must not inherit the row grid (the class stays for handler wiring) */
.stash-card.stash-row { display: block; padding: 0; }
.stash-card .stash-art .strain-thumb { display: none; }
/* gate: magic-link status line */
.login-note { margin-top: 10px; font-size: 12px; line-height: 1.55; color: var(--ink-soft); text-align: center; }
.login-note.bad { color: var(--danger); }
/* profile: account panel */
.acct-email { font-family: var(--serif); font-size: 16px; color: var(--gold); word-break: break-all; }
.acct-note { font-size: 12px; line-height: 1.6; color: var(--ink-soft); margin-top: 4px; }

.wn-build { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dim, var(--ink-faint));
  margin: 12px 0 2px; }
.whatsnew-card .wn-build:first-of-type { margin-top: 6px; }

/* in-app confirm — window.confirm() can be silently suppressed in installed PWAs */
.confirm-overlay { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(2,3,6,0.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.confirm-box { width: 100%; max-width: 330px; border-radius: 20px; padding: 20px 18px 16px; background: var(--glass-solid);
  border: 1px solid rgba(217,192,138,0.3); box-shadow: 0 20px 50px rgba(0,0,0,0.55); text-align: center; }
.confirm-title { font-family: var(--serif); font-size: 16px; color: var(--ink); }
.confirm-body { font-size: 13px; line-height: 1.55; color: var(--ink-soft); margin-top: 8px; }
.confirm-box .btn-row { margin-top: 16px; justify-content: center; }
.btn-danger-solid { background: var(--danger); color: #20090c; border: 1.5px solid transparent; }

/* the back's return control lives in the flow — a pinned corner button on a taller-than-
   viewport face was unreachable once the inner scrolled */
.cf-return { display: inline-block; margin: 4px 0 2px; background: none; cursor: pointer;
  border: 1px solid rgba(127,191,174,0.45); color: var(--neon-teal); border-radius: 999px;
  padding: 5px 12px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.08em; }
.cf-photo-wrap { position: relative; }
.cf-photo-wrap .art-photo-btn { top: 10px; right: 44px; }
.cf-photo-wrap .art-photo-remove { top: 10px; right: 8px; }

/* ---------- the collector's plant ---------- */
.plant-body { text-align: center; }
.plant-stage-wrap { display: flex; justify-content: center; margin: 4px 0 0; }
.plant-svg { width: 216px; height: 260px; overflow: visible;
  filter: drop-shadow(0 0 18px rgba(110,231,160,0.14)); }
.plant-sway { transform-origin: 120px 262px; animation: plantSway 7s ease-in-out infinite; }
@keyframes plantSway { 0%, 100% { transform: rotate(-1.3deg); } 50% { transform: rotate(1.5deg); } }
.pl-soil { fill: none; stroke: rgba(217,192,138,0.35); stroke-width: 2; stroke-linecap: round; }
.pl-mound { stroke: rgba(217,192,138,0.22); }
.pl-seed { fill: var(--gold); filter: drop-shadow(0 0 8px rgba(232,201,135,0.5));
  opacity: 0; animation: plPopIn 0.6s cubic-bezier(0.3,1.4,0.5,1) forwards; animation-delay: var(--d, 0s); }
@keyframes plPopIn { to { opacity: 1; } }
.pl-stem { fill: none; stroke: #7fbf9a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 420; stroke-dashoffset: 420;
  animation: plDraw 1.2s cubic-bezier(0.4,0,0.3,1) forwards; animation-delay: var(--d, 0s); }
.pl-thin { stroke-width: 1.6; stroke: rgba(127,191,154,0.7); }
.pl-branch { stroke-width: 1.8; stroke: rgba(127,191,154,0.85); }
.pl-vein { fill: none; stroke: rgba(200,245,224,0.35); stroke-width: 0.7; stroke-linecap: round; }
@keyframes plDraw { to { stroke-dashoffset: 0; } }
.pl-blade { fill: rgba(110,231,160,0.16); stroke: #7fbf9a; stroke-width: 1.4; stroke-linejoin: round; }
.pl-pop { opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: 50% 100%;
  animation: plPop 0.7s cubic-bezier(0.3,1.5,0.4,1) forwards; animation-delay: var(--d, 0s); }
@keyframes plPop { to { opacity: 1; transform: scale(1); } }
.pl-bud ellipse { fill: rgba(217,192,138,0.28); stroke: var(--gold); stroke-width: 1.2; }
.pl-pistil { fill: none; stroke: #f5b46b; stroke-width: 1.1; stroke-linecap: round; }
.plant-stage-name { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--gold); margin-top: 2px; }
.plant-points { font-size: 12px; color: var(--ink-soft); margin: 4px 0 8px; }
.plant-points b { color: var(--neon-teal); font-size: 14px; }
.plant-line { font-size: 13px; line-height: 1.65; color: var(--ink-soft); max-width: 320px; margin: 0 auto; }
.plant-progress { margin: 14px auto 4px; max-width: 300px; }
.plant-progress .track { height: 5px; border-radius: 2px; background: rgba(255,255,255,0.08); overflow: hidden; }
.plant-progress .fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--neon-green), var(--gold));
  box-shadow: 0 0 10px rgba(110,231,160,0.4); transition: width 1.1s cubic-bezier(0.3,0.7,0.3,1); }
.plant-review { text-align: left; margin-top: 16px; padding: 14px 15px; border-radius: 14px;
  border: 1px solid rgba(233,241,236,0.09); background: rgba(255,255,255,0.025); }
.plant-review h4 { font-family: var(--serif); font-size: 16px; font-weight: 500; color: var(--ink); margin: 3px 0 7px; }
.review-prose { font-size: 13px; line-height: 1.7; color: var(--ink-soft); }
.review-empty { font-size: 12px; line-height: 1.65; color: var(--ink-faint); margin-top: 4px; }

/* points pill opens the plant; the collector score line too */
.stat-pill-tap { cursor: pointer; font-family: var(--sans); display: inline-flex; align-items: center; gap: 5px;
  transition: transform 0.15s cubic-bezier(0.3,1.4,0.5,1); }
.stat-pill-tap:active { transform: scale(0.94); }
.pill-leaf { width: 12px; height: 12px; fill: none; stroke: var(--gold); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }
.score-tap { font-size: inherit; }
.score-tap b { color: var(--gold); }

/* "+N" floats up from the dock the moment points land */
.points-fly { position: fixed; left: 50%; bottom: calc(var(--dock-h) + 34px); z-index: 90; pointer-events: none;
  font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--gold);
  text-shadow: 0 0 16px rgba(232,201,135,0.6);
  animation: pointsFly 1.4s cubic-bezier(0.2,0.6,0.3,1) forwards; }
@keyframes pointsFly {
  0% { opacity: 0; transform: translate(-50%, 14px) scale(0.7); }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1.06); }
  100% { opacity: 0; transform: translate(-50%, -78px) scale(1); }
}

/* locked goals show their progress as a slim animated bar */
.goal { position: relative; overflow: hidden; }
.goal-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.05); }
.goal-bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, rgba(127,191,174,0.55), rgba(217,192,138,0.7));
  animation: goalBarIn 0.9s cubic-bezier(0.3,0.7,0.3,1) backwards; }
@keyframes goalBarIn { from { width: 0; } }

/* badge-earned celebration burst */
.badge-burst { position: relative; width: 92px; height: 92px; margin: 10px auto 2px; }
.badge-burst-mark { position: absolute; inset: 0; display: flex !important; align-items: center; justify-content: center;
  font-size: 34px !important; margin: 0 !important;
  animation: burstMark 0.7s cubic-bezier(0.3,1.6,0.4,1) both; animation-delay: 0.15s; }
@keyframes burstMark { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.burst-ring { position: absolute; inset: 0; border: 1.5px solid rgba(217,192,138,0.7); border-radius: 50%;
  animation: burstRing 1.05s cubic-bezier(0.2,0.7,0.3,1) both; }
.burst-ring.r2 { animation-delay: 0.22s; border-color: rgba(127,191,174,0.5); }
@keyframes burstRing { 0% { transform: scale(0.25); opacity: 0; } 35% { opacity: 1; } 100% { transform: scale(1.15); opacity: 0; } }
.burst-spark { position: absolute; left: calc(50% - 1.5px); top: calc(50% - 5px); width: 3px; height: 10px; border-radius: 2px;
  background: var(--gold); opacity: 0;
  animation: burstSpark 0.9s ease-out both; animation-delay: calc(0.2s + var(--sd, 0s)); }
@keyframes burstSpark {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(-16px) scaleY(0.6); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-54px) scaleY(1); }
}

/* onboarding: every step rises in, chips pop, the finale draws itself */
#introStep .intro-icon, #introStep .intro-title, #introStep .intro-body, #introStep .onb-chips {
  animation: introRise 0.55s cubic-bezier(0.2,0.7,0.3,1) both; }
#introStep .intro-title { animation-delay: 0.07s; }
#introStep .intro-body { animation-delay: 0.13s; }
#introStep .onb-chips { animation-delay: 0.2s; }
@keyframes introRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.onb-chips .seg { transition: transform 0.16s cubic-bezier(0.3,1.4,0.5,1), background 0.2s, border-color 0.2s, color 0.2s; }
.onb-chips .seg.on { transform: scale(1.05); }
.intro-finale { position: relative; padding-top: 92px; animation: introRise 0.5s cubic-bezier(0.2,0.7,0.3,1) both; }
.finale-ring { position: absolute; top: 0; left: 50%; width: 78px; height: 78px; margin-left: -39px; border-radius: 50%;
  border: 1.5px solid rgba(217,192,138,0.65);
  animation: finaleRing 1.5s cubic-bezier(0.2,0.7,0.3,1) both; }
@keyframes finaleRing { 0% { transform: scale(0.4); opacity: 0; } 30% { opacity: 1; } 75% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.06); opacity: 0.4; } }
.finale-leaf { position: absolute; top: 16px; left: 50%; width: 46px; height: 46px; margin-left: -23px;
  fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 12px rgba(232,201,135,0.45)); }
.finale-leaf path { stroke-dasharray: 80; stroke-dashoffset: 80; animation: finaleDraw 1s ease forwards 0.25s; }
@keyframes finaleDraw { to { stroke-dashoffset: 0; } }

/* tactile taps: chips and segments give a little under the finger */
.seg:active, .chip:active { transform: scale(0.94); }
.rate-stars button, #fStars button { transition: transform 0.15s cubic-bezier(0.3,1.6,0.5,1); }
.rate-stars button:active, #fStars button:active { transform: scale(1.25); }

/* ---------- swipe glows: gestures answer in the herbarium gradient ---------- */
.dock::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 1;
  background: linear-gradient(100deg, transparent 15%, rgba(79,227,194,0.30) 38%, rgba(110,231,160,0.26) 50%, rgba(87,209,245,0.28) 62%, transparent 85%);
  background-size: 240% 100%; background-repeat: no-repeat; }
.dock.glow-l::after { animation: dockSweepL 0.65s ease-out; }
.dock.glow-r::after { animation: dockSweepR 0.65s ease-out; }
@keyframes dockSweepL { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 0; background-position: -40% 0; } }
@keyframes dockSweepR { 0% { opacity: 1; background-position: -40% 0; } 100% { opacity: 0; background-position: 120% 0; } }
.dock.orb-glow .dock-item.primary .orb { animation: orbPulse 0.9s ease-out; }
@keyframes orbPulse {
  0% { box-shadow: 0 0 0 0 rgba(79,227,194,0.8), 0 0 26px rgba(110,231,160,0.7), inset 0 0 12px rgba(79,227,194,0.3); }
  100% { box-shadow: 0 0 0 32px rgba(79,227,194,0), 0 0 20px rgba(110,231,160,0.3), inset 0 0 12px rgba(79,227,194,0.1); }
}
.dock.stash-open #dockStash svg { filter: drop-shadow(0 0 8px rgba(79,227,194,0.8)); }
/* blur off for the length of the drag — see .dismissing above: a backdrop-filter
   re-sampled every frame behind a promoted, moving subtree is what kills the renderer
   on the archive sheet (the heaviest one). The scrim colour stays, so the panel still
   reads as lifted. */
.sheet.dragging { backdrop-filter: none; -webkit-backdrop-filter: none; }
.dragging .sheet-grab { background: linear-gradient(90deg, var(--neon-teal), var(--neon-green), var(--neon-cyan));
  box-shadow: 0 0 14px rgba(79,227,194,0.55); }
@media (prefers-reduced-motion: reduce) { .dock.glow-l::after, .dock.glow-r::after, .dock.orb-glow .dock-item.primary .orb { animation: none; } }

/* ---------- stash format shelves + per-card format marks ---------- */
.seg-fmt-svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Two-level shelves (s2-62). The stash opens on a list of format shelves and walks
   into one; the pager slides between them and the finger can drag it.
   clip, NOT hidden: `hidden` makes this a scroll container, and a focus landing in
   the off-screen pane would then scroll it — that is the s2-8 dock-drift bug. `clip`
   clips without creating a scroller; the `hidden` line stays as the fallback for
   engines without clip, and `inert` on the incoming pane keeps that case safe too. */
/* Floor the pager so a one-jar shelf holds the same sheet height as every other page.
   Without it the panel collapsed from ~90vh to ~53vh and, being bottom-anchored, the
   whole thing dropped 330px down the screen. Subtracting the sheet's fixed chrome
   (grab bar, title, Close, padding) rather than using a bare vh keeps the SHEET at a
   steady ~88vh on a tall phone and a short one alike. Pages taller than the floor are
   unaffected and still scroll against .sheet-body's 92vh cap. */
.stash-pager { position: relative; overflow-x: hidden; overflow-x: clip; min-height: calc(88vh - 170px); }
/* an empty stash has one short line to say so — no reason to hold it open */
.stash-pager.unfloored { min-height: 0; }
.stash-track { position: relative; }
.stash-track.dragging { will-change: transform; }
.stash-track.settling { transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); }
/* While a move is in flight the pager owns an explicit height, interpolated with the
   drag. The sheet is bottom-anchored, so its height is its top edge: without this a
   move onto a one-jar shelf collapsed the panel in a single frame. Vertical clip for
   the duration only, so the taller outgoing page cannot paint over the Close button. */
.stash-pager.sizing { overflow-y: clip; will-change: height; }
.stash-pager.settling { transition: height 0.3s cubic-bezier(0.32, 0.72, 0, 1); }
/* the pane sliding in sits exactly one page away, so the clipped edge stays crisp
   and the two panes never bleed into each other */
.stash-pane.incoming { position: absolute; top: 0; width: 100%; }
@media (prefers-reduced-motion: reduce) { .stash-track.settling, .stash-pager.settling { transition: none; } }

/* the shelf list — an index of what you hold, in the archive's own voice */
.shelf-list { display: flex; flex-direction: column; }
.shelf-row { display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 2px;
  background: none; border: 0; border-bottom: 1px solid rgba(217,192,138,0.12);
  font-family: var(--sans); color: var(--ink); text-align: left; cursor: pointer;
  transition: background 0.16s, padding-left 0.16s; }
.shelf-row:active { background: rgba(79,227,194,0.09); padding-left: 7px; }
.shelf-gut { flex: none; position: relative; padding-right: 13px; }
.shelf-gut::after { content: ''; position: absolute; right: 0; top: 2px; bottom: 2px; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(217,192,138,0.34) 24%, rgba(217,192,138,0.34) 76%, transparent); }
.shelf-txt { display: flex; flex-direction: column; min-width: 0; }
.shelf-name { font-family: var(--serif); font-size: 16px; letter-spacing: 0.04em; }
.shelf-meta { font-size: 11px; color: var(--ink-faint); margin-top: 3px; font-variant-numeric: tabular-nums; }
.shelf-tail { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.shelf-count { font-family: var(--serif); font-size: 18px; color: var(--gold); font-variant-numeric: tabular-nums; }
.shelf-chev { color: var(--gold-dim); display: flex; }
.shelf-chev svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; display: block; }
.shelf-row.whole { border-bottom-color: rgba(232,201,135,0.3); }
.shelf-row.whole .shelf-name { color: #f5e3bb; }
.shelf-row.bare { opacity: 0.3; cursor: default; }
.shelf-row.bare:active { background: none; padding-left: 2px; }

/* the format mark, at the one size where its silhouette is actually legible */
.stash-mk { display: grid; place-items: center; border-radius: 50%; flex: none; width: 36px; height: 36px;
  border: 1px solid rgba(79,227,194,0.32); color: var(--neon-teal);
  background: radial-gradient(circle at 32% 26%, rgba(79,227,194,0.15), rgba(4,8,12,0.72) 70%); }
.stash-mk.gold { border-color: rgba(232,201,135,0.48); color: var(--gold);
  background: radial-gradient(circle at 32% 26%, rgba(232,201,135,0.17), rgba(4,8,12,0.72) 70%); }
.stash-mk-svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; display: block; }

/* inside a shelf */
.shelf-back { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; cursor: pointer;
  color: var(--gold-dim); font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 600; padding: 0 0 12px; }
.shelf-back svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; display: block; }
.shelf-head { display: flex; align-items: center; gap: 13px; padding-bottom: 13px; margin-bottom: 15px;
  border-bottom: 1px solid rgba(217,192,138,0.14); }
.shelf-head-t { font-family: var(--serif); font-size: 16px; letter-spacing: 0.18em; text-transform: uppercase; }
.shelf-head-m { font-size: 11px; color: var(--ink-faint); margin-top: 4px; font-variant-numeric: tabular-nums; }
.shelf-group { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; }
.shelf-group:first-of-type { margin-top: 4px; }
.shelf-group-t { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(110,231,160,0.6); }
.shelf-group-r { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(217,192,138,0.26), transparent); }

/* The format lives in the pill that was already there, not in a corner glyph — the
   card's rail belongs to the rarity gem alone (s2-62). */
.fmt-pill { display: inline-flex; align-items: center; gap: 6px; padding-left: 9px; }
.pill-fmt-svg { width: 14px; height: 14px; fill: none; stroke: var(--neon-teal); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- collections: shelves to complete ---------- */
.set-row { display: block; width: 100%; text-align: left; cursor: pointer; margin-bottom: 9px; padding: 12px 13px; border-radius: 14px;
  border: 1px solid rgba(233,241,236,0.09); background: rgba(255,255,255,0.02); font-family: var(--sans); color: var(--ink);
  transition: transform 0.15s cubic-bezier(0.3,1.4,0.5,1), border-color 0.2s; }
.set-row:active { transform: scale(0.98); }
.set-row.done { border-color: rgba(217,192,138,0.45);
  background: linear-gradient(rgba(217,192,138,0.05), rgba(217,192,138,0.02));
  box-shadow: 0 0 14px rgba(217,192,138,0.08); }
.set-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.set-name { font-family: var(--serif); font-size: 14px; font-weight: 500; color: var(--ink); }
.set-row.done .set-name { color: var(--gold); }
.set-count { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; flex: none; }
.set-row.done .set-count { color: var(--gold); text-shadow: 0 0 8px rgba(217,192,138,0.4); }
.set-bar { display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.06); margin: 8px 0 6px; overflow: hidden; }
.set-bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: 2px;
  background: linear-gradient(90deg, rgba(127,191,174,0.6), rgba(217,192,138,0.75));
  animation: goalBarIn 0.9s cubic-bezier(0.3,0.7,0.3,1) backwards; }
.set-row.done .set-bar i { background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }
.set-blurb { display: block; font-size: 11px; line-height: 1.5; color: var(--ink-faint); }

/* one set opened: members held in gold, missing dimmed and tappable */
.set-members { margin-top: 12px; text-align: left; }
.set-member { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 4px; cursor: pointer;
  background: none; border: none; border-bottom: 1px solid rgba(233,241,236,0.07); font-family: var(--sans); color: var(--ink-faint); }
.set-member:last-child { border-bottom: none; }
.sm-mark { flex: none; width: 18px; font-size: 13px; }
.set-member.have { color: var(--ink); }
.set-member.have .sm-mark { color: var(--gold); text-shadow: 0 0 8px rgba(217,192,138,0.5); }
.sm-name { flex: 1; min-width: 0; text-align: left; font-family: var(--serif); font-size: 14px; font-weight: 500; }
.sm-meta { flex: none; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }

/* collector rank lines */
.collector-rank { font-family: var(--serif); font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); margin: 2px 0 1px; text-shadow: 0 0 12px rgba(217,192,138,0.3); }
.plant-rank { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(127,191,174,0.9); margin: 1px 0 2px; }

/* the nearest-goal nudge on Home */
.next-goal { display: flex; width: 100%; align-items: center; gap: 12px; margin-top: 14px; padding: 13px 15px; border-radius: 14px;
  cursor: pointer; text-align: left; font-family: var(--sans); color: var(--ink);
  border: 1px solid transparent;
  background: linear-gradient(rgba(8,14,20,0.92), rgba(8,14,20,0.92)) padding-box, var(--border-grad-soft) border-box;
  flex-wrap: wrap; }
.ng-eyebrow { flex: none; width: 100%; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(127,191,174,0.85); }
.ng-line { flex: 1; min-width: 0; font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
.ng-line b { color: var(--gold); font-family: var(--serif); font-weight: 500; }
.ng-desc { color: var(--ink-faint); }
.ng-arrow { flex: none; color: var(--neon-teal); font-size: 16px; }

/* collecting anniversary — a gold day */
.onthisday.anniversary { border-color: rgba(217,192,138,0.5); box-shadow: 0 0 18px rgba(217,192,138,0.1); }
.onthisday.anniversary .otd-eyebrow { color: var(--gold); }

/* detail-sheet stash format picker */
.stash-fmt-picker { margin-top: 10px; }
.stash-fmt-picker .seg { display: inline-flex; align-items: center; gap: 5px; }

/* The front's floating controls ghosted through onto the card's reverse: backdrop-filter
   promotes them to their own compositing layer, which ignores the parent's
   backface-visibility. Hide their backfaces explicitly, and take them fully out of
   play once the card is flipped. */
.cf-front .art-flip-btn, .cf-front .art-photo-btn, .cf-front .art-photo-remove {
  backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cf-card.flipped .cf-front .art-flip-btn, .cf-card.flipped .cf-front .art-photo-btn, .cf-card.flipped .cf-front .art-photo-remove {
  opacity: 0; pointer-events: none; }

/* swipe the full card away, left or right — it glows teal as it goes */
.card-full-inner.swiping { box-shadow: 0 0 34px rgba(79,227,194,0.4), 0 0 90px rgba(110,231,160,0.18); }