/*
 * Native Moodle/Boost chrome (buttons, links, navbar, login page) is
 * re-themed through Boost's own supported mechanism instead of here:
 * theme_boost/brandcolor + theme_boost/scsspre ($success) + theme_boost/scss
 * (raw CSS, compiled as the LAST rules in Boost's single stylesheet, so it
 * reliably wins the cascade - confirmed against the actual compiled output).
 * See PROJECT_HANDOFF.md for what's set. This file only carries the al-*
 * design-system classes used by our own custom pages.
 */

/* --al-green-700 and --al-amber-ink are darkened past their "textbook" brand
   shade on purpose: at badge/label size (11.5px) the original tones sat at
   ~3.6:1 and ~3.8:1 against their pastel badge backgrounds, below WCAG AA's
   4.5:1 for normal text. Verified via relative-luminance contrast math, not
   eyeballed. */
:root {
  --al-blue: #24598a;
  --al-blue-dark: #1d4870;
  --al-blue-light: #2f6fa6;
  --al-blue-50: #eaf1f8;
  --al-green: #72b579;
  --al-green-700: #437949;
  --al-green-50: #eef7ef;
  --al-amber: #d9a441;
  --al-amber-50: #fdf6e8;
  --al-amber-ink: #8b631a;
  --al-red: #c97064;
  --al-red-50: #fbeeec;
  --al-red-ink: #a04a40;
  --al-ink-900: #1f2937;
  --al-ink-700: #374151;
  --al-ink-500: #6b7280;
  --al-ink-200: #e5e7eb;
  --al-ink-100: #f3f4f6;
  --al-ink-50: #f7f8fa;
}

/* Inter, self-hosted.
 *
 * This used to be three <link>s to fonts.googleapis.com / fonts.gstatic.com on
 * every page: a third-party, render-blocking dependency on the critical path.
 * On a school network that blocks or throttles Google, text either stalls
 * behind the request or falls back mid-load, and every page view leaked the
 * viewer's IP and referrer to a third party.
 *
 * One 48KB variable file (weights 400-700 as real instances - it carries fvar,
 * so no faux bold), served from this plugin. Path is root-relative rather than
 * relative to this file because Moodle also inlines this stylesheet into the
 * aggregated theme CSS at /theme/styles.php/..., where a relative url() would
 * resolve against that path instead. Moodle is served from the domain root
 * here, so a leading slash is correct.
 *
 * Inter is licensed under the SIL Open Font License, which permits hosting it.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/local/acculearnfeedback/fonts/inter-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* One shared focus treatment for every interactive al-* element.
   :focus-visible (not :focus) so mouse clicks don't flash rings, but
   keyboard users always get a clear brand-colored indicator. */
.al-btn:focus-visible,
.al-toolbar__link:focus-visible,
.al-course-link:focus-visible,
.al-radio-pills label:focus-within {
  outline: none;
  box-shadow: 0 0 0 3px rgba(36, 89, 138, .28);
}

/* A competency name / course name that navigates to its Moodle course.
   Deliberately reads as a link at rest (not only on hover): it sits inside a
   card full of non-interactive text, so nothing else signals that it can be
   clicked. The chevron carries no meaning of its own and is hidden from
   assistive tech at the markup level. */
.al-course-link {
  color: var(--al-blue);
  text-decoration: none;
  border-radius: 6px;
}
.al-course-link:hover { color: var(--al-blue-dark); text-decoration: underline; }
.al-course-link .fa {
  font-size: .72em;
  margin-left: 6px;
  opacity: .65;
  vertical-align: middle;
  transition: transform .15s ease;
}
.al-course-link:hover .fa { transform: translateX(2px); }

.al-page { max-width: 900px; margin: 0 auto; padding: 0 4px; }

/* Page title, rendered as the first element INSIDE the content column.
   It used to be pushed through $PAGE->set_heading(), which Boost paints in
   the full-width header region beside the column - visually detached from the
   content it names. */
.al-page__title {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--al-ink-900);
}

.al-page__subtitle {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--al-ink-500);
}

/* Stat rows: wraps on narrow screens instead of crushing the boxes.
   min-width on .al-stat (below) decides when a box drops to a new row. */
.al-stat-row { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }

.al-card {
  background: #fff;
  border: 1px solid var(--al-ink-200);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
  padding: 20px;
  margin-bottom: 16px;
}

.al-card--accent {
  background: var(--al-blue-50);
  border: none;
  border-left: 4px solid var(--al-blue);
  border-radius: 8px;
  padding: 16px;
}

.al-card--flag-mastered   { border-left: 6px solid var(--al-green); }
.al-card--flag-developing { border-left: 6px solid var(--al-amber); }
.al-card--flag-needs      { border-left: 6px solid var(--al-red); }
.al-card--flag-neutral    { border-left: 6px solid var(--al-ink-500); }
.al-card--flag-flagged    { border-left: 6px solid var(--al-red); }
.al-card--flag-approved   { border-left: 6px solid var(--al-green); }
.al-card--flag-pending    { border-left: 6px solid var(--al-ink-500); }

.al-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.al-badge--mastered   { background: var(--al-green-50); color: var(--al-green-700); }
.al-badge--developing { background: var(--al-amber-50); color: var(--al-amber-ink); }
.al-badge--needs       { background: var(--al-red-50); color: var(--al-red-ink); }
.al-badge--neutral     { background: var(--al-ink-100); color: var(--al-ink-700); }
.al-badge--approved    { background: var(--al-green-50); color: var(--al-green-700); }
.al-badge--flagged     { background: var(--al-red-50); color: var(--al-red-ink); }
.al-badge--pending     { background: var(--al-ink-100); color: #656c79; } /* al-ink-500 falls to 4.4:1 on ink-100, below AA */
.al-badge--pill { background: var(--al-blue-50); color: var(--al-blue); border: 1px solid var(--al-blue-50); }
.al-badge--lp1 { background: var(--al-red-50); color: var(--al-red-ink); }
.al-badge--lp2 { background: var(--al-amber-50); color: var(--al-amber-ink); }
.al-badge--lp3 { background: var(--al-blue-50); color: var(--al-blue); }
.al-badge--lp4 { background: var(--al-green-50); color: var(--al-green-700); }

.al-badge__dot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; }

/* ---- Per-question breakdown on the AI feedback page ---- */

.al-question__text {
  font-weight: 600;
  color: var(--al-ink-900);
  margin-bottom: 10px;
}
.al-question__text p:last-child { margin-bottom: 0; }

.al-options { list-style: none; margin: 0; padding: 0; }

.al-option {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--al-ink-200);
  border-left: 4px solid var(--al-ink-200);
  border-radius: 8px;
  font-size: 14px;
  color: var(--al-ink-700);
}
.al-option__text { flex: 1; min-width: 180px; }
.al-option__text p:last-child { margin-bottom: 0; }

/* Correct and chosen-but-wrong are distinguished by BORDER and an explicit
   text tag, not by fill colour alone - a student with colour vision deficiency
   has to be able to tell which row was theirs and which was right. */
.al-option--correct {
  border-color: var(--al-green);
  border-left-color: var(--al-green);
  background: var(--al-green-50);
}
.al-option--wrong {
  border-color: var(--al-red);
  border-left-color: var(--al-red);
  background: var(--al-red-50);
}

/* Single-class selector so the two state rules below (two classes each) win
   on specificity rather than on source order. */
.al-option__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid currentColor;
  color: var(--al-ink-500);
}
.al-option--correct .al-option__tag { color: var(--al-green-700); }
.al-option--wrong .al-option__tag { color: var(--al-red-ink); }

.al-question__why {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--al-blue-50);
  border-left: 3px solid var(--al-blue);
  font-size: 14px;
  color: var(--al-ink-700);
}

.tnum { font-variant-numeric: tabular-nums; }

.al-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease,
              box-shadow .15s ease, transform .1s ease;
}
.al-btn:hover { text-decoration: none; }
.al-btn:active { transform: translateY(1px); }
.al-btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }

.al-btn-primary { background: var(--al-blue); color: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .1); }
.al-btn-primary:hover { background: var(--al-blue-dark); color: #fff; box-shadow: 0 3px 8px rgba(29, 72, 112, .3); }

.al-btn-outline { background: #fff; color: var(--al-blue); border-color: var(--al-blue); }
.al-btn-outline:hover { background: var(--al-blue-50); color: var(--al-blue); }

.al-btn-secondary { background: #fff; color: var(--al-ink-700); border-color: var(--al-ink-200); }
.al-btn-secondary:hover { background: var(--al-ink-50); color: var(--al-ink-700); }

.al-btn-success { background: var(--al-green); color: #fff; }
.al-btn-success:hover { background: var(--al-green-700); color: #fff; }

.al-btn-danger { background: var(--al-red); color: #fff; }
.al-btn-danger:hover { background: var(--al-red-ink); color: #fff; }

.al-btn-warning { background: var(--al-amber); color: #fff; }
.al-btn-warning:hover { background: var(--al-amber-ink); color: #fff; }

.al-btn-ghost { background: transparent; color: var(--al-ink-700); border-color: transparent; }
.al-btn-ghost:hover { background: var(--al-ink-100); color: var(--al-ink-700); }

.al-btn-subtle { background: var(--al-blue-50); color: var(--al-blue); border-color: transparent; }
.al-btn-subtle:hover { filter: brightness(0.97); }

.al-stat {
  flex: 1;
  min-width: 140px;
  background: var(--al-ink-50);
  border: 1px solid var(--al-ink-200);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}
.al-stat strong { display: block; font-size: 20px; color: var(--al-ink-900); }
.al-stat span { display: block; font-size: 12px; color: var(--al-ink-500); margin-top: 2px; }

.al-toolbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: linear-gradient(135deg, var(--al-blue-dark) 0%, var(--al-blue) 55%, var(--al-blue-light) 100%);
  box-shadow: 0 -3px 12px rgba(0, 0, 0, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 20px;
  flex-wrap: wrap;
  gap: 4px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.al-toolbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 12px;
  color: #fff;
  font-size: .85em;
  font-weight: 700;
  letter-spacing: .5px;
}

.al-toolbar__mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.al-toolbar__link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e8ecf5;
  text-decoration: none;
  font-size: .92em;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: 8px;
  transition: background .15s;
}
.al-toolbar__link:hover { background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; }

/* On phones the labeled links wrap the fixed toolbar onto multiple rows,
   which then covers page content (the spacer div behind it is a fixed
   56px). Collapsing to icon-only keeps it a single row at any width;
   the larger tap padding keeps each icon a comfortable touch target. */
@media (max-width: 640px) {
  .al-toolbar { padding: 6px 10px; }
  .al-toolbar__brand { margin-right: 4px; }
  .al-toolbar__link span { display: none; }
  .al-toolbar__link { padding: 12px 14px; }
  .al-toolbar__link i { font-size: 1.15em !important; }
}

.al-table-wrap { overflow-x: auto; border: 1px solid var(--al-ink-200); border-radius: 12px; }
.al-table-wrap table.generaltable { margin: 0; border: none; }
.al-table-wrap table.generaltable thead th {
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: .04em;
  font-weight: 600;
  color: var(--al-ink-500);
  background: var(--al-ink-50);
  border-bottom: 1px solid var(--al-ink-200);
}
.al-table-wrap table.generaltable tbody tr { transition: background .12s ease; }
.al-table-wrap table.generaltable tbody tr:nth-child(even) { background: var(--al-ink-50); }
.al-table-wrap table.generaltable tbody tr:hover { background: var(--al-blue-50); }
.al-table-wrap table.generaltable td { vertical-align: middle; padding-top: 10px; padding-bottom: 10px; }

.al-empty { text-align: center; padding: 48px 24px; }
.al-empty__icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--al-ink-100);
  color: var(--al-ink-500);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 20px;
}
.al-empty__title { font-weight: 600; color: var(--al-ink-700); }
.al-empty__sub { font-size: 13px; color: var(--al-ink-500); margin-top: 4px; }

/* Mastery progress bar - the mastery-percent number alone (e.g. "40%") reads
   as a bare stat with no visual weight; a filled track gives it the same
   at-a-glance "how far along" read a progress bar gives anywhere else.
   Width is set inline per-instance (style="width:NN%"); the tone modifier
   (--mastered/--developing/--needs/--neutral) picks the fill color, mirroring
   the same four tones already used by al-badge and al-card--flag-*. */
.al-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--al-ink-100);
  overflow: hidden;
  margin-top: 6px;
}
.al-progress__bar {
  height: 100%;
  border-radius: 999px;
  transition: width .4s ease;
}
.al-progress__bar--mastered   { background: var(--al-green); }
.al-progress__bar--developing { background: var(--al-amber); }
.al-progress__bar--needs      { background: var(--al-red); }
.al-progress__bar--neutral    { background: var(--al-ink-200); }

/* Icon-prefixed section headings (h4/h5 inside al-card content) - a small
   glyph gives cards something to scan by shape/color before reading text,
   especially useful once a page has several stacked sections. */
.al-page h4 i.fa, .al-page h5 i.fa { color: var(--al-blue); font-size: .85em; margin-right: 7px; opacity: .85; }

/* Pill-style radio groups (pretest entry correct/confidence pickers) */
.al-radio-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.al-radio-pills label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--al-ink-200);
  background: #fff;
  font-size: 12.5px;
  color: var(--al-ink-700);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.al-radio-pills label:hover { border-color: var(--al-blue); }
.al-radio-pills input[type=radio] { accent-color: var(--al-blue); margin: 0; }

/* The confidence selector (.qbehaviour_confidence_*) is NOT styled here.
   It lives in question/behaviour/confidence/styles.css, next to the renderer
   that emits its markup. It used to be defined in both places with two
   different layouts; whichever file loaded last silently won, so editing one
   appeared to do nothing. Keep it in one file. */

/* Subtle entrance for the main content cards - one short fade/rise on
   load, not a looping animation. Gives pages a sense of assembly instead
   of appearing as a flat wall of boxes. */
@keyframes al-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.al-page .al-card { animation: al-rise .3s ease both; }
.al-page .al-card:nth-child(2) { animation-delay: .04s; }
.al-page .al-card:nth-child(3) { animation-delay: .08s; }
.al-page .al-card:nth-child(4) { animation-delay: .12s; }

/* Inline spinner for anything that takes a moment (e.g. track generation). */
.al-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(36, 89, 138, .25);
  border-top-color: var(--al-blue);
  border-radius: 999px;
  animation: spin .7s linear infinite;
  vertical-align: -2px;
}

/* Anyone who asked their OS to reduce motion gets none of the above. */
@media (prefers-reduced-motion: reduce) {
  .al-page .al-card { animation: none; }
  .al-btn, .al-btn:active, .coursebox { transition: none; transform: none; }
  .al-course-link .fa, .al-course-link:hover .fa { transition: none; transform: none; }
}