:root {
  color-scheme: light;
  --ink: #24231e;
  --muted: #746f63;
  --paper: #faf9f4;
  --paper-deep: #f3f1e8;
  --line: #d9d4c8;
  --line-strong: #bbb4a5;
  --olive: #727c4f;
  --soft-olive: #eef1df;
  --danger: #b85e41;
  --radius-control: 8px;
  --font-ui: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Kaiti SC", "STKaiti", "KaiTi", serif;
}
/* Meal-first import: optional maintenance stays below the primary action. */
.meal-first-sheet .sheet-content,.enrich-batch-sheet .sheet-content{padding-bottom:20px}
.meal-first h3{font-family:var(--font-script);font-size:25px;font-weight:500;margin:8px 0 15px}
.meal-first-total{min-height:78px;margin-bottom:12px}.meal-first-total img{float:right;width:74px;height:74px;object-fit:contain}
.meal-first-total strong{font-size:32px;letter-spacing:-.5px}.meal-first-total strong small{font:13px var(--font-ui);color:var(--muted)}
.meal-first-total p{font-size:13px;margin:7px 0 0;color:var(--muted)}
.meal-first-foods{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin:14px 0 18px}
.meal-first-foods div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:14px}.meal-first-foods small{color:var(--muted);white-space:nowrap}
.meal-first-caption{text-align:center;font-size:12px;color:var(--muted);margin:8px 0 22px}
.meal-first-optional{border-top:1px dashed var(--line);padding-top:13px}.meal-first-link{width:100%;display:flex;justify-content:space-between;gap:12px;align-items:center;text-align:left;background:none;border:0;padding:9px 0;color:var(--ink)}
.meal-first-link small{display:block;font-size:12px;color:var(--muted);margin-top:5px}.meal-first .text-button{font-size:13px;padding:10px 0}
.enrich-batch-item{border-top:1px solid var(--line);padding:15px 0}.enrich-batch-heading{display:flex;justify-content:space-between;align-items:baseline;gap:10px}.enrich-batch-heading strong{font-size:15px;min-width:0;overflow-wrap:anywhere}.enrich-batch-heading small{font-size:11px;color:var(--olive);flex-shrink:0}
.enrich-batch-item .sheet-hint{font-size:12px;margin:7px 0;line-height:1.5}.enrich-target-label{font-size:12px;color:var(--muted)}.enrich-batch select{font-size:13px;min-width:0;max-width:100%;padding:10px}
.enrich-batch details{margin:9px 0;font-size:12px;color:var(--muted)}.enrich-batch summary{padding:7px 0;cursor:pointer}.enrich-inline-search{display:flex;align-items:center;gap:8px;margin:8px 0}.enrich-inline-search input{min-width:0;flex:1;font-size:13px}.enrich-inline-search button{flex-shrink:0;width:auto}
.enrich-compact-field{display:flex!important;align-items:flex-start;gap:7px!important;padding:10px 0!important;border-bottom:1px dotted var(--line);margin:0!important;font-size:12px!important}.enrich-compact-field input,.enrich-identity input{width:17px!important;height:17px;flex:0 0 17px;margin:2px 0!important;accent-color:var(--olive)}.enrich-compact-field>span{min-width:0}.enrich-compact-field b{font-size:13px}.enrich-compact-field small{display:block;font-size:10px;color:var(--muted);line-height:1.5;overflow-wrap:anywhere}.enrich-compact-value{margin-left:auto;text-align:right;flex:0 0 112px;line-height:1.7}.enrich-compact-value strong{display:block;color:var(--ink);font-size:13px}
.enrich-identity{display:flex!important;align-items:flex-start;gap:8px!important;font-size:13px!important;margin:12px 0!important}.enrich-kept{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:12px}.enrich-inline-warning{font-size:12px;line-height:1.6;color:#956a41}.enrich-weight{background:var(--paper-deep);padding:12px;border-radius:8px}.enrich-weight label{font-size:13px}.enrich-weight input[type=checkbox]{width:17px;margin-right:7px}
.enrich-batch-footer{border-top:1px solid var(--line);padding-top:12px}.enrich-batch .text-button{font-size:12px}.enrich-batch-footer .primary{margin-top:4px}
.sheet .text-button{display:block;max-width:100%;border:0;background:transparent;color:var(--olive);padding:11px 0;text-align:left;line-height:1.5;cursor:pointer}
.library-page-tools .text-button{border:0;background:transparent;color:var(--olive);text-align:left;padding:9px 0;font-size:13px}
.enrich-inline-search .text-button{width:auto;padding:8px}
.enrich-batch{padding-bottom:100px}.enrich-batch-item{padding:10px 0}.enrich-batch .enrich-target-label{font-size:0;margin:0;gap:0}.enrich-batch .enrich-target-label select{font-size:13px;margin:0;padding:8px}.enrich-batch-item details{margin:3px 0}.enrich-batch-item summary{padding:4px 0}.enrich-batch-item .sheet-hint{margin:4px 0}
.enrich-batch-footer{position:fixed;z-index:2;bottom:0;left:50%;transform:translateX(-50%);width:min(430px,100%);padding:10px 20px max(15px,env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line)}.enrich-batch-footer .sheet-hint{font-size:11px;text-align:center;margin:0 0 6px}
* { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #ebe9e4; color: var(--ink); font-family: var(--font-ui); font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, select { font: inherit; }
[hidden] { display: none !important; }
button { color: inherit; }
#app { width: 100%; max-width: 430px; min-height: 100dvh; margin: 0 auto; padding: max(17px, env(safe-area-inset-top)) 20px calc(92px + env(safe-area-inset-bottom)); overflow-x: clip; background-color: var(--paper); background-image: radial-gradient(rgba(116, 106, 85, .075) .45px, transparent .7px); background-size: 8px 8px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 18px; }
.eyebrow { margin: 0 0 4px; color: var(--muted); font-size: 12px; letter-spacing: .08em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-family: var(--font-script); font-size: 31px; font-weight: 500; }
h2 { font-size: 18px; }
.day-controls { display: flex; align-items: center; gap: 9px; }
.icon-button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 25px; line-height: 1; }
.date-input { width: 36px; height: 36px; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: transparent; font-size: 0; text-align: center; }
.date-input::-webkit-date-and-time-value { min-width: 0; margin: 0; color: transparent; text-align: center; }
.date-input::-webkit-calendar-picker-indicator { width: 17px; height: 17px; margin: 0; opacity: .72; }
.summary { padding: 17px 18px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.50); }
.summary-primary { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 16px; align-items: end; }
.kcal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 7px; font-size: 29px; font-weight: 650; letter-spacing: -.04em; }
.kcal strong { color: var(--ink); font-size: 37px; line-height: .9; }
.kcal span { color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.kcal small { display: block; width: 100%; color: var(--muted); font-size: 12px; font-weight: 400; letter-spacing: 0; }
.protein-total { display: grid; gap: 3px; padding: 1px 0 2px 13px; border-left: 1px dashed #bdb6a6; }
.protein-total strong { color: var(--olive); font-size: 22px; line-height: 1; letter-spacing: -.035em; }
.protein-total strong small { font-size: 12px; font-weight: 600; letter-spacing: 0; }
.protein-total span { color: var(--muted); font-size: 12px; }
.summary-secondary { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 15px; padding-top: 10px; border-top: 1px dashed #d5cfc2; color: var(--muted); font-size: 12px; }
.macros { display: flex; justify-content: space-between; gap: 7px; margin: 13px 0 0; color: var(--muted); font-size: 12px; }
.macro-p { color: #698047; }.macro-c { color: #a27436; }.macro-f { color: #b46458; }
.macro-note { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.meal { position: relative; padding: 24px 0 13px; border-bottom: 1px dashed #cfc8bb; }
.meal.is-empty { padding: 20px 0 10px; }
.meal-heading { display: flex; align-items: baseline; justify-content: space-between; }
.meal-heading h2 { position: relative; z-index: 0; margin: 0; font-family: "Kaiti SC", "STKaiti", serif; font-size: 24px; font-weight: 500; }.meal-heading h2::after { position: absolute; z-index: -1; right: -4px; bottom: 2px; left: -4px; height: 7px; border-radius: 50% 35% 44% 42%; background: rgba(202, 211, 162, .45); content: ''; transform: rotate(-1deg); }.meal-heading span { color: var(--muted); font-size: 12px; }
.meal-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 0 3px; }
.meal-row strong { display: block; font-size: 15px; }.meal-row small { color: var(--muted); }
.meal-record-trigger { width: 100%; margin-top: 10px; padding: 10px 2px 4px; border: 0; background: transparent; color: #70695d; font-size: 13px; text-align: left; }
.meal.is-empty .meal-record-trigger { margin-top: 4px; color: var(--olive); }
.meal-record-trigger b { color: var(--olive); font-size: 18px; font-weight: 400; vertical-align: -1px; }
.fab { position: fixed; right: max(22px, calc((100vw - 430px) / 2 + 20px)); bottom: calc(82px + env(safe-area-inset-bottom)); width: 54px; height: 54px; border: 0; border-radius: 50%; background: var(--olive); box-shadow: 0 9px 20px #6770434d; color: white; font-size: 30px; }
.tabs { position: fixed; z-index: 1; bottom: 0; left: 50%; display: flex; width: 100%; max-width: min(430px, 100vw); transform: translateX(-50%); padding: 10px 12px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(248,246,240,.97); backdrop-filter: blur(14px); }
.tab { flex: 1; border: 0; background: transparent; color: var(--muted); font-size: 13px; }.tab.is-active { color: var(--olive); font-weight: 700; }.tab i { display:block; height:21px; font-size:20px; font-style:normal; }
.subheading { margin: 3px 0 18px; color: var(--muted); font-size: 13px; }.list-card { margin-bottom: 11px; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background:#fffdfa; }.list-card h2{margin:0 0 7px;}.list-card p{margin:0;color:var(--muted);font-size:13px;}.status { display:inline-block; margin-top:10px; padding:4px 9px; border-radius: 99px; background:var(--soft-olive); color:var(--olive);font-size:12px; }
.empty { padding: 30px 0; color: var(--muted); text-align: center; }
.diagnostics-card { display: grid; gap: 13px; }
.diagnostics-card h2 { margin-bottom: 7px; }
.build-label { display: inline-block; margin-top: 11px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.compact-button { margin-top: 0; padding: 11px; font-size: 13px; }
.diagnostics-status { display: grid; grid-template-columns: 86px 1fr; gap: 8px 12px; margin-top: 16px; padding: 13px; border-radius: 10px; background: #f5f1e8; color: var(--muted); font-size: 12px; }
.diagnostics-status b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.privacy-note { margin-top: 17px!important; padding-left: 10px; border-left: 2px solid var(--olive); }
body.sheet-open { position: fixed; width: 100%; height: 100%; overflow: hidden; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 20; overflow: hidden; background: #25231b66; touch-action: none; }
.sheet { position: absolute; right: 0; bottom: 0; left: 0; width: min(100%, 430px); height: min(100dvh, 880px); max-height: 100dvh; margin: 0 auto; padding: 0 20px calc(28px + env(safe-area-inset-bottom)); overflow-x: hidden; overflow-y: scroll; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; border-radius: 22px 22px 0 0; background: #fffdf9; box-shadow: 0 -10px 30px #0002; }
.sheet-header { position: sticky; top: 0; z-index: 2; margin: 0 -20px; padding: 12px 20px 7px; background: #fffdf9; }
.handle { width: 34px; height: 4px; margin: 0 auto 18px; border-radius: 99px; background: #ddd8ce; }
.sheet h2 { margin: 0; padding: 0 0 6px; background:#fffdf9; font-family:"Kaiti SC","STKaiti",serif;font-size:26px;font-weight:500; }
.sheet-content { min-height: calc(100% - 76px); padding-bottom: 8px; }
.sheet p { color:var(--muted);font-size:13px;line-height:1.6; }
.choice, .primary, .secondary { display:block;width:100%;padding:15px;border-radius:12px;text-align:left; }.choice { margin:10px 0;border:1px solid var(--line);background:#fffdfa; }.choice strong {display:block;font-size:16px;}.choice small {color:var(--muted);}.primary { margin-top:18px;border:0;background:var(--olive);color:white;text-align:center;font-weight:700;}.secondary { margin-top:10px;border:1px solid var(--line);background:transparent;text-align:center;}
label { display:block; margin-top:14px; color:#595449;font-size:13px; } input, select { width:100%; margin-top:6px; padding:12px; border:1px solid var(--line); border-radius:9px; background:white; color:var(--ink); }.form-note { margin-top:13px!important; }.form-error { margin: 15px 0 0!important; padding: 11px 12px; border: 1px solid #d8a092; border-radius: 10px; background: #fff5f1; color: #9a4635!important; font-size: 12px!important; }.stock-result { margin:14px 0 0; padding:12px;border-radius:9px;background:#f5f1e8;color:#595449; }.notice { position:fixed; z-index:30; left:50%; bottom:calc(93px + env(safe-area-inset-bottom)); width:max-content; max-width:calc(100% - 40px); transform:translate(-50%, 15px); padding:10px 14px;border-radius:9px;background:#292822;color:white;font-size:13px;opacity:0;pointer-events:none;transition:.2s; }.notice.show{opacity:1;transform:translate(-50%,0);}.notice.error{background:#9a4635;}
@media (min-width: 431px) { body { padding: 18px 0; } #app { border-radius: 20px; min-height: calc(100dvh - 36px); box-shadow: 0 10px 35px #00000012; } }

.meal-row { width: 100%; border: 0; background: transparent; text-align: left; }
.meal-row em { color: var(--olive); font-style: normal; }
.date-hint { margin: 14px 0 -5px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.form-grid label { min-width: 0; }
.form-grid input { min-width: 0; padding-inline: 8px; }
.check-label { display: flex; align-items: center; gap: 9px; margin-top: 17px; }
.check-label input { width: 16px; height: 16px; margin: 0; accent-color: var(--olive); }
.compact-empty { padding: 16px 0; }
.library-section { margin-top: 22px; padding-top: 4px; border-top: 1px solid var(--line); }
.library-section h3 { margin: 0 0 6px; font-size: 16px; }
.library-search { width: 100%; margin: 4px 0 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink); font-size: 14px; }
.library-search-result { min-height: 18px; margin: 7px 1px -4px!important; color: var(--muted); font-size: 12px!important; }
.food-add-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 16px; }
.food-add-actions .primary { grid-column: 1 / -1; }
.food-add-actions .restaurant-add { grid-column: 1 / -1; border-color: #cbd2b0; color: var(--olive); background: #f7f8ed; }
.food-add-actions button { margin: 0; padding: 11px 8px; font-size: 13px; }
.library-group { padding-top: 17px; }
.library-group > summary { display: flex; align-items: center; justify-content: space-between; list-style: none; color: var(--ink); font-size: 16px; font-weight: 650; }
.library-group > summary::-webkit-details-marker { display: none; }
.library-group > summary::after { content: '⌄'; margin-left: 8px; color: var(--muted); font-size: 15px; font-weight: 400; transition: transform .18s ease; }
.library-group[open] > summary::after { transform: rotate(180deg); }
.library-group > summary small { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 400; }
.saved-food-list { margin-top: 11px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.saved-food { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.saved-food:last-child { border-bottom: 0; }
.saved-food small { color: var(--muted); white-space: nowrap; }
.restaurant-library-group { margin: 11px 0 0; padding: 0; border: 0; }
.restaurant-library-group > summary { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 2px 2px; color: var(--ink); font-size: 14px; font-weight: 650; list-style: none; }
.restaurant-library-group > summary::-webkit-details-marker { display: none; }
.restaurant-library-group > summary::after { content: '⌄'; margin-left: 8px; color: var(--muted); font-weight: 400; }
.restaurant-library-group > summary small { margin-left: auto; color: var(--muted); font-size: 11px; font-weight: 400; }
.restaurant-choice { border-color: #cbd2b0; background: #f5f7e9; }
.restaurant-dish-group { margin-top: 15px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #fbfaf6; }
.restaurant-dish-group[hidden] { display: none; }
.restaurant-dish-caption { margin: 0 0 8px!important; color: var(--olive)!important; font-size: 12px!important; font-weight: 650; }
.restaurant-dish-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 10px; align-items: end; padding: 10px 0; border-top: 1px solid var(--line); }
.restaurant-dish-check { display: flex; align-items: flex-start; gap: 9px; margin: 0; color: var(--ink); }
.restaurant-dish-check input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--olive); }
.restaurant-dish-check span { min-width: 0; }
.restaurant-dish-check strong, .restaurant-dish-check small { display: block; }
.restaurant-dish-check strong { font-size: 14px; }
.restaurant-dish-check small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.restaurant-amount { margin: 0; color: var(--muted); font-size: 11px; }
.restaurant-amount input { min-width: 0; padding: 9px 7px; text-align: center; }
.restaurant-extra { margin-top: 16px; }
.restaurant-dish-group.is-a-la-carte { display: grid; gap: 10px; }
.restaurant-menu-item { display: grid; grid-template-columns: minmax(0, 1fr) 68px; align-items: start; padding: 13px; border: 1px solid #dfdacd; border-radius: 12px; background: #fffdfa; }
.restaurant-menu-item + .restaurant-menu-item { border-top: 1px solid #dfdacd; }
.restaurant-menu-item .restaurant-amount { align-self: center; }
.restaurant-modifiers { grid-column: 1 / -1; margin: 2px 0 0; padding-top: 10px; }
.restaurant-modifiers summary { color: var(--olive); font-size: 12px; }
.modifier-options, .quick-modifier-options { display: grid; gap: 7px; margin: 10px 0 0; padding: 0; border: 0; }
.modifier-options label, .quick-modifier-options label { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 7px; margin: 0; padding: 8px 9px; border: 1px solid #e1dbcf; border-radius: 9px; background: #fbfaf6; color: var(--ink); font-size: 12px; }
.quick-modifier-options label { grid-template-columns: 18px minmax(0, 1fr); }
.modifier-options input, .quick-modifier-options input { width: 16px; height: 16px; margin: 0; accent-color: var(--olive); }
.modifier-options small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.quick-modifier-options legend { padding: 0; color: var(--muted); font-size: 12px; }
.restaurant-library-group { margin: 8px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); }
.restaurant-library-group > summary { color: var(--ink); font-size: 14px; font-weight: 650; }
.restaurant-library-mode { margin: 10px 0 0; padding: 9px 0 0; border-top: 1px dashed #ddd5c7; }
.restaurant-library-mode > summary { color: var(--olive); font-size: 12px; }
.entry-range { margin: 0 0 10px; color: var(--muted); font-size: 12px; }
.danger-button { display:block; width:100%; margin-top:10px; padding:13px; border:1px solid #d8a092; border-radius:12px; background:transparent; color:var(--danger); text-align:center; }
.header-text-button { border: 0; background: transparent; color: var(--olive); font-size: 13px; font-weight: 650; }
.header-actions { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.recipe-import-action { padding: 7px 9px; border: 1px solid #ccd4a9; border-radius: 9px; background: var(--soft-olive); }
.decision-link { display: flex; width: 100%; align-items: center; justify-content: space-between; margin: 10px 0 -1px; padding: 10px 1px; border: 0; background: transparent; color: var(--olive); text-align: left; }
.decision-link span { font-family: "Kaiti SC", "STKaiti", serif; font-size: 18px; }
.decision-link small { color: var(--muted); font-size: 12px; }
.decision-header { padding: 4px 0 17px; }
.back-button { padding: 6px 0; border: 0; background: transparent; color: var(--muted); font-size: 13px; }
.decision-hero { padding: 10px 0 22px; border-bottom: 1px dashed #cfc8bb; }
.decision-hero h1 { margin-bottom: 8px; }
.decision-hero > p:last-child { margin: 0; color: var(--muted); font-size: 13px; }
.decision-context { display: grid; gap: 5px; margin-top: 15px; padding: 11px 12px; border-left: 3px solid rgba(118,128,82,.7); background: rgba(237,240,223,.48); color: var(--muted); font-size: 12px; line-height: 1.45; }
.decision-context b { color: var(--ink); font-weight: 650; }
.decision-panel { padding: 20px 0 0; }
.decision-panel h2 { margin: 0 0 6px; font-family: "Kaiti SC", "STKaiti", serif; font-size: 23px; font-weight: 500; }
.decision-panel > p { margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.decision-explain { margin-bottom: 14px !important; padding: 0 1px 4px; }
.decision-recipe { position: relative; margin: 0 0 10px; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,253,250,.9); }
.decision-recipe > button:first-child { display: block; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; }
.decision-rank { display: inline-block; margin-bottom: 8px; color: var(--olive); font-size: 11px; font-weight: 700; letter-spacing: .05em; }
.decision-recipe h2 { margin: 0 0 4px; font-family: "Kaiti SC", "STKaiti", serif; font-size: 21px; font-weight: 500; }
.decision-recipe p { margin: 0 0 8px; color: var(--ink); font-size: 13px; }
.decision-recipe small { display: block; padding-right: 4px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.decision-reason { margin-top: 2px; }
.decision-stock { display: inline-block; margin-top: 11px; padding: 3px 8px; border: 1px solid #d2d8b7; border-radius: 99px; color: var(--olive); font-size: 11px; }
.decision-recipe.almost { border-color: #ddd6be; background: #fffcf4; }
.decision-recipe.missing { border-color: #e4d2c9; }
.decision-ready { display: inline-block; margin-top: 12px; color: var(--olive); font-size: 12px; font-weight: 650; }
.decision-shopping { margin-top: 12px; padding: 8px 10px; border: 1px solid #d6ceb9; border-radius: 9px; background: transparent; color: #655f50; font-size: 12px; }
.decision-empty { padding: 23px 0; text-align: left; }
.decision-empty h2 { margin-bottom: 6px; }
.decision-empty .secondary { margin-top: 16px; }
.decision-choice { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 15px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.decision-choice strong, .decision-choice small { display: block; }
.decision-choice strong { font-size: 16px; }
.decision-choice small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.decision-choice b { color: var(--olive); font-size: 22px; font-weight: 400; }
.decision-footnote { margin: 23px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.filter-row { display: flex; gap: 7px; margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; }
.filter-button { flex: 0 0 auto; padding: 7px 12px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--muted); font-size: 12px; }
.filter-button.is-active { border-color: #ccd4a9; background: var(--soft-olive); color: var(--olive); font-weight: 700; }
.choice-primary { border-color: #c9d0a9; background: #f5f7e9; }
.add-more-options { margin: 16px 0 0; padding-top: 12px; border-top: 1px dashed #d4cdbf; }
.add-more-options summary { color: var(--muted); font-size: 13px; }
.add-more-options .choice { margin: 9px 0 0; }
.soon-row { display: grid; gap: 5px; margin: 0 0 14px; padding: 12px; border-left: 2px solid var(--olive); background: #f5f3e9; color: var(--muted); font-size: 12px; line-height: 1.5; }
.soon-row strong { color: var(--ink); }
.soon-items { display: grid; gap: 6px; }
.soon-item { display: grid; gap: 1px; }
.soon-item b { color: var(--ink); font-size: 13px; font-weight: 650; }
.soon-item small { color: var(--muted); font-size: 12px; }
.inventory-row, .shopping-row > button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.inventory-row strong, .shopping-row strong { display: block; font-size: 15px; }
.inventory-row small, .shopping-row small { color: var(--muted); font-size: 12px; }
.inventory-row b { text-align: right; font-size: 14px; }
.inventory-row em { display: block; margin-top: 4px; color: var(--danger); font-size: 11px; font-style: normal; }
.fridge-group { margin: 0; padding: 6px 0 4px; }
.fridge-group + .fridge-group { margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.fridge-group-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 3px 0 4px; }
.fridge-group-heading h2 { margin: 0; font-family: "Kaiti SC", "STKaiti", serif; font-size: 22px; font-weight: 500; }
.fridge-group-heading span { color: var(--muted); font-size: 11px; }
.shopping-row { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.shopping-row > input { width: 17px; height: 17px; margin: 0; accent-color: var(--olive); }
.shopping-row > button { flex: 1; min-width: 0; border-bottom: 0; }
.shopping-row b { font-size: 14px; white-space: nowrap; }
.row-action { flex: 0 0 auto; padding: 7px 9px; border: 1px solid #ccd4a9; border-radius: 8px; background: var(--soft-olive); color: var(--olive); font-size: 12px; }
.form-grid.two { grid-template-columns: 1fr 1fr; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 16px 0; }
.stats-grid > div { padding: 12px; border-radius: 10px; background: #f5f1e8; }
.stats-grid small { display: block; color: var(--muted); font-size: 11px; }
.stats-grid strong { display: block; margin-top: 4px; font-size: 15px; }
.trend-list { margin: 8px 0 17px; border-top: 1px solid var(--line); }
.trend-list > div { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.trend-list small { grid-column: 1 / -1; color: var(--muted); }

.day-type-button { width: 100%; margin: -4px 0 12px; padding: 9px 11px; border: 1px dashed #b8b1a2; border-radius: 9px; background: rgba(255,255,255,.24); color: var(--olive); font-size: 13px; font-weight: 650; text-align: left; }
.day-type-button span { color: var(--muted); font-weight: 400; }
.sodium { display: inline-block; margin-top: 10px; color: var(--muted); font-size: 11px; }
.quiet-meal-add { width: 100%; margin-top: 7px; padding: 7px; border: 0; background: transparent; color: var(--muted); font-size: 12px; text-align: left; }
.sheet textarea { width: 100%; min-height: 220px; margin-top: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--ink); font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
.import-lines { display: grid; gap: 8px; margin-top: 16px; }
.import-line { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 8px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: #fbfaf6; font-size: 12px; }
.import-line label { min-width: 0; margin: 0; font-size: 11px; }
.import-line input, .import-line select { min-width: 0; margin: 4px 0 0; padding: 8px; font-size: 12px; }
.saved-food span { min-width: 0; }
.saved-food strong, .saved-food span small { display: block; }
.saved-food span small { margin-top: 3px; overflow-wrap: anywhere; white-space: normal; }
.packet-title { margin: 13px 0 6px!important; color: var(--ink)!important; font-size: 20px!important; font-weight: 700; }
.packet-summary { display: grid; gap: 5px; padding: 16px; border: 1px solid #d6ddbd; border-radius: 13px; background: var(--soft-olive); }
.packet-summary strong { color: var(--olive); font-size: 25px; letter-spacing: -.03em; }
.packet-summary span { font-size: 14px; }.packet-summary small, .packet-ok { color: var(--muted); font-size: 12px; }
.packet-ok { margin: 15px 2px!important; }
.packet-conflicts { margin-top: 18px; }.packet-conflicts h3 { margin: 0 0 8px; font-size: 15px; }
.conflict-card { display: grid; gap: 7px; margin-top: 9px; padding: 13px; border: 1px solid #dfcbb7; border-radius: 11px; background: #fffaf4; }
.conflict-card small { color: var(--muted); font-size: 12px; }.conflict-card label { margin-top: 3px; }
.food-import-list { display: grid; margin: 18px 0; border-top: 1px solid var(--line); }
.food-import-row { display: grid; gap: 10px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.food-import-row > div { display: grid; gap: 4px; }
.food-import-row strong { font-size: 16px; line-height: 1.35; }
.food-import-row small { color: var(--muted); font-size: 13px; }
.food-import-row em { color: var(--olive); font-size: 13px; font-style: normal; }
details { margin-top: 13px; padding: 11px 0 0; border-top: 1px solid var(--line); } summary { color: var(--muted); font-size: 13px; cursor: pointer; }
.recipe-line { display: grid; gap: 8px; margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #fbfaf6; }
.recipe-line .quiet-meal-add { width: auto; margin: 0; padding: 3px 0; color: #a36250; }
.recipe-packet-details { margin-top: 17px; }
.recipe-packet-details h3 { margin: 15px 0 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.recipe-preview-ingredients li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; }
.recipe-preview-ingredients li small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.recipe-preview-steps { white-space: pre-line; }
.entry-food-editor { margin: 17px 0; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #fbfaf6; }
.entry-food-editor > summary { cursor: pointer; font-size: 14px; font-weight: 650; }
.entry-food-line { display: grid; gap: 8px; margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fffdfa; }
.entry-food-line .quiet-meal-add { width: auto; margin: 0; padding: 3px 0; color: #a36250; }
.meal-entry { margin: 8px 0 0; padding: 0; border: 0; }
.meal-entry > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); cursor: pointer; list-style: none; }
.meal-entry > summary::-webkit-details-marker { display: none; }
.meal-entry > summary::after { content: '⌄'; order: 3; color: var(--muted); font-size: 15px; transition: transform .18s ease; }
.meal-entry[open] > summary::after { transform: rotate(180deg); }
.meal-entry > summary > span { min-width: 0; flex: 1; }
.meal-entry > summary strong { display: block; font-size: 16px; line-height: 1.35; }
.meal-entry > summary small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.meal-entry > summary b { flex: 0 0 auto; font-size: 14px; white-space: nowrap; }
.meal-entry-content { padding: 11px 0 4px; }
.meal-entry-content h3 { margin: 0 0 7px; color: var(--muted); font-size: 11px; font-weight: 500; }
.entry-foods { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.entry-foods li { display: flex; justify-content: space-between; gap: 12px; color: var(--ink); font-size: 13px; }
.entry-foods b { color: var(--muted); font-weight: 500; white-space: nowrap; }
.entry-source { margin: 0; color: var(--muted); font-size: 13px; }
.entry-notes { margin-top: 12px; padding-top: 10px; }
.entry-notes summary { font-size: 12px; }
.entry-notes p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; white-space: pre-wrap; }
.entry-edit { margin-top: 9px; padding-left: 0; }

/* Recipe detail: deliberately editorial and line-based, not a generic form card. */
.recipe-detail { padding: 2px 0 12px; }
.recipe-detail-hero { padding: 9px 0 23px; border-bottom: 1px solid var(--line); }
.recipe-section-kicker { margin: 0 0 7px !important; color: var(--olive) !important; font-size: 10px !important; font-weight: 750; letter-spacing: .12em; line-height: 1.2 !important; }
.recipe-detail-title { margin: 0; color: var(--ink); font-size: clamp(26px, 7vw, 33px); font-weight: 690; letter-spacing: -.045em; line-height: 1.17; overflow-wrap: anywhere; }
.recipe-detail-meta { display: flex; flex-wrap: wrap; gap: 7px 13px; margin-top: 15px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.recipe-detail-meta span { white-space: nowrap; }
.recipe-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.recipe-detail-tags span { padding: 4px 8px; border: 1px solid #d9d3c7; border-radius: 99px; color: #665f53; font-size: 11px; }
.recipe-nutrition-strip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px 13px; padding: 18px 0 17px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.recipe-nutrition-strip strong { color: var(--ink); font-size: 25px; letter-spacing: -.04em; line-height: 1; }
.recipe-nutrition-strip strong small { color: var(--muted); font-size: 11px; font-weight: 450; letter-spacing: 0; }
.recipe-nutrition-strip span { white-space: nowrap; }
.recipe-stock-note { margin: 0 !important; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px !important; }
.recipe-stock-note b { color: var(--olive); }
.recipe-issues { margin: 18px 0 0; padding: 15px; border: 1px solid #e0d3bf; border-radius: 14px; background: #fffcf5; }
.recipe-issues h3 { margin: 0; color: var(--ink); font-size: 17px; letter-spacing: -.02em; }
.recipe-issues > div > p:last-child { margin: 5px 0 0 !important; color: var(--muted); font-size: 12px !important; }
.recipe-issues ul { margin: 13px 0 0; padding: 0; border-top: 1px solid #e4dccd; list-style: none; }
.recipe-issues li { padding: 11px 0 0; }
.recipe-issues li + li { margin-top: 10px; border-top: 1px solid #e9e2d5; }
.recipe-issues strong { display: block; font-size: 14px; }
.recipe-issues li p { margin: 3px 0 0 !important; color: var(--muted); font-size: 12px !important; line-height: 1.5 !important; }
.recipe-section { padding: 24px 0; border-bottom: 1px solid var(--line); }
.recipe-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.recipe-section-heading h3 { margin: 0; font-family: "Kaiti SC", "STKaiti", serif; font-size: 23px; font-weight: 500; }
.recipe-section-heading small { padding-bottom: 2px; color: var(--muted); font-size: 12px; }
.recipe-ingredient-list { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.recipe-ingredient-row { display: flex; align-items: center; justify-content: space-between; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.recipe-ingredient-row:last-child { border-bottom: 0; }
.recipe-ingredient-row > span { min-width: 0; }
.recipe-ingredient-row strong { display: block; color: var(--ink); font-size: 14px; line-height: 1.35; }
.recipe-ingredient-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.recipe-ingredient-row b { flex: 0 0 auto; color: #5e584c; font-size: 13px; font-weight: 600; white-space: nowrap; }
.recipe-ingredient-row.is-unlinked strong { color: #9a654e; }
.recipe-empty-row, .recipe-empty-copy { color: var(--muted); font-size: 13px; }
.recipe-method { padding-bottom: 9px; }
.recipe-step-list { margin: 0; padding: 0; list-style: none; }
.recipe-step-list li { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 11px; padding: 13px 0; border-top: 1px solid var(--line); }
.recipe-step-list b { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; background: var(--soft-olive); color: var(--olive); font-size: 11px; }
.recipe-step-list p { margin: 1px 0 0 !important; color: #524d43 !important; font-size: 14px !important; line-height: 1.68 !important; }
.recipe-note-details { margin-top: 0; padding: 18px 0; border-bottom: 1px solid var(--line); }
.recipe-note-details summary { color: var(--muted); font-size: 13px; }
.recipe-note-details p { margin: 9px 0 0 !important; color: var(--muted); font-size: 13px !important; line-height: 1.6 !important; white-space: pre-wrap; }
.recipe-detail-actions { padding: 16px 0 5px; }
.recipe-detail-actions .primary { margin-top: 0; }
.recipe-close-button { display: block; width: 100%; margin-top: 11px; padding: 9px; border: 0; background: transparent; color: var(--muted); font-size: 13px; text-align: center; }

/* Safari zooms the whole viewport when a focused form control renders below 16px. */
@media (max-width: 600px) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
}

/* Paper system pass 2: shared hierarchy for the long-lived product pages. */
button { min-height: 44px; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
.topbar h1, .subpage-header h1 { font-size: clamp(30px, 8vw, 32px); }
.tabs { z-index: 10; padding-top: 7px; }
.tab { position: relative; display: grid; min-height: 57px; place-items: center; gap: 1px; padding: 4px 1px 2px; font-size: 13px; font-weight: 500; }
.tab i { display: grid; width: 27px; height: 25px; place-items: center; transition: transform .18s ease; }
.tab svg { width: 25px; height: 25px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tab span { line-height: 1.2; }
.tab::after { position: absolute; bottom: -1px; left: 50%; width: 0; height: 2px; border-radius: 99px; background: var(--olive); content: ''; transform: translateX(-50%) rotate(-1deg); transition: width .18s ease; }
.tab.is-active::after { width: 21px; }
.tab.is-active i { transform: translateY(-2px); }

.subpage-header { position: sticky; z-index: 5; top: 0; margin: calc(-1 * max(16px, env(safe-area-inset-top))) -20px 0; padding: max(14px, env(safe-area-inset-top)) 20px 12px; border-bottom: 1px solid rgba(220,214,202,.75); background: rgba(248,246,240,.94); backdrop-filter: blur(14px); }
.subpage-header .back-button { min-height: 34px; margin-bottom: 3px; padding: 2px 0; font-size: 14px; }
.subpage-header h1 { font-family: "Kaiti SC", "STKaiti", serif; font-weight: 500; }
.subpage-main { padding: 21px 0 max(24px, env(safe-area-inset-bottom)); }
.subpage-intro { margin: -5px 0 18px; color: var(--muted); font-size: 14px; line-height: 1.55; }

.profile-intro { margin: -2px 0 22px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.profile-directory { border-top: 1px solid var(--line); }
.profile-directory + .profile-directory { margin-top: 25px; }
.profile-row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 14px; min-height: 72px; padding: 14px 1px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.profile-row > span { min-width: 0; }
.profile-row strong, .profile-row small { display: block; }
.profile-row strong { font-size: 17px; line-height: 1.3; }
.profile-row small { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.profile-row > b { color: var(--olive); font-size: 24px; font-weight: 400; }
.profile-row.profile-row-split { padding: 0; }
.profile-row.profile-row-split > button:first-child { display: flex; flex: 1; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 14px 1px; border: 0; background: transparent; text-align: left; }
.profile-row.profile-row-split > button:first-child span { min-width: 0; }
.profile-row.profile-row-split > button:first-child strong, .profile-row.profile-row-split > button:first-child small { display: block; }
.profile-row.profile-row-split > button:first-child small { margin-top: 5px; color: var(--muted); font-size: 13px; }
.profile-inline-action { flex: 0 0 auto; min-height: 38px; padding: 7px 9px; border: 1px solid #ccd4a9; border-radius: 8px; background: var(--soft-olive); color: var(--olive); font-size: 12px; }
.profile-section-title { margin: 26px 0 7px; color: var(--muted); font-family: "Kaiti SC", "STKaiti", serif; font-size: 19px; font-weight: 500; }

.meal-export-range { margin: 18px 0 20px; }
.meal-export-range label { margin-top: 0; }
.meal-export-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.meal-export-heading strong { font-size: 14px; font-weight: 650; }
.meal-export-heading > div { display: flex; gap: 8px; }
.meal-export-heading button { min-height: 36px; padding: 5px 8px; border: 0; background: transparent; color: var(--olive); font-size: 13px; }
.meal-export-count { margin: 2px 0 8px !important; }
.meal-export-days { max-height: 32dvh; overflow-y: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.meal-export-row { padding: 9px 3px; border-bottom: 1px solid var(--line); }
.meal-export-row:last-child { border-bottom: 0; }
.meal-export-day { display: flex; align-items: center; gap: 11px; min-height: 38px; margin: 0; }
.meal-export-day input { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; accent-color: var(--olive); }
.meal-export-day span { display: grid; gap: 2px; }
.meal-export-day strong { color: var(--ink); font-size: 14px; font-weight: 550; }
.meal-export-day small { color: var(--muted); font-size: 12px; }
.meal-export-partial { display: flex; align-items: center; gap: 7px; margin: 3px 0 0 31px; color: var(--muted); font-size: 13px; }
.meal-export-partial input { width: 17px; height: 17px; margin: 0; accent-color: var(--olive); }
.meal-export-partial:has(input:disabled) { opacity: .45; }
.meal-export-privacy { margin: 12px 0 0 !important; font-size: 11px !important; }
[data-meal-export-panel] button:disabled { opacity: .45; cursor: not-allowed; }

.library-page { padding: 21px 0 max(24px, env(safe-area-inset-bottom)); }
.library-page .library-page-tools { position: sticky; z-index: 4; top: 89px; margin: -21px -20px 0; padding: 14px 20px 11px; border-bottom: 1px solid var(--line); background: rgba(248,246,240,.96); backdrop-filter: blur(12px); }
.library-page .library-search { margin: 0; font-size: 16px; }
.library-page .food-add-single { margin: 0 0 11px; padding: 12px 14px; }
.library-page .food-library-cleanup { width: 100%; margin: -2px 0 11px; padding: 10px 13px; color: var(--olive); }
.cleanup-preview { display: grid; gap: 9px; margin: 16px 0; padding: 0; list-style: none; }
.cleanup-preview li { display: grid; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cleanup-preview strong { font-size: 14px; }
.cleanup-preview small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.cleanup-section-title { margin: 24px 0 6px; font-size: 16px; }
.cleanup-candidates { display: grid; gap: 10px; margin: 14px 0 18px; }
.cleanup-candidate { display: grid; gap: 7px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #fffdf8; }
.cleanup-candidate > strong { font-size: 14px; line-height: 1.4; }
.cleanup-candidate > strong span { color: var(--muted); font-weight: 400; }
.cleanup-candidate > small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.cleanup-candidate-actions { display: grid; gap: 7px; margin-top: 2px; }
.cleanup-candidate-actions .secondary { width: 100%; margin: 0; padding: 9px 10px; font-size: 13px; }
.cleanup-undo { margin-top: 8px; color: var(--olive); }
.library-search-wrap { margin: 0; }
.library-search-wrap > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.library-search-control { position: relative; }
.library-search-control .library-search { padding-right: 58px; }
.library-search-control button { position: absolute; top: 50%; right: 8px; min-height: 34px; padding: 5px 8px; border: 0; background: transparent; color: var(--olive); font-size: 12px; transform: translateY(-50%); }
.library-flat-results { margin-top: 16px; border-top: 1px solid var(--line); }
.library-flat-result { display: flex; width: 100%; min-height: 68px; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 1px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.library-flat-result span { min-width: 0; }
.library-flat-result strong, .library-flat-result small { display: block; }
.library-flat-result strong { overflow: hidden; font-size: 16px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.library-flat-result small { margin-top: 4px; color: var(--muted); font-size: 12px; }
.library-flat-result b { flex: 0 0 auto; color: var(--olive); font-size: 12px; font-weight: 500; }
.library-intro { margin: 18px 0 2px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.library-page .saved-food-list { border: 0; border-radius: 0; }
.library-page .saved-food { min-height: 65px; padding: 13px 0; }
.library-page .library-group { padding-top: 22px; }
.library-page .library-group > summary { min-height: 44px; font-size: 18px; }

.food-picker-label { display: block; margin-top: 15px; color: #595449; font-size: 13px; }
.food-picker { position: relative; margin-top: 6px; }
.food-picker-selected { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px 10px 0 0; background: var(--paper); }
.food-picker-selected span { min-width: 0; }
.food-picker-selected strong, .food-picker-selected small { display: block; }
.food-picker-selected strong { overflow: hidden; color: var(--ink); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.food-picker-selected small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.food-picker-selected b { flex: 0 0 auto; color: var(--olive); font-size: 11px; font-weight: 600; }
.food-picker-search { width: 100%; margin: -1px 0 0; padding: 12px; border: 1px solid var(--line); border-radius: 0 0 10px 10px; background: white; color: var(--ink); font-size: 16px; }
.food-picker-results { max-height: min(40svh, 330px); overflow-y: auto; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; background: white; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.food-picker-option { display: flex; width: 100%; min-height: 58px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); background: white; text-align: left; }
.food-picker-option:last-of-type { border-bottom: 0; }
.food-picker-option span { min-width: 0; }
.food-picker-option strong, .food-picker-option small { display: block; }
.food-picker-option strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.food-picker-option small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.food-picker-option b { flex: 0 0 auto; color: var(--olive); font-size: 11px; font-weight: 500; }
.food-picker-empty { margin: 0 !important; padding: 13px 12px; color: var(--muted); font-size: 12px !important; }
.compact-form-section { margin-top: 16px; padding: 14px 0 5px; border-top: 1px dashed var(--line); border-bottom: 0; }
.compact-form-section legend { font-size: 17px; }
.energy-conversion { min-height: 18px; margin: 6px 1px 0 !important; color: var(--olive); font-size: 12px !important; }

.recipe-detail-page { padding-bottom: env(safe-area-inset-bottom); }
.recipe-detail-page .recipe-detail { padding-top: 2px; }
.recipe-detail-page .recipe-detail-actions { margin-top: 16px; padding: 16px 0 calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }

.meal-entry > summary { min-height: 62px; padding-right: 4px; }
.entry-edit { width: auto; min-height: 40px; padding: 7px 1px; }
.meal-record-trigger { min-height: 44px; }

.fridge-group { border-top: 0; }
.fridge-group + .fridge-group { margin-top: 4px; padding-top: 7px; border-top: 1px solid var(--line); }
.fridge-group > summary { display: flex; min-height: 48px; align-items: center; justify-content: space-between; list-style: none; }
.fridge-group > summary::-webkit-details-marker { display: none; }
.fridge-group > summary::after { color: var(--muted); content: '⌄'; transition: transform .18s ease; }
.fridge-group[open] > summary::after { transform: rotate(180deg); }
.fridge-group-heading { flex: 1; padding: 0; }
.fridge-group-heading h2 { font-size: 21px; }
.soon-item { width: 100%; padding: 4px 0; border: 0; background: transparent; text-align: left; }
.soon-item b { font-size: 14px; }
.inventory-row { min-height: 67px; padding: 13px 1px; }
.inventory-row > span { min-width: 0; }
.inventory-row b { color: var(--ink); }
.shopping-empty { padding: 54px 0 28px; text-align: left; }
.shopping-empty h2 { margin-bottom: 8px; font-family: "Kaiti SC", "STKaiti", serif; font-size: 23px; font-weight: 500; }
.shopping-empty p { color: var(--muted); font-size: 14px; line-height: 1.55; }
.shopping-empty-actions { display: grid; gap: 8px; margin-top: 20px; }
.shopping-empty-actions .secondary { margin-top: 0; }
.shopping-empty .quiet-action { width: 100%; margin-top: 7px; padding: 11px; border: 0; background: transparent; color: var(--olive); font-size: 13px; text-align: center; }

.form-section { margin: 19px 0 0; padding: 0 0 20px; border: 0; border-bottom: 1px dashed var(--line); }
.form-section legend { padding: 0; color: var(--olive); font-family: "Kaiti SC", "STKaiti", serif; font-size: 20px; }
.form-section-quiet { padding-bottom: 12px; color: var(--muted); }
.form-section-quiet legend { color: var(--muted); font-size: 17px; }
.form-sticky-actions { padding-bottom: 3px; }

.decision-recipe { padding: 16px 1px 18px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.decision-recipe.almost, .decision-recipe.missing { border-color: var(--line); background: transparent; }
.decision-recipe h2 { font-size: 22px; }
.decision-actions { display: flex; gap: 9px; margin-top: 14px; }
.decision-primary, .decision-shopping { min-height: 42px; margin: 0; padding: 9px 12px; border-radius: 9px; font-size: 13px; }
.decision-primary { flex: 1; border: 0; background: var(--olive); color: white; font-weight: 700; }
.decision-shopping { flex: 0 0 auto; }
.decision-empty-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.decision-empty-actions .secondary { margin: 0; padding: 12px 8px; }

.stats-page .filter-row { margin-top: -3px; }
.stats-summary { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.stats-summary > div { min-height: 84px; padding: 15px 13px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats-summary small, .stats-summary strong { display: block; }
.stats-summary small { color: var(--muted); font-size: 12px; }
.stats-summary strong { margin-top: 8px; font-size: 23px; letter-spacing: -.035em; }
.stats-summary em { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 500; letter-spacing: 0; }
.stats-note { margin: 12px 1px 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.paper-chart-section { padding: 28px 0 24px; border-bottom: 1px dashed var(--line); }
.section-title-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.section-title-line h2, .stats-days h2 { margin: 0; font-family: "Kaiti SC", "STKaiti", serif; font-size: 22px; font-weight: 500; }
.section-title-line small { color: var(--muted); font-size: 11px; text-align: right; }
.nutrition-chart { display: flex; height: 160px; align-items: end; gap: 10px; padding: 6px 4px 22px; border-bottom: 1px solid var(--line); }
.nutrition-chart.is-long { gap: 3px; overflow-x: auto; }
.nutrition-bar { position: relative; flex: 1 0 25px; height: 100%; }
.nutrition-chart.is-long .nutrition-bar { flex-basis: 9px; }
.nutrition-bar i { position: absolute; z-index: 1; right: 20%; bottom: 0; left: 20%; min-height: 1px; background: var(--olive); opacity: .82; }
.nutrition-bar .target-band { position: absolute; right: 2px; left: 2px; border-top: 1px dashed rgba(118,128,82,.5); border-bottom: 1px dashed rgba(118,128,82,.5); background: rgba(202,211,162,.25); }
.nutrition-bar small { position: absolute; right: 0; bottom: -19px; left: 0; color: var(--muted); font-size: 10px; text-align: center; }
.weight-chart { display: block; width: 100%; height: auto; }
.weight-chart line { stroke: var(--line); }
.weight-chart polyline { fill: none; stroke: var(--olive); stroke-width: 2; }
.weight-chart circle { fill: var(--paper); stroke: var(--olive); stroke-width: 2; }
.stats-days { padding-top: 26px; }
.stats-days > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.stats-days small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Paper system pass 3: calmer editorial rhythm, fewer containers, clearer handwriting accents. */
.topbar { align-items: flex-end; padding: 9px 0 19px; }
.topbar h1, .subpage-header h1 { font-size: clamp(30px, 8vw, 32px); line-height: 1.12; letter-spacing: .015em; }
.eyebrow { margin-bottom: 6px; color: #777165; font-size: 12px; letter-spacing: .045em; }
.header-text-button { min-height: 40px; padding: 7px 2px; font-size: 13px; }
.header-text-button + .header-text-button { margin-left: 4px; }
.recipe-import-action { padding-inline: 9px; border-color: #cbd1ae; border-radius: var(--radius-control); background: rgba(238,241,223,.72); }

button { -webkit-tap-highlight-color: transparent; }
button:active { transform: translateY(1px); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid rgba(114,124,79,.62); outline-offset: 2px; }
.icon-button, .date-input { border-color: #d4cfc3; background: rgba(255,255,255,.18); }
.icon-button { color: #5e5a51; font-size: 22px; }
.day-type-button { margin: -2px 0 6px; padding: 9px 2px 11px; border: 0; border-bottom: 1px dashed var(--line-strong); border-radius: 0; background: transparent; }
.day-type-button span { margin-left: 2px; }

.summary.daily-summary { margin: 0; padding: 19px 2px 15px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.daily-summary .summary-primary { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 20px; }
.daily-summary .kcal strong { font-size: 45px; font-weight: 680; line-height: .88; }
.daily-summary .kcal span { font-size: 14px; }
.daily-summary .kcal small { margin-top: 6px; }
.daily-summary .protein-total { padding-left: 16px; border-left-color: var(--line-strong); }
.daily-summary .protein-total strong { font-size: 24px; }
.daily-summary .summary-secondary { margin-top: 18px; padding-top: 10px; border-top-color: var(--line); font-size: 13px; }

.decision-link { position: relative; margin: 13px -5px 1px; padding: 13px 7px 12px; border-top: 1px dashed #d1cabd; border-bottom: 1px dashed #d1cabd; background: linear-gradient(90deg, rgba(238,241,223,.72), rgba(238,241,223,.18) 72%, transparent); }
.decision-link span { font-family: var(--font-script); font-size: 20px; }
.decision-link small { padding-left: 12px; text-align: right; }

.meal { padding: 23px 0 10px; border-bottom: 0; }
.meal::after { display: block; width: 96%; height: 1px; margin-top: 10px; background: repeating-linear-gradient(90deg, #cfc8bb 0 4px, transparent 4px 8px); content: ''; opacity: .72; transform: rotate(-.18deg); }
.meal:nth-of-type(even)::after { width: 91%; margin-left: 4%; transform: rotate(.22deg); }
.meal.is-empty { padding: 18px 0 7px; }
.meal-heading h2 { font-family: var(--font-script); font-size: 24px; }
.meal-heading span { font-size: 13px; }
.meal-entry > summary { min-height: 60px; padding: 12px 1px; border-bottom-color: rgba(217,212,200,.88); }
.meal-entry > summary strong { font-size: 16px; font-weight: 650; }
.meal-entry > summary b { font-size: 14px; font-weight: 600; }
.meal-entry-content { padding: 13px 1px 4px; }
.entry-foods li { padding-block: 4px; }
.meal-record-trigger { margin-top: 7px; padding: 9px 2px 2px; }

.sheet { border-radius: 18px 18px 0 0; background: var(--paper); box-shadow: 0 -12px 36px rgba(43,40,31,.14); }
.sheet-header, .sheet h2 { background: rgba(250,249,244,.98); }
.sheet h2 { font-family: var(--font-script); font-size: 27px; }
.sheet p { font-size: 14px; }
.record-sheet-panel .sheet-header,
.record-entry-panel .sheet-header { padding-bottom: 2px; }
.record-sheet-panel .sheet-content,
.record-entry-panel .sheet-content { padding-bottom: 24px; }
.record-sheet-intro { position: relative; margin: 2px 0 20px; padding: 13px 12px 15px 70px; background: rgba(235,229,215,.58); transform: rotate(-.25deg); }
.record-sheet-intro::after { position: absolute; right: 12px; bottom: 9px; width: 48px; height: 7px; border-radius: 50%; background: rgba(223,183,57,.36); content: ''; transform: rotate(-2deg); }
.record-sheet-intro > span { position: absolute; top: 14px; left: 13px; padding: 4px 8px 3px; background: #d99a86; font-family: var(--font-script); font-size: 15px; transform: rotate(-1.5deg); }
.record-sheet-intro p { margin: 0; color: var(--ink); font-family: var(--font-script); font-size: 20px; line-height: 1.3; }
.record-sheet-intro small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.record-methods { display: grid; gap: 8px; margin-top: 0; }
.record-methods .choice { position: relative; display: grid; min-height: 78px; grid-template-columns: 45px minmax(0,1fr) 12px; grid-template-rows: auto auto; column-gap: 12px; align-content: center; margin: 0; padding: 12px 7px 12px 4px; border: 0; border-bottom: 1px solid rgba(142,132,112,.22); border-radius: 0; background: transparent; }
.record-methods .choice:nth-child(2n) { transform: rotate(.12deg); }
.record-method-tag { grid-row: 1 / 3; align-self: center; padding: 5px 4px 4px; background: rgba(229,215,181,.72); font-family: var(--font-script); font-size: 13px; text-align: center; transform: rotate(-1.8deg); }
.record-methods .choice:nth-child(2) .record-method-tag { background: rgba(213,220,190,.7); transform: rotate(1deg); }
.record-methods .choice:nth-child(3) .record-method-tag { background: rgba(213,220,226,.68); }
.record-methods .choice:nth-child(4) .record-method-tag { background: rgba(218,178,163,.55); transform: rotate(.8deg); }
.record-methods .choice strong { grid-column: 2; align-self: end; font-family: var(--font-script); font-size: 17px; font-weight: 500; }
.record-methods .choice small { grid-column: 2; display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.record-methods .choice > b { grid-column: 3; grid-row: 1 / 3; align-self: center; font-size: 20px; font-weight: 300; }
.add-more-options { margin-top: 18px; }
.add-more-options > summary { padding: 8px 2px; color: #777168; font-family: var(--font-script); font-size: 15px; }
.add-more-options > .choice { margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.record-cancel,
.record-back { display: block; width: 100%; margin-top: 12px; padding: 9px 4px; border: 0; background: transparent; color: #777168; text-align: center; }
.record-back { width: max-content; margin: 14px auto 0; border-bottom: 1px solid rgba(114,124,79,.45); color: var(--olive); font-size: 12px; }
.record-cancel { font-size: 12px; }
.record-entry-head { margin: 2px 0 20px; padding: 4px 2px 13px; border-bottom: 1px solid rgba(142,132,112,.22); }
.record-entry-head > span { display: inline-block; padding: 4px 10px 3px; background: rgba(218,178,163,.62); font-family: var(--font-script); font-size: 14px; transform: rotate(-1deg); }
.record-entry-head p { display: inline; margin-left: 9px; color: var(--ink); font-family: var(--font-script); font-size: 18px; }
.record-entry-form .food-picker-label { margin-top: 0; font-family: var(--font-script); font-size: 16px; }
.record-entry-form .food-picker-selected { min-height: 62px; padding: 12px 13px; border-color: rgba(142,132,112,.32); border-radius: 2px 2px 0 0; background: rgba(245,241,231,.72); }
.record-entry-form .food-picker-search { border-color: rgba(142,132,112,.32); border-radius: 0 0 2px 2px; background: rgba(255,255,255,.42); }
.record-basis-note { margin: 8px 2px 0 !important; font-size: 11px !important; }
.record-fields { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: 12px; }
.record-entry-form label { color: #5c584f; }
.record-entry-form input,
.record-entry-form select { min-height: 48px; border-color: rgba(142,132,112,.32); border-radius: 2px; background: rgba(255,255,255,.48); }
.record-save { min-height: 52px; border-radius: 0; background: transparent url('./assets/today/record-button-paint.webp') center / 100% 100% no-repeat; color: #26261f; font-family: var(--font-script); font-size: 18px; font-weight: 500; }
.primary, .secondary, .choice, input, select, textarea { border-radius: var(--radius-control); }

.tabs { padding: 6px 10px max(8px, env(safe-area-inset-bottom)); border-top-color: rgba(192,185,171,.78); background: rgba(250,249,244,.965); }
.tab { min-height: 70px; gap: 1px; padding: 2px 0 1px; color: #6f6a5f; font-size: 13px; }
.tab i { display: grid; width: 48px; height: 42px; place-items: center; }
.tab-art { display: block; width: auto; height: auto; max-width: none; object-fit: contain; opacity: .72; filter: grayscale(.38) saturate(.7); transition: opacity .16s ease, filter .16s ease, transform .16s ease; }
.tab-art-today { width: 39px; height: 39px; }
.tab-art-fridge { width: 40px; height: 43px; }
.tab-art-recipes { width: 46px; height: 39px; }
.tab-art-shopping { width: 44px; height: 40px; }
.tab-art-profile { width: 39px; height: 42px; }
.tab span { font-family: var(--font-script); font-size: 15px; line-height: 1; letter-spacing: .02em; }
.tab::after { bottom: -1px; height: 2px; }
.tab.is-active::after { width: 23px; }
.tab.is-active i { transform: translateY(-1px); }
.tab.is-active .tab-art { opacity: 1; filter: none; transform: scale(1.02); }

.filter-row { gap: 8px; margin-bottom: 18px; padding-bottom: 1px; }
.filter-button { min-height: 38px; padding: 7px 13px; border-color: #d6d0c4; background: rgba(255,255,255,.12); font-size: 13px; }
.filter-button.is-active { border-color: #c7cfaa; background: rgba(238,241,223,.76); }
.fab { width: 52px; height: 52px; background: #727c4f; box-shadow: 0 8px 18px rgba(80,87,52,.24); }

.soon-row { margin: 1px 0 20px; padding: 13px 12px 12px 14px; border-left: 2px solid var(--olive); background: linear-gradient(90deg, rgba(238,241,223,.68), rgba(243,241,232,.42)); }
.soon-row > strong { font-family: var(--font-script); font-size: 17px; font-weight: 500; }
.soon-item { padding: 6px 0 4px; }
.soon-item + .soon-item { border-top: 1px dashed rgba(187,180,165,.65); }
.fridge-group { position: relative; padding-left: 9px; }
.fridge-group::before { position: absolute; top: 14px; bottom: 12px; left: 0; width: 1px; background: rgba(114,124,79,.28); content: ''; }
.fridge-group + .fridge-group { margin-top: 7px; padding-top: 8px; }
.fridge-group-heading h2 { font-family: var(--font-script); font-size: 22px; font-weight: 500; }
.fridge-group-heading span { margin-right: 8px; font-size: 12px; }
.inventory-row { min-height: 65px; padding: 12px 1px; }
.inventory-row strong { font-size: 16px; }
.inventory-row small { margin-top: 4px; font-size: 12px; }

.shopping-empty { padding-top: 42px; }
.shopping-empty-illustration { width: 82px; height: 54px; margin: 0 0 22px 2px; fill: none; stroke: var(--olive); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .78; transform: rotate(-1deg); }
.shopping-empty h2 { font-family: var(--font-script); font-size: 24px; }
.shopping-empty .secondary { border-color: #cbc4b6; background: rgba(255,255,255,.18); }
.shopping-row { min-height: 68px; }

.library-search { border-color: #d4cec2; background: rgba(255,255,255,.62); }
.recipe-detail-hero { padding-top: 13px; }
.recipe-detail-title { font-size: clamp(27px, 7.4vw, 34px); font-weight: 700; line-height: 1.16; }
.recipe-detail-tags span { border-style: dashed; border-radius: 6px; }
.recipe-section-heading h3 { font-family: var(--font-script); font-size: 24px; }
.recipe-section-kicker { letter-spacing: .08em; }

.profile-row strong { font-size: 17px; font-weight: 650; }
.profile-section-title { font-family: var(--font-script); font-size: 20px; }
.library-page .library-page-tools { background: rgba(250,249,244,.97); }
.library-page .food-add-single { border-radius: var(--radius-control); }
.library-intro { margin-top: 20px; padding-bottom: 15px; border-bottom: 1px dashed var(--line); }
.library-page .library-group > summary { font-family: var(--font-script); font-size: 21px; font-weight: 500; }
.library-page .saved-food { min-height: 66px; padding: 13px 1px; }
.saved-food > span { min-width: 0; }
.saved-food strong { display: block; overflow: hidden; font-size: 16px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.saved-food span small { display: block; margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.saved-food > small { flex: 0 0 auto; font-size: 11px; }
.library-flat-results { border-top-color: var(--line-strong); }
.library-flat-result { min-height: 70px; }
.library-flat-result b { padding: 3px 6px; border: 1px dashed #cbd1ae; border-radius: 4px; }

.stats-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); border: 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.stats-summary > div { min-height: 92px; padding: 14px 8px 13px; border: 0; }
.stats-summary > div + div { border-left: 1px dashed var(--line); }
.stats-summary small { min-height: 31px; font-size: 11px; line-height: 1.35; }
.stats-summary strong { margin-top: 5px; font-size: clamp(18px, 5.3vw, 23px); }
.stats-summary em { display: block; margin-top: 2px; font-size: 10px; }
.stats-note { margin-top: 14px; font-size: 13px; }
.section-title-line h2, .stats-days h2 { font-family: var(--font-script); font-size: 23px; }
.nutrition-chart { height: 174px; gap: 12px; padding-inline: 5px; }
.nutrition-bar i { right: 27%; left: 27%; border-radius: 1px 1px 0 0; opacity: .76; transform: rotate(.25deg); }
.nutrition-bar:nth-child(even) i { transform: rotate(-.35deg); }
.nutrition-bar .target-band { right: 0; left: 0; border-color: rgba(114,124,79,.38); background: repeating-linear-gradient(135deg, rgba(202,211,162,.18) 0 3px, rgba(202,211,162,.34) 3px 4px); }
.nutrition-bar small { bottom: -20px; font-size: 11px; }
.weight-chart polyline { stroke-width: 1.8; }
.weight-chart circle { r: 3.2; }

@media (max-width: 360px) {
  #app { padding-inline: 17px; }
  .daily-summary .kcal strong { font-size: 41px; }
  .tab span { font-size: 14px; }
  .stats-summary > div { padding-inline: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .tab.is-active .tab-cat, .tab.is-active .cat-glasses, .tab.is-active .tab-object { animation: none !important; }
}

/* Today page: naive editorial / hand-journal visual system. */
#app.is-today-page {
  --today-ink: #26354f;
  --today-paper: #f7f4ec;
  --today-line: rgba(96, 88, 75, .17);
  --today-mustard: #dfb83e;
  --today-clay: #bd715d;
  --today-olive: #9da66b;
  padding-inline: 16px;
  background-color: var(--today-paper);
  background-image: radial-gradient(rgba(80, 68, 47, .035) .42px, transparent .62px);
  background-size: 10px 10px;
  color: #17191d;
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
}

.today-page { padding: 0 0 20px; }
.today-page button, .today-page input { font-family: var(--font-ui); }
.today-date-title strong,
.today-target-type b,
.today-total-copy > span,
.today-decision strong,
.today-meal-meta h2,
.today-footer-scene > p {
  font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
}

.today-datebar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 0 0 10px;
}
.today-date-spacer { width: 36px; height: 36px; }
.today-date-title { min-width: 0; text-align: center; }
.today-date-title strong { display: inline-block; position: relative; font-size: 18px; font-weight: 400; letter-spacing: .06em; white-space: nowrap; }
.today-date-title strong::after { position: absolute; right: -2px; bottom: -6px; left: -2px; height: 5px; background: transparent url("./assets/today/underline-stroke-v2.webp") center / 100% 100% no-repeat; content: ''; }
.today-date-title span { display: block; margin-top: 7px; color: #7f786c; font-size: 10px; letter-spacing: .04em; }
.today-date-actions { display: flex; justify-content: flex-end; }
.today-calendar {
  display: grid;
  position: relative;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  background: transparent url("./assets/today/meal-label-paper.webp") center / 100% 100% no-repeat;
  cursor: pointer;
}
.today-calendar img { display: block; width: 20px; height: 20px; object-fit: contain; }
.today-calendar input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }

.today-target-card {
  display: grid;
  width: 100%;
  min-height: 76px;
  grid-template-columns: 1.05fr 1.16fr .79fr;
  align-items: center;
  margin-top: 4px;
  padding: 10px 7px;
  border: 1px solid rgba(88, 77, 64, .11);
  border-radius: 12px;
  background: rgba(255, 252, 246, .34);
  box-shadow: none;
  text-align: left;
}
.today-target-card > span { display: grid; min-width: 0; gap: 2px; padding: 0 8px; }
.today-target-card > span + span { border-left: 1px solid var(--today-line); text-align: center; }
.today-target-card strong { font-size: 15px; font-weight: 500; letter-spacing: -.015em; white-space: nowrap; }
.today-target-card small { color: #69645b; font-size: 10px; line-height: 1.25; white-space: nowrap; }
.today-target-card .today-target-type { grid-template-columns: 38px minmax(0, 1fr); align-items: center; padding-left: 1px; }
.today-target-type img { width: 34px; height: 34px; padding: 6px; border-radius: 47% 53% 49% 45%; background: #e8dfd1; object-fit: contain; }
.today-target-type b { font-size: 14px; font-weight: 400; }
.today-target-type.day-active b { font-size: 11.5px; line-height: 1.2; }

.day-target-intro { margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.day-target-section { display: grid; gap: 9px; margin: 0 0 14px; padding: 13px 12px 12px; border: 1px solid var(--line); border-radius: 12px; }
.day-target-section legend { padding: 0 5px; color: var(--ink); font-size: 15px; font-weight: 700; }
.goal-range { display: grid; grid-template-columns: 72px minmax(0, 1fr) 12px minmax(0, 1fr); align-items: center; gap: 6px; }
.goal-range > span { color: var(--muted); font-size: 12px; }
.goal-range > i { color: var(--muted); font-style: normal; text-align: center; }
.goal-range input { min-width: 0; padding: 9px 7px; text-align: center; }

.today-total { position: relative; min-height: 204px; margin-top: 0; overflow: hidden; }
.today-total-copy { position: relative; z-index: 1; width: 52%; padding: 34px 0 0 8px; }
.today-total-copy > span { font-size: 16px; letter-spacing: .07em; }
.today-total-copy > div { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; }
.today-total-copy strong { min-width: 72px; font-size: clamp(56px, 14vw, 60px); font-weight: 450; line-height: .95; letter-spacing: -.05em; }
.today-total-copy div small { font-size: 16px; }
.today-kcal-status { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; color: #555249; font-size: 11px; line-height: 1.35; white-space: nowrap; }
.today-kcal-status i { display: inline-grid; flex: 0 0 18px; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: #e3bd4d; font-style: normal; }
.today-kcal-status i::after { color: white; content: '✓'; font-size: 11px; font-weight: 800; }
.today-kcal-status.is-below i { background: #a8ad86; }
.today-kcal-status.is-below i::after { content: '·'; font-size: 18px; line-height: 10px; }
.today-kcal-status.is-above i { background: var(--today-clay); }
.today-kcal-status.is-above i::after { content: '!'; }
.today-hero-art { position: absolute; right: -1px; bottom: 2px; width: 62%; max-height: 145px; object-fit: contain; object-position: right bottom; }

.today-nutrition {
  display: grid;
  min-height: 96px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 12px 3px 11px;
  border: 1px solid rgba(88, 77, 64, .12);
  border-radius: 12px;
  background: rgba(255, 252, 246, .32);
}
.today-nutrient { display: flex; min-width: 0; flex-direction: column; justify-content: flex-start; padding: 0 7px; }
.today-nutrient + .today-nutrient { border-left: 1px solid var(--today-line); }
.today-nutrient > span { font-size: 12px; }
.today-nutrient strong { margin-top: 5px; font-size: 18px; font-weight: 520; line-height: 1; letter-spacing: -.035em; white-space: nowrap; }
.today-nutrient strong small { margin-left: 1px; font-size: 9px; font-weight: 500; }
.today-nutrient em { margin-top: 3px; color: #817a70; font-size: 9px; font-style: normal; line-height: 1; white-space: nowrap; }
.today-nutrient > i { display: block; height: 5px; margin-top: 9px; overflow: hidden; border-radius: 10px; background: #ddd9d2; }
.today-nutrient > i b { display: block; height: 100%; border-radius: inherit; background: var(--today-clay); }
.today-nutrient.carbs > i b { background: var(--today-mustard); }
.today-nutrient.fat > i b { background: var(--today-ink); }
.today-nutrient.nutrient-sodium > i b { background: #979087; }
.today-macro-note { margin: 6px 4px 0; color: #777166; font-size: 9px; line-height: 1.45; }

.today-decision {
  display: grid;
  width: 100%;
  min-height: 86px;
  grid-template-columns: minmax(0, 1fr) 80px 80px;
  align-items: center;
  margin-top: 14px;
  padding: 12px 10px 12px 16px;
  border: 0;
  background: transparent url("./assets/today/decision-paper-v2.webp") center / 100% 100% no-repeat;
  text-align: left;
}
.today-decision span { display: grid; gap: 4px; }
.today-decision strong { position: relative; width: max-content; font-size: 22px; font-weight: 400; letter-spacing: .035em; }
.today-decision strong::after { position: absolute; right: -3px; bottom: -5px; left: -3px; height: 5px; background: transparent url("./assets/today/underline-stroke-v2.webp") center / 100% 100% no-repeat; content: ''; }
.today-decision small { color: #4d4a43; font-size: 10px; line-height: 1.35; }
.today-decision img { width: 70px; height: 56px; object-fit: contain; }
.today-decision > b { display: grid; width: 42px; height: 38px; justify-self: end; place-items: center; background: transparent url("./assets/today/record-button-paint.webp") center / 100% 100% no-repeat; font-size: 27px; font-weight: 300; line-height: 1; }

.today-meals { margin-top: 14px; border-top: 1px solid var(--today-line); }
.today-meal {
  display: grid;
  position: relative;
  min-height: 60px;
  grid-template-columns: 78px minmax(0, 1fr) 90px;
  align-items: center;
  padding-right: 12px;
  padding-left: 8px;
}
.today-meal::after { position: absolute; right: 1px; bottom: 0; left: 1px; height: 1px; background: var(--today-line); content: ''; transform: rotate(-.12deg); }
.today-meal:nth-child(even)::after { transform: rotate(.12deg); }
.today-meal-meta { align-self: start; padding: 9px 4px 7px; }
.today-meal-meta h2 { display: inline-block; min-width: 52px; margin: 0; padding: 4px 9px 3px; background: transparent url("./assets/today/meal-label-paper.webp") center / 100% 100% no-repeat; font-size: 14px; font-weight: 400; text-align: center; white-space: nowrap; transform: rotate(-1deg); }
.today-meal:nth-child(4n + 1) .today-meal-meta h2 { background-image: url("./assets/today/meal-label-clay.webp"); }
.today-meal:nth-child(4n + 3) .today-meal-meta h2 { transform: rotate(1deg); }
.today-meal-meta time { display: block; margin: 4px 0 0 8px; font-size: 10px; }
.today-meal-body { min-width: 0; padding: 4px 7px; }
.today-meal-empty { margin: 0; color: #5e5a53; font-size: 13px; white-space: nowrap; }
.today-meal-add { width: 62px; min-width: 62px; min-height: 38px; justify-self: start; padding: 6px 8px; border: 0; background: transparent url("./assets/today/record-button-paint.webp") center / 100% 100% no-repeat; font-size: 12px; white-space: nowrap; transform: rotate(-.5deg); }
.today-meal.has-records .today-meal-add { width: 58px; min-width: 58px; min-height: 34px; align-self: start; margin-top: 8px; padding: 5px 7px; color: #39362f; font-size: 11px; text-decoration: none; }

.today-meal-entry { margin: 0; padding: 0; border: 0; }
.today-meal-entry + .today-meal-entry { border-top: 1px dashed rgba(92, 83, 71, .2); }
.today-meal-entry > summary { display: grid; min-height: 38px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 0; border: 0; list-style: none; }
.today-meal-entry > summary::-webkit-details-marker { display: none; }
.today-meal-entry > summary::after { display: none; }
.today-meal-entry > summary > span { min-width: 0; }
.today-meal-entry > summary strong { display: block; overflow: hidden; color: #17191d; font-size: 13px; font-weight: 500; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.today-meal-entry > summary span small { display: block; margin-top: 2px; color: #8a8377; font-size: 8px; }
.today-meal-entry > summary > b { color: #2f3134; font-size: 11px; font-weight: 520; white-space: nowrap; }
.today-meal-entry > summary > b small { font-size: 8px; font-weight: 400; }
.today-meal-entry .meal-entry-content { margin: 0 0 7px; padding: 8px 0 3px; border-top: 1px dashed rgba(92, 83, 71, .18); font-family: var(--font-ui); }
.today-meal-entry .meal-entry-content h3 { margin: 0 0 5px; color: #8a8377; font-size: 9px; font-weight: 600; letter-spacing: .04em; }
.today-meal-entry .entry-range { margin-bottom: 6px; font-size: 9px; }
.today-meal-entry .entry-foods { gap: 2px; }
.today-meal-entry .entry-foods li { gap: 10px; padding: 2px 0; font-size: 11px; line-height: 1.4; }
.today-meal-entry .entry-foods b { font-size: 10px; font-weight: 500; }
.today-meal-entry .entry-source,
.today-meal-entry .entry-notes summary,
.today-meal-entry .entry-notes p { font-size: 10px; }
.today-meal-entry .entry-notes { margin-top: 7px; padding-top: 6px; }
.today-meal-entry .entry-edit {
  width: auto;
  min-height: 26px;
  margin-top: 5px;
  padding: 3px 1px;
  border: 0;
  background: transparent;
  color: #6f6759;
  font-size: 10px;
  text-decoration: underline;
  text-decoration-color: rgba(196, 157, 40, .7);
  text-underline-offset: 3px;
}

.today-footer-scene { position: relative; min-height: 96px; margin: 7px -5px 0; overflow: hidden; }
.today-footer-scene > img { position: absolute; bottom: 10px; left: -3px; width: 64%; max-height: 76px; object-fit: contain; object-position: left bottom; }
.today-footer-note { position: absolute; right: 5px; bottom: -1px; width: 118px; height: 86px; transform: rotate(-1deg); }
.today-footer-note > img { display: block; width: 100%; height: 100%; object-fit: fill; }
.today-footer-note > p { position: absolute; inset: 17px 13px 10px 17px; margin: 0; color: #302e29; font-family: "Kaiti SC", "STKaiti", "KaiTi", serif; font-size: 10px; line-height: 1.42; letter-spacing: .015em; }

.is-today-page .tabs { padding: 7px 10px max(8px, env(safe-area-inset-bottom)); font-family: var(--font-ui); }
.is-today-page .tab { font-size: 12px; font-weight: 500; }
.is-today-page .tab i { display: grid; height: 35px; place-items: center; }
.is-today-page .tab-art { width: 34px; height: 34px; opacity: .64; filter: grayscale(.28) saturate(.78); }
.is-today-page .tab-art-today { width: 36px; height: 36px; }
.is-today-page .tab-art-recipes,
.is-today-page .tab-art-shopping { width: 35px; height: 35px; }
.is-today-page .tab.is-active { color: var(--today-ink); }
.is-today-page .tab.is-active .tab-art { opacity: 1; filter: none; transform: none; }

@media (max-width: 389px) {
  #app.is-today-page { padding-inline: 14px; }
  .today-datebar { grid-template-columns: 42px minmax(0, 1fr) 42px; }
  .today-date-title strong { font-size: 17px; }
  .today-target-card { padding-inline: 5px; }
  .today-target-card > span { padding-inline: 6px; }
  .today-target-card strong { font-size: 13px; }
  .today-target-card small { font-size: 9px; }
  .today-total { min-height: 196px; }
  .today-total-copy { padding-left: 5px; }
  .today-total-copy strong { font-size: 56px; }
  .today-hero-art { right: -2px; width: 62%; max-height: 138px; }
  .today-nutrient { padding-inline: 5px; }
  .today-nutrient strong { font-size: 16px; }
  .today-decision { grid-template-columns: minmax(0, 1fr) 66px 70px; padding-left: 13px; }
  .today-decision img { width: 64px; height: 52px; }
  .today-decision strong { font-size: 20px; }
  .today-meal { grid-template-columns: 72px minmax(0, 1fr) 82px; }
  .today-meal-meta h2 { padding-inline: 6px; font-size: 13px; }
  .today-footer-scene > img { width: 62%; }
  .today-footer-note { right: 1px; width: 112px; height: 83px; }
  .today-footer-note > p { inset: 17px 12px 9px 16px; font-size: 9.5px; }
}

/* Fridge journal page ----------------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#app.is-fridge-page { padding: max(18px, env(safe-area-inset-top)) 24px calc(96px + env(safe-area-inset-bottom)); }
.fridge-page { --fridge-clay: #a67f78; --fridge-mustard: #d9b74a; --fridge-ink: #26364d; width: 100%; }
.fridge-hero { display: grid; position: relative; min-height: 128px; grid-template-columns: minmax(0, 1fr) 172px 28px; align-items: center; }
.fridge-hero > div:first-child { position: relative; z-index: 2; align-self: center; }
.fridge-hero p { margin: 0 0 4px 2px; color: #8a8378; font-size: 10px; letter-spacing: .08em; }
.fridge-hero h1 { color: #17191d; font-size: 31px; line-height: 1.05; letter-spacing: .055em; white-space: nowrap; }
.fridge-hero-art { position: relative; align-self: stretch; min-width: 0; }
.fridge-hero-art img { position: absolute; bottom: 6px; object-fit: contain; object-position: center bottom; }
.fridge-hero-friend { z-index: 2; left: 2px; width: 74px; height: 78px; }
.fridge-hero-fridge { right: 0; width: 105px; height: 120px; }
.fridge-more { align-self: start; margin-top: 35px; padding: 4px 0 8px; border: 0; background: transparent; font-size: 19px; letter-spacing: .08em; line-height: 1; }

.fridge-search { display: block; position: relative; width: 55%; margin: -2px 0 23px; }
.fridge-search input { height: 44px; margin: 0; padding: 10px 14px 10px 42px; border: 1px solid rgba(113, 104, 91, .25); border-radius: 15px; background: rgba(255, 253, 248, .45); color: #25282d; font-size: 13px; box-shadow: none; }
.fridge-search input::placeholder { color: #8a857c; }
.fridge-search-mark { position: absolute; z-index: 1; top: 13px; left: 15px; width: 15px; height: 15px; border: 1.5px solid #777a7f; border-radius: 50%; pointer-events: none; }
.fridge-search-mark::after { position: absolute; right: -5px; bottom: -3px; width: 7px; height: 1.5px; background: #777a7f; content: ''; transform: rotate(45deg); transform-origin: left center; }

.fridge-filters { display: grid; grid-template-columns: .8fr .85fr .85fr .85fr 1.35fr; align-items: center; gap: 3px; margin: 0 0 23px; }
.fridge-filters button { min-width: 0; min-height: 39px; padding: 7px 4px; border: 0; background: transparent; color: #292a2e; font-family: var(--font-script); font-size: 14px; white-space: nowrap; }
.fridge-filters button.is-active { background: transparent url("./assets/today/record-button-paint.webp") center / 100% 100% no-repeat; color: #18191c; }

.fridge-expiry-layout { display: grid; min-height: 154px; grid-template-columns: minmax(0, 58%) minmax(0, 42%); align-items: stretch; margin-bottom: 17px; }
.fridge-expiry-card { padding: 14px 17px 13px; border: 1px solid rgba(105, 93, 76, .13); border-radius: 16px; background: rgba(255, 252, 247, .38); }
.fridge-expiry-card header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.fridge-expiry-card h2 { margin: 0; font-family: var(--font-script); font-size: 15px; font-weight: 500; }
.fridge-expiry-card header span { font-size: 12px; }
.fridge-expiry-card button { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 8px; padding: 8px 2px; border: 0; background: transparent; text-align: left; }
.fridge-expiry-card strong { overflow: hidden; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.fridge-expiry-card small { color: var(--danger); font-size: 10px; white-space: nowrap; }
.fridge-expiry-friend { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: flex-end; padding: 3px 0 0 8px; }
.fridge-expiry-friend p { position: relative; z-index: 1; margin: 0 0 -2px; color: #35332f; font-family: var(--font-script); font-size: 12px; line-height: 1.5; transform: rotate(-1deg); }
.fridge-expiry-friend img { width: 105px; height: 90px; object-fit: contain; object-position: center bottom; }

.fridge-stock { display: grid; gap: 14px; }
.fridge-page .fridge-group { position: relative; margin: 0; padding: 0; border: 1px solid rgba(105, 93, 76, .13); border-radius: 16px; background: rgba(255, 252, 247, .34); overflow: hidden; }
.fridge-page .fridge-group::before,
.fridge-page .fridge-group + .fridge-group { border-top: 0; }
.fridge-page .fridge-group::before,
.fridge-page .fridge-group > summary::after { display: none; content: none; }
.fridge-page .fridge-group-heading { display: flex; min-height: 52px; align-items: center; justify-content: space-between; padding: 12px 18px 7px; list-style: none; }
.fridge-page .fridge-group-heading::-webkit-details-marker { display: none; }
.fridge-page .fridge-group-heading > span { display: flex; align-items: baseline; gap: 9px; margin: 0; }
.fridge-page .fridge-group-heading h2 { margin: 0; font-family: var(--font-script); font-size: 16px; font-weight: 500; letter-spacing: .035em; }
.fridge-page .fridge-group-heading small { color: #23252a; font-family: var(--font-ui); font-size: 12px; }
.fridge-page .fridge-group-heading > b { color: #191b1f; font-size: 25px; font-weight: 300; line-height: 1; transition: transform .18s ease; }
.fridge-page .fridge-group[open] .fridge-group-heading > b { transform: rotate(90deg); }
.fridge-page .fridge-group-rows { padding: 0 18px 12px; }
.fridge-page .inventory-row { display: grid; min-height: 50px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; border: 0; background: transparent; text-align: left; }
.fridge-page .inventory-row > span { min-width: 0; }
.fridge-page .inventory-row strong { display: block; overflow: hidden; color: #1e2024; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.fridge-page .inventory-row small { display: block; margin-top: 3px; overflow: hidden; color: #8a8378; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.fridge-page .inventory-row > b { color: #5e5b54; font-size: 11px; font-weight: 450; text-align: right; white-space: nowrap; }
.fridge-page .inventory-row em { display: block; margin-top: 3px; color: var(--danger); font-size: 9px; font-style: normal; }
.fridge-card-scene { display: grid; grid-template-columns: minmax(0, 53%) minmax(0, 47%); align-items: end; gap: 3px; }
.fridge-card-scene > img { display: block; width: 100%; height: 190px; object-fit: contain; object-position: center bottom; }
.fridge-card-scene .fridge-group-heading { padding-inline: 17px; }
.fridge-card-scene .fridge-group-rows { padding-inline: 17px; }
.fridge-empty { margin: 7px 0 20px; padding: 34px 16px; color: #7b756b; font-family: var(--font-script); font-size: 16px; text-align: center; }

.fridge-footer-scene { display: grid; min-height: 150px; grid-template-columns: 58% 42%; align-items: end; margin: 3px 0 -8px; overflow: hidden; }
.fridge-footer-scene button { align-self: center; min-height: 58px; padding: 11px 12px; border: 1px dashed #aca395; border-radius: 15px; background: rgba(255, 253, 248, .22); font-family: var(--font-script); font-size: 16px; }
.fridge-footer-scene img { width: 100%; height: 145px; object-fit: contain; object-position: right bottom; transform: translate(11px, 20px); }

.is-fridge-page .tabs { padding: 7px 10px max(8px, env(safe-area-inset-bottom)); }
.is-fridge-page .tab { font-size: 12px; font-weight: 500; }
.is-fridge-page .tab i { display: grid; height: 35px; place-items: center; }
.is-fridge-page .tab-art { width: 34px; height: 34px; opacity: .64; filter: grayscale(.28) saturate(.78); }
.is-fridge-page .tab-art-fridge { width: 36px; height: 38px; }
.is-fridge-page .tab.is-active { color: var(--fridge-ink, #26364d); }
.is-fridge-page .tab.is-active .tab-art { opacity: 1; filter: none; transform: none; }

@media (max-width: 389px) {
  #app.is-fridge-page { padding-inline: 18px; }
  .fridge-hero { grid-template-columns: minmax(0, 1fr) 154px 24px; }
  .fridge-hero h1 { font-size: 29px; }
  .fridge-search { width: 59%; }
  .fridge-filters button { font-size: 13px; }
  .fridge-expiry-layout { grid-template-columns: minmax(0, 60%) minmax(0, 40%); }
  .fridge-expiry-card { padding-inline: 14px; }
  .fridge-expiry-friend { padding-left: 4px; }
  .fridge-expiry-friend img { width: 94px; }
  .fridge-card-scene { grid-template-columns: minmax(0, 56%) minmax(0, 44%); }
  .fridge-card-scene > img { height: 172px; }
}

/* Recipes — naive editorial journal */
#app.is-recipes-page {
  padding: max(16px, env(safe-area-inset-top)) 20px calc(94px + env(safe-area-inset-bottom));
  --recipe-mustard: #d8ad38;
  --recipe-rose: #b98372;
  --recipe-green: #8d9870;
  --recipe-navy: #26364d;
}
.recipes-page { position: relative; min-width: 0; color: #22231f; }
.recipes-hero { position: relative; height: 228px; margin: 0 -2px 4px; overflow: hidden; }
.recipes-title { position: absolute; z-index: 2; top: 49px; left: 1px; }
.recipes-title h1 { margin: 0; font-family: var(--font-script); font-size: 36px; font-weight: 500; letter-spacing: .1em; line-height: 1; }
.recipes-title p { margin: 18px 0 0; font-family: var(--font-script); font-size: 17px; line-height: 1.65; letter-spacing: .035em; }
.recipes-hero-scene { position: absolute; right: -8px; bottom: 3px; width: 265px; height: 150px; object-fit: contain; object-position: right bottom; }
.recipes-lamp { position: absolute; top: -23px; right: 30px; width: 46px; height: 78px; object-fit: contain; object-position: center top; }
.recipe-collect-note { position: absolute; z-index: 3; top: 54px; right: 0; width: 104px; height: 66px; padding: 0; border: 0; background: transparent; text-align: center; transform: rotate(-1.2deg); }
.recipe-collect-note img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.recipe-collect-note span,
.recipe-collect-note small { position: relative; z-index: 1; display: block; }
.recipe-collect-note span { margin-top: 18px; font-family: var(--font-script); font-size: 13px; line-height: 1; }
.recipe-collect-note small { margin-top: 5px; color: #777168; font-family: var(--font-ui); font-size: 8px; }

.recipes-search { position: relative; display: block; margin: 0 0 13px; }
.recipes-search input { height: 46px; margin: 0; padding: 10px 16px 10px 43px; border: 1px solid rgba(113, 104, 91, .28); border-radius: 18px; background: rgba(255, 253, 249, .48); box-shadow: none; color: #25272a; font-family: var(--font-ui); font-size: 14px; }
.recipes-search input::placeholder { color: #8c877f; }
.recipes-search-mark { position: absolute; z-index: 1; top: 13px; left: 15px; width: 17px; height: 17px; border: 1.7px solid #707379; border-radius: 50%; pointer-events: none; }
.recipes-search-mark::after { position: absolute; right: -5px; bottom: -3px; width: 7px; height: 1.6px; background: #707379; content: ''; transform: rotate(45deg); transform-origin: left center; }

.recipes-categories { display: flex; gap: 3px; margin: 0 -20px 22px; padding: 0 20px 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.recipes-categories::-webkit-scrollbar,
.recipe-feature-track::-webkit-scrollbar { display: none; }
.recipes-categories button { flex: 0 0 auto; min-height: 37px; padding: 7px 13px; border: 0; border-radius: 0; background: transparent; font-family: var(--font-script); font-size: 14px; white-space: nowrap; }
.recipes-categories button.is-active { background: transparent url('./assets/today/record-button-paint.webp') center / 100% 100% no-repeat; }
.recipe-legacy-filter { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -8px 0 19px; padding: 8px 10px; background: rgba(225, 220, 209, .38); color: #6d685f; font-size: 11px; }
.recipe-legacy-filter button { padding: 4px 5px; border: 0; border-bottom: 1px solid var(--recipe-mustard); background: transparent; color: #292a2d; font-size: 11px; }

.recipes-featured,
.recipes-scenes,
.recipes-all { margin-top: 0; }
.recipes-featured > header,
.recipes-all > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.recipes-featured h2,
.recipes-scenes h2,
.recipes-all h2 { margin: 0; font-family: var(--font-script); font-size: 24px; font-weight: 500; letter-spacing: .04em; line-height: 1.25; }
.recipes-featured > header span,
.recipes-all > header span { color: #8b857b; font-size: 10px; white-space: nowrap; }
.recipe-feature-track { display: flex; gap: 12px; margin: 10px -20px 27px; padding: 0 20px 4px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.recipe-feature-card { flex: 0 0 176px; scroll-snap-align: start; }
.recipe-feature-card > button { position: relative; display: grid; width: 100%; min-height: 148px; grid-template-rows: auto minmax(44px,auto) auto auto; align-content: start; padding: 14px 14px 12px; border: 0; background: linear-gradient(155deg, rgba(235, 229, 215, .84), rgba(248, 244, 235, .64)); text-align: left; transform: rotate(-.3deg); }
.recipe-feature-card:nth-child(2n) > button { transform: rotate(.45deg); }
.recipe-feature-kicker { width: max-content; margin-bottom: 8px; padding: 3px 7px 2px; background: rgba(223,183,57,.28); color: #726b5f; font-family: var(--font-script); font-size: 10px; transform: rotate(-1deg); }
.recipe-feature-card strong { display: -webkit-box; overflow: hidden; font-family: var(--font-script); font-size: 18px; font-weight: 500; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.recipe-feature-card > button > b { position: absolute; right: 11px; bottom: 9px; font-size: 19px; font-weight: 300; }
.recipe-feature-meta { margin-top: 5px; color: #555650; font-size: 10px; }
.recipe-stock { display: block; margin-top: 5px; overflow: hidden; color: #726d64; font-size: 9px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.recipe-stock.ready { color: #6f7c50; }
.recipe-stock.almost { color: #96742d; }
.recipe-stock.missing { color: #9b6658; }
.recipe-feature-empty { display: grid; flex: 0 0 100%; min-height: 118px; place-items: center; padding: 18px; background: rgba(239, 234, 222, .48); color: #777168; text-align: center; }
.recipe-feature-empty p { margin: 0 0 8px; font-family: var(--font-script); font-size: 16px; }
.recipe-feature-empty button { padding: 5px 3px; border: 0; border-bottom: 1px solid var(--recipe-mustard); background: transparent; font-size: 12px; }

.recipes-scenes { margin: 0 0 28px; }
.recipe-scene-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 11px; }
.recipe-scene-grid button { display: grid; min-width: 0; min-height: 112px; grid-template-rows: 60px auto auto; align-content: start; padding: 7px 3px 8px; border: 0; background: rgba(234, 229, 216, .52); text-align: center; }
.recipe-scene-grid button:nth-child(2) { background: rgba(225, 220, 217, .48); transform: rotate(.5deg); }
.recipe-scene-grid button:nth-child(3) { background: rgba(229, 232, 215, .54); transform: rotate(-.4deg); }
.recipe-scene-grid button:nth-child(4) { background: rgba(240, 226, 207, .58); }
.recipe-scene-grid img { justify-self: center; width: 58px; height: 58px; object-fit: contain; }
.recipe-scene-grid button:nth-child(4) img { width: 39px; }
.recipe-scene-grid span { overflow: hidden; font-family: var(--font-script); font-size: 12px; line-height: 1.2; white-space: nowrap; }
.recipe-scene-grid small { margin-top: 4px; overflow: hidden; color: #777168; font-size: 8px; line-height: 1.2; white-space: nowrap; }

.recipes-all { position: relative; padding-bottom: 44px; }
.recipe-journal-list { margin-top: 8px; border-top: 1px solid rgba(133, 123, 107, .22); }
.recipe-journal-row { margin: 0; }
.recipe-journal-row > button { display: grid; width: 100%; min-height: 84px; grid-template-columns: minmax(0, 1fr) auto 14px; align-items: center; gap: 10px; padding: 12px 2px; border: 0; border-bottom: 1px solid rgba(133, 123, 107, .24); background: transparent; text-align: left; }
.recipe-row-copy { min-width: 0; }
.recipe-row-copy strong,
.recipe-row-copy small,
.recipe-row-copy em { display: block; }
.recipe-row-copy strong { overflow: hidden; font-family: var(--font-script); font-size: 17px; font-weight: 500; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.recipe-row-copy small { margin-top: 4px; overflow: hidden; color: #64645f; font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.recipe-row-copy em { margin-top: 5px; overflow: hidden; color: #777168; font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.recipe-row-copy em.ready { color: #6f7c50; }
.recipe-row-copy em.almost { color: #94752f; }
.recipe-row-copy em.missing,
.recipe-row-copy em.draft { color: #a56f62; }
.recipe-row-favorite { align-self: start; margin-top: 14px; color: #9a7131; font-family: var(--font-script); font-size: 10px; white-space: nowrap; }
.recipe-journal-row b { font-size: 22px; font-weight: 300; }
.recipe-empty-state { display: grid; min-height: 170px; grid-template-columns: 118px minmax(0, 1fr); align-items: center; gap: 13px; padding: 19px 5px; }
.recipe-empty-state img { width: 118px; height: 115px; object-fit: contain; }
.recipe-empty-state h2 { margin: 0; font-family: var(--font-script); font-size: 19px; font-weight: 500; }
.recipe-empty-state p { margin: 6px 0 13px; color: #777168; font-size: 11px; line-height: 1.5; }
.recipe-empty-state button { padding: 7px 2px; border: 0; border-bottom: 1px solid var(--recipe-mustard); background: transparent; font-family: var(--font-script); font-size: 14px; }
.recipes-corner-friend { position: absolute; right: -28px; bottom: -12px; width: 77px; height: 64px; object-fit: contain; object-position: right bottom; pointer-events: none; }

.recipe-import-guide { margin: 2px 0 18px; }
.recipe-import-intro { margin-bottom: 12px !important; }
.recipe-prompt-copy { display: grid; width: 100%; gap: 4px; padding: 15px 16px; border: 0; background: rgba(236, 229, 211, .72); text-align: left; }
.recipe-prompt-copy strong { font-family: var(--font-script); font-size: 17px; font-weight: 500; }
.recipe-prompt-copy small { color: #777168; font-size: 10px; }
.recipe-manual-entry { display: block; width: 100%; margin-top: 12px; padding: 10px 5px; border: 0; border-bottom: 1px solid rgba(133, 123, 107, .28); background: transparent; color: #5f6255; text-align: center; }

.is-recipes-page .tabs { padding: 7px 10px max(8px, env(safe-area-inset-bottom)); }
.is-recipes-page .tab { font-size: 12px; font-weight: 500; }
.is-recipes-page .tab i { display: grid; height: 35px; place-items: center; }
.is-recipes-page .tab-art { width: 34px; height: 34px; opacity: .64; filter: grayscale(.28) saturate(.78); }
.is-recipes-page .tab-art-recipe { width: 39px; height: 37px; }
.is-recipes-page .tab.is-active { color: #26364d; }
.is-recipes-page .tab.is-active .tab-art { opacity: 1; filter: none; transform: none; }

@media (max-width: 389px) {
  #app.is-recipes-page { padding-inline: 17px; }
  .recipes-categories { margin-inline: -17px; padding-inline: 17px; }
  .recipe-feature-track { margin-inline: -17px; padding-inline: 17px; }
  .recipes-hero { height: 216px; }
  .recipes-title h1 { font-size: 34px; }
  .recipes-hero-scene { right: -18px; width: 244px; height: 140px; }
  .recipe-collect-note { right: -4px; width: 96px; }
  .recipe-scene-grid { gap: 5px; }
  .recipe-scene-grid button { min-height: 107px; padding-inline: 1px; }
  .recipe-scene-grid span { font-size: 11px; }
  .recipe-scene-grid small { font-size: 7px; }
  .recipe-journal-row > button { grid-template-columns: minmax(0, 1fr) auto 12px; gap: 8px; }
  .recipe-row-favorite { display: none; }
}
/* Optional nutrients share the existing paper layout, without a fifth card. */
.nutrition-detail-entry { display:block; width:100%; min-height:56px; margin:4px 0 12px; padding:10px 2px; border:0; background:transparent; color:#777566; text-align:left; font:12px/1.5 system-ui,sans-serif; }
.nutrition-detail-entry b { display:block; color:#4d4a40; font-size:13px; font-weight:500; }
.nutrition-detail-entry small { display:block; margin-top:2px; font-size:11px; }
.nutrition-detail-entry i { margin-left:8px; font-size:19px; font-style:normal; }
.nutrition-entry-heading { display:flex; justify-content:space-between; align-items:center; }
.nutrition-mini-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:5px; }
.nutrition-mini-grid > span { min-width:0; }
.nutrition-mini-grid > span > span { display:block; font-size:11px; font-variant-numeric:tabular-nums; }
.nutrition-mini-grid b { display:inline; font-size:13px; }
.nutrition-mini-grid small { font-size:10px; }
.nutrition-metric { padding:7px 0 6px; }
.nutrition-metric-head { display:flex; justify-content:space-between; gap:12px; align-items:baseline; font:14px/1.5 system-ui,sans-serif; }
.nutrition-compact-sheet .nutrition-metric-head h3 { font:inherit; margin:0; }
.nutrition-metric-head > span { text-align:right; font-variant-numeric:tabular-nums; }
.nutrition-metric-head strong { font-size:18px; font-weight:550; color:#46473b; }
.nutrition-metric-head small { font-size:12px; color:#6e6b60; }
.nutrition-meter { margin:7px 0 5px; height:4px; background:#e8e5db; border-radius:4px; overflow:hidden; }
.nutrition-meter i { height:100%; display:block; background:#889366; border-radius:4px; }
.nutrition-meter.is-unknown { background:repeating-linear-gradient(90deg,#dedbd1 0 4px,transparent 4px 8px); }
.nutrition-metric.is-over .nutrition-meter i { background:#b5856c; }
.nutrition-metric-caption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:3px; color:#746f62; font:10px/1.5 system-ui,sans-serif; }
.nutrition-inline-link { border:0; background:transparent; padding:0 2px; color:#64704c; font:inherit; min-height:24px; }
.nutrition-compact-sheet .nutrition-metric-note { margin:3px 0 0; font:11px/1.5 system-ui,sans-serif; color:#8a634c; }
.nutrition-compact-sheet .nutrition-basis-note { margin:7px 0 0; color:#746f62; font:10px/1.5 system-ui,sans-serif; }
.nutrition-actions { display:flex; justify-content:space-between; gap:12px; }
.nutrition-missing-list { border-top:1px solid #e5e1d5; font:12px/1.5 system-ui,sans-serif; }
.nutrition-missing-list summary { padding:12px 0; cursor:pointer; color:#716d60; }
.nutrition-missing-list > div { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.nutrition-missing-list small { display:block; font-size:10px; color:#827c6e; }
.nutrition-empty { font-size:16px; padding:16px 0; }
.nutrition-empty small { display:block; margin-top:8px; font-size:12px; color:#777566; }
.sheet.nutrition-compact-sheet { height:auto; max-height:85dvh; overflow-y:auto; padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
.nutrition-compact-sheet .sheet-content { min-height:0; padding-bottom:0; }
.nutrition-compact-sheet .sheet-header { padding-top:10px; padding-bottom:0; }
.nutrition-compact-sheet .sheet-header h2 { font-size:21px; padding-right:40px; margin-bottom:4px; }
.nutrition-sheet-close { position:absolute; top:25px; right:14px; width:44px; height:44px; border:0; background:transparent; font:26px/1 system-ui,sans-serif; z-index:3; color:#777566; }
.nutrition-date { margin:2px 0 8px; font-size:12px; color:#797466; }
.nutrition-detail-group { padding:13px 0; border-top:1px solid #e5e1d5; }
.nutrition-detail-group h3 { margin:0 0 7px; font-size:13px; font-weight:600; color:#6c7056; }
.nutrition-detail-row { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:baseline; gap:12px; padding:7px 0; font:14px/1.5 system-ui,sans-serif; }
.nutrition-detail-row > span:last-child { text-align:right; font-variant-numeric:tabular-nums; }
.nutrition-detail-row .is-unrecorded { color:#999386; font-size:13px; }
.nutrition-detail-row > span:last-child { overflow-wrap:anywhere; }
.nutrient-confidence-fields { margin-top:14px; }
.nutrient-confidence-fields summary { padding:10px 0; font-size:13px; cursor:pointer; }
.nutrient-confidence-fields > details { border-top:1px solid #e5e1d5; }
.nutrition-more { border-top:1px solid #e5e1d5; font-size:12px; color:#827c6e; }
.nutrition-more summary { min-height:44px; padding:13px 0; cursor:pointer; }
.nutrition-more p { line-height:1.7; }
.nutrition-provenance { display:block; margin-top:4px; font-size:11px; }
.nutrition-more progress { width:100%; height:4px; accent-color:#879165; }
.nutrition-text-link,.nutrition-trend-link { min-height:44px; border:0; background:transparent; padding:10px 0; color:#717951; font:13px/1.5 system-ui,sans-serif; }
.nutrition-trend-link { display:flex; justify-content:space-between; width:100%; border-top:1px solid #e5e1d5; text-align:left; }
.meal-nutrition-summary { margin-top:12px; font:12px/1.6 system-ui,sans-serif; }
.meal-known-nutrients { display:flex; flex-wrap:wrap; gap:5px 16px; color:#777164; }
.meal-known-nutrients b { font-weight:500; color:#514e43; }
.meal-nutrition-missing { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:4px 0 0; color:#928b7d; font-size:11px; }
.meal-nutrition-missing button { border:0; background:transparent; padding:8px 0; color:#777e58; font:inherit; }
.day-record-status { display:flex; justify-content:flex-end; align-items:center; gap:6px; font-size:12px; color:#777566; margin:12px 0; }
.day-record-status input { width:16px; height:16px; accent-color:#7b8454; }
.optional-nutrients { min-width:0; margin:18px 0; border:1px solid #dddccb; border-radius:10px; padding:12px; }
.optional-nutrients legend { padding:0 5px; font-weight:600; font-size:14px; }
.entry-extra-nutrients { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0; font-size:12px; }
.entry-extra-nutrients small { display:block; color:#858171; font-size:10px; }
.optional-trend-chart { display:flex; align-items:stretch; height:140px; gap:4px; padding:10px 0 24px; margin:18px 0; border-bottom:1px solid #d6d5c6; }
.optional-trend-day { flex:1; min-width:0; position:relative; }
.optional-trend-day > b { position:absolute; bottom:0; width:100%; display:block; background:#818b5e; border-radius:3px 3px 0 0; }
.optional-trend-day.partial > b { background:repeating-linear-gradient(135deg,#a8af8e 0,#a8af8e 3px,#e2e5d6 3px,#e2e5d6 6px); }
.optional-trend-day > span { position:absolute; bottom:0; left:0; right:0; color:#999681; font-size:10px; text-align:center; }
.optional-trend-day > small { position:absolute; bottom:-22px; left:0; right:0; font-size:10px; text-align:center; }
.optional-target-line { position:absolute; z-index:1; width:100%; border-top:2px solid #be9b72; }
.trend-legend { font-size:11px; line-height:1.6; color:#7d7b68; }
.optional-trend-table { margin:15px 0; font-size:12px; }
.optional-trend-table summary { padding:10px 0; cursor:pointer; }
.optional-trend-table > div { display:grid; grid-template-columns:50px 65px 1fr; gap:8px; padding:8px 0; border-bottom:1px solid #e3e1d4; }
.optional-trend-table small { overflow-wrap:anywhere; }
.nutrient-source-list { padding-left:20px; }
.nutrient-source-list li { margin:12px 0; padding-left:4px; font-size:13px; }
.nutrient-source-list li > span { display:inline-block; width:calc(100% - 65px); vertical-align:top; overflow-wrap:anywhere; }
.nutrient-source-list small { display:block; font-size:10px; color:#86816e; margin-top:4px; }
.nutrient-source-list b { float:right; font-size:14px; }
.optional-trend .section-title-line { flex-wrap:wrap; gap:8px; }
.recipe-nutrition-strip { flex-wrap:wrap; }
/* Food enrichment: narrow-screen comparisons, not a wide spreadsheet. */
.enrich-step { font-size:12px; color:var(--muted,#77766b); }
.enrich-modes { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0; }
.enrich-fields { margin:14px 0; }
.enrich-field { display:block; border-bottom:1px solid #dedcd1; padding:12px 0; }
.enrich-field-title { display:flex; align-items:center; gap:8px; }
.enrich-field-title small { margin-left:auto; font-size:11px; font-weight:normal; }
.enrich-field input[type=checkbox], .enrich-check input[type=checkbox] { width:18px; height:18px; flex:0 0 18px; margin:0; }
.enrich-values { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; padding:8px 0 0 26px; }
.enrich-values>span { font-size:11px; color:#76756a; overflow-wrap:anywhere; }
.enrich-values strong { display:block; font-size:16px; color:#393b34; font-weight:600; }
.enrich-values small { display:block; font-size:10px; line-height:1.5; }
.enrich-check { display:flex; align-items:flex-start; gap:8px; font-size:13px; line-height:1.6; }
.enrich-candidates .choice { overflow-wrap:anywhere; }
.enrich-summary { padding-left:20px; }
.enrich-summary li { margin:12px 0; }
.enrich-summary small { display:block; line-height:1.7; }
.enrich-history { padding:12px 0; border-bottom:1px solid #dedcd1; }
.enrich-field.enrich-unchanged { padding:7px 0; }
.enrich-unchanged .enrich-values { padding-top:3px; }
.enrich-unchanged .enrich-values strong { font-size:13px; }
.enrich-unchanged .enrich-values>span:first-child { display:flex; gap:6px; flex-wrap:wrap; }
.enrich-unchanged .enrich-values>span:first-child small { flex-basis:100%; }
.cleanup-nutrients { margin:12px 0; font-size:12px; }
.cleanup-nutrients>div { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; padding:7px 0; border-bottom:1px solid #e8e5db; }
.cleanup-heading { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; font-size:13px; overflow-wrap:anywhere; }
.cleanup-heading small { display:block; font-size:11px; line-height:1.5; margin-top:4px; }
button[data-cleanup-next],button[data-enrich-history],button[data-enrich-target="skip"] { border:0; background:transparent; color:#737b52; font:inherit; min-height:44px; padding:8px; text-decoration:underline; text-underline-offset:4px; }