/* ---------------------------------------------------------
   Design tokens — Prohibition-era / Art Deco
--------------------------------------------------------- */
:root {
  --ink: #14110E;
  --ink-soft: #201A13;
  --ink-line: #3E3220;
  --paper: #ECE0BE;
  --paper-dim: #DED0A3;
  --paper-line: #C3A85F;
  --gold: #C6992F;
  --gold-bright: #E4BB55;
  --emerald: #1E4D3B;
  --burgundy: #6E2430;

  --font-display: 'Cinzel', Georgia, serif;
  --font-body: 'Montserrat', system-ui, sans-serif;

  --radius: 2px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

/* Faint Art Deco diamond-lattice texture across the whole page — the one
   deliberately ornamental touch; everything else stays quiet. */
body {
  background-image:
    repeating-linear-gradient(45deg, rgba(198,153,47,0.05) 0, rgba(198,153,47,0.05) 1px, transparent 1px, transparent 28px),
    repeating-linear-gradient(-45deg, rgba(198,153,47,0.05) 0, rgba(198,153,47,0.05) 1px, transparent 1px, transparent 28px);
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------
   Status banner (setup / connection issues)
--------------------------------------------------------- */
.status-banner {
  background: var(--burgundy);
  color: var(--paper);
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  padding: 10px 16px;
}
.status-banner.is-error { background: var(--burgundy); }

/* ---------------------------------------------------------
   Header
--------------------------------------------------------- */
.app-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 28px 16px;
  border-bottom: 1px solid var(--ink-line);
  flex-wrap: wrap;
  position: relative;
}

.app-header::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 15%, var(--gold) 85%, transparent);
}

.brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
  margin: 0;
  margin-right: auto;
}

.main-nav {
  display: flex;
  gap: 4px;
  background: var(--ink-soft);
  padding: 4px;
  border-radius: var(--radius);
  border: 1px solid var(--ink-line);
}

.nav-btn {
  background: none;
  border: none;
  padding: 8px 16px;
  border-radius: 2px;
  cursor: pointer;
  color: var(--paper-dim);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
}

.nav-btn.is-active {
  background: var(--gold);
  color: var(--ink);
}

.header-actions {
  display: flex;
  gap: 8px;
}

.ghost-btn {
  background: transparent;
  border: 1px solid var(--ink-line);
  color: var(--paper);
  padding: 8px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
}

.ghost-btn:hover { border-color: var(--gold); color: var(--gold-bright); }

.file-btn { position: relative; }

/* ---------------------------------------------------------
   Layout
--------------------------------------------------------- */
main { padding: 0; }

.view { display: none; }
.view.is-active { display: flex; align-items: flex-start; }

.category-rail {
  width: 210px;
  flex-shrink: 0;
  padding: 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 0;
}

.category-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  text-align: left;
  padding: 9px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--paper-dim);
  font-size: 0.9rem;
}

.category-btn .dot {
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  flex-shrink: 0;
  background: var(--dot-color, var(--gold));
}

.category-btn.is-active {
  background: var(--ink-soft);
  color: var(--gold-bright);
  border-left: 2px solid var(--gold);
  padding-left: 10px;
}

.category-btn .dot.star-dot {
  width: auto;
  height: auto;
  transform: none;
  background: none;
  color: var(--gold);
  font-size: 0.95rem;
  line-height: 1;
}

.category-btn-favorites {
  margin-bottom: 6px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--ink-line);
}

.edit-pencil-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 4px;
  margin: -4px -2px;
  cursor: pointer;
  color: var(--paper-dim);
  font-size: 0.72rem;
  opacity: 0;
  border-radius: var(--radius);
}

.edit-pencil-btn:hover,
.edit-pencil-btn:focus-visible {
  color: var(--gold-bright);
  opacity: 1;
}

/* Rename/recolor panel — replaces a category's row in place. Used both
   by the shelf manager's category headings and its ingredient rows (see
   .shelf-group-heading and .shelf-item below — category editing used to
   live in the category rail sidebar, moved here to sit next to
   ingredient renaming). */
.category-edit-panel {
  background: var(--ink-soft);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 10px;
  margin: 2px 0;
}

.category-edit-name {
  width: 100%;
  background: var(--paper-dim);
  color: var(--ink);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  padding: 6px 8px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.category-edit-panel .swatch-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}

.category-edit-panel .swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  padding: 0;
}

.category-edit-panel .swatch.is-selected {
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 2px var(--ink-soft), 0 0 0 3px var(--gold-bright);
}

.category-edit-status {
  min-height: 1.1em;
  font-size: 0.76rem;
  color: var(--burgundy);
  margin: 0 0 6px;
}

.category-edit-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.category-edit-actions button {
  background: none;
  border: none;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--paper-dim);
  padding: 4px 2px;
}

.category-edit-actions button:hover { color: var(--paper); }
.category-edit-actions button.save { color: var(--gold); }
.category-edit-actions button.save:hover { color: var(--gold-bright); }
.category-edit-actions button:disabled { opacity: 0.5; cursor: default; }

.view-content {
  flex: 1;
  padding: 24px 28px 60px;
  min-width: 0;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.toolbar-label {
  color: var(--paper-dim);
  font-size: 0.85rem;
}

.unit-toggle,
.made-toggle {
  display: flex;
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 3px;
}

.unit-btn,
.made-toggle-btn {
  background: none;
  border: none;
  padding: 6px 14px;
  border-radius: 2px;
  cursor: pointer;
  color: var(--paper-dim);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}

.unit-btn.is-active,
.made-toggle-btn.is-active {
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
}

.search-wrap {
  margin-left: auto;
  flex: 1 1 200px;
  max-width: 280px;
}

.search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  background: var(--ink-soft);
  color: var(--paper);
}

.search-input::placeholder { color: var(--paper-dim); opacity: 0.7; }

.search-input:focus-visible { outline-offset: 0; }

.empty-state {
  color: var(--paper-dim);
  font-style: italic;
  padding: 40px 0;
}

/* ---------------------------------------------------------
   Card grid
--------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.cocktail-card {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  position: relative;
  padding: 22px 18px 16px;
  border: 1px solid var(--paper-line);
  border-top: 3px solid var(--gold);
}

.cocktail-card.is-clickable { cursor: pointer; }
.cocktail-card.is-clickable:hover { border-color: var(--gold); }

.card-favorite-btn {
  position: absolute;
  top: -8px;
  right: 12px;
  background: var(--paper);
  border: none;
  color: var(--gold);
  font-size: 1.5rem;
  line-height: 1;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 50%;
}

.card-favorite-btn:hover { color: var(--gold-bright); }
.card-favorite-btn.is-active { color: var(--gold); }

.card-tab {
  position: absolute;
  top: -10px;
  left: 16px;
  background: var(--tab-color, var(--gold));
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 1px;
}

.card-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 10px 0 4px;
  letter-spacing: 0.01em;
}

.card-glass {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  font-size: 0.83rem;
  color: #5b4d2e;
  font-style: italic;
}

.card-glass svg { flex-shrink: 0; color: #8a7440; }

.card-ingredients {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.card-ingredients li {
  padding: 3px 0;
  border-bottom: 1px dotted var(--paper-line);
}

.card-ingredients li:last-child { border-bottom: none; }

.card-ingredients li.ratio-line {
  font-weight: 700;
}

.card-availability {
  font-size: 0.83rem;
  margin: 0 0 10px;
  font-weight: 600;
}

.card-availability.is-ready { color: var(--emerald); }
.card-availability.is-missing { color: var(--burgundy); }

.card-made-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  margin: 0 0 10px;
  border-radius: 999px;
  border: 1px solid var(--paper-line);
  background: transparent;
  color: #5b4d2e;
  cursor: pointer;
}

.card-made-btn:hover { border-color: var(--emerald); color: var(--emerald); }

.card-made-btn.is-active {
  background: var(--emerald);
  border-color: var(--emerald);
  color: var(--paper);
}

.card-made-btn.is-active:hover { background: var(--emerald); color: var(--paper); }

.card-instructions summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.02em;
}

.card-instructions p {
  font-size: 0.9rem;
  margin: 8px 0 0;
}

.card-garnish {
  font-size: 0.82rem;
  color: #5b4d2e;
  margin: 8px 0 0;
}

.card-notes {
  font-size: 0.82rem;
  color: #5b4d2e;
  font-style: italic;
  margin: 8px 0 0;
}

.card-actions {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--paper-line);
}

.card-action-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  color: #8a7440;
}

.card-action-btn:hover { text-decoration: underline; color: var(--gold); }
.card-action-btn.is-delete { color: var(--burgundy); }
.card-action-btn.is-delete:hover { color: var(--burgundy); }

/* ---------------------------------------------------------
   Cocktail zoom overlay — a bigger version of the same card, not a
   different visual language.
--------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 17, 14, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  z-index: 100;
}

.modal-overlay[hidden] { display: none; }

body.modal-open { overflow: hidden; }

.modal-dialog {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  border-radius: var(--radius);
}

/* The card-tab pokes 10px above the card's own padding box, same as on
   the grid — but the modal card's top border is thicker (5px vs. 3px),
   which eats 2px further into that offset, and .modal-dialog's
   overflow-y:auto clips anything outside its own box, including that
   negative overhang. Padding here (not on .modal-dialog itself, which
   would also shift the star/X — those are positioned relative to the
   dialog, not this slot) gives the tab room to poke fully into view. */
#modal-card-slot {
  padding-top: 10px;
}

.modal-dialog .cocktail-card-modal {
  padding: 34px 30px 26px;
  border-top-width: 5px;
}

.modal-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 10px 0 4px;
}
.modal-name-row .card-name { margin: 0; }

/* Smaller than the page-toolbar version, and pulled right by a negative
   margin — past the card's own right padding (30px) and its 1px right
   border, up to the close button's 8px inset from the dialog edge — so
   this toggle's rightmost pixel lines up with the X's rightmost pixel. */
.modal-unit-toggle {
  flex-shrink: 0;
  margin-right: -23px;
  padding: 2px;
  background: var(--paper-dim);
  border-color: var(--paper-line);
}
.modal-unit-toggle .unit-btn {
  padding: 4px 9px;
  font-size: 0.78rem;
  color: #5b4d2e;
}
.modal-unit-toggle .unit-btn.is-active { color: var(--ink); }

.modal-dialog .card-name { font-size: 1.7rem; }
.modal-dialog .card-ingredients { font-size: 1.02rem; }
.modal-dialog .card-instructions p { font-size: 1rem; }

/* The close button and the star share the same light, parchment-card
   look (paper fill, soft border) rather than a dark chip — the dark
   version read as jarring against the card's own light background. */
.modal-close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--paper-line);
  background: var(--paper);
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

/* In the modal, the star shares the same corner as the close button —
   sit it just to the left of the X instead of letting the X's higher
   z-index bury it. Same light fill/border as the close button now, so
   the two read as a matched pair without either looking out of place
   against the parchment card.
   The top offset accounts for two things relative to the close button's
   (whose positioning context is the dialog itself): this button's own
   positioning context is the card, whose 5px gold top border (vs. 3px
   on the grid) eats 5px into it, and #modal-card-slot's 10px top
   padding (added so the card-tab isn't clipped by the dialog's
   overflow) pushes the card itself 10px further down within the
   dialog. Net: 8px - 5px - 10px = -7px. */
.modal-dialog .card-favorite-btn {
  top: -7px;
  right: 54px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 1.3rem;
  border: 1px solid var(--paper-line);
  background: var(--paper);
  z-index: 1;
}

.modal-close-btn:hover { border-color: var(--gold); color: var(--gold); }

/* ---------------------------------------------------------
   Shelf manager
--------------------------------------------------------- */
.shelf-manager {
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 22px;
}

.shelf-manager summary {
  cursor: pointer;
  font-weight: 600;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--gold-bright);
  letter-spacing: 0.02em;
}

/* Up to 3 equal-width columns (--shelf-column-count, set in
   renderShelfManager/maxShelfColumnsForViewport — it also drops this to
   2 or 1 on narrower viewports, no CSS media query involved) sharing the
   full row width, so column width scales with the viewport instead of
   being fixed. The category with the most items is always rendered last
   (see renderShelfManager) so it lands in the rightmost column; the rest
   are pre-balanced by item count into whichever columns remain, each as
   its own .shelf-column. Because columns share the actual row width
   instead of a fixed pixel size, names only wrap when a column is
   genuinely too narrow for them, rather than always truncating or
   always wrapping. */
.shelf-groups {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(var(--shelf-column-count, 1), 1fr);
  align-items: start;
  gap: 18px;
}

.shelf-column {
  min-width: 0;
}

.shelf-group {
  margin-bottom: 18px;
}

.shelf-group-heading {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.shelf-group-heading h4 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dot-color, var(--gold));
  font-weight: 700;
}

.shelf-group-heading:hover .edit-pencil-btn,
.shelf-group-heading:focus-within .edit-pencil-btn {
  opacity: 1;
}

.shelf-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 0.9rem;
}

/* Long names (e.g. "Violet liqueur (Crème de Violette)") wrap instead of
   truncating — an ellipsis on a shelf toggle hides which ingredient
   you're actually switching on/off, which defeats the point of the row. */
.shelf-item-name {
  flex: 1;
  min-width: 0;
}

.shelf-item .edit-pencil-btn {
  color: var(--paper-dim);
}

.shelf-item:hover .edit-pencil-btn,
.shelf-item:focus-within .edit-pencil-btn {
  opacity: 1;
}

/* The shelf columns are narrower than the category rail, so give the
   reused rename panel a touch less padding here to avoid crowding. */
.shelf-item-edit-panel {
  padding: 8px;
}

.switch {
  position: relative;
  width: 34px;
  height: 19px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  position: absolute;
  z-index: 1;
}

.switch .track {
  position: absolute;
  inset: 0;
  background: var(--ink-line);
  border-radius: 20px;
  transition: background 0.15s ease;
}

.switch .thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--paper-dim);
  transition: transform 0.15s ease;
}

.switch input:checked ~ .track { background: var(--emerald); }
.switch input:checked ~ .thumb { transform: translateX(15px); background: var(--paper); }

/* ---------------------------------------------------------
   Add form
--------------------------------------------------------- */
.add-form {
  max-width: 640px;
  margin: 24px 28px 60px;
  padding: 24px;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  border-top: 3px solid var(--gold);
  /* .view.is-active is a flex container — without this, a flex item's
     default min-width:auto lets its fixed-width grid/select content (the
     ingredient grid, glass select, etc.) force this whole form wider than
     the viewport instead of shrinking to fit it. */
  min-width: 0;
}

.add-form h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 0;
}

.field {
  display: block;
  margin-bottom: 16px;
}

.field span {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 5px;
}

.field em { font-weight: 400; opacity: 0.65; }

.field input[type="text"],
.field textarea,
.field select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  background: var(--paper-dim);
  color: var(--ink);
}

.glass-field-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.glass-field-row select { flex: 1; min-width: 0; }

.glass-icon-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: #8a7440;
}

#field-glass-custom { margin-top: 8px; }

.ingredients-editor {
  margin: 22px 0;
  padding: 14px;
  background: var(--paper-dim);
  border-radius: var(--radius);
}

.ingredients-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 0.9rem;
}

.ingredients-header .ghost-btn {
  border-color: var(--paper-line);
  color: var(--ink);
  padding: 5px 10px;
  font-size: 0.82rem;
}

.ingredient-row {
  display: grid;
  /* minmax(0, 1fr), not a bare 1fr — a bare 1fr track won't shrink below
     its content's min-content size, which forces the whole form wider
     than the viewport on narrow phones. */
  grid-template-columns: 24px 70px 100px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #8a7440;
  font-size: 1.1rem;
  line-height: 1;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.drag-handle:active { cursor: grabbing; }

.ingredient-row-wrapper.is-dragging {
  opacity: 0.5;
}

.ingredient-row input[type="number"],
.ingredient-row input[type="text"],
.ingredient-row select {
  padding: 7px 8px;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}

.ingredient-row .row-remove {
  background: none;
  border: none;
  color: var(--burgundy);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 4px 8px;
}

.ingredient-row-extra {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 0.85rem;
  margin: -2px 0 6px;
}

.ingredient-row-extra label { flex: 1 1 auto; min-width: 0; }

.ingredient-row-extra select,
.ingredient-row-extra input[type="text"] {
  flex: 1 1 120px;
  min-width: 0;
  padding: 5px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--paper-line);
  background: var(--paper);
  color: var(--ink);
}

/* Alternatives a shelf-tracked ingredient will equally accept — nested
   visually under its own row via the left border, only shown while "on
   my shelf" is checked. */
.ingredient-alternatives {
  margin: 0 0 14px 12px;
  padding-left: 12px;
  border-left: 2px solid var(--paper-line);
}

.ingredient-alt-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}

.ingredient-alt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 110px) auto;
  gap: 6px;
  align-items: center;
}

.ingredient-alt-row input[type="text"] {
  width: 100%;
  padding: 5px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--paper-line);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.85rem;
}

.ingredient-alt-row .alt-remove {
  background: none;
  border: none;
  color: var(--burgundy);
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 6px;
}

.add-alt-btn {
  border-color: var(--paper-line);
  color: var(--ink);
  padding: 4px 9px;
  font-size: 0.78rem;
}

.field-hint {
  font-size: 0.8rem;
  color: #5b4d2e;
  margin: 8px 0 0;
}

.primary-btn {
  background: var(--gold);
  color: var(--ink);
  border: none;
  padding: 11px 22px;
  border-radius: var(--radius);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.primary-btn:hover { background: var(--gold-bright); }

.form-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-buttons .ghost-btn {
  border-color: var(--paper-line);
  color: var(--ink);
}

.form-status {
  min-height: 1.2em;
  color: var(--emerald);
  font-weight: 700;
  font-size: 0.88rem;
}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */
@media (max-width: 780px) {
  /* .view.is-active's align-items:flex-start (set above for the desktop
     row layout, so the rail and content column don't stretch to match
     each other's height) governs the horizontal axis once flex-direction
     flips to column here — without overriding it back to stretch, the
     rail and add-form size to their own content width instead of filling
     the screen, which is what was actually forcing horizontal overflow. */
  .view.is-active { flex-direction: column; align-items: stretch; }

  .category-rail {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: static;
    padding: 14px 16px;
    gap: 6px;
  }
  .category-btn {
    flex-shrink: 0;
    min-height: 40px;
  }
  .category-btn-favorites {
    border-bottom: none;
    border-right: 1px solid var(--ink-line);
    margin-bottom: 0;
    margin-right: 2px;
    padding-bottom: 9px;
    padding-right: 14px;
  }

  /* The pencil's hover reveal doesn't work on touch — just show it. */
  .edit-pencil-btn { opacity: 1; padding: 8px; }

  /* The shelf manager's columns are narrow here (or a single column),
     with limited headroom below the fold — float the edit panel as a
     fixed bottom sheet instead of expanding in place. */
  .category-edit-panel {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 60;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
  }
  .category-edit-panel .swatch { width: 26px; height: 26px; }
  .category-edit-actions button { padding: 8px 6px; }

  .view-content { padding: 16px; }
  .add-form { margin: 16px; }

  /* Header: brand + Export/Import share a row, nav pills wrap to their
     own full-width row underneath so nothing overflows or crowds. */
  .app-header {
    padding: 14px 16px;
    gap: 10px 8px;
  }
  .app-header::after { left: 16px; right: 16px; }
  .brand { margin-right: 0; flex: 1 1 auto; font-size: 1.3rem; }
  .header-actions { flex-shrink: 0; }
  .main-nav {
    order: 3;
    width: 100%;
    justify-content: stretch;
  }
  .main-nav .nav-btn {
    flex: 1;
    text-align: center;
    padding: 10px 6px;
    min-height: 40px;
  }
  .ghost-btn { padding: 9px 12px; min-height: 40px; }

  /* Toolbar: let the made-filter toggle and the search box each drop to
     their own full-width row instead of squeezing in next to the unit
     toggle. */
  .toolbar { flex-wrap: wrap; row-gap: 10px; }
  .made-toggle { order: 2; flex: 1 1 100%; }
  .made-toggle-btn { flex: 1; text-align: center; }
  .search-wrap { order: 3; flex: 1 1 100%; max-width: none; margin-left: 0; }

  /* Ingredient editor: the 4-column grid gets too cramped for a phone —
     stack amount/unit/remove on one line and let the name field take
     its own full-width row underneath. */
  .ingredient-row {
    grid-template-columns: 28px 70px minmax(0, 1fr) auto;
    grid-template-areas: "handle amount unit remove" "handle name name name";
    row-gap: 6px;
  }
  .ingredient-row .drag-handle { grid-area: handle; font-size: 1.3rem; }
  .ingredient-row .ing-amount { grid-area: amount; }
  .ingredient-row .ing-unit { grid-area: unit; }
  .ingredient-row .ing-name { grid-area: name; }
  .ingredient-row .row-remove { grid-area: remove; }

  /* Same idea for an alternative row: name gets its own line, category
     and remove share the one beside it. */
  .ingredient-alt-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name remove" "category remove";
    row-gap: 4px;
  }
  .ingredient-alt-row .ing-alt-name { grid-area: name; }
  .ingredient-alt-row .ing-alt-category { grid-area: category; }
  .ingredient-alt-row .alt-remove { grid-area: remove; }

  .card-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

  /* Zoom overlay goes full-screen on small viewports rather than staying
     a small centered dialog. */
  .modal-overlay { padding: 0; }
  .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
    /* Full-screen on mobile means fully opaque, not just as tall as the
       card's own content — otherwise short cocktails leave a gap where
       the dimmed page underneath shows through. */
    background: var(--paper);
  }
  .modal-dialog .cocktail-card-modal {
    min-height: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding: 56px 18px 32px;
  }
  .modal-close-btn {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
  }
  .modal-dialog .card-favorite-btn {
    top: -3px;
    right: 60px;
    width: 40px;
    height: 40px;
  }

  /* Card's own right padding is 18px here (vs. 30px on desktop) and the
     close button sits 12px in (vs. 8px) — same alignment trick, different
     numbers: -(18 - 12) = -6px. */
  .modal-unit-toggle { margin-right: -6px; }

  .card-favorite-btn {
    padding: 9px 11px;
    top: -6px;
  }

  .card-made-btn { padding: 8px 14px; }
}