/* Athenor Academy — app layer: restores hover affordances lost when converting the
   reference's runtime style-hover to static markup, plus shared widgets. */

/* ---- course sale price ---- */
:root {
  --athenor-sale: var(--color-accent);       /* on-sale accent — the brand purple #6A5BC2 */
  --athenor-sale-soft: var(--athenor-tint-2);
}
.athenor-price-was {
  text-decoration: line-through;
  color: var(--athenor-muted);
  font-weight: 400;
  font-size: 0.72em;
  margin-right: 0.4em;
}
.athenor-price-now { color: var(--athenor-sale); }
.athenor-sale-badge {
  display: inline-block;
  margin-left: 0.45em;
  padding: 0.22em 0.6em;
  border-radius: 999px;
  background: var(--athenor-sale);
  color: #fff;
  font-size: 0.56em;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: 0.16em;
  white-space: nowrap;
}
/* the large price of a course page: the regular price and the sale badge scale with it */
.athenor-price-was.athenor-price-was--lg { font-size: 0.62em; }
.athenor-sale-badge.athenor-sale-badge--lg { font-size: 0.5em; vertical-align: middle; }
/* corner ribbon on a card / hero image */
.athenor-sale-flag {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  padding: 7px 13px;
  border-radius: 9px;
  background: var(--athenor-sale);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(27, 28, 34, 0.2);
}
.athenor-sale-flag--right { left: auto; right: 14px; }

/* Horizontal-scroll tab bar with edge-fade affordance (Task 7.1 §5).
   The wrapper carries [data-can-left] / [data-can-right] (set by the page
   controller from scrollLeft); the fade on a side shows only while that side
   can still scroll. Purely additive over any background; honours reduced motion. */
.athenor-tabscroll { position: relative; }
.athenor-tabscroll > [role="group"] { -webkit-overflow-scrolling: touch; }
.athenor-tabscroll > [role="group"]::-webkit-scrollbar { height: 0; display: none; }
.athenor-tabscroll::before,
.athenor-tabscroll::after {
  content: ""; position: absolute; top: 0; bottom: 1px; width: clamp(24px, 8vw, 44px);
  pointer-events: none; z-index: 1; opacity: 0; transition: opacity .18s ease;
}
.athenor-tabscroll::before { left: 0; background: linear-gradient(to right, var(--color-bg) 20%, transparent); }
.athenor-tabscroll::after  { right: 0; background: linear-gradient(to left,  var(--color-bg) 20%, transparent); }
.athenor-tabscroll[data-can-left]::before  { opacity: 1; }
.athenor-tabscroll[data-can-right]::after  { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .athenor-tabscroll::before, .athenor-tabscroll::after { transition: none; }
}

.athenor-scrim { position: fixed; inset: 0; z-index: 60; background: var(--ath-color-scrim); }

/* ---- generic content hovers (approximate the reference style-hover) ---- */
main a:not(.btn):not([class]):hover { color: var(--color-accent-700); }

/* ---- toast ---- */
.athenor-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 200; max-width: calc(100vw - 40px);
  padding: 12px 18px; border-radius: 10px;
  background: var(--athenor-dark); color: #e9e9ed; box-shadow: var(--shadow-lg);
  font: 14px/1.4 var(--font-body); display: flex; align-items: center; gap: 14px;
  animation: athenor-fade-up .18s ease-out;
}
.athenor-toast__action {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 500;
  color: var(--color-accent-300); cursor: pointer; text-decoration: underline;
}

/* ---- keep the page from scrolling under fixed overlays ---- */
body.athenor-lock { overflow: hidden; }

/* ---- reduced motion already handled by athenor.css ---- */
[hidden] { display: none !important; }

/* ---- course player: lesson body content (sanitized HTML from Moodle) ---- */
.athenor-player-prose { font-size: 17px; line-height: 1.7; color: var(--athenor-ink-2); }
.athenor-player-prose > *:first-child { margin-top: 0; }
.athenor-player-prose > *:last-child { margin-bottom: 0; }
.athenor-player-prose p { margin: 0 0 20px; text-wrap: pretty; }
.athenor-player-prose ul, .athenor-player-prose ol { margin: 0 0 20px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.athenor-player-prose h2 { font-size: 25px; color: var(--color-text); margin: 34px 0 14px; letter-spacing: -0.01em; }
.athenor-player-prose h3 { font-size: 21px; color: var(--color-text); margin: 28px 0 12px; }
.athenor-player-prose h4 { font-size: 18px; color: var(--color-text); margin: 24px 0 10px; }
.athenor-player-prose strong, .athenor-player-prose b { font-weight: 600; color: var(--color-text); }
.athenor-player-prose a { color: var(--color-accent-700); }
.athenor-player-prose code { background: var(--athenor-surface-2); padding: 2px 6px; border-radius: 5px; font-size: 0.9em; }
.athenor-player-prose figure { margin: 0 0 24px; }
.athenor-player-prose figcaption { margin-top: 10px; font-size: 13px; color: var(--athenor-muted); }
.athenor-player-prose video, .athenor-player-prose iframe, .athenor-player-prose img { margin-bottom: 4px; }
.athenor-player-prose blockquote { margin: 0 0 24px; padding: 4px 0 4px 20px; border-left: 2px solid var(--color-accent); color: var(--athenor-ink-2); font-size: 16px; }
.athenor-player-prose blockquote.athenor-callout { border-left: 0; border-radius: 12px; background: var(--athenor-tint); padding: 16px 18px; font-size: 15px; }
.athenor-player-prose blockquote.athenor-callout strong { display: inline-block; margin-bottom: 2px; }
.athenor-player-prose table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15px; }
.athenor-player-prose th, .athenor-player-prose td { border: 1px solid var(--color-divider); padding: 8px 12px; text-align: left; }
.athenor-player-prose th { background: var(--athenor-surface-2); font-weight: 600; }

/* ---- course player: sidebar module disclosure animation ---- */
/* A collapsed module is visually zero-height, but its lesson buttons used to stay in the tab order (focus landed on invisible controls).
   visibility:hidden removes them from the tab order and the accessibility tree once the collapse has finished, and restores them at once on open. */
.athenor-player-lessons { overflow: hidden; transition: grid-template-rows .18s ease, visibility 0s linear .18s; display: grid; grid-template-rows: 0fr; visibility: hidden; }
.athenor-player-lessons.athenor-open { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.athenor-player-lessons > ol { min-height: 0; }
.athenor-player-chevron { transition: transform .18s ease; }

@keyframes athenor-fade-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }   /* uncovered, never faded: the panel holds readable text */
.athenor-player-panel-tab { animation: athenor-fade-in .12s ease-out; }

/* ---- course player: native SCORM host ----
   The package iframe + its runtime live in the persistent frameWrap (styled
   inline in player.js). These rules cover the SCO switcher rail and honour
   reduced-motion for the load spinner. */
[data-scorm-toc-bar] { scrollbar-width: thin; }
[data-scorm-toc] { white-space: nowrap; transition: border-color .15s ease, background .15s ease; }
@media (prefers-reduced-motion: reduce) {
  [data-frame-loading] span { animation-duration: 2.4s; }
}

/* ---- course player: natively-rendered Rise lessons ----
   Extracted from an uploaded Rise SCORM package (frontend/.../pages/rise.js).
   --rise-accent is the course's brand colour, set per-article; falls back to
   the platform accent. */
.athenor-rise { --rise-accent: var(--color-accent); font-size: 17px; line-height: 1.7; color: var(--athenor-ink-2); display: flex; flex-direction: column; gap: 26px; }
.athenor-rise > * { margin: 0; }
/* the lesson uses the column: its running text keeps the reading measure, images and interactive blocks the full width */
.athenor-rise > :is(.rise-text, .rise-statement, .rise-list, .rise-quote:not(.rise-quote-bg), .rise-lesson-intro, .rise-fallback) { max-width: 80ch; }
.athenor-rise :is(.rise-process, .rise-acc-body) .rise-p { max-width: 80ch; }
.athenor-rise .rise-h { font-weight: 600; font-size: 21px; color: var(--color-text); margin-bottom: 6px; letter-spacing: -0.01em; }
.athenor-rise .rise-h p { margin: 0; }
.athenor-rise .rise-p p { margin: 0 0 14px; text-wrap: pretty; }
.athenor-rise .rise-p > *:last-child { margin-bottom: 0; }
.athenor-rise .rise-p a { color: var(--color-accent-700); }
.athenor-rise .rise-lesson-intro { font-size: 16px; color: var(--athenor-muted); border-left: 2px solid var(--rise-accent); padding-left: 16px; }
.athenor-rise .rise-list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.athenor-rise .rise-list p { margin: 0; }
.athenor-rise .rise-list-check { list-style: none; padding-left: 0; }
.athenor-rise .rise-list-check li { position: relative; padding-left: 30px; }
.athenor-rise .rise-list-check li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--rise-accent); }

.athenor-rise .rise-statement { background: var(--athenor-tint); border-radius: 14px; padding: 22px 24px; font-size: 18px; }
.athenor-rise .rise-statement .rise-h { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-accent-700); }

.athenor-rise .rise-img { max-width: 100%; height: auto; border-radius: 12px; display: block; }
.athenor-rise .rise-video { width: 100%; border-radius: 12px; background: #000; display: block; }
.athenor-rise figure { display: flex; flex-direction: column; gap: 10px; }
.athenor-rise figcaption { font-size: 14px; color: var(--athenor-muted); }
.athenor-rise figcaption p { margin: 0; }
.athenor-rise .rise-image-overlay { position: relative; }
.athenor-rise .rise-image-overlay figcaption { position: absolute; inset: auto 0 0 0; padding: 20px; color: #fff; background: linear-gradient(transparent, rgba(15,15,20,.75)); border-radius: 0 0 12px 12px; font-size: clamp(20px, 3vw, 30px); font-weight: 600; }
.athenor-rise .rise-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.athenor-rise .rise-divider { border: 0; border-top: 1px solid var(--color-divider); margin: 4px 0; }

.athenor-rise .rise-quote { border-left: 3px solid var(--rise-accent); padding: 6px 0 6px 22px; font-size: 19px; }
.athenor-rise .rise-quote blockquote { margin: 0; font-style: italic; }
.athenor-rise .rise-quote figcaption { margin-top: 10px; font-style: normal; }
.athenor-rise .rise-quote-bg { border-left: 0; border-radius: 16px; padding: clamp(28px, 5vw, 52px); color: #fff; background-size: cover; background-position: center; }
.athenor-rise .rise-quote-bg figcaption { color: rgba(255,255,255,.85); }

/* flashcards */
.athenor-rise .rise-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.athenor-rise .rise-card { position: relative; display: grid; min-height: 180px; border: 0; padding: 0; background: transparent; cursor: pointer; font: inherit; perspective: 1200px; }
/* both faces share one cell: the card is as tall as its longer face, so a long back never scrolls */
.athenor-rise .rise-card-face { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 22px 22px 34px; border-radius: 14px; backface-visibility: hidden; transition: transform .5s; }
.athenor-rise .rise-card-front { background: var(--rise-accent); color: #fff; }
.athenor-rise .rise-card-back { background: var(--color-surface); border: 1px solid var(--color-divider); color: var(--color-text); transform: rotateY(180deg); font-size: 14px; line-height: 1.5; }
.athenor-rise .rise-card[aria-pressed="true"] .rise-card-front { transform: rotateY(180deg); }
.athenor-rise .rise-card[aria-pressed="true"] .rise-card-back { transform: rotateY(360deg); }
.athenor-rise .rise-card-text p { margin: 0; }
.athenor-rise .rise-card-front .rise-card-text { font-weight: 600; font-size: 17px; }
.athenor-rise .rise-card-media { max-height: 82px; width: auto; border-radius: 8px; }
.athenor-rise .rise-card-hint { position: absolute; bottom: 10px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }

/* accordion */
.athenor-rise .rise-accordion { display: flex; flex-direction: column; border: 1px solid var(--color-divider); border-radius: 12px; overflow: hidden; }
.athenor-rise .rise-acc-row + .rise-acc-row { border-top: 1px solid var(--color-divider); }
.athenor-rise .rise-acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; background: none; border: 0; font: inherit; font-weight: 600; text-align: left; color: var(--color-text); cursor: pointer; }
.athenor-rise .rise-acc-head svg { transition: transform .18s ease; flex: none; }
.athenor-rise .rise-acc-head[aria-expanded="true"] svg { transform: rotate(180deg); }
.athenor-rise .rise-acc-body { padding: 0 18px 18px; font-size: 15px; }
.athenor-rise .rise-acc-body .rise-p p:last-child { margin-bottom: 0; }

/* process / timeline */
.athenor-rise .rise-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: 18px; }
.athenor-rise .rise-steps li { position: relative; padding-left: 52px; }
.athenor-rise .rise-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--rise-accent); color: #fff; font-weight: 600; display: grid; place-items: center; }
.athenor-rise .rise-step-h { font-weight: 600; font-size: 17px; color: var(--color-text); margin-bottom: 6px; }
.athenor-rise .rise-timeline { display: flex; flex-direction: column; gap: 16px; border-left: 2px solid var(--color-divider); padding-left: 22px; }
.athenor-rise .rise-tl-date { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--athenor-muted); }

/* sorting */
.athenor-rise .rise-sort-hint { font-size: 13px; color: var(--athenor-muted); margin-bottom: 12px; }
.athenor-rise .rise-sort-piles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.athenor-rise .rise-sort-pile { border: 1px dashed var(--color-divider); border-radius: 12px; padding: 12px; min-height: 90px; }
.athenor-rise .rise-sort-pile h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--athenor-muted); }
.athenor-rise .rise-sort-drop { display: flex; flex-direction: column; gap: 8px; min-height: 24px; }
.athenor-rise .rise-sort-bank { display: flex; flex-wrap: wrap; gap: 8px; }
.athenor-rise .rise-sort-card { border: 1px solid var(--color-divider); background: var(--color-surface); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer; color: var(--color-text); text-align: left; }
.athenor-rise .rise-sort-drop .rise-sort-card { border-radius: 8px; width: 100%; }
.athenor-rise .rise-sort-card.is-right { border-color: var(--athenor-success); background: var(--athenor-success-soft); }
.athenor-rise .rise-sort-card.is-wrong { border-color: var(--athenor-warn); background: var(--athenor-warn-soft); }
.athenor-rise .rise-sort-actions { margin-top: 14px; display: flex; align-items: center; gap: 12px; }
.athenor-rise .rise-sort-result { font-size: 14px; color: var(--athenor-muted); }

/* knowledge checks + quiz */
.athenor-rise .rise-kc { background: var(--athenor-tint); border-radius: 14px; padding: 22px 24px; }
.athenor-rise .rise-kc-q { font-weight: 600; color: var(--color-text); margin-bottom: 14px; }
.athenor-rise .rise-kc-q p { margin: 0 0 6px; }
.athenor-rise .rise-kc-opts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.athenor-rise .rise-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--color-divider); border-radius: 10px; background: var(--color-surface); cursor: pointer; font-size: 15px; }
.athenor-rise .rise-opt input { margin-top: 3px; flex: none; accent-color: var(--rise-accent); }
.athenor-rise .rise-opt span p { margin: 0; }
.athenor-rise .rise-opt.is-correct { border-color: var(--athenor-success); background: var(--athenor-success-soft); }
.athenor-rise .rise-opt.is-picked-wrong { border-color: var(--athenor-warn); background: var(--athenor-warn-soft); }
.athenor-rise .rise-kc-fb { margin-top: 12px; font-size: 14px; color: var(--athenor-ink-2); border-left: 2px solid var(--rise-accent); padding-left: 14px; }
.athenor-rise .rise-kc-fb p { margin: 0 0 6px; }

.athenor-rise .rise-q-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.athenor-rise .rise-q { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 14px; padding: 22px 24px; }
.athenor-rise .rise-q-num { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--athenor-muted); margin-bottom: 10px; }
.athenor-rise .rise-q .rise-img { margin: 4px 0 14px; max-height: 240px; width: auto; }
.athenor-rise .rise-fill { max-width: 320px; }
.athenor-rise .rise-match { display: flex; flex-direction: column; gap: 10px; }
.athenor-rise .rise-match-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; }
.athenor-rise .rise-match-left { font-weight: 500; }
.athenor-rise .rise-quiz-foot { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.athenor-rise .rise-q-counter { font-size: 14px; color: var(--athenor-muted); }
.athenor-rise .rise-q-graded.is-correct { border-color: var(--athenor-success); }
.athenor-rise .rise-q-graded.is-wrong { border-color: var(--athenor-warn); }
.athenor-rise .rise-score { text-align: center; padding: 26px; border-radius: 16px; margin-bottom: 24px; background: var(--athenor-tint); }
.athenor-rise .rise-score.is-pass { background: var(--athenor-success-soft); }
.athenor-rise .rise-score.is-fail { background: var(--athenor-warn-soft); }
.athenor-rise .rise-score-pct { font-size: 42px; font-weight: 700; color: var(--color-text); }
.athenor-rise .rise-score-meta { font-size: 14px; color: var(--athenor-ink-2); }
.athenor-rise .rise-fallback { border: 1px dashed var(--color-divider); border-radius: 12px; padding: 20px; }
.athenor-rise .rise-fallback-note { font-size: 14px; color: var(--athenor-muted); margin-top: 12px; }

/* matching (practice): each prompt beside its chosen match, marked after Check */
.athenor-rise .rise-match-row.is-right select { border-color: var(--athenor-success); background: var(--athenor-success-soft); }
.athenor-rise .rise-match-row.is-wrong select { border-color: var(--athenor-warn); background: var(--athenor-warn-soft); }
.athenor-rise [data-rise-match] .rise-match { margin-bottom: 16px; }
@media (max-width: 560px) { .athenor-rise .rise-match-row { grid-template-columns: 1fr; gap: 6px; } }
/* tabs */
.athenor-rise .rise-tabs { border: 1px solid var(--color-divider); border-radius: 14px; overflow: hidden; background: var(--color-surface); }
.athenor-rise .rise-tabs-list { display: flex; overflow-x: auto; border-bottom: 1px solid var(--color-divider); background: var(--athenor-tint); scrollbar-width: thin; }
.athenor-rise .rise-tab { flex: none; min-height: 48px; padding: 0 20px; border: 0; border-bottom: 3px solid transparent; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--athenor-muted); cursor: pointer; }
.athenor-rise .rise-tab[aria-selected="true"] { color: var(--color-text); border-bottom-color: var(--rise-accent); background: var(--color-surface); }
.athenor-rise .rise-tab:focus-visible { outline: 2px solid var(--ath-color-focus); outline-offset: -2px; }
.athenor-rise .rise-tab-panel { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; }
.athenor-rise .rise-tab-panel[hidden] { display: none; }
.athenor-rise .rise-tab-panel:focus-visible { outline: 2px solid var(--ath-color-focus); outline-offset: -2px; }
/* labeled graphic: numbered markers on the picture; the chosen one's text below it */
.athenor-rise .rise-lg-stage { position: relative; }
.athenor-rise .rise-lg-stage .rise-lg-img { display: block; width: 100%; height: auto; border-radius: 12px; }
.athenor-rise .rise-lg-pin { position: absolute; display: grid; place-items: center; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 2px solid #fff; border-radius: 50%; background: var(--rise-accent); color: #fff; font: 700 15px/1 var(--ath-font-sans); box-shadow: 0 2px 8px rgb(0 0 0 / .3); cursor: pointer; }
.athenor-rise .rise-lg-pin[aria-expanded="true"] { background: var(--color-text); transform: scale(1.1); }
.athenor-rise .rise-lg-pin:focus-visible { outline: 3px solid var(--ath-color-focus); outline-offset: 2px; }
.athenor-rise .rise-lg-panel { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding: 20px 22px; border-radius: 14px; background: var(--athenor-tint); }
.athenor-rise .rise-lg-panel[hidden] { display: none; }
.athenor-rise .rise-lg-num { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 10px; border-radius: 50%; background: var(--rise-accent); color: #fff; font-size: 13px; }
/* buttons: a text and the way it leads (another lesson, a web page) */
.athenor-rise .rise-buttons { display: flex; flex-direction: column; gap: 16px; }
.athenor-rise .rise-buttons-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.athenor-rise .rise-button-item { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 22px; border: 1px solid var(--color-divider); border-radius: 14px; background: var(--color-surface); }
.athenor-rise .rise-button-item .rise-p p { margin: 0 0 6px; }
.athenor-rise .rise-button-label { margin: 0; font-weight: 600; color: var(--color-text); }
/* scenario: the scene's picture behind the character and the line, then the responses */
.athenor-rise .rise-scn { position: relative; display: flex; flex-direction: column; gap: 18px; overflow: hidden; padding: 24px; border-radius: 16px; background: var(--athenor-tint); isolation: isolate; }
.athenor-rise .rise-scn .rise-scn-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .28; border-radius: 0; }
.athenor-rise .rise-scn-stage { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 20px; align-items: end; }
.athenor-rise .rise-scn-stage:not(:has(.rise-scn-character)) { grid-template-columns: minmax(0, 1fr); }
.athenor-rise .rise-scn-character { width: 100%; max-height: 320px; object-fit: contain; object-position: bottom; }
.athenor-rise .rise-scn-bubble { position: relative; padding: 20px 22px; border-radius: 16px; background: var(--color-surface); box-shadow: 0 2px 12px rgb(20 20 40 / .08); }
.athenor-rise .rise-scn-bubble.is-speech::before { content: ""; position: absolute; left: -10px; bottom: 28px; border: 10px solid transparent; border-left: 0; border-right-color: var(--color-surface); }
.athenor-rise .rise-scn-bubble .rise-p p { margin: 0 0 8px; }
.athenor-rise .rise-scn-name { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--rise-accent); }
.athenor-rise .rise-scn-chosen { margin-bottom: 10px; padding-left: 12px; border-left: 2px solid var(--athenor-muted); font-size: 14px; color: var(--athenor-muted); }
.athenor-rise .rise-scn-chosen p { margin: 0; }
.athenor-rise .rise-scn-prompt { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--athenor-muted); }
.athenor-rise .rise-scn-responses { display: flex; flex-direction: column; gap: 10px; }
.athenor-rise .rise-scn-response { padding: 14px 16px; border: 1px solid var(--color-divider); border-radius: 12px; background: var(--color-surface); font: inherit; font-size: 15px; color: var(--color-text); text-align: left; cursor: pointer; }
.athenor-rise .rise-scn-response:hover { border-color: var(--rise-accent); }
.athenor-rise .rise-scn-response:focus-visible { outline: 2px solid var(--ath-color-focus); outline-offset: 2px; }
.athenor-rise .rise-scn-response p { margin: 0; }
.athenor-rise .rise-scn-end { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 8px 0; }
@media (max-width: 640px) {
  .athenor-rise .rise-scn { padding: 18px; }
  .athenor-rise .rise-scn-stage { grid-template-columns: minmax(0, 1fr); }
  .athenor-rise .rise-scn-character { max-height: 200px; width: auto; justify-self: center; }
  .athenor-rise .rise-scn-bubble.is-speech::before { display: none; }
}

@media (max-width: 640px) {
  .athenor-rise .rise-sort-piles, .athenor-rise .rise-match-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .athenor-rise .rise-card-face, .athenor-rise .rise-acc-head svg { transition: none; }
}

/* ==========================================================================
   Native Moodle-activity renderers (F3-TASK-03): book · choice · folder, and the
   shared launch / diagnostic card. Same tokens, radii and controls as the rest of
   the Player — no Moodle UI. (assets/js/app/pages/activities/*)
   ========================================================================== */
.ath-act { display: flex; flex-direction: column; gap: 20px; }
.ath-act-intro { margin-bottom: 4px; }
.ath-muted { color: var(--ath-color-text-secondary); font-size: 13px; font-weight: 400; }
.ath-act-empty { margin: 0; color: var(--athenor-muted); padding: 24px 0; }
.ath-act-error { border-radius: 12px; background: var(--athenor-tint); padding: 20px; color: var(--color-text); }
.ath-act-alert { margin: 0; padding: 10px 14px; border-radius: var(--ath-radius-md); background: var(--ath-color-error-surface); color: var(--ath-color-error); font-size: var(--ath-text-small); }
.ath-act-notice { margin: 0; padding: 12px 16px; border-radius: var(--ath-radius-md); background: var(--ath-color-selected); color: var(--ath-color-text); font-size: 15px; }
.ath-act-completion { margin: 0; font-size: 13px; color: var(--athenor-muted); }
.ath-act-completion.is-done { color: var(--athenor-success-text); }
.ath-clip { display: inline-block; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

.ath-launch-card { border-radius: 12px; background: var(--athenor-tint); padding: 20px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }

/* book */
.ath-book-layout { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 28px; align-items: start; }
.ath-book-toc { border: 1px solid var(--color-divider); border-radius: 12px; padding: 6px; position: sticky; top: 8px; background: var(--color-surface); }
.ath-book-toc > summary { cursor: pointer; padding: 10px 12px; font-weight: 500; font-size: 14px; list-style: none; min-height: 44px; display: flex; align-items: center; gap: 6px; }
.ath-book-toc > summary::-webkit-details-marker { display: none; }
.ath-book-toc ol { list-style: none; margin: 0; padding: 0 0 6px; display: flex; flex-direction: column; gap: 2px; }
.ath-book-toc-item { width: 100%; display: flex; gap: 8px; align-items: baseline; text-align: left; font: inherit; font-size: 14px; color: var(--color-text); background: transparent; border: 0; border-radius: 8px; padding: 9px 12px; min-height: 40px; cursor: pointer; }
.ath-book-toc-item:hover:not(:disabled) { background: var(--athenor-tint); }
.ath-book-toc-item.is-current { background: var(--athenor-tint-2); box-shadow: inset 3px 0 0 var(--color-accent); font-weight: 500; }
.ath-book-toc-item:focus-visible, .ath-choice-opt:focus-within, .ath-folder-link:focus-visible, .ath-book-heading:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ath-book-num { color: var(--athenor-muted); font-variant-numeric: tabular-nums; min-width: 2.2ch; }
.ath-book-heading { margin: 0 0 18px; font-size: clamp(22px, 2.6vw, 30px); outline-offset: 6px; }
.ath-book-pager { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--color-divider); }
.ath-book-pager .btn { min-width: 0; max-width: 100%; white-space: nowrap; }
.ath-book-pager .btn:last-child { justify-self: end; }
.ath-book-pos { font-size: 13px; color: var(--athenor-muted); text-align: center; }
.ath-book-body img { max-width: 100%; height: auto; border-radius: 10px; }

/* choice */
.ath-choice-set { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ath-choice-set legend { font-weight: 500; font-size: 17px; padding: 0; margin-bottom: 4px; }
.ath-choice-opt { display: flex; gap: 12px; align-items: center; padding: 13px 16px; border: 1px solid var(--color-divider); border-radius: 10px; cursor: pointer; font-size: 16px; min-height: 48px; background: var(--color-surface); }
.ath-choice-opt:hover:not(.is-disabled) { border-color: var(--color-accent); }
.ath-choice-opt.is-selected { border-color: var(--color-accent); background: var(--athenor-tint); }
.ath-choice-opt.is-disabled { cursor: default; opacity: .75; }
.ath-choice-opt input { width: 18px; height: 18px; accent-color: var(--color-accent); flex: none; }
.ath-choice-cap { margin-left: auto; }
.ath-choice-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ath-choice-saved:not(:empty) { font-size: 14px; color: var(--athenor-success-text); }
.ath-choice-window { margin: 0; }
.ath-choice-results h2 { margin: 0 0 12px; font-size: 18px; }
.ath-choice-results ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ath-choice-res-row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; margin-bottom: 6px; }
.ath-bar { height: 8px; border-radius: 4px; background: var(--athenor-surface-2); overflow: hidden; }
.ath-bar > span { display: block; height: 100%; background: var(--color-accent); border-radius: 4px; transition: width .3s; }
.ath-choice-names { margin: 6px 0 0; }

/* folder */
.ath-folder-tree, .ath-folder-tree ul { list-style: none; margin: 0; padding: 0; }
.ath-folder-tree ul { padding-left: 20px; border-left: 1px solid var(--color-divider); margin-left: 8px; }
.ath-folder-dir > details > summary { cursor: pointer; padding: 10px 6px; font-weight: 500; min-height: 44px; display: flex; align-items: center; gap: 8px; list-style: none; border-radius: 8px; }
.ath-folder-dir > details > summary::-webkit-details-marker { display: none; }
.ath-folder-dir > details > summary:hover { background: var(--athenor-tint); }
.ath-folder-dir > details > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ath-folder-ico { display: inline-block; transition: transform .15s; color: var(--athenor-muted); }
.ath-folder-dir > details[open] > summary .ath-folder-ico { transform: rotate(90deg); }
.ath-folder-link { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 11px 8px; border-top: 1px solid var(--color-divider); text-decoration: none; color: var(--color-text); min-height: 48px; }
.ath-folder-link:hover { background: var(--athenor-tint); }
.ath-kind { display: inline-grid; place-items: center; min-width: 40px; padding: 3px 6px; border-radius: 6px; background: var(--athenor-tint-2); color: var(--color-accent-700); font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.ath-folder-name { overflow-wrap: anywhere; }
.ath-folder-dl { font-size: 13px; color: var(--color-accent-700); }
.ath-folder-empty { margin: 0 0 8px 28px; }
.ath-folder-summary { margin: 0 0 4px; }

@media (max-width: 860px) {
  .ath-book-layout { grid-template-columns: 1fr; gap: 16px; }
  .ath-book-toc { position: static; }
  .ath-book-pager { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ath-book-pos { grid-column: 1 / -1; order: -1; }
  .ath-folder-link { grid-template-columns: auto 1fr auto; }
  .ath-folder-dl { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ath-bar > span, .ath-folder-ico { transition: none; }
}

/* ── F3-TASK-04 — feedback, forum, custom certificate ─────────────────────── */
.ath-fb-form { display: flex; flex-direction: column; gap: 22px; }
.ath-fb-page { margin: 0; font-size: 18px; outline-offset: 6px; }
.ath-fb-page:focus-visible, .ath-fm-h:focus-visible { outline: 2px solid var(--color-accent); }
.ath-fb-item { border: 0; margin: 0; padding: 0; min-width: 0; }
.ath-fb-q { display: block; font-weight: 500; font-size: 16px; margin: 0 0 8px; padding: 0; }
.ath-fb-num { color: var(--athenor-muted); font-variant-numeric: tabular-nums; }
.ath-fb-req { color: oklch(0.5 0.17 25); }
.ath-fb-input { width: 100%; max-width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 11px 14px; min-height: 46px; border: 1px solid var(--color-divider); border-radius: 10px; background: var(--color-surface); color: var(--color-text); }
textarea.ath-fb-input { resize: vertical; min-height: 96px; }
.ath-fb-input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-color: var(--color-accent); }
.ath-fb-num-input { max-width: 14rem; }
.ath-fb-item [aria-invalid="true"], .ath-fb-input[aria-invalid="true"] { border-color: oklch(0.5 0.17 25); }
.ath-fb-err { margin: 6px 0 0; font-size: 14px; color: oklch(0.45 0.17 25); }
.ath-fb-info { margin: 0; color: var(--athenor-muted); font-size: 15px; }
.ath-fb-info-name { font-weight: 500; color: var(--color-text); }
.ath-fb-nav { padding-top: 6px; }
.ath-fb-anon { margin: 0; }
.ath-fb-thanks { display: block; }
.ath-fb-rq { margin: 0 0 8px; font-weight: 500; }
.ath-fb-item.is-horizontal { flex-direction: row; flex-wrap: wrap; }
.ath-fb-item.ath-choice-set legend { padding: 0; }

.ath-fm-meta { margin-bottom: 4px; }
.ath-fm-h { margin: 0 0 12px; font-size: clamp(20px, 2.4vw, 26px); outline-offset: 6px; }
.ath-fm-list, .ath-fm-feed, .ath-fm-posts { list-style: none; margin: 0; padding: 0; }
.ath-fm-row { width: 100%; display: flex; gap: 14px; align-items: flex-start; text-align: left; font: inherit; color: var(--color-text); background: none; border: 0; border-top: 1px solid var(--color-divider); padding: 16px 8px; cursor: pointer; min-height: 56px; }
.ath-fm-row:hover { background: var(--athenor-tint); }
.ath-fm-row:focus-visible, .ath-fm-tool:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.ath-fm-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ath-fm-row-title { font-weight: 500; overflow-wrap: anywhere; }
.ath-fm-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--athenor-tint); color: var(--color-accent-700); font-size: 12px; font-weight: 600; }
.ath-fm-new-badge { font-size: 12px; font-weight: 600; color: var(--color-accent-700); background: var(--athenor-tint-2); border-radius: 999px; padding: 2px 8px; margin-left: 6px; }
.ath-fm-announce { padding: 20px 0; border-top: 1px solid var(--color-divider); }
.ath-fm-a-title { margin: 0 0 4px; font-size: 20px; }
.ath-fm-post { margin: 0 0 16px calc(var(--depth, 0) * 18px); padding: 14px 16px; border: 1px solid var(--color-divider); border-radius: 12px; background: var(--color-surface); }
.ath-fm-post.is-unread { border-color: var(--color-accent); }
.ath-fm-post-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.ath-fm-author { font-weight: 600; font-size: 14px; }
.ath-fm-post-body { overflow-wrap: anywhere; }
.ath-fm-tools { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; }
.ath-fm-tool { min-height: 40px; font-size: 14px; }
.ath-fm-confirm { display: inline-flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 14px; }
.ath-fm-compose { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.ath-fm-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.ath-fm-back { margin: 0; }
.ath-fm-files { list-style: none; margin: 10px 0 0; padding: 0; }
@media (max-width: 640px) { .ath-fm-post { margin-left: calc(var(--depth, 0) * 8px); padding: 12px; } }

.ath-cert { border: 1px solid var(--color-divider); border-radius: 14px; padding: 22px; background: var(--color-surface); display: flex; flex-direction: column; gap: 6px; }
.ath-cert.is-issued { border-color: var(--athenor-success); background: var(--athenor-tint); }
.ath-cert-title { margin: 0; font-size: 20px; font-weight: 600; }
.ath-cert p { margin: 0; }
.ath-cert .btn { margin-top: 10px; }

/* ── F3-TASK-05 — glossary, wiki, database, attendance ────────────────────── */
.ath-gl-search { display: flex; flex-direction: column; gap: 8px; }
.ath-gl-searchrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.ath-gl-searchrow .ath-fb-input { flex: 1 1 14rem; width: auto; min-width: 0; }
.ath-gl-modes, .ath-gl-letters { display: flex; flex-wrap: wrap; gap: 6px; }
.ath-gl-chip { font: inherit; font-size: 14px; min-width: 40px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--color-divider); border-radius: 999px; background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.ath-gl-chip:hover:not(:disabled) { border-color: var(--color-accent); }
.ath-gl-chip[aria-pressed="true"] { background: var(--athenor-tint-2); border-color: var(--color-accent); color: var(--color-accent-700); font-weight: 600; }
.ath-gl-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ath-gl-list, .ath-dt-list-entries, .ath-at-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ath-gl-entry, .ath-dt-entry, .ath-at-session { border: 1px solid var(--color-divider); border-radius: 12px; padding: 16px; background: var(--color-surface); }
.ath-gl-entry.is-pending, .ath-dt-entry.is-pending { border-style: dashed; border-color: var(--color-accent); }
.ath-gl-term { margin: 0 0 6px; font-size: 20px; overflow-wrap: anywhere; }
.ath-gl-badge { display: inline-block; font-size: 12px; font-weight: 600; color: var(--color-accent-700); background: var(--athenor-tint-2); border-radius: 999px; padding: 2px 10px; vertical-align: middle; }
.ath-gl-by { margin: 8px 0 0; }
.ath-gl-count { margin: 0; }
.ath-wk-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.ath-wk-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ath-wk-nav .ath-book-toc-item { width: auto; border: 1px solid var(--color-divider); }
.ath-wk-page { overflow-wrap: anywhere; }
.ath-wk-page a[data-act] { color: var(--color-accent-700); text-decoration: underline; }
.ath-dt-fields { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ath-dt-row { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); gap: 4px 16px; }
.ath-dt-row dt { font-weight: 600; font-size: 14px; color: var(--athenor-muted); }
.ath-dt-row dd { margin: 0; overflow-wrap: anywhere; }
.ath-dt-list { margin: 0; padding-left: 20px; }
.ath-dt-pic { max-width: 100%; height: auto; border-radius: 10px; }
.ath-dt-group { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ath-dt-sub { font-weight: 400; font-size: 14px; margin: 4px 0 0; }
.ath-at-h { margin: 0 0 10px; font-size: 20px; outline-offset: 6px; }
/* Live sessions (Attendance + a Google Meet link — assets/js/app/live-sessions.js): the Player's card, and the upcoming list
   on My Courses and the course page. The phase is colour AND words; joining is a real link, opened in a new tab. */
.ath-live-list, .ath-live-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ath-space-4); }
.ath-live { padding: var(--ath-space-5); border-radius: var(--ath-radius-lg); background: var(--ath-color-surface); box-shadow: var(--ath-shadow-hairline); }
.ath-live[data-phase="open"], .ath-live[data-phase="live"] { box-shadow: inset 0 0 0 2px var(--ath-color-action), var(--ath-shadow-card); }
.ath-live__when { margin: var(--ath-space-1) 0 var(--ath-space-2); font: var(--ath-weight-bold) var(--ath-text-title) / var(--ath-leading-title) var(--ath-font-sans); }
.ath-live__meta { margin: 0; color: var(--ath-color-text-secondary); font-size: var(--ath-text-small); }
.ath-live__phase, .ath-live-row__phase { font-weight: var(--ath-weight-bold); color: var(--ath-color-text); }
.ath-live[data-phase="open"] .ath-live__phase, .ath-live[data-phase="live"] .ath-live__phase,
.ath-live-row[data-phase="open"] .ath-live-row__phase, .ath-live-row[data-phase="live"] .ath-live-row__phase { color: var(--ath-color-success); }
.ath-live__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ath-space-3); margin-top: var(--ath-space-4); }
.ath-live__opens { margin: 0; flex-basis: 100%; }
.ath-live__attendance { margin: var(--ath-space-4) 0 0; }
.ath-live__attendance.is-taken { font-weight: var(--ath-weight-bold); }
.ath-live__desc { margin-top: var(--ath-space-4); padding-top: var(--ath-space-4); border-top: 1px solid var(--ath-color-border); }
.ath-live-upcoming { margin-block: var(--ath-space-6); }
.ath-live-upcoming__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ath-space-2) var(--ath-space-4); margin-bottom: var(--ath-space-4); }
.ath-live-upcoming__title { margin: 0; font: var(--ath-weight-bold) var(--ath-text-title) / var(--ath-leading-title) var(--ath-font-sans); }
.ath-live-upcoming__more { font-weight: var(--ath-weight-bold); }
.ath-live-page { padding-block: clamp(32px, 4vw, 56px); }
.ath-live-page__title { margin: 0 0 var(--ath-space-3); font-size: clamp(32px, 24px + 1.6vw, 52px); line-height: 1.15; }
.ath-live-page__lead { max-width: 70ch; margin: 0; color: var(--ath-color-text-secondary); }
.ath-live-rows { gap: 0; border-radius: var(--ath-radius-lg); background: var(--ath-color-surface); box-shadow: var(--ath-shadow-hairline); }
.ath-live-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ath-space-3) var(--ath-space-5); padding: var(--ath-space-4) var(--ath-space-5); }
.ath-live-row + .ath-live-row { border-top: 1px solid var(--ath-color-border); }
.ath-live-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ath-live-row__when { font-size: var(--ath-text-small); color: var(--ath-color-text-secondary); }
.ath-live-row__name { font-weight: var(--ath-weight-bold); overflow-wrap: anywhere; }
.ath-live-row__course { font-size: var(--ath-text-small); color: var(--ath-color-text-secondary); overflow-wrap: anywhere; }
.ath-live-row__phase { font-size: var(--ath-text-small); }
.ath-live-row__actions { display: flex; flex-wrap: wrap; gap: var(--ath-space-2); }
.ath-at-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 12px; margin: 0 0 8px; }
.ath-at-stat { border: 1px solid var(--color-divider); border-radius: 12px; padding: 12px 14px; background: var(--color-surface); }
.ath-at-stat dt { font-size: 13px; color: var(--athenor-muted); }
.ath-at-stat dd { margin: 2px 0 0; font-size: 22px; font-weight: 600; }
.ath-at-when { margin: 0 0 6px; font-size: 17px; }
.ath-at-status { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ath-at-mark { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--color-divider); padding-top: 12px; }
.ath-at-legend { margin: 0 0 6px; }
@media (max-width: 640px) { .ath-dt-row { grid-template-columns: 1fr; } .ath-gl-entry, .ath-dt-entry, .ath-at-session { padding: 12px; } }

/* ── F3-TASK-06 — native Lesson, and the isolated content runtime (H5P, IMS packages) ─────────────────────────── */
.ath-ls-h { margin: 0 0 12px; font-size: clamp(20px, 2.4vw, 26px); }
.ath-ls-meta { margin: 0 0 16px; }
.ath-ls-progress { height: 8px; border-radius: 999px; background: var(--athenor-surface-2); overflow: hidden; }
.ath-ls-progress > span { display: block; height: 100%; background: var(--color-accent-700); }
.ath-ls-score { margin: 6px 0 0; font-size: 14px; }
.ath-ls-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ath-ls-stem { margin-bottom: 14px; }
.ath-ls-answer { display: flex; flex-direction: column; gap: 12px; }
.ath-ls-feedback { border: 1px solid var(--color-divider); border-left-width: 5px; border-radius: 12px; padding: 16px 18px; margin: 0 0 18px; background: var(--color-surface); }
.ath-ls-feedback.is-correct { border-left-color: var(--athenor-success-text); }
.ath-ls-feedback.is-wrong { border-left-color: #92400e; }
.ath-ls-feedback.is-neutral { border-left-color: var(--color-accent-700); }
.ath-ls-verdict { margin: 0 0 8px; font-size: 18px; }
.ath-ls-mine { margin: 0 0 8px; }
.ath-ls-msgs { margin: 10px 0; padding-left: 20px; }
.ath-ls-match { display: flex; flex-direction: column; gap: 12px; }
.ath-ls-match-row { display: grid; gap: 6px; }
.ath-rt { width: 100%; max-width: 100%; }
.ath-rt-frame { display: block; width: 100%; max-width: 100%; border: 1px solid var(--color-divider); border-radius: 12px; background: #fff; }
.ath-rt-status { margin-top: 14px; }
.ath-ims { display: grid; grid-template-columns: minmax(190px, 250px) minmax(0, 1fr); gap: 20px; align-items: start; }
.ath-ims-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-divider); border-radius: 12px; overflow: hidden; }
.ath-ims-item { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--color-divider); background: transparent; padding: 10px 12px; font: inherit; color: var(--color-text); cursor: pointer; }
.ath-ims-list li:last-child .ath-ims-item { border-bottom: 0; }
.ath-ims-item:hover { background: var(--athenor-surface-2); }
.ath-ims-item.is-current { background: var(--athenor-tint); font-weight: 600; }
.ath-ims-item.is-heading { color: var(--athenor-muted); cursor: default; }
.ath-ims-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ath-ims-pos { flex: 1; text-align: center; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) { .ath-ims { grid-template-columns: 1fr; } .ath-ls-feedback { padding: 12px 14px; } }

/* mod_workshop — F3-TASK-07 */
.ath-ws-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ath-ws-phase { margin: 0; font-size: clamp(20px, 2.4vw, 26px); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ath-tag-phase { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-accent-700); background: var(--athenor-tint-2); border-radius: 999px; padding: 4px 12px; }
.ath-ws-deadlines { margin: 0; }
.ath-ws-instructions { margin: 0 0 20px; }
.ath-ws-h { margin: 0 0 12px; font-size: 18px; }
.ath-ws-dim { padding: 16px; border: 1px solid var(--color-divider); border-radius: 12px; background: var(--color-surface); }
.ath-ws-dim + .ath-ws-dim, section > .ath-ws-dim + .ath-ws-dim { margin-top: 14px; }
.ath-ws-assess > div[role="group"] { display: flex; flex-direction: column; gap: 14px; margin: 16px 0; }
.ath-ws-review-sub { padding: 14px 16px; border: 1px solid var(--color-divider); border-radius: 12px; background: var(--athenor-tint); margin-bottom: 16px; }
.ath-ws-review-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-divider); border-radius: 12px; overflow: hidden; }
.ath-ws-review-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--color-divider); min-height: 48px; }
.ath-ws-review-list li:first-child { border-top: 0; }
.ath-ws-review-title { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.ath-ws-feedback-item { padding: 14px 16px; border-top: 1px solid var(--color-divider); }
.ath-ws-feedback-item:first-child { border-top: 0; }
@media (max-width: 520px) { .ath-ws-header { flex-direction: column; align-items: flex-start; } .ath-ws-review-row { flex-wrap: wrap; } }

/* mod_survey — F3-TASK-07 (same form patterns as mod_feedback) */
.ath-sv-form { display: flex; flex-direction: column; gap: 22px; }
.ath-sv-item { min-width: 0; }
.ath-sv-group { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--color-divider); border-radius: 12px; background: var(--color-surface); }
.ath-sv-h { margin: 0; font-size: 17px; }
.ath-sv-intro { margin: -6px 0 0; }
.ath-sv-row { border: 0; margin: 0; padding: 0; }
.ath-sv-pair { display: flex; flex-direction: column; gap: 12px; padding: 12px 0; border-top: 1px solid var(--color-divider); }
.ath-sv-group > .ath-sv-pair:first-of-type { border-top: 0; padding-top: 0; }

/* Player keyboard focus — one consistent, clearly visible ring on every control of the shell (header, curriculum, tools, footer). The
   offset is negative inside scrolling lists so the ring is never clipped by their overflow. */
[data-el="header"] :is(a, button):focus-visible,
[data-el="footer"] :is(a, button):focus-visible,
[data-el="nav"] :is(a, button):focus-visible,
[data-el="aside"] :is(a, button, textarea, [tabindex]):focus-visible,
[data-el="article"]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
[data-el="footer"] :is(a, button):focus-visible, [data-el="header"] :is(a, button):focus-visible { outline-offset: 2px; }

/* ── F3-QUIZ-01: native Quiz Player ───────────────────────────────────────────────────────────────────────────────── */
.ath-qz { display: flex; flex-direction: column; gap: var(--ath-space-5); }
.ath-qz > h2 { margin: 0; font-size: var(--ath-text-heading-2); line-height: var(--ath-leading-heading-2); }
.ath-qz-bar { position: sticky; top: calc(var(--ath-header-h) + 8px); z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; min-height: 0; }
.ath-qz-bar:has(.ath-qz-timer-wrap) { padding: 10px 16px; border-radius: var(--ath-radius-lg); background: var(--ath-color-surface); box-shadow: var(--ath-shadow-hairline), var(--ath-shadow-card); }
.ath-qz-timer { font: var(--ath-weight-bold) 17px / 1 var(--ath-font-mono); font-variant-numeric: tabular-nums; }
.ath-qz-timer.is-urgent { color: var(--ath-color-error); }
.ath-qz-save { font-size: 13px; color: var(--ath-color-text-secondary); }
.ath-qz-save[data-state="offline"], .ath-qz-save[data-state="refused"] { color: var(--ath-color-error); }
.ath-qz-nav { display: flex; flex-direction: column; gap: var(--ath-space-3); padding: var(--ath-space-4) var(--ath-space-5); border-radius: var(--ath-radius-lg); background: var(--ath-color-surface); box-shadow: var(--ath-shadow-hairline); }
.ath-qz-nav__title { font: var(--ath-weight-bold) var(--ath-text-title) / var(--ath-leading-title) var(--ath-font-sans); }
.ath-qz-nav__legend { margin: 0; font-size: var(--ath-text-small); color: var(--ath-color-text-secondary); }
.ath-qz-nav ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ath-qz-navbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 48px; min-height: 48px; padding: 0 8px; border-radius: var(--ath-radius-md); border: 1px solid var(--ath-color-border-strong); background: var(--ath-color-surface); color: var(--ath-color-text); font: var(--ath-weight-bold) var(--ath-text-small) var(--ath-font-sans); cursor: pointer; }
.ath-qz-navbtn[aria-disabled="true"] { cursor: default; }
.ath-qz-navbtn.is-answersaved, .ath-qz-navbtn.is-complete { border-color: var(--ath-color-recognition); background: var(--ath-color-selected); color: var(--ath-color-recognition); }
.ath-qz-navbtn.is-flagged { border: 2px dashed var(--ath-color-warning); }
.ath-qz-navbtn.is-current { border: 2px solid var(--ath-color-action); box-shadow: inset 0 0 0 1px var(--ath-color-action); }
.ath-qz-navflag, .ath-qz-navtick { font-size: 13px; line-height: 1; }
.ath-qz-navflag { color: var(--ath-color-warning); }
.ath-qz-navbtn:focus-visible, .ath-qz-chip:focus-visible, .ath-qz-editor-area:focus-visible { outline: 2px solid var(--ath-color-focus); outline-offset: 2px; }
.ath-qz-q { display: flex; flex-direction: column; gap: var(--ath-space-4); padding: clamp(20px, 2.4vw, 32px); border-radius: var(--ath-radius-lg); background: var(--ath-color-surface); box-shadow: var(--ath-shadow-hairline); }
.ath-qz-qhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.ath-qz-qhead h2 { margin: 0; font: var(--ath-weight-bold) var(--ath-text-small) / var(--ath-leading-small) var(--ath-font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ath-color-recognition); }
.ath-qz-q .ath-qz-qtext { font: var(--ath-weight-regular) clamp(20px, 16px + .8vw, 24px) / 1.35 var(--ath-font-serif); }
.ath-qz-flag { margin-left: auto; }
.ath-qz-flag[aria-pressed="true"] { border: 2px dashed var(--ath-color-warning); }
.ath-qz-qtext { overflow-wrap: anywhere; }
.ath-qz-qtext img, .ath-qz-opt img, .ath-qz-chip img { max-width: 100%; height: auto; }
.ath-qz-set { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ath-qz-set > legend { padding: 0; margin-bottom: 8px; font-size: var(--ath-text-small); color: var(--ath-color-text-secondary); }
.ath-qz-set.is-inline { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
.ath-qz-opt { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; min-height: 48px; padding: 12px 16px; border: 1px solid var(--ath-color-border-strong); border-radius: var(--ath-radius-md); background: var(--ath-color-surface); cursor: pointer; min-width: 0; transition: border-color var(--ath-duration-fast) var(--ath-ease-standard), background var(--ath-duration-fast) var(--ath-ease-standard); }
.ath-qz-opt:hover { border-color: var(--ath-color-action); }
.ath-qz-opt:has(input:checked) { border: 2px solid var(--ath-color-action); padding: 11px 15px; background: var(--ath-color-selected); }
.ath-qz-opt:has(input:focus-visible) { outline: 2px solid var(--ath-color-focus); outline-offset: 2px; }
.ath-qz-set.is-inline .ath-qz-opt { padding: 6px 10px; }
.ath-qz-opt input { margin-top: 2px; flex: none; }
.ath-qz-opt-text { display: inline-flex; gap: 6px; flex: 1 1 12ch; min-width: 0; overflow-wrap: anywhere; }
.ath-qz-num { flex: none; color: var(--ath-color-text-secondary); }
.ath-qz-mark { display: inline-flex; gap: 4px; align-items: center; font-size: 13px; font-weight: 500; white-space: nowrap; }
.ath-qz-mark.is-correct { color: var(--ath-color-success); }
.ath-qz-mark.is-incorrect { color: var(--ath-color-error); }
.ath-qz-mark.is-partiallycorrect { color: var(--ath-color-warning); }
.ath-qz-choice-fb, .ath-qz-part-fb { flex-basis: 100%; font-size: 14px; color: var(--athenor-ink-2); }
.ath-qz-part-fb { display: block; margin-top: 4px; }
.ath-qz-answer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ath-qz-text { max-width: 100%; }
.ath-qz-part.is-block { display: block; margin: 6px 0; }
.ath-qz-part:not(.is-block) { display: inline; }
.ath-qz-part:not(.is-block) > * + * { margin-inline-start: 4px; }
.ath-qz-part:not(.is-block) > .ath-qz-part-fb { display: inline; font-size: 14px; }
.ath-qz-cloze-set { display: inline-flex; vertical-align: middle; gap: 2px 12px; }
.ath-qz-part.is-block .ath-qz-cloze-set { display: flex; flex-direction: column; }
.ath-qz-cloze-set .ath-qz-opt { border: 0; padding: 2px 4px; align-items: center; }
.ath-qz-cloze-set .ath-qz-opt input { margin-top: 0; }
.ath-qz-cloze-set .ath-qz-opt-text { flex: 0 1 auto; }
.ath-qz-cloze-set .athenor-player-prose > p { display: inline; margin: 0; }
.ath-qz-text.is-inline { display: inline-block; width: auto; min-width: 5ch; padding: 4px 8px; min-height: 36px; }
.ath-qz-select { width: auto; max-width: 100%; min-height: 36px; padding: 4px 8px; }
.ath-qz-gap, .ath-qz-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 100%; vertical-align: middle; }
.ath-qz-gap.is-drop .ath-qz-select { border-style: dashed; }
.ath-qz-gap.is-over .ath-qz-select, .ath-qz-zone.is-over { outline: 2px dashed var(--color-accent); }
.ath-qz-match { border-collapse: collapse; width: 100%; }
.ath-qz-match td { padding: 8px 6px; vertical-align: middle; border-top: 1px solid var(--color-divider); }
.ath-qz-stem { overflow-wrap: anywhere; }
.ath-qz-banks { display: flex; flex-direction: column; gap: 8px; }
.ath-qz-bank { display: flex; flex-wrap: wrap; gap: 8px; }
.ath-qz-chip { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--color-divider); background: var(--athenor-tint); cursor: grab; user-select: none; max-width: 100%; }
.ath-qz-essay { width: 100%; resize: vertical; }
.ath-qz-essay.is-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ath-qz-editor { border: 1px solid var(--color-divider); border-radius: 10px; overflow: hidden; }
.ath-qz-editor-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-bottom: 1px solid var(--color-divider); background: var(--color-surface); }
.ath-qz-editor-area { padding: 12px; outline: none; overflow-wrap: anywhere; }
.ath-qz-files ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.ath-qz-dd-area { position: relative; max-width: 100%; display: inline-block; }
.ath-qz-dd-bg { display: block; max-width: 100%; height: auto; }
.ath-qz-zone { position: absolute; min-width: 2.2em; min-height: 1.6em; padding: 2px 6px; border: 2px dashed var(--color-accent); border-radius: 6px; background: rgba(255,255,255,0.88); font-size: 13px; transform: translate(0, 0); }
.ath-qz-zone.is-filled { border-style: solid; }
.ath-qz-zone-no { color: var(--athenor-muted); }
.ath-qz-zone-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ath-qz-zone-label { display: inline-block; min-width: 6ch; font-weight: 500; }
.ath-qz-panel { display: flex; flex-direction: column; gap: var(--ath-space-3); padding: var(--ath-space-5); border-radius: var(--ath-radius-lg); background: var(--ath-color-surface); box-shadow: var(--ath-shadow-hairline); }
[data-quiz-blocked] { min-width: 0; }
[data-quiz-blocked] details, [data-quiz-blocked] code, [data-quiz-blocked] li { overflow-wrap: anywhere; word-break: break-word; }
.ath-qz-panel h2, .ath-qz-panel h3 { margin: 0; font: var(--ath-weight-bold) var(--ath-text-title) / var(--ath-leading-title) var(--ath-font-sans); }
.ath-qz-panel[data-quiz-confirm] { border: 2px solid var(--ath-color-action); }
.ath-qz-kicker { font-size: var(--ath-text-caption); font-weight: var(--ath-weight-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--ath-color-recognition); }
/* Figma · Quiz · Intro — "Before you start": Moodle's rules as facts, the requirements, the one action */
.ath-qz-intro { display: flex; flex-direction: column; gap: var(--ath-space-4); padding: clamp(20px, 2.4vw, 32px); border-radius: var(--ath-radius-lg); background: var(--ath-color-surface); box-shadow: var(--ath-shadow-hairline); }
.ath-qz-intro__title { margin: 0; font-size: var(--ath-text-heading-2); line-height: var(--ath-leading-heading-2); }
.ath-qz-intro__req h3 { margin: 0 0 6px; font: var(--ath-weight-bold) var(--ath-text-body) / var(--ath-leading-body) var(--ath-font-sans); }
.ath-qz-intro__req ul { margin: 0; padding-left: 18px; color: var(--ath-color-text-secondary); }
.ath-qz-facts { display: flex; flex-wrap: wrap; gap: var(--ath-space-2); margin: 0; padding: 0; list-style: none; }
.ath-qz-facts li { padding: 6px 12px; border-radius: var(--ath-radius-full); background: var(--ath-color-subtle); font-size: var(--ath-text-small); font-weight: var(--ath-weight-bold); }
/* the result so far (Figma · Quiz · Results): the verdict Moodle's gradebook holds and the best grade */
.ath-qz-result { display: flex; flex-direction: column; gap: 4px; padding: var(--ath-space-5); border-radius: var(--ath-radius-lg); border: 1px solid var(--ath-color-border); background: var(--ath-color-surface); }
.ath-qz-result.is-pass { border-color: var(--ath-color-success); background: var(--ath-color-success-surface); }
.ath-qz-result p { margin: 0; }
.ath-qz-result [data-quiz-verdict] { font: var(--ath-weight-regular) clamp(22px, 18px + .8vw, 28px) / 1.25 var(--ath-font-serif); }
.ath-qz-progress { display: flex; flex-direction: column; gap: 8px; font-size: var(--ath-text-small); font-weight: var(--ath-weight-bold); }
.ath-qz-attempts { width: 100%; border-collapse: collapse; font-size: var(--ath-text-small); }
.ath-qz-attempts caption { text-align: left; font-weight: var(--ath-weight-bold); padding-bottom: 8px; }
.ath-qz-attempts th, .ath-qz-attempts td { padding: 10px 8px; text-align: left; border-top: 1px solid var(--ath-color-border); vertical-align: middle; overflow-wrap: anywhere; }
.ath-qz-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ath-qz-pager { justify-content: space-between; }
.ath-qz-feedback { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--ath-radius-md); background: var(--ath-color-selected); }
.ath-qz-state { font-size: 13px; color: var(--ath-color-text-secondary); }
@media (max-width: 480px) {
  .ath-qz-q, .ath-qz-intro { padding: 16px; }
  .ath-qz-attempts { display: block; overflow-x: auto; }
  .ath-qz-match td { display: block; border-top: 0; padding: 4px 0; }
  .ath-qz-match tr { display: block; border-top: 1px solid var(--color-divider); padding: 6px 0; }
}
@media (prefers-reduced-motion: reduce) { .ath-qz * { transition: none !important; animation: none !important; } }

/* ── F3-ASSIGN-01: native Assignment Player ──────────────────────────────────────────────────────────────────────── */
/* Figma · Learner / Assignment (+ Feedback): the submission card, instructions, the rubric, your work, feedback */
.ath-as { display: flex; flex-direction: column; gap: var(--ath-space-5); min-width: 0; }
.ath-as-h { margin: 0; font: var(--ath-weight-bold) var(--ath-text-title) / var(--ath-leading-title) var(--ath-font-sans); }
.ath-as-card { display: flex; flex-direction: column; gap: var(--ath-space-3); padding: var(--ath-space-5); border-radius: var(--ath-radius-lg); background: var(--ath-color-surface); box-shadow: var(--ath-shadow-hairline); min-width: 0; }
.ath-as-section { display: flex; flex-direction: column; gap: var(--ath-space-3); min-width: 0; }
.ath-as-section h3, .ath-as-panel h3 { margin: 0; font-size: var(--ath-text-heading-2); line-height: var(--ath-leading-heading-2); }
.ath-as-section h4 { margin: 6px 0 0; font: var(--ath-weight-bold) var(--ath-text-body) / var(--ath-leading-body) var(--ath-font-sans); }
.ath-as-panel { display: flex; flex-direction: column; gap: var(--ath-space-3); padding: var(--ath-space-5); border-radius: var(--ath-radius-lg); background: var(--ath-color-surface); box-shadow: var(--ath-shadow-hairline); min-width: 0; }
.ath-as-panel h3 { font: var(--ath-weight-bold) var(--ath-text-title) / var(--ath-leading-title) var(--ath-font-sans); }
.ath-as-panel[data-assign-confirm] { border: 2px solid var(--ath-color-action); }
.ath-as-kicker { font-size: var(--ath-text-caption); font-weight: var(--ath-weight-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--ath-color-recognition); }
.ath-as-actions { display: flex; flex-wrap: wrap; gap: var(--ath-space-3); align-items: center; }
.ath-as-table { border-collapse: collapse; width: 100%; font-size: var(--ath-text-small); }
.ath-as-table th, .ath-as-table td { text-align: start; vertical-align: top; padding: 10px 0; border-top: 1px solid var(--ath-color-border); overflow-wrap: anywhere; }
.ath-as-table th { width: 38%; padding-right: 12px; font-weight: var(--ath-weight-regular); color: var(--ath-color-text-secondary); }
.ath-as-table td { font-weight: var(--ath-weight-bold); }
.ath-as-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ath-as-files li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 0; border-top: 1px solid var(--ath-color-border); min-width: 0; }
.ath-as-file-name { flex: 1 1 12ch; min-width: 0; font-weight: var(--ath-weight-bold); overflow-wrap: anywhere; }
.ath-as-answer { padding: var(--ath-space-4) var(--ath-space-5); border-radius: var(--ath-radius-md); border: 1px solid var(--ath-color-recognition); background: var(--ath-color-selected); overflow-wrap: anywhere; }
.ath-as-members { margin: 0; padding-left: 18px; }
.ath-as-bar { position: sticky; top: calc(var(--ath-header-h) + 8px); z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 16px; border-radius: var(--ath-radius-lg); background: var(--ath-color-surface); box-shadow: var(--ath-shadow-hairline), var(--ath-shadow-card); }
.ath-as-timer { font: var(--ath-weight-bold) 17px / 1 var(--ath-font-mono); font-variant-numeric: tabular-nums; }
.ath-as-timer.is-urgent { color: var(--ath-color-error); text-decoration: underline; }
.ath-as-save { margin: 0; min-height: 1.4em; color: var(--ath-color-text-secondary); font-size: var(--ath-text-small); }
/* your work: the rich-text editor (toolbar on top, one bordered box) */
.ath-as-editor { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.ath-as-label { margin-bottom: var(--ath-space-2); font: var(--ath-weight-bold) var(--ath-text-body) / var(--ath-leading-body) var(--ath-font-sans); }
.ath-as-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 8px; border: 1px solid var(--ath-color-border-strong); border-bottom-color: var(--ath-color-border); border-radius: var(--ath-radius-md) var(--ath-radius-md) 0 0; background: var(--ath-color-surface); }
.ath-as-tool { min-width: 40px; min-height: 40px; padding: 4px 10px; border: 1px solid transparent; border-radius: var(--ath-radius-sm); background: none; color: var(--ath-color-text); font: var(--ath-weight-bold) var(--ath-text-small) var(--ath-font-sans); cursor: pointer; }
.ath-as-tool:hover { background: var(--ath-color-subtle); }
.ath-as-tool[aria-pressed="true"] { background: var(--ath-color-selected); border-color: var(--ath-color-action); color: var(--ath-color-recognition); }
.ath-as-tool:focus-visible, .ath-as-area:focus-visible, .ath-as-drop:focus-within { outline: 2px solid var(--ath-color-focus); outline-offset: 2px; }
.ath-as-area { min-height: 200px; max-height: 60vh; overflow: auto; padding: var(--ath-space-4) var(--ath-space-5); border: 1px solid var(--ath-color-border-strong); border-top: 0; border-radius: 0 0 var(--ath-radius-md) var(--ath-radius-md); background: var(--ath-color-surface); overflow-wrap: anywhere; }
.ath-as-area img { max-width: 100%; height: auto; }
.ath-as-linkbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--ath-color-border-strong); border-top: 0; background: var(--ath-color-subtle); }
.ath-as-linkbar .input { flex: 1 1 16ch; min-width: 0; }
.ath-as-count { margin: 6px 0 0; font-size: var(--ath-text-small); color: var(--ath-color-text-secondary); }
.ath-as-count.is-over, .ath-as-over { color: var(--ath-color-error); font-weight: var(--ath-weight-bold); }
/* Figma "Attach supporting files": a dashed drop zone */
.ath-as-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: var(--ath-space-4) var(--ath-space-5); border: 1.5px dashed var(--ath-color-border-strong); border-radius: var(--ath-radius-md); background: var(--ath-color-surface); }
.ath-as-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ath-color-selected); border-top-color: var(--ath-color-action); animation: athenor-spin .8s linear infinite; }
.ath-as-statement { display: flex; flex-direction: column; gap: 10px; padding: var(--ath-space-4) var(--ath-space-5); border: 1px solid var(--ath-color-border); border-radius: var(--ath-radius-md); background: var(--ath-color-surface); }
.ath-as-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.ath-as-check input { margin-top: 4px; flex: none; }
/* How this is assessed: Moodle's rubric / marking guide; the awarded level is marked in words and with a tick */
.ath-as-rubric { border-collapse: separate; border-spacing: 0; width: 100%; overflow: hidden; border: 1px solid var(--ath-color-border); border-radius: var(--ath-radius-lg); background: var(--ath-color-surface); font-size: var(--ath-text-small); }
.ath-as-rubric caption { text-align: start; font-weight: var(--ath-weight-bold); padding-bottom: 8px; }
.ath-as-rubric th, .ath-as-rubric td { text-align: start; vertical-align: top; padding: 12px 14px; overflow-wrap: anywhere; }
.ath-as-rubric tr + tr th, .ath-as-rubric tr + tr td { border-top: 1px solid var(--ath-color-border); }
.ath-as-rubric th { width: 28%; font-weight: var(--ath-weight-bold); }
.ath-as-levels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 8px; }
.ath-as-levels li { padding: 8px 10px; border-radius: var(--ath-radius-md); border: 1px solid transparent; color: var(--ath-color-text-secondary); }
.ath-as-levels li.is-selected { border-color: var(--ath-color-recognition); background: var(--ath-color-selected); color: var(--ath-color-text); font-weight: var(--ath-weight-bold); }
.ath-as-remark { margin-top: 6px; color: var(--ath-color-text-secondary); }
.ath-as-attempt summary { cursor: pointer; padding: 8px 0; font-weight: var(--ath-weight-bold); }
/* Feedback: the faculty's comments and the conversation */
.ath-as-feedback [data-assign-grade] { font: var(--ath-weight-regular) var(--ath-text-heading-2) / 1.2 var(--ath-font-serif); }
.ath-as-comments { padding: var(--ath-space-4) var(--ath-space-5); border-left: 3px solid var(--ath-color-action); border-radius: var(--ath-radius-md); background: var(--ath-color-selected); }
.ath-as-commentlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ath-space-3); }
.ath-as-commentlist li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: var(--ath-space-3) var(--ath-space-4); border-radius: var(--ath-radius-md); border: 1px solid var(--ath-color-border); background: var(--ath-color-surface); }
.ath-as-comment-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: var(--ath-text-small); }
[data-assign-blocked] details, [data-assign-blocked] code, [data-assign-blocked] li { overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 480px) {
  .ath-as-table th { width: auto; display: block; padding-bottom: 0; }
  .ath-as-table td { display: block; border-top: 0; padding-top: 2px; }
  .ath-as-rubric th, .ath-as-rubric td { display: block; width: auto; }
  .ath-as-rubric tr + tr td { border-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .ath-as-spinner { animation: none; } }

/* ── F3-SCORM-01: the shell around the isolated SCORM runtime ─────────────────────────────────────────────────────── */
.ath-sc { display: flex; flex-direction: column; gap: 16px; }
.ath-sc-running { gap: 10px; }
.ath-sc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.ath-sc-status { margin: 0; font-size: 14px; color: var(--athenor-muted); }
.ath-sc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ath-sc-layout.has-toc { grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); }
@media (max-width: 760px) { .ath-sc-layout.has-toc { grid-template-columns: minmax(0, 1fr); } }
.ath-sc-frame { min-width: 0; }
.ath-sc-frame iframe { display: block; width: 100%; height: max(480px, calc(100vh - 280px)); border: 1px solid var(--color-divider); border-radius: 12px; background: #fff; }
.ath-sc-toc h3 { margin: 0 0 8px; font-size: 15px; }
.ath-sc-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ath-sc-toc-item { padding-left: calc(var(--depth, 0) * 12px); display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; overflow-wrap: anywhere; }
.ath-sc-toc-open { font: inherit; text-align: left; background: none; border: 0; padding: 2px 0; color: var(--color-accent-700); text-decoration: underline; cursor: pointer; }
.ath-sc-toc-open:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ath-sc-toc-current { font-weight: 600; }
.ath-sc-toc-group { font-weight: 600; color: var(--athenor-muted); }
.ath-sc-toc-status { font-size: 13px; color: var(--athenor-muted); }
.ath-sc-history table { width: 100%; }

/* ---- F3-MEDIA-01: native media in lesson content and File / URL activities ----
   Responsive: authored width / height stay as the aspect ratio and the upper bound; nothing overflows a 320 px viewport. */
.athenor-player-prose img, .athenor-player-prose video, .ath-res-media img, .ath-res-media video { max-width: 100%; height: auto; }
.athenor-player-prose video, .ath-res-media video { display: block; width: 100%; background: #000; border-radius: 8px; }
.athenor-player-prose audio, .ath-res-media audio { display: block; width: 100%; max-width: 560px; }
.ath-embed { margin: 0 0 24px; }
.ath-embed-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--athenor-surface-2); border-radius: 8px; overflow: hidden; }
.ath-embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; margin: 0; }
.ath-embed figcaption { margin-top: 8px; font-size: 13px; }
.ath-ext-card { margin: 0 0 20px; }
.ath-ext-card a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 14px; border: 1px solid var(--color-divider); border-radius: 10px; text-decoration: none; color: var(--color-text); overflow-wrap: anywhere; }
.ath-ext-card a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ath-ext-kind { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-700); }
.ath-ext-name { font-weight: 500; }
.ath-ext-host, .ath-ext-note { font-size: 13px; color: var(--athenor-muted); }
.ath-media-unavailable { margin: 0 0 20px; padding: 12px 14px; border-radius: 10px; background: var(--athenor-surface-2); color: var(--athenor-ink-2); font-size: 15px; }
.ath-res { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.ath-res-media { margin: 0; width: 100%; }
.ath-res-media-label { margin-bottom: 8px; font-size: 14px; color: var(--athenor-muted); }
.ath-res-card { width: 100%; box-sizing: border-box; border-radius: 12px; background: var(--athenor-tint); padding: 20px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.ath-res-card-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ath-res-kind { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-700); }
.ath-res-name { font-size: 16px; font-weight: 500; color: var(--color-text); overflow-wrap: anywhere; }
.ath-res-meta, .ath-res-note { font-size: 14px; color: var(--athenor-muted); }
.ath-res .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.ath-pdf { width: 100%; border: 1px solid var(--color-divider); border-radius: 12px; padding: 12px; box-sizing: border-box; }
.ath-pdf-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.ath-pdf-pos { font-size: 14px; color: var(--athenor-muted); }
.ath-pdf-view { width: 100%; overflow: hidden; }
.ath-pdf-view canvas { display: block; max-width: 100%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.ath-pdf-status { margin: 0; font-size: 14px; color: var(--athenor-muted); }
/* a listed PDF read in the Player's viewer: a modal dialog above the activity (media.js openPdfDialog) */
.ath-pdf-dialog { width: min(1100px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: var(--ath-radius-lg); background: var(--ath-color-surface); color: var(--ath-color-text); box-shadow: var(--ath-shadow-card); }
.ath-pdf-dialog::backdrop { background: var(--ath-color-scrim); }
.ath-pdf-dialog__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--ath-color-border); background: var(--ath-color-surface); }
.ath-pdf-dialog__title { flex: 1 1 auto; min-width: 0; margin: 0; font: var(--ath-weight-bold) var(--ath-text-small) / 1.4 var(--ath-font-sans); overflow-wrap: anywhere; }
.ath-pdf-dialog .ath-pdf { border: 0; border-radius: 0; padding: 16px; }

/* ── F3-ACT-01 — rich collaboration, history, templates, print, external tools ─────────────────────────────────────── */
.ath-rich .ath-as-area { min-height: 140px; }
.ath-rich-hint { margin: 0; font-size: 13px; }
.ath-fm-attach { border: 1px dashed var(--color-divider); border-radius: 12px; padding: 10px 14px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ath-fm-attach legend { padding: 0 4px; }
.ath-fm-attach .ath-fm-files li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ath-fm-attach-btn { align-self: flex-start; position: relative; cursor: pointer; }
.ath-fm-attach-btn:focus-within { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ath-fm-options { display: flex; flex-direction: column; gap: 6px; }
.ath-fm-option { display: flex; gap: 8px; align-items: center; font-size: 14px; min-height: 32px; }
.ath-fm-rating { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 8px; font-size: 14px; }
.ath-fm-rate { display: inline-flex; gap: 8px; align-items: center; }
.ath-fm-rate-select { width: auto; min-height: 36px; padding: 4px 8px; }
.ath-fm-controls { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 12px; }
.ath-fm-search { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.ath-fm-search .ath-fb-input { flex: 1 1 14rem; width: auto; min-width: 0; }
.ath-fm-sub { margin: 4px 0 0; }
.ath-fm-item { display: flex; align-items: stretch; }
.ath-fm-item .ath-fm-row { flex: 1; }
.ath-fm-star-btn { flex: none; min-width: 44px; border-top: 1px solid var(--color-divider); border-radius: 0; font-size: 18px; color: var(--color-accent-700); }
.ath-fm-star { color: var(--color-accent-700); margin-right: 4px; }
.ath-fm-words, .ath-fm-locked { margin: 6px 0 0; font-size: 13px; }
.ath-cm-panel { margin-top: 12px; padding: 12px 14px; border-top: 1px solid var(--color-divider); display: flex; flex-direction: column; gap: 8px; }
.ath-cm-h { margin: 0; font-size: 15px; }
.ath-cm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ath-cm { padding: 8px 10px; border-radius: 10px; background: var(--athenor-tint); overflow-wrap: anywhere; }
.ath-cm p { margin: 0; }
.ath-wk-history, .ath-wk-map { list-style: none; margin: 0; padding: 0; }
.ath-wk-version { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding: 10px 0; border-top: 1px solid var(--color-divider); }
.ath-wk-diff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.ath-wk-diff-side { border: 1px solid var(--color-divider); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.ath-wk-diff-side h3 { margin: 0 0 4px; font-size: 16px; }
.ath-wk-diff del { background: var(--athenor-warn-soft); text-decoration: line-through; }
.ath-wk-diff ins { background: var(--athenor-success-soft); text-decoration: underline; }
.ath-dt-template { overflow-wrap: anywhere; }
.ath-dt-template table { max-width: 100%; }
.ath-dt-adv { border: 1px solid var(--color-divider); border-radius: 12px; padding: 14px; }
.ath-dt-adv-toggle { margin: 6px 0; }
.ath-choice-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
.ath-choice-table caption { text-align: left; font-weight: 600; padding-bottom: 6px; }
.ath-choice-table th, .ath-choice-table td { text-align: left; padding: 8px 6px; border-top: 1px solid var(--color-divider); }
.ath-choice-table td { font-variant-numeric: tabular-nums; }
/* F3-RPT-01 — the survey comparison Moodle shows after answering: a table per series (the full information), then a dot plot
   of the same numbers (filled square = you, hollow circle = class / group average, bar = spread; a written legend). */
.ath-sv-compare { margin-top: 20px; }
.ath-sv-compare h2 { margin: 0 0 8px; font-size: 18px; }
.ath-sv-table { margin-bottom: 10px; }
.ath-sv-plot { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 18px; }
.ath-sv-plot-row { display: grid; grid-template-columns: minmax(5.5rem, 32%) 1fr; gap: 10px; align-items: center; font-size: 13px; }
.ath-sv-plot-name { overflow-wrap: anywhere; }
.ath-sv-plot-track { position: relative; height: 18px; border-bottom: 1px solid var(--color-divider); margin: 0 7px; }
.ath-sv-plot-spread { position: absolute; top: 7px; height: 4px; border-radius: 2px; background: var(--athenor-tint); }
.ath-sv-mark { position: absolute; top: 3px; width: 12px; height: 12px; margin-left: -6px; box-sizing: border-box; }
.ath-sv-mark.is-mine { background: var(--color-accent-700); }
.ath-sv-mark.is-class { border: 2px solid var(--color-text); border-radius: 50%; background: var(--color-surface); }
.ath-sv-plot-ends { display: flex; justify-content: space-between; gap: 8px; color: var(--athenor-muted); font-size: 12px; }
.ath-sv-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 0 0 8px; font-size: 13px; }
.ath-sv-legend li { display: flex; align-items: center; gap: 6px; }
.ath-sv-legend .ath-sv-mark { position: static; margin: 0; }
.ath-sv-plot-spread.is-key { position: static; display: inline-block; width: 22px; }
.ath-sv-own dt { font-weight: 600; margin-top: 10px; }
.ath-sv-own dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.ath-folder-all { margin: 0 0 12px; }
.ath-lti { border: 1px solid var(--color-divider); border-radius: 14px; padding: 20px; background: var(--color-surface); display: flex; flex-direction: column; gap: 10px; }
.ath-lti p { margin: 0; }
.ath-lti-form { margin: 4px 0; }
.ath-fb-dates { margin: 0 0 8px; }
.ath-book-print-bar { margin: 0 0 10px; }
.ath-book-print { display: none; }
@media print {
  body.ath-printing * { visibility: hidden !important; }
  body.ath-printing .ath-book-print, body.ath-printing .ath-book-print * { visibility: visible !important; }
  body.ath-printing .ath-book-print { display: block; position: absolute; inset: 0 auto auto 0; width: 100%; }
  .ath-book-print-chapter { break-inside: auto; page-break-before: auto; margin-bottom: 18px; }
}

/* ── F3-CONTENT-01 — Lesson presentation (timer, menu, slideshow, linked media) · IMS outside links ─────────────── */
.ath-ls-timer { display: flex; gap: 6px; align-items: baseline; margin: 0 0 12px; font-variant-numeric: tabular-nums; }
.ath-ls-clock { font-weight: 600; }
.ath-ls-menu { margin: 0 0 16px; }
.ath-ls-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ath-ls-menu-item { border: 1px solid var(--color-border, #d9d6cf); background: transparent; border-radius: 6px; padding: 6px 10px; font: inherit; cursor: pointer; }
.ath-ls-menu-item.is-current { font-weight: 600; border-color: currentColor; }
.ath-ls-slide { width: 100%; box-sizing: border-box; padding: 16px; border-radius: 8px; overflow: auto; border: 1px solid var(--color-border, #d9d6cf); }
.ath-ls-media { margin: 20px 0 0; padding-top: 12px; border-top: 1px solid var(--color-border, #d9d6cf); }
.ath-ls-media-h { font-size: 1rem; margin: 0 0 8px; }
.ath-ims-external { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--color-border, #d9d6cf); border-radius: 8px; }
.ath-ims-external p { margin: 0 0 6px; }
@media (max-width: 480px) { .ath-ls-menu ul { flex-direction: column; } .ath-ls-menu-item { width: 100%; text-align: left; } }
/* F3-CONTENT-01 — a keyboard way past a runtime frame (visible only when focused) */
.ath-rt-skip { position: absolute; left: -9999px; }
.ath-rt-skip:focus { position: static; display: inline-block; margin: 0 0 8px; padding: 6px 10px; border-radius: 6px; background: var(--color-accent, #5b4fc4); color: #fff; text-decoration: none; }

/* ── F4-PLAYER-FIX-01 — what the activity shows inside the Player (its layout: athenor.css · Lesson player) ─────────────
   Presentation only: every state these elements show comes from Moodle (progress re-read after each learner action). */

/* the activity column: running text keeps a reading measure, activities and runtimes use the column */
.ath-pl-body[data-kind="activity"] { max-width: 1080px; }
.ath-pl-body[data-kind="runtime"] { max-width: none; }
/* F4-MEDIA-NAV-FIX-01 — approved direct media (a URL activity) played in the Player: the workspace width, never taller than the
   viewport leaves room for (the title above, the action bar below), in the media's own aspect ratio (--ath-ar, set from the
   file's metadata; 16:9 until known) — no letterbox, no side margins beyond what the height bound requires. */
/* Moodle's course completion beside the header progress: on a narrow header the words are kept for assistive technology and
   the check alone is shown, so "100% · 10 / 10" never wraps or overflows (F4-MEDIA-NAV-FIX-01, regression of F4-PROGRESS-CORRECTNESS-01) */
.ath-pl-body[data-kind="media"] { max-width: none; }
.ath-direct-media { --ath-ar: 1.7778; --ath-media-maxh: max(200px, calc(var(--vh100, 100vh) - 410px)); margin: 0; width: 100%; }
.ath-direct-media video { display: block; width: 100%; max-width: min(100%, calc(var(--ath-media-maxh) * var(--ath-ar))); aspect-ratio: var(--ath-ar); height: auto; margin: 0 auto; background: #000; border-radius: 10px; }
.ath-direct-media audio { display: block; width: 100%; max-width: 640px; }
.ath-res:has(> .ath-direct-media) { align-items: stretch; }
.ath-pl-undo { min-height: 32px; padding: 2px 10px; border: 1px solid var(--color-divider); border-radius: 8px; background: var(--color-surface); font: inherit; font-size: 13px; color: var(--color-text); cursor: pointer; }
.ath-pl-undo:hover { border-color: var(--athenor-muted); }
.ath-pl-undo:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (pointer: coarse) { .ath-pl-undo { min-height: 44px; } }
@media (min-width: 1600px) { .ath-pl-body[data-kind="reading"] .athenor-player-prose { font-size: 18px; } }

/* footer: Previous · the ONE primary step · Next — nothing clips; long titles ellipsize */

/* notes / resources / transcript: closed by default, an on-demand sheet over the workspace (never a permanent column) */
/* a manually tracked activity: its ONE primary is the footer's (Mark as done → Next, P0-01) — the activity's own buttons keep
   their behaviour and are drawn in the secondary style while it is open */
/* F4-COMPLETION-SEMANTICS-01: the demotion is instant — it now also happens when Moodle reports the activity complete (after a
   re-read, while the activity is on screen), and a colour fade would pass through a low-contrast mid-point */
[data-primary-in-footer] .ath-pl-body .btn-primary { background: var(--color-surface); border-color: rgba(27, 28, 34, 0.16); color: var(--color-text); box-shadow: none; transition: none; }
[data-primary-in-footer] .ath-pl-body .btn-primary:hover { background: color-mix(in srgb, var(--color-text) 7%, var(--color-surface)); border-color: rgba(27, 28, 34, 0.24); box-shadow: none; }
/* a confirmed completion (Moodle's re-read): one brief, restrained pop on the ring and the completed tag */
@keyframes ath-pl-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.ath-pl-pop { display: inline-grid; animation: ath-pl-pop .5s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .ath-pl-pop { animation: none; } }