/* Kitchen — page-specific styles, layered on top of /assets/ak.css */

:root { --k-display: 'Fraunces', Georgia, 'Times New Roman', serif; }

.k-app { padding-bottom: 60px; position: relative; }
.k-loading { padding: 60px 0; color: var(--faint); font-family: var(--k-display); font-size: 20px; font-style: italic; }
.k-error { padding: 60px 0; color: #a03; }

/* ── Grain — a little tooth so the paper doesn't look printed off a plotter ── */
.k-grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) { .k-grain { mix-blend-mode: screen; opacity: 0.04; } }

/* ── Hero — specific, not a SaaS strapline ── */
.k-hero { padding: 46px 0 34px; position: relative; z-index: 2; }
.k-hero-index { font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; color: var(--faint); margin-bottom: 18px; }
.k-hero-h1 {
  font-family: var(--k-display); font-optical-sizing: auto; font-weight: 480;
  font-size: clamp(42px, 7vw, 84px); line-height: 0.98; letter-spacing: -0.01em; color: var(--ink);
}
.k-hero-h1 em { font-style: italic; font-weight: 460; color: var(--clay); }
.k-hero-lede { font-family: var(--serif); font-weight: 300; font-size: clamp(17px, 2vw, 21px); color: var(--ink2); margin-top: 20px; max-width: 52ch; line-height: 1.5; }

/* ── Tabs ── */
.k-tabs { display: flex; gap: 22px; margin-bottom: 32px; border-bottom: 1px solid var(--line); position: relative; z-index: 2; }
.k-tab { padding: 10px 0; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink2); background: none; border-left: none; border-right: none; border-top: none; cursor: pointer; font-family: var(--sans); }
.k-tab.active { color: var(--clay); border-bottom-color: var(--clay); font-weight: 600; }
.k-tab:hover { color: var(--clay); }

/* ── Filter chips ── */
.k-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; margin-bottom: 30px; position: relative; z-index: 2; }
.k-filter-divider { width: 1px; height: 16px; background: var(--line2); margin: 0 4px; }
.k-chip { font-size: 12px; letter-spacing: 0.03em; padding: 6px 3px; border: none; border-bottom: 1px solid transparent; background: none; color: var(--ink2); cursor: pointer; font-family: var(--sans); transition: all .15s; }
.k-chip:hover { color: var(--clay); }
.k-chip.active { color: var(--clay); border-bottom-color: var(--clay); font-weight: 600; }

/* ── Book grid — a table of contents, not a SaaS card grid ── */
.k-grid { display: flex; flex-direction: column; position: relative; z-index: 2; }
.k-card { position: relative; display: flex; align-items: flex-start; gap: 22px; border-top: 1px solid var(--line); padding: 22px 0; transition: padding-left .18s; }
.k-card:last-child { border-bottom: 1px solid var(--line); }
.k-card:hover { padding-left: 8px; }
.k-card.checked { background: linear-gradient(90deg, rgba(173,79,42,0.05), transparent 40%); }
.k-card-index { font-family: var(--k-display); font-style: italic; font-size: 15px; color: var(--faint); width: 30px; flex-shrink: 0; padding-top: 6px; }
.k-check {
  width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line2); background: var(--panel);
  color: var(--clay); cursor: pointer; font-size: 13px; line-height: 1; flex-shrink: 0; margin-top: 4px;
}
.k-card.checked .k-check { background: var(--clay); border-color: var(--clay); color: #fff; }
.k-card-body { flex: 1; cursor: pointer; min-width: 0; }
.k-card-title-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.k-card-title { font-family: var(--k-display); font-size: 25px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; }
.k-card-subtitle { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: 14.5px; color: var(--ink2); }
.k-card-stats { display: flex; flex-wrap: wrap; gap: 3px 0; margin-top: 10px; font-size: 12.5px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.k-card-stats span:not(:last-child)::after { content: '·'; margin: 0 9px; color: var(--line2); }
.k-stat-kcal { color: var(--clay); font-weight: 600; }
.k-card-tags { margin-top: 9px; font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); }
.k-card-tags span:not(:last-child)::after { content: '/'; margin: 0 7px; color: var(--line2); }

/* ── Recipe view ── */
.k-back { display: inline-block; font-size: 12.5px; letter-spacing: 0.05em; color: var(--ink2); margin-bottom: 22px; }
.k-back:hover { color: var(--clay); }
.k-recipe-head { position: relative; margin-bottom: 6px; }
.k-recipe-equip-row { display: flex; gap: 8px; margin-bottom: 14px; }
.k-equip-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line2); border-radius: 2px; padding: 3px 8px; }
.k-recipe-head h1 { font-family: var(--k-display); font-optical-sizing: auto; font-size: clamp(34px, 5.5vw, 56px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.02; }
.k-recipe-subtitle { font-family: var(--serif); font-size: 18px; color: var(--ink2); font-weight: 300; font-style: italic; margin-top: 6px; }
.k-recipe-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 18px; }

.k-scaler { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin: 26px 0; padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; }
.k-stepper { display: flex; align-items: center; gap: 14px; }
.k-stepper button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line2); background: var(--panel); font-size: 18px; cursor: pointer; }
.k-stepper button:hover { border-color: var(--clay); color: var(--clay); }
.k-stepper-val { font-family: var(--k-display); font-size: 20px; min-width: 110px; text-align: center; }
.k-macro-solve { display: flex; flex-wrap: wrap; gap: 18px; }
.k-macro-solve-field { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink2); }
.k-macro-solve-field input { width: 58px; padding: 7px 9px; border: 1px solid var(--line2); border-radius: 3px; font-family: var(--sans); font-size: 13px; background: var(--panel); color: var(--ink); }

.k-kcal-serving { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.k-kcal-serving .v { font-family: var(--k-display); font-size: 42px; font-weight: 500; color: var(--clay); line-height: 1; }
.k-kcal-serving .l { font-size: 12.5px; letter-spacing: 0.05em; color: var(--faint); }
.k-macros-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin: 18px 0 8px; }
.k-macros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 20px; }
.k-macro-tile { background: var(--panel); padding: 16px 12px; text-align: center; }
.k-macro-v { font-family: var(--k-display); font-size: 24px; font-weight: 500; }
.k-macro-l { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-top: 4px; }

.k-warn { background: var(--amber-bg, #fdebd0); border: 1px solid #e8c99a; color: #7a4b12; padding: 12px 16px; border-radius: 4px; font-size: 13.5px; margin-bottom: 16px; }
.k-note { font-size: 13px; color: var(--faint); font-style: italic; margin-bottom: 20px; }

.k-component { border-top: 1px solid var(--line); padding: 30px 0; }
.k-component-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.k-component-head h3 { font-family: var(--k-display); font-size: 23px; font-weight: 500; font-style: italic; }
.k-freeze-badge { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.k-freeze-cooked { color: var(--green); }
.k-freeze-raw-marinated { color: var(--clay); }
.k-freeze-raw { color: var(--ink2); }
.k-freeze-never { color: #a04030; }
.k-freeze-note { font-size: 13.5px; color: var(--ink2); margin-top: 10px; max-width: 60ch; }
.k-freeze-note-good { color: var(--green); }

/* ── Variant picker ── */
.k-variants { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.k-variant-btn { font-family: var(--serif); font-size: 13.5px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel); color: var(--ink2); cursor: pointer; }
.k-variant-btn:hover { border-color: var(--clay); color: var(--clay); }
.k-variant-btn.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.k-variant-desc { font-size: 13px; color: var(--ink2); font-style: italic; margin-bottom: 6px; max-width: 62ch; }

/* ── Optional add-ons ── */
.k-optional { border: 1px dashed var(--line2); border-radius: 4px; padding: 14px 16px; margin-top: 12px; }
.k-optional-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; }
.k-optional-row + .k-optional-row { border-top: 1px solid var(--line); }
.k-optional-toggle { width: 20px; height: 20px; border-radius: 4px; border: 1.5px solid var(--line2); background: var(--panel); flex-shrink: 0; margin-top: 2px; cursor: pointer; color: var(--clay); font-size: 12px; line-height: 1; }
.k-optional-toggle.on { background: var(--clay); border-color: var(--clay); color: #fff; }
.k-optional-body { flex: 1; }
.k-optional-name { font-family: var(--serif); font-weight: 600; font-size: 15px; }
.k-optional-desc { font-size: 13px; color: var(--ink2); margin-top: 2px; }

.k-ingredients { margin-top: 16px; }
.k-ingredients li { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.k-ing-amt { font-variant-numeric: tabular-nums; min-width: 84px; color: var(--clay); font-weight: 600; }
.k-ing-name { flex: 1; }
.k-ing-pantry { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }

.k-steps { margin-top: 18px; counter-reset: step; list-style: none; }
.k-steps li { padding: 14px 0; border-top: 1px solid var(--line); }
.k-steps li:first-child { border-top: none; }
.k-step-head { display: flex; justify-content: space-between; gap: 12px; }
.k-step-title { font-family: var(--serif); font-size: 17px; font-weight: 600; }
.k-step-mins { font-size: 12px; color: var(--faint); white-space: nowrap; }
.k-steps p { font-size: 14px; color: var(--ink2); margin-top: 5px; line-height: 1.55; }

.k-block { border-top: 1px solid var(--line); padding: 26px 0; }
.k-block-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.k-block p { font-size: 15px; color: var(--ink2); }

/* ── Plan view ── */
.k-plan h1 { font-family: var(--k-display); font-size: clamp(32px, 5vw, 48px); font-weight: 500; margin-bottom: 22px; }
.k-plan-selected { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 10px; }
.k-plan-row { display: flex; align-items: center; gap: 14px; background: var(--panel); padding: 12px 16px; font-size: 14px; }
.k-plan-row a { font-family: var(--serif); font-size: 17px; font-weight: 500; }
.k-plan-row a:hover { color: var(--clay); }
.k-plan-row-serv { color: var(--faint); font-size: 12.5px; }
.k-plan-row select { margin-left: auto; padding: 6px 8px; border: 1px solid var(--line2); border-radius: 3px; background: var(--panel); font-family: var(--sans); font-size: 12.5px; }
.k-plan-remove { font-size: 12px; color: var(--faint); background: none; border: none; cursor: pointer; }
.k-plan-remove:hover { color: #a03; }

.sec-head-sm { display: flex; align-items: baseline; gap: 14px; margin: 34px 0 16px; }
.sec-head-sm h2 { font-family: var(--k-display); font-size: 25px; font-weight: 500; font-style: italic; }
.k-prep-total { font-size: 12.5px; color: var(--faint); }

.k-plan-actions { display: flex; gap: 12px; margin-bottom: 20px; }

.k-aisle-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay); margin: 20px 0 8px; }
.k-aisle-label-soft { color: var(--faint); margin-top: 30px; padding-top: 20px; border-top: 1px dashed var(--line2); }
.k-shop-list-soft .k-shop-name { color: var(--ink2); font-weight: 400; font-style: italic; }
.k-shop-list { border-top: 1px solid var(--line); }
.k-shop-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.k-shop-name { font-weight: 500; }
.k-shop-qty { font-size: 12.5px; color: var(--faint); }
.k-shop-search { margin-left: auto; font-size: 12px; color: var(--clay); }
.k-pantry { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 14px; }
.k-pantry summary { cursor: pointer; font-size: 13px; color: var(--ink2); letter-spacing: 0.03em; }
.k-pantry .k-shop-list { margin-top: 10px; }

.k-lane-label { font-family: var(--serif); font-size: 17px; font-weight: 600; margin: 18px 0 8px; }
.k-prep-list, .k-freeze-list, .k-thaw-list, .k-cookfresh-list { border-top: 1px solid var(--line); }
.k-prep-list li, .k-freeze-list li, .k-thaw-list li, .k-cookfresh-list li { padding: 12px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.k-prep-item-title { font-weight: 500; margin-bottom: 4px; }
.k-prep-steps { padding-left: 18px; color: var(--ink2); font-size: 13px; }
.k-freeze-item-title { font-weight: 500; }
.k-freeze-item-meta { font-size: 12.5px; color: var(--clay); margin-top: 2px; }
.k-freeze-item-label { font-size: 12.5px; color: var(--faint); margin-top: 2px; font-style: italic; }

/* ── Log-to-freezer control ── */
.k-freeze-log-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.k-freeze-log-hint { font-size: 12px; color: var(--faint); }
.k-freeze-log-qty { width: 52px; padding: 6px 8px; border: 1px solid var(--line2); border-radius: 3px; font-family: var(--sans); font-size: 13px; background: var(--panel); color: var(--ink); }
.k-freeze-hint { font-size: 12.5px; color: var(--faint); margin-top: 18px; line-height: 1.6; }
.k-freeze-hint a { color: var(--clay); }

/* ── Freezer tab ── */
.k-freezer-view h1 { font-family: var(--k-display); font-size: clamp(32px, 5vw, 48px); font-weight: 500; }
.k-freezer-lede { font-size: 14.5px; color: var(--ink2); margin: 10px 0 26px; max-width: 60ch; }
.k-freezer-list { border-top: 1px solid var(--line); }
.k-freezer-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 2px; border-bottom: 1px solid var(--line); }
.k-freezer-actions { display: flex; gap: 10px; flex-shrink: 0; }
.k-freezer-stock-note { font-size: 13px; color: var(--green); margin-top: 10px; margin-bottom: 6px; }

/* ── Last cooked ── */
.k-last-cooked { font-size: 12.5px; color: var(--faint); }
.k-mark-cooked { font-size: 12px; color: var(--clay); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* ── Suggest my week ── */
.k-suggest-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 26px; padding: 16px 20px; background: var(--panel); border: 1px solid var(--sand); border-left: 3px solid var(--clay); border-radius: 4px; }
.k-suggest-hint { font-size: 13px; color: var(--ink2); }
.k-suggest-note { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fbf3ea; border: 1px solid var(--sand); border-radius: 4px; padding: 12px 16px; margin-bottom: 22px; font-size: 13.5px; color: var(--ink2); }
.k-suggest-dismiss { background: none; border: none; font-size: 18px; color: var(--faint); cursor: pointer; line-height: 1; flex-shrink: 0; }
.k-suggest-dismiss:hover { color: var(--clay); }

@media (max-width: 640px) {
  .k-plan-row { flex-wrap: wrap; }
  .k-plan-row select { margin-left: 0; }
  .k-card { gap: 14px; }
}

/* ── Print — something you can stick on the fridge ── */
@media print {
  .topbar, .menu, .k-tabs, .k-filters, .k-back, .k-plan-actions, .k-grain,
  .k-check, .foot, .k-scaler, .k-macro-solve { display: none !important; }
  body { background: #fff; font-size: 12px; }
  .k-plan-row select { display: none; }
  .k-block, .k-component { break-inside: avoid; padding: 10px 0; }
  a[href]::after { content: none; }
  .k-shop-search { display: none; }
}