/* tehtavat-ohje: sivun omat sisältötyylit (pienoismallit). Poistuvat, kun pienoismallit korvataan kaappauksilla. */
:root{--ind:#6366f1; --ind-dark:#4f46e5; --blue:#2563eb; --green:#16a34a; --green-dark:#15803d; --ink:#1e293b; --muted:#475569; --soft:#64748b; --faint:#94a3b8; --line:#e2e8f0; --line2:#cbd5e1; --card:#fafbfc; --head:#f1f5f9; --help-bg:#f0f9ff; --help-line:#38bdf8; --help-ink:#0c4a6e; --warn-bg:#fef3c7; --warn-line:#f59e0b; --warn-ink:#92400e; --ai-bg:#eef2ff; --ai-line:#818cf8; --ai-ink:#3730a3; --req:#dc2626}
h3.sub{font-size:1.12em; margin:26px 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.ai{background:var(--ai-bg); border-left-color:var(--ai-line); color:var(--ai-ink)}
ul.clean{margin:10px 0; padding-left:22px}
ul.clean li{margin:6px 0}
.path{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:14px 0; font-size:.92em}
.path .crumb{background:#fff; border:1px solid var(--line2); border-radius:8px; padding:6px 12px; font-weight:600; color:var(--muted)}
.path .arr{color:var(--faint); font-weight:700}
.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}
.btn{border:1px solid transparent; border-radius:8px; padding:8px 14px; font-weight:600; font-size:.85em; display:inline-flex; align-items:center; gap:6px; cursor:default; white-space:nowrap}
.btn.success{background:#16a34a; color:#fff}
.btn.secondary{background:#eef2ff; border-color:#c7d2fe; color:#3730a3}
.btn.ghost{background:#fff; border-color:var(--line); color:#334155}
.btn.primary{background:var(--blue); color:#fff}
.btn.danger{background:#fee2e2; border-color:#fecaca; color:#b91c1c}
.btn.sm{padding:6px 11px; font-size:.82em}
.tmode{display:flex; gap:18px; align-items:center; padding:10px 14px; background:#f1f5ff; border:1px solid #e0e7ff; border-radius:10px; margin-bottom:14px; font-size:.9em; flex-wrap:wrap}
.radio{display:inline-flex; align-items:center; gap:7px; color:var(--muted)}
.radio .rc{width:15px;height:15px;border-radius:50%;border:2px solid var(--line2);display:inline-block;position:relative}
.radio .rc.on{border-color:var(--ind)}
.radio .rc.on::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ind)}
.qmark{width:22px;height:22px;border-radius:50%;border:1.5px solid #a5b4fc;background:#eef2ff;color:#6366f1;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.82em}
.tcard{background:#fff; border:1px solid var(--line); border-radius:12px; margin-bottom:12px; overflow:hidden}
.tcard .th{display:flex; align-items:center; gap:8px; padding:10px 12px; background:#f8fafc; border-bottom:1px solid var(--line)}
.tnum{font-weight:700; color:var(--soft); font-size:.86em; background:#eef2ff; border-radius:6px; padding:2px 8px}
.ttitle{flex:1}
.inp{width:100%; padding:7px 10px; border:1px solid var(--line2); border-radius:7px; font-size:.9em; background:#fff; color:var(--ink)}
.inp.ph{color:var(--faint)}
.inp.area{min-height:48px; white-space:pre-wrap}
.selsm{border:1px solid var(--line2); border-radius:6px; padding:5px 8px; font-size:.82em; background:#fff; color:var(--muted)}
.numsm{width:56px; border:1px solid var(--line2); border-radius:6px; padding:5px 7px; font-size:.82em; text-align:center}
.tbody{padding:12px}
.fg{margin-bottom:12px}
.fg > label{display:block; font-size:.82em; font-weight:600; color:var(--muted); margin-bottom:4px}
.fhrow{display:flex; justify-content:space-between; align-items:center; margin-bottom:4px}
.toolbar{display:flex; gap:3px; border:1px solid var(--line); border-bottom:none; border-radius:7px 7px 0 0; padding:4px 6px; background:#f8fafc}
.toolbar b,.toolbar i,.toolbar code,.toolbar span.tb{display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:22px; font-size:.78em; border-radius:4px; color:var(--soft); border:1px solid transparent}
.toolbar .area{border-radius:0 0 7px 7px}
.metarow{display:flex; gap:14px; align-items:center; flex-wrap:wrap; font-size:.82em; color:var(--soft); margin-top:6px}
.chk{display:inline-flex; align-items:center; gap:7px; color:var(--muted); cursor:default}
.chk .box{width:15px;height:15px;border:1px solid var(--line2);border-radius:3px;display:inline-block;position:relative;background:#fff}
.chk .box.x{background:var(--ind);border-color:var(--ind)}
.chk .box.x::after{content:"✓";color:#fff;font-size:11px;position:absolute;top:-2px;left:1px}
.ainote{font-size:.74em; color:#b45309; background:#fef3c7; border-left:3px solid #f59e0b; padding:2px 8px; border-radius:4px}
.compare{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:16px 0}
@media(max-width:640px){
.compare{grid-template-columns:1fr}
}
.cbox{border:1px solid var(--line); border-radius:12px; padding:16px; background:#fff}
.cbox.ai{border-top:4px solid var(--ind)}
.cbox.man{border-top:4px solid var(--green)}
.cbox h4{margin:0 0 6px; font-size:1.02em; display:flex; align-items:center; gap:8px}
.cbox p{margin:6px 0 0; font-size:.9em; color:var(--muted)}
.cbox .state{font-size:.74em; font-weight:700; padding:2px 9px; border-radius:10px; margin-left:auto}
.state.off{background:#eef2ff; color:#3730a3}
.state.on{background:#dcfce7; color:#166534}
.swal{max-width:470px; margin:0 auto; background:#fff; border-radius:12px; padding:26px 24px 22px; text-align:center; box-shadow:0 16px 48px rgba(0,0,0,.16); border:1px solid var(--line)}
.swal .ic{width:74px; height:74px; border-radius:50%; border:4px solid #9de0f6; color:#62cbef; font-size:40px; line-height:1; display:flex; align-items:center; justify-content:center; margin:4px auto 16px; font-family:Georgia,serif}
.swal .ic.warn{border-color:#f8bb86; color:#f0a04b; font-weight:700}
.swal .stitle{font-size:1.55em; color:#595959; font-weight:600; margin:0 0 16px}
.swal .score{color:#2f56d4; font-weight:700; margin:0 0 12px; font-size:1.02em}
.swal .stext{color:#545454; font-size:.96em; margin:0 0 6px; line-height:1.5}
.swal .stext b{color:#333}
.swal .sdisc{color:#9aa0a6; font-style:italic; font-size:.82em; margin:12px 0 20px}
.swal .sbtns{display:flex; gap:9px; justify-content:center; flex-wrap:wrap}
.swal .sb{border:none; border-radius:7px; padding:10px 18px; font-weight:600; font-size:.9em; color:#fff; cursor:default}
.swal .sb.purple{background:#7c6ff0}
.swal .sb.red{background:#e64942}
.swal .sb.grey{background:#7e8593}
.flow{counter-reset:s; margin:16px 0; padding:0; list-style:none}
.flow li{position:relative; padding:8px 0 8px 42px; border-left:2px solid #e0e7ff; margin-left:14px}
.flow li::before{counter-increment:s; content:counter(s); position:absolute; left:-15px; top:6px; width:28px; height:28px; border-radius:50%; background:var(--ind); color:#fff; font-weight:700; font-size:.82em; display:flex; align-items:center; justify-content:center}
.flow li strong{color:var(--ink)}
.kbd{font-family:ui-monospace,Menlo,Consolas,monospace; background:#eef2f7; border:1px solid var(--line2); border-radius:5px; padding:1px 7px; font-size:.86em}
.placeholder{color:var(--faint); font-size:.86em; padding:16px; text-align:center; border:1px dashed var(--line2); border-radius:10px; background:#fafbfc}
.hubtabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px}
.hubtab{border:1px solid var(--line); border-radius:10px; padding:7px 12px; background:#fff; display:flex; flex-direction:column}
.hubtab b{font-size:.86em}
.hubtab small{font-size:.72em; color:var(--soft)}
.hubtab.on{border-color:#6366f1; box-shadow:0 0 0 2px #e0e7ff}
.ctbwrap{display:grid; grid-template-columns:200px 1fr; gap:12px}
@media(max-width:620px){
.ctbwrap{grid-template-columns:1fr}
}
.ctbside{background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px}
.ctbside .srch{border:1px solid var(--line2); border-radius:6px; padding:5px 8px; font-size:.8em; color:var(--faint); margin-bottom:6px}
.ctbc{padding:6px 8px; border-radius:7px; font-size:.84em; display:flex; justify-content:space-between}
.ctbc.on{background:#eef2ff; color:#3730a3; font-weight:700}
.ctbc .n{color:var(--faint); font-size:.9em}
.ctbtask{background:#fff; border:1px solid var(--line); border-radius:10px; padding:9px 11px; margin-bottom:8px}
.ctbtask .hd{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.ctbtask .ex{font-size:.8em; color:var(--soft); margin:4px 0 6px}
.bdg{font-size:.72em; font-weight:600; border-radius:999px; padding:2px 8px; background:#f1f5f9; color:var(--muted)}
.bdg.med{background:#fef3c7; color:#92400e}
.bdg.man{background:#ede9fe; color:#5b21b6}
.newtag{display:inline-block; font-size:.66em; font-weight:700; letter-spacing:.4px; color:#065f46; background:#d1fae5; border:1px solid #a7f3d0; border-radius:8px; padding:1px 7px; margin-left:6px; vertical-align:middle}