/* 09-features.css — Onboarding, collections, settings, empty states */

/* ─── Logged-in home: pick AS headline (no card chrome) ─── */
/*
 * The pick is the page's voice. Not a hero card with amber kicker — that
 * pattern is reserved for the wine card grid. Here the headline IS the
 * wine name in display type, with a quiet eyebrow row above and a small
 * action row below.
 */

.home-pick {
  padding: var(--space-7) 0 var(--space-6);
  border-bottom: 1px solid var(--border-default);
  /* Whisper-quiet amber rake from the very top — atmospheric, not decorative.
   * 2% peak, dies by 40%; not enough to compete with the headline. */
  background: linear-gradient(180deg, rgba(212, 168, 83, 0.018) 0%, transparent 40%);
}

.home-pick__crumbs {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.home-pick__eyebrow {
  color: var(--amber-400);
}

.home-pick__crumb-sep {
  color: var(--ivory-400);
  letter-spacing: 0;
}

.home-pick__freshness {
  color: var(--ivory-400);
}

.home-pick__more {
  margin-left: auto;
  color: var(--ivory-300);
  text-decoration: none;
}

.home-pick__more:hover {
  color: var(--amber-300);
}

.home-pick__more::after {
  content: " →";
  transition: transform var(--duration-fast) var(--ease-out);
  display: inline-block;
}

.home-pick__more:hover::after {
  transform: translateX(2px);
}

.home-pick__producer {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-300);
  margin: 0 0 var(--space-3);
}

.home-pick__producer .wine-type-dot {
  width: 8px;
  height: 8px;
}

.home-pick__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-4);
  color: var(--ivory-100);
  max-width: 22ch;
}

.home-pick__title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--amber-400), var(--amber-400));
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 0 100%;
  transition: background-size var(--duration-slow) var(--ease-out);
}

.home-pick__title a:hover {
  background-size: 100% 1px;
}

/* The vintage sits ALONGSIDE the wine name the way a year sits on a label —
   smaller, italic, amber. Without the size step, the year competes with the
   name visually; physical wine labels almost always render the vintage at a
   smaller scale than the producer or cuvée name. */
.home-pick__vintage {
  color: var(--amber-400);
  font-style: italic;
  font-weight: 400;
  font-size: 0.7em;
  letter-spacing: -0.015em;
  vertical-align: 0.1em;
}

.home-pick__lede {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ivory-200);
  max-width: 62ch;
  margin: 0 0 var(--space-5);
}

.home-pick__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .home-pick { padding: var(--space-6) 0 var(--space-5); }
  .home-pick__title { font-size: clamp(2rem, 9vw, 3rem); }
}

/* ─── Doorway fallback (no pick yet, or not onboarded) ─── */

.home-doorway {
  padding: var(--space-7) 0 var(--space-6);
  border-bottom: 1px solid var(--border-default);
}

.home-doorway__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
  color: var(--ivory-100);
  max-width: 22ch;
}

.home-doorway__lead {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ivory-200);
  max-width: 60ch;
  margin: 0 0 var(--space-5);
}

.home-doorway__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ─── Asymmetric 2-up below the hero ─── */
/*
 * Wider Recently rated (1.4fr) + narrow cellar rail (1fr). The grid
 * does NOT use identical card chrome between columns — the recent
 * list has its own row treatment; the cellar rail is a slim sidebar.
 * This is the answer to the "3 identical columns" anti-pattern.
 */

.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-7);
  padding: var(--space-7) 0 var(--space-8);
}

@media (max-width: 900px) {
  .home-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding-top: var(--space-6);
  }
}

.home-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.home-section__more {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-400);
  text-decoration: none;
}

.home-section__more:hover {
  color: var(--amber-300);
}

/* Aspen WS-4: Drink-tonight home strip */

.home-drink-tonight {
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--noir-900);
}

.home-drink-tonight__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

.home-drink-tonight__item {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--noir-700);
}

.home-drink-tonight__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  color: var(--ivory-100);
  text-decoration: none;
}

.home-drink-tonight__link:hover {
  color: var(--amber-300);
}

.home-drink-tonight__producer {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory-300);
}

.home-drink-tonight__wine {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ivory-100);
}

.home-drink-tonight__meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--ivory-400);
}

.home-drink-tonight__status {
  color: var(--ivory-300);
  font-weight: 500;
}

/* Recently rated list */

.home-recent__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.home-recent__item {
  border-bottom: 1px solid var(--border-default);
}

.home-recent__item:last-child {
  border-bottom: 0;
}

.home-recent__link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  color: var(--ivory-100);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.home-recent__link:hover {
  color: var(--amber-300);
}

.home-recent__link:hover .home-recent__wine {
  color: var(--amber-300);
}

.home-recent__body {
  min-width: 0;
}

.home-recent__producer {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-400);
  margin-bottom: 4px;
}

.home-recent__producer .wine-type-dot {
  width: 7px;
  height: 7px;
}

.home-recent__wine {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ivory-100);
  transition: color var(--duration-fast) var(--ease-out);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-recent__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.home-recent__score {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--amber-400);
  line-height: 1;
}

.home-recent__score-of {
  color: var(--ivory-400);
  font-size: 0.8125rem;
  margin-left: 1px;
}

.home-recent__date {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ivory-400);
}

.home-recent__empty {
  padding: var(--space-5) 0;
  color: var(--ivory-200);
}

.home-recent__empty p {
  margin: 0 0 var(--space-2);
}

.home-recent__empty-hint {
  color: var(--ivory-300);
  font-size: 0.9375rem;
}

.home-recent__empty-hint a {
  color: var(--amber-400);
}

/* Narrow cellar rail */

.home-cellar {
  padding: var(--space-4) var(--space-5);
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  align-self: start;
}

.home-cellar__stat {
  margin: 0 0 var(--space-1);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.home-cellar__stat strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 4vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ivory-100);
}

.home-cellar__stat span {
  font-size: 0.95rem;
  color: var(--ivory-300);
}

.home-cellar__meta {
  font-size: 0.85rem;
  color: var(--ivory-400);
  margin: 0 0 var(--space-4);
}

.home-cellar__windows {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.home-cellar__window {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: var(--ivory-300);
}

.home-cellar__window strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--ivory-100);
  min-width: 1.5ch;
}

.home-cellar__window::before {
  content: "";
  align-self: center;
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--ivory-400);
}

.home-cellar__window--now::before { background: var(--sage-400); }
.home-cellar__window--past::before { background: var(--rouge-400); }
.home-cellar__window--aging::before { background: var(--amber-400); }

.home-cellar__empty {
  color: var(--ivory-300);
  margin: 0 0 var(--space-3);
}

.home-cellar__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

@media (max-width: 900px) {
  .home-cellar__actions { flex-direction: row; flex-wrap: wrap; }
}

.mb-6 { margin-bottom: var(--space-6); }

/* ─── Anonymous-home short intro (replaces the 01/02/03 feature grid) ─── */

.anon-intro {
  max-width: 56ch;
  padding: var(--space-6) 0 var(--space-7);
}

.anon-intro__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

/* ─── Settings (account, profile, delete) — bordered panels, not Bootstrap cards ─── */

/* Settings page constrains itself with token-driven max-width rather than the
   Bootstrap col-lg-9/col-xl-8 ladder. Single column, centered. */
.settings-shell {
  max-width: 56rem;
  margin: 0 auto;
}

.settings-section {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border-default);
}

.settings-section:last-child {
  border-bottom: 0;
}

.settings-section > .eyebrow {
  margin-bottom: var(--space-4);
}

.settings-section--danger > .eyebrow {
  color: var(--rouge-300);
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  flex-wrap: wrap;
}

.settings-row + .settings-row {
  border-top: 1px solid var(--border-default);
}

.settings-row__body {
  flex: 1 1 240px;
  min-width: 0;
}

.settings-row__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ivory-100);
  margin: 0 0 0.25rem;
}

.settings-row__meta {
  color: var(--ivory-300);
  font-size: 0.9375rem;
  margin: 0;
}

.settings-row__time {
  color: var(--ivory-400);
  font-size: 0.8125rem;
  font-style: italic;
  margin: 0.35rem 0 0;
}

.settings-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  background: rgba(212, 168, 83, 0.08);
  border: 1px solid rgba(212, 168, 83, 0.22);
  border-radius: var(--radius-md);
  color: var(--ivory-100);
  flex-wrap: wrap;
}

.eyebrow--rouge {
  color: var(--rouge-300);
}

.eyebrow--amber {
  color: var(--amber-400);
}

.settings-consequences {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
}

.settings-consequences li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.25rem;
  color: var(--ivory-200);
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--border-default);
}

.settings-consequences li:last-child {
  border-bottom: 0;
}

.settings-consequences li::before {
  content: "·";
  position: absolute;
  left: 0.4rem;
  top: 0.35rem;
  color: var(--rouge-300);
  font-weight: 700;
}

.btn-outline-rouge {
  background: transparent;
  color: var(--rouge-300);
  border: 1px solid rgba(139, 41, 66, 0.45);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
}

.btn-outline-rouge:hover {
  background: rgba(139, 41, 66, 0.12);
  color: var(--ivory-100);
  border-color: var(--rouge-400);
}

.btn-rouge {
  background: var(--rouge-500);
  color: var(--ivory-100);
  border: 1px solid var(--rouge-500);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-pill);
}

.btn-rouge:hover {
  background: var(--rouge-400);
  color: var(--ivory-100);
}

/* ─── Onboarding CTA ─── */

.onboarding-cta {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(212, 168, 83, 0.18);
  border-radius: var(--radius-lg);
}

.onboarding-cta h5 {
  color: var(--ivory-100);
}

.onboarding-cta p {
  color: var(--ivory-300);
}

/* ─── Onboarding steps list (editorial counter) ─── */

.onboarding-steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0;
}

.onboarding-steps li {
  counter-increment: step;
  position: relative;
  padding: var(--space-3) 0 var(--space-3) var(--space-7);
  color: var(--ivory-200);
  font-size: 1.0625rem;
  border-bottom: 1px solid var(--border-default);
}

.onboarding-steps li:last-child {
  border-bottom: 0;
}

.onboarding-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--space-3);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--amber-400);
  letter-spacing: -0.01em;
}

/* ─── Onboarding Step Indicator ─── */

/* Step indicator — animated */
.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: var(--space-5);
}

.step-indicator__step {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all var(--duration-normal) var(--ease-out);
}

.step-indicator__step--pending {
  border: 2px solid rgba(255, 255, 255, 0.12);
  color: var(--ivory-400);
  background: transparent;
}

.step-indicator__step--active {
  width: 36px;
  height: 36px;
  border: 2px solid var(--amber-400);
  color: var(--amber-400);
  background: rgba(212, 168, 83, 0.12);
  box-shadow: 0 0 0 4px rgba(212, 168, 83, 0.08);
}

.step-indicator__step--completed {
  border: 2px solid var(--amber-400);
  background: rgba(212, 168, 83, 0.15);
  color: var(--amber-400);
}

.step-indicator__connector {
  width: 60px;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  transition: background var(--duration-slow) var(--ease-out);
}

.step-indicator__connector--completed {
  background: var(--amber-400);
}

.step-indicator__labels {
  display: flex;
  justify-content: center;
  gap: 52px;
  margin-top: var(--space-2);
}

.step-indicator__label {
  font-size: 0.625rem;
  color: var(--ivory-400);
}

.step-indicator__label--active {
  color: var(--amber-400);
  font-weight: 600;
}

/* ─── Wine Selection Card (Onboarding) ─── */

.wine-card {
  cursor: pointer;
  transition: all var(--duration-normal) ease;
  border: 2px solid transparent;
  background: var(--noir-900);
  position: relative;
}

.wine-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-accent-hover);
  box-shadow: var(--shadow-glow);
}

.wine-card.selected {
  border-color: var(--amber-400);
  background-color: rgba(212, 168, 83, 0.06);
}

.wine-card .selected-text {
  display: none;
}

.wine-card.selected .selected-text {
  display: inline;
  color: var(--amber-400);
  font-weight: bold;
}

.wine-card.selected .unselected-text {
  display: none;
}

.wine-type-badge {
  font-size: 0.7rem;
}

/* Wine type selection cards */
.wine-type-card {
  position: relative;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
}

.wine-type-card:hover {
  border-color: var(--border-medium);
  background: rgba(255, 255, 255, 0.02);
}

.wine-type-card--selected {
  border: 2px solid;
  border-color: var(--selection-color, rgba(212, 168, 83, 0.4));
  background: var(--selection-bg, rgba(212, 168, 83, 0.08));
}

.wine-type-card__check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--selection-bg, rgba(212, 168, 83, 0.2));
}

.wine-type-card--selected .wine-type-card__check {
  display: flex;
}

/* Wine suggestion card selection (wine grid) */
.wine-selection-card {
  position: relative;
  transition: all var(--duration-normal) var(--ease-out);
}

.wine-selection-card--selected {
  border: 2px solid rgba(212, 168, 83, 0.4);
  background: rgba(212, 168, 83, 0.06);
  transform: scale(1.02);
}

.wine-selection-card__check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(212, 168, 83, 0.2);
}

.wine-selection-card--selected .wine-selection-card__check {
  display: flex;
}

/* Flavor level badges (onboarding sliders) */
.flavor-level-low {
  background: var(--noir-700);
  color: var(--ivory-300);
}

.flavor-level-mid {
  background: rgba(212, 168, 83, 0.15);
  color: var(--amber-400);
}

.flavor-level-high {
  background: rgba(74, 138, 114, 0.2);
  color: var(--sage-400);
}

.wine-type-red { background-color: rgba(139, 41, 66, 0.2); color: #d96c8a; }
.wine-type-white { background-color: rgba(212, 184, 92, 0.15); color: #d4b85c; }
.wine-type-rose { background-color: rgba(217, 108, 123, 0.15); color: #d96c7b; }
.wine-type-sparkling { background-color: rgba(79, 126, 163, 0.15); color: #6a9fc4; }
.wine-type-dessert { background-color: rgba(192, 138, 79, 0.15); color: #d4a853; }
.wine-type-fortified { background-color: rgba(122, 82, 48, 0.2); color: #b08050; }

/* ─── Danger Zone (Settings) ─── */

.danger-zone {
  border-left: 3px solid var(--rouge-500);
}

.text-danger-zone {
  color: var(--rouge-300);
}

/* ─── Empty States ─── */

/* Empty states — double ring icon */
.empty-state {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}

.empty-state--compact {
  padding: var(--space-4) var(--space-3);
}

.empty-state__icon-container {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto var(--space-4);
}

.empty-state__icon-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 168, 83, 0.1) 0%, transparent 70%);
}

.empty-state__icon-ring {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: rgba(212, 168, 83, 0.06);
  border: 1px solid rgba(212, 168, 83, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-state__icon-ring .icon {
  width: 28px;
  height: 28px;
  color: var(--amber-400);
}

.empty-state__title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ivory-100);
  margin-bottom: var(--space-1);
}

.empty-state__message {
  font-size: 0.85rem;
  color: var(--ivory-200);
  max-width: 240px;
  margin: 0 auto var(--space-4);
  line-height: 1.5;
}

.empty-state__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}

.empty-state--compact .empty-state__icon-container {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-3);
}

.empty-state--compact .empty-state__icon-glow {
  display: none;
}

.country-heading {
  font-size: 1.75rem;
}

.auth-title {
  font-family: var(--font-display);
}

.badge-check {
  background-color: var(--sage-500);
}

.settings-danger-title {
  color: #d96c7b;
}

/* ─── Auth Pages — Branded Card ─── */

/* Auth pages — branded card */
.auth-card {
  max-width: 400px;
  margin: var(--space-6) auto;
  padding: var(--space-6) var(--space-5);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(var(--glass-blur));
}

.auth-card__brand {
  text-align: center;
  margin-bottom: var(--space-5);
}

.auth-card__brand-mark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--ivory-100);
  letter-spacing: -0.02em;
}

.auth-card__brand-mark em {
  color: var(--amber-400);
  font-style: italic;
}

/* This is the auth pages' <h1> (login, signup) — the only real title those
   pages show, and they had no heading at all before. It stays typeset as the
   quiet subtitle it looks like, so the element carries the document outline
   without the display-font/size/weight a bare h1 would inherit. */
.auth-card__brand-subtitle {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: inherit;
  color: var(--ivory-400);
  margin-top: var(--space-1);
  margin-bottom: 1rem;
}

.auth-card__footer {
  text-align: center;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-default);
}

.auth-card__footer p {
  font-size: 0.75rem;
  color: var(--ivory-400);
  line-height: 1.5;
}

.auth-card__toggle {
  text-align: center;
  margin-top: var(--space-4);
  font-size: 0.85rem;
  color: var(--ivory-400);
}

.auth-card__toggle a {
  color: var(--amber-400);
}

.auth-card .form-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-1);
}

.auth-card .form-label-row .forgot-link {
  font-size: 0.75rem;
  color: var(--amber-400);
}

.form-label__optional {
  color: var(--ivory-400);
  font-weight: 400;
  font-size: 0.8125rem;
  margin-left: 0.25rem;
}

/* Matches .form-text's 0.75rem (05-components.css) so the password rules
   read as subordinate to the Password label, not the same size as it. */
.password-rules {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
  font-size: 0.75rem;
  color: var(--ivory-300);
}

.password-rules li {
  padding: 2px 0 2px 18px;
  position: relative;
}

.password-rules li::before {
  content: "·";
  position: absolute;
  left: 6px;
  top: 0;
  color: var(--amber-400);
  font-weight: 700;
}

/* Django's password1 help_text renders its own <ul><li> markup (safe-
   rendered verbatim from the live validators, see signup.html); the reset's
   `ul, ol` rule reintroduces default bullets/indent one level down, so the
   same treatment is re-declared for that nested list. */
.password-rules ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.auth-card__details {
  font-size: 0.875rem;
}

.auth-card__details summary {
  cursor: pointer;
  color: var(--ivory-300);
  padding: var(--space-2) 0;
  user-select: none;
}

.auth-card__details summary:hover {
  color: var(--amber-300);
}

.auth-card__details[open] summary {
  color: var(--ivory-100);
  margin-bottom: var(--space-2);
}

/* ─── Cellar editorial summary (replaces stat tiles) ─── */

.cellar-summary {
  margin: var(--space-5) 0 var(--space-3);
  font-size: 1.0625rem;
  color: var(--ivory-300);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
}

.cellar-summary strong {
  color: var(--ivory-100);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin-right: 0.35rem;
}

.cellar-summary__sep {
  color: var(--ivory-400);
  font-size: 1.25rem;
}

.cellar-type-chips {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cellar-type-chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  color: var(--ivory-200);
  background: rgba(255, 255, 255, 0.02);
}

.cellar-type-chips__count {
  color: var(--ivory-400);
  font-size: 0.75rem;
  margin-left: 0.25rem;
}

.cellar-recent {
  margin-bottom: var(--space-6);
}

/* ── Cellar utility nav ────────────────────────────────────────────
   Right-side cluster on the collection dashboard header. Replaces the
   "three btn-sm outline pills in a row" pattern. Locations and History
   are wayfinding (text nav links with amber-on-hover underline); only
   the primary action ("Add a bottle") keeps the amber pill — and only
   when there are already bottles in the rack. DESIGN.md §2 One Voice
   Rule: ≤1 amber element per surface cluster.
   --------------------------------------------------------------- */

.cellar-utility {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.cellar-utility__link {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--ivory-200);
  text-decoration: none;
  padding: 0.35rem 0.25rem;
  border-bottom: 1px solid transparent;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.cellar-utility__link:hover,
.cellar-utility__link:focus-visible {
  color: var(--amber-300);
  border-bottom-color: var(--amber-400);
}

.cellar-utility__link:focus-visible {
  outline: 2px solid var(--amber-400);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ── Doorway list ──────────────────────────────────────────────────
   Shared "borderless row list" primitive used by the collection
   dashboard's "Recently added" strip. Cousin of .home-drink-tonight
   (above), but optimized for a vertical list of 3–5 rows rather than
   a grid of cards. Editorial — no card chrome, no bullets, no
   Bootstrap pills. Producer kicker (uppercase eyebrow) over Playfair
   wine name; right-aligned metadata; subtle amber on hover.
   --------------------------------------------------------------- */

.doorway-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

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

.doorway-list > li {
  border-bottom: 1px solid var(--border-subtle);
}

.doorway-list > li:last-child {
  border-bottom: 0;
}

.doorway-list__link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.25rem var(--space-4);
  padding: var(--space-3) 0;
  color: var(--ivory-100);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.doorway-list__producer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory-300);
}

.doorway-list__wine {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ivory-100);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.doorway-list__meta {
  font-size: 0.8125rem;
  color: var(--ivory-400);
  justify-self: end;
  white-space: nowrap;
}

.doorway-list__link:hover {
  color: var(--amber-300);
}

.doorway-list__link:hover .doorway-list__wine {
  color: var(--amber-300);
  border-bottom-color: var(--amber-400);
}

.doorway-list__link:hover .doorway-list__meta {
  color: var(--ivory-200);
}

.doorway-list__link:focus-visible {
  outline: 2px solid var(--amber-400);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ─── Legacy collection stats (kept in case other surfaces reference) ─── */

.collection-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.collection-stat {
  padding: 12px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  text-align: center;
}

.collection-stat__icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-2);
}

.collection-stat__icon--rouge { background: rgba(139, 41, 66, 0.1); color: var(--rouge-300); }
.collection-stat__icon--amber { background: rgba(212, 168, 83, 0.1); color: var(--amber-400); }
.collection-stat__icon--sage { background: rgba(59, 109, 92, 0.1); color: var(--sage-400); }
.collection-stat__icon--blue { background: rgba(79, 126, 163, 0.1); color: #4f7ea3; }

.collection-stat__number {
  font-size: 1.25rem;
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--ivory-100);
}

.collection-stat__label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ivory-400);
}

@media (max-width: 576px) {
  .collection-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   Dual-axis rating card (Enjoyment + Value + Price)
   Rendered on wine detail; replaces the legacy single-axis star row.
   ============================================================ */

.dual-axis-rating {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

.dual-axis-rating__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 2.25rem;
}

.dual-axis-rating__label {
  flex: 0 0 5.5rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--ivory-300);
}

/* The "+ rate value" affordance — sits where the value stars will live.
   Dashed ghost button so it reads as "expandable empty state" not CTA. */
.dual-axis-rating__add-value {
  appearance: none;
  background: transparent;
  border: 1px dashed var(--border-medium);
  color: var(--ivory-400);
  font-family: var(--font-body);
  font-size: 0.875rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}

.dual-axis-rating__add-value:hover,
.dual-axis-rating__add-value:focus-visible {
  color: var(--amber-400);
  border-color: var(--border-accent);
}

/* Price chip — same row-aligned ghost treatment for the empty state,
   solid pill for the populated state. */
.price-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--ivory-200);
  background: var(--noir-800);
  border: 1px solid var(--border-default);
}

.price-chip button {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--ivory-400);
  cursor: pointer;
  padding: 0;
  margin-left: var(--space-2);
  transition: color 120ms ease;
}

.price-chip button:hover {
  color: var(--amber-400);
}

.price-chip--empty {
  background: transparent;
  border: 1px dashed var(--border-medium);
  color: var(--ivory-400);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}

.price-chip--empty:hover,
.price-chip--empty:focus-visible {
  color: var(--amber-400);
  border-color: var(--border-accent);
}

.price-chip__form {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.price-chip__form input[type="number"],
.price-chip__form input[type="text"] {
  background: var(--noir-700);
  border: 1px solid var(--border-interactive);
  color: var(--ivory-100);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}

.price-chip__form input[type="number"] {
  width: 6rem;
}

.price-chip__form input[type="text"] {
  width: 4rem;
}

.price-chip__form button {
  appearance: none;
  background: var(--btn-primary-gradient);
  border: none;
  color: var(--noir-900);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

/* Mobile: stack rows, label above stars */
@media (max-width: 576px) {
  .dual-axis-rating__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .dual-axis-rating__label {
    flex: none;
  }
}

/* ============================================================
   Rating vocabulary cards (Settings → Rating Style, Onboarding step 1)
   ============================================================ */

.vocabulary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  margin: var(--space-6) 0;
}

.vocabulary-card {
  display: block;
  padding: var(--space-5);
  background: var(--noir-800);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease;
}

.vocabulary-card:hover {
  border-color: var(--border-medium);
  transform: translateY(-1px);
}

.vocabulary-card--selected {
  border-color: var(--amber-400);
  box-shadow: var(--input-focus-ring);
}

.vocabulary-card input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.vocabulary-card h2 {
  margin: 0 0 var(--space-2) 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ivory-100);
}

.vocabulary-card p {
  margin: 0 0 var(--space-4) 0;
  color: var(--ivory-300);
  font-size: 0.875rem;
}

.vocabulary-card__options {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.vocabulary-card__options li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ivory-200);
  font-size: 0.9375rem;
}

.vocabulary-card__options li .icon {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
}

/* Per-position color tint (1 = poor → 5 = exceptional).
   Maps the 1-5 rating scale to a heat ramp: rouge → ivory-muted →
   ivory-neutral → sage → amber. Visual reinforcement of the option's
   value position; the icon glyph itself stays semantic (label-driven). */
.vocabulary-card__options li:nth-child(1) .icon {
  color: var(--rouge-300);
}
.vocabulary-card__options li:nth-child(2) .icon {
  color: var(--ivory-400);
}
.vocabulary-card__options li:nth-child(3) .icon {
  color: var(--ivory-300);
}
.vocabulary-card__options li:nth-child(4) .icon {
  color: var(--sage-400);
}
.vocabulary-card__options li:nth-child(5) .icon {
  color: var(--amber-400);
}

/* ============================================================
   Cellar window foresight lane (Picks page)  —  S-1
   ============================================================ */

.cellar-window-lane {
  margin: var(--space-6) 0 var(--space-7);
  padding: var(--space-5);
  background: var(--noir-800);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
}

.cellar-window-lane__header {
  margin-bottom: var(--space-5);
}

.cellar-window-lane__headline {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: var(--space-1) 0 var(--space-2);
  color: var(--ivory-100);
}

.cellar-window-lane__sub {
  font-size: 0.875rem;
  color: var(--ivory-300);
  margin: 0;
}

.cellar-window-lane__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.cellar-window-card {
  background: var(--noir-700);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cellar-window-card__name {
  font-family: var(--font-display);
  font-size: 1rem;
  margin: 0;
  color: var(--ivory-100);
}

.cellar-window-card__producer {
  font-size: 0.875rem;
  color: var(--ivory-300);
  margin: 0;
}

.cellar-window-card__status {
  font-size: 0.875rem;
  color: var(--amber-400);
  margin: 0;
  font-weight: 500;
}

.cellar-window-card__window,
.cellar-window-card__quantity {
  font-size: 0.8125rem;
  color: var(--ivory-400);
  margin: 0;
}

/* ============================================================
   Occasion chip strip (Picks page)  —  S-3
   ============================================================ */

.occasion-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  background: var(--noir-800);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}

.occasion-chips__label {
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: var(--ivory-200);
  font-weight: 500;
  margin-right: var(--space-2);
}

.occasion-chip {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--ivory-200);
  font-size: 0.875rem;
  text-decoration: none;
  transition: all 0.15s ease;
}

.occasion-chip:hover,
.occasion-chip:focus {
  border-color: var(--amber-400);
  color: var(--amber-400);
  text-decoration: none;
}

.occasion-chip--active {
  background: var(--amber-400);
  border-color: var(--amber-400);
  color: var(--noir-900);
  font-weight: 500;
}

.occasion-chip--active:hover,
.occasion-chip--active:focus {
  background: var(--amber-400);
  color: var(--noir-900);
}

/* ============================================================
   Favorite revisit lane (Picks page)  —  S-4
   ============================================================ */

.favorite-revisit-lane {
  margin: var(--space-6) 0 var(--space-7);
  padding: var(--space-5);
  background: var(--noir-800);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
}

.favorite-revisit-lane__header {
  margin-bottom: var(--space-5);
}

.favorite-revisit-lane__headline {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: var(--space-1) 0 var(--space-2);
  color: var(--ivory-100);
}

.favorite-revisit-lane__sub {
  font-size: 0.875rem;
  color: var(--ivory-300);
  margin: 0;
}

.favorite-revisit-lane__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.favorite-revisit-card {
  background: var(--noir-700);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.favorite-revisit-card__name {
  font-family: var(--font-display);
  font-size: 1rem;
  margin: 0;
  color: var(--ivory-100);
}

.favorite-revisit-card__producer {
  font-size: 0.875rem;
  color: var(--ivory-300);
  margin: 0;
}

.favorite-revisit-card__rating {
  font-size: 0.875rem;
  color: var(--amber-400);
  margin: 0;
  font-weight: 500;
}

.favorite-revisit-card__window,
.favorite-revisit-card__quantity {
  font-size: 0.8125rem;
  color: var(--ivory-400);
  margin: 0;
}

/* ============================================================
   Calibrated-confidence eyebrow on Picks cards  —  S-2
   ============================================================ */

.confidence-eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.confidence-eyebrow--confident {
  color: var(--noir-900);
  background: var(--amber-400);
}

.confidence-eyebrow--worth_trying {
  color: var(--ivory-200);
  background: var(--noir-700);
  border: 1px solid var(--border-medium);
}

.confidence-eyebrow--experimental {
  color: var(--sage-400);
  background: transparent;
  border: 1px dashed var(--sage-500);
}