/* Layout: muistivihon aukeama. Vasemmalla ruutupaperinen kuvaajasivu säätimineen,
   oikealla laskut kuin marginaalimuistiinpanot, alla muistilista ja tehtävät.
   Puhelimessa (html.mobile) sama sisältö on sovellus: kuvaaja ylhäällä, välilehdet alhaalla. */

/* Fontit ovat sovelluksen mukana, jotta ne toimivat myös ilman verkkoyhteyttä (SIL OFL 1.1, ks. fonts/). */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/atkinson-next-latin-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/atkinson-next-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "STIX Two Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/stix-two-text-latin-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "STIX Two Text";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/stix-two-text-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "STIX Two Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/stix-two-text-greek-normal.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "STIX Two Text";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/stix-two-text-greek-italic.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

:root {
  color-scheme: light;
  /* Pinnat ja muste: vaalea "ruutupaperi" */
  --page: #eaeef3;
  --sheet: #fbfcfe;
  --sheet-2: #f2f5f9;
  --ink: #131922;
  --ink-2: #435063;
  --logo-tube: #1d3051;
  --muted: #647083;
  --hair: #d7dee8;
  --hair-strong: #b9c4d2;
  --note-bg: #eaf2fb; /* selitysten täyttöväri, reuna ja kuvake */
  --note-line: #c5d9ee;
  --note-ink: #2c6cb0;
  --plot-frame: #0c1110; /* kuvaajan kehys: kapea musta viiva erottaa kuvaajan taustasta */
  --pill: rgba(251, 252, 254, 0.92);
  /* Ruudukko ja akselit */
  --grid-minor: #e7ecf4;
  --grid-major: #d0d9e6;
  --axis: #29313d;
  /* Sarjavärit: funktio, tangentti ja derivaatta, sekantti (erottuvat myös värisokeille) */
  --c-f: #2a78d6;
  --c-d: #eb6834;
  --c-s: #1baf7a;
  /* Derivaatan merkki: aina symbolin (+, −, nuoli) kanssa */
  --c-pos: #0ca30c;
  --c-neg: #d03b3b;
  --pos-ink: #006300;
  --neg-ink: #a32424;
  --flat-ink: #7a5300;
  --d-ink: #a84a22;     /* derivoimatta oleva D( ), riittävä kontrasti tekstille */
  /* Painikkeet ja kohdistus */
  --btn: #131922;
  --btn-ink: #fbfcfe;
  --focus: #2a78d6;
  --shadow: 0 1px 2px rgba(19, 25, 34, 0.05), 0 10px 30px -12px rgba(19, 25, 34, 0.18);

  --font-ui: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-math: "STIX Two Text", "Cambria Math", Cambria, "Times New Roman", serif;
  --font-code: ui-monospace, "Cascadia Code", Consolas, monospace;

  --radius: 14px;
  --gutter: clamp(16px, 3vw, 36px);
  --thumb: 22px;
}

/* Tumma "liitutaulu" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0c1110;
    --sheet: #161c1b;
    --sheet-2: #1c2422;
    --ink: #e7eeeb;
    --ink-2: #b2bfb9;
    --logo-tube: #e7eeeb;
    --muted: #8a9892;
    --hair: #29332f;
    --hair-strong: #3c4843;
    --note-bg: #1a2832;
    --note-line: #2b4150;
    --note-ink: #7db3f0;
    --plot-frame: #aeb9b4; /* tummassa teemassa musta ei erottuisi: vaalea harmaa viiva */
    --pill: rgba(22, 28, 27, 0.92);
    --grid-minor: #1d2523;
    --grid-major: #2a3532;
    --axis: #c5d0cb;
    --c-f: #3987e5;
    --c-d: #d95926;
    --c-s: #199e70;
    --c-pos: #0ca30c;
    --c-neg: #d03b3b;
    --pos-ink: #5fd35f;
    --neg-ink: #ff8f8f;
    --flat-ink: #f0bb55;
    --d-ink: #f29a70;
    --btn: #e7eeeb;
    --btn-ink: #0c1110;
    --focus: #6aa7f0;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -12px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #0c1110;
  --sheet: #161c1b;
  --sheet-2: #1c2422;
  --ink: #e7eeeb;
  --ink-2: #b2bfb9;
  --logo-tube: #e7eeeb;
  --muted: #8a9892;
  --hair: #29332f;
  --hair-strong: #3c4843;
  --note-bg: #1a2832;
  --note-line: #2b4150;
  --note-ink: #7db3f0;
  --plot-frame: #aeb9b4;
  --pill: rgba(22, 28, 27, 0.92);
  --grid-minor: #1d2523;
  --grid-major: #2a3532;
  --axis: #c5d0cb;
  --c-f: #3987e5;
  --c-d: #d95926;
  --c-s: #199e70;
  --c-pos: #0ca30c;
  --c-neg: #d03b3b;
  --pos-ink: #5fd35f;
  --neg-ink: #ff8f8f;
  --flat-ink: #f0bb55;
  --d-ink: #f29a70;
  --btn: #e7eeeb;
  --btn-ink: #0c1110;
  --focus: #6aa7f0;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

/* ---------- Perusta ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 15px/1.55 var(--font-ui);
}
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.page { max-width: 1480px; margin: 0 auto; padding-inline: var(--gutter); padding-block: 14px 40px; }
.muted { color: var(--muted); }
/* Vain ruudunlukijalle */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Aiheet ----------
   html[data-topic] on valittu aihe. Elementti, jolla on data-topics="…", näkyy vain luetelluissa aiheissa.
   Uusi aihe tarvitsee tähän oman rivinsä. */
html[data-topic="derivaatta"] [data-topics]:not([data-topics~="derivaatta"]),
html[data-topic="raja-arvo"] [data-topics]:not([data-topics~="raja-arvo"]),
html[data-topic="integraali"] [data-topics]:not([data-topics~="integraali"]),
html[data-topic="funktiot"] [data-topics]:not([data-topics~="funktiot"]),
html[data-topic="yhtalot"] [data-topics]:not([data-topics~="yhtalot"]),
html[data-topic="napa"] [data-topics]:not([data-topics~="napa"]),
html[data-topic="koti"] [data-topics]:not([data-topics~="koti"]),
html[data-topic="tehtavat"] [data-topics]:not([data-topics~="tehtavat"]),
html[data-topic="tasavirta"] [data-topics]:not([data-topics~="tasavirta"]),
html[data-topic="sahkokentta"] [data-topics]:not([data-topics~="sahkokentta"]),
html[data-topic="magnetismi"] [data-topics]:not([data-topics~="magnetismi"]),
html[data-topic="varahtelyt"] [data-topics]:not([data-topics~="varahtelyt"]),
html[data-topic="sanasto"] [data-topics]:not([data-topics~="sanasto"]),
html[data-topic="kaavat"] [data-topics]:not([data-topics~="kaavat"]),
html[data-topic="saannot"] [data-topics]:not([data-topics~="saannot"]),
html[data-topic="osa-alueet"] [data-topics]:not([data-topics~="osa-alueet"]),
html[data-topic="mallit"] [data-topics]:not([data-topics~="mallit"]),
html[data-topic="suureet"] [data-topics]:not([data-topics~="suureet"]),
html[data-topic="lait"] [data-topics]:not([data-topics~="lait"]) { display: none !important; }

/* ---------- Matemaattinen typografia ---------- */
.m { font-family: var(--font-math); font-variant-numeric: lining-nums tabular-nums; }
.m i, i.m { font-style: italic; }
.m sup { font-size: 0.7em; line-height: 0; vertical-align: 0.55em; }
.m sup sup { vertical-align: 0.42em; }
.m .fn { font-style: normal; }
.frac {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  vertical-align: middle;
  text-align: center;
  margin: 0 0.12em;
  line-height: 1.25;
}
.frac > .nu { padding: 0 0.2em 0.08em; border-bottom: 1px solid currentColor; }
.frac > .de { padding: 0.08em 0.2em 0; }
.sqrt { white-space: nowrap; }
.sqrt .rad { border-top: 1px solid currentColor; padding: 0.04em 0.08em 0; margin-left: -0.02em; }
.sqrt:has(.frac) .rs { font-size: 1.55em; vertical-align: -0.12em; }
.sqrt .rad:has(.frac) { display: inline-block; padding-top: 0.08em; vertical-align: middle; }
.sqrt .rl-rootn { font-size: 0.62em; font-style: normal; vertical-align: 0.65em; margin-right: -0.18em; }
.lim { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1.05; }
.lim-sub { font-size: 0.62em; white-space: nowrap; }

/* ---------- Yläpalkki ja aihevalikko ---------- */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--hair-strong);
}
.brand { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 700 15px/1.2 var(--font-ui); }
.brand-logo { flex: none; width: 40px; height: 40px; }
.brand::after { content: ""; width: 1px; height: 22px; margin-left: 4px; background: var(--hair-strong); }
.topic-nav { position: relative; }
.topic-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 5px 11px 5px 8px;
  font: 700 16px/1.2 var(--font-ui);
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 10px;
  cursor: pointer;
}
.topic-btn:hover { background: var(--sheet-2); }
/* Painikkeen nimi on aina ryhmä (Matematiikka, Sähkötekniikka). Valittu aihe näkyy pienellä sen ryhmän nimen alla. */
.topic-name { display: grid; line-height: 1.1; text-align: left; }
.topic-cur { margin-top: 1px; font: 600 11px/1.15 var(--font-ui); color: var(--muted); }
.topic-btn .chev { flex: none; width: 15px; height: 15px; color: var(--ink-2); transition: transform 0.15s; }
.topic-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.topic-ico { flex: none; display: block; width: 24px; height: 24px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.topic-ico .ti-f { stroke: var(--c-f); }
.topic-ico .ti-d { stroke: var(--c-d); stroke-width: 1.8; }
.topic-ico .ti-s { stroke: var(--c-s); stroke-width: 1.8; }
.topic-ico .ti-dot { fill: var(--c-d); stroke: var(--sheet); stroke-width: 1.2; }
.topic-ico .ti-hole { fill: var(--sheet); stroke: var(--c-f); stroke-width: 1.8; }
.topic-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 6px);
  left: 0;
  width: max-content;
  max-width: min(400px, calc(100vw - 2 * var(--gutter)));
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 12px;
  box-shadow: var(--shadow), 0 18px 40px -20px rgba(0, 0, 0, 0.35);
  max-height: calc(100dvh - 90px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.topic-menu ul { margin: 0; padding: 0; list-style: none; }
.topic-menu li + li { margin-top: 2px; }
/* Matematiikka-valikossa aiheet ovat ryhmissä Matematiikka ja Yleistä tietoa, leveällä näytöllä rinnakkain.
   Sähkötekniikalla on oma valikkonsa (.topic-menu-single), jossa on yksi sarake. */
.tm-group + .tm-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--hair); }
.tm-group-h { margin: 6px 10px 6px; font: 700 11.5px/1.3 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
@media (min-width: 900px) {
  .topic-menu:not(.topic-menu-single) { display: grid; grid-template-columns: repeat(2, minmax(260px, 340px)); align-items: start; max-width: min(720px, calc(100vw - 2 * var(--gutter))); }
  .topic-menu:not(.topic-menu-single) .tm-group + .tm-group { margin-top: 0; padding-top: 0; padding-left: 6px; border-top: 0; border-left: 1px solid var(--hair); }
  /* Matematiikka-valikko: vasemmalla Yleistä tietoa, oikealla allekkain Tutki ja Harjoittele */
  .topic-menu:not(.topic-menu-single) .tm-group:nth-child(1):nth-last-child(3) { grid-row: 1 / span 2; }
  .topic-menu:not(.topic-menu-single) .tm-group:nth-child(2):nth-last-child(2) { grid-column: 2; grid-row: 1; }
  .topic-menu:not(.topic-menu-single) .tm-group:nth-child(3):nth-last-child(1) { grid-column: 2; grid-row: 2; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--hair); }
}
.topic-menu-single { width: 340px; }
.topic-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 12px 8px 10px;
  color: inherit;
  text-decoration: none;
  border-radius: 8px;
}
.topic-menu a:hover { background: var(--sheet-2); }
.topic-menu a:focus-visible { outline-offset: -2px; background: var(--sheet-2); }
.topic-menu a[aria-current="page"] { background: color-mix(in srgb, var(--c-f) 10%, var(--sheet)); }
.tm-text { flex: 1 1 auto; min-width: 0; }
.tm-name { display: block; font: 700 15px/1.3 var(--font-ui); }
.tm-desc { display: block; font-size: 13px; line-height: 1.35; color: var(--muted); }
.tm-desc .m { font-size: 14.5px; color: var(--ink-2); }
.tm-check { flex: none; width: 16px; height: 16px; color: var(--c-f); visibility: hidden; }
.topic-menu a[aria-current="page"] .tm-check { visibility: visible; }
/* Asetukset: hammasrattaan painike aihevalikon vieressä ja siitä avautuva valikko (teema) */
.settings-nav { position: relative; }
.settings-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--ink-2);
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 10px;
  cursor: pointer;
}
.settings-btn:hover, .settings-btn[aria-expanded="true"] { color: var(--ink); background: var(--sheet-2); }
.settings-btn svg, .sm-face svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.settings-btn svg { width: 22px; height: 22px; }
.settings-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 6px);
  left: 0;
  width: min(340px, calc(100vw - 2 * var(--gutter)));
  padding: 14px;
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 12px;
  box-shadow: var(--shadow), 0 18px 40px -20px rgba(0, 0, 0, 0.35);
}
.sm-title { margin: 0 0 10px; font: 700 15px var(--font-ui); }
.sm-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.sm-field legend { margin-bottom: 8px; padding: 0; font-size: 13.5px; color: var(--muted); }
.sm-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sm-tile { position: relative; display: block; cursor: pointer; }
.sm-tile input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sm-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 80px;
  padding: 10px 6px;
  text-align: center;
  font: 600 13px/1.25 var(--font-ui);
  color: var(--ink-2);
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 10px;
}
.sm-face svg { flex: none; width: 24px; height: 24px; }
.sm-tile:hover .sm-face { background: var(--sheet-2); }
.sm-tile input:checked + .sm-face {
  color: var(--ink);
  background: color-mix(in srgb, var(--c-f) 10%, var(--sheet));
  border-color: var(--c-f);
  box-shadow: 0 0 0 1px var(--c-f) inset;
}
.sm-tile input:focus-visible + .sm-face { outline: 2px solid var(--focus); outline-offset: 2px; }
.sm-field + .sm-field { margin-top: 16px; }
.set-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.set-opt { position: relative; display: block; cursor: pointer; }
.set-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.set-opt span {
  display: grid;
  place-items: center;
  min-height: 40px;
  font: 600 15px var(--font-ui);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 10px;
}
.set-opt:hover span { background: var(--sheet-2); }
.set-opt input:checked + span {
  color: var(--ink);
  background: color-mix(in srgb, var(--c-f) 10%, var(--sheet));
  border-color: var(--c-f);
  box-shadow: 0 0 0 1px var(--c-f) inset;
}
.set-opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.set-hint { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.set-hint b { font-weight: 600; color: var(--ink-2); white-space: nowrap; }
/* Kieli: lipun painike asetusten oikealla puolella ja siitä avautuva kielivalikko. Painikkeessa näkyy valitun kielen lippu. */
.lang-nav { position: relative; }
.lang-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 10px;
  cursor: pointer;
}
.lang-btn:hover, .lang-btn[aria-expanded="true"] { background: var(--sheet-2); }
.flag { flex: none; display: block; width: 24px; height: 16px; border-radius: 2px; outline: 1px solid var(--hair-strong); outline-offset: -1px; }
html[lang="en"] .lang-btn .flag-fi, html:not([lang="en"]) .lang-btn .flag-en { display: none; }
.lang-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 6px);
  left: 0;
  width: max-content;
  min-width: 210px;
  padding: 12px 6px 6px;
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 12px;
  box-shadow: var(--shadow), 0 18px 40px -20px rgba(0, 0, 0, 0.35);
}
.lang-menu .sm-title { margin: 0 10px 8px; }
.lang-menu ul { margin: 0; padding: 0; list-style: none; }
.lang-menu li + li { margin-top: 2px; }
.lang-menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  padding: 8px 12px 8px 10px;
  font: 600 15px/1.2 var(--font-ui);
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.lang-menu button:hover { background: var(--sheet-2); }
.lang-menu button:focus-visible { outline-offset: -2px; background: var(--sheet-2); }
.lang-menu button[aria-current="true"] { background: color-mix(in srgb, var(--c-f) 10%, var(--sheet)); }
.lang-menu button span { flex: 1 1 auto; }
.lang-menu button[aria-current="true"] .tm-check { visibility: visible; }
/* Englanniksi sivu näytetään vasta, kun kiinteät tekstit on käännetty (js/i18n.js). */
html.i18n-wait body { visibility: hidden; }
/* Muistilista: oma palkki asetusvalikon lopussa, avaa ikkunan #ref-dialog (kohta Käsitteet) */
.sm-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  margin-top: 16px;
  padding: 8px 10px 8px 12px;
  font: inherit;
  text-align: left;
  color: inherit;
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 10px;
  cursor: pointer;
}
.sm-link:hover { background: var(--sheet-2); }
.sm-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sm-link-ico { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; color: var(--focus); }
.sm-link-chev { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-2); }
/* Harjoittele- ja Käsitteet-painikkeet yläpalkin oikeassa reunassa. Käsitteet avaa ikkunan (kohta Käsitteet), Harjoittele
   pudotusvalikon, josta avataan Esimerkkejä- ja Tutki itse -ikkunat (kohta Harjoittele). */
.topbar-actions { display: flex; align-items: center; gap: 8px 14px; margin-left: auto; }
.practice-nav { position: relative; }
.info-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 5px 13px 5px 10px;
  font: 700 14.5px/1.2 var(--font-ui);
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 10px;
  cursor: pointer;
}
.info-btn:hover { background: var(--sheet-2); }
.info-btn svg { flex: none; width: 19px; height: 19px; color: var(--focus); }
.practice-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 5px 10px 5px 10px;
  font: 700 14.5px/1.2 var(--font-ui);
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 10px;
  cursor: pointer;
}
.practice-btn:hover, .practice-btn[aria-expanded="true"] { background: var(--sheet-2); }
.practice-btn .practice-ico { flex: none; width: 19px; height: 19px; color: var(--focus); }
.practice-btn .chev { flex: none; width: 14px; height: 14px; color: var(--ink-2); transition: transform 0.15s; }
.practice-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.practice-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 6px);
  right: 0;
  width: min(340px, calc(100vw - 2 * var(--gutter)));
  padding: 6px;
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 12px;
  box-shadow: var(--shadow), 0 18px 40px -20px rgba(0, 0, 0, 0.35);
}
.practice-menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px 8px 10px;
  font: inherit;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.practice-menu button + button { margin-top: 2px; }
/* Puhelimen Lisää-valikko (TopBar.astro, .more-nav): työpöydällä piilossa */
.more-nav { display: none; }
.more-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--ink-2);
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 10px;
  cursor: pointer;
}
.more-btn:hover, .more-btn[aria-expanded="true"] { color: var(--ink); background: var(--sheet-2); }
.more-btn svg { width: 22px; height: 22px; fill: currentColor; }
.practice-menu button:hover, .practice-menu button:focus-visible { background: var(--sheet-2); }
.practice-menu button:focus-visible { outline-offset: -2px; }

/* ---------- Otsikko ---------- */
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 48px;
  padding-block: 2px 22px;
}
.masthead-text { flex: 1 1 420px; min-width: 0; }
h1 {
  margin: 0;
  font: 600 clamp(40px, 5.6vw, 62px)/1 var(--font-math);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.lede { margin: 12px 0 0; max-width: 64ch; color: var(--ink-2); font-size: 16px; }
.definition {
  margin: 0;
  padding: 12px 18px 8px;
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 10px;
  max-width: 100%;
  overflow-x: auto;
}
.def-formula { display: flex; align-items: center; gap: 0.35em; font-size: clamp(18px, 2.3vw, 25px); white-space: nowrap; }
.def-iff { margin-inline: 0.3em; color: var(--ink-2); }
.definition figcaption {
  margin-top: 4px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

/* ---------- Asettelu ---------- */
.layout { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1040px) {
  .layout { grid-template-columns: minmax(0, 1fr) minmax(330px, 390px); }
}

/* Simulaattorinäkymän aihekokonaisuudet ovat omia leijuvia kortteja, ja korttien välissä näkyy sivun taustaväri.
   Vasemmalla ovat funktio, välivaiheet, kuvaaja säätimineen sekä kaaviot, oikealla laskupaneelin osat (.pane). */
.stage {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fn-block, .derived, .graph-card, .card-sub, .pane {
  padding: 16px 18px;
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.graph-card, .card-sub { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

/* ---------- Funktion syöttö ---------- */
.fn-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
/* Kortin otsikko (Tutkittava funktio, Funktion derivaatta): ruudukon väli riittää otsikon ja sisällön väliin */
.fn-block > .pane-title, .derived > .pane-title { margin: 0; }
/* Derivaatan heittomerkki (′) saa raon edeltävään kirjaimeen: kursivoidun f:n koukku osuisi siihen muuten.
   Merkin kääreen luo js/app.js (bindPrimes), ja kuvaajien tekstit käsitellään tiedostossa js/plot.js. */
.pr { margin-left: 0.14em; }
.fn-top { display: contents; } /* puhelimessa kiinteä yläpalkki */
.fn-row { display: flex; align-items: center; gap: 10px; }
.fn-label { font-size: 23px; white-space: nowrap; }
/* Merkinnän valinta: näkyvä f(x) ja sen päällä läpinäkyvä valikko, joka avaa laitteen oman valitsimen */
.fn-notation {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-right: -4px;
  padding: 1px 5px 1px 6px;
  border: 1px solid transparent;
  border-radius: 9px;
}
.fn-notation:hover { background: var(--sheet-2); border-color: var(--hair); }
.fn-notation:has(select:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.fn-sym { font-size: 23px; white-space: nowrap; }
.fn-notation .chev { flex: none; width: 13px; height: 13px; color: var(--muted); }
.fn-notation select {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  font-size: 16px; /* iOS ei zoomaa */
  cursor: pointer;
}
.m sub { font-size: 0.7em; line-height: 0; vertical-align: -0.25em; }
/* Derivaatan merkitys fysiikassa, esim. "kiihtyvyys a(t)" */
.d-meaning { margin-left: 6px; font: 14px/1.3 var(--font-ui); color: var(--muted); white-space: nowrap; }
.d-meaning .m { font-size: 16px; color: var(--ink-2); }
#fn-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  font: 21px/1.3 var(--font-math);
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 10px;
}
#fn-input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
#fn-input[aria-invalid="true"] { border-color: var(--neg-ink); }
.fn-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; }
.fn-status { margin: 0; min-height: 1.6em; font-size: 14px; color: var(--ink-2); }
.fn-status .m { font-size: 16px; color: var(--ink); }
.fn-status.is-error { color: var(--neg-ink); font-weight: 700; }
.fn-help { font-size: 13.5px; color: var(--ink-2); }
.fn-help summary { cursor: pointer; color: var(--muted); }
.fn-help ul { margin: 6px 0 0; padding-left: 18px; }
.fn-help code { font: 13px/1 var(--font-code); padding: 1px 4px; background: var(--sheet-2); border-radius: 4px; }
.icon-btn {
  flex: none;
  align-self: stretch;
  display: grid;
  place-items: center;
  width: 46px;
  min-height: 40px;
  padding: 0;
  color: var(--ink-2);
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 10px;
  cursor: pointer;
}
.icon-btn:hover { background: var(--sheet-2); color: var(--ink); }
.icon-btn svg { width: 20px; height: 20px; }

/* Merkkirivi kosketusnäytön näppäimistön tueksi (näkyy, kun lauseketta muokataan) */
.mathkeys {
  display: none;
  gap: 6px;
  padding: 1px 0 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.mathkeys::-webkit-scrollbar { display: none; }
@media (pointer: coarse) {
  .fn-top.is-editing .mathkeys { display: flex; }
}
.mathkeys button {
  flex: none;
  min-width: 44px;
  height: 40px;
  padding: 0 10px;
  font: 18px/1 var(--font-math);
  background: var(--sheet-2);
  border: 1px solid var(--hair);
  border-radius: 9px;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.mathkeys button:active { background: var(--hair); }
/* Funktion apupainikkeet: Esimerkkifunktiot ja Merkit ja funktiot -pudotusvalikot (js/app.js, bindFnTools) */
.fn-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.fn-pop { position: relative; }
.fn-tool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 4px 10px 4px 11px;
  font: 700 14px/1.2 var(--font-ui);
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 10px;
  cursor: pointer;
}
.fn-tool:hover, .fn-tool[aria-expanded="true"] { background: var(--sheet-2); }
.fn-tool svg { flex: none; width: 17px; height: 17px; color: var(--focus); }
.fn-tool .chev { width: 14px; height: 14px; color: var(--ink-2); transition: transform 0.15s; }
.fn-tool[aria-expanded="true"] .chev { transform: rotate(180deg); }
.fn-panel {
  display: none;
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  padding: 12px;
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 12px;
  box-shadow: var(--shadow), 0 18px 40px -20px rgba(0, 0, 0, 0.35);
}
.fn-panel.is-open { display: block; }
#presets-panel { width: min(520px, calc(100vw - 2 * var(--gutter))); }
#symbols-panel { width: min(540px, calc(100vw - 2 * var(--gutter))); }
.sym-h { margin: 0 0 6px; font: 700 11.5px/1.3 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
/* Painikkeen leveys seuraa tekstiä (arcsin, arccos, arctan), ja rivi rivittyy tarvittaessa */
.sym-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.sym-grid + .sym-h { margin-top: 12px; }
.sym-grid button {
  min-width: 48px;
  min-height: 40px;
  padding: 0 12px;
  font: 18px/1 var(--font-math);
  color: var(--ink);
  background: var(--sheet-2);
  border: 1px solid var(--hair);
  border-radius: 9px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.sym-grid button:hover { background: var(--hair); }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 5px 12px;
  font: 16px/1.25 var(--font-math);
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  cursor: pointer;
}
.chip:hover { background: var(--sheet-2); }
.chip[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.derived {
  container-type: inline-size; /* välivaiheiden asettelu laatikon leveyden mukaan */
  display: grid;
  gap: 8px;
}
.derived-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.derived-formula { margin: 0; font-size: 20px; }

/* Raja-arvo: kohta kirjoitetaan lim-merkinnän alle */
.limit-formula { display: inline-flex; align-items: center; gap: 0.3em; }
.lim-edit .lim-word { line-height: 1.15; }
.lim-edit .lim-sub { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 16px; }
#lim-at {
  width: 4.6em;
  padding: 1px 6px;
  font: 16px/1.3 var(--font-math); /* vähintään 16px: iOS ei zoomaa */
  text-align: center;
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 6px;
}
#lim-at:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
#lim-at[aria-invalid="true"] { border-color: var(--neg-ink); }
.lim-error { font: 700 13.5px/1.3 var(--font-ui); color: var(--neg-ink); }
.lim-none { font: 700 15px var(--font-ui); color: var(--ink-2); }
/* Raja-arvo äärettömyydessä: −∞- ja ∞-painike lim-merkinnän vieressä. html[data-lim="inf"] (js/app.js, syncLimMode)
   näyttää lim-inf-tekstit ja piilottaa lim-fin-tekstit. */
.lim-dir { display: inline-flex; gap: 4px; }
.lim-dir .btn { min-width: 42px; justify-content: center; padding: 4px 10px; font: 18px/1.1 var(--font-math); }
html:not([data-lim="inf"]) .lim-inf, html[data-lim="inf"] .lim-fin { display: none !important; }
html[data-lim="inf"] #btn-zoom { display: none !important; }
.steps-toggle { margin-left: auto; }
.steps-toggle svg { transition: transform 0.15s; }
.steps-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.rule { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.rule:empty { display: none; }
.rule .m { font-size: 15px; color: var(--ink); }

/* Derivointi vaiheittain: rivit tasataan =-merkin kohdalta, säännöt ovat info-painikkeen takana */
.dsteps {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 0.3em;
  padding-top: 8px;
  border-top: 1px dashed var(--hair-strong);
  overflow-x: auto;
}
.ds { display: contents; }
.ds-lhs, .ds-eq { font-size: 18px; line-height: 1.5; }
.ds-lhs { white-space: nowrap; }
.ds-row { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding-block: 2px; }
.ds-eq { min-width: 0; }
.ds.is-result .ds-eq { font-weight: 600; }
.dop { color: var(--d-ink); }
.ds-info {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px 2px 6px;
  font: 12.5px/1.35 var(--font-ui);
  text-align: left;
  color: var(--ink-2);
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  cursor: pointer;
}
.ds-info svg { flex: none; width: 15px; height: 15px; }
.ds-info .m { font-size: 14px; }
.ds-info:hover { color: var(--ink); background: var(--sheet-2); }
.ds-info[aria-expanded="true"] { color: var(--btn-ink); background: var(--btn); border-color: var(--btn); }
.ds-card { grid-column: 1 / -1; display: grid; gap: 6px; margin: 2px 0 8px; }
.rule-card {
  padding: 8px 12px 9px;
  font-size: 13.5px;
  color: var(--ink-2);
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--c-d);
  border-radius: 8px;
}
.rule-card p { margin: 0; }
.rule-card .m { color: var(--ink); }
.rule-card .rule-name { font-weight: 700; color: var(--ink); }
.rule-card .rule-formula { margin: 3px 0 4px; font-size: 17px; }
.rule-card .rule-here-title { margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.rule-here { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.rule-here .m { font-size: 16px; }
.rule-sub { display: block; font-size: 12.5px; color: var(--muted); }
.rule-card .rule-review { margin-top: 6px; font-size: 12.5px; color: var(--ink-2); }
.rule-review a { color: var(--ink); font-weight: 600; text-underline-offset: 0.15em; }
.ds-none { margin: 0; font-size: 13.5px; color: var(--muted); }
/* Selitysrivi (esim. sijoitus antaa 0/0) ja väliotsikko (vasemmalta / oikealta) koko leveydeltä */
.ds-note > .ds-row, .ds-head > .ds-row { grid-column: 1 / -1; }
.ds-text { flex: 1 1 auto; min-width: 0; }
.ds-note .ds-text { padding-left: 10px; font-size: 14px; color: var(--ink-2); border-left: 2px solid var(--hair-strong); }
.ds-head .ds-text { margin-top: 8px; font: 700 14px/1.45 var(--font-ui); }
.ds-note .m, .ds-head .m { font-size: 16px; color: var(--ink); }
/* Kapeassa laatikossa (puhelin) pelkkä info-kuvake rivin lopussa; säännön nimi jää ruudunlukijalle. */
@container (max-width: 540px) {
  .ds-row { flex-wrap: nowrap; align-items: center; }
  .ds-info { flex: none; justify-content: center; width: 36px; height: 36px; min-height: 0; padding: 0; }
  .ds-info svg { width: 19px; height: 19px; }
  .ds-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------- Säätimet ---------- */
.controls { display: grid; gap: 10px 20px; grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 760px) {
  .controls { grid-template-columns: minmax(0, 1fr) auto; }
}
.ctl-h { min-width: 0; display: grid; gap: 4px; }
.ctl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ctl-head label { font-size: 14.5px; font-weight: 700; }
.ctl-head .muted { font-weight: 400; }
.ctl-value { font: 19px var(--font-math); white-space: nowrap; }
.ctl-value .m { font-size: 19px; }
/* Arvo, jota napauttamalla voi kirjoittaa tarkan luvun */
.value-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 5px;
  margin: 0 -5px;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.value-btn:hover { background: var(--sheet-2); }
.value-btn .i-edit { flex: none; width: 13px; height: 13px; color: var(--muted); }
.mini { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 18px; font-size: 13.5px; color: var(--ink-2); }
.mini-item { display: inline-flex; align-items: center; gap: 6px; }
.mini .m { font-size: 15px; color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 6px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  font: 700 14px/1.1 var(--font-ui);
  white-space: nowrap;
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 10px;
  cursor: pointer;
}
.btn:hover { background: var(--sheet-2); }
.btn svg { width: 14px; height: 14px; flex: none; }
.btn[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.btn-small { padding: 5px 10px; font-size: 13px; }
.btn-primary, .btn-primary:hover { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: var(--thumb);
  margin: 0;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--hair-strong); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--hair-strong); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  box-sizing: border-box;
  width: var(--thumb);
  height: var(--thumb);
  margin-top: calc(2px - var(--thumb) / 2);
  border-radius: 50%;
  background: var(--thumb-color, var(--btn));
  border: 3px solid var(--sheet);
  box-shadow: 0 0 0 1px var(--hair-strong), 0 1px 4px rgba(0, 0, 0, 0.25);
}
input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 50%;
  background: var(--thumb-color, var(--btn));
  border: 3px solid var(--sheet);
  box-shadow: 0 0 0 1px var(--hair-strong), 0 1px 4px rgba(0, 0, 0, 0.25);
}
input[type="range"]:focus { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--focus); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--focus); }
#sl-h { width: 100%; --thumb-color: var(--c-s); }
#sl-a { --thumb-color: var(--c-d); }

/* ---------- Selite ja valinnat ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--ink-2); }
.legend-item, .toggle { display: inline-flex; align-items: center; gap: 7px; }
.toggle { cursor: pointer; user-select: none; }
.toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--btn); cursor: pointer; }
.key { display: inline-block; flex: none; width: 20px; height: 0; border-top: 3px solid; border-radius: 2px; }
.key-f { border-color: var(--c-f); }
.key-d { border-color: var(--c-d); }
.key-s { border-color: var(--c-s); border-top-style: dashed; }
.key-l { border-color: var(--ink-2); border-top-style: dashed; border-top-width: 2px; }
.key-pt { width: 10px; height: 10px; margin-inline: 5px; border: 0; border-radius: 50%; background: var(--c-s); }

/* ---------- Kuvaajat ---------- */
.plot { position: relative; overflow: hidden; border: 1px solid var(--plot-frame); border-radius: 8px; }
.plot canvas { display: block; width: 100%; height: 100%; touch-action: pan-y pinch-zoom; }
.plot-f canvas { touch-action: pan-y; } /* kahden sormen nipistys zoomaa kuvaajaa, ei sivua */
.graph-dock { display: contents; }      /* puhelimessa kuvaajan osat kootaan telakkaan (html.mobile) */
.plot canvas.is-dragging, .plot canvas.is-panning { cursor: grabbing !important; }
.plot-f { height: clamp(280px, 46vh, 560px); }
.plot-s { height: 80px; }
.plot-d { height: clamp(160px, 24vh, 290px); }
.plot-tag {
  position: absolute;
  left: 10px;
  top: 8px;
  max-width: calc(100% - 64px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  font-size: 17px;
  background: var(--pill);
  border: 1px solid var(--hair);
  border-radius: 8px;
  pointer-events: none;
}
.zoom-tools { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 4px; }
.zoom-tools button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--pill);
  border: 1px solid var(--hair-strong);
  border-radius: 8px;
  cursor: pointer;
}
.zoom-tools button:hover { background: var(--sheet-2); }
.zoom-tools svg { width: 16px; height: 16px; }
.full-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: inherit;
  background: var(--pill);
  border: 1px solid var(--hair-strong);
  border-radius: 8px;
  cursor: pointer;
}
.full-btn:hover { background: var(--sheet-2); }
.full-btn svg { width: 16px; height: 16px; }
.zoom-note {
  position: absolute;
  left: 10px;
  bottom: 10px;
  max-width: min(460px, calc(100% - 20px));
  margin: 0;
  padding: 6px 10px;
  font-size: 13.5px;
  background: var(--pill);
  border: 1px solid var(--hair);
  border-radius: 8px;
  pointer-events: none;
}
.wheel-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--btn-ink);
  background: var(--btn);
  border-radius: 10px;
  pointer-events: none;
}

/* Kohdan a säädin on tasattu x-akselin kanssa: peukalo on aina pisteen P alla. */
.slider-a {
  position: relative;
  margin-inline: calc(1px - var(--thumb) / 2);
  margin-top: -8px;
  padding-bottom: 28px;
}
.slider-a input { display: block; width: 100%; }
.bubble {
  position: absolute;
  top: calc(var(--thumb) + 3px);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0 8px;
  font-size: 16px;
  white-space: nowrap;
  background: var(--sheet);
  border: 1px solid var(--c-d);
  border-radius: 6px;
}
.bubble:hover { background: var(--sheet-2); }
.bubble .i-edit { width: 12px; height: 12px; }
.bubble.is-out { opacity: 0.55; }

/* Puhelimen osat, jotka eivät näy työpöytäasettelussa */
.readout, .dock-ctl, .dock-side, .gesture-hint, .m-head, .tabbar, .hint .for-mobile { display: none; }
.dock-sliders { display: contents; }

.sub-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: -6px; }
.sub-head h2 { margin: 0; font: 700 14.5px var(--font-ui); }
.sub-head p { margin: 0; font-size: 13.5px; color: var(--muted); }
.sub-tools { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-2); }
.hint { margin: 0; font-size: 13.5px; color: var(--muted); }

/* ---------- Laskupaneeli ---------- */
.panel { min-width: 0; display: grid; gap: 16px; }
.pane-title { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font: 700 15px var(--font-ui); }
.pane-lede { margin: -4px 0 10px; font-size: 13.5px; color: var(--muted); }
.pane-note { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-2); }
.pane-note .m { color: var(--ink); font-size: 15px; }
.big-value { margin: 0 0 10px; font-size: 34px; line-height: 1.15; }
.big-note { font: 700 16px var(--font-ui); color: var(--ink-2); }
/* Raja-arvo voi olla murtoluku (kaksi riviä): tila on aina varattu, jotta kortti ei hypi, kun a:ta liikutetaan */
#l-big { display: flex; align-items: center; min-height: 2.7em; }
.verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  font-size: 14px;
  background: var(--sheet-2);
  border-radius: 10px;
}
.verdict > .slot { flex: 1 1 100%; }
.vrow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; }
.verdict > span:last-child, .vrow > span:last-child { flex: 1 1 200px; }
.verdict .m { font-size: 16px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  font: 700 13px/1.3 var(--font-ui);
  white-space: nowrap;
  border: 1px solid;
  border-radius: 999px;
}
.badge svg { width: 14px; height: 14px; }
.badge-up, .badge-ok, .badge-asym { color: var(--pos-ink); border-color: color-mix(in srgb, var(--c-pos) 50%, transparent); background: color-mix(in srgb, var(--c-pos) 12%, var(--sheet)); }
.badge-down { color: var(--neg-ink); border-color: color-mix(in srgb, var(--c-neg) 50%, transparent); background: color-mix(in srgb, var(--c-neg) 10%, var(--sheet)); }
.badge-flat, .badge-hole { color: var(--flat-ink); border-color: color-mix(in srgb, var(--flat-ink) 45%, transparent); background: color-mix(in srgb, var(--flat-ink) 10%, var(--sheet)); }
.badge-none, .badge-inf { color: var(--ink-2); border-color: var(--hair-strong); background: var(--sheet); }
.big-value .lim-none { font-size: 16px; }

.facts { margin: 0; display: grid; }
.facts > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 12px;
  padding: 6px 0;
  border-top: 1px dashed var(--hair);
}
.facts dt { font-size: 13.5px; color: var(--muted); }
.facts dd { margin: 0; font-size: 15px; text-align: right; }
.facts .m { font-size: 17px; }
.facts .fact-wide dd { flex-basis: 100%; text-align: left; font-size: 14px; color: var(--ink-2); }
.facts .fact-wide .m { font-size: 16px; color: var(--ink); }

.steps { display: grid; gap: 6px; }
.step { margin: 0; font-size: 14px; color: var(--ink-2); }
.step .m { font-size: 18px; color: var(--ink); }
.step.is-general .m { color: var(--ink-2); }
.step.is-result .m { font-weight: 600; }
.step.is-note { font-size: 13px; color: var(--muted); }
.step.is-note .m { font-size: 15px; }
.calc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 18px; }
.calc .is-result { font-weight: 600; }
.dq-pts { display: grid; gap: 2px; }   /* Q, Δx ja Δy allekkain */
/* Vaihtoehtoiset sisällöt samassa ruudukon solussa: solun korkeus on korkeimman vaihtoehdon korkeus (ks. slot, app.js) */
.slot { display: grid; }
.slot > * { grid-area: 1 / 1; min-width: 0; }
.slot-ghost, .is-ghost { visibility: hidden; pointer-events: none; user-select: none; }
.compare { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-2); }
.compare .m { font-size: 16px; line-height: 1; color: var(--ink); }   /* ei kasvata rivin korkeutta, jolloin kappaleen korkeus ei riipu rivityksestä */

.lim-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lim-table caption { caption-side: top; padding-bottom: 6px; text-align: left; font-size: 13px; color: var(--muted); }
.lim-table th, .lim-table td { padding: 0; text-align: right; border-bottom: 1px solid var(--hair); }
.lim-table thead th { padding: 4px 6px; font: 700 13px var(--font-ui); color: var(--muted); }
.lim-table tbody th { padding: 4px 6px; font: 15px var(--font-math); color: var(--ink-2); }
.lim-table .is-na { padding: 8px 6px; text-align: left; color: var(--muted); }
.lim-btn {
  width: 100%;
  padding: 5px 6px;
  font: 15.5px var(--font-math);
  font-variant-numeric: lining-nums tabular-nums;
  text-align: right;
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.lim-btn:hover { background: var(--sheet-2); }
.lim-btn.is-active {
  background: color-mix(in srgb, var(--c-s) 16%, var(--sheet));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-s) 60%, transparent);
}
.lim-table tfoot th, .lim-table tfoot td { padding: 7px 6px; border-bottom: 0; }
.lim-table tfoot th { font: 700 13px var(--font-ui); color: var(--muted); }
.lim-table tfoot td .m { font-size: 16px; font-weight: 600; }

.crit-list { margin: 0 0 10px; padding: 0; list-style: none; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 6px 12px; align-items: baseline; }
.crit-list li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; font-size: 14px; }
.crit-list li.muted { display: block; }
.crit-list .tag { justify-self: start; }
.crit-list .m { font-size: 16px; }
.crit-v { white-space: nowrap; }
.tag {
  display: inline-block;
  padding: 1px 8px;
  font: 700 12px/1.5 var(--font-ui);
  color: var(--ink-2);
  background: var(--sheet-2);
  border: 1px solid var(--hair);
  border-radius: 6px;
}
.tag-max, .tag-min { color: var(--ink); border-color: var(--hair-strong); }
.mono { margin: 0; font-size: 14px; color: var(--ink-2); }
.mono-list { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: baseline; }
.mono-list dt, .mono-list dd { margin: 0; }
.mono-iv { white-space: nowrap; }
.mono-none { margin: 0; }
.mono .m { font-size: 16px; color: var(--ink); }
.mono-up { color: var(--pos-ink); font-weight: 700; }
.mono-down { color: var(--neg-ink); font-weight: 700; }

/* ---------- Integraali ja funktiot (js/sim-integraali.js, js/sim-funktiot.js) ---------- */
/* Integraalimerkki rajoineen (∫ ja rajat pinottuina sen oikealle puolelle) sekä sijoitusmerkintä [F(x)]ₐᵇ */
.int { display: inline-flex; align-items: stretch; vertical-align: middle; margin-right: 0.1em; line-height: 1; }
.int-s { align-self: center; font-size: 1.6em; line-height: 1; }
.int-lims { display: inline-flex; flex-direction: column; justify-content: space-between; margin-left: -0.05em; font-size: 0.6em; line-height: 1; }
.int-lims > span:first-child { margin-top: -0.55em; }
.int-lims > span:last-child { margin-bottom: -0.65em; }
.int-lims-bar { vertical-align: middle; margin-left: 0.05em; }
.ebar { white-space: nowrap; }
.iop { font-size: 1.3em; line-height: 1; vertical-align: -0.12em; }
.sig { display: inline-flex; align-items: center; }
.sig-s { font-size: 1.4em; line-height: 1; }
.big-value .int-lims { font-size: 0.5em; }

/* Integraalin rajat ja suorakulmioiden korkeus säätimissä */
.irow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.irow-h { margin-right: 4px; font-size: 14.5px; font-weight: 700; }
.seg { min-width: 0; margin: 0; padding: 0; border: 0; }
.seg legend { margin-bottom: 6px; padding: 0; font-size: 14.5px; font-weight: 700; }
.seg-opts .set-opt span { min-height: 36px; padding: 4px 6px; font-size: 13.5px; text-align: center; }
@media (max-width: 560px) {
  .seg-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg-small .seg-opts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.seg-small { margin-bottom: 8px; }
.seg-small legend { font-size: 13px; color: var(--muted); }

/* Funktion muunnoksen kertoimet: otsikko, arvo, liukusäädin ja animaatiopainike riveittäin */
.fpar, .npar, .fcmp { grid-column: 1 / -1; }
.fpar, .npar { display: grid; gap: 8px; }
.fpar-h { margin: 0; font-size: 14.5px; font-weight: 700; }
.fpar-h .m { margin-left: 6px; font-weight: 400; font-size: 17px; }
.fpar-row { display: grid; grid-template-columns: minmax(0, 11em) auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; }
.fpar-row label { font-size: 14px; }
.fpar-row label .m { font-size: 17px; }
.fpar-row .ctl-value { min-width: 5.2em; }
.fpar-row input[type="range"] { width: 100%; --thumb-color: var(--c-f); }
/* Kapealla: nimi ja arvo samalla rivillä, liukusäädin ja animaatiopainike sen alla */
@media (max-width: 560px) {
  .fpar-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
}
.fpar-play, .npar-play { width: 34px; min-height: 34px; padding: 0; display: grid; place-items: center; }
.fpar-play svg, .npar-play svg { width: 12px; height: 12px; }
.fpar-play[aria-pressed="true"], .npar-play[aria-pressed="true"] { color: var(--btn-ink); background: var(--btn); border-color: var(--btn); }
#fpar-reset, #npar-reset { justify-self: start; }
#fpar-reset:disabled, #npar-reset:disabled { opacity: 0.5; cursor: default; }
/* Napakoordinaatit (src/scripts/sim-napa.js): funktiorivin merkintä on aina r(θ), joten merkinnän vaihto ei ole käytössä */
html[data-topic="napa"] .fn-notation .chev { display: none; }
html[data-topic="napa"] .fn-notation select { pointer-events: none; }
html[data-topic="napa"] .fn-notation:hover { background: none; border-color: transparent; }
.npar .fpar-row input[type="range"] { --thumb-color: var(--c-f); }
/* Vertailufunktio g(x) */
.fcmp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.fcmp-row { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; font-size: 19px; }
#g-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 10px;
  font: 18px/1.3 var(--font-math);
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 9px;
}
#g-input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
#g-input[aria-invalid="true"] { border-color: var(--neg-ink); }
.fcmp .fn-status { flex-basis: 100%; min-height: 0; }
.fcmp .fn-status:empty { display: none; }

/* Selitteen värimerkit: alue, suorakulmio, alkuperäinen funktio (katkoviiva) ja yhtenäinen vertailufunktio */
.key-area { height: 10px; border: 0; border-radius: 3px; background: color-mix(in srgb, var(--c-f) 22%, transparent); }
.key-rect { height: 10px; border: 1.5px solid var(--c-s); border-radius: 2px; background: color-mix(in srgb, var(--c-s) 20%, transparent); }
.key-base { border-color: color-mix(in srgb, var(--c-f) 55%, transparent); border-top-style: dashed; border-top-width: 2px; }
.key-s.key-solid { border-top-style: solid; }
.plot-tag .tag-line { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--hair); font-size: 0.85em; color: var(--ink-2); }

/* Funktioiden ominaisuudet: pitkä arvo rivittyy otsikon alle vasemmalle tasattuna */
.facts-wide dd { flex: 1 1 14em; text-align: right; }
.tr-list { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 3px; font-size: 14px; color: var(--ink-2); }
.tr-list .m { font-size: 16px; color: var(--ink); }
.val-table tbody th { padding: 0; }
.val-table td { padding: 4px 6px; font: 15px var(--font-math); }

/* ---------- Muistilista ja tehtävät ---------- */
.reference { margin-top: 40px; }
.section-title { margin: 0 0 14px; font: 600 28px/1.2 var(--font-math); text-wrap: balance; }
.ref-grid {
  display: grid;
  gap: 18px 28px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-bottom: 40px;
}
.ref-card { min-width: 0; padding-top: 12px; border-top: 2px solid var(--ink); }
.ref-card h3 { margin: 0 0 8px; font: 700 15px var(--font-ui); }
.ref-card p { margin: 0 0 10px; font-size: 14.5px; color: var(--ink-2); max-width: 62ch; }
.ref-card .m { color: var(--ink); }
.ref-formula { font-size: 19px; line-height: 1.6; } /* lim ja murtoviiva ovat inline-flex-laatikoita rivin keskellä */
.sign-rules { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 14.5px; color: var(--ink-2); }
.sign-rules .m { font-size: 16px; }
.sign-rules li > .m:first-child { display: inline-block; min-width: 5.8em; }
/* Pitkä selitys jatkuu seuraavalla rivillä selityksen kohdalta (riippuva sisennys) */
.sign-rules li:has(> .m:first-child) { padding-left: 6.65em; text-indent: -6.65em; }
.sign-rules li:has(> .m:first-child) > * { text-indent: 0; }
.arrow-up { color: var(--pos-ink); font-weight: 700; }
.arrow-down { color: var(--neg-ink); font-weight: 700; }
.arrow-flat { color: var(--flat-ink); font-weight: 700; }
.ref-steps { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; color: var(--ink-2); }
.ref-list { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 4px; font-size: 14.5px; color: var(--ink-2); }
.ref-list .m { color: var(--ink); }
.ref-steps li::marker { font: 600 15px var(--font-math); color: var(--muted); }
.ref-steps .m { font-size: 16px; }
.rules-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.rules-table td { padding: 4px 12px 4px 0; vertical-align: baseline; border-bottom: 1px dashed var(--hair); }

.tasks {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: task;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.task {
  counter-increment: task;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 18px;
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-radius: 12px;
}
/* Esimerkit arjesta: luokka (liikenne, talous, …), tilanne, tutkittava kysymys ja yksiköt.
   Esimerkit ja tehtävät ovat Harjoittele-valikon ikkunoissa (.practice-dialog). */
.examples {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.example {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 18px;
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-top: 3px solid color-mix(in srgb, var(--cat) 70%, var(--sheet));
  border-radius: 12px;
}
.example h3 { margin: 0; font: 700 15px var(--font-ui); }
.example p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.example .m { color: var(--ink); }
.example .ex-task { flex: 1; color: var(--ink); }
.example .ex-units { font-size: 13px; color: var(--muted); }
.example .ex-units .m { font-size: 15px; color: var(--ink-2); }
.ex-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 7px;
  font: 700 12px/1.5 var(--font-ui);
  color: color-mix(in srgb, var(--cat) 72%, var(--ink));
  background: color-mix(in srgb, var(--cat) 13%, var(--sheet));
  border-radius: 999px;
}
.ex-cat svg { flex: none; width: 15px; height: 15px; }
.example { --cat: var(--muted); }
.cat-liikenne { --cat: var(--c-f); }
.cat-talous { --cat: var(--c-pos); }
.cat-sahko { --cat: var(--flat-ink); }
.cat-fysiikka { --cat: var(--c-d); }
.cat-arki { --cat: var(--c-neg); }
.unit { font-style: normal; }
.banner-units { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
.banner-units .m { font-size: 15px; color: var(--ink-2); }
.vd-unit { font-size: 20px; color: var(--ink-2); }
.task h3 { display: flex; align-items: baseline; gap: 8px; margin: 0; font: 700 15px var(--font-ui); }
.task h3::before { content: counter(task) "."; font: 600 19px var(--font-math); color: var(--muted); }
.task p { flex: 1; margin: 0; font-size: 14.5px; color: var(--ink-2); }
.task .m { color: var(--ink); }

.footer { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--muted); }
.footer p { margin: 0; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 6px; }
.footer-legal a { color: var(--ink-2); text-underline-offset: 0.15em; }
.footer-legal a:hover { color: var(--ink); }
.footer-legal a[aria-current="page"] { color: var(--ink); font-weight: 600; }
/* Oikeudellisten sivujen linkit asetusvalikon lopussa */
.sm-more { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--hair); font-size: 13.5px; }
.sm-more a { padding: 8px 0; color: var(--ink-2); text-underline-offset: 0.15em; }
.sm-more a:hover { color: var(--ink); }

/* ---------- Oikeudelliset sivut (tietosuoja, käyttöehdot; src/components/legal) ---------- */
.legal { max-width: 900px; }
.legal-top { margin-bottom: 14px; }
a.brand { color: inherit; text-decoration: none; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-left: auto; font-size: 14px; }
.legal-nav a { padding: 8px 0; color: var(--ink-2); text-underline-offset: 0.15em; }
.legal-nav a:hover { color: var(--ink); }
.legal-sheet { padding: clamp(18px, 4vw, 40px); background: var(--sheet); border: 1px solid var(--hair); border-radius: 14px; box-shadow: var(--shadow); }
.legal-sheet h1 { margin: 0; font: 700 clamp(26px, 4.5vw, 34px)/1.15 var(--font-ui); }
.legal-updated { margin: 6px 0 20px; font-size: 13.5px; color: var(--muted); }
.legal-sheet h2 { margin: 34px 0 8px; font: 700 20px/1.3 var(--font-ui); scroll-margin-top: 16px; }
.legal-sheet h3 { margin: 20px 0 4px; font: 700 16px/1.35 var(--font-ui); }
.legal-sheet p, .legal-sheet li { max-width: 72ch; }
.legal-sheet p { margin: 8px 0; }
.legal-sheet ul { margin: 8px 0; padding-left: 1.3em; }
.legal-sheet li { margin: 4px 0; }
.legal-sheet a { color: var(--ink); font-weight: 600; text-underline-offset: 0.15em; }
.legal-sheet code { padding: 1px 5px; font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--sheet-2); border-radius: 4px; white-space: nowrap; }
.legal-summary { margin: 0 0 8px; padding: 2px 16px; background: var(--sheet-2); border: 1px solid var(--hair-strong); border-radius: 10px; }
.legal-copyright { font-weight: 700; }
.legal-table { margin: 10px 0; overflow-x: auto; }
.legal-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; }
.legal-table th, .legal-table td { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
.legal-table td:last-child { white-space: nowrap; }
.legal-table th { font-weight: 700; color: var(--ink-2); border-bottom-color: var(--hair-strong); }
.legal-status { margin-left: 10px; font-size: 14px; color: var(--ink-2); }
.legal-foot { margin-top: 24px; }

/* ---------- Tehtävän kuvaus, asennuskortti, syöttöikkuna ja ilmoitus ---------- */
.task-banner {
  order: -1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 10px 12px 16px;
  background: color-mix(in srgb, var(--c-f) 8%, var(--sheet));
  border: 1px solid color-mix(in srgb, var(--c-f) 32%, transparent);
  border-radius: 12px;
}
.task-banner-text { flex: 1; min-width: 0; }
.task-banner-kicker {
  margin: 0;
  font: 700 11.5px var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.task-banner-title { margin: 2px 0 4px; font: 700 15px var(--font-ui); }
.task-banner-body { margin: 0; font-size: 14px; color: var(--ink-2); }
.task-banner-body .m { color: var(--ink); }
.task-banner .icon-btn { align-self: flex-start; width: 36px; min-height: 36px; background: none; border-color: transparent; }

.app-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 40px;
  padding: 16px 18px;
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-radius: 14px;
}
.app-card-icon { flex: none; width: 56px; height: 56px; border-radius: 13px; }
.app-card-text { flex: 1 1 200px; min-width: 0; }
.app-card h2 { margin: 0 0 2px; font: 700 15px var(--font-ui); }
.app-card p { margin: 0; font-size: 14px; color: var(--ink-2); }
.app-card .app-card-ios { margin-top: 6px; }
.app-card-ios svg { width: 16px; height: 16px; vertical-align: -3px; }

.value-dialog {
  width: min(360px, calc(100vw - 32px));
  padding: 18px;
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 16px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.45);
}
.value-dialog::backdrop { background: rgba(8, 12, 16, 0.45); }
.vd-title { margin: 0 0 12px; font: 700 16px var(--font-ui); }
.vd-row { display: flex; align-items: center; gap: 10px; }
.vd-label { font-size: 22px; white-space: nowrap; }
#vd-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  font: 22px/1.3 var(--font-math);
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 10px;
}
#vd-input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.vd-sign { align-self: stretch; padding: 0 15px; font: 20px var(--font-math); }
.vd-hint { min-height: 1.5em; margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }
.vd-hint.is-error { color: var(--neg-ink); font-weight: 700; }
.vd-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ---------- Selitteet ----------
   Lukema, jolla on selite (button.tip), on alleviivattu pisteviivalla. Selite (#tip-pop) aukeaa, kun hiiri on
   lukeman päällä tai lukemaa napautetaan, ks. js/app.js:n kohta Selitteet. */
.tip {
  display: inline-block;
  margin: 0 -2px;
  padding: 0 2px;
  font: inherit;
  color: inherit;
  text-align: inherit;
  white-space: inherit;
  text-decoration: underline dotted var(--muted);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: help;
}
.tip:hover, .tip.is-open { text-decoration-color: currentColor; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.tag .tip { margin: 0; padding: 0; }
.tag:has(.tip.is-open), .tag:has(.tip:hover) { border-color: var(--hair-strong); }
.ro-tan .tip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tip-pop {
  position: fixed;
  z-index: 55;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: max-content;
  max-width: min(340px, calc(100vw - 16px));
  padding: 10px 13px 11px;
  font: 13.5px/1.5 var(--font-ui);
  color: var(--ink-2);
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 10px;
  box-shadow: var(--shadow), 0 18px 40px -20px rgba(0, 0, 0, 0.35);
  animation: tip-in 0.12s ease-out;
}
.tip-pop[hidden] { display: none; }
/* Nuoli kohti lukemaa (--tip-x asetetaan skriptissä) */
.tip-pop::before {
  content: "";
  position: absolute;
  left: var(--tip-x, 50%);
  width: 10px;
  height: 10px;
  margin-left: -6px;
  background: inherit;
  border: inherit;
  border-radius: 2px 0;
  transform: rotate(45deg);
}
.tip-pop[data-side="below"]::before { top: -6px; border-right: 0; border-bottom: 0; }
.tip-pop[data-side="above"]::before { bottom: -6px; border-left: 0; border-top: 0; }
.tip-pop p { margin: 0; }
.tip-pop p + p { margin-top: 5px; }
.tip-pop .m { font-size: 15.5px; color: var(--ink); }
.tip-pop .tip-title { font-weight: 700; color: var(--ink); }
.tip-pop .tip-calc { margin-block: 7px; font-size: 16.5px; line-height: 1.4; }
.tip-pop .tip-calc .m, .tip-pop .tip-calc .frac { font-size: inherit; }
@keyframes tip-in { from { opacity: 0; } }

.toast {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  font-size: 14.5px;
  color: var(--btn-ink);
  background: var(--btn);
  border-radius: 12px;
  box-shadow: var(--shadow);
  animation: toast-in 0.18s ease-out;
}
.toast-action { padding: 4px 6px; font-weight: 700; color: inherit; background: none; border: 0; text-decoration: underline; cursor: pointer; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---------- Käsitteet ----------
   Ikkuna vierii kokonaisuutena, ja otsikkorivi pysyy ylhäällä. Käsitteen kuva on vasemmalla, otsikko ja
   selitykset (Geometrisesti, Käytännössä) oikealla. Kapeassa ikkunassa selitykset ovat koko leveydeltä. */
.info-dialog {
  width: min(720px, calc(100% - 32px));
  max-height: calc(100% - 48px);
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 16px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.45);
}
.info-dialog[open] { animation: info-in 0.18s ease-out; }
.info-dialog::backdrop { background: rgba(8, 12, 16, 0.45); }
@keyframes info-in { from { opacity: 0; transform: translateY(10px); } }
.info-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 12px 12px 22px;
  background: var(--sheet);
  border-bottom: 1px solid var(--hair);
}
.info-kicker {
  margin: 0;
  font: 700 11.5px/1.4 var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.info-title { margin: 0; font: 600 27px/1.15 var(--font-math); }
.info-title:focus { outline: none; } /* kohdistus avattaessa, ei painike */
.info-head .icon-btn { align-self: flex-start; width: 40px; min-height: 40px; background: none; border-color: transparent; }
.info-head .icon-btn:hover { background: var(--sheet-2); }
.info-body { container: info / inline-size; padding: 2px 22px 24px; }
.info-lede { margin: 12px 0 0; max-width: 62ch; font-size: 14.5px; color: var(--ink-2); }
/* Harjoittele ja Muistilista: Esimerkkejä, Tutki itse ja muistilista ovat korttiruudukkoja, joten työpöydällä ikkuna on
   leveämpi kuin Käsitteet */
html:not(.mobile) :is(.practice-dialog, .ref-dialog) { width: min(980px, calc(100% - 32px)); }
.practice-dialog :is(.examples, .tasks) { margin-top: 16px; }
.ref-pick { min-width: 0; margin: 14px 0 0; padding: 0; border: 0; }
.ref-dialog .ref-grid { margin: 20px 0 0; }
/* Muistilistan korkeus vaihtelee aiheen mukaan: ikkuna on ylhäällä eikä keskellä, jotta valitsin ei siirry aihetta vaihdettaessa */
html:not(.mobile) .ref-dialog { margin-top: max(24px, 7vh); margin-bottom: auto; max-height: calc(100% - max(24px, 7vh) - 24px); }
/* Kapeassa ikkunassa aiheet kahteen sarakkeeseen, jottei yksi jää yksin riville */
@container info (max-width: 440px) {
  .ref-pick .sm-segs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ref-pick .sm-seg > span { flex: 1; justify-content: center; }
}
.info-topic { counter-reset: info; }
.info-group { margin: 24px 0 0; font: 600 20px/1.25 var(--font-math); }
.info-group-sub { margin: 2px 0 6px; font-size: 13.5px; color: var(--muted); }
.info-group-sub .m { font-size: 15px; color: var(--ink-2); }
.info-list { margin: 0; padding: 0; list-style: none; }
.info-item {
  counter-increment: info;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "fig name" "fig dl";
  align-items: start;
  gap: 6px 16px;
  padding: 14px 0;
  border-top: 1px dashed var(--hair);
}
.info-name {
  grid-area: name;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font: 700 15.5px/1.35 var(--font-ui);
}
.info-name::before { content: counter(info) "."; flex: none; font: 600 18px/1 var(--font-math); color: var(--muted); }
.info-name .m { font-size: 17.5px; white-space: nowrap; }
.info-dl {
  grid-area: dl;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: 6px 14px;
  margin: 0;
}
.info-dl dt { font: 700 11.5px/1.3 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.info-dl dd { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.info-dl dd .m { font-size: 16.5px; color: var(--ink); white-space: nowrap; }
.info-dl strong { color: var(--ink); }
.info-dl .info-formula { font-size: 18px; line-height: 1.9; color: var(--ink); }
.info-and { margin-inline: 0.25em; font: 14px var(--font-ui); color: var(--ink-2); }
@container info (max-width: 470px) {
  .info-item { grid-template-areas: "fig name" "dl dl"; gap: 10px 12px; }
  .info-name { align-self: center; }
  .info-dl { grid-template-columns: minmax(0, 1fr); row-gap: 1px; }
  .info-dl dd + dt { margin-top: 8px; }
}

/* Käsitteiden pienoiskuvat (js/app.js, INFO_FIGS): samat värit ja viivat kuin kuvaajassa */
.info-fig {
  grid-area: fig;
  display: block;
  width: 72px;
  height: 54px;
  overflow: hidden;
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-radius: 8px;
}
.info-fig svg { display: block; width: 100%; height: 100%; }
@container info (max-width: 470px) {
  .info-fig { width: 64px; height: 48px; }
}
.fg-grid { fill: none; stroke: var(--grid-minor); stroke-width: 1; shape-rendering: crispEdges; }
.fg-ax { fill: none; stroke: var(--hair-strong); stroke-width: 1; shape-rendering: crispEdges; }
.fg-f { fill: none; stroke: var(--c-f); stroke-width: 2.2; stroke-linecap: round; }
.fg-d { fill: none; stroke: var(--c-d); stroke-width: 1.9; stroke-linecap: round; }
.fg-s { fill: none; stroke: var(--c-s); stroke-width: 1.7; stroke-dasharray: 4 2.6; }
.fg-tri { fill: color-mix(in srgb, var(--c-s) 16%, transparent); }
.fg-leg { fill: none; stroke: var(--c-s); stroke-width: 3; }
.fg-thin { fill: none; stroke: var(--c-s); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.fg-guide { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 2; }
.fg-unit { fill: none; stroke: var(--c-d); stroke-width: 1.6; stroke-dasharray: 1.6 1.8; }
.fg-lim { fill: none; stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 4 2.5; }
.fg-bar { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.fg-p, .fg-q, .fg-fa { stroke: var(--sheet); stroke-width: 2.4; paint-order: stroke; }
.fg-p, .fg-amark { fill: var(--c-d); }
.fg-q { fill: var(--c-s); }
.fg-fa { fill: var(--c-f); }
.fg-hole { fill: var(--sheet); stroke: var(--c-f); stroke-width: 1.5; }
.fg-area { fill: color-mix(in srgb, var(--c-f) 20%, transparent); }
.fg-aneg { fill: color-mix(in srgb, var(--c-neg) 22%, transparent); }
.fg-rect { fill: color-mix(in srgb, var(--c-s) 20%, transparent); stroke: var(--c-s); stroke-width: 1.2; stroke-linejoin: round; }
.fg-hatch { fill: color-mix(in srgb, var(--muted) 18%, transparent); }
.fg-base { fill: none; stroke: color-mix(in srgb, var(--c-f) 55%, transparent); stroke-width: 1.8; stroke-dasharray: 4 3; }
.fg-t { font: italic 10.5px var(--font-math); fill: var(--d-ink); }
.fg-num { font-style: normal; }
.fg-big { font-size: 14px; fill: var(--ink); }

/* ---------- Opetusnäkymä (js/lessons.js) ----------
   Oma näkymä ilman kuvaajaa: vasemmalla sääntöluettelo, oikealla valittu sääntö yhtenä sarakkeena
   (selitys, sääntölaatikko, esimerkki vaihe vaiheelta ja harjoitus). Kapeammalla näytöllä luettelon
   korvaa ylhäällä pysyvä sääntövalitsin (.rl-bar). */
.rules-head { padding-block: 2px 22px; }
.rules-kicker { margin: 0 0 2px; font: 700 12px/1.4 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.rl-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.rl-nav { display: none; }
@media (min-width: 1040px) {
  .rl-layout { grid-template-columns: 290px minmax(0, 1fr); }
  .rl-bar { display: none !important; }
  .rl-nav {
    display: block;
    position: sticky;
    top: 14px;
    max-height: calc(100vh - 28px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
    background: var(--sheet);
    border: 1px solid var(--hair);
    border-radius: var(--radius);
  }
}
.rl-ng + .rl-ng { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--hair); }
.rl-ng-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 8px 4px;
  font: 700 11.5px/1.3 var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.rl-ng-n { font: 600 14px/1 var(--font-math); letter-spacing: 0; color: var(--ink-2); }
.rl-ng ol { margin: 0; padding: 0; list-style: none; }
.rl-ng a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 8px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: 8px;
}
.rl-ng a:hover { color: var(--ink); background: var(--sheet-2); }
.rl-ng a:focus-visible { outline-offset: -2px; }
.rl-ng a[aria-current="page"] { font-weight: 700; color: var(--ink); background: color-mix(in srgb, var(--c-f) 11%, var(--sheet)); }
.rl-n { flex: none; min-width: 1.4em; font: 600 14px var(--font-math); text-align: right; color: var(--ink-2); }
.rl-done { margin-left: auto; align-self: center; color: var(--pos-ink); }
.rl-done svg { display: block; width: 14px; height: 14px; }

/* Sääntövalitsin: näkyvä teksti ja sen päällä läpinäkyvä valikko, joka avaa laitteen oman valitsimen */
.rl-bar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding: 8px 0;
  background: var(--page);
}
.rl-bar .icon-btn { align-self: auto; width: 44px; min-height: 44px; }
.rl-bar .icon-btn:disabled { opacity: 0.4; cursor: default; }
.rl-bar .icon-btn:disabled:hover { color: var(--ink-2); background: var(--sheet); }
.rl-pick {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 12px;
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 10px;
}
.rl-pick:hover { background: var(--sheet-2); }
.rl-pick:has(select:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.rl-bar-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 15px/1.3 var(--font-ui); }
.rl-bar-n { margin-right: 4px; font-weight: 400; color: var(--muted); }
.rl-pick .chev { flex: none; width: 14px; height: 14px; color: var(--muted); }
.rl-pick select {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  font-size: 16px; /* iOS ei zoomaa */
  cursor: pointer;
}

/* Valittu sääntö */
.rl-rule { container: rule / inline-size; min-width: 0; max-width: 840px; display: grid; gap: 16px; }
.rl-back { margin: 0; font-size: 14px; }
.rl-back a { color: var(--ink); font-weight: 600; text-underline-offset: 0.15em; }
.rl-top { display: grid; gap: 6px; }
.rl-kicker { margin: 0; font: 700 11.5px/1.4 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.rl-name { margin: 0; font: 600 32px/1.15 var(--font-math); text-wrap: balance; }
.rl-name:focus, #rl-rule:focus { outline: none; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 8px; z-index: 50; padding: 8px 12px; background: var(--sheet); border: 2px solid var(--focus); border-radius: 8px; }
.rl-intro { margin: 2px 0 0; max-width: 66ch; font-size: 17px; line-height: 1.65; }
.rl-intro .m { font-size: 19px; }
.rl-card { min-width: 0; padding: 16px 18px; background: var(--sheet); border: 1px solid var(--hair); border-radius: var(--radius); box-shadow: var(--shadow); }
.rl-h { margin: 0 0 10px; font: 700 15px var(--font-ui); }
.rl-ph { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 10px; }
.rl-ph .rl-h { margin: 0; }
.rl-formula { display: grid; gap: 2px; max-width: 100%; overflow-x: auto; font-size: clamp(20px, 2.4vw, 24px); line-height: 1.8; }
.rl-rulebox p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.rl-rulebox .m { color: var(--ink); }
.rl-rulebox p .m { font-size: 17px; }
.rl-rule-list { margin: 0; padding-left: 1.7em; display: grid; gap: 2px; font: 700 18px/1.5 var(--font-ui); }
.rl-rule-list li::marker { font-weight: 700; color: var(--c-d); }
.rl-rulebox .rl-warn { padding: 8px 12px; background: color-mix(in srgb, var(--c-neg) 7%, var(--sheet)); border-left: 3px solid var(--c-neg); border-radius: 6px; }
.rl-rulebox .rl-need { font-size: 13.5px; color: var(--muted); }
.rl-rulebox .rl-need .m { font-size: 15.5px; color: var(--ink-2); }

/* Esimerkki vaihe vaiheelta: rivit kuin taululla, selitys rivin vieressä (kapeassa näkymässä alla).
   Uusin rivi on korostettu, ja edellisellä rivillä näkyy, mikä kohta siinä laskettiin. */
.st-lead { margin: 0 0 10px; font-size: 15px; color: var(--ink-2); }
.st-lead .m { font-size: 17px; color: var(--ink); }
.rl-vis { display: grid; justify-items: center; gap: 8px; margin: 2px 0 16px; overflow-x: auto; }
.st-lines { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 2em max-content minmax(0, 1fr); row-gap: 4px; overflow-x: auto; }
.st-line { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; column-gap: 0; padding: 6px 10px; border-radius: 10px; }
.st-eq { font-size: 22px; color: var(--muted); text-align: right; padding-right: 8px; }
.st-expr { font-size: 23px; line-height: 1.8; }
.st-why { font-size: 14.5px; line-height: 1.55; color: var(--muted); padding-left: 14px; }
.st-why .m { font-size: 16.5px; color: var(--ink-2); }
/* Kaava ei katkea kesken lauseen (esim. "x" / "= 2") */
.st-why .m, .st-lead .m, .rl-intro .m, .rl-warn .m, .rl-ask .m, .rl-rulebox p .m { white-space: nowrap; }
.st-line.is-last { background: color-mix(in srgb, var(--c-s) 10%, var(--sheet)); animation: st-in 0.25s ease-out; }
.st-line.is-last .st-why, .st-line.is-last .st-why .m { color: var(--ink); }
@keyframes st-in { from { opacity: 0; transform: translateY(-4px); } }
.st-hl, .st-rs { display: inline-block; padding: 0 0.12em; border-radius: 4px; }
.st-line.is-prev .st-hl, .st-line.is-last .st-rs { line-height: 1.25; }
.st-line.is-prev .st-hl { background: color-mix(in srgb, var(--c-d) 24%, transparent); box-shadow: 0 2px 0 var(--c-d); }
.st-line.is-last .st-rs { background: color-mix(in srgb, var(--c-s) 30%, transparent); box-shadow: 0 2px 0 var(--c-s); }
.st-cut { text-decoration: line-through; text-decoration-color: var(--c-neg); text-decoration-thickness: 2px; opacity: 0.6; }
.st-tx { color: color-mix(in srgb, var(--c-f) 85%, var(--ink)); }
.st-tc { color: color-mix(in srgb, var(--c-s) 75%, var(--ink)); }
.st-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }
.st-count { font-size: 14px; color: var(--muted); }
@container rule (max-width: 620px) {
  .st-lines { grid-template-columns: 2em minmax(0, 1fr); }
  .st-line { column-gap: 0; padding: 6px 8px; }
  .st-why { grid-column: 2; padding-left: 0; }
  .st-expr { font-size: 21px; }
}

/* Kuvat: laskujärjestys, merkkitaulukko, murtolukupalkit, pisteruudukko, laatikkomenetelmä, potenssin osat ja funktiokone */
.rl-order { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.rl-order li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  font-size: 14px;
  color: var(--ink-2);
  background: var(--sheet);
  border: 1.5px solid var(--hair-strong);
  border-radius: 999px;
  transition: background-color 0.2s, border-color 0.2s;
}
.rl-order-n { display: grid; place-items: center; width: 24px; height: 24px; font: 700 13px var(--font-ui); color: var(--btn-ink); background: var(--muted); border-radius: 50%; }
.rl-order-s { font-size: 17px; color: var(--ink); }
.rl-order li.is-on { font-weight: 700; color: var(--ink); background: color-mix(in srgb, var(--c-d) 14%, var(--sheet)); border-color: var(--c-d); }
.rl-order li.is-on .rl-order-n { background: var(--d-ink); }
.rl-signs { border-collapse: collapse; font-size: 20px; }
.rl-signs th, .rl-signs td { width: 54px; height: 44px; text-align: center; border: 1px solid var(--hair-strong); }
.rl-signs th { font-weight: 400; color: var(--ink-2); background: var(--sheet-2); }
.rl-signs td.is-on { font-weight: 700; background: color-mix(in srgb, var(--c-d) 22%, var(--sheet)); box-shadow: inset 0 0 0 2px var(--c-d); }
.rl-fbars { display: grid; gap: 8px; width: min(100%, 440px); }
.rl-fbar { display: grid; grid-template-columns: 5em minmax(0, 1fr); align-items: center; gap: 10px; }
.rl-fbar-l { font-size: 17px; text-align: right; }
.rl-fbar-c { display: grid; grid-template-columns: repeat(var(--d), 1fr); height: 30px; overflow: hidden; background: var(--sheet); border: 1.5px solid var(--ink-2); border-radius: 5px; }
.rl-fbar-c > span + span { border-left: 1px solid var(--ink-2); }
.rl-fbar-c .c-a { background: color-mix(in srgb, var(--c-f) 45%, var(--sheet)); }
.rl-fbar-c .c-b { background: color-mix(in srgb, var(--c-s) 50%, var(--sheet)); }
.rl-dots { display: grid; grid-template-columns: repeat(var(--cols), 18px); gap: 8px; }
.rl-dots span { width: 18px; height: 18px; border-radius: 50%; }
.rl-dots .c-a { background: var(--c-f); }
.rl-dots .c-b { background: var(--c-s); }
.rl-box { border-collapse: collapse; font-size: 19px; }
.rl-box th, .rl-box td { min-width: 72px; height: 46px; padding: 4px 12px; text-align: center; border: 1px solid var(--hair-strong); }
.rl-box th { font-weight: 400; color: var(--ink-2); background: var(--sheet-2); }
.rl-box td { background: color-mix(in srgb, var(--c-s) 9%, var(--sheet)); }
.rl-box td.is-cut { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--c-neg); background: color-mix(in srgb, var(--c-neg) 7%, var(--sheet)); }
.rl-pow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 26px; }
.rl-pow-x { font-size: 46px; }
.rl-pow-k { margin: 0; display: grid; gap: 6px; font-size: 14.5px; color: var(--ink-2); }
.rl-pow-k div { display: flex; align-items: baseline; gap: 10px; }
.rl-pow-k dt { min-width: 6.6em; font: 700 11.5px var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.rl-pow-k dd { margin: 0; }
.rl-pow-k .m { font-size: 18px; color: var(--ink); }
.rl-machine { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.rl-mv, .rl-mb { display: grid; justify-items: center; gap: 2px; padding: 7px 12px; font-size: 17px; border-radius: 10px; }
.rl-mv { background: var(--sheet-2); }
.rl-mb { border: 2px solid; }
.rl-mb.is-inner { border-color: var(--c-s); background: color-mix(in srgb, var(--c-s) 10%, var(--sheet)); }
.rl-mb.is-outer { border-color: var(--c-f); background: color-mix(in srgb, var(--c-f) 9%, var(--sheet)); }
.rl-mv.is-out { background: color-mix(in srgb, var(--c-d) 13%, var(--sheet)); }
.rl-ml { font: 700 11.5px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.rl-ma::before { content: "→"; font: 20px var(--font-ui); color: var(--muted); }
/* Kapeassa näkymässä kone pystysuunnassa, ja laatikon otsikko ja arvo ovat samalla rivillä */
@container rule (max-width: 640px) {
  .rl-machine { flex-direction: column; gap: 0; }
  .rl-mv, .rl-mb { grid-auto-flow: column; justify-content: center; align-items: baseline; gap: 10px; min-width: 230px; padding: 6px 12px; }
  .rl-ma::before { content: "↓"; font-size: 17px; line-height: 1.3; }
}
.rl-svg { display: block; max-width: 100%; height: auto; }
.rl-cap { margin: 0; max-width: 60ch; font-size: 13.5px; line-height: 1.6; text-align: center; color: var(--ink-2); }
.sv-t { font: 13px var(--font-ui); fill: var(--ink-2); }
.sv-t-0 { font-weight: 700; fill: var(--ink); }
.sv-t-c { font-size: 15px; font-weight: 700; fill: var(--d-ink); }
.sv-t-l { font: 600 15px var(--font-ui); fill: var(--ink); }
.sv-n { font-family: var(--font-math); font-size: 17px; }
.sv-axis { fill: none; stroke: var(--axis); stroke-width: 1.5; }
.sv-tick { stroke: var(--axis); stroke-width: 2; }
.sv-tick2 { stroke: var(--muted); stroke-width: 1; }
.sv-hop { fill: none; stroke: var(--c-d); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sv-dot-a, .sv-dot-c { stroke: var(--sheet); stroke-width: 2; paint-order: stroke; }
.sv-dot-a { fill: var(--c-f); }
.sv-dot-c { fill: var(--c-d); }
.sv-sq { fill: color-mix(in srgb, var(--c-f) 22%, var(--sheet)); stroke: var(--c-f); stroke-width: 1.5; }
.sv-brk { fill: none; stroke: var(--ink-2); stroke-width: 1.3; }

/* Harjoittelu */
.rl-q { margin: 0; }
.rl-ask { margin: 0; font-size: 15px; font-weight: 700; }
.rl-ask .m { font-size: 17px; font-weight: 400; }
.rl-askhint { font-size: 13px; font-weight: 400; color: var(--muted); }
.rl-qexpr { margin: 8px 0 4px; padding: 2px; overflow-x: auto; font-size: 24px; line-height: 2.3; }
.rl-ans {
  width: 3.2em;
  padding: 2px 4px;
  font: 20px/1.2 var(--font-math);
  font-variant-numeric: lining-nums tabular-nums;
  text-align: center;
  color: var(--ink);
  background: var(--sheet);
  border: 1.5px solid var(--hair-strong);
  border-radius: 7px;
}
.rl-ans:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.rl-ans[aria-invalid] { border-color: var(--neg-ink); }
.rl-ans[readonly] { background: var(--sheet-2); }
.rl-qexpr sup .rl-ans { width: 3em; font-size: 18px; vertical-align: 0.15em; }
.rl-qexpr sub .rl-ans { width: 3em; font-size: 18px; }
.rl-qexpr .frac .rl-ans { width: 2.8em; margin-block: 3px; font-size: 18px; }
.rl-keys { display: none; gap: 6px; margin: 2px 0; }
@media (pointer: coarse) {
  .rl-keys { display: flex; }
}
.rl-keys button {
  min-width: 52px;
  height: 42px;
  font: 22px/1 var(--font-math);
  background: var(--sheet-2);
  border: 1px solid var(--hair);
  border-radius: 9px;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.rl-keys button:active { background: var(--hair); }
.rl-qbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rl-fb { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.rl-fb:empty { display: none; }
.rl-fb.is-ok, .rl-fb.is-bad { padding: 10px 12px; border-radius: 10px; }
.rl-fb.is-ok { background: color-mix(in srgb, var(--c-pos) 9%, var(--sheet)); border: 1px solid color-mix(in srgb, var(--c-pos) 45%, transparent); }
.rl-fb.is-bad { background: color-mix(in srgb, var(--c-neg) 7%, var(--sheet)); border: 1px solid color-mix(in srgb, var(--c-neg) 40%, transparent); }
.rl-fb p { margin: 0; }
.rl-fb-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-weight: 700; }
.rl-fb.is-ok .rl-fb-t { color: var(--pos-ink); }
.rl-fb.is-bad .rl-fb-t { color: var(--neg-ink); }
.rl-fb-t svg { width: 16px; height: 16px; }
.rl-fb-note { font-weight: 400; color: var(--ink-2); }
.rl-fb-note .m { font-size: 17px; color: var(--ink); }
.rl-fb > .btn { margin-top: 8px; }
.rl-more { margin-top: 6px; }
.rl-more summary { cursor: pointer; color: var(--ink-2); }
.rl-sol { margin-top: 6px; }
.rl-sol-l { margin: 0 0 2px; font: 700 11.5px var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.rl-sol .st-line { padding: 2px 6px; }
.rl-sol .st-expr { font-size: 19px; }
.rl-sol .st-why { color: var(--ink-2); }
.rl-score { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.rl-pager { display: flex; justify-content: space-between; gap: 12px; }
.rl-pager a {
  display: grid;
  gap: 2px;
  max-width: 48%;
  padding: 10px 14px;
  color: inherit;
  text-decoration: none;
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-radius: 12px;
}
.rl-pager a:hover { background: var(--sheet-2); }
.rl-pg-next { margin-left: auto; text-align: right; }
.rl-pg-dir { font: 700 12px var(--font-ui); color: var(--muted); }
.rl-pg-name { font: 700 14.5px/1.3 var(--font-ui); }
/* Polun loppu */
.rl-next-card { display: grid; gap: 8px; border-left: 3px solid var(--c-f); }
.rl-next-card p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.rl-next-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.rl-next-links .btn { text-decoration: none; white-space: normal; text-align: left; }
.rl-next-links .btn:not(.btn-primary) { color: var(--ink); }

/* ---------- Sähkötekniikka (js/sahko.js) ----------
   Kaavalaatikon suuretaulukko, simulaattori (laskettava suure, lähtöarvot, tulos ja kaava, johon luvut on sijoitettu)
   sekä piirikaaviot (IEC-piirrosmerkit) ja kuvaajat. Esimerkin rivit ovat allekkain: yhtälö ja selitys sen alla. */
.sm-tablewrap { margin-top: 12px; overflow-x: auto; }
.sm-syms { border-collapse: collapse; font-size: 14.5px; }
.sm-syms th, .sm-syms td { padding: 5px 16px 5px 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--hair); }
.sm-syms th { font: 700 11.5px/1.3 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.sm-syms td.m { font-size: 18px; }
.sm-syms .m { color: var(--ink); }
.sm-syms td .m { font-size: 16.5px; }
.sm-un { color: var(--ink-2); }
.sm-consts { margin: 10px 0 0; padding-left: 1.2em; font-size: 14.5px; color: var(--ink-2); }
.sm-consts .m { font-size: 16.5px; color: var(--ink); white-space: nowrap; }

/* Simulaattori */
.sm-lead { margin: 0 0 12px; max-width: 66ch; font-size: 14.5px; color: var(--ink-2); }
.sm-find { min-width: 0; margin: 0 0 14px; padding: 0; border: 0; }
.sm-find legend { margin-bottom: 6px; padding: 0; font: 700 13.5px var(--font-ui); color: var(--ink); }
.sm-segs { display: flex; flex-wrap: wrap; gap: 6px; }
.sm-seg { position: relative; display: inline-flex; }
.sm-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sm-seg > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 5px 14px;
  font-size: 14.5px;
  background: var(--sheet);
  border: 1.5px solid var(--hair-strong);
  border-radius: 999px;
}
.sm-seg > span .m { font-size: 17px; }
.sm-seg:hover > span { background: var(--sheet-2); }
.sm-seg input:checked + span { font-weight: 700; color: var(--btn-ink); background: var(--btn); border-color: var(--btn); }
.sm-seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.sm-body { display: grid; gap: 16px; }
@container rule (min-width: 640px) {
  .sm-body { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
}
.sm-ins { display: grid; gap: 14px; }
.sm-in { display: grid; gap: 4px; }
.sm-l { font-size: 14px; font-weight: 700; }
.sm-l .m { font-size: 17px; font-weight: 400; }
.sm-f { display: flex; gap: 6px; }
.sm-num {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 5px 10px;
  font: 19px/1.3 var(--font-math);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
  background: var(--sheet);
  border: 1.5px solid var(--hair-strong);
  border-radius: 8px;
}
.sm-num:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.sm-num[aria-invalid="true"] { border-color: var(--neg-ink); }
.sm-u {
  flex: none;
  min-width: 5em;
  min-height: 42px;
  padding: 4px 8px;
  font: 16px var(--font-ui); /* iOS ei zoomaa */
  color: var(--ink);
  background: var(--sheet-2);
  border: 1.5px solid var(--hair-strong);
  border-radius: 8px;
  cursor: pointer;
}
.sm-u1 { display: inline-flex; align-items: center; min-width: 2.5em; padding: 0 6px; font-size: 16px; color: var(--ink-2); }
.sm-pref { align-items: center; }
.sm-pl { font-size: 13.5px; color: var(--ink-2); }
.sm-pre { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 4px 8px; font: 16px var(--font-ui); color: var(--ink); background: var(--sheet-2); border: 1.5px solid var(--hair-strong); border-radius: 8px; cursor: pointer; }
.sm-rng { width: 100%; height: 28px; margin: 0; accent-color: var(--c-f); cursor: pointer; }
.sm-out { min-width: 0; padding: 12px 14px; background: var(--sheet-2); border: 1px solid var(--hair); border-radius: 12px; }
.sm-res { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 8px; }
.sm-res-l { font: 700 12px var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.sm-res-v { font-size: 27px; font-weight: 600; }
.sm-calc { display: grid; gap: 2px; margin: 0; }
.sm-calc > div { display: grid; grid-template-columns: 5.4em minmax(0, 1fr); align-items: baseline; gap: 8px; padding: 2px 6px; margin-inline: -6px; border-radius: 8px; }
html[lang="en"] .sm-calc > div { grid-template-columns: 7.2em minmax(0, 1fr); } /* SUBSTITUTION on pidempi kuin SIJOITUS */
.sm-calc dt { font: 700 11px var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.sm-calc dd { min-width: 0; margin: 0; overflow-x: auto; overflow-y: hidden; font-size: 18px; line-height: 2; white-space: nowrap; }
.sm-calc .is-res { background: color-mix(in srgb, var(--c-s) 14%, transparent); }
.sm-calc .is-res dd { font-weight: 600; }
.sm-then { padding: 0 4px; color: var(--ink-2); }
.sm-bad { margin: 0; font-size: 14.5px; color: var(--neg-ink); }
.rl-sim.is-bad .sm-vis, .sm-vis.is-stale { opacity: 0.35; }
.sm-vis { display: grid; justify-items: center; gap: 6px; margin-top: 16px; }
.sm-vis:empty { display: none; }

/* Esimerkin rivit allekkain ja tehtävä */
.st-lines.is-stack { grid-template-columns: minmax(0, 1fr); }
.st-lines.is-stack .st-line { grid-template-columns: minmax(0, 1fr); padding: 6px 12px; }
.st-lines.is-stack .st-eq { display: none; }
.st-lines.is-stack .st-expr { overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
.st-lines.is-stack .st-why { padding-left: 0; }
.st-lines.is-stack .st-line:first-child .st-expr { font-size: 18px; line-height: 2; white-space: normal; }
.st-tag {
  display: inline-block;
  margin: 0 4px 0 0;
  padding: 1px 8px;
  font: 700 11px/1.6 var(--font-ui);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: 0.15em;
  color: var(--ink-2);
  background: var(--sheet-2);
  border: 1px solid var(--hair);
  border-radius: 999px;
}
.st-tag ~ .st-tag { margin-left: 10px; }
.rl-ask .rl-ctx { font-weight: 400; }
.rl-ans.rl-ans-wide { width: 6.2em; }
.rl-qvis { margin: 10px 0 0; }
.st-lead { line-height: 1.6; }

/* Piirikaaviot */
.ck-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 22px; width: 100%; }
.ck-row .rl-svg { flex: 0 1 auto; }
.ck-w { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linejoin: round; }
.ck-flow { fill: none; stroke: var(--c-f); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 2 12; animation: ck-flow 1s linear infinite; }
.ck-flow.is-rev { animation-direction: reverse; }
@keyframes ck-flow { to { stroke-dashoffset: -28; } }
.ck-gap { fill: var(--sheet); }
.ck-r, .ck-lamp, .ck-m, .ck-term { fill: var(--sheet); stroke: var(--ink); stroke-width: 2; }
.ck-pl { stroke: var(--ink); stroke-width: 2.4; }
.ck-ps { stroke: var(--ink); stroke-width: 5.5; }
.ck-sign { font: 700 15px var(--font-ui); fill: var(--ink); }
.ck-lx, .ck-sine { fill: none; stroke: var(--ink); stroke-width: 1.8; }
.ck-coil { fill: none; stroke: var(--ink); stroke-width: 2; }
.ck-glow { fill: #ffd54a; }
.ck-mt { font: 700 14px var(--font-ui); fill: var(--ink); }
.ck-node, .ck-knode { fill: var(--ink); }
.ck-t { font: 15px var(--font-math); fill: var(--ink); }
.ck-t.is-q { font-weight: 700; fill: var(--d-ink); }
.ck-tu { fill: color-mix(in srgb, var(--c-s) 62%, var(--ink)); }
.ck-ti { fill: color-mix(in srgb, var(--c-f) 75%, var(--ink)); }
.ck-tr { fill: var(--ink-2); }
.ck-t2 { font: 13px var(--font-ui); fill: var(--ink-2); }
.ck-t, .ck-t2, .gr-n { paint-order: stroke fill; stroke: var(--sheet); stroke-width: 4px; stroke-linejoin: round; }
.ck-te { fill: color-mix(in srgb, var(--c-d) 70%, var(--ink)); }
.ck-tv { fill: #8e55cf; }
.ck-pq { font: 700 17px var(--font-ui); fill: #d64545; }
.ck-nq { font: 700 17px var(--font-ui); fill: #2f74d0; }
.ck-surfl { stroke: var(--c-f); stroke-width: 6; stroke-linecap: round; }
.sv-i { font-style: italic; }
.sv-sub { font-size: 0.72em; font-style: normal; }
.is-head { stroke-linejoin: round; }
.ck-ia { fill: none; stroke: var(--c-f); stroke-width: 2.2; }
.ck-ia.is-head { fill: var(--c-f); stroke-width: 1; }
.ck-ea { fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-dasharray: 5 4; }
.ck-ea.is-head { fill: var(--ink-2); stroke-dasharray: none; }
.ck-ua { fill: none; stroke: var(--c-s); stroke-width: 2; }
.ck-ua.is-head { fill: var(--c-s); stroke-width: 1; }
.ck-ka { fill: none; stroke: var(--c-f); stroke-width: var(--sw, 3px); stroke-linecap: round; }
.ck-ka.is-head { fill: var(--c-f); stroke-width: 1px; }
.ck-turn { fill: none; stroke: var(--c-d); stroke-width: 2; }
.ck-turn.is-head { fill: var(--c-d); stroke-width: 1; }
.ck-tube { fill: color-mix(in srgb, var(--c-f) 7%, var(--sheet)); stroke: var(--ink-2); stroke-width: 1.6; }
.ck-cut { fill: color-mix(in srgb, var(--c-f) 22%, var(--sheet)); stroke: var(--c-f); stroke-width: 1.6; }
.ck-e { fill: var(--c-f); }
.ck-drift.is-live { animation: ck-drift 2s linear infinite; }
@keyframes ck-drift { to { transform: translateX(-40px); } }
.ck-wirebody { fill: color-mix(in srgb, #c97a3d 50%, var(--sheet)); stroke: color-mix(in srgb, #c97a3d 75%, var(--ink)); stroke-width: 1.5; }
.ck-box { fill: none; stroke: var(--ink-2); stroke-width: 1.4; stroke-dasharray: 6 4; }
.ck-bar1 { fill: color-mix(in srgb, var(--c-d) 50%, var(--sheet)); }
.ck-bar2 { fill: color-mix(in srgb, var(--c-s) 55%, var(--sheet)); }

/* Varaukset, levyt, kentät ja magneetit */
.ch-p { fill: #d64545; stroke: color-mix(in srgb, #d64545 70%, var(--ink)); stroke-width: 1.5; }
.ch-n { fill: #2f74d0; stroke: color-mix(in srgb, #2f74d0 70%, var(--ink)); stroke-width: 1.5; }
.ch-s { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.pl-p { fill: #d64545; }
.pl-n { fill: #2f74d0; }
.fl-e { fill: none; stroke: color-mix(in srgb, var(--c-d) 85%, var(--ink)); stroke-width: 1.8; }
.fl-e.is-head { fill: color-mix(in srgb, var(--c-d) 85%, var(--ink)); stroke-width: 1; }
.fl-b { fill: none; stroke: var(--c-s); stroke-width: 1.8; }
.fl-b.is-head { fill: var(--c-s); stroke-width: 1; }
.fl-bc { fill: none; stroke: var(--c-s); stroke-width: 1.4; }
.fl-bd { fill: var(--c-s); }
.fl-bx { fill: none; stroke: var(--c-s); stroke-width: 1.4; }
.ck-fa { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; }
.ck-fa.is-head { fill: var(--ink); stroke-width: 1; }
.ck-va { fill: none; stroke: #8e55cf; stroke-width: 2.2; stroke-linecap: round; }
.ck-va.is-head { fill: #8e55cf; stroke-width: 1; }
.ck-diel { fill: color-mix(in srgb, var(--c-s) 22%, var(--sheet)); }
.ck-surf { fill: color-mix(in srgb, var(--c-f) 16%, transparent); stroke: var(--c-f); stroke-width: 2; }
.ck-gauss { fill: color-mix(in srgb, var(--c-f) 6%, transparent); stroke: var(--c-f); stroke-width: 1.8; stroke-dasharray: 7 5; }
.mg-n { fill: #d64545; }
.mg-s { fill: #2f74d0; }
.mg-t { font: 700 15px var(--font-ui); fill: #fff; }
.ck-core { fill: color-mix(in srgb, var(--ink-2) 22%, var(--sheet)); stroke: var(--ink-2); stroke-width: 1.4; }
.ck-orbit { fill: none; stroke: #8e55cf; stroke-width: 1.6; stroke-dasharray: 6 5; }
.ck-wirex { fill: color-mix(in srgb, #c97a3d 45%, var(--sheet)); stroke: var(--ink); stroke-width: 2; }
.ck-wired { fill: var(--ink); }
.fl-ring { fill: none; stroke: var(--c-s); stroke-width: 1.6; }
.ck-loop, .ck-turnw { fill: none; stroke: color-mix(in srgb, #c97a3d 82%, var(--ink)); stroke-width: 2.4; stroke-linecap: round; }
.ck-turnw { stroke-width: 3; }
.ck-tb { fill: color-mix(in srgb, var(--c-s) 62%, var(--ink)); }
.ck-rail { stroke: var(--ink-2); stroke-width: 3; stroke-linecap: round; }
.ck-ceil { fill: var(--ink-2); }
.ck-spring { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.ck-mass { fill: color-mix(in srgb, var(--c-f) 28%, var(--sheet)); stroke: var(--ink); stroke-width: 2; }
.ck-mt2 { font-size: 18px; }
.ck-sprg.is-live { animation: ck-sprg 1s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes ck-sprg { from { transform: scaleY(0.8); } to { transform: scaleY(1.2); } }
.ck-wave { fill: none; stroke: var(--c-f); stroke-width: 3; stroke-linejoin: round; }
.ck-ncu { fill: var(--c-f); }
.ck-nci { fill: var(--d-ink); }
.sp-b0 { fill: color-mix(in srgb, var(--ink-2) 14%, var(--sheet)); }
.sp-b1 { fill: color-mix(in srgb, var(--ink-2) 24%, var(--sheet)); }
.sp-t { font-size: 11.5px; }
.sp-mark { stroke: var(--d-ink); stroke-width: 2.4; }
.sp-mark.is-head { fill: var(--d-ink); stroke-width: 1; }
.ph-r { fill: none; stroke: var(--c-f); stroke-width: 3; }
.ph-r.is-head { fill: var(--c-f); stroke-width: 1; }
.ph-x { fill: none; stroke: var(--c-d); stroke-width: 3; }
.ph-x.is-head { fill: var(--c-d); stroke-width: 1; }
.ph-z { fill: none; stroke: var(--ink); stroke-width: 3; }
.ph-z.is-head { fill: var(--ink); stroke-width: 1; }
.gr-c.is-thin { stroke-width: 1.8; stroke-dasharray: 7 5; }
.ck-rod { stroke: color-mix(in srgb, #c97a3d 82%, var(--ink)); stroke-width: 7; stroke-linecap: round; }
.ck-move.is-live { animation: ck-move 2s linear infinite; }
@keyframes ck-move { from { transform: translateX(0); } to { transform: translateX(var(--dx, 100px)); } }
.ck-spin.is-live { animation: ck-spin 3s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ck-spin { to { transform: rotate(360deg); } }
.ck-osc.is-live { animation: ck-osc 2s ease-in-out infinite alternate; }
@keyframes ck-osc { from { transform: translateY(calc(-1 * var(--amp, 20px))); } to { transform: translateY(var(--amp, 20px)); } }

/* Kuvaajat */
.gr-grid { stroke: var(--grid-minor); stroke-width: 1; }
.gr-axis { fill: none; stroke: var(--axis); stroke-width: 1.5; }
.gr-axis.is-head { fill: var(--axis); stroke-width: 1; }
.gr-t { font: 13px var(--font-math); fill: var(--ink-2); } /* luvut matematiikkafontilla: käyttöliittymäfontin nolla on yliviivattu */
.gr-l { font: 600 13px var(--font-ui); fill: var(--ink); }
.gr-c { fill: none; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.gr-c1 { stroke: var(--c-f); }
.gr-c2 { stroke: var(--c-d); }
.gr-c3 { stroke: var(--c-s); }
.gr-c4 { stroke: var(--ink-2); stroke-width: 1.6; stroke-dasharray: 6 5; }
.gr-guide { stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 4 4; }
.gr-pt { fill: var(--c-d); stroke: var(--sheet); stroke-width: 2; }
.gr-n { font: 14px var(--font-math); fill: var(--ink-2); }
.gr-n.is-mid { font: 600 16px var(--font-math); fill: var(--ink); }
.gr-area { fill: color-mix(in srgb, var(--c-f) 18%, transparent); }

/* ---------- Tehtäväsimulaattori (js/tehtavat.js) ----------
   Vasemmalla aihe, tehtävätyyppi ja tasot, oikealla tehtävä: kuvaus, kuvaaja ja ratkaisun vaiheet aikajanana.
   Kapealla näytöllä palstat ovat allekkain, ja taso valitaan valitsimesta. */
.tk-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.tk-side { display: grid; gap: 14px; align-content: start; min-width: 0; padding: 14px; background: var(--sheet); border: 1px solid var(--hair); border-radius: var(--radius); }
.tk-levels, .tk-lvhead { display: none; }
@media (min-width: 1040px) {
  .tk-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 24px; }
  .tk-side { position: sticky; top: 14px; max-height: calc(100vh - 28px); overflow-y: auto; overscroll-behavior: contain; }
  .tk-levels, .tk-lvhead { display: grid; }
  .tk-bar { display: none !important; }
}
.tk-pick { min-width: 0; margin: 0; padding: 0; border: 0; }
.tk-pick legend { margin-bottom: 6px; padding: 0; font: 700 11.5px/1.3 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.tk-segs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tk-segs .sm-seg { display: flex; }
.tk-segs .sm-seg > span { justify-content: center; width: 100%; padding-inline: 10px; text-align: center; line-height: 1.25; }
.tk-kind-desc { margin: -4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.tk-lvhead { gap: 2px; padding-top: 12px; border-top: 1px solid var(--hair); }
.tk-lvh { margin: 0; font: 700 11.5px/1.3 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.tk-lvnote { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.tk-lvs { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.tk-lv {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  text-align: left;
  color: var(--ink-2);
  background: none;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
}
.tk-lv:hover { color: var(--ink); background: var(--sheet-2); }
.tk-lv:focus-visible { outline-offset: -2px; }
.tk-lv[aria-current="true"] { color: var(--ink); background: color-mix(in srgb, var(--c-f) 11%, var(--sheet)); }
.tk-lv-n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; font: 700 13px var(--font-ui); color: var(--ink-2); background: var(--sheet-2); border: 1px solid var(--hair-strong); border-radius: 50%; }
.tk-lv[aria-current="true"] .tk-lv-n { color: var(--btn-ink); background: var(--btn); border-color: var(--btn); }
.tk-lv-t { flex: 1 1 auto; min-width: 0; display: grid; }
.tk-lv-name { font: 700 14px/1.3 var(--font-ui); }
.tk-lv-name .m { font-size: 15.5px; font-weight: 400; }
.tk-lv-desc { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.tk-lv-desc .m { font-size: 14px; white-space: nowrap; }
.tk-dots { flex: none; display: inline-flex; gap: 3px; }
.tk-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--hair-strong); }
.tk-dots i.on { background: var(--c-s); }
.tk-lv-ok { flex: none; color: var(--pos-ink); }
.tk-lv-ok svg { display: block; width: 16px; height: 16px; }
.tk-bar { display: flex; align-items: center; gap: 8px; }
.tk-bar .icon-btn { align-self: auto; width: 44px; min-height: 44px; }
.tk-bar .icon-btn:disabled { opacity: 0.4; cursor: default; }
.tk-sheet { padding-top: 12px; border-top: 1px solid var(--hair); font-size: 13.5px; }
.tk-sheet summary { cursor: pointer; font-weight: 700; color: var(--ink-2); }
.tk-sheet ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.tk-rule { line-height: 1.55; }
.tk-rule-n { font-weight: 700; }
.tk-rule .m { font-size: 1.14em; white-space: nowrap; }

/* Tehtävä */
.tk-main { container: task / inline-size; min-width: 0; max-width: 860px; display: grid; gap: 16px; }
.tk-top { display: grid; gap: 4px; }
.tk-title { margin: 0; font: 600 30px/1.15 var(--font-math); text-wrap: balance; }
.tk-title:focus { outline: none; }
.tk-cat {
  justify-self: start;
  width: fit-content;
  margin: 0 0 10px;
  padding: 2px 10px;
  font: 700 11.5px/1.6 var(--font-ui);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--sheet-2);
  border: 1px solid var(--hair);
  border-radius: 999px;
}
.tk-text { font-size: 17px; line-height: 1.7; }
.tk-text .m { font-size: 1.12em; }
.tk-goal { margin: 12px 0 0; padding: 8px 12px; font-size: 16px; font-weight: 700; line-height: 1.6; background: color-mix(in srgb, var(--c-f) 8%, var(--sheet)); border-left: 3px solid var(--c-f); border-radius: 6px; }
.tk-goal .m { font-size: 1.1em; font-weight: 400; }
.tk-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tk-graph { margin-top: 14px; }
.tk-plot { height: clamp(240px, 42vh, 440px); }
.tk-tag { max-width: calc(100% - 64px); font-size: 16px; }
.tk-gfoot { display: grid; gap: 4px; margin-top: 8px; }
.tk-legend { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13.5px; color: var(--ink-2); }
.tk-legend li { display: inline-flex; align-items: center; gap: 7px; }
.tk-legend .m { font-size: 15.5px; color: var(--ink); }
.tk-legend-note { color: var(--muted); }
.tk-read { margin: 0; min-height: 1.5em; font-size: 13.5px; color: var(--muted); }
.tk-read .m { font-size: 15.5px; color: var(--ink); }
.key-dd { border-color: var(--c-d); border-top-style: dashed; }
.key-p { width: 11px; height: 11px; margin-inline: 4px; border: 0; border-radius: 50%; background: var(--c-d); }
.key-a { width: 0; height: 14px; margin-inline: 9px; border-top: 0; border-left: 2px dashed var(--muted); border-radius: 0; }

/* Ratkaisun vaiheet aikajanana: valmis (✓), meneillään oleva (täytetty) ja tulevat (ääriviiva) */
.tk-how { margin: -2px 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.tk-count { font-size: 13.5px; color: var(--muted); }
.tk-steps { margin: 0; padding: 0; list-style: none; display: grid; }
.tk-step { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; padding-bottom: 16px; }
.tk-step::before { content: ""; position: absolute; left: 14px; top: 32px; bottom: 2px; width: 2px; border-radius: 1px; background: var(--hair); }
.tk-step:last-child { padding-bottom: 0; }
.tk-step:last-child::before { display: none; }
.tk-sh { grid-column: 1 / -1; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; min-height: 30px; }
.tk-sn { display: grid; place-items: center; width: 30px; height: 30px; font: 700 14px var(--font-ui); color: var(--muted); background: var(--sheet); border: 2px solid var(--hair-strong); border-radius: 50%; }
.tk-sn svg { width: 15px; height: 15px; }
.tk-st { margin: 0; font: 700 15px/1.35 var(--font-ui); color: var(--muted); }
.tk-st .m { font-size: 17px; font-weight: 400; }
.tk-step.is-active .tk-sn { color: var(--btn-ink); background: var(--btn); border-color: var(--btn); }
.tk-step.is-active .tk-st { font-size: 16px; color: var(--ink); }
.tk-step.is-done .tk-sn { color: var(--pos-ink); background: color-mix(in srgb, var(--c-pos) 10%, var(--sheet)); border-color: color-mix(in srgb, var(--c-pos) 55%, transparent); }
.tk-step.is-done .tk-st { color: var(--ink-2); }
.tk-step.is-done::before { background: color-mix(in srgb, var(--c-pos) 35%, var(--hair)); }
.tk-step.is-shown .tk-sn { color: var(--muted); background: var(--sheet-2); border-color: var(--hair-strong); }
.tk-sb { grid-column: 2; min-width: 0; display: grid; gap: 10px; padding-top: 6px; }
.tk-badge { padding: 1px 8px; font: 700 11px/1.6 var(--font-ui); letter-spacing: 0.04em; white-space: nowrap; color: var(--ink-2); background: var(--sheet-2); border: 1px solid var(--hair); border-radius: 999px; }
.tk-badge.is-ok { color: var(--pos-ink); background: color-mix(in srgb, var(--c-pos) 10%, var(--sheet)); border-color: color-mix(in srgb, var(--c-pos) 40%, transparent); }
.tk-step.is-new .tk-res { animation: st-in 0.3s ease-out; }
.tk-res { display: grid; gap: 2px; overflow-x: auto; overflow-y: hidden; }
.tk-line { margin: 0; font-size: 19px; line-height: 1.9; }
.tk-picked { font: 15px/1.5 var(--font-ui); color: var(--ink); }
.tk-picked .m { font-size: 17px; }
.tk-why { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.tk-why .m { font-size: 16px; color: var(--ink); }
.tk-ask { margin: 0; font-size: 15.5px; line-height: 1.65; }
.tk-ask .m { font-size: 17.5px; }
.tk-ask .m, .tk-hint-b .m, .tk-why .m, .tk-goal .m { white-space: nowrap; }

/* Vastauskentät ja vaihtoehdot */
.tk-form { display: grid; gap: 10px; margin: 0; }
.tk-fields { display: grid; gap: 12px; }
.tk-field { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 2px; }
.tk-lhs { font-size: 20px; white-space: nowrap; }
.tk-inw { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tk-in {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: 420px;
  min-height: 44px;
  padding: 6px 12px;
  font: 20px/1.3 var(--font-math);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
  background: var(--sheet);
  border: 1.5px solid var(--hair-strong);
  border-radius: 9px;
}
.tk-field.is-num .tk-in { max-width: 200px; }
.tk-in:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.tk-in[aria-invalid="true"] { border-color: var(--neg-ink); }
.tk-unit { flex: none; font: 16px var(--font-ui); color: var(--ink-2); }
.tk-pv { grid-column: 2; margin: 0; min-height: 1.4em; font-size: 13.5px; color: var(--muted); }
.tk-pv .m { font-size: 16px; color: var(--ink); }
.tk-note { margin: -2px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.tk-keys { display: none; gap: 6px; padding-bottom: 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.tk-keys::-webkit-scrollbar { display: none; }
@media (pointer: coarse) {
  .tk-form:focus-within .tk-keys { display: flex; }
}
.tk-keys button {
  flex: none;
  min-width: 44px;
  height: 42px;
  padding: 0 10px;
  font: 18px/1 var(--font-math);
  background: var(--sheet-2);
  border: 1px solid var(--hair);
  border-radius: 9px;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.tk-keys button:active { background: var(--hair); }
.tk-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-btns .btn[disabled] { opacity: 0.5; cursor: default; }
.tk-btns .btn[disabled]:hover { background: var(--sheet); }
.tk-reveal { color: var(--ink-2); }
.tk-choices { display: grid; gap: 8px; }
.tk-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 9px 14px;
  font: 15px/1.5 var(--font-ui);
  text-align: left;
  color: var(--ink);
  background: var(--sheet);
  border: 1.5px solid var(--hair-strong);
  border-radius: 10px;
  cursor: pointer;
}
.tk-choice:hover { background: var(--sheet-2); border-color: var(--ink-2); }
.tk-choice .m { font-size: 17px; }
.tk-choice.is-wrong { color: var(--muted); background: color-mix(in srgb, var(--c-neg) 6%, var(--sheet)); border-color: color-mix(in srgb, var(--c-neg) 45%, transparent); cursor: default; }
.tk-x { flex: none; font-weight: 700; color: var(--neg-ink); }

/* Vihjeet ja palaute */
.tk-hints { display: grid; gap: 8px; }
.tk-hints:empty { display: none; }
.tk-hint { padding: 10px 12px; background: color-mix(in srgb, var(--c-f) 7%, var(--sheet)); border: 1px solid color-mix(in srgb, var(--c-f) 30%, transparent); border-radius: 10px; }
.tk-hint.is-new { animation: st-in 0.25s ease-out; }
.tk-hint-l { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font: 700 11.5px var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--c-f) 70%, var(--ink)); }
.tk-hint-l svg { width: 15px; height: 15px; }
.tk-hint-b { font-size: 15px; line-height: 1.7; }
.tk-hint-b .m { font-size: 17px; }
.tk-review { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.tk-review a { font-weight: 600; color: var(--ink); text-underline-offset: 0.15em; }
.tk-fb { margin-top: 0; }
.tk-fb .rl-fb-t { font-weight: 600; }

/* Valmis tehtävä */
.tk-end { display: grid; gap: 10px; border-left: 3px solid var(--c-pos); }
.tk-end-h { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 17px var(--font-ui); color: var(--pos-ink); }
.tk-end-h svg { width: 20px; height: 20px; }
.tk-answer { font-size: 17px; line-height: 1.7; }
.tk-answer .m { font-size: 19px; }
.tk-stats { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.tk-end-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.tk-end-btns .btn { white-space: normal; text-align: left; text-decoration: none; }
.tk-end-btns a.btn { color: var(--ink); }
@container task (max-width: 560px) {
  .tk-field { grid-template-columns: minmax(0, 1fr); }
  .tk-pv { grid-column: 1; }
  .tk-in, .tk-field.is-num .tk-in { max-width: none; }
  .tk-step { grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; }
  .tk-sh { grid-template-columns: 26px minmax(0, 1fr) auto; column-gap: 10px; }
  .tk-sn { width: 26px; height: 26px; font-size: 13px; }
  .tk-step::before { left: 12px; top: 28px; }
  .tk-title { font-size: 26px; }
  .tk-text { font-size: 16px; }
  .tk-line { font-size: 18px; }
}
html.mobile .tk-side { padding: 12px; }
html.mobile .tk-main .rl-card { padding: 14px; box-shadow: none; }
html.mobile .tk-plot { height: clamp(220px, 38vh, 360px); }
@media (prefers-reduced-motion: reduce) {
  .tk-hint.is-new, .tk-step.is-new .tk-res { animation: none; }
}

/* ---------- Yleistä tietoa (js/tietopankki.js) ----------
   Sanasto, kaavat ja laskusäännöt hakuteoksena: ylhäällä pysyvä hakukenttä ja ryhmälinkit, alla ryhmittäin luettelo,
   jossa jokainen käsite tai kaava on oma vaakarivinsä. Sanaston rivillä on symboli, nimi, arvo ja selitys, kaavan
   rivillä nimi, kaava, selitys ja kuva. Sarakkeet määräytyvät luettelon leveyden mukaan (säiliökysely tplist):
   leveässä kaikki rinnakkain, keskileveässä nimi ja arvo tai kaava allekkain, kapeassa kaikki allekkain. */
.tp-view .lede a { color: var(--ink); font-weight: 600; text-underline-offset: 0.15em; }
.tp-bar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 10px 0;
  background: var(--page);
  border-bottom: 1px solid var(--hair);
}
.tp-search { position: relative; flex: 1 1 280px; max-width: 420px; display: flex; align-items: center; }
.tp-search svg { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.tp-q {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px 8px 38px;
  font-size: 16px; /* iOS ei zoomaa */
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 10px;
}
.tp-q::placeholder { color: var(--muted); }
.tp-jump { flex: 1 1 360px; min-width: 0; display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.tp-jump::-webkit-scrollbar { display: none; }
.tp-chip {
  flex: none;
  padding: 7px 12px;
  font: 700 13.5px/1.2 var(--font-ui);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
}
.tp-chip:hover { background: var(--sheet-2); }
.tp-status { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); }
.tp-status:empty { display: none; }
.tp-status a { color: var(--ink); font-weight: 600; text-underline-offset: 0.15em; }
.tp-group { margin-top: 24px; scroll-margin-top: calc(var(--tp-bar-h, 64px) + 12px); }
.tp-gh { margin: 0; font: 600 26px/1.2 var(--font-math); text-wrap: balance; }
.tp-gh:focus { outline: none; }
.tp-gsub { margin: 4px 0 0; max-width: 70ch; font-size: 14.5px; color: var(--muted); }
.tp-gsub .m { font-size: 16.5px; color: var(--ink-2); }

/* Luettelo ja rivit */
.tp-list {
  container: tplist / inline-size;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.tp-row { display: grid; gap: 4px 14px; align-items: start; padding: 12px 16px; }
.tp-row:not([hidden]) ~ .tp-row:not([hidden]) { border-top: 1px solid var(--hair); }
@media (hover: hover) {
  .tp-row:hover { background: color-mix(in srgb, var(--c-f) 4%, var(--sheet)); }
}
.tp-name { margin: 0; font: 700 15.5px/1.35 var(--font-ui); }
.tp-lab { font: 700 11px/1.3 var(--font-ui); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.tp-desc { min-width: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.tp-desc p { margin: 0; }
.tp-desc p + p { margin-top: 3px; }
.tp-text { font-size: 14.5px; }
.tp-ex .tp-lab, .tp-note .tp-lab, .tp-like .tp-lab { margin-right: 3px; }
.tp-note .tp-lab { color: var(--d-ink); }
.tp-desc .m { font-size: 16px; color: var(--ink); white-space: nowrap; }
.tp-vars { display: flex; flex-wrap: wrap; gap: 0 18px; }
.tp-var .m { margin-right: 3px; }
.tp-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font: 700 13.5px/1.3 var(--font-ui); color: var(--ink); white-space: nowrap; text-underline-offset: 0.15em; }
.tp-link svg { flex: none; width: 14px; height: 14px; color: var(--focus); }

/* Sanaston rivi: symboli, nimi, arvo ja selitys */
.tp-trow { grid-template-columns: 72px minmax(0, 1fr); }
.tp-trow .tp-symcol { grid-column: 1; grid-row: 1 / span 2; }
.tp-trow .tp-name { grid-column: 2; grid-row: 1; align-self: end; }
.tp-trow .tp-val { grid-column: 2; grid-row: 2; }
.tp-trow .tp-desc { grid-column: 1 / -1; grid-row: 3; margin-top: 4px; }
.tp-symcol { display: grid; justify-items: center; gap: 3px; }
.tp-sym {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  max-width: 100%;
  min-height: 52px;
  padding: 0 6px;
  font-size: 28px;
  line-height: 1.15;
  white-space: nowrap;
  color: var(--ink);
  background: color-mix(in srgb, var(--c-f) 8%, var(--sheet));
  border: 1px solid color-mix(in srgb, var(--c-f) 28%, var(--sheet));
  border-radius: 10px;
}
.tp-sym.is-mid { font-size: 20px; }
.tp-sym.is-small { font-size: 15px; }
.tp-say { font-size: 11.5px; line-height: 1.2; color: var(--muted); }
.tp-val { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 0; }
.tp-v { min-width: 0; font-size: 14.5px; color: var(--ink); }
.tp-v .m { font-size: 18px; }
.tp-si { display: inline-flex; align-items: baseline; gap: 5px; margin-right: 12px; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
.tp-si .m { font-size: 16px; color: var(--ink); }

/* Kaavan ja säännön rivi: nimi, kaava (tai numeroitu luettelo), selitys ja kuva */
.tp-frow { grid-template-columns: minmax(0, 1fr) auto; }
.tp-frow .tp-name { grid-column: 1 / -1; grid-row: 1; }
.tp-frow :is(.tp-formula, .tp-steps) { grid-column: 1; grid-row: 2; }
.tp-frow .tp-fig { grid-column: 2; grid-row: 1 / span 2; }
.tp-frow .tp-desc { grid-column: 1 / -1; grid-row: 3; }
.tp-formula {
  justify-self: start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 22px;
  max-width: 100%;
  padding: 4px 10px;
  font-size: 18px;
  line-height: 1.75;
  background: var(--sheet-2);
  border-radius: 8px;
  overflow-x: auto;
}
.tp-fl { white-space: nowrap; }
.tp-steps { margin: 0; padding: 0; list-style: none; counter-reset: tp; display: grid; gap: 5px; font-size: 14px; line-height: 1.35; }
.tp-steps li { counter-increment: tp; display: flex; align-items: center; gap: 9px; }
.tp-steps li::before { content: counter(tp); flex: none; display: grid; place-items: center; width: 21px; height: 21px; font: 700 12px/1 var(--font-ui); color: var(--btn-ink); background: var(--btn); border-radius: 50%; }
.tp-fig { align-self: center; display: block; width: 88px; height: auto; overflow: visible; }

/* Osa-alueen rivi: nimi ja sisältö, leveässä luettelossa rinnakkain */
.tp-arow { grid-template-columns: minmax(0, 1fr); }
@container tplist (min-width: 640px) {
  .tp-arow { grid-template-columns: 270px minmax(0, 1fr); column-gap: 22px; align-items: baseline; }
}

/* Keskileveä luettelo. Sanasto: symboli, nimi ja arvo allekkain, selitys oikealla.
   Kaavat: nimi ja kuva vasemmalla, kaava ja selitys oikealla. */
@container tplist (min-width: 600px) {
  .tp-row { grid-template-rows: auto 1fr; } /* nimi ja arvo tai kaava pysyvät yhdessä, vaikka selitys on pitkä */
  .tp-trow { grid-template-columns: 80px 210px minmax(0, 1fr); column-gap: 18px; }
  .tp-trow .tp-name { align-self: start; }
  .tp-trow .tp-desc { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; }
  .tp-frow { grid-template-columns: 200px minmax(0, 1fr); column-gap: 20px; align-items: baseline; }
  .tp-formula { font-size: 19px; }
  .tp-fig { width: 96px; }
  .tp-frow .tp-name { grid-column: 1; }
  .tp-frow :is(.tp-formula, .tp-steps) { grid-column: 2; grid-row: 1; }
  .tp-frow .tp-fig { grid-column: 1; grid-row: 2; align-self: start; margin-top: 6px; }
  .tp-frow .tp-desc { grid-column: 2; grid-row: 2; }
}
/* Leveä luettelo: kaikki samalla rivillä, ensimmäiset tekstirivit samalla perustasolla.
   Kaavarivi tarvitsee enemmän tilaa kuin sanastorivi, joten se vaihtuu leveämmässä luettelossa. */
@container tplist (min-width: 980px) {
  .tp-trow { grid-template-rows: none; align-items: baseline; grid-template-columns: 84px 190px 270px minmax(0, 1fr); column-gap: 22px; }
  .tp-trow .tp-symcol { grid-row: 1; }
  .tp-trow .tp-name { align-self: auto; }
  .tp-trow .tp-val { grid-column: 3; grid-row: 1; }
  .tp-trow .tp-desc { grid-column: 4; grid-row: 1; }
}
@container tplist (min-width: 1060px) {
  .tp-frow { grid-template-rows: none; align-items: baseline; grid-template-columns: 210px 320px minmax(0, 1fr) auto; column-gap: 22px; }
  .tp-frow .tp-name { grid-row: 1; }
  .tp-frow :is(.tp-formula, .tp-steps) { grid-column: 2; grid-row: 1; }
  .tp-frow .tp-desc { grid-column: 3; grid-row: 1; }
  .tp-frow:not(.has-fig) .tp-desc { grid-column: 3 / -1; }
  .tp-frow .tp-fig { grid-column: 4; grid-row: 1; align-self: center; margin-top: 0; }
}

/* Summa- ja tulomerkintä rajoineen */
.tp-op { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin-right: 0.12em; line-height: 1; }
.tp-op-s { font-size: 1.45em; line-height: 1; }
.tp-op-x { font-size: 0.6em; }
/* Kaavarivien kuvat */
.tp-fig .tf-s { fill: color-mix(in srgb, var(--c-f) 12%, var(--sheet)); stroke: var(--c-f); stroke-width: 1.8; stroke-linejoin: round; }
.tp-fig .tf-s2 { fill: color-mix(in srgb, var(--c-f) 22%, var(--sheet)); }
.tp-fig .tf-s3 { fill: color-mix(in srgb, var(--c-f) 32%, var(--sheet)); }
.tp-fig .tf-ln { fill: none; stroke: var(--c-f); stroke-width: 2; stroke-linecap: round; }
.tp-fig .tf-h { fill: none; stroke: var(--c-d); stroke-width: 1.6; stroke-dasharray: 4 3; }
.tp-fig .tf-r { fill: none; stroke: var(--c-d); stroke-width: 2; stroke-linecap: round; }
.tp-fig .tf-hid { fill: none; stroke: var(--c-f); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0.75; }
.tp-fig .tf-k { fill: none; stroke: var(--ink-2); stroke-width: 1.2; }
.tp-fig .tf-ax { fill: none; stroke: var(--axis); stroke-width: 1.2; }
.tp-fig .tf-dot { fill: var(--c-d); }
.tp-fig .tf-t { font: italic 16px var(--font-math); fill: var(--ink); }
.tp-fig .tf-o { fill: var(--d-ink); }
.tp-fig .tf-g { font-style: normal; }
/* Matemaattiset mallit: vaaka, funktiokone, toinen suora (vihreä), epäyhtälön väli ja pienempi teksti */
.tp-fig .tf-i { font-style: italic; }
.tp-fig .tf-sm { font-size: 13.5px; }
.tp-fig .tf-big { font-size: 24px; }
.tp-fig .tf-bar { fill: none; stroke: var(--ink-2); stroke-width: 2.4; stroke-linecap: round; }
.tp-fig .tf-ln2 { fill: none; stroke: var(--c-s); stroke-width: 2; stroke-linecap: round; }
.tp-fig .tf-band { fill: none; stroke: color-mix(in srgb, var(--c-d) 40%, transparent); stroke-width: 7; stroke-linecap: round; }
.tp-fig .tf-dotk { fill: var(--ink); }
#tp-mallit .tp-frow .tp-fig { width: 112px; } /* kuvissa on tekstiä (esim. 2x + 5), joten ne ovat muita suurempia */
@container tplist (min-width: 600px) {
  #tp-mallit .tp-frow .tp-fig { width: 132px; }
}

/* Leveä rivi (vertailutaulukko ja iso kuva): nimi, selitys ja koko levyinen sisältö allekkain */
.tp-wrow { grid-template-columns: minmax(0, 1fr); }
.tp-wide { container: tpwide / inline-size; margin-top: 8px; }
.tp-cmp { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.tp-cmp :is(th, td) { padding: 7px 12px 7px 0; text-align: left; vertical-align: baseline; border-top: 1px solid var(--hair); }
.tp-cmp thead th { padding-top: 0; font: 700 11px/1.3 var(--font-ui); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); border-top: 0; }
.tp-cmp tbody th { font: 700 14px/1.4 var(--font-ui); color: var(--ink); white-space: nowrap; }
.tp-cmp td:nth-child(3) { color: var(--ink); }
@container tpwide (max-width: 559px) {
  /* Kapeassa jokainen rakennusosa on oma lohkonsa, ja sarakkeiden nimet ovat solujen edessä. */
  .tp-cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tp-cmp, .tp-cmp tbody, .tp-cmp tr { display: block; }
  .tp-cmp tr { padding: 8px 0; border-top: 1px solid var(--hair); }
  .tp-cmp tr:first-child { border-top: 0; padding-top: 0; }
  .tp-cmp :is(th, td) { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; padding: 2px 0; border-top: 0; }
  .tp-cmp tbody th { display: block; padding-bottom: 3px; }
  .tp-cmp td::before { content: attr(data-l); font: 700 11px/1.9 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
}
.tp-duo { display: grid; gap: 12px 24px; }
@container tpwide (min-width: 640px) {
  .tp-duo { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); align-items: center; }
}
.tp-desc .tp-fig.tp-big { grid-column: auto; width: 100%; max-width: 420px; margin: 0; }
.tp-legend { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tp-legend li { display: flex; gap: 10px; align-items: baseline; }
.tp-legend b { color: var(--ink); }
.tp-legend .m { white-space: nowrap; }
.tp-key { flex: none; position: relative; top: -3px; width: 22px; height: 0; border-top: 3px solid var(--c-f); border-radius: 2px; }
.tp-key.is-s { border-top-color: var(--c-s); }
.tp-key.is-eq { border-top: 2px dashed var(--c-d); }
.tp-key.is-in { height: 7px; top: 0; border: 0; background: color-mix(in srgb, var(--c-d) 40%, transparent); }
/* Sähkötekniikan suureet: yksikkö ja kaava allekkain, pikataulukko, tehokolmio ja taulukosta valitun rivin välähdys */
.tp-val.is-stack { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; align-items: baseline; }
.tp-uname { font-size: 14px; color: var(--ink-2); }
.tp-urel { display: block; margin-top: 1px; font-size: 13px; color: var(--muted); }
.tp-v .tp-urel .m { font-size: 15px; color: var(--ink-2); }
.tp-trow { scroll-margin-top: calc(var(--tp-bar-h, 64px) + 12px); }
.tp-row.is-target { animation: tp-flash 1.8s ease-out; }
@keyframes tp-flash { from { background: color-mix(in srgb, var(--c-f) 18%, var(--sheet)); } }
@media (hover: hover) {
  .tp-row:has(.tp-qtab):hover { background: none; }
}
.tp-qtab { width: 100%; max-width: 900px; border-collapse: collapse; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.tp-qtab :is(th, td) { padding: 6px 14px 6px 0; text-align: left; vertical-align: baseline; border-top: 1px solid var(--hair); }
.tp-qtab thead th { padding-top: 0; font: 700 11px/1.3 var(--font-ui); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); border-top: 0; }
/* Sähkötekniikan suureet: ryhmät omissa laatikoissaan, leveällä näytöllä kahdessa sarakkeessa */
.tp-qgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 600px), 1fr)); gap: 0 20px; align-items: start; }
.tp-qgrid.is-one { grid-template-columns: minmax(0, 1fr); }
.tp-qgrid .tp-qtab { max-width: none; }
/* Sähkötekniikan lait: laki, kaavat ja lyhyt selitys. Kapeassa rivi on kolmena allekkaisena osana. */
.tp-ltab :is(th, td) { vertical-align: top; padding: 9px 18px 9px 0; }
.tp-ltab { table-layout: fixed; }
.tp-ltab :is(thead, tbody) :is(th, td):nth-child(1) { width: 15em; }
.tp-ltab :is(thead, tbody) :is(th, td):nth-child(2) { width: 17em; }
.tp-ltab td.m { width: auto; }
.tp-ltab .tp-lf { white-space: normal; }
.tp-ltab .tp-lf > span { display: block; padding: 1px 0; white-space: nowrap; }
.tp-ltab .tp-ls { max-width: 38em; font-size: 14px; }
@container tpwide (max-width: 699px) {
  .tp-ltab thead { display: none; }
  .tp-ltab, .tp-ltab tbody { display: block; }
  .tp-ltab tr { display: grid; gap: 3px; padding: 10px 0; border-top: 1px solid var(--hair); }
  .tp-ltab tbody tr:first-child { border-top: 0; }
  .tp-ltab :is(th, td) { display: block; width: auto; padding: 0; border: 0; }
  .tp-ltab .tp-lf > span { white-space: normal; }
}
.tp-qtab tbody th:not([colspan]) { font-weight: 600; }
.tp-qtab a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hair-strong); text-underline-offset: 0.18em; }
.tp-qtab a:hover { text-decoration-color: currentColor; }
.tp-qtab .m { font-size: 17px; color: var(--ink); white-space: nowrap; }
.tp-qtab td.m { width: 4.5em; }
@container tpwide (max-width: 519px) {
  .tp-qtab .tp-qf { display: none; } /* kapeassa kaavat ovat rivien selityksissä */
  .tp-qtab :is(th, td) { padding-right: 10px; }
}
.tp-fig .tf-pw { fill: color-mix(in srgb, var(--c-f) 8%, var(--sheet)); stroke: none; }
.tp-key.is-d { border-top-color: var(--c-d); }
.tp-key.is-ink { border-top-color: var(--ink-2); }
.tp-key.is-none { border-top-color: transparent; }
/* ---------- Evästeet ja tallennus: suostumuspalkki (src/components/Evaste.astro) ---------- */
.cc {
  position: fixed; z-index: 300; left: 16px; bottom: 16px; width: min(540px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  padding: 18px 20px; background: var(--sheet); border: 1px solid var(--hair-strong); border-radius: var(--radius);
  box-shadow: var(--shadow), 0 24px 60px -12px rgba(0, 0, 0, 0.3);
}
.cc[hidden] { display: none; }
.cc-title { margin: 0 0 6px; font: 700 17px/1.3 var(--font-ui); }
.cc-title:focus { outline: none; }
.cc-text { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.cc-text + .cc-text { margin-top: 6px; }
.cc-text a { color: var(--ink); font-weight: 600; text-underline-offset: 0.15em; }
.cc-opts { display: grid; gap: 14px; margin-top: 14px; }
.cc-opts[hidden], .cc-btns [hidden] { display: none; }
.cc-opt label { display: flex; gap: 10px; align-items: center; font: 700 14.5px/1.3 var(--font-ui); cursor: pointer; }
.cc-opt input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--btn); }
.cc-opt p { margin: 4px 0 0 30px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.cc-opt code { font-size: 12.5px; }
.cc-opt .cc-note { color: var(--ink-2); font-weight: 600; }
.cc-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cc-btns .btn { flex: 1 1 auto; justify-content: center; }
.cc :is(button, a, input):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
html.mobile .cc { left: 0; right: 0; bottom: 0; width: auto; border-radius: var(--radius) var(--radius) 0 0; padding-bottom: calc(env(safe-area-inset-bottom) + 16px); }
@media print { .cc { display: none; } }

/* ---------- Etusivu (src/scripts/etusivu.js) ---------- */
.home { padding-bottom: 12px; }
.home-head { padding-block: 6px 8px; }
.home-continue {
  display: inline-flex; align-items: center; margin-top: 18px; padding: 10px 18px; border-radius: 999px;
  background: var(--btn); color: var(--btn-ink); font: 700 15px/1.2 var(--font-ui); text-decoration: none;
}
.home-continue:hover { filter: brightness(1.12); }
.home-continue[hidden] { display: none; }
.home-sec { margin-top: 36px; }
.home-sh { margin: 0; font: 600 28px/1.2 var(--font-math); }
.home-gh { margin: 20px 0 0; font: 700 11.5px/1.3 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.home-grid { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.home-grid li { display: flex; }
.home-card {
  display: flex; flex: 1; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1px solid var(--hair); border-radius: var(--radius);
  background: var(--sheet); box-shadow: var(--shadow); color: inherit; text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}
.home-card:hover { border-color: var(--hair-strong); background: color-mix(in srgb, var(--c-f) 4%, var(--sheet)); }
.home-card:focus-visible, .home-continue:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.home-card .topic-ico { width: 30px; height: 30px; margin-top: 1px; }
html.mobile .home-head { padding-top: 10px; }
html.mobile .home-sh { font-size: 24px; }
/* Etusivun yläpalkissa on vain iso logo nimineen sekä asetukset ja kielivalitsin oikealla */
html[data-topic="koti"] :is(.topic-nav, .topbar-actions, .more-nav) { display: none !important; }
html[data-topic="koti"] .settings-nav { margin-left: auto; position: static; }
html[data-topic="koti"] .topbar { position: relative; }
/* Painikkeet ovat oikeassa reunassa, joten valikot avautuvat vasemmalle (asetukset yläpalkin, kieli painikkeensa reunaan) */
html[data-topic="koti"] :is(.settings-menu, .lang-menu) { left: auto; right: 0; }
html[data-topic="koti"] .lang-nav { margin-left: 0; }
html[data-topic="koti"] .brand { gap: 16px; font-size: 30px; }
html[data-topic="koti"] .brand-logo { width: 72px; height: 72px; }
html[data-topic="koti"] .brand::after { display: none; }
html.mobile[data-topic="koti"] .brand span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
html.mobile[data-topic="koti"] .brand { font-size: 24px; gap: 12px; }
html.mobile[data-topic="koti"] .brand-logo { width: 52px; height: 52px; }

/* Tulostus: pelkät luettelot */
@media print {
  :root:is([data-topic="sanasto"], [data-topic="kaavat"], [data-topic="saannot"], [data-topic="osa-alueet"], [data-topic="mallit"], [data-topic="suureet"], [data-topic="lait"]) :is(.topbar, .tp-bar, .tp-status, .tp-link) { display: none !important; }
  .tp-list { box-shadow: none; }
  .tp-row { break-inside: avoid; }
}

/* ---------- Kapeat näytöt ---------- */
@media (max-width: 560px) {
  .stage, .panel { gap: 12px; }
  .fn-block, .derived, .graph-card, .card-sub, .pane { padding: 12px 14px; }
  .fn-label, .fn-sym { font-size: 20px; }
  #fn-input { font-size: 19px; }
  .plot-tag { font-size: 15px; }
  .big-value { font-size: 30px; }
  .legend { gap: 6px 14px; font-size: 13.5px; }
  .ctl-head { flex-wrap: wrap; }
}

/* ==========================================================================
   Puhelin: sovellusasettelu (html.mobile asetetaan Head.astro:n alun skriptissä)
   Pystyasennossa funktiorivi pysyy ylhäällä ja kuvaaja on sen alla sivun alussa; kuvaaja vierii sivun
   mukana, ja alla on valitun välilehden sisältö. Vaaka-asennossa kuvaaja on vasemmalla.
   ========================================================================== */
html.mobile {
  --thumb: 26px;
  --mg: 14px;
  --mg-l: max(var(--mg), env(safe-area-inset-left));
  --mg-r: max(var(--mg), env(safe-area-inset-right));
  --tabbar-h: 64px;
  touch-action: manipulation;          /* ei kaksoisnapautuszoomausta */
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;         /* ei vahingossa päivitystä vedettäessä */
}
html.mobile body { background: var(--sheet); }
html.mobile:not(.lesson) body { background: var(--page); }   /* simulaattorin kortit leijuvat sivun taustalla */
html.mobile .page {
  max-width: none;
  padding: 0 var(--mg-r) calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px) var(--mg-l);
}
html.mobile .layout { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
html.mobile .stage,
html.mobile .fn-block,
html.mobile .graph-card { display: contents; }
/* Funktion apupainikkeet: puhelimessa esimerkkifunktiot ovat Säädöt-välilehden kortti ja merkit merkkirivillä (#mathkeys),
   joten pudotusvalikon kääreet häviävät ja painikkeet piilotetaan. */
html.mobile :is(.fn-tools, #presets-pop, #presets-panel) { display: contents; }
html.mobile :is(#presets-btn, #symbols-pop) { display: none; }

/* Välilehdet: näkyvissä vain avoimen välilehden osat */
html.mobile[data-view="saadot"] [data-tab]:not([data-tab~="saadot"]),
html.mobile[data-view="laskut"] [data-tab]:not([data-tab~="laskut"]),
html.mobile[data-view="kaaviot"] [data-tab]:not([data-tab~="kaaviot"]),
html.mobile[data-view="opi"] [data-tab]:not([data-tab~="opi"]) { display: none !important; }

html.mobile .fn-block > .pane-title { display: none; }   /* funktiorivi on puhelimessa kiinteä yläpalkki ilman otsikkoa */
html.mobile .fn-top { order: -3; }
html.mobile .graph-dock { order: -2; }
html.mobile .task-banner { order: -1; }
html.mobile .controls { order: 1; }
html.mobile .controls + .m-head,
html.mobile .legend { order: 2; }
html.mobile #presets-panel > .m-head,
html.mobile .presets { order: 3; }
html.mobile .hint { order: 4; }

/* Yläpalkki vierii pois näkyvistä; funktiorivi ja kuvaaja jäävät kiinni yläreunaan. */
html.mobile .topbar {
  position: relative;
  gap: 8px 10px;
  margin: 0 calc(-1 * var(--mg-r)) 0 calc(-1 * var(--mg-l));
  padding: calc(env(safe-area-inset-top) + 10px) var(--mg-r) 10px var(--mg-l); /* painikkeiden ylä- ja alapuolelle yhtä paljon tilaa */
  border-bottom: 0;
}
html.mobile .brand span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
html.mobile .brand::after { display: none; }
html.mobile .topbar-actions { gap: 8px 10px; }
/* Yläpalkki on yksi rivi: logo, aihevalikot ja Lisää-valikko kuvakkeina vasemmalla, asetukset ja kieli oikeassa reunassa.
   Painikkeiden tekstit ovat edelleen ruudunlukijalle (.topic-name piilotetaan vain näkyvistä). Muistilista, Harjoittele ja
   Käsitteet ovat Lisää-valikossa (.more-nav). */
html.mobile .topbar { flex-wrap: nowrap; gap: 6px; }
html.mobile .topbar-actions { display: none; }
html.mobile .brand { order: 0; flex: none; }
html.mobile #topic-nav { order: 1; }
html.mobile #sahko-nav { order: 2; }
html.mobile .more-nav { order: 3; }
html.mobile .settings-nav { order: 8; margin-left: auto; }
html.mobile .lang-nav { order: 9; }
html.mobile .topic-nav .topic-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
html.mobile .topic-btn { gap: 4px; padding: 5px 7px 5px 8px; }
html.mobile .topic-btn .chev { width: 13px; height: 13px; }
html.mobile .more-nav { display: block; position: static; }
html.mobile .more-btn { width: 42px; height: 42px; }
html.mobile :is(.topic-nav, .settings-nav, .lang-nav, .practice-nav) { position: static; }
html.mobile .topic-btn, html.mobile .practice-btn { min-height: 42px; }
html.mobile :is(.settings-btn, .lang-btn) { width: 42px; height: 42px; }
html.mobile :is(.settings-menu, .lang-menu, .practice-menu) { left: var(--mg-l); right: var(--mg-r); width: auto; top: calc(100% + 4px); }
html.mobile .lang-menu button { min-height: 52px; }
html.mobile .practice-menu button { min-height: 56px; }
html.mobile .topic-menu { left: var(--mg-l); right: var(--mg-r); width: auto; max-width: none; top: calc(100% + 4px); }
html.mobile .topic-menu a { min-height: 56px; }

/* Funktiorivi */
html.mobile .fn-top {
  position: sticky;
  top: 0;
  z-index: 22;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* kenttä kapenee kapealle näytölle */
  gap: 6px;
  margin-inline: calc(-1 * var(--mg-l)) calc(-1 * var(--mg-r));
  padding: calc(env(safe-area-inset-top) + 10px) var(--mg-r) 8px var(--mg-l);
  background: var(--sheet);
}
html.mobile .fn-row { gap: 8px; }
html.mobile .fn-label, html.mobile .fn-sym { font-size: 20px; }
html.mobile #fn-input { padding: 7px 11px; font-size: 18px; } /* vähintään 16px: iOS ei zoomaa */
html.mobile .fn-top .mathkeys button { height: 42px; }
html.mobile .fn-top.is-editing .mathkeys { display: flex; }
html.mobile .fn-top:not(.is-editing):not(:has(.fn-status.is-error, .fn-help[open])) .fn-meta { display: none; }

/* Kuvaaja, a-säädin, lukema ja h-säädin ovat funktiorivin alla sivun alussa ja vierivät sivun mukana. */
html.mobile .graph-dock {
  display: flex;
  flex-direction: column;
  margin: -14px calc(-1 * var(--mg-r)) 0 calc(-1 * var(--mg-l));
  padding: 0 var(--mg-r) 0 var(--mg-l);
  background: var(--sheet);
  border-bottom: 1px solid var(--hair);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
html.mobile .plot-f { height: clamp(170px, 34svh, 400px); } /* kiinteä korkeus; tilaa funktiolle ja säätimille */
html.mobile .plot-f canvas { touch-action: none; }   /* yksi sormi siirtää, kaksi zoomaa */
html.mobile #tag-f, html.mobile .bubble { display: none; }
html.mobile .zoom-tools button, html.mobile .full-btn { width: 40px; height: 40px; }
html.mobile .zoom-note { left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 4px 9px; font-size: 12.5px; }
html.mobile .slider-a { margin-top: 2px; padding-bottom: 0; }
html.mobile .gesture-hint {
  display: block;
  position: absolute;
  left: 8px;
  top: 8px;
  max-width: calc(100% - 70px);
  margin: 0;
  padding: 5px 11px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--btn-ink);
  background: var(--btn);
  border-radius: 10px;
  opacity: 0.9;
  pointer-events: none;
}
html.mobile .readout {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding-top: 2px;
}
/* Kuvaajan alla: h-säädin, sen arvo ja animaatiopainike yhdellä rivillä (js/app.js, placeControls). Säätimen otsikko
   jää ruudunlukijalle, ja arvon reuna on lähestyvän pisteen (Q) värinen kuten a:n arvolla pisteen P väri. */
:is(html.mobile, html.plot-full) .dock-ctl { display: flex; align-items: center; gap: 8px; padding: 2px 0 4px; }
:is(html.mobile, html.plot-full) .dock-ctl .ctl-h { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; }
:is(html.mobile, html.plot-full) .dock-ctl .ctl-head { display: contents; }
:is(html.mobile, html.plot-full) .dock-ctl .ctl-head label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
:is(html.mobile, html.plot-full) .dock-ctl .mini { display: none; }
:is(html.mobile, html.plot-full) .dock-ctl input[type="range"] { flex: 1 1 auto; min-width: 64px; }
:is(html.mobile, html.plot-full) .dock-ctl .ctl-value {
  flex: none;
  min-height: 36px;
  margin: 0;
  padding: 2px 8px;
  font-size: 17px;
  background: var(--sheet);
  border: 1px solid var(--c-s);
  border-radius: 8px;
}
:is(html.mobile, html.plot-full) .dock-ctl .ctl-value .m { font-size: 17px; }
:is(html.mobile, html.plot-full) .dock-ctl #btn-limit { flex: none; min-height: 40px; padding: 6px 12px; }
/* x → ∞: lähestyvän pisteen kohta x näkyy jo h-rivillä, joten lukemassa on vain raja-arvo. */
:is(html.mobile, html.plot-full)[data-lim="inf"] .readout-a { display: none; }
@media (max-width: 379px) {
  html.mobile .dock-ctl #btn-limit { padding: 6px 10px; }
  html.mobile .dock-ctl #btn-limit .btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Puhelin: a- ja h-säädin ovat identtiset rivit allekkain. Arvo (a = 1, h = 1) on säätimen alussa kiinni, ja sarakkeen leveys
   on kummallakin sama. Rivillä h on lisäksi h → 0 -painike. Lukema (f′(a), tangentin yhtälö) on rivien alla. */
html.mobile .dock-sliders {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 10px;
  padding: 10px 0 8px;
}
html.mobile .dock-sliders :is(.readout, .dock-ctl, .ctl-h, .ctl-head) { display: contents; }
html.mobile .dock-sliders :is(.readout-a, .ctl-value) {
  min-height: 40px;
  padding: 2px 10px;
  text-align: center;
}
html.mobile .dock-sliders .readout-a { grid-area: 1 / 1; }
html.mobile .dock-sliders .slider-a { grid-area: 1 / 2; margin: 0; padding: 0; }
html.mobile[data-lim="inf"] .dock-sliders .slider-a { grid-column: 1 / 3; }
html.mobile .dock-sliders .ctl-value { grid-area: 2 / 1; }
html.mobile .dock-sliders input[type="range"] { grid-area: 2 / 2; }
html.mobile .dock-sliders #btn-limit { grid-area: 2 / 3; }
html.mobile .dock-sliders .readout-text { grid-area: 3 / 1 / 4 / -1; }
.readout-a {
  flex: none;
  margin: 0;
  padding: 2px 8px;
  font-size: 17px;
  background: var(--sheet);
  border: 1px solid var(--c-d);
  border-radius: 8px;
}
.readout-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px 16px;
  white-space: nowrap;
  overflow: hidden;
  font-size: 14px;
  color: var(--ink-2);
}
.readout-text .m { font-size: 17px; color: var(--ink); }
/* Integraalin rajat mahtuvat lukemariville (rivi leikkaa ylivuodon) */
.readout-text:has(.int) { padding-block: 5px; }
.readout-text .int-s { font-size: 1.35em; }
.readout-text .int-lims { font-size: 0.55em; }
.readout-text .int-lims > span:first-child { margin-top: -0.3em; }
.readout-text .int-lims > span:last-child { margin-bottom: -0.35em; }
.ro-note { flex: none; font-size: 13px; color: var(--muted); }
.ro-tan { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ro-tan .m { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Välilehtien sisältö */
html.mobile .m-head { display: block; margin: 4px 0 -6px; font: 700 14.5px var(--font-ui); }
html.mobile .controls { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 4px; }
html.mobile .btn { min-height: 42px; padding: 10px 14px; }
html.mobile .btn-small { min-height: 44px; padding: 6px 12px; }
html.mobile .rl-ans { min-height: 44px; box-sizing: border-box; }
html.mobile .rl-qexpr .frac .rl-ans { min-height: 40px; }
@media (orientation: landscape) and (max-height: 540px) { html.mobile :is(.rl-bar, .tp-bar) { position: static; } } /* vaaka-asennossa palkki ei vie vain tilaa */
html.mobile .btn-row .btn { flex: 1 1 auto; justify-content: center; }
html.mobile .legend { display: grid; gap: 0; font-size: 15px; }
html.mobile .legend-item, html.mobile .legend .toggle { min-height: 44px; border-bottom: 1px solid var(--hair); }
html.mobile .toggle input { width: 20px; height: 20px; }
html.mobile .chip { padding: 8px 14px; font-size: 17px; }
html.mobile .ds-lhs, html.mobile .ds-eq { font-size: 17px; }
html.mobile .presets { gap: 8px; }
html.mobile .plot-d { height: clamp(170px, 30svh, 260px); }
html.mobile .hint .for-desktop { display: none; }
html.mobile .hint .for-mobile { display: inline; }
html.mobile .panel { gap: 14px; }
html.mobile :is(.pane, .derived, .card-sub) { padding: 14px; }
/* Säädöt-välilehti: painikkeet, selite ja esimerkkifunktiot ovat omia kortteja, ja otsikko on kortin yläpuolella. */
html.mobile:not(.lesson) :is(.controls, .legend, .presets) {
  padding: 14px;
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
html.mobile:not(.lesson) .legend { padding-block: 2px; }
html.mobile .legend > :last-child { border-bottom: 0; }
html.mobile[data-lim="inf"] .controls { display: none; }  /* x → ∞: painikkeet ovat kuvaajan alla, joten kortti jäisi tyhjäksi */
html.mobile .lim-btn { padding: 9px 6px; }
html.mobile[data-view="opi"] .masthead { padding-top: 14px; }
html.mobile .reference { margin-top: 28px; }
html.mobile .app-card { margin-top: 28px; }
html.mobile .footer { margin-top: 28px; }

/* Välilehtipalkki */
html.mobile .tabbar {
  position: fixed;
  z-index: 40;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr; /* välilehtien määrä riippuu aiheesta */
  padding: 6px max(6px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  background: var(--sheet);
  border-top: 1px solid var(--hair);
  user-select: none;
  -webkit-user-select: none;
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 52px;
  padding: 2px 0;
  font: 600 12px/1.2 var(--font-ui);
  color: var(--muted);
  background: none;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
}
.tab-ico { display: grid; place-items: center; width: 58px; height: 30px; border-radius: 15px; transition: background-color 0.15s; }
.tab-ico svg { width: 22px; height: 22px; }
.tab[aria-current="page"] { color: var(--ink); }
.tab[aria-current="page"] .tab-ico { background: color-mix(in srgb, var(--ink) 11%, transparent); }
html.mobile .toast { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px); }
html.mobile .value-dialog { margin-top: calc(env(safe-area-inset-top) + 12svh); margin-bottom: auto; }
/* Käsitteet: paneeli nousee alareunasta (vaaka-asennossa keskellä) */
html.mobile .info-btn { min-height: 42px; }
html.mobile .info-dialog {
  width: 100%;
  max-width: 680px;
  max-height: calc(100% - max(24px, env(safe-area-inset-top) + 12px));
  margin: auto auto 0;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
}
html.mobile .info-dialog[open] { animation-name: info-up; }
@keyframes info-up { from { opacity: 0.5; transform: translateY(48px); } }
html.mobile .info-head { padding: 12px max(8px, env(safe-area-inset-right)) 10px max(18px, env(safe-area-inset-left)); }
html.mobile .info-body { padding: 0 max(18px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
/* Kapeilla puhelimilla Harjoittele- ja Käsitteet-painikkeissa on pelkkä kuvake, jotta logo, aihevalikko, asetukset ja
   painikkeet mahtuvat mahdollisimman usein yhdelle riville; nimi jää ruudunlukijalle. */
@media (max-width: 419px) {
  .info-btn, .practice-btn { padding-inline: 10px; }
  .practice-btn .chev { display: none; }
  .info-btn-label, .practice-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Opetusaiheet (sähkötekniikka) puhelimessa: ei välilehtipalkkia, ja kohdan valitsin pysyy ylhäällä */
html.mobile.lesson .page { padding-bottom: calc(env(safe-area-inset-bottom) + 24px); }
html.mobile .rules-head { padding: 10px 0 14px; }
html.mobile .rules-head h1 { font-size: 34px; }
html.mobile .rules-head .lede { margin-top: 8px; font-size: 15px; }
html.mobile .rl-bar {
  margin: 0 calc(-1 * var(--mg-r)) 4px calc(-1 * var(--mg-l));
  padding: calc(env(safe-area-inset-top) + 8px) var(--mg-r) 8px var(--mg-l);
  background: var(--sheet);
  border-bottom: 1px solid var(--hair);
}
html.mobile .rl-name { font-size: 26px; }
html.mobile .rl-intro { font-size: 16px; }
html.mobile .rl-card { padding: 14px; box-shadow: none; }
html.mobile .rl-qexpr { font-size: 22px; }
/* Yleistä tietoa puhelimessa: hakukenttä ja ryhmälinkit pysyvät ylhäällä reunasta reunaan */
html.mobile .tp-bar {
  margin: 0 calc(-1 * var(--mg-r)) 0 calc(-1 * var(--mg-l));
  padding: calc(env(safe-area-inset-top) + 8px) var(--mg-r) 8px var(--mg-l);
  background: var(--sheet);
}
html.mobile .tp-search { flex-basis: 100%; max-width: none; }
html.mobile .tp-jump { margin-right: calc(-1 * var(--mg-r)); padding-right: var(--mg-r); }
html.mobile .tp-group { margin-top: 22px; }
html.mobile .tp-gh { font-size: 23px; }
html.mobile .tp-list { box-shadow: none; }
html.mobile .tp-row { padding: 12px 14px; }

/* Vaaka-asento: kuvaaja vasemmalla koko korkeudelta, välilehdet oikealla */
@media (orientation: landscape) {
  html.mobile { --dock-w: clamp(300px, 56vw, 640px); }
  html.mobile .graph-dock {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    width: var(--dock-w);
    margin: 0;
    padding: max(8px, env(safe-area-inset-top)) 12px max(4px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    border-bottom: 0;
    border-right: 1px solid var(--hair);
  }
  html.mobile .plot-f { flex: 1 1 auto; height: auto; min-height: 0; }
  /* Opetusaiheissa ei ole kuvaajaa, joten sivu käyttää koko leveyden kuten Opi-välilehti. */
  html.mobile:not([data-view="opi"]):not(.lesson) .page { padding-left: calc(var(--dock-w) + var(--mg)); }
  html.mobile:not([data-view="opi"]) .tabbar { left: var(--dock-w); }
  html.mobile .fn-top { margin-left: calc(-1 * var(--mg)); padding-left: var(--mg); }
  html.mobile:not([data-view="opi"]):not(.lesson) .topbar { margin-left: calc(-1 * var(--mg)); padding-left: var(--mg); }
  html.mobile:not([data-view="opi"]):not(.lesson) :is(.topic-menu, .settings-menu, .lang-menu, .practice-menu) { left: var(--mg); }
}

/* ---------- Kuvaaja koko näytölle (html.plot-full, js/app.js setPlotFull) ----------
   Kuvaaja täyttää ruudun, ja sen alla ovat a-säädin, lukema sekä h-säädin ja animaatiopainike. */
html.plot-full, html.plot-full body { overflow: hidden; }
html.plot-full .graph-dock {
  position: fixed;
  inset: 0;
  z-index: 46;
  display: flex;
  flex-direction: column;
  width: auto;
  margin: 0;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: var(--sheet);
  border: 0;
}
html.plot-full .plot-f { flex: 1 1 auto; height: auto; min-height: 0; }
html.plot-full .slider-a { margin-top: 2px; padding-bottom: 0; }
html.plot-full .bubble { display: none; }
html.plot-full .readout { display: flex; align-items: center; gap: 12px; min-height: 38px; padding-top: 2px; }

/* Työpöydän koko näyttö: kuvaajan alla vasemmalla ovat lyhyet a- ja h-säätimet arvoineen ja oikealla painikerivi
   (h → 0, Kuljeta P:tä, Zoomaa P:hen) sekä valitsimet (tangentti, sekantti, apuviivat yms.), jotka js/app.js
   (placeControls) siirtää tänne. Sivu ei vieri, joten pelkkä hiiren rulla zoomaa. */
html.plot-full:not(.mobile) .graph-dock {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  column-gap: 36px;
}
html.plot-full:not(.mobile) .plot-f { grid-area: 1 / 1 / 2 / -1; }
html.plot-full:not(.mobile) .slider-a { grid-area: 2 / 1; margin: 8px 0 0; }
html.plot-full:not(.mobile) .readout { grid-area: 3 / 1; }
html.plot-full:not(.mobile) .dock-ctl { grid-area: 4 / 1; }
html.plot-full:not(.mobile) .dock-side {
  grid-area: 2 / 2 / 5 / 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 6px 0 4px;
}
html.plot-full:not(.mobile) .dock-side .legend { gap: 8px 22px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .toast, .tip-pop, .info-dialog[open], html.mobile .info-dialog[open] { animation: none; }
  .st-line.is-last { animation: none; }
  .ck-flow, .ck-drift.is-live, .ck-move.is-live, .ck-spin.is-live, .ck-osc.is-live, .ck-sprg.is-live { animation: none; }
  .rl-order li { transition: none; }
  .tab-ico, .steps-toggle svg, .topic-btn .chev { transition: none; }
}

/* ---------- Yhtälöt (src/scripts/sim-yhtalot.js) ---------- */
.eq-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.eq-rel { position: relative; display: inline-flex; align-items: center; flex: none; }
.eq-rel select {
  appearance: none; -webkit-appearance: none; min-height: 40px; padding: 0 28px 0 12px; border: 1px solid var(--hair-strong);
  border-radius: 10px; background: var(--card, var(--sheet)); font: 600 17px/1 var(--font-math); cursor: pointer;
}
.eq-rel .chev { position: absolute; right: 8px; width: 14px; height: 14px; pointer-events: none; color: var(--muted); }
.eq-gsym { white-space: nowrap; color: var(--ink-2); }
.eq-row input {
  flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid var(--hair-strong); border-radius: 10px;
  background: var(--card, var(--sheet)); font: 17px/1.2 var(--font-math);
}
.eq-type { margin: 0 0 8px; }
.tag-type { background: var(--btn); color: var(--btn-ink); }
.eq-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.eq-list li { font-size: 19px; }
.eq-set { margin: 0 0 6px; font-size: 16px; }
.eq-steps .step { display: grid; gap: 2px; padding: 6px 0; border-bottom: 1px solid var(--hair); }
.eq-steps .step:last-child { border-bottom: 0; }
.eq-steps .st-why { font-size: 14px; color: var(--ink-2); }
.eq-steps .st-eq { overflow-x: auto; }
.eq-steps .st-eq .m { font-size: 19px; }
.eq-steps .step.is-general .st-eq .m { font-size: 20px; }
.eq-steps .step.is-case { padding-top: 10px; color: var(--ink); }
.eq-steps .step.is-result .st-eq .m { font-weight: 600; }
.eq-steps .step.is-note .st-eq .m { font-size: 16px; }
.eq-signs { margin-top: 10px; overflow-x: auto; }
.eq-yes { color: var(--pos-ink); font-weight: 700; }
.eq-no { color: var(--neg-ink); }
.eq-mark { text-align: center; }
.val-table td.eq-yes { background: color-mix(in srgb, var(--c-pos) 14%, transparent); }

/* ---------- Selitykset ---------- */
/* Kuvaukset ja ohjetekstit ovat omassa laatikossaan, jonka reunassa on pieni info-kuvake. Asetus *Poista selitykset*
   (html.no-notes, src/scripts/app.js bindSettings) piilottaa ne kokonaan. Indikaattorien nimet (esim. Vasen puoli) säilyvät. */
:is(.hint, .pane-lede, .sub-head p, .rule:not(:empty), .lede, .tp-gsub, .lim-table caption) {
  position: relative;
  padding: 8px 12px 8px 38px;
  background: var(--note-bg);
  border: 1px solid var(--note-line);
  border-radius: 8px;
  color: var(--ink-2);
}
:is(.hint, .pane-lede, .sub-head p, .rule:not(:empty), .lede, .tp-gsub, .lim-table caption)::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 10px;
  width: 17px;
  height: 17px;
  background: var(--note-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1.4a6.6 6.6 0 1 0 0 13.2A6.6 6.6 0 0 0 8 1.4zm-.8 3.5a.95.95 0 1 1 1.9 0 .95.95 0 0 1-1.9 0zM7.2 7h1.6v4.6H7.2z'/%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 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1.4a6.6 6.6 0 1 0 0 13.2A6.6 6.6 0 0 0 8 1.4zm-.8 3.5a.95.95 0 1 1 1.9 0 .95.95 0 0 1-1.9 0zM7.2 7h1.6v4.6H7.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lim-table caption { display: table-caption; margin-bottom: 8px; }
.pane-lede:empty { display: none; }
html.no-notes :is(.hint, .pane-lede, .sub-head p, .rule:not(:empty), .lede, .tp-gsub, .lim-table caption) { display: none !important; }
/* Asetuksen valintaruutu */
.sm-check { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; font-weight: 600; }
.sm-check input { width: 20px; height: 20px; flex: none; accent-color: var(--c-f); }

/* Sähkötekniikan suureet: pikataulukko ja suureen nimen selitys ponnahdusikkunana (src/scripts/tietopankki.js) */
.tp-term { cursor: help; text-decoration: underline dotted var(--muted); text-underline-offset: 0.25em; }
.tp-term:hover, .tp-term:focus-visible { color: var(--ink); text-decoration-color: var(--note-ink); }
.tp-tip {
  position: fixed;
  z-index: 60;
  display: grid;
  gap: 6px;
  width: max-content;
  max-width: min(360px, calc(100vw - 16px));
  padding: 10px 12px;
  font: 14px/1.45 var(--font-ui);
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  border-left: 3px solid var(--note-ink);
  border-radius: 8px;
  box-shadow: var(--shadow);
  pointer-events: none;
}
.tp-tip[hidden] { display: none; }
.tp-tip .tp-pop-h { font-size: 15px; }
.tp-tip .tp-pop-f .m { font-size: 17px; }
.tp-tip .tp-pop-p { color: var(--ink-2); }
.tp-tip .tp-lab { font-weight: 700; color: var(--muted); }