/*
 * Reusable components: headers, cards, rows, buttons, chips, inputs, meters,
 * the tab bar and the toast. Screens compose these rather than restyling them.
 */

/* ---- Screen headers ------------------------------------------------------ */

.tophead {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-7) var(--space-5);
}

.tophead__text { flex: 1; min-width: 0; }
.tophead__eyebrow { margin-bottom: var(--space-2); }

.back-btn {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-left: -6px;
  border-radius: var(--radius-pill);
  color: var(--ink);
  transition: background var(--dur-quick) var(--ease);
}
.back-btn:hover { background: var(--hairline); }

/* ---- Cards --------------------------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}

.card--flush { padding: 0; overflow: hidden; }
.card--row { border-radius: var(--radius-row); }
.card--feature {
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-feature);
  padding: var(--space-6);
}

/* The wine-accent hero card: "Find your next wine". */
.card--hero {
  background: var(--wine);
  border-color: transparent;
  color: #fff;
  border-radius: var(--radius-hero);
  box-shadow: var(--wine-hero-shadow);
  padding: var(--space-6);
}
.card--hero .caption,
.card--hero .eyebrow,
.card--hero .muted { color: rgba(255, 255, 255, .8); }

/* The dark card: "Join a tasting". */
.card--dark {
  background: var(--ink-charcoal);
  border-color: transparent;
  color: #fff;
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-raised);
  padding: var(--space-6);
}
.card--dark .caption, .card--dark .muted { color: rgba(255, 255, 255, .7); }

button.card { display: block; width: 100%; text-align: left; }

.card-stack { display: flex; flex-direction: column; gap: var(--space-4); }

/* ---- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 600;
  transition: transform var(--dur-quick) var(--ease), opacity var(--dur-quick) var(--ease);
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn--primary {
  background: var(--ink-charcoal);
  color: #fff;
  box-shadow: var(--shadow-cta);
}
.btn--wine { background: var(--wine); color: #fff; box-shadow: var(--wine-hero-shadow); }
.btn--ghost { background: var(--card); color: var(--ink); border: 1px solid var(--hairline-strong); }
.btn--quiet { background: none; color: var(--text-secondary); font-weight: 500; width: auto; padding: var(--space-2); }
.btn--sm { padding: var(--space-3) var(--space-5); font-size: var(--size-body-sm); width: auto; }

/* ---- Monogram tile ------------------------------------------------------- */

/*
 * The fallback for every wine image. Bottle photography is optional in this app --
 * where a photo is missing, a category-coloured tile with the wine's initial stands
 * in, so a wine with no assets still reads as that wine.
 */
.mono-tile {
  display: grid;
  place-items: center;
  flex: none;
  background: var(--tile-color, var(--wine));
  color: var(--tile-on, #fff);
  font-family: var(--font-display);
  font-weight: 500;
  border-radius: 10px;
  width: 50px; height: 64px;
  font-size: 22px;
}
.mono-tile--sm { width: 42px; height: 42px; border-radius: 9px; font-size: 17px; }
.mono-tile--code {
  font-family: var(--font-mono);
  font-size: var(--size-caption);
  letter-spacing: var(--tracking-mono);
  width: 46px; height: 46px;
  border-radius: 12px;
}

/* Overlapping circles used by the home hero teaser. */
.tile-cluster { display: flex; align-items: center; }
.tile-cluster > * { margin-left: -9px; }
.tile-cluster > *:first-child { margin-left: 0; }

.tile-circle {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--tile-color, var(--wine));
  color: var(--tile-on, #fff);
  border: 2px solid rgba(255, 255, 255, .55);
  font-family: var(--font-display);
  font-size: 13px;
}

/* ---- Wine rows ----------------------------------------------------------- */

.wine-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-row);
  box-shadow: var(--shadow-card);
  text-align: left;
  transition: transform var(--dur-quick) var(--ease);
}
.wine-row:active { transform: scale(.99); }

.wine-row__body { flex: 1; min-width: 0; }
.wine-row__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--size-eyebrow-sm);
  letter-spacing: var(--tracking-mono);
  color: var(--text-muted);
}
.wine-row__name {
  font-family: var(--font-display);
  font-size: var(--size-body);
  font-weight: 500;
  margin-top: 1px;
}
.wine-row__reason {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* The match percentage. Presentation of a computed similarity — never a rating. */
.match {
  flex: none;
  text-align: right;
  line-height: 1.1;
}
.match__value {
  font-family: var(--font-mono);
  font-size: var(--size-body);
  color: var(--wine);
}
.match__label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-muted);
}

.chevron { flex: none; color: var(--text-muted); }

.row-list { display: flex; flex-direction: column; gap: var(--space-2); }

/* ---- Chips --------------------------------------------------------------- */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Horizontal scroller for dish chips — never widens the page. */
.chip-row--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.chip-row--scroll::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline-strong);
  background: var(--card);
  font-size: var(--size-caption);
  color: var(--text-secondary);
  white-space: nowrap;
  transition: background var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease);
}
.chip[aria-pressed='true'] {
  background: var(--wine);
  border-color: var(--wine);
  color: #fff;
}
.chip--static { background: var(--wine-soft); border-color: transparent; color: var(--wine); }

/* ---- Inputs -------------------------------------------------------------- */

.field { display: block; margin-bottom: var(--space-4); }
.field__label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--size-eyebrow-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.input {
  width: 100%;
  padding: var(--space-4);
  background: var(--card);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  font-size: 16px; /* below 16px iOS zooms the page on focus */
  transition: border-color var(--dur-quick) var(--ease);
}
.input::placeholder { color: var(--text-muted); }
.input:focus { border-color: var(--wine); outline: none; }

.input-clear {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ---- Meters and bars ----------------------------------------------------- */

.meter {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--hairline);
  overflow: hidden;
}
.meter__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--wine);
  transition: width var(--dur-rise) var(--ease);
}

/* ---- Section headers ----------------------------------------------------- */

.section { margin-block: var(--space-7); }
.section__head { margin-bottom: var(--space-4); }
.section__title { font-family: var(--font-display); font-size: var(--size-subheading); font-weight: 500; }

.divider { height: 1px; background: var(--hairline); border: 0; margin-block: var(--space-6); }

/* ---- Empty and status states -------------------------------------------- */

.empty {
  padding: var(--space-7) var(--space-5);
  text-align: center;
  color: var(--text-secondary);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--size-eyebrow-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}
.status-chip--good { background: var(--good-soft); color: var(--good); }
.status-chip--wine { background: var(--wine-soft); color: var(--wine); }
.status-chip--amber { background: rgba(176, 123, 52, .12); color: var(--amber); }
.status-chip--quiet { background: var(--hairline); color: var(--text-secondary); }

.pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--wine);
  animation: pulseRing 2s infinite;
}

.spinner {
  width: 22px; height: 22px;
  border: 2px solid var(--hairline-strong);
  border-top-color: var(--wine);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

/* ---- Tab bar ------------------------------------------------------------- */

.tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  width: 100%;
  max-width: var(--app-max-width);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(247, 244, 239, .88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--hairline);
}

.tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding-block: var(--space-2) var(--space-3);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  transition: color var(--dur-quick) var(--ease);
}
.tabbar__item[aria-current='page'] { color: var(--wine); }
/* ADD is always wine-coloured, active or not — it is the primary action. */
.tabbar__item--accent { color: var(--wine); }

/* ---- Toast --------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-height) + var(--space-5) + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  transform: translate(-50%, 16px);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--ink-charcoal);
  color: #fff;
  font-size: var(--size-body-sm);
  box-shadow: var(--shadow-raised);
  opacity: 0;
  pointer-events: none;
}
.toast[data-visible='true'] {
  animation: toastIn var(--dur-quick) var(--ease) forwards;
  pointer-events: auto;
}

/* ---- Utilities ----------------------------------------------------------- */

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.row--between { justify-content: space-between; }
.row--gap { gap: var(--space-3); }
.grow { flex: 1; min-width: 0; }
.center { text-align: center; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }