/* Glug marketing site — tokens ported from glug-app (src/index.css + tailwind.config.ts) */

/* ── Fonts (self-hosted Ysabeau Office, latin subsets from @fontsource) ─────────── */

@font-face {
  font-family: 'Ysabeau Office';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ysabeau-office-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Ysabeau Office';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ysabeau-office-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Ysabeau Office';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ysabeau-office-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Ysabeau Office';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ysabeau-office-latin-600-normal.woff2') format('woff2');
}

/* ── Tokens ──────────────────────────────────────────────────────── */

:root {
  --vine-olive: #464B36; /* structural: hero, buttons, nav */
  --ink:        #22251B; /* body text, dark footer */
  --sage:       #6B6E56; /* secondary text */
  --dust:       #C4C3B0; /* muted borders */
  --sand:       #E4DECF; /* light-band fills */
  --sand-warm:  #EAE4D5; /* inset tiles */
  --bone:       #FBF8F0; /* page background */
  --hairline:   rgba(34, 37, 27, 0.10);

  --font-display: 'Ysabeau Office', system-ui, -apple-system, sans-serif;
  --font-body: 'Ysabeau Office', system-ui, -apple-system, sans-serif;

  --gutter: 16px;
  --measure: 42rem;
  --badge-h: 44px; /* visible height of the store badges, on every page */
}

/* ── Base ────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
}

p { margin: 0; }

a { color: inherit; }

img { display: block; }

/* ── Header (Support / Privacy) ──────────────────────────────────── */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.25rem var(--gutter);
}

.site-header .logo-link { display: inline-flex; }

.site-header .logo { width: 72px; height: auto; }

.site-nav {
  display: flex;
  gap: 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.site-nav a {
  color: var(--vine-olive);
  text-decoration: none;
}

.site-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

.site-nav a[aria-current='page'] {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Olive hero (/u/<id>, /hoexters) ─────────────────────────────── */

.hero {
  background: var(--vine-olive);
  color: var(--bone);
  padding: 1.25rem var(--gutter) 5.5rem;
  text-align: center;
}

/* The Android link under a store badge (home, /u/<id>, /hoexters): small, bone,
   underline on hover. The padding gives a thumb-sized tap target. */
.hero-link {
  color: var(--bone);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.375rem 0;
}

.hero-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.hero-inner {
  max-width: var(--measure);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

.hero .logo {
  width: min(320px, 78%);
  height: auto;
}

.hero .tagline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 5.5vw, 2rem);
  line-height: 1.3;
}

/* ── Button (/u/<id>, /hoexters, /waitlist) ──────────────────────── */

.store-cta {
  display: inline-block;
  margin-top: 0.5rem;
  background: var(--vine-olive);
  color: var(--bone);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 0.875rem 1.75rem;
  border-radius: 9999px;
}

.store-cta:hover { background: var(--ink); }

/* ── Footer (dark olive) ─────────────────────────────────────────── */

.site-footer {
  background: var(--ink);
  color: var(--bone);
  padding: 3.5rem var(--gutter);
  text-align: center;
}

.footer-inner {
  max-width: var(--measure);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.site-footer .logo { width: 120px; height: auto; }

.site-footer a {
  color: var(--bone);
  text-decoration: none;
}

.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  font-size: 0.875rem;
}

.footer-links a { white-space: nowrap; }

.footer-meta {
  font-size: 0.75rem;
  color: var(--dust);
}

/* ── Content pages (Support / Privacy) ───────────────────────────── */

.page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2rem var(--gutter) 5rem;
}

.page h1 {
  font-size: clamp(2rem, 7vw, 2.5rem);
  margin-bottom: 0.75rem;
}

.page .lede {
  color: var(--sage);
  margin-bottom: 2.5rem;
}

.page .updated {
  font-size: 0.875rem;
  color: var(--sage);
  margin-bottom: 2.5rem;
}

.page h2 {
  font-size: 1.5rem;
  margin: 2.5rem 0 0.75rem;
}

.page h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5;
  margin: 1.75rem 0 0.5rem;
}

.page p { margin: 0 0 1rem; }

.page ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.page li { margin-bottom: 0.5rem; }

.page a {
  color: var(--vine-olive);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page .divider {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 2.5rem 0;
}

/* FAQ list on Support */
.faq {
  border-top: 1px solid var(--hairline);
}

.faq details {
  border-bottom: 1px solid var(--hairline);
  padding: 1rem 0;
}

.faq summary {
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '+';
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--sage);
  flex-shrink: 0;
}

.faq details[open] summary::after { content: '\2212'; }

.faq details > div { padding-top: 0.75rem; color: var(--ink); }

.faq details > div p { margin: 0 0 0.75rem; }

.faq details > div p:last-child { margin-bottom: 0; }

/* ── Wider screens ───────────────────────────────────────────────── */

@media (min-width: 640px) {
  :root { --gutter: 24px; --badge-h: 48px; }

  .hero { padding: 1.75rem var(--gutter) 7.5rem; }

  .site-header { padding-top: 1.75rem; }

  .page { padding-top: 3rem; }
}

/* ── Light button on the olive hero (/u/<id>, /hoexters) ─────────── */

.hero .store-cta { background: var(--bone); color: var(--vine-olive); }

.hero .store-cta:hover { background: var(--sand); }

/* ── Profile link (/u/<id>) ──────────────────────────────────────── */

.profile-link {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.profile-link .store-cta[hidden] { display: none; }

/* ── Store badges (home, /u/<id>, /hoexters, /waitlist/thanks) ───── */

/* Official badges, unmodified. --badge-h (see Tokens) is the VISIBLE badge
   height on every page, so the home and thanks pages always match (Apple's
   minimum on screen is 40px). Apple's SVG is the badge alone, so it gets its
   clear space, a quarter of its height, as margin on the link. That keeps the
   space out of the tap target. */
.apple-badge {
  display: block;
  margin: calc(var(--badge-h) / 4);
}

.apple-badge img {
  height: var(--badge-h);
  width: auto;
}

/* The badge with the Android link under it (home, /u/<id>, /hoexters) */
.get-app {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Waitlist (/waitlist) ────────────────────────────────────────── */

.waitlist-form { display: flex; flex-direction: column; gap: 1.25rem; }

.waitlist-form .field { display: flex; flex-direction: column; gap: 0.375rem; margin: 0; padding: 0; border: 0; font-weight: 500; }

.waitlist-form legend { padding: 0; margin-bottom: 0.375rem; }

.waitlist-form .field small { font-weight: 400; color: var(--sage); }

.waitlist-form input[type='text'],
.waitlist-form input[type='tel'],
.waitlist-form input[type='email'] {
  font: inherit;
  font-weight: 400;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--dust);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}

.waitlist-form .choice { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }

.waitlist-form .choice input { accent-color: var(--vine-olive); width: 1.125rem; height: 1.125rem; margin: 0; }

.waitlist-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.waitlist-form .store-cta { align-self: flex-start; border: 0; font-family: inherit; cursor: pointer; }

.page .form-note { font-size: 0.875rem; color: var(--sage); }

.page .form-error { color: #8A2D1F; font-weight: 500; }

.page .store-cta { color: var(--bone); text-decoration: none; }

/* ── Waitlist thanks (/waitlist/thanks) ──────────────────────────── */

.waitlist-thanks { text-align: center; }

.waitlist-thanks .app-icon {
  width: 112px;
  height: 112px;
  margin: 0 auto 1.75rem;
  border-radius: 22.5%;
}

.waitlist-thanks .lede { max-width: 30rem; margin: 0 auto 2rem; }

/* Official badges, unmodified. The Apple badge is .apple-badge (see Store
   badges above). Google's PNG already carries its clear space: the visible
   badge is 168 of its 250px, so the image is scaled to make that 168 equal
   --badge-h and the two badges match. */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  margin: 0 0 1.5rem;
}

.store-badge { display: flex; flex-direction: column; align-items: center; }

.store-badge-google img {
  height: calc(var(--badge-h) * 250 / 168);
  width: auto;
}

.page .store-badge-caption {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--sage);
}

/* ── Home (/) ────────────────────────────────────────────────────── */

.home {
  --section-space: clamp(64px, 10vw, 128px);
  --wide: 1200px;
}

/* One gap between sections at every width. The bands that have their own
   background carry their padding inside, so the gap never doubles. */
.home > * + * { margin-top: var(--section-space); }

/* The hero, How it works, the wine list band and the sentence section meet
   edge to edge. How it works carries its space inside as padding, so it is the
   only page background between the hero and the sentence section. */
.home-how,
.home-band,
.home-sentence { margin-top: 0; }

.home-wrap {
  width: 100%;
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* :where keeps these defaults at zero specificity, so a section class can
   override them without a fight. */
:where(.home) h1,
:where(.home) h2 { text-wrap: balance; }

:where(.home) h2 {
  font-size: clamp(1.75rem, 4.2vw, 3rem);
  line-height: 1.1;
}

:where(.home) p {
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  line-height: 1.5;
}

/* Photo band (the hero): the photo fills the band, a dark scrim sits behind
   the text, and the text sits at the bottom. */
.home-photo {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ink);
  color: var(--bone);
}

.home-photo > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim);
}

/* 1. Hero */
.home-hero {
  --scrim:
    linear-gradient(to bottom, rgba(34, 37, 27, 0.68), rgba(34, 37, 27, 0) 28%),
    linear-gradient(to top, rgba(34, 37, 27, 0.88), rgba(34, 37, 27, 0.74) 32%, rgba(34, 37, 27, 0) 78%);
  justify-content: space-between;
  min-height: clamp(560px, 100vh, 900px);
  min-height: clamp(560px, 100svh, 900px);
  padding-block: clamp(20px, 3vw, 28px) clamp(32px, 6vw, 72px);
}

.home-hero-logo { width: auto; height: 64px; }

.home-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.home-hero h1 {
  max-width: 14em;
  font-size: clamp(2.25rem, 6vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
}

.home-hero h1 strong { font-weight: 600; }

.home-hero p { max-width: 32rem; }

/* Store links aligned left (hero, last band). The page gutter is the badge's
   left clear space, so the badge needs no margin of its own on that side. */
.get-app-start { align-items: flex-start; }

.get-app-start .apple-badge { margin-left: 0; }

/* Two columns from 768px: sections 2, 5 and 6 */
.home-split {
  display: grid;
  align-items: center;
  gap: clamp(32px, 6vw, 48px) clamp(40px, 7vw, 112px);
}

.home-copy > * + * { margin-top: 1rem; }

.home-copy p { max-width: 30rem; }

/* Phone screenshots sit in a plain frame, with no drawn device */
.home-phone {
  justify-self: center;
  width: min(100%, 300px);
  height: auto;
  border: 1px solid var(--dust);
  border-radius: 36px;
}

.home-round {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 16px;
}

/* 2. How it works: the heading, then the phone and the steps */
.home-how { padding-block: var(--section-space); }

.home-how h2 {
  max-width: 18em;
  margin-bottom: clamp(40px, 7vw, 80px);
}

.home-steps {
  max-width: 34rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.home-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  padding-block: 1.5rem;
  border-top: 1px solid var(--hairline);
}

.home-steps li:last-child { border-bottom: 1px solid var(--hairline); }

.home-steps li::before {
  content: counter(step);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--vine-olive);
}

.home-step-title {
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
}

.home-step-text {
  margin-top: 0.375rem;
  color: var(--sage);
}

/* 3. The wine list band: the photo alone, full bleed, with no text and no
   scrim. The photo is a portrait, so a wide band shows only a third of it. 75%
   keeps the wine in the glasses and the top of the menu in view; 62% crops the
   menu out. Ink fills the band until the photo loads. */
.home-band {
  width: 100%;
  height: clamp(420px, 70vh, 760px);
  object-fit: cover;
  object-position: 50% 75%;
  background: var(--ink);
}

/* 4. Your sentence */
.home-sentence {
  padding-block: var(--section-space);
  background: var(--sand-warm);
  text-align: center;
}

.home-sentence h2 {
  max-width: 18em;
  margin-inline: auto;
}

.home-sentence-figure { margin: clamp(40px, 7vw, 80px) 0 0; }

.home-sentence-hand {
  width: auto;
  height: clamp(72px, 9vw, 104px);
  margin: 0 auto clamp(20px, 3vw, 32px);
}

.home-sentence blockquote {
  max-width: 20em;
  margin: 0 auto;
  font-size: clamp(28px, 4.5vw, 52px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  color: var(--vine-olive);
  text-wrap: balance;
}

.home-sentence blockquote p {
  font-size: inherit;
  line-height: inherit;
}

/* vine-olive, not sage: sage on sand-warm is under 4.5:1 */
.home-sentence figcaption {
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  color: var(--vine-olive);
}

.home-sentence-note { margin-top: clamp(32px, 5vw, 56px); }

/* 6. Three tall photos: a swipeable row on phones, a grid from 768px */
.home-shelves {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: clamp(48px, 7vw, 96px) calc(var(--gutter) * -1) 0;
  padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}

.home-shelves::-webkit-scrollbar { display: none; }

.home-shelves img {
  flex: 0 0 72%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 16px;
  scroll-snap-align: start;
}

/* 7. A note from us */
.home-note {
  display: grid;
  align-items: center;
  gap: 28px clamp(40px, 7vw, 96px);
}

.home-note-hand {
  width: clamp(120px, 18vw, 200px);
  height: auto;
}

.home-note p {
  max-width: 36rem;
  font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.375rem);
  line-height: 1.5;
}

.home-note-sign {
  margin-top: 1.25rem;
  font-weight: 600;
  color: var(--vine-olive);
}

/* 8. Feedback */
.home-feedback { text-align: center; }

.home-feedback p { margin-top: 1rem; }

.home-feedback a {
  color: var(--vine-olive);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap; /* never split the address at its hyphen */
}

/* 9. Get on the list */
.home-join {
  padding-block: var(--section-space);
  background: var(--vine-olive);
  color: var(--bone);
}

.home-join-inner {
  display: grid;
  align-items: center;
  gap: 32px clamp(40px, 7vw, 96px);
}

.home-join p {
  max-width: 30rem;
  margin-top: 1rem;
}

.home-join .get-app { margin-top: 1rem; }

/* The hand stays inside the content width: above the heading on phones, and
   at the right of the copy, centered on it, from 768px. */
.home-join-hand {
  order: -1;
  justify-self: end;
  width: auto;
  height: 120px;
}

@media (min-width: 768px) {
  .home-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .home-split-flip > :first-child { order: 2; }

  .home-phone { width: min(100%, 340px); }

  .home-shelves {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }

  .home-shelves img { width: 100%; }

  .home-note { grid-template-columns: auto minmax(0, 1fr); }

  .home-join-inner { grid-template-columns: minmax(0, 1fr) auto; }

  .home-join-hand { order: 0; height: 240px; }
}

@media (min-width: 1024px) {
  .home-hero-logo { height: 88px; }
}

/* ── Share pages (/l/<id>, /s/<id>) ──────────────────────────────── */

/* The card a shared log or a scan's top picks shows on the olive hero: the
   app's card in plain CSS (glug-app, docs/architecture/SHARE_LINKS_PLAN.md
   section 10.3). The values here repeat the app's tokens (src/index.css,
   VerdictChip.tsx, RareBadge.tsx, WineColorDot.tsx, MatchPill.tsx): bordeaux
   for the match percent and nothing else, antique gold for Rare and nothing
   else, the four wine-colour dots. They are Sadhana's; if the app's change,
   this is a second place to change. */
.share-page {
  --bordeaux:    #6E2B3D; /* the match percent only */
  --rare:        #8C6410; /* the Rare badge only */
  --wine-red:    #9B3D4B;
  --wine-white:  #CDB668;
  --wine-rose:   #D7969C;
  --wine-orange: #C58650;
}

/* The logo above the card: a small mark, not the hero's full-size one. The
   card is what a visitor reads first and carries the logo itself; the
   loading, private, gone and error states (one sentence) wear the same
   56 px mark, centred by .hero-inner. */
.share-page .logo {
  width: auto;
  height: 56px;
}

.share-stage {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Loading: a placeholder line where the sentence or the card will be. */
.share-skeleton {
  width: min(16rem, 70%);
  height: 1.3em;
  border-radius: 9999px;
  background: rgba(251, 248, 240, 0.22);
}

/* The card: bone, 20 px radius, 20 px padding, 16 px between its bands. */
.share-card {
  width: min(100%, 342px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: 20px;
  background: var(--bone);
  color: var(--ink);
  text-align: left;
  font-size: 16px;
  line-height: 22px;
}

.share-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.share-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* The sharer's photo, or their initial on sand. */
.share-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--sand);
  color: var(--ink);
  font-weight: 600;
}

.share-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9999px;
}

.share-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.share-card-logo {
  flex-shrink: 0;
  width: 64px;
  height: auto;
}

.share-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.share-lead {
  font-size: 14px;
  line-height: 20px;
  color: var(--sage);
}

.share-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

/* The wine's name wraps and never truncates. */
.share-wine {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.share-vintage {
  font-weight: 400;
  color: var(--sage);
}

.share-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
  padding-top: 1px;
}

/* The rating word in a pill: the app's VerdictChip ladder, lightest to
   darkest. The outline is the pill's own 1 px border, transparent on the
   four filled ratings, so every pill is the same size. */
.share-verdict {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.share-verdict-poor   { background: var(--bone); border-color: var(--dust); color: var(--ink); }
.share-verdict-fair   { background: var(--sand); color: var(--ink); }
.share-verdict-good   { background: var(--dust); color: var(--ink); }
.share-verdict-great  { background: var(--sage); color: var(--bone); }
.share-verdict-superb { background: var(--vine-olive); color: var(--bone); }

/* The Rare badge: a 9 px filled diamond and the word in capitals, antique
   gold, letter-spaced. */
.share-rare {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rare);
}

.share-rare svg { flex-shrink: 0; }

.share-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.share-place-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
}

.share-at {
  flex-shrink: 0;
  color: var(--sage);
}

/* The place as a pill: sand-warm, a 14 px map pin in vine-olive, the name
   in semibold ink, 28 px tall; a long name truncates inside it. */
.share-place {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  height: 28px;
  padding: 0 10px;
  border-radius: 9999px;
  background: var(--sand-warm);
  color: var(--ink);
  font-weight: 600;
}

.share-pin {
  flex-shrink: 0;
  color: var(--vine-olive);
}

.share-place-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Read out, not shown (the place's neighbourhood). */
.share-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The colour and the date, at the right of the card's last line. */
.share-meta {
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 12px;
  line-height: 16px;
  color: var(--sage);
}

/* The 7 px colour dot before the colour word, its centre half a capital
   above the baseline (the app's WineColorDot on the cap line). */
.share-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 9999px;
  transform: translateY(calc(3.5px - 0.329em));
}

.share-dot-red    { background: var(--wine-red); }
.share-dot-white  { background: var(--wine-white); }
.share-dot-rose   { background: var(--wine-rose); }
.share-dot-orange { background: var(--wine-orange); }

/* The scan card: the venue under "My top picks at", then up to three rows. */
.share-venue {
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.share-picks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.share-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
}

.share-pick-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.share-pick-producer-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--sage);
}

.share-pick-producer {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-pick-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* The match percent: an outlined bordeaux pill, the number alone. */
.share-match {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 2px 10px;
  border: 1px solid var(--bordeaux);
  border-radius: 9999px;
  background: transparent;
  color: var(--bordeaux);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.025em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}