/* Shared reading components: loaded on the public site and in Gutenberg.
   No document overflow, fixed heights, scroll handlers or hidden content. */
:root {
  --sai-reading: 48rem;
  --sai-reading-wide: 80rem;
  --sai-reading-gap: 1.15rem;
  --sai-reading-block: 2rem;
  --sai-reading-radius: .8rem;
  --sai-reading-border: #d6e1d9;
  --sai-reading-accent: #087568;
  --sai-reading-muted: #53685e;
}

/* One text measure, a separate deliberate wide measure for data and columns. */
.sai-editorial { box-sizing: border-box; width: min(calc(100% - 2 * var(--sai-gutter, 1.1rem)), var(--sai-reading)); margin: 3rem auto; padding-inline: 0; }
.sai-section > :is(h2, h3, h4, h5, h6, p, ul, ol, blockquote, dl, pre, hr, .wp-block-pullquote, .wp-block-details, .sai-work-card, .is-style-workshop-panel, .is-style-evidence-note, .is-style-important) {
  box-sizing: border-box;
  width: min(100%, var(--sai-reading));
  max-width: var(--sai-reading);
  margin-inline: auto !important;
}
.sai-section > :is(.sai-rubric-wrap, .sai-table-wrap, .wp-block-table) {
  width: min(100%, var(--sai-reading));
  max-width: var(--sai-reading);
  margin-inline: auto !important;
}
.sai-section > .alignwide { width: min(100%, var(--sai-reading-wide)); max-width: var(--sai-reading-wide); }
.sai-section > p:not(.is-style-takeaway) { padding-inline: 0; }
:is(.sai-section, .sai-note, .sai-work-card, .sai-editorial, .editor-styles-wrapper) :where(p, li, dd) { line-height: 1.75; }
:is(.sai-section, .sai-note, .sai-editorial, .editor-styles-wrapper) > p { margin-block: var(--sai-reading-gap); }
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) > :is(h2, h3, h4) { margin-top: 2.5rem; margin-bottom: 1rem; text-wrap: balance; }
:is(.sai-section, .sai-editorial) > :first-child { margin-top: 0; }
:is(.sai-section, .sai-editorial) > :last-child { margin-bottom: 0; }
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) > :is(h2, h3, h4) + :is(p, ul, ol) { margin-top: 0; }
.editor-styles-wrapper :is(h2, h3, h4) { font-family: var(--wp--preset--font-family--display, "Instrument Sans"), sans-serif; font-weight: 650; }

/* Native markers preserve start, reversed, value and nested list semantics. */
:is(.sai-section, .sai-note, .sai-work-card, .sai-editorial, .editor-styles-wrapper) :where(ul, ol):not([class]) {
  margin-block: 1.25rem;
  padding-inline-start: 1.55rem;
}
:where(.sai-section, .sai-note, .sai-work-card, .sai-editorial, .editor-styles-wrapper) .wp-block-list { padding-inline-start: 1.55rem; margin-block: 1.25rem; }
:is(.sai-section, .sai-note, .sai-editorial, .editor-styles-wrapper) :where(li) { padding-inline-start: .3rem; margin-block: .45rem; }
:is(.sai-section, .sai-note, .sai-editorial, .editor-styles-wrapper) li::marker { color: var(--sai-reading-accent); font-weight: 650; }
:is(.sai-section, .sai-note, .sai-editorial, .editor-styles-wrapper) li > :is(ul, ol) { margin-block: .5rem .75rem; }
:is(.sai-section, .sai-note, .sai-editorial, .editor-styles-wrapper) li > p { margin-block: .5rem; }
:is(.sai-program, .sai-module-list, ol.is-style-steps) {
  padding: 0 0 0 3rem;
  margin-block: var(--sai-reading-block);
  list-style: decimal-leading-zero outside;
}
:is(.sai-program, .sai-module-list, ol.is-style-steps) > li {
  position: relative;
  box-sizing: border-box;
  min-height: 4.5rem;
  margin-block: 0;
  padding: 1.1rem .85rem 1.1rem .7rem;
  border-top: 1px solid var(--sai-reading-border);
  transition: background-color 180ms ease;
}
:is(.sai-program, .sai-module-list, ol.is-style-steps) > li:last-child { border-bottom: 1px solid var(--sai-reading-border); }
:is(.sai-program, .sai-module-list, ol.is-style-steps) > li::marker { font-size: .8rem; font-weight: 700; color: var(--sai-reading-accent); font-variant-numeric: tabular-nums; }
:is(.sai-program, .sai-module-list, ol.is-style-steps) > li:focus-within { background: #eef5ef; }
:is(.sai-program, .sai-module-list) > li > a { font-weight: 650; }
ul.is-style-steps { list-style: square; padding-inline-start: 1.55rem; }
ul.is-style-checklist { list-style: square; padding-inline-start: 1.6rem; }
ul.is-style-checklist > li { padding: .55rem .4rem; margin-block: 0; border-bottom: 1px solid var(--sai-reading-border); }

/* Inline emphasis stays distinct from an actionable link. */
:is(.sai-section, .sai-note, .sai-work-card, .sai-editorial, .editor-styles-wrapper) :is(p, li, dd, blockquote, figcaption) a:not(.wp-element-button) {
  color: #087568;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: #77a99b;
  text-underline-offset: .2em;
  text-decoration-skip-ink: auto;
  overflow-wrap: anywhere;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
:is(.sai-section, .sai-note, .sai-editorial, .editor-styles-wrapper) :is(p, li, dd, blockquote, figcaption) a:hover { color: #174a37; text-decoration-color: currentColor; }
:is(.sai-section, .sai-note, .sai-editorial, .editor-styles-wrapper) :is(a, summary):focus-visible { outline: 2px solid #b65734; outline-offset: 4px; border-radius: .15rem; }
:is(.sai-section, .sai-note, .sai-editorial, .editor-styles-wrapper) strong { font-weight: 700; }
:is(.sai-section, .sai-note, .sai-editorial, .editor-styles-wrapper) mark { background: #deeee0; color: #183d2d; padding: .06em .18em; border-radius: .15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
:is(.sai-section, .sai-note, .sai-editorial, .editor-styles-wrapper) u { text-decoration-color: #7c8f81; text-decoration-thickness: .08em; text-underline-offset: .18em; }
:is(.sai-section, .sai-note, .sai-editorial, .editor-styles-wrapper) small { font-size: .85rem; line-height: 1.6; }
.is-style-lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.7; color: var(--sai-reading-muted); }
p.is-style-takeaway { padding: 1.25rem 1.5rem; margin-block: var(--sai-reading-block); border-left: 3px solid var(--sai-reading-accent); border-radius: 0 var(--sai-reading-radius) var(--sai-reading-radius) 0; background: #eef5ed; color: #234734; font-size: 1.1rem; font-weight: 550; }

/* Quotes never inject a fake quotation or author. The editor supplies a cite. */
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) blockquote,
blockquote.wp-block-quote.is-style-editorial {
  margin-block: var(--sai-reading-block);
  padding: 1.5rem 1.75rem;
  border: 0;
  border-inline-start: 3px solid var(--sai-reading-accent);
  border-radius: 0 var(--sai-reading-radius) var(--sai-reading-radius) 0;
  background: #f0f5ef;
  color: #294c39;
  font-family: var(--wp--preset--font-family--display, "Instrument Sans"), sans-serif;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-weight: 450;
  line-height: 1.6;
}
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) blockquote > p { margin: 0 0 .85rem; font-size: inherit; line-height: inherit; }
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) blockquote > :last-child { margin-bottom: 0; }
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) cite { display: block; margin-top: 1rem; color: var(--sai-reading-muted); font-family: var(--wp--preset--font-family--interface, Manrope), sans-serif; font-size: .85rem; line-height: 1.6; font-style: normal; }
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) .wp-block-pullquote { padding: 2rem 0; border-block: 1px solid var(--sai-reading-border); }
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) .wp-block-pullquote blockquote { margin: 0; padding: 0; background: none; border: 0; text-align: center; font-size: clamp(1.4rem, 2.5vw, 2rem); }

/* Notes share padding, corners and vertical rhythm, not a fixed text height. */
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) :is(.sai-work-card, .is-style-workshop-panel, .is-style-evidence-note, .is-style-important) {
  box-sizing: border-box;
  margin-block: var(--sai-reading-block);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--sai-reading-border);
  border-inline-start: 3px solid var(--sai-reading-accent);
  border-radius: var(--sai-reading-radius);
  background: #fffefb;
  box-shadow: 0 4px 18px #173b3206;
  color: #294438;
}
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) .is-style-evidence-note { background: #f1f5f0; border-inline-start-color: #788e78; }
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) .is-style-important { background: #fff6ee; border-inline-start-color: #b7623d; }
:is(.sai-work-card, .is-style-workshop-panel, .is-style-evidence-note, .is-style-important) > :first-child { margin-top: 0; }
:is(.sai-work-card, .is-style-workshop-panel, .is-style-evidence-note, .is-style-important) > :last-child { margin-bottom: 0; }
:is(.sai-work-card, .is-style-workshop-panel, .is-style-evidence-note, .is-style-important) > :is(p, ul, ol) { margin-block: .8rem; }
.sai-work-card::before { font-size: .75rem; font-weight: 600; letter-spacing: .08em; color: #677b68; }

/* Code, keyboard keys, source captions and a quiet reading break. */
:is(.sai-section, .sai-note, .sai-editorial, .editor-styles-wrapper) :not(pre) > code { padding: .12em .3em; border: 1px solid #dce5dc; border-radius: .3rem; background: #f0f4ed; color: #294d37; font-family: var(--wp--preset--font-family--mono, monospace); font-size: .85em; overflow-wrap: anywhere; }
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) pre { box-sizing: border-box; padding: 1.25rem; margin-block: var(--sai-reading-block); border: 1px solid #dce5dc; border-radius: var(--sai-reading-radius); background: #f5f7f2; color: #284736; font-size: .9rem; line-height: 1.7; overflow-x: auto; }
.sai-work-card pre { white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--sai-reading-border); font-family: var(--wp--preset--font-family--mono, monospace); }
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) kbd { padding: .12em .4em; border: 1px solid #b9c8bc; border-bottom-width: 2px; border-radius: .25rem; background: white; color: #294438; font-size: .82em; }
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) figcaption { padding-top: .6rem; color: var(--sai-reading-muted); font-size: .85rem; line-height: 1.6; }
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) hr,
hr.is-style-reading-break { height: 0; margin-block: 2.5rem; border: 0; border-top: 1px solid var(--sai-reading-border); opacity: 1; }
hr.is-style-reading-break { max-width: 6rem; margin-inline: auto; border-top-width: 2px; border-color: #96b39c; }
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) dl { margin-block: 1.5rem; }
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) dt { margin-top: 1rem; font-weight: 650; }
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) dd { margin: .3rem 0 1rem; color: var(--sai-reading-muted); }

/* Table text can wrap; only the table container scrolls if truly necessary. */
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) :is(.wp-block-table, .sai-rubric-wrap, .sai-table-wrap) { margin-block: var(--sai-reading-block); border: 1px solid var(--sai-reading-border); border-radius: var(--sai-reading-radius); background: #fff; box-shadow: none; overflow-x: auto; }
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) :is(.wp-block-table, .sai-rubric-wrap, .sai-table-wrap) table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: .95rem; line-height: 1.65; }
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) :is(th, td) { padding: 1rem 1.15rem; border: 0; border-bottom: 1px solid var(--sai-reading-border); vertical-align: top; text-align: start; }
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) th { background: #edf3eb; font-weight: 650; letter-spacing: 0; font-size: .85rem; }
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) thead { border-bottom: 0; }
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) tbody th { background: #f7f9f5; font-size: .95rem; font-weight: 550; }
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) tbody tr:last-child > :is(th, td) { border-bottom: 0; }
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) .wp-block-table figcaption { padding: .8rem 1rem; border-top: 1px solid var(--sai-reading-border); }

/* The real YouTube player stays in normal document flow, without autoplay. */
.sai-course-video { box-sizing: border-box; width: min(100%, var(--sai-reading)); margin: 2.5rem auto; padding-block: 1.5rem; border-block: 1px solid var(--sai-reading-border); scroll-margin-top: 7rem; }
.sai-course-video h3 { margin-block: .6rem 1rem; font-size: clamp(1.25rem, 2.2vw, 1.65rem); line-height: 1.3; }
.sai-course-video__player { display: block; width: 100%; height: auto; min-height: 200px; aspect-ratio: 16 / 9; border: 0; border-radius: .8rem; background: #152c28; margin-top: 1.25rem; }
.sai-course-video__meta, .sai-course-video__external, .sai-course-video__lessons { font-size: .875rem; line-height: 1.65; }
.sai-course-video__meta { color: var(--sai-reading-muted); }

/* Native disclosure: no replacement for browser keyboard or scrolling. */
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) details.wp-block-details { margin-block: 1.25rem; padding: 0; border: 1px solid var(--sai-reading-border); border-radius: var(--sai-reading-radius); background: #fffefb; }
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) details.wp-block-details > summary { padding: 1rem 1.25rem; cursor: pointer; font-weight: 600; font-size: 1rem; line-height: 1.5; color: #294c38; }
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) details.wp-block-details > summary::marker { color: var(--sai-reading-accent); font-size: .8em; }
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) details.wp-block-details > :not(summary) { margin: 0 1.25rem 1.25rem; }
:is(.sai-section, .sai-editorial, .editor-styles-wrapper) details[open].wp-block-details > summary { border-bottom: 1px solid var(--sai-reading-border); margin-bottom: 1rem; }
.sai-section--contrast { --sai-reading-accent: #c4edd5; --sai-reading-border: #537466; }
.sai-section--contrast :is(p, li, dd) a:not(.wp-element-button) { color: #c4edd5; }
@media (hover: hover) {
  :is(.sai-program, .sai-module-list) > li:has(a):hover { background: #f2f7f0; }
  :is(.sai-section, .sai-editorial, .editor-styles-wrapper) details.wp-block-details > summary:hover { background: #f1f6ef; }
}
@media (max-width: 640px) {
  :root { --sai-reading-gap: 1rem; --sai-reading-block: 1.5rem; }
  :is(.sai-program, .sai-module-list, ol.is-style-steps) { padding-inline-start: 2.1rem; }
  :is(.sai-program, .sai-module-list, ol.is-style-steps) > li { padding: .9rem .3rem .9rem .4rem; }
  :is(.sai-section, .sai-editorial, .editor-styles-wrapper) blockquote { padding: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.sai-program, .sai-module-list, ol.is-style-steps) > li,
  :is(.sai-section, .sai-note, .sai-editorial, .editor-styles-wrapper) a { transition: none; }
}