/* ---- BOOKHONEST-KALENDEREN (2/9-2026): ÉN KALENDER PÅ HELE SITET ----
   Founder-dom: "the calendar is fucked on phone and one desktop, and it doesn't match".
   Målt 2/9-2026 var der FIRE forskellige kalendere i drift:
     site/index.html     mørkt glaspanel, runde hårstregs-pile der lå OVEN PÅ ugedagene
     site/da/index.html  gammelt papirpanel med kantede pile, og UDEN placer(): panelets
                         bund lå 98 px under skærmkanten på 1440x900, så de sidste to uger
                         og Færdig-knappen slet ikke kunne nås. Datoer efter den 20. i
                         måneden var ubookbare på den danske forside.
     site/ask.html       tredje tegning: kantede pile øverst til højre, dagene var <div>
                         (ikke tastaturbetjenbare), og valglinjen lå på telefonen BAG den
                         faste handlingsbjælke, så gæsten fik ingen kvittering overhovedet
     site/results.html   browserens egen <input type=date>, altså slet ingen af delene
   Fire kopier driver fra hinanden, og det var præcis dét der skete. Herefter findes
   tegningen ét sted: her og i kalender.js.

   To temaer, samme geometri:
     data-theme="paper"  papirsider (ask, results, forsiden på telefon)
     data-theme="glass"  mørkt glas oven på heroens film (forsiden på PC)

   To layouts, samme komponent:
     PC (>760px)    to måneder side om side, pile i deres EGNE grydeskafter i hjørnerne
     Telefon        én lodret rulle med 12 måneder, ingen pile. Et ophold hen over et
                    månedsskifte kan vælges uden at bladre, og den valgte ankomst bliver
                    ved med at være synlig. */

.bhk{
  --bhk-gap:30px;              /* luft mellem de to måneder */
  --bhk-cell:2px;              /* luft mellem dagene */
  --bhk-ink:#2B2620;
  --bhk-ink-mut:#9A9285;
  --bhk-ink-off:#C9C2B6;       /* optagne fortidsdage: dæmpede, men stadig læsbare */
  /* BAANDETS FARVER ER DAEKKENDE, ALDRIG GENNEMSIGTIGE (3/9-2026). Baandet tegnes af
     hver dag for sig og bloeder ud i mellemrummet til naboen, saa de to naboer
     OVERLAPPER hinanden i mellemrummet. Med en gennemsigtig farve bliver overlappet
     dobbelt saa taet, og hver celle faar en synlig lodret soem: founder-dom paa
     glasset, "pixelly and cheap". Farverne herunder er derfor blandet paa forhaand
     mod den flade de ligger paa (papiret, hhv. arkets glas #0B0F17), saa to lag af
     samme farve er usynlige, og baandet laeses som ÉN sammenhaengende pille. */
  --bhk-band:#F1EDE3;          /* det valgte spaend mellem ankomst og afrejse */
  --bhk-pv:#F7F4EE;            /* forhaandsvisningen mens musen soeger afrejsen: lettere end det valgte */
  --bhk-hover:#EBE6DA;         /* SKAL kunne skelnes fra båndet, ellers ligner et strejf et valg */
  --bhk-hover-ring:rgba(43,38,32,0.30);   /* ringen goer strejfet til en cirkel, ikke en klods i baandet */
  --bhk-sel-bg:#2B2620;
  --bhk-sel-fg:#FAF8F4;
  --bhk-hair:rgba(43,38,32,0.12);
  --bhk-focus:#1D4ED8;
  position:relative;
  font-family:Inter,-apple-system,sans-serif;
  color:var(--bhk-ink);
}
/* Glasset: samme flade som søgebjælken kalenderen hænger under, så bjælken og
   kalenderen læses som ét objekt. Ombyttet blæk: papir bliver til lys på mørkt. */
.bhk[data-theme="glass"]{
  --bhk-ink:#fff;
  --bhk-ink-mut:rgba(255,255,255,0.5);
  --bhk-ink-off:rgba(255,255,255,0.28);
  /* Hvid over #0B0F17: 12 % til baandet, 7 % til forhaandsvisningen, blandet paa
     forhaand (se noten ved papirfarverne). Hover er 10 % med en hvid ring. */
  --bhk-band:#282C33;
  --bhk-pv:#1C2027;
  --bhk-hover:#232730;
  --bhk-hover-ring:rgba(255,255,255,0.42);
  --bhk-sel-bg:#fff;
  --bhk-sel-fg:#12161F;
  --bhk-hair:rgba(255,255,255,0.16);
  --bhk-focus:#fff;
}

/* ---- PILENE ----
   Den gamle forside lagde pilerækken oven på månedstitlerne med margin-bottom:-40px.
   Målt 2/9-2026 rakte de 40 px høje cirkler NED i ugedagsrækken: "Mo" og "Su" stod bag
   pilene på både 390 px og 1440 px. Pilene ligger nu absolut i panelets to øverste
   hjørner, og månedstitlen er 40 px høj, så de deler linje uden at røre hinanden.
   Titlen står midt i sin egen månedsspalte og når aldrig ud til hjørnet. */
.bhk-arrow{
  position:absolute;top:0;z-index:2;
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--bhk-hair);background:none;
  font-size:16px;line-height:1;color:var(--bhk-ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s;
}
.bhk-prev{left:0}
.bhk-next{right:0}
.bhk-arrow:hover{background:var(--bhk-hover);border-color:var(--bhk-ink)}
.bhk-arrow:disabled{border-color:var(--bhk-hair);color:var(--bhk-ink-off);cursor:default;background:none}
.bhk-arrow:focus-visible{outline:2px solid var(--bhk-focus);outline-offset:2px}

/* ---- MÅNEDERNE ---- */
.bhk-scroll{overscroll-behavior:contain}
.bhk-grid{display:grid;grid-template-columns:repeat(var(--bhk-months,2),1fr);gap:var(--bhk-gap)}
/* Hårstregen mellem de to måneder: samme streg som panelets kant. */
.bhk-m+.bhk-m{border-left:1px solid var(--bhk-hair);padding-left:var(--bhk-gap);margin-left:calc(var(--bhk-gap) / -2)}
/* Månedsnavnet i samme snit som datoerne oppe i bjælken, så øjet ser ét sprog fra
   felt til kalender. 40 px høj: samme linje som pilene. */
.bhk-mt{
  font-family:Newsreader,serif;font-weight:500;font-size:19px;
  text-align:center;color:var(--bhk-ink);
  min-height:40px;display:flex;align-items:center;justify-content:center;
  margin:0 0 6px;
}
/* Yderste måneder deler linje med en pil: titlen holder sig inde bag den (40 px pil +
   4 px luft), også når der kun er én måned og begge pile står på samme titel. */
.bhk-m:first-child .bhk-mt{padding-left:44px}
.bhk-m:last-child .bhk-mt{padding-right:44px}
.bhk-wd{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--bhk-cell)}
.bhk-wd span{
  font-size:9px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--bhk-ink-mut);text-align:center;padding-bottom:6px;
}
.bhk-days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--bhk-cell)}

/* ---- DAGENE ----
   <button>, aldrig <div>: ask.html tegnede dagene som <div> og var derfor helt lukket
   for tastatur og skærmlæser. Tallet bor i et <span> ovenpå, så båndet kan ligge under
   det og løbe UD i mellemrummet mellem cellerne. */
.bhk-d{
  /* aspect-ratio + min-height ville laase BREDDEN: en 36 px hoej celle er ogsaa 36 px
     bred, og syv af dem sprang ud af resultatsidens 237 px smalle ledger-spalte (maalt
     2/9-2026: 264 px indhold i 237 px kasse). Cellen faar sin bredde af spalten og sin
     hoejde af bredden. Tommelfinger-maalet paa 44 px staettes i telefon-reglen nederst,
     hvor der ER bredde nok til det. */
  position:relative;aspect-ratio:1;min-width:0;
  border:0;background:none;padding:0;margin:0;
  font-family:Inter,sans-serif;font-size:14px;color:var(--bhk-ink);
  cursor:pointer;user-select:none;
}
/* Knuden er en CIRKEL, uanset cellens form. Bredden foelger hoejden: i den kompakte
   kalender (bhk-lav) er cellen 40x26, og width:100% gjorde ankomst og afrejse til
   to liggende piller, mens baandet delte sig ved cellens midte og ikke ved pillens. */
.bhk-d .n{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  height:100%;aspect-ratio:1;width:auto;margin:0 auto;border-radius:50%;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
/* Optagne dage: daempet tal, ingen flade, intet baand, ingen hover. Samme tegning
   overalt, saa en graa cirkel aldrig kan forveksles med et valg. */
.bhk-d:disabled{color:var(--bhk-ink-off);cursor:default}
.bhk-d:disabled .n{background:none;box-shadow:none}
.bhk-d:disabled::before{display:none}
/* Kun ægte pegeredskaber får hover. På en telefon bliver hover ellers HÆNGENDE på den
   sidst berørte dag og ligner et valg gæsten aldrig har truffet. Ringen adskiller
   strejfet fra baandet: baandet er en flade, strejfet er en cirkel med kant. */
@media(hover:hover){
  .bhk-d:not(:disabled):hover .n{background:var(--bhk-hover);box-shadow:inset 0 0 0 1px var(--bhk-hover-ring)}
  .bhk-d:not(:disabled).bhk-a:hover .n,.bhk-d:not(:disabled).bhk-b:hover .n{background:var(--bhk-sel-bg);box-shadow:none}
}
.bhk-d:focus-visible{outline:none}
.bhk-d:focus-visible .n{outline:2px solid var(--bhk-focus);outline-offset:-2px}

/* Båndet: ét sammenhængende bånd, ikke løsrevne klodser. Det bleeder ud i begge sider,
   så cellernes mellemrum ikke klipper det i stykker, og det ender i en rund kappe ved
   ugens kanter og ved ankomst/afrejse. */
.bhk-d::before{
  content:'';position:absolute;z-index:0;
  top:0;bottom:0;left:calc(var(--bhk-cell) * -1);right:calc(var(--bhk-cell) * -1);
  background:var(--bhk-band);opacity:0;
}
/* .bhk-in = ægte valgt spænd, .bhk-pv = forhåndsvisning mens musen søger afrejsen.
   Forhåndsvisningen har med vilje INGEN animation: den ville blinke ved hver mus-bevægelse. */
.bhk-d.bhk-in::before{opacity:1;animation:bhkin .35s ease backwards;animation-delay:calc(var(--ri,0) * 14ms)}
.bhk-d.bhk-pv::before{opacity:1;background:var(--bhk-pv)}
/* Under forhaandsvisningen (bhk-pvon saettes af kalender.js) er ogsaa de to halve
   baand ved ankomst og den soegte afrejse lette, saa hele snoren har ÉN farve. */
.bhk-pvon .bhk-d.bhk-a::before,.bhk-pvon .bhk-d.bhk-b::before{background:var(--bhk-pv)}
@keyframes bhkin{from{opacity:0}}
/* Ankomsten holder båndet mod HØJRE, afrejsen mod VENSTRE, så de to runde endeknopper
   sidder som knuder i hver sin ende af én snor. Kun når der ER et spænd: står ankomsten
   alene, skal der ikke stikke en halv snor ud i det tomme. */
.bhk-rng .bhk-d.bhk-a::before{opacity:1;left:50%;right:calc(var(--bhk-cell) * -1);border-radius:99px 0 0 99px}
.bhk-rng .bhk-d.bhk-b::before{opacity:1;left:calc(var(--bhk-cell) * -1);right:50%;border-radius:0 99px 99px 0}
.bhk .bhk-d.bhk-a.bhk-b::before{opacity:0}
/* Ugens kanter: båndet må ikke løbe ud over rækken. */
.bhk-days>*:nth-child(7n+1)::before{left:0;border-radius:99px 0 0 99px}
.bhk-days>*:nth-child(7n)::before{right:0;border-radius:0 99px 99px 0}
.bhk-rng .bhk-days>*:nth-child(7n+1).bhk-a::before{left:50%}
.bhk-rng .bhk-days>*:nth-child(7n).bhk-b::before{right:50%}
/* Ankomst sidst i ugen / afrejse foerst i ugen: knoppen staar alene, snoren fortsaetter
   paa naeste raekke. En stump baand ud i det tomme ville pege paa ingenting. */
.bhk-rng .bhk-days>*:nth-child(7n).bhk-a::before{opacity:0}
.bhk-rng .bhk-days>*:nth-child(7n+1).bhk-b::before{opacity:0}
/* De to valgte dage er ombyttet blæk: den stærkeste kontrast panelet har. */
.bhk-d.bhk-a .n,.bhk-d.bhk-b .n{background:var(--bhk-sel-bg);color:var(--bhk-sel-fg);font-weight:600}
/* ---- BUNDLINJEN ----
   Kvitteringen. På telefonen lå den før BAG den faste handlingsbjælke på /ask, så
   gæsten valgte datoer uden at få et eneste ord tilbage. Den er nu en del af selve
   kalenderen og kan derfor ikke blive væk bag noget andet. */
.bhk-foot{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--bhk-hair);
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
}
/* Kvitteringen er én linje. Er der ikke plads til både den og knapperne, går knapperne
   ned på næste linje, i stedet for at "3 nætter" knækker midt i sætningen. */
.bhk-sum{font-family:Newsreader,serif;font-size:16px;color:var(--bhk-ink);flex:1 1 auto;min-width:0;white-space:nowrap}
.bhk-acts{display:flex;align-items:center;gap:18px;flex:none}
.bhk-clear,.bhk-done{
  background:none;border:0;padding:8px 2px;min-height:44px;cursor:pointer;
  font-family:Inter,sans-serif;font-size:13.5px;color:var(--bhk-ink);
}
.bhk-clear{color:var(--bhk-ink-mut);text-decoration:underline;text-underline-offset:4px}
.bhk-clear:hover{color:var(--bhk-ink)}
.bhk-done{font-weight:600;text-decoration:underline;text-underline-offset:4px}
.bhk-clear:focus-visible,.bhk-done:focus-visible{outline:2px solid var(--bhk-focus);outline-offset:2px;border-radius:2px}
.bhk-clear[hidden]{display:none}

.bhk-slide-l{animation:bhksl .24s ease}
.bhk-slide-r{animation:bhksr .24s ease}
@keyframes bhksl{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes bhksr{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .bhk-slide-l,.bhk-slide-r,.bhk-d.bhk-in::before{animation:none}
}

/* ---- KOMPAKT (bhk-lav) ----
   Sat af siden naar der hverken er plads over eller under bjaelken (forsidens placer()).
   Samme kalender, lavere celler: 5 uger + kvittering paa ca. 250 px i stedet for 340. */
.bhk-lav .bhk-arrow{width:30px;height:30px;font-size:14px}
.bhk-lav .bhk-mt{min-height:30px;font-size:17px;margin-bottom:0}
.bhk-lav .bhk-wd span{padding-bottom:3px}
.bhk-lav .bhk-d{aspect-ratio:auto;height:26px;font-size:13px}
.bhk-lav .bhk-foot{margin-top:6px;padding-top:6px}
.bhk-lav .bhk-sum{font-size:15px}
.bhk-lav .bhk-clear,.bhk-lav .bhk-done{min-height:30px;padding:2px 2px}

/* ---- TELEFONEN: ÉN LODRET RULLE ----
   Den gamle kalender viste ÉN måned ad gangen og krævede bladring. Valgte gæsten
   ankomst den 28., forsvandt ankomsten ud af synet i samme øjeblik hun bladrede frem
   for at finde afrejsen. Her ruller månederne i stedet under hinanden, ugedagene bliver
   klæbende øverst, og hele opholdet kan ses på én gang. */
@media(max-width:760px){
  .bhk{--bhk-gap:0px;--bhk-cell:1px}
  .bhk-arrow{display:none}
  .bhk-grid{grid-template-columns:1fr}
  .bhk-m+.bhk-m{border-left:0;padding-left:0;margin-left:0;margin-top:14px;padding-top:14px;border-top:1px solid var(--bhk-hair)}
  .bhk-mt{font-size:18px;min-height:0;margin-bottom:10px}
  /* Ugedagene skal blive stående mens månederne ruller forbi. De er kalenderens
     nøgle: uden dem ved man ikke hvilken søjle der er lørdag. */
  .bhk-wd{position:sticky;top:0;z-index:3;background:inherit;padding-top:2px}
  /* Dagene skal kunne rammes med en tommelfinger: 44 px, og al den bredde skærmen har. */
  .bhk-d{aspect-ratio:auto;min-height:44px;font-size:15px}
  .bhk-d .n{border-radius:50%;aspect-ratio:1;width:auto;margin:0 auto}
}