/* ELF — egen CSS sa att vyn kan byggas utan att krocka i bas.css.
   Mobil-forst. Anvander enbart variablerna i bas.css, sa ljust och
   morkt lage foljer med automatiskt. */

/* Hela elf-vyn skrollar inuti #app sa att lasvyn kan halla text och
   fragor synliga samtidigt i tva egna skrollytor. */
body[data-vy="elf"] {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body[data-vy="elf"] #huvudnav { flex: none; }
body[data-vy="elf"] #app { flex: 1; min-height: 0; overflow: auto; }

/* ELF lagger till en fjarde post i huvudnavet. Pa smala skarmar maste
   navet da fa radbrytas — annars breddar det hela dokumentet. */
/* Nav-overflodet loses numera globalt i bas.css: lankarna skrollar. */

/* I morkt lage ar --accent ljusbla; bas.css satter vit text pa primara
   knappar vilket ger for lag kontrast. Scopat till elf-vyn: mork text
   (--bg) pa den ljusa accentfargen istallet. */

/* ---------- oversikten ---------- */

.elf-tidval {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 16px; cursor: pointer;
}
.elf-tidval input { accent-color: var(--accent); width: 18px; height: 18px; }
.elf-kort .dampad { display: block; }

/* ---------- lasvyn ---------- */

body[data-vy="elf"]:has(.elf-las) #app { overflow: hidden; }

.elf-prov { height: 100%; display: flex; flex-direction: column; }

.elf-topp {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  background: var(--yta); border-bottom: 1px solid var(--ram);
  padding: 8px 12px;
}
.elf-topp-text { flex: 1; min-width: 0; display: grid; }
.elf-topp-text h1,
.elf-topp-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elf-topp-text h1 { font-size: .9rem; margin: 0; }
.elf-topp-text span { font-size: .78rem; }
.elf-timer {
  font-variant-numeric: tabular-nums;
  font-size: 1.1rem; font-weight: 600; flex: none;
}
.elf-timer.varning { color: var(--fel); }

/* Tva skrollytor: texten forsvinner aldrig nar man svarar.
   Mobil: text overst, fragor under. Desktop: sida vid sida. */
.elf-las {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 46%) minmax(0, 1fr);
}
.elf-textyta {
  overflow: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px;
  border-bottom: 2px solid var(--ram);
}
.elf-fragyta {
  overflow: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px 48px;
  background: var(--yta);
}

@media (min-width: 900px) {
  .elf-las {
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 44%);
  }
  .elf-textyta { border-bottom: none; border-right: 1px solid var(--ram); padding: 24px 32px; }
  .elf-fragyta { padding: 20px 24px 64px; }
}

/* Lasbar typografi for langre engelsk text: begransad radlangd,
   luftigt radavstand, tydliga styckesmellanrum. */
.elf-text {
  max-width: 66ch;
  font-size: 1.03rem;
  line-height: 1.65;
  hyphens: auto;
  overflow-wrap: break-word;
}
.elf-text p { margin: 0 0 1em; }
.elf-text p:last-child { margin-bottom: 0; }

/* ---------- fragorna ---------- */

/* Notisen om en aterupptagen omgang. Star forst i fragespalten — det ar
   dar den som kommer tillbaka tittar, och den ska lasas fore forsta
   fragan, inte hittas efterat. */
.elf-aterupptag {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 12px; padding: 10px 12px;
  background: var(--yta);
  border: 1px solid var(--ram);
  border-left: 3px solid var(--accent);
  border-radius: var(--radie);
  font-size: .9rem;
}
.elf-aterupptag span { flex: 1; min-width: 0; }

.elf-fraghjalp { margin: 0 0 12px; }
.elf-fraga {
  border: 1px solid var(--ram); border-radius: var(--radie);
  background: var(--bg);
  padding: 12px; margin: 0 0 12px;
}
.elf-fragetext { margin: 0 0 10px; line-height: 1.45; }
.elf-altlista { display: grid; gap: 6px; }
.elf-alt {
  display: flex; align-items: baseline; gap: 10px;
  width: 100%; text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--ram); border-radius: 8px;
  background: var(--yta); color: var(--text);
  font: inherit; line-height: 1.4; cursor: pointer;
}
.elf-alt:hover { border-color: var(--accent); }
.elf-alt[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-svag);
}
.elf-bokstav {
  flex: none; font-weight: 650; font-size: .85rem;
  color: var(--dampad); width: 1.2em;
}
.elf-alt[aria-pressed="true"] .elf-bokstav { color: var(--accent); }

/* ---------- efter rattning ---------- */

.elf-alt[disabled] { cursor: default; }
.elf-alt.ratt { border-color: var(--ratt); background: color-mix(in srgb, var(--ratt) 12%, var(--yta)); }
.elf-alt.ratt .elf-bokstav { color: var(--ratt); }
.elf-alt.felval { border-color: var(--fel); background: color-mix(in srgb, var(--fel) 10%, var(--yta)); }
.elf-alt.felval .elf-bokstav { color: var(--fel); }

.elf-fraga.ratt { border-color: var(--ratt); }
.elf-fraga.fel { border-color: var(--fel); }

.elf-utfall { margin: 10px 0 6px; font-weight: 600; font-size: .92rem; }
.elf-fraga.ratt .elf-utfall { color: var(--ratt); }
.elf-fraga.fel .elf-utfall { color: var(--fel); }

.elf-belagg {
  margin: 0;
  border-left: 3px solid var(--accent);
  background: var(--accent-svag);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: .88rem; line-height: 1.5;
}

.elf-summering {
  border: 1px solid var(--accent); border-radius: var(--radie);
  background: var(--accent-svag);
  padding: 12px 14px; margin: 0 0 14px;
  font-size: 1.05rem;
}
.elf-summering-knappar { margin-top: 10px; }

/* Hjalpen efter rattning: fallan for det egna valet och metoden for
   fragetypen. Samma tre lager som i den genererade traningen (egna.css)
   — ELF hade tidigare bara belagget for RATT svar, alltsa inget alls
   till den som svarat fel. */
.elf-falla {
  margin: var(--luft-2) 0 0;
  padding: var(--luft-3) var(--luft-4);
  background: color-mix(in srgb, var(--fel) 6%, var(--yta));
  border: 1px solid var(--ram);
  border-left: 3px solid var(--fel);
  border-radius: var(--radie-liten);
}

.elf-metod {
  margin-top: var(--luft-2);
  padding: var(--luft-3) var(--luft-4);
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie-liten);
}
.elf-metod > summary {
  cursor: pointer;
  font-weight: 600;
  list-style-position: inside;
  /* traffytan ska na 44 px, inte textradens 25 */
  padding: 10px 0;
  margin: -10px 0;
}
.elf-metod > summary::marker { color: var(--dampad); }
.elf-metod[open] > summary { margin-bottom: var(--luft-3); }
.elf-metodsteg {
  margin: 0 0 var(--luft-3);
  padding-left: 1.4em;
  display: grid;
  gap: var(--luft-1);
}
.elf-kontroll { margin: 0 0 var(--luft-2); }

/* ---------- lasstrategins forsteg i ELF ----------
   Det generella (panel, tabell, omdome) ligger i lasstrategi.css — LAS
   visar samma sak. Har star bara hur ELF:s tvakolumnslayout viks ihop
   till en nar bara det ena av text och fragor ska synas. */

.elf-forsteg .elf-las {
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: 1fr;
}
.elf-forsteg .elf-textyta { border-bottom: 0; border-right: 0; }
.elf-forsteg #strategi-instruktion { margin: 12px 16px 0; }
@media (min-width: 900px) {
  .elf-forsteg .elf-las {
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: 1fr;
  }
  .elf-forsteg #strategi-instruktion { margin: 16px 32px 0; max-width: 70ch; }
}