/* Ordtraning — egen CSS sa att vyerna kan byggas utan att krocka i bas.css.
   Mobil forst; ljust/morkt folger variablerna i bas.css. */

.ord-status {
  display: flex; align-items: center; gap: 18px;
  background: var(--yta); border: 1px solid var(--ram);
  border-radius: var(--radie); padding: 10px 14px; margin: 16px 0;
}
.ord-statuspost { display: grid; line-height: 1.25; }
.ord-statuspost b { font-variant-numeric: tabular-nums; }
.ord-status .markning { margin-left: auto; }

.ord-yta { max-width: 560px; }

.ordkort {
  background: var(--yta); border: 1px solid var(--ram);
  border-radius: var(--radie); padding: 18px 16px;
}
.ord-instruktion { margin: 0 0 6px; }
.ord-fraga {
  font-size: 1.6rem; font-weight: 650; margin: 0 0 16px;
  overflow-wrap: anywhere;
}

.ord-alternativ { display: grid; gap: 8px; }
.alternativ {
  display: flex; align-items: center; gap: 10px;
  font: inherit; text-align: left; cursor: pointer;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--ram); border-radius: var(--radie);
  padding: 10px 12px; min-height: 44px; /* tumvanligt pa mobil */
}
.alternativ:hover:not([disabled]) { border-color: var(--accent); }
.alternativ:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.alternativ[disabled] { cursor: default; opacity: .75; }
.alternativ.ratt { border-color: var(--ratt); color: var(--ratt); opacity: 1; font-weight: 600; }
.alternativ.fel { border-color: var(--fel); color: var(--fel); opacity: 1; }
.alt-bokstav {
  flex: 0 0 auto; width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid var(--ram); border-radius: 999px;
  font-size: .78rem; color: var(--dampad);
}
.alternativ.ratt .alt-bokstav { border-color: var(--ratt); color: var(--ratt); }
.alternativ.fel .alt-bokstav { border-color: var(--fel); color: var(--fel); }

#ord-feedback { margin-top: 4px; }
.ord-utfall { font-weight: 650; margin: 14px 0 2px; }
.ord-utfall.ratt { color: var(--ratt); }
.ord-utfall.fel { color: var(--fel); }
#ord-feedback .liten { margin: 0 0 10px; }

.betygsrad { display: flex; flex-wrap: wrap; gap: 8px; }
.betyg {
  font: inherit; cursor: pointer;
  background: var(--yta); color: var(--text);
  border: 1px solid var(--ram); border-radius: var(--radie);
  padding: 9px 12px; min-height: 44px;
  display: grid; justify-items: center; line-height: 1.2;
  flex: 1 1 0; min-width: 72px;
}
.betyg:hover { border-color: var(--accent); }
.betyg[data-betyg="igen"]:hover { border-color: var(--fel); }

.ord-tomt {
  background: var(--yta); border: 1px solid var(--ram);
  border-radius: var(--radie); padding: 28px 18px; text-align: center;
}
.ord-tomt-rubrik { font-size: 1.25rem; font-weight: 650; margin: 0 0 6px; }
.ord-tomt .knapp { margin-top: 12px; }

@media (min-width: 640px) {
  .ordkort { padding: 24px 22px; }
  .ord-fraga { font-size: 1.9rem; }
}

/* Minnesregeln ar det enda som ska gora att ordet sitter nasta gang —
   den far darfor synas tydligt, inte gommas som en fotnot. */
.ord-minnesregel {
  background: var(--accent-svag);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 12px 0 0;
}


/* Tidsmarkeringen satt tatt mot sista svarsalternativet — egna-vyn far sin
   luft av rutnatets gap, ordvyn har inget. */
#ord-tempo:not(:empty) { margin-top: 10px; }

/* Fallan for det valda alternativet. Samma form som i ovriga delprov:
   rod kantlinje till vanster, dampad bakgrund. */
.ord-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);
  text-align: left;
}

.ord-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);
  text-align: left;
}
.ord-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;
}
.ord-metod > summary::marker { color: var(--dampad); }
.ord-metod[open] > summary { margin-bottom: var(--luft-3); }
.ord-metodsteg { margin: 0 0 var(--luft-3); padding-left: 1.4em; display: grid; gap: var(--luft-1); }
.ord-kontroll { margin: 0 0 var(--luft-2); }

/* "Darfor lonar sig ordtraningen" — hopfalld som standard, se varforRutan
   i ord.js. Dampad ram sa att den inte konkurrerar med sjalva ordkortet:
   den ska ga att lasa en gang och sedan glommas. */
.ord-varfor {
  margin: var(--luft-3) 0 0;
  padding: var(--luft-3);
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie-liten);
}
.ord-varfor > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .9rem;
  /* 44 px tumyta aven for en summary — granskningen kravde det av allt
     klickbart, och en summary ar klickbar. */
  min-height: 44px;
  display: flex;
  align-items: center;
}
.ord-varfor p { margin: var(--luft-3) 0 0; max-width: 60ch; }

/* ---------- ordlistan (#/ordlista) ----------

   Bladdervyn over hela banken. Egna klasser, men samma byggstenar som
   ordkortet ovan: .ord-minnesregel och .ord-metod ateranvands rakt av sa
   att ett ord ser likadant ut var man an laser det. */

.ordlista-filter {
  display: grid;
  gap: var(--luft-2);
  margin: var(--luft-4) 0 var(--luft-3);
}
@media (min-width: 560px) {
  .ordlista-filter { grid-template-columns: 1fr 1fr; }
  .ordlista-filter > #ordlista-sok { grid-column: 1 / -1; }
}
.ordlista-filter > * {
  min-height: 44px;
  /* Rutnatsrutor ar min-width:auto som standard och kan alltsa inte krympa
     under sitt innehall: den langsta option-texten i en <select> gjorde
     hela sidan bredare an 320 px och gav horisontell skroll. */
  min-width: 0;
  width: 100%;
  padding: var(--luft-2) var(--luft-3);
  font: inherit;
  color: var(--text);
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie-liten);
}
/* Webkit ritar sokfaltets kryss i webblasarens egen farg, som blir
   osynlig mot den morka ytan. Det egna temat maste alltsa foljas med. */
.ordlista-filter > #ordlista-sok::-webkit-search-cancel-button { filter: invert(.5); }

.ordlista { display: grid; gap: var(--luft-2); }

.ordlistekort {
  padding: var(--luft-3);
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie-liten);
}
.ordlistekort > summary {
  display: flex;
  align-items: center;
  gap: var(--luft-3);
  cursor: pointer;
  /* 44 px tumyta, samma krav som allt annat klickbart i appen */
  min-height: 44px;
  padding: 2px 0;
}
/* display:flex slar ut ::marker, sa en summary utan eget tecken ser ut som
   en rubrik och inte som nagot man kan falla ut. 338 rader dar ingen ser
   att de gar att oppna ar en lista utan innehall. Chevronen ritas darfor
   sjalv — och roteras nar kortet oppnas. */
.ordlistekort > summary::before,
.ordlista-metoder > summary::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: var(--luft-2);
  border-right: 2px solid var(--dampad);
  border-bottom: 2px solid var(--dampad);
  transform: rotate(-45deg);
  transition: transform .15s ease;
}
.ordlistekort[open] > summary::before,
.ordlista-metoder[open] > summary::before { transform: rotate(45deg); }
.ordlista-ord { font-weight: 650; font-size: 1.05rem; }
.ordlistekort[open] > summary { margin-bottom: var(--luft-3); }

/* Market ar en genvag for ogat, inte den enda bararen: samma status star i
   klartext i kortets fotrad, och i summary som aria-label. */
.ordlista-marke { flex: none; font-weight: 700; }
.ordlista-marke.ratt { color: var(--ratt); }
.ordlista-marke.fel { color: var(--dampad); }

.ordlista-betydelse { margin: 0 0 var(--luft-3); max-width: 60ch; }
.ordlista-fallor { margin: 0 0 var(--luft-3); }
.ordlista-fallor > b { display: block; color: var(--dampad); margin-bottom: var(--luft-1); }
.ordlista-fallor ul { margin: 0; padding-left: 1.3em; display: grid; gap: var(--luft-2); max-width: 60ch; }
.ordlista-fot { margin: 0 0 var(--luft-3); }
/* Metoderna en gang, inte per ord — se ritaMetoder i ordlista.js. */
.ordlista-metoder {
  margin: var(--luft-3) 0 0;
  padding: var(--luft-3);
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie-liten);
}
.ordlista-metoder > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .9rem;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.ordlista-metod { margin-top: var(--luft-4); max-width: 60ch; }
.ordlista-metod > b { display: block; margin-bottom: var(--luft-2); }