:root {
  --bg: #f7faff;
  --surface: #ffffff;
  --ink: #14213d;
  --ink-soft: #50617d;
  --ink-faint: #63738e;
  --rule: #dce5f2;
  --accent: #2457d6;
  --action: #2457d6;
  --coral: #ce3d2b;
  --accent-soft: #eaf0ff;
  --highlight: #ffebe6;
  --shadow: 0 1px 2px rgba(20, 43, 100, .05), 0 4px 14px rgba(20, 43, 100, .05);
  --radius: 10px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101827;
    --surface: #17243a;
    --ink: #eef3ff;
    --ink-soft: #b3c2db;
    --ink-faint: #9badc9;
    --rule: #304360;
    --accent: #90b3ff;
    --accent-soft: #23375a;
    --highlight: #492b32;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  }
}

* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

/* ---------- sidebar ---------- */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 176px;
  height: 100vh;
  box-sizing: border-box;
  padding: 30px 16px;
  border-right: 1px solid var(--rule);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 10;
}

.sidebar-mark {
  text-decoration: none;
  overflow-wrap: anywhere;
  min-width: 0;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 18px;
  padding: 0 10px;
}

.sidebar .tab {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: .93rem;
  text-decoration: none;
  color: var(--ink-soft);
}

.sidebar .tab:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.sidebar .tab.current {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

/* The sidebar is out of flow, so the page is nudged clear of it. */
@media (min-width: 861px) {
  .wrap { margin-left: max(176px, calc(50% - 410px)); margin-right: auto; }
}

@media (max-width: 860px) {
  .sidebar {
    position: sticky;
    flex-direction: row;
    align-items: center;
    width: auto;
    height: auto;
    padding: 10px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .sidebar-mark { display: none; }
  .wrap { padding-top: 8px; }
}

a { color: var(--accent); }

/* ---------- masthead ---------- */

.masthead {
  padding: 56px 0 28px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 36px;
}

.masthead h1 {
  font-family: var(--serif);
  font-size: 2.6rem;
  line-height: 1.1;
  margin: 0 0 10px;
  letter-spacing: -.01em;
}

.masthead p {
  margin: 0;
  color: var(--ink-soft);
}

.backlink {
  display: inline-block;
  margin-bottom: 22px;
  font-size: .88rem;
  text-decoration: none;
  color: var(--ink-soft);
}

.backlink:hover { color: var(--accent); }

/* ---------- index ---------- */

.searchbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  padding: 14px 0 16px;
  margin-bottom: 8px;
}

.searchbar input {
  width: 100%;
  padding: 12px 16px;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.searchbar input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.cat-title {
  font-family: var(--serif);
  font-size: 1.5rem;
  margin: 40px 0 4px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.cat-title .count {
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--ink-faint);
  font-weight: 400;
}

.cat-rule {
  height: 2px;
  background: var(--accent-soft);
  border-radius: 2px;
  margin-bottom: 18px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform .12s ease, border-color .12s ease;
}

.card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

.card h3 {
  font-family: var(--serif);
  font-size: 1.12rem;
  margin: 0 0 6px;
  line-height: 1.25;
}

.card p {
  margin: 0 0 10px;
  font-size: .87rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

.card .meta {
  font-size: .76rem;
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.recipe-card { display: flex; flex-direction: column; padding: 0; min-width: 0; }
.recipe-card-link { display: block; flex: 1; padding: 16px 18px; color: inherit; text-decoration: none; }
.recipe-card-link:hover { color: inherit; text-decoration: none; }
.recipe-card-link:focus-visible { outline-offset: -4px; border-radius: var(--radius); }
.recipe-rating { margin-top: 4px; padding: 10px 9px 6px; border-top: 1px solid var(--rule); }
.rating-label { display: flex; justify-content: space-between; gap: 8px; padding: 0 5px; font-size: .76rem; color: var(--ink-soft); }
.rating-value { font-variant-numeric: tabular-nums; }
.rating-stars { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); max-width: 220px; margin: 4px auto 0; }
.recipe-rating .rating-star { display: grid; place-items: center; width: 100%; min-width: 0; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink-soft); border-radius: 8px; }
.rating-star svg { display: block; width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.recipe-rating .rating-star[data-filled="true"] { color: #b36b00; }
.rating-star[data-filled="true"] svg { fill: currentColor; }
.recipe-rating .rating-star:hover { background: var(--accent-soft); }
.rating-star:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.rating-footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 32px; padding: 0 5px; }
.rating-status { font-size: .73rem; color: var(--ink-soft); }
.recipe-rating .rating-clear { min-height: 32px; padding: 4px 0 4px 8px; border: 0; background: transparent; color: var(--ink-soft); font-size: .73rem; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (prefers-color-scheme: dark) { .recipe-rating .rating-star[data-filled="true"] { color: #ffd166; } }
@media print { .recipe-rating { display: none; } }

/* ---------- photos ---------- */

.card-photo {
  margin: -16px -18px 12px;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  background: var(--rule);
}

.card-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.hero {
  margin: 0 0 26px;
}

.hero img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
}

.hero figcaption {
  font-size: .76rem;
  color: var(--ink-faint);
  margin-top: 6px;
}

.flag {
  font-size: .72rem;
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}

.empty-msg {
  color: var(--ink-faint);
  font-style: italic;
  padding: 30px 0;
}

/* ---------- recipe page ---------- */

.recipe-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: .85rem;
  color: var(--ink-soft);
  margin-top: 14px;
}

.recipe-meta b {
  color: var(--ink);
  font-weight: 600;
}

.scaler {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  margin-bottom: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

.scaler-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.scaler label {
  font-size: .82rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
}

.stepper button {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
}

.stepper button:hover { background: var(--accent-soft); }

.stepper input {
  width: 54px;
  height: 34px;
  border: 0;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  text-align: center;
  font: inherit;
  font-weight: 600;
  background: transparent;
  color: var(--ink);
  -moz-appearance: textfield;
}

.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.yield-label { font-size: .9rem; color: var(--ink-soft); }

select#pan-select {
  font: inherit;
  font-size: .9rem;
  padding: 7px 10px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  max-width: 210px;
}

#factor-badge {
  margin-left: auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--bg);
  color: var(--ink-faint);
  border: 1px solid var(--rule);
}

#factor-badge.changed {
  background: var(--action);
  border-color: var(--accent);
  color: #fff;
}

#reset-btn {
  font: inherit;
  font-size: .82rem;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

#reset-btn:hover { border-color: var(--accent); color: var(--accent); }

h2.section {
  font-family: var(--serif);
  font-size: 1.45rem;
  margin: 38px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}

.ing-group {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--accent);
  margin: 22px 0 8px;
}

.ing-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ing-list li {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 2px 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

/* "Salt", "for garnish" — nothing to scale, so no amount column. */
.ing-list li.no-amt { grid-template-columns: 1fr; }
.ing-list li.no-amt .amt { display: none; }

.ing-list li:last-child { border-bottom: 0; }

.amt {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  text-align: right;
}

.amt-discrete { border-bottom: 1px dotted var(--ink-faint); cursor: help; }

.ing-body { display: flex; flex-direction: column; gap: 1px; }

.note {
  font-size: .85rem;
  color: var(--ink-faint);
  line-height: 1.4;
}

ol#method {
  padding-left: 22px;
  margin: 0;
}

ol#method li {
  margin-bottom: 14px;
  padding-left: 6px;
}

ol#method li::marker {
  color: var(--accent);
  font-weight: 600;
}

.inline-amt {
  font-weight: 600;
  color: var(--accent);
  background: var(--highlight);
  padding: 0 4px;
  border-radius: 4px;
}

.callout {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 12px 16px;
  margin: 20px 0;
  font-size: .9rem;
}

.callout strong { color: var(--accent); }

.notes-list { padding-left: 20px; color: var(--ink-soft); font-size: .93rem; }
.notes-list li { margin-bottom: 8px; }

.source-line {
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: .85rem;
  color: var(--ink-faint);
}

/* ---------- print ---------- */

@media print {
  :root { --bg: #fff; --surface: #fff; --ink: #000; --ink-soft: #444; --rule: #ccc; --accent: #000; --highlight: transparent; }
  body { font-size: 11pt; }
  .searchbar, .backlink, .sidebar, #reset-btn, .stepper button, .cat-rule { display: none !important; }
  .wrap { margin-left: auto !important; }
  .scaler { position: static; box-shadow: none; page-break-inside: avoid; }
  .masthead { padding-top: 0; }
  .card { break-inside: avoid; }
  .card-photo { display: none; }
  .hero img { max-height: 220px; }
  ol#method li, .ing-list li { page-break-inside: avoid; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 16px 60px; }
  .masthead h1 { font-size: 2rem; }
  .scaler { gap: 10px 12px; }
  /* Keep Reset and the factor badge together on whichever line they wrap to. */
  #reset-btn { margin-left: auto; }
  #factor-badge { margin-left: 0; }
  .note { padding-left: 0; }
}

/* ---------- menus ---------- */

.nav {
  margin: 10px 0 0;
}

.nav a {
  color: var(--accent);
  text-decoration: none;
  font-size: .9rem;
}

.nav a:hover { text-decoration: underline; }

.composer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 18px;
}

.course label {
  display: block;
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 5px;
}

.course .optional {
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
}

.course select,
.course input {
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-size: .92rem;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
}

.course select:focus,
.course input:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}

.composer-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.composer-actions button,
.menu-io button,
.menu-io .file-label {
  font: inherit;
  font-size: .88rem;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--action);
  color: #fff;
  cursor: pointer;
}

.composer-actions .ghost,
.menu-io .ghost {
  background: transparent;
  color: var(--accent);
}

.composer-actions .ghost:hover,
.menu-io .ghost:hover { background: var(--accent-soft); }

.save-msg {
  font-size: .84rem;
  color: var(--ink-soft);
}

.menu-preview,
.menu-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 18px;
  margin-bottom: 12px;
}

.preview-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid var(--rule);
}

.preview-row:last-child { border-bottom: 0; }

.course-label {
  flex: 0 0 82px;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.preview-row a { color: var(--accent); text-decoration: none; }
.preview-row a:hover { text-decoration: underline; }
.preview-row .gone { color: var(--ink-faint); }

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.menu-date {
  font-family: var(--serif);
  font-size: 1.05rem;
}

.menu-occasion {
  font-size: .78rem;
  padding: 1px 9px;
  border-radius: 20px;
  background: var(--accent-soft);
  color: var(--accent);
}

.menu-head .delete-menu {
  margin-left: auto;
  padding: 4px 12px;
  font-size: .8rem;
}

.menu-io {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0 6px;
}

.menu-io .file-label { display: inline-block; }

@media (max-width: 560px) {
  .course-label { flex-basis: 68px; }
}

/* ---------- chosen dishes ---------- */

.chosen {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 10px;
  border-radius: 20px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .82rem;
}

.chip .drop-dish {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  opacity: .7;
}

.chip .drop-dish:hover { opacity: 1; }

.dish-sep {
  color: var(--ink-faint);
  margin: 0 7px;
}

/* ---------- import ---------- */

.import-json {
  max-height: 320px;
  overflow: auto;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 12px;
  font-size: .78rem;
  line-height: 1.5;
}

#import-result details summary {
  cursor: pointer;
  font-size: .85rem;
  color: var(--accent);
  margin: 8px 0;
}

.composer-actions button[disabled] {
  opacity: .55;
  cursor: default;
}

/* ---------- deleting a recipe ---------- */

.danger {
  margin-top: 42px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.danger button {
  font: inherit;
  font-size: .88rem;
  padding: 7px 15px;
  border-radius: 8px;
  border: 1px solid #b4453a;
  background: #b4453a;
  color: #fff;
  cursor: pointer;
}

.danger .ghost {
  background: transparent;
  color: #b4453a;
}

.danger .ghost:hover { background: #fbeceb; }

.danger button[disabled] { opacity: .55; cursor: default; }

.danger p {
  font-size: .9rem;
  color: var(--ink-soft);
  max-width: 60ch;
}

.delete-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.delete-row input {
  padding: 7px 10px;
  font: inherit;
  font-size: .9rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg);
  color: inherit;
}

@media print { .danger { display: none !important; } }

/* ---------- editing a recipe ---------- */

.editor {
  margin-top: 42px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.editor > .ghost,
.editor button {
  font: inherit;
  font-size: .88rem;
  padding: 7px 15px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--action);
  color: #fff;
  cursor: pointer;
}

.editor .ghost {
  background: transparent;
  color: var(--accent);
}

.editor .ghost:hover { background: var(--accent-soft); }

.edit-intro, .edit-hint {
  font-size: .86rem;
  color: var(--ink-soft);
  max-width: 62ch;
}

.edit-head {
  font-family: var(--serif);
  font-size: 1.05rem;
  margin: 22px 0 6px;
}

.edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.edit-field span {
  display: block;
  font-size: .74rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 4px;
}

.edit-field input,
.edit-field select,
.edit-ing input,
.edit-text textarea,
.edit-actions input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  font: inherit;
  font-size: .9rem;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
}

.edit-ing {
  display: grid;
  grid-template-columns: 70px 80px 1fr 1fr 32px;
  gap: 6px;
  margin-bottom: 6px;
  align-items: center;
}

.edit-text {
  display: grid;
  grid-template-columns: 1fr 32px;
  gap: 6px;
  margin-bottom: 6px;
  align-items: start;
}

.edit-ing .drop-row,
.edit-text .drop-row {
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font-size: 1.1rem;
}

.edit-ing .drop-row:hover,
.edit-text .drop-row:hover { color: #b4453a; background: transparent; }

.editor .add-row { margin: 4px 0 6px; }

.edit-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

.edit-actions input { width: auto; }

@media (max-width: 560px) {
  .edit-ing { grid-template-columns: 1fr 1fr 24px; }
  .edit-ing .ing-item, .edit-ing .ing-note { grid-column: 1 / -1; }
}

@media print { .editor { display: none !important; } }

/* ---------- imported-recipe preview ---------- */

.preview-recipe h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  margin: 4px 0 2px;
}

.preview-recipe > p { margin: 0 0 4px; color: var(--ink-soft); font-size: .92rem; }

.prev-meta { font-size: .82rem; color: var(--ink-faint); }

.prev-cols {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 2fr;
  gap: 8px 26px;
  margin-top: 12px;
}

.prev-head {
  font-family: var(--serif);
  font-size: .95rem;
  margin: 0 0 6px;
}

.prev-cols h4 {
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 10px 0 4px;
}

.prev-cols ul, .prev-cols ol { margin: 0 0 10px; padding-left: 0; }
.prev-cols ol { padding-left: 18px; }
.prev-cols ul { list-style: none; }

.prev-cols li {
  font-size: .88rem;
  line-height: 1.5;
  margin-bottom: 4px;
}

.prev-cols ul li { display: flex; gap: 8px; }

.prev-qty {
  flex: 0 0 82px;
  color: var(--accent);
  font-weight: 600;
  text-align: right;
}

.prev-cols em { color: var(--ink-faint); font-style: normal; }
.prev-notes li { color: var(--ink-soft); }

.import-result .menu-head { flex-wrap: wrap; }

@media (max-width: 700px) {
  .prev-cols { grid-template-columns: 1fr; }
  .prev-qty { flex-basis: 64px; }
}

/* ---------- importing from photographs ---------- */

.import-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}

.import-tabs .src-tab {
  font: inherit;
  font-size: .86rem;
  padding: 6px 13px;
  border-radius: 20px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

.import-tabs .src-tab.current {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

#import-files { padding: 7px 0; font-size: .88rem; }

.import-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
}

.thumb {
  position: relative;
  margin: 0;
  width: 96px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--rule);
}

.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.thumb .drop-page {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: rgba(20, 43, 100, .62);
  color: #fff;
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
}

.credit-label { margin-top: 12px; }

/* ---------- searching the web ---------- */

.welcome {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 28px;
  margin: 10px 0 24px;
}

.welcome h2 {
  font-family: var(--serif);
  font-size: 1.6rem;
  margin: 0 0 8px;
  line-height: 1.2;
}

.welcome p {
  margin: 0 0 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.welcome-alt { font-size: .9rem; margin: 12px 0 0 !important; }
.welcome-alt a { color: var(--accent); text-decoration: none; }
.welcome-alt a:hover { text-decoration: underline; }

.welcome-form,
.search-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.welcome-form input,
.search-form input {
  flex: 1 1 260px;
  padding: 12px 16px;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.welcome-form input:focus,
.search-form input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.welcome-form button,
.search-form button {
  padding: 12px 22px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--action);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

.welcome-form button:hover,
.search-form button:hover { filter: brightness(1.08); }
.search-form button:disabled { opacity: .55; cursor: wait; }

.search-form { margin-bottom: 8px; }
.search-msg { display: block; margin: 6px 0 16px; }

.results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.result:hover { transform: none; border-color: var(--rule); }
.result h3 { margin-bottom: 2px; }
.result .result-site {
  font-size: .78rem;
  color: var(--accent);
  margin-bottom: 6px;
}

.card-photo-none {
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  font-size: .8rem;
  font-style: italic;
}

.result .meta { margin-bottom: 12px; }
.result .stars { color: var(--accent); letter-spacing: 1px; }
.result .level { font-weight: 600; }
.result .level-easy { color: #4d8a4a; }
.result .level-medium { color: #b4791f; }
.result .level-hard { color: #b0413e; }

.result-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.result-actions select {
  padding: 6px 8px;
  font: inherit;
  font-size: .85rem;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
}

.result-actions .ghost,
.result-actions .add {
  padding: 6px 12px;
  font: inherit;
  font-size: .85rem;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}

.result-actions .ghost {
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
}

.result-actions .ghost:hover { background: var(--accent-soft); }

.result-actions .add {
  color: #fff;
  background: var(--action);
  border: 1px solid var(--accent);
  font-weight: 600;
}

.result-actions .add:disabled { opacity: .55; cursor: wait; }
.result-msg { display: block; margin-top: 8px; }

/* ---------- sharing ---------- */

#share-btn {
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  padding: 6px 14px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--action);
  color: #fff;
  cursor: pointer;
}

#share-btn:hover { filter: brightness(1.08); }

.share-menu {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}

.share-menu[hidden] { display: none; }

.share-menu .ghost {
  font: inherit;
  font-size: .82rem;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}

.share-menu .ghost:hover { background: var(--accent-soft); border-color: var(--accent); }

@media print {
  #share-btn, .share-menu { display: none; }
}

/* ---------- a recipe's own photographs ---------- */

.photo-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 22px;
}

.hero[hidden] + .photo-tools { margin-top: 0; }

.photo-tools .ghost {
  font: inherit;
  font-size: .82rem;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}

.photo-tools .ghost:hover { border-color: var(--accent); background: var(--accent-soft); }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 0 0 30px;
}

.gallery-item {
  margin: 0;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--rule);
}

.gallery-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery-actions {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: linear-gradient(rgba(20, 43, 100, 0), rgba(20, 43, 100, .72));
  opacity: 0;
  transition: opacity .15s ease;
}

.gallery-item:hover .gallery-actions,
.gallery-item:focus-within .gallery-actions { opacity: 1; }

@media (hover: none) {
  .gallery-actions { opacity: 1; }
}

.gallery-actions button {
  font: inherit;
  font-size: .74rem;
  padding: 4px 8px;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  cursor: pointer;
}

.gallery-actions button:hover { background: #fff; }

@media print {
  .photo-tools, .gallery { display: none; }
}

/* ---------- a photo in the editor ---------- */

.edit-photo { margin: 14px 0 4px; }

.edit-photo-label {
  display: block;
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}

.edit-photo-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.edit-photo-thumb {
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--rule);
}

.edit-photo-name { font-size: .84rem; color: var(--ink-soft); }

/* Everyday cooking and collection controls. */
button, .ghost, .choice { font: inherit; font-size: 1rem; min-height: 44px; padding: 9px 14px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; }
button:not(.ghost):not(.src-tab):not(.drop-row):not(.add-row) { border-color: var(--accent); }
button:disabled { opacity: .6; cursor: wait; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [contenteditable]:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
input, select, textarea { font-size: 1rem; }
summary { cursor: pointer; padding: 10px 0; color: var(--accent); min-height: 44px; }
.recipe-actions, .onboarding-choices, .collection-filters, .timer-tools, .amount-tools { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.recipe-actions { margin-top: 20px; }
.recipe-actions a, .choice { text-decoration: none; }
#start-cooking, #manual-save, #e-save, #save-menu, .choice:first-child { background: var(--action); color: white; }
.before-cooking { padding: 18px 22px; margin: 18px 0; border: 1px solid var(--rule); background: var(--accent-soft); border-radius: var(--radius); }
.before-cooking h2 { margin: 0; font: bold 1.3rem var(--serif); }
.before-cooking ul { margin-bottom: 0; padding-left: 20px; }
.before-cooking li + li { margin-top: 10px; }
.recipe-photo { margin: 22px 0; }
/* One or two rows stay visible; larger collections scroll horizontally. */
.photo-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--photo-columns) - 1) * 12px) / var(--photo-columns));
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 4px;
}
.photo-grid.two-rows { grid-template-rows: repeat(2, auto); }
.photo-grid .gallery { display: contents; }
.photo-grid .hero, .photo-grid .gallery-item { margin: 0; min-width: 0; position: relative; scroll-snap-align: start; }
.photo-grid img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.photo-grid[data-count="1"] img { max-height: 380px; aspect-ratio: auto; }
.photo-grid .hero figcaption { position: absolute; bottom: 8px; left: 8px; right: 8px; margin: 0; padding: 6px 8px; border-radius: 6px; color: #fff; background: rgba(20,33,61,.8); }
@media (max-width: 600px) {
  .photo-grid { --photo-columns: 2 !important; }
  .photo-grid[data-count="0"], .photo-grid[data-count="1"] { --photo-columns: 1 !important; }
  .photo-grid:not([data-count="0"]):not([data-count="1"]):not([data-count="2"]) { grid-template-rows: repeat(2, auto); }
}
.original-yield, .fine { font-size: .875rem; color: var(--ink-soft); }
#ingredients-heading, #method-heading, .composer, #shopping { scroll-margin-top: 90px; }
.scaler { position: static; }
.stepper button, .stepper input { min-width: 44px; min-height: 44px; }
#cooking-controls { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px; margin: 20px 0; }
#cooking-controls > * { margin-right: 12px; }
#cooking-controls input[type=checkbox], .ingredient-check, .step-check, #shopping input { width: 24px; height: 24px; accent-color: var(--accent); cursor: pointer; }
.timer-tools { margin-top: 14px; }
.timer-tools input { width: 80px; padding: 8px; }
#timer-display { font-variant-numeric: tabular-nums; font-size: 1.5rem; }
.ing-list li:has(.ingredient-check) { grid-template-columns: 28px 100px minmax(0,1fr); align-items: start; gap: 10px; }
.ing-list li.no-amt:has(.ingredient-check) { grid-template-columns: 28px 100px minmax(0,1fr); }
.ing-list .ingredient-check { grid-column: 1; margin: 4px 0; }
.ing-list li:has(.ingredient-check) .amt { grid-column: 2; }
.ing-list li:has(.ingredient-check) .ing-body { grid-column: 3; }
.ing-list .checked .item, #method li.checked .step-copy { text-decoration: line-through; color: var(--ink-soft); }
#method li { position: relative; padding-right: 40px; }
.step-check { position: absolute; right: 0; top: 5px; }
.cooking .sidebar, .cooking .photo-tools, .cooking .source-line, .cooking .editor, .cooking .danger { display: none; }
.cooking .wrap { margin: 0 auto; }
.cooking .masthead { padding-top: 24px; margin-bottom: 18px; }
.cooking .masthead h1 { font-size: 1.8rem; }
.cooking .masthead > p, .cooking .recipe-actions { display: none; }
.cooking #method li { font-size: 1.15rem; line-height: 1.8; }
.collection-filters { margin-top: 16px; align-items: flex-end; }
.collection-filters label { display: grid; gap: 5px; font-size: .875rem; flex: 1 1 130px; }
.collection-filters select { min-height: 44px; border: 1px solid var(--rule); border-radius: 8px; padding: 8px; width: 100%; background: var(--surface); color: var(--ink); }
.searchbar label { color: var(--ink-soft); }
.results { display: block; }
.result-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,310px),1fr)); gap: 24px; }
.result-actions { flex-wrap: wrap; }
.result-actions select { max-width: 100%; }
.constraint-note { background: var(--accent-soft); padding: 12px; border-radius: 8px; }
.recent-search { margin: 6px 8px 6px 0; text-align: left; }
.search-form { flex-wrap: wrap; }
.search-form input { min-width: 180px; }
#manual-editor .edit-actions { position: sticky; bottom: 0; background: var(--surface); padding: 14px 0; z-index: 2; border-top: 1px solid var(--rule); }
.edit-field textarea, .step, .ingredient-paste, #menu-notes { width: 100%; border: 1px solid var(--rule); border-radius: 8px; padding: 12px; font: inherit; background: var(--surface); color: var(--ink); min-height: 100px; }
.step { white-space: pre-wrap; overflow-wrap: anywhere; }
.edit-text { display: grid; grid-template-columns: minmax(0,1fr) 44px; gap: 10px; margin-bottom: 18px; }
.amount-tools { grid-column: 1 / -1; }
.amount-picker { max-width: 100%; padding: 8px; min-height: 44px; }
.amount-chip { background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 6px; padding: 1px 6px; color: var(--accent); display: inline-block; }
.edit-hint, .edit-field > span, .edit-head, .import-tabs button { font-size: .9rem; }
.edit-actions, .menu-head { flex-wrap: wrap; }
#shopping-items { list-style: none; padding: 0; }
#shopping-items li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
#shopping-items label { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#shopping-items small { display: block; margin-left: 34px; color: var(--ink-soft); }
.onboarding-choices { margin: 20px 0; }
@media(max-width:860px) {
  .sidebar { justify-content: space-between; gap: 2px; padding: 8px; }
  .sidebar .tab { white-space: nowrap; padding: 10px 8px; font-size: .875rem; line-height: 1.4; }
  .masthead { padding-top: 24px; margin-bottom: 20px; }
  .recipe-actions { gap: 8px; }
}
@media(max-width:480px) {
  .ing-list li:has(.ingredient-check), .ing-list li.no-amt:has(.ingredient-check) { grid-template-columns: 26px 78px minmax(0,1fr); gap: 8px; }
  .wrap { padding-left: 16px; padding-right: 16px; }
  .amount-tools { display: grid; }
  .collection-filters { gap: 10px; }
  .onboarding-choices .choice { flex: 1 1 100%; text-align: center; }
}
@media print {
  .ingredient-check, .step-check, .recipe-actions, #cooking-controls, .collection-filters, #shopping button { display: none !important; }
  .ing-list li { grid-template-columns: 100px 1fr; }
  .ing-list .amt { grid-column: 1; }.ing-list .ing-body { grid-column: 2; }
  .recipe-photo { display: none; }
}
.offline-page .wrap { margin: 0 auto; }

.starter-eyebrow { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.starter-welcome { background: #eaf0ff; border: 1px solid #c6d6f4; }
@media(prefers-color-scheme:dark) { .starter-welcome { background: #1d2e4b; border-color: #354f78; } }
.starter-toolbar { margin: 0 0 30px; padding: 20px 24px; border: 1px solid var(--rule); border-radius: var(--radius); }
.starter-toolbar p { margin: 10px 0 0; font-size: .9rem; color: var(--ink-soft); }
.starter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.starter-card { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--surface); scroll-margin-top: 24px; }
.starter-card:target { outline: 2px solid var(--accent); outline-offset: 4px; }
.starter-preview img { display: block; width: 100%; height: auto; aspect-ratio: 1.6; object-fit: cover; }
.starter-card-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.starter-card h2 { font-family: var(--serif); font-size: 1.5rem; margin: 0; }
.starter-card h2 a { color: inherit; text-decoration: none; }
.starter-card h2 a:hover { text-decoration: underline; }
.starter-card-body > p { margin: 0 0 14px; }
.starter-card-body > h2 + p { margin: 12px 0 22px; color: var(--ink-soft); }
.starter-card [data-starter-state] { margin-top: auto; }
@media(max-width:600px) { .starter-grid { grid-template-columns: 1fr; } .starter-toolbar { padding: 18px; } }

.edit-extra { margin: 8px 0 22px; padding: 12px; border: 1px solid var(--rule); border-radius: var(--radius); }
.edit-extra[open] summary { margin-bottom: 18px; }
@media print {
  .ing-list li:has(.ingredient-check), .ing-list li.no-amt:has(.ingredient-check) { grid-template-columns: 100px minmax(0,1fr); }
  .ing-list li:has(.ingredient-check) .amt { grid-column: 1; }
  .ing-list li:has(.ingredient-check) .ing-body { grid-column: 2; }
}

/* Arrival after adding a starter, with the saved collection below the carousel. */
.saved-notice { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin: 0 0 28px; padding: 18px 22px; background: #eaf0ff; color: #142b64; border: 1px solid #c6d6f4; border-radius: 12px; }
.saved-notice strong { display: block; font-size: .95rem; }
.saved-notice p { margin: 3px 0 0; font-size: .88rem; }
.saved-notice a { color: inherit; font-size: .88rem; font-weight: 600; text-underline-offset: 4px; padding-block: 8px; }
a.open-recipe, .result-actions a.open-recipe { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border: 1px solid var(--action); border-radius: 8px; background: var(--action); color: #fff; font-size: 1rem; font-weight: 600; line-height: 1.3; text-decoration: none; }
a.open-recipe:hover, .result-actions a.open-recipe:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
#saved-recipes { scroll-margin-top: 20px; border-top: 1px solid var(--rule); padding-top: 26px; }
.collection-heading { font-family: var(--serif); font-size: 1.8rem; margin: 0 0 20px; }
.empty-cookbook { color: var(--ink-soft); }
@media (prefers-color-scheme: dark) { .saved-notice { background: #1d2e4b; color: var(--ink); border-color: #354f78; } }
@media print { .recipe-carousel, .saved-notice { display: none; } }

/* One place to discover, import and write recipes. */
.discover-page .masthead { margin-bottom: 24px; }
.discover-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.discover-tabs button { flex: 1 1 140px; min-height: 46px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; font: inherit; font-size: .88rem; background: var(--surface); color: var(--ink-soft); cursor: pointer; }
.discover-tabs button[aria-selected="true"] { background: var(--action); border-color: var(--action); color: #fff; }
.discover-tabs button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.discover-search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.discover-search-form input { width: 100%; min-width: 0; background: var(--surface); min-height: 58px; border-radius: 12px; }
.discover-search-form button[type="submit"] { background: var(--action); }
.search-more { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--rule); }
.search-more h2 { margin: 0 0 16px; font-family: var(--serif); font-weight: 400; }
.search-more > button { padding: 14px 24px; border: 0; border-radius: 10px; background: var(--action); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.search-more > button:disabled { opacity: .65; cursor: wait; }
.search-more > button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.search-secondary { grid-column: 1 / -1; display: flex; gap: 10px; }
.search-secondary:has(button:not([hidden])) { margin-bottom: 6px; }
.search-secondary .ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--rule); padding: 8px 14px; font-size: .85rem; }
.search-ideas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 24px; }
.search-ideas > span { flex-basis: 100%; color: var(--ink-soft); font-size: .8rem; }
.search-ideas button { border: 1px solid var(--rule); background: var(--surface); color: var(--ink-soft); border-radius: 20px; padding: 8px 12px; font: inherit; font-size: .8rem; cursor: pointer; }
.search-progress { padding: 18px 0; }
.search-progress-label { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: .9rem; }
#search-elapsed { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
#search-bar { display: block; width: 100%; height: 8px; margin: 14px 0; accent-color: var(--accent); border: 0; border-radius: 8px; overflow: hidden; }
#search-bar::-webkit-progress-bar { background: var(--rule); border-radius: 8px; }
#search-bar::-webkit-progress-value { background: var(--accent); border-radius: 8px; transition: width .25s ease; }
#search-bar:indeterminate { background: linear-gradient(90deg,var(--rule) 0%,var(--accent-soft) 40%,#86a8f5 50%,var(--accent-soft) 60%,var(--rule) 100%); background-size: 200% 100%; animation: search-shimmer 1.8s linear infinite; }
#search-bar:indeterminate::-webkit-progress-bar { background: transparent; }
.search-skeletons { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }
.search-skeleton { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.search-skeleton > div { height: 140px; background: var(--rule); }
.search-skeleton > span { display: block; height: 12px; background: var(--rule); margin: 20px; border-radius: 4px; }
.search-skeleton > span:last-child { width: 55%; margin-bottom: 28px; }
.discover-empty { padding: 24px; border: 1px dashed var(--rule); border-radius: 12px; color: var(--ink-soft); }
.discover-empty h2 { font-family: var(--serif); margin: 0 0 8px; font-size: 1.5rem; color: var(--ink); }
.discover-empty p { margin: 0; }
.discover-upgrade { margin-bottom: 24px; padding: 24px; background: var(--accent-soft); border-radius: 12px; }
.discover-upgrade h2 { margin-top: 0; font-family: var(--serif); font-size: 1.6rem; }
.discover-page .result { animation: recipe-arrive .25s ease-out; }
.discover-page [hidden] { display: none !important; }
.import-progress { margin: 12px 0; padding: 16px; border: 1px solid var(--rule); background: var(--surface); border-radius: 12px; }
.import-progress-label { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; }
.import-progress progress { display: block; appearance: none; width: 100%; height: 8px; margin: 12px 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--rule); accent-color: var(--accent); }
.import-progress progress::-webkit-progress-bar { background: var(--rule); border-radius: 8px; }
.import-progress progress::-webkit-progress-value { background: var(--accent); border-radius: 8px; transition: width .5s ease; }
.import-progress progress::-moz-progress-bar { background: var(--accent); border-radius: 8px; }
.import-progress .fine { margin: 0; }
@media(prefers-reduced-motion:reduce) { .import-progress progress::-webkit-progress-value { transition: none; } }
@keyframes recipe-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes search-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media(max-width:860px) { .sidebar .tab[href$="search.html"] { white-space: normal; max-width: 150px; text-align: center; line-height: 1.3; } }
@media(max-width:480px) {
  .discover-search-form { grid-template-columns: minmax(0, 1fr); }
  .discover-search-form input { font-size: 1rem; }
  .discover-tabs { gap: 8px; }
  .discover-tabs button { flex-basis: calc(50% - 8px); font-size: .84rem; }
  .search-skeletons { grid-template-columns: 1fr; }
  .search-skeleton:nth-child(n+2) { display: none; }
}
@media(prefers-reduced-motion:reduce) { .discover-page .result, #search-bar:indeterminate { animation: none; } #search-bar::-webkit-progress-value { transition: none; } }