/* ── matchning.css ───────────────────────────────────────────────
   Matchningsfrågan, både lärarens formulär (admin.html) och elevens vy
   (elev.html). En fil för båda: komponentreglerna är gemensamma och det
   är bara variabelvärdena som skiljer de fyra temana åt.

   Designsystemet gäller: radie 0, 1px --border som avgränsare, bärnsten
   är handling, grönt och rött är rätt och fel och aldrig en knapp. Den
   neutrala markeringen – rutan är placerad men inte rättad – är samma
   "registrerat"-tillstånd som dolt facit använder: accentkant och fylld
   yta, varken grönt eller rött.
   ──────────────────────────────────────────────────────────────── */

/* ===== ELEVENS VY ============================================== */

.mn-wrap { margin-top: 12px; }

.mn-ledtext {
  font-size: var(--t-meta);
  color: var(--muted2);
  margin-bottom: 12px;
}

.mn-rader { display: flex; flex-direction: column; gap: 8px; }

/* Två spalter bredvid varandra. Vänster står still, höger flyttas om.
   Lika breda, så att en lång match inte trycker ihop sitt begrepp. */
.mn-rad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: stretch;
}

.mn-vanster,
.mn-kort {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
  font-family: 'Sora', sans-serif;
  font-size: var(--t-liten);
  text-align: left;
  overflow-wrap: break-word;
  min-width: 0;
}

/* Vänsterspalten är frågans fasta del och ska inte se flyttbar ut. */
.mn-vanster {
  background: var(--surface2);
  border-left: 3px solid var(--border);
}

.mn-kort {
  cursor: grab;
  transition: border-color 0.15s, background 0.15s;
}

.mn-kort:hover:not(:disabled) { background: var(--surface2); }
.mn-kort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mn-kort:disabled { cursor: default; }

/* Markerad, väntar på rutan den ska byta med. Två signaler, inte en:
   kanten och ytan. Varken grönt eller rött – inget är rättat än. */
.mn-kort.vald {
  border-left: 4px solid var(--accent);
  background: var(--surface3);
  cursor: grabbing;
}

/* Under dragning: den som dras tonas, den man hovrar över visar var den
   hamnar. Utan den andra signalen går det inte att se vilken ruta som
   tar emot. */
.mn-kort.drar { opacity: 0.45; }
.mn-kort.over { border-left: 4px solid var(--accent); background: var(--surface3); }

/* Registrerat: svaret är inlämnat men facit hålls tillbaka. Samma
   tillstånd som dolt facit använder i frågevyn. */
.mn-kort.registrerad {
  border-left: 4px solid var(--accent);
  background: var(--surface3);
  color: var(--text);
}

.mn-kort.ratt {
  background: var(--correct);
  border-color: var(--correct);
  border-left-color: var(--correct);
  color: var(--on-correct);
}

.mn-kort.fel {
  background: var(--wrong);
  border-color: var(--wrong);
  border-left-color: var(--wrong);
  color: var(--on-wrong);
}

.mn-bild {
  display: block;
  max-width: 100%;
  max-height: 110px;
  margin: 0 auto;
  object-fit: contain;
  pointer-events: none;
}

.mn-etikett { display: block; }

.mn-status {
  font-size: var(--t-liten);
  color: var(--muted2);
  margin-top: 14px;
  min-height: 22px;
}

/* Rätta-knappen är vyns enda primärknapp. Låst tills eleven flyttat
   minst en ruta – den låsta varianten hör till komponenten, inte till JS. */
#mn-ratta-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Smal skärm: spalterna står kvar bredvid varandra. Bryts de till en
   kolumn försvinner hela poängen – eleven ska se paret, inte en lista. */
@media (max-width: 560px) {
  .mn-vanster, .mn-kort { padding: 8px 10px; }
  .mn-bild { max-height: 80px; }
}

/* ===== LÄRARENS FORMULÄR ======================================= */

.mnf-hjalp {
  font-size: var(--t-meta);
  color: var(--muted2);
  margin-bottom: 12px;
}

.mnf-par {
  border: 1px solid var(--border);
  background: var(--surface2);
  padding: 10px 12px;
  margin-bottom: 8px;
}

/* Ramen och numret finns därför att en bildcell är högre än en textcell.
   Utan dem går det inte att se vilka två celler som hör ihop när
   spalterna blandar bild och text. */
.mnf-par-nr {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mnf-celler { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.mnf-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.mnf-cell input[type="text"] { width: 100%; box-sizing: border-box; }

.mnf-bild {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 6px;
  text-align: center;
}

.mnf-bild img {
  display: block;
  max-width: 100%;
  max-height: 110px;
  margin: 0 auto;
  object-fit: contain;
}

.mnf-bildknappar { display: flex; flex-wrap: wrap; gap: 6px; }

.mnf-dold-fil { display: none; }

.mnf-bildstatus {
  font-size: var(--t-meta);
  color: var(--muted2);
  min-height: 16px;
}

.mnf-fot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

@media (max-width: 720px) {
  .mnf-celler { grid-template-columns: 1fr; }
}