/* ==========================================================================
   The Human Side of Instructional Design: course theme
   The service manual, turned on the expert who sent it, in a softer material:
   warm stock, indigo-to-violet covers, rounded plates with soft depth. Linked after lx.css by
   [course theme=assets/theme.css]; every rule is scoped to html[data-layout="slides"]
   or to the library's own class names. Nothing here edits lx.css or lx.js.

    1. Tokens          6. Blocks (callouts, statements, objectives, tables, lists)
    2. Type            7. Controls (buttons, quiz, matching, checklist, rating,
    3. Page chrome        reflection, scenario, tabs, hotspots, compare, gates)
    4. Covers          8. Motion (the page turn, and nothing else)
    5. Figures         9. Responsive
   ========================================================================== */


/* 1. Tokens ================================================================ */

:root {
  /* The world */
  --stock: #F7F6F3;          /* warm-neutral paper */
  --stock-2: #EEECE7;        /* the same paper, one value darker */
  --ink: #1C1F2B;            /* indigo-black ink */
  --ink-2: #12141D;          /* headings */
  --hairline: #D8D6D0;       /* rules at rest */
  --rule: #9A9892;           /* dashed and struck rules */
  --muted: #585C69;          /* secondary text */
  --signal: #B9400E;         /* one orange-red for what matters */
  --signal-tint: #F6DACB;    /* selection and caution surfaces */
  --signal-deep: #A2380C;    /* the signal on its own tint, 5.1:1 */
  --indigo: #1E2A5A;         /* covers and primary controls */
  --violet: #3F2D70;         /* the cover gradient's far end */
  --indigo-tint: #E9E8F4;    /* key-point and coach surfaces */
  --cover-bg: radial-gradient(120% 90% at 18% 8%, #4B3C94 0%, transparent 55%), linear-gradient(135deg, var(--indigo) 0%, var(--violet) 100%);
  --slate: var(--indigo);    /* kept as the covers' flat fallback */
  --slate-ink: #F7F6F3;      /* text on covers */
  --slate-muted: #C9CBE0;    /* secondary text on covers */
  --slate-tint: #FFB38A;     /* peach marks on covers */
  --slate-hairline: rgb(255 255 255 / .22); /* rules on covers */
  --r: 10px;                 /* plates, bubbles, blocks */
  --r-sm: 6px;               /* controls */
  --shadow-soft: 0 1px 2px rgb(28 31 43 / .06), 0 16px 40px -16px rgb(28 31 43 / .28);

  /* Width axis (Archivo wdth 62 to 125) */
  --wd-cond: "wdth" 70;
  --wd-norm: "wdth" 100;
  --wd-wide: "wdth" 118;

  /* Library tokens */
  --lx-accent: var(--signal);
  --lx-on-accent: #ffffff;
  --lx-bg: var(--stock);
  --lx-surface: var(--stock-2);
  --lx-surface-2: #E1E4E8;
  --lx-border: var(--hairline);
  --lx-text: var(--ink);
  --lx-heading: var(--ink-2);
  --lx-muted: var(--muted);
  --lx-success: var(--signal);
  --lx-success-soft: var(--stock);
  --lx-error: var(--ink);
  --lx-error-soft: var(--stock);
  --lx-warning: var(--ink);
  --lx-warning-soft: var(--stock);
  --lx-info: var(--ink);
  --lx-info-soft: var(--stock);
  --lx-font-ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --lx-font-body: var(--lx-font-ui);
  --lx-font-heading: var(--lx-font-ui);
  --lx-font-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --lx-text-size: 1.1875rem;
  --lx-leading: 1.6;
  --lx-radius: var(--r);
  --lx-radius-sm: var(--r-sm);
  --lx-shadow: var(--shadow-soft);
  --lx-shadow-lg: var(--shadow-soft);
  --lx-ease: cubic-bezier(.16, 1, .3, 1);
  --lx-speed: 0ms;
  --lx-focus: var(--signal);
  --lx-accent-2: var(--signal);
}
:root, .lx, .lx-block {
  --lx-accent-soft: var(--stock);
  --lx-accent-tint: var(--signal-tint);
  --lx-accent-line: var(--hairline);
  --lx-accent-strong: var(--signal);
}
html[data-font="sans"] { --lx-text-size: 1.1875rem; --lx-leading: 1.6; }
html[data-layout="slides"] {
  --lx-prose: 43rem;                 /* about 68ch of Archivo at 19px */
  --page-stage: 90rem;               /* the content pages' outer width; they sit at the left, under the running header */
  --lx-accent-2-on-accent: var(--slate-tint);
  --lx-slide-pad-y: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  /* Deck hooks read by lx.js: see deck() */
  --lx-count-sep: "/";
  --lx-resume: 1;
  --lx-page-turn: 1;
  --col-gap: clamp(1.5rem, 3.5cqi, 3rem);   /* the gap between the title column and the body column (lx.css) */
  /* The covers' side padding, reused by the spec strip */
  --cover-x: max(var(--lx-gutter), (100% - var(--lx-stage)) / 2 + var(--lx-slide-pad-x));
}

/* Browser surfaces: selection, caret, scrollbar, focus */
html[data-layout="slides"] { scrollbar-color: var(--rule) var(--stock); scrollbar-width: thin; background: var(--stock); }
html[data-layout="slides"]::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-layout="slides"]::-webkit-scrollbar-track { background: var(--stock); }
html[data-layout="slides"]::-webkit-scrollbar-thumb { background: var(--rule); border: 2px solid var(--stock); }
html[data-layout="slides"] ::selection,
html[data-layout="slides"] .lx ::selection,
.lx-deck ::selection { background: var(--signal-tint); color: var(--ink-2); }
.lx-slide > [data-lx="lesson-header"] ::selection { background: var(--slate-tint); color: var(--slate); }
html[data-layout="slides"] :is(input, textarea) { caret-color: var(--signal); }
html[data-layout="slides"] :is(.lx, .lx-block, .lx-deck, .lx-topbar) :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: var(--r-sm); }
html[data-layout="slides"] .lx-topbar :focus-visible { outline-color: var(--signal); }
html[data-layout="slides"] .lx [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }


/* 2. Type ================================================================== */

html[data-layout="slides"] .lx,
html[data-layout="slides"] .lx-block,
.lx-deck, .lx-topbar { font-variation-settings: var(--wd-norm); font-feature-settings: "kern"; }
html[data-layout="slides"] .lx { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
html[data-layout="slides"] .lx strong { font-weight: 600; color: var(--ink-2); }
html[data-layout="slides"] .lx a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: .2em; }
html[data-layout="slides"] .lx a:hover { text-decoration-thickness: 2px; }
html[data-layout="slides"] .lx code { border-radius: var(--r-sm); background: var(--stock-2); border-color: var(--hairline); font-family: var(--lx-font-mono); font-size: .82em; }
html[data-layout="slides"] .lx :where(li)::marker { color: var(--ink); }
html[data-layout="slides"] .lx > blockquote,
.lx-slide > blockquote { border-left: 1px solid var(--ink); padding-left: 1.25rem; font-style: normal; }
.lx-slide > blockquote > * + * { margin-top: .5em; }

/* Running labels: condensed caps. The eyebrows that carry information stay (lesson number and
   time, "Knowledge check", "Which stake? 2 of 5"). */
.lx-eyebrow,
.lx-callout__label,
[data-lx="objectives"] > :is(h2, h3, h4),
[data-lx="checklist"] > :is(h2, h3, h4),
.lx-scenario__speaker,
.lx-compare__tag,
.lx-tabs__tab,
.lx-feedback__title,
.lx-topbar__title,
.lx-btn {
  font-family: var(--lx-font-ui);
  font-variation-settings: var(--wd-cond);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.lx-eyebrow { font: 700 .74rem/1.3 var(--lx-font-ui); color: var(--ink); }
/* Keys, counts and specs: the mono */
.lx-deck__count, .lx-progress__label, .lx-hotspots__count, .lx-checklist__progress,
.lx-sort__count, .lx-flashcards__count,
.lx-match__badge, .lx-hotspots__marker, .lx-rating__opt, .lx-seq__pos {
  font-family: var(--lx-font-mono);
  font-variant-numeric: tabular-nums;
}
html[data-layout="slides"] .lx :is(table, td, th) { font-variant-numeric: tabular-nums; }

/* Slide titles: the section number above, in the mono, then the title. main.lx is a size
   container, which is also style containment, so the counters are reset on the first slide
   (its scope covers every slide after it), not on .lx itself. */
html[data-layout="slides"] .lx > .lx-slide:first-child { counter-reset: fig sec; }
.lx-slide > h2 {
  counter-increment: sec;
  font-size: clamp(1.85rem, 1.25rem + 2vw, 2.7rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  max-width: 22ch;
  color: var(--ink-2);
}
.lx-slide > h2::before {
  display: block;
  margin-bottom: .8rem;
  font: 500 .78rem/1 var(--lx-font-mono);
  letter-spacing: .04em;
  color: var(--ink);
}
html[data-lesson="1"] .lx-slide > h2::before { content: "1." counter(sec); }
html[data-lesson="2"] .lx-slide > h2::before { content: "2." counter(sec); }
html[data-lesson="3"] .lx-slide > h2::before { content: "3." counter(sec); }
html[data-lesson="4"] .lx-slide > h2::before { content: "4." counter(sec); }
.lx-slide > h2::after { width: 2.5rem; height: 2px; margin-top: .9rem; border-radius: 2px; background: var(--ink); }
.lx-slide > h3 { font-size: 1.2rem; font-weight: 700; }
html[data-layout="slides"] .lx h4 { font-size: 1.05rem; }

/* Hidden slides stay in the box tree at zero size so the figure and section counters count
   across the whole page (an element with display: none never increments a counter). They are
   still hidden: visibility hidden keeps them out of the tab order and the accessibility tree. */
html[data-lx-deck] .lx > .lx-slide[hidden] {
  display: block !important;
  position: absolute !important; left: 0; top: 0;
  width: 0 !important; height: 0 !important; min-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  padding: 0 !important; margin: 0 !important;
}


/* 3. Page chrome =========================================================== */

/* Running header: course title, lesson name, the activities as a rule that fills. */
html[data-layout="slides"] .lx-topbar {
  gap: 1.5rem;
  padding: .7rem var(--lx-gutter);
  background: var(--stock);
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
}
html[data-layout="slides"] .lx-topbar__title { font: 700 .74rem/1.3 var(--lx-font-ui); font-variation-settings: var(--wd-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.lx-topbar__lesson { font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--muted); font-variation-settings: var(--wd-norm); font-size: .82rem; }
.lx-topbar__lesson::before { content: "  /  "; white-space: pre; opacity: 1; color: var(--hairline); }
html[data-layout="slides"] .lx-topbar [data-lx="progress"] { color: var(--ink); gap: .75rem; }
html[data-layout="slides"] .lx-topbar .lx-progress__bar { height: 2px; min-width: 6rem; border-radius: var(--r-sm); background: var(--hairline); overflow: visible; }
html[data-layout="slides"] .lx-topbar .lx-progress__bar > span { background: var(--signal); border-radius: var(--r-sm); transition: none; }
.lx-progress__label { font: 400 .7rem/1 var(--lx-font-mono); letter-spacing: .02em; color: var(--ink); }

/* Footer: Back, "p. 4 / 23", Next, and the position rule that fills. */
.lx-deck {
  min-height: 4rem;
  padding: .6rem var(--lx-gutter);
  background: var(--stock);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-top: 1px solid var(--hairline);
}
.lx-deck::before { top: -1px; height: 2px; background: var(--ink); border-radius: 2px; transition: none; }
/* The place you came back to: a signal tick on the position rule (set by lx.js deck() when the
   theme asks for --lx-resume). */
.lx-deck[data-resume]::after {
  content: "";
  position: absolute; top: -5px;
  left: calc(var(--_resume, 0) * 100%);
  width: 2px; height: 10px;
  margin-left: -1px;
  background: var(--signal);
}
.lx-deck__count { font: 500 .78rem/1.3 var(--lx-font-mono); letter-spacing: .02em; color: var(--ink-2); }
.lx-deck__count::before { content: "p. "; }
.lx-deck__hint { margin-top: .2rem; font: 500 .76rem/1.3 var(--lx-font-ui); font-variation-settings: var(--wd-cond); letter-spacing: .02em; color: var(--muted); }
.lx-deck .lx-btn { min-width: 6.5rem; }
.lx-deck .lx-btn:disabled { opacity: 1; }
.lx-deck .lx-btn .lx-icon { width: 1em; height: 1em; }

.lx-skip { border-radius: var(--r-sm); background: var(--ink); color: var(--stock); font-family: var(--lx-font-ui); }


/* 4. Covers ================================================================ */

.lx-slide > [data-lx="lesson-header"] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-content: stretch;
  justify-content: flex-start;
  gap: 0;
  padding-block: clamp(1.5rem, 3vh, 2.5rem) clamp(4.5rem, 8vh, 6rem);
  padding-inline: var(--cover-x);
  background: var(--cover-bg);
  background-color: var(--slate);
  color: var(--slate-ink);
}
/* The section number, expanded and heavy, top left. */
.lx-slide > [data-lx="lesson-header"]::before {
  content: "00";
  display: block;
  order: 0;
  margin: 0 0 clamp(1.5rem, 4vh, 3rem);
  font: 800 clamp(3.5rem, 2rem + 6vw, 7rem)/0.9 var(--lx-font-ui);
  font-variation-settings: "wdth" 125;
  letter-spacing: -.01em;
  color: var(--slate-tint);
  font-variant-numeric: tabular-nums;
}
html[data-lesson="0"] .lx-slide > [data-lx="lesson-header"]::before { content: none; } /* front matter carries no section number */
html[data-lesson="0"] .lx-slide > [data-lx="lesson-header"] { padding-top: clamp(3rem, 8vh, 6rem); }
html[data-lesson="1"] .lx-slide > [data-lx="lesson-header"]::before { content: "01"; }
html[data-lesson="2"] .lx-slide > [data-lx="lesson-header"]::before { content: "02"; }
html[data-lesson="3"] .lx-slide > [data-lx="lesson-header"]::before { content: "03"; }
html[data-lesson="4"] .lx-slide > [data-lx="lesson-header"]::before { content: "04"; }
.lx-slide > [data-lx="lesson-header"] > *,
.lx-slide > .lx-lesson-header--media > * { max-width: var(--lx-wide); margin-inline: 0; }
.lx-slide > [data-lx="lesson-header"] h1 {
  order: 1;
  max-width: 16ch;
  margin: 0;
  font-size: clamp(2.5rem, 1.2rem + 4.6vw, 5rem);
  font-weight: 800;
  font-variation-settings: "wdth" 112;
  line-height: .95;
  letter-spacing: -.025em;
  color: var(--slate-ink);
}
.lx-slide > [data-lx="lesson-header"] h1::before { content: none; }
/* The signal rule, then the one line. */
.lx-slide > [data-lx="lesson-header"] h1 + p {
  order: 2;
  max-width: 34rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 3px solid var(--slate-tint);
  font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem);
  line-height: 1.45;
  color: var(--slate-ink);
}
.lx-slide > [data-lx="lesson-header"] :is(p, .lx-eyebrow) { color: var(--slate-ink); }
/* The spec strip along the bottom rule. */
.lx-slide > [data-lx="lesson-header"] .lx-eyebrow {
  position: absolute;
  left: var(--cover-x); right: var(--cover-x); bottom: clamp(1.25rem, 3vh, 2rem);
  margin: 0;
  padding-top: .8rem;
  border-top: 1px solid var(--slate-hairline);
  font: 400 .72rem/1.4 var(--lx-font-mono);
  font-variation-settings: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--slate-muted);
}
.lx-slide > [data-lx="lesson-header"] .lx-eyebrow + h1 { margin-top: 0; }
/* The overview cover: the figure as a plate on the right. */
.lx-slide > .lx-lesson-header--media {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: clamp(2rem, 5vw, 4.5rem);
  row-gap: 0;
  align-items: start;
  padding-inline: var(--cover-x);
}
.lx-slide > .lx-lesson-header--media::before { grid-column: 1 / -1; grid-row: 1; }
.lx-slide > .lx-lesson-header--media > .lx-lesson-header__text { display: contents; }
.lx-slide > .lx-lesson-header--media h1 { grid-column: 1; grid-row: 2; font-size: clamp(2.25rem, 1rem + 4vw, 4.5rem); }
.lx-slide > .lx-lesson-header--media h1 + p { grid-column: 1; grid-row: 3; }
.lx-slide > .lx-lesson-header--media > .lx-lesson-header__media {
  grid-column: 1; grid-row: 4;
  aspect-ratio: auto;
  width: 100%;
  max-width: 34rem;
  margin-top: 2.5rem;
  border: 1px solid var(--slate-hairline);
  border-radius: var(--r);
  box-shadow: 0 2px 6px rgb(0 0 0 / .18), 0 28px 64px -20px rgb(0 0 0 / .45);
  background: var(--stock);
  overflow: hidden;
}
@container lx (min-width: 50rem) {
  .lx-slide > .lx-lesson-header--media { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding-inline: var(--cover-x); }
  .lx-slide > .lx-lesson-header--media > .lx-lesson-header__media { grid-column: 2; grid-row: 2 / span 2; align-self: start; margin-top: .4rem; max-width: none; }
}


/* 5. Figures =============================================================== */

/* Every image, hotspot image, compare and media-text image is a numbered plate:
   "FIG. 3.2" in the mono above a hairline, the figure, a caption below. */
.lx-slide:has(> :is([data-lx="hotspots"], [data-lx="compare"], [data-lx="image"], [data-lx="media-text"])) { counter-increment: fig; }
.lx-slide > :is([data-lx="hotspots"], [data-lx="compare"], [data-lx="image"], [data-lx="media-text"])::before {
  content: "FIG. " counter(fig);
  display: block;
  padding-bottom: .5rem;
  margin-bottom: .9rem;
  border-bottom: 1px solid var(--ink);
  font: 700 .72rem/1 var(--lx-font-mono);
  letter-spacing: .06em;
  color: var(--ink-2);
}
html[data-lesson="1"] .lx-slide > :is([data-lx="hotspots"], [data-lx="compare"], [data-lx="image"], [data-lx="media-text"])::before { content: "FIG. 1." counter(fig); }
html[data-lesson="2"] .lx-slide > :is([data-lx="hotspots"], [data-lx="compare"], [data-lx="image"], [data-lx="media-text"])::before { content: "FIG. 2." counter(fig); }
html[data-lesson="3"] .lx-slide > :is([data-lx="hotspots"], [data-lx="compare"], [data-lx="image"], [data-lx="media-text"])::before { content: "FIG. 3." counter(fig); }
html[data-lesson="4"] .lx-slide > :is([data-lx="hotspots"], [data-lx="compare"], [data-lx="image"], [data-lx="media-text"])::before { content: "FIG. 4." counter(fig); }
.lx-hotspots__canvas > img,
[data-lx="image"] img,
[data-lx="media-text"] img,
.lx-compare__stage { border: 1px solid var(--hairline); border-radius: var(--r); box-shadow: var(--shadow-soft); background: #fff; overflow: hidden; }
[data-lx="image"] figcaption,
[data-lx="hotspots"] figcaption,
[data-lx="compare"] figcaption,
[data-lx="video"] figcaption {
  margin-top: .75rem;
  padding-top: .5rem;
  border-top: 1px solid var(--hairline);
  font: 400 .88rem/1.5 var(--lx-font-ui);
  color: var(--muted);
  text-align: left;
}
/* media-text: the plate label sits over the figure column only. */
.lx-slide > [data-lx="media-text"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem 0; align-items: start; }
.lx-slide > [data-lx="media-text"]::before { grid-column: 1; grid-row: 1; margin-bottom: 0; }
.lx-slide > [data-lx="media-text"] > :is(img, figure) { grid-column: 1; grid-row: 2; }
.lx-slide > [data-lx="media-text"] > :not(img, figure) { grid-column: 1; grid-row: 3; margin-top: .5rem; }
@container lx (min-width: 40rem) {
  .lx-slide > [data-lx="media-text"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(1.5rem, 4cqi, 3rem); }
  .lx-slide > [data-lx="media-text"] > :not(img, figure) { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .lx-slide > [data-lx="media-text"][data-align="right"] > :is(img, figure) { order: 0; grid-column: 2; }
  .lx-slide > [data-lx="media-text"][data-align="right"]::before { grid-column: 2; }
  .lx-slide > [data-lx="media-text"][data-align="right"] > :not(img, figure) { grid-column: 1; }
}


/* 6. Blocks ================================================================ */

/* Callouts: labeled blocks. NOTE (note, tip) on a hairline; CAUTION (warning, important) under a
   signal tint; KEY POINT (takeaway) on an indigo tint. Tinted blocks, no icons, no thick left borders. */
[data-lx="callout"] {
  padding: 1rem 1.15rem 1.1rem;
  background: var(--stock-2);
  border: 0;
  border-radius: var(--r);
  font-size: 1.0625rem;
}
[data-lx="callout"]::before { content: none; }
[data-lx="callout"] > .lx-callout__label + * { margin-top: .8rem; }
.lx-callout__label {
  padding-bottom: .5rem;
  border-bottom: 1px solid rgb(28 31 43 / .12);
  font: 700 .72rem/1.3 var(--lx-font-ui);
  letter-spacing: .12em;
  color: var(--ink);
}
[data-lx="callout"][data-variant="takeaway"] { border: 0; background: var(--indigo-tint); font-size: 1.05rem; font-weight: 500; }
[data-lx="callout"][data-variant="takeaway"] .lx-callout__label { color: var(--ink); }
[data-lx="callout"]:is([data-variant="warning"], [data-variant="important"]) { background: var(--signal-tint); }
[data-lx="callout"]:is([data-variant="warning"], [data-variant="important"]) .lx-callout__label { color: var(--signal-deep); }
.lx-slide > [data-lx="callout"] { font-size: 1.0625rem; max-width: var(--lx-prose); }

/* Statements: a pull-quote in Archivo italic, sized under the slide title, one signal rule above.
   A statement that is the whole slide is set larger and stays italic. */
[data-lx="statement"],
.lx-slide > [data-lx="statement"] {
  padding: 0;
  font: italic 500 clamp(1.3rem, 1.1rem + .7vw, 1.65rem)/1.4 var(--lx-font-ui);
  font-variation-settings: "wdth" 100;
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
  color: var(--ink-2);
  max-width: 34ch;
}
[data-lx="statement"]::before,
.lx-slide > [data-lx="statement"]::before { width: 3rem; height: 3px; margin: 0 0 .9rem; border-radius: 0; background: var(--signal); }
[data-lx="statement"]::after,
.lx-slide > [data-lx="statement"]::after,
.lx-slide > [data-lx="statement"]:only-child::after { content: none; }
[data-lx="statement"][data-variant="bar"],
.lx-slide > [data-lx="statement"][data-variant="bar"] { padding: 0; border-left: 0; max-width: 34ch; }
[data-lx="statement"][data-variant="bar"]::before,
.lx-slide > [data-lx="statement"][data-variant="bar"]::before { content: ""; display: block; }
.lx-slide > [data-lx="statement"]:only-child {
  max-width: 28ch;
  margin-inline: 0;
  text-align: left;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.005em;
}
.lx-slide > [data-lx="statement"]:only-child::before { margin-inline: 0; width: 4rem; }

/* Objectives: a numbered procedure. */
[data-lx="objectives"] {
  padding: .7rem 0 0;
  background: none;
  border: 0;
  border-top: 2px solid var(--ink);
  border-radius: var(--r-sm);
}
[data-lx="objectives"] > :is(h2, h3, h4) { font: 700 .72rem/1.3 var(--lx-font-ui); letter-spacing: .12em; color: var(--ink); }
[data-lx="objectives"] > :is(ul, ol) { margin-top: .9rem; gap: 0; counter-reset: obj; }
[data-lx="objectives"] li { padding: .7rem 0 .7rem 2.75rem; border-top: 1px solid var(--hairline); counter-increment: obj; }
[data-lx="objectives"] li::before {
  content: counter(obj, decimal-leading-zero);
  top: .85rem; left: 0;
  width: auto; height: auto;
  border-radius: var(--r-sm);
  background: none;
  font: 700 .74rem/1.4 var(--lx-font-mono);
  color: var(--ink);
}
[data-lx="objectives"] li::after { content: none; }

/* Tables: ruled, not boxed. */
.lx-table { border: 0; border-radius: var(--r-sm); }
.lx-table caption, html[data-layout="slides"] .lx caption { padding: 0 0 .6rem; font: 700 .72rem/1.3 var(--lx-font-ui); font-variation-settings: var(--wd-cond); letter-spacing: .12em; text-transform: uppercase; }
html[data-layout="slides"] .lx table { font: 400 1.0625rem/1.5 var(--lx-font-ui); border-top: 2px solid var(--ink); }
html[data-layout="slides"] .lx thead th { background: none; border-bottom: 1px solid var(--ink); font: 700 .72rem/1.4 var(--lx-font-ui); font-variation-settings: var(--wd-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); padding: .65rem .9rem .55rem 0; }
html[data-layout="slides"] .lx tbody tr:nth-child(even) { background: none; }
html[data-layout="slides"] .lx :is(th, td) { padding: .65rem .9rem .65rem 0; border-bottom: 1px solid var(--hairline); }
html[data-layout="slides"] .lx tbody tr:last-child > * { border-bottom: 1px solid var(--ink); }
.lx-table tbody tr:last-child > * { border-bottom: 1px solid var(--ink); }

/* Steps (the lessons list on the overview). */
ol[data-lx="steps"] { gap: 0; border-top: 2px solid var(--ink); }
ol[data-lx="steps"] > li { padding: .9rem 0 .9rem 3rem; min-height: 0; border-bottom: 1px solid var(--hairline); }
ol[data-lx="steps"] > li::before {
  content: counter(lx-step, decimal-leading-zero);
  top: 1.05rem; left: 0;
  width: auto; height: auto;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink);
  font: 700 .78rem/1.4 var(--lx-font-mono);
}
ol[data-lx="steps"] > li:not(:last-child)::after { content: none; }
ol[data-lx="steps"] > li > strong:first-child { font: 700 1.1rem/1.35 var(--lx-font-ui); }

/* Reveal and the glossary popover */
[data-lx="reveal"] { padding: 0; background: none; border-radius: var(--r-sm); }
.lx-reveal__panel { margin-top: 1rem; padding: .85rem 0 0; background: none; border: 0; border-top: 1px solid var(--hairline); border-radius: var(--r-sm); animation: none; }
.lx-term__btn { text-decoration: underline dotted var(--signal) 1px; }
.lx-term__btn:hover, .lx-term__btn[aria-expanded="true"] { color: var(--ink-2); }
.lx-term__pop { border-radius: var(--r-sm); background: var(--ink); color: var(--stock); box-shadow: none; animation: none; border: 1px solid var(--stock); }
.lx-term__pop strong { color: var(--stock); }

/* Panels (quiz and friends) carry no card chrome. */
.lx-panel { padding: 0; background: none; border: 0; border-radius: var(--r-sm); box-shadow: none; }
.lx-panel > .lx-eyebrow { padding-bottom: .5rem; border-bottom: 1px solid var(--hairline); }
.lx-flow > .lx-eyebrow + * { margin-top: .9rem; }


/* 7. Controls ============================================================== */

/* Buttons: indigo fill with stock text for the primary, a hairline outline for the secondary.
   Disabled is a dashed rule, never faded. Hover and active on the primary take the signal. */
.lx-btn {
  min-height: 2.5rem;
  padding: .55rem 1.1rem;
  border: 1px solid var(--indigo);
  border-radius: var(--r-sm);
  background: var(--indigo);
  color: var(--stock);
  font: 700 .78rem/1.2 var(--lx-font-ui);
  font-variation-settings: var(--wd-cond);
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: none;
}
.lx-btn:not(:disabled, [aria-disabled="true"]):hover { background: var(--signal); border-color: var(--signal); color: #fff; }
.lx-btn:not(:disabled, [aria-disabled="true"]):active { transform: none; background: var(--signal); border-color: var(--signal); }
.lx-btn--secondary { background: transparent; color: var(--ink); }
.lx-btn--secondary:not(:disabled, [aria-disabled="true"]):hover { background: var(--indigo-tint); border-color: var(--indigo); color: var(--indigo); }
.lx-btn--ghost { border-color: transparent; background: transparent; color: var(--ink); text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: .2em; }
.lx-btn--ghost:not(:disabled, [aria-disabled="true"]):hover { background: transparent; border-color: transparent; color: var(--ink-2); text-decoration-thickness: 2px; }
.lx-btn--sm { min-height: 2.1rem; padding: .35rem .8rem; font-size: .7rem; }
.lx-btn:disabled, .lx-btn[aria-disabled="true"] {
  opacity: 1;
  background: transparent;
  border: 1px dashed var(--rule);
  color: var(--muted);
  cursor: not-allowed;
}
.lx-btn .lx-icon { width: 1em; height: 1em; stroke-width: 2.5; }

/* Focus as a bracket on the controls that can take it. */
:is(.lx-btn, .lx-match__item, .lx-tabs__tab, .lx-scenario__choice, .lx-choice, .lx-rating__opt, .lx-checklist__label) { position: relative; }
html[data-layout="slides"] :is(.lx-btn, .lx-match__item, .lx-tabs__tab, .lx-scenario__choice):focus-visible,
html[data-layout="slides"] :is(.lx-choice, .lx-rating__opt, .lx-checklist__label):has(:focus-visible),
.lx-deck .lx-btn:focus-visible { outline: none; }
:is(.lx-btn, .lx-match__item, .lx-tabs__tab, .lx-scenario__choice):focus-visible::before,
:is(.lx-btn, .lx-match__item, .lx-tabs__tab, .lx-scenario__choice):focus-visible::after,
:is(.lx-choice, .lx-rating__opt, .lx-checklist__label):has(:focus-visible)::before,
:is(.lx-choice, .lx-rating__opt, .lx-checklist__label):has(:focus-visible)::after {
  content: "";
  position: absolute;
  top: -5px; bottom: -5px;
  width: 8px;
  border: 2px solid var(--signal);
  pointer-events: none;
}
:is(.lx-btn, .lx-match__item, .lx-tabs__tab, .lx-scenario__choice):focus-visible::before,
:is(.lx-choice, .lx-rating__opt, .lx-checklist__label):has(:focus-visible)::before { left: -6px; border-right: 0; }
:is(.lx-btn, .lx-match__item, .lx-tabs__tab, .lx-scenario__choice):focus-visible::after,
:is(.lx-choice, .lx-rating__opt, .lx-checklist__label):has(:focus-visible)::after { right: -6px; border-left: 0; }

/* Feedback: a labeled block. The title in condensed caps; the rule above carries the state:
   solid signal for correct, solid ink for not quite, dashed for an answer shown rather than earned. */
.lx-feedback {
  margin-top: 1.25rem;
  padding: .75rem 0 0;
  border: 0;
  border-top: 2px solid var(--ink);
  border-radius: var(--r-sm);
  background: none;
  font: 400 .95rem/1.55 var(--lx-font-ui);
  animation: none;
}
.lx-feedback__title { gap: .4rem; font: 700 .72rem/1.3 var(--lx-font-ui); letter-spacing: .12em; color: var(--ink); }
.lx-feedback__title .lx-icon { width: 1em; height: 1em; stroke-width: 3; }
.lx-feedback--correct { background: none; border-color: var(--signal); }
.lx-feedback--correct .lx-feedback__title { color: var(--signal); }
.lx-feedback--incorrect { background: none; border-color: var(--ink); }
.lx-feedback--incorrect .lx-feedback__title { color: var(--ink); }
.lx-feedback--neutral { background: none; border-top: 2px dashed var(--rule); }
.lx-feedback--neutral .lx-feedback__title { color: var(--ink); }
.is-correct > .lx-mark, .is-answer > .lx-mark { background: var(--signal); }
.is-incorrect > .lx-mark { background: var(--ink); }

/* Knowledge check: the stem is what was seen (a solid rule); the notes under the choices are the
   read of it (a hairline). Choices are ruled rows with square controls. */
.lx-quiz__stem { padding-left: 1rem; border-left: 2px solid var(--ink); font-size: 1.1rem; font-weight: 500; line-height: 1.5; }
.lx-quiz__hint { margin-top: .5rem; font: 500 .8rem/1.4 var(--lx-font-ui); font-variation-settings: var(--wd-cond); letter-spacing: .02em; font-style: normal; color: var(--muted); }
.lx-quiz__choices { gap: 0; margin-top: 1.1rem; border-bottom: 1px solid var(--hairline); }
.lx-choice {
  gap: .85rem;
  padding: .8rem .25rem .8rem 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  font: 400 1rem/1.5 var(--lx-font-ui);
  transition: none;
}
.lx-choice:hover { border-top-color: var(--ink); background: none; }
.lx-choice:has(:checked) { border-top-color: var(--ink); background: none; box-shadow: inset 0 1px 0 var(--ink); }
.lx-choice:has(:focus-visible) { outline: none; }
.lx-choice:has(:disabled):hover { border-top-color: var(--hairline); background: none; }
.lx-choice:has(:disabled):not(.is-correct, .is-incorrect, .is-answer) { border-top-style: dashed; border-top-color: var(--rule); color: var(--muted); }
.lx-choice__control { width: 1.05rem; height: 1.05rem; margin-top: .22rem; border: 1px solid var(--ink); border-radius: 50%; transition: none; }
.lx-choice__input[type="checkbox"] + .lx-choice__control { border-radius: 4px; }
.lx-choice__input:checked + .lx-choice__control { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 2px var(--stock); }
.lx-choice__input[type="checkbox"]:checked + .lx-choice__control { box-shadow: none; }
.lx-choice__input[type="checkbox"]:checked + .lx-choice__control::after { inset: 1px; background: var(--stock); }
.lx-choice.is-correct, .lx-choice.is-correct:hover { border-top-color: var(--signal); background: none; box-shadow: inset 0 1px 0 var(--signal); }
.lx-choice.is-correct .lx-choice__control { border-color: var(--signal); background: var(--signal); box-shadow: inset 0 0 0 2px var(--stock); }
.lx-choice.is-correct .lx-choice__input[type="checkbox"] + .lx-choice__control { box-shadow: none; }
.lx-choice.is-incorrect, .lx-choice.is-incorrect:hover { border-top-color: var(--ink); background: none; box-shadow: inset 0 1px 0 var(--ink); }
.lx-choice.is-answer, .lx-choice.is-answer:hover { border-top: 1px dashed var(--signal); background: none; }
.lx-choice.is-answer .lx-choice__control { border: 1px dashed var(--signal); }
.lx-choice__note { margin: .1rem 0 .9rem 1.9rem; padding-left: .9rem; border-left: 1px solid var(--hairline); font: 400 .95rem/1.55 var(--lx-font-ui); color: var(--ink); }
.lx-actions { gap: .6rem; margin-top: 1.25rem; }

/* Matching: ruled rows, the pair number in the mono, no pair colors. */
.lx-match { gap: 0 1.5rem; }
.lx-match__col { gap: 0; border-bottom: 1px solid var(--hairline); }
.lx-match__item {
  min-height: 3rem;
  padding: .7rem .2rem .7rem 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  font: 400 .95rem/1.45 var(--lx-font-ui);
  transition: none;
}
.lx-match__col--left .lx-match__item { font-weight: 600; }
.lx-match__item:hover { border-top-color: var(--ink); }
.lx-match__item[aria-pressed="true"] { border-top-color: var(--signal); background: none; box-shadow: inset 0 1px 0 var(--signal); }
.lx-match__badge { width: 1.5rem; height: 1.5rem; border: 1px dashed var(--rule); border-radius: var(--r-sm); font: 700 .68rem/1 var(--lx-font-mono); color: var(--ink); }
.lx-match__item[data-pair] { --_pair: var(--ink); border-top-color: var(--ink); background: none; box-shadow: inset 0 1px 0 var(--ink); }
.lx-match__item[data-pair] .lx-match__badge { border: 0; background: var(--ink); color: var(--stock); }
.lx-match__item[data-color="1"], .lx-match__item[data-color="2"], .lx-match__item[data-color="3"], .lx-match__item[data-color="4"],
.lx-match__item[data-color="5"], .lx-match__item[data-color="6"], .lx-match__item[data-color="7"], .lx-match__item[data-color="8"] { --_pair: var(--ink); }
.lx-match__item.is-correct { border-top-color: var(--signal); background: none; box-shadow: inset 0 1px 0 var(--signal); }
.lx-match__item.is-correct .lx-match__badge { background: var(--signal); color: #fff; }
.lx-match__item.is-incorrect { border-top: 1px dashed var(--rule); background: none; box-shadow: none; }
.lx-match__item.is-incorrect .lx-match__badge { background: none; border: 1px dashed var(--rule); color: var(--ink); }
@container lx (max-width: 30rem) {
  .lx-match__badge { top: .5rem; right: 0; width: 1.3rem; height: 1.3rem; }
  .lx-compare__tag { top: -1.7rem; padding: .2rem .45rem; font-size: .6rem; }
  .lx-slide > [data-lx="compare"]::before { margin-bottom: 2.2rem; }
}

/* Checklist: a ruled list, a checked line is struck. */
[data-lx="checklist"] { padding: .7rem 0 0; background: none; border: 0; border-top: 2px solid var(--ink); border-radius: var(--r-sm); box-shadow: none; }
[data-lx="checklist"] > :is(h2, h3, h4) { font: 700 .72rem/1.3 var(--lx-font-ui); letter-spacing: .12em; color: var(--ink); }
.lx-checklist__list { gap: 0; margin-top: .9rem; border-bottom: 1px solid var(--hairline); }
.lx-checklist__label { gap: .85rem; padding: .7rem .25rem .7rem 0; border-top: 1px solid var(--hairline); border-radius: var(--r-sm); font: 400 1rem/1.5 var(--lx-font-ui); }
.lx-checklist__label:hover { background: none; border-top-color: var(--ink); }
.lx-checklist__label:has(:focus-visible) { outline: none; }
.lx-checklist__box { width: 1.05rem; height: 1.05rem; margin-top: .22rem; border: 1px solid var(--ink); border-radius: var(--r-sm); transition: none; }
.lx-checklist__box .lx-icon { width: .8rem; height: .8rem; }
.lx-checklist__input:checked + .lx-checklist__box { background: var(--ink); border-color: var(--ink); color: var(--stock); }
.lx-checklist__item.is-checked .lx-checklist__text { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--ink); }
.lx-checklist__foot { margin-top: .9rem; }
.lx-checklist__bar { height: 2px; border-radius: var(--r-sm); background: var(--hairline); }
.lx-checklist__bar > span { background: var(--signal); border-radius: var(--r-sm); transition: none; }
.lx-checklist__progress { font: 400 .72rem/1 var(--lx-font-mono); color: var(--ink); }

/* Self-rating: five square cells. */
[data-lx="rating"] { padding: .7rem 0 0; background: none; border-top: 2px solid var(--ink); border-radius: var(--r-sm); }
.lx-rating__prompt { font-size: 1.05rem; }
.lx-rating__scale { gap: 0; margin-top: 1.1rem; border-left: 1px solid var(--ink); }
.lx-rating__opt { min-height: 2.75rem; background: none; border: 1px solid var(--ink); border-left: 0; border-radius: var(--r-sm); font: 500 .95rem/1 var(--lx-font-mono); transition: none; }
.lx-rating__opt:hover { background: var(--stock-2); border-color: var(--ink); }
.lx-rating__opt:has(:checked) { background: var(--signal); border-color: var(--signal); color: #fff; }
.lx-rating__opt:has(:focus-visible) { outline: none; z-index: 1; }
.lx-rating__ends { font: 400 .72rem/1.4 var(--lx-font-mono); }
.lx-rating__feedback { margin-top: 1.1rem; padding: .75rem 0 0; background: none; border: 0; border-top: 1px solid var(--hairline); border-radius: var(--r-sm); font: 400 .95rem/1.55 var(--lx-font-ui); animation: none; }

/* Reflection: a ruled field, the model answer as a labeled block. */
[data-lx="reflection"] { padding: .7rem 0 0; background: none; border-top: 2px solid var(--ink); border-radius: var(--r-sm); }
.lx-reflection__prompt { font-size: 1.02rem; }
.lx-reflection__input { margin-top: 1rem; padding: .85rem 1rem; background: var(--stock); border: 1px solid var(--ink); border-radius: var(--r-sm); font: 400 1rem/1.6 var(--lx-font-ui); transition: none; }
.lx-reflection__input::placeholder { color: var(--muted); }
.lx-reflection__input:focus { border-color: var(--signal); }
.lx-reflection__status { font: 500 .78rem/1.4 var(--lx-font-ui); font-variation-settings: var(--wd-cond); letter-spacing: .02em; color: var(--muted); }
.lx-reflection__model { margin-top: 1.1rem; padding: .75rem 0 0; background: none; border: 0; border-top: 1px solid var(--hairline); border-radius: var(--r-sm); animation: none; }

/* Scenario: an exchange set as a ruled transcript. The expert's lines in outlined blocks, yours in
   ink, the coach as a labeled note, the ending under a rule that carries the outcome. */
[data-lx="scenario"] { padding: 0; background: none; border-radius: var(--r-sm); }
.lx-scenario__intro { padding: 0; text-align: left; }
.lx-scenario__intro .lx-actions { justify-content: flex-start; }
.lx-scenario__log { gap: 1.1rem; }
.lx-scenario__msg { animation: none; }
.lx-scenario__avatar { width: 2.5rem; height: 2.5rem; border-radius: var(--r-sm); background: var(--ink); color: var(--stock); font: 700 .78rem/1 var(--lx-font-mono); }
.lx-scenario__bubble { padding: .9rem 1.15rem; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r); box-shadow: var(--shadow-soft); }
.lx-scenario__msg--you .lx-scenario__bubble { background: var(--cover-bg); background-color: var(--indigo); color: var(--stock); border-color: transparent; border-radius: var(--r); }
.lx-scenario__msg--you .lx-scenario__avatar { background: var(--stock); color: var(--ink); border: 1px solid var(--ink); }
.lx-scenario__speaker { font: 700 .66rem/1.3 var(--lx-font-ui) !important; letter-spacing: .1em; color: var(--muted); }
.lx-scenario__msg--you .lx-scenario__speaker { color: var(--slate-muted); opacity: 1; }
.lx-scenario__narration { max-width: var(--lx-prose); margin-inline: 0; text-align: left; font-style: normal; color: var(--ink); animation: none; }
.lx-scenario__coach { padding: .7rem 0 0; background: none; border: 0; border-top: 1px solid var(--hairline); border-radius: var(--r-sm); font: 400 .95rem/1.55 var(--lx-font-ui); animation: none; }
.lx-scenario__coach .lx-eyebrow { color: var(--ink); }
.lx-scenario__choices { justify-items: stretch; gap: 0; margin-left: auto; max-width: min(100%, 36rem); animation: none; border-bottom: 1px solid var(--ink); }
.lx-scenario__choices .lx-eyebrow { color: var(--ink); padding-bottom: .4rem; }
.lx-scenario__choice {
  padding: .8rem .25rem .8rem 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--ink);
  border-radius: var(--r-sm);
  font: 500 .95rem/1.45 var(--lx-font-ui);
  color: var(--ink);
  transition: none;
}
.lx-scenario__choice:hover { background: var(--indigo-tint); color: var(--indigo); padding-inline: .6rem; border-radius: var(--r-sm); }
.lx-scenario__end { padding: .9rem 0 0; background: none; border: 0; border-top: 3px solid var(--ink); border-radius: var(--r-sm); box-shadow: none; animation: none; }
.lx-scenario__end .lx-eyebrow { color: var(--ink); }
.lx-scenario__end--success { border-top-color: var(--signal); }
.lx-scenario__end--success .lx-eyebrow { color: var(--signal); }
.lx-scenario__end--fail { border-top-style: dashed; }
.lx-scenario__end--fail .lx-eyebrow { color: var(--ink); }

/* Tabs: condensed caps on a hairline, the active tab under a signal rule. */
.lx-tabs__bar { border-bottom: 1px solid var(--hairline); }
.lx-tabs__tab { margin-bottom: -1px; padding: .7rem .9rem .7rem 0; margin-right: .9rem; border-bottom: 2px solid transparent; border-radius: var(--r-sm); font: 700 .76rem/1.3 var(--lx-font-ui); color: var(--muted); transition: none; }
.lx-tabs__tab:hover { color: var(--ink-2); background: none; }
.lx-tabs__tab[aria-selected="true"] { color: var(--ink-2); border-bottom-color: var(--signal); }
.lx-tabs__tab:focus-visible { outline: none; }
.lx-tabs__panel { padding-top: 1.25rem; animation: none; }

/* Hotspots: numbered keys on the plate; the popover reads as the key legend. */
.lx-hotspots__marker {
  width: 1.6rem; height: 1.6rem;
  border: 1px solid var(--indigo);
  border-radius: var(--r-sm);
  background: var(--indigo);
  color: var(--stock);
  box-shadow: none;
  font: 700 .72rem/1 var(--lx-font-mono);
  transition: none;
}
.lx-hotspots__marker::after { content: none; }
.lx-hotspots__marker:hover { transform: none; background: var(--signal); border-color: var(--signal); color: #fff; }
.lx-hotspots__marker.is-visited { background: var(--stock); color: var(--ink); }
.lx-hotspots__marker[aria-expanded="true"] { background: var(--signal); border-color: var(--signal); color: #fff; transform: none; }
.lx-hotspots__marker .lx-icon { stroke-width: 2.5; }
/* The legend docks under the plate at every width (lx.js places it only while it is absolute),
   so the email stays fully readable while a key is open. */
.lx-hotspots__pop {
  position: relative;
  width: auto;
  margin-top: .75rem;
  padding: 1rem 1.1rem .8rem;
  background: var(--stock);
  border: 1px solid var(--ink);
  border-top: 2px solid var(--ink);
  border-radius: var(--r-sm);
  box-shadow: none;
  animation: none;
}
.lx-hotspots__panel { font: 400 .95rem/1.55 var(--lx-font-ui); }
.lx-hotspots__panel > :is(h2, h3, h4, h5, h6):first-child { padding-left: .8rem; border-left: 2px solid var(--ink); font-size: 1.02rem; line-height: 1.35; }
.lx-hotspots__panel > :is(h2, h3, h4, h5, h6):first-child + * { margin-top: .7rem; padding-left: .8rem; border-left: 1px solid var(--hairline); }
.lx-hotspots__close { width: 1.75rem; height: 1.75rem; top: .55rem; right: .55rem; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--stock); }
.lx-hotspots__close:hover { background: var(--ink); color: var(--stock); border-color: var(--ink); }
.lx-hotspots__foot { margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--hairline); }
.lx-hotspots__count { font: 400 .7rem/1 var(--lx-font-mono); color: var(--ink); }
@container lx-hotspots (max-width: 34rem) {
  .lx-hotspots__pop { margin-top: .75rem; box-shadow: none; border: 1px solid var(--ink); border-top: 2px solid var(--ink); }
  .lx-hotspots__marker { width: 1.45rem; height: 1.45rem; font-size: .66rem; border-width: 1px; }
}

/* Compare: an ink handle, square tags. */
.lx-compare__stage { border-radius: var(--r-sm); box-shadow: none; overflow: visible; }
.lx-slide > [data-lx="compare"]::before { margin-bottom: 2.5rem; }
.lx-compare__tag { top: -1.9rem; }
.lx-compare__tag--before { left: 0; }
.lx-compare__tag--after { right: 0; }
.lx-compare__handle { width: 2px; margin-left: -1px; background: var(--ink); box-shadow: none; }
.lx-compare__knob { width: 2.25rem; height: 2.25rem; border-radius: var(--r-sm); background: var(--ink); color: var(--stock); box-shadow: none; }
.lx-compare__tag { padding: .3rem .55rem; border-radius: var(--r-sm); background: var(--ink); color: var(--stock); font: 700 .66rem/1.2 var(--lx-font-ui); letter-spacing: .1em; }
.lx-compare__stage:has(.lx-compare__range:focus-visible) .lx-compare__knob { outline: 2px solid var(--signal); outline-offset: 3px; }

/* Gates: a continue button is dashed while it waits and fills solid when the activity completes. */
[data-lx="continue"] { align-items: flex-start; gap: .5rem; }
.lx-continue__btn { min-width: 10rem; font-size: .78rem; letter-spacing: .1em; }
.lx-continue__hint { font: 500 .78rem/1.4 var(--lx-font-ui); font-variation-settings: var(--wd-cond); letter-spacing: .02em; color: var(--muted); text-align: left; }


/* Content pages sit at the left edge under the running header instead of floating in a centered
   box, so a wide monitor does not leave a wide empty margin. Covers keep their own width. */
html[data-layout="slides"] .lx > .lx-slide { max-width: var(--page-stage); margin-inline: 0 auto; }
html[data-layout="slides"] .lx > .lx-slide:has(> [data-lx="lesson-header"]) { max-width: none; margin-inline: calc(var(--lx-gutter) * -1); }

/* Page furniture. Short static slides center on the page; slides with an activity keep the title
   fixed at the top so the page does not shift as the activity grows. At wide widths the split and
   lead compositions carry a hairline column rule between the title column and the body column,
   running the page height, and a lead figure's plate takes the column's height. */
html[data-layout="slides"] .lx > .lx-slide:not(:has([data-lx="quiz"], [data-lx="matching"], [data-lx="scenario"], [data-lx="reflection"], [data-lx="checklist"], [data-lx="rating"], [data-lx="tabs"], [data-lx="reveal"], [data-lx="hotspots"], [data-lx="compare"], [data-lx="continue"], [data-lx="lesson-header"])) { justify-content: center; }
@container lx (min-width: 60rem) {
  .lx-slide:has(> h2:first-child):not(:has(> :not(h2, p, ul, ol, dl, blockquote, [data-lx="reveal"], [data-lx="callout"], [data-lx="statement"], ol[data-lx="steps"], [data-lx="lesson-nav"]))) { position: relative; align-content: start; padding-top: clamp(1rem, 3.5vh, 2.5rem); grid-template-columns: minmax(0, 4fr) minmax(0, 9fr); }
  .lx-slide:has(> h2:first-child):not(:has(> :not(h2, p, ul, ol, dl, blockquote, [data-lx="reveal"], [data-lx="callout"], [data-lx="statement"], ol[data-lx="steps"], [data-lx="lesson-nav"])))::after {
    content: "";
    position: absolute;
    top: var(--lx-slide-pad-y); bottom: 1.25rem;
    left: calc(var(--lx-slide-pad-x) + (100% - 2 * var(--lx-slide-pad-x) - var(--col-gap)) * 4 / 13 + var(--col-gap) / 2);
    width: 1px;
    background: var(--hairline);
  }
  .lx-slide:has(> h2:first-child):has(> h2 ~ p):has(> :is([data-lx="hotspots"], [data-lx="compare"], [data-lx="image"]):last-child):not(:has(> :not(h2, p, ul, ol, [data-lx="hotspots"], [data-lx="compare"], [data-lx="image"]))) { position: relative; grid-template-rows: repeat(39, auto) minmax(0, 1fr); }
  .lx-slide:has(> h2:first-child):has(> h2 ~ p):has(> :is([data-lx="hotspots"], [data-lx="compare"], [data-lx="image"]):last-child):not(:has(> :not(h2, p, ul, ol, [data-lx="hotspots"], [data-lx="compare"], [data-lx="image"])))::after {
    content: "";
    position: absolute;
    top: var(--lx-slide-pad-y); bottom: 1.25rem;
    left: calc(var(--lx-slide-pad-x) + (100% - 2 * var(--lx-slide-pad-x) - var(--col-gap)) * 6 / 13 + var(--col-gap) / 2);
    width: 1px;
    background: var(--hairline);
  }
  .lx-slide:has(> h2:first-child):has(> h2 ~ p):has(> :is([data-lx="hotspots"], [data-lx="compare"], [data-lx="image"]):last-child):not(:has(> :not(h2, p, ul, ol, [data-lx="hotspots"], [data-lx="compare"], [data-lx="image"]))) > [data-lx] { display: flex; flex-direction: column; min-height: 100%; }
  .lx-slide > :is([data-lx="hotspots"], [data-lx="compare"], [data-lx="image"]) > :is(.lx-hotspots__stage, .lx-compare__stage, img) { margin-block: auto; }
  .lx-slide > :is([data-lx="hotspots"], [data-lx="compare"], [data-lx="image"]) > figcaption { margin-top: .75rem; }
}


/* 8. Motion: the page turn, and nothing else ================================ */

html[data-layout="slides"] :is(.lx, .lx-block, .lx-deck, .lx-topbar) *,
html[data-layout="slides"] :is(.lx, .lx-block, .lx-deck, .lx-topbar) *::before,
html[data-layout="slides"] :is(.lx, .lx-block, .lx-deck, .lx-topbar) *::after { transition: none; }
.lx-card:hover { transform: none; }
.lx-timeline--animate .lx-timeline__item { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: no-preference) {
  /* The turn: the page you leave slides and fades out along one axis, the next slides in.
     lx.js runs show() inside a view transition when the theme sets --lx-page-turn. */
  html[data-lx-turn] main.lx { view-transition-name: lx-page; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
  ::view-transition-group(lx-page) { animation-duration: 300ms; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  ::view-transition-old(lx-page) { animation: hs-page-leave 240ms cubic-bezier(.16, 1, .3, 1) both; }
  ::view-transition-new(lx-page) { animation: hs-page-arrive 300ms cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes hs-page-leave { to { opacity: 0; transform: translateX(-28px); } }
  @keyframes hs-page-arrive { from { opacity: 0; transform: translateX(28px); } }
  /* Without view transitions, the arriving page alone slides in. */
  html:not([data-lx-turn]) .lx-slide.is-entering { animation: hs-page-arrive 300ms cubic-bezier(.16, 1, .3, 1) both; }
  html[data-lx-turn] .lx-slide.is-entering { animation: none; }
  /* The arriving page's numbers register in sequence: section number, figure labels,
     objective numbers, the keys on a plate. */
  @keyframes hs-register { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
  @keyframes hs-key { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
  .lx-slide.is-entering > h2::before,
  .lx-slide.is-entering > :is([data-lx="hotspots"], [data-lx="compare"], [data-lx="image"], [data-lx="media-text"])::before,
  .lx-slide.is-entering [data-lx="objectives"] li::before,
  .lx-slide.is-entering ol[data-lx="steps"] > li::before { animation: hs-register 260ms cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(120ms + var(--k, 0) * 70ms); }
  .lx-slide.is-entering .lx-hotspots__marker { animation: hs-key 240ms cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(180ms + var(--k, 0) * 70ms); }
  .lx-slide.is-entering :is([data-lx="objectives"] li, ol[data-lx="steps"] > li, .lx-hotspots__marker):nth-child(2) { --k: 1; }
  .lx-slide.is-entering :is([data-lx="objectives"] li, ol[data-lx="steps"] > li, .lx-hotspots__marker):nth-child(3) { --k: 2; }
  .lx-slide.is-entering :is([data-lx="objectives"] li, ol[data-lx="steps"] > li, .lx-hotspots__marker):nth-child(4) { --k: 3; }
  .lx-slide.is-entering :is([data-lx="objectives"] li, ol[data-lx="steps"] > li, .lx-hotspots__marker):nth-child(5) { --k: 4; }
  .lx-slide.is-entering :is([data-lx="objectives"] li, ol[data-lx="steps"] > li, .lx-hotspots__marker):nth-child(6) { --k: 5; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-slide.is-entering, .lx-slide.is-entering *, .lx-slide.is-entering *::before { animation: none !important; }
  ::view-transition-old(lx-page), ::view-transition-new(lx-page), ::view-transition-group(lx-page) { animation: none !important; }
}


/* 9. Responsive ============================================================ */

@media (min-width: 48rem) {
  html[data-layout="slides"] { --lx-gutter: 1.5rem; }
}
@media (max-width: 40rem) {
  html[data-layout="slides"] .lx-topbar { gap: .9rem; padding: .6rem var(--lx-gutter); }
  html[data-layout="slides"] .lx-topbar__title { font-size: .66rem; letter-spacing: .08em; line-height: 1.3; }
  html[data-layout="slides"] .lx-topbar [data-lx="progress"] { flex: 0 0 5rem; }
  html[data-layout="slides"] .lx-topbar .lx-progress__bar { min-width: 0; }
  .lx-slide > [data-lx="lesson-header"] { padding-block: 1.25rem 4.5rem; }
  .lx-slide > [data-lx="lesson-header"]::before { margin-bottom: 1.25rem; font-size: 3.25rem; }
  .lx-slide > [data-lx="lesson-header"] h1 { max-width: none; font-size: clamp(2.1rem, 9.5vw, 2.6rem); }
  .lx-slide > .lx-lesson-header--media h1 { font-size: clamp(2rem, 9vw, 2.4rem); }
  .lx-slide > [data-lx="lesson-header"] .lx-eyebrow { font-size: .62rem; letter-spacing: .04em; bottom: 1rem; }
  .lx-slide > .lx-lesson-header--media > .lx-lesson-header__media { margin-top: 1.5rem; }
  .lx-slide > h2 { font-size: 1.7rem; }
  .lx-deck { min-height: 3.5rem; column-gap: .6rem; }
  .lx-deck .lx-btn { min-width: 0; padding-inline: .8rem; }
  .lx-deck__count { font-size: .7rem; }
  .lx-deck__hint { font-size: .7rem; }
  .lx-slide > [data-lx="statement"]:only-child { font-size: 1.85rem; }
  .lx-quiz__stem { font-size: 1.02rem; }
  .lx-match__item { padding-right: 1.4rem; }
}
@media (min-width: 90rem) {
  html[data-layout="slides"] { --lx-stage: 76rem; }
}