/* ============================================================
   RUUMA — ideataulu
   Paletti on sama kuin kaluston Ruumassa, samoilla muuttujanimilla:
   sinikopiopohja, tungsten 3200K korostus, päivänvalo 5600K.

   Tiedosto on polussa /tyyli/, koska _middleware.js päästää juuri sen
   polun läpi ilman istuntoa. Se on tarkoituksellista: kirjautumissivu
   tarvitsee saman ulkoasun kuin muu sovellus, eikä tyylitiedostossa ole
   mitään salattavaa. Sisältö ei kulje koskaan tämän polun kautta.

   Fontteja ei ladata mistään. Sivu on kirjautumisen takana eikä siitä saa
   lähteä yhteyksiä ulos — järjestelmän omat kirjasimet riittävät.
   ============================================================ */

:root{
  /* --- pinnat (tumma: sinikopio) --- */
  --bg:#08111B; --bg-2:#050B12;
  --surface:#0D1A28; --surface-2:#132437; --surface-3:#1A3049;
  --line:#1E3550; --line-soft:#152740; --line-hair:rgba(127,196,245,.09);
  /* --- teksti --- */
  --text:#E4EDF6; --text-dim:#94A9C0; --text-faint:#61798F;
  /* --- valon värit --- */
  --tungsten:#FFB067; --tungsten-ink:#0A1420; --tungsten-soft:rgba(255,176,103,.14);
  --daylight:#7FC4F5; --daylight-soft:rgba(127,196,245,.12);
  /* --- tila --- */
  --ok:#42C695; --ok-soft:rgba(66,198,149,.14);
  --busy:#7B95FF; --busy-soft:rgba(123,149,255,.15);
  --warn:#F2B23E; --warn-soft:rgba(242,178,62,.15);
  --bad:#F26A63; --bad-soft:rgba(242,106,99,.15);
  --shadow:0 18px 44px -22px rgba(0,0,0,.85);
  --radius:3px; --radius-lg:6px;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#E7ECF2; --bg-2:#DDE4EC;
    --surface:#F7F9FC; --surface-2:#FFFFFF; --surface-3:#EDF2F8;
    --line:#BDCBDB; --line-soft:#D6E0EA; --line-hair:rgba(30,80,130,.11);
    --text:#0E1D2C; --text-dim:#4B6178; --text-faint:#7A8FA5;
    --tungsten:#A75A0C; --tungsten-ink:#FFFFFF; --tungsten-soft:rgba(167,90,12,.11);
    --daylight:#1B6EA8; --daylight-soft:rgba(27,110,168,.10);
    --ok:#10795A; --ok-soft:rgba(16,121,90,.12);
    --busy:#3A55C9; --busy-soft:rgba(58,85,201,.12);
    --warn:#8A5D00; --warn-soft:rgba(138,93,0,.14);
    --bad:#B0302A; --bad-soft:rgba(176,48,42,.12);
    --shadow:0 16px 38px -24px rgba(20,45,75,.45);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#E7ECF2; --bg-2:#DDE4EC;
  --surface:#F7F9FC; --surface-2:#FFFFFF; --surface-3:#EDF2F8;
  --line:#BDCBDB; --line-soft:#D6E0EA; --line-hair:rgba(30,80,130,.11);
  --text:#0E1D2C; --text-dim:#4B6178; --text-faint:#7A8FA5;
  --tungsten:#A75A0C; --tungsten-ink:#FFFFFF; --tungsten-soft:rgba(167,90,12,.11);
  --daylight:#1B6EA8; --daylight-soft:rgba(27,110,168,.10);
  --ok:#10795A; --ok-soft:rgba(16,121,90,.12);
  --busy:#3A55C9; --busy-soft:rgba(58,85,201,.12);
  --warn:#8A5D00; --warn-soft:rgba(138,93,0,.14);
  --bad:#B0302A; --bad-soft:rgba(176,48,42,.12);
  --shadow:0 16px 38px -24px rgba(20,45,75,.45);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;padding:0}
:focus-visible{outline:2px solid var(--tungsten);outline-offset:2px;border-radius:2px}
::selection{background:var(--tungsten-soft);color:var(--text)}
.lbl{
  font-weight:600; text-transform:uppercase; letter-spacing:.09em;
  font-size:11.5px; color:var(--text-faint);
}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.piilossa{display:none !important}

/* ---------- yläpalkki ---------- */
.palkki{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:8px 16px; background:var(--bg-2); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40;
}
.palkki .brand{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12.5px;color:var(--text-dim)}
.palkki .brand i{font-style:normal;color:var(--tungsten)}
.palkki nav{display:flex;gap:4px}
.palkki nav a{
  text-decoration:none;color:var(--text-dim);font-size:13px;
  padding:4px 11px;border-radius:99px;border:1px solid transparent;
}
.palkki nav a:hover{color:var(--text);border-color:var(--line)}
.palkki nav a[aria-current="page"]{background:var(--tungsten);color:var(--tungsten-ink);font-weight:600}
.palkki .tayte{flex:1 1 auto}
.palkki .kuka{font-size:12.5px;color:var(--text-faint)}
.palkki .kuka b{color:var(--text-dim);font-weight:600}

/* ---------- painikkeet ja kentät ---------- */
.nappi{
  padding:6px 13px;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--bg);color:var(--text-dim);font-size:13px;
}
.nappi:hover{color:var(--text);border-color:var(--text-faint)}
.nappi.paa{background:var(--tungsten);color:var(--tungsten-ink);border-color:var(--tungsten);font-weight:600}
.nappi.paa:hover{filter:brightness(1.07);color:var(--tungsten-ink)}
.nappi.vaara{border-color:var(--bad);color:var(--bad)}
.nappi.vaara:hover{background:var(--bad-soft);color:var(--bad)}
.nappi:disabled{opacity:.5;cursor:default}

input[type=text],input[type=password],input[type=url],textarea{
  width:100%; background:var(--bg); color:var(--text);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:8px 10px; font-size:14px;
}
textarea{resize:none; overflow:hidden; line-height:1.5; min-height:2.6em}
input::placeholder,textarea::placeholder{color:var(--text-faint)}
input:focus,textarea:focus{outline:none;border-color:var(--tungsten);box-shadow:0 0 0 3px var(--tungsten-soft)}

/* ---------- ilmoitukset ---------- */
.ilmo{
  border-radius:var(--radius-lg); padding:8px 11px; font-size:13px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--text-dim);
}
.ilmo.virhe{border-color:var(--bad);background:var(--bad-soft);color:var(--text)}
.ilmo.hyva{border-color:var(--ok);background:var(--ok-soft);color:var(--text)}

/* Koko sivun virhepalkki. Tallennuksen epäonnistuminen ei saa jäädä
   pelkäksi konsolirivin merkinnäksi: se on näytettävä kirjoittajalle. */
.katto{
  position:sticky; top:0; z-index:50; margin:0;
  border-radius:0; border-left:0; border-right:0; border-top:0;
}

/* ---------- ideataulu ---------- */
.sisus{padding:16px;max-width:1800px;margin:0 auto}
.taulu{
  display:grid; gap:14px; align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
}
.sarake{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:10px; min-width:0;
}
.sarake > h2{
  margin:0 0 9px; font-size:12.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim);
  display:flex; align-items:center; gap:8px;
}
.sarake > h2 .maara{
  margin-left:auto; font-size:11px; color:var(--text-faint); font-weight:500;
  letter-spacing:0; font-variant-numeric:tabular-nums;
}
/* Korostusväri tulee sarakkeen järjestysluvusta, ei sen tunnuksesta: taulut
   ja niiden sarakkeet tulevat rajapinnasta, eikä käyttöliittymä saa olettaa
   mitään tiettyä sarakenimeä. */
.sarake > h2::before{content:"";width:3px;height:13px;background:var(--tungsten);border-radius:2px}
.sarake:nth-child(4n+2) > h2::before{background:var(--bad)}
.sarake:nth-child(4n+3) > h2::before{background:var(--ok)}
.sarake:nth-child(4n+4) > h2::before{background:var(--daylight)}

.merkinnat{display:flex;flex-direction:column;gap:8px}

.merkinta{
  background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:var(--radius-lg); padding:8px 10px; min-width:0;
}
.merkinta .teksti{
  white-space:pre-wrap; overflow-wrap:anywhere; margin:0 0 6px; font-size:14px;
}
.merkinta.oma{cursor:text}
.merkinta.oma:hover{border-color:var(--line)}
.merkinta .jalki{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  font-size:11.5px; color:var(--text-faint);
}
.merkinta .jalki .kirjoittaja{color:var(--daylight);font-weight:600}
.merkinta .jalki .poistanappi{
  margin-left:auto; color:var(--text-faint); font-size:11.5px;
  border:1px solid transparent; border-radius:4px; padding:1px 6px;
}
.merkinta .jalki .poistanappi:hover{color:var(--bad);border-color:var(--bad)}
.merkinta .tila{margin-top:6px;font-size:12px}
.merkinta.tallentuu{opacity:.62}

/* Kirjoituskenttä on aina sarakkeen alimpana — kirjoittaminen ensin. */
.uusi{margin-top:8px}
.uusi textarea{background:var(--surface-2);border-style:dashed}
.uusi textarea:focus{border-style:solid}
.vihje{margin-top:5px;font-size:11.5px;color:var(--text-faint)}

/* ---------- ylläpito ---------- */
.yllapito{
  margin-top:22px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:14px;
}
.yllapito h2{margin:0 0 10px;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim)}
.yllapito .parit{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));align-items:end}
.yllapito label{display:block;margin-bottom:4px}
.yllapito .valinta{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text-dim)}
.yllapito .valinta input{width:auto}
table.tunnukset{width:100%;border-collapse:collapse;margin-top:14px;font-size:13px}
table.tunnukset th{
  text-align:left;padding:5px 8px;border-bottom:1px solid var(--line);
  font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-faint);font-weight:600;
}
table.tunnukset td{padding:5px 8px;border-bottom:1px solid var(--line-hair);color:var(--text-dim)}
table.tunnukset td.on{color:var(--tungsten)}
/* Tunnus ilman taulua on rikki, ei tyhja. Se nakyy sellaisena. */
table.tunnukset td.puuttuu{color:var(--varoitus,#e0a458);font-style:italic}
.yllapito .taulurastit{display:flex;flex-wrap:wrap;gap:4px 16px;padding:7px 0}

/* ---------- kirjautuminen ---------- */
.kirjautumissivu{display:flex;align-items:center;justify-content:center;min-height:100dvh;padding:20px}
.kortti{
  width:100%;max-width:330px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow);
}
.kortti h1{margin:0 0 3px;font-size:16px;letter-spacing:.1em;text-transform:uppercase}
.kortti h1 i{font-style:normal;color:var(--tungsten)}
.kortti .alaotsikko{margin:0 0 18px;font-size:12.5px;color:var(--text-faint)}
.kortti label{display:block;margin-bottom:12px}
.kortti label .lbl{display:block;margin-bottom:4px}

/* ---------- kauppa-arvio ---------- */
.kauppasivu .ohjaimet{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:10px;margin-bottom:14px;
}
.kauppasivu .osoitekentta{flex:1 1 280px;min-width:0}
.laitteet{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:2px}
.laitteet button{padding:5px 14px;border-radius:99px;font-size:12.5px;color:var(--text-dim);white-space:nowrap}
.laitteet button[aria-pressed="true"]{background:var(--tungsten);color:var(--tungsten-ink);font-weight:600}
.laitteet button:not([aria-pressed="true"]):hover{color:var(--text)}

/* Taulun valinta yläpalkissa. Sama pillerimuoto kuin laitevalinnassa. */
.taulunvalinta{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:2px;max-width:100%;overflow:auto}
.taulunvalinta a{
  text-decoration:none;padding:4px 13px;border-radius:99px;font-size:12.5px;
  color:var(--text-dim);white-space:nowrap;
}
.taulunvalinta a[aria-current="page"]{background:var(--daylight);color:var(--tungsten-ink);font-weight:600}
.taulunvalinta a:not([aria-current="page"]):hover{color:var(--text)}
.taulunnimi{font-size:12.5px;color:var(--text-dim);font-weight:600}

.nayttamo{
  display:flex;justify-content:center;padding:16px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:auto;
}
.nayttamo > div{flex:none}
.kehys{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden; flex:none;
  /* Vasen yläkulma on kiintopiste, koska kotelon mitat lasketaan
     skaalauskertoimesta; keskitys hoidetaan kotelon asettelulla. */
  transform-origin:top left; box-shadow:var(--shadow);
}
.kehys iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.tyhjatila{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;height:100%;padding:24px;text-align:center;color:var(--text-faint);
}
.tyhjatila strong{color:var(--text-dim);font-size:14px}
.tyhjatila span{font-size:12.5px;max-width:34ch}
.kokotieto{margin-top:8px;text-align:center;font-size:11.5px;color:var(--text-faint)}

.arviolaatikko{
  margin-top:16px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:12px;
}
.arviolaatikko h2{margin:0 0 4px;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim)}
.arviolaatikko p.selite{margin:0 0 9px;font-size:12.5px;color:var(--text-faint)}
.arviolaatikko .rivi{display:flex;gap:10px;align-items:center;margin-top:9px;flex-wrap:wrap}

/* ---------- tutkimusten lukusivu ---------- */
.lukusivu{display:grid;gap:16px;grid-template-columns:230px minmax(0,1fr);align-items:start;max-width:1250px}
.tutkimuslista{
  position:sticky; top:62px; display:flex; flex-direction:column; gap:4px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:11px;
}
.tutkimuslista h2{margin:0 0 4px}
.tutkimuslista a{
  display:block; text-decoration:none; color:var(--text-dim); font-size:13px;
  padding:6px 8px; border-radius:var(--radius); border:1px solid transparent;
}
.tutkimuslista a:hover{color:var(--text);border-color:var(--line)}
.tutkimuslista a[aria-current="page"]{background:var(--surface-3);color:var(--text);border-color:var(--line)}
.tutkimuslista .paivays{display:block;font-size:11px;color:var(--text-faint);margin-top:2px}

.luettava{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:26px 30px; min-width:0;
  /* Rivin pituus on luettavuuden tärkein mitta; 74 merkkiä on pitkän
     asiatekstin yläraja, ei tyylivalinta. */
  font-size:15px; line-height:1.62;
}
.luettava > *{max-width:74ch}
.luettava h1{font-size:23px;line-height:1.25;margin:0 0 18px;letter-spacing:-.01em}
.luettava h2{
  font-size:17px;margin:30px 0 10px;padding-top:14px;
  border-top:1px solid var(--line-soft);color:var(--text);
}
.luettava h3{font-size:14.5px;margin:22px 0 7px;color:var(--tungsten);letter-spacing:.01em}
.luettava h4,.luettava h5,.luettava h6{font-size:13.5px;margin:18px 0 6px;color:var(--text-dim)}
.luettava p{margin:0 0 13px}
.luettava ul,.luettava ol{margin:0 0 14px;padding-left:22px}
.luettava li{margin-bottom:5px}
.luettava strong{color:var(--text);font-weight:600}
.luettava em{color:var(--text-dim)}
.luettava code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;
  background:var(--bg);border:1px solid var(--line-soft);border-radius:3px;padding:1px 4px;
}
.luettava a{color:var(--daylight)}
.luettava hr{border:0;border-top:1px solid var(--line-soft);margin:22px 0}
.luettava blockquote{
  margin:16px 0; padding:11px 15px; border-left:3px solid var(--tungsten);
  background:var(--tungsten-soft); border-radius:0 var(--radius) var(--radius) 0;
}
.luettava blockquote p:last-child{margin-bottom:0}
.luettava .lataa{color:var(--text-faint)}
/* Leveä taulukko vierii omassa laatikossaan, ei koko sivua sivusuuntaan. */
.luettava .vierivataulu{overflow-x:auto;margin:0 0 16px;max-width:100%}
.luettava table{border-collapse:collapse;font-size:13.5px;min-width:100%}
.luettava th{
  text-align:left;padding:7px 11px;border-bottom:1px solid var(--line);
  color:var(--text-faint);font-size:11px;text-transform:uppercase;letter-spacing:.07em;
}
.luettava td{padding:7px 11px;border-bottom:1px solid var(--line-hair);color:var(--text-dim);vertical-align:top}

@media (max-width:820px){
  .lukusivu{grid-template-columns:minmax(0,1fr)}
  .tutkimuslista{position:static}
  .luettava{padding:18px 16px}
}

@media (max-width:640px){
  .sisus{padding:11px}
  .palkki{padding:7px 11px;gap:10px}
  /* Puhelimella iOS zoomaa kenttään jos fontti on alle 16px. Zoomattu sivu
     hankaloittaa kirjoittamista, ja kirjoittaminen on tämän työkalun ydin. */
  input[type=text],input[type=password],input[type=url],textarea{font-size:16px}
}