/* WEB-007 preview additions to meal-plan-udkast.css; same warm palette. */
.wp-tile { display:flex; align-items:center; justify-content:center; flex:none; box-sizing:border-box; border-radius:8px; background:var(--bg,#efe6d8); color:var(--fg,#8a6f52); font:italic 500 1.7rem/1 var(--serif, Georgia, serif); }
.mpx-workbench .mp2-day > summary .wp-tile { flex-basis:var(--mpx-thumb); width:var(--mpx-thumb); height:var(--mpx-thumb); }
.wp-face { display:block; box-sizing:border-box; width:100%; height:100%; padding:6px 0 0 9px; background:var(--bg,#efe6d8); color:var(--fg,#8a6f52); font:italic 500 2.6rem/1 var(--serif, Georgia, serif); }
.mp2-heading .mp2-idea { margin-top:.6rem; font-size:1.08rem; line-height:1.55; max-width:52ch; }
.mp2-heading .mpx-facts-pills { margin-top:1rem; }
.wp-body { margin:0 0 14px; font-size:1rem; line-height:1.62; color:var(--deep,#3b2412); max-width:60ch; }
.wp-time { margin:0 0 16px; padding-left:12px; border-left:2px solid #d9c7b3; font-size:.86rem; line-height:1.5; color:#6f5d4a; max-width:60ch; }
.wp-count { margin:6px 0 0; font-size:.8rem; line-height:1.5; color:#7d6c59; }
/* Safari carries the first section's bottom margin into the top of the second column, so "Til servering"
   stood 12px below "Det skal du bruge"; padding stays in its own column. */
.wp-ext .mpx-ing section { margin-bottom:0; padding-bottom:12px; }
.wp-card-foot { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-top:16px; }
.wp-card-foot .wp-source { gap:6px; color:var(--cream,#f7f2ee); text-decoration:none; }
.wp-card-foot .mp2-close-recipe { margin:0 0 0 auto; }
/* The plan's own section. Layout band: between the top and the week, full width. */
.mp2-page.wp-band .mp2-heading { grid-template-areas:"text side" "intro intro" "week ."; }
.wp-intro { grid-area:intro; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); grid-template-areas:"text grid" "cta grid"; grid-template-rows:auto 1fr; gap:0 56px; align-items:start; margin:12px 0 8px; padding:32px 0; border-top:1px solid rgba(59,36,18,.12); border-bottom:1px solid rgba(59,36,18,.12); }
.wp-intro h2 { margin:0; font-size:1.55rem; }
.wp-intro-text > p { margin:.55rem 0 0; font-size:1rem; line-height:1.6; color:#4d3d2d; }
.wp-intro .wp-promise { margin-top:1rem; }
.wp-intro-text { grid-area:text; }
.wp-intro-grid { grid-area:grid; }
.wp-intro .wp-cta { grid-area:cta; margin-top:22px; max-width:440px; }
.wp-intro .wp-cta p { text-align:left; }
.wp-intro-grid .eyebrow { margin:0 0 12px; }
/* Layout top: the week's stack with room between the cards, a little up and down; under it what
   carries over as small stacks, then the app. */
.mp2-page.wp-top .mp2-heading { grid-template-columns:minmax(0,1fr) 380px; grid-template-areas:"text side" "know side" "week side"; }
.wp-know { grid-area:know; margin:22px 0 0; }
.wp-know .eyebrow { margin:0 0 8px; }
.wp-know dl { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 18px; margin:0; font-size:.9rem; line-height:1.5; color:#4d3d2d; }
/* Gear side by side while there is room, one per line when there isn't. */
.wp-know dd i { display:inline-block; margin-right:22px; font-style:normal; }
.wp-know dt { font-weight:600; color:var(--deep,#3b2412); white-space:nowrap; }
.wp-know dd { margin:0; }
.wp-know dd span { color:#8a6f52; }
.wp-know a { color:var(--deep,#3b2412); font-weight:600; text-decoration:underline; text-decoration-color:rgba(59,36,18,.35); text-underline-offset:3px; }
.mp2-page.wp-top .mp2-workbench.mpx-workbench { grid-template-columns:minmax(0,1fr) 380px; }
.mp2-page.wp-top .mpx-hero-side { --card:80px; --step:62px; padding:12px 18px 16px; }
.mp2-page.wp-top .mpx-stack { height:calc(var(--card) + 44px); }
.wp-shared { margin-top:12px; padding-top:12px; border-top:1px solid rgba(59,36,18,.12); }
.wp-shared .eyebrow { margin:0 0 8px; text-align:center; }
.wp-shared ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; }
.wp-share { display:flex; align-items:center; gap:8px; min-width:0; }
/* Far enough apart that every card's letter reads; at 18px the K hid the H ("IK"). */
.wp-mini { position:relative; flex:none; width:calc(36px + (var(--n) - 1) * 27px); height:42px; }
.wp-mini > span { position:absolute; top:3px; left:calc(var(--j) * 27px); transform:rotate(var(--r)); }
.wp-mini img, .wp-mini .wp-tile { display:block; box-sizing:border-box; width:36px; height:36px; border:2px solid #fffaf3; border-radius:7px; box-shadow:0 4px 10px -5px rgba(59,36,18,.5); font-size:.95rem; }
.wp-share > span:last-child { display:flex; flex-direction:column; }
.wp-share strong { font:600 .86rem/1.2 var(--serif, Georgia, serif); color:var(--deep,#3b2412); }
.wp-share small { font-size:.7rem; letter-spacing:.04em; color:#8a6f52; }
.wp-also { margin:8px 0 0; text-align:center; font-size:.76rem; color:#6b5a47; }
/* A group is a button for its popover (Benjamin 29/9). Shown only where popovers exist; elsewhere the group
   stays as it looks. */
.wp-shared ul > li { display:flex; }
.wp-share { appearance:none; margin:-4px -8px; padding:4px 8px; border:0; border-radius:10px; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.wp-share:focus-visible { outline:3px solid var(--leaf,#4f7a4a); outline-offset:2px; }
@media(hover:hover) { .wp-share:hover strong { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; } }
.wp-share.is-tapped { animation:wp-tap-bg 520ms ease-out; }
.wp-share-pop { display:none; }
@supports selector(:popover-open) {
  .wp-share-pop:popover-open { display:block; position:fixed; inset:auto; margin:0; box-sizing:border-box; width:max-content; max-width:min(300px, calc(100vw - 32px)); padding:12px 14px 10px; border:1px solid #e3d8c8; border-radius:12px; background:#fffcf7; box-shadow:0 16px 32px -14px rgba(59,36,18,.4); color:var(--deep,#3b2412); opacity:0; }
  .wp-share-pop:popover-open.is-placed { opacity:1; animation:wp-pop 200ms ease-out; }
}
@keyframes wp-pop { from { opacity:0; transform:translateY(var(--from,4px)); } }
.wp-share-pop p { margin:0 0 4px; font:600 .95rem/1.25 var(--serif, Georgia, serif); }
.wp-shared .wp-share-pop ul { display:grid; justify-content:stretch; gap:0; }
.wp-share-pop a { display:flex; align-items:baseline; gap:10px; padding:6px 0; color:inherit; font-size:.9rem; line-height:1.35; text-decoration:none; }
.wp-share-pop a b { flex:none; width:2.4em; font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#8a6f52; }
.wp-share-pop a > span { text-decoration:underline; text-decoration-color:rgba(59,36,18,.25); text-underline-offset:3px; }
/* The week grid: what carries over, and how much of it goes into each evening. */
.wp-grid { display:grid; gap:10px; }
.wp-grid-head, .wp-grid-row { display:grid; grid-template-columns:minmax(7.5rem,1.3fr) repeat(5, minmax(0,1fr)); gap:6px; align-items:center; }
.wp-gh { display:flex; flex-direction:column; align-items:center; gap:5px; }
.wp-gh img, .wp-gh .wp-tile { width:40px; height:40px; border-radius:8px; object-fit:cover; font-size:1.1rem; box-shadow:0 2px 6px -3px rgba(59,36,18,.35); }
.wp-gh b { font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:#8a6f52; font-weight:600; }
.wp-gr-name { margin:0; display:flex; flex-direction:column; gap:1px; min-width:0; }
.wp-gr-name strong { font:600 1.06rem/1.25 var(--serif, Georgia, serif); color:var(--deep,#3b2412); }
.wp-gr-name span { font-size:.8rem; color:#8a6f52; }
.wp-cell { position:relative; display:flex; align-items:center; justify-content:center; height:46px; border-radius:12px; background:#f1e9de; }
.wp-cell.on { background:#dce8d2; color:#2f4d2b; font-size:.86rem; font-weight:600; white-space:nowrap; }
.wp-cell.join::before { content:""; position:absolute; right:100%; top:50%; width:6px; height:12px; transform:translateY(-50%); background:#dce8d2; }
/* The list: its name first, the count and the number of people under it. */
.mpx-list-head .wp-list-title { margin:0 0 8px; font-size:1.55rem; }
.wp-list-sub { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; }
.wp-list-sub p { margin:0; font-size:.84rem; color:var(--muted,#695d51); }
.wp-servings { background:#ebe0d0; }
/* What to have at home comes first: at the bottom it hid behind the list's own scroll. */
.wp-check-top { margin:12px 20px 4px; }
/* The overview: how plans are made, told once. */
.wp-how { margin:1.6rem 0 0; }
.wp-how h2 { margin:0 0 .8rem; font-size:1.35rem; }
.wp-how ol { list-style:none; counter-reset:how; margin:0; padding:0; display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.wp-how li { counter-increment:how; padding:16px 18px; border-radius:12px; background:#fbf6ef; box-shadow:inset 0 0 0 1px rgba(59,36,18,.08); font-size:.9rem; line-height:1.5; color:#5f4f3e; }
.wp-how li::before { content:counter(how); display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; margin-bottom:10px; border-radius:999px; background:#e9dcc9; color:#8a4a26; font:600 .8rem/1 var(--sans, sans-serif); }
.wp-how strong { display:block; margin-bottom:4px; font:600 1.02rem/1.3 var(--serif, Georgia, serif); color:var(--deep,#3b2412); }
.wp-promise { list-style:none; margin:.9rem 0 0; padding:0; display:grid; gap:.3rem; font-size:.9rem; color:#5f4f3e; }
.wp-promise li::before { content:"✓"; margin-right:.5rem; color:#6d8a4f; font-weight:700; }
.wp-plans { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); margin:1.5rem 0 3rem; }
.wp-plan { display:block; padding:1.1rem 1.2rem; border-radius:14px; background:#fffaf3; box-shadow:0 8px 18px -12px rgba(59,36,18,.35); color:inherit; text-decoration:none; }
.wp-plan h2 { margin:.8rem 0 .3rem; font-size:1.35rem; }
.wp-plan p { margin:0 0 .4rem; font-size:.92rem; color:#5f4f3e; }
.wp-plan .wp-plan-facts { color:#8a6f52; font-size:.84rem; }
.wp-plan ol { margin:.5rem 0 0; padding-left:1.2rem; font-size:.86rem; color:#5f4f3e; }
.wp-plan-thumbs { display:flex; gap:6px; }
.wp-plan-thumbs img, .wp-plan-thumbs .wp-tile { width:56px; height:56px; border-radius:8px; object-fit:cover; font-size:1.3rem; }
/* Layout B2 (Benjamin 29/9). Orange belongs to the letter cards, the page's pictures; labels and days
   in the text are ink. The week's card is named in a tinted head like the list's, and ends in the app
   with the same weight as the list's own foot. */
.wp-b2 .eyebrow { color:var(--deep-soft,#5a3d24); }
/* What the box is taller than the text beside it goes under good to know, not between rows. */
.mp2-page.wp-b2 .mp2-heading { grid-template-areas:"text side" "know side"; grid-template-rows:auto 1fr; }
.mp2-page.wp-b2 .wp-know { align-self:start; }
/* The week and the list are named alike on one line, each with its print in its own corner (Benjamin 29/9);
   the week stays open, the list keeps its box, and the box's head holds only the count and the people. */
.wp-bar { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:28px 0 0; padding-bottom:12px; }
.wp-bar h2 { margin:0; font-size:1.55rem; line-height:1.25; }
.wp-bar .mp2-text-button { flex:none; padding:4px 0; font-size:.8rem; color:var(--muted,#695d51); }
.wp-b2 .mpx-list-head { padding:12px 20px; }
/* The name now sits over the box in the list's slot, so the box gives way to it instead of reaching past the week. */
@media(min-width:1001px) {
  .wp-b2 .mpx-list-slot { display:flex; flex-direction:column; }
  .wp-b2 .mpx-list { flex:0 1 auto; min-height:0; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); }
}
@media(max-width:1000px) {
  .wp-b2 .mpx-list { margin-top:0; scroll-margin-top:120px; }
}
@media print {
  .wp-bar .mp2-text-button { display:none!important; }
  body:not([data-plan-print="shopping"]) .wp-list-bar { display:none!important; }
}
.mp2-page.wp-b2 .mpx-hero-side { padding:0; overflow:hidden; border:1px solid #d9cdbd; border-radius:14px; background:#fffcf7; }
.wp-b2 .mpx-list { border-color:#d9cdbd; border-radius:14px; }
.wp-card-head { padding:16px 20px 12px; border-bottom:1px solid #e9e2d8; background:#f6efe4; }
.wp-card-head h2 { margin:0; font-size:1.55rem; line-height:1.25; }
.wp-card-body { padding:4px 20px 14px; }
.wp-b2 .mpx-stack-caption { color:var(--muted,#695d51); }
.wp-b2 .wp-cta { margin:0; padding:12px 20px 14px; border-top:1px solid #e9e2d8; background:#fbf6ef; }
.wp-b2 .wp-cta p { text-align:left; }
.wp-b2 .wp-cta .mp2-action { padding:9px 14px; font-size:.82rem; }
/* Good to know as one note on a tinted surface, without rules beside the dishes (Benjamin 29/9: rules made
   the left side one long table), so the evenings are the only ruled list. The labels keep to the line of the
   dishes' titles below (day + gap + thumb + gap, less the note's padding), unless a label needs more. */
.wp-b2 .wp-know { margin-top:28px; padding:16px 20px 18px; border-radius:12px; background:#f1e9dd; }
.wp-b2 .wp-know h2 { margin:0 0 12px; font-size:1.12rem; line-height:1.25; }
/* A row per post (Benjamin 29/9, phone); a post of one evening leads down to it, the day at its end. */
.wp-posts { display:grid; grid-template-columns:minmax(calc(var(--mpx-day,44px) + var(--mpx-thumb,64px) + 2 * var(--mpx-gap,16px) - 20px), max-content) minmax(0,1fr) auto; font-size:.9rem; line-height:1.5; color:#4d3d2d; }
.wp-posts > div { display:contents; }
.wp-post { grid-column:1 / -1; display:grid; grid-template-columns:subgrid; align-items:baseline; padding:5px 0; color:inherit; text-decoration:none; }
/* The row is the link: the page's own link look (bold, underlined) is for words, not rows. */
.wp-know a.wp-post { color:inherit; font-weight:inherit; text-decoration:none; }
.wp-post b { padding-right:10px; font-weight:600; color:var(--deep,#3b2412); white-space:nowrap; }
.wp-post-go { padding-left:12px; white-space:nowrap; font-size:.8rem; font-weight:600; color:var(--deep,#3b2412); }
@media(hover:hover) { a.wp-post:hover .wp-post-go { text-decoration:underline; text-underline-offset:3px; } }
/* The facts as their own layer on the note: the card's light surface where the page's pills are tinted. */
.wp-b2 .wp-know .mpx-facts-pills { margin:0 0 14px; }
.wp-b2 .wp-know .mpx-facts-pills > span { background:#fffcf7; box-shadow:inset 0 0 0 1px #e3d8c8; }
.wp-b2 .wp-know .mpx-facts-pills:last-child { margin-bottom:0; }
/* A week's posts change with the pick: each week's rows sit in the list's own grid. */
.wp-know dl > div { display:contents; }
/* A week without posts keeps its facts, without the note around them (Hurtig uge, §18.5). */
.wp-b2 .wp-know.wp-know-bare { padding:0; background:none; }
/* Where a carried ingredient also goes (§18.8), after the ingredient, quieter. */
.wp-also-day { white-space:nowrap; font-size:.8rem; color:var(--muted,#695d51); }
.wp-also-day::before { content:"· "; }
/* Other plans at the foot, two cards in a row while there is room. */
.wp-others { margin:48px 0 8px; padding-top:28px; border-top:1px solid rgba(59,36,18,.12); }
.wp-others h2 { margin:0 0 16px; font-size:1.55rem; }
.wp-others-list { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.wp-other h3 { margin:.7rem 0 .3rem; font-size:1.2rem; }
.wp-other .wp-plan-thumbs img, .wp-other .wp-plan-thumbs .wp-tile { width:44px; height:44px; font-size:1.05rem; }
.wp-other-go { display:inline-block; margin-top:.3rem; font-size:.84rem; font-weight:600; color:var(--deep,#3b2412); }
/* The open day in three parts (Benjamin 1/10): our text with the evening's one box, the ingredients, the
   source. Side by side where the day is wide enough, one under the other on a phone. */
.wp-b2 .wp-ext { container-type:inline-size; }
.wp-dish-text, .wp-dish-ing { min-width:0; }
.wp-dish .wp-body { margin:0; max-width:62ch; }
.wp-dish-ing { margin-top:22px; }
@container (min-width:40rem) {
  .wp-dish { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:0 36px; align-items:start; }
  .wp-dish-ing { margin-top:0; }
}
/* What the evening asks, in one box, each label said once over its lines; ours in the leaf's green. */
.wp-ahead { margin:16px 0 0; padding:12px 16px; border-radius:10px; background:#f3ece2; }
.wp-ahead > div + div { margin-top:10px; }
.wp-ahead dt { margin:0 0 2px; font-size:.78rem; line-height:1.4; font-weight:600; color:#7d6c59; }
.wp-ahead dd { margin:0; font-size:.92rem; line-height:1.55; color:var(--deep,#3b2412); }
.wp-ahead dd + dd { margin-top:6px; }
.wp-ahead .wp-ours dt { color:#4f6a3a; }
/* The open day's content starts at the day's name, not on the thumb's line under the title, and ends where
   the day's own head ends (its chevron, the summary's 6px); «Luk» with it (Benjamin 29/9). */
.wp-b2 .mpx-recipe { padding-left:0; padding-right:6px; }
/* The ingredients in one column, the amount in its own, set right against the name (Benjamin 1/10: two
   columns read in a zigzag); no rules (29/9). Where else a carried ingredient goes is a quiet line under
   its name. */
.wp-b2 .mpx-ing { columns:auto; margin-top:0; }
.wp-ing { display:grid; grid-template-columns:fit-content(7.5em) minmax(0,1fr); column-gap:12px; }
.wp-b2 .mpx-ing .wp-ing > li { display:grid; grid-column:1 / -1; grid-template-columns:subgrid; align-items:baseline; padding:4px 0; border:0; font-size:.92rem; line-height:1.45; }
.wp-ing-amt { font-weight:600; text-align:right; color:var(--deep,#3b2412); font-variant-numeric:tabular-nums; overflow-wrap:normal; }
.wp-ing-name .wp-also-day { display:block; white-space:normal; font-size:.78rem; line-height:1.4; }
.wp-ing-name .wp-also-day::before { content:none; }
.wp-ing-for { letter-spacing:.04em; }
.wp-count:empty { display:none; }
.wp-dish ~ .wp-card-foot { margin-top:22px; }
/* The longest evening's two dishes as one choice at the top of the day; the plan's own is picked. */
.wp-choice { margin:0 0 18px; max-width:60ch; }
.wp-choice > p { margin:0 0 6px; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:#7d6c59; }
.wp-choice > div { position:relative; isolation:isolate; display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:12px; box-shadow:inset 0 0 0 1px #e3d8c8; }
/* The picked dish is a pill that slides to the other (Benjamin 29/9: the swap blinked). */
.wp-choice > div::before { content:""; position:absolute; z-index:-1; top:4px; bottom:4px; left:4px; width:calc(50% - 6px); border-radius:9px; background:#f6efe4; box-shadow:inset 0 0 0 1px #d9cdbd; transition:transform 560ms cubic-bezier(.45,0,.25,1); }
.wp-choice > div[data-picked="alt"]::before { transform:translateX(calc(100% + 4px)); }
.wp-choice button { display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; padding:9px 12px; border:0; border-radius:9px; background:transparent; color:var(--muted,#695d51); font:inherit; text-align:left; cursor:pointer; }
.wp-choice button b { font:600 .98rem/1.25 var(--serif, Georgia, serif); }
.wp-choice button span { font-size:.78rem; }
.wp-choice button { transition:color 300ms ease; }
.wp-choice button[aria-pressed="true"] { color:var(--deep,#3b2412); }
/* After the week is bought: what to buy, check and have over when the quicker dish is picked. */
.wp-swap-math { margin:12px 2px 0; font-size:.84rem; line-height:1.5; color:var(--muted,#695d51); }
.wp-swap-math > p { margin:0 0 4px; font-weight:600; color:var(--deep,#3b2412); }
.wp-swap-math dl { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:3px 14px; margin:0; }
.wp-swap-math dt { font-weight:600; color:var(--deep,#3b2412); }
.wp-swap-math dd { margin:0; }
.wp-choice button:focus-visible { outline:3px solid var(--leaf,#4f7a4a); outline-offset:2px; }
[data-wp-when][hidden], [data-wp-on][hidden] { display:none!important; }
.wp-menu { display:none; }
@media(max-width:760px) {
  .wp-body { font-size:.96rem; }
  .mp2-page.wp-band .mp2-heading { grid-template-areas:"text" "side" "intro" "week"; }
  .wp-intro { grid-template-columns:1fr; grid-template-areas:"text" "grid" "cta"; grid-template-rows:auto; gap:24px; margin-top:24px; padding:24px 0; }
  .wp-intro .wp-cta { margin-top:0; }
  .wp-grid-head, .wp-grid-row { grid-template-columns:repeat(5, minmax(0,1fr)); }
  .wp-gh-name { display:none; }
  .wp-gr-name { grid-column:1 / -1; flex-direction:row; align-items:baseline; gap:8px; margin-top:4px; }
  .wp-cell { height:38px; font-size:.78rem; }
  .wp-gh img { width:34px; height:34px; }
  .mp2-page.wp-top .mp2-heading { grid-template-columns:1fr; grid-template-areas:"text" "side" "know" "week"; }
  .mp2-page.wp-b2 .mp2-heading { grid-template-areas:"text" "side" "know"; grid-template-rows:none; }
  .wp-b2 .mpx-list { scroll-margin-top:110px; }
  .wp-bar { margin-top:26px; }
  .wp-b2 .wp-know { padding:14px 16px 16px; }
  .wp-know { margin-top:24px; }
  .wp-know dl { grid-template-columns:1fr; gap:2px; }
  .wp-know dd + dt { margin-top:10px; }
  .mp2-page.wp-top .mpx-hero-side { --card:74px; --step:60px; }
  .wp-swap-math dl { grid-template-columns:1fr; gap:0; }
  .wp-swap-math dd + dt { margin-top:6px; }
  /* On a phone the posts stack: the label and the day on a line, the text under them, a hairline between. */
  .wp-posts { display:block; }
  .wp-post { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"label go" "text text"; gap:1px 0; padding:11px 0; border-top:1px solid rgba(59,36,18,.12); }
  .wp-post b { grid-area:label; }
  .wp-post-text { grid-area:text; }
  .wp-post-go { grid-area:go; }
  /* The shared header wraps under the logo here; the menu folds into «Menu» at the right instead,
     as on the homepage draft (home-draft.css, Benjamin 29/9). */
  .ed-header .ed-header-inner { display:flex; min-height:64px; padding-block:10px; gap:16px; }
  .ed-header .ed-brand img { width:98px; height:auto; }
  .ed-header-inner > .ed-nav { display:none; }
  .wp-menu { display:block; margin-left:auto; }
  .wp-menu > summary { display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 0 8px 12px; list-style:none; cursor:pointer; font-size:.94rem; font-weight:500; }
  .wp-menu > summary::-webkit-details-marker { display:none; }
  .wp-menu > summary::marker { content:''; }
  .wp-menu > summary svg { width:20px; height:20px; }
  .wp-menu > summary path { transition:transform 200ms ease, opacity 200ms ease; }
  .wp-menu[open] > summary .wp-menu-middle { opacity:0; }
  .wp-menu[open] > summary .wp-menu-top { transform:translateY(6px); }
  .wp-menu[open] > summary .wp-menu-bottom { transform:translateY(-6px); }
  .wp-menu-panel { position:absolute; z-index:100; inset:100% 0 auto; max-height:min(72svh, 560px); overflow-y:auto; overscroll-behavior:contain; padding:8px 20px 22px; background:var(--cream,#f7f2ee); border-bottom:1px solid var(--hairline,#ddd6cb); box-shadow:0 18px 28px #3b24121a; }
  .wp-menu-panel .ed-nav { display:flex; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:0; margin:0; font-size:1.1rem; }
  .wp-menu-panel .ed-nav > a, .wp-menu-panel .ed-about > summary { padding:13px 0; border-bottom:1px solid var(--hairline,#ddd6cb); }
  .wp-menu-panel .ed-about > summary { display:flex; align-items:center; justify-content:space-between; list-style:none; }
  .wp-menu-panel .ed-about > summary::-webkit-details-marker { display:none; }
  .wp-menu-panel .ed-about > summary::after { content:""; width:7px; height:7px; margin-right:4px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform 200ms ease; }
  .wp-menu-panel .ed-about[open] > summary::after { transform:translateY(2px) rotate(-135deg); }
  .wp-menu-panel .ed-about > div { position:static; min-width:0; padding:6px 0 10px; border:0; border-radius:0; box-shadow:none; background:transparent; }
  .wp-menu-panel .ed-about > div a { padding:10px 14px; font-size:.95rem; }
  .wp-menu-panel .ed-nav .ed-get { align-self:flex-start; margin-top:18px; padding:11px 18px; font-size:.95rem; border:0; }
}
/* Taps on a phone (Benjamin 29/9). iOS's dark flash gives way to the app's mild orange, lit by the page's
   script on a real tap only, so a scroll across the days lights nothing; and a tap is not a hover, so what
   the mouse lights stays unlit after a finger has been there (the title stayed orange, the stepper kept a
   round shade). Quick taps are taps, not a double tap to zoom. */
html { -webkit-tap-highlight-color:transparent; }
.mp2-page :is(a, button, summary, label), .ed-header :is(a, summary) { touch-action:manipulation; }
.mp2-day > summary, a.wp-post { position:relative; isolation:isolate; }
.mp2-day > summary::before, a.wp-post::before { content:""; position:absolute; z-index:-1; inset:2px -10px; border-radius:10px; background:hsl(25 85% 48% / .1); opacity:0; pointer-events:none; }
.mp2-day > summary.is-tapped::before, a.wp-post.is-tapped::before { animation:wp-tap 560ms ease-out; }
.mpx-servings button.is-tapped, .wp-choice button.is-tapped, .mpx-facts-pills > a.is-tapped { animation:wp-tap-bg 520ms ease-out; }
@keyframes wp-tap { from { opacity:1; } to { opacity:0; } }
@keyframes wp-tap-bg { from { background-color:hsl(25 85% 48% / .16); } }
@media(hover:none) {
  .mp2-day:not([open]) > summary:hover .mp2-day-title { color:inherit; }
  .mpx-servings button:hover:not(:disabled) { background:transparent; }
  .mp2-action:hover { background:var(--deep,#3b2412); }
  .mpx-cta .mpx-cta-more:hover { background:transparent; }
  .ed-nav a:not([aria-current]):hover, .ed-nav summary:hover { color:inherit; }
  .mp2-back:hover { text-decoration:none; }
}
/* The day opens slower (Benjamin 1/10): its card and the title's colour come over the unfold (webplaner.js),
   not ahead of it; closing keeps the draft's 460 ms. */
.mpx-workbench .mp2-day { transition:background-color 560ms ease, box-shadow 560ms ease, border-color 400ms ease; }
.mp2-day > summary .mp2-day-title, .mp2-day > summary .mpx-dayname { transition:color 420ms ease; }
.mp2-day > summary .mp2-chevron svg { transition:transform 560ms cubic-bezier(.45,0,.25,1); }
.mp2-day.is-closing > summary .mp2-chevron svg { transition-duration:420ms; }
@media(prefers-reduced-motion:reduce) {
  .wp-choice > div::before, .wp-choice button, .wp-menu > summary path { transition:none; }
  .mpx-workbench .mp2-day, .mp2-day > summary .mp2-day-title, .mp2-day > summary .mpx-dayname, .mp2-day > summary .mp2-chevron svg { transition:none; }
  .is-tapped, .is-tapped::before { animation-duration:1ms!important; }
  .wp-share-pop.is-placed { animation:none; }
}
/* The count of items is the way to the list (Benjamin 29/9, in place of «Se indkøbslisten»). */
.wp-b2 .wp-know .mpx-facts-pills > a { padding:4px 11px; border-radius:999px; background:#fffcf7; box-shadow:inset 0 0 0 1px #cdbba5; color:var(--deep,#3b2412); font-size:.8rem; font-weight:600; line-height:1.35; text-decoration:none; }
@media(hover:hover) { .wp-b2 .wp-know .mpx-facts-pills > a:hover { box-shadow:inset 0 0 0 1px var(--deep,#3b2412); } }
/* Curated plans (brief v8): the promises, the week's idea and the day's why. */
.wp-b2 .mp2-heading .wp-promise { margin:.8rem 0 0; }
.wp-day-why { display:block; margin-top:3px; font-size:.8rem; line-height:1.4; color:#6f5d4a; font-style:italic; }
/* A curated plan's top (Benjamin 1/10): the week's three numbers large in the serif, a small label under
   each, split by hairlines; the list's number leads down to the list. */
.wp-figs { display:flex; flex-wrap:wrap; row-gap:12px; margin:1.2rem 0 0; }
.wp-fig { display:flex; flex-direction:column; gap:4px; padding:0 16px; border-left:1px solid #e0d4c4; color:var(--deep,#3b2412); text-decoration:none; }
.wp-fig:first-child { padding-left:0; border-left:0; }
.wp-fig b { font:600 2.1rem/1 var(--serif, Georgia, serif); font-variant-numeric:lining-nums; }
.wp-fig b small { font-size:.5em; font-weight:500; }
.wp-fig > span { font-size:.66rem; letter-spacing:.07em; text-transform:uppercase; font-weight:600; color:#7d6c59; white-space:nowrap; }
a.wp-fig > span { color:var(--deep,#3b2412); text-decoration:underline; text-decoration-color:rgba(59,36,18,.3); text-underline-offset:3px; }
@media(hover:hover) { a.wp-fig:hover > span { text-decoration-color:currentColor; } }
.wp-b2 .mp2-heading .wp-figs + .wp-promise { margin-top:1.1rem; }
/* The promises beside the figures (Benjamin 1/10), under them where the column is too narrow. */
.wp-b2 .mp2-heading .wp-lede { display:flex; flex-wrap:wrap; align-items:center; gap:14px 40px; margin-top:1.2rem; }
.wp-b2 .mp2-heading .wp-lede > .wp-figs, .wp-b2 .mp2-heading .wp-lede > .wp-promise { margin:0; }
/* The week at a glance: the curator's reason and five columns of letter cards, tilted as in the stack
   they replace. */
.wp-map-lead { margin:12px 0 0; font-size:.94rem; line-height:1.6; color:var(--deep,#3b2412); }
.wp-map { margin:16px -6px 0; }
.wp-map-days { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--n,5), minmax(0,1fr)); }
.wp-map-day { display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 3px 6px; border-radius:10px; color:var(--deep,#3b2412); text-align:center; text-decoration:none; }
.wp-map-day img, .wp-map-day .wp-tile { box-sizing:border-box; width:56px; max-width:100%; height:auto; aspect-ratio:1; margin-bottom:6px; border:2px solid #fff; border-radius:9px; object-fit:cover; box-shadow:0 7px 14px -8px rgba(59,36,18,.6); transform:rotate(var(--r,0deg)); transition:transform 220ms cubic-bezier(.2,.8,.2,1); font-size:1.4rem; }
@media(hover:hover) { .wp-map-day:hover img, .wp-map-day:hover .wp-tile { transform:rotate(0deg) translateY(-3px); } }
.wp-map-day b { font-size:.64rem; letter-spacing:.09em; text-transform:uppercase; font-weight:600; }
.wp-map-day > span { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; max-width:100%; overflow:hidden; overflow-wrap:break-word; font:500 .76rem/1.25 var(--serif, Georgia, serif); color:#5f4f3e; }
.wp-map-day .wp-hy { hyphens:auto; -webkit-hyphens:auto; }
.wp-map-day.is-tapped { animation:wp-tap-bg 520ms ease-out; }