.keyterm {
  font-weight: bold;
  font-size: 1.3em;
} 
.list-intro-par {
  margin-bottom: 0px;
}
.section-intro { 
  font-size: clamp(18pt, 2.5vw, 22pt);
  font-weight: bold;
  margin-top: 1.75em
}
.lesson-index-template-jh h3 {
  font-size: clamp(12pt, 2.5vw, 16pt)
}

/*===========================FA26 Course Homepage====================================================================================*/
.landg-pg a {color: #0050ad;
}
.co610-ha a {color: #027634; 
}

.co610-ha h2 {color: #027634; 
  font-size: 24pt;}

.co610-ha h3 {color: #027634; 
  font-size: 20pt;}
/*======================LESSONS INDEX STYLE============================================================================================
toc-card refers to "table of contents" container-boxes, each of which generally features a lesson and a lesson button.
=======================================================================================================================================*/
.toc grid-row {
  display: flex; 
  align-items: stretch; 
  width: 100%;
}
 
.toc-card {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 2%;
  border: 1px solid #b89880;
  background-color: #fef8f1;
}
.toc-card h2 {
  font-size: 1.8em;
  font-weight: bold;
}
.toc-card h3 {
  font-size: 1.5em;
  font-weight: bold;
}
.toc-card h4 {
  font-size: 1.3em;
  font-weight: bold;
}
.toc-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 16 / 9;
}
.toc-card .overlay {
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(20, 20, 20, 0.75);
  color: #fff;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  padding: 16px;
}
.toc-card .overlay::before {
  content: "";
  flex: .8;
}
.toc-card .overlay-inner {
  font-size: 1.2em;
}
.toc-card .overlay ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
.toc-card .overlay li {
  list-style: none;
  text-align: left;
  display: flex;
}
.toc-card .overlay li::before {
  content: "•";
  flex: 0 0 1.2em;
  text-align: left;
  font-size: .8em;
}
 
/* Desktop hover + mobile tap (via focus) */
.toc-card:hover .overlay {
  display: flex;
}
 
/*==========================TEXT ANNOTATIONS, organized around 2-column design, but not in tables==================
.interactive-content-box
 └──
  .interactive-grid-row
    └── .annotated-col (col-xs-12 col-md-5)
          └── .annotated-content-box
                ├── text
                ├── .prompt
                └── .annotation (div)
==========================================================================================================================*/
 
.interactive-content-box {
  background-color: #eef3f9;
  padding: 2% 2% 2% 2%;
  margin-bottom: 10px;
  border: 1px solid #c3c3c2;
}
.interactive-content-box h2 {
  color: #43649a; 
  font-size: 1.8em
}
.interactive-content-box h3 {
  color: #43649a;
  font-size: 1.5em
}
.interactive-content-box h4 {
  color: #43649a; 
  font-size: 1.3em
}
.interactive-grid-row {
  display: flex;
  align-items: stretch;
  width: 100%;
}
.annotated-col {
  position: relative;
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.annotated-content-box {
  padding: 2% 3% 2% 2%;
  background-color: #eef3f9;
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  overflow: visible;
  border: none;
}
.regular-content-box /*This category is for flex boxes that have no (or irregular) hover behaviors. 
Often used as cards on an otherwise hovering page.*/
{
  padding: 2%;
  background-color: #eee9e3;
  overflow: visible;
  margin-bottom: 10px;
  border: 1px solid #c3c3c2;
}
.prompt {
  font-size: 1.05em;
  color: #43649a;
  font-style: italic;
  margin-top: -2px;
  margin-bottom: 2px;
  padding-left: 2px;
}
.annotation {
  position: absolute;
  left: 97%;
  bottom: -3%;
  top: auto;
  width: 140%;
  max-height: 550px;
  overflow-y: auto;
  background: #eee9e3;
    color: #4A3728;
  padding: 16px 12px 16px 12px;
  display: none;
  z-index: 100;
}
.annotation p {
  margin-bottom: 8px;
}
.annotation h3 {
  color: #4A3728;
}
.annotation h4 {
  color: #4A3728;
}
.annotation blockquote {
  font-family: Georgia, serif;
  margin: 0;
}
.annotation ul {
  padding-left: 0em;
 list-style-position: outside;
  margin-bottom: 8px;
}
.annotation li {
  padding-left: .2em;
  margin-bottom: 6px;
 }
 
 /* ========================= INTERACTIVE and @media  ======================================= */
.annotated-content-box:hover {
  background-color: #d6e4f0;
}
.annotated-content-box:hover .annotation {
  display: block;
}
@media (max-width: 768px) {
  .annotation {
    left: 0;
    top: auto;
    bottom: 95%;
    width: 100%;
  }
}
 
/*==================================================================================
  INTERACTIVE DIAGRAM - DOT-BASED PAGE (.qt-hotspot)
  Small circular hotspots centered on a fixed point (e.g. "3 Question Trajectory").
  KEEP - this is a separate page from Stewardship, untouched by this cleanup.
==================================================================================*/
.qt-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.qt-img {
  display: block;
  width: 100%;
  border-radius: 6px;
  height: auto;
}
.qt-hotspot {
  position: absolute;
  width: 3.9%;             /* roughly matches the dot size */
  padding-top: 3.9%;       /* keeps it a circle at any width via aspect trick */
  transform: translate(-50%, -50%);
  border-radius: 50%;
  cursor: help;
}
.qt-tooltip {
  display: none;
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  width: 210px;
  max-width: 70vw;
  background: #F0FFFF;
  color: #0818A8;
  padding: 12px 18px;
  border-radius: 6px;
  font-size: clamp(14px, 1.05vw, 19px);  /* stays readable on mobile, scales up on desktop */
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 9999;
  text-align: left;
}
.qt-tooltip ul {
  margin: 0;
  padding-left: 18px;
}
.qt-tooltip li {
  margin-bottom: 4px;
}
.qt-tooltip li:last-child {
  margin-bottom: 0;
}
.qt-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #F0FFFF transparent transparent transparent;
}
.qt-hotspot:hover .qt-tooltip {
  display: block;
}
 
/* Left-edge dot: anchor the tooltip's LEFT side to the dot and let it grow rightward,
   so it can't run off the left edge of the screen */
.qt-tooltip.qt-tooltip--edge-left {
  left: 50%;
  transform: translateX(-68%);
}
.qt-tooltip.qt-tooltip--edge-left::after {
  left: 68%;
}
.qt-tooltip.qt-tooltip--edge-right {
  left: 50%;
  transform: translateX(-32%);
}
.qt-tooltip.qt-tooltip--edge-right::after {
  left: 32%;
}
@media (max-width: 480px) {
  .qt-tooltip.qt-tooltip--edge-left {
    transform: translateX(-20%);
  }
  .qt-tooltip.qt-tooltip--edge-left::after {
    left: 20%;
  }
  .qt-tooltip.qt-tooltip--edge-right {
    transform: translateX(-80%);
  }
  .qt-tooltip.qt-tooltip--edge-right::after {
    left: 80%;
  }
}
 
/*==================================================================================
  INTERACTIVE DIAGRAM - SHAPE-BASED PAGE (.qt-hotspot-shape)
  Hotspots sized to each shape's actual footprint (e.g. "Components of Stewardship").
 
  All 11 shapes are now converted to the NEW sibling-tooltip system further
  below, so the old nested ".qt-hotspot-shape .qt-tooltip" reveal rule,
  ".qt-tooltip-below" modifier, and its desktop/mobile overrides are gone.
  Only the base positioning rule survives - every hotspot (old and new
  system alike) is still a ".qt-hotspot-shape" for its position/cursor.
==================================================================================*/
.qt-hotspot-shape {
  position: absolute;
  cursor: help;
}
 
/* .qt-tooltip-linked / #hs-work-ethic:hover ~ .qt-tooltip-linked REMOVED:
   #hs-work-ethic is now reused by the real, converted Work Ethic hotspot -
   this stray rule would have fired alongside the real one. */
 
/* .qt-tooltip-v2 / #hs-work-ethic-v2:hover ~ .qt-tooltip-v2 (+ its mobile
   override) REMOVED: belonged to the old Work Ethic markup being deleted;
   no id collision risk, just dead weight. */
 
/*==================================================================================
  NEW: sibling-based tooltip system (extends the #hs-work-ethic-v2 pattern
  already in use). Tooltip is a SIBLING of its hotspot inside .qt-wrap, so all its
  left/right/bottom percentages are relative to the whole image - which is
  required for these wide, non-hotspot-relative zone boundaries to work.
 
  Shared base rules first, then one block per shape with its own left/max-width
  (hard horizontal zone bounds) and bottom (7px overlap into its own hotspot).
==================================================================================*/
.qt-tooltip-zone {
  display: none;
  position: absolute;
  box-sizing: border-box;  /* NEW: keeps max-width inclusive of padding, so the
                               box can't sneak past its zone's right boundary */
  background: #F0FFFF;
  color: #0818A8;
  padding: 12px 18px;
  border-radius: 6px;
  font-size: clamp(14px, 1.05vw, 19px);
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 9999;
  text-align: left;
  width: max-content;      /* shrink to fit content, capped by max-width below */
  max-height: 500px;       /* generous scroll-fallback ceiling, same as elsewhere */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.qt-tooltip-zone ul {
  margin: 0;
  padding-left: 18px;
}
.qt-tooltip-zone li {
  margin-bottom: 4px;
}
.qt-tooltip-zone li:last-child {
  margin-bottom: 0;
}
.qt-tooltip-zone p {
  margin-bottom: 8px;
}
 
/* Reveal rule for ALL shapes at once: each hotspot + tooltip pair is now
   wrapped in a plain, non-positioned <div class="hs-group"> in the HTML.
   Hovering the hotspot OR the tooltip itself (or anything inside it) keeps
   the tooltip visible - unlike the old "#hs-X:hover ~ .tt-X" sibling rule,
   which broke the instant the cursor left the hotspot. Since .hs-group
   stays position: static (the default), it's invisible to the absolute-
   positioning containing-block chain, so left/bottom/max-width on
   .qt-tooltip-zone still resolve against .qt-wrap exactly as before. */
.hs-group:has(:hover) .qt-tooltip-zone {
  display: block;
}
 
/* --- Work Ethic --- */
.qt-hotspot-shape#hs-work-ethic {
  left: 13.52%; top: 33.02%; width: 5.87%; height: 8.86%;
}
.tt-work-ethic {
  left: 2.3%;
  max-width: min(max(42.3%, 380px), calc(100% - 2.3%));      /* zone: 2.3% to 44.6% */
  bottom: calc(66.98% - 7px);   /* 100% - hotspot's new top (33.02%), minus 7px overlap */
}
 
/* --- Ability to Give --- */
.qt-hotspot-shape#hs-ability-to-give {
  left: 28.99%; top: 33.02%; width: 6.33%; height: 8.86%;
}
.tt-ability-to-give {
  left: 13.4%;
  max-width: min(max(39.9%, 380px), calc(100% - 13.4%));      /* zone: 13.4% to 53.3% */
  bottom: calc(66.98% - 7px);
}
 
/* --- God is the Owner --- */
.qt-hotspot-shape#hs-god-is-owner {
  left: 63.60%; top: 33.22%; width: 6.10%; height: 8.86%;
}
.tt-god-is-owner {
  left: 27.1%;
  max-width: min(max(52.9%, 380px), calc(100% - 27.1%));      /* zone: 27.1% to 80.0% */
  bottom: calc(66.78% - 7px);
}
 
/* --- Trusting God with Resources --- */
.qt-hotspot-shape#hs-trusting-god {
  left: 79.66%; top: 33.35%; width: 6.79%; height: 8.40%;
}
.tt-trusting-god {
  left: 53.6%;
  max-width: min(max(45.5%, 380px), calc(100% - 53.6%));      /* zone: 53.6% to 99.1% */
  bottom: calc(66.65% - 7px);
}
 
/* --- Receiving --- */
.qt-hotspot-shape#hs-receiving {
  left: 7.75%; top: 58.86%; width: 17.60%; height: 9.89%;
}
.tt-receiving {
  left: 0.0%;
  max-width: min(max(30.2%, 380px), calc(100% - 0.0%));      /* zone: 0.0% to 30.2% */
  bottom: calc(41.14% - 7px);   /* 100% - hotspot's new top (58.86%), minus 7px */
}
 
/* --- Sharing --- */
.qt-hotspot-shape#hs-sharing {
  left: 75.05%; top: 58.86%; width: 17.60%; height: 9.89%;
}
.tt-sharing {
  left: 68.8%;
  max-width: min(max(31.2%, 380px), calc(100% - 68.8%));      /* zone: 68.8% to 100.0% */
  bottom: calc(41.14% - 7px);
}
 
/* --- Needs --- */
.qt-hotspot-shape#hs-needs {
  left: 29.08%; top: 72.68%; width: 12.77%; height: 12.77%;
}
.tt-needs {
  left: 11.1%;
  max-width: min(max(31.9%, 380px), calc(100% - 11.1%));      /* zone: 11.1% to 43.0% */
  bottom: calc(27.32% - 7px);
}
 
/* --- Ministry --- */
.qt-hotspot-shape#hs-ministry {
  left: 58.73%; top: 71.34%; width: 11.39%; height: 14.72%;
}
.tt-ministry {
  left: 53.0%;
  max-width: min(max(28.2%, 380px), calc(100% - 53.0%));      /* zone: 53.0% to 81.2% */
  bottom: calc(28.66% - 7px);
}
 
/* --- Vocational Mindset --- */
.qt-hotspot-shape#hs-vocational-mindset {
  left: 40.75%; top: 46.06%; width: 17.60%; height: 9.89%;
}
.tt-vocational-mindset {
  left: 26.8%;
  max-width: min(max(45.8%, 380px), calc(100% - 26.8%));      /* zone: 26.8% to 72.6% */
  bottom: calc(53.94% - 7px);
}
 
/* --- Components of Stewardship (parallelogram) --- */
.qt-hotspot-shape#hs-components-of-stewardship {
  left: 33.03%; top: 10.77%; width: 33.24%; height: 6.56%;
}
.tt-components-of-stewardship {
  left: 9.8%;
  max-width: min(max(80.0%, 380px), calc(100% - 9.8%));      /* zone: 9.8% to 89.8% */
  bottom: calc(89.23% - 7px);
}
 
/* --- Resources --- */
/* Position corrected from the original source's buggy "top: 46.7%" (a
   copy-paste leftover from the Vocational Mindset line above it in 
   original HTML), which put this hotspot almost exactly on top of
   Vocational Mindset's. Recomputed from the real image file's actual
   Resources ellipse position instead. */
.qt-hotspot-shape#hs-resources {
  left: 43.72%; top: 73.53%; width: 12.74%; height: 9.87%;
}
.tt-resources {
  left: 18.9%;
  max-width: min(max(62.4%, 380px), calc(100% - 18.9%));      /* zone: 18.9% to 81.3% */
  bottom: calc(26.47% - 7px);
}
 
/* REMOVED: the old fixed-position, viewport-centered mobile override.
   That approach was a workaround the OLD hotspot-relative-percentage
   system needed (since its numbers only made sense escaping into fixed/
   viewport units). It doesn't apply here - .qt-tooltip-zone is already
   positioned as a percentage of the whole image via .qt-wrap, so the same
   left/max-width/bottom rules used on desktop keep working correctly on
   mobile too, staying anchored to the real hotspot instead of jumping to
   the center of the viewport. Only bump up the height ceiling a bit on
   small screens, since text will wrap more as the image (and therefore
   the zone's absolute pixel width) shrinks. */
@media (max-width: 768px) {
  .qt-tooltip-zone {
    max-height: 75vh;
  }
}

/* Minimal-window override: below 480px (true phone width, not just a
   resized desktop browser), abandon each shape's drawn zone entirely and
   go near-full-bleed instead. There's no longer enough room to honor "leave
   part of the diagram visible" AND stay readable at this size - and a
   near-full-width box beats forcing an internal scrollbar, per 
   Ministry/Needs/Receiving comparison. Same specificity as each .tt-X rule,
   so this only wins because it's declared later in the file. */
@media (max-width: 480px) {
  .qt-tooltip-zone {
    left: 2% !important;
    max-width: 96% !important;
  }
}

/* ==========================================================
MCSF501:ONL Intro page
   ========================================================== */

:root {
  --popup-max-height: 70vh; /* cap so a tall image can't overshoot the screen */
}
 
/* wrap-mcsf holds the diagram image AND the zones AND the popups as siblings —
   that sibling relationship is what lets pure CSS connect a hover
   on a zone to its matching popup. Needs position: relative so the
   popups (position: absolute) anchor to IT, not the page. */
.wrap-mcsf {
  position: relative;
  width: 100%;
  margin: 0 auto;
  line-height: 0;
}
 
.wrap-mcsf img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
 
/* ---------- zones (invisible hotspots over the diagram) ---------- */
 
.zone-mcsf {
  position: absolute;
  cursor: pointer;
  border-radius: 6px;
  font-size: 0; /* hides the nbsp placeholder text Canvas needs to keep the div from being stripped */
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
 
.zone-mcsf:hover,
.zone-mcsf:focus {
  background: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
  outline: none;
}
 
.note       { top: 1%;  left: 1%;  width: 23%; height: 40%; }
.vocation   { top: 44%; left: 1%;  width: 24%; height: 42%; }
.community  { top: 44%; left: 26%; width: 24%; height: 42%; }
.worship    { top: 44%; left: 51%; width: 24%; height: 42%; }
.mission    { top: 44%; left: 76%; width: 24%; height: 42%; }
 
/* ---------- popups (full-width closeup panels, anchored to .wrap-mcsf) ---------- */
 
.popup-mcsf {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  background-color: #000;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.6);
  transition: max-height 0.28s ease;
  pointer-events: none;
  z-index: 50;
}
 
/* the close-up image itself: full container width, height follows
   the image's own aspect ratio — no cropping, no positioning math */
.popup-mcsf img {
  display: block;
  width: 100%;
  height: auto;
}
 .popup-vocation,
.popup-community,
.popup-worship,
.popup-mission {
  bottom: 50%;
}

.popup-mcsf-label {
  position: absolute;
  left: 20px;
  bottom: 16px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 999px;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
 
/* --- the pure-CSS trigger: hovering/focusing a zone opens ONLY its matching popup --- */
.note:hover      ~ .popup-note,      .note:focus      ~ .popup-note,
.vocation:hover  ~ .popup-vocation,  .vocation:focus  ~ .popup-vocation,
.community:hover ~ .popup-community, .community:focus ~ .popup-community,
.worship:hover   ~ .popup-worship,   .worship:focus   ~ .popup-worship,
.mission:hover   ~ .popup-mission,   .mission:focus   ~ .popup-mission {
  max-height: var(--popup-max-height);
}

/*==================================================================================
  MASTER CONSOLIDATED PACKAGE - v2, everything approved included, nothing held
  back. Bottom-anchored/grow-upward definition popup is now folded in (was
  previously held separately - no longer excluded).
 
  Sections, in order:
    1. Position/zone rules - all 21 hotspots, three-separate-images layout
    2. Keyword tooltip center-fix (overrides #1's three key rules)
    3. Crash-icon position fix (overrides #1's three crash rules)
    4. Warning-icon position fix (overrides #1's three warning rules)
    5. Definitions - all three lenses, BOTTOM-ANCHORED/grow-upward placement
       (bottom:76%, right:2.6%) - replaces the earlier top:2% corner version
    6. Site-wide hotspot hover pulse (.qt-hotspot-shape - affects ALL
       diagrams, not just circles, per "let's just do the whole thing")
    7. Mobile narrow-fix (<=480px), with transform:none patch on key rules
 
  Same three definition TEXT divs as before (per-lens content in the HTML
  file) - only this CSS rule for .qt-definition-fixed itself changed.
==================================================================================*/
 
/*==================================================================================
  THREE-SEPARATE-IMAGES VARIANT (Aesthetic / Human Thriving / Discipleship)
  Each lobe is now its own standalone square image (~1680x1680, identical
  internal icon grid) in its own .qt-wrap, rather than one combined image. Same
  ONE set of coordinates reused for all three - no per-lobe offset math needed,
  since each image is its own independent coordinate space.
 
  Zone is nearly full-width (4% to 96%) for every hotspot in every lobe, since
  each circle's tooltip only has to stay inside ITS OWN image container now -
  nothing beside it to collide with horizontally.
 
  All open DOWNWARD for consistency. Caveat: the bottom-row 'question' icon
  sits at 77.3% down its own image, so a tall tooltip opening downward from it
  has less room before running past the bottom of that image than the icons
  above it do - not a hard overflow (page just continues past the image), but
  worth flipping to upward-opening for that row specifically if it looks
  cramped once tested live, same fix pattern used for Discipleship earlier.
 
  SAME class names as previous circle variants (tt-aes-recycle, etc.) - remove
  whichever position ruleset is currently live before adding this one.
 
  NOTE: coordinates are visual estimates, not measured pixel data.
==================================================================================*/
 
/* ----- Aesthetic circle (own image) ----- */
.qt-hotspot-shape#hs-aes-rockyroad {
  left: 22.7%; top: 39.0%; width: 10.0%; height: 10.0%;
}
.tt-aes-rockyroad {
  left: 4.0%;
  max-width: min(max(92.0%, 380px), calc(100% - 4.0%));
  top: calc(49.0% + 8px);
}
 
.qt-hotspot-shape#hs-aes-key {
  left: 45.2%; top: 38.3%; width: 10.0%; height: 10.0%;
}
.tt-aes-key {
  left: 4.0%;
  max-width: min(max(92.0%, 380px), calc(100% - 4.0%));
  top: calc(48.3% + 8px);
}
 
.qt-hotspot-shape#hs-aes-crash {
  left: 67.5%; top: 38.0%; width: 10.0%; height: 10.0%;
}
.tt-aes-crash {
  left: 4.0%;
  max-width: min(max(92.0%, 380px), calc(100% - 4.0%));
  top: calc(48.0% + 8px);
}
 
.qt-hotspot-shape#hs-aes-magnifier {
  left: 28.2%; top: 55.4%; width: 10.0%; height: 10.0%;
}
.tt-aes-magnifier {
  left: 4.0%;
  max-width: min(max(92.0%, 380px), calc(100% - 4.0%));
  top: calc(65.4% + 8px);
}
 
.qt-hotspot-shape#hs-aes-recycle {
  left: 45.2%; top: 55.4%; width: 10.0%; height: 10.0%;
}
.tt-aes-recycle {
  left: 4.0%;
  max-width: min(max(92.0%, 380px), calc(100% - 4.0%));
  top: calc(65.4% + 8px);
}
 
.qt-hotspot-shape#hs-aes-warning {
  left: 64.4%; top: 55.4%; width: 10.0%; height: 10.0%;
}
.tt-aes-warning {
  left: 4.0%;
  max-width: min(max(92.0%, 380px), calc(100% - 4.0%));
  top: calc(65.4% + 8px);
}
 
.qt-hotspot-shape#hs-aes-question {
  left: 45.2%; top: 72.3%; width: 10.0%; height: 10.0%;
}
.tt-aes-question {
  left: 4.0%;
  max-width: min(max(92.0%, 380px), calc(100% - 4.0%));
  top: calc(82.3% + 8px);
}
 
/* ----- Human Thriving circle (own image) ----- */
.qt-hotspot-shape#hs-ht-rockyroad {
  left: 22.7%; top: 39.0%; width: 10.0%; height: 10.0%;
}
.tt-ht-rockyroad {
  left: 4.0%;
  max-width: min(max(92.0%, 380px), calc(100% - 4.0%));
  top: calc(49.0% + 8px);
}
 
.qt-hotspot-shape#hs-ht-key {
  left: 45.2%; top: 38.3%; width: 10.0%; height: 10.0%;
}
.tt-ht-key {
  left: 4.0%;
  max-width: min(max(92.0%, 380px), calc(100% - 4.0%));
  top: calc(48.3% + 8px);
}
 
.qt-hotspot-shape#hs-ht-crash {
  left: 67.5%; top: 38.0%; width: 10.0%; height: 10.0%;
}
.tt-ht-crash {
  left: 4.0%;
  max-width: min(max(92.0%, 380px), calc(100% - 4.0%));
  top: calc(48.0% + 8px);
}
 
.qt-hotspot-shape#hs-ht-magnifier {
  left: 28.2%; top: 55.4%; width: 10.0%; height: 10.0%;
}
.tt-ht-magnifier {
  left: 4.0%;
  max-width: min(max(92.0%, 380px), calc(100% - 4.0%));
  top: calc(65.4% + 8px);
}
 
.qt-hotspot-shape#hs-ht-recycle {
  left: 45.2%; top: 55.4%; width: 10.0%; height: 10.0%;
}
.tt-ht-recycle {
  left: 4.0%;
  max-width: min(max(92.0%, 380px), calc(100% - 4.0%));
  top: calc(65.4% + 8px);
}
 
.qt-hotspot-shape#hs-ht-warning {
  left: 64.4%; top: 55.4%; width: 10.0%; height: 10.0%;
}
.tt-ht-warning {
  left: 4.0%;
  max-width: min(max(92.0%, 380px), calc(100% - 4.0%));
  top: calc(65.4% + 8px);
}
 
.qt-hotspot-shape#hs-ht-question {
  left: 45.2%; top: 72.3%; width: 10.0%; height: 10.0%;
}
.tt-ht-question {
  left: 4.0%;
  max-width: min(max(92.0%, 380px), calc(100% - 4.0%));
  top: calc(82.3% + 8px);
}
 
/* ----- Discipleship circle (own image) ----- */
.qt-hotspot-shape#hs-disc-rockyroad {
  left: 22.7%; top: 39.0%; width: 10.0%; height: 10.0%;
}
.tt-disc-rockyroad {
  left: 4.0%;
  max-width: min(max(92.0%, 380px), calc(100% - 4.0%));
  top: calc(49.0% + 8px);
}
 
.qt-hotspot-shape#hs-disc-key {
  left: 45.2%; top: 38.3%; width: 10.0%; height: 10.0%;
}
.tt-disc-key {
  left: 4.0%;
  max-width: min(max(92.0%, 380px), calc(100% - 4.0%));
  top: calc(48.3% + 8px);
}
 
.qt-hotspot-shape#hs-disc-crash {
  left: 67.5%; top: 38.0%; width: 10.0%; height: 10.0%;
}
.tt-disc-crash {
  left: 4.0%;
  max-width: min(max(92.0%, 380px), calc(100% - 4.0%));
  top: calc(48.0% + 8px);
}
 
.qt-hotspot-shape#hs-disc-magnifier {
  left: 28.2%; top: 55.4%; width: 10.0%; height: 10.0%;
}
.tt-disc-magnifier {
  left: 4.0%;
  max-width: min(max(92.0%, 380px), calc(100% - 4.0%));
  top: calc(65.4% + 8px);
}
 
.qt-hotspot-shape#hs-disc-recycle {
  left: 45.2%; top: 55.4%; width: 10.0%; height: 10.0%;
}
.tt-disc-recycle {
  left: 4.0%;
  max-width: min(max(92.0%, 380px), calc(100% - 4.0%));
  top: calc(65.4% + 8px);
}
 
.qt-hotspot-shape#hs-disc-warning {
  left: 64.4%; top: 55.4%; width: 10.0%; height: 10.0%;
}
.tt-disc-warning {
  left: 4.0%;
  max-width: min(max(92.0%, 380px), calc(100% - 4.0%));
  top: calc(65.4% + 8px);
}
 
.qt-hotspot-shape#hs-disc-question {
  left: 45.2%; top: 72.3%; width: 10.0%; height: 10.0%;
}
.tt-disc-question {
  left: 4.0%;
  max-width: min(max(92.0%, 380px), calc(100% - 4.0%));
  top: calc(82.3% + 8px);
}
 
 
/*==================================================================================
  Keyword tooltip - centered on its own icon instead of zone-anchored.
  The key icon sits near dead-center of its circle (cx: 50.2%), so the shared
  left:4%/grow-right zone rule made it look lopsided relative to its own icon.
  This overrides just the three key rules (same fix for all lobes, since they
  share identical coordinates) to center via transform instead.
==================================================================================*/
.tt-aes-key,
.tt-ht-key,
.tt-disc-key {
  left: 50.2%;
  transform: translateX(-50%);
  max-width: min(max(75%, 380px), 96%);   /* symmetric room on both sides of center */
}
 
 
/*==================================================================================
  Crash-icon tooltip - moved from the shared left:4% zone to sit closer to its
  own icon. Applies to all three lenses since they share identical coordinates
  for this icon (measured against Aesthetic's screenshot, but the underlying
  position is the same in Human Thriving and Discipleship too).
  Vertical position (top) unchanged - only horizontal zone shifted right.
==================================================================================*/
.tt-aes-crash,
.tt-ht-crash,
.tt-disc-crash {
  left: 46.0%;
  max-width: min(max(46.0%, 380px), calc(100% - 46.0%));
}
 
 
/*==================================================================================
  Warning-icon tooltip ("Risks") - same fix pattern as Crash: moved from the
  shared left:4% zone to sit near its own icon. Warning sits further right
  (cx: 64.4%) than Crash did, so its zone shifts further right too, nearly to
  the image edge. Applies to all three lenses (shared coordinates).
  Vertical position (top) unchanged.
==================================================================================*/
.tt-aes-warning,
.tt-ht-warning,
.tt-disc-warning {
  left: 45.6%;
  max-width: min(max(50.9%, 380px), calc(100% - 45.6%));
}
 
 
/*==================================================================================
  "Worked example" definition popup - v5: bottom-anchored, grows UPWARD from
  just above the title text, instead of top-anchored in the blank margin
  above the circle. Measured against the live three-lens screenshot: title
  top sits at ~24.7% down the image (same position for all three lenses,
  confirmed by their titles lining up in the row) - anchor set to bottom:76%
  (100% - 24.7%, plus a small buffer) so the box's bottom edge sits just
  above the letters, growing up from there as content requires.
 
  No overflow:hidden exists on .qt-wrap in anything we've built, so this
  should be free to spill past the image's own top edge into the page's
  whitespace above it if the text needs more room than the margin provides -
  that's the mechanism, not something requiring extra CSS to enable. If it
  turns out clipped once live, something else in the page chain (outside
  what we've written) is adding overflow:hidden and would need locating.
 
  Horizontal placement (right:2.6%) unchanged from the corner version.
==================================================================================*/
.qt-definition-fixed {
  position: absolute;
  box-sizing: border-box;
  background: #F0FFFF;
  color: #0818A8;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: clamp(12px, 0.95vw, 16px);
  line-height: 1.3;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 10;
  text-align: left;
  width: max-content;
  max-width: min(41%, calc(100% - 2.6%));
  bottom: 76%;
  right: 2.6%;
  left: auto;
  transform: none;
}
 
 
/*==================================================================================
  Hotspot hover feedback - site-wide (.qt-hotspot-shape), so every diagram's
  active icon pulses/glows on hover, not just the circles diagram. :focus
  included alongside :hover at no extra cost - small head start on future
  keyboard-reachability work.
==================================================================================*/
.qt-hotspot-shape {
  border-radius: 50%;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
@keyframes qt-hotspot-pulse {
  0%, 100% { transform: scale(1.05); }
  50%      { transform: scale(1.15); }
}
.qt-hotspot-shape:hover,
.qt-hotspot-shape:focus {
  animation: qt-hotspot-pulse 0.9s ease-in-out infinite;
  box-shadow: 0 0 0 4px rgba(255, 220, 60, 0.55);
}
 
 
/*==================================================================================
  VERTICAL-STACK VARIANT - narrow mobile fix, updated to match
  Same purpose as the original narrow-mobile-fix: force a closer-to-square,
  narrower tooltip on real phones (<=480px), scoped to .qt-tooltip-narrow so it
  can never touch Stewardship's tooltips.
 
  ONLY CHANGE from the original: `left` is now 4% for every single rule, since
  the vertical layout uses one shared horizontal zone for all three circles
  instead of three different left positions (2% / 52% / 20%) for the old
  side-by-side layout. If you're switching this page over to the vertical
  version, this file REPLACES the old narrow-mobile-fix - same selectors,
  different left value, so don't run both at once.
==================================================================================*/
@media (max-width: 480px) {
  .tt-aes-recycle.qt-tooltip-narrow {
    left: 4.0% !important;
    max-width: min(200px, calc(100% - 4.0%)) !important;
  }
  .tt-aes-rockyroad.qt-tooltip-narrow {
    left: 4.0% !important;
    max-width: min(200px, calc(100% - 4.0%)) !important;
  }
  .tt-aes-key.qt-tooltip-narrow {
    left: 4.0% !important;
    max-width: min(200px, calc(100% - 4.0%)) !important;
    transform: none;
  }
  .tt-aes-question.qt-tooltip-narrow {
    left: 4.0% !important;
    max-width: min(200px, calc(100% - 4.0%)) !important;
  }
  .tt-aes-crash.qt-tooltip-narrow {
    left: 4.0% !important;
    max-width: min(200px, calc(100% - 4.0%)) !important;
  }
  .tt-aes-warning.qt-tooltip-narrow {
    left: 4.0% !important;
    max-width: min(200px, calc(100% - 4.0%)) !important;
  }
  .tt-aes-magnifier.qt-tooltip-narrow {
    left: 4.0% !important;
    max-width: min(200px, calc(100% - 4.0%)) !important;
  }
  .tt-ht-question.qt-tooltip-narrow {
    left: 4.0% !important;
    max-width: min(200px, calc(100% - 4.0%)) !important;
  }
  .tt-ht-key.qt-tooltip-narrow {
    left: 4.0% !important;
    max-width: min(200px, calc(100% - 4.0%)) !important;
    transform: none;
  }
  .tt-ht-rockyroad.qt-tooltip-narrow {
    left: 4.0% !important;
    max-width: min(200px, calc(100% - 4.0%)) !important;
  }
  .tt-ht-recycle.qt-tooltip-narrow {
    left: 4.0% !important;
    max-width: min(200px, calc(100% - 4.0%)) !important;
  }
  .tt-ht-warning.qt-tooltip-narrow {
    left: 4.0% !important;
    max-width: min(200px, calc(100% - 4.0%)) !important;
  }
  .tt-ht-crash.qt-tooltip-narrow {
    left: 4.0% !important;
    max-width: min(200px, calc(100% - 4.0%)) !important;
  }
  .tt-ht-magnifier.qt-tooltip-narrow {
    left: 4.0% !important;
    max-width: min(200px, calc(100% - 4.0%)) !important;
  }
  .tt-disc-rockyroad.qt-tooltip-narrow {
    left: 4.0% !important;
    max-width: min(200px, calc(100% - 4.0%)) !important;
  }
  .tt-disc-key.qt-tooltip-narrow {
    left: 4.0% !important;
    max-width: min(200px, calc(100% - 4.0%)) !important;
    transform: none;
  }
  .tt-disc-crash.qt-tooltip-narrow {
    left: 4.0% !important;
    max-width: min(200px, calc(100% - 4.0%)) !important;
  }
  .tt-disc-magnifier.qt-tooltip-narrow {
    left: 4.0% !important;
    max-width: min(200px, calc(100% - 4.0%)) !important;
  }
  .tt-disc-recycle.qt-tooltip-narrow {
    left: 4.0% !important;
    max-width: min(200px, calc(100% - 4.0%)) !important;
  }
  .tt-disc-warning.qt-tooltip-narrow {
    left: 4.0% !important;
    max-width: min(200px, calc(100% - 4.0%)) !important;
  }
  .tt-disc-question.qt-tooltip-narrow {
    left: 4.0% !important;
    max-width: min(200px, calc(100% - 4.0%)) !important;
  }
}