/* ============================================================
   Bibliotek — demo-sandkasse
   Samme visuelle sprog som resten af Tavlen. Fanens accent er
   bog-laeder: rav/amber. Roed bruges KUN til "over tiden".
   ============================================================ */
body[data-appfane="bibliotek"]{--fanefarve:#8A5A24;--fanetint:#F6EDDD;--fanetil:#C98F3D}

/* Adgang til password-feltet i tilslut-forloebet (tavlen.css
   styler kun text-felter). */
.kort input[type=password]{display:block;width:100%;margin-bottom:9px;
  font:inherit;font-size:15px;padding:11px 13px;border-radius:11px;
  background:#F7FAFA;border:1px solid #D8E2E2;color:var(--blaek);
  max-width:520px}
.kort input[type=password]:focus:not(:focus-visible){outline:none;
  border-color:var(--fanefarve);background:#fff}

/* Gruppeoverskrift med lille levende prik. */
.bib-gruppehoved{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.bib-gruppehoved h2.gruppe{margin:0}
.bib-puls{width:8px;height:8px;border-radius:50%;background:var(--fanetil);flex:none;position:relative}
.bib-puls::after{content:"";position:absolute;inset:-3px;border-radius:50%;
  border:2px solid var(--fanetil);opacity:0;animation:bibPuls 2.6s ease-out infinite}
@keyframes bibPuls{0%{transform:scale(.45);opacity:.75}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}

/* ---------- afhentnings-sedlen ---------- */
/* En seddel som den ved skranken: venstre del med titel og frist,
   højre stub med det store nummer, skilt af perforering. */
.bib-ticket{display:flex;align-items:stretch;background:var(--kort);
  border:1px solid #ECE2CF;border-radius:18px;box-shadow:var(--skygge);
  overflow:hidden}
.bib-ticket .del{flex:1;min-width:0;padding:16px 8px 16px 16px}
.bib-ticket .titel{font-size:15.5px;font-weight:700;line-height:1.25}
.bib-ticket .frist{font-size:13px;color:var(--daemp);margin-top:4px}
.bib-ticket .frist b{color:var(--advarsel-blaek);font-weight:700}
.bib-stub{flex:none;width:124px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;padding:14px 10px;
  background:linear-gradient(165deg,#FBF4E4,#F4E9D2);
  border-left:2px dashed #E0CCA3}
.bib-stub .et{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:8.5px;font-weight:500;letter-spacing:.14em;color:#9A7B45}
.bib-stub .nr{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:36px;font-weight:500;letter-spacing:.03em;color:#6B4413;
  font-variant-numeric:tabular-nums;line-height:1.05}
.bib-filial{display:inline-block;margin-top:8px;font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:10px;color:#9A7B45;background:#FBF6EA;border:1px solid #ECE0C6;
  padding:2px 7px;border-radius:6px}

/* ---------- bog-glyffen ---------- */
.bib-bog{width:30px;height:40px;flex:none;border-radius:4px 7px 7px 4px;
  background:linear-gradient(150deg,#B98A4A,#8A5A24);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.12),0 1px 2px rgba(23,42,45,.12);
  position:relative;margin-top:1px}
.bib-bog::before{content:"";position:absolute;left:5px;top:0;bottom:0;
  width:1.5px;background:rgba(255,255,255,.45)}
.bib-bog::after{content:"";position:absolute;left:11px;right:6px;top:8px;
  height:2px;border-radius:1px;background:rgba(255,255,255,.4);
  box-shadow:0 5px 0 rgba(255,255,255,.28)}
.bib-bog.vent{background:linear-gradient(150deg,#C9B083,#A3854F)}
.bib-bog.materiale{background:linear-gradient(150deg,#B9C2C4,#93A1A4)}

/* Kompakt liste-kort (samme padding som .kort.tael, men uden dets
   text-align:right — den hoerer til tegntaelleren i skriv-flowet). */
.bib-liste{padding:4px 16px}

/* ---------- laan ---------- */
.bib-laan{display:flex;gap:12px;align-items:flex-start;padding:12px 0;
  border-top:1px solid var(--linje-let)}
.bib-laan:first-of-type{border-top:0}
.bib-ltekst{flex:1;min-width:0}
.bib-titel{font-size:14.5px;font-weight:600;line-height:1.3}
.bib-dato{font-size:12.5px;color:var(--daemp);margin-top:2px}
.bib-dage{flex:none;font-size:11.5px;font-weight:700;padding:4px 10px;
  border-radius:999px;background:#F0F4F4;color:#3E5457;white-space:nowrap;
  margin-top:2px}
.bib-dage.snart{background:var(--advarsel-bg);color:var(--advarsel-staerk);
  border:1px solid var(--advarsel-kant)}
/* Det eneste roede paa fanen: over tiden. */
.bib-dage.roed{background:#F9E9E3;color:#A8341F;border:1px solid #EECABB}

/* Oplysning, aldrig knap: bogen kan fornys. */
.bib-kanfornyes{display:inline-block;margin-top:6px;font-size:11px;font-weight:700;
  padding:3px 9px;border-radius:999px;background:var(--fanetint);color:#7A4E0B}

/* raekken kan slås op: faust og rolig vejledning foldes frem */
.bib-laan{cursor:pointer;border-radius:12px;margin:0 -6px;padding-left:6px;
  padding-right:6px;transition:background .2s}
.bib-laan:hover{background:#FBF7EC}
.bib-laan .bib-bog{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.bib-laan:hover .bib-bog{transform:rotate(-5deg) translateY(-1px)}
.bib-detalje{display:flex;flex-direction:column;gap:3px;overflow:hidden;
  max-height:0;opacity:0;margin-top:0;font-size:12px;color:var(--svag);
  transition:max-height .38s cubic-bezier(.16,1,.3,1),opacity .3s,margin-top .3s}
.bib-laan.aabent .bib-detalje{max-height:64px;opacity:1;margin-top:7px}
.bib-detalje .mono{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:10.5px}
.bib-detalje .vejl{font-size:11.5px;color:#9A7B45}

/* afhentnings-sedlen får et roligt lysstrøg ved hover */
.bib-ticket{position:relative;overflow:hidden}
.bib-ticket::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-12deg);transition:left .65s ease;pointer-events:none}
.bib-ticket:hover::after{left:125%}

/* Bibliotekets egen begrundelse — deres ord, ikke vores. */
.bib-spaerring{margin-top:7px;font-size:12.5px;line-height:1.45;color:#6B5A3E;
  background:#FAF5E9;border-left:3px solid #E0CCA3;
  padding:7px 11px;border-radius:0 9px 9px 0}

/* Materialer hvis titel ikke kunne slaaes op: daempet, ikke skjult. */
.bib-materiale .bib-titel{color:var(--svag)}
.bib-materiale .bib-dato{color:var(--svagest)}
.bib-notitel{font-size:11.5px;color:var(--svagest);margin-top:2px;font-style:italic}

/* ---------- reserveringer ---------- */
.bib-res{display:flex;gap:12px;align-items:center;padding:11px 0;
  border-top:1px solid var(--linje-let)}
.bib-res:first-of-type{border-top:0}
.bib-koe{flex:none;font-size:11.5px;font-weight:700;padding:4px 10px;
  border-radius:999px;background:var(--fanetint);color:#7A4E0B;white-space:nowrap}

/* ---------- tom tilstand: ren hylde ---------- */
.bib-hylde{display:flex;align-items:flex-end;gap:4px;height:26px;width:112px;
  margin:2px 0 12px}
.bib-hylde i{display:block;width:34px;height:9px;border-radius:3px}
.bib-hylde i:nth-child(1){background:#C9B083}
.bib-hylde i:nth-child(2){background:#B98A4A;width:38px}
.bib-hylde i:nth-child(3){background:#A3854F;width:30px}
.bib-hylde{flex-direction:column;align-items:flex-start;gap:3px;height:auto}

/* ---------- tilslut-forloeb ---------- */
.bib-trin{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:#9A7B45;margin-bottom:10px}
.bib-fundet{display:flex;align-items:center;gap:12px;margin:12px 0;
  background:var(--god-bg);border:1px solid var(--god-kant);
  border-radius:14px;padding:12px 14px}
.bib-fundet .prik{width:8px;height:8px;border-radius:50%;background:var(--god-staerk);flex:none}
.bib-fundet b{font-size:14px;color:var(--god-blaek);display:block}
.bib-fundet .lille{font-size:12.5px;color:var(--god-blaek);opacity:.85;margin-top:1px}
.bib-forklaring{font-size:13px;line-height:1.55;color:var(--daemp);
  background:#F7FAFA;border:1px solid var(--linje-let);border-radius:12px;
  padding:11px 13px;margin:4px 0 12px;max-width:64ch}
.bib-knapraekke{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.bib-fejl{margin-top:10px;font-size:13px;font-weight:600;color:var(--advarsel-blaek);
  background:var(--advarsel-bg);border:1px solid var(--advarsel-kant);
  border-radius:11px;padding:9px 12px}

/* ---------- demo-tilstandsvaelger ---------- */
.bib-skifter{margin-top:22px;padding-top:14px;border-top:1px dashed #D9D3C4}
.bib-skifter .etik{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--svagest);margin-bottom:8px}

/* Snaever mobil: ni fane-knappe maa ikke tvinge siden bredere end
   skaermen — lad dem krympe, og goer pillene smallere. */
@media (max-width:520px){
  nav.bund{padding-left:2px;padding-right:2px}
  nav.bund button{min-width:0}
  nav.bund .pille{padding:4px 8px}
  nav.bund span.mrk{font-size:9px}
  .bib-stub{width:106px}
  .bib-stub .nr{font-size:29px}
}

/* Blød indgang for hvert kort ved skift af tilstand. */
.bib-ind{animation:fadeUp .45s cubic-bezier(.16,1,.3,1) both}

.bib-hint{font-size:12.5px;color:#6E8487;line-height:1.45;margin:-4px 0 12px}

/* ---- Hvem lånet hører til ------------------------------------------------
   Hvert barn har sit eget bibliotekskort, og det er barnets bog, nogen
   glemmer at aflevere. Uden et navn på lånet står barnets og forælderens
   bog side om side uden forskel.
   Farven kommer fra husstandens indstillinger via --ejerfarve, sat inline.
   Er den ikke sat, falder mærket tilbage til den rolige petrol — så virker
   det også for et kort, der hører til en, der ikke er et af børnene. */
.bib-ejer{
  display:inline-block;margin:2px 0 4px;padding:1px 8px;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
  border-radius:999px;
  color:var(--ejerfarve,#16565C);
  background:color-mix(in srgb, var(--ejerfarve,#16565C) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--ejerfarve,#16565C) 30%, transparent);
}
/* color-mix er nyt nok til at ældre browsere ikke kender det. Uden
   reservefarven ville mærket stå uden baggrund — læsbart, men fladt. */
@supports not (background: color-mix(in srgb, red 10%, transparent)){
  .bib-ejer{background:#F1F5F5;border-color:#DCE6E6}
}

/* ---- Kortene på tavlen --------------------------------------------------
   Oversigten over hvilke bibliotekskort der er tilsluttet. Der er med
   vilje ingen fjern-knap her: tavlen hænger på en væg, og et fejlklik må
   ikke kunne slette husstandens adgang. */
.bib-kort{
  display:flex;align-items:center;gap:12px;
  padding:11px 2px;border-top:1px solid var(--kant,#E7E2D7);
}
.bib-kort:first-child{border-top:0}
.bib-kort.mangler .bib-titel{color:#8A5A10}
.knap.lille{padding:5px 11px;font-size:12.5px}

/* --- samtykket ved bibliotekskortet --------------------------------
   Eget felt, egen ramme, aldrig forudkrydset. "Saerskilt" i lovens
   forstand betyder, at det ikke maa ligge sammen med noget andet — og
   teksten staar her, ikke bag et link: man kan ikke give et informeret
   samtykke til noget, man skal klikke sig hen til. */
.bib-samtykke {
  margin: 18px 0 4px; padding: 13px 14px;
  border: 1.5px solid var(--kant, #d8d2c8); border-radius: 12px;
  background: var(--loft, #faf7f2);
}
.bib-samtykke label {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
}
.bib-samtykke input[type="checkbox"] {
  margin-top: 3px; width: 18px; height: 18px; flex: none;
}
.bib-samtykke-tekst {
  display: block; margin-top: 5px;
  font-size: 12.5px; opacity: .75; line-height: 1.5;
}


/* arrangementer: aflyst-maerkatet */
.bib-aflyst{color:#A8341F;font-weight:750;font-size:10.5px;letter-spacing:.07em}

/* Lag A (11-08-2026): forside og forfatter paa laanene. Forsiden fylder
   praecis bog-ikonets plads, saa raekken ikke hopper, naar billedet
   mangler. */
.bib-forside {
  width: 34px; height: 48px; border-radius: 5px; object-fit: cover;
  flex: none; box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  background: rgba(127, 127, 127, .12);
}
.bib-forfatter { font-size: 12.5px; opacity: .72; }

/* Lag B: forny-knappen. Roligt udtryk; groen naar det lykkedes. */
.bib-fornyknap {
  font: inherit; font-size: 12.5px; border: 1px solid currentColor;
  border-radius: 999px; padding: 2px 12px; background: none;
  color: inherit; cursor: pointer; opacity: .85;
}
.bib-fornyknap:disabled { cursor: default; opacity: .7; }
.bib-fornyknap.bib-fornyet { border-color: transparent; opacity: 1; }

/* Lag C: soegefeltet og valg af kort. */
.bib-soegefelt {
  width: 100%; font: inherit; padding: 9px 13px; border-radius: 10px;
  border: 1px solid rgba(127, 127, 127, .35); background: none;
  color: inherit; margin-bottom: 8px;
}
.bib-vaelgkort {
  font: inherit; font-size: 13px; margin: 0 0 8px; padding: 5px 9px;
  border-radius: 8px; border: 1px solid rgba(127, 127, 127, .35);
  background: none; color: inherit;
}
.bib-soegetom { opacity: .7; font-size: 13.5px; padding: 4px 2px; }