/* ═══════════════════════════════════════════════════════════════
   elev-dokument.css – Thevin
   Elevens del av dokumentvyn: ramen runt sidan och SKRIVRUTORNA.

   Själva dokumentet — rubriker, brödtext, tabeller, bilder,
   papperet och lärarens återkoppling — ligger i dokument.css, som
   delas med granskningen och lärarens vy. Här ligger bara det som
   är elevens: topprad, statusrad, fält att skriva i.

   Egen fil av samma skäl som elev-dokument.js är en egen fil:
   skrivhäftets regler ska inte behöva tänka på den här.

   Läst mot "Thevin — designsystem.md" 2026-10-23:
   · inga nya färgvärden i temat, allt genom variablerna
   · border-radius 0 överallt
   · bärnsten är handling, grönt och rött är rätt och fel
   · fälthöjd minst 44px i elevvyn
   · varje komponent har fokusläge

   Modalen ligger INTE här. Den återanvänder .skriv-modal ur
   elev-skriv.css med flit: en modalstil i elevvyn, inte två.
   ═══════════════════════════════════════════════════════════════ */

/* ── Skärmens bredd ───────────────────────────────────────────
   .screen i elev.css är 480px bred. Det är rätt för quizkortet,
   där en fråga och fyra alternativ ska läsas på avstånd, men ett
   A4-dokument ritades då 404px brett med helt andra radbrytningar
   än läraren skrivit — och radbrytningarna är en del av
   formgivningen vi lovat behålla.

   Regeln pekar på id:t för skärmen som den här filen äger. Det är
   en koppling till elev.html, och den är medveten: alternativet
   vore att ändra .screen för alla vyer. */
#screen-dokument       { max-width:900px; }
#screen-dokument .card { padding:16px; }

/* ── Ramen runt dokumentet ──────────────────────────────────── */
.dok-topp          { display:flex; align-items:center; justify-content:space-between;
                     gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.dok-topp-hoger    { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* .btn i global.css har en egen display, som slår ut webbläsarens
   [hidden]{display:none}. Utan den här raden stod "Ångra inlämning"
   kvar på skärmen innan eleven lämnat in något — en knapp som inte
   gör något är värre än ingen knapp. */
.dok-topp-hoger .btn[hidden] { display:none; }
.dok-titel         { font-size:var(--t-h3); font-weight:600; line-height:1.25; }
.dok-raknare       { font-family:'JetBrains Mono',monospace; font-size:var(--t-meta);
                     color:var(--muted2); letter-spacing:1px; 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 kostar elevsvar. */
.dok-status-rad    { min-height:20px; margin-bottom:16px;
                     border-bottom:1px solid var(--border); padding-bottom:8px; }
.dok-status        { font-size:var(--t-meta); font-family:'JetBrains Mono',monospace; }
.dok-status-vilar  { color:var(--muted); }
.dok-status-skriver{ color:var(--muted2); }
.dok-status-ok     { color:var(--correct-text); }
.dok-status-notis  { color:var(--accent-text); }
.dok-status-stopp  { color:var(--accent-text); }
.dok-status-fel    { color:var(--wrong-text); }

/* ── Fälten ───────────────────────────────────────────────────
   Ramen är inline så att en kort lucka kan stå inne i en rad
   ("Fläkt ___"), och blir block när fältet är en hög ruta eller ett
   flerval. */
.dok-falt-ram       { display:inline; }
.dok-falt-block     { display:block; margin:0 0 16px; }

.dok-falt           { 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:8px 12px;
                      box-sizing:border-box; }
.dok-falt:focus     { outline:none; border-color:var(--accent); }
.dok-falt:disabled  { color:var(--muted); cursor:not-allowed; background:var(--surface); }

/* Kort fält. min-height 44px är elevvyns golv ur designsystemet.
   Bredden är tilltagen men krymper på en telefon. */
.dok-falt-kort      { display:inline-block; width:14ch; max-width:100%;
                      min-height:44px; vertical-align:middle; margin:0 4px; }

/* Hög ruta. Höjden kommer ur rows, som importen satt ur antalet
   understrecksrader eller tomrader i Word-filen. */
.dok-falt-text      { display:block; width:100%; min-height:44px; resize:vertical;
                      margin:4px 0 0; }

.dok-falt-saknas    { font-size:var(--t-liten); color:var(--wrong-text);
                      border:1px solid var(--wrong); padding:2px 8px; }

/* ── Flerval ──────────────────────────────────────────────────
   Hela raden klickbar, minst 56px hög, bokstaven i mono till
   vänster. Valt alternativ får TVÅ signaler: tjock vänsterkant och
   fylld bokstavsruta. Aldrig färg ensam — det är regeln i
   designsystemet, och den gäller särskilt här. */
.dok-alt-grupp      { display:block; margin:8px 0 0; }
/* color sätts uttryckligen: global.css har `label { color:var(--muted2) }`,
   och eftersom alternativraden ÄR en label blev svarstexten sekundärfärgad
   — läsbar, men inte brödtext, och ett svarsalternativ är brödtext.
   Uppmätt i studiotemat: 158,196,174 i stället för 232,246,238. */
.dok-alt            { display:flex; align-items:center; gap:12px; min-height:56px;
                      padding:8px 12px; cursor:pointer; color:var(--text);
                      border:1px solid var(--border); border-left:4px solid transparent;
                      margin-bottom:4px; background:var(--surface2); }
.dok-alt:hover      { border-color:var(--muted); }
.dok-alt:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
.dok-alt.vald       { border-left-color:var(--accent); }

/* Radion bär semantiken — piltangenter och skärmläsare kommer
   gratis — men ritas inte. Bokstavsrutan är det synliga valet.
   Den får inte display:none: då tappas tangentbordsfokus. */
.dok-alt-radio      { position:absolute; opacity:0; width:1px; height:1px; }
.dok-alt-bokstav    { flex-shrink:0; width:32px; height:32px; display:flex;
                      align-items:center; justify-content:center;
                      font-family:'JetBrains Mono',monospace; font-size:var(--t-liten);
                      border:1px solid var(--border); color:var(--muted2);
                      background:var(--surface); }
.dok-alt.vald .dok-alt-bokstav { background:var(--accent); border-color:var(--accent);
                                 color:var(--on-accent); }
.dok-alt-text       { font-size:var(--t-brod); line-height:1.5; color:var(--text); }
.dok-alt input:disabled ~ .dok-alt-text { color:var(--muted); }

/* ── Fälten på papperet ───────────────────────────────────────
   Luckorna ärver dokumentets typsnitt så att de ser ut att höra
   till texten, men behåller en synlig ram: eleven måste kunna se
   VAR hen ska skriva utan att leta. Fokusramen är bärnsten, som
   alla andra fält i Thevin — det är ett reglage, inte dokumenttext.
   Färgerna är papperets och inte temats, av samma skäl som
   papperet självt. */
.dok-papper .dok-falt        { font:inherit; color:#1a1a1a; background:#fbfbf9;
                               border:1px solid #9a9a93; }
.dok-papper .dok-falt:focus  { border-color:var(--accent); outline:2px solid var(--accent);
                               outline-offset:-2px; }
.dok-papper .dok-falt:disabled { background:#f0f0ec; color:#55554f; }
.dok-papper .dok-falt-kort   { min-height:32px; padding:4px 8px; }
.dok-papper .dok-falt-text   { min-height:32px; padding:6px 8px; }
.dok-papper .dok-falt-saknas { color:#9e241e; border-color:#9e241e; }

.dok-papper .dok-alt         { background:#fbfbf9; border:1px solid #9a9a93;
                               border-left:4px solid transparent; color:#1a1a1a;
                               min-height:44px; }
.dok-papper .dok-alt.vald    { border-left-color:var(--accent); }
.dok-papper .dok-alt-bokstav { background:#ffffff; border-color:#9a9a93; color:#55554f; }
.dok-papper .dok-alt.vald .dok-alt-bokstav { background:var(--accent);
                               border-color:var(--accent); color:var(--on-accent); }
.dok-papper .dok-alt-text    { color:#1a1a1a; font:inherit; }

/* ── Telefon ──────────────────────────────────────────────────
   Knappraden i toppen bryter ner till egen rad. Ett kort fält får
   hela bredden: 14ch inne i en rad fungerar på en laptop men
   trängs ihop till tre tecken på en telefon. */
@media (max-width: 600px) {
  .dok-topp        { flex-direction:column; align-items:flex-start; }
  .dok-falt-kort   { width:100%; margin:4px 0; }
}

/* ── Det fria läget ───────────────────────────────────────────
   Hela dokumentet är skrivbart. Ingen ruta ritas runt texten: sidan
   ska se ut som dokumentet läraren delade ut, inte som ett formulär.
   Det som visar att något går att skriva i är markören och en svag
   ton när man för musen över — och den tydliga kanten när man står
   i rutan. 2026-10-24. */
.dok-fri .dokfri-ruta        { cursor:text; outline:none; min-height:1.2em;
                               transition:background-color 0.12s; }
.dok-fri .dokfri-ruta:hover  { background:var(--accent-dim); }
.dok-fri .dokfri-ruta:focus  { background:var(--accent-dim);
                               box-shadow:inset 0 -2px 0 0 var(--accent); }

/* På papperet är bakgrunden vit och bärnstenstonen syns inte. Där får
   kanten bära det i stället. */
.dok-fri.dok-papper .dokfri-ruta:hover { background:rgba(0,0,0,0.035); }
.dok-fri.dok-papper .dokfri-ruta:focus { background:rgba(0,0,0,0.05);
                                         box-shadow:inset 0 -2px 0 0 #9e5d08; }

/* Inlämnat: texten står kvar men går inte att röra. Ingen markör och
   ingen ton — annars ser sidan ut att vara skrivbar fast den inte är
   det, och det är värre än att den är låst. */
.dok-fri-last .dokfri-ruta,
.dok-fri-last .dokfri-ruta:hover { cursor:default; background:none; box-shadow:none; }

/* En tomrad i det fria läget är en rad eleven ska kunna klicka i.
   Utan en höjd är den noll pixlar hög och omöjlig att träffa. */
.dok-fri .dok-tomrad         { min-height:1.6em; }