/* PROSESSISYMBOLIT — tyylit */

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

:root {
  --tumma: #1e2530;
  --tumma2: #283040;
  --reuna: #3a4658;
  --teksti: #e8edf4;
  --himmea: #9aa8bc;
  --korostus: #2f9e6e;      /* vihreä = onnistuminen, ei valinta */
  --muste: #171d1f;         /* MARUFLOWn tumma: valinnat ja rakenne */
  --brandi: #ff5a00;        /* MARUFLOWn oranssi: pienet korostukset */
  --reunavari: #e2e8ee;
}

body {
  background: #f4f6f9;
  color: #22303f;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
}

/* ================= kirjautuminen =================
   MARUFLOWn brandivarit: sama tumma pohja, sama oranssi ja samat
   teravat kulmat kuin maruflow.fi:n sivuilla, jotta kirjautuminen
   ei nayta irralliselta liitannaiselta. Varit ovat tassa omina
   muuttujinaan — sovelluksen oma vari (--korostus) jaa ennalleen. */

.login-body {
  --mf-ink: #171d1f;
  --mf-amber: #ff5a00;
  --mf-panel: #1d2426;
  --mf-line: #333c3e;
  --mf-himmea: #8f9a94;
  background: var(--mf-ink);
  background-image: radial-gradient(70% 55% at 50% 0%, #232c2e 0%, #171d1f 72%);
  color: #eef1ee;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
}
.login-kortti { width: 100%; max-width: 360px; text-align: center; }

/* Tuotelukko MARUFLOW | PI. Tuotenimi on valkoinen ja harvennettu,
   ei iso oranssi — logon oranssi kaari saa jäädä ainoaksi korostukseksi. */
.login-lukko {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 34px;
}
.login-logo { display: block; width: 210px; max-width: 62%; height: auto; }
.login-tuote {
  padding-left: 15px;
  border-left: 1px solid #3d4749;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .18em;
  margin-right: -.18em;        /* harvennus jättäisi muuten oikealle loven */
  color: #fff;
}

.login-kortti input {
  width: 100%;
  padding: 15px 16px;
  font-size: 16px;               /* alle 16px zoomaisi iPhonella */
  color: #fff;
  background: var(--mf-panel);
  border: 1px solid var(--mf-line);
  border-radius: 2px;
  outline: none;
  margin-bottom: 12px;
  font-family: inherit;
}
.login-kortti input::placeholder { color: #6f7a75; }
.login-kortti input:focus { border-color: var(--mf-amber); box-shadow: 0 0 0 3px rgba(255, 90, 0, .2); }
.login-kortti button {
  width: 100%;
  min-height: 54px;
  padding: 14px;
  font-size: 17px;
  font-weight: 850;
  border: none;
  border-radius: 2px;
  background: var(--mf-amber);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
}
.login-kortti button:hover { background: #e04e00; }

.login-virhe {
  margin-bottom: 12px;
  padding: 11px 13px;
  color: #ffb3a5;
  background: rgba(211, 47, 47, .14);
  border: 1px solid rgba(255, 122, 107, .4);
  border-radius: 2px;
  font-size: 14px;
}
.login-huomio { margin-top: 20px; color: var(--mf-himmea); font-size: 13px; }
.login-paluu {
  display: inline-block;
  margin-top: 26px;
  color: var(--mf-himmea);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.login-paluu:hover { color: var(--mf-amber); }

@media (max-width: 400px) {
  .login-lukko { gap: 11px; }
  .login-tuote { padding-left: 11px; font-size: 22px; }
}

/* ================= yläpalkki ================= */

.ylapalkki {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #171d1f;          /* MARUFLOWn tumma, sama kuin kirjautumisessa */
  color: var(--teksti);
  padding: 11px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}
.ylapalkki .brandi {
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.ylapalkki .brandi img { display: block; width: 148px; height: auto; }
.ylapalkki .brandi span {
  padding-left: 11px;
  border-left: 1px solid #3a4446;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .18em;
  margin-right: -.18em;
  color: #fff;
}
/* Vinkkiteksti kutistuu ennen kuin palkki alkaa taittua kahdelle
   riville — muuten Suunnittelupöytä-nappi hyppäisi omalle rivilleen. */
.ylapalkki .ohje {
  flex: 1;
  min-width: 0;
  color: var(--himmea);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ylapalkki .oikea { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: none; }
.ylapalkki a.ulos {
  color: var(--himmea);
  text-decoration: none;
  font-size: 13px;
  padding: 6px 12px;
  border: 1px solid var(--reuna);
  border-radius: 8px;
}
.ylapalkki a.ulos:hover { color: #fff; border-color: var(--himmea); }

/* ================= säätimet ================= */

.saatimet {
  background: #fff;
  border-bottom: 1px solid #dde4ec;
  padding: 13px 18px;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.saadin { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.saadin > label {
  font-size: 12px;
  font-weight: 600;
  color: #5b6c80;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.saadin .arvo { color: var(--brandi); font-weight: 800; }

.saadin input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 4px;
  background: #dfe6ee;
  outline: none;
  cursor: pointer;
}
.saadin input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--muste);
  border: 2px solid #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,0.3);
  cursor: grab;
}
.saadin input[type="range"]::-moz-range-thumb {
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--muste);
  border: 2px solid #fff;
  cursor: grab;
}

.saadin input[type="text"], .saadin select {
  padding: 7px 10px;
  border: 1px solid #cfd8e3;
  border-radius: 7px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  background: #fff;
}
.saadin input[type="text"]:focus, .saadin select:focus { border-color: var(--korostus); }
.saadin input[type="color"] {
  width: 100%;
  height: 30px;
  border: 1px solid #cfd8e3;
  border-radius: 7px;
  padding: 2px;
  cursor: pointer;
  background: #fff;
}

.varit { display: flex; gap: 5px; flex-wrap: wrap; max-width: 210px; }
.vari {
  width: 25px; height: 25px;
  border-radius: 6px;
  border: 2px solid #cfd8e3;
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s;
}
.vari:hover { transform: scale(1.14); }
.vari.valittu {
  border-color: #22303f;
  box-shadow: 0 0 0 2px rgba(34,48,63,0.25);
  transform: scale(1.1);
}

/* Kuollut säädin (Vaihe 166b): kun yksikään näkyvissä oleva symboli ei
   reagoi väriin, valitsin himmenee ja kertoo syyn. Ei piiloteta, jottei
   säädinrivi hyppisi kategoriaa vaihdettaessa. */
.saadin-kuollut > label,
.saadin-kuollut .varit,
.saadin-kuollut input[type="color"] { opacity: 0.42; }
.saadin-kuollut .vari { cursor: not-allowed; }
.saadin-kuollut .vari:hover { transform: none; }
.saadin-huom {
  font-size: 11px;
  line-height: 1.35;
  color: var(--himmea, #5d6b74);
  max-width: 210px;
}

.taustavalinta { display: flex; gap: 5px; }
.taustavalinta button {
  padding: 6px 11px;
  border: 1px solid #cfd8e3;
  background: #fff;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
.taustavalinta button.valittu {
  background: var(--muste);
  color: #fff;
  border-color: var(--muste);
}

/* ================= kategoriat ================= */

.katnapit {
  display: flex;
  gap: 7px;
  padding: 12px 18px 0;
  flex-wrap: wrap;
}
.kat {
  padding: 9px 16px;
  border: 1px solid #cfd8e3;
  background: #fff;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  color: #46586c;
  transition: all 0.15s;
}
.kat:hover { border-color: #9fb0c2; color: var(--muste); }
.kat.valittu {
  background: var(--muste);
  color: #fff;
  border-color: var(--muste);
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(23, 29, 31, 0.22);
}

.ruudukko-otsikko {
  padding: 14px 18px 8px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: #5b6c80;
  font-size: 13px;
}
.ruudukko-otsikko b { color: #22303f; font-size: 15px; }
.ruudukko-otsikko input {
  margin-left: auto;
  width: min(260px, 46vw);
  padding: 8px 14px;
  border: 1px solid #cfd8e3;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13.5px;
  background: #fff;
  outline: none;
}
.ruudukko-otsikko input:focus { border-color: var(--muste); }

/* ================= symbolikortit ================= */

.ruudukko {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  padding: 0 18px 40px;
}
.ruudukko.tausta-vaalea .esikatselu { background: #ffffff; }
.ruudukko.tausta-tumma .esikatselu { background: #253040; }
.ruudukko.tausta-ruutu .esikatselu {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e3e8ee 25%, transparent 25%),
    linear-gradient(-45deg, #e3e8ee 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e3e8ee 75%),
    linear-gradient(-45deg, transparent 75%, #e3e8ee 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}

.kortti {
  background: #fff;
  border: 1px solid #dde4ec;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.14s, box-shadow 0.2s, border-color 0.2s;
  position: relative;
  display: flex;
  flex-direction: column;
}
.kortti:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(23, 29, 31, 0.14);
  border-color: #b8c6d4;
}
.kortti:active { transform: translateY(0) scale(0.985); }

.esikatselu {
  flex: 1;
  min-height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  overflow: hidden;
}
.esikatselu svg { max-width: 100%; max-height: 150px; }
/* Katselmuskorjaus 277: pieni kopio (venttiili 30 %, mittaus 60 %) näkyy
   kortilla suurennettuna, ja nimen perässä on kopion todellinen koko. */
.kortti-nimi .kortti-koko-px {
  margin-left: 6px;
  font-size: 10.5px;
  font-weight: 500;
  color: #8694a3;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
html[data-teema="tumma"] .kortti-nimi .kortti-koko-px { color: #93a1ad; }

.kortti-nimi {
  padding: 9px 12px;
  font-size: 13px;
  color: #46586c;
  border-top: 1px solid #eef2f6;
  background: #fafbfd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kortti-tyokalut {
  position: absolute;
  top: 7px; right: 7px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.kortti:hover .kortti-tyokalut { opacity: 1; }
.kortti-tyokalut button {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #cfd8e3;
  border-radius: 6px;
  width: 27px; height: 25px;
  font-size: 11px;
  cursor: pointer;
  color: #46586c;
  padding: 0;
  font-family: inherit;
}
.kortti-tyokalut button:hover { background: var(--muste); color: #fff; border-color: var(--muste); }

.kortti.kopioitu {
  border-color: var(--korostus);
  box-shadow: 0 0 0 3px rgba(47, 158, 110, 0.3);
}
.kortti.kopioitu::after {
  content: '✅ Kopioitu!';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(47, 158, 110, 0.93);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  animation: valahdys 0.9s ease;
}
@keyframes valahdys {
  0% { opacity: 0; }
  15% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

/* ================= ilmoitukset ================= */

.ilmo {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%) translateY(70px);
  background: #22303f;
  color: #fff;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 15px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: all 0.3s;
  z-index: 95;               /* myös suunnittelupöydän (70) päälle */
  pointer-events: none;
  max-width: 92vw;
  text-align: center;
}
.ilmo.nakyy { opacity: 1; transform: translateX(-50%) translateY(0); }
.ilmo.virhe { background: #b3261e; }

.varoitus {
  background: #fff4d6;
  border-bottom: 1px solid #f0d896;
  color: #7a5a00;
  padding: 11px 18px;
  font-size: 14px;
}

.vinkki {
  position: relative;
  padding: 13px 48px 13px 18px;
  color: #61728a;
  font-size: 13.5px;
  line-height: 1.65;
  background: #fff;
  border-bottom: 1px solid var(--reunavari);
  border-left: 3px solid var(--brandi);
}
.vinkki b { color: var(--muste); }
.vinkki[hidden] { display: none; }
.vinkki-sulje {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 27px;
  height: 27px;
  border: 1px solid var(--reunavari);
  border-radius: 7px;
  background: #fff;
  color: #61728a;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.vinkki-sulje:hover { background: var(--muste); color: #fff; border-color: var(--muste); }
.vinkki kbd {
  background: #fff;
  border: 1px solid #cfd8e3;
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
  font-family: inherit;
  font-size: 12.5px;
}

/* ================= suunnittelupöytä ================= */

.tyopoyta-avaa {
  padding: 7px 15px;
  border: 1px solid var(--brandi);
  border-radius: 8px;
  background: var(--brandi);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.tyopoyta-avaa:hover { background: #e04e00; border-color: #e04e00; }

body.tyopoyta-auki { overflow: hidden; }
/* Vaihe 260a: Putkilinja avautuu Kaavion päältä, ja sen sulkeminen poistaa
   luokan — auki oleva kaavio pitää sivun vierityksen silti lukittuna. */
body:has(> #piirTausta:not([hidden])) { overflow: hidden; }

.tyopoyta-tausta {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(23, 29, 31, 0.55);
}
.tyopoyta-tausta[hidden] { display: none; }

.tyopoyta {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1100px;
  max-height: 100%;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.tyopoyta-ylapaa {
  position: relative;
  padding: 20px 56px 18px 22px;
  border-bottom: 1px solid var(--reunavari);
}
.tyopoyta-ylapaa h2 { font-size: 20px; font-weight: 800; color: var(--muste); }
.tyopoyta-ylapaa p { margin-top: 5px; color: #61728a; font-size: 13.5px; line-height: 1.55; }
.tyopoyta-sulje {
  position: absolute;
  top: 15px; right: 15px;
  width: 34px; height: 34px;
  border: 1px solid var(--reunavari);
  border-radius: 8px;
  background: #fff;
  color: #46586c;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
}
.tyopoyta-sulje:hover { background: var(--muste); color: #fff; border-color: var(--muste); }

/* Kaksi palstaa: vasemmalla esikatselu ja sijaintisäätimet, oikealla
   paletti. Näin säätimet ovat heti silmien edessä eikä niitä tarvitse
   etsiä rullaamalla paletin ohi. */
.tyopoyta-sisus { display: flex; gap: 24px; align-items: flex-start; padding: 18px 22px 22px; overflow-y: auto; }
.linja-vasen { flex: 1; min-width: 0; }
.linja-oikea { width: 252px; flex: none; }
.linja-oikea .linja-otsikko { margin-top: 0; }
.linja-oikea .linja-napit { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.linja-oikea .linja-lisays { width: auto; }

/* Esikatselu vaalealla ruudukolla: linjan mitat erottuvat ja
   läpinäkyvä tausta on helppo hahmottaa. */
.linja-esikatselu {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  padding: 18px;
  border: 1px solid var(--reunavari);
  border-radius: 10px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #eef2f6 25%, transparent 25%),
    linear-gradient(-45deg, #eef2f6 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eef2f6 75%),
    linear-gradient(-45deg, transparent 75%, #eef2f6 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
  overflow-x: auto;
}
.linja-esikatselu svg { max-width: none; }

.linja-rivi {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.linja-pituus { flex: 1; min-width: 220px; }
.linja-valinta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  color: #46586c;
  font-size: 14px;
  cursor: pointer;
}
.linja-valinta input { width: 17px; height: 17px; accent-color: var(--muste); cursor: pointer; }

.linja-otsikko {
  margin: 22px 0 9px;
  font-size: 12px;
  font-weight: 700;
  color: #5b6c80;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.linja-napit { display: flex; gap: 8px; flex-wrap: wrap; }
.linja-lisays {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 104px;
  padding: 9px 6px 8px;
  border: 1px solid var(--reunavari);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.linja-lisays:hover {
  border-color: #b8c6d4;
  box-shadow: 0 6px 16px rgba(23, 29, 31, 0.1);
  transform: translateY(-2px);
}
.linja-lisays-kuva {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}
.linja-lisays-kuva svg { max-width: 100%; max-height: 40px; }
.linja-lisays-nimi {
  font-size: 11.5px;
  line-height: 1.25;
  color: #46586c;
  text-align: center;
}

.linja-tyhja { color: #8494a8; font-size: 13.5px; }
.linja-tyhja[hidden] { display: none; }

.linja-lista { list-style: none; counter-reset: osa; }
.linja-lista li {
  counter-increment: osa;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 4px 9px 0;
  border-bottom: 1px solid #eef2f6;
}
.linja-lista li::before {
  content: counter(osa);
  flex: none;
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef2f6;
  color: #5b6c80;
  font-size: 12px;
  font-weight: 700;
}
.linja-osa-nimi { flex: 1; min-width: 90px; color: #22303f; font-size: 14px; }
.linja-lista input[type="range"] { flex: none; width: 170px; accent-color: var(--muste); cursor: pointer; }
.linja-lista li > button {
  width: 30px; height: 28px;
  flex: none;
  border: 1px solid var(--reunavari);
  border-radius: 7px;
  background: #fff;
  color: #46586c;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.linja-lista li > button:hover { background: var(--muste); color: #fff; border-color: var(--muste); }

.tyopoyta-alapaa {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  padding: 15px 22px;
  border-top: 1px solid var(--reunavari);
  background: #fafbfd;
}
.tyopoyta-alapaa button {
  padding: 11px 16px;
  border: 1px solid var(--reunavari);
  border-radius: 9px;
  background: #fff;
  color: #46586c;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}
.tyopoyta-alapaa button:hover { border-color: #b8c6d4; color: var(--muste); }
.tyopoyta-alapaa .paanappi {
  margin-right: auto;
  background: var(--muste);
  border-color: var(--muste);
  color: #fff;
  font-weight: 700;
}
.tyopoyta-alapaa .paanappi:hover { background: #000; border-color: #000; color: #fff; }
.tyopoyta-alapaa .paanappi.onnistui,
.tyopoyta-alapaa .paanappi.onnistui:hover { background: var(--korostus); border-color: var(--korostus); color: #fff; }

/* ================= piirustus =================
   Oma kokoruudun osio: paletti vasemmalla, kanvas keskellä,
   valitun osan ominaisuudet oikealla. Kaikki luokat piir-alkuisia,
   jotta muiden osioiden tyylit eivät sotkeudu. */

.piir-avaa { background: var(--muste); border-color: var(--muste); }
.piir-avaa:hover { background: #000; border-color: #000; }

.piir-tausta {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  padding: 0;                 /* koko näyttö suunnittelualustalle */
  background: rgba(23, 29, 31, 0.55);
}
.piir-tausta[hidden] { display: none; }

.piir {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.piir-otsikko { font-size: 17px; font-weight: 800; color: var(--muste); }
.piir-ohje-nappi[aria-expanded="true"] { background: var(--muste); border-color: var(--muste); color: #fff; }
.piir-sulje {
  position: absolute;
  top: 7px;
  right: 10px;
  flex: none;
}
.piir-ohje {
  padding: 10px 22px;
  border-bottom: 1px solid var(--reunavari);
  background: #fafbfd;
  color: #61728a;
  font-size: 13px;
  line-height: 1.55;
}
.piir-ohje b { color: var(--muste); }
.piir-ohje[hidden] { display: none; }

/* hidden-attribuutin on voitettava kaikki display-saannot — muuten
   paneelin kenttien piilotus (esim. putken pituus venttiililta) ei
   nay kayttajalle lainkaan. */
[hidden] { display: none !important; }

.piir-tyokalurivi {
  display: flex;
  align-items: center;
  gap: 8px;
  row-gap: 7px;
  flex-wrap: wrap;
  position: relative;
  padding: 8px 56px 8px 14px;
  border-bottom: 1px solid var(--reunavari);
  font-size: 13px;
  color: #46586c;
}
.piir-mitat { display: flex; align-items: center; gap: 6px; }
.piir-tyokalurivi input[type="number"] {
  width: 64px;
  padding: 5px 7px;
  border: 1px solid #cfd8e3;
  border-radius: 7px;
  font-family: inherit;
  font-size: 13.5px;
}
.piir-tyokalurivi select {
  padding: 5px 7px;
  border: 1px solid #cfd8e3;
  border-radius: 7px;
  font-family: inherit;
  font-size: 13.5px;
  background: #fff;
}
.piir-vali { flex: 1; }
.piir-tyokalurivi button {
  padding: 6px 10px;
  border: 1px solid var(--reunavari);
  border-radius: 8px;
  background: #fff;
  color: #46586c;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.piir-tyokalurivi button:hover { border-color: #b8c6d4; color: var(--muste); }

.piir-runko { position: relative; flex: 1; display: flex; min-height: 0; }

.piir-kategoriat {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--reunavari);
  background: #f7f9fc;
}
.piir-kategoriat input[type="search"] {
  flex: none;
  width: 178px;
  padding: 7px 12px;
  border: 1px solid #cfd8e3;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  outline: none;
  background: #fff;
}
.piir-kategoriat input[type="search"]:focus { border-color: var(--muste); }
.piir-kat-napit { display: flex; align-items: center; gap: 6px; }
.piir-kat-nappi {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border: 1px solid var(--reunavari);
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #46586c;
  white-space: nowrap;
  cursor: pointer;
}
.piir-kat-nappi:hover { border-color: #b8c6d4; color: var(--muste); }
.piir-kat-nappi[aria-selected="true"] {
  background: var(--muste);
  border-color: var(--muste);
  color: #fff;
}
.piir-kat-luku {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(70, 88, 108, 0.12);
  font-size: 11px;
}
.piir-kat-nappi[aria-selected="true"] .piir-kat-luku { background: rgba(255, 255, 255, 0.25); }
.piir-kat-vali { flex: 1; min-width: 4px; }
.piir-hylly-nappi {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--reunavari);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  color: #46586c;
  cursor: pointer;
}
.piir-hylly-nappi:hover { border-color: var(--muste); color: var(--muste); }

/* Symbolihylly: valitun ryhmän kortit vaakaruudukossa. Korkeus on
   rajattu, jotta kanvas saa aina pääosan ruudusta. */
/* Kelluva symbolikirjasto: se leijuu kanvaan päällä eikä pienennä
   piirtoaluetta. Napautus kortin ulkopuolelle sulkee sen. */
.piir-valitsin {
  position: absolute;
  inset: 0;
  z-index: 140;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 10px;
  background: rgba(10, 27, 44, 0.22);
  backdrop-filter: blur(2px);
}
.piir-valitsin[hidden] { display: none; }
.piir-valitsin-kortti {
  width: min(940px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--reunavari);
  border-radius: 14px;
  box-shadow: 0 26px 70px rgba(10, 27, 44, 0.32);
  overflow: hidden;
}
.piir-hylly {
  flex: 1;
  min-height: 0;
  padding: 10px 14px 14px;
  background: #fbfcfe;
}
.piir-hylly[hidden] { display: none; }
.piir-paletti {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(94px, 100%), 1fr));
  gap: 7px;
  max-height: min(52vh, 420px);
  overflow-y: auto;
  overflow-x: hidden;
}
.piir-hylly-tyhja { grid-column: 1 / -1; margin: 6px 2px; color: #8494a8; font-size: 13px; }
.piir-lisays {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 4px 6px;
  border: 1px solid var(--reunavari);
  border-radius: 9px;
  background: #fff;
  font-family: inherit;
  cursor: pointer;
}
.piir-lisays:hover { border-color: #b8c6d4; box-shadow: 0 6px 16px rgba(23, 29, 31, 0.12); transform: translateY(-2px); }
.piir-lisays:hover .piir-lisays-kuva svg { transform: scale(1.08); }
.piir-lisays-kuva svg { transition: transform 0.14s; }
.piir-lisays-kuva { display: flex; align-items: center; justify-content: center; height: 30px; }
.piir-lisays-kuva svg { max-width: 100%; max-height: 30px; }
.piir-lisays-nimi {
  font-size: 10.5px;
  line-height: 1.2;
  color: #46586c;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.piir-lisays-oma { position: relative; border-color: #c9b8e8; }
.piir-lisays-poisto {
  position: absolute;
  top: 2px;
  right: 4px;
  padding: 1px 4px;
  border: 0;
  background: transparent;
  color: #8494a8;
  font: inherit;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.piir-lisays-poisto:hover { color: #b3261e; }
.piir-tuo-laite {
  padding: 8px 10px;
  border: 1px dashed #b8c6d4;
  border-radius: 9px;
  background: #fff;
  color: #46586c;
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.piir-tuo-laite:hover { border-color: var(--muste); color: var(--muste); }

.piir-kanvas-kaari { flex: 1; overflow: auto; background: #eef2f6; padding: 18px; }
.piir-kanvas-pito { position: relative; width: max-content; }
.piir-kanvas {
  position: relative;
  background-color: #fff;
  background-image: radial-gradient(#dfe6ee 1px, transparent 1px);
  background-size: 20px 20px;
  border: 1px solid var(--reunavari);
  box-shadow: 0 4px 18px rgba(23, 29, 31, 0.12);
}
.piir-kanvas svg { display: block; }
.piir-kanvas svg [data-i] { cursor: move; }
.piir-valinta {
  position: absolute;
  border: 2px dashed var(--brandi);
  border-radius: 4px;
  pointer-events: none;
}
/* Liitostilan portit: kelluvia nappeja osien reunoilla. */
.piir-portti {
  position: absolute;
  width: 13px;
  height: 13px;
  padding: 0;
  border: 2px solid var(--brandi);
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  cursor: crosshair;
  z-index: 6;
}
.piir-portti:hover { background: var(--brandi); }
.piir-portti.aktiivinen { background: var(--brandi); box-shadow: 0 0 0 4px rgba(255, 90, 0, 0.25); }

.piir-kanvas.ei-ruudukkoa { background-image: none; }

/* Tumma piirtoalusta (Vaihe 199, Markuksen idea 20.9.2026): valvomonäyttöä
   piirtäessä tumma pohja näyttää lopputuloksen sellaisena kuin se valvomossa
   on. Pelkkä RUUTUASETUS: vienti, tuloste ja kerroskopiot piirtyvät entiseen
   tapaan, joten vanhat tallenteet ja viennit näyttävät samalta. */
.piir-kanvas.alusta-tumma {
  background-color: #1e2529;
  background-image: radial-gradient(#3c4a50 1px, transparent 1px);
  border-color: #33403f;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.45);
}
.piir-kanvas.alusta-tumma.ei-ruudukkoa { background-image: none; }
.piir-kanvas-kaari.tumma { background: #12181b; }
/* Vaihe 212: laitteiden alla olevat merkinnät (DN80, 12 m³, 15 kW) ovat
   tummaa tekstiä valkoisella reunuksella — tummalla pohjalla ne näyttivät
   ääriviivakirjaimilta. Tummalla alustalla värit käännetään: vaalea
   teksti, reunus alustan värinen. Muut tekstit ovat aina vaalean rungon,
   kuplan tai laatan päällä (kirjaston 314 symbolia mitattu), joten niihin
   ei kosketa. Vienti ja tuloste eivät muutu. */
.piir-kanvas.alusta-tumma svg text.piir-mitta { fill: #e6edf1; stroke: #1e2529; }
.piir-kanvas svg g[data-l] { cursor: pointer; }
.piir-kanvas svg g[data-l][data-valittu] path { filter: drop-shadow(0 0 3px rgba(255, 90, 0, 0.9)); }
.piir-kanvas svg g[data-lj] { cursor: move; }
.piir-kanvas svg g[data-lj][data-valittu] line { filter: drop-shadow(0 0 3px rgba(255, 90, 0, 0.9)); }
.piir-kanvas-pito.tila-piirto .piir-kanvas,
.piir-kanvas-pito.tila-piirto .piir-kanvas svg g { cursor: crosshair; }
.piir-kanvas-pito.tila-sakset .piir-kanvas svg g[data-lj] { cursor: pointer; }

.piir-liitos-nuoli { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.piir-liitos-nuoli input { width: 16px; height: 16px; accent-color: var(--muste); cursor: pointer; }

/* Kohdistusviivat: näkyvät raahatessa, kun osa tarttuu toisen osan
   reunaan tai keskilinjaan. */
.piir-ohjeviiva { position: absolute; background: var(--brandi); pointer-events: none; }
.piir-ohjeviiva[hidden] { display: none; }
.piir-ohjeviiva-vaaka { left: 0; right: 0; height: 1px; }
.piir-ohjeviiva-pysty { top: 0; bottom: 0; width: 1px; }
.piir-tyhja {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #8494a8;
  font-size: 14.5px;
  pointer-events: none;
}
.piir-tyhja[hidden] { display: none; }

.piir-paneeli {
  width: 232px;
  flex: none;
  padding: 14px;
  border-left: 1px solid var(--reunavari);
  overflow-y: auto;
  font-size: 13px;
  color: #46586c;
}
.piir-paneeli h3 { margin-bottom: 10px; font-size: 15px; color: var(--muste); }
.piir-paneeli label {
  display: block;
  margin-bottom: 11px;
  font-size: 11.5px;
  font-weight: 700;
  color: #5b6c80;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.piir-paneeli label input[type="text"] {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid #cfd8e3;
  border-radius: 7px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  outline: none;
}
.piir-paneeli label input[type="text"]:focus { border-color: var(--muste); }
.piir-paneeli input[type="range"] { display: block; width: 100%; margin-top: 6px; accent-color: var(--muste); cursor: pointer; }
.piir-paneeli select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid #cfd8e3;
  border-radius: 7px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  background: #fff;
  outline: none;
}
.piir-paneeli select:focus { border-color: var(--muste); }
.piir-paneeli .arvo { color: var(--brandi); font-weight: 800; }
.piir-varit { display: flex; gap: 10px; }
.piir-varit label { flex: 1; }
.piir-varit input[type="color"] {
  display: block;
  width: 100%;
  height: 30px;
  margin-top: 4px;
  border: 1px solid #cfd8e3;
  border-radius: 7px;
  padding: 2px;
  background: #fff;
  cursor: pointer;
}
.piir-napit { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.piir-napit button {
  padding: 8px 10px;
  border: 1px solid var(--reunavari);
  border-radius: 7px;
  background: #fff;
  color: #46586c;
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.piir-napit button:hover { background: var(--muste); border-color: var(--muste); color: #fff; }
.piir-napit .piir-poista:hover { background: #b3261e; border-color: #b3261e; }
.piir-vihje { color: #8494a8; font-size: 12px; }
#piirEiValintaa { color: #8494a8; }
.piir .tyopoyta-alapaa button:disabled { opacity: 0.4; cursor: default; }

@media (max-width: 900px) {
  /* Kapealla näytöllä kanvas saa koko tilan. Kategoriapalkki pysyy
     ylhäällä vieritettävänä, hylly madaltuu ja ominaisuudet nousevat
     pohjalta omana paneelinaan. */
  .piir-runko { flex-direction: column; }
  .piir-kanvas-kaari { flex: 1; padding: 10px; }
  .piir-valitsin { padding: 6px; }
  .piir-kategoriat { padding: 8px 10px; gap: 6px; }
  .piir-kategoriat input[type="search"] { width: 100%; }
  .piir-kategoriat .piir-tuo-laite { display: none; }
  .piir-kat-vali { display: none; }
  .piir-hylly-nappi { margin-left: auto; }
  .piir-hylly { padding: 8px 10px 12px; }
  .piir-paletti { max-height: 46vh; grid-template-columns: repeat(auto-fill, minmax(min(88px, 100%), 1fr)); }

  .piir-paneeli {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 46vh;
    z-index: 150;
    border-left: 0;
    border-top: 1px solid var(--reunavari);
    border-radius: 18px 18px 0 0;
    background: #fff;
    box-shadow: 0 -18px 50px rgba(10, 27, 44, 0.28);
    transform: translateY(105%);
    transition: transform 0.22s ease;
  }
  .piir.piir-valinta-auki .piir-paneeli { transform: none; }

  /* Tiivis työkalurivi: tilanapit pelkkinä kuvakkeina; hienosäädöt
     hoituvat Asetukset-valikosta ja pikahausta. */
  .nappiteksti { display: none; }

  .piir .tyopoyta-alapaa { flex-wrap: wrap; gap: 8px; }
  .piir .tyopoyta-alapaa button { flex: 1 1 40%; padding: 10px 8px; font-size: 13px; }
}

/* ================= mobiili ================= */

@media (max-width: 720px) {
  .tyopoyta-tausta { padding: 0; }
  .tyopoyta { max-width: none; height: 100%; border-radius: 0; }
  .tyopoyta-ylapaa { padding: 15px 52px 14px 15px; }
  .tyopoyta-sisus { padding: 14px 15px 18px; }
  .tyopoyta-alapaa { padding: 12px 15px; }
  .tyopoyta-alapaa .paanappi { margin-right: 0; width: 100%; }
  .tyopoyta-avaa { padding: 6px 11px; font-size: 12px; }
  .tyopoyta-sisus { flex-direction: column; }
  .linja-oikea { width: auto; }
  .linja-oikea .linja-otsikko { margin-top: 16px; }
  .linja-oikea .linja-napit { display: flex; overflow-x: auto; padding-bottom: 4px; }
  .linja-oikea .linja-lisays { flex: none; width: 88px; }
  .linja-lisays { width: 88px; }
  .linja-lista input[type="range"] { width: 110px; }
  .ruudukko-otsikko input { width: 100%; margin: 4px 0 0; }
  .ruudukko-otsikko { flex-wrap: wrap; }
  .ylapalkki { padding: 10px 12px; gap: 8px; }
  .ylapalkki .brandi { gap: 7px; }
  .ylapalkki .brandi img { width: 124px; }
  .ylapalkki .brandi span { font-size: 16px; }
  .ylapalkki .ohje { display: none; }
  .saatimet { padding: 11px 12px; gap: 14px; }
  .saadin { min-width: 140px; flex: 1; }
  .katnapit { padding: 10px 12px 0; }
  .kat { padding: 8px 13px; font-size: 13px; }
  .ruudukko { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 0 12px 30px; gap: 10px; }
  .esikatselu { min-height: 108px; }
  .kortti-tyokalut { opacity: 1; }
}

/* ============================================================
   Vaihe 91: kielivalinta (FI/EN/DE) ja piirustuksen selkeytys
   ============================================================ */

/* Kielinapit yläpalkissa — himmeä lasipilleri, valittu valkoisella. */
/* Kielivalitsin — viisi kieltä ei mahdu enää erillisiksi napeiksi, joten
   valinta avautuu valikkona: nappi kertoo nykyisen kielen ja valikko
   näyttää kunkin kielen OMALLA kielellään. Valikon sisältö rakennetaan
   PI_KIELET-listasta, joten uusi kieli ilmestyy tähän itsestään. */
.kielivalitsin { position: relative; flex: none; }

.kielivalitsin-nappi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.78);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.kielivalitsin-nappi:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.kielivalitsin-nappi:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.kielivalitsin.auki .kielivalitsin-nappi {
  background: #fff;
  border-color: #fff;
  color: var(--muste);
}
.kielivalitsin-maapallo { flex: none; opacity: 0.72; }
.kielivalitsin-nuoli { flex: none; opacity: 0.6; transition: transform 0.18s ease; }
.kielivalitsin.auki .kielivalitsin-nuoli { transform: rotate(180deg); }

.kielivalitsin-valikko {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 90;
  min-width: 186px;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--reunavari);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(16, 24, 32, 0.2), 0 2px 6px rgba(16, 24, 32, 0.1);
  animation: kieliAukeaAlas 0.15s ease-out;
}
@keyframes kieliAukeaAlas {
  from { opacity: 0; transform: translateY(-6px); }
}

.kielivalitsin-rivi {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: #46586c;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.kielivalitsin-rivi:hover { background: #eef3f7; color: var(--muste); }
.kielivalitsin-rivi:focus-visible { outline: 2px solid var(--muste); outline-offset: -2px; }
.kielivalitsin-lyhenne {
  flex: none;
  min-width: 27px;
  padding: 3px 0;
  border-radius: 5px;
  background: #eef3f7;
  color: #6b7d90;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-align: center;
  transition: background 0.12s, color 0.12s;
}
.kielivalitsin-nimi { flex: 1; }
/* Väri ei ole ainoa merkki valinnasta: ✓ kertoo sen myös yksiselitteisesti. */
.kielivalitsin-merkki { flex: none; color: transparent; font-weight: 800; }
.kielivalitsin-rivi.valittu { background: #f3f7fa; color: var(--muste); font-weight: 600; }
.kielivalitsin-rivi.valittu .kielivalitsin-lyhenne { background: var(--muste); color: #fff; }
.kielivalitsin-rivi.valittu .kielivalitsin-merkki { color: var(--brandi); }

/* Kirjautumissivulla vaalea sävy, kielen nimi näkyy jo napissa ja
   valikko aukeaa ylöspäin, koska nappi on kortin alalaidassa. */
.kielivalitsin-login { margin-top: 14px; }
.login-kortti .kielivalitsin-login { display: inline-block; }
.kielivalitsin-login .kielivalitsin-nappi {
  padding: 7px 12px;
  font-size: 13px;
  background: rgba(23, 29, 31, 0.05);
  border-color: rgba(23, 29, 31, 0.14);
  color: #46586c;
}
.kielivalitsin-login .kielivalitsin-nappi:hover {
  background: rgba(23, 29, 31, 0.09);
  color: var(--muste);
}
.kielivalitsin-login.auki .kielivalitsin-nappi {
  background: var(--muste);
  border-color: var(--muste);
  color: #fff;
}
.kielivalitsin-login .kielivalitsin-nimi-nyt { font-weight: 600; letter-spacing: 0; }
.kielivalitsin-login .kielivalitsin-valikko {
  top: auto;
  bottom: calc(100% + 7px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  animation: kieliAukeaYlos 0.15s ease-out;
}
@keyframes kieliAukeaYlos {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
}
/* Yläpalkin nimi näkyy vain kirjautumissivulla — palkissa riittää koodi. */
.ylapalkki .kielivalitsin-nimi-nyt { display: none; }

/* Työkalurivin Tiedosto/Asetukset-valikot: vähemmän ahdas rivi,
   harvemmin tarvitut toiminnot aukeavat napista. */
.piir-valikko { position: relative; flex: none; }
.piir-valikko > summary {
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--reunavari);
  border-radius: 8px;
  background: #fff;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #46586c;
  white-space: nowrap;
  user-select: none;
}
.piir-valikko > summary::-webkit-details-marker { display: none; }
.piir-valikko > summary:hover { border-color: #b8c6d4; color: var(--muste); }
.piir-valikko[open] > summary {
  border-color: var(--muste);
  color: var(--muste);
}
.piir-valikko-sisus {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--reunavari);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 10px 30px rgba(23, 29, 31, 0.18);
}
.piir-valikko.piir-valikko-oikea .piir-valikko-sisus { left: auto; right: 0; }
.piir-valikko-sisus button { text-align: left; }
.piir-valikko-sisus .piir-mitat,
.piir-valikko-sisus .linja-valinta { margin: 0; white-space: nowrap; }

/* Paletti kategorioittain: supistettavat ryhmät väliotsikoin. */
/* Kohdistuksen tartuntapallot — "keskityspallot" näkyvät heti, kun
   asetusta vaihtaa, ja aina osaa raahatessa. */
.piir-ankkurit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}
.piir-ankkurit[hidden] { display: none; }
.piir-ankkuri {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: rgba(255, 90, 0, 0.85);
  border: 1px solid #fff;
  box-shadow: 0 0 3px rgba(23, 29, 31, 0.35);
}

/* Tyhjän kanvaan opaste: kolme askelta allekkain. */
.piir-tyhja {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  text-align: left;
  max-width: 400px;
}
.piir-tyhja b { font-size: 15px; color: var(--muste); }

/* ============================================================
   Vaihe 92: kumoa/zoom, monivalinta, tunnukset, nimiö
   ============================================================ */

/* Kumoa / tee uudelleen — kapeat nuolinapit työkalurivillä. */
.piir-kumoa { min-width: 34px; padding-left: 8px; padding-right: 8px; font-size: 15px; }
.piir-kumoa:disabled { opacity: 0.35; cursor: default; }

/* Zoomausryhmä. */
.piir-zoom { display: inline-flex; gap: 2px; flex: none; align-items: center; }
.piir-zoom button {
  border: 1px solid var(--reunavari);
  background: #fff;
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 13px;
  font-weight: 600;
  color: #46586c;
  cursor: pointer;
  white-space: nowrap;
}
.piir-zoom button:hover { border-color: #b8c6d4; color: var(--muste); }

/* Valintalaatikko (tyhjästä vedetty monivalinta). */
.piir-valintalaatikko {
  position: absolute;
  border: 1.5px dashed var(--brandi);
  background: rgba(255, 90, 0, 0.07);
  border-radius: 3px;
  pointer-events: none;
  z-index: 7;
}
.piir-valintalaatikko[hidden] { display: none; }

/* Ryhmävalinnan kehykset jokaiselle valitulle osalle. */
.piir-valinta-apu {
  position: absolute;
  border: 1.5px dashed var(--brandi);
  border-radius: 4px;
  pointer-events: none;
}

/* Ryhmäpaneelin väliotsikot. */
.piir-ryhma-otsikko {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7a8794;
  margin: 10px 0 4px;
}

/* Tunnusrivi: kenttä ja +1-nappi vierekkäin, tuplavaroitus alla. */
.piir-tunnusrivi { display: flex; gap: 6px; align-items: center; }
.piir-tunnusrivi input { flex: 1; min-width: 0; }
.piir-tunnusrivi button {
  border: 1px solid var(--reunavari);
  background: #fff;
  border-radius: 7px;
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 700;
  color: #46586c;
  cursor: pointer;
  flex: none;
}
.piir-tunnusrivi button:hover { border-color: #b8c6d4; color: var(--muste); }
.piir-tunnus-varoitus {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #b3261e;
  font-weight: 600;
}
.piir-tunnus-varoitus[hidden] { display: none; }

/* Asetukset-valikon nimiöosio. */
.piir-valikko-otsikko {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7a8794;
  margin-top: 6px;
}
/* Valikon selittävä pikkurivi (esim. läpinäkyvyys vientinapin alla). */
.piir-valikko-vihje {
  margin: -2px 0 2px 22px;
  font-size: 11px;
  line-height: 1.4;
  color: #8494a8;
}
.piir-nimio { display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.piir-nimio input {
  border: 1px solid var(--reunavari);
  border-radius: 7px;
  padding: 5px 8px;
  font: inherit;
  font-size: 13px;
}
.piir-nimio input:focus { border-color: var(--muste); outline: none; }

/* Vaihe 94: väripikavalinnat paneelissa. */
.piir-varinapit { display: flex; gap: 6px; margin-bottom: 10px; }
.piir-varinapit:empty { display: none; }
.piir-varinappi {
  width: 26px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(23, 29, 31, 0.25);
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s;
}
.piir-varinappi:hover { transform: scale(1.1); }
.piir-varinappi.valittu { outline: 2px solid var(--brandi); outline-offset: 1px; }

/* ============================================================
   Vaihe 95: väljempi paletti + liitostilan visualisointi
   ============================================================ */

/* Paletti hengittää: leveämpi palsta, luettavammat nimet. */
.piir-paletti { gap: 7px; }
.piir-lisays { padding: 8px 5px 7px; }
.piir-lisays-nimi { font-size: 11.5px; line-height: 1.25; }

/* Liitostilan portit sykkivät, jotta napautettava kohta erottuu. */
.piir-portti {
  animation: piir-portti-syke 1.6s ease-out infinite;
}
@keyframes piir-portti-syke {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 0, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(255, 90, 0, 0); }
}
.piir-portti.aktiivinen { animation: none; }

/* Laajeneva rengas kuittaa onnistuneen liitoksen. */
.piir-liitos-juhla {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 3px solid var(--brandi);
  border-radius: 50%;
  pointer-events: none;
  z-index: 8;
  animation: piir-juhla 0.65s ease-out forwards;
}
@keyframes piir-juhla {
  from { transform: scale(0.5); opacity: 1; }
  to { transform: scale(2.6); opacity: 0; }
}

/* Vaihe 96: aktiivinen työkalutila SYTTYY napissa — ilman tätä
   käyttäjä ei nähnyt työkaluriviltä, onko piirto/liitos/saksitila
   päällä. Oranssi erottaa tilan Ohje-napin tummasta. */
.piir-ohje-nappi[aria-pressed="true"] {
  background: var(--brandi);
  border-color: var(--brandi);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.18);
}
.piir-ohje-nappi[aria-pressed="true"]:hover {
  background: #e04e00;
  border-color: #e04e00;
  color: #fff;
}

/* ===== Vaihe 97: virtausanimaatio, pikahaku ja säiliösuunnittelija ===== */

/* Virtaus: aine liikkuu putken sisalla. Kaikilla kerroksilla sama 54 px:n
   jakso ja sama nopeus (noin 22 px/s); vain lahtovaihe eroaa, jolloin
   kiilto istuu annoksen paalla ja vana jaa sen taakse. */
.piir-virta { pointer-events: none; animation: piir-virtaa 2.4s linear infinite; }
.piir-virta-annos { animation-name: piir-virtaa-annos; }
.piir-virta-vana { animation-name: piir-virtaa-vana; }
@keyframes piir-virtaa { from { stroke-dashoffset: -4px; } to { stroke-dashoffset: -58px; } }
@keyframes piir-virtaa-annos { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -54px; } }
@keyframes piir-virtaa-vana { from { stroke-dashoffset: 9px; } to { stroke-dashoffset: -45px; } }
@media (prefers-reduced-motion: reduce) {
  .piir-virta,
  .piir-virta-annos,
  .piir-virta-vana { animation: none; }
}

.piir-haku-tausta,
.piir-paja-tausta {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  background: rgba(10, 27, 44, 0.32);
  backdrop-filter: blur(3px);
}
.piir-haku-tausta { align-items: flex-start; padding-top: 11vh; }
.piir-paja-tausta { align-items: center; padding: 18px; }

.piir-haku {
  width: min(560px, 94vw);
  background: rgba(255, 255, 255, 0.97);
  border-radius: 14px;
  border: 1px solid var(--viiva);
  box-shadow: 0 24px 70px rgba(10, 27, 44, 0.35);
  overflow: hidden;
}
.piir-haku input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--viiva);
  border-radius: 0;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 600;
  outline: none;
  background: transparent;
}
.piir-haku-lista { max-height: 46vh; overflow: auto; padding: 6px; }
.piir-haku-rivi {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  background: transparent;
  border-radius: 9px;
  padding: 9px 11px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muste);
  cursor: pointer;
  text-align: left;
}
.piir-haku-rivi.valittu { background: var(--brandi); color: #fff; }
.piir-haku-laji { font-size: 11px; font-weight: 700; opacity: 0.55; white-space: nowrap; }
.piir-haku-rivi.valittu .piir-haku-laji { opacity: 0.85; }
.piir-haku-tyhja { padding: 14px; margin: 0; color: #6b7c90; font-size: 14px; }

.piir-paja {
  width: min(680px, 96vw);
  max-height: 92vh;
  overflow: auto;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--viiva);
  box-shadow: 0 24px 70px rgba(10, 27, 44, 0.35);
  padding: 18px 20px;
}
.piir-paja h3 { margin: 0 0 4px; font-size: 18px; color: var(--muste); }
.piir-paja-seloste { margin: 0 0 14px; font-size: 13px; color: #5c6f7d; }
.piir-paja-runko { display: flex; gap: 18px; align-items: stretch; }
.piir-paja-runko svg {
  flex: 0 0 240px;
  min-height: 260px;
  background: linear-gradient(180deg, #f6f9fc, #e9eff5);
  border: 1px solid var(--viiva);
  border-radius: 12px;
  padding: 10px;
}
.piir-paja-saatimet { flex: 1; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.piir-paja-saatimet label {
  display: grid;
  grid-template-columns: 96px 1fr 52px;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muste);
}
.piir-paja-saatimet label > span { font-size: 12px; color: #5c6f7d; text-align: right; }
.piir-paja-saatimet select,
.piir-paja-saatimet input[type="text"] { grid-column: 2 / 4; }
.piir-paja-napit { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
@media (max-width: 640px) {
  .piir-paja-runko { flex-direction: column; }
  .piir-paja-runko svg { flex-basis: auto; width: 100%; }
}

/* ===== Vaihe 99: paletin ja paneelin kehykset + kapean näytön napit ===== */

.piir-paneeli-kahva button {
  display: none;
  border: 0;
  background: #eef2f6;
  border-radius: 999px;
  width: 30px;
  height: 30px;
  font-size: 14px;
  color: #46586c;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.piir-paneeli-kahva button:hover { background: var(--muste); color: #fff; }
.piir-paneeli-kahva { display: none; }

@media (max-width: 900px) {
  .piir-paneeli-kahva {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 800;
    color: var(--muste);
  }
  .piir-paneeli-kahva button { display: inline-flex; }
}

/* ===== Vaihe 101: ryhmitelty työkalurivi, tarkistus, vaihto, kehys ===== */

/* Työkalurivin ryhmät: napit kuuluvat näkyvästi yhteen ja ryhmien
   väliin jää ohut erotin — rivi lakkaa olemasta nappimeri. */
.piir-nappiryhma { display: inline-flex; align-items: center; gap: 5px; }
.piir-erotin {
  /* flex: none — muuten erotin on ensimmäinen, joka kutistuu nollaan
     ahtaalla työkalurivillä, ja ryhmät sulautuisivat taas yhteen. */
  flex: none;
  width: 1px;
  min-height: 20px;
  align-self: stretch;
  margin: 3px;
  background: var(--reunavari);
}

/* Tarkistusnapin merkkiluku. */
.piir-merkki {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  margin-left: 5px;
  padding: 0 4px;
  border-radius: 999px;
  background: #b3261e;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.piir-ohje-nappi[aria-pressed="true"] .piir-merkki { background: #fff; color: var(--brandi); }

/* Piirustuskehys piirtyy SVG:hen (Vaihe 222, symbols.js arkkiKehys),
   joten sama kehys on ruudulla ja jokaisessa viennissä. */

/* Kosketus: selain ei saa napata kahden sormen zoomia itselleen. */
.piir-kanvas-kaari { touch-action: pan-x pan-y; }

.piir-tarkistus-paa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px 11px;
  border-bottom: 1px solid var(--viiva);
}
.piir-tarkistus-paa h3 { margin: 0; font-size: 16px; color: var(--muste); }
.piir-tarkistus-paa button {
  border: 0;
  background: #eef2f6;
  border-radius: 999px;
  width: 28px;
  height: 28px;
  font-size: 13px;
  color: #46586c;
  cursor: pointer;
}
.piir-tarkistus-paa button:hover { background: var(--muste); color: #fff; }
.piir-tarkistus-ok { padding: 18px 16px; margin: 0; font-size: 14px; color: #2f7d4f; font-weight: 600; }

.piir-vaihto input[type="text"] {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--viiva);
  border-radius: 0;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  outline: none;
  background: transparent;
}
.piir-vaihto-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(96px, 100%), 1fr));
  gap: 7px;
  max-height: 52vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
}
.piir-lisays-nyky { border-color: var(--brandi); box-shadow: 0 0 0 2px rgba(255, 90, 0, 0.18); }

/* ===== Vaihe 103: yhdeportit ja raahattavat portit ===== */

/* Yhteen portti erottuu perusporteista: se on laitteen oma
   liitäntäpiste, johon putki osuu täsmälleen. */
.piir-portti-yhde {
  background: #0072c6;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}
.piir-portti { cursor: grab; touch-action: none; }
.piir-portti:active { cursor: grabbing; }

.piir-paja-vihje {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: #5c6f7d;
  line-height: 1.45;
}
.piir-paja-saatimet label[hidden] { display: none !important; }

/* ===== Vaihe 104: taustojen pikakoot ===== */

.piir-kokonapit { display: flex; gap: 5px; margin-top: 5px; }
.piir-kokonapit[hidden] { display: none !important; }
.piir-kokonappi {
  flex: 1;
  padding: 5px 4px;
  border: 1px solid var(--reunavari);
  border-radius: 7px;
  background: #fff;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: #46586c;
  cursor: pointer;
}
.piir-kokonappi:hover { border-color: var(--muste); background: var(--muste); color: #fff; }

/* ===== Vaihe 105: piirtoalue etusijalle ===== */

/* Symbolikirjaston nappi on työkalurivin pääsisäänkäynti, joten se
   erottuu muista. */
.piir-tyokalurivi .piir-paanappi {
  background: var(--muste);
  border-color: var(--muste);
  color: #fff;
  font-weight: 700;
}
.piir-tyokalurivi .piir-paanappi:hover { background: #0a1b2c; border-color: #0a1b2c; color: #fff; }
.piir-tyokalurivi .piir-paanappi[aria-pressed="true"] { background: var(--brandi); border-color: var(--brandi); }

/* Alle 1280 px napit kutistuvat kuvakkeiksi, jotta työkalurivi pysyy
   YHDELLÄ rivillä eikä syö piirtoalueen korkeutta. Selitteet ovat
   nappien title-teksteissä. */
@media (max-width: 1280px) {
  .nappiteksti { display: none; }
}

/* ===== Vaihe 106: säiliöpajan ryhmäotsikko ===== */

.piir-paja-otsikko {
  grid-column: 1 / -1;
  margin: 6px 0 -2px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #8494a8;
}

/* ===== Vaihe 107: merkintätyökalu ===== */

.piir-merkintavalinta {
  max-width: 168px;
  padding: 6px 8px;
  border: 1px solid var(--reunavari);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 12.5px;
  color: #46586c;
}
@media (max-width: 1280px) {
  .piir-merkintavalinta { max-width: 122px; font-size: 12px; }
}

/* ===== Vaihe 108: kerrosluettelo ===== */

.piir-kerros-ohje {
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--viiva);
  font-size: 12.5px;
  line-height: 1.55;
  color: #5c6f7d;
  background: #f7f9fc;
}
/* Kerroksen koko ja läpinäkyvyys näkyviin ennen kopiointia (Vaihe 168):
   käyttäjä ei muuten tiedä, minkä kokoista kuvaa hän on liittämässä. */
.piir-kerros-koko {
  margin: 0;
  padding: 8px 16px;
  border-bottom: 1px solid var(--viiva);
  font-size: 12px;
  font-weight: 700;
  color: #46586c;
}
.piir-kerros-koko:empty { display: none; }
.piir-kerros-lista { max-height: 44vh; overflow-y: auto; padding: 8px; }
.piir-kerrosrivi {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 9px;
}
.piir-kerrosrivi:hover { background: #f2f5f9; }
.piir-kerrosrivi.tehty .piir-kerrosnimi { color: #8494a8; }
.piir-kerrosnro {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eef2f6;
  font-size: 12px;
  font-weight: 800;
  color: #46586c;
}
.piir-kerrosrivi.tehty .piir-kerrosnro { background: #2f7d4f; color: #fff; }
.piir-kerrosnimi {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muste);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.piir-kerrosrivi button {
  flex: none;
  padding: 5px 10px;
  border: 1px solid var(--reunavari);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #46586c;
  cursor: pointer;
}
.piir-kerrosrivi button:hover { background: var(--muste); border-color: var(--muste); color: #fff; }
.piir-kerros-napit {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--viiva);
}


/* ============================================================
   Vaihe 109: yhtenäinen muotokieli
   Sama suunnittelukieli kuin MARUFLOW-toiminnanohjauksessa:
   teollinen kavennettu otsikkofontti, pehmeä syvyys, oranssi
   korostus ja johdonmukaiset painikkeet. Kaikki lisäykset ovat
   tyylikerroksia — mikään toiminnallisuus ei muutu.
   ============================================================ */

:root {
  /* Muotoilun perusmitat: sama asteikko kaikkialla, ei irrallisia
     pikseliarvoja siellä täällä. */
  --pi-radius: 12px;
  --pi-radius-sm: 8px;
  --pi-radius-xs: 6px;
  --pi-varjo-s: 0 1px 2px rgba(23, 29, 31, 0.06), 0 1px 3px rgba(23, 29, 31, 0.08);
  --pi-varjo-m: 0 4px 12px rgba(23, 29, 31, 0.1);
  --pi-varjo-l: 0 12px 32px rgba(23, 29, 31, 0.18);
  --pi-siirtyma: 0.16s;
  /* Järjestelmäfontit: ei ulkoisia latauksia (tiukka CSP, ei
     verkkopyyntöjä). Bahnschrift antaa Windowsilla saman teollisen
     otsikkoilmeen kuin toiminnanohjauksessa. */
  --pi-fontti: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --pi-otsikkofontti: 'Bahnschrift', 'Segoe UI Semibold', 'Segoe UI', system-ui, sans-serif;
}

body {
  font-family: var(--pi-fontti);
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}

/* Otsikot kavennetulla teollisella fontilla — sama ryhti kuin
   toiminnanohjauksen näkymissä. */
h1, h2, h3,
.piir-otsikko,
.tyopoyta-ylapaa h2,
.piir-paneeli h3,
.piir-tarkistus-paa h3,
.piir-paja h3 {
  font-family: var(--pi-otsikkofontti);
  letter-spacing: 0.2px;
}

/* Ohut brändätty vierityspalkki kaikkialle. */
* { scrollbar-width: thin; scrollbar-color: #cdd6e0 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #cdd6e0;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--brandi); background-clip: padding-box; }

::selection { background: rgba(255, 90, 0, 0.18); }

/* ---------- painikkeet ----------
   Yksi käyttäytyminen kaikille: pehmeä siirtymä, kohoaminen
   hoverilla, painuminen klikkauksessa ja näkyvä fokusrengas. */
.piir-tyokalurivi button,
.tyopoyta-alapaa button,
.piir-napit button,
.piir-kat-nappi,
.piir-tuo-laite,
.piir-kokonappi,
.piir-kerrosrivi button,
.piir-paja-napit button,
.tyopoyta-avaa {
  transition: background var(--pi-siirtyma), border-color var(--pi-siirtyma),
    color var(--pi-siirtyma), box-shadow var(--pi-siirtyma), transform 0.08s;
}
.piir-tyokalurivi button:hover:not(:disabled),
.tyopoyta-alapaa button:hover:not(:disabled),
.piir-napit button:hover:not(:disabled),
.piir-kat-nappi:hover,
.piir-tuo-laite:hover,
.piir-kerrosrivi button:hover { box-shadow: var(--pi-varjo-s); }
.piir-tyokalurivi button:active:not(:disabled),
.tyopoyta-alapaa button:active:not(:disabled),
.piir-napit button:active:not(:disabled),
.piir-kat-nappi:active,
.piir-kokonappi:active,
.piir-kerrosrivi button:active { transform: translateY(1px); box-shadow: none; }

/* Täytetyt päänapit saavat syvyyden ja kohoavat hoverilla. */
.tyopoyta-alapaa .paanappi,
.piir-tyokalurivi .piir-paanappi,
.piir-paja-napit .paanappi,
.tyopoyta-avaa {
  box-shadow: 0 2px 6px rgba(23, 29, 31, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.tyopoyta-alapaa .paanappi:hover,
.piir-tyokalurivi .piir-paanappi:hover,
.piir-paja-napit .paanappi:hover,
.tyopoyta-avaa:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(23, 29, 31, 0.26); }
.piir-tyokalurivi .piir-paanappi[aria-pressed="true"],
.piir-ohje-nappi[aria-pressed="true"] {
  box-shadow: 0 2px 8px rgba(255, 90, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Näppäimistökäyttäjä näkee aina, missä kohdistus on. */
button:focus-visible,
select:focus-visible,
input:focus-visible,
summary:focus-visible,
a:focus-visible,
.piir-lisays:focus-visible,
.piir-kat-nappi:focus-visible {
  outline: 2px solid var(--brandi);
  outline-offset: 2px;
  border-radius: var(--pi-radius-xs);
}

/* Kuvakenapit ovat samanlevyisiä, jolloin työkalurivi näyttää
   suunnitellulta eikä sekalaiselta emojiriviltä. */
@media (max-width: 1280px) {
  .piir-tyokalurivi .piir-ohje-nappi {
    min-width: 36px;
    justify-content: center;
  }
}
.piir-tyokalurivi .piir-ohje-nappi { display: inline-flex; align-items: center; gap: 2px; }

/* ---------- pinnat ---------- */
.piir-tyokalurivi {
  background: linear-gradient(180deg, #ffffff, #f7f9fc);
  box-shadow: 0 1px 0 rgba(23, 29, 31, 0.05);
}
.piir-valitsin-kortti,
.piir-haku,
.piir-paja { box-shadow: var(--pi-varjo-l); }
.piir-kanvas { box-shadow: 0 6px 24px rgba(23, 29, 31, 0.13); }
.piir-paneeli { background: linear-gradient(180deg, #ffffff, #fbfcfe); }
.tyopoyta-alapaa { background: linear-gradient(180deg, #fafbfd, #f4f7fa); }

/* Paneelin osiot erottuvat toisistaan ohuella viivalla, jolloin
   pitkä säädinlista jäsentyy ilman ylimääräisiä otsikoita. */
.piir-paneeli > div > .piir-napit { border-top: 1px solid var(--reunavari); padding-top: 12px; margin-top: 4px; }

/* Symbolikortit: hienovarainen kohoaminen ja valinnan korostus. */
.piir-lisays { transition: border-color var(--pi-siirtyma), box-shadow var(--pi-siirtyma), transform 0.08s; }
.piir-lisays:hover { transform: translateY(-1px); }
.piir-lisays:active { transform: translateY(0); }

/* Ilmoitus nousee pohjalta samalla rytmillä kuin muu käyttöliittymä. */
.ilmo { box-shadow: var(--pi-varjo-l); border-radius: 999px; }

/* Yläpalkin tuotenimi: sama harvennettu teollinen ilme kuin
   kirjautumissivun lukossa. */
.ylapalkki .brandi span {
  font-family: var(--pi-otsikkofontti);
  letter-spacing: 2px;
}
.ylapalkki .ohje { font-size: 13px; letter-spacing: 0.1px; }

/* Pienet ryhmäotsikot: sama versaalityyli kaikkialla. */
.piir-ryhma-otsikko,
.piir-valikko-otsikko,
.piir-paja-otsikko {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8494a8;
}

/* Liukusäätimet brändin väreillä — oletusselaimen sininen ei
   kuulu tähän ilmeeseen. */
/* Aiemmat säännöt ovat tarkempia (.piir-paneeli input[type=range]),
   joten brändiväri annetaan samalla tarkkuudella. */
.piir-paneeli input[type="range"],
.linja-lista input[type="range"],
input[type="range"] { accent-color: var(--brandi); }
input[type="checkbox"] { accent-color: var(--muste); }

@media (prefers-reduced-motion: reduce) {
  .piir-tyokalurivi button,
  .tyopoyta-alapaa button,
  .piir-kat-nappi,
  .piir-lisays,
  .tyopoyta-avaa { transition: none; }
}

/* ===== Vaihe 111: taustakorttien kokovalinnat ===== */

.kortti-koot {
  display: flex;
  gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--reunavari);
}
.kortti-koot button {
  flex: 1;
  padding: 5px 4px;
  border: 1px solid var(--reunavari);
  border-radius: var(--pi-radius-xs, 6px);
  background: #fff;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: #46586c;
  cursor: pointer;
  transition: background var(--pi-siirtyma, 0.16s), border-color var(--pi-siirtyma, 0.16s),
    color var(--pi-siirtyma, 0.16s), box-shadow var(--pi-siirtyma, 0.16s), transform 0.08s;
}
.kortti-koot button:hover {
  background: var(--muste);
  border-color: var(--muste);
  color: #fff;
  box-shadow: var(--pi-varjo-s, 0 1px 3px rgba(23, 29, 31, 0.08));
}
.kortti-koot button:active { transform: translateY(1px); box-shadow: none; }

/* ============================================================
   Vaihe 112: pehmeämpi typografia
   Bahnschrift on kavennettu ja teollinen — hyvä tuotelukossa,
   mutta pienissä otsikoissa se luki kankeana. Otsikot käyttävät
   nyt Segoe UI:n Variable/Semibold-leikkausta, joka on samaa
   perhettä leipätekstin kanssa mutta selvästi pehmeämpi.
   ============================================================ */

:root {
  --pi-fontti: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system,
    Roboto, Helvetica, Arial, sans-serif;
  --pi-otsikkofontti: 'Segoe UI Variable Display', 'Segoe UI Semibold',
    'Segoe UI', system-ui, sans-serif;
}

h1, h2, h3,
.piir-otsikko,
.tyopoyta-ylapaa h2,
.piir-paneeli h3,
.piir-tarkistus-paa h3,
.piir-paja h3 {
  font-family: var(--pi-otsikkofontti);
  font-weight: 650;
  letter-spacing: -0.1px;
}

/* Isot otsikot hengittävät hieman tiiviimmällä kirjainvälillä. */
.tyopoyta-ylapaa h2 { font-size: 21px; letter-spacing: -0.3px; }
.piir-otsikko { font-size: 17.5px; letter-spacing: -0.2px; }
.piir-paja h3, .piir-tarkistus-paa h3 { font-size: 17px; letter-spacing: -0.2px; }
.piir-paneeli h3 { font-size: 15.5px; letter-spacing: -0.1px; }

/* Tuotelukko säilyttää teollisen kavennetun ilmeen — siellä se on
   tunnus, ei luettavaa tekstiä. */
.ylapalkki .brandi span {
  font-family: 'Bahnschrift', 'Segoe UI Semibold', 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 2px;
}

/* Leipäteksti: hieman ilmavampi ja pehmeämpi. */
body { letter-spacing: 0.05px; }
.piir-vihje, .piir-paja-seloste, .ylapalkki .ohje { line-height: 1.55; }

/* Säiliöpaja avautuu myös etusivulta, joten se ei saa jäädä
   piirustusikkunan alle. */
.piir-paja-siirretty { z-index: 220; }


/* ============================================================
   Vaihe 114: viimeistelty ohjainkieli
   Litteä musta pilleri ja selaimen oletusliukusäädin veivät
   ilmeeltä uskottavuuden. Nyt jokainen ohjain on rakennettu:
   syvyys tulee kerroksista (yläkiilto + reunaviiva + pehmeä varjo),
   korostus brändin oranssista, ja liike on hillittyä.
   ============================================================ */

:root {
  --pi-kiilto: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --pi-reuna-sisa: inset 0 0 0 1px rgba(23, 29, 31, 0.06);
  --pi-oranssi-hehku: 0 6px 18px rgba(255, 90, 0, 0.28);
  --pi-muste-hehku: 0 8px 20px rgba(23, 29, 31, 0.26);
  /* Valittu tila: lämmin kerma brändin oranssista, ei mustaa läiskää.
     Sävy on niin vaalea, että teksti pysyy tummana ja rivi kevyenä. */
  --pi-valinta: linear-gradient(180deg, #fff9f4 0%, #ffeadd 52%, #ffdfcd 100%);
  --pi-valinta-hover: linear-gradient(180deg, #fffcf9 0%, #fff0e6 52%, #ffe6d7 100%);
  --pi-valinta-reuna: #ffbe93;
  --pi-valinta-teksti: #9e3800;
  --pi-valinta-hehku: 0 4px 14px rgba(255, 122, 51, 0.22);
  --pi-valinta-kiilto: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ---------- kategoriapilleri: kohotettu näppäin ----------
   Valittu ei ole enää litteä musta läiskä vaan grafiitista taitettu
   näppäin, jossa on yläkiilto, oranssi alareunakaista ja lämmin
   varjo. Valitsemattomat saavat hienovaraisen pystyliukuvärin,
   jolloin rivi näyttää harkitulta eikä piirretyltä. */
.kat,
.piir-kat-nappi,
.taustavalinta button {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fa 100%);
  border: 1px solid #dbe3ec;
  box-shadow: var(--pi-reuna-sisa), 0 1px 1px rgba(23, 29, 31, 0.04);
  transition: background var(--pi-siirtyma), border-color var(--pi-siirtyma),
    box-shadow var(--pi-siirtyma), color var(--pi-siirtyma), transform 0.09s;
}
.kat:hover,
.piir-kat-nappi:hover,
.taustavalinta button:hover {
  border-color: #c2cfdb;
  box-shadow: var(--pi-reuna-sisa), 0 3px 10px rgba(23, 29, 31, 0.1);
  transform: translateY(-1px);
}
.kat:active,
.piir-kat-nappi:active,
.taustavalinta button:active { transform: translateY(0); box-shadow: var(--pi-reuna-sisa); }

.kat.valittu,
.piir-kat-nappi[aria-selected="true"],
.taustavalinta button.valittu {
  background: var(--pi-valinta);
  border-color: var(--pi-valinta-reuna);
  color: var(--pi-valinta-teksti);
  font-weight: 650;
  box-shadow: var(--pi-valinta-kiilto), var(--pi-valinta-hehku),
    inset 0 0 0 1px rgba(255, 138, 69, 0.35);
}
/* Oranssi valokaista kertoo valinnan ilman että se huutaa. */
.kat.valittu::after,
.piir-kat-nappi[aria-selected="true"]::after,
.taustavalinta button.valittu::after {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--brandi), transparent);
  box-shadow: 0 0 8px rgba(255, 90, 0, 0.55);
}
.kat.valittu:hover,
.piir-kat-nappi[aria-selected="true"]:hover,
.taustavalinta button.valittu:hover {
  background: var(--pi-valinta-hover);
  border-color: #ffab77;
  transform: translateY(-1px);
  box-shadow: var(--pi-valinta-kiilto), 0 8px 20px rgba(255, 122, 51, 0.28),
    inset 0 0 0 1px rgba(255, 138, 69, 0.45);
}

.taustavalinta button { padding: 7px 13px; border-radius: 8px; font-weight: 600; color: #46586c; }

/* ---------- liukusäätimet: rakennettu, ei oletus ----------
   Rata näyttää täytön brändin oranssilla (--taytto asetetaan
   JS:llä), ja nuppi on kaksikerroksinen: valkoinen levy varjoineen
   ja sisällä oranssi ydin. Kosketuskohde on iso, ulkoasu hillitty. */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 7px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--brandi) 0%, #ff7a33 var(--taytto, 50%), rgba(0, 0, 0, 0) var(--taytto, 50%)),
    linear-gradient(180deg, #dde5ed, #eaf0f5);
  box-shadow: inset 0 1px 2px rgba(23, 29, 31, 0.16), inset 0 0 0 1px rgba(23, 29, 31, 0.05);
}
input[type="range"]::-moz-range-track {
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #dde5ed, #eaf0f5);
  box-shadow: inset 0 1px 2px rgba(23, 29, 31, 0.16);
}
input[type="range"]::-moz-range-progress {
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brandi), #ff7a33);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -6.5px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--brandi) 0 4.5px, rgba(0, 0, 0, 0) 4.6px),
    linear-gradient(180deg, #ffffff, #f2f5f8);
  border: 1px solid #c3cedb;
  box-shadow: 0 2px 5px rgba(23, 29, 31, 0.22), inset 0 1px 0 #fff;
  transition: transform 0.1s, box-shadow var(--pi-siirtyma), border-color var(--pi-siirtyma);
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--brandi) 0 4.5px, rgba(0, 0, 0, 0) 4.6px),
    linear-gradient(180deg, #ffffff, #f2f5f8);
  border: 1px solid #c3cedb;
  box-shadow: 0 2px 5px rgba(23, 29, 31, 0.22), inset 0 1px 0 #fff;
}
input[type="range"]:hover::-webkit-slider-thumb {
  transform: scale(1.08);
  border-color: var(--brandi);
  box-shadow: 0 3px 9px rgba(23, 29, 31, 0.26), 0 0 0 4px rgba(255, 90, 0, 0.14), inset 0 1px 0 #fff;
}
input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(0.97);
  box-shadow: 0 1px 3px rgba(23, 29, 31, 0.3), 0 0 0 5px rgba(255, 90, 0, 0.2), inset 0 1px 0 #fff;
}
input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.35), 0 3px 9px rgba(23, 29, 31, 0.26);
}
input[type="range"]:focus-visible { outline: none; }

/* ---------- värivalitsimet: pieniä laattoja, ei täpliä ---------- */
.vari {
  width: 27px;
  height: 27px;
  border: 0;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(23, 29, 31, 0.16), inset 0 2px 4px rgba(255, 255, 255, 0.28),
    0 1px 2px rgba(23, 29, 31, 0.14);
  transition: transform 0.12s, box-shadow var(--pi-siirtyma);
}
.vari:hover { transform: translateY(-2px) scale(1.06); box-shadow: inset 0 0 0 1px rgba(23, 29, 31, 0.2), 0 4px 10px rgba(23, 29, 31, 0.2); }
.vari.valittu {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 0 0 2px var(--brandi),
    0 4px 12px rgba(255, 90, 0, 0.32);
}
.varit { gap: 7px; }

/* ---------- valintalistat ja tekstikentät ---------- */
.saatimet select,
.piir-paneeli select,
.piir-valikko-sisus select,
.piir-paja-saatimet select,
.piir-merkintavalinta {
  -webkit-appearance: none;
  appearance: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2346586c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
    linear-gradient(180deg, #ffffff, #f6f8fb);
  background-repeat: no-repeat, no-repeat;
  background-position: right 11px center, 0 0;
  background-size: 12px 8px, auto;
  padding-right: 32px;
  box-shadow: var(--pi-reuna-sisa);
  transition: border-color var(--pi-siirtyma), box-shadow var(--pi-siirtyma);
}
.saatimet select:hover,
.piir-paneeli select:hover { border-color: #b8c6d4; box-shadow: var(--pi-reuna-sisa), 0 2px 6px rgba(23, 29, 31, 0.08); }

.saatimet input[type="text"],
.saatimet input[type="search"],
.piir-paneeli input[type="text"],
#haku {
  box-shadow: var(--pi-reuna-sisa);
  transition: border-color var(--pi-siirtyma), box-shadow var(--pi-siirtyma);
}
.saatimet input[type="text"]:focus,
.piir-paneeli input[type="text"]:focus,
#haku:focus {
  border-color: var(--brandi);
  box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.14);
  outline: none;
}

/* Oman värin valitsin näyttää laatalta muiden joukossa. */
.saadin input[type="color"] {
  width: 34px;
  height: 27px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(23, 29, 31, 0.16), 0 1px 2px rgba(23, 29, 31, 0.14);
  cursor: pointer;
}

/* Säädinlohkot: kortteja, ei irrallisia rivejä. */
.saatimet .saadin {
  padding: 12px 14px;
  border-radius: var(--pi-radius, 12px);
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
  box-shadow: var(--pi-reuna-sisa), 0 1px 2px rgba(23, 29, 31, 0.05);
}
.saadin label {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7d8ea1;
}
.saadin .arvo { color: var(--brandi); font-weight: 800; letter-spacing: 0; text-transform: none; }

@media (prefers-reduced-motion: reduce) {
  .kat, .piir-kat-nappi, .taustavalinta button, .vari,
  input[type="range"]::-webkit-slider-thumb { transition: none; }
}


/* Vanha .saadin-kohtainen nuppitiedosto on tarkempi kuin uusi yleinen
   sääntö, joten sama viimeistely annetaan samalla tarkkuudella. Ilman
   tätä etusivun säätimissä näkyi yhä selaimen vanha tumma nuppi. */
.saadin input[type="range"]::-webkit-slider-thumb,
.piir-paneeli input[type="range"]::-webkit-slider-thumb,
.linja-lista input[type="range"]::-webkit-slider-thumb,
.piir-paja-saatimet input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -6.5px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--brandi) 0 4.5px, rgba(0, 0, 0, 0) 4.6px),
    linear-gradient(180deg, #ffffff, #f2f5f8);
  border: 1px solid #c3cedb;
  box-shadow: 0 2px 5px rgba(23, 29, 31, 0.22), inset 0 1px 0 #fff;
  transition: transform 0.1s, box-shadow var(--pi-siirtyma), border-color var(--pi-siirtyma);
}
.saadin input[type="range"]:hover::-webkit-slider-thumb,
.piir-paneeli input[type="range"]:hover::-webkit-slider-thumb,
.linja-lista input[type="range"]:hover::-webkit-slider-thumb,
.piir-paja-saatimet input[type="range"]:hover::-webkit-slider-thumb {
  transform: scale(1.08);
  border-color: var(--brandi);
  box-shadow: 0 3px 9px rgba(23, 29, 31, 0.26), 0 0 0 4px rgba(255, 90, 0, 0.14), inset 0 1px 0 #fff;
}
.saadin input[type="range"]::-moz-range-thumb,
.piir-paneeli input[type="range"]::-moz-range-thumb,
.linja-lista input[type="range"]::-moz-range-thumb,
.piir-paja-saatimet input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--brandi) 0 4.5px, rgba(0, 0, 0, 0) 4.6px),
    linear-gradient(180deg, #ffffff, #f2f5f8);
  border: 1px solid #c3cedb;
  box-shadow: 0 2px 5px rgba(23, 29, 31, 0.22), inset 0 1px 0 #fff;
}
.saadin input[type="range"]::-webkit-slider-runnable-track,
.piir-paneeli input[type="range"]::-webkit-slider-runnable-track,
.linja-lista input[type="range"]::-webkit-slider-runnable-track,
.piir-paja-saatimet input[type="range"]::-webkit-slider-runnable-track {
  height: 7px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--brandi) 0%, #ff7a33 var(--taytto, 50%), rgba(0, 0, 0, 0) var(--taytto, 50%)),
    linear-gradient(180deg, #dde5ed, #eaf0f5);
  box-shadow: inset 0 1px 2px rgba(23, 29, 31, 0.16), inset 0 0 0 1px rgba(23, 29, 31, 0.05);
}


/* ============================================================
   Vaihe 115: kirjasto näkyviin ja kokonaan ruutuun
   Kortti oli niin kapea, että kategoriarivi leikkautui reunasta,
   ja avausnappi oli kutistunut pelkäksi kuvakkeeksi vaikka se on
   koko osion tärkein painike.
   ============================================================ */

/* Kortti saa leveyttä ja kategoriat rivittyvät — mikään ryhmä ei
   jää enää reunan taakse. */
.piir-valitsin { padding: 12px; }
.piir-valitsin-kortti { width: min(1180px, 100%); }
.piir-kat-napit { flex-wrap: wrap; row-gap: 6px; }
.piir-kategoriat { row-gap: 8px; }
.piir-paletti { max-height: min(56vh, 460px); }

/* Kapealla näytöllä haku ottaa oman rivinsä, jolloin kategorioille
   jää koko leveys. */
@media (max-width: 900px) {
  .piir-kategoriat input[type="search"] { flex: 1 1 100%; }
  .piir-paletti { max-height: 48vh; }
}

/* ---------- kirjaston avausnappi ----------
   Tämä on työkalurivin tärkein painike, joten se on brändin
   oranssi ja pitää tekstinsä myös ahtaalla näytöllä. Avattuna se
   vaihtuu grafiitiksi, jolloin tila näkyy yhdellä silmäyksellä. */
.piir-tyokalurivi .piir-paanappi {
  padding: 7px 15px;
  font-weight: 700;
  background: linear-gradient(180deg, #ff8a45 0%, #ff5a00 60%, #f25400 100%);
  border-color: #dd4e00;
  color: #fff;
  box-shadow: var(--pi-kiilto), 0 3px 10px rgba(255, 90, 0, 0.32);
}
.piir-tyokalurivi .piir-paanappi:hover {
  background: linear-gradient(180deg, #ff9755 0%, #ff6510 60%, #f75a05 100%);
  border-color: #d24a00;
  transform: translateY(-1px);
  box-shadow: var(--pi-kiilto), 0 6px 16px rgba(255, 90, 0, 0.4);
}
/* Avattuna nappi painuu pehmeaksi kermaksi — tila nakyy yha
   yhdella silmayksella, mutta rivi ei tummu. */
.piir-tyokalurivi .piir-paanappi[aria-pressed="true"] {
  background: var(--pi-valinta);
  border-color: var(--pi-valinta-reuna);
  color: var(--pi-valinta-teksti);
  box-shadow: inset 0 2px 5px rgba(196, 96, 40, 0.22),
    inset 0 0 0 1px rgba(255, 138, 69, 0.4);
}
.piir-tyokalurivi .piir-paanappi[aria-pressed="true"]:hover {
  background: var(--pi-valinta-hover);
  border-color: #ffab77;
  box-shadow: inset 0 2px 5px rgba(196, 96, 40, 0.18),
    inset 0 0 0 1px rgba(255, 138, 69, 0.5);
}
/* Avausnapin teksti ei katoa, vaikka muut napit kutistuvat
   kuvakkeiksi — juuri tämä nappi pitää tunnistaa ilman arvailua. */
.piir-paanappi-teksti { display: inline; }
@media (max-width: 700px) {
  .piir-paanappi-teksti { display: none; }
}


/* ============================================================
   Vaihe 116: yhde on piirtotilassa putken lähtökahva
   Pallo on leveämpi kuin tartuntasäde, joten se peitti koko
   kohdistusalueen. Nyt pallo itse aloittaa putken, ja se näyttää
   siltä: tähtäin kursorina ja hehkuva rengas ympärillä.
   ============================================================ */
.piir-portti-veto {
  cursor: crosshair;
  box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.22), 0 1px 4px rgba(15, 26, 32, 0.28);
}
.piir-portti-veto:hover {
  box-shadow: 0 0 0 6px rgba(255, 90, 0, 0.28), 0 2px 8px rgba(15, 26, 32, 0.34);
  transform: translate(-50%, -50%) scale(1.15);
}
.piir-portti-yhde.piir-portti-veto {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 5px rgba(0, 114, 198, 0.28);
}
.piir-portti-yhde.piir-portti-veto:hover {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 8px rgba(0, 114, 198, 0.32);
}


/* ============================================================
   Vaihe 117: pehmeä valinta myös työkalutiloihin
   Musta tausta tuntui synkältä. Kaikki valitut tilat käyttävät nyt
   samaa lämmintä kermasävyä, jolloin näkymä pysyy valoisana.
   ============================================================ */
.piir-tyokalurivi button[aria-pressed="true"] {
  background: var(--pi-valinta);
  border-color: var(--pi-valinta-reuna);
  color: var(--pi-valinta-teksti);
  box-shadow: var(--pi-valinta-kiilto), var(--pi-valinta-hehku),
    inset 0 0 0 1px rgba(255, 138, 69, 0.32);
}
.piir-tyokalurivi button[aria-pressed="true"]:hover {
  background: var(--pi-valinta-hover);
  border-color: #ffab77;
}


/* ============================================================
   Vaihe 122: viiteviivan pikakulmat
   Liukusäätimestä on vaikea napata tasan 90°, joten viivan suunnan
   saa kahdeksasta pikanapista yhdellä napsautuksella.
   ============================================================ */
.piir-kulmanapit {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 6px;
}
.piir-kulmanapit button {
  padding: 5px 0;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fa 100%);
  border: 1px solid #dbe3ec;
  color: #38505f;
  cursor: pointer;
  transition: background var(--pi-siirtyma), border-color var(--pi-siirtyma);
}
.piir-kulmanapit button:hover { border-color: #c2cfdb; background: #ffffff; }
.piir-kulmanapit button[aria-pressed="true"] {
  background: var(--pi-valinta);
  border-color: var(--pi-valinta-reuna);
  color: var(--pi-valinta-teksti);
  box-shadow: var(--pi-valinta-kiilto), inset 0 0 0 1px rgba(255, 138, 69, 0.32);
}


/* ---------- Prosessialueet (Vaihe 162) ----------

   Aluevalinta on kategoriarivin yläpuolella omana rivinään: otsikko,
   napit samalla muotokielellä kuin kategoriat ja lyhyt kuvaus, joka
   kertoo mitä valinta rajaa. Alueen mittaukset saavat kortille
   oranssin merkin, jotta ne erottuvat kirjaston pysyvistä
   instrumenteista. */
.alueet {
  display: flex;
  align-items: center;
  gap: 8px 10px;
  flex-wrap: wrap;
  padding: 14px 18px 0;
}
.alue-otsikko {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6a7c8c;
}
.aluenapit { display: flex; gap: 6px; flex-wrap: wrap; }
.kat.alue { padding: 7px 13px; font-size: 13px; }
.alue-kuvaus {
  flex: 1 1 260px;
  font-size: 13px;
  color: #5c6f7d;
  line-height: 1.35;
}
.kortti-alue { outline: 1.5px solid rgba(240, 140, 0, 0.45); outline-offset: -1.5px; }
.kortti-merkki {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #b86a00;
}
.piir-alue {
  max-width: 190px;
  padding: 6px 8px;
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  color: #46586c;
}
.piir-lisays-alue { box-shadow: inset 0 0 0 1.5px rgba(240, 140, 0, 0.45); }
@media (max-width: 720px) {
  .alueet { padding: 10px 12px 0; }
  .alue-kuvaus { flex-basis: 100%; }
  .piir-alue { max-width: 140px; }
}


/* ============================================================
   Vaihe 165: yhteiden ja putkien käyttöliittymä
   Yhde on laitteen liitäntäpiste. Paneelissa se on yksi rivi,
   kanvaalla pallo, joka kertoo väristään onko se vapaa vai
   kytketty. Putkilinjan päät saavat kahvat, joista pään voi
   raahata yhteeseen.
   ============================================================ */

.piir-yhteet { margin: 10px 0 4px; }
/* Paneeli on kiinteät 232 px, joten yhden yhteen seitsemän säädintä
   EIVÄT mahdu samalle riville: yhdellä rivillä valitsimet kutistuivat
   11,8 px:iin ja niistä näkyi vain nuoli. Rivi on siksi neljä
   ruudukkoriviä, ja jokainen säädin saa oikean vähimmäisleveytensä.
      N1      | Oikea     | ✕
      DN100   | Laippa
      PW Prosessivesi
      [ kohta sivulla ============ ]                                */
.piir-yhde-rivi {
  display: grid;
  grid-template-columns: minmax(34px, auto) 1fr auto;
  gap: 5px 6px;
  align-items: center;
  margin-bottom: 5px;
  padding: 5px 6px;
  border: 1px solid var(--reunavari);
  border-radius: 8px;
  background: #f7fafc;
}
.piir-yhde-rivi select {
  /* Vähimmäisleveys estää kutistumisen nuoleksi; max-width pitää
     pisimmänkin ainenimen ruudukon sisällä. */
  min-width: 4.5em;
  max-width: 100%;
  padding: 3px 4px;
  border: 1px solid #dbe3ec;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 11.5px;
  color: #46586c;
}
.piir-yhde-tunnus { order: 1; }
.piir-yhde-puoli { order: 2; }
.piir-yhde-poista { order: 3; }
.piir-yhde-dn { order: 4; }
.piir-yhde-tyyppi { order: 5; grid-column: span 2; }
.piir-yhde-aine { order: 6; grid-column: 1 / -1; }
.piir-yhde-kohta { order: 7; grid-column: 1 / -1; width: 100%; min-width: 44px; }
.piir-yhde-tunnus {
  font-size: 12px;
  font-weight: 700;
  color: #46586c;
  /* Ontto rengas = vapaa yhde, täytetty = kytketty. Sama kieli
     kuin kanvaan palloilla, jotta lista ja kuva puhuvat samaa. */
  padding-left: 14px;
  background: radial-gradient(circle at 4px 50%, transparent 0 2.5px, #0072c6 2.5px 4px, transparent 4px);
}
.piir-yhde-tunnus.on-kytketty {
  color: #0072c6;
  background: radial-gradient(circle at 4px 50%, #0072c6 0 4px, transparent 4px);
}
.piir-yhde-poista {
  padding: 2px 6px;
  border: 1px solid #e6c4c0;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  color: #b3261e;
  cursor: pointer;
}
.piir-yhde-poista:hover { background: #fdeceb; }

/* Vapaa yhde sykkii ja on ontto; kytketty on täysi ja rauhallinen,
   jotta valmis kaavio ei vilku (spesifikaatio 4.3). */
.piir-portti-vapaa { background: #fff; }
.piir-portti-kytketty {
  background: #0072c6;
  animation: none;
  width: 11px;
  height: 11px;
}
/* Vedon lähin kohde korostuu, jotta käyttäjä näkee mihin putki tarttuu. */
.piir-portti-kohde {
  background: var(--brandi);
  border-color: var(--brandi);
  animation: none;
  transform: translate(-50%, -50%) scale(1.35);
  box-shadow: 0 0 0 5px rgba(255, 90, 0, 0.3);
}
.piir-portti-liuku { cursor: ew-resize; }
.piir-kanvas-pito.tila-yhde .piir-kanvas,
.piir-kanvas-pito.tila-yhde .piir-kanvas svg g { cursor: copy; }

/* Valitun putkilinjan päät: ankkuroitu täytetty, vapaa ontto. */
.piir-linjanpaa {
  position: absolute;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 2px solid var(--brandi);
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  cursor: grab;
  touch-action: none;
  z-index: 7;
}
.piir-linjanpaa:active { cursor: grabbing; }
.piir-linjanpaa-kiinni { background: var(--brandi); }
.piir-linjanpaa-vapaa {
  border-style: dashed;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.16);
}
.piir-linjanpaa:hover { transform: translate(-50%, -50%) scale(1.2); }

/* Perusasettelu on jo pinottu ja mahtuu kapeimmallekin näytölle,
   joten erillistä <= 720 px:n korjausta ei enää tarvita. */

/* ---------- kontekstivalikko (Vaihe 170) ----------

   Poistaminen vaati ennen joko Delete-näppäimen tuntemista tai oikean napin
   löytämistä paneelista. Oikea painike tuo toiminnot siihen kohtaan, jota
   käyttäjä osoittaa. Valikko on kiinteästi ikkunassa, jotta se ei jää
   kanvaan vierityksen tai paneelin alle. */
.piir-valikko {
  position: fixed;
  z-index: 240;
  min-width: 208px;
  padding: 6px;
  background: #ffffff;
  border: 1px solid #d6dee7;
  border-radius: 10px;
  box-shadow: 0 10px 32px rgba(23, 29, 31, 0.22), 0 2px 6px rgba(23, 29, 31, 0.12);
  font-size: 14px;
}
.piir-valikko[hidden] { display: none !important; }

.piir-valikko-kohta {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muste);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.piir-valikko-kohta:hover,
.piir-valikko-kohta:focus-visible {
  background: #eef2f6;
  outline: none;
}
.piir-valikko-vaara { color: #b3261e; }
.piir-valikko-vaara:hover,
.piir-valikko-vaara:focus-visible { background: #fdecea; }

.piir-valikko-erotin {
  height: 1px;
  margin: 5px 8px;
  background: #e4eaf0;
}

@media (max-width: 720px) {
  /* Kosketusnäytöllä rivit ovat väljempiä: sormella osuminen vaatii
     vähintään 44 px:n korkeuden. */
  .piir-valikko { min-width: 232px; }
  .piir-valikko-kohta { padding: 12px 14px; }
}

/* Metallilaitteen sävyvalitsin (Vaihe 171). Näkyy vain niille symboleille,
   joilla pääväri ei tee mitään, jottei paneelissa ole kahta väririviä
   päällekkäin. */
.piir-savyrivi { margin: 2px 0 6px; }
.piir-savyrivi[hidden] { display: none !important; }
.piir-savy-otsikko {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6a7c8c;
}

/* ---------- tilarivi (Vaihe 172) ----------
   Kanvaan alareunassa: aktiivinen tila ja sen ohje vasemmalla, zoom ja
   laajuus oikealla. Korvaa tiedon, joka ennen vilahti ponnahdusviestinä. */
/* Tilarivi (arvot Vaiheen 178 mukaiset; kaksi päällekkäistä lohkoa
   yhdistettiin Vaiheessa 215). */
.piir-tilarivi {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 12px;
  border-top: 1px solid var(--pi-viiva);
  background: var(--pi-paneeli);
  font-size: 11.5px;
  color: #56687a;
  min-height: 28px;
  flex-wrap: wrap;
}
.piir-tilarivi-tila { display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px; border-radius: 999px; background: var(--pi-valinta); color: var(--pi-valinta-teksti); font-weight: 600; }
.piir-tilarivi-tila .pi-ikoni { width: 14px; height: 14px; }
.piir-tilarivi-ohje { color: var(--pi-himmea, #5c6f7d); }
.piir-tilarivi-valinta {
  padding: 1px 8px;
  border-radius: 999px;
  background: #eef2f6;
  color: var(--muste);
}
.piir-tilarivi-oikea { margin-left: auto; font-size: 11px; color: var(--pi-himmea); }
.piir-tilarivi-oikea + .piir-tilarivi-oikea { margin-left: 0; }

/* Tunnuksen kirjoitus suoraan kanvaalle (kaksoisnapsautus). */
.piir-tunnus-kentta {
  position: absolute;
  z-index: 30;
  width: 108px;
  padding: 4px 7px;
  border: 2px solid var(--korostus, #e8590c);
  border-radius: 6px;
  background: #fff;
  font: 600 13px/1.2 inherit;
  color: var(--muste);
  box-shadow: 0 4px 14px rgba(23, 29, 31, 0.18);
}

/* Paletista raahatun symbolin haamu seuraa osoitinta. */
.piir-raahaus-haamu {
  position: fixed;
  z-index: 260;
  transform: translate(-50%, -50%);
  opacity: 0.85;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(23, 29, 31, 0.28));
}
.piir-raahaus-haamu svg { max-width: 90px; max-height: 90px; }

/* Pikanäppäinluettelo (?). */
.piir-nappaimet-tausta {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(23, 29, 31, 0.42);
}
.piir-nappaimet-tausta[hidden] { display: none !important; }
.piir-nappaimet {
  width: min(720px, 100%);
  max-height: 82vh;
  overflow: auto;
  padding: 18px 22px 22px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(23, 29, 31, 0.3);
}
.piir-nappaimet-ylapaa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.piir-nappaimet-ylapaa h3 { margin: 0; font-size: 17px; }
.piir-nappaimet-ylapaa button {
  border: 0;
  background: transparent;
  font-size: 17px;
  color: #6a7c8c;
  cursor: pointer;
}
.piir-nappaimet-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 6px 26px;
}
.piir-nappaimet-ryhma h4 {
  margin: 10px 0 6px;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7d8f9e;
}
.piir-nappaimet-rivi {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 3px 0;
  font-size: 13px;
}
.piir-nappaimet-rivi kbd {
  flex: 0 0 auto;
  min-width: 92px;
  padding: 2px 7px;
  border: 1px solid #d6dee7;
  border-bottom-width: 2px;
  border-radius: 5px;
  background: #f7f9fb;
  font: 600 11.5px/1.5 ui-monospace, Menlo, Consolas, monospace;
  color: var(--muste);
  text-align: center;
}

@media (max-width: 720px) {
  .piir-tilarivi { font-size: 11px; gap: 8px; }
  .piir-tilarivi-ohje { display: none; }
}

/* ---------- työkalurivin valikot (Vaihe 176b) ----------
   Kontekstivalikko (Vaihe 170) sai luokan .piir-valikko, jota myös
   Tiedosto-, Näkymä- ja Asetukset-<details> käyttävät. Sen
   { position: fixed } irrotti valikot työkalurivistä ja pinosi ne
   vasempaan yläkulmaan Symbolikirjasto-napin päälle — Tiedosto ja
   Näkymä jäivät Asetukset-kortin alle, eikä Tyhjennä-toimintoon
   päässyt lainkaan. Tarkempi selektori palauttaa <details>-valikoille
   rivin sisäisen asemoinnin; kontekstivalikko (#piirValikko, div)
   pysyy kiinteänä ikkunassa. */
details.piir-valikko {
  position: relative;
  z-index: auto;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: inherit;
}


/* ============================================================
   Vaihe 178: yksi käsiala koko sovellukselle
   Kirjasto, Piirustus ja dialogit jakavat saman kromin: tumma
   yläpalkki välilehtineen, työkalut vasemmassa pystyrivissä
   pikanäppäimin, ominaisuudet oikealla, tila alhaalla. Oranssi
   näkyy vain siinä, mikä on päällä. Ikonit ovat viivakuvakkeita
   (SVG-sprite app.inc.php:n alussa), eivät emojeja. Kirjasimet
   ovat paikallisia woff2-tiedostoja (fonts/), koska PI ei lataa
   mitään verkosta. Kaikki vanhat id:t ja toiminnot säilyvät —
   tämä on tyylikerros vanhojen päälle, tarkemmilla valitsimilla.
   ============================================================ */

/* ---------- kirjasimet ----------
   Barlow polveutuu DIN 1451:stä, teknisten piirustusten kirjain-
   tyypistä — sama sukujuuri kuin Bahnschriftillä, mutta saatavilla
   kaikilla laitteilla. Plex Sans on käyttöliittymä, Plex Mono
   tunnukset ja mitat (FIC-101, DN80, 80-PW-001). */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/barlow-700.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/plexsans-var.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/plexmono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/plexmono-500.woff2') format('woff2'); }

:root {
  --pi-fontti: 'IBM Plex Sans', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --pi-otsikkofontti: 'Barlow', 'Bahnschrift', 'Segoe UI Semibold', 'Segoe UI', system-ui, sans-serif;
  --pi-mono: 'IBM Plex Mono', Consolas, 'Cascadia Mono', ui-monospace, monospace;
  /* Kromi: teräksensävyiset neutraalit, ei puhdasta harmaata. */
  --pi-kromi: #f0f3f6;
  --pi-paneeli: #ffffff;
  --pi-viiva: #dbe2e9;
  --pi-viiva-2: #c3cdd6;
  --pi-teksti: #22303a;
  --pi-himmea: #5c6f7d;
  --pi-haalea: #8d9ba7;
  --pi-palkki: #171d1f;
  --pi-palkki-teksti: #e8edf0;
  --pi-palkki-himmea: #93a1ab;
  --pi-palkki-viiva: #2b3438;
  --pi-paperi: #e9edf1;
  --viiva: #dbe2e9;
}

body {
  background: var(--pi-kromi);
  color: var(--pi-teksti);
  font-family: var(--pi-fontti);
  font-size: 14px;
  letter-spacing: 0;
}
h1, h2, h3,
.piir-otsikko,
.tyopoyta-ylapaa h2,
.piir-paneeli h3,
.piir-tarkistus-paa h3,
.piir-paja h3,
.piir-nappaimet-ylapaa h3 {
  font-family: var(--pi-otsikkofontti);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.ylapalkki .brandi span,
.piir-ylapalkki .brandi span {
  font-family: var(--pi-otsikkofontti);
  font-weight: 700;
  letter-spacing: 0.14em;
}
kbd, code,
#piirTeksti, #piirMitta, #teksti,
.piir-tilarivi-oikea,
.piir-nappaimet-rivi kbd,
.alue-luku,
.piir-kat-luku { font-family: var(--pi-mono); }

/* ---------- ikonit ---------- */
.pi-ikonit { position: absolute; width: 0; height: 0; overflow: hidden; }
.pi-ikoni {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -4px;
  pointer-events: none;
}
.pi-ikoni-s { width: 15px; height: 15px; vertical-align: -3px; }
button .pi-ikoni + .nappiteksti,
summary .pi-ikoni + span { margin-left: 2px; }

/* ---------- yläpalkki: tumma, välilehdet, oranssi vain valitussa ---------- */
.ylapalkki,
.piir-ylapalkki {
  height: 52px;
  padding: 0 12px 0 16px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
  background: var(--pi-palkki);
  color: var(--pi-palkki-teksti);
  border-bottom: 1px solid var(--pi-palkki-viiva);
  box-shadow: none;
}
.piir-ylapalkki { flex: none; position: relative; z-index: 3; }
.ylapalkki .brandi,
.piir-ylapalkki .brandi { display: flex; align-items: center; gap: 9px; margin: 0; white-space: nowrap; }
.ylapalkki .brandi img,
.piir-ylapalkki .brandi img { display: block; width: 128px; height: auto; }
.ylapalkki .brandi span,
.piir-ylapalkki .brandi span {
  padding-left: 10px;
  margin-right: 0;
  border-left: 1px solid var(--pi-palkki-viiva);
  font-size: 16px;
  color: var(--brandi);
}
.valilehdet { display: flex; align-self: stretch; gap: 2px; }
.valilehti {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border: 0;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--pi-palkki-himmea);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
  transition: color var(--pi-siirtyma);
}
.valilehti:hover { color: #fff; background: transparent; transform: none; box-shadow: none; }
.valilehti[aria-current="page"] { color: #fff; border-bottom-color: var(--brandi); }
.valilehti:focus-visible { outline: 2px solid var(--brandi); outline-offset: -4px; border-radius: 6px; }
.ylapalkki .ohje {
  flex: 1;
  min-width: 0;
  text-align: center;
  color: var(--pi-palkki-himmea);
  font-size: 12.5px;
  letter-spacing: 0;
}
.ylapalkki .oikea,
.piir-ylapalkki .oikea { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.ylapalkki .tyopoyta-avaa,
.piir-ylapalkki .piir-ohje-nappi,
.piir-ylapalkki .tyopoyta-avaa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--pi-palkki-viiva);
  border-radius: 7px;
  background: transparent;
  color: var(--pi-palkki-teksti);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
  transform: none;
}
.ylapalkki .tyopoyta-avaa:hover,
.piir-ylapalkki .piir-ohje-nappi:hover,
.piir-ylapalkki .tyopoyta-avaa:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #46525a;
  color: #fff;
  transform: none;
  box-shadow: none;
}
.ylapalkki a.ulos,
.piir-ylapalkki a.ulos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 0;
  border-radius: 7px;
  color: var(--pi-palkki-himmea);
  font-size: 13px;
  text-decoration: none;
}
.ylapalkki a.ulos:hover,
.piir-ylapalkki a.ulos:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.ylapalkki .kielivalitsin-nappi { border-color: var(--pi-palkki-viiva); background: transparent; }
.piir-ylapalkki .piir-merkki { margin-left: 2px; background: var(--brandi); }
.piir-ylapalkki .piir-otsikko {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--pi-palkki-teksti);
}
/* Piirustuksen sulkunappi on nyt Kirjasto-välilehti, ei irrallinen ✕. */
.piir-ylapalkki .piir-sulje { position: static; top: auto; right: auto; width: auto; height: auto; }

/* Vie-valikko: yksi oranssi päänappi, jonka alta löytyvät kaikki
   vientitavat. Vanha alapalkki (.tyopoyta-alapaa) elää sen sisällä
   pystylistana — samat napit, samat id:t. */
.piir-vie > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #dd4e00;
  border-radius: 7px;
  background: linear-gradient(180deg, #ff8a45 0%, #ff5a00 60%, #f25400 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--pi-kiilto), 0 3px 10px rgba(255, 90, 0, 0.32);
}
.piir-vie > summary:hover { color: #fff; border-color: #d24a00; background: linear-gradient(180deg, #ff9755 0%, #ff6510 60%, #f75a05 100%); }
.piir-vie[open] > summary { color: #fff; border-color: #d24a00; }
.piir-vie .piir-valikko-sisus { left: auto; right: 0; min-width: 270px; gap: 4px; padding: 6px; }
.piir-vie .tyopoyta-alapaa { flex-direction: column; gap: 2px; padding: 0; border: 0; background: transparent; }
.piir-vie .tyopoyta-alapaa button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--pi-teksti);
  font-size: 13px;
  text-align: left;
}
.piir-vie .tyopoyta-alapaa button:hover { background: #eef2f6; color: var(--muste); box-shadow: none; }
.piir-vie .tyopoyta-alapaa .paanappi { margin: 0 0 4px; background: var(--pi-valinta); color: var(--pi-valinta-teksti); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255, 138, 69, 0.4); }
.piir-vie .tyopoyta-alapaa .paanappi:hover { background: var(--pi-valinta-hover); color: var(--pi-valinta-teksti); }
.piir-vie .tyopoyta-alapaa .paanappi.onnistui { background: var(--korostus); color: #fff; }
.piir-vie .tyopoyta-alapaa button:disabled { opacity: 0.45; cursor: default; }
.piir-vie .tyopoyta-alapaa button:disabled:hover { background: transparent; color: var(--pi-teksti); }
/* Kuvan tarkkuus Vie-valikossa (Vaihe 264): sama asetus kuin Pikakopiossa. */
.piir-vie-tarkkuus {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 4px; padding: 8px 10px 4px; border-top: 1px solid var(--reunavari);
  color: var(--pi-himmea, #5c6f7d); font-size: 12.5px;
}
.piir-vie-tarkkuus select {
  min-height: 30px; padding: 2px 8px; border: 1px solid var(--reunavari); border-radius: 6px;
  background: #fff; color: var(--pi-teksti); font: inherit;
}
html[data-teema="tumma"] .piir-vie-tarkkuus { border-top-color: var(--pi-viiva-2); }
html[data-teema="tumma"] .piir-vie-tarkkuus select { background: #222c31; color: var(--pi-teksti); border-color: var(--pi-viiva-2); }

/* ---------- kirjasto: aluelista | kortit | kopiointiasetukset ---------- */
.kirjasto {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr) 272px;
  align-items: start;
  min-height: calc(100vh - 52px);
}
.kirjasto > .alueet {
  position: sticky;
  top: 52px;
  max-height: calc(100vh - 52px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 14px 0 20px;
  background: var(--pi-paneeli);
  border-right: 1px solid var(--pi-viiva);
}
.alueet .alue-otsikko {
  padding: 0 16px 8px;
  font-family: var(--pi-otsikkofontti);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--pi-haalea);
}
.kirjasto .aluenapit { flex-direction: column; gap: 1px; }
.kirjasto .alueet .kat.alue {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--pi-teksti);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  transform: none;
}
.kirjasto .alueet .kat.alue:hover { background: #f3f5f8; color: var(--muste); box-shadow: none; transform: none; }
.kirjasto .alueet .kat.alue.valittu {
  background: var(--pi-valinta);
  color: var(--pi-valinta-teksti);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brandi);
}
.kirjasto .alueet .kat.alue.valittu::after { display: none; }
.alue-nimi { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alue-luku { flex: none; font-size: 11px; color: var(--pi-haalea); }
.kirjasto .alueet .kat.alue.valittu .alue-luku { color: var(--pi-valinta-teksti); }
.kirjasto .alueet .alue-kuvaus {
  flex: none;
  padding: 12px 16px 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--pi-himmea);
}
.kirjasto-sisus { min-width: 0; padding-bottom: 40px; }
.kirjasto .ruudukko-otsikko { padding: 14px 20px 10px; gap: 12px; align-items: center; flex-wrap: wrap; }
.kirjasto .ruudukko-otsikko b { color: var(--muste); font-size: 14.5px; }
.kirjasto .ruudukko-otsikko input#haku {
  margin-left: auto;
  width: min(380px, 100%);
  padding: 9px 14px 9px 36px;
  border-radius: 8px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%238d9ba7' stroke-width='2' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6.5'/><path d='M15.5 15.5L21 21'/></svg>") no-repeat 11px center;
  font-size: 13.5px;
}
.kirjasto .katnapit { padding: 0 20px 12px; gap: 6px; }
.kirjasto .katnapit .kat { padding: 6px 12px; font-size: 12.5px; }
.kirjasto .vinkki { margin: 0 20px 14px; border: 1px solid var(--pi-viiva); border-left: 3px solid var(--brandi); border-radius: 8px; }
.kirjasto .ruudukko { padding: 0 20px 40px; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); }
.ruudukko-ryhma {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--pi-viiva);
}
.ruudukko-ryhma:first-child { margin-top: 0; }
.ruudukko-ryhma b { font-family: var(--pi-otsikkofontti); font-size: 15px; font-weight: 600; color: var(--muste); }
.ruudukko-ryhma .ruudukko-ryhma-luku { font-family: var(--pi-mono); font-size: 11px; color: var(--pi-haalea); }
.ruudukko-ryhma button {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pi-valinta-teksti);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
.ruudukko-ryhma button:hover { text-decoration: underline; }
.kortti { border-radius: 10px; border-color: var(--pi-viiva); }
.kortti-nimi { font-size: 12.5px; color: var(--pi-teksti); }
.kortti-tyokalut button { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; }
.kirjasto > .saatimet {
  position: sticky;
  top: 52px;
  max-height: calc(100vh - 52px);
  overflow-y: auto;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 14px;
  border-bottom: 0;
  border-left: 1px solid var(--pi-viiva);
  background: var(--pi-paneeli);
}
.saatimet-otsikko {
  font-family: var(--pi-otsikkofontti);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pi-haalea);
  padding: 0 2px;
}
.kirjasto .saatimet .saadin { min-width: 0; padding: 10px 12px; }
.kirjasto .varit { max-width: none; }
@media (max-width: 1120px) {
  .kirjasto { grid-template-columns: 200px minmax(0, 1fr) 244px; }
  .ylapalkki .ohje { display: none; }
}
@media (max-width: 900px) {
  .kirjasto { grid-template-columns: minmax(0, 1fr); }
  .kirjasto > .alueet {
    position: static;
    max-height: none;
    padding: 10px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--pi-viiva);
  }
  .kirjasto .aluenapit { flex-direction: row; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
  .kirjasto .alueet .kat.alue { width: auto; padding: 6px 12px; border: 1px solid var(--pi-viiva); border-radius: 999px; white-space: nowrap; }
  .kirjasto .alueet .kat.alue.valittu { box-shadow: none; }
  .kirjasto .alueet .alue-kuvaus { display: none; }
  .kirjasto > .saatimet {
    position: static;
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
    border-left: 0;
    border-top: 1px solid var(--pi-viiva);
  }
  .kirjasto .saatimet .saadin { flex: 1 1 200px; }
  .saatimet-otsikko { flex-basis: 100%; }
  .ylapalkki { padding: 0 10px; gap: 10px; }
  .ylapalkki .tyopoyta-avaa { padding: 6px 8px; font-size: 12px; }
}

/* ---------- piirustus: kromi ---------- */
.piir { background: var(--pi-kromi); }
.piir-tyokalurivi {
  flex: none;
  min-height: 42px;
  padding: 4px 10px;
  gap: 4px;
  row-gap: 4px;
  flex-wrap: wrap;
  background: var(--pi-paneeli);
  border-bottom: 1px solid var(--pi-viiva);
  box-shadow: none;
  font-size: 12.5px;
}
.piir-tyokalurivi button {
  padding: 5px 9px;
  border-color: transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--pi-teksti);
  font-size: 12.5px;
  font-weight: 500;
  box-shadow: none;
}
.piir-tyokalurivi button:hover:not(:disabled) { background: #eef2f6; border-color: transparent; color: var(--muste); box-shadow: none; }
.piir-tyokalurivi .piir-ohje-nappi { gap: 5px; }
.piir-tyokalurivi .piir-paanappi { padding: 6px 12px; border-radius: 7px; }
.piir-tyokalurivi .piir-valikko > summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-color: transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--pi-teksti);
  font-size: 12.5px;
  font-weight: 500;
}
.piir-tyokalurivi .piir-valikko > summary:hover { background: #eef2f6; border-color: transparent; color: var(--muste); }
.piir-tyokalurivi .piir-valikko[open] > summary { background: var(--pi-valinta); border-color: transparent; color: var(--pi-valinta-teksti); }
.piir-tyokalurivi .piir-valikko-sisus > button { display: flex; align-items: center; gap: 8px; }
.piir-tyokalurivi .piir-tyhjenna { color: #b3261e; }
.piir-tyokalurivi .piir-tyhjenna:hover:not(:disabled) { background: #fdecea; color: #8f1d17; }
.piir-tyokalurivi .piir-erotin { margin: 0 4px; min-height: 22px; align-self: center; height: 22px; }
.piir-tyokalurivi .piir-kumoa { min-width: 30px; padding: 5px 6px; font-size: 13px; }
.piir-tyokalurivi .piir-zoom { border: 1px solid var(--pi-viiva); border-radius: 6px; overflow: hidden; gap: 0; }
.piir-tyokalurivi .piir-zoom button { border: 0; border-radius: 0; padding: 5px 8px; }
.piir-tyokalurivi .piir-zoom button + button { border-left: 1px solid var(--pi-viiva); }
.piir-tyokalurivi #piirZoomTaso { min-width: 58px; font-family: var(--pi-mono); font-size: 12px; }
.piir-tyokalurivi .piir-merkintavalinta { padding: 5px 26px 5px 8px; border-radius: 6px; font-size: 12px; }
.piir-tyokalurivi .piir-merkinta-otsikko { color: var(--pi-himmea); font-size: 12px; margin-left: 2px; }
.piir-ohje { background: var(--pi-paneeli); border-bottom: 1px solid var(--pi-viiva); }

/* Työkalut pystyrivissä kanvaan vasemmalla puolella. Tekstit
   säilyvät ruudunlukijalle (.nappiteksti), näkyvissä on kuvake ja
   pikanäppäin. Aktiivinen työkalu on rivin ainoa oranssi asia. */
.piir-tyokalut {
  flex: none;
  width: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 0;
  background: var(--pi-paneeli);
  border-right: 1px solid var(--pi-viiva);
  overflow-y: auto;
  overflow-x: hidden;
}
.piir-tyokalut .piir-nappiryhma { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.piir-tyokalut .piir-erotin { width: 24px; height: 1px; min-height: 1px; align-self: center; margin: 5px 0; }
.piir-tyokalut button.piir-ohje-nappi {
  position: relative;
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pi-himmea);
  font: inherit;
  cursor: pointer;
  box-shadow: none;
  transition: background var(--pi-siirtyma), color var(--pi-siirtyma), box-shadow var(--pi-siirtyma);
}
.piir-tyokalut button.piir-ohje-nappi:hover { background: #eef2f6; color: var(--muste); box-shadow: none; transform: none; }
.piir-tyokalut button.piir-ohje-nappi[aria-pressed="true"],
.piir-tyokalut button.piir-ohje-nappi[aria-pressed="true"]:hover {
  background: var(--brandi);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 90, 0, 0.35);
}
.piir-tyokalut .nappiteksti {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.piir-tyokalut .piir-nappain {
  position: absolute;
  right: 3px;
  bottom: 1px;
  font-family: var(--pi-mono);
  font-size: 8.5px;
  line-height: 1;
  opacity: 0.7;
  pointer-events: none;
}
.piir-tyokalut .piir-merkki { position: absolute; top: -3px; right: -3px; margin: 0; min-width: 15px; height: 15px; font-size: 10px; }

.piir-keski { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.piir-kanvas-kaari { background: var(--pi-paperi); }
.piir-kanvas { border-color: var(--pi-viiva-2); }

/* Ominaisuuspaneeli: sama pinta kuin muu kromi, tasalevyiset tunnukset. */
/* Leveys on vain työpöydän säännössä (Vaihe 226 -lohko): tässä se voitti
   puhelimen mediasäännön ja pohjapaneeli jäi 264 px:n kaistaksi (Vaihe 233). */
.piir-paneeli { background: var(--pi-paneeli); border-left: 1px solid var(--pi-viiva); }
.piir-paneeli label input[type="text"],
.piir-paneeli select { border-radius: 6px; border-color: var(--pi-viiva); font-size: 13px; }
.piir-paneeli label input[type="text"]:focus { border-color: var(--brandi); box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.14); }
.piir-napit button { border-radius: 6px; font-size: 12px; }
.piir-paneeli h3 { font-size: 15px; }

/* Kelluva symbolikirjasto dokkautuu työkalurivin viereen. Kun
   "Pidä auki" on päällä, se ei himmennä kanvasta eikä nappaa
   napsautuksia — kaaviota voi muokata kirjasto auki. */
.piir-valitsin {
  justify-content: flex-start;
  align-items: flex-start;
  padding: 10px 10px 10px 58px;
  background: rgba(10, 27, 44, 0.14);
  backdrop-filter: none;
}
.piir-valitsin-kortti { width: min(760px, 100%); border-radius: 12px; border-color: var(--pi-viiva); }
.piir-kirjasto-dokattu .piir-valitsin { pointer-events: none; background: transparent; }
.piir-kirjasto-dokattu .piir-valitsin-kortti { pointer-events: auto; box-shadow: var(--pi-varjo-l), 0 0 0 1px rgba(23, 29, 31, 0.06); }
.piir-kategoriat { background: var(--pi-paneeli); }
.piir-kategoriat input[type="search"] { border-radius: 8px; }
.piir-kat-nappi { padding: 5px 11px; font-size: 12.5px; font-weight: 600; }
.piir-lisays { border-radius: 8px; }

/* ---------- dialogit ja putkilinja: sama pyöristys ja kirjaimet ---------- */
.piir-haku, .piir-paja, .piir-nappaimet, .tyopoyta, .piir-valikko-sisus, .kielivalitsin-valikko { border-radius: 12px; }
.piir-valikko-sisus { border-color: var(--pi-viiva); }
.tyopoyta-ylapaa h2 { font-weight: 600; }

/* Ilmoitus: pilleri yhdellä rivillä, kulmikkaampi kun teksti rivittyy —
   muuten pitkä viesti kapealla näytöllä pyöristyi palloksi. */
.ilmo { border-radius: 16px; padding: 11px 20px; font-size: 14px; }

/* Kapea näyttö: työkalurivi rivittyy, työkalut vaakariviksi kanvaan ylle. */
@media (max-width: 900px) {
  .piir-valitsin { padding: 6px; }
  .piir-tyokalut {
    width: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 2px;
    padding: 4px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--pi-viiva);
  }
  .piir-tyokalut .piir-nappiryhma { flex-direction: row; }
  .piir-tyokalut .piir-erotin { width: 1px; height: 22px; min-height: 22px; margin: 0 4px; }
  .piir-ylapalkki { padding: 0 8px 0 10px; gap: 8px; }
  .piir-ylapalkki .piir-otsikko { display: none; }
  .piir-ylapalkki .brandi img { width: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .valilehti, .piir-tyokalut button.piir-ohje-nappi { transition: none; }
}

/* ===== Vaihe 206: näyttötila — kaavio valvomonäyttönä =====

   Piirtotyökalut, kirjasto ja ominaisuuspaneeli piiloon; kaavio keskelle
   ruutua sovitettuna. Kaikki säännöt ovat luokan piir-nayttotila alla,
   joten piirtonäkymä pysyy ennallaan. */
body.piir-nayttotila .piir-ylapalkki,
body.piir-nayttotila .piir-tyokalurivi { display: none; }
body.piir-nayttotila .piir-runko > *:not(.piir-keski) { display: none; }
body.piir-nayttotila .piir-keski > *:not(.piir-kanvas-kaari) { display: none; }
body.piir-nayttotila .piir-runko { padding-top: 46px; }
/* Vaihe 230: koko yläosa piiloon (myös lisäyspalkki ja ohje), ja kaavio
   sijoitetaan translate + scale -muunnoksella vasemmasta yläkulmasta —
   ruudukon keskitys arkin kokoisella laatikolla pani kaavion mihin sattui. */
body.piir-nayttotila .piir-ylaosa > * { display: none; }
body.piir-nayttotila .piir-kanvas-kaari {
  display: block;
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #0e1417;
}
body.piir-nayttotila .piir-kanvas-pito { position: absolute; left: 0; top: 0; }
body.piir-nayttotila .piir-kanvas { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); cursor: pointer; pointer-events: none; }
body.piir-nayttotila .piir-kanvas-kaari { cursor: pointer; }
.piir-naytto-ikkuna select {
  width: 100%;
  min-height: 32px;
  padding: 0 6px;
  border: 1px solid #52646a;
  border-radius: 6px;
  background: #151d20;
  color: #eef2ef;
  font-family: inherit;
  font-size: 13px;
}
body.piir-nayttotila .piir-valinta,
body.piir-nayttotila .piir-valinta-apu,
body.piir-nayttotila .piir-ankkurit,
body.piir-nayttotila .piir-ohjeviiva,
body.piir-nayttotila .piir-valintalaatikko,
body.piir-nayttotila .piir-tyhja { display: none !important; }

.piir-naytto-palkki {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 12px;
  background: #101a1f;
  border-bottom: 1px solid #27363d;
  color: #eef2ef;
}
.piir-naytto-nimi { font-weight: 800; font-size: 15px; }
.piir-naytto-vihje { flex: 1; color: #93a5ad; font-size: 12.5px; }
.piir-naytto-palkki button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #44575f;
  border-radius: 6px;
  background: transparent;
  color: #dce6e4;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.piir-naytto-palkki button:hover { border-color: #7d9199; color: #fff; }
.piir-naytto-palkki button[aria-pressed="true"] { border-color: var(--brandi); background: rgba(255, 90, 0, 0.16); color: #fff; }
.piir-naytto-palkki .piir-naytto-pois { border-color: var(--brandi); background: var(--brandi); color: #fff; }

.piir-naytto-ikkuna {
  position: fixed;
  z-index: 130;
  width: 208px;
  padding: 0 0 10px;
  border: 1px solid #47565b;
  border-radius: 10px;
  background: #0e1416;
  color: #eef2ef;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
.piir-naytto-kahva {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px 8px 11px;
  border-bottom: 1px solid #263135;
  border-radius: 9px 9px 0 0;
  background: #151d20;
  cursor: grab;
  touch-action: none;
  font-size: 13px;
}
.piir-naytto-kahva:active { cursor: grabbing; }
.piir-naytto-kahva b { flex: 1; font-weight: 900; }
.piir-naytto-x {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #8f9a94;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.piir-naytto-x:hover { color: #fff; }
.piir-naytto-lohko { display: block; padding: 10px 10px 0; }
.piir-naytto-otsikko { display: block; margin-bottom: 6px; color: #9fb0ab; font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.piir-naytto-otsikko output { float: right; color: #eef2ef; font-family: Consolas, monospace; letter-spacing: 0; text-transform: none; }
.piir-naytto-tilat { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.piir-naytto-tila {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  border: 1px solid #52646a;
  border-radius: 6px;
  background: #1c2528;
  color: #dce6e4;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}
.piir-naytto-tila::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tila, #8a9aa6);
}
.piir-naytto-tila:hover { border-color: #7d9199; }
.piir-naytto-tila.on { border-color: var(--tila, #8a9aa6); background: #222e31; color: #fff; }
.piir-naytto-ikkuna input[type="range"] { width: 100%; accent-color: var(--brandi); }
.piir-naytto-ikkuna input[type="text"] {
  width: 100%;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid #52646a;
  border-radius: 6px;
  background: #151d20;
  color: #eef2ef;
  font-family: inherit;
  font-size: 13px;
}
.piir-naytto-tyhja { color: #93a5ad; font-size: 12.5px; }

/* ===== Vaihe 207: työtiedoston tila tilarivillä =====
   Tilarivi ei saa valehdella: keskeneräinen, valmis ja epäonnistunut
   tallennus erottuvat toisistaan yhdellä silmäyksellä. */
.piir-tilarivi-osa.piir-tallennus { font-weight: 700; }
.piir-tallennus.valmis { color: #1f7a4d; }
.piir-tallennus.kesken { color: #8a6b00; }
.piir-tallennus.virhe { color: #b3261e; }
.piir-tallennus.ei-tiedostoa { color: var(--pi-himmea, #6b7a86); font-weight: 600; }
.piir-kanvas-kaari.tumma ~ .piir-tilarivi .piir-tallennus.valmis,
.alusta-tumma ~ .piir-tilarivi .piir-tallennus.valmis { color: #6fd39b; }

/* ===== Vaihe 208: versiohistoria ===== */
.piir-versiot { width: min(620px, 100%); }
.piir-versiot-ohje { margin: 0 0 12px; color: #5b6b78; font-size: 13px; line-height: 1.5; }
.piir-versio-nyt {
  margin-bottom: 12px;
  padding: 7px 12px;
  border: 1px solid var(--pi-viiva-2, #c9d3dc);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.piir-versio-nyt:hover { border-color: var(--brandi); }
.piir-versiot-lista { display: grid; gap: 6px; color: #5b6b78; font-size: 13px; }
.piir-versio-rivi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid #e3e9ee;
  border-radius: 8px;
  background: #fafbfc;
}
.piir-versio-tiedot { display: grid; gap: 2px; min-width: 0; }
.piir-versio-tiedot b { color: #1c262d; font-size: 13.5px; }
.piir-versio-tiedot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.piir-versio-rivi button {
  flex: none;
  padding: 6px 12px;
  border: 1px solid var(--brandi);
  border-radius: 6px;
  background: #fff;
  color: var(--brandi);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.piir-versio-rivi button:hover { background: var(--brandi); color: #fff; }

/* ===== Vaihe 210: PDF-lataus ja tummuusnappi ===== */
.piir-pdf { width: min(540px, 100%); }
.piir-pdf-valinnat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
.piir-pdf-valinnat label { display: grid; gap: 5px; color: #384550; font-size: 13px; font-weight: 700; }
.piir-pdf-valinnat select {
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid var(--pi-viiva-2, #c9d3dc);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-weight: 600;
}
.piir-pdf-valinnat .piir-pdf-rasti { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.piir-pdf-lataa {
  width: 100%;
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  background: var(--brandi);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.piir-pdf-lataa:disabled { opacity: 0.6; cursor: progress; }
#piirTummaNappi[aria-pressed="true"] { background: #1e2529; border-color: #1e2529; color: #eef2f3; }

/* ===== Vaihe 211: laitesuunnittelija ===== */
.piir-paja.lp { width: min(1040px, 100%); max-height: 94vh; overflow: auto; }
.lp-yla { display: flex; align-items: center; gap: 12px; }
.lp-yla h3 { flex: 1; }
.lp-yla select { min-height: 32px; border: 1px solid var(--pi-viiva-2, #c9d3dc); border-radius: 6px; font: inherit; font-size: 13px; }
.lp-sulje { width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: #5c6f7d; cursor: pointer; }
.lp-sulje:hover { background: #eef2f5; color: var(--muste); }
.lp-vihje { min-height: 20px; margin: 2px 0 12px; color: #5c6f7d; font-size: 13px; }
.lp-runko { display: grid; grid-template-columns: 96px minmax(0, 1fr) 230px; gap: 14px; align-items: start; }
.lp-tyokalut { display: flex; flex-direction: column; gap: 4px; }
.lp-tyokalut button {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #33434e;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.lp-tyokalut button:hover:not(:disabled) { background: #eef2f5; }
.lp-tyokalut button[aria-pressed="true"] { border-color: var(--brandi); background: rgba(255, 90, 0, 0.1); color: var(--brandi); }
.lp-tyokalut button:disabled { opacity: 0.4; cursor: default; }
.lp-tyokalut .pi-ikoni { flex: none; width: 18px; height: 18px; }
.lp-erotin { height: 1px; margin: 6px 4px; background: #dfe6ec; }
.lp-alusta {
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 360;
  border: 1px solid #d7dfe6;
  border-radius: 10px;
  background: #fbfcfd;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}
.lp-alusta .lp-veto { fill: none; stroke: var(--brandi); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
.lp-alusta .lp-esikatselu { opacity: 0.6; }
.lp-alusta .lp-esikatselu-viiva { stroke: var(--brandi); stroke-width: 1.5; stroke-dasharray: 4 4; }
.lp-alusta .lp-apupiste { fill: var(--brandi); }
.lp-alusta .lp-akseli { stroke: #8fa3b0; stroke-width: 1; stroke-dasharray: 6 5; }
.lp-alusta .lp-muoto.valittu { filter: drop-shadow(0 0 3px rgba(255, 90, 0, 0.95)); }
.lp-alusta .lp-yhde-piste { fill: #fff; stroke: #2f9e6e; stroke-width: 2; }
.lp-alusta .lp-yhde.valittu .lp-yhde-piste { stroke: var(--brandi); stroke-width: 3; }
.lp-asetukset { display: grid; gap: 10px; }
.lp-asetukset label { display: grid; gap: 4px; color: #384550; font-size: 12.5px; font-weight: 700; }
.lp-asetukset input[type="text"], .lp-asetukset select {
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid var(--pi-viiva-2, #c9d3dc);
  border-radius: 6px;
  font: inherit;
  font-weight: 600;
}
.lp-asetukset input[type="color"] { width: 100%; height: 34px; padding: 2px; border: 1px solid var(--pi-viiva-2, #c9d3dc); border-radius: 6px; background: #fff; }
.lp-rivi { display: flex; align-items: center; gap: 8px; }
.lp-rivi input { flex: 1; accent-color: var(--brandi); }
.lp-rivi output { min-width: 44px; text-align: right; font-family: Consolas, monospace; font-size: 12px; }
.lp-asetukset .lp-rasti { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.lp-asetukset button { min-height: 38px; border-radius: 8px; font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; }
.lp-asetukset button:disabled { opacity: 0.45; cursor: default; }
.lp-paa { border: 0; background: var(--brandi); color: #fff; }
.lp-toissijainen { border: 1px solid var(--brandi); background: #fff; color: var(--brandi); }
.lp-lataa { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lp-lataa button { border: 1px solid var(--pi-viiva-2, #c9d3dc); background: #fff; color: #33434e; font-size: 12.5px; }
@media (max-width: 820px) {
  .lp-runko { grid-template-columns: 1fr; }
  .lp-tyokalut { flex-direction: row; flex-wrap: wrap; }
  .lp-erotin { display: none; }
}

/* ===== Vaihe 212: työtiedostomuistutus ja versiotieto ===== */
.piir-muistutus {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 78px;              /* ilmoitukset (bottom 22px) jäävät alle */
  z-index: 85;               /* piirustuksen (70) päällä, dialogien (90) alla */
  display: flex;
  flex-wrap: wrap;           /* puhelimella napit omalle rivilleen */
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 12px 10px 16px;
  border: 1px solid #f0c9a8;
  border-radius: 10px;
  background: #fff7f0;
  box-shadow: 0 14px 34px rgba(23, 29, 31, 0.22);
  color: #3b2a1c;
  font-size: 13.5px;
  font-weight: 600;
}
.piir-muistutus span { flex: 1 1 260px; }
.piir-muistutus button {
  flex: none;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #d8b99e;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.piir-muistutus .piir-muistutus-paa { border-color: var(--brandi); background: var(--brandi); color: #fff; }
.piir-versio { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid #e3e9ee; color: #6b7a86; font-size: 12px; font-weight: 600; }

/* ===== Vaihe 214: yläpalkki puhelimella ja tabletilla =====
   Kirjaston yläpalkki oli 390 px:n näytöllä 780 px leveä (tabletilla
   800 px), joten puhelin laajensi asetteluikkunan sen mukaan: sivu vieri
   sivuttain, Tarkista, Vie, kielivalinta ja Ulos jäivät ruudun
   ulkopuolelle, ja kaikki kiinteät osat (piirustus, ilmoitukset) perivät
   saman leveyden. Alle 900 px oikean laidan napit ovat kuvakkeita (nimi
   title-tekstissä), ja alle 640 px palkki saa taittua kahdelle riville.
   Päävalikko (välilehdet) pysyy aina näkyvissä. */
@media (max-width: 900px) {
  .ylapalkki .ohje { display: none; }
  .ylapalkki .oikea,
  .piir-ylapalkki .oikea { gap: 4px; }
  .ylapalkki .oikea .tyopoyta-avaa,
  .ylapalkki .oikea a.ulos,
  .piir-ylapalkki .oikea .piir-ohje-nappi,
  .piir-ylapalkki .piir-vie > summary { font-size: 0; gap: 0; padding: 7px; line-height: 1; }
  .ylapalkki .oikea .pi-ikoni,
  .piir-ylapalkki .oikea .pi-ikoni { width: 18px; height: 18px; vertical-align: 0; }
  .ylapalkki .oikea .kielivalitsin-nappi { padding: 6px 7px; }
  .piir-ylapalkki .piir-merkki { font-size: 10px; margin-left: 3px; }
}
@media (max-width: 640px) {
  .ylapalkki,
  .piir-ylapalkki { height: auto; min-height: 48px; flex-wrap: wrap; gap: 0 10px; padding: 0 8px 0 10px; }
  .ylapalkki .brandi img,
  .piir-ylapalkki .brandi img { width: 96px; }
  .ylapalkki .brandi span,
  .piir-ylapalkki .brandi span { padding-left: 8px; font-size: 14px; }
  .valilehdet { align-self: auto; min-height: 48px; }
  .valilehti { padding: 0 10px; font-size: 13px; }
  .ylapalkki .oikea,
  .piir-ylapalkki .oikea { margin-left: auto; padding: 5px 0; }
}

/* ===== Vaihe 214: kaksi välilehteä ===== */
.piir-muistutus-varoitus { border-color: #e5a9a4; background: #fff3f2; color: #4a2320; }
.piir-muistutus-varoitus .piir-muistutus-paa { border-color: #b3261e; background: #b3261e; }

/* ===== Vaihe 216: raahauksen päällyskerros ===== */
.piir-kanvas svg.piir-raahaus { position: absolute; left: 0; top: 0; pointer-events: none; }

/* ===== Vaihe 218: elävä kaavio =====
   Kanvaalla osoitettu laite hehkuu kevyesti, valinta saa kulmakahvat ja
   ilmestyy pehmeästi. Piirtymis- ja laskeutumisanimaatiot ovat
   js/elavoitus.js:ssä (Web Animations), joten vienti ei muutu. */
.piir-kanvas svg g[data-i]:hover,
.piir-kanvas svg g[data-li]:hover { filter: drop-shadow(0 1px 6px rgba(255, 90, 0, 0.45)); }
.piir-kanvas svg.piir-raahaus g[data-i] { filter: drop-shadow(0 6px 14px rgba(23, 29, 31, 0.28)); }
.piir-valinta {
  border: 1.5px solid var(--brandi);
  border-radius: 3px;
  box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.14);
  animation: piir-valinta-ilmesty 0.16s ease-out;
}
@keyframes piir-valinta-ilmesty {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: 1; transform: scale(1); }
}
.piir-valinta-kahva {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 2px solid var(--brandi);
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(23, 29, 31, 0.25);
}
.piir-kahva-lv { left: -6px; top: -6px; }
.piir-kahva-oy { right: -6px; top: -6px; }
.piir-kahva-la { left: -6px; bottom: -6px; }
.piir-kahva-oa { right: -6px; bottom: -6px; }
@media (prefers-reduced-motion: reduce) {
  .piir-valinta { animation: none; }
}

/* ===== Vaihe 220: valvomo =====
   Merkit ovat HTML-elementtejä kanvaan päällä (sama koordinaatisto kuin
   portit), joten SVG-merkintä ja vienti eivät muutu. */
.piir-valvomo { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 9; }
.piir-valvomo-merkki {
  position: absolute;
  transform: translateX(-50%);
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 2px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(14, 20, 22, 0.88);
  color: #eef2ef;
  font: 700 11.5px/1.2 var(--pi-fontti, 'Segoe UI', sans-serif);
  letter-spacing: 0.06em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s, box-shadow 0.12s;
}
.piir-valvomo-merkki::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8a9aa6;
  box-shadow: 0 0 0 0 rgba(47, 158, 110, 0);
}
.piir-valvomo-merkki:hover { transform: translateX(-50%) translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
.piir-valvomo-lukema { cursor: default; font-family: var(--pi-mono, Consolas, monospace); letter-spacing: 0; font-weight: 600; }
.piir-valvomo-lukema::before { display: none; }
.piir-valvomo-kay::before { background: #2f9e6e; animation: piir-valvomo-syke 1.6s ease-out infinite; }
.piir-valvomo-seis::before { background: #8a9aa6; }
.piir-valvomo-varoitus { border-color: rgba(240, 165, 0, 0.7); color: #ffd27a; }
.piir-valvomo-varoitus::before { background: #f0a500; }
.piir-valvomo-halytys { border-color: rgba(208, 2, 27, 0.8); color: #ff9d9d; animation: piir-valvomo-vilkku 1s steps(1, end) infinite; }
.piir-valvomo-merkki.piir-valvomo-halytys::before { background: #d0021b; }
.piir-valvomo-merkki.piir-valvomo-halytys { border-color: rgba(208, 2, 27, 0.8); color: #ff9d9d; }
div.piir-valvomo-halytys {
  position: absolute;
  border: 2px solid #d0021b;
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(208, 2, 27, 0.18), 0 0 22px rgba(208, 2, 27, 0.45);
  pointer-events: none;
  animation: piir-valvomo-vilkku 1s steps(1, end) infinite;
}
div.piir-valvomo-halytys.piir-valvomo-halytys-varoitus {
  border-color: #f0a500;
  box-shadow: 0 0 0 4px rgba(240, 165, 0, 0.16), 0 0 18px rgba(240, 165, 0, 0.4);
  animation: none;
}
@keyframes piir-valvomo-syke {
  0% { box-shadow: 0 0 0 0 rgba(47, 158, 110, 0.6); }
  100% { box-shadow: 0 0 0 7px rgba(47, 158, 110, 0); }
}
@keyframes piir-valvomo-vilkku {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.35; }
}
.piir-naytto-halytykset {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(208, 2, 27, 0.8);
  background: rgba(208, 2, 27, 0.16);
  color: #ffb3b3;
  font-size: 12.5px;
  font-weight: 800;
  animation: piir-valvomo-vilkku 1s steps(1, end) infinite;
}
.piir-naytto-palkki #piirNayttoKaikki[aria-pressed="true"] { border-color: #2f9e6e; background: rgba(47, 158, 110, 0.18); color: #fff; }
.piir-valvomo-toiminto {
  width: 100%;
  min-height: 40px;
  border: 1px solid #47565b;
  border-radius: 8px;
  background: #1a2427;
  color: #eef2ef;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.piir-valvomo-toiminto.on { border-color: #2f9e6e; background: rgba(47, 158, 110, 0.22); }
.piir-valvomo-toiminto:hover { border-color: #7d9199; }
.piir-valvomo-iso { display: block; font: 700 22px/1.2 var(--pi-mono, Consolas, monospace); color: #eef2ef; }
@media (prefers-reduced-motion: reduce) {
  .piir-valvomo-kay::before, .piir-valvomo-halytys, div.piir-valvomo-halytys, .piir-naytto-halytykset { animation: none; }
}

/* ===== Vaihe 221: ilmoitusten ikonit ja korttien nousu ===== */
.ilmo { display: inline-flex; align-items: center; gap: 9px; }
.ilmo .ilmo-ikoni { width: 17px; height: 17px; flex: none; }
.piir-haku-nimi { display: inline-flex; align-items: center; gap: 8px; }
.piir-haku-nimi .pi-ikoni { color: var(--pi-himmea); }
.kortti:hover .esikatselu svg { transform: scale(1.04); }
.esikatselu svg { transition: transform 0.16s; }
#teemaNappi[aria-pressed="true"], #piirTeemaNappi[aria-pressed="true"] { color: #ffb280; border-color: rgba(255, 90, 0, 0.55); }

/* ===== Vaihe 221: tumma käyttöliittymä =====
   html[data-teema="tumma"] asetetaan headissa (js/teema.js) ja
   vaihdetaan Teema-napista (app.js). Tunnukset kääntyvät kerralla;
   kovakoodatut vaaleat pinnat (kortit, valikot, dialogit, kentät)
   saavat omat sääntönsä. Piirustusarkki pysyy käyttäjän valinnassa
   (Tumma tausta), ja symbolit näkyvät edelleen vaalealla laatalla. */
html[data-teema="tumma"] {
  color-scheme: dark;
  --pi-kromi: #12181b;
  --pi-paneeli: #1a2226;
  --pi-viiva: #2a353b;
  --pi-viiva-2: #3b474e;
  --pi-teksti: #e4eaee;
  --pi-himmea: #a4b2bb;
  --pi-haalea: #7f8d97;
  --pi-paperi: #0e1316;
  --viiva: #2a353b;
  --reunavari: #2a353b;
  --muste: #eef2f4;
  --pi-valinta: linear-gradient(180deg, #3c2a1f 0%, #4a2e1d 52%, #52321e 100%);
  --pi-valinta-hover: linear-gradient(180deg, #46301f 0%, #55341f 52%, #5d3820 100%);
  --pi-valinta-reuna: #b7581f;
  --pi-valinta-teksti: #ffc39c;
  --pi-valinta-kiilto: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --pi-varjo-s: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.3);
  --pi-varjo-m: 0 4px 12px rgba(0, 0, 0, 0.4);
  --pi-varjo-l: 0 12px 32px rgba(0, 0, 0, 0.55);
}
html[data-teema="tumma"] body { background: var(--pi-kromi); color: var(--pi-teksti); }
/* Kirjasto */
html[data-teema="tumma"] .kirjasto > .alueet,
html[data-teema="tumma"] .kirjasto > .saatimet,
html[data-teema="tumma"] .saatimet,
html[data-teema="tumma"] .saatimet .saadin,
html[data-teema="tumma"] .piir-kategoriat,
html[data-teema="tumma"] .piir-hylly,
html[data-teema="tumma"] .piir-valitsin-kortti,
html[data-teema="tumma"] .piir-tyokalurivi,
html[data-teema="tumma"] .piir-tyokalut,
html[data-teema="tumma"] .piir-paneeli,
html[data-teema="tumma"] .piir-tilarivi,
html[data-teema="tumma"] .piir { background: var(--pi-paneeli); color: var(--pi-teksti); border-color: var(--pi-viiva); }
html[data-teema="tumma"] .piir-kanvas-kaari { background: var(--pi-paperi); }
html[data-teema="tumma"] .kat,
html[data-teema="tumma"] .piir-kat-nappi,
html[data-teema="tumma"] .taustavalinta button,
html[data-teema="tumma"] .piir-tuo-laite,
html[data-teema="tumma"] .piir-hylly-nappi,
html[data-teema="tumma"] .piir-kokonappi,
html[data-teema="tumma"] .piir-kulmanapit button,
html[data-teema="tumma"] .piir-napit button,
html[data-teema="tumma"] .piir-tunnusrivi button,
html[data-teema="tumma"] .piir-zoom button,
html[data-teema="tumma"] .piir-tyokalurivi button,
html[data-teema="tumma"] .piir-tyokalurivi select,
html[data-teema="tumma"] .piir-tyokalurivi .piir-valikko > summary,
html[data-teema="tumma"] .piir-tyokalut button,
html[data-teema="tumma"] .piir-tarkistus-paa button,
html[data-teema="tumma"] .piir-kerrosrivi button,
html[data-teema="tumma"] .piir-versio-rivi button,
html[data-teema="tumma"] .linja-lista li > button,
html[data-teema="tumma"] .linja-lisays,
html[data-teema="tumma"] .lp-lataa button,
html[data-teema="tumma"] .lp-toissijainen,
html[data-teema="tumma"] .tyopoyta-alapaa button,
html[data-teema="tumma"] .piir-vie .tyopoyta-alapaa button,
html[data-teema="tumma"] .piir-muistutus button,
html[data-teema="tumma"] .kortti-koot button,
html[data-teema="tumma"] .kortti-tyokalut button { background: #222c31; color: var(--pi-teksti); border-color: var(--pi-viiva-2); }
html[data-teema="tumma"] .piir-tyokalurivi button:hover:not(:disabled),
html[data-teema="tumma"] .piir-tyokalurivi .piir-valikko > summary:hover,
html[data-teema="tumma"] .piir-tyokalut button.piir-ohje-nappi:hover,
html[data-teema="tumma"] .kat:hover,
html[data-teema="tumma"] .kirjasto .alueet .kat.alue:hover,
html[data-teema="tumma"] .piir-kat-nappi:hover,
html[data-teema="tumma"] .piir-kulmanapit button:hover,
html[data-teema="tumma"] .piir-vie .tyopoyta-alapaa button:hover,
html[data-teema="tumma"] .piir-kerrosrivi:hover,
html[data-teema="tumma"] .kielivalitsin-rivi:hover,
html[data-teema="tumma"] .piir-valikko-kohta:hover,
html[data-teema="tumma"] .piir-valikko-kohta:focus-visible { background: #2c383e; color: #fff; border-color: var(--pi-viiva-2); }
html[data-teema="tumma"] .piir-tyokalurivi button,
html[data-teema="tumma"] .piir-tyokalurivi .piir-valikko > summary { background: transparent; border-color: transparent; }
html[data-teema="tumma"] .piir-tyokalurivi .piir-tyhjenna:hover:not(:disabled) { background: #3a1f1f; color: #ff9d9d; }
html[data-teema="tumma"] .piir-tyokalurivi .piir-paanappi { color: #fff; }
html[data-teema="tumma"] .piir-tyokalurivi input[type="number"],
html[data-teema="tumma"] .piir-kategoriat input[type="search"],
html[data-teema="tumma"] .ruudukko-otsikko input,
html[data-teema="tumma"] .kirjasto .ruudukko-otsikko input#haku,
html[data-teema="tumma"] .saadin input[type="text"],
html[data-teema="tumma"] .saadin select,
html[data-teema="tumma"] .piir-paneeli input[type="text"],
html[data-teema="tumma"] .piir-paneeli input[type="number"],
html[data-teema="tumma"] .piir-paneeli select,
html[data-teema="tumma"] .piir-mitat input,
html[data-teema="tumma"] .piir-mitat select,
html[data-teema="tumma"] .piir-nimio input,
html[data-teema="tumma"] .piir-yhde-rivi select,
html[data-teema="tumma"] .piir-pdf-valinnat select,
html[data-teema="tumma"] .piir-merkintavalinta,
html[data-teema="tumma"] .piir-haku input,
html[data-teema="tumma"] .lp-asetukset input[type="text"],
html[data-teema="tumma"] .lp-asetukset select,
html[data-teema="tumma"] .piir-paja input[type="text"],
html[data-teema="tumma"] .piir-paja select,
html[data-teema="tumma"] .tyopoyta input,
html[data-teema="tumma"] .tyopoyta select,
html[data-teema="tumma"] .piir-tunnus-kentta { background: #0f1518; color: var(--pi-teksti); border-color: var(--pi-viiva-2); }
html[data-teema="tumma"] .saadin input[type="color"],
html[data-teema="tumma"] .piir-varit input[type="color"],
html[data-teema="tumma"] .lp-asetukset input[type="color"] { background: #0f1518; border-color: var(--pi-viiva-2); }
/* Kortit: symboli vaalealla laatalla, kehys tumma. */
html[data-teema="tumma"] .kortti { background: #1f292e; border-color: var(--pi-viiva-2); }
html[data-teema="tumma"] .kortti:hover { border-color: #55646d; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5); }
html[data-teema="tumma"] .kortti-nimi { color: var(--pi-teksti); background: #1f292e; border-color: var(--pi-viiva); }
html[data-teema="tumma"] .esikatselu,
html[data-teema="tumma"] .ruudukko.tausta-vaalea .esikatselu { background: #e9edf1; }
html[data-teema="tumma"] .ruudukko.tausta-ruutu .esikatselu { background-color: #e9edf1; }
html[data-teema="tumma"] .piir-lisays { background: #e9edf1; border-color: #3b474e; color: #22303a; }
html[data-teema="tumma"] .piir-lisays:hover { border-color: #8fa0ab; }
html[data-teema="tumma"] .piir-lisays-nimi { color: #22303a; }
html[data-teema="tumma"] .linja-esikatselu,
html[data-teema="tumma"] .piir-paja-runko svg,
html[data-teema="tumma"] .lp-alusta { background: #e9edf1; }
/* Valikot, dialogit, ohjeet */
html[data-teema="tumma"] .piir-valikko-sisus,
html[data-teema="tumma"] div.piir-valikko,
html[data-teema="tumma"] .kielivalitsin-valikko,
html[data-teema="tumma"] .piir-nappaimet,
html[data-teema="tumma"] .piir-paja,
html[data-teema="tumma"] .piir-haku,
html[data-teema="tumma"] .tyopoyta,
html[data-teema="tumma"] .tyopoyta-alapaa,
html[data-teema="tumma"] .piir-vie .piir-valikko-sisus,
html[data-teema="tumma"] .piir-ohje,
html[data-teema="tumma"] .piir-muistutus,
html[data-teema="tumma"] .piir-alue,
html[data-teema="tumma"] .piir-kerros-ohje,
html[data-teema="tumma"] .vinkki { background: #1c2529; color: var(--pi-teksti); border-color: var(--pi-viiva-2); }
html[data-teema="tumma"] .piir-muistutus { border-color: #8a5a2e; color: #ffd9bf; }
html[data-teema="tumma"] .piir-muistutus-varoitus { border-color: #8a3a34; background: #2a1c1c; color: #ffc9c4; }
html[data-teema="tumma"] .vinkki { border-color: var(--pi-viiva-2); color: var(--pi-himmea); }
html[data-teema="tumma"] .vinkki kbd,
html[data-teema="tumma"] .piir-nappaimet-rivi kbd,
html[data-teema="tumma"] kbd { background: #0f1518; color: var(--pi-teksti); border-color: var(--pi-viiva-2); }
html[data-teema="tumma"] .varoitus { background: #3a2e12; border-color: #6b5a24; color: #ffd98a; }
html[data-teema="tumma"] .piir-versio-rivi,
html[data-teema="tumma"] .piir-kerrosrivi,
html[data-teema="tumma"] .piir-yhde-rivi,
html[data-teema="tumma"] .piir-valikko-erotin { background: transparent; border-color: var(--pi-viiva); }
html[data-teema="tumma"] .piir-kerrosnro,
html[data-teema="tumma"] .piir-tilarivi-valinta { background: #2c383e; color: var(--pi-teksti); }
html[data-teema="tumma"] .piir-portti { background: #1a2226; }
html[data-teema="tumma"] .piir-valinta-kahva { background: #1a2226; }
html[data-teema="tumma"] .piir-tyhja { color: var(--pi-himmea); }
html[data-teema="tumma"] .piir-tyhja b { color: var(--pi-teksti); }
html[data-teema="tumma"] .piir-paneeli-kahva button { background: #2c383e; color: var(--pi-teksti); }
html[data-teema="tumma"] .piir-kanvas { box-shadow: 0 10px 34px rgba(0, 0, 0, 0.6); }
html[data-teema="tumma"] .piir-tyokalut,
html[data-teema="tumma"] .piir-paneeli { border-color: var(--pi-viiva); }
html[data-teema="tumma"] .lp-tyokalut button:hover:not(:disabled) { background: #2c383e; }
html[data-teema="tumma"] .piir-tarkistus-paa,
html[data-teema="tumma"] .tyopoyta-ylapaa,
html[data-teema="tumma"] .piir-nappaimet-ylapaa,
html[data-teema="tumma"] .lp-yla { border-color: var(--pi-viiva); }
html[data-teema="tumma"] h1, html[data-teema="tumma"] h2, html[data-teema="tumma"] h3,
html[data-teema="tumma"] .ruudukko-otsikko b,
html[data-teema="tumma"] .alue-otsikko,
html[data-teema="tumma"] .saatimet-otsikko,
html[data-teema="tumma"] .saadin > label,
html[data-teema="tumma"] .piir-paneeli label,
html[data-teema="tumma"] .piir-paneeli h3,
html[data-teema="tumma"] .piir-paneeli h4,
html[data-teema="tumma"] .piir-ryhma-otsikko,
html[data-teema="tumma"] .piir-valikko-sisus label,
html[data-teema="tumma"] .linja-valinta,
html[data-teema="tumma"] .piir-mitat { color: var(--pi-teksti); }
html[data-teema="tumma"] .kat { color: var(--pi-teksti); }
html[data-teema="tumma"] .kat[aria-selected="true"],
html[data-teema="tumma"] .piir-kat-nappi[aria-selected="true"] { background: var(--pi-valinta); color: var(--pi-valinta-teksti); border-color: var(--pi-valinta-reuna); }
html[data-teema="tumma"] .kortti.kopioitu { border-color: var(--korostus); }
html[data-teema="tumma"] .ilmo { background: #eef2f4; color: #171d1f; }
html[data-teema="tumma"] .ilmo.virhe { background: #d0021b; color: #fff; }

/* ===== Vaihe 222: arkki ja viennit =====
   PDF- ja PNG-ikkunoiden esikatselu: kuva sovitettuna laatikkoon,
   läpinäkyvä tausta ruutukuviona, odotus himmennyksenä. */
.piir-vienti-esikatselu {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid var(--pi-viiva, #d7e0ea);
  border-radius: 10px;
  background: #eef2f6;
  overflow: hidden;
}
.piir-vienti-esikatselu canvas { display: block; max-width: 100%; box-shadow: var(--pi-varjo-m); }
.piir-vienti-esikatselu.ruutu canvas {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #d9e0e7 25%, transparent 25%, transparent 75%, #d9e0e7 75%),
    linear-gradient(45deg, #d9e0e7 25%, transparent 25%, transparent 75%, #d9e0e7 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}
.piir-vienti-esikatselu.odottaa::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(238, 242, 246, 0.45);
}
.piir-vienti-tiedot { margin: 0 0 12px; font-size: 12px; font-weight: 700; color: var(--pi-himmea, #6a7c8c); text-align: center; }
.piir-vienti-valinnat { grid-template-columns: repeat(3, 1fr); }
.piir-vienti-napit { display: grid; gap: 8px; }
.piir-vienti-toinen {
  min-height: 36px;
  border: 1px solid var(--pi-viiva-2, #c9d3dc);
  border-radius: 8px;
  background: #fff;
  color: var(--muste);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.piir-vienti-toinen:hover { border-color: #9fb0bd; }
.piir-vienti-vihje { font-weight: 600; color: var(--pi-himmea, #6a7c8c); }
.piir-vienti-vihje[hidden] { display: none; }
.piir-pdf-rasti input:disabled + .piir-vienti-vihje { font-style: normal; }
/* Vaihe 274: iso PNG (yli 15 Mpx) näkyy varoituksena, PDF-ikkunan
   Tiedostomuoto koko leveydellä ja vektori-PDF:n ohje napin yllä.
   Piilotetut rivit piiloon, vaikka label on grid. */
.piir-vienti-tiedot.iso { color: #9a5b00; }
.piir-pdf-valinnat .piir-pdf-muoto { grid-column: 1 / -1; }
.piir-pdf-valinnat label[hidden] { display: none; }
.piir-pdf-vektori-ohje { margin: -4px 0 12px; font-size: 13px; line-height: 1.45; }
/* Pitkä valinta (Ultratarkka 8K – zoomaukseen) ei saa kaventaa Tausta-saraketta. */
@media (min-width: 641px) {
  #piirPngTausta .piir-vienti-valinnat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
#piirPngTausta .piir-vienti-valinnat select { min-width: 0; width: 100%; }
@media (max-width: 640px) {
  .piir-pdf-valinnat, .piir-vienti-valinnat { grid-template-columns: 1fr; }
}
html[data-teema="tumma"] .piir-vienti-esikatselu { background: #0f1518; border-color: var(--pi-viiva-2); }
html[data-teema="tumma"] .piir-vienti-esikatselu.odottaa::after { background: rgba(15, 21, 24, 0.5); }
html[data-teema="tumma"] .piir-vienti-esikatselu.ruutu canvas {
  background-color: #1a2226;
  background-image:
    linear-gradient(45deg, #2a353b 25%, transparent 25%, transparent 75%, #2a353b 75%),
    linear-gradient(45deg, #2a353b 25%, transparent 25%, transparent 75%, #2a353b 75%);
}
html[data-teema="tumma"] .piir-vienti-toinen { background: #1f292e; color: var(--pi-teksti); border-color: var(--pi-viiva-2); }
html[data-teema="tumma"] .piir-pdf-valinnat label { color: var(--pi-teksti); }
html[data-teema="tumma"] .piir-vienti-tiedot,
html[data-teema="tumma"] .piir-vienti-vihje { color: var(--pi-himmea); }
html[data-teema="tumma"] .piir-vienti-tiedot.iso { color: #f0b35a; }

/* ===== Vaihe 223: viimeistelyt =====
   Suosikkitähti kortissa, kurkistus, aloitusnäkymä, esittelykierros ja
   tarkistuksen numeromerkit kanvaalla. */
.piir-lisays { position: relative; }
.piir-lisays-tahti {
  position: absolute;
  top: 1px;
  left: 4px;
  padding: 1px 3px;
  color: #b5c2cd;
  font-size: 13px;
  line-height: 1;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.12s, color 0.12s;
}
.piir-lisays:hover .piir-lisays-tahti,
.piir-lisays-tahti.on,
.piir-lisays-tahti:focus-visible { opacity: 1; }
.piir-lisays-tahti.on { color: #f0a020; }
.piir-lisays-tahti:hover { color: var(--brandi); }
.piir-kurkistus {
  position: fixed;
  z-index: 320;
  width: 240px;
  padding: 12px 14px 12px;
  border: 1px solid var(--pi-viiva-2, #c9d3dc);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--pi-varjo-l);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.14s, transform 0.14s;
}
.piir-kurkistus.nakyy { opacity: 1; transform: none; }
.piir-kurkistus[hidden] { display: none; }
.piir-kurkistus-kuva {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  margin-bottom: 8px;
  border-radius: 8px;
  background: #e9edf1;
}
.piir-kurkistus-kuva svg { max-width: 92%; max-height: 108px; }
.piir-kurkistus-nimi { font-size: 14px; font-weight: 800; color: var(--muste); }
.piir-kurkistus-ryhma { margin: 2px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--pi-himmea, #6a7c8c); }
.piir-kurkistus-vihje { font-size: 12px; line-height: 1.4; color: #46586c; }

/* Aloitusnäkymä tyhjällä arkilla. */
.piir-tyhja { max-width: none; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; }
.piir-tyhja b { font-size: 17px; }
.piir-kanvas.alusta-tumma ~ .piir-tyhja b { color: #e6edf1; }
.piir-aloitus { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; pointer-events: auto; }
.piir-aloitus-nappi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 176px;
  padding: 18px 14px 14px;
  border: 1px solid var(--reunavari);
  border-radius: 14px;
  background: #fff;
  color: var(--muste);
  font: inherit;
  cursor: pointer;
  box-shadow: var(--pi-varjo-s);
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.piir-aloitus-nappi .pi-ikoni { width: 28px; height: 28px; color: var(--brandi); }
.piir-aloitus-nappi span { font-size: 14px; font-weight: 800; color: inherit; }
.piir-aloitus-nappi small { font-size: 12px; line-height: 1.35; color: #5b6b79; }
.piir-aloitus-nappi:hover { transform: translateY(-2px); box-shadow: var(--pi-varjo-m); border-color: #b8c6d4; }
.piir-aloitus-paa { border-color: rgba(255, 90, 0, 0.55); box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.1), var(--pi-varjo-s); }
.piir-aloitus-esittely {
  pointer-events: auto;
  border: 0;
  background: transparent;
  color: var(--pi-himmea, #6a7c8c);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.piir-aloitus-esittely:hover { color: var(--brandi); }

/* Esittelykierros: valokeila ja kortti. */
.piir-opastus { position: fixed; inset: 0; z-index: 400; }
.piir-opastus[hidden] { display: none; }
.piir-opastus-valo {
  position: absolute;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(10, 16, 20, 0.58), 0 0 0 3px rgba(255, 90, 0, 0.8);
  pointer-events: none;
  transition: left 0.25s, top 0.25s, width 0.25s, height 0.25s;
}
.piir-opastus-kortti {
  position: absolute;
  width: min(340px, calc(100vw - 24px));
  padding: 16px 18px 14px;
  border-radius: 14px;
  background: #fff;
  color: var(--muste);
  box-shadow: var(--pi-varjo-l);
  transition: left 0.25s, top 0.25s;
}
.piir-opastus-askel { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; color: var(--brandi); }
.piir-opastus-kortti h4 { margin: 4px 0 6px; font-size: 16px; }
.piir-opastus-kortti p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: #46586c; }
.piir-opastus-napit { display: flex; justify-content: flex-end; gap: 8px; }
.piir-opastus-napit button { min-height: 34px; padding: 0 14px; border-radius: 8px; font: inherit; font-weight: 800; cursor: pointer; }
.piir-opastus-ohita { border: 1px solid var(--pi-viiva-2, #c9d3dc); background: #fff; color: #46586c; }
.piir-opastus-seuraava { border: 0; background: var(--brandi); color: #fff; }
.piir-nappaimet-esittely { width: 100%; margin-top: 14px; }

/* Tarkistuksen merkit kanvaalla ja numerot listassa. */
.piir-tarkistus-merkit { position: absolute; left: 0; top: 0; z-index: 8; pointer-events: none; }
.piir-tarkistus-merkit[hidden] { display: none; }
.piir-tarkistus-merkki {
  position: absolute;
  transform: translate(-50%, -100%);
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #e0a100;
  color: #171d1f;
  font: 800 12px/20px var(--pi-fontti, 'Segoe UI', sans-serif);
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
  animation: piir-merkki-syke 1.6s ease-out infinite;
}
.piir-tarkistus-merkki.vakava { background: #d93a2b; color: #fff; }
.piir-tarkistus-merkki:hover { animation: none; transform: translate(-50%, -100%) scale(1.12); }
@keyframes piir-merkki-syke {
  0% { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28), 0 0 0 0 rgba(224, 161, 0, 0.55); }
  70% { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28), 0 0 0 12px rgba(224, 161, 0, 0); }
  100% { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28), 0 0 0 0 rgba(224, 161, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .piir-tarkistus-merkki { animation: none; } }
.piir-tarkistus-rivi { display: inline-flex; align-items: center; gap: 8px; }
.piir-tarkistus-nro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #e0a100;
  color: #171d1f;
  font-size: 11.5px;
  font-weight: 800;
}

/* Tumma teema. */
html[data-teema="tumma"] .piir-kurkistus { background: #1f292e; border-color: var(--pi-viiva-2); }
html[data-teema="tumma"] .piir-kurkistus-nimi { color: var(--pi-teksti); }
html[data-teema="tumma"] .piir-kurkistus-vihje { color: var(--pi-himmea); }
html[data-teema="tumma"] .piir-aloitus-nappi { background: #1f292e; color: var(--pi-teksti); border-color: var(--pi-viiva-2); }
html[data-teema="tumma"] .piir-aloitus-nappi small { color: var(--pi-himmea); }
html[data-teema="tumma"] .piir-tyhja b { color: var(--pi-teksti); }
html[data-teema="tumma"] .piir-opastus-kortti { background: #1f292e; color: var(--pi-teksti); }
html[data-teema="tumma"] .piir-opastus-kortti p { color: var(--pi-himmea); }
html[data-teema="tumma"] .piir-opastus-ohita { background: #1a2226; color: var(--pi-teksti); border-color: var(--pi-viiva-2); }

/* ===== Vaihe 224: kynä =====
   Kynäpalkki kanvaan yläpuolella, esikatselu kanvaan päällä, piirroksen
   valinta ja tekstieditori arkilla. */
.piir-kyna-palkki {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--pi-viiva, #d7e0ea);
  background: var(--pi-paneeli, #f7f9fb);
}
.piir-kyna-palkki[hidden] { display: none; }
.piir-kyna-tyokalu {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muste);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.piir-kyna-tyokalu:hover { background: #eef2f6; }
.piir-kyna-tyokalu[aria-pressed="true"] { background: var(--pi-valinta); border-color: var(--pi-valinta-reuna); color: var(--pi-valinta-teksti); }
.piir-kyna-asetus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--pi-himmea, #6a7c8c);
}
.piir-kyna-asetus select,
.piir-kyna-asetus input[type="color"] {
  min-height: 28px;
  padding: 0 6px;
  border: 1px solid var(--pi-viiva-2, #c9d3dc);
  border-radius: 6px;
  background: #fff;
  color: var(--muste);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
}
.piir-kyna-asetus input[type="color"] { width: 40px; padding: 2px; }
.piir-kyna-asetus[hidden] { display: none; }
.piir-kyna-vihje { flex: 1; min-width: 200px; font-size: 12px; color: var(--pi-himmea, #6a7c8c); }
.piir-kyna-luonnos { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 7; overflow: visible; }
.piir-kyna-luonnos[hidden] { display: none; }
.piir-kyna-veto { fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
.piir-kyna-esikatselu { opacity: 0.75; }
.piir-kyna-apupiste { fill: var(--brandi); stroke: #fff; stroke-width: 1.5; }
.piir-kyna-apuviiva { stroke: var(--brandi); stroke-width: 1; stroke-dasharray: 4,3; }
.piir-kanvas-pito.tila-kyna .piir-kanvas,
.piir-kanvas-pito.tila-kyna .piir-kanvas svg g { cursor: crosshair; }
.piir-kanvas svg g[data-pr] { cursor: move; }
.piir-piirros-kentta {
  position: absolute;
  z-index: 12;
  padding: 2px 4px;
  border: 1.5px solid var(--brandi);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.96);
  color: #22303f;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.25;
  resize: none;
  box-shadow: 0 4px 14px rgba(23, 29, 31, 0.2);
}
.piir-tyokalut #piirKynaNappi .pi-ikoni { width: 18px; height: 18px; }
/* Oletusvärillä (#22303f) piirretty kynänjälki kääntyy tummalla arkilla
   vaaleaksi kuten mittatekstit — muut värit ovat käyttäjän valintoja. */
.piir-kanvas.alusta-tumma svg g.piir-piirros [stroke="#22303f"] { stroke: #dfe6ea; }
.piir-kanvas.alusta-tumma svg g.piir-piirros [fill="#22303f"] { fill: #dfe6ea; }
.piir-kanvas.alusta-tumma svg g.piir-piirros text.piir-mitta { stroke: #1e2529; }
html[data-teema="tumma"] .piir-kyna-palkki { background: var(--pi-paneeli); border-color: var(--pi-viiva); }
html[data-teema="tumma"] .piir-kyna-tyokalu { color: var(--pi-teksti); }
html[data-teema="tumma"] .piir-kyna-tyokalu:hover { background: #2c383e; }
html[data-teema="tumma"] .piir-kyna-asetus select,
html[data-teema="tumma"] .piir-kyna-asetus input[type="color"] { background: #0f1518; color: var(--pi-teksti); border-color: var(--pi-viiva-2); }
html[data-teema="tumma"] .piir-piirros-kentta { background: rgba(31, 41, 46, 0.97); color: #e6edf1; }

/* ===== Vaihe 225: kosketus =====
   Sormi laitteen, putken tai piirroksen päällä raahaa, ei vieritä; kynä-
   ja piirtotilassa koko arkki on piirtoaluetta. Sama sääntö on myös
   touchstart-käsittelijässä (piirustus.js), koska touch-action ei päde
   kaikissa selaimissa SVG-ryhmiin. Tyhjä arkki vierittyy sormella. */
.piir-kanvas svg g[data-i],
.piir-kanvas svg g[data-pr],
.piir-kanvas svg g[data-lj],
.piir-kanvas svg g[data-l],
.piir-kanvas svg g[data-oi] { touch-action: none; }
.piir-kanvas-pito.tila-kyna,
.piir-kanvas-pito.tila-piirto { touch-action: none; }
@media (max-width: 640px) {
  .piir-kyna-vihje { display: none; }
  .piir-kyna-palkki { gap: 4px 8px; padding: 6px 8px; }
}

/* ===== Vaihe 226: tilaa arkille =====
   Pitkä valikko vierittyy, ominaisuuspaneeli nousee oikealta vain
   valinnan ajaksi eikä vie arkilta tilaa, aloitusnäkymän saa pois. */
.piir-valikko-sisus { max-height: calc(100vh - 150px); overflow-y: auto; }
@media (min-width: 901px) {
  .piir-paneeli {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    width: 264px;
    box-shadow: -14px 0 34px rgba(10, 27, 44, 0.16);
    transform: translateX(105%);
    transition: transform 0.22s ease;
  }
  .piir.piir-valinta-auki .piir-paneeli { transform: none; }
  .piir-paneeli-kahva { display: flex; }
}
.piir-aloitus-sulje {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--reunavari);
  border-radius: 50%;
  background: #fff;
  color: #6a7c8c;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  pointer-events: auto;
}
.piir-aloitus-sulje:hover { color: var(--brandi); border-color: var(--brandi); }
html[data-teema="tumma"] .piir-aloitus-sulje { background: #1f292e; color: var(--pi-teksti); border-color: var(--pi-viiva-2); }
/* Puhelin (Vaihe 263): arkki on ruutua leveämpi, joten aloitusnäkymä
   rajataan näkyvään leveyteen. Sulkunappi jäi puoliksi reunan taakse. */
@media (max-width: 699px) {
  .piir-tyhja { right: auto; width: calc(100vw - 20px); box-sizing: border-box; }
}

/* ===== Vaihe 227: koko näytön piirto =====
   .piir-ylaosa ei normaalisti muuta asettelua (display: contents).
   Koko näytössä yläosa ja työkalurivi liukuvat reunoista esiin. */
.piir-ylaosa { display: contents; }
.piir.piir-taysi { position: relative; }
.piir.piir-taysi .piir-kanvas-kaari { padding: 10px; }
.piir.piir-taysi.piir-taysi-reunat .piir-ylaosa {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  background: var(--pi-kromi);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
  transform: translateY(-100%);
  transition: transform 0.2s ease;
}
.piir.piir-taysi.piir-taysi-reunat .piir-ylaosa.nakyy { transform: none; }
.piir.piir-taysi.piir-taysi-reunat .piir-tyokalut {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 65;
  box-shadow: 12px 0 30px rgba(0, 0, 0, 0.2);
  transform: translateX(-100%);
  transition: transform 0.2s ease;
}
.piir.piir-taysi.piir-taysi-reunat .piir-tyokalut.nakyy { transform: none; }
/* Kun yläosa on esillä, työkalurivi alkaa sen alta eikä jää sen taakse. */
.piir.piir-taysi.piir-taysi-reunat .piir-ylaosa.nakyy ~ .piir-runko .piir-tyokalut { top: var(--piir-yla-kork, 96px); }
.piir-taysi-kahvat { position: absolute; inset: 0; z-index: 60; pointer-events: none; }
.piir-taysi-kahvat[hidden] { display: none; }
.piir-taysi-kahva {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 11px;
  border: 0;
  border-radius: 999px;
  background: rgba(23, 29, 31, 0.55);
  color: #fff;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0.55;
  transition: opacity 0.15s;
}
.piir-taysi-kahva:hover { opacity: 1; }
.piir-taysi-kahva.yla { top: 6px; left: 50%; transform: translateX(-50%); }
.piir-taysi-kahva.vasen { left: -22px; top: 50%; transform: translateY(-50%) rotate(-90deg); }
.piir-taysi-nappi[aria-pressed="true"] { background: var(--pi-valinta); border-color: var(--pi-valinta-reuna); color: var(--pi-valinta-teksti); }

/* ===== Vaihe 229: pikapalkki — tärkeimmät työkalut yhdessä rivissä ===== */
.piir-pikapalkki {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 42px;
  padding: 4px 10px;
  background: var(--pi-paneeli, #f7f9fb);
  border-bottom: 1px solid var(--pi-viiva, #d7e0ea);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  font-size: 12.5px;
}
.piir-pikapalkki[hidden] { display: none; }
.piir-pika-otsikko {
  flex: none;
  margin-right: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pi-himmea, #6b7a88);
}
.piir-pikapalkki .piir-erotin { flex: none; width: 1px; height: 22px; margin: 0 4px; background: var(--pi-viiva, #d7e0ea); }
.piir-pika {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--pi-teksti, #2b3a46);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--pi-siirtyma, 0.15s), color var(--pi-siirtyma, 0.15s);
}
.piir-pika:hover { background: #eef2f6; color: var(--muste); }
.piir-pika:active { transform: translateY(1px); }
.piir-pika-symbolit { display: inline-flex; align-items: center; gap: 2px; }
.piir-pika-symboli { padding: 0 8px 0 4px; }
.piir-pika-kuva { display: inline-flex; align-items: center; justify-content: center; height: 30px; min-width: 24px; }
.piir-pika-kuva svg { display: block; height: 26px; width: auto; max-width: 60px; }
html[data-teema="tumma"] .piir-pikapalkki { background: var(--pi-paneeli); border-color: var(--pi-viiva); }
html[data-teema="tumma"] .piir-pika { color: var(--pi-teksti); }
html[data-teema="tumma"] .piir-pika:hover { background: #2c383e; color: #fff; }
@media (max-width: 640px) {
  .piir-pikapalkki { padding: 4px 8px; }
}

/* ===== Vaihe 230: piirtotyökalujen nimet näkyviin pystyrivillä =====
   Markus ei löytänyt työkaluja pelkistä ikoneista, ja lisäyspalkin
   Putki/Kynä-tuplat sekoittivat lisää. Nimi ikonin alla, pikanäppäin
   nurkassa; puhelimella (vaakarivi) nimet jäävät vihjeeseen. */
.piir-tyokalut { width: 68px; }
.piir-tyokalut button.piir-ohje-nappi {
  width: 60px;
  height: 46px;
  grid-template-rows: 22px 12px;
  align-content: center;
  gap: 1px;
}
.piir-tyokalut .nappiteksti {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  /* Vanhat mediasäännöt (≤1280 px) piilottavat .nappiteksti-luokan
     työkalurivillä; pystyrivin nimet pysyvät näkyvissä. */
  display: block;
  font-size: 10px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.piir-tyokalut .piir-nappain { top: 2px; right: 4px; bottom: auto; font-size: 9px; opacity: 1; color: var(--pi-himmea, #5c6f7d); }
@media (max-width: 900px) {
  .piir-tyokalut { width: auto; }
  .piir-tyokalut button.piir-ohje-nappi { width: 36px; height: 36px; grid-template-rows: none; gap: 0; }
  .piir-tyokalut .nappiteksti { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .piir-tyokalut .piir-nappain { top: auto; bottom: 1px; right: 3px; }
}

/* Vaihe 230: Kehys-nappi lisäsi rivin pituutta — välit tiiviimmiksi, jotta
   koko työkalurivi mahtuu 1400 px:n ruutuun yhdelle riville. */
@media (max-width: 1560px) {
  .piir-tyokalurivi { gap: 2px; padding-left: 8px; padding-right: 8px; }
  .piir-tyokalurivi button { padding-left: 7px; padding-right: 7px; }
  .piir-tyokalurivi .piir-ohje-nappi { gap: 4px; }
  .piir-tyokalurivi .piir-valikko > summary { padding-left: 7px; padding-right: 7px; }
  .piir-tyokalurivi .piir-merkintavalinta { max-width: 128px; }
  .piir-tyokalurivi .piir-erotin { margin: 0 2px; }
}

/* ===== Vaihe 231: ominaisuuspaneelin sulkunappi näkyviin työpöydällä =====
   Markus ei saanut paneelia kiinni: ✕ oli display: none yli 900 px:n
   leveydellä (vain puhelimen pohjapaneelilla oli nappi). Otsikkorivi
   pysyy paneelin yläreunassa vierityksessäkin, ja nappi on nimetty. */
.piir-paneeli-kahva button {
  width: auto;
  height: 30px;
  padding: 0 12px 0 10px;
  gap: 6px;
  border: 1px solid var(--pi-viiva, #d7e0ea);
  border-radius: 999px;
  background: #fff;
  color: var(--muste);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.piir-paneeli-kahva button:hover { background: var(--brandi); border-color: var(--brandi); color: #fff; }
@media (min-width: 901px) {
  .piir-paneeli-kahva {
    position: sticky;
    top: -14px;
    z-index: 2;
    margin: -14px -14px 10px;
    padding: 10px 14px;
    align-items: center;
    justify-content: space-between;
    background: var(--pi-paneeli, #f7f9fb);
    border-bottom: 1px solid var(--pi-viiva, #d7e0ea);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pi-himmea, #6b7a88);
  }
  .piir-paneeli-kahva button { display: inline-flex; }
}
html[data-teema="tumma"] .piir-paneeli-kahva { background: var(--pi-paneeli); border-color: var(--pi-viiva); }
html[data-teema="tumma"] .piir-paneeli-kahva button { background: #2c383e; color: var(--pi-teksti); border-color: var(--pi-viiva-2); }
html[data-teema="tumma"] .piir-paneeli-kahva button:hover { background: var(--brandi); color: #fff; border-color: var(--brandi); }

/* ===== Vaihe 233: kokonaistarkistuksen korjaukset, osa 2 (tyylit) =====
   Säiliösuunnittelijan ja Kerrokset-ikkunan alarivin napit olivat selaimen
   oletusnappeja; tumman teeman aukot; pystyrivin painettu tila ja vihjeet
   AA-kontrastiin; työkalurivi yhdelle riville 900–1120 px; puhelimen
   kromi pienemmäksi; paneeli ei peitä tilariviä. */
.piir-paja-napit button,
.piir-kerros-napit button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 1px solid var(--pi-viiva-2, #c9d3dc);
  border-radius: 8px;
  background: #fff;
  color: var(--muste);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.piir-paja-napit button:hover,
.piir-kerros-napit button:hover { border-color: var(--brandi); color: var(--brandi); }
.piir-paja-napit .paanappi,
.piir-kerros-napit .paanappi { background: var(--brandi); border-color: var(--brandi); color: #fff; font-weight: 700; }
.piir-paja-napit .paanappi:hover,
.piir-kerros-napit .paanappi:hover { background: #e04e00; border-color: #e04e00; color: #fff; }
html[data-teema="tumma"] .piir-paja-napit button,
html[data-teema="tumma"] .piir-kerros-napit button { background: #222c31; color: var(--pi-teksti); border-color: var(--pi-viiva-2); }
html[data-teema="tumma"] .piir-paja-napit .paanappi,
html[data-teema="tumma"] .piir-kerros-napit .paanappi { background: var(--brandi); color: #fff; border-color: var(--brandi); }

/* Tumma teema: painettu Tumma-nappi, versiohistorian tekstit, tilarivin
   tallennusvärit, kerrosikkunan koko, aloitusnäkymän hover, avattu Ohje,
   lisäyspalkin symbolikuvakkeille vaalea laatta. */
html[data-teema="tumma"] #piirTummaNappi[aria-pressed="true"] { background: var(--pi-valinta); border-color: var(--pi-valinta-reuna); color: var(--pi-valinta-teksti); }
html[data-teema="tumma"] .piir-versio-tiedot b { color: var(--pi-teksti); }
html[data-teema="tumma"] .piir-versiot-ohje,
html[data-teema="tumma"] .piir-versiot-lista,
html[data-teema="tumma"] .piir-versio-tiedot span,
html[data-teema="tumma"] .piir-kerros-koko,
html[data-teema="tumma"] .piir-tilarivi-ohje { color: var(--pi-himmea); }
html[data-teema="tumma"] .piir-tallennus.valmis { color: #6fd39b; }
html[data-teema="tumma"] .piir-tallennus.kesken { color: #ffd27a; }
html[data-teema="tumma"] .piir-tallennus.virhe { color: #ff9d9d; }
html[data-teema="tumma"] .piir-aloitus-nappi:hover { border-color: var(--pi-viiva-2); }
html[data-teema="tumma"] .piir-tyokalurivi .piir-ohje-nappi[aria-expanded="true"] { background: var(--pi-valinta); border-color: var(--pi-valinta-reuna); color: var(--pi-valinta-teksti); }
html[data-teema="tumma"] .piir-pika-kuva { background: #e9edf1; border-radius: 6px; padding: 0 3px; }
html[data-teema="tumma"] .piir-versio-nyt { background: #222c31; color: var(--pi-teksti); border-color: var(--pi-viiva-2); }
/* Näyttötilan palkin ja arkin väliin ei jää vaaleaa rakoa, kun palkki rivittyy. */
body.piir-nayttotila .piir { background: #0e1417; }

/* Pystyrivin painettu tila samalla kermavalinnalla kuin työkalurivin
   kytkimet: 10 px:n nimi valkoisena oranssilla jäi alle AA:n. */
.piir-tyokalut button.piir-ohje-nappi[aria-pressed="true"],
.piir-tyokalut button.piir-ohje-nappi[aria-pressed="true"]:hover {
  background: var(--pi-valinta);
  border: 1px solid var(--pi-valinta-reuna);
  color: var(--pi-valinta-teksti);
  box-shadow: none;
}
.piir-tyokalut button.piir-ohje-nappi[aria-pressed="true"] .piir-nappain { color: inherit; }

/* Työkalurivi mahtuu yhdelle riville myös 900–1120 px:n ikkunoissa. */
@media (min-width: 901px) and (max-width: 1120px) {
  .piir-tyokalurivi { gap: 1px; }
  .piir-tyokalurivi button { padding-left: 5px; padding-right: 5px; }
  .piir-tyokalurivi .piir-paanappi-teksti { display: none; }
  .piir-tyokalurivi .piir-merkintavalinta { max-width: 96px; }
  .piir-tyokalurivi .piir-vali { display: none; }
}

/* Puhelin: työkalurivistä pois harvoin tarvitut säätimet (ne ovat
   Näkymä-valikossa), kynäpalkki vierittyy yhdellä rivillä, näyttötilan
   yläpalkki rivittyy siististi. */
@media (max-width: 640px) {
  .piir-tyokalurivi .piir-merkinta-otsikko,
  .piir-tyokalurivi .piir-merkintavalinta,
  .piir-tyokalurivi #piirTummaNappi,
  .piir-tyokalurivi #piirKehysNappi { display: none; }
  .piir-kyna-palkki { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
  .piir-kyna-palkki > * { flex: none; }
  .piir-naytto-palkki { height: auto; min-height: 46px; flex-wrap: wrap; gap: 6px; padding: 6px 8px; }
  .piir-naytto-vihje { display: none; }
  .piir-naytto-palkki button { min-height: 30px; padding: 0 9px; font-size: 12px; }
  body.piir-nayttotila .piir-runko { padding-top: 92px; }
}

/* Paneeli ei peitä tilariviä, ja koko näytössä se alkaa yläosan alta. */
#piirTilarivi { position: relative; z-index: 31; }
@media (min-width: 901px) {
  .piir-paneeli { padding-bottom: 44px; }
}
.piir.piir-taysi.piir-taysi-reunat .piir-ylaosa.nakyy ~ .piir-runko .piir-paneeli { top: var(--piir-yla-kork, 96px); }

/* ===== Vaihe 235: premium-kierros, osa 1 — kehys ja paneelit =====
   Markuksen toive 26.9.2026: enemmän premium-tuntumaa. Symbolit ja
   näyttötila olivat jo hyvät; kehys niiden ympärillä ei. Piirustuksen
   nimi ja tallennusmerkki otsikkorivillä, työkalurivi kuvakkeina ja
   oranssi vain Vie-napille, pystyrivi kelluvana pillerinä arkin päällä,
   lisäyspalkki tiilinä, ominaisuuspaneeli kelluvana korttina
   numerokenttineen, zoomausvalikko, siirtymät ja tilarivin merkki
   oranssina vain kun tila ei ole Valinta. Toiminnot: js/viimeistely.js. */

/* 1. Piirustuksen nimi ja tallennusmerkki otsikkorivillä. */
.piir-otsikko-alue { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.piir-otsikko-alue .piir-otsikko { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; flex: none; }
.piir-nimi-kentta {
  width: min(380px, 100%);
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--pi-palkki-teksti);
  font: inherit;
  font-family: var(--pi-otsikkofontti);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  text-overflow: ellipsis;
  transition: background var(--pi-siirtyma), border-color var(--pi-siirtyma);
}
.piir-nimi-kentta::placeholder { color: var(--pi-palkki-himmea); font-weight: 500; }
.piir-nimi-kentta:hover { background: rgba(255, 255, 255, 0.06); }
.piir-nimi-kentta:focus { outline: none; background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.24); text-align: left; }
.piir-tallennusmerkki {
  flex: none;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border: 2px solid var(--pi-palkki-himmea);
  border-radius: 50%;
  background: transparent;
  transition: background var(--pi-siirtyma), border-color var(--pi-siirtyma);
}
.piir-tallennusmerkki.valmis { border-color: #2f9e6e; background: #2f9e6e; }
.piir-tallennusmerkki.kesken { border-color: #f0a500; background: #f0a500; animation: piir-merkki-odotus 1s ease-in-out infinite; }
.piir-tallennusmerkki.virhe { border-color: #d0021b; background: #d0021b; }
.piir-tallennusmerkki.sykahdys { animation: piir-merkki-sykahdys 0.7s ease-out; }
@keyframes piir-merkki-odotus { 50% { opacity: 0.35; } }
@keyframes piir-merkki-sykahdys {
  0% { box-shadow: 0 0 0 0 rgba(47, 158, 110, 0.75); transform: scale(1); }
  40% { transform: scale(1.4); }
  100% { box-shadow: 0 0 0 12px rgba(47, 158, 110, 0); transform: scale(1); }
}
@media (max-width: 640px) {
  .piir-otsikko-alue { display: none; }
}

/* 2. Työkalurivi kuvakkeina; väri kertoo vain tilan. Symbolikirjasto on
   musteenvärinen pääsisäänkäynti, oranssi jää Vie-napille, ja Tyhjennä
   arkki näyttää punaista vasta osoittimen alla. */
.piir-tyokalurivi .piir-ohje-nappi .nappiteksti { display: none; }
.piir-tyokalurivi .piir-ohje-nappi { min-width: 34px; justify-content: center; gap: 0; }
.piir-tyokalurivi .piir-paanappi {
  padding: 7px 14px;
  background: linear-gradient(180deg, #2b353b 0%, #171d1f 100%);
  border-color: #171d1f;
  color: #fff;
  box-shadow: var(--pi-kiilto), 0 3px 10px rgba(23, 29, 31, 0.28);
}
.piir-tyokalurivi .piir-paanappi:hover {
  background: linear-gradient(180deg, #364148 0%, #1f272b 100%);
  border-color: #0f1416;
  box-shadow: var(--pi-kiilto), 0 6px 16px rgba(23, 29, 31, 0.32);
}
html[data-teema="tumma"] .piir-tyokalurivi .piir-paanappi { background: #e9edf1; border-color: #e9edf1; color: #171d1f; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); }
html[data-teema="tumma"] .piir-tyokalurivi .piir-paanappi:hover { background: #fff; border-color: #fff; color: #171d1f; }
html[data-teema="tumma"] .piir-tyokalurivi .piir-paanappi[aria-pressed="true"] { background: var(--pi-valinta); border-color: var(--pi-valinta-reuna); color: var(--pi-valinta-teksti); box-shadow: none; }
.piir-tyokalurivi .piir-tyhjenna { color: #46586c; }

/* 3. Pystyrivi kelluvana pillerinä arkin päällä (työpöytä). Arkki alkaa
   pillerin oikealta puolelta: kaaren vasen padding on 100 px, ja
   piirArkkiNakyma/piirSovita lukevat sen tyylistä. Napit ilman
   laattataustaa kummassakin teemassa. */
.piir-tyokalut button.piir-ohje-nappi { border-radius: 10px; }
html[data-teema="tumma"] .piir-tyokalut button.piir-ohje-nappi { background: transparent; border-color: transparent; }
html[data-teema="tumma"] .piir-tyokalut button.piir-ohje-nappi[aria-pressed="true"] { background: var(--pi-valinta); border-color: var(--pi-valinta-reuna); }
@media (min-width: 901px) {
  .piir-runko > .piir-tyokalut {
    position: absolute;
    left: 14px;
    top: 14px;
    bottom: auto;
    z-index: 33;
    width: auto;
    max-height: calc(100% - 28px);
    padding: 6px;
    border: 1px solid var(--pi-viiva);
    border-right: 1px solid var(--pi-viiva);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--pi-varjo-m);
  }
  html[data-teema="tumma"] .piir-runko > .piir-tyokalut { background: rgba(26, 34, 38, 0.9); border-color: var(--pi-viiva-2); }
  .piir-keski > .piir-kanvas-kaari { padding-left: 100px; }
  .piir-keski > .piir-kyna-palkki { padding-left: 100px; }
  /* Koko näytössä pilleri liukuu vasemmasta reunasta kuten ennen. */
  .piir.piir-taysi.piir-taysi-reunat .piir-runko > .piir-tyokalut { top: 14px; bottom: auto; left: 14px; transform: translateX(calc(-100% - 20px)); }
  .piir.piir-taysi.piir-taysi-reunat .piir-runko > .piir-tyokalut.nakyy { transform: none; }
}

/* Lisäyspalkki tiilinä: symbolin kuva ja nimi alla, kaikki samankokoisia. */
.piir-pikapalkki { min-height: 60px; padding: 5px 10px; gap: 5px; }
.piir-pika {
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  height: 50px;
  min-width: 66px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
}
.piir-pika > .pi-ikoni { width: 20px; height: 20px; }
.piir-pika-symboli { padding: 2px 6px; }
.piir-pika-kuva { height: 26px; min-width: 0; }
.piir-pika-kuva svg { height: 24px; max-width: 58px; }
.piir-pikapalkki .piir-erotin { height: 30px; }

/* 4. Ominaisuuspaneeli kelluvana korttina (työpöytä): irti reunoista,
   pyöristetty, varjo; otsikossa symbolin pikkukuva; liukusäätimien
   vieressä numerokentät (js/viimeistely.js). */
@media (min-width: 901px) {
  .piir-runko > .piir-paneeli {
    top: 14px;
    right: 14px;
    bottom: 42px;
    padding-bottom: 14px;
    border: 1px solid var(--pi-viiva);
    border-left: 1px solid var(--pi-viiva);
    border-radius: 16px;
    box-shadow: var(--pi-varjo-l);
    transform: translateX(calc(100% + 20px));
  }
  .piir.piir-valinta-auki .piir-runko > .piir-paneeli { transform: none; }
  .piir-runko > .piir-paneeli .piir-paneeli-kahva { border-radius: 15px 15px 0 0; }
}
#piirOsanNimi { display: flex; align-items: center; gap: 10px; }
.piir-osa-kuva {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 38px;
  border-radius: 9px;
  background: #eef2f6;
}
.piir-osa-kuva svg { display: block; width: auto; height: auto; max-width: 40px; max-height: 32px; }
html[data-teema="tumma"] .piir-osa-kuva { background: #e9edf1; }
.piir-paneeli label.piir-numerokentta { position: relative; }
.piir-paneeli label.piir-numerokentta > .arvo { display: none; }
.piir-arvo-rivi { position: absolute; right: 0; top: -6px; display: inline-flex; align-items: center; gap: 4px; }
.piir-arvo-kentta {
  width: 54px;
  min-height: 24px;
  padding: 0 6px;
  border: 1px solid var(--pi-viiva-2, #c9d3dc);
  border-radius: 6px;
  background: #fff;
  color: var(--muste);
  font: inherit;
  font-family: var(--pi-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-align: right;
  -moz-appearance: textfield;
  appearance: textfield;
}
.piir-arvo-kentta::-webkit-outer-spin-button,
.piir-arvo-kentta::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.piir-arvo-kentta:focus { outline: none; border-color: var(--brandi); box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.14); }
.piir-arvo-yksikko { min-width: 14px; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--pi-himmea); }
html[data-teema="tumma"] .piir-arvo-kentta { background: #0f1518; color: var(--pi-teksti); border-color: var(--pi-viiva-2); }

/* 15. Zoomausvalikko prosenttinapin alla. */
.piir-zoom { position: relative; }
.piir-zoom-valikko {
  position: absolute;
  z-index: 45;
  min-width: 176px;
  padding: 6px;
  border: 1px solid var(--pi-viiva);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--pi-varjo-l);
}
.piir-zoom-valikko[hidden] { display: none; }
.piir-zoom-valikko button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muste);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.piir-zoom-valikko button:hover { background: #eef2f6; box-shadow: none; }
.piir-zoom-valikko button kbd { font-family: var(--pi-mono); font-size: 11px; font-weight: 500; color: var(--pi-himmea); }
.piir-zoom-erotin { height: 1px; margin: 4px 2px; background: var(--pi-viiva); }
html[data-teema="tumma"] .piir-zoom-valikko { background: #1c2529; border-color: var(--pi-viiva-2); }
html[data-teema="tumma"] .piir-zoom-valikko button { background: transparent; color: var(--pi-teksti); }
html[data-teema="tumma"] .piir-zoom-valikko button:hover { background: #2c383e; }

/* 16. Siirtymät: piirustus häivyttyy esiin, valikot avautuvat lyhyellä
   liu'ulla, kirjasto nousee palattaessa. */
@keyframes piir-valikko-tulo { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes piir-ikkuna-tulo { from { opacity: 0; } to { opacity: 1; } }
@keyframes piir-sisus-tulo { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.piir-valikko[open] > .piir-valikko-sisus,
div.piir-valikko:not([hidden]),
.piir-zoom-valikko:not([hidden]) { animation: piir-valikko-tulo 0.14s ease-out; }
.piir-tausta:not([hidden]) { animation: piir-ikkuna-tulo 0.18s ease-out; }
.piir-tausta:not([hidden]) > .piir { animation: piir-sisus-tulo 0.22s ease-out; }
.kirjasto.piir-palaa { animation: piir-sisus-tulo 0.22s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .piir-valikko[open] > .piir-valikko-sisus, div.piir-valikko:not([hidden]), .piir-zoom-valikko:not([hidden]),
  .piir-tausta:not([hidden]), .piir-tausta:not([hidden]) > .piir, .kirjasto.piir-palaa,
  .piir-tallennusmerkki.kesken, .piir-tallennusmerkki.sykahdys { animation: none; }
}

/* 17. Tilarivi: Valintatila-merkki on neutraali; oranssi kerma vasta kun
   jokin piirtotila on päällä. Selaintallennuksen teksti himmeämpi. */
.piir-tilarivi .piir-tilarivi-tila { background: #eef2f6; color: var(--muste); }
.piir-tilarivi .piir-tilarivi-tila.piir-tilarivi-tila-paalla { background: var(--pi-valinta); color: var(--pi-valinta-teksti); }
html[data-teema="tumma"] .piir-tilarivi .piir-tilarivi-tila { background: #2c383e; color: var(--pi-teksti); }
html[data-teema="tumma"] .piir-tilarivi .piir-tilarivi-tila.piir-tilarivi-tila-paalla { background: var(--pi-valinta); color: var(--pi-valinta-teksti); }
.piir-tallennus.ei-tiedostoa { color: var(--pi-haalea, #8d9ba7); font-weight: 500; }

/* ===== Vaihe 236: premium-kierros, osa 2 — arkki ja piirtäminen =====
   Arkille syvyys, ruudukko elää zoomin mukaan, piirustusfontti Barlow
   (symbols.js PIIR_FONTTI, vienti upottaa fontin), apuviivat omalla
   värillä ja etäisyysvihjeellä, putken pituusvihje, valinta pyöreillä
   kahvoilla ja työkalukohtaiset osoittimet. Toiminnot: js/viimeistely.js. */

/* 5. Arkille syvyys: työtila sävytetty, arkki ohuella reunalla ja pehmeällä varjolla. */
.piir-kanvas-kaari { background: #e4e9ee; }
.piir-kanvas {
  border: 1px solid #c7d0d9;
  box-shadow: 0 1px 2px rgba(23, 29, 31, 0.08), 0 14px 36px rgba(23, 29, 31, 0.16);
}

/* 6. Ruudukko elää zoomin mukaan: kaukaa harvempi (40/80 px), läheltä
   pääviivat 100 px:n välein pisteiden lisäksi (js/viimeistely.js
   piirRuudukkoPaivita asettaa --piir-ruutu ja luokat). */
.piir-kanvas { background-size: var(--piir-ruutu, 20px) var(--piir-ruutu, 20px); }
.piir-kanvas.ruudukko-kauko { background-image: radial-gradient(#d3dbe3 1.2px, transparent 1.2px); }
.piir-kanvas.ruudukko-lahi {
  background-image:
    linear-gradient(to right, rgba(23, 29, 31, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23, 29, 31, 0.07) 1px, transparent 1px),
    radial-gradient(#dfe6ee 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, var(--piir-ruutu, 20px) var(--piir-ruutu, 20px);
}
.piir-kanvas.alusta-tumma.ruudukko-kauko { background-image: radial-gradient(#3c4a50 1.2px, transparent 1.2px); }
.piir-kanvas.alusta-tumma.ruudukko-lahi {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    radial-gradient(#3c4a50 1px, transparent 1px);
}
.piir-kanvas.ei-ruudukkoa.ruudukko-kauko,
.piir-kanvas.ei-ruudukkoa.ruudukko-lahi,
.piir-kanvas.alusta-tumma.ei-ruudukkoa.ruudukko-kauko,
.piir-kanvas.alusta-tumma.ei-ruudukkoa.ruudukko-lahi { background-image: none; }

/* 8. Apuviivat: oma väri erilleen valinnan oranssista, etäisyysvihje
   tarttuneella linjalla, tartuntapallot hillitymmiksi. Vihje pysyy
   luettavana zoomista riippumatta (--piir-zoom pidolla). */
.piir-ohjeviiva { background: #0aa8d6; }
.piir-ohjeviiva-teksti {
  position: absolute;
  transform: translate(-50%, -50%) scale(calc(1 / var(--piir-zoom, 1)));
  padding: 1px 7px;
  border-radius: 999px;
  background: #0aa8d6;
  color: #fff;
  font: 600 10.5px/1.5 var(--pi-mono);
  white-space: nowrap;
  pointer-events: none;
}
.piir-ohjeviiva-teksti[hidden] { display: none; }
.piir-ohjeviiva-vaaka .piir-ohjeviiva-teksti { top: 0; }
.piir-ohjeviiva-pysty .piir-ohjeviiva-teksti { left: 0; }
.piir-ankkuri { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border: 0; background: rgba(10, 168, 214, 0.7); box-shadow: none; }

/* 9. Putken pituusvihje osoittimen vieressä (kiinteä sijainti: ei skaalaudu). */
.piir-mittavihje {
  position: fixed;
  z-index: 95;
  padding: 3px 8px;
  border-radius: 7px;
  background: rgba(23, 29, 31, 0.88);
  color: #fff;
  font: 600 11.5px/1.3 var(--pi-mono);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--pi-varjo-m);
}
.piir-mittavihje[hidden] { display: none; }

/* 10. Valinta: yhtenäinen ohut kehys, pyöreät kahvat, himmeä hehku;
   kohdeportti sykkii, kun putki lähestyy; hover-halo pehmeämpi. */
.piir-kanvas-pito > .piir-valinta {
  border: 1.5px solid var(--brandi);
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.12);
}
.piir-valinta-kahva {
  width: 10px;
  height: 10px;
  border: 2px solid var(--brandi);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(23, 29, 31, 0.3);
}
.piir-valinta-apu { border: 1.5px solid rgba(255, 90, 0, 0.75); border-radius: 4px; box-shadow: 0 0 0 2px rgba(255, 90, 0, 0.1); }
.piir-valintalaatikko { border: 1px solid rgba(255, 90, 0, 0.7); background: rgba(255, 90, 0, 0.06); }
.piir-kanvas svg g[data-i]:hover,
.piir-kanvas svg g[data-li]:hover { filter: drop-shadow(0 0 5px rgba(255, 90, 0, 0.35)); }
.piir-portti-veto { transition: transform 0.12s, box-shadow 0.12s; }
.piir-portti-kohde { animation: piir-portti-syke 0.9s ease-out infinite; }
@keyframes piir-portti-syke {
  0% { box-shadow: 0 0 0 4px rgba(255, 90, 0, 0.35); }
  100% { box-shadow: 0 0 0 12px rgba(255, 90, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .piir-portti-kohde { animation: none; }
}

/* 11. Työkalukohtaiset osoittimet: tähtäin ja pieni oranssi tunnus
   oikeassa alakulmassa (putki, sakset, merkintä, kynä, yhde). */
.piir-kanvas-pito.tila-piirto .piir-kanvas,
.piir-kanvas-pito.tila-piirto .piir-kanvas svg g { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><g fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'><path d='M12 1.5v6.5M12 16v6.5M1.5 12H8M16 12h6.5'/></g><g fill='none' stroke='%23171d1f' stroke-width='1.5' stroke-linecap='round'><path d='M12 1.5v6.5M12 16v6.5M1.5 12H8M16 12h6.5'/></g><circle cx='12' cy='12' r='1.3' fill='%23171d1f'/><g fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M18 26.5v-6.5h8.5'/></g><g fill='none' stroke='%23ff5a00' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M18 26.5v-6.5h8.5'/></g></svg>") 12 12, crosshair; }
.piir-kanvas-pito.tila-sakset .piir-kanvas,
.piir-kanvas-pito.tila-sakset .piir-kanvas svg g,
.piir-kanvas-pito.tila-sakset .piir-kanvas svg g[data-lj] { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><g fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'><path d='M12 1.5v6.5M12 16v6.5M1.5 12H8M16 12h6.5'/></g><g fill='none' stroke='%23171d1f' stroke-width='1.5' stroke-linecap='round'><path d='M12 1.5v6.5M12 16v6.5M1.5 12H8M16 12h6.5'/></g><circle cx='12' cy='12' r='1.3' fill='%23171d1f'/><g fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><circle cx='19' cy='19.5' r='1.7'/><circle cx='19' cy='25' r='1.7'/><path d='M20.5 20.6l6.5 4.9M20.5 23.9l6.5-4.9'/></g><g fill='none' stroke='%23ff5a00' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='19' cy='19.5' r='1.7'/><circle cx='19' cy='25' r='1.7'/><path d='M20.5 20.6l6.5 4.9M20.5 23.9l6.5-4.9'/></g></svg>") 12 12, crosshair; }
.piir-kanvas-pito.tila-merkinta .piir-kanvas,
.piir-kanvas-pito.tila-merkinta .piir-kanvas svg g,
.piir-kanvas-pito.tila-merkinta .piir-kanvas svg g[data-lj] { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><g fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'><path d='M12 1.5v6.5M12 16v6.5M1.5 12H8M16 12h6.5'/></g><g fill='none' stroke='%23171d1f' stroke-width='1.5' stroke-linecap='round'><path d='M12 1.5v6.5M12 16v6.5M1.5 12H8M16 12h6.5'/></g><circle cx='12' cy='12' r='1.3' fill='%23171d1f'/><g fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><circle cx='22' cy='20' r='3.2'/><path d='M22 23.2v4M19.8 27.2h4.4'/></g><g fill='none' stroke='%23ff5a00' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='22' cy='20' r='3.2'/><path d='M22 23.2v4M19.8 27.2h4.4'/></g></svg>") 12 12, crosshair; }
.piir-kanvas-pito.tila-kyna .piir-kanvas,
.piir-kanvas-pito.tila-kyna .piir-kanvas svg g { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><g fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'><path d='M12 1.5v6.5M12 16v6.5M1.5 12H8M16 12h6.5'/></g><g fill='none' stroke='%23171d1f' stroke-width='1.5' stroke-linecap='round'><path d='M12 1.5v6.5M12 16v6.5M1.5 12H8M16 12h6.5'/></g><circle cx='12' cy='12' r='1.3' fill='%23171d1f'/><g fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M18 27.2l1.2-3.9 5.7-5.7 2.7 2.7-5.7 5.7z'/><path d='M24.9 17.6l2.7 2.7'/></g><g fill='none' stroke='%23ff5a00' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M18 27.2l1.2-3.9 5.7-5.7 2.7 2.7-5.7 5.7z'/><path d='M24.9 17.6l2.7 2.7'/></g></svg>") 12 12, crosshair; }
.piir-kanvas-pito.tila-yhde .piir-kanvas,
.piir-kanvas-pito.tila-yhde .piir-kanvas svg g { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><g fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'><path d='M12 1.5v6.5M12 16v6.5M1.5 12H8M16 12h6.5'/></g><g fill='none' stroke='%23171d1f' stroke-width='1.5' stroke-linecap='round'><path d='M12 1.5v6.5M12 16v6.5M1.5 12H8M16 12h6.5'/></g><circle cx='12' cy='12' r='1.3' fill='%23171d1f'/><g fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><circle cx='22' cy='22' r='4.3'/><path d='M22 19.5v5M19.5 22h5'/></g><g fill='none' stroke='%23ff5a00' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='22' cy='22' r='4.3'/><path d='M22 19.5v5M19.5 22h5'/></g></svg>") 12 12, crosshair; }

/* ===== Vaihe 237: premium-kierros, osa 3 — teemat ja puhelin =====
   Tumman teeman arkki lämpimän harmaaksi, näyttötilan hehku, porrastetut
   merkit ja kulmalaatikko, puhelimen työkalurivi yhdelle riville.
   Toiminnot: js/viimeistely.js (puhelin), js/nayttotila.js (kulmalaatikko),
   js/valvomo.js (merkkien porrastus). */

/* 12. Tumma teema: arkki lämpimän harmaa, ei kirkkaan valkoinen; ruudukko sen mukaan. */
html[data-teema="tumma"] .piir-kanvas:not(.alusta-tumma) {
  background-color: #e6e9ec;
  border-color: #aab5bf;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 36px rgba(0, 0, 0, 0.5);
}
html[data-teema="tumma"] .piir-kanvas:not(.alusta-tumma):not(.ei-ruudukkoa) { background-image: radial-gradient(#c3ccd4 1px, transparent 1px); }
html[data-teema="tumma"] .piir-kanvas.ruudukko-kauko:not(.alusta-tumma):not(.ei-ruudukkoa) { background-image: radial-gradient(#bcc6ce 1.2px, transparent 1.2px); }
html[data-teema="tumma"] .piir-kanvas.ruudukko-lahi:not(.alusta-tumma):not(.ei-ruudukkoa) {
  background-image:
    linear-gradient(to right, rgba(23, 29, 31, 0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23, 29, 31, 0.09) 1px, transparent 1px),
    radial-gradient(#c3ccd4 1px, transparent 1px);
}

/* 13. Näyttötila: virtaava aine hehkuu, merkit tulevat esiin porrastettuna,
   kulmassa prosessin nimi, kello ja SIMULAATIO. */
body.piir-nayttotila .piir-kanvas svg .piir-virta-annos { filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.35)); }
.piir-valvomo-merkki:not(.piir-valvomo-halytys) { animation: piir-merkki-tulo 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.15) calc(var(--i, 0) * 70ms) backwards; }
@keyframes piir-merkki-tulo {
  from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.85); }
  to { opacity: 1; transform: translateX(-50%); }
}
.piir-naytto-tiedot {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 121;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border: 1px solid #27363d;
  border-radius: 12px;
  background: rgba(16, 26, 31, 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #eef2ef;
  font-size: 13px;
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.piir-naytto-tiedot-nimi { font-weight: 800; }
.piir-naytto-tiedot-kello { font-family: var(--pi-mono); font-size: 13px; color: #b9c6cc; letter-spacing: 0.04em; }
.piir-naytto-tiedot-merkki {
  padding: 2px 8px;
  border: 1px solid rgba(255, 90, 0, 0.7);
  border-radius: 999px;
  color: #ffb280;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
}
@media (prefers-reduced-motion: reduce) {
  .piir-valvomo-merkki:not(.piir-valvomo-halytys) { animation: none; }
  body.piir-nayttotila .piir-kanvas svg .piir-virta-annos { filter: none; }
}

/* 14. Puhelin: harvemmin tarvitut napit Muut-valikossa (js/viimeistely.js
   siirtää ne), valikot kuvakkeina, zoom pois (nipistys ja tilarivi), rivi
   ei taitu. Valikon sisällä napit näkyvät nimineen. */
@media (max-width: 640px) {
  .piir-tyokalurivi { flex-wrap: nowrap; gap: 3px; padding: 6px 8px; }
  .piir-tyokalurivi .piir-zoom { display: none; }
  .piir-tyokalurivi .piir-valikko > summary { padding: 6px 7px; }
  .piir-tyokalurivi .piir-valikko > summary > span { display: none; }
  .piir-tyokalurivi .piir-valikko > summary::after { content: '▾'; margin-left: 3px; font-size: 10px; }
  .piir-tyokalurivi .piir-muut-valikko .piir-valikko-sisus { min-width: 232px; }
  .piir-tyokalurivi .piir-muut-valikko .piir-nappiryhma { display: flex; align-items: center; gap: 6px; }
  .piir-tyokalurivi .piir-muut-valikko .piir-merkinta-otsikko,
  .piir-tyokalurivi .piir-muut-valikko .piir-merkintavalinta,
  .piir-tyokalurivi .piir-muut-valikko #piirTummaNappi,
  .piir-tyokalurivi .piir-muut-valikko #piirKehysNappi { display: inline-flex; }
  .piir-tyokalurivi .piir-muut-valikko .piir-merkintavalinta { flex: 1; max-width: none; }
  .piir-tyokalurivi .piir-muut-valikko .piir-ohje-nappi { justify-content: flex-start; gap: 8px; min-height: 36px; }
  .piir-tyokalurivi .piir-muut-valikko .piir-ohje-nappi .nappiteksti { display: inline; }
  .piir-naytto-tiedot { left: 8px; bottom: 8px; gap: 8px; padding: 6px 10px; font-size: 12px; }
}

/* ===== Vaihe 238: dialogit mahtuvat aina ruutuun =====
   Markuksen kuva 26.9.2026: Kerrokset-ikkuna jatkui ruudun alapuolelle,
   jolloin listan loppu ja alarivin napit jäivät piiloon eikä kaikkia
   putkia voinut kopioida. Ikkunalla ei ollut enimmäiskorkeutta, ja pitkä
   selitys vei tilan. Nyt .piir-haku-dialogit ovat pystysuuntaisia
   flex-laatikoita, joiden lista joustaa, Kerrokset-selitys on avattava,
   ja pitkien .piir-nappaimet-dialogien otsikko sekä säiliösuunnittelijan
   napit pysyvät näkyvissä vieritettäessä. */
.piir-haku-tausta { padding: 7vh 12px 3vh; }
@media (max-height: 720px) {
  .piir-haku-tausta { padding-top: 2vh; }
}
.piir-haku { display: flex; flex-direction: column; max-height: 100%; }
.piir-haku > * { flex: none; }
.piir-haku > .piir-haku-lista,
.piir-haku > .piir-vaihto-lista,
.piir-haku > .piir-kerros-lista { flex: 1 1 auto; min-height: 0; }
.piir-kerros-lista { max-height: none; min-height: 96px; }
.piir-kerros-lisatieto { border-bottom: 1px solid var(--viiva); background: #f7f9fc; }
.piir-kerros-lisatieto > summary {
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pi-himmea, #5c6f7d);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.piir-kerros-lisatieto > summary::-webkit-details-marker { display: none; }
.piir-kerros-lisatieto > summary::before { content: '▸'; display: inline-block; width: 12px; }
.piir-kerros-lisatieto[open] > summary::before { content: '▾'; }
.piir-kerros-lisatieto > summary:hover { color: var(--muste); }
.piir-kerros-lisatieto .piir-kerros-ohje { padding-top: 0; }
.piir-kerros-lisatieto .piir-kerros-ohje:last-child { border-bottom: 0; }
.piir-kerros-lisatieto[open] { max-height: 38vh; overflow: auto; }
html[data-teema="tumma"] .piir-kerros-lisatieto { background: #1c2529; border-color: var(--pi-viiva-2); }
html[data-teema="tumma"] .piir-kerros-lisatieto > summary { color: var(--pi-himmea); }
html[data-teema="tumma"] .piir-kerros-lisatieto > summary:hover { color: var(--pi-teksti); }
/* Pitkät dialogit (pikanäppäimet, versiot, PDF, PNG): otsikko ja ✕ pysyvät
   ylhäällä, kun sisältö vierittyy. */
.piir-nappaimet { max-height: calc(100vh - 40px); }
.piir-nappaimet-ylapaa {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: -18px -22px 12px;
  padding: 14px 22px 10px;
  background: #fff;
  border-bottom: 1px solid var(--pi-viiva, #dbe2e9);
}
html[data-teema="tumma"] .piir-nappaimet-ylapaa { background: #1c2529; border-color: var(--pi-viiva); }
/* Säiliösuunnittelijan napit näkyvät vierittämättä. */
.piir-paja:not(.lp) .piir-paja-napit {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 16px -20px -18px;
  padding: 12px 20px 18px;
  background: #fff;
  border-top: 1px solid var(--pi-viiva, #dbe2e9);
}
html[data-teema="tumma"] .piir-paja:not(.lp) .piir-paja-napit { background: #1c2529; border-color: var(--pi-viiva); }

/* ===== Vaihe 239: simulaatio 2.0 =====
   Neste piirretään omaan SVG-kerrokseensa (js/valvomo.js): tyhjä putki on
   tumma, täysi aineen värinen ja kiiltävä, virtaavassa kulkevat kirkkaat
   annokset ja nuolikärjet hehkun päällä. Ei CSS-suotimia: kerros päivittyy
   joka ruudulla, ja drop-shadow olisi raskas puhelimella. */
.piir-sim-kerros { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.piir-sim-kerros path, .piir-sim-kerros line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.piir-sim-kerros .sim-tyhja { stroke: rgba(6, 11, 13, 0.62); }
.piir-sim-kerros .sim-ydin { opacity: 0.94; }
.piir-sim-kerros .sim-kiilto { stroke: rgba(255, 255, 255, 0.32); }
.piir-sim-kerros .sim-hehku { opacity: 0.2; }
.piir-sim-kerros .sim-virta { opacity: 0.95; }
.piir-sim-kerros .sim-nuoli { fill: rgba(255, 255, 255, 0.95); stroke: rgba(0, 0, 0, 0.45); stroke-width: 0.8; stroke-linejoin: round; }
.piir-sim-kerros .sim-neste { opacity: 0.8; }
.piir-sim-kerros .sim-pinta { stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.6; }
.piir-sim-kerros .sim-suihku { stroke-width: 3.2; stroke-dasharray: 6 4; opacity: 0.9; }
.piir-sim-kerros .sim-pyora { animation: piir-sim-pyori 1s linear infinite; transform-origin: 0 0; }
.piir-sim-kerros .sim-pyora circle { fill: none; stroke: rgba(255, 255, 255, 0.45); stroke-width: 1.2; stroke-dasharray: 3 3; }
.piir-sim-kerros .sim-pyora path { stroke: rgba(255, 255, 255, 0.9); stroke-width: 2; }
.piir-sim-kerros.sim-pysahtynyt .sim-pyora { animation-play-state: paused; }
@keyframes piir-sim-pyori { to { transform: rotate(360deg); } }

/* Merkit pysyvät luettavina, vaikka kaavio sovitetaan pieneksi: kerroin
   --merkki-k kumoaa näytön mittakaavan (1…2,2). */
.piir-valvomo-merkki { transform-origin: 0 0; scale: var(--merkki-k, 1); font-variant-numeric: tabular-nums; }

/* Palkki: tauko ja ajan nopeus yhtenä segmenttinä, kello, ⋯-valikko. */
.piir-sim-ohjaus { display: inline-flex; align-items: center; gap: 8px; }
.piir-sim-kertoimet { display: inline-flex; border: 1px solid #44575f; border-radius: 7px; overflow: hidden; }
.piir-naytto-palkki .piir-sim-kertoimet button { min-height: 30px; padding: 0 10px; border: 0; border-left: 1px solid #2c3b41; border-radius: 0; }
.piir-naytto-palkki .piir-sim-kertoimet button:first-child { border-left: 0; min-width: 34px; }
.piir-naytto-palkki .piir-sim-kertoimet button[aria-pressed="true"] { background: var(--brandi); color: #fff; }
.piir-sim-kello { min-width: 52px; color: #b9c6cc; font: 700 13px/1 var(--pi-mono, Consolas, monospace); font-variant-numeric: tabular-nums; }
.piir-sim-valikko-pito { position: relative; display: inline-flex; }
.piir-naytto-palkki #piirSimLisaa { min-width: 38px; padding: 0 8px; font-size: 16px; letter-spacing: 0.05em; }
.piir-sim-valikko {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 125;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 260px;
  padding: 6px;
  border: 1px solid #33444b;
  border-radius: 10px;
  background: #121c20;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.piir-sim-valikko[hidden] { display: none; }
.piir-naytto-palkki .piir-sim-valikko button { min-height: 34px; border: 0; text-align: left; font-weight: 700; }
.piir-naytto-palkki .piir-sim-valikko button:hover,
.piir-sim-valinta:hover { background: rgba(255, 255, 255, 0.06); }
.piir-sim-valinta { display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 0 12px; border-radius: 6px; color: #dce6e4; font-size: 13px; font-weight: 700; cursor: pointer; }
.piir-sim-valinta input { width: 16px; height: 16px; margin: 0; accent-color: var(--brandi); }
.piir-naytto-palkki .piir-naytto-halytykset { min-height: 28px; padding: 0 10px; border: 1px solid rgba(208, 2, 27, 0.8); border-radius: 999px; background: rgba(208, 2, 27, 0.16); color: #ffb3b3; font-size: 12.5px; }
.piir-naytto-tiedot-kerroin { color: #ffb280; font: 700 12px/1 var(--pi-mono, Consolas, monospace); }
.piir-naytto-tiedot-kerroin:empty { display: none; }

/* Opastusrivi: kolme askelta, nykyinen korostettuna. */
.piir-sim-opastus {
  position: fixed;
  top: 56px;
  left: 50%;
  z-index: 119;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 24px);
  padding: 7px 8px 7px 14px;
  border: 1px solid #2f4750;
  border-radius: 12px;
  background: rgba(16, 26, 31, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #cfdad8;
  font-size: 12.5px;
  transform: translateX(-50%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.piir-sim-opastus span { display: inline-flex; align-items: center; gap: 7px; opacity: 0.6; }
.piir-sim-opastus span.nyt { opacity: 1; color: #fff; font-weight: 700; }
.piir-sim-opastus span.tehty { opacity: 0.45; }
.piir-sim-opastus b { display: inline-grid; flex: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #2c3b41; font-size: 11px; }
.piir-sim-opastus span.nyt b { background: var(--brandi); }
.piir-sim-opastus span.tehty b { background: #2f9e6e; }

/* Säätöikkunat: leveämpi, vierittyvä, otsikko pysyy. */
.piir-naytto-ikkuna.piir-sim-ikkuna { width: min(296px, calc(100vw - 20px)); max-height: calc(100vh - 70px); overflow-y: auto; overscroll-behavior: contain; }
.piir-sim-ikkuna .piir-naytto-kahva { position: sticky; top: 0; z-index: 1; }
.piir-sim-ikkuna .sim-lukemat { display: grid; gap: 4px; }
.piir-sim-ikkuna .sim-lukema { display: flex; justify-content: space-between; gap: 10px; color: #9fb0ab; font-size: 12.5px; }
.piir-sim-ikkuna .sim-lukema output { color: #eef2ef; font: 700 12.5px/1.3 var(--pi-mono, Consolas, monospace); font-variant-numeric: tabular-nums; text-align: right; }
.piir-sim-ikkuna .sim-syy { margin: 0 0 2px; color: #ffd27a; font-size: 12px; line-height: 1.4; }
.piir-sim-ikkuna .sim-syy:empty { display: none; }
.piir-sim-ikkuna .sim-rivi { display: flex; align-items: center; gap: 6px; }
.piir-sim-ikkuna .sim-rivi input[type="text"] { flex: 1; min-width: 0; text-align: right; font-family: var(--pi-mono, Consolas, monospace); font-weight: 700; }
.piir-sim-ikkuna .sim-yksikko { min-width: 30px; color: #9fb0ab; font-size: 12px; }
.piir-sim-ikkuna .sim-askel,
.piir-sim-ikkuna .sim-segmentti button,
.piir-sim-ikkuna .sim-napit button,
.piir-sim-ikkuna .sim-pikat button,
.piir-sim-ikkuna .sim-toinen {
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid #52646a;
  border-radius: 6px;
  background: #1a2427;
  color: #eef2ef;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}
.piir-sim-ikkuna .sim-askel { width: 34px; padding: 0; font-size: 17px; }
.piir-sim-ikkuna button:hover { border-color: #7d9199; }
.piir-sim-ikkuna .sim-segmentti { display: inline-flex; flex: none; border: 1px solid #52646a; border-radius: 6px; overflow: hidden; }
.piir-sim-ikkuna .sim-segmentti button { min-width: 34px; border: 0; border-radius: 0; }
.piir-sim-ikkuna .sim-segmentti button[aria-pressed="true"] { background: var(--brandi); color: #fff; }
.piir-sim-ikkuna .sim-napit { display: flex; gap: 6px; margin-top: 8px; }
.piir-sim-ikkuna .sim-napit button { flex: 1; }
.piir-sim-ikkuna .sim-napit.piir-naytto-lohko { margin-top: 0; }
.piir-sim-ikkuna .sim-napit .piir-valvomo-toiminto { min-height: 40px; font-size: 14px; }
.piir-sim-ikkuna .sim-napit .piir-valvomo-toiminto.on { border-color: #2f9e6e; background: rgba(47, 158, 110, 0.22); }
.piir-sim-ikkuna .sim-paa { border-color: #2f9e6e; background: rgba(47, 158, 110, 0.22); }
.piir-sim-ikkuna .sim-pikat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.piir-sim-ikkuna .sim-pikat button { padding: 0 2px; font-size: 11.5px; }
.piir-sim-ikkuna .sim-toinen { width: 100%; }
.piir-sim-ikkuna .sim-vihje { display: block; margin-top: 5px; color: #8a9aa6; font-size: 11.5px; line-height: 1.4; }
.piir-sim-ikkuna .sim-vihje:empty { display: none; }
.piir-sim-ikkuna .piir-naytto-otsikko { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.piir-sim-ikkuna .piir-naytto-otsikko > output { float: none; margin-left: auto; }
.piir-sim-ikkuna .sim-kentta > span:first-child { display: flex; align-items: center; gap: 6px; }
.piir-sim-ikkuna .sim-tallentuu { margin-left: auto; padding: 1px 6px; border: 1px solid rgba(255, 90, 0, 0.55); border-radius: 999px; color: #ffb280; font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: none; }
.piir-sim-ikkuna .sim-kentta { display: block; margin-top: 8px; }
.piir-sim-ikkuna .sim-kentta > span:first-child { margin-bottom: 4px; color: #9fb0ab; font-size: 12px; font-weight: 700; }
.piir-sim-ikkuna .sim-lisa > summary { color: #9fb0ab; font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; list-style: none; cursor: pointer; user-select: none; }
.piir-sim-ikkuna .sim-lisa > summary::-webkit-details-marker { display: none; }
.piir-sim-ikkuna .sim-lisa > summary::before { content: '▸'; display: inline-block; width: 13px; }
.piir-sim-ikkuna .sim-lisa[open] > summary::before { content: '▾'; }
.piir-sim-ikkuna .sim-lisa .sim-lukemat { margin-top: 8px; }
.piir-sim-ikkuna .sim-lisa p { margin: 8px 0 0; color: #8a9aa6; font-size: 11.5px; line-height: 1.45; }
.piir-sim-ikkuna .sim-sailio-tila { display: flex; align-items: stretch; gap: 12px; }
.piir-sim-ikkuna .sim-mittari { position: relative; flex: none; width: 28px; height: 66px; border: 1.5px solid #6d8087; border-radius: 5px; background: #0a1012; overflow: hidden; }
.piir-sim-ikkuna .sim-mittari-pinta { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: #2f9bd6; transition: height 0.4s ease; }
.piir-sim-ikkuna .sim-sailio-luvut { display: flex; flex-direction: column; justify-content: center; gap: 3px; color: #9fb0ab; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.piir-sim-ikkuna .sim-iso { color: #eef2ef; font: 700 16px/1.2 var(--pi-mono, Consolas, monospace); }
.piir-sim-ikkuna .sim-ennuste { margin: 0; color: #9fd8b8; font-size: 12px; }
.piir-sim-ikkuna .sim-ennuste:empty { display: none; }
.piir-sim-ikkuna .sim-takaisku { display: flex; align-items: flex-start; gap: 10px; color: #b9c6cc; font-size: 12px; line-height: 1.45; }
.piir-sim-ikkuna .sim-suunta { color: #6fd39b; font-size: 28px; line-height: 1; }

/* Trendit: pinnat ja tuotot simulaatioajassa, tapahtumat pystyviivoina. */
.piir-sim-trendi,
.piir-sim-halytyslista {
  position: fixed;
  right: 14px;
  z-index: 122;
  width: min(360px, calc(100vw - 28px));
  max-height: calc(100vh - 80px);
  padding: 0 12px 12px;
  overflow: auto;
  border: 1px solid #33444b;
  border-radius: 12px;
  background: rgba(14, 20, 22, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #eef2ef;
  font-size: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
.piir-sim-trendi { bottom: 14px; }
.piir-sim-trendi[hidden] { display: none; }
.piir-sim-trendi-paa { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 10px 0 8px; background: #0e1416; }
.piir-sim-trendi-paa b { font-size: 13px; }
.piir-sim-trendi-paa span { flex: 1; color: #8a9aa6; }
.piir-sim-trendi .sim-toinen { min-height: 28px; padding: 0 9px; border: 1px solid #52646a; border-radius: 6px; background: #1a2427; color: #eef2ef; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.piir-sim-kuvaaja-otsikko { margin: 8px 0 4px; color: #9fb0ab; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.piir-sim-kuvaaja-otsikko small { color: #6d8087; font-weight: 600; letter-spacing: 0; text-transform: none; }
.piir-sim-kuvaaja { display: block; width: 100%; height: 96px; border: 1px solid #243238; border-radius: 6px; background: #0a1012; }
#piirSimTuotot { height: 64px; }
.piir-sim-kuvaaja polyline { fill: none; stroke-width: 1.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.piir-sim-raja { stroke: rgba(208, 2, 27, 0.45); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.piir-sim-tapahtuma { stroke: rgba(255, 255, 255, 0.2); vector-effect: non-scaling-stroke; }
.piir-sim-tapahtuma.havainto { stroke: #ffd400; stroke-dasharray: 2 2; }
.piir-sim-selite { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-variant-numeric: tabular-nums; }
.piir-sim-selite span { display: inline-flex; align-items: center; gap: 5px; }
.piir-sim-selite i { width: 12px; height: 3px; border-radius: 2px; }
.piir-sim-loki { margin: 10px 0 0; padding: 0; border-top: 1px solid #243238; list-style: none; }
.piir-sim-loki li { display: flex; gap: 8px; padding: 4px 0; color: #b9c6cc; }
.piir-sim-loki time { min-width: 50px; color: #6d8087; font-family: var(--pi-mono, Consolas, monospace); font-variant-numeric: tabular-nums; }

/* Hälytyslista: syy ja yksi korjausehdotus. */
.piir-sim-halytyslista { top: 56px; z-index: 126; border-color: rgba(208, 2, 27, 0.6); }
.piir-sim-halytyslista ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.piir-sim-halytyslista li { padding: 8px 10px; border-left: 3px solid #d0021b; border-radius: 6px; background: rgba(208, 2, 27, 0.1); line-height: 1.45; }
.piir-sim-halytyslista li b { display: block; margin-bottom: 2px; }
.piir-sim-halytyslista li span { color: #d7c8c8; }
.piir-sim-halytyslista p { margin: 0; color: #9fb0ab; }

@media (max-width: 640px) {
  .piir-sim-kello { min-width: 0; font-size: 12px; }
  .piir-naytto-palkki .piir-sim-kertoimet button { padding: 0 8px; }
  .piir-sim-opastus { top: auto; bottom: 52px; left: 8px; right: 8px; max-width: none; transform: none; gap: 8px; }
  .piir-sim-opastus span:not(.nyt) { display: none; }
  .piir-sim-opastus span.nyt { flex: 1; }
  .piir-sim-halytyslista { top: 100px; right: 8px; width: calc(100vw - 16px); }
  .piir-sim-trendi { right: 8px; bottom: 8px; width: calc(100vw - 16px); max-height: 55vh; }
  .piir-sim-valikko { position: fixed; top: auto; bottom: 8px; left: 8px; right: 8px; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .piir-sim-kerros .sim-pyora { animation: none; }
  .piir-sim-ikkuna .sim-mittari-pinta { transition: none; }
}

/* Vaihe 239, katselmoinnin korjaukset. Palkki rivittyy aina tarvittaessa
   (vaakasuuntainen puhelin 641–900 px työnsi ⋯- ja Poistu-napit ulos),
   ja sen todellinen korkeus on muuttujassa --naytto-palkki (nayttotila.js),
   jonka alta kaavio, hälytyslista, opastus ja ilmoitukset alkavat. */
.piir-naytto-palkki { height: auto; min-height: 46px; flex-wrap: wrap; row-gap: 6px; padding-top: 6px; padding-bottom: 6px; }
.piir-naytto-vihje { flex: 1 1 120px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.piir-naytto-palkki > .piir-sim-ohjaus { margin-left: auto; }
.piir-naytto-palkki .piir-naytto-pois { flex: none; }
.piir-naytto-palkki.valikko-auki { z-index: 135; }
body.piir-nayttotila .piir-runko { padding-top: var(--naytto-palkki, 46px); }
.piir-sim-halytyslista { top: calc(var(--naytto-palkki, 46px) + 10px); }
.piir-sim-opastus { top: calc(var(--naytto-palkki, 46px) + 10px); left: 12px; right: 12px; width: fit-content; margin-inline: auto; transform: none; }
body.piir-nayttotila .ilmo { z-index: 135; }
@media (max-width: 1100px) {
  .piir-naytto-vihje { display: none; }
}
@media (max-width: 900px), (max-height: 500px) and (pointer: coarse) {
  .piir-naytto-palkki { gap: 6px; padding: 6px 8px; }
  .piir-naytto-palkki button { min-height: 30px; padding: 0 9px; font-size: 12px; }
}
@media (max-width: 640px) {
  body.piir-nayttotila .piir-runko { padding-top: var(--naytto-palkki, 92px); }
  .piir-sim-halytyslista { top: calc(var(--naytto-palkki, 92px) + 8px); }
  body.piir-nayttotila .ilmo { top: calc(var(--naytto-palkki, 92px) + 8px); bottom: auto; }
}
@media (max-width: 640px), (max-height: 500px) {
  .piir-sim-opastus { top: auto; bottom: 52px; left: 8px; right: 8px; width: auto; gap: 8px; }
  .piir-sim-opastus span:not(.nyt) { display: none; }
  .piir-sim-opastus span.nyt { flex: 1; }
}
/* Hälytyskehys vilkkuu 5 s ja jää sitten palamaan. */
div.piir-valvomo-halytys.piir-valvomo-halytys-pysyva { animation: none; opacity: 1; }
/* Kohdistusrengas näkyy segmenttinapeissa (overflow leikkasi sen). */
.piir-sim-kertoimet button:focus-visible,
.piir-sim-ikkuna .sim-segmentti button:focus-visible { outline: 2px solid var(--brandi); outline-offset: -3px; }
.piir-sim-kertoimet button[aria-pressed="true"]:focus-visible,
.piir-sim-ikkuna .sim-segmentti button[aria-pressed="true"]:focus-visible { outline-color: #fff; }
/* Kontrasti: tumma teksti oranssilla (valkoinen jäi 3,1:1). */
.piir-naytto-palkki .piir-sim-kertoimet button[aria-pressed="true"],
.piir-sim-ikkuna .sim-segmentti button[aria-pressed="true"],
.piir-sim-opastus span.nyt b { color: #171d1f; }
.piir-sim-opastus span.tehty { opacity: 0.6; }
.piir-sim-ikkuna .sim-ennuste.varoitus { color: #ffd27a; }

/* ===== Vaihe 240: linjojen tilavuus, kilot ja tiheys =====
   Linjan ikkuna: tilavuus (kg, l tai % säiliöstä), täyttöpalkki ja
   täyttöaste; säiliön lisäasetuksissa tiheys; trendeissä tase. */
.piir-sim-ikkuna .sim-linjamittari { position: relative; height: 12px; margin: 2px 0 8px; border: 1.5px solid #6d8087; border-radius: 6px; background: #0a1012; overflow: hidden; }
.piir-sim-ikkuna .sim-linjamittari > div { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #2f9bd6; transition: width 0.3s ease; }
.piir-sim-ikkuna .sim-aseta { flex: none; min-width: 56px; }
.piir-sim-ikkuna .sim-linkki { display: inline-block; margin-top: 6px; padding: 0; border: 0; background: none; color: #9fd8b8; font: inherit; font-size: 12px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.piir-sim-ikkuna .sim-linkki[hidden] { display: none; }
.piir-sim-ikkuna .sim-segmentti button[disabled] { opacity: 0.4; cursor: not-allowed; }
.piir-sim-ikkuna #simLinjaKap { display: block; margin-bottom: 2px; }
.piir-sim-tase { margin-top: 8px; padding: 6px 8px; border: 1px solid #243238; border-radius: 6px; color: #b9c6cc; font-variant-numeric: tabular-nums; line-height: 1.45; }
.piir-sim-tase b { color: #eef2ef; }
@media (prefers-reduced-motion: reduce) {
  .piir-sim-ikkuna .sim-linjamittari > div { transition: none; }
}
.piir-sim-ikkuna .sim-aseta { min-height: 32px; padding: 0 10px; border: 1px solid #2f9e6e; border-radius: 6px; background: rgba(47, 158, 110, 0.22); color: #eef2ef; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.piir-sim-opastus span { max-width: 340px; }

/* ===== Vaihe 241: Simulaatio-nappi näkyvällä paikalla =====
   Simulaatio on nyt päätoiminto: vihreä käynnistysnappi yläpalkissa
   Tarkista- ja Vie-nappien vieressä (ennen Näkymä-valikossa). */
.piir-ylapalkki .oikea .piir-sim-nappi { background: #1f7a4d; border-color: #1f7a4d; color: #fff; }
.piir-ylapalkki .oikea .piir-sim-nappi:hover { background: #26915c; border-color: #26915c; color: #fff; }
.piir-ylapalkki .oikea .piir-sim-nappi .pi-ikoni { color: #fff; fill: currentColor; }
.piir-ylapalkki .oikea .piir-sim-nappi:focus-visible { outline: 2px solid #9fd8b8; outline-offset: 2px; }
html[data-teema="tumma"] .piir-ylapalkki .oikea .piir-sim-nappi { background: #2f9e6e; border-color: #2f9e6e; color: #0e1416; }
html[data-teema="tumma"] .piir-ylapalkki .oikea .piir-sim-nappi .pi-ikoni { color: #0e1416; }

/* ===== Vaiheet 242–243: prosessinäytön taustat ja taustakuvageneraattori =====
   Tausta on kaavion SVG:n alin kerros (js/taustakuva.js, js/taustat.js).
   Simulaation palkissa Tausta-nappi vaihtaa tyyliä; Vie → Taustakuva…
   avaa generaattorin: esikatselu, selausnuolet, tyylit ja muunnelmat,
   koko, Laajenna ja PNG-lataus. */
.piir-tk { width: min(880px, calc(100vw - 24px)); }
.piir-tk-ohje { margin: 0 0 10px; color: var(--pi-himmea, #5b6b78); font-size: 13px; line-height: 1.5; }
.piir-tk-esikatselu { display: flex; align-items: center; gap: 8px; }
.piir-tk-kuva { display: flex; flex: 1; align-items: center; justify-content: center; min-width: 0; height: min(44vh, 420px); border: 1px solid var(--pi-viiva, #dbe2e9); border-radius: 8px; background: #0e1416; overflow: hidden; }
.piir-tk-kuva img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.piir-tk-nuoli { flex: none; width: 40px; height: 72px; border: 1px solid var(--pi-viiva-2, #c9d3dc); border-radius: 8px; background: #fff; color: var(--muste, #22303f); font: inherit; font-size: 28px; line-height: 1; cursor: pointer; }
.piir-tk-nuoli:hover { border-color: var(--brandi); color: var(--brandi); }
.piir-tk-nuoli:focus-visible, .piir-tk-valinnat button:focus-visible { outline: 2px solid var(--brandi); outline-offset: 2px; }
.piir-tk-nimi { margin: 10px 0 2px; font-size: 14px; }
.piir-tk-laskuri { margin-left: 6px; color: var(--pi-himmea, #5b6b78); font-size: 12px; font-variant-numeric: tabular-nums; }
.piir-tk-kuvaus { margin: 0 0 8px; color: var(--pi-himmea, #5b6b78); font-size: 12.5px; }
.piir-tk-valinnat { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.piir-tk-valinnat button { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 11px; border: 1px solid var(--pi-viiva-2, #c9d3dc); border-radius: 999px; background: #fff; color: var(--muste, #22303f); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.piir-tk-valinnat button i { width: 14px; height: 14px; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 4px; }
.piir-tk-valinnat button:hover { border-color: var(--brandi); }
.piir-tk-valinnat button[aria-pressed="true"] { border-color: var(--brandi); background: rgba(255, 90, 0, 0.1); font-weight: 800; }
.piir-tk-muunnelmat button { border-radius: 6px; }
.piir-tk-kytkimet { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 6px 0; }
.piir-tk .piir-vienti-valinnat input[type="range"] { width: 100%; accent-color: var(--brandi); }
.piir-tk .piir-vienti-valinnat output { float: right; font-family: var(--pi-mono, Consolas, monospace); font-size: 12px; }
html[data-teema="tumma"] .piir-tk-nuoli,
html[data-teema="tumma"] .piir-tk-valinnat button { background: #222c31; border-color: var(--pi-viiva-2); color: var(--pi-teksti); }
html[data-teema="tumma"] .piir-tk-valinnat button[aria-pressed="true"] { background: rgba(255, 90, 0, 0.18); border-color: var(--brandi); }
/* Vaihe 274: näyttökoot ja lattia. Koko, Laajenna tai Reunus, Tarkkuus
   ja Lattia samalla rivillä; Oma koko omalle rivilleen. Näyttökoon ohje,
   varoitus ja Näyttöpohja-nappi tietorivin alla. */
.piir-tk .piir-vienti-valinnat [hidden], .piir-tk-naytto [hidden] { display: none; }
.piir-tk .piir-tk-koot { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
.piir-tk .piir-tk-koot > label { min-width: 0; }
.piir-tk .piir-tk-koot select { width: 100%; min-width: 0; }
.piir-tk-oma { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.piir-tk-oma input {
  width: 112px; min-height: 34px; padding: 0 8px;
  border: 1px solid var(--pi-viiva-2, #c9d3dc); border-radius: 6px; background: #fff; color: var(--muste, #22303f);
  font: inherit; font-weight: 600; font-variant-numeric: tabular-nums;
}
.piir-tk-oma input:focus-visible { outline: 2px solid var(--brandi); outline-offset: 1px; }
.piir-tk-oma > span { padding-bottom: 8px; color: var(--pi-himmea, #5b6b78); font-size: 13px; font-weight: 700; }
.piir-tk-naytto { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; margin: -4px 0 12px; }
.piir-tk-naytto p { margin: 0; font-size: 12.5px; line-height: 1.45; text-align: center; }
.piir-tk-naytto-ohje { color: var(--pi-himmea, #5b6b78); }
.piir-tk-varoitus { flex-basis: 100%; color: #8a4b08; font-weight: 700; }
.piir-tk-nayttopohja { min-height: 32px; padding: 0 12px; font-size: 12.5px; }
html[data-teema="tumma"] .piir-tk-oma input { background: #1f292e; border-color: var(--pi-viiva-2); color: var(--pi-teksti); }
html[data-teema="tumma"] .piir-tk-varoitus { color: #f0b76a; }
@media (max-width: 900px) {
  .piir-tk .piir-tk-koot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .piir-tk .piir-tk-koot > label:first-child { grid-column: 1 / -1; }
  .piir-tk-oma input { width: 96px; }
}
.piir-naytto-palkki #piirSimTausta { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) {
  .piir-sim-tausta-etu { display: none; }
}
@media (max-width: 640px) {
  .piir-tk-kuva { height: 34vh; }
  .piir-tk-nuoli { width: 32px; height: 56px; }
}

/* Vaihe 243, katselmoinnin korjaukset. Tarttuva otsikko kumoaa dialogin
   18 px:n yläpehmusteen (ei leikkaa johdantoa eikä sisältö näy sen yllä),
   sulkunappi on sormen kokoinen, Tausta-napin nimi näkyy aina, ja matalalla
   tai kapealla ruudulla esikatselu mahtuu näkyviin. */
.piir-nappaimet-ylapaa { top: -18px; }
.piir-tk .piir-nappaimet-ylapaa button { min-width: 40px; min-height: 40px; }
.piir-naytto-palkki .piir-sim-tausta-etu { display: inline; }
@media (max-height: 500px) {
  .piir-tk-kuva { height: 38vh; }
  .piir-tk-ohje { display: none; }
}
@media (max-width: 640px) {
  .piir-tk-kuva { height: auto; aspect-ratio: 16 / 10; }
}

/* ===== Vaihe 244: Simulaatio kirjastosta ja esittelyprosessit =====
   Kirjaston yläpalkissa sama vihreä Simulaatio-nappi kuin kaaviossa.
   Simulaation palkissa prosessin nimi on valikkonappi: esittelyprosessit
   ja oma kaavio (js/esittely.js). */
.ylapalkki .oikea .sim-avaa { background: #1f7a4d; border-color: #1f7a4d; color: #fff; }
.ylapalkki .oikea .sim-avaa:hover { background: #26915c; border-color: #26915c; color: #fff; }
.ylapalkki .oikea .sim-avaa .pi-ikoni { color: #fff; fill: currentColor; }
.ylapalkki .oikea .sim-avaa:focus-visible { outline: 2px solid #9fd8b8; outline-offset: 2px; }
html[data-teema="tumma"] .ylapalkki .oikea .sim-avaa { background: #2f9e6e; border-color: #2f9e6e; color: #0e1416; }
html[data-teema="tumma"] .ylapalkki .oikea .sim-avaa .pi-ikoni { color: #0e1416; }

.piir-sim-prosessi-pito { position: relative; display: inline-flex; min-width: 0; }
.piir-naytto-palkki .piir-naytto-nimi {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(46vw, 360px);
  min-height: 32px;
  padding: 0 10px;
  border-color: #3a4c53;
  background: rgba(255, 255, 255, 0.04);
  color: #eef2ef;
  font-size: 15px;
  font-weight: 800;
}
.piir-naytto-palkki .piir-naytto-nimi[aria-expanded="true"] { border-color: var(--brandi); }
.piir-sim-prosessi-nimi { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Pitkä prosessin nimi ("Pesuliuoksen laimennus") ei rivitä palkkia
   1279 px:llä: nimi lyhenee ellipsiksi (koko nimi napin aria-labelissa). */
@media (max-width: 1439px) {
  .piir-naytto-palkki .piir-naytto-nimi { max-width: min(46vw, 200px); }
  /* Korjaus 271: 1279 px:llä Poistu simulaatiosta rivittyi yhä toiselle
     riville (palkki 46 → 83 px); tiiviimmät välit ja tausta-napin raja. */
  .piir-naytto-palkki { gap: 6px; }
  .piir-naytto-palkki #piirSimTausta { max-width: 170px; }
}
.piir-sim-prosessi-merkki {
  flex: none;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 106, 0, 0.18);
  color: #ffb280;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.piir-sim-prosessi-merkki[hidden] { display: none; }
.piir-sim-prosessi-nuoli { flex: none; color: #93a5ad; font-size: 12px; }
.piir-sim-prosessit {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 125;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: min(380px, calc(100vw - 16px));
  max-height: calc(100vh - var(--naytto-palkki, 46px) - 24px);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid #33444b;
  border-radius: 10px;
  background: #121c20;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.piir-sim-prosessit[hidden] { display: none; }
/* Pitkä lista (esittelyt + prosessipaketit) vierii: rivit eivät saa
   kutistua päällekkäin (Vaihe 258). */
.piir-sim-prosessit > * { flex-shrink: 0; }
.piir-sim-prosessit-otsikko { padding: 6px 10px 2px; color: #93a5ad; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.piir-naytto-palkki .piir-sim-prosessi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  text-align: left;
  white-space: normal;
}
.piir-naytto-palkki .piir-sim-prosessi:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); border-color: transparent; }
.piir-naytto-palkki .piir-sim-prosessi[aria-pressed="true"] { border-color: var(--brandi); background: rgba(255, 90, 0, 0.12); }
.piir-naytto-palkki .piir-sim-prosessi:disabled { opacity: 0.55; cursor: default; }
.piir-sim-prosessi b { color: #eef2ef; font-size: 13.5px; }
.piir-sim-prosessi span { color: #a9b8be; font-size: 12px; font-weight: 500; line-height: 1.4; }
.piir-naytto-palkki.prosessit-auki { z-index: 135; }
@media (max-width: 640px) {
  .piir-naytto-palkki .piir-naytto-nimi { max-width: calc(100vw - 150px); font-size: 14px; }
  .piir-sim-prosessit { position: fixed; top: auto; bottom: 8px; left: 8px; right: 8px; width: auto; max-height: 70vh; }
}
@media (max-width: 900px), (max-height: 500px) and (pointer: coarse) {
  .piir-naytto-palkki .piir-naytto-nimi { min-height: 30px; padding: 0 9px; }
}

/* Vaihe 244, katselmoinnin korjaukset. Kaavion muistutus- ja
   välilehtilaatikot sekä yhde-/putkitilan portit eivät näy simulaation
   päällä (esittelyn aikana niiden napit olisivat toimineet lainatulla
   kaaviolla); ne palaavat, kun simulaatiosta poistutaan. Yläpalkki ei
   vuoda 901–1040 px:n leveydellä: muut napit ovat kuvakkeita, Simulaatio
   pitää tekstinsä. Ilmoitus käyttää leveyttä eikä kutistu kapeaksi
   torniksi puhelimella. */
body.piir-nayttotila .piir-muistutus,
body.piir-nayttotila .piir-portti { display: none !important; }
@media (min-width: 901px) and (max-width: 1040px) {
  .ylapalkki .oikea .tyopoyta-avaa:not(.sim-avaa),
  .ylapalkki .oikea a.ulos { font-size: 0; gap: 0; padding: 7px; line-height: 1; }
  .ylapalkki .oikea .tyopoyta-avaa:not(.sim-avaa) .pi-ikoni,
  .ylapalkki .oikea a.ulos .pi-ikoni { width: 18px; height: 18px; vertical-align: 0; }
}
.ilmo { width: max-content; }

/* ===== Vaihe 247: pumpun liike tyypin mukaan =====
   Monopumpun ja ruuvin onkalot etenevät imusta paineeseen, kalvot
   sykkivät, mäntä iskee, rattaat ja roottorit pyörivät (valvomo.js
   VALVOMO_PUMPPULIIKE). Tauko ja vähempi liike pysäyttävät kaikki. */
.piir-sim-kerros .sim-pyora .sim-rulla { fill: rgba(255, 255, 255, 0.55); stroke: none; }
.piir-sim-kerros .sim-ruuvi { stroke: rgba(64, 170, 230, 0.62); fill: none; stroke-linecap: round; animation: piir-sim-ruuvi 1s linear infinite; }
@keyframes piir-sim-ruuvi { from { stroke-dashoffset: 0; } to { stroke-dashoffset: var(--jakso, -12); } }
.piir-sim-kerros .sim-isku { fill: rgba(64, 170, 230, 0.45); stroke: rgba(255, 255, 255, 0.9); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; animation: piir-sim-isku 1s ease-in-out infinite alternate; }
@keyframes piir-sim-isku { from { transform: scale(0.72); } to { transform: scale(1); } }
.piir-sim-kerros .sim-manta { fill: rgba(64, 170, 230, 0.85); stroke: rgba(255, 255, 255, 0.9); stroke-width: 1; animation: piir-sim-manta 1s ease-in-out infinite alternate; }
@keyframes piir-sim-manta { from { transform: translateX(0); } to { transform: translateX(var(--isku, 10px)); } }
.piir-sim-kerros.sim-pysahtynyt .sim-ruuvi,
.piir-sim-kerros.sim-pysahtynyt .sim-isku,
.piir-sim-kerros.sim-pysahtynyt .sim-manta { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .piir-sim-kerros .sim-ruuvi, .piir-sim-kerros .sim-isku, .piir-sim-kerros .sim-manta { animation: none; }
}

/* ===== Vaiheet 249–251 ja 252–258: harjoitukset =====
   Oppilaan aloitus, harjoituspaneeli simulaatiossa, tulos ja tulosten
   tarkistus (js/harjoitus.js) sekä alkutilan studio (js/studio.js).
   Dialogien värit tulevat tunnuksista (--pi-paneeli, --pi-viiva,
   --pi-teksti, --pi-himmea), joten tumma teema toimii samoilla säännöillä.
   Värien merkitys: vihreä = käynnistä simulaatio, oranssi = tallenna tai
   lähetä (raportti), ääriviiva = toissijainen. Harjoituksessa lukitut
   säädöt piilotetaan; malli estää ne myös itse. */
.harjoitus-ikkuna { max-height: 90vh; }
.harjoitus-sisus { display: flex; flex-direction: column; gap: 14px; color: var(--pi-teksti); }
.harjoitus-ohje { margin: 0; color: var(--pi-himmea); font-size: 14px; line-height: 1.5; }
.harjoitus-ohje-korostus { padding: 10px 12px; border-radius: 8px; background: rgba(255, 90, 0, 0.09); color: var(--pi-teksti); font-weight: 600; }
.harjoitus-ohje-korostus.ladattu { background: rgba(47, 158, 110, 0.14); }
.harjoitus-pieni { margin: 0; color: var(--pi-himmea); font-size: 12.5px; line-height: 1.45; }
.harjoitus-huomio { margin: 0; padding: 9px 12px; border: 1px solid rgba(240, 165, 0, 0.6); border-radius: 8px; background: rgba(240, 165, 0, 0.1); font-size: 13px; line-height: 1.45; }
.harjoitus-huomio[hidden] { display: none; }
.harjoitus-virhe { margin: 0; padding: 9px 12px; border: 1px solid rgba(179, 38, 30, 0.5); border-radius: 8px; background: rgba(179, 38, 30, 0.08); color: #b3261e; font-size: 13px; font-weight: 700; line-height: 1.45; }
.harjoitus-pudotus.yli { border-color: var(--brandi, #ff5a00); background: rgba(255, 90, 0, 0.08); }
.harjoitus-nappi { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 16px; border: 1px solid #1f7a4d; border-radius: 8px; background: #1f7a4d; color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.harjoitus-nappi:hover { background: #26915c; border-color: #26915c; }
.harjoitus-nappi:disabled { opacity: 0.5; cursor: default; }
.harjoitus-nappi.harjoitus-paa { background: var(--brandi, #ff5a00); border-color: var(--brandi, #ff5a00); }
.harjoitus-nappi.harjoitus-paa:hover { background: #e65000; border-color: #e65000; }
.harjoitus-nappi.harjoitus-toissijainen { background: transparent; color: var(--pi-teksti); border-color: var(--pi-viiva-2); }
.harjoitus-nappi.harjoitus-toissijainen:hover { background: rgba(127, 140, 150, 0.12); }
.harjoitus-nappi:focus-visible { outline: 2px solid #0072c6; outline-offset: 2px; }
.harjoitus-nimi { margin: 0; font: 700 21px/1.2 var(--pi-otsikkofontti); }
.harjoitus-aloitus-paa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.harjoitus-koemerkki { padding: 2px 9px; border-radius: 999px; background: rgba(255, 90, 0, 0.15); color: #b54400; font-size: 11.5px; font-style: normal; font-weight: 700; letter-spacing: 0.03em; }
.harjoitus-osio h5 { margin: 0 0 6px; color: var(--pi-himmea); font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.harjoitus-osio h5 small { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.harjoitus-tehtava { padding: 12px 14px; border-left: 4px solid var(--brandi, #ff5a00); border-radius: 6px; background: rgba(255, 90, 0, 0.07); color: var(--pi-teksti); font-size: 14.5px; line-height: 1.55; }
.harjoitus-tavoitelista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.harjoitus-tavoitelista li { padding: 9px 12px; border: 1px solid var(--pi-viiva); border-radius: 10px; background: var(--pi-paneeli); }
.harjoitus-tavoite-rivi { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; font-size: 14px; font-weight: 600; line-height: 1.4; }
.harjoitus-pistemerkki { flex: none; padding: 1px 9px; border-radius: 999px; background: rgba(47, 158, 110, 0.15); color: #1f7a4d; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.harjoitus-saanto { margin: 4px 0 0; color: var(--pi-himmea); font-size: 12.5px; line-height: 1.45; }
.harjoitus-vahennys-teksti { margin: 0; color: #b3261e; font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.harjoitus-tosiasiat { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.harjoitus-tosiasiat li { padding: 4px 10px; border: 1px solid var(--pi-viiva); border-radius: 999px; background: var(--pi-kromi); font-size: 12.5px; }
.harjoitus-kentat { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.harjoitus-kentat label { display: flex; flex-direction: column; gap: 4px; color: var(--pi-himmea); font-size: 12.5px; font-weight: 700; }
.harjoitus-kentat input { min-height: 40px; padding: 4px 10px; border: 1px solid var(--pi-viiva-2); border-radius: 8px; background: var(--pi-paneeli); color: var(--pi-teksti); font: inherit; font-size: 14.5px; font-weight: 500; }
.harjoitus-kentat input[aria-invalid="true"] { border-color: #b3261e; box-shadow: 0 0 0 2px rgba(179, 38, 30, 0.2); }
.harjoitus-napit { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
/* Pääpainikkeet näkyvät vierittämättä pitkässäkin ikkunassa. */
.harjoitus-napit-tarttuva { position: sticky; bottom: -22px; z-index: 2; margin: 0 -22px -22px; padding: 12px 22px 16px; border-top: 1px solid var(--pi-viiva); background: #fff; }
html[data-teema="tumma"] .harjoitus-napit-tarttuva { background: #1c2529; }
.harjoitus-tulos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 16px 18px; border-left: 8px solid; border-radius: 8px; }
.harjoitus-tulos.hyvaksytty { border-color: #1f7a4d; background: #e8f5ee; color: #133a28; }
.harjoitus-tulos.hylatty { border-color: #b3261e; background: #fdecea; color: #4a1512; }
.harjoitus-tulos-tiedot { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }
.harjoitus-prosentti { font: 700 46px/1 var(--pi-otsikkofontti); font-variant-numeric: tabular-nums; }
.harjoitus-arvio { font-size: 17px; font-weight: 800; letter-spacing: 0.02em; }
.harjoitus-arvosana { font-size: 15px; font-weight: 700; }
.harjoitus-taulukko { width: 100%; border-collapse: collapse; font-size: 13px; }
.harjoitus-taulukko th, .harjoitus-taulukko td { padding: 7px 8px; border-bottom: 1px solid var(--pi-viiva); text-align: left; vertical-align: top; }
.harjoitus-taulukko th { color: var(--pi-himmea); font-size: 12px; }
.harjoitus-taulukko td small { display: block; margin-top: 3px; color: var(--pi-himmea); font-size: 12px; font-weight: 500; line-height: 1.4; }
.harjoitus-taulukko .harjoitus-luku { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.harjoitus-tulostaulukko tr.h-ok td:last-child { color: #1f7a4d; font-weight: 700; }
.harjoitus-tulostaulukko tr.h-osin td:last-child { color: #a45f00; font-weight: 700; }
.harjoitus-tulostaulukko tr.h-pois td:last-child, .harjoitus-tulostaulukko tr.h-vahennys td:last-child { color: #b3261e; font-weight: 700; }
.harjoitus-tulostaulukko tr.h-vahennys td { background: rgba(179, 38, 30, 0.04); }
.harjoitus-tulostaulukko tr.h-vahennys.nolla td { background: transparent; }
.harjoitus-tulostaulukko tr.h-vahennys.nolla td:last-child { color: var(--pi-himmea); }
/* Tuloksen perustelu Tulos-sarakkeen sijaan vain puhelimella. Perussääntö
   ennen mediakyselyä: samantarkkuinen sääntö sen jälkeen kumosi
   puhelinsäännön, ja oppilas näki pelkät pisteet (katselmointi 258). */
.harjoitus-taulukko td small.harjoitus-vain-puhelin { display: none; }
@media (max-width: 640px) {
  .harjoitus-tulostaulukko th:nth-child(2), .harjoitus-tulostaulukko td:nth-child(2) { display: none; }
  .harjoitus-tulostaulukko td small.harjoitus-vain-puhelin { display: block; color: var(--pi-teksti); font-weight: 600; }
  .harjoitus-napit .harjoitus-nappi { flex: 1 1 auto; }
}
/* Vahvistus omana ikkunanaan (ei selaimen confirm-ikkunaa), vaarallinen
   vaihtoehto punaisena; ikkuna on muiden harjoitusikkunoiden päällä. */
.harjoitus-kysymys-tausta { z-index: 260; }
.harjoitus-kysymys { width: min(460px, 100%); }
.harjoitus-kysymys h3 { margin: 0 0 8px; font: 700 19px/1.25 var(--pi-otsikkofontti); color: var(--pi-teksti); }
.harjoitus-kysymys p { margin: 0 0 16px; color: var(--pi-teksti); font-size: 14.5px; line-height: 1.5; }
.harjoitus-kysymys.vaara { border-top: 4px solid #b3261e; }
.harjoitus-nappi.harjoitus-vaara { background: #b3261e; border-color: #b3261e; }
.harjoitus-nappi.harjoitus-vaara:hover { background: #962019; border-color: #962019; }
/* Aloitusikkuna: edellisen oppilaan nimi vain ehdotuksena ja nopeus lauseena. */
.harjoitus-jatka { margin: -4px 0 0; }
.harjoitus-jatka[hidden] { display: none; }
.harjoitus-jatka-nappi { min-height: 32px; padding: 0 12px; border: 1px dashed var(--pi-viiva-2); border-radius: 999px; background: transparent; color: var(--pi-teksti); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.harjoitus-jatka-nappi:hover { border-style: solid; background: rgba(127, 140, 150, 0.12); }
.harjoitus-jatka-nappi:focus-visible { outline: 2px solid #0072c6; outline-offset: 2px; }
.harjoitus-nopeusrivi { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 12px; border: 1px solid var(--pi-viiva); border-radius: 8px; font-size: 13.5px; line-height: 1.45; }
.harjoitus-nopeusrivi b { flex: none; padding: 2px 9px; border-radius: 6px; background: var(--muste, #171d1f); color: var(--pi-kromi, #fff); font: 700 14px/1.3 var(--pi-mono, Consolas, monospace); }

/* Harjoituspaneeli simulaatiossa: vasemmalla palkin alla (kaavio
   sovitetaan sen viereen, nayttotila.js). Paneeli on kaavio-ikkunan
   sisällä, joten Tab kulkee siihen. */
.harjoitus-paneeli, .studio-paneeli {
  position: fixed; top: calc(var(--naytto-palkki, 46px) + 10px); left: 12px; z-index: 118;
  width: min(340px, calc(100vw - 24px)); max-height: calc(100vh - var(--naytto-palkki, 46px) - 90px); overflow: auto; overscroll-behavior: contain;
  border: 1px solid #33444b; border-radius: 12px; background: rgba(16, 26, 31, 0.96); color: #eef2ef;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); font-size: 13px;
}
.harjoitus-paneeli:focus { outline: none; }
.harjoitus-paneeli:focus-visible { outline: 2px solid #4fc3f7; outline-offset: 2px; }
.harjoitus-paneeli-ylapaa, .studio-paa { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #27363d; background: #101a1f; }
.harjoitus-paneeli-ylapaa b, .studio-paa b { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; }
.harjoitus-merkki, .studio-merkki { flex: none; padding: 2px 7px; border-radius: 999px; background: rgba(47, 158, 110, 0.22); color: #7fd9ad; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; }
.harjoitus-pienenna, .studio-pienenna { flex: none; min-width: 32px; min-height: 32px; border: 1px solid #44575f; border-radius: 6px; background: transparent; color: #dce6e4; cursor: pointer; }
.harjoitus-paneeli.pieni .harjoitus-paneeli-sisus, .studio-paneeli.pieni .studio-sisus { display: none; }
.harjoitus-paneeli.pieni .harjoitus-pienenna, .studio-paneeli.pieni .studio-pienenna { transform: rotate(180deg); }
.harjoitus-paneeli-sisus { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 12px; }
.harjoitus-aika { display: flex; align-items: baseline; gap: 8px; }
.harjoitus-aika span { font: 500 28px/1 var(--pi-mono, Consolas, monospace); font-variant-numeric: tabular-nums; }
.harjoitus-aika small { color: #93a5ad; }
.harjoitus-aika .harjoitus-koemerkki { margin-left: auto; background: rgba(255, 138, 61, 0.18); color: #ffb280; }
/* Simulaation nopeus kellon vieressä ("nopeus 10×"). */
.harjoitus-nopeus { padding: 1px 7px; border: 1px solid #44575f; border-radius: 999px; color: #b9c6cc; font-size: 11.5px; font-style: normal; font-weight: 700; white-space: nowrap; }
.harjoitus-nopeus[hidden] { display: none; }
.harjoitus-edistys { height: 6px; border-radius: 3px; background: #243238; overflow: hidden; }
.harjoitus-edistys div { height: 100%; width: 0; background: var(--brandi, #ff5a00); transition: width 0.25s linear; }
.harjoitus-tavoitteet { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.harjoitus-tavoitteet li { display: grid; grid-template-columns: 18px 1fr auto; gap: 6px; align-items: start; line-height: 1.35; }
.harjoitus-tavoitteet li > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.harjoitus-tavoitteet small { color: #9fb2ba; font-size: 12px; }
.harjoitus-tavoitteet i { font-style: normal; font-weight: 800; text-align: center; }
.harjoitus-tavoitteet b { color: #b9c6cc; font-variant-numeric: tabular-nums; white-space: nowrap; }
.harjoitus-tavoitteet .h-ok i { color: #6fd6a2; }
.harjoitus-tavoitteet .h-ok small { color: #8fdcb5; }
.harjoitus-tavoitteet .h-pois i { color: #ff8f8f; }
.harjoitus-tavoitteet .h-myohassa i, .harjoitus-tavoitteet .h-varoitus i, .harjoitus-tavoitteet .h-varoitus small { color: #ffc266; }
.harjoitus-tavoitteet .h-kesken i, .harjoitus-tavoitteet .h-odottaa i { color: #93a5ad; }
.harjoitus-vahennykset { margin: 0; padding: 6px 9px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); color: #b9c6cc; font-size: 12.5px; }
.harjoitus-vahennykset.on { background: rgba(208, 2, 27, 0.16); color: #ffb3b3; font-weight: 700; }
.harjoitus-yhteensa { margin: 0; color: #b9c6cc; }
.harjoitus-yhteensa b { color: #fff; font-size: 17px; font-variant-numeric: tabular-nums; }
/* Pääpainike pysyy näkyvissä, vaikka paneeli vierittyisi (matala ruutu). */
.harjoitus-valmis { position: sticky; bottom: 6px; z-index: 1; min-height: 42px; border: 1px solid var(--brandi, #ff5a00); border-radius: 8px; background: var(--brandi, #ff5a00); color: #fff; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 -4px 14px rgba(16, 26, 31, 0.85); }
.harjoitus-valmis:hover { background: #e65000; }
.harjoitus-valmis[hidden] { display: none; }
.harjoitus-paneeli-napit { display: flex; gap: 8px; }
.harjoitus-paneeli-napit button { flex: 1; min-height: 36px; border: 1px solid #44575f; border-radius: 6px; background: transparent; color: #dce6e4; font: inherit; font-weight: 700; cursor: pointer; }
.harjoitus-paneeli-napit button[aria-expanded="true"] { border-color: #7d9199; background: rgba(255, 255, 255, 0.06); }
.harjoitus-paneeli-napit .harjoitus-lopeta { border-color: #7a3a36; color: #ffb3b3; }
.harjoitus-paneeli.valmis .harjoitus-lopeta { display: none; }
.harjoitus-paneeli-ohje { padding: 8px 10px; border-radius: 8px; background: #1b2a30; color: #dce6e4; line-height: 1.5; }
.harjoitus-paneeli button:focus-visible, .studio-paneeli button:focus-visible, .studio-palkki button:focus-visible { outline: 2px solid #4fc3f7; outline-offset: 2px; }
@media (max-width: 640px) {
  .harjoitus-paneeli, .studio-paneeli { top: auto; bottom: 8px; left: 8px; right: 8px; width: auto; max-height: 46vh; }
  /* Kulmalaatikko peitti paneelin napit (katselmointi 248 #19). */
  body.piir-nayttotila.harjoitus-kaynnissa .piir-naytto-tiedot, body.piir-nayttotila.studio-alkutila .piir-naytto-tiedot { display: none; }
}

/* ----- Alkutilan studio (Vaihe 256, js/studio.js) -----
   Yläpalkki "Harjoituksen luonti · 2/5 Alkutila" simulaation palkin alla
   ja vasemmalla paneeli laitteittain. Aika on pysäytetty: nopeus-,
   tauko- ja käynnistysnapit näkyvät vasta kokeilussa. */
.studio-palkki {
  position: fixed; top: var(--naytto-palkki, 46px); left: 0; right: 0; z-index: 117;
  display: flex; align-items: center; gap: 8px 14px; min-height: 52px; padding: 7px 12px;
  border-bottom: 1px solid #3a2c22; background: linear-gradient(90deg, #2a1a10 0%, #182226 42%); color: #eef2ef;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.studio-palkki-vaihe { display: flex; flex-direction: column; gap: 1px; flex: none; }
.studio-palkki-vaihe span { color: #ffb280; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.studio-palkki-vaihe b { font: 700 17px/1.1 var(--pi-otsikkofontti); }
.studio-palkki-ohje { flex: 1; min-width: 0; margin: 0; color: #b9c6cc; font-size: 13px; }
.studio-palkki-napit { display: flex; gap: 8px; margin-left: auto; }
.studio-nappi { min-height: 38px; padding: 0 16px; border: 1px solid #52646a; border-radius: 8px; background: transparent; color: #eef2ef; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.studio-nappi:hover { border-color: #8a9ea6; }
.studio-nappi.studio-paa { border-color: var(--brandi, #ff5a00); background: var(--brandi, #ff5a00); color: #fff; }
.studio-nappi.studio-paa:hover { background: #e65000; }
.studio-paneeli { top: calc(var(--naytto-palkki, 46px) + var(--studio-palkki, 52px) + 10px); max-height: calc(100vh - var(--naytto-palkki, 46px) - var(--studio-palkki, 52px) - 80px); width: min(360px, calc(100vw - 24px)); }
.studio-merkki { background: rgba(255, 138, 61, 0.2); color: #ffb280; }
.studio-otsikko:focus { outline: none; }
.studio-sisus { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 14px; }
.studio-selite { margin: 0; color: #b9c6cc; line-height: 1.45; }
.studio-kokeile { flex: none; min-height: 34px; padding: 0 12px; border: 1px solid #1f7a4d; border-radius: 8px; background: #1f7a4d; color: #fff; font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; white-space: nowrap; }
/* Vieritys (myös kohdistus ja kanvaalta valinta) jättää otsakkeen alle tilaa. */
.studio-sisus *, .harjoitus-paneeli-sisus * { scroll-margin-top: 64px; scroll-margin-bottom: 10px; }
.studio-kokeile:hover { background: #26915c; }
.studio-kokeile.kaynnissa { border-color: #b3261e; background: transparent; color: #ffb3b3; }
.studio-kokeilu-teksti { margin: 0; padding: 7px 9px; border: 1px solid rgba(240, 165, 0, 0.55); border-radius: 6px; background: rgba(240, 165, 0, 0.1); color: #ffd27a; font-size: 12.5px; line-height: 1.4; }
.studio-kokeilu-teksti[hidden] { display: none; }
.studio-ryhmat { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.studio-ryhmat:disabled { opacity: 0.55; }
.studio-ryhma h4 { margin: 0 0 6px; color: #93a5ad; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.studio-ryhma h4 small { margin-left: 4px; color: #6d8087; }
.studio-rivi { margin-bottom: 6px; border: 1px solid #2a3940; border-radius: 10px; background: #142026; }
.studio-rivi.auki, .studio-rivi.valittu { border-color: #c25a1c; background: #182429; }
/* Sama nimi kahdella laitteella: punainen reuna ja varoitus nimikentän alla. */
.studio-rivi.studio-rivi-virhe { border-color: #d0453b; box-shadow: inset 3px 0 0 #d0453b; }
.studio-varoitus { margin: 2px 0 4px; padding: 6px 9px; border: 1px solid rgba(255, 120, 110, 0.55); border-radius: 6px; background: rgba(208, 69, 59, 0.16); color: #ffc2bc; font-size: 12.5px; font-weight: 700; line-height: 1.4; }
.studio-varoitus[hidden] { display: none; }
.studio-rivi-paa { display: grid; grid-template-columns: 26px 1fr auto 14px; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.studio-tunnus { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #243238; color: #b9c6cc; font-size: 11px; font-weight: 800; }
.studio-rivi[data-luokka="sailio"] .studio-tunnus { background: rgba(0, 114, 198, 0.3); color: #9ad0ff; }
.studio-rivi[data-luokka="pumppu"] .studio-tunnus { background: rgba(255, 212, 0, 0.18); color: #ffe27a; }
.studio-rivi-nimi { display: flex; flex-direction: column; min-width: 0; }
.studio-rivi-nimi b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; }
.studio-rivi-nimi small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #9fb2ba; font-size: 12px; }
.studio-nuoli { color: #7d9199; font-style: normal; transition: transform 0.15s; }
.studio-rivi.auki .studio-nuoli { transform: rotate(90deg); }
.studio-lukko { width: 12px; height: 14px; color: #ffd27a; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2.6 5.2V3.6a2.4 2.4 0 0 1 4.8 0v1.6' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Crect x='1' y='5' width='8' height='6.6' rx='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2.6 5.2V3.6a2.4 2.4 0 0 1 4.8 0v1.6' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Crect x='1' y='5' width='8' height='6.6' rx='1.3'/%3E%3C/svg%3E") center / contain no-repeat; }
.studio-lukko[hidden] { display: none; }
.studio-kentat { display: flex; flex-direction: column; gap: 10px; padding: 4px 10px 12px; }
.studio-kentat[hidden] { display: none; }
.studio-kentta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.studio-kentta > span:first-child { color: #b9c6cc; font-size: 12px; font-weight: 700; }
.studio-kaksi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.studio-paneeli input[type="text"], .studio-paneeli input[type="number"], .studio-paneeli select {
  width: 100%; min-height: 36px; padding: 0 8px; border: 1px solid #3b4d55; border-radius: 6px; background: #0e171b; color: #eef2ef; font: inherit; font-size: 14px;
}
.studio-paneeli input:focus-visible, .studio-paneeli select:focus-visible { outline: 2px solid #4fc3f7; outline-offset: 1px; }
.studio-paneeli input:disabled, .studio-paneeli button:disabled { opacity: 0.5; cursor: not-allowed; }
.studio-luku { display: flex; align-items: center; gap: 6px; }
.studio-luku input { flex: 1; min-width: 0; }
.studio-yksikko { flex: none; color: #93a5ad; font-size: 12.5px; }
.studio-liuku { display: flex; align-items: center; gap: 10px; }
.studio-liuku input[type="range"] { flex: 1; min-width: 0; accent-color: var(--brandi, #ff5a00); }
.studio-liuku .studio-luku { flex: none; width: 92px; }
.studio-liuku output { flex: none; min-width: 44px; color: #eef2ef; font-variant-numeric: tabular-nums; text-align: right; }
.studio-valinta { display: flex; align-items: flex-start; gap: 9px; min-height: 30px; cursor: pointer; }
.studio-valinta input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--brandi, #ff5a00); cursor: pointer; }
.studio-valinta span { display: flex; flex-direction: column; gap: 1px; font-weight: 700; }
.studio-valinta small { color: #93a5ad; font-size: 11.5px; font-weight: 500; line-height: 1.35; }
.studio-yli { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px dashed #4a5a61; border-radius: 8px; }
.studio-yliraja.pois { opacity: 0.5; }
.studio-segmentti { display: inline-flex; width: 100%; border: 1px solid #3b4d55; border-radius: 8px; overflow: hidden; }
.studio-segmentti button { flex: 1; min-height: 36px; border: 0; background: transparent; color: #cfdad8; font: inherit; font-weight: 700; cursor: pointer; }
.studio-segmentti button + button { border-left: 1px solid #3b4d55; }
.studio-segmentti button[aria-pressed="true"] { background: rgba(255, 138, 61, 0.22); color: #fff; }
.studio-lisa summary { color: #9fb2ba; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.studio-lisa[open] summary { margin-bottom: 8px; }
.studio-vihje { margin: 0; color: #93a5ad; font-size: 12px; line-height: 1.4; }
.studio-painovoima { margin-top: 4px; padding-top: 10px; border-top: 1px solid #27363d; }
.piir-valvomo .studio-korostus { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.studio-korostus-laatikko { fill: rgba(255, 138, 61, 0.08); stroke: #ff8a3d; stroke-width: 3; stroke-dasharray: 10 6; animation: studio-korostus 1.2s linear infinite; }
.studio-korostus-linja { fill: none; stroke: #ff8a3d; stroke-opacity: 0.55; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
@keyframes studio-korostus { to { stroke-dashoffset: -32; } }
@media (prefers-reduced-motion: reduce) { .studio-korostus-laatikko { animation: none; } }
/* Alkutilassa aika ei kulje: ohjaus vasta kokeilussa; painovoima ja
   prosessi paneelista, ei palkin valikoista. */
body.piir-nayttotila.studio-alkutila:not(.studio-kokeilu) #piirSimKertoimet,
body.piir-nayttotila.studio-alkutila:not(.studio-kokeilu) #piirNayttoKaikki,
body.piir-nayttotila.studio-alkutila:not(.studio-kokeilu) #piirSimTrendit,
body.piir-nayttotila.studio-alkutila #piirNayttoNollaa,
body.piir-nayttotila.studio-alkutila #piirSimOpastusNappi,
body.piir-nayttotila.studio-alkutila .piir-sim-valinta:has(#piirSimKorkeudet),
body.piir-nayttotila.studio-alkutila .piir-naytto-nimi .piir-sim-prosessi-nuoli { display: none !important; }
body.piir-nayttotila.studio-alkutila .piir-naytto-palkki .piir-naytto-nimi { pointer-events: none; }
body.piir-nayttotila.studio-alkutila .piir-sim-prosessi-merkki { background: rgba(255, 138, 61, 0.2); color: #ffb280; }
@media (max-width: 900px) {
  .studio-palkki-ohje { display: none; }
}
@media (max-width: 640px) {
  .studio-palkki { gap: 8px; min-height: 48px; padding: 6px 8px; }
  .studio-palkki-vaihe span { display: none; }
  .studio-palkki-vaihe b { font-size: 15px; }
  .studio-nappi { min-height: 36px; padding: 0 12px; font-size: 13.5px; }
  .studio-paneeli { top: auto; bottom: 8px; left: 8px; right: 8px; width: auto; max-height: 46vh; }
  /* Ilmoitus alkutilan palkin alle: muuten se peittää ‹ Prosessi- ja
     Tehtävä ›-napit ensimmäiset sekunnit (Vaihe 258). */
  body.piir-nayttotila.studio-alkutila .ilmo { top: calc(var(--naytto-palkki, 92px) + var(--studio-palkki, 48px) + 8px); }
}
/* Matala vaakanäyttö (puhelin vaakatasossa, katselmointi 258):
   ilmoitukset paneelin viereen oikealle, jotteivät ne peitä paneelin
   ✓ Valmis -nappia, ja paneelista pois edistymispalkki (kello kertoo saman). */
@media (max-height: 520px) and (min-width: 641px) {
  body.piir-nayttotila.harjoitus-kaynnissa .ilmo { left: auto; right: 12px; top: auto; bottom: 12px; max-width: calc(100vw - min(300px, 42vw) - 40px); transform: translateY(70px); }
  body.piir-nayttotila.harjoitus-kaynnissa .ilmo.nakyy { transform: translateY(0); }
  .harjoitus-paneeli .harjoitus-edistys { display: none; }
  .harjoitus-paneeli-sisus { gap: 8px; padding-top: 8px; }
  .harjoitus-aika span { font-size: 24px; }
  .studio-paneeli, .harjoitus-paneeli { width: min(300px, 42vw); max-height: calc(100vh - var(--naytto-palkki, 46px) - var(--studio-palkki, 0px) - 20px); }
  body.piir-nayttotila.harjoitus-kaynnissa .piir-naytto-tiedot, body.piir-nayttotila.studio-alkutila .piir-naytto-tiedot { display: none; }
  .studio-palkki { min-height: 44px; padding: 4px 12px; }
  .studio-palkki-vaihe span { display: none; }
  .studio-nappi { min-height: 34px; }
}

/* Harjoituksessa lukitut säädöt (malli estää ne myös). Yleisopastus ei
   näy harjoituksessa (ohje tulee harjoituksesta), joten sen nappikin
   piiloon (katselmointi 258). */
body.piir-nayttotila.harjoitus-kaynnissa #piirSimOpastusNappi,
body.piir-nayttotila.harjoitus-kaynnissa .piir-sim-valinta:has(#piirSimKorkeudet),
body.piir-nayttotila.harjoitus-kaynnissa #simKaanna,
body.piir-nayttotila.harjoitus-kaynnissa .piir-naytto-nimi .piir-sim-prosessi-nuoli,
body.piir-nayttotila.harjoitus-ei-taukoa #piirSimTauko,
body.piir-nayttotila.harjoitus-ei-uusintaa #piirNayttoNollaa,
body.piir-nayttotila.harjoitus-lukittu .piir-naytto-lohko:not(.hmi-lisaa):has(#simAsetaPinta),
body.piir-nayttotila.harjoitus-lukittu .piir-naytto-lohko:not(.hmi-lisaa):has(#simLisaa),
body.piir-nayttotila.harjoitus-lukittu .piir-naytto-lohko:not(.hmi-lisaa):has(#simAine),
body.piir-nayttotila.harjoitus-lukittu .piir-naytto-lohko:not(.hmi-lisaa):has(#simTuotto),
body.piir-nayttotila.harjoitus-lukittu .piir-naytto-lohko:not(.hmi-lisaa):has(#simNosto),
body.piir-nayttotila.harjoitus-lukittu details.sim-lisa:has(#simTilavuus),
body.piir-nayttotila.harjoitus-lukittu details.sim-lisa:has(#simTiheys),
body.piir-nayttotila.harjoitus-lukittu .piir-naytto-lohko:not(.hmi-lisaa):has(#simLinjaSyote),
body.piir-nayttotila.harjoitus-lukittu .piir-naytto-lohko:not(.hmi-lisaa):has(#simLinjaTaytto) { display: none !important; }
body.piir-nayttotila.harjoitus-kaynnissa .piir-naytto-palkki .piir-naytto-nimi { pointer-events: none; }
body.piir-nayttotila.harjoitus-kaynnissa .piir-sim-prosessi-merkki { background: rgba(47, 158, 110, 0.22); color: #7fd9ad; }
/* Yksi ensisijainen toiminto (Vaihe 258): harjoituksessa "✓ Valmis – näytä
   tulos" ja alkutilassa "Tehtävä ›" ovat oransseja, poistuminen on
   toissijainen reunanappi eikä kilpaile niiden kanssa. */
body.piir-nayttotila.harjoitus-kaynnissa .piir-naytto-palkki .piir-naytto-pois,
body.piir-nayttotila.studio-alkutila .piir-naytto-palkki .piir-naytto-pois { border-color: #7d9199; background: transparent; color: #eef2f4; }

/* Tumma teema: tunnukset hoitavat pinnat; tässä vain värikoodatut tekstit
   (kontrasti vähintään 4,5:1, katselmointi 248 #27). */
html[data-teema="tumma"] .harjoitus-tulos.hyvaksytty { background: #143325; color: #d9f2e4; }
html[data-teema="tumma"] .harjoitus-tulos.hylatty { background: #3a1a18; color: #ffd6d2; }
html[data-teema="tumma"] .harjoitus-pistemerkki { color: #7fd9ad; }
html[data-teema="tumma"] .harjoitus-koemerkki { color: #ffb280; }
html[data-teema="tumma"] .harjoitus-vahennys-teksti, html[data-teema="tumma"] .harjoitus-virhe { color: #ff9a8f; }
html[data-teema="tumma"] .harjoitus-tulostaulukko tr.h-ok td:last-child { color: #6fd6a2; }
html[data-teema="tumma"] .harjoitus-tulostaulukko tr.h-osin td:last-child { color: #ffc266; }
html[data-teema="tumma"] .harjoitus-tulostaulukko tr.h-pois td:last-child, html[data-teema="tumma"] .harjoitus-tulostaulukko tr.h-vahennys td:last-child { color: #ff8f8f; }
html[data-teema="tumma"] .harjoitus-nappi.harjoitus-paa:hover { background: #ff7a2e; border-color: #ff7a2e; }

/* ===== Vaihe 253: ylijuoksu ja lukitut laitteet =====
   Säiliön säädettävä ylijuoksu simulaatiokerroksessa (rajaviiva, valuva
   verho, pisarat, kuohu ja lätäkkö säiliön aineen värillä) ja
   säätöikkunassa, sekä kouluttajan harjoitukseen lukitsemat laitteet.
   Värit ja paksuudet tulevat valvomo.js:stä (aine, koko); täällä vain
   läpinäkyvyys ja reunat. Liike on requestAnimationFramessa, joten
   "vähemmän liikettä" ja tauko pysäyttävät sen ilman omia sääntöjä. */
.piir-sim-kerros .sim-yli-raja-pohja { stroke: rgba(8, 12, 14, 0.5); stroke-linecap: butt; }
.piir-sim-kerros .sim-yli-raja { stroke: #f0a500; stroke-linecap: butt; }
.piir-sim-kerros .sim-yli-reuna { opacity: 0.5; }
.piir-sim-kerros .sim-yli-verho { opacity: 0.9; }
.piir-sim-kerros .sim-yli-virta { opacity: 0.7; }
.piir-sim-kerros .sim-yli-pisarat { stroke-width: 0.6; stroke-opacity: 0.8; }
.piir-sim-kerros .sim-yli-kuohu { opacity: 0.9; }
.piir-sim-kerros .sim-yli-latakko { opacity: 0.62; }
/* Vaalealla arkilla vaalea aine erottuu tummasta reunasta (pisaroiden
   reuna on aineen tumma sävy valvomo.js:ssä). */
#piirKanvas:not(.alusta-tumma) ~ .piir-valvomo .sim-yli-reuna { opacity: 0.75; }
#piirKanvas:not(.alusta-tumma) ~ .piir-valvomo .sim-yli-pisarat { stroke-width: 0.9; stroke-opacity: 1; }

/* Säätöikkuna: ylijuoksun valinta, raja mittarissa ja ylivuotanut määrä. */
.piir-sim-ikkuna .sim-yli-valinta { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding-right: 6px; cursor: pointer; }
.piir-sim-ikkuna .sim-yli-valinta input { width: 18px; height: 18px; margin: 0; accent-color: #f0a500; cursor: pointer; }
/* Kosketusnäytöllä valinta on sormen kokoinen (WCAG 2.5.8; katselmointi M #9). */
@media (pointer: coarse) {
  .piir-sim-ikkuna .sim-yli-valinta { min-height: 40px; padding-right: 10px; }
  .piir-sim-ikkuna .sim-yli-valinta input { width: 22px; height: 22px; }
}
.piir-sim-ikkuna .sim-yli-lohko .piir-naytto-otsikko > output { margin-left: 0; color: #ffd27a; }
.piir-sim-ikkuna .sim-yli-lohko input[type="range"] { accent-color: #f0a500; }
.piir-sim-ikkuna .sim-yli-lohko input[type="range"]:disabled { opacity: 0.4; cursor: not-allowed; }
.piir-sim-ikkuna .sim-yli-tieto { margin: 0; color: #cfdad8; font-size: 12px; line-height: 1.45; }
.piir-sim-ikkuna .sim-yli-tieto b { color: #ffd27a; }
.piir-sim-ikkuna .sim-mittari-raja { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed #f0a500; transform: translateY(1px); }
.piir-sim-ikkuna .sim-mittari-raja[hidden],
.piir-sim-ikkuna .sim-yli-luku[hidden] { display: none; }
.piir-sim-ikkuna .sim-yli-luku { color: #ffd27a; font-weight: 700; }
/* Aseta pinta -liukuri: ylijuoksun yläpuolinen osa radasta raidoitettuna,
   koska pintaa ei voi asettaa sinne (katselmointi M #3). Nupin keskikohta
   kulkee 10 px:n päässä radan päistä (nuppi 20 px). */
.piir-sim-ikkuna .sim-aseta-rata { position: relative; display: block; }
.piir-sim-ikkuna .sim-aseta-rata input[type="range"] { display: block; }
.piir-sim-ikkuna .sim-aseta-yli {
  position: absolute;
  top: 50%;
  right: 0;
  left: calc(10px + (100% - 20px) * var(--raja, 1));
  height: 7px;
  transform: translateY(-50%);
  border-left: 2px solid #f0a500;
  border-radius: 0 999px 999px 0;
  background: repeating-linear-gradient(135deg, rgba(240, 165, 0, 0.6) 0 3px, rgba(240, 165, 0, 0.15) 3px 6px);
  pointer-events: none;
}
.piir-sim-ikkuna .sim-aseta-yli[hidden] { display: none; }
/* Ennusteen varoitus ("Tulvii yli …"): yleinen .varoitus-palkki (vaalea
   pohja) teki keltaisesta tekstistä lukukelvottoman ikkunassa. */
.piir-sim-ikkuna .sim-ennuste.varoitus {
  margin: 10px 10px 0;
  padding: 6px 9px;
  border: 1px solid rgba(240, 165, 0, 0.5);
  border-radius: 6px;
  background: rgba(240, 165, 0, 0.14);
  color: #ffd27a;
  font-size: 12px;
  font-weight: 700;
}

/* Lukittu laite: selitys ikkunassa, ohjaimet himmeinä, merkissä lukko. */
.piir-sim-ikkuna .piir-naytto-lohko.sim-lukittu {
  display: grid;
  gap: 3px;
  margin: 10px 10px 0;
  padding: 8px 10px 8px 34px;
  border: 1px solid rgba(240, 165, 0, 0.55);
  border-radius: 8px;
  background: rgba(240, 165, 0, 0.1);
  color: #ffd27a;
  font-size: 12px;
  line-height: 1.4;
  position: relative;
}
.piir-sim-ikkuna .sim-lukittu::before,
.piir-valvomo-merkki.piir-valvomo-lukittu::after {
  content: '';
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2.6 5.2V3.6a2.4 2.4 0 0 1 4.8 0v1.6' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Crect x='1' y='5' width='8' height='6.6' rx='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2.6 5.2V3.6a2.4 2.4 0 0 1 4.8 0v1.6' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Crect x='1' y='5' width='8' height='6.6' rx='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.piir-sim-ikkuna .sim-lukittu::before { position: absolute; left: 11px; top: 9px; width: 14px; height: 16px; }
.piir-sim-ikkuna .sim-lukittu b { font-size: 12.5px; }
.piir-sim-ikkuna .sim-lukittu span { color: #cfdad8; }
.piir-sim-ikkuna .piir-valvomo-toiminto:disabled,
.piir-sim-ikkuna input[type="range"]:disabled { opacity: 0.45; cursor: not-allowed; }
.piir-valvomo-merkki.piir-valvomo-lukittu { border-style: dashed; cursor: not-allowed; }
.piir-valvomo-merkki.piir-valvomo-lukittu::after { flex: none; width: 9px; height: 11px; opacity: 0.85; }
.piir-valvomo-merkki.piir-valvomo-lukittu:hover { transform: translateX(-50%); }
/* Pienennetyssä näkymässä (puhelin, tabletti) linjalaitteen tunnus ja tila
   kahdella rivillä: merkki pysyy kapeana, eikä tila jää pois
   (valvomo.js: piir-valvomo-pinottu; katselmointi M #1). */
.piir-valvomo-merkki.piir-valvomo-pinottu { border-radius: 10px; padding: 3px 10px 3px 9px; }
.piir-valvomo-merkki-pino { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.12; }
.piir-valvomo-merkki-nimi { font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; opacity: 0.72; }

/* Harjoitus ilman lisäyslupaa: pikanapit ja ylijuoksun säätö piiloon
   (katselmointi 248 #26); malli ja käsittelijä estävät ne myös. */
body.piir-nayttotila.harjoitus-lukittu #simSailioPikat,
body.piir-nayttotila.harjoitus-lukittu .piir-naytto-lohko:not(.hmi-lisaa):has(#simYliKaytossa) { display: none !important; }

/* ===== Vaihe 259: pinnanmittaus, rajat ja pumput =====
   Markus 27.9.2026: yksi pintalukema säiliötä kohden (pintamittari kantaa
   sen), hälytysrajat pinnanmittauksen ja säiliön ikkunaan, pumppu
   hidastuu sammutettaessa (PYSÄHTYY) ja ohjaustapa näkyy. */

/* Hidastuva pumppu: vihreä pallo hiipuu, kehys katkoviivalla. */
.piir-valvomo-merkki.piir-valvomo-pysahtyy { border-style: dashed; border-color: rgba(111, 211, 155, 0.6); color: #cfe8dc; }
.piir-valvomo-merkki.piir-valvomo-pysahtyy::before { background: #6fd39b; animation: piir-valvomo-hiipuu 1.4s ease-in-out infinite; }
@keyframes piir-valvomo-hiipuu {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
/* Hälytysmerkki vilkkuu taustavärillä eikä läpinäkyvyydellä: vaaleilla
   taustoilla (Vaalea tehdas, HMI harmaa) himmeä vaihe jäi lähes
   näkymättömäksi. Kehys ja palkin laskuri samoin. */
.piir-valvomo-merkki.piir-valvomo-halytys { animation: piir-valvomo-merkki-vilkku 1s steps(1, end) infinite; opacity: 1; }
@keyframes piir-valvomo-merkki-vilkku {
  0%, 60% { background: rgba(14, 20, 22, 0.92); }
  61%, 100% { background: rgba(150, 12, 28, 0.95); color: #fff; }
}
div.piir-valvomo-halytys:not(.piir-valvomo-halytys-pysyva) { animation-name: piir-valvomo-kehys-vilkku; }
@keyframes piir-valvomo-kehys-vilkku {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.7; border-style: dashed; }
}
.piir-naytto-halytykset { animation-name: piir-valvomo-laskuri-vilkku; }
@keyframes piir-valvomo-laskuri-vilkku {
  0%, 60% { background: rgba(208, 2, 27, 0.16); }
  61%, 100% { background: rgba(208, 2, 27, 0.55); color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .piir-valvomo-merkki.piir-valvomo-halytys, .piir-valvomo-merkki.piir-valvomo-pysahtyy::before, .piir-naytto-halytykset { animation: none; }
}

/* Pumpun ikkuna: pysähtymisen tila, ohjaustapa ja lievä syy. */
.piir-sim-ikkuna .sim-pumppu-tila { margin: 6px 0 0; color: #ffd27a; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.piir-sim-ikkuna .sim-pumppu-tila.halytys { color: #ff9d9d; }
.piir-sim-ikkuna .sim-pumppu-tila[hidden] { display: none; }
.piir-sim-ikkuna .sim-ohjaus-tapa { display: block; color: #cfdad8; font-size: 12.5px; line-height: 1.4; }
.piir-sim-ikkuna .sim-syy.sim-syy-lieva { color: #9fb0ab; }
.piir-sim-ikkuna .sim-mittauskohde { display: block; margin-top: 4px; color: #9fb0ab; font-size: 12px; line-height: 1.4; }

/* Säiliön mittari: LAH (punainen), LAL (keltainen) ja poistoyhde. */
.piir-sim-ikkuna .sim-mittari-lah,
.piir-sim-ikkuna .sim-mittari-lal,
.piir-sim-ikkuna .sim-mittari-yhde { position: absolute; left: 0; right: 0; height: 0; transform: translateY(1px); pointer-events: none; }
.piir-sim-ikkuna .sim-mittari-lah { border-top: 2px solid #ff5a67; }
.piir-sim-ikkuna .sim-mittari-lal { border-top: 2px solid #f0c040; }
.piir-sim-ikkuna .sim-mittari-yhde { border-top: 2px dotted #c9d4d8; }
.piir-sim-ikkuna .sim-mittari-lah[hidden],
.piir-sim-ikkuna .sim-mittari-lal[hidden],
.piir-sim-ikkuna .sim-mittari-yhde[hidden] { display: none; }
.piir-sim-ikkuna .sim-mittari-nimi { color: #7fb6d6; font-size: 11.5px; }

/* Hälytysrajat: rivi kullekin rajalle. */
.piir-sim-ikkuna .sim-rajat { display: grid; gap: 6px; }
.piir-sim-ikkuna .sim-raja-rivi { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #9fb0ab; font-size: 12.5px; }
.piir-sim-ikkuna .sim-raja-rivi .sim-rivi { flex: none; width: 104px; }
.piir-sim-ikkuna .sim-rajat .sim-vihje { margin-top: 0; }

/* Pinnanmittaus: mitattava säiliö, iso lukema ja pystymittari merkkeineen. */
.piir-sim-ikkuna .sim-lm-paa { display: grid; gap: 3px; }
.piir-sim-ikkuna .sim-lm-kohde { color: #cfdad8; font-size: 13px; font-weight: 700; }
.piir-sim-ikkuna .sim-lm { display: flex; align-items: stretch; gap: 10px; }
.piir-sim-ikkuna .sim-lm-mittari { position: relative; flex: none; width: 30px; height: 140px; margin: 0 40px 0 64px; border: 1.5px solid #6d8087; border-radius: 5px; background: #0a1012; }
.piir-sim-ikkuna .sim-lm-pinta { position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-radius: 0 0 3px 3px; background: #2f9bd6; transition: height 0.4s ease; }
.piir-sim-ikkuna .sim-lm-raja { position: absolute; left: -3px; right: -3px; height: 0; border-top: 2px solid; font-style: normal; transform: translateY(1px); pointer-events: none; }
.piir-sim-ikkuna .sim-lm-raja[hidden] { display: none; }
.piir-sim-ikkuna .sim-lm-raja b { position: absolute; left: calc(100% + 5px); top: 0; transform: translateY(-50%); font-size: 10.5px; font-weight: 800; letter-spacing: 0.03em; white-space: nowrap; }
.piir-sim-ikkuna .sim-lm-lah { border-color: #ff5a67; color: #ff8b95; }
.piir-sim-ikkuna .sim-lm-lal { border-color: #f0c040; color: #f5d27a; }
.piir-sim-ikkuna .sim-lm-yli { border-color: #f08a00; border-top-style: dashed; color: #ffb45a; }
.piir-sim-ikkuna .sim-lm-yhde { border-color: #c9d4d8; border-top-style: dotted; color: #c9d4d8; }
/* Ylijuoksu ja poistoyhde vasemmalle, LAH ja LAL oikealle: lähekkäiset
   rajat (ylijuoksu 95 %, LAH 90 %) eivät peitä toistensa nimiä. */
.piir-sim-ikkuna .sim-lm-yli b,
.piir-sim-ikkuna .sim-lm-yhde b { left: auto; right: calc(100% + 5px); }
.piir-sim-ikkuna .sim-lm-luvut { display: flex; flex: 1; min-width: 0; flex-direction: column; justify-content: center; gap: 4px; }
.piir-sim-ikkuna .sim-lm-pros { color: #eef2ef; font: 700 28px/1.1 var(--pi-mono, Consolas, monospace); white-space: nowrap; }
.piir-sim-ikkuna .sim-lm-maara { color: #cfdad8; font: 700 13px/1.3 var(--pi-mono, Consolas, monospace); font-variant-numeric: tabular-nums; white-space: nowrap; }
.piir-sim-ikkuna .sim-lm-muu { color: #9fb0ab; font: 600 12px/1.3 var(--pi-mono, Consolas, monospace); white-space: nowrap; }
.piir-sim-ikkuna .sim-lm-muutos { color: #9fb0ab; font-size: 12px; font-variant-numeric: tabular-nums; }
.piir-sim-ikkuna .sim-lm-tila { margin: 0; padding: 6px 9px; border-radius: 6px; background: rgba(47, 158, 110, 0.12); color: #9fd8b8; font-size: 12px; line-height: 1.4; }
.piir-sim-ikkuna .sim-lm-tila.sim-lm-halytys { background: rgba(208, 2, 27, 0.18); color: #ffb3b3; font-weight: 700; }
.piir-sim-ikkuna .sim-lm-tila.sim-lm-varoitus { background: rgba(240, 165, 0, 0.16); color: #ffd27a; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .piir-sim-ikkuna .sim-lm-pinta { transition: none; }
}

/* Trendin hälytysrajat säiliön värillä. */
.piir-sim-raja.piir-sim-raja-oma { stroke-opacity: 0.75; stroke-dasharray: 5 4; }
.piir-sim-kuvaaja[hidden], .piir-sim-kuvaaja-otsikko[hidden] { display: none; }

/* Opastusrivin prosessivihje (i): kokeile-vihje takaisin esiin. */
.piir-sim-opastus .piir-sim-vihje-nappi {
  flex: none; width: 24px; height: 24px; padding: 0; border: 1px solid #52646a; border-radius: 50%;
  background: #1a2427; color: #eef2ef; font: italic 700 13px/1 Georgia, serif; cursor: pointer;
}
.piir-sim-opastus .piir-sim-vihje-nappi:hover { border-color: #7d9199; }

/* ===== Vaihe 260b: HMI-piirto =====
   Simulaatio on valvomon prosessinäyttö (suunnitelma 260 luku 9,
   hmi-tutkimus luku 3): vaalea "HMI harmaa" oletuksena, tumma "Valvomo"
   valittavissa (body.hmi-tumma). Laitteet ovat litteitä, tila on täyttö
   (data-tila) ja sana, arvot 18 px:n arvokentissä, hälytykset P1–P3
   muotoina. Ei pillereitä, varjoja, hehkua, liukuvärejä eikä brändin
   oranssia prosessinäytössä tai sen palkissa. */
body.piir-nayttotila {
  --hmi-tausta: #D9DCDF; --hmi-paneeli: #E3E6E9; --hmi-paneeli-reuna: #C9CED3;
  --hmi-runko: #56606A; --hmi-sisus: #EEF0F2; --hmi-kiinni: #F1F3F5;
  --hmi-auki: #23894F; --hmi-auki-reuna: #17613A; --hmi-siirtyma: #7FBF9A;
  --hmi-linja: #6E7883; --hmi-tyhja: #A9B0B7; --hmi-signaali: #8A939C;
  --hmi-teksti: #262D34; --hmi-teksti2: #58616A;
  --hmi-arvo: #1D3F91; --hmi-arvo-tausta: #F3F4F6; --hmi-arvo-reuna: #A3AAB2;
  --hmi-p1: #D0202A; --hmi-p2: #E8A200; --hmi-p3: #F2D21B; --hmi-indikaattori-reuna: #1E2327;
  --hmi-opastus: #2F6BD8; --hmi-pois: #C4C9CE;
  --hmi-palkki: #1E2429; --hmi-palkki-reuna: #3A444C; --hmi-palkki-teksti: #E3E7EA;
  --hmi-viestirivi: #E6E9EC; --hmi-ikkuna: #FFFFFF; --hmi-ikkuna-otsake: #F6F7F8;
  --hmi-nappi: #FFFFFF; --hmi-nappi-painettu: #E4E7EA;
  --hmi-kayra1: #8A7250; --hmi-kayra2: #1D3F91; --hmi-kayra3: #7D6EA6; --hmi-kayra4: #3F76A8;
}
body.piir-nayttotila.hmi-tumma {
  --hmi-tausta: #262C32; --hmi-paneeli: #2D343B; --hmi-paneeli-reuna: #3A434C;
  --hmi-runko: #9CA7B1; --hmi-sisus: #2F363D; --hmi-kiinni: #454E57;
  --hmi-auki: #3FBF7C; --hmi-auki-reuna: #2A8A57; --hmi-siirtyma: #2C6E4B;
  --hmi-linja: #808B96; --hmi-tyhja: #4F5963; --hmi-signaali: #6D7782;
  --hmi-teksti: #E3E7EA; --hmi-teksti2: #A3ADB6;
  --hmi-arvo: #A9CBFF; --hmi-arvo-tausta: #1C2126; --hmi-arvo-reuna: #4C5661;
  --hmi-p1: #E5343D; --hmi-p2: #F2AE1C; --hmi-p3: #F5E11B; --hmi-indikaattori-reuna: #10151A;
  --hmi-opastus: #5B93F0; --hmi-pois: #3A4148;
  --hmi-viestirivi: #2D343B; --hmi-ikkuna: #2D343B; --hmi-ikkuna-otsake: #333B43;
  --hmi-nappi: #3A434C; --hmi-nappi-painettu: #1F252A;
  --hmi-kayra1: #B39B77; --hmi-kayra2: #A9CBFF; --hmi-kayra3: #9C8DC6; --hmi-kayra4: #5E9CD3;
}

/* Pohja: tasainen harmaa koko alueella, arkki ei erotu varjona. */
/* Generoitu tausta (SCADA, DCS …) jatkuu reunoille samalla sävyllä
   (--piir-sim-pohja: taustakuva.js piirSimKaariPohja, asettaa piirustus.js
   piirPiirra; korjaus 266, loppukorjaus 271). */
body.piir-nayttotila .piir-kanvas-kaari { background: var(--piir-sim-pohja, var(--hmi-tausta)); }
body.piir-nayttotila .piir-kanvas { box-shadow: none; }
/* Id-valitsin voittaa tumman teeman arkkivarjon (html[data-teema="tumma"]
   .piir-kanvas:not(.alusta-tumma)): arkki ei erotu simulaatiossa (korjaus 266). */
body.piir-nayttotila #piirKanvas.piir-kanvas { border-color: transparent; background: var(--hmi-tausta); box-shadow: none; }
/* Kaavio liukuu telakoidun ikkunan viereen (200 ms). */
body.piir-nayttotila .piir-kanvas-pito { transition: transform 0.2s ease; }
@media (prefers-reduced-motion: reduce) { body.piir-nayttotila .piir-kanvas-pito { transition: none; } }
body.piir-nayttotila .piir-sim-kerros .sim-yli-raja-pohja { stroke: none; }
body.piir-nayttotila .piir-sim-kerros .sim-yli-raja { stroke: var(--hmi-teksti2); stroke-width: 1; stroke-dasharray: 3 3; }
body.piir-nayttotila .piir-sim-kerros .sim-suihku { stroke-width: 2; stroke-dasharray: 4 4; opacity: 0.85; }
body.piir-nayttotila .piir-naytto-tiedot { display: none; }

/* Laitteet (symbols.js hmiOsanKuva): värit tunnuksista, tila data-tilasta. */
body.piir-nayttotila #piirKanvas .hmi-runko { fill: var(--hmi-sisus); stroke: var(--hmi-runko); }
body.piir-nayttotila #piirKanvas .hmi-viiva { stroke: var(--hmi-runko); }
body.piir-nayttotila #piirKanvas .hmi-putki,
body.piir-nayttotila #piirKanvas g.hmi-putki > * { stroke: var(--hmi-linja); }
body.piir-nayttotila #piirKanvas .hmi-signaali,
body.piir-nayttotila #piirKanvas g.hmi-signaali > * { stroke: var(--hmi-signaali); }
body.piir-nayttotila #piirKanvas .hmi-tayte { fill: var(--hmi-kiinni); stroke: var(--hmi-runko); }
body.piir-nayttotila #piirKanvas .hmi-kolmio { fill: none; stroke: var(--hmi-runko); }
body.piir-nayttotila #piirKanvas [data-tila="auki"] .hmi-tayte,
body.piir-nayttotila #piirKanvas [data-tila="kay"] .hmi-tayte,
body.piir-nayttotila #piirKanvas [data-tila="kuiva"] .hmi-tayte { fill: var(--hmi-auki); stroke: var(--hmi-auki-reuna); }
body.piir-nayttotila #piirKanvas [data-tila="kay"] .hmi-kolmio,
body.piir-nayttotila #piirKanvas [data-tila="kuiva"] .hmi-kolmio { fill: #fff; stroke: #fff; }
body.piir-nayttotila #piirKanvas [data-tila="pysahtyy"] .hmi-tayte { fill: var(--hmi-siirtyma); stroke: var(--hmi-auki-reuna); stroke-dasharray: 4 3; }
body.piir-nayttotila #piirKanvas [data-tila="pois"] .hmi-tayte { fill: var(--hmi-pois); stroke-dasharray: 3 2; }
body.piir-nayttotila #piirKanvas .hmi-nimi, body.piir-nayttotila #piirKanvas .hmi-teksti { fill: var(--hmi-teksti); }
body.piir-nayttotila #piirKanvas .hmi-koko { fill: var(--hmi-teksti2); }
/* Omat laitteet ja säiliöpajan säiliöt: oma kuva, HMI-ääriviivat. */
body.piir-nayttotila #piirKanvas .hmi-oma [stroke]:not([stroke="none"]):not([stroke="transparent"]) { stroke: var(--hmi-runko); }

/* Simulaatiokerros: neste aineen värillä, hillitty virtausraidoitus. */
.piir-sim-kerros .sim-sailio.hmi .sim-neste { opacity: 1; }
.piir-sim-kerros .sim-sailio.hmi .sim-pinta { stroke-width: 1; }
.piir-sim-kerros .sim-ydin.hmi { opacity: 1; }
.piir-sim-kerros .sim-virta.hmi { stroke: var(--hmi-sisus); opacity: 0.7; }
.piir-sim-kerros .sim-nuoli.hmi { stroke: none; }
.piir-sim-kerros .hmi-raja line { stroke: var(--hmi-teksti2); stroke-width: 1; }
.piir-sim-kerros .hmi-raja text { fill: var(--hmi-teksti2); font: 500 9.5px var(--pi-fontti, sans-serif); }
/* Vaihe 279 (katselmus): oman kuvan säiliön H/L luettavana varusteiden päällä. */
.piir-sim-kerros .hmi-raja.halo text { paint-order: stroke; stroke: var(--piir-sim-pohja, var(--hmi-tausta)); stroke-width: 2.6px; stroke-linejoin: round; }
.piir-sim-kerros .hmi-tavoite line { stroke: var(--hmi-opastus); stroke-width: 1.5; stroke-dasharray: 4 3; }
.piir-sim-kerros .hmi-tavoite text { fill: var(--hmi-opastus); font: 600 9.5px var(--pi-fontti, sans-serif); }
.piir-sim-kerros .hmi-siru rect { fill: #2B343B; }
.piir-sim-kerros .hmi-siru text { fill: #fff; font: 700 9px var(--pi-fontti, sans-serif); letter-spacing: 0.06em; }
body.piir-nayttotila.hmi-tumma .piir-sim-kerros .hmi-siru rect { fill: #E3E7EA; }
body.piir-nayttotila.hmi-tumma .piir-sim-kerros .hmi-siru text { fill: #1E2429; }
.piir-sim-merkkiviivat { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.piir-sim-merkkiviivat .hmi-signaaliviiva { stroke: var(--hmi-signaali); stroke-width: 1; stroke-dasharray: 3 3; }
.piir-sim-merkkiviivat .hmi-mittauspiste { fill: var(--hmi-runko); }

/* Arvokenttä ja tilasana pilleripainikkeen tilalla (tutkimus 3.6). */
.piir-valvomo.hmi .piir-valvomo-merkki.hmi-merkki {
  display: inline-grid;
  justify-items: start;
  row-gap: 2px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--hmi-teksti);
  font: 600 10.5px/1.2 var(--pi-fontti, sans-serif);
  letter-spacing: 0;
  white-space: nowrap;
  animation: none;
  transition: none;
  cursor: pointer;
}
.piir-valvomo.hmi .piir-valvomo-merkki.hmi-merkki::before,
.piir-valvomo.hmi .piir-valvomo-merkki.hmi-merkki::after { display: none; }
.piir-valvomo.hmi .piir-valvomo-merkki.hmi-merkki:hover { transform: translateX(-50%); box-shadow: none; }
.piir-valvomo.hmi .piir-valvomo-merkki.hmi-merkki:focus-visible { outline: 2px solid var(--hmi-opastus); outline-offset: 3px; }
.piir-valvomo.hmi .piir-valvomo-merkki.piir-valvomo-lukittu { border-style: none; cursor: pointer; }
.hmi-merkki .hmi-tunnus { display: inline-flex; align-items: center; gap: 4px; color: var(--hmi-teksti2); font-size: 10.5px; font-weight: 600; }
.hmi-merkki.hmi-tilamerkki { justify-items: center; }
.hmi-merkki.hmi-tilamerkki .hmi-tunnus { color: var(--hmi-teksti); font-size: 11px; }
.hmi-merkki .hmi-sana { color: var(--hmi-teksti2); font: 500 10px/1.2 var(--pi-fontti, sans-serif); letter-spacing: 0.03em; text-transform: uppercase; }
.hmi-merkki[data-prioriteetti="1"] .hmi-sana { color: var(--hmi-p1); font-weight: 600; }
.hmi-merkki .hmi-arvorivi { display: inline-flex; align-items: center; gap: 4px; }
.hmi-merkki .hmi-kentta {
  display: inline-flex; justify-content: flex-end; align-items: center; box-sizing: border-box;
  width: 58px; height: 18px; padding: 0 5px;
  border: 1px solid var(--hmi-arvo-reuna); border-radius: 2px; background: var(--hmi-arvo-tausta);
}
.hmi-merkki .hmi-kentta.levea { width: 72px; }
.hmi-merkki .hmi-arvo { color: var(--hmi-arvo); font: 500 13px/1 var(--pi-mono, Consolas, monospace); font-variant-numeric: tabular-nums; }
.hmi-merkki .hmi-yksikko { color: var(--hmi-teksti2); font: 400 11px/1 var(--pi-fontti, sans-serif); }
.hmi-merkki .hmi-toissijainen { color: var(--hmi-teksti2); font: 400 11px/1.2 var(--pi-mono, Consolas, monospace); font-variant-numeric: tabular-nums; }
.hmi-merkki[data-prioriteetti="1"] .hmi-kentta { border: 2px solid var(--hmi-p1); }
.hmi-merkki[data-prioriteetti="2"] .hmi-kentta { border: 2px solid var(--hmi-p2); }
.hmi-merkki[data-prioriteetti="3"] .hmi-kentta { border: 2px solid var(--hmi-p3); }
.hmi-merkki .hmi-ind-pito { display: inline-flex; margin-right: -1px; }
/* Lukko 9 × 11 px (lukittu harjoituksessa). */
.hmi-lukko {
  display: inline-block; flex: none; width: 9px; height: 11px; background: currentColor; font-style: normal;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cpath d='M2.2 5V3.4a2.3 2.3 0 0 1 4.6 0V5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Crect x='0.8' y='4.8' width='7.4' height='6' rx='1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cpath d='M2.2 5V3.4a2.3 2.3 0 0 1 4.6 0V5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Crect x='0.8' y='4.8' width='7.4' height='6' rx='1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hmi-merkki .hmi-lukko { color: var(--hmi-teksti2); }

/* Hälytysindikaattori (tutkimus 3.7): P1 neliö, P2 kolmio, P3 kolmio alas. */
.hmi-ind { display: block; flex: none; overflow: visible; }
.hmi-ind rect, .hmi-ind path { stroke: var(--hmi-indikaattori-reuna, #1E2327); stroke-width: 1; }
.hmi-ind text { font: 600 10px/1 var(--pi-fontti, sans-serif); fill: #1E2327; }
.hmi-ind.hmi-p1 rect { fill: var(--hmi-p1, #D0202A); }
.hmi-ind.hmi-p1 text { fill: #fff; font-size: 11px; }
.hmi-ind.hmi-p2 path { fill: var(--hmi-p2, #E8A200); }
.hmi-ind.hmi-p3 path { fill: var(--hmi-p3, #F2D21B); }
/* Laitteen hälytyskehys: suora 2 px, ei hehkua; vilkkuu 5 s, sitten pysyy. */
div.piir-valvomo-halytys.hmi {
  border: 2px solid var(--hmi-p1); border-radius: 0; background: none; box-shadow: none;
  animation: piir-hmi-vilkku 1s steps(1, end) infinite;
}
div.piir-valvomo-halytys.hmi.hmi-p2 { border-color: var(--hmi-p2); }
div.piir-valvomo-halytys.hmi.hmi-p3 { border-color: var(--hmi-p3); }
div.piir-valvomo-halytys.hmi.piir-valvomo-halytys-pysyva { animation: none; opacity: 1; }
div.piir-valvomo-halytys.hmi .hmi-ind { position: absolute; left: -10px; top: -10px; }
@keyframes piir-hmi-vilkku { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.25; } }

/* Opastusrengas: "tee tämä" (ei hälytys), sykkii kolmesti ja jää. */
.hmi-opastusrengas { position: absolute; box-sizing: border-box; border: 2px dashed var(--hmi-opastus); border-radius: 4px; pointer-events: none; }
.hmi-opastusrengas.sykkii { animation: hmi-opastus-syke 2s ease-in-out 3; }
@keyframes hmi-opastus-syke { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* Palkki (tutkimus 3.9): tumma neutraali, aktiivinen segmentti käänteinen,
   Poistu neutraali — oranssi on varattu muulle kuin prosessinäytölle. */
body.piir-nayttotila .piir-naytto-palkki { background: var(--hmi-palkki); border-bottom-color: var(--hmi-palkki-reuna); color: var(--hmi-palkki-teksti); }
body.piir-nayttotila .piir-naytto-palkki button { border-color: var(--hmi-palkki-reuna); color: var(--hmi-palkki-teksti); font-weight: 600; }
body.piir-nayttotila .piir-naytto-palkki button:hover { border-color: #8A949C; color: #fff; }
body.piir-nayttotila .piir-naytto-palkki button[aria-pressed="true"] { border-color: #8A949C; background: rgba(255, 255, 255, 0.1); color: #fff; }
body.piir-nayttotila .piir-naytto-palkki .piir-sim-kertoimet { border-color: var(--hmi-palkki-reuna); }
body.piir-nayttotila .piir-naytto-palkki .piir-sim-kertoimet button { border-left-color: var(--hmi-palkki-reuna); }
body.piir-nayttotila .piir-naytto-palkki .piir-sim-kertoimet button[aria-pressed="true"] { background: #E3E7EA; color: #1E2429; }
body.piir-nayttotila .piir-naytto-palkki .piir-naytto-pois { border-color: #5A646C; background: transparent; color: var(--hmi-palkki-teksti); }
body.piir-nayttotila .piir-naytto-palkki .piir-naytto-pois:hover { border-color: #C9D0D5; }
body.piir-nayttotila .piir-naytto-palkki .piir-naytto-nimi[aria-expanded="true"],
body.piir-nayttotila .piir-naytto-palkki .piir-sim-prosessi[aria-pressed="true"] { border-color: #8A949C; background: rgba(255, 255, 255, 0.08); }
body.piir-nayttotila .piir-sim-prosessi-merkki { padding: 1px 6px; border: 1px solid #6B757D; border-radius: 3px; background: none; color: #C9D0D5; font-size: 10.5px; letter-spacing: 0.04em; }
body.piir-nayttotila .piir-sim-kello { color: var(--hmi-palkki-teksti); font: 500 12.5px/1 var(--pi-mono, Consolas, monospace); }
body.piir-nayttotila .piir-naytto-palkki #piirNayttoKaikki[aria-pressed="true"] { border-color: #8A949C; background: rgba(255, 255, 255, 0.1); }
body.piir-nayttotila .piir-sim-valinta input { accent-color: var(--hmi-opastus); }
body.piir-nayttotila .piir-naytto-palkki .piir-naytto-halytykset {
  display: inline-flex; align-items: center; gap: 10px; min-height: 30px; padding: 0 10px;
  border: 1px solid var(--hmi-palkki-reuna); border-radius: 6px; background: rgba(255, 255, 255, 0.04); color: #fff; animation: none;
}
.piir-naytto-halytykset .hmi-laskuri { display: inline-flex; align-items: center; gap: 5px; font: 600 12.5px/1 var(--pi-mono, Consolas, monospace); }
.piir-sim-halytyslista li.hmi-halytysrivi { position: relative; padding-left: 30px; }
.piir-sim-halytyslista li.hmi-halytysrivi > .hmi-ind { position: absolute; left: 8px; top: 9px; }
/* Hälytyslista ja trendit HMI-paneeleina (ei hehkua eikä sumennusta). */
body.piir-nayttotila .piir-sim-trendi,
body.piir-nayttotila .piir-sim-halytyslista {
  border: 1px solid var(--hmi-paneeli-reuna); border-radius: 4px; background: var(--hmi-ikkuna); color: var(--hmi-teksti);
  box-shadow: 0 2px 8px rgba(30, 36, 41, 0.14);
}
body.piir-nayttotila .piir-sim-halytyslista li { border-left: 3px solid var(--hmi-p2); border-radius: 2px; background: var(--hmi-paneeli); }
body.piir-nayttotila .piir-sim-halytyslista li[data-prioriteetti="1"] { border-left-color: var(--hmi-p1); }
body.piir-nayttotila .piir-sim-halytyslista li[data-prioriteetti="3"] { border-left-color: var(--hmi-p3); }
body.piir-nayttotila .piir-sim-halytyslista li span,
body.piir-nayttotila .piir-sim-halytyslista p,
body.piir-nayttotila .piir-sim-trendi .piir-sim-kuvaaja-otsikko small { color: var(--hmi-teksti2); }
body.piir-nayttotila .piir-sim-trendi .piir-naytto-x,
body.piir-nayttotila .piir-sim-halytyslista .piir-naytto-x { color: var(--hmi-teksti2); }
body.piir-nayttotila .piir-sim-trendi-paa { background: var(--hmi-ikkuna); }
body.piir-nayttotila .piir-sim-trendi-paa span, body.piir-nayttotila .piir-sim-loki time { color: var(--hmi-teksti2); }
body.piir-nayttotila .piir-sim-kuvaaja { border-color: var(--hmi-paneeli-reuna); background: var(--hmi-paneeli); }
body.piir-nayttotila .piir-sim-loki { border-top-color: var(--hmi-paneeli-reuna); }
body.piir-nayttotila .piir-sim-loki li { color: var(--hmi-teksti); }
body.piir-nayttotila .piir-sim-trendi .sim-toinen { border: 1px solid var(--hmi-arvo-reuna); border-radius: 4px; background: var(--hmi-nappi); color: var(--hmi-teksti); }
.piir-sim-valikko .piir-sim-muut-taustat { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px 4px; border-top: 1px solid #2a3940; }
.piir-sim-valikko .piir-sim-muut-taustat[hidden] { display: none; }
.piir-sim-valikko .piir-sim-valikko-otsikko { flex: 1 0 100%; color: #93a5ad; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.piir-naytto-palkki .piir-sim-valikko .piir-sim-muut-taustat button { min-height: 28px; padding: 0 9px; border: 1px solid #3A444C; border-radius: 5px; font-size: 12px; }
.piir-naytto-palkki .piir-sim-valikko .hmi-vain-puhelin { display: none; }
/* Harjoituksen ajaksi (suunnitelma 8.2): Käynnistä/Pysäytä kaikki ratkaisisi
   tehtävän, Tausta ja Trendit ovat ⋯-valikossa. */
body.piir-nayttotila.harjoitus-kaynnissa .piir-naytto-palkki #piirNayttoKaikki,
body.piir-nayttotila.harjoitus-kaynnissa .piir-naytto-palkki #piirSimTausta,
body.piir-nayttotila.harjoitus-kaynnissa .piir-naytto-palkki #piirSimTrendit,
body.piir-nayttotila.harjoitus-kaynnissa .piir-naytto-palkki #piirSimKaikkiValikko { display: none; }
body.piir-nayttotila.harjoitus-kaynnissa .piir-naytto-palkki .piir-sim-valikko #piirSimTrenditValikko,
body.piir-nayttotila.harjoitus-kaynnissa .piir-naytto-palkki .piir-sim-valikko .piir-sim-muut-taustat .hmi-vain-puhelin { display: block; }
body.piir-nayttotila.harjoitus-kaynnissa .piir-naytto-palkki .piir-sim-valikko .piir-sim-muut-taustat .hmi-vain-puhelin { display: inline-block; }
/* Puhelin (tutkimus 3.10): palkki kahdella rivillä — nimi ja Poistu,
   sitten nopeus, kello ja ⋯; harvemmat napit ⋯-valikossa. */
@media (max-width: 640px) {
  body.piir-nayttotila .piir-naytto-palkki #piirNayttoKaikki,
  body.piir-nayttotila .piir-naytto-palkki #piirSimTrendit,
  body.piir-nayttotila .piir-naytto-palkki #piirSimTausta { display: none; }
  .piir-naytto-palkki .piir-sim-valikko .hmi-vain-puhelin:not([hidden]) { display: block; }
  .piir-naytto-palkki .piir-sim-valikko .piir-sim-muut-taustat .hmi-vain-puhelin { display: inline-block; }
  body.piir-nayttotila .piir-naytto-palkki > .piir-sim-prosessi-pito { order: 0; flex: 1 1 50%; }
  body.piir-nayttotila .piir-naytto-palkki > .piir-naytto-pois { order: 1; }
  body.piir-nayttotila .piir-naytto-palkki > .piir-naytto-halytykset { order: 2; }
  body.piir-nayttotila .piir-naytto-palkki > .piir-sim-ohjaus { order: 3; margin-left: 0; }
  body.piir-nayttotila .piir-naytto-palkki > .piir-sim-valikko-pito { order: 4; margin-left: auto; }
}

/* Viestirivi palkin alla (tutkimus 3.9): askel, edistyminen ja nykyinen
   ohje yhdellä rivillä; sama luokka harjoituksen viestiriville. */
.piir-sim-opastus.hmi-viestirivi,
.hmi-viestirivi {
  position: fixed; top: var(--naytto-palkki, 48px); left: 0; right: 0; z-index: 118;
  display: flex; align-items: center; gap: 12px; width: auto; max-width: none; min-height: 36px; margin: 0;
  padding: 4px 12px 4px 16px; border: 0; border-bottom: 1px solid var(--hmi-paneeli-reuna); border-radius: 0;
  background: var(--hmi-viestirivi); color: var(--hmi-teksti); font: 400 13px/1.35 var(--pi-fontti, sans-serif);
  transform: none; box-shadow: none;
}
.piir-sim-opastus.hmi-viestirivi { bottom: auto; }
.piir-sim-opastus.hmi-viestirivi span:not(.nyt):not(.hmi-viesti-askel):not(.hmi-viesti-palkki) { display: none; }
.piir-sim-opastus.hmi-viestirivi span.nyt { flex: 1; max-width: none; opacity: 1; color: var(--hmi-teksti); font-weight: 400; }
.piir-sim-opastus.hmi-viestirivi span.nyt b { display: none; }
.hmi-viestirivi .hmi-viesti-askel {
  flex: none; padding: 1px 6px; border: 1px solid var(--hmi-arvo-reuna); border-radius: 2px;
  background: var(--hmi-arvo-tausta); color: var(--hmi-arvo); font: 500 12px/1.3 var(--pi-mono, Consolas, monospace); opacity: 1;
}
.hmi-viestirivi .hmi-viesti-palkki { display: inline-flex; flex: none; gap: 3px; opacity: 1; }
.hmi-viestirivi .hmi-viesti-palkki i { width: 18px; height: 3px; border-radius: 1px; background: var(--hmi-arvo-reuna); }
.hmi-viestirivi .hmi-viesti-palkki i.tehty { background: var(--hmi-teksti); }
.hmi-viestirivi .hmi-viesti-palkki i.tehty:last-of-type,
.hmi-viestirivi .hmi-viesti-palkki i.tehty:not(:has(+ i.tehty)) { background: var(--hmi-opastus); }
.piir-sim-opastus.hmi-viestirivi .piir-naytto-x { color: var(--hmi-teksti2); }
.piir-sim-opastus.hmi-viestirivi .piir-sim-vihje-nappi { border-color: var(--hmi-arvo-reuna); background: var(--hmi-nappi); color: var(--hmi-teksti); }
/* Ilmoitukset vapaassa ajossa (Vaihe 260, integrointi): viestirivin
   paikalla eikä prosessin päällä — luku 8.2 "sama rivi näyttää muut
   ilmoitukset". Alareunan ilmoitus peitti kaavion alaosan. */
body.piir-nayttotila:not(.harjoitus-tila) .ilmo {
  top: var(--naytto-palkki, 48px); bottom: auto; left: 0; right: 0; z-index: 119; box-sizing: border-box;
  width: auto; max-width: none; min-height: 36px; justify-content: flex-start; text-align: left;
  padding: 8px 16px 8px 13px; border: 0; border-left: 3px solid var(--hmi-opastus); border-bottom: 1px solid var(--hmi-paneeli-reuna);
  border-radius: 0; background: var(--hmi-viestirivi); color: var(--hmi-teksti); box-shadow: none;
  font-size: 13px; line-height: 1.4; transform: translateY(-4px);
}
body.piir-nayttotila:not(.harjoitus-tila) .ilmo.nakyy { transform: none; }
body.piir-nayttotila:not(.harjoitus-tila) .ilmo.virhe { border-left-color: var(--hmi-p1); background: var(--hmi-viestirivi); color: var(--hmi-teksti); }

/* Laiteikkuna (tutkimus 3.8): 300 px, telakoitu, neutraalit komennot. */
.piir-naytto-ikkuna.hmi-ikkuna {
  width: min(300px, calc(100vw - 20px)); padding-bottom: 12px;
  border: 1px solid var(--hmi-paneeli-reuna); border-radius: 4px;
  background: var(--hmi-ikkuna); color: var(--hmi-teksti);
  box-shadow: 0 2px 8px rgba(30, 36, 41, 0.12);
}
.piir-naytto-ikkuna.hmi-ikkuna .piir-naytto-kahva {
  gap: 8px; min-height: 38px; padding: 6px 8px 6px 12px; border-bottom-color: var(--hmi-paneeli-reuna);
  border-radius: 4px 4px 0 0; background: var(--hmi-ikkuna-otsake); font-size: 13px;
}
.piir-naytto-ikkuna.hmi-ikkuna .piir-naytto-kahva b { flex: none; font-weight: 600; }
.piir-naytto-ikkuna.hmi-ikkuna .hmi-kuvaus { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hmi-teksti2); font-size: 11px; }
.piir-naytto-ikkuna.hmi-ikkuna .piir-naytto-x { color: var(--hmi-teksti2); }
.piir-naytto-ikkuna.hmi-ikkuna .piir-naytto-x:hover { color: var(--hmi-teksti); }
.piir-naytto-ikkuna.hmi-ikkuna .piir-naytto-otsikko { color: var(--hmi-teksti2); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }
.piir-naytto-ikkuna.hmi-ikkuna .piir-naytto-otsikko output,
.piir-naytto-ikkuna.hmi-ikkuna .sim-lukema output,
.piir-naytto-ikkuna.hmi-ikkuna .piir-valvomo-iso { color: var(--hmi-arvo); }
.piir-naytto-ikkuna.hmi-ikkuna .sim-lukema { color: var(--hmi-teksti2); }
.piir-naytto-ikkuna.hmi-ikkuna .sim-vihje, .piir-naytto-ikkuna.hmi-ikkuna .sim-ohjaus-tapa,
.piir-naytto-ikkuna.hmi-ikkuna .sim-mittauskohde, .piir-naytto-ikkuna.hmi-ikkuna .sim-yksikko { color: var(--hmi-teksti2); }
.piir-naytto-ikkuna.hmi-ikkuna .sim-syy { color: #8A5A00; }
body.piir-nayttotila.hmi-tumma .piir-naytto-ikkuna.hmi-ikkuna .sim-syy { color: #F2C66B; }
.piir-naytto-ikkuna.hmi-ikkuna input[type="text"],
.piir-naytto-ikkuna.hmi-ikkuna select {
  border: 1px solid var(--hmi-arvo-reuna); border-radius: 3px; background: var(--hmi-arvo-tausta); color: var(--hmi-teksti);
}
.piir-naytto-ikkuna.hmi-ikkuna input[type="range"] { accent-color: var(--hmi-runko); }
/* Liukusäädin litteänä: ei brändin oranssia prosessinäytön ikkunassa. */
.piir-naytto-ikkuna.hmi-ikkuna input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--hmi-arvo-reuna); box-shadow: none; }
.piir-naytto-ikkuna.hmi-ikkuna input[type="range"]::-webkit-slider-thumb {
  width: 16px; height: 16px; margin-top: -6px; border: 1.5px solid var(--hmi-runko); border-radius: 50%; background: var(--hmi-nappi); box-shadow: none; transform: none;
}
.piir-naytto-ikkuna.hmi-ikkuna input[type="range"]::-moz-range-progress { background: var(--hmi-runko); }
.piir-naytto-ikkuna.hmi-ikkuna input[type="range"]::-moz-range-thumb { border: 1.5px solid var(--hmi-runko); background: var(--hmi-nappi); box-shadow: none; }
.piir-naytto-ikkuna.hmi-ikkuna input[type="checkbox"] { accent-color: var(--hmi-runko); }
.piir-naytto-ikkuna.hmi-ikkuna .sim-iso { color: var(--hmi-arvo); }
.piir-naytto-ikkuna.hmi-ikkuna .sim-ennuste { color: var(--hmi-teksti2); }
.piir-naytto-ikkuna.hmi-ikkuna .sim-ennuste.varoitus { border-color: var(--hmi-p2); background: var(--hmi-paneeli); color: var(--hmi-teksti); }
.piir-naytto-ikkuna.hmi-ikkuna .piir-naytto-lohko.sim-lukittu { border-color: var(--hmi-arvo-reuna); background: var(--hmi-paneeli); color: var(--hmi-teksti); }
.piir-naytto-ikkuna.hmi-ikkuna .sim-lukittu span, .piir-naytto-ikkuna.hmi-ikkuna .sim-yli-tieto { color: var(--hmi-teksti2); }
.piir-naytto-ikkuna.hmi-ikkuna .sim-yli-lohko .piir-naytto-otsikko > output,
.piir-naytto-ikkuna.hmi-ikkuna .sim-yli-luku,
.piir-naytto-ikkuna.hmi-ikkuna .sim-yli-tieto b,
.piir-naytto-ikkuna.hmi-ikkuna .sim-pumppu-tila,
.piir-naytto-ikkuna.hmi-ikkuna .sim-ohjaus-tapa { color: var(--hmi-teksti); }
.piir-naytto-ikkuna.hmi-ikkuna .sim-pumppu-tila.halytys { color: var(--hmi-p1); }
.piir-naytto-ikkuna.hmi-ikkuna .sim-mittari { border-color: var(--hmi-runko); background: var(--hmi-sisus); }
.piir-naytto-ikkuna.hmi-ikkuna .sim-raja-rivi, .piir-naytto-ikkuna.hmi-ikkuna .sim-mittari-nimi { color: var(--hmi-teksti2); }
.piir-naytto-ikkuna.hmi-ikkuna .sim-takaisku, .piir-naytto-ikkuna.hmi-ikkuna .sim-tallentuu { color: var(--hmi-teksti2); }
.piir-naytto-ikkuna.hmi-ikkuna .sim-askel,
.piir-naytto-ikkuna.hmi-ikkuna .sim-segmentti button,
.piir-naytto-ikkuna.hmi-ikkuna .sim-napit button,
.piir-naytto-ikkuna.hmi-ikkuna .sim-pikat button,
.piir-naytto-ikkuna.hmi-ikkuna .sim-toinen,
.piir-naytto-ikkuna.hmi-ikkuna .sim-paa {
  border: 1px solid var(--hmi-arvo-reuna); border-radius: 4px; background: var(--hmi-nappi); color: var(--hmi-teksti); font-weight: 600;
}
.piir-naytto-ikkuna.hmi-ikkuna .sim-segmentti button[aria-pressed="true"] { background: var(--hmi-teksti); color: var(--hmi-ikkuna); }
.piir-naytto-ikkuna.hmi-ikkuna details summary { color: var(--hmi-teksti2); }
.piir-naytto-ikkuna.hmi-ikkuna .sim-lukittu { color: var(--hmi-teksti2); }
.hmi-tilarivi { display: flex !important; align-items: center; gap: 10px; }
.hmi-tilarivi b { font-size: 13px; font-weight: 600; letter-spacing: 0.03em; }
.hmi-tilarivi .hmi-tilarivi-lisa { margin-left: auto; color: var(--hmi-teksti2); font-size: 11px; }
.hmi-komennot { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
.piir-valvomo-komento {
  min-height: 36px; border: 1px solid var(--hmi-arvo-reuna); border-radius: 4px;
  background: var(--hmi-nappi); color: var(--hmi-teksti); font: 600 13px/1 var(--pi-fontti, sans-serif); cursor: pointer;
}
.piir-valvomo-komento:hover:not(:disabled) { border-color: var(--hmi-runko); }
.piir-valvomo-komento.on { background: var(--hmi-nappi-painettu); color: var(--hmi-teksti2); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12); cursor: default; }
.piir-valvomo-komento:disabled { opacity: 0.5; cursor: not-allowed; }
.hmi-mini { flex: none; overflow: visible; }
.hmi-mini .hmi-tayte { fill: var(--hmi-kiinni); stroke: var(--hmi-runko); }
.hmi-mini .hmi-kolmio { fill: none; stroke: var(--hmi-runko); }
.hmi-mini .hmi-runko { fill: var(--hmi-sisus); stroke: var(--hmi-runko); }
.hmi-mini[data-tila="auki"] .hmi-tayte, .hmi-mini[data-tila="kay"] .hmi-tayte, .hmi-mini[data-tila="kuiva"] .hmi-tayte { fill: var(--hmi-auki); stroke: var(--hmi-auki-reuna); }
.hmi-mini[data-tila="kay"] .hmi-kolmio, .hmi-mini[data-tila="kuiva"] .hmi-kolmio { fill: #fff; stroke: #fff; }
.hmi-mini[data-tila="pysahtyy"] .hmi-tayte { fill: var(--hmi-siirtyma); stroke: var(--hmi-auki-reuna); stroke-dasharray: 3 2; }
.hmi-mini-kirjain { flex: none; min-width: 22px; color: var(--hmi-teksti2); font: 500 12px/1 var(--pi-mono, Consolas, monospace); }
/* Telakointi: harjoituksen kiskossa staattinen, leveällä näytöllä
   oikeassa reunassa, puhelimella pohjalevy. */
.piir-naytto-ikkuna.hmi-ikkuna.kiskossa { position: static; width: auto; max-height: none; box-shadow: none; }
.piir-naytto-ikkuna.hmi-ikkuna.telakoitu:not(.kiskossa) { max-height: calc(100vh - var(--naytto-palkki, 48px) - 72px); }
.piir-naytto-ikkuna.hmi-ikkuna.levy {
  left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; max-height: 62vh;
  border-radius: 12px 12px 0 0; box-shadow: 0 -6px 24px rgba(30, 36, 41, 0.22);
}

/* Puhelin: laitelista yleiskuvan alla (DCS:n ryhmänäytön tapaan). */
.piir-naytto-laitelista {
  position: fixed; top: var(--laitelista-yla, 50vh); left: 0; right: 0; bottom: 0; z-index: 110;
  overflow-y: auto; overscroll-behavior: contain; background: var(--hmi-ikkuna); border-top: 1px solid var(--hmi-paneeli-reuna);
}
.piir-naytto-laitelista h2 {
  position: sticky; top: 0; z-index: 1; margin: 0; padding: 10px 14px 8px; background: var(--hmi-paneeli);
  color: var(--hmi-teksti2); font: 600 11px/1.2 var(--pi-fontti, sans-serif); letter-spacing: 0.06em; text-transform: uppercase;
}
.piir-laiterivi {
  display: grid; grid-template-columns: 30px auto 1fr auto; align-items: center; gap: 10px; width: 100%; min-height: 50px;
  padding: 0 14px; border: 0; border-bottom: 1px solid var(--hmi-paneeli-reuna); border-left: 3px solid transparent;
  background: none; color: var(--hmi-teksti); font: 400 13px/1.2 var(--pi-fontti, sans-serif); text-align: left; cursor: pointer;
}
.piir-laiterivi.opastus { border-left-color: var(--hmi-opastus); background: rgba(47, 107, 216, 0.07); }
.piir-laiterivi b { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.piir-laiterivi .piir-laiterivi-kuvaus { overflow: hidden; color: var(--hmi-teksti2); text-overflow: ellipsis; white-space: nowrap; }
.piir-laiterivi .piir-laiterivi-arvo { color: var(--hmi-arvo); font: 500 13px/1 var(--pi-mono, Consolas, monospace); text-align: right; }
.piir-laiterivi[data-tila]:not([data-tila=""]) .piir-laiterivi-arvo { color: var(--hmi-teksti); font-family: var(--pi-fontti, sans-serif); font-weight: 600; font-size: 12px; letter-spacing: 0.03em; }
.piir-laiterivi .hmi-lukko { color: var(--hmi-teksti2); }

/* Harjoituksen trendinauha (136 px) prosessin alla. */
.piir-sim-trendinauha {
  position: fixed; left: 16px; right: calc(var(--hmi-kisko, 0px) + 16px); bottom: 12px; z-index: 112; height: 136px; box-sizing: border-box;
  padding: 8px 12px 6px; border: 1px solid var(--hmi-paneeli-reuna); border-radius: 4px; background: var(--hmi-paneeli); color: var(--hmi-teksti);
}
.piir-sim-trendinauha .hmi-nauha-paa { display: flex; align-items: center; gap: 12px; font: 600 10.5px/1.2 var(--pi-fontti, sans-serif); letter-spacing: 0.05em; }
.piir-sim-trendinauha .hmi-nauha-selite { display: flex; gap: 14px; margin-left: auto; color: var(--hmi-teksti2); letter-spacing: 0; }
.piir-sim-trendinauha .hmi-nauha-selite span { display: inline-flex; align-items: center; gap: 5px; }
.piir-sim-trendinauha .hmi-nauha-selite i { width: 16px; height: 2px; }
.piir-sim-trendinauha .hmi-nauha-selite .tavoite i { height: 0; border-top: 2px dashed var(--hmi-opastus); }
.piir-sim-trendinauha .hmi-nauha-kuva { display: block; width: 100%; height: calc(100% - 20px); margin-top: 4px; }
.piir-sim-trendinauha polyline { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.piir-sim-trendinauha .hmi-nauha-ruutu { stroke: var(--hmi-paneeli-reuna); stroke-width: 1; vector-effect: non-scaling-stroke; }
.piir-sim-trendinauha .hmi-nauha-tavoite { stroke: var(--hmi-opastus); stroke-width: 1.2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.piir-sim-trendinauha .hmi-nauha-taysi { stroke: var(--hmi-teksti2); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.piir-sim-trendinauha .hmi-nauha-nyt { stroke: var(--hmi-teksti); stroke-width: 1.2; vector-effect: non-scaling-stroke; }

@media (prefers-reduced-motion: reduce) {
  .hmi-opastusrengas.sykkii, div.piir-valvomo-halytys.hmi { animation: none; }
}

/* ===== Vaihe 261: laitekortti, zoomaus ja supistuva trendinauha =====
   Markus 28.9.2026: oikean reunan laiteikkuna vei liikaa tilaa ja
   laitteet olivat liian pieniä. Laitteen ohjaus aukeaa nyt korttina
   laitteen vieressä (valvomo.js valvomoTelakoi): nuoli osoittaa
   laitteeseen, otsake pysyy, sisältö vierii, "Lisää asetuksia" avaa loput.
   Kaavio sovitetaan täyttämään alue (enintään ×3) ja − / + / Sovita
   säätävät sitä; aluetta suurempi kaavio vierii raahaten. Samat
   HMI-tunnukset, ei brändin oranssia, pillereitä eikä hehkua. */
.piir-naytto-ikkuna.hmi-ikkuna.hmi-kortti {
  display: flex; flex-direction: column; width: min(300px, calc(100vw - 20px)); padding-bottom: 0;
  overflow: visible; box-shadow: 0 6px 20px rgba(30, 36, 41, 0.18);
}
.piir-naytto-ikkuna.hmi-kortti .piir-naytto-kahva { position: static; flex: none; }
.hmi-kortti-sisus { flex: 1 1 auto; min-height: 0; padding-bottom: 12px; overflow-y: auto; overscroll-behavior: contain; }
/* Nuoli laitteen puoleisella reunalla: neliön kaksi reunaa 45°:n kulmassa. */
.piir-naytto-ikkuna.hmi-kortti::before {
  content: ''; position: absolute; display: none; width: 12px; height: 12px; box-sizing: border-box;
  background: var(--hmi-ikkuna); border: 1px solid var(--hmi-paneeli-reuna); border-width: 0 0 1px 1px; transform: rotate(45deg);
}
.piir-naytto-ikkuna.hmi-kortti[data-nuoli-otsake="1"]::before { background: var(--hmi-ikkuna-otsake); }
.piir-naytto-ikkuna.hmi-kortti[data-nuoli="vasen"]::before { display: block; left: -7px; top: calc(var(--nuoli-y, 24px) - 6px); }
.piir-naytto-ikkuna.hmi-kortti[data-nuoli="oikea"]::before { display: block; right: -7px; top: calc(var(--nuoli-y, 24px) - 6px); transform: rotate(225deg); }
.piir-naytto-ikkuna.hmi-kortti[data-nuoli="yla"]::before { display: block; top: -7px; left: calc(var(--nuoli-x, 24px) - 6px); transform: rotate(135deg); }
.piir-naytto-ikkuna.hmi-kortti[data-nuoli="ala"]::before { display: block; bottom: -7px; left: calc(var(--nuoli-x, 24px) - 6px); transform: rotate(315deg); }
/* Lisää asetuksia: loput lohkot saman kortin sisällä. */
.piir-naytto-ikkuna .hmi-lisaa { padding: 10px 0 0; }
.piir-naytto-ikkuna .hmi-lisaa > summary {
  display: flex; align-items: center; gap: 8px; margin: 0 10px; min-height: 32px; padding: 0 10px;
  border: 1px solid var(--hmi-arvo-reuna); border-radius: 4px; background: var(--hmi-nappi); color: var(--hmi-teksti);
  font: 600 12.5px/1.2 var(--pi-fontti, sans-serif); list-style: none; cursor: pointer; user-select: none;
}
.piir-naytto-ikkuna .hmi-lisaa > summary::-webkit-details-marker { display: none; }
.piir-naytto-ikkuna .hmi-lisaa > summary::before {
  content: ''; width: 6px; height: 6px; border: solid var(--hmi-teksti2); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); margin-right: 2px;
}
.piir-naytto-ikkuna .hmi-lisaa[open] > summary::before { transform: rotate(45deg); margin-top: -3px; }
.piir-naytto-ikkuna .hmi-lisaa > summary:hover { border-color: var(--hmi-runko); }
.piir-naytto-ikkuna .hmi-lisaa > summary:focus-visible { outline: 2px solid var(--hmi-opastus); outline-offset: 1px; }
.piir-naytto-ikkuna .hmi-lisaa-sisus { border-top: 1px solid var(--hmi-paneeli-reuna); margin-top: 10px; }
/* Zoomaus simulaation palkissa: − / + / Sovita samana segmenttinä kuin nopeus. */
.piir-sim-zoom { display: inline-flex; flex: none; border: 1px solid var(--hmi-palkki-reuna, #44575f); border-radius: 7px; overflow: hidden; }
.piir-naytto-palkki .piir-sim-zoom button { min-width: 34px; min-height: 30px; padding: 0 9px; border: 0; border-left: 1px solid var(--hmi-palkki-reuna, #2c3b41); border-radius: 0; font-size: 15px; }
.piir-naytto-palkki .piir-sim-zoom button:first-child { border-left: 0; }
.piir-naytto-palkki .piir-sim-zoom button[data-zoom="0"] { font-size: 12.5px; }
.piir-naytto-palkki .piir-sim-zoom button:disabled { opacity: 0.35; cursor: not-allowed; }
body.piir-nayttotila .piir-naytto-palkki .piir-sim-zoom button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.12); color: #fff; }
/* Aluetta suurempi kaavio vierii raahaten. */
body.piir-nayttotila .piir-kanvas-kaari.piir-naytto-vierii { cursor: grab; }
body.piir-nayttotila .piir-kanvas-kaari.piir-naytto-raahaa { cursor: grabbing; }
/* Trendinauha supistettuna otsikkoriviksi (oletus); nappi avaa käyrän. */
.piir-sim-trendinauha .hmi-nauha-nappi {
  display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: var(--hmi-teksti);
  font: inherit; letter-spacing: inherit; cursor: pointer;
}
.piir-sim-trendinauha .hmi-nauha-nappi:focus-visible { outline: 2px solid var(--hmi-opastus); outline-offset: 2px; }
/* Kosketusnäytöllä osuma-alue vähintään 44 px (korjaus 266): trendinauhan
   nappi läpinäkyvällä laajennuksella ja sekoittimen kierrosnopeuden
   liukuri korkeampana. Näyttöasu ennallaan. */
@media (pointer: coarse) {
  .piir-sim-trendinauha .hmi-nauha-nappi { position: relative; }
  .piir-sim-trendinauha .hmi-nauha-nappi::after { content: ''; position: absolute; inset: -16px -4px; }
  body.piir-nayttotila #simSekoitinNopeus { height: 44px; margin-top: 0; margin-bottom: 0; }
  /* Korjaus 271: vapaan simulaation Koko näyttö -napin osuma-alue (35 × 30 px). */
  .piir-naytto-palkki .piir-koko-nappi { position: relative; }
  .piir-naytto-palkki .piir-koko-nappi::after { content: ''; position: absolute; inset: -8px -4px; }
}
.piir-sim-trendinauha .hmi-nauha-nuoli { width: 6px; height: 6px; border: solid var(--hmi-teksti2); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); margin-top: -3px; }
.piir-sim-trendinauha.supistettu .hmi-nauha-nuoli { transform: rotate(-45deg); margin-top: 0; }
.piir-sim-trendinauha.supistettu { height: 32px; padding: 0 12px; }
.piir-sim-trendinauha.supistettu .hmi-nauha-paa { min-height: 30px; }
.piir-sim-trendinauha.supistettu .hmi-nauha-kuva { display: none; }
@media (max-width: 699px) {
  .piir-naytto-palkki .piir-sim-zoom { display: none; }
}
/* Vaihe 266: trendinauha oletuksena kokonaan piilossa (tavoiterivin
   Trendi-kieleke avaa, js/harjoitus.js), ei supistettua riviä. Koko näyttö
   -nappi simulaation palkissa: kuvake ja teksti, kapealla pelkkä kuvake. */
.piir-sim-trendinauha[hidden] { display: none; }
.piir-naytto-palkki .piir-koko-nappi { display: inline-flex; align-items: center; gap: 6px; }
.piir-naytto-palkki .piir-koko-nappi[hidden] { display: none; }
.piir-koko-kuvake { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Vihje väistyy ensin, jotta palkki pysyy yhdellä rivillä. */
body.piir-nayttotila .piir-naytto-palkki .piir-naytto-vihje { flex-basis: 0; }
/* Teksti näkyy ≥ 1260 px (omistajan 1279 px:n ruutu); alle 1400 px vihje
   (joka katkesi jo) väistyy, jotta palkki pysyy yhdellä rivillä. */
@media (max-width: 1399px) {
  body.piir-nayttotila .piir-naytto-palkki .piir-naytto-vihje { display: none; }
}
@media (max-width: 1259px) {
  .piir-naytto-palkki .piir-koko-nappi .piir-koko-teksti { display: none; }
}
@media (max-width: 640px) {
  body.piir-nayttotila .piir-naytto-palkki > .piir-koko-nappi { order: 3; }
}

/* Vaihe 281 (Markus 3.10.2026: "taustan vaihtaminen on ainakin puhelimella
   kolmen pisteen takana asetusvalikossa, se pitäisi muuttaa siten että
   käyttäjä yläreunaa vilkaisemalla ymmärtää heti että taustan voi
   vaihtaa"): Tausta-napissa kaksisävyinen kuvake kuten harjoituksen
   palkissa (värit css/koulutus.css), ja puhelimella nappi on palkin
   toisella rivillä kellon ja Koko näyttö -napin välissä (kuvake ja
   Tausta, kapeimmillaan pelkkä kuvake). HMI harmaa ja Valvomo ovat silloin
   napissa, joten "Lisää taustoja" näyttää puhelimellakin vain muut. */
.piir-naytto-palkki #piirSimTausta { display: inline-flex; align-items: center; gap: 6px; }
.piir-tausta-kuvake { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.piir-naytto-palkki .piir-sim-tausta-etu, .piir-naytto-palkki .piir-sim-tausta-vali { flex: none; }
.piir-naytto-palkki .piir-sim-tausta-vali { margin-left: -6px; }
.piir-naytto-palkki .piir-sim-tausta-nimi { min-width: 0; margin-left: -2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Alle 1440 px kuvake ja Tausta kuten harjoituksen palkissa (nimi
   vihjeessä): kuvake vei 20 px, ja 1279 px:n palkki rivittyi. */
@media (max-width: 1439px) {
  .piir-naytto-palkki #piirSimTausta .piir-sim-tausta-vali, .piir-naytto-palkki #piirSimTausta .piir-sim-tausta-nimi { display: none; }
}
@media (max-width: 640px) {
  body.piir-nayttotila .piir-naytto-palkki #piirSimTausta { display: inline-flex; order: 3; }
  .piir-naytto-palkki .piir-sim-tausta-vali, .piir-naytto-palkki .piir-sim-tausta-nimi { display: none; }
  .piir-naytto-palkki .piir-sim-valikko .piir-sim-muut-taustat .hmi-vain-puhelin { display: none; }
}
/* Kapein puhelin: nopeusnapit hieman tiiviimmin, jotta Tausta mahtuu
   tekstinä samalle riville. Pitkä käännös (Background, Hintergrund…)
   ei mahdu: kapealla puhelimella pelkkä kuvake (nimi aria-labelissa). */
@media (max-width: 374px) {
  .piir-naytto-palkki .piir-sim-ohjaus { gap: 6px; }
  .piir-naytto-palkki .piir-sim-kertoimet button { padding: 0 6px; }
}
@media (max-width: 420px) {
  html:not([lang="fi"]) .piir-naytto-palkki #piirSimTausta .piir-sim-tausta-etu { display: none; }
}

/* ===== Vaihe 260a: välilehdet, Pikakopio ja reititin =====
   Kolme välilehteä alarivein (≥ 1100 px): Pikakopio · Symboli
   leikepöydälle, Kaavio · Piirrä ja simuloi, Koulutus · Harjoitukset ja
   arviointi. Valittu välilehti: oranssi kuvake ja 3 px:n pyöristetty
   alaviiva. Puhelimella välilehdet ovat oma täysleveä rivinsä ilman
   alariviä (päävalikko aina näkyvissä). Simulaatio, Putkilinja ja
   Säiliöpaja ovat Kaavion työkalurivillä. */
.valilehti {
  position: relative;
  gap: 10px;
  padding: 0 16px;
  border-bottom-color: transparent;
  text-align: left;
}
.valilehti > .pi-ikoni { width: 19px; height: 19px; vertical-align: 0; color: #9fb0ba; transition: color var(--pi-siirtyma); }
.valilehti-nimi { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.2; }
.valilehti-nimi b { font-weight: 600; font-size: 14px; color: #f0f4f6; white-space: nowrap; }
.valilehti-nimi small { margin-top: 2px; font-size: 11.5px; font-weight: 400; color: var(--pi-palkki-himmea); white-space: nowrap; }
.valilehti:hover > .pi-ikoni { color: #fff; }
.valilehti:hover .valilehti-nimi small { color: #b7c3ca; }
.valilehti[aria-current="page"] {
  border-bottom-color: transparent;
  background: linear-gradient(180deg, rgba(255, 90, 0, 0) 0%, rgba(255, 90, 0, 0.08) 100%);
}
.valilehti[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--brandi);
}
.valilehti[aria-current="page"] > .pi-ikoni { color: var(--brandi); }
.ylapalkki .oikea,
.piir-ylapalkki .oikea { margin-left: auto; }
/* Kaavion palkissa on myös nimi ja työkalut: alarivit vasta leveällä. */
@media (max-width: 1359px) {
  .piir-ylapalkki .valilehti-nimi small { display: none; }
  .piir-ylapalkki .valilehti { padding: 0 12px; }
}
@media (max-width: 1099px) {
  .valilehti-nimi small { display: none; }
  .valilehti { padding: 0 12px; gap: 8px; }
}
@media (max-width: 640px) {
  .ylapalkki,
  .piir-ylapalkki { gap: 0 8px; }
  .ylapalkki .valilehdet,
  .piir-ylapalkki .valilehdet {
    order: 3;
    flex: 1 0 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 46px;
    margin: 0 -8px 0 -10px;
    border-top: 1px solid var(--pi-palkki-viiva);
  }
  .ylapalkki .valilehdet .valilehti,
  .piir-ylapalkki .valilehdet .valilehti { justify-content: center; padding: 0 6px; gap: 7px; }
  /* Omalla rivillä kuvakkeille on tilaa (css/koulutus.css piilottaa ne 641–900 px). */
  .ylapalkki .valilehdet .valilehti > .pi-ikoni,
  .piir-ylapalkki .valilehdet .valilehti > .pi-ikoni { display: inline-block; width: 17px; height: 17px; }
  .valilehti-nimi b { font-size: 14px; }
  .valilehti[aria-current="page"]::after { left: 14%; right: 14%; }
  .ylapalkki .oikea { padding: 7px 0; }
}

/* Pikakopion otsikko: mitä tapahtuu, kun napsautat. */
.kirjasto .ruudukko-otsikko .pk-otsikko {
  margin: 0;
  font-family: var(--pi-otsikkofontti);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--pi-teksti);
}
.kirjasto .ruudukko-otsikko #maara { font-size: 13px; color: var(--pi-himmea); }
@media (max-width: 640px) {
  .kirjasto .ruudukko-otsikko { gap: 4px 8px; }
  .kirjasto .ruudukko-otsikko .pk-otsikko { font-size: 17px; }
  .kirjasto .ruudukko-otsikko #maara { font-size: 12px; }
  .kirjasto .ruudukko-otsikko input#haku { margin-top: 6px; }
}

/* Kaavion kortti kopiointiasetusten alla. */
.pk-kaaviokortti {
  margin-top: auto;
  padding: 12px;
  border: 1px solid var(--pi-viiva);
  border-radius: 12px;
  background: #f7f9fa;
}
.pk-kaaviokortti b { display: block; font-size: 13.5px; color: var(--pi-teksti); }
.pk-kaaviokortti p { margin: 4px 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--pi-himmea); }
.pk-kaavionappi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 34px;
  border: 1px solid #c7d0d8;
  border-radius: 8px;
  background: #fff;
  color: var(--pi-teksti);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(23, 29, 31, 0.05);
}
.pk-kaavionappi:hover { border-color: #1e2830; }
.pk-kaavionappi:focus-visible { outline: 2px solid var(--brandi); outline-offset: 2px; }
html[data-teema="tumma"] .pk-kaaviokortti { background: #1f292e; }
html[data-teema="tumma"] .pk-kaavionappi { background: #222c31; border-color: var(--pi-viiva-2); color: var(--pi-teksti); }
html[data-teema="tumma"] .pk-kaavionappi:hover { border-color: #7f8d97; }
@media (max-width: 900px) {
  .pk-kaaviokortti { flex: 1 1 100%; margin-top: 0; }
}

/* Kopioitu kortti: vihreä reuna ja merkki kulmassa, ei koko kortin
   peittävää välähdystä. Kortin työkalut väistyvät merkin ajaksi. */
.kortti.kopioitu { border-color: #23894f; box-shadow: inset 0 0 0 1px #23894f; }
.kortti.kopioitu::after {
  content: attr(data-kopioitu);
  inset: auto;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  background: #23894f;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  pointer-events: none;
  animation: pk-kopioitu 0.18s ease-out;
}
.kortti.kopioitu .kortti-tyokalut { opacity: 0; }
@keyframes pk-kopioitu {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kortti.kopioitu::after { animation: none; }
}

/* Ilmoitus kopioinnista: nimi lihavoituna, näppäimet näppäiminä. */
.ilmo.ilmo-kopio { gap: 10px; padding: 10px 16px; border-radius: 10px; background: #1e2830; font-size: 13.5px; text-align: left; }
.ilmo.ilmo-kopio .ilmo-ok { color: #7fd3a4; stroke-width: 2.2; }
.ilmo.ilmo-kopio b { font-weight: 600; }
.ilmo.ilmo-kopio kbd {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: #2b3438;
  color: #fff;
  font-family: var(--pi-mono);
  font-size: 12px;
  font-weight: 500;
}
@media (max-width: 640px) {
  .ilmo.ilmo-kopio { left: 12px; right: 12px; width: auto; max-width: none; transform: translateY(70px); font-size: 12.5px; }
  .ilmo.ilmo-kopio.nakyy { transform: none; }
}

/* Kaavion työkalut (Putkilinja, Säiliöpaja, Valmiit prosessit): Putkilinja
   avautuu kaavion päälle (vierityksen lukitus: body.tyopoyta-auki). */
.tyopoyta-tausta { z-index: 90; }
/* Uudessa paikassa työkalut kertovat nimensä, kun rivillä on tilaa. */
@media (min-width: 1400px) {
  .piir-tyokalurivi .piir-tyokaluryhma .piir-ohje-nappi { gap: 6px; padding-left: 10px; padding-right: 11px; }
  .piir-tyokalurivi .piir-tyokaluryhma .piir-ohje-nappi .nappiteksti { display: inline; white-space: nowrap; }
}
/* Puhelimella työkalut ovat Muut-valikossa (js/viimeistely.js). */
.piir-tyokalurivi .piir-tyokaluryhma:not(:has(button)),
.piir-tyokalurivi .piir-erotin:has(+ .piir-tyokaluryhma:not(:has(button))) { display: none; }
/* Vaihe 269: taustakuvan viennit ja "Taustakuva mukaan" (js/taustakuva.js).
   Taustakuvaikkunassa Lataa PNG on ensisijainen koko leveydellä, ja
   Lataa SVG, Kopioi kuva ja Kopioi SVG-koodi ovat sen alla samalla rivillä,
   jotta ikkuna ei kasva vieritettäväksi. */
.piir-tk .piir-vienti-napit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.piir-tk .piir-vienti-napit .piir-pdf-lataa { grid-column: 1 / -1; }
.piir-vie-taustakuva {
  margin-top: 2px; padding: 6px 10px 2px; border-top: 1px solid var(--reunavari);
  font-size: 12.5px;
}
.piir-vienti-taustakuva { margin: 0 0 10px; }
.piir-vie-taustakuva[hidden], .piir-vienti-taustakuva[hidden] { display: none; }
html[data-teema="tumma"] .piir-vie-taustakuva { border-top-color: var(--pi-viiva-2); }
/* Puhelimella 2 × 2: neljä täysleveää nappia allekkain veivät tarttuvana
   palkkina neljänneksen näytöstä (loppukorjaus 269). */
@media (max-width: 520px) {
  .piir-tk .piir-vienti-napit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .piir-tk .piir-vienti-napit .piir-pdf-lataa { grid-column: auto; }
}
/* Matalalla näytöllä (1279 × 571) ikkunan sisältö on esikatselua
   korkeampi: vientinapit pysyvät ikkunan alareunassa näkyvissä eivätkä
   jää vierityksen taakse. Leveällä ruudulla kaikki neljä samalle riville. */
.piir-tk .piir-vienti-napit {
  position: sticky; bottom: -22px; z-index: 2;
  margin: 0 -22px -22px; padding: 10px 22px 14px;
  background: #fff; border-top: 1px solid var(--pi-viiva, #dbe2e9);
}
html[data-teema="tumma"] .piir-tk .piir-vienti-napit { background: #1c2529; border-top-color: var(--pi-viiva); }
@media (min-width: 760px) {
  .piir-tk .piir-vienti-napit { grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); }
  .piir-tk .piir-vienti-napit .piir-pdf-lataa { grid-column: auto; }
}

/* ===== Vaihe 273: kirjautumistunnus ja Hallinta yläpalkissa =====
   Tunnus (esim. sakky-o07, ei nimeä) on Kirjaudu ulos -linkin vieressä,
   jotta yhteiskäyttökoneella näkee, kenen tunnuksella ollaan sisällä.
   Alle 900 px tunnus piiloutuu, ja Hallinta (vain ylläpitäjä) on kapealla
   pelkkä kuvake kuten palkin muut napit. Opettajan osion merkinnät piiloon heti
   muilta rooleilta, ennen kuin js/kayttaja.js poistaa ne (staattinen
   koesivu; tuotannossa palvelin ei lähetä niitä). */
.ylapalkki .pi-tunnus {
  display: inline-flex; align-items: center; box-sizing: border-box; max-width: 18ch; min-height: 26px; padding: 0 10px;
  border: 1px solid var(--pi-palkki-viiva); border-radius: 999px; color: var(--pi-palkki-teksti);
  font-family: var(--pi-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default;
}
.ylapalkki .pi-tunnus:empty { display: none; }
.ylapalkki a.hallinta {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--pi-palkki-viiva); border-radius: 7px;
  color: var(--pi-palkki-teksti); font-size: 13px; font-weight: 500; text-decoration: none;
}
.ylapalkki a.hallinta:hover { color: #fff; background: rgba(255, 255, 255, 0.08); border-color: #46525a; }
.ylapalkki a.hallinta:focus-visible { outline: 2px solid var(--brandi); outline-offset: 2px; }
html:not([data-rooli="yllapitaja"]) #piHallintaLinkki { display: none !important; }
html[data-opettaja="0"] [data-opettajan-osio] { display: none !important; }
/* Palkki ei saa vuotaa sivun leveyden yli (1100–1210 px, myös iPad
   vaakana): Hallinta on pelkkä kuvake alle 1220 px ja pitkä tunnus
   lyhenee alle 1160 px. */
@media (max-width: 1219px) {
  .ylapalkki .oikea a.hallinta { font-size: 0; gap: 0; padding: 7px; line-height: 1; }
  .ylapalkki .oikea a.hallinta .pi-ikoni { width: 18px; height: 18px; vertical-align: 0; }
}
@media (max-width: 1159px) {
  .ylapalkki .pi-tunnus { max-width: 11ch; }
  /* Ylläpitäjällä on palkissa myös Hallinta: tunnus (aina yllapitaja) pois. */
  html[data-rooli="yllapitaja"] .ylapalkki .pi-tunnus { display: none; }
}
@media (max-width: 899px) {
  .ylapalkki .pi-tunnus { display: none; }
}

/* ===== Vaihe 280: opettajan rooli tunnuslaatassa =====
   Opettajan oikeuksilla laatassa on myös rooli (koe-e01 · Opettaja), jotta
   opettaja tunnistaa olevansa kirjautunut opettajana joka välilehdellä.
   Palvelin kirjoittaa roolin vain opettajan oikeuksilla (js/kayttaja.js
   poistaa sen koesivulla muilta). Opettajalla kapealla palkilla (alle
   1160 px) näkyy pelkkä rooli, myös puhelimella, jossa tunnus muuten
   piiloutuu; ylläpitäjällä laatta väistyy kapealla Hallinnan tieltä. */
.ylapalkki .pi-tunnus-nimi { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ylapalkki .pi-tunnus-rooli {
  display: inline-flex; flex: none; align-items: center; gap: 5px; margin-left: 8px; padding-left: 8px;
  border-left: 1px solid var(--pi-palkki-viiva); color: #ffb38a; font-family: var(--pi-fontti); font-weight: 600; letter-spacing: 0;
}
.ylapalkki .pi-tunnus-rooli .pi-ikoni { width: 14px; height: 14px; }
html[data-opettaja="1"] .ylapalkki .pi-tunnus { max-width: 32ch; }
@media (max-width: 1159px) {
  html[data-rooli="opettaja"] .ylapalkki .pi-tunnus { max-width: none; }
  html[data-rooli="opettaja"] .ylapalkki .pi-tunnus-nimi { display: none; }
  html[data-rooli="opettaja"] .ylapalkki .pi-tunnus-rooli { margin-left: 0; padding-left: 0; border-left: 0; }
}
@media (max-width: 899px) {
  html[data-rooli="opettaja"] .ylapalkki .pi-tunnus { display: inline-flex; padding: 0 9px; }
}

/* ---------- Pikakopio: Yhteet-valinta (Vaihe 277) ----------
   Rastirivi säädinlohkossa: otsikko on lohkon tavallinen label, rivi itse
   on tavallista tekstiä ilman versaaleja. */
.saadin > label.saadin-valinta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pi-teksti, #22303f);
  cursor: pointer;
}
.saadin-valinta input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex: none; cursor: pointer; }
html[data-teema="tumma"] .saadin > label.saadin-valinta { color: var(--pi-teksti); }
html[data-teema="tumma"] .saadin-huom { color: var(--pi-himmea, #9aa7b1); }