/* FarPoint PD - course stylesheet.
   Design language extracted from FarPoint_PD_Interactive_Lesson_Prototype.html.
   Scoped to the PD app (body.pd). Does not touch the site-wide styles.css. */

:root {
  --pd-ink: #17263b;
  --pd-text: #26374c;
  --pd-soft: #5b6b7e;
  --pd-border: #d6dde7;
  --pd-pale: #f4f7fa;
  --pd-bg: #eef3f7;
  --pd-navy: #14263e;
  --pd-teal: #047f78;
  --pd-teal-dark: #035f5a;
  --pd-teal-wash: #f5fbfa;
  --pd-teal-line: #b7d7d2;
  --pd-gold: #a17728;
  --pd-gold-wash: #fff9ec;
  --pd-gold-line: #dec89c;
  --pd-correct: #14664d;
  --pd-wrong: #9b4a24;
  --pd-focus: #2368bd;
  --pd-radius: 12px;
  --pd-surface: #fbfcfd;
  --pd-shadow: 0 1px 2px rgba(23, 38, 59, .05), 0 8px 24px rgba(23, 38, 59, .07);
  --pd-shadow-sm: 0 1px 2px rgba(23, 38, 59, .06), 0 2px 6px rgba(23, 38, 59, .04);
  /* Phase accents: one dark, contrast-safe hue per learning phase. */
  --pd-ph-challenge: #7a5a1b;
  --pd-ph-learn: #035f5a;
  --pd-ph-retrieve: #4338ca;
  --pd-ph-apply: #9b4a24;
  --pd-ph-defend: #86198f;
  --pd-ph-reflect: #0369a1;
  --pd-ph-evidence: #14263e;
}

body.pd { margin: 0; background: var(--pd-bg); color: var(--pd-text);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
body.pd *, body.pd *::before, body.pd *::after { box-sizing: border-box; }
.pd p { color: inherit; }
.pd a { color: var(--pd-teal-dark); }
.pd a:hover { color: var(--pd-navy); }
.pd :focus-visible { outline: 3px solid var(--pd-focus); outline-offset: 2px; }

.pd-skip { position: absolute; left: -999px; top: 8px; background: #fff; color: var(--pd-ink);
  padding: 8px 12px; border-radius: 6px; z-index: 50; }
.pd-skip:focus { left: 8px; }

/* ---- Sticky resource bar ----
   A slim bar on module and lesson pages that names where you are and keeps the module's
   downloads reachable while you scroll. It sticks to the top of the viewport once the page
   header scrolls away; --pd-stick is the height anchor jumps must clear. */
:root { --pd-stick: 68px; }
.pd-resbar { position: sticky; top: 0; z-index: 30; margin: -26px calc(-1 * clamp(16px, 2vw, 32px)) 18px;
  background: #fff; border-bottom: 1px solid var(--pd-border); box-shadow: var(--pd-shadow-sm); }
.pd-resbar-in { max-width: 1440px; margin: 0 auto; padding: 8px clamp(16px, 2vw, 32px);
  display: flex; align-items: center; gap: 10px 18px; flex-wrap: nowrap; }
.pd-resbar-where { margin: 0; min-width: 0; flex: 1 1 auto; font-size: 13px; color: var(--pd-text);
  display: flex; align-items: baseline; gap: 8px; overflow: hidden; }
.pd-resbar-mod { flex: 0 0 auto; font-weight: 700; color: var(--pd-teal-dark); text-decoration: none; }
.pd-resbar-mod:hover { text-decoration: underline; }
.pd-resbar-t, .pd-resbar-les { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-resbar-t { flex: 0 1 auto; color: var(--pd-ink); font-weight: 600; }
.pd-resbar-sep { flex: 0 0 auto; color: var(--pd-soft); }
.pd-resbar-les { flex: 1 1 auto; color: var(--pd-text); }
.pd-resbar-nav { display: flex; gap: 6px; flex: 0 0 auto; }
.pd-resbar-link, .pd-resbar-mlink { font: inherit; font-size: 13px; color: var(--pd-teal-dark);
  background: #fff; border: 1px solid var(--pd-border); border-radius: 999px; padding: 5px 12px;
  text-decoration: none; cursor: pointer; white-space: nowrap; }
.pd-resbar-link:hover, .pd-resbar-mlink:hover { background: var(--pd-teal-wash); border-color: var(--pd-teal-line); color: var(--pd-navy); }
/* The guided notes link is filled, so it is the first thing the eye finds in the bar. */
.pd .pd-resbar-link.is-primary, .pd .pd-resbar-mlink.is-primary { background: var(--pd-teal); border-color: var(--pd-teal); color: #fff; font-weight: 650; }
.pd .pd-resbar-link.is-primary:hover, .pd .pd-resbar-mlink.is-primary:hover { background: var(--pd-teal-dark); border-color: var(--pd-teal-dark); color: #fff; }
.pd-dl-icon { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* The phone menu: one disclosure holding the same links. A details element is keyboard
   accessible on its own, so no script is needed to open it. */
.pd-resbar-more { display: none; flex: 0 0 auto; position: relative; }
.pd-resbar-more > summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 650;
  color: var(--pd-teal-dark); background: #fff; border: 1px solid var(--pd-border);
  border-radius: 999px; padding: 7px 14px; min-height: 36px; display: inline-flex; align-items: center; gap: 6px; }
.pd-resbar-more > summary::-webkit-details-marker { display: none; }
.pd-resbar-more > summary::after { content: ""; width: 7px; height: 7px; margin-bottom: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.pd-resbar-more[open] > summary::after { transform: rotate(-135deg); margin-bottom: -2px; }
.pd-resbar-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 31; display: flex;
  flex-direction: column; gap: 6px; padding: 10px; min-width: 190px; background: #fff;
  border: 1px solid var(--pd-border); border-radius: 10px; box-shadow: var(--pd-shadow); }
.pd-resbar-mlink { text-align: left; }
@media (max-width: 760px) {
  .pd-resbar-nav { display: none; }
  .pd-resbar-more { display: block; }
  .pd-resbar-t { display: none; }
}
@media print { .pd-resbar { display: none; } }

/* Header */
/* Desktop: the brand block on the left and the nav on the right, in one row. Below 900px they stack (see below). */
.pd-header { background: var(--pd-navy); color: #fff; padding: 18px max(16px, calc((100vw - 1440px) / 2)); border-bottom: 3px solid var(--pd-teal);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }
.pd-header .brand { font-weight: 700; font-size: 18px; letter-spacing: .02em; }
/* Written in title case so screen readers and copy-paste get words; shown in capitals. */
.pd-header .brand span { color: #b9e1dc; text-transform: uppercase; letter-spacing: .06em; }
.pd-header .sub { color: #d7e0e8; font-size: 13px; margin-top: 4px; }
.pd-header nav { display: flex; gap: 6px; flex-wrap: wrap; }
.pd-header nav a { color: #e6eef5; text-decoration: none; padding: 6px 12px; border-radius: 999px;
  font-size: 13px; border: 1px solid transparent; }
.pd-header nav a:hover { border-color: #5c7188; color: #fff; }
.pd-header nav a[aria-current="page"] { background: #1f3a58; border-color: #5c7188; color: #fff; }

.pd-status-banner { background: #fff7e6; color: #6b4d12; border-bottom: 1px solid #e8cf93;
  font-size: 13px; padding: 9px max(16px, calc((100vw - 1440px) / 2)); }
.pd-status-banner strong { color: #5a3f0c; }
.pd-status-banner a { color: #5a3f0c; font-weight: 600; text-decoration: underline; }

/* The reading area is as wide as the content needs: narrower side gutters on a large screen,
   so prose, tables and figures all get more room than the old 1240px shell allowed. */
.pd-main { max-width: 1440px; margin: 26px auto 70px; padding: 0 clamp(16px, 2vw, 32px); }
.pd-main:focus { outline: none; }
.pd-crumbs { font-size: 13px; color: var(--pd-soft); margin-bottom: 14px; }
.pd-crumbs a { color: var(--pd-soft); }
.pd-crumbs span[aria-hidden] { margin: 0 6px; }

h1.pd-title { margin: 0; color: var(--pd-ink); font-size: 30px; font-weight: 750; letter-spacing: -.01em; line-height: 1.18; }
.pd-lede { color: var(--pd-text); margin: 8px 0 0; max-width: 80ch; font-size: 16px; line-height: 1.55; }
.pd-muted { color: var(--pd-soft); }
.pd-pill { display: inline-block; font-size: 12px; padding: 4px 10px; background: #fff7e6; color: #805b1a;
  border: 1px solid #e8cf93; border-radius: 999px; white-space: nowrap; }
.pd-pill.teal { background: var(--pd-teal-wash); color: var(--pd-teal-dark); border-color: var(--pd-teal-line); }
.pd-pill.plain { background: #fff; color: var(--pd-soft); border-color: var(--pd-border); }
.pd-intro { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.pd-eyebrow { text-transform: uppercase; font-size: 11px; letter-spacing: .13em; color: var(--pd-teal-dark);
  font-weight: 750; margin: 0 0 8px; }
.pd-smallcaps { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--pd-soft); margin: 0 0 6px; }

/* Layout */
.pd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; margin-top: 20px; align-items: start; }
.pd-sheet { background: #fff; padding: 30px 34px 32px; border: 1px solid var(--pd-border); border-radius: 14px;
  box-shadow: var(--pd-shadow); min-width: 0; }
.pd-sheet > h2, .pd-sheet h2.pd-h2, .pd-sheet h1.pd-h2 { color: var(--pd-ink); font-size: 26px; font-weight: 750; letter-spacing: -.005em; line-height: 1.22; margin: 0 0 8px; }
.pd-sheet h3 { color: var(--pd-ink); font-size: 18px; font-weight: 700; line-height: 1.3; margin: 24px 0 8px; }
.pd-sidebar { background: var(--pd-pale); border: 1px solid var(--pd-border); border-radius: var(--pd-radius);
  padding: 6px 14px; position: sticky; top: 14px; font-size: 14px; max-height: calc(100vh - 28px); overflow-y: auto; min-width: 0; }
.pd-sidebar .small, .pd-small { font-size: 13px; color: var(--pd-soft); }
.pd-sidebar ol, .pd-sidebar ul { padding-left: 0; list-style: none; margin: 8px 0; }
.pd-sidebar li { margin: 2px 0; }
.pd-sidebar li a { display: flex; gap: 8px; align-items: baseline; text-decoration: none; padding: 6px 8px;
  border-radius: 7px; color: var(--pd-text); }
.pd-sidebar li a:hover { background: #fff; }
.pd-sidebar li a[aria-current="step"], .pd-sidebar li a[aria-current="page"] { background: #fff;
  border: 1px solid var(--pd-teal-line); font-weight: 650; color: var(--pd-ink); }
.pd-mark { display: inline-block; min-width: 1.4em; text-align: center; font-weight: 700; color: var(--pd-teal-dark); }

/* Sidebar groups: the lesson contents, the module's lessons and the objectives, each a disclosure. */
.pd-sidegroup { border-top: 1px solid var(--pd-border); padding: 6px 0 8px; margin: 0; }
.pd-sidegroup:first-child { border-top: 0; }
.pd-sidegroup > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 8px; min-height: 42px; border-radius: 7px; }
.pd-sidegroup > summary::-webkit-details-marker { display: none; }
.pd-sidegroup > summary:hover { background: #fff; }
.pd-sidegroup > summary .pd-eyebrow { margin: 0; flex: 1 1 auto; }
.pd-sidegroup > summary .pd-small { white-space: nowrap; }
.pd-sidegroup > summary::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin: 0 6px 3px 0;
  border-right: 2px solid var(--pd-soft); border-bottom: 2px solid var(--pd-soft); transform: rotate(45deg); transition: transform .15s; }
.pd-sidegroup[open] > summary::after { transform: rotate(-135deg); margin-bottom: -2px; }
.pd-sidegroup .pd-objectives { padding-left: 24px; margin: 4px 0 6px; list-style: disc; }
.pd-sidegroup .pd-objectives li { margin: 0 0 6px; color: var(--pd-text); }

/* Lesson table of contents: phases, their headed sections, completion marks, and the section now on screen. */
.pd-toc-sum { margin: 0 8px 4px; }
.pd-toc-list, .pd-toc-sub { list-style: none; padding: 0; margin: 0; }
.pd-toc-list > li { margin: 1px 0; --pd-phase-accent: var(--pd-teal-dark); }
.pd-toc-list > li[data-phase="challenge"] { --pd-phase-accent: var(--pd-ph-challenge); }
.pd-toc-list > li[data-phase="learn"] { --pd-phase-accent: var(--pd-ph-learn); }
.pd-toc-list > li[data-phase="retrieve"] { --pd-phase-accent: var(--pd-ph-retrieve); }
.pd-toc-list > li[data-phase="apply"] { --pd-phase-accent: var(--pd-ph-apply); }
.pd-toc-list > li[data-phase="defend"] { --pd-phase-accent: var(--pd-ph-defend); }
.pd-toc-list > li[data-phase="reflect"] { --pd-phase-accent: var(--pd-ph-reflect); }
.pd-toc-list > li[data-phase="evidence"] { --pd-phase-accent: var(--pd-ph-evidence); }
.pd-toc-list a { display: flex; gap: 8px; align-items: baseline; padding: 7px 8px 7px 9px; border-radius: 7px; color: var(--pd-text);
  text-decoration: none; font-size: 14px; line-height: 1.35; border-left: 3px solid transparent; }
.pd-toc-list > li > a { font-weight: 650; color: var(--pd-ink); }
.pd-toc-list a:hover { background: #fff; color: var(--pd-teal-dark); text-decoration: underline; text-underline-offset: 3px; }
.pd-toc-list a[aria-current="location"] { background: #fff; border-left-color: var(--pd-phase-accent); color: var(--pd-ink); }
.pd-toc-list > li[data-current="true"] > a { color: var(--pd-phase-accent); }
.pd-toc-sub { margin: 0 0 4px 16px; }
.pd-toc-sub a { font-size: 13px; padding: 5px 8px 5px 9px; }
.pd-toc-list .pd-mark { min-width: 1.3em; font-size: 12px; line-height: 1; }
.pd-toc-list li.done > a .pd-mark { color: var(--pd-correct); }
.pd-toc-n { font-size: 11px; color: var(--pd-soft); font-weight: 650; letter-spacing: .02em; }
/* Anchor jumps clear the sticky resource bar instead of landing behind it. */
.pd-phase, .pd-block, .pd-sidegroup { scroll-margin-top: var(--pd-stick, 16px); }
.pd-phase:focus, .pd-block:focus { outline: none; }
.pd-phase:focus-visible, .pd-block:focus-visible { outline: 3px solid var(--pd-focus); outline-offset: 6px; border-radius: 4px; }

.pd-rail { height: 7px; background: #dfe6ed; border-radius: 6px; overflow: hidden; margin: 8px 0; }
.pd-rail > div { height: 100%; background: var(--pd-teal); transition: width .2s; }

/* Buttons and form controls */
.pd-btn { border-radius: 8px; border: 1px solid #b6c3d1; background: #fff; color: var(--pd-ink); font: inherit;
  font-weight: 650; font-size: 14px; line-height: 1.3; padding: 9px 15px; cursor: pointer; text-decoration: none; display: inline-block;
  box-shadow: 0 1px 1px rgba(23, 38, 59, .06); }
.pd-btn.primary { background: var(--pd-teal); color: #fff; border-color: var(--pd-teal-dark); box-shadow: 0 1px 2px rgba(3, 95, 90, .3); }
.pd-btn.danger { color: var(--pd-wrong); border-color: #d9b5a2; }
.pd-btn:disabled, .pd-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.pd-btn:hover:not(:disabled):not([aria-disabled="true"]) { filter: brightness(.96); }
.pd-btn:focus-visible { outline-offset: 3px; }
.pd-controls { display: flex; gap: 10px; margin: 16px 0 0; flex-wrap: wrap; align-items: center; }
.pd label.pd-label { display: block; font-weight: 650; color: var(--pd-ink); margin: 14px 0 6px; line-height: 1.45; }
.pd textarea, .pd select, .pd input[type="text"], .pd input[type="number"] { font: inherit; color: var(--pd-ink);
  border: 1px solid #8c9aab; border-radius: 7px; padding: 9px 10px; background: #fff; }
.pd textarea { width: 100%; resize: vertical; min-height: 100px; }
.pd select { width: 100%; }
.pd input[type="range"] { width: 100%; accent-color: var(--pd-teal); }

/* Feedback: a tinted panel with a left accent (green for correct, warm for incorrect), the explanation as a
   subordinate layer inside it. An empty feedback element takes no space. */
.pd-feedback { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--pd-text); }
.pd-feedback:empty { display: none; }
.pd-feedback.right, .pd-feedback.bad, .pd-feedback.neut, .pd-feedback.good { display: block; padding: 11px 14px; border-radius: 8px;
  border-left: 4px solid var(--pd-border); background: var(--pd-pale); }
.pd-feedback.right, .pd-feedback.good { background: #edf7f1; border-left-color: var(--pd-correct); color: #0e4a37; }
.pd-feedback.bad { background: #fdf3ec; border-left-color: var(--pd-wrong); color: #78381a; }
.pd-feedback .ico { font-weight: 800; margin-right: 6px; }
.pd-feedback > br { display: none; }
.pd-feedback .pd-small { display: block; margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(23, 38, 59, .1); color: #4f5f72; font-size: 13px; }
.pd-feedback p { margin: 0 0 6px; }
.pd-feedback p:last-child { margin-bottom: 0; }
.pd-checklist { list-style: none; padding: 0; margin: 6px 0 0; }
.pd-checklist li { margin: 4px 0; }
.pd-checklist li.good .ico { color: var(--pd-correct); }
.pd-checklist li.bad .ico { color: var(--pd-wrong); }
.pd-table .pd-feedback { padding: 6px 10px; margin-top: 6px; font-size: 13px; font-weight: 400; }
.pd-table th > br { display: none; } /* the classify rows break before a feedback panel that is already a block */
.pd-counter { font-variant-numeric: tabular-nums; color: var(--pd-soft); }

/* Phases: each learning phase is a section with a colored eyebrow heading and a tinted
   header band in its own accent, so long lessons read as a sequence of distinct movements
   rather than one undifferentiated column. */
.pd-phase { margin-top: 36px; border-top: 2px solid var(--pd-border); padding-top: 18px; --pd-phase-accent: var(--pd-teal-dark); }
.pd-phase[data-phase="challenge"] { --pd-phase-accent: var(--pd-ph-challenge); }
.pd-phase[data-phase="learn"] { --pd-phase-accent: var(--pd-ph-learn); }
.pd-phase[data-phase="retrieve"] { --pd-phase-accent: var(--pd-ph-retrieve); }
.pd-phase[data-phase="apply"] { --pd-phase-accent: var(--pd-ph-apply); }
.pd-phase[data-phase="defend"] { --pd-phase-accent: var(--pd-ph-defend); }
.pd-phase[data-phase="reflect"] { --pd-phase-accent: var(--pd-ph-reflect); }
.pd-phase[data-phase="evidence"] { --pd-phase-accent: var(--pd-ph-evidence); }
h2.pd-phase-h { display: flex; align-items: center; gap: 10px; color: var(--pd-phase-accent);
  text-transform: uppercase; font-size: 13px; letter-spacing: .1em; margin: 0 0 18px;
  /* A tinted band in the phase's own accent, 8 percent over the sheet, with a solid left rule. */
  background: color-mix(in srgb, var(--pd-phase-accent) 8%, #fff);
  border-left: 4px solid var(--pd-phase-accent); border-radius: 0 8px 8px 0;
  padding: 9px 14px; }
h2.pd-phase-h::before { content: ""; width: 22px; height: 4px; border-radius: 2px; background: var(--pd-phase-accent); }
/* Where color-mix is unsupported the band falls back to the pale surface, and the left rule still carries the accent. */
@supports not (background: color-mix(in srgb, #000 8%, #fff)) {
  h2.pd-phase-h { background: var(--pd-pale); }
}
.pd-lessonmeta { margin: 0 0 20px; font-size: 14px; }
.pd-review-banner { background: #eef4ff; border: 1px solid #9db7e8; padding: 10px 16px; margin-bottom: 20px;
  border-radius: 8px; color: #1e3a6e; }
.pd-review-banner p { margin: 0; }
.pd-review-banner a { color: #1e3a6e; font-weight: 600; text-decoration: underline; }
.pd-banner-preview { background: #fffbeb; border: 1px solid #fcd34d; padding: 12px 16px; margin-bottom: 24px;
  border-radius: 8px; color: #8a4f0b; }

/* Blocks */
.pd-block { margin: 20px 0; }
.pd-block:first-child { margin-top: 0; }
/* Question cards: one surface per item, with the stem, the options or field, and a controls row. */
.pd-qcard { background: var(--pd-surface); border: 1px solid var(--pd-border); border-radius: 12px; padding: 18px 20px 16px;
  box-shadow: var(--pd-shadow-sm); }
.pd-qcard > h3:first-child, .pd-qcard > .pd-kind + h3 { margin-top: 0; }
.pd-qcard > .pd-label:first-child, .pd-qcard > .pd-kind + .pd-label { margin-top: 0; }
.pd-qcard .pd-label { font-size: 16.5px; }
.pd-qcard .pd-explorer-field .pd-label, .pd-qcard label.pd-small { font-size: 13px; }
.pd-qcard .pd-controls { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e3e9f0; }
.pd-qcard .pd-feedback + .pd-controls { border-top: 0; padding-top: 0; }
.pd-qcard textarea, .pd-qcard input[type="text"], .pd-qcard input[type="number"], .pd-qcard select { background: #fff; }
.pd-qcard .pd-callout { background: #fff; }
.pd-subblock.pd-qcard { margin: 14px 0; }
.pd-qcard .pd-counter { margin: 6px 0 0; font-size: 13px; }
.pd-kind { display: inline-flex; gap: 6px; align-items: center; font-size: 11px; font-weight: 750; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--pd-border); margin-bottom: 10px; }
.pd-kind.evidence { color: #6b4d12; background: var(--pd-gold-wash); border-color: var(--pd-gold-line); }
.pd-kind.review { color: var(--pd-soft); background: #fff; letter-spacing: .04em; text-transform: none; font-weight: 600; }
.pd-source { background: #f1f6fa; border-left: 4px solid var(--pd-teal); padding: 14px 18px; margin: 14px 0; }
.pd-source p { margin: 0 0 10px; } .pd-source p:last-child { margin: 0; }
.pd-prose p { margin: 0 0 12px; max-width: 86ch; font-size: 16px; line-height: 1.65; color: var(--pd-text); }
.pd-prose p:last-child { margin-bottom: 0; }
.pd-prose ul, .pd-prose ol { max-width: 86ch; }
/* A paragraphs entry can be a real list instead of a run of "(1) ... (2) ..." inside a sentence. */
.pd-prose-list { max-width: 86ch; margin: 0 0 12px; padding-left: 22px; }
.pd-prose-list:last-child { margin-bottom: 0; }
.pd-prose .pd-prose-list li { margin: 0 0 6px; font-size: 16px; line-height: 1.65; color: var(--pd-text); }
.pd-callout .pd-prose-list { margin: 0 0 8px; }
.pd-callout .pd-prose-list:last-child { margin-bottom: 0; }
.pd-callout .pd-prose-list li { margin: 0 0 4px; }

/* Fill-along slides: a blank is a fixed-length line until the Show answers toggle fills it. */
.pd-blank { display: inline-block; min-width: 9ch; border-bottom: 2px solid var(--pd-ink); margin: 0 2px; vertical-align: baseline; }
.pd-blank.filled { border-bottom-color: var(--pd-gold); background: var(--pd-gold-wash); font-weight: 600; padding: 0 4px; min-width: 0; }
/* Slide figures: plain, accessible HTML here; native shapes in the PowerPoint build. */
.pd-fig-wrap { margin: 12px 0 0; }
.pd-fig { margin: 0; padding-left: 22px; }
.pd-fig li { margin: 0 0 6px; }
.pd-fig-chain li, .pd-fig-steps li { line-height: 1.5; }
.pd-fig-bands { list-style: none; padding-left: 0; }
.pd-fig-bands li { border-left: 4px solid var(--pd-teal); background: var(--pd-pale); padding: 6px 10px; margin: 0 0 4px; }
.pd-fig-cards { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pd-fig-cards li { border: 1px solid var(--pd-border); border-radius: 8px; padding: 8px 10px; background: #fff; flex: 1 1 220px; margin: 0; }
.pd-fig-checklist { list-style: none; padding-left: 0; }
.pd-fig-checklist li { padding-left: 26px; position: relative; }
.pd-fig-checklist li::before { content: ""; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border: 2px solid var(--pd-teal); border-radius: 3px; }
.pd-fig-hours { list-style: none; padding-left: 0; }
.pd-fig-hours li { margin: 0 0 6px; }
.pd-fig-bar { display: block; height: 10px; background: var(--pd-teal); border-radius: 5px; min-width: 4px; }
.pd-fig-hours li:nth-child(2) .pd-fig-bar { background: var(--pd-gold); }
.pd-fig-hours li:nth-child(3) .pd-fig-bar { background: var(--pd-soft); }
.pd-fig-label { font-size: 14px; color: var(--pd-text); }
/* Callout kinds carry their meaning in a colored left edge: teal = note,
   gold = caution, rust = limit. */
.pd-callout { border: 1px solid var(--pd-border); border-left: 4px solid var(--pd-teal); border-radius: 10px; padding: 14px 16px; background: var(--pd-pale); }
.pd-callout.caution { background: var(--pd-gold-wash); border-color: var(--pd-gold-line); border-left-color: var(--pd-gold); }
.pd-callout.limit { background: #fdf3ee; border-color: #e3c3b1; border-left-color: var(--pd-wrong); }
.pd-callout strong.t { display: block; color: var(--pd-ink); margin-bottom: 4px; font-size: 15px; }
.pd-callout { font-size: 15px; line-height: 1.55; }
.pd-callout p { margin: 0 0 8px; } .pd-callout p:last-child { margin: 0; }
.pd-cite { font-size: 12.5px; color: var(--pd-soft); margin: 8px 0 0; line-height: 1.5; }

.pd-choice { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--pd-border); padding: 10px 12px;
  border-radius: 8px; margin: 6px 0; cursor: pointer; background: #fff; font-size: 15px; line-height: 1.5; color: var(--pd-text); }
.pd-choice:hover { border-color: #8c9aab; }
.pd-choice input { margin-top: 5px; accent-color: var(--pd-teal); flex: 0 0 auto; }
.pd-choice.sel { border-color: var(--pd-teal); background: var(--pd-teal-wash); box-shadow: inset 0 0 0 1px var(--pd-teal); }
.pd-choice.is-correct { border-color: var(--pd-correct); box-shadow: inset 0 0 0 1px var(--pd-correct); background: #f3faf6; }
.pd-choice.is-wrong { border-color: var(--pd-wrong); box-shadow: inset 0 0 0 1px var(--pd-wrong); background: #fdf6f1; }
.pd-choice:has(input:focus-visible) { outline: 3px solid var(--pd-focus); outline-offset: 2px; }
fieldset.pd-fs { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.pd-fs legend { font-weight: 650; color: var(--pd-ink); padding: 0; margin-bottom: 10px; font-size: 16.5px; line-height: 1.45; max-width: 86ch; }

.pd-note { font-size: 18px; line-height: 1.8; color: var(--pd-ink); font-weight: 500; }
.pd-note input[type="text"] { min-width: 130px; max-width: 250px; width: 35%; margin: 0 3px; }
.pd-wordbank { font-size: 13px; margin-top: 10px; }
.pd-wordbank ul { display: flex; gap: 8px; flex-wrap: wrap; padding: 0; list-style: none; margin: 8px 0 0; }
.pd-wordbank li { border: 1px solid var(--pd-border); border-radius: 999px; padding: 2px 10px; background: #fff; }

/* Evidence cards */
.pd-card { min-height: 220px; border: 1px solid var(--pd-teal-line); background: var(--pd-teal-wash); border-radius: 12px;
  padding: 28px 24px; display: flex; flex-direction: column; justify-content: center; color: var(--pd-ink); margin: 14px 0;
  box-shadow: var(--pd-shadow-sm); }
.pd-card.back { background: var(--pd-gold-wash); border-color: var(--pd-gold-line); }
.pd-card .face-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pd-soft); font-weight: 700; margin-bottom: 10px; }
.pd-card .q { font-size: 20px; font-weight: 650; line-height: 1.4; margin: 0; }
.pd-card dl { margin: 0; } .pd-card dt { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--pd-soft); margin-top: 12px; font-weight: 700; }
.pd-card dd { margin: 2px 0 0; font-size: 16px; line-height: 1.5; }
.pd-card dd.principle { font-weight: 650; font-size: 17px; }
.pd-card.flipping { animation: pd-fade .22s ease-out; }

/* Review flashcards (self-testing deck; reuses the card faces above) */
.pd-flash .pd-flash-face { min-height: 180px; }
.pd-flash .pd-flash-face .q { font-size: 18px; }
@keyframes pd-fade { from { opacity: .3; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* Figures, charts and media: everything scales to the column it sits in. */
figure.pd-diagram { margin: 14px 0; max-width: 100%; }
figure.pd-diagram svg { display: block; height: auto; }
figure.pd-diagram figcaption { font-size: 13px; color: var(--pd-soft); margin-top: 6px; }
.pd video, .pd img { max-width: 100%; height: auto; }
/* Course images (the image block): centered, capped so a tall page image stays readable beside the text. */
figure.pd-figure { margin: 14px auto 0; text-align: center; }
figure.pd-figure img { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; border: 1px solid var(--pd-border);
  border-radius: 10px; box-shadow: var(--pd-shadow-sm); background: #fff; }
figure.pd-figure figcaption { font-size: 13px; color: var(--pd-soft); margin: 8px auto 0; max-width: 440px; line-height: 1.45; }
.pd-figure-link { text-align: center; font-size: 13px; margin: 6px 0 0; }

/* Live-lecture card: a lecture presented live online and posted afterward, with what it covers. */
.pd-livecard { background: var(--pd-teal-wash); border: 1px solid var(--pd-teal-line); border-left: 4px solid var(--pd-teal);
  border-radius: 10px; padding: 14px 16px; font-size: 15px; line-height: 1.55; }
.pd-livepill { display: inline-block; font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2;
  color: var(--pd-teal-dark); background: #fff; border: 1px solid var(--pd-teal-line); border-radius: 999px; padding: 4px 10px; margin-bottom: 10px; }
.pd-livecard p { margin: 0 0 10px; max-width: 86ch; }
.pd-livecard .pd-livecard-h { font-weight: 650; color: var(--pd-ink); margin: 12px 0 4px; }
.pd-livecard ul { margin: 0; padding-left: 22px; max-width: 86ch; }
.pd-livecard li { margin: 0 0 4px; }
.pd-livecard details.pd-details { margin: 12px 0 0; }
.pd-prose a, .pd-cite, .pd-resources li, .pd-modnav-more, .pd-callout a { overflow-wrap: anywhere; }
svg.pd-plot { max-width: 100%; height: auto; background: #fff; border: 1px solid #d8e2eb; border-radius: 9px; display: block; }
.pd-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--pd-soft); margin: 8px 0; padding: 0; list-style: none; }
.pd-legend svg { vertical-align: middle; margin-right: 5px; }
.pd-table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 8px 0; background: #fff; }
.pd-table th, .pd-table td { border: 1px solid var(--pd-border); padding: 8px 10px; text-align: left; vertical-align: top; line-height: 1.45; }
.pd-table th { background: var(--pd-pale); color: var(--pd-ink); font-weight: 650; }
.pd-table caption { text-align: left; font-weight: 650; color: var(--pd-ink); padding: 4px 0 6px; font-size: 15px; }
.pd-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
details.pd-details { margin: 10px 0; border: 1px solid var(--pd-border); border-radius: 8px; padding: 0 12px; background: #fff; }
details.pd-details summary { cursor: pointer; font-weight: 650; color: var(--pd-ink); padding: 9px 0; font-size: 14px; }
details.pd-details[open] summary { border-bottom: 1px solid #e9eef3; margin-bottom: 8px; }
details.pd-details > :last-child { margin-bottom: 10px; }

/* Dashboard */
.pd-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; margin-top: 20px; padding: 0; list-style: none; }
.pd-modcard { background: #fff; border: 1px solid var(--pd-border); border-radius: var(--pd-radius); padding: 20px 22px;
  box-shadow: var(--pd-shadow); display: flex; flex-direction: column; gap: 8px; height: 100%;
  transition: border-color .15s, box-shadow .15s; }
.pd-modcard:hover:not(.locked), .pd-modcard:focus-within:not(.locked) { border-color: var(--pd-teal); box-shadow: 0 2px 4px rgba(23, 38, 59, .06), 0 12px 28px rgba(23, 38, 59, .1); }
.pd-modcard h2 { font-size: 18px; margin: 0; color: var(--pd-ink); line-height: 1.25; }
.pd-modcard h2 a { color: inherit; text-decoration: none; }
.pd-modcard h2 a:hover { text-decoration: underline; }
.pd-modcard.exemplar { border-color: var(--pd-teal-line); border-top: 4px solid var(--pd-teal); }
.pd-modcard dl { margin: 4px 0 0; font-size: 13px; } .pd-modcard dt { font-weight: 700; color: var(--pd-ink); display: inline; }
.pd-modcard dd { display: inline; margin: 0; } .pd-modcard .row { margin: 3px 0; }
.pd-hours { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.pd-hours .num { font-size: 26px; font-weight: 750; color: var(--pd-teal-dark); }
.pd-hours .pd-modlabel { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pd-soft); }
.pd-hours .pd-small { margin-left: 6px; }
.pd-modcard.locked { background: var(--pd-pale); }
.pd-modcard.locked.exemplar { border-top-color: var(--pd-border); }
.pd-modcard.locked h2 { color: var(--pd-soft); }
.pd-modcard .pd-lock { margin-top: auto; }
.pd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.pd-lessonlist { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.pd-lessonlist li { border: 1px solid var(--pd-border); border-radius: 10px; padding: 10px 14px; background: #fff;
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.pd-lessonlist .n { font-weight: 750; color: var(--pd-teal-dark); font-size: 15px; min-width: 2.6em; }
.pd-lessonlist li:hover:not(.locked) { border-color: var(--pd-teal-line); }
.pd-lessonlist a.t { font-weight: 650; color: var(--pd-ink); text-decoration: none; }
.pd-lessonlist a.t:hover { text-decoration: underline; color: var(--pd-teal-dark); }
.pd-lessonlist li.locked { background: var(--pd-pale); }
.pd-lessonlist .t.off { font-weight: 650; color: var(--pd-soft); }
.pd-lessonlist .note { margin: 2px 0 0; font-size: 13px; color: var(--pd-soft); }

/* Status ladder and artifact */
.pd-ladder { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 10px 0; }
.pd-ladder li { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--pd-border); background: #fff; color: var(--pd-soft); }
.pd-ladder li[aria-current="true"] { background: var(--pd-teal); color: #fff; border-color: var(--pd-teal); font-weight: 700; }
.pd-ladder li.inst::after { content: " (instructor)"; font-size: 10px; opacity: .8; }
.pd-rubric th[scope="row"] { background: #fff; min-width: 120px; }

.pd-tag-todo { display: block; border: 1px dashed #b88b2f; background: #fffaf0; color: #5f4410; padding: 12px 14px;
  border-radius: 8px; font-size: 14px; margin: 10px 0; }
.pd-tag-todo strong { letter-spacing: .02em; }

.pd-nav-lesson { display: flex; justify-content: space-between; gap: 10px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--pd-border); flex-wrap: wrap; }
.pd-nav-lesson .pd-gate-status { flex-basis: 100%; margin: 0; }
.pd-nav-lesson .pd-btn { max-width: 48%; }
.pd-navlabel { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.pd-navtitle { display: block; font-weight: 650; }
button .pd-navlabel, a .pd-navlabel { margin-bottom: 1px; }

/* Module navigation in the lesson sidebar: open lessons read as links, locked ones as muted text. */
.pd-modnav { margin: 0; padding: 0 0 2px; }
.pd-modnav > .pd-small { margin: 0 8px 4px; }
.pd-modnav .pd-rail { margin: 0 8px 8px; }
.pd-modnav ol { counter-reset: none; margin: 4px 0; }
.pd-modnav li a, .pd-modnav li .pd-navlocked { display: flex; gap: 8px; align-items: baseline; padding: 6px 8px; border-radius: 7px; font-size: 13px; }
.pd-modnav li a { color: var(--pd-teal-dark); text-decoration: underline; text-decoration-color: var(--pd-teal-line); text-underline-offset: 3px; }
.pd-modnav li a:hover { text-decoration-color: currentColor; background: #fff; }
.pd-modnav li a[data-state="done"] .pd-mark { color: var(--pd-correct); }
.pd-modnav li .pd-navlocked { color: var(--pd-soft); }
/* The lock marker is still a muted cue, but dark enough to read on the pale sidebar. */
.pd-modnav li .pd-navlocked .pd-mark { color: #6b7a8d; }
.pd-modnav li a[aria-current="page"] { background: #fff; border: 1px solid var(--pd-teal-line); font-weight: 650; color: var(--pd-ink); text-decoration: none; }
.pd-modnav-more { margin: 6px 8px 2px; font-size: 13px; }
.pd-modnav-more a { color: var(--pd-teal-dark); }

/* Module page progress strip */
.pd-modprogress { margin: 18px 0 4px; max-width: 520px; }
.pd-modprogress .pd-btn { margin-top: 10px; }
.pd-lessonlist li.done .n { color: var(--pd-correct); font-size: 17px; }

/* Module page tabs: Overview, Lessons, Resources and Grades on a navy band across the top of the module card, so
   they read as the module's main navigation. The selected tab is a white folder tab joined to the panel below.
   Every lesson page repeats the band as links (.pd-tabs--lesson, below). Tabs are links (a link can open a
   specific tab); the module page's tablist follows the APG pattern with arrow keys. */
.pd-tabs { margin-top: 18px; background: #fff; border: 1px solid var(--pd-border); border-radius: var(--pd-radius); box-shadow: var(--pd-shadow); }
.pd-tablist { display: flex; align-items: flex-end; gap: 4px; padding: 10px 12px 0;
  background: linear-gradient(180deg, #1e3756 0%, var(--pd-navy) 100%);
  border-radius: calc(var(--pd-radius) - 1px) calc(var(--pd-radius) - 1px) 0 0; overflow-x: auto; scrollbar-width: thin; }
.pd a.pd-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 18px;
  border-top: 3px solid transparent; border-radius: 10px 10px 0 0; color: #dce7f0; font-weight: 650; font-size: 15px;
  text-decoration: none; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.pd a.pd-tab:hover { color: #fff; background: rgba(255, 255, 255, .13); }
.pd a.pd-tab[aria-selected="true"] { color: var(--pd-navy); background: #fff; border-top-color: var(--pd-teal); }
.pd a.pd-tab:focus-visible { outline: 3px solid #8fd3cb; outline-offset: -5px; }
.pd a.pd-tab[aria-selected="true"]:focus-visible, .pd a.pd-tab[aria-current="true"]:focus-visible { outline-color: var(--pd-focus); }
.pd-tab-icon { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; }
.pd a.pd-tab[aria-selected="true"] .pd-tab-icon, .pd a.pd-tab[aria-current="true"] .pd-tab-icon { color: var(--pd-teal); }
.pd-tabcount { font-size: 12px; font-weight: 700; line-height: 1; padding: 4px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); color: #fff; }
.pd a.pd-tab[aria-selected="true"] .pd-tabcount, .pd a.pd-tab[aria-current="true"] .pd-tabcount {
  background: var(--pd-teal-wash); color: var(--pd-teal-dark); box-shadow: inset 0 0 0 1px var(--pd-teal-line); }
/* On a lesson page the band stands on its own: the tabs link to the module page, and Lessons is current. */
.pd-tabs--lesson { margin: 0 0 18px; background: none; border: 0; box-shadow: var(--pd-shadow-sm); border-radius: var(--pd-radius); }
.pd-tabs--lesson .pd-tablist { align-items: center; padding: 6px; border-radius: var(--pd-radius); }
.pd-tabs--lesson a.pd-tab { min-height: 42px; border-top: 0; border-radius: 8px; }
.pd-tabs--lesson a.pd-tab[aria-current="true"] { color: var(--pd-navy); background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.pd-tabpanel { padding: 22px 26px 26px; }
.pd-tabpanel[hidden] { display: none; }
.pd-tabpanel:focus-visible { outline-offset: -4px; border-radius: 0 0 var(--pd-radius) var(--pd-radius); }
.pd-panel-h { margin: 0 0 8px; color: var(--pd-ink); font-size: 22px; line-height: 1.22; }
.pd-tabpanel .pd-lede { margin-top: 0; }
.pd-tabpanel h3 { color: var(--pd-ink); font-size: 17px; margin: 24px 0 8px; }
.pd-facts { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 16px 0 0; }
.pd-facts > div { min-width: 0; }
.pd-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--pd-soft); font-weight: 700; }
.pd-facts dd { margin: 2px 0 0; font-size: 17px; font-weight: 700; color: var(--pd-ink); line-height: 1.3; }
/* "Course at a glance" on the course home: five short facts on a flat teal panel, set apart from the white
   module cards by color, by having no shadow, and by a teal bar on each fact. */
.pd-about { background: #e6f3f1; border: 1px solid var(--pd-teal-line); border-radius: var(--pd-radius);
  padding: 14px 20px 12px; margin: 18px 0 22px; }
.pd-about-h { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--pd-teal-dark); font-weight: 700; }
.pd-glance { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 18px; }
.pd-glance li { min-width: 0; padding: 1px 0 1px 12px; border-left: 3px solid var(--pd-teal); }
.pd-glance-v { display: block; font-size: 18px; font-weight: 750; color: var(--pd-navy); line-height: 1.25; }
.pd-glance-l { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--pd-text); }
.pd-about-foot { margin: 12px 0 0; padding-top: 9px; border-top: 1px solid var(--pd-teal-line); font-size: 13px; }
.pd-about-foot a { font-weight: 650; }
.pd-about-foot span[aria-hidden] { margin: 0 6px; color: var(--pd-soft); }
@media (max-width: 1100px) { .pd-glance { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pd-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pd-about { padding: 12px 14px 10px; } .pd-glance-v { font-size: 16px; } }
.pd-enroll-note { color: var(--pd-soft); border-top: 1px dashed var(--pd-border); padding-top: 8px; }
.pd-objectives { padding-left: 20px; margin: 6px 0 0; }
.pd-objectives li { margin: 0 0 6px; }
.pd-grades { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; margin: 16px 0 20px; }
.pd-grade { background: #fff; border: 1px solid var(--pd-border); border-radius: var(--pd-radius); padding: 18px 20px; box-shadow: var(--pd-shadow); }
.pd-grade .pd-eyebrow { margin-bottom: 4px; }
.pd-grade-v { font-size: 26px; font-weight: 750; color: var(--pd-ink); margin: 0 0 6px; line-height: 1.2; }
.pd-grade .pd-small { margin: 0; }
.pd-grade-link { margin: 10px 0 0; font-weight: 650; }
.pd-meter { position: relative; height: 10px; background: #dfe6ed; border-radius: 6px; margin: 8px 0 12px; }
.pd-meter .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--pd-wrong); border-radius: 6px; }
.pd-meter .fill.pass { background: var(--pd-correct); }
.pd-meter .mark { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1px; background: var(--pd-ink); border-radius: 2px; }

/* Module page Resources: the lesson-list rows and callouts, with headings that match them */
.pd-resources { margin: 0; padding: 0; border: 0; }
.pd-resources h2 { margin: 0 0 12px; color: var(--pd-ink); font-size: 22px; line-height: 1.22; }
.pd-resources h3 { margin: 24px 0 4px; color: var(--pd-ink); font-size: 17px; }
.pd-resources .pd-callout h3 { margin-top: 4px; }
.pd-resources .pd-lessonlist .n { min-width: 3.6em; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.pd-resources .pd-prose li { margin: 0 0 8px; }
.pd-exam { margin: 16px 0 8px; }
.pd-device-note { margin: 16px 0 4px; }
.pd-footer { margin-top: 28px; color: var(--pd-soft); font-size: 12px; max-width: 90ch; }
.pd-coursefoot { max-width: 1440px; margin: 0 auto 40px; padding: 16px clamp(16px, 2vw, 32px) 0; border-top: 1px solid var(--pd-border); font-size: 13px; }
.pd-coursefoot a { color: inherit; }
.pd-faqlink { margin: -4px 0 18px; }
.pd-faqtop { margin: 0 0 16px; }
.pd-faq section { margin: 0 0 22px; }
.pd-faq .pd-h2 { margin: 0 0 6px; }
.pd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tablets: tighter gutters and a narrower sidebar. */
@media (max-width: 1023px) {
  .pd-main { padding: 0 18px; margin-top: 20px; }
  .pd-header, .pd-status-banner { padding-left: 18px; padding-right: 18px; }
  .pd-layout { grid-template-columns: minmax(0, 1fr) 270px; gap: 18px; }
  .pd-sheet { padding: 24px; }
  .pd-tabpanel { padding: 18px 20px 22px; }
}

/* Below 900px the lesson sidebar stacks above the lesson as a set of closed disclosures (pd-app.js renders
   them closed at this width), so the contents work as a drawer: open it, choose a section, and it closes. */
@media (max-width: 899px) {
  .pd-header { display: block; }
  .pd-header nav { margin-top: 12px; }
  .pd-layout { grid-template-columns: 1fr; gap: 14px; }
  .pd-sidebar { position: static; order: -1; max-height: none; overflow: visible; padding: 2px 10px; }
  .pd-sidegroup { padding: 2px 0 4px; }
  .pd-sidegroup > summary { min-height: 44px; }
  .pd-toc-list a, .pd-modnav li a, .pd-modnav li .pd-navlocked { min-height: 44px; align-items: center; padding-top: 9px; padding-bottom: 9px; }
  .pd-two { grid-template-columns: 1fr; }
  .pd-lessonlist li { grid-template-columns: auto 1fr; }
  .pd-lessonlist li > .pd-small:last-child { grid-column: 2; }
  .pd-tablist { padding: 8px 8px 0; }
}

/* Phones: 44px tap targets, full-width controls, stacked rows, and tables that scroll inside their box. */
@media (max-width: 600px) {
  .pd-main { padding: 0 16px; margin: 16px auto 48px; }
  .pd-header { padding: 14px 16px; }
  .pd-header .brand { font-size: 16px; }
  .pd-header nav { gap: 4px; }
  .pd-header nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 14px; }
  .pd-status-banner { padding: 9px 16px; }
  .pd-review-banner, .pd-banner-preview { padding: 10px 14px; }
  .pd-crumbs { font-size: 12.5px; }
  h1.pd-title { font-size: 25px; }
  .pd-sheet { padding: 18px 16px 20px; border-radius: 12px; }
  .pd-sheet > h2, .pd-sheet h2.pd-h2, .pd-sheet h1.pd-h2 { font-size: 22px; }
  .pd-sheet h3 { font-size: 17px; }
  .pd-qcard { padding: 14px 14px 12px; }
  fieldset.pd-fs legend, .pd-qcard .pd-label { font-size: 16px; }
  .pd-btn { min-height: 44px; padding: 10px 16px; }
  .pd-controls { gap: 8px; }
  .pd-controls .pd-btn { flex: 1 1 auto; text-align: center; }
  .pd-nav-lesson .pd-btn { max-width: none; flex: 1 1 100%; }
  .pd-nav-lesson .pd-gate-status { order: -2; }
  .pd-nav-lesson .pd-btn.primary { order: -1; }
  .pd textarea, .pd select, .pd input[type="text"], .pd input[type="number"] { min-height: 44px; font-size: 16px; }
  .pd-choice { min-height: 44px; }
  .pd-choice input { width: 20px; height: 20px; margin-top: 2px; }
  .pd-note { font-size: 16px; }
  .pd-note input[type="text"] { width: 60%; min-width: 120px; max-width: 100%; }
  .pd-card { padding: 20px 16px; min-height: 180px; }
  .pd-card .q { font-size: 18px; }
  .pd-tablist { gap: 2px; padding: 6px 4px 0; }
  .pd a.pd-tab { padding: 8px 10px; font-size: 14px; gap: 6px; }
  .pd-tab-icon { display: none; }
  .pd-tabs--lesson .pd-tablist { padding: 4px; }
  .pd-tabpanel { padding: 16px 14px 18px; }
  .pd-panel-h { font-size: 20px; }
  .pd-facts { gap: 10px 20px; }
  .pd-grades { grid-template-columns: 1fr; }
  .pd-grade { padding: 16px; }
  .pd-grade-v { font-size: 23px; }
  .pd-modules { grid-template-columns: 1fr; }
  .pd-modcard { padding: 18px 16px; }
  .pd-lessonlist li { grid-template-columns: 1fr; gap: 4px; padding: 10px 12px; }
  .pd-lessonlist .n { min-width: 0; }
  .pd-lessonlist li > .pd-small:last-child { grid-column: auto; }
  .pd-resources .pd-lessonlist .n { min-width: 0; }
  .pd-table { font-size: 13px; }
  .pd-table th, .pd-table td { padding: 6px 8px; }
  .pd-legend { gap: 8px 14px; }
  body.pd .pd-explorer, body.pd .pd-slide { padding: 14px !important; }
  body.pd .pd-explorer-field { min-width: 100% !important; }
  .pd-explorer-controls { gap: 10px; }
  .pd-ladder li { min-height: 32px; display: inline-flex; align-items: center; }
  .pd-wordbank li { padding: 6px 12px; }
  details.pd-details summary { min-height: 44px; display: flex; align-items: center; }
  .pd-sidegroup .pd-objectives { padding-left: 20px; }
  .pd-footer { font-size: 12px; }
}

/* Small phones (375px and below): the gutters come in one more step. */
@media (max-width: 400px) {
  .pd-main { padding: 0 12px; }
  .pd-sheet { padding: 16px 12px 18px; }
  .pd-tabpanel { padding: 14px 12px 16px; }
  .pd-qcard { padding: 12px 12px 10px; }
  .pd-sidebar { padding: 2px 6px; }
  .pd a.pd-tab { padding: 8px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .pd-rail > div { transition: none; }
  .pd-card.flipping { animation: none; }
  .pd-modcard { transition: none; }
}
@media (forced-colors: active) {
  .pd-choice.sel, .pd-ladder li[aria-current="true"] { outline: 2px solid Highlight; }
}

/* Print / save-as-PDF */
@media print {
  body.pd { background: #fff; font-size: 12pt; }
  .pd-header, .pd-status-banner, .pd-banner-preview, .pd-review-banner, .pd-sidebar, .pd-controls, .pd-nav-lesson, .pd-skip, .pd-noprint, .pd-crumbs { display: none !important; }
  .pd-block[data-type="flashcards"] { display: none !important; } /* interactive review deck; one card on paper is noise */
  .pd-tablist { display: none !important; }
  .pd-tabpanel[hidden] { display: block !important; } /* every module tab prints */
  .pd-tabs { border: 0; box-shadow: none; }
  .pd-tabpanel { padding: 0 0 18pt; }
  .pd-layout { display: block; }
  .pd-sheet { border: 0; box-shadow: none; padding: 0; }
  .pd-qcard { box-shadow: none; background: #fff; }
  .pd-feedback.right, .pd-feedback.bad { background: #fff; }
  .pd-main { margin: 0; padding: 0; max-width: none; }
  .pd textarea { border: 1px solid #000; min-height: 0; height: auto; }
  details.pd-details { display: block; }
  details.pd-details > * { display: block; }
  .pd-printonly { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}
.pd-printonly { display: none; }