/*
 * Näyttöprojekti – geneerinen kaksipalstainen leiska (moottori v2.7).
 * TÄTÄ TIEDOSTOA EI MUOKATA PROJEKTIKOHTAISESTI, PAITSI :root-paletti.
 * Projektikohtainen väri tulee AINA :root:sta (--accent, --accent-dark,
 * --phase-a..--phase-f) — muualle ei kovakoodata värejä.
 */

:root {
  /* ---- PROJEKTIKOHTAINEN: pääaksentti ja sen tumma sävy (Ping Pong Tanks) ---- */
  --accent: #2e7d32;
  --accent-dark: #1b5e20;
  /* ---- PROJEKTIKOHTAINEN: vaihevärit A–F ---- */
  --phase-a: #a16207;
  --phase-b: #2f6b8f;
  --phase-c: #6d5aae;
  --phase-d: #b8412c;
  --phase-e: #0f766e;
  --phase-f: #a16207;

  /* Designin alias: prototyypin koodi viittaa --ak:hon. */
  --ak: var(--accent);
  --accent-hover: color-mix(in srgb, var(--accent) 78%, black);
  --accent-wash: color-mix(in srgb, var(--accent) 8%, white);
  --accent-line: color-mix(in srgb, var(--accent) 30%, white);

  /* ---- geneeriset design-tokenit (design_handoff) ---- */
  --bg: #faf9f6;
  --sidebar-bg: #f5f2ec;
  --card-bg: #fdfcf9;
  --ink: #241f1a;
  --muted: #5c5347;
  --meta: #8a7f70;
  --line: #e8e1d6;
  --line-soft: #efe9df;
  --line-hover: #c9bfae;
  --row-selected: #e6dfd2;
  --row-hover: #ece7de;
  --num-circle: #f0ece3;
  --dashed: #ddd2c0;
  --future-border: #d4cbbb;

  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  --radius-card: 10px;
  --radius-button: 8px;
  --radius-pill: 999px;
  --sidebar-w: 296px;
  --main-max: 740px;
}

/* v2.7: numeroidut vaiheet (vaiheet[].tunnus "1"–"6") käyttävät samoja värejä kuin A–F. */
:root {
  --phase-1: var(--phase-a);
  --phase-2: var(--phase-b);
  --phase-3: var(--phase-c);
  --phase-4: var(--phase-d);
  --phase-5: var(--phase-e);
  --phase-6: var(--phase-f);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; margin: 0; }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); text-decoration: underline; }
code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .92em; background: color-mix(in srgb, var(--ink) 6%, transparent); padding: .1em .35em; border-radius: 4px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 999; background: var(--card-bg); color: var(--ink); padding: .8rem 1rem; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.18); transition: top .15s ease; }
.skip-link:focus { top: 1rem; }

/* ================= SOVELLUSRUNKO ================= */
.app-shell { display: flex; min-height: 100vh; align-items: stretch; }

/* ---------- SIVUPALKKI ---------- */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
  height: 100vh;
  position: sticky;
  top: 0;
}
.sidebar-header { padding: 20px 20px 16px; border-bottom: 1px solid var(--line); display: flex; gap: .65rem; align-items: center; }
.sidebar-header .brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 1.05rem; flex-shrink: 0; }
.sidebar-kicker { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--meta); }
.sidebar-title { font-family: var(--font-serif); font-size: 26px; margin-top: 2px; line-height: 1.05; }

.sidebar-progress { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.progress-row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.progress-pct { font-family: var(--font-serif); font-size: 32px; }
.progress-copy { font-size: 12px; color: var(--meta); }
.progress-bar { height: 6px; background: var(--line); border-radius: var(--radius-pill); margin-top: 8px; overflow: hidden; }
.progress-bar > span { display: block; height: 100%; width: 0%; background: var(--accent); border-radius: var(--radius-pill); transition: width .3s ease; }
.resume-button {
  margin-top: 14px; width: 100%; padding: 10px 12px; background: var(--accent); color: #fdfcf9;
  border: none; border-radius: var(--radius-button); font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: .5rem;
}
.resume-button:hover { background: var(--accent-hover); }
.resume-note { font-size: 12px; color: var(--meta); margin-top: 8px; }

.sidebar-scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; scrollbar-width: thin; }
.nav-group { border-bottom: 1px solid var(--line); padding: 12px; flex-shrink: 0; }
.nav-group-title { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--meta); padding: 0 8px 6px; }
.nav-row {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem; width: 100%;
  padding: 6px 8px; border: none; border-radius: var(--radius-button); background: transparent;
  color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; text-align: left;
}
.nav-row:hover { background: var(--row-hover); text-decoration: none; }
.nav-row[aria-current="page"] { background: var(--row-selected); font-weight: 600; }
.nav-row .nav-meta { font-size: 11px; color: var(--meta); font-weight: 400; flex-shrink: 0; }

.week-nav { padding: 12px 12px 8px; }
.week-nav-phase { display: flex; align-items: baseline; gap: 8px; padding: 10px 8px 6px; margin: 0; }
.week-nav-phase:first-child { padding-top: 0; }
.week-nav-phase span { font-size: 11px; font-weight: 700; color: var(--phase-color, var(--accent)); }
.week-nav-phase-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--meta); }
.week-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: none;
  border-radius: var(--radius-button); background: transparent; color: var(--ink); font: inherit; font-size: 13px;
  cursor: pointer; text-align: left;
}
.week-row:hover { background: var(--row-hover); text-decoration: none; }
.week-row[aria-current="page"] { background: var(--row-selected); }
.week-row.is-locked { opacity: .45; pointer-events: none; }
.week-dot {
  width: 18px; height: 18px; flex-shrink: 0; border-radius: var(--radius-pill); display: flex; align-items: center;
  justify-content: center; font-size: 10px; font-weight: 700; border: 1px solid var(--future-border); background: transparent; color: var(--accent);
}
.week-row.is-done .week-dot { background: var(--accent); border-color: var(--accent); color: #fdfcf9; }
.week-row.is-current .week-dot { border-color: var(--accent); color: var(--accent); }
.week-row-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.week-row.is-current .week-row-title { font-weight: 600; }
.week-row-n { font-size: 11px; color: var(--meta); flex-shrink: 0; }
.week-row.is-holiday .week-dot { border-style: dashed; }

.nav-group-docs { margin-top: auto; border-top: 1px solid var(--line); border-bottom: none; }

/* ================= PÄÄNÄKYMÄ ================= */
.view-main { flex: 1; min-width: 0; overflow-y: auto; height: 100vh; }
.view { max-width: var(--main-max); margin: 0 auto; padding: 40px 40px 80px; }
.view[hidden] { display: none; }
/* v2.4.1: alatunniste sisältöpalstan lopussa; sivureunat samat kuin näkymällä. */
.view-main > footer.view, html[data-teema] .view-main > footer.view { padding-top: 0; padding-bottom: 40px; }
.view-eyebrow { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--meta); margin: 0; }
.view-title { font-size: clamp(32px, 5vw, 42px); line-height: 1.1; margin: 6px 0 0; }
.view-lead { margin: 16px 0 0; font-size: 15px; color: var(--muted); max-width: 62ch; }
.view h2 { font-size: 22px; margin: 0; }
.view-section { margin-top: 36px; }
.view-section:first-of-type { margin-top: 28px; }
.section-heading-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.section-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--meta); margin: 0; }
.section-label-accent { color: var(--accent); }

.card { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 16px 18px; }
.card-tint { background: var(--sidebar-bg); }

/* ---- napit ---- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: 10px 16px;
  border: 1px solid transparent; border-radius: var(--radius-button); font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none; line-height: 1.2;
}
.button-primary { background: var(--accent); color: #fdfcf9; }
.button-primary:hover { background: var(--accent-hover); color: #fdfcf9; text-decoration: none; }
.button-secondary { background: var(--card-bg); border-color: var(--line); color: var(--ink); }
.button-secondary:hover { border-color: var(--line-hover); text-decoration: none; }
.button-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.button-pill { border-radius: var(--radius-pill); padding: 6px 12px; font-size: 12px; font-weight: 400; }
.button:disabled { opacity: .5; cursor: not-allowed; }

/* ---- yleiset kortti-gridit ---- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---- kaytto-näkymä ---- */
.principle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.principle-grid .card .num { font-size: 20px; font-family: var(--font-serif); color: var(--accent); }
.principle-grid .card h3 { font-size: 15px; font-weight: 600; margin: 4px 0 0; font-family: var(--font-sans); }
.principle-grid .card p { font-size: 13px; color: var(--muted); margin-top: 4px; }
.principle-grid .card small { display: block; margin-top: 6px; color: var(--meta); font-size: 11px; }
.checklist-box ol { margin: 10px 0 0; padding-left: 20px; font-size: 14px; display: flex; flex-direction: column; gap: 5px; }
.download-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.download-card strong { font-weight: 600; }
.download-card p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.download-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.footnote { margin-top: 20px; font-size: 13px; color: var(--meta); }
.footnote strong { color: var(--muted); }
details.source-role { margin-top: 20px; background: var(--sidebar-bg); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 12px 16px; }
details.source-role summary { cursor: pointer; font-weight: 600; font-size: 14px; }
details.source-role p { margin-top: 8px; font-size: 13px; color: var(--muted); }

/* ---- kuvat ---- */
.image-stage { border-radius: 16px; overflow: hidden; background: var(--ink); margin: 24px 0; }
.image-stage img { display: block; width: 100%; height: auto; }
figure.view-figure { margin: 24px 0; }
figure.view-figure figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }
figure.view-figure figcaption strong { color: var(--ink); display: block; margin-bottom: 2px; }

/* ---- toimeksianto ---- */
.brief-text { margin-top: 24px; font-size: 16px; line-height: 1.65; display: flex; flex-direction: column; gap: 16px; }
.decision-box ul, .grid-2 ul { margin: 10px 0 0; padding-left: 18px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.decision-box p.note { margin-top: 10px; font-size: 13px; color: var(--meta); }

/* ---- tyotapa ---- */
.workflow-loop { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.workflow-loop li { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 14px 16px; }
.workflow-loop span { font-size: 12px; font-weight: 700; color: var(--accent); display: block; }
.workflow-loop strong { display: block; margin-top: 2px; }
.workflow-loop small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.rule-note { margin: 16px 0 0; font-size: 14px; color: var(--muted); }
.test-grid { margin-top: 16px; }
.test-grid .card .num { font-family: var(--font-serif); font-size: 24px; }
.test-grid .card p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.risk-box ul { margin: 10px 0 0; padding-left: 18px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.lanka-row { display: flex; gap: 8px; margin-top: 14px; font-size: 13px; }
.lanka-row > div { flex: 1; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 12px 14px; }
.lanka-row .section-label { margin-bottom: 4px; color: var(--accent); }
.lanka-row p { color: var(--muted); }
.tooling-list { margin: 12px 0 0; padding-left: 18px; font-size: 14px; display: flex; flex-direction: column; gap: 8px; }

/* ---- suunnitelma ---- */
.plan-prefilled { display: grid; gap: 10px; margin-top: 24px; }
.plan-prefilled article { padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card-bg); }
.plan-prefilled h3 { font-family: var(--font-sans); font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.plan-prefilled p { font-size: 13px; color: var(--muted); }
.plan-prefilled small { display: block; margin-top: 6px; color: var(--meta); font-size: 11px; }
.plan-open-note { color: var(--accent-dark) !important; font-weight: 600; }
.plan-form { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; }
.plan-form-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.plan-form-heading h3 { font-family: var(--font-sans); font-size: 15px; font-weight: 600; }
.plan-form-heading p { font-size: 13px; color: var(--muted); margin-top: 2px; max-width: 52ch; }
[data-plan-status] { font-size: 12px; color: var(--meta); flex-shrink: 0; white-space: nowrap; }
[data-plan-status].complete { color: var(--accent); font-weight: 600; }
.plan-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-card); }
.plan-tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; width: 76px; flex-shrink: 0; text-transform: uppercase; }
.plan-tag-esitaytetty { color: var(--meta); }
.plan-tag-oma { color: var(--accent); }
.plan-tag-ohjaaja { color: var(--muted); }
.plan-row-field { flex: 1; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.plan-row-field input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg);
  font: inherit; font-size: 14px; color: var(--ink);
}
.plan-row-field input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.plan-row-week { font-size: 12px; color: var(--meta); flex-shrink: 0; white-space: nowrap; }
.plan-calibration { margin-top: 4px; padding: 10px 14px; border-left: 3px solid var(--dashed); background: var(--card-bg); font-size: 13px; color: var(--muted); border-radius: 6px; }
.plan-actions { margin-top: 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.plan-actions small { font-size: 13px; color: var(--meta); }
.plan-ai-note { margin-top: 8px; font-size: 13px; color: var(--meta); }
.plan-ai-note strong { color: var(--muted); }

/* ---- viikkonäkymä ---- */
.week-card { display: flex; flex-direction: column; }
.week-card[hidden] { display: none; }
.week-kicker { margin-top: 18px; padding: 14px 18px; background: var(--sidebar-bg); border: 1px solid var(--line); border-radius: var(--radius-card); display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.week-kicker .section-label { color: var(--accent); flex-shrink: 0; }
.week-kicker p { font-size: 15px; }
.week-quote { margin-top: 16px; padding: 4px 18px; border-left: 3px solid var(--dashed); }
.week-quote p.quote-text { font-family: var(--font-serif); font-style: italic; font-size: 17px; line-height: 1.5; }
.week-quote p.quote-source { font-size: 12px; color: var(--meta); margin-top: 4px; }
.week-connection { margin-top: 16px; font-size: 14px; color: var(--ink); }
.week-connection strong { font-weight: 600; }
.week-why-grid { margin-top: 14px; }
.week-why-grid .card p { font-size: 14px; margin-top: 6px; }
.skill-tags-label { margin-top: 16px; font-size: 13px; color: var(--muted); }
.skill-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; }
.skill-tags li { background: var(--sidebar-bg); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 4px 11px; font-size: 12px; color: var(--muted); }

.task-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.task-row {
  position: relative; display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 12px 14px; background: var(--card-bg);
  border: 1px solid var(--line); border-radius: var(--radius-card); cursor: pointer; font-size: 15px; color: var(--ink);
}
.task-row:hover { border-color: var(--line-hover); }
.task-row input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.task-box {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; border-radius: 6px; border: 1.5px solid var(--line-hover);
  background: var(--card-bg); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fdfcf9;
}
.task-row input:checked ~ .task-box { background: var(--accent); border-color: var(--accent); }
.task-row input:checked ~ .task-box::after { content: "✓"; }
.task-row input:checked ~ .task-text { text-decoration: line-through; color: var(--meta); }
.task-row input:focus-visible ~ .task-box { outline: 2px solid var(--accent); outline-offset: 2px; }

.lesson-instructions { margin-top: 36px; }
.lesson-label { font-size: 13px; color: var(--meta); }
.lesson-instructions ol { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0; }
.lesson-instructions li { display: flex; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--line-soft); font-size: 14px; line-height: 1.55; }
.lesson-instructions li .step-n { width: 24px; height: 24px; flex-shrink: 0; border-radius: var(--radius-pill); background: var(--num-circle); color: var(--accent); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

.resource-actions { margin-top: 14px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.resource-actions a { font-weight: 600; }

.impl-help { margin-top: 16px; background: var(--sidebar-bg); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 0 18px; }
.impl-help summary { padding: 14px 0; cursor: pointer; font-size: 15px; font-weight: 600; display: flex; justify-content: space-between; gap: 10px; list-style: none; }
.impl-help summary::-webkit-details-marker { display: none; }
.impl-help summary small { font-weight: 400; color: var(--meta); font-size: 13px; }
.impl-help-content { padding: 0 0 16px; display: flex; flex-direction: column; gap: 10px; }
.impl-help-tree pre, .impl-help-code pre { background: var(--card-bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; overflow-x: auto; font-size: 12.5px; }
.impl-help-content .help-label { font-size: 12px; font-weight: 700; color: var(--muted); margin: 0 0 4px; }
.impl-help-actions ol { margin: 0; padding-left: 18px; font-size: 14px; }
.impl-help-test { font-size: 13px; }
.impl-help-links a { margin-right: 12px; font-size: 13px; }
.impl-help-images { display: grid; gap: 10px; }
.impl-help-images img { width: 100%; border-radius: 8px; border: 1px solid var(--line); }
.impl-help-images figcaption { font-size: 12px; color: var(--meta); margin-top: 4px; }

.day-rhythm { margin-top: 28px; }
.day-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.day-grid .card { padding: 10px 12px; }
.day-grid .card .day-n { font-size: 11px; color: var(--accent); font-weight: 700; }
.day-grid .card strong { display: block; font-size: 13px; margin-top: 2px; }
.day-grid .card p { font-size: 12px; color: var(--muted); margin-top: 2px; }

.outcome-grid { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.outcome-grid .card p:last-child { margin-top: 6px; font-size: 14px; }
.evidence { font-size: 14px; }

.week-journal { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.journal-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.journal-actions-top { display: flex; gap: 8px; }
.journal-lead { font-size: 13px; color: var(--meta); margin: 6px 0 16px; max-width: 62ch; }
.journal-record { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.journal-record strong { color: var(--ink); }
.journal-fields { display: flex; flex-direction: column; gap: 14px; }
.journal-fields label { display: block; }
.journal-fields > label > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.journal-fields textarea, .journal-fields input[type="text"] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-button);
  background: var(--card-bg); font: inherit; font-size: 14px; resize: vertical; color: var(--ink);
}
[data-journal-status] { display: block; margin-top: 10px; font-size: 12px; color: var(--meta); }
[data-journal-status].complete { color: var(--accent); font-weight: 600; }
[data-journal-status].attention { color: var(--accent-dark); font-weight: 600; }

.week-pager { margin-top: 36px; display: flex; justify-content: space-between; gap: 12px; }
.week-pager button { flex: 0 1 auto; max-width: 48%; }
.week-pager button[disabled] { visibility: hidden; }

/* ---- paivakirja-arkisto ---- */
.journal-summary-card { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.journal-summary-card .big { font-family: var(--font-serif); font-size: 24px; }
.journal-summary-card p { font-size: 13px; color: var(--meta); margin-top: 2px; }
.journal-weeks-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.journal-weeks-grid .tile { padding: 10px 8px; text-align: center; border-radius: 8px; border: 1px solid var(--line); background: var(--card-bg); font-size: 13px; }
.journal-weeks-grid .tile strong { display: block; font-weight: 600; }
.journal-weeks-grid .tile span { display: block; font-size: 11px; margin-top: 2px; color: var(--meta); }
.journal-weeks-grid .tile.is-logged { background: color-mix(in srgb, var(--accent) 12%, var(--card-bg)); }
.journal-weeks-grid .tile.is-current { border-color: var(--accent); }

/* ---- ai-loki ---- */
.ai-rules { margin-top: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ai-rules .card { padding: 12px 14px; background: var(--sidebar-bg); }
.ai-rules .card .num { font-size: 11px; font-weight: 700; color: var(--accent); }
.ai-rules .card h3 { font-family: var(--font-sans); font-size: 14px; font-weight: 600; margin: 2px 0 0; }
.ai-rules .card p { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ai-log-form { margin-top: 16px; padding: 20px; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-card); display: flex; flex-direction: column; gap: 12px; }
.ai-log-form label { font-size: 13px; font-weight: 600; }
.ai-log-form input[type="text"], .ai-log-form textarea {
  width: 100%; margin-top: 5px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-button);
  background: var(--bg); font: inherit; font-size: 14px; color: var(--ink); resize: vertical;
}
.privacy-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.privacy-confirm { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 400; color: var(--muted); }
.ai-log-meta { margin-top: 16px; font-size: 13px; color: var(--meta); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.log-entries { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.log-entry { padding: 10px 12px; background: var(--card-bg); border: 1px solid var(--line-soft); border-radius: 8px; font-size: 13px; display: flex; flex-direction: column; gap: 3px; position: relative; }
.log-entry strong { font-size: 13px; }
.log-entry .log-reference { color: var(--meta); display: block; margin-top: 2px; }
.log-entry button { position: absolute; top: 8px; right: 8px; background: none; border: none; color: var(--meta); font-size: 12px; cursor: pointer; text-decoration: underline; }
.empty-state { color: var(--meta); font-size: 13px; }

/* ---- naytto-matriisi ---- */
.evidence-summary { margin-top: 24px; padding: 14px 20px; display: flex; align-items: baseline; gap: 10px; }
.evidence-summary strong { font-family: var(--font-serif); font-size: 28px; }
.evidence-summary span { font-size: 14px; color: var(--muted); }
.matrix { margin-top: 12px; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 0 18px; }
.matrix + .matrix { margin-top: 10px; }
.matrix summary { padding: 14px 0; cursor: pointer; font-size: 15px; font-weight: 600; display: flex; justify-content: space-between; gap: 10px; list-style: none; }
.matrix summary::-webkit-details-marker { display: none; }
.matrix summary .matrix-count { font-weight: 400; color: var(--meta); font-size: 13px; flex-shrink: 0; }
.matrix-list { padding: 0 0 14px; display: flex; flex-direction: column; gap: 8px; }
.matrix-group { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--meta); margin: 10px 0 0; }
.matrix-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line-soft); border-radius: 8px; font-size: 13px; cursor: pointer; }
.matrix-row input { margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }
.matrix-row strong { font-weight: 600; }

/* ---- galleria ---- */
.gallery-empty { margin-top: 24px; padding: 40px 20px; background: var(--sidebar-bg); border: 1px dashed var(--dashed); border-radius: var(--radius-card); text-align: center; color: var(--meta); font-size: 14px; }
.gallery-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.gallery-card { display: block; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; background: var(--card-bg); }
.gallery-card img { width: 100%; display: block; }
.gallery-card strong, .gallery-card span { display: block; padding: 0 12px; }
.gallery-card strong { margin-top: 10px; }
.gallery-card span { margin: 2px 0 10px; font-size: 12px; color: var(--meta); }

/* ---- alatunniste (kaytto-näkymän lopussa) ---- */
.site-footnote { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--meta); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ai-modified-badge { display: block; height: 22px; width: auto; }

/* ================= MOBIILI ================= */
@media (max-width: 860px) {
  .app-shell { flex-direction: column; }
  .sidebar {
    position: sticky; top: 0; z-index: 20; width: 100%; height: auto; max-height: none;
    border-right: none; border-bottom: 1px solid var(--line);
  }
  .sidebar-scroll { display: none; }
  .sidebar.is-open .sidebar-scroll { display: flex; max-height: 70vh; overflow-y: auto; border-top: 1px solid var(--line); }
  .sidebar-header { justify-content: space-between; }
  .mobile-menu-toggle {
    display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 8px 12px; border-radius: var(--radius-pill);
    border: 1px solid var(--line); background: var(--card-bg); font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer;
  }
  .sidebar-progress { display: none; }
  .sidebar.is-open .sidebar-progress { display: block; }
  .view-main { height: auto; overflow-y: visible; }
  .view { padding: 28px 20px 56px; }
  .grid-2, .principle-grid, .outcome-grid { grid-template-columns: 1fr; }
  .workflow-loop { grid-template-columns: 1fr 1fr; }
  .day-grid { grid-template-columns: repeat(2, 1fr); }
  .ai-rules { grid-template-columns: 1fr 1fr; }
  .journal-weeks-grid { grid-template-columns: repeat(3, 1fr); }
  .lanka-row { flex-direction: column; }
}
@media (min-width: 861px) {
  .mobile-menu-toggle { display: none; }
}
@media print {
  .sidebar, .mobile-menu-toggle { display: none; }
  .app-shell { display: block; }
  .view[hidden] { display: block; }
}

/* ---- Sanasto (data-view="termit") ja viikon uudet termit (.week-terms) ----
   Renderöidään app.js:stä sisalto.js:n `termisto`-kentästä. Näkyvä teksti,
   ei tooltip: merkityksen pitää olla luettavissa myös ruudunlukijalla. */
.glossary { margin: 0; display: grid; gap: 0; }
.glossary-item { display: grid; grid-template-columns: minmax(110px, 170px) 1fr; gap: 4px 18px; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.glossary-item:first-child { border-top: 0; padding-top: 0; }
.glossary dt { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.glossary-term { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .95rem; font-weight: 700; color: var(--accent-dark); }
.glossary-name { font-size: 12px; color: var(--meta); }
.glossary dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.glossary-week { display: inline-block; margin-left: .45em; font-size: 12px; color: var(--meta); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 0 .55em; white-space: nowrap; }
.glossary-week:hover { color: var(--accent-dark); border-color: var(--line-hover); text-decoration: none; }
.week-terms { margin-top: 18px; padding: 14px 18px 10px; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-card); }
.week-terms-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.week-terms-head a { font-size: 12px; white-space: nowrap; }
.glossary-compact .glossary-item { padding: 9px 0; }
.glossary-compact .glossary-item:first-child { padding-top: 6px; }
@media (max-width: 640px) { .glossary-item { grid-template-columns: 1fr; gap: 2px; } }

/* ---- Kalibrointi: riittävä vs. riittämätön (viikkoOhjeet.example / notEnough) ---- */
.expectation-grid { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.expectation-grid .card p:last-child { margin-top: 6px; font-size: 14px; }
.expectation-grid .expected-example { border-left: 3px solid var(--accent); }
.expectation-grid .not-enough { border-left: 3px solid #b8412c; background: color-mix(in srgb, #b8412c 5%, var(--card-bg)); }
@media (max-width: 860px) { .expectation-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   v2.4 · OPT-IN-KOMPONENTIT
   Näkyvät vain, kun projekti ottaa ne käyttöön (sisalto.js: sykli,
   kuvaohjeet). Värit tulevat tokeneista, joten ne sopivat sekä
   oletusteemaan että html[data-teema] -teemaan.
   ===================================================================== */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- tila tekstinä ja symbolina (teema.tilaTekstit) ---- */
.week-state { display: inline-flex; gap: .3em; align-items: baseline; font-size: 12px; color: var(--muted); white-space: nowrap; }
.week-state-current { font-weight: 700; color: var(--ink); }

/* ---- työsykli (viikkoOhjeet[w].sykli) ---- */
.week-cycle { margin-top: 20px; padding: 18px; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-card); }
.week-cycle[hidden] { display: none; }
.cycle-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cycle-round { font-size: 13px; color: var(--meta); }
.cycle-lead { margin-top: 6px; font-size: 14px; color: var(--muted); }
.cycle-track { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 8px; }
.cycle-track button {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-button);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.cycle-track button:hover { border-color: var(--line-hover); }
.cycle-step.is-current button { border: 2px solid var(--accent); }
.cycle-step-n { font-weight: 700; color: var(--accent); }
.cycle-step-name { font-weight: 600; }
.cycle-now { margin-top: 16px; padding: 16px 18px; border: 2px solid var(--accent); border-radius: var(--radius-card); background: var(--bg); }
.cycle-now-label { font-size: 12px; font-weight: 700; color: var(--accent); }
.cycle-now-title { font-size: 28px; margin-top: 4px; }
.cycle-now-title:focus { outline: none; }
.cycle-now-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.cycle-now-text { margin-top: 8px; }
.cycle-tool { margin-top: 6px; font-size: 14px; }
.cycle-instructions { margin: 12px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.cycle-extra { margin-top: 10px; font-size: 14px; }
.cycle-when { margin-top: 14px; font-size: 14px; }
.cycle-actions { margin-top: 18px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.copy-block { margin-top: 16px; }
.copy-title { font-size: 14px; font-weight: 700; }
.copy-text {
  margin: 6px 0 10px; padding: 12px 14px; background: var(--card-bg); color: var(--ink); border: 1px dashed var(--dashed);
  border-radius: 8px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 13px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.copy-button.is-copied { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.cycle-stuck { margin-top: 16px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card-bg); }
.cycle-stuck > summary { padding: 12px 0; font-weight: 700; cursor: pointer; }
.cycle-stuck-lead { font-size: 14px; color: var(--muted); }
.stuck-list { list-style: none; margin: 10px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.stuck-list .stuck-list { margin: 10px 0 4px; }
.stuck-item > summary { padding: 6px 0; font-weight: 600; cursor: pointer; }
.stuck-answer { margin: 4px 0 8px 6px; padding-left: 14px; border-left: 2px solid var(--line); font-size: 14px; }

/* ---- kuvaohje (kuvakaappaukset.json) ---- */
.week-kuvaohjeet > h2 { margin-bottom: 4px; }
.kuvaohje { margin: 14px 0 0; padding: 14px 16px; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-card); }
.kuvaohje-title { font-family: var(--font-sans); font-size: 15px; font-weight: 700; }
.kuvaohje-where { margin-top: 2px; font-size: 13px; color: var(--muted); }
.kuvaohje-body { margin-top: 12px; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.kuvaohje-picture { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.kuvaohje-stage { position: relative; display: block; width: 100%; overflow: visible; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; cursor: zoom-in; }
.kuvaohje-stage img { display: block; width: 100%; height: 100%; border-radius: 7px; }
.kuvaohje-stage.is-full { cursor: default; max-width: none; }
.kuvaohje-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 16px; text-align: center; color: var(--muted); border: 2px dashed var(--dashed); border-radius: 7px; font-size: 14px; }
.kuvaohje-mark { position: absolute; border: 4px solid var(--teema-kehys, var(--accent)); border-radius: 6px; box-shadow: 0 0 0 2px var(--bg), inset 0 0 0 2px var(--bg); pointer-events: none; }
.kuvaohje-mark-n {
  position: absolute; top: 0; left: 0; transform: translate(-55%, -55%); min-width: 1.9em; height: 1.9em; padding: 0 .3em;
  display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill);
  background: var(--teema-kehys, var(--accent)); color: var(--bg); font-weight: 700; font-size: 14px; box-shadow: 0 0 0 2px var(--bg);
}
.kuvaohje-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.kuvaohje-steps li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.kuvaohje-n { flex-shrink: 0; min-width: 1.9em; height: 1.9em; display: flex; align-items: center; justify-content: center; border: 2px solid var(--teema-kehys, var(--accent)); border-radius: var(--radius-pill); font-weight: 700; }
.kuvaohje-meta { margin-top: 10px; font-size: 12px; color: var(--meta); }
.kuvaohje-error { margin-top: 10px; font-size: 14px; color: var(--ink); }
.kuvaohje-dialog { width: min(96vw, 1400px); max-width: 96vw; max-height: 94vh; padding: 0; background: var(--card-bg); color: var(--ink); border: 2px solid var(--line); border-radius: var(--radius-card); }
.kuvaohje-dialog::backdrop { background: rgba(0, 0, 0, .78); }
/* v2.8: oman repositoryn osoite (P.repo = "oma") */
.oma-repo-dialog { width: min(96vw, 640px); }
.oma-repo-form label { font-weight: 700; }
.oma-repo-form input { width: 100%; font: inherit; padding: 8px 10px; border: 2px solid var(--line); border-radius: 6px; background: var(--card-bg); color: var(--ink); }
.oma-repo-error { color: var(--danger, #b00020); font-weight: 700; }
.kuvaohje-dialog-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; background: var(--card-bg); border-bottom: 1px solid var(--line); }
.kuvaohje-dialog-body { padding: 16px; display: flex; flex-direction: column; gap: 16px; overflow: auto; }
.kuvaohje-dialog-body .kuvaohje-stage { margin: 12px 0 0 12px; }
@media (max-width: 860px) { .kuvaohje-body { grid-template-columns: 1fr; } }

/* ---- v2.6: projektin tavoitekuva (P.lopputulos) ----
   Näin käytät sivua -näkymän alussa. Kuva levenee työpöydällä palstan yli
   (enintään 1040 px, aina ikkunan sisällä), jotta luonnoksen teksti on luettavaa. */
.goal-hero { margin: 0 0 40px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.view .goal-title { font-size: clamp(30px, 4.4vw, 38px); line-height: 1.12; margin: 6px 0 0; }
.goal-lead { margin: 12px 0 0; font-size: 16px; max-width: 62ch; }
.goal-figure { margin: 22px 0 0; }
.goal-figure .kuvaohje-stage { border-radius: 12px; }
.goal-figure .kuvaohje-stage img { border-radius: 11px; }
/* Tavoitekuvan kehykset ovat kevyemmät kuin kuvaohjeissa: kuva hahmotetaan kokonaisuutena. */
.goal-figure .kuvaohje-mark { border-width: 3px; border-radius: 8px; }
.goal-note { margin-top: 8px; font-size: 13px; color: var(--meta); }
.goal-list-label { margin-top: 24px; }
.goal-hero .kuvaohje-steps { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.goal-hero .kuvaohje-steps li { font-size: 15px; }
.goal-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
/* .button asettaa displayn, joten hidden tarvitsee oman sääntönsä (myös kuvaohjeen avausnappi). */
.button[hidden] { display: none; }
@media (min-width: 861px) {
  .goal-figure {
    --goal-w: max(100%, min(1040px, calc(100vw - var(--sidebar-w) - 72px)));
    width: var(--goal-w);
    margin-left: calc(50% - var(--goal-w) / 2);
  }
}
@media (max-width: 860px) {
  .goal-hero .kuvaohje-steps { grid-template-columns: 1fr; }
  .goal-figure .kuvaohje-mark { border-width: 2px; }
  .goal-figure .kuvaohje-mark-n { font-size: 11px; }
}
html[data-teema] .goal-hero .kuvaohje-steps { grid-template-columns: 1fr; }
html[data-teema-asettelu="yksi"] .goal-figure { width: auto; margin-left: 0; }

/* =====================================================================
   v2.4 · SAAVUTETTAVA TEEMA (opt-in: <html data-teema>)
   Arvot tulevat sisalto.js:n `teema`-lohkosta --teema-*-muuttujiin (app.js).
   Oletukset alla ovat tumma korkean kontrastin teema. Tämä lohko ei vaikuta
   projekteihin, joissa data-teema-attribuuttia ei ole.
   Periaatteet: yksi tekstiväri mustalla, ei pienempää sivutekstiä, ei
   kursiivia eikä isoja kirjaimia pieninä otsikkoina, reunat vähintään 2 px,
   fokus 3 px, linkit alleviivattuina, tilat tekstinä ja symbolina.
   ===================================================================== */
html[data-teema] {
  --bg: var(--teema-tausta, #000000);
  --sidebar-bg: var(--teema-pinta, var(--bg));
  --card-bg: var(--teema-pinta, var(--bg));
  --ink: var(--teema-teksti, #ffffff);
  --muted: var(--ink);
  --meta: var(--ink);
  --line: var(--ink);
  --line-soft: var(--ink);
  --line-hover: var(--ink);
  --row-selected: transparent;
  --row-hover: transparent;
  --num-circle: transparent;
  --dashed: var(--ink);
  --future-border: var(--ink);
  --accent: var(--teema-korostus, var(--ink));
  --accent-dark: var(--accent);
  --accent-hover: var(--accent);
  --accent-wash: transparent;
  --accent-line: var(--accent);
  --on-accent: var(--teema-korostus-teksti, var(--bg));
  --heading: var(--teema-otsikot, var(--ink));
  --phase-a: var(--ink); --phase-b: var(--ink); --phase-c: var(--ink);
  --phase-d: var(--ink); --phase-e: var(--ink); --phase-f: var(--ink);
  --font-sans: var(--teema-fontti, Arial, Helvetica, sans-serif);
  --font-serif: var(--font-sans);
  --bw: var(--teema-reuna, 2px);
  --focus-w: var(--teema-fokus, 3px);
  --measure: var(--teema-rivi, 60ch);
  background: var(--bg);
  color: var(--ink);
  color-scheme: dark;
}
html[data-teema] body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--teema-koko, 1.5rem);
  line-height: var(--teema-rivikorkeus, 1.6);
  letter-spacing: var(--teema-kirjainvali, 1px);
  word-spacing: var(--teema-sanavali, .3rem);
  overflow-wrap: anywhere;
  -webkit-font-smoothing: auto;
}
/* Ei pienempää sivutekstiä: kaikki perii perusfontin. Otsikot ovat suurempia. */
html[data-teema] body * { font-size: inherit !important; font-style: normal !important; letter-spacing: inherit !important; text-transform: none !important; }
html[data-teema] h1, html[data-teema] .view-title, html[data-teema] .progress-pct { font-size: 1.75em !important; line-height: 1.2; }
html[data-teema] h2, html[data-teema] .cycle-now-title, html[data-teema] .sidebar-title { font-size: 1.35em !important; line-height: 1.25; }
html[data-teema] h3, html[data-teema] h4 { font-size: 1.1em !important; line-height: 1.3; }
html[data-teema] h1, html[data-teema] h2, html[data-teema] h3, html[data-teema] h4 { color: var(--heading); font-family: var(--font-sans); font-weight: 700; }
html[data-teema] strong, html[data-teema] b { font-weight: 700; }
html[data-teema] code, html[data-teema] pre, html[data-teema] .copy-text, html[data-teema] .glossary-term { font-family: ui-monospace, Consolas, "Courier New", monospace; background: transparent; color: var(--ink); }
html[data-teema] pre { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Pitkät polut ja koodit katkeavat, jotta 400 %:n zoomilla ei synny vaakavieritystä. */
html[data-teema] code { overflow-wrap: anywhere; }
html[data-teema] .impl-help summary, html[data-teema] .matrix summary, html[data-teema] details.source-role summary { flex-wrap: wrap; }

/* Reunat vähintään 2 px: koskee vain elementtejä, joilla on jo reuna. */
html[data-teema] body * { border-width: var(--bw) !important; }

/* Linkit alleviivattuina. Navigaatiorivit ja napit erotetaan reunalla. */
html[data-teema] a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
html[data-teema] a:hover { text-decoration-thickness: 3px; }
html[data-teema] .nav-row, html[data-teema] .week-row { text-decoration: none; border: var(--bw) solid transparent; }
html[data-teema] .nav-row:hover, html[data-teema] .week-row:hover { border-color: var(--ink); text-decoration: none; }
html[data-teema] .nav-row[aria-current="page"], html[data-teema] .week-row[aria-current="page"] { border-color: var(--ink); background: transparent; font-weight: 700; }

/* Fokus 3 px, aina näkyvä. */
html[data-teema] :focus-visible,
html[data-teema] input:focus, html[data-teema] textarea:focus, html[data-teema] select:focus {
  outline: var(--focus-w) solid var(--teema-fokusvari, var(--ink)) !important; outline-offset: 3px !important;
}
html[data-teema] .task-row:focus-within { outline: var(--focus-w) solid var(--ink); outline-offset: 3px; }
html[data-teema] .task-row input:focus-visible ~ .task-box { outline: none !important; }

/* Napit */
html[data-teema] .button, html[data-teema] .resume-button, html[data-teema] .mobile-menu-toggle {
  border: var(--bw) solid var(--ink); border-radius: var(--radius-button); padding: .45em .8em; white-space: normal; text-align: left; line-height: 1.3;
}
html[data-teema] .button-primary, html[data-teema] .resume-button { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
html[data-teema] .button-primary:hover, html[data-teema] .resume-button:hover { background: var(--accent); color: var(--on-accent); text-decoration: underline; }
html[data-teema] .button-secondary, html[data-teema] .button-ghost, html[data-teema] .mobile-menu-toggle { background: transparent; color: var(--ink); }
html[data-teema] .button-secondary:hover, html[data-teema] .button-ghost:hover { text-decoration: underline; }
html[data-teema] .button:disabled { opacity: 1; border-style: dashed; cursor: not-allowed; }
html[data-teema] .copy-button.is-copied { background: var(--bg); color: var(--ink); border-color: var(--ink); }

/* Lomakkeet ja valintaruudut */
html[data-teema] input, html[data-teema] textarea, html[data-teema] select { background: var(--bg) !important; color: var(--ink) !important; border: var(--bw) solid var(--ink) !important; font: inherit; }
html[data-teema] ::placeholder { color: var(--ink); opacity: .8; }
html[data-teema] input[type="checkbox"] { accent-color: var(--accent); width: 1.2em; height: 1.2em; }
html[data-teema] .task-box { width: 1.2em; height: 1.2em; border: var(--bw) solid var(--ink); background: transparent; color: var(--on-accent); }
html[data-teema] .task-row input:checked ~ .task-box { background: var(--accent); border-color: var(--accent); }
html[data-teema] .task-row input:checked ~ .task-text { color: var(--ink); }

/* Pinnat ja erottelu ilman värisävyjä */
html[data-teema] .card, html[data-teema] .card-tint, html[data-teema] .week-kicker, html[data-teema] .impl-help,
html[data-teema] .plan-row, html[data-teema] .plan-prefilled article, html[data-teema] .task-row, html[data-teema] .matrix,
html[data-teema] .week-terms, html[data-teema] details.source-role, html[data-teema] .ai-log-form, html[data-teema] .log-entry,
html[data-teema] .journal-weeks-grid .tile, html[data-teema] .gallery-empty, html[data-teema] .matrix-row { background: var(--card-bg); }
html[data-teema] .image-stage { background: var(--bg); border: var(--bw) solid var(--ink); }
html[data-teema] .expectation-grid .not-enough { border-color: var(--ink); background: var(--card-bg); }
html[data-teema] .journal-weeks-grid .tile.is-logged { background: var(--card-bg); }
html[data-teema] .journal-weeks-grid .tile.is-current { border-style: solid; font-weight: 700; }
html[data-teema] .skill-tags li, html[data-teema] .glossary-week { background: transparent; color: var(--ink); }
html[data-teema] .lesson-instructions li .step-n { width: 1.6em; height: 1.6em; border: var(--bw) solid var(--ink); background: transparent; color: var(--ink); }
html[data-teema] .progress-bar { height: .5em; border: var(--bw) solid var(--ink); background: transparent; }
html[data-teema] .progress-bar > span { background: var(--ink); }
html[data-teema] .brand-mark { background: var(--accent); color: var(--on-accent); width: 1.8em; height: 1.8em; }
html[data-teema] .cycle-step.is-current button { border-width: calc(var(--bw) + 1px) !important; font-weight: 700; }

/* Rivin pituus noin 60 merkkiä ja väljyys */
html[data-teema] .view { max-width: calc(var(--measure) + 2.5rem); padding: 1.5rem 1.25rem 3rem; }
html[data-teema] .view-lead, html[data-teema] .journal-lead, html[data-teema] .plan-form-heading p { max-width: none; }
html[data-teema] .view-section { margin-top: 2em; }
html[data-teema] .view-section:first-of-type { margin-top: 1.5em; }

/* Ruudukot yhteen palstaan: toimii 200 % ja 400 % zoomilla ilman vaakavieritystä. */
html[data-teema] .grid-2, html[data-teema] .principle-grid, html[data-teema] .outcome-grid, html[data-teema] .expectation-grid,
html[data-teema] .workflow-loop, html[data-teema] .ai-rules, html[data-teema] .day-grid, html[data-teema] .kuvaohje-body,
html[data-teema] .glossary-item { grid-template-columns: 1fr; }
html[data-teema] .journal-weeks-grid { grid-template-columns: repeat(auto-fill, minmax(6.5em, 1fr)); }
html[data-teema] .cycle-track { grid-template-columns: repeat(auto-fill, minmax(9em, 1fr)); }
html[data-teema] .lanka-row, html[data-teema] .week-pager { flex-direction: column; }
html[data-teema] .week-pager button { max-width: none; width: 100%; }
html[data-teema] .plan-row { flex-direction: column; align-items: stretch; gap: .4em; }
html[data-teema] .plan-tag { width: auto; }
html[data-teema] .section-heading-row, html[data-teema] .journal-heading, html[data-teema] .plan-form-heading, html[data-teema] .progress-row,
html[data-teema] .download-card, html[data-teema] .privacy-row, html[data-teema] .ai-log-meta, html[data-teema] .week-terms-head,
html[data-teema] .nav-row, html[data-teema] .week-kicker, html[data-teema] .cycle-actions { flex-wrap: wrap; }
html[data-teema] .download-actions { flex-shrink: 1; min-width: 0; }
html[data-teema] .week-row { flex-wrap: wrap; row-gap: 0; }
html[data-teema] .week-row-title { flex: 1 1 8em; white-space: normal; overflow: visible; }
html[data-teema] [data-plan-status], html[data-teema] .plan-row-week, html[data-teema] .week-terms-head a, html[data-teema] .week-state { white-space: normal; }
html[data-teema] img { max-width: 100%; height: auto; }
html[data-teema] .kuvaohje-stage.is-full img { max-width: none; }

/* ---- yksi palsta: sivupalkki avautuu valikkona kaikilla leveyksillä ---- */
html[data-teema-asettelu="yksi"] .app-shell { flex-direction: column; }
html[data-teema-asettelu="yksi"] .sidebar { position: static; width: 100%; height: auto; border-right: none; border-bottom: var(--bw, 1px) solid var(--line); }
html[data-teema-asettelu="yksi"] .sidebar-header { flex-wrap: wrap; justify-content: space-between; padding: 1rem 1.25rem; }
html[data-teema-asettelu="yksi"] .sidebar-progress { display: block; padding: 1rem 1.25rem; }
html[data-teema-asettelu="yksi"] .resume-button { width: 100%; }
html[data-teema-asettelu="yksi"] .sidebar-scroll { display: none; }
html[data-teema-asettelu="yksi"] .sidebar.is-open .sidebar-scroll { display: flex; max-height: none; overflow: visible; border-top: var(--bw, 1px) solid var(--line); }
html[data-teema-asettelu="yksi"] .mobile-menu-toggle { display: inline-flex; align-items: center; gap: .4em; margin-left: auto; cursor: pointer; font: inherit; font-weight: 700; }
html[data-teema-asettelu="yksi"] .view-main { height: auto; overflow: visible; }
html[data-teema-asettelu="yksi"] .nav-group-docs { margin-top: 0; }

/* Liike: ei pehmeää vieritystä eikä siirtymiä, jos käyttäjä on pyytänyt vähemmän liikettä. */
@media (prefers-reduced-motion: reduce) {
  html[data-teema], html[data-teema] * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* ---- v2.4: joka viikon vakiolohkot (josJumissa, viikkorutiini) ---- */
.week-lost { margin-top: 16px; padding: 0 16px; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-card); }
.week-lost > summary { padding: 12px 0; font-weight: 700; cursor: pointer; }
.week-lost-lead { font-size: 14px; color: var(--muted); }
.week-routine-lead { margin-top: 6px; font-size: 14px; color: var(--muted); }
html[data-teema] fieldset { margin: 1em 0 0; padding: .6em 1em 1em; border: var(--bw) solid var(--ink); border-radius: var(--radius-card); }
html[data-teema] legend { padding: 0 .4em; font-weight: 700; }
html[data-teema] input[type="radio"] { accent-color: var(--accent); width: 1.2em; height: 1.2em; }
.cycle-place { font-weight: 400; }
.cycle-own { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--card-bg); font-size: 15px; }
/* Kuvaohjeen kehykset ovat tarkoituksella paksumpia kuin teeman 2 px reunat. */
html[data-teema] .kuvaohje-mark { border-width: calc(var(--bw) * 2 + 1px) !important; }
html[data-teema] .kuvaohje-n { border-width: var(--bw) !important; }
.week-templates { margin-top: 8px; }

/* ---- v2.5: pilkottu tehtävänanto (viikkoOhjeet[w].tehtavat → tehtäväkortit) ----
   Tehtävä on <details class="task-card">: yhteenvetorivillä numero, otsikko ja tila,
   sisällä miksi, tehtävän sanat, rastitettavat osatehtävät, valmis kun ja tallenna.
   Tehty osatehtävä himmenee mutta ei yliviivaudu: yliviivattu teksti on vaikealukuista. */
.tasks-lead { margin-top: 8px; font-size: 14px; color: var(--muted); }
.tasks-toggle { margin-top: 10px; align-self: flex-start; }
.has-task-cards .task-list { gap: 10px; }
.task-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-card); }
.task-card[open] { border-color: var(--line-hover); }
.task-card.is-done { background: var(--sidebar-bg); }
.task-card > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto 16px; gap: 2px 12px; padding: 14px 16px; align-items: baseline; }
.task-card > summary::-webkit-details-marker { display: none; }
.task-card > summary::after { content: "▸"; grid-column: 3; grid-row: 1 / span 2; align-self: center; color: var(--meta); font-size: 13px; }
.task-card[open] > summary::after { content: "▾"; }
.task-card-n { grid-column: 1; font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .02em; }
.task-card-title { grid-column: 1; font-family: var(--font-sans); font-size: 16px; font-weight: 600; line-height: 1.4; }
.task-card-status { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 13px; color: var(--meta); white-space: nowrap; }
.task-card.is-done .task-card-status { color: var(--accent); font-weight: 700; }
.task-card-body { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px 16px; border-top: 1px solid var(--line-soft); }
.task-card-why { font-size: 14.5px; }
.task-card-words { padding: 10px 14px 4px; background: var(--sidebar-bg); border: 1px solid var(--line-soft); border-radius: 8px; }
.task-card-words .glossary { margin-top: 4px; }
.substep-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.substep-row { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line-soft); border-radius: 8px; cursor: pointer; font-size: 14.5px; line-height: 1.5; }
.substep-row:hover { border-color: var(--line-hover); }
.substep-row input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.substep-n { flex-shrink: 0; min-width: 16px; margin-top: 1px; font-size: 12px; font-weight: 700; color: var(--meta); text-align: right; }
.substep-row input:checked ~ .task-box { background: var(--accent); border-color: var(--accent); }
.substep-row input:checked ~ .task-box::after { content: "✓"; }
.substep-row input:checked ~ .substep-text { color: var(--meta); }
.substep-row input:focus-visible ~ .task-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.task-card-done, .task-card-save { font-size: 14px; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--accent-wash); border-radius: 0 8px 8px 0; }
.task-card-save { border-left-color: var(--line-hover); background: transparent; }
.task-card .expectation-grid { margin-top: 0; }
.task-card .impl-help { margin-top: 0; }
.task-card-body > * { min-width: 0; }
/* Toteutusavun koodi ja puu vierivät vaakasuunnassa kapealla näytöllä. Aiempi sääntö
   (.impl-help-tree pre, .impl-help-code pre) ei osunut app.js:n tuottamaan rakenteeseen. */
.impl-help-content pre { max-width: 100%; overflow-x: auto; background: var(--card-bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; line-height: 1.45; }
.impl-help-content pre code { background: none; padding: 0; font-size: inherit; }
.impl-help-content ol, .impl-help-content ul { margin: 0; padding-left: 20px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.week-background { margin-top: 16px; padding: 0 16px; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-card); }
.week-background > summary { padding: 12px 0; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--muted); }
.week-background-body { padding-bottom: 14px; }
.week-background-body > .week-connection { margin-top: 2px; }

html[data-teema] .task-card, html[data-teema] .task-card.is-done, html[data-teema] .substep-row,
html[data-teema] .week-background, html[data-teema] .task-card-words { background: var(--card-bg); }
html[data-teema] .task-card > summary { grid-template-columns: 1fr auto; }
html[data-teema] .task-card > summary::after { grid-column: 2; grid-row: 1; }
html[data-teema] .task-card-status { grid-column: 1; grid-row: auto; white-space: normal; }
html[data-teema] .task-card-n, html[data-teema] .substep-n { color: var(--ink); }
html[data-teema] .substep-n { min-width: 1.4em; }
html[data-teema] .substep-row:focus-within { outline: var(--focus-w) solid var(--ink); outline-offset: 3px; }
html[data-teema] .substep-row input:focus-visible ~ .task-box { outline: none !important; }
html[data-teema] .substep-row input:checked ~ .task-box { background: var(--accent); border-color: var(--accent); }
html[data-teema] .substep-row input:checked ~ .substep-text { color: var(--ink); }
html[data-teema] .task-card-done, html[data-teema] .task-card-save { background: transparent; }

/* ---------- v2.7: yhtenäiset viikko-ohjeet (P.yhtenaisetViikot) ----------
 * :where() rajaa säännöt teemattomille sivuille nostamatta spesifisyyttä: järjestys muihin
 * sääntöihin pysyy samana kuin ilman rajausta. */
:where(html:not([data-teema])) .project-phase-path { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 18px; }
:where(html:not([data-teema])) .project-phase-path a { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--card-bg); color: var(--muted); font-size: 13px; text-decoration: none; }
:where(html:not([data-teema])) .project-phase-path a:hover { border-color: var(--line-hover); color: var(--ink); }
:where(html:not([data-teema])) .project-phase-path a[aria-current="step"] { border: 2px solid var(--phase-color, var(--accent)); background: color-mix(in srgb, var(--phase-color, var(--accent)) 12%, var(--card-bg)); color: var(--ink); font-weight: 700; }
:where(html:not([data-teema])) .project-phase-path a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
:where(html:not([data-teema])) .project-connection { margin-top: 4px; }
:where(html:not([data-teema])) .project-connection h2.section-label { font-family: var(--font-sans); font-size: 13px; font-weight: 700; line-height: 1.35; letter-spacing: .01em; text-transform: none; color: var(--accent-dark); }
:where(html:not([data-teema])) .view[data-view="kaytto"] > .view-lead + p { margin-top: 12px; color: var(--muted); }
:where(html:not([data-teema])) .view[data-view="kaytto"] > .goal-hero:not(:first-child) { margin-top: 28px; }
:where(html:not([data-teema])) .project-connection > p { margin: 6px 0 0; font-size: 15px; }
:where(html:not([data-teema])) .project-connection .project-week-goal { margin-top: 16px; }
:where(html:not([data-teema])) .project-connection .project-week-goal-text { font-weight: 600; color: var(--ink); }
:where(html:not([data-teema])) .project-connection .week-quote { margin: 14px 0 0; }
:where(html:not([data-teema])) .week-card.is-unified .week-terms { margin-top: 16px; }
:where(html:not([data-teema])) .week-finish { margin-top: 28px; border-left: 3px solid var(--accent); }
:where(html:not([data-teema])) .week-finish h2 { margin: 0; font-size: 18px; }
:where(html:not([data-teema])) .week-finish h3 { margin: 14px 0 4px; font-family: var(--font-sans); font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--muted); }
:where(html:not([data-teema])) .week-finish p { margin: 0; font-size: 14px; }
:where(html:not([data-teema])) .week-skills-details, :where(html:not([data-teema])) .week-days-details, :where(html:not([data-teema])) .week-workflow, :where(html:not([data-teema])) details.week-kuvaohjeet, :where(html:not([data-teema])) details.week-routine, :where(html:not([data-teema])) .project-reference { margin-top: 16px; padding: 0 16px; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-card); }
:where(html:not([data-teema])) .week-skills-details > summary, :where(html:not([data-teema])) .week-days-details > summary, :where(html:not([data-teema])) .week-workflow > summary, :where(html:not([data-teema])) details.week-kuvaohjeet > summary, :where(html:not([data-teema])) details.week-routine > summary, :where(html:not([data-teema])) .project-reference > summary { padding: 12px 0; cursor: pointer; font-size: 14px; font-weight: 600; }
:where(html:not([data-teema])) .week-skills-details[open], :where(html:not([data-teema])) .week-days-details[open], :where(html:not([data-teema])) .week-workflow[open], :where(html:not([data-teema])) details.week-kuvaohjeet[open], :where(html:not([data-teema])) details.week-routine[open], :where(html:not([data-teema])) .project-reference[open] { padding-bottom: 14px; }
:where(html:not([data-teema])) .week-skills-details .week-skills { margin-top: 4px; }
:where(html:not([data-teema])) .week-skills-details .expectation-grid { margin-top: 14px; }
:where(html:not([data-teema])) .week-days-details .day-rhythm { margin-top: 0; }
:where(html:not([data-teema])) .project-figure { margin: 18px 0; }
:where(html:not([data-teema])) .project-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; }
:where(html:not([data-teema])) .project-figure figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }
:where(html:not([data-teema])) .project-figure .kuvaohje-open-button { margin-top: 8px; }
:where(html:not([data-teema])) .impl-help-images .help-figure { margin: 0; }
.substep-text, .task-card-body p, .week-finish p, .project-connection p { overflow-wrap: anywhere; }
:where(html:not([data-teema])) .project-roadmap-list { padding-left: 22px; }
:where(html:not([data-teema])) .project-roadmap-list li { margin: 10px 0; }
:where(html:not([data-teema])) .project-roles dt { margin-top: 12px; font-weight: 600; }
:where(html:not([data-teema])) .project-roles dd { margin: 2px 0 0; color: var(--muted); }
:where(html:not([data-teema])) .project-reference > p { margin: 10px 0 0; }
:where(html:not([data-teema])) .project-reference > p:first-of-type { margin-top: 2px; }
:where(html:not([data-teema])) .project-reference > a { display: inline-block; margin-top: 10px; }
@media (max-width: 640px) { :where(html:not([data-teema])) .project-phase-path a { font-size: 12px; padding: 4px 10px; } }
/* Kapeassa asettelussa sivupalkki on kiinteä yläpalkki: näkymän alku ei jää sen alle. */
@media (max-width: 860px) { .view, .week-card, .holiday-card { scroll-margin-top: 84px; } }
@media print { .project-phase-path, [data-figure-open] { display: none; } }

/* ---------- v2.7: yhtenäiset viikko-ohjeet saavutettavassa teemassa (html[data-teema]) ----------
 * Saavutettava ulkoasu (data-teema): teeman koko, välit, 2 px reunat ja
 * 3 px fokus periytyvät teemasta (linkit alleviivattuina). Yllä olevat yleiset tyylit eivät koske
 * teemasivua. Muutokset tähän lohkoon tarkistetaan aina teemasivulla lasketuilla tyyleillä ennen ja
 * jälkeen, kaikissa näkymissä, leveänä ja kapeana. */
:where(html[data-teema]) .project-phase-path { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.5rem; }
:where(html[data-teema]) .project-phase-path a { border: 2px solid currentColor; padding: .4rem .65rem; font-size: .8em; }
:where(html[data-teema]) .project-phase-path a[aria-current="step"] { background: var(--accent); color: var(--bg, #000); font-weight: 700; }
:where(html[data-teema]) .project-phase-path a:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
:where(html[data-teema]) .project-connection p { margin-top: .7rem; }
:where(html[data-teema]) .project-figure { margin: 1.5rem 0; }
:where(html[data-teema]) .project-figure img { width: 100%; height: auto; display: block; border: 2px solid currentColor; }
:where(html[data-teema]) .project-figure figcaption { margin-top: .7rem; font-size: .9em; }
:where(html[data-teema]) .project-figure .kuvaohje-open-button { margin-top: .7rem; }
:where(html[data-teema]) .project-roadmap-list li { margin: 1rem 0; }
:where(html[data-teema]) .project-roadmap-list a { display: inline-block; }
:where(html[data-teema]) .project-reference summary, :where(html[data-teema]) .week-workflow summary, :where(html[data-teema]) .week-kuvaohjeet summary { cursor: pointer; font-weight: 700; padding: .6rem 0; }
:where(html[data-teema]) .project-reference[open] summary, :where(html[data-teema]) .week-workflow[open] summary, :where(html[data-teema]) .week-kuvaohjeet[open] summary { margin-bottom: 1rem; }
:where(html[data-teema]) .project-roles dt { font-weight: 700; margin-top: 1rem; }
:where(html[data-teema]) .project-roles dd { margin: .3rem 0 1rem; }
:where(html[data-teema]) .week-finish h3 { margin: 1rem 0 .5rem; }

/* ---------- v2.8: selkeys (P.selkeys, P.perusohjeet, P.tiedostokortit, P.dokumentitRepossa) ----------
 * Säännöt koskevat vain v2.8:n omia luokkia, joita moottori tuottaa vain opt-in-projekteissa, joten
 * muiden projektien lasketut tyylit eivät muutu. Teemasivun säännöt ovat :where(html[data-teema]) tai
 * html[data-teema] -etuliitteellä, kun yleisen teemasäännön spesifisyys pitää ohittaa. */
.np-link { text-decoration: underline; text-underline-offset: .15em; }
.np-link code { text-decoration: inherit; }
.substep-row.substep-row-rich { flex-direction: column; align-items: stretch; gap: 6px; cursor: default; }
.substep-label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.substep-title { font-weight: 700; }
.substep-row-rich input:checked + .substep-label .task-box { background: var(--accent); border-color: var(--accent); }
.substep-row-rich input:checked + .substep-label .task-box::after { content: "✓"; }
.substep-row-rich input:focus-visible + .substep-label .task-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.substep-row-rich input:disabled + .substep-label { cursor: default; }
.substep-body { display: flex; flex-direction: column; gap: 4px; padding-left: 56px; }
.substep-line .substep-key, .basic-step .substep-key { font-weight: 700; }
.substep-body .copy-block, .basic-step .copy-block { margin-top: 6px; }
.basics-section > h2, .docs-section > h2 { margin-bottom: 6px; }
.basic-guide > summary h3, .doc-card > summary h3 { display: inline; margin: 0; }
.basic-steps { margin: 6px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.basic-step { display: list-item; }
.basic-step > * + * { margin-top: 4px; }
.basic-step::marker { font-weight: 700; }
.basic-lead, .basics-lead, .docs-lead { margin-top: 6px; }
.doc-card-facts { margin: 4px 0 0; }
.doc-card-facts dt { margin-top: 10px; font-weight: 700; }
.doc-card-facts dd { margin: 2px 0 0; }
.doc-card-facts dd ul { margin: 4px 0 0; padding-left: 20px; }
.doc-card-calibration { margin-top: 14px; }
.doc-card-sample { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 13px; }
.doc-card-inline { margin-top: 20px; }
.doc-card-inline > .doc-card-title { font-family: var(--font-sans); font-size: 18px; font-weight: 700; }
.migrate-box { margin-top: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; border-left: 3px solid var(--accent); }
.migrate-empty { padding: 8px 12px; border-left: 3px solid var(--line-hover); }
.link-return { display: block; margin: 0 0 10px; }
.journal-repo { margin-top: 10px; }
.journal-repo-steps { margin: 10px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
:where(html[data-teema]) .substep-row-rich input:checked + .substep-label .task-box { background: var(--accent); border-color: var(--accent); }
html[data-teema] .substep-row.substep-row-rich:focus-within { outline: none; }
html[data-teema] .substep-row-rich input:focus-visible + .substep-label { outline: var(--focus-w) solid var(--ink); outline-offset: 3px; }
html[data-teema] .substep-row-rich input:focus-visible + .substep-label .task-box { outline: none; }
:where(html[data-teema]) .substep-body { padding-left: 0; gap: .5em; }
:where(html[data-teema]) .basic-steps { padding-left: 1.6em; gap: 1em; }
:where(html[data-teema]) .doc-card-facts dt { margin-top: 1em; }
:where(html[data-teema]) .doc-card-facts dd { margin: .3em 0 0; }
:where(html[data-teema]) .migrate-box, :where(html[data-teema]) .migrate-empty { border-left-width: var(--bw); }
:where(html[data-teema]) .migrate-empty { border-left: var(--bw) solid var(--ink); padding: .5em .8em; }
:where(html[data-teema]) .doc-card-inline { margin-top: 1.5em; }
:where(html[data-teema]) .journal-repo-steps { padding-left: 1.6em; gap: .6em; }