/*
 * uktg-lesson.css
 * Tutor LMS lesson / course post_content components.
 *
 * Loaded ONLY on Tutor pages - see uktg_is_tutor_page() in functions.php.
 * Load order: after uktg-tokens.css (its only dependency).
 *
 * WHY THIS FILE EXISTS
 * The 708 legacy diploma lessons carry a full inline style= on every element
 * (~42 KB of style attributes in one course, served uncompressed on every
 * request because /courses/* is excluded from page cache). New CPD lessons
 * use these classes instead. Both systems coexist: inline beats every rule
 * here, because nothing here uses !important outside the AccessiYes block.
 *
 * HOUSE STYLE - the "screamer"
 * Accent blocks are NAVY cards with white text and gold accents, matching
 * .uktg-section--navy in uktg-components.css. Cream fills were dropped:
 * they read as a different site, and gold-on-cream repeatedly failed
 * contrast. Gold is an ACCENT here (titles, hairlines), never a fill
 * behind small text.
 *   navy #0f172a + white          = 17.9:1
 *   navy #0f172a + gold #BFAA7C   =  8.0:1
 *   navy #0f172a + white a85      = ~13:1
 * Left colour bars are used ONLY on blockquotes. Headings, eyebrows and
 * callouts carry no bar.
 *
 * NATIVE TUTOR FIRST
 * Downloads use Tutor's own Exercise Files, video uses the featured-video
 * field, and previews use the Lesson Preview toggle. Lesson HTML references
 * those tabs; it never embeds a download link or an iframe of its own.
 *
 * SPECIFICITY CONTRACT - read before editing
 *   Every rule is scoped under the single root class .uktg-lesson.
 *   - `.uktg-lesson <element>`        = 0-1-1  beats Astra's 0-1-0 / 0-0-1
 *   - `.uktg-lesson .uktg-lesson__x`  = 0-2-0  needed for ul/ol, li>p and a,
 *                                              where Astra TIES at 0-1-1 / 0-1-2
 *   No !important outside §17c. If a Tutor rule ever out-specifies, prefix
 *   that ONE rule with #tutor-single-entry-content (1-1-1).
 *   Do NOT use @layer: unlayered CSS beats layered regardless of specificity,
 *   and both Astra and Tutor are unlayered, so a layer would always lose.
 *
 * UCSS WHITELIST - these classes appear only inside post_content in the DB.
 * UCSS is currently OFF (optm-ucss=0) and optimisation is guest-only, so this
 * is dormant. Before UCSS is ever re-enabled, add `lesson` and `courses` to
 * optm-ccss_sep_posttype, or whitelist:
 *   .uktg-lesson .uktg-lesson__eyebrow .uktg-lesson__list .uktg-lesson__quote
 *   .uktg-lesson__quote-cite .uktg-lesson__figure .uktg-lesson__figcaption
 *   .uktg-lesson__table-wrap .uktg-lesson__table .uktg-lesson__note
 *   .uktg-lesson__note-title .uktg-lesson__card .uktg-lesson__card-head
 *   .uktg-lesson__card-body .uktg-lesson__card-foot .uktg-lesson__card--activity
 *   .uktg-lesson__card--crisis .uktg-lesson__card--end .uktg-lesson__acc
 *   .uktg-lesson__acc-summary .uktg-lesson__acc-body .uktg-lesson__acc-group
 *   .uktg-lesson__steps .uktg-lesson__step-title .uktg-lesson__step-body
 *   .uktg-lesson__band .uktg-lesson__embed .uktg-lesson__link
 *   .uktg-lesson__wide .uktg-lesson--summary
 */

/* ==========================================================================
   1. WIDTH - fix the narrow reading column
   Tutor caps its own container at 760px (860 at >=1400px, 944 at >=1920px)
   in tutor-learning-area.min.css. Below 1400px that leaves the paragraph at
   ~724px. Raise it; prose is held to a readable measure separately in §5.
   ========================================================================== */.tutor-learning-area .tutor-learning-area-container {
  max-width: var(--uktg-lesson-max);
}

/* ==========================================================================
   2. ROOT WRAPPER
   ========================================================================== */.uktg-lesson {
  font-family: 'Lato', 'Lato Fallback', sans-serif;
  font-size: 1.05rem;
  line-height: 1.62;
  color: var(--uktg-dark);
  max-width: var(--uktg-lesson-max);
  margin-inline: auto;   /* the legacy inline wrapper omits this, so at
                            >=1920px it left-aligns and leaves dead space */
}
.uktg-lesson *,
.uktg-lesson *::before,
.uktg-lesson *::after { box-sizing: border-box; }

/* ==========================================================================
   3. TYPOGRAPHY
   font-family MUST be restated on headings. Astra sets
   `h1..h6, .entry-content :where(h1..h6) { font-family:'Libre Franklin' }`
   directly on the heading, so inheriting Lato from .uktg-lesson loses.
   This is very likely the original "external stylesheets don't work"
   symptom - headings silently rendering in the wrong face.
   ========================================================================== */.uktg-lesson.uktg-lesson.uktg-lesson h2 {
  font-family: 'Lato', 'Lato Fallback', sans-serif;
  font-size: 1.55rem;
  font-weight: 900;
  color: var(--uktg-navy);
  letter-spacing: -0.01em;
  line-height: 1.22;
  margin: 1.75rem 0 0.6rem;
}
.uktg-lesson.uktg-lesson.uktg-lesson > h2:first-child { margin-top: 0; }

/* ── Why selectors repeat .uktg-lesson ──────────────────────────────────────
   Two problems, one mechanism.

   1. Tutor's learning-area stylesheet imposes its own typography on ANY heading or
      paragraph inside a lesson:

        .tutor-lesson-content .tutor-lesson-wrapper h2|h3|h4            (0,2,1)
          font-family Inter, its own colour, size and weight
        .tutor-lesson-content .tutor-lesson-wrapper h*|p:not(:last-child)  (0,3,1)
          margin-bottom

      Those out-specify a plain `.uktg-lesson h3` (0,1,1). On a real lesson page the
      headings rendered in Inter rather than Lato. Invisible in the preview harness,
      which loads no Tutor CSS.

   2. Fixing (1) by raising the BASE element rules then broke our own components:
      `.uktg-lesson.uktg-lesson.uktg-lesson p` at (0,3,1) beat
      `.uktg-lesson .uktg-lesson__card-body p` at (0,2,1), so every paragraph and
      heading inside a navy card fell back to the dark page colour and vanished.

   So the file now has three deliberate layers, and new rules must respect them:

        base elements      .uktg-lesson.uktg-lesson.uktg-lesson p        (0,3,1)
        components         ...        .uktg-lesson__card-body p          (0,4,1)
        context overrides  ... .uktg-lesson__card-body .uktg-lesson__x   (0,5,x)

   Repeating the root class buys specificity without !important and without coupling
   this file to Tutor's container names.

   `python3 staging-tools/css-conflicts.py` checks BOTH directions, ours against
   theirs and ours against ours, and must report zero of each. The second check
   exists because problem (2) shipped without it.
   ────────────────────────────────────────────────────────────────────────── */

/* No left bar. Weight and a hairline above carry the hierarchy instead. */.uktg-lesson.uktg-lesson.uktg-lesson h3 {
  font-family: 'Lato', 'Lato Fallback', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--uktg-navy);
  margin: 1.5rem 0 0.5rem;
}
.uktg-lesson.uktg-lesson.uktg-lesson h4 {
  font-family: 'Lato', 'Lato Fallback', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--uktg-gold-link);   /* A11Y: #8f7a4f was 4.15:1, a fail */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 1.15rem 0 0.35rem;
}
.uktg-lesson.uktg-lesson.uktg-lesson p { margin: 0 0 0.8rem; color: var(--uktg-dark); }
.uktg-lesson.uktg-lesson.uktg-lesson p:last-child { margin-bottom: 0; }
.uktg-lesson strong { font-weight: 700; color: inherit; }

/* Astra keeps the underline on content links - that is the accessible
   choice, so we only set colour and leave text-decoration alone. */.uktg-lesson a { color: var(--uktg-gold-link); }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__link {           /* 0-2-0 for the bordered variant */
  color: var(--uktg-gold-link);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--uktg-gold);
}

/* ==========================================================================
   3b. VIDEO SUMMARY
   The first block in any lesson that has a video. Tutor renders the player above
   the Overview tab, so this is the first thing under it: what the video covers,
   for someone deciding whether to watch now or come back to it.
   It is also the searchable version of the video, and the fallback if a
   third-party embed is ever pulled.
   Warm tint rather than a card, so it reads as a caption to the player above it
   rather than as a piece of teaching in its own right.
   ========================================================================== */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__vidsum {
  background: var(--uktg-surface);
  border-left: 3px solid var(--uktg-gold);
  border-radius: 0 var(--uktg-lesson-radius) var(--uktg-lesson-radius) 0;
  padding: 0.9rem 1.25rem;
  margin: 0 0 1.5rem;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__vidsum-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--uktg-gold-link);
  margin: 0 0 0.4rem;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__vidsum p {
  margin: 0 0 0.5rem;
  font-size: 0.97rem;
  color: var(--uktg-ink-soft);
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__vidsum p:last-child { margin-bottom: 0; }
/* Credit line for a third-party video. Sits at the foot of the summary, separated by a
   hairline, because attribution is a different kind of statement from a description. */
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__vidsum-credit {
  margin: 0.7rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--uktg-border);
  font-size: 0.87rem;
  color: var(--uktg-muted);
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__vidsum-time {
  font-weight: 700;
  color: var(--uktg-navy);
}

/* ==========================================================================
   4. SECTION EYEBROW
   A <p>, not a heading - presentational label, must stay out of the outline.
   No left bar (house style).
   ========================================================================== */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--uktg-gold-link);
  margin: 0 0 1rem;
}

/* ==========================================================================
   5. READABLE MEASURE
   ONE column. Everything spans --uktg-lesson-max and nothing sets its own
   width. The previous version capped prose at 72ch and let tables and cards
   run to the container, which produced FOUR different widths on one page
   (measured at 1440px: paragraph 643, heading 978, table 1080, container
   1080). `ch` resolves against each element's OWN font-size, so a single
   measure token cannot produce a single width - an h2 at 1.55rem is half
   again as wide as a paragraph. Do not reintroduce a per-element measure.
   Control the reading measure with --uktg-lesson-max instead.
   ========================================================================== */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__wide { max-width: none; }

/* ==========================================================================
   6. LISTS
   0-2-0 required: Astra's `.entry-content ul` is 0-1-1 and would TIE with
   `.uktg-lesson ul`. Ties resolve on source order, which we cannot rely on.
   ========================================================================== */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__list {
  margin: 0 0 1.05rem 1.35rem;
  padding: 0;
  line-height: 1.62;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__list > li {
  margin-bottom: 0.3rem;
  color: var(--uktg-dark);
}
/* 0-2-2: Astra's `.entry-content li > p { margin-bottom:0 }` is 0-1-2 */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__list > li > p { margin-bottom: 0.35rem; }

/* ==========================================================================
   7. BLOCKQUOTE - the ONE place a left colour bar is used
   (Astra sets bare `blockquote{margin:1.5em}` at 0-0-1)
   ========================================================================== */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__quote {
  border-left: 3px solid var(--uktg-gold);
  padding: 0.2rem 0 0.2rem 1.4rem;
  margin: 0 0 1.25rem;
  color: var(--uktg-ink-warm);
  font-size: 1.02rem;
  font-style: italic;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__quote p { color: inherit; font-size: inherit; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__quote-cite {
  display: block;
  margin-top: 0.75rem;
  color: var(--uktg-gold-link);
  font-size: 0.88rem;
  font-weight: 700;
  font-style: normal;
}

/* ==========================================================================
   8. FIGURE
   ========================================================================== */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__figure { margin: 0 0 1.25rem; text-align: center; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__figure img {
  max-width: 100%;
  height: auto;
  border-radius: var(--uktg-lesson-radius);
  margin-inline: auto;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__figcaption {
  margin-top: 0.6rem;
  font-size: 0.88rem;
  color: var(--uktg-ink-soft);
}

/* ==========================================================================
   9. TABLE + horizontal-scroll wrapper
   Wide content scrolls inside its own container - the page body must never
   scroll horizontally.
   ========================================================================== */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__table-wrap {
  overflow-x: auto;
  margin: 0 0 1.25rem;
  -webkit-overflow-scrolling: touch;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  color: var(--uktg-dark);
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__table th,
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__table td {
  border: 1px solid var(--uktg-border);
  padding: 0.6rem 0.8rem;
  text-align: left;
  vertical-align: top;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__table thead th {
  background: var(--uktg-navy);
  color: #fff;
  font-weight: 700;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__table caption {
  caption-side: top;
  text-align: left;
  font-size: 0.85rem;
  color: var(--uktg-ink-soft);
  padding-bottom: 0.5rem;
}

/* ==========================================================================
   10. QUIET NOTE - the low-key aside
   Replaces the old cream callout. Outline only, no fill, no left bar.
   Use for asides that support the prose. Anything that needs to command
   attention is a navy card (§11), not this.
   ========================================================================== */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__note {
  border: 1px solid var(--uktg-border);
  border-radius: var(--uktg-lesson-radius);
  padding: 0.95rem 1.25rem;
  margin: 0 0 1.25rem;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__note p {
  margin: 0 0 0.55rem;
  color: var(--uktg-dark);
  font-size: 0.97rem;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__note p:last-child { margin-bottom: 0; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__note-title {
  font-family: 'Lato', 'Lato Fallback', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--uktg-gold-link);
  margin: 0 0 0.6rem;
}

/* ==========================================================================
   11. NAVY CARDS - the "screamer"
   Matches .uktg-section--navy in uktg-components.css: #0f172a, radius 10,
   gold hairline. White text, gold title. Never gold-as-fill behind text.
   ========================================================================== */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card {
  background: var(--uktg-navy);
  color: #fff;
  border: 1px solid rgba(191, 170, 124, 0.35);
  border-radius: var(--uktg-radius-md);
  overflow: hidden;
  margin: 0 0 1.25rem;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-head {
  padding: 0.9rem 1.35rem 0;
}
/* 0-2-0 so it beats .uktg-lesson h3 (0-1-1) - the card title is a real
   heading, and would otherwise take the h3 colour and margins */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-head > * {
  font-family: 'Lato', 'Lato Fallback', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--uktg-gold);   /* 8.0:1 on navy */
  margin: 0;
  border: 0;
  padding: 0;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body {
  padding: 0.75rem 1.35rem 1.15rem;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body p {
  color: rgba(255, 255, 255, 0.85);   /* ~13:1 on navy */
  margin: 0 0 0.7rem;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body p:last-child { margin-bottom: 0; }

/* The "Where next" card names the following unit. It is a title, so it gets a
   line of its own rather than running inline as bold text before the body.
   0-4-1 to beat the h4 base rule at 0-3-1, which uppercases and golds it. */
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body .uktg-lesson__next-title {
  font-size: 1.08rem;
  font-weight: 800;
  color: #fff;   /* the card IS navy. This was var(--uktg-navy), i.e. invisible. */
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 0.45rem;
}

/* ── Everything inside a navy card is light, without exception ──────────────
   .uktg-lesson__card is navy by default; there is no --navy modifier, so any
   rule scoped to one never fires. A heading that inherits a dark base colour
   here is invisible rather than merely low contrast, and it fails silently
   because the markup is correct. Catch-all, so a new component dropped inside
   a card cannot reintroduce it. */
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body h2,
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body h3,
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body h4,
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body h5,
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body h6,
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body dt,
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body th,
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body figcaption,
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body .uktg-lesson__step-title,
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body .uktg-lesson__note-title,
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body .uktg-lesson__eyebrow,
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body .uktg-lesson__vidsum-title {
  color: var(--uktg-gold);
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body li,
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body td,
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body dd,
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body .uktg-lesson__step-body,
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body blockquote {
  color: rgba(255, 255, 255, 0.85);
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body strong { color: #fff; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body a { color: var(--uktg-gold); }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body .uktg-lesson__list > li { color: rgba(255, 255, 255, 0.85); }

/* A rubric table has one wide column and two narrow ones. Without this the browser
   gives every column equal weight and "Point" and "Mark" wrap to two lines while the
   criterion column stays cramped. */
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__table--rubric th:first-child,
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__table--rubric td:first-child { width: 3.5rem; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__table--rubric th:last-child,
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__table--rubric td:last-child { width: 4rem; text-align: center; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__table--rubric th { white-space: nowrap; }

/* ── Spotlight cards ────────────────────────────────────────────────────────
   Unit 1 only. Each card points at a real control in Tutor's chrome, so it has
   to look pressable and be a real <button> for keyboard and screen reader use.
   The ring is applied to Tutor's own element, outside our stylesheet's scope,
   so that rule is deliberately unscoped and carries !important: it has to beat
   whatever Tutor sets on a tab or a footer link. */
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-spot {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  background: var(--uktg-navy-card);
  border: 1px solid rgba(191, 170, 124, 0.35);
  border-radius: var(--uktg-lesson-radius);
  padding: 0.85rem 1.1rem;
  margin: 0 0 0.7rem;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-spot:hover,
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-spot:focus-visible {
  border-color: var(--uktg-gold);
  background: #17304f;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-spot-name {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--uktg-gold);
  margin: 0 0 0.3rem;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-spot p {
  margin: 0 0 0.4rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.96rem;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-spot p:last-child { margin-bottom: 0; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-spot-desc {
  display: block;
  margin: 0.25rem 0 0;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.94rem;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-spot-desc strong { color: #fff; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-spot-hint {
  font-size: 0.82rem;
  color: var(--uktg-gold-soft);
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-spot-status {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--uktg-danger);
  min-height: 1.2em;
}

/* Tutor hides the hamburger at min-width 992px, so the card about it follows the same
   breakpoint rather than a guessed one. */
@media (min-width: 992px) {
  .uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card--phone-only { display: none; }
}

/* Applied by JS to Tutor's own tab or footer button. Unscoped on purpose. */
.uktg-spot-target {
  outline: 3px solid #e5342a !important;
  outline-offset: 3px !important;
  border-radius: 6px !important;
  animation: uktg-spot-pulse 1.1s ease-in-out 3;
}
/* Panels rather than controls. The curriculum list is a scroll container inside an
   overflow:hidden wrapper, so a ring outside the border box is clipped to its top edge
   alone. Drawn inside, nothing can clip it. */
.uktg-spot-target--inset {
  outline-offset: -3px !important;
}

@keyframes uktg-spot-pulse {
  0%, 100% { outline-color: #e5342a; }
  50%      { outline-color: rgba(229, 52, 42, 0.25); }
}
@media (prefers-reduced-motion: reduce) {
  .uktg-spot-target { animation: none; }
}

/* Tutor turns the Take Note button into a fixed round FAB below 576px at
   z-index 19, while the lesson footer sits at 10, so it lands on top of Next
   and a phone user cannot advance without zooming out. Lift it clear and put
   it under the footer. Raised with body + !important because Tutor's own rule
   is an #id inside the same media query. */
@media (max-width: 576px) {
  body #tutor-lesson-nav-take-note-btn {
    bottom: 148px !important;
    inset-inline-end: 16px !important;
    z-index: 9 !important;
  }
}

/* ── Public comment activity ────────────────────────────────────────────────
   A comment goes to a thread other learners read, which is a different act from
   writing a private note, and the page has to say so before they type rather
   than after. Two blocks: what this is, and what not to put in it. */
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__public-note {
  border-left: 3px solid var(--uktg-gold);
  padding: 0.15rem 0 0.15rem 0.85rem;
  margin: 0 0 0.8rem;
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.85);
}

/* The card head becomes a row so the discussion tag can sit opposite the title.
   A learner needs to know a box is public BEFORE they read the question, not after
   they have written an answer, so it is a badge rather than a line of prose. */
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card--discussion .uktg-lesson__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__discussion-tag {
  flex: 0 0 auto;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--uktg-navy);
  background: var(--uktg-gold);
  border-radius: 3px;
  padding: 0.2rem 0.5rem;
  white-space: nowrap;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__public-note strong { color: var(--uktg-gold); }

/* The tag on a STEP rather than on the whole activity.
   It belongs beside the one step whose box is public. On the card header it read as
   "everything in this activity is public", which is wrong wherever an activity mixes a
   private note with a public post, and that is the shape most of them now take.
   Right-aligned so the step title stays the thing you read first. */
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__step-title.uktg-lesson__step-title--public {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__step-title--public .uktg-lesson__discussion-tag {
  margin-left: auto;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__public-warn {
  border: 1px solid rgba(249, 112, 102, 0.55);
  border-radius: var(--uktg-lesson-radius);
  padding: 0.6rem 0.9rem;
  margin: 0.8rem 0 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__public-warn strong { color: var(--uktg-danger); }

/* Offered only after a successful post. Reloading is the only way to see the
   thread update, and doing it unprompted would discard the rest of the page. */
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__answer-refresh {
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--uktg-gold);
  border-radius: 4px;
  background: transparent;
  color: var(--uktg-gold);
  cursor: pointer;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__answer-refresh:hover {
  background: var(--uktg-gold);
  color: var(--uktg-navy);
}

/* Activity - 2px gold edge is the "this is interactive" signal.

   scroll-margin-top is for the cross-unit links in §11i: an activity card is the
   target of #activity-N-M, and Tutor's learning area has a fixed top bar, so a bare
   jump puts the heading underneath it. Applied to the card, not to html, because
   only these elements are ever jumped to. */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card--activity {
  border: 2px solid var(--uktg-gold);
  scroll-margin-top: 5rem;
}

/* Two activities are announced by a step title inside another card rather than by a
   card of their own, so the same jump lands on the paragraph. */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__step-title[id^="activity-"] {
  scroll-margin-top: 5rem;
}

/* Time allowance on an activity, following the OU pattern: a small clock and a
   duration directly under the activity heading, before the task itself.

   It is the first thing under the title on purpose. A learner deciding whether to
   start an activity now or come back to it needs the number before the prose, not
   after it.

   The clock is an inline SVG using currentColor, so it inherits the card's text
   colour and stays correct on the navy activity card, in Tutor's dark theme and in
   the AccessiYes high-contrast mode without three separate overrides. */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__act-time {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  font-style: italic;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);   /* activity cards are navy */
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__act-time svg {
  flex-shrink: 0;
  width: 0.95em;
  height: 0.95em;
}

/* An activity announced by a step title sits on the white page, not on navy.
   --uktg-ink-soft is 7.46:1 on white. --uktg-muted (#6b7280) would be 4.83:1, which
   passes, but this text is italic at 0.88rem and small italics are the case where a
   bare pass reads badly. See context/lighthouse-checklist.md on the step counters. */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__steps .uktg-lesson__act-time {
  color: var(--uktg-ink-soft);
}

/* Crisis footer - the most important block on any lesson page */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card--crisis {
  border-color: rgba(191, 170, 124, 0.55);
}

/* sits at the very end of a lesson */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card--end { margin: 1.75rem 0 0; }

/* two-part divider inside a card */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-foot {
  border-top: 1px solid rgba(191, 170, 124, 0.25);
  padding-top: 1rem;
  margin-top: 0.35rem;
  font-size: 0.92rem;
}

/* ==========================================================================
   11b. REVIEW NOTE - draft only, must be removed before publication
   Deliberately ugly and loud. This is scaffolding for Steve and Nichola while
   the course sits in draft, not a student-facing component. It should be
   impossible to mistake for course content and impossible to miss on a skim.
   Every one carries a data-review attribute so they can be found and counted:
       grep -c 'uktg-lesson__review' before going live  ->  must be 0
   ========================================================================== */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__review {
  border: 3px dashed #b3261e;
  border-radius: var(--uktg-lesson-radius);
  background: #fff4f2;
  padding: 1.1rem 1.35rem;
  margin: 1.5rem 0;
  color: #5c1712;
  font-size: 0.95rem;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__review::before {
  content: "REVIEW NOTE - remove before publishing";
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b3261e;
  margin-bottom: 0.6rem;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__review p { color: #5c1712; margin: 0 0 0.6rem; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__review p:last-child { margin-bottom: 0; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__review strong { color: #7a1c14; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__review--nichola::before { content: "FOR NICHOLA - remove before publishing"; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__review--steve::before { content: "FOR STEVE - remove before publishing"; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__review--blocker {
  border-color: #7a1c14;
  background: #ffe8e4;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__review--blocker::before { content: "BLOCKER - do not publish this lesson until resolved"; }

/* Dark themes: keep it loud rather than tasteful. It is meant to be removed. */html[data-tutor-theme="dark"] .uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__review,
body.cya11y-dark-contrast .uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__review {
  background: #2a0f0c;
  color: #ffd9d3;
}
html[data-tutor-theme="dark"] .uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__review p { color: #ffd9d3; }

@media print {.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__review { break-inside: avoid; } }

/* ==========================================================================
   11c. ASSIGNMENTS - the file uploader is NOT hidden here. Do not re-add it.
   An earlier version carried `.tutor-assignment-file-uploader { display: none; }`
   to stop CPD learners seeing a drop zone that accepts nothing. It was unscoped,
   because the uploader sits outside lesson post_content, and it shipped to live on
   3 Aug where it hid the drop zone on all 35 diploma assignments that DO take
   uploads - placement verification, application forms, evidence of qualifications.
   It also achieved nothing it was written for: the CPD units create no
   tutor_assignments posts at all. Their written answers are open_ended questions
   inside the unit quiz, which has no uploader to hide.
   If a real CPD upload assignment ever exists, gate this on a body class for the
   course rather than on the element, which is global by nature.
   ========================================================================== */

/* ==========================================================================
   11h. STEPS AND ACCORDIONS INSIDE A NAVY CARD
   The task components were designed for a white page. Dropping them into an
   activity card put navy text on navy and made the reveal summary invisible.
   Everything here is a colour flip only; the geometry is unchanged.
   ========================================================================== */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body .uktg-lesson__step-title { color: #fff; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body .uktg-lesson__step-body { color: rgba(255, 255, 255, 0.82); }

/* Invert the counter circle: gold disc, navy numeral, so it still reads as the
   same component rather than disappearing into the card. */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body .uktg-lesson__steps > li::before {
  background: var(--uktg-gold);
  color: var(--uktg-navy);
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body .uktg-lesson__acc {
  border-color: rgba(191, 170, 124, 0.4);
  background: rgba(0, 0, 0, 0.16);
  margin-bottom: 0;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body .uktg-lesson__acc-summary { color: var(--uktg-gold); }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body .uktg-lesson__acc[open] > .uktg-lesson__acc-summary {
  border-bottom-color: rgba(191, 170, 124, 0.28);
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body .uktg-lesson__acc-body p { color: rgba(255, 255, 255, 0.85); }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body .uktg-lesson__acc-body strong { color: #fff; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body .uktg-lesson__acc-body em { color: rgba(255, 255, 255, 0.9); }

/* A step that carries an answer box and a reveal needs breathing room between
   each numbered item, otherwise the three run together. */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body .uktg-lesson__steps > li:not(:last-child) {
  margin-bottom: 1.6rem;
}

/* ==========================================================================
   11g. ANSWER BOX - writes into Tutor's native Notes
   Sits inside a navy activity card, under the question it belongs to.
   uktg-lesson-notes.js posts the answer to tutor_pro_save_lesson_note with the
   question as highlight_text, so it lands in the Notes tab looking exactly like a
   note the learner took by hand.

   The Save button is hidden until JS enhances it. Without JS the textarea is still
   usable and the Notes tab still works, so nothing is lost, but a button that does
   nothing is worse than no button.
   ========================================================================== */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__answer {
  margin: 0.9rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid rgba(191, 170, 124, 0.28);
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__answer-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--uktg-gold);
  margin: 0 0 0.4rem;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__answer-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  padding: 0.65rem 0.8rem;
  resize: vertical;
  min-height: 4.5rem;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__answer-input::placeholder { color: rgba(255, 255, 255, 0.42); }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__answer-input:focus-visible {
  outline: 2px solid var(--uktg-gold);
  outline-offset: 1px;
  border-color: transparent;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__answer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0.6rem 0 0;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__answer-save {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--uktg-navy);
  background: var(--uktg-gold);
  border: 0;
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  cursor: pointer;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__answer-save:hover:not(:disabled) { background: var(--uktg-gold-soft); }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__answer-save:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__answer-save:disabled { opacity: 0.55; cursor: default; }

/* Reset is destructive, so it is quieter than Save: outline rather than filled. */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__answer-reset {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--uktg-gold);
  background: transparent;
  border: 1px solid rgba(191, 170, 124, 0.55);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  cursor: pointer;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__answer-reset:hover:not(:disabled) {
  background: rgba(191, 170, 124, 0.14);
  border-color: var(--uktg-gold);
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__answer-reset:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__answer-reset:disabled { opacity: 0.55; cursor: default; }

/* An answered box is a record, not a field. Once saved it stops looking like an
   invitation to type: no box, no border, no resize grip, just the answer set against
   a gold rule so it still reads as the learner's own words. */
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__answer-input[readonly] {
  background: transparent;
  border: 0;
  border-left: 3px solid var(--uktg-gold);
  border-radius: 0;
  padding: 0.15rem 0 0.15rem 0.85rem;
  color: rgba(255, 255, 255, 0.92);
  resize: none;
  cursor: default;
  min-height: 0;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__answer-input[readonly]:focus-visible {
  outline: 2px solid var(--uktg-gold);
  outline-offset: 3px;
}
/* A public activity is marked so nobody posts to the whole cohort by accident. */
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__answer--comment {
  border-top-color: rgba(191, 170, 124, 0.55);
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__answer--comment .uktg-lesson__answer-label::after {
  content: " (public)";
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6);
}

/* The label changes meaning too: it is no longer prompting for anything. */
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__answer.is-saved .uktg-lesson__answer-label {
  color: rgba(255, 255, 255, 0.55);
}

/* The discussion is hidden only once JS has taken charge of it. The class is added
   by uktg-lesson-notes.js, never by the markup, so with JS off the model answer is
   simply visible. Withholding the teaching because a script failed would be worse
   than showing it early. */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__acc.is-locked { display: none; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__answer-status {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__answer.is-saved .uktg-lesson__answer-status { color: var(--uktg-gold-soft); }

/* The reveal that belongs to a question sits directly after the answer box and is
   pulled in so the pairing reads as one unit rather than two stacked blocks. */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__answer + .uktg-lesson__acc {
  margin-top: 0.85rem;
}

/* ==========================================================================
   11i. CROSS-UNIT LINK
   Resolved at build time. See staging-tools/uktg-xref.php.

   .uktg-xref is a link from one unit to another. Each unit is a separate Tutor
   course, so this is never a scroll and always a navigation. It opens in a new
   tab (target=_blank + a visually-hidden announcement), because the learner is
   usually mid-lesson with an unsaved draft in an answer box on the page.

   A link can name a whole lesson or one activity in it. The activity form lands
   on #activity-N-M, an id on the activity card, which is why the card carries a
   scroll offset: without it the card's top edge sits under Tutor's fixed bar and
   the learner arrives mid-question.

   It has THREE states in the markup, and only the first is a link:
     <a   class="uktg-xref">                    resolved and reachable
     <span class="uktg-xref uktg-xref--locked"> target drip-locked for this learner
     <span class="uktg-xref uktg-xref--unresolved">  target unit not built yet
   The two spans must be indistinguishable from the prose around them. The
   sentence was written to read either way, so a half-styled dead link would be
   the only thing that looked broken.

   NO new-tab glyph. The announcement is text in .uktg-xref__nt instead. A ::after
   arrow is announced verbatim by NVDA, JAWS and VoiceOver, so the same warning
   would be read twice, once as prose and once as "north east arrow".

   The recall card reuses .uktg-lesson__card wholesale and only adds a modifier,
   so it inherits every navy-card colour rule in §11 rather than restating them.
   ========================================================================== */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-xref {
  text-underline-offset: 0.15em;
}

/* Visually hidden, still read aloud. Local rather than borrowing .sr-only from
   uktg-components.css, which is not loaded inside Tutor's learning area. */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-xref__nt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);   /* not `clip`: deprecated, and stylelint fails the build on it */
  white-space: nowrap;
  border: 0;
}

/* Not a link, so it must not look like one. Inherit and stop. */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-xref--locked,
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-xref--unresolved {
  color: inherit;
  text-decoration: none;
  border-bottom: 0;
}

/* Gold left edge rather than the full 2px border of an activity card: this is
   something to read, not something to do. */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card--recall {
  border-left: 3px solid var(--uktg-gold);
}/* ==========================================================================
   11f. COMPARE - side-by-side cards
   Several of Nichola's slides are two or three columns compared against each
   other: "steer away from / reach for instead", "thoughts / behaviour /
   physical". Stacking them loses the comparison, which is the whole point of
   the slide.
   Stacks on narrow screens, so NEVER refer to "the left column" in copy.
   Name the cards instead: "the Steer away from list". Position-based wording
   breaks the moment it stacks, and breaks for anyone using a screen reader.
   ========================================================================== */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__compare {
  display: grid;
  gap: 1rem;
  margin: 0 0 1.25rem;
  max-width: none;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__compare > * { margin: 0; }
@media (min-width: 700px) {.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__compare { grid-template-columns: 1fr 1fr; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__compare--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   11d. ADVISORY - a whole lesson that gates the topic behind it
   Modelled on the interstitial YouTube shows before distressing content.
   ONE per topic, as that topic's first lesson, not one per lesson. The learner
   reads it, then clicking Next is the acknowledgement.
   The lesson body is the warning, so this styles the page rather than a block
   inside it: .uktg-lesson--advisory on the root article.
   ========================================================================== */.uktg-lesson--advisory.uktg-lesson--advisory.uktg-lesson--advisory { max-width: 640px; }
.uktg-lesson--advisory.uktg-lesson--advisory.uktg-lesson--advisory .uktg-lesson__advisory {
  background: var(--uktg-navy);
  color: #fff;
  border: 2px solid var(--uktg-gold);
  border-radius: var(--uktg-radius-md);
  padding: 2rem 2rem 1.75rem;
  margin: 0 0 1.5rem;
  text-align: center;
}
/* The icon is a <p>, so `.uktg-lesson__advisory p` (0,4,1) sets both its
   colour and text-align:left. A class-only rule at (0,4,0) LOSES to that,
   later in the file or not. This is the context-override layer from the
   header: qualify the class with the element to reach (0,5,1). */
.uktg-lesson--advisory.uktg-lesson--advisory.uktg-lesson--advisory .uktg-lesson__advisory p.uktg-lesson__advisory-icon {
  font-size: 2rem;
  line-height: 1;
  margin: 0 0 0.9rem;
  color: var(--uktg-danger);
  text-align: center;
}
.uktg-lesson--advisory.uktg-lesson--advisory.uktg-lesson--advisory .uktg-lesson__advisory h2 {
  font-family: 'Lato', 'Lato Fallback', sans-serif;
  color: var(--uktg-gold);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 1rem;
}
.uktg-lesson--advisory.uktg-lesson--advisory.uktg-lesson--advisory .uktg-lesson__advisory p {
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 1rem;
  text-align: left;
}
.uktg-lesson--advisory.uktg-lesson--advisory.uktg-lesson--advisory .uktg-lesson__advisory p:last-child { margin-bottom: 0; }
.uktg-lesson--advisory.uktg-lesson--advisory.uktg-lesson--advisory .uktg-lesson__advisory strong { color: #fff; }
.uktg-lesson--advisory.uktg-lesson--advisory.uktg-lesson--advisory .uktg-lesson__advisory-confirm {
  border-top: 1px solid rgba(191, 170, 124, 0.3);
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  font-size: 0.95rem;
  color: var(--uktg-gold);
  text-align: center;
}
html[data-tutor-theme="dark"] .uktg-lesson--advisory.uktg-lesson--advisory.uktg-lesson--advisory .uktg-lesson__advisory { background: #0f172a; }

/* ==========================================================================
   11e. FIGURE DESCRIPTION - the "Show description" accordion under a figure
   OU pattern: numbered caption for referencing, then a collapsed long
   description. The description is the accessible text, so it must say what
   the image conveys, not repeat the caption.
   ========================================================================== */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__figure + .uktg-lesson__acc--figure { margin-top: -1.25rem; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__acc--figure {
  border: 0;
  border-top: 1px solid var(--uktg-border);
  border-radius: 0;
  margin: 0 0 1.25rem;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__acc--figure > .uktg-lesson__acc-summary {
  font-size: 0.88rem;
  font-weight: 400;
  padding: 0.6rem 0;
  color: var(--uktg-gold-link);
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__acc--figure[open] > .uktg-lesson__acc-summary { border-bottom: 0; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__acc--figure .uktg-lesson__acc-body {
  padding: 0 0 0.5rem;
  font-size: 0.95rem;
}

/* ==========================================================================
   12. ACCORDION - native <details>, no JS
   Named __acc, NOT .uktg-acc-* : that namespace belongs to the site FAQ
   accordion (uktg-components.css) and is driven by uktg-accordions.js.
   Native <details> also means zero runtime-added classes, so a CSS
   optimiser can always see [open] in the markup.
   ========================================================================== */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__acc {
  border: 1px solid var(--uktg-border);
  border-radius: var(--uktg-lesson-radius);
  overflow: hidden;
  margin: 0 0 1.25rem;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__acc-summary {
  background: transparent;
  color: var(--uktg-navy);
  font-weight: 700;
  font-size: 0.97rem;
  padding: 0.9rem 1.25rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__acc-summary::-webkit-details-marker { display: none; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__acc-summary::after {
  content: "+";
  color: var(--uktg-gold-link);
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__acc[open] > .uktg-lesson__acc-summary {
  border-bottom: 1px solid var(--uktg-border);
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__acc[open] > .uktg-lesson__acc-summary::after { content: "\2212"; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__acc-summary:focus-visible {
  outline: 2px solid var(--uktg-gold-link);
  outline-offset: -2px;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__acc-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__acc-group .uktg-lesson__acc { margin: 0; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__acc-body { padding: 0.9rem 1.15rem; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__acc-body p { margin: 0 0 0.6rem; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__acc-body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   13. NUMBERED STEPS - real <ol> + CSS counter
   The number is generated, not a literal digit in a <div>, so the list keeps
   <ol> semantics for screen readers and renumbers itself if a step moves.
   ========================================================================== */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__steps {
  list-style: none;
  counter-reset: uktg-step;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 0 0 1.25rem;
  padding: 0;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__steps > li {
  counter-increment: uktg-step;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
/* The list item is a flex row: counter, then content. Without this the content box
   shrinks to fit its own text, so an answer box under a short question came out
   narrower than one under a long question. min-width:0 stops a long unbroken string
   pushing it wider than the card. */
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__steps > li > div {
  flex: 1 1 auto;
  min-width: 0;
}

.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__steps > li::before {
  content: counter(uktg-step);
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  background: var(--uktg-navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  /* White, not gold. Gold on this navy measures 7.87:1, which passes AA, but the
     numeral is 0.8rem bold inside a 2rem disc and at that size the gold reads as a
     smudge rather than a digit. White is 17.85:1 and is legible at a glance.
     Contrast ratio is not the same thing as legibility at small sizes. */
  color: #fff;   /* 17.85:1 */
  line-height: 1;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__step-title {
  font-weight: 700;
  color: var(--uktg-navy);
  margin: 0 0 0.2rem;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__step-body {
  margin: 0;
  color: var(--uktg-ink-soft);
  font-size: 0.97rem;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__steps--sm > li::before { width: 1.5rem;  height: 1.5rem;  font-size: 0.75rem; margin-top: 0.15rem; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__steps--lg > li::before { width: 2.25rem; height: 2.25rem; font-size: 0.85rem; }

/* ==========================================================================
   14. SECTION DIVIDER BAND
   ========================================================================== */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__band {
  border-top: 1px solid var(--uktg-border);
  border-bottom: 1px solid var(--uktg-border);
  padding: 1.75rem 0;
  margin: 0 0 1.25rem;
}
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__band > :last-child { margin-bottom: 0; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__band--top { border-bottom: 0; padding-bottom: 0; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__band--bottom { border-top: 0;    padding-top: 0;    }

/* ==========================================================================
   15. EMBED WRAPPER - [embed] shortcodes stay verbatim, never <iframe>
   Note: the featured video uses Tutor's own video field and does NOT appear
   in post_content. This wrapper is only for a second, in-body embed.
   ========================================================================== */.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__embed { margin: 0 0 1.25rem; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__embed iframe { max-width: 100%; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body .uktg-lesson__embed { margin: 0 0 0.9rem; }

/* ==========================================================================
   16. UNIT SUMMARY - root modifier
   ========================================================================== */.uktg-lesson--summary .uktg-lesson__terms { margin: 0 0 1.25rem; color: var(--uktg-dark); }
.uktg-lesson--summary .uktg-lesson__terms strong { color: var(--uktg-navy); }

/* ==========================================================================
   17. DARK MODE  (Stage 1 - readability only)
   Three theme systems exist and none can see the others:
     1. Tutor 4.0.3  html[data-tutor-theme="light|dark|system"], clean tokens
     2. AccessiYes   body.cya11y-dark-contrast, 117 !important at (2,3,1)
     3. the OS       prefers-color-scheme, ignored by both
   Navy cards already read correctly on a dark background, so only the
   surrounding prose needs flipping.
   ========================================================================== */.uktg-lesson--dark-vars {
  --uktg-dark:       #f0f1f1;
  --uktg-navy:       #e8eaed;   /* headings go light on dark */
  --uktg-ink-warm:   #cecfd2;
  --uktg-ink-soft:   #cecfd2;
  --uktg-border:     #2d3039;
  --uktg-gold-link:  #d8c6a0;   /* #6b5a32 would be invisible on dark */
}

/* --- 17a. Tutor dark ------------------------------------------------------ */html[data-tutor-theme="dark"] .uktg-lesson {
  --uktg-dark:       #f0f1f1;
  --uktg-navy:       #e8eaed;
  --uktg-ink-warm:   #cecfd2;
  --uktg-ink-soft:   #cecfd2;
  --uktg-border:     #2d3039;
  --uktg-gold-link:  #d8c6a0;
  color: var(--uktg-dark);
}
/* the cards keep their own navy - restate so the flipped --uktg-navy above
   does not turn them light */html[data-tutor-theme="dark"] .uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card { background: #0f172a; }
html[data-tutor-theme="dark"] .uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__steps > li::before { background: #0f172a; }
html[data-tutor-theme="dark"] .uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__table thead th { background: #0f172a; }
html[data-tutor-theme="dark"] .uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-head > * { color: var(--uktg-gold); }
html[data-tutor-theme="dark"] .uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__step-title,
html[data-tutor-theme="dark"] .uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__acc-summary { color: #e8eaed; }

/* --- 17b. OS dark, when Tutor is set to "system" --------------------------
   Looks redundant against 17a. It is not, and do not delete it.
   Tutor's JS (tutor-core.js) resolves "system" via matchMedia and REWRITES
   the attribute to a literal "light" or "dark" once it runs. So
   [data-tutor-theme="system"] only exists in the window between server
   render and JS execution. This block covers that window - without it a
   system-dark learner gets a flash of dark-on-dark - and is also the
   fallback if the JS never runs. After JS, 17a takes over.
   Whatever paints the container must match: Tutor darkens
   .tutor-learning-area under this same media query.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {html[data-tutor-theme="system"] .uktg-lesson {
    --uktg-dark:       #f0f1f1;
    --uktg-navy:       #e8eaed;
    --uktg-ink-warm:   #cecfd2;
    --uktg-ink-soft:   #cecfd2;
    --uktg-border:     #2d3039;
    --uktg-gold-link:  #d8c6a0;
    color: var(--uktg-dark);
  }
html[data-tutor-theme="system"] .uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card { background: #0f172a; }
html[data-tutor-theme="system"] .uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__steps > li::before { background: #0f172a; }
html[data-tutor-theme="system"] .uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__table thead th { background: #0f172a; }
html[data-tutor-theme="system"] .uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-head > * { color: var(--uktg-gold); }
html[data-tutor-theme="system"] .uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__step-title,
html[data-tutor-theme="system"] .uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__acc-summary { color: #e8eaed; }
}

/* --- 17c. AccessiYes dark contrast ---------------------------------------
   AccessiYes styles 39 element types but NOT div/main/article/aside/form/
   figure/blockquote, and never touches <html>. That gap is why its dark mode
   currently puts white text on still-white wrappers. These elements are
   uncontested by it, so normal specificity plus !important wins over our own
   light rules without fighting its (2,3,1) declarations. These three are the
   only !important declarations in this file.
   -------------------------------------------------------------------------- */body.cya11y-dark-contrast .uktg-lesson,
body.cya11y-dark-contrast .uktg-lesson div,
body.cya11y-dark-contrast .uktg-lesson aside,
body.cya11y-dark-contrast .uktg-lesson figure,
body.cya11y-dark-contrast .uktg-lesson blockquote,
body.cya11y-dark-contrast .uktg-lesson details,
body.cya11y-dark-contrast .uktg-lesson summary {
  background-color: #181818 !important;
  color: #FFF !important;
}
body.cya11y-dark-contrast .uktg-lesson * { border-color: #4a4a4a !important; }

/* ==========================================================================
   18. RESPONSIVE + PRINT
   ========================================================================== */
@media (max-width: 600px) {.uktg-lesson { font-size: 1rem; }
.uktg-lesson.uktg-lesson.uktg-lesson h2 { font-size: 1.35rem; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-head { padding: 0.95rem 1.15rem 0; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card-body { padding: 0.8rem 1.15rem 1.2rem; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__note { padding: 1rem 1.1rem; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__steps > li { gap: 0.9rem; }
}

@media print {.uktg-lesson { max-width: none; font-size: 11pt; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__acc[open] .uktg-lesson__acc-body { display: block; }
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card,
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__note,
.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__band { break-inside: avoid; }
}

/* ==========================================================================
   18. TUTOR'S NOTES LIST - let the note body breathe
   An activity answer is stored with the question on the first line, a blank line,
   then the answer. Tutor already renders the note body with white-space: pre-wrap,
   so that holds. The grey context line above it keeps Tutor's single-line clamp,
   which is right: it now carries only the activity name.

   Outside .uktg-lesson on purpose: the notes list is Tutor's markup, not ours.
   ========================================================================== */
.tutor-lesson-note-list-item-highlight { color: var(--uktg-gold-link); font-weight: 700; }

/* ==========================================================================
   12. CONVERSATION SIMULATOR - Unit 6, "Mark: the conversation"
   Driven by uktg-lesson-sim.js, which mounts on <div class="uktg-sim">.
   ========================================================================== */
/* ==== SIM:START ==== generated by mark-sim/make-lesson-css.py, do not edit ==== */
.uktg-lesson .uktg-sim { margin: 1.5rem 0; scroll-margin-top: 5rem; }
  /* ---------- state strip ---------- */
.uktg-sim .sim-state { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem;
               padding:.95rem 1.1rem; border:1px solid #d9dce1; border-radius:8px;
               margin-bottom:1.25rem; background:#fbfbfc; }
  @media (max-width:640px) {.uktg-sim .sim-state { grid-template-columns:1fr; }}
html[data-tutor-theme="dark"] .uktg-sim .sim-state { background:#161b26; border-color:#2b3140; }
.uktg-sim .sim-state h4 { margin:0 0 .4rem; font-size:.68rem; letter-spacing:.12em;
                  text-transform:uppercase; color:#555; font-weight:800; }
html[data-tutor-theme="dark"] .uktg-sim .sim-state h4 { color:#9aa0ab; }

.uktg-sim .risk-line { display:flex; align-items:baseline; gap:.45rem; }
.uktg-sim .risk-name { font-weight:800; font-size:1.02rem; margin:0; }
.uktg-sim .risk-arrow { font-size:1.05rem; font-weight:800; line-height:1; }
.uktg-sim .risk-arrow.up { color:#1f6b34; }
.uktg-sim .risk-arrow.down { color:#a8321f; }
html[data-tutor-theme="dark"] .uktg-sim .risk-arrow.up { color:#7fd39a; }
html[data-tutor-theme="dark"] .uktg-sim .risk-arrow.down { color:#ff9c8a; }
.uktg-sim .risk-sub { margin:.3rem 0 0; font-size:.85rem; color:#555; }
html[data-tutor-theme="dark"] .uktg-sim .risk-sub { color:#9aa0ab; }

.uktg-sim .sim-bar { height:9px; border-radius:5px; background:#e4e6ea; margin-top:.5rem; overflow:hidden; }
.uktg-sim .sim-bar i { display:block; height:100%; background:#1f6b34; transition:width .4s ease, background .4s ease; }
.uktg-sim .sim-bar.warn i { background:#b8781f; }
.uktg-sim .sim-bar.crit i { background:#a8321f; }
html[data-tutor-theme="dark"] .uktg-sim .sim-bar { background:#2b3140; }

.uktg-sim .crit-flag { display:none; margin-top:.55rem; padding:.5rem .7rem; border-radius:6px;
               background:#f6dede; color:#7a2020; font-size:.85rem; font-weight:700; }
html[data-tutor-theme="dark"] .uktg-sim .crit-flag { background:#3a1c18; color:#ffb3a5; }
.uktg-sim .is-crit .crit-flag { display:block; animation:uktg-sim-pulse 1.6s ease-in-out infinite; }
  @keyframes uktg-sim-pulse {.uktg-sim 0%, .uktg-sim 100% { opacity:1; } 50% { opacity:.55; }}
  @media (prefers-reduced-motion: reduce) {.uktg-sim .is-crit .crit-flag { animation:none; }}

.uktg-sim .sim-known ul { list-style:none; margin:0; padding:0; font-size:.85rem; }
.uktg-sim .sim-known li { padding:.12rem 0; color:#777; }
.uktg-sim .sim-known li.on { color:#0c111d; font-weight:700; }
html[data-tutor-theme="dark"] .uktg-sim .sim-known li.on { color:#f0f1f1; }
.uktg-sim .sim-known li::before { content:"\2022  "; }
.uktg-sim .sim-known li.on::before { content:"\2713  "; }

  /* ---------- the call window ---------- */
.uktg-sim .callwin { border:1px solid #d9dce1; border-radius:12px; overflow:hidden; margin-bottom:1.25rem;
             background:#fff; }
html[data-tutor-theme="dark"] .uktg-sim .callwin { border-color:#2b3140; background:#1a1f29; }
  /* Mark's video tile. A background image rather than an <img> so the same declaration
     resolves in both places: the file sits beside uktg-lesson.css in local-dev/css for the
     preview and in the theme root for Tutor. aria-hidden because the header bar already
     names him, so an alt would only repeat it. */
  /* The tile is much wider than it is tall, so the 16:9 source is cropped hard. The focal
     point is high because his head sits near the top of the frame: at 30% the crop took
     the top of his head off. */
.uktg-sim .callwin__video { width:100%; height:15rem; background:#1b1f27 center 8%/cover no-repeat; }
  @media (max-width:560px) {.uktg-sim .callwin__video { height:10rem; }}
.uktg-sim .callwin.is-ended .callwin__video { filter:grayscale(1) brightness(.45); }
.uktg-sim .callwin__bar { display:flex; align-items:center; justify-content:space-between; gap:1rem;
                  padding:.55rem .85rem; background:#f4f5f7; border-bottom:1px solid #e4e6ea; }
html[data-tutor-theme="dark"] .uktg-sim .callwin__bar { background:#12161f; border-bottom-color:#2b3140; }
.uktg-sim .callwin__who { display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:.92rem; }
.uktg-sim .callwin__av { display:inline-flex; align-items:center; justify-content:center; width:1.7rem;
                 height:1.7rem; border-radius:50%; background:#8b8f96; color:#fff;
                 font-size:.78rem; font-weight:800; }
.uktg-sim .callwin__state { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:800;
                    color:#1f6b34; }
.uktg-sim .callwin__state::before { content:"\25CF  "; }
.uktg-sim .callwin__state.ended { color:#a8321f; }
.uktg-sim .callwin__body { max-height:24rem; overflow-y:auto; padding:1rem .95rem .4rem; }
.uktg-sim .callwin__body:focus-visible { outline:3px solid #BFAA7C; outline-offset:-3px; }

  /* ---------- messages ---------- */
.uktg-sim .chat { margin:0; padding:0; list-style:none; }
.uktg-sim .chat li { margin-bottom:.75rem; display:flex; flex-direction:column; }
.uktg-sim .chat .who { font-size:.72rem; color:#8b8f96; margin:0 0 .18rem .9rem; }
.uktg-sim .bub { max-width:78%; padding:.62rem .95rem; border-radius:19px; line-height:1.42;
         font-size:1rem; margin:0; overflow-wrap:break-word; }
.uktg-sim .chat li.mark { align-items:flex-start; }
.uktg-sim .chat li.mark .bub { background:#e9e9eb; color:#000; border-bottom-left-radius:5px; }
.uktg-sim .chat li.me { align-items:flex-end; }
.uktg-sim .chat li.me .bub { background:#0b84ff; color:#fff; border-bottom-right-radius:5px; }
html[data-tutor-theme="dark"] .uktg-sim .chat li.mark .bub { background:#3b3b3d; color:#f0f1f1; }
.uktg-sim .chat li.sys { align-items:center; }
.uktg-sim .chat li.sys .bub { background:transparent; color:#8b8f96; font-size:.85rem;
                      font-style:italic; max-width:100%; text-align:center; }

  /* ---------- options ---------- */
.uktg-sim .ask { font-size:.95rem; font-weight:800; margin:.2rem 0 .7rem; }
.uktg-sim .sim-opts { display:grid; gap:.55rem; }
.uktg-sim .sim-opt { font:inherit; text-align:left; padding:.8rem 1rem; border:1.5px solid #d9dce1;
             border-radius:12px; background:#fff; color:#0c111d; cursor:pointer; line-height:1.42; }
.uktg-sim .sim-opt:hover { border-color:#0b84ff; }
.uktg-sim .sim-opt:focus-visible { outline:3px solid #BFAA7C; outline-offset:2px; }
html[data-tutor-theme="dark"] .uktg-sim .sim-opt { background:#161b26; color:#f0f1f1; border-color:#2b3140; }

.uktg-sim .sim-note { margin-top:1rem; padding:.9rem 1.05rem; border-radius:8px;
              background:#f1f2f4; font-size:.93rem; }
html[data-tutor-theme="dark"] .uktg-sim .sim-note { background:#161b26; }
.uktg-sim .sim-note .lbl { display:block; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
                   color:#555; font-weight:800; margin-bottom:.3rem; }
html[data-tutor-theme="dark"] .uktg-sim .sim-note .lbl { color:#9aa0ab; }

.uktg-sim .sim-next { margin-top:1.1rem; font:inherit; font-weight:800; padding:.62rem 1.5rem;
              border:0; border-radius:20px; background:#0b84ff; color:#fff; cursor:pointer; }
.uktg-sim .sim-next:focus-visible { outline:3px solid #BFAA7C; outline-offset:2px; }
.uktg-sim .sim-next.ghost { background:transparent; color:#0b84ff; border:1.5px solid #0b84ff; }

  /* Screen-reader-only. uktg-lesson.css scopes its version under .uktg-lesson and the
     live card deliberately is not one, so the class has to exist locally or the text
     renders visibly. It did. */
.uktg-sim .nt { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
        clip-path:inset(50%); white-space:nowrap; border:0; }
.uktg-sim .clock { display:flex; align-items:baseline; gap:.5rem; padding:.6rem .9rem; margin-bottom:1rem;
           border:1.5px solid #0b84ff; border-radius:8px; background:#f2f8ff; font-size:.92rem; }
.uktg-sim .clock.stalled { border-color:#a8321f; background:#fdf3f2; }
html[data-tutor-theme="dark"] .uktg-sim .clock { background:#12243a; }
html[data-tutor-theme="dark"] .uktg-sim .clock.stalled { background:#3a1c18; }
.uktg-sim .clock .lbl { font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; font-weight:800;
                color:#0b6ad4; }
.uktg-sim .clock.stalled .lbl { color:#a8321f; }
html[data-tutor-theme="dark"] .uktg-sim .clock .lbl { color:#6fb6ff; }
.uktg-sim .clock .secs { font-weight:900; font-size:1.15rem; display:inline-block; }
.uktg-sim .bump { animation:uktg-sim-bump .45s ease; }
  @keyframes uktg-sim-bump {.uktg-sim 0% { transform:scale(1); } 35% { transform:scale(1.35); } 100% { transform:scale(1); }}
  @media (prefers-reduced-motion: reduce) {.uktg-sim .bump { animation:none; }}
.uktg-sim .secs-tag { float:right; font-size:.76rem; font-weight:800; color:#6b7280; margin-left:.8rem; }
.uktg-sim .sim-note.good { background:#eef6ee; }
.uktg-sim .sim-note.bad { background:#fdf3f2; }
html[data-tutor-theme="dark"] .uktg-sim .sim-note.good { background:#14261a; }
html[data-tutor-theme="dark"] .uktg-sim .sim-note.bad { background:#3a1c18; }

  /* ---------- debrief, on navy ----------
     It uses the real .uktg-lesson__card--activity classes so accordions, links and
     headings inherit the navy treatment the rest of the course already has. What follows
     is only the sim's own pieces, recoloured for that ground. Every value here was picked
     against #0f172a rather than white, which is where the first attempt went wrong: the
     score list was #555 on navy and effectively invisible. */
.uktg-sim .uktg-sim__debrief { margin-top:1.4rem; }
.uktg-sim .uktg-sim__debrief .d-h { margin:1.5rem 0 .6rem; font-size:.95rem; font-weight:800;
                            color:#BFAA7C; letter-spacing:.01em; text-transform:none; }
.uktg-sim .uktg-sim__debrief .score li { border-bottom-color:rgba(255,255,255,.14); }
.uktg-sim .uktg-sim__debrief .score .el { color:#fff; }
.uktg-sim .uktg-sim__debrief .score .how { color:rgba(255,255,255,.78); }
.uktg-sim .uktg-sim__debrief .score li.yes .mk { color:#7fd39a; }
.uktg-sim .uktg-sim__debrief .score li.no .mk { color:#ff9c8a; }
.uktg-sim .uktg-sim__debrief .cellbox { background:rgba(0,0,0,.22); border-color:rgba(255,255,255,.14); }
.uktg-sim .uktg-sim__debrief .cellbox .ct { color:rgba(255,255,255,.72); }
.uktg-sim .uktg-sim__debrief .cellbox .cb { color:rgba(255,255,255,.62); }
.uktg-sim .uktg-sim__debrief .cellbox.on { background:rgba(11,132,255,.16); border-color:#6fb6ff;
                                   box-shadow:0 3px 14px rgba(0,0,0,.35); }
.uktg-sim .uktg-sim__debrief .cellbox.on .ct { color:#fff; }
.uktg-sim .uktg-sim__debrief .cellbox.on .cb { color:rgba(255,255,255,.88); }
.uktg-sim .uktg-sim__debrief .cellbox .youare { color:#6fb6ff; }
.uktg-sim .uktg-sim__debrief .sim-next { margin-top:1.5rem; }

.uktg-sim .score { list-style:none; margin:0 0 .4rem; padding:0; }
.uktg-sim .score li { display:flex; gap:.7rem; align-items:flex-start; padding:.6rem 0;
              border-bottom:1px solid #ececed; }
html[data-tutor-theme="dark"] .uktg-sim .score li { border-bottom-color:#2b3140; }
.uktg-sim .score .mk { font-size:1.15rem; font-weight:900; line-height:1.3; flex-shrink:0; width:1.1em; }
.uktg-sim .score li.yes .mk { color:#1f6b34; }
.uktg-sim .score li.no  .mk { color:#a8321f; }
html[data-tutor-theme="dark"] .uktg-sim .score li.yes .mk { color:#7fd39a; }
html[data-tutor-theme="dark"] .uktg-sim .score li.no  .mk { color:#ff9c8a; }
.uktg-sim .score .el { margin:0; font-weight:700; }
.uktg-sim .score .how { margin:.2rem 0 0; font-size:.9rem; color:#555; }
html[data-tutor-theme="dark"] .uktg-sim .score .how { color:#9aa0ab; }
.uktg-sim .score .why { display:block; margin-top:.2rem; font-style:italic; }

.uktg-sim .grid { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-bottom:.4rem; }
  @media (max-width:640px) {.uktg-sim .grid { grid-template-columns:1fr; }}
  /* Spotlight: the cell the learner landed in is lit, the other three recede.
     The recede is done with a grey ground and a softer border, NOT with opacity on the
     text. Fading type is the easy way to do this and it drops the contrast below AA on
     exactly the sentences somebody most needs to read. Muted here is 7.4:1. */
.uktg-sim .cellbox { border:1.5px solid #e6e8ec; border-radius:8px; padding:.8rem .95rem;
             background:#f4f5f7; transition:box-shadow .3s ease, background .3s ease; }
.uktg-sim .cellbox.on { border:2px solid #0b84ff; background:#fff;
                box-shadow:0 3px 14px rgba(11,132,255,.22); }
.uktg-sim .cellbox.on .ct { color:#0c111d; }
.uktg-sim .cellbox.on .cb { color:#333741; }
html[data-tutor-theme="dark"] .uktg-sim .cellbox { border-color:#242a36; background:#141922; }
html[data-tutor-theme="dark"] .uktg-sim .cellbox .ct { color:#8d939e; }
html[data-tutor-theme="dark"] .uktg-sim .cellbox .cb { color:#8d939e; }
html[data-tutor-theme="dark"] .uktg-sim .cellbox.on { background:#1c2735; border-color:#0b84ff;
                box-shadow:0 3px 14px rgba(11,132,255,.3); }
html[data-tutor-theme="dark"] .uktg-sim .cellbox.on .ct { color:#f0f1f1; }
html[data-tutor-theme="dark"] .uktg-sim .cellbox.on .cb { color:#cecfd2; }
.uktg-sim .cellbox .youare { display:inline-block; font-size:.64rem; letter-spacing:.1em; font-weight:800;
                     text-transform:uppercase; color:#0b6ad4; margin-bottom:.3rem; }
html[data-tutor-theme="dark"] .uktg-sim .cellbox .youare { color:#6fb6ff; }
.uktg-sim .cellbox .ct { margin:0 0 .3rem; font-weight:800; font-size:.93rem; color:#555; }
.uktg-sim .cellbox .cb { margin:0; font-size:.88rem; color:#555; }

.uktg-sim .tag { display:inline-block; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
         font-weight:800; padding:.1rem .45rem; border-radius:3px; margin-right:.4rem; }
.uktg-sim .tag.opens { background:#dbeadb; color:#1f4d2b; }
.uktg-sim .tag.closes { background:#f6dede; color:#7a2020; }
.uktg-sim .tag.neutral { background:#e6e8ec; color:#3c4350; }
/* ==== SIM:END ==== */