/* (Legacy .search-bar styles removed v60 — the search input now lives in
   the static app header and uses .search-shell + #search-input rules in
   base.css. renderSearchBar is also gone; main.js wires the static input
   directly.) */

/* ---------- sample index ---------- */
.sample-index {
  padding: 4px 0 calc(var(--safe-bottom) + 24px);
}
/* The category rail is a desktop-only sidebar. sample-index.js always renders
   it into .sample-index-layout, so it must be explicitly hidden below the
   desktop breakpoint — its only other styles live in the @media block. */
.category-rail { display: none; }
/* Bento tile per category. Closed = a full-width color-tinted card with
   the category letter as a backdrop glyph. Open = same tile sits as a
   header, content rolls out beneath on flat dark background. */
.cat-group {
  margin: 0 12px 10px;
}
/* V4E-E V2 (symmetric mirror) — chiseled-stone closed card. Single
   warm-dark palette, no per-category color tint on the closed state.
   Centered Cormorant serif name, outline-only Cinzel watermark letter
   MIRRORED on both the left and the right edge (56px, 24px from each
   edge). Horizontal padding (72px) is bumped so the name + count sit
   comfortably between the two letters. Arrow removed. */
.cat-group > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--space-0);
  padding: 10px 72px;
  min-height: 88px;
  border-radius: 14px;
  background: linear-gradient(145deg, #181410 0%, #0e0c09 100%);
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgba(196, 152, 64, 0.06),
    inset 0 -2px 8px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  transition: transform var(--t-fast) ease;
}
.cat-group > summary:active { transform: scale(0.99); }
.cat-group[open] > summary {
  border-radius: 14px 14px 0 0;
}
.cat-group > summary::-webkit-details-marker { display: none; }
.cat-name {
  font-family: "Cormorant Garamond", "Cinzel", "Times New Roman", serif;
  font-weight: 600;
  font-size: var(--text-3xl);
  color: var(--fg);
  letter-spacing: 0.02em;
  line-height: 1.1;
  position: relative;
  z-index: 2;
}
.cat-count {
  font-size: var(--text-2xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(196, 152, 64, 0.75);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 2;
}
.cat-count::after {
  content: " · samples";
  opacity: 0.55;
}
/* Arrow is dropped in the V4E-E design — kept hidden as a marker that
   the element is the same .cat-arrow class for any future revival. */
.cat-arrow { display: none; }

/* Outline-only watermark letter, mirrored on BOTH edges with a small
   inset. Two glyphs are rendered per category (.left + .right) and the
   summary's 72px horizontal padding keeps the centered name + count
   clear of them. Scales to ~56px to stay proportional inside the 88px
   card. */
.cat-letter-glyph {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Cinzel", "Trajan Pro", "Cormorant Garamond", "Times New Roman", serif;
  font-size: 56px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(196, 152, 64, 0.28);
  text-stroke: 1.5px rgba(196, 152, 64, 0.28);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.cat-letter-glyph.left  { left: 24px; }
.cat-letter-glyph.right { right: 24px; }
/* Open-state content area. Flat dark, neutral border. No per-cat color. */
.cat-group[open] > .cat-body {
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 14px 14px;
  overflow: hidden;
}
.cat-group > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.sub-header {
  grid-column: 1 / -1;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 10px 16px 8px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  font-weight: 600;
}
/* First sub-header right after a rack-header doesn't need its own top
   border — the rack-header's bottom border already provides the divider. */
.rack-header + .sub-header {
  border-top: 0;
  margin-top: 0;
  padding-top: 8px;
}

.sample-row {
  display: flex;
  align-items: center;
  gap: var(--space-3-5);
  width: 100%;
  text-align: left;
  padding: var(--space-3-5) var(--space-4);
  border-top: 1px solid var(--bg-2);
  background: transparent;
  min-height: 56px;
  transition: background var(--t-fast) ease-out;
}
.sample-row:active { background: var(--bg-2); }

/* Bottle thumbnail. Bottles are tall portraits; object-fit:contain keeps the
   full silhouette visible inside a neutral square so the row's left edge
   stays aligned and scannable. */
.sample-row .thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sample-row .thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  box-sizing: border-box;
}

.sample-row .name { flex: 1; min-width: 0; }
.sample-row .name strong { display: block; font-weight: 500; line-height: 1.3; }
.sample-row .name small {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1-5);
  color: var(--fg-dim);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
  line-height: 1.25;
}
.sample-row .loc {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.search-results .sample-row {
  border-top: 1px solid var(--bg-2);
  padding: 14px 16px;
}
.search-results .sample-row .loc {
  background: rgba(196, 152, 64, 0.14);
  /* snap 7px bottom -> 6px to land on --space-1-5 (no visible change). */
  padding: var(--space-1-5) var(--space-3) var(--space-1-5);
  border-radius: 8px;
}
.search-results .sample-row .loc .loc-code {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.no-results {
  padding: var(--space-9) var(--space-6);
  text-align: center;
  color: var(--fg-dim);
  font-size: var(--text-lg);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3-5);
}
.no-results::before {
  content: "";
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px dashed var(--line);
  background:
    radial-gradient(circle at 50% 50%, rgba(196, 152, 64, 0.10) 0%, transparent 70%);
  display: block;
}

/* ---------- stock chip ---------- */
.stock-chip {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
  white-space: nowrap;
}
/* Stock states: gold = in stock, amber = low, oxblood = out.
   No green anywhere — matches owner's black-and-gold palette rule. */
.stock-chip[data-stock="in_stock"] { background: rgba(196, 152, 64, 0.18); color: var(--gold, #c49840); }
.stock-chip[data-stock="low"]      { background: rgba(210, 140, 40, 0.20); color: #d4942a; }
.stock-chip[data-stock="out"]      { background: rgba(140, 40, 40, 0.22);  color: #b05060; }
.stock-chip[data-stock="unknown"]  { background: var(--bg-3); color: var(--fg-dim); }

/* ---------- product detail ---------- */
.detail {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 50;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  /* Tell iOS to handle vertical pan natively but leave horizontal motion to
     our JS swipe handler. Without this, iOS may swallow horizontal touchmove
     events inside the vertical scroll container. */
  touch-action: pan-y;
  /* Option B zoom-fade: detail enters from 92% scale + 0 opacity, easing
     to full size + visible. Soft bounce-easing curve (0.2, 0.7, 0.3, 1)
     so it feels like the tapped card opened up rather than a flat fade. */
  transform-origin: center 30%;
  animation: detail-enter 280ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes detail-enter {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
/* Exit animation — mirror of the enter, played when back() or swipe-left
   fires. main.js adds .is-exiting, waits 200ms for the animation, then
   changes the hash (which finally swaps the view). */
.detail.is-exiting {
  animation: detail-exit 200ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes detail-exit {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.94); }
}
/* .detail-back canonical definition is lower in this file (desktop section). */

/* Invisible full-height tap zones on the left + right edges (10% of viewport
   each) for prev / next sample navigation. Replaces the visible ‹ › arrows
   that used to live in the hero card. z-index 10 sits ABOVE the cards (so
   taps land here) but BELOW .detail-edit (z 20) so the top-right logo
   button still receives clicks in the overlapping corner. Background is
   fully transparent — no visible UI. */
.nav-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10%;
  z-index: 10;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
}
.nav-zone-prev { left: 0; }
.nav-zone-next { right: 0; }
.nav-zone:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: -4px;
}
/* Customer mode (landscape) hides nav zones along with the rest of the
   touch chrome — the read-only customer view shouldn't navigate samples. */
body[data-mode="customer"] .nav-zone { display: none; }

.card {
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /* Contain any inner touch so it can't bleed into the page snap. */
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  padding: calc(var(--safe-top) + 60px) 24px calc(var(--safe-bottom) + 40px);
  position: relative;
}
.card-title {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--space-3);
}
.card-body {
  font-size: var(--text-2xl);
  line-height: 1.5;
  color: var(--fg);
}

/* hero card */
.card-hero { justify-content: flex-end; padding-top: 0; }
.card-hero .hero-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.card-hero .hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.85) 90%);
}
.card-hero .hero-content { position: relative; z-index: 1; }
.card-hero .cat-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.card-hero .cat-pill {
  font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  background: var(--cat, var(--bg-3));
  color: white;
}
.card-hero .subcat-pill {
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.card-hero .hero-origin {
  margin: 10px 0 0;
  font-size: 14px;
  font-style: italic;
  color: rgba(242, 237, 228, 0.7);
  letter-spacing: 0.01em;
  line-height: 1.35;
}
.card-hero .hero-loc {
  margin: 12px 0 0;
  font-size: 20px;
  color: rgba(242, 237, 228, 0.85);
  letter-spacing: 0.02em;
  line-height: 1.25;
}
.card-hero .hero-loc strong {
  color: var(--fg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* meta card (legacy — kept for back-compat) */
.meta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-4);
}
.meta-grid dt { font-size: var(--text-xs); color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.08em; }
.meta-grid dd { margin: 4px 0 0; font-size: 22px; font-weight: 500; }

/* hero tagline */
.card-tagline {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(242, 237, 228, 0.92);
  margin: 4px 0 0;
}

/* generic prose body for notes / maker / story / specs cards */
.card-prose {
  font-size: 19px;
  line-height: 1.55;
  font-weight: 300;
  color: var(--fg);
  margin-top: 12px;
}

/* The Maker — distiller / origin lines stacked above prose */
.meta-stack {
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3-5);
}
.meta-row-line {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 3px solid var(--cat, var(--accent));
  padding-left: 12px;
}
.meta-row-line dt {
  font-size: var(--text-xs);
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.meta-row-line dd {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 500;
}

/* customer-mode tagline */
.customer-tagline {
  font-size: clamp(15px, 1.8vw, 18px);
  color: rgba(242, 237, 228, 0.78);
  font-style: italic;
  margin-top: -4px;
  line-height: 1.4;
}

/* location card */
.card-location { align-items: center; justify-content: center; text-align: center; }
.card-location .loc-cat-big {
  font-size: clamp(20px, 5.5vw, 30px);
  font-weight: 600;
  color: var(--cat, var(--accent));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 16px;
  opacity: 0.95;
}
.card-location .loc-big {
  font-size: clamp(80px, 28vw, 140px);
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin: 4px 0 12px;
}
.card-location .loc-context {
  font-size: var(--text-xl);
  color: var(--fg-dim);
}

/* hint to scroll — pinned to bottom-right of the hero so it never collides
   with the rack-location line on small screens. Subtle bob, not a bounce. */
.scroll-hint {
  position: absolute;
  bottom: calc(var(--safe-bottom) + 14px);
  right: calc(var(--safe-right) + 18px);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(242, 237, 228, 0.7);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0);   opacity: 0.55; }
  50%      { transform: translateY(-3px); opacity: 0.95; }
}

/* ---------- customer mode (landscape) ---------- */
body[data-mode="customer"] .detail-back { display: none; }
body[data-mode="customer"] .card { display: none; }
body[data-mode="customer"] .detail-desktop { display: none; }
body[data-mode="customer"] .detail {
  scroll-snap-type: none;
  overflow: hidden;
}
body[data-mode="customer"] .customer-view {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0;
  background: var(--bg);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.customer-view { display: none; }
body[data-mode="customer"] .customer-view { display: grid; }
.customer-hero {
  background-size: cover;
  background-position: center;
  position: relative;
}
.customer-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 70%, var(--bg) 100%);
}
.customer-info {
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.customer-info .cat-pill {
  font-size: 13px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px;
  background: var(--cat, var(--bg-3));
  color: white;
  align-self: flex-start;
}
.customer-info h2 {
  font-size: clamp(28px, 4.5vw, 48px);
  margin: 0;
  font-weight: 600;
  line-height: 1.1;
}
.customer-info .tasting {
  font-size: clamp(18px, 2.4vw, 26px);
  line-height: 1.4;
  color: var(--fg);
}
.customer-info .meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  font-size: clamp(14px, 1.6vw, 18px);
  color: rgba(242, 237, 228, 0.72);
  border-top: 1px solid var(--line);
  padding-top: 18px;
  line-height: 1.5;
}
.customer-info .meta-row strong {
  color: var(--fg);
  font-weight: 600;
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}

/* (Legacy .settings-btn styles removed v60 — the gear is now .gear-pill,
   styled in base.css inside .search-shell. The button ID #settings-btn is
   preserved so main.js's existing click handler still binds.) */

.settings-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 100;
  display: flex; flex-direction: column;
  animation: settings-enter 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes settings-enter {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.settings-header {
  display: flex; align-items: center;
  padding: calc(var(--safe-top) + 8px) 16px 12px;
  border-bottom: 1px solid var(--line);
}
.settings-back {
  background: transparent; border: 0;
  color: var(--fg);
  font-size: 28px; width: 44px; height: 44px;
  cursor: pointer; padding: 0;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-fast) ease-out;
}
.settings-back:hover  { background: rgba(255,255,255,0.05); }
.settings-back:active { background: rgba(255,255,255,0.08); }
.settings-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.settings-header h2 {
  margin: 0 0 0 4px;
  font-size: var(--text-2xl);
  font-weight: 600;
}
.settings-main {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: calc(var(--safe-bottom) + 24px);
}

.settings-menu {
  list-style: none; margin: 0; padding: 0;
}
/* Rows live inside a section card (border + radius on the parent .settings-menu).
   Each row itself is a borderless transparent button — separators between
   rows come from the .settings-section .settings-menu li + li rule. */
.settings-row {
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  color: var(--fg);
  font-size: var(--text-xl);
  cursor: pointer;
  transition: background var(--t-fast) ease-out;
}
.settings-row:hover  { background: rgba(255,255,255,0.04); }
.settings-row:active { background: rgba(255,255,255,0.07); }
.settings-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.settings-row-arrow {
  color: var(--fg-dim);
  transition: transform var(--t-fast) ease-out;
}
.settings-row:hover .settings-row-arrow { transform: translateX(2px); color: var(--fg); }

.settings-notice {
  margin-top: 24px;
  padding: var(--space-3-5) var(--space-4);
  background: rgba(255,180,80,0.1);
  border: 1px solid rgba(255,180,80,0.3);
  border-radius: var(--r-md);
  color: rgba(242, 237, 228, 0.78);
  font-size: var(--text-md);
  line-height: 1.55;
}
.settings-notice code {
  background: rgba(255,255,255,0.06);
  padding: 1px 5px; border-radius: 4px;
  font-size: 11px;
}

/* Add Product form */
.add-product-form h3 {
  margin: 0 0 6px;
  font-size: var(--text-2xl);
}
.add-product-form .form-hint {
  color: var(--fg-dim);
  font-size: var(--text-md);
  margin: 0 0 18px;
}
.add-product-form label {
  display: flex; flex-direction: column;
  gap: var(--space-1-5);
  margin-bottom: var(--space-3-5);
  font-size: var(--text-md);
  color: var(--fg-dim);
}

/* Duplicate name warning — non-blocking amber hint under the name input. */
.add-dup-warn {
  display: block;
  padding: 7px 10px;
  background: rgba(196, 152, 64, 0.12);
  border: 1px solid rgba(196, 152, 64, 0.35);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: #e3bd6e;
  line-height: 1.4;
}
.add-dup-warn[hidden] { display: none; }

/* Post-submit confirmation toast — appears at the top of the add pane. */
.add-toast {
  padding: 10px 14px;
  background: rgba(196, 152, 64, 0.14);
  border: 1px solid rgba(196, 152, 64, 0.4);
  border-radius: var(--r-md);
  font-size: 13px;
  color: #f2ede4;
  margin-bottom: 14px;
}
.add-toast[data-tone="err"] {
  background: rgba(217, 101, 101, 0.12);
  border-color: rgba(217, 101, 101, 0.35);
  color: #d96565;
}
.add-toast[hidden] { display: none; }

/* Photo field — visually prominent on the add form (second after name). */
.add-photo-prominent {
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--fg-dim);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Collapsible "More details" section on the add form. */
.add-optional-details {
  margin-bottom: 14px;
}
.add-optional-summary {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-dim);
  cursor: pointer;
  padding: 10px 0 6px;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.add-optional-summary::-webkit-details-marker { display: none; }
.add-optional-summary::before {
  content: "▸";
  display: inline-block;
  font-size: 11px;
  transition: transform var(--t-fast) ease-out;
}
.add-optional-details[open] .add-optional-summary::before {
  transform: rotate(90deg);
}
.add-optional-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.add-optional-hint {
  font-size: 11px;
  color: var(--fg-mute);
  font-weight: 400;
}
.add-optional-body {
  padding-top: 8px;
}
.add-product-form .req { color: #e07a55; }
.add-product-form input,
.add-product-form select {
  width: 100%;
  background: var(--bg-2);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-size: 16px;
  outline: none;
  -webkit-appearance: none;
  transition: border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}
.add-product-form select { cursor: pointer; }
.add-product-form input:focus,
.add-product-form select:focus { border-color: var(--accent); }
.add-product-form input:focus-visible,
.add-product-form select:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(196, 152, 64, 0.22);
}

.stock-toggle .toggle-row {
  display: flex; gap: 8px;
}
.toggle-btn {
  flex: 1;
  background: var(--bg-2);
  color: var(--fg-dim);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px;
  font-size: var(--text-base);
  cursor: pointer;
  min-height: 44px;
  transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out, border-color var(--t-fast) ease-out;
}
.toggle-btn:hover:not(.active) { color: var(--fg); border-color: rgba(255,255,255,0.18); }
.toggle-btn.active {
  background: var(--accent);
  color: #0a0a0a;
  border-color: var(--accent);
  font-weight: 600;
}
.toggle-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.primary-btn {
  width: 100%;
  background: var(--accent);
  color: #0a0a0a;
  border: 0;
  border-radius: var(--r-md);
  padding: 14px;
  font-size: var(--text-xl);
  font-weight: 600;
  cursor: pointer;
  margin-top: 6px;
  min-height: 44px;
  letter-spacing: 0.01em;
  transition: filter var(--t-fast) ease-out, transform var(--t-fast) ease-out;
}
.primary-btn:hover:not(:disabled)  { filter: brightness(1.06); }
.primary-btn:active:not(:disabled) { transform: scale(0.985); }
.primary-btn:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}
.primary-btn:disabled { opacity: 0.55; cursor: default; }

.form-status {
  margin-top: 12px;
  padding: 12px;
  background: var(--bg-2);
  border-radius: var(--r-md);
  font-size: var(--text-md);
  color: var(--fg-dim);
}

/* Queue list */
.queue-loading,
.queue-empty {
  color: var(--fg-dim);
  font-size: var(--text-base);
  padding: 16px 0;
}
.settings-main h3 {
  margin: 18px 0 10px;
  font-size: var(--text-md);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-dim);
  font-weight: 600;
}
.settings-main h3.recent-title { margin-top: 28px; }
.queue-list {
  list-style: none; margin: 0; padding: 0;
}
.queue-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  gap: 4px 8px;
  padding: var(--space-3);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: var(--space-2);
  position: relative;
}
.queue-name {
  grid-column: 1 / 2;
  grid-row: 1;
  font-size: var(--text-xl);
  font-weight: 500;
}
.queue-meta {
  grid-column: 1 / 2;
  grid-row: 2;
  color: var(--fg-dim);
  font-size: var(--text-sm);
}
.queue-status {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  align-self: center;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.4;
}
.queue-status.status-queued     { background: rgba(255,180,80,0.18); color: #e3a35a; }
.queue-status.status-processing { background: rgba(196,152,64,0.20); color: #c49840; }
.queue-status.status-processed  { background: rgba(196,152,64,0.18); color: #e3bd6e; }
.queue-status.status-failed     { background: rgba(220,80,80,0.18);  color: #d96565; }

.queue-delete {
  position: absolute;
  top: 4px; right: 4px;
  background: transparent; border: 0;
  color: var(--fg-dim);
  font-size: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out;
}
.queue-delete:hover { background: rgba(255,255,255,0.04); color: var(--fg); }
.queue-delete:active { background: rgba(255,255,255,0.08); color: var(--fg); }
.queue-delete:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Retry button on failed/duplicate rows — sits left of the delete button. */
.queue-retry {
  position: absolute;
  top: 4px; right: 44px;
  background: transparent; border: 0;
  color: var(--fg-dim);
  font-size: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out;
}
.queue-retry:hover { background: rgba(255,255,255,0.04); color: var(--fg); }
.queue-retry:active { background: rgba(255,255,255,0.08); color: var(--fg); }
.queue-retry:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* New statuses introduced by the automated pipeline. */
.queue-status.status-researching { background: rgba(196,152,64,0.20);  color: #c49840; }
.queue-status.status-drafted     { background: rgba(255,200,80,0.22);  color: #f0b94a; }
.queue-status.status-published   { background: rgba(196,152,64,0.30);  color: #f2ede4; }
.queue-status.status-duplicate   { background: rgba(180,120,200,0.22); color: #c98ad6; }

/* Drafted row — the entire .queue-item is tappable via an inner <button>
   that uses display:contents so its children flow into the parent grid. */
.queue-review-btn {
  display: contents;
  background: transparent; border: 0;
  text-align: left;
  cursor: pointer;
}
.queue-review-btn:active .queue-name { color: var(--accent, #c49840); }
.queue-item.drafted { cursor: pointer; }

/* Thumbnail on a drafted queue row. 48px square — enough to recognise a
   bottle label at a glance without pushing the row height significantly. */
.queue-thumb {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: var(--r-sm);
  background: var(--bg-3);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}
.queue-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-sm);
}
/* When a thumbnail is present, bump grid to accommodate it without breaking
   the existing name/meta/status layout. */
.queue-item.has-thumb {
  grid-template-columns: 48px 1fr auto;
  gap: 4px 10px;
}
.queue-item.has-thumb .queue-name  { grid-column: 2 / 3; }
.queue-item.has-thumb .queue-meta  { grid-column: 2 / 3; }
.queue-item.has-thumb .queue-status { grid-column: 3 / 4; }

/* Inline error message on retry/delete failures — appears below the item. */
.queue-inline-err {
  grid-column: 1 / -1;
  font-size: 12px;
  color: #d96565;
  padding: 4px 0 0;
}

/* Flagged label in the review form — left amber border + slight background
   tint to draw attention without obscuring the field content. */
.review-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--fg-dim);
}
.review-label.flagged-label {
  padding-left: 10px;
  border-left: 3px solid var(--warn, #c49840);
  background: rgba(196, 152, 64, 0.05);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* Flag count badge on a drafted row's status pill ("⚠ 3"). */
.queue-flag-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  background: rgba(255,200,80,0.30);
  color: #f0b94a;
}

/* Activity-log entry: <a> wrapper, same display:contents trick. */
.queue-pub-link {
  display: contents;
  color: inherit;
  text-decoration: none;
}
.queue-pub-link:active .queue-name { color: var(--accent, #c49840); }

/* auto/manual chip in the activity log. */
.queue-source {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  border-radius: 999px;
}
.queue-source.auto   { background: rgba(196,152,64,0.18);  color: #c49840; }
.queue-source.manual { background: rgba(255,255,255,0.10); color: var(--fg-dim); }

/* Settings menu count chip — e.g. "● 3 ready" next to Pending Queue. */
.settings-row-count {
  font-size: 11px;
  color: #f0b94a;
  margin-right: 8px;
  font-weight: 500;
}

/* Photo input on the Add Product form. */
.photo-input-label .form-hint-inline {
  display: inline;
  font-size: 11px;
  color: var(--fg-dim);
  font-weight: normal;
  margin-left: 4px;
}
.photo-preview { margin: 8px 0 16px; text-align: center; }

/* ---------- Shared photo-upload widget ---------------------------------- */
/* Used by both the Add Product form (settings.js) and the sample edit page
   (sample-edit-page.js). One big button that opens the OS photo picker;
   client-side compresses + uploads to Drive via the shared widget in
   photo-upload.js. */
.photo-upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.photo-upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--bg-2);
  color: var(--fg);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  padding: 16px 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  min-height: 56px;
  transition: background var(--t-fast) ease-out, border-color var(--t-fast) ease-out;
}
.photo-upload-btn:hover:not(:disabled) {
  background: var(--bg-3);
  border-color: var(--accent);
  color: var(--accent);
}
.photo-upload-btn:active:not(:disabled) { transform: scale(0.99); }
.photo-upload-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.photo-upload-btn:disabled { opacity: 0.55; cursor: default; }
.photo-upload-btn-icon { font-size: 20px; line-height: 1; }
.photo-upload-btn-label { line-height: 1.2; }

.photo-upload-status {
  font-size: 12px;
  color: var(--fg-dim);
  text-align: center;
  padding: 4px 8px;
}
.photo-upload-status[data-tone="ok"]  { color: #c49840; }
.photo-upload-status[data-tone="err"] { color: #d96565; }

/* Explicit `display: flex` would normally win over the user-agent
   `[hidden] { display: none }` rule, so re-assert it for both children. */
.photo-upload [hidden] { display: none !important; }

.photo-upload-preview {
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--bg-2);
  overflow: hidden;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.photo-upload-preview img {
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  display: block;
  border-radius: var(--r-sm);
}
.photo-upload-preview-actions {
  display: flex;
  gap: 16px;
  padding: 4px 0 2px;
}
.photo-upload-link {
  background: transparent;
  color: var(--fg-dim);
  border: 0;
  padding: 6px 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-fast) ease-out;
}
.photo-upload-link:hover:not(:disabled)  { color: var(--accent); }
.photo-upload-link:disabled              { opacity: 0.5; cursor: default; }
.photo-upload-link-danger:hover:not(:disabled) { color: var(--bad); }

.photo-upload-advanced {
  margin-top: 2px;
}
.photo-upload-advanced > summary {
  font-size: 12px;
  color: var(--fg-mute);
  cursor: pointer;
  padding: 4px 0;
  user-select: none;
  list-style: none;
}
.photo-upload-advanced > summary::-webkit-details-marker { display: none; }
.photo-upload-advanced > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform var(--t-fast) ease-out;
}
.photo-upload-advanced[open] > summary::before {
  content: "▾ ";
}
.photo-upload-advanced > summary:hover { color: var(--fg-dim); }
.photo-upload-url {
  display: block;
  width: 100%;
  margin-top: 6px;
  background: var(--bg-2);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}
.photo-upload-url:focus,
.photo-upload-url:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(196, 152, 64, 0.18);
}

/* ---------- review sub-pane (drafted-row review + publish flow) ---------- */
.review-form {
  padding: 8px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.review-form h3 { margin: 0 0 4px; }
.review-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--fg-dim);
}
.review-form input,
.review-form textarea,
.review-form select {
  font: inherit;
  color: var(--fg);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 8px);
  padding: 10px 12px;
  outline: none;
  transition: border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}
.review-form select { cursor: pointer; }
.review-form input:focus,
.review-form textarea:focus,
.review-form select:focus { border-color: var(--accent); }
.review-form input:focus-visible,
.review-form textarea:focus-visible,
.review-form select:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(196, 152, 64, 0.22);
}
.review-form textarea { resize: vertical; min-height: 60px; }
.review-photo { margin: 0; text-align: center; }
.review-flags-summary {
  margin: 0 0 6px;
  padding: 10px 12px;
  background: rgba(255,200,80,0.10);
  border: 1px solid rgba(255,200,80,0.30);
  border-radius: 8px;
  font-size: 13px;
  color: #f0b94a;
}
.review-flags-summary.review-flags-blocking {
  background: rgba(232,90,124,0.12);
  border-color: rgba(232,90,124,0.40);
  color: #e85a7c;
  font-weight: 600;
}
.review-flags-summary.review-flags-verify {
  background: rgba(180,180,200,0.08);
  border-color: rgba(180,180,200,0.20);
  color: #b0b0bc;
  font-weight: 400;
}
.review-flag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  background: rgba(255,200,80,0.22);
  color: #f0b94a;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.review-image-preview { margin: -6px 0 4px; text-align: center; }
.review-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
/* Global secondary-btn / link-btn — used by review-actions and any settings
   pane outside the scoped .edit-access-actions parent. The scoped rules still
   take precedence where they apply (no conflict). */
.secondary-btn {
  background: var(--bg-2);
  color: var(--fg);
  border: 1px solid var(--line);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-sm);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;
  transition: background var(--t-fast) ease-out, border-color var(--t-fast) ease-out;
}
.secondary-btn:hover:not(:disabled)  { background: var(--bg-3); border-color: rgba(255,255,255,0.18); }
.secondary-btn:active:not(:disabled) { background: var(--bg-3); }
.secondary-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.secondary-btn:disabled { opacity: 0.55; cursor: default; }
.link-btn {
  background: transparent;
  color: var(--fg-dim);
  border: 0;
  padding: 12px 8px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;
  transition: color var(--t-fast) ease-out;
}
.link-btn:hover:not(:disabled)  { color: var(--fg); }
.link-btn:active:not(:disabled) { color: var(--fg); }
.link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.link-btn:disabled { opacity: 0.55; cursor: default; }

/* ---------- in-app sample editor ---------- */
/* Edit button — top-right of the detail view. Uses the same SRSW logo
   mark as the home-page Settings entry (.logo-mark in base.css) so the
   icon language is consistent: white seal on a soft drop-shadow, no
   chrome. Function is unchanged (opens the full sample edit page);
   only the visual changed from the legacy ✎ pencil glyph. */
.detail-edit {
  position: absolute;
  /* Enlarged TAP AREA (change C): the button is 44x44 for a reliable phone hit
     target, but the seal glyph stays VISUALLY 32px — background-size is pinned
     to 32px (not `contain`) and centred, so the icon size is unchanged while the
     transparent padding ring around it absorbs near-misses. Top/right offsets
     drop by 6px (12 → 6) to keep the 32px seal's visible position identical now
     that the button grew 6px on every side. */
  top: calc(var(--safe-top) + 6px);
  right: calc(var(--safe-right) + 6px);
  z-index: 20;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-image: url("/public/icons/srsw-logo-white.png");
  background-size: 32px 32px;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  /* Subtle soft glow so the white seal reads against bottle imagery. */
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 8px rgba(255, 255, 255, 0.18));
  transition: filter var(--t-fast) ease-out, transform var(--t-fast) ease-out;
}
.detail-edit:hover {
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.7))
          drop-shadow(0 0 10px rgba(255, 255, 255, 0.32));
}
.detail-edit:active {
  transform: scale(0.94);
}

/* Back-to-list button — desktop only (phone keeps the swipe-to-go-back
   gesture). Top-left, z 21 so it sits above the .nav-zone edge (z 10) and
   always goes back to the list rather than to the previous sample. */
.detail-back {
  position: absolute;
  top: calc(var(--safe-top) + 12px);
  left: calc(var(--safe-left, 0px) + 12px);
  z-index: 21;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  color: #f2ede4;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background var(--t-fast) ease-out, transform var(--t-fast) ease-out;
}
.detail-back svg { width: 22px; height: 22px; display: block; }
.detail-back:hover { background: rgba(0, 0, 0, 0.62); }
.detail-back:active { transform: scale(0.94); }
.detail-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 900px) {
  .detail-back { display: inline-flex; }
}
/* Customer kiosk view has no list to return to — hide it like the nav zones. */
body[data-mode="customer"] .detail-back { display: none; }

/* Locked state: shown to users without write access. The pencil is grayed
   out but still visible — tapping routes to Settings → Edit access so a
   user who's never set up the write secret can discover what's missing
   instead of being silently locked out of the edit flow. */
.detail-edit-locked {
  opacity: 0.45;
  filter: grayscale(0.6);
}
.detail-edit-locked:active {
  opacity: 0.65;
}

/* Edit-mode chrome — only visible when editing is on. */
.detail [data-edit] .edit-mark { display: none; }
.detail[data-editing="on"] [data-edit] .edit-mark {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  opacity: 0.8;
}
.detail[data-editing="on"] [data-edit] {
  cursor: pointer;
  outline: 1px dashed rgba(255, 255, 255, 0.45);
  outline-offset: 3px;
  border-radius: 4px;
  transition: outline-color var(--t-fast) ease-out;
}
.detail[data-editing="on"] [data-edit]:active {
  outline-color: var(--accent);
}
.detail[data-editing="on"] [data-edit].is-pending {
  outline: 1px solid var(--accent);
  background: rgba(196, 152, 64, 0.12);
}
.detail [data-edit="rack"].is-pending strong::after {
  content: " •";
  color: var(--accent);
}

/* Empty subcategory placeholder — only shown when editing. */
.subcat-pill-empty {
  opacity: 0.7;
  border: 1px dashed rgba(255, 255, 255, 0.4);
  background: transparent !important;
}

/* Customer mode is read-only — hide the pencil and disable edit chrome. */
body[data-mode="customer"] .detail-edit { display: none; }
body[data-mode="customer"] .detail[data-editing="on"] [data-edit] { outline: none; }

/* Sticky save bar — slides up from the bottom when pending edits exist. */
.save-bar {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px calc(var(--safe-bottom) + 12px);
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
}
.save-bar[hidden] { display: none; }
.save-bar-count {
  flex: 1;
  font-size: var(--text-base);
  color: var(--fg-dim);
}
.save-bar-cancel {
  background: transparent;
  color: var(--fg-dim);
  padding: 12px 16px;
  border-radius: var(--r-sm);
  font-weight: 500;
  border: 0;
  cursor: pointer;
  min-height: 44px;
  transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out;
}
.save-bar-cancel:hover  { color: var(--fg); }
.save-bar-cancel:active { background: var(--line); color: var(--fg); }
.save-bar-cancel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.save-bar-save {
  background: var(--accent);
  color: #0a0a0a;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  font-weight: 600;
  border: 0;
  cursor: pointer;
  min-height: 44px;
  transition: filter var(--t-fast) ease-out, transform var(--t-fast) ease-out;
}
.save-bar-save:hover:not(:disabled)  { filter: brightness(1.06); }
.save-bar-save:active:not(:disabled) { transform: scale(0.98); }
.save-bar-save:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.save-bar-save:disabled { opacity: 0.5; cursor: default; }

/* ---------- bottom-sheet pickers ---------- */
.picker-overlay {
  position: fixed;
  inset: 0;
  /* Above the full-screen Settings overlay (z 100) + toast (z 100). The picker
     is a modal bottom-sheet and must sit on top of whatever opened it — incl.
     Settings → Archived → Restore, where a lower z left it buried behind the
     opaque Settings panel (invisible on phone, behind the tab on desktop). */
  z-index: 110;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}
.picker-overlay.open { pointer-events: auto; }
.picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
}
.picker-overlay.open .picker-backdrop { opacity: 1; }
.picker-sheet {
  position: relative;
  width: 100%;
  max-height: 75vh;
  background: var(--bg-2);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform var(--t-slow) var(--ease);
  padding-bottom: var(--safe-bottom);
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.5);
}
/* Drag-handle affordance on the picker sheet — small grey pill telling the
   user this thing came from below and can be dismissed. */
.picker-sheet::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
.picker-header { padding-top: 20px; }
.picker-overlay.open .picker-sheet { transform: translateY(0); }
.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 8px;
  border-bottom: 1px solid var(--line);
}
.picker-header h3 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
}
.picker-close {
  background: transparent;
  border: 0;
  color: var(--fg-dim);
  font-size: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out;
}
.picker-close:hover  { background: rgba(255,255,255,0.06); color: var(--fg); }
.picker-close:active { background: rgba(255,255,255,0.10); color: var(--fg); }
.picker-close:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.picker-body {
  overflow-y: auto;
  padding: 6px 0;
  -webkit-overflow-scrolling: touch;
}
.picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.picker-row {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: 14px 18px;
  border-top: 1px solid var(--bg);
  cursor: pointer;
  font-size: var(--text-lg);
  min-height: 48px;
  transition: background var(--t-fast) ease-out;
}
.picker-row:first-child { border-top: 0; }
.picker-row:hover  { background: rgba(255,255,255,0.03); }
.picker-row:active { background: var(--bg); }
.picker-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.picker-row-label { flex: 1; }
.picker-row-meta {
  font-size: var(--text-md);
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}
.picker-row-letter {
  display: inline-block;
  min-width: 26px;
  text-align: center;
  background: var(--bg);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
  font-size: var(--text-md);
}
.picker-row.is-current { background: rgba(196, 152, 64, 0.08); }
.picker-row.is-current .picker-row-label { color: var(--accent); }
.picker-row.is-full .picker-row-meta { color: #d96565; }
.picker-row.is-new .picker-row-label { color: var(--accent); font-weight: 500; }
.picker-row.is-disabled { opacity: 0.45; cursor: not-allowed; }
.picker-row.is-disabled:hover { background: transparent; }
.picker-empty {
  padding: 24px 16px;
  color: var(--fg-dim);
  text-align: center;
  font-size: var(--text-base);
}

/* ---------- dev mode banner (localhost-only, intercepts writes) ---------- */
.devmode-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 6px 12px calc(6px + env(safe-area-inset-top, 0));
  background: #9b2a6b;
  color: #ffffff;
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.04em;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
body:has(.devmode-banner) #app { padding-top: 32px; }

/* ---------- search results: category section header ---------- */
.search-cat-header {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: var(--space-2-5);
  padding: 12px 12px;
  margin: 16px 0 0;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg);
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.search-results > .search-cat-header:first-child { margin-top: 0; }
.search-cat-count {
  color: var(--fg-dim);
  font-size: var(--text-md);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ---------- rack header on the browse index (one per rack inside a category) ---------- */
.rack-header {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: var(--space-2);
  padding: 10px 12px;
  margin: 14px 0 0;
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--fg-dim);
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* First rack in a category — no extra top space, sits flush under the
   category summary so the section doesn't get a double gap. */
.cat-body > .rack-header:first-child { margin-top: 0; }
.rack-header-name {
  font-family: ui-monospace, SF Mono, Menlo, monospace;
  font-size: var(--text-base);
  letter-spacing: 0.06em;
  color: var(--fg);
}
.rack-header-name::after {
  content: "·";
  color: var(--fg-mute);
  margin-left: 4px;
}
.rack-header-count {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-md);
  font-weight: 500;
}
.rack-header.is-over {
  color: #d96565;
  background: rgba(217, 101, 101, 0.08);
  border-top-color: rgba(217, 101, 101, 0.55);
  border-bottom-color: rgba(217, 101, 101, 0.55);
}
.rack-header.is-over .rack-header-name,
.rack-header.is-over .rack-header-name::after {
  color: #d96565;
}

/* ---------- danger zone at the bottom of the edit form ---------- */
.edit-danger-zone {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px dashed rgba(217, 101, 101, 0.4);
}
.danger-btn {
  width: 100%;
  background: transparent;
  color: #d96565;
  border: 1px solid rgba(217, 101, 101, 0.5);
  padding: 14px 16px;
  border-radius: 12px;
  font-size: var(--text-lg);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
  min-height: 48px;
}
.danger-btn:hover:not(:disabled) {
  background: rgba(217, 101, 101, 0.08);
}
.danger-btn:active:not(:disabled) {
  transform: scale(0.99);
}
.danger-btn.is-confirming {
  background: #d96565;
  color: #ffffff;
  border-color: #d96565;
}
.danger-btn:disabled { opacity: 0.6; cursor: default; }
.danger-hint {
  margin: 10px 4px 0;
  font-size: var(--text-xs);
  color: var(--fg-mute);
  text-align: center;
  line-height: 1.4;
}

/* ---------- Recently deleted pane ---------- */
.deleted-pane {
  padding: 14px 16px 16px;
  max-width: 760px;
  margin: 0 auto;
}
.deleted-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}
.deleted-title {
  font-size: var(--text-xl);
  font-weight: 600;
  margin: 0;
  color: var(--fg);
}
.deleted-intro {
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--fg-dim);
  margin: 0 0 14px;
}
.deleted-empty {
  padding: 28px 0;
  text-align: center;
  color: var(--fg-dim);
  font-size: var(--text-md);
}
.deleted-row {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.deleted-row-header {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--fg-dim);
  margin-bottom: 6px;
}
.deleted-row-date { font-variant-numeric: tabular-nums; }
.deleted-row-user { font-weight: 500; }
.deleted-row-name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 4px;
  line-height: 1.3;
}
.deleted-row-meta {
  font-size: var(--text-sm);
  color: var(--fg-mute);
  margin: 0;
}

/* ---------- archive / restore (edit page) + archived list ---------- */
.edit-archive-zone {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.edit-archive-zone .archive-btn,
.edit-archive-zone .restore-btn {
  width: 100%;
  padding: 11px 14px;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.edit-archive-zone .archive-btn {
  border: 1px solid rgba(176, 132, 51, 0.5);
  background: rgba(176, 132, 51, 0.12);
  color: var(--fg);
}
.edit-archive-zone .restore-btn {
  border: 1px solid rgba(196, 152, 64, 0.55);
  background: rgba(196, 152, 64, 0.12);
  color: var(--fg);
}
.edit-archive-zone .archive-hint {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg-mute);
}
.archived-row-actions { margin-top: 10px; }
.archived-restore-btn {
  padding: 7px 14px;
  border-radius: 7px;
  border: 1px solid rgba(196, 152, 64, 0.55);
  background: rgba(196, 152, 64, 0.12);
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.archived-restore-btn:disabled { opacity: 0.6; cursor: default; }

/* ---------- rack over-cap notice (shown under rack <select> in editor) ---------- */
.rack-over-notice {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: rgba(217, 101, 101, 0.10);
  border: 1px solid rgba(217, 101, 101, 0.35);
  border-radius: 8px;
  font-size: var(--text-sm);
  line-height: 1.35;
  color: #d96565;
}
.rack-over-notice[hidden] { display: none; }

/* ---------- settings menu sections (Samples / Security / About this app) ---------- */
.settings-section + .settings-section { margin-top: var(--space-5); }
.settings-section-title {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0 0 6px;
  padding: 0 16px;
}
.settings-section .settings-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.settings-section .settings-menu li + li {
  border-top: 1px solid var(--line);
}

/* ---------- Help pane ---------- */
.help-pane {
  padding: 16px;
  max-width: 760px;
  margin: 0 auto;
  color: var(--fg);
}
.help-section + .help-section { margin-top: 24px; }
.help-section-title {
  font-size: var(--text-xl);
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--fg);
}
.help-section-intro {
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--fg-dim);
  margin: 10px 0 0;
}
.help-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
}
.help-diagram {
  display: block;
  width: 100%;
  height: auto;
  max-width: 600px;
  margin: 0 auto;
}
.help-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.help-stat {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.help-stat strong {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.help-stat span {
  font-size: var(--text-xs);
  color: var(--fg-dim);
  text-align: center;
  line-height: 1.2;
}
@media (max-width: 380px) {
  .help-stats { grid-template-columns: repeat(2, 1fr); }
}
.help-stock-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.help-stock-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--text-base);
}
/* .help-stock-emoji removed — replaced by plain .help-stock-dot */
.help-stock-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.help-stock-text {
  color: var(--fg);
}
.help-palette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 6px;
}
.help-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--swatch) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--swatch) 40%, transparent);
}
.help-swatch-letter {
  font-size: 14px;
  font-weight: 700;
  color: var(--swatch, var(--fg));
  font-family: ui-monospace, SF Mono, Menlo, monospace;
}
.help-swatch-name {
  font-size: var(--text-2xs);
  color: var(--fg-dim);
  text-align: center;
  line-height: 1.15;
}
.help-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.help-item {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}
.help-item-title {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--fg);
}
.help-item-body {
  font-size: var(--text-md);
  line-height: 1.5;
  margin: 0;
  color: var(--fg);
}
.help-foot {
  margin: 24px 0 8px;
  font-size: var(--text-sm);
  color: var(--fg-dim);
  text-align: center;
  font-style: italic;
}

/* ---------- Settings menu — sub-labels under each row ---------- */
.settings-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    "label count arrow"
    "sub   sub   sub";
  align-items: center;
  text-align: left;
  width: 100%;
  padding: 12px 16px;
  gap: 2px 10px;
}
.settings-row-label { grid-area: label; }
.settings-row-count { grid-area: count; }
.settings-row-arrow { grid-area: arrow; }
.settings-row-sub {
  grid-area: sub;
  font-size: var(--text-sm);
  color: var(--fg-dim);
  line-height: 1.3;
  margin-top: 2px;
}

/* ---------- Feedback pane: sub-tab pills ---------- */
.feedback-pane {
  padding: 12px 16px 16px;
  max-width: 760px;
  margin: 0 auto;
}
.feedback-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 999px;
  margin: 0 0 12px;
}
.feedback-tab {
  font-size: var(--text-md);
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--fg-dim);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--t-fast) ease, background var(--t-fast) ease;
  min-height: 32px;
}
.feedback-tab:hover { color: var(--fg); }
.feedback-tab.is-active {
  background: var(--accent);
  color: #0a0a0a;
  font-weight: 600;
}
.feedback-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.feedback-content > .changelog-pane,
.feedback-content > .bugs-pane {
  padding: 0;
}

/* ---------- Changelog pane ---------- */
.changelog-pane {
  padding: 16px;
  max-width: 760px;
  margin: 0 auto;
}
.changelog-loading,
.changelog-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--fg-dim);
  font-size: 14px;
}
.changelog-entry {
  background: var(--bg-elev, rgba(255,255,255,0.03));
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.changelog-entry-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.changelog-entry-date {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--fg-dim);
  letter-spacing: 0.02em;
}
.changelog-entry-title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0;
  color: var(--fg);
}
.changelog-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}
.changelog-list li {
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--fg);
}
.changelog-foot {
  margin: 16px 0 8px;
  font-size: var(--text-sm);
  color: var(--fg-dim);
  text-align: center;
  font-style: italic;
}

/* ---------- Bug Reports pane ---------- */
.bugs-pane {
  padding: 16px;
  max-width: 760px;
  margin: 0 auto;
}
.bugs-section-title {
  font-size: var(--text-xl);
  font-weight: 600;
  margin: 0;
  color: var(--fg);
}
.bugs-form-section {
  background: var(--bg-elev, rgba(255,255,255,0.03));
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 22px;
}
.bugs-field {
  display: block;
  margin-top: 12px;
}
.bugs-label {
  display: block;
  font-size: var(--text-md);
  color: var(--fg-dim);
  margin-bottom: 6px;
}
.bugs-field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 16px;
  color: var(--fg);
  font-family: inherit;
  resize: vertical;
  min-height: 90px;
}
.bugs-actions {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.bugs-status {
  font-size: 13px;
}
.bugs-status[data-tone="ok"]  { color: var(--fg-dim); }
.bugs-status[data-tone="err"] { color: #d96565; }
.bugs-list-section { margin-top: 4px; }
.bugs-list-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.bugs-empty {
  padding: 24px 0;
  text-align: center;
  color: var(--fg-dim);
  font-size: 13px;
}
.bug-row {
  background: var(--bg-elev, rgba(255,255,255,0.03));
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.bug-row-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--fg-dim);
}
.bug-row-date { font-variant-numeric: tabular-nums; }
.bug-row-user { font-weight: 500; }
.bug-row-desc {
  margin: 4px 0 0;
  font-size: var(--text-md);
  line-height: 1.45;
  color: var(--fg);
  white-space: pre-wrap;
}
.bug-row-notes {
  margin: 8px 0 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--fg-dim);
  padding: 6px 8px;
  background: rgba(0,0,0,0.15);
  border-radius: 6px;
}
.bug-status {
  display: inline-block;
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.bug-status-open        { color: #c49840; border-color: rgba(196,152,64,0.5); }
.bug-status-in-progress { color: #e3a35a; border-color: rgba(227,163,90,0.5); }
.bug-status-fixed       { color: #a0998f; border-color: rgba(160,153,143,0.5); }
.bug-status-wontfix     { color: var(--fg-dim); }
.bug-status-duplicate   { color: var(--fg-dim); }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 80px);
  transform: translate(-50%, 30px);
  z-index: 50;
  background: var(--bg-2);
  color: var(--fg);
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: var(--text-base);
  font-weight: 500;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity var(--t-fast) ease-out, transform var(--t-fast) ease-out;
  pointer-events: none;
  max-width: 86vw;
  text-align: center;
}
.toast.open {
  opacity: 1;
  transform: translate(-50%, 0);
}
.toast.toast-error {
  background: rgba(217, 101, 101, 0.18);
  border-color: rgba(217, 101, 101, 0.5);
  color: #f0c7c7;
}

/* ---------- edit-access form (Settings) ---------- */
.edit-access-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 16px calc(var(--safe-bottom) + 16px);
}
.edit-access-form h3 {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 600;
}
.edit-access-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--text-md);
  color: var(--fg-dim);
  font-weight: 500;
}
.edit-access-form input {
  background: var(--bg-2);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 12px;
  font-size: 16px;
  outline: none;
  transition: border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}
.edit-access-form input:focus { border-color: var(--accent); }
.edit-access-form input:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(196, 152, 64, 0.22);
}
.edit-access-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.edit-access-actions .link-btn {
  background: transparent;
  color: var(--fg-dim);
  border: 0;
  padding: 12px 8px;
  cursor: pointer;
  margin-left: auto;
  min-height: 44px;
  transition: color var(--t-fast) ease-out;
}
.edit-access-actions .link-btn:hover { color: var(--fg); }
.edit-access-actions .link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.form-status[data-tone="ok"]  { color: #c49840; }
.form-status[data-tone="err"] { color: #d96565; }

/* ---------- full-page sample editor ---------- */
/* Mount lives inside .detail. When opened we slide the page up over the
   detail cards. Closed state keeps the mount empty so it doesn't intercept
   touches. */
.edit-mount {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: var(--bg);
  transform: translateY(100%);
  transition: transform 0.25s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  pointer-events: none;
}
.edit-mount:empty { display: none; }
.edit-mount.is-open {
  transform: translateY(0);
  pointer-events: auto;
}

.edit-page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
}

.edit-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(var(--safe-top) + 8px) 16px 8px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.edit-header h2 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.edit-back {
  background: transparent;
  border: 0;
  color: var(--fg);
  font-size: 28px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast) ease-out;
}
.edit-back:hover  { background: var(--bg-2); }
.edit-back:active { background: var(--bg-3); }
.edit-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.edit-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 16px calc(var(--safe-bottom) + 32px);
}

.edit-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.edit-label {
  font-size: var(--text-md);
  color: var(--fg-dim);
  font-weight: 500;
}
.edit-label .req {
  color: #d96565;
  font-style: normal;
  margin-left: 2px;
}
.edit-hint {
  font-size: var(--text-xs);
  color: var(--fg-mute);
  line-height: 1.4;
  font-style: italic;
}
.edit-form input[readonly] {
  background: rgba(255, 255, 255, 0.02);
  color: var(--fg-dim);
  cursor: not-allowed;
}

.edit-form input[type="text"],
.edit-form input[type="url"],
.edit-form input[inputmode="decimal"],
.edit-form select,
.edit-form textarea {
  background: var(--bg-2);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px;
  font-size: 16px;
  outline: none;
  font-family: inherit;
  transition: border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}
.edit-form input:focus,
.edit-form select:focus,
.edit-form textarea:focus { border-color: var(--accent); }
.edit-form input:focus-visible,
.edit-form select:focus-visible,
.edit-form textarea:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(196, 152, 64, 0.22);
}
.edit-form select { cursor: pointer; }
.edit-form textarea {
  resize: none;
  min-height: 4.5em;
  line-height: 1.4;
}

.edit-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-dim) 50%),
                    linear-gradient(135deg, var(--fg-dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

.image-preview {
  margin-top: 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--bg-2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  max-height: 180px;
}
.image-preview img {
  max-width: 100%;
  max-height: 180px;
  object-fit: contain;
  display: block;
}
.image-preview-error {
  color: var(--fg-dim);
  font-size: var(--text-md);
  padding: 14px;
}

.edit-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.edit-actions .primary-btn {
  background: var(--accent);
  color: #0a0a0a;
  padding: 14px 18px;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: 16px;
  border: 0;
  cursor: pointer;
}
.edit-actions .primary-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.edit-status {
  font-size: var(--text-md);
  color: var(--fg-dim);
  text-align: center;
}
.edit-status[data-tone="ok"]  { color: #c49840; }
.edit-status[data-tone="err"] { color: #d96565; }



/* ---------- desktop layout: real desktop app (>=900px, pointer:fine) ----------
   Previously this block constrained the app to a centered 480px column with
   a dark void around it — the Instagram/Threads "mobile-on-desktop" pattern.
   That looked like a phone-app screenshot when opened on a laptop. The new
   layout is a proper desktop experience: full-width header, sticky category
   rail on the left, responsive grid of bottle cards in the middle, and a
   sticky-image + scrolling-text detail view (classic premium product page).

   Below 900px the phone view (the rest of this stylesheet) is untouched.
   The pointer:fine gate keeps landscape phones — which can be wider than
   900px — on the phone layout. Touch users always get the phone UI. */
@media (min-width: 900px) and (pointer: fine) {

  /* ===== shell: full width, no phone-shaped column ===== */
  body { background: var(--bg); }
  #app {
    max-width: none;
    margin: 0;
    border: 0;
    box-shadow: none;
  }

  /* ===== header: full width, breathing room ===== */
  .app-header {
    padding: 16px 32px 14px;
  }
  .app-header-top {
    max-width: 1200px;
    margin: 0 auto 12px;
    width: 100%;
  }
  .app-title { font-size: 12px; }
  .app-meta { font-size: 12px; }
  .search-shell {
    max-width: 640px;
    margin: 0 auto;
  }
  #search-input {
    font-size: 15px;
    padding: 12px 0;
  }

  /* sticky category rail offset = whatever the header takes. The new header
     is shorter than the old (no separate sticky search bar below it), so the
     rail top sits just below the header's bottom. ~92px = 16+14 padding +
     11px eyebrow row + 10px gap + 40px search shell. */

  /* ===== index: two-column layout, sidebar + content ===== */
  .sample-index-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    max-width: 1600px;        /* don't sprawl on ultrawide */
    margin: 0 auto;
  }

  /* sticky category rail. Top offset = the new combined header (eyebrow
     row + search shell ≈ 92-96px on desktop). Keep this in sync with the
     IntersectionObserver rootMargin in sample-index.js setupSidebarSpy. */
  .category-rail {
    display: block;
    position: sticky;
    top: 100px;
    align-self: start;
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    padding: 20px 8px 24px 24px;
    border-right: 1px solid var(--line);
  }
  .category-rail .rail-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fg-mute);
    padding: 0 12px 10px;
    font-weight: 600;
  }
  .category-rail ul {
    list-style: none;
    margin: 0; padding: 0;
  }
  .category-rail li { margin: 0; }
  .category-rail button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    text-align: left;
    border-radius: 8px;
    color: var(--fg-dim);
    font-size: 14px;
    cursor: pointer;
    transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out;
  }
  .category-rail button:hover {
    background: var(--bg-2);
    color: var(--fg);
  }
  .category-rail button.is-active {
    background: var(--bg-2);
    color: var(--fg);
    font-weight: 500;
  }
  .category-rail button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .category-rail .rail-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rail-cat, var(--fg-mute));
    flex-shrink: 0;
  }
  .category-rail .rail-name { flex: 1; }
  .category-rail .rail-count {
    color: var(--fg-mute);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }
  .category-rail button.is-active .rail-count { color: var(--fg-dim); }

  /* content area: comfortable padding, generous spacing */
  .sample-index {
    padding: 12px 32px 80px;
  }

  /* On desktop the Bento tile look is preserved (Devin wants full-width
     tiles on every viewport). Only adjust scroll anchoring + breathing
     room between tiles so the rail's smooth-scroll lands cleanly. */
  .cat-group {
    scroll-margin-top: 148px;
    margin: 0 0 16px;
  }

  /* the actual grid of bottle cards */
  .cat-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    padding: 16px 0 0;
  }
  .cat-body .sub-header {
    grid-column: 1 / -1;
    padding: 16px 0 0;
    font-size: 11px;
    letter-spacing: 0.1em;
  }

  /* bottle card */
  .sample-row {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    padding: 0;
    border: 1px solid var(--bg-3);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-2);
    min-height: auto;
    position: relative;
    transition:
      transform var(--t-fast) ease-out,
      background var(--t-fast) ease-out,
      box-shadow var(--t-fast) ease-out,
      border-color var(--t-fast) ease-out;
  }
  .sample-row:hover {
    background: var(--bg-3);
    border-color: var(--line);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
  }
  .sample-row:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .sample-row .thumb {
    width: 100%;
    height: 180px;
    flex: 0 0 auto;
    border-radius: 0;
    background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
    border-bottom: 1px solid var(--bg-3);
  }
  .sample-row .thumb img {
    padding: 16px;
  }
  .sample-row .name {
    padding: 12px 14px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .sample-row .name strong {
    font-size: 14px;
    line-height: 1.3;
    color: var(--fg);
    /* truncate long names to keep card heights uniform */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .sample-row .name small {
    margin-top: 6px;
    font-size: 11px;
    flex-wrap: wrap;
  }
  /* rack chip in the top-right of the card, overlayed on the thumb area */
  .sample-row .loc {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(20, 20, 22, 0.78);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border-radius: 999px;
    padding: 5px 11px;
  }
  .sample-row .loc-code {
    color: var(--accent);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.02em;
  }

  /* ===== search results: full-width list, top-to-bottom scan ===== */
  .search-results {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px 32px 64px;
  }
  .search-results .sample-row {
    flex-direction: row;
    align-items: center;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--bg-2);
    border: 1px solid var(--bg-3);
    margin-bottom: 8px;
    min-height: 0;
  }
  .search-results .sample-row:hover {
    transform: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  }
  .search-results .sample-row .thumb {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 8px;
    border: 0;
  }
  .search-results .sample-row .thumb img { padding: 4px; }
  .search-results .sample-row .name {
    flex: 1;
    padding: 0;
    flex-direction: column;
    gap: 0;
  }
  .search-results .sample-row .name strong {
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .search-results .sample-row .loc {
    position: static;
    background: rgba(196, 152, 64, 0.14);
    padding: 6px 12px;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }

  /* ===== detail view =====
     The desktop detail layout (2-col grid, pinned full-bleed photo poster,
     facts/story right column) now lives ENTIRELY in detail.css's
     `@media (min-width: 900px)` block — single source of truth, last-loaded so
     it wins the cascade, and ungated by pointer so touchscreen laptops get it
     too. It used to live here (gated `and (pointer: fine)`) but detail.css base
     rules clobbered it and coarse-pointer laptops missed it. Do NOT re-add
     detail/.card-hero desktop rules in this file. */

  /* customer mode (the landscape-rotated kiosk view on phones) doesn't apply
     on desktop — the regular detail view IS the customer-facing view here. */
  body[data-mode="customer"] .customer-view { display: none; }
  body[data-mode="customer"] .card { display: flex; }
  body[data-mode="customer"] .detail-back { display: flex; }

  /* ===== settings overlay: centered modal, not full-screen ===== */
  .settings-overlay {
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 720px;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    animation: none;
  }

  /* ===== hover affordances for circular icon buttons ===== */
  .detail-back:hover,
  .detail-edit:hover {
    background: rgba(0, 0, 0, 0.7);
  }
}

/* ---------- focus-visible polish ---------- */
/* Keyboard navigation on desktop should have a visible focus ring; touch
   activation should not (would flash on every tap). :focus-visible threads
   that needle. */
.sample-row:focus-visible,
.detail-back:focus-visible,
.detail-edit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}