/* CapsaMark dev package. Tokens only, no hardcoded hex in rules. */
:root{
  --cream:#FFF6E5; --parchment:#F3EAD3; --oak:#6B4A2F; --ink:#1E1E24;
  --ink-soft:#5A5A52; --accent:#B4532A; --accent-deep:#7A2E1A;
  --card:#FFFFFF; --line:#E5DCC8; --line-strong:#D8CDB2;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Round 7 (2026-11-06): black-walnut grain under the page, like a cutting
   board. The tile is pre-blended 18% walnut over cream, so the page still
   reads as cream; cards stay solid, so no grain sits behind text. */
body{margin:0;background-color:var(--cream);background-image:url(../wood-grain.jpg);
  background-size:256px 256px;color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.55;overflow-x:clip}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;line-height:1.2;margin:0 0 .5rem}
h1{font-size:2rem} h2{font-size:1.5rem} h3{font-size:1.15rem}
p{margin:0 0 .75rem}
a{color:var(--accent-deep)}
a:hover{color:var(--accent)}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.muted{color:var(--ink-soft)}
.small{font-size:.85rem}
/* header */
.site-head{position:relative;background:var(--cream);border-bottom:1px solid var(--oak);padding:14px 0 0}
.journal-link{position:absolute;top:14px;right:64px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;text-decoration:none;color:var(--ink);font-size:.9rem;height:44px;border:1px solid var(--line-strong);background:var(--card)}
.journal-link img{width:16px;height:16px;object-fit:cover;border-radius:4px}
.journal-link:hover{border-color:var(--accent);color:var(--accent)}
.journal-link[aria-current="page"]{background:var(--accent);color:var(--cream)}
.menu-btn{position:absolute;top:14px;right:16px;width:44px;height:44px;border-radius:999px;border:1px solid var(--line-strong);background:var(--card);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0}
.menu-btn span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px}
.menu-btn[aria-expanded="true"]{background:var(--accent)}
.menu-btn[aria-expanded="true"] span{background:var(--cream)}
.wordmark{font-family:Georgia,serif;font-size:1.7rem;font-weight:700;color:var(--ink);
  text-decoration:none;letter-spacing:.01em}
.wordmark span{color:var(--accent)}
.tagline{color:var(--ink-soft);font-size:.9rem;margin:2px 0 10px}
.main-nav{display:none;position:absolute;top:64px;right:16px;z-index:90;background:var(--card);border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 8px 24px rgba(30,30,36,.18);padding:6px;min-width:230px;max-width:calc(100vw - 32px)}
.main-nav.open{display:block}
.main-nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--ink);font-size:1rem;min-height:44px}
.main-nav a img{width:22px;height:22px;object-fit:cover;border-radius:4px;flex:none}
.main-nav a:hover{background:var(--cream)}
.main-nav a[aria-current="page"]{background:var(--accent);color:var(--cream)}
/* hero */
.hero{padding:28px 0 8px}
.hero h1{font-size:2.2rem;margin-bottom:.4rem}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 6px}
.pill{background:var(--card);border:1px solid var(--line-strong);border-radius:999px;
  padding:10px 18px;display:flex;flex-direction:column;line-height:1.15;min-width:120px}
.pill b{font-family:Georgia,serif;font-size:1.5rem;color:var(--accent)}
.pill span{font-size:.8rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
.pill{text-decoration:none;color:inherit}
.pill:hover{border-color:var(--accent)}
.pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#maker-grid{scroll-margin-top:96px}
#places{scroll-margin-top:96px}
/* sticky search */
/* Round 14 (2026-11-06): the search row is ONE pill — magnifier inside
   the bubble at the left, sort control inside at the right — spanning the
   full content width to the left edge, floating on the page background.
   The old sticky cream slab + bottom border read as an awkward rectangle
   under the pills, so the bar carries no background and no border now;
   the pill's own border + shadow is the shape. Input stays 16px so iOS
   never auto-zooms into the field. */
.searchbar{position:sticky;top:0;z-index:40;background:transparent;
  padding:10px 0 8px;border-bottom:0}
.searchrow{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;
  background:var(--card);border:1px solid var(--line-strong);border-radius:999px;
  padding:0 10px 0 14px;min-height:48px;box-shadow:0 2px 10px rgba(30,30,36,.10)}
.searchrow:focus-within{border-color:var(--terra);
  box-shadow:0 2px 10px rgba(30,30,36,.10),0 0 0 2px rgba(180,83,42,.25)}
.searchrow .sicon{width:22px;height:22px;object-fit:cover;border-radius:4px;flex:none}
.searchrow .search-btn,.searchrow .scan-btn{background:transparent;border:0;padding:4px;cursor:pointer;flex:none;width:auto;display:flex;align-items:center;justify-content:center}
.searchrow .scanicon{width:28px;height:28px;display:block;flex:none}
.searchrow.typing .scan-btn{display:none}
.searchrow input{flex:1;font-size:16px;padding:12px 0;border:0;border-radius:0;
  background:transparent;color:var(--ink);min-height:44px;min-width:0}
.searchrow input:focus{outline:none}
.searchrow select{font-size:16px;padding:10px 4px 10px 10px;border:0;
  border-left:1px solid var(--line-strong);border-radius:0;background:transparent;
  color:var(--ink);min-height:44px;flex:none}
.results{position:relative}
.results-list{position:absolute;left:0;right:0;top:6px;background:var(--card);
  border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 8px 24px rgba(30,30,36,.18);
  max-height:70vh;overflow:auto;display:none}
.results-list.open{display:block}
.res-group{padding:8px 14px 4px;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-soft);border-top:1px solid var(--line)}
.res-group:first-child{border-top:0}
.res-item{display:block;padding:9px 14px;text-decoration:none;color:var(--ink);border-top:1px solid var(--line)}
.res-item:hover{background:var(--parchment)}
.res-item .rn{font-weight:700}
.res-item .rm{color:var(--ink-soft);font-size:.88rem}
.badge{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:middle}
.badge.retired{background:var(--parchment);color:var(--oak);border:1px solid var(--oak)}
.badge.safety{background:var(--accent);color:var(--cream)}
.badge.selling{background:var(--cream);color:var(--accent-deep);border:1px solid var(--accent)}
/* Safety-history info button (Joseph 2026-11-07): small, quiet, on the
   card and maker page. Reveals the past safety note; the click is
   logged via data-track. The button is the transparent PNG derivative
   (25_Info.png, cream keyed out round 25) of the locked 25_Info.jpg icon
   (Gemini, circled "i", icon 25) - an image button, no CSS circle, so
   the icon's own circle is the only outline. The [hidden] rule is
   required - a plain display rule on the element would override the
   hidden attribute (round 23). */
.info-btn{background:transparent;border:0;width:28px;height:28px;padding:0;margin-left:6px;vertical-align:middle;cursor:pointer}
.info-btn img{width:28px;height:28px;display:block}
.info-btn:hover{opacity:.75}
/* Maker page (Joseph 2026-11-07 round 25): the info button sits at the
   far right of the maker title, vertically centred, not next to the name. */
.maker-name{position:relative;padding-right:64px}
.maker-name .info-btn{position:absolute;right:0;top:50%;transform:translateY(-50%);margin-left:0;width:56px;height:56px}
.maker-name .info-btn img{width:56px;height:56px}
.chips .info-btn{margin-left:0}
.safety-note{background:#FFF8EC;border:1px solid var(--line-strong);border-radius:8px;padding:8px 10px;margin-top:8px;font-size:.88rem}
.safety-note[hidden]{display:none}
.safety-note p{margin:4px 0}
/* board */
.board-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;margin:18px 0 10px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--line-strong);border-radius:12px;
  overflow:hidden}
.card>a{display:block;padding:14px 16px;text-decoration:none;color:var(--ink)}
.card>a:hover{border-color:var(--accent)}
.card>a:hover h3{color:var(--accent)}
/* board + graveyard cards: thumb beside the text (round 6). Everything —
   name, origin, sauce count, chips — sits in the text column beside the
   ~88px thumb, so a card is little taller than the thumb itself. On a
   no-photo card the thumb itself is the 'Submit a photo' link; there is
   no separate submit line. .card>a above is the festival cards. */
.card-row{display:flex;gap:12px;align-items:flex-start;padding:12px 16px}
.card-text{flex:1;min-width:0}
.card-main{display:block;text-decoration:none;color:var(--ink)}
.card-main:hover h3{color:var(--accent)}
.card-main:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card-text .chips{padding:0;margin-top:6px}
.card-text .photo-cta{padding:0;margin-top:6px}
.card h3{margin-bottom:2px}
.card .origin{color:var(--ink-soft);font-size:.9rem;margin-bottom:6px}
.card .count{color:var(--ink-soft);font-size:.88rem;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{font-size:.78rem;border:1px solid var(--line-strong);border-radius:999px;padding:2px 9px;color:var(--ink-soft)}
.card{scroll-margin-top:96px}
a.chip{text-decoration:none;color:var(--accent-deep)}
a.chip:hover{border-color:var(--accent);color:var(--accent)}
a.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* photo thumbnails — round 6 (2026-11-06; no-photo cell reworked
   2026-11-06): the thumbnail sits BESIDE the card text, ~88px, as tall
   as several rows of text; a tap opens the lightbox with the full
   photo. The no-photo state is the same compact cell (small flame +
   text): on board cards it is a link to the photo form ('Submit a
   photo'), and the separate submit line is gone, so the card is one
   line shorter. Photos are shown with object-fit: contain — the whole
   bottle visible, never cropped. */
.photo-thumb{flex:none;width:88px;height:88px;padding:0;border:1px solid var(--line);
  border-radius:8px;background:var(--cream);cursor:zoom-in;overflow:hidden;
  appearance:none;-webkit-appearance:none}
.photo-thumb img{width:88px;height:88px;object-fit:contain;display:block}
.photo-thumb.no-photo{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;cursor:default}
.photo-thumb .no-photo-icon{width:32px;height:32px;object-fit:cover;border-radius:6px}
.no-photo-text{color:var(--ink-soft);font-size:.72rem;line-height:1.2;text-align:center;padding:0 4px}
a.photo-thumb{text-decoration:none}
a.photo-thumb.no-photo{cursor:pointer}
a.photo-thumb.no-photo .no-photo-text{color:var(--accent-deep)}
.photo-cta{display:block;padding:0 16px 12px;font-size:.85rem;color:var(--accent-deep);text-decoration:none}
.photo-cta:hover{color:var(--accent)}
/* lightbox — opened from a card thumbnail; full 400/800px photo */
.lightbox{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(30,30,36,.85)}
.lightbox.open{display:flex}
.lightbox figure{margin:0;max-width:min(92vw,800px);text-align:center}
.lightbox img{max-width:100%;max-height:78vh;width:auto;height:auto;background:var(--cream);border-radius:12px}
.lightbox figcaption{color:var(--cream);font-size:.9rem;margin-top:10px}
.lightbox .lb-close{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:999px;
  border:1px solid var(--cream);background:transparent;color:var(--cream);font-size:1.4rem;line-height:1;cursor:pointer}
/* maker page hero + sauce thumbnails */
.maker-hero{background:var(--cream);border:1px solid var(--line-strong);border-radius:12px;
  display:flex;align-items:center;justify-content:center;min-height:220px;margin:14px 0 6px;overflow:hidden}
.maker-hero img{max-height:320px;width:100%;object-fit:contain}
.maker-hero.no-photo{flex-direction:column;gap:6px}
.maker-hero .no-photo-icon{width:72px;height:72px;object-fit:cover;border-radius:10px}
a.maker-hero{text-decoration:none}
a.maker-hero.no-photo{cursor:pointer}
a.maker-hero.no-photo .no-photo-text{color:var(--accent-deep);font-size:1rem}
.photo-credit{color:var(--ink-soft);margin:0 0 12px}
.sauce-list li{display:flex;gap:12px;align-items:flex-start}
.sauce-thumb{width:64px;height:64px;object-fit:contain;background:var(--cream);
  border:1px solid var(--line);border-radius:8px;flex:none}
.sauce-thumb.no-photo{object-fit:cover;padding:10px}
a.sauce-thumb-link{display:block;text-decoration:none}
.sauce-body{flex:1;min-width:0}
/* alphabet rail */
.rail{position:fixed;right:2px;top:50%;transform:translateY(-50%);width:24px;
  height:415px;z-index:50;display:none;flex-direction:column;align-items:center;
  justify-content:space-between;padding:4px 0;touch-action:none;user-select:none}
.rail.on{display:flex}
.rail button{background:none;border:0;padding:0;width:24px;height:15px;line-height:15px;
  font-size:11px;color:var(--ink-soft);opacity:.45;cursor:pointer}
.rail button.active{color:var(--accent);opacity:1;font-weight:700}
.rail.live button{opacity:1;color:var(--accent)}
.rail-bubble{position:fixed;z-index:51;width:64px;height:96px;pointer-events:none;display:none}
.rail-bubble.show{display:block}
.rail-bubble svg .bottle-fill{fill:var(--accent)}
.rail-bubble svg text{fill:var(--cream)}
.totop{position:fixed;right:2px;top:calc(50% + 222px);z-index:50;width:40px;height:40px;
  border-radius:999px;border:1px solid var(--line-strong);background:var(--card);
  color:var(--ink-soft);font-size:20px;line-height:1;cursor:pointer;opacity:0;
  pointer-events:none;transition:opacity .2s;display:flex;align-items:center;justify-content:center}
.totop.show{opacity:.75;pointer-events:auto}
.totop.show:hover{opacity:1;color:var(--accent);border-color:var(--accent)}
/* sections */
.section{padding:28px 0}
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:18px 0}
.trust-step{background:var(--card);border:1px solid var(--line-strong);border-radius:12px;padding:16px}
.trust-step .num{font-family:Georgia,serif;font-size:1.3rem;color:var(--accent);font-weight:700}
.promise{background:var(--parchment);border:1px solid var(--oak);border-radius:12px;padding:18px;margin:10px 0}
.submit-panel{background:var(--card);border:1px solid var(--accent);border-radius:12px;padding:20px;margin:10px 0}
.btn{display:inline-block;background:var(--accent);color:var(--cream);text-decoration:none;
  border:0;border-radius:999px;padding:12px 22px;font-size:1rem;min-height:44px;cursor:pointer}
.btn:hover{background:var(--accent-deep);color:var(--cream)}
.btn.ghost{background:var(--card);color:var(--accent-deep);border:1px solid var(--accent)}
.btn.ghost:hover{background:var(--parchment)}
.account-card{background:var(--card);border:1px solid var(--line-strong);border-radius:12px;padding:16px;margin:0 0 16px}
.account-card p:last-child{margin-bottom:0}
.account-card[hidden]{display:none}
.code-modal{position:fixed;inset:0;background:rgba(30,30,36,.55);display:flex;align-items:center;justify-content:center;z-index:60;padding:16px}
.code-modal[hidden]{display:none}
.code-modal-card{position:relative;background:var(--card);border:1px solid var(--line-strong);border-radius:16px;padding:22px 20px;max-width:380px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.code-modal-card h3{margin:0 0 6px;font-size:1.25rem}
.code-modal-close{position:absolute;top:6px;right:12px;background:none;border:0;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--ink-soft);padding:6px}
#j-code-boxes{display:flex;gap:7px;justify-content:space-between;margin:16px 0 8px}
#j-code-boxes input{width:36px;height:52px;text-align:center;font-size:1.4rem;font-weight:700;padding:0;border:1px solid var(--line-strong);border-radius:10px;background:var(--card);color:var(--ink);margin:0}
.code-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.code-keypad button{background:var(--card);border:1px solid var(--line-strong);border-radius:10px;min-height:52px;font-size:1.25rem;font-weight:700;color:var(--ink);cursor:pointer;padding:0}
.code-keypad button:active{background:var(--parchment)}
#j-code-boxes input:focus{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:1px}
.code-actions{display:flex;gap:10px;margin-top:14px}
.code-actions .btn{flex:1}
.code-success{text-align:center;padding:20px 0 8px}
.code-success svg{width:76px;height:76px}
.check-circle{stroke-dasharray:176;stroke-dashoffset:176;animation:check-draw .5s ease forwards}
.check-mark{stroke-dasharray:48;stroke-dashoffset:48;animation:check-draw .35s .45s ease forwards}
@keyframes check-draw{to{stroke-dashoffset:0}}
.profile-avatar{width:40px;height:40px;border-radius:50%;vertical-align:middle;margin-right:8px;object-fit:cover}
.account-compact{padding:12px 16px}
.account-compact p{margin:0 0 10px}
.display-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.display-row label{margin:0;white-space:nowrap}
#j-display-name{flex:1 1 140px;min-width:0;margin:0}
.display-row .btn{min-height:36px;padding:8px 14px}
#j-perks-details{margin-top:2px}
#j-perks-details summary{cursor:pointer;font-weight:700}
#j-perks-details .hint{margin:6px 0 0}
#j-perks-details .perk{display:block;margin:8px 0 0}
#j-migrate-note[hidden]{display:none}
/* maker page */
.facts{background:var(--card);border:1px solid var(--line-strong);border-radius:12px;
  padding:16px 18px;margin:14px 0}
.facts dt{font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.facts dd{margin:0 0 10px}
.sauce-list{list-style:none;padding:0;margin:0}
.sauce-list li{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;margin-bottom:8px}
.sauce-list .sname{font-weight:700}
.sauce-list .smeta{color:var(--ink-soft);font-size:.88rem}
.notice{border:1px solid var(--accent);border-radius:12px;padding:16px 18px;margin:14px 0;background:var(--card)}
.notice.safety{background:#FDF3EE;border-color:var(--accent)}
.notice h2{color:var(--accent-deep)}
.srclist{list-style:none;padding:0}
.srclist li{margin-bottom:6px}
/* heat board bars */
.bar-row{display:grid;grid-template-columns:170px 1fr 44px;gap:10px;align-items:center;margin-bottom:8px}
.bar-track{background:var(--parchment);border-radius:999px;height:18px;overflow:hidden}
.bar-fill{background:var(--accent);height:100%;border-radius:999px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0}
.tile{background:var(--card);border:1px solid var(--line-strong);border-radius:12px;padding:14px}
.tile b{font-family:Georgia,serif;font-size:1.6rem;color:var(--accent);display:block}
.tile span{font-size:.85rem;color:var(--ink-soft)}
/* segmented proportional bars (heat board) — one accent, tints via color-mix, neutrals for the rest; tile top borders match bar segments */
.seg-bar{display:flex;height:18px;border-radius:999px;overflow:hidden;background:var(--parchment);margin:10px 0 4px}
.seg-bar>div{height:100%}
.tile.sw-a{border-top:4px solid var(--accent)}
.tile.sw-b{border-top:4px solid color-mix(in srgb, var(--accent) 50%, var(--card))}
.tile.sw-c{border-top:4px solid var(--ink-soft)}
.tile.sw-d{border-top:4px solid var(--line-strong)}
/* round 15 (2026-11-06): Benchmarks places tiers + linked stat tiles.
   Stat tiles are links to the data they represent (fact-checkable), so
   they read as controls: no underline by default, accent border + number
   underline on hover. Place rows are links to the board filtered by that
   place; the name underlines on hover. Tiers are native <details> so the
   collapse works with no JS; the sort control + expand/collapse need the
   small inline BENCHMARKS_JS. */
a.tile{text-decoration:none;color:inherit;display:block}
a.tile:hover{border-color:var(--accent)}
a.tile:hover b{text-decoration:underline}
.place-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0 16px}
.place-tools label{font-weight:700;font-size:.92rem}
.place-tools select{font-size:16px;padding:8px 10px;border:1px solid var(--line-strong);
  border-radius:999px;background:var(--card);color:var(--ink)}
.place-tools button{border:1px solid var(--line-strong);background:var(--card);
  border-radius:999px;padding:8px 14px;min-height:40px;cursor:pointer;font:inherit;color:var(--ink)}
.tier{margin-bottom:10px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);padding:6px 12px}
.tier>summary{cursor:pointer;font-weight:700;padding:8px 2px;min-height:44px;
  display:flex;align-items:center;gap:8px}
.tier>summary .tcount{font-weight:400;color:var(--ink-soft);font-size:.9rem}
.tier .place-rows{padding:6px 0 8px}
.tier .tier{margin:8px 0 4px;background:var(--cream)}
a.place-row{text-decoration:none;color:inherit}
a.place-row:hover span:first-child{text-decoration:underline}
/* round 15 (2026-11-06): board place filter banner — shown when the board
   is opened with ?place= (from a Benchmarks place link). Pill-shaped,
   matching the site's pill aesthetic; the Clear button drops the filter
   without a reload. */
.place-filter{margin:14px 0 0;padding:10px 16px;background:var(--card);
  border:1px solid var(--line-strong);border-radius:999px;font-size:.92rem}
.place-filter button{margin-left:8px;border:1px solid var(--line-strong);
  background:var(--cream);border-radius:999px;padding:6px 12px;min-height:36px;
  cursor:pointer;font:inherit;color:var(--ink)}
/* forms */
form label{display:block;font-weight:700;margin:12px 0 4px}
form input[type=text],form input[type=email],form input[type=date],form textarea,form select{
  width:100%;font-size:16px;padding:11px 12px;border:1px solid var(--line-strong);
  border-radius:10px;background:var(--card);color:var(--ink);margin:0 0 12px}
form textarea{min-height:110px}
form .hint{font-weight:400;color:var(--ink-soft);font-size:.88rem}
form .check{display:flex;gap:10px;align-items:flex-start;font-weight:400;margin:12px 0}
form .check input{width:auto;margin-top:4px;flex:none;accent-color:var(--accent)}
.submit-row{margin:26px 0 10px}
/* round 16 (2026-11-06): photo form — required asterisks, styled file
   picker, multi-photo previews, greyed-but-clickable submit. Tokens only. */
form .req{color:var(--accent-deep);font-weight:700}
.file-pick{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 0}
.file-btn{position:relative;overflow:hidden}
.file-btn input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;border:0}
.file-btn:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.photo-previews{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:10px}
.photo-preview-item{position:relative;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px}
.photo-preview-item img{width:100%;height:auto;max-height:520px;object-fit:contain;display:block;border-radius:6px;background:var(--cream);cursor:zoom-in}
.photo-preview-item video{width:100%;height:auto;max-height:520px;object-fit:contain;display:block;border-radius:6px;background:var(--cream)}
.photo-preview-item figcaption{margin-top:6px}
.photo-preview-item .pv-name{display:block;font-size:.85rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.photo-preview-item .pv-size{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:2px}
/* Photo lightbox (round 22, Joseph 2026-11-06): tap a preview to see the
   photo full-size, so the bottle label is readable on a phone. */
.photo-lightbox{position:fixed;inset:0;background:rgba(20,12,8,.92);display:flex;align-items:center;justify-content:center;z-index:200;padding:16px}
.photo-lightbox[hidden]{display:none}
.photo-lightbox img{display:block;width:auto;height:auto;max-width:calc(100vw - 32px);max-height:calc(100vh - 120px);object-fit:contain;border-radius:8px}
.photo-lightbox .lb-close{position:absolute;top:14px;right:14px;background:var(--card);border:1px solid var(--line);border-radius:999px;width:40px;height:40px;font-size:1.2rem;line-height:1;cursor:pointer;color:var(--ink)}
.photo-lightbox .lb-hint{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:#fff;font-size:.85rem;margin:0}
/* Sauce-name suggestions on the photo form (round 20, Joseph 2026-11-06):
   a small pick-list under the Sauce field, fed by the maker's own sauces. */
.sauce-suggest{margin-top:6px;border:1px solid var(--line);border-radius:8px;background:var(--card);overflow:hidden}
.sauce-suggest .suggest-item{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:8px 10px;font:inherit;color:var(--ink);cursor:pointer}
.sauce-suggest .suggest-item:last-child{border-bottom:0}
.sauce-suggest .suggest-item:hover{background:var(--cream)}

/* Journal scan button + viewfinder (round 29, Joseph 2026-11-07) */
#j-scan{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;font-size:1.05rem}
#j-scan img{width:22px;height:22px;border-radius:4px}
.scan-overlay{position:fixed;inset:0;background:rgba(20,12,8,.92);display:flex;align-items:center;justify-content:center;z-index:200;padding:16px}
.scan-overlay[hidden]{display:none}
.scan-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.scan-result .scan-actions{flex-wrap:nowrap;align-items:center;gap:8px}
.scan-result .scan-actions .btn{flex:1 1 auto;min-width:0;padding:12px 14px;white-space:nowrap}
.scan-retry{flex:0 0 auto;width:44px;height:44px;padding:0;border-radius:999px;background:var(--card);border:1px solid var(--accent);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.scan-retry:hover{background:var(--parchment)}
.scan-retry img{width:28px;height:28px;display:block}
.field-scan-row{display:flex;gap:8px;align-items:center}
.field-scan-row input{flex:1 1 0;width:0;min-width:0}
.field-scan-btn{flex:0 0 auto;width:44px;height:44px;padding:0;border-radius:999px;background:var(--card);border:1px solid var(--accent);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.field-scan-btn:hover{background:var(--parchment)}
.field-scan-btn img{width:24px;height:24px;display:block}
.field-note{font-size:.9rem;color:var(--ink-soft);margin:4px 0 0}
.field-note .btn{margin-left:6px;padding:6px 12px;min-height:32px;font-size:.9rem}
.photo-evidence{outline:2px dashed var(--accent);outline-offset:-2px}
.scan-overlay input[type="file"]{display:none}
.scan-box{max-width:480px;width:100%;text-align:center}
.scan-box video{width:100%;border-radius:12px;background:#000}
.scan-hint{color:var(--cream)}
/* Shared scanner (scan build 2026-11-07): one overlay used by the board
   search pill and the Journal. The result area shows what a scan found. */
.scan-frame-wrap{position:relative}
.scan-frame{position:absolute;left:12%;right:12%;top:22%;bottom:22%;border:2px dashed var(--cream);border-radius:12px;pointer-events:none;opacity:.85}
.scan-result{background:var(--card);border-radius:12px;padding:14px 16px;text-align:left;color:var(--ink);margin-top:12px}
.scan-result p{margin:0 0 10px;color:var(--ink)}
.scan-result p:last-child{margin-bottom:0}
.scan-result .btn{display:inline-block;width:auto}
.scan-result .scan-note{color:var(--ink-soft);font-size:.9rem}
/* Photo picker (scan build 2026-11-07): two real choices, camera or album.
   The native file input is hidden; the buttons are the interface. */
.photo-pick{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 0}
.photo-pick .btn{flex:1 1 auto}
.file-hidden{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
/* Journal check-in thumbnails (round 29) */
ul.sauce-list li.j-entry{display:flex;gap:10px;align-items:flex-start}
.j-thumb{flex:none;padding:0;border:0;background:none;cursor:pointer}
.j-thumb img{width:64px;height:64px;object-fit:cover;border-radius:8px;display:block}
.j-entry-text{flex:1;min-width:0}
.j-photo-preview-img{max-width:120px;border-radius:8px;margin-top:6px}
/* thank-you pop-up (round 19, 2026-11-06): a clear, warm confirmation
   when a submission is sent. Contributing should feel good. */
.thanks-overlay{position:fixed;inset:0;background:rgba(43,32,24,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:60}
.thanks-overlay[hidden]{display:none}
.thanks-card{background:var(--cream);border:1px solid var(--line-strong);border-radius:16px;max-width:420px;width:100%;padding:28px 24px;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.thanks-card .thanks-icon{width:72px;height:72px;object-fit:cover;border-radius:12px}
.thanks-card h2{margin:12px 0 8px;font-size:1.5rem}
.thanks-card p{margin:0 0 10px}
.thanks-card .thanks-warm{color:var(--ink-soft)}
.thanks-card .btn{margin-top:8px}
.photo-remove{position:absolute;top:2px;right:2px;width:28px;height:28px;border-radius:999px;border:1px solid var(--line-strong);background:var(--card);color:var(--ink);font-size:1rem;line-height:1;cursor:pointer}
.btn.is-incomplete{background:var(--line-strong);color:var(--ink-soft);cursor:pointer}
.btn.is-incomplete:hover{background:var(--line-strong);color:var(--ink-soft)}
main.wrap{padding-bottom:28px}
/* submit gate — round 10 (2026-11-06): one feedback type at a time.
   Radio pills at the top; only the chosen form's panel is shown. */
.gate{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:14px 0 4px}
.gate legend{font-weight:700;margin-bottom:8px;padding:0}
.gate label{display:inline-flex;align-items:center;border:1px solid var(--line-strong);
  border-radius:999px;padding:10px 16px;min-height:44px;cursor:pointer;background:var(--card)}
.gate input{position:absolute;opacity:0;pointer-events:none}
.gate label:has(input:checked){background:var(--accent);color:var(--cream);border-color:var(--accent)}
.gate label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.gate-panel{margin:8px 0 30px;scroll-margin-top:12px}
.gate-panel[hidden]{display:none}
.gate-panel h2{margin-top:18px}
/* footer */
.site-foot{border-top:1px solid var(--oak);margin-top:36px;padding:20px 0 28px;color:var(--ink-soft);font-size:.9rem}
.site-foot nav{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:12px}
.site-foot a{color:var(--accent-deep)}
.rule{border:0;border-top:1px solid var(--oak);margin:0 0 18px}
table.data{border-collapse:collapse;width:100%}
table.data th,table.data td{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left;font-size:.92rem}
@media (max-width:480px){
  h1{font-size:1.7rem}
  .hero h1{font-size:1.8rem}
  .bar-row{grid-template-columns:110px 1fr 36px}
  .searchrow select{max-width:118px}
}
/* characters - spot illustrations (design package §4): one per page, small */
.spot{display:flex;gap:14px;align-items:center;margin:18px 0;padding:12px 14px;background:var(--card);border:1px solid var(--line-strong);border-radius:12px}
.spot img{width:140px;height:auto;border-radius:10px;flex:none}
.spot figcaption{color:var(--ink-soft);font-size:.92rem}
.spot figcaption b{color:var(--ink)}
.scene{margin:18px 0}
.scene img{width:100%;height:auto;border-radius:12px;display:block;cursor:zoom-in}
.scene figcaption{color:var(--ink-soft);font-size:.92rem;margin-top:8px}
.scene figcaption b{color:var(--ink)}
/* storyboard - one beat per section, scene + words, stacks on phones */
.story-beat{margin:22px 0;padding:16px;background:var(--card);border:1px solid var(--line-strong);border-radius:12px}
.story-beat figure{margin:0 0 12px}
.story-beat img{width:100%;height:auto;border-radius:10px;display:block}
.story-beat figcaption{color:var(--ink-soft);font-size:.85rem;margin-top:6px}
@media (min-width:700px){.story-beat{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;align-items:start}.story-beat figure{margin:0}}
/* round 15 (2026-11-06): Joseph, from the dev site on his phone — the
   trophies "can't really be seen that small" at 64px wide. The trophy
   renderings are 1024x572 landscape scenes where the trophy itself is
   only 100-336px wide, so at 64px it rendered 6-21px. Fix: tight-crop
   each rendering to the trophy (package-local *_crop.jpg derivatives;
   design-package originals untouched, copy loop never overwrites them)
   and show them in a grid at 112px tall — the trophy renders 5-8x
   larger. Grid keeps the page compact: 2 columns on phones, more on
   desktop (was a 9-row single-column list, 515px tall). */
.trophy-list{list-style:none;margin:0 0 18px;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:20px 12px}
.trophy-list li{display:block;text-align:center;padding:0;border-bottom:0}
.trophy-list img{width:100%;height:112px;object-fit:cover;display:block;
  border-radius:8px;margin:0 auto 8px}
.trophy-list span{font-size:.92rem}
/* Bottle-folk character list (round 29, Joseph 2026-11-07): each character
   gets a small portrait next to their name, so the page is visual, not a
   text list. Portraits reuse the locked V1 character artwork. */
.folk-list{list-style:none;margin:0 0 18px;padding:0}
.folk-list li{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.folk-list img{width:120px;height:72px;object-fit:contain;background:var(--cream);border-radius:8px;flex:none;cursor:zoom-in;object-position:right}
.folk-list span{flex:1;min-width:0}
/* round 12 (2026-11-06): Joseph, from the dev site on his phone — the
   bottle-folk spots are "super super super tiny" on mobile and the detail
   is unreadable at 96px wide. Supersedes the round-6 rule (spots stayed
   horizontal on phones): on phones the spot now stacks vertically with
   the image full-width above the caption, like the storyboard beats, so
   the illustration is the dominant element. Desktop keeps the 140px
   horizontal layout. Imagery art-directed per breakpoint (§6). */
@media (max-width:480px){.spot{flex-direction:column;align-items:stretch;gap:12px;padding:12px}.spot img{width:100%;height:auto;display:block}}