/*
 * Shopping view — per-view CSS layer (shopping-domain-redesign FR-01 + T-03).
 *
 * Replaces the 173-LOC inline <style> block from pwa/views/shopping.js
 * (lines 59-231 pre-extraction). All legacy aliases migrated to
 * design-system tokens per utility-domain-redesign DD-09-E precedent:
 *   --bg     → --color-surface
 *   --bg2    → --color-surface-container
 *   --text   → --color-on-surface
 *   --hint   → --color-on-surface-variant
 *   --link   → --color-primary-container
 *   --border → --color-outline-variant
 *
 * Class systems: .sh-* (shopping shell + Lists tab), .pt-* (Pantry tab +
 * pantry-scan camera), .pi-* (Personal Items tab). Retained per OQ-02
 * resolution: bespoke per-domain prefix is the canonical pattern (mirrors
 * finance's .fin-*).
 *
 * Catalog: pwa/components/_domain-shopping.stories.js
 */

/* ── Shopping shell + Lists tab ──────────────────────────────────────── */
.sh-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 8px; position: sticky; top: 0; z-index: 20;
  background: var(--color-surface);
}
.sh-header h1 { font-size: 22px; font-weight: 700; }
/* .sh-header-right → .base-row in pwa/styles/base.css. Markup composes both. */
.sh-add-btn {
  height: 36px; padding: 0 14px; border-radius: 18px;
  background: var(--color-primary-container); color: var(--color-on-primary); border: none;
  font-size: 14px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; gap: var(--space-tight);
}
.sh-back-btn {
  width: 36px; height: 36px; border-radius: var(--radius-full);
  background: var(--color-surface-container); color: var(--color-on-surface);
  border: none; font-size: 20px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
/* Finance-aligned card chrome (T-05): 14px radius rows, border-left-4px accent
   for state, color-mix tinting for hover affordance. Matches .fin-rec-card. */
.sh-list-grid { padding: 8px 16px; display: flex; flex-direction: column; gap: var(--space-snug); }
.sh-list-card {
  background: var(--color-surface-container); border-radius: var(--radius-roomy);
  padding: 14px 16px; cursor: pointer;
  display: flex; align-items: center; gap: var(--space-roomy);
  border-left: 4px solid transparent;
  transition: border-left-color 0.15s ease, transform 0.1s ease;
}
.sh-list-card:hover { border-left-color: color-mix(in srgb, var(--color-primary) 35%, transparent); }
.sh-list-card:active { transform: scale(0.98); }
.sh-list-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  background: var(--color-primary-container); color: var(--color-on-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sh-list-info { flex: 1; min-width: 0; }
.sh-list-name {
  font-size: 16px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sh-list-meta { font-size: 13px; color: var(--color-on-surface-variant); margin-top: var(--space-hairline); }
.sh-list-arrow { color: var(--color-on-surface-variant); font-size: 18px; }
.sh-detail-header {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: 16px 16px 8px; position: sticky; top: 0; z-index: 20;
  background: var(--color-surface);
}
.sh-detail-title {
  flex: 1; font-size: 20px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sh-category-group { padding: 0 16px 8px; }
.sh-item {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: 12px 14px; background: var(--color-surface-container);
  border-radius: var(--radius-md); margin-bottom: var(--space-tight);
}
.sh-item-check {
  width: 24px; height: 24px; border-radius: var(--radius-full);
  border: 2px solid var(--color-on-surface-variant);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; font-size: 14px; color: transparent;
  transition: all 0.15s;
}
.sh-item-check.checked {
  background: var(--color-primary-container);
  border-color: var(--color-primary-container); color: var(--color-on-primary);
}
.sh-item-info { flex: 1; min-width: 0; }
.sh-item-name { font-size: 15px; font-weight: 500; }
.sh-item-name.found { text-decoration: line-through; color: var(--color-on-surface-variant); }
.sh-item-notes { font-size: 12px; color: var(--color-on-surface-variant); margin-top: 1px; }
.sh-item-qty {
  font-size: 13px; font-weight: 600; color: var(--color-on-surface-variant);
  background: var(--color-surface); padding: 4px 10px; border-radius: var(--radius-snug); flex-shrink: 0;
}
.sh-item-del { font-size: 16px; color: var(--color-on-surface-variant); cursor: pointer; padding: var(--space-xs); opacity: 0.6; }
.sh-item-del:hover { opacity: 1; }
.sh-add-row {
  display: flex; gap: var(--space-base); padding: 12px 16px;
  position: sticky; bottom: 72px; background: var(--color-surface); z-index: 10;
}
.sh-add-row input {
  flex: 1; padding: 10px 14px; border-radius: var(--radius-md);
  border: 1.5px solid var(--color-on-surface-variant);
  font-size: 15px; outline: none;
  background: var(--color-surface-container); color: var(--color-on-surface);
}
.sh-add-row input:focus { border-color: var(--color-primary-container); }
.sh-add-row .sh-qty-input { width: 50px; text-align: center; }
.sh-add-row button {
  padding: 10px 16px; border-radius: var(--radius-md); border: none;
  background: var(--color-primary-container); color: var(--color-on-primary);
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.sh-actions { display: flex; gap: var(--space-snug); padding: 8px 16px 16px; }
.sh-action-btn {
  flex: 1; padding: var(--space-sm); border-radius: var(--radius-md); border: none;
  font-size: 15px; font-weight: 600; cursor: pointer; text-align: center;
}
.sh-action-btn.primary { background: var(--color-primary-container); color: var(--color-on-primary); }
.sh-action-btn.primary:disabled { opacity: 0.5; cursor: default; }
.sh-action-btn.danger {
  background: color-mix(in srgb, var(--color-error) 12%, transparent);
  color: var(--color-error);
}
.sh-fill-log {
  margin: 0 16px 12px; padding: 12px 14px;
  background: var(--color-surface-container); border-radius: var(--radius-md);
  font-size: 13px; color: var(--color-on-surface-variant);
  white-space: pre-wrap; max-height: 200px; overflow-y: auto;
}
.sh-summary {
  display: flex; gap: var(--space-gutter); padding: 4px 16px 12px;
  font-size: 13px; color: var(--color-on-surface-variant);
}
.sh-skeleton { padding: 8px 16px; display: flex; flex-direction: column; gap: var(--space-snug); }
.sh-confirm-overlay {
  position: fixed; inset: 0; background: color-mix(in srgb, var(--color-on-surface) 40%, transparent); z-index: 400;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
  display: flex; align-items: center; justify-content: center; padding: var(--space-wide);
}
.sh-confirm-overlay.open { opacity: 1; pointer-events: auto; }
.sh-confirm {
  background: var(--color-surface); border-radius: var(--radius-lg);
  padding: var(--space-md); width: 100%; max-width: 320px;
  transform: scale(0.9); transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
.sh-confirm-overlay.open .sh-confirm { transform: scale(1); }
.sh-confirm-title { font-size: 18px; font-weight: 700; margin-bottom: var(--space-base); }
.sh-confirm-msg { font-size: 14px; color: var(--color-on-surface-variant); margin-bottom: var(--space-gutter); }
.sh-confirm-actions { display: flex; gap: var(--space-snug); }
.sh-confirm-btn {
  flex: 1; padding: var(--space-sm); border-radius: var(--radius-md); border: none;
  font-size: 16px; font-weight: 600; cursor: pointer;
}
.sh-confirm-btn.cancel { background: var(--color-surface-container); color: var(--color-on-surface); }

/* Filter-chip layout wrapper — uxFilterChips is the chip primitive (T-07).
   This class adds the standard tab-strip padding around it. */
.sh-chips-wrap { padding: 8px 16px; }

/* Meals tab — finance-aligned card list (T-07).
   Border-left accent supplied by uxAccentCard (.accent-success/warning/primary). */
.sh-meal-list { padding: 0 16px; display: flex; flex-direction: column; gap: var(--space-snug); }
.sh-meal-date { font-size: 13px; color: var(--color-on-surface-variant); }
.sh-meal-missing {
  margin-top: var(--space-tight); font-size: 13px;
  color: var(--color-warning);
  display: inline-flex; align-items: center; gap: var(--space-xs);
}

/* Wardrobe outfit / item card body label (T-09). */
.sh-wardrobe-items {
  font-size: 13px; color: var(--color-on-surface-variant);
  display: inline-flex; align-items: center; gap: var(--space-xs);
}

/* Meals + Wardrobe inline form */
.sh-form { display: flex; gap: var(--space-base); padding: 8px 16px 12px; }
.sh-form input {
  flex: 1; padding: 10px 14px; border-radius: var(--radius-md);
  border: 1.5px solid var(--color-on-surface-variant);
  font-size: 15px; outline: none;
  background: var(--color-surface-container); color: var(--color-on-surface);
}
.sh-form input:focus { border-color: var(--color-primary-container); }
.sh-btn {
  padding: 10px 14px; border-radius: var(--radius-md); border: none;
  background: var(--color-primary-container); color: var(--color-on-primary);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.sh-btn:active { opacity: 0.8; }
.sh-tabs-wrap { padding: 8px 8px 0; position: sticky; top: 0; z-index: 25; background: var(--color-surface); }

/* ── Pantry tab ──────────────────────────────────────────────────────── */
/* Finance-aligned border-left state accent (T-06): low-stock items get a
   warning-colored 4px left rail, matching the .fin-rec-card.warning pattern. */
.pt-item {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: 12px 14px; background: var(--color-surface-container);
  border-radius: var(--radius-md); margin-bottom: var(--space-tight);
  border-left: 4px solid transparent;
  transition: border-left-color 0.15s ease;
}
.pt-item.pt-item-low-row { border-left-color: var(--color-warning); }
.pt-item-info { flex: 1; min-width: 0; }
.pt-item-name { font-size: 15px; font-weight: 500; }
.pt-item-qty {
  font-size: 13px; color: var(--color-on-surface-variant); margin-top: 1px;
  display: inline-flex; align-items: center; gap: var(--space-xs);
}
.pt-item-low { color: var(--color-warning); }
.pt-item-del { color: var(--color-error); }
/* Pantry summary low-stock chip (replaces previous inline color:var(--color-warning)) */
.sh-summary-low {
  color: var(--color-warning);
  display: inline-flex; align-items: center; gap: var(--space-xs);
}
/* Items tab summary chips — token-only, icon-aligned (T-08). */
.sh-summary-packed { color: var(--color-primary); display: inline-flex; align-items: center; gap: var(--space-xs); }
.sh-summary-expired { color: var(--color-error); display: inline-flex; align-items: center; gap: var(--space-xs); }
.sh-summary-warn { color: var(--color-warning); display: inline-flex; align-items: center; gap: var(--space-xs); }
/* Scan-review cancel button — neutral surface (replaces previous inline style) */
.pt-scan-cancel-btn {
  background: var(--color-surface-container);
  color: var(--color-on-surface);
}
.pt-item-actions { display: flex; gap: var(--space-tight); }
.pt-item-btn {
  width: 32px; height: 32px; border-radius: var(--radius-default); border: none;
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface); color: var(--color-on-surface);
}
.pt-cook-input { display: flex; gap: var(--space-base); padding: 12px 16px; }
.pt-cook-input input {
  flex: 1; padding: 10px 14px; border-radius: var(--radius-md);
  border: 1.5px solid var(--color-on-surface-variant);
  font-size: 15px; outline: none;
  background: var(--color-surface-container); color: var(--color-on-surface);
}
.pt-cook-input input:focus { border-color: var(--color-primary-container); }
.pt-cook-input button {
  padding: 10px 16px; border-radius: var(--radius-md); border: none;
  background: var(--color-primary-container); color: var(--color-on-primary);
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.pt-recipe-item { padding: 6px 0; font-size: 14px; }
.pt-recipe-ok { color: var(--color-primary-container); }
.pt-recipe-miss { color: var(--color-error); }

/* Pantry-scan camera UI */
.pt-scan-zone {
  margin: 12px 16px; padding: 32px;
  border: 2px dashed var(--color-on-surface-variant); border-radius: var(--radius-lg);
  text-align: center; cursor: pointer;
}
.pt-scan-zone:active { background: var(--color-surface-container); }
.pt-scan-progress { padding: 32px 16px; text-align: center; animation: fadeIn 0.2s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.pt-scan-progress-text { font-size: 15px; color: var(--color-on-surface-variant); margin-top: var(--space-sm); }
.pt-scan-progress-bar {
  width: 200px; height: 4px;
  background: var(--color-surface-container); border-radius: var(--radius-sm);
  margin: 16px auto 0; overflow: hidden;
}
.pt-scan-progress-fill {
  height: 100%; background: var(--color-primary-container);
  border-radius: var(--radius-sm); transition: width 0.3s;
  width: var(--pt-scan-progress-pct, 0%);
}
.pt-scan-pulse { animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.7; }
}
.pt-scan-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 4px; }
.pt-scan-header h2 { font-size: 18px; font-weight: 700; margin: 0; }
.pt-scan-badge { font-size: 13px; color: var(--color-on-surface-variant); padding: 4px 16px; }
.pt-scan-item {
  display: flex; align-items: center; gap: var(--space-snug);
  padding: 12px 14px; background: var(--color-surface-container);
  border-radius: var(--radius-md); margin: 0 16px 6px; animation: fadeIn 0.2s ease;
}
.pt-scan-item-emoji { font-size: 20px; flex-shrink: 0; }
.pt-scan-item-info { flex: 1; min-width: 0; }
.pt-scan-item-name {
  font-size: 15px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pt-scan-item-unit { font-size: 12px; color: var(--color-on-surface-variant); margin-top: 1px; }
.pt-scan-item-qty { display: flex; align-items: center; gap: var(--space-tight); }
.pt-scan-item-qty button {
  width: 28px; height: 28px; border-radius: 7px; border: none;
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface); color: var(--color-on-surface);
}
.pt-scan-item-qty span { font-size: 15px; font-weight: 600; min-width: 20px; text-align: center; }
.pt-scan-item-remove {
  width: 28px; height: 28px; border-radius: 7px; border: none;
  font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--color-error); opacity: 0.7;
}
.pt-scan-item-remove:active { opacity: 1; }
.pt-scan-actions {
  display: flex; gap: var(--space-snug); padding: var(--space-gutter);
  position: sticky; bottom: 72px; background: var(--color-surface); z-index: 10;
}
.pt-scan-actions .sh-action-btn.primary:disabled { opacity: 0.6; cursor: default; }
.pt-scan-canvas-wrap { padding: 0 16px; position: relative; }
.pt-scan-canvas-wrap canvas { width: 100%; border-radius: var(--radius-md); display: block; }
.pt-scan-nav {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-sm); padding: 8px 0;
}
.pt-scan-nav-btn {
  width: 32px; height: 32px; border-radius: var(--radius-full); border: none;
  background: var(--color-surface-container); color: var(--color-on-surface);
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pt-scan-nav-btn:disabled { opacity: 0.3; cursor: default; }
.pt-scan-nav-dots { display: flex; gap: var(--space-tight); align-items: center; }
.pt-scan-nav-dot {
  width: 6px; height: 6px; border-radius: var(--radius-full);
  background: var(--color-on-surface-variant); transition: all 0.2s;
}
.pt-scan-nav-dot.active { background: var(--color-primary-container); width: 16px; border-radius: 3px; }
.pt-scan-detect-count { text-align: center; font-size: 13px; color: var(--color-on-surface-variant); padding: 4px 0; }
.pt-scan-thumbs {
  display: flex; gap: var(--space-base); padding: 4px 16px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.pt-scan-thumb {
  height: 64px; border-radius: var(--radius-default); cursor: pointer;
  border: 2px solid transparent; flex-shrink: 0; object-fit: cover;
}
.pt-scan-thumb.active { border-color: var(--color-primary-container); }
.pt-scan-expanded {
  position: fixed; inset: 0; z-index: 200; background: color-mix(in srgb, var(--color-on-surface) 90%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.pt-scan-expanded canvas { max-width: 100%; max-height: 100%; }
.pt-scan-expanded-close {
  position: absolute; top: var(--space-gutter); right: var(--space-gutter);
  width: 36px; height: 36px; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-on-primary) 20%, transparent); color: var(--color-on-primary);
  border: none; font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 201;
}

/* Live camera scanner */
.pt-scanner { position: fixed; inset: 0; z-index: 300; background: var(--color-on-surface, var(--color-error)); }
.pt-scanner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pt-scanner canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
.pt-scanner-hud {
  position: absolute; top: 0; left: 0; right: 0;
  padding: max(16px, env(safe-area-inset-top)) 16px 16px;
  display: flex; align-items: center; justify-content: space-between; z-index: 1;
}
.pt-scanner-close {
  width: 40px; height: 40px; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-on-surface) 50%, transparent); color: var(--color-on-primary);
  border: none; font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pt-scanner-count {
  background: color-mix(in srgb, var(--color-on-surface) 50%, transparent); color: var(--color-on-primary);
  padding: 6px 14px; border-radius: var(--radius-wide);
  font-size: 14px; font-weight: 600;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pt-scanner-hint {
  position: absolute; bottom: 130px; left: 0; right: 0;
  text-align: center; color: color-mix(in srgb, var(--color-on-primary) 70%, transparent);
  font-size: 13px; z-index: 1; pointer-events: none;
}
.pt-scanner-controls {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 20px 40px max(20px, env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-lg); z-index: 1;
}
.pt-scanner-capture {
  width: 72px; height: 72px; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-on-primary) 30%, transparent); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.pt-scanner-capture:active { transform: scale(0.92); }
.pt-scanner-capture-inner {
  width: 58px; height: 58px; border-radius: var(--radius-full);
  background: var(--color-on-primary); pointer-events: none;
}
.pt-scanner-gallery {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-on-primary) 20%, transparent); color: var(--color-on-primary);
  border: none; font-size: 22px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* ── Personal Items tab ──────────────────────────────────────────────── */
.pi-loc-badge {
  font-size: 11px; color: var(--color-primary-container);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  padding: 1px 6px; border-radius: var(--radius-tight); margin-right: var(--space-xs);
}
.pi-status-badge {
  font-size: 11px; color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
  padding: 1px 6px; border-radius: var(--radius-tight);
}
.pi-packed { opacity: 0.5; }
.pi-check {
  width: 20px; height: 20px; margin-right: var(--space-base);
  accent-color: var(--color-primary-container); flex-shrink: 0;
}
.pi-variant { font-weight: 400; color: var(--color-on-surface-variant); }
.pi-search {
  display: flex; align-items: center; gap: var(--space-base);
  margin: 4px 16px 8px; padding: 10px 14px; border-radius: var(--radius-md);
  background: var(--color-surface-container);
  border: 1.5px solid var(--color-outline-variant);
}
.pi-search:focus-within { border-color: var(--color-primary-container); }
.pi-search input {
  flex: 1; border: none; background: transparent;
  font-size: 15px; color: var(--color-on-surface); outline: none;
}
.pi-search input::placeholder { color: var(--color-on-surface-variant); }
.pi-search-icon { color: var(--color-on-surface-variant); font-size: 16px; flex-shrink: 0; }
.pi-search-clear {
  width: 22px; height: 22px; border-radius: var(--radius-full); border: none;
  background: var(--color-on-surface-variant); color: var(--color-surface);
  font-size: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
/* Filter chip pads — applied to container around uxFilterChips for layout */
.pi-filter-chips-pad { padding: 4px 16px 8px; }
.pi-card {
  display: flex; gap: var(--space-sm); padding: var(--space-sm);
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant); border-radius: var(--radius-roomy);
  margin: 0 16px 8px; animation: fadeIn 0.15s ease;
  border-left: 4px solid transparent;
  transition: border-left-color 0.15s ease;
}
.pi-card:hover { border-left-color: color-mix(in srgb, var(--color-primary) 35%, transparent); }
/* Finance-aligned border-left state accent (T-08). */
.pi-card.pi-card-expired { border-left-color: var(--color-error); }
.pi-card.pi-card-warn { border-left-color: var(--color-warning); }
.pi-card.pi-card-packed { border-left-color: var(--color-secondary, var(--color-on-surface-variant)); }
.pi-card.packed-card { opacity: 0.5; }
.pi-card-img {
  width: 80px; height: 80px; border-radius: var(--radius-snug);
  background: var(--color-surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; flex-shrink: 0; overflow: hidden;
}
.pi-card-img img { width: 100%; height: 100%; object-fit: cover; }
.pi-card-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: var(--space-hairline);
  cursor: pointer;
}
.pi-card-name {
  font-size: 15px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pi-card-name .pi-variant { font-weight: 400; color: var(--color-on-surface-variant); }
.pi-card-brand { font-size: 12px; color: var(--color-on-surface-variant); }
.pi-card-qty-row { display: flex; align-items: center; gap: var(--space-base); margin-top: var(--space-xs); }
.pi-card-qty-btn {
  width: 30px; height: 30px; border-radius: var(--radius-full); border: none;
  background: var(--color-primary-container); color: var(--color-on-primary);
  font-size: 16px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pi-card-qty-btn:active { transform: scale(0.92); }
.pi-card-qty-val { font-size: 16px; font-weight: 700; min-width: 20px; text-align: center; }
.pi-card-expiry { font-size: 11px; margin-top: var(--space-hairline); }
.pi-card-expiry.ok { color: var(--color-on-surface-variant); }
.pi-card-expiry.warn { color: var(--color-warning); }
.pi-card-expiry.expired { color: var(--color-error); font-weight: 600; }
.pi-card-right {
  display: flex; flex-direction: column;
  align-items: flex-end; justify-content: space-between;
  flex-shrink: 0; gap: var(--space-xs);
}
.pi-toggle {
  position: relative; width: 44px; height: 26px;
  border-radius: 13px; background: var(--color-outline-variant);
  border: none; cursor: pointer; transition: background 0.2s; flex-shrink: 0;
}
.pi-toggle.on { background: var(--color-success); }
.pi-toggle::after {
  content: ''; position: absolute; top: var(--space-hairline); left: var(--space-hairline);
  width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--color-on-primary);
  transition: transform 0.2s; box-shadow: 0 1px 3px color-mix(in srgb, var(--color-on-surface) 20%, transparent);
}
.pi-toggle.on::after { transform: translateX(18px); }
.pi-toggle-label { font-size: 9px; color: var(--color-on-surface-variant); text-align: center; white-space: nowrap; }
.pi-card-del {
  width: 24px; height: 24px; border-radius: var(--radius-tight); border: none;
  background: transparent; color: var(--color-error);
  font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; opacity: 0.6;
}
.pi-card-del:active { opacity: 1; }
.pi-edit-overlay {
  position: fixed; inset: 0; background: color-mix(in srgb, var(--color-on-surface) 50%, transparent); z-index: 300;
  display: flex; align-items: flex-end; justify-content: center;
}
.pi-edit-sheet {
  background: var(--color-surface); border-radius: 16px 16px 0 0;
  padding: 20px 16px max(20px, env(safe-area-inset-bottom));
  width: 100%; max-width: 500px; max-height: 80vh; overflow-y: auto;
}
.pi-edit-sheet h3 { font-size: 17px; font-weight: 600; margin: 0 0 14px; }
.pi-edit-field { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-snug); }
.pi-edit-label { font-size: 12px; color: var(--color-on-surface-variant); font-weight: 500; }
.pi-edit-input {
  padding: 10px 14px; border-radius: var(--radius-snug);
  border: 1.5px solid var(--color-outline-variant);
  font-size: 15px;
  background: var(--color-surface-container); color: var(--color-on-surface);
  outline: none;
}
.pi-edit-input:focus { border-color: var(--color-primary-container); }
.pi-edit-actions { display: flex; gap: var(--space-snug); margin-top: var(--space-roomy); }
.pi-edit-actions button {
  flex: 1; padding: var(--space-sm); border-radius: var(--radius-md); border: none;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.pi-edit-actions .pi-edit-save { background: var(--color-primary-container); color: var(--color-on-primary); }
.pi-edit-actions .pi-edit-cancel { background: var(--color-surface-container); color: var(--color-on-surface); }

/* ── Utility classes added during inline-style extraction ─────────── */

/* Hidden file inputs — markup migrated to global .hidden 2026-05-03. */

/* Overview tab layout (mirrors fl-overview-* pattern) */
.sh-overview-wrap  { display: flex; flex-direction: column; gap: var(--space-gutter); padding: 0 16px 16px; }
/* .sh-overview-grid → .base-grid-cards | .sh-stat-grid → .base-grid-stats
   (pwa/styles/base.css). Markup composes both classes 2026-05-03. */

/* Fallback pattern card */
/* .sh-fallback-card migrated to .base-card (pwa/styles/base.css) */
.sh-fallback-card h3       { margin: 0 0 8px; }
.sh-fallback-card-subhead  { font-size: 13px; color: var(--color-on-surface-variant); }
.sh-fallback-card-body     { margin-top: var(--space-sm); }

/* Delete confirm button */
.sh-confirm-delete { background: var(--color-error); color: var(--color-on-primary); }

/* New list input */
.sh-new-list-input {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-md);
  border: 1.5px solid var(--color-outline-variant); font-size: 16px;
  outline: none; background: var(--color-surface-container); color: var(--color-on-surface);
}

/* Muted header action buttons (cancel / secondary) */
.sh-btn-muted { background: var(--color-surface-container); color: var(--color-on-surface); }

/* Move-picker bottom sheet list */
/* .sh-move-picker-list → .base-stack-tight in pwa/styles/base.css. Markup composes both. */
.sh-bs-btn-center    { text-align: center; }

/* loc chips add button */
.pi-loc-chip-add { border-style: dashed; color: var(--color-primary); }

/* Toggle-button column in card right area */
.pi-card-toggle-col { display: flex; flex-direction: column; align-items: center; gap: var(--space-hairline); }

/* Add-item form */
.pi-add-form           { display: none; padding: 12px 16px; }
.pi-add-form-inner     { display: flex; flex-direction: column; gap: var(--space-base); background: var(--color-surface-container); border-radius: var(--radius-roomy); padding: var(--space-roomy); }
.pi-add-form-row       { display: flex; gap: var(--space-base); }
/* .pi-add-form-row-qty → .base-row in pwa/styles/base.css. Markup composes both. */
.pi-add-input {
  padding: 10px 14px; border-radius: var(--radius-snug);
  border: 1.5px solid var(--color-outline-variant); font-size: 15px;
  background: var(--color-surface); color: var(--color-on-surface); outline: none;
}
.pi-add-input-flex    { flex: 1; padding: 10px 14px; border-radius: var(--radius-snug); border: 1.5px solid var(--color-outline-variant); font-size: 14px; background: var(--color-surface); color: var(--color-on-surface); outline: none; }
.pi-add-select {
  flex: 1; height: 40px; border-radius: var(--radius-snug);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface); color: var(--color-on-surface);
  padding: 0 8px; font-size: 14px;
}
.pi-add-qty-input {
  width: 60px; padding: var(--space-snug); border-radius: var(--radius-snug);
  border: 1.5px solid var(--color-outline-variant); font-size: 14px;
  background: var(--color-surface); color: var(--color-on-surface);
  text-align: center; outline: none;
}
.pi-add-expiry-input {
  flex: 1; padding: 10px 14px; border-radius: var(--radius-snug);
  border: 1.5px solid var(--color-outline-variant); font-size: 14px;
  background: var(--color-surface); color: var(--color-on-surface); outline: none;
}
.pi-add-scan-btn { background: var(--color-surface); color: var(--color-on-surface); }
.pi-add-submit {
  padding: var(--space-sm); border-radius: var(--radius-md); border: none;
  background: var(--color-primary); color: var(--color-on-primary);
  font-size: 15px; font-weight: 600; cursor: pointer;
}

/* Edit sheet row */
.pi-edit-row { display: flex; gap: var(--space-base); }
.pi-edit-field-flex { flex: 1; }

/* Scan thumbs strip */
.pi-scan-thumbs { display: flex; gap: var(--space-base); padding: 8px 16px; overflow-x: auto; }

/* Scan progress items-found label */
.pi-scan-items-found { margin-top: var(--space-base); font-size: 13px; }

/* Scan location picker area */
.pi-scan-loc-wrap  { padding: 8px 16px; }
.pi-scan-loc-label { font-size: 13px; color: var(--color-on-surface-variant); margin-bottom: var(--space-xs); display: block; }
.pi-scan-loc-select {
  width: 100%; height: 36px; border-radius: var(--radius-default);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container); color: var(--color-on-surface);
  padding: 0 8px; font-size: 14px;
}
.pi-scan-cat-select-inline {
  height: 28px; border-radius: var(--radius-tight);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container); color: var(--color-on-surface);
  font-size: 12px; padding: 0 4px;
}