/* =============================================================================
   Chief's Den — Components
   File: public/assets/css/components.css
   Reusable UI components — buttons, cards, badges, forms, modals, alerts.
   ============================================================================= */

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

/* Primary — amber */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast);
  -webkit-appearance: none;
}

.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
}
.btn-primary:hover:not(:disabled) {
  background: var(--color-accent-hi);
  border-color: var(--color-accent-hi);
  box-shadow: var(--shadow-amber-sm);
}

.btn-secondary {
  background: var(--color-surface-2);
  color: var(--color-text);
  border-color: var(--color-border-light);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--color-surface-3);
  border-color: var(--color-accent-dim);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled) {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.btn-danger {
  background: var(--color-danger);
  color: var(--color-danger-text);
  border-color: var(--color-danger);
}
.btn-danger:hover:not(:disabled) {
  background: #A02020;
}

.btn-outline {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.btn-outline:hover:not(:disabled) {
  background: var(--color-accent-bg);
}

/* Sizes */
.btn-sm {
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-3);
  min-height: 32px;
}
.btn-lg {
  font-size: var(--text-md);
  padding: var(--space-4) var(--space-8);
  min-height: 52px;
}
.btn-xl {
  font-size: var(--text-lg);
  padding: var(--space-5) var(--space-10);
  min-height: 60px;
  border-radius: var(--radius-lg);
}

/* Full width */
.btn-block { width: 100%; }

/* Icon only */
.btn-icon {
  padding: var(--space-3);
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.btn-icon.btn-sm {
  width: 32px;
  height: 32px;
  padding: var(--space-2);
}

/* Passkey button */
.btn-passkey {
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border-light);
  gap: var(--space-3);
  font-size: var(--text-base);
}
.btn-passkey:hover:not(:disabled) {
  border-color: var(--color-accent);
  background: var(--color-accent-bg);
  color: var(--color-accent-hi);
}
.btn-passkey svg { width: 22px; height: 22px; color: var(--color-accent); }

/* Loading state */
.btn.loading {
  pointer-events: none;
  opacity: 0.8;
}
.btn.loading::after {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 600ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

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

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.card:hover {
  border-color: var(--color-border-light);
  box-shadow: var(--shadow-md);
}

.card-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.card-body {
  padding: var(--space-6);
}

.card-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* Item card — inventory bottle/wine/cigar */
.item-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast);
  position: relative;
}

.item-card:hover {
  border-color: var(--color-accent-dim);
  box-shadow: var(--shadow-md), var(--shadow-amber-sm);
  transform: translateY(-2px);
}

/* Last bottle amber border */
.item-card.last-bottle {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-amber-sm);
}

/* Unicorn tier shimmer */
.item-card.tier-unicorn {
  border-color: var(--color-accent);
}
.item-card.tier-unicorn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    transparent 40%,
    rgba(200, 134, 10, 0.06) 50%,
    transparent 60%);
  background-size: 200% 200%;
  animation: shimmer 3s ease infinite;
  pointer-events: none;
}
@keyframes shimmer {
  0%   { background-position: 200% 200%; }
  100% { background-position: -200% -200%; }
}

.item-card-image {
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.item-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-3);
}

.item-card-image .placeholder-icon {
  width: 48px;
  height: 48px;
  /* Was --color-border-light at opacity 0.5, which composites to rgb(46,38,30)
     over this --color-surface-2 background: a contrast ratio of 1.13:1, against
     the 3:1 WCAG asks for a graphic. The icon was not faint, it was invisible,
     so every card without a photo read as a blank rectangle.
     --color-text-subtle gives 4.2:1 — still quiet, but actually there. */
  color: var(--color-text-subtle);
}

.item-card-body {
  padding: var(--space-4);
}

.item-card-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-1);
  line-height: var(--leading-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-card-meta {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.item-card-meta-sep { color: var(--color-border-light); }

.item-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   Badges & Pills
--------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  line-height: 1.4;
  white-space: nowrap;
}

.badge-amber   { background: var(--color-accent-bg);   color: var(--color-accent-hi); border: 1px solid var(--color-accent-dim); }
.badge-success { background: var(--color-success-bg);  color: var(--color-success-text); border: 1px solid var(--color-success); }
.badge-danger  { background: var(--color-danger-bg);   color: var(--color-danger-text);  border: 1px solid var(--color-danger); }
.badge-warning { background: var(--color-warning-bg);  color: var(--color-warning-text); border: 1px solid var(--color-warning); }
.badge-muted   { background: var(--color-surface-2);   color: var(--color-text-subtle);  border: 1px solid var(--color-border); }

/* Tier badges — stamped leather look */
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid currentColor;
}
.tier-badge.daily    { color: #7A6A5A; background: rgba(74,64,56,0.3); }
.tier-badge.special  { color: #A08030; background: rgba(58,48,0,0.4); }
.tier-badge.rare     { color: #C87830; background: rgba(42,26,0,0.5); }
.tier-badge.unicorn  {
  color: var(--color-accent-hi);
  background: rgba(200,134,10,0.15);
  border-color: var(--color-accent);
  box-shadow: 0 0 6px rgba(200,134,10,0.2);
  animation: unicorn-pulse 3s ease infinite;
}
@keyframes unicorn-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(200,134,10,0.2); }
  50%       { box-shadow: 0 0 12px rgba(200,134,10,0.4); }
}

/* ---------------------------------------------------------------------------
   Rating display
--------------------------------------------------------------------------- */

.rating-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-display);
}
.rating-number {
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  color: var(--color-accent);
  line-height: 1;
}
.rating-max {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

/* Wax seal rating — used on tasting cards */
.wax-rating {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #E8A020, #8A5C07);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,255,255,0.1);
}
.wax-rating-number {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-inverse);
  line-height: 1;
}
.wax-rating-label {
  font-size: 8px;
  color: rgba(13,11,8,0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------------------------------------------------------------------------
   Fill level indicator (pour simulator)
--------------------------------------------------------------------------- */

.fill-indicator {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 40px;
}
.fill-bar {
  width: 8px;
  background: var(--color-border);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  height: 100%;
}
.fill-bar-level {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, #C8860A, #E8C070);
  border-radius: 2px;
  transition: height 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------------------------------------------------------------------------
   Strength bar (cigars)
--------------------------------------------------------------------------- */

.strength-bar {
  height: 6px;
  border-radius: var(--radius-full);
  background: linear-gradient(to right, #F2E0C0, #8B4513, #2A0A00);
  position: relative;
  overflow: visible;
}
.strength-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-text);
  border: 2px solid var(--color-accent);
  box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------------------------
   Stat cards (admin/stats page)
--------------------------------------------------------------------------- */

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.stat-card-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-3);
}

.stat-card-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.stat-card-delta {
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.stat-card-delta.up   { color: var(--color-success-text); }
.stat-card-delta.down { color: var(--color-danger-text); }
.stat-card-delta.flat { color: var(--color-text-subtle); }

/* ---------------------------------------------------------------------------
   Sensor gauge
--------------------------------------------------------------------------- */

.sensor-gauge {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.gauge-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-subtle);
}

.gauge-value {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.gauge-unit {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.gauge-status {
  font-size: var(--text-xs);
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
}
.gauge-status.ok      { background: var(--color-success-bg); color: var(--color-success-text); }
.gauge-status.warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.gauge-status.alert   { background: var(--color-danger-bg);  color: var(--color-danger-text); }

/* ---------------------------------------------------------------------------
   Alert / Flash messages
--------------------------------------------------------------------------- */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid;
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

.alert-success { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success-text); }
.alert-error   { background: var(--color-danger-bg);  border-color: var(--color-danger);  color: var(--color-danger-text); }
.alert-warning { background: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-warning-text); }
.alert-info    { background: var(--color-info-bg);    border-color: var(--color-info);    color: var(--color-info-text); }

/* ---------------------------------------------------------------------------
   Form field groups
--------------------------------------------------------------------------- */

.field-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.field-group:last-child { margin-bottom: 0; }

.field-hint {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin-top: var(--space-1);
}

.field-error {
  font-size: var(--text-xs);
  color: var(--color-danger-text);
  margin-top: var(--space-1);
}

.field-group input.error,
.field-group select.error,
.field-group textarea.error {
  border-color: var(--color-danger);
}

/* Password strength meter */
.password-strength {
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  margin-top: var(--space-2);
  overflow: hidden;
}
.password-strength-bar {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition-base), background var(--transition-base);
}
.strength-weak   { background: var(--color-danger);  width: 25%; }
.strength-fair   { background: var(--color-warning); width: 50%; }
.strength-good   { background: #7A8A00; width: 75%; }
.strength-strong { background: var(--color-success-text); width: 100%; }

/* ---------------------------------------------------------------------------
   Modal / Drawer
--------------------------------------------------------------------------- */

/* An author `display` rule beats the `hidden` attribute's UA `display:none`,
   so a [hidden] overlay would sit on screen permanently. Say it explicitly. */
.modal-overlay[hidden],
[hidden] { display: none !important; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 11, 8, 0.85);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  animation: fade-in 150ms ease forwards;
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  animation: slide-up 180ms ease forwards;
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal-header {
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
}

.modal-body   { padding: var(--space-6); }
.modal-footer { padding: var(--space-5) var(--space-6); border-top: 1px solid var(--color-border); display: flex; gap: var(--space-3); justify-content: flex-end; }

/* ---------------------------------------------------------------------------
   Scan overlay
--------------------------------------------------------------------------- */

.scan-overlay {
  position: fixed;
  inset: 0;
  background: var(--scan-overlay-bg);
  z-index: var(--z-scanner);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.scan-viewport {
  width: 280px;
  height: 280px;
  position: relative;
}

.scan-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* Corner reticle */
.scan-reticle {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.scan-reticle::before,
.scan-reticle::after,
.scan-reticle .corner-bl,
.scan-reticle .corner-br {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: var(--scan-reticle);
  border-style: solid;
}
.scan-reticle::before  { top: 0;    left: 0;  border-width: 3px 0 0 3px; border-radius: 4px 0 0 0; }
.scan-reticle::after   { top: 0;    right: 0; border-width: 3px 3px 0 0; border-radius: 0 4px 0 0; }
.scan-reticle .corner-bl { bottom: 0; left: 0;  border-width: 0 0 3px 3px; border-radius: 0 0 0 4px; }
.scan-reticle .corner-br { bottom: 0; right: 0; border-width: 0 3px 3px 0; border-radius: 0 0 4px 0; }

/* Scanning line */
.scan-line {
  position: absolute;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--color-accent), transparent);
  animation: scan-sweep 2s ease-in-out infinite;
  box-shadow: 0 0 8px var(--color-accent);
}
@keyframes scan-sweep {
  0%   { top: 10%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 90%; opacity: 0; }
}

/* ---------------------------------------------------------------------------
   Progress bars
--------------------------------------------------------------------------- */

.progress {
  height: 6px;
  background: var(--color-surface-2);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

/* ---------------------------------------------------------------------------
   Tabs
--------------------------------------------------------------------------- */

.tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-subtle);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: -1px;
  min-height: 44px;
}
.tab:hover { color: var(--color-text); }
.tab.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* ---------------------------------------------------------------------------
   Dropdown
--------------------------------------------------------------------------- */

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  min-width: 180px;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  overflow: hidden;
  animation: slide-up 150ms ease forwards;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
  min-height: 44px;
}
.dropdown-item:hover { background: var(--color-surface-2); color: var(--color-text); }
.dropdown-item.danger:hover { background: var(--color-danger-bg); color: var(--color-danger-text); }
.dropdown-divider { height: 1px; background: var(--color-border); margin: var(--space-1) 0; }

/* ---------------------------------------------------------------------------
   Wax Seal (Chief's Den logo mark)
--------------------------------------------------------------------------- */

.wax-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.wax-seal-svg {
  filter: drop-shadow(0 4px 12px rgba(200, 134, 10, 0.4));
}

/* Ambient glow pulse on login screen */
.wax-seal-pulse .wax-seal-svg {
  animation: seal-pulse 3s ease-in-out infinite;
}

@keyframes seal-pulse {
  0%, 100% { filter: drop-shadow(0 4px 12px rgba(200, 134, 10, 0.3)); }
  50%       { filter: drop-shadow(0 4px 24px rgba(200, 134, 10, 0.6)); }
}

/* ---------------------------------------------------------------------------
   Empty state
--------------------------------------------------------------------------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-8);
  text-align: center;
  gap: var(--space-4);
}

.empty-state-icon {
  width: 56px;
  height: 56px;
  color: var(--color-border-light);
  opacity: 0.6;
}

.empty-state-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text-muted);
}

.empty-state-desc {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  max-width: 320px;
}

/* ---------------------------------------------------------------------------
   Loading skeleton
--------------------------------------------------------------------------- */

.skeleton {
  background: linear-gradient(90deg,
    var(--color-surface-2) 25%,
    var(--color-surface-3) 50%,
    var(--color-surface-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

@keyframes skeleton-wave {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------------------------------------------------------------------------
   Price ticker (dashboard / stats)
--------------------------------------------------------------------------- */

.price-ticker-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.price-ticker-name {
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.price-ticker-value { color: var(--color-text); font-weight: var(--weight-medium); }
.price-ticker-delta { min-width: 60px; text-align: right; }
.price-ticker-delta.up   { color: var(--color-success-text); }
.price-ticker-delta.down { color: var(--color-danger-text); }
.price-ticker-delta.flat { color: var(--color-text-subtle); }

/* -----------------------------------------------------------------------------
   AI-filled fields
   Marks the inputs "Enrich with AI" just populated, so it is obvious at a
   glance which values came from a model and still want a look before saving.
   The class is added by enrichment.js and cleared on the next page load — the
   distinction only matters while the form is unsaved.
----------------------------------------------------------------------------- */
.field-ai-filled {
  border-color: var(--color-accent) !important;
  background: var(--color-accent-bg);
  box-shadow: 0 0 0 3px var(--color-accent-glow);
}
.field-ai-filled:focus {
  box-shadow: 0 0 0 3px var(--color-accent-glow);
}


/* -----------------------------------------------------------------------------
   Cheat sheet — the shared shell
   Used by both the cigar and the spirit sheets, so it lives here rather than
   inside one of them. It was defined in cigar-cheatsheet.php, which meant a
   spirit page rendered the markup with none of the styles.
   Category-specific pieces (the cigar strength row, the proof bar) stay in
   their own components.
----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   Cheat sheet. Blueprint grid and clean rules rather than the Den's usual
   walnut cards — this is a reference sheet, and it should read like one.
----------------------------------------------------------------------------- */
.cheatsheet {
  --cs-line:  rgba(242, 234, 216, 0.16);
  --cs-key:   var(--color-text-subtle);
  background:
    linear-gradient(rgba(242,234,216,0.030) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(90deg, rgba(242,234,216,0.030) 1px, transparent 1px) 0 0 / 22px 100%,
    var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-6);
}

.cs-head { display: flex; align-items: stretch; border-bottom: 1px solid var(--cs-line); }

.cs-mark {
  /* Also the reference card's navy. Kept as a solid block, but in the Den's
     own walnut with a gilt edge rather than a colour from someone else's
     branding. */
  background: linear-gradient(160deg, #2E2318, #1A1610);
  border-right: 2px solid var(--color-accent-dim);
  color: #F2EAD8;
  padding: 14px 18px;
  min-width: 118px;
  display: flex; flex-direction: column; justify-content: center;
}
.cs-mark-initials { font-family: var(--font-display); font-size: 26px; font-weight: 700;
                    line-height: 1; color: var(--color-accent); }
.cs-mark-label {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  opacity: 0.72; margin-top: 4px;
}

.cs-titles { flex: 1; padding: 12px 18px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.cs-row { display: flex; gap: 14px; align-items: baseline; }
.cs-key {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cs-key); min-width: 46px;
}
.cs-val { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text); }

/* His own score, given the weight it deserves — this is the number that means
   something in the Den, and it sits with the brand rather than below the fold. */
.cs-row-score { order: -1; }
.cs-score {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  line-height: 1;
}
.cs-score:hover { color: var(--color-accent-hi); }
.cs-score-of {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  font-weight: 400;
  margin-left: 1px;
}
.cs-size { color: var(--color-text-subtle); font-size: var(--text-sm); margin-left: 4px; }

.cs-grid {
  display: grid;
  /* The middle column holds the bottle. At 150px it was narrower than the
     panels' own padding and the subject read as a thumbnail no matter how the
     image was sized. */
  grid-template-columns: 1fr 220px 1fr;
  gap: 0;
}
.cs-panel { padding: 20px 22px; }
.cs-panel:first-child { border-right: 1px solid var(--cs-line); }
.cs-panel:last-child  { border-left: 1px solid var(--cs-line); }

.cs-panel-title {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cs-key); padding-bottom: 6px; margin-bottom: 10px;
  border-bottom: 1px solid var(--cs-line);
}

/* The wrapper / binder / filler rail, and the wine make-up rail.
 *
 * The label sits in a fixed gutter to the left of the rule. That gutter was
 * 78px with a 62px label box, sized when these labels were 9px — and at 11px
 * with 0.14em tracking, APPELLATION needs about 92px and MASH BILL about 75px.
 * They overflowed their box and ran straight into the value beside them.
 *
 * Widened to fit the longest label the cheat sheets actually use. If a longer
 * one is ever added, this gutter is what has to grow with it — the label is
 * absolutely positioned, so it will not push anything out of the way by itself.
 */
.cs-rail { position: relative; padding-left: 112px; }
.cs-rail-row { position: relative; padding: 7px 0; }
.cs-rail-label {
  position: absolute; left: -112px; top: 8px;
  width: 96px; text-align: right;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1.25;
  color: var(--cs-key);
}
.cs-rail-row::before {
  content: ''; position: absolute; left: -12px; top: 13px;
  width: 10px; height: 1px; background: var(--color-accent-dim);
}
.cs-rail::before {
  content: ''; position: absolute; left: -2px; top: 12px; bottom: 14px;
  width: 1px; background: var(--color-accent-dim);
}
.cs-rail-value { font-size: var(--text-sm); color: var(--color-text); }

.cs-flavours { list-style: none; padding: 0; margin: 0; }
.cs-flavours li {
  font-size: var(--text-sm); color: var(--color-text);
  padding: 3px 0 3px 14px; position: relative;
}
.cs-flavours li::before {
  content: '–'; position: absolute; left: 0; color: var(--color-accent);
}

.cs-burn { margin-top: 4px; }
.cs-burn-track {
  height: 12px; border-radius: 999px;
  background: var(--color-surface-3);
  border: 1px solid var(--color-border-light);
  overflow: hidden;
}
/* An ember, burning left to right.
   This was #16233A — the navy from the reference card, which works on white
   paper and disappears entirely on the Den's near-black. A deep coal warming
   to amber reads at a glance and is what a burn time actually looks like. */
.cs-burn-fill {
  height: 100%;
  background: linear-gradient(90deg, #6E2408 0%, #B4560C 45%, #E8A020 100%);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(232, 160, 32, 0.35);
}
.cs-burn-scale {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--cs-key); margin-top: 4px;
}

.cs-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 12px;
  /* Stops a short image collapsing the row, and gives a tall trimmed bottle
     somewhere to stand. */
  min-height: 320px;
}

/* Images are trimmed of their dead margin on the way in, so the file's shape
   is the subject's shape — which means height is the useful limit, and the
   picture fills the frame instead of floating in the middle of it. A drop
   shadow gives a cut-out bottle something to stand on. */
.cs-figure img {
  max-width: 100%;
  max-height: 380px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55));
}
.cs-figure-empty { text-align: center; }

/* -----------------------------------------------------------------------------
   Strength: five cigars, lit up to the level.
   One image, two states — lit keeps its colour and glows at the foot, unlit is
   desaturated and cold, so the count reads without needing a number.
----------------------------------------------------------------------------- */


/* Not lit: the colour drains out of it. */
.cs-cig:not(.is-lit) img {
  filter: grayscale(0.9) brightness(0.5) contrast(0.9);
  opacity: 0.45;
}

/* The ember, sitting over the foot of the drawing. Its position was measured
   against the artwork — move the artwork and this moves with it. */


.cs-strength-label {
  font-size: var(--text-sm); color: var(--color-text); margin-top: 8px; text-align: center;
}
.cs-strength-num {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-accent); margin-left: 6px;
}

.cs-none { color: var(--color-text-subtle); font-size: var(--text-xs); font-style: italic; }

@media (max-width: 760px) {
  .cs-grid { grid-template-columns: 1fr; }
  .cs-panel:first-child, .cs-panel:last-child { border: none; border-top: 1px solid var(--cs-line); }
  .cs-figure { order: -1; min-height: 0; padding: 24px 12px; }
  .cs-figure img { max-height: 320px; }
}


/* ---------------------------------------------------------------------------
   Image picker — the background-cut toggle
--------------------------------------------------------------------------- */
.img-cut-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px var(--space-2);
  align-items: center;
  margin-bottom: var(--space-3);
  cursor: pointer;
}
.img-cut-toggle input { grid-row: 1 / span 2; width: 16px; height: 16px; accent-color: var(--color-accent); }
.img-cut-toggle span  { font-size: var(--text-sm); color: var(--color-text); }
.img-cut-toggle small { font-size: var(--text-xs); color: var(--color-text-subtle); line-height: 1.5; }

/* ===========================================================================
   THE FRONT DOOR
   ---------------------------------------------------------------------------
   Two halves: the host (tonight's bottle) and the shelf (the collection as it
   would actually stand). Built to read well with no photographs at all, which
   is the state the Den is in today.
   =========================================================================== */

.den-mast {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-8) var(--content-padding) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(200,134,10,0.10), transparent 60%),
    var(--color-bg);
}
.den-greet {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  line-height: 1.1;
  color: var(--color-text);
}
.den-line {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.den-clock {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.section-eyebrow {
  font-size: 12px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-3);
}

/* ---- tonight's bottle ---------------------------------------------------- */
.tonight { margin-bottom: var(--space-8); }

.tonight-card {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(160deg, rgba(200,134,10,0.07), transparent 55%),
    var(--color-surface);
}
.tonight-art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 190px;
  color: var(--color-accent);
}
.tonight-art svg { height: 100%; width: auto; }
.tonight-art img {
  max-height: 100%; max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.5));
}
.tonight-name {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.2vw, 1.9rem);
  line-height: 1.2;
  margin: 0 0 var(--space-2);
  color: var(--color-accent-hi);
}
.tonight-facts {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.tonight-notes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); }
.tonight-note {
  font-size: var(--text-xs);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-border-light);
  color: var(--color-text-muted);
}
.tonight-mash {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin-bottom: var(--space-3);
}
.tonight-why {
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: var(--space-5);
}
.tonight-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---- the shelf ----------------------------------------------------------- */
.shelf-section { margin-bottom: var(--space-8); }
.shelf-row { margin-bottom: var(--space-6); }

.shelf-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}
.shelf-label {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
}
.shelf-count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent); }
.shelf-all {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  white-space: nowrap;
}
.shelf-all:hover { color: var(--color-accent); }

/* A horizontal strip rather than a grid: a shelf is a row of bottles, and it
   scrolls on a phone instead of reflowing into a tall column. */
.shelf-strip {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-2);
}
.shelf-strip::-webkit-scrollbar { height: 6px; }
.shelf-strip::-webkit-scrollbar-thumb { background: var(--color-border-light); border-radius: 3px; }

.shelf-tile {
  flex: 0 0 118px;
  scroll-snap-align: start;
  text-decoration: none;
  display: block;
}
.shelf-art {
  position: relative;
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-accent);
  overflow: hidden;
  transition: border-color 140ms ease, transform 140ms ease;
}
.shelf-tile:hover .shelf-art { border-color: var(--color-accent); transform: translateY(-2px); }
.shelf-art.has-photo { background: var(--color-surface); }
.shelf-art img { max-height: 100%; max-width: 100%; object-fit: contain; }
.shelf-bottle { height: 104px; width: auto; }

.shelf-open {
  position: absolute;
  top: 6px; right: 6px;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #1a1200;
}
.shelf-name {
  margin-top: 8px;
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--color-text);
  /* Two lines, then ellipsis — a ragged strip of different-height tiles reads
     as broken rather than as a shelf. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shelf-meta {
  font-size: 12px;
  color: var(--color-text-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- from the bar -------------------------------------------------------- */
.bar-section { margin-bottom: var(--space-6); }
.bar-card {
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.bar-headline {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.bar-list { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.bar-wanted { margin-top: var(--space-4); }
.bar-wanted-label {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-text-subtle); margin-bottom: 8px;
}
.bar-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-xs);
  padding: 5px 10px; margin: 0 6px 6px 0;
  border: 1px solid var(--color-border-light);
  border-radius: 999px;
  color: var(--color-text-muted);
}
.bar-chip em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-accent);
}
.bar-more {
  display: inline-block;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-accent);
}

/* ---- the count ----------------------------------------------------------- */
.den-count {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.den-count a { color: var(--color-text-subtle); text-decoration: none; }
.den-count a:hover { color: var(--color-text); }
.den-count strong { color: var(--color-text); font-weight: var(--weight-medium); }
.den-count .is-warn strong { color: var(--color-warning-text); }
.den-count .is-nudge { color: var(--color-accent); }

@media (max-width: 640px) {
  .den-mast { padding-top: var(--space-5); }
  .tonight-card { grid-template-columns: 1fr; gap: var(--space-4); }
  .tonight-art { height: 150px; }
  .tonight-actions .btn { flex: 1 1 auto; text-align: center; }
}
.bar-actions {
  display: flex; align-items: center; gap: var(--space-4);
  flex-wrap: wrap; margin-top: var(--space-4);
}
.bar-actions .bar-more { margin-top: 0; }

/* ---------------------------------------------------------------------------
   Moving an item between categories
--------------------------------------------------------------------------- */
.move-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-accent-hi);
  margin: 0 0 var(--space-2);
}
.move-intro { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-4); }
.move-intro strong { color: var(--color-text); }

.move-choices { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.move-choice {
  flex: 1 1 140px;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.move-choice:hover { background: var(--color-surface-3); }
.move-choice.selected { border-color: var(--color-accent); background: rgba(200,134,10,0.10); }
.move-choice-where {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-text);
}
.move-choice-cat {
  display: block;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-subtle); margin-top: 2px;
}

.move-detail { margin-top: var(--space-5); }
.move-loading, .move-refuse { font-size: var(--text-sm); color: var(--color-text-muted); }
.move-refuse { color: var(--color-danger-text, #e08585); }

.move-group { margin-bottom: var(--space-4); }
.move-group-title {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 6px;
}
.move-group.is-keep  .move-group-title { color: var(--color-success-text, #7fbf7f); }
.move-group.is-carry .move-group-title { color: var(--color-accent); }
.move-group.is-lose  .move-group-title { color: var(--color-warning-text, #d9a441); }
.move-group ul { margin: 0; padding-left: 18px; }
.move-group li { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.7; }
.move-group.is-lose li { color: var(--color-text); }

.move-note {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

/* ---------------------------------------------------------------------------
   "You already have one of these"

   Deliberately not styled as an error. Two bottles of the same whiskey is a
   normal thing to own, and the Den keeps a row for each — this is information,
   not a rejection.
--------------------------------------------------------------------------- */
.dupe-note {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-accent);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background: rgba(200, 134, 10, 0.07);
}
.dupe-head {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-accent-hi);
  margin-bottom: var(--space-3);
}
.dupe-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.dupe-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
}
.dupe-list li:last-child { border-bottom: none; }
.dupe-list a { color: var(--color-text); font-size: var(--text-sm); }
.dupe-list a:hover { color: var(--color-accent); }
.dupe-meta { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-subtle); }
.dupe-list .btn { margin-left: auto; }
.dupe-foot { font-size: var(--text-xs); color: var(--color-text-subtle); line-height: 1.6; }

/* ---------------------------------------------------------------------------
   Stacked bottles

   The Den keeps one row per physical bottle, so three Blanton's are three rows
   — each a different barrel. The list groups them into one card so the shelf
   reads cleanly, and the stack opens to reach any individual bottle.
--------------------------------------------------------------------------- */
.item-card-stack { display: flex; flex-direction: column; }
.item-card-stack .item-card { flex: 1; }

/* A hint of the cards behind, so a stack looks like more than one bottle
   before it is opened. */
.item-card.is-stack {
  position: relative;
  box-shadow:
    3px -3px 0 -1px var(--color-surface),
    3px -3px 0 0 var(--color-border),
    6px -6px 0 -1px var(--color-surface),
    6px -6px 0 0 var(--color-border);
}

.stack-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
  background: rgba(200, 134, 10, 0.12);
  border: 1px solid var(--color-accent-dim, var(--color-accent));
  border-radius: 999px;
  padding: 1px 7px;
}

.stack-open { margin-top: 6px; }
.stack-open summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-align: center;
}
.stack-open summary::-webkit-details-marker { display: none; }
.stack-open summary::after { content: ' ▾'; opacity: 0.6; }
.stack-open[open] summary::after { content: ' ▴'; }
.stack-open summary:hover { color: var(--color-text); border-color: var(--color-border-light); }

.stack-list { list-style: none; margin: 6px 0 0; padding: 0; }
.stack-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 8px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-xs);
}
.stack-list li:last-child { border-bottom: none; }
.stack-list li > a:first-child {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: var(--color-text-muted);
}
.stack-list li > a:first-child:hover { color: var(--color-text); }
.stack-id    { font-family: var(--font-mono); color: var(--color-text-subtle); }
.stack-state { color: var(--color-text-subtle); }
.stack-state.is-open { color: var(--color-accent); }
.stack-mark {
  color: var(--color-text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stack-edit { color: var(--color-text-subtle); flex-shrink: 0; }
.stack-edit:hover { color: var(--color-accent); }

/* The ×N in a table row doubles as the control that opens the group. */
.stack-count.is-button {
  cursor: pointer;
  font-family: var(--font-mono);
}
.stack-count.is-button:hover { background: rgba(200, 134, 10, 0.22); }
.stack-row > td { background: var(--color-surface-2); }

/* -----------------------------------------------------------------------------
   Item image placeholder — src/Views/components/image-placeholder.php
   The "no photo yet" tile. 158 of 159 spirits have no photo, so this is the
   most-seen graphic in the app.
   -------------------------------------------------------------------------- */

.ph-box {
  position: relative;
  aspect-ratio: 2/3;
  overflow: hidden;
  background: var(--color-surface-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.ph-box picture {
  position: absolute;
  inset: 0;
  display: block;
}

.ph-art {
  width: 100%;
  height: 100%;
  display: block;
}

/* The wine cell covers the tile; the spirit niche and humidor tray are objects
   with a transparent surround, so they sit inset and centred instead. See the
   note in the component about why these differ. */
.ph-art-spirit,
.ph-art-cigar {
  padding: 12% 10% 22%;
  box-sizing: border-box;
}

/* The caption sits over the artwork, so it needs its own ground — the same
   problem the front door had over the room photograph, and the same answer: a
   gradient with no edge rather than a panel. */
.ph-caption {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--space-6) var(--space-5) var(--space-5);
  box-sizing: border-box;
  text-align: center;
  background: linear-gradient(180deg,
    rgba(26,22,16,0) 0%,
    rgba(26,22,16,0.82) 38%,
    rgba(26,22,16,0.95) 100%);
}

.ph-title {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.ph-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* -----------------------------------------------------------------------------
   List-card version. Same artwork, no caption — a grid of forty cards each
   repeating "Add one from Edit" would be noise, and the card already says the
   item's name underneath.
   -------------------------------------------------------------------------- */

.item-card-image .ph-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10% 8%;
  box-sizing: border-box;
  opacity: 0.9;
}
.item-card-image .ph-art-wine {
  object-fit: cover;
  padding: 0;
  opacity: 1;
}

/* The humidor tray behind a cigar's brand name (cigar-detail.php). Low opacity
   and behind the text on purpose: the words carry the information, the artwork
   only stops the panel being a flat gradient. */
.cigar-fallback-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6%;
  box-sizing: border-box;
  opacity: 0.30;
  pointer-events: none;
}
.cigar-fallback > *:not(picture) { position: relative; z-index: 1; }

/* -----------------------------------------------------------------------------
   Empty-state artwork — the "nothing here yet" pages.
   Replaces a set of emoji and outline icons that read as generic app furniture
   next to the rest of the Den.
   -------------------------------------------------------------------------- */

.empty-art {
  width: 190px;
  height: auto;
  display: block;
  margin: 0 auto var(--space-5);
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.5));
}
@media (max-width: 600px) {
  .empty-art { width: 150px; }
}

/* -----------------------------------------------------------------------------
   The White Whale mark. Only the unicorn tier gets one, and only two items in
   the collection are that tier.

   44px is a measured floor rather than a taste call: on this background the
   whale is a blob at 16 and 20px and only resolves from roughly 40 up. That is
   why it sits BESIDE the 12px text pill instead of inside it.
   -------------------------------------------------------------------------- */

.whale-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.whale-mark img {
  width: 44px;
  height: 44px;
  display: block;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.6))
          drop-shadow(0 0 12px rgba(200,134,10,0.28));
}

/* -----------------------------------------------------------------------------
   Section band — a strip of the room's own material under a page header.
   Wine is the only one so far. Decorative, aria-hidden in the markup.

   Deliberately NOT applied to .page-header, which is position:sticky: a
   photograph pinned to the top of the viewport follows you down the whole list
   and turns a texture into wallpaper.
   -------------------------------------------------------------------------- */

.section-band {
  height: 110px;
  margin: calc(var(--space-6) * -1) calc(var(--content-padding) * -1) var(--space-6);
  background-size: cover;
  background-position: center 55%;
  border-bottom: 1px solid var(--color-border);
  position: relative;
}
/* The dimmer is a pseudo-element rather than baked into the image, so the same
   artwork can be reused somewhere brighter without being re-exported. */
.section-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,11,8,0.42) 0%, rgba(13,11,8,0.72) 100%);
}

.section-band-wine {
  background-image: image-set(url("/assets/img/band-wine.webp") type("image/webp"),
                              url("/assets/img/band-wine.jpg")  type("image/jpeg"));
  background-image: url("/assets/img/band-wine.jpg");
  background-image: -webkit-image-set(url("/assets/img/band-wine.webp") type("image/webp"),
                                      url("/assets/img/band-wine.jpg")  type("image/jpeg"));
}

@media (max-width: 600px) {
  .section-band { height: 76px; }
}