/* Persistent cellar-status badge (Phase 2 of reorg-ux-architecture-overhaul.md) */

.cellar-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  border: 1px solid var(--border, #e5e1d8);
  background: var(--surface, #fff);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cellar-status-badge:hover,
.cellar-status-badge:focus-visible {
  background: var(--surface-muted, #f5f0e6);
  border-color: var(--text-muted, #6b6457);
  outline: none;
}

.cellar-status-badge:focus-visible {
  box-shadow: 0 0 0 2px var(--accent, #7a3530);
}

.cellar-status-badge__icon {
  font-size: 1rem;
  line-height: 1;
}

.cellar-status-badge__label {
  display: inline-block;
  vertical-align: middle;
}

/* Three states */

.cellar-status-badge--loading,
.cellar-status-badge--unavailable {
  color: var(--text-muted, #6b6457);
}

.cellar-status-badge--organised {
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.4);
  color: var(--color-success);
}

.cellar-status-badge--minor {
  background: rgba(217, 119, 6, 0.08);
  border-color: rgba(217, 119, 6, 0.4);
  color: var(--color-warning);
}

.cellar-status-badge--major {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.4);
  color: var(--color-error);
}

/* P4 reorg-engine-alignment — new state classes */
.cellar-status-badge--blocked {
  background: rgba(124, 58, 237, 0.08);   /* violet — needs your input */
  border-color: rgba(124, 58, 237, 0.4);
  color: var(--color-blocked, #b794f6);
}

.cellar-status-badge--setup_needed {
  background: rgba(2, 132, 199, 0.08);    /* sky — operator action */
  border-color: rgba(2, 132, 199, 0.4);
  color: var(--color-info);
}

/* Phase 4 of reorg-solver-correctness — distinct purple/magenta for layout discussion. */
.cellar-status-badge--awaiting_layout_agreement {
  background: rgba(168, 85, 247, 0.08);   /* fuchsia — needs decision, not urgent */
  border-color: rgba(168, 85, 247, 0.4);
  color: var(--color-blocked, #b794f6);
}

.cellar-status-badge--tidy {
  background: rgba(217, 119, 6, 0.08);    /* amber — same family as legacy minor */
  border-color: rgba(217, 119, 6, 0.4);
  color: var(--color-warning);
}

/* Mobile: let the full status WRAP rather than truncate. A chopped-off
   "…wrong s…" reads as broken and hides the actionable detail (persona
   P3) — wrapping onto a second line keeps the whole message legible in
   the cramped header. */
@media (max-width: 480px) {
  .cellar-status-badge {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .cellar-status-badge__label {
    overflow: visible;
    text-overflow: clip;
  }
}

/* ── De-globalize the cellar-status badge (intent-flow persona-test fix #1) ──
   The badge reports CELLAR-ORGANISATION state ("97 in the wrong section" /
   "Cellar organised"). It lives in the persistent header, so it previously
   showed on EVERY view — injecting collector/maintenance anxiety into Pairing,
   Kitchen, My Wines and Settings, where it is irrelevant (persona-test: Sarah,
   Alex). Scope it to the cellar context (grid / analysis / drink-soon) by
   hiding it on the non-cellar views via the body[data-current-view] tag that
   switchView() already sets. Denylist (not allowlist) so an unset/boot state
   keeps the badge visible on the default cellar view. Role-gating it for
   low-engagement users is deferred to the IA plan. */
body[data-current-view="pairing"] #cellar-status-badge,
body[data-current-view="pairing-lab"] #cellar-status-badge,
body[data-current-view="wine-shop"] #cellar-status-badge,
body[data-current-view="pairing-history"] #cellar-status-badge,
body[data-current-view="recipes"] #cellar-status-badge,
body[data-current-view="wines"] #cellar-status-badge,
body[data-current-view="history"] #cellar-status-badge,
body[data-current-view="journal"] #cellar-status-badge,
body[data-current-view="captures"] #cellar-status-badge,
body[data-current-view="settings"] #cellar-status-badge,
body[data-current-view="admin"] #cellar-status-badge {
  display: none;
}