/* import-granskning.css — granskningsvyn som stoppar en skadad import.
 *
 * Hör till import-granskning.js. Allt här följer designsystemet: radie 0,
 * 1px --border som avgränsare, mellanrum i multiplar av 4, ingen text under
 * 12px, bärnsten bara på handlingen och inga nya färgvärden.
 *
 * Vyn återanvänder .modal-overlay, .modal, .modal-title, .modal-sub och
 * .modal-actions ur global.css. Här ligger bara det som är nytt. */

/* Bredare än standardmodalen: varje tecken behöver en rad text runt om för att
 * läraren ska kunna avgöra vilken bokstav som saknas, och 440px klipper de
 * raderna mitt i ordet. Mönstret följer .modal.kopiera-modal i admin.css. */
.modal.ig-modal {
  max-width: 680px;
  max-height: 86vh;
  overflow-y: auto;
}

/* ── Förklaringen ── */

.ig-hjalp {
  margin-bottom: 24px;
}

.ig-hjalp p {
  font-size: var(--t-liten);
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 12px;
}

.ig-hjalp p:last-child {
  margin-bottom: 0;
}

/* Varningen om bortfall utan spår. Tjock vänsterkant i stället för fylld yta —
   designsystemets markör för "det här pekar jag ut". Bärnsten betyder här
   uppmärksamhet, inte handling, och --warn har samma värde som --accent. */
.ig-hjalp .ig-varning {
  border-left: 3px solid var(--warn);
  padding: 8px 0 8px 12px;
  color: var(--muted2);
}

/* ── Ett tecken ── */

.ig-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ig-tecken {
  border: 1px solid var(--border);
  background: var(--surface2);
  padding: 12px 16px;
}

.ig-tecken-topp {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.ig-kod {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--accent-text);
  letter-spacing: 1px;
}

.ig-namn {
  font-size: var(--t-liten);
  color: var(--text);
}

.ig-antal {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-meta);
  color: var(--muted);
  margin-left: auto;
}

/* ── Exempelraderna ── */

/* Mono med flit: läraren jämför tecken mot tecken här, och då ska bokstäverna
   ligga i samma bredd. Hålet skrivs som □ av JS. */
.ig-exempel {
  border-left: 3px solid var(--border);
  padding-left: 12px;
  margin-bottom: 12px;
}

.ig-exempelrad {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-meta);
  line-height: 1.7;
  color: var(--muted2);
  word-break: break-word;
}

/* ── Lärarens val ── */

.ig-val {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ig-etikett {
  font-size: var(--t-liten);
  color: var(--text);
}

/* Fältet rymmer ett tecken. input i global.css har width:100% och skulle annars
   ta hela raden. Höjd 36px enligt designsystemets mått för lärarvyn. */
.ig-falt {
  width: 56px;
  min-height: 36px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-brod);
  font-weight: 600;
}

.ig-alternativ {
  font-size: var(--t-meta);
  color: var(--muted);
}

/* Bihandlingen längst till höger på raden, så den inte konkurrerar med fältet
   som är det läraren faktiskt ska röra. */
.ig-stryk {
  margin-left: auto;
}

/* ── Rådet längst ned ── */

.ig-rad {
  border-top: 1px solid var(--border);
  margin-top: 24px;
  padding-top: 16px;
  font-size: var(--t-liten);
  line-height: 1.55;
  color: var(--muted2);
}

.ig-rad strong {
  color: var(--text);
}

/* Avbryt till vänster, den primära handlingen till höger. */
.ig-handlingar {
  justify-content: flex-end;
}

@media (max-width: 640px) {
  .modal.ig-modal { padding: 24px 20px; }
  .ig-antal       { margin-left: 0; }
  .ig-stryk       { margin-left: 0; }
}