/* ========================================================================== 
   Miftah Islamiyat — learner experience layer
   Concept A for public course pages; Concept C for My Progress.
   Loaded after the shared structural styles so lesson content remains stable.
   ========================================================================== */

/* The experience layer used to carry a second, slightly different palette:
   its own green, its own gold, its own near-black and its own paper, none of
   which matched base.css. Two greens a shade apart read as a printing error
   rather than as two colours. The --mi-* names are kept so nothing downstream
   has to change, but they are now aliases of the base tokens: one green, one
   gold, one ink, one paper across the whole site. */
:root {
  --mi-navy:      var(--ink-strong);
  --mi-navy-2:    #142b3a;
  --mi-teal:      var(--pine);
  --mi-teal-2:    var(--pine-deep);
  --mi-teal-pale: var(--pine-tint);
  --mi-cream:     var(--paper);
  --mi-warm:      var(--paper-sunk);
  --mi-gold:      var(--gold);
  --mi-gold-pale: var(--gold-tint);
  --mi-line:      var(--rule);
  --mi-card:      var(--paper-raised);
  --mi-shadow:    var(--shadow-lg);

  /* Radii come from the one scale in base.css: --radius-xl for cards and
     panels, --radius-lg for what sits inside them and for controls, 999px for
     pills. This layer used to mix eleven hand-written px values between 11 and
     26, which showed up as cards that did not quite match their neighbours. */

  --theme-colour: var(--mi-teal);
  --theme-pale: var(--mi-teal-pale);
}

/* These must stay on the tokens. Hard-coding a size and a leading here beat
   base.css, which is where the Display and accessibility page's text-size and
   line-spacing controls write their values, so both controls did nothing. */
body {
  background: var(--paper);
  font-family: var(--font-body);
  font-size: var(--size-base);
  line-height: var(--lh-base);
}

p, li { max-width: 72ch; }

/* Header ---------------------------------------------------------------------
   Deep lapis rather than the near-black it used to be, with a saffron hairline
   along the foot: the blue-and-gold of an illuminated manuscript page, which
   is also the whole palette in miniature. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: linear-gradient(180deg, var(--pine-deep) 0%, #17224f 100%);
  backdrop-filter: blur(14px);
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset;
}
.site-header::after {
  height: 3px; bottom: -3px;
  background: linear-gradient(90deg, var(--gold-edge) 0 34%, rgba(255,255,255,.16) 34% 100%);
}
.site-header__inner { min-height: 4.9rem; padding-block: .7rem; gap: var(--s4); }

.brand__mark {
  width: 2.6rem; height: 2.6rem; padding: 0;
  color: var(--gold-edge);
  --mark-void: #17224f;
  background: none; border-radius: 0; box-shadow: none;
  transition: transform .25s var(--ease);
}
.brand__mark svg { display: block; width: 100%; height: 100%; }
.brand:hover .brand__mark { transform: translateY(-1px) rotate(-3deg); }

/* The wordmark is set in the display serif, which is the quickest way for the
   masthead to read as a course rather than as an app. */
.brand__name {
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 600; letter-spacing: -.005em;
}
.brand__subtitle { max-width: 29ch; font-size: .7rem; color: #a9b1d6; }

.nav__link {
  font-size: .84rem; font-weight: 600; color: #ccd2ec;
  border-radius: 999px;
}
.nav__link:hover, .nav__link[aria-expanded="true"] { background: rgba(255,255,255,.13); color: #fff; }
.nav__link--accent {
  padding-inline: 1.05rem; margin-left: var(--s3);
  color: var(--pine-deep); background: var(--gold-edge);
  box-shadow: 0 6px 16px -10px rgba(0,0,0,.8);
}
.nav__link--accent:hover { color: var(--pine-deep); background: #f2dcae; }
.nav__menu { border-radius: var(--radius-lg); }

/* Curriculum theme identities ------------------------------------------------ */
.theme-quran { --theme-colour:#08796f; --theme-pale:#dff5ef; }
.theme-quran-history { --theme-colour:#377e77; --theme-pale:#e3f0ed; }
.theme-seerah { --theme-colour:#b36a13; --theme-pale:#fff0d8; }
.theme-community { --theme-colour:#b75d43; --theme-pale:#fbe7df; }
.theme-hadith { --theme-colour:#4a63a4; --theme-pale:#e9edfb; }
.theme-hadith-history { --theme-colour:#596e9b; --theme-pale:#edf0f7; }
.theme-caliphs { --theme-colour:#aa4d3d; --theme-pale:#f9e7e3; }
.theme-faith { --theme-colour:#6653a5; --theme-pale:#eeeafb; }
.theme-pillars { --theme-colour:#2f8050; --theme-pale:#e4f3e9; }
.theme-exam { --theme-colour:#243f69; --theme-pale:#e7edf7; }
.theme-revision { --theme-colour:#a87818; --theme-pale:#fff1cd; }
.theme-default { --theme-colour:#4d646d; --theme-pale:#eaf0f2; }

/* Shape system: anything you press is a full pill, panels and cards are
   --radius-xl, anything nested inside a card is --radius-lg. Three steps, no
   exceptions, which is what stops a grid of cards looking hand-cut. */
.journey-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.95rem; padding: .7rem 1.35rem;
  border: 1px solid transparent; border-radius: 999px;
  font-family: var(--font-ui); font-size: .89rem; font-weight: 680;
  letter-spacing: .005em;
  line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.journey-btn:hover { transform: translateY(-2px); }
.journey-btn:active { transform: translateY(0) scale(.985); }
.journey-btn--primary { color:#fff; background:var(--pine); box-shadow:0 10px 22px -12px rgba(30,42,94,.85); }
.journey-btn--primary:hover { color:#fff; background:var(--pine-deep); box-shadow:0 14px 26px -12px rgba(30,42,94,.9); }
.journey-btn--secondary { color:var(--pine-deep); background:var(--paper-raised); border-color:var(--rule-strong); }
.journey-btn--secondary:hover { color:var(--pine-deep); border-color:var(--pine); background:var(--pine-tint); }
.journey-btn--quiet { color:var(--ink-strong); background:rgba(255,255,255,.7); border-color:rgba(34,31,46,.16); }
.journey-btn--quiet:hover { color:var(--pine-deep); background:#fff; border-color:var(--pine-edge); }
.journey-btn--danger { color:var(--clay); background:var(--clay-tint); border-color:var(--clay-edge); }
.journey-btn--danger:hover { color:#fff; background:var(--clay); border-color:var(--clay); }

/* Section labels are a saffron rule plus a word. The old decorative dot is
   gone: the rule does the same job and also aligns the label to the heading. */
.journey-eyebrow,
.section-kicker {
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 .8rem;
  font-family: var(--font-ui); font-size: .71rem; font-weight: 750;
  letter-spacing: .15em; text-transform: uppercase; color: var(--gold);
}
.journey-eyebrow::before,
.section-kicker::before {
  content: ""; flex: none;
  width: 1.6rem; height: 2px; border-radius: 2px;
  background: var(--gold-edge);
}
.journey-eyebrow span { display: none; }
.section-heading {
  max-width: 20ch; margin-bottom: .75rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 3vw, 3rem); letter-spacing: -.018em;
}
.section-intro { max-width: 67ch; color: var(--ink-soft); font-size: 1.08rem; }

/* Homepage hero -------------------------------------------------------------- */
.journey-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(120% 90% at 88% 6%, var(--pine-tint) 0%, transparent 58%),
    linear-gradient(168deg, #fffdf8 0%, var(--paper-sunk) 100%);
  border-bottom: 1px solid var(--rule);
}
/* An octagram lattice, the girih figure that repeats across Islamic tilework,
   drawn from four crossed line grids rather than an image so it stays crisp at
   any density and costs nothing to load. */
.journey-hero__motif {
  position:absolute; z-index:-1; inset:0 0 0 42%; opacity:.5;
  --girih: rgba(47,63,132,.16);
  background-image:
    repeating-linear-gradient(45deg,  var(--girih) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(-45deg, var(--girih) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg,   var(--girih) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg,  var(--girih) 0 1px, transparent 1px 46px);
  mask-image: radial-gradient(80% 75% at 72% 34%, #000 20%, transparent 72%);
}
.journey-hero__grid {
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(19rem,.8fr);
  gap:clamp(2.5rem,5vw,5rem); align-items:center;
  padding-block:clamp(3rem,5vw,5rem);
}
/* Sized so the whole hero clears a 900px viewport under the sticky header:
   the headline sets in two lines and the buttons stay above the fold. */
.journey-hero__copy h1 {
  max-width: 30ch; margin-bottom: 1.1rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.35rem, 3.8vw, 3.6rem); line-height:1.09; letter-spacing:-.018em;
}
.journey-hero__sub { max-width:58ch; color:var(--pine); font-size:clamp(1.08rem,1.4vw,1.3rem); font-weight:640; }
.journey-hero__body { max-width:67ch; color:var(--ink-soft); font-size:1.04rem; }
.journey-hero__actions { display:flex; flex-wrap:wrap; gap:.7rem; margin:1.7rem 0 2rem; }

/* The figures read as a set of engraved facts, so they get the serif and a
   saffron rule above rather than the sans and a grey one. */
.journey-stats {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.6rem 1.2rem;
  list-style:none; margin:0; padding:0;
}
.journey-stats li {
  display:flex; gap:.6rem; align-items:baseline; margin:0; padding:.85rem .1rem 0;
  border-top:2px solid var(--gold-edge);
}
.journey-stats strong {
  font-family:var(--font-display); font-weight:600; font-size:2.1rem;
  color:var(--pine); letter-spacing:-.02em;
}
.journey-stats span { font-size:.72rem; line-height:1.35; color:var(--ink-faint); }

.course-pathway {
  position:relative; padding:1.5rem 1.3rem 1.3rem;
  background:rgba(255,255,255,.86); border:1px solid var(--rule-strong);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); backdrop-filter:blur(9px);
}
/* A saffron band across the head of the panel, echoing the header hairline. */
.course-pathway::before {
  content:""; position:absolute; inset:0 auto auto 0; height:4px; width:100%;
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  background:linear-gradient(90deg,var(--gold-edge) 0 40%,var(--pine-edge) 40% 100%);
}
.course-pathway__title { margin:.2rem 0 1rem; font-family:var(--font-ui); font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.pathway-card {
  position:relative; display:grid; grid-template-columns:auto 1fr; gap:.3rem .85rem;
  padding:1.2rem; color:var(--ink-strong); text-decoration:none;
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:var(--radius-lg);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.pathway-card:hover { transform:translateY(-3px); color:var(--ink-strong); box-shadow:var(--shadow-lg); border-color:var(--theme-colour); }
.pathway-card--paper1 { --theme-colour:var(--mi-teal); --theme-pale:var(--mi-teal-pale); }
.pathway-card--paper2 { --theme-colour:var(--indigo); --theme-pale:var(--indigo-tint); }
.pathway-card__number { grid-column:1/3; font-family:var(--font-ui); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--theme-colour); }
.pathway-card__icon { grid-row:2/5; width:3rem; height:3rem; display:grid; place-items:center; color:var(--theme-colour); background:var(--theme-pale); border-radius:var(--radius-lg); }
.pathway-card__icon svg { width:1.55rem; height:1.55rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pathway-card strong { font-family:var(--font-display); font-weight:600; font-size:1.2rem; line-height:1.25; }
.pathway-card > span:not(.pathway-card__number):not(.pathway-card__icon):not(.pathway-card__progress) { color:var(--ink-soft); font-size:.82rem; line-height:1.5; }
.pathway-card small { grid-column:2; color:var(--ink-faint); font-size:.73rem; font-weight:650; }
.pathway-card__progress { grid-column:1/3; display:block; height:7px; margin-top:.55rem; background:var(--paper-deep); border-radius:999px; overflow:hidden; }
.pathway-card__progress i { display:block; height:100%; background:var(--theme-colour); border-radius:999px; }
.course-pathway__connector { display:grid; place-items:center; height:2rem; }
.course-pathway__connector span { width:2px; height:1.25rem; background:var(--rule-strong); position:relative; }
.course-pathway__connector span::after { content:""; position:absolute; left:50%; bottom:-2px; width:7px; height:7px; border-right:2px solid var(--rule-strong); border-bottom:2px solid var(--rule-strong); transform:translateX(-50%) rotate(45deg); }
.course-pathway__note { margin:.9rem .2rem .1rem; color:var(--ink-faint); font-size:.75rem; text-align:center; }

.continue-strip { background:linear-gradient(120deg,var(--pine-deep),#17224f); color:#d6dcf2; border-bottom:3px solid var(--gold-edge); }
.continue-strip__grid { display:grid; grid-template-columns:1fr auto; gap:1.5rem; align-items:center; padding-block:1.4rem; }
.continue-strip__eyebrow { margin:0; color:var(--gold-edge); font-family:var(--font-ui); font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.continue-strip h2 { margin:.2rem 0; color:#fff; font-family:var(--font-display); font-weight:600; font-size:1.6rem; }
.continue-strip p { margin:0; font-size:.82rem; color:#aeb6da; }
.continue-strip__actions { display:flex; gap:.65rem; flex-wrap:wrap; justify-content:flex-end; }
.lesson-pill { display:inline-flex; padding:.18rem .5rem; margin-right:.35rem; border-radius:999px; color:var(--theme-colour); background:var(--theme-pale); font-family:var(--font-ui); font-size:.68rem; font-weight:800; }

/* Shared homepage sections -------------------------------------------------- */
.journey-section { padding-block:clamp(4rem,7vw,6.6rem); }
.journey-section--tint { background:var(--paper-sunk); border-block:1px solid var(--rule); }
.exam-shape { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-top:2rem; }
.exam-step { display:flex; flex-direction:column; min-height:14rem; padding:1.45rem; border:1px solid var(--rule); border-radius:var(--radius-xl); background:var(--paper-raised); box-shadow:0 5px 18px -16px rgba(22,19,31,.5); }
.exam-step > span { align-self:flex-start; margin-bottom:1rem; padding:.28rem .7rem; border-radius:999px; color:var(--gold); background:var(--gold-tint); box-shadow:inset 0 0 0 1px var(--gold-edge); font-family:var(--font-ui); font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
.exam-step strong { font-family:var(--font-display); font-weight:600; font-size:1.3rem; }
.exam-step p { color:var(--ink-soft); font-size:.88rem; }
.exam-step > b { margin-top:auto; color:var(--pine); font-family:var(--font-display); font-size:1.05rem; }
.exam-step--choice { }
.exam-step--choice > span { color:var(--indigo); background:var(--indigo-tint); }
.exam-step--summary { color:#fff; background:linear-gradient(160deg,var(--pine-deep),#17224f); border-color:var(--pine-deep); }
.exam-step--summary strong { color:#fff; }
.exam-step--summary div { display:flex; align-items:baseline; gap:.45rem; padding:.7rem 0; border-top:1px solid rgba(255,255,255,.12); }
.exam-step--summary div b { color:var(--gold-edge); font-family:var(--font-display); font-size:2.2rem; }
.exam-step--summary div span { color:#b6bddd; font-size:.75rem; text-transform:uppercase; letter-spacing:.07em; }
.journey-tip { display:flex; gap:1rem; align-items:flex-start; margin-top:1.6rem; padding:1.3rem 1.4rem; background:var(--gold-tint); border:1px solid var(--gold-edge); border-radius:var(--radius-xl); }
.journey-tip > span { width:2.1rem; height:2.1rem; flex:none; display:grid; place-items:center; border-radius:50%; color:var(--gold); background:var(--gold-edge); }
.journey-tip p { margin:0; color:#5b4413; }

.module-family + .module-family { margin-top:3rem; }
.module-family__heading { display:flex; justify-content:space-between; gap:1rem; align-items:flex-end; margin-bottom:1.2rem; }
.module-family__heading span { font-family:var(--font-ui); font-size:.7rem; font-weight:750; text-transform:uppercase; letter-spacing:.15em; color:var(--gold); }
.module-family__heading h3 { margin:.3rem 0 0; font-family:var(--font-display); font-weight:600; font-size:1.75rem; letter-spacing:-.012em; }
.module-family__heading > a { flex:none; font-family:var(--font-ui); font-size:.84rem; font-weight:750; text-decoration:none; }
.journey-module-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.journey-module-grid--five { grid-template-columns:repeat(5,minmax(0,1fr)); }
/* The colour stripe along the top of every card has gone. The curriculum
   colour now arrives as a wash bleeding down from the top corner, which reads
   as the card being tinted rather than as a card wearing a badge. */
.journey-module {
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; min-height:19.5rem; padding:1.35rem;
  color:var(--ink-strong); text-decoration:none;
  background:
    radial-gradient(90% 60% at 0% 0%, color-mix(in srgb, var(--theme-colour) 9%, transparent) 0%, transparent 68%),
    var(--paper-raised);
  border:1px solid var(--rule); border-radius:var(--radius-xl);
  box-shadow:0 4px 14px -14px rgba(22,19,31,.5);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.journey-module:hover {
  color:var(--ink-strong); transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--theme-colour) 45%, var(--rule));
  box-shadow:var(--shadow-lg);
}
/* Every icon sits in a mihrab-arched plaque, the same silhouette as the brand
   mark. It is the one shape that repeats everywhere and it is what ties a
   module card, a library tile and the masthead into the same family. */
.journey-module__icon, .learning-tool > span, .module-progress__icon,
.paper-module-card__icon, .pathway-card__icon, .progress-summary__icon {
  width:3rem; height:3rem; display:grid; place-items:center;
  color:var(--theme-colour); background:var(--theme-pale);
  border-radius: 46% 46% var(--radius-lg) var(--radius-lg) / 38% 38% var(--radius-lg) var(--radius-lg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-colour) 22%, transparent);
}
.journey-module__icon svg, .learning-tool svg, .module-progress__icon svg, .paper-module-card__icon svg { width:1.55rem; height:1.55rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.journey-module__status { position:absolute; top:1.3rem; right:1.2rem; padding:.22rem .48rem; color:var(--theme-colour); background:var(--theme-pale); border-radius:999px; font-family:var(--font-ui); font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.journey-module > strong { margin-top:1.1rem; font-family:var(--font-display); font-weight:600; font-size:1.18rem; line-height:1.25; }
.journey-module > span:not(.journey-module__icon):not(.journey-module__status):not(.journey-module__progress) { margin-top:.55rem; color:var(--ink-soft); font-size:.8rem; line-height:1.55; }
.journey-module__progress { display:block; height:7px; margin-top:auto; background:var(--paper-deep); border-radius:999px; overflow:hidden; }
.journey-module__progress i { display:block; height:100%; border-radius:999px; background:var(--theme-colour); }
.journey-module small { display:flex; justify-content:space-between; gap:.7rem; margin-top:.65rem; color:var(--ink-faint); font-size:.69rem; }
.journey-module small b { color:var(--theme-colour); }

.learning-tools { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:2rem; }
.learning-tool { display:grid; grid-template-columns:auto 1fr; gap:.2rem .95rem; align-items:start; min-height:10rem; padding:1.35rem; color:var(--ink-strong); text-decoration:none; background:var(--paper-raised); border:1px solid var(--rule); border-radius:var(--radius-xl); transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease); }
.learning-tool:hover { color:var(--ink-strong); transform:translateY(-3px); border-color:color-mix(in srgb, var(--theme-colour) 45%, var(--rule)); box-shadow:var(--shadow-lg); }
.learning-tool > span { grid-row:1/3; }
.learning-tool > span:not(:has(svg)) { font-family:var(--font-ui); font-size:1.35rem; font-weight:800; }
.learning-tool strong { font-family:var(--font-display); font-weight:600; font-size:1.15rem; }
.learning-tool p { margin:.25rem 0 0; color:var(--ink-soft); font-size:.8rem; }
.quality-panel { display:grid; grid-template-columns:1fr auto auto; gap:2rem; align-items:center; margin-top:2.2rem; padding:1.8rem; background:linear-gradient(120deg,var(--pine-tint),var(--gold-tint)); border:1px solid var(--pine-edge); border-radius:var(--radius-xl); }
.quality-panel h3 { margin-bottom:.45rem; }
.quality-panel p { margin:0; color:var(--ink-soft); }
.quality-panel__figures { display:flex; flex-direction:column; align-items:center; min-width:12rem; }
.quality-panel__figures strong { font-family:var(--font-display); font-weight:600; font-size:2.3rem; color:var(--pine); }
.quality-panel__figures span { font-size:.74rem; font-weight:750; text-transform:uppercase; letter-spacing:.06em; }
.quality-panel__figures small { margin-top:.25rem; color:var(--ink-faint); font-size:.68rem; text-align:center; }

/* Progress dashboard -------------------------------------------------------- */
.progress-dashboard { background:var(--paper); }
.progress-welcome { background:linear-gradient(150deg,var(--pine-deep),#17224f); color:#d6dcf2; border-bottom:3px solid var(--mi-teal); }
.progress-welcome__grid { display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:center; padding-block:2.8rem; }
.progress-welcome h1 { color:#fff; margin-bottom:.5rem; }
.progress-welcome p { margin:0; max-width:58ch; color:#aeb6da; }
.progress-welcome .journey-eyebrow { color:var(--gold-edge); }
.progress-welcome__privacy { max-width:20rem; padding:1rem 1.1rem; border:1px solid rgba(255,255,255,.15); border-radius:var(--radius-lg); background:rgba(255,255,255,.06); }
.progress-welcome__privacy strong { display:block; color:#fff; font-family:var(--font-ui); }
.progress-welcome__privacy span { display:block; color:#aeb6da; font-size:.76rem; line-height:1.45; }
.progress-dashboard__body { padding-block:2rem 5rem; }
.next-learning { display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:center; margin-top:-3.2rem; margin-bottom:3rem; padding:1.5rem; background:#fff; border:1px solid var(--mi-line); border-left:6px solid var(--mi-gold); border-radius:var(--radius-xl); box-shadow:var(--mi-shadow); }
.next-learning h2 { margin:.2rem 0 .4rem; font-size:1.65rem; }
.next-learning p { margin:0; color:var(--ink-soft); }
.next-learning__actions { display:flex; gap:.6rem; flex-wrap:wrap; justify-content:flex-end; }
.dashboard-progress { display:grid; grid-template-columns:1fr auto; gap:.65rem; align-items:center; max-width:34rem; margin-top:1rem; }
.dashboard-progress__track { height:9px; overflow:hidden; background:var(--paper-deep); border-radius:999px; }
.dashboard-progress__track i { display:block; height:100%; background:var(--mi-gold); border-radius:999px; }
.dashboard-progress > span { color:var(--ink-faint); font-size:.72rem; }
.dashboard-section-heading { display:flex; justify-content:space-between; align-items:flex-end; margin:3rem 0 1.2rem; }
.dashboard-section-heading h2 { margin:0; font-size:1.8rem; }
.progress-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.progress-summary { display:flex; flex-direction:column; min-height:12.2rem; padding:1.2rem; background:#fff; border:1px solid var(--mi-line); border-radius:var(--radius-xl); }
.progress-summary__icon { width:2.7rem; height:2.7rem; display:grid; place-items:center; margin-bottom:1rem; border-radius:var(--radius-lg); color:var(--theme-colour,var(--mi-teal)); background:var(--theme-pale,var(--mi-teal-pale)); font-family:var(--font-ui); font-weight:800; }
.progress-summary--overall { --theme-colour:var(--mi-teal); --theme-pale:var(--mi-teal-pale); }
.progress-summary--paper1 { --theme-colour:#0c7b6f; --theme-pale:#dff5ef; }
.progress-summary--paper2 { --theme-colour:#3f578b; --theme-pale:#e8edf8; }
.progress-summary--quiz { --theme-colour:var(--mi-gold); --theme-pale:var(--mi-gold-pale); }
.progress-summary > strong { font-family:var(--font-ui); font-size:.86rem; }
.progress-summary > b { margin-top:.35rem; color:var(--theme-colour); font-family:var(--font-ui); font-size:1.25rem; }
.progress-summary__track { height:8px; margin-top:auto; overflow:hidden; background:var(--paper-deep); border-radius:999px; }
.progress-summary__track i { display:block; height:100%; background:var(--theme-colour); border-radius:999px; }
.progress-summary__note { margin-top:auto; color:var(--ink-faint); font-size:.7rem; }
.paper-progress-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.paper-progress { display:flex; flex-direction:column; min-height:15rem; padding:1.45rem; color:var(--mi-navy); text-decoration:none; background:#fff; border:1px solid var(--mi-line); border-left:6px solid var(--theme-colour); border-radius:var(--radius-xl); transition:transform .18s ease,box-shadow .18s ease; }
.paper-progress:hover { color:var(--mi-navy); transform:translateY(-2px); box-shadow:var(--mi-shadow); }
.paper-progress--one { --theme-colour:var(--mi-teal); }
.paper-progress--two { --theme-colour:#405b91; }
.paper-progress__label { color:var(--theme-colour); font-family:var(--font-ui); font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.paper-progress > strong { margin:.5rem 0; font-family:var(--font-display); font-weight:600; font-size:1.32rem; line-height:1.28; }
.paper-progress p { color:var(--ink-faint); font-size:.82rem; }
.paper-progress__line { height:8px; margin-top:auto; overflow:hidden; background:var(--paper-deep); border-radius:999px; }
.paper-progress__line i { display:block; height:100%; background:var(--theme-colour); border-radius:999px; }
.paper-progress__footer { display:flex; justify-content:space-between; gap:1rem; margin-top:.7rem; color:var(--ink-faint); font-size:.72rem; }
.paper-progress__footer em { color:var(--theme-colour); font-style:normal; font-weight:750; }
.module-progress-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.module-progress { position:relative; display:flex; flex-direction:column; min-height:13.2rem; padding:1.1rem; color:var(--mi-navy); text-decoration:none; background:#fff; border:1px solid var(--mi-line); border-top:5px solid var(--theme-colour); border-radius:var(--radius-xl); transition:transform .18s ease,box-shadow .18s ease; }
.module-progress:hover { color:var(--mi-navy); transform:translateY(-2px); box-shadow:var(--mi-shadow); }
.module-progress__icon { width:2.65rem; height:2.65rem; }
.module-progress__state { position:absolute; top:1.1rem; right:1rem; color:var(--ink-faint); font-size:.63rem; font-weight:750; text-transform:uppercase; letter-spacing:.06em; }
.module-progress > strong { margin-top:.9rem; font-family:var(--font-ui); font-size:.9rem; line-height:1.3; }
.module-progress__line { height:7px; margin-top:auto; overflow:hidden; background:var(--paper-deep); border-radius:999px; }
.module-progress__line i { display:block; height:100%; background:var(--theme-colour); border-radius:999px; }
.module-progress__footer { display:flex; justify-content:space-between; margin-top:.6rem; color:var(--ink-faint); font-size:.68rem; }
.module-progress__footer em { color:var(--theme-colour); font-style:normal; font-weight:750; }
.progress-activity-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:3rem; }
.activity-panel { padding:1.3rem; background:#fff; border:1px solid var(--mi-line); border-radius:var(--radius-xl); }
.activity-panel__heading { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; border-bottom:1px solid var(--rule); padding-bottom:.9rem; }
.activity-panel__heading h2 { margin:0; font-size:1.25rem; }
.activity-panel__heading a { font-size:.75rem; font-weight:700; }
.activity-list { list-style:none; margin:0; padding:0; }
.activity-list li { max-width:none; margin:0; padding:.8rem .1rem; border-bottom:1px solid var(--paper-deep); }
.activity-list li:last-child { border-bottom:0; }
.activity-list a { display:flex; justify-content:space-between; gap:1rem; text-decoration:none; font-size:.85rem; }
.progress-tools { display:grid; grid-template-columns:1fr minmax(19rem,.65fr); gap:2rem; align-items:start; margin-top:3rem; padding:1.5rem; background:var(--mi-warm); border:1px solid var(--mi-line); border-radius:var(--radius-xl); }
.progress-tools h2 { margin:.1rem 0 .5rem; }
.progress-tools p { margin:0; color:var(--ink-soft); }
.progress-tools__details { background:#fff; border:1px solid var(--mi-line); border-radius:var(--radius-lg); }
.progress-tools__details summary { padding:1rem; cursor:pointer; font-family:var(--font-ui); font-weight:750; }
.progress-tools__content { padding:0 1rem 1rem; }
.progress-tools__content label { display:block; margin:1rem 0; }
.progress-tools__content input { margin-top:.4rem; }

/* Paper dashboards ---------------------------------------------------------- */
.paper-dashboard { --paper-accent:var(--mi-teal); --paper-pale:var(--mi-teal-pale); }
.paper-dashboard--two { --paper-accent:#5f77c2; --paper-pale:var(--pine-tint); }
.paper-dashboard--exam { --paper-accent:#8ea4e0; --paper-pale:var(--pine-tint); }
.paper-dashboard--revision { --paper-accent:var(--gold-edge); --paper-pale:var(--gold-tint); }
.paper-dashboard__hero { position:relative; isolation:isolate; overflow:hidden; color:#d6dcf2; background:linear-gradient(150deg,var(--pine-deep),#17224f); border-bottom:3px solid var(--paper-accent); }
.paper-dashboard--two .paper-dashboard__hero { background:linear-gradient(150deg,#17224f,#2c3a72); }
.paper-dashboard--exam .paper-dashboard__hero { background:linear-gradient(150deg,#161d42,#25306b); }
/* Revision is the one dashboard that used to sit outside the palette, in an
   olive brown left over from the previous scheme. It is now lapis shading to
   plum like the rest of the family; saffron does the identifying work through
   the accent rule, the progress bar and the eyebrow. */
.paper-dashboard--revision .paper-dashboard__hero { background:linear-gradient(150deg,var(--pine-deep),#4a2f63); }
.paper-dashboard__motif { position:absolute; z-index:-1; inset:0 0 0 56%; opacity:.15; background-image:radial-gradient(circle at 50% 50%,transparent 0 10px,rgba(255,255,255,.35) 11px 12px,transparent 13px),linear-gradient(45deg,transparent 48%,rgba(255,255,255,.25) 49% 51%,transparent 52%); background-size:70px 70px; }
.paper-dashboard__hero-grid { display:grid; grid-template-columns:1fr minmax(18rem,.42fr); gap:3rem; align-items:center; padding-block:3.8rem; }
.paper-dashboard__hero h1 { max-width:18ch; color:#fff; font-family:var(--font-display); font-weight:600; font-size:clamp(2.6rem,4.2vw,4rem); line-height:1.08; letter-spacing:-.02em; }
.paper-dashboard__hero p { max-width:64ch; color:#aeb6da; }
.paper-dashboard__facts { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem; }
.paper-dashboard__facts span { display:inline-flex; gap:.35rem; align-items:baseline; padding:.55rem .75rem; color:#aeb6da; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-lg); font-size:.72rem; }
.paper-dashboard__facts b { color:#fff; font-size:1.05rem; }
.paper-dashboard__progress { padding:1.3rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-xl); }
.paper-dashboard__progress > span { color:#a9b1d6; font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; font-weight:800; }
.paper-dashboard__progress > strong { display:block; margin:.35rem 0 .8rem; color:#fff; font-size:1.45rem; }
.paper-dashboard__progress > div { height:9px; overflow:hidden; background:rgba(255,255,255,.13); border-radius:999px; }
.paper-dashboard__progress i { display:block; height:100%; background:var(--gold-edge); border-radius:999px; }
.paper-dashboard--two .paper-dashboard__progress i { background:#9bb3e7; }
.paper-dashboard--revision .paper-dashboard__progress i { background:var(--gold-edge); }
.paper-dashboard__progress a { display:inline-block; margin-top:.8rem; color:#d6dcf2; font-size:.75rem; font-weight:700; text-decoration:none; }
.paper-dashboard__content { padding-block:2rem 5rem; }
.paper-answer-shape { display:grid; grid-template-columns:1fr 1fr 1.25fr; gap:1rem; margin-top:-3.2rem; margin-bottom:3rem; position:relative; z-index:2; }
.paper-answer-shape > div { min-height:10rem; padding:1.15rem; background:#fff; border:1px solid var(--mi-line); border-top:5px solid var(--paper-accent); border-radius:var(--radius-xl); box-shadow:var(--mi-shadow); }
.paper-answer-shape span { display:inline-block; margin-bottom:.7rem; padding:.2rem .5rem; color:#77520e; background:var(--mi-gold-pale); border-radius:999px; font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.paper-answer-shape strong { display:block; font-family:var(--font-display); font-weight:600; font-size:1.18rem; }
.paper-answer-shape p { margin:.45rem 0 0; color:var(--ink-faint); font-size:.8rem; }
.paper-module-stack { display:grid; gap:1rem; }
.paper-module-card { background:#fff; border:1px solid var(--mi-line); border-left:6px solid var(--theme-colour); border-radius:var(--radius-xl); overflow:hidden; }
.paper-module-card__summary { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:1.2rem; align-items:center; padding:1.4rem; }
.paper-module-card__copy h3 { margin:.2rem 0 .45rem; font-size:1.35rem; }
.paper-module-card__copy > p:not(.paper-module-card__eyebrow):not(.paper-module-card__meta) { margin:0; color:var(--ink-soft); font-size:.86rem; }
.paper-module-card__eyebrow { margin:0; color:var(--theme-colour); font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
.paper-module-card__eyebrow span { margin-left:.4rem; padding:.18rem .4rem; background:var(--theme-pale); border-radius:999px; }
.paper-module-card__line { height:8px; margin-top:1rem; overflow:hidden; background:var(--paper-deep); border-radius:999px; }
.paper-module-card__line i { display:block; height:100%; background:var(--theme-colour); border-radius:999px; }
.paper-module-card__meta { display:flex; gap:1rem; margin:.5rem 0 0; color:var(--ink-faint); font-size:.7rem; }
.paper-module-card__actions { align-self:stretch; display:flex; align-items:center; }
.paper-module-card__lessons { border-top:1px solid var(--paper-deep); background:var(--paper); }
.paper-module-card__lessons summary { padding:.8rem 1.4rem; cursor:pointer; color:var(--theme-colour); font-family:var(--font-ui); font-size:.76rem; font-weight:750; }
.paper-module-card__lessons[open] summary { border-bottom:1px solid var(--paper-deep); }
.lesson-list--dashboard { max-height:32rem; overflow:auto; padding:.7rem 1rem 1rem; }
.paper-dashboard__tip { margin-top:2rem; }

/* Footer is intentionally lighter in scale than the earlier design. */
.site-footer { margin-top:0; padding-block:3.4rem 1.8rem; }
.site-footer__cols { margin-bottom:2.4rem; }

/* Responsive ----------------------------------------------------------------
   The card families hold a fixed number of things: four Paper 1 modules, five
   Paper 2 modules, six learning tools, four examination steps. Column counts
   are therefore chosen so every row is full, rather than left to auto-fit,
   which strands a single card on a row of its own at common widths.

   The counts step down early enough that a card is never narrower than about
   15rem, which is where the old breakpoints let five modules be squeezed into
   a 1152px window. */
@media (max-width: 80rem) {
  .journey-module-grid--five { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 72rem) {
  .module-progress-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .exam-shape { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* Four modules stop tiling cleanly before five and six do: at 1024px a row of
   four is already under 15rem a card, while three still has room. */
@media (max-width: 68rem) {
  .journey-module-grid:not(.journey-module-grid--five) { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 60rem) {
  .journey-hero__grid, .paper-dashboard__hero-grid { grid-template-columns:1fr; }
  .journey-hero__motif, .paper-dashboard__motif { inset:45% 0 0 0; }
  .course-pathway { max-width:42rem; }
  .journey-module-grid--five { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .learning-tools { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .quality-panel { grid-template-columns:1fr auto; }
  .quality-panel .journey-btn { grid-column:1/3; justify-self:start; }
  .progress-summary-grid, .module-progress-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .paper-module-card__summary { grid-template-columns:auto 1fr; }
  .paper-module-card__actions { grid-column:2; }
}
@media (max-width: 46rem) {
  .journey-hero__grid { padding-block:3.2rem 4rem; }
  .journey-hero__copy h1 { font-size:clamp(2.65rem,11vw,4rem); }
  .continue-strip__grid, .next-learning, .progress-welcome__grid, .progress-tools { grid-template-columns:1fr; }
  .continue-strip__actions, .next-learning__actions { justify-content:flex-start; }
  .journey-module-grid, .journey-module-grid--five, .learning-tools, .exam-shape,
  .progress-summary-grid, .paper-progress-grid, .module-progress-grid, .progress-activity-grid, .paper-answer-shape { grid-template-columns:1fr; }
  .journey-module { min-height:18rem; }
  .module-family__heading { align-items:flex-start; }
  .module-family__heading > a { display:none; }
  .quality-panel { grid-template-columns:1fr; }
  .quality-panel .journey-btn { grid-column:auto; }
  .quality-panel__figures { align-items:flex-start; }
  .progress-welcome__privacy { max-width:none; }
  .next-learning { margin-top:-1.6rem; }
  .paper-dashboard__hero-grid { padding-block:2.8rem 4rem; }
  .paper-dashboard__hero h1 { font-size:clamp(2.4rem,10vw,3.6rem); }
  .paper-answer-shape { margin-top:-2rem; }
  .paper-module-card__summary { grid-template-columns:1fr; }
  .paper-module-card__icon { width:2.9rem; height:2.9rem; }
  .paper-module-card__actions { grid-column:auto; }
  .paper-module-card__actions .journey-btn { width:100%; }
}
@media (max-width: 32rem) {
  .journey-hero__actions, .continue-strip__actions, .next-learning__actions { display:grid; }
  .journey-btn { width:100%; }
  .journey-stats li { align-items:flex-start; }
  .course-pathway { padding:.8rem; }
  .pathway-card { padding:1rem; }
  .paper-dashboard__facts { display:grid; grid-template-columns:1fr 1fr; }
}