/* =====================================================================
   learning.css  —  styles for the seventh tab.

   Inherits the explorer's existing custom properties (--bg, --fg,
   --muted, --line, --accent and friends) so the learning area matches
   the catalogue without redefining a palette. Everything here is
   class-based: no inline styles anywhere, which is what lets the CSP
   use style-src 'self' with no 'unsafe-inline'.

   Accessibility commitments encoded here:
     - focus is always visibly outlined, never only colour-shifted
     - every interactive target is at least 44px tall on touch
     - all motion is wrapped in prefers-reduced-motion
     - nothing conveys meaning by colour alone
   ===================================================================== */

/* ---------- layout ---------- */

.lrn-intro { margin: 0 0 20px; }
.lrn-intro h2 { margin: 0 0 8px; font-size: 1.4rem; }
.lrn-intro p { margin: 0 0 8px; max-width: 70ch; }

.lrn-summary,
.lrn-sessionwrap,
.lrn-lessonwrap,
.lrn-promptwrap,
.lrn-datawrap { margin: 0 0 20px; }

.lrn-muted {
  color: var(--muted);
  font-size: 0.92rem;
  max-width: 70ch;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- notes ---------- */

.lrn-note {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 6px;
  max-width: 80ch;
  font-size: 0.95rem;
}
/* Each variant carries a text prefix as well as a colour, so the
   distinction survives greyscale, colour-blindness and high contrast. */
.lrn-note--warn { border-left-color: #e0a030; }
.lrn-note--warn::before { content: "Warning: "; font-weight: 700; }
.lrn-note--info { border-left-color: #4a9ad0; }
.lrn-note--info::before { content: "Note: "; font-weight: 700; }
.lrn-note--ok { border-left-color: #4caf7d; }
.lrn-note--ok::before { content: "Done: "; font-weight: 700; }

/* ---------- summary stats ---------- */

.lrn-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}
.lrn-stat {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.lrn-stat dt {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.lrn-stat dd {
  margin: 4px 0 0;
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lrn-stat__hint {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

/* ---------- 14-day activity strip ----------
   Presence only. An inactive day is a quiet outline, never a red mark
   or a broken-chain motif: missing a day is not a failure state. */

.lrn-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 10px;
}
.lrn-cell {
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
}
.lrn-cell.is-active {
  background: var(--accent, #4caf7d);
  border-color: var(--accent, #4caf7d);
}
.lrn-cell.is-today {
  outline: 2px solid var(--fg);
  outline-offset: 1px;
}

/* ---------- category coverage ---------- */

.lrn-cats { display: grid; gap: 8px; margin: 12px 0 0; }
.lrn-cat {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 2fr auto;
  gap: 10px;
  align-items: center;
  font-size: 0.92rem;
}
.lrn-cat__count { font-variant-numeric: tabular-nums; color: var(--muted); }
.lrn-bar {
  height: 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
}
.lrn-bar__fill {
  display: block;
  height: 100%;
  background: var(--accent, #4caf7d);
}
/* Discrete widths, because a computed width would need an inline style
   and therefore 'unsafe-inline' in the CSP. */
.lrn-bar__fill--0   { width: 0; }
.lrn-bar__fill--10  { width: 10%; }
.lrn-bar__fill--20  { width: 20%; }
.lrn-bar__fill--30  { width: 30%; }
.lrn-bar__fill--40  { width: 40%; }
.lrn-bar__fill--50  { width: 50%; }
.lrn-bar__fill--60  { width: 60%; }
.lrn-bar__fill--70  { width: 70%; }
.lrn-bar__fill--80  { width: 80%; }
.lrn-bar__fill--90  { width: 90%; }
.lrn-bar__fill--100 { width: 100%; }

/* ---------- session ---------- */

.lrn-start,
.lrn-session-done {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.lrn-start h3,
.lrn-session-done h3 { margin: 0 0 8px; }
.lrn-start p,
.lrn-session-done p { margin: 0 0 10px; max-width: 70ch; }

.lrn-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 12px;
}
.lrn-progress__text {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}
.lrn-chip {
  margin: 0;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.82rem;
}
.lrn-chip--new { border-color: #4a9ad0; }
.lrn-chip--review { border-color: #e0a030; }

.lrn-session-notes {
  margin: 0 0 12px;
  padding: 10px 12px 10px 28px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  font-size: 0.92rem;
  color: var(--muted);
  max-width: 80ch;
}

/* ---------- lesson ---------- */

.lrn-lesson {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.lrn-eyebrow {
  margin: 0 0 4px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.lrn-lesson h3 { margin: 0 0 12px; font-size: 1.2rem; }
.lrn-lesson h4 { margin: 18px 0 6px; font-size: 0.95rem; }

.lrn-model {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-left: 4px solid var(--accent, #4caf7d);
  background: rgba(127, 127, 127, 0.08);
  border-radius: 0 6px 6px 0;
}
.lrn-model p { margin: 0; max-width: 70ch; }
.lrn-model__label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 4px !important;
}

.lrn-objectives,
.lrn-pitfalls,
.lrn-rubric,
.lrn-errors,
.lrn-warnings,
.lrn-factors { margin: 0 0 10px; padding-left: 22px; max-width: 80ch; }
.lrn-objectives li,
.lrn-pitfalls li,
.lrn-rubric li,
.lrn-factors li { margin: 0 0 6px; }

.lrn-explain p,
.lrn-modelanswer__body p { margin: 0 0 10px; max-width: 70ch; }

.lrn-kql {
  margin: 0 0 10px;
  padding: 12px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(127, 127, 127, 0.08);
  font-size: 0.86rem;
  line-height: 1.5;
}
.lrn-kql code { white-space: pre; }

.lrn-links { margin-top: 18px; }
.lrn-linkrow { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.lrn-link {
  padding: 6px 10px;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
}
.lrn-link:hover { border-color: var(--accent, #4caf7d); }

.lrn-recall-first > summary { cursor: pointer; padding: 8px 0; }

/* ---------- prompt ---------- */

.lrn-prompt {
  padding: 16px;
  border: 2px solid var(--accent, #4caf7d);
  border-radius: 8px;
}
.lrn-question { margin: 0 0 12px; font-size: 1.1rem; max-width: 70ch; }

.lrn-scratch-label,
.lrn-import-label {
  display: block;
  margin: 10px 0 4px;
  font-size: 0.88rem;
  font-weight: 600;
}
.lrn-scratch,
.lrn-importbox,
.lrn-exportbox {
  display: block;
  width: 100%;
  max-width: 80ch;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg, transparent);
  color: inherit;
  font: inherit;
  font-size: 0.92rem;
}
.lrn-exportbox { font-family: ui-monospace, monospace; font-size: 0.8rem; }
.lrn-importbox { font-family: ui-monospace, monospace; font-size: 0.8rem; }

.lrn-answer {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(127, 127, 127, 0.06);
}
.lrn-answer h5 {
  margin: 10px 0 4px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.lrn-answer h5:first-child { margin-top: 0; }
.lrn-answer p { margin: 0; max-width: 70ch; }

.lrn-conf,
.lrn-grade {
  margin: 14px 0 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.lrn-conf legend,
.lrn-grade legend {
  padding: 0 6px;
  font-size: 0.9rem;
  font-weight: 600;
}
.lrn-btnrow { display: flex; flex-wrap: wrap; gap: 8px; }

/* Selected state is marked by weight and a thick border as well as
   colour, so it is not conveyed by colour alone. */
.lrn-conf-btn.is-selected {
  border-width: 2px;
  border-color: var(--accent, #4caf7d);
  font-weight: 700;
}
.lrn-conf-btn.is-selected::after { content: " \2713"; }

.lrn-feedback {
  margin: 16px 0 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent, #4caf7d);
  border-radius: 0 6px 6px 0;
}
.lrn-feedback h5 { margin: 12px 0 6px; font-size: 0.95rem; }
.lrn-feedback h5:first-child { margin-top: 0; font-size: 1.05rem; }
.lrn-feedback p { margin: 0 0 8px; max-width: 70ch; }

.lrn-scenario,
.lrn-modelanswer {
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 6px;
}
.lrn-scenario > summary,
.lrn-modelanswer > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 4px 0;
}
.lrn-scenario h5 { margin: 12px 0 4px; font-size: 0.88rem; }
.lrn-scenario p { margin: 0 0 8px; max-width: 70ch; }

/* ---------- data management ---------- */

.lrn-data {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.lrn-data > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 4px 0;
}
.lrn-data h4 { margin: 18px 0 6px; font-size: 0.98rem; }
.lrn-data p { margin: 0 0 10px; max-width: 75ch; }
.lrn-privacy p { margin: 0 0 10px; max-width: 75ch; }

.lrn-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}

.lrn-import-result:empty,
.lrn-reset-confirm:empty { display: none; }
.lrn-import-result,
.lrn-reset-confirm { margin-top: 12px; }

/* ---------- buttons ----------
   Reuses the explorer's .btn where present; these rules only add the
   touch target floor and the danger variant. */

.lrn-datawrap .btn,
.lrn-promptwrap .btn,
.lrn-sessionwrap .btn {
  min-height: 44px;
  padding-inline: 14px;
}
.btn--danger {
  border-color: #c0392b;
  color: #e74c3c;
}
.btn--danger:hover {
  background: #c0392b;
  color: #fff;
}

/* ---------- focus ----------
   Always a visible outline with offset, never a colour-only change,
   and never removed. */

.lrn-datawrap :focus-visible,
.lrn-promptwrap :focus-visible,
.lrn-sessionwrap :focus-visible,
.lrn-lessonwrap :focus-visible,
.lrn-summary :focus-visible,
.lrn-link:focus-visible,
.lrn-kql:focus-visible {
  outline: 3px solid var(--accent, #4caf7d);
  outline-offset: 2px;
}

/* ---------- small screens / touch ---------- */

@media (max-width: 620px) {
  .lrn-cat {
    grid-template-columns: 1fr auto;
  }
  .lrn-cat .lrn-bar { grid-column: 1 / -1; }
  .lrn-btnrow .btn { flex: 1 1 100%; }
  .lrn-stats { grid-template-columns: 1fr 1fr; }
}

@media (pointer: coarse) {
  .lrn-link { min-height: 44px; padding: 10px 14px; }
  .lrn-cell { width: 26px; height: 26px; }
}

/* ---------- reduced motion ----------
   There is no essential animation in this area. These rules make that
   explicit and neutralise any transition inherited from the explorer's
   base stylesheet. */

@media (prefers-reduced-motion: reduce) {
  .lrn-datawrap *,
  .lrn-promptwrap *,
  .lrn-sessionwrap *,
  .lrn-lessonwrap *,
  .lrn-summary * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- forced colours / high contrast ---------- */

@media (forced-colors: active) {
  .lrn-cell { border: 1px solid CanvasText; background: Canvas; }
  .lrn-cell.is-active { background: Highlight; border-color: Highlight; }
  .lrn-bar { border: 1px solid CanvasText; }
  .lrn-bar__fill { background: Highlight; }
  .lrn-prompt { border-color: CanvasText; }
  .lrn-note { border-color: CanvasText; }
  .lrn-conf-btn.is-selected { border-color: Highlight; }
}

/* ---------- print ---------- */

@media print {
  .lrn-datawrap,
  .lrn-actions,
  .lrn-strip { display: none; }
  .lrn-lesson,
  .lrn-prompt { border: 1px solid #999; break-inside: avoid; }
}