/* Fælles køkkentema. Farver og størrelser defineres her for alle skærme. */
:root {
  --font-ui: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --ink: #263a30;
  --green: #315b46;
  --accent-hover: #244735;
  --muted: #66736b;
  --line: #dce3da;
  --canvas: #fdfdfa;
  --surface: #ffffff;
  --surface-soft: #f0f3ed;
  --accent-soft: #edf3ed;
  --on-accent: #ffffff;
  --on-accent-muted: #e0ebe2;
  --danger: #a13f3f;
  --danger-soft: #faeaea;
  --warning: #8a601d;
  --warning-soft: #fbf2df;
  --warning-ink: #624719;
  --shadow: 0 8px 28px #263a3014;
  --radius-control: 10px;
  --radius-panel: 16px;
  --text-small: 12px;
  --text-label: 14px;
  --text-body: 16px;
  --text-section: 18px;
  --text-title: 28px;
  --control-height: 44px;
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--ink);
  background: var(--canvas);
  color-scheme: light;
}
body { background: var(--canvas); }
/* iOS long presses must act like app controls, without link previews or selection. */
html, body, body * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
html body :is(textarea:not([readonly]):not(:disabled), input:not([readonly]):not(:disabled):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]), [contenteditable="true"], [contenteditable="plaintext-only"]),
html body :is([contenteditable="true"], [contenteditable="plaintext-only"]) * {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
button, input, select, textarea { font-family: var(--font-ui); }
h1, h2, h3 { font-family: var(--font-ui); color: var(--ink); font-weight: 650; }
h1, .recipe-detail h1, .shopping-overview-header h1, .shopping-visit-header h1 {
  font-size: var(--text-title); line-height: 1.2; letter-spacing: -.6px;
}
h2, .section-title h2, .ingredient-form h2, .plan-day > h2,
.day-navigation h2, .about h2, .meal h2, .shopping-store h2,
.shopping-store > summary .shopping-store-title h2, .recipe-detail.recipe-detail h2,
.finish-shopping-dialog h2 {
  font-family: var(--font-ui); font-size: var(--text-section); font-weight: 650;
  line-height: 1.35; letter-spacing: -.2px; color: var(--ink);
}
.intro, .recipe-detail p, .recipe-detail li, .about p { font-size: var(--text-body); }
small, .footnote, .saved, .optional, .quantity, .kitchen-content-note,
.ingredient small, .shopping-name small, .shopping-store > summary small,
.day-navigation h2 small, .kitchen-toolbar > small, .ingredient-suggestions small {
  font-size: var(--text-small); line-height: 1.5; color: var(--muted);
}
.ingredient strong, .shopping-name strong, .plan-recipe strong { font-size: var(--text-body); font-weight: 600; }
.plan-recipe.library-recipe strong { font-size: var(--text-section); }
.plan-recipe.library-recipe small { font-size: var(--text-label); margin-top: 8px; }
.ingredient-form label, .recipe-filters label, .settings-card label,
.recipe-ingredient-row label { font-size: var(--text-label); font-weight: 600; }
.eyebrow, .shopping-view-label, .day, .notice, .version {
  font-size: var(--text-small); letter-spacing: .08em; font-weight: 600;
}
button, .form-actions a.primary, .kitchen-add-dock a.primary {
  min-height: var(--control-height); border-radius: var(--radius-control);
  font-size: var(--text-label); font-weight: 600;
}
button { border-color: var(--line); background: var(--surface); color: var(--green); }
button.primary, a.primary { background: var(--green); color: var(--on-accent); border-color: var(--green); }
button:disabled { opacity: .45; cursor: default; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea,
.ingredient-form input:not([type="checkbox"]):not([type="radio"]), .ingredient-form select,
.recipe-filters input, .recipe-filters select, .recipe-ingredient-row input:not([type="hidden"]),
.recipe-ingredient-row select {
  font-family: var(--font-ui); font-size: var(--text-body); line-height: 1.5;
  min-height: var(--control-height); border: 1px solid var(--line);
  border-radius: var(--radius-control); padding: 10px 12px;
  color: var(--ink); background-color: var(--surface);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--green); }
:is(a, button, input, select, textarea, summary):focus-visible,
.recipe-filters input:focus, .recipe-filters select:focus {
  outline: 2px solid var(--green); outline-offset: 3px;
}
.settings-card, .card { padding: 20px; margin: 0 0 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); }
.card label { display: block; font-size: var(--text-label); font-weight: 600; margin: 12px 0 8px; }
.card input:not([type="checkbox"]):not([type="radio"]) { display: block; width: 100%; margin-top: 8px; }
.settings-card > h2:first-child { margin-top: 0; }
.section-title, .kitchen-toolbar { margin-top: 24px; margin-bottom: 12px; }
.kitchen-group, .shopping-store { margin-top: 24px; margin-bottom: 24px; }
.kitchen-group h2, .shopping-category .shopping-category-heading {
  font-size: var(--text-label); font-weight: 600; color: var(--green);
  background: var(--accent-soft); padding: 10px 12px; border: 0; border-radius: var(--radius-control);
}
.ingredient, .shopping-item, .shopping-store .shopping-category .ingredient {
  min-height: 64px; padding-top: 12px; padding-bottom: 12px;
}
.kitchen-swipe-content, .shopping-category .ingredient.kitchen-swipe-content { background: var(--canvas); }
.row-actions button, .recipe-edit-actions button { min-height: var(--control-height); font-size: var(--text-label); border-radius: var(--radius-control); }
.recipe-ingredient-row, .recipe-tips, .tip { background: var(--surface-soft); border-radius: var(--radius-panel); }
.recipe-cover, .example-recipe-image, .recipe-detail .recipe-ingredient-table,
.finish-shopping-dialog, .recipe-image-dialog { border-radius: var(--radius-panel); }
.recipe-placeholder, .recipe-category, .tag, .view-switch button[aria-pressed="true"] {
  background: var(--accent-soft); color: var(--green);
}
.recipe-detail.recipe-detail .recipe-meta { font-size: var(--text-label); font-weight: 500; }
.portion-stepper button { width: 44px; height: 44px; min-height: 44px; font-size: 24px; }
.portion-stepper input { padding: 6px; }
.recipe-ingredient-row input:not([type="hidden"]), .recipe-ingredient-row select,
.recipe-ingredient-row > button { height: var(--control-height); min-height: var(--control-height); }
.kitchen-add-dock > a.primary, .kitchen-add-dock .kitchen-tools,
.kitchen-add-dock .kitchen-tools > summary { height: var(--control-height); min-height: var(--control-height); }
.kitchen-add-dock .kitchen-tools { flex-basis: var(--control-height); }
.kitchen-add-dock .kitchen-tools > summary { width: var(--control-height); }
.shopping-total strong { font-family: var(--font-ui); font-size: var(--text-title); font-weight: 650; }
.shopping-visit-header { border-radius: var(--radius-panel); background: var(--green); color: var(--on-accent); }
.shopping-visit-header h1 { color: var(--on-accent); }
.shopping-visit-header .shopping-view-label { color: var(--on-accent-muted); }
.shopping-visit-mode { font-size: var(--text-small); }
.finish-shopping-dialog, .recipe-image-dialog { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.kitchen-filters { background: var(--canvas); }
.kitchen-add-dock { background: linear-gradient(transparent, var(--canvas) 35%); }
.kitchen-add-dock .kitchen-tools > summary { background: var(--surface); border-radius: var(--radius-control); }
.kitchen-tools-menu { background: var(--surface); border-radius: var(--radius-panel); box-shadow: var(--shadow); }
#navigation { background: color-mix(in srgb, var(--canvas) 95%, transparent); padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
#navigation a { font-size: 12px; font-weight: 500; border-radius: var(--radius-control); min-height: 48px; }
#navigation a[aria-current] { color: var(--green); background: var(--accent-soft); font-weight: 650; }
@media (hover: hover) {
  button:not(:disabled):hover, .row-actions button:hover { background: var(--accent-soft); color: var(--green); }
  button.primary:not(:disabled):hover, a.primary:hover { background: var(--accent-hover); color: var(--on-accent); }
  .kitchen-swipe-delete:not(:disabled):hover { background: var(--danger-soft); color: var(--danger); }
}
@media (max-width: 380px) {
  .shopping-visit-header h1 { font-size: 24px; }
  .shopping-visit-header { flex-wrap: wrap; }
  #navigation a { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; }
}
.row-actions button,.kitchen-group-buttons button{background:transparent;border-color:transparent}
.kitchen-group-buttons button[aria-pressed="true"]{background:var(--accent-soft)}
.shopping-category .shopping-category-heading{background:var(--category-tint,var(--surface-soft));border-left:3px solid var(--category-accent,var(--line))}
.shopping-category[data-shopping-category="Frugt og grøntsager"]{--category-tint:#eef5e9;--category-accent:#96b58a}
.shopping-category[data-shopping-category="Kød, fisk og pålæg"]{--category-tint:#f8eeee;--category-accent:#c79b99}
.shopping-category[data-shopping-category="Brød, kager og søde sager"]{--category-tint:#f7f1e6;--category-accent:#bda57b}
.shopping-category[data-shopping-category="Kolonial og konserves"]{--category-tint:#f3f3e5;--category-accent:#b2b382}
.shopping-category[data-shopping-category="Mel, ris, gryn og pasta"]{--category-tint:#f6f0e9;--category-accent:#bca48f}
.shopping-category[data-shopping-category="Mejeriprodukter"]{--category-tint:#edf2fa;--category-accent:#98aecb}
.shopping-category[data-shopping-category="Frostvarer"]{--category-tint:#eaf5f7;--category-accent:#8eb9c3}
.shopping-category[data-shopping-category="Husholdning"]{--category-tint:#f1eef8;--category-accent:#afa0c7}
.shopping-category[data-shopping-category="Personlig pleje"]{--category-tint:#f8edf3;--category-accent:#c49cb2}
.shopping-category[data-shopping-category="Andet"]{--category-tint:#f1f2f0;--category-accent:#a5ada5}
.shopping-category[data-shopping-category="Afkrydsede varer"]{--category-tint:#f0f3f1;--category-accent:#a1b0a5}
.recipe-ingredient-row{padding:10px;margin-bottom:8px;gap:8px;border-radius:10px;grid-template-columns:minmax(0,1fr) 80px 90px 30px;align-items:end}.recipe-ingredient-row label:first-child{grid-column:1;grid-row:1}.recipe-ingredient-row label:nth-child(2){grid-column:2;grid-row:1}.recipe-ingredient-row label:nth-child(3){grid-column:3;grid-row:1}.recipe-ingredient-row > button{grid-column:4;grid-row:1;width:30px}.recipe-ingredient-row label{gap:4px;font-size:12px}.recipe-ingredient-row input:not([type="hidden"]),.recipe-ingredient-row select{padding:8px;font-size:16px}.recipe-ingredient-suggestions:empty,.recipe-identity-status:empty{display:none}.recipe-ingredient-suggestions,.recipe-identity-status{grid-column:1/-1;margin:0}@media(max-width:420px){.recipe-ingredient-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 30px}.recipe-ingredient-row label:first-child{grid-column:1/3}.recipe-ingredient-row label:nth-child(2){grid-column:1;grid-row:2}.recipe-ingredient-row label:nth-child(3){grid-column:2;grid-row:2}.recipe-ingredient-row > button{grid-column:3;grid-row:1}}
.kitchen-placement-fields,.kitchen-quantity-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 12px}
.ingredient-form .kitchen-placement-fields>label{margin:0}
.kitchen-placement-fields>label[for="ingredient-kind"]{grid-column:1;grid-row:1}
.kitchen-placement-fields>label[for="ingredient-category"]{grid-column:2;grid-row:1}
.kitchen-placement-fields>#ingredient-kind{grid-column:1;grid-row:2}
.kitchen-placement-fields>#ingredient-category{grid-column:2;grid-row:2}
.kitchen-quantity-fields{margin-top:14px;align-items:start}
.kitchen-quantity-fields>.quantity-heading{grid-column:1;grid-row:1;margin:0}
.ingredient-form .kitchen-quantity-fields>label{grid-column:2;grid-row:1;margin:0}
.kitchen-quantity-fields>.quantity-input-row{grid-column:1;grid-row:2;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:9px}
.kitchen-quantity-fields>.quantity-unit-row{grid-column:2;grid-row:2;min-width:0;flex-wrap:wrap}
.kitchen-quantity-fields .quantity-unit-row select{width:100%;flex-basis:100%}
.kitchen-quantity-fields .quantity-plenty{white-space:normal}
.recipe-ingredient-row .recipe-ingredient-suggestions{display:flex;flex-direction:column;flex-wrap:nowrap;gap:4px;min-width:0;max-height:240px;overflow-y:auto}
.recipe-ingredient-row .recipe-ingredient-suggestions:empty{display:none}
.recipe-ingredient-suggestions button{display:block;width:100%;height:auto;min-height:40px;padding:8px 10px;text-align:left;font-size:14px;line-height:1.4;font-weight:400;white-space:normal;overflow-wrap:anywhere;flex-shrink:0;background:var(--surface);border:1px solid var(--line);border-radius:6px}
.recipe-preview-row.is-editing{border:1px solid var(--green);border-left:4px solid var(--green);background:var(--accent-soft)}
.recipe-editing-badge{display:table;margin-top:6px;padding:3px 8px;border-radius:5px;background:var(--green);color:white;font-size:12px;font-weight:600;line-height:1.4}
.recipe-text-fields{padding-left:26px;margin:8px 0 12px;counter-reset:recipe-field}
.recipe-text-fields li{position:relative;padding-right:38px;margin-bottom:10px;counter-increment:recipe-field}
.recipe-text-fields li::marker{color:var(--green);font-weight:600}
.recipe-text-fields label{margin:0}
.recipe-text-fields label>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.recipe-text-fields textarea{width:100%;min-height:72px;resize:vertical}
.recipe-text-fields button{position:absolute;right:0;top:0;width:30px;padding:0;background:transparent;border:0;font-size:22px}
.recipe-filters{grid-template-columns:1fr}
.meal.recipe-preview-row{padding:12px 0}
.recipe-preview-row .plan-recipe.library-recipe{min-height:0;padding:0;gap:12px}
.recipe-preview-row .plan-recipe.library-recipe small{margin-top:5px}
.plan-transfer-actions{position:fixed;bottom:calc(65px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(100%,720px);margin:0;padding:12px 22px;display:flex;justify-content:center;align-items:center;gap:16px;background:linear-gradient(transparent,var(--canvas) 35%);z-index:4;flex-wrap:nowrap}
.plan-transfer-actions button{margin:0;text-align:center;min-height:44px}
main:has(.plan-transfer-actions){padding-bottom:calc(175px + env(safe-area-inset-bottom))}
@media(max-width:420px){.plan-transfer-actions{gap:12px;padding-inline:12px}.plan-transfer-actions button{font-size:12px;padding-inline:10px}}
@media(max-width:600px){
  .recipe-editor .recipe-ingredient-row{grid-template-columns:minmax(0,1fr) 58px 66px 24px;gap:4px;padding:6px;margin-bottom:6px;border-radius:8px}
  .recipe-editor .recipe-ingredient-row label:first-child{grid-column:1;grid-row:1}
  .recipe-editor .recipe-ingredient-row label:nth-child(2){grid-column:2;grid-row:1}
  .recipe-editor .recipe-ingredient-row label:nth-child(3){grid-column:3;grid-row:1}
  .recipe-editor .recipe-ingredient-row>button{grid-column:4;grid-row:1;width:24px;height:44px;min-height:44px;font-size:20px}
  .recipe-editor .recipe-ingredient-row label{font-size:10px;gap:3px;font-weight:500}
  .recipe-editor .recipe-ingredient-row input:not([type="hidden"]),.recipe-editor .recipe-ingredient-row select{height:44px;min-height:44px;padding:6px;font-size:16px}
  .recipe-editor .recipe-ingredient-row select{padding-right:18px;background-position:right 5px center;background-size:9px 6px}
}

.recipe-toolbar-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(96px,150px);gap:8px 12px;align-items:center;margin-bottom:16px}
.recipe-toolbar-row > .plan-builder{display:contents}
.recipe-toolbar-row > .plan-builder > summary{grid-column:1;grid-row:1;min-width:0;font-size:var(--text-small)}
.recipe-toolbar-row > .plan-builder > form{grid-column:1 / -1;grid-row:2;min-width:0}
.recipe-toolbar-row > .recipe-filters{grid-column:2;grid-row:1;display:block;margin:0;min-width:0}
.recipe-toolbar-row .recipe-filters select{min-width:0;min-height:44px;padding:8px;font-size:var(--text-small)}
@media(max-width:380px){.recipe-toolbar-row{grid-template-columns:minmax(0,1fr) 96px;column-gap:8px}.recipe-toolbar-row > .plan-builder > summary{font-size:12px}}

/* Shared presentation for every decision dialog; image viewers retain their own layout. */
.app-dialog{box-sizing:border-box;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;padding:24px;border:1px solid var(--line);border-radius:var(--radius-panel);background:var(--surface);color:var(--ink);font-family:var(--font-ui);box-shadow:var(--shadow)}
.app-dialog::backdrop{background:#263a3059}
.app-dialog h2{font-family:var(--font-ui);font-size:20px;line-height:1.35;font-weight:600;margin:0 0 16px}
.app-dialog p{font-size:var(--text-label);line-height:1.55;margin:0 0 20px;white-space:pre-line}
.app-dialog-actions{display:grid;grid-template-columns:1fr;gap:12px}
.app-dialog-actions button{width:100%;min-height:48px;margin:0;padding:12px 16px;border-radius:var(--radius-control);font-size:var(--text-label);white-space:normal}
@media(max-width:380px){.app-dialog{padding:20px}}