/* tehtavaapuri-ohje: sivun omat sisältötyylit (pienoismallit). Poistuvat, kun pienoismallit korvataan kaappauksilla. */
:root{--in:#0f766e; --in-dark:#115e59; --in-soft:#2dd4bf; --ink:#1e293b; --muted:#475569; --soft:#64748b; --faint:#94a3b8; --line:#e2e8f0; --line2:#cbd5e1; --card:#fafbfc; --head:#f1f5f9; --help-bg:#f0fdfa; --help-line:#2dd4bf; --help-ink:#115e59; --warn-bg:#fef3c7; --warn-line:#f59e0b; --warn-ink:#92400e; --danger-bg:#fef2f2; --danger-line:#ef4444; --danger-ink:#991b1b; --req:#dc2626}
h3.sub{font-size:1.12em; margin:24px 0 8px; color:var(--ink)}
.callout{background:var(--help-bg); border-left:4px solid var(--help-line); color:var(--help-ink); padding:12px 16px; border-radius:8px; margin:16px 0; font-size:.95em;}
.callout.warn{background:var(--warn-bg); border-left-color:var(--warn-line); color:var(--warn-ink)}
.callout.danger{background:var(--danger-bg); border-left-color:var(--danger-line); color:var(--danger-ink)}
ul.clean, ol.steps{margin:10px 0; padding-left:22px}
ul.clean li, ol.steps li{margin:6px 0}
.mock{margin:20px 0 8px; border-radius:12px; overflow:hidden; box-shadow:0 14px 34px rgba(15,23,42,.16); border:1px solid var(--line)}
.mock .bar{background:#e9eef5; padding:9px 12px; display:flex; align-items:center; gap:7px; border-bottom:1px solid var(--line)}
.mock .dot{width:11px;height:11px;border-radius:50%}
.mock .dot.r{background:#f87171}
.mock .dot.y{background:#fbbf24}
.mock .dot.g{background:#34d399}
.mock .bar .ttl{margin-left:10px; font-size:.8em; color:var(--soft); font-weight:600}
.app{font-size:14px; color:var(--ink)}
.screen{background:#f4f6fb; padding:16px 18px}
.pane{background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.btn{border:1px solid transparent; border-radius:7px; padding:7px 12px; font-weight:600; font-size:.84em; display:inline-flex; align-items:center; gap:6px; cursor:default; white-space:nowrap}
.btn.in{background:var(--in); color:#fff}
.btn.ghost{background:#fff; border-color:var(--line2); color:#334155}
.btn.red{background:#fff; border-color:#fecaca; color:#b91c1c}
.btn.sm{padding:4px 9px; font-size:.78em}
.tapanel{max-width:600px; margin:0 0 0 auto; background:#f6fafa; border:1px solid #dbe7e6; border-radius:12px; overflow:hidden; box-shadow:-8px 0 26px rgba(6,60,55,.12)}
.tahead{background:linear-gradient(135deg,#0f766e,#0d9488 55%,#2dd4bf); color:#fff; display:flex; align-items:center; gap:10px; padding:11px 14px}
.taav{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:1em}
.tahead .nm{font-weight:800; line-height:1.1}
.tahead .sb{font-size:.78em; opacity:.9}
.tahead .ic{margin-left:auto; display:flex; gap:6px}
.tahead .ic span{width:28px;height:28px;border-radius:7px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:.85em}
.tabar{display:flex; align-items:center; gap:8px; padding:8px 12px; background:#e6f4f2; border-bottom:1px solid #cfe6e3; font-size:.84em}
.tabar .lb{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tamsgs{padding:12px; display:flex; flex-direction:column; gap:8px}
.bub{max-width:88%; padding:8px 12px; border-radius:12px; font-size:.86em}
.bub.a{background:#fff; border:1px solid #dbe7e6; align-self:flex-start}
.bub.u{background:#0f766e; color:#fff; align-self:flex-end}
.bub.s{background:#fff7ed; border:1px dashed #fdba74; color:#9a3412; align-self:center; font-size:.8em}
.plist{background:#fff; border:1px solid #cfe6e3; border-radius:10px; overflow:hidden}
.plhead{display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px 10px; background:#f0fdfa; border-bottom:1px solid #cfe6e3; font-size:.84em}
.plhead .sp{flex:1}
.prow{display:flex; align-items:center; gap:8px; padding:7px 10px; border-bottom:1px solid #eef2f2; font-size:.84em}
.prow:last-child{border-bottom:none}
.cbx{width:14px;height:14px;border:1.5px solid #0d9488;border-radius:3px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;color:#fff;background:#0d9488;flex:0 0 auto}
.cbx.off{background:#fff}
.tg{color:var(--faint); font-size:.8em}
.bdg{font-size:.72em; font-weight:700; padding:2px 7px; border-radius:6px; background:#ccfbf1; color:#115e59; white-space:nowrap}
.bdg.stack{background:#ede9fe; color:#5b21b6}
.bdg.upd{background:#dbeafe; color:#1e40af}
.bdg.del{background:#fee2e2; color:#991b1b}
.pt{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pp{color:var(--soft); font-size:.8em; white-space:nowrap}
.st{font-size:.72em; font-weight:700; padding:2px 7px; border-radius:6px; white-space:nowrap}
.st.ok{background:#dcfce7; color:#166534}
.st.no{background:#f1f5f9; color:#64748b}
.pbody{padding:10px 14px 12px 38px; background:#fbfefe; border-bottom:1px solid #eef2f2; font-size:.84em}
.pbody h5{margin:6px 0 4px; font-size:.78em; text-transform:uppercase; letter-spacing:.6px; color:var(--soft)}
.pbody .sol{color:#0f766e}
.choice{display:flex; gap:6px; margin:2px 0}
.choice.ok{color:#166534; font-weight:600}
.tainput{border-top:1px solid #dbe7e6; background:#fff; padding:8px 10px}
.chips{display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin-bottom:7px; font-size:.78em}
.chip{border:1px solid var(--line2); border-radius:14px; padding:2px 9px; background:#fff; color:#334155}
.chip.on{background:#0f766e; border-color:#0f766e; color:#fff}
.inrow{display:flex; gap:7px; align-items:center}
.inrow .fld{flex:1; border:1px solid var(--line2); border-radius:9px; padding:7px 10px; color:var(--faint); font-size:.84em}
.roundbtn{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.fab{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#0f766e,#0d9488 55%,#2dd4bf);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3em;box-shadow:0 6px 20px rgba(13,148,136,.45)}
.matchip{display:inline-flex; align-items:center; gap:5px; font-size:.78em; background:#f0fdfa; border:1px solid #99f6e4; color:#115e59; border-radius:14px; padding:2px 9px; margin-bottom:6px}
.pick{max-width:520px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px}
.pick h4{margin:0 0 8px}
.pick .srch{border:1px solid var(--line2); border-radius:8px; padding:6px 10px; color:var(--faint); font-size:.85em; margin-bottom:8px}
.pgrp{font-size:.72em; text-transform:uppercase; letter-spacing:.8px; color:var(--faint); font-weight:700; margin:10px 0 3px}
.pit{display:flex; align-items:center; gap:6px; padding:6px 8px; border-radius:7px; font-size:.85em}
.pit:hover{background:var(--bg)}
.pit.sub{padding-left:22px}
.pit.dis{color:var(--faint)}
.pit.new{color:#0f766e; font-weight:600}
.pit .cnt{margin-left:auto; font-size:.8em; color:var(--faint)}
.diff{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.diff > div{border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:#fff}
@media(max-width:560px){
.diff{grid-template-columns:1fr}
}
table.types{width:100%; border-collapse:collapse; margin:14px 0; font-size:.9em; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden}
table.types th, table.types td{padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
table.types th{background:var(--head); font-size:.85em; color:var(--muted)}
table.types td.y{color:#166534; font-weight:700; text-align:center}
table.types td.n{color:var(--faint); text-align:center}
.tscroll{overflow-x:auto}
.badgekey{display:inline-flex; align-items:center; gap:6px; font-size:.82em; background:#f1f5f9; border:1px solid var(--line); border-radius:7px; padding:4px 9px; color:var(--muted); font-weight:600; margin:2px 4px 2px 0}
.kbd{font-family:ui-monospace,Menlo,Consolas,monospace; background:#eef2f7; border:1px solid var(--line2); border-radius:5px; padding:1px 7px; font-size:.86em}
.ex{font-family:inherit; background:#f0fdfa; border:1px solid #99f6e4; border-radius:8px; padding:6px 11px; margin:5px 0; font-size:.9em; color:#115e59}