/* Statistik — egen CSS sa att vyerna kan byggas utan att krocka i bas.css */

/* Seriefarger pa ett stalle: kvant = accent, verbal = ratt-gron.
   Bada ar validerade mot ljus och mork yta; identitet bars aldrig av
   fargen ensam — legend och direktetiketter finns alltid. */
.statistikvy {
  --serie-kvant: var(--accent);
  --serie-verbal: var(--ratt);
}

.statistikvy section { margin-top: 8px; }

/* ---------- din niva just nu ---------- */

.nivakort {
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
  padding: 16px;
  max-width: 720px;
}
.nivakort > p { margin: 8px 0 0; max-width: 60ch; }
.nivakort .knapp { margin-top: 10px; }
.nivakort .varningsruta { margin: 10px 0 0; }

.niva-huvud { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.niva-varde {
  font-size: 2.4rem; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Status ar poangen med funktionen: siffrans trovardighet ska synas.
   Farg bar aldrig betydelsen ensam — orden star alltid i market. */
.nivamarke {
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase;
  white-space: nowrap;
}
.nivamarke.uppmatt { color: var(--ratt); }
.nivamarke.uppskattning { color: var(--accent); }
.nivamarke.tunt { color: var(--dampad); }

.nivadelar {
  list-style: none;
  margin: 12px 0 0; padding: 0;
  display: grid; gap: 6px;
}
.nivadel {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--ram);
  padding-top: 6px;
  font-size: .95rem;
}
.nivadel b { min-width: 92px; }
.nivadel-varde { font-variant-numeric: tabular-nums; font-weight: 600; }

.niva-placering { font-weight: 600; }
.niva-ingen { font-weight: 600; max-width: 60ch; }

/* ---------- diagramkort ---------- */

.diagramkort {
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
  padding: 12px 12px 8px;
  max-width: 720px;
  overflow: hidden; /* aldrig vagrat spill ur kortet */
}
.diagramkort.tomt { padding: 20px; max-width: none; }
.diagramkort.tomt h2 { margin-top: 0; }
.diagramkort.tomt .knapp { margin-top: 8px; }

.diagram {
  display: block;
  width: 100%;
  height: auto;
  color: var(--dampad); /* currentColor for axlar och stodlinjer */
}

.diagram-stodlinje { stroke: currentColor; stroke-opacity: .18; stroke-width: 1; }
.diagram-axel { fill: currentColor; font-size: 12px; }

/* linjeserier */
.serie-linje { fill: none; stroke: var(--seriefarg, currentColor); stroke-width: 2; stroke-linejoin: round; }
.punkt { fill: var(--seriefarg, currentColor); stroke: var(--yta); stroke-width: 2; }
.serie-etikett { fill: var(--text); font-size: 12px; font-weight: 600; }
.serie-kvant { --seriefarg: var(--serie-kvant, var(--accent)); }
.serie-verbal { --seriefarg: var(--serie-verbal, var(--ratt)); }

/* staplar */
.stapel { fill: var(--accent); }
.stapelgrupp.svagast .stapel { fill: var(--fel); }
.stapel-varde { fill: var(--text); font-size: 11px; font-variant-numeric: tabular-nums; }
.stapelgrupp.svagast .stapel-namn { fill: var(--fel); font-weight: 700; }

/* legend */
.diagramlegend {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  padding: 2px 4px 8px; font-size: .85rem; color: var(--dampad);
}
.legendpost { display: inline-flex; align-items: center; gap: 6px; }
.legendprick {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--seriefarg, currentColor);
}

/* ---------- statrutor (aktivitet) ---------- */

.statrutor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-width: 720px;
}
.statruta {
  display: grid; gap: 2px; align-content: start;
  background: var(--yta); border: 1px solid var(--ram);
  border-radius: var(--radie); padding: 12px 14px;
}
.statvarde {
  font-size: 1.6rem; font-weight: 650;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.statetikett { color: var(--dampad); font-size: .82rem; }
.statnot { font-size: .75rem; }

/* dagrutnat: senaste 28 dagarna */
.dagrutnat {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 4px;
  max-width: 420px;
  margin-top: 12px;
}
.dagruta {
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--ram);
}
.dagruta.aktiv { background: var(--accent); }

/* ---------- passtabell ---------- */

/* Tid som ligger over riktmarket markeras med farg, inte med en ikon
   eller ett utropstecken: det ar en upplysning om tempo, och den som
   behover mer tid ska inte bli tjatad pa. */
#genpass-tempotabell td.over { color: var(--fel); font-weight: 600; }

.tabellskal { overflow-x: auto; max-width: 720px; margin-top: 10px; }
.passtabell {
  border-collapse: collapse;
  width: 100%;
  min-width: 420px;
  font-size: .9rem;
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
}
.passtabell th, .passtabell td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--ram);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.passtabell th {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--dampad); font-weight: 600;
}
.passtabell tr:last-child td { border-bottom: none; }

/* ---------- sakerhetskopia ---------- */

.kopiaknappar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ---------- storre skarmar ---------- */

@media (min-width: 720px) {
  .statrutor { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- traffsakerhet per uppgiftstyp ---------- */

.typlista {
  list-style: none;
  margin: var(--luft-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--luft-2);
}
.typrad {
  /* Hela raden ar traffytan, inte bara textraden pa 25 px — se
     .typrad-namn::after nedan. */
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px var(--luft-3);
}
/* namn och siffra pa forsta raden, mataren pa hela bredden under. Pa
   390 px finns inte plats for namn, stapel och siffra bredvid varandra
   utan att namnet kapas. Placeringen ar explicit sa att mataren, som
   spanner bada spalterna, inte knuffar ner siffran till en egen rad. */
.typrad-namn { min-width: 0; grid-row: 1; grid-column: 1; }
.typrad-siffra { white-space: nowrap; grid-row: 1; grid-column: 2; }
.typrad-matare {
  grid-row: 2;
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 3px;
  /* --ram ligger pa 1,2:1 mot bakgrunden och syntes knappt. Grafik som bar
     betydelse behover 3:1. */
  background: color-mix(in srgb, var(--text) 22%, var(--bg));
  overflow: hidden;
}
.typrad-fyllning {
  display: block;
  height: 100%;
  /* En nollpunkt maste synas: 0 % ratt ar listans viktigaste rad, och utan
     minsta bredd blev just den helt utan grafik. */
  min-width: 3px;
  border-radius: 3px;
  background: var(--accent);
}

/* ---------- malet till nasta provtillfalle ---------- */

.niva-mal {
  margin-top: var(--luft-3);
  padding-top: var(--luft-3);
  border-top: 1px solid var(--ram);
  display: grid;
  gap: var(--luft-2);
}
.niva-mal p { margin: 0; }
#niva-mal-spann { font-size: 1.02rem; }
.niva-mal-utfall { color: var(--dampad); }
.niva-mal-utfall.ratt { color: var(--ratt); font-weight: 600; }


/* Namnet spanner ut sin traffyta over hela raden. Lanken ar fortfarande
   bara namnet for skarmlasaren; det ar ytan som vaxer. */
.typrad-namn::after {
  content: '';
  position: absolute;
  inset: -6px 0;
}