/* Auraz Academy — the academic finish (16 October 2026).

   The owner asked for the look of a high-end university website and for
   controls that feel alive. Loaded last, so it refines app.css and
   student.css without rewriting them:

   · Headings in a book serif, as university sites set them. The faces are
     the ones already on the reader's machine (Palatino on Windows, Iowan on
     Mac) — the page's security policy fetches no fonts from elsewhere. Arabic
     keeps the sans face, which carries Arabic letters properly.
   · Every button and card answers the pointer: a lift, a shadow, a press.
     Transforms and opacity only, 120–220 ms, and none of it under reduced
     motion.
   · The navigation marks the current page with an underline, so the one red
     button in the bar is the action that matters (Sign up / Start learning).
   · Sign in, sign up and password reset share a two-panel page: the brand
     panel says where the reader is; the form is on the other side. */

:root {
  --font-serif: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --lift: 0 14px 34px -18px rgb(20 24 31 / .38);
  --lift-red: 0 10px 24px -10px rgb(199 49 46 / .55);
}
html[dir="rtl"] { --font-serif: var(--font-display); }

/* ── Type: the scholarly voice ────────────────────────────────────────────── */
h1, h2, .home-hero h1, .topics-intro h2, .academy-courses h2, .academy-method h2,
.cw-hero h1, .university-heading h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.home-hero h1 { letter-spacing: -.015em; }
.hero-kicker, .course-eyebrow {
  text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 700;
}

/* ── Controls that answer the pointer ─────────────────────────────────────── */
/* Colour changes keep the theme's own speed (--mo-fast): a slower colour
   fade would be caught half-way by anything reading the page just after a
   theme switch. Only the shadow and the press are added. */
button {
  transition: background-color var(--mo-fast), border-color var(--mo-fast), color var(--mo-fast),
              box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* The press is a shade, never a movement: a transform on a button makes it
   the frame for anything absolutely placed inside it, and a whole-card link
   (.lib-card-link::after) would shrink to the button the moment it was
   pressed, losing the click. Text-style buttons get no box at all. */
button:not(.lib-card-link):not(.link-button):not(.auth-eye):hover:not(:disabled) {
  border-color: var(--accent-ring); box-shadow: 0 4px 12px -6px rgb(20 24 31 / .35);
}
button.primary:hover:not(:disabled) { box-shadow: var(--lift-red); }
button.ghost:hover:not(:disabled), .top nav button:hover:not(:disabled) { box-shadow: none; }
button:not(.lib-card-link):not(.link-button):active:not(:disabled) { box-shadow: inset 0 2px 5px rgb(20 24 31 / .18); }
button.primary:active:not(:disabled) { background: var(--accent-deep); box-shadow: inset 0 2px 6px rgb(0 0 0 / .28); }

/* The current page is underlined, not painted red: one red action per bar. */
.top nav button[aria-current="page"]:not(.primary) {
  background: transparent; color: var(--accent-text);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.top nav button.primary:hover:not(:disabled) { background: var(--accent-deep); color: #fff; }

/* Only what is clickable as a whole answers the pointer as a whole: a topic
   or a university is one button, so it lifts. A course card is not — its
   buttons are — so it stays still and its buttons answer instead. */
.topic-card, .directory-card { transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s ease; }
.topic-card { cursor: pointer; }
.topic-card:hover, .directory-card:hover { transform: translateY(-4px); box-shadow: var(--lift); }
.topic-card-label > [aria-hidden="true"] { display: inline-block; transition: transform .22s var(--ease-out); }
.topic-card:hover .topic-card-label > [aria-hidden="true"] { transform: translate(3px, 3px); }
.topic-card:active, .directory-card:active { transform: translateY(-1px); }
.topic-card:focus-visible, .directory-card:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

.link-button { transition: color var(--mo-fast); }
.link-button:hover { color: var(--accent); }
.link-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* ── Sign in, sign up, reset: one two-panel page ──────────────────────────── */
.auth-shell {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  max-width: 1120px; margin: 10px auto 48px; min-height: min(700px, calc(100dvh - 150px));
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  box-shadow: 0 40px 90px -50px rgb(20 24 31 / .45);
}
.auth-aside {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  padding: 96px 44px 44px;
  /* One deep red, flat: no glow, no arches. White on it is well above AA. */
  background-color: #7A1A1A;
}
.auth-aside-brand {
  position: absolute; top: 30px; inset-inline-start: 36px;
  display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; letter-spacing: .01em;
}
.auth-aside-brand b { font-weight: 600; color: #FFD9D4; }
.auth-mark { width: 30px; height: 30px; border-radius: 7px; background: #fff; display: grid; place-items: center; }
.auth-mark svg { width: 19px; height: 19px; display: block; }
.auth-aside-title {
  margin: 0; font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(30px, 3.1vw, 42px); line-height: 1.08; letter-spacing: -.015em; text-wrap: balance;
}
.auth-aside-lead { margin: 0; max-width: 36ch; color: #FDECEA; line-height: 1.6; }
.auth-points { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.auth-points li { display: flex; gap: 10px; align-items: flex-start; color: #fff; }
.auth-points svg, .auth-step-no svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.auth-points svg { margin-top: 3px; color: #FFB4AB; }
.auth-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.auth-steps li {
  display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 10px;
  background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .16); color: #fff;
  transition: background-color .22s ease, color .22s ease;
}
.auth-steps li b { display: block; font-weight: 600; }
.auth-steps li small { display: block; font-size: 13px; color: #FDECEA; }
.auth-steps li.is-current { background: #fff; color: #14181F; border-color: #fff; }
.auth-steps li.is-current small { color: #4A5260; }
.auth-step-no {
  width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; background: rgb(255 255 255 / .16); color: #fff;
}
.auth-steps li.is-current .auth-step-no { background: #14181F; color: #fff; }
.auth-steps li.is-done .auth-step-no { background: #fff; color: #A22323; }

.auth-main { display: flex; flex-direction: column; justify-content: center; padding: 52px clamp(24px, 5vw, 72px); min-width: 0; }
.auth-main > h1 { font-size: clamp(28px, 2.6vw, 36px); margin: 0 0 6px; }
.auth-main > .sub { margin-bottom: 22px; }
.auth-main > .notice { max-width: 440px; margin-bottom: 14px; }
.auth-shell .auth-card { max-width: 440px; width: 100%; padding: 0; border: 0; background: transparent; box-shadow: none; }
.auth-card input:not([type="checkbox"]) { min-height: 46px; }
.auth-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 12px 0 5px; }
.auth-label-row label { margin: 0; }
.auth-label-row .link-button { font-size: 13px; font-weight: 600; }
.auth-pw { position: relative; }
.auth-pw input { padding-inline-end: 50px; width: 100%; }
.auth-eye {
  position: absolute; top: 4px; bottom: 4px; inset-inline-end: 4px; width: 42px; min-height: 0; padding: 0;
  display: grid; place-items: center; border: 0; background: transparent; color: var(--sub);
}
.auth-eye:hover:not(:disabled) { background: var(--soft); color: var(--ink); box-shadow: none; }
.auth-eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth-shell .auth-actions { margin-top: 18px; display: grid; gap: 10px; }
.auth-submit { width: 100%; min-height: 48px; font-size: 15.5px; }
.auth-shell .auth-new { margin-top: 22px; }
.auth-shell .auth-new p { color: var(--sub); }
.auth-shell .auth-switch { margin-top: 18px; color: var(--sub); }

@media (max-width: 880px) {
  .auth-shell { grid-template-columns: 1fr; min-height: 0; margin-top: 0; border-radius: 14px; }
  .auth-aside { padding: 74px 22px 24px; justify-content: flex-start; }
  .auth-aside-brand { top: 22px; inset-inline-start: 22px; }
  .auth-aside-title { font-size: 26px; }
  .auth-points { display: none; }
  .auth-steps li small { display: none; }
  .auth-main { padding: 28px 20px 32px; }
}

/* ── Calm for those who asked for it ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  button, .topic-card, .directory-card, .topic-card-label > [aria-hidden="true"], .auth-steps li, .link-button { transition: none !important; }
  .topic-card:hover, .directory-card:hover, .topic-card:active, .directory-card:active { transform: none; }
}

/* ── Course cards (Home and Browse share them) ───────────────────────────── */
.home-course-card { display: flex; flex-direction: column; }
.catalog-course-cover { height: auto; aspect-ratio: 16 / 10; background: var(--bg-tint); }
.catalog-course-cover > img, .catalog-course-cover > svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-course-body { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 18px 20px 20px; }
.home-course-body h3 { font-family: var(--font-serif); font-size: 21px; font-weight: 600; margin: 2px 0 2px; letter-spacing: -.005em; }
.home-course-body > p { margin: 0; }
.course-card-topic { text-transform: uppercase; letter-spacing: .12em; font-size: 11.5px !important; font-weight: 700; color: var(--accent-text) !important; }
.course-card-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 6px; font-size: 13px; }
.course-card-meta .muted { font-size: 12.5px; }
.course-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 14px; }
.browse-head { align-items: flex-end; margin-bottom: 18px; }
.browse-head .sub { margin-bottom: 0; }
html[dir="rtl"] .course-card-topic { letter-spacing: 0; }

/* What each part costs and when the course closes: the same terms on a
   course card and in the hero's syllabus. */
.course-card-terms, .hero-syllabus-terms { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 12px 0 0; }
.course-card-terms > div, .hero-syllabus-terms > div { display: flex; flex-direction: column; gap: 1px; }
.course-card-terms dt, .hero-syllabus-terms dt { font-size: 12px; color: var(--muted); }
.course-card-terms dd, .hero-syllabus-terms dd { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── Home: the opening ────────────────────────────────────────────────────────
   What the Academy is, in plain words, on one flat brand red; beside it the
   newest course as a syllabus sheet, or the owner's own photo. Nothing
   slides or fades in. */
.home-hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 56px); align-items: center;
  margin-top: 8px; padding: clamp(30px, 5vw, 60px) clamp(22px, 5vw, 60px);
  background: #A22323; color: #fff; border-radius: 8px;
}
.home-hero-kicker { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #FFD9D4; }
html[dir="rtl"] .home-hero-kicker { letter-spacing: 0; }
.home-hero h1 { margin: 0; color: #fff; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.06; max-width: 16ch; }
html[lang="ar"] .home-hero h1 { line-height: 1.35; letter-spacing: normal; }
.home-hero-copy > p:not(.home-hero-kicker) { margin: 18px 0 26px; max-width: 52ch; color: #FBE3E0; font-size: 16px; line-height: 1.65; }
.home-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.home-hero-actions button { min-height: 46px; padding: 10px 20px; font-size: 15px; }
.home-hero-actions button.primary { background: #fff; color: #A22323; border-color: #fff; }
.home-hero-actions button.primary:hover:not(:disabled) { background: #FBE3E0; border-color: #FBE3E0; box-shadow: none; }
.home-hero-actions button:not(.primary) { background: transparent; color: #fff; border-color: rgb(255 255 255 / .6); }
.home-hero-actions button:not(.primary):hover:not(:disabled) { background: rgb(255 255 255 / .1); border-color: #fff; box-shadow: none; }
.home-hero-actions button:focus-visible { outline-color: #fff; }
.home-hero-side { min-width: 0; }
.home-hero.is-alone { grid-template-columns: minmax(0, 1fr); }
.home-hero.is-alone .home-hero-side { display: none; }
.home-hero.is-alone h1 { max-width: 20ch; }
.home-hero-photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }

.hero-syllabus { padding: 24px 26px 22px; background: var(--card); color: var(--ink); border-radius: 6px;
  box-shadow: 0 24px 48px -28px rgb(0 0 0 / .6); }
.hero-syllabus-label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
html[dir="rtl"] .hero-syllabus-label { letter-spacing: 0; }
.hero-syllabus h2 { margin: 6px 0 14px; font-size: 24px; line-height: 1.2; }
.hero-syllabus-chapters { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); min-height: 3em; }
.hero-syllabus-chapters li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.hero-syllabus-no { font-family: var(--font-serif); color: var(--muted); font-variant-numeric: tabular-nums; }
.hero-syllabus-free { font-size: 12px; font-weight: 700; color: var(--ok); }
.hero-syllabus-chapters li.hero-syllabus-more { display: block; color: var(--muted); font-size: 13px; border-bottom: 0; }
.hero-syllabus .primary { width: 100%; margin-top: 18px; }

/* ── Home: the rest of the page, under ruled heads, not in boxes ─────────── */
.topics-intro h2 { font-size: clamp(24px, 2.6vw, 30px); }
.academy-method { border: 0; border-top: 2px solid var(--ink); border-radius: 0; background: transparent; padding: 28px 0 0; }
.academy-method h2 { font-size: clamp(24px, 2.6vw, 30px); }

.home-sample { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 44px; margin: 56px 0 8px; padding-top: 28px; border-top: 2px solid var(--ink); }
.home-sample[hidden] { display: none; }
.home-sample-intro h2 { margin: 0 0 10px; font-size: clamp(24px, 2.6vw, 30px); }
.home-sample-intro p { margin: 0 0 10px; max-width: 46ch; color: var(--sub); line-height: 1.65; }
.home-sample-intro .home-sample-source { font-size: 13px; color: var(--muted); }
.home-sample-task { margin: 0; }
.sample-prompt { margin: 0 0 6px; font-family: var(--font-serif); font-size: 21px; line-height: 1.45; }
.sample-answer-row { display: flex; align-items: center; gap: 12px; }
.sample-answer-row input { max-width: 200px; font-variant-numeric: tabular-nums; }
.sample-unit { color: var(--sub); }
.sample-choices { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; border: 0; }
.sample-choice { display: flex; gap: 10px; align-items: center; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 15px; font-weight: 500; color: var(--ink); cursor: pointer; }
.sample-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.sample-feedback { margin-top: 18px; }
.sample-feedback:empty { margin-top: 0; }
.sample-feedback p { margin: 0 0 10px; max-width: 64ch; line-height: 1.65; }
.sample-feedback .sample-verdict { font-weight: 700; color: var(--warn); }
.sample-feedback .sample-verdict.is-right { color: var(--ok); }
.sample-example { padding-inline-start: 14px; border-inline-start: 2px solid var(--line); color: var(--sub); }
.sample-head { margin: 16px 0 6px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
html[dir="rtl"] .sample-head { letter-spacing: 0; }
.sample-steps, .sample-mistakes { margin: 0; padding-inline-start: 22px; line-height: 1.65; }
.sample-feedback .sample-anchor { margin-top: 14px; font-family: var(--font-serif); font-size: 17px; }

@media (max-width: 860px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); }
  .home-hero-side:empty { display: none; }
  .home-sample { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* The sign-in side panel over the owner's photo: deep red on top, so the
   words keep their contrast whatever the picture (Branding & images →
   Sign-in page, side panel; 1200 × 1600 px, portrait). */
.auth-aside.has-photo {
  background-image:
    linear-gradient(180deg, rgb(94 20 20 / .74) 0%, rgb(60 14 15 / .84) 45%, rgb(27 11 12 / .95) 100%),
    var(--auth-photo);
  background-size: cover; background-position: center;
}
/* Below 880px the panel is a short band above the form. Show the upper middle
   of the portrait, where the picture's subject is meant to be, rather than
   the plain lower half the centre would give. */
@media (max-width: 880px) {
  .auth-aside.has-photo { background-position: center 24%; }
}

/* ── Notebook ─────────────────────────────────────────────────────────────────
   Two columns under a heavy rule, as a journal sets them: the writing desk,
   and the notes. No boxes around notes — a ruled line between them, the
   place each belongs to in small capitals, the title in the book serif.
   On a phone the desk sits above the notes. */
body[data-route="notes"] main { max-width: 1200px; }
.nb-head .sub { max-width: 68ch; }
.nb-layout { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 48px; align-items: start; }
.nb-compose { position: sticky; top: 84px; padding-top: 14px; border-top: 2px solid var(--ink); scroll-margin-top: 90px; }
.nb-compose h2, .nb-shelf-head h2 { font-size: 20px; margin: 0; }
.nb-compose label:first-of-type { margin-top: 10px; }
.nb-compose textarea { min-height: 160px; resize: vertical; line-height: 1.55; }
.nb-link { display: grid; grid-template-columns: minmax(0, 1fr); }
.nb-link .field { min-width: 0; }
.nb-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.nb-compose-actions { margin-top: 16px; }
.nb-compose #nStatus { margin: 10px 0 0; font-size: 13px; }
.nb-compose #nStatus:empty { display: none; }

.nb-shelf { min-width: 0; padding-top: 14px; border-top: 2px solid var(--ink); }
.nb-shelf-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.nb-shelf-head h2:focus { outline: none; }
.nb-tools { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .9fr); gap: 12px; }
.nb-tools label { margin-top: 8px; }
.nb-views { display: inline-flex; margin: 14px 0 0; border: 1px solid var(--line); border-radius: var(--shape-button); padding: 3px; gap: 3px; background: var(--soft); }
.nb-views button { border-color: transparent; background: transparent; min-height: 38px; padding: 6px 16px; }
.nb-views button[aria-pressed="true"] { background: var(--card); border-color: var(--line); color: var(--ink); font-weight: 700; }
.nb-list-status { min-height: 1.4em; margin: 8px 0 4px; font-size: 13px; color: var(--sub); }
.nb-empty { margin: 0; padding: 26px 0; color: var(--muted); border-top: 1px solid var(--line); }
.nb-foot { margin-top: 20px; }

.nb-group + .nb-group { margin-top: 26px; }
.nb-group-head { margin: 0 0 2px; font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
html[dir="rtl"] .nb-group-head { letter-spacing: 0; }
.nb-notes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.note { padding: 20px 0 16px; border-bottom: 1px solid var(--line); }
.note-place { display: inline; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-text); text-align: start; overflow-wrap: anywhere; }
button.note-place { padding: 0; min-height: 0; text-decoration: none; }
button.note-place:hover { text-decoration: underline; text-underline-offset: 3px; }
html[dir="rtl"] .note-place { letter-spacing: 0; text-transform: none; }
.note-place.is-loose { color: var(--muted); }
.note-place-sep { color: var(--muted); font-weight: 400; }
.note-title { font-family: var(--font-serif); font-size: 21px; font-weight: 600; line-height: 1.3; margin: 6px 0 8px; overflow-wrap: anywhere; }
.note-body { margin: 0; max-width: 70ch; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.note.is-open .note-body { display: block; -webkit-line-clamp: unset; overflow: visible; }
.note-more { margin-top: 6px; font-size: 13px; }
.note-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin-top: 12px; }
.note-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 12.5px; color: var(--muted); }
.note-tags { color: var(--sub); }
.note-actions { display: flex; align-items: center; gap: 6px; }
.note-actions > button, .note-menu > summary { min-height: 36px; padding: 6px 14px; font-size: 13px; }
.note-actions .note-del { color: var(--danger); }

/* "More": a small disclosure menu of the less frequent actions. */
.note-menu { position: relative; }
.note-menu > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-weight: 600;
  border: 1px solid transparent; border-radius: var(--shape-button); color: var(--sub); transition: background-color var(--mo-fast), border-color var(--mo-fast); }
.note-menu > summary::-webkit-details-marker { display: none; }
.note-menu > summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.note-menu > summary:hover, .note-menu[open] > summary { background: var(--soft); border-color: var(--line); color: var(--ink); }
.note-menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.note-menu-list { position: absolute; inset-inline-end: 0; top: calc(100% + 4px); z-index: 6; display: grid; min-width: 190px; padding: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--shape-button); box-shadow: var(--shadow-2); }
.note-menu-list button { justify-content: flex-start; text-align: start; width: 100%; min-height: 40px; border-color: transparent; background: transparent; font-size: 13.5px; }
.note-menu-list button:hover { background: var(--soft); }
.note-menu-list .note-del { color: var(--danger); border-top: 1px solid var(--line); border-radius: 0 0 4px 4px; margin-top: 2px; }

@media (max-width: 880px) {
  .nb-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .nb-compose { position: static; }
}
@media (max-width: 600px) {
  .nb-tools { grid-template-columns: minmax(0, 1fr); }
  .note-actions > button, .note-menu > summary { min-height: 44px; }
  .note-menu-list button { min-height: 44px; }
}

/* ── Course editor bar ────────────────────────────────────────────────────
   However long the course, the way back, where the draft stands and the one
   next step (save, send for review, publish) stay at the bottom of the
   screen. Everything less frequent sits under More. */
.editor-bar { position: sticky; bottom: 0; z-index: 15; display: flex; align-items: center; gap: 10px;
  margin: 28px 0 0; padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-bottom: 0;
  border-radius: 8px 8px 0 0; box-shadow: 0 -12px 28px -20px rgba(10, 12, 16, .45); }
.editor-bar-back { flex: none; min-height: 44px; gap: 6px; }
.editor-bar-info { flex: 1 1 auto; min-width: 0; padding-inline: 4px; }
.editor-bar-title { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; font-size: 14.5px; font-weight: 650; color: var(--ink); }
.editor-bar-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-bar-title .pill { flex: none; }
.editor-bar-status { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--sub);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Unsaved work is marked with a brand dot as well as words. */
.editor-bar.is-unsaved .editor-bar-status::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-inline-end: 6px;
  border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.editor-jump { flex: 0 1 210px; width: auto; min-width: 0; }
.editor-more > summary { min-height: 44px; padding: 8px 14px; color: var(--ink); border-color: var(--line); }
.editor-more .note-menu-list { top: auto; bottom: calc(100% + 8px); min-width: 230px; z-index: 16; }
.editor-bar > .primary { flex: none; min-height: 44px; }
#courseEditor .card, #courseEditor .chapter-edit, #courseEditor #validationIssues, #editorExtra { scroll-margin-top: 92px; }
/* Admin → Courses: the open Settings says so, in the brand colour but not
   red-filled, which stays for the one next step (D75). */
[data-cs-open][aria-expanded="true"] { border-color: var(--accent); color: var(--accent-text); background: var(--accent-tint); }
/* A heading focused after "Go to" is a reading position, not a control. */
#courseEditor h2[tabindex="-1"]:focus, #courseEditor h3[tabindex="-1"]:focus { outline: none; }
/* The course image changes at once, apart from the draft: folded away. */
.editor-image > summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-height: 44px; cursor: pointer;
  font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--ink); }
.editor-image > summary .muted { font-family: var(--font-body); font-size: 13px; font-weight: 500; }
.editor-image[open] > summary { margin-bottom: 8px; }
.editor-image #courseImageSettings > h3 { display: none; }

@media (max-width: 720px) {
  .editor-bar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .editor-bar-info { order: -1; flex-basis: 100%; padding-inline: 0; }
  .editor-jump { flex: 1 1 0; }
  .editor-bar > .primary { flex: 1 1 auto; }
}

/* ── Narration (D77): what is voiced, what it costs, and listening ──────── */
/* The same heading as the other editor cards (.editor-image > summary). */
.narr h2 { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--ink); margin: 0; }
.narr-summary { font-size: 15px; }
.narr-table { display: grid; margin: 14px 0; border-top: 1px solid var(--line); }
.narr-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: 12px;
  align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.narr-head { font-size: 12.5px; font-weight: 650; color: var(--sub); text-transform: none; }
.narr-row [role="cell"]:first-child { font-weight: 600; color: var(--ink); }
.narr-failed { color: var(--danger); font-weight: 600; }
.narr-actions { margin: 8px 0; }
.narr-confirm { margin: 10px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); }
.narr-confirm p { margin: 0 0 10px; }
.narr-listen { margin: 6px 0; border-bottom: 1px solid var(--line); }
.narr-listen > summary { min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; }
.narr-lesson-title { margin: 10px 0 4px; font-weight: 600; }
.narr-lesson ol { margin: 0 0 8px; padding-inline-start: 22px; }
.narr-lesson li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 40px; }
.narr-play { min-height: 34px; padding: 4px 12px; font-size: 13px; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .narr-row { grid-template-columns: minmax(0, 1fr) auto; }
  .narr-head { display: none; }
  .narr-row [role="cell"]:nth-child(3) { grid-column: 1 / -1; color: var(--sub); }
}

/* ── Admin → Courses (D79): one row per course, one button, a More menu ── */
.cs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cs-head h2 { margin: 0; display: flex; align-items: center; gap: 10px; }
.cs-count { font: 650 12.5px/1 var(--font-body); color: var(--sub); background: var(--soft); border-radius: 999px; padding: 4px 9px; }
.cs-list { display: grid; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.cs-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 16px 18px; border-top: 1px solid var(--line); }
.cs-item:first-child { border-top: 0; }
.cs-main { min-width: 0; }
.cs-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cs-title h3 { margin: 0; font-size: 16px; line-height: 1.35; }
.cs-code { flex: none; padding: 3px 8px; font: 700 12.5px/1.2 var(--font-mono); letter-spacing: .02em; color: var(--accent-text); background: var(--accent-tint); border-radius: 6px; }
.cs-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 8px 0 0; font-size: 13px; color: var(--sub); }
.cs-facts .pill { margin: 0; }
.cs-where { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.cs-where .cs-summary { margin: 0; }
.cs-note { color: var(--muted); font-size: 13px; }
.cs-actions { display: flex; align-items: center; gap: 8px; }
.cs-actions > button { min-height: 40px; }
.cs-more > summary { min-height: 40px; }
.cs-item > .cs-box, .cs-item > .cs-versions { grid-column: 1 / -1; }
.cs-item > .cs-box { margin-top: 12px; }
.cs-version-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.cs-version-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; background: var(--soft); border-radius: 8px; font-size: 14px; }
.cs-version-list li button { margin-inline-start: auto; min-height: 36px; padding: 6px 14px; }
.cs-foot { margin: 14px 2px 0; font-size: 13px; color: var(--muted); }
.cs-link { display: inline; min-height: 0; padding: 0; border: 0; background: none; color: var(--accent-text); font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }
.cs-link:hover { background: none; color: var(--ink); }
#courseLifecycle:not(:empty), #courseDocumentSharing:not(:empty), #courseDeletion:not(:empty), #courseRollback:not(:empty), #courseCreate:not(:empty) { margin-bottom: 14px; }
@media (max-width: 640px) {
  .cs-item { grid-template-columns: 1fr; padding: 14px; }
  .cs-actions { justify-content: flex-start; margin-top: 8px; }
  .cs-actions > button { flex: 1 1 auto; }
}

/* The admin sections: one underlined strip, as the course tabs, never two rows of boxes. */
.admin-tabs { flex-wrap: nowrap; gap: 2px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 0; margin-bottom: 22px; }
.admin-tabs > button { flex: none; min-height: 44px; padding: 10px 14px; margin-bottom: -1px; color: var(--sub); background: none;
  border: 0; border-bottom: 3px solid transparent; border-radius: 0; font-size: 14px; font-weight: 600; }
.admin-tabs > button:hover { color: var(--ink); background: var(--soft); }
.admin-tabs > button[aria-current="true"] { color: var(--ink); border-color: transparent; border-bottom-color: var(--accent); }
.admin-tabs > button:focus-visible { outline-offset: -3px; }

/* Admin → People (D82): one row per person, the role beside the name. */
.ppl + .ppl { margin-block-start: 16px; }
.ppl-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.8fr) auto; gap: 12px; align-items: end; margin-block: 14px 4px; }
.ppl-form label { display: block; margin-block-end: 6px; font-size: 13px; font-weight: 600; color: var(--sub); }
.ppl-form input, .ppl-form select { width: 100%; }
.ppl-link { margin-block-start: 12px; }
.ppl-link p { margin: 0 0 10px; }
.ppl-copy { display: flex; gap: 8px; }
.ppl-copy input { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.ppl-copy button { flex: none; white-space: nowrap; }
.ppl-list { list-style: none; margin: 8px 0 0; padding: 0; }
.ppl-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 6px 16px; align-items: center; padding-block: 12px; border-block-start: 1px solid var(--line); }
.ppl-who { display: flex; flex-direction: column; min-width: 0; }
.ppl-who span { overflow-wrap: anywhere; font-size: 13px; }
.ppl-role select { min-height: 40px; }
.ppl-expired { color: var(--accent-text); font-weight: 600; font-size: 13px; }
@media (max-width: 640px) {
  .ppl-form { grid-template-columns: 1fr; }
  .ppl-item { grid-template-columns: 1fr; }
  .ppl-copy { flex-direction: column; }
}