:root{--track:color-mix(in srgb,var(--tx,#1d1a18) 9%,var(--card,#fff));--rule:var(--ln,#e7e0d8)}
/* Chat-first guest pages: one warm conversation with the wine, pictures inline, composer pinned to the bottom. */
/* The bottom is reserved once, here: the composer is about 106px tall with its credit line, so 122px leaves a gap. */
section.chat{max-width:560px;margin:0 auto;padding:4px 16px calc(122px + env(safe-area-inset-bottom,0px))}
body:has(#chat){padding-bottom:0}body:has(#chat) .foot{display:none}
.pills{display:block;margin-top:6px;font-size:var(--fs-small);color:var(--mu);line-height:1.4}.pills span{padding:0;background:none;border-radius:0}.pills span+span::before{content:" · "}
.hint{font-size:var(--fs-small);color:var(--mu);margin:10px 0 0}
.hello{display:flex;gap:14px;align-items:center;padding:14px 0 2px}
.hello .viz{width:54px;flex:none}
.hello .eb{font-size:var(--fs-caption);letter-spacing:.08em;text-transform:uppercase;color:var(--mu)}
.hello h1{font:500 26px/1.15 var(--hf,Georgia,serif);margin:2px 0 4px;color:var(--tx,#1d1a18)}
.hello .sub{font-size:16px;line-height:1.4;color:var(--mu)}
.story-link{display:inline-block;margin-top:0;padding:12px 0 10px;font-size:var(--fs-ui);color:var(--pt,#6b1434);text-decoration:none;font-weight:600}
/* Chips are the main way a guest asks: 36px with a mouse, 44px on touch. The camera chip opens the menu-photo picker. */
.chips{display:flex;gap:8px;flex-wrap:wrap;padding:12px 0 2px}
.chips button,.chips .camchip{display:inline-flex;align-items:center;min-height:var(--tap-sm);border:1px solid var(--ln);background:var(--card,#fff);border-radius:var(--r-chip);padding:8px 14px;font:500 var(--fs-ui)/1.2 Inter,system-ui,sans-serif;color:inherit;cursor:pointer}
.chips button:active,.chips .camchip:active{background:color-mix(in srgb,var(--tx,#1d1a18) 10%,var(--card,#fff))}
.chips .camchip{background:color-mix(in srgb,var(--tx,#1d1a18) 7%,var(--card,#fff));border-color:transparent}
.chips .xp{background:color-mix(in srgb,var(--p,#1d1a18) 9%,var(--card,#fff));color:var(--pt,#1d1a18);border-color:color-mix(in srgb,var(--p,#1d1a18) 28%,var(--card,#fff));font-weight:600}.chips .xp:active{background:color-mix(in srgb,var(--p,#1d1a18) 18%,var(--card,#fff))}
@media (pointer:coarse){.chips{gap:10px 8px}.chips button,.chips .camchip{min-height:var(--tap);padding:10px 15px}}
/* Short phones keep four questions so the story card never crowds the composer; 844px phones five; taller ones six. The camera chip always stays. */
@media (max-height:880px){#chips button:not(.camchip):nth-child(n+6){display:none}}
@media (max-height:780px){#chips button:not(.camchip):nth-child(n+5){display:none}}
.turn{margin:18px 0}
.me{display:flex;justify-content:flex-end}
.me span{background:var(--tx,#1d1a18);color:var(--bg,#fff);padding:9px 14px;border-radius:var(--r-card) var(--r-card) 4px var(--r-card);font-size:15px;line-height:1.4;max-width:82%}
.ai{font-size:var(--fs-body);line-height:1.55}
.ai .txt{margin:0;white-space:pre-line}
.ai .meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:6px;font-size:var(--fs-caption);color:var(--mu)}
.ai .meta button{border:0;background:none;font-size:16px;min-width:var(--tap-sm);min-height:var(--tap-sm);padding:0 6px;border-radius:var(--r-chip);cursor:pointer;color:inherit}
.ai .meta .askw,.ai .meta .pill{font-size:var(--fs-small);border:1px solid var(--ln);border-radius:var(--r-chip);padding:0 12px;background:var(--card,#fff)}
@media (pointer:coarse){.ai .meta button{min-width:var(--tap);min-height:var(--tap)}}
.soldout{font-size:var(--fs-small);font-weight:600;color:var(--mu)}.ordrows{display:grid;gap:8px}.ordrow{display:flex;align-items:center;gap:10px}.ordrow>span{flex:1;min-width:0}.ordrow b{display:block;font-size:var(--fs-ui)}.ordrow small{font-size:var(--fs-caption);color:var(--mu)}
.typing{display:inline-flex;gap:4px;padding:8px 0}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted-2);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
/* The status line sits under the typing dots while tools run (aria-live polite); it goes when the first sentence lands. */
.turn .busy{display:block;margin:0 0 6px;color:var(--mu,#6b625a);font-size:var(--fs-caption,13px);line-height:1.4}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
/* The composer lines up with the 528px column; its buttons are 44px because thumbs use them. */
.composer{position:fixed;left:0;right:0;bottom:0;background:linear-gradient(to top,var(--bg,#faf7f3) 70%,rgba(250,247,243,0));padding:14px 16px calc(12px + env(safe-area-inset-bottom,0px))}
.composer form{max-width:528px;margin:0 auto;display:flex;gap:8px;align-items:center;background:var(--card,#fff);border:1px solid var(--ln);border-radius:var(--r-chip);padding:4px;box-shadow:0 4px 18px rgba(0,0,0,.06)}
.composer input[type=text]{flex:1;min-width:0;border:0;outline:0;font:16px Inter,system-ui,sans-serif;background:transparent;padding:10px 6px;color:inherit}
.composer input::placeholder{color:var(--mu);opacity:1}
.composer form:focus-within{border-color:var(--p,#6b1434);box-shadow:0 0 0 3px color-mix(in srgb,var(--p,#6b1434) 16%,transparent),0 4px 18px rgba(0,0,0,.06)}
.composer .cam,.composer .send{flex:none;width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer}
.composer .cam{background:color-mix(in srgb,var(--tx,#1d1a18) 7%,var(--card,#fff));font-size:17px}
.composer .send{background:var(--p,#6b1434);color:var(--on-p,#fff);font-size:18px}
.composer .pw{max-width:528px;margin:8px auto 0;text-align:center;font-size:var(--fs-caption);color:var(--mu)}.composer .pw img{width:12px;height:12px;vertical-align:-2px;margin:0 2px}
.composer .pw a{font-family:Urbanist,sans-serif;font-weight:600;letter-spacing:-.03em;color:var(--tx);text-decoration:none;display:inline-block;padding:10px 4px;margin:-10px 0}
.status{font-size:var(--fs-small);color:var(--mu);text-align:center;margin:10px 0}
/* UX pass 2026-10-08: the first screen, column alignment, readable chart labels */
.peek{display:block;margin:18px 0 0;padding:14px 16px 12px;border-radius:var(--r-card);background:var(--card,#fff);border:1px solid var(--ln);text-decoration:none;color:inherit}
.peek-k{display:block;font-size:var(--fs-caption);letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--pt,#6b1434)}
.peek-t{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font:400 16px/1.45 var(--hf,Georgia,serif);margin:4px 0 6px;color:var(--tx,#1d1a18)}
.peek-go{display:inline-block;padding:4px 0;font-size:var(--fs-small);font-weight:600;color:var(--pt,#6b1434)}
.roundbar{max-width:528px}body:has(#chat) .roundbar{bottom:calc(114px + env(safe-area-inset-bottom,0px))}
/* The intro card (our wines in the glass) spans the column with the glasses centred, like the other centred SVG cards. */
section.chat>.vcard{max-width:none}section.chat>.vcard>.viz{max-width:400px;margin:0 auto}
/* Tablets and laptops: the column stays, the type inside it steps up one size for a propped-up iPad. */
@media (min-width:720px){.hello{gap:18px;padding-top:22px}.hello .viz{width:64px}.hello h1{font-size:30px}.hello .sub{font-size:17px}.peek-t{font-size:17px}.chips{padding-top:16px}}
/* Short screens (a phone browser with its toolbars: 390x664, 393x659): trim the first screen so the story card clears the composer. */
@media (max-height:720px){.hello{padding-top:6px}.hello .sub{font-size:15px}.chips{padding-top:8px}.peek{margin-top:12px}.peek-t{-webkit-line-clamp:3}section.chat{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}}
/* Shorter still (an iPhone SE): the composer drops to about 78px; the credit returns to the page flow once a conversation
   has started (the page scrolls then anyway), so the first screen never scrolls just to show it. */
@media (max-height:700px){section.chat>.vcard>.viz{max-width:280px}.composer .pw{display:none}.composer{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}section.chat{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}body:has(#log:not(:empty)) .foot{display:flex;margin:12px 0 0}}
/* 320px phones: the intro card's glass labels keep 12px. */
@media (max-width:340px){section.chat>.vcard{padding-inline:6px}section.chat>.vcard .viz .vs{font-size:13.5px}}
/* Tablets and laptops: cards use more of the 560px column; the radar, wheel and triangle keep their natural size. */
@media (min-width:720px){.vcard{max-width:440px}section.chat>.vcard>.viz{max-width:440px}.vcard>.viz[aria-label^="Taste profile"],.vcard>.viz[aria-label^="Wine color wheel"],.vcard>.viz[aria-label^="Soil texture"]{max-width:360px}}
/* ---- M19 wine intelligence: one block per tool family, every tap target 44 px ---- */
/* intel: trail. The trail picture: numbered stops, a timeline, a directions link and a share button (44 px tap targets). */
.ttl{list-style:none;margin:10px 0 0;padding:0}
.tst{display:flex;gap:10px;align-items:flex-start;padding:4px 0;border-top:1px solid var(--rule)}
.tst:first-child{border-top:0}
.tnum{flex:none;width:26px;height:26px;margin-top:6px;border-radius:50%;background:var(--p,#6b1434);color:var(--on-p,#fff);font:600 13px/26px Inter,system-ui,sans-serif;text-align:center}
.tbody{min-width:0;flex:1}
.tbody p{margin:2px 0;font-size:var(--fs-small,13px);line-height:1.4;color:var(--tx,#1d1a18)}
.tname{font-size:var(--fs-ui,14px)!important;font-weight:600}
.tlink{display:inline-block;padding:12px 0;margin:-12px 0;color:var(--tx,#1d1a18);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--mu,#6b625a) 45%,transparent);text-underline-offset:2px}
.tmeta,.thrs,.tnot{color:var(--mu,#6b625a)!important}
.ttaste{font-weight:500}
.tdir{margin:8px 0 0}
.tdir a{display:inline-block;min-height:44px;line-height:44px;font-size:var(--fs-small,13px);font-weight:600;color:var(--pt,#6b1434)}
.tnotes{margin:4px 0 0;padding-left:18px;font-size:var(--fs-caption,12px);color:var(--mu,#6b625a);line-height:1.4}
.tnotes li+li{margin-top:3px}
.tshare{margin:8px 0 0!important}
.vcard .share{min-height:44px;padding:0 16px;border-radius:var(--r-chip,999px);border:1px solid var(--ln,#e6dfd6);background:var(--card,#fff);color:var(--tx,#1d1a18);font:600 14px Inter,system-ui,sans-serif;cursor:pointer}
/* intel: winery-now. The club and visit buttons, perks and house notes, the "what guests ask" list with count bars. 44 px tap targets. */
/* One filled link-button for joining, directions and the shared page's call to action. */
.vcard .wjoin,.shbtn{display:flex;align-items:center;justify-content:center;min-height:44px;margin:10px 0 0;padding:0 18px;border-radius:var(--r-chip,999px);background:var(--p,#6b1434);color:var(--on-p,#fff);font:600 15px/1 Inter,system-ui,sans-serif;text-decoration:none}
.vcard .wlist{list-style:none;margin:4px 0 0;padding:0}
.vcard .wlist li{padding:7px 0;border-top:1px solid var(--rule);font-size:var(--fs-small,13px);line-height:1.4;color:var(--tx,#1d1a18)}
.vcard .wlist li:first-child{border-top:0}
.vcard .wadr{margin:8px 0 0;font-size:var(--fs-small,13px);line-height:1.4;color:var(--tx,#1d1a18)}
.vcard .wpop{list-style:none;margin:6px 0 0;padding:0}
.vcard .wpop li{margin:0 0 10px}
.vcard .wq{display:block;width:100%;min-height:44px;margin:0;padding:8px 12px;border:1px solid var(--ln,#e6dfd6);border-radius:12px;background:var(--card,#fff);color:var(--tx,#1d1a18);font:600 14px/1.3 Inter,system-ui,sans-serif;text-align:left;cursor:pointer}
.vcard .wbar{display:block;height:6px;margin:6px 2px 2px;border-radius:3px;background:var(--track);overflow:hidden}
.vcard .wbar i{display:block;height:100%;border-radius:3px;background:var(--p,#6b1434)}
.vcard .wn{display:block;font-size:12px;color:var(--mu,#6b625a)}
/* intel: share. The share button in a chat card (one large tap target) and the shared page at /s/:token. 44 px tap targets. */
.vcard .shwrap{margin:6px 0 0}
.vcard .share.shbig{display:block;width:100%;min-height:52px;padding:0 16px;font-size:16px}
.shared{max-width:620px;margin:0 auto;padding:18px 16px 0}
.shared h1{font-size:30px;margin:4px 0 10px;overflow-wrap:anywhere}
.shturn{padding:14px 0;border-top:1px solid var(--ln,#e7e0d8)}
.shturn h2{font-family:var(--hf);font-size:var(--fs-h3,18px);font-weight:500;line-height:1.3;margin:0 0 8px;overflow-wrap:anywhere}
.shturn>p{margin:0 0 10px;font-size:16px;line-height:1.55;color:var(--tx,#1d1a18)}
.shturn .vcard{margin:10px 0 4px}
.shtrail{margin:10px 0 0}
.shnote{margin:18px 0 0;font-size:var(--fs-small,13px);line-height:1.45;color:var(--mu,#6d645e)}
.shcta{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.shbtn{display:inline-flex;margin:0}
/* intel: chat. The Share button in each answer's meta row, the "Share this chat" chip, the share sheet (a bottom sheet on phones, centred on wide screens; Escape closes it). 44 px tap targets, visible focus, colours from the winery tokens so dark themes work. */
.ai .meta .pill{min-height:var(--tap-sm);display:inline-flex;align-items:center;color:inherit;cursor:pointer}
@media (pointer:coarse){.ai .meta .pill{min-height:var(--tap)}}
.chips .sharechip{border-style:dashed;font-weight:600;color:var(--pt,#1d1a18)}
.csheet{position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:none;max-height:none;height:auto;padding:0;border:0;background:transparent;color:var(--tx,#1d1a18);overflow:visible}
.csheet::backdrop{background:rgba(20,16,14,.42)}
.csheet-in{padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px));border-radius:18px 18px 0 0;background:var(--card,#fff);box-shadow:0 -10px 30px rgba(0,0,0,.18)}
.csheet-in::before{content:"";display:block;width:40px;height:4px;margin:0 auto 12px;border-radius:2px;background:var(--ln,#e6dfd6)}
.csheet-h{margin:0;font:500 20px/1.25 var(--hf,Georgia,serif);overflow-wrap:anywhere;color:var(--tx,#1d1a18)}
.csheet-t{margin:4px 0 10px;font-size:var(--fs-small,13px);line-height:1.4;color:var(--mu,#6b625a)}
.csheet-url{display:block;width:100%;min-height:44px;box-sizing:border-box;padding:0 12px;border:1px solid var(--ln,#e6dfd6);border-radius:12px;background:var(--bg,#faf7f3);color:inherit;font:14px/1.3 Inter,system-ui,sans-serif}
.csheet-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.csheet-row>*{display:flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;border:1px solid var(--ln,#e6dfd6);border-radius:12px;background:var(--card,#fff);color:var(--tx,#1d1a18);font:600 15px/1 Inter,system-ui,sans-serif;text-decoration:none;cursor:pointer}
.csheet-row .csheet-copy{grid-column:1/-1;background:var(--p,#6b1434);border-color:transparent;color:var(--on-p,#fff)}
.csheet-close{display:block;width:100%;min-height:44px;margin-top:8px;border:0;background:none;color:var(--mu,#6b625a);font:600 15px/1 Inter,system-ui,sans-serif;cursor:pointer}
.csheet :focus-visible,.ai .meta :focus-visible,.chips :focus-visible{outline:3px solid var(--tx,#1d1a18);outline-offset:2px}
@media (min-width:720px){.csheet{inset:0;margin:auto;width:min(420px,calc(100% - 32px));height:fit-content}.csheet-in{border-radius:var(--r-card,16px);box-shadow:0 18px 50px rgba(0,0,0,.25)}.csheet-in::before{display:none}}
/* intel: sheet. The winery's tech sheet: measures down the side, up to three wines across. */
.vcard .wsheet{width:100%;border-collapse:collapse;margin:6px 0 0;font-size:var(--fs-small,13px);line-height:1.35;font-variant-numeric:tabular-nums}
.vcard .wsheet th,.vcard .wsheet td{padding:6px 6px 6px 0;text-align:left;vertical-align:top;border-top:1px solid var(--rule);overflow-wrap:anywhere}
.vcard .wsheet tr:first-child>*{border-top:0}
.vcard .wsheet th[scope=row]{font-weight:500;color:var(--mu,#6b625a)}
.vcard .wsheet th[scope=col]{font-weight:600;color:var(--tx,#1d1a18)}
.vcard .wsheet .ns{color:var(--mu,#6b625a);font-style:italic}