:root {
  /* Warm, appetizing palette: cream background, apricot accents, cocoa text. */
  --bg: #fff3e8;
  --surface: #ffffff;
  --text: #3a2a22;
  --muted: #7f6b61;
  --accent: #ff9b73;          /* apricot: buttons, chips, knobs */
  --on-accent: #3a1d10;       /* text on --accent */
  --accent-strong: #c4462a;   /* terracotta: links, tags, borders, focus */
  --accent-soft: #ffe3d3;     /* peach tint: highlights */
  --neutral-soft: #f2e4d7;    /* oat: inactive knobs */
  --border: #f5dfcf;
  --saved-surface: #fff0ec;   /* cards of saved recipes on the home page */
  /* Frosted glass ("water drop") panel on profiles: see .profile-recipes. */
  --glass-bg: rgba(255, 255, 255, 0.42);
  --glass-border: rgba(255, 255, 255, 0.85);
  --glass-highlight: rgba(255, 255, 255, 0.9);
  --glass-shadow: 0 10px 32px rgba(150, 80, 40, 0.13);
  --glass-fallback: rgba(255, 250, 246, 0.92);
  --saved-border: #f7c4b4;
  /* Pastel tint per recipe category, behind the emoji on cards and recipe pages. */
  --tint-breakfast: #fff0c2;
  --tint-soup: #ffe1c2;
  --tint-salad: #dcf2d2;
  --tint-main: #ffd9cc;
  --tint-olive_oil_dish: #e6efc9;
  --tint-rice_pasta: #fde5bd;
  --tint-side: #f3e5d2;
  --tint-appetizer: #ffdccf;
  --tint-pastry: #f7e1c3;
  --tint-dessert: #fdd9e5;
  --tint-drink: #d6edfb;
  --tint-snack: #f5e6cc;
  --tint-sauce: #ffd4c7;
  --radius: 14px;
  --shadow: 0 2px 10px rgba(120, 70, 40, 0.07);
  --warn: #b7791f;
  --warn-soft: #fcefd6;
  --danger: #c0392b;
  --danger-soft: #fbe0dc;
  --on-danger: #fff;
  /* Down arrow for select menus, in the muted text color. */
  /* How visible the kitchen pattern behind the pages is (pattern.svg). */
  --pattern-opacity: 0.16;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237a6e66' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1e1916;
    --surface: #2a221e;
    --text: #f6ece5;
    --muted: #b5a69c;
    --accent: #ff9f7d;
    --on-accent: #2b1408;
    --accent-strong: #ffb08f;
    --accent-soft: #4d2f25;
    --saved-surface: #35261f;
    --glass-bg: rgba(52, 41, 35, 0.45);
    --glass-border: rgba(255, 220, 200, 0.14);
    --glass-highlight: rgba(255, 230, 215, 0.12);
    --glass-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
    --glass-fallback: rgba(42, 34, 30, 0.95);
    --saved-border: #6b4334;
    --tint-breakfast: #4a3f22;
    --tint-soup: #4a3424;
    --tint-salad: #2f4130;
    --tint-main: #4a2d26;
    --tint-olive_oil_dish: #3b4126;
    --tint-rice_pasta: #47391f;
    --tint-side: #3d342a;
    --tint-appetizer: #46302c;
    --tint-pastry: #463822;
    --tint-dessert: #472a35;
    --tint-drink: #26394a;
    --tint-snack: #3f3626;
    --tint-sauce: #4a2a24;
    --neutral-soft: #3d342e;
    --border: #3d332d;
    --shadow: none;
    --warn: #e0a83e;
    --warn-soft: #3d3220;
    --danger: #f07167;
    --danger-soft: #45231f;
    --on-danger: #2a0f0c;
    --pattern-opacity: 0.12;
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a89e96' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

* { box-sizing: border-box; }

/* Faint kitchen line drawings behind every page. A fixed layer under the content,
   so it doesn't scroll and never covers anything. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url(/pattern.svg) repeat;
  background-size: 260px;
  opacity: var(--pattern-opacity);
  pointer-events: none;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

a { color: inherit; }

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

/* Header & footer */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.user-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 0.95rem;
}
/* Header controls share one height and shape: buttons, the account menu chip
   and the language switch are all 38px pills. (.user-nav prefix:
   beats the general .button padding, which would push the text down.) */
.user-nav .nav-button {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  font-size: 0.95rem;
}
.user-nav .profile-chip { height: 44px; padding: 0 16px 0 6px; gap: 10px; background: var(--surface); }
.user-nav .profile-chip .avatar-sm { width: 30px; height: 30px; font-size: 0.9rem; }
.user-nav a { text-decoration: none; }
.user-name { color: var(--muted); }
.user-link { color: inherit; font-weight: 600; text-decoration: none; }
.user-link:hover { color: var(--accent-strong); text-decoration: underline; }
.count-badge {
  min-width: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}
.count-badge[hidden] { display: none; }
.logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 1.65rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}
/* TR | EN language switch: a knob slides over the current language. */
.lang-switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  width: 84px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.lang-switch:hover { border-color: var(--accent-strong); }
/* On pages without the header menu (login), it sits on the right on its own. */
.site-header > .lang-switch { margin-left: auto; }
.lang-switch > span:not(.lang-knob) {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  transition: color 0.18s;
}
.lang-knob {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  border-radius: 999px;
  background: var(--accent);
  transition: transform 0.18s ease-out;
}
.lang-en .lang-knob { transform: translateX(100%); }
.lang-tr > span:nth-child(2), .lang-en > span:nth-child(3) { color: var(--on-accent); }
@media (prefers-reduced-motion: reduce) {
  .lang-knob, .lang-switch > span { transition: none; }
}

/* The "IK" mark (logo-mark.svg) used as a mask, so it takes the theme's (strong) accent color. */
.logo-mark {
  flex: none; /* it has no content, so on narrow screens it would shrink away */
  width: 42px;
  height: 38px;
  background: var(--accent-strong);
  -webkit-mask: url(/logo-mark.svg) center / contain no-repeat;
  mask: url(/logo-mark.svg) center / contain no-repeat;
}
.logo-text { line-height: 1; }
/* Phones: the logo and the header controls stay on one row, a bit smaller.
   A long username is cut off with "…". */
.site-header .logo, .user-nav .lang-switch, .user-nav .nav-button { flex: none; white-space: nowrap; }
.account-menu, .user-nav .profile-chip { min-width: 0; }
.user-nav .profile-chip .avatar { flex: none; }
.user-nav .profile-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) {
  .site-header { gap: 10px; }
  .logo { font-size: 1.3rem; gap: 4px; }
  .logo-mark { width: 32px; height: 29px; }
  .user-nav { gap: 6px; }
  .lang-switch { width: 70px; height: 36px; font-size: 0.75rem; }
  .user-nav .nav-button { height: 36px; padding: 0 11px; font-size: 0.82rem; }
  .user-nav .profile-chip { height: 40px; padding: 0 12px 0 5px; gap: 6px; font-size: 0.85rem; }
  .user-nav .profile-chip .avatar-sm { width: 28px; height: 28px; }
}
@media (max-width: 360px) {
  .site-header { gap: 6px; padding: 10px 12px; }
  .logo { font-size: 1.1rem; }
  .logo-mark { width: 26px; height: 24px; }
  .lang-switch { width: 62px; height: 34px; }
  .user-nav { gap: 5px; }
  .user-nav .nav-button { height: 34px; padding: 0 9px; font-size: 0.78rem; }
  .user-nav .profile-chip { height: 38px; padding: 0 10px 0 4px; font-size: 0.8rem; }
  .user-nav .profile-chip .avatar-sm { width: 26px; height: 26px; }
}
.site-footer {
  text-align: center;
  color: var(--muted);
  padding: 32px 16px;
  font-size: 0.9rem;
}

/* Hero, search, filters */
.hero { text-align: center; padding: 40px 0 24px; }
.hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 20px; }
#search {
  width: 100%;
  max-width: 520px;
  padding: 14px 18px;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  outline: none;
}
#search:focus { border-color: var(--accent-strong); }

.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.95rem;
}
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
/* Category chips and the sort menu share one row (wrapping on narrow screens). */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  margin-top: 18px;
}
.sort { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.9rem; }
.sort select {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

/* Recipe grid */
/* 5 columns on wide screens (home page), fewer as the screen narrows. */
.grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
/* Profiles: 3 columns next to the profile card. */
.profile-recipes .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .profile-recipes .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .profile-recipes .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .profile-recipes .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.15s, box-shadow 0.15s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(60, 40, 20, 0.12); }
.card-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
/* Saved recipes stand out a little on the home page (#grid). */
#grid .card.is-saved { background: var(--saved-surface); border-color: var(--saved-border); }
.card-img {
  font-size: 2.6rem;
  text-align: center;
  padding: 14px 0;
  background: var(--tint, var(--accent-soft)); /* --tint: the category's color, set inline */
}
.card-body { display: flex; flex-direction: column; flex: 1; padding: 10px 12px 12px; }
.card-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.card-body h2 { margin: 4px 0; font-size: 1rem; line-height: 1.3; }
.card-body p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
  /* Two lines at most, so cards in a row stay the same height. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-body .meta { margin-top: auto; }
.lang-pill {
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.rating { color: var(--warn); font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.rating span { color: var(--muted); font-weight: 400; }
.meta { font-size: 0.78rem; color: var(--muted); }

.tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-strong);
}

.empty { text-align: center; color: var(--muted); padding: 40px 0; }

/* Recipe page */
.recipe-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 24px 0 8px;
}
.recipe-toolbar .button-small { padding: 6px 14px; }
.back {
  display: inline-block;
  color: var(--muted);
  text-decoration: none;
}
.back:hover { color: var(--accent-strong); }

.recipe-hero {
  font-size: 5rem;
  text-align: center;
  padding: 32px 0;
  background: var(--tint, var(--accent-soft));
  border-radius: var(--radius);
  margin-bottom: 20px;
}
.recipe h1 { margin: 4px 0 8px; font-size: clamp(1.8rem, 4vw, 2.4rem); }
.byline { color: var(--muted); font-size: 0.95rem; margin: 0 0 12px; }
.forked-from { color: var(--muted); font-size: 0.9rem; margin: -6px 0 12px; }
.translation-notice { color: var(--muted); font-size: 0.9rem; margin: -4px 0 12px; }
.translation-notice .link-button { color: var(--accent-strong); font-weight: 600; }
.forked-from a { color: var(--accent-strong); font-weight: 600; }
#clone-error { margin-bottom: 12px; }
.lead { color: var(--muted); font-size: 1.1rem; margin-top: 0; }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 32px;
}
.facts > div {
  flex: 1 1 140px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
}
.facts span { display: block; font-size: 0.8rem; color: var(--muted); }
.stepper { display: flex; align-items: center; gap: 12px; }
.stepper button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
}
.stepper button:hover { border-color: var(--accent-strong); color: var(--accent-strong); }

.recipe-columns {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 40px;
}
@media (max-width: 720px) {
  .recipe-columns { grid-template-columns: 1fr; gap: 16px; }
}

.ingredients { list-style: none; padding: 0; margin: 0; }
.ingredients li { padding: 8px 0; border-bottom: 1px solid var(--border); }
.ingredients label { display: flex; gap: 10px; cursor: pointer; }
.ingredients input { accent-color: var(--accent-strong); margin-top: 6px; }
.ingredients input:checked + span { text-decoration: line-through; color: var(--muted); }

.steps { padding-left: 0; list-style: none; counter-reset: step; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 20px 48px;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  display: grid;
  place-items: center;
}

.not-found { text-align: center; padding: 80px 0; }

.confirm-banner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  padding: 10px 16px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  text-align: center;
}
.confirm-banner .link-button { color: var(--accent-strong); font-weight: 600; }
.confirm-banner .link-button:disabled { color: var(--muted); cursor: default; }

/* Buttons */
.button {
  display: inline-block;
  padding: 12px 20px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.button:hover { filter: brightness(1.08); }
.button:disabled { opacity: 0.6; cursor: default; }
.button-small { padding: 6px 14px; font-size: 0.95rem; }
.user-nav .button:not(.button-outline) { color: var(--on-accent); }
.link-button {
  border: none;
  background: none;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.link-button:hover { color: var(--accent-strong); }

/* Log in / sign up */
.auth-card {
  max-width: 400px;
  margin: 48px auto 0;
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auth-card h1 { margin: 0 0 4px; font-size: 1.6rem; }
.auth-card label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.95rem; }
.auth-card label[hidden] { display: none; }
.auth-card input {
  padding: 12px 14px;
  font: inherit;
  font-weight: 400;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.auth-card input:focus { border-color: var(--accent-strong); }
.auth-card small { font-weight: 400; color: var(--muted); font-size: 0.8rem; }
.auth-card .button { width: 100%; }
.auth-switch { margin: 0; text-align: center; color: var(--muted); font-size: 0.95rem; }
.auth-switch a { color: var(--accent-strong); font-weight: 600; }

.form-error, .form-note { margin: 0; padding: 10px 14px; border-radius: 10px; font-size: 0.95rem; }
.form-error { background: #fde2e1; color: #9b1c1c; }
.form-note { background: var(--accent-soft); }
@media (prefers-color-scheme: dark) {
  .form-error { background: #4a1f1f; color: #fecaca; }
}

/* Recipe storage meter (on your own profile) */
.page-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 32px 0 20px;
}
.page-heading h1 { margin: 0; font-size: clamp(1.6rem, 4vw, 2.2rem); }
.empty a { color: var(--accent-strong); font-weight: 600; }

.usage {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0 0;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.usage[hidden] { display: none; }
.usage-meter { position: relative; flex: 0 0 76px; height: 76px; }
.usage-meter svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.usage-meter circle { fill: none; stroke-width: 7; }
.usage-track { stroke: var(--accent-soft); }
.usage-fill {
  stroke: var(--accent-strong);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s ease-out;
}
.usage-warn .usage-track { stroke: var(--warn-soft); }
.usage-warn .usage-fill { stroke: var(--warn); }
.usage-full .usage-track { stroke: var(--danger-soft); }
.usage-full .usage-fill { stroke: var(--danger); }
.usage-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}
.usage-center strong { font-size: 1.25rem; }
.usage-center span { font-size: 0.7rem; color: var(--muted); }
.usage-text { display: flex; flex-direction: column; gap: 2px; }
.usage-text span { color: var(--muted); font-size: 0.9rem; }
@media (prefers-reduced-motion: reduce) {
  .usage-fill { transition: none; }
}

/* Recipe editor */
.editor {
  max-width: 760px;
  margin: 32px auto 0;
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.editor[hidden] { display: none; }
.editor h1 { margin: 0; font-size: 1.6rem; }
.editor label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.95rem; }
.editor input, .editor textarea, .editor select {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-weight: 400;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.editor textarea { resize: vertical; }
.editor input:focus, .editor textarea:focus, .editor select:focus { border-color: var(--accent-strong); }

.field-row { display: flex; gap: 12px; }
.field-label { font-weight: 600; font-size: 0.95rem; }
.field-grow { flex: 1; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }

.editor fieldset { border: none; padding: 0; margin: 0; }
.editor legend { font-weight: 700; font-size: 1.15rem; margin-bottom: 4px; padding: 0; }
.hint { margin: 0 0 10px; color: var(--muted); font-size: 0.85rem; }
.rows { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; gap: 8px; align-items: flex-start; }
/* Each ingredient (amount, unit, name, ×) sits in its own frame, so a row
   that wraps on phones still reads as one ingredient. */
.ingredient-row {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
}
#ingredient-rows { gap: 10px; }
/* Fields a touch lighter than their frame, so they stand out from it. */
.editor .ingredient-row input, .editor .ingredient-row select {
  background-color: color-mix(in srgb, var(--bg) 55%, var(--surface));
}
.ingredient-row .qty { flex: 0 0 90px; }
.ingredient-row .unit { flex: 0 0 150px; }
.ingredient-row.invalid .item { border-color: var(--danger); }
.ingredient-row .qty:disabled { opacity: 0.4; }
.ingredient-row .item-wrap { position: relative; flex: 1; min-width: 0; }
.ingredient-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 5;
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.ingredient-menu[hidden] { display: none; }
.ingredient-menu li { padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.ingredient-menu li:hover, .ingredient-menu li[aria-selected="true"] { background: var(--accent-soft); }
.step-number {
  flex: 0 0 28px;
  height: 28px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 0.85rem;
  display: grid;
  place-items: center;
}
.remove-row {
  flex: 0 0 36px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
}
.remove-row:hover { color: var(--accent-strong); border-color: var(--accent-strong); }
/* "Add ingredient" / "Add step": a dashed empty slot under the list, shown once the
   last row is filled in. */
.add-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
  padding: 10px 14px;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  animation: add-row-in 0.2s ease-out;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.add-row:hover, .add-row:focus-visible { border-color: var(--accent-strong); color: var(--accent-strong); background: var(--accent-soft); }
.add-row[hidden] { display: none; }
.add-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 1.05rem;
  line-height: 1;
}
@keyframes add-row-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .add-row { animation: none; transition: none; }
}

.editor .checkbox { flex-direction: row; align-items: center; gap: 10px; font-weight: 400; cursor: pointer; }
.editor .checkbox input { width: auto; accent-color: var(--accent-strong); }

.editor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.editor-actions a:not(.button) { color: var(--muted); }
.danger { margin-left: auto; color: #c0392b; }
.danger:hover { color: #962d22; }

@media (max-width: 560px) {
  .ingredient-row { flex-wrap: wrap; }
  .ingredient-row .qty { flex: 0 0 72px; }
  .ingredient-row .unit { flex: 1 1 0; min-width: 0; }
  .ingredient-row .item-wrap { flex: 1 1 100%; order: 3; }
  .ingredient-row .remove-row { order: 2; }
}

/* Avatars: profile photo, or the username's initial */
.avatar {
  flex: none;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 700;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-sm { width: 26px; height: 26px; font-size: 0.8rem; }
.avatar-md { width: 44px; height: 44px; font-size: 1.2rem; }
.avatar-lg { width: 120px; height: 120px; font-size: 3.2rem; }
.profile-card .avatar-lg { align-self: center; margin-bottom: 8px; }

/* Header link to your own profile */
.profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 3px 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-weight: 600;
  font-size: 0.9rem;
}
.profile-chip:hover { border-color: var(--accent-strong); color: var(--accent-strong); }

/* Profile */
/* Profile page: a wider page, with the profile card on the left and the recipes
   panel centered on the page. The third column is an empty spacer as wide as the
   card, which keeps the middle column centered. Narrower screens drop the spacer,
   then stack everything. */
#profile.container { max-width: 1600px; }
.profile {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 280px;
  gap: 32px;
  padding-top: 32px;
}
@media (max-width: 1200px) {
  .profile { grid-template-columns: 280px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .profile { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
/* The left column of a profile, framed as one card. */
.profile-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: start;
  padding: 22px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* Inside the frame, the recipe storage meter is a plain inset box, not a card, and a
   little smaller so its text fits on one line. */
.profile-card .usage { gap: 12px; padding: 12px 14px; background: var(--bg); box-shadow: none; }
.profile-card .usage-meter { flex-basis: 64px; height: 64px; }
.profile-card .usage-center strong { font-size: 1.1rem; }
.profile-card h1 { margin: 0; font-size: 1.6rem; line-height: 1.2; overflow-wrap: anywhere; text-align: center; }
.profile-username { margin: 0; color: var(--muted); font-size: 1.1rem; text-align: center; }
.profile-bio { margin: 4px 0; font-size: 0.9rem; line-height: 1.45; overflow-wrap: anywhere; text-align: left; }
.button-outline {
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  text-align: center;
  padding: 8px 16px;
}
.button-outline:hover { border-color: var(--accent-strong); color: var(--accent-strong); filter: none; }
.profile-meta { list-style: none; padding: 0; margin: 8px 0 0; color: var(--muted); font-size: 0.95rem; }
.profile-meta li { padding: 2px 0; overflow-wrap: anywhere; }
.profile-meta a { color: var(--text); }
.profile-meta a:hover { color: var(--accent-strong); }
/* Recipes, clones, followers and following in a 2 × 2 grid. */
.profile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.profile-stats div, .profile-stats .stat-button { display: flex; flex-direction: column; align-items: flex-start; }
.profile-stats strong { font-size: 1.3rem; }
.profile-stats span { color: var(--muted); font-size: 0.85rem; }
/* On your own profile the follower counts open the list. */
.stat-button {
  margin: -6px -8px;
  padding: 6px 8px;
  border: none;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.stat-button:hover { background: var(--accent-soft); }

/* Follow / Following on someone else's profile */
.follow-button { width: 100%; padding: 10px 16px; text-align: center; }
.follow-button.following {
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
}
.follow-button.following:hover { border-color: var(--accent-strong); color: var(--accent-strong); filter: none; }
.followed-by { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; color: var(--muted); font-size: 0.85rem; }
.followed-by-avatars { display: inline-flex; flex: none; }
.followed-by-avatars .avatar + .avatar { margin-left: -8px; }
.followed-by-avatars .avatar { box-shadow: 0 0 0 2px var(--surface); }
.avatar-xs { width: 22px; height: 22px; font-size: 0.7rem; }

/* Your followers / the people you follow, in a dialog */
.follow-dialog {
  width: min(420px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 64px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25);
}
.follow-dialog::backdrop { background: rgba(20, 12, 8, 0.45); }
.follow-dialog-body { padding: 16px 18px 18px; }
.follow-dialog-header { display: flex; align-items: center; justify-content: space-between; }
.follow-dialog-header h2 { margin: 0; font-size: 1.2rem; }
.follow-dialog-header .icon-button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: none;
  color: var(--text);
  cursor: pointer;
}
.follow-dialog-header .icon-button:hover { border-color: var(--accent-strong); color: var(--accent-strong); }
.follow-dialog-note { margin: 6px 0 12px; color: var(--muted); font-size: 0.85rem; }
.follow-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.follow-list li { display: flex; align-items: center; gap: 10px; }
.follow-list .empty { padding: 16px 0; text-align: left; }
.follow-person {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
}
.follow-person:hover { background: var(--accent-soft); }
.follow-person span { min-width: 0; display: flex; flex-direction: column; }
.follow-person strong, .follow-person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.follow-person small { color: var(--muted); }
/* Recipes / Saved on a profile: a frosted glass panel. The kitchen pattern behind it
   shows through blurred, like looking through a water drop; the light top edge and
   rounded corners add to the look. */
.profile-recipes {
  align-self: start;
  padding: 16px 20px 22px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .profile-recipes { background: var(--glass-fallback); }
}
.profile-recipes .tabs { align-items: center; margin-bottom: 18px; }
/* The two tabs ("My recipes", "Saved") split their row in half. "+ New recipe"
   (shown on the "My recipes" tab) sits on its own row above them. */
.profile-recipes .tabs { flex-wrap: wrap; gap: 0; }
.profile-recipes .tab { flex: 1; justify-content: center; white-space: nowrap; }
.profile-recipes .new-recipe-button {
  order: -1;
  flex-basis: 100%;
  margin: 0 0 12px;
  padding: 10px 16px;
  font-size: 0.95rem;
  text-align: center;
  white-space: nowrap;
  color: var(--on-accent);
}
.profile-recipes .new-recipe-button[hidden] { display: none; }
.profile-recipes > h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 1.3rem; }
.profile-recipes .empty { text-align: left; padding: 24px 0; }
.editor small { font-weight: 400; color: var(--muted); font-size: 0.85rem; }
.editor small a { color: var(--accent-strong); }

/* Settings: profile photo */
.photo-field { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.photo-actions { display: flex; flex-direction: column; gap: 6px; }
.photo-actions small { color: var(--muted); font-size: 0.85rem; }
.photo-buttons { display: flex; align-items: center; gap: 16px; }
.editor .file-button { display: inline-block; flex-direction: row; font-weight: 600; cursor: pointer; }
.file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-button:focus-within { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.photo-buttons .danger { margin-left: 0; }

/* Account menu: drops down from the profile chip in the header */
/* The chip fits its contents; the dropdown is at least as wide as the chip. */
.account-menu { position: relative; display: flex; }
.account-menu .profile-chip { font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.account-menu .profile-chip[aria-expanded="true"] { border-color: var(--accent-strong); }
.account-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 100%;
  width: max-content;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}
.account-dropdown[hidden], .account-dropdown [hidden] { display: none; }
.account-dropdown a {
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.account-dropdown a:hover { background: var(--accent-soft); }
/* Log out stands apart, in red. */
.account-dropdown .account-logout {
  margin-top: 10px;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: var(--danger);
  color: var(--on-danger);
  font: inherit;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
.account-dropdown .account-logout:hover { filter: brightness(0.92); }

/* Recipe page: review notice for the owner, star rating */
.review-notice {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--warn-soft);
  font-size: 0.95rem;
}
.review-notice a { color: var(--accent-strong); font-weight: 600; }
.review-rejected { background: var(--danger-soft); }
.rate { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: -4px 0 8px; color: var(--muted); font-size: 0.95rem; }
.rate a { color: var(--accent-strong); font-weight: 600; }
.stars { display: inline-flex; }
.star {
  padding: 0 2px;
  border: none;
  background: none;
  color: var(--border);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.star.filled { color: var(--warn); }
/* Hovering previews the rating: every star up to the hovered one lights up. */
.stars:hover .star { color: var(--warn); }
.stars .star:hover ~ .star { color: var(--border); }
.rate-message { color: var(--danger); font-size: 0.85rem; }
.button-danger { background: var(--danger); color: var(--on-danger); }

/* Admin review queue */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.tab.active { color: var(--text); border-bottom-color: var(--accent-strong); }
.review-list { display: flex; flex-direction: column; gap: 16px; }
.review-item {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.review-item header { display: flex; gap: 14px; align-items: center; }
.review-emoji { font-size: 2.2rem; }
.review-item h2 { margin: 0; font-size: 1.15rem; }
.review-item h2 a { text-decoration: none; }
.review-item h3 { margin: 0 0 4px; font-size: 0.95rem; }
.review-item ul, .review-item ol { margin: 0; padding-left: 20px; font-size: 0.9rem; }
.review-columns { display: grid; grid-template-columns: 1fr 1.6fr; gap: 20px; margin: 8px 0 14px; }
@media (max-width: 720px) { .review-columns { grid-template-columns: 1fr; } }
.ai-verdict { margin: 12px 0; padding: 8px 12px; border-radius: 10px; background: var(--warn-soft); font-size: 0.9rem; }
.ai-approved { background: var(--accent-soft); }
.review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.review-note {
  flex: 1;
  min-width: 180px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
}
.review-error { flex-basis: 100%; }

/* Save (heart) buttons: on card photos and in the recipe toolbar */
.save-button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: transform 0.15s, color 0.15s;
}
.save-button svg { fill: none; stroke: currentColor; stroke-width: 2; }
.save-button:hover { color: var(--danger); border-color: var(--danger); }
.save-button.saved { color: var(--danger); border-color: var(--danger); }
.save-button.saved svg { fill: currentColor; }
.save-button:active { transform: scale(0.9); }
.save-card { position: absolute; top: 8px; right: 8px; box-shadow: var(--shadow); }
.recipe-actions { display: flex; align-items: center; gap: 10px; }
.saved-note { color: var(--muted); font-size: 0.9rem; margin: 0 0 12px; }
@media (prefers-reduced-motion: reduce) {
  .save-button { transition: none; }
}

/* Recipe form: suggesting a missing ingredient */
.suggest { margin-top: 8px; }
.suggest .link-button { color: var(--muted); font-size: 0.9rem; text-decoration: underline; }
.suggest-form { display: flex; gap: 8px; margin-top: 8px; max-width: 420px; }
.suggest-form[hidden] { display: none; }
.suggest .hint { margin: 6px 0 0; }
.suggest .hint[hidden] { display: none; }
.suggestion-names { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 14px; }
.suggestion-names label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--muted); }
.suggestion-names input {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
@media (max-width: 560px) { .suggestion-names { grid-template-columns: 1fr; } }
.add-result { color: var(--muted); font-size: 0.9rem; }

/* Select menus: our own arrow, a little in from the edge (the browser's sits at the
   very edge and can't be moved). Comes after the rules that set their background. */
.editor select,
.sort select {
  -webkit-appearance: none;
  appearance: none;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 38px;
}

/* Recipe form: Private | Public slider (a styled checkbox) */
.visibility-field { display: flex; flex-direction: column; gap: 6px; }
/* .editor prefix: beats the generic ".editor label" column layout. */
.editor .visibility-switch {
  position: relative;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr 1fr;
  width: 280px;
  max-width: 100%;
  height: 42px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  cursor: pointer;
  user-select: none;
}
.editor .visibility-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.visibility-switch:has(input:focus-visible) { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.visibility-knob {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--neutral-soft);
  transition: transform 0.2s ease-out, background 0.2s;
}
.visibility-switch input:checked ~ .visibility-knob { transform: translateX(100%); background: var(--accent); }
.visibility-option {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  transition: color 0.2s;
}
/* The label over the knob is dark: Private (oat) when unchecked, Public (apricot) when checked. */
.visibility-switch input:not(:checked) ~ .visibility-private { color: var(--text); }
.visibility-switch input:checked ~ .visibility-public { color: var(--on-accent); }
.visibility-field .hint { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .visibility-knob, .visibility-option { transition: none; }
}