/* ═══════════════════════════════════════════════════════════════
   dokument-import.css – Thevin
   Granskningen av ett importerat dokument, i lärarvyn.

   Läst mot "Thevin — designsystem.md" 2026-10-23:
   · inga nya färgvärden, allt genom variablerna i global.css
   · border-radius 0 överallt
   · bärnsten är handling; grönt och rött är rätt och fel
   · exakt en primärknapp i vyn (Spara dokumentet)
   · tjock vänsterkant markerar "titta här", inte en fylld yta
   · mellanrum i multiplar av 4, minsta text var(--t-meta) = 12px
   ═══════════════════════════════════════════════════════════════ */

.di-rad            { display:flex; align-items:center; justify-content:space-between;
                     gap:12px; flex-wrap:wrap; }
.di-sidhuvud       { margin-bottom:16px; }
.di-sub            { font-family:'JetBrains Mono',monospace; font-size:var(--t-meta);
                     color:var(--muted); letter-spacing:1px; }

.di-kort           { margin-bottom:16px; padding:16px; }
.di-rubrik         { font-family:'JetBrains Mono',monospace; font-size:var(--t-meta);
                     text-transform:uppercase; letter-spacing:1px; color:var(--muted);
                     margin-bottom:8px; }
.di-rubrik-andra   { margin-top:24px; }
.di-text           { font-size:var(--t-brod); line-height:1.5; margin:0 0 8px; max-width:62ch; }
.di-text-svag      { color:var(--muted2); font-size:var(--t-liten); }

/* ── Filväljaren ──────────────────────────────────────────────
   Den riktiga input ligger kvar men ritas inte: en <input
   type=file> går inte att forma, och display:none hade tagit
   tangentbordsfokus med sig. */
.di-filknapp       { display:inline-block; position:relative; cursor:pointer; }
.di-fil-input      { position:absolute; opacity:0; width:100%; height:100%;
                     left:0; top:0; cursor:pointer; }
.di-filknapp:focus-within .btn { outline:2px solid var(--accent); outline-offset:2px; }

/* ── Inställningar ────────────────────────────────────────────
   Fälthöjd minst 36px i lärarvyn. Fokus byter ram till bärnsten,
   ingen glow. */
.di-falt-rad       { display:flex; align-items:center; gap:12px; margin-bottom:8px;
                     flex-wrap:wrap; }

/* En egen display-regel slår ut webbläsarens [hidden]{display:none},
   som har lägre specificitet. Utan de här raderna stod "Maxpoäng för
   dokumentet" och "Max poäng" kvar på skärmen i läget Inga poäng —
   och poängfälten är det Richard oftast INTE vill se. */
.di-falt-rad[hidden],
.di-reglage[hidden] { display:none; }
.di-etikett        { flex:0 0 190px; font-size:var(--t-liten); color:var(--muted2); }
.di-input          { flex:1 1 240px; min-height:36px; box-sizing:border-box;
                     background:var(--surface); border:1px solid var(--border);
                     color:var(--text); font-family:'Sora',sans-serif;
                     font-size:var(--t-brod); padding:6px 12px; }
.di-input:focus    { outline:none; border-color:var(--accent); }
.di-input-kort     { flex:0 0 120px; }

/* ── Placeringsraden ──────────────────────────────────────────
   Säger vad dokumentet kommer att heta och var det hamnar. Står här
   därför att fälten som styr det ligger längst upp på sidan, utom
   synhåll för den som arbetar i panelen. */
.di-placering      { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
                     padding:8px 12px; margin:8px 0 0;
                     border-left:3px solid var(--accent); background:var(--surface2); }
.di-placering.saknas { border-left-color:var(--wrong); }
.di-placering-etikett { font-family:'JetBrains Mono',monospace; font-size:var(--t-meta);
                     text-transform:uppercase; letter-spacing:1px; color:var(--muted); }
.di-placering-varde { font-size:var(--t-liten); color:var(--text); font-weight:600; }
.di-placering-varning { flex:1 1 100%; font-size:var(--t-meta); color:var(--accent-text); }

.di-kryss          { width:20px; height:20px; accent-color:var(--accent); }

/* ── Anmärkningar ─────────────────────────────────────────────
   Vänsterkant i bärnsten: uppmärksamhet, inte fel. Det här är
   saker att läsa, inte saker som gått sönder. */
.di-anm            { border-left:3px solid var(--accent); }
.di-anm-lista      { margin:0; padding-left:20px; }
.di-anm-rad        { font-size:var(--t-liten); line-height:1.6; color:var(--text);
                     margin-bottom:8px; }

.di-verktygsrad    { margin-bottom:12px; padding-bottom:8px;
                     border-bottom:1px solid var(--border); }
.di-verktyg        { display:flex; gap:8px; }
.di-fotrad         { margin:0 0 32px; }

/* Beskedet som står där knappen Förbered dokumentet stod. Inte en
   knapp: det är ingenting att trycka på, nästa steg är Spara quiz
   högst upp på sidan. 2026-10-24. */
.di-klart          { font-size:var(--t-brod); color:var(--accent);
                     line-height:1.5; max-width:46ch; }
.di-klart strong   { font-weight:700; }

/* ── Dokumentet ───────────────────────────────────────────────
   Ritas av dokument-rita.js och formas av dokument.css, delat med
   elevens sida och lärarens vy. Granskningen visar alltså exakt det
   eleven kommer att se. Här ligger bara det som är granskningens
   eget: fältens reglage och lägg till-knappen.

   di-sida bär ingen egen bredd: i originalläget kommer den ur
   Word-filens marginaler via den genererade klassen dokstil-papper,
   i thevin-läget ur dokument.css. */

/* ── Fältet med sina reglage ──────────────────────────────────
   Vänsterkant i bärnsten: det här är det läraren ska titta på.
   Rutan bryter radflödet med avsikt — ett fält inne i en mening
   går inte att läsa tillsammans med sina fyra reglage. */
.di-falt           { display:block; margin:8px 0 12px; padding:8px 12px;
                     border:1px solid var(--border); border-left:3px solid var(--accent);
                     background:var(--surface2); }
.di-falt-topp      { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.di-falt-nr        { font-family:'JetBrains Mono',monospace; font-size:var(--t-meta);
                     color:var(--accent-text); letter-spacing:1px; }
.di-falt-ursprung  { font-family:'JetBrains Mono',monospace; font-size:var(--t-meta);
                     text-transform:uppercase; letter-spacing:1px; color:var(--muted); }
.di-falt-bort      { margin-left:auto; background:none; border:none; padding:0;
                     color:var(--muted2); font-family:'Sora',sans-serif;
                     font-size:var(--t-meta); text-decoration:underline; cursor:pointer; }
.di-falt-bort:hover  { color:var(--wrong-text); }
.di-falt-bort:focus  { outline:2px solid var(--accent); outline-offset:2px; }

.di-falt-etikett   { display:block; font-size:var(--t-liten); line-height:1.5;
                     margin-bottom:8px; }

.di-falt-reglage   { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.di-reglage        { display:flex; flex-direction:column; gap:4px;
                     font-family:'JetBrains Mono',monospace; font-size:var(--t-meta);
                     text-transform:uppercase; letter-spacing:1px; color:var(--muted); }
.di-val            { min-height:36px; box-sizing:border-box; background:var(--surface);
                     border:1px solid var(--border); color:var(--text);
                     font-family:'Sora',sans-serif; font-size:var(--t-liten);
                     text-transform:none; letter-spacing:0; padding:4px 8px; }
.di-val:focus      { outline:none; border-color:var(--accent); }
.di-val-kort       { width:120px; }

.di-alt-lista      { display:block; margin:8px 0 0; }
.di-alt            { display:flex; align-items:baseline; gap:8px;
                     font-size:var(--t-liten); line-height:1.5; margin-bottom:4px; }
.di-alt-bokstav    { flex-shrink:0; width:24px; text-align:center;
                     font-family:'JetBrains Mono',monospace; font-size:var(--t-meta);
                     border:1px solid var(--border); color:var(--muted2); }

/* Varningen är uppmärksamhet, inte fel: fältet finns och fungerar,
   men läraren bör titta på just det. --warn har samma värde som
   --accent, och texten tas ur --accent-text för att nå 4,5:1. */
.di-falt-varning   { display:block; font-size:var(--t-liten); line-height:1.5;
                     color:var(--accent-text); margin-top:8px;
                     border-top:1px solid var(--border); padding-top:8px; }

/* ── Lägg till-knappen ────────────────────────────────────────
   Finns bara i läget "Lägg till luckor". Tyst variant: den ska
   finnas men inte konkurrera med texten den står i. */
.di-plus           { background:none; border:1px dashed var(--border);
                     color:var(--muted2); font-family:'JetBrains Mono',monospace;
                     font-size:var(--t-meta); text-transform:uppercase;
                     letter-spacing:1px; padding:2px 8px; margin-left:8px;
                     cursor:pointer; }
.di-plus:hover     { border-color:var(--accent); color:var(--accent-text); }
.di-plus:focus     { outline:2px solid var(--accent); outline-offset:2px; }

/* ── Lärarens redigering ──────────────────────────────────────
   Samma språk som elevens fria läge i elev-dokument.css: ingen
   ram och ingen ruta, bara markören och en svag ton när man för
   musen över. Dokumentet ska se ut som dokumentet, inte som ett
   formulär — det gäller läraren lika mycket som eleven.

   Reglerna står här och inte i elev-dokument.css därför att
   admin.html inte laddar den filen. Klassen dokfri-ruta sätts av
   dokument-fritt.js och är gemensam. */
.di-sida .dokfri-ruta        { cursor:text; outline:none; min-height:1.2em;
                               transition:background-color 0.12s; }
.di-sida .dokfri-ruta:hover  { background:var(--accent-dim); }
.di-sida .dokfri-ruta:focus  { background:var(--accent-dim);
                               box-shadow:inset 0 -2px 0 0 var(--accent); }

/* Filfältet är dolt och nås genom sin etikett. Reglerna i CLAUDE.md
   förbjuder inline-stilar, och display:none hör hemma här. */
.di-dold-fil       { display:none; }
.di-bild-status    { font-family:'JetBrains Mono',monospace; font-size:var(--t-meta);
                     letter-spacing:1px; color:var(--muted2); align-self:center; }

/* Verktygsraden bär fler knappar i redigeringsläget än den gjorde
   när den bara hade en. Den ska brytas, inte tryckas ihop. */
.di-verktyg        { flex-wrap:wrap; align-items:center; }

/* Ta bort-knappen under en bild står på egen rad: en bild är ett
   eget block och knappen får inte se ut att höra till texten under. */
.di-bildrad        { margin:4px 0 12px; }
.di-bildrad .di-plus { margin-left:0; }

/* ── Statusraden ──────────────────────────────────────────────
   Publiceringen tar flera steg mot nätet. Raden säger vilket steg
   som pågår och vad som gick fel, inte bara att något gick fel. */
.di-status         { font-size:var(--t-liten); line-height:1.6; margin-top:12px;
                     white-space:pre-line; }
.di-status-vilar   { color:var(--muted2); }
.di-status-ok      { color:var(--correct-text); }
.di-status-fel     { color:var(--wrong-text); }

@media (max-width: 700px) {
  .di-etikett      { flex:1 1 100%; }
  .di-sida         { max-width:none; }
}

/* ── Reglagen på papperet ─────────────────────────────────────
   I originalläget är dokumentet vitt. Fältrutan måste då byta
   färger, annars blir den en mörk klump mitt i en vit sida — samma
   fel som helhetsrutan hade i elevvyn innan den rättades. */
.dok-papper .di-falt         { background:#f4f4f0; border:1px solid #d6d6d0;
                               border-left:3px solid var(--accent); color:#1a1a1a; }
.dok-papper .di-falt-etikett { color:#1a1a1a; }
.dok-papper .di-falt-ursprung,
.dok-papper .di-reglage      { color:#55554f; }
.dok-papper .di-falt-bort    { color:#55554f; }
.dok-papper .di-val          { background:#ffffff; border:1px solid #9a9a93; color:#1a1a1a; }
.dok-papper .di-alt-bokstav  { border-color:#9a9a93; color:#55554f; }
.dok-papper .di-plus         { border-color:#9a9a93; color:#55554f; }
.dok-papper .di-plus:hover   { border-color:var(--accent); color:#8a5206; }

/* Bärnstenstonen syns inte mot vitt papper. Där får en svag grå ton
   och kanten bära att rutan går att skriva i. Samma lösning som i
   elevens fria läge. */
.di-sida.dok-papper .dokfri-ruta:hover { background:rgba(0,0,0,0.035); }
.di-sida.dok-papper .dokfri-ruta:focus { background:rgba(0,0,0,0.05);
                                         box-shadow:inset 0 -2px 0 0 #9e5d08; }