/* ============================================================
   AKT 4 — Arkivet
   Mappar per klass och elev, klassöversikten och en hel bunt
   på en gång. Egen fil för att akt.css redan är full.
   ============================================================ */

.ark{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:1px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--line);
  overflow:hidden;
}

@media (max-width:860px){
  .ark{grid-template-columns:1fr}
}

.ark-panel{
  background:var(--canvas-2);
  padding:22px;
  min-width:0;
}

.ark-etikett{
  display:block;
  margin-bottom:16px;
  font-family:var(--mono);
  font-size:.57rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
}

/* ---------- Mappträdet ---------- */

.ark-trad{
  margin:0;
  padding:0;
  list-style:none;
  font-family:var(--mono);
  font-size:.78rem;
  line-height:1.5;
}

.ark-trad li{
  display:flex;
  align-items:baseline;
  gap:9px;
  padding:6px 0;
  color:var(--text-secondary);
  border-bottom:1px solid var(--line-soft);
}

.ark-trad li:last-child{border-bottom:0}

/* Indraget visar att eleven ligger i klassen, och rättningen i eleven.
   Mappar i mappar är hela poängen: en klass är inte en lista. */
.ark-trad .niv2{padding-left:20px}
.ark-trad .niv3{padding-left:40px}

.ark-trad .ark-namn{color:var(--text-primary)}
.ark-trad .niv3 .ark-namn{color:var(--text-secondary);font-weight:400}

.ark-ikon{flex:none;opacity:.75}

.ark-antal{
  margin-left:auto;
  flex:none;
  font-size:.62rem;
  letter-spacing:.1em;
  color:var(--text-dim);
}

/* ---------- Klassen som helhet ----------
   Staplarna och listorna speglar det programmet faktiskt visar när en bunt
   är klar: fördelningen av rekommendationer, kriterierna klassen fastnar på
   och de formkrav som saknas. */

.ark-rubrik{
  margin:22px 0 9px;
  font-family:var(--mono);
  font-size:.57rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-dim);
}

.kl-staplar{margin:0;padding:0;list-style:none;display:grid;gap:7px}

.kl-stapel{
  display:flex;
  align-items:center;
  gap:11px;
}

.kl-betyg{
  flex:none;
  width:16px;
  font-size:.76rem;
  font-weight:700;
  color:var(--text-primary);
}

.kl-bar{
  height:9px;
  min-width:6px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--accent),rgba(255,68,56,.42));
}

.kl-antal{flex:none;font-size:.7rem;color:var(--text-dim)}

.kl-lista{margin:0;padding:0;list-style:none}

.kl-lista li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:7px 0;
  font-size:.86rem;
  border-bottom:1px solid var(--line-soft);
}

.kl-lista li:last-child{border-bottom:0}
.kl-namn{color:var(--text-secondary)}
.kl-siffra{flex:none;font-size:.72rem;color:var(--text-dim)}

/* ---------- Bunten ---------- */

.bunt{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;
  margin-top:1px;
  border:1px solid var(--line);
  border-top:0;
  border-radius:0 0 4px 4px;
  background:var(--line);
  overflow:hidden;
}

.bunt-steg{
  padding:22px;
  background:var(--canvas-2);
}

.bunt-n{
  display:block;
  margin-bottom:10px;
  font-family:var(--mono);
  font-size:.57rem;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--accent);
}

.bunt-steg h3{
  margin:0 0 8px;
  font-family:var(--body);
  font-size:.97rem;
  font-weight:600;
  line-height:1.35;
  color:var(--text-primary);
}

.bunt-steg p{margin:0;font-size:.86rem;line-height:1.65;color:var(--text-secondary)}

.bunt-fil{
  display:block;
  margin-top:10px;
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--ink);
  word-break:break-all;
}

/* ---------- Insikten ----------
   Sammanräkningens hela poäng. Att tolv av tjugo stannar på samma kriterium
   är inte tolv slarviga elever, det är ett moment som inte gått fram - och
   det syns innan läraren hunnit skriva en enda kommentar. Rutan är därför
   markerad, inte ännu ett stycke brödtext. */

.kl-insikt{
  margin-top:22px;
  padding:16px 17px;
  border:1px solid rgba(255,68,56,.34);
  border-left-width:3px;
  border-radius:3px;
  background:var(--accent-muted);
}

.kl-insikt-tag{
  display:block;
  margin-bottom:9px;
  font-size:.57rem;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--accent);
}

.kl-insikt p{
  margin:0;
  font-size:.88rem;
  line-height:1.65;
  color:var(--text-secondary);
}

.kl-insikt strong{color:var(--text-primary);font-weight:600}

/* ---------- Vad du kan göra med mapparna ---------- */

.ark-punkter{
  margin:0;
  padding:0;
  list-style:none;
}

.ark-punkter li{
  padding:11px 0;
  font-size:.87rem;
  line-height:1.6;
  color:var(--text-secondary);
  border-bottom:1px solid var(--line-soft);
}

.ark-punkter li:first-child{padding-top:0}
.ark-punkter li:last-child{padding-bottom:0;border-bottom:0}
.ark-punkter strong{color:var(--text-primary);font-weight:600}

/* ---------- Menyn med sju ord ----------
   "Klassen" blev en egen akt och därmed ett sjunde ord i menyn. Mellan cirka
   720 och 880 px - en liten bärbar, eller ett fönster som inte är maximerat -
   räckte raden inte till, och menyn bröt till två rader ovanpå innehållet.
   Under 720 göms länkarna redan (style.css), så bandet däremellan är det enda
   som behöver stramas åt: tätare mellanrum och en aning mindre text. */

@media (max-width:920px) and (min-width:721px){
  .nav-links{gap:11px}
  .nav-links a{font-size:.79rem}
}

/* ---------- De nio kategorierna ----------
   Uppräkningen i artikel 9, satt som en lista i stället för en mening. En
   lärare som undrar om just hens elevers uppgifter är med ska kunna läsa av
   det på en sekund, inte leta i löptext. */

.art9{
  margin:12px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:2px 16px;
}

.art9 li{
  position:relative;
  padding:3px 0 3px 15px;
  font-size:.83rem;
  line-height:1.5;
  color:var(--text-secondary);
}

.art9 li::before{
  content:"×";
  position:absolute;
  left:0;
  top:3px;
  color:var(--accent);
  font-size:.8rem;
}