/* ═══════════════════════════════════════════════════════════════
   dokument.css – Thevin
   SJÄLVA DOKUMENTET: rubriker, brödtext, listor, tabeller, bilder,
   papperet i originalläget, och lärarens återkoppling.

   Delad av tre vyer, precis som dokument-rita.js: elevens sida,
   granskningen vid importen och lärarens vy över ett inlämnat
   dokument. Tre kopior hade betytt att samma dokument ser olika ut
   på de tre ställena, och att ett fel i en tabell lagas på ett
   ställe och står kvar på två.

   Här ligger INTE skrivrutorna (elev-dokument.css) och inte
   granskningens reglage (dokument-import.css). Det är vyernas egna
   delar.

   Läst mot "Thevin — designsystem.md" 2026-10-23:
   · inga nya färgvärden i thevin-läget, allt genom variablerna
   · border-radius 0 överallt
   · mellanrum i multiplar av 4
   · linjer, inte skuggor
   · ingen text under 12px
   Originalläget är ett medvetet undantag, se "papperet" nedan.
   ═══════════════════════════════════════════════════════════════ */

/* ── Sidan ────────────────────────────────────────────────────
   62ch är designsystemets radlängd för löpande text — i
   THEVIN-läget. I originalläget kommer bredden ur Word-filens egna
   marginaler, via den genererade klassen dokstil-papper. Utan
   :not() vann 62ch över den, och ett A4-dokument ritades 400px
   brett med andra radbrytningar än läraren skrivit. */
.dok-sida:not(.dok-papper) { max-width:62ch; }
.dok-sida > *:first-child  { margin-top:0; }

.dok-sida:not(.dok-papper) .dok-h  { font-weight:700; line-height:1.25; }
.dok-sida:not(.dok-papper) .dok-h1 { font-size:var(--t-h2); margin:0 0 8px; }
.dok-sida:not(.dok-papper) .dok-h2 { font-size:var(--t-h3); margin:32px 0 8px;
                     border-bottom:1px solid var(--border); padding-bottom:4px; }
.dok-sida:not(.dok-papper) .dok-h3 { font-size:var(--t-brod); margin:24px 0 4px;
                     color:var(--muted2); }
.dok-sida:not(.dok-papper) .dok-p  { font-size:var(--t-brod); line-height:1.6;
                     margin:0 0 12px; }
.dok-sida:not(.dok-papper) .dok-punkt { font-size:var(--t-brod); line-height:1.6;
                     margin-bottom:8px; }
.dok-lista         { margin:0 0 12px; padding-left:24px; }

/* En tabb i Word bar information i arbetsbladen: det är den som
   skiljer "Fläkt" från sin svarslucka. Den blir ett mellanrum, inte
   en tabbstopp — en riktig tabbstopp går inte att lita på när
   radlängden ändras på en telefon. */
.dok-tabb          { display:inline-block; width:12px; }

/* ── Tabeller ─────────────────────────────────────────────────
   I thevin-läget: inga lodräta linjer, rubrikrad i mono och
   versalt. Ramen runt är till för att en bred tabell ska gå att
   skrolla i stället för att spränga sidan på en telefon. */
.dok-tabell-ram    { overflow-x:auto; margin:0 0 16px; border:1px solid var(--border); }
.dok-tabell        { width:100%; border-collapse:collapse; }
.dok-sida:not(.dok-papper) .dok-tabell th {
                     font-family:'JetBrains Mono',monospace; font-size:var(--t-meta);
                     text-transform:uppercase; letter-spacing:1px; color:var(--muted);
                     text-align:left; font-weight:400; padding:8px 12px;
                     border-bottom:1px solid var(--border); white-space:nowrap; }
.dok-sida:not(.dok-papper) .dok-tabell td {
                     font-size:var(--t-liten); line-height:1.5; padding:8px 12px;
                     border-bottom:1px solid var(--border); vertical-align:top; }
.dok-sida:not(.dok-papper) .dok-tabell tr:last-child td { border-bottom:none; }

/* ── Bilder ───────────────────────────────────────────────────
   Taket är tilltaget men inte fritt: ett schema ska gå att läsa av
   utan att nästa lucka hamnar utanför skärmen. .stor tar bort taket
   för den som behöver se mer. Vit botten därför att ett schema
   nästan alltid är svart streck på genomskinligt. */
.dok-bild          { display:block; max-width:100%; max-height:420px; object-fit:contain;
                     margin:0 0 16px; cursor:zoom-in;
                     border:1px solid var(--border); background:#fff; }
.dok-bild.stor     { max-height:none; cursor:zoom-out; }

/* ── Markörer som bara läraren ser ────────────────────────────
   Tomrader, ignorerade rader och bilder som ännu inte laddats upp.
   De ritas bara när vyn ber om det (visaDolda i dokument-rita.js). */
.dok-tom           { font-family:'JetBrains Mono',monospace; font-size:var(--t-meta);
                     color:var(--muted); letter-spacing:1px; padding:2px 0 2px 8px;
                     border-left:1px dashed var(--border); margin-bottom:4px; }
.dok-ignorerad     { font-size:var(--t-liten); color:var(--muted);
                     text-decoration:line-through; margin-bottom:8px; }
.dok-bild-markor   { font-family:'JetBrains Mono',monospace; font-size:var(--t-meta);
                     color:var(--muted2); border:1px solid var(--border);
                     padding:8px 12px; margin:0 0 12px; }
.dok-markor        { display:inline-block; font-family:'JetBrains Mono',monospace;
                     font-size:var(--t-meta); text-transform:uppercase;
                     letter-spacing:1px; color:var(--muted); margin-left:8px; }

/* ── Lärarens återkoppling ────────────────────────────────────
   Återkopplingen är formativ och ska synas medan uppgiften är
   öppen. Vänsterkanten i bärnsten pekar ut den utan att fylla en
   yta — designsystemets markör för "titta här". */
.dok-last           { display:block; font-family:'JetBrains Mono',monospace;
                      font-size:var(--t-meta); color:var(--muted);
                      letter-spacing:1px; margin-top:4px; }

.dok-kommentar      { display:block; margin:8px 0 0; padding:8px 12px;
                      background:var(--surface2); border-left:3px solid var(--accent); }
.dok-kommentar-rubrik { display:block; font-family:'JetBrains Mono',monospace;
                      font-size:var(--t-meta); text-transform:uppercase;
                      letter-spacing:1px; color:var(--muted); margin-bottom:4px; }
.dok-kommentar-text { display:block; font-size:var(--t-liten); line-height:1.6;
                      white-space:pre-wrap; }
.dok-kommentar-not  { display:block; font-size:var(--t-meta); color:var(--muted2);
                      margin-top:4px; }
.dok-poang          { display:block; font-family:'JetBrains Mono',monospace;
                      font-size:var(--t-liten); color:var(--text); margin-bottom:4px; }

/* Helhetsbedömningen för hela dokumentet. Ligger sist på sidan och
   har ingen skrivruta — den är lärarens besked, inte en lucka. */
.dok-helhet         { margin:32px 0 0; padding:12px 16px;
                      border:1px solid var(--border); border-left:3px solid var(--accent);
                      background:var(--surface2); }
.dok-helhet-rubrik  { font-family:'JetBrains Mono',monospace; font-size:var(--t-meta);
                      text-transform:uppercase; letter-spacing:1px; color:var(--muted);
                      margin-bottom:8px; }
.dok-poang-helhet   { font-size:var(--t-h3); }

/* ── Domen på ett flervalssvar ────────────────────────────────
   Ordet bär betydelsen, färgen förstärker. Rätt och fel får aldrig
   skiljas på färg allena — det är designsystemets regel och den
   gäller särskilt här, där ett enda ord är hela beskedet. */
.dok-dom            { display:inline-block; font-family:'JetBrains Mono',monospace;
                      font-size:var(--t-meta); text-transform:uppercase;
                      letter-spacing:1px; padding:2px 8px; margin:4px 0 0 8px;
                      border:1px solid var(--border); }
.dok-dom.ratt       { color:var(--correct-text); border-color:var(--correct); }
.dok-dom.fel        { color:var(--wrong-text);   border-color:var(--wrong); }
.dok-papper .dok-dom.ratt { color:#136b40; border-color:#157a4c; }
.dok-papper .dok-dom.fel  { color:#9e241e; border-color:#cc3a33; }

/* ── Elevens svar i lärarens vy ───────────────────────────────
   Inte en skrivruta: läraren ska läsa, inte skriva i elevens text.
   Vänsterkanten skiljer svaret från dokumentets egen text så att
   det går att se med en blick vad eleven lagt till. Tomt svar
   säger det med ord — en tom ruta ser ut som ett fel. */
.dok-svar           { display:block; margin:4px 0 8px; padding:6px 10px;
                      border-left:3px solid var(--accent); background:var(--surface2);
                      font-size:var(--t-brod); line-height:1.6; white-space:pre-wrap; }
.dok-svar-kort      { display:inline-block; margin:0 4px; padding:2px 8px;
                      vertical-align:middle; }
.dok-svar-tomt      { color:var(--muted); font-style:italic; }

/* ── Originalläget: papperet ──────────────────────────────────
   Dokumentet ska se ut som lärarens Word-fil. Det betyder en vit
   sida med svart text oavsett tema, och Words egen textbredd —
   radbrytningarna är en del av formgivningen.

   AVSTEG FRÅN "EN STIL, FYRA TEMAN", och det är avsiktligt. Den
   regeln finns för Thevins egna vyer. Ett importerat dokument är
   inte Thevins formgivning utan lärarens, och att tona om den vore
   att göra precis det vi bad om att slippa. Samma avsteg som Google
   Classroom gör när en Word-fil blir ett Google-dokument: appen är
   mörk, dokumentet är vitt.

   Sidans ram, knappar och statusrad ligger kvar i temat. Det är
   bara papperet som är papper. */
.dok-papper        { background:#ffffff; color:#1a1a1a; margin:0 auto;
                     padding:48px 56px; border:1px solid var(--border); }

/* Webbläsarens egna marginaler och storlekar måste bort INNE i
   papperet, annars lägger sig h1 och p ovanpå Word-formatet. :where
   ger noll specificitet, så de genererade stilklasserna — som bara
   är en klass — vinner ändå. Med en vanlig selektor hade
   .dok-papper h1 slagit .dokstil-s2 och rubriken tappat sin
   storlek. */
:where(.dok-papper) :where(h1, h2, h3, p, ul, ol, li, table, td, th) {
  margin:0; padding:0; font:inherit; color:inherit; text-align:inherit;
  border:none; background:none; letter-spacing:inherit;
}
:where(.dok-papper) :where(ul, ol) { padding-left:28px; }
.dok-papper .dok-lista       { margin:0; list-style:disc; }
.dok-papper .dok-punkt-egen  { list-style:none; }
.dok-papper .dok-tabell-ram  { overflow-x:auto; border:none; margin:0 0 8px; }
.dok-papper .dok-tabell      { border-collapse:collapse; }
.dok-papper .dok-tomrad      { min-height:1em; }

/* Bilden ska ligga där Word hade den, inte spränga sidan. */
.dok-papper .dok-bild        { max-width:100%; max-height:none; border:none;
                               margin:8px 0; }

/* Lärarens ytor på papperet. Samma form som i temat, men i
   papperets färger — en mörk ruta nederst på en vit sida ser ut
   som ett fel. */
.dok-papper .dok-helhet        { background:#f4f4f0; border-color:#d6d6d0;
                                 border-left:3px solid var(--accent); }
.dok-papper .dok-helhet-rubrik { color:#55554f; }
.dok-papper .dok-last          { color:#55554f; }
.dok-papper .dok-kommentar     { background:#f4f4f0; border-left:3px solid var(--accent); }
.dok-papper .dok-kommentar-rubrik { color:#55554f; }
.dok-papper .dok-poang         { color:#1a1a1a; }
.dok-papper .dok-svar          { background:#f4f4f0; color:#1a1a1a; font:inherit; }
.dok-papper .dok-svar-tomt     { color:#55554f; font-style:italic; }

@media (max-width: 700px) {
  /* Words textbredd är bredare än en telefon. Papperet får krympa,
     men formatet inuti står kvar — det är det som är originalet. */
  .dok-papper      { padding:20px 16px; max-width:none; }
}

@media (max-width: 600px) {
  .dok-sida:not(.dok-papper) { max-width:none; }
}