/* ============================================================================
   course-components.css  —  Shared component look-and-feel for all HSCI modules
   ----------------------------------------------------------------------------
   Single source of truth for the repeated UI components across HSCI 130, 230,
   341, 410 and 841. Linked LAST in every module (immediately before </body>)
   so that, at equal specificity, these rules win over any drifted inline CSS.

   All rules reference the shared :root palette already defined in every module
   (--teal, --green, --dark-teal, --grey, --very-light-teal, --light-green,
    --radius, --shadow, --shadow-lg, --text, --text-light, --accent, etc.),
   so nothing here hard-codes a theme colour except the deliberately faint
   greys used as neutral surfaces.

   Canonical references:
     • Learning-objectives box  → HSCI 130 L1 S1  (.info-box.green)
     • Flash-card popup         → HSCI 230 L1 S2  (.flip-card / .card-modal*)
     • Tabbed content           → HSCI 341 L1 S2  (.tabs) + faint grey surface
   ============================================================================ */


/* ── 1. Learning-objectives box & info boxes ─────────────────────────────────
   The green variant is the standard "Learning Objectives" container shown after
   the Introduction and Overview block on every section. */
.info-box        { border-radius: var(--radius); padding: 24px; margin: 24px 0; border-left: 4px solid var(--teal); }
.info-box.teal   { background: var(--very-light-teal); border-color: var(--teal); }
.info-box.green  { background: var(--light-green);     border-color: var(--green); }
.info-box.rose   { background: var(--light-rose);      border-color: var(--accent); }
.info-box.amber  { background: #FFF8E1;                border-color: #FFA000; }
.info-box h4         { font-size: 15px; font-weight: 700; margin-bottom: 10px; color: var(--dark-teal); }
.info-box.green h4   { color: var(--green); }
.info-box .box-title { font-weight: 700; margin-bottom: 6px; color: inherit; }
.info-box ul     { margin: 0 0 0 22px; padding: 0; }
.info-box li     { margin-bottom: 5px; }


/* ── 2. Flash cards (popup style) ────────────────────────────────────────────
   Face = title + hint on a teal gradient tile; click opens a centred modal. */
.flip-grid,
.flip-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px; margin: 24px 0;
}
.flip-card {
  cursor: pointer; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s;
  background: linear-gradient(135deg, rgba(11,123,107,0.9), rgba(6,92,80,0.95)), url('../bg_texture.jpg') center/cover no-repeat;
  color: #fff; padding: 24px 18px; text-align: center; min-height: 100px;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.flip-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* Standard face markup is <span class="card-title"> + <span class="card-hint">.
   .card-label / .card-icon are legacy faces kept here as a visual safety net:
   the label is styled like a title and the "+" icon is hidden, so any face that
   was not converted still matches the standard look. */
.flip-card .card-title,
.flip-card .card-label { font-weight: 600; font-size: 15px; line-height: 1.4; color: #fff; }
.flip-card .card-hint  { position: absolute; bottom: 8px; left: 0; right: 0; font-size: 11px; opacity: 0.6; }
.flip-card .card-icon  { display: none; }

/* Modal */
.card-modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 200; align-items: center; justify-content: center; padding: 24px;
  animation: fadeIn 0.2s ease;
}
.card-modal-overlay.show { display: flex; }
.card-modal {
  background: #fff; border-radius: 16px; max-width: 520px; width: 100%;
  box-shadow: var(--shadow-lg); overflow: hidden; animation: fadeIn 0.3s ease;
  max-height: 80vh; display: flex; flex-direction: column;
}
.card-modal-header {
  background: linear-gradient(135deg, rgba(11,123,107,0.92), rgba(6,92,80,0.95)), url('../bg_texture.jpg') center/cover no-repeat;
  color: #fff; padding: 24px 28px; position: relative;
}
.card-modal-header h3 { font-size: 18px; font-weight: 700; margin: 0; color: #fff; }
.card-modal-close {
  position: absolute; top: 12px; right: 16px; background: rgba(255,255,255,0.2);
  border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%;
  font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.card-modal-close:hover { background: rgba(255,255,255,0.35); }
.card-modal-body { padding: 24px 28px; font-size: 15px; line-height: 1.7; color: var(--text); overflow-y: auto; }


/* ── 3. Tabbed content (bordered, faint grey surface) ────────────────────────
   341 L1 tab styling, set on a very faint light-grey surface as requested. */
.tabs {
  margin: 24px 0;
  background: #F6F7F8;
  border: 1px solid var(--grey);
  border-radius: var(--radius);
  padding: 8px 8px 0;
}
.tab-buttons {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 2px solid var(--grey);
  padding-bottom: 0; margin-bottom: 0;
}
.tab-btn {
  padding: 10px 18px; border: none; background: none; cursor: pointer;
  font-size: 13.5px; font-weight: 500; color: var(--text-light);
  border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s;
  border-radius: 8px 8px 0 0;
}
.tab-btn:hover { background: var(--very-light-teal); color: var(--dark-teal); }
.tab-btn.active { color: var(--dark-teal); border-bottom-color: var(--accent); font-weight: 600; background: var(--very-light-teal); }
.tab-panel {
  display: none; padding: 24px;
  background: #FCFCFD;
  border: 1px solid var(--grey); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: 15px; line-height: 1.7;
}
.tab-panel.active { display: block; animation: fadeIn 0.3s ease; }


/* ── 4. Other shared components (standardized for consistency) ───────────────
   Accordion, data tables and glossary entries had drifted between courses;
   these pin them to one look. Reflection boxes, R-boxes and quizzes carry
   interactive state styling and are intentionally left to each module. */

/* Accordion */
.accordion { margin: 24px 0; }
.accordion-item { border: 1px solid var(--grey); border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; background: var(--white); }
.accordion-header {
  padding: 16px 20px; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; font-weight: 600; font-size: 15px;
  transition: background 0.2s; user-select: none;
}
.accordion-header:hover { background: var(--very-light-teal); }
.accordion-header .arrow { transition: transform 0.3s; font-size: 12px; color: var(--accent); }
.accordion-item.open .accordion-header { background: var(--very-light-teal); color: var(--dark-teal); }
.accordion-item.open .accordion-header .arrow { transform: rotate(180deg); }
.accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.accordion-body-inner { padding: 0 20px 20px; font-size: 15px; line-height: 1.7; color: var(--text-light); }

/* Data tables */
.data-table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 14px; }
.data-table th { background: var(--dark-teal); color: #fff; padding: 10px 14px; text-align: left; font-weight: 600; }
.data-table td { padding: 10px 14px; border-bottom: 1px solid var(--grey); }
.data-table tr:nth-child(even) { background: var(--very-light-teal); }
.data-table .highlight { background: var(--light-amber); font-weight: 600; }

/* Glossary entries */
.glossary-entry {
  background: var(--white);
  border-left: 3px solid var(--teal);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px; margin-bottom: 8px;
  box-shadow: var(--shadow);
  transition: transform 0.15s, border-left-color 0.15s;
}
.glossary-entry:hover { transform: translateX(2px); }
.glossary-entry.glossary-person  { border-left-color: var(--accent); }
.glossary-entry.glossary-concept { border-left-color: var(--teal); }
.glossary-entry.glossary-method  { border-left-color: var(--purple); }
.glossary-entry .glossary-term {
  display: block; font-weight: 700; color: var(--dark-teal);
  font-size: 15.5px; margin-bottom: 4px;
}
.glossary-entry.glossary-person .glossary-term { color: var(--accent-dark); }
.glossary-entry .glossary-def { font-size: 14.5px; color: var(--text); line-height: 1.6; }
.glossary-entry.hidden { display: none; }


/* ============================================================================
   SWEEP ADDITIONS (2026-06-12) — shared house-style components
   Added by the editorial sweep. Linked last, so these win at equal specificity.
   ============================================================================ */

/* ── A. External-link house style ───────────────────────────────────────────
   Links are NOT coloured. The linked text keeps the surrounding text colour and
   is marked with a dotted underline only. Applies to every external link in the
   reading column and on slides. (Inline color/text-decoration on a link still
   wins over this — the sweep strips those inline styles so this rule governs.) */
.module-body a[href^="http"],
.module-body a.cite,
.module-body a.ext,
.av-slide a[href^="http"],
.av-slide a.cite {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none;
}
.module-body a[href^="http"]:hover,
.module-body a.cite:hover,
.module-body a.ext:hover {
  border-bottom-color: var(--teal, #0B7B6B);
  border-bottom-style: solid;
}
.av-slide a[href^="http"]:hover, .av-slide a.cite:hover { border-bottom-style: solid; }

/* ── A2. Text links inside lessons (2026-10-10) ─────────────────────────────
   Section A covered external links only, so links to other lessons, data files
   and walkthroughs fell back to the browser default (blue, solid underline,
   purple once visited). Every plain text link on a lesson page now follows the
   house style: the colour of the surrounding text and a dotted underline only.
   Links that carry a class (buttons, pills, download chips) are components and
   are styled elsewhere. */
.module-page :is(p, li, td, th, dd, dt, figcaption, blockquote, .glossary-def, .r-downloads) > a:not([class]),
.module-page :is(p, li, td, th, dd, figcaption, blockquote) > :is(em, strong, b, i, span) > a:not([class]),
.module-page .welcome-hero :is(p, li) > a:is(.cite, .ext),
.glossary-def > a:not([class]),
.old-version-note a:not([class]) {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none;
}
.module-page :is(p, li, td, th, dd, dt, figcaption, blockquote, .glossary-def, .r-downloads) > a:not([class]):hover,
.module-page :is(p, li, td, th, dd, figcaption, blockquote) > :is(em, strong, b, i, span) > a:not([class]):hover,
.module-page .welcome-hero :is(p, li) > a:is(.cite, .ext):hover,
.glossary-def > a:not([class]):hover,
.old-version-note a:not([class]):hover { border-bottom-style: solid; }
.module-body :is(p, li, td, th, dd, dt, figcaption, blockquote, .glossary-def, .r-downloads) > a:not([class]):hover { border-bottom-color: var(--teal, #0B7B6B); }
/* Buttons built from links never show an underline. */
a.btn, a.btn:hover { text-decoration: none; }


/* ── B. Formula component colour key (shared palette) ────────────────────────
   Use the SAME hex in MathJax \color{...}{} so the symbol and its plain-language
   definition share a colour. fc-1..fc-6 are distinct and legible on white. */
.fc-1 { color: #0B7B6B; }   /* teal   */
.fc-2 { color: #C2410C; }   /* orange */
.fc-3 { color: #6D28D9; }   /* violet */
.fc-4 { color: #1D4ED8; }   /* blue   */
.fc-5 { color: #BE185D; }   /* pink   */
.fc-6 { color: #047857; }   /* green  */
.fc-1,.fc-2,.fc-3,.fc-4,.fc-5,.fc-6 { font-weight: 600; }

/* ── C. Reading-column formula box: symbol ⇄ plain-language toggle ───────────
   Markup (authored per formula):
     <div class="formula-box">
       <div class="formula-label">…</div>
       <div class="formula-sym">\[  …\color{#C2410C}{m}…  \]</div>
       <button class="formula-toggle" type="button">Plain language</button>
       <div class="formula-plain"><span class="fc-2">mass</span> … </div>
     </div>                                                                      */
.formula-box { position: relative; }
.formula-box .formula-toggle {
  position: absolute; top: 10px; right: 10px;
  background: #fff; border: 1px solid var(--grey, #E8ECEE);
  color: var(--text-light, #555); font: 600 11px/1 inherit;
  padding: 5px 10px; border-radius: 6px; cursor: pointer; letter-spacing: .3px;
  transition: background .15s, color .15s, border-color .15s;
}
.formula-box .formula-toggle:hover { background: var(--very-light-teal, #E6F3F0); color: var(--dark-teal, #065C50); border-color: var(--light-teal, #6BB5A6); }
.formula-box .formula-plain { display: none; font-size: 15.5px; line-height: 1.7; color: var(--text, #2D3436); padding-right: 96px; }
.formula-box.show-plain .formula-sym { display: none; }
.formula-box.show-plain .formula-plain { display: block; }

/* Slide formula key: on slides BOTH the symbols and their colour-coded
   definitions are always shown (no toggle). One line of "sym = meaning" chips. */
.av-formula .av-formula-key {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px;
  font-size: 13px; color: var(--av-ink-soft);
}
.av-formula .av-formula-key span.def { white-space: nowrap; }
.av-formula .av-formula-key b { font-weight: 700; }

/* ── D. Glossary hover tooltips ──────────────────────────────────────────────
   A jargon term carries its definition in data-def; hovering or focusing the
   term shows it. Terms are tagged automatically from the shared map, or by hand
   with <span class="gloss" data-def="…">term</span>. */
.gloss {
  border-bottom: 1px dotted var(--teal, #0B7B6B);
  cursor: help; position: relative; color: inherit;
}
.gloss:focus { outline: 2px solid var(--teal, #0B7B6B); outline-offset: 2px; border-radius: 2px; }
.gloss::after {
  content: attr(data-def);
  position: absolute; left: 0; bottom: 100%; margin-bottom: 9px;
  width: max-content; max-width: 304px;
  background: #0F2E2A; color: #fff;
  font: 400 12.5px/1.5 inherit; letter-spacing: normal; text-transform: none; text-align: left;
  padding: 9px 12px; border-radius: 8px; box-shadow: 0 8px 26px rgba(4,42,37,.28);
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease;
  z-index: 120; pointer-events: none; white-space: normal;
}
.gloss::before {
  content: ''; position: absolute; left: 16px; bottom: 100%; margin-bottom: 3px;
  border: 6px solid transparent; border-top-color: #0F2E2A;
  opacity: 0; visibility: hidden; transition: opacity .14s ease; z-index: 121; pointer-events: none;
}
.gloss:hover::after, .gloss:focus::after,
.gloss:hover::before, .gloss:focus::before { opacity: 1; visibility: visible; transform: translateY(0); }
/* Tooltips that would clip past the right edge flip leftward. */
.gloss.gloss-rt::after { left: auto; right: 0; }
.gloss.gloss-rt::before { left: auto; right: 16px; }
/* Tooltip layer (2026-10-07). course-interactions.js draws the definition in one
   fixed-position element attached to <body>, so table wrappers, accordions and
   other containers with hidden or scrolling overflow no longer clip it. The
   class gloss-portal on <html> turns the pseudo-element tooltips above off;
   !important is needed because several lessons restore them on :hover with
   inline rules of higher specificity. Without JavaScript the rules above apply. */
html.gloss-portal .gloss::after,
html.gloss-portal .gloss::before { content: none !important; display: none !important; }
.gloss-tip {
  position: fixed; top: 0; left: 0; z-index: 100000;
  width: max-content; max-width: 304px; max-width: min(304px, calc(100vw - 16px));
  background: #0F2E2A; color: #fff;
  font-size: 12.5px; font-weight: 400; font-style: normal; line-height: 1.5;
  letter-spacing: normal; text-transform: none; text-align: left; white-space: normal;
  padding: 9px 12px; border-radius: 8px; box-shadow: 0 8px 26px rgba(4,42,37,.28);
  opacity: 0; visibility: hidden; transform: translateY(4px); pointer-events: none;
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}
.gloss-tip.below { transform: translateY(-4px); }
.gloss-tip.show {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .14s ease, transform .14s ease;
}
.gloss-tip-arrow {
  position: absolute; top: 100%; left: 16px;
  border: 6px solid transparent; border-top-color: #0F2E2A;
}
.gloss-tip.below .gloss-tip-arrow {
  top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #0F2E2A;
}
@media print { .gloss-tip { display: none !important; } }

/* ── E. Files for an R activity (2026-09-02) ─────────────────────────────────
   Inserted right after .r-box-header: dataset download links plus the answer-key
   script. A key link carrying data-answer-for="rActivity-<base>-key" stays hidden
   until the student saves that activity's responses (saveRActivity() adds .show
   to every [data-answer-for^="rActivity-<base>-"] element, model answers included). */
:is(.r-box, .accordion-body-inner) .r-downloads {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  margin: -2px 0 12px; padding: 8px 10px;
  background: rgba(255,255,255,0.55); border: 1px dashed #FDBA74; border-radius: 8px;
}
:is(.r-box, .accordion-body-inner) .r-downloads-label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
  color: #9A3412; margin-right: 2px;
}
:is(.r-box, .accordion-body-inner) .r-downloads .r-dl {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 9px; border-radius: 6px;
  background: #fff; border: 1px solid #FDBA74; color: #7C2D12;
  font-size: 13px; font-weight: 600; text-decoration: none; line-height: 1.3;
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  box-shadow: 0 1px 2px rgba(124,45,18,0.08);
}
:is(.r-box, .accordion-body-inner) .r-downloads .r-dl::before {
  content: ''; width: 12px; height: 12px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v12'/><path d='M7 10l5 5 5-5'/><path d='M4 19h16'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v12'/><path d='M7 10l5 5 5-5'/><path d='M4 19h16'/></svg>") center/contain no-repeat;
}
:is(.r-box, .accordion-body-inner) .r-downloads .r-dl:hover { background: #FFEDD5; border-color: #EA580C; color: #9A3412; }
:is(.r-box, .accordion-body-inner) .r-downloads .r-dl:focus-visible { outline: 2px solid #EA580C; outline-offset: 2px; }
:is(.r-box, .accordion-body-inner) .r-downloads .r-dl small {
  font-family: inherit; font-weight: 500; font-size: 11px; color: #B45309; margin-left: 2px;
}
:is(.r-box, .accordion-body-inner) .r-downloads .r-dl.r-dl-key { background: #ECFDF5; border-color: #86EFAC; color: #166534; }
:is(.r-box, .accordion-body-inner) .r-downloads .r-dl.r-dl-key:hover { background: #DCFCE7; border-color: #16A34A; }
:is(.r-box, .accordion-body-inner) .r-downloads .r-dl.r-dl-key small { color: #15803D; }
/* Gated answer-key link: hidden until the activity is saved. */
:is(.r-box, .accordion-body-inner) .r-downloads .r-dl.r-dl-key[data-answer-for] { display: none; }
:is(.r-box, .accordion-body-inner) .r-downloads .r-dl.r-dl-key[data-answer-for].show { display: inline-flex; }
/* When the key link is the only hidden item and the box has data files, keep the row tidy. */
:is(.r-box, .accordion-body-inner) .r-downloads:empty { display: none; }

/* ── F. Responses download control in the sidebar (lesson-responses.js) ─────── */
.sidebar-footer .responses-dl {
  display: block; width: 100%; margin-top: 12px; padding: 9px 12px;
  border-radius: 8px; border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.10); color: #fff; font-weight: 700; font-size: 12.5px;
  cursor: pointer; text-align: center; line-height: 1.3; font-family: inherit;
}
.sidebar-footer .responses-dl:hover:not(:disabled) { background: rgba(255,255,255,0.22); }
.sidebar-footer .responses-dl:disabled { opacity: 0.55; cursor: not-allowed; }
.sidebar-footer .responses-dl small { display: block; font-weight: 500; font-size: 11px; opacity: 0.85; margin-top: 2px; }

/* -- Callout box titles in the colour of their box (added October 2026) -------
   Each callout's title takes the colour of its box, for example orange titles
   on amber boxes. Boxes without a colour class keep the dark teal title. */
.info-box.teal h3, .info-box.teal h4, .info-box.teal .box-title       { color: var(--dark-teal, #065C50); }
.info-box.green h3, .info-box.green h4, .info-box.green .box-title    { color: var(--green, #0B7B6B); }
.info-box.amber h3, .info-box.amber h4, .info-box.amber .box-title    { color: #C2410C; }
.info-box.rose h3, .info-box.rose h4, .info-box.rose .box-title       { color: var(--accent-dark, #A3002A); }
.info-box.blue h3, .info-box.blue h4, .info-box.blue .box-title       { color: var(--blue, #1D4ED8); }
.info-box.purple h3, .info-box.purple h4, .info-box.purple .box-title { color: var(--purple, #6D28D9); }
.info-box.grey h3, .info-box.grey h4, .info-box.grey .box-title       { color: #4B5563; }

/* -- Section navigation, left-justified (added October 2026)
   The Next button and the requirement note under it sit at the left of the
   navigation row, after the Previous button, and share one left edge, so a
   long note no longer pushes the button into the middle of the row. Applies to
   both navigation templates (.module-nav and .section-nav). */
.module-nav, .section-nav { justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; gap: 14px 16px; }
.module-nav > span:empty, .section-nav > span:empty, .section-nav > div:empty { display: none; }
.module-nav > div:last-child, .module-nav > div:last-child .requirement-note,
.module-nav .req-note, .section-nav .req-note, .section-nav .requirement-note { text-align: left; }
.section-nav > div[style*="text-align:right"],
.section-nav > div[style*="text-align: right"] { text-align: left !important; }

/* -- Numbered figure and table captions in the reading column (October 2026) */
.fig-caption, .tbl-caption { font-size: 13px; color: var(--text-light, #555); line-height: 1.5; }
.fig-caption { margin-top: 8px; }
.tbl-caption { margin: 18px 0 8px; }
.fig-caption b, .tbl-caption b { color: var(--text, #2D3436); font-weight: 700; }

/* -- Narrated R walkthrough promotion (HSCI 410, October 2026) ----------------
   Each narrated R walkthrough linked from a lesson is announced in a red
   promotional card with a button that opens the walkthrough in a new tab. */
.rwt-promo {
  position: relative; display: flex; gap: 18px; align-items: flex-start;
  margin: 32px 0; padding: 22px 24px 22px 22px;
  background: linear-gradient(135deg, #FFF1F3 0%, #FDE2E8 100%);
  border: 2px solid #CC0033; border-radius: 14px;
  box-shadow: 0 6px 22px rgba(204, 0, 51, 0.14);
  overflow: hidden;
}
.rwt-promo::after {
  content: ''; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px;
  border-radius: 50%; background: rgba(204, 0, 51, 0.07); pointer-events: none;
}
.rwt-promo-icon {
  flex: none; width: 56px; height: 56px; border-radius: 14px;
  background: #CC0033; color: #fff; display: flex; align-items: center; justify-content: center;
  font: 800 28px/1 Georgia, 'Times New Roman', serif; box-shadow: 0 3px 10px rgba(204, 0, 51, 0.30);
}
.rwt-promo-main { flex: 1; min-width: 0; position: relative; z-index: 1; }
.rwt-promo-kicker {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #A3002A;
}
.rwt-promo-kicker::before { content: '\25B6'; font-size: 9px; }
.rwt-promo h4, .info-box .rwt-promo h4 { margin: 0 0 8px; color: #7A0020; font-size: 18px; line-height: 1.3; }
.rwt-promo p { margin: 0 0 14px; color: #3B1D24; }
.rwt-promo p a { color: inherit; }
.rwt-promo-btn, .rwt-promo-btn:visited {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 22px;
  background: #CC0033; color: #fff !important; border-radius: 999px;
  font-weight: 700; font-size: 15px; text-decoration: none !important; border: none;
  box-shadow: 0 4px 12px rgba(204, 0, 51, 0.30); transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.rwt-promo-btn:hover { background: #A3002A; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(163, 0, 42, 0.35); }
.rwt-promo-btn:focus-visible { outline: 3px solid #7A0020; outline-offset: 2px; }
.rwt-promo-btn .rwt-arrow { font-size: 17px; line-height: 1; }
@media (max-width: 560px) {
  .rwt-promo { flex-direction: column; gap: 12px; padding: 18px; }
  .rwt-promo-icon { width: 44px; height: 44px; font-size: 22px; border-radius: 12px; }
  .rwt-promo-btn { width: 100%; justify-content: center; }
}

/* -- Worked examples (shared October 2026; same rules as formula-calc.css) ----
   Worked examples use a neutral grey surface in every course, so pages that do
   not load formula-calc.css (HSCI 410) show them in the same style. */
.info-box.worked-example, .scenario-card.worked-example {
  background: #F3F4F6; border: 0; border-left: 4px solid #94A3B8; box-shadow: none;
  border-radius: var(--radius, 12px);
}
.info-box.worked-example h4, .scenario-card.worked-example h4,
.scenario-card.worked-example .scenario-title { color: var(--dark-teal, #065C50); }
.worked-example .data-table tr:nth-child(even) { background: #E8EBEE; }
.worked-example .data-table td { background: transparent; }

/* -- Equation numbers on formula boxes (shared October 2026) */
.formula-box .eq-label { float: right; font-size: 13px; color: var(--text-light, #555); font-family: 'Open Sans', sans-serif; }

/* -- Caption size inside slide-style reading figures (October 2026): the
   walkthrough stylesheet sets figure captions to 11px; numbered captions in
   the reading column keep the 13px used everywhere else. */
.module-body .fig-caption, .module-body .tbl-caption { font-size: 13px; line-height: 1.5; }

/* -- Accordions: when a header carries the arrow span, hide the older '+'/'−'
   marker that some lesson templates add with ::after, so each header shows
   one indicator. */
.accordion-item .accordion-header:has(> .arrow)::after,
.accordion-item.open .accordion-header:has(> .arrow)::after { content: none; }

/* -- A formula box that holds only a plain-language version (no symbolic
   formula) shows that text at once and needs no toggle button. */
.formula-box:not(:has(> .formula-sym)) > .formula-plain { display: block; padding-right: 0; }
.formula-box:not(:has(> .formula-sym)) > .formula-toggle { display: none; }