/* Theme override: Vinsmak palette and visual tuning. */
:root {
  /* Brand */
  --color-wine: #5A1520;
  --color-wine-dark: #2B0B10;
  --color-wine-red: #8F1D2C;

  /* Mediterranean warmth */
  --color-cream: #FFF4DF;
  --color-sand: #EACB9A;
  --color-terracotta: #C96A3A;
  --color-sun: #F6B23C;
  /* Sol-ramp (ljus → mörk) — för nivåer/mognad: prenumerationsnivåer, betyg,
     dryckesfönster. "Solen" som går från ljusare till mörkare. */
  --sun-100: #FCE7B4;
  --sun-300: #F6B23C;
  --sun-500: #D98A1E;
  --sun-700: #A85F12;

  /* Nature */
  --color-olive: #6F7A2D;
  --color-leaf: #3F5F2A;
  --color-match: #6E9020;
  --color-sea: #6FAFC1;
  --color-sky: #CDE6E8;

  /* Neutrals */
  --color-ink: #1E1715;
  --color-brown: #5C3828;
  --color-muted: #8B7465;
  --color-white: #FFFFFF;

  /* Radius */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-soft: 0 8px 24px rgba(90, 21, 32, 0.06);
  --shadow-card: 0 12px 32px rgba(201, 106, 58, 0.08);
  --shadow-glow: 0 0 40px rgba(246, 178, 60, 0.15);

  /* Typography */
  --font-display: "Fraunces", "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", "Nunito Sans", system-ui, sans-serif;
  --font-script: "Pacifico", "Caveat", cursive;

  /* App aliases (legacy selector compatibility) */
  --bg: var(--color-cream);
  --surface: rgba(255, 255, 255, 0.92);
  --surface-soft: rgba(255, 250, 242, 0.95);
  --line: rgba(90, 21, 32, 0.16);
  --text: var(--color-ink);
  --muted: var(--color-muted);
  --brand: var(--color-wine-red);
  --brand-soft: rgba(90, 21, 32, 0.12);
  --accent: var(--color-terracotta);
  --accent-deep: var(--color-wine-dark);
  /* Semantiska accent-roller (sol/natur/jord) — använd rollen, inte hex:et. */
  --accent-sun: var(--color-sun);          /* solen: energi, knappar, pills, highlights */
  --accent-nature: var(--color-olive);     /* naturen: taggar, färska/redo-tillstånd */
  --accent-earth: var(--color-terracotta); /* jorden: sekundära ytor, struktur, ramar */
  --success: var(--color-leaf);
}

html,
body {
  color: var(--color-ink);
  font-family: var(--font-body);
  background:
    radial-gradient(circle at 15% 10%, rgba(201, 106, 58, 0.14) 0%, transparent 30%),
    radial-gradient(circle at 86% 12%, rgba(111, 122, 45, 0.1) 0%, transparent 26%),
    linear-gradient(180deg, #fff7e8 0%, #fff0d2 55%, #f3d19c 100%),
    var(--color-cream);
}

/* Subtle organic noise */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 244, 223, 0.4), transparent 60%),
    url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.04"/%3E%3C/svg%3E');
  mix-blend-mode: multiply;
  z-index: 9999;
}

.mobile-header {
  /* Ogenomskinlig så skrollande innehåll inte syns igenom den fasta headern.
     Färgen matchar sidans varma topp (#fff7e8). */
  background: linear-gradient(180deg, #fff7e9, #fff3df);
  border-bottom: 1px solid rgba(90, 21, 32, 0.08);
  box-shadow: 0 6px 16px rgba(90, 21, 32, 0.06);
}

.mobile-brand-circle {
  background: var(--color-white);
  border: 1px solid rgba(90, 21, 32, 0.16);
  box-shadow: var(--shadow-soft);
}

.session-pill {
  border-color: rgba(90, 21, 32, 0.26);
  background: rgba(255, 252, 246, 0.9);
  color: var(--color-brown);
  box-shadow: var(--shadow-soft);
}

.session-pill:focus-visible,
.session-pill:hover {
  border-color: rgba(90, 21, 32, 0.45);
  color: var(--color-wine);
}

.panel,
.mobile-result-card,
.mobile-source-list li,
.mobile-cellar-card-item,
.profile-details > div,
.list-shell li,
.mobile-pairing-dish-card {
  border-radius: var(--radius-md);
  border: 1px solid rgba(90, 21, 32, 0.14);
  background: rgba(255, 254, 250, 0.96);
  box-shadow: var(--shadow-card);
}

.panel h2,
.mobile-overlay-header h2,
.list-title,
.mobile-cellar-card-name,
.mobile-result-title,
.mobile-pairing-selected-title{
  font-family: var(--font-display);
  color: var(--color-wine);
}

.panel-kicker {
  color: var(--color-terracotta);
  font-family: var(--font-body);
  font-weight: 700;
}

.panel-copy,
.list-copy,
.mobile-result-subtitle,
.mobile-cellar-card-producer,
.mobile-cellar-card-style,
.mobile-pairing-dish-meta,
.mobile-pairing-selected-copy,
.mobile-pairing-menu-item .mobile-pairing-dish-meta{
  color: var(--color-muted);
}

.field span,
.status-text,
.result-shell p {
  color: var(--color-brown);
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select,
#mobile-cellar-search-input {
  color: var(--color-ink);
  /* Fields sit on a near-white panel, so fill colour can't carry the "this is a
     field" signal — the BORDER + inset shadow do. Clear warm-brown edge + a
     visible recessed shadow make inputs read unmistakably as inputs. */
  border: 1.5px solid rgba(92, 56, 40, 0.6);
  border-radius: var(--radius-sm);
  background: #ffffff;
  box-shadow: inset 0 1px 3px rgba(43, 11, 16, 0.13);
}

input::placeholder,
textarea::placeholder,
#mobile-cellar-search-input::placeholder {
  color: var(--color-muted);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid rgba(90, 21, 32, 0.34);
  outline-offset: 2px;
}

.primary-button,
.mobile-pairing-dish-action-primary,
.mobile-scan-save-button{
  border: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(145deg, var(--color-wine), var(--color-wine-red));
  color: var(--color-white);
  font-weight: 700;
}

.ghost-button{
  border: 1px solid rgba(90, 21, 32, 0.28);
  border-radius: var(--radius-pill);
  background: rgba(255, 249, 240, 0.94);
  color: var(--color-wine);
}

.secondary-button {
  border-color: rgba(90, 21, 32, 0.35);
  background: rgba(90, 21, 32, 0.12);
  color: var(--color-wine);
}

.mobile-pairing-mode-switch,
.mobile-pairing-price-filter,
.mobile-pairing-selected-wine,
.mobile-result-fact,
.mobile-result-description,
.mobile-grape-pie-legend-item,
.mobile-taste-meter-card{
  border-color: rgba(90, 21, 32, 0.18);
  background: rgba(255, 248, 237, 0.9);
}

.mobile-pairing-mode-button{
  color: var(--color-muted);
}

.mobile-pairing-mode-button.is-active{
  border-color: rgba(90, 21, 32, 0.35);
  background: rgba(90, 21, 32, 0.12);
  color: var(--color-wine);
  box-shadow: inset 0 0 0 1px rgba(90, 21, 32, 0.08);
}

.mobile-pairing-price-dual::before {
  border-color: rgba(90, 21, 32, 0.24);
  background:
    linear-gradient(
      to right,
      rgba(90, 21, 32, 0.16) 0 var(--min-percent),
      rgba(90, 21, 32, 0.6) var(--min-percent) var(--max-percent),
      rgba(90, 21, 32, 0.16) var(--max-percent) 100%
    );
}

.mobile-pairing-price-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border: 2px solid var(--color-white);
  background: var(--color-wine-red);
}

.mobile-pairing-price-range::-moz-range-thumb {
  border: 2px solid var(--color-white);
  background: var(--color-wine-red);
}

.mobile-pairing-price-range::-ms-thumb {
  border: 2px solid var(--color-white);
  background: var(--color-wine-red);
}

.mobile-pairing-price-range.is-max::-webkit-slider-thumb,
.mobile-pairing-price-range.is-max::-moz-range-thumb {
  background: var(--color-terracotta);
}

.mobile-nav {
  border-top: 1px solid rgba(90, 21, 32, 0.2);
  background: rgba(255, 248, 236, 0.98);
  box-shadow: 0 -10px 26px rgba(43, 11, 16, 0.14);
}

.nav-item {
  color: var(--color-muted);
}

.nav-item.is-active {
  color: var(--color-wine);
  background: linear-gradient(180deg, rgba(90, 21, 32, 0.14), rgba(90, 21, 32, 0.08));
}

.mobile-overlay-backdrop,
.mobile-menu-prep-backdrop,
.auth-loading-overlay,
.mobile-toast-overlay {
  background: rgba(43, 11, 16, 0.24);
}

.mobile-overlay-panel,
.mobile-menu-prep-panel,
.mobile-toast-box {
  border: 1px solid rgba(90, 21, 32, 0.22);
  background: rgba(255, 252, 248, 0.97);
  box-shadow: var(--shadow-card);
  color: var(--color-ink);
}

.mobile-menu-prep-spinner,
.auth-loading-spinner {
  border-color: rgba(90, 21, 32, 0.24);
  border-top-color: var(--color-wine-red);
}

.mobile-auth-splash-card {
  border: 1px solid rgba(255, 255, 255, 0.36);
  background: rgba(43, 11, 16, 0.36);
  box-shadow: 0 22px 44px rgba(43, 11, 16, 0.22);
}

.mobile-auth-splash-card .field span,
.mobile-auth-splash-card .status-text {
  color: rgba(255, 247, 236, 0.95);
}

/* Rubriken på splash-kortet (t.ex. "Välj ett nytt lösenord") ärver annars den
   dämpade var(--color-muted)-tonen och försvinner mot det mörka, halvtranspa-
   renta kortet. Använd samma krämvita som fältetiketterna men något kraftigare
   så den läser som en rubrik. */
.mobile-auth-splash-card .panel-copy {
  color: rgba(255, 247, 236, 0.97);
  font-weight: 600;
}

/* Errors must read as errors on the dark splash card — the cream rule above has
   the same specificity as .status-text.is-error and loads later, so without this
   a failed login (e.g. wrong password) showed as faint cream text that was easy
   to miss. A warm coral pops on the maroon card while staying on-palette. */
.mobile-auth-splash-card .status-text.is-error {
  color: #ff9b8a;
  font-weight: 600;
}

.mobile-auth-splash-card .ghost-button {
  background: rgba(255, 250, 241, 0.2);
  border-color: rgba(255, 247, 236, 0.4);
  color: #fff8f2;
}
.mobile-cellar-pairing-pill,
.mobile-cellar-rating-badge,
.mobile-manual-lookup-input,
.mobile-scan-editor-input,
.mobile-scan-editor-textarea,
.mobile-result-fact-value-button,
.mobile-result-fact-value-input,
.mobile-scan-quantity-input{
  border-color: rgba(90, 21, 32, 0.24);
  background: rgba(255, 249, 241, 0.94);
  color: var(--color-brown);
}

/* Food match button – proper Vinsmak theme */
.mobile-cellar-food-match-trigger {
  border-color: rgba(90, 21, 32, 0.3);
  background: rgba(255, 248, 239, 0.94);
  color: var(--color-wine);
}

.mobile-cellar-food-match-trigger:hover,
.mobile-cellar-food-match-trigger:focus-visible {
  border-color: rgba(90, 21, 32, 0.52);
  background: rgba(255, 243, 230, 0.98);
}

.mobile-cellar-food-match-trigger:active {
  background: rgba(90, 21, 32, 0.1);
}

.mobile-cellar-food-match-label {
  color: var(--color-wine-red);
}

/* Larger pairing pills */
.mobile-cellar-pairing-pill {
  border-color: rgba(90, 21, 32, 0.18);
  background: rgba(255, 248, 237, 0.94);
}

.mobile-cellar-qty-badge{
  border-color: rgba(90, 21, 32, 0.28);
  background: radial-gradient(circle at 30% 30%, #b73d4f, #7c1928);
  color: var(--color-white);
  box-shadow: 0 6px 12px rgba(43, 11, 16, 0.22);
}

.mobile-cellar-rating-badge.is-rated {
  border-color: rgba(201, 106, 58, 0.55);
  background: linear-gradient(145deg, rgba(246, 178, 60, 0.28), rgba(201, 106, 58, 0.24));
  color: var(--color-wine);
}

.mobile-cellar-food-match-label,
.mobile-source-link,
.mobile-cellar-systembolaget-link,
.mobile-manual-lookup-label {
  color: var(--color-wine-red);
}

.mobile-pairing-price-range-label {
  color: var(--color-wine);
}

.mobile-pairing-fit-chip {
  color: var(--color-match);
  border-color: rgba(110, 144, 32, 0.35);
  background: rgba(110, 144, 32, 0.1);
}

.mobile-cellar-match-card-meta {
  color: var(--muted);
}

.mobile-cellar-match-card--top {
  border-color: rgba(90, 21, 32, 0.38);
  background: rgba(90, 21, 32, 0.04);
}

.mobile-cellar-match-badge {
  color: var(--color-match);
  border-color: rgba(110, 144, 32, 0.35);
  background: rgba(110, 144, 32, 0.1);
}

.mobile-cellar-match-reason-preview {
  color: var(--muted);
}

.mobile-cellar-match-reason-heading {
  color: var(--color-wine-red);
}

.mobile-cellar-match-reason {
  color: var(--muted);
}

.mobile-pairing-progress-drops span:nth-child(1) { background: var(--color-wine-red); }
.mobile-pairing-progress-drops span:nth-child(2) { background: var(--color-terracotta); }
.mobile-pairing-progress-drops span:nth-child(3) { background: var(--color-sun); }

.mobile-scan-progress-track,
.mobile-scan-progress-bar,
.mobile-taste-meter-track{
  border-color: rgba(90, 21, 32, 0.2);
}

.mobile-scan-progress-bar,
.mobile-taste-meter-fill{
  background: linear-gradient(90deg, var(--color-wine-red), var(--color-terracotta), var(--color-olive));
}

.mobile-capture-button {
  border-color: #c9a57a;
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.55), transparent 44%),
    radial-gradient(circle at 84% 78%, rgba(234, 203, 154, 0.22), transparent 36%),
    linear-gradient(165deg, rgba(255, 252, 246, 0.98) 0%, rgba(255, 246, 233, 0.98) 100%);
  color: var(--color-wine-red);
  box-shadow: 0 12px 24px rgba(43, 11, 16, 0.08);
}

.mobile-capture-shutter {
  border-color: rgba(20, 24, 30, 0.9);
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 10px 20px rgba(43, 11, 16, 0.24),
    inset 0 0 0 1px rgba(20, 24, 30, 0.22);
}

.mobile-capture-shutter-inner {
  background: linear-gradient(180deg, rgba(143, 29, 44, 0.96), rgba(90, 21, 32, 0.98));
  color: #fff6f8;
}

.capture-corner {
  border-color: rgba(143, 29, 44, 0.92);
}
/* Full-width Mediterranean Bottom Nav */
.mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  border: none;
  border-top: 1px solid rgba(201, 106, 58, 0.2);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 -4px 20px rgba(90, 21, 32, 0.05);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  z-index: 9999;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--color-muted);
  background: transparent;
  border: none;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  font-family: var(--font-body);
}

.nav-item .icon-wrapper {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  transition: background 0.3s ease, transform 0.2s ease;
  display: grid;
  place-items: center;
}

.nav-item.is-active {
  color: var(--color-wine);
  background: transparent;
}

.nav-item.is-active .icon-wrapper {
  background: rgba(143, 29, 44, 0.08);
}

.nav-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Micro-typography trim */
html,
body {
  letter-spacing: 0.002em;
  line-height: 1.45;
}

.panel h2,
.mobile-result-title,
.mobile-pairing-selected-title {
  font-size: clamp(1.28rem, 3.9vw, 1.62rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.mobile-cellar-card-name {
  font-size: clamp(1.04rem, 3.05vw, 1.24rem);
  line-height: 1.18;
  letter-spacing: -0.006em;
}

.panel-kicker {
  font-size: 0.74rem;
  letter-spacing: 0.11em;
}

.panel-copy,
.list-copy,
.mobile-result-subtitle,
.mobile-cellar-card-producer,
.mobile-cellar-card-style,
.mobile-pairing-selected-copy{
  font-size: 0.9rem;
  line-height: 1.52;
}

.field span {
  font-size: 0.79rem;
  letter-spacing: 0.02em;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select,
#mobile-cellar-search-input {
  font-size: 1rem;
}

.list-title {
  font-size: 1rem;
  line-height: 1.28;
  letter-spacing: -0.004em;
}

.primary-button,
.ghost-button,
.mobile-pairing-dish-action{
  font-size: 0.94rem;
  letter-spacing: 0.01em;
}

.ghost-button.mobile-scan-rescan-button {
  font-size: 0.56rem;
  letter-spacing: 0.04em;
}

.mobile-pairing-price-range-label {
  font-size: 0.9rem;
  font-weight: 700;
}
.mobile-auth-splash-copy {
  font-family: var(--font-script);
  font-size: 1.06rem;
  line-height: 1.15;
}

.mobile-auth-splash {
  padding: 12px 10px max(14px, env(safe-area-inset-bottom));
}

.mobile-auth-splash-card {
  gap: 6px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(43, 11, 16, 0.24);
  backdrop-filter: blur(5px);
}

.mobile-auth-splash-card .field {
  margin-top: 4px;
}

.mobile-auth-splash-card .auth-form {
  gap: 5px;
  margin-top: 0;
}

.mobile-auth-splash-card input[type="text"],
.mobile-auth-splash-card input[type="email"],
.mobile-auth-splash-card input[type="password"] {
  min-height: 36px;
  padding: 0 8px;
}

.mobile-auth-splash-card .auth-toggle-row .ghost-button,
.mobile-auth-splash-card .auth-toggle-row .primary-button {
  min-height: 36px;
  padding: 0 7px;
  font-size: 0.78rem;
}

.mobile-auth-splash-card .status-text {
  margin-top: 4px;
  margin-bottom: 0;
  min-height: 0;
}

.mobile-profile-inline-row dt {
  margin-bottom: 6px;
}

/* Luft mellan klustren (rubrik + inmatning/inställning) på de inloggade Profil-
   och Källare-flikarna. Grupperna renderas som block (sektions-växlingen sätter
   display via #mobile-profile-details[data-active-section]), så avstånden styrs
   med MARGINALER — att röra `display` här skulle bryta flik-växlingen. Avståndet
   inom ett kluster (rubrik↔fält, dt:ns 6px) är oförändrat. */
#mobile-profile-details [data-profile-group="profil"] .mobile-profile-inline-row:not(:first-child) {
  margin-top: 16px;
}
/* Källare: luft före varje källar-kluster; följa-toggeln ligger kvar tätt under
   sin källare så namn + inställning läser ihop. */
.mobile-profile-cellars .mobile-profile-inline-row:not(:first-child) {
  margin-top: 16px;
}
.mobile-profile-cellars .mobile-profile-cellar-follow {
  margin-top: 6px;
}

/* Cellars on the profile share a single container with one "Källare" heading.
   The wrapper itself is a direct child of .profile-details so it picks up the
   panel box; the inline-rows inside are not direct children, so they don't get
   their own boxes. We hide the now-empty per-row <dt>s, then stack each cellar
   row (just its cream shell) inside the wrapper. */
.mobile-profile-cellars {
  display: grid;
  gap: 8px;
}
.mobile-profile-cellars-title {
  margin: 0 0 2px;
  color: var(--color-muted, var(--muted));
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}
.mobile-profile-cellars .mobile-profile-inline-row dt {
  display: none;
}

/* Per-cellar "Vänner får följa" toggle, sits just below each owned cellar
   row inside the wrapper. Subtle row with a small checkbox + label. */
.mobile-profile-cellar-follow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px;
  font-size: 0.82rem;
  color: var(--color-muted, var(--muted));
  cursor: pointer;
  user-select: none;
}
.mobile-profile-cellar-follow input[type="checkbox"] {
  margin: 0;
  width: 16px;
  height: 16px;
}

/* "Radera källaren" — visas bara i redigeringsläget. Diskret destruktiv stil
   (vinröd) så den skiljer sig från Spara/Ändra utan att skrika. */
.mobile-profile-cellar-delete {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 7px 13px;
  border-radius: 10px;
  border: 1px solid rgba(143, 29, 44, 0.35);
  background: rgba(143, 29, 44, 0.06);
  color: var(--color-wine-red, #8f1d2c);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.mobile-profile-cellar-delete:hover {
  background: rgba(143, 29, 44, 0.12);
}

/* Friend-card share panel sub-section headings + per-cellar rows. */
.mobile-vinrum-friend-share-heading {
  margin: 8px 4px 4px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted, var(--muted));
}
.mobile-vinrum-friend-cellar-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9rem;
  color: var(--color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 8px;
}

.mobile-profile-inline-shell {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(94px, 1fr);
  align-items: stretch;
  border-radius: 12px;
  border: 1px solid rgba(90, 21, 32, 0.2);
  background: rgba(255, 250, 244, 0.96);
  overflow: hidden;
}

.mobile-profile-inline-value,
.mobile-profile-inline-input {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 0.93rem;
  color: var(--color-ink);
}

.mobile-profile-inline-input {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: rgba(255, 252, 248, 0.98);
  font: inherit;
}

.mobile-profile-inline-button {
  min-height: 42px;
  border: 0;
  border-left: 1px solid rgba(90, 21, 32, 0.18);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(180deg, rgba(90, 21, 32, 0.14), rgba(90, 21, 32, 0.22));
  color: var(--color-wine);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.mobile-profile-inline-button:disabled {
  opacity: 0.68;
  cursor: wait;
}

.mobile-profile-add-link {
  background: none;
  border: none;
  padding: 8px 0;
  color: var(--color-wine);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

#mobile-cellar-status.status-text {
  margin-top: 4px;
  min-height: 0;
}

/* ── Cellar card – expanded border (F4 bugfix) ───────────────── */
.mobile-cellar-card-item.is-expanded {
  border-color: rgba(90, 21, 32, 0.42);
}
.mobile-cellar-rating-panel {
  border-color: rgba(90, 21, 32, 0.22);
  background: rgba(255, 251, 246, 0.98);
  box-shadow: 0 10px 20px rgba(43, 11, 16, 0.12);
}

.mobile-cellar-rating-option {
  border-color: rgba(90, 21, 32, 0.2);
  background: rgba(255, 248, 240, 0.92);
  color: var(--color-sun);
}

.mobile-cellar-rating-option.is-clear {
  color: var(--color-muted);
}

/* ── Card name in display font ───────────────────────────────── */
.mobile-cellar-card-name {
  font-family: var(--font-display);
  color: var(--color-wine);
}

.mobile-cellar-card-producent {
  font-family: var(--font-body);
  color: var(--color-muted);
}

/* ── Quantity overlay ────────────────────────────────────────── */
.mobile-qty-sheet {
  background: rgba(255, 252, 248, 0.97);
  border: 1px solid rgba(90, 21, 32, 0.18);
  box-shadow: 0 16px 48px rgba(5, 10, 18, 0.32);
  color: var(--color-ink);
}

.mobile-qty-wine-name {
  font-family: var(--font-display);
  color: var(--color-wine);
}

.mobile-qty-count {
  color: var(--color-wine);
}

.mobile-qty-btn {
  border-color: rgba(90, 21, 32, 0.3);
  background: rgba(90, 21, 32, 0.07);
  color: var(--color-wine);
}

.mobile-qty-btn:active:not(:disabled) {
  background: rgba(90, 21, 32, 0.16);
}

.mobile-qty-delete-zone {
  border-color: rgba(180, 30, 30, 0.25);
  background: rgba(180, 30, 30, 0.05);
}

.mobile-qty-delete-text {
  color: var(--color-ink);
}

/* ── Country map silhouette ──────────────────────────────────── */
.mobile-cellar-card-country-map {
  color: var(--color-wine);
  opacity: 0.3;
}

/* ── Vintage badge + fact pills ──────────────────────────────── */
.mobile-cellar-vintage-badge,
.mobile-cellar-fact-pill,
.mobile-cellar-type-tag {
  border-color: rgba(90, 21, 32, 0.22);
  background: rgba(90, 21, 32, 0.1);
  color: var(--color-wine);
}

/* ── Expanded section separators ─────────────────────────────── */
.mobile-cellar-expanded {
  border-top-color: rgba(90, 21, 32, 0.14);
}

.mobile-cellar-card-section {
  border-top-color: rgba(90, 21, 32, 0.12);
}

/* ── Section kicker ──────────────────────────────────────────── */
.mobile-cellar-section-kicker {
  color: var(--color-terracotta);
}

/* ── Character section ───────────────────────────────────────── */
.mobile-cellar-char-line {
  color: var(--color-ink);
}

.mobile-cellar-qualifier-tag {
  border-color: rgba(90, 21, 32, 0.18);
  background: rgba(90, 21, 32, 0.06);
  color: var(--color-wine);
}

.mobile-cellar-char-summary {
  color: var(--color-muted);
}

/* ── Info section ────────────────────────────────────────────── */
.mobile-cellar-info-label {
  color: var(--color-muted);
}

.mobile-cellar-info-value {
  color: var(--color-ink);
}

/* ── Grape legend ────────────────────────────────────────────── */
.mobile-cellar-grape-legend-name {
  color: var(--color-muted);
}

.mobile-cellar-systembolaget-link {
  color: var(--color-wine-red);
}