/* ==========================================================================
   born.css — Børnenes side (forældre-delen af Børne-Tavlen)
   Forsideskort + fuldskærms-ark i tavlens visuelle sprog — præcis samme
   mønster som lister.css: tokens fra tavlen.css (--kort, --dyb, --accent …),
   rolige overgange, ingen fanfare. Barnets farve kommer inline som
   --bo-farve pr. barn; gulden (#C9A24B) er modulets egen stille markør
   (nøglen om linket), ikke reklame.
   ========================================================================== */

.bo-kort, #bo-ark { --bo-guld: #C9A24B; --bo-farve: var(--accent, #17767E); }

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

.bo-barn{display:flex;align-items:center;gap:12px;padding:10px 2px;
  border-top:1px solid var(--linje-let,#EEF3F3)}
.bo-barn:first-of-type{border-top:0}
.bo-medaljon{flex:none;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;font-size:16px;font-weight:700;
  color:#fff;background:var(--bo-farve);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.22)}
.bo-barn-mid{flex:1;min-width:0}
.bo-barn-navn{display:block;font-size:14.5px;font-weight:700;
  color:var(--blaek,#172A2D);letter-spacing:-.005em}
.bo-status{display:flex;align-items:center;gap:7px;font-size:12px;
  color:var(--svagest,#8CA0A3);margin-top:1px}
.bo-status .prik{flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--linje,#E2EAEA)}
.bo-status.set{color:var(--daemp,#52686B)}
.bo-status.set .prik{background:var(--bo-farve)}
.bo-nogle{flex:none;color:var(--bo-guld);display:grid;place-items:center}
.bo-nogle svg{width:15px;height:15px}

/* ---------- fuldskærms-arket (samme mønster som lister.css' #li-ark) ------
   Arbejdsflade: dækker hele viewporten, åbner med rolig slide-op/fade
   (~250ms) og lukker KUN via Færdig/✕ — aldrig ved Escape eller fejltryk. */
#bo-ark{position:fixed;inset:0;z-index:406;font-family:inherit}
#bo-ark .bo-sloer{position:absolute;inset:0;background:rgba(15,42,46,.44);
  pointer-events:none;animation:boSloer .25s ease}
@keyframes boSloer{from{opacity:0}}
#bo-ark .bo-ark-kort{position:absolute;inset:0;overflow-y:auto;
  background:var(--kort,#FDFBF6);
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
  animation:boOp .25s cubic-bezier(.22,1,.36,1)}
@keyframes boOp{from{opacity:0;transform:translateY(26px)}}
#bo-ark.lukker .bo-ark-kort{animation:boNed .24s ease both}
#bo-ark.lukker .bo-sloer{animation:boUd .24s ease both}
@keyframes boNed{to{opacity:0;transform:translateY(30px)}}
@keyframes boUd{to{opacity:0}}

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

/* rolig note + fejl + venter-linje (samme sprog som lister) */
.bo-note{display:flex;align-items:center;gap:9px;margin:2px 0 12px;
  background:var(--info-bg,#E4EFEF);border:1px solid var(--info-kant,#CBDFDF);
  border-radius:12px;padding:9px 12px;font-size:12.5px;font-weight:600;
  color:var(--info-blaek,#3E6266);line-height:1.45;
  animation:boNoteInd .25s cubic-bezier(.22,1,.36,1)}
@keyframes boNoteInd{from{opacity:0;transform:translateY(-5px)}}
.bo-note .prik{flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--accent,#17767E)}
.bo-fejl{font-size:12.5px;margin:2px 0 12px;color:#A8341F}
.bo-venter{display:flex;align-items:center;gap:8px;margin:2px 0 12px;
  font-size:12.5px;color:var(--advarsel-blaek,#7A4E0B)}
.bo-venter .prik{width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--advarsel-prik,#C97F16)}

/* offline: handlinger må ikke kø-lægges — sektionerne dæmpes, og alle
   ændrings-kontroller slås fra (læsning er stadig mulig) */
.bo-offline .bo-sektion{opacity:.55}
.bo-offline .bo-sektion button,
.bo-offline .bo-sektion input,
.bo-offline .bo-sektion textarea,
.bo-offline .bo-sektion select{pointer-events:none}

/* ---------- barn-vælger ---------- */
.bo-vaelger{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 16px}
.bo-chip{display:inline-flex;align-items:center;gap:9px;border-radius:999px;
  border:1.5px solid var(--linje,#E2EAEA);background:#fff;
  padding:6px 14px 6px 7px;font-family:inherit;font-size:13.5px;
  font-weight:600;color:var(--daemp,#52686B);cursor:pointer;
  transition:border-color .2s,background .2s,color .2s}
.bo-chip .bo-medaljon{width:28px;height:28px;font-size:12.5px}
.bo-chip:hover{border-color:var(--bo-farve)}
.bo-chip.valgt{border-color:var(--bo-farve);color:var(--blaek,#172A2D);
  background:#fff;box-shadow:0 0 0 1px var(--bo-farve)}
.bo-chip:focus-visible{outline:2px solid var(--bo-farve);outline-offset:2px}

/* panel-skift ved barn- eller sektions-gentegning */
.bo-panel{transition:opacity .18s cubic-bezier(.22,1,.36,1),
  transform .18s cubic-bezier(.22,1,.36,1)}
.bo-panel.bo-skifter{opacity:0;transform:translateY(6px)}

/* ---------- sektions-fælles ---------- */
.bo-sektion{background:#fff;border:1px solid var(--linje-let,#EEF3F3);
  border-radius:18px;padding:18px 20px;margin:0 0 14px}
.bo-cap{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--svag,#5C6E70);margin-bottom:5px}
.bo-sektion h3{margin:0;font-size:16.5px;font-weight:700;
  color:var(--blaek,#172A2D);letter-spacing:-.01em}
.bo-sektion h3 .barn-navn{color:var(--bo-farve)}
.bo-forklaring{font-size:12.5px;color:var(--svag,#5C6E70);
  margin-top:5px;line-height:1.55}

/* ---------- moduler ---------- */
.bo-modul{display:flex;align-items:flex-start;gap:12px;padding:12px 0;
  border-top:1px solid var(--linje-let,#EEF3F3);
  transition:opacity .2s}
.bo-modul:first-of-type{border-top:0;margin-top:6px}
.bo-modul.fra{opacity:.5}
.bo-modul-ikon{flex:none;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;margin-top:1px;
  background:var(--linje-let,#EEF3F3);color:var(--bo-farve);
  transition:background .2s,color .2s}
.bo-modul-ikon svg{width:17px;height:17px}
.bo-modul.fra .bo-modul-ikon{color:var(--svagest,#8CA0A3)}
.bo-modul-mid{flex:1;min-width:0}
.bo-modul-mid h4{margin:0;font-size:14px;font-weight:700;
  color:var(--blaek,#172A2D)}
.bo-modul-mid p{margin:3px 0 0;font-size:12px;line-height:1.5;
  color:var(--svag,#5C6E70)}
.bo-switch{position:relative;flex:none;width:42px;height:24px;
  border-radius:999px;border:0;cursor:pointer;margin-top:3px;
  background:#D8D2C2;transition:background .25s}
.bo-switch::after{content:"";position:absolute;top:3px;left:3px;
  width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,.25);
  transition:transform .3s cubic-bezier(.22,1,.36,1)}
.bo-switch[aria-checked="true"]{background:var(--accent,#17767E)}
.bo-switch[aria-checked="true"]::after{transform:translateX(18px)}
.bo-switch:focus-visible{outline:2px solid var(--bo-farve);outline-offset:3px}

/* ---------- husk-punkter ---------- */
.bo-dage{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 12px}
.bo-dag{border:1px solid var(--linje,#E2EAEA);background:transparent;
  color:var(--svag,#5C6E70);font:inherit;font-size:12.5px;font-weight:600;
  border-radius:999px;padding:6px 12px;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s}
.bo-dag:hover{border-color:var(--accent,#17767E);color:var(--accent,#17767E)}
.bo-dag.valgt{background:var(--bo-farve);border-color:var(--bo-farve);
  color:#fff}
.bo-dag .antal{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:10px;margin-left:5px;opacity:.75}
.bo-dag:focus-visible{outline:2px solid var(--bo-farve);outline-offset:2px}
.bo-husk-liste{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:8px}
.bo-husk{display:flex;align-items:center;gap:11px;
  background:var(--linje-let,#EEF3F3);border:1px solid var(--linje,#E2EAEA);
  border-radius:11px;padding:9px 13px;font-size:14px;
  color:var(--blaek,#172A2D);animation:boPunktInd .3s cubic-bezier(.22,1,.36,1)}
@keyframes boPunktInd{from{opacity:0;transform:translateY(6px)}}
.bo-husk .prik{width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--bo-farve)}
.bo-husk .tekst{flex:1;min-width:0}
.bo-husk-fjern{flex:none;width:24px;height:24px;border-radius:8px;border:0;
  background:transparent;color:var(--svagest,#8CA0A3);cursor:pointer;
  display:grid;place-items:center;transition:background .2s,color .2s}
.bo-husk-fjern:hover{background:rgba(168,52,31,.12);color:#A8341F}
.bo-husk-fjern svg{width:11px;height:11px}
.bo-husk-tom{font-size:13px;color:var(--svag,#5C6E70);padding:10px 2px}
.bo-husk-form{display:flex;gap:9px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--linje-let,#EEF3F3)}
.bo-husk-form input{flex:1;font:inherit;font-size:13.5px;
  color:var(--blaek,#172A2D);background:transparent;border:0;
  border-bottom:1px solid var(--linje,#E2EAEA);padding:8px 2px;outline:none;
  margin-bottom:0;transition:border-color .2s}
.bo-husk-form input:focus{border-color:var(--bo-farve)}
.bo-husk-form input::placeholder{color:var(--svagest,#8CA0A3)}
.bo-plus{flex:none;width:36px;height:36px;border-radius:11px;
  border:1px solid var(--linje,#E2EAEA);background:transparent;
  color:var(--accent,#17767E);cursor:pointer;display:grid;place-items:center;
  transition:background .2s,border-color .2s,color .2s}
.bo-plus:hover{background:var(--accent,#17767E);
  border-color:var(--accent,#17767E);color:#fff}
.bo-plus svg{width:14px;height:14px}

/* ---------- note til i morgen ---------- */
.bo-note-form{margin-top:12px}
.bo-note-form textarea{display:block;width:100%;box-sizing:border-box;
  font:inherit;font-size:13.5px;line-height:1.55;
  color:var(--blaek,#172A2D);background:var(--linje-let,#EEF3F3);
  border:1px solid var(--linje,#E2EAEA);border-radius:11px;
  padding:10px 12px;outline:none;resize:vertical;min-height:64px;
  transition:border-color .2s}
.bo-note-form textarea:focus{border-color:var(--bo-farve)}
.bo-note-form .bo-gem{margin-top:10px}
.bo-gem{font:inherit;font-size:13px;font-weight:600;border:0;
  border-radius:11px;cursor:pointer;padding:10px 16px;
  background:var(--dyb,#0E2E33);color:#fff;display:inline-flex;
  align-items:center;gap:8px;transition:background .2s,transform .1s}
.bo-gem:hover{background:var(--dybere,#0A2327)}
.bo-gem:active{transform:scale(.985)}
.bo-gem:focus-visible{outline:2px solid var(--bo-farve);outline-offset:3px}

/* ---------- adgang ---------- */
.bo-link-boks{display:flex;align-items:center;gap:12px;
  background:var(--dyb,#0E2E33);border-radius:13px;padding:14px 16px;
  color:#fff;margin-top:14px}
.bo-link-boks .laas{flex:none;color:var(--bo-guld)}
.bo-link-boks .laas svg{width:16px;height:16px}
.bo-link-boks .adresse{flex:1;min-width:0;
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:13.5px;
  letter-spacing:.4px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.bo-link-boks .adresse b{color:var(--bo-guld);font-weight:500}
.bo-link-slukket{display:flex;align-items:center;gap:11px;margin-top:14px;
  border:1px dashed var(--linje,#E2EAEA);border-radius:13px;
  padding:14px 16px;font-size:13px;color:var(--svag,#5C6E70);
  line-height:1.55}
.bo-adgang-knapper{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap;
  align-items:center}
.bo-spokelse{background:transparent;color:var(--accent,#17767E);
  border:1.5px solid var(--accent,#17767E)}
.bo-spokelse:hover{background:var(--accent,#17767E);color:#fff}
.bo-kopi-ok{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:11px;color:var(--accent,#17767E);opacity:0;
  transition:opacity .2s}
.bo-kopi-ok.vis{opacity:1}
.bo-link-advarsel{margin-top:14px;background:rgba(201,162,75,.10);
  border:1px solid rgba(201,162,75,.45);border-radius:11px;
  padding:13px 15px;font-size:13px;color:var(--blaek,#172A2D);
  line-height:1.55;animation:boPunktInd .3s cubic-bezier(.22,1,.36,1)}
.bo-link-advarsel .handlinger{display:flex;gap:9px;margin-top:11px}
.bo-link-klar{margin-top:12px;font-size:13px;color:var(--accent,#17767E);
  display:flex;align-items:center;gap:8px;
  animation:boPunktInd .3s cubic-bezier(.22,1,.36,1)}
.bo-link-klar svg{width:14px;height:14px;flex:none}

/* ---------- deling: qr-boks, hjælpelinje og stille vej ---------- */
.bo-qr-boks{margin-top:12px;background:#F8F3E7;
  border:1px solid var(--linje,#E2EAEA);border-radius:13px;
  padding:18px 16px 14px;text-align:center;
  animation:boPunktInd .3s cubic-bezier(.22,1,.36,1)}
.bo-qr-svg{display:flex;justify-content:center}
.bo-qr-svg svg{display:block;width:216px;height:auto;max-width:100%}
.bo-qr-forklaring{margin:12px 0 0;font-size:12.5px;line-height:1.55;
  color:var(--svag,#5C6E70)}
.bo-qr-fejl,.bo-qr-venter{margin:0;padding:14px 0 4px;font-size:13px;
  line-height:1.55;color:var(--svag,#5C6E70)}
.bo-hjaelp{margin:12px 0 0;font-size:12.5px;line-height:1.55;
  color:var(--svag,#5C6E70)}
.bo-stille{display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  padding:8px 2px;border:0;background:transparent;font:inherit;
  font-size:13px;font-weight:600;color:var(--accent,#17767E);
  cursor:pointer;transition:color .2s}
.bo-stille:hover{color:var(--dyb,#0E2E33)}
.bo-stille:focus-visible{outline:2px solid var(--bo-farve);
  outline-offset:3px;border-radius:6px}
/* "Lav nyt link" og "Slå fra" er linkets vedligehold — adskilt stille
   fra de tre delingsveje, så trykket aldrig rammer forkert. */
.bo-adgang-admin{margin-top:8px;padding-top:12px;
  border-top:1px solid var(--linje-let,#EEF3F3)}

/* ---------- rolige timer ---------- */
.bo-sove-række{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;
  margin-top:14px}
.bo-sove-felt{display:flex;flex-direction:column;gap:5px}
.bo-sove-felt label{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--svag,#5C6E70)}
.bo-sove-felt input{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:14px;color:var(--blaek,#172A2D);
  background:var(--linje-let,#EEF3F3);border:1px solid var(--linje,#E2EAEA);
  border-radius:11px;padding:9px 11px;outline:none;cursor:pointer;
  transition:border-color .2s}
.bo-sove-felt input:focus{border-color:var(--bo-farve)}

/* ---------- sådan kommer barnet ind ---------- */
.bo-trin{list-style:none;margin:12px 0 0;padding:0;display:flex;
  flex-direction:column;gap:11px;counter-reset:botrin}
.bo-trin li{display:flex;gap:12px;font-size:13.5px;line-height:1.55;
  color:var(--daemp,#52686B);counter-increment:botrin}
.bo-trin li::before{content:counter(botrin);flex:none;width:24px;height:24px;
  border-radius:50%;background:var(--linje-let,#EEF3F3);
  border:1px solid var(--linje,#E2EAEA);color:var(--dyb,#0E2E33);
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:11px;
  font-weight:700;display:grid;place-items:center;margin-top:1px}
.bo-trin b{color:var(--blaek,#172A2D);font-weight:600}

/* ---------- rolighed først ---------- */
@media (prefers-reduced-motion:reduce){
  #bo-ark .bo-ark-kort,#bo-ark .bo-sloer,#bo-ark.lukker .bo-ark-kort,
  #bo-ark.lukker .bo-sloer,.bo-note,.bo-husk,.bo-link-advarsel,
  .bo-link-klar,.bo-qr-boks{animation:none}
  .bo-switch,.bo-switch::after,.bo-vk,.bo-chip,.bo-dag,.bo-husk-fjern,
  .bo-plus,.bo-gem,.bo-panel,.bo-kopi-ok,.bo-stille{transition-duration:.01s}
}
@media (max-width:420px){
  .bo-ark-indhold{padding:10px 14px 0}
  .bo-sektion{padding:15px 16px}
  .bo-adgang-knapper .bo-gem,.bo-adgang-knapper .bo-spokelse{width:100%;
    justify-content:center}
  .bo-kopi-ok{width:100%}
  .bo-stille{width:100%;justify-content:center;padding:12px 2px}
  .bo-qr-svg svg{width:200px}
}