/* =====================================================================
   SIVUKAS · SIVUSTORAPORTIN OMA ILME (raportti/)
   =====================================================================
   TIETOINEN POIKKEUS sapluunasta (kirjattu CLAUDE.md:hen): raportti
   näyttää työkalulta (PSI-henkinen), ei markkinointisivulta, jotta se
   erottuu selvästi itse sivustosta. Ei riippuvuuksia, ei JS:ää.
   Omat tokenit alla — liikennevalovärit Googlen PSI-asteikon mukaan.
   ===================================================================== */

:root {
  /* Liikennevalot (PSI-asteikko: 90+ vihreä, 50–89 oranssi, alle 50 punainen) */
  --ok:       #0d652d;  /* vihreä — teksti valkoisella 7,2:1, .valo--ok-pinnalla 6,34:1 (WCAG-korjaus 30.7.2026, oli #188038 = 4,42:1, alle AA:n 4,5:1) */
  --ok-pinta: #e6f4ea;
  --varo:       #b45309;  /* oranssi tekstinä valkoisella (AA) */
  --varo-pinta: #fef7e0;
  --viat:       #d93025;
  --viat-pinta: #fce8e6;
  --odottaa:       #5f6368;  /* neutraali: "tulossa"-osiot */
  --odottaa-pinta: #f1f3f4;

  --musta:   #202124;
  --himmea:  #5f6368;
  --tausta:  #f8f9fa;
  --pinta:   #ffffff;
  --reuna:   #dadce0;
  --fontti:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:    ui-monospace, "SF Mono", Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--fontti);
  color: var(--musta);
  background: var(--tausta);
  line-height: 1.6;
  font-size: 1.1875rem;   /* 19px — sama kuin sivustolla */
}

/* --- Yläpalkki: kapea työkalumainen --- */
.r-ylapalkki {
  background: var(--pinta);
  border-bottom: 1px solid var(--reuna);
  padding: .8rem 0;
}
.r-ylapalkki .r-rajaus { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.r-tunnus { font-weight: 700; letter-spacing: .02em; display: inline-flex; align-items: center; gap: .6rem; }
.r-tunnus span { color: var(--himmea); font-weight: 400; }
/* Sivukas-maskottilogo: sama inline-SVG kuin sivustolla. SVG:n värit tulevat
   var(--vari-*)-tokeneista — määritellään ne tässä logolle, koska raportti
   ei lataa teema.css:ää (muu raportti käyttää omia tokeneita). */
.r-tunnus svg, .r-loppulogo svg {
  --vari-korostus: #0e7c66;
  --vari-korostus-2: #ef8b4e;
  --vari-korostus-hover: #0a5f4e;
  --vari-tausta: #fffaf4;
  --vari-tumma: #16463c;
}
.r-tunnus svg { width: 38px; height: auto; flex: none; }

/* Loppulogo: keskikokoinen maskotti raportin päätteeksi (linkki etusivulle) */
.r-loppulogo { text-align: center; margin: 2.75rem 0 .75rem; }
.r-loppulogo svg { width: 120px; height: auto; }
.r-ylapalkki a { color: #1a73e8; text-decoration: none; }
.r-ylapalkki a:hover, .r-alaviite a:hover { text-decoration: underline; }

.r-rajaus { max-width: 880px; margin: 0 auto; padding: 0 1.25rem; }

main { padding: 2rem 0 3rem; }

/* --- Otsikot ja meta --- */
h1 { font-size: 2rem; line-height: 1.25; margin-bottom: .35rem; }
.r-meta { color: var(--himmea); font-size: 1.0625rem; margin-bottom: 1.5rem; }
.r-meta strong { color: var(--musta); }

h2 { font-size: 1.4375rem; margin: 0 0 1rem; }

h1, h2 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* --- Kortti: jokainen raportin osio --- */
.r-osio {
  background: var(--pinta);
  border: 1px solid var(--reuna);
  border-radius: 12px;
  padding: 1.5rem 1.5rem 1.6rem;
  margin-bottom: 1.25rem;
}
.r-osio > p { color: var(--himmea); max-width: 68ch; }
.r-osio > p + p { margin-top: .6rem; }

/* --- Liikennevalomerkki (chip) --- */
.valo {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: 1rem; font-weight: 600;
  padding: .15rem .65rem; border-radius: 999px;
  white-space: nowrap;
}
.valo::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: currentColor; }
.valo--ok      { color: var(--ok);      background: var(--ok-pinta); }
.valo--varo    { color: var(--varo);    background: var(--varo-pinta); }
.valo--viat    { color: var(--viat);    background: var(--viat-pinta); }
.valo--odottaa { color: var(--odottaa); background: var(--odottaa-pinta); }

/* --- Yleiskatsauksen rivit --- */
.r-rivit { list-style: none; }
.r-rivit li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap;
  padding: .65rem 0; border-bottom: 1px solid var(--reuna);
}
.r-rivit li:last-child { border-bottom: 0; }
.r-rivit .selite { color: var(--himmea); font-size: 1.0625rem; flex-basis: 100%; margin-top: -.35rem; }

/* --- PSI-tyyliset mittariringit (pelkkää CSS:ää: conic-gradient + mask) --- */
.mittarit {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  text-align: center;
  margin: .5rem 0 1rem;
}
.rinki {
  --p: 100;              /* pisteet 0–100; aseta inline-tyylillä */
  width: 88px; height: 88px; margin: 0 auto .5rem;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.75rem; font-weight: 700; color: var(--ok);
  background:
    radial-gradient(closest-side, var(--pinta) 79%, transparent 80% 100%),
    conic-gradient(var(--ok) calc(var(--p) * 1%), var(--ok-pinta) 0);
}
.mittarit figcaption { font-size: 1.0625rem; color: var(--musta); }

/* --- Mittaritaulukko --- */
table { width: 100%; border-collapse: collapse; font-size: 1.0625rem; }
caption { text-align: left; color: var(--himmea); font-size: 1rem; margin-bottom: .5rem; }
th, td { text-align: left; padding: .6rem .75rem .6rem 0; border-bottom: 1px solid var(--reuna); vertical-align: top; }
th { font-weight: 600; }
tbody th { font-weight: 400; }
td.arvo { font-family: var(--mono); white-space: nowrap; }
tr:last-child th, tr:last-child td { border-bottom: 0; }

/* --- Toimenpidelistat --- */
.r-lista { list-style: none; }
.r-lista li { padding: .35rem 0 .35rem 1.7rem; position: relative; }
.r-lista li::before { content: "✔"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.r-lista--seuraavaksi li::before { content: "→"; color: var(--odottaa); }

/* --- Alaviite --- */
.r-alaviite { color: var(--himmea); font-size: 1rem; }
/* Alleviivaus: linkki erottuu ilman väriä (WCAG-korjaus 30.7.2026 —
   sininen linkki himmeällä tekstillä oli 1,34:1, alle vaaditun 3,0:1).
   Väri tummennettu 31.7.2026: linkin oma kontrasti taustaan (--tausta
   #f8f9fa) oli 4,27:1, alle vaaditun 4,5:1 — #0b57d0 antaa 6,06:1. */
.r-alaviite a { color: #0b57d0; text-decoration: underline; }

/* Fokusrengas näppäimistölle */
a:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }

@media print { .r-ylapalkki a { display: none; } body { background: #fff; } }