/* Pakima learning site: student pages.
   Built on tokens.css (copied from the Pakima design system). Mobile first: every rule below
   is written for a 375px phone, and min-width queries widen it. Tap targets are at least 48px.
   Readers are parents with low tech literacy: one clear action per screen, large text. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  margin: 0 0 .4em;
  text-wrap: balance;
}
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 19px; }
p { margin: 0 0 1em; text-wrap: pretty; }
img { max-width: 100%; display: block; }
a { color: var(--maroon-700); text-decoration: underline; text-decoration-color: var(--maroon-300); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--gold-500); }
:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }
::selection { background: var(--maroon-700); color: var(--cream-text); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--ink-soft); }
.small { font-size: 15px; }
.break { overflow-wrap: anywhere; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px;
  font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.2;
  border-radius: var(--radius-pill); border: var(--border-w) solid transparent;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: transform var(--t-quick) var(--ease-out), box-shadow var(--t-quick) var(--ease-out), background var(--t-quick) ease, color var(--t-quick) ease, border-color var(--t-quick) ease;
}
.btn--primary {
  background: linear-gradient(180deg, var(--yes-400), var(--yes-600));
  color: #fff;
  box-shadow: 0 4px 0 var(--yes-700), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--primary:hover { background: linear-gradient(180deg, var(--gold-200), var(--gold-400)); color: var(--maroon-900); box-shadow: 0 6px 0 var(--gold-600); transform: translateY(-2px); }
.btn--primary:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--yes-700); }
.btn--ghost { background: var(--card); color: var(--maroon-700); border-color: var(--maroon-300); }
.btn--ghost:hover { border-color: var(--maroon-700); background: var(--maroon-50); }
.btn--quiet { background: transparent; color: var(--maroon-700); min-height: 48px; padding: 0 12px; font-size: 16px; }
.btn--quiet:hover { background: var(--maroon-50); }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 16px; }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn.is-disabled { background: #E7DFDA; color: #8F8078; box-shadow: inset 0 0 0 1.5px #D8CDC6; border-color: transparent; cursor: not-allowed; transform: none; }
a.btn { color: inherit; }
a.btn--primary { color: #fff; }
a.btn--primary:hover { color: var(--maroon-900); }
a.btn--ghost, a.btn--quiet { color: var(--maroon-700); }

/* ---------- Top bar (signed-in pages) ---------- */
.topbar { background: var(--maroon-700); color: var(--cream-text); position: sticky; top: 0; z-index: 20; }
.topbar__inner { max-width: 1200px; margin: 0 auto; padding: 0 16px; height: 60px; display: flex; align-items: center; gap: 12px; }
.topbar__logo { display: block; flex: none; }
.topbar__logo img { height: 26px; width: auto; }
/* The student menu .unav (Tú, UAT 11/11/2026; src/js/ui.js wireUserNav). From 960 px, the public header's switch
   (css/public.css): the destinations are links on the bar, and the avatar button opens a panel of account matters
   only. Below 960 px: one menu button opens the same panel, which then lists the destinations first. Both buttons
   control the panel. In the classroom bar the back link is the destination, so its .unav has no .unav__bar. */
.unav { position: relative; flex: none; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.topbar .unav { flex: 1; }
.unav__bar { display: none; list-style: none; margin: 0; padding: 0; gap: 4px; }
.unav__link {
  display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: var(--radius-pill);
  color: var(--cream-text); font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap;
}
.unav__link:hover { background: rgba(255,255,255,.1); color: var(--cream-text); }
.unav__link[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--gold-400); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.unav__account, .unav__toggle {
  position: relative; display: grid; place-items: center; min-width: 48px; min-height: 48px; padding: 0 6px; margin-left: auto;
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--cream-text); cursor: pointer;
}
.unav__account { display: none; }
.unav__toggle svg { display: block; width: 26px; height: 26px; }
.unav__toggle .ic-close, .unav__toggle[aria-expanded="true"] .ic-open { display: none; }
.unav__toggle[aria-expanded="true"] .ic-close { display: block; }
@media (hover: hover) and (pointer: fine) { .unav__account:hover, .unav__toggle:hover { background: rgba(255,255,255,.1); } }
.unav__panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: max-content; min-width: 260px; max-width: calc(100vw - 16px);
  max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--card); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-float); padding: 8px;
}
.unav__list { list-style: none; margin: 0; padding: 0; }
.unav__list--nav { border-bottom: 2px solid var(--line); padding-bottom: 6px; margin-bottom: 6px; }
.unav__who { margin: 0 0 6px; padding: 8px 12px 10px; border-bottom: 2px solid var(--line); line-height: 1.45; }
.unav__who b { display: block; font-size: 16px; }
.unav__who span { display: block; font-size: 14px; color: var(--ink-soft); overflow-wrap: anywhere; }
.unav__list a, .unav__list button {
  display: flex; align-items: center; width: 100%; min-height: 48px; padding: 0 12px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--ink); font: inherit; font-size: 16px; text-decoration: none; text-align: left; cursor: pointer;
}
.unav__list a:hover, .unav__list button:hover { background: var(--maroon-50); }
.unav__list a[aria-current="page"] { background: var(--gold-100); box-shadow: inset 4px 0 0 var(--maroon-700); font-weight: 600; }
@media (min-width: 960px) {
  .unav__bar { display: flex; }
  .unav__account { display: grid; }
  .unav__toggle, .unav__list--nav { display: none; }
}
/* The change-password page shows the bar only outside the forced flow; the card below keeps one screen in height. */
.topbar:not([hidden]) + .auth { min-height: calc(100vh - 60px); min-height: calc(100dvh - 60px); }
/* The classroom player's controls and watermark sit in the page's root stacking context at z-index 2147482500 to
   2147483000 (components.css, watermark.js), so the iPhone pseudo fullscreen covers the bar. While the menu is open
   its bar goes above them, or the controls and the watermark would paint over the panel (measured at 390 px). */
.classbar.is-menu-open, .topbar.is-menu-open { z-index: 2147483001; }
.avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-400); color: var(--maroon-900);
  font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1;
}

/* ---------- Page containers ---------- */
.page { max-width: 1120px; margin: 0 auto; padding: 24px 16px 64px; }
.page--narrow { max-width: 680px; }
.page-head { margin-bottom: 20px; }
.page-head p { color: var(--ink-soft); margin: 0; }

/* ---------- Auth and status screens: a centred paper card ---------- */
.auth { min-height: 100vh; min-height: 100dvh; padding: 28px 16px 48px; display: flex; flex-direction: column; align-items: center; }
.auth__logo { display: block; margin: 4px auto 22px; }
.auth__logo img { height: 34px; width: auto; }
.card {
  background: var(--paper); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sticker); border: 2px solid var(--line);
  padding: 26px 20px; width: 100%;
}
.auth .card { max-width: 440px; }
.auth .card--wide { max-width: 560px; }
.card h1 { font-size: 27px; }
.card .lead { color: var(--ink-soft); margin-bottom: 22px; }
.steps { margin: 0 0 22px; padding-left: 22px; color: var(--ink-soft); }
.steps li + li { margin-top: 6px; }
.card__foot { margin-top: 20px; padding-top: 18px; border-top: 2px solid var(--line); text-align: center; color: var(--ink-soft); font-size: 16px; }
.card__foot p { margin: 0 0 6px; }
.auth__help { margin-top: 20px; text-align: center; font-size: 15px; color: var(--ink-soft); max-width: 440px; }
.stack > * + * { margin-top: 12px; }
.big-glyph { font-family: var(--font-display); font-weight: 800; color: var(--gold-500); font-size: 64px; line-height: 1; margin-bottom: 8px; }

/* ---------- Forms ---------- */
.field { margin-bottom: 18px; }
.field label, .field .label { display: block; font-weight: 600; font-size: 16px; margin-bottom: 6px; }
.input {
  width: 100%; min-height: 54px; padding: 12px 16px;
  font: inherit; font-size: 17px; color: var(--ink);
  background: var(--card); border: var(--border-w) solid var(--line-strong); border-radius: 14px;
  transition: border-color var(--t-quick) ease, box-shadow var(--t-quick) ease;
}
.input:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 4px rgba(215,180,106,.28); }
.input[readonly] { background: var(--maroon-50); color: var(--ink-soft); }
.input[aria-invalid="true"] { border-color: var(--maroon-500); }
textarea.input { min-height: 120px; resize: vertical; line-height: 1.55; }
.pw { position: relative; }
.pw .input { padding-right: 60px; }
/* Show/hide password: an eye icon, eye-off while the password shows (aria-pressed); its tooltip is with the
   icon-only buttons further down. Target 48 x 46 px. */
.pw__toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 48px; height: 46px; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--maroon-700); cursor: pointer;
}
.pw__toggle svg { width: 24px; height: 24px; display: block; }
.pw__toggle .ic-eye-off, .pw__toggle[aria-pressed="true"] .ic-eye { display: none; }
.pw__toggle[aria-pressed="true"] .ic-eye-off { display: block; }
.pw__toggle:hover { background: var(--maroon-50); }
.hint { font-size: 14.5px; color: var(--ink-soft); margin-top: 6px; }
.field-error { font-size: 15px; color: var(--maroon-700); font-weight: 600; margin-top: 6px; }
.field-error::before { content: "✕ "; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------- Notices (no red anywhere: "no" states use maroon) ---------- */
.notice { border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px; font-size: 16px; border: 2px solid; }
.notice p { margin: 0; }
.notice p + p { margin-top: 6px; }
.notice--info { background: var(--gold-100); border-color: var(--gold-300); }
.notice--ok { background: var(--yes-100); border-color: #BFE3CC; }
.notice--ok strong { color: var(--yes-700); }
.notice--no { background: var(--maroon-50); border-color: var(--maroon-200); }

/* ---------- Chips, progress ---------- */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.chip--done { background: var(--yes-100); color: var(--yes-700); }
.chip--gold { background: var(--gold-100); color: var(--gold-700); }
.chip--soft { background: var(--maroon-50); color: var(--maroon-700); }
.progress { display: block; width: 100%; height: 10px; border: 0; border-radius: var(--radius-pill); background: var(--maroon-50); overflow: hidden; -webkit-appearance: none; appearance: none; color: var(--yes-500); }
.progress::-webkit-progress-bar { background: var(--maroon-50); border-radius: var(--radius-pill); }
.progress::-webkit-progress-value { background: var(--yes-500); border-radius: var(--radius-pill); }
.progress::-moz-progress-bar { background: var(--yes-500); border-radius: var(--radius-pill); }
.progress-line { display: flex; justify-content: space-between; font-size: 15px; color: var(--ink-soft); margin-bottom: 6px; }
.progress-line b { color: var(--ink); }

/* ---------- Segmented tabs ---------- */
.seg { display: flex; gap: 4px; padding: 4px; background: var(--card); border: 2px solid var(--line); border-radius: var(--radius-pill); margin-bottom: 20px; }
.seg button {
  flex: 1; min-height: 46px; border: 0; border-radius: var(--radius-pill); background: transparent;
  font: inherit; font-weight: 600; font-size: 15.5px; color: var(--ink-soft); cursor: pointer; padding: 0 8px; white-space: nowrap;
}
.seg button[aria-selected="true"] { background: var(--maroon-700); color: var(--cream-text); }

/* ---------- My courses ---------- */
.course-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
.course-card { background: var(--card); border-radius: 22px; overflow: hidden; border: 2px solid var(--line); box-shadow: var(--shadow-sticker); display: flex; flex-direction: column; }
/* 125:88 is the ratio of every course cover Hoola made (1495×1052, 500×352; measured on all 9 on 14/11/2026); at 16:9
   object-fit cut ~20% off the height, which dropped the "Cùng cô Trần Tú Giang" line from the bottom of each cover. */
.course-card__cover { aspect-ratio: 125 / 88; background: var(--maroon-800); position: relative; overflow: hidden; }
.course-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.cover-type {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 85% 10%, var(--maroon-600), var(--maroon-900));
}
.cover-type img { width: 42%; height: auto; opacity: .92; }
.course-card__body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.course-card__body h2 { font-size: 21px; margin: 0; }
.course-card__last { font-size: 15px; color: var(--ink-soft); margin: 0; }
.course-card__last b { color: var(--ink); font-weight: 600; }
.course-card__body .btn { margin-top: auto; }
.empty { text-align: center; padding: 36px 20px; background: var(--paper); border: 2px dashed var(--line-strong); border-radius: var(--radius-lg); }
.empty p { color: var(--ink-soft); margin: 0 auto 16px; max-width: 34ch; }

/* ---------- Devices ---------- */
.device-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.device { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); padding: 16px; }
.device--current { border-color: var(--yes-400); }
.device__name { font-family: var(--font-display); font-weight: 700; font-size: 19px; margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.device__meta { font-size: 15px; color: var(--ink-soft); margin: 0 0 12px; }
.device__meta span { display: block; }
.device .btn { width: 100%; }

/* ---------- Classroom ---------- */
.classbar { background: var(--maroon-700); color: var(--cream-text); position: sticky; top: 0; z-index: 20; }
.classbar__inner { max-width: 1400px; margin: 0 auto; padding: 0 8px 0 4px; height: 60px; display: flex; align-items: center; gap: 6px; }
.classbar__back { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: var(--radius-pill); color: var(--cream-text); text-decoration: none; font-weight: 600; font-size: 16px; white-space: nowrap; flex: none; }
.classbar__back:hover { background: rgba(255,255,255,.1); color: var(--cream-text); }
.classbar__title { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.classbar__pct { flex: none; font-size: 14px; font-weight: 600; color: var(--gold-200); padding-right: 6px; }

/* One grid for every lesson kind (Tú, UAT round 1, uat-06): head, then the lesson body in one slot (the media
   frame, or the reading card of a text lesson), then prev/next. A video's description comes after prev/next so a
   long one never pushes the buttons off the first screen. */
.classroom {
  max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "stage" "nav" "desc" "toggle" "side" "extra";
}
.classroom[data-lesson-type="text"] { grid-template-areas: "head" "desc" "nav" "toggle" "side" "extra"; }
.lesson-head { grid-area: head; padding: 14px 16px 12px; min-width: 0; }
.stage { grid-area: stage; position: relative; width: 100%; aspect-ratio: 16 / 9; background: radial-gradient(80% 80% at 50% 40%, var(--maroon-900), #1B0309); overflow: hidden; }
.stage > #player, .stage > #pdf, .stage > #embed, .stage > #soon { position: absolute; inset: 0; }
.lesson-kicker { font-size: 13px; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--gold-600); font-weight: 700; margin: 0 0 2px; }
.lesson-title { font-size: 24px; margin: 0 0 8px; }
.lesson-status { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 15px; color: var(--ink-soft); text-wrap: balance; }
.lesson-status:empty { display: none; }
.lesson-head .notice { margin: 12px 0 0; }
.lesson-nav { grid-area: nav; display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; padding: 14px 16px 6px; }
.lesson-nav .btn { width: 100%; padding: 0 12px; }
.lesson-nav #mark-done { grid-column: 1 / -1; order: -1; }
.lesson-hint { grid-column: 1 / -1; order: 3; margin: 0; font-size: 15px; color: var(--ink-soft); text-wrap: balance; }
.lesson-desc { grid-area: desc; margin: 8px 16px 8px; overflow-wrap: anywhere; min-width: 0; }
.lesson-desc p { text-wrap: pretty; }
.lesson-desc > :last-child { margin-bottom: 0; }
/* A text lesson's body is the lesson itself: a reading card in the media slot, long-form type (19px/1.75). */
.classroom[data-lesson-type="text"] .lesson-desc {
  margin: 0 16px; padding: 20px 18px; background: var(--paper); border: 2px solid var(--line);
  border-radius: var(--radius); font-size: 18px; line-height: 1.75;
}
/* A PDF needs more height than 16:9 on a phone to read a page; a wide screen keeps the video footprint. */
.classroom[data-lesson-type="pdf"] .stage { aspect-ratio: 1 / 1; max-height: 62vh; background: #EFE4DF; }

.outline-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: calc(100% - 32px); margin: 8px 16px 0;
  min-height: 56px; padding: 0 18px; border-radius: var(--radius); border: 2px solid var(--line-strong);
  background: var(--card); color: var(--ink); font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; text-align: left;
}
.outline-toggle__count { color: var(--ink-soft); font-weight: 500; font-size: 14.5px; display: block; }
.outline-toggle__arrow { font-size: 20px; color: var(--maroon-700); transition: transform var(--t-move) var(--ease-spring); }
.outline-toggle[aria-expanded="true"] .outline-toggle__arrow { transform: rotate(180deg); }

.outline-toggle { grid-area: toggle; }
/* Phone: an open list keeps a window of lessons and scrolls inside, so the open lesson shows in view under the toggle
   without moving the page away from the player (Tú, UAT 11/11/2026, classroom.js revealCurrent). The 8 px under the
   toggle is a margin, not padding: padding scrolls away with the list, and the scrolled cards then ran flush into the
   toggle's bottom edge. */
.outline { grid-area: side; margin-top: 8px; padding: 0 16px; max-height: 70vh; overflow-y: auto; }
.outline__head { display: none; }
.chapter { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.chapter > summary {
  list-style: none; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; justify-content: space-between;
  padding: 14px 16px; font-weight: 700; font-size: 16px; line-height: 1.4;
}
.chapter > summary::-webkit-details-marker { display: none; }
.chapter > summary::after { content: "↓"; color: var(--maroon-700); flex: none; transition: transform var(--t-move) var(--ease-spring); }
.chapter[open] > summary::after { transform: rotate(180deg); }
.chapter__count { display: block; font-weight: 500; font-size: 14px; color: var(--ink-soft); margin-top: 2px; }
.lessons { list-style: none; margin: 0; padding: 0 0 6px; }
.lesson-link { display: flex; gap: 12px; align-items: flex-start; padding: 10px 16px; min-height: 56px; color: var(--ink); text-decoration: none; border-top: 2px solid var(--line); }
.lesson-link:hover { background: var(--maroon-50); }
.lesson-link[aria-current="page"] { background: var(--gold-100); box-shadow: inset 4px 0 0 var(--maroon-700); }
.lesson-link__dot {
  flex: none; width: 28px; height: 28px; border-radius: 50%; margin-top: 1px;
  display: grid; place-items: center; font-size: 13px; font-weight: 700; line-height: 1;
  border: 2px solid var(--line-strong); color: var(--ink-soft); background: var(--card);
}
.lesson-link.is-done .lesson-link__dot { background: var(--yes-500); border-color: var(--yes-500); color: #fff; }
.lesson-link[aria-current="page"] .lesson-link__dot { border-color: var(--maroon-700); color: var(--maroon-700); }
/* The open lesson once learned: a maroon disc with a white tick (Tú, UAT 11/11/2026); learned elsewhere stays green,
   the open lesson not learned yet keeps its number in a maroon ring. */
.lesson-link.is-done[aria-current="page"] .lesson-link__dot { background: var(--maroon-700); border-color: var(--maroon-700); color: #fff; }
.lesson-link__text { min-width: 0; font-size: 15.5px; line-height: 1.45; }
.lesson-link__meta { display: block; font-size: 13.5px; color: var(--ink-soft); margin-top: 2px; }

.lesson-extra { grid-area: extra; padding: 20px 16px 48px; min-width: 0; }
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--card); border: 2px solid var(--line); margin-bottom: 16px; }
.tabs button {
  flex: 1; min-height: 46px; border: 0; background: transparent; border-radius: var(--radius-pill);
  font: inherit; font-weight: 600; font-size: 15.5px; color: var(--ink-soft); cursor: pointer; padding: 0 6px; white-space: nowrap;
}
.tabs button[aria-selected="true"] { background: var(--maroon-700); color: var(--cream-text); }

.doc-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.doc { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.doc__badge { width: 44px; height: 52px; border-radius: 8px; background: var(--maroon-50); border: 2px solid var(--maroon-200); color: var(--maroon-700); display: grid; place-items: center; font-weight: 800; font-size: 12px; font-family: var(--font-display); }
.doc__name { font-weight: 600; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.doc__meta { font-size: 14px; color: var(--ink-soft); }
.doc__actions { display: flex; gap: 8px; }

.composer { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 16px; }
.composer label { display: block; font-weight: 600; font-size: 16px; margin-bottom: 8px; }
.composer__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.composer__row .hint { margin: 0; flex: 1 1 160px; }

.note-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.note { background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.note__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--ink-soft); margin-bottom: 6px; }
.note__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.note__actions { display: flex; gap: 4px; margin-top: 6px; margin-left: -12px; }

.thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.comment { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
.comment .avatar { width: 40px; height: 40px; background: var(--maroon-100); color: var(--maroon-800); }
.comment--staff > .avatar { background: var(--maroon-700); color: var(--gold-200); }
.comment__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; color: var(--ink-soft); }
.comment__head b { color: var(--ink); font-size: 15.5px; }
.comment__text { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment__actions { margin-left: -12px; }
.replies { list-style: none; margin: 10px 0 0; padding: 0 0 0 12px; border-left: 3px solid var(--line); display: grid; gap: 12px; }
.reply-box { margin-top: 8px; }
.reply-box .composer { margin-bottom: 0; }

.protect-note { font-size: 14px; color: var(--ink-soft); margin: 4px 0 0; }

/* Icon-only buttons (view, download, password eye, account menu): the name is aria-label, the tooltip is data-tip,
   shown on keyboard focus, and on hover only on a device that hovers: a tap on a touch screen leaves :hover set and
   the word would stay on screen (Tú 11/11/2026: no visible text with a universal icon). */
.btn--icon { width: 48px; min-width: 48px; min-height: 48px; padding: 0; position: relative; }
.btn--icon .ic-close, .btn--icon[aria-expanded="true"] .ic-open { display: none; }
.btn--icon[aria-expanded="true"] .ic-close { display: block; }
.btn--icon svg { width: 22px; height: 22px; display: block; }
.btn--icon[data-tip]::after, .pw__toggle[data-tip]::after, .unav [data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); right: 0; padding: 4px 8px; border-radius: 6px;
  background: var(--ink); color: var(--cream-text); font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 1.3;
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--t-quick) ease;
}
/* Beside the button, to its left, inside the field for the eye (the field label and links sit above, the hint below).
   Under the button for the top bar's account and menu buttons: to their left are the bar's links and the course %. */
.pw__toggle[data-tip]::after { bottom: auto; top: 50%; right: calc(100% + 6px); transform: translateY(-50%); }
.unav [data-tip]::after { bottom: auto; top: calc(100% + 6px); }
.btn--icon[data-tip]:focus-visible::after, .pw__toggle[data-tip]:focus-visible::after, .unav [data-tip]:focus-visible::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .btn--icon[data-tip]:hover::after, .pw__toggle[data-tip]:hover::after, .unav [data-tip]:hover::after { opacity: 1; }
}
.unav [data-tip][aria-expanded="true"]::after { opacity: 0; }

/* Short copy (1 to 3 sentences): one sentence per line and balanced wrapping (Tú, UAT round 1). */
.line { display: block; }
.short, .stage-soon__lead, .stage-soon__title, .hint, .notice p { text-wrap: balance; }

/* ---------- Footer ---------- */
.foot { text-align: center; font-size: 14px; color: var(--ink-faint); padding: 24px 16px 32px; }

/* ---------- Wider screens ---------- */
@media (min-width: 640px) {
  h1 { font-size: 34px; }
  .card { padding: 34px 32px; }
  .card h1 { font-size: 30px; }
  .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-head, .lesson-nav, .lesson-extra { padding-left: 24px; padding-right: 24px; }
  .lesson-desc, .classroom[data-lesson-type="text"] .lesson-desc { margin-left: 24px; margin-right: 24px; }
  .lesson-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
  .lesson-nav .btn, .lesson-nav #mark-done { width: auto; padding: 0 24px; order: 0; }
  .lesson-nav #next { order: 2; }
  .lesson-hint { flex: 1 0 100%; }
  .device { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
  .device__meta { margin-bottom: 0; }
  .device .btn { width: auto; flex: none; }
}
@media (min-width: 960px) {
  .course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Wide screens (reference: Skillshare's class page, chosen by Tú): the player keeps 16:9 and is at most 54% of the
   viewport height, so the lesson title, prev/next and the start of the tabs fit in the first screen. The lesson list
   starts beside the player, sticks 16 px under the class bar once the page scrolls, and at every scroll position runs
   down to 16 px above the bottom of the window (Tú, UAT 11/11/2026), scrolling inside: classroom.js fitOutline sets
   --outline-fit as the page scrolls; height 0 keeps the list out of the row sizes, and it never runs past the rows
   beside it (min with 100% of its grid area). The page's last 48 px are the lesson tabs' 32 px plus the grid's 16 px,
   so at the page end the list too stops 16 px above the window's bottom. */
@media (min-width: 1024px) {
  .classroom {
    padding: 0 24px 16px; column-gap: 24px;
    grid-template-columns: minmax(0, calc(54vh * 16 / 9)) minmax(320px, 1fr);
    grid-template-areas: "head head" "stage side" "nav side" "desc side" "extra side";
  }
  .classroom[data-lesson-type="text"] { grid-template-areas: "head head" "desc side" "nav ." "extra ."; }
  .lesson-head { padding: 18px 0 14px; }
  .lesson-head .lesson-title { font-size: 28px; }
  .stage, .classroom[data-lesson-type="pdf"] .stage { aspect-ratio: 16 / 9; max-height: none; border-radius: var(--radius); }
  .lesson-nav { padding: 14px 0 6px; }
  .lesson-desc, .classroom[data-lesson-type="text"] .lesson-desc { margin-left: 0; margin-right: 0; }
  .classroom[data-lesson-type="text"] .lesson-desc { padding: 28px 32px; font-size: 19px; }
  .lesson-extra { padding: 20px 0 32px; }
  .outline-toggle { display: none; }
  .outline {
    display: block !important; position: sticky; top: 76px; align-self: start; margin-top: 0; /* the 60 px class bar + 16 */
    height: 0; min-height: min(100%, var(--outline-fit, 100%)); max-height: none; overflow-y: auto; overscroll-behavior: contain;
    padding: 0 12px 12px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--paper);
  }
  /* A text lesson has no fixed-height frame: the list stays in view beside the reading card instead. */
  .classroom[data-lesson-type="text"] .outline { height: auto; min-height: 0; max-height: calc(100vh - 92px); position: sticky; top: 76px; align-self: start; }
  .outline__head { display: block; position: sticky; top: 0; z-index: 1; background: var(--paper); padding: 14px 4px 10px; margin: 0 0 4px; }
  .outline__head h2 { font-size: 19px; margin: 0 0 6px; }
}

/* ---------- Learning site wiring (API pages) ---------- */
.impersonation { background: var(--gold-200); color: var(--ink); font-weight: 600; font-size: 15px; text-align: center; padding: 10px 16px; position: sticky; top: 0; z-index: 30; }
.captcha { margin: 0 0 14px; min-height: 65px; }
.classroom[data-lesson-type="text"] .stage { display: none; }
.stage-soon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; color: var(--gold-200); }
.stage-soon__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: #fff; }
.stage-soon__lead { margin: 0; max-width: 34em; font-size: 15.5px; line-height: 1.5; }
/* A pending video also offers "Liên hệ Pakima": the frame keeps 16:9 where the message and the icons fit and grows
   to fit them on a narrow phone (its top, where every lesson body starts, does not move). */
.stage--soon { display: grid; overflow: visible; }
.stage--soon > #soon { position: static; }
.stage-soon .support { max-width: none; margin: 6px 0 0; padding: 0; }
.stage-soon .cicons { justify-content: center; }
.lesson-link.is-soon .lesson-link__text > span:first-child { color: var(--ink-soft); }
.lesson-link.is-soon .lesson-link__dot { border-style: dashed; }
.badge-staff { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--maroon-700); color: var(--gold-200); font-size: 12.5px; font-weight: 700; line-height: 1.5; }
.lesson-desc:empty { display: none; }
.doc__viewer { grid-column: 1 / -1; margin-top: 10px; position: relative; }
/* Each media box is its own stacking layer: the player bar, the PDF bar and the watermark keep their very high
   z-index inside it and no longer paint over the sticky class bar when the page scrolls (measured 11/11/2026 at
   390 px in Chromium and on iPhone: the player bar covered the whole class bar). Pseudo fullscreen is unchanged: the
   box itself turns fixed with its own z-index, which isolation does not lower (classroom-fixes.spec.js). */
#player, #pdf, #embed, .doc__viewer { isolation: isolate; }
.note__edit textarea { min-height: 96px; }
.comment__deleted { color: var(--ink-soft); font-style: italic; }
.is-readonly #note-form, .is-readonly #comment-form, .is-readonly .js-reply, .is-readonly .js-edit,
.is-readonly .js-del, .is-readonly #mark-done { display: none !important; }

/* "Liên hệ Pakima": three large tap targets (src/js/ui.js initSupportLinks) */
.support { max-width: 440px; margin: 4px auto 24px; padding: 0 16px; }
.support__label { text-align: center; font-weight: 700; margin: 0 0 8px; }
.support__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.support__link { min-height: 52px; flex-direction: column; justify-content: center; line-height: 1.3; }
.support__sub { display: block; font-size: 14px; font-weight: 500; color: var(--ink-soft); overflow-wrap: anywhere; }