/* Genererad traning — egen CSS sa att vyn kan byggas utan att krocka i bas.css.
   Mobil-forst. Enbart variablerna och komponentklasserna fran bas.css:
   --bg --yta --ram --text --dampad --accent --accent-svag --ratt --fel
   --radie --radie-liten --luft-*. Ljust/morkt lage foljer av variablerna. */

/* ---------- oversikt och tomt lage ---------- */

.egna-kort-info { display: block; }

.egna-tomt code {
  display: inline-block;
  margin-top: var(--luft-2);
  padding: var(--luft-2) var(--luft-3);
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
  overflow-wrap: anywhere;
}

/* ---------- startpanel ---------- */

#egna-startpanel { display: grid; gap: var(--luft-3); }
#egna-startpanel .knapprad { margin-top: var(--luft-2); }

.egna-val {
  margin: 0;
  padding: var(--luft-3) var(--luft-4);
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
}
.egna-val legend { font-weight: 600; padding: 0 var(--luft-1); }
.egna-val-rad { display: flex; flex-wrap: wrap; gap: var(--luft-2); }

/* Radioknappar som chips — traffytan ar hela etiketten. */
.egna-valknapp {
  display: inline-flex;
  align-items: center;
  gap: var(--luft-2);
  min-height: 44px;
  padding: var(--luft-2) var(--luft-3);
  border: 1px solid var(--ram);
  border-radius: 999px;
  cursor: pointer;
}
.egna-valknapp:hover { border-color: var(--accent); }
.egna-valknapp input {
  width: 16px; height: 16px; margin: 0;
  accent-color: var(--accent); flex: none;
}
.egna-valknapp:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-svag);
}

/* ---------- omgangen ---------- */

.egna-topp {
  display: flex;
  align-items: center;
  gap: var(--luft-3);
  margin: 0 0 var(--luft-4);
}
.egna-topp-text { flex: 1; min-width: 0; display: grid; }
.egna-topp-text strong,
.egna-topp-text span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.egna-uppgift { display: grid; gap: var(--luft-3); }

/* Underlaget (DTK:s SVG) arver textfargen: figurerna ritar med
   currentColor och foljer darfor med i bade ljust och morkt lage.
   Bred figur skalas ner av max-width, men behaller lasbar minsta
   bredd och skrollar da i egen yta istallet for att spranga sidan. */
.egna-underlag {
  margin: 0;
  padding: var(--luft-3) var(--luft-4);
  color: var(--text);
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
}
.egna-underlag figcaption { margin-bottom: var(--luft-2); }
.egna-svg { overflow-x: auto; }
.egna-svg svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-width: 260px;
}

/* NOG och KVA har flerradiga fragor — pastaendena (1) och (2), och
   kvantiteterna I och II, star pa egna rader i datan. Utan pre-line
   klistras de ihop till ett enda stycke och uppgiften blir svarlast. */
.egna-fraga {
  margin: 0;
  font-weight: 600;
  font-size: 1.05rem;
  white-space: pre-line;
}

/* ---------- svarsalternativ ---------- */

.egna-altlista { display: grid; gap: var(--luft-2); }
.egna-alt {
  display: flex;
  align-items: baseline;
  gap: var(--luft-3);
  width: 100%;
  min-height: 44px;
  padding: var(--luft-3) var(--luft-4);
  font: inherit;
  text-align: left;
  color: var(--text);
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.egna-alt:hover:not([disabled]) { border-color: var(--accent); }
.egna-alt[disabled] { cursor: default; }
.egna-bokstav { font-weight: 700; min-width: 1.2em; flex: none; }
.egna-alttext { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.egna-siffra { flex: none; font-variant-numeric: tabular-nums; }

/* Rattningen: ratt alternativ markeras alltid, felvalet bara nar det
   fanns ett. Fargade ramar racker inte ensamma — utfallsraden nedanfor
   bar samma besked i text. */
.egna-alt.ratt {
  border-color: var(--ratt);
  background: color-mix(in srgb, var(--ratt) 10%, var(--yta));
}
.egna-alt.ratt .egna-bokstav { color: var(--ratt); }
.egna-alt.felval {
  border-color: var(--fel);
  background: color-mix(in srgb, var(--fel) 8%, var(--yta));
}
.egna-alt.felval .egna-bokstav { color: var(--fel); }
/* Dampad text i stallet for opacitet: opaciteten gav 3,85:1 i ljust lage,
   och de har knapparna bar uppgiftens alternativtexter — det ar dem man
   jamfor mot nar man laser harledningen. */
.egna-alt[disabled]:not(.ratt):not(.felval) { color: var(--dampad); }
.egna-alt[disabled]:not(.ratt):not(.felval) .egna-bokstav { color: var(--dampad); }

/* ---------- facit och harledning ---------- */

#egna-facit { display: grid; gap: var(--luft-2); }
.egna-utfall { margin: 0; font-weight: 650; }
.egna-utfall.ratt { color: var(--ratt); }
.egna-utfall.fel { color: var(--fel); }
.egna-harledning {
  margin: 0;
  padding: var(--luft-3) var(--luft-4);
  background: var(--yta);
  border: 1px solid var(--ram);
  border-left: 3px solid var(--accent);
  border-radius: var(--radie-liten);
}

/* Fallan: varfor just det alternativ anvandaren valde ar fel. Rod kant sa
   att den laser ihop med felmarkeringen pa alternativet ovanfor. */
.egna-falla {
  margin: 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);
}

/* Metoden for uppgiftstypen. Hopfalld efter ratt svar. */
.egna-metod {
  padding: var(--luft-3) var(--luft-4);
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie-liten);
}
.egna-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;
}
.egna-metod > summary::marker { color: var(--dampad); }
.egna-metod[open] > summary { margin-bottom: var(--luft-3); }
.egna-metodsteg {
  margin: 0 0 var(--luft-3);
  padding-left: 1.4em;
  display: grid;
  gap: var(--luft-1);
}
.egna-kontroll { margin: 0 0 var(--luft-2); }

#egna-facit .knapprad { margin-top: var(--luft-2); align-items: center; }
.egna-tangenttips { display: none; }

/* Tangenttipset och sifferkolumnen ar bara till nytta med tangentbord —
   pa en pekskarm ar de brus. Grov men arlig heuristik: pekare som hovrar. */
@media (hover: hover) and (pointer: fine) {
  .egna-tangenttips { display: inline; }
}
@media (hover: none), (pointer: coarse) {
  .egna-siffra { display: none; }
}

/* ---------- utfall per uppgiftstyp efter en omgang ---------- */

.egna-pertyp { margin-top: var(--luft-3); }
.egna-pertyp h3 { margin: 0 0 var(--luft-2); font-size: 1rem; }
.egna-typlista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--luft-1);
}
.egna-typlista li {
  display: flex;
  align-items: baseline;
  gap: var(--luft-2);
}


/* Tom tidsmarkeringsyta ska inte ata luft i rutnatet nar markeringen ar
   avstangd eller innan riktmarket passerats. */
#egna-tempo:empty { display: none; }

/* Pa breda skarmar strackte sig svarsknapparna over hela ytan for ett
   alternativ som "15 %". Radlangden begransas till det ogat orkar folja. */
.egna-altlista { max-width: 46ch; }

/* Lankarna i per-typ-listan ar listradslankar, inte inline i lopande text
   — de ska ga att traffa med tummen. */
#egna-pertyp li a { display: inline-block; padding: 10px 0; }

/* Samma sak i omgangen: h1 for navigering, oforandrat utseende. */
.egna-topp-text h1 { margin: 0; font-size: 1rem; }

/* LAS-underlaget ar en lastext, inte en figur: den ska laesas i lugn och ro
   och far darfor radlangd och radavstand som en artikel, inte som ett
   diagram. */
.egna-lastext {
  white-space: pre-line;
  line-height: 1.65;
  max-width: 62ch;
}
/* Luft mellan lastexten och fragan. Regeln satt forut pa .egna-lastext + *,
   som aldrig traffar nagot: texten ar sista barnet INNE i figuren, och
   fragan ar syskon till figuren. */
.egna-underlag:has(.egna-lastext) + .egna-fraga { margin-top: var(--luft-3); }

/* ---------- LAS: en hel text i taget ----------
   Provets LAS ar en text man laser EN gang och sedan svarar pa allihop
   utifran. Den vanliga omgangen blandar fragor fran flera texter, sa den
   formagan tranades aldrig. Se ritaTextlasning i egna.js. */

.egna-textlista { display: grid; gap: var(--luft-3); margin-top: var(--luft-5); }
.egna-textlista h2 { margin: 0; }
.egna-textlista p { margin: 0; }

/* Forsteget till lasstrategin: bara texten, eller bara fragorna. En
   vanlig lasspalt — inget att stalla bredvid. */
.egna-forsteg { display: grid; gap: var(--luft-4); }
.egna-forsteg .egna-lastext {
  max-width: 62ch;
  line-height: 1.6;
  white-space: pre-wrap;
}
.egna-forsteg .strategi-fragor { max-width: 62ch; }