/**
 * Accessible course page stylesheet — Shellhex training materials
 *
 * Standalone visual system scoped entirely to body.accessible-course so the
 * main site’s dark terminal aesthetic is not affected.
 *
 * Design goals: large type, strong contrast, clear structure, no decorative
 * effects, monochrome-friendly callout differentiation.
 */

/* ==========================================================================
   Design tokens (scoped)
   ========================================================================== */

body.accessible-course {
  /* Colour */
  --course-bg: #faf9f7;
  --course-bg-alt: #ffffff;
  --course-text: #1a1a1a;
  --course-text-muted: #3d3d3d;
  --course-border: #0d7a45;
  --course-accent: #1a9b58;
  --course-border-subtle: #c8c6c3;
  --course-surface: #ffffff;

  /* Typography — 1rem = 16px browser default; body targets 24px minimum */
  --course-font: Arial, "Liberation Sans", "Nimbus Sans", Helvetica, sans-serif;
  --course-text-size: 1.5rem;
  --course-line-height: 1.6;
  --course-measure: 65ch;

  /* Spacing scale */
  --course-space-xs: 0.5rem;
  --course-space-sm: 0.75rem;
  --course-space-md: 1rem;
  --course-space-lg: 1.5rem;
  --course-space-xl: 2rem;
  --course-space-2xl: 3rem;

  /* Layout */
  --course-sidebar-width: 18rem;
  --course-layout-gap: var(--course-space-xl);
  --course-breakpoint-wide: 56rem;

  /* Focus */
  --course-focus-width: 0.1875rem;
  --course-focus-offset: 0.1875rem;

  /* Borders */
  --course-border-width: 0.125rem;
  --course-border-width-thick: 0.25rem;
  --course-radius: 0.25rem;

  /* Base page */
  margin: 0;
  padding: 0;
  background-color: var(--course-bg);
  color: var(--course-text);
  font-family: var(--course-font);
  font-size: var(--course-text-size);
  line-height: var(--course-line-height);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Text size modifiers */
body.accessible-course.accessible-course--text-lg {
  --course-text-size: 1.75rem;
}

body.accessible-course.accessible-course--text-xl {
  --course-text-size: 2rem;
}

/* High-contrast modifier — pure black on white, thicker borders */
body.accessible-course.accessible-course--contrast {
  --course-bg: #ffffff;
  --course-bg-alt: #ffffff;
  --course-text: #000000;
  --course-text-muted: #000000;
  --course-border: #000000;
  --course-accent: #000000;
  --course-border-subtle: #000000;
  --course-surface: #ffffff;
  --course-border-width: 0.1875rem;
  --course-border-width-thick: 0.3125rem;
  --course-focus-width: 0.25rem;
}

/* ==========================================================================
   Scoped reset & global elements within the course page
   ========================================================================== */

body.accessible-course *,
body.accessible-course *::before,
body.accessible-course *::after {
  box-sizing: border-box;
}

body.accessible-course img,
body.accessible-course svg,
body.accessible-course video {
  max-width: 100%;
  height: auto;
}

body.accessible-course a {
  color: var(--course-border);
  text-decoration-thickness: 0.125rem;
  text-underline-offset: 0.2em;
}

body.accessible-course a:hover {
  color: var(--course-accent);
}

body.accessible-course a:visited {
  color: var(--course-border);
}

body.accessible-course :focus {
  outline: var(--course-focus-width) solid var(--course-accent);
  outline-offset: var(--course-focus-offset);
}

body.accessible-course :focus:not(:focus-visible) {
  outline: none;
}

body.accessible-course :focus-visible {
  outline: var(--course-focus-width) solid var(--course-accent);
  outline-offset: var(--course-focus-offset);
}

body.accessible-course h1,
body.accessible-course h2,
body.accessible-course h3,
body.accessible-course h4,
body.accessible-course h5,
body.accessible-course h6 {
  color: var(--course-text);
  font-family: var(--course-font);
  font-weight: 700;
  line-height: 1.25;
  margin-block: 0 var(--course-space-md);
  text-wrap: balance;
}

body.accessible-course p {
  margin-block: 0 var(--course-space-md);
}

body.accessible-course ul,
body.accessible-course ol {
  margin-block: 0 var(--course-space-lg);
  padding-inline-start: 1.5em;
}

body.accessible-course li {
  margin-block: var(--course-space-sm);
}

body.accessible-course li > ul,
body.accessible-course li > ol {
  margin-block: var(--course-space-sm);
}

body.accessible-course blockquote {
  border-inline-start: var(--course-border-width-thick) solid var(--course-border-subtle);
  margin-block: var(--course-space-lg);
  margin-inline: 0;
  padding-inline-start: var(--course-space-lg);
}

body.accessible-course hr {
  border: 0;
  border-block-start: var(--course-border-width) solid var(--course-border-subtle);
  margin-block: var(--course-space-xl);
}

body.accessible-course table {
  border-collapse: collapse;
  width: 100%;
  margin-block: var(--course-space-lg);
  font-size: inherit;
}

body.accessible-course th,
body.accessible-course td {
  border: var(--course-border-width) solid var(--course-border-subtle);
  padding: var(--course-space-sm) var(--course-space-md);
  text-align: left;
  vertical-align: top;
}

body.accessible-course th {
  background-color: var(--course-bg);
  font-weight: 700;
}

body.accessible-course caption {
  caption-side: top;
  font-weight: 700;
  margin-block-end: var(--course-space-sm);
  text-align: left;
}

body.accessible-course figure {
  margin-block: var(--course-space-xl);
  margin-inline: 0;
}

body.accessible-course figcaption {
  font-size: 0.9em;
  margin-block-start: var(--course-space-sm);
}

body.accessible-course code,
body.accessible-course kbd {
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  font-size: 0.9em;
}

body.accessible-course button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* ==========================================================================
   1. Skip links
   ========================================================================== */

body.accessible-course .course-skip-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.accessible-course .course-skip-links a {
  background-color: var(--course-surface);
  border: var(--course-border-width) solid var(--course-border);
  color: var(--course-text);
  display: block;
  font-weight: 700;
  left: var(--course-space-md);
  padding: var(--course-space-sm) var(--course-space-md);
  position: absolute;
  text-decoration: none;
  top: -100vh;
  z-index: 1000;
}

body.accessible-course .course-skip-links a:focus,
body.accessible-course .course-skip-links a:focus-visible {
  top: var(--course-space-md);
}

/* ==========================================================================
   2. Utility header (site chrome within the course page)
   ========================================================================== */

body.accessible-course .course-utility-header {
  background-color: var(--course-bg-alt);
  border-block-end: var(--course-border-width) solid var(--course-border-subtle);
  font-size: 1rem;
  padding-block: var(--course-space-md);
  padding-inline: var(--course-space-lg);
}

body.accessible-course .course-utility-header__inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--course-space-md) var(--course-space-xl);
  justify-content: space-between;
  margin-inline: auto;
  max-width: calc(var(--course-measure) + var(--course-sidebar-width) + var(--course-layout-gap) * 2);
}

body.accessible-course .course-utility-header__brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

body.accessible-course .course-utility-header__logo {
  display: block;
  height: auto;
  max-height: 2.5rem;
  width: auto;
  max-width: 8rem;
}

body.accessible-course .course-utility-header nav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--course-space-sm) var(--course-space-lg);
}

body.accessible-course .course-utility-header a {
  font-weight: 600;
  text-decoration: none;
}

body.accessible-course .course-utility-header a:hover,
body.accessible-course .course-utility-header a:focus-visible {
  text-decoration: underline;
}

body.accessible-course .course-utility-header .course-utility-header__sep {
  color: var(--course-text-muted);
}

/* ==========================================================================
   Page wrapper
   ========================================================================== */

body.accessible-course .course-page {
  margin-inline: auto;
  max-width: calc(var(--course-measure) + var(--course-sidebar-width) + var(--course-layout-gap) * 2);
  padding-block: var(--course-space-xl);
  padding-inline: var(--course-space-lg);
}

/* ==========================================================================
   3. Course introduction
   ========================================================================== */

body.accessible-course .course-intro {
  margin-block-end: var(--course-space-2xl);
  max-width: var(--course-measure);
}

body.accessible-course .course-intro h1 {
  font-size: 2.25em;
  margin-block-end: var(--course-space-sm);
}

body.accessible-course .course-intro .course-intro__subtitle {
  color: var(--course-text-muted);
  font-size: 1.125em;
  font-weight: 400;
  line-height: var(--course-line-height);
  margin-block-end: var(--course-space-lg);
}

body.accessible-course .course-intro .course-intro__meta {
  border-inline-start: var(--course-border-width-thick) solid var(--course-border);
  font-size: 0.9375em;
  margin-block: var(--course-space-lg) 0;
  padding-inline-start: var(--course-space-md);
}

body.accessible-course .course-intro .course-intro__meta dl {
  margin: 0;
}

body.accessible-course .course-intro .course-intro__meta dt {
  display: inline;
  font-weight: 700;
}

body.accessible-course .course-intro .course-intro__meta dt::after {
  content: ": ";
}

body.accessible-course .course-intro .course-intro__meta dd {
  display: inline;
  margin: 0;
}

body.accessible-course .course-intro .course-intro__meta dd::after {
  content: "";
  display: block;
  margin-block-end: var(--course-space-xs);
}

body.accessible-course .course-intro .course-intro__updated {
  color: var(--course-text-muted);
  font-size: 0.875em;
  margin-block-start: var(--course-space-md);
}

/* ==========================================================================
   4. Downloads
   ========================================================================== */

body.accessible-course .course-downloads {
  background-color: var(--course-bg-alt);
  border: var(--course-border-width) solid var(--course-border);
  margin-block: var(--course-space-xl);
  max-width: var(--course-measure);
  padding: var(--course-space-lg);
}

body.accessible-course .course-downloads h2 {
  color: var(--course-border);
  font-size: 1.25em;
  margin-block-start: 0;
}

body.accessible-course .course-downloads ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.accessible-course .course-downloads li {
  margin-block: var(--course-space-md);
}

body.accessible-course .course-downloads a {
  align-items: baseline;
  display: inline-flex;
  flex-wrap: wrap;
  font-weight: 700;
  gap: var(--course-space-sm);
  text-decoration: underline;
}

body.accessible-course .course-downloads .course-download__type {
  background-color: var(--course-bg);
  border: var(--course-border-width) solid var(--course-border);
  color: var(--course-text);
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.15em 0.5em;
  text-transform: uppercase;
}

body.accessible-course .course-download--unavailable {
  color: var(--course-text-muted);
  font-style: italic;
  margin-block: var(--course-space-md) 0;
}

body.accessible-course.accessible-course--contrast .course-download--unavailable {
  font-style: normal;
  font-weight: 600;
}

/* ==========================================================================
   5. Display options (text size / contrast toggles)
   ========================================================================== */

body.accessible-course .course-display-options {
  border: var(--course-border-width) solid var(--course-border-subtle);
  margin-block: var(--course-space-lg);
  max-width: var(--course-measure);
  padding: var(--course-space-md);
}

body.accessible-course .course-display-options legend,
body.accessible-course .course-display-options .course-display-options__label {
  font-size: 0.9375em;
  font-weight: 700;
  margin-block-end: var(--course-space-sm);
}

body.accessible-course .course-display-options fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

body.accessible-course .course-display-options .course-display-options__group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--course-space-sm);
}

body.accessible-course .course-display-options button {
  background-color: var(--course-surface);
  border: var(--course-border-width) solid var(--course-border);
  border-radius: var(--course-radius);
  color: var(--course-text);
  cursor: pointer;
  font-weight: 600;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: var(--course-space-sm) var(--course-space-md);
}

body.accessible-course .course-display-options button:hover {
  background-color: var(--course-bg);
}

body.accessible-course .course-display-options button[aria-pressed="true"],
body.accessible-course .course-display-options button.is-active {
  background-color: var(--course-border);
  color: var(--course-bg-alt);
}

body.accessible-course.accessible-course--contrast .course-display-options button[aria-pressed="true"],
body.accessible-course.accessible-course--contrast .course-display-options button.is-active {
  background-color: #000000;
  color: #ffffff;
}

/* ==========================================================================
   6. Layout grid — sidebar TOC + main content
   ========================================================================== */

body.accessible-course .course-layout {
  display: grid;
  gap: var(--course-layout-gap);
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
  body.accessible-course .course-layout {
    align-items: start;
    grid-template-columns: var(--course-sidebar-width) minmax(0, 1fr);
  }
}

/* ==========================================================================
   7. Table of contents
   ========================================================================== */

body.accessible-course .course-toc,
body.accessible-course nav[aria-label="Course contents"] {
  font-size: 0.9375em;
}

@media (min-width: 56rem) {
  body.accessible-course .course-toc,
  body.accessible-course nav[aria-label="Course contents"] {
    position: sticky;
    top: var(--course-space-lg);
  }
}

body.accessible-course .course-toc h2,
body.accessible-course nav[aria-label="Course contents"] > h2 {
  color: var(--course-border);
  font-size: 1.125em;
  margin-block-start: 0;
}

body.accessible-course .course-toc ol,
body.accessible-course nav[aria-label="Course contents"] ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.accessible-course .course-toc li,
body.accessible-course nav[aria-label="Course contents"] li {
  border-inline-start: var(--course-border-width) solid transparent;
  margin-block: var(--course-space-xs);
  padding-inline-start: var(--course-space-sm);
}

body.accessible-course .course-toc a,
body.accessible-course nav[aria-label="Course contents"] a {
  color: var(--course-text);
  display: block;
  padding-block: var(--course-space-xs);
  text-decoration: none;
}

body.accessible-course .course-toc a:hover,
body.accessible-course .course-toc a:focus-visible,
body.accessible-course nav[aria-label="Course contents"] a:hover,
body.accessible-course nav[aria-label="Course contents"] a:focus-visible {
  color: var(--course-border);
  text-decoration: underline;
}

body.accessible-course .course-toc a[aria-current="true"],
body.accessible-course .course-toc a.is-current,
body.accessible-course nav[aria-label="Course contents"] a[aria-current="true"],
body.accessible-course nav[aria-label="Course contents"] a.is-current {
  border-inline-start-color: var(--course-border);
  color: var(--course-border);
  font-weight: 700;
}

body.accessible-course .course-toc ol ol,
body.accessible-course nav[aria-label="Course contents"] ol ol {
  padding-inline-start: var(--course-space-md);
}

/* Narrow view: collapsible TOC via details/summary */
@media (max-width: 55.999rem) {
  body.accessible-course .course-toc details,
  body.accessible-course nav[aria-label="Course contents"] details {
    border: var(--course-border-width) solid var(--course-border-subtle);
    margin-block-end: var(--course-space-lg);
    padding: var(--course-space-md);
  }

  body.accessible-course .course-toc summary,
  body.accessible-course nav[aria-label="Course contents"] summary {
    color: var(--course-border);
    cursor: pointer;
    font-size: 1.125em;
    font-weight: 700;
    list-style: none;
  }

  body.accessible-course .course-toc summary::-webkit-details-marker,
  body.accessible-course nav[aria-label="Course contents"] summary::-webkit-details-marker {
    display: none;
  }

  body.accessible-course .course-toc summary::before,
  body.accessible-course nav[aria-label="Course contents"] summary::before {
    content: "▸ ";
    display: inline-block;
    margin-inline-end: var(--course-space-xs);
  }

  body.accessible-course .course-toc details[open] summary::before,
  body.accessible-course nav[aria-label="Course contents"] details[open] summary::before {
    content: "▾ ";
  }

  body.accessible-course .course-toc details[open] ol,
  body.accessible-course nav[aria-label="Course contents"] details[open] ol {
    margin-block-start: var(--course-space-md);
  }
}

/* ==========================================================================
   8. Main course content
   ========================================================================== */

body.accessible-course #course-content,
body.accessible-course main.course-main {
  min-width: 0;
}

body.accessible-course #course-content > section,
body.accessible-course main.course-main > section {
  margin-block-end: var(--course-space-2xl);
  max-width: var(--course-measure);
}

body.accessible-course #course-content h2,
body.accessible-course main.course-main h2 {
  border-block-end: var(--course-border-width-thick) solid var(--course-border);
  font-size: 1.75em;
  margin-block-start: var(--course-space-2xl);
  padding-block-end: var(--course-space-sm);
}

body.accessible-course #course-content h2:first-child,
body.accessible-course main.course-main h2:first-child {
  margin-block-start: 0;
}

body.accessible-course #course-content h3,
body.accessible-course main.course-main h3 {
  border-inline-start: var(--course-border-width-thick) solid var(--course-accent);
  font-size: 1.375em;
  margin-block-start: var(--course-space-xl);
  padding-inline-start: var(--course-space-md);
}

body.accessible-course #course-content h4,
body.accessible-course main.course-main h4 {
  font-size: 1.125em;
  margin-block-start: var(--course-space-lg);
}

/* ==========================================================================
   9. Callouts — distinguished by border style, not colour alone
   ========================================================================== */

body.accessible-course .course-callout {
  background-color: var(--course-bg-alt);
  margin-block: var(--course-space-xl);
  max-width: var(--course-measure);
  padding: var(--course-space-lg);
}

body.accessible-course .course-callout > :first-child {
  margin-block-start: 0;
}

body.accessible-course .course-callout > :last-child {
  margin-block-end: 0;
}

body.accessible-course .course-callout h2,
body.accessible-course .course-callout h3,
body.accessible-course .course-callout h4 {
  color: var(--course-border);
  margin-block-start: 0;
}

body.accessible-course .course-callout blockquote {
  border-inline-start-color: var(--course-border-subtle);
  margin-block: var(--course-space-md);
}

/* Attacker's view — solid left border, dashed top */
body.accessible-course .course-callout--attacker {
  border-block-start: var(--course-border-width) dashed var(--course-border);
  border-inline-start: var(--course-border-width-thick) solid var(--course-border);
}

/* Why this matters — double left border */
body.accessible-course .course-callout--why {
  border-inline-start: var(--course-border-width-thick) double var(--course-border);
  border-inline-start-width: 0.5rem;
  padding-inline-start: calc(var(--course-space-lg) - 0.125rem);
}

/* What to do — thick solid left border */
body.accessible-course .course-callout--do {
  border-inline-start: 0.375rem solid var(--course-border);
  padding-inline-start: calc(var(--course-space-lg) - 0.125rem);
}

/* Example — dotted border on left and bottom */
body.accessible-course .course-callout--example {
  border-block-end: var(--course-border-width) dotted var(--course-border-subtle);
  border-inline-start: var(--course-border-width-thick) dotted var(--course-border);
}

/* Key takeaway — solid border all around, slightly stronger */
body.accessible-course .course-callout--takeaway {
  border: var(--course-border-width-thick) solid var(--course-border);
}

body.accessible-course.accessible-course--contrast .course-callout {
  background-color: #ffffff;
}

/* ==========================================================================
   10. Scenarios & reveal answers
   ========================================================================== */

body.accessible-course .course-scenario {
  border: var(--course-border-width) solid var(--course-border-subtle);
  margin-block: var(--course-space-xl);
  max-width: var(--course-measure);
  padding: var(--course-space-lg);
}

body.accessible-course .course-scenario > :first-child {
  margin-block-start: 0;
}

body.accessible-course details.course-reveal {
  border: var(--course-border-width) solid var(--course-border-subtle);
  margin-block: var(--course-space-lg);
  max-width: var(--course-measure);
  padding: var(--course-space-md) var(--course-space-lg);
}

body.accessible-course details.course-reveal summary {
  color: var(--course-border);
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

body.accessible-course details.course-reveal summary::-webkit-details-marker {
  display: none;
}

body.accessible-course details.course-reveal summary::before {
  content: "Show answer: ";
  font-weight: 400;
}

body.accessible-course details.course-reveal[open] summary::before {
  content: "Answer: ";
  font-weight: 700;
}

body.accessible-course details.course-reveal .course-reveal__content {
  border-block-start: var(--course-border-width) solid var(--course-border-subtle);
  margin-block-start: var(--course-space-md);
  padding-block-start: var(--course-space-md);
}

/* ==========================================================================
   11. Presenter notes — hidden unless presenter mode or explicitly shown
   ========================================================================== */

body.accessible-course:not(.accessible-course--presenter) .course-presenter {
  display: none;
}

body.accessible-course.accessible-course--presenter .course-presenter,
body.accessible-course .course-presenter.course-presenter--visible {
  background-color: var(--course-bg);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 0.375rem,
    var(--course-border-subtle) 0.375rem,
    var(--course-border-subtle) 0.5rem
  );
  background-size: 100% 0.5rem;
  background-repeat: repeat-x;
  background-position: top;
  border: var(--course-border-width) dashed var(--course-text-muted);
  margin-block: var(--course-space-xl);
  max-width: var(--course-measure);
  padding: var(--course-space-lg);
  padding-block-start: calc(var(--course-space-lg) + 0.5rem);
}

body.accessible-course .course-presenter::before {
  color: var(--course-text-muted);
  content: "Presenter notes";
  display: block;
  font-size: 0.8125em;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-block-end: var(--course-space-md);
  text-transform: uppercase;
}

body.accessible-course.accessible-course--contrast .course-presenter {
  background-image: none;
  border-style: solid;
  border-width: var(--course-border-width-thick);
}

body.accessible-course.accessible-course--contrast .course-presenter::before {
  color: #000000;
}

/* ==========================================================================
   12. Session progress (presenter mode)
   ========================================================================== */

body.accessible-course .course-progress {
  background-color: var(--course-bg-alt);
  border: var(--course-border-width) solid var(--course-border);
  font-size: 0.875em;
  margin-block: var(--course-space-lg);
  padding: var(--course-space-md);
}

body.accessible-course:not(.accessible-course--presenter) .course-progress {
  display: none;
}

body.accessible-course .course-progress ol {
  counter-reset: course-progress;
  display: flex;
  flex-wrap: wrap;
  gap: var(--course-space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

body.accessible-course .course-progress li {
  counter-increment: course-progress;
  margin: 0;
}

body.accessible-course .course-progress li::before {
  content: counter(course-progress) ". ";
  font-weight: 700;
}

body.accessible-course .course-progress a {
  text-decoration: none;
}

body.accessible-course .course-progress a[aria-current="step"],
body.accessible-course .course-progress li.is-current a {
  font-weight: 700;
  text-decoration: underline;
}

body.accessible-course .course-progress li.is-complete a {
  color: var(--course-text-muted);
}

/* ==========================================================================
   13. Social engineering pressures — bordered card grid
   ========================================================================== */

body.accessible-course .course-pressures {
  display: grid;
  gap: var(--course-space-md);
  grid-template-columns: 1fr;
  list-style: none;
  margin-block: var(--course-space-xl);
  max-width: var(--course-measure);
  padding: 0;
}

body.accessible-course .course-pressures li,
body.accessible-course .course-pressures .course-pressure {
  border: var(--course-border-width) solid var(--course-border);
  margin: 0;
  padding: var(--course-space-md);
}

body.accessible-course .course-pressures h3,
body.accessible-course .course-pressures .course-pressure__title {
  color: var(--course-border);
  font-size: 1em;
  margin-block: 0 var(--course-space-sm);
}

body.accessible-course .course-pressures p {
  font-size: 0.9375em;
  margin-block-end: 0;
}

/* ==========================================================================
   14. PAUSE framework — five-step visual
   ========================================================================== */

body.accessible-course .course-pause {
  margin-block: var(--course-space-2xl);
  max-width: var(--course-measure);
}

body.accessible-course .course-pause h2,
body.accessible-course .course-pause h3,
body.accessible-course .course-pause__title {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
  margin-block-end: var(--course-space-lg);
}

body.accessible-course .course-pause ol,
body.accessible-course .course-pause .course-pause__steps {
  display: grid;
  gap: var(--course-space-md);
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

body.accessible-course .course-pause li,
body.accessible-course .course-pause .course-pause__step {
  border: var(--course-border-width-thick) solid var(--course-border);
  margin: 0;
  padding: var(--course-space-md);
  text-align: center;
}

body.accessible-course .course-pause .course-pause__letter {
  color: var(--course-border);
  display: block;
  font-size: 2em;
  font-weight: 700;
  line-height: 1.1;
  margin-block-end: var(--course-space-sm);
}

body.accessible-course .course-pause .course-pause__word {
  display: block;
  font-size: 0.875em;
  font-weight: 700;
  margin-block-end: var(--course-space-xs);
}

body.accessible-course .course-pause .course-pause__detail {
  display: block;
  font-size: 0.8125em;
  line-height: 1.4;
}

@media (min-width: 40rem) {
  body.accessible-course .course-pause ol,
  body.accessible-course .course-pause .course-pause__steps {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ==========================================================================
   15. Security folklore section
   ========================================================================== */

body.accessible-course .course-folklore {
  border: var(--course-border-width) solid var(--course-border-subtle);
  margin-block: var(--course-space-2xl);
  max-width: var(--course-measure);
  padding: var(--course-space-lg);
}

body.accessible-course .course-folklore h2,
body.accessible-course .course-folklore h3 {
  font-style: italic;
}

body.accessible-course .course-folklore .course-folklore__item {
  border-block-end: var(--course-border-width) dotted var(--course-border-subtle);
  margin-block: var(--course-space-lg);
  padding-block-end: var(--course-space-lg);
}

body.accessible-course .course-folklore .course-folklore__item:last-child {
  border-block-end: 0;
  margin-block-end: 0;
  padding-block-end: 0;
}

body.accessible-course .course-folklore .course-folklore__claim {
  font-weight: 700;
  margin-block-end: var(--course-space-sm);
}

body.accessible-course .course-folklore .course-folklore__reality {
  margin-block-start: var(--course-space-sm);
}

body.accessible-course .course-folklore .course-folklore__reality::before {
  content: "In practice: ";
  font-weight: 700;
}

/* ==========================================================================
   16. Checklists
   ========================================================================== */

body.accessible-course .course-checklist {
  border: var(--course-border-width) solid var(--course-border-subtle);
  margin-block: var(--course-space-xl);
  max-width: var(--course-measure);
  padding: var(--course-space-lg);
}

body.accessible-course .course-checklist ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.accessible-course .course-checklist li {
  align-items: flex-start;
  display: flex;
  gap: var(--course-space-md);
  margin-block: var(--course-space-md);
  padding-block: var(--course-space-sm);
}

body.accessible-course .course-checklist li::before {
  border: var(--course-border-width) solid var(--course-border);
  content: "";
  flex-shrink: 0;
  height: 1.25em;
  margin-block-start: 0.15em;
  width: 1.25em;
}

body.accessible-course .course-checklist input[type="checkbox"] {
  flex-shrink: 0;
  height: 1.25em;
  margin: 0;
  width: 1.25em;
}

body.accessible-course .course-checklist label {
  flex: 1;
}

/* Action lists — guidance steps, not interactive checkboxes */
body.accessible-course .course-action-list {
  border: var(--course-border-width) solid var(--course-border-subtle);
  margin-block: var(--course-space-xl);
  max-width: var(--course-measure);
  padding: var(--course-space-lg);
}

body.accessible-course .course-action-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.accessible-course .course-action-list li {
  margin-block: var(--course-space-md);
  padding-block: var(--course-space-sm);
  padding-left: 1.75rem;
  position: relative;
}

body.accessible-course .course-action-list li::before {
  border: none;
  content: "—";
  font-weight: 700;
  height: auto;
  left: 0;
  position: absolute;
  top: 0.15em;
  width: auto;
}

body.accessible-course .course-model-label {
  border-left: var(--course-border-width-thick) solid var(--course-border);
  font-size: 1.05em;
  margin-block: var(--course-space-lg);
  max-width: var(--course-measure);
  padding-left: var(--course-space-md);
}

body.accessible-course .course-stage-list {
  counter-reset: course-stage;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.accessible-course .course-stage-list > li {
  counter-increment: course-stage;
  margin-block: var(--course-space-xl);
}

body.accessible-course .course-stage-list > li > h4::before {
  content: counter(course-stage) ". ";
  font-weight: 700;
}

body.accessible-course .course-pause-outline {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.accessible-course .course-pause-outline > li {
  border-left: var(--course-border-width-thick) solid var(--course-border-subtle);
  margin-block: var(--course-space-lg);
  padding-left: var(--course-space-md);
}

body.accessible-course .course-callout--shellhex {
  border-width: var(--course-border-width-thick);
}

/* When using native checklists without custom ::before boxes */
body.accessible-course .course-checklist--interactive li::before {
  content: none;
  display: none;
}

body.accessible-course .course-checklist--interactive li {
  display: list-item;
  list-style: none;
}

/* ==========================================================================
   17. Visuals — charts, figures, tables
   ========================================================================== */

body.accessible-course .course-visual {
  border: var(--course-border-width) solid var(--course-border-subtle);
  margin-block: var(--course-space-xl);
  max-width: 100%;
  overflow-x: auto;
  padding: var(--course-space-lg);
}

body.accessible-course .course-visual figcaption,
body.accessible-course .course-visual > figcaption {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin-block-end: var(--course-space-md);
}

body.accessible-course .course-visual svg {
  overflow: visible;
}

body.accessible-course .course-visual__chart,
body.accessible-course #viz-shellhex-attack-chain,
body.accessible-course #viz-credential-compromise-path,
body.accessible-course #viz-osint-attack-material .course-visual__chart,
body.accessible-course #viz-charity-threat-picture,
body.accessible-course #viz-charity-basic-controls,
body.accessible-course #viz-charity-incident-readiness {
  margin-block: var(--course-space-md);
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  width: 100%;
}

body.accessible-course #viz-osint-attack-material {
  margin-block: var(--course-space-md);
  min-width: 0;
  width: 100%;
}

body.accessible-course #viz-osint-source-select,
body.accessible-course .course-visual select {
  display: block;
  font-family: inherit;
  font-size: 1.375rem;
  line-height: 1.5;
  margin-block: var(--course-space-md);
  max-width: 100%;
  min-height: 3.5rem;
  padding: var(--course-space-sm) var(--course-space-md);
  width: 100%;
}

body.accessible-course .course-visual label {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  margin-block-end: var(--course-space-sm);
}

body.accessible-course .course-visual figure {
  margin: 0;
}

body.accessible-course .course-visual table {
  margin: 0;
}

body.accessible-course .course-visual .course-visual__caption {
  font-size: 0.9375em;
  margin-block-start: var(--course-space-sm);
}

/* ==========================================================================
   18. Booking / contact section
   ========================================================================== */

body.accessible-course .course-booking {
  background-color: var(--course-bg-alt);
  border: var(--course-border-width-thick) solid var(--course-border);
  margin-block: var(--course-space-2xl);
  max-width: var(--course-measure);
  padding: var(--course-space-xl);
}

body.accessible-course .course-booking h2 {
  color: var(--course-border);
  margin-block-start: 0;
}

body.accessible-course .course-booking label {
  display: block;
  font-weight: 700;
  margin-block: var(--course-space-md) var(--course-space-xs);
}

body.accessible-course .course-booking input[type="text"],
body.accessible-course .course-booking input[type="email"],
body.accessible-course .course-booking input[type="tel"],
body.accessible-course .course-booking input[type="number"],
body.accessible-course .course-booking select,
body.accessible-course .course-booking textarea {
  background-color: var(--course-surface);
  border: var(--course-border-width) solid var(--course-border-subtle);
  color: var(--course-text);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  padding: var(--course-space-sm) var(--course-space-md);
  width: 100%;
}

body.accessible-course .course-booking input:focus,
body.accessible-course .course-booking select:focus,
body.accessible-course .course-booking textarea:focus {
  border-color: var(--course-border);
}

body.accessible-course .course-booking textarea {
  min-height: 8rem;
  resize: vertical;
}

body.accessible-course .course-booking button[type="submit"],
body.accessible-course .course-booking .course-booking__submit {
  background-color: var(--course-border);
  border: var(--course-border-width) solid var(--course-border);
  color: var(--course-bg-alt);
  cursor: pointer;
  font-weight: 700;
  margin-block-start: var(--course-space-lg);
  min-height: 3rem;
  padding: var(--course-space-sm) var(--course-space-xl);
}

body.accessible-course .course-booking button[type="submit"]:hover,
body.accessible-course .course-booking .course-booking__submit:hover {
  background-color: var(--course-accent);
  border-color: var(--course-accent);
}

body.accessible-course .course-booking .course-booking__message {
  border: var(--course-border-width) solid var(--course-border);
  margin-block: var(--course-space-md);
  padding: var(--course-space-md);
}

body.accessible-course .course-booking .course-booking__message--error {
  border-color: #8b0000;
}

body.accessible-course .course-booking .course-booking__message--success {
  border-color: var(--course-border);
}

body.accessible-course.accessible-course--contrast .course-booking button[type="submit"],
body.accessible-course.accessible-course--contrast .course-booking .course-booking__submit {
  background-color: #000000;
  border-color: #000000;
  color: #ffffff;
}

/* ==========================================================================
   19. End navigation
   ========================================================================== */

body.accessible-course .course-end-nav {
  border-block-start: var(--course-border-width-thick) solid var(--course-border-subtle);
  margin-block: var(--course-space-2xl) var(--course-space-xl);
  max-width: var(--course-measure);
  padding-block-start: var(--course-space-lg);
}

body.accessible-course .course-end-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--course-space-md) var(--course-space-xl);
  list-style: none;
  margin: 0;
  padding: 0;
}

body.accessible-course .course-end-nav li {
  margin: 0;
}

body.accessible-course .course-end-nav a {
  font-weight: 700;
  text-decoration: none;
}

body.accessible-course .course-end-nav a:hover,
body.accessible-course .course-end-nav a:focus-visible {
  text-decoration: underline;
}

/* ==========================================================================
   20. Back to top
   ========================================================================== */

body.accessible-course .course-back-top {
  bottom: var(--course-space-lg);
  left: var(--course-space-lg);
  margin: 0;
  position: fixed;
  z-index: 100;
}

body.accessible-course .course-back-top[hidden] {
  display: none;
}

body.accessible-course .course-back-top a {
  background-color: var(--course-surface);
  border: var(--course-border-width-thick) solid var(--course-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  color: var(--course-text);
  display: inline-block;
  font-weight: 700;
  min-height: 3rem;
  padding: var(--course-space-sm) var(--course-space-lg);
  text-decoration: none;
}

body.accessible-course .course-back-top a:hover,
body.accessible-course .course-back-top a:focus-visible {
  background-color: var(--course-bg);
  border-color: var(--course-accent);
}

/* ==========================================================================
   21. Course page footer
   ========================================================================== */

body.accessible-course .course-site-footer {
  border-block-start: var(--course-border-width) solid var(--course-border-subtle);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-block: var(--course-space-2xl);
  margin-inline: auto;
  max-width: calc(var(--course-measure) + var(--course-sidebar-width) + var(--course-layout-gap) * 2);
  padding-block: var(--course-space-xl);
  padding-inline: var(--course-space-lg);
}

body.accessible-course .course-site-footer__company,
body.accessible-course .course-site-footer__address {
  margin-block: var(--course-space-sm);
}

body.accessible-course .course-site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--course-space-sm);
  justify-content: center;
  margin-block-start: var(--course-space-md);
  text-align: center;
}

body.accessible-course .course-site-footer__links a {
  font-weight: 700;
  text-decoration: underline;
}

body.accessible-course .course-site-footer__sep {
  opacity: 0.6;
}

/* ==========================================================================
   Utility: visually hidden (accessible labels)
   ========================================================================== */

body.accessible-course .course-visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ==========================================================================
   Print stylesheet
   ========================================================================== */

@media print {
  body.accessible-course {
    --course-bg: #ffffff;
    --course-text: #000000;
    --course-border: #000000;
    --course-border-subtle: #000000;
    --course-text-muted: #000000;
    background: #ffffff;
    color: #000000;
    font-size: 12pt;
  }

  body.accessible-course .course-skip-links,
  body.accessible-course .course-utility-header,
  body.accessible-course .course-display-options,
  body.accessible-course .course-back-top,
  body.accessible-course .course-site-footer,
  body.accessible-course .course-progress,
  body.accessible-course:not(.accessible-course--presenter) .course-presenter {
    display: none !important;
  }

  body.accessible-course .course-toc,
  body.accessible-course nav[aria-label="Course contents"] {
    position: static;
  }

  body.accessible-course .course-layout {
    display: block;
  }

  /* Expand all disclosure widgets for print */
  body.accessible-course details,
  body.accessible-course details.course-reveal {
    border: var(--course-border-width) solid #000000;
  }

  body.accessible-course details > summary {
    display: block;
    list-style: none;
    pointer-events: none;
  }

  body.accessible-course details > summary::-webkit-details-marker {
    display: none;
  }

  body.accessible-course details > *:not(summary) {
    display: block !important;
  }

  /* Show external URLs after links */
  body.accessible-course a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    font-weight: 400;
    word-break: break-all;
  }

  body.accessible-course a[href^="#"]::after,
  body.accessible-course a[href^="/"]::after,
  body.accessible-course a[href^="mailto:"]::after {
    content: none;
  }

  /* Avoid awkward breaks */
  body.accessible-course h1,
  body.accessible-course h2,
  body.accessible-course h3,
  body.accessible-course h4,
  body.accessible-course .course-callout,
  body.accessible-course .course-scenario,
  body.accessible-course .course-pause li,
  body.accessible-course .course-pause .course-pause__step,
  body.accessible-course figure,
  body.accessible-course table,
  body.accessible-course tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body.accessible-course p,
  body.accessible-course li {
    orphans: 3;
    widows: 3;
  }

  /* PAUSE steps: keep readable in print */
  body.accessible-course .course-pause ol,
  body.accessible-course .course-pause .course-pause__steps {
    grid-template-columns: repeat(5, 1fr);
    gap: 0.25rem;
  }

  body.accessible-course .course-pause .course-pause__letter {
    font-size: 14pt;
  }

  /* Presenter notes hidden in print unless explicitly in presenter print mode */
  body.accessible-course .course-presenter {
    display: none !important;
  }

  body.accessible-course.accessible-course--presenter .course-presenter {
    display: block !important;
    background-image: none;
    border: 1pt solid #000000;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body.accessible-course a {
    color: #000000;
    text-decoration: underline;
  }

  body.accessible-course .course-callout,
  body.accessible-course .course-downloads,
  body.accessible-course .course-booking,
  body.accessible-course .course-visual,
  body.accessible-course th,
  body.accessible-course td {
    border-color: #000000;
  }
}