/* ==========================================================================
   lister.css — Indkøbssedlen (A-pakken + B-pakken "Rigtige tilbud")
   Forsideskort + fuldskærms-ark i tavlens visuelle sprog:
   tokens fra tavlen.css (--kort, --dyb, --accent …), rolige overgange,
   ingen fanfare. Markeringen på åbne punkter er tavlens accent #17767E.
   Tilbud bærer en dæmpet guld (#8A5E1E) — information, ikke reklame.
   ========================================================================== */

/* ---------- forsideskortet ---------- */
.li-kort{cursor:pointer}
.li-kort button,.li-kort a,.li-kort input{cursor:auto}
.li-kort button{cursor:pointer}
.li-kort-top{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-bottom:2px}
.li-kort-top h2{margin:0}
.li-aabn-knap{flex:none}

.li-kat{margin-top:2px}
.li-kat-cap{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--svag);margin:10px 2px 2px}
.li-kat:first-of-type .li-kat-cap{margin-top:4px}
.li-koebt .li-kat-cap{margin-top:14px}

.li-pkt{display:flex;align-items:center;gap:11px;padding:9px 10px 9px 9px;
  border-top:1px solid var(--linje-let);border-left:3px solid transparent;
  border-radius:4px}
.li-pkt.aaben{border-left-color:#17767E}
.li-pkt.sat{opacity:.62}
.li-pkt.li-ind{animation:liInd .38s cubic-bezier(.22,1,.36,1) both}
@keyframes liInd{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.li-afkryds{flex:none;width:26px;height:26px;border-radius:50%;cursor:pointer;
  border:2px solid #C7D4D4;background:#fff;display:grid;place-items:center;
  transition:border-color .22s,background .22s}
.li-afkryds:hover{border-color:var(--accent)}
.li-afkryds svg{width:12px;height:12px;stroke-dasharray:20;stroke-dashoffset:20;
  transition:stroke-dashoffset .3s cubic-bezier(.22,1,.36,1) .04s}
.li-pkt.sat .li-afkryds{background:var(--dyb);border-color:var(--dyb)}
.li-pkt.sat .li-afkryds svg{stroke-dashoffset:0}

.li-pkt-mid{flex:1;min-width:0}
.li-pkt-tekst{display:block;font-size:14px;font-weight:600;color:var(--blaek);
  letter-spacing:-.005em}
.li-pkt.sat .li-pkt-tekst{text-decoration:line-through;color:var(--svag);
  font-weight:500}
.li-antal{display:inline-block;margin-right:6px;padding:1px 7px;border-radius:7px;
  background:var(--info-bg);color:var(--dybere);font-family:'Spline Sans Mono',
  ui-monospace,monospace;font-size:11px;font-weight:700;vertical-align:1px}
.li-fast-mærke{margin-left:6px;color:var(--accent);font-size:12px}
.li-meta{display:block;font-size:11px;color:var(--svagest);margin-top:1px}
.li-tilbud{flex:none;font-size:12px;font-weight:600;padding:6px 4px}

/* ---------- tilbud (B-pakken) ---------- */
/* diskret guldmærke på varen: "Tilbud · 20 kr · Netto" */
.li-tbm{display:inline-flex;align-items:baseline;gap:7px;margin-top:5px;
  border:1px solid rgba(138,94,30,.38);background:rgba(138,94,30,.07);
  color:#8A5E1E;border-radius:999px;padding:3px 11px;font-family:inherit;
  font-size:11.5px;font-weight:600;cursor:pointer;
  transition:background .2s,border-color .2s}
.li-tbm b{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:9px;letter-spacing:.11em;text-transform:uppercase;font-weight:700}
.li-tbm:hover{background:rgba(138,94,30,.14);border-color:rgba(138,94,30,.55)}

/* fold-ud-panelet under varen (op til 6 tilbud, pris stigende) */
.li-tbp{background:var(--linje-let);border:1px solid var(--linje);
  border-radius:16px;padding:4px 14px 12px;margin:6px 0 10px;
  animation:liTbp .25s cubic-bezier(.22,1,.36,1)}
@keyframes liTbp{from{opacity:0;transform:translateY(-6px)}}
.li-tb{display:flex;align-items:flex-start;gap:12px;padding:10px 0;
  border-top:1px solid var(--linje)}
.li-tb:first-of-type{border-top:0}
.li-tb-mid{flex:1;min-width:0}
.li-tb-overskrift{display:block;font-size:13.5px;font-weight:600;
  color:var(--blaek)}
.li-tb-det{display:block;font-size:11.5px;color:var(--svag);margin-top:2px}
.li-tb-enhed{display:block;font-size:11px;color:var(--svagest);margin-top:1px}
.li-tb-prisblok{flex:none;text-align:right}
.li-tb-pris{display:block;font-size:15px;font-weight:700;color:var(--blaek)}
.li-tb-foer{display:block;font-size:11.5px;color:var(--svagest)}
.li-tbp-fod{margin-top:6px;padding-top:10px;border-top:1px solid var(--linje);
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-size:11.5px;color:var(--svag)}
.li-tbp-fod a{color:var(--dyb);font-weight:600}

/* "Tilbud på jeres seddel" — rolig sektion øverst i arket */
.li-tbs{border:1px solid rgba(138,94,30,.32);background:rgba(138,94,30,.05);
  border-radius:16px;padding:12px 14px;margin:2px 0 12px}
.li-tbs-cap{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#8A5E1E;margin-bottom:6px}
.li-tbs-linje{display:flex;width:100%;align-items:baseline;gap:12px;
  justify-content:space-between;padding:4px 0;background:none;border:0;
  font-family:inherit;font-size:13px;color:var(--svag);cursor:pointer;
  text-align:left;border-radius:6px}
.li-tbs-linje:hover{color:var(--daemp)}
.li-tbs-linje b{color:var(--blaek);font-weight:600}
.li-tbs-samlet{margin-top:8px;font-size:12px;color:var(--svag)}
.li-tbs-kilde{margin-top:4px;font-size:11px;color:var(--svagest)}

/* forslag-chips */
.li-forslag{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:12px}
.li-forslag-etik{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--svag);flex:none}
.li-chip{border:1.5px dashed rgba(23,118,126,.35);background:rgba(23,118,126,.05);
  border-radius:999px;padding:6px 13px;font-family:inherit;font-size:12.5px;
  font-weight:600;color:var(--dyb);cursor:pointer;
  transition:background .2s,border-color .2s}
.li-chip:hover{background:rgba(23,118,126,.12);border-color:rgba(23,118,126,.55)}
.li-chip.fast{border-style:dotted;border-color:var(--linje);
  background:transparent;color:var(--svag);font-weight:500}
.li-chip.fast:hover{border-color:var(--svagest);color:var(--daemp)}

/* input-række på kortet */
.li-input{display:flex;gap:8px;margin-top:12px;align-items:center}
.li-input input{flex:1;margin-bottom:0}
.li-tilfoej{flex:none;background:#16565C;border-color:#16565C;color:#fff}

.li-fejl{font-size:12.5px;margin-top:8px;color:#A8341F}
.li-offline{display:flex;align-items:center;gap:8px;margin-top:8px;
  font-size:12.5px;color:var(--advarsel-blaek)}
.li-offline .prik{width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--advarsel-prik)}

/* ---------- fuldskærms-arket (B-pakken: ægte fullscreen alle skærme) ----------
   Sedlen er arbejdsflade: den dækker hele viewporten, åbner med rolig
   slide-op/fade (~250ms) og lukker KUN via Færdig/✕ — aldrig ved Escape
   eller fejltryk udenfor. */
#li-ark{position:fixed;inset:0;z-index:405;font-family:inherit}
#li-ark .li-sloer{position:absolute;inset:0;background:rgba(15,42,46,.44);
  pointer-events:none;animation:liSlør .25s ease}
@keyframes liSlør{from{opacity:0}}
#li-ark .li-ark-kort{position:absolute;inset:0;overflow-y:auto;
  background:var(--kort,#fff);
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
  animation:liOp .25s cubic-bezier(.22,1,.36,1)}
@keyframes liOp{from{opacity:0;transform:translateY(26px)}}
#li-ark.lukker .li-ark-kort{animation:liNed .24s ease both}
#li-ark.lukker .li-sloer{animation:liUd .24s ease both}
@keyframes liNed{to{opacity:0;transform:translateY(30px)}}
@keyframes liUd{to{opacity:0}}

.li-ark-top{position:sticky;top:0;z-index:4;background:var(--kort,#fff);
  border-bottom:1px solid var(--linje-let);
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px}
.li-ark-top-ind{max-width:680px;margin:0 auto;display:flex;align-items:center;
  gap:10px}
.li-ark-top h2{margin:0;font-size:20px;letter-spacing:-.01em}
.li-ark-knapper{margin-left:auto;display:flex;gap:6px;align-items:center;
  flex-wrap:wrap;justify-content:flex-end}
.li-vk{border:1.5px solid var(--linje);background:#fff;color:var(--dyb);
  border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600;
  cursor:pointer;transition:border-color .2s,background .2s}
.li-vk:hover{border-color:var(--accent)}
.li-ark-kort.butik .li-butik-knap{background:var(--dyb);border-color:var(--dyb);
  color:#fff}
.li-faerdig{background:var(--dyb);border-color:var(--dyb);color:#fff}
.li-luk{padding:7px 12px;font-size:17px;line-height:1}
.li-ark-indhold{max-width:680px;margin:0 auto;padding:12px 20px 0}

.li-hurtig{display:flex;gap:8px;margin-top:6px}
.li-hurtig input{flex:1;margin-bottom:0}
.li-hurtig-knap{flex:none;background:var(--dyb);border-color:var(--dyb);
  color:#fff}
.li-hurtig-hjælp{font-size:11.5px;color:var(--svagest);margin:6px 2px 0}

.li-liste{margin-top:6px}
.li-kurv{margin-top:4px}

.li-tom{text-align:center;padding:30px 16px;color:var(--svag)}
.li-tom b{display:block;font-size:15px;color:var(--daemp);margin-bottom:4px}
.li-tom span{font-size:13px}

/* ret-panelet (langt tryk) */
.li-ret{background:var(--linje-let);border:1px solid var(--linje);
  border-radius:16px;padding:13px 14px;margin:6px 0 10px;
  animation:liRet .3s cubic-bezier(.22,1,.36,1)}
@keyframes liRet{from{opacity:0;transform:translateY(-6px)}}
.li-ret-etik{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.12em;color:var(--svag);margin-bottom:8px}
.li-ret-katte{display:flex;flex-wrap:wrap;gap:7px}
.li-retkat{border-style:solid;border-color:var(--linje);background:#fff;
  font-weight:500}
.li-retkat.valgt{background:var(--dyb);border-color:var(--dyb);color:#fff;
  font-weight:600}
.li-ret-fast{display:flex;gap:10px;align-items:flex-start;margin-top:12px;
  font-size:13px;color:var(--daemp);cursor:pointer}
.li-ret-fast input{width:18px;height:18px;flex:none;margin-top:1px;
  accent-color:var(--dyb)}
.li-ret-knapper{display:flex;gap:8px;margin-top:12px;justify-content:space-between}
.li-ret-knapper .li-retfaerdig{background:var(--dyb);border-color:var(--dyb);
  color:#fff;border-style:solid}

/* ---------- butik-tilstand ---------- */
.li-ark-kort.butik{font-size:17px}
.li-fremdrift{margin:4px 0 12px;font-size:14px;color:var(--daemp)}
.li-fremdrift b{color:var(--blaek)}
.li-fremdrift-spor{height:7px;border-radius:99px;background:var(--linje-let);
  overflow:hidden;margin-top:7px}
.li-fremdrift-spor i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--dyb));
  transition:width .5s cubic-bezier(.25,.46,.45,.94)}
.li-ark-kort.butik .li-pkt{padding:14px 12px;border-left-width:4px}
.li-ark-kort.butik .li-pkt-tekst{font-size:19px}
.li-ark-kort.butik .li-meta{font-size:12.5px}
.li-ark-kort.butik .li-afkryds{width:40px;height:40px}
.li-ark-kort.butik .li-afkryds svg{width:18px;height:18px}
.li-ark-kort.butik .li-kurv .li-pkt{padding:10px 12px}
.li-ark-kort.butik .li-kurv .li-pkt-tekst{font-size:15px}
.li-ark-kort.butik .li-kurv .li-afkryds{width:30px;height:30px}
.li-ark-kort.butik .li-kurv .li-afkryds svg{width:13px;height:13px}

.li-fuld{text-align:center;padding:26px 16px 20px;color:var(--svag)}
.li-fuld b{display:block;font-size:19px;color:var(--dybere);
  letter-spacing:-.01em;margin-bottom:4px}
.li-fuld span{display:block;font-size:13.5px;margin-bottom:14px}
.li-fuld .li-vk{background:var(--dyb);border-color:var(--dyb);color:#fff}

/* ==========================================================================
   C-PAKKEN — madplan, smart-input, pris-radar, ugens rytme, butik 2.0,
   del sedlen. Samme sprog: tokens fra tavlen.css, rolige overgange.
   ========================================================================== */

/* ---------- rolig note (fælles bekræftelse/fortryd/synk) ---------- */
.li-note{display:flex;align-items:center;gap:9px;margin:2px 0 12px;
  background:var(--info-bg);border:1px solid var(--info-kant);
  border-radius:12px;padding:9px 12px;font-size:12.5px;font-weight:600;
  color:var(--info-blaek);line-height:1.45;
  animation:liNoteInd .25s cubic-bezier(.22,1,.36,1)}
@keyframes liNoteInd{from{opacity:0;transform:translateY(-5px)}}
.li-note .prik{flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--accent)}
.li-note button{margin-left:auto;flex:none;color:var(--dyb);font-weight:700;
  font-size:12.5px;padding:3px 8px;border-radius:8px;cursor:pointer}
.li-note button:hover{background:rgba(23,118,126,.10)}

/* ---------- D6 · del sedlen ---------- */
.li-del{border:1px solid var(--info-kant);background:var(--info-bg);
  border-radius:16px;padding:12px 14px;margin:2px 0 12px}
.li-del-cap{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dybere);margin-bottom:8px}
.li-del-kode-række{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:2px 0 8px}
.li-del-kode{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:21px;font-weight:700;letter-spacing:.3em;color:var(--dybere);
  background:#fff;border:1px solid var(--linje);border-radius:12px;
  padding:7px 12px 7px 20px}
.li-del-tekst{font-size:12.5px;color:var(--daemp);line-height:1.55;
  margin:0 0 10px}

/* ---------- D1 · madplan ---------- */
.li-mad{margin-top:12px}
.li-mad-toggle{display:flex;align-items:center;gap:10px;width:100%;
  border:1.5px solid var(--linje);background:#fff;color:var(--dyb);
  border-radius:999px;padding:9px 15px;font-family:inherit;font-size:13px;
  font-weight:600;cursor:pointer;transition:border-color .2s,background .2s}
.li-mad-toggle:hover{border-color:var(--accent)}
.li-mad-toggle span:first-child{flex:1;text-align:left}
.li-mad-chev{flex:none;display:grid;place-items:center;color:var(--svag);
  transition:transform .25s cubic-bezier(.22,1,.36,1)}
.li-mad-chev svg{width:14px;height:14px;display:block}
.li-mad-toggle[aria-expanded="true"] .li-mad-chev{transform:rotate(180deg)}
.li-mad-panel{margin-top:10px;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  animation:liNoteInd .25s cubic-bezier(.22,1,.36,1)}
.li-madret{border:1px solid var(--linje);border-radius:12px;background:#fff;
  padding:10px 12px;cursor:pointer;transition:border-color .2s,background .2s}
.li-madret:hover{border-color:#B9CDCD}
.li-madret:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.li-madret.vis{border-color:var(--dyb);background:var(--linje-let)}
.li-madret-navn{display:block;font-size:13.5px;font-weight:700;
  color:var(--blaek);line-height:1.25}
.li-madret-meta{display:block;font-size:11px;color:var(--svag);margin-top:2px}
.li-madret-varer{display:block;font-size:12px;color:var(--daemp);
  line-height:1.55;margin-top:7px}
.li-madret-laeg{margin-top:9px;border-style:solid}
.li-mad-hint{grid-column:1/-1;font-size:11.5px;color:var(--svagest);
  margin:2px 2px 0}

/* ---------- D2 · autocomplete ---------- */
.li-ac-ramme{position:relative;flex:1;min-width:0}
.li-hurtig .li-ac-ramme input{width:100%;margin-bottom:0}
.li-ac{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:7;
  background:var(--kort,#fff);border:1px solid var(--linje);
  border-radius:14px;overflow:hidden;
  box-shadow:0 2px 6px rgba(15,42,46,.08),0 12px 30px -14px rgba(15,42,46,.28)}
.li-ac-liste{list-style:none;margin:0;padding:4px}
.li-ac-rad{display:flex;align-items:baseline;gap:10px;width:100%;
  padding:9px 10px;border-radius:10px;text-align:left;cursor:pointer;
  font-family:inherit}
.li-ac-rad:hover,.li-ac-rad.aktiv{background:var(--linje-let)}
.li-ac-navn{flex:1;min-width:0;font-size:14px;color:var(--blaek)}
.li-ac-navn b{color:var(--dybere)}
.li-ac-meta{flex:none;font-size:11px;color:var(--svagest);max-width:46%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- D3 · pris-radar ---------- */
.li-pris{border:1px solid var(--info-kant);background:var(--info-bg);
  border-radius:16px;padding:12px 14px;margin:2px 0 12px}
.li-pris-cap{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dybere);margin-bottom:8px}
.li-pris-rad{display:flex;align-items:center;gap:9px;padding:4px 0}
.li-pris-navn{flex:none;width:104px;font-family:'Spline Sans Mono',
  ui-monospace,monospace;font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--daemp);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.li-pris-rad.billigst .li-pris-navn{color:var(--dybere);font-weight:700}
.li-pris-tag{font-style:normal;margin-left:6px;padding:1px 7px;
  border-radius:999px;border:1px solid rgba(138,94,30,.42);
  background:rgba(138,94,30,.1);color:#8A5E1E;font-size:8.5px;
  letter-spacing:.1em}
.li-pris-spor{flex:1;height:18px;border-radius:6px;overflow:hidden;
  background:rgba(255,255,255,.8);border:1px solid var(--linje)}
.li-pris-spor i{display:block;height:100%;border-radius:5px 0 0 5px;
  background:rgba(23,118,126,.30);
  transition:width .5s cubic-bezier(.25,.46,.45,.94)}
.li-pris-rad.billigst .li-pris-spor i{background:rgba(138,94,30,.5)}
.li-pris-total{flex:none;width:56px;text-align:right;
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:11.5px;
  font-weight:700;color:var(--blaek);white-space:nowrap}
.li-pris-daek{flex:none;font-size:10px;color:var(--svag);white-space:nowrap}
.li-pris-fund{margin-top:6px;font-size:12.5px;color:var(--daemp);
  line-height:1.5}
.li-pris-fund b{color:var(--blaek);font-weight:600}
.li-pris-kilde{margin-top:8px;font-size:11px;color:var(--svagest)}

/* ---------- D2 · swipe-feedback ---------- */
#li-ark .li-pkt{touch-action:pan-y;background:var(--kort,#fff)}
#li-ark .li-kat{position:relative}
.li-swipe-bag{position:absolute;left:0;right:0;display:flex;
  align-items:center;justify-content:space-between;padding:0 16px;
  border-radius:6px;opacity:0;font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase}
.li-swipe-side{display:none;align-items:center;gap:7px}
.li-swipe-side svg{width:15px;height:15px}
.li-swipe-bag.mod-kurv{background:rgba(34,131,74,.14);color:var(--god-blaek)}
.li-swipe-bag.mod-kurv .li-swipe-kurv{display:inline-flex}
.li-swipe-bag.mod-fjern{background:rgba(168,52,31,.10);color:#A8341F}
.li-swipe-bag.mod-fjern .li-swipe-fjern{display:inline-flex;margin-left:auto}
.li-pkt.li-swipes{cursor:grabbing;user-select:none;-webkit-user-select:none}
.li-pkt.li-swipe-glider{transition:transform .22s cubic-bezier(.22,1,.36,1)}

/* ---------- D5 · butik 2.0 ---------- */
.li-skilt{position:sticky;top:var(--li-toph,56px);z-index:3;
  display:flex;align-items:baseline;gap:10px;margin:0 -4px;
  padding:10px 4px 8px;background:var(--kort,#fff);
  border-bottom:1px solid var(--linje-let)}
.li-skilt-navn{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dybere)}
.li-skilt-tal{margin-left:auto;font-family:'Spline Sans Mono',ui-monospace,
  monospace;font-size:10px;letter-spacing:.08em;color:var(--svag);
  text-transform:uppercase}
.li-sidste{margin:0 0 12px;background:var(--info-bg);
  border:1px solid var(--info-kant);border-radius:12px;padding:9px 12px;
  font-size:13px;color:var(--info-blaek);line-height:1.5}
.li-fuld.li-kasse .li-vk{background:#fff;border-color:var(--linje);
  color:var(--dyb)}
.li-fuld.li-kasse .li-kasse-afslut{background:var(--dyb);
  border-color:var(--dyb);color:#fff}
.li-kasse-knapper{display:flex;gap:8px;justify-content:center;
  flex-wrap:wrap;margin-top:2px}

/* ---------- rolighed først ---------- */
@media (prefers-reduced-motion:reduce){
  .li-pkt.li-ind,.li-ret,.li-tbp,#li-ark .li-ark-kort,#li-ark .li-sloer,
  #li-ark.lukker .li-ark-kort,#li-ark.lukker .li-sloer{animation:none}
  .li-afkryds svg,.li-fremdrift-spor i,.li-chip,.li-vk,.li-tbm{transition-duration:.01s}
  .li-note,.li-mad-panel{animation:none}
  .li-mad-chev,.li-mad-toggle,.li-madret,.li-pris-spor i,
  .li-pkt.li-swipe-glider,.li-note button{transition-duration:.01s}
}
@media (max-width:420px){
  .li-pris-navn{width:84px}
  .li-del-kode{font-size:19px}
}