/* demo-heim.css — vegen tilbake til sporlaus.no, inne i ein demo.
 *
 * ── KVIFOR FILA FINST ─────────────────────────────────────────────────────
 * Ein testar fann 01.10 at det ikkje er nokon synleg veg tilbake til
 * sporlaus.no inne i språkdemoen. Den einaste heimlenkja låg i `<noscript>` —
 * altså i skalet mitt — og ein gjest med javascript ser henne aldri.
 * `/paakledning/` har ein eigen; `/fargelegging/` og `/sprak/` hadde ingen.
 *
 * Det er ikkje berre ein navigasjonsdetalj. Ein som trykkjer «Prøv demoen» og
 * ikkje finn vegen vidare, kjem aldri til kjøpssida.
 *
 * ── KVIFOR EI EIGA FIL ────────────────────────────────────────────────────
 * Demoane er andre økter sine appar, og dei lastar ikkje stilfilene våre. Eg
 * kan heller ikkje leggje inn stil med `style=""` eller eit `<style>`-element:
 * `style-src 'self'` stoppar begge. Ei FIL frå vår eigen vert er lovleg, og ho
 * rører ingenting i appen.
 *
 * Fargane står som tal, ikkje som `var(--sp-…)`: demoen har ikkje paletten vår.
 * Dei er henta frå `sporlaus.css` (huben sine): botn #f4eee3, kort #ece2d2,
 * kant #cdbfa9, tekst #2b2320. Mørk: #201b18 / #2b2320 / #4b3e37 / #f4eee3.
 *
 * ── KVAR HO LIGG, OG KVIFOR DET ER MALT OG IKKJE GJETTA ───────────────────
 * Her stod det til 02.10: «Nedst til venstre er den eine kroken som er ledig i
 * alle tre.» Eg skreiv det. Eg hadde ikkje malt det. Det var ein hypotese
 * skriven som ei maaling, og han var feil i to av tre demoar - LIVE sidan
 * slepp R:
 *
 *   sporlaus.no/sprak/  393 px   lenkja laag over `#category-grammar`
 *   sporlaus.no/sprak/  820 px   over `#category-listen-repeat`
 *   /ludo/              393 px   over 68 x 40 px av «Start spelet» (dommaren)
 *
 * Ein som ville trykkje paa oevingskategorien, vart sendt UT av appen.
 *
 * Maalinga etterpaa, WebKit, tre demoar, tre skjermar, lenkja sitt fotavtrykk
 * i kvart hjoerne:
 *
 *   /sprak/ telefon    INGEN hjoerne ledig (kategorikort nede, logo og to
 *                      knappar oppe)
 *   /ludo/             nede-hogre ledig, oppe-venstre ledig, oppe-hogre ledig
 *   /fargelegging/     det same
 *
 * Difor: plassen er ein KLASSE, vald per demo i `lag-demoskal.py`. Eit fast
 * overlegg i ein annan oekt sin app vil ALLTID risikere aa dekkje noko, so der
 * ingen krok er ledig, ligg lenkja i flyten i staden.
 *
 * Og det som faktisk hindrar at dette skjer igjen, er ikkje denne kommentaren:
 * det er D14 i `kontroll-framside.mjs`, som maaler at lenkja ikkje deler eit
 * einaste punkt med noko trykkbart.
 *
 * Lenkja er liten og roleg med vilje: ho skal finnast naar nokon leitar, ikkje
 * konkurrere med appen.
 */

.sporlaus-heim {
  /* 500, ikkje 2 147 483 000. Dommaren i runde 3 fann at pilla laag over
     Foreldre-teksten i Fargelegging paa telefon - 89 av 335 px linebreidd, to
     liner om gongen heile vegen ned - og at ingen saag det av di testaren las
     `window.scrollY`, som staar paa 0 naar overlegget rullar INNE I SEG SJOELV.

     Paa 375 px fyller tekstkolonna breidda, so eit fast overlegg vil daekkje
     henne kvar det enn ligg. Eg kan ikkje plassere meg ut av det. Men problemet
     er eit PANEL, og da finst ei tredje utgang: lat panelet daekkje LENKJA i
     staden for omvendt. Aa vere gjoeymd medan eit panel er ope er betre enn aa
     liggje over teksten i det - panelet har si eiga lukking.

     Malt i appen: hans eigne lag gaar til 1000 (demo-laas.css), vanleg innhald
     til 20 (stil.css). 500 ligg over innhaldet og under panela. */
  z-index: 10;
  /* 10, og det tok TO forsoek. Fyrst sette eg 500, av di eg las «1000» i
     `demo-laas.css` og slutta at panela laag der. Dei gjer ikkje:

       side/fargelegging/stil.css 369-386
       .laas, .foreldre { position: fixed; ... z-index: 20; }

     500 er over 20, so pilla vann framleis, og testaren malte at ho framleis
     laag over Foreldre-teksten - 8 til 10 teikn, djupast 26 px.

     Eg malte NOKO (hoegste z-index i appen sin CSS) og bruka det som svar paa
     eit ANNA spoersmaal (kva lag har NETT dette panelet). Same feilen eg har
     jakta paa heile veka.

     Testaren malte utgangen: z = 10 gjev `overst = false`, 0 av 9 punkt naar
     panelet er ope, og med panelet lukka er pilla oeverst 9 av 9 og trykket
     landar paa sporlaus.no. 10 og ikkje 19, av di begge panela ligg paa 20 og
     10 gjev luft om nokon legg eit lag paa 15 seinare. */

  display: inline-flex;
  align-items: center;
  /* 44 px er kravet til ei trykkflate; her er det eit golv og ikkje ei høgd,
     so lenkja ikkje blir stor på ein liten skjerm. */
  min-height: 44px;
  padding: 0 14px;

  font-family: "DM Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;

  color: #2b2320;
  background: #ece2d2;
  border: 1px solid #cdbfa9;
  border-radius: 999px;
  /* Ein roleg skugge, so lenkja les som noko som ligg OPPÅ appen og ikkje som
     ein knapp appen sjølv har. */
  box-shadow: 0 1px 4px rgba(28, 26, 25, 0.18);
  opacity: 0.92;
}

.sporlaus-heim:hover,
.sporlaus-heim:focus-visible {
  opacity: 1;
  background: #f4eee3;
}

.sporlaus-heim:focus-visible {
  outline: 2px solid #d5683a;
  outline-offset: 2px;
}

/* Mørk palett. Demoane har ikkje `data-theme` frå oss, so her må systemet
   spørjast — det er den eine staden det er RETT, av di lenkja ikkje har noko
   anna å gå etter. Språkdemoen set sjølv `data-theme` på <html>, og han blir
   teken fyrst. */
:root[data-theme="moon"] .sporlaus-heim,
:root[data-theme="dark"] .sporlaus-heim {
  color: #f4eee3;
  background: #2b2320;
  border-color: #4b3e37;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="sun"]):not([data-theme="light"]) .sporlaus-heim {
    color: #f4eee3;
    background: #2b2320;
    border-color: #4b3e37;
  }
}

@media print {
  .sporlaus-heim { display: none; }
}

/* ── PLASSERINGANE ────────────────────────────────────────────────────────
 * Éi klasse per malt plass. `lag-demoskal.py` vel kva kvar demo faar, og
 * kommentaren der ber maalinga.
 */

/* Nede til hoegre: malt ledig i /ludo/ og /fargelegging/ paa 393, 820 og
   1180 px, baade i reglarskjermen og under spelet. */
.sporlaus-heim--nede-hogre {
  position: fixed;
  right: 10px;
  bottom: 10px;
}

/* Oppe til venstre: malt ledig i /ludo/ paa alle tre skjermane. Ludo har
   `Innstillingar` oppe til hoegre og brettet i midten; oppe til venstre staar
   turlina, som er tekst og ikkje noko ein trykkjer paa. */
.sporlaus-heim--oppe-venstre {
  position: fixed;
  left: 10px;
  top: 10px;
}

/* I FLYTEN, for ein app der ingen krok er ledig. Lenkja kan da ikkje dekkje
   noko i det heile - ho staar etter innhaldet og blir med i rullinga.
   `margin: 24px auto` so ho ikkje klistrar seg til siste element, og
   `display: flex` arvar frao grunnforma. */
.sporlaus-heim--flyt {
  position: static;
  margin: 24px auto 20px;
  /* Midtstilt, av di ho ikkje lenger har eit hjoerne aa hoere til. */
  justify-content: center;
}

/* Og ein ting som maa staa her: ein app som gjev `body` ei fast hoegd med
   `overflow: hidden` vil KLIPPE ei lenkje i flyten. Det er ikkje noko CSS kan
   rette, og D14 maaler det: er lenkja ikkje synleg, er porten raud. */