/* Next UI preview. Three visual directions share one layout; tokens switch on <html data-theme>.
   --muted and --faint keep small text at about 4.5:1 or better on each theme's backgrounds. */
/* The site's own subset of Noto Sans SC and Noto Serif SC, every character it shows in one file
   per family, so new characters never trigger a late download and redraw. */
/* fonts:start (next-ui/fonts/build_fonts.py) */
@font-face { font-family: 'Noto Sans SC'; src: url('/assets/fonts/noto-sans-sc.fe56a181c379.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Noto Serif SC'; src: url('/assets/fonts/noto-serif-sc.eed3112fe1c2.woff2') format('woff2'); font-weight: 500 900; font-style: normal; font-display: swap; }
/* fonts:end */

:root,
:root[data-theme="archive"] {
  --bg: #FFFFFF; --panel: #FFFFFF; --head: #FFFFFF; --strip: #F2F2F2; --shelf: #F6F6F6;
  --ink: #111111; --body: #333333; --muted: #6B6B6B; --faint: #737373;
  --line: #E3E3E3; --div: #EEEEEE; --hover: #F6F6F6; --sel: #FFF6D6; --bar: #F2B705;
  --hl: #FBE39A; --badge: #F0F0F0; --field: #F4F4F4; --field-line: #E3E3E3;
  --dark: #111111; --on-dark: #FFFFFF; --chip: #FFFFFF; --cover-bg: #EEEEEE; --quote: #FAFAFA;
  --cu-bg: transparent; --cu-ink: #6B6B6B; --cu-line: #E3E3E3;
  --dish-font: 'Noto Sans SC', system-ui, sans-serif; --hero-font: 'Noto Sans SC', system-ui, sans-serif;
  --notice-bg: #FFF7E6; --notice-line: #F0D9A8; --notice-ink: #5C3D00;
  --focus: #A67C00;
  --ok-bg: #E3F2E6; --ok-ink: #1A6236; --ai-bg: #EEEAFD; --ai-ink: #5B24AE;
}
:root[data-theme="cover"] {
  --bg: #F5F5F7; --panel: #FFFFFF; --head: #FFFFFF; --strip: #E8E8ED; --shelf: #EBEBF0;
  --ink: #1D1D1F; --body: #3A3A3C; --muted: #636368; --faint: #727277;
  --line: #E5E5EA; --div: #ECECF0; --hover: #EDEDF2; --sel: #FFFFFF; --bar: #1D1D1F;
  --hl: #FFE08A; --badge: #E8E8ED; --field: #F2F2F7; --field-line: #F2F2F7;
  --dark: #1D1D1F; --on-dark: #FFFFFF; --chip: #FFFFFF; --cover-bg: #E3E3E8; --quote: #FFF8E1;
  --cu-bg: transparent; --cu-ink: #6E6E73; --cu-line: #E5E5EA;
  --focus: #1D1D1F;
  --ok-bg: #E3F2E6; --ok-ink: #1A6236; --ai-bg: #EEEAFD; --ai-ink: #5B24AE;
}
:root[data-theme="paper"] {
  --bg: #EFE8D8; --panel: #FBF8F1; --head: #F6F1E6; --strip: #E4DBC7; --shelf: #E6DDCA;
  --ink: #22201C; --body: #4A443A; --muted: #625A4C; --faint: #6F6758;
  --line: #E0D6C1; --div: #E6DDCA; --hover: #E8E0CD; --sel: #FBF8F1; --bar: #B8322A;
  --hl: #F1D9A0; --badge: #E4DBC7; --field: #FBF8F1; --field-line: #E0D6C1;
  --dark: #22201C; --on-dark: #FBF8F1; --chip: #FBF8F1; --cover-bg: #E6DCC6; --quote: #F4EDDC;
  --cu-bg: #B8322A; --cu-ink: #FBF8F1; --cu-line: #B8322A;
  --dish-font: 'Noto Serif SC', serif; --hero-font: 'Noto Serif SC', serif;
  --focus: #B8322A;
  --ok-bg: #DCE5CB; --ok-ink: #2D5420; --ai-bg: #E5DFEC; --ai-ink: #4A2C7E;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font: 400 15px/1.6 'Noto Sans SC', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.serif { font-family: 'Noto Serif SC', serif; }
/* --focus stays at 3:1 or better against the page; 档案's yellow --bar is too light for a focus ring. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* The first Tab stop: straight to the search field, past the header links. */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 8px 14px; border-radius: 8px; background: var(--dark); color: var(--on-dark); font-size: 14px; text-decoration: none; }
.skip-link:focus { top: 8px; }
.mark { background: linear-gradient(transparent 60%, var(--hl) 60%); }

/* Dev strip and header */
.dev-strip {
  min-height: 32px; padding: 4px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  background: var(--strip); color: var(--muted); font-size: 12px;
}
.dev-strip b { font-weight: 500; color: var(--body); }
.theme-switch { display: inline-flex; gap: 4px; }
.theme-switch button {
  height: 22px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--chip); color: var(--body); font-size: 12px; cursor: pointer;
}
.theme-switch button[aria-pressed="true"] { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }

.site-header {
  position: relative; z-index: 3; height: 64px; flex-shrink: 0; padding: 0 24px;
  display: flex; align-items: center; gap: 24px;
  background: var(--head); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; width: 332px; }
.brand-mark {
  position: relative; width: 22px; height: 28px; border-radius: 2px 4px 4px 2px; background: var(--dark); overflow: hidden;
}
.brand-mark::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: rgba(0,0,0,.25); }
.brand-mark::after { content: ""; position: absolute; top: 6px; left: 7px; right: 3px; height: 7px; border-radius: 1px; background: var(--hl); }
.brand-name { font-family: var(--hero-font); font-weight: 900; font-size: 17px; }
.header-slot { flex: 1 1 auto; max-width: 620px; min-width: 0; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 20px; font-size: 15px; white-space: nowrap; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.nav-icon { display: inline-flex; align-items: center; gap: 5px; }
.nav-icon svg { width: 16px; height: 16px; flex-shrink: 0; }
/* 点赞 with the current site's thumbs-up; filled once this visitor has liked. */
.like { position: relative; display: inline-flex; }
.like-btn {
  height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--chip); color: var(--ink);
  font-size: 14px; font-weight: 500; cursor: pointer;
}
.like-btn:hover:not(:disabled) { border-color: var(--muted); }
.like-btn svg { width: 19px; height: 16px; flex-shrink: 0; }
.like-btn .n { font-weight: 400; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.like-btn .n:empty { display: none; }
.like-btn[aria-pressed="true"] { background: var(--dark); border-color: var(--dark); color: var(--on-dark); cursor: default; }
.like-btn[aria-pressed="true"] .n { color: inherit; opacity: .7; }
.like-btn:disabled:not([aria-pressed="true"]) { opacity: .6; cursor: default; }
.like-status {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 5; padding: 4px 10px; border-radius: 8px;
  background: var(--dark); color: var(--on-dark); font-size: 12px; white-space: nowrap;
}
.like-status:empty { display: none; }
/* 会员: the same accounts as the current site; signed in, the button shows the username. */
.member-btn {
  height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 999px; background: var(--chip); color: var(--muted);
  font-size: 14px; cursor: pointer; white-space: nowrap;
}
.member-btn:hover, .member-btn[aria-expanded="true"] { border-color: var(--muted); color: var(--ink); }
.member-btn.is-signed-in { color: var(--ink); }
.member-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.member-label { max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.member-panel {
  position: fixed; z-index: 20; width: min(320px, calc(100vw - 32px)); padding: 16px 18px;
  border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(0,0,0,.16);
}
.member-form { display: flex; flex-direction: column; gap: 12px; }
.member-form .seg { align-self: flex-start; }
.member-note { margin: 0; font-size: 13px; line-height: 1.6; color: var(--body); }
.member-who { margin: 0 0 14px; display: flex; align-items: baseline; gap: 10px; font-size: 15px; }
.member-who span { font-size: 13px; color: var(--muted); }
.fav-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fav-manage-toggle { margin-left: 4px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.fav-status { align-self: flex-start; }
.fav-manage { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--quote); }
.fav-manage-row { display: flex; align-items: center; gap: 12px; }
.fav-manage-row input {
  flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); font: 400 14px 'Noto Sans SC', system-ui, sans-serif; outline: none;
}
.fav-manage-row input:focus { border-color: var(--focus); }
.fav-manage-row .link-btn { margin-left: 0; flex-shrink: 0; }
.fav-grid { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.fav-grid .form-field:first-child { flex: 1 1 180px; }
.link-btn.fav-remove:hover { color: #B3261E; }
.link-btn.inline { margin-left: 6px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* With the search field in the header, narrower screens keep only the icons (each has a title). */
@media (max-width: 1439px) {
  body.is-results .nav-icon span, body.is-results .like-label, body.is-results .member-label { display: none; }
  body.is-results .site-nav { gap: 16px; }
}

/* Search field: lives in the hero on the home page and moves into the header for results. */
.search-field {
  position: relative; display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 6px 0 16px; border-radius: 12px;
  background: var(--field); border: 1px solid var(--field-line); color: var(--muted);
}
.search-field svg { width: 19px; height: 19px; flex-shrink: 0; }
.search-field input {
  flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: transparent; outline: none;
  font: 400 17px 'Noto Sans SC', system-ui, sans-serif; color: var(--ink);
}
.search-field input::-webkit-search-cancel-button { display: none; }
.search-field:focus-within { border-color: var(--focus); }
.field-clear {
  width: 32px; height: 32px; flex-shrink: 0; border: 0; border-radius: 8px; background: transparent;
  color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer;
}
.field-adv {
  flex-shrink: 0; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--chip); color: var(--body); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.field-adv[aria-expanded="true"], .field-adv.is-on { border-color: var(--dark); background: var(--dark); color: var(--on-dark); }

/* Advanced search: a panel under the search field, wherever the field currently is. */
.adv {
  position: fixed; z-index: 20; width: min(680px, calc(100vw - 32px)); padding: 18px 20px;
  border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(0,0,0,.16);
}
.adv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.adv-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.adv-field input[type="text"], .adv-field select {
  height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  color: var(--ink); font: 400 14px 'Noto Sans SC', system-ui, sans-serif; outline: none; min-width: 0;
}
.adv-field input[type="text"]:focus, .adv-field select:focus { border-color: var(--focus); }
.adv-line { display: flex; gap: 8px; align-items: center; }
.adv-line input[type="text"] { flex: 1; }
.adv-check { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--body); white-space: nowrap; cursor: pointer; }
.adv-actions { margin-top: 16px; display: flex; align-items: center; gap: 10px; }
.adv-actions .btn-dark { margin-left: 0; }
.adv-actions .link-btn { margin-left: auto; }

.hero-slot .search-field {
  height: 60px; padding: 0 10px 0 22px; border-radius: 16px; background: var(--panel); border-color: var(--line);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 12px 32px rgba(0,0,0,.08);
}
.hero-slot .search-field input { font-size: 19px; }
.hero-slot .search-field svg { width: 21px; height: 21px; }

/* Home */
.home { flex: 1 0 auto; display: flex; flex-direction: column; animation: fade-up .28s ease both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hero { padding: 44px 16px 0; display: flex; flex-direction: column; align-items: center; }
.hero-kicker { margin: 0; font-size: 13px; letter-spacing: .08em; color: var(--muted); }
.hero-title { margin: 8px 0 18px; font-family: var(--hero-font); font-weight: 900; font-size: 36px; line-height: 1.25; text-align: center; }
.hero-slot { position: relative; width: min(720px, 100%); min-height: 60px; }
.recent-row { width: min(720px, 100%); margin-top: 14px; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.recent-row > .muted { flex-shrink: 0; white-space: nowrap; }
.recent-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--chip); color: var(--body); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.chip:hover { border-color: var(--muted); }
.chip[aria-pressed="true"] { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
.chip .n { font-weight: 400; font-size: 12px; color: var(--faint); }
.chip[aria-pressed="true"] .n { color: inherit; opacity: .7; }
.chip.soft { border: 0; background: var(--badge); color: var(--ink); height: 26px; font-size: 12px; }
/* On the grey chip and the shelf band --faint drops under 4.5:1, so these use --muted. */
.chip.soft .n, .shelf .card-kicker { color: var(--muted); }

.suggest {
  position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; right: 0; padding: 6px 0;
  border-radius: 16px; background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(0,0,0,.14); overflow: hidden;
}
.suggest-row {
  width: 100%; padding: 9px 22px; border: 0; background: transparent; text-align: left; cursor: pointer;
  display: flex; align-items: baseline; gap: 12px;
}
.suggest-row[aria-selected="true"], .suggest-row:hover { background: var(--hover); }
.suggest-row .dish { flex-shrink: 0; font-family: var(--dish-font); font-weight: 700; font-size: 17px; white-space: nowrap; }
.suggest-row .why { min-width: 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest-row .year { margin-left: auto; flex-shrink: 0; font-size: 12px; color: var(--faint); }
.suggest-all { margin-top: 4px; border-top: 1px solid var(--div); font-size: 14px; font-weight: 500; }
.kbd { margin-left: auto; padding: 1px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; font-weight: 400; color: var(--muted); }
.suggest-empty { margin: 0; padding: 12px 22px; font-size: 14px; color: var(--body); }

.home-cards {
  width: min(1120px, calc(100% - 32px)); margin: 28px auto 0;
  display: grid; grid-template-columns: minmax(0, 640fr) minmax(0, 456fr); gap: 24px;
}
.card { padding: 20px 22px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.card-kicker { margin: 0; font-size: 12px; letter-spacing: .1em; color: var(--faint); }
.card-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.card-head .muted { margin-left: auto; }
.today { display: flex; gap: 20px; min-height: 200px; }
.today-cover { width: 104px; height: 146px; flex-shrink: 0; }
.today-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.today-top { display: flex; align-items: center; }
.today-top .chip { margin-left: auto; height: 26px; font-size: 12px; }
.today-name { display: flex; align-items: center; gap: 10px; font-family: var(--dish-font); font-weight: 900; font-size: 24px; line-height: 1.2; }
.today-text {
  margin: 0; font-family: 'Noto Serif SC', serif; font-size: 15px; line-height: 1.75; color: var(--body);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.today-foot { margin-top: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.btn-dark {
  margin-left: auto; height: 34px; padding: 0 16px; border: 0; border-radius: 999px;
  background: var(--dark); color: var(--on-dark); font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.cuisine-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cu-tag { padding: 1px 7px; border-radius: 3px; border: 1px solid var(--cu-line); background: var(--cu-bg); color: var(--cu-ink); font-size: 12px; font-family: 'Noto Sans SC', sans-serif; font-weight: 400; }

.shelf { margin-top: 28px; flex: 1 0 auto; padding: 16px max(16px, calc((100% - 1120px) / 2)) 20px; background: var(--shelf); }
.shelf-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
/* Two rows of fixed-width books spread across the width; renderHomeShelf decides how many. */
.shelf-row { display: grid; grid-template-columns: repeat(auto-fill, 66px); justify-content: space-between; gap: 18px 16px; padding: 6px 2px 4px; }
.book-all-cover {
  width: 100%; aspect-ratio: 66 / 92; border: 1px dashed var(--muted); border-radius: 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--body); font-size: 12px; line-height: 1.3;
}
.book-all-cover b { font-size: 20px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.book-all:hover .book-all-cover { border-style: solid; border-color: var(--ink); }
.book {
  width: 66px; flex-shrink: 0; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 12px; transition: transform .18s ease;
}
.book:hover { transform: translateY(-4px); }

/* Covers: a real scan when we have one, otherwise a typographic stand-in. */
.cover {
  width: 100%; aspect-ratio: 66 / 92; border-radius: 2px; object-fit: cover; display: block;
  box-shadow: 0 4px 10px rgba(0,0,0,.18); background: var(--cover-bg);
}
.cover-fake {
  width: 100%; aspect-ratio: 66 / 92; border-radius: 2px; background: var(--cover-bg); padding: 6px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,.08); overflow: hidden;
}
.cover-fake .s { font-size: 8px; line-height: 1.3; color: var(--muted); }
.cover-fake .t { font-family: 'Noto Serif SC', serif; font-weight: 700; font-size: 11px; line-height: 1.3; color: var(--body); }
.today-cover .cover-fake .s { font-size: 10px; }
.today-cover .cover-fake .t { font-size: 15px; }
.skeleton { border-radius: 4px; background: linear-gradient(90deg, var(--div), var(--hover), var(--div)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

.link-btn { margin-left: auto; padding: 0; border: 0; background: none; font-size: 13px; color: var(--muted); cursor: pointer; }
.link-btn:hover { color: var(--ink); }
/* 菜谱目录 and 书籍档案: plain links in the static HTML, so crawlers reach the archive at /recipes/ and /books/. */
a.link-btn { text-decoration: none; white-space: nowrap; }
.shelf-head .link-btn + .link-btn { margin-left: 8px; }

/* Bookshelf page */
/* 关于 and 更新日志: a single readable column. */
.text-page { flex: 1 0 auto; width: min(720px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 64px; animation: fade-up .28s ease both; }
.text-page-head { margin-bottom: 8px; }
.text-page-head h1 { margin: 2px 0 0; font-family: var(--hero-font); font-weight: 900; font-size: 32px; line-height: 1.2; }
.text-page-head p.muted { margin: 6px 0 0; font-size: 14px; }
.text-page section { padding: 20px 0; border-bottom: 1px solid var(--div); scroll-margin-top: 16px; }
.text-page section:last-child { border-bottom: 0; }
.text-page h2 { margin: 0 0 10px; font-size: 18px; font-weight: 700; }
.text-page section p { margin: 0 0 12px; font-family: 'Noto Serif SC', serif; font-size: 16px; line-height: 1.9; color: var(--body); }
.text-page section p:last-child { margin-bottom: 0; }
.text-page a { color: var(--ink); text-underline-offset: 3px; }
.text-page .text-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: 'Noto Sans SC', system-ui, sans-serif; font-size: 14px; }
.text-page .text-note { margin-top: 12px; font-family: 'Noto Sans SC', system-ui, sans-serif; font-size: 13px; color: var(--muted); }
.message-form { margin-top: 14px; }
.message-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; }
.message-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-count { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.coffee { margin: 14px 0 0; display: flex; align-items: center; gap: 16px; font-size: 13px; line-height: 1.8; color: var(--muted); }
.coffee img { width: 120px; height: 120px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.changelog { margin: 8px 0 0; padding: 0; list-style: none; }
.changelog-entry { padding: 18px 0; border-bottom: 1px solid var(--div); }
.changelog-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.changelog-meta .tag { padding: 0 7px; border-radius: 3px; background: var(--badge); font-size: 12px; line-height: 20px; }
.changelog-entry h2 { margin: 6px 0 4px; font-size: 17px; font-weight: 700; }
.changelog-entry p { margin: 0; font-family: 'Noto Serif SC', serif; font-size: 15px; line-height: 1.8; color: var(--body); }
.changelog-entry dl { margin: 8px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: 13px; }
.changelog-entry dt { color: var(--muted); }
.changelog-entry dd { margin: 0; color: var(--body); }
.changelog-note { padding: 18px 0; color: var(--muted); }
/* 未找到页面 (the 404 page and the in-app not-found view) offers a search right there. */
.nf-search { margin: 4px 0 16px; display: flex; gap: 8px; max-width: 520px; }
.nf-search input {
  flex: 1; min-width: 0; height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--ink); font: 400 15px 'Noto Sans SC', system-ui, sans-serif; outline: none;
}
.nf-search input:focus { border-color: var(--focus); }
.nf-search .btn-dark { height: 42px; margin-left: 0; }
.shelf-page { flex: 1 0 auto; width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 56px; animation: fade-up .28s ease both; }
.shelf-page-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px 24px; }
.shelf-page-head h1 { margin: 0; font-family: var(--hero-font); font-weight: 900; font-size: 32px; line-height: 1.2; }
.shelf-page-head p { margin: 4px 0 0; font-size: 14px; }
.shelf-tools { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--badge); }
.seg button { height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--body); font-size: 13px; font-weight: 500; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.shelf-filter input {
  width: 220px; height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink); font: 400 14px 'Noto Sans SC', system-ui, sans-serif; outline: none;
}
.shelf-filter input:focus { border-color: var(--focus); }
.shelf-jump {
  position: sticky; top: 0; z-index: 2; margin: 20px 0 8px; padding: 10px 0; display: flex; gap: 6px; overflow-x: auto;
  background: var(--bg); border-bottom: 1px solid var(--div); scrollbar-width: none;
}
.shelf-jump .chip { flex-shrink: 0; height: 28px; }
.shelf-group { padding-top: 22px; scroll-margin-top: 56px; }
.shelf-group h2 { margin: 0 0 14px; display: flex; align-items: baseline; gap: 10px; font-family: var(--hero-font); font-weight: 900; font-size: 20px; }
.shelf-group h2 .muted { font-family: 'Noto Sans SC', sans-serif; font-weight: 400; font-size: 13px; }
.shelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 26px 20px; }
.shelf-card {
  padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; color: var(--ink);
}
.shelf-card .cover, .shelf-card .cover-fake { margin-bottom: 6px; transition: transform .18s ease, box-shadow .18s ease; }
.shelf-card:hover .cover, .shelf-card:hover .cover-fake { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0,0,0,.18); }
.shelf-card .cover-fake { padding: 12px 8px; gap: 6px; }
.shelf-card .cover-fake .s { font-size: 10px; }
.shelf-card .cover-fake .t { font-size: 15px; }
.shelf-card .title { font-family: 'Noto Serif SC', serif; font-weight: 700; font-size: 15px; line-height: 1.35; }
.shelf-card .meta { font-size: 12px; line-height: 1.5; color: var(--muted); }
.shelf-empty { padding: 40px 0; color: var(--muted); }

/* Book page: the book's card sits above its recipe list. */
.book-card { display: flex; gap: 14px; }
.book-card .cover-wrap { width: 64px; flex-shrink: 0; }
.book-card-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.book-card-body b { font-family: 'Noto Serif SC', serif; font-weight: 900; font-size: 19px; line-height: 1.3; }
.book-card-body .meta { font-size: 13px; color: var(--muted); }
.book-card-body .desc {
  margin: 2px 0 0; font-size: 13px; line-height: 1.6; color: var(--body);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.book-card-actions { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.book-card-actions .link-btn { margin-left: 0; }

/* A book's table of contents inside the results column */
.seg-small { padding: 2px; }
.seg-small button { height: 24px; padding: 0 10px; font-size: 12px; }
.toc { padding: 8px 0 16px; }
.row.toc-line {
  flex-direction: row; align-items: baseline; gap: 0; padding: 4px 20px 4px 29px; border-bottom: 0;
  font-family: var(--dish-font); font-size: 15px; line-height: 1.7;
}
.toc-name { flex-shrink: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toc-dots { flex: 1 1 24px; min-width: 24px; margin: 0 6px; border-bottom: 1px dotted var(--faint); transform: translateY(-4px); }
.toc-page { flex-shrink: 0; font-family: 'Noto Sans SC', sans-serif; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.row.toc-line[aria-current="true"] .toc-page { color: var(--ink); font-weight: 500; }

/* Results */
.results { flex: 1 1 auto; min-height: 0; height: calc(100dvh - 96px); display: grid; grid-template-columns: 380px minmax(0, 1fr); }
.results-list { min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--bg); }
.results-head { flex-shrink: 0; padding: 16px 20px 12px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--line); }
.results-count { display: flex; align-items: baseline; gap: 10px; }
.results-count b { font-weight: 900; font-size: 21px; }
.facet-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ask { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.ask-q { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.ask-options { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ask-options .chip { height: 28px; padding: 0 10px; }
.ask-options .link-btn { margin-left: 4px; }
.scope-chip { height: 28px; padding: 0 8px 0 12px; border: 0; border-radius: 999px; background: var(--hl); color: var(--ink); font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.results-note { margin: 0; font-size: 13px; line-height: 1.6; color: var(--body); }
.list-scroll { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; outline: none; }
/* A new search dims the results on screen until its first page is in (renderResults); the short
   delay keeps a quick answer from blinking. */
.is-stale { opacity: .5; pointer-events: none; transition: opacity .15s ease .12s; }
.row {
  width: 100%; padding: 10px 20px 10px 17px; border: 0; border-left: 3px solid transparent; border-bottom: 1px solid var(--div);
  background: transparent; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 3px;
}
.row:hover { background: var(--hover); }
.row[aria-current="true"] { background: var(--sel); border-left-color: var(--bar); }
.row-top { width: 100%; display: flex; align-items: baseline; gap: 8px; }
.row .dish { font-family: var(--dish-font); font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .year { margin-left: auto; flex-shrink: 0; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.row .why { width: 100%; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-foot { margin: 0; padding: 16px 20px 24px; font-size: 12px; line-height: 1.6; color: var(--faint); }
.next-box { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.next-btn {
  width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--chip);
  display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; font-size: 14px; font-weight: 500;
}
.next-btn .n { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--muted); }
.empty { padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; }
.empty b { font-size: 17px; }

.pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--panel); }
.pane-top, .pane-bottom { display: none; }
.pane-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; container-type: inline-size; }
.recipe { padding: 24px 44px 48px; display: flex; flex-direction: column; gap: 18px; animation: fade-in .18s ease both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.recipe-head { display: flex; align-items: flex-start; gap: 18px; }
.recipe-head .cover-wrap { width: 58px; flex-shrink: 0; }
.recipe-title { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.recipe-title h1 { margin: 0; font-family: var(--dish-font); font-weight: 900; font-size: 34px; line-height: 1.15; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.recipe-source { font-size: 14px; color: var(--muted); }
.recipe-source button { padding: 0; border: 0; background: none; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.recipe-actions { margin-left: auto; flex-shrink: 0; max-width: 50%; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.saved-note { font-size: 13px; color: var(--muted); }
/* 已人工校对 and AI 已复核: small tinted marks on list rows, a size up under the recipe's title and on a
   book's card. 未人工校对 stays a quiet dashed outline. */
.review-mark {
  flex-shrink: 0; align-self: center; height: 18px; padding: 0 6px 0 4px; border-radius: 4px;
  display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap;
}
.review-mark svg { width: 13px; height: 13px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.review-mark.is-ok { background: var(--ok-bg); color: var(--ok-ink); }
.review-mark.is-ai { background: var(--ai-bg); color: var(--ai-ink); }
.review-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.review-line .review-mark, .review { height: 24px; padding: 0 9px 0 7px; gap: 4px; border-radius: 5px; font-size: 13px; cursor: help; }
.review-line .review-mark svg { width: 15px; height: 15px; }
.review { display: inline-flex; align-items: center; padding: 0 8px; border: 1px dashed color-mix(in srgb, var(--faint) 60%, transparent); color: var(--faint); }
.book-card-body .review-line { margin: 3px 0 2px; }

/* 报告错误 (anyone) and the administrator's editor share these form pieces. */
.form-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; color: var(--muted); }
.form-field input, .form-field select, .form-field textarea, .edit-ing input {
  min-width: 0; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  color: var(--ink); font: 400 14px 'Noto Sans SC', system-ui, sans-serif; outline: none;
}
.form-field input, .form-field select, .edit-ing input { height: 36px; }
.form-field textarea { padding: 8px 10px; line-height: 1.7; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus, .edit-ing input:focus { border-color: var(--focus); }
.form-actions { display: flex; align-items: center; gap: 14px; }
.form-actions .btn-dark, .form-actions .link-btn { margin-left: 0; }
.form-status { margin: 0; font-size: 13px; color: var(--body); }
.form-status:empty { display: none; }
.form-hint { margin: 0 0 4px; font-size: 12px; color: var(--muted); }
.form-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--body); cursor: pointer; }
.side-form { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--quote); }
.side-form-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 13px; color: var(--muted); }
.side-form-head b { font-size: 15px; color: var(--ink); }
.side-form-done { margin: 0; font-size: 14px; color: var(--body); }
.edit-form { display: flex; flex-direction: column; gap: 16px; }
.edit-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.edit-head h1 { margin: 0 auto 0 0; font-family: var(--dish-font); font-weight: 900; font-size: 26px; line-height: 1.2; }
.edit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 16px; }
.edit-wide { grid-column: 1 / -1; }
.edit-checks { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.edit-ings h2 { margin: 0 0 2px; font-size: 15px; font-weight: 700; }
.edit-ing-group { margin-top: 10px; }
.edit-ing-label { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; font-size: 13px; }
.edit-ing-label .link-btn { margin-left: 0; }
.edit-ing-rows { display: flex; flex-direction: column; gap: 6px; }
.edit-ing { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 90px auto; gap: 6px; align-items: center; }
.edit-ing-tools { display: flex; gap: 2px; }
.edit-ing-tools button { width: 30px; height: 30px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 15px; cursor: pointer; }
.edit-ing-tools button:hover { background: var(--hover); color: var(--ink); }
.edit-foot { padding-top: 6px; border-top: 1px solid var(--div); }
.recipe-actions .chip, .recipe-actions a.chip { height: 34px; display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); }
/* ★ 已收藏 keeps the light text of a pressed chip; the rule above would make it dark on dark. */
.recipe-actions .chip[aria-pressed="true"] { color: var(--on-dark); }
.quote { margin: 0; padding: 14px 18px; border-radius: 12px; background: var(--quote); font-family: 'Noto Serif SC', serif; font-size: 16px; line-height: 1.85; color: var(--body); }
/* Short ingredient lists sit beside the method. Long ones go above it across the full width, in as
   many columns as fit, so the method is never left scrolled away beside them (see recipeLayout). */
.recipe-body { display: flex; flex-direction: column; gap: 26px; }
.recipe-body .method { max-width: 760px; }
.recipe-body.is-split { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 36px; align-items: start; }
/* The narrow column puts the portion bar on its own line under 原料. */
.recipe-body.is-split .ing-head .scale-bar { order: 2; width: 100%; }
.recipe-body h2 { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
/* --ing-cols is set per recipe by ingredientColumns(); the header row repeats once per column. */
.ing-group, .ing-cols { display: grid; grid-template-columns: repeat(var(--ing-cols, 1), minmax(0, 1fr)); column-gap: 32px; }
.ing-group { margin-bottom: 12px; }
.ing-label { grid-column: 1 / -1; padding-top: 4px; font-size: 12px; color: var(--faint); }
.ing-col-head, .ing.ing-g { display: grid; grid-template-columns: minmax(0, 1fr) 96px 88px; column-gap: 8px; align-items: baseline; }
.ing-col-head { padding-bottom: 4px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--faint); }
.ing-col-head .h-g { text-align: right; }
.h-times { color: var(--ink); font-weight: 700; }
.ing { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--div); font-size: 14px; }
.ing .q { margin-left: auto; flex-shrink: 0; font-size: 13px; color: var(--faint); }
.ing-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 8px; }
.ing-head h2 { margin: 0; }
.ing-head .jump-method { margin-left: auto; }
.pane-scroll { position: relative; }
.scale-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.scale-bar .chip { height: 26px; padding: 0 9px; font-size: 12px; }
.scale-factor { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: var(--muted); }
.scale-factor input, .g-input input {
  height: 26px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
  color: var(--ink); font: 400 13px 'Noto Sans SC', system-ui, sans-serif; text-align: right; outline: none;
  -moz-appearance: textfield;
}
.scale-factor input { width: 52px; }
.scale-factor input:focus, .g-input input:focus { border-color: var(--focus); }
.scale-factor input::-webkit-inner-spin-button, .g-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.scale-note { margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: var(--faint); }
.scale-note:empty { display: none; }
.adv-field-check { justify-content: flex-end; }
.orig { font-size: 12px; color: var(--faint); }
.ing-g { align-items: center; }
.ing-g .q { margin-left: 0; text-align: right; }
.ing-g .name { min-width: 0; }
.g-input { justify-self: end; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.g-input input { width: 60px; height: 24px; }
.ing.hit .name { font-weight: 700; background: linear-gradient(transparent 60%, var(--hl) 60%); }
.steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; counter-reset: step; }
.steps li { display: flex; gap: 12px; counter-increment: step; }
.steps li::before {
  content: counter(step); flex-shrink: 0; width: 24px; height: 24px; margin-top: 3px; border-radius: 50%;
  background: var(--dark); color: var(--on-dark); display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.steps p { margin: 0; font-family: 'Noto Serif SC', serif; font-size: 15.5px; line-height: 1.9; color: var(--body); }
.note-box { margin-top: 18px; padding: 14px 18px; border-left: 3px solid var(--bar); background: var(--quote); }
.note-box span { font-size: 12px; font-weight: 700; color: var(--muted); }
.note-box p { margin: 4px 0 0; font-family: 'Noto Serif SC', serif; font-size: 14.5px; line-height: 1.85; color: var(--body); }
.animal-notice { margin-bottom: 16px; padding: 12px 16px; border: 1px solid var(--notice-line); border-radius: 12px; background: var(--notice-bg); color: var(--notice-ink); }
.animal-notice b { font-size: 14px; font-weight: 700; }
.animal-notice p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.7; }
.animal-notice a { margin-left: 4px; font-weight: 500; text-decoration: underline dotted; text-underline-offset: 3px; }
.similar h2 { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.similar h2 .muted { margin-left: 8px; font-size: 12px; font-weight: 400; }
.similar-more { margin: 10px 0 0; color: var(--ink); }
.similar-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 28px; }
.similar-row {
  min-width: 0; padding: 9px 0; border: 0; border-bottom: 1px solid var(--div); background: none;
  text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px;
}
.similar-row .dish { min-width: 0; font-family: var(--dish-font); font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.similar-row:hover .dish { text-decoration: underline; text-underline-offset: 3px; }
.similar-row .tag { flex-shrink: 0; padding: 0 6px; border-radius: 3px; background: var(--badge); color: var(--muted); font-size: 11px; }
.similar-row .year { margin-left: auto; flex-shrink: 0; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.similar-row .why { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-nav { display: flex; gap: 10px; padding-top: 6px; border-top: 1px solid var(--div); font-size: 13px; }
.book-nav button { padding: 6px 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.book-nav button:hover { color: var(--ink); }
.book-nav .next { margin-left: auto; }
.pane-empty { padding: 60px 44px; color: var(--faint); }

/* Tablets and small windows: the brand gives up the width that lines the search field up with the
   recipe pane, so the field keeps room beside the header links, and the result list narrows so the
   recipe pane is not starved. The home page keeps the name but, like the other pages, shows the
   header links as icons (each has a title), so its header fits too. */
@media (min-width: 760px) and (max-width: 1199px) {
  .brand { width: auto; }
  body.is-results .brand-name { display: none; }
  .nav-icon span { display: none; }
  .site-nav { gap: 16px; }
  .results { grid-template-columns: 320px minmax(0, 1fr); }
}

/* A narrow recipe pane stacks: actions under the title, ingredients above the method. It follows the
   pane's own width, so it covers tablets, small windows and phones alike. */
@container (max-width: 620px) {
  .recipe { padding: 20px 22px 40px; }
  .recipe-head { flex-wrap: wrap; }
  .recipe-actions { width: 100%; max-width: none; margin-left: 0; justify-content: flex-start; }
  .recipe-body.is-split { display: flex; flex-direction: column; gap: 20px; }
}

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

/* Phone and narrow windows */
@media (max-width: 759px) {
  .dev-strip { padding: 4px 12px; }
  .adv { left: 16px !important; width: calc(100vw - 32px); max-height: calc(100dvh - 120px); overflow-y: auto; }
  .adv-grid { grid-template-columns: minmax(0, 1fr); }
  .site-header { height: auto; min-height: 56px; padding: 8px 12px; gap: 10px; }
  .brand { width: auto; }
  body.is-results .brand-name, body.is-results .site-nav { display: none; }
  /* On the phone's home page the links get a row of their own, as text; 会员 stays beside the name. */
  .site-header { flex-wrap: wrap; }
  .member-btn { order: 1; height: 30px; padding: 0 10px; }
  .site-nav { order: 2; }
  body.is-results .member-btn { display: none; }
  .member-panel { left: 16px; right: 16px !important; width: auto; }
  .site-nav { width: 100%; margin-left: 0; justify-content: space-between; gap: 12px; font-size: 14px; }
  .nav-icon svg, .like-label { display: none; }
  .like-btn { height: 30px; padding: 0 10px; }
  .hero { padding-top: 26px; align-items: stretch; }
  .hero-title { font-size: 27px; text-align: left; margin-bottom: 14px; }
  .hero-kicker { font-size: 12px; }
  .hero-slot .search-field { height: 52px; padding: 0 12px 0 14px; }
  .recent-row { flex-wrap: wrap; }
  .home-cards { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
  .today { min-height: 0; padding: 16px; gap: 14px; }
  .today-cover { width: 66px; height: 92px; }
  .today-name { font-size: 21px; }
  .today-text { -webkit-line-clamp: 3; font-size: 14px; }
  .today-foot { flex-wrap: wrap; }
  .shelf-row { gap: 14px 12px; }
  .shelf-page { padding-top: 20px; }
  .shelf-page-head h1 { font-size: 26px; }
  .shelf-tools { margin-left: 0; width: 100%; }
  .shelf-filter { flex: 1; }
  .shelf-filter input { width: 100%; }
  .shelf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; }
  .shelf-card .title { font-size: 13px; }
  .shelf-card .cover-fake .t { font-size: 12px; }
  .book { width: 60px; }
  .results { height: auto; display: block; }
  .results-list { border-right: 0; }
  .list-scroll { overflow: visible; }
  .pane {
    position: fixed; inset: 0; z-index: 10; transform: translateX(100%); transition: transform .26s cubic-bezier(.2,.8,.2,1);
    box-shadow: -8px 0 24px rgba(0,0,0,.08); visibility: hidden;
  }
  .pane.is-open { transform: none; visibility: visible; }
  .pane-top { display: flex; align-items: center; height: 52px; flex-shrink: 0; padding: 0 8px; border-bottom: 1px solid var(--line); background: var(--head); }
  .pane-top .muted { margin-left: auto; margin-right: 10px; }
  .pane-back, .pane-bottom button { height: 44px; padding: 0 12px; border: 0; background: transparent; font-size: 15px; font-weight: 500; cursor: pointer; }
  .pane-bottom { display: flex; justify-content: space-between; height: 56px; flex-shrink: 0; padding: 0 8px; border-top: 1px solid var(--line); background: var(--head); }
  .pane-bottom button:disabled { color: var(--faint); }
  .recipe { padding: 18px 18px 28px; gap: 16px; }
  .recipe-head .cover-wrap { width: 50px; }
  .recipe-title h1 { font-size: 26px; gap: 8px; }
  .recipe-head { flex-wrap: wrap; }
  .recipe-actions { width: 100%; max-width: none; margin-left: 0; justify-content: flex-start; gap: 6px; }
  .recipe-actions .chip, .recipe-actions a.chip { height: 30px; padding: 0 10px; font-size: 13px; }
  .edit-ing { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 64px; }
  .edit-ing-tools { grid-column: 1 / -1; justify-content: flex-end; margin-top: -4px; }
  .recipe-body, .recipe-body.is-split { display: flex; flex-direction: column; gap: 20px; }
    }

/* Server-rendered archive pages (app/templates/seo): a recipe at /recipes/<id>, the /recipes/ list,
   the /books/ shelf and a book at /books/<id>. They are what search engines list, and they reuse the
   pieces above without this UI's script; these rules lay them out as pages of their own. */
body.is-archive .brand { width: auto; }
@media (min-width: 760px) and (max-width: 1439px) {
  body.is-archive .nav-icon span { display: none; }
  body.is-archive .site-nav { gap: 16px; }
}
@media (max-width: 1199px) {
  body.is-archive .brand-name { display: none; }
}
a.btn-dark { display: inline-flex; align-items: center; text-decoration: none; }
a.next-btn { color: var(--ink); text-decoration: none; }
a.next-btn:hover { border-color: var(--muted); }
.archive { flex: 1 0 auto; width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 18px 0 64px; animation: fade-up .28s ease both; }
.archive.archive-narrow { width: min(1000px, calc(100% - 32px)); }
.archive .cover { height: auto; }
.crumbs { margin: 0 0 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--muted); text-underline-offset: 3px; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--body); overflow-wrap: anywhere; }
.archive-head { margin-bottom: 18px; }
.archive-head h1 { margin: 0; font-family: var(--hero-font); font-weight: 900; font-size: 32px; line-height: 1.2; overflow-wrap: anywhere; }
.archive-head p { margin: 6px 0 0; max-width: 720px; font-size: 14px; }
.archive-head a, .archive-toc > p a { color: var(--ink); text-underline-offset: 3px; }
.archive-empty { padding: 24px 0; list-style: none; color: var(--muted); }
.pager { margin: 24px 0 0; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 13px; }
.pager .chip { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }

/* A recipe: the results pane's recipe on a card of its own, sized by its own width as in the pane. */
.archive-pane { container-type: inline-size; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; }
.recipe-title p { margin: 0; }
.recipe-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.recipe-name h1 { overflow-wrap: anywhere; }
.cat-tag { padding: 1px 7px; border-radius: 3px; background: var(--badge); color: var(--muted); font-size: 12px; }
.recipe-source a { color: var(--ink); text-underline-offset: 3px; }
.archive .quote, .archive .note-box p { white-space: pre-line; overflow-wrap: anywhere; }
/* Long ingredient lists take as many columns as fit, as ingredientColumns() decides in the pane. */
.archive-pane .ing-cols .ing-col-head + .ing-col-head { display: none; }
@container (min-width: 600px) {
  .archive-pane .recipe-body.is-stacked .ingredients { --ing-cols: 2; }
  .archive-pane .recipe-body.is-stacked .ing-col-head:nth-child(2) { display: grid; }
}
@container (min-width: 872px) {
  .archive-pane .recipe-body.is-stacked .ingredients { --ing-cols: 3; }
  .archive-pane .recipe-body.is-stacked .ing-col-head:nth-child(3) { display: grid; }
}
/* Stacked in a narrow card, the ingredients take its width and the button sits under the title. */
@container (max-width: 620px) {
  .archive-pane .recipe-body.is-split { align-items: stretch; }
  .archive-pane .recipe-actions .btn-dark { margin-left: 0; }
}
.archive-next { padding-top: 18px; border-top: 1px solid var(--div); }
.archive-next .card-kicker { margin: 0 0 10px; font-weight: 400; }
.archive-next-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 12px; }
.archive-next .next-btn .n { text-align: right; }

/* The recipe list and the shelf. */
.archive-rows { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: 28px; }
.archive-row { padding: 10px 2px; display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--div); color: var(--ink); text-decoration: none; }
.archive-row .dish { font-family: var(--dish-font); font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
.archive-row:hover .dish { text-decoration: underline; text-underline-offset: 3px; }
.archive-row .why { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.archive-shelf { margin: 8px 0 0; padding: 0; list-style: none; }
.archive-shelf .shelf-card { text-decoration: none; }

/* A book: its card, then its table of contents in page order with dot leaders. */
.archive-book .book-card { gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--div); }
.archive-book .book-card .cover-wrap { width: 150px; }
.archive-book .book-card-body { gap: 8px; }
.archive-book h1 { margin: 0; font-family: 'Noto Serif SC', serif; font-weight: 900; font-size: 28px; line-height: 1.3; overflow-wrap: anywhere; }
.book-facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; font-size: 13px; }
.book-facts dt { color: var(--muted); }
.book-facts dd { margin: 0; color: var(--body); overflow-wrap: anywhere; }
.archive-book .review-line { margin: 0; }
.archive-book .desc { margin: 0; max-width: 640px; display: block; overflow: visible; font-size: 14px; line-height: 1.8; white-space: pre-line; overflow-wrap: anywhere; }
.archive-book .book-card-actions { margin: 6px 0 0; }
.archive-book .book-card-actions .btn-dark { margin-left: 0; }
.archive-toc { padding-top: 22px; }
.archive-toc h2 { margin: 0; font-size: 18px; font-weight: 700; }
.archive-toc > p { margin: 4px 0 8px; font-size: 13px; }
.archive-toc .toc { margin: 0; padding: 4px 0 8px; list-style: none; columns: 2 340px; column-gap: 40px; }
.archive-toc .toc li { break-inside: avoid; }
a.toc-line { padding: 4px 0; display: flex; align-items: baseline; font-family: var(--dish-font); font-size: 15px; line-height: 1.7; color: var(--ink); text-decoration: none; }
a.toc-line:hover .toc-name { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 759px) {
  /* The search field stays beside the brand mark; the links take the row below, as text. */
  body.is-archive .header-slot { flex: 1 1 0; }
  .archive { padding-top: 12px; }
  .archive-pane { margin: 0 -16px; border-left: 0; border-right: 0; border-radius: 0; }
  .archive-head h1 { font-size: 26px; }
  .archive-rows { grid-template-columns: minmax(0, 1fr); }
  .archive-book .book-card { gap: 16px; }
  .archive-book .book-card .cover-wrap { width: 96px; }
  .archive-book h1 { font-size: 22px; }
}