/* =========================================================================
   madplus.css — Mad, runde 4: husstand, budget, egne opskrifter, fælles indkøb.

   Ingen nye farver: kun tokens fra app.css. Rød (--roed) bruges som før kun til
   "her er noget galt" (over budget, en ingrediens jeg ikke kender, Slet).
   ========================================================================= */

/* ------------------------------------------------- Mad: toppen og planlinjen */
/* Telefon: tre knapper kan ikke stå ved siden af "Mad" på 390 px — de får deres egen række. */
.mad-top { flex-wrap: wrap; row-gap: 12px; }
.mad-top .knapper { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 919px) {
    .mad-top .knapper { width: 100%; }
    .mad-top .knapper .knap { flex: 1 1 auto; padding: 0 12px; }
}

/* "Plan for dig og Sofie · ca. 540 kr. for ugen" + Indstil planen — én linje, ikke en sektion. */
.planlinje {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px;
    margin: -4px 0 12px; font-size: 14.5px; color: var(--marine-2);
}
.planlinje b { color: var(--marine); font-weight: 650; }
.planlinje .over { color: var(--roed); font-weight: 650; }
.planlinje .tekstknap { padding: 4px 0; }
.plan-note { margin: 0 0 10px; }

/* Portionerne i en husstand: "Dig 180 g · Sofie 240 g". */
.planrad small.port { grid-column: 1; color: var(--blaa-dyb); font-weight: 600; font-size: 13px; }
.opskrift-port { margin-top: 12px; font-size: 14px; font-weight: 650; color: var(--blaa-dyb); }
@media (min-width: 920px) {
    .ut-ret .ut-tal { grid-row: 2; grid-column: 1; }
    .ut-ret .ut-byt { grid-row: 2; grid-column: 2; }
    .ut-ret .ut-port { grid-row: 3; grid-column: 1 / -1; font-size: 12px; font-weight: 600; color: var(--blaa-dyb); line-height: 1.3; }
    .ut-celle.flere .ut-port { display: none; }
}

/* Byt-arket i en husstand: for jer begge / kun for mig. */
.byt-hvem { margin: 2px 0 12px; }

/* ------------------------------------------------------ opskriften (arket) */
.ing-hvem { margin-top: 8px; }
.ing-hvem .chip { min-height: 34px; padding: 0 14px; font-size: 13.5px; }
.opskrift-side .ing-hvem .chip:not(.valgt) { background: var(--hvid); }
.opskrift-kilde { margin-top: 10px; }
.opskrift-egen { display: flex; justify-content: center; gap: 22px; margin-top: 10px; }
.tekstknap.fare-tekst { color: var(--roed); }

/* Opskriftskort: egne der ikke passer til kosten står under "Mine", men dæmpet. */
.kort.passer-ikke .kort-aabn { opacity: .72; }
.kort-advarsel { font-size: 12.5px; font-weight: 650; color: var(--roed); }
.retter .side-top .knap svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------- editoren */
.ark.ark-editor { max-width: 640px; }
.editor .felt textarea { min-height: 120px; line-height: 1.45; }
.ed-kilde { margin-bottom: 2px; }
.ed-beregning:empty { display: none; }
.ed-beregning { margin-top: 12px; }
.ed-tal { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-tal span { background: var(--himmel); border-radius: var(--r-s); padding: 7px 12px; font-size: 13.5px; color: var(--marine-2); }
.ed-tal b { font-size: 17px; color: var(--marine); margin-right: 3px; }
.ed-pr { margin-top: 6px; }
.ed-ukendte { display: grid; gap: 8px; margin-top: 12px; }
.ed-ukendt { background: var(--himmel); border-radius: var(--r-s); padding: 10px 12px; font-size: 14.5px; }
/* Samme røde prik som advarslen under madplanen. */
.ed-ukendt p::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--roed); margin-right: 8px; vertical-align: 2px; }
.ed-ukendt .chips { margin-top: 8px; gap: 6px; }
.ark .ed-ukendt .chip { background: var(--hvid); }
.lille-chip { min-height: 34px; padding: 0 12px; font-size: 13.5px; }
.ed-vaelg { min-height: 38px; padding: 6px 12px; max-width: 100%; background: var(--hvid); }

/* --------------------------------------------- arket "Indstil planen" */
.indstil-del h3 { margin-bottom: 8px; }
.indstil-del + .indstil-del { margin-top: 26px; }
.hs-kode-raekke { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.hs-forlad { color: var(--roed); margin-top: 8px; }
.hs-medlemmer .makker { grid-template-columns: 44px 1fr; }
.hs-medlemmer .makker > span:empty { display: none; }
.knap.bred.bu-gem { margin-top: 16px; }

/* ------------------------------------------------------------------ indkøb */
.indkoeb-top { margin-top: 6px; font-weight: 650; color: var(--marine); }
.indkoeb .kryds-af { margin-left: 8px; font-size: 12px; font-weight: 650; color: var(--blaa); display: inline-block; text-decoration: none; }
.indkoeb .kryds-af:empty { display: none; }
.indkoeb-fod { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin-top: 12px; }