/* Learner screens: Home, Learning, programme page, Library, table of contents (learner-screens agent).
   Working and composite tokens only, logical properties only, frames not shadows, radius <= 14 px.
   Dark blocks (the Home panel and the programme top block) are data-theme="dark" scopes, so their tokens are the
   dark ones in both themes (B-44). Symmetry: cards and tiles of one row share a height, their bottom block is pinned. */

/* =================================================================== shared bits */
.meta__item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; font-size: var(--fs-sm); color: var(--text-muted); }
.meta__item .i { flex: none; }
.meta__item > span { min-width: 0; }

.cover { position: relative; display: block; overflow: hidden; background: var(--ink-900); }
.cover__art { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.cover--plain { display: grid; place-items: center; }
.cover__mark { color: var(--logo-mark); opacity: .5; }
.cover-lock {
  position: absolute; inset-block-end: 10px; inset-inline-start: 10px; display: grid; place-items: center; inline-size: 28px; block-size: 28px;
  border-radius: var(--radius-sm); background: var(--ink-950); color: var(--paper-50);
}

/* =================================================================== Learning: programme cards */
.edu__tabs { margin-block-end: var(--space-6); }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gutter); }
.pcard {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--frame), var(--shadow-card);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.pcard:hover { background: var(--surface-hover); }
.pcard .card__link:focus-visible::after { outline-offset: -2px; }
.pcard__cover { flex: none; aspect-ratio: 16 / 7; }
.pcard__media { position: relative; flex: none; }
/* The card's inset frame is painted under its children, so the opaque cover hides it (a dark cover on the dark page
   leaves the card open at the top). The media box draws the frame again above the cover: top and both sides, with
   the card's top corners. */
.pcard__media::after, .tile__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-start-start-radius: var(--radius-card); border-start-end-radius: var(--radius-card);
  box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line), inset 0 1px 0 var(--line);
}
.pcard__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: var(--space-3); padding: var(--space-5) var(--space-6) var(--space-6); }
.pcard__tags { display: flex; flex-wrap: nowrap; gap: var(--space-2); min-block-size: 24px; overflow: hidden; }
.pcard__tags .badge { flex: 0 1 auto; min-width: 0; }
.pcard__title { min-block-size: calc(2 * var(--lh-snug) * 1em); }
.pcard__text { min-block-size: calc(3 * var(--lh-body) * 1em); }
.pcard__meta { display: flex; align-items: center; gap: var(--space-4); min-block-size: 20px; min-width: 0; overflow: hidden; }
.pcard__foot { display: flex; flex-direction: column; justify-content: flex-end; margin-block-start: auto; block-size: 46px; min-width: 0; }
.pcard__foot .lock-label { max-inline-size: 100%; }
/* A closed card's lock line stands where the open cards' "Progress" line stands (FT-063): below it, the room of the
   progress gap (--space-2) and the 6 px track, so its top lines up with "Progress" across the row. */
.pcard__foot > .lock-label { margin-block-end: calc(var(--space-2) + 6px); }
@media (max-width: 719px) { .pgrid { grid-template-columns: minmax(0, 1fr); } }

/* =================================================================== programme page */
.pg__back { display: inline-flex; margin-block-end: var(--space-5); }
.phero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); gap: var(--space-8); align-items: end;
  padding: var(--space-10); border-radius: var(--radius-card); background: var(--surface); color: var(--text); box-shadow: var(--frame);
}
.phero__main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.phero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.phero__title {
  max-inline-size: 24ch; margin: 0; font-family: var(--font-serif); font-size: var(--fs-h1); font-weight: var(--fw-display);
  letter-spacing: var(--ls-display); line-height: var(--lh-tight); text-wrap: balance; overflow-wrap: anywhere;
}
.phero__text { max-inline-size: 60ch; color: var(--text-2); }
.phero__dur { color: var(--text-muted); }
.phero__side { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.phero__side--lock { gap: var(--space-3); align-items: flex-start; }
.phero__lock { font-size: var(--fs-body); color: var(--text-2); }
.phero__lock .ell { white-space: normal; }
.phero__sub { color: var(--text-muted); font-size: var(--fs-sm); }
@media (max-width: 899px) { .phero { grid-template-columns: minmax(0, 1fr); padding: var(--space-6); gap: var(--space-5); } }

.pg__scale { margin-block-start: var(--space-6); }
.stages { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.stage-cell { display: flex; min-width: 0; }
.stage {
  display: flex; flex-direction: column; gap: var(--space-2); inline-size: 100%; min-block-size: 136px; min-width: 0; padding: var(--space-4);
  border: 0; border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--frame); color: var(--text);
  font: inherit; text-align: start; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.stage:hover { background: var(--surface-hover); }
.stage--current { box-shadow: var(--frame-brand-2); }
.stage.is-selected { box-shadow: var(--bar-accent), var(--frame); }
.stage--current.is-selected { box-shadow: var(--bar-accent), var(--frame-brand-2); }
.stage--locked { color: var(--text-muted); }
.stage__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-block-size: 32px; }
.stage__badge { display: grid; place-items: center; flex: none; min-inline-size: 32px; block-size: 32px; }
.stage__badge--passed { border-radius: var(--radius-round); background: var(--brand); color: var(--on-brand); }
.stage__badge--locked { color: var(--text-muted); }
.stage__no { font-family: var(--font-serif); font-size: 32px; font-weight: var(--fw-regular); letter-spacing: var(--ls-display); line-height: 1; font-variant-numeric: tabular-nums; }
.stage__pct { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); }
.stage__title { font-weight: var(--fw-semibold); color: inherit; }
.stage__dur { font-size: var(--fs-sm); color: var(--text-muted); }
.stage__here {
  display: flex; align-items: center; gap: 6px; margin-block-start: auto; min-block-size: 16px;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text);
}
@media (max-width: 1079px) { .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 359px) { .stages { grid-template-columns: minmax(0, 1fr); } .stage { min-block-size: 0; } }

.pg__blocks { margin-block-start: var(--space-8); }
.pg__lessons { margin-block-start: var(--space-5); }
.block-tab { display: inline-block; max-inline-size: 34ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: bottom; }
.block-tab .i { margin-inline-end: 6px; }
.pg__blocknote { margin-block-end: var(--space-4); }
.lessons { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }

.lrow {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--space-4);
  block-size: var(--row-lesson); padding-inline: var(--space-5); overflow: hidden;
  border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--frame);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.lrow::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 3px; background: var(--line); }
.lrow--available::before, .lrow--started::before { background: var(--brand); }
.lrow--passed::before { background: var(--line-strong); }
.lrow:not(.lrow--locked):hover { background: var(--surface-hover); }
.lrow--hint { cursor: pointer; }
.lrow__icon {
  display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: var(--radius-round);
  background: var(--surface-2); color: var(--text-2); box-shadow: var(--frame);
}
.lrow--locked .lrow__icon { color: var(--text-muted); }
.lrow--passed .lrow__icon { background: var(--brand); color: var(--on-brand); box-shadow: none; }
.lrow.is-current .lrow__icon { box-shadow: var(--frame-brand-2); }
.lrow__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lrow__title { font-size: var(--fs-h4); font-weight: var(--fw-semibold); color: var(--text); text-decoration: none; }
.lrow--locked .lrow__title { color: var(--text-2); }
a.lrow__title::after { content: ""; position: absolute; inset: 0; }
a.lrow__title:focus-visible { outline: none; }
a.lrow__title:focus-visible::after { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: inherit; }
.lrow__meta { display: flex; align-items: center; gap: var(--space-4); min-block-size: 20px; min-width: 0; overflow: hidden; }
.lrow__test { color: var(--text); }
.lrow__side { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-3); }
.lrow__side .badge { flex: none; }
@media (max-width: 639px) {
  .lrow { grid-template-columns: minmax(0, 1fr) auto; padding-inline: var(--space-4); }
  .lrow__icon { display: none; }
  .lrow__side { flex-direction: column; align-items: flex-end; gap: var(--space-2); }
  .lrow__go { inline-size: var(--icon-btn-sm); padding: 0; }
  .lrow__go .btn__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
.bdone {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
  margin-block-start: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-card);
  background: var(--brand-soft); color: var(--text);
}
.bdone__text { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-medium); }

/* =================================================================== Home */
.next {
  margin-block-end: var(--gutter); padding: var(--space-10); border-radius: var(--radius-card);
  background: var(--surface); color: var(--text); box-shadow: var(--frame);
}
.next__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); max-inline-size: 720px; }
.next__program { max-inline-size: 100%; color: var(--text-muted); font-size: var(--fs-body); }
.next__lesson { margin: 0; max-inline-size: 100%; font-size: var(--fs-h1); line-height: var(--lh-tight); text-wrap: balance; overflow-wrap: anywhere; }
.next__path { max-inline-size: 100%; color: var(--text-2); font-size: var(--fs-sm); }
.next__text { max-inline-size: 52ch; color: var(--text-2); }
.next__inner .progress { inline-size: min(100%, 420px); }
.next__actions { margin-block-start: var(--space-3); }
@media (max-width: 719px) { .next { padding: var(--space-6); } .next__actions .btn { inline-size: 100%; } }

.home__pending { margin-block-end: var(--space-5); }
.hrow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gutter); align-items: stretch; margin-block-end: var(--gutter); }
.hrow--single { grid-template-columns: minmax(0, 1fr); }
.hprog { gap: var(--space-5); }
.hprog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); }
.hprog__main { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.hprog__text { max-inline-size: 60ch; }
.hprog__fig { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); flex: none; text-align: end; }
.hprog__figlabel { font-size: var(--fs-sm); color: var(--text-muted); }
.hprog .card__foot { margin-block-start: 0; }
.hcounters { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: var(--space-4); min-width: 0; }
.hrow--single .hcounters { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; }
.hcounters .stat { block-size: 100%; justify-content: center; }
.stat-link { display: block; min-width: 0; border-radius: var(--radius-card); color: inherit; text-decoration: none; }
.stat-link:hover .stat { background: var(--surface-hover); }
.htiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.htile { gap: var(--space-2); }
.htile__icon { display: grid; place-items: center; inline-size: 44px; block-size: 44px; margin-block-end: var(--space-2); border-radius: var(--radius-control); background: var(--surface-2); color: var(--text); box-shadow: var(--frame); }
.htile__text { font-size: var(--fs-sm); }
@media (max-width: 1023px) { .hrow { grid-template-columns: minmax(0, 1fr); } .hcounters { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; } }
@media (max-width: 719px) {
  .hcounters { grid-template-columns: minmax(0, 1fr); }
  .htiles { grid-template-columns: minmax(0, 1fr); }
  .hprog__head { flex-direction: column; gap: var(--space-3); }
  .hprog__fig { align-items: flex-start; text-align: start; }
}

/* =================================================================== Library */
.lib__toggle { display: none; margin-block-end: var(--space-4); }
.lib { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: var(--gutter); align-items: start; }
.lib__rail { display: flex; flex-direction: column; gap: var(--space-5); position: sticky; inset-block-start: calc(var(--topbar-h) + var(--space-4)); min-width: 0; }
.lib__main { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.lib__group { display: flex; flex-direction: column; gap: var(--space-2); }
.lib__heading { margin: 0; }
.lib__count { font-size: var(--fs-sm); margin-block-end: var(--space-3); }
.topics { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.topic {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); inline-size: 100%; min-block-size: var(--row-nav);
  padding-inline: var(--space-3); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text-2); text-align: start;
}
.topic:hover { background: var(--surface-hover); color: var(--text); }
.topic.is-active { background: var(--brand-soft); color: var(--text); font-weight: var(--fw-semibold); }
.topic__label { flex: 1 1 auto; min-width: 0; }
.topic__count { flex: none; font-size: var(--fs-xs); color: var(--text-muted); }
.lib__results { min-width: 0; }

.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.tile {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--frame);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.tile:hover { background: var(--surface-hover); }
.tile .card__link:focus-visible::after { outline-offset: -2px; }
.tile__media { position: relative; flex: none; }
.tile__cover { aspect-ratio: 16 / 7; }
.tile__mark { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; display: grid; opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out); }
.tile:hover .tile__mark, .tile:focus-within .tile__mark { opacity: 1; }
@media (hover: none) { .tile:hover .tile__mark { opacity: 0; } }
.tile__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); }
.tile__kicker { display: flex; align-items: center; gap: var(--space-2); min-block-size: 24px; min-width: 0; }
.tile__kicker .eyebrow { flex: 1 1 auto; min-width: 0; }
.tile__kicker .badge { flex: none; }
.tile__title { min-block-size: calc(2 * var(--lh-snug) * 1em); }
.tile__text { min-block-size: calc(3 * var(--lh-body) * 1em); font-size: var(--fs-sm); }
.tile__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-start: auto; padding-block-start: var(--space-2); min-block-size: 32px; min-width: 0; }
.tile__foot .badge { flex: none; }
.tile__hit { position: absolute; inset: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.tile__hit:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
@media (max-width: 1079px) {
  .lib { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .lib__toggle { display: inline-flex; }
  .lib__rail { display: none; position: static; padding: var(--space-5); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--frame); }
  .lib__rail.is-open { display: flex; }
}
@media (max-width: 599px) { .tgrid { grid-template-columns: minmax(0, 1fr); } }

/* =================================================================== table of contents */
.toc { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: var(--gutter); align-items: start; }
.toc__rail { position: sticky; inset-block-start: calc(var(--topbar-h) + var(--space-4)); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.toc__railhead { margin: 0; }
.toc__navlist { display: flex; flex-direction: column; gap: 2px; max-block-size: calc(100dvh - var(--topbar-h) - 120px); margin: 0; padding: 0; list-style: none; overflow-y: auto; }
.toc__nav {
  display: flex; align-items: center; gap: var(--space-3); inline-size: 100%; min-block-size: var(--row-nav); padding-inline: var(--space-3);
  border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text-2); text-align: start;
}
.toc__nav:hover { background: var(--surface-hover); color: var(--text); }
.toc__nav.is-active { background: var(--brand-soft); color: var(--text); font-weight: var(--fw-semibold); }
.toc__nav:focus-visible { outline-offset: -2px; }
.toc__nav .ell { flex: 1 1 auto; }
/* Section numbers are neutral: red stays for the page-head bar and the kicker, so it never outnumbers the primary
   marks however many topics there are (FT-023, Design system §5). The active or hovered row's number takes the row's text. */
.toc__navno { flex: none; min-inline-size: 18px; color: var(--text-muted); font-weight: var(--fw-semibold); }
.toc__nav:hover .toc__navno, .toc__nav.is-active .toc__navno { color: inherit; }
.toc__main { min-width: 0; }
.tocsec { scroll-margin-block-start: calc(var(--topbar-h) + var(--space-4)); }
.tocsec + .tocsec { margin-block-start: var(--space-10); }
.tocsec__head { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; padding-block-end: var(--space-3); box-shadow: inset 0 -1px 0 var(--line); }
.tocsec__head .ell { flex: 1 1 auto; }
.tocsec__no { flex: none; color: var(--text-muted); font-family: var(--font-serif); font-weight: var(--fw-display); }
.tocsec__list { margin: 0; padding: 0; list-style: none; }
.trow { block-size: var(--row-toc); box-shadow: inset 0 -1px 0 var(--line-soft); }
.trow__hit {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) 24px; align-items: center; gap: var(--space-3); inline-size: 100%; block-size: 100%;
  padding-inline: var(--space-2); border: 0; background: transparent; color: inherit; font: inherit; text-align: start; text-decoration: none; cursor: pointer;
}
.trow__hit:hover { background: var(--surface-hover); }
.trow__hit:focus-visible { outline-offset: -2px; }
.trow__no { color: var(--text-muted); font-size: var(--fs-sm); text-align: center; }
.trow__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trow__title { font-weight: var(--fw-semibold); color: var(--text); }
.trow--locked .trow__title { color: var(--text-2); }
.trow__sub { font-size: var(--fs-sm); }
.trow__go { display: grid; place-items: center; color: var(--text-muted); }
@media (max-width: 1079px) {
  .toc { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .toc__rail { position: static; }
  .toc__navlist { flex-direction: row; flex-wrap: wrap; max-block-size: none; overflow: visible; gap: var(--space-2); }
  .toc__navlist li { min-width: 0; max-inline-size: 100%; }
  .toc__nav { inline-size: auto; max-inline-size: 100%; box-shadow: var(--frame-strong); }
}