/* agentdemo/intro.css — introvideoen og roboten ved chatboksen.
 *
 * Roger 17.10: 1b heile videoen, 2a over toppen i full breidd, 3b utan lyd
 * med ein knapp, 4a roboten til hoegre for chatboksen.
 *
 * ── KVIFOR `hidden` I HTML OG IKKJE `display:none` HER ────────────────────
 * Ruta staar med `hidden` i markupen og blir opna av `intro.js`. Da ser ein
 * som har JavaScript av, ALDRI ei tom svart rute han ikkje kan lukke — han
 * ser sida med ein gong, slik ho var foer. Ei rute som berre CSS skjuler,
 * ville vore synleg for han.
 */

/* `hidden` MÅ TVINGAST, ELLES VERKAR HAN IKKJE HER.
 *
 * Nettlesaren sin eigen regel `[hidden] { display: none }` taper mot KVAR
 * regel vi sjølve skriv, uansett spesifisitet — ein forfattarregel slår
 * alltid nettlesaren sin. `stil.css` har `img, svg { display: block; }`, og
 * `.intro` under har `display: flex`. Begge slo ut `hidden`:
 *
 *   - robotbiletet stod under videoen og skuva «Hopp over» ut av skjermen,
 *     so knappen ikkje var synleg frå fyrste biletet slik han skal vere;
 *   - og ruta sjølv ville vore synleg for den som har javascript AV — nett
 *     det kommentaren min sa at ho ikkje ville. Ein påstand i ein kommentar
 *     er ikkje ei måling.
 *
 * `prove-intro.mjs` fann det ved å prøve å klikke knappen: «element is
 * outside of the viewport».
 *
 * `sporlaus.css` har same regelen for `.fanerom[hidden]` — prosjektet har
 * møtt fella før, og dette er same løysinga.
 */
.intro[hidden],
.intro-film[hidden],
.intro-bilete[hidden],
.intro-knappar .knapp[hidden] { display: none !important; }

.intro {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  background: var(--papir, #f4eee3);
  /* Overgangen ut. `visibility` er med so ruta ikkje tek imot klikk medan
     ho glir bort. */
  transition: opacity 420ms ease, visibility 0s linear 420ms;
}

.intro.gaar {
  opacity: 0;
  visibility: hidden;
}

/* FULL BREIDD, men aldri hoegare enn skjermen. `object-fit: contain` so
   ingenting av biletet blir klipt bort: den falske sida til slutt har tekst,
   og eit klipp ville teke deler av henne. */
.intro-film {
  width: 100%;
  max-width: 1280px;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 14px;
  background: var(--kort-flate, #ece2d2);
}

/* STILLBILETET HAR SAME FORMA SOM VIDEOEN.
   Det ER videoen si fyrste ramme, so det skal fylle det same rommet. To
   forsoek foer dette, begge med robotbiletet i staden: `width: 100%` gav
   195 px fordi roboten berre er 180 px brei i fila, og ei fast hoegd gav
   230 px. Begge saag ut som ein feil. No er motivet og forma dei same som
   videoen sine, og da treng regelen ikkje vere noko anna enn hans. */
.intro-bilete {
  width: 100%;
  max-width: 1280px;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 14px;
  background: var(--kort-flate, #ece2d2);
}

.intro-knappar {
  display: flex;
  flex-wrap: wrap;
  /* 24 px, ikkje 12. Ein biletdommar malte 14 px mellom dei to knappane og
     kalla det tett for eit tommelmaal — og han har rett: dei er 44 px
     hoege nettopp fordi ein finger er upresis. */
  gap: 24px;
  justify-content: center;
}

/* «Hopp over» er synleg fraa fyrste biletet (avgjort fraa foer), so han
   ligg i same raden og ikkje bak ei forseinking. */
.intro-knappar .knapp {
  min-height: 44px;              /* same tommelmaal som resten av staden */
}

/* ROBOTEN STAAR TIL VENSTRE FOR CHATBOKSEN (Roger, 19.10.2026).
 *
 * «Bildet av roboten maa komme paa venstre side av chat boksen, paa mobil
 * kan boksen trekkast litt til hoegre. Teksten melding til agenten staar ein
 * linjeavstand over, om naudsynt so er roboten til venstre for teksten og».
 *
 * Tre ting i den setninga, og alle tre er maalte i `prove-intro.mjs`:
 *   1. roboten til VENSTRE for boksen — han ligg foerst i markupen;
 *   2. etiketten «Melding til agenten:» EI LINJEHOEGD over boksen;
 *   3. og roboten raagar opp forbi etiketten, so han staar til venstre for
 *      henne ogso. Det er `align-items: flex-start` som gjer det.
 *
 * ── TO PLASSERINGAR FOER DENNE, OG KVA KVAR AV DEI KOSTA ───────────────
 * 17.10, til hoegre for HEILE skjemaet:
 *   - `align-items: flex-end` sette han paa botnlina til heile skjemaet, so
 *     torsoen laag langs Send-knappen og foetene 140 px under feltet;
 *   - absolutt plassering med `padding-right: 96px` melde GROENT og var
 *     feil: porten fjernar biletet og maaler om att, men LUKA BLIR VERANDE,
 *     og feltet fall fraa 247 til 151 px paa telefon;
 *   - og da eg tok bort sjekken paa kor mykje breidd han kosta — fordi han
 *     melde raudt paa designet — vart planten `storRobot` daud.
 * 18.10, inne i <label> fire teikn til hoegre for kolonet:
 *   - eit prosenttak paa prisen gjekk raudt paa den VERKELEGE sida, fordi
 *     prisen er fast (105 px) medan raden ikkje er det (886 mot 502).
 *
 * Begge dei to kostnadene kjem att her: han tek BREIDD fraa boksen (som
 * 17.10) og ingen HOEGD (ulikt 18.10). Difor er det breiddekravet porten
 * maaler no.
 */
.skjemarad {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.skjemarad > .skjema {
  flex: 1 1 auto;
  min-width: 0;                  /* elles kan textarea skuve raden ut */
}

/* FLEX-BARNET ER <picture>, IKKJE <img>.
 *
 * Fyrste utgaava sette `flex: 0 0 auto` paa `.robot`, som er biletet INNE i
 * <picture>. Da gjaldt regelen ingenting: <picture> er det elementet raden
 * deler plass mellom, og han er `inline` utan storleik. Paa 1280 og 768 px
 * saag det rett ut, men paa 320 px klemte raden <picture> saman medan
 * biletet stod like breitt — og roboten enda 2 px INNE i skrivefeltet.
 * Porten tok det (I20 smal: «endar paa 89, boksen byrjar paa 87»).
 *
 * Det er same feilen som ein laant verdi som gjer ein annan jobb: regelen
 * saag rett ut, og han stod paa feil element. */
.skjemarad > picture {
  display: block;
  flex: 0 0 auto;
}

.robot {
  display: block;
  width: auto;
  height: 120px;
  /* 120 px er vald etter aa ha SETT paa 80, 96 og 120. Ein biletdommar las
     80 som for lite: andletet og tommelen kom fram, men klippebrettet vart
     «ein ubestemmeleg beige klump», og det er eitt av dei to tinga roboten
     held. */
}

/* ETIKETTEN EI LINJEHOEGD OVER BOKSEN (Roger 19.10).
 *
 * EG LA FYRST PAA EIN MARGIN PAA 22 PX, og porten melde 50. Grunnen er at
 * `.skjema` i `stil.css` alt er ei flex-spalte med `gap: 28px`, so margenen
 * kom I TILLEGG. Lufta skal ikkje LEGGJAST TIL — ho er der alt.
 *
 * Difor null margin her, og da staar etiketten 28 px over boksen. Hennar
 * eiga linjehoegd er 22, so det er 1,27 linjer: «ein linjeavstand» slik
 * Roger sa, og samtidig den same lufta som resten av staden brukar mellom
 * delane i eit skjema. `hub.css` sin standard paa 0.35rem (5,6 px) kom
 * oppaa og maatte vekk. */
.skjemarad .skjema label {
  margin-bottom: 0;
}

/* PAA TELEFON STAAR HAN FRAMLEIS TIL VENSTRE.
 *
 * Roger: «paa mobil kan boksen trekkast litt til hoegre» — altso skal dei
 * IKKJE stablast oppaa kvarandre, slik dei vart i utgaava fraa 17.10. Dei
 * staar i same raden, og boksen blir smalare.
 *
 * Roboten er mindre her fordi raden er det. Maalt paa 393 px: spalta er
 * 247 px, og ein robot paa 96 px hoegd er 48 px brei. Med 12 px luft blir
 * det 60 px av 247, og boksen held 187 px — tre firedelar av raden.
 *
 * 320 px er det smalaste vi maaler. Der er spalta 238 og boksen held 178. */
@media (max-width: 560px) {
  .skjemarad {
    gap: 12px;
  }
  .robot {
    /* 110 og ikkje 96. Ein biletdommar saag runde 1 og skreiv at 96 px paa
       telefon var «ein blaa flekk som ANTYDAR ein person» — han kunne ikkje
       sjaa tommelen i det heile. Han kostar 55 px av spalta mot 48. */
    height: 110px;
  }

  /* BOKSEN MAA VERE HOEGARE NAAR HAN ER SMALARE.
   *
   * DETTE VAR DEN EINE VERKELEGE FEILEN I RUNDE 1, og eg saag henne ikkje
   * sjoelv: alle tala mine var groene. `rows="3"` gjev tre liner, og det
   * heldt so lenge boksen var 247 px brei. Med roboten ved sida blir han
   * 180, plassteksten treng fleire liner, og den nedste vart SKOREN TVERS
   * AV av botnkanten. Ein biletdommar saag det.
   *
   * OG FYRSTE RETTINGA MI VAR FOR RAUS: 196 px. Dommaren i runde 2 maalte
   * at 88 px av boksen stod tom, og at han var hoegare enn han var brei
   * paa ein 393 px skjerm. Eg hadde ikkje maalt kor hoegt innhaldet
   * VERKELEG er — `scrollHeight` er aldri mindre enn boksen, so so lenge
   * teksten gaar inn, fortel han berre kor hoeg boksen er. Eg maatte ta
   * bort `min-height` fyrst og lese han da:
   *
   *     393 px skjerm → boksen 180 brei → plassteksten 126 px (4 liner)
   *     320 px skjerm → boksen 171 brei → plassteksten 152 px (5 liner)
   *
   * 170 px er det smalaste tilfellet pluss ei halv line slark: 152 + 18.
   * Paa 393 px staar det 44 px att. `rows` er eit tal i markupen og kan
   * ikkje endrast per skjermbreidd; `min-height` kan. Porten maaler at
   * innhaldet GAAR INN (`scrollHeight` mot `clientHeight`), so ein skrift
   * som bryt annleis gjev raud port i staden for ei klipt line. */
  .skjemarad .skjema textarea {
    min-height: 170px;
  }
}

/* Redusert roersle: ingen video, berre biletet (avgjort fraa foer).
 * Og ingen overgang ut — ruta skal berre vere borte. */
@media (prefers-reduced-motion: reduce) {
  .intro {
    transition: none;
  }
}