/* The Academy and the badge check (Task 3). Built on the tokens in styles.css; every text colour here is 4.5:1 or
   better on its background (checked against the token values), status is always said in words as well as
   colour, and everything fits one column at 375 px. Class names start with ac- so other areas never collide. */

.ac-page { gap: var(--s5); }
.ac-head { display: grid; gap: var(--s2); }
.ac-head h1 { margin: 0; }
.ac-head p { margin: 0; }
.ac-meta { display: flex; align-items: flex-start; gap: 6px; color: var(--muted); font-size: var(--fs-small); margin: 0; }
.ac-meta .icon { width: 16px; height: 16px; margin-top: 2px; }

/* ---- breadcrumbs ---- */
.ac-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: var(--fs-small); }
.ac-crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.ac-crumbs li + li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 10px 0 6px; border-top: 2px solid var(--line-strong); border-right: 2px solid var(--line-strong); transform: rotate(45deg); }
.ac-crumbs a { color: var(--muted); display: inline-flex; align-items: center; min-height: 32px; }
.ac-crumbs a:hover { color: var(--ink); }
.ac-crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* ---- progress and status ---- */
.ac-progress { display: grid; gap: 6px; }
.ac-bar { height: 8px; border-radius: var(--r-pill); background: var(--sunk); border: 1px solid var(--line); overflow: hidden; }
.ac-bar span { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); }
.ac-progress-text { font-size: 13px; color: var(--muted); }
.ac-status { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: var(--fs-small); font-weight: 650; color: var(--ink); }
.ac-status .icon { width: 18px; height: 18px; margin-top: 1px; }
.ac-status-done { color: var(--ok); }
.ac-status-locked { color: var(--muted); }
.ac-status-ready { color: var(--accent-deep); }
.ac-status-started .icon { color: var(--accent); }
.ac-why { display: flex; gap: 6px; align-items: flex-start; margin: var(--s2) 0 0; color: var(--muted); font-size: var(--fs-small); }
.ac-why .icon { width: 16px; height: 16px; margin-top: 2px; }

/* ---- callouts (tips, warnings, notes, the safety notice): a word label and an icon, never colour alone ---- */
.ac-callout { border-radius: var(--radius); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-left-width: 5px; background: var(--sunk); color: var(--ink); margin: 0 0 var(--s4); }
.ac-callout p { margin: 0; }
.ac-callout p + p { margin-top: var(--s1); }
.ac-callout-label { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.ac-callout-label .icon { width: 18px; height: 18px; }
.ac-tip { background: var(--ok-soft); border-color: #b9dcc7; border-left-color: var(--ok); color: #154d2f; }
.ac-warn { background: var(--warn-soft); border-color: #ecd59e; border-left-color: var(--warn); color: #5c3c00; }
.ac-note { background: var(--sunk); border-color: var(--line); border-left-color: var(--line-strong); }
.ac-course-notice { margin: 0; }

/* ---- the catalog ---- */
.ac-visitor { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; }
.ac-visitor p { margin: 0; max-width: 60ch; }
.ac-next { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: center; justify-content: space-between; background: var(--accent-soft); border-color: #e9c3b0; }
.ac-next > div { min-width: 0; flex: 1 1 260px; }
.ac-kicker { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-deep); margin: 0 0 var(--s1); }
.ac-next-label { margin: 0; font-weight: 700; font-size: 17px; }
.ac-levels { display: grid; gap: var(--s4); }
@media (min-width: 760px) { .ac-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ac-track { display: grid; gap: var(--s3); }
.ac-track-head { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: baseline; }
.ac-track-head h2 { margin: 0; font-size: clamp(21px, 4vw, 24px); }
.ac-track-text { margin: 0; }
.ac-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
@media (min-width: 760px) { .ac-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ac-card { position: relative; display: grid; gap: var(--s2); align-content: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); box-shadow: var(--e1); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.ac-card:hover { border-color: var(--line-strong); box-shadow: var(--e2); }
.ac-card:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.ac-card-title { margin: 0; font-size: 18px; }
.ac-card-title a { color: var(--ink); text-decoration: none; }
.ac-card-title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.ac-card-title a:focus-visible { outline: none; }
.ac-card-summary { margin: 0; color: var(--muted); font-size: 15px; }
.ac-card.is-done { border-color: #b9dcc7; }
.ac-card.is-locked { background: #fbfaf8; }
.ac-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.ac-badge-link { display: inline-flex; border-radius: var(--r-pill); text-decoration: none; min-height: 44px; align-items: center; }
.ac-badge-link:hover .badge-chip { border-color: var(--accent); }
.ac-rules { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s1); }
.ac-howto p { margin: 0; }

/* ---- a course ---- */
.ac-course-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-items: start; }
@media (min-width: 860px) { .ac-course-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .ac-quiz-box { position: sticky; top: 88px; } }
.ac-quiz-box { display: grid; gap: var(--s3); }
.ac-quiz-box > * { margin: 0; }
.ac-quiz-box .btn { justify-self: start; }
.ac-lessons { list-style: none; margin: 0; padding: 0; }
.ac-lesson + .ac-lesson { border-top: 1px solid var(--line); }
.ac-lesson a { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s1); min-height: 60px; color: var(--ink); text-decoration: none; border-radius: var(--r-sm); }
.ac-lesson a:hover { background: var(--bg); }
.ac-lesson a > .icon { color: var(--muted); margin-left: auto; }
.ac-lesson-n { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line-strong); font-weight: 800; font-size: 14px; color: var(--ink); }
.ac-lesson-n .icon { width: 18px; height: 18px; }
.is-read .ac-lesson-n { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.ac-lesson-body { display: grid; gap: 2px; min-width: 0; }
.ac-lesson-title { font-weight: 650; }
.ac-lesson-meta { display: flex; flex-wrap: wrap; gap: 4px var(--s3); font-size: 13px; color: var(--muted); }
.ac-read-word { font-weight: 650; }
.is-read .ac-read-word { color: var(--ok); }
.ac-sources ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s1); font-size: 15px; }
/* Source links are long unbroken addresses: let them wrap anywhere so a phone never scrolls sideways. */
.ac-sources li { overflow-wrap: anywhere; }

/* ---- the lesson reader ---- */
.ac-reader { max-width: 760px; }
.ac-video { margin: 0; }
.ac-video video { width: 100%; border-radius: var(--radius); background: #000000; display: block; }
.ac-lesson-text { font-size: 17px; line-height: 1.65; max-width: 68ch; }
.ac-lesson-text h2 { margin: var(--s6) 0 var(--s3); font-size: 21px; }
.ac-lesson-text > h2:first-child { margin-top: 0; }
.ac-lesson-text p { margin: 0 0 var(--s4); }
.ac-lesson-text ul { margin: 0 0 var(--s4); padding-left: 1.3em; display: grid; gap: var(--s1); }
.ac-lesson-text .ac-callout { font-size: 16px; line-height: 1.55; }
.ac-lesson-text .ac-callout p { margin: 0; }
.ac-lesson-text .ac-callout p + p { margin-top: var(--s1); }
.ac-keypoints ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.ac-keypoints li { display: flex; gap: var(--s2); align-items: flex-start; }
.ac-keypoints .icon { color: var(--ok); margin-top: 3px; }
.ac-lesson-actions { display: grid; gap: var(--s3); justify-items: start; }
.ac-lesson-actions > * { margin: 0; }
.ac-pager { display: grid; gap: var(--s3); }
@media (min-width: 640px) { .ac-pager { grid-template-columns: 1fr 1fr; } }
.ac-pager a { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; min-height: 60px; }
.ac-pager a:hover { border-color: var(--line-strong); }
.ac-pager a > span { display: grid; min-width: 0; }
.ac-pager .icon { color: var(--accent); }
.ac-pager-word { font-size: 13px; color: var(--muted); font-weight: 650; }
.ac-pager-next { justify-content: flex-end; text-align: right; }
@media (min-width: 640px) { .ac-pager-next { grid-column: 2; } }

/* ---- the quiz ---- */
.ac-quiz { display: grid; gap: var(--s4); }
.ac-q { margin: 0; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); min-width: 0; }
/* A floated legend stays inside the box instead of sitting on its border. */
.ac-q legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--s3); }
.ac-q legend + * { clear: both; }
.ac-q-n { display: block; font-size: 13px; font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.ac-q-text { display: block; font-size: 17px; font-weight: 700; line-height: 1.35; margin-top: var(--s1); }
.ac-q.is-missing { border-color: var(--bad); box-shadow: inset 4px 0 0 var(--bad); }
.ac-q.is-missing .ac-q-text::after { content: "Not answered yet"; display: block; margin-top: var(--s1); font-size: 14px; font-weight: 650; color: var(--bad); }
.ac-choices { display: grid; gap: var(--s2); }
.ac-choice { display: flex; align-items: flex-start; gap: var(--s3); padding: 12px 14px; min-height: 48px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; font-size: 16px; }
.ac-choice input { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--accent); }
.ac-choice:hover { background: var(--bg); }
.ac-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.ac-choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.ac-quiz-foot { display: grid; gap: var(--s3); }
.ac-intro > * { margin: 0; }
.ac-intro .ac-why { margin: 0; }
.ac-answered { margin: 0; font-weight: 650; }

/* ---- the result and its moment of celebration (still when motion is reduced) ---- */
.ac-result { display: grid; gap: var(--s2); border-top: 6px solid var(--line-strong); }
.ac-result.is-pass { border-top-color: var(--ok); }
.ac-result.is-fail { border-top-color: var(--accent); }
.ac-result h1, .ac-result p { margin: 0; }
.ac-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); }
.ac-score-big { font: 850 clamp(34px, 8vw, 44px)/1 var(--font-head); letter-spacing: -0.02em; }
.ac-celebrate { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 70%); border-color: #e9c3b0; }
.ac-celebrate h2 { position: relative; }
.ac-burst { position: absolute; top: 10px; right: 14px; display: flex; gap: 6px; color: var(--amber); }
.ac-burst .icon { width: 22px; height: 22px; animation: ac-float 1.6s var(--ease) both; }
.ac-burst .icon:nth-child(2) { width: 28px; height: 28px; color: var(--accent); animation-delay: 120ms; }
.ac-burst .icon:nth-child(3) { animation-delay: 240ms; }
.ac-celebrate .ac-badges li { animation: ac-pop 520ms var(--ease) both; animation-delay: calc(var(--i, 0) * 140ms + 150ms); }
@keyframes ac-pop { from { opacity: 0; transform: scale(0.6) translateY(6px); } 60% { opacity: 1; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes ac-float { from { opacity: 0; transform: translateY(12px) scale(0.5) rotate(-20deg); } 50% { opacity: 1; } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ac-celebrate .ac-badges li, .ac-burst .icon { animation: none; opacity: 1; transform: none; }
  .ac-card { transition: none; }
}
.ac-missed { margin: 0; padding-left: 1.3em; display: grid; gap: var(--s4); }
.ac-missed p { margin: 0; }
.ac-missed-q { font-weight: 700; margin-bottom: var(--s1) !important; }

/* ---- the badge check ---- */
.ac-verdict { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); border-radius: var(--radius); border: 1px solid var(--line); background: var(--sunk); color: var(--ink); }
.ac-verdict .icon { width: 28px; height: 28px; flex: 0 0 auto; }
.ac-verdict strong { display: block; font-size: 18px; }
.ac-verdict.is-valid { background: var(--ok-soft); border-color: #b9dcc7; color: #154d2f; }
.ac-verdict.is-revoked { background: var(--bad-soft); border-color: #f2b8b1; color: #7a1610; }
.ac-cred { display: grid; gap: var(--s4); }
.ac-cred-chip .badge-chip { font-size: 16px; padding: 8px 14px; }
.ac-facts { margin: 0; display: grid; gap: var(--s3); }
.ac-facts > div { display: grid; gap: 2px; padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.ac-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 640px) { .ac-facts > div { grid-template-columns: 11rem 1fr; gap: var(--s3); } }
.ac-facts dt { font-weight: 700; font-size: var(--fs-small); color: var(--muted); }
.ac-facts dd { margin: 0; }
.ac-code { font: 14px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px 6px; }