/* Tasteladder Wine Taste Discovery Engine — shared styles.
   Warm, experiential, jargon-free. WCAG AA contrast; works at 375px. */
:root{
  --wine:#6b1f3a; --wine-deep:#4a142a; --gold:#b8893a; --gold-deep:#946a26;
  --cream:#fbf7f1; --ink:#241a1f; --muted:#5f5158; --line:#e7ddd2;
  --good:#2f7d4f; --card:#ffffff; --shadow:0 6px 24px rgba(74,20,42,.10);
  --radius:14px; --maxw:1080px;
  /* surfaces that flip in dark mode */
  --page:#fbf7f1; --header:#4a142a; --header-ink:#f6e9d8; --hero-grad-a:#6b1f3a;
  --hero-grad-b:#4a142a; --hero-ink:#ffffff; --sub:#f6efe4; --field-bg:#ffffff;
  --radar-grid:#8f8473; --heading:#4a142a;
  /* button fills always dark enough for white text, both themes */
  --btn:#6b1f3a; --btn-hover:#4a142a; --btn-gold:#946a26; --btn-gold-hover:#7c5820;
  --btn-ink:#ffffff;
  /* the DNA share card keeps a fixed deep-wine field in both themes */
  --dna-a:#6b1f3a; --dna-b:#3a0f20;
}
/* Dark mode (H-2). The brand palette themes cleanly because every color is a
   CSS variable. data-theme is set by engine.js (honors a saved choice); the
   media query is the no-JS / first-paint fallback so the OS preference is
   respected even before the script runs. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --wine:#c98aa3; --wine-deep:#3a0f20; --gold:#d9a85a; --gold-deep:#caa04e;
    --ink:#f1e7ea; --muted:#b8a8ae; --line:#3a2c33; --card:#241820;
    --shadow:0 6px 24px rgba(0,0,0,.45); --page:#171015; --header:#1d1218;
    --header-ink:#f3e1c9; --hero-grad-a:#3a0f20; --hero-grad-b:#1d1218;
    --hero-ink:#fbeef0; --sub:#2a1d24; --field-bg:#1f151b; --radar-grid:#6a5a60;
    --heading:#f0dfe5; --good:#5fce8c;
  --btn:#8c2c4c; --btn-hover:#a3375a; --btn-gold:#a9803a; --btn-gold-hover:#c19147;
  --btn-ink:#ffffff;
  }
}
:root[data-theme="dark"]{
  --wine:#c98aa3; --wine-deep:#3a0f20; --gold:#d9a85a; --gold-deep:#caa04e;
  --ink:#f1e7ea; --muted:#b8a8ae; --line:#3a2c33; --card:#241820;
  --shadow:0 6px 24px rgba(0,0,0,.45); --page:#171015; --header:#1d1218;
  --header-ink:#f3e1c9; --hero-grad-a:#3a0f20; --hero-grad-b:#1d1218;
  --hero-ink:#fbeef0; --sub:#2a1d24; --field-bg:#1f151b; --radar-grid:#6a5a60;
  --heading:#f0dfe5; --good:#5fce8c;
  --btn:#8c2c4c; --btn-hover:#a3375a; --btn-gold:#a9803a; --btn-gold-hover:#c19147;
  --btn-ink:#ffffff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Iowan Old Style','Palatino Linotype',Georgia,serif;
  color:var(--ink);background:var(--page);line-height:1.6;font-size:17px}
h1,h2,h3{font-family:'Iowan Old Style',Georgia,serif;line-height:1.2;color:var(--heading)}
a{color:var(--wine);text-underline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--wine);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:8px;top:8px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
.btn{display:inline-block;background:var(--btn);color:var(--btn-ink);border:0;border-radius:999px;
  padding:13px 26px;font-size:1rem;font-weight:600;cursor:pointer;text-decoration:none;
  font-family:inherit;transition:background .15s}
.btn:hover{background:var(--btn-hover)}
.btn.gold{background:var(--btn-gold);color:#fff}.btn.gold:hover{background:var(--btn-gold-hover)}
.btn.ghost{background:transparent;color:var(--wine);border:1.5px solid var(--wine)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* header */
header.site{background:var(--header);color:#fff}
header.site .wrap{display:flex;align-items:center;gap:18px;min-height:64px;flex-wrap:wrap}
header.site a{color:var(--header-ink)}
.brand{display:inline-flex;align-items:center;gap:9px;font-size:1.25rem;font-weight:700;color:#fff;text-decoration:none;letter-spacing:.3px}
.brand .mark{flex:0 0 auto;color:var(--gold)}
.brand .wordmark{display:flex;flex-direction:column;line-height:1.05}
.brand small{display:block;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:600}
header.site nav{margin-left:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:.95rem}
header.site nav a{text-decoration:none}
.adv-disc{font-size:.78rem;opacity:.9}
/* theme toggle button */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:999px;border:1.5px solid rgba(255,255,255,.4);background:transparent;color:#fff;
  cursor:pointer;padding:0}
.theme-toggle:hover{background:rgba(255,255,255,.12)}
/* Inline icon SVGs carry a viewBox, so their rendered size must be pinned in
   CSS (not left to the width/height attributes alone, which a flex/grid cell
   can override and balloon to the line's cross-size). Decorative icons stay
   <=64px and every repeated instance renders at one uniform size. */
.ic-svg{display:inline-block;vertical-align:middle;width:22px;height:22px;flex:0 0 auto}
.dna-svg{display:inline-block;width:56px;height:56px;flex:0 0 auto}
.grid-food button .ic .ic-svg{width:30px;height:30px}

/* hero */
.hero{background:linear-gradient(160deg,var(--hero-grad-a) 0%,var(--hero-grad-b) 100%);color:var(--hero-ink);padding:46px 0 34px}
.hero h1{color:var(--hero-ink);font-size:2.3rem;margin:0 0 10px;max-width:18ch}
.hero p.lede{font-size:1.18rem;max-width:42ch;color:var(--hero-ink);opacity:.92;margin:0 0 8px}
.answer-capsule{background:var(--card);border-left:5px solid var(--gold);border-radius:8px;
  padding:14px 18px;margin:18px 0;box-shadow:var(--shadow);color:var(--ink)}

/* engine card */
.engine{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px;margin:22px 0}
.engine h2{margin-top:0;font-size:1.4rem}
.field{margin:18px 0}
.field>label,.field>.lab{font-weight:600;display:block;margin-bottom:6px}
.hint{color:var(--muted);font-size:.9rem}
.slider-row{display:grid;grid-template-columns:1fr;gap:4px;margin:14px 0}
.slider-row .ends{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted)}
.slider-row input[type=range]{width:100%;accent-color:var(--wine);height:26px}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{background:var(--field-bg);border:1.5px solid var(--line);border-radius:999px;padding:9px 16px;
  cursor:pointer;font-family:inherit;font-size:.95rem;color:var(--ink)}
.seg button[aria-pressed=true]{background:var(--wine);color:var(--card);border-color:var(--wine)}
/* LV-6: auto-fill (not auto-fit) + a capped track max so a category with a
   single food renders one normal-size card, never one balloon stretched across
   the whole row. justify-content:start keeps the short rows left-aligned. */
.grid-food{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,150px));gap:8px;justify-content:start}
.grid-food button{background:var(--field-bg);border:1.5px solid var(--line);border-radius:10px;padding:10px 6px;
  cursor:pointer;font-family:inherit;font-size:.86rem;text-align:center;color:var(--ink);line-height:1.2;
  display:flex;flex-direction:column;align-items:center;gap:3px}
.grid-food button .ic{display:flex;align-items:center;justify-content:center;color:var(--gold)}
.grid-food button[aria-pressed=true]{background:var(--wine);color:var(--card);border-color:var(--wine)}
.grid-food button[aria-pressed=true] .ic{color:var(--card)}
.food-cat{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gold-deep);
  font-weight:700;margin:14px 0 6px}
.food-subcat{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink);
  opacity:.62;font-weight:600;margin:12px 0 5px}
.food-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:64px;background:var(--field-bg);border:1.5px solid var(--line);border-radius:10px;
  padding:12px 6px;text-align:center;text-decoration:none;color:var(--ink);font-size:.86rem}
.food-link:hover{border-color:var(--wine)}
.food-link .ic{display:flex;align-items:center;justify-content:center;color:var(--gold)}
details.adv{border-top:1px solid var(--line);margin-top:18px;padding-top:6px}
details.adv summary{cursor:pointer;font-weight:600;padding:8px 0;color:var(--wine)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.two{grid-template-columns:1fr}}
select,input[type=text],input[type=email],input[type=number]{font-family:inherit;font-size:1rem;
  padding:10px 12px;border:1.5px solid var(--line);border-radius:9px;width:100%;background:var(--field-bg);color:var(--ink)}
.run{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:8px}

/* combobox */
.combo{position:relative}
.combo .chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.chip{background:var(--wine);color:#fff;border-radius:999px;padding:5px 10px;font-size:.85rem;display:inline-flex;gap:8px;align-items:center}
.chip button{background:transparent;border:0;color:#fff;cursor:pointer;font-size:1rem;line-height:1;padding:0}
.combo .list{position:absolute;z-index:40;left:0;right:0;background:var(--card);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow);max-height:300px;overflow:auto;margin-top:4px}
.combo .list[hidden]{display:none}
.combo .opt{padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--line)}
.combo .opt:last-child{border-bottom:0}
.combo .opt[aria-selected=true],.combo .opt:hover{background:var(--sub)}
.combo .opt b{display:block}
.combo .opt span{font-size:.85rem;color:var(--muted)}
@media(max-width:560px){
  .combo .list.overlay{position:fixed;inset:0;max-height:none;border-radius:0;z-index:120}
  .combo .list.overlay .opt{padding:16px}
}

/* results */
.results{margin:26px 0}
.result{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px;margin:14px 0;display:grid;grid-template-columns:140px 1fr;gap:18px}
@media(max-width:560px){.result{grid-template-columns:1fr}}
.match-badge{text-align:center}
.match-badge .pct{font-size:2.1rem;font-weight:800;color:var(--wine);line-height:1}
.match-badge .lab{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.result h3{margin:0 0 2px;font-size:1.25rem}
.result .meta{color:var(--muted);font-size:.92rem;margin:0 0 8px}
.result .why{margin:6px 0}
.result .pairnote{background:var(--sub);border-radius:8px;padding:8px 12px;font-size:.92rem;margin:8px 0}
.critic{display:inline-block;background:var(--gold-deep);color:#fff;border-radius:6px;padding:2px 8px;font-size:.8rem;font-weight:700}
.buy{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.buy a{font-size:.9rem;background:var(--gold-deep);color:#fff;text-decoration:none;padding:8px 14px;border-radius:999px}
.buy a.plain{background:transparent;color:var(--wine);text-decoration:underline}
canvas.radar{width:130px;height:130px}
.sidebar-acc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:14px 0}
.sidebar-acc h4{margin:.2rem 0 .6rem}
.sidebar-acc ul{margin:0;padding-left:18px}

/* wine DNA card */
.dna{background:linear-gradient(160deg,var(--dna-a) 0,var(--dna-b) 100%);color:#fff;
  border-radius:var(--radius);padding:24px;margin:20px 0;text-align:center}
.dna .ico{display:flex;justify-content:center;color:#fff;margin-bottom:4px}
.dna .ico .dna-svg{width:60px;height:60px}
.dna h2{color:#fff;margin:.2rem 0}
.dna .tags{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.dna .tags span{background:rgba(255,255,255,.16);border-radius:999px;padding:5px 12px;font-size:.88rem}
.dna .share{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.email-cap{background:#fff;color:var(--ink);border-radius:10px;padding:14px;margin-top:14px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.email-cap input{max-width:260px}

/* content / FAQ */
.content{padding:30px 0}
.content h2{margin-top:1.4em}
.faq details{border:1px solid var(--line);border-radius:10px;margin:8px 0;background:var(--card)}
.faq summary{cursor:pointer;font-weight:600;padding:14px 16px}
.faq .a{padding:0 16px 14px}
.crosslinks{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.crosslinks a{background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:8px 16px;text-decoration:none}

/* age gate */
.agegate{position:fixed;inset:0;background:rgba(36,14,24,.86);display:flex;align-items:center;
  justify-content:center;z-index:1000;padding:18px}
.agegate[hidden]{display:none}
.agegate .box{background:#fff;border-radius:var(--radius);max-width:420px;padding:30px;text-align:center;box-shadow:var(--shadow)}
.agegate h2{margin-top:0}
.agegate .row{display:flex;gap:12px;justify-content:center;margin-top:18px}

footer.site{background:var(--wine-deep);color:#e9d9c6;margin-top:40px;padding:26px 0;font-size:.92rem}
footer.site a{color:#f3e1c9}
footer.site .links{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.ai-disc{font-size:.82rem;opacity:.8;max-width:60ch}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;
  padding:12px 20px;border-radius:999px;z-index:1100;box-shadow:var(--shadow)}
.toast[hidden]{display:none}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}


/* ---------------------------------------------------------------------------
   bk-warm-discovery brand adoption (appended by port_wine.py). These override
   the standalone engine palette/fonts so the /wine section matches the hub.
   Shared variable names (--ink/--line/--card/--muted) are pinned to the same
   values brand.css uses so the hub header/footer never drift.
--------------------------------------------------------------------------- */
:root{
  --wine:#7a2433; --wine-deep:#5e1b27; --gold:#b3781f; --gold-deep:#946116;
  --cream:#faf6ef; --ink:#211b16; --muted:#6f6458; --line:#e7ddcf;
  --card:#ffffff; --shadow:0 6px 24px rgba(122,36,51,.10);
  --page:#faf6ef; --hero-grad-a:#7a2433; --hero-grad-b:#5e1b27; --hero-ink:#ffffff;
  --sub:#f6ecd8; --field-bg:#ffffff; --radar-grid:#b3a896; --heading:#211b16;
  --btn:#7a2433; --btn-hover:#5e1b27; --btn-gold:#b3781f; --btn-gold-hover:#946116; --btn-ink:#ffffff;
  --dna-a:#7a2433; --dna-b:#4a1620;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --wine:#d98a96; --gold:#e2a64a; --gold-deep:#caa04e; --ink:#f1e9dd; --muted:#b3a896;
  --line:#3a322a; --card:#241f1b; --page:#1b1714; --sub:#33291a; --field-bg:#241f1b;
  --hero-grad-a:#5e1b27; --hero-grad-b:#1b1714; --heading:#f1e9dd; --radar-grid:#6a5a60;
}}
:root[data-theme="dark"]{
  --wine:#d98a96; --gold:#e2a64a; --gold-deep:#caa04e; --ink:#f1e9dd; --muted:#b3a896;
  --line:#3a322a; --card:#241f1b; --page:#1b1714; --sub:#33291a; --field-bg:#241f1b;
  --hero-grad-a:#5e1b27; --hero-grad-b:#1b1714; --heading:#f1e9dd; --radar-grid:#6a5a60;
}
body{font-family:'Inter Tight',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
h1,h2,h3{font-family:'Newsreader',Georgia,'Times New Roman',serif}

/* wine-section sub-nav (sits under the shared hub header) */
.wine-subnav{border-bottom:1px solid var(--line);background:var(--card)}
.wine-subnav .wrap{display:flex;gap:6px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px;max-width:940px;margin:0 auto}
.wine-subnav a{color:var(--muted);padding:6px 11px;border-radius:8px;font-size:13px;font-weight:500;text-decoration:none}
.wine-subnav a:hover{background:var(--sub);color:var(--ink)}