/* Components — lifted from the original page so the new site inherits its look rather than
   inventing one. Class names are unchanged, which is what lets the Razor partials map onto the
   original markup one-for-one. New surfaces (sign-in, the preference picker, the shortfall
   panel) are at the bottom and use only the tokens above. */

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--line);background:var(--card)}
.masthead .wrap{display:flex;flex-direction:column;gap:14px;padding-top:30px;padding-bottom:26px}
.brandline{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
h1{font-size:clamp(30px,5vw,46px);letter-spacing:-.015em}
h1 em{font-style:italic;color:var(--accent)}
.subtitle{max-width:62ch;color:var(--ink-2);font-size:16px}
.facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.fact{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.03em;padding:4px 9px;border:1px solid var(--line-strong);border-radius:999px;color:var(--ink-2);background:var(--ground)}
.fact.no{color:var(--berry);border-color:var(--berry);background:var(--berry-soft)}
.factlabel{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);align-self:center;min-width:48px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:20;background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.nav .wrap{display:flex;gap:2px;overflow-x:auto;padding:0 20px;scrollbar-width:thin}
.nav button{
  appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  padding:13px 12px;font:inherit;font-size:14.5px;color:var(--muted);cursor:pointer;white-space:nowrap;
}
.nav button:hover{color:var(--ink)}
.nav button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}

main{padding:32px 0 72px}
.panel[hidden]{display:none}
.lede{max-width:66ch;color:var(--ink-2);margin-bottom:22px}

/* ---------- section headers ---------- */
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.sechead h2{font-size:clamp(22px,3vw,30px)}
h3.sub{font-size:20px;margin:34px 0 12px;padding-bottom:7px;border-bottom:1px solid var(--line)}

/* ---------- week tabs ---------- */
.weektabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 24px}
.weektab{
  appearance:none;cursor:pointer;font:inherit;text-align:left;
  background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:9px 14px;color:var(--ink);min-width:150px;
}
.weektab:hover{border-color:var(--accent)}
.weektab[aria-selected="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.weektab .wk{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block}
.weektab[aria-selected="true"] .wk{color:var(--accent-ink)}
.weektab .ph{font-size:15px;font-weight:600}

/* ---------- phase banner ---------- */
.phasebar{
  display:flex;gap:18px;flex-wrap:wrap;align-items:center;
  border-left:3px solid var(--accent);background:var(--card);
  border-radius:0 var(--radius) var(--radius) 0;padding:14px 18px;margin-bottom:22px;box-shadow:var(--shadow);
}
.phasebar.f2{border-left-color:var(--ochre)}
.phasebar > div{display:flex;flex-direction:column;gap:7px}
.phasebar h3{font-size:20px}
.phasebar p{font-size:14.5px;color:var(--ink-2);max-width:62ch}

/* ---------- day grid ---------- */
.days{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.day{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.day > header{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 16px;background:var(--card-2);border-bottom:1px solid var(--line)}
.day h4{font-size:18px}
.daynum{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.meals{display:flex;flex-direction:column}
.meal{display:grid;grid-template-columns:78px 1fr;gap:12px;padding:11px 16px;border-top:1px solid var(--line)}
.meal:first-child{border-top:0}
.meal > .lbl{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.meal.a > .lbl{color:var(--accent)}
.meal.s > .lbl{color:var(--berry)}
.meal .body{font-size:15px}
.meal .body .rl{display:block;margin-top:2px}
.rl{font-size:13.5px;font-family:"IBM Plex Mono",monospace;letter-spacing:.02em}
.day footer{display:flex;gap:6px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--line);background:var(--card-2)}
.chip{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;padding:3px 8px;border-radius:999px;border:1px solid var(--line-strong);color:var(--ink-2)}
.chip.st{background:var(--ochre-soft);border-color:var(--ochre);color:var(--ochre)}
.chip.fr{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.chip.fi{background:var(--berry-soft);border-color:var(--berry);color:var(--berry)}

/* ---------- recipes ---------- */
.recipefilter{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 8px;align-items:center}
.recipefilter input{
  font:inherit;padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--radius);
  background:var(--card);color:var(--ink);min-width:230px;
}
.pill{appearance:none;cursor:pointer;font:inherit;font-size:13.5px;padding:6px 12px;border-radius:999px;border:1px solid var(--line-strong);background:var(--card);color:var(--ink-2)}
.pill[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.recipes{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;margin-top:16px}
.recipe{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);scroll-margin-top:80px}
.recipe.flash{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft),var(--shadow)}
.recipe h4{font-size:19.5px;margin-bottom:4px}
.rmeta{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 14px}
.recipe h5{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 6px;font-weight:500}
.ing{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column}
.ing li{display:grid;grid-template-columns:88px 1fr;gap:10px;font-size:14.5px;padding:3px 0;border-bottom:1px dotted var(--line)}
.ing li:last-child{border-bottom:0}
.ing .q{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.steps{margin:0;padding-left:1.25em;font-size:14.5px;display:flex;flex-direction:column;gap:5px}
.steps li::marker{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted)}
.note{margin-top:12px;padding:9px 12px;background:var(--card-2);border-left:2px solid var(--accent);border-radius:0 6px 6px 0;font-size:13.5px;color:var(--ink-2)}

/* ---------- shopping ---------- */
.shopgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;margin-top:16px}
.shopcat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.shopcat h4{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;font-weight:600}
.shopcat ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1px}
.shopcat li label{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;padding:4px 0;cursor:pointer;border-bottom:1px dotted var(--line)}
.shopcat li:last-child label{border-bottom:0}
.shopcat input[type=checkbox]{margin:4px 0 0;accent-color:var(--accent);width:15px;height:15px;flex:none}
.shopcat input:checked + span{text-decoration:line-through;color:var(--muted)}
.shoptools{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* ---------- prep ---------- */
.preplist{display:flex;flex-direction:column;gap:10px;margin-top:14px;counter-reset:p}
.prepitem{display:grid;grid-template-columns:34px 1fr;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.prepitem .n{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;color:var(--accent);border-right:1px solid var(--line);padding-right:8px;font-variant-numeric:tabular-nums}
.prepitem strong{display:block;font-size:15.5px}
.prepitem p{font-size:14px;color:var(--ink-2);margin-top:2px}
.timetag{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted)}

/* ---------- guide ---------- */
.twocol{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card.yes{border-top:3px solid var(--accent)}
.card.no{border-top:3px solid var(--berry)}
.card.mid{border-top:3px solid var(--ochre)}
.card h4{font-size:19px;margin-bottom:8px}
.card ul{margin:8px 0 0;padding-left:1.1em;font-size:14.5px;display:flex;flex-direction:column;gap:3px}
.card p{font-size:14.5px;color:var(--ink-2)}
table{border-collapse:collapse;width:100%;font-size:14.5px}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);margin-top:14px;box-shadow:var(--shadow)}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;background:var(--card-2)}
tr:last-child td{border-bottom:0}
.disclaimer{margin-top:26px;font-size:13.5px;color:var(--muted);max-width:70ch;border-top:1px solid var(--line);padding-top:14px}

footer.pagefoot{border-top:1px solid var(--line);background:var(--card);padding:22px 0;color:var(--muted);font-size:13.5px}

@media (max-width:520px){
  .meal{grid-template-columns:66px 1fr;gap:9px;padding:10px 13px}
  .ing li{grid-template-columns:76px 1fr}
  body{font-size:16px}
}
@media (prefers-reduced-motion:no-preference){
  .day,.recipe{transition:border-color .18s ease, box-shadow .18s ease}
}
@media print{
  .nav,.weektabs,.shoptools,.recipefilter{display:none!important}
  .panel[hidden]{display:block!important}
  body{background:#fff;color:#000;font-size:9.5pt;line-height:1.4}
  .wrap{max-width:none;padding:0}
  main{padding:0}
  .masthead .wrap{padding:0 0 10px}
  h1{font-size:26pt}
  .days{grid-template-columns:repeat(3,1fr);gap:7px}
  .recipes{grid-template-columns:repeat(2,1fr);gap:8px}
  .shopgrid{grid-template-columns:repeat(3,1fr);gap:8px}
  .twocol{grid-template-columns:repeat(2,1fr);gap:8px}
  .meal{padding:6px 10px;grid-template-columns:62px 1fr}
  .meal .body{font-size:9pt}
  .day > header,.day footer{padding:7px 10px}
  .recipe{padding:12px}
  .recipe h4{font-size:13pt}
  .ing li{padding:1px 0;font-size:9pt}
  .steps{font-size:9pt;gap:3px}
  .day,.recipe,.shopcat,.card,.prepitem,.phasebar,.tablewrap{break-inside:avoid;box-shadow:none}
  .rl{display:none!important}
  .lede,.disclaimer{max-width:none}
  h3.sub{margin:16px 0 8px}
}

/* ============================================================================
   New surfaces
   Everything below was not in the original single-page design: navigation as
   links rather than tab buttons, sign-in, the preference picker, the shortfall
   panel, the diet chooser. All of it is built from the tokens above — no new
   colours, no new radii, no new type sizes.
   ============================================================================ */

/* ---------- masthead extras ---------- */
.topright{margin-left:auto;display:flex;align-items:center;gap:14px}
.langswitch{display:flex;gap:2px}
.langswitch a{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;
  padding:3px 7px;border-radius:4px;color:var(--muted);text-decoration:none;
}
.langswitch a:hover{color:var(--ink);background:var(--card-2)}
.langswitch a.current{color:var(--accent);background:var(--accent-soft);font-weight:600}
.themetoggle{
  appearance:none;background:none;border:1px solid var(--line-strong);border-radius:999px;
  width:26px;height:26px;line-height:1;cursor:pointer;color:var(--muted);font-size:13px;padding:0;
}
.themetoggle:hover{color:var(--ink);border-color:var(--ink-2)}
.linkbtn{
  appearance:none;background:none;border:0;padding:0;font:inherit;font-size:14px;
  color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
.inlineform{display:inline}

/* ---------- nav as links ---------- */
.nav a{
  display:inline-block;border-bottom:2px solid transparent;
  padding:13px 12px;font-size:14.5px;color:var(--muted);text-decoration:none;white-space:nowrap;
}
.nav a:hover{color:var(--ink)}
.nav a[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;appearance:none;cursor:pointer;font:inherit;font-size:15px;font-weight:600;
  background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:var(--radius);
  padding:10px 18px;text-decoration:none;
}
.btn:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn.ghost{background:var(--card);color:var(--ink);border-color:var(--line-strong);font-weight:400}
.btn.ghost:hover{border-color:var(--ink-2);background:var(--card-2)}
/* In dark mode --accent is a light mint, so white text on it fails contrast; the dark ground
   is the readable choice. Declared for both the media query and the explicit toggle. */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn{color:var(--ground)}}
:root[data-theme="dark"] .btn{color:var(--ground)}

/* ---------- form fields ---------- */
.searchfield,.numfield{
  font:inherit;background:var(--card);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--radius);padding:8px 12px;
}
.searchfield{min-width:min(320px,100%)}
.numfield{width:88px}
.searchfield:focus-visible,.numfield:focus-visible{border-color:var(--accent)}

/* ---------- flash and hints ---------- */
.flash{
  background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent-ink);
  border-radius:var(--radius);padding:11px 15px;margin-bottom:20px;font-size:15px;
}
.hint{color:var(--muted);font-size:14px}
.muted{color:var(--muted)}

/* ---------- shortfall panel ---------- */
/* Deliberately loud: an incomplete plan is the one thing the user must not miss. */
.warnpanel{border-left:3px solid var(--berry);background:var(--berry-soft);padding:18px 20px;border-radius:var(--radius);margin-bottom:26px}
.warnpanel h3.sub{margin-top:0;border-bottom-color:var(--berry);color:var(--berry)}
.shortfalls{margin:0;padding-left:20px;display:grid;gap:9px}
.shortfalls li{font-size:15px}
.shortfalls .hint{display:block;margin-top:2px}

/* ---------- diet chooser ---------- */
.dietpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-bottom:8px}
.dietopt{
  display:grid;gap:3px;cursor:pointer;padding:13px 15px;
  background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius);
}
.dietopt:hover{border-color:var(--ink-2)}
.dietopt.on{border-color:var(--accent);background:var(--accent-soft)}
.dietopt input{position:absolute;opacity:0;pointer-events:none}
.dietopt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.dname{font-weight:600}
.dsum{font-size:14px;color:var(--muted);line-height:1.45}

.restrictions{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.restopt{
  display:grid;grid-template-columns:auto 1fr;gap:3px 10px;cursor:pointer;padding:12px 14px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
}
.restopt input{grid-row:1/3;align-self:start;margin-top:4px;accent-color:var(--accent)}
.restopt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.rname{font-weight:600}
.rdesc{grid-column:2;font-size:14px;color:var(--muted);line-height:1.45}

/* ---------- preference picker ---------- */
/* Five radio buttons per food, styled as a segmented control. The whole point of the site is
   that this list is quick to fill in, so the rows are dense and the labels are one tap wide. */
.preflegend{display:flex;gap:6px;margin:16px 0 10px;flex-wrap:wrap}
.preflegend .lvl{padding:3px 9px;border-radius:999px;font-size:11.5px}
.foodrows{display:grid;gap:2px}
.foodrow{
  display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap;
  padding:6px 10px;border-radius:6px;
}
.foodrow:nth-child(odd){background:var(--card-2)}
.foodrow[data-level="Never"]{background:var(--berry-soft)}
.foodrow[data-level="Love"]{background:var(--accent-soft)}
.foodrow[data-level="Dislike"]{background:var(--ochre-soft)}
.fname{font-size:15px}
.fchoices{display:flex;gap:2px}
.fchoices input{position:absolute;opacity:0;width:0;height:0}
.fchoices label{
  cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.04em;
  padding:4px 8px;border:1px solid var(--line-strong);background:var(--card);color:var(--muted);
  white-space:nowrap;
}
.fchoices label:first-of-type{border-radius:999px 0 0 999px}
.fchoices label:last-of-type{border-radius:0 999px 999px 0}
.fchoices input:checked + label{border-color:var(--accent);background:var(--accent);color:var(--card)}
/* Neutral is the default for ~90 foods. Highlighting it makes every row look deliberately set
   and buries the handful of rows the user actually cared about, so the selected Neutral stays
   quiet and only real opinions get colour. */
.fchoices input[value="Neutral"]:checked + label{
  background:var(--card-2);border-color:var(--line-strong);color:var(--ink-2);
}
.fchoices input:focus-visible + label{outline:2px solid var(--accent);outline-offset:1px}
.lvl-never{color:var(--berry);border-color:var(--berry)}
.fchoices input[value="Never"]:checked + label{background:var(--berry);border-color:var(--berry);color:#fff}
.lvl-love{color:var(--accent)}
.stickysave{
  position:sticky;bottom:0;display:flex;gap:10px;align-items:center;
  padding:14px 0;background:linear-gradient(to top,var(--ground) 70%,transparent);
}

/* ---------- plan extras ---------- */
.leftover{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ochre);background:var(--ochre-soft);padding:2px 7px;border-radius:999px;margin-right:7px;
}
.regenerate{margin-top:28px}
.tag{
  display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.05em;
  padding:3px 8px;border-radius:999px;background:var(--card-2);color:var(--muted);border:1px solid var(--line);
}
.tag.no{color:var(--berry);background:var(--berry-soft);border-color:var(--berry)}
.recipe.blocked{opacity:.55}
.recipe.blocked:hover{opacity:1}
.recipe h4{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:16px 0 7px;font-family:"IBM Plex Mono",monospace;font-weight:500}
.prepitem .n{
  display:grid;place-items:center;width:24px;height:24px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-ink);font-size:12px;flex:none;
}

/* ---------- rendered markdown (diet guides) ---------- */
.guide{max-width:74ch}
.guide h3{font-size:20px;margin:30px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.guide p{margin:0 0 14px}
.guide ul{margin:0 0 16px;padding-left:20px;display:grid;gap:6px}
.guide table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px}
.guide th,.guide td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line)}
.guide th{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}
.guide blockquote{
  margin:20px 0;padding:14px 18px;border-left:3px solid var(--warn);
  background:var(--ochre-soft);border-radius:0 var(--radius) var(--radius) 0;font-size:15px;
}
.guide blockquote p:last-child{margin:0}

/* ---------- shopping extras ---------- */
.shoptools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
#shoppingList.offline .shopcat{border-color:var(--berry)}
.shopcat li label{display:flex;align-items:baseline;gap:9px;cursor:pointer}

@media (max-width:640px){
  .foodrow{gap:8px}
  .fchoices label{padding:5px 7px;font-size:10px}
  .topright{width:100%;margin-left:0}
}

/* ---------- account pages ---------- */
/* Identity's own markup uses Bootstrap class names we do not ship. Rather than re-templating the
   package's pages, style the elements it emits. */
.authwrap{max-width:460px;padding-top:48px;padding-bottom:80px}
.authwrap h1,.authwrap h2{font-size:26px;margin-bottom:6px}
.authwrap h4{font-size:17px;font-weight:500;font-family:Newsreader,Georgia,serif;margin:0 0 14px}
.authwrap hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.authwrap form{display:grid;gap:14px}
.authwrap .form-floating{display:grid;gap:5px}
.authwrap label{font-size:13.5px;color:var(--muted);order:-1}
.authwrap input[type="text"],.authwrap input[type="email"],.authwrap input[type="password"]{
  font:inherit;width:100%;background:var(--card);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--radius);padding:10px 12px;
}
.authwrap input:focus-visible{border-color:var(--accent)}
.authwrap button[type="submit"],.authwrap .btn-primary{
  appearance:none;cursor:pointer;font:inherit;font-size:15px;font-weight:600;
  background:var(--accent);color:#fff;border:1px solid var(--accent);
  border-radius:var(--radius);padding:11px 18px;
}
.authwrap button[type="submit"]:hover{background:var(--accent-ink)}
.authwrap .checkbox label{display:flex;align-items:center;gap:8px;order:0;color:var(--ink)}
.authwrap .text-danger,.authwrap .validation-summary-errors{color:var(--berry);font-size:14px}
.authwrap .validation-summary-errors ul{margin:0;padding-left:18px}
.authwrap a{font-size:14.5px}
.authwrap p{margin:0 0 10px}
.authlinks{display:flex;align-items:center;gap:12px}
.authlinks .hint{white-space:nowrap;max-width:22ch;overflow:hidden;text-overflow:ellipsis}

/* ---------- style guide ---------- */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:18px}
.swatch{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:1px 10px;align-items:center}
.swatch .chip{grid-row:1/3;width:34px;height:34px;border-radius:6px;border:1px solid var(--line-strong)}
.swatch .mono{font-size:11.5px}
.swatch .hint{font-size:12px}

/* ---------- meal titles ---------- */
/* The original page printed each meal as plain text with a small mono "→ opskrift: …" link
   underneath, which is what .rl styles — 13.5px mono, and display:none in print. Here the title
   itself is the link, so it needs body type, and it must survive printing: a printed meal plan
   with no meals on it is the whole point missed. */
.meal .body .mealtitle{
  display:inline;font-size:15px;font-family:inherit;letter-spacing:normal;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-strong);
}
.meal .body .mealtitle:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* Slot label colours, keyed to the class names this app emits (the original used .a and .s). */
.meal.af > .lbl{color:var(--accent)}
.meal.sn > .lbl{color:var(--berry)}
.meal.de > .lbl{color:var(--ochre)}

@media print{
  .meal .body .mealtitle{border-bottom:0}
  .nav,.topright,.weektabs,.regenerate,.stickysave,.themetoggle{display:none!important}
}

.panel + .panel{margin-top:34px}
.numfield + h2,.panel > .sechead:first-child{margin-top:0}