/* Hakukonesivujen (scripts/build-seo.mjs) tyylit: kevyt, ei JavaScriptiä. */
:root { --bg: #f6f8f7; --surface: #fff; --text: #14201b; --text-2: #4b5a53; --accent: #0a7457; --accent-soft: #e1f2ec; --border: #d8e0dc; }
@media (prefers-color-scheme: dark) { :root { --bg: #0f1613; --surface: #17211d; --text: #e8efeb; --text-2: #a3b1ab; --accent: #4fc9a1; --accent-soft: #1b3a30; --border: #2a3832; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent); }
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand span { display: grid; line-height: 1.2; }
.brand small { color: var(--text-2); font-size: 0.8125rem; }
.cta, .btn { display: inline-block; padding: 9px 16px; border-radius: 999px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 650; }
@media (prefers-color-scheme: dark) { .cta, .btn { color: #07130e; } }
main { max-width: 920px; margin: 0 auto; padding: 16px; }
h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.2; margin: 8px 0 12px; }
h2 { font-size: 1.25rem; margin: 28px 0 10px; }
h3 { font-size: 1.05rem; margin: 18px 0 4px; }
.lead { font-size: 1.05rem; color: var(--text-2); }
.crumbs { font-size: 0.875rem; color: var(--text-2); }
.tw { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: 0.8125rem; color: var(--text-2); font-weight: 650; }
tr:last-child td { border-bottom: 0; }
.r { text-align: right; white-space: nowrap; }
small { color: var(--text-2); font-size: 0.8125rem; }
.note { font-size: 0.8125rem; color: var(--text-2); }
.cols { columns: 3 200px; list-style: none; padding: 0; margin: 0; }
.cols li { padding: 3px 0; break-inside: avoid; }
footer { max-width: 920px; margin: 24px auto 0; padding: 16px; font-size: 0.8125rem; color: var(--text-2); border-top: 1px solid var(--border); }
@media (max-width: 560px) { th, td { padding: 8px 8px; } table { font-size: 0.875rem; } main { padding: 12px; } .brand small { display: none; } .kw { display: none; } }
/* Hintakehitys (scripts/build-trends.mjs): SVG-kaaviot ja muutosvärit */
:root { --c0: #0a7457; --c1: #2a7de1; --c2: #d9822b; --c3: #8e44ad; --c4: #c0392b; --c5: #16a085; --c9: #6b7a73; --up: #b42318; --down: #0a7457; }
@media (prefers-color-scheme: dark) { :root { --c0: #4fc9a1; --c1: #6aa8f5; --c2: #f0a85c; --c3: #c48ae0; --c4: #f27b6c; --c5: #4fd1b8; --c9: #a3b1ab; --up: #f27b6c; --down: #4fc9a1; } }
.chart { margin: 8px 0 16px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.chart svg { width: 100%; height: auto; display: block; font-size: 11px; fill: var(--text-2); }
.chart .g { stroke: var(--border); stroke-width: 1; }
.chart path { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart figcaption { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.8125rem; color: var(--text-2); margin-top: 6px; }
.lg::before { content: ""; display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; background: var(--c); }
.s0 { --c: var(--c0); } .s1 { --c: var(--c1); } .s2 { --c: var(--c2); } .s3 { --c: var(--c3); } .s4 { --c: var(--c4); } .s5 { --c: var(--c5); } .s9 { --c: var(--c9); }
.chart g path { stroke: var(--c); } .chart g circle { fill: var(--c); }
.chart .s9 path { stroke-dasharray: 5 4; }
.spark { display: block; } .spark path { fill: none; stroke: var(--accent); stroke-width: 1.8; }
td.up, b.up { color: var(--up); } td.down, b.down { color: var(--down); }
tr.tot td { background: var(--accent-soft); }
.spark { margin-right: 4px; }
@media (max-width: 560px) { .chart svg { font-size: 21px; } .chart { padding: 6px; } }
/* Asemasivut (/asema/<tunniste>/, käyttäjän pyyntö 11.10.2026) */
.acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.btn.ghost { background: var(--surface); color: var(--accent); border: 1px solid var(--accent); }
@media (prefers-color-scheme: dark) { .btn.ghost { color: var(--accent); } }
.btn, .cta { min-height: 44px; line-height: 26px; }
th[scope="row"] { width: 42%; color: var(--text-2); }
.near { list-style: none; padding: 0; margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.near li { padding: 9px 12px; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.near li:last-child { border-bottom: 0; }
.near li small { flex-basis: 100%; }
.st-prices td:first-child { width: 34%; white-space: nowrap; }
td.pr b { white-space: nowrap; }