/* ============================================================
   course.css - The Course tab (port of the university course renderer)
   ============================================================
   Source of truth: Moving_Notion/site-hub/course/{styles.css,_locked.css}.
   Adaptations, deliberate and ONLY these:
     - every selector is scoped under .crs (the course container) so nothing
       leaks into the dashboard (their .todo-check / .empty-state / attribute
       selectors would otherwise hit dashboard elements);
     - their theme hooks map to ours: html[data-mode="dark"] ->
       html[data-theme^="dark"], [data-mode="light"] -> html:not([data-theme^="dark"]);
     - hub-only chrome (page-header, back-to-hub, mode toggle) is not
       ported - the dashboard shell provides navigation. The unlock/premium
       screen IS ported (library rework 2026-09-10); the tier gate itself
       still lives server-side.
   The two LOCKED visual contracts from _locked.css are at the BOTTOM of this
   file ON PURPOSE - load order is part of the contract (they override).
   Do not strip them; see the _locked.css header in Moving_Notion (stripped
   4x there before the verify hook existed).
   ============================================================ */

/* ---------- tokens (their :root, scoped) ---------- */
.crs {
  --bg: #fdfcf8;
  --paper: #ffffff;
  --text: #2a2824;
  --text-muted: rgba(42, 40, 36, 0.62);
  --text-subtle: rgba(42, 40, 36, 0.38);
  --border: rgba(42, 40, 36, 0.12);
  --hover: rgba(42, 40, 36, 0.05);
  --card-bg: #ffffff;
  --card-shadow: rgba(15, 15, 15, 0.07) 0px 0px 0px 1px, rgba(15, 15, 15, 0.08) 0px 3px 8px;
  --card-shadow-hover: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.14) 0px 10px 24px;
  --blue: rgb(35, 131, 226);
  --radius: 14px;
  --tag-orange-bg: #f5c89a;
  --tag-text: #2a2824;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  max-width: 1100px;
}
html[data-theme^="dark"] .crs {
  --bg: #1c1a16;
  --paper: #24211c;
  --text: #ece6d6;
  --text-muted: rgba(236, 230, 214, 0.65);
  --text-subtle: rgba(236, 230, 214, 0.4);
  --border: rgba(236, 230, 214, 0.14);
  --hover: rgba(236, 230, 214, 0.06);
  --card-bg: #2a2620;
  --card-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.4);
  --card-shadow-hover: 0 0 0 1px rgba(236, 230, 214, 0.2), 0 14px 30px rgba(0,0,0,0.5);
  --blue: #7ab5ff;
  --tag-orange-bg: #8a5223;
  --tag-text: #ece6d6;
}
.crs img { -webkit-user-drag: none; user-drag: none; }

/* ---------- crumbs / hero ---------- */
.crs .aoy-crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; margin-bottom: 8px; }
.crs .aoy-crumb { text-decoration: none; color: var(--text-muted); padding: 2px 6px; border-radius: 4px; }
.crs .aoy-crumb:hover { background: var(--hover); color: var(--text); }
.crs .aoy-crumb-current { color: var(--text); font-weight: 500; }
.crs .aoy-crumb-sep { color: var(--text-subtle); }

.crs .aoy-hero { margin: 8px 0 16px 0; }
.crs .aoy-hero h1 { font-size: 28px; font-weight: 800; margin: 0 0 4px 0; letter-spacing: -0.02em; }
.crs .aoy-hero-lead { font-size: 14px; color: var(--text-muted); margin: 0 0 4px 0; }
.crs .aoy-hero-meta { font-size: 12px; color: var(--text-subtle); margin: 0; font-variant-numeric: tabular-nums; }

/* ---------- module grid / cards ---------- */
.crs .aoy-module-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.crs .aoy-module-card { background: var(--card-bg); border-radius: 14px; box-shadow: var(--card-shadow); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform 0.18s, box-shadow 0.18s; position: relative; }
.crs .aoy-module-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
.crs .aoy-cover {
  width: 100%;
  aspect-ratio: 16 / 5;
  /* cover, not a percentage pair: never distort a cover to fit the box */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #f1f0ee;
  border-bottom: 1px solid var(--border);
  position: relative;
}
html[data-theme^="dark"] .crs .aoy-cover { background-color: #201d18; }
.crs .aoy-cover-placeholder { display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--text-subtle); background: linear-gradient(135deg, var(--hover), var(--border)); }
.crs .aoy-cover-n { font-size: 56px; }
.crs .aoy-module-body { padding: 10px 14px 12px 14px; }
.crs .aoy-module-title { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; margin-bottom: 3px; }
.crs .aoy-module-meta { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.crs .aoy-progress-bar { height: 3px; background: var(--hover); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.crs .aoy-progress-fill { height: 100%; background: linear-gradient(90deg, #4ade80, #22c55e); border-radius: 2px; transition: width 0.3s; }
.crs .aoy-module-done-badge {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px;
  background: #22c55e; color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800;
  box-shadow: 0 6px 14px rgba(34, 197, 94, 0.35); z-index: 2;
}
.crs .aoy-module-card.done .aoy-progress-fill { background: linear-gradient(90deg, #22c55e, #16a34a); }

/* ---------- module page ---------- */
.crs .aoy-module-header { margin: 16px 0 28px 0; }
.crs .aoy-module-number { font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--text-muted); font-weight: 600; }
.crs .aoy-module-h1 { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; margin: 6px 0 8px 0; }
.crs .aoy-page-icon { margin-right: 10px; }
.crs .aoy-module-desc { font-size: 15px; color: var(--text-muted); margin: 0; line-height: 1.55; }
.crs .aoy-module-cover-large {
  width: 100%; aspect-ratio: 16 / 5;
  background-size: cover; background-position: center center; background-repeat: no-repeat;
  background-color: var(--hover);
  border-radius: 14px; margin-bottom: 24px;
  border: 1px solid var(--border); overflow: hidden;
}

/* ---------- lesson list ---------- */
.crs .aoy-lesson-list { display: flex; flex-direction: column; gap: 6px; }
.crs .aoy-lesson-row { display: flex; gap: 14px; padding: 0; overflow: hidden; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: inherit; align-items: stretch; transition: background 0.12s, border-color 0.12s, transform 0.12s; }
.crs .aoy-lesson-row:hover { background: var(--hover); border-color: var(--text-subtle); transform: translateX(2px); }
.crs .aoy-lesson-row.done { opacity: 0.85; }
.crs .aoy-lesson-row.done .aoy-lesson-title { color: var(--text-muted); }
.crs .aoy-lesson-row.sop { border-style: dashed; }
.crs .aoy-lesson-thumb { width: 120px; min-width: 120px; aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: var(--hover); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--text-subtle); font-weight: 700; font-size: 12px; margin: 8px 0 8px 8px; }
/* video-less lesson thumb: a soft house-red tile with a play glyph, not a bare dash */
.crs .aoy-lesson-thumb.aoy-lesson-thumb-ph { background: linear-gradient(135deg, rgba(224,36,36,.10), rgba(224,36,36,.20)); color: #e02424; font-size: 15px; }
/* Rate the Onboarding: a brand-orange star on black, not the red TXT chip (Dana 2026-09-17) */
.crs .aoy-lesson-thumb.aoy-lesson-thumb-star { background: #0b0d12; color: #FB9B50; font-size: 30px; line-height: 1; }
.crs .aoy-lesson-body { flex: 1; min-width: 0; padding: 14px 16px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.crs .aoy-lesson-title { font-weight: 600; font-size: 16px; line-height: 1.35; margin: 0; white-space: normal; }
/* "Step N" eyebrow above the title in onboarding lesson rows (Dana 2026-09-17) */
.crs .aoy-lesson-step-row { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #F98125; margin-bottom: 3px; }
.crs .aoy-lesson-check {
  display: flex; align-items: center; justify-content: center;
  align-self: stretch; width: 64px; min-width: 64px;
  background: var(--hover); border-left: 1px solid var(--border);
  font-size: 28px; font-weight: 800; color: transparent;
  transition: background 0.15s, color 0.15s;
}
.crs .aoy-lesson-check.on { background: #22c55e; color: #fff; border-left-color: #22c55e; }

/* ---------- inline video block (a lesson with more than one video) ---------- */
.crs .aoy-block-video { margin: 18px 0; }
.crs .aoy-block-video-title { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.crs .aoy-block-video .aoy-video-wrap { margin-bottom: 6px; }
.crs .aoy-block-video-caption { font-size: 12.5px; color: var(--text-muted); }

/* ---------- folder card (course_group, migration 048) ----------
   The cover is a strip of its members' covers under a label, so the folder
   looks like what it holds rather than a blank tile. */
/* Black house style to match the neighbouring raster course covers (Dana
   2026-09-18: same background + font as the others), not the old blue tile. */
.crs .aoy-group-cover { position: relative; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #101012 0%, #191b1f 55%, #22242a 100%); overflow: hidden; }
.crs .aoy-group-cover::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 38px), repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 38px); }
.crs .aoy-group-label { position: relative; z-index: 2; color: #fff; font-size: 26px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; text-align: center; padding: 0 12px; }
/* rendered cover (Team AOY template): the art already has label + grid baked in */
.crs .aoy-group-cover.has-raster { background-size: cover; background-position: center; }
.crs .aoy-group-cover.has-raster::before { display: none; }

/* ---------- lesson page ---------- */
.crs .aoy-lesson-page { max-width: 880px; margin: 0 auto; }
.crs .aoy-lesson-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 12px 0 20px 0; flex-wrap: wrap; }
.crs .aoy-lesson-titlecol { flex: 1; min-width: 260px; }
.crs .aoy-lesson-step { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #F98125; margin-bottom: 4px; }
.crs .aoy-lesson-h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin: 0; min-width: 260px; }
/* The house-orange CTA, not a ghost pill. Dana 2026-09-14: "кнопку Mark as
   complete я бы покрасила и выделила, иначе на нее не будут кликать" - the
   lesson's only action has to read as the loudest thing on the row. Done state
   goes quiet green on purpose: once it is pressed there is nothing left to do. */
.crs .aoy-complete-btn { background: linear-gradient(180deg, #FB9B50, #F98125); border: 1px solid #e0741f; color: #2c2100; padding: 11px 20px; border-radius: 999px; font-size: 14px; font-weight: 800; letter-spacing: .01em; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; font-family: inherit; box-shadow: 0 2px 10px rgba(249,129,37,.35); transition: box-shadow .15s, transform .08s, filter .15s; }
.crs .aoy-complete-btn .aoy-complete-check { color: #2c2100; font-weight: 900; font-size: 15px; }
.crs .aoy-complete-btn:hover { filter: brightness(1.04); box-shadow: 0 4px 16px rgba(249,129,37,.45); }
.crs .aoy-complete-btn:active { transform: translateY(1px); }
.crs .aoy-complete-btn.on { background: #22c55e; border-color: #22c55e; color: #fff; box-shadow: none; }
.crs .aoy-complete-btn.on .aoy-complete-check { color: #fff; }
.crs .aoy-complete-btn.on:hover { background: #16a34a; filter: none; box-shadow: none; }

.crs .aoy-video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
.crs .aoy-video-wrap iframe { width: 100%; height: 100%; border: 0; }
.crs .aoy-video-wrap .aoy-video-mask { position: absolute; background: transparent; pointer-events: auto; cursor: default; z-index: 5; }
.crs .aoy-video-wrap .aoy-video-mask-tl { top: 0;    left: 0;  width: 65%;  height: 56px; }
.crs .aoy-video-wrap .aoy-video-mask-bl { bottom: 0; left: 0;  width: 60px; height: 44px; }
.crs .aoy-video-wrap .aoy-video-mask-br { bottom: 0; right: 0; width: 100px; height: 44px; }
/* video-slot placeholder for lessons whose video is not recorded yet (Dana
   2026-09-11): same 16:9 frame, house-red gradient, no dead black box */
.crs .aoy-video-ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2a2620 0%, #3a2420 60%, #5a2626 100%); }
html:not([data-theme^="dark"]) .crs .aoy-video-ph { background: linear-gradient(135deg, #fbfbfb 0%, #f7dcdc 58%, #efb6b6 100%); }
.crs .aoy-video-ph-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #e02424; }
.crs .aoy-video-ph-play { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #e02424; color: #fff; font-size: 22px; padding-left: 4px; }
.crs .aoy-video-ph-txt { font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--text-muted); }
/* click-to-play facade for inline lesson videos (many-Loom throttle fix, David
   2026-09-17): a light house tile with a big play button; the iframe is only
   created on click, so N inline videos mount 0 iframes until opened. */
.crs .aoy-video-facade { cursor: pointer; }
.crs .aoy-video-facade .aoy-video-facade-btn { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2a2620 0%, #3a2420 60%, #5a2626 100%); }
html:not([data-theme^="dark"]) .crs .aoy-video-facade .aoy-video-facade-btn { background: linear-gradient(135deg, #fbfbfb 0%, #f7dcdc 58%, #efb6b6 100%); }
/* Facade poster: the video's own still frame instead of a blank gradient (David 2026-09-18) */
/* `html` prefix so this out-specifies the light-theme `background:` shorthand on
   line ~197 (which otherwise reset size to auto + repeat -> the poster tiled
   twice across the facade in light mode, David 2026-09-18 "Тима поплавило"). */
html .crs .aoy-video-facade .aoy-video-facade-btn.has-poster { background-size: cover; background-position: center; background-repeat: no-repeat; }
.crs .aoy-video-facade .aoy-video-facade-btn.has-poster::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.30); }
.crs .aoy-video-facade-play { position: relative; z-index: 1; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: #e02424; color: #fff; font-size: 26px; padding-left: 5px; transition: transform .12s; }
.crs .aoy-video-facade-btn:hover .aoy-video-facade-play { transform: scale(1.08); }

.crs .aoy-timecodes { background: var(--paper); border: 1px solid var(--border); border-radius: 10px; padding: 10px 16px; margin-bottom: 20px; }
.crs .aoy-timecodes summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--text-muted); list-style: none; user-select: none; }
.crs .aoy-timecodes summary::-webkit-details-marker { display: none; }
.crs .aoy-timecodes ul { margin: 10px 0 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.crs .aoy-timecodes li .aoy-tc-btn { display: inline-flex; gap: 10px; background: transparent; border: 0; color: var(--text); text-decoration: none; padding: 4px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; text-align: left; font: inherit; line-height: 1.45; }
.crs .aoy-timecodes li .aoy-tc-btn:hover { background: var(--hover); }
.crs .aoy-tc-time { font-variant-numeric: tabular-nums; color: var(--blue); font-weight: 600; min-width: 50px; }
.crs .aoy-tc-title { color: var(--text); }
.crs .aoy-tc-count { color: var(--text-subtle); font-weight: 500; margin-left: 4px; }

.crs .aoy-lesson-goal { margin: 6px 0 18px 0; padding: 12px 16px; border-left: 3px solid #d97706; background: rgba(217, 119, 6, 0.06); border-radius: 6px; font-size: 15px; line-height: 1.6; color: var(--text); }
.crs .aoy-lesson-goal-label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #d97706; margin-bottom: 4px; }
.crs .aoy-lesson-goal-body { color: var(--text); }
.crs .aoy-lesson-goal-body strong { color: var(--text); }
html[data-theme^="dark"] .crs .aoy-lesson-goal { background: rgba(255, 184, 88, 0.07); border-left-color: #ffb858; }
html[data-theme^="dark"] .crs .aoy-lesson-goal-label { color: #ffb858; }

.crs .aoy-leave-box { background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 10px; padding: 14px 18px; margin: 16px 0 24px 0; }
.crs .aoy-leave-head { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: #22c55e; margin-bottom: 8px; }
.crs .aoy-leave-box ul { margin: 0; padding-left: 20px; }
.crs .aoy-leave-box li { margin: 4px 0; font-size: 14.5px; line-height: 1.55; }

/* ---------- blocks ---------- */
.crs .aoy-blocks { font-size: 15px; line-height: 1.7; }
.crs .aoy-block-heading { margin-top: 28px; margin-bottom: 8px; font-weight: 700; letter-spacing: -0.01em; }
.crs .aoy-blocks h2.aoy-block-heading, .crs .aoy-toggle-body h2.aoy-block-heading { font-size: 26px; font-weight: 700; margin-top: 32px; margin-bottom: 8px; letter-spacing: -0.015em; }
.crs .aoy-blocks h3.aoy-block-heading, .crs .aoy-toggle-body h3.aoy-block-heading { font-size: 20px; font-weight: 700; margin-top: 24px; margin-bottom: 8px; letter-spacing: -0.01em; }
.crs .aoy-blocks h4.aoy-block-heading, .crs .aoy-toggle-body h4.aoy-block-heading { font-size: 16px; font-weight: 700; margin-top: 18px; margin-bottom: 6px; }
.crs .aoy-block-p { margin: 8px 0; }
.crs .aoy-blocks p, .crs .aoy-toggle-body p { font-size: 15px; line-height: 1.7; margin: 8px 0; }
.crs .aoy-block-list { margin: 8px 0 14px 0; padding-left: 24px; }
.crs .aoy-blocks hr { border: 0; border-top: 1px solid var(--border); margin: 22px 0; }
.crs .aoy-block-code { background: var(--hover); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin: 12px 0; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; }
.crs .aoy-block-code code { font-family: inherit; white-space: pre; }
.crs .aoy-blocks ul, .crs .aoy-blocks ol, .crs .aoy-toggle-body ul, .crs .aoy-toggle-body ol { font-size: 15px; line-height: 1.7; margin: 10px 0 14px 0; padding-left: 26px; }
.crs .aoy-blocks li, .crs .aoy-toggle-body li { margin: 5px 0; }

.crs .aoy-block-callout { display: flex; gap: 12px; background: var(--hover); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; margin: 12px 0; align-items: flex-start; }
.crs .aoy-callout-icon { font-size: 20px; line-height: 1.3; }
.crs .aoy-callout-text { flex: 1; white-space: pre-line; }

.crs .aoy-block-quote { margin: 14px 0; padding: 6px 16px; border-left: 3px solid var(--text); color: var(--text-muted); font-size: 15px; font-style: italic; }

.crs .aoy-block-image { margin: 16px 0; text-align: center; }
.crs .aoy-block-image img { max-width: 100%; border-radius: 8px; border: 1px solid var(--border); cursor: zoom-in; }

.crs .aoy-block-toggle { background: var(--paper); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; margin: 12px 0; }
.crs .aoy-block-toggle summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--text); user-select: none; }
.crs .aoy-toggle-body { margin-top: 12px; color: var(--text); font-size: 15px; line-height: 1.7; }
.crs .aoy-toggle-body .aoy-block-heading { margin-top: 16px; }
.crs .aoy-toggle-body img { max-width: 100%; border-radius: 6px; }

.crs .aoy-block-todo { list-style: none; padding-left: 0; margin: 8px 0 14px 0; }
.crs .aoy-block-todo li { display: flex; gap: 10px; align-items: flex-start; padding: 3px 0; }
.crs .aoy-block-todo .todo-check { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; min-width: 18px; border: 1.5px solid var(--text-subtle); border-radius: 4px; font-size: 12px; color: transparent; margin-top: 3px; font-weight: 700; background: transparent; padding: 0; }
.crs .aoy-block-todo .todo-check.on { background: #2383e2; border-color: #2383e2; color: #fff; }
.crs .aoy-block-todo .todo-text { flex: 1; }
.crs .aoy-block-todo li.todo-done .todo-text { color: var(--text-muted); text-decoration: line-through; opacity: 0.7; }

.crs .aoy-mini-task { background: rgba(245, 200, 154, 0.18); border: 1px solid rgba(217, 119, 6, 0.45); border-radius: 10px; padding: 14px 18px; margin: 16px 0 24px 0; }
.crs .aoy-mini-task-head { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: #d97706; margin-bottom: 8px; }
.crs .aoy-mini-task-list { margin: 0; padding-left: 22px; }
.crs .aoy-mini-task-list li { margin: 4px 0; font-size: 14.5px; line-height: 1.55; }
html[data-theme^="dark"] .crs .aoy-mini-task { background: rgba(217, 119, 6, 0.12); border-color: rgba(255, 178, 88, 0.5); }
html[data-theme^="dark"] .crs .aoy-mini-task-head { color: #ffb858; }

.crs .aoy-block-page-link { display: block; text-decoration: none; color: var(--text); border: 1px solid var(--border); background: var(--paper); padding: 14px 16px; border-radius: 10px; margin: 12px 0; }
.crs .aoy-block-page-link-head { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 14px; }
.crs .aoy-page-link-icon { font-size: 18px; }
.crs .aoy-block-page-link, .crs .aoy-block-page-link *, .crs .aoy-block-page-link-head, .crs .aoy-block-page-link-head *, .crs .aoy-page-link-label, .crs .aoy-page-link-label * { color: var(--text) !important; background: transparent !important; text-decoration: none; }
.crs a.aoy-block-page-link-head { cursor: pointer; }
.crs a.aoy-block-page-link-head:hover .aoy-page-link-label { text-decoration: underline; text-decoration-thickness: 1px; }
.crs .aoy-block-page-link .aoy-toggle-body { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border); }
/* CTA action link = a solid orange pill button so it reads as clickable
   (Dana/David 2026-09-17). Overrides the quiet-box rule above with !important;
   neutral drop shadow, no glow (house rule). */
.crs .aoy-block-page-link.aoy-cta { display: inline-block; border: 0 !important; background: transparent !important; padding: 0; margin: 18px 0; }
.crs .aoy-block-page-link.aoy-cta .aoy-block-page-link-head { display: inline-flex; gap: 10px; align-items: center; background: #F98125 !important; padding: 15px 34px; border-radius: 999px; font-size: 17px; font-weight: 800; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.crs .aoy-block-page-link.aoy-cta .aoy-block-page-link-head, .crs .aoy-block-page-link.aoy-cta .aoy-block-page-link-head *, .crs .aoy-block-page-link.aoy-cta .aoy-page-link-label { color: #fff !important; }
.crs a.aoy-block-page-link.aoy-cta:hover .aoy-block-page-link-head, .crs .aoy-block-page-link.aoy-cta .aoy-block-page-link-head:hover { background: #e06f14 !important; }
.crs .aoy-block-page-link.aoy-cta .aoy-page-link-label, .crs .aoy-block-page-link.aoy-cta .aoy-block-page-link-head:hover .aoy-page-link-label { text-decoration: none !important; }

.crs .aoy-block-file { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; background: var(--paper); border: 1px solid var(--border); border-radius: 8px; color: var(--text); text-decoration: none; font-size: 13.5px; margin: 8px 0; }
.crs .aoy-block-file:hover { background: var(--hover); }
.crs .aoy-block-file-icon { opacity: 0.7; }

/* ---------- prev/next nav (red-accent big buttons) ---------- */
.crs .aoy-lesson-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border); }
.crs .aoy-nav-btn { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 16px 22px; font-size: 15px; font-weight: 600; color: var(--text); text-decoration: none; flex: 1; max-width: 48%; white-space: normal; line-height: 1.4; transition: background 0.15s, transform 0.15s, border-color 0.15s, box-shadow 0.15s; position: relative; overflow: hidden; }
.crs .aoy-nav-btn::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, #ff4757, #c92a3a); }
.crs .aoy-nav-prev::before { left: 0; right: auto; }
.crs .aoy-nav-next::before { left: auto; right: 0; }
.crs .aoy-nav-btn:hover { background: var(--hover); border-color: #ff4757; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(255, 71, 87, 0.18); }
.crs .aoy-nav-prev { padding-left: 28px; }
.crs .aoy-nav-next { margin-left: auto; padding-right: 28px; text-align: right; }
.crs .aoy-nav-direction { display: block; font-size: 11px; font-weight: 700; color: #ff4757; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 4px; }
/* end of onboarding: the one door out, in house orange (Dana 2026-09-14) */
.crs .aoy-nav-finish { cursor: pointer; background: linear-gradient(180deg, #FB9B50, #F98125); border-color: #e0741f; color: #2c2100; }
.crs .aoy-nav-finish::before { background: linear-gradient(180deg, #ffd9b3, #e0741f); }
.crs .aoy-nav-finish .aoy-nav-direction { color: #7a3d00; }
.crs .aoy-nav-finish:hover { background: linear-gradient(180deg, #ffa963, #ff8a2b); border-color: #e0741f; box-shadow: 0 6px 16px rgba(249,129,37,.3); }
.crs .aoy-nav-hint { display: none; font-size: 11.5px; font-weight: 600; color: #7a3d00; margin-top: 4px; }
.crs .aoy-nav-finish.is-waiting { background: var(--card-bg); color: var(--text-subtle); border-color: var(--border); box-shadow: none; cursor: default; }
.crs .aoy-nav-finish.is-waiting::before { background: var(--border); }
.crs .aoy-nav-finish.is-waiting .aoy-nav-direction { color: var(--text-subtle); }
.crs .aoy-nav-finish.is-waiting .aoy-nav-hint { display: block; color: var(--text-muted); }
.crs .aoy-nav-finish.is-waiting:hover { background: var(--card-bg); transform: none; box-shadow: none; border-color: var(--border); }

/* ---------- empty / loading states ---------- */
.crs .empty-state { text-align: center; padding: 64px 20px; color: var(--text-muted); }
.crs .empty-title { font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.crs .empty-hint { font-size: 14px; }

/* ---------- lightbox (element carries class "crs lightbox") ---------- */
.crs.lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 40px; max-width: none; }
.crs.lightbox.hidden { display: none; }
.crs.lightbox .lightbox-backdrop { position: fixed; inset: 0; background: rgba(15, 15, 15, 0.85); cursor: zoom-out; }
.crs.lightbox img { position: relative; max-width: 100%; max-height: 100%; border-radius: 6px; }
.crs.lightbox .lightbox-close { position: fixed; top: 20px; right: 24px; background: rgba(255,255,255,0.1); border: 0; color: #fff; font-size: 26px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; z-index: 2; }
.crs.lightbox .lightbox-close:hover { background: rgba(255,255,255,0.2); }

/* ---------- Notion inline tints: KILLED (their override, ported) ---------- */
.crs [class*="highlight-"], .crs [class*="block-color-"] { color: inherit !important; background: transparent !important; fill: inherit !important; padding: 0 !important; border-radius: 0 !important; }
/* PURPLE BAN - no purple/violet anywhere on the lesson page */
.crs [class*="highlight-purple"], .crs [class*="block-color-purple"], .crs [class*="purple"], .crs [style*="purple"] { color: inherit !important; background: transparent !important; fill: inherit !important; }
/* links inside content: always blue, never :visited purple */
.crs .aoy-blocks a, .crs .aoy-blocks a:visited, .crs .aoy-toggle-body a, .crs .aoy-toggle-body a:visited, .crs .aoy-leave-box a, .crs .aoy-leave-box a:visited, .crs .aoy-mini-task a, .crs .aoy-mini-task a:visited { color: #2563eb !important; text-decoration: underline; }
html[data-theme^="dark"] .crs .aoy-blocks a, html[data-theme^="dark"] .crs .aoy-toggle-body a, html[data-theme^="dark"] .crs .aoy-leave-box a, html[data-theme^="dark"] .crs .aoy-mini-task a, html[data-theme^="dark"] .crs .aoy-blocks a:visited, html[data-theme^="dark"] .crs .aoy-toggle-body a:visited, html[data-theme^="dark"] .crs .aoy-leave-box a:visited, html[data-theme^="dark"] .crs .aoy-mini-task a:visited { color: #7ab5ff !important; }

/* ---------- the course lock (migration 045) - university lock treatment ---------- */
.crs .aoy-module-card.locked { cursor: not-allowed; }
.crs .aoy-module-card.locked .aoy-cover { filter: grayscale(0.85) brightness(0.42) saturate(0.4); }
.crs .aoy-module-card.locked:hover .aoy-cover { filter: grayscale(0.7) brightness(0.5) saturate(0.55); }
.crs .aoy-locked-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 2; }
.crs .aoy-locked-icon { width: 34%; height: auto; max-width: 120px; display: block; filter: drop-shadow(0 4px 14px rgba(0,0,0,.7)) brightness(0) invert(1) opacity(.92); }
html:not([data-theme^="dark"]) .crs .aoy-locked-icon { filter: drop-shadow(0 4px 14px rgba(0,0,0,.25)) opacity(.85); }
.crs .crs-lockhint { background: var(--paper); border: 1px dashed var(--border); border-radius: 12px; padding: 16px 18px; margin: 0 0 18px; color: var(--text-muted); font-size: 14px; line-height: 1.55; }

@media (max-width: 900px) {
  .crs .aoy-module-grid { grid-template-columns: 1fr; }
  .crs .aoy-lesson-thumb { width: 92px; min-width: 92px; }
  .crs .aoy-lesson-h1 { font-size: 24px; }
}

/* ---------- the LIBRARY (home = all courses) - university course-card
   visuals; the alignment half of the card lives in LOCKED-BLOCK-A ---------- */
.crs .aoy-course-card { background: var(--card-bg); border-radius: 14px; box-shadow: var(--card-shadow); overflow: hidden; cursor: pointer; text-decoration: none; color: inherit; transition: transform 0.18s, box-shadow 0.18s; position: relative; }
.crs .aoy-course-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
/* their cover comment: 16:9 box, image at 105% - the small overzoom crops
   sub-pixel rounding / trimmed-edge bleed instead of showing a hairline gap */
/* `cover` crops, `105% 105%` SQUASHED: it scales width and height independently,
   so any art whose ratio is not exactly 16:9 came out with narrow tall letters.
   David 2026-09-16: "у тебя картинки спюснутые получилсь! не плющ их обреж
   просто". Cropping is also the only setting that survives the next cover
   somebody draws at a different size. */
.crs .aoy-course-card .aoy-cover { aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-repeat: no-repeat; }
.crs .aoy-course-body { padding: 14px 16px 16px 16px; }
.crs .aoy-course-title { font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.crs .aoy-course-desc { font-size: 13px; color: var(--text-subtle); line-height: 1.45; }
.crs .aoy-course-meta { font-size: 12px; color: var(--text-subtle); }
.crs .aoy-course-card.done .aoy-progress-fill { background: linear-gradient(90deg, #22c55e, #16a34a); }
/* premium lock on a course card - same treatment as module.locked */
.crs .aoy-course-card.locked .aoy-cover { position: relative; filter: grayscale(0.85) brightness(0.42) saturate(0.4); }
.crs .aoy-course-card.locked:hover .aoy-cover { filter: grayscale(0.7) brightness(0.5) saturate(0.55); }

/* onboarding-first library (David 2026-09-11): while locked, the Start-here
   card sits centered ABOVE the grid - numpad "8" over 4-5-6. Its own 3-col
   grid so the card lands dead-center over the course columns below. */
.crs .aoy-onb-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 20px; }
.crs .aoy-onb-row .aoy-course-card { grid-column: 2; }
@media (max-width: 1100px) { .crs .aoy-onb-row { grid-template-columns: repeat(2, 1fr); } .crs .aoy-onb-row .aoy-course-card { grid-column: 1 / -1; width: calc(50% - 9px); margin: 0 auto; } }
@media (max-width: 720px)  { .crs .aoy-onb-row { grid-template-columns: 1fr; } .crs .aoy-onb-row .aoy-course-card { grid-column: 1; width: auto; } }
.crs .aoy-onb-card { border: 2px solid #F98125; }
/* DOM-painted onboarding cover in the AOY house style (white->red grid
   gradient + ONBOARDING / START HERE) - fixed light palette so it matches the
   neighbouring raster covers in BOTH themes. Used until a raster cover is set
   on the onboarding module (David 2026-09-11). */
.crs .aoy-onb-cover { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 0 22px; overflow: hidden; background: linear-gradient(135deg, #fbfbfb 0%, #f7dcdc 58%, #efb6b6 100%); }
.crs .aoy-onb-cover::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(120,40,40,.06) 0 1px, transparent 1px 38px), repeating-linear-gradient(90deg, rgba(120,40,40,.06) 0 1px, transparent 1px 38px); }
.crs .aoy-onb-cover > * { position: relative; z-index: 1; }
.crs .aoy-onb-kicker { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #1a1a1a; }
.crs .aoy-onb-bigtitle { display: flex; flex-direction: column; line-height: .9; margin-top: 5px; }
.crs .aoy-onb-t1 { font-size: 38px; font-weight: 900; letter-spacing: -.01em; color: #e02424; }
.crs .aoy-onb-t2 { font-size: 38px; font-weight: 900; letter-spacing: -.01em; color: #1a1a1a; }

/* ---------- the unlock screen (premium course, no aoy_full/expert sub) ---------- */
.crs .aoy-unlock-screen { display: flex; align-items: center; justify-content: center; padding: 64px 24px 96px; min-height: 60vh; }
.crs .aoy-unlock-card { max-width: 480px; width: 100%; padding: 48px 40px 40px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
html:not([data-theme^="dark"]) .crs .aoy-unlock-card { box-shadow: 0 20px 60px rgba(0,0,0,.14); }
.crs .aoy-unlock-bigicon { width: 200px; height: 200px; display: block; margin: 0 auto 18px; filter: drop-shadow(0 6px 18px rgba(0,0,0,.55)) brightness(0) invert(1) opacity(.95); }
html:not([data-theme^="dark"]) .crs .aoy-unlock-bigicon { filter: drop-shadow(0 4px 14px rgba(0,0,0,.25)) opacity(.85); }
.crs .aoy-unlock-title { font-size: 26px; margin: 0 0 12px; color: var(--text); font-weight: 700; }
.crs .aoy-unlock-sub { color: var(--text-muted); font-size: 15px; line-height: 1.6; margin: 0 0 28px; }
.crs .aoy-unlock-btn { display: inline-block; padding: 14px 44px; background: #c75050; color: #fff; border-radius: 10px; font-size: 16px; font-weight: 700; text-decoration: none; transition: background .15s, transform .15s; }
.crs .aoy-unlock-btn:hover { background: #d8624c; transform: translateY(-1px); }
.crs .aoy-unlock-back { display: block; margin-top: 22px; color: var(--text-muted); font-size: 13px; text-decoration: none; }
.crs .aoy-unlock-back:hover { color: var(--text); }

/* ---------- the content popup (page-link children - nothing may hang off
   university, David 2026-09-10; hide/unhide window inside the dashboard) ---------- */
.crs.crs-popup { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; }
.crs.crs-popup .crs-popup-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.crs.crs-popup .crs-popup-card { position: relative; width: min(760px, 94vw); max-height: 88vh; display: flex; flex-direction: column; background: var(--paper); color: var(--text); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45); }
.crs.crs-popup .crs-popup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid var(--border); }
.crs.crs-popup .crs-popup-title { font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.crs.crs-popup .crs-popup-close { border: 0; background: transparent; color: var(--text-muted); font-size: 26px; line-height: 1; cursor: pointer; padding: 2px 8px; border-radius: 8px; }
.crs.crs-popup .crs-popup-close:hover { background: var(--hover); color: var(--text); }
.crs.crs-popup .crs-popup-body { padding: 16px 20px 22px; overflow-y: auto; font-size: 14px; line-height: 1.55; }
/* the color needs !important - line ~220 forces var(--text) on every child */
.crs .aoy-block-page-link-head .aoy-page-link-open { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--blue) !important; white-space: nowrap; }
.crs button.aoy-block-page-link-head { width: 100%; font: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
.crs button.aoy-block-page-link-head:hover .aoy-page-link-label { text-decoration: underline; text-decoration-thickness: 1px; }

/* ---------- the form block (in-page answers, ONBOARDING_FORMS_SPEC.md) ---------- */
.crs .aoy-form-block { margin: 18px 0; display: flex; flex-direction: column; gap: 8px; }
.crs .aoy-form-q { font-weight: 600; }
.crs .aoy-form-opt { display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--card-bg); cursor: pointer; font-size: 14px; color: var(--text); transition: border-color .12s, background .12s; }
.crs .aoy-form-opt:hover { border-color: var(--blue); }
.crs .aoy-form-opt .aoy-form-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border); flex: 0 0 auto; display: grid; place-items: center; }
.crs .aoy-form-opt.on { border-color: var(--blue); background: rgba(35, 131, 226, 0.07); }
.crs .aoy-form-opt.on .aoy-form-dot { border-color: var(--blue); }
.crs .aoy-form-opt.on .aoy-form-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.crs .aoy-form-saved { font-size: 12.5px; color: var(--text-muted); min-height: 16px; }
.crs .aoy-form-comment { margin-top: 14px; }
.crs .aoy-form-clabel { display: block; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.crs .aoy-form-ctext { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--paper); color: var(--text); font-family: inherit; font-size: 13.5px; line-height: 1.5; resize: vertical; }
.crs .aoy-form-ctext:focus { outline: none; border-color: #F98125; box-shadow: 0 0 0 3px rgba(249,129,37,.15); }
.crs .aoy-form-csaved { font-size: 12.5px; color: var(--text-muted); min-height: 16px; margin-top: 4px; }

/* ---------- the COURSE RAIL panel (route=course replaces the watchlist) ----------
   NOT .crs-scoped on purpose: the rail sits outside #crsRoot, in dashboard
   chrome - so these use the DASHBOARD tokens (--card/--line/--gold), not
   the university palette. */
.crsr-cont { display: block; width: 100%; text-align: left; padding: 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--gold); cursor: pointer; margin-bottom: 10px; transition: border-color .12s, background .12s; }
.crsr-cont:hover { background: rgba(249,129,37,.07); }
.crsr-cont-tag { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); margin-bottom: 7px; }
.crsr-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; background-color: rgba(var(--ink-rgb),.08); background-size: cover; background-position: center; margin-bottom: 7px; }
/* no image yet (video not recorded): a glyph tile, not an empty grey box */
.crsr-thumb.ph { display: flex; align-items: center; justify-content: center; background-image: none; background-color: rgba(224,36,36,.14); color: #e07070; font-weight: 800; font-size: 15px; }
.crsr-row .crsr-thumb.sm.ph { font-size: 11px; }
.crsr-t { display: block; font-size: 12.5px; font-weight: 600; color: var(--cream); line-height: 1.35; }
.crsr-h { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted2); margin: 12px 2px 6px; }
.crsr-row { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 7px 8px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); cursor: pointer; margin-bottom: 6px; transition: border-color .12s; }
.crsr-row:hover { border-color: var(--gold); }
.crsr-row .crsr-thumb.sm { width: 58px; min-width: 58px; aspect-ratio: 16 / 9; margin-bottom: 0; border-radius: 6px; }
.crsr-row .crsr-t { flex: 1; }
.crsr-course { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; padding: 6px 8px; border-radius: 10px; margin-bottom: 4px; }
.crsr-course.locked { opacity: .55; }
.crsr-ct { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crsr-cn { font-size: 11px; font-weight: 700; color: var(--muted2); font-variant-numeric: tabular-nums; }
.crsr-bar { grid-column: 1 / -1; display: block; height: 3px; border-radius: 2px; background: rgba(var(--ink-rgb),.1); overflow: hidden; }
.crsr-bar i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #4ade80, #22c55e); transition: width .3s; }

/* ============================================================
   LOCKED CONTRACTS - port of course/_locked.css. Loaded LAST on
   purpose (order is part of the contract). Source stripped 4x
   before its verify hook existed - DO NOT strip here either.
   Adaptation: selectors carry the .crs scope; [data-mode="light"]
   maps to html:not([data-theme^="dark"]).
   ============================================================ */

/* ---- LOCKED-BLOCK-A: Course card alignment ---- */
.crs .aoy-course-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 18px; margin-top: 20px; }
@media (max-width: 1100px) { .crs .aoy-course-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .crs .aoy-course-grid { grid-template-columns: 1fr; } }
.crs .aoy-course-card { height: 100%; display: flex; flex-direction: column; }
.crs .aoy-course-body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.crs .aoy-course-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crs .aoy-course-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(13px * 1.45 * 2); }
.crs .aoy-course-meta { margin-top: 2px; }
/* ---- /LOCKED-BLOCK-A ---- */

/* ---- LOCKED-BLOCK-B: Beautify pack (callout/heading tones, section-box) ---- */
.crs .aoy-section-box { position: relative; padding: 14px 18px 4px 18px; margin: 18px 0; border-radius: 10px; border-left: 3px solid; }
.crs .aoy-section-box > .aoy-block-heading:first-child { margin-top: 0; }
.crs .aoy-section-tone-blue   { background: rgba(56, 132, 255, 0.07); border-left-color: #4a90e2; }
.crs .aoy-section-tone-green  { background: rgba(46, 174, 96,  0.08); border-left-color: #2eae60; }
.crs .aoy-section-tone-yellow { background: rgba(232, 178, 35, 0.10); border-left-color: #d49a1f; }
.crs .aoy-section-tone-red    { background: rgba(220, 70,  70, 0.08); border-left-color: #d34a4a; }
.crs .aoy-section-tone-orange { background: rgba(232, 140, 35, 0.09); border-left-color: #e08a2a; }
.crs .aoy-section-tone-purple { background: rgba(140, 95,  220,0.08); border-left-color: #8c5fdc; }
.crs .aoy-section-tone-brown  { background: rgba(140, 110, 70, 0.09); border-left-color: #8c6e46; }

.crs .aoy-heading-tone-blue   { color: #5a9af0; }
.crs .aoy-heading-tone-green  { color: #4ec98a; }
.crs .aoy-heading-tone-yellow { color: #e0b340; }
.crs .aoy-heading-tone-red    { color: #e87575; }
.crs .aoy-heading-tone-orange { color: #eda360; }
.crs .aoy-heading-tone-purple { color: #b48eea; }
.crs .aoy-heading-tone-brown  { color: #b59770; }

.crs .aoy-block-callout.aoy-callout-tone-yellow { background: rgba(232, 178, 35, 0.12); border-left: 3px solid #d49a1f; }
.crs .aoy-block-callout.aoy-callout-tone-orange { background: rgba(232, 140, 35, 0.12); border-left: 3px solid #e08a2a; }
.crs .aoy-block-callout.aoy-callout-tone-red    { background: rgba(220, 70,  70, 0.12); border-left: 3px solid #d34a4a; }
.crs .aoy-block-callout.aoy-callout-tone-green  { background: rgba(46, 174, 96,  0.12); border-left: 3px solid #2eae60; }
.crs .aoy-block-callout.aoy-callout-tone-blue   { background: rgba(56, 132, 255, 0.10); border-left: 3px solid #4a90e2; }
.crs .aoy-block-callout.aoy-callout-tone-purple { background: rgba(140, 95,  220,0.12); border-left: 3px solid #8c5fdc; }
.crs .aoy-block-callout.aoy-callout-tone-brown  { background: rgba(140, 110, 70, 0.12); border-left: 3px solid #8c6e46; }

html:not([data-theme^="dark"]) .crs .aoy-section-tone-blue   { background: rgba(56, 132, 255, 0.10); }
html:not([data-theme^="dark"]) .crs .aoy-section-tone-green  { background: rgba(46, 174, 96,  0.12); }
html:not([data-theme^="dark"]) .crs .aoy-section-tone-yellow { background: rgba(232, 178, 35, 0.14); }
html:not([data-theme^="dark"]) .crs .aoy-section-tone-red    { background: rgba(220, 70,  70, 0.10); }
html:not([data-theme^="dark"]) .crs .aoy-section-tone-orange { background: rgba(232, 140, 35, 0.12); }
html:not([data-theme^="dark"]) .crs .aoy-section-tone-purple { background: rgba(140, 95,  220,0.10); }
html:not([data-theme^="dark"]) .crs .aoy-section-tone-brown  { background: rgba(140, 110, 70, 0.11); }
/* ---- /LOCKED-BLOCK-B ---- */

/* AOY SOPs (Tim 2026-09-19): document rows from his Drive folder. The tile names
   the file type in that app's own colour so a sheet reads as a sheet at a glance. */
.crs .aoy-sop-kind { font-size: 12px; letter-spacing: .06em; font-weight: 800; }
.crs .aoy-sop-kind.aoy-sop-sheet  { background: rgba(15,157,88,.14);  color: #16a765; }
.crs .aoy-sop-kind.aoy-sop-doc    { background: rgba(66,133,244,.14); color: #4c8df6; }
.crs .aoy-sop-kind.aoy-sop-pdf    { background: rgba(224,36,36,.14);  color: #e24a4a; }
.crs .aoy-sop-kind.aoy-sop-form   { background: rgba(114,72,185,.16); color: #9a72dd; }
.crs .aoy-sop-kind.aoy-sop-slides { background: rgba(244,180,0,.14);  color: #d9a000; }
.crs .aoy-sop-open { color: var(--text-subtle); font-size: 18px; }
.crs .aoy-sop-section { margin: 18px 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #FB9B50; }

/* ═════════════════════════  § PHONE  ═════════════════════════
   The course tab at 390px. These live HERE, at the end of course.css, because
   course.css loads after styles.css and LOCKED-BLOCK-A above sets the card
   direction at the same specificity - the same rules written in styles.css
   applied their widths and lost their flex-direction, which rendered as a
   cover stuck to the top-left with the text below it. Cascade order is the
   fix, not !important. */
@media (max-width:860px){
  /* THE LIBRARY IS A LIST, NOT A STACK OF POSTERS. Measured on the rendered
     page: the hero plus one full-bleed 16:9 cover filled the whole first
     screen, so eight courses meant eight screens of scrolling. Cover left at a
     fixed 116px, text right: four courses on the first screen, and the artwork
     stays as recognition rather than decoration. */
  .crs .aoy-course-grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:10px}
  .crs .aoy-course-card{flex-direction:row;align-items:stretch;height:auto;min-height:92px}
  .crs .aoy-course-card .aoy-cover{width:116px;min-width:116px;aspect-ratio:auto;
    /* A THUMBNAIL, not a full-height panel. Stretching the tile to the card
       height left the 16:9 art floating in a black slab, and cropping it to
       fill ate the title - ONBOARDING rendered as "NBOARDING". Fixed 116x66 at
       the art's own ratio, centred in the row: the whole title reads and the
       card keeps the shape of every other list row in the product. */
    height:66px;align-self:center;margin:10px 0 10px 10px;border:none;border-radius:8px;
    background-size:cover;background-position:center}
  .crs .aoy-course-card .aoy-course-body{flex:1;min-width:0;justify-content:center;
    padding:11px 13px;gap:3px}
  .crs .aoy-course-card .aoy-course-desc{font-size:12px;min-height:0}
  .crs .aoy-course-card .aoy-course-title{font-size:15px}
  .crs .aoy-onb-cover .aoy-onb-bigtitle{font-size:18px}
  .crs .aoy-onb-cover .aoy-onb-kicker{font-size:8px}
  .crs .aoy-onb-row{max-width:100%}

  /* same one level down, for the module cards inside a course */
  .crs .aoy-module-grid{grid-template-columns:1fr;gap:10px}
  .crs .aoy-module-card{flex-direction:row;align-items:stretch;min-height:92px}
  .crs .aoy-module-card .aoy-cover{width:116px;min-width:116px;aspect-ratio:auto;
    height:66px;align-self:center;margin:10px 0 10px 10px;border:none;border-radius:8px;
    background-size:cover;background-position:center}
  .crs .aoy-module-body{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0}

  /* the header furniture was eating the first screen: two stacked headings, a
     three-line lead and a meta row before any content */
  .crs .aoy-hero h1{font-size:24px}
  .crs .aoy-hero-lead{font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden}
  .crs .aoy-hero-meta{font-size:12px}

  /* the lesson is the reading surface */
  .crs .aoy-lesson-page{max-width:100%}
  .crs .aoy-lesson-h1{font-size:23px}
  .crs .aoy-module-h1{font-size:25px}
  .crs .aoy-lesson-thumb{width:92px;min-width:92px}
  .crs .answers{grid-template-columns:1fr}
  .crs .aoy-lesson-nav{flex-direction:column;gap:10px}
  .crs .aoy-nav-btn{max-width:100%}
}