/* kurssitehtavapalautukset-ohje: sivun omat sisältötyylit (pienoismallit). Poistuvat, kun pienoismallit korvataan kaappauksilla. */
:root{--bl:#2563eb; --bl-dark:#1d4ed8; --bl-soft:#93c5fd; --bl-deep:#1e3a8a; --ink:#1e293b; --muted:#475569; --soft:#64748b; --faint:#94a3b8; --line:#e2e8f0; --line2:#cbd5e1; --card:#fafbfc; --help-bg:#eff6ff; --help-line:#93c5fd; --help-ink:#1e40af; --warn-bg:#fef3c7; --warn-line:#f59e0b; --warn-ink:#92400e; --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)}
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:7px; padding:7px 13px; font-weight:600; font-size:.84em; display:inline-flex; align-items:center; gap:6px; cursor:default; white-space:nowrap}
.btn.bl{background:var(--bl); color:#fff}
.btn.danger{background:#dc2626; color:#fff}
.btn.ghost{background:#fff; border:1px solid var(--line2); color:#334155}
.btn.sm{padding:5px 10px; font-size:.8em}
.ctoolbar{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:14px}
.ctoolbar h4{margin:0; font-size:1.05em}
.ctrls{display:flex; gap:8px; align-items:center}
.selbox{border:1px solid var(--line2); border-radius:6px; padding:5px 10px; font-size:.82em; background:#fff; color:var(--muted); display:flex; align-items:center; gap:6px}
.cbox{border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; margin-bottom:14px}
.chead{padding:11px 15px; background:#f1f5f9; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:9px}
.chead .ct{font-weight:700; color:var(--ink)}
.chead .cm{margin-left:auto; font-size:.82em; color:var(--soft)}
.thead{padding:9px 15px 9px 30px; background:#fafbfc; display:flex; align-items:center; gap:9px; border-top:1px solid #f1f5f9}
.thead .tt{font-weight:600; color:#334155; font-size:.95em}
.thead .tm{margin-left:auto; font-size:.8em; color:var(--soft)}
.srow{padding:9px 15px 9px 44px; border-top:1px solid #f1f5f9; display:flex; align-items:center; gap:11px; font-size:.9em}
.srow.exp{background:#eff6ff; border-bottom:1px solid #dbeafe}
.srow .tg{color:var(--soft); width:12px}
.srow .snm{font-weight:600; color:var(--ink); min-width:180px}
.srow .pre{flex:1; color:#475569; font-style:italic; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.srow .pre.empty{color:#b91c1c}
.srow .dt{font-size:.82em; color:var(--soft); white-space:nowrap}
.st{font-size:.76em; padding:2px 9px; border-radius:12px; white-space:nowrap; font-weight:600}
.st-u{background:#fef3c7; color:#92400e}
.st-g{background:#dcfce7; color:#166534}
.st-c{background:#fee2e2; color:#991b1b}
.st-r{background:#e0e7ff; color:#3730a3}
.st-rs{background:#ffedd5; color:#9a3412}
.btn.ret{background:#f97316; color:#fff}
.revinfo{padding:8px 12px; border-radius:4px; font-size:.86em; margin-bottom:10px}
.revinfo.ret{background:#e0e7ff; border-left:3px solid #6366f1; color:#3730a3}
.revinfo.rs{background:#ffedd5; border-left:3px solid #f97316; color:#9a3412}
.hist{margin-top:10px; border:1px solid var(--line); border-radius:6px; background:#fff}
.hist .hs{padding:7px 12px; font-size:.82em; font-weight:600; color:#475569}
.hist .he{border-top:1px solid #f1f5f9; padding:9px 12px}
.hist .hh{font-size:.76em; font-weight:600; color:#64748b; margin-bottom:5px}
.hist .ha{font-size:.86em; color:#334155; padding:7px 10px; background:#f8fafc; border-radius:4px}
.hist .hf{margin-top:5px; font-size:.84em; color:#3730a3}
.stud{background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 16px}
.stud .sh{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.stud .sh .tt{font-weight:700}
.sret{background:#fff7ed; border:1px solid #fed7aa; border-radius:8px; padding:10px 13px; margin-bottom:10px; font-size:.88em; color:#7c2d12}
.sret .t{font-weight:700; margin-bottom:4px}
.sret .lb{font-size:.8em; font-weight:700; margin:6px 0 2px}
.sret .ds{font-size:.82em; color:#9a3412; margin-top:6px}
.seditor{border:1px solid var(--line2); border-radius:6px; padding:9px 11px; min-height:54px; font-size:.88em; color:var(--ink); margin-bottom:10px}
.ssol{font-size:.8em; color:var(--soft); font-style:italic; margin-top:8px}
.detail{padding:14px 15px 16px 44px; background:#f8fafc; border-top:1px solid #dbeafe}
.pblock{padding:9px 12px; background:#fef9c3; border-left:3px solid #facc15; border-radius:4px; font-size:.88em; color:#713f12; margin-bottom:10px}
.pblock .pl{font-size:.76em; font-weight:700; color:#92400e; margin-bottom:3px}
.sblock{border:1px solid #c7d2fe; border-radius:4px; background:#eef2ff; margin-bottom:10px; padding:7px 12px; font-size:.84em; font-weight:600; color:#3730a3}
.dgrid{display:grid; grid-template-columns:1.2fr 1fr; gap:16px; align-items:start}
@media(max-width:620px){
.dgrid{grid-template-columns:1fr}
}
.ablock{padding:10px 13px; background:#fff; border:1px solid var(--line); border-radius:6px; font-size:.9em; color:var(--ink)}
.albl{font-size:.78em; color:var(--soft); font-weight:600; margin-bottom:5px}
.gform{display:flex; flex-direction:column; gap:9px}
.grow{display:flex; align-items:center; gap:9px}
.grow label{font-size:.84em; color:var(--muted); min-width:80px}
.numinp{width:78px; border:1px solid var(--line2); border-radius:6px; padding:5px 9px; font-size:.86em; color:var(--ink)}
.tarea{border:1px solid var(--line2); border-radius:6px; padding:7px 10px; min-height:60px; font-size:.86em; color:var(--faint)}
.gacts{display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.gmsg{font-size:.8em; color:#15803d}
.changed{padding:8px 12px; background:#fee2e2; border-left:3px solid #ef4444; border-radius:4px; color:#991b1b; font-size:.84em; margin-bottom:10px}
.snap{margin-top:9px; padding:9px 12px; background:#fef3c7; border-left:3px solid #f59e0b; border-radius:4px; font-size:.84em; color:#78350f}
.kbd{font-family:ui-monospace,Menlo,Consolas,monospace; background:#eef2f7; border:1px solid var(--line2); border-radius:5px; padding:1px 7px; font-size:.86em}