/* PowerShare 2 - Political literacy view (js/features/learn.js)
   Mobile-first; every colour, space and radius comes from css/tokens.css.
   Covers: the topic grid grouped by part, the lesson stepper, the quiz,
   the result panel, the completion certificate, and a print stylesheet for
   the certificate. No inline styles; tokens only. */

/* ── Intro + overall progress ────────────────────────────────────────────── */

.learn-intro {
  margin-bottom: var(--space-5);
  color: var(--colour-text);
  line-height: var(--leading-body);
}

.learn-overall {
  margin-bottom: var(--space-5);
}

.learn-overall-bar {
  height: 10px;
  background: var(--colour-surface-alt);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.learn-overall-fill {
  display: block;
  height: 100%;
  background: var(--colour-brand);
  border-radius: var(--radius-pill);
  transition: width 0.4s ease;
}

.learn-overall-label {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
}

/* ── Certificate call-to-action on the grid ──────────────────────────────── */

.learn-cert-cta {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--colour-brand-pale);
  border: 1px solid var(--colour-brand-light);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.learn-cert-cta p {
  margin: 0;
  color: var(--colour-brand-dark);
  line-height: var(--leading-body);
}

/* ── Topic grid, grouped by part ─────────────────────────────────────────── */

.learn-part {
  margin-bottom: var(--space-6);
}

.learn-part-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  color: var(--colour-brand-dark);
}

.learn-topic-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.learn-topic-card {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  text-align: left;
  width: 100%;
  padding: var(--space-4);
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-left: 4px solid var(--colour-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.learn-topic-card:hover,
.learn-topic-card:focus-visible {
  border-color: var(--colour-brand-light);
  box-shadow: var(--shadow-sm);
}

.learn-topic-card--in-progress { border-left-color: var(--colour-warn); }
.learn-topic-card--complete { border-left-color: var(--colour-brand); }

.learn-topic-icon {
  font-size: var(--text-2xl);
  line-height: 1;
  flex-shrink: 0;
}

.learn-topic-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.learn-topic-title {
  font-weight: 700;
  color: var(--colour-brand-dark);
}

.learn-topic-blurb {
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
  line-height: var(--leading-body);
}

.learn-topic-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
}

.learn-topic-minutes {
  color: var(--colour-text-muted);
}

.learn-topic-state {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-weight: 600;
  background: var(--colour-surface-alt);
  color: var(--colour-text-muted);
}

.learn-topic-state--in-progress {
  background: var(--colour-warn-bg);
  color: var(--colour-warn);
}

.learn-topic-state--complete {
  background: var(--colour-success-bg);
  color: var(--colour-success);
}

/* ── Topic view: header ──────────────────────────────────────────────────── */

.learn-topic-head {
  margin-bottom: var(--space-4);
}

.learn-back {
  margin-bottom: var(--space-3);
}

.learn-topic-heading {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xl);
  color: var(--colour-brand-dark);
}

.learn-topic-sub {
  margin: 0;
  color: var(--colour-text-muted);
  line-height: var(--leading-body);
}

/* ── Lesson stepper ──────────────────────────────────────────────────────── */

.learn-lesson {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.learn-step-count {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--colour-text-muted);
}

.learn-lesson-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  color: var(--colour-brand-dark);
}

.learn-lesson-body {
  color: var(--colour-text);
  line-height: var(--leading-body);
}

.learn-lesson-body p {
  margin: 0 0 var(--space-4);
}

.learn-lesson-body p:last-child { margin-bottom: 0; }

.learn-keypoints {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--colour-surface-alt);
  border-radius: var(--radius-md);
}

.learn-keypoints-title {
  margin: 0 0 var(--space-2);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--colour-brand-dark);
}

.learn-keypoints ul {
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.learn-stepper-nav {
  margin-top: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.learn-stepper-dots {
  display: flex;
  gap: var(--space-1);
}

.learn-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--colour-border-strong);
}

.learn-dot--on { background: var(--colour-brand); }

/* ── Quiz ────────────────────────────────────────────────────────────────── */

.learn-quiz-frame,
.learn-question {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.learn-quiz-frame .learn-question {
  border: none;
  padding: 0;
  background: none;
}

.learn-question-q {
  margin: 0 0 var(--space-4);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--colour-brand-dark);
  line-height: var(--leading-tight);
}

.learn-answers {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.learn-answer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: var(--colour-surface);
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  font: inherit;
  color: inherit;
  line-height: var(--leading-body);
}

.learn-answer:hover:not(:disabled),
.learn-answer:focus-visible {
  border-color: var(--colour-brand-light);
  background: var(--colour-surface-alt);
}

.learn-answer:disabled { cursor: default; }

.learn-answer-marker {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 2px solid var(--colour-border-strong);
  border-radius: var(--radius-pill);
}

.learn-answer--correct {
  border-color: var(--colour-success);
  background: var(--colour-success-bg);
}

.learn-answer--correct .learn-answer-marker {
  border-color: var(--colour-success);
  background: var(--colour-success);
}

.learn-answer--wrong {
  border-color: var(--colour-danger);
  background: var(--colour-danger-bg);
}

.learn-answer--wrong .learn-answer-marker {
  border-color: var(--colour-danger);
  background: var(--colour-danger);
}

.learn-feedback {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.learn-feedback[hidden] { display: none; }

.learn-feedback--correct {
  color: var(--colour-success);
  background: var(--colour-success-bg);
}

.learn-feedback--wrong {
  color: var(--colour-danger);
  background: var(--colour-danger-bg);
}

.learn-question-nav {
  margin-top: var(--space-4);
  display: flex;
  justify-content: flex-end;
}

.learn-question-nav[hidden] { display: none; }

/* ── Result panel ────────────────────────────────────────────────────────── */

.learn-result {
  text-align: center;
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--colour-border);
}

.learn-result--pass {
  background: var(--colour-success-bg);
  border-color: var(--colour-brand-light);
}

.learn-result--fail {
  background: var(--colour-surface-alt);
}

.learn-result-icon {
  font-size: var(--text-3xl);
  line-height: 1;
}

.learn-result-title {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--text-xl);
  color: var(--colour-brand-dark);
}

.learn-result-msg {
  margin: 0 auto var(--space-4);
  max-width: 40ch;
  color: var(--colour-text);
  line-height: var(--leading-body);
}

.learn-result-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

/* ── Use it now ──────────────────────────────────────────────────────────── */

.learn-useit {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--colour-brand-pale);
  border-radius: var(--radius-md);
}

.learn-useit-title {
  margin: 0 0 var(--space-2);
  font-weight: 700;
  color: var(--colour-brand-dark);
}

.learn-useit ul {
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--colour-text);
}

/* ── Certificate ─────────────────────────────────────────────────────────── */

.learn-cert-panel {
  max-width: 720px;
}

.learn-cert-heading {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--text-xl);
  color: var(--colour-brand-dark);
}

.learn-cert-lead {
  margin: 0 0 var(--space-4);
  color: var(--colour-text);
  line-height: var(--leading-body);
}

.learn-cert-label {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--colour-brand-dark);
}

.learn-cert-input {
  width: 100%;
  padding: var(--space-3);
  font: inherit;
  color: var(--colour-text);
  background: var(--colour-surface);
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.learn-cert-input:focus-visible {
  outline: 2px solid var(--focus-ring-colour);
  outline-offset: 1px;
}

.learn-cert-preview {
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--colour-surface);
  margin-bottom: var(--space-4);
}

.learn-cert-preview svg {
  display: block;
  width: 100%;
  height: auto;
}

.learn-cert-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ── Print: show only the certificate preview when printing ──────────────── */

@media print {
  body.learn-printing * { visibility: hidden; }
  body.learn-printing .learn-cert-preview,
  body.learn-printing .learn-cert-preview * { visibility: visible; }
  body.learn-printing .learn-cert-preview {
    position: absolute;
    inset: 0;
    margin: 0;
    border: none;
  }
}

/* ── Wider screens: two-column topic grid ────────────────────────────────── */

@media (min-width: 640px) {
  .learn-topic-grid {
    grid-template-columns: 1fr 1fr;
  }
}