/* The curriculum pages and /app (src/curriculum-views.ts), on site.css's tokens. */

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; font-size: 14px; color: var(--text-dim); }
.crumbs a { color: var(--text-dim); text-decoration: none; }
.crumbs a:hover { color: var(--link); }

/* ---- /curriculum ---- */
.cur-header { padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.cur-notes { display: grid; gap: 12px 32px; margin: 0 0 24px; font-size: 15px; line-height: 1.6; color: var(--text-body); }
.cur-notes strong { color: var(--text); font-weight: 600; }
@media (min-width: 640px) { .cur-notes { grid-template-columns: 1fr 1fr; } }
.cur-num { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; font-family: var(--mono); font-size: 14px; color: var(--text-dim); }
.cur-week0 { display: flex; align-items: center; gap: 16px; margin: 28px 0 8px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); text-decoration: none; }
.cur-week0:hover { border-color: var(--primary); color: var(--link); }
.cur-phase { padding: 24px 0; border-bottom: 1px solid var(--line); }
.cur-phase:last-child { border-bottom: 0; }
.cur-phase-head { display: flex; gap: 16px; align-items: flex-start; }
.cur-phase-head h2 { font-size: 18px; font-weight: 600; color: var(--text); margin: 4px 0 4px; }
.cur-intro { margin: 12px 0 0 48px; font-size: 15px; }
.cur-weeks { margin: 12px 0 0 48px; }
.cur-weeks summary { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--link); cursor: pointer; }
.cur-weeklist, .next-weeks { list-style: none; margin: 4px 0 0; padding: 0; }
.cur-weeklist li, .next-weeks li { border-top: 1px solid var(--line); }
.cur-weeklist a, .next-weeks a { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 8px 0; font-size: 15px; color: var(--text-body); text-decoration: none; }
.cur-weeklist a:hover, .next-weeks a:hover { color: var(--link); }
.cur-weeklist a[aria-current] { color: var(--text); font-weight: 500; }
.cur-wk { flex-shrink: 0; width: 5.5rem; font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.cur-done { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ok-bg); color: var(--ok-fg); }

.bar { height: 6px; margin-top: 10px; border-radius: 999px; background: var(--bg-muted); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.bar-label { margin-top: 4px; }

/* ---- a week and its tasks ---- */
.week-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 24px; font-size: 15px; color: var(--text-body); }
.week-dates strong { color: var(--text); font-weight: 600; }
.tasks { list-style: none; margin: 16px 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; }
.tasks > li + li { border-top: 1px solid var(--line); }
.task { padding: 14px 16px; }
.task-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.task-kind { flex-shrink: 0; min-width: 4.5rem; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--link); }
.task-title { flex: 1; min-width: 12rem; font-size: 15px; font-weight: 500; color: var(--text); }
.task-title a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.task-title a:hover { text-decoration-color: var(--link); }
.task.is-done .task-title { color: var(--text-dim); }
.task-state .pill svg { vertical-align: -2px; margin-right: 3px; }
.task-note { margin: 6px 0 0; font-size: 14px; color: var(--text-dim); }
.task-guide { margin: 14px 0 4px; padding: 16px 0 0; border-top: 1px dashed var(--line); }
.task-guide-link, .task-note a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--link); }
.tasks-full .task { padding: 20px 18px; }

/* The checkbox: a 24px box inside a 44px target. */
.task-check { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -10px -6px -10px -12px; flex-shrink: 0; cursor: pointer; }
.task-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.task-check span { display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--line-strong); border-radius: 6px; color: transparent; background: var(--bg); transition: background-color 0.12s, border-color 0.12s; pointer-events: none; }
.task-check input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.task-check input:disabled:checked + span, .task-check.is-auto span { background: var(--ok-fg); border-color: var(--ok-fg); color: var(--bg); }
.task-check input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.task-check input:disabled { cursor: default; }

/* ---- guides ---- */
.guide { max-width: 44rem; }
.guide h2 { font-size: 20px; }
.guide h4 { font-size: 15px; color: var(--text); margin: 18px 0 6px; }
.guide-summary { font-size: 17px; color: var(--text); }
.guide-time { font-size: 15px; }
.guide ol, .cur-picks, .cur-links { padding-left: 20px; display: grid; gap: 8px; margin: 12px 0 0; }
.task-guide .guide { font-size: 15px; }
.task-guide .guide-summary { font-size: 15px; }
.pager { display: grid; gap: 12px; margin: 40px 0 16px; }
@media (min-width: 640px) { .pager { grid-template-columns: 1fr 1fr; } .pager a[rel='next'] { text-align: right; } }
.pager a { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; font-weight: 500; color: var(--text); text-decoration: none; }
.pager a:hover { border-color: var(--primary); color: var(--link); }

/* ---- Week 0 ---- */
.setup { list-style: none; margin: 12px 0 24px; padding: 0; border: 1px solid var(--line); border-radius: 10px; counter-reset: setup; }
.setup-item + .setup-item { border-top: 1px solid var(--line); }
.setup-item summary { list-style: none; cursor: pointer; padding: 12px 16px; }
.setup-item summary::-webkit-details-marker { display: none; }
.setup-line { display: flex; align-items: center; gap: 12px; min-height: 28px; }
.setup-title { flex: 1; font-size: 15px; font-weight: 500; color: var(--text); }
.setup-item.is-done .setup-title { color: var(--text-dim); }
.setup-body { padding: 0 16px 16px 56px; font-size: 15px; }
.w0-section { margin-top: 16px; }
.quiz { padding-left: 20px; display: grid; gap: 20px; }
.quiz-q > .prose { color: var(--text); }
.quiz-opts { margin: 8px 0 0; padding-left: 24px; display: grid; gap: 4px; color: var(--text-body); }
.quiz-a { margin-top: 8px; }
.quiz-a summary { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--link); cursor: pointer; }
.quiz-a .prose { padding: 4px 0 0 14px; border-left: 2px solid var(--primary); }

/* ---- /app ---- */
.card { margin-top: 24px; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.card h2 { font-size: 18px; font-weight: 600; color: var(--text); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.this-week { border-color: var(--primary); }
.this-week h2 { margin-bottom: 4px; }
.this-week h2 a { color: inherit; text-decoration: none; }
.this-week h2 a:hover { color: var(--link); }
.this-week .eyebrow { color: var(--link); margin-bottom: 8px; }
.dash-tiles { margin-top: 8px; }
.tile .btn { justify-self: start; margin: 4px 0; }
.pace-tile.is-ok strong { color: var(--ok-fg); }
.pace-tile.is-warn strong { color: var(--warn-fg); }
.pace-tile.is-bad strong { color: var(--bad-fg); }
.phase-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.phase-bars a { font-size: 15px; font-weight: 500; color: var(--text); text-decoration: none; }
.phase-bars a:hover { color: var(--link); }
.leaders { list-style: none; margin: 16px 0 8px; padding: 0; counter-reset: lead; }
.leaders li { counter-increment: lead; border-top: 1px solid var(--line); }
.leaders a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 0; color: var(--text); text-decoration: none; font-size: 15px; }
.leaders a::before { content: counter(lead); width: 1.5rem; font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.leaders a:hover { color: var(--link); }
.leaders .avatar { width: 28px; height: 28px; }

/* ---- the schedule form ---- */
.sched-form { display: grid; gap: 20px; }
.sched-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.sched-form legend { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.sched-form input[type='date'] { width: auto; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); color: var(--text); font: inherit; }
.sched-form .btn-primary { justify-self: start; }
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; font-size: 15px; color: var(--text); }
.choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.choice input { margin-top: 4px; accent-color: var(--primary); }
.copy-field { display: flex; gap: 8px; margin: 12px 0; }
.copy-field input { flex: 1; min-width: 0; min-height: 36px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg-soft); color: var(--text-body); font: 13px var(--mono); }
.things-links { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; padding: 0; }