/* Progress, resume, readiness check and save/load. Calm colours, big tap targets, one clear action per block. */
.resume-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px; margin-block: 0 16px; border: 2px solid var(--good); border-radius: 18px; background: var(--paper-raised); }
.resume-note p { margin: 0; flex: 1 1 220px; }
.continue-title { display: flex; flex-direction: column; gap: 4px; margin-block: 0 16px; overflow-wrap: anywhere; }
.continue-title strong { font-size: 1.25rem; }
.progress-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 16px; align-items: center; }
.stat-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin: 0; padding: 16px 8px; }
.stat strong { font-size: 2.2rem; line-height: 1; color: var(--good); }
.stat span { font-size: .95rem; }
.grade-progress { margin-block: 16px; }
.grade-progress > summary { min-height: 56px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.summary-title { font-size: 1.35rem; font-weight: 700; }
.chapter-progress { border-top: 1px solid var(--line); padding-block: 16px 4px; margin-top: 12px; }
.chapter-progress h2 { font-size: 1.3rem; margin-block: 4px 8px; }
.chapter-progress h3 { font-size: 1.1rem; margin-block: 20px 8px; }
.chapter-sentence { font-size: 1.1rem; }
.weak-ideas, .lesson-progress, .idea-results { list-style: none; padding: 0; margin: 0; }
.lesson-progress li { padding-block: 12px; border-bottom: 1px dashed var(--line); }
.lesson-progress p { margin: 4px 0 8px; }
.lesson-name { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 1.1rem; overflow-wrap: anywhere; }
.meter, .ready-progress { height: 12px; border-radius: 999px; background: var(--line); overflow: hidden; }
.meter .fill, .ready-progress .fill { display: block; height: 100%; border-radius: 999px; background: var(--good); }
.trends { display: grid; gap: 16px; }
.trend { min-width: 0; }
.trend-label { margin: 0 0 6px; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 56px; padding-bottom: 2px; border-bottom: 2px solid var(--line); overflow: hidden; }
.bar { flex: 0 0 14px; min-height: 3px; border-radius: 4px 4px 0 0; background: var(--good); }
.bar.mid { background: #2f8f9d; }
.bar.low { background: #c99a3c; }
.readiness { margin-bottom: 24px; }
.ready-progress { margin-bottom: 16px; }
.ready-percent { font-size: clamp(3rem, 12vw, 4.5rem); font-weight: 700; line-height: 1; margin: 8px 0; color: var(--good); }
.band-almost .ready-percent { color: #2f8f9d; }
.band-again .ready-percent { color: #b07d1a; }
.ready-result h2 { font-size: 1.6rem; margin-block: 4px 8px; }
.ready-links, .ready-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 12px; }
.idea-results li { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 8px 12px; padding-block: 10px; border-bottom: 1px dashed var(--line); }
.idea-results li > span:nth-child(2) { display: flex; flex-direction: column; overflow-wrap: anywhere; }
.idea-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-weight: 700; background: var(--line); }
.idea-ok .idea-mark { background: var(--good); color: var(--paper-raised); }
.backup-step { margin-block: 16px; }
.progress-code { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; word-break: break-all; }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-input:focus-visible + .file-label { outline: 3px solid var(--focus); outline-offset: 3px; }
.confirm-box { border: 2px solid var(--good); border-radius: 18px; padding: 16px; margin-block: 16px; }
.confirm-box h3 { margin-top: 0; }
@media (max-width: 760px) {
  .stat-row { gap: 8px; }
  .stat strong { font-size: 1.8rem; }
  .progress-actions .btn, .ready-actions .btn, .resume-note .btn { flex: 1 1 auto; }
  .idea-results li { grid-template-columns: 36px minmax(0,1fr); }
  .idea-results li > a { grid-column: 2; justify-self: start; }
}
.bar-0 { height: 0%; }
.bar-1 { height: 5%; }
.bar-2 { height: 10%; }
.bar-3 { height: 15%; }
.bar-4 { height: 20%; }
.bar-5 { height: 25%; }
.bar-6 { height: 30%; }
.bar-7 { height: 35%; }
.bar-8 { height: 40%; }
.bar-9 { height: 45%; }
.bar-10 { height: 50%; }
.bar-11 { height: 55%; }
.bar-12 { height: 60%; }
.bar-13 { height: 65%; }
.bar-14 { height: 70%; }
.bar-15 { height: 75%; }
.bar-16 { height: 80%; }
.bar-17 { height: 85%; }
.bar-18 { height: 90%; }
.bar-19 { height: 95%; }
.bar-20 { height: 100%; }
.bar-w-0 { width: 0%; }
.bar-w-1 { width: 5%; }
.bar-w-2 { width: 10%; }
.bar-w-3 { width: 15%; }
.bar-w-4 { width: 20%; }
.bar-w-5 { width: 25%; }
.bar-w-6 { width: 30%; }
.bar-w-7 { width: 35%; }
.bar-w-8 { width: 40%; }
.bar-w-9 { width: 45%; }
.bar-w-10 { width: 50%; }
.bar-w-11 { width: 55%; }
.bar-w-12 { width: 60%; }
.bar-w-13 { width: 65%; }
.bar-w-14 { width: 70%; }
.bar-w-15 { width: 75%; }
.bar-w-16 { width: 80%; }
.bar-w-17 { width: 85%; }
.bar-w-18 { width: 90%; }
.bar-w-19 { width: 95%; }
.bar-w-20 { width: 100%; }
.read-card { scroll-margin-top: 80px; }