/* ===== SELF-HOSTED FONTS ===== */
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-serif-display-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-serif-display-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'OpenDyslexic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/opendyslexic-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'OpenDyslexic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/opendyslexic-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'OpenDyslexic';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/opendyslexic-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'OpenDyslexic';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/opendyslexic-bolditalic.woff2') format('woff2');
}
/* Source Sans Pro (light theme — Cosmo). Latin subset only.
   unicode-range matches Google Fonts' served latin subset for these faces;
   chars outside the range fall through the font-family cascade to system
   sans-serif (covers `ū` in references-appendix and any future macron'd
   text without needing latin-ext). */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/source-sans-pro-300.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-sans-pro-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/source-sans-pro-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Lato (dark theme — Darkly). Latin subset only. */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== VISUALLY HIDDEN UTILITY ===== */
/* Standard pattern for content that must be available to screen readers
   but not shown visually. Used for:
   - Persistent live regions (announced state updates)
   - Icon-only button labels (preserved as accessible names)

   Bootstrap 5 (shipped via Cosmo) also defines .visually-hidden, with
   !important on every property. For the shared properties Bootstrap's
   rule wins the cascade — in practice harmless because both patterns
   produce identical behaviour. Our clip-path: inset(50%) does add
   value: Bootstrap only declares the deprecated clip: rect(...), so
   our declaration is what gives modern browsers the supported
   property. If we ever need to diverge from Bootstrap's semantics on
   the shared properties, this rule will need !important to win.

   Apply by adding the class directly in HTML/JS. For cases where
   visibility is conditional (e.g. viewport-dependent), toggle the class
   from JS via matchMedia rather than duplicating the rule in a media
   query. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===== SKIP-TO-CONTENT LINK ===== */
.skip-link {
  position: fixed;
  top: -40px;
  left: 0;
  padding: 8px 16px;
  z-index: 1050;
  background: #000;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ===== COSMO GRAY-TEXT CONTRAST OVERRIDES ===== */
/* Cosmo ships several grayed-out text styles that fall fractionally short of
   WCAG AA's 4.5:1 threshold on white:
     - `.blockquote`   at hsl(210, 10.3%, 47.7%)   → ~4.39:1
     - `caption`       at rgba(52,58,64,.75)       → ~4.39:1
     - `.figure-caption` at rgba(52,58,64,.75)     → ~4.39:1
   Bumping to the theme's own gray-700 token lifts contrast to ~7.9:1 while
   keeping these elements distinguishably lighter than body text at #343a40.
   Quarto emits `<blockquote class="blockquote">` — the class selector matches
   Cosmo's `.blockquote` rule specificity, then wins by source order.
   `.column-margin figcaption` is listed explicitly because Quarto's bundled
   CSS targets it at higher specificity (0,2,0) than the bare `figcaption`
   selector (0,0,1). */
blockquote,
.blockquote,
caption,
.figure-caption,
figcaption,
.column-margin figcaption,
.margin-caption,
div.aside,
aside,
.column-margin {
  color: var(--bs-gray-700, #495057);
}

/* Cosmo's `.btn-primary` ships #2780e3, giving 3.97:1 against white — below
   WCAG AA. Darkening to #1a6fd0 lifts contrast to ~4.96:1 while staying
   visually close to the theme's signature blue. Hover/focus/active tracks
   the same proportional shift, and `--bs-btn-focus-shadow-rgb` is re-pointed
   so the focus glow matches the new colour rather than Cosmo's default. */
.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled {
  background-color: #1a6fd0;
  border-color: #1a6fd0;
  --bs-btn-focus-shadow-rgb: 26, 111, 208;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: #1560b8;
  border-color: #1560b8;
}

/* ===== DESIGN TOKENS ===== */
:root {
  --color-funnel: #3366cc;
  --color-dice: #a64c1f;
  --color-outcome: #cc0000;
  --color-bg-light: #f9f9f9;
  --color-border-gray: #999;
  --color-highlight-green: #90ee90;
  --color-callout-emphasis: #ffe0e0;
}

/* ===== CALLOUT COMPONENTS ===== */
/* Each typed callout pairs a visible ::before icon (non-color cue for
   colorblind readers, WCAG 1.4.1) with role="note" aria-label="…" on
   the element itself (screen-reader announcement). The icon glyph is
   suppressed from assistive tech via the CSS Generated Content Level 3
   alt-text syntax — `content: "X " / ""` — so modern screen readers
   announce only the aria-label, not the glyph name (e.g. "diamond").
   Browser support: Chrome 101+, Firefox 108+, Safari 17+. Older
   browsers fall back to announcing the glyph alongside the aria-label,
   which is verbose but not incorrect. */
.return_callout {
  background-color: #b6dde8;
  border: 2px solid black;
  text-align: center;
  min-height: 40px;
  line-height: 1.4;
  padding: 10px;
  font-size: 15px;
  margin-bottom: 15px;
  font-style: italic;
}
.return_callout::before {
  content: "▶ " / "";
  font-style: normal;
  font-weight: bold;
}
/* Default link blue against the .return_callout background (#b6dde8) only
   hits 3.71:1 — below WCAG AA's 4.5:1 floor. Use a darker shade for callout
   links specifically so prose-on-white links stay unchanged. */
.return_callout a {
  color: #1852d4;
}

.arrival_callout {
  background-color: #e8f5e9;
  padding: 1em;
  border-radius: 4px;
  margin: 1em 0;
}

.principle_callout,
.aside_callout {
  background-color: #c2d69b;
  border: 2px solid black;
  text-align: center;
  min-height: 40px;
  line-height: 1.4;
  padding: 10px;
  font-size: 15px;
  margin-bottom: 15px;
  font-style: italic;
}
.principle_callout::before {
  content: "◆ " / "";
  font-style: normal;
  font-weight: bold;
}
.aside_callout::before {
  content: "✎ " / "";
  font-style: normal;
  font-weight: bold;
}
/* Default link blue against the .principle_callout/.aside_callout background
   (#c2d69b) only hits 3.43:1 — below WCAG AA's 4.5:1 floor. Use a darker
   shade for callout links specifically so prose-on-white links stay
   unchanged. */
.principle_callout a,
.aside_callout a {
  color: #124cce;
}

/* ===== FLOATING BOX COMPONENTS ===== */
/*
Usage:
- For floating content boxes (with border/background):
  <div class="float-box"><div class="float-box-content">...content...</div></div>
- For floating images (no border/background):
  <div class="float-box"><img ... /></div>
- Use .float-box-right for right alignment.
*/
.float-box {
  float: left;
  width: 300px;
  margin: 0 1.5em 1em 0;
  box-sizing: border-box;
}
.float-box-right {
  float: right;
  width: 300px;
  margin: 0 0 1em 1.5em;
  box-sizing: border-box;
}
.float-box-content {
  border: 2px solid #333;
  padding: 1em;
  background: var(--color-bg-light);
  border-radius: 8px;
}
@media (max-width: 700px) {
  .float-box, .float-box-right {
    float: none;
    width: 100%;
    margin: 1em 0;
  }
}

/* Quarto's `.columns` is a flex grid with no built-in mobile breakpoint — a
   `width="30%"` column stays at 30% on a 390px phone, crushing the text
   column and stretching whitespace below short images/charts. Stack to
   single-column at the same 700px breakpoint as `.float-box` for a
   consistent responsive boundary across the site. `!important` is required
   to override Quarto's inline `style="width: ..."` on each child column,
   and to win against Quarto's bundled `display: flex` on `.columns`. */
@media (max-width: 700px) {
  .columns {
    display: block !important;
  }
  .columns > .column {
    width: 100% !important;
  }
}

/* ===== CONTENT STYLES ===== */
.neave_note {
  text-align: left;
  font-family: serif;
  margin: 20px 0;
  line-height: 1.6;
  font-size: 16px;
  color: #333;
}

.deming_quote {
  color: #0000b3;
  font-weight: bold;
  font-style: italic;
  border-left: 3px solid #0000b3;
  padding-left: 0.5em;
}

.deming_blue {
  color: #0000b3;
}

.foreman-remark {
  display: block;
  font-family: 'Georgia', 'Palatino Linotype', 'Book Antiqua', serif;
  font-size: 1.2em;
  color: #3333a6; /* navy blue */
  font-style: italic;
  font-weight: bold;
  text-align: center;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  letter-spacing: 0.5px;
}

.foreman-transcript {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  margin: 1.5em 0;
  padding: 1em 1.25em;
  border-left: 4px solid #3333a6;
  background-color: #f5f5fa;
}

.foreman-transcript-entry {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  padding: 0.5em 0;
  border-bottom: 1px dashed #c8c8d6;
}

.foreman-transcript-entry:last-child {
  border-bottom: none;
}

.foreman-transcript-context {
  font-size: 0.9em;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.foreman-transcript-entry .foreman-remark {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

.foreman-transcript-empty {
  margin: 1em 0;
  padding: 0.75em 1em;
  color: #555;
  background-color: #f5f5fa;
  border-left: 4px solid #c8c8d6;
}

/* ===== THOUGHT COMPONENTS ===== */
.thought {
  border: 2px solid #008000;
  padding: 10px;
  margin: 20px;
}

.thought h2 {
  color: #006600;
  text-align: center;
}

.thought_commentary {
  border: 2px dashed #ff0000;
  padding: 10px;
  margin: 20px;
}

.thought_commentary h2 {
  color: var(--color-outcome);
  text-align: center;
}

.thought_commentary .collapse {
  background-color: #ffe0e0;
  border: 2px dashed #ff0000;
  padding: 10px;
  margin: 20px;
}

/* ===== TECHNICAL AID COMPONENT ===== */
.technical_aid {
  border: 2px solid #000000;
  background-color: #e4deec;
  padding: 10px;
  margin: 20px;
}
.technical_aid h1, .technical_aid h2, .technical_aid h3 {
  color: #000000;
  text-align: center;
}
.technical_aid h1::before,
.technical_aid h2::before,
.technical_aid h3::before {
  content: "⚙ " / "";
  margin-right: 0.25em;
}

.technical_aid a {
  color: #1f59db;
}

/* ===== LAYOUT COMPONENTS ===== */
.cell {
  margin: 20px;
}

.activity_afterthought {
  font-style: italic;
  text-align: right;
  font-size: 16px;
  max-width: 80%;
  margin-left: auto;
  margin-right: 0;
}

/* ===== SEPARATOR COMPONENTS ===== */
.separator {
  height: 40px;
  background-color: #ff0000;
  border: 5px solid #000000;
  padding: 5px;
}

.separator_white {
  background-color: #ffffff;
  height: 20px;
  padding: 5px;
}

.separator_blue {
  background-color: #0000ff;
  height: 10px;
}

/* ===== MAJOR ACTIVITY TITLE ===== */
.major_activity_title {
  background-color: #66ccff;
  border-radius: 30px;
  border: 4px solid black;
  display: block;
  width: fit-content;
  margin: 20px auto;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.major_activity_title h2 {
  margin: 2px 0;
  padding: 10px 30px 10px 45px;
  border: 0;
  color: black;
  font-family: 'DM Serif Display';
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

/* ===== UTILITY CLASSES ===== */
.mt-sm { margin-top: 10px; }
.mt-md { margin-top: 20px; }
.spacer-sm  { margin-top: 50px; }
.spacer-md  { margin-top: 100px; }
.spacer-lg  { margin-top: 175px; }
.spacer-xl  { margin-top: 300px; }
.spacer-2xl { margin-top: 400px; }
.spacer-3xl { margin-top: 600px; }
.spacer-4xl { margin-top: 1300px; }
.text-highlight-red { color: var(--color-outcome); font-weight: bold; }
.blue-text { color: #0000a0; }
.data-sequence-mono { text-align: center; font-family: monospace; }
/* Backstop for the <meta name="format-detection" content="telephone=no">
   in _quarto.yml (#588). That meta tag is a Mobile-Safari-only convention;
   other iOS browsers (Firefox, DuckDuckGo, ...) embed WebKit via WKWebView
   with their own app-level data-detector config and don't honour a page's
   opt-out, so number sequences like Day 3 Technical Aid 6's
   "13 19 18 14 16 12 21 18 17 22" (#583) still get wrapped in a real
   `<a href="tel:...">` there. No content on this site is an intentional
   tel: link (confirmed by grep in #588), so neutralising every tel: link
   site-wide is safe. */
a[href^="tel:"] {
  color: inherit;
  text-decoration: inherit;
  pointer-events: none;
}
.table-cell-highlight { background: var(--color-highlight-green); font-weight: bold; }
.callout-emphasis {
  background-color: var(--color-callout-emphasis);
  padding: 15px;
  margin: 20px 0;
  text-align: center;
  font-style: italic;
  font-weight: bold;
}
.callout-emphasis::before {
  content: "★ " / "";
  font-style: normal;
}
.centered-bold-callout {
  text-align: center;
  font-weight: bold;
  margin: 20px 40px;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Mobile styles (max-width: 768px) */
@media (max-width: 768px) {
  /* Form elements */
  input[type="text"], 
  input[type="email"], 
  input[type="password"], 
  textarea, 
  select {
    font-size: 16px !important;
  }
  
  textarea {
    min-height: 120px;
    padding: 12px;
    border-radius: 8px;
    border: 2px solid #ddd;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
  }
  
  /* Touch targets */
  button, 
  .major_activity_title,
  input[type="button"],
  input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 16px;
  }
  
  /* Layout adjustments */
  .cell svg {
    transform: scale(0.7);
    transform-origin: center;
    margin: 10px auto;
    display: block;
  }
  
  .cell {
    margin: 15px 10px;
  }
  
  /* Callout adjustments */
  .return_callout,
  .principle_callout,
  .aside_callout {
    margin: 10px 5px;
    font-size: 14px;
  }

  /* Thought boxes */
  .thought,
  .thought_commentary {
    margin: 15px 10px;
    padding: 15px;
  }
  
  /* Large spacers: reduce on mobile to avoid huge blank gaps */
  .spacer-2xl { margin-top: 100px; }
  .spacer-3xl { margin-top: 150px; }
  .spacer-4xl { margin-top: 200px; }

  /* Activity titles */
  .major_activity_title {
    margin: 15px auto;
    border-radius: 20px;
  }
  
  .major_activity_title h2 {
    font-size: 20px;
    padding: 12px 20px;
  }
  
  /* Typography */
  body {
    font-size: 16px;
    line-height: 1.6;
  }
  
  h1, h2, h3, h4, h5, h6 {
    margin: 20px 0 15px 0;
  }
  
  p {
    margin-bottom: 15px;
  }

  /* Funnel experiment mobile overrides */
  .fe-data-table {
    font-size: 12px;
  }
  .fe-data-table td:first-child,
  .fe-data-table th:first-child {
    min-width: 100px;
  }
  .fe-button {
    display: block;
    width: 100%;
    margin: 6px 0;
    padding: 14px;
    font-size: 16px;
  }
  .fe-comparison-grid {
    grid-template-columns: 1fr;
  }
  .fe-status {
    font-size: 13px;
  }
}

/* Tablet styles (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .cell svg {
    transform: scale(0.85);
    transform-origin: center;
    margin: 15px auto;
    display: block;
  }
  
  textarea {
    min-height: 100px;
    padding: 10px;
  }
  
  .major_activity_title h2 {
    font-size: 22px;
    padding: 12px 25px;
  }
}

/* Desktop styles (1025px+) */
@media (min-width: 1025px) {
  .cell svg {
    margin: 20px auto;
    display: block;
  }
  
  textarea {
    min-height: 80px;
    padding: 8px;
  }
}

/* ===== ACCESSIBILITY ===== */

/* Focus indicators */
textarea:focus,
input:focus,
button:focus,
.major_activity_title:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* High contrast mode. The standardised values for `prefers-contrast` are
   `no-preference | more | less | custom` — the legacy draft values
   `high`/`low` were dropped during standardisation and Firefox treats them
   as invalid, silently skipping the whole rule. Use `more` so the
   high-contrast overrides actually fire when a user has requested
   "increase contrast" at the OS level. */
@media (prefers-contrast: more) {
  .deming_quote {
    color: #000080;
    font-weight: bold;
    border-left-color: #000080;
  }
  
  .thought {
    border: 3px solid #006600;
  }
  
  .thought_commentary {
    border: 3px dashed var(--color-outcome);
  }

  .thought_commentary .collapse {
    border: 3px dashed var(--color-outcome);
  }

  .reading-prefs-toggle,
  .reading-prefs-panel {
    border-width: 3px;
  }
  .reading-prefs-control,
  .reading-prefs-feedback-link {
    border-width: 2px;
  }
  .reading-prefs-control[aria-pressed="true"] {
    outline: 2px solid currentColor;
    outline-offset: 1px;
  }

  .feedback-prompt {
    border-width: 3px;
  }
  .feedback-prompt-cta,
  .feedback-prompt-dismiss {
    border-width: 2px;
  }

  .chapter-rating-btn,
  .chapter-rating-send,
  .chapter-rating-skip {
    border-width: 2px;
  }
  /* Forced-colors modes flatten the filled/unfilled distinction the chosen
     thumb relies on, so restore it with an outline rather than a colour. */
  .chapter-rating-btn.is-chosen {
    outline: 2px solid currentColor;
    outline-offset: 1px;
  }
  .chapter-rating-detail-text {
    border-width: 2px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.analysis_box_title {
  display: block;
  font-weight: bold;
  color: #000;
  font-size: 1.3em;
  text-align: center;
  margin-bottom: 0.5em;
  letter-spacing: 0.5px;
}

/* ===== FUNNEL EXPERIMENT ===== */

/* Track container — horizontal scroll on narrow screens */
.fe-track-container {
  overflow-x: auto;
  margin: 1.5em 0;
  text-align: center;
}
.fe-track-container svg {
  display: inline-block;
  /* Override the mobile/tablet `.cell svg` scale-down below — this SVG
     already handles narrow screens via the container's horizontal
     scroll, so shrinking it on top of that just makes it illegible. */
  transform: none;
}

/* Data tables */
.fe-data-table {
  border-collapse: collapse;
  font-size: 13px;
  margin: 1em 0;
  width: 100%;
  overflow-x: auto;
  display: block;
}
.fe-data-table th,
.fe-data-table td {
  border: 1px solid var(--color-border-gray);
  padding: 3px 6px;
  text-align: center;
  white-space: nowrap;
}
.fe-data-table th {
  background: #f0f0f0;
  font-weight: bold;
}
.fe-data-table td:first-child,
.fe-data-table th:first-child {
  text-align: left;
  font-weight: bold;
  background: var(--color-bg-light);
  min-width: 140px;
  position: sticky;
  left: 0;
  z-index: 1;
}
/* Outcome row: yellow background, dark red text */
.fe-data-table .fe-row-outcome td,
.fe-data-table .fe-row-outcome th {
  background-color: #ffff99;
  color: #8b0000;
  font-weight: bold;
}

/* Funnel / dice-score / marble in text — Neave's own colour key, printed p39:
   the funnel in blue, the dice-score in brown, the marble (and thus the
   outcome or result) in red. */
.fe-funnel {
  color: var(--color-funnel);
  font-weight: bold;
}
.fe-marble {
  color: var(--color-outcome);
  font-weight: bold;
}
.fe-dice {
  color: var(--color-dice);
  font-weight: bold;
}
/* Status bar value colors (replaces inline styles) */
.fe-outcome-value {
  color: #990000;
}
.fe-funnel-value {
  color: #1a4d99;
}

/* Action buttons */
.fe-button {
  display: inline-block;
  padding: 10px 24px;
  margin: 6px 8px 6px 0;
  font-size: 15px;
  min-height: 44px;
  font-weight: bold;
  color: #fff;
  background-color: var(--color-funnel);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s;
}
.fe-button:hover {
  background-color: #2851a3;
}
.fe-button:disabled {
  background-color: #aaa;
  cursor: default;
}
.fe-button-complete {
  background-color: #1e7e34;
}
.fe-button-complete:hover {
  background-color: #155d26;
}
.fe-button-reset {
  background-color: #dc3545;
}
.fe-button-reset:hover {
  background-color: #b02a37;
}
.fe-button:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Status bar */
.fe-status {
  background: #f0f4ff;
  border: 1px solid #ccd;
  border-radius: 6px;
  padding: 10px 16px;
  margin: 1em 0;
  font-size: 14px;
  line-height: 1.6;
}
.fe-status strong {
  color: #333;
}

/* Persistent live region for screen reader announcements. Kept in the DOM
   across OJS re-renders so status updates are reliably announced (the
   visible .fe-status is replaced on each render). Hiding styles come from
   the .visually-hidden utility class applied in funnel-experiment.js. */

/* Comparison grid (2×2 charts) */
.fe-comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 1.5em 0;
}
.fe-comparison-grid > div {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1em;
  background: #fafafa;
}

/* Summary statistics table — container scrolls horizontally on narrow
   screens instead of the table shrinking or spilling past the page edge
   (same pattern as .fe-track-container above). Centering comes from the
   table's own margin: auto (a <table> is block-level, unlike
   .fe-track-container's inline-block svg, so text-align here would do
   nothing). The table carries no vertical margin of its own — overflow-x:
   auto makes this container a block formatting context, which stops a
   child's margin from collapsing into the container's, so a margin on
   both would stack into visibly doubled spacing instead. */
.fe-summary-table-container {
  overflow-x: auto;
  margin: 1em 0;
}
.fe-summary-table {
  border-collapse: collapse;
  margin: 0 auto;
  font-size: 14px;
}
.fe-summary-table th,
.fe-summary-table td {
  border: 1px solid var(--color-border-gray);
  padding: 6px 14px;
  text-align: center;
}
.fe-summary-table th {
  background: #e8e8e8;
  font-weight: bold;
}

/* ===== MATH DISPLAY ===== */

/* Display-math overflow on narrow viewports (#584). Long $$...$$ equations
   (e.g. the moving-range calculations in Day 3's Technical Aid 6, and the
   tagged/aligned equations in the optional-extras Part F technical section)
   render at their natural width regardless of the column width. MathJax v3's
   CHTML output wraps each display equation in <mjx-container display="true">
   with no width constraint of its own, so on a narrow screen the inner
   <mjx-math> overflows that box and bleeds into the page's own horizontal
   scroll instead of staying contained — confirmed by inspecting the actual
   rendered DOM under the MathJax v3 pin (_quarto.yml, #514), not assumed.
   Same containment technique as the Funnel Experiment track above: scroll
   the box, don't let it blow out the layout.

   Tagged/labelled equations (\tag*{...}, used throughout the optional-extras
   Part F technical section) additionally switch MathJax's CHTML output to
   `display: flex` and set an inline `min-width` (in em units) sized to fit
   the equation and its tag on one line without wrapping. min-width always
   wins over max-width in CSS's box-sizing algorithm regardless of selector
   specificity, so without overriding it a long tagged equation's min-width
   forces the container itself wider than the text column — defeating
   max-width: 100% below and spilling past the column, since ancestors don't
   clip. The !important is required to beat that inline min-width (a
   non-important author stylesheet declaration is the one case that can
   still out-rank a non-important inline style); it zeroes the container back
   down to the column width so it falls back to the overflow-x: auto
   scrollbox like every other display equation. */
mjx-container[display="true"] {
  overflow-x: auto;
  max-width: 100%;
  min-width: 0 !important;
}

/* Inline math (e.g. "So $\overline{MR} = (6 + 1 + ... ) \div 9 = ...$." in
   Day 3 Technical Aid 6) overflows too, and the [display="true"] rule above
   doesn't reach it — MathJax only sets that attribute on $$...$$ equations.
   A bare <mjx-container> is an unrecognised custom element, which defaults
   to `display: inline`; the CSS overflow property only takes effect on
   block containers (block or inline-block boxes), so overflow-x: auto is a
   no-op without forcing inline-block here first. */
mjx-container:not([display="true"]) {
  display: inline-block;
  overflow-x: auto;
  max-width: 100%;
}

/* ===== DYSLEXIA-FRIENDLY FONT TOGGLE ===== */
/* The inline head script sets .dyslexic-font on <html> before paint
   (FOUC prevention); the toggle handler keeps html+body in lockstep.
   All selectors scope to html.dyslexic-font — body is always in sync. */
@media not print {
  html.dyslexic-font body,
  html.dyslexic-font body h1, html.dyslexic-font body h2, html.dyslexic-font body h3,
  html.dyslexic-font body h4, html.dyslexic-font body h5, html.dyslexic-font body h6,
  html.dyslexic-font body p, html.dyslexic-font body li,
  html.dyslexic-font body td, html.dyslexic-font body th,
  html.dyslexic-font body label, html.dyslexic-font body button,
  html.dyslexic-font body input, html.dyslexic-font body textarea,
  html.dyslexic-font body .callout, html.dyslexic-font body blockquote {
    font-family: 'OpenDyslexic', sans-serif;
  }

  /* Preserve monospace for code and data tables — OpenDyslexic kills readability there */
  html.dyslexic-font body code,
  html.dyslexic-font body pre,
  html.dyslexic-font body .cell pre,
  html.dyslexic-font body .data-sequence-mono,
  html.dyslexic-font body .fe-data-table,
  html.dyslexic-font body .fe-data-table th,
  html.dyslexic-font body .fe-data-table td,
  html.dyslexic-font body .fe-summary-table,
  html.dyslexic-font body .fe-summary-table th,
  html.dyslexic-font body .fe-summary-table td {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }

  /* Breathing room for OpenDyslexic — taller glyphs need more line-height
     and fixed-height containers need to flex so wrapped text doesn't overflow. */
  html.dyslexic-font body {
    line-height: 1.7;
  }
  html.dyslexic-font body .return_callout,
  html.dyslexic-font body .principle_callout,
  html.dyslexic-font body .aside_callout {
    line-height: 1.5;
    padding: 8px 14px;
  }
  html.dyslexic-font body .page-navigation .nav-page,
  html.dyslexic-font body .page-navigation .chapter-title {
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ===== READING PREFERENCES PANEL =====
   A single discoverable corner trigger that opens a panel containing all
   reading-preference toggles (theme, dyslexia font, future controls).
   Replaces the standalone dyslexia toggle and Quarto's navbar dark-mode
   link so users have one canonical entry point. */

.reading-prefs-toggle {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 1040;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #3333a6;
  background-color: #fff;
  border: 2px solid #3333a6;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: opacity 200ms ease, transform 200ms ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.reading-prefs-toggle:hover {
  background-color: #e8e8f4;
}
.reading-prefs-toggle:focus-visible {
  outline: 3px solid #ffbf00;
  outline-offset: 2px;
}
.reading-prefs-toggle[aria-expanded="true"] {
  background-color: #3333a6;
  color: #fff;
}
.reading-prefs-toggle .reading-prefs-toggle-icon {
  font-weight: 700;
}
.reading-prefs-toggle.is-yielding {
  opacity: 0;
  transform: translateY(120%);
  pointer-events: none;
  /* visibility:hidden drops the toggle from the tab order while it's
     off-screen and invisible (WCAG 2.4.7 / 2.4.11). */
  visibility: hidden;
}

.reading-prefs-panel {
  position: fixed;
  bottom: 72px;
  right: 16px;
  z-index: 1041;
  min-width: 240px;
  padding: 14px 16px;
  background-color: #fff;
  border: 2px solid #3333a6;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  font-size: 14px;
  color: #222;
}
.reading-prefs-panel.is-yielding {
  display: none;
}

.reading-prefs-title {
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #3333a6;
}

.reading-prefs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}
.reading-prefs-row + .reading-prefs-row {
  border-top: 1px solid #e0e0ea;
}
.reading-prefs-row-label {
  font-weight: 600;
}

.reading-prefs-control {
  min-height: 32px;
  min-width: 64px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #3333a6;
  background-color: #fff;
  border: 1px solid #3333a6;
  border-radius: 4px;
  cursor: pointer;
}
.reading-prefs-control:hover {
  background-color: #e8e8f4;
}
.reading-prefs-control:focus-visible {
  outline: 3px solid #ffbf00;
  outline-offset: 2px;
}
.reading-prefs-control[aria-pressed="true"] {
  background-color: #3333a6;
  color: #fff;
}
.reading-prefs-control[aria-pressed="true"]:hover {
  background-color: #262680;
}

/* Feedback row link inside the panel. Styled to match the toggle controls,
   but it is a mailto navigation link rather than a toggle. */
.reading-prefs-feedback-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #3333a6;
  background-color: #fff;
  border: 1px solid #3333a6;
  border-radius: 4px;
  text-decoration: none;
}
.reading-prefs-feedback-link:hover {
  background-color: #e8e8f4;
  text-decoration: none;
}
.reading-prefs-feedback-link:focus-visible {
  outline: 3px solid #ffbf00;
  outline-offset: 2px;
}
.reading-prefs-feedback-arrow {
  font-weight: 700;
}

/* Hide Quarto's navbar dark-mode toggle: the panel is now the single
   reading-preferences entry point. The link still emits in HTML so its
   handler (window.quartoToggleColorScheme) remains wired. */
.quarto-color-scheme-toggle { display: none !important; }

@media (max-width: 700px) {
  .reading-prefs-toggle {
    padding: 10px;
    min-width: 44px;
  }
  .reading-prefs-toggle .reading-prefs-toggle-label {
    /* On narrow viewports the trigger collapses to icon-only; the
       button retains aria-label="Preferences" so screen readers
       still announce it. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .reading-prefs-panel {
    left: 16px;
    right: 16px;
    min-width: 0;
  }
}

@media print {
  .reading-prefs-toggle,
  .reading-prefs-panel { display: none !important; }
}

/* ===== FEEDBACK PROMPT =====
   Dismissible inline block inviting feedback/testimonials, rendered in
   normal document flow (never fixed/floating) so it needs no focus trap
   and reaches screen readers in natural reading order. It's page chrome
   rather than course content, so it borrows the reading-prefs indigo
   identity instead of a pedagogical callout colour. Trigger logic lives in
   #459; this file only covers markup, styling and the dismiss control. */

.feedback-prompt {
  margin: 1.5em 0;
  padding: 1em 1.25em;
  background-color: #fff;
  border: 2px solid #3333a6;
  border-radius: 8px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 250ms ease, transform 250ms ease;
}
.feedback-prompt.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.feedback-prompt-heading {
  margin: 0 0 0.4em 0;
  font-size: 1.05em;
  font-weight: 700;
  color: #3333a6;
}

.feedback-prompt-body {
  margin: 0 0 0.9em 0;
  font-size: 0.95em;
  color: #222;
}

.feedback-prompt-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.feedback-prompt-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background-color: #3333a6;
  border: 2px solid #3333a6;
  border-radius: 6px;
  text-decoration: none;
}
.feedback-prompt-cta:hover {
  background-color: #262680;
  text-decoration: none;
}
.feedback-prompt-cta:focus-visible {
  outline: 3px solid #ffbf00;
  outline-offset: 2px;
}

/* Text-label dismiss control (not a bare "×"), sized to the same 44px
   target as the CTA button per WCAG 2.5.8. */
.feedback-prompt-dismiss {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #3333a6;
  background-color: #fff;
  border: 2px solid #3333a6;
  border-radius: 6px;
  cursor: pointer;
}
.feedback-prompt-dismiss:hover {
  background-color: #e8e8f4;
}
.feedback-prompt-dismiss:focus-visible {
  outline: 3px solid #ffbf00;
  outline-offset: 2px;
}

@media print {
  .feedback-prompt { display: none !important; }
}

/* share-your-experience.qmd (#452) reuses .feedback-prompt-cta for its own
   CTA so the "ask" reads visually the same whether a reader arrives via
   the inline prompt or lands on the page directly. It just needs separation
   from the preceding paragraph, which inline-flex doesn't get for free. */
#share-form-view .feedback-prompt-cta {
  margin-top: 0.5em;
}

/* ===== CHAPTER RATING =====
   Inline thumbs up/down appended to every chapter (#494). Deliberately much
   lighter than .feedback-prompt above: that block is an occasional boxed
   callout, this one is on all ~60 chapters, so it reads as a quiet rule at
   the foot of the text rather than another thing competing for attention.
   Same indigo chrome identity, no fill and no border box. */

.chapter-rating {
  margin: 2.5em 0 0;
  padding-top: 1em;
  border-top: 1px solid #d0d0e0;
}

/* Programmatic focus target only (tabindex="-1"), used to keep the reader's
   place after the detail form is removed. :focus-visible still gets a ring
   if it somehow receives keyboard focus — this only drops the ring for the
   scripted case, where a stray outline would look like a rendering bug. */
.chapter-rating:focus:not(:focus-visible) {
  outline: none;
}

.chapter-rating-question {
  margin: 0 0 0.6em 0;
  font-size: 0.95em;
  font-weight: 600;
  color: #3333a6;
}

.chapter-rating-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.chapter-rating-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #3333a6;
  background-color: #fff;
  border: 2px solid #3333a6;
  border-radius: 6px;
  cursor: pointer;
}
.chapter-rating-btn:hover {
  background-color: #e8e8f4;
}
.chapter-rating-btn:focus-visible {
  outline: 3px solid #ffbf00;
  outline-offset: 2px;
}
.chapter-rating-btn.is-chosen {
  color: #fff;
  background-color: #3333a6;
}
/* Once a rating is recorded both buttons stop responding, so they should
   stop inviting a click. Not the `disabled` attribute — see markChosen()
   in chapter-rating.js for why that would cost the reader their focus. */
.chapter-rating-btn[aria-disabled="true"] {
  cursor: default;
}
.chapter-rating-btn[aria-disabled="true"]:not(.is-chosen):hover {
  background-color: #fff;
}
.chapter-rating-btn[aria-disabled="true"].is-chosen:hover {
  background-color: #3333a6;
}

.chapter-rating-icon {
  font-size: 1.15em;
  line-height: 1;
}

.chapter-rating-detail {
  margin-top: 1em;
}

.chapter-rating-detail-label {
  display: block;
  margin-bottom: 0.2em;
  font-size: 0.95em;
  font-weight: 600;
  color: #222;
}

.chapter-rating-detail-hint {
  margin: 0 0 0.5em 0;
  font-size: 0.85em;
  color: #555;
}

.chapter-rating-detail-text {
  display: block;
  /* Bootstrap's global reset already sets this, so nothing renders wrong
     today — declared anyway because width:100% plus horizontal padding is
     exactly the combination that breaks if that reset ever stops applying,
     and .float-box above takes the same belt-and-braces approach. */
  box-sizing: border-box;
  width: 100%;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.95em;
  color: #222;
  background-color: #fff;
  /* 7.0:1 against white — comfortably past the 3:1 that WCAG 1.4.11 asks
     of a form control's boundary. */
  border: 1px solid #595959;
  border-radius: 4px;
}
.chapter-rating-detail-text:focus-visible {
  outline: 3px solid #ffbf00;
  outline-offset: 2px;
}

.chapter-rating-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 0.75em;
}

.chapter-rating-send,
.chapter-rating-skip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  border: 2px solid #3333a6;
  border-radius: 6px;
  cursor: pointer;
}
.chapter-rating-send {
  color: #fff;
  background-color: #3333a6;
}
.chapter-rating-send:hover {
  background-color: #262680;
}
.chapter-rating-skip {
  color: #3333a6;
  background-color: #fff;
}
.chapter-rating-skip:hover {
  background-color: #e8e8f4;
}
.chapter-rating-send:focus-visible,
.chapter-rating-skip:focus-visible {
  outline: 3px solid #ffbf00;
  outline-offset: 2px;
}
.chapter-rating-send[aria-disabled="true"] {
  cursor: default;
  background-color: #6666bb;
}

.chapter-rating-failed {
  margin: 0 0 0.5em 0;
  font-size: 0.9em;
  color: #222;
}

.chapter-rating-failed-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #3333a6;
  background-color: #fff;
  border: 2px solid #3333a6;
  border-radius: 6px;
  text-decoration: none;
}
.chapter-rating-failed-cta:hover {
  background-color: #e8e8f4;
  text-decoration: none;
}
.chapter-rating-failed-cta:focus-visible {
  outline: 3px solid #ffbf00;
  outline-offset: 2px;
}

@media print {
  .chapter-rating { display: none !important; }
}

.reading-time {
  margin-top: -0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  color: var(--bs-secondary-color, #6c757d);
  font-style: italic;
  /* The longest form of this indicator — reading time, Neave's pace,
     and a Stats-level 0 parenthetical — runs ~70 characters and wraps
     to two or three lines on a phone. Let it wrap: `nowrap` would push
     the page into horizontal scroll, which is worse than a wrapped
     subtitle. `pretty` just discourages a lone orphaned word on the
     last line, and is ignored where unsupported. */
  text-wrap: pretty;
}

@media print {
  .reading-time { display: none !important; }
}

/* Glossary terms: <dfn id="…"> marks the first defining instance of a
   course-glossary term (definitions live in the appendix glossary).
   The user-agent default is italic, but Neave's prose already uses
   italic for emphasis — letting both render the same erases that
   distinction. We override to upright and apply a 2px solid amber
   underline: thicker than the 1px link underline and a non-link hue,
   so the mark reads as "noted term" rather than "interactive thing". */
dfn {
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: #d97706;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

/* ===== DARK MODE OVERRIDES ===== */
/* Quarto's dual-theme config (`theme: { light: cosmo, dark: darkly }`)
   swaps the active Bootswatch stylesheet and adds `.quarto-dark` to
   <body>. We target that class to re-skin hard-coded light-mode
   colours for readable contrast on darkly's ~#222 body background.
   PNG figures retain their original rendering — visible but not
   re-themed.
   Scoped to `@media not print` so hard-copy output from dark mode
   still prints the original light palette (dark-mode text values like
   #e4f0f5 would otherwise ghost on white paper). */
@media not print {

body.quarto-dark {
  /* Retune design tokens for dark backgrounds. */
  --color-bg-light: #2c2c2c;
  --color-callout-emphasis: #4a1e1e;
  --color-outcome: #ff6666;
  --color-funnel: #6699ff;
  --color-dice: #e08858;
  --color-highlight-green: #2d5c2d;
  --color-border-gray: #666;
}

/* Callout strips */
body.quarto-dark .return_callout {
  background-color: #1a3a4a;
  color: #e4f0f5;
  border-color: #6699ff;
}
body.quarto-dark .arrival_callout {
  background-color: #1e3a22;
  color: #e4f0e6;
}
body.quarto-dark .principle_callout,
body.quarto-dark .aside_callout {
  background-color: #3a4a2a;
  color: #eef0e4;
}
body.quarto-dark .callout-emphasis {
  color: #ffd7d7;
}

/* Content styles */
body.quarto-dark .neave_note {
  color: #e4e4e4;
}
body.quarto-dark .deming_quote {
  color: #8fa8ff;
  border-left-color: #8fa8ff;
}
body.quarto-dark .deming_blue {
  color: #8fa8ff;
}
body.quarto-dark .blue-text {
  color: #8fa8ff;
}
body.quarto-dark .analysis_box_title {
  color: #f0f0f0;
}
body.quarto-dark .text-highlight-red {
  color: var(--color-outcome);
}

/* Foreman transcript */
body.quarto-dark .foreman-remark {
  color: #b0b0e6;
}
body.quarto-dark .foreman-transcript {
  background-color: #2a2a3a;
  border-left-color: #b0b0e6;
}
body.quarto-dark .foreman-transcript-entry {
  border-bottom-color: #555566;
}
body.quarto-dark .foreman-transcript-context {
  color: #c0c0c8;
}
body.quarto-dark .foreman-transcript-empty {
  background-color: #2a2a3a;
  color: #c0c0c8;
  border-left-color: #555566;
}

/* Thought and commentary boxes */
body.quarto-dark .thought {
  border-color: #66cc66;
}
body.quarto-dark .thought h2 {
  color: #99e699;
}
body.quarto-dark .thought_commentary {
  border-color: #ff6666;
}
body.quarto-dark .thought_commentary .collapse {
  background-color: var(--color-callout-emphasis);
  border-color: #ff6666;
  color: #ffd7d7;
}

/* Technical aid callout */
body.quarto-dark .technical_aid {
  background-color: #2a283a;
  border-color: #ccc;
  color: #f0f0f0;
}
body.quarto-dark .technical_aid h1,
body.quarto-dark .technical_aid h2,
body.quarto-dark .technical_aid h3 {
  color: #f0f0f0;
}
body.quarto-dark .technical_aid a {
  color: #8fa8ff;
}

/* Separator strips */
body.quarto-dark .separator_white {
  background-color: #3a3a3a;
}

/* Major activity title: bright cyan with black text reads well on
   either background, so only the outer border needs lifting. */
body.quarto-dark .major_activity_title {
  border-color: #ccc;
}

/* Highlighted table cell: dark-green wash keeps text legible without
   fighting the dark body. */
body.quarto-dark .table-cell-highlight {
  background: var(--color-highlight-green);
  color: #e4f5e4;
}

/* Funnel experiment */
body.quarto-dark .fe-data-table th {
  background: #3a3a3a;
  color: #f0f0f0;
}
body.quarto-dark .fe-data-table td:first-child,
body.quarto-dark .fe-data-table th:first-child {
  background: var(--color-bg-light);
  color: #f0f0f0;
}
body.quarto-dark .fe-data-table .fe-row-outcome td,
body.quarto-dark .fe-data-table .fe-row-outcome th {
  background-color: #4a4a1e;
  color: #ffd080;
}
body.quarto-dark .fe-status {
  background: #2a2a3a;
  border-color: #555;
  color: #f0f0f0;
}
body.quarto-dark .fe-status strong {
  color: #f0f0f0;
}
body.quarto-dark .fe-comparison-grid > div {
  background: #2a2a2a;
  border-color: #444;
}
body.quarto-dark .fe-summary-table th {
  background: #3a3a3a;
  color: #f0f0f0;
}
body.quarto-dark .fe-outcome-value {
  color: #ff8080;
}
body.quarto-dark .fe-funnel-value {
  color: #8fa8ff;
}

/* Float-box content: border and bg need to separate from body. */
body.quarto-dark .float-box-content {
  border-color: #666;
  background: var(--color-bg-light);
}

/* Reading preferences panel: fixed in the bottom-right, must stay
   discoverable without blasting white on a dark page. */
body.quarto-dark .reading-prefs-toggle {
  color: #b0b0e6;
  background-color: #1a1a26;
  border-color: #8fa8ff;
}
body.quarto-dark .reading-prefs-toggle:hover {
  background-color: #2a2a3a;
}
body.quarto-dark .reading-prefs-toggle[aria-expanded="true"] {
  background-color: #3333a6;
  color: #fff;
}
body.quarto-dark .reading-prefs-panel {
  background-color: #1a1a26;
  border-color: #8fa8ff;
  color: #e4e4e4;
}
body.quarto-dark .reading-prefs-title {
  color: #b0b0e6;
}
body.quarto-dark .reading-prefs-row + .reading-prefs-row {
  border-top-color: #3a3a4a;
}
body.quarto-dark .reading-prefs-control {
  color: #b0b0e6;
  background-color: #1a1a26;
  border-color: #8fa8ff;
}
body.quarto-dark .reading-prefs-control:hover {
  background-color: #2a2a3a;
}
body.quarto-dark .reading-prefs-control[aria-pressed="true"] {
  background-color: #3333a6;
  color: #fff;
}
body.quarto-dark .reading-prefs-control[aria-pressed="true"]:hover {
  background-color: #4040c0;
}

/* Feedback link: same dark palette as the reading-prefs controls. */
body.quarto-dark .reading-prefs-feedback-link {
  color: #b0b0e6;
  background-color: #1a1a26;
  border-color: #8fa8ff;
}
body.quarto-dark .reading-prefs-feedback-link:hover {
  background-color: #2a2a3a;
}

/* Feedback prompt: same indigo-on-dark palette as the reading-prefs panel,
   with the CTA inverted (solid fill) so it still reads as the primary
   action against the dark background. */
body.quarto-dark .feedback-prompt {
  background-color: #1a1a26;
  border-color: #8fa8ff;
}
body.quarto-dark .feedback-prompt-heading {
  color: #b0b0e6;
}
body.quarto-dark .feedback-prompt-body {
  color: #e4e4e4;
}
body.quarto-dark .feedback-prompt-cta {
  color: #1a1a26;
  background-color: #8fa8ff;
  border-color: #8fa8ff;
}
body.quarto-dark .feedback-prompt-cta:hover {
  background-color: #a8bdff;
}
body.quarto-dark .feedback-prompt-dismiss {
  color: #b0b0e6;
  background-color: #1a1a26;
  border-color: #8fa8ff;
}
body.quarto-dark .feedback-prompt-dismiss:hover {
  background-color: #2a2a3a;
}

/* Chapter rating: same indigo-on-dark palette, with the chosen thumb
   inverted to a solid fill exactly as the prompt's CTA is. */
body.quarto-dark .chapter-rating {
  border-top-color: #3a3a4a;
}
body.quarto-dark .chapter-rating-question {
  color: #b0b0e6;
}
body.quarto-dark .chapter-rating-btn,
body.quarto-dark .chapter-rating-skip,
body.quarto-dark .chapter-rating-failed-cta {
  color: #b0b0e6;
  background-color: #1a1a26;
  border-color: #8fa8ff;
}
body.quarto-dark .chapter-rating-btn:hover,
body.quarto-dark .chapter-rating-skip:hover,
body.quarto-dark .chapter-rating-failed-cta:hover {
  background-color: #2a2a3a;
}
body.quarto-dark .chapter-rating-btn.is-chosen,
body.quarto-dark .chapter-rating-send {
  color: #1a1a26;
  background-color: #8fa8ff;
  border-color: #8fa8ff;
}
body.quarto-dark .chapter-rating-btn.is-chosen:hover,
body.quarto-dark .chapter-rating-send:hover {
  background-color: #a8bdff;
}
body.quarto-dark .chapter-rating-btn[aria-disabled="true"]:not(.is-chosen):hover {
  background-color: #1a1a26;
}
body.quarto-dark .chapter-rating-btn[aria-disabled="true"].is-chosen:hover {
  background-color: #8fa8ff;
}
body.quarto-dark .chapter-rating-send[aria-disabled="true"] {
  background-color: #6f83c9;
}
body.quarto-dark .chapter-rating-detail-label,
body.quarto-dark .chapter-rating-failed {
  color: #e4e4e4;
}
body.quarto-dark .chapter-rating-detail-hint {
  color: #b8b8b8;
}
body.quarto-dark .chapter-rating-detail-text {
  color: #e4e4e4;
  background-color: #1a1a26;
  border-color: #8f8fa6;
}

/* Glossary terms: brighten the amber underline for legibility against
   the darkly #222 body. */
body.quarto-dark dfn {
  text-decoration-color: #fbbf24;
}

/* Inline-styled colours. A small number of .qmd pages use inline
   `style="color: blue"` or `style="color:#c0392b"` spans for emphasis
   (see `content/appendix/optional-extras/06-part-f-technical.qmd` for
   the reference-tag convention). Inline styles win over class rules,
   so we target them explicitly — `!important` is required to defeat
   the element-level declaration. */
body.quarto-dark [style*="color: blue"],
body.quarto-dark [style*="color:blue"] {
  color: #8fa8ff !important;
}
body.quarto-dark [style*="color:#c0392b"],
body.quarto-dark [style*="color: #c0392b"] {
  color: #ff9b8f !important;
}

/* Focus indicators. The light-mode outline `#0066cc` gives ~2.7:1
   against darkly's #222 body — below WCAG 2.2 SC 2.4.11's 3:1 floor.
   Brighten to the dark palette's `#6699ff` (~6.6:1) to restore it. */
body.quarto-dark textarea:focus,
body.quarto-dark input:focus,
body.quarto-dark button:focus,
body.quarto-dark .major_activity_title:focus,
body.quarto-dark .fe-button:focus-visible {
  outline-color: #6699ff;
}

/* R-generated chart figures (svglite-emitted SVGs, embedded as
   `<img src="…svg">` inside Quarto's `.cell-output-display` wrapper).
   We can't reach into img-wrapped SVG with CSS selectors, so we use
   the `invert + hue-rotate` filter idiom instead: invert flips
   brightness (black axis ink ↔ light grey, white bg ↔ dark bg) while
   the 180° hue-rotate cancels the hue shift caused by invert, so
   chromatic ink (red data line, blue control limits) stays roughly
   on-hue through the round-trip. See the conventions block at the top
   of R/functions/main-functions.R for the colour-token contract.
   Scoped to `.cell-output-display img[src$=".svg"]` so it only touches
   R chart outputs (which always live inside that Quarto wrapper) and
   not e.g. an SVG icon dropped elsewhere on the page. */
body.quarto-dark .cell-output-display img[src$=".svg"] {
  /* Sits inside the surrounding `@media not print` so transparent-bg
     SVGs print without the inversion (original axis ink on white paper
     is what we want for hard copy). */
  filter: invert(1) hue-rotate(180deg);
}

} /* end @media not print */

/* High-contrast preference inside dark mode. Combined with
   `not print` so the HC reinforcements also step out of the way on
   paper. */
@media not print and (prefers-contrast: high) {
  body.quarto-dark .deming_quote {
    color: #c8d4ff;
    border-left-color: #c8d4ff;
  }
  body.quarto-dark .thought {
    border-color: #99e699;
  }
  body.quarto-dark .thought_commentary {
    border-color: #ff9999;
  }
  body.quarto-dark .thought_commentary .collapse {
    border-color: #ff9999;
  }
  body.quarto-dark .foreman-transcript {
    border-left-color: #c8d4ff;
  }
  body.quarto-dark .return_callout {
    border-color: #c8d4ff;
  }
  body.quarto-dark .reading-prefs-toggle,
  body.quarto-dark .reading-prefs-panel {
    border-color: #c8d4ff;
  }
  body.quarto-dark .reading-prefs-control,
  body.quarto-dark .reading-prefs-feedback-link {
    border-color: #c8d4ff;
  }
}