/* =========================================================================
   kamera.css — Log med kamera (tallerken og stregkode) og "Hvad har jeg?".
   Kun app.css' farver og former: hvide flader uden kanter, kobolt er handling.
   ========================================================================= */

/* ---------------------------------------------------------- valg-knapper */
.kam-valg { display: grid; gap: 10px; margin-top: 8px; }
.kam-valg button {
    display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: center; text-align: left;
    background: var(--himmel); border-radius: var(--r-m); padding: 14px 16px; font-size: 17px; transition: background .15s;
}
.kam-valg button b { font-weight: 650; }
.kam-valg-ikon { width: 48px; height: 48px; border-radius: 50%; background: var(--blaa); color: var(--hvid); display: grid; place-items: center; flex: none; }
.kam-valg-ikon svg { width: 24px; height: 24px; }
@media (hover: hover) { .kam-valg button:hover { background: var(--dis); } }

.kam-knapper { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.kam-knapper .knap { flex: 1 1 200px; }
.kam-knapper .knap svg { width: 20px; height: 20px; flex: none; }
.kam-knapper .tekstknap { flex: 1 1 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.kam-knapper .tekstknap svg { width: 18px; height: 18px; }
/* hidden-attributten skal vinde over display: grid/flex herunder (knapper og video skjules til kameraet kører). */
.kam-lygte[hidden], .kam-knapper > [hidden], .kam-video[hidden] { display: none !important; }
.kam-fod { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; margin-top: 10px; }
.kam-status { font-size: 14.5px; margin-top: 10px; min-height: 1.4em; text-align: center; }
.kam-status:empty { display: none; }
.kam-note { margin-top: 14px; }

/* --------------------------------------------------------------- video */
.kam-video { position: relative; margin-top: 8px; border-radius: var(--r-m); overflow: hidden; background: var(--marine); aspect-ratio: 4 / 3; }
.kam-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.kam-scanner { aspect-ratio: 4 / 3; }
/* Rammen stregkoden skal ind i: hjørner, ikke en hel kasse — så man ser varen. */
.kam-ramme {
    position: absolute; left: 7%; right: 7%; top: 25%; bottom: 25%; border-radius: 14px; pointer-events: none;
    box-shadow: 0 0 0 999px rgba(11, 31, 77, .35);
    background:
        linear-gradient(var(--hvid), var(--hvid)) top left / 26px 4px no-repeat,
        linear-gradient(var(--hvid), var(--hvid)) top left / 4px 26px no-repeat,
        linear-gradient(var(--hvid), var(--hvid)) top right / 26px 4px no-repeat,
        linear-gradient(var(--hvid), var(--hvid)) top right / 4px 26px no-repeat,
        linear-gradient(var(--hvid), var(--hvid)) bottom left / 26px 4px no-repeat,
        linear-gradient(var(--hvid), var(--hvid)) bottom left / 4px 26px no-repeat,
        linear-gradient(var(--hvid), var(--hvid)) bottom right / 26px 4px no-repeat,
        linear-gradient(var(--hvid), var(--hvid)) bottom right / 4px 26px no-repeat;
}
.kam-ramme::after {
    content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; border-radius: 2px;
    background: var(--blaa); box-shadow: 0 0 12px 2px rgba(31, 91, 255, .7); animation: kam-linje 1.8s ease-in-out infinite;
}
@keyframes kam-linje { 0%, 100% { transform: translateY(-34px); } 50% { transform: translateY(34px); } }
.kam-lygte {
    position: absolute; right: 12px; bottom: 12px; width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255, 255, 255, .92); color: var(--marine); display: grid; place-items: center;
}
.kam-lygte svg { width: 22px; height: 22px; }
.kam-lygte.til { background: var(--sol); }
.kam-taget { display: flex; gap: 8px; margin-top: 10px; }
.kam-taget:empty { display: none; }
.kam-taget img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-s); }

.kam-skriv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 14px; }
.kam-skriv .input { min-height: 46px; font-size: 16px; }
.kam-skriv .knap { min-height: 46px; }

/* ------------------------------------------------------------- venter */
.kam-vent { display: grid; gap: 14px; margin-top: 6px; }
.kam-foto { position: relative; border-radius: var(--r-m); overflow: hidden; background: var(--himmel); max-height: 260px; }
.kam-foto img { width: 100%; height: 100%; max-height: 260px; object-fit: cover; display: block; }
.kam-foto.lille { max-height: 150px; }
.kam-foto.lille img { max-height: 150px; }
/* Et blåt lys der glider hen over billedet, mens Buddy kigger. */
.kam-scan { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.kam-scan::before {
    content: ""; position: absolute; left: 0; right: 0; top: -40%; height: 40%;
    background: linear-gradient(180deg, rgba(31, 91, 255, 0), rgba(31, 91, 255, .28) 70%, rgba(255, 255, 255, .7) 100%);
    animation: kam-scan 2.4s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes kam-scan { to { transform: translateY(350%); } }
.kam-hilsen { margin-top: 6px; }
.kam-hilsen .boble { font-size: 19px; }
.kam-hilsen .boble.lang { font-size: 16px; }
.kam-maaler i { transition: width 1.4s linear; }

.kam-flere-vent { display: flex; gap: 8px; margin-top: 6px; }
.kam-lille-vent { position: relative; width: 84px; height: 84px; border-radius: var(--r-s); overflow: hidden; background: var(--himmel); }
.kam-lille-vent img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kam-lille-vent.faerdig .kam-scan { display: none; }
.kam-lille-vent.faerdig::after {
    content: ""; position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--blaa);
    box-shadow: 0 0 0 2px var(--hvid);
}
.kam-flere-vent + .kam-vent .kam-foto { display: none; }

/* ----------------------------------------------------------- tallerken */
.kam-resultat { display: grid; gap: 12px; margin-top: 6px; }
.kam-dele { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.kam-del { display: grid; grid-template-columns: minmax(0, 1fr) 124px 34px; gap: 10px; align-items: center; padding: 8px 0; }
.kam-del + .kam-del { box-shadow: 0 -1px 0 var(--himmel); }
.kam-del-navn b { display: block; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.kam-del-navn small { color: var(--marine-2); font-size: 13px; }
.kam-trin { height: 42px; grid-template-columns: 32px 1fr 32px; }
.kam-trin button { height: 42px; }
.kam-trin input { font-size: 16px; }
.kam-fjern { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--marine-3); }
.kam-fjern svg { width: 15px; height: 15px; }
@media (hover: hover) { .kam-fjern:hover { background: var(--himmel); color: var(--marine); } }

.kam-maaske { margin-top: 10px; gap: 6px; align-items: center; }
.kam-maaske:empty { display: none; }
.kam-maaske > .daempet { font-size: 14px; margin-right: 2px; }
.kam-maaske .chip { min-height: 36px; padding: 0 12px; font-size: 14px; }

/* ----------------------------------------------------------- stregkode */
.kam-vare { background: var(--himmel); border-radius: var(--r-m); padding: 14px 16px; margin-top: 6px; }
.kam-vare b { display: block; font: 700 19px/1.2 var(--display); letter-spacing: -.01em; }
.kam-vare small { color: var(--marine-2); font-size: 14px; }
.kam-maengder { margin-top: 16px; }
.kam-gram-felt { position: relative; display: block; }
.kam-gram-felt .input { padding-right: 46px; }
.kam-gram-felt em { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--marine-2); }
.kam-sum { margin-top: 14px; font-size: 16px; color: var(--marine-2); }
.kam-sum .tal { font-size: 24px; color: var(--marine); }
.kam-fundne { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; max-height: 180px; overflow-y: auto; }
.kam-fundne li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 14.5px; color: var(--marine-2); }
.kam-fundne li svg { width: 18px; height: 18px; color: var(--marine-3); }
.kam-fundne li.ok { color: var(--marine); font-weight: 600; }
.kam-fundne li.ok svg { color: var(--blaa); }

/* ------------------------------------------------- forslag fra billeder */
.kam-forslag { list-style: none; margin: 14px 0 0; padding: 0; }
.kam-forslag li + li { box-shadow: 0 -1px 0 var(--himmel); }
.kam-forslag label { display: flex; align-items: center; gap: 12px; padding: 11px 0; cursor: pointer; }
.kam-forslag input { width: 22px; height: 22px; accent-color: var(--blaa); flex: none; margin: 0; }
.kam-forslag span { flex: 1; font-weight: 600; }
.kam-forslag input:not(:checked) + span { color: var(--marine-2); font-weight: 500; }

/* ------------------------------------------------------------- I dag */
.idag-mad-knapper { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 4px; }
.idag-kamera { display: inline-flex; align-items: center; gap: 8px; }
.idag-kamera svg { width: 18px; height: 18px; }

/* ------------------------------------------------------- Hvad har jeg? */
.koel .side-top { margin-bottom: 6px; }
.koel-titel { font-size: 30px; margin-bottom: 18px; }
.koel-hilsen { margin-bottom: 4px; }
/* Fire måder (07-10-2026, "Scan bonen" kom til): to og to på telefonen, ikon til venstre for teksten. */
.koel-handlinger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.koel-handling {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-m);
    background: var(--hvid); box-shadow: var(--skygge); font-weight: 650; font-size: 14.5px; line-height: 1.2; text-align: left;
    transition: background .15s;
}
.koel-handling .kam-valg-ikon { width: 40px; height: 40px; }
.koel-handling .kam-valg-ikon svg { width: 21px; height: 21px; }
@media (hover: hover) { .koel-handling:hover { background: var(--himmel-2); } }

/* Telefon: retterne først — det er dem man kom for. Hvor mange ting man har, siger Buddy i boblen,
   og listen over dem står lige under. På bred skærm står de side om side (container query nederst). */
.koel-gitter { display: grid; gap: 30px; margin-top: 30px; }
.koel-retter { order: -1; }
.koel-gitter h2 { font-size: 20px; }
.koel-antal { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; margin-left: 6px; border-radius: 999px; background: var(--dis); color: var(--blaa-dyb); font: 700 15px/1 var(--display); vertical-align: 3px; }
.koel-tom { font-size: 15px; }
.koel-chips { gap: 6px; }
.koel-chip { padding: 0 6px 0 14px; gap: 2px; background: var(--hvid); box-shadow: var(--skygge); color: var(--marine); }
.koel-chip button { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--marine-3); }
.koel-chip button svg { width: 14px; height: 14px; }
@media (hover: hover) { .koel-chip button:hover { background: var(--himmel); color: var(--marine); } }

.koel-retliste { display: grid; gap: 8px; }
.koel-ret { background: var(--hvid); border-radius: var(--r-m); box-shadow: var(--skygge); padding: 4px 14px 12px; }
.koel-ret-aabn { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; width: 100%; text-align: left; padding: 12px 0 8px; }
.koel-ret-aabn .tallerken { width: 44px; height: 44px; }
.koel-ret-tekst { display: grid; gap: 2px; min-width: 0; }
.koel-ret-tekst b { font: 700 16.5px/1.22 var(--display); letter-spacing: -.01em; transition: color .15s; }
.koel-ret-tekst small { font-size: 13.5px; line-height: 1.35; }
.koel-mangler { color: var(--marine-2); }
.koel-alt { color: var(--blaa); font-weight: 650; }
.koel-ret-knapper { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding-left: 58px; }
.koel-ret-knapper .tekstknap { font-size: 14.5px; }
@media (hover: hover) { .koel-ret-aabn:hover b { color: var(--blaa); } }

.koel-vaelger { display: grid; gap: 4px; }
.koel-hylde h3 { margin: 14px 0 8px; font: 650 14.5px/1.3 var(--tekst); letter-spacing: 0; color: var(--marine-2); }
.koel-hylde .chips { gap: 6px; }
.koel-ingen { margin-top: 12px; }

/* Køleskabet: side om side, når selve indholdet er bredt nok (også med panelet ved siden af). */
.koel { container-type: inline-size; }
@container (min-width: 700px) {
    .koel-gitter { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 28px; align-items: start; }
    .koel-retter { order: 0; }
    .koel-har { position: sticky; top: 24px; }
    .koel-handlinger { grid-template-columns: repeat(4, minmax(0, 190px)); }
    .koel-handling { grid-template-columns: 44px auto; justify-content: start; padding: 12px 16px; font-size: 15px; }
    .koel-handling .kam-valg-ikon { width: 44px; height: 44px; }
}

@media (min-width: 920px) {
    .koel-titel { font-size: 34px; }
    .ark .kam-video { aspect-ratio: 16 / 10; }
}

/* ----------------------------------------------------------- kassebonen */
.kam-bon span { display: grid; gap: 1px; min-width: 0; }
/* Linjen som den stod på bonen, så man kan se hvad Buddy har oversat ("KYLL BRYST 900G" → Kyllingebryst). */
.kam-bonlinje { font: 500 12.5px/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--marine-3); letter-spacing: .02em; overflow-wrap: anywhere; }
.kam-forslag input:not(:checked) + span .kam-bonlinje { color: var(--marine-3); }
.kam-ukendte { margin-top: 14px; font-size: 14px; color: var(--marine-2); overflow-wrap: anywhere; }
.kam-ukendte b { font-weight: 650; color: var(--marine); }

/* ----------------------------------------------------------- menukortet */
.menu-kort { display: grid; gap: 4px; }
.menu-hoved { display: grid; gap: 12px; margin-top: 6px; }
.menu-valg { display: grid; gap: 10px; margin-top: 14px; }
.menu-ret { background: var(--himmel); border-radius: var(--r-m); padding: 14px 16px 10px; }
/* Anbefalingen er den man skal kigge på: lyseblå flade, større navn. Ingen ramme, ingen etiket. */
.menu-top { background: var(--dis); padding: 18px 18px 14px; }
.menu-ret-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.menu-ret-top h3 { font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; }
.menu-top .menu-ret-top h3 { font-size: 22px; }
.menu-pris { flex: none; font: 650 14px/1 var(--tekst); color: var(--marine-2); white-space: nowrap; }
.menu-tekst { margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--marine-2); }
.menu-tal { margin-top: 8px; font-size: 15px; color: var(--marine-2); }
.menu-tal .tal { font-size: 20px; color: var(--marine); }
.menu-top .menu-tal .tal { font-size: 26px; color: var(--blaa-dyb); }
.menu-skoen { font-size: 12.5px; color: var(--marine-3); margin-top: 1px; }
.menu-grund { margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--marine); }
.menu-knapper { display: flex; justify-content: flex-end; margin-top: 6px; }
.menu-top .menu-knapper { margin-top: 10px; }
.menu-overskrift { font-size: 16px; margin: 10px 0 0; }
.menu-alt-liste { display: grid; gap: 8px; }
.menu-undgaa { background: var(--hvid); box-shadow: inset 0 0 0 1.5px var(--dis); }

.menu-alle { margin-top: 18px; }
.menu-alle summary { cursor: pointer; font: 700 16px/1.3 var(--display); letter-spacing: -.01em; padding: 8px 0; list-style: none; display: flex; align-items: center; gap: 4px; }
.menu-alle summary::-webkit-details-marker { display: none; }
.menu-alle summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--marine-2); border-bottom: 2px solid var(--marine-2); transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.menu-alle[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.menu-alle ul { list-style: none; margin: 4px 0 0; padding: 0; }
.menu-raekke { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; }
.menu-raekke + .menu-raekke { box-shadow: 0 -1px 0 var(--himmel); }
.menu-raekke b { display: block; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.menu-raekke small { color: var(--marine-2); font-size: 13px; }
.menu-raekke.passer-ikke b { color: var(--marine-2); font-weight: 500; }
.menu-note { margin-top: 14px; font-size: 13px; line-height: 1.45; color: var(--marine-3); }

/* PC: anbefalingen til venstre, resten af kortet til højre. */
@media (min-width: 900px) {
    .ark.ark-menu { max-width: 940px; padding: 26px 32px 30px; }
    .menu-kort { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "hoved alle" "valg alle" "note note" "fod fod"; column-gap: 30px; align-items: start; }
    .menu-hoved { grid-area: hoved; }
    .menu-valg { grid-area: valg; }
    .menu-alle { grid-area: alle; margin-top: 6px; background: var(--himmel); border-radius: var(--r-m); padding: 6px 18px 10px; }
    .menu-alle .menu-raekke + .menu-raekke { box-shadow: 0 -1px 0 var(--dis); }
    .menu-note { grid-area: note; }
    .menu-kort .kam-fod { grid-area: fod; }
}