/* kalenteri-ohje: sivun omat sisältötyylit (pienoismallit). Poistuvat, kun pienoismallit korvataan kaappauksilla. */
:root{--sky:#0891b2; --sky-dark:#0e7490; --sky-soft:#22d3ee; --ink:#1e293b; --muted:#475569; --soft:#64748b; --faint:#94a3b8; --line:#e2e8f0; --line2:#cbd5e1; --card:#fafbfc; --head:#f1f5f9; --help-bg:#ecfeff; --help-line:#22d3ee; --help-ink:#155e75; --warn-bg:#fef3c7; --warn-line:#f59e0b; --warn-ink:#92400e; --req:#dc2626; --c-exam:#2563eb; --c-exam-bg:#eff6ff; --c-final:#8b5cf6; --c-final-bg:#f5f3ff; --c-essay:#f59e0b; --c-essay-bg:#fffbeb; --c-forum:#10b981; --c-forum-bg:#ecfdf5; --c-other:#d97706; --c-other-bg:#fff7ed}
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}
.pane{background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.modeltoggle{display:flex; align-items:center; gap:12px; padding:10px 14px; background:#f8fafc; border:1px solid var(--line); border-radius:8px; margin-bottom:14px; flex-wrap:wrap; font-size:.86em}
.radio{display:inline-flex; align-items:center; gap:6px; color:var(--muted)}
.rc{width:14px;height:14px;border-radius:50%;border:2px solid var(--line2);display:inline-block;position:relative}
.rc.on{border-color:var(--sky)}
.rc.on::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--sky)}
.calbody{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-start}
.calside{width:175px; flex-shrink:0}
.calside .sh{font-size:.72em; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--soft); margin-bottom:8px}
.dragitem{background:#f1f5f9; border:1px solid var(--line); border-radius:6px; padding:6px 9px; margin-bottom:6px; font-size:.8em; cursor:grab; position:relative}
.dragitem .t{font-size:.85em; color:var(--faint)}
.dragitem strong{font-size:1em}
.dragitem::after{content:"⠿"; position:absolute; right:7px; top:6px; color:var(--line2)}
.calmain{flex:1; min-width:300px}
.calhead{display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:8px; font-weight:700}
.calnav{width:26px;height:26px;border:1px solid var(--line2);border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--soft);font-size:.85em}
.grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.gh{font-size:.7em; font-weight:700; color:var(--faint); text-align:center; padding:2px}
.day{min-height:74px; border:1px solid var(--line); border-radius:6px; background:#fff; padding:3px}
.day .dn{font-size:.7em; color:var(--faint); font-weight:600}
.day.today{border-color:var(--sky)}
.day.today .dn{color:var(--sky)}
.day.out{background:#f8fafc}
.ci{border:1px solid var(--line); border-left-width:3px; border-radius:5px; padding:2px 4px; margin-top:2px; font-size:.66em}
.ci .ch{display:flex; align-items:center; justify-content:space-between}
.ci .tl{font-weight:700; text-transform:uppercase; letter-spacing:.02em; font-size:.92em}
.ci .x{color:var(--faint); cursor:pointer}
.ci .nm{font-size:.95em; font-weight:600; color:var(--ink); line-height:1.2}
.ci.exam{border-left-color:var(--c-exam); background:var(--c-exam-bg)}
.ci.exam .tl{color:var(--c-exam)}
.ci.final{border-left-color:var(--c-final); background:var(--c-final-bg)}
.ci.final .tl{color:var(--c-final)}
.ci.essay{border-left-color:var(--c-essay); background:var(--c-essay-bg)}
.ci.essay .tl{color:var(--c-essay)}
.ci.forum{border-left-color:var(--c-forum); background:var(--c-forum-bg)}
.ci.forum .tl{color:var(--c-forum)}
.ci.other{border-left-color:var(--c-other); background:var(--c-other-bg)}
.ci.other .tl{color:var(--c-other)}
.legend{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px}
@media(max-width:560px){
.legend{grid-template-columns:1fr}
}
.leg{display:flex; align-items:center; gap:9px; font-size:.9em; border:1px solid var(--line); border-radius:8px; padding:8px 11px; background:#fff}
.sw{width:14px; height:14px; border-radius:4px; flex:0 0 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}