/* LessonBound, printed on SketchTome's Drafting paper: cool grey sheet with a faint grain, graphite ink,
   cobalt for the one thing to do next, Didot titles with Didot Italic subtitles, small monospaced capitals
   for labels (like the notes in a drawing's title block), hairline rules, covers with crop marks.
   Every colour lives in this block, mirroring SketchTome's AppPaper "Drafting". */
:root {
  --paper: #F2F3EF;  --edge: #E1E3DD;  --rule: #CBCEC6;  --sheet: #F8F9F6;
  --ink: #1F2429;    --mute: #5D636A;
  --cobalt: #3459D6; --on-cobalt: #FFFFFF; --cobalt-soft: #E4E9F8;
  --pine: #2D6A5A;   --pine-soft: #E2EEE9;
  --bad: #B4452F;    --bad-soft: #F6E4DF;
  --display: Didot, "Bodoni 72", "Bodoni MT", ui-serif, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, ui-sans-serif, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --r-card: 14px; --r-cover: 18px; --tap: 48px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #2A2E32; --edge: #1D2023; --rule: #4F555A; --sheet: #30343A;
    --ink: #EEF0F0;   --mute: #B7BDC2;
    --cobalt: #8FA8F2; --on-cobalt: #10183A; --cobalt-soft: #333B52;
    --pine: #8CC9B4;  --pine-soft: #2C3B37;
    --bad: #F0A08C;   --bad-soft: #4A3330;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); background: var(--paper) var(--grain); font: 17px/1.5 var(--sans);
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
button, input, textarea { font: inherit; color: inherit; }
a { color: var(--cobalt); }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- type ---------- */
.label { font: 500 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin: 0; }
.title { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1.05; letter-spacing: -.01em; margin: 6px 0 0; }
.subtitle { font-family: var(--display); font-style: italic; font-size: 22px; line-height: 1.3; color: var(--mute); margin: 4px 0 0; }
.muted { color: var(--mute); }

/* ---------- controls ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap);
  padding: 0 22px; border-radius: 999px; border: 1px solid var(--rule); background: var(--sheet);
  font-weight: 600; font-size: 16px; cursor: pointer; white-space: nowrap; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent;
}
.pill.cobalt { background: var(--cobalt); border-color: var(--cobalt); color: var(--on-cobalt); }
.pill.link { background: none; border-color: transparent; color: var(--cobalt); padding: 0 6px; min-height: 36px; }
.pill:disabled { opacity: .5; cursor: default; }
.round {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink);
  display: inline-grid; place-items: center; cursor: pointer; flex: none; -webkit-tap-highlight-color: transparent;
}
.round svg { width: 20px; height: 20px; }
.field { width: 100%; min-height: var(--tap); border-radius: 999px; border: 1px solid var(--rule); background: var(--sheet); padding: 0 18px; }
textarea.field { border-radius: var(--r-card); padding: 12px 16px; min-height: 88px; resize: vertical; }
.sheet { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-card); }

main { max-width: 1120px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 20px) 20px 56px; }
.toprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.head { margin: 8px 0 22px; }

/* ---------- home: continue card + covers ---------- */
.continue { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 14px; margin-bottom: 26px; }
.continue .thumb { width: 56px; height: 72px; border-radius: 10px; }
.continue h2 { font-size: 18px; font-weight: 600; margin: 0 0 4px; line-height: 1.3; }
.covers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
.cover-wrap { display: grid; gap: 10px; text-decoration: none; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; text-align: left; }
.cover {
  position: relative; aspect-ratio: 3 / 3.6; border-radius: var(--r-cover); overflow: hidden;
  border: 1px solid rgba(0,0,0,.08); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset;
  padding: 22% 9% 0 19%; color: #F2F3EF; container-type: inline-size;
}
.cover::before { content: ""; position: absolute; top: 0; bottom: 0; left: 11%; border-left: 1px solid currentColor; opacity: .35; }
.cover .crop { position: absolute; width: 14px; height: 14px; border: 1.5px solid currentColor; opacity: .55; }
.crop.tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; } .crop.tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.crop.bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; } .crop.br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.cover h3 { position: relative; font-family: var(--display); font-weight: 700; font-size: 11cqi; line-height: 1.12;
  text-transform: uppercase; letter-spacing: .03em; margin: 0; overflow-wrap: break-word; }
.cover h3::after { content: ""; display: block; width: 32px; height: 2px; background: currentColor; opacity: .7; margin-top: 12px; }
.pattern-blueprint { background-color: #2F4FC4;
  background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 22px 22px; }
.pattern-contour { background: #23272B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 360'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.28'%3E%3Cpath d='M190 175c24-6 40 12 32 32s-38 26-56 12-6-38 24-44z'/%3E%3Cpath d='M186 140c50-14 84 22 70 66s-70 60-108 36-30-86 38-102z'/%3E%3Cpath d='M180 104c74-22 124 30 104 98s-100 92-158 58-46-128 54-156z'/%3E%3Cpath d='M174 66c98-30 166 40 138 132s-134 124-210 80-60-170 72-212z'/%3E%3Cpath d='M166 26c124-38 210 50 176 166s-168 156-262 102-74-214 86-268z'/%3E%3C/g%3E%3C/svg%3E") center / cover; }
.pattern-kraft { background-color: #B9925F; color: #2B2118;
  background-image: radial-gradient(rgba(43,33,24,.45) 1.2px, transparent 1.4px); background-size: 18px 18px; }
.pattern-pine { background-color: #2D6A5A;
  background-image: linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px); background-size: 100% 20px; }
.cover-meta { padding-left: 4px; }

/* ---------- course: lecture list ---------- */
.lectures { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.lectures li + li { border-top: 1px solid var(--rule); }
.lectures button {
  width: 100%; display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: center;
  min-height: 62px; padding: 12px 16px; border: 0; background: none; text-align: left; cursor: pointer;
}
.lectures button:hover { background: var(--cobalt-soft); }
.lectures .n { font: 500 13px/1 var(--mono); color: var(--mute); letter-spacing: .06em; }
.lectures .n.done { color: var(--pine); }
.lectures .t { font-size: 17px; line-height: 1.35; }
.credit { margin-top: 26px; font: 500 11px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.credit a { color: inherit; }

/* ---------- lesson ---------- */
.study { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
.study > * { min-width: 0; }
.frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--rule); }
.frame iframe, #player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.parts { display: flex; gap: 8px; overflow-x: auto; padding: 16px 0 2px; scrollbar-width: none; }
.parts::-webkit-scrollbar { display: none; }
.part { flex: none; min-height: 44px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--rule); background: var(--sheet); cursor: pointer; text-align: left; }
.part b { display: block; font-size: 14px; }
.part span { font: 500 11px/1.4 var(--mono); letter-spacing: .06em; color: var(--mute); }
.part[aria-pressed="true"] { background: var(--cobalt); border-color: var(--cobalt); color: var(--on-cobalt); }
.part[aria-pressed="true"] span { color: inherit; opacity: .8; }
.part.playing b::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-left: 7px; vertical-align: 2px; }

.teacher { padding: 22px 20px; display: grid; gap: 24px; align-content: start; }
.teacher h2 { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.25; margin: 6px 0 0; }
.section { display: grid; gap: 12px; }
.ideas { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ideas li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.stamp { min-height: 30px; min-width: 58px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--rule);
  background: var(--paper); color: var(--cobalt); font: 500 12px/1 var(--mono); letter-spacing: .04em; cursor: pointer; }
.words { margin: 0; display: grid; gap: 12px; }
.words dt { font-weight: 600; }
.words dd { margin: 2px 0 0; color: var(--mute); }
.example { margin: 0; padding: 14px 16px; border-radius: var(--r-card); background: var(--pine-soft); border: 1px solid var(--rule);
  font-family: var(--display); font-style: italic; font-size: 19px; line-height: 1.45; }
.q { display: grid; gap: 8px; }
.q + .q { border-top: 1px solid var(--rule); padding-top: 18px; }
.q p { margin: 0; font-weight: 600; }
.choice { width: 100%; text-align: left; min-height: var(--tap); padding: 11px 16px; border-radius: var(--r-card);
  border: 1px solid var(--rule); background: var(--paper); cursor: pointer; line-height: 1.4; }
.choice:hover:not(:disabled) { border-color: var(--cobalt); }
.choice:disabled { cursor: default; }
.choice.right { background: var(--pine-soft); border-color: var(--pine); }
.choice.wrong { background: var(--bad-soft); border-color: var(--bad); }
.why { margin: 2px 0 0; color: var(--mute); font-size: 15px; }
.why b { color: var(--ink); }
.score { font-family: var(--display); font-style: italic; font-size: 21px; margin: 0; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ask { display: flex; gap: 8px; }
.ask .field { flex: 1; min-width: 0; }
.answer { white-space: pre-wrap; margin: 0; }
.next-part { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px;
  border-radius: var(--r-card); background: var(--cobalt-soft); border: 1px solid var(--rule); font-weight: 600; }

.skeleton { display: grid; gap: 10px; }
.skeleton i { display: block; height: 14px; border-radius: 7px; background: var(--rule); }
.skeleton i:nth-child(1) { width: 80%; height: 22px; } .skeleton i:nth-child(2) { width: 95%; }
.skeleton i:nth-child(3) { width: 70%; } .skeleton i:nth-child(4) { width: 88%; } .skeleton i:nth-child(5) { width: 55%; }
@media (prefers-reduced-motion: no-preference) {
  .skeleton i { animation: breathe 1.6s ease-in-out infinite; }
  @keyframes breathe { 50% { opacity: .45; } }
}
.error { border: 1px solid var(--bad); background: var(--bad-soft); border-radius: var(--r-card); padding: 14px 16px; display: grid; gap: 10px; }
details.wish summary { cursor: pointer; min-height: 32px; list-style: none; }
details.wish[open] { display: grid; gap: 10px; }

@media (min-width: 900px) {
  main { padding: calc(env(safe-area-inset-top) + 28px) 32px 64px; }
  .title { font-size: 56px; }
  .covers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cover h3 { font-size: 10cqi; }
  .study { grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr); align-items: start; }
  .teacher { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; }
}

/* ---------- supplying a lesson, your shelf, account ---------- */
.supply { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 18px; padding: 18px; margin-bottom: 18px; }
.supply > div { flex: 1 1 240px; }
.supply-text { margin: 4px 0 0; font-family: var(--display); font-style: italic; font-size: 20px; line-height: 1.35; }
.shelf-label { margin: 26px 0 12px; }
.add-form { padding: 18px; display: grid; gap: 10px; }
.add-form textarea.field { min-height: 220px; font-size: 15px; line-height: 1.5; }
.add-form .pill { margin-top: 6px; justify-self: start; }
.add-form .label .muted { letter-spacing: .04em; text-transform: none; }
.msg { color: var(--bad); font-size: 15px; margin: 0; }
.howto { margin-top: 16px; padding: 14px 18px; }
.howto summary { cursor: pointer; min-height: 28px; }
.howto ol { margin: 10px 0; padding-left: 20px; display: grid; gap: 6px; }
.account-box { padding: 18px; display: grid; gap: 12px; justify-items: start; margin-bottom: 16px; }
.account-box p { margin: 0; }
.account-box .field { max-width: 360px; }
.danger summary { cursor: pointer; color: var(--bad); }
.danger-btn { border-color: var(--bad); color: var(--bad); }
.frame.textonly { display: none; }

/* the Fast Track cover (SketchTome's ochre ink) and stage headings in a plan */
.pattern-ochre { background-color: #C08A1E; color: #2B2118;
  background-image: linear-gradient(90deg, rgba(43,33,24,.18) 1px, transparent 1px); background-size: 20px 100%; }
.lectures li.stage { padding: 18px 16px 8px; background: var(--paper); }
.lectures li.stage + li { border-top: 1px solid var(--rule); }

/* videos from other places */
.frame.local { background: var(--sheet); }
.frame video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.pick-file { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 20px; text-align: center; }
.pick-file p { margin: 0; }
.player-error { display: grid; place-items: center; color: #fff; padding: 20px; text-align: center; }
.file-row { margin: 2px 0 4px; }
.howto ul { margin: 8px 0; padding-left: 20px; display: grid; gap: 6px; }

/* privacy, terms and other reading pages */
.doc { max-width: 720px; }
.doc h2 { font-family: var(--display); font-size: 24px; margin: 28px 0 8px; }
.doc ul { padding-left: 20px; display: grid; gap: 8px; }
.doc p, .doc li { line-height: 1.6; }

/* the Computer Engineering cover: a circuit board with copper traces */
.pattern-pcb { background-color: #1F4A3B; color: #F2E3C6;
  background-image: linear-gradient(90deg, transparent 47%, rgba(226,178,104,.35) 47%, rgba(226,178,104,.35) 49%, transparent 49%),
    linear-gradient(transparent 64%, rgba(226,178,104,.35) 64%, rgba(226,178,104,.35) 66%, transparent 66%),
    radial-gradient(circle at 48% 65%, rgba(226,178,104,.6) 3px, transparent 4px);
  background-size: 64px 64px; }

/* feedback */
.choice-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); cursor: pointer; }
.choice-pill:has(input:checked) { border-color: var(--cobalt); background: var(--cobalt-soft); }
.choice-pill input { accent-color: var(--cobalt); }
.inbox { display: grid; gap: 12px; }
.inbox-item { padding: 16px; display: grid; gap: 8px; justify-items: start; }
.inbox-item.done { opacity: .55; }
.inbox-msg { margin: 0; white-space: pre-wrap; }
.inbox-ctx { letter-spacing: .06em; }

/* the Engineering Depth cover: slate drafting film with an isometric dot grid */
.pattern-slate { background-color: #3B4A5A; color: #EEF0F0;
  background-image: radial-gradient(rgba(238,240,240,.35) 1px, transparent 1.3px), radial-gradient(rgba(238,240,240,.35) 1px, transparent 1.3px);
  background-size: 22px 38px; background-position: 0 0, 11px 19px; }

/* Listen: the card read aloud */
.listen { margin-top: 12px; display: grid; gap: 6px; }
.listen .row { display: flex; gap: 8px; flex-wrap: wrap; }
.listen-note { margin: 0; font-size: .9rem; }
[data-say] { border-radius: 6px; transition: background-color .2s ease, box-shadow .2s ease; }
[data-say].speaking { background: var(--cobalt-soft); box-shadow: -6px 0 0 var(--cobalt-soft), 6px 0 0 var(--cobalt-soft); }
@media (prefers-reduced-motion: reduce) { [data-say] { transition: none; } }

/* "Use it like an app" card */
.install { padding: 18px 20px; display: grid; gap: 8px; margin-bottom: 16px; }
.install p { margin: 0; }
.install .steps { margin: 4px 0 6px; padding-left: 22px; display: grid; gap: 6px; }
.share-icon { display: inline-flex; vertical-align: -3px; width: 18px; height: 18px; color: var(--cobalt); }
.share-icon svg { width: 18px; height: 18px; }