/* VEJLEDNINGSLAGET. Se public/guide.js for hvorfor det kunne bygges nu og ikke foer.
 *
 * ── HVORFOR EN LILLE KNAP OG IKKE EN TUR ────────────────────────────────────────────────────
 *
 * En rundtur kraever at man laeser FOER man har et spoergsmaal, og det er den forkerte
 * raekkefoelge — folk laeser foerst en forklaring naar de er i tvivl. Derfor et "?" der sidder
 * stille i hjoernet og aabner paa klik.
 *
 * Den tager ÉN gang opmaerksomhed pr. sted: en lille prik indtil stedet er set. Ingen pulsering,
 * ingen badge med tal, ingen tur der tager skaermen. Huset siger *afdaempet frem for kraftigt*,
 * og tydelige ringe og labels er blevet afvist som grimt her foer.
 */

/* ── HVOR DEN SIDDER, OG HVORFOR IKKE HELT UDE I HJOERNET ────────────────────────────────────
 *
 * Den stod paa `left: 18px` indtil 21. august 2026, altsaa OVEN PAA sidebaren: skinnen er 86px
 * bred og har kontoen — firmanavn, plan, menu — nederst i praecis det hjoerne. Et "?" der ligger
 * oven paa den knap man trykker paa hver gang man skifter brand, er ikke afdaempet, det er i
 * vejen. Philip: "? i hjoerne skal flyttes".
 *
 * Den bliver i BUNDEN til venstre — det er dér man leder efter hjaelp, og hoejre hjoerne er
 * optaget af koerslerne (.gtask). Den flytter bare ind i indholdet, fri af skinnen.
 *
 * --guide-venstre er skinnens bredde + samme luft som resten af laget. Staar som variabel fordi
 * BAADE knappen og boblen skal flytte sig sammen; to tal ville drive fra hinanden.
 */
.guide-knap {
  --guide-venstre: 104px;   /* 86px skinne + 18px luft */
  position: fixed; left: var(--guide-venstre); bottom: 18px; z-index: 200;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--cream); color: var(--muted);
  font: 700 15px/1 'Nunito Sans', system-ui, sans-serif; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--gloed-1);
  transition: color .15s, border-color .15s, transform .15s;
}
.guide-knap[hidden] { display: none; }
.guide-knap:hover { color: var(--ink); border-color: var(--maerke); transform: translateY(-1px); }
/* Prikken forsvinder naar stedet er set. Den er lagets ENESTE opmaerksomhed, og den tages
   én gang pr. sted — ikke én gang pr. besoeg. */
.guide-knap.ny::after {
  content: ''; position: absolute; top: -1px; right: -1px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--maerke); border: 2px solid var(--cream);
}

.guide-boble {
  position: fixed; left: 104px; bottom: 60px; z-index: 201;
  width: min(340px, calc(100vw - 36px));
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--r-kort); padding: 18px 20px 20px;
  box-shadow: var(--gloed-2);
  font: 400 14px/1.55 'Nunito Sans', system-ui, sans-serif; color: var(--ink-2);
  animation: guideind .18s ease-out;
}
.guide-boble[hidden] { display: none; }

/* SKINNEN GLIDER UD PAA HOVER (248px, se dashboard.html). Sker det, ligger knappen inde over
   sidebaren igen — bare 18px laengere inde. Derfor traeder laget af mens den er ude: det er den
   samme bevaegelse som sidebaren selv laver, og den har ingen anden betydning end "ikke nu".
   `:has()` frem for en klasse i JS: udfoldningen ER en hover-tilstand i CSS, og et flag sat fra
   JS ville kunne komme ud af trit med den. Boblen lukker sig ikke — den bliver staaende, saa en
   forklaring man er ved at laese ikke forsvinder fordi musen strejfede menuen. */
body:has(.side:hover, .side:focus-within) .guide-knap {
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
@keyframes guideind { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.guide-boble h4 {
  font: 600 15.5px/1.3 'Poppins', system-ui, sans-serif; color: var(--ink);
  margin: 0 0 8px; padding-right: 22px;
}
.guide-boble p { margin: 0 0 10px; }
.guide-boble p:last-child { margin-bottom: 0; }
/* "Pas paa" er den ene linje der er vaerd at laese to gange. Den skal kunne SES uden at vaere
   en advarselstrekant — det er ikke en fejl, det er en ting man kan komme til. */
.guide-boble .guide-pas {
  margin-top: 12px; padding: 11px 13px;
  background: var(--status-obs-svag); border-radius: var(--r-knap);
  color: var(--ink-2); font-size: 13.5px;
}
.guide-boble .guide-pas b { color: var(--status-obs); }
.guide-luk {
  position: absolute; top: 12px; right: 12px;
  width: 22px; height: 22px; border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: 13px; line-height: 1; border-radius: var(--r-lille);
}
.guide-luk:hover { color: var(--ink); background: var(--felt-dyb); }

@media (prefers-reduced-motion: reduce) { .guide-boble { animation: none; } }