/* Prafon.com: phone first, soft premium feel. Sizes from CLAUDE.md UI rules. */
:root {
  /* Brand (docs/brand): YouTube red #FF0000, white, black #0D0D0D. Dark and light both on-brand; Auto (follows the phone) is the default.
     Red is used sparingly, the YouTube way: logo, the red Λ, "Grow.", the current step, switches that are on.
     Everything else is black, greys and white; main buttons are white pills (black in light mode). */
  --bg: #0d0d0d;
  --card: #171717;
  --raised: #202020;
  --ink: #ffffff;
  --muted: #a3a3a3;
  --line: #2a2a2a;
  --brand: #ff0000;        /* YouTube red; on black 4.9:1 */
  --brand-fill: #ff0000;
  --on-brand: #ffffff;
  --primary: #f1f1f1;      /* main buttons: white pill, black text (like YouTube dark mode) */
  --on-primary: #0d0d0d;
  --link: #f1f1f1;
  --soft: #272727;         /* chips, avatars, past steps */
  --bar-bg: rgba(13, 13, 13, .92);
  --input-bg: #121212;
  --ok: #22c55e;          /* status: done */
  --wip: #f5b300;         /* status: in progress / loading */
  --bad: #ff4d4f;         /* status: failed / problem */
  --info: #4da3ff;        /* status: information */
  --warn: #f5b300;
  --warn-soft: rgba(255, 181, 71, .14);
  --toast: #ffffff;
  --toast-ink: #0d0d0d;
  --hero: #171717;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  --bar-h: 64px;
  /* The type scale (Idowu, 3 Nov): every text on every page uses one of these. The bug sweep fails on any other size
     (artwork on covers, initials in avatars and the lesson reading text, which people size themselves, are exempt). */
  --t-page: 26px;      /* page title */
  --t-lesson: 22px;    /* a lesson's own title */
  --t-section: 19px;   /* heading of a part without a box */
  --t-box: 16px;       /* title inside a box; prices that matter */
  --t-read: 15px;      /* lesson reading text */
  --t-input: 14px;     /* what people type (16px on iPhone: smaller makes Safari zoom in when you tap) */
  --t-card: 13px;      /* titles of cards and rows, normal text */
  --t-small: 12px;     /* buttons, chips, tiles */
  --t-meta: 11.5px;    /* second lines, notes */
  --t-tiny: 11px;      /* buttons inside small course tiles */
  --t-label: 10.5px;   /* labels in capitals */
  color-scheme: dark;
}
/* Light look: chosen in Settings > Display & accessibility > Appearance, or Auto on a phone set to light. */
:root[data-theme="light"] {
  --bg: #f6f6f6;
  --card: #ffffff;
  --raised: #ededed;
  --ink: #0d0d0d;
  --muted: #5c5c5c;
  --line: #e6e6e6;
  --brand: #ff0000;
  --brand-fill: #ff0000;
  --primary: #0d0d0d;
  --on-primary: #ffffff;
  --link: #0d0d0d;
  --soft: #ededed;
  --bar-bg: rgba(255, 255, 255, .94);
  --input-bg: #fafafa;
  --ok: #15803d;
  --wip: #b45309;
  --bad: #c2362f;
  --info: #1d6fd1;
  --warn: #a8660a;
  --warn-soft: #fff3df;
  --toast: #0d0d0d;
  --toast-ink: #ffffff;
  --hero: #ffffff;
  --shadow: 0 1px 2px rgba(13, 13, 13, .04), 0 6px 20px rgba(13, 13, 13, .06);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; } /* a page sliding sideways never shows a scrollbar */
.page { will-change: transform; touch-action: pan-y pinch-zoom; min-height: 70vh; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Poppins, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-card);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

#app { max-width: 560px; margin: 0 auto; min-height: 100vh; }
.page { padding: 8px 16px calc(var(--bar-h) + 28px + env(safe-area-inset-bottom)); outline: none; }
.loading { color: var(--muted); padding: 40px 0; text-align: center; }

/* Top switch: Learn · Teach · Partner · Admin */
/* Header on every page; it scrolls away with the page (not fixed). */
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 6px; }
.masthead .brand { margin: 0; }
.me { display: flex; border-radius: 50%; }
.me .avatar { width: 34px; height: 34px; font-size: 12px; }
.signin-pill { min-height: 34px; border-radius: 999px; }
/* Learn · Teach · Partner · Admin, under the header; scrolls with the page too. */
.top { padding: 4px 16px 4px; }
.switch { display: flex; gap: 4px; padding: 4px; background: var(--raised); border-radius: 14px; }
.switch-item { flex: 1; text-align: center; padding: 7px 4px; border-radius: 11px; font-size: var(--t-small); font-weight: 500;
  color: var(--muted); }
.switch-item.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); font-weight: 600; }

/* Bottom bar */
.bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; justify-content: space-around;
  max-width: 560px; margin: 0 auto; height: calc(var(--bar-h) + env(safe-area-inset-bottom));
  padding: 6px 4px env(safe-area-inset-bottom); background: var(--bar-bg);
  backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-top: 1px solid var(--line); }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: var(--t-label); color: var(--muted); min-width: 0; }
.tab span { white-space: nowrap; }
.tab .icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab.on { color: var(--ink); font-weight: 600; }
.tab.on .icon { stroke-width: 2.2; }
.icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Type */
.head { margin: 6px 0 14px; }
.page-title { font-size: var(--t-page); font-weight: 700; margin: 0; letter-spacing: -.3px; }
.section { margin-top: 22px; }
.section-title { font-size: var(--t-section); font-weight: 600; margin: 0 0 12px; letter-spacing: -.2px; }
.card-title { font-size: var(--t-card); font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.meta { font-size: var(--t-meta); color: var(--muted); margin: 2px 0 0; overflow-wrap: anywhere; }
.label { font-size: var(--t-label); color: var(--muted); font-weight: 500; text-transform: uppercase;
  letter-spacing: .5px; margin: 0 0 4px; display: block; }
.hint { font-size: var(--t-label); color: var(--muted); margin: 4px 0 0; }
.center { text-align: center; }
.empty { color: var(--muted); font-size: var(--t-meta); margin: 0; }
.error { color: var(--bad); font-size: var(--t-meta); margin: 8px 0 0; }
.ok-line { color: var(--ok); }
.soon { color: var(--ink); margin-top: 10px; }

/* Cards */
.card { background: var(--card); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow);
  margin-bottom: 12px; }
.card.notice { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card.notice p { margin: 0; font-size: var(--t-meta); }
.hero { padding: 18px; background: var(--hero); }
.hero-title { font-size: var(--t-box); font-weight: 600; margin: 0 0 4px; line-height: 1.3; }
.row { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.row.wrap { flex-wrap: wrap; margin-top: 8px; }
.grow { flex: 1; min-width: 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px;
  padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--card);
  font-size: var(--t-card); font-weight: 600; cursor: pointer; transition: transform .08s ease; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .6; cursor: default; }
.btn.primary { background: #e00000; border-color: #e00000; color: #fff; } /* D (Idowu, 1 Nov): the one main action per screen is red */
.btn.small { min-height: 32px; padding: 0 12px; font-size: var(--t-small); border-radius: 10px; }
.btn.quiet { color: var(--muted); }
.btn.wide { width: 100%; margin-top: 4px; }
.btn.google { margin-bottom: 4px; }
.link-btn { background: none; border: 0; color: var(--link); font-weight: 600; font-size: var(--t-meta); padding: 10px 0 0;
  cursor: pointer; }
.see-all { display: block; width: 100%; background: none; border: 0; color: var(--link); font-size: var(--t-meta);
  font-weight: 600; text-align: right; padding: 10px 0 0; cursor: pointer; }
.back { display: inline-flex; align-items: center; gap: 2px; color: var(--link); font-size: var(--t-meta);
  font-weight: 500; margin: 0 0 4px -4px; padding: 4px 0; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips.small { gap: 6px; margin-top: 6px; }
.chip { padding: 7px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line);
  font-size: var(--t-small); font-weight: 500; }
.chip.static { padding: 3px 9px; background: var(--soft); color: var(--ink); box-shadow: none;
  font-size: var(--t-label); font-weight: 600; }
.chip.warn { padding: 3px 9px; background: var(--warn-soft); color: var(--warn); box-shadow: none; font-size: var(--t-label); }

/* Forms */
.form { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; }
.input { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--input-bg); font-size: var(--t-input); outline: none; }
textarea.input { resize: vertical; min-height: 90px; }
.input:focus { border-color: var(--muted); background: var(--card); box-shadow: none; }
.check-row { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-meta); }
.check { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); flex: none; }
.search-box { position: relative; margin-bottom: 12px; }
.search-box .icon { position: absolute; left: 12px; top: 12px; color: var(--muted); }
.search-input { padding-left: 38px; background: var(--card); box-shadow: var(--shadow); border-color: transparent; }
.segmented { display: flex; gap: 4px; padding: 4px; background: var(--raised); border-radius: 14px; margin-bottom: 12px; }
.segmented button { flex: 1; border: 0; background: none; padding: 8px; border-radius: 11px; font-size: var(--t-small);
  font-weight: 500; color: var(--muted); cursor: pointer; }
.segmented button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); font-weight: 600; }
.or { text-align: center; color: var(--muted); font-size: var(--t-label); margin: 6px 0; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.switch-input { appearance: none; -webkit-appearance: none; width: 46px; height: 28px; border-radius: 999px;
  background: var(--raised); position: relative; flex: none; cursor: pointer; transition: background .15s; margin: 0; }
.switch-input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .15s; }
.switch-input:checked { background: var(--brand-fill); }
.switch-input:checked::after { transform: translateX(18px); }

/* People */
.avatar { border-radius: 50%; background: var(--soft); color: var(--ink); display: flex; align-items: center;
  justify-content: center; font-weight: 600; flex: none; object-fit: cover; }
.avatar.sm { width: 36px; height: 36px; font-size: 12px; }
.avatar.md { width: 44px; height: 44px; font-size: 14px; }
.avatar.lg { width: 56px; height: 56px; font-size: 18px; }
.person { display: flex; align-items: center; gap: 12px; }
.person-row { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.person-row:last-of-type { border-bottom: 0; }
.list > .person-row:first-child, .list > .history-row:first-child { padding-top: 0; }
.history-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.history-row:last-of-type { border-bottom: 0; }

/* Settings menu */
.menu { padding: 4px 14px; }
.menu-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.menu-row:last-child { border-bottom: 0; }
.menu-row span { flex: 1; display: flex; flex-direction: column; }
.menu-row b { font-size: var(--t-card); font-weight: 600; }
.menu-row small { font-size: var(--t-meta); color: var(--muted); }
.menu-row .icon:last-child { color: var(--muted); }

/* Journey */
.stages { list-style: none; display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 2px; margin: 0;
  scrollbar-width: none; }
.stages::-webkit-scrollbar { display: none; }
.stage { flex: none; padding: 5px 10px; border-radius: 999px; background: var(--raised); color: var(--muted);
  font-size: var(--t-label); font-weight: 500; white-space: nowrap; }
.stage.done { background: rgba(34, 197, 94, .16); color: var(--ok); }
.stage.now { background: var(--wip); color: #0d0d0d; font-weight: 600; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: calc(var(--bar-h) + 16px + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 10; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 12px;
  background: var(--toast); color: var(--toast-ink); font-size: var(--t-small); font-weight: 500; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.toast.bad { background: var(--bad); color: #fff; }

/* Brand header: logo + "Pra" (medium) "fon" (bold, red). No tagline. */
.brand { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; }
.brand img { width: 32px; height: 32px; border-radius: 9px; }
.wordmark { font-size: 21px; font-weight: 500; letter-spacing: -.2px; line-height: 1; white-space: nowrap; }
.wordmark b { font-weight: 700; color: var(--brand); }
.hero-title .grow { color: var(--brand); }
.gap { height: 10px; }
.card .segmented { margin-bottom: 0; }

/* ---------- Stage 2: courses ---------- */
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.block { display: block; }
.lead { font-size: var(--t-card); color: var(--ink); opacity: .85; margin: 6px 0 2px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.section-head .section-title { margin-bottom: 10px; }
.see-all.inline { width: auto; padding: 0; }
.chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chips.scroll { flex-wrap: wrap; margin: 0 0 12px; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chips.scroll .chip { flex: none; }

/* Generated course covers: one calm colour per subject, the title in white (no picture needed). */
.cover { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; aspect-ratio: 16 / 9;
  border-radius: 12px; padding: 10px; color: #fff; overflow: hidden; background: linear-gradient(150deg, var(--c1), var(--c2)); }
.cover::after { content: ''; position: absolute; right: -18%; top: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: rgba(255, 255, 255, .06); }
.cover-subject { font-size: 9px; letter-spacing: .6px; text-transform: uppercase; opacity: .75; position: relative; }
.cover-title { font-size: 12px; font-weight: 600; line-height: 1.25; position: relative; display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cover.big { border-radius: var(--radius); padding: 16px; margin-bottom: 4px; }
.cover.big .cover-title { font-size: 19px; }
.cover.big .cover-subject { font-size: 10.5px; }
.cover.small { width: 104px; flex: none; padding: 7px; border-radius: 10px; }
.cover.small .cover-title { font-size: 9.5px; -webkit-line-clamp: 2; }
.cover.small .cover-subject { display: none; }
.cover.tiny { width: 56px; flex: none; padding: 4px; border-radius: 8px; }
.cover.tiny .cover-title, .cover.tiny .cover-subject { display: none; }
.s-business { --c1: #1f2a44; --c2: #38507a; } .s-tech { --c1: #133a37; --c2: #20605a; }
.s-farming { --c1: #26361a; --c2: #4b6a2e; } .s-cooking { --c1: #3d2716; --c2: #7a4c2a; }
.s-languages { --c1: #2a2146; --c2: #4f3f86; } .s-health { --c1: #163a2c; --c2: #2c6f55; }
.s-creative { --c1: #3a1c33; --c2: #6e3561; } .s-trades { --c1: #33302a; --c2: #625b4c; }
.s-finance { --c1: #18303f; --c2: #2d5a75; } .s-teaching { --c1: #262c3d; --c2: #48537a; }
.s-marketing { --c1: #3a2323; --c2: #6b4141; } .s-personal { --c1: #233a3a; --c2: #3f6b6b; }
.s-other { --c1: #262626; --c2: #4a4a4a; }

/* Rows: 3 cards across on a phone, swipe sideways for more; See all = a grid in place. */
.row-cards { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 20px) / 3); gap: 10px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px;
  scroll-padding: 0 16px; }
.row-cards::-webkit-scrollbar { display: none; }
.row-cards.grid { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; overflow: visible; }
.ccard { display: flex; flex-direction: column; gap: 3px; scroll-snap-align: start; min-width: 0; }
.ccard .card-title { margin-top: 4px; font-size: var(--t-small); }
.ccard .meta, .ccard .label { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Progress: the one place red marks progress, like YouTube's red bar. */
.progress { height: 4px; border-radius: 4px; background: var(--raised); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--wip); border-radius: 4px; }
.progress.full span { background: var(--ok); }
.progress-line { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }

/* Search results and lesson rows */
.label.count { margin: 2px 0 8px; }
.result { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.result:last-child { border-bottom: 0; }
.list > .result:first-child { padding-top: 0; }
.lesson-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.list > .lesson-row:last-of-type, .editor-row:last-child .lesson-row { border-bottom: 0; }
.lesson-row.locked { opacity: .55; }
.lesson-row .icon { color: var(--muted); }
.num { width: 26px; height: 26px; border-radius: 50%; background: var(--raised); display: grid; place-items: center;
  font-size: var(--t-tiny); font-weight: 600; flex: none; }
.num.done { background: var(--ok); color: #0d0d0d; }
.price { font-size: var(--t-section); font-weight: 700; margin: 0 0 10px; }
.card .btn.wide + .btn.wide { margin-top: 8px; }
ul.ticks, ul.dots { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
ul.ticks li, ul.dots li { position: relative; padding-left: 22px; font-size: var(--t-card); }
ul.ticks li::before { content: '✓'; position: absolute; left: 0; font-weight: 700; }
ul.dots li::before { content: '•'; position: absolute; left: 6px; color: var(--muted); }

/* Reading: comfortable size and line length (like Kindle / Medium). */
.prose { font-size: var(--t-read); line-height: 1.7; }
.prose p { margin: 0 0 14px; }
.prose h3 { font-size: var(--t-box); font-weight: 600; margin: 22px 0 8px; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.card.prose { font-size: var(--t-card); }
.reader { padding: 2px 2px 8px; }
.lesson-title { font-size: var(--t-lesson); line-height: 1.25; }
.lesson-end { height: 1px; }
.lesson-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 8px 0 16px; }
.btn.on { background: var(--raised); }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0;
  border-top: 1px solid var(--line); }
.pager-btn { font-size: var(--t-meta); font-weight: 600; padding: 8px 4px; }
.pager-btn.on { color: var(--muted); font-weight: 500; margin: 0 auto; }

/* Course editor */
.editor-row { border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 4px; }
.editor-row .lesson-row { border-bottom: 0; }
.editor-row .field { margin-top: 8px; }
.two { display: grid; grid-template-columns: 1fr 96px; gap: 10px; }
.mono { font-size: var(--t-input); line-height: 1.5; }
.file-btn { margin-top: 10px; position: relative; overflow: hidden; }
.file-hidden { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.check-row.found { padding: 10px 0; border-bottom: 1px solid var(--line); }

/* ---------- Company foundation ---------- */
.dept-switch { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
/* Parts are one straight line (Idowu, 2 Nov): longer than the screen, they scroll and the last chip is cut at the edge. */
.dept-switch::-webkit-scrollbar { display: none; }
.dept-chip { flex: none; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: var(--t-small); font-weight: 500; color: var(--muted); }
.dept-chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 600; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile { background: var(--card); border-radius: 14px; padding: 10px; box-shadow: var(--shadow); min-width: 0; }
.tile .label { margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-num { font-size: var(--t-section); font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.notice-health { border-left: 3px solid var(--warn); }
.academy-link { display: inline-block; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Status colours (universal rule, Idowu 1 Nov): green done, yellow in progress, red failed, blue info.
   Always with a word or icon too, so colour is never the only sign. ---------- */
.status { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-label); font-weight: 600; padding: 3px 9px;
  border-radius: 999px; }
.status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.ok { color: var(--ok); background: rgba(34, 197, 94, .14); }
.status.wip { color: var(--wip); background: rgba(245, 179, 0, .14); }
.status.bad { color: var(--bad); background: rgba(255, 77, 79, .14); }
.status.info { color: var(--info); background: rgba(77, 163, 255, .14); }
.status.off { color: var(--muted); background: var(--raised); }
.empty.loading-line::before, .loading::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--wip); margin-right: 8px; animation: pulse 1s ease-in-out infinite; vertical-align: middle; }
@keyframes pulse { 50% { opacity: .3; } }
.error { color: var(--bad); }
.ok-line { color: var(--ok); }
.toast.ok::before { content: '✓  '; color: var(--ok); font-weight: 700; }
.toast.bad::before { content: '!  '; font-weight: 700; }
.btn.on { background: rgba(34, 197, 94, .14); color: var(--ok); border-color: transparent; }

/* Person icon when there is no photo (like Gmail/YouTube) */
.me .avatar .icon { width: 20px; height: 20px; }
.photo-row { display: flex; align-items: center; gap: 14px; }

/* Original book view */
.view-switch { display: inline-flex; gap: 4px; padding: 3px; background: var(--raised); border-radius: 12px; margin: 0 0 12px; }
.view-switch button { border: 0; background: none; padding: 6px 14px; border-radius: 9px; font-size: var(--t-small); font-weight: 500; color: var(--muted); cursor: pointer; }
.view-switch button.on { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
.book { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.book-page { background: #fff; border-radius: 6px; box-shadow: 0 2px 12px rgba(0, 0, 0, .35); max-width: 100%; }
.cover.has-img { padding: 0; background: #111; }
.cover.has-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.qr { width: 180px; height: 180px; background: #fff; border-radius: 12px; padding: 8px; align-self: flex-start; }
.mono-key { font-family: ui-monospace, monospace; letter-spacing: 1px; overflow-wrap: anywhere; }
.hint.cheer { color: var(--ok); margin-top: 8px; }

/* Ways to read (question 37): Whole book with contents; pages drawn as they come near */
.book.whole { gap: 12px; }
.book-contents { width: 100%; margin: 0; }
.book-contents summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.book-contents summary::after { content: '▾'; color: var(--muted); }
.book-contents[open] summary::after { content: '▴'; }
.book-contents .list { margin-top: 6px; max-height: 50vh; overflow-y: auto; }
button.lesson-row { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.lesson-row.here .card-title { font-weight: 600; }
.lesson-row.here .meta { color: var(--info); }
.book-slot { display: flex; align-items: center; justify-content: center; max-width: 100%; background: var(--raised); border-radius: 6px; scroll-margin-top: 70px; }
.book-slot:has(canvas) { background: none; }
.read-row { padding: 8px 0; border-bottom: 1px solid var(--line); }
.read-row input:disabled + .grow { opacity: .6; }

/* Book shape (question 39): course books are tall like a real book (Kindle, Apple Books); video courses stay 16:9. */
.cover.book { aspect-ratio: 2 / 3; }
.cover.has-img.book { box-shadow: 0 2px 10px rgba(0, 0, 0, .28); }
.cover.big.book { width: 172px; margin: 4px auto 10px; border-radius: 8px; }
.cover.small.book { width: 70px; border-radius: 6px; }
.cover.tiny.book { width: 38px; border-radius: 5px; }
.ccard .cover.book { border-radius: 8px; }
.cover-edit { display: flex; gap: 14px; align-items: center; }
.page-num { width: 90px; flex: none; }

/* This course includes, Your instructor, Reviews (questions 41-42) */
.includes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: var(--t-meta); }
.includes li { position: relative; padding-left: 22px; }
.includes li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--info); }
.teacher { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.teacher-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.teacher-photo.initial { display: grid; place-items: center; background: var(--raised); color: var(--ink); font-weight: 600; font-size: 20px; }
.teacher-bio { white-space: pre-line; margin: 0; }
.clamp4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.stars { color: var(--muted); letter-spacing: 1px; font-size: var(--t-small); }
.stars .on { color: #f5b301; }
.stars-line { margin: 2px 0; font-size: var(--t-meta); display: flex; align-items: center; gap: 4px; }
.stars-line b { color: var(--ink); }
.rating-sum { display: flex; gap: 16px; align-items: center; margin-bottom: 8px; }
.rating-big { text-align: center; flex: none; }
.rating-num { font-size: 30px; font-weight: 600; margin: 0; line-height: 1.1; }
.rating-bar { display: grid; grid-template-columns: 26px 1fr 22px; gap: 8px; align-items: center; margin: 2px 0; }
.rating-bar .progress span { background: #f5b301; }
.review-form { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); margin-top: 8px; }
.star-pick { display: flex; gap: 6px; }
.star-pick button { border: 0; background: none; font-size: 28px; line-height: 1; color: var(--muted); cursor: pointer; padding: 2px; }
.star-pick button.on { color: #f5b301; }
.reviews { border-top: 1px solid var(--line); margin-top: 8px; }
.review { padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.review:last-child { border-bottom: 0; }
.review-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.review-body { margin: 0; white-space: pre-line; }
.review-reply { background: var(--raised); border-radius: 10px; padding: 8px 10px; }
.review-reply p { margin: 0; }
.review-actions { display: flex; gap: 14px; }

/* Fill with Prafon AI (question 38): drafted boxes are marked until saved, so the instructor checks them. */
.ai-fill { margin-bottom: 10px; }
.ai-fill .row { flex-wrap: wrap; }
.input.drafted { border-color: var(--info); box-shadow: 0 0 0 1px var(--info) inset; }
.ai-bio { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }

/* One page to make a course (question 44): numbered parts, each with its state and its own Save. */
.row.between { justify-content: space-between; flex-wrap: wrap; }
.course-top .progress { margin-top: 10px; }
.course-top .row.between:first-child { margin-top: 0; }
.part-chips { margin-top: 12px; }
.part-chips .chip { font-size: var(--t-meta); padding: 5px 10px; display: inline-flex; gap: 5px; align-items: center; }
.part-head { align-items: flex-start; }
.part-head .status { flex: none; margin-top: 2px; }
.part-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--soft);
  font-size: var(--t-tiny); font-weight: 600; margin-right: 8px; vertical-align: 3px; }
.part-hint { margin: 8px 2px 0; }
.part-save { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-top: 10px; }
.part-save .error { align-self: stretch; margin: 0; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.ok-text { color: var(--ok); }
.wip-text { color: var(--wip); }
.muted { color: var(--muted); }
.ready-row { font-size: var(--t-card); margin: 0 0 8px; display: flex; gap: 6px; align-items: baseline; }
.ready-live { margin-top: 10px; }
/* Shows only while something is not saved; it rides above the bottom bar as you scroll (Shopify's unsaved-changes bar). */
.save-bar { position: sticky; bottom: calc(var(--bar-h) + 10px + env(safe-area-inset-bottom)); z-index: 5; margin-top: 16px;
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--raised);
  border: 1px solid var(--line); box-shadow: var(--shadow); }
.save-bar[hidden] { display: none; }
.save-bar-text { font-size: var(--t-meta); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }

/* Listen (question 46): the player rides above the bottom bar while listening; the part being read is marked. */
.listen-btn { margin-top: 10px; }
.listen-bar { position: sticky; bottom: calc(var(--bar-h) + 10px + env(safe-area-inset-bottom)); z-index: 5; margin-top: 16px;
  padding: 10px 12px; border-radius: 16px; background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow); }
.listen-bar[hidden] { display: none; }
.listen-row { margin-top: 0; flex-wrap: wrap; }
.listen-row + .listen-row { margin-top: 8px; }
.listen-play { min-width: 72px; }
.listen-close { margin-left: auto; }
.listen-voice { min-height: 36px; padding: 6px 10px; font-size: var(--t-meta); }
.listen-auto { margin-top: 8px; align-items: center; }
.listen-where { display: block; margin-top: 4px; }
.reader .speaking { background: var(--warn-soft); border-radius: 6px; box-shadow: 0 0 0 4px var(--warn-soft); }

/* Easy reading: the learner's text size (A− / A+), and big pages in full screen (Idowu, 1 Nov). */
.prose.reader { font-size: calc(15px * var(--read-scale, 1)); }
.prose.reader h3 { font-size: calc(16px * var(--read-scale, 1)); }
.reader-tools { margin-top: 10px; gap: 8px; align-items: center; }
.reader-tools .listen-btn { margin-top: 0; }
.text-size { display: inline-flex; align-items: center; gap: 2px; }
.text-size-label { min-width: 40px; text-align: center; }
.full-btn { margin: 0 0 10px; }
.read-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.read-bar .view-switch { margin: 0; flex: 0 1 auto; min-width: 0; }
.read-bar .view-switch button { padding: 6px 11px; white-space: nowrap; }
.read-bar .full-btn { margin: 0 0 0 auto; flex: none; white-space: nowrap; }
canvas.book-page[data-page] { cursor: zoom-in; }
body.viewer-open { overflow: hidden; }
.viewer { position: fixed; inset: 0; z-index: 50; background: #0d0d0d; color: #fff; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.viewer-top, .viewer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; flex: none; }
.viewer-where { font-size: var(--t-meta); color: #d4d4d4; }
.viewer-scroll { flex: 1; overflow: auto; touch-action: pan-x pan-y; display: flex; -webkit-overflow-scrolling: touch; }
.viewer-page { margin: auto; padding: 4px; }
.viewer-page canvas, .viewer-page img { display: block; background: #fff; border-radius: 4px; max-width: none; }
.viewer-btn { min-width: 48px; min-height: 48px; border-radius: 999px; border: 1px solid #333; background: #1c1c1c; color: #fff;
  font: 600 20px/1 Poppins, system-ui, sans-serif; display: inline-grid; place-items: center; padding: 0 12px; }
.viewer-btn:disabled { opacity: .35; }
.viewer-arrow { font-size: 30px; }
.viewer-fit { font-size: var(--t-card); }
.viewer-close { min-width: 44px; min-height: 44px; font-size: 18px; }
.viewer-zoom { display: flex; align-items: center; gap: 6px; }
.viewer-zoom-label { font-size: var(--t-small); min-width: 42px; text-align: center; color: #d4d4d4; }
.viewer-error { margin: auto; color: #ffb4b4; }
/* The book cover on the course page: as big as Apple Books and Kindle show it (about 60% of a phone's width). */
.cover.big.book { width: min(62vw, 260px); margin: 6px auto 14px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }

/* Profile pages (academies and instructors): a shop window like a YouTube channel or a Gumroad page. */
.profile-head { display: flex; gap: 14px; align-items: center; margin-top: 6px; }
.profile-photo { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; background: var(--soft); }
.profile-photo.initial { display: grid; place-items: center; font-size: 16px; font-weight: 700; color: var(--ink); }
.profile-name { font-size: var(--t-lesson); line-height: 1.2; overflow-wrap: anywhere; }
.profile-facts { margin-top: 4px; }
.profile-rating { font-size: var(--t-meta); color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.profile-actions { margin-top: 12px; }
.shop-tools { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 12px; }
.shop .list { gap: 12px; }
.shop-card { display: flex; gap: 12px; padding: 12px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.shop-cover { flex: none; }
.shop-cover .cover.small { width: 96px; }
.shop-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.shop-title { display: block; color: var(--ink); text-decoration: none; }
.shop-stars { display: flex; align-items: center; gap: 4px; }
.shop-buy { margin-top: 6px; justify-content: space-between; flex-wrap: wrap; }
.shop-buy .price { font-weight: 700; font-size: var(--t-box); margin: 0; }
.teacher-name { display: block; color: var(--ink); text-decoration: none; }
.about-text { white-space: pre-line; }
.profile-actions .listen-btn { margin-top: 0; }

/* Important buttons sit on the right (Idowu, 1 Nov, a universal rule): a single button goes to the right of its box;
   two or three share one line on the right, the main one furthest right (the Apple and Google dialog order).
   Tool rows (lesson tools, Listen and text size, Follow and Share, the reader switch) stay as they are. */
.card .row:not(.between):not(.wrap):not(.listen-row):not(.reader-tools):not(.shop-buy):not(:has(.input)) { flex-direction: row-reverse; justify-content: flex-start; flex-wrap: wrap; }
.card > .btn:not(.wide), .card > a.btn:not(.wide), .card > .file-btn, .card.form > .btn:not(.wide) { display: flex; width: max-content; margin-left: auto; }
.part-card > .card { background: none; box-shadow: none; padding: 0; margin: 0; border: 0; }
.part-card > .part-save { margin-top: 14px; }

/* Course pictures (Idowu, 1 Nov): swipe through the cover, more pictures, book pages and testimonials. */
.gallery-wrap { margin: 6px 0 12px; }
.gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; scrollbar-width: none; border-radius: 12px; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide { flex: 0 0 100%; scroll-snap-align: center; border: 0; padding: 0; background: none; position: relative; display: grid; place-items: center; cursor: zoom-in; }
.gallery-slide img { width: min(62vw, 260px); aspect-ratio: 2 / 3; object-fit: contain; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); background: var(--soft); }
.gallery-track:not(.tall) .gallery-slide img { width: 100%; aspect-ratio: 16 / 9; }
.gallery-slide .cover.big { margin: 0 auto; }
.slide-tag { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(13, 13, 13, .78); color: #fff;
  font-size: var(--t-label); padding: 4px 10px; border-radius: 999px; }
.gallery-count { text-align: center; font-size: var(--t-label); color: var(--muted); margin: 6px 0 0; }
.part-card .cover-part > .card { background: none; box-shadow: none; padding: 0; margin: 0; }
.gallery-edit { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.gallery-thumbs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.gallery-thumb { flex: none; width: 92px; position: relative; display: flex; flex-direction: column; gap: 4px; }
.gallery-thumb img { width: 92px; height: 120px; object-fit: cover; border-radius: 8px; background: var(--soft); }
.thumb-tag { position: absolute; top: 4px; left: 4px; background: rgba(13, 13, 13, .78); color: #fff; font-size: 9.5px; padding: 2px 6px; border-radius: 999px; }
.thumb-tools { display: flex; justify-content: space-between; }
.thumb-btn { min-width: 28px; min-height: 28px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.thumb-btn:disabled { opacity: .35; }
.gallery-add { justify-content: flex-end; }
.academy-logo-edit .profile-photo { width: 64px; height: 64px; }
/* A typing box with its button (e.g. a page number and "Use this page") reads left to right and ends on the right. */
.card .row:has(.input) { justify-content: flex-end; }

/* The bell (question 49) and its page. */
.mast-right { display: flex; align-items: center; gap: 8px; }
.bell { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink); }
.bell.on { background: var(--soft); }
.bell-badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand);
  color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; box-sizing: border-box; }
.bell-badge[hidden] { display: none; }
.head-row { align-items: center; }
.note-row { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; background: none; border: 0; padding: 12px 4px;
  border-bottom: 1px solid var(--line); color: var(--ink); font: inherit; }
.note-row.unread { background: var(--soft); border-radius: 12px; }
.note-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--raised); display: grid; place-items: center; flex: none; }
.note-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--info); flex: none; margin-top: 6px; }
/* Full screen fits every phone: the visible screen height, and room for the phone's bottom bar. */
.viewer { height: 100vh; height: 100dvh; bottom: auto; padding-bottom: max(env(safe-area-inset-bottom), 12px); }
.viewer-btn { min-width: 44px; min-height: 44px; font-size: 18px; }
.viewer-arrow { font-size: 26px; }
.viewer-bottom { padding: 6px 10px; }
.viewer-zoom { gap: 4px; }

/* Profile pages v2 (Idowu, 1 Nov): an Instagram-style top, a badge for the kind of profile, linked profiles. */
.profile-top { display: flex; align-items: center; gap: 18px; margin-top: 8px; }
.profile-top .profile-photo { width: 43px; height: 43px; } /* Idowu, 2 Nov: half the old size */
.profile-stats { flex: 1; display: flex; justify-content: space-around; text-align: center; }
.stat { display: flex; flex-direction: column; align-items: center; background: none; border: 0; color: var(--ink); font: inherit; padding: 4px; }
.stat b { font-size: var(--t-section); font-weight: 700; line-height: 1.1; }
.stat span { font-size: var(--t-meta); color: var(--muted); }
.profile-id { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.profile-name { font-size: var(--t-section); font-weight: 700; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; line-height: 1.25; }
.profile-badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-label); font-weight: 600; padding: 3px 10px;
  border-radius: 999px; background: rgba(77, 163, 255, .14); color: var(--info); }
.about-text { font-size: var(--t-card); line-height: 1.55; margin: 2px 0 0; white-space: pre-line; color: var(--ink); }
.clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.more-text .link-btn { padding: 0; }
.profile-rating { font-size: var(--t-meta); color: var(--muted); display: flex; align-items: center; gap: 4px; margin: 2px 0 0; }
.profile-links { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.link-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.link-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: var(--t-card); font-weight: 500; }
.link-chip img, .link-initial { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--soft); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.link-kind { font-size: var(--t-small); }
.profile-actions { display: flex; gap: 8px; margin-top: 14px; }
.profile-actions > .btn:first-child { flex: 1; }
.profile-actions .listen-btn { margin-top: 0; }
.shop-section { margin-top: 26px; }
.shop-toolbar { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 12px; gap: 8px; }
.shop-section > .input { margin-top: 4px; }
.view-switch-icons { display: flex; gap: 4px; background: var(--soft); border-radius: 12px; padding: 3px; }
.view-btn { width: 38px; height: 34px; border-radius: 9px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; }
.view-btn.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.shop-grid { display: grid; gap: 14px 10px; }
.shop-grid.grid3 { grid-template-columns: repeat(3, 1fr); }
.shop-grid.grid2 { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
.shop-tile { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tile-cover .cover { width: 100%; border-radius: 8px; }
.tile-cover .cover.book { aspect-ratio: 2 / 3; }
.tile-title { color: var(--ink); text-decoration: none; font-size: var(--t-small); font-weight: 600; line-height: 1.3; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.grid2 .tile-title { font-size: var(--t-card); }
.tile-meta { margin: 0; font-size: var(--t-label); color: var(--muted); }
.tile-meta .status { padding: 1px 7px; }
.mini-stars { display: inline-flex; align-items: center; gap: 3px; }
.mini-stars .stars { font-size: var(--t-label); }
.tile-buy { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: auto; flex-wrap: wrap; }
.tile-price { font-weight: 700; font-size: var(--t-small); }
.grid2 .tile-price { font-size: var(--t-card); }
.btn.tiny { min-height: 26px; padding: 0 9px; font-size: var(--t-tiny); border-radius: 8px; }
/* Sheets rise from the bottom (Sort & filter and others). */
.sheet-wrap { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 560px; max-height: 85vh; max-height: 85dvh; background: var(--card); color: var(--ink); border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column; padding-bottom: max(env(safe-area-inset-bottom), 10px); box-shadow: 0 -10px 40px rgba(0, 0, 0, .4); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 4px 18px; }
.sheet-body { overflow: auto; padding: 4px 18px 10px; }
.sheet-groups { display: flex; flex-direction: column; gap: 8px; }
.sheet-groups .label { margin-top: 8px; }
.sheet-foot { padding: 10px 14px 4px; border-top: 1px solid var(--line); }
.sheet-foot .row { margin-top: 0; justify-content: flex-end; }

/* Teach > My academies: picture, name, View page and ⋯ (Idowu, 1 Nov). */
.academy-row { display: flex; align-items: center; gap: 12px; }
.academy-pic { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; background: var(--soft); }
.academy-pic.initial { display: grid; place-items: center; font-weight: 700; }
.more-btn { min-width: 40px; font-size: 20px; letter-spacing: 1px; padding: 0 8px; }
.menu-list { display: flex; flex-direction: column; }
.menu-item { text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 14px 4px; font: inherit; font-size: var(--t-card); color: var(--ink); }
.menu-item:last-child { border-bottom: 0; }
.menu-item.danger { color: var(--bad); }

/* Course pictures v2: one at a time with arrows and dots; ★ makes a picture the cover. */
.gallery-frame { position: relative; }
.gallery-track { flex-wrap: nowrap; touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
.gallery-slide { min-width: 100%; width: 100%; box-sizing: border-box; display: flex; justify-content: center; align-items: center; }
.gallery-slide img { cursor: zoom-in; }
.gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: rgba(13, 13, 13, .55); color: #fff; font-size: 22px; line-height: 1; display: grid; place-items: center; }
.gallery-arrow.left { left: 4px; }
.gallery-arrow.right { right: 4px; }
.gallery-arrow[hidden] { display: none; }
.gallery-under { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 8px; }
.gallery-dots { display: flex; gap: 6px; }
.gallery-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.gallery-dots span.on { background: var(--ink); }
.gallery-count { margin: 0; }
.gallery-thumb.is-cover img { outline: 2px solid var(--ok); outline-offset: 2px; }
.cover-tag { background: var(--ok); color: #0d0d0d; }
.thumb-star { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(13, 13, 13, .65); color: #ffd54a; font-size: 15px; }
.row.one-line { flex-wrap: nowrap; justify-content: flex-end; gap: 6px; }
.row.one-line .page-num { width: 64px; flex: none; }
.row.one-line .btn { white-space: nowrap; padding: 0 10px; }

/* Course pictures (P-C35): the strip is always one sideways row; its own class name "tall" (not "book",
   which the reader uses for a column of pages). */
.gallery-track { flex-direction: row; }
.gallery-slide { flex: 0 0 100%; }

/* Money (Stage 3) */
.money-row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-card); }
.money-row.total { font-weight: 700; }
.small-select { width: auto; min-width: 140px; }
.buy-box .hint { margin-top: 6px; }

/* Test Room (question 56): a yellow bar on every page while you are a test account or a visitor. */
.testbar { display: flex; align-items: center; gap: 10px; margin: 0 16px 10px; padding: 10px 12px; border-radius: 14px;
  background: var(--wip); color: #0D0D0D; font-size: var(--t-small); }
.testbar .btn { background: #0D0D0D; color: #fff; border-color: #0D0D0D; white-space: nowrap; }
.room-card .row { margin-top: 8px; }

/* The fourth course view (Idowu, 2 Nov): compact list, one line each with a small cover, the name, the price and Buy. */
.compact-list .list { gap: 0; }
.compact-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.compact-row:last-child { border-bottom: 0; }
.compact-cover { flex: none; }
.compact-cover .cover { width: 44px; border-radius: 6px; }
.compact-body { min-width: 0; color: var(--ink); text-decoration: none; display: flex; flex-direction: column; gap: 2px; }
.label.block { display: block; }

/* Me (Idowu, 2 Nov): your own profile card at the top of each part. */
.me-top { display: flex; gap: 12px; align-items: center; }
.me-photo { width: 56px; height: 56px; }
.me-photo.initial { font-size: 22px; }
.me-card .row { margin-top: 10px; }
.me-academy .row { margin: -4px 0 8px; }

/* The universal list (Idowu, 2 Nov): one straight line on top: Filter · search · four views. */
.list-tools { display: flex; align-items: center; gap: 8px; margin: 6px 0 12px; }
.list-tools .tool-filter { flex: none; padding: 0 10px; height: 38px; gap: 4px; }
.list-tools .tool-search { flex: 1; min-width: 0; height: 38px; margin: 0; padding: 0 12px; }
.list-tools .grow { flex: 1; }
.list-tools .view-switch-icons { flex: none; gap: 2px; padding: 2px; }
.list-tools .view-btn { width: 30px; height: 32px; }
.grid-cell { padding: 10px; margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: var(--t-meta); }
.grid-cell .card-title { font-size: var(--t-small); }
.grid-cell .btn { padding: 4px 10px; font-size: var(--t-tiny); }
.shop-grid.grid3 .grid-cell .meta, .shop-grid.grid3 .grid-cell .hint { font-size: var(--t-label); }
.compact-cell { padding: 6px 0; border-bottom: 1px solid var(--line); }
.compact-cell:last-child { border-bottom: 0; }
.compact-cell .meta, .compact-cell .hint { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.letter-cover { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 10px; background: var(--soft);
  color: var(--ink); font-weight: 700; font-size: 22px; }
.compact-cover .letter-cover { width: 44px; font-size: 16px; }
.shop-cover .letter-cover { width: 72px; }
.academy-logo-tile { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.compact-cover .academy-logo-tile { width: 44px; }
.block-line { display: flex; flex-direction: column; gap: 4px; width: 100%; }

/* Parts in the same look as Learn · Teach (Idowu, 2 Nov): one soft bar; the bar stays still while the page slides. */
.parts-row { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; min-width: 0; }
.parts-row > .dept-switch { flex: 1; min-width: 0; }
.parts-switch { flex: 1; min-width: 0; display: flex; flex-wrap: nowrap; gap: 4px; padding: 4px; background: var(--raised); border-radius: 14px;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.parts-switch::-webkit-scrollbar { display: none; }
.parts-switch .part-item { flex: 1 0 auto; }
.dept-switch.more, .parts-switch.more { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
.part-item { flex: 1 1 auto; text-align: center; padding: 7px 10px; border-radius: 11px; font-size: var(--t-small); font-weight: 500;
  color: var(--muted); text-decoration: none; white-space: nowrap; }
.part-item.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); font-weight: 600; }
.number-cell .tile-num { margin: 0; }
.number-cell .label { margin: 2px 0 0; }
/* Insights and My notes (Stage 4, DB-22) */
.insight-head { margin: 14px 0 6px; }
.insight-lesson { padding: 8px 0; }
.insight-lesson .card-title { margin: 0 0 6px; }
.insight-lesson .meta { margin: 6px 0 0; }
.note-card .row.between { margin-bottom: 8px; }
.note-card .note-text { width: 100%; }
.note-cell .meta { margin: 2px 0 6px; }
.note-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.promise-line { margin: 8px 0 0; }
/* Rows of parts above the page (Teach, Me, Admin): still while the page slides, like Learn · Teach. */
.subbar { padding: 6px 16px 0; }
.subbar .parts-row { margin: 0 0 8px; }
/* Admin's departments (Idowu, 2 Nov): all of them on screen at once, wrapping onto more lines. Admin only. */
.dept-switch.wrap { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.room-card .card-title { margin-bottom: 4px; }

/* Saved (question 59): the heart. On a cover it sits in the top right corner (Udemy, Airbnb). */
.tile-cover-wrap { position: relative; }
.heart-btn { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; width: 38px; height: 38px;
  font-size: 18px; line-height: 1; display: inline-grid; place-items: center; padding: 0; }
.heart-btn.small { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; font-size: 15px; background: rgba(13, 13, 13, .62);
  color: #fff; border-color: transparent; }
.heart-btn.on { color: var(--ink); }
.heart-btn.small.on { color: #fff; }
.buy-tools { display: inline-flex; align-items: center; gap: 6px; }
.compact-row .heart-btn { width: 32px; height: 32px; font-size: 15px; }

/* Receipts (question 58): print or save as PDF shows the receipt only. */
.receipt .money-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: var(--t-card); }
.receipt .money-row span:last-child { text-align: right; }
.receipt .money-row.total { font-weight: 600; }
@media print {
  #masthead, #testbar, #top, #subbar, #bottom, #toast, .back, .no-print { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .receipt { box-shadow: none !important; border: 1px solid #ccc; color: #000; background: #fff; }
}

/* Coupons (question 60) */
.code-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.code-row .input { flex: 1; min-width: 0; text-transform: uppercase; }
.money-row .was { text-decoration: line-through; color: var(--muted); }

/* Display & accessibility (question 63; theme.js sets these before the page draws). */
#page { zoom: var(--ui-zoom, 1); } /* Text size: the page grows like the browser's own zoom; the bars stay put */
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important;
  transition-duration: .01ms !important; scroll-behavior: auto !important; }
:root[data-contrast="more"] { --muted: #d9d9d9; --line: #6e6e6e; --soft: #3a3a3a; --input-bg: #000000; --card: #121212; }
:root[data-theme="light"][data-contrast="more"] { --muted: #2b2b2b; --line: #8c8c8c; --soft: #dcdcdc; --input-bg: #ffffff; --card: #ffffff; }
.plain-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
/* With big text (Settings > Text size) a narrow list keeps its search box usable: Filter and views on one line,
   the search box on its own line under them. At normal size the tools stay one straight line. */
.smart-list { container-type: inline-size; }
@container (max-width: 330px) {
  .list-tools { flex-wrap: wrap; justify-content: space-between; }
  .list-tools .tool-search { order: 3; flex: 1 0 100%; }
}

/* Headings (questions 65 + 67, Idowu 3 Nov): no red line under headings. A part that has a box is ONE box with its
   white title inside; its smaller boxes join it, split by thin lines. Parts with no box keep a plain title. */
.section.boxed { background: var(--card); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); margin-top: 16px; }
.section.boxed > .section-title, .section.boxed > .section-head .section-title { font-size: var(--t-box); margin: 0 0 12px; }
.section.boxed > .section-head { margin: 0 0 12px; align-items: center; }
.section.boxed > .section-head .section-title { margin: 0; }
.section.boxed .card { background: none; box-shadow: none; border: 0; border-radius: 0; padding: 14px 0 0; margin: 14px 0 0; border-top: 1px solid var(--line); }
.section.boxed > .section-title + .card, .section.boxed > .section-head + .card, .section.boxed .card .card:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.section.boxed .card:empty { display: none; }
.section.boxed .part-num { margin-right: 10px; }
/* A box whose first line is its own title (Account & security, Profile...): the same 16px white title. */
.card > h2.card-title:first-child { font-size: var(--t-box); margin: 0 0 10px; }
/* Home's Subjects: one line (All + 3 + More), and the full list that opens under it. */
.chips.one-line { flex-wrap: nowrap; overflow: hidden; }
.chips.one-line .chip { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.pick-list { padding: 0; overflow: hidden; margin-top: 10px; }
.pick-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: var(--t-card); }
.pick-row:first-child { border-top: 0; }
.pick-row.on { font-weight: 600; }
.pick-list .see-all { margin: 0; width: 100%; border-top: 1px solid var(--line); }
.section.boxed > .stack > .card:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* Breathing room (Idowu, 3 Nov): a box never touches the line above or below it. The bug sweep measures every page
   and fails if a box sits closer than 3px to its neighbour. */
.chips.small { margin-bottom: 12px; }
.meta + .btn, .meta + a.btn, .meta + button.btn, .hint + .btn { margin-top: 12px; }
* + .center, .shop-grid + .see-all { margin-top: 12px; }
* + h3.label { margin-top: 16px; }
.card-title + div, .card-title:has(.status) + .meta { margin-top: 8px; }
.tiles { margin: 10px 0; }
.row + div, .row + p, .hint + div { margin-top: 10px; }
.section.boxed { margin-bottom: 12px; }
.card-split { border-top: 1px solid var(--line); margin: 14px 0; }

/* iPhone only: Safari zooms the whole page in when you tap a box whose text is under 16px, so typing boxes stay 16px there. */
@supports (-webkit-touch-callout: none) { :root { --t-input: 16px; } }
/* Forms anywhere (pages and sheets): a typing box never touches the next box or label below it. */
.input + :not(button):not(.btn):not(.hint):not(.error), * + label.label { margin-top: 10px; }
.input + .hint, .input + .error { margin-top: 6px; }
/* Lines with a status pill stacked one under another (Testing, receipts) get room between them. */
.meta:has(.status) + .meta, .meta + .meta:has(.status) { margin-top: 8px; }
/* Whatever comes after a list (Add a department under the departments, Add by email under the people). */
.smart-list + *, .list + * { margin-top: 12px; }
.after-list { margin-top: 12px; }
.search-subjects { margin: 12px 0; }
.see-all + * { margin-top: 10px; }
/* One row to swipe (Idowu, 3 Nov; Netflix / YouTube / Udemy shelves): tiles slide sideways, snap into place, and the
   next tile is cut at the edge so people see there is more. The page swipe leaves this row alone (swipe.js). */
.shop-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: -16px; padding-right: 16px; overscroll-behavior-x: contain; }
.shop-row::-webkit-scrollbar { display: none; }
.shop-row-item { flex: 0 0 38%; scroll-snap-align: start; min-width: 0; }
/* Teaching together (question 70, DB-23) */
.team-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; }
.team-row .card-title { margin: 0; }
.team-row .meta { margin: 2px 0 0; }
.team-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.team-pct { font-weight: 700; font-size: var(--t-box); white-space: nowrap; }
.team-agreed { margin-top: 8px; }
.co-teachers { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 10px; }
.teacher-photo.small { width: 32px; height: 32px; }
.tile-learners { display: block; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Questions under each lesson (question 71, DB-24) */
.qa-card .hint { margin: 4px 0 10px; }
.qa-compose .qa-text { width: 100%; }
.qa-compose .row { justify-content: flex-end; }
.qa-question { padding: 10px 0; }
.qa-name { font-size: var(--t-card); font-weight: 600; color: var(--ink); }
.qa-mark { font-size: var(--t-label); font-weight: 600; color: var(--info); border: 1px solid var(--info); border-radius: 999px; padding: 1px 7px; }
.qa-answer { padding: 8px 0; }
.qa-answer.by-teacher > .note-body { color: var(--ink); }
.qa-empty { margin: 10px 0 0; }
.avatar.xs { width: 24px; height: 24px; font-size: 10px; }
.report-post { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; }
.qa-compose { margin: 8px 0; }
.qa-thread > .see-all { margin-top: 6px; }
.list > .note-cell + .note-cell { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
/* Course teams: guests and partners (question 75, DB-25) */
.agreement-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: var(--t-meta); line-height: 1.55; color: var(--ink);
  background: var(--raised); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 10px 0; max-height: 50vh; overflow: auto; }
.team-terms, .team-decisions, .team-agreements { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.team-terms .meta { margin: 4px 0 0; }
.team-decisions > .list { margin-top: 6px; }
.legacy-alert { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--bad); border-radius: 12px; }
.legacy-person { padding: 10px 0; border-bottom: 1px solid var(--line); }
.legacy-rows > .btn { margin-top: 10px; }
.team-row .card-title + .meta, .team-decisions .history-row .card-title + .meta { margin-top: 5px; }
.legacy-person .field + .field, .legacy-person .field + .two { margin-top: 10px; }
/* Lesson questions, the Instagram comments layout (Idowu, 3 Nov) */
.qa-post { display: flex; gap: 10px; align-items: flex-start; }
.qa-post > .avatar { flex: none; margin-top: 2px; }
.qa-main { flex: 1; min-width: 0; }
.qa-head { display: flex; align-items: flex-start; gap: 6px; }
.qa-line { flex: 1; min-width: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 2px; }
.qa-time { font-size: var(--t-meta); color: var(--muted); }
.qa-more { flex: none; background: none; border: 0; color: var(--muted); font-size: var(--t-box); line-height: 1; width: 32px; height: 28px;
  margin: -4px -6px 0 0; border-radius: 8px; cursor: pointer; }
.qa-more:active { background: var(--raised); }
.qa-body { margin: 4px 0 0; font-size: var(--t-card); }
.qa-tools { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; margin-top: 10px; }
.qa-tool-mid { justify-self: center; }
.qa-tool-right { justify-self: end; }
.qa-tools > span { display: flex; align-items: center; }
.qa-tools .btn { padding: 0 10px; white-space: nowrap; }
.qa-thread:not(:empty) { margin: 10px 0 0 34px; padding-left: 12px; border-left: 2px solid var(--line); }
.pager.lesson-pager-top { margin: 10px 0 14px; }
/* Lesson questions sit straight on the Questions card, no box behind each one (Idowu, 3 Nov, the "after" mockup). */
.qa-card .smart-list .card { background: transparent; box-shadow: none; border: 0; padding: 0; }
.qa-card .qa-question + .qa-question { border-top: 1px solid var(--line); }
/* Straight lines (Idowu, 3 Nov): in a row of things side by side, nothing gets extra space above it (the rule
   ".meta + .btn" is for stacked layouts only). scripts/bugsweep.mjs checks every row on every page. */
:is(.row, .text-size, .reader-tools, .qa-tools, .quiz-edit-answer, .team-side, .segmented, .lesson-actions, .head-row, .list-tools, .photo-row, .academy-logo-row, .toggle-row, .team-row, .history-row > .row) > * { margin-top: 0 !important; }
.people-list { margin-top: 10px; }

/* People & Support: locked accounts (DB-27). The status pill needs a little room under the name. */
.lock-line { margin-top: 6px; }

/* Practice quizzes (question 74): tap an answer; green = right, yellow = not quite, blue = the answer shown. */
.quiz-card .hint { margin: 4px 0 6px; }
.quiz-q { padding: 12px 0; }
.quiz-q + .quiz-q { border-top: 1px solid var(--line); }
.quiz-prompt { font-size: var(--t-card); font-weight: 600; margin: 0 0 10px; color: var(--ink); overflow-wrap: anywhere; }
.quiz-num { color: var(--muted); }
.quiz-choices { display: grid; gap: 8px; }
.quiz-choice { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--raised); color: var(--ink); font: inherit; font-size: var(--t-card); cursor: pointer; }
.quiz-choice:disabled { cursor: default; }
.quiz-choice:not(:disabled):active { transform: scale(.99); }
.quiz-choice.busy { border-color: var(--wip); }
.quiz-letter { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-small); font-weight: 600; border: 1px solid var(--line); color: var(--muted); }
.quiz-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.quiz-choice.right { border-color: var(--ok); background: rgba(34, 197, 94, .12); }
.quiz-choice.right .quiz-letter { background: var(--ok); border-color: var(--ok); color: #0d0d0d; }
.quiz-choice.shown { border-color: var(--info); background: rgba(77, 163, 255, .12); }
.quiz-choice.shown .quiz-letter { background: var(--info); border-color: var(--info); color: #fff; }
.quiz-choice.wrong { border-color: var(--wip); }
.quiz-choice.wrong .quiz-letter { border-color: var(--wip); color: var(--wip); }
.quiz-choice.dim { opacity: .6; }
.quiz-feedback { font-size: var(--t-meta); color: var(--muted); margin: 10px 0 0; }
.quiz-end { border-top: 1px solid var(--line); padding-top: 12px; }
.quiz-editor .hint { margin: 0 0 10px; }
.quiz-edit { padding: 12px 0; display: grid; gap: 8px; }
.quiz-edit + .quiz-edit { border-top: 1px solid var(--line); }
.quiz-edit .meta { margin: 0; }
.quiz-edit-answers { display: grid; gap: 6px; }
.quiz-edit-answer { display: flex; align-items: center; gap: 8px; }
.quiz-edit-answer input[type="radio"] { flex: none; width: 20px; height: 20px; accent-color: var(--ok); margin: 0; }
.quiz-edit-answer .input { flex: 1; min-width: 0; }
.quiz-why-off:empty { display: none; }
.quiz-editor .row { justify-content: flex-end; flex-wrap: wrap; }