/*
 * Dietario design system: components.
 *
 * Plain CSS, no build step. Every class is prefixed `ds-` and uses only
 * tokens from tokens.css. Add a component here AND to the style guide
 * (templates/ds/styleguide.html) in the same change.
 *
 * Breakpoints: phone = max-width 720px, desktop = min-width 1040px.
 */

/* ---- Base --------------------------------------------------------------- */
.ds-body {
  margin: 0;
  background: var(--ds-bg);
  color: var(--ds-ink);
  font-family: var(--ds-font);
  font-size: var(--ds-text-base);
  line-height: 1.45;
}
.ds-body *, .ds-body *::before, .ds-body *::after { box-sizing: border-box; }
:where(.ds-body) a { color: inherit; }
.ds-body h1, .ds-body h2, .ds-body h3, .ds-body p { margin: 0; }
.ds-body :focus-visible { outline: none; box-shadow: var(--ds-focus); border-radius: var(--ds-radius-sm); }

.ds-h1 { font-family: var(--ds-font-display); font-size: var(--ds-text-2xl); line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; }
.ds-h2 { font-family: var(--ds-font-display); font-size: var(--ds-text-lg); line-height: 1.2; font-weight: 600; }
.ds-h3 { font-size: var(--ds-text-base); font-weight: 700; }
.ds-sub { color: var(--ds-muted); margin-top: var(--ds-space-2); }
.ds-muted { color: var(--ds-muted); }
.ds-small { font-size: var(--ds-text-sm); }
.ds-eyebrow { font-size: var(--ds-text-xs); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--ds-muted); }
.ds-num { font-variant-numeric: tabular-nums; }
.ds-stat { font-family: var(--ds-font-display); font-size: var(--ds-text-3xl); font-weight: 700; line-height: 1.05; }
.ds-skip { position: absolute; left: -999px; top: 0; background: var(--ds-surface); padding: var(--ds-space-2) var(--ds-space-4); z-index: 20; }
.ds-skip:focus { left: var(--ds-space-2); top: var(--ds-space-2); }

/* ---- Layout ------------------------------------------------------------- */
.ds-app { min-height: 100vh; display: flex; flex-direction: column; }
.ds-main { flex: 1; }
.ds-page { width: 100%; max-width: var(--ds-page-max); margin: 0 auto; padding: var(--ds-space-5) var(--ds-gutter) var(--ds-space-7); display: flex; flex-direction: column; gap: var(--ds-space-5); }
.ds-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ds-space-4); flex-wrap: wrap; }
.ds-actions { display: flex; gap: var(--ds-space-3); align-items: center; flex-wrap: wrap; }
.ds-row { display: flex; align-items: center; gap: var(--ds-space-3); }
.ds-row-wrap { flex-wrap: wrap; }
.ds-grow { flex: 1; min-width: 0; }
.ds-stack { display: flex; flex-direction: column; gap: var(--ds-space-4); }
.ds-grid-2, .ds-grid-3, .ds-grid-4 { display: grid; gap: var(--ds-space-4); }
.ds-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ds-split { display: grid; grid-template-columns: minmax(0, 1fr) 21.25rem; gap: var(--ds-space-5); align-items: start; }
.ds-split-wide { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--ds-space-5); align-items: start; }
.ds-sticky { position: sticky; top: var(--ds-space-4); }

@media (max-width: 1040px) {
  .ds-split, .ds-split-wide { grid-template-columns: minmax(0, 1fr); }
  .ds-sticky { position: static; }
  .ds-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ds-hide-phone { display: none !important; }
  .ds-savebar { padding-left: var(--ds-gutter); padding-right: var(--ds-gutter); }
  .ds-savebar-inner .ds-btn { padding: 0 var(--ds-space-3); white-space: normal; line-height: 1.15; text-align: center; }
  .ds-only-phone { display: inline-flex !important; margin-top: var(--ds-space-1); }
  .ds-col-bar { width: 6rem; }
  .ds-table th, .ds-table td, .ds-table tbody th { padding-left: var(--ds-space-3); padding-right: var(--ds-space-3); }
  .ds-grid-2, .ds-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .ds-page { padding-bottom: 6rem; }
}

/* ---- Shell: top bar, nav, household menu, tab bar ----------------------- */
.ds-topbar { display: flex; align-items: center; gap: var(--ds-space-5); padding: var(--ds-space-2) var(--ds-gutter); background: var(--ds-surface); border-bottom: 1px solid var(--ds-line); flex-wrap: wrap; }
.ds-brand { display: flex; align-items: center; gap: var(--ds-space-3); font-family: var(--ds-font-display); font-weight: 700; font-size: var(--ds-text-lg); text-decoration: none; }
.ds-brand-mark { width: 1.75rem; height: 1.75rem; border-radius: 0.5625rem; background: var(--ds-brand); display: grid; place-items: center; }
.ds-nav { display: flex; gap: var(--ds-space-1); flex: 1; flex-wrap: wrap; }
.ds-nav a { display: flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-target); padding: 0 0.875rem; border-radius: var(--ds-radius-pill); color: var(--ds-ink-2); text-decoration: none; font-weight: 500; }
.ds-nav a:hover { background: var(--ds-line-2); }
.ds-nav a[aria-current="page"] { background: var(--ds-brand-soft); color: var(--ds-brand-ink); font-weight: 700; }
.ds-step { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1.5px solid var(--ds-field); display: inline-grid; place-items: center; font-size: 0.6875rem; font-weight: 700; color: var(--ds-muted); flex: none; }
.ds-step-done { background: var(--ds-brand); border-color: var(--ds-brand); color: var(--ds-on-brand); }
.ds-nav a[aria-current="page"] .ds-step { border-color: var(--ds-brand); color: var(--ds-brand-ink); }
.ds-nav a[aria-current="page"] .ds-step-done { color: var(--ds-on-brand); }
.ds-household { display: flex; align-items: center; gap: var(--ds-space-3); min-height: var(--ds-target); padding: 0.375rem 0.75rem 0.375rem 0.375rem; border-radius: var(--ds-radius-pill); border: 1px solid var(--ds-line); background: var(--ds-surface); color: var(--ds-ink); font: 500 var(--ds-text-base) var(--ds-font); cursor: pointer; text-decoration: none; }
.ds-avatar { width: 2rem; height: 2rem; border-radius: 50%; background: var(--ds-brand-soft); color: var(--ds-brand-ink); display: inline-grid; place-items: center; font-weight: 700; font-size: var(--ds-text-sm); flex: none; }

.ds-tabbar { display: none; }
/* Edit pages declare data-hide-tabbar on their content; the shell lives outside #main, so this must be CSS, not a template block. */
.ds-app:has([data-hide-tabbar]) .ds-tabbar { display: none !important; }
@media (max-width: 720px) {
  .ds-nav { display: none; }
  .ds-topbar { justify-content: space-between; }
  .ds-household-name { display: none; }
  .ds-tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; background: var(--ds-surface); border-top: 1px solid var(--ds-line); padding: 0.375rem 0.25rem calc(0.375rem + env(safe-area-inset-bottom)); z-index: 10; }
  .ds-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 3rem; font-size: 0.6875rem; font-weight: 600; color: var(--ds-muted); text-decoration: none; }
  .ds-tabbar a[aria-current="page"] { color: var(--ds-brand-ink); }
  .ds-tabbar svg { stroke: currentColor; }
  .ds-tabbar a[aria-current="page"] svg { stroke: var(--ds-brand); }
  
}

/* ---- Page furniture ----------------------------------------------------- */
.ds-crumbs { font-size: var(--ds-text-sm); color: var(--ds-muted); display: flex; gap: var(--ds-space-2); align-items: center; flex-wrap: wrap; }
.ds-crumbs a { color: var(--ds-muted); }
.ds-nextstep { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; background: var(--ds-next-soft); border: 1px solid var(--ds-next-line); border-radius: var(--ds-radius-lg); padding: 1.125rem 1.375rem; }
.ds-nextstep .ds-eyebrow { color: var(--ds-next); }
.ds-nextstep .ds-h2 { margin-top: var(--ds-space-1); }
.ds-nextstep p { margin-top: var(--ds-space-1); color: var(--ds-ink-2); }
.ds-card { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); padding: 1.25rem; }
.ds-card-flush { padding: 0; overflow: hidden; }
.ds-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); margin-bottom: var(--ds-space-4); }
.ds-toast-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ds-space-2); }
.ds-toast { padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius); background: var(--ds-brand-soft); color: var(--ds-brand-ink); font-weight: 600; }
.ds-toast-error { background: var(--ds-warn-soft); color: var(--ds-warn); }

/* ---- Buttons, chips, filters ------------------------------------------- */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2); min-height: var(--ds-target); padding: 0 1.125rem; border-radius: var(--ds-radius-pill); font: 600 var(--ds-text-base) var(--ds-font); border: 1px solid var(--ds-field); background: var(--ds-surface); color: var(--ds-ink); text-decoration: none; cursor: pointer; white-space: nowrap; }
.ds-btn:hover { background: var(--ds-line-2); }
.ds-btn-primary { background: var(--ds-brand); border-color: var(--ds-brand); color: var(--ds-on-brand); }
.ds-btn-primary:hover { background: var(--ds-brand-ink); }
.ds-btn-next { background: var(--ds-next); border-color: var(--ds-next); color: var(--ds-on-brand); }
.ds-btn-next:hover { background: var(--ds-next-ink); }
.ds-btn-quiet { background: transparent; border-color: transparent; color: var(--ds-brand-ink); }
.ds-btn-danger { background: transparent; border-color: transparent; color: var(--ds-warn); }
.ds-btn-danger-solid { background: var(--ds-warn); border-color: var(--ds-warn); color: var(--ds-on-brand); }
.ds-btn-sm { min-height: 2.25rem; padding: 0 0.875rem; font-size: var(--ds-text-base); }
.ds-btn[disabled], .ds-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.ds-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.1875rem 0.625rem; border-radius: var(--ds-radius-pill); font-size: var(--ds-text-xs); font-weight: 600; background: var(--ds-line-2); color: var(--ds-ink-2); white-space: nowrap; }
.ds-chip-ok { background: var(--ds-brand-soft); color: var(--ds-brand-ink); }
.ds-chip-warn { background: var(--ds-warn-soft); color: var(--ds-warn); }
.ds-chip-next { background: var(--ds-next-soft); color: var(--ds-next); }

.ds-filter { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: 2.25rem; padding: 0 0.875rem; border-radius: var(--ds-radius-pill); border: 1px solid var(--ds-line); background: var(--ds-surface); font: 500 var(--ds-text-base) var(--ds-font); color: var(--ds-ink-2); text-decoration: none; }
.ds-filter[aria-pressed="true"], .ds-filter[aria-current="true"] { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-on-brand); }
.ds-filter b { font-weight: 600; opacity: 0.75; }

.ds-menu { position: absolute; right: 0; top: calc(100% + 0.5rem); width: min(20rem, 90vw); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow-menu); padding: 0.375rem; z-index: 5; }
.ds-menu a { display: flex; gap: var(--ds-space-3); padding: var(--ds-space-3); border-radius: var(--ds-radius-sm); text-decoration: none; }
.ds-menu a:hover { background: var(--ds-line-2); }
.ds-menu strong { display: block; }
.ds-menu .ds-menu-desc { font-size: var(--ds-text-sm); color: var(--ds-muted); }

/* ---- Forms -------------------------------------------------------------- */
.ds-field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.ds-field label, .ds-label { font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-ink-2); }
.ds-input, .ds-select, .ds-textarea { width: 100%; min-height: var(--ds-target); border: 1px solid var(--ds-field); border-radius: 0.625rem; padding: 0 var(--ds-space-3); font: var(--ds-text-base) var(--ds-font); background: var(--ds-surface); color: var(--ds-ink); }
.ds-textarea { padding: 0.625rem var(--ds-space-3); min-height: 6rem; line-height: 1.5; resize: vertical; }
.ds-input[aria-invalid="true"], .ds-select[aria-invalid="true"], .ds-textarea[aria-invalid="true"] { border-color: var(--ds-warn); }
.ds-input-unit { position: relative; }
.ds-input-unit .ds-input { padding-right: 3rem; }
.ds-input-unit > span { position: absolute; right: var(--ds-space-3); top: 0; bottom: 0; display: flex; align-items: center; color: var(--ds-muted); font-size: var(--ds-text-base); pointer-events: none; }
.ds-hint { font-size: var(--ds-text-xs); color: var(--ds-muted); }
.ds-error { font-size: var(--ds-text-sm); color: var(--ds-warn); font-weight: 600; }
.ds-check { display: flex; align-items: center; gap: var(--ds-space-3); min-height: var(--ds-target); font-weight: 500; }
.ds-check input { width: 1.25rem; height: 1.25rem; accent-color: var(--ds-brand); }
.ds-savebar { position: sticky; bottom: 0; display: flex; align-items: center; padding: 0.875rem var(--ds-gutter); background: var(--ds-surface); border-top: 1px solid var(--ds-line); z-index: 6; }
.ds-savebar-inner { width: 100%; max-width: calc(var(--ds-page-max) - 2 * var(--ds-gutter)); margin: 0 auto; display: flex; align-items: center; gap: var(--ds-space-3); }
.ds-accordion { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); }
.ds-accordion > summary { display: flex; align-items: center; justify-content: space-between; min-height: 3.25rem; padding: 0 var(--ds-space-4); font-weight: 700; cursor: pointer; }

/* ---- Data: tables, tiles, bars ----------------------------------------- */
.ds-table { width: 100%; border-collapse: collapse; }
.ds-table th { text-align: left; font-size: var(--ds-text-xs); color: var(--ds-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.625rem var(--ds-space-4); border-bottom: 1px solid var(--ds-line); }
.ds-table td { padding: var(--ds-space-3) var(--ds-space-4); border-bottom: 1px solid var(--ds-line-2); vertical-align: middle; }
.ds-table tbody th { font: inherit; text-transform: none; letter-spacing: 0; color: inherit; padding: var(--ds-space-3) var(--ds-space-4); border-bottom: 1px solid var(--ds-line-2); vertical-align: middle; }
.ds-table tr:last-child td, .ds-table tr:last-child th { border-bottom: 0; }
.ds-table a { text-decoration: none; font-weight: 600; }
.ds-table .ds-cell-num { text-align: right; font-variant-numeric: tabular-nums; }
.ds-scroll-x { overflow-x: auto; }
.ds-col-bar { width: 11rem; }
.ds-only-phone { display: none !important; }
.ds-tile { width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; display: grid; place-items: center; font-weight: 700; font-size: var(--ds-text-base); flex: none; }
.ds-tile-1 { background: var(--ds-tint-1-bg); color: var(--ds-tint-1-ink); }
.ds-tile-2 { background: var(--ds-tint-2-bg); color: var(--ds-tint-2-ink); }
.ds-tile-3 { background: var(--ds-tint-3-bg); color: var(--ds-tint-3-ink); }
.ds-tile-4 { background: var(--ds-tint-4-bg); color: var(--ds-tint-4-ink); }
.ds-tile-5 { background: var(--ds-tint-5-bg); color: var(--ds-tint-5-ink); }
.ds-bar { height: 0.5rem; border-radius: 99px; background: var(--ds-line-2); overflow: hidden; }
.ds-bar > i { display: block; height: 100%; background: var(--ds-brand); border-radius: 99px; }
.ds-bar-next > i { background: var(--ds-next); }

/* ---- Macros: one colour each, one order, everywhere --------------------- */
.ds-mbar { display: flex; gap: 2px; height: 0.625rem; border-radius: 99px; overflow: hidden; background: var(--ds-line-2); }
.ds-mbar > i { display: block; height: 100%; min-width: 0; }
.ds-mbar-lg { height: 1rem; }
.ds-mbar > .ds-protein, .ds-dot-protein { background: var(--ds-macro-protein); }
.ds-mbar > .ds-carbs, .ds-dot-carbs { background: var(--ds-macro-carbs); }
.ds-mbar > .ds-fat, .ds-dot-fat { background: var(--ds-macro-fat); }
.ds-dot-fibre { background: var(--ds-macro-fibre); }
.ds-dot { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 50%; flex: none; }
.ds-mkey { display: flex; gap: var(--ds-space-1) 0.75rem; flex-wrap: wrap; font-size: var(--ds-text-sm); color: var(--ds-ink-2); }
.ds-mkey > span { display: inline-flex; align-items: center; gap: 0.375rem; }
.ds-mkey b { font-variant-numeric: tabular-nums; }
.ds-input-protein { border-bottom: 3px solid var(--ds-macro-protein); }
.ds-input-carbs { border-bottom: 3px solid var(--ds-macro-carbs); }
.ds-input-fat { border-bottom: 3px solid var(--ds-macro-fat); }
.ds-input-fibre { border-bottom: 3px solid var(--ds-macro-fibre); }

/* ---- Planner slots ------------------------------------------------------ */
.ds-slot { border-radius: 0.625rem; padding: 0.375rem 0.625rem; font-size: var(--ds-text-sm); font-weight: 500; min-height: var(--ds-target); display: flex; flex-direction: column; justify-content: center; background: var(--ds-brand-soft); color: var(--ds-brand-ink); line-height: 1.25; border: 0; font-family: inherit; text-align: left; }
.ds-slot small { font-weight: 500; color: var(--ds-ink-2); font-size: var(--ds-text-xs); }
.ds-slot-empty { background: transparent; border: 1.5px dashed var(--ds-field); color: var(--ds-muted); }
.ds-slot-sm { min-height: 2rem; padding: 0.25rem 0.5rem; font-size: var(--ds-text-xs); }
.ds-visually-hidden { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ds-share-row { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; gap: var(--ds-space-3); align-items: center; padding: var(--ds-space-2) 0; border-bottom: 1px solid var(--ds-line-2); }
.ds-share-total[data-valid="false"] { color: var(--ds-warn); }
.ds-share-total[data-valid="true"] { color: var(--ds-brand-ink); }
.ds-slot-locked { box-shadow: inset 0 0 0 2px var(--ds-brand); }

/* ---- Dropdown (native <details>), callouts, alerts, pagination ---------- */
.ds-dropdown { position: relative; }
.ds-dropdown > summary { list-style: none; cursor: pointer; }
.ds-dropdown > summary::-webkit-details-marker { display: none; }
.ds-callout { display: flex; align-items: center; gap: var(--ds-space-4); flex-wrap: wrap; background: var(--ds-brand-soft); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); padding: var(--ds-space-4) 1.25rem; }
.ds-alert { background: var(--ds-warn-soft); color: var(--ds-warn); border-radius: var(--ds-radius); padding: var(--ds-space-3) var(--ds-space-4); font-weight: 600; }
.ds-alert ul { margin: var(--ds-space-1) 0 0; padding-left: 1.25rem; font-weight: 500; }
.ds-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); flex-wrap: wrap; padding: var(--ds-space-3) var(--ds-space-4); border-top: 1px solid var(--ds-line); }
.ds-empty { text-align: center; padding: var(--ds-space-7) var(--ds-space-4); display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-2); }
.ds-list-plain { list-style: none; margin: 0; padding: 0; }

/* ---- Media block and linked cards (dish cards) --------------------------- */
.ds-media { position: relative; aspect-ratio: 16 / 9; background-size: cover; background-position: center; display: flex; align-items: flex-end; padding: var(--ds-space-3); font-family: var(--ds-font-display); font-weight: 700; font-size: var(--ds-text-2xl); }
.ds-media-1 { background-color: var(--ds-tint-1-bg); color: var(--ds-tint-1-ink); }
.ds-media-2 { background-color: var(--ds-tint-2-bg); color: var(--ds-tint-2-ink); }
.ds-media-3 { background-color: var(--ds-tint-3-bg); color: var(--ds-tint-3-ink); }
.ds-media-4 { background-color: var(--ds-tint-4-bg); color: var(--ds-tint-4-ink); }
.ds-media-5 { background-color: var(--ds-tint-5-bg); color: var(--ds-tint-5-ink); }
.ds-media .ds-chip { position: absolute; top: var(--ds-space-3); right: var(--ds-space-3); }
.ds-card-link { display: block; text-decoration: none; color: inherit; transition: box-shadow 0.15s; }
.ds-card-link:hover { box-shadow: var(--ds-shadow-menu); }
.ds-card-body { padding: var(--ds-space-4); display: flex; flex-direction: column; gap: var(--ds-space-2); }
.ds-card-inactive { opacity: 0.65; }
.ds-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--ds-space-2) var(--ds-space-4); margin: 0; }
.ds-dl dt { color: var(--ds-muted); }
.ds-dl dd { margin: 0; font-weight: 600; }
.ds-prose { line-height: 1.6; }
.ds-prose ol, .ds-prose ul { padding-left: 1.25rem; margin: var(--ds-space-2) 0; }

/* ---- Dish form: mode cards, choice chips, recipe-line rows --------------- */
.ds-mode-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-3); }
.ds-mode-card { position: relative; display: flex; flex-direction: column; gap: var(--ds-space-1); padding: var(--ds-space-4); border: 1.5px solid var(--ds-line); border-radius: var(--ds-radius); background: var(--ds-surface); cursor: pointer; }
.ds-mode-card input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.ds-mode-card:has(input:checked) { border-color: var(--ds-brand); background: var(--ds-brand-soft); }
.ds-mode-card:has(input:focus-visible) { box-shadow: var(--ds-focus); }
.ds-choices > div, .ds-choices { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.ds-choices > div > div { display: contents; }
.ds-choices label { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: 2.25rem; padding: 0 0.875rem; border: 1px solid var(--ds-field); border-radius: var(--ds-radius-pill); background: var(--ds-surface); cursor: pointer; font-weight: 500; }
.ds-choices label:has(input:checked) { background: var(--ds-brand-soft); border-color: var(--ds-brand); color: var(--ds-brand-ink); font-weight: 700; }
.ds-choices input { accent-color: var(--ds-brand); width: 1rem; height: 1rem; }
form[data-mode="ingredients"] [data-only="manual"], form[data-mode="manual"] [data-only="ingredients"] { display: none; }
.ds-recipe-list { list-style: none; margin: 0; padding: 0; }
.ds-recipe-row { display: grid; grid-template-columns: minmax(0, 2fr) 6.5rem 6.5rem minmax(0, 1.4fr) auto; gap: var(--ds-space-2); align-items: center; padding: var(--ds-space-2) 0; border-bottom: 1px solid var(--ds-line-2); }
.ds-recipe-row.is-marked-removed { opacity: 0.45; }
.ds-recipe-row.is-marked-removed select, .ds-recipe-row.is-marked-removed input { text-decoration: line-through; }
.ds-recipe-head { display: grid; grid-template-columns: minmax(0, 2fr) 6.5rem 6.5rem minmax(0, 1.4fr) auto; gap: var(--ds-space-2); padding-bottom: var(--ds-space-2); }
#recipe-lines-block[data-js="enabled"] .recipe-line-delete-toggle { display: none; }
#recipe-lines-block:not([data-js="enabled"]) [data-enhanced-only] { display: none; }
.ds-photo { display: flex; gap: var(--ds-space-4); align-items: flex-start; flex-wrap: wrap; }
.ds-photo img { width: 8rem; height: 6rem; object-fit: cover; border-radius: var(--ds-radius); }
@media (max-width: 720px) {
  .ds-mode-cards { grid-template-columns: minmax(0, 1fr); }
  .ds-recipe-head { display: none; }
  .ds-recipe-row { grid-template-columns: 1fr 1fr; padding: var(--ds-space-3) 0; }
  .ds-recipe-row > :first-child, .ds-recipe-row > :nth-child(4), .ds-recipe-row > :nth-child(n+5) { grid-column: 1 / -1; }
}

/* ---- Week planner ------------------------------------------------------- */
.ds-week { display: grid; gap: var(--ds-space-3); grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); align-items: start; }
@media (min-width: 1041px) { .ds-week { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (max-width: 720px) { .ds-week { grid-template-columns: minmax(0, 1fr); } }
.ds-day { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); padding: var(--ds-space-3); display: flex; flex-direction: column; gap: var(--ds-space-3); min-width: 0; }
.ds-day-today { border-color: var(--ds-brand); box-shadow: inset 0 0 0 1px var(--ds-brand); }
.ds-day-head { display: flex; flex-direction: column; gap: var(--ds-space-1); }
.ds-day-head h2 { font-size: var(--ds-text-base); font-weight: 700; margin: 0; }
.ds-meal { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.ds-meal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-1); min-height: 2rem; font-size: var(--ds-text-xs); font-weight: 600; color: var(--ds-muted); }
a.ds-slot { text-decoration: none; }
a.ds-slot:hover { box-shadow: inset 0 0 0 1.5px var(--ds-brand); }
.ds-meal.is-done .ds-slot { opacity: 0.7; }
.ds-meal.is-skipped .ds-slot { opacity: 0.55; text-decoration: line-through; }
.ds-iconbtn { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--ds-radius-pill); border: 0; background: transparent; color: var(--ds-muted); cursor: pointer; font: inherit; }
.ds-iconbtn:hover { background: var(--ds-line-2); color: var(--ds-ink); }
.ds-menu-sm { width: 12.5rem; }
.ds-menu-btn { display: flex; width: 100%; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-target); padding: 0 var(--ds-space-3); border: 0; background: transparent; border-radius: var(--ds-radius-sm); font: 500 var(--ds-text-base) var(--ds-font); color: var(--ds-ink); cursor: pointer; text-align: left; }
.ds-menu-btn:hover { background: var(--ds-line-2); }
.ds-portions summary { cursor: pointer; font-size: var(--ds-text-xs); color: var(--ds-muted); padding: 0.25rem 0; list-style: none; }
.ds-portions summary::-webkit-details-marker { display: none; }
.ds-portions ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.125rem; font-size: var(--ds-text-xs); }
.ds-portions li { display: flex; justify-content: space-between; gap: var(--ds-space-2); }
.ds-choice-list { list-style: none; margin: 0; padding: 0; }
.ds-choice-list .ds-mbar { max-width: 22rem; margin-top: var(--ds-space-1); }
.ds-choice-list li { display: flex; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-3) var(--ds-space-4); border-top: 1px solid var(--ds-line-2); }

/* ---- Shopping list ------------------------------------------------------- */
.ds-shop-lines { list-style: none; margin: 0; padding: 0; }
.ds-shop-line { display: flex; align-items: flex-start; gap: var(--ds-space-3); padding: var(--ds-space-3) var(--ds-space-4); border-top: 1px solid var(--ds-line-2); }
.ds-shop-line label { display: flex; gap: var(--ds-space-3); align-items: flex-start; flex: 1; min-width: 0; cursor: pointer; }
.ds-shop-line input[type="checkbox"] { width: 1.375rem; height: 1.375rem; margin-top: 0.125rem; accent-color: var(--ds-brand); flex: none; }
.ds-shop-line.is-ticked .ds-shop-name { text-decoration: line-through; color: var(--ds-muted); }
.ds-shop-line.needs-review { background: var(--ds-warn-soft); }
.ds-shop-qty { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media print {
  .ds-topbar, .ds-tabbar, .ds-nextstep, .ds-savebar, .print-hidden { display: none !important; }
  .ds-body { background: var(--ds-surface); }
  .ds-card { border: 0; break-inside: avoid; padding: 0; }
  .ds-page { padding: 0; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-body * { transition: none !important; animation: none !important; }
}