/* KABO – exam simulation, evaluation analysis, self-checks and progress overview.
   Plain CSS (CSP: style-src 'self'); uses the design tokens of app.css. */

:root {
  --ok: #138a5e; --ok-soft: #e3f6ee;
  --good: #2f7fd8; --good-soft: #e6f0fd;
  --mid: #c97a12; --mid-soft: #fdf1e0;
  --weak: #c8413b; --weak-soft: #fde8e7;
  --none: #8a99ae; --none-soft: #eef2f7;
}
.level-strong { --lvl: var(--ok); --lvl-soft: var(--ok-soft); }
.level-good { --lvl: var(--good); --lvl-soft: var(--good-soft); }
.level-mid { --lvl: var(--mid); --lvl-soft: var(--mid-soft); }
.level-weak { --lvl: var(--weak); --lvl-soft: var(--weak-soft); }
.level-none { --lvl: var(--none); --lvl-soft: var(--none-soft); }

.muted { color: var(--ink-muted); font-size: .92rem; }
.sub-heading { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.button-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }

/* ---------- shared widgets ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .75rem; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 1rem; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .2rem; box-shadow: var(--shadow-card); }
.kpi-value { font-size: 1.6rem; font-weight: 780; letter-spacing: -.03em; color: var(--ink); line-height: 1.1; }
.kpi-value.is-up { color: var(--ok); }
.kpi-value.is-down { color: var(--weak); }
.kpi-label { font-size: .8rem; color: var(--ink-muted); line-height: 1.35; }

.meter { display: block; width: 100%; height: .55rem; }
.meter-track { fill: #e7edf6; }
.meter-fill { fill: var(--lvl, var(--brand)); }
.level-chip { display: inline-flex; align-items: center; padding: .1rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; color: var(--lvl, var(--ink-muted)); background: var(--lvl-soft, #eef2f7); white-space: nowrap; }

.insight-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.25rem; align-items: start; }
.panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }

.bar-list, .topic-list, .step-list, .attempt-list { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .65rem; }
.bar-row { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; }
.bar-row:not(:has(.bar-id)) { grid-template-columns: 1fr auto; }
.bar-id { display: inline-grid; place-items: center; min-width: 2.4rem; height: 2.4rem; border-radius: .8rem; font-weight: 800; color: var(--lvl); background: var(--lvl-soft); text-decoration: none; }
.bar-title { font-weight: 600; font-size: .92rem; margin-bottom: .3rem; line-height: 1.3; }
.bar-hint { font-size: .78rem; margin-top: .25rem; }
.bar-score { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; font-size: .9rem; }

.topic-row { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.topic-row:first-child { border-top: 0; }
.topic-name { font-weight: 650; line-height: 1.3; }
.topic-subject { font-size: .8rem; }
.topic-score { flex: none; display: grid; grid-template-columns: 6rem auto; grid-template-areas: "bar pct" "chip chip"; gap: .3rem .6rem; align-items: center; justify-items: end; min-width: 9rem; }
.topic-score .meter { grid-area: bar; }
.topic-percent { grid-area: pct; font-weight: 750; color: var(--lvl); white-space: nowrap; }
.topic-score .level-chip { grid-area: chip; }
.source-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.source-chip { font-size: .72rem; padding: .1rem .5rem; border-radius: 999px; background: #eef2f7; color: var(--ink-muted); }
.source-chip.is-strong { background: var(--ok-soft); color: var(--ok); font-weight: 650; }

.step-item { display: flex; gap: .8rem; align-items: flex-start; }
.step-number { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--surface-accent); color: var(--brand); font-weight: 800; }
.step-title { font-weight: 700; }
.method summary, .method-panel summary { cursor: pointer; font-weight: 650; color: var(--ink-muted); }
.method p { margin-top: .5rem; color: var(--ink-muted); font-size: .9rem; }

/* ---------- exam: hero, bar, steps ---------- */
.exam-hero { margin-bottom: 1.25rem; }
.exam-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.exam-meta span { padding: .25rem .7rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .85rem; }
.exam-alert { border: 1px solid #f3b9b5; background: var(--weak-soft); color: #7d221d; border-radius: 1rem; padding: 1rem 1.25rem; margin-bottom: 1rem; }

.exam-bar { position: sticky; top: .5rem; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding: .85rem 1.25rem; border-radius: 1.25rem; background: #0a2449f2; color: #fff; box-shadow: 0 12px 30px #0a24492e; margin-bottom: 1.25rem; }
.exam-timer { display: flex; flex-direction: column; min-width: 7rem; }
.exam-timer-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; opacity: .75; }
.exam-timer-value { font-size: 1.75rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.1; }
.exam-timer.is-warning .exam-timer-value { color: #ffd28a; }
.exam-timer.is-critical .exam-timer-value { color: #ff9c95; animation: exam-pulse 1s ease-in-out infinite; }
@keyframes exam-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .exam-timer.is-critical .exam-timer-value { animation: none; } }
.exam-progress { flex: 1 1 12rem; display: flex; flex-direction: column; gap: .3rem; }
.exam-progress-label { font-size: .85rem; opacity: .9; }
.exam-progress progress, .check-progress { width: 100%; height: .5rem; border: 0; border-radius: 999px; overflow: hidden; background: #ffffff33; appearance: none; }
.exam-progress progress::-webkit-progress-bar { background: #ffffff33; }
.exam-progress progress::-webkit-progress-value { background: #7fd3a8; border-radius: 999px; }
.exam-progress progress::-moz-progress-bar { background: #7fd3a8; }
.exam-save-status { font-size: .85rem; opacity: .85; margin-left: auto; }

.exam-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.exam-steps-vertical { grid-template-columns: 1fr; margin: 1rem 0 1.25rem; }
.exam-step { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border-radius: 1rem; background: #fff; border: 1px solid var(--line); font-size: .88rem; color: var(--ink-muted); }
.exam-step strong { color: var(--ink); }
.exam-step > span { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--surface-accent); color: var(--brand); font-weight: 800; }
.exam-step.is-current { border-color: #9ec0ee; background: var(--surface-accent); }
.exam-step.is-current > span { background: var(--brand); color: #fff; }

.task-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.task-chip { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; min-width: 2.75rem; height: 2.25rem; padding: 0 .6rem; border-radius: .75rem; border: 1px solid var(--line); background: #fff; font-weight: 700; text-decoration: none; color: var(--ink-muted); }
.task-chip.is-done { background: var(--ok-soft); border-color: #a9dfc6; color: var(--ok); }
.task-chip.is-done::after { content: " ✓"; margin-left: .2rem; }

/* ---------- exam: task cards ---------- */
.task-card { background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 1.5rem; margin-top: 1.25rem; scroll-margin-top: 7rem; }
.task-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.task-id { display: inline-grid; place-items: center; min-width: 2.6rem; height: 2.6rem; border-radius: .85rem; background: var(--brand); color: #fff; font-weight: 800; }
.task-title { flex: 1 1 14rem; font-size: 1.15rem; font-weight: 720; line-height: 1.3; letter-spacing: -.015em; }
.points-pill { padding: .25rem .75rem; border-radius: 999px; background: var(--surface-accent); color: var(--brand); font-weight: 700; font-size: .82rem; white-space: nowrap; }
.task-prompt { margin-top: 1rem; padding: 1rem 1.15rem; border-radius: 1rem; background: #f7f9fd; border: 1px solid #e6ecf5; }
.answer-label { display: block; margin-top: 1.25rem; font-weight: 700; }
.answer-field { display: block; width: 100%; margin-top: .5rem; min-height: 11rem; padding: .9rem 1rem; border: 1.5px solid var(--control-line); border-radius: 1rem; font: inherit; line-height: 1.55; background: #fff; resize: vertical; transition: border-color .15s, box-shadow .15s; }
.answer-field:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px #1766c626; }
.answer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-top: .4rem; font-size: .8rem; color: var(--ink-muted); }
.exam-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

.exam-dialog { border: 0; border-radius: 1.5rem; padding: 1.75rem; max-width: 28rem; width: calc(100% - 2rem); box-shadow: 0 30px 80px #0a24494d; }
.exam-dialog::backdrop { background: #0a244980; }
.deadline-callout{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1.25rem 0;padding:1.15rem 1.35rem;border-radius:1.25rem;color:#fff;background:linear-gradient(135deg,#0a2449,#1766c6);box-shadow:var(--shadow-card)}
.deadline-callout span:first-child{display:grid;gap:.15rem}.deadline-callout small{color:#dbeafe}.deadline-callout strong{font-size:1.2rem}.deadline-layout{display:grid;gap:1rem;margin-top:1.5rem}.deadline-form p{display:grid;gap:.35rem;margin-bottom:1rem}.deadline-form ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}.deadline-summary progress{width:100%;height:1rem;margin:.8rem 0}.deadline-calendar{display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem;margin-top:1rem}.calendar-day{min-width:0;border:1px solid var(--line);border-radius:1rem;background:var(--surface-card);padding:1rem;box-shadow:var(--shadow-card)}.calendar-day.is-today{border-color:var(--brand);box-shadow:0 0 0 2px #1766c622}.calendar-day header{display:flex;justify-content:space-between;gap:.6rem;border-bottom:1px solid var(--line);padding-bottom:.65rem}.calendar-day time{display:flex;gap:.45rem}.calendar-day ol{display:grid;gap:.65rem;margin-top:.75rem}.calendar-day li{display:grid;gap:.1rem}.calendar-day a{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:.18rem}.quiz-taxonomy{color:var(--ink-muted);font-size:.9rem;margin:.35rem 0 .7rem}.quiz-solution ul{display:grid;gap:.25rem;margin-top:.45rem;padding-left:1.2rem;list-style:disc}.graphic-enlarge{width:100%;cursor:zoom-in;border-radius:1rem}.graphic-dialog{width:min(96vw,90rem);max-width:none;max-height:94vh;padding:0;border:0;border-radius:1rem;overflow:hidden}.graphic-dialog::backdrop{background:#0a2449cc}.graphic-dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;border-bottom:1px solid var(--line);background:#fff}.graphic-zoom{max-height:calc(94vh - 4.5rem);overflow:auto;padding:1rem;background:#edf3fb}.graphic-zoom img{width:auto;max-width:none;min-width:100%;height:auto}.review-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin:1rem 0}.review-metrics div{display:grid;text-align:center;padding:.8rem;border:1px solid var(--line);border-radius:1rem;background:#fff}.review-metrics strong{font-size:1.45rem}.review-card{max-width:52rem;margin-inline:auto}.review-prompt{margin:1.5rem 0;font-size:1.2rem;line-height:1.7}.review-answer summary{width:max-content;cursor:pointer;list-style:none}.review-answer summary::-webkit-details-marker{display:none}.review-answer-text{margin:1rem 0;padding:1.1rem;border-left:.3rem solid var(--brand);background:var(--surface-accent)}.review-ratings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;margin-top:.75rem}.review-ratings button{display:grid;gap:.1rem}.review-ratings small{font-weight:400}@media(min-width:48rem){.deadline-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.deadline-calendar{grid-template-columns:repeat(3,minmax(0,1fr))}.review-ratings{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(min-width:70rem){.deadline-calendar{grid-template-columns:repeat(4,minmax(0,1fr))}}
.calendar-transfer-state{display:inline-flex;align-items:center;min-height:2rem;padding:.25rem .7rem;border-radius:999px;background:var(--ok-soft);color:var(--ok);font-size:.8rem;font-weight:750}.calendar-provider-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem;margin-top:1rem}.calendar-provider{display:flex;flex-direction:column;gap:.65rem;min-width:0;padding:1rem;border:1px solid var(--line);border-radius:1rem;background:#f8faff}.calendar-provider.is-ready{border-color:#a9dfc6;background:#f6fcf9}.calendar-provider>div{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.calendar-provider h3{font-size:1.05rem;font-weight:750}.calendar-provider p{color:var(--ink-muted);font-size:.9rem;flex:1}.calendar-provider-mark{display:inline-grid;place-items:center;min-width:2.35rem;height:2.35rem;padding:0 .4rem;border-radius:.75rem;background:#334155;color:#fff;font-size:.75rem;font-weight:800}.calendar-provider-mark.provider-google{background:#1766c6}.calendar-provider-mark.provider-microsoft{background:#5b48d6}.calendar-provider-status{padding:.2rem .55rem;border-radius:999px;background:var(--ok-soft);color:var(--ok);font-size:.75rem;font-weight:750}.calendar-provider-status.is-planned{background:var(--mid-soft);color:#8a5107}.calendar-provider-disabled{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--ink-muted);font-size:.85rem;font-weight:650}.calendar-import-help{margin-top:1rem;border-top:1px solid var(--line);padding-top:1rem}.calendar-import-help summary{cursor:pointer;color:var(--brand);font-weight:700}.calendar-import-help ol{display:grid;gap:.45rem;margin:.75rem 0 0 1.25rem;list-style:decimal}.calendar-import-help li{padding-left:.2rem}@media(min-width:48rem){.calendar-provider-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.exam-dialog p { margin-top: .6rem; }

/* ---------- exam: result ---------- */
.result-hero { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem 2rem; align-items: center; padding: 2rem; border-radius: var(--radius-card); border: 1px solid var(--line); background: linear-gradient(120deg, var(--lvl-soft), #fff 70%); box-shadow: var(--shadow-card); }
.result-ring svg { width: 9.5rem; height: 9.5rem; }
.ring-track { fill: none; stroke: #e3e9f2; stroke-width: 11; }
.ring-fill { fill: none; stroke: var(--lvl); stroke-width: 11; stroke-linecap: round; }
.ring-value { font-size: 1.6rem; font-weight: 800; fill: var(--ink); }
.ring-sub { font-size: .62rem; fill: var(--ink-muted); }
.result-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.035em; color: var(--lvl); line-height: 1.15; margin-top: .25rem; }
.result-lead { margin-top: .4rem; color: var(--ink-muted); }
.result-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.grade-badge { padding: .3rem .85rem; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 800; }
.grade-badge.small { padding: .1rem .55rem; font-size: .78rem; }
.pass-chip, .delta-chip { padding: .3rem .85rem; border-radius: 999px; font-weight: 700; font-size: .88rem; background: #eef2f7; color: var(--ink-muted); }
.pass-chip.is-pass, .delta-chip.is-up { background: var(--ok-soft); color: var(--ok); }
.pass-chip.is-fail, .delta-chip.is-down { background: var(--weak-soft); color: var(--weak); }
.result-kpis { grid-column: 1 / -1; }

.trend-chart { width: 100%; max-width: 26rem; height: auto; margin-top: .5rem; }
.trend-pass { stroke: var(--ink-muted); stroke-dasharray: 4 4; stroke-width: 1; opacity: .5; }
.trend-line { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linejoin: round; }
.trend-dot { fill: #fff; stroke: var(--brand); stroke-width: 2.5; }
.trend-dot.is-current { fill: var(--brand); }

.task-result > summary { cursor: pointer; list-style: none; }
.task-result > summary::-webkit-details-marker { display: none; }
.task-result > summary::after { content: "▾"; color: var(--ink-muted); margin-left: .25rem; }
.task-result[open] > summary::after { content: "▴"; }
.task-result .task-id { background: var(--lvl); }
.task-result { border-left: 5px solid var(--lvl); }
.compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; margin-top: 1.25rem; }
.compare-col .answer-box { margin-top: .5rem; padding: 1rem; border-radius: 1rem; background: #fbfcfe; border: 1px solid var(--line); font-size: .92rem; min-height: 4rem; }
.compare-col.is-solution .answer-box { background: #f2fbf6; border-color: #bfe6d2; }
.criteria { border: 0; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .6rem; }
.criteria legend { margin-bottom: .6rem; }
.criterion { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; padding: .75rem .9rem; border-radius: .9rem; border: 1px solid var(--line); background: #fff; }
.criterion-icon { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; font-weight: 800; }
.criterion.is-full .criterion-icon { background: var(--ok-soft); color: var(--ok); }
.criterion.is-part .criterion-icon { background: var(--mid-soft); color: var(--mid); }
.criterion.is-none .criterion-icon { background: var(--weak-soft); color: var(--weak); }
.criterion-body label { font-weight: 600; font-size: .9rem; display: block; line-height: 1.35; }
.criterion-body small { color: var(--ink-muted); font-size: .78rem; }
.criterion-input { display: flex; align-items: center; gap: .35rem; font-weight: 650; color: var(--ink-muted); }
.criterion-input input { width: 4.2rem; padding: .4rem .5rem; border: 1.5px solid var(--control-line); border-radius: .65rem; font: inherit; text-align: center; }

.exam-links { color: var(--ink-muted); }
.attempt-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1rem; border-radius: 1rem; border: 1px solid var(--line); background: #fff; text-decoration: none; color: inherit; }
.attempt-row:hover { border-color: #9ec0ee; background: var(--surface-accent); }
.attempt-score { display: flex; align-items: center; gap: .5rem; }

/* ---------- self-checks on learning pages ---------- */
.self-check { margin-top: 1rem; padding: .9rem 1rem; border-radius: 1rem; background: #f7f9fd; border: 1px dashed #c7d4e6; }
.understanding-check .self-check { background: transparent; border: 0; padding: 0; }
.self-check-question { font-weight: 700; margin-bottom: .6rem; }
.self-check-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.check-button { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .45rem 1rem; border-radius: .9rem; border: 1.5px solid; font: inherit; font-weight: 700; cursor: pointer; background: #fff; transition: transform .1s, background .15s; }
.check-button:active { transform: scale(.97); }
.check-button:disabled { opacity: .6; cursor: progress; }
.check-yes { border-color: #a9dfc6; color: var(--ok); }
.check-yes:hover { background: var(--ok-soft); }
.check-partial { border-color: #f0cf9d; color: var(--mid); }
.check-partial:hover { background: var(--mid-soft); }
.check-no { border-color: #f3b9b5; color: var(--weak); }
.check-no:hover { background: var(--weak-soft); }
.self-check[data-last="2"] .check-yes { background: var(--ok); color: #fff; border-color: var(--ok); }
.self-check[data-last="1"] .check-partial { background: var(--mid); color: #fff; border-color: var(--mid); }
.self-check[data-last="0"] .check-no { background: var(--weak); color: #fff; border-color: var(--weak); }
.self-check-status { margin-top: .5rem; font-size: .85rem; color: var(--ink-muted); min-height: 1.2em; }
.check-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin: 1rem 0; padding: 1rem 1.25rem; border-radius: 1.25rem; background: linear-gradient(110deg, #e9f7f0, #fff 70%); border: 1px solid #bfe6d2; }
.check-summary-text { flex: 1 1 14rem; }
.check-progress { flex: 1 1 10rem; background: #d9efe4; }
.check-progress::-webkit-progress-bar { background: #d9efe4; }
.check-progress::-webkit-progress-value { background: var(--ok); border-radius: 999px; }
.check-progress::-moz-progress-bar { background: var(--ok); }

/* ---------- progress overview ---------- */
.insight-hero { display: grid; gap: 1.25rem; padding: 2rem; border-radius: var(--radius-card); background: linear-gradient(115deg, #e5f0ff, #f5f9ff 62%, #fff0da); border: 1px solid #c9dcf7; }
.activity-chart { width: 100%; height: 8rem; margin-top: .75rem; }
.activity-bar { fill: #dbe5f2; }
.activity-bar.is-active { fill: var(--brand); }
.activity-label { font-size: 6px; fill: var(--ink-muted); }
.material-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.25rem; }
.material-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--lvl); border-radius: var(--radius-card); padding: 1.35rem; box-shadow: var(--shadow-card); }
.material-card.is-empty { border-top-color: var(--none); }
.material-head { display: flex; align-items: center; gap: .6rem; }
.material-head h3 { font-size: 1.05rem; font-weight: 750; }
.material-icon { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .75rem; background: var(--lvl-soft); color: var(--lvl); font-weight: 800; }
.material-value { margin-top: .9rem; font-size: 2.2rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.material-label { font-size: .82rem; color: var(--ink-muted); margin: .25rem 0 .6rem; }
.fact-list { display: grid; gap: .35rem; margin: .9rem 0 0; }
.fact-list div { display: flex; justify-content: space-between; gap: .75rem; font-size: .85rem; border-bottom: 1px dotted var(--line); padding-bottom: .25rem; }
.fact-list dt { color: var(--ink-muted); }
.fact-list dd { margin: 0; font-weight: 700; text-align: right; }
.gain-box { margin-top: .9rem; padding: .75rem .9rem; border-radius: .9rem; background: #f7f9fd; font-size: .86rem; flex: 1; }
.gain-title { font-weight: 750; margin-bottom: .2rem; display: flex; align-items: center; gap: .5rem; }
.gain-chip { padding: .05rem .5rem; border-radius: 999px; font-size: .75rem; background: #eef2f7; color: var(--ink-muted); }
.gain-chip.is-up { background: var(--ok-soft); color: var(--ok); }
.gain-chip.is-down { background: var(--weak-soft); color: var(--weak); }
.material-card .method { margin-top: .75rem; font-size: .85rem; }
.material-card .button { align-self: flex-start; }

@media (max-width: 640px) {
  .result-hero { grid-template-columns: 1fr; padding: 1.25rem; justify-items: start; }
  .result-ring svg { width: 8rem; height: 8rem; }
  .exam-bar { top: 0; border-radius: 0 0 1rem 1rem; padding: .7rem 1rem; }
  .exam-timer-value { font-size: 1.4rem; }
  .exam-save-status { margin-left: 0; width: 100%; }
  .task-card { padding: 1.1rem; }
  .criterion { grid-template-columns: auto 1fr; }
  .criterion-input { grid-column: 2; }
  .topic-row { flex-direction: column; }
  .topic-score { justify-items: start; }
  .insight-hero { padding: 1.25rem; }
}

/* ---------- package choice / pricing ---------- */
.pricing-page { max-width: 72rem; margin: 0 auto; }
.pricing-hero { text-align: center; padding: 2.5rem 1rem 1.5rem; }
.pricing-kicker { display: inline-block; padding: .3rem .9rem; border-radius: 999px; background: var(--surface-accent); color: var(--brand); font-weight: 750; font-size: .8rem; letter-spacing: .04em; }
.pricing-title { margin: 1rem auto 0; max-width: 22ch; font-size: clamp(1.9rem, 4.5vw, 3.1rem); line-height: 1.12; font-weight: 820; letter-spacing: -.04em; color: var(--ink); }
.pricing-lead { margin: 1rem auto 0; max-width: 52ch; color: var(--ink-muted); font-size: 1.08rem; }
.pricing-stats { list-style: none; margin: 1.75rem auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.pricing-stats li { min-width: 7.5rem; padding: .8rem 1rem; border-radius: 1rem; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.pricing-stats strong { font-size: 1.5rem; font-weight: 800; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.pricing-stats span { font-size: .8rem; color: var(--ink-muted); }

.pilot-banner { display: flex; align-items: flex-start; gap: .9rem; margin: 1rem 0 0; padding: 1rem 1.25rem; border-radius: 1.25rem; background: linear-gradient(110deg, var(--ok-soft), #fff 75%); border: 1px solid #bfe6d2; }
.pilot-badge { flex: none; padding: .2rem .7rem; border-radius: 999px; background: var(--ok); color: #fff; font-weight: 800; font-size: .78rem; }
.pilot-banner p { color: var(--ink); }

.package-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: 1.1rem 1.35rem; border-radius: 1.25rem; border: 1px solid var(--line); border-left: 5px solid var(--good); background: #fff; box-shadow: var(--shadow-card); }
.package-status.is-active { border-left-color: var(--ok); background: linear-gradient(110deg, var(--ok-soft), #fff 70%); }
.package-status.is-pending { border-left-color: var(--mid); background: linear-gradient(110deg, var(--mid-soft), #fff 70%); }
.package-status.is-rejected { border-left-color: var(--weak); }
.status-kicker { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.status-title { font-size: 1.2rem; font-weight: 780; color: var(--ink); }
.status-text { color: var(--ink-muted); font-size: .92rem; }

.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2rem; align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; padding: 1.75rem 1.5rem 1.5rem; border-radius: 1.5rem; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.price-card.is-recommended { border: 2px solid var(--brand); box-shadow: 0 18px 45px #1766c626; transform: translateY(-.5rem); }
.price-card.is-selected { outline: 3px solid #1766c640; outline-offset: 2px; }
.price-ribbon { position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%); padding: .3rem .9rem; border-radius: 999px; background: var(--brand); color: #fff; font-size: .78rem; font-weight: 800; white-space: nowrap; box-shadow: 0 6px 14px #1766c640; }
.price-name { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.price-tagline { margin-top: .35rem; color: var(--ink-muted); font-size: .92rem; min-height: 2.8em; }
.price-amount { margin-top: 1.1rem; font-size: 2.6rem; font-weight: 850; letter-spacing: -.045em; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.price-currency { font-size: 1rem; font-weight: 750; letter-spacing: 0; color: var(--ink-muted); vertical-align: .9rem; }
.price-terms { margin-top: .45rem; font-size: .82rem; color: var(--ink-muted); }
.price-pilot { display: inline-block; align-self: flex-start; margin-top: .6rem; padding: .15rem .6rem; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-weight: 750; font-size: .8rem; }
.price-action { margin-top: 1.25rem; }
.price-button { width: 100%; justify-content: center; min-height: 3rem; font-size: 1rem; }
.price-current { display: flex; align-items: center; justify-content: center; min-height: 3rem; border-radius: var(--radius-control); background: var(--ok-soft); color: var(--ok); font-weight: 800; }
.price-features { list-style: none; margin: 1.35rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .55rem; font-size: .9rem; }
.price-features li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .4rem; align-items: start; line-height: 1.4; }
.feature-mark { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; font-size: .75rem; font-weight: 900; margin-top: .1rem; }
.price-features .is-included .feature-mark { background: var(--ok-soft); color: var(--ok); }
.price-features .is-excluded { color: #9aa7b8; }
.price-features .is-excluded .feature-mark { background: #f0f3f7; color: #a5b0bf; }

.pricing-subtitle { font-size: 1.4rem; font-weight: 800; letter-spacing: -.025em; color: var(--ink); text-align: center; }
.pricing-steps { margin-top: 3rem; }
.pricing-steps ol { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.pricing-steps li { display: flex; gap: .85rem; padding: 1.1rem; border-radius: 1.1rem; background: #fff; border: 1px solid var(--line); }
.pricing-steps li > span { flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; }
.pricing-steps p { color: var(--ink-muted); font-size: .9rem; margin-top: .2rem; }
.pricing-faq { margin: 3rem auto 0; max-width: 46rem; display: grid; gap: .6rem; }
.pricing-faq h2 { margin-bottom: .6rem; }
.pricing-faq details { padding: 1rem 1.2rem; border-radius: 1rem; background: #fff; border: 1px solid var(--line); }
.pricing-faq summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.pricing-faq details p { margin-top: .5rem; color: var(--ink-muted); }
.pricing-footer { margin: 2rem 0 1rem; text-align: center; }

.term-radio { position: absolute; opacity: 0; pointer-events: none; }
.term-toggle { display: flex; justify-content: center; gap: .3rem; width: max-content; max-width: 100%; margin: 1.75rem auto 0; padding: .3rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.term-toggle label { display: flex; flex-direction: column; justify-content: center; cursor: pointer; padding: .55rem 1.1rem; border-radius: 999px; font-weight: 750; font-size: .92rem; color: var(--ink-muted); white-space: nowrap; text-align: center; }
.term-hint { display: block; font-size: .68rem; font-weight: 700; color: var(--ok); }
#term-month:checked ~ .term-toggle label[for="term-month"],
#term-year:checked ~ .term-toggle label[for="term-year"],
#term-two:checked ~ .term-toggle label[for="term-two"] { background: var(--ink); color: #fff; }
#term-two:checked ~ .term-toggle label[for="term-two"] .term-hint { color: #9ff0c8; }
.term-radio:focus-visible ~ .term-toggle { outline: 3px solid var(--focus-ring-color); outline-offset: 3px; }
.price-block { display: none; }
#term-month:checked ~ .pricing-grid .term-month,
#term-year:checked ~ .pricing-grid .term-year,
#term-two:checked ~ .pricing-grid .term-two { display: block; }
.price-unit { font-size: 1rem; font-weight: 700; letter-spacing: 0; color: var(--ink-muted); }
.price-saving { margin-top: .45rem; font-size: .82rem; font-weight: 750; color: var(--ok); }
.price-guarantee { margin-top: .6rem; padding: .55rem .7rem; border-radius: .8rem; background: var(--good-soft); color: #164f93; font-size: .82rem; font-weight: 650; }

@media (max-width: 860px) {
  .term-toggle label { padding: .5rem .7rem; font-size: .85rem; }
  .pricing-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .price-card.is-recommended { order: -1; transform: none; }
  .pricing-steps ol { grid-template-columns: 1fr; }
  .price-tagline { min-height: 0; }
  .pricing-hero { padding-top: 1.25rem; }
  .pricing-stats li { min-width: calc(50% - .5rem); }
  .pilot-banner { flex-direction: column; gap: .5rem; }
}

/* ---------- examination calendar ---------- */
.nav-link-calendar { border-color: #9fc6f2; background: #edf5ff; color: #135aa9; }
.plan-calendar-bridge { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1.3rem; padding: 1rem 1.2rem; border: 1px solid #bcd6f4; border-radius: 1rem; background: linear-gradient(110deg, #eaf4ff, #fff 72%); color: var(--ink); text-decoration: none; }
.plan-calendar-bridge small, .plan-calendar-bridge strong { display: block; }
.plan-calendar-bridge small { color: var(--ink-muted); font-size: .78rem; }
.plan-calendar-bridge strong { margin-top: .15rem; color: var(--brand); }
.calendar-view-switch { display: inline-flex; flex-wrap: wrap; gap: .25rem; margin: 1.1rem 0 1.4rem; padding: .25rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.calendar-view-switch a { min-height: 2.5rem; display: inline-flex; align-items: center; padding: .45rem .9rem; border-radius: 999px; color: var(--ink-muted); font-size: .88rem; font-weight: 750; text-decoration: none; }
.calendar-view-switch a[aria-current="page"] { background: var(--ink); color: #fff; }
.deadline-form { display: grid; gap: 1.25rem; }
.deadline-form-intro { margin-top: .3rem; color: var(--ink-muted); font-size: .88rem; }
.deadline-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.deadline-field { min-width: 0; }
.deadline-field-wide { grid-column: 1 / -1; }
.deadline-field > label { display: block; margin-bottom: .4rem; color: var(--ink); font-size: .88rem; font-weight: 750; }
.deadline-field input:not([type="checkbox"]), .deadline-field select { width: 100%; min-height: 2.8rem; padding: .55rem .7rem; border: 1px solid #94a8c0; border-radius: .65rem; background: #fff; color: var(--ink); }
.deadline-field > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .65rem; }
.deadline-field > div label { min-height: 2.65rem; display: flex; align-items: center; gap: .45rem; padding: .45rem .55rem; border: 1px solid var(--line); border-radius: .65rem; background: #f8fbff; font-size: .82rem; }
.deadline-field small { display: block; margin-top: .35rem; color: var(--ink-muted); font-size: .75rem; line-height: 1.4; }
.deadline-field.has-error input, .deadline-field.has-error select { border-color: var(--weak); }
.deadline-save { justify-content: center; width: 100%; }
.deadline-summary { display: flex; flex-direction: column; gap: .9rem; }
.capacity-meter { padding: .8rem; border-radius: .8rem; background: #f2f7ff; }
.capacity-meter div { display: flex; justify-content: space-between; gap: .8rem; margin-bottom: .45rem; color: var(--ink-muted); font-size: .76rem; }
.capacity-meter progress { display: block; width: 100%; height: .85rem; accent-color: var(--brand); }
.calendar-download { justify-content: center; }
.calendar-locked-hint { display: grid; gap: .2rem; padding: .8rem; border: 1px dashed #9fb4ca; border-radius: .8rem; background: #f8fafc; }
.calendar-locked-hint span { color: var(--ink-muted); font-size: .82rem; }
.calendar-sheet { padding: clamp(1rem, 2.5vw, 1.5rem); border: 1px solid var(--line); border-radius: 1.25rem; background: #fff; box-shadow: var(--shadow-card); }
.deadline-calendar { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.calendar-day.is-free { background: #f8fafc; border-style: dashed; box-shadow: none; }
.calendar-free { padding: .8rem; color: var(--ink-muted); font-size: .82rem; }
.calendar-empty { min-height: 14rem; display: flex; align-items: center; justify-content: center; gap: 1.2rem; padding: 2rem; border: 2px dashed #bdd0e5; border-radius: 1rem; background: linear-gradient(145deg, #f4f9ff, #fff); text-align: left; }
.calendar-empty-icon { flex: none; width: 4rem; height: 4rem; display: grid; place-items: center; border-radius: 1rem; background: var(--brand); color: #fff; font-size: 1.4rem; font-weight: 850; box-shadow: 0 10px 24px #1766c633; }
.calendar-empty h3 { color: var(--ink); font-size: 1.12rem; }
.calendar-empty p { max-width: 42rem; margin-top: .3rem; color: var(--ink-muted); line-height: 1.55; }
@media (max-width: 640px) {
  .deadline-form-grid { grid-template-columns: 1fr; }
  .deadline-field-wide { grid-column: auto; }
  .calendar-view-switch { width: 100%; border-radius: 1rem; }
  .calendar-view-switch a { flex: 1 1 9rem; justify-content: center; text-align: center; }
  .calendar-empty { align-items: flex-start; flex-direction: column; padding: 1.25rem; }
}

/* Student-first examination plan: compact inputs, honest progress, actionable gaps. */
.deadline-layout { align-items: start; gap: 1.25rem; margin-top: 0; }
.deadline-form, .deadline-summary { border-radius: 1.35rem; box-shadow: 0 12px 36px #0a244912; }
.deadline-form { gap: 1.1rem; }
.deadline-form > div:first-child p { margin-bottom: 0; }
.deadline-form-grid { gap: .9rem; }
.deadline-field > label { margin-bottom: .5rem; }
.deadline-field input:not([type="checkbox"]), .deadline-field select { min-height: 3.15rem; border-color: #a9b9cc; border-radius: .8rem; padding-inline: .85rem; }
.input-with-unit { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 0 !important; align-items: stretch; }
.input-with-unit input { min-width: 0; border-radius: .8rem 0 0 .8rem !important; }
.input-with-unit span { display: flex; align-items: center; padding: 0 .8rem; border: 1px solid #a9b9cc; border-left: 0; border-radius: 0 .8rem .8rem 0; background: #f3f6fa; color: var(--ink-muted); font-size: .8rem; font-weight: 700; }
.deadline-field > div:not(.input-with-unit) { gap: .5rem; }
.deadline-field > div:not(.input-with-unit) label { min-height: 3rem; border-radius: .8rem; transition: border-color .15s, background .15s, box-shadow .15s; }
.deadline-field > div:not(.input-with-unit) label:has(input:checked) { border-color: #6b9bd3; background: #eaf3ff; box-shadow: inset 0 0 0 1px #6b9bd3; }
.deadline-field input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: var(--brand); }
.deadline-advanced { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.deadline-advanced > summary { min-height: 2.9rem; display: flex; align-items: center; color: var(--brand); cursor: pointer; font-size: .84rem; font-weight: 750; }
.deadline-advanced[open] > summary { margin-bottom: 1rem; }
.deadline-save { min-height: 3.15rem; }

.deadline-summary { position: sticky; top: 1rem; gap: 1.15rem; overflow: hidden; }
.deadline-summary::before { content: ""; height: .3rem; position: absolute; inset: 0 0 auto; background: var(--brand); }
.deadline-summary.is-warning::before { background: #d98b2b; }
.deadline-summary .section-heading { margin-top: .25rem; font-size: clamp(1.25rem, 2.2vw, 1.65rem); }
.plan-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.plan-metrics > div { min-width: 0; display: grid; gap: .15rem; padding: .85rem .65rem; border: 1px solid #d9e4f0; border-radius: 1rem; background: #f7faff; }
.plan-metrics strong { color: var(--ink); font-size: clamp(1.15rem, 2.3vw, 1.55rem); line-height: 1.1; }
.plan-metrics span { color: var(--ink-muted); font-size: .7rem; line-height: 1.25; }
.capacity-meter { padding: 1rem; border: 1px solid #d9e6f5; border-radius: 1rem; background: #f1f6fd; }
.capacity-meter div { align-items: baseline; margin-bottom: .6rem; }
.capacity-meter div strong { color: var(--ink); white-space: nowrap; font-size: .8rem; }
.capacity-meter progress { overflow: hidden; height: .75rem; border: 0; border-radius: 999px; background: #dce6f1; accent-color: var(--brand); }
.capacity-meter progress::-webkit-progress-bar { border-radius: 999px; background: #dce6f1; }
.capacity-meter progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, #1766c6, #4c96e9); }
.capacity-meter progress::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, #1766c6, #4c96e9); }
.deadline-summary.is-warning .capacity-meter progress { accent-color: #d98b2b; }
.deadline-summary.is-warning .capacity-meter progress::-webkit-progress-value { background: linear-gradient(90deg, #d98b2b, #f2b95f); }
.deadline-summary.is-warning .capacity-meter progress::-moz-progress-bar { background: linear-gradient(90deg, #d98b2b, #f2b95f); }
.plan-advice { display: grid; gap: .25rem; padding: .9rem 1rem; border-radius: 1rem; background: #eaf4ff; font-size: .86rem; }
.deadline-summary.is-warning .plan-advice { background: #fff5e6; color: #6c430c; }
.plan-advice span { line-height: 1.5; }
.plan-footnote { color: var(--ink-muted); font-size: .74rem; line-height: 1.45; }

.unplaced-panel { border-color: #efd3a9; background: linear-gradient(145deg, #fffdf9, #fff8ed); }
.unplaced-panel > p { max-width: 64ch; color: var(--ink-muted); font-size: .88rem; }
.unplaced-list { display: grid; gap: .55rem; margin-top: 1rem; padding: 0; list-style: none; }
.unplaced-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem .9rem; border: 1px solid #eadbc5; border-radius: .9rem; background: #fff; }
.unplaced-list li > span { min-width: 0; display: grid; gap: .1rem; }
.unplaced-list small { color: var(--ink-muted); font-size: .76rem; }
.unplaced-list b { flex: none; color: #8a5107; font-size: .82rem; }
.calendar-export { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem 1.5rem; }
.calendar-export > div > p:last-child { max-width: 54ch; margin-top: .35rem; color: var(--ink-muted); font-size: .88rem; }
.calendar-export .calendar-import-help { grid-column: 1 / -1; margin-top: 0; }
.calendar-export .calendar-import-help p { margin-top: .65rem; color: var(--ink-muted); font-size: .84rem; }
.quiet-details { box-shadow: none; }

@media (max-width: 767px) {
  .deadline-summary { position: static; order: -1; }
  .deadline-layout { display: flex; flex-direction: column; }
  .deadline-layout > * { width: 100%; }
  .calendar-export { grid-template-columns: 1fr; }
  .calendar-export .calendar-import-help { grid-column: auto; }
  .calendar-export .button { width: 100%; }
}
@media (max-width: 640px) {
  .deadline-form, .deadline-summary, .unplaced-panel, .calendar-export { padding: 1.15rem; border-radius: 1.15rem; }
  .deadline-field > div:not(.input-with-unit) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-metrics { gap: .4rem; }
  .plan-metrics > div { padding: .75rem .5rem; }
  .unplaced-list li { align-items: flex-start; }
  .journey-nav { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; padding-bottom: .7rem; scrollbar-width: thin; }
  .journey-nav .nav-link { flex: 0 0 auto; white-space: nowrap; }
  .learner-feedback-dock { width: 3.25rem; }
  .learner-feedback-dock > summary { width: 3.25rem; height: 3.25rem; justify-content: center; padding: .3rem; font-size: 0; }
  .learner-feedback-dock[open] { width: min(22rem, calc(100vw - 2rem)); }
  .learner-feedback-dock[open] > summary { width: max-content; height: auto; padding: .35rem .9rem .35rem .35rem; font-size: .9rem; }
}
@media (max-width: 360px) {
  .plan-metrics { grid-template-columns: 1fr; }
  .plan-metrics > div { grid-template-columns: auto 1fr; align-items: baseline; gap: .6rem; }
}

/* Student-first planning: capacity is not a learning-success indicator. */
.learning-now { margin-top: 1rem; display: grid; gap: .7rem; }
.learning-now-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.deadline-summary, .deadline-form, .unplaced-group { min-width: 0; }
fieldset.deadline-field { margin: 0; padding: 0; border: 0; }
.deadline-field legend { margin-bottom: .4rem; color: var(--ink); font-size: .88rem; font-weight: 750; }
.plan-advanced { border-top: 1px solid var(--line); padding-top: .5rem; }
.plan-advanced > summary, .unplaced-group > summary { min-height: 2.75rem; padding-block: .75rem; cursor: pointer; color: var(--brand); font-weight: 700; }
.plan-advanced > .deadline-form-grid { margin-top: .75rem; }
.capacity-meter progress { --capacity-color: #1766c6; appearance: none; border: 0; border-radius: .45rem; background: #dce4f0; accent-color: var(--capacity-color); overflow: hidden; }
.capacity-meter progress::-webkit-progress-bar { background: #dce4f0; border-radius: .45rem; }
.capacity-meter progress::-webkit-progress-value { background: var(--capacity-color); }
.capacity-meter progress::-moz-progress-bar { background: var(--capacity-color); }
.capacity-needs_adjustment .capacity-meter { background: #fff4df; }
.capacity-needs_adjustment progress { --capacity-color: #a7440b; }
.capacity-needs_adjustment #capacity-title, .capacity-action { color: #853908; }
.capacity-needs_setup progress { --capacity-color: #64748b; }
.capacity-action { display: grid; gap: .25rem; }
.unplaced-groups { display: grid; gap: .75rem; margin-top: 1rem; }
.unplaced-group { border: 1px solid var(--line); border-radius: .8rem; padding-inline: .85rem; }
.unplaced-group > summary strong, .unplaced-group > summary span { display: block; }
.unplaced-group > summary span { font-size: .82rem; color: var(--ink-muted); }
.unplaced-group ul { display: grid; gap: .65rem; padding: .75rem 0 1rem; list-style: none; }
.unplaced-group li, .unplaced-group a { overflow-wrap: anywhere; }
.unplaced-group li a { display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (max-width: 640px) {
  .learning-now-actions { align-items: stretch; flex-direction: column; }
  .learning-now-actions .button { width: 100%; justify-content: center; }
  .capacity-meter div { flex-wrap: wrap; }
}
/* Choice groups of the deadline plan use fieldset/legend; same look as the field labels. */
.deadline-field > legend { display: block; margin-bottom: .4rem; padding: 0; color: var(--ink); font-size: .88rem; font-weight: 750; }
.deadline-field .errorlist { margin-top: .35rem; color: var(--weak); font-size: .8rem; font-weight: 650; }