:root {
  color-scheme: light;
  --bg: #f7f3ec;
  --paper: #fffaf3;
  --paper-strong: #ffffff;
  --ink: #25211b;
  --muted: #71685d;
  --line: #e6ddd0;
  --accent: #477440;
  --accent-strong: #335b2d;
  --accent-soft: #e5f0df;
  --warm: #b9803b;
  --danger: #a94332;
  --shadow: 0 18px 40px rgba(56, 43, 25, 0.11);
}

* {
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 14% 8%, rgba(229, 240, 223, 0.9), transparent 30%),
    linear-gradient(180deg, #fbf8f2 0%, var(--bg) 100%);
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.app-shell {
  min-height: 100vh;
  overflow-x: hidden;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid rgba(230, 221, 208, 0.75);
  background: rgba(255, 250, 243, 0.92);
  backdrop-filter: blur(16px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: contain;
  flex: 0 0 auto;
  box-shadow: 0 8px 20px rgba(37, 33, 27, 0.12);
}

.brand-name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
}

.brand-subtitle {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: center;
  align-items: center;
  max-width: 100%;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}

.nav button,
.nav summary {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 9px 13px;
  background: transparent;
  color: var(--muted);
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}

.nav summary::-webkit-details-marker {
  display: none;
}

.nav > button,
.nav > .nav-more > summary {
  text-align: center;
}

.cloud-status { display:block; width:100%; text-align:left; padding:8px 0; color:var(--muted); background:transparent; font-size:14px; cursor:pointer; }
.topbar { flex-wrap:wrap; }
.linked-techniques { margin:16px 0; }
.linked-techniques .btn { margin:4px; }
.community-photo { width:100%; max-height:360px; object-fit:cover; border-radius:16px; }
[data-cook-import] { display:block; max-width:100%; margin-top:8px; }
@media (max-width:600px) {
  .nav { gap:2px; grid-template-columns:repeat(3, minmax(0, 1fr)); width:100%; }
  .nav > button, .nav > .nav-more > summary { padding:10px 3px; font-size:14px; min-width:0; }
}

.nav button.is-active,
.nav summary.is-active {
  background: var(--ink);
  color: #fff;
}

.nav-more {
  position: relative;
  flex: 0 0 auto;
}

.nav-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  display: grid;
  min-width: 170px;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 18px 42px rgba(37, 33, 27, 0.16);
  padding: 8px;
}

.nav-menu button {
  width: 100%;
  border-radius: 8px;
  text-align: left;
}

.main {
  width: min(1160px, 100%);
  margin: 0 auto;
  padding: 24px clamp(14px, 4vw, 32px) 44px;
}

.recipe-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 18px;
  align-items: stretch;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 243, 0.92);
  box-shadow: var(--shadow);
}

.hero-card {
  padding: clamp(18px, 4vw, 30px);
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.recipe-title {
  margin: 0;
  max-width: 780px;
  font-size: clamp(2.05rem, 4vw, 4rem);
  line-height: 0.98;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.hero-actions,
.row-actions,
.cook-actions,
.result-actions,
.timer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-actions {
  margin-top: 22px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 8px;
  padding: 0 16px;
  background: var(--ink);
  color: #fff;
  font-weight: 850;
  text-decoration: none;
}

.btn.primary {
  background: var(--accent);
}

.btn.secondary {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.btn.danger {
  background: var(--danger);
}

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

.file-btn {
  cursor: pointer;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.recipe-cover-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 18px;
  align-items: start;
}

.recipe-cover {
  overflow: hidden;
  background: #fff;
}

.recipe-cover-image {
  position: relative;
  min-height: clamp(190px, 30vw, 360px);
  border-radius: 8px 8px 0 0;
  background:
    radial-gradient(circle at 72% 20%, rgba(255, 248, 213, 0.85), transparent 18%),
    radial-gradient(circle at 28% 64%, rgba(99, 142, 73, 0.58), transparent 26%),
    linear-gradient(135deg, #1f2d1d 0%, #496f3b 45%, #d2a76c 100%);
  background-size: cover;
  background-position: center;
}

.recipe-cover-image.is-empty {
  min-height: clamp(150px, 24vw, 220px);
  background:
    linear-gradient(135deg, rgba(71, 116, 64, 0.14), rgba(185, 128, 59, 0.16)),
    #f6f1e9;
}

.recipe-cover-image.has-photo {
  min-height: clamp(220px, 38vw, 430px);
}

.recipe-cover-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.28) 100%),
    radial-gradient(circle at 50% 42%, transparent 0 31%, rgba(255, 250, 243, 0.1) 32% 35%, transparent 36%);
  pointer-events: none;
}

.recipe-cover-image.is-empty::after {
  display: none;
}

.recipe-search-panel {
  width: min(920px, 100%);
  margin: 0 auto 14px;
}

.recipe-search-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.recipe-search-box {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  padding: 0 15px;
  box-shadow: 0 10px 26px rgba(37, 33, 27, 0.06);
}

.recipe-search-box span {
  color: var(--muted);
  line-height: 1;
}

.recipe-search-box input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
  outline: 0;
}

.add-recipe-menu {
  position: relative;
}

.add-recipe-menu summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  padding: 0 14px;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.add-recipe-menu summary::-webkit-details-marker {
  display: none;
}

.add-recipe-options {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  display: grid;
  width: min(310px, 86vw);
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 20px 46px rgba(37, 33, 27, 0.18);
  padding: 12px;
}

.add-recipe-options .btn {
  width: 100%;
}

.add-recipe-menu .recipe-import-menu > summary {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  padding: 12px;
  white-space: normal;
}

.recipe-import-options {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.add-recipe-options {
  max-height: 65vh;
  max-height: 65dvh;
  overflow-y: auto;
}

.recipe-search-results {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.recipe-result-card {
  display: grid;
  gap: 8px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 12px 14px;
  text-align: left;
}

.recipe-result-main {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  color: inherit;
  text-align: left;
}

.recipe-result-thumb {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.82rem;
  font-weight: 950;
  background-size: cover;
  background-position: center;
}

.recipe-result-info {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.recipe-result-card.is-current {
  border-color: rgba(71, 116, 64, 0.42);
  background: var(--accent-soft);
}

.recipe-result-card strong {
  font-size: 1rem;
}

.recipe-result-card span {
  color: var(--muted);
  font-size: 0.9rem;
}

.recipe-result-card small {
  color: var(--accent-strong);
  font-size: 0.82rem;
  font-weight: 900;
}

.recipe-result-card em {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.86rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recipe-economics-line {
  display: grid;
  gap: 2px;
  width: 100%;
  border-top: 1px solid rgba(112, 103, 90, 0.18);
  color: var(--ink);
  padding-top: 7px;
  text-align: left;
}

.recipe-economics-line span {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.25;
}

.recipe-economics-line span + span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.recipe-economics-line.is-pending span {
  color: var(--accent-strong);
}

.recipe-filter-row {
  display: flex;
  gap: 6px;
  margin-top: 9px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
}

.recipe-filter-row button {
  flex: 0 0 auto;
  min-height: 32px;
  border-radius: 999px;
  background: #f3f0eb;
  color: var(--muted);
  padding: 0 11px;
  font-size: 0.86rem;
  font-weight: 850;
}

.recipe-filter-row button.is-active {
  background: var(--ink);
  color: #fff;
}

.empty-search-state {
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  padding: 14px;
}

.empty-search-state p {
  margin: 0 0 10px;
  color: var(--muted);
  font-weight: 800;
}

.recipe-cover-shell-clean {
  grid-template-columns: minmax(0, 1fr);
  max-width: 920px;
  margin: 0 auto;
}

.cover-icon {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 1;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  font-size: 1.55rem;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.cover-icon-right {
  right: 18px;
  left: auto;
  color: var(--accent-strong);
}

.cover-photo-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--accent-strong);
  padding: 0 18px;
  font-weight: 950;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
}

.cover-photo-btn.is-compact {
  top: auto;
  right: 18px;
  bottom: 18px;
  left: auto;
  transform: none;
}

.recipe-cover-body {
  padding: clamp(18px, 4vw, 28px);
}

.back-to-recipes {
  margin: 0 0 12px;
  background: transparent;
  color: var(--accent-strong);
  font-size: 0.95rem;
  font-weight: 900;
  padding: 0;
}

.recipe-mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 22px;
}

.recipe-mode-tabs button {
  min-height: 44px;
  border-radius: 999px;
  background: #f3f0eb;
  color: var(--muted);
  font-weight: 900;
}

.recipe-mode-tabs button.is-active {
  background: var(--ink);
  color: #fff;
}

.recipe-cover-title {
  margin: 0;
  max-width: 840px;
  font-size: clamp(2rem, 5.3vw, 4.2rem);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.045em;
  text-transform: none;
}

.recipe-title-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.recipe-title-row .recipe-cover-title {
  flex: 1 1 auto;
}

.tiny-action {
  flex: 0 0 auto;
  min-height: 34px;
  border-radius: 999px;
  background: #f3f0eb;
  color: var(--muted);
  padding: 0 10px;
  font-size: 0.9rem;
  font-weight: 900;
}

.tiny-action.is-favorite {
  color: var(--accent-strong);
  background: var(--accent-soft);
}

.recipe-cover-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin: 20px 0 0;
  color: var(--ink);
}

.recipe-cover-meta div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
}

.recipe-cover-meta span {
  color: var(--accent-strong);
  font-weight: 900;
}

.recipe-cover-meta strong {
  font-size: 1.3rem;
}

.recipe-cover-meta small {
  color: var(--muted);
  font-size: 0.96rem;
  font-weight: 750;
}

.servings-meta input {
  width: 60px;
  border: 0;
  border-bottom: 2px solid rgba(71, 116, 64, 0.24);
  background: transparent;
  color: var(--ink);
  font-size: 1.3rem;
  font-weight: 900;
  text-align: center;
}

.inline-reset {
  margin-top: 9px;
  background: transparent;
  color: var(--accent-strong);
  font-size: 0.92rem;
  font-weight: 850;
  padding: 0;
}

.recipe-cost-margin {
  margin-top: 14px;
  border: 1px solid rgba(230, 221, 208, 0.95);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
}

.recipe-cost-margin-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  background: transparent;
  color: var(--ink);
  padding: 0 14px;
  text-align: left;
}

.recipe-cost-margin-toggle span {
  color: var(--accent-strong);
  font-size: 0.86rem;
  font-weight: 950;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.recipe-cost-margin-toggle strong {
  color: var(--muted);
  font-size: 1rem;
}

.recipe-cost-margin-body {
  display: grid;
  gap: 10px;
  border-top: 1px solid rgba(230, 221, 208, 0.9);
  padding: 12px 14px 14px;
}

.cost-margin-warning {
  margin: 0;
  color: var(--danger);
  font-size: 0.86rem;
  font-weight: 850;
}

.recipe-cost-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.recipe-cost-grid div {
  min-width: 0;
}

.recipe-cost-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.recipe-cost-grid strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 950;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.cost-margin-edit {
  justify-self: start;
  background: transparent;
  color: var(--accent-strong);
  font-size: 0.9rem;
  font-weight: 900;
  padding: 0;
  text-align: left;
}

.recipe-ingredients-panel {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.compact-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.compact-header h2,
.compact-header h3 {
  margin: 0;
}

.compact-header span {
  color: var(--muted);
  font-weight: 850;
}

.compact-ingredient-list {
  display: grid;
  gap: 7px;
}

.compact-ingredient-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(87, 64, 42, 0.1);
  padding: 8px 0;
}

.compact-ingredient-row strong {
  font-size: 1rem;
}

.compact-ingredient-row span {
  color: var(--accent-strong);
  font-weight: 900;
  white-space: nowrap;
}

.secondary-recipe-tools {
  margin-top: 20px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.secondary-recipe-tools summary {
  cursor: pointer;
  color: var(--accent-strong);
  font-weight: 900;
}

.secondary-recipe-tools .mini-import-actions {
  margin-top: 12px;
}

.photo-recipe-action {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(37, 33, 27, 0.52);
  backdrop-filter: blur(10px);
}

.modal-card {
  width: min(560px, 100%);
  max-height: min(760px, 92vh);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
  padding: clamp(16px, 4vw, 24px);
}

.recipe-photo-modal {
  display: grid;
  gap: 14px;
}

.photo-source-actions,
.modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.photo-source-actions .btn,
.modal-actions .btn {
  min-height: 54px;
}

.photo-preview-box {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f0ebe2;
  aspect-ratio: 4 / 3;
}

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

.error-box {
  border: 1px solid rgba(169, 67, 50, 0.25);
  border-radius: 10px;
  background: #fff1ee;
  color: var(--danger);
  padding: 12px;
  font-weight: 800;
}

.recipe-side-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.compact-servings {
  padding: 14px;
}

.recipe-summary-card,
.recipe-import-mini,
.recipe-photo-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-strong);
  padding: 14px;
}

.recipe-photo-card h2 {
  margin: 0 0 12px;
  font-size: 1.25rem;
}

.summary-lines {
  display: grid;
  gap: 8px;
}

.summary-lines span {
  display: flex;
  align-items: center;
  min-height: 38px;
  border-radius: 8px;
  background: #f6f1e9;
  padding: 0 12px;
  font-weight: 850;
}

.mini-import-actions {
  display: grid;
  gap: 8px;
}

.meta-card {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.servings-box,
.bake-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-strong);
  padding: 16px;
}

.servings-box label,
.field label,
.tiny-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.serving-input {
  display: flex;
  align-items: center;
  gap: 8px;
}

.serving-input input,
.field input,
.field textarea,
.field select,
.command-input input,
.comment-box textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 10px 12px;
  outline: none;
}

.field textarea,
.comment-box textarea {
  min-height: 82px;
  resize: vertical;
}

.serving-input span {
  color: var(--muted);
  font-weight: 800;
}

.bake-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.bake-stat {
  border-radius: 8px;
  background: var(--accent-soft);
  padding: 14px;
}

.bake-stat strong {
  display: block;
  margin-top: 4px;
  font-size: 1.45rem;
}

.section {
  margin-top: 18px;
}

.section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  min-width: 0;
}

.section-header > * {
  min-width: 0;
}

.section h2,
.section h3 {
  margin: 0;
}

.section h2 {
  font-size: 1.08rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.section h3 {
  font-size: 1rem;
}

.ingredients-list,
.history-list,
.versions-list,
.annotations-list {
  display: grid;
  gap: 9px;
}

.ingredient-line {
  display: grid;
  grid-template-columns: 124px 1fr;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  padding: 12px 14px;
}

.ingredient-amount {
  font-weight: 900;
  color: var(--accent-strong);
}

.ingredient-name {
  font-weight: 750;
}

.muted {
  color: var(--muted);
}

.edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.editor-card,
.cook-card,
.history-card,
.version-card,
.result-card {
  padding: clamp(16px, 3vw, 24px);
}

.edit-item {
  display: grid;
  grid-template-columns: 42px minmax(86px, 0.9fr) minmax(90px, 0.65fr) minmax(120px, 1.3fr) 74px 42px;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 9px;
}

.edit-step {
  display: grid;
  grid-template-columns: 42px 1fr 116px 42px;
  gap: 8px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 9px;
}

.order-buttons {
  display: grid;
  gap: 5px;
}

.icon-btn {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 900;
}

.icon-btn:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.delete-btn {
  background: #f8e7e2;
  color: var(--danger);
}

.checkbox-line {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.checkbox-line input {
  width: 18px;
  height: 18px;
}

.cook-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.cook-main {
  display: grid;
  gap: 16px;
}

.step-stage {
  min-height: 0;
  display: grid;
  align-content: start;
  border: 0;
  border-radius: 8px;
  background: var(--paper-strong);
  padding: 0;
}

.step-count {
  margin: 0 0 12px;
  color: var(--accent-strong);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.step-text {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: break-word;
}

.step-edit-slot {
  margin-top: 12px;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.step-edit-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--accent-strong);
  font-size: 0.88rem;
  font-weight: 900;
  padding: 9px 14px;
}

.cook-step-editor {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
}

.cook-step-editor label {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 900;
}

.cook-step-editor textarea {
  min-height: 132px;
  resize: vertical;
}

.step-editor-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cook-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
}

.cook-actions .btn {
  min-height: 48px;
  font-size: 1.02rem;
}

.bake-mode {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 16px;
}

.timer-display {
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  font-weight: 950;
  line-height: 1;
}

.timer-bar {
  overflow: hidden;
  height: 12px;
  border-radius: 999px;
  background: #efe6d8;
}

.timer-fill {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.25s linear;
}

.side-panel {
  display: grid;
  gap: 12px;
  align-content: start;
}

.voice-card,
.pending-card,
.session-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-strong);
  padding: 14px;
}

.voice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.listen-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.listen-dot {
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: #c8bbb0;
}

.listen-indicator.is-on .listen-dot {
  background: #d7402f;
  box-shadow: 0 0 0 6px rgba(215, 64, 47, 0.12);
}

.command-input {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 12px;
}

.conversation-log {
  display: grid;
  max-height: 260px;
  gap: 8px;
  overflow: auto;
  margin-top: 12px;
  padding-right: 4px;
}

.bubble {
  border-radius: 8px;
  padding: 9px 10px;
  background: #f3ede4;
  font-size: 0.9rem;
}

.bubble.user {
  background: var(--accent-soft);
}

.bubble strong {
  display: block;
  margin-bottom: 3px;
  font-size: 0.72rem;
  text-transform: uppercase;
}

/* Preparation prioritizes the current step at all screen sizes. */
.cook-card{padding:clamp(14px,2vw,24px)}
.cook-card>.eyebrow{font-size:1.05rem;letter-spacing:.025em;margin:0 0 12px}
.cook-phase-position{margin:0 0 12px;font-size:.85rem;color:var(--muted)}
.step-edit-slot .btn,.step-edit-slot .step-edit-trigger{min-height:44px;padding:8px 10px;font-size:.85rem;font-weight:600;border-radius:8px}
.step-edit-slot [data-dir]{min-width:44px}
.cook-layout .side-panel{display:block}
.cook-layout .voice-card{padding:14px;box-shadow:none}
.voice-controls{display:flex;gap:6px;flex-wrap:wrap}
.voice-controls .btn{min-height:44px;padding:8px 12px;font-size:.9rem}
[data-speech-status]{font-size:.8rem;color:var(--muted);margin:8px 0}
.last-assistant-message{font-size:.9rem;line-height:1.4;margin:8px 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.voice-history,.voice-options{margin-top:10px;font-size:.85rem}
.voice-history summary,.voice-options summary{cursor:pointer;padding:6px 0;color:var(--accent-strong)}
.voice-history .conversation-log{max-height:45vh}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(min-width:1100px){.cook-layout{grid-template-columns:minmax(0,1fr) minmax(280px,30%);align-items:start}}
@media(max-width:480px){.voice-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.voice-controls .btn{padding:8px 4px;font-size:.8rem}.cook-actions{gap:8px}.cook-actions .btn{font-size:.9rem;padding:10px 8px}}

.pending-card {
  border-color: #d3b885;
  background: #fff8e8;
}

.pending-card strong {
  display: block;
  margin-bottom: 7px;
}

.session-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.session-list li,
.annotation-pill {
  border-radius: 8px;
  background: #f3ede4;
  padding: 9px 10px;
}

.history-item,
.version-item {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.history-top,
.version-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.history-date,
.version-number {
  font-weight: 900;
}

.result-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.result-option {
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-weight: 900;
}

.result-option.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.empty-state {
  border: 1px dashed #cfc3b4;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  padding: 20px;
  color: var(--muted);
}

.professional-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.professional-summary.compact {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.metric-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.metric-card span {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.metric-card strong {
  display: block;
  margin-top: 5px;
  font-size: 1.22rem;
}

.warning-box {
  border: 1px solid #dfc996;
  border-radius: 8px;
  background: #fff8e8;
  padding: 14px;
  margin-top: 16px;
}

.warning-box p {
  margin: 6px 0 0;
  color: var(--muted);
}

.quick-import-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
  gap: 16px;
  align-items: center;
  background: linear-gradient(135deg, #fffaf3 0%, #eaf4e4 100%);
}

.quick-import-card h2 {
  margin: 0 0 8px;
  font-size: clamp(1.35rem, 2vw, 2rem);
}

.quick-import-card p {
  margin: 0;
}

.import-options {
  display: grid;
  gap: 10px;
}

.document-upload-card {
  display: grid;
  grid-template-columns: 1fr 96px;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  margin: 12px 0;
}

.document-upload-card span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.document-upload-card img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
}

.invoice-review-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
  gap: 14px;
  margin-top: 14px;
}

.invoice-preview-card,
.invoice-review-panel,
.review-line {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.invoice-preview-card {
  display: grid;
  gap: 10px;
  align-content: start;
}

.invoice-preview-card img {
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f4ed;
}

.ocr-status {
  border: 1px solid #d8c99a;
  border-radius: 8px;
  background: #fff8e8;
  color: var(--muted);
  padding: 10px 12px;
  font-weight: 750;
}

.invoice-review-panel {
  display: grid;
  gap: 14px;
}

.review-lines {
  display: grid;
  gap: 10px;
}

.review-line {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.review-line .name-field {
  grid-column: span 3;
}

.delete-review-line {
  justify-self: start;
}

.danger-text {
  color: var(--danger);
}

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

.costing-table {
  display: grid;
  grid-template-columns: 1.1fr 0.75fr 1fr 0.65fr;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
}

.costing-summary,
.sale-margin-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.sale-margin-summary {
  grid-template-columns: repeat(4, 1fr);
}

.costing-summary div,
.sale-margin-summary div {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 10px;
}

.costing-summary span,
.sale-margin-summary span {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.costing-summary strong,
.sale-margin-summary strong {
  display: block;
  margin-top: 3px;
  font-size: 1.1rem;
}

.costing-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.86rem;
  font-weight: 900;
}

.costing-status.is-complete {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.costing-status.is-incomplete {
  background: #fff7dc;
  color: #8a5a00;
}

.compact-costing-table {
  grid-template-columns: minmax(92px, 1.15fr) minmax(58px, 0.55fr) minmax(86px, 0.9fr) minmax(58px, 0.55fr);
}

.costing-head,
.costing-cell {
  background: #fff;
  padding: 10px 8px;
}

.costing-head {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
}

.costing-cell small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.qty-link {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  color: var(--ink);
  font: inherit;
  text-align: left;
}

.qty-link small {
  color: var(--accent-strong);
  font-weight: 900;
}

.qty-cell,
.cost-cell {
  white-space: nowrap;
}

.price-cell {
  min-width: 0;
}

.costing-total-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  background: #fff;
  padding: 11px 8px;
  font-size: 1.04rem;
}

.costing-trace-row {
  grid-column: 1 / -1;
  background: #fff;
  padding: 0;
}

.costing-trace-row .trace-card {
  margin: 0;
  border-radius: 0;
  border-width: 1px 0 0;
  box-shadow: none;
}

.price-link {
  display: grid;
  gap: 3px;
  min-height: auto;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid rgba(71, 116, 64, 0.28);
  border-radius: 8px;
  background: #f6fbf2;
  color: var(--accent-strong);
  font-weight: 900;
  text-align: left;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
}

.missing-link {
  width: 100%;
  border: 1px solid rgba(71, 116, 64, 0.28);
  border-radius: 8px;
  background: #f6fbf2;
  color: var(--accent-strong);
  padding: 6px 8px;
  font: inherit;
  font-weight: 950;
  text-align: left;
  cursor: pointer;
}

.missing-link.compact {
  white-space: nowrap;
  text-align: center;
}

.price-link small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.trace-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--accent-soft);
  padding: 14px;
  margin-top: 14px;
}

.price-modal {
  background: #fff;
}

.compact-header {
  margin-top: 14px;
}

.price-editor {
  margin-top: 10px;
}

.price-editor .field input {
  background: #fff;
}

.compact-price-form {
  display: grid;
  gap: 8px;
}

.inline-price-input {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
}

.inline-price-input span {
  color: var(--muted);
  font-weight: 900;
}

.inline-price-input select {
  min-width: 74px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-weight: 900;
  padding: 8px 9px;
}

.text-button {
  margin-top: 10px;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.price-details-panel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.price-details-panel div {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
}

.price-details-panel span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.price-history-mini {
  grid-column: 1 / -1;
}

.price-history-mini p {
  margin: 5px 0 0;
  color: var(--text);
}

.catalog-resolver-card {
  border-color: rgba(71, 116, 64, 0.22);
}

.manual-match-hint {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(71, 116, 64, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  padding: 9px;
}

.manual-match-hint span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.manual-match-hint button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--accent-strong);
  padding: 7px 9px;
  text-align: left;
  font-weight: 850;
}

.resolver-options,
.catalog-match-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.catalog-match {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 10px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.catalog-match strong {
  color: var(--text);
}

.catalog-match span {
  color: var(--muted);
  font-size: 0.86rem;
}

.catalog-create-form {
  margin-top: 10px;
}

.sectioned-recipe-block {
  margin-top: 12px;
}

.sectioned-recipe-block:first-child {
  margin-top: 0;
}

.sectioned-recipe-block h3 {
  margin: 0 0 8px;
  color: var(--accent-strong);
  font-size: 0.9rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.recipe-section-editor-list {
  display: grid;
  gap: 14px;
}

.recipe-section-editor {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
}

.ingredient-move-field {
  min-width: 150px;
}

.ingredient-section-picker {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-strong);
  margin-top: 14px;
  padding: 14px;
}

.section-choice-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.section-name-field {
  flex: 1;
}

.import-section-editor {
  display: grid;
  gap: 10px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.provider-list,
.product-list {
  display: grid;
  gap: 10px;
}

.provider-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.provider-card {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 16px;
  text-align: left;
}

.provider-card strong {
  font-size: 1.05rem;
}

.provider-card span {
  color: var(--muted);
}

.impact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.impact-grid div {
  border-radius: 8px;
  background: #f3ede4;
  padding: 10px;
}

.impact-grid span {
  display: block;
  margin-top: 4px;
}

@media (max-width: 920px) {
  .recipe-cover-shell,
  .recipe-hero,
  .cook-layout,
  .edit-grid,
  .quick-import-card,
  .professional-summary,
  .professional-summary.compact,
  .provider-list,
  .impact-grid,
  .invoice-review-layout {
    grid-template-columns: 1fr;
  }

  .result-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .brand {
    width: 100%;
  }

  .nav {
    width: 100%;
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 6px;
  }

  .nav button,
  .nav summary {
    flex: 1 1 auto;
    padding: 8px 10px;
    font-size: 0.95rem;
  }

  .nav-more {
    flex: 1 1 auto;
  }

  .nav-more summary {
    text-align: center;
  }

  .nav-menu {
    right: 0;
    min-width: min(210px, 72vw);
  }

  .section-header {
    align-items: stretch;
    flex-direction: column;
  }

  .row-actions {
    width: 100%;
  }

  .row-actions .btn,
  .row-actions .file-btn {
    flex: 1 1 100%;
    width: 100%;
  }

  .main {
    padding-top: 16px;
  }

  .recipe-cover-image {
    min-height: 210px;
  }

  .recipe-cover-image.is-empty {
    min-height: 145px;
  }

  .recipe-search-panel {
    margin-bottom: 10px;
  }

  .recipe-search-topline {
    grid-template-columns: 1fr;
  }

  .add-recipe-menu summary {
    justify-content: center;
    width: 100%;
    min-height: 38px;
  }

  .add-recipe-options {
    right: auto;
    left: 0;
    width: min(100%, 88vw);
  }

  .recipe-search-box {
    min-height: 40px;
    padding: 0 12px;
  }

  .recipe-search-box input {
    font-size: 0.96rem;
  }

  .recipe-cover-body {
    padding: 18px;
  }

  .recipe-mode-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .recipe-mode-tabs button {
    min-height: 40px;
    font-size: 0.88rem;
    padding: 0 8px;
  }

  .recipe-title-row {
    align-items: center;
    flex-wrap: wrap;
  }

  .tiny-action {
    min-height: 32px;
  }

  .photo-source-actions,
  .modal-actions {
    grid-template-columns: 1fr;
  }

  .ingredient-line {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .edit-item {
    grid-template-columns: 38px 1fr 1fr;
  }

  .edit-item .field.name-field,
  .edit-item .ingredient-move-field,
  .edit-item .checkbox-line,
  .edit-item .delete-wrap {
    grid-column: 2 / -1;
  }

  .edit-step {
    grid-template-columns: 38px 1fr;
  }

  .edit-step .field,
  .edit-step .delete-wrap {
    grid-column: 2 / -1;
  }

  .command-input {
    grid-template-columns: 1fr;
  }

  .costing-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sale-margin-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compact-costing-table {
    grid-template-columns: minmax(88px, 1.2fr) minmax(54px, 0.55fr) minmax(78px, 0.85fr) minmax(54px, 0.55fr);
    font-size: 0.82rem;
  }

  .costing-head,
  .costing-cell {
    padding: 8px 5px;
  }

  .costing-head {
    display: block;
    font-size: 0.66rem;
    letter-spacing: 0.02em;
  }

  .price-link {
    padding: 5px 4px;
    font-size: 0.78rem;
  }

  .costing-summary strong,
  .sale-margin-summary strong {
    font-size: 0.95rem;
  }

  .costing-summary span,
  .sale-margin-summary span {
    font-size: 0.62rem;
  }

  .price-details-panel {
    grid-template-columns: 1fr;
  }

  .document-upload-card {
    grid-template-columns: 1fr;
  }

  .document-upload-card img {
    width: 100%;
    height: 150px;
  }

  .review-line {
    grid-template-columns: 1fr;
  }

  .review-line .name-field {
    grid-column: auto;
  }
}

@media (max-width:600px) {
  .nav { gap:2px; grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .nav > button, .nav > .nav-more > summary { padding:10px 3px; font-size:14px; min-width:0; overflow-wrap:anywhere; }
}

.library-type-selector {
  display:inline-flex;
  justify-self:start;
  align-self:start;
  gap:3px;
  padding:3px;
  border:1px solid var(--line, #e4e0d5);
  border-radius:999px;
  background:var(--surface, #f2f0e9);
  max-width:100%;
}
.library-type-selector button {
  padding:8px 16px;
  min-height:40px;
  font-size:14px;
  font-weight:700;
  border-radius:999px;
  color:var(--muted);
  background:transparent;
  cursor:pointer;
}
.library-type-selector button[aria-pressed="true"] { background:var(--ink); color:#fff; }
.library-type-selector button:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }

/* Four compact primary destinations; techniques remain inside Recipes. */
.nav { grid-template-columns:1fr 1.2fr 1.3fr .65fr; overflow:visible; gap:2px; }
.nav > button, .nav > .nav-more > summary { min-width:0; padding:10px 3px; white-space:nowrap; overflow-wrap:normal; font-size:14px; }
.publication-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:12px 0; }
.publication-actions button { min-height:44px; text-decoration:underline; }
.publication-dialog { width:min(540px,calc(100% - 24px)); max-height:85dvh; overflow:auto; box-sizing:border-box; padding:24px; border:1px solid var(--line); border-radius:20px; color:var(--ink); background:#fffdf7; }
.publication-dialog::backdrop { background:rgba(0,0,0,.45); }
.publication-dialog h2 { margin-top:0; }
.publication-dialog .row-actions { position:sticky; bottom:0; background:#fffdf7; padding:8px 0; }
.community-card { display:flex; gap:14px; border:1px solid var(--line); border-radius:16px; padding:14px; margin-top:14px; }
.community-card > img { width:88px; height:88px; object-fit:cover; border-radius:12px; }
.community-card > div { min-width:0; overflow-wrap:anywhere; }
.community-title { font-size:18px; font-weight:750; text-align:left; }
.community-card p { margin:6px 0; }
.community-card .btn { white-space:normal; }
@media (max-width:360px) { .nav > button,.nav > .nav-more > summary { font-size:13px; padding:10px 1px; } .community-card { flex-direction:column; } }

.visibility-option{display:flex;align-items:flex-start;gap:12px;padding:16px 0;cursor:pointer}.visibility-option input{width:20px;height:20px;flex:none}.visibility-option small{display:block;margin-top:6px;font-size:14px}.publication-actions button{text-decoration:none}
/* Recipe editing: visible actions, touch-friendly rows and stable input nodes. */
.recipe-title-row { flex-wrap: wrap; }
.recipe-title-row .recipe-cover-title { flex-basis: 100%; width: 100%; }
.recipe-edit-visible { min-height: 46px; border: 2px solid #47753d; color: #315e2e; font-weight: 800; white-space: normal; }
.ingredient-edit-row { width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid #e6e1d5; cursor: pointer; font: inherit; min-height: 48px; }
.ingredient-edit-row:focus-visible { outline: 2px solid #47753d; }
.recipe-edit-dialog { position: fixed; inset: 0; margin: auto; z-index: 1000; width: min(94vw, 520px); max-height: 88dvh; overflow: auto; border: 1px solid #ded9cc; border-radius: 20px; padding: 24px; background: #fffdf7; box-shadow: 0 10px 60px #0004; }
.recipe-edit-dialog::backdrop { background: #0006; }
.recipe-edit-dialog .field { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.recipe-edit-dialog input, .recipe-edit-dialog select, [data-editor-extra], .step-process-fields input { font-size: 16px; width: 100%; min-width: 0; padding: 12px; }
.recipe-edit-dialog .row-actions, .editor-save-footer { display: flex; gap: 12px; flex-wrap: wrap; }
.editor-save-footer { padding: 24px 0; justify-content: flex-end; }
.recipe-conservation { white-space: pre-wrap; }
/* Compact production input: typing does not remount the form. */
.production-scaling{min-width:0;max-width:100%;font-size:1rem}
.scaling-form{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin:0}
.scaling-form label{display:flex;align-items:center;gap:.4rem}
.scaling-form input{width:5rem;min-height:44px;font-size:1rem;border:1px solid #8a9d80;border-radius:.5rem;background:#fff;padding:.4rem;text-align:center}
.scaling-form .btn{min-height:44px;padding:.4rem .7rem}
.scaling-form [role=alert]{flex-basis:100%;margin:0;color:#a12c25}
.production-scaling small{display:block;margin-top:.4rem}
.production-scaling details{margin-top:.5rem;font-size:.9rem}
.recipe-disclosure{padding:0;overflow:hidden}
.recipe-disclosure>summary{padding:1rem;min-height:48px;cursor:pointer;font-weight:700;font-size:1rem}
.recipe-disclosure-body{padding:0 1rem 1rem;overflow-wrap:anywhere}
.recipe-disclosure-body p{white-space:pre-wrap}
.compact-ingredient-row{display:grid;grid-template-columns:minmax(min-content,1fr) fit-content(38%);align-items:baseline;column-gap:.75rem;min-width:0}
.compact-ingredient-row>strong{min-width:0;white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:none}
.compact-ingredient-row>span{text-align:right;white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:none}
.compact-ingredient-row .ingredient-quantity-value{white-space:nowrap}
.ingredient-quantity-note{display:block;margin-top:.15rem;font-size:.78rem;line-height:1.3;font-weight:400;color:var(--muted)}
.ingredient-line{grid-template-columns:minmax(min-content,1fr) max-content}
.ingredient-line .ingredient-name{grid-column:1;grid-row:1;overflow-wrap:normal;word-break:normal;hyphens:none}
.ingredient-line .ingredient-amount{grid-column:2;grid-row:1;text-align:right;white-space:nowrap}
.costing-cell{overflow-wrap:normal;word-break:normal;hyphens:none}
.costing-cell .qty-link{justify-content:flex-end;text-align:right}
@media(max-width:600px){
 .compact-costing-table{grid-template-columns:minmax(150px,1.5fr) minmax(65px,.55fr) minmax(90px,.9fr) minmax(65px,.55fr);overflow-x:auto}
}
.sync-values pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 22rem; overflow: auto; font-size: .85rem; }
.sync-comparison details { margin: 1rem 0; padding: .75rem; border: 1px solid #d9d8cd; border-radius: .75rem; }
.sync-comparison select { min-height: 44px; font-size: 16px; }
.sync-values { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,16rem),1fr)); gap: 1rem; }
.sync-legacy { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 22rem; overflow: auto; }

/* Personal favorite hearts are siblings of the card link, never nested links. */
.recipe-result-card { grid-template-columns: minmax(0,1fr) 44px; align-items:start; }
.recipe-result-card .recipe-economics-line { grid-column:1 / -1; }
.favorite-heart { min-width:44px; min-height:44px; font-size:1.65rem; line-height:1; color:var(--accent-strong); background:transparent; border:1px solid var(--line); border-radius:12px; }
.favorite-heart.is-favorite { background:var(--accent-soft); color:var(--accent-strong); }
.favorite-heart:disabled { opacity:.55; cursor:wait; }
.favorites-status:empty { display:none; }
.favorites-status { color:var(--accent-strong); font-size:.95rem; }
.recipe-result-card .recipe-result-info { min-width:0; overflow-wrap:normal; word-break:normal; }

/* Starter subfilters only appear inside Entrantes; three comfortable touch targets. */
.starter-filters { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px; }
.starter-filters button { min-height:44px; padding:8px 18px; border:1px solid var(--line); border-radius:24px; background:var(--panel,#fff); color:var(--ink); }
.starter-filters button.is-active { background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent-strong); }
[data-starter-subtype]:not(:empty) { margin-top:12px; }

/* Three destinations; all professional tools remain reachable from Más. */
.nav { grid-template-columns:repeat(3,minmax(0,1fr)); }
.more-links { display:grid; gap:10px; margin-top:20px; }
.more-link { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; min-height:68px; padding:16px; text-align:left; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:14px; }
.more-link span:first-child { min-width:0; }
.more-link strong, .more-link small { display:block; overflow-wrap:anywhere; }
.more-link small { color:var(--muted); margin-top:5px; }
.recipe-editor { display:grid; gap:12px; max-width:900px; margin:auto; }
.editor-basics { display:grid; gap:16px; }
.editor-basics h1 { margin:0 0 4px; font-size:24px; }
.editor-basics .field, .editor-basics [data-category-fields] { margin:0; min-width:0; }
.editor-photo { display:flex; align-items:center; gap:16px; }
.editor-photo img, .editor-photo-placeholder { display:flex; align-items:center; justify-content:center; width:88px; height:88px; object-fit:cover; border-radius:14px; background:var(--paper); font-size:30px; }
.editor-photo h2 { font-size:16px; margin:0 0 8px; }
.editor-disclosure { min-width:0; overflow:hidden; }
.editor-disclosure > summary { padding:18px 20px; min-height:56px; box-sizing:border-box; font-weight:700; cursor:pointer; }
.editor-disclosure > summary:focus-visible { outline:3px solid var(--ink); outline-offset:-4px; }
.editor-disclosure-body { border-top:1px solid var(--line); padding:18px; }
.editor-disclosure-body > .panel { margin:16px 0 0; box-shadow:none; }
.editor-disclosure-body > .panel:first-child { margin-top:0; }
.editor-ingredient-group { margin-top:20px; }
.editor-advanced-section h2 { font-size:18px; }
.recipe-editor .editor-save-footer { margin:0; padding:12px 0 max(12px,env(safe-area-inset-bottom)); }
.recipe-editor input:not([type=checkbox]), .recipe-editor select, .recipe-editor textarea,
.recipe-edit-dialog input, .recipe-edit-dialog select, .recipe-edit-dialog textarea { font-size:16px; max-width:100%; }
.recipe-editor button, .recipe-editor select { min-height:44px; }
@media(max-width:600px) {
  .editor-basics { padding:18px; }
  .editor-disclosure-body { padding:12px; }
  .editor-disclosure-body .panel { padding:12px; }
  .recipe-editor .editor-save-footer { display:grid; grid-template-columns:auto 1fr; gap:10px; }
  .recipe-editor .edit-grid { grid-template-columns:minmax(0,1fr); }
  .recipe-editor .section-header { flex-wrap:wrap; }
  .recipe-editor .recipe-section-editor { padding:12px; min-width:0; }
  .recipe-editor .field { min-width:0; }
}