/* ═══════════════════════════════════════════════════════════════
   elev-skriv.css – Thevin
   Skrivhäftets elevvy. Egen fil av samma skäl som elev-skriv.js är
   en egen fil: quizvyns regler ska inte behöva tänka på den här.
   ═══════════════════════════════════════════════════════════════ */

/* ── Frågenavigering ──────────────────────────────────────────
   Hela poängen: eleven ser med en blick vad som är kvar. Gråa
   rutor är orörda, kantade är påbörjade, fyllda är inlämnade. */
.skriv-topp        { display:flex; align-items:center; justify-content:space-between;
                     gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.skriv-topp-hoger  { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.skriv-titel       { font-size:var(--t-brod); font-weight:600; }
.skriv-raknare     { font-family:'JetBrains Mono',monospace; font-size:var(--t-meta);
                     color:var(--muted2); letter-spacing:1px; white-space:nowrap; }

.skriv-nav         { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px; }
.skriv-nav-knapp   { width:36px; height:36px; flex-shrink:0; cursor:pointer;
                     background:var(--surface2); border:1px solid var(--border);
                     color:var(--muted); font-family:'JetBrains Mono',monospace;
                     font-size:var(--t-liten); transition:all 0.15s; }
.skriv-nav-knapp:hover      { border-color:var(--muted); color:var(--text); }
.skriv-nav-knapp.pabörjad   { border-color:var(--accent); color:var(--text); }
.skriv-nav-knapp.inlamnad   { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.skriv-nav-knapp.aktiv      { outline:2px solid var(--accent); outline-offset:2px; }

/* ── Frågan ───────────────────────────────────────────────────
   pre-wrap: en skrivfråga har rubrik, brödtext och ofta en
   punktlista. Utan den klistras allt ihop till ett stycke. */
.skriv-fraga-nr    { font-family:'JetBrains Mono',monospace; font-size:var(--t-meta);
                     color:var(--accent); letter-spacing:2px; margin-bottom:10px; }
.skriv-fraga-text  { font-size:var(--t-h3); font-weight:600; line-height:1.55;
                     white-space:pre-wrap; margin-bottom:16px; }

/* Bilden till frågan. Dold tills JS satt .visas, annars syns en tom
   ram på alla frågor utan bild. Höjden är tilltagen men inte fri: en
   graf ska gå att läsa av utan att skrivfältet hamnar utanför skärmen.
   .stor tar bort taket för den som behöver se mer. */
.skriv-fraga-bild       { display:none; max-width:100%; max-height:320px;
                          object-fit:contain; margin:0 0 16px; cursor:zoom-in;
                          border:1px solid var(--border); background:#fff; }
.skriv-fraga-bild.visas { display:block; }
.skriv-fraga-bild.stor  { max-height:none; cursor:zoom-out; }

.skriv-input       { width:100%; box-sizing:border-box; min-height:220px; resize:vertical;
                     background:var(--surface2); border:1px solid var(--border);
                     color:var(--text); font-family:'Sora',sans-serif; font-size:var(--t-brod);
                     line-height:1.6; padding:12px; }
.skriv-input:focus    { outline:none; border-color:var(--accent); }
.skriv-input:disabled { color:var(--muted); cursor:not-allowed; }

.skriv-undertext   { display:flex; align-items:baseline; justify-content:space-between;
                     gap:12px; flex-wrap:wrap; margin-top:6px; min-height:18px; }
.skriv-count       { font-family:'JetBrains Mono',monospace; font-size:var(--t-meta);
                     color:var(--muted2); white-space:nowrap; }

/* ── Statusraden ──────────────────────────────────────────────
   Det finns ingen spara-knapp. Därför måste den här raden alltid
   säga sanningen om var texten finns: ett tyst misslyckat spar är
   den felklass som kostade fem dagars elevsvar i augusti 2026. */
.skriv-status         { font-size:var(--t-meta); line-height:1.5; flex:1; min-width:0; }
.skriv-status-vilar   { color:var(--muted2); }
.skriv-status-skriver { color:var(--muted2); }
.skriv-status-ok      { color:var(--correct); }
.skriv-status-notis   { color:var(--accent); }
.skriv-status-fel     { color:var(--wrong); font-weight:600; }
/* Spärrbeskedet är varnande, inte rött: inget har gått sönder. */
.skriv-status-stopp   { color:var(--warn); font-weight:600; }

/* ── Låst och lärarkommentar ──────────────────────────────────
   Kommentaren är formativ och syns medan häftet är öppet. Den
   låser inte svaret - bara poäng gör det. */
.skriv-last        { font-size:var(--t-liten); color:var(--muted); margin-top:10px;
                     padding:8px 10px; background:var(--surface2);
                     border-left:2px solid var(--border); }

.skriv-kommentar          { margin-top:14px; padding:10px 12px; background:var(--surface2);
                            border-left:2px solid var(--accent); }
.skriv-kommentar-rubrik   { font-family:'JetBrains Mono',monospace; font-size:var(--t-meta);
                            color:var(--accent); letter-spacing:1px;
                            text-transform:uppercase; margin-bottom:5px; }
.skriv-poang              { font-size:var(--t-brod); font-weight:700; color:var(--correct);
                            margin-bottom:6px; }
.skriv-kommentar-text     { font-size:var(--t-liten); line-height:1.6; white-space:pre-wrap; }
.skriv-kommentar-not      { font-size:var(--t-meta); color:var(--muted2); margin-top:6px;
                            font-style:italic; }

/* ── Knapparna ────────────────────────────────────────────────
   Inlämningen låg först i full bredd under textrutan. Där såg den
   ut som en "nästa fråga"-knapp, och det är lätt att trycka fel på
   något som avslutar hela uppgiften. Nu är den liten och ligger
   uppe vid räknaren, långt från skrivfältet. */
.skriv-lamna-in-btn { background:none; border:1px solid var(--accent); color:var(--accent);
                      font-family:'Sora',sans-serif; font-size:var(--t-liten); font-weight:600;
                      cursor:pointer; padding:6px 14px; white-space:nowrap; }
.skriv-lamna-in-btn:hover { background:var(--accent); color:var(--on-accent); }
.skriv-angra-btn    { background:none; border:1px solid var(--border); color:var(--muted);
                      font-family:'Sora',sans-serif; font-size:var(--t-liten); cursor:pointer;
                      padding:6px 14px; white-space:nowrap; }
.skriv-angra-btn:hover { color:var(--text); border-color:var(--muted); }
/* Dämpad med flit: att gå härifrån är inte det eleven ska lockas att
   göra, men det ska alltid gå. */
.skriv-avsluta-btn  { background:none; border:none; color:var(--muted2);
                      font-family:'Sora',sans-serif; font-size:var(--t-liten); cursor:pointer;
                      padding:6px 8px; text-decoration:underline;
                      text-underline-offset:3px; white-space:nowrap; }
.skriv-avsluta-btn:hover { color:var(--text); }

/* ── Inlämningsmodalen ────────────────────────────────────────
   Egen modal, inte confirm(): den ska kunna räkna upp vilka frågor
   som är tomma och säga att ångra finns. */
.skriv-modal          { display:none; position:fixed; inset:0; z-index:1000;
                        background:rgba(0,0,0,0.75); align-items:center;
                        justify-content:center; padding:20px; }
.skriv-modal.oppen    { display:flex; }
.skriv-modal-kort     { background:var(--surface); border:1px solid var(--accent);
                        padding:32px; max-width:420px; width:100%; text-align:center; }
.skriv-modal-etikett  { font-family:'JetBrains Mono',monospace; font-size:var(--t-meta);
                        color:var(--accent); letter-spacing:2px;
                        text-transform:uppercase; margin-bottom:12px; }
.skriv-modal-rubrik   { font-size:var(--t-h3); font-weight:700; margin-bottom:12px; }
.skriv-modal-text     { font-size:var(--t-liten); color:var(--muted); line-height:1.7;
                        margin-bottom:24px; white-space:pre-wrap; }
.skriv-modal-ja       { width:100%; padding:13px; background:var(--accent); border:none;
                        font-family:'Sora',sans-serif; font-size:var(--t-brod); font-weight:600;
                        color:var(--on-accent); cursor:pointer; }
.skriv-modal-nej      { width:100%; padding:11px; margin-top:8px; background:none;
                        border:1px solid var(--border); color:var(--muted);
                        font-family:'Sora',sans-serif; font-size:var(--t-liten); cursor:pointer; }
.skriv-modal-nej:hover { color:var(--text); border-color:var(--muted); }

@media (max-width: 620px) {
  .skriv-nav-knapp { width:32px; height:32px; font-size:var(--t-liten); }
  .skriv-input     { min-height:180px; font-size:var(--t-brod); }
  .skriv-fraga-bild { max-height:240px; }
  .skriv-topp      { align-items:flex-start; }
}