/* ==========================================================================
   IMMERSION — lesson / topic / quiz
   Ref: handoff § Phase 3, and the design's lesson screen.

   LearnDash Focus Mode is OFF. The design needs two sidebars — the app nav on
   the left and the step rail on the right — and Focus Mode provides one, which
   is course navigation rather than the app nav. The theme owns this layout;
   LearnDash still renders the content itself through the_content().

   The middle column is deliberately constrained. Without both rails it ran the
   full width of the screen and the lines were far too long to read.
   ========================================================================== */

.imm-lesson {
  display: flex;
  flex-direction: column;
  min-height: 100%;

  /* Every other enrolled screen centres a 1280px container (the brief's
     "content max-width 1280px"), so on a wide viewport their copy sits well in
     from the sidebar. The lesson page filled the whole column instead, and its
     text visibly jumped left when you navigated to it. Same container here, so
     the left edge lands in exactly the same place. */
  width: 100%;
  max-width: var(--imm-content-max);
  margin-inline: auto;
}

/* --- Sticky sub-header ----------------------------------------------------- */

.imm-lesson__bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--imm-s-5);
  padding: var(--imm-s-4) var(--imm-s-12);
  background: var(--imm-paper);
  border-bottom: 1px solid var(--imm-line);
}

.imm-lesson__back {
  flex: none;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--imm-link);
  text-decoration: none;
  white-space: nowrap;
}

.imm-lesson__back:hover { color: var(--imm-link-hover); }

.imm-lesson__crumb {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 12.5px;
  color: var(--imm-faint);
}

.imm-lesson__nav {
  flex: none;
  display: flex;
  gap: var(--imm-s-2);
}

.imm-lesson__nav .imm-btn { padding: 9px 14px; font-size: 13.5px; }

/* 12ch cut "Day 1 – Prologue" to "Day 1 – Prolo…" on a button with room to
   spare. The label still truncates rather than wrapping, but only when it
   genuinely does not fit. */
.imm-lesson__nav-label {
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .imm-lesson__nav-label { max-width: 14ch; }
}

/* --- Two columns inside the app shell -------------------------------------- */

.imm-lesson__body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--imm-rail-lesson);
  align-items: start;
}

/* Generous padding: in the old Focus Mode layout the copy sat hard against the
   container edge, which read as broken. */
.imm-lesson__main {
  min-width: 0;
  padding: var(--imm-s-11) var(--imm-s-12) var(--imm-s-13);
}

/* The reading measure. The rail plus the app sidebar do most of the work, and
   this stops the column stretching on very wide screens. */
.imm-lesson__article {
  width: 100%;
  max-width: var(--imm-reading-max);
}

.imm-lesson__title {
  margin: 0 0 var(--imm-s-6);
  font-size: 29px;
  font-weight: 800;
  letter-spacing: var(--imm-track-h1);
  color: var(--imm-text);
}

.imm-lesson__content { font-size: 16.5px; line-height: 1.7; color: var(--imm-body); }

/* Reading measure.
   This was `.imm-lesson__content > p`, a direct-child selector — but LearnDash
   nests its content inside .learndash-wrapper divs, so it never matched a
   single paragraph and the lines ran the full column width.

   Descendant selectors, and only on the typographic elements: video, tables,
   the step list and the drill/reader cards keep the full column. */
.imm-lesson__content p,
.imm-lesson__content li,
.imm-lesson__content h2,
.imm-lesson__content h3,
.imm-lesson__content h4,
.imm-lesson__content h5,
.imm-lesson__content h6,
.imm-lesson__content blockquote,
.imm-lesson__content dl {
  max-width: var(--imm-prose-max);
}

/* Lists carry their own indent, so the measure is set on the list rather than
   each item, to keep the right edge aligned with the paragraphs above. */
.imm-lesson__content ul,
.imm-lesson__content ol {
  max-width: var(--imm-prose-max);
}

.imm-lesson__content li { max-width: none; }

/* LearnDash's own components are layout, not prose — they must not be pinched
   to the reading measure. */
.imm-lesson__content .learndash-wrapper ul,
.imm-lesson__content .learndash-wrapper ol,
.imm-lesson__content .ld-table-list,
.imm-lesson__content .ld-breadcrumbs,
.imm-lesson__content .ld-status {
  max-width: none;
}

/* --- Right rail ------------------------------------------------------------
   Rebuilt to the design. The base styles for these components used to live in
   a "Immersion rail" block written for the dark Focus Mode sidebar; that block
   was removed with Focus Mode, which left the steps rendering as a bare <ul>
   with bullets and underlined links. They are defined here, for paper.
   -------------------------------------------------------------------------- */

.imm-lesson__rail {
  position: sticky;
  top: 61px; /* clears the sticky sub-header */
  align-self: start;
  padding: var(--imm-s-8) var(--imm-s-7);
  background: var(--imm-paper);
  border-left: 1px solid var(--imm-line);
}

.imm-focus-rail {
  display: grid;
  gap: var(--imm-s-9);
  margin: 0;
  padding: 0;
  border: 0;
}

.imm-focus-card {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

.imm-focus-card .imm-eyebrow {
  margin: 0 0 var(--imm-s-3);
  color: var(--imm-faint);
}

/* --- Today's steps ---------------------------------------------------------
   Each step is a row card: a status circle, then the title. Complete sits on
   canvas; the step being read takes the red wash and goes bold.
   -------------------------------------------------------------------------- */

.imm-focus-steps {
  display: grid;
  gap: var(--imm-s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.imm-focus-step {
  display: flex;
  align-items: center;
  gap: var(--imm-s-3);
  padding: var(--imm-s-3) var(--imm-s-4);
  border-radius: var(--imm-r-card);
  background: var(--imm-canvas);
}

.imm-focus-step a {
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--imm-text);
  text-decoration: none;
}

.imm-focus-step a:hover { color: var(--imm-link); }

.imm-focus-step__mark {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: var(--imm-r-pill);
  border: 2px solid var(--imm-line-dashed);
  background: transparent;
}

/* Complete: filled teal disc with a white tick.

   The tick is two borders on a rotated pseudo-element. It was previously drawn
   with a pair of 45-degree linear-gradients, which rendered as a broken
   squiggle — gradients cannot produce a crisp diagonal stroke at 22px. The
   disc needs position:relative so the tick anchors to it and not to the row. */
.imm-focus-step__mark { position: relative; }

.imm-focus-step.is-complete .imm-focus-step__mark {
  background-color: var(--imm-link);
  border-color: var(--imm-link);
  color: #fff;
}

.imm-focus-step.is-complete .imm-focus-step__mark::after {
  content: "";
  position: absolute;
  top: 46%;
  left: 50%;
  width: 5px;
  height: 9px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* The step being read.

   Karel: "the step you're currently on shows an empty circle, the same glyph as
   an incomplete step, even when the card beside it says COMPLETE."

   Two faults. `is-current` blanked the mark unconditionally, so a step that was
   BOTH current and complete lost its tick — the state regressed to looking
   untouched. And current-but-unfinished drew an empty circle differing from an
   untouched step only by border colour, which is not a difference you notice.
   Current is now carried by the row, and the mark says what has been DONE. */
.imm-focus-step.is-current {
  background: var(--imm-red-wash);
}

/* Current and not yet finished: a filled dot, so it cannot read as untouched. */
.imm-focus-step.is-current:not(.is-complete) .imm-focus-step__mark {
  border-color: var(--imm-red);
  background: transparent;
}

.imm-focus-step.is-current:not(.is-complete) .imm-focus-step__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--imm-red);
  transform: translate(-50%, -50%);
}

/* Current AND complete: the tick stays. The row highlight already says
   "you are here"; the mark is for whether it is done. */
.imm-focus-step.is-current.is-complete .imm-focus-step__mark {
  background-color: var(--imm-link);
  border-color: var(--imm-link);
  color: #fff;
}

.imm-focus-step.is-current a {
  color: var(--imm-text);
  font-weight: 700;
}

/* --- Course progress ------------------------------------------------------- */

.imm-lesson__rail .imm-progress {
  background-color: var(--imm-progress-track);
  margin-bottom: var(--imm-s-3);
}

.imm-focus-progress-label {
  margin: 0;
  font-size: 14.5px;
  color: var(--imm-body);
}

/* --- Coming up -------------------------------------------------------------- */

.imm-focus-upcoming {
  display: grid;
  gap: var(--imm-s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.imm-focus-upcoming li { font-size: 14.5px; line-height: 1.4; }

.imm-focus-upcoming a {
  color: var(--imm-body);
  text-decoration: none;
}

.imm-focus-upcoming a:hover { color: var(--imm-link); }

/* The checkpoint is the one thing in this list that is not just another day. */
.imm-focus-upcoming .is-checkpoint a {
  color: var(--imm-magenta);
  font-weight: 700;
}

/* --- Stuck? ----------------------------------------------------------------- */

.imm-focus-card--stuck {
  padding-top: var(--imm-s-7);
  border-top: 1px solid var(--imm-line);
}

.imm-focus-card--stuck .imm-eyebrow { margin: 0; }

.imm-focus-ask {
  width: 100%;
  margin-top: calc(var(--imm-s-9) * -1 + var(--imm-s-4));
  background: var(--imm-paper);
  border: 1px solid var(--imm-line);
  border-radius: var(--imm-r-card);
  color: var(--imm-link);
  font-size: 14.5px;
}

.imm-focus-ask:hover {
  border-color: var(--imm-link);
  color: var(--imm-link-hover);
}

/* --- LearnDash content inside our column ----------------------------------- */

.imm-lesson__content .learndash-wrapper { margin: 0; }

.imm-lesson__content .ld-table-list,
.imm-lesson__content .ld-lesson-topic-list .ld-table-list {
  background: var(--imm-paper);
  border: 1px solid var(--imm-line);
  border-radius: var(--imm-r-panel);
  overflow: hidden;
}

.imm-lesson__content .ld-table-list-item {
  margin: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--imm-line-3);
}

.imm-lesson__content .ld-table-list-item:last-child { border-bottom: 0; }

.imm-lesson__content .ld-table-list-item-preview {
  display: flex;
  align-items: center;
  gap: var(--imm-s-3);
  padding: var(--imm-s-4) var(--imm-s-6);
  color: var(--imm-body);
  text-decoration: none;
}

.imm-lesson__content .ld-table-list-item-preview:hover {
  background: var(--imm-teal-wash);
  color: var(--imm-text);
}

.imm-lesson__content .ld-topic-title { font-size: 15px; font-weight: 600; color: inherit; }

.imm-lesson__content .ld-status-icon {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: var(--imm-r-pill);
}

.imm-lesson__content .ld-status-complete { background-color: var(--imm-link); color: #fff; }

.imm-lesson__content .ld-status-incomplete {
  background-color: transparent;
  border: 2px solid var(--imm-line-dashed);
}

.imm-lesson__content #sfwd-mark-complete input[type="submit"],
.imm-lesson__content .learndash_mark_complete_button {
  background-color: var(--imm-link);
  border: 0;
  border-radius: var(--imm-r-btn);
  color: #fff;
  font-family: var(--imm-font-ui);
  font-size: 15.5px;
  font-weight: 700;
  padding: 13px 20px;
}

.imm-lesson__content #sfwd-mark-complete input[type="submit"]:hover,
.imm-lesson__content .learndash_mark_complete_button:hover { background-color: var(--imm-link-hover); }

/* --- Embeds ----------------------------------------------------------------
   Every iframe has to fit the column. The course's videos are authored at a
   fixed 720x360, which overflows the centre column now that there are two
   rails beside it.
   -------------------------------------------------------------------------- */

.imm-lesson__content iframe {
  max-width: 100%;
  border: 0;
}

/* Video wells.
   This named vimeo and youtube only — and this course uses neither. All 65 of
   its embeds are CloudApp, so the rule matched nothing on any lesson. Google
   Forms embeds are deliberately NOT in this list: they are tall documents, not
   2:1 video, and an aspect-ratio would crop them. */
.imm-lesson__content .ld-video,
.imm-lesson__content iframe[src*="getcloudapp"],
.imm-lesson__content iframe[src*="vimeo"],
.imm-lesson__content iframe[src*="youtube"],
.imm-lesson__content iframe[src*="youtu.be"] {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  border-radius: var(--imm-r-panel);
  background: var(--imm-ink-deep);
  overflow: hidden;
}

/* A form embed keeps the height it was authored with. */
.imm-lesson__content iframe[src*="docs.google.com"] {
  width: 100%;
  min-height: 520px;
}

/* --- Mobile ----------------------------------------------------------------
   Handoff § Phase 12: the rail moves below the content.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .imm-lesson__body { grid-template-columns: minmax(0, 1fr); }

  .imm-lesson__rail {
    position: static;
    border-left: 0;
    border-top: 1px solid var(--imm-line);
  }
}

@media (max-width: 900px) {
  .imm-lesson__bar {
    position: static;
    flex-wrap: wrap;
    gap: var(--imm-s-3);
    padding: var(--imm-s-3) var(--imm-s-5);
  }

  .imm-lesson__crumb { flex: 1 1 100%; order: 3; }

  .imm-lesson__main { padding: var(--imm-s-7) var(--imm-s-5) var(--imm-s-11); }

  .imm-lesson__title { font-size: 24px; }

  .imm-lesson__rail { padding: var(--imm-s-7) var(--imm-s-5); }

  .imm-lesson__nav .imm-btn { min-height: 44px; }
}

/* ==========================================================================
   Step furniture — handoff § Phase 9
   Topics render inside Focus Mode, so these ride along with the lesson CSS
   rather than owning a stylesheet of their own.
   ========================================================================== */

.imm-step-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--imm-s-3);
  margin: 0 0 var(--imm-s-3);
}

.imm-chip--sample {
  background: var(--imm-teal-wash);
  border: 1px solid var(--imm-teal-wash-line);
  color: var(--imm-link);
}

/* --- Downloads ------------------------------------------------------------ */

.imm-downloads {
  margin-top: var(--imm-s-9);
  padding: var(--imm-s-7);
  background: var(--imm-paper);
  border: 1px solid var(--imm-line);
  border-radius: var(--imm-r-panel);
}

.imm-downloads__list {
  margin: var(--imm-s-3) 0 0;
  padding: 0;
  list-style: none;
}

.imm-download {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--imm-s-4);
  padding: var(--imm-s-3) 0;
  border-bottom: 1px solid var(--imm-line-3);
}

.imm-download:last-child { border-bottom: 0; }

.imm-download a {
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--imm-text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.imm-download a:hover { color: var(--imm-link); }

/* Type and size sit right-aligned, per the handoff. */
.imm-download__meta {
  flex: none;
  font-size: 12.5px;
  color: var(--imm-faint);
  font-variant-numeric: tabular-nums;
}

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

.imm-reflection {
  margin-top: var(--imm-s-5);
  padding: var(--imm-s-6) var(--imm-s-7);
  background: var(--imm-teal-wash);
  border: 1px solid var(--imm-teal-wash-line);
  border-radius: var(--imm-r-card);
}

.imm-reflection__prompt {
  margin: var(--imm-s-2) 0 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--imm-text);
}

/* --- Unsized inline SVG in lesson content ---------------------------------
   Some lesson content contains inline <svg> with a viewBox but no width or
   height. An SVG like that has no intrinsic size and expands to fill its
   container — on Day 4 it rendered as a full-column black stopwatch under the
   word TIMER. Capping it keeps it legible as an icon.

   This is a guard, not a fix: the real answer is a width on the SVG in the
   content itself.
   -------------------------------------------------------------------------- */

/* SVG only, deliberately. An <img> carries intrinsic dimensions from the file,
   so max-width:100% already sizes it correctly — capping images at 96px would
   shrink legitimate screenshots and diagrams. An inline <svg> with only a
   viewBox has no intrinsic size at all and expands to fill its container,
   which is how a decorative glyph became a full-column black graduation cap. */
.imm-lesson__content svg:not([width]):not([height]) {
  width: auto;
  max-width: 96px;
  max-height: 96px;
  height: auto;
}

/* LearnDash renders its own breadcrumb AND its own Previous / Back to Course /
   Next block. Both repeat what the sub-header already shows, and the second
   one says "Module" where the rest of the site says "day".
   
   These were scoped to .imm-lesson__content, but LearnDash prints the
   navigation in its own shortcode wrapper OUTSIDE that element, so the rule
   never matched and both sets stayed on screen. Scoped to the article now. */
.imm-lesson__article .ld-content-actions,
.imm-lesson__article .ld-breadcrumbs { display: none; }

.imm-lesson__crumb a { color: var(--imm-link); text-decoration: none; }
.imm-lesson__crumb a:hover { color: var(--imm-link-hover); }

/* --- GenerateBlocks leftovers ----------------------------------------------
   Karel: "some code blocks are leftovers from GeneratePress elements that need
   adjusting… Come up with a better way to display this without the need of the
   GeneratePress add-ons."

   66 of these are spread across 21 lessons and topics — "Did you know…",
   "Upload your work", a BONUS block — so rewriting the content would be a lot
   of destructive edits for no gain. The markup is perfectly good HTML: a
   heading carrying an icon, followed by a paragraph. It only ever LOOKED like
   nothing because the plugin's stylesheet went away with it.

   Styling it here makes the add-on unnecessary rather than merely absent:
   nothing needs migrating, every existing block gains the treatment at once,
   and new ones written the same way inherit it.

   The heading and the paragraph that follows are joined into one card by
   meeting borders — an adjacent-sibling rule, since they are siblings in the
   content and cannot be wrapped without editing 21 posts.
   -------------------------------------------------------------------------- */

.imm-lesson__content .gb-headline {
  display: flex;
  align-items: center;
  gap: var(--imm-s-3);
  max-width: var(--imm-callout-max);
  margin: var(--imm-s-9) 0 0;
  /* Karel asked for 15-20% either side on desktop.
     A percentage padding resolves against the CONTAINING BLOCK, not the
     element — so a flat 17% measured 21.7% of the callout on a wide screen.
     min() caps it at 17% of the callout's own 44rem measure (7.5rem), which
     holds at every width above the mobile breakpoint. */
  padding: var(--imm-s-6) min(17%, 7.5rem);
  background: var(--imm-teal-wash);
  border: 1px solid var(--imm-teal-wash-line);
  border-bottom: 0;
  border-radius: var(--imm-r-card) var(--imm-r-card) 0 0;
  font-family: var(--imm-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--imm-track-label);
  text-transform: uppercase;
  color: var(--imm-link-hover);
}

/* The body of the callout. */
.imm-lesson__content .gb-headline + p {
  max-width: var(--imm-callout-max);
  margin: 0 0 var(--imm-s-9);
  padding: var(--imm-s-7) min(17%, 7.5rem) var(--imm-s-8);
  background: var(--imm-teal-wash);
  border: 1px solid var(--imm-teal-wash-line);
  border-top: 0;
  border-radius: 0 0 var(--imm-r-card) var(--imm-r-card);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--imm-body);
}

.imm-lesson__content .gb-headline + p em { font-style: italic; }

/* The icon ships without width or height attributes, so the general SVG guard
   above — which caps unsized SVGs at 96px to stop a decorative glyph becoming
   a full-column graphic — would leave it enormous. */
.imm-lesson__content .gb-headline .gb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.9em;
  height: 2.9em;
  border-radius: var(--imm-r-pill);
  background: var(--imm-teal);
  color: #fff;
}

.imm-lesson__content .gb-headline .gb-icon svg {
  width: 1.05em;
  height: 1.15em;
  max-width: none;
  max-height: none;
  fill: currentColor;
}

.imm-lesson__content .gb-headline-text { display: block; }

/* Buttons from the same plugin, in the theme's own shape. */
.imm-lesson__content .gb-button {
  display: inline-flex;
  align-items: center;
  gap: var(--imm-s-2);
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: var(--imm-r-btn);
  background-color: var(--imm-link);
  color: #fff;
  font-family: var(--imm-font-ui);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--imm-t-btn);
}

.imm-lesson__content .gb-button:hover { background-color: var(--imm-link-hover); color: #fff; }
.imm-lesson__content .gb-button .gb-icon svg { width: 1.05em; height: 1.05em; fill: currentColor; }

/* --- Action callouts --------------------------------------------------------
   Karel: "Give the upload prompts 'action' styling."

   "Did you know…" is an aside — teal, the colour this site uses for Karel's
   voice and for things that are done. "Upload your work" asks you to DO
   something, so it takes red, which means action and "today" everywhere else.

   Targeted by GenerateBlocks' own hash class: all three upload prompts carry
   `gb-headline-ccec1c86` and nothing else does. That is precise but opaque, so
   `.imm-callout--action` is an alias — add it to a heading and the same
   treatment applies without depending on a hash the plugin generated.
   -------------------------------------------------------------------------- */

.imm-lesson__content .gb-headline-ccec1c86 .gb-icon,
.imm-lesson__content .imm-callout--action .gb-icon { background: var(--imm-red); }

.imm-lesson__content .gb-headline-ccec1c86,
.imm-lesson__content .imm-callout--action {
  background: var(--imm-red-wash);
  border-color: var(--imm-red-wash-line);
  border-left: 3px solid var(--imm-red);
  color: var(--imm-red-ink);
}

.imm-lesson__content .gb-headline-ccec1c86 + p,
.imm-lesson__content .imm-callout--action + p {
  background: var(--imm-red-wash);
  border-color: var(--imm-red-wash-line);
  border-left: 3px solid var(--imm-red);
}


/* Callouts on a narrow screen: the percentage would eat the line length. */
@media (max-width: 780px) {
  .imm-lesson__content .gb-headline { padding-inline: var(--imm-s-6); }
  .imm-lesson__content .gb-headline + p { padding-inline: var(--imm-s-6); }
}