/* Public lesson pages (/learn), interview practice and search.
   Plain reading layout: lists and hairline rules rather than cards. */

.learn-page { padding-top: 36px; padding-bottom: 72px; }
.learn-head { max-width: 760px; margin-bottom: 36px; }
.learn-head h1 { font-size: clamp(30px, 4vw, 44px); }
.learn-lead { margin-top: 12px; font-size: 17px; line-height: 1.7; color: var(--text-dim); }
.learn-meta { margin-top: 10px; font-size: 14px; color: var(--text-faint); }

.crumbs { font-size: 14px; color: var(--text-faint); margin-bottom: 18px; }
.crumbs a { color: var(--text-dim); }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumbs span { margin: 0 6px; }

/* ---------- /learn index ---------- */
.learn-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 48px; align-items: start; }
.learn-side { position: sticky; top: 96px; font-size: 14px; }
.learn-side-title { font-weight: 600; color: var(--text); margin: 0 0 8px; }
.learn-side-list { list-style: none; margin: 0 0 24px; padding: 0; }
.learn-side-list li { padding: 4px 0; line-height: 1.4; }
.learn-side-list a { color: var(--text-dim); }
.learn-side-list a:hover { color: var(--text); }
.learn-side-list .learn-unit-progress { display: block; font-size: 12px; }

.learn-unit { padding: 28px 0 30px; border-top: 1px solid var(--rule); scroll-margin-top: 90px; }
.learn-unit:first-child { border-top: 0; padding-top: 0; }
.learn-unit h2 { font-size: 23px; line-height: 1.3; }
.learn-unit h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.learn-unit-desc { margin-top: 6px; color: var(--text-dim); font-size: 15px; }
.learn-unit-progress { color: var(--accent); font-size: 13px; }
.learn-lesson-cols { columns: 2; column-gap: 40px; margin: 16px 0 0; padding-left: 30px; font-size: 15px; }
.learn-lesson-cols li { break-inside: avoid; padding: 3px 0; color: var(--text-faint); }
.learn-lesson-cols a { color: var(--text-dim); }
.learn-lesson-cols a:hover { color: var(--text); text-decoration: underline; }
.learn-note { margin-top: 24px; font-size: 13px; color: var(--text-faint); }

/* ---------- unit page ---------- */
.unit-lessons { list-style: none; margin: 0; padding: 0; max-width: 860px; border-top: 1px solid var(--rule); }
.unit-lessons li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.unit-lesson-num { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.unit-lesson-body a { font-weight: 600; color: var(--text); }
.unit-lesson-body a:hover { text-decoration: underline; text-underline-offset: 3px; }
.unit-lesson-body p { margin-top: 3px; font-size: 14px; color: var(--text-dim); }
.unit-lesson-min { font-size: 13px; color: var(--text-faint); white-space: nowrap; }

/* A finished lesson gets a small check before its title. */
.is-done > a::before, .unit-lessons li.is-done .unit-lesson-body a::before {
  content: "\2713"; color: var(--accent); margin-right: 7px; font-weight: 600;
}

/* ---------- lesson page ---------- */
.lesson-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; align-items: start; }
.lesson-side { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; font-size: 14px; }
.lesson-side-toggle summary { font-weight: 600; color: var(--text); cursor: pointer; margin-bottom: 8px; list-style: none; }
.lesson-side-toggle summary::-webkit-details-marker { display: none; }
.lesson-side-list { margin: 0; padding-left: 30px; }
.lesson-side-list li { padding: 4px 0; line-height: 1.4; color: var(--text-faint); }
.lesson-side-list a { color: var(--text-dim); }
.lesson-side-list a:hover { color: var(--text); }
.lesson-side-list li.is-current a { color: var(--text); font-weight: 600; }

.lesson-page-main { max-width: 760px; min-width: 0; }
.lesson-title { font-size: clamp(30px, 4vw, 42px); }
.lesson-page-content { padding: 0; margin-top: 28px; }
.lesson-page-quiz { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--rule); }
.lesson-page-quiz h2 { font-size: 22px; margin-bottom: 8px; }
.lesson-page-quiz .lesson-quiz { padding: 0; margin-bottom: 20px; }
.lesson-page-quiz a { text-decoration: underline; text-underline-offset: 3px; }

.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--rule); }
.pager a { display: block; max-width: 48%; font-weight: 600; color: var(--text); }
.pager a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pager small { display: block; font-weight: 400; font-size: 13px; color: var(--text-faint); }
.pager-next { text-align: right; margin-left: auto; }

/* ---------- search ---------- */
.search-page h1 { font-size: clamp(30px, 4vw, 42px); }
.search-form { display: flex; gap: 10px; max-width: 640px; margin: 18px 0 10px; }
.search-form input { flex: 1; min-width: 0; }
.search-direct { margin-top: 18px; }
.search-direct a, .search-list a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.search-group { margin-top: 32px; max-width: 820px; }
.search-group h2 { font-size: 20px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.search-list { list-style: none; margin: 0; padding: 0; }
.search-list li { padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.search-list .muted { font-size: 14px; margin-left: 6px; }

@media (max-width: 900px) {
  .learn-layout, .lesson-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .learn-side { position: static; display: none; }
  .lesson-side { position: static; max-height: none; order: 2; padding-top: 24px; border-top: 1px solid var(--rule); }
  .learn-lesson-cols { columns: 1; }
  .unit-lessons li { grid-template-columns: 28px minmax(0, 1fr); }
  .unit-lesson-min { grid-column: 2; }
}

/* ---------- signed-in progress ---------- */
.learn-progress { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin: -8px 0 36px; padding: 18px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.learn-progress h2 { font-size: 20px; }
.learn-progress p { margin-top: 2px; color: var(--text-dim); font-size: 15px; }
.learn-unit-status { display: flex; align-items: center; gap: 12px; margin-top: 10px; max-width: 420px; }
.learn-unit-status[hidden] { display: none; }
.learn-bar { flex: 1; height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.learn-bar span { display: block; height: 100%; width: 0; background: var(--accent); }
.learn-unit-status .learn-unit-progress { font-size: 13px; color: var(--text-dim); white-space: nowrap; }
.learn-unit-status.is-finished .learn-unit-progress { color: var(--accent); }
.learn-lesson-cols li.is-done > a { color: var(--text); }
.unit-lesson-done { display: none; margin-right: 10px; color: var(--accent); font-weight: 600; }
.unit-lessons li.is-done .unit-lesson-done { display: inline; }
.lesson-status { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--rule); color: var(--accent); font-weight: 600; }
.lesson-next { margin-top: 16px; font-size: 15px; }
.lesson-next a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.learn-progress[hidden], .lesson-status[hidden], .lesson-next[hidden] { display: none; }
.learn-progress strong { color: var(--text); }
.learn-bar-total { margin-top: 10px; max-width: 420px; }
.lesson-done-tag { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.learn-side-count { display: block; font-size: 12px; color: var(--text-faint); }
.learn-side-count.is-finished { color: var(--accent); }

/* Activities are read-only until the visitor signs in. */
.lesson-activity.is-locked button, .lesson-activity.is-locked input,
.lesson-activity.is-locked select, .lesson-activity.is-locked textarea { cursor: not-allowed; opacity: .55; }
.lesson-activity.is-locked button:hover { border-color: var(--border-2); background: var(--bg-2); }
.lesson-activity-locked { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 15px; color: var(--text-dim); }
.lesson-activity-locked a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }