/* 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); }