/* =====================================================================
   Life Perks Club — Companion App: farvetema r53
   Skrevet 2026-09-06 efter Mortens gennemgang af den udrullede app og
   maaling mod masters/companion-web-app-v1.1.15/
   21-COLOUR-AND-VISUAL-HIERARCHY-STANDARD.md

   HVAD DER VAR GALT, MAALT: sidens stoerste flader laa alle mellem
   luminans 0,755 og 0,878. Stoerste kontrast mellem to flader: 1,15:1.
   Ingen moerk flade nogen steder - heller ikke topbjaelken, som masteren
   udtrykkeligt kraever moerk. Fem lyse pasteller uden ét anker.

   PRINCIPPET: kontrast gennem VAERDI (moerkt mod lyst), ikke gennem fem
   naesten ens nuancer. Samme lektie som miniguidens §4a, hvor Morten
   valgte sorte etiketbaand frem for groenne.

     1. Ét moerkt anker paa hver skaerm: topbjaelken, og hver sektions
        overskrift som et fyldt moerkt baand - som guidens etiketter.
     2. Én varm grund. Indholdskort er HVIDE med en synlig kant - ikke
        fire forskellige pasteller.
     3. To stoetteflader, og kun to: sand til tilbud og ingredienser,
        mint til information og fremdrift.
     4. Handlingen er sidens mest maettede element: rust med creme skrift.
     5. Valgt tilstand og links: guidens dybe groen. Ikke mere groent end det.

   SAADAN VINDER FILEN: de to gamle stilark importeres i kaskadelag
   (@layer). Regler uden lag vinder altid over regler i lag, uanset
   specificitet. Derfor kan de gamle `.app-shell:has(.hero) .topbar`-regler
   blive staaende uroert, og dette ark bestemmer alligevel.
   index.html indlaeser KUN dette ark (plus Google Fonts).
   ===================================================================== */

@layer base, warm;
@import url("styles.css?v=r60") layer(base);
@import url("warm-theme.css?v=r60") layer(warm);

:root {
  --lpc-anchor:     #14201C;   /* moerkt anker: topbjaelke, sektionsbaand     */
  --lpc-anchor-2:   #22332C;   /* topbjaelkens bund, trykket tilstand         */
  --lpc-deep:       #0A5948;   /* guidens dybe groen: valgt, links, numre     */
  --lpc-ink:        #14201C;   /* tekst - 16:1 paa hvid                       */
  --lpc-muted:      #4A5752;   /* sekundaer tekst - 7,6:1 paa hvid, 5,3 sand  */
  --lpc-ground:     #E9DFC9;   /* sidens grund, varm pergament                */
  --lpc-card:       #FFFFFF;   /* laeseflader                                 */
  --lpc-line:       #7F9689;   /* kortkant - 3,2:1 mod hvid (master 05: 3:1) */
  --lpc-sand:       #EFD59C;   /* tilbud, ingredienser - 1,44:1 mod hvid      */
  --lpc-sand-line:  #B8963F;
  --lpc-mint:       #C5DFD0;   /* information, fremdrift - 1,40:1 mod hvid    */
  --lpc-mint-line:  #5E8A74;
  --lpc-rust:       #9B4431;   /* handling - creme skrift 6,1:1               */
  --lpc-rust-dark:  #7E3524;
  --lpc-cream:      #FFF8ED;   /* skrift paa moerkt                           */

  /* de gamle tokens peger paa de nye, saa regler jeg ikke roerer
     falder rigtigt ud */
  --ink: var(--lpc-ink);
  --muted: var(--lpc-muted);
  --paper: var(--lpc-ground);
  --card: var(--lpc-card);
  --cream: var(--lpc-card);
  --accent: var(--lpc-rust);
  --accent-dark: var(--lpc-rust-dark);
  --line: var(--lpc-line);
  --sage: var(--lpc-mint);
  --soft-blue: var(--lpc-mint);
  --soft-sage: var(--lpc-mint);
  --soft-lilac: var(--lpc-card);
  --soft-peach: var(--lpc-sand);
  --warm-cream: var(--lpc-sand);
  --shadow: 0 14px 40px rgba(20,32,28,.14);
}

/* ---------------------------------------------------------------- grund */
body { background: var(--lpc-ground); color: var(--lpc-ink); }
.app-shell { background: var(--lpc-ground); border-color: var(--lpc-line); }
@media (min-width: 700px) {
  body { background: linear-gradient(160deg, #DCD1B6, var(--lpc-ground) 55%, #E2D6BC); }
  .app-shell { background: var(--lpc-ground); overflow: hidden; }
}

/* ------------------------------------------------------------- topbjaelke
   Masteren: "dark background, white Life Perks Club wordmark and a clearly
   visible brand mark". Den var lys blaagraa paa alle skaerme. */
.topbar {
  margin: 0 -22px;
  padding: 0 22px;
  border-bottom: 0;
  background: linear-gradient(180deg, var(--lpc-anchor), var(--lpc-anchor-2));
  color: var(--lpc-cream);
}
@media (min-width: 700px) { .topbar { margin: 0 -32px; padding: 0 32px; } }
.topbar .brand, .topbar .step { color: var(--lpc-cream); }
.topbar .step { opacity: .85; }
.topbar .brand-mark {
  background: var(--lpc-rust);
  color: var(--lpc-cream);
  border: 0;
  box-shadow: 0 0 0 2px rgba(255,248,237,.35);
}
.topbar .icon-button {
  border: 1.5px solid rgba(255,248,237,.55);
  background: rgba(255,248,237,.10);
  color: var(--lpc-cream);
}

/* ----------------------------------------------------------------- piller */
.status-row { margin-top: 14px; }
.trial-pill { background: var(--lpc-sand); border-color: var(--lpc-sand-line); color: var(--lpc-ink); font-weight: 700; }
.safe-pill  { background: var(--lpc-mint); border-color: var(--lpc-mint-line); color: var(--lpc-ink); font-weight: 700; }

/* ------------------------------------------------------------- etiketter
   Morten, 12. september 2026 (regel for ALLE kundeflader - miniguide, web app
   og landingssider): sektionsetiketter er for smaa og skal have en ramme, i
   samme format som landingssidens .g-eyebrow. Foer: 11 px fyldt moerkt baand.
   Nu: 15 px, versaler, spaerring, 2 px rust ramme, moerkegroen tekst (7:1-
   kravet for etiketter), praecis som guidens indrammede etiketter.
   etiket_ramme_tjek.py maaler: ramme >= 2 px, skrift >= 15 px. */
.eyebrow {
  display: inline-block;
  background: transparent;
  color: var(--lpc-deep);
  padding: 7px 14px;
  border: 2px solid var(--lpc-rust);
  border-radius: 8px;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
}
.hero .eyebrow, .recommendations-intro .eyebrow, .details-intro .eyebrow, .decision-intro .eyebrow { margin-bottom: 16px; }
.picker-head .eyebrow { background: transparent; border-color: var(--lpc-cream); color: var(--lpc-cream); }

/* ------------------------------------------------------------------- hero
   Forside, hjem, oplaasning, genskab adgang, kvittering. */
.hero {
  margin-top: 14px;
  padding: 34px 20px 22px;
  background: var(--lpc-card);
  border: 1.5px solid var(--lpc-line);
  border-radius: 22px;
  box-shadow: 0 12px 34px rgba(20,32,28,.10);
}
.hero:before, .hero:after { display: none; }
.hero h1, .content h1 { color: var(--lpc-ink); }
.lede, .hero .lede { color: var(--lpc-muted); }
/* Stoettetekst stod 12-15 px i normal vaegt og forsvandt mod overskrifterne.
   Morten bad om tykkere skrift fire steder; de er alle samme slags tekst -
   den linje, der forklarer hvad man skal goere. Derfor én behandling. */
.intro, .content .intro { color: var(--lpc-ink); font-size: 15px; font-weight: 600; line-height: 1.5; }
.hero-art { background: radial-gradient(circle, var(--lpc-mint) 0 38%, transparent 39%); }
.plate {
  border: 0;
  background: #fff;
  box-shadow: 0 16px 40px rgba(20,32,28,.16), inset 0 0 0 12px var(--lpc-ground);
}
.leaf { background: var(--lpc-deep); }
.l2 { background: #5E8A74; }
.grain { background: #D8B55A; }
.sun { background: var(--lpc-rust); }

/* forsidens tre trin (byggeopgave 30 - klassen havde ingen regel).
   BEMAERK: ikke grid/flex paa <li>. Indholdet er <strong>Get</strong> + loes
   tekst, og i et grid bliver den loese tekst sit eget felt i den smalle
   talkolonne - ét ord pr. linje. Maalt 6/9 kl. 17. Absolut placeret tal og
   haengende indrykning via padding er det robuste. */
.landing-steps {
  margin: 18px auto 22px;
  padding: 0;
  max-width: 33ch;
  list-style: none;
  counter-reset: trin;
  text-align: left;
}
.landing-steps li {
  counter-increment: trin;
  position: relative;
  padding-left: 38px;
  margin: 0 0 10px;
  line-height: 1.45;
  font-size: 15px;
}
.landing-steps li::before {
  content: counter(trin);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--lpc-deep);
  color: var(--lpc-cream);
  font-size: 12px;
  font-weight: 700;
}
.landing-steps strong { color: var(--lpc-deep); }

/* tilmeldingsboksen paa forsiden: sand, som de andre tilbudsflader */
.access-link-form {
  background: var(--lpc-sand);
  border: 1.5px solid var(--lpc-sand-line);
}
.access-link-form label { color: var(--lpc-ink); }
.access-link-form input { border: 1.5px solid var(--lpc-line); background: #fff; color: var(--lpc-ink); }
.access-link-form .marketing-consent { color: var(--lpc-ink); }

/* ------------------------------------------------------------- handlinger */
.primary {
  background: var(--lpc-rust);
  color: var(--lpc-cream);
  box-shadow: 0 8px 22px rgba(155,68,49,.30);
}
.primary:hover { background: var(--lpc-rust-dark); }
.primary:disabled, .picker-save:disabled { background: #B9AFA0; color: var(--lpc-cream); box-shadow: none; }
.secondary {
  background: var(--lpc-card);
  color: var(--lpc-deep);
  border: 2px solid var(--lpc-deep);
}
.secondary:hover { background: var(--lpc-mint); }
.text-button { color: var(--lpc-deep); }
.trust-link {
  background: var(--lpc-card);
  border: 1.5px solid var(--lpc-deep);
  color: var(--lpc-deep);
}
/* Tilbudsteksten. Master 21: "On a light mint offer surface, this
   explanatory copy uses pure black text and a minimum 14 px / 700 weight."
   Maalt paa den udrullede app 6/9: 13 px, vaegt 400, farve #14201C.
   Reglen fandtes; ingen havde maalt den. Morten saa det med det blotte oeje. */
.micro {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  color: #000;
}
.hero .micro {
  padding: 12px 14px;
  border: 1.5px solid var(--lpc-mint-line);
  border-radius: 12px;
  background: var(--lpc-mint);
  color: #000;
}
.micro a, .legal a, .lede a { color: var(--lpc-deep); font-weight: 700; }
.access-notice, .access-link-message, .checkout-message { background: var(--lpc-sand); color: var(--lpc-ink); border: 3px solid var(--lpc-sand-line); border-radius: 14px; padding: 16px 18px; font-size: 18px; }
.access-link-message.is-sent { border-color: #00382c; background: #dcece3; }
.access-link-message.is-error { border-color: #a14631; background: #f2d3c6; }

/* formularfelter */
input[type="email"], input[type="text"] {
  border: 1.5px solid var(--lpc-line);
  background: var(--lpc-card);
  color: var(--lpc-ink);
}
input[type="email"]:focus, input[type="text"]:focus { outline: 3px solid var(--lpc-deep); outline-offset: 1px; }
.marketing-consent, .access-link-form .marketing-consent { color: var(--lpc-ink); }
.hero.upgrade .marketing-consent {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  text-align: left;
  margin: 4px 0 14px;
  padding: 12px 14px;
  background: var(--lpc-sand);
  border: 1.5px solid var(--lpc-sand-line);
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
}
.hero.upgrade .marketing-consent input { width: 18px; min-height: 18px; margin: 1px 0 0; }
.marketing-consent input { accent-color: var(--lpc-deep); }

/* ---------------------------------------------------- indstillingskortene
   Var fire pasteller (blaa, groen, lilla, fersken). Nu: hvide kort med kant,
   og hver overskrift som et moerkt baand hen over kortets top - saa
   sektionerne skilles af STRUKTUR og VAERDI. Det ene kort, der betyder
   noget, ingredienserne, staar paa sand. */
.setting-card {
  background: var(--lpc-card);
  border: 1.5px solid var(--lpc-line);
  border-radius: 16px;
  padding: 18px;
  overflow: hidden;
}
.time-setting, .people-setting, .energy-setting { background: var(--lpc-card); border-color: var(--lpc-line); }
.ingredients-setting { background: var(--lpc-sand); border-color: var(--lpc-sand-line); }
.setting-heading {
  display: block;
  margin: -18px -18px 16px;
  padding: 12px 18px;
  background: var(--lpc-anchor);
  color: var(--lpc-cream);
  font: 700 15px Manrope, sans-serif;
  letter-spacing: -.01em;
  line-height: 1.3;
}
.setting-heading-row {
  margin: -18px -18px 14px;
  padding: 12px 18px;
  background: var(--lpc-anchor);
  color: var(--lpc-cream);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.setting-heading-row .setting-heading { margin: 0; padding: 0; background: transparent; }
.selection-count { color: var(--lpc-cream); font-weight: 700; }
.ingredients-setting .selection-count { color: var(--lpc-cream); }
.field-help { color: var(--lpc-ink); font-size: 14px; font-weight: 700; line-height: 1.45; }

.choice span { background: var(--lpc-card); border: 1.5px solid var(--lpc-line); color: var(--lpc-ink); }
.choice input:checked + span { background: var(--lpc-deep); border-color: var(--lpc-deep); color: var(--lpc-cream); }
.choice input:focus-visible + span { outline: 3px solid var(--lpc-rust); outline-offset: 2px; }
.counter { background: var(--lpc-card); border: 1.5px solid var(--lpc-line); }
.counter button { color: var(--lpc-deep); font-weight: 700; }
.counter button:first-child { border-right: 1.5px solid var(--lpc-line); }
.counter button:last-child { border-left: 1.5px solid var(--lpc-line); }
.counter output { color: var(--lpc-ink); }
.ingredient-trigger { background: var(--lpc-card); border: 1.5px solid var(--lpc-sand-line); color: var(--lpc-ink); font-weight: 600; }
.ingredient-trigger > span { color: var(--lpc-deep); }
.chips .chip { background: var(--lpc-deep); color: var(--lpc-cream); border: 0; font-weight: 600; }
.seasonal-toggle {
  background: var(--lpc-mint);
  border: 1.5px solid var(--lpc-mint-line);
  color: var(--lpc-ink);
  box-shadow: none;
}
.seasonal-toggle strong { font-size: 14px; font-weight: 800; color: var(--lpc-ink); }
.seasonal-toggle small { color: var(--lpc-ink); font-size: 14px; font-weight: 600; line-height: 1.45; }
.seasonal-toggle input { accent-color: var(--lpc-deep); }

/* ----------------------------------------------------------- resultaterne
   Ti kort med et moerkt nummer som anker paa hvert. Det bedste kort baerer
   et fyldt baand, som guidens etiketter.

   TO KORTFARVER, SKIFTEVIS (Morten, 6/9). Foerste forsoeg lagde dem to og
   to; det var en fejllaesning af "2 typer baggrundsfarve". Det er
   zebrastribning: hvert andet kort skifter, saa en liste paa ti raekker kan
   skannes. Derfor er det en funktion, ikke pynt - master 21 forbyder farve
   som pynt.

   Hvorfor netop de to. Alle de lyse toner, jeg maalte som kandidat nummer
   to, laa 1,03-1,11:1 mod sidens grund - de ville smelte ind i pergamentet,
   og det var praecis den fejl, Morten fangede i morges. Mint ligger 1,42:1
   mod det hvide kort, saa skiftet KAN ses, og de mintfarvede kort faar en
   dybgroen kant i stedet for den graagroenne: 5,85:1 mod mint mod den
   graagroennes 2,24:1, hvor masteren kraever 3:1 paa en baerende graense.

   Maalt paa mint: overskrift 11,84:1 - broedtekst 5,35:1 - "uses all 3"
   5,85:1. Alle over kravet i master 05.

   1 hvid - 2 mint - 3 hvid - 4 mint, hele vejen ned. */
.recommendations-intro, .details-intro, .decision-intro {
  margin: 0 0 20px;
  padding: 22px;
  background: var(--lpc-card);
  border: 1.5px solid var(--lpc-line);
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(20,32,28,.08);
}
.meal-card, .meal-card:nth-child(4n), .meal-card:nth-child(4n+2), .meal-card:nth-child(4n+3) {
  background: var(--lpc-card);
  border: 1.5px solid var(--lpc-line);
  box-shadow: none;
}
/* hvert andet kort staar paa mint: 2, 4, 6, 8, 10 */
.meal-card:nth-child(even) {
  background: var(--lpc-mint);
  border: 1.5px solid var(--lpc-deep);
}
.meal-card:nth-child(even) .meal-copy > p:not(.reason),
.meal-card:nth-child(even) .meta { color: #3E4B46; }
.meal-card:nth-child(even) .meta { font-weight: 600; }
.meal-card.best {
  border: 2px solid var(--lpc-deep);
  background: var(--lpc-card);
  box-shadow: 0 12px 30px rgba(10,89,72,.18);
}
.best-label {
  background: var(--lpc-deep);
  color: var(--lpc-cream);
  font-size: 11px;
  letter-spacing: .12em;
  padding: 7px 16px;
}
.meal-number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lpc-anchor);
  color: var(--lpc-cream);
  font: 700 12px Manrope, sans-serif;
  padding: 0;
}
.meal-card.best .meal-number { background: var(--lpc-deep); }
.reason { color: var(--lpc-deep); }
.meal-copy h2 { color: var(--lpc-ink); }
.meal-copy > p:not(.reason) { color: #3E4B46; font-weight: 600; }
.meta { color: var(--lpc-muted); font-weight: 600; }
.arrow svg { stroke: var(--lpc-deep); }

/* ---------------------------------------------------------------- detaljer */
.stat-row { background: var(--lpc-anchor); color: var(--lpc-cream); }
.stat-row span { color: rgba(255,248,237,.8); }
.detail-block {
  margin: 18px 0;
  padding: 20px;
  background: var(--lpc-card);
  border: 1.5px solid var(--lpc-line);
  border-radius: 16px;
  overflow: hidden;
}
.detail-block h2, .section-heading {
  margin: -20px -20px 16px;
  padding: 12px 20px;
  background: var(--lpc-anchor);
  color: var(--lpc-cream);
  font: 700 15px Manrope, sans-serif;
}
.section-heading h2 { margin: 0; padding: 0; background: transparent; color: var(--lpc-cream); }
.section-heading > span { color: var(--lpc-cream); opacity: .85; }
.ingredients-block { background: var(--lpc-sand); border-color: var(--lpc-sand-line); }
.game-plan-block { background: var(--lpc-card); }
.ingredient-grid span { background: var(--lpc-card); border: 1.5px solid var(--lpc-deep); color: var(--lpc-ink); }
.ingredient-grid .core { background: var(--lpc-deep); border-color: var(--lpc-deep); color: var(--lpc-cream); font-weight: 600; }
/* De to grupper har hver sin RAMME med sin egen overskrift i et fyldt
   baand - samme sprog som sektionsoverskrifterne resten af appen igennem.
   Foerst var forskellen kun farven paa brikkerne; saa kom der en
   forklarende linje; saa to overskrifter uden ramme. Morten bad hver gang
   om det samme: at det skal kunne ses, ikke gaettes. Nu er hver gruppe en
   kasse med en etiket paa - ordene baerer det, farven understoetter kun. */
.ingredient-group {
  margin-top: 18px;
  background: var(--lpc-card);
  border: 1.5px solid var(--lpc-deep);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
}
.ingredient-group:last-child { margin-bottom: 0; }
.ingredient-subhead {
  /* 9. september 2026: etiketten var skrevet som et fyldt baand i kommentaren
     ovenfor, men reglen var flad - ingen baggrund, ingen luft - og .ingredient-group
     blev aldrig brugt i app.js. Designet var besluttet og naaede aldrig skaermen.
     Nu er baandet der, og kassen bruges. Teksten er uaendret og staar ordret som
     ingredienser_valgfri i kundetekster.json. */
  margin: 0;
  padding: 9px 14px;
  background: var(--lpc-deep);
  color: var(--lpc-cream);
  font: 800 15px Manrope, sans-serif;   /* 12. sept. 2026: ingen versal-etiket under 15 px */
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.35;
}
.ingredient-group .ingredient-grid { padding: 13px 14px 14px; }
.ingredient-grid span { background: var(--lpc-card); border: 1.5px solid var(--lpc-deep); color: var(--lpc-ink); }
.ingredient-grid .core { background: var(--lpc-deep); border-color: var(--lpc-deep); color: var(--lpc-cream); font-weight: 600; }
.steps li:before { background: var(--lpc-deep); color: var(--lpc-cream); }
details { background: var(--lpc-mint); border: 1.5px solid var(--lpc-mint-line); border-radius: 14px; padding: 16px 18px; }
details summary { color: var(--lpc-ink); }
details p { color: var(--lpc-ink); }

/* ---------------------------------------------------------- kvitteringen
   Kvitteringen har et kort (decision-intro) INDE i hero'en. Ét kort, ikke
   to: hero'en bliver gennemsigtig, intro-kortet baerer rammen. */
.hero.complete { background: transparent; border: 0; box-shadow: none; padding: 20px 0 0; }
.checkmark { background: var(--lpc-deep); color: var(--lpc-cream); }
.trial-count-banner { background: var(--lpc-anchor); color: var(--lpc-cream); }
.complete-card { background: var(--lpc-card); border: 1.5px solid var(--lpc-line); box-shadow: none; }
.complete-card.trial-used { background: var(--lpc-sand); border-color: var(--lpc-sand-line); }
.complete-card > span { background: var(--lpc-deep); color: var(--lpc-cream); }
.complete-card.trial-used > span { background: var(--lpc-rust); color: var(--lpc-cream); }
.complete-card p { color: var(--lpc-ink); }

/* ----------------------------------------------------------- oplaasningen */
.reassurance { background: var(--lpc-mint); border: 1.5px solid var(--lpc-mint-line); color: var(--lpc-ink); }
.access-summary div, .access-summary div:nth-child(1), .access-summary div:nth-child(2), .access-summary div:nth-child(3) {
  background: var(--lpc-card);
  border: 1.5px solid var(--lpc-line);
}
.access-summary strong { color: var(--lpc-deep); }
.access-summary span { color: var(--lpc-ink); }
.payment-confirmation { background: var(--lpc-mint); border: 1.5px solid var(--lpc-mint-line); color: var(--lpc-ink); border-radius: 12px; padding: 12px 14px; }

/* --------------------------------------------------------------- juridisk
   Laeseflader er hvide (masterens rolle 4), ikke skiftevis fersken og gul.
   Samme zebrastribning, skiftevis, som resultatlisten (Morten 6/9): otte
   afsnit i én farve er en mur, og det her er den skaerm, kunden laeser
   foer han betaler. Samme to farver, samme kanter, samme maalte
   kontraster - saa de to lister laeses som ét system. */
.legal p, .legal p:nth-of-type(even) {
  background: var(--lpc-card);
  border: 1.5px solid var(--lpc-line);
  color: var(--lpc-ink);
}
.legal p:nth-of-type(even) {
  background: var(--lpc-mint);
  border: 1.5px solid var(--lpc-deep);
}
.legal h2 { color: var(--lpc-ink); }

/* -------------------------------------------------------------- vaelgeren */
dialog { background: var(--lpc-ground); }
dialog::backdrop { background: rgba(20,32,28,.62); }
.picker { padding: 22px; background: var(--lpc-ground); }
.picker-head {
  margin: -22px -22px 16px;
  padding: 22px 22px 18px;
  background: var(--lpc-anchor);
  color: var(--lpc-cream);
}
.picker-head h2 { color: var(--lpc-cream); }
.picker-head .icon-button { border: 1.5px solid rgba(255,248,237,.55); background: rgba(255,248,237,.10); color: var(--lpc-cream); }
.picker > p, .picker-help { color: var(--lpc-ink); font-size: 14px; font-weight: 600; line-height: 1.5; }
.picker-status { background: var(--lpc-sand); border: 1px solid var(--lpc-sand-line); color: var(--lpc-ink); }
.picker-status strong { color: var(--lpc-ink); }
.picker-selected { color: var(--lpc-ink); font-size: 14px; font-weight: 700; }
.picker-selected span { background: var(--lpc-deep); color: var(--lpc-cream); }
/* Grupperne i vaelgeren stribes skiftevis (Morten 6/9). MINT og SAND, ikke
   hvid og mint: ingredienserne er hvide knapper, saa en hvid gruppe blev
   hvid paa hvid, og Morten fangede det. De to farver har samme lysvaerdi
   (1,01:1) men hver sin kulor, saa skiftet ses paa farven og ikke paa
   lyset - og de hvide knapper staar lige tydeligt paa dem begge (1,42:1
   og 1,43:1). Det er guidens eget par: groen og sand.
   Saesongruppen mistede sin mintfarve ved det - den staar stadig foerst og
   har sin egen overskrift, og inde i en stribet liste er farven rytme,
   ikke betydning. */
.picker-group { border-radius: 14px; padding: 12px 14px 14px; }
.picker-group,
.picker-group:nth-of-type(odd),
.picker-group.seasonal-group {
  background: var(--lpc-sand);
  border: 1.5px solid var(--lpc-deep);
}
.picker-group:nth-of-type(even) {
  background: var(--lpc-mint);
  border: 1.5px solid var(--lpc-deep);
}
.picker-group h3 { color: var(--lpc-deep); }
/* Kanten var graagroen: 2,21:1 mod sand og 2,24:1 mod mint, hvor master 05
   kraever 3:1 paa en baerende graense. Dyb groen giver 5,79 og 5,85. */
.ingredient-option { background: var(--lpc-card); border: 1.5px solid var(--lpc-deep); color: var(--lpc-ink); }
.ingredient-option.is-selected { background: var(--lpc-deep); border-color: var(--lpc-deep); color: var(--lpc-cream); }
.ingredient-option:disabled { opacity: .45; }
.picker-list input:checked + span { background: var(--lpc-deep); border-color: var(--lpc-deep); color: var(--lpc-cream); }

/* ------------------------------------------------- genskab sikker adgang
   Formularen er sand (handling); noten under den er information -> mint. */
.secure-note, .secure-access-card { background: var(--lpc-mint); border: 1.5px solid var(--lpc-mint-line); }
.secure-note p, .secure-access-card p { color: var(--lpc-ink); }
.secure-note strong { color: var(--lpc-ink); }

/* --------------------------------------------------------------- sidefod */
footer { color: var(--lpc-ink); }
.seller-footer { color: var(--lpc-ink); border-top: 2px solid var(--lpc-anchor); }
.seller-footer a, footer a { color: var(--lpc-deep); font-weight: 600; }

/* ----------------------------------------------------- Turnstile-pladsen */
/* 9. september 2026: 0 betoed, at siden hoppede nedad, naar bot-kontrollen
   blev laest ind - paa guidetilmeldingen og paa proeveporten. De to selvstaendige
   sider, email-list.html og restore.html, reserverer 70 og 65 px i deres egen CSS
   og hopper ikke. Nu er de fire steder ens. Et tomt felt i et halvt sekund er
   bedre end en knap, der flytter sig, mens man sigter paa den. */
.turnstile-slot { min-height: 70px; }

/* ------------------------------------------------- adressen vi sendte til
   Morten, 7. september: "saet en ramme omkring saa det er tydeligt hvor vi
   har sendt mailen til". Adressen stod foer inde midt i en saetning i
   samme stoerrelse som alt andet - og det er den ENE ting, man skal kunne
   se med det samme, fordi det er den, man tjekker for tastefejl. */
.sendt-til {
  display: block;
  margin: 18px 0;
  padding: 14px 16px;
  border: 2px solid var(--lpc-deep);
  border-radius: 14px;
  /* Maalt 7. september paa Mortens eget skaermbillede: rammen og
     informationsboksen lige under havde NOEJAGTIG samme flade, #C5DFD0.
     Rammen skulle vaere den ene ting, man ser med det samme - og den skilte
     sig kun ud paa kanten. Her er den lysere, saa den staar frem mod baade
     kortet bagved og boksen under. Kontrasten maalt paa den faktiske
     gengivelse: 13,1:1 mod #14201C, over kravets 4,5. */
  background: #E4F0E8;
  text-align: left;
}
.sendt-til-etiket {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #24413A;
}
.sendt-til-adresse {
  display: block;
  /* 16 px, ikke 17: maalt paa 390 px braekker en almindelig Gmail-adresse
     med plusmaerke midt i ".com" ved 17 px, og et braek en bogstav foer
     enden ligner en fejl. Ved 16 px staar den paa een linje. */
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--lpc-anchor);
  /* En rigtig lang adresse skal stadig braekke frem for at skubbe siden
     ud i siden - men foerst naar den ikke kan vaere der. */
  overflow-wrap: anywhere;
  hyphens: none;
}

/* --------------------------------------------- et link, der ligner en knap
   "Return to the Companion App" paa bekraeftelsessiden er et <a> med
   knappens stil. Et <a> er inline: bredde, lodret polstring og margen
   virker ikke paa det. Maalt 7. september, 390 px: linket laa 1 px OVEN I
   rammen med den bekraeftede adresse, fordi dets margin-top paa 14 px
   aldrig blev til noget. Det saa ud til at virke, saa laenge der kun stod
   et afsnit ovenover med 25 px luft under sig. */
a.secondary { display: flex; justify-content: center; }

/* ------------------------------------------------------ skjult er skjult
   Knapper faar display:flex fra stilarket, og det slaar browserens egen
   regel om [hidden]. Foelgen, fundet 7. september 2026: efter en
   gennemfoert bekraeftelse blev knappen "Confirm my updates" staaende, som
   om intet var sket - og trykkede kunden igen, fik han at vide, at linket
   allerede var brugt. Koden havde gjort det rigtige; stilarket lod bare
   vaere med at adlyde.

   !important er her paa sin plads: [hidden] er ikke en stilbeslutning, det
   er en oplysning om at elementet ikke findes for brugeren. */
[hidden] { display: none !important; }