/* Louis Academy (/academy/): course list, course page, lesson layout, quiz, certificate.
   Built on the site's tokens (01-tokens.css) and hub.css. docs/HUB.md.

   LESSON CONTRACT (for course authors): a lesson template is a body fragment rendered inside
   <article class="acad-body">. Use plain HTML plus these classes:
     .acad-figure > svg.acad-svg + figcaption     a drawing (inline SVG, see the f-* classes)
     .acad-note / .acad-note--warn                a tip / a "never do this" box (.acad-note__title)
     .acad-scroll > table.acad-table              a table that scrolls sideways on phones
     .acad-steps                                  an ordered list with big step numbers
     .acad-key                                    "Remember" box at the end of the lesson
     .acad-widget[data-widget="name"]             an interactive part, set up by the course's
                                                  course.js (hubq + Hub.page); give it useful
                                                  content without JavaScript too
     .acad-chip (+ .is-on / .is-right / .is-wrong / .is-found), .acad-live (role=status),
     .acad-widget__bar, .acad-hotspot              widget building blocks
   SVG parts: f-line, f-thin, f-dash, f-soft, f-paper, f-ink, f-accent, f-accent-line, f-flame,
   f-flame-soft, f-text, f-text-s. Drawings take currentColor (ink-2) and the site tokens. */

/* ---------- Course list and course page ---------------------------------------------------- */
.acad-courses { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--col-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .acad-courses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.acad-course-card { display: flex; }
.acad-course-card > a { flex: 1; display: grid; align-content: start; gap: var(--s-3); padding: var(--s-6); border-radius: var(--radius-l); background: var(--field); color: var(--ink); text-decoration: none; transition: background var(--dur) var(--ease); }
.acad-course-card > a:hover { background: var(--accent-soft); }
.acad-course-card__aud { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--grey-text); }
.acad-course-card__title { font-size: var(--t-m); line-height: var(--lh-m); font-weight: 500; }
.acad-course-card__summary { font-size: var(--t-s); color: var(--ink-2); }
.acad-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--t-s); color: var(--grey-text); font-variant-numeric: tabular-nums; }
.acad-progress { display: grid; gap: var(--s-2); font-size: var(--t-s); color: var(--ink-2); font-variant-numeric: tabular-nums; }

.acad-course { display: grid; gap: var(--s-7); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 64rem) { .acad-course { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-8); } }
.acad-course__side { display: grid; gap: var(--s-4); padding: clamp(20px, 3vw, 32px); border-radius: var(--radius-l); background: var(--field); }
@media (min-width: 64rem) { .acad-course__side { position: sticky; top: calc(var(--header-h) + var(--s-5)); } }
.acad-big { font-size: var(--t-xl); line-height: var(--lh-xl); letter-spacing: var(--track-xl); font-weight: 500; font-variant-numeric: tabular-nums; }

.acad-lessons { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: lesson; }
.acad-lessons > li { counter-increment: lesson; border-bottom: 1px solid var(--rule); }
.acad-lessons > li:first-child { border-top: 1px solid var(--rule); }
.acad-lessons a { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: var(--s-4); align-items: start; padding-block: var(--s-5); color: var(--ink); text-decoration: none; }
.acad-lessons a::before { content: counter(lesson, decimal-leading-zero); font-size: var(--t-s); color: var(--grey-text); padding-top: 3px; font-variant-numeric: tabular-nums; }
.acad-lessons a:hover .acad-lessons__title { color: var(--accent-ink); }
.acad-lessons__title { display: block; font-size: var(--t-m); line-height: var(--lh-m); font-weight: 500; transition: color var(--dur) var(--ease); }
.acad-lessons__summary { display: block; font-size: var(--t-s); color: var(--grey-text); margin-top: var(--s-1); }
.acad-lessons__state { font-size: var(--t-s); color: var(--grey-text); white-space: nowrap; padding-top: 3px; font-variant-numeric: tabular-nums; }

/* Done tick: a small filled circle with a check (accent: the one thing that matters). */
.acad-tick { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--rule-strong); color: transparent; flex: none; }
.acad-tick svg { width: 12px; height: 12px; }
.acad-tick.is-done { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.acad-tick.is-retry { border-color: var(--grey); border-style: dashed; }

/* ---------- Lesson layout: course nav on the left, reading column, quiz ---------------------- */
.acad-lesson { display: grid; gap: var(--s-7); grid-template-columns: minmax(0, 1fr); align-items: start; padding-block: var(--s-6) var(--row-y); }
@media (min-width: 64rem) { .acad-lesson { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s-8); } }
.acad-nav { display: grid; gap: var(--s-4); font-size: var(--t-s); order: 2; padding-top: var(--s-5); border-top: 1px solid var(--rule); }
@media (min-width: 64rem) { .acad-nav { order: 0; padding-top: 0; border-top: 0; position: sticky; top: calc(var(--header-h) + var(--s-5)); } }
.acad-nav__course { color: var(--ink-2); text-decoration: none; font-weight: 500; }
.acad-nav__course:hover { color: var(--accent-ink); }
.acad-nav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.acad-nav li a { display: flex; gap: var(--s-3); align-items: flex-start; padding: 8px 10px; border-radius: var(--radius); color: var(--ink-2); text-decoration: none; line-height: var(--lh-s); }
.acad-nav li a:hover { background: var(--field); color: var(--ink); }
.acad-nav li a[aria-current="page"] { background: var(--field); color: var(--ink); font-weight: 500; }

.acad-main { display: grid; gap: var(--s-7); min-width: 0; max-width: 46rem; }
.acad-head { display: grid; gap: var(--s-3); }
.acad-head__eyebrow { font-size: var(--t-s); color: var(--grey-text); font-variant-numeric: tabular-nums; }
.acad-head h1 { font-size: var(--t-hero); line-height: var(--lh-hero); letter-spacing: var(--track-hero); font-weight: 500; }
.acad-head .hub-meter { max-width: 20rem; margin-top: var(--s-2); }

/* ---------- Lesson body (the course author's fragment) -------------------------------------- */
.acad-body { display: grid; gap: var(--s-5); font-size: var(--t-read); line-height: var(--lh-read); color: #2b2b2b; min-width: 0; }
.acad-body > h2 { font-size: var(--t-l); line-height: var(--lh-head); letter-spacing: var(--track-head); color: var(--ink); margin-top: var(--s-5); }
.acad-body > h3 { font-size: var(--t-m); line-height: var(--lh-m); color: var(--ink); margin-top: var(--s-3); }
.acad-body ul, .acad-body ol { margin: 0; padding-inline-start: 1.3em; display: grid; gap: var(--s-2); }
.acad-body a:not(.btn) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.acad-body a:not(.btn):hover { color: var(--accent-ink); }
.acad-body strong { color: var(--ink); }
.acad-lede { font-size: var(--t-lead); color: var(--ink-2); }

.acad-figure { display: grid; gap: var(--s-3); margin: var(--s-2) 0; }
.acad-figure figcaption { font-size: var(--t-s); color: var(--grey-text); line-height: var(--lh-s); }
.acad-svg { width: 100%; height: auto; color: var(--ink-2); overflow: visible; }
.acad-svg .f-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.acad-svg .f-thin { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.acad-svg .f-dash { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 4 5; stroke-linecap: round; }
.acad-svg .f-soft { fill: var(--field); }
.acad-svg .f-paper { fill: var(--paper); }
.acad-svg .f-rule { fill: var(--rule); }
.acad-svg .f-ink { fill: currentColor; }
.acad-svg .f-accent { fill: var(--accent); }
.acad-svg .f-accent-soft { fill: var(--accent-soft); }
.acad-svg .f-accent-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.acad-svg .f-flame { fill: var(--danger); }
.acad-svg .f-flame-soft { fill: #fdf1ef; }
.acad-svg .f-text { font: 500 13px var(--font); fill: var(--ink-2); letter-spacing: 0.01em; }
.acad-svg .f-text-s { font: 400 11px var(--font); fill: var(--grey-text); }

.acad-note { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-5); border-inline-start: 3px solid var(--accent); background: var(--accent-soft); border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); font-size: var(--t-body); line-height: var(--lh-body); }
.acad-note--warn { border-inline-start-color: var(--danger); background: #fdf1ef; }
.acad-note__title { font-weight: 500; color: var(--ink); }

.acad-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.acad-table { width: 100%; min-width: 30rem; font-size: var(--t-s); line-height: var(--lh-s); border-collapse: collapse; }
.acad-table th, .acad-table td { text-align: start; vertical-align: top; padding-block: 10px; padding-inline: 0 12px; border-bottom: 1px solid var(--rule); }
.acad-table thead th { font-weight: 500; color: var(--grey-text); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-caps); border-bottom-color: var(--rule-strong); }
.acad-table td:first-child { color: var(--ink); font-weight: 500; }

.acad-steps { list-style: none; padding: 0 !important; counter-reset: step; display: grid; gap: var(--s-4) !important; }
.acad-steps > li { counter-increment: step; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--s-3); }
.acad-steps > li::before { content: counter(step); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--field); font-size: var(--t-s); font-weight: 500; color: var(--ink); }

.acad-key { display: grid; gap: var(--s-3); padding: var(--s-5) var(--s-6); border-radius: var(--radius-l); border: 1px solid var(--rule); }
.acad-key > h2, .acad-key > h3 { font-size: var(--t-xs) !important; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--grey-text); margin: 0 !important; font-weight: 500; }

/* ---------- Widget building blocks ---------------------------------------------------------- */
.acad-widget { display: grid; gap: var(--s-4); padding: clamp(16px, 3vw, 28px); border-radius: var(--radius-l); background: var(--field); font-size: var(--t-body); line-height: var(--lh-body); }
.acad-widget__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.acad-widget__hint { font-size: var(--t-s); color: var(--grey-text); }
.acad-live { min-height: 1.5em; font-size: var(--t-body); color: var(--ink); }
.acad-live:empty { min-height: 0; }
.acad-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--paper); color: var(--ink-2); font-size: var(--t-s); line-height: 1.3; text-align: start; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.acad-chip:hover { border-color: var(--grey-text); }
.acad-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.acad-chip.is-on, .acad-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.acad-chip.is-right { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.acad-chip.is-wrong { border-color: var(--danger); background: #fdf1ef; color: var(--ink); }
.acad-chip.is-found { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.acad-hotspot { cursor: pointer; }
.acad-hotspot circle.acad-hotspot__ring { fill: var(--paper); stroke: var(--accent); stroke-width: 2; transition: fill var(--dur) var(--ease); }
.acad-hotspot text { font: 500 12px var(--font); fill: var(--accent-ink); pointer-events: none; }
.acad-hotspot:hover circle.acad-hotspot__ring, .acad-hotspot:focus-visible circle.acad-hotspot__ring, .acad-hotspot.is-on circle.acad-hotspot__ring { fill: var(--accent); }
.acad-hotspot:hover text, .acad-hotspot:focus-visible text, .acad-hotspot.is-on text { fill: var(--on-accent); }
.acad-hotspot:focus { outline: none; }
.acad-hotspot:focus-visible circle.acad-hotspot__ring { stroke: var(--ink); stroke-width: 3; }

/* ---------- Quiz ------------------------------------------------------------------------------ */
.acad-quiz { display: grid; gap: var(--s-5); padding-top: var(--s-6); border-top: 1px solid var(--rule); }
.acad-quiz__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.acad-q { display: grid; gap: var(--s-3); margin: 0; padding: 0 0 var(--s-5); border: 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.acad-q legend { font-size: var(--t-m); line-height: var(--lh-m); font-weight: 500; padding: 0; margin-bottom: var(--s-3); }
.acad-q legend span { color: var(--grey-text); font-weight: 400; margin-inline-end: var(--s-2); font-variant-numeric: tabular-nums; }
.acad-q__options { display: grid; gap: var(--s-2); }
.acad-opt { position: relative; display: flex; }
.acad-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.acad-opt span { flex: 1; display: flex; align-items: center; gap: var(--s-3); min-height: 48px; padding: 10px 16px; border: 1px solid var(--rule-strong); border-radius: var(--radius); font-size: var(--t-body); color: var(--ink-2); background: var(--paper); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.acad-opt:hover span { border-color: var(--grey-text); }
.acad-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.acad-opt input:checked + span { border-color: var(--ink); color: var(--ink); }
.acad-opt.is-right span { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.acad-opt.is-wrong span { border-color: var(--danger); background: #fdf1ef; color: var(--ink); }
.acad-opt input:disabled { cursor: default; }
.acad-q__why { font-size: var(--t-s); color: var(--ink-2); line-height: var(--lh-s); }
.acad-q__why summary { cursor: pointer; color: var(--grey-text); }
.acad-q__feedback { font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-2); }
.acad-q__feedback strong { color: var(--ink); }
.acad-quiz.is-live .acad-q__why { display: none; }

.acad-done { display: grid; gap: var(--s-4); padding: clamp(20px, 3vw, 32px); border-radius: var(--radius-l); background: var(--field); }
.acad-done__score { font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: 500; font-variant-numeric: tabular-nums; }
.acad-done__score em { font-style: normal; color: var(--accent-ink); }
.acad-done .hub-save__row { align-items: flex-end; }

.acad-pager { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.acad-pager a { display: grid; gap: 2px; color: var(--ink); text-decoration: none; font-size: var(--t-body); }
.acad-pager a small { color: var(--grey-text); }
.acad-pager a:hover { color: var(--accent-ink); }
.acad-pager__next { text-align: end; grid-column: 2; }

/* ---------- Certificate (/academy/certificates/<code>/) -------------------------------------- */
.acad-cert-page { padding-block: var(--s-6) var(--row-y); display: grid; gap: var(--s-5); justify-items: center; }
.acad-cert-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
.acad-cert { width: 100%; max-width: 64rem; aspect-ratio: 297 / 210; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(24px, 5vw, 64px); border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--paper); position: relative; container-type: inline-size; }
.acad-cert::before { content: ""; position: absolute; inset: clamp(8px, 1.4vw, 16px); border: 1px solid var(--rule); pointer-events: none; }
.acad-cert__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); }
.acad-cert__brand img { height: clamp(28px, 4cqi, 44px); width: auto; }
.acad-cert__academy { font-size: clamp(10px, 1.3cqi, 14px); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--grey-text); text-align: end; }
.acad-cert__body { display: grid; align-content: center; justify-items: center; text-align: center; gap: clamp(6px, 1.4cqi, 16px); }
.acad-cert__kind { font-size: clamp(11px, 1.5cqi, 15px); text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent-ink); }
.acad-cert__this { font-size: clamp(12px, 1.6cqi, 17px); color: var(--grey-text); }
.acad-cert__name { font-size: clamp(26px, 5.4cqi, 58px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; color: var(--ink); text-wrap: balance; }
.acad-cert__rule { width: clamp(60px, 10cqi, 120px); height: 2px; background: var(--accent); border: 0; margin: clamp(4px, 1cqi, 10px) 0; }
.acad-cert__course { font-size: clamp(15px, 2.6cqi, 28px); line-height: 1.2; font-weight: 500; color: var(--ink); text-wrap: balance; max-width: 30em; }
.acad-cert__detail { font-size: clamp(11px, 1.4cqi, 15px); color: var(--ink-2); max-width: 46em; }
.acad-cert__foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); align-items: end; font-size: clamp(10px, 1.25cqi, 13px); color: var(--grey-text); }
.acad-cert__foot strong { display: block; color: var(--ink); font-size: clamp(12px, 1.5cqi, 16px); font-variant-numeric: tabular-nums; }
.acad-cert__foot > div:nth-child(2) { text-align: center; }
.acad-cert__foot > div:last-child { text-align: end; }
.acad-cert-note { max-width: 46rem; font-size: var(--t-s); color: var(--grey-text); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .acad-course-card > a, .acad-lessons__title, .acad-chip, .acad-opt span, .acad-hotspot circle.acad-hotspot__ring { transition: none; }
}

@media print {
  @page { size: A4 landscape; margin: 0; }
  .acad-nav, .acad-pager, .acad-quiz, .acad-cert-actions, .acad-cert-note, .crumbs, .flashes, .flash { display: none !important; }
  body.site { background: #fff; }
  .acad-cert-page { padding: 0; display: block; }
  .acad-cert { width: 297mm; height: 210mm; max-width: none; aspect-ratio: auto; border: 0; border-radius: 0; padding: 22mm 24mm; page-break-inside: avoid; break-inside: avoid; }
  .acad-cert::before { inset: 9mm; border-color: #cfcfcb; }
  .acad-cert__rule, .acad-tick.is-done { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .acad-print-hide { display: none !important; }
}

/* ---------- Arabic (right to left), docs/ARABIC.md ------------------------------------------
   Layout uses logical properties above, so grids, notes, tables and the pager mirror by
   themselves; progress meters (.hub-meter) fill from the right. Arabic letters must join:
   no letter-spacing or capitals. Drawings are not mirrored, and their labels keep the
   anchoring they were drawn with. */
[dir="rtl"] .acad-course-card__aud, [dir="rtl"] .acad-table thead th, [dir="rtl"] .acad-key > h2, [dir="rtl"] .acad-key > h3,
[dir="rtl"] .acad-cert__academy, [dir="rtl"] .acad-cert__kind, [dir="rtl"] .acad-head h1, [dir="rtl"] .acad-body > h2,
[dir="rtl"] .acad-big, [dir="rtl"] .acad-cert__name, [dir="rtl"] .acad-svg .f-text { letter-spacing: 0; text-transform: none; }
[dir="rtl"] .acad-body svg text, [dir="rtl"] .acad-svg text { direction: ltr; }
[dir="rtl"] .acad-body, [dir="rtl"] .acad-quiz { line-height: 1.8; }