/* chp-prototype.css — research styles only, not the Joomla theme */
#btn-begin,
		.chp-research-root .begin-btn,
		.chp-research-root .path-confirm-continue {
			font-family: "Oswald", system-ui, sans-serif;
			font-weight: 400;
		}
:root{--ri-sticky-header-h:80px}
.ri-local-subnav{--ri-container-max:100%;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:.15rem;width:100%;margin:0;padding:.75rem max(15px,calc((100% - var(--ri-container-max)) / 2 + 15px));border-bottom:1px solid #e5e5e5;background:#fff;overflow-x:auto;box-sizing:border-box;position:sticky;top:var(--ri-sticky-header-h,80px);z-index:40}
@media(min-width:576px){.ri-local-subnav{--ri-container-max:540px}}
@media(min-width:768px){.ri-local-subnav{--ri-container-max:720px}}
@media(min-width:992px){.ri-local-subnav{--ri-container-max:960px}}
@media(min-width:1200px){.ri-local-subnav{--ri-container-max:1140px}}
@media(min-width:1400px){.ri-local-subnav{--ri-container-max:1320px}}
.ri-subnav-link{flex:0 0 auto;white-space:nowrap;font-size:1rem;font-weight:500;color:#555;text-decoration:none;padding:.4rem .55rem;border-radius:999px;line-height:1.25}
.ri-subnav-link.is-active{background:#0174bb;color:#fff}
.ri-subnav-link:hover{color:#1e4384;background:#f3f7fb}

/* research/hub.css */
/* Research + Innovation hub: CHP-native (Quattrocento body, Oswald headings) */
.chp-research-root {
  font-family: "Quattrocento", Georgia, "Times New Roman", serif;
  color: #000;
  padding-bottom: 3rem;
}
.chp-research-root h1,
.chp-research-root h2,
.chp-research-root h3,
.chp-research-root h4,
.chp-research-root .ri-page-hero h2,
.chp-research-root .ri-section h2,
.chp-research-root .ri-door h2,
.chp-research-root .ri-role-card h3,
.chp-research-root .ri-trio-card h3,
.chp-research-root .ri-btn {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
}
/* Width/padding shared with subnav via ri-site.css (Bootstrap .container breakpoints) */
.ri-wrap {
  margin: 0 auto;
  padding-bottom: 2rem;
}

/* Hero */
.ri-hero {
  background: linear-gradient(125deg, #183262 0%, #1e4384 45%, #0174bb 100%);
  color: #fff;
  padding: 2.75rem 0 2.5rem;
  margin-bottom: 0;
}
.ri-hero .ri-wrap {
  padding-bottom: 0;
}
.ri-hero h1 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
}
.ri-hero .lede {
  margin: 0 0 1.25rem;
  max-width: 52ch;
  font-size: 1.1rem;
  line-height: 1.55;
  opacity: 0.95;
}
.ri-hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.ri-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.7rem 1.2rem;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ri-btn-green {
  background: #007947;
  border-color: #007947;
  color: #fff !important;
}
.ri-btn-green:hover {
  background: #005736;
  border-color: #005736;
  color: #fff !important;
}
.ri-btn-white {
  background: transparent;
  border-color: #fff;
  color: #fff !important;
}
.ri-btn-white:hover {
  background: #fff;
  color: #1e4384 !important;
}
.ri-btn-navy {
  background: #1e4384;
  border-color: #1e4384;
  color: #fff !important;
}
.ri-btn-navy:hover {
  background: #183262;
  color: #fff !important;
}
.ri-btn-outline {
  background: #fff;
  border-color: #1e4384;
  color: #1e4384 !important;
}
.ri-btn-outline:hover {
  background: #1e4384;
  color: #fff !important;
}
.ri-btn-sm {
  padding: 0.45rem 0.85rem;
  font-size: 0.88rem;
}

/* Dual / feature panels */
.ri-doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 0 0 2rem;
  position: relative;
  z-index: 2;
}
.ri-doors-single {
  grid-template-columns: 1fr;
  max-width: 640px;
}
@media (max-width: 768px) {
  .ri-doors {
    grid-template-columns: 1fr;
  }
}
.ri-door {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 1.5rem 1.4rem;
  box-shadow: 0 8px 28px rgba(19, 67, 132, 0.1);
}
.ri-door h2 {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
  color: #1e4384;
}
.ri-door .eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0174bb;
  margin: 0 0 0.4rem;
}
.ri-door p {
  margin: 0 0 1rem;
  color: #555;
  font-size: 0.95rem;
  line-height: 1.5;
}
.ri-door .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ri-trust {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7rem;
  font-size: 1.1rem;
  line-height: 1.55;
  color: #3d4650;
  margin: 0 0 2rem;
  padding: 1.25rem 1.35rem;
  background: #f5f8fb;
  border-radius: 8px;
  border: 1px solid #e0eaf3;
}
.ri-trust > span {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  max-width: 100%;
}
.ri-trust span::before {
  content: "✓";
  color: #007947;
  font-weight: 700;
  flex-shrink: 0;
  line-height: inherit;
}

/* Sections */
.ri-section {
  margin: 2.5rem 0;
  scroll-margin-top: 90px;
}
.ri-section h2 {
  margin: 0 0 0.85rem;
  font-size: 1.5rem;
  color: #1e4384;
  line-height: 1.3;
}
/* Lead / intro under section headings: same face as body prose */
.ri-section-lead,
.ri-section .sec-intro {
  margin: 0 0 1.25rem;
  max-width: 68ch;
  font-family: "Quattrocento", Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.65;
  color: #222;
}
.ri-section > .ri-prose {
  margin-top: 0;
}
.ri-section > .ri-prose > p:first-child {
  margin-top: 0;
}
.ri-section > .ri-steps,
.ri-section > .ri-trust,
.ri-section > .ri-role-grid,
.ri-section > .ri-doors {
  margin-top: 0.15rem;
}

.ri-learn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
}
.ri-learn-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 1.1rem 1.15rem;
}
.ri-learn-card h3 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  color: #1e4384;
}
.ri-learn-card p {
  margin: 0;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.5;
}
.ri-learn-card details {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: #333;
}
.ri-learn-card summary {
  cursor: pointer;
  color: #0174bb;
  font-weight: 600;
}

/* Studies */
.ri-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  align-items: center;
}
.ri-filters input,
.ri-filters select {
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.5rem 0.7rem;
  border: 1.5px solid #ddd;
  border-radius: 4px;
  max-width: 100%;
  box-sizing: border-box;
}
.ri-filters input {
  min-width: min(100%, 200px);
  flex: 1 1 12rem;
}
.ri-filters select {
  flex: 0 1 auto;
  min-width: 0;
}
.ri-study-grid {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.ri-study-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 0.8rem 1.2rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1.25rem;
  row-gap: 0.32rem;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  width: 100%;
  box-sizing: border-box;
}
.ri-study-card h3 {
  margin: 0;
  font-size: 1.28rem;
  color: #1e4384;
  line-height: 1.25;
  grid-column: 1;
}
.ri-study-card .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  grid-column: 1;
}
.ri-tag {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: #e8f1f8;
  color: #1e4384;
}
.ri-tag.green {
  background: #e8f5ef;
  color: #005736;
}
.ri-tag.amber {
  background: #fff8e6;
  color: #8a6d1a;
}
.ri-study-card .sum {
  margin: 0;
  font-size: 1.05rem;
  color: #555;
  line-height: 1.4;
  grid-column: 1;
}
.ri-study-card .loc {
  font-size: 0.92rem;
  color: #777;
  grid-column: 1;
}
.ri-study-card .ri-btn {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: center;
  justify-self: end;
  white-space: nowrap;
}

/* Role cards */
.ri-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.85rem;
}
/* Overview hub: even 2 × 2 for four audience cards */
.ri-role-grid-3x2,
.ri-role-grid-2x2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.15rem;
}
/* Overview hub with six role cards (3 × 2) */
.ri-role-grid-explore {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem 1.15rem;
}
.ri-role-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 1.25rem 1.3rem 1.35rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  min-height: 8.5rem;
  height: 100%;
  box-sizing: border-box;
}
.ri-role-card:hover {
  border-color: #0174bb;
  box-shadow: 0 4px 14px rgba(1, 116, 187, 0.1);
  color: inherit;
}
.ri-role-card h3 {
  margin: 0 0 0.45rem;
  font-size: 1.08rem;
  color: #1e4384;
}
.ri-role-card p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #3d4650;
  flex: 1 1 auto;
}

/* Investigator trio */
.ri-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) {
  .ri-trio {
    grid-template-columns: 1fr;
  }
  .ri-role-grid-3x2,
  .ri-role-grid-2x2,
  .ri-role-grid-explore {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.ri-trio-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}
.ri-trio-card h3 {
  margin: 0 0 0.4rem;
  color: #1e4384;
  font-size: 1.1rem;
}
.ri-trio-card p {
  margin: 0 0 1rem;
  color: #555;
  font-size: 0.92rem;
  flex: 1;
}

/* Forms */
.ri-form-panel {
  display: none;
  margin-top: 1.5rem;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 1.35rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.ri-form-panel.is-open {
  display: block;
}
.ri-form-panel h3 {
  margin: 0 0 0.35rem;
  color: #1e4384;
}
.ri-form-panel .form-lead {
  margin: 0 0 1rem;
  color: #555;
  font-size: 0.92rem;
}
.ri-form {
  display: grid;
  gap: 0.75rem;
}
.ri-form label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #1e4384;
}
.ri-form input,
.ri-form select,
.ri-form textarea {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  padding: 0.55rem 0.7rem;
  border: 1.5px solid #ddd;
  border-radius: 4px;
}
.ri-form input:focus,
.ri-form select:focus,
.ri-form textarea:focus {
  outline: none;
  border-color: #0174bb;
  box-shadow: 0 0 0 3px rgba(1, 116, 187, 0.15);
}
.ri-form .row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 600px) {
  .ri-form .row2 {
    grid-template-columns: 1fr;
  }
}

/* Mobile suite: phones & small tablets */
@media (max-width: 768px) {
  /* Horizontal padding for .ri-wrap is owned by ri-site.css (shared with subnav) */
  .ri-hero {
    padding: 1.75rem 0 1.5rem;
  }
  .ri-door {
    padding: 1.15rem 1.05rem;
  }
  .ri-door .actions {
    flex-direction: column;
    align-items: stretch;
  }
  .ri-door .actions .ri-btn {
    width: 100%;
    min-height: 44px;
  }
  .ri-role-grid,
  .ri-role-grid-3x2,
  .ri-role-grid-2x2,
  .ri-role-grid-explore {
    grid-template-columns: 1fr;
  }
  .ri-role-card {
    min-height: 0;
    padding: 1.1rem 1.05rem 1.15rem;
  }
  .ri-btn {
    touch-action: manipulation;
  }
  .ri-form input,
  .ri-form select,
  .ri-form textarea {
    font-size: 16px;
    min-height: 44px;
  }
  .ri-form textarea {
    min-height: 5.5rem;
  }
  .ri-form-panel {
    padding: 1.05rem 0.95rem;
  }
  .ri-trio-card {
    padding: 1.05rem;
  }
  .ri-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .ri-filters input,
  .ri-filters select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    font-size: 16px;
  }
  .ri-study-card {
    padding: 0.85rem 1rem;
    grid-template-columns: 1fr;
  }
  .ri-study-card h3 {
    font-size: 1.18rem;
    overflow-wrap: anywhere;
  }
  .ri-study-card .ri-btn {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-top: 0.15rem;
  }
  .ri-team-bar {
    padding: 1rem 1.05rem;
  }
}

@media (max-width: 380px) {
  .ri-hero h1 {
    font-size: 1.45rem;
  }
  .ri-btn {
    font-size: 0.9rem;
  }
  .ri-role-card h3 {
    font-size: 1.02rem;
  }
}
.ri-form .hint {
  font-size: 0.8rem;
  color: #777;
  font-weight: 400;
  margin: 0;
}
.ri-form-msg {
  display: none;
  padding: 0.75rem 0.9rem;
  border-radius: 6px;
  font-size: 0.92rem;
  margin-top: 0.75rem;
}
.ri-form-msg.ok {
  display: block;
  background: #e8f5ef;
  border: 1px solid #b7dfc9;
  color: #005736;
}
.ri-form-msg.err {
  display: block;
  background: #fdecec;
  border: 1px solid #f0b4b4;
  color: #8b1e1e;
}

/* Team portal teaser */
.ri-team-bar {
  margin-top: 2.5rem;
  padding: 1.1rem 1.25rem;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.ri-team-bar p {
  margin: 0;
  font-size: 0.9rem;
  color: #555;
}
.ri-team-bar a {
  color: #1e4384;
  font-weight: 600;
}

/* Embed survey section */
#investigator-survey.ri-form-panel.is-open {
  max-width: none;
}
#investigator-survey .journey-shell {
  padding: 0;
  max-width: none;
}

/* research/ri-site.css */
/* Shared multi-page R+I site additions */

/*
 * Site header: position:fixed in jwccustom.css + spacer via ri-sticky-chrome.js.
 * Helix scroll-toggle of .header-sticky is disabled (flicker).
 */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/*
 * Uniform vertical rhythm under Research letterhead / subnav:
 *   letterhead → subnav (pad-y) → content text (after-subnav gap)
 * Applied on every R+I nav page so Overview, Studies, Navigator, etc. match.
 */
:root {
  --ri-subnav-pad-y: 0.75rem;
  --ri-after-subnav-gap: 1.5rem;
  /* Overridden by ri-sticky-chrome.js from live #sp-header height */
  --ri-sticky-header-h: 80px;
}

/*
 * Page title bar: match live CHP (Careers / Our Organization / etc.):
 * Quincy CF Black Italic for the large white title (jwccustom.css h1),
 * Quattrocento for the lighter “You are here” breadcrumb.
 */
#sp-page-title .sp-page-title {
  padding: 30px 0;
  background-color: #0174bb;
}
#sp-page-title .sp-page-title-heading,
#sp-page-title h1.sp-page-title-heading,
#sp-page-title .sp-page-title .container > h1 {
  font-family: "QuincyCFBlackItalic", Georgia, "Times New Roman", serif !important;
  font-weight: 400 !important;
  font-style: normal !important; /* face is already italic */
  font-size: clamp(2.15rem, 4.5vw, 3.25rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.04em !important;
  color: #fff !important;
  text-transform: none !important;
  margin: 0 0 0.35rem !important;
  padding: 0 !important;
}
#sp-page-title .mod-breadcrumbs__wrapper {
  clear: both;
}
#sp-page-title .breadcrumb,
#sp-page-title .breadcrumb.px-3,
#sp-page-title .breadcrumb.py-2 {
  margin: 0.5rem 0 0 !important;
  padding: 0 !important;
  background: none !important;
  font-family: "Quattrocento", Georgia, "Times New Roman", serif !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: rgba(255, 255, 255, 0.9) !important;
}
#sp-page-title .breadcrumb a,
#sp-page-title .breadcrumb span,
#sp-page-title .mod-breadcrumbs__item,
#sp-page-title .mod-breadcrumbs__here,
#sp-page-title .breadcrumb-item,
#sp-page-title .breadcrumb-item a,
#sp-page-title .breadcrumb-item + .breadcrumb-item::before {
  font-family: "Quattrocento", Georgia, "Times New Roman", serif !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.9) !important;
}
#sp-page-title .breadcrumb > .active,
#sp-page-title .breadcrumb-item.active,
#sp-page-title .breadcrumb-item.active span {
  display: inline !important;
  color: rgba(255, 255, 255, 0.8) !important;
}
#sp-page-title .breadcrumb {
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  #sp-page-title .sp-page-title {
    padding: 1.15rem 0 1.05rem;
  }
  #sp-page-title .sp-page-title-heading,
  #sp-page-title h1.sp-page-title-heading {
    font-size: clamp(1.55rem, 6.2vw, 2.05rem) !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  #sp-page-title .breadcrumb,
  #sp-page-title .breadcrumb.px-3,
  #sp-page-title .breadcrumb.py-2 {
    font-size: 0.88rem !important;
  }
}

/* Root can span full chrome width; content column is .ri-wrap.
 * Prefer overflow-x:hidden (not clip) so we do not create a sticky-breaking
 * scroll containment for path bar / subnav. */
.chp-research-root {
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
}

/*
 * Shared R+I content column: same responsive max-widths as Bootstrap .container
 * used by the page title bar / body copy, so prose and cards share one left edge.
 */
.ri-wrap {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

@media (min-width: 576px) {
  .ri-wrap {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .ri-wrap {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .ri-wrap {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .ri-wrap {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .ri-wrap {
    max-width: 1320px;
  }
}

/* No extra template padding between letterhead and research subnav */
#sp-main-body:has(.ri-local-subnav) {
  padding-top: 0 !important;
}
#sp-main-body:has(.ri-local-subnav) > .row {
  margin-top: 0;
}
#sp-component:has(.ri-local-subnav),
#sp-component:has(.ri-local-subnav) > .sp-column {
  padding-top: 0;
  margin-top: 0;
}

/*
 * Full-bleed sticky bar; pad so the first tab (Overview) lines up with
 * .ri-wrap / Bootstrap .container content (same left edge as body copy).
 * Formula: (viewport − container max) / 2 + 15px gutter.
 */
.ri-local-subnav {
  --ri-container-max: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  /* Span content column: first tab at left gutter, last char of last tab at right gutter */
  justify-content: space-between;
  gap: 0.15rem;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-top: var(--ri-subnav-pad-y);
  padding-bottom: var(--ri-subnav-pad-y);
  padding-left: max(15px, calc((100% - var(--ri-container-max)) / 2 + 15px));
  padding-right: max(15px, calc((100% - var(--ri-container-max)) / 2 + 15px));
  box-sizing: border-box;
  border-bottom: 1px solid #e5e5e5;
  /* Solid plate: sticky attaches at the TOP of this white bar, not the Overview pill */
  background: #fff;
  position: sticky;
  top: var(--ri-sticky-header-h, 80px);
  z-index: 40;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  /* Keep content from showing through the sticky plate */
  box-shadow: 0 1px 0 #fff;
  /* No transform on sticky elements (compositor flicker on fast scroll) */
  transform: none;
  transition: none;
  animation: none;
  will-change: auto;
}
@media (min-width: 576px) {
  .ri-local-subnav {
    --ri-container-max: 540px;
  }
}
@media (min-width: 768px) {
  .ri-local-subnav {
    --ri-container-max: 720px;
  }
}
@media (min-width: 992px) {
  .ri-local-subnav {
    --ri-container-max: 960px;
  }
}
@media (min-width: 1200px) {
  .ri-local-subnav {
    --ri-container-max: 1140px;
  }
}
@media (min-width: 1400px) {
  .ri-local-subnav {
    --ri-container-max: 1320px;
  }
}

/* Page heroes: consistent left edge within the shared column */
.ri-page-hero {
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}
.ri-page-hero .lede {
  margin-left: 0;
  margin-right: auto;
}

/* Guided / Navigator hero: left-aligned with other R+I pages */
.guided-shell > .ri-page-hero.guided-hero {
  text-align: left;
}
.guided-shell > .ri-page-hero.guided-hero .lede {
  margin-left: 0;
  margin-right: auto;
}

/*
 * "+" in "Research + Innovation": top of the character/text space (cap line),
 * not vertically centered in the line box. text-top (not top) so main-nav
 * links with ~header-tall line-height still keep + with the letter tops.
 */
.chp-nav-plus,
.sp-page-title-heading .chp-nav-plus,
.breadcrumb .chp-nav-plus,
.greeting-kicker .chp-nav-plus,
.ri-page-hero .chp-nav-plus,
.ri-section h2 .chp-nav-plus,
.sp-megamenu-parent > li > a .chp-nav-plus,
.sp-megamenu-parent a .chp-nav-plus,
.offcanvas-menu a .chp-nav-plus {
  display: inline-block;
  line-height: 1 !important;
  vertical-align: text-top !important;
  font-size: 0.82em;
  font-weight: inherit;
  font-style: normal !important;
  position: relative;
  top: 0 !important;
  padding: 0;
  margin: 0 0.04em;
}

/*
 * Page title bar + “You are here” trail: pin + to the top of the text band
 * (Quincy italic + Quattrocento breadcrumb both need a slight lift).
 */
#sp-page-title .sp-page-title-heading .chp-nav-plus,
#sp-page-title h1 .chp-nav-plus {
  vertical-align: top !important;
  font-size: 0.72em !important;
  top: 0.02em !important;
  margin: 0 0.06em;
}
#sp-page-title .breadcrumb .chp-nav-plus,
#sp-page-title .mod-breadcrumbs__item .chp-nav-plus,
#sp-page-title .breadcrumb-item .chp-nav-plus {
  vertical-align: top !important;
  font-size: 0.85em !important;
  top: 0.05em !important;
  margin: 0 0.05em;
}

@media (max-width: 991px) {
  .ri-local-subnav {
    /* JS still sets --ri-sticky-header-h; fallback if script blocked */
    top: var(--ri-sticky-header-h, 64px);
    /* Keep same vertical pad as desktop for uniform gap under letterhead */
    padding-top: var(--ri-subnav-pad-y);
    padding-bottom: var(--ri-subnav-pad-y);
    /* Keep left edge aligned with body; extra room on the right for scroll */
    padding-right: max(
      1.25rem,
      env(safe-area-inset-right),
      calc((100% - var(--ri-container-max)) / 2 + 15px)
    );
    scroll-padding-inline: 0.75rem;
    scroll-snap-type: x proximity;
  }
  .ri-subnav-link {
    font-size: 0.95rem;
    padding: 0.45rem 0.55rem;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    scroll-snap-align: start;
  }
}

@media (max-width: 575px) {
  .ri-local-subnav,
  .ri-wrap {
    padding-left: max(15px, env(safe-area-inset-left));
    padding-right: max(15px, env(safe-area-inset-right));
  }
  .ri-local-subnav {
    top: var(--ri-sticky-header-h, 56px);
    padding-right: max(1.5rem, env(safe-area-inset-right));
  }
  .ri-page {
    padding-top: var(--ri-after-subnav-gap);
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }
  .ri-page-hero {
    margin-bottom: 1.1rem;
  }
  .ri-page-hero h2 {
    font-size: clamp(1.2rem, 5.2vw, 1.35rem);
    line-height: 1.28;
    overflow-wrap: anywhere;
  }
  .ri-page-hero .lede {
    font-size: 0.98rem;
    line-height: 1.55;
  }
  .ri-form-page {
    padding: 1rem 0.9rem;
  }
  .ri-aside {
    padding: 1rem;
  }
  .ri-section {
    margin: 1.75rem 0;
    scroll-margin-top: 120px;
  }
  .ri-section h2 {
    font-size: 1.28rem;
  }
  .ri-prose,
  .ri-page-hero .lede,
  .ri-section-lead {
    font-size: 1rem;
  }
  .ri-steps {
    padding-left: 1.1rem;
  }
}

.ri-hub-main {
  padding-top: 1.5rem;
}

/* Research Navigator flagship band on overview
 * Desktop: title + lead (left) | capability bullets (right) | CTA under left column
 */
.ri-flagship {
  margin: 1.75rem 0 2rem;
}
.ri-flagship-inner {
  background: linear-gradient(135deg, #f0f7fc 0%, #e8f2fa 55%, #f7fafc 100%);
  border: 1px solid #c5d8ec;
  border-left: 5px solid #0174bb;
  border-radius: 12px;
  padding: 1.5rem 1.5rem 1.6rem;
  box-shadow: 0 2px 12px rgba(30, 67, 132, 0.06);
  display: grid;
  grid-template-columns: minmax(0, 36rem) minmax(16rem, 1fr);
  grid-template-areas:
    "copy steps"
    "actions steps";
  column-gap: 1.75rem;
  row-gap: 1.1rem;
  align-items: stretch;
  justify-content: start;
  box-sizing: border-box;
}
.ri-flagship-copy {
  grid-area: copy;
  min-width: 0;
}
.ri-flagship-steps {
  grid-area: steps;
  margin: 0;
  padding: 0.1rem 0 0.05rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 0;
  align-self: stretch;
  justify-self: stretch;
  width: auto;
  max-width: 34rem;
  min-height: 100%;
}
.ri-flagship-actions {
  grid-area: actions;
  margin: 0;
  align-self: end;
}
.ri-flagship .eyebrow {
  font-family: "Oswald", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0174bb;
  margin: 0 0 0.4rem;
}
.ri-flagship h2 {
  margin: 0 0 0.75rem;
  color: #1e4384;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: clamp(1.55rem, 2.8vw, 2rem);
}
.ri-flagship-lead {
  margin: 0;
  max-width: 48ch;
  font-size: 1.08rem;
  line-height: 1.55;
  color: #1a1a1a;
  font-family: "Quattrocento", Georgia, "Times New Roman", serif;
}
.ri-flagship-steps li {
  font-family: "Quattrocento", Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  line-height: 1.45;
  color: #1a1a1a;
  position: relative;
  padding: 0.55rem 0 0.55rem 1.45rem;
  white-space: normal;
  border-bottom: 1px solid rgba(30, 67, 132, 0.1);
}
.ri-flagship-steps li:first-child {
  padding-top: 0.15rem;
}
.ri-flagship-steps li:last-child {
  padding-bottom: 0.15rem;
  border-bottom: 0;
}
.ri-flagship-steps li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0.58rem;
  width: 1rem;
  height: auto;
  border-radius: 0;
  background: none;
  color: #0174bb;
  font-family: "Oswald", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1;
  text-align: left;
  letter-spacing: 0;
}
.ri-flagship-steps li:first-child::before {
  top: 0.18rem;
}
.ri-btn-lg {
  font-size: 1.05rem !important;
  padding: 0.85rem 1.45rem !important;
}
/* Stack on narrow screens: title/lead → steps → CTA */
@media (max-width: 800px) {
  .ri-flagship-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "steps"
      "actions";
    row-gap: 0.9rem;
  }
  .ri-flagship-steps {
    justify-self: start;
    width: auto;
    max-width: none;
    padding-top: 0.15rem;
    min-height: 0;
    justify-content: flex-start;
    gap: 0;
  }
  .ri-flagship-lead {
    max-width: none;
  }
}
@media (max-width: 575px) {
  .ri-flagship-inner {
    padding: 1.15rem 1.05rem 1.25rem;
  }
  .ri-flagship-steps {
    gap: 0.4rem;
  }
}
.ri-subnav-link {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 500;
  color: #555;
  text-decoration: none;
  padding: 0.4rem 0.55rem;
  border-radius: 999px;
  line-height: 1.25;
}
/* Last tab: text ends flush with content column right edge */
.ri-subnav-link:last-child {
  padding-right: 0;
}
.ri-subnav-link:hover {
  color: #1e4384;
  background: #f3f7fb;
}
.ri-subnav-link.is-active {
  background: #0174bb;
  color: #fff;
}
.ri-subnav-link.is-active:last-child {
  padding-right: 0.55rem; /* keep pill padding when Documents is active */
}

/* Extra room on wide screens so all tabs sit on one row without scroll */
@media (min-width: 1200px) {
  .ri-subnav-link {
    padding: 0.4rem 0.5rem;
    font-size: 1rem;
  }
  .ri-subnav-link.is-active:last-child {
    padding-right: 0.5rem;
  }
}
@media (min-width: 1400px) {
  .ri-subnav-link {
    padding: 0.4rem 0.55rem;
    font-size: 1.02rem;
  }
  .ri-subnav-link.is-active:last-child {
    padding-right: 0.55rem;
  }
}

/*
 * Content column under subnav: one shared top gap, then first block
 * must not add extra margin (fixes Studies vs Participants vs Overview drift).
 */
.ri-page {
  padding-top: var(--ri-after-subnav-gap);
}
.ri-page > :first-child {
  margin-top: 0 !important;
}
.ri-page > .ri-section:first-child,
.ri-page > .ri-page-hero:first-child,
.ri-page > header:first-child {
  margin-top: 0 !important;
}
/* Hero → following prose: tight, continuous reading (no “two different blocks”) */
.ri-page-hero {
  margin-top: 0;
  margin-bottom: 0.85rem;
}
.ri-page-hero + .ri-section {
  margin-top: 0.85rem;
}
/* When content starts with a section (most nav pages), no double top spacing */
.ri-page > .ri-section:first-child {
  margin-top: 0;
  padding-top: 0;
}
.ri-page-hero .eyebrow {
  font-family: "Oswald", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0174bb;
  margin: 0 0 0.4rem;
}
.ri-page-hero h2 {
  margin: 0 0 0.85rem;
  color: #1e4384;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.ri-section h2 {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}
/* Lede matches body prose face/size/leading: only slightly softer color */
.ri-page-hero .lede {
  margin: 0;
  max-width: 68ch;
  font-family: "Quattrocento", Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.65;
  color: #222;
}

/* Section headings → body copy spacing (sitewide R+I) */
.chp-research-root .ri-section h2 {
  margin-bottom: 0.85rem;
}
.chp-research-root .ri-section-lead,
.chp-research-root .ri-section .sec-intro {
  margin-top: 0;
  margin-bottom: 1.25rem;
  font-family: "Quattrocento", Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.65;
  color: #222;
}

.ri-steps {
  margin: 0;
  padding-left: 1.25rem;
  color: #333;
  line-height: 1.6;
}
.ri-steps li {
  margin-bottom: 0.65rem;
}

.ri-prose {
  max-width: 68ch;
  font-family: "Quattrocento", Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.65;
  color: #222;
}
.ri-prose p {
  margin: 0 0 1rem;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}
/* Hero lede + following prose read as one column */
.ri-page-hero + .ri-section > .ri-prose > p:first-child {
  margin-top: 0;
}

.ri-two-col {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 900px) {
  .ri-two-col {
    grid-template-columns: 1fr;
  }
}
.ri-aside {
  background: #f5f8fb;
  border: 1px solid #e0eaf3;
  border-radius: 10px;
  padding: 1.15rem 1.25rem;
}
.ri-aside h3 {
  margin: 0 0 0.65rem;
  color: #1e4384;
  font-size: 1.05rem;
}
.ri-aside ol {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  font-size: 0.92rem;
  color: #333;
}
.ri-aside a {
  color: #0174bb;
  font-weight: 600;
}

.ri-form-page {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  padding: 1.5rem 1.35rem 1.75rem;
  box-shadow: 0 4px 18px rgba(24, 50, 98, 0.07);
}
.ri-form-page #interest-heading {
  margin: 0 0 0.35rem;
  color: #183262;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 1.65rem;
}
.ri-form-page .ri-form-head {
  margin-bottom: 1.15rem;
}
.ri-form-page .ri-form-lead {
  margin: 0;
  font-family: "Quattrocento", Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  line-height: 1.55;
  color: #3a4550;
  font-weight: 400;
}
.ri-form-page .survey-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
}
.ri-form.ri-form-page .survey-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #183262;
  min-width: 0;
}
.ri-form-page .survey-field-full {
  grid-column: 1 / -1;
}
.ri-form-page .survey-field > span {
  line-height: 1.3;
}
.ri-form-page .survey-field .hint {
  font-weight: 500;
  color: #6b7c8a;
  font-size: 0.92rem;
}
.ri-form-page .survey-field abbr {
  text-decoration: none;
  border-bottom: none;
  cursor: inherit;
}
.ri-form.ri-form-page .survey-field input,
.ri-form.ri-form-page .survey-field select,
.ri-form.ri-form-page .survey-field textarea {
  font: inherit;
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.4;
  padding: 0.7rem 0.8rem;
  border: 1.5px solid #c5d0dc;
  border-radius: 8px;
  color: #1a2028;
  background: #fafcfe;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
.ri-form.ri-form-page .survey-field select {
  min-height: 3.15rem;
  padding-right: 2.4rem;
}
.ri-form.ri-form-page .survey-field input:focus,
.ri-form.ri-form-page .survey-field select:focus,
.ri-form.ri-form-page .survey-field textarea:focus {
  outline: none;
  border-color: #36454f;
  box-shadow: 0 0 0 3px rgba(54, 69, 79, 0.16);
  background: #fff;
}
.ri-form-page .survey-note {
  margin: 1rem 0 1.1rem;
  font-family: "Quattrocento", Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  line-height: 1.55;
  color: #3a4550;
}
.ri-form-page .survey-actions,
.ri-form-page .ri-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin-top: 0.15rem;
}
.ri-form-page .survey-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Oswald", system-ui, sans-serif;
  font-size: 1.12rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.2;
  min-height: 3.1rem;
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
}
.ri-form-page .survey-btn-primary {
  background: #1e4384;
  border-color: #1e4384;
  color: #fff;
  box-shadow: 0 2px 8px rgba(30, 67, 132, 0.22);
}
.ri-form-page .survey-btn-primary:hover:not(:disabled) {
  background: #183262;
  border-color: #183262;
  color: #fff;
  outline: 2px solid #1e4384;
  outline-offset: 2px;
  box-shadow: 0 3px 12px rgba(24, 50, 98, 0.28);
}
.ri-form-page .survey-btn-primary.is-submitted,
.ri-form-page .survey-btn-primary.is-submitted:disabled {
  opacity: 1;
  cursor: default;
  background: #0d7a4f;
  border-color: #0d7a4f;
  color: #fff;
  gap: 0.4rem;
}
.ri-form-page .survey-submit-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  font-weight: 800;
  font-size: 0.85rem;
  line-height: 1;
}
.ri-form-page .survey-btn-outline {
  background: #fff;
  color: #12264a;
  border-color: #5a7390;
  box-shadow: 0 2px 8px rgba(30, 67, 132, 0.1);
}
.ri-form-page .survey-btn-outline:hover {
  border-color: #0174bb;
  color: #0b4f80;
  outline: 2px solid #5a7390;
  outline-offset: 2px;
  box-shadow: 0 3px 12px rgba(24, 50, 98, 0.16);
}
.ri-form.ri-form-page .ri-form-msg {
  display: none;
  margin-top: 0.85rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
}
.ri-form.ri-form-page .ri-form-msg.ok {
  display: block;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.ri-form.ri-form-page .ri-form-msg.err {
  display: block;
  background: #fef2f2;
  color: #9b1c1c;
  border: 1px solid #fecaca;
}
.ri-form-page .survey-field-error,
.ri-form-page .ri-field-error {
  margin: 0;
  padding: 0.4rem 0.55rem;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  color: #9b1c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 7px;
}
.ri-form-page .survey-field-error[hidden],
.ri-form-page .ri-field-error[hidden],
.ri-form-page .survey-error[hidden] {
  display: none !important;
}
.ri-form-page .survey-error {
  margin: 0.65rem 0 0;
  padding: 0.55rem 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: #9b1c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
}
.ri-form.ri-form-page .survey-field input.is-invalid,
.ri-form.ri-form-page .survey-field input[aria-invalid="true"] {
  border-color: #dc2626;
  background: #fff8f8;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.ri-form.ri-form-page .survey-field input.is-invalid:focus,
.ri-form.ri-form-page .survey-field input[aria-invalid="true"]:focus {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}
.ri-form-page #interest-lead,
.ri-form-page .ri-form-study-title {
  margin: 0.15rem 0 0.5rem;
  color: #1e4384;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.ri-form-page #interest-sublead {
  margin-bottom: 0.85rem;
}

/* Forms & buttons: mobile-friendly defaults */
@media (max-width: 640px) {
  .ri-btn {
    min-height: 44px;
    padding: 0.65rem 1rem;
    box-sizing: border-box;
  }
  .ri-form input,
  .ri-form select,
  .ri-form textarea,
  .ri-form-page input,
  .ri-form-page select,
  .ri-form-page textarea {
    font-size: 16px !important; /* prevent iOS zoom on focus */
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  .ri-form-page .survey-fields {
    grid-template-columns: 1fr;
  }
  .ri-form-page .survey-actions,
  .ri-form-page .ri-form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .ri-form-page .survey-btn {
    width: 100%;
  }
  .ri-hero-links,
  .actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .ri-hero-links .ri-btn,
  .actions .ri-btn {
    flex: 1 1 auto;
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  /* Stack CTA rows used across hub pages (buttons as direct children of <p>) */
  .chp-research-root p:has(> .ri-btn) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .chp-research-root p:has(> .ri-btn) > .ri-btn {
    width: 100%;
    margin: 0 !important;
    text-align: center;
    justify-content: center;
  }
  .ri-flagship-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .ri-flagship-actions .ri-btn {
    width: 100%;
    text-align: center;
  }
  /* Avoid accidental horizontal pan from wide content (hidden, not clip — sticky-safe) */
  .chp-research-root,
  .ri-wrap,
  .ri-page {
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
  }
  .ri-prose,
  .ri-page-hero .lede,
  .ri-section-lead {
    overflow-wrap: break-word;
  }
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ri-subnav-link,
  .ri-btn {
    transition: none;
  }
}

/* research/documents.css */
/* Research + Innovation — Documents library */

.ri-docs-library {
  margin-top: 0.5rem;
}

.ri-docs-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  margin-bottom: 1.1rem;
}

.ri-docs-header h2 {
  margin: 0;
  font-family: Oswald, "Arial Narrow", sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1e4384;
  font-size: 1.45rem;
}

.ri-docs-count {
  margin: 0;
  color: #5c6670;
  font-size: 0.95rem;
}

.ri-docs-toolbar {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 0.85rem 1rem;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid #d8dee6;
  border-radius: 12px;
  margin-bottom: 0.85rem;
  box-shadow: 0 1px 0 rgba(30, 67, 132, 0.04);
}

.ri-docs-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.ri-docs-field label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5c6670;
}

.ri-docs-field input[type="search"],
.ri-docs-field select {
  appearance: none;
  width: 100%;
  border: 1.5px solid #c5ced8;
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-size: 0.95rem;
  color: #1a1a1a;
  background: #fafbfc;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ri-docs-field input[type="search"]:focus,
.ri-docs-field select:focus {
  outline: none;
  border-color: #0174bb;
  box-shadow: 0 0 0 3px rgba(1, 116, 187, 0.18);
  background: #fff;
}

.ri-docs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.15rem;
}

.ri-docs-chip {
  border: 1.5px solid #c5ced8;
  background: #fff;
  color: #1e4384;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ri-docs-chip:hover {
  border-color: #0174bb;
  color: #0174bb;
}

.ri-docs-chip.is-active {
  background: #0174bb;
  border-color: #0174bb;
  color: #fff;
}

.ri-docs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.ri-docs-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 1.25rem;
  align-items: center;
  padding: 1.15rem 1.25rem;
  background: #fff;
  border: 1px solid #d8dee6;
  border-radius: 12px;
  border-left: 4px solid #0174bb;
  box-shadow: 0 1px 2px rgba(26, 32, 44, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ri-docs-card:hover {
  border-color: #b7c5d6;
  box-shadow: 0 4px 14px rgba(30, 67, 132, 0.08);
}

.ri-docs-card[data-type="flowchart"] {
  border-left-color: #1e4384;
}
.ri-docs-card[data-type="sop"] {
  border-left-color: #5b4b8a;
}
.ri-docs-card[data-type="work-aid"] {
  border-left-color: #0d6e63;
}
.ri-docs-card[data-type="reference"] {
  border-left-color: #007947;
}
.ri-docs-card[data-type="form"] {
  border-left-color: #b86e00;
}

.ri-docs-card-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
}

.ri-docs-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: #e8f1f8;
  color: #1e4384;
}

.ri-docs-badge-flowchart {
  background: #e3eaf5;
  color: #1e4384;
}
.ri-docs-badge-sop {
  background: #ede7f6;
  color: #5b4b8a;
}
.ri-docs-badge-work-aid {
  background: #d5f0eb;
  color: #0d6e63;
}
.ri-docs-badge-reference {
  background: #c8e6c9;
  color: #007947;
}
.ri-docs-badge-form {
  background: #fff3cd;
  color: #b86e00;
}

.ri-docs-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

.ri-docs-pill-placeholder {
  background: #fff3cd;
  color: #8a5a00;
}

.ri-docs-pill-live {
  background: #e6f4ec;
  color: #007947;
}

.ri-docs-card-title {
  margin: 0 0 0.4rem;
  font-size: 1.12rem;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.3;
}

.ri-docs-card-summary {
  margin: 0 0 0.75rem;
  color: #3d4650;
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 52rem;
}

.ri-docs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.35rem;
  margin: 0;
}

.ri-docs-meta div {
  margin: 0;
}

.ri-docs-meta dt {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7a8490;
  margin: 0 0 0.1rem;
}

.ri-docs-meta dd {
  margin: 0;
  font-size: 0.88rem;
  color: #2c333a;
}

.ri-docs-card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 8.5rem;
}

.ri-docs-card-actions .ri-btn {
  text-align: center;
  justify-content: center;
  white-space: nowrap;
}

.ri-docs-empty {
  text-align: center;
  padding: 2.25rem 1.25rem;
  background: #f5f7fa;
  border: 1px dashed #c5ced8;
  border-radius: 12px;
  color: #5c6670;
}

.ri-docs-empty p {
  margin: 0 0 1rem;
}

@media (max-width: 900px) {
  .ri-docs-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  .ri-docs-field-search {
    grid-column: 1 / -1;
  }
  .ri-docs-card {
    grid-template-columns: 1fr;
    padding: 1.05rem 1.05rem;
  }
  .ri-docs-card-actions {
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 0;
  }
  .ri-docs-card-actions .ri-btn {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
  }
}

@media (max-width: 560px) {
  .ri-docs-toolbar {
    grid-template-columns: 1fr;
    padding: 0.85rem 0.9rem;
  }
  .ri-docs-field input[type="search"],
  .ri-docs-field select {
    font-size: 16px; /* prevent iOS zoom */
    min-height: 44px;
  }
  .ri-docs-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .ri-docs-header h2 {
    font-size: 1.25rem;
  }
  .ri-docs-chips {
    gap: 0.35rem;
    margin-bottom: 0.95rem;
  }
  .ri-docs-chip {
    min-height: 36px;
    padding: 0.35rem 0.7rem;
  }
  .ri-docs-card-title {
    font-size: 1.05rem;
    overflow-wrap: anywhere;
  }
  .ri-docs-card-summary {
    font-size: 0.92rem;
  }
  .ri-docs-meta {
    flex-direction: column;
    gap: 0.45rem;
  }
  .ri-docs-card-actions {
    flex-direction: column;
  }
  .ri-docs-card-actions .ri-btn {
    width: 100%;
  }
}

/* research/guided-survey-skin.css */
/**
 * CHP chrome skin for embedded guided pathway (walk + full map).
 * Keeps lane colors, cards, panels, triptych: only outer chrome / toolbar.
 */

/* Undo global body rules from guided-pathway.css when embedded on CHP pages.
 * Do NOT set overflow-x:clip on body — that creates a scroll containment and
 * breaks / flickers position:sticky on the site header and path bar. */
html {
  scroll-behavior: auto !important;
}
body {
  background: #fff !important;
  scroll-behavior: auto !important;
}

/* Page sits inside R+I wrap; pathway body bg should not fight the site */
.chp-research-root .gp-root.gp-embedded {
  --font: "Quattrocento", Georgia, "Times New Roman", serif;
  --font-heading: "Oswald", system-ui, sans-serif;
  /* Parent .ri-wrap is the shared R+I column; stay full width of that column */
  --max: 100%;
  background: transparent;
  color: #1a1a1a;
  font-family: var(--font);
  font-size: 1.12rem; /* larger base body text */
  font-weight: 400;
  line-height: 1.55;
}
.chp-research-root .gp-root.gp-embedded h1,
.chp-research-root .gp-root.gp-embedded h2,
.chp-research-root .gp-root.gp-embedded h3,
.chp-research-root .gp-root.gp-embedded .tb-btn,
.chp-research-root .gp-root.gp-embedded .begin-btn,
.chp-research-root .gp-root.gp-embedded .choice-title,
.chp-research-root .gp-root.gp-embedded .stage-num,
.chp-research-root .gp-root.gp-embedded .algo-lane-title,
.chp-research-root .gp-root.gp-embedded .algo-level-label,
.chp-research-root .gp-root.gp-embedded .algo-panel-title,
.chp-research-root .gp-root.gp-embedded .survey-btn,
.chp-research-root .gp-root.gp-embedded .survey-eyebrow,
.chp-research-root .gp-root.gp-embedded .interest-panel-head {
  font-family: var(--font-heading);
  font-weight: 400 !important;
}

/* No bold anywhere in the embedded Navigator UI */
.chp-research-root .gp-root.gp-embedded,
.chp-research-root .gp-root.gp-embedded *:not(svg):not(path) {
  font-weight: 400 !important;
}
.chp-research-root .gp-root.gp-embedded strong,
.chp-research-root .gp-root.gp-embedded b,
.chp-research-root .guided-shell strong,
.chp-research-root .guided-shell b {
  font-weight: 400 !important;
}

/* Card option labels: larger, regular weight across walk + full map */
.chp-research-root .gp-root.gp-embedded .opts > li.teach-choice .choice-title {
  font-size: 1.32rem;
  font-weight: 400 !important;
  line-height: 1.35;
}
.chp-research-root .gp-root.gp-embedded .person-grid > .teach-choice .choice-title {
  font-size: 1.28rem;
  font-weight: 400 !important;
}
.chp-research-root .gp-root.gp-embedded .interest-panel .teach-choice .choice-title {
  font-size: 1.22rem;
  font-weight: 400 !important;
}

/*
 * Done / triptych: same regular-weight titles as the live option cards.
 * Applies to the selected card and the side stacks.
 */
body.mode-walk .chp-research-root .gp-root.gp-embedded [data-node].is-done .choice-title,
body.mode-walk .chp-research-root .gp-root.gp-embedded [data-node].is-done .opts > li.teach-choice .choice-title,
body.mode-walk .chp-research-root .gp-root.gp-embedded [data-node].is-done .interest-panel .teach-choice .choice-title,
body.mode-walk .chp-research-root .gp-root.gp-embedded [data-node].is-done .person-grid > .teach-choice .choice-title,
body.mode-walk .chp-research-root .gp-root.gp-embedded [data-node].is-done .choice-side-left > li.teach-choice .choice-title,
body.mode-walk .chp-research-root .gp-root.gp-embedded [data-node].is-done .choice-side-right > li.teach-choice .choice-title,
body.mode-walk .chp-research-root .gp-root.gp-embedded [data-node].is-done .choice-side-center > li.teach-choice .choice-title {
  font-size: 1.32rem !important;
  font-weight: 400 !important;
  line-height: 1.35;
}
.chp-research-root .gp-root.gp-embedded.mode-map .opts > li.teach-choice .choice-title,
body.mode-map .chp-research-root .gp-root.gp-embedded .opts > li.teach-choice .choice-title {
  font-size: 1.18rem;
  font-weight: 400 !important;
}

/* Walk question headers */
.chp-research-root .gp-root.gp-embedded .stage h2 {
  font-family: "Oswald", system-ui, sans-serif;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 400 !important;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #36454f;
  line-height: 1.3;
}
.chp-research-root .gp-root.gp-embedded .stage-num {
  width: 2.15rem;
  height: 2.15rem;
  font-size: 1rem;
  font-weight: 400 !important;
  background: #36454f !important;
}
body.mode-walk .chp-research-root .gp-root.gp-embedded .stage-num {
  display: none !important;
}
.chp-research-root .gp-root.gp-embedded .stage .line {
  background: #36454f;
}

/* Pathway identity: only after a lane is chosen. Neutral / root / merge stay charcoal. */
body.mode-walk .chp-research-root .gp-root.gp-embedded .stage:has(+ [data-path="research"]) .stage-num {
  background: #0174bb !important;
}
body.mode-walk .chp-research-root .gp-root.gp-embedded .stage:has(+ [data-path="research"]) h2 {
  color: #0174bb !important;
}
body.mode-walk .chp-research-root .gp-root.gp-embedded .stage:has(+ [data-path="research"]) .line {
  background: #0174bb;
}
body.mode-walk .chp-research-root .gp-root.gp-embedded .stage:has(+ [data-path="not_hsr"]) .stage-num,
body.mode-walk .chp-research-root .gp-root.gp-embedded .stage:has(+ [data-path="care"]) .stage-num {
  background: #7c6ba8 !important;
}
body.mode-walk .chp-research-root .gp-root.gp-embedded .stage:has(+ [data-path="not_hsr"]) h2,
body.mode-walk .chp-research-root .gp-root.gp-embedded .stage:has(+ [data-path="care"]) h2 {
  color: #7c6ba8 !important;
}
body.mode-walk .chp-research-root .gp-root.gp-embedded .stage:has(+ [data-path="not_hsr"]) .line,
body.mode-walk .chp-research-root .gp-root.gp-embedded .stage:has(+ [data-path="care"]) .line {
  background: #7c6ba8;
}
body.mode-walk .chp-research-root .gp-root.gp-embedded .stage:has(+ [data-path="informational"]) .stage-num {
  background: #0d7a7a !important;
}
body.mode-walk .chp-research-root .gp-root.gp-embedded .stage:has(+ [data-path="informational"]) h2 {
  color: #0d7a7a !important;
}
body.mode-walk .chp-research-root .gp-root.gp-embedded .stage:has(+ [data-path="informational"]) .line {
  background: #0d7a7a;
}

/* Teaching bullets and intros */
.chp-research-root .gp-root.gp-embedded .teach-points,
.chp-research-root .gp-root.gp-embedded .teach-points p,
.chp-research-root .gp-root.gp-embedded .intro,
.chp-research-root .gp-root.gp-embedded .path-confirm-lede,
.chp-research-root .gp-root.gp-embedded .path-confirm-hint {
  font-size: 1.12rem;
  font-weight: 400 !important;
  line-height: 1.55;
}
.chp-research-root .gp-root.gp-embedded .survey-lede {
  font-size: 1.2rem;
  font-weight: 400 !important;
  line-height: 1.55;
}

/* Hero: left-aligned with body column (same indent as other R+I pages) */
.chp-research-root .guided-shell > .ri-page-hero.guided-hero {
  text-align: left;
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 1.25rem;
}
/* Match .ri-page-hero .lede / .ri-prose on Investigators and other R+I pages exactly */
.chp-research-root .guided-shell > .ri-page-hero.guided-hero .lede,
.chp-research-root .guided-shell .ri-page-hero .lede {
  max-width: 68ch !important;
  margin: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
  font-family: "Quattrocento", Georgia, "Times New Roman", serif !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #222 !important;
  letter-spacing: normal !important;
}
.chp-research-root .guided-shell,
.chp-research-root .guided-shell .lede,
.chp-research-root .guided-shell strong,
.chp-research-root .guided-shell b {
  font-weight: 400 !important;
}

/*
 * Pathway content lives inside .ri-wrap (already the shared R+I column).
 * Do not re-apply max-width + horizontal padding or content double-indents
 * relative to the page hero and subnav.
 */
/* Main walk column: fill the R+I wrap */
.chp-research-root .gp-root.gp-embedded .gp-main.wrap {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* Toolbar shell: no extra horizontal pad; width is set below (hug buttons) */
.chp-research-root .gp-root.gp-embedded .walk-toolbar-inner.wrap {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  /* Critical: do not force width:100% here — that overrides fit-content on the card */
}

/* Toolbar: left-aligned action card (flagship-style container) */
.chp-research-root .gp-root.gp-embedded .walk-toolbar {
  position: relative;
  top: auto;
  z-index: 35;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  margin: 0 0 1.35rem;
  padding: 0;
}

/*
 * After Get started: path bar docks to the bottom of the viewport (fixed).
 * JS (guided-pathway.js) raises bottom when #sp-footer enters the viewport so
 * the bar rides above the footer instead of covering it. No sticky-at-top.
 * A #walk-toolbar-placeholder holds the former in-flow height so content does
 * not jump upward when the bar leaves document flow.
 */
.chp-research-root .gp-root.gp-embedded .walk-toolbar.is-started {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  z-index: 120;
  width: 100%;
  max-width: none;
  margin: 0;
  /* Full window width (small side pads only); blue card centers and grows inside */
  padding: 0.65rem 1rem;
  box-sizing: border-box;
  background: transparent;
  border-top: none;
  border-bottom: none;
  box-shadow: none;
  transform: none;
  transition: none;
  animation: none;
  will-change: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*
 * Get started: JS pins the card at its in-flow rect, then eases top/left/width
 * to the sticky plate. Inline styles own the flight; this only marks the phase.
 */
.chp-research-root .gp-root.gp-embedded .walk-toolbar.is-docking {
  position: fixed !important;
  z-index: 120;
  margin: 0 !important;
  max-width: none;
  pointer-events: none;
  overflow: visible !important;
  isolation: isolate;
  will-change: top, left, width, padding, background-color, box-shadow;
}

/* Full-window plate from a given top to the viewport bottom. Transparent so
 * the path bar sits on the page without a white band. */
.walk-toolbar-footer-mask {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 119;
  background: transparent;
  pointer-events: none;
}

/* Freeze scroll-anchoring while the bar docks and step 1 appears. */
.chp-research-root .gp-root.gp-embedded.is-begin-holding,
.body-wrapper.is-begin-holding {
  overflow-anchor: none;
}

/* Do not grow the page (scrollbar) until the bar has finished sliding down. */
.chp-research-root .gp-root.gp-embedded.is-begin-holding:has(.walk-toolbar.is-docking) {
  padding-bottom: 0;
}

.chp-research-root .gp-root.gp-embedded .walk-toolbar-placeholder {
  display: block;
  width: 100%;
  margin: 0 0 1.35rem;
  padding: 0;
  border: 0;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
  flex-shrink: 0;
}
.chp-research-root .gp-root.gp-embedded .walk-toolbar-placeholder[hidden] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
}

/* Map mode: same fixed bottom path bar as walk (no relative undock) */

/* Clearance so last step / map / survey is not hidden under the bottom plate */
.chp-research-root .gp-root.gp-embedded:has(.walk-toolbar.is-started) {
  --walk-toolbar-h: 4.75rem;
  padding-bottom: calc(var(--walk-toolbar-h) + 1.25rem);
}
body.mode-map .chp-research-root .gp-root.gp-embedded:has(.walk-toolbar.is-started) {
  padding-bottom: calc(var(--walk-toolbar-h) + 1.5rem);
}

@media (max-width: 575px) {
  .chp-research-root .gp-root.gp-embedded .begin-btn {
    width: auto;
    max-width: none;
    min-width: 0;
    min-height: 2.9rem;
    font-size: 1.02rem;
    padding: 0.55rem 1.1rem;
  }
  .chp-research-root .gp-root.gp-embedded .begin-card {
    padding: 1.25rem 1rem 1.35rem;
  }
  .chp-research-root .gp-root.gp-embedded .opts > li.teach-choice .choice-title {
    font-size: 1.08rem;
  }
  .chp-research-root .gp-root.gp-embedded .person-grid > .teach-choice .choice-title {
    font-size: 1.05rem;
  }
  .chp-research-root .gp-root.gp-embedded .interest-panel .teach-choice .choice-title {
    font-size: 1.02rem;
  }
  body.mode-walk .chp-research-root .gp-root.gp-embedded [data-node].is-done .choice-title,
  body.mode-walk .chp-research-root .gp-root.gp-embedded [data-node].is-done .opts > li.teach-choice .choice-title,
  body.mode-walk .chp-research-root .gp-root.gp-embedded [data-node].is-done .interest-panel .teach-choice .choice-title,
  body.mode-walk .chp-research-root .gp-root.gp-embedded [data-node].is-done .person-grid > .teach-choice .choice-title,
  body.mode-walk .chp-research-root .gp-root.gp-embedded [data-node].is-done .choice-side-left > li.teach-choice .choice-title,
  body.mode-walk .chp-research-root .gp-root.gp-embedded [data-node].is-done .choice-side-right > li.teach-choice .choice-title,
  body.mode-walk .chp-research-root .gp-root.gp-embedded [data-node].is-done .choice-side-center > li.teach-choice .choice-title {
    font-size: 1.12rem !important;
    font-weight: 400 !important;
    line-height: 1.35;
  }
  .chp-research-root .gp-root.gp-embedded .walk-toolbar-inner {
    gap: 0.45rem;
  }
  .chp-research-root .gp-root.gp-embedded .tb-btn,
  .chp-research-root .gp-root.gp-embedded .survey-btn,
  .chp-research-root .gp-root.gp-embedded .choice-confirm-btn,
  .chp-research-root .gp-root.gp-embedded .choice-another-btn,
  .chp-research-root .gp-root.gp-embedded .done-change {
    min-height: 2.9rem;
    font-size: 1.02rem !important;
    padding: 0.55rem 1.1rem;
  }
  .chp-research-root .gp-root.gp-embedded .path-summary,
  .chp-research-root .gp-root.gp-embedded .path-kicker,
  .chp-research-root .gp-root.gp-embedded .path-chip {
    font-size: 0.95rem;
    line-height: 1.4;
  }
  .chp-research-root .guided-shell > .ri-page-hero.guided-hero {
    max-width: none;
    margin-bottom: 1.1rem;
  }
  .chp-research-root .gp-root.gp-embedded {
    /* Clip wide map without creating a vertical scrollport (sticky-safe) */
    overflow-x: hidden;
    overflow-y: visible;
  }
  /* Outline + offset paint outside the box and were clipped by overflow-x.
   * Inset the rec panel so both charcoal rings stay fully visible. */
  body.mode-walk .chp-research-root .gp-root.gp-embedded .box.endpoint.is-reached,
  body.mode-walk .chp-research-root .gp-root.gp-embedded .box.endpoint.is-current {
    width: calc(100% - 1rem);
    max-width: calc(100% - 1rem);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
}

.chp-research-root .gp-root.gp-embedded .walk-toolbar-inner,
.chp-research-root .gp-root.gp-embedded .walk-toolbar-inner.wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  /* Hug the buttons — do not stretch a full-width empty rail under the lede */
  width: fit-content !important;
  max-width: 100%;
  margin: 0;
  padding: 0.55rem 0.65rem;
  box-sizing: border-box;
  background: #eef1f3;
  border: 2px solid #c5d0dc;
  border-radius: 10px;
  box-shadow: none;
}
.chp-research-root .gp-root.gp-embedded .walk-toolbar[data-path="research"] .walk-toolbar-inner,
.chp-research-root .gp-root.gp-embedded .walk-toolbar[data-path="research"] .walk-toolbar-inner.wrap {
  background: #eef6fc;
  border-color: #8eb8dc;
}
.chp-research-root .gp-root.gp-embedded .walk-toolbar[data-path="not_hsr"] .walk-toolbar-inner,
.chp-research-root .gp-root.gp-embedded .walk-toolbar[data-path="not_hsr"] .walk-toolbar-inner.wrap,
.chp-research-root .gp-root.gp-embedded .walk-toolbar[data-path="care"] .walk-toolbar-inner,
.chp-research-root .gp-root.gp-embedded .walk-toolbar[data-path="care"] .walk-toolbar-inner.wrap {
  background: #f0ebf8;
  border-color: #c5b8e0;
}
.chp-research-root .gp-root.gp-embedded .walk-toolbar[data-path="informational"] .walk-toolbar-inner,
.chp-research-root .gp-root.gp-embedded .walk-toolbar[data-path="informational"] .walk-toolbar-inner.wrap {
  background: #e6f6f5;
  border-color: #9dccc9;
}

/* When path chips appear: grow the card with bubbles up to the window width */
.chp-research-root .gp-root.gp-embedded .walk-toolbar-inner:has(.path-summary:not([hidden])),
.chp-research-root .gp-root.gp-embedded .walk-toolbar-inner.wrap:has(.path-summary:not([hidden])) {
  width: fit-content !important;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.chp-research-root .gp-root.gp-embedded .walk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-start;
  align-items: center;
}

.chp-research-root .gp-root.gp-embedded .walk-actions .begin-btn[hidden],
.chp-research-root .gp-root.gp-embedded .walk-actions .tb-btn[hidden] {
  display: none !important;
}

/* Shared control height so toolbar CTAs share one baseline */
.chp-research-root .gp-root.gp-embedded .walk-actions .begin-btn,
.chp-research-root .gp-root.gp-embedded .walk-actions .tb-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  margin: 0;
  vertical-align: middle;
  line-height: 1.2;
}

/*
 * Get started: same navy family as .tb-primary, slightly larger + soft shadow
 * so it stands out without the old teal gradient “sore thumb”.
 */
.chp-research-root .gp-root.gp-embedded .walk-actions .begin-btn {
  width: auto;
  min-width: 8.5rem;
  min-height: 2.9rem;
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  font-family: "Oswald", system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 400 !important;
  letter-spacing: 0.03em;
  color: #fff;
  background: #1e4384;
  border: 1.5px solid #1e4384;
  box-shadow: 0 2px 8px rgba(30, 67, 132, 0.22);
  cursor: pointer;
  touch-action: manipulation;
}
.chp-research-root .gp-root.gp-embedded .walk-actions .begin-btn:hover:not(:disabled),
.chp-research-root .gp-root.gp-embedded .walk-actions .begin-btn:focus-visible {
  background: #183262;
  border-color: #183262;
  color: #fff;
  outline: 2px solid #1e4384;
  outline-offset: 2px;
  box-shadow: 0 3px 12px rgba(24, 50, 98, 0.28);
}

/*
 * Command buttons share Get started chrome (Oswald, size, padding, radius).
 * Colors stay with each variant below.
 */
.chp-research-root .gp-root.gp-embedded .tb-btn,
.chp-research-root .gp-root.gp-embedded .survey-btn,
.chp-research-root .gp-root.gp-embedded .path-confirm-continue,
.chp-research-root .gp-root.gp-embedded .choice-confirm-btn,
.chp-research-root .gp-root.gp-embedded .choice-another-btn,
.chp-research-root .gp-root.gp-embedded .done-change,
.chp-research-root .gp-root.gp-embedded .ep-overview-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Oswald", system-ui, sans-serif;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.03em;
  line-height: 1.2;
  min-height: 2.9rem;
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  border-width: 1.5px;
  border-style: solid;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
}

.chp-research-root .gp-root.gp-embedded .tb-btn {
  background: #fff;
  color: #183262;
  border-color: #9aabbc;
}

.chp-research-root .gp-root.gp-embedded .tb-btn:hover:not(:disabled) {
  border-color: #36454f;
  color: #36454f;
}

.chp-research-root .gp-root.gp-embedded .tb-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.chp-research-root .gp-root.gp-embedded .tb-btn.tb-primary {
  background: #1e4384;
  border-color: #1e4384;
  color: #fff;
}

.chp-research-root .gp-root.gp-embedded .tb-btn.tb-primary:hover:not(:disabled) {
  background: #183262;
  border-color: #183262;
  color: #fff;
}

.chp-research-root .gp-root.gp-embedded .path-summary {
  /* Grow with chips on one line; wrap chips only once the blue card is at max width */
  flex: 1 1 auto;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  text-align: left;
  font-size: 1rem;
  color: #36454f;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}
.chp-research-root .gp-root.gp-embedded .path-kicker {
  font-size: 1rem;
  line-height: inherit;
  font-family: inherit;
  letter-spacing: normal;
}

/* Path chips: stay inline while the bar can still grow */
.chp-research-root .gp-root.gp-embedded .path-summary .path-chip {
  white-space: nowrap;
}

/* Pre-start: no sticky chrome bar; card sits in document flow under lede */
.chp-research-root .gp-root.gp-embedded .walk-toolbar.is-prestart {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  /* Hug View full map + Get started (not stretched to lede width) */
  width: fit-content;
  max-width: 100%;
  margin-left: 0;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 1.35rem;
  padding: 0;
  background: transparent;
  border-top: none;
  border-bottom: none;
  box-shadow: none;
  box-sizing: border-box;
}
/* Pre-start: blue inner hugs the two buttons */
.chp-research-root .gp-root.gp-embedded .walk-toolbar.is-prestart .walk-toolbar-inner,
.chp-research-root .gp-root.gp-embedded .walk-toolbar.is-prestart .walk-toolbar-inner.wrap {
  width: fit-content !important;
  max-width: 100%;
  box-sizing: border-box;
}

/*
 * Mobile start card: keep View full map + Get started as a side-by-side pair.
 * Base 640px rules stretch .tb-btn to 100% and stack the inner as a column,
 * which turns View full map into a full-width bar above Get started.
 */
@media (max-width: 767px) {
  .chp-research-root .gp-root.gp-embedded .walk-toolbar.is-prestart {
    width: fit-content;
    max-width: 100%;
  }
  .chp-research-root .gp-root.gp-embedded .walk-toolbar.is-prestart .walk-toolbar-inner,
  .chp-research-root .gp-root.gp-embedded .walk-toolbar.is-prestart .walk-toolbar-inner.wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: fit-content !important;
    max-width: 100%;
  }
  .chp-research-root .gp-root.gp-embedded .walk-toolbar.is-prestart .walk-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: auto;
    max-width: 100%;
  }
  .chp-research-root .gp-root.gp-embedded .walk-toolbar.is-prestart .tb-btn,
  .chp-research-root .gp-root.gp-embedded .walk-toolbar.is-prestart .begin-btn,
  .chp-research-root .gp-root.gp-embedded .walk-toolbar.is-prestart .walk-actions .tb-btn,
  .chp-research-root .gp-root.gp-embedded .walk-toolbar.is-prestart .walk-actions .begin-btn {
    flex: 0 0 auto;
    width: auto !important;
    max-width: 100%;
    height: auto;
    white-space: nowrap;
  }
}

/*
 * Started: white plate full-bleed; blue card centered and grows from center
 * with Restart/Map + path chips, up to the full window width, then chips wrap.
 */
.chp-research-root .gp-root.gp-embedded .walk-toolbar.is-started .walk-toolbar-inner,
.chp-research-root .gp-root.gp-embedded .walk-toolbar.is-started .walk-toolbar-inner.wrap {
  width: fit-content !important;
  max-width: 100%;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  justify-content: flex-start;
}

/*
 * Mobile path bar: one compact row matching .ri-local-subnav height/type.
 * Buttons stay put; chips swipe in their own scroller so the first chip
 * is not clipped by the card border or a parent overflow-x:hidden.
 */
@media (max-width: 767px) {
  .chp-research-root .gp-root.gp-embedded:has(.walk-toolbar.is-started) {
    --walk-toolbar-h: 4.15rem;
  }
  .chp-research-root .gp-root.gp-embedded .walk-toolbar.is-started {
    padding: 0.4rem max(0.65rem, env(safe-area-inset-right))
      max(0.4rem, env(safe-area-inset-bottom))
      max(0.65rem, env(safe-area-inset-left));
  }
  .chp-research-root .gp-root.gp-embedded .walk-toolbar.is-started .walk-toolbar-inner,
  .chp-research-root .gp-root.gp-embedded .walk-toolbar.is-started .walk-toolbar-inner.wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
    width: 100% !important;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0.2rem 0.4rem 0.2rem 0.5rem;
    overflow: visible;
    box-sizing: border-box;
  }
  .chp-research-root .gp-root.gp-embedded .walk-toolbar.is-started .walk-actions {
    display: flex;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    gap: 0.3rem;
    width: auto;
  }
  .chp-research-root .gp-root.gp-embedded .walk-toolbar.is-started .walk-actions .tb-btn,
  .chp-research-root .gp-root.gp-embedded .walk-toolbar.is-started .tb-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    min-height: 42px;
    height: 42px;
    padding: 0.45rem 0.55rem;
    font-size: 0.95rem !important;
    line-height: 1.25;
    letter-spacing: 0;
    white-space: nowrap;
    border-radius: 999px;
  }
  .chp-research-root .gp-root.gp-embedded .walk-toolbar.is-started .path-summary {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0 0.15rem 0 0.35rem;
    font-size: 0.95rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overflow-wrap: normal;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scroll-padding-inline: 0.5rem;
  }
  .chp-research-root .gp-root.gp-embedded .walk-toolbar.is-started .path-kicker {
    display: none;
    font-size: 0.95rem;
    line-height: 1.25;
  }
  .chp-research-root .gp-root.gp-embedded .walk-toolbar.is-started .path-chip {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 42px;
    margin: 0 0.15rem 0 0;
    padding: 0.45rem 0.55rem;
    font-size: 0.95rem;
    line-height: 1.25;
    box-sizing: border-box;
  }
}

/* Legacy centered begin-gate unused when actions are in toolbar */
.chp-research-root .gp-root.gp-embedded .begin-gate {
  display: none !important;
}

.chp-research-root .gp-root.gp-embedded .path-chip {
  display: inline-block;
  background: #eef2f6;
  color: #4a5560;
  border: 1px solid #d5dde6;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  /* Hair smaller than pathbar command buttons (1.05rem) */
  font-size: 1rem;
  font-weight: 400;
  margin: 0.1rem;
}
.chp-research-root .gp-root.gp-embedded .path-chip.path-chip--who,
.chp-research-root .gp-root.gp-embedded .path-chip.path-chip--who[data-path] {
  background: #36454f;
  border-color: #36454f;
  color: #fff;
}
.chp-research-root .gp-root.gp-embedded .path-chip[data-path="research"] {
  background: #0174bb;
  border-color: #0174bb;
  color: #fff;
}
.chp-research-root .gp-root.gp-embedded .path-chip[data-path="not_hsr"],
.chp-research-root .gp-root.gp-embedded .path-chip[data-path="care"] {
  background: #7c6ba8;
  border-color: #7c6ba8;
  color: #fff;
}
.chp-research-root .gp-root.gp-embedded .path-chip[data-path="informational"] {
  background: #0d7a7a;
  border-color: #0d7a7a;
  color: #fff;
}

/* Legend as CHP card */
.chp-research-root .gp-root.gp-embedded .legend {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(24, 50, 98, 0.06);
  margin-bottom: 1.25rem;
}

.chp-research-root .gp-root.gp-embedded .legend-head h2 {
  color: #1e4384;
  font-size: 1.05rem;
}

/* Begin gate: match intro lede width under Research Navigator header (~38rem) */
.chp-research-root .gp-root.gp-embedded .begin-gate {
  max-width: 38rem;
  width: 100%;
  margin: 0 auto 1.5rem;
  padding: 0;
  box-sizing: border-box;
}
.chp-research-root .gp-root.gp-embedded .begin-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: clamp(1.65rem, 3.8vw, 2.5rem) clamp(1.35rem, 4vw, 2.75rem);
  border-radius: 14px;
  border: 1px solid #9eced4;
  background: linear-gradient(180deg, #f0fbfb 0%, #f5fcfc 42%, #ffffff 100%);
  box-shadow: 0 4px 22px rgba(13, 122, 122, 0.09);
}
/* Standalone / legacy begin-card CTA: same navy family as toolbar Get started */
.chp-research-root .gp-root.gp-embedded .begin-btn {
  width: auto;
  max-width: none;
  min-width: 8.5rem;
  margin-left: 0;
  margin-right: 0;
  min-height: 2.9rem;
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  font-family: "Oswald", system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 400 !important;
  letter-spacing: 0.03em;
  color: #fff;
  background: #1e4384;
  border: 1.5px solid #1e4384;
  box-shadow: 0 2px 8px rgba(30, 67, 132, 0.22);
}
.chp-research-root .gp-root.gp-embedded .begin-btn:hover,
.chp-research-root .gp-root.gp-embedded .begin-btn:focus-visible {
  background: #183262;
  border-color: #183262;
  color: #fff;
  outline: 2px solid #1e4384;
  outline-offset: 2px;
  box-shadow: 0 3px 12px rgba(24, 50, 98, 0.28);
}

/* Survey terminal blends with R+I form cards */
.chp-research-root .gp-root.gp-embedded .survey-terminal {
  border-color: #e5e5e5;
  box-shadow: 0 4px 18px rgba(24, 50, 98, 0.07);
}

/* Inquiry form type matches Express Interest */
.chp-research-root .gp-root.gp-embedded .survey-terminal-head h2 {
  font-size: 1.65rem;
}
.chp-research-root .gp-root.gp-embedded .survey-field {
  font-size: 1.05rem;
}
.chp-research-root .gp-root.gp-embedded .survey-field .hint {
  font-size: 0.92rem;
}
.chp-research-root .gp-root.gp-embedded .survey-field input,
.chp-research-root .gp-root.gp-embedded .survey-field textarea,
.chp-research-root .gp-root.gp-embedded .survey-field select {
  font-size: 1.08rem;
  padding: 0.7rem 0.8rem;
}
.chp-research-root .gp-root.gp-embedded .survey-field-error {
  font-size: 0.92rem;
}
.chp-research-root .gp-root.gp-embedded .survey-error {
  font-size: 1rem;
}
.chp-research-root .gp-root.gp-embedded .survey-docs-title {
  font-size: 1.2rem;
}
.chp-research-root .gp-root.gp-embedded .survey-docs-lede,
.chp-research-root .gp-root.gp-embedded .survey-docs-hint {
  font-size: 1.05rem;
}
.chp-research-root .gp-root.gp-embedded .survey-docs-pick-label,
.chp-research-root .gp-root.gp-embedded .survey-docs-item {
  font-size: 1.05rem;
}
.chp-research-root .gp-root.gp-embedded .survey-status {
  font-size: 1.05rem;
}
.chp-research-root .gp-root.gp-embedded .survey-terminal .survey-btn {
  font-size: 1.12rem !important;
  min-height: 3.1rem;
}

/* Survey action colors only — type/size come from shared command-button rule */
.chp-research-root .gp-root.gp-embedded .survey-btn {
  -moz-osx-font-smoothing: grayscale;
}
.chp-research-root .gp-root.gp-embedded .survey-btn.is-busy,
.chp-research-root .gp-root.gp-embedded .survey-btn.is-busy:disabled {
  opacity: 1;
  cursor: wait;
  gap: 0.5rem;
}
.chp-research-root .gp-root.gp-embedded .survey-btn-spinner {
  display: inline-block;
  width: 0.95rem;
  height: 0.95rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: survey-btn-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.chp-research-root .gp-root.gp-embedded .survey-btn-primary {
  background: #1e4384;
  border-color: #1e4384;
  color: #fff;
  box-shadow: 0 2px 8px rgba(30, 67, 132, 0.22);
}

.chp-research-root .gp-root.gp-embedded .survey-btn-primary:hover:not(:disabled) {
  background: #183262;
  border-color: #183262;
  color: #fff;
  outline: 2px solid #1e4384;
  outline-offset: 2px;
  box-shadow: 0 3px 12px rgba(24, 50, 98, 0.28);
}

.chp-research-root .gp-root.gp-embedded .survey-btn-primary.is-submitted,
.chp-research-root .gp-root.gp-embedded .survey-btn-primary.is-submitted:disabled {
  background: #36454f;
  border-color: #36454f;
  color: #fff;
  outline: none;
  box-shadow: 0 2px 8px rgba(54, 69, 79, 0.22);
}
.chp-research-root .gp-root.gp-embedded .survey-terminal[data-path="research"] .survey-btn-primary.is-submitted,
.chp-research-root .gp-root.gp-embedded .survey-terminal[data-path="research"] .survey-btn-primary.is-submitted:disabled {
  background: #0174bb;
  border-color: #0174bb;
  box-shadow: 0 2px 8px rgba(1, 116, 187, 0.26);
}
.chp-research-root .gp-root.gp-embedded .survey-terminal[data-path="not_hsr"] .survey-btn-primary.is-submitted,
.chp-research-root .gp-root.gp-embedded .survey-terminal[data-path="not_hsr"] .survey-btn-primary.is-submitted:disabled,
.chp-research-root .gp-root.gp-embedded .survey-terminal[data-path="care"] .survey-btn-primary.is-submitted,
.chp-research-root .gp-root.gp-embedded .survey-terminal[data-path="care"] .survey-btn-primary.is-submitted:disabled {
  background: #7c6ba8;
  border-color: #7c6ba8;
  box-shadow: 0 2px 8px rgba(124, 107, 168, 0.28);
}
.chp-research-root .gp-root.gp-embedded .survey-terminal[data-path="informational"] .survey-btn-primary.is-submitted,
.chp-research-root .gp-root.gp-embedded .survey-terminal[data-path="informational"] .survey-btn-primary.is-submitted:disabled {
  background: #0d7a7a;
  border-color: #0d7a7a;
  box-shadow: 0 2px 8px rgba(13, 122, 122, 0.28);
}

.chp-research-root .gp-root.gp-embedded .ep-step-marker {
  background: #36454f;
}
.chp-research-root .gp-root.gp-embedded [data-path="research"] .ep-step-marker {
  background: #0174bb;
}
.chp-research-root .gp-root.gp-embedded [data-path="not_hsr"] .ep-step-marker,
.chp-research-root .gp-root.gp-embedded [data-path="care"] .ep-step-marker {
  background: #7c6ba8;
}
.chp-research-root .gp-root.gp-embedded [data-path="informational"] .ep-step-marker {
  background: #0d7a7a;
}

body.mode-walk .chp-research-root .gp-root.gp-embedded #walk-rec-stage[data-path="research"] .stage-num {
  background: #0174bb !important;
}
body.mode-walk .chp-research-root .gp-root.gp-embedded #walk-rec-stage[data-path="research"] h2 {
  color: #0174bb !important;
}
body.mode-walk .chp-research-root .gp-root.gp-embedded #walk-rec-stage[data-path="research"] .line {
  background: #0174bb;
}
body.mode-walk .chp-research-root .gp-root.gp-embedded #walk-rec-stage[data-path="not_hsr"] .stage-num,
body.mode-walk .chp-research-root .gp-root.gp-embedded #walk-rec-stage[data-path="care"] .stage-num {
  background: #7c6ba8 !important;
}
body.mode-walk .chp-research-root .gp-root.gp-embedded #walk-rec-stage[data-path="not_hsr"] h2,
body.mode-walk .chp-research-root .gp-root.gp-embedded #walk-rec-stage[data-path="care"] h2 {
  color: #7c6ba8 !important;
}
body.mode-walk .chp-research-root .gp-root.gp-embedded #walk-rec-stage[data-path="not_hsr"] .line,
body.mode-walk .chp-research-root .gp-root.gp-embedded #walk-rec-stage[data-path="care"] .line {
  background: #7c6ba8;
}
body.mode-walk .chp-research-root .gp-root.gp-embedded #walk-rec-stage[data-path="informational"] .stage-num {
  background: #0d7a7a !important;
}
body.mode-walk .chp-research-root .gp-root.gp-embedded #walk-rec-stage[data-path="informational"] h2 {
  color: #0d7a7a !important;
}
body.mode-walk .chp-research-root .gp-root.gp-embedded #walk-rec-stage[data-path="informational"] .line {
  background: #0d7a7a;
}

.chp-research-root .gp-root.gp-embedded a.ep-overview-btn,
.chp-research-root .gp-root.gp-embedded a.ep-overview-btn:visited {
  background: #1e4384;
  border-color: #1e4384;
  color: #fff !important;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(30, 67, 132, 0.22);
}
.chp-research-root .gp-root.gp-embedded a.ep-overview-btn:hover {
  background: #183262;
  border-color: #183262;
  color: #fff !important;
  text-decoration: none;
  outline: 2px solid #1e4384;
  outline-offset: 2px;
  box-shadow: 0 3px 12px rgba(24, 50, 98, 0.28);
}

.chp-research-root .gp-root.gp-embedded .survey-btn-outline {
  background: #fff;
  color: #12264a;
  border-color: #5a7390;
  box-shadow: 0 2px 8px rgba(30, 67, 132, 0.1);
}

.chp-research-root .gp-root.gp-embedded .survey-btn-outline:hover:not(:disabled) {
  border-color: #0174bb;
  color: #0b4f80;
  outline: 2px solid #5a7390;
  outline-offset: 2px;
  box-shadow: 0 3px 12px rgba(24, 50, 98, 0.16);
}

.chp-research-root .gp-root.gp-embedded .survey-btn-danger {
  background: #fff;
  color: #8a1212;
  border-color: #d07070;
  box-shadow: 0 2px 8px rgba(138, 18, 18, 0.12);
}

.chp-research-root .gp-root.gp-embedded .survey-btn-danger:hover:not(:disabled) {
  background: #fef2f2;
  border-color: #b91c1c;
  color: #7f1d1d;
  outline: 2px solid #d07070;
  outline-offset: 2px;
  box-shadow: 0 3px 12px rgba(138, 18, 18, 0.18);
}

/* Full map inside page width */
.chp-research-root .gp-root.gp-embedded .algo-map {
  margin-bottom: 1.5rem;
}

/* Soften standalone pathway page chrome when embedded (no double brand header) */
.chp-research-root .gp-root.gp-embedded > .site-top,
.chp-research-root .gp-root.gp-embedded > .page-header {
  display: none !important;
}

/* research/guided-pathway/guided-pathway.css */
/* CHP Guided Pathway flowchart: portrait teaching map */
:root {
  --navy: #1e4384;
  --navy-deep: #183262;
  --primary: #0174bb;
  --green: #007947;
  --green-lt: #e3f5eb;
  --charcoal: #36454f;
  --charcoal-lt: #eef1f3;
  --charcoal-mid: #4a5a64;
  --blue-lt: #eef6fc;
  --amber-lt: #fff8e6;
  --amber: #b86e00;
  --coral: #c23b2a;
  --coral-lt: #fdecea;
  --violet: #5b4b9a;
  --violet-lt: #f0ecf9;
  --teal: #0d7a7a;
  --teal-lt: #e6f6f5;
  --slate: #546e7a;
  --ink: #1a1a1a;
  --muted: #5c6670;
  --line: #c5d0dc;
  --card: #ffffff;
  --bg: #eef2f7;
  --border: #dce3eb;
  --radius: 14px;
  --shadow: 0 6px 22px rgba(24, 50, 98, 0.09);
  /* Match CHP site: body Quattrocento, headings Oswald */
  --font: "Quattrocento", Georgia, "Times New Roman", serif;
  --font-heading: "Oswald", system-ui, sans-serif;
  --serif: "Quattrocento", Georgia, "Times New Roman", serif;
  /* Use most of the viewport width for walk + map */
  --max: min(1480px, 100vw - 1rem);
  --flow-pad: clamp(1.1rem, 2.2vw, 1.75rem);
}

* { box-sizing: border-box; }
html {
  /* auto: smooth on the document scroller fights sticky chrome during fast wheel scroll */
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-tap-highlight-color: rgba(1, 116, 187, 0.12);
}
/* Scope to pathway root only: do not restyle CHP chrome page titles (h1.sp-page-title-heading) */
.gp-root h1,
.gp-root h2,
.gp-root h3,
.gp-root h4,
.gp-root .begin-btn,
.gp-root .tb-btn,
.gp-root .stage-num,
.gp-root .choice-title,
.gp-root .algo-lane-title,
.gp-root .algo-level-label,
.gp-root .algo-panel-title,
.gp-root .algo-ep-n,
.gp-root .survey-btn,
.gp-root .survey-eyebrow,
.gp-root .pdf-step-title {
  font-family: var(--font-heading);
}
img, svg, video { max-width: 100%; height: auto; }
button, .opt, .tip-btn, .tb-btn, .done-summary {
  touch-action: manipulation;
}

/* Header strip: CHP feel */
.site-top {
  background: var(--navy-deep);
  color: #fff;
  padding: 0.65rem 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.site-top span { opacity: 0.85; font-weight: 500; text-transform: none; letter-spacing: 0; }
.page-header {
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, var(--primary) 100%);
  color: #fff;
  padding: 2.25rem 1.5rem 2rem;
}
.page-header .wrap {
  max-width: var(--max);
  margin: 0 auto;
}
.page-header .eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}
.page-header h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.65rem, 3.5vw, 2.15rem);
  font-weight: 700;
  line-height: 1.2;
}
.page-header .lede {
  margin: 0;
  max-width: 72ch;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  opacity: 0.96;
  line-height: 1.6;
}
.page-header .meta {
  margin-top: 1.1rem;
  font-size: 0.88rem;
  opacity: 0.85;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.5rem clamp(0.85rem, 2vw, 1.5rem) 4rem;
}

/* Legend */
.legend {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.5rem;
}
.legend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.legend h2 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--navy);
}
.legend-toggle {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  cursor: pointer;
}
.legend-toggle:hover {
  border-color: var(--primary);
  background: var(--blue-lt);
}
body.legend-collapsed .legend-body {
  display: none;
}
body.legend-collapsed .legend {
  padding: 0.65rem 1.15rem;
  margin-bottom: 0.85rem;
}
body.legend-collapsed .legend-head {
  margin-bottom: 0;
}
.legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.1rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.legend-row + .legend-row {
  margin-top: 0.45rem;
}
.swatch {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.swatch i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}
.swatch .d { background: #eaf4fc; border: 2px solid var(--navy); }
.swatch .t { background: var(--amber-lt); border: 2px solid var(--amber); }
.swatch .e { background: var(--charcoal-lt); border: 2px solid var(--charcoal); }
.swatch .s { background: var(--teal-lt); border: 2px solid var(--teal); }
.swatch .h { background: var(--violet-lt); border: 2px solid var(--violet); }
.swatch .g { background: var(--coral-lt); border: 2px solid var(--coral); }
.swatch .path-r { background: #dceefb; border: 2px solid #0174bb; }
.swatch .path-c { background: #f0ebf8; border: 2px solid #7c6ba8; }
.swatch .path-g { background: #fff0d6; border: 2px solid #b86e00; }
.swatch .path-learn { background: #e6f6f5; border: 2px solid #0d7a7a; }
.swatch .spine-solid {
  width: 18px;
  height: 0;
  border-radius: 0;
  border: none;
  border-top: 3px solid #546e7a;
  background: transparent;
}
.swatch .spine-dash {
  width: 18px;
  height: 0;
  border-radius: 0;
  border: none;
  border-top: 3px dashed #7c6ba8;
  background: transparent;
}

/* Path color tokens */
:root {
  --path-research: #0174bb;
  --path-research-bg: #e8f3fb;
  --path-care: #7c6ba8;
  --path-care-bg: #f0ebf8;
  --path-care-mid: #9b8bc0;
  --path-general: #b86e00;
  --path-general-bg: #fff6e5;
  --path-merge: #5b4b9a;
  --cmd: var(--charcoal);
  --cmd-hover: #2a333a;
  --cmd-shadow: rgba(54, 69, 79, 0.26);
  --cmd-soft: var(--charcoal-lt);
  --cmd-ring: rgba(54, 69, 79, 0.3);
}

/* Pathway identity on the step and on each option. Blue only for research. */
[data-node][data-path="research"],
.teach-choice[data-path="research"] {
  --cmd: var(--path-research);
  --cmd-hover: var(--navy);
  --cmd-shadow: rgba(1, 116, 187, 0.26);
  --cmd-soft: var(--path-research-bg);
  --cmd-ring: rgba(1, 116, 187, 0.28);
}
[data-node][data-path="not_hsr"],
[data-node][data-path="care"],
.teach-choice[data-path="not_hsr"],
.teach-choice[data-path="care"] {
  --cmd: var(--path-care);
  --cmd-hover: var(--path-merge);
  --cmd-shadow: rgba(124, 107, 168, 0.28);
  --cmd-soft: var(--path-care-bg);
  --cmd-ring: rgba(124, 107, 168, 0.3);
}
[data-node][data-path="informational"],
.teach-choice[data-path="informational"] {
  --cmd: var(--teal);
  --cmd-hover: #085858;
  --cmd-shadow: rgba(13, 122, 122, 0.28);
  --cmd-soft: var(--teal-lt);
  --cmd-ring: rgba(13, 122, 122, 0.3);
}

.choice-teach {
  display: none;
  margin: 0.65rem 0 0;
  padding: 0.65rem 0.75rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #3a4550;
  background: rgba(255, 255, 255, 0.75);
  border-left: 3px solid var(--cmd);
  border-radius: 0 8px 8px 0;
}
/* Walk: long compare paragraph only after select / sibling reveal */
body.mode-walk .teach-choice .choice-teach {
  display: none;
}
body.mode-walk .teach-choice.is-chosen .choice-teach,
body.mode-walk .teach-choice.is-sibling-revealed .choice-teach {
  display: block;
}
/* Pre-select collapsed cards: teach-points hidden unless .is-expanded (see bottom of file) */
body.mode-walk [data-node].is-current .teach-choice.is-chosen .teach-points li,
body.mode-walk [data-node].is-done .teach-choice.is-chosen .teach-points li,
body.mode-walk [data-node].is-done .teach-choice.is-sibling-revealed .teach-points li {
  display: block;
}
/* First-person factual statements under Yes / No / Not sure (visible only when expanded) */
.opts > li.teach-choice .teach-points.as-facts {
  margin-top: 0.35rem;
  flex-direction: column;
  gap: 0.35rem;
}
.opts > li.teach-choice .teach-points.as-facts li {
  margin: 0;
  padding: 0.45rem 0.65rem;
  background: rgba(30, 67, 132, 0.04);
  border: 1px solid rgba(30, 67, 132, 0.07);
  border-radius: 8px;
}
.opts > li.teach-choice .teach-points.as-facts li p {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.55;
  color: #1f2933;
  font-weight: 400;
}
body.mode-map .opts > li.teach-choice .teach-points.as-facts li {
  padding: 0.55rem 0.7rem;
}
body.mode-map .opts > li.teach-choice .teach-points.as-facts li p {
  font-size: 1.12rem;
  line-height: 1.55;
  color: #1f2933;
  font-weight: 400;
}
/* Full map: always fully expanded (no click-to-open) */
body.mode-map .choice-teach {
  display: block;
  margin-top: 0.45rem;
  padding: 0.55rem 0.7rem;
  font-size: 1.12rem;
  line-height: 1.55;
}
body.mode-map .teach-choice .teach-points {
  display: block;
  margin-top: 0.5rem;
}
body.mode-map .teach-choice .teach-points li {
  margin: 0 0 0.4rem;
  padding: 0.55rem 0.7rem;
}
body.mode-map .teach-choice .teach-points p {
  display: block;
  font-size: 1.12rem;
  line-height: 1.55;
  color: #1f2933;
}
body.mode-map .teach-choice .teach-points strong {
  font-size: 1.12rem;
  display: block;
  margin-bottom: 0.15rem;
}

/* Lane structure: linear in walk, columns in map */
.map-lanes {
  display: contents; /* walk: children participate in normal flow */
}
.map-lane {
  display: contents;
}
.map-lane-head {
  display: none;
}
.map-band {
  display: contents;
}
.map-vconn {
  display: none;
}
body.mode-walk .map-vconn {
  display: none;
}
.legend p {
  margin: 0.65rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
}

/* Flow column */
.flow {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Stage rail label */
.stage {
  width: 100%;
  margin: 1.35rem 0 0.65rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.stage-num {
  flex: 0 0 auto;
  min-width: 2rem;
  width: auto;
  height: 2rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--charcoal);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stage h2 {
  margin: 0;
  flex: 0 1 auto;
  max-width: calc(100% - 4.2rem);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  line-height: 1.28;
  color: var(--charcoal);
}
.stage .line {
  flex: 1 1 3.5rem;
  height: 2px;
  background: var(--charcoal);
  min-width: 3.5rem;
}

/* Vertical connector */
.vconn {
  width: 2px;
  height: 22px;
  background: var(--line);
  position: relative;
}
.vconn::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--slate);
}

/* Walk-through: arrows between successive decision steps */
body.mode-walk .walk-step-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin: 0.15rem 0 0.35rem;
  padding: 0.15rem 0 0.1rem;
  pointer-events: none;
  flex: 0 0 auto;
}
body.mode-walk .walk-step-arrow-shaft {
  display: block;
  width: 2px;
  height: 1.35rem;
  border-radius: 1px;
  background: linear-gradient(
    180deg,
    rgba(54, 69, 79, 0.18) 0%,
    var(--charcoal) 100%
  );
}
body.mode-walk .walk-step-arrow-head {
  display: block;
  width: 0;
  height: 0;
  margin-top: -1px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--charcoal);
}
body.mode-walk .walk-step-arrow.is-between-done .walk-step-arrow-shaft {
  background: linear-gradient(
    180deg,
    rgba(54, 69, 79, 0.14) 0%,
    rgba(54, 69, 79, 0.5) 100%
  );
}
body.mode-walk .walk-step-arrow.is-between-done .walk-step-arrow-head {
  border-top-color: var(--charcoal-mid);
}
body.mode-walk .walk-step-arrow.is-to-current .walk-step-arrow-shaft {
  height: 1.55rem;
  background: linear-gradient(
    180deg,
    rgba(54, 69, 79, 0.28) 0%,
    var(--charcoal) 100%
  );
}
body.mode-walk .walk-step-arrow.is-to-current .walk-step-arrow-head {
  border-top-color: var(--charcoal);
  border-left-width: 7px;
  border-right-width: 7px;
  border-top-width: 9px;
}
body.mode-map .walk-step-arrow,
body.mode-map #walk-rec-stage {
  display: none !important;
}
@media (prefers-reduced-motion: no-preference) {
  body.mode-walk .walk-step-arrow {
    animation: walk-arrow-in 0.55s cubic-bezier(0.22, 1.18, 0.36, 1) both;
  }
}
@keyframes walk-arrow-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Branch row */
.branches {
  width: 100%;
  display: grid;
  gap: 0.75rem;
  margin: 0.15rem 0;
}
.branches.two {
  grid-template-columns: 1fr 1fr;
}
.branches.three {
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 640px) {
  .branches.two,
  .branches.three {
    grid-template-columns: 1fr;
  }
}
.branch-label {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.35rem;
}
.branch-label.alt { color: var(--amber); }
.branch-label.ext { color: var(--green); }

/* Boxes: strong type colors */
.box {
  width: 100%;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--flow-pad);
  position: relative;
}
.box.decision {
  background: linear-gradient(180deg, #f7fbff 0%, #fff 55%);
  border-color: #9eb6d4;
  border-left: 6px solid var(--navy);
}
.box.teach {
  background: linear-gradient(180deg, #fffaf0 0%, #fff8e6 100%);
  border-color: #e8c76a;
  border-left: 6px solid var(--amber);
}
.box.endpoint {
  background: linear-gradient(180deg, #f4f6f7 0%, var(--charcoal-lt) 100%);
  border-color: #a8b2b8;
  border-left: 6px solid var(--charcoal);
}
.box.start {
  border-left: 6px solid var(--teal);
  border-color: #8ecbcb;
  background: linear-gradient(180deg, #f0fbfb 0%, #fff 100%);
}

/* Get started: soft panel + full-width premium CTA */
.begin-gate {
  max-width: var(--max);
  width: 100%;
  margin: 0 auto 1.35rem;
  padding: 0;
  box-sizing: border-box;
}
.begin-gate[hidden] {
  display: none !important;
}
.begin-card {
  width: 100%;
  box-sizing: border-box;
  padding: clamp(1.5rem, 3.5vw, 2.25rem) clamp(1.25rem, 4vw, 2.5rem);
  text-align: center;
  border-radius: 14px;
  border: 1px solid #9eced4;
  background: linear-gradient(180deg, #f0fbfb 0%, #f7fcfc 45%, #ffffff 100%);
  box-shadow: 0 4px 20px rgba(13, 122, 122, 0.08);
}
.begin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: none;
  min-width: 8.5rem;
  margin: 0;
  min-height: 2.9rem;
  padding: 0.6rem 1.25rem;
  font-family: var(--font-heading, var(--font));
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #fff;
  background: var(--charcoal);
  border: 1.5px solid var(--charcoal);
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 2px 8px rgba(54, 69, 79, 0.26);
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s, border-color 0.15s;
}
.begin-btn:hover,
.begin-btn:focus-visible {
  background: #2a333a;
  border-color: #2a333a;
  outline: 2px solid var(--charcoal);
  outline-offset: 2px;
  box-shadow: 0 3px 12px rgba(24, 50, 98, 0.28);
}
.begin-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(24, 50, 98, 0.2);
}
.flow.is-idle {
  display: none;
}

/* ========== Path confirm: review checkpoint ========== */
.path-confirm-box {
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  border-color: #c5d8e8;
  background: linear-gradient(180deg, var(--cmd-soft) 0%, #ffffff 42%);
  box-shadow: 0 4px 22px var(--cmd-shadow);
}
.path-confirm-panel {
  padding: 0.15rem 0.15rem 0.35rem;
}
.path-confirm-lede {
  margin: 0 0 1rem;
  font-size: 1.02rem;
  line-height: 1.5;
  color: #4a5560;
  text-align: center;
}
.path-confirm-summary {
  margin: 0 0 1.15rem;
  padding: 0.85rem 1.1rem;
  list-style: none;
  border-radius: 12px;
  border: 1px solid #d5e0ea;
  background: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
.path-confirm-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.45rem 1rem;
  align-items: start;
  padding: 0.65rem 0;
  border-bottom: 1px solid #e8eef4;
}
.path-confirm-row:last-child {
  border-bottom: none;
  padding-bottom: 0.35rem;
}
.path-confirm-row:first-child {
  padding-top: 0.25rem;
}
.path-confirm-row dt {
  margin: 0;
  font-family: var(--font-heading, system-ui, sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7c8a;
  line-height: 1.4;
  padding-top: 0.15rem;
}
.path-confirm-row dd {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.45;
  color: #1a2430;
  font-weight: 400;
}
.path-confirm-chip {
  display: inline-block;
  margin: 0;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-family: var(--font-heading, system-ui, sans-serif);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  border: 1px solid transparent;
}
.path-confirm-chip[data-lane="research"] {
  color: #0b5f96;
  background: #e8f3fb;
  border-color: #b5d4ec;
}
.path-confirm-chip[data-lane="not_hsr"] {
  color: #5a4a86;
  background: #f0ebf8;
  border-color: #cfc3e6;
}
.path-confirm-chip[data-lane="informational"] {
  color: #0a5f5f;
  background: #e6f6f5;
  border-color: #a8d6d4;
}
.path-confirm-chip:not([data-lane]),
.path-confirm-chip[data-lane=""] {
  color: #4a5560;
  background: #eef2f6;
  border-color: #d5dde6;
}
.path-confirm-next {
  margin: 0 0 1.25rem;
  padding: 0.75rem 0.95rem;
  border-radius: 10px;
  background: rgba(30, 67, 132, 0.04);
  border: 1px solid rgba(30, 67, 132, 0.08);
  font-size: 1.02rem;
  line-height: 1.55;
  color: #2a343a;
  text-align: left;
}
.path-confirm-actions {
  display: flex !important;
  justify-content: center;
  margin: 0 0 0.85rem !important;
  padding: 0;
  list-style: none;
}
.path-confirm-actions > .teach-choice {
  width: 100%;
  max-width: 20rem;
  margin: 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.path-confirm-actions > .teach-choice .opt,
.path-confirm-continue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.9rem;
  padding: 0.6rem 1.25rem;
  font-family: var(--font-heading, "Oswald", system-ui, sans-serif);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: #fff !important;
  text-align: center;
  background: var(--cmd) !important;
  border: 1.5px solid var(--cmd) !important;
  border-radius: 8px !important;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 4px 14px var(--cmd-shadow);
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
}
/* Beat later .opts > li.teach-choice .opt { font: inherit } so label size sticks */
.opts.path-confirm-actions > li.teach-choice .opt.path-confirm-continue {
  font-family: var(--font-heading, "Oswald", system-ui, sans-serif);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.2;
}
.path-confirm-continue:hover,
.path-confirm-continue:focus-visible,
body.mode-walk [data-node].is-current .path-confirm-continue:hover:not(:disabled),
body.mode-walk [data-node].is-current .path-confirm-continue:focus-visible:not(:disabled) {
  background: var(--cmd-hover) !important;
  color: #fff !important;
  outline: 2px solid var(--cmd);
  outline-offset: 3px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.26) inset,
    0 6px 18px var(--cmd-shadow);
}
.path-confirm-continue:active {
  transform: translateY(1px);
}
/* No accordion chevron / title chrome on this CTA */
.path-confirm-actions .choice-title::after,
.path-confirm-actions .opt::before {
  display: none !important;
}
.path-confirm-hint {
  margin: 0;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #6b7c8a;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .path-confirm-hint {
    white-space: normal;
  }
}
.path-confirm-hint strong {
  font-weight: 600;
  color: #4a5560;
}

/* path_confirm done: keep confirmed summary expanded */
body.mode-walk [data-node="path_confirm"].is-done:not(.is-expanded) > .path-confirm-panel {
  display: block !important;
}
body.mode-walk [data-node="path_confirm"].is-done .choice-triptych {
  display: none !important;
}
body.mode-walk [data-node="path_confirm"].is-done .path-confirm-hint,
body.mode-walk [data-node="path_confirm"].is-done .path-confirm-lede {
  display: none;
}
body.mode-walk [data-node="path_confirm"].is-done .path-confirm-summary {
  margin-bottom: 0.85rem;
}
body.mode-walk [data-node="path_confirm"].is-done .path-confirm-actions {
  display: flex !important;
  justify-content: center;
  margin: 0;
}
body.mode-walk [data-node="path_confirm"].is-done .path-confirm-actions > .teach-choice {
  position: relative;
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
  border-radius: 10px;
  border: 1.5px solid var(--cmd);
  background: #fff;
  box-shadow: 0 4px 14px rgba(24, 50, 98, 0.08);
}
body.mode-walk [data-node="path_confirm"].is-done .path-confirm-continue {
  width: 100%;
  min-height: 2.85rem;
  margin: 0;
  padding: 0.65rem 7.5rem 0.65rem 1rem;
  border: none !important;
  border-radius: 10px;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--navy-deep, #183262) !important;
  font-family: "Oswald", system-ui, sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
  text-align: left;
  cursor: default;
  pointer-events: none;
}
body.mode-walk [data-node="path_confirm"].is-done .path-confirm-continue::before {
  content: "✓";
  display: inline-block;
  margin-right: 0.45rem;
  font-weight: 600;
  color: var(--navy, #1e4384);
}
body.mode-walk [data-node="path_confirm"].is-done .path-confirm-actions .done-change {
  position: relative;
  z-index: 8;
  pointer-events: auto;
}
body.mode-walk [data-node="path_confirm"].is-done .path-confirm-next {
  margin-bottom: 0;
}
body.mode-walk [data-node="path_confirm"].is-done {
  max-width: 36rem;
}

/* contact (Research Navigator complete!) done: title line only — hide the box */
body.mode-walk [data-node="contact"].is-done,
body.mode-walk [data-node="contact"].is-done.is-scroll-preserve {
  display: none !important;
  visibility: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
body.mode-walk [data-node].is-scroll-preserve .done-change {
  display: none !important;
}
.walk-scroll-height-lock {
  width: 1px;
  max-width: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  flex-shrink: 0;
}
body.mode-walk [data-stage-for="contact"].is-visible {
  margin-top: 0.85rem;
  margin-bottom: 1.5rem;
}
body.mode-walk .walk-step-arrow.is-to-contact {
  margin: 1.65rem 0 0.85rem;
}
body.mode-walk .walk-step-arrow.is-to-contact .walk-step-arrow-shaft {
  height: 4.75rem;
  background: var(--charcoal);
}

@media (max-width: 520px) {
  .path-confirm-row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
  .path-confirm-row dt {
    padding-top: 0;
  }
  .path-confirm-box {
    max-width: none;
  }
  .path-confirm-panel {
    padding: 0;
  }
  .path-confirm-summary {
    padding: 0.75rem 0.85rem;
  }
  .path-confirm-row dd {
    font-size: 1rem;
    overflow-wrap: anywhere;
  }
  .path-confirm-chip {
    max-width: 100%;
    white-space: normal;
    line-height: 1.35;
  }
}
body.mode-map .begin-gate {
  display: none !important;
}
body.mode-map .flow.is-idle {
  display: flex;
}
.box.handoff {
  border-left: 6px solid var(--violet);
  border-color: #c5b8e0;
  background: linear-gradient(180deg, #f8f6fd 0%, #fff 100%);
}
body.mode-walk [data-node="contact"].handoff[data-path="research"],
body.mode-walk [data-node="contact"].handoff[data-path="not_hsr"],
body.mode-walk [data-node="contact"].handoff[data-path="informational"] {
  border-left-color: var(--cmd);
  background: linear-gradient(180deg, var(--cmd-soft) 0%, #ffffff 42%);
  box-shadow: 0 4px 22px var(--cmd-shadow);
}
.box.gate {
  border-left: 6px solid var(--coral);
  border-color: #e8a99f;
  background: linear-gradient(180deg, #fff6f4 0%, #fff 100%);
}

.box .tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  background: rgba(30, 67, 132, 0.08);
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
}
.box.start .tag { color: var(--teal); background: rgba(13, 122, 122, 0.1); }
.box.teach .tag { color: var(--amber); background: rgba(184, 110, 0, 0.12); }
.box.endpoint .tag { color: var(--charcoal); background: rgba(54, 69, 79, 0.1); }
.box.handoff .tag { color: var(--violet); background: rgba(91, 75, 154, 0.1); }
.box.gate .tag { color: var(--coral); background: rgba(194, 59, 42, 0.1); }

.box h3 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--navy-deep);
  line-height: 1.3;
  font-weight: 700;
}
.box .intro {
  margin: 0 0 1rem;
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.55;
  max-width: 72ch;
}

.box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.box li {
  position: relative;
  margin: 0 0 0.55rem;
  padding: 0.35rem 0.45rem;
  border-radius: 10px;
  background: #fff;
  border: 2px solid #d5e0ec;
  font-size: 0.98rem;
  color: var(--ink);
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.box.endpoint li,
.box.teach li.fact { background: rgba(255, 255, 255, 0.85); }
.box li.fact {
  padding: 0.65rem 0.85rem;
  cursor: default;
}
.box li.fact > span {
  flex: 1;
  padding: 0.15rem 0;
}

/* Legacy non-card option tones (unused when all choices are .teach-choice) */

/* Teach-choice cards = the selectable options (no separate teach-panels) */
.opts {
  display: grid;
  gap: 0.65rem;
  align-items: start;
}
.opts > li.teach-choice {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  position: relative;
  /* Fill grid/flex cell so empty card chrome is still part of the hit surface */
  height: 100%;
  min-height: 100%;
  align-items: stretch;
  gap: 0;
  border: 2px solid #c5cdd4;
  border-radius: 12px;
  background: #fff;
  /* overflow:hidden + border-radius notches corners on hover in Chromium */
  overflow: visible;
  background-clip: padding-box;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  cursor: pointer;
}
.opts > li.teach-choice .teach-points li.inq-note-hint {
  background: #eef4fb;
  border-color: #c5d4e6;
}
.opts > li.teach-choice .teach-points li.inq-note-hint p {
  color: #183262;
}
.opts > li.teach-choice:hover {
  border-color: var(--cmd);
  /* Soft lift only — no extra ring/outline that fights the 2px border */
  box-shadow: 0 4px 14px var(--cmd-shadow);
}
.opts > li.teach-choice .opt {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 100%;
  align-self: stretch;
  text-align: left;
  padding: 0.85rem 1rem 0.9rem;
  border: none;
  background: transparent;
  /* Match outer card radius (12px) minus 2px border — square .opt fills cut corners on hover */
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  /* Avoid browser default button paint that squares the hit box */
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
.opts > li.teach-choice .opt::before {
  display: none;
}
.opts > li.teach-choice .choice-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 1.22rem;
  font-weight: 400;
  color: var(--charcoal);
  line-height: 1.3;
  margin-bottom: 0;
}
.opts > li.teach-choice .choice-title::after {
  content: "";
  flex-shrink: 0;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.35rem;
  border-right: 2px solid #6b7c8a;
  border-bottom: 2px solid #6b7c8a;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  opacity: 0.75;
}
.opts > li.teach-choice.is-expanded .choice-title {
  margin-bottom: 0.55rem;
}
.opts > li.teach-choice.is-expanded .choice-title::after {
  margin-top: 0.45rem;
  transform: rotate(225deg);
}
.opts > li.teach-choice.is-expanded {
  border-color: var(--cmd);
  box-shadow: 0 4px 14px var(--cmd-shadow);
  overflow: visible;
}
/* Expanded: title row is top-only; bottom corners stay open for teach + confirm */
.opts > li.teach-choice.is-expanded .opt,
.opts > li.teach-choice.is-selecting .opt {
  border-radius: 10px 10px 0 0;
}
.opts > li.teach-choice .teach-points {
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.opts > li.teach-choice .teach-points li {
  display: block;
  margin: 0 0 0.45rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  background: var(--cmd-soft);
  border: 1px solid var(--cmd-ring);
  font-size: 0.9rem;
}
.opts > li.teach-choice .teach-points li:last-child {
  margin-bottom: 0;
}
.opts > li.teach-choice .teach-points strong {
  display: block;
  font-size: 0.88rem;
  color: var(--navy-deep);
  margin-bottom: 0.2rem;
}
.opts > li.teach-choice .teach-points p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.45;
  font-weight: 400;
}
/* Path tones on cards */
.opts > li.teach-choice.tone-research,
.opts > li.teach-choice[data-teach="research"] {
  border-color: #7eb6dd;
  background: linear-gradient(180deg, #f3f9fd 0%, #fff 55%);
}
.opts > li.teach-choice.tone-care,
.opts > li.teach-choice[data-teach="care"] {
  border-color: var(--path-care-mid);
  background: linear-gradient(180deg, var(--path-care-bg) 0%, #fff 55%);
}
.opts > li.teach-choice.tone-unsure,
.opts > li.teach-choice[data-teach="unsure"] {
  border-color: #e0b45a;
  background: linear-gradient(180deg, #fff9ef 0%, #fff 55%);
}

/* nth-child color cycle for multi-option steps without data-teach tones */
.opts > li.teach-choice:nth-child(7n + 1):not([data-teach]) { border-color: #7eb6dd; }
.opts > li.teach-choice:nth-child(7n + 2):not([data-teach]) { border-color: #6bbbb3; }
.opts > li.teach-choice:nth-child(7n + 3):not([data-teach]) { border-color: #a89ad0; }
.opts > li.teach-choice:nth-child(7n + 4):not([data-teach]) { border-color: #6cbc8e; }
.opts > li.teach-choice:nth-child(7n + 5):not([data-teach]) { border-color: #e0b45a; }
.opts > li.teach-choice:nth-child(7n + 6):not([data-teach]) { border-color: #e08a7d; }
.opts > li.teach-choice:nth-child(7n + 7):not([data-teach]) { border-color: #7a93bf; }

/* Clickable options (walk): legacy non-card opts if any */
.box li .opt {
  flex: 1;
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 0.55rem 0.55rem 1.5rem;
  cursor: pointer;
  position: relative;
  transition: background 0.12s, color 0.12s;
}
.box li .opt::before {
  content: "→";
  position: absolute;
  left: 0.2rem;
  top: 0.55rem;
  color: var(--opt-arrow, var(--cmd));
  font-weight: 700;
  font-size: 1.05rem;
}
/* Non-card opts (legacy): light fill on hover */
body.mode-walk [data-node].is-current .opt:hover:not(:disabled),
body.mode-walk [data-node].is-current .opt:focus-visible:not(:disabled) {
  background: #fff;
  outline: none;
  color: var(--navy-deep);
}
/* Card opts: never paint a square white fill over the rounded card border */
body.mode-walk [data-node].is-current .opts > li.teach-choice .opt:hover:not(:disabled),
body.mode-walk [data-node].is-current .opts > li.teach-choice .opt:focus-visible:not(:disabled),
body.mode-walk [data-node].is-current .person-grid > li.teach-choice .opt:hover:not(:disabled),
body.mode-walk [data-node].is-current .person-grid > li.teach-choice .opt:focus-visible:not(:disabled) {
  background: transparent;
  outline: none;
  color: var(--navy-deep);
}
/* Hover the card chrome only via .teach-choice:hover — avoid a second
   :has(.opt:hover) border pass that double-paints corners (notches). */
body.mode-walk [data-node].is-current li:has(.opt:hover:not(:disabled)):not(.teach-choice),
body.mode-walk [data-node].is-current li:has(.opt:focus-visible:not(:disabled)):not(.teach-choice) {
  border-color: var(--cmd);
  background: #fff;
  box-shadow: 0 2px 10px var(--cmd-shadow);
}
body.mode-walk [data-node].is-current li.teach-choice:has(.opt:focus-visible:not(:disabled)),
body.mode-walk [data-node].is-current li.teach-choice:hover {
  border-color: var(--cmd);
  box-shadow: 0 4px 14px var(--cmd-shadow);
}
.box li .opt:disabled {
  cursor: default;
  opacity: 0.85;
}
/* Map-mode option bullets refined in the clinical algorithm block below */

/* Tip button: separate from select */
.tip-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.25rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--font);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  transition: transform 0.1s, background 0.12s;
}
.tip-btn:hover,
.tip-btn:focus-visible {
  background: var(--primary);
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  transform: scale(1.06);
}
.tip-btn.tip-inline {
  display: inline-flex;
  vertical-align: middle;
  margin: 0 0.15rem;
  width: 1.15rem;
  height: 1.15rem;
  font-size: 0.62rem;
}

/* Endpoints grid: use width */
.endpoints {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 0.65rem;
}
@media (min-width: 700px) {
  .endpoints {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1020px) {
  .endpoints {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .endpoints .box.endpoint:last-child:nth-child(3n + 1):nth-last-child(1) {
    grid-column: 1 / -1;
  }
}
.box.endpoint .ep-num {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--charcoal);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  margin-right: 0.35rem;
  vertical-align: middle;
}

/* Tooltip popover */
.tip-pop {
  position: fixed;
  z-index: 1000;
  max-width: min(320px, calc(100vw - 2rem));
  background: var(--navy-deep);
  color: #fff;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  font-size: 0.88rem;
  line-height: 1.45;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s, transform 0.12s;
}
.tip-pop.is-on {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.tip-pop::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 1.25rem;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--navy-deep);
}
.tip-pop strong {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 0.25rem;
}

.footer-note {
  margin-top: 2rem;
  padding: 1rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.88rem;
  color: var(--muted);
}
.footer-note code {
  font-size: 0.82rem;
  background: #eef2f6;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
}
.footer-note .plan-list {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.2rem;
}
.footer-note .plan-list li {
  margin-bottom: 0.35rem;
  display: list-item;
  background: none;
  border: none;
  padding: 0;
}

/* ---------- Walk toolbar ---------- */
/* Embedded Navigator: sticky bottom owned by guided-survey-skin.css.
   Base stays relative so we do not fight top-sticky here. */
.walk-toolbar {
  position: relative;
  top: auto;
  bottom: auto;
  z-index: 50;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
}
.walk-toolbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}
.walk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, var(--font));
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.2;
  min-height: 2.9rem;
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--navy-deep);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, opacity 0.12s;
}
.tb-btn:hover:not(:disabled) {
  border-color: var(--charcoal);
  background: var(--charcoal-lt);
}
.tb-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.tb-btn.tb-primary {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.tb-btn.tb-primary:hover:not(:disabled) {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
}
.path-summary {
  flex: 1 1 auto;
  width: auto;
  max-width: 100%;
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.4;
  min-width: 0;
}
.path-kicker {
  font-size: 1rem;
  line-height: inherit;
}
.path-summary strong { color: var(--navy-deep); }
.path-summary .muted { color: var(--muted); font-size: 0.78rem; }
.path-chip {
  display: inline-block;
  background: #eef4fa;
  border: 1px solid #c5d0dc;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 1rem;
  font-weight: 400;
  color: var(--navy-deep);
  white-space: nowrap;
}
.path-chip.path-chip--complete {
  background: #e8f5ef;
  border-color: #7bc4a0;
  color: #0d5c3d;
}
.path-chip.path-chip--next-steps {
  background: #e8f1fb;
  border-color: #7aa8d4;
  color: #0d3d6b;
}
.path-chip.path-chip--who,
.path-chip.path-chip--who[data-path] {
  background: var(--charcoal, #36454f);
  border-color: var(--charcoal, #36454f);
  color: #fff;
}
.path-chip[data-path="research"] {
  background: #0174bb;
  border-color: #0174bb;
  color: #fff;
}
.path-chip[data-path="not_hsr"],
.path-chip[data-path="care"] {
  background: #7c6ba8;
  border-color: #7c6ba8;
  color: #fff;
}
.path-chip[data-path="informational"] {
  background: #0d7a7a;
  border-color: #0d7a7a;
  color: #fff;
}

/* ---------- Walk / map mode ---------- */
body.mode-walk .map-only { display: none !important; }
body.mode-map .legend-map-only { display: block !important; }
body.mode-map #legend-walk { display: none; }
/* Map-only legend keys never appear in walk */
body.mode-walk #legend-map-keys,
body.mode-walk .legend-row-map {
  display: none !important;
}
body.mode-map #legend-map-keys,
body.mode-map .legend-row-map {
  display: flex !important;
}

body.mode-walk .stage {
  display: none;
}
body.mode-walk .stage.is-visible {
  display: flex;
}
body.mode-walk .gp-root .stage-num,
body.mode-walk-host .stage-num,
body.mode-walk .stage-num {
  display: none !important;
}
body.mode-walk .gp-root .stage h2,
body.mode-walk-host .stage h2,
body.mode-walk .stage h2 {
  color: var(--charcoal) !important;
}
body.mode-walk .gp-root .stage .line,
body.mode-walk-host .stage .line,
body.mode-walk .stage .line {
  background: var(--charcoal);
}
body.mode-walk .stage:has(+ [data-path="research"]) .stage-num {
  background: var(--path-research) !important;
}
body.mode-walk .stage:has(+ [data-path="research"]) h2 {
  color: var(--path-research) !important;
}
body.mode-walk .stage:has(+ [data-path="research"]) .line {
  background: var(--path-research);
}
body.mode-walk .stage:has(+ [data-path="not_hsr"]) .stage-num,
body.mode-walk .stage:has(+ [data-path="care"]) .stage-num {
  background: var(--path-care) !important;
}
body.mode-walk .stage:has(+ [data-path="not_hsr"]) h2,
body.mode-walk .stage:has(+ [data-path="care"]) h2 {
  color: var(--path-care) !important;
}
body.mode-walk .stage:has(+ [data-path="not_hsr"]) .line,
body.mode-walk .stage:has(+ [data-path="care"]) .line {
  background: var(--path-care);
}
body.mode-walk .stage:has(+ [data-path="informational"]) .stage-num {
  background: var(--teal) !important;
}
body.mode-walk .stage:has(+ [data-path="informational"]) h2 {
  color: var(--teal) !important;
}
body.mode-walk .stage:has(+ [data-path="informational"]) .line {
  background: var(--teal);
}

/* Fills remaining viewport under the focused step so the path bar can sit
   at the bottom of the window without the site footer lifting it early.
   Lives as a sibling after #flow-root (not inside the flex walk column). */
.walk-focus-spacer {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  flex-shrink: 0;
  /* Height is set inline by syncWalkFocusSpacer(); keep empty of content */
  overflow: hidden;
  visibility: hidden;
}
.walk-focus-spacer[hidden] {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
}
body.mode-walk .flow > .endpoints {
  /* After ordered walk steps (history ranks use ~10–200); before any stray tail */
  order: 9000;
}

body.mode-walk [data-node] {
  margin-bottom: 0.65rem;
  transition: opacity 0.2s, box-shadow 0.2s;
}
body.mode-walk [data-node].is-future {
  display: none;
}
/* Endpoint payoff on walk */
body.mode-walk .box.endpoint.is-reached,
body.mode-walk .box.endpoint.is-current {
  border-color: var(--charcoal);
  border-width: 2px;
  background: linear-gradient(180deg, #f4f6f8 0%, #fff 40%);
  box-shadow: 0 8px 28px rgba(54, 69, 79, 0.12);
}
/* Walk-only title style (matches stage rail h2 — not map uppercase eyebrow) */
body.mode-walk .box.endpoint.is-reached:not([data-ep-rec])::before,
body.mode-walk .box.endpoint.is-current:not([data-ep-rec])::before {
  content: "Recommended Next Steps";
  display: block;
  margin: 0 0 0.75rem;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  line-height: 1.28;
  color: var(--charcoal);
}

/* Enhanced endpoint recommendation (walk checklist → numbered steps) */
body.mode-walk .box.endpoint[data-ep-rec] {
  padding: 1.15rem 1.2rem 1.25rem;
}
.ep-rec-head {
  margin: 0 0 0.9rem;
}
body.mode-walk .ep-rec-outcome {
  margin: 0.35rem 0 0;
  font-size: clamp(1.05rem, 2.1vw, 1.28rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--navy-deep, #183262);
}
/* Same voice as walk .stage h2 — not map-style uppercase labels */
body.mode-walk .ep-rec-title {
  margin: 0;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  line-height: 1.28;
  color: var(--charcoal);
}
/* Map keeps default heading if this class ever appears (it should not — restore on map) */
.ep-rec-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy-deep, #183262);
}
.ep-steps {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  counter-reset: none;
}
.ep-step-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid #d5dee8;
  border-radius: 10px;
  background: #fff;
}
.ep-step-marker {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  margin-top: 0.05rem;
  border-radius: 50%;
  background: var(--navy, #183262);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ep-rec-lede {
  margin: 0 0 0.75rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #36454f;
}
.ep-step-body {
  flex: 1 1 auto;
  min-width: 0;
}
.ep-step-text {
  display: block;
  font-size: 1.02rem;
  line-height: 1.35;
  font-weight: 500;
  color: #1a2028;
  padding-top: 0.1rem;
}
.ep-step-text a.ep-step-link {
  position: relative;
  z-index: 2;
  color: var(--navy, #1e4384);
  font-weight: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  pointer-events: auto;
  cursor: pointer;
}
.ep-step-text a.ep-step-link:hover {
  color: var(--navy-deep, #183262);
}
.ep-nowrap {
  white-space: nowrap;
}
.ep-step-detail,
.ep-step-action {
  display: none;
}
.ep-docs-link {
  margin: 0.25rem 0 0;
  padding: 0.7rem 0.85rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #2a3540;
  background: #f0f6fb;
  border: 1px solid #c5d8ea;
  border-radius: 10px;
}
.ep-end-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  margin: 1.1rem 0 0.15rem;
  padding-top: 0.85rem;
  border-top: 1px solid #d5dee8;
}
.ep-overview-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
  color: #fff;
}
a.ep-overview-btn,
a.ep-overview-btn:visited,
a.ep-overview-btn:hover {
  color: #fff;
  text-decoration: none;
}
.ep-overview-btn-label {
  display: inline;
  line-height: 1.25;
}
/* Match site “Research + Innovation”: + sits at the top of the text band */
.ep-overview-btn .chp-nav-plus {
  display: inline-block;
  line-height: 1;
  vertical-align: text-top;
  font-size: 0.82em;
  font-weight: inherit;
  position: relative;
  top: 0;
  margin: 0 0.04em;
  padding: 0;
}
a.ep-overview-btn:hover {
  text-decoration: none;
}
.ep-docs-link a {
  color: var(--primary, #0174bb);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ep-docs-link a:hover {
  color: var(--navy-deep, #183262);
}
/* Map: hide walk-only rec enhancement (endpoints restore to base map cards) */
body.mode-map .box.endpoint[data-ep-rec] .ep-steps,
body.mode-map .box.endpoint[data-ep-rec] .ep-docs-link,
body.mode-map .box.endpoint[data-ep-rec] .ep-rec-title,
body.mode-map .box.endpoint[data-ep-rec] .ep-rec-head {
  display: none;
}
body.mode-walk [data-node].is-current {
  box-shadow: 0 6px 24px var(--cmd-shadow);
  border-color: var(--cmd);
  outline: 2px solid var(--cmd-ring);
  outline-offset: 2px;
}
/* Amber teach moments stay warm when current */
body.mode-walk [data-node].is-current.box.teach {
  border-color: var(--amber);
  outline-color: rgba(184, 110, 0, 0.35);
  box-shadow: 0 6px 24px rgba(184, 110, 0, 0.14);
}
body.mode-walk [data-node].is-done {
  opacity: 1;
  border-style: solid;
  border-color: #c5d0dc;
}
body.mode-walk [data-node].is-done.is-expanded,
body.mode-walk [data-node].is-done.is-teach-open {
  opacity: 1;
  border-color: #9eb6d4;
}
body.mode-walk [data-node].is-reached {
  outline: 2px solid var(--charcoal);
  outline-offset: 2px;
}

/* Inline teach panels (always visible with the question) */
.teach-panels {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
  width: 100%;
}
.teach-panels.three,
.teach-panels.two {
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .teach-panels.two {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 960px) {
  .teach-panels.three {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.teach-panel {
  margin: 0;
  box-shadow: 0 3px 14px rgba(24, 50, 98, 0.06);
  min-height: 100%;
}
.teach-panel .branch-label {
  text-align: left;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
}
/* Distinct teach-panel tints */
.teach-panel.panel-research {
  background: linear-gradient(180deg, #eef6fc 0%, #f7fbfe 100%);
  border-color: #8eb8dc;
  border-left-color: var(--primary);
}
.teach-panel.panel-research .tag,
.teach-panel.panel-research .branch-label { color: var(--primary); }
.teach-panel.panel-care {
  background: linear-gradient(180deg, #eefaf3 0%, #f6fcf8 100%);
  border-color: #8fc9a6;
  border-left-color: var(--green);
}
.teach-panel.panel-care .tag,
.teach-panel.panel-care .branch-label { color: var(--green); }
.teach-panel.panel-unsure {
  background: linear-gradient(180deg, #fff6e8 0%, #fffaf0 100%);
  border-color: #e8c76a;
  border-left-color: var(--amber);
}
.teach-panel.panel-unsure .tag,
.teach-panel.panel-unsure .branch-label { color: var(--amber); }
.teach-panel.panel-internal {
  background: linear-gradient(180deg, #eef2fa 0%, #f7f9fd 100%);
  border-color: #9aafd4;
  border-left-color: var(--navy);
}
.teach-panel.panel-internal .tag,
.teach-panel.panel-internal .branch-label { color: var(--navy); }
.teach-panel.panel-external {
  background: linear-gradient(180deg, #e8f6f5 0%, #f4fbfb 100%);
  border-color: #7bc4c0;
  border-left-color: var(--teal);
}
.teach-panel.panel-external .tag,
.teach-panel.panel-external .branch-label { color: var(--teal); }

.teach-points {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}
.teach-points li {
  display: block;
  margin: 0 0 0.7rem;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.06);
  cursor: default;
}
.teach-points li:last-child {
  margin-bottom: 0;
}
.teach-points strong {
  display: block;
  font-size: 0.95rem;
  color: var(--navy-deep);
  margin-bottom: 0.3rem;
  line-height: 1.35;
}
.teach-points p {
  margin: 0;
  font-size: 0.9rem;
  color: #4a5560;
  line-height: 1.5;
  font-weight: 400;
}
.box.teach > .teach-points {
  margin-bottom: 1rem;
}

/* Legacy done-bar removed from walk UI (Change answer lives on selected card) */
.done-bar {
  display: none !important;
}
.done-summary {
  display: none !important;
}
/* Change answer: own column so it cannot sit under the disabled option */
body.mode-walk [data-node].is-done li.teach-choice.is-chosen.has-change-answer,
body.mode-walk [data-node].is-done .choice-side-center > li.teach-choice.is-chosen.has-change-answer {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  align-items: start;
  column-gap: 0.75rem;
  row-gap: 0.35rem;
}
body.mode-walk [data-node].is-done li.teach-choice.is-chosen .done-change {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  z-index: 50;
  pointer-events: auto !important;
  justify-self: end;
  align-self: start;
  margin: 0.45rem 0.45rem 0 0;
  flex: none;
  font-family: var(--font-heading, "Oswald", system-ui, sans-serif);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #fff;
  background: var(--cmd);
  border: 1.5px solid var(--cmd);
  border-radius: 8px;
  padding: 0.6rem 1.25rem;
  cursor: pointer;
  min-height: 2.9rem;
  line-height: 1.2;
  white-space: nowrap;
  touch-action: manipulation;
  box-shadow: 0 2px 8px var(--cmd-shadow);
}
body.mode-walk [data-node].is-done li.teach-choice.is-chosen .done-change:hover {
  background: var(--cmd-hover);
  border-color: var(--cmd-hover);
}
body.mode-walk [data-node].is-done li.teach-choice.is-chosen > .opt,
body.mode-walk [data-node].is-done .choice-side-center > li.teach-choice.is-chosen > .opt {
  grid-column: 1;
  grid-row: 1 / -1;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding-right: 0.25rem;
  padding-top: 0.75rem;
  pointer-events: none;
}
body.mode-walk [data-node].is-done li.teach-choice.is-chosen .choice-title {
  padding-right: 0;
}

/* Done steps: selected centered; other options stacked on left/right sides.
   Keep .path-confirm-panel visible (path_confirm / contact review cards). */
body.mode-walk [data-node].is-done:not(.is-expanded) > :not(.opts):not(.person-grid):not(.interest-panels):not(.choice-triptych):not(.path-confirm-panel) {
  display: none !important;
}
body.mode-walk [data-node].is-done:not(.is-expanded) .interest-panels {
  display: block !important;
  margin-top: 0.35rem;
}
body.mode-walk [data-node].is-done:not(.is-expanded) .interest-panel.is-idle-panel {
  display: none !important;
}
/* Source list is emptied into triptych */
body.mode-walk [data-node].is-done .opts.is-triptych-source,
body.mode-walk [data-node].is-done .person-grid.is-triptych-source {
  display: none !important;
}

/* Side | Selected | Side: full height, no clipping of sibling boxes */
body.mode-walk [data-node].is-done .choice-triptych {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: stretch;
  gap: 0.65rem 1rem;
  margin-top: 0.35rem;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  overflow: visible;
  box-sizing: border-box;
}
/* During FLIP: keep fully visible */
body.mode-walk [data-node].is-done .choice-triptych.is-animating-in {
  height: auto;
  max-height: none;
  overflow: visible;
}
body.mode-walk [data-node].is-done .choice-triptych.is-animating-in .choice-side-left,
body.mode-walk [data-node].is-done .choice-triptych.is-animating-in .choice-side-right {
  height: auto;
  max-height: none;
  overflow: visible;
}
/* Shared FLIP surface: Level 1 person-grid uses the same rules as every other step */
body.mode-walk [data-node].is-done .choice-triptych li.teach-choice.is-flip-animating,
body.mode-walk [data-node].is-current .opts.is-expand-flipping > li.teach-choice.is-flip-animating,
body.mode-walk [data-node].is-current .person-grid.is-expand-flipping > li.teach-choice.is-flip-animating {
  /* Timing set inline; transform + opacity = compositor-friendly */
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Same elevation as resting choice cards — do not drop shadow when animation ends */
  box-shadow: 0 4px 14px rgba(1, 116, 187, 0.12);
  /* Kill competing CSS transitions while FLIP owns the motion */
  transition-property: transform, opacity !important;
}
body.mode-walk [data-node].is-current .opts.is-expand-flipping,
body.mode-walk [data-node].is-current .person-grid.is-expand-flipping,
body.mode-walk [data-node].is-done .choice-triptych.is-animating-in {
  position: relative;
}
body.mode-walk [data-node].is-current .opts.is-expand-flipping > li.teach-choice,
body.mode-walk [data-node].is-current .person-grid.is-expand-flipping > li.teach-choice,
body.mode-walk [data-node].is-done .choice-triptych.is-animating-in > .choice-side > li.teach-choice {
  /* Prevent layout CSS from fighting FLIP mid-flight */
  transition: none;
}
body.mode-walk [data-node].is-current .opts.is-expand-flipping > li.teach-choice.is-flip-animating,
body.mode-walk [data-node].is-current .person-grid.is-expand-flipping > li.teach-choice.is-flip-animating {
  z-index: 5;
}
@media (prefers-reduced-motion: reduce) {
  body.mode-walk [data-node].is-done .choice-triptych li.teach-choice.is-flip-animating,
  body.mode-walk [data-node].is-current .opts.is-expand-flipping > li.teach-choice.is-flip-animating,
  body.mode-walk [data-node].is-current .person-grid.is-expand-flipping > li.teach-choice.is-flip-animating {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
body.mode-walk [data-node].is-done .choice-side {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
  position: relative;
}
/* Center always stacks above sides: prevents Level 1 overlap during/after motion */
body.mode-walk [data-node].is-done .choice-side-center {
  flex: 1 1 22rem;
  max-width: min(36rem, 46%);
  width: 100%;
  z-index: 3;
  min-width: 0;
  isolation: isolate;
}
/* Sides shrink rather than collide with center */
body.mode-walk [data-node].is-done .choice-side-left,
body.mode-walk [data-node].is-done .choice-side-right {
  flex: 1 1 0;
  max-width: 27%;
  min-width: 0;
  height: auto;
  max-height: none;
  overflow: visible;
  z-index: 1;
}
body.mode-walk [data-node].is-done .choice-side-left {
  align-items: stretch;
}
body.mode-walk [data-node].is-done .choice-side-right {
  align-items: stretch;
}
body.mode-walk [data-node].is-done .choice-side-left > li.teach-choice,
body.mode-walk [data-node].is-done .choice-side-right > li.teach-choice {
  max-width: none;
  width: 100%;
  position: relative;
  z-index: 1;
}
body.mode-walk [data-node].is-done .choice-triptych.is-soft-in .choice-side-center {
  z-index: 4;
}
body.mode-walk [data-node].is-done .choice-triptych.is-soft-in .choice-side-left,
body.mode-walk [data-node].is-done .choice-triptych.is-soft-in .choice-side-right {
  z-index: 1;
}

/* Chosen card in center */
body.mode-walk [data-node].is-done .choice-side-center > li.teach-choice.is-chosen {
  display: block !important;
  width: 100%;
  margin: 0;
  border-width: 2px;
  border-color: var(--cmd);
  box-shadow: 0 0 0 2px var(--cmd-ring), 0 6px 18px var(--cmd-shadow);
  transform: none;
  position: relative;
  z-index: 2;
  background: #fff;
}
body.mode-walk [data-node].is-done .choice-side-center > li.teach-choice.is-chosen .opt.is-chosen-opt {
  cursor: default;
  padding-left: 0.85rem; /* no → glyph from .opt::before */
  pointer-events: none;
}
body.mode-walk [data-node].is-done .choice-triptych li.teach-choice .opt::before {
  display: none !important;
  content: none !important;
}
body.mode-walk [data-node].is-done .choice-side-center > li.teach-choice.is-chosen .choice-title::before {
  content: "✓ ";
  color: var(--green);
}
body.mode-walk [data-node].is-done .choice-side-center > li.teach-choice.is-chosen .choice-title::after {
  display: none !important;
}
body.mode-walk [data-node].is-done .choice-side-center > li.teach-choice .chosen-teach-hint {
  display: none;
}
body.mode-walk [data-node].is-done .choice-side-center > li.teach-choice.is-chosen .teach-points,
body.mode-walk [data-node].is-done .choice-side-center > li.teach-choice.is-chosen .teach-points.as-facts {
  display: flex !important;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.45rem;
}
body.mode-walk [data-node].is-done .choice-side-center > li.teach-choice.is-chosen .choice-title::after {
  display: none;
}

/* Sibling stacks: compact, no jitter — keep same card shadow as pre-select / mid-animation */
body.mode-walk [data-node].is-done .choice-side-left > li.teach-choice,
body.mode-walk [data-node].is-done .choice-side-right > li.teach-choice {
  display: block !important;
  width: 100%;
  max-width: none;
  border-style: solid;
  border-color: #c5d0dc;
  opacity: 0.9;
  background: #fafcfe;
  transform: none !important;
  flex: 0 0 auto;
  box-shadow: 0 4px 14px rgba(1, 116, 187, 0.12);
}
body.mode-walk [data-node].is-done .choice-side-left > li.teach-choice .opt,
body.mode-walk [data-node].is-done .choice-side-right > li.teach-choice .opt {
  min-height: 0;
  padding: 0.45rem 0.55rem;
  opacity: 1;
  cursor: default;
}
body.mode-walk [data-node].is-done .choice-side-left > li.teach-choice .choice-title,
body.mode-walk [data-node].is-done .choice-side-right > li.teach-choice .choice-title,
body.mode-walk [data-node].is-done .choice-side-center > li.teach-choice .choice-title,
body.mode-walk [data-node].is-done li.teach-choice.is-chosen .choice-title {
  font-size: 1.32rem;
  min-height: 0;
  margin-bottom: 0;
  line-height: 1.35;
  font-weight: 400;
}
body.mode-walk [data-node].is-done .choice-side-left > li.teach-choice .choice-title::after,
body.mode-walk [data-node].is-done .choice-side-right > li.teach-choice .choice-title::after {
  display: none;
}
body.mode-walk [data-node].is-done .choice-side-left > li.teach-choice .teach-points,
body.mode-walk [data-node].is-done .choice-side-right > li.teach-choice .teach-points {
  display: none !important;
}
body.mode-walk [data-node].is-done .choice-side-left > li.teach-choice .opt:disabled,
body.mode-walk [data-node].is-done .choice-side-right > li.teach-choice .opt:disabled {
  opacity: 1;
  cursor: default;
}

/* Interest panel when it holds the triptych: drop panel chrome padding bulk */
body.mode-walk [data-node].is-done .interest-panel:not(.is-idle-panel) {
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
body.mode-walk [data-node].is-done .interest-panel:not(.is-idle-panel) .interest-panel-head,
body.mode-walk [data-node].is-done .interest-panel:not(.is-idle-panel) .interest-panel-lead {
  display: none;
}

@media (max-width: 720px) {
  body.mode-walk [data-node].is-done .choice-triptych {
    flex-wrap: wrap;
    height: auto;
    max-height: none;
    overflow: visible;
  }
  body.mode-walk [data-node].is-done .choice-side-center {
    order: -1;
    flex: 1 1 100%;
    max-width: 100%;
  }
  body.mode-walk [data-node].is-done .choice-side-left,
  body.mode-walk [data-node].is-done .choice-side-right {
    flex: 1 1 calc(50% - 0.4rem);
    max-width: none;
    height: auto;
    max-height: none;
    overflow: visible;
    align-items: stretch;
  }
}

/* Phones: stack reviewed interest columns fully (50/50 is too tight) */
@media (max-width: 520px) {
  body.mode-walk [data-node].is-done .choice-side-left,
  body.mode-walk [data-node].is-done .choice-side-right {
    flex: 1 1 100%;
  }
}

/* Done decision cards use full walk width */
body.mode-walk [data-node].is-done.box {
  max-width: none;
  width: 100%;
}
body.mode-walk .flow {
  max-width: var(--max);
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  /* Column flex so walk order can override source DOM order for branch steps */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Prevent browser scroll-anchoring jumps when step content mounts */
  overflow-anchor: none;
}
body.mode-walk .walk-focus-spacer,
body.mode-walk .walk-toolbar-placeholder,
body.mode-walk .survey-terminal,
body.mode-walk .box.endpoint {
  overflow-anchor: none;
}
/* Site shell scrollport: kill scroll-anchoring that yanks back to prior done cards */
body.mode-walk .body-wrapper,
html.mode-walk .body-wrapper,
body.mode-walk {
  overflow-anchor: none;
}

body.mode-walk .endpoints {
  grid-template-columns: 1fr;
}
body.mode-walk .endpoints .box.endpoint[hidden] {
  display: none !important;
}

body.mode-map .done-bar,
body.mode-map .chosen-teach-hint,
body.mode-map .prior-teach {
  display: none !important;
}

/* =========================================================
   Full map: wide clinical landscape algorithm
   ========================================================= */
body.mode-map {
  background: #e9eef4;
}
body.mode-map .wrap {
  max-width: min(1400px, 100vw - 1rem);
}
body.mode-map .legend {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

body.mode-map .flow {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0.25rem 0 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: none;
}

/* Landscape band: stage + decision + horizontal cards */
body.mode-map .map-band {
  display: block;
  width: 100%;
  margin: 0 0 0.85rem;
}
body.mode-map .map-band-root [data-node] {
  max-width: none;
}

body.mode-map .stage {
  width: auto;
  max-width: none;
  margin: 0 0 0.45rem;
  padding: 0.35rem 0.75rem;
  background: var(--navy);
  border-radius: 4px;
  display: inline-flex;
  gap: 0.45rem;
  box-shadow: 0 1px 3px rgba(24, 50, 98, 0.18);
}
body.mode-map .stage .line { display: none; }
body.mode-map .stage-num {
  width: 1.2rem;
  height: 1.2rem;
  font-size: 0.62rem;
  background: #fff;
  color: var(--navy);
}
body.mode-map .stage h2 {
  font-size: 0.72rem;
  color: #fff;
  letter-spacing: 0.04em;
}
body.mode-map .stage[data-path="research"] { background: var(--path-research); }
body.mode-map .stage[data-path="research"] .stage-num { color: var(--path-research); }
body.mode-map .stage[data-path="care"] { background: var(--path-care); }
body.mode-map .stage[data-path="care"] .stage-num { color: var(--path-care); }
body.mode-map .stage[data-path="general"] { background: var(--path-general); }
body.mode-map .stage[data-path="general"] .stage-num { color: var(--path-general); }
body.mode-map .stage[data-path="merge"] { background: var(--path-merge); }
body.mode-map .stage[data-path="merge"] .stage-num { color: var(--path-merge); }

/* Two-column path lanes after root fork */
body.mode-map .map-lanes {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 1rem 1.25rem;
  align-items: start;
  width: 100%;
  margin: 0.5rem 0 1rem;
}
body.mode-map .map-lane {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  padding: 0.65rem 0.65rem 0.85rem;
  border-radius: 8px;
  border: 2px solid transparent;
  background: #fff;
}
body.mode-map .map-lane[data-path="care"] {
  border-color: var(--path-care-mid);
  background: linear-gradient(180deg, var(--path-care-bg) 0%, #fff 48px);
}
body.mode-map .map-lane[data-path="research"] {
  border-color: #8eb8dc;
  background: linear-gradient(180deg, var(--path-research-bg) 0%, #fff 48px);
}
body.mode-map .map-lane-head {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 0.65rem;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  text-align: center;
}
body.mode-map .map-lane-head.path-care {
  color: #fff;
  background: var(--path-care);
}
body.mode-map .map-lane-head.path-research {
  color: #fff;
  background: var(--path-research);
}

body.mode-map .map-lane[data-path="research"] .map-vconn { background: #7eb6dd; }
body.mode-map .map-lane[data-path="research"] .map-vconn::after { border-top-color: #7eb6dd; }
body.mode-map .map-lane[data-path="care"] .map-vconn { background: var(--path-care-mid); }
body.mode-map .map-lane[data-path="care"] .map-vconn::after { border-top-color: var(--path-care-mid); }
body.mode-map .map-band-merge .map-vconn {
  background: #a89ad0;
}
body.mode-map .map-band-merge .map-vconn::after {
  border-top-color: #a89ad0;
}

/* Decision boxes as landscape rows of cards */
body.mode-map [data-node] {
  width: 100%;
  max-width: none;
  margin: 0 0 0.15rem;
}
body.mode-map .box {
  padding: 0.55rem 0.65rem 0.6rem;
  border-radius: 6px;
  box-shadow: none;
  border-width: 1.5px;
  border-left-width: 4px;
  background: #fff;
}
body.mode-map .box.decision {
  border-color: #b8c9de;
  border-left-color: var(--navy);
}
body.mode-map [data-path="research"].box.decision,
body.mode-map .map-lane[data-path="research"] .box.decision {
  border-left-color: var(--path-research);
  background: #fbfdff;
}
body.mode-map [data-path="care"].box.decision,
body.mode-map .map-lane[data-path="care"] .box.decision {
  border-left-color: var(--path-care);
  background: #fbfefc;
}
body.mode-map [data-path="general"].box.decision {
  border-left-color: var(--path-general);
  background: #fffdf8;
}
body.mode-map [data-path="merge"].box.decision,
body.mode-map .box.handoff {
  border-left-color: var(--path-merge);
  border-color: #c5b8e0;
  background: #faf8ff;
  max-width: none;
}
body.mode-map .box.gate {
  border-left-color: var(--coral);
  border-color: #e8a99f;
  background: #fff8f6;
}
body.mode-map .box .tag { display: none; }
body.mode-map .box h3 {
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
  line-height: 1.25;
  text-align: left;
  font-weight: 700;
}
body.mode-map .box .intro { display: none; }
body.mode-map .tip-btn { display: none !important; }

/* Landscape cards: always fully expanded; static (no interaction) */
body.mode-map .opts,
body.mode-map .person-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.45rem;
  margin: 0;
  align-items: stretch;
  /* Equal-height rows so multi-line titles do not leave short cards beside tall ones */
  grid-auto-rows: 1fr;
}
body.mode-map .person-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
body.mode-map .opts > li.teach-choice {
  margin: 0;
  border-radius: 5px;
  border-width: 1.5px;
  box-shadow: none;
  background: #fff;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
}
body.mode-map .opts > li.teach-choice:hover {
  box-shadow: none;
}
body.mode-map .opts > li.teach-choice .opt {
  cursor: default;
  padding: 0.5rem 0.55rem 0.55rem;
  pointer-events: none;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
  background: transparent;
}
body.mode-map .opts > li.teach-choice .choice-title {
  font-size: 1.05rem;
  margin: 0;
  line-height: 1.35;
}
body.mode-map .box li .opt:disabled {
  opacity: 1;
  cursor: default;
}
body.mode-map .box li .opt::before {
  display: none;
}

/* Connectors between levels in each lane */
body.mode-map .map-vconn {
  display: block;
  width: 2px;
  height: 16px;
  margin: 0.2rem auto 0.4rem;
  background: #8a9aab;
  position: relative;
}
body.mode-map .map-vconn::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #8a9aab;
}
/* Horizontal branch rail under multi-card decisions */
body.mode-map [data-node] .opts {
  position: relative;
}
body.mode-map [data-node] .opts::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: -0.35rem;
  height: 2px;
  background: #c5d0dc;
  pointer-events: none;
}
body.mode-map [data-node] .opts > li.teach-choice {
  position: relative;
}
body.mode-map [data-node] .opts > li.teach-choice::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.35rem;
  width: 2px;
  height: 0.35rem;
  background: #c5d0dc;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Path-tinted cards on map */
body.mode-map .teach-choice[data-path="research"] {
  border-color: #8eb8dc;
  border-left: 3px solid var(--path-research);
}
body.mode-map .teach-choice[data-path="care"] {
  border-color: var(--path-care-mid);
  border-left: 3px solid var(--path-care);
}
body.mode-map .teach-choice[data-path="general"] {
  border-color: #e0b45a;
  border-left: 3px solid var(--path-general);
}
body.mode-map .teach-choice[data-path="merge"] {
  border-color: #c5b8e0;
  border-left: 3px solid var(--path-merge);
}

/* Merge band + endpoints */
body.mode-map .map-band-merge {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 2px solid #c5b8e0;
}
body.mode-map .endpoints {
  max-width: none;
  margin: 0.35rem 0 0;
  gap: 0.4rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  background: transparent;
  padding: 0;
}
body.mode-map .box.endpoint {
  max-width: none;
  margin: 0;
  padding: 0.4rem 0.5rem;
  border: 1.5px solid #8a969e;
  border-left: 4px solid var(--charcoal);
  background: var(--charcoal-lt);
  border-radius: 4px;
}
body.mode-map .box.endpoint .tag {
  display: inline-block;
  font-size: 0.58rem;
  margin-bottom: 0.15rem;
  padding: 0.08rem 0.35rem;
}
body.mode-map .box.endpoint h3 {
  margin: 0;
  font-size: 0.78rem;
  text-align: left;
}
body.mode-map .box.endpoint .ep-num {
  width: 1.15rem;
  height: 1.15rem;
  font-size: 0.62rem;
}
body.mode-map .box.endpoint ul { display: none; }
body.mode-map .map-endpoints-intro {
  max-width: 40rem;
  margin: 0.25rem 0 0.5rem !important;
  text-align: left;
  font-size: 0.78rem !important;
  color: var(--muted);
}

body.mode-map .footer-note {
  font-size: 0.8rem;
  margin-top: 1.25rem;
}

@media (max-width: 900px) {
  body.mode-map .map-lanes {
    grid-template-columns: 1fr;
  }
}

@media print {
  body.mode-map .walk-toolbar { display: none !important; }
  body.mode-map .flow { max-width: 100%; }
  body.mode-map .box,
  body.mode-map .teach-choice { break-inside: avoid; }
  body.mode-map .map-lanes {
    grid-template-columns: 1fr 1.2fr;
  }
}

/* ---------- Mobile suite (phones → large phones → small tablets) ---------- */
@media (max-width: 640px) {
  .site-top {
    padding: 0.55rem max(0.85rem, env(safe-area-inset-right)) 0.55rem max(0.85rem, env(safe-area-inset-left));
    font-size: 0.72rem;
    line-height: 1.35;
  }
  .page-header {
    padding: 1.35rem max(1rem, env(safe-area-inset-right)) 1.25rem max(1rem, env(safe-area-inset-left));
  }
  .page-header h1 {
    font-size: 1.35rem;
  }
  .page-header .lede {
    font-size: 0.95rem;
    max-width: none;
  }
  .wrap {
    padding-left: max(0.85rem, env(safe-area-inset-left));
    padding-right: max(0.85rem, env(safe-area-inset-right));
    padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
  }

  .walk-toolbar {
    top: env(safe-area-inset-top, 0);
  }
  .walk-toolbar-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }
  .walk-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
  }
  .walk-actions .tb-primary {
    grid-column: 1 / -1;
  }
  .tb-btn {
    min-height: 44px;
    font-size: 0.88rem;
    padding: 0.55rem 0.65rem;
    width: 100%;
  }
  .path-summary {
    flex: none;
    width: 100%;
    font-size: 1rem;
  }
  .path-kicker {
    font-size: 1rem;
  }

  .legend {
    padding: 0.85rem 0.95rem;
  }
  .legend-row {
    flex-direction: column;
    gap: 0.4rem;
  }

  .stage {
    margin: 1.15rem 0 0.75rem;
    gap: 0.55rem;
  }
  .stage-num {
    width: 2rem;
    height: 2rem;
    font-size: 0.9rem;
  }
  .stage h2 {
    font-size: clamp(1.25rem, 5vw, 1.55rem);
  }

  .box {
    padding: 1rem 0.9rem 0.9rem;
  }
  .box h3 {
    font-size: 1.12rem;
  }
  .box .intro {
    font-size: 0.95rem;
  }
  .opts > li .opt {
    font-size: 0.98rem;
  }

  /* Larger tap targets for options + tips */
  .box li {
    margin-bottom: 0.55rem;
    padding: 0.25rem 0.35rem 0.25rem 0.35rem;
    align-items: center;
  }
  .box li .opt {
    min-height: 48px;
    padding: 0.65rem 0.5rem 0.65rem 1.4rem;
    font-size: 0.95rem;
  }
  .box li .opt::before {
    top: 50%;
    transform: translateY(-50%);
  }
  .tip-btn {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    margin-top: 0;
    font-size: 0.75rem;
  }
  .tip-btn.tip-inline {
    width: 1.35rem;
    height: 1.35rem;
    min-width: 1.35rem;
    min-height: 1.35rem;
  }
  .done-summary {
    min-height: 44px;
    padding: 0.7rem 0.85rem;
    font-size: 0.88rem;
  }

  .tip-pop {
    max-width: calc(100vw - 1.25rem);
    left: 0.65rem !important;
    right: 0.65rem;
    font-size: 0.9rem;
    padding: 0.85rem 1rem;
    /* Allow scrolling long tips on short screens */
    max-height: min(50vh, 320px);
    overflow-y: auto;
    pointer-events: auto;
  }
  .tip-pop::before {
    display: none;
  }

  body.mode-walk [data-node].is-current {
    outline-width: 2px;
    outline-offset: 1px;
  }

  .footer-note {
    font-size: 0.85rem;
  }
  .footer-note .plan-list {
    padding-left: 1.05rem;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  .walk-actions {
    grid-template-columns: 1fr;
  }
  .walk-actions .tb-primary {
    grid-column: auto;
  }
  .page-header h1 {
    font-size: 1.22rem;
  }
  .box li .opt {
    font-size: 0.9rem;
  }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .box li,
  .tb-btn,
  .tip-btn,
  body.mode-walk [data-node] {
    transition: none;
  }
}

@media print {
  .site-top { background: #fff; color: var(--navy); border-bottom: 2px solid var(--navy); }
  .page-header {
    background: #fff !important;
    color: var(--navy-deep);
    border-bottom: 3px solid var(--navy);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .tip-pop { display: none !important; }
  .walk-toolbar { display: none !important; }
  body.mode-walk .map-only { display: revert !important; }
  body.mode-walk .stage { display: flex !important; }
  body.mode-walk [data-node] { display: block !important; opacity: 1 !important; outline: none !important; }
  body.mode-walk [data-node].is-done:not(.is-expanded) > :not(.done-bar):not(.opts) { display: revert !important; }
  body.mode-walk [data-node].is-done:not(.is-expanded) .opts > li:not(.is-chosen) { display: block !important; }
  .done-bar,
  .chosen-teach-hint { display: none !important; }
  .box li { break-inside: avoid; }
  body { background: #fff; }
  .box { box-shadow: none; }
  .box li .opt { cursor: default; }
}


/* =========================================================
   Algorithm map canvas (#algo-map): true decision diagram
   ========================================================= */
.algo-map {
  max-width: min(1600px, 100vw - 1rem);
  margin: 0 auto 2rem;
  padding: 0 0.5rem 1rem;
}
.algo-map[hidden] {
  display: none !important;
}
body.mode-map #flow-root,
body.mode-map .begin-gate {
  display: none !important;
}
body.mode-map .algo-map {
  display: block;
}
body.mode-walk .algo-map {
  display: none !important;
}

.algo-canvas {
  position: relative;
  background: #e8edf2;
  border: 1px solid #c5d0dc;
  border-radius: 10px;
  padding: 1.25rem 1rem 1.5rem;
  overflow-x: auto;
  overflow-y: visible;
}
.algo-svg {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}
.algo-edge {
  pointer-events: none;
}
.algo-edge-label {
  font-size: 10px;
  font-family: Outfit, sans-serif;
  font-weight: 600;
  fill: #546e7a;
}

.algo-node {
  position: relative;
  z-index: 3;
  background: #fff;
  border: 1.5px solid #9aabbc;
  border-radius: 6px;
  padding: 0.45rem 0.55rem;
  min-width: 7.5rem;
  max-width: 11rem;
  box-shadow: 0 1px 3px rgba(24, 50, 98, 0.08);
  text-align: center;
}
.algo-node-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #183262;
  line-height: 1.25;
}
.algo-node-lines {
  margin-top: 0.25rem;
}
.algo-line {
  display: block;
  font-size: 0.68rem;
  color: #5c6670;
  line-height: 1.3;
}
.algo-node.kind-decision {
  border-color: #1e4384;
  border-width: 2px;
}
.algo-node.kind-choice {
  border-style: solid;
  background: #fafcfe;
}
.algo-node.kind-process {
  border-color: #b86e00;
  background: #fff8e6;
}
.algo-node.kind-gate {
  border-color: #c23b2a;
  background: #fff6f4;
  border-width: 2px;
}
.algo-node.kind-merge {
  border-color: #5b4b9a;
  background: #f5f2fb;
  max-width: 16rem;
  min-width: 12rem;
}
.algo-node.kind-terminal {
  border-color: #36454f;
  background: #eef1f3;
  max-width: 16rem;
}
.algo-node.path-research {
  border-left: 4px solid #0174bb;
}
.algo-node.path-care {
  border-left: 4px solid #7c6ba8;
}
.algo-node.path-general {
  border-left: 4px solid #b86e00;
}
.algo-node.path-learn {
  border-left: 4px solid #0d7a7a;
  background: #f3fbfa;
}
.algo-node {
  max-width: 14rem;
  min-width: 8.5rem;
  text-align: left;
}
.algo-node-title {
  text-align: center;
}
.algo-line {
  font-size: 0.7rem;
  line-height: 1.35;
  margin-top: 0.15rem;
}
.algo-hs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  margin-top: 0.5rem;
}
.algo-hs-row .algo-node {
  max-width: 15rem;
  flex: 1 1 12rem;
}
.algo-spine-h {
  display: none;
}
.algo-hs-note {
  margin: 0.65rem auto 0;
  max-width: 48rem;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #5c6670;
  text-align: center;
}
.algo-who-row .algo-node {
  max-width: 16rem;
}
.algo-outcome-cols {
  max-width: 64rem;
}
.algo-lanes-3 {
  grid-template-columns: minmax(160px, 0.9fr) minmax(160px, 0.85fr) minmax(420px, 2.2fr) !important;
}
.algo-lane.path-learn {
  border-color: #6bb3b0;
  background: linear-gradient(180deg, #e6f6f5 0%, #fff 40px);
}
.algo-lane-title.path-learn,
.algo-lane.path-learn .algo-lane-title {
  background: #0d7a7a;
}
.algo-lane-blurb {
  font-size: 0.72rem;
  line-height: 1.45;
  color: #3a4550;
  margin: 0.35rem 0.25rem 0.55rem;
  text-align: left;
}
.algo-split-col.path-learn {
  border-color: #6bb3b0;
  background: linear-gradient(180deg, #e6f6f5 0%, #fff 100%);
}
/* Walk outcome triad */
.outcome-triad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  margin: 0.75rem 0 1rem;
}
.outcome-card {
  border-radius: 10px;
  border: 1.5px solid #c5d0dc;
  padding: 0.65rem 0.75rem;
  font-size: 0.85rem;
  line-height: 1.4;
  background: #fff;
}
.outcome-card strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}
.outcome-card.path-learn {
  border-color: #6bb3b0;
  background: #f3fbfa;
}
.outcome-card.path-care {
  border-color: #9b8bc0;
  background: #f7f4fb;
}
.outcome-card.path-research {
  border-color: #8eb8dc;
  background: #f3f9fd;
}
.outcome-card p {
  margin: 0;
  color: #5c6670;
  font-size: 0.8rem;
}
@media (max-width: 800px) {
  .outcome-triad {
    grid-template-columns: 1fr;
  }
  .algo-lanes-3 {
    grid-template-columns: 1fr !important;
  }
}
body.mode-walk [data-node][data-path="learn"],
body.mode-walk .box.decision[data-path="learn"] {
  border-color: #6bb3b0;
}
.algo-node.path-merge {
  border-left: 4px solid #5b4b9a;
}
.algo-node.path-root {
  border-left: 4px solid #1e4384;
  max-width: 14rem;
  min-width: 12rem;
  margin: 0 auto;
}

.algo-root {
  margin-bottom: 0.5rem;
  text-align: center;
  padding: 0.75rem 0.5rem 1rem;
  background: #f4f7fa;
  border: 1px solid #d0dae6;
  border-radius: 8px;
}
.algo-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.algo-level-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #546e7a;
  margin-bottom: 0.55rem;
}
.algo-gap {
  height: 2rem;
  width: 2px;
  margin: 0.15rem auto;
  background: linear-gradient(to bottom, #9aabbc 0%, #9aabbc 70%, transparent 100%);
  flex-shrink: 0;
}
.algo-gap-sm {
  height: 1.15rem;
}
.algo-gap-lg {
  height: 3.25rem;
  width: 100%;
  background: none;
  border: none;
  margin: 1rem 0 1.15rem;
  position: relative;
}
.algo-gap-lg::before {
  content: "▼ After derived path: Learning only · Not-research · Research (role depth from step 1)";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.68rem;
  font-weight: 600;
  color: #5c6670;
  background: #e8edf2;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 1;
  max-width: 96%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.algo-gap-lg::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 1px;
  background: #c5d0dc;
}
/* Second separator: merge (must not reuse “lanes below” copy) */
.algo-gap-merge {
  height: 2.75rem;
  width: 100%;
  background: none;
  border: none;
  margin: 0.85rem 0 0.65rem;
  position: relative;
}
.algo-gap-merge::before {
  content: "▼ All paths meet at Contact";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.68rem;
  font-weight: 600;
  color: #5b4b9a;
  background: #e8edf2;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 1;
}
.algo-gap-merge::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 1px;
  background: #c5b8e0;
}
.algo-bypass-rail {
  text-align: center;
  margin: 0 0 0.55rem;
}
.algo-bypass-rail-label {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  color: #5c6670;
  background: #fff;
  border: 1px dashed #9aabbc;
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
}
.algo-map-key {
  position: sticky;
  top: 0.35rem;
  z-index: 5;
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #3a4550;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #c5d0dc;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(24, 50, 98, 0.06);
}
.algo-map-key strong {
  color: var(--navy-deep);
}
.algo-key-dash {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: #7c6ba8;
  border-bottom: 1px dashed #7c6ba8;
}
/* Three independent columns under root: unsure holds the bridge so lines do not cross */
.algo-split-cols {
  display: grid;
  /* Research | Not-research | Unsure: same left-to-right story as lanes below */
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 1.25rem 1.25rem;
  width: 100%;
  max-width: min(72rem, 100%);
  margin: 0.75rem auto 0;
  align-items: start; /* compact research/care; unsure may be taller */
  padding: 0.75rem 0.25rem 0.75rem;
}
.algo-split-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-height: 0;
  padding: 0.75rem 0.55rem 0.85rem;
  border-radius: 8px;
  border: 1.5px solid #d0dae6;
  background: #fff;
}
.algo-split-col.is-compact {
  min-height: 0;
  justify-content: flex-start;
  gap: 0.5rem;
}
.algo-split-col.is-compact .algo-col-note {
  margin-top: 0.1rem;
}
.algo-split-col.path-research {
  border-color: #8eb8dc;
  background: linear-gradient(180deg, #e8f3fb 0%, #fff 100%);
}
.algo-split-col.path-care {
  border-color: #9b8bc0;
  background: linear-gradient(180deg, #f0ebf8 0%, #fff 100%);
}
.algo-split-col.path-general {
  border-color: #e0b45a;
  background: linear-gradient(180deg, #fff8e6 0%, #fff 100%);
  min-height: 12rem;
}
.algo-split-col .algo-node {
  min-width: 8.5rem;
  max-width: 11.5rem;
  width: 100%;
}
.algo-col-spacer {
  flex: 1;
  min-height: 2.5rem;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    currentColor 0 3px,
    transparent 3px 7px
  );
  opacity: 0.35;
  margin: 0.25rem 0;
}
.algo-split-col.path-research .algo-col-spacer { color: #0174bb; }
.algo-split-col.path-care .algo-col-spacer { color: #7c6ba8; }
.algo-col-note {
  font-size: 0.65rem;
  font-weight: 600;
  color: #5c6670;
  text-align: center;
  margin-top: 0.15rem;
}
.algo-bridge-choices {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.algo-bridge-choices .algo-node {
  min-width: 7rem;
  max-width: 9.5rem;
  font-size: 0.75rem;
}
@media (max-width: 800px) {
  .algo-split-cols {
    grid-template-columns: 1fr;
  }
  .algo-split-col.path-general {
    min-height: 0;
  }
  .algo-col-spacer {
    min-height: 1rem;
  }
}

.algo-lanes {
  display: grid;
  /* Match top split: Research (wide, left) then Not-research (narrow, right) */
  grid-template-columns: minmax(480px, 2.4fr) minmax(180px, 0.75fr);
  gap: 1.75rem;
  align-items: start;
  margin-bottom: 0.5rem;
  min-height: 12rem;
}
.algo-col-arrow {
  display: inline-block;
  font-weight: 800;
  color: inherit;
  margin-right: 0.15rem;
}
.algo-char-band {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  color: #0174bb;
  background: #e0f0fa;
  border: 1px solid #8eb8dc;
  border-radius: 4px;
  padding: 0.2rem 0.35rem;
  margin: 0 0 0.4rem;
  width: 100%;
}
.algo-hs-stack .algo-char-band {
  color: #b86e00;
  background: #fff8e6;
  border-color: #e0b45a;
}
.algo-hs-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 0;
}
.algo-bridge-choices {
  flex-wrap: wrap;
}
.algo-lane {
  background: #fff;
  border-radius: 8px;
  border: 2px solid #c5d0dc;
  padding: 0.65rem 0.55rem 0.85rem;
  min-width: 0;
}
.algo-lane.path-care {
  border-color: #9b8bc0;
  background: linear-gradient(180deg, #f0ebf8 0%, #fff 40px);
}
.algo-lane.path-research {
  border-color: #8eb8dc;
  background: linear-gradient(180deg, #e8f3fb 0%, #fff 40px);
}
.algo-lane-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  background: #546e7a;
  border-radius: 4px;
  padding: 0.35rem 0.5rem;
  margin: 0 0 0.65rem;
}
.algo-lane.path-care .algo-lane-title {
  background: #7c6ba8;
}
.algo-lane.path-research .algo-lane-title {
  background: #0174bb;
}
.algo-lane-title.path-merge {
  background: #5b4b9a;
}

.algo-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.algo-spine {
  width: 2px;
  height: 18px;
  background: none;
  margin: -2px auto 6px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.algo-spine::before {
  content: "";
  position: absolute;
  left: 0;
  width: 2px;
  top: 0;
  bottom: 4px;
  background: #9aabbc;
}
.algo-spine::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #9aabbc;
}
.algo-spine-bypass {
  height: 22px;
  background: linear-gradient(180deg, #9b8bc0 0%, rgba(155, 139, 192, 0.35) 100%);
  border-radius: 2px;
}
.algo-lane.path-research .algo-spine::before {
  background: #7eb6dd;
}
.algo-lane.path-research .algo-spine::after {
  border-top-color: #7eb6dd;
}
.algo-bypass-note {
  font-size: 0.65rem;
  font-weight: 600;
  color: #5c6670;
  text-align: center;
  margin-top: 0.25rem;
}

.algo-sublanes {
  display: grid;
  grid-template-columns: repeat(5, minmax(7.5rem, 1fr));
  gap: 0.5rem;
  margin-top: 0.65rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  align-items: start; /* content height only: no empty tunnels */
}
.algo-sublane {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #d0dae6;
  border-radius: 6px;
  padding: 0.4rem 0.3rem 0.5rem;
  min-width: 7.5rem;
  height: auto;
  align-self: start;
}
.algo-sublane.path-general {
  border-color: #e0b45a;
}
.algo-sublane-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #0174bb;
  text-align: center;
  margin-bottom: 0.25rem;
}
.algo-sublane-name {
  display: block;
}
.algo-sublane-steps {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #546e7a;
  background: #eef2f7;
  border-radius: 999px;
  padding: 0.08rem 0.4rem;
}
.algo-sublane.is-deep .algo-sublane-steps {
  color: #0174bb;
  background: #e0f0fa;
}
.algo-sublane-purpose {
  font-size: 0.58rem;
  font-weight: 600;
  color: #5c6670;
  text-align: center;
  margin-bottom: 0.35rem;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
}
.algo-sublane.path-general .algo-sublane-label {
  color: #b86e00;
}
.algo-sublane .algo-node {
  max-width: 100%;
  min-width: 0;
  width: 100%;
}
.algo-sublane-stack {
  width: 100%;
}
.algo-lane-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin-top: 0.45rem;
  padding-top: 0.35rem;
  border-top: 1px solid #d5dee8;
}
.algo-lane-footer.is-long {
  border-top-color: #8eb8dc;
}
.algo-then-chip {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  color: #36454f;
  background: #eef1f3;
  border: 1px solid #8a969e;
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
}
.algo-then-note {
  font-size: 0.55rem;
  font-weight: 600;
  color: #7a8690;
  text-align: center;
  line-height: 1.2;
}

.algo-merge {
  background: #f7f5fc;
  border: 2px solid #c5b8e0;
  border-radius: 8px;
  padding: 0.75rem 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.algo-ep-groups {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
  margin-top: 0.65rem;
}
.algo-ep-group-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #546e7a;
  margin-bottom: 0.25rem;
}
.algo-ep-group-purpose {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #7a8690;
}
.algo-ep-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.35rem;
  width: 100%;
}
.algo-edge-label.algo-bypass-bus-label {
  fill: #546e7a;
  font-size: 10px;
  font-weight: 700;
}
.algo-design-fork {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  width: 100%;
  margin: 0.15rem 0;
}
.algo-design-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.25rem;
  border: 1px dashed #b8c9de;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
}
.algo-design-branch .algo-node {
  width: 100%;
  max-width: none;
  min-width: 0;
}
.algo-skip-label {
  font-size: 0.58rem;
  font-weight: 700;
  color: #7c6ba8;
  text-align: center;
  padding: 0.15rem 0.2rem;
  line-height: 1.2;
}
/* Quieter nested frames */
.algo-sublane {
  box-shadow: none;
}
.algo-lane {
  box-shadow: 0 2px 8px rgba(24, 50, 98, 0.05);
}
.algo-ep {
  background: linear-gradient(180deg, #f4f6f8 0%, #e8ecf0 100%);
  border: 1px solid #6b787f;
  border-left: 4px solid #36454f;
  border-radius: 5px;
  padding: 0.4rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #1f2a30;
  line-height: 1.3;
  box-shadow: 0 1px 2px rgba(54, 69, 79, 0.08);
}
.algo-ep-n {
  display: inline-flex;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: #36454f;
  color: #fff;
  font-size: 0.6rem;
  align-items: center;
  justify-content: center;
  margin-right: 0.3rem;
  vertical-align: middle;
}

@media (max-width: 960px) {
  .algo-lanes {
    grid-template-columns: 1fr;
  }
  .algo-sublanes {
    grid-template-columns: repeat(2, minmax(7.5rem, 1fr));
  }
}
@media print {
  .algo-canvas {
    background: #fff;
    border: none;
  }
  .algo-svg {
    print-color-adjust: exact;
  }
}

/* ========== Two-level start (who → interest panels) ========== */
.person-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: stretch;
  grid-auto-rows: 1fr;
}
.person-grid > .teach-choice .choice-title {
  font-size: 1.18rem;
}

/* Step 1: equal tiles, charcoal chrome (no lane-color left accent). */
body.mode-walk [data-node="who_are_you"] .person-grid > li.teach-choice {
  --cmd: var(--charcoal);
  --cmd-hover: #2a333a;
  --cmd-shadow: rgba(54, 69, 79, 0.26);
  --cmd-soft: var(--charcoal-lt);
  --cmd-ring: rgba(54, 69, 79, 0.3);
  align-self: stretch;
  height: auto;
  min-height: 100%;
  border-color: #36454f;
  border-left-color: #36454f;
  border-left-width: 2px;
}
body.mode-walk [data-node="who_are_you"] .person-grid > li.teach-choice .opt {
  flex: 1 1 auto;
  height: 100%;
  min-height: 5.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.mode-walk [data-node="who_are_you"] .person-grid > li.teach-choice .choice-title {
  min-height: 2.6em;
}
@media (max-width: 900px) {
  .person-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .person-grid {
    grid-template-columns: 1fr;
  }
}
.interest-panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 0.75rem;
  /* Do not stretch closed lanes to the open panel’s height */
  align-items: start;
}
.interest-panel {
  border: 2px solid #c5d0dc;
  border-radius: 12px;
  padding: 0.75rem;
  background: #fff;
  min-width: 0;
  align-self: start;
  height: auto;
}
.interest-panel.path-research {
  border-color: #8eb8dc;
  background: linear-gradient(180deg, #e8f3fb 0%, #fff 48px);
}
.interest-panel.path-not_hsr {
  border-color: #9b8bc0;
  background: linear-gradient(180deg, #f0ebf8 0%, #fff 48px);
}
.interest-panel.path-informational {
  border-color: #6bb3b0;
  background: linear-gradient(180deg, #e6f6f5 0%, #fff 48px);
}
.interest-panel-head {
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  border-radius: 6px;
  padding: 0.45rem 0.55rem;
  margin: 0 0 0.4rem;
  background: #546e7a;
}
.interest-panel.path-research .interest-panel-head { background: #0174bb; }
.interest-panel.path-not_hsr .interest-panel-head { background: #7c6ba8; }
.interest-panel.path-informational .interest-panel-head { background: #0d7a7a; }
/* Sub-sub titles under panel heads are retired (content lives in choice cards) */
.interest-panel-lead {
  display: none !important;
}
.interest-panel .opts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.interest-panel .teach-choice .choice-title {
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  overflow: visible;
  min-height: 0;
}
.interest-focus-box {
  max-width: 100%;
}
@media (max-width: 900px) {
  .interest-panels {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Full algorithm map: CSS-only professional layout
   (no SVG overlays; columns keep connectors inside lanes)
   ========================================================= */
body.mode-map .algo-map {
  display: block;
  max-width: min(1360px, 100%);
}
.algo-canvas {
  padding: 1.35rem 1.15rem 2.25rem;
}
.algo-canvas--css {
  /* Hide legacy SVG if any leftover markup */
}
.algo-canvas--css .algo-svg {
  display: none !important;
}

.algo-level-block {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}
/* Space between L1 person cards and the L2 interest header */
#algo-level-1 {
  margin-bottom: 0;
}
/* L1 → L2 join: same language as .algo-col-link / .algo-col-foot (2px stem + chevron) */
.algo-level-join {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  min-height: 0;
  pointer-events: none;
}
.algo-level-join-line {
  display: block;
  width: 2px;
  flex: 0 0 auto;
  height: 1.15rem;
  min-height: 1.15rem;
  margin: 0;
  border: none;
  border-radius: 0;
  background: var(--charcoal);
  opacity: 1;
}
.algo-level-join .algo-col-link-arrow {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: block;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--charcoal);
}
#algo-level-2 {
  margin-top: 0.35rem;
  padding-top: 0.15rem;
}
#algo-level-2 .algo-level-label {
  margin-top: 0;
  margin-bottom: 1rem;
}
/* Space between interest panels / column links and the L3 depth header */
#algo-level-3-plus {
  margin-top: 2rem;
  padding-top: 0.5rem;
}
#algo-level-3-plus .algo-level-label {
  margin-top: 0;
  margin-bottom: 1rem;
}
.algo-level-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #546e7a;
  text-align: center;
  margin: 0 0 0.85rem;
}
.algo-level-note {
  display: inline;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #6b7c8a;
  font-size: 0.68rem;
}

/*  Section connectors (horizontal badge with lines) : :  */
.algo-flow-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.15rem auto 1.15rem;
  max-width: 28rem;
}
.algo-flow-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #9aabbc 20%, #9aabbc 80%, transparent);
}
.algo-flow-badge {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #546e7a;
  background: #fff;
  border: 1px solid #c5d0dc;
  border-radius: 999px;
  padding: 0.28rem 0.85rem;
  box-shadow: 0 1px 2px rgba(24, 50, 98, 0.05);
}
.algo-flow-connector--merge {
  max-width: 22rem;
  margin-top: 1.35rem;
}

/*  Level 1 person grid : :  */
.algo-person-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem 0.65rem;
  align-items: stretch;
  grid-auto-rows: 1fr;
  padding: 0.15rem 0;
}
.algo-person-node {
  max-width: none !important;
  min-width: 0 !important;
  width: 100%;
  height: 100%;
  min-height: 100%;
  text-align: center;
  padding: 0.55rem 0.45rem;
  border-left-width: 2px;
  border-left-color: #36454f;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.algo-person-node.path-research,
.algo-person-node.path-not_hsr,
.algo-person-node.path-informational {
  border-left-width: 2px;
  border-left-color: #36454f;
}
.algo-person-node .algo-node-title {
  font-size: 0.76rem;
  line-height: 1.3;
  font-weight: 600;
  min-height: 2.6em;
}

/*  Three-column rows: interest / links / lanes share the same track widths : :  */
.algo-three-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  align-items: stretch;
}
.algo-three-row--interest {
  align-items: stretch;
  grid-auto-rows: minmax(32rem, auto);
}
.algo-three-row--interest > .algo-interest-panel {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100%;
  box-sizing: border-box;
}
/* Option cards grow with their titles; the row is tall enough for four wrapped lines */
.algo-three-row--interest .algo-css-stack {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: min-content;
  height: auto;
}
.algo-three-row--interest .algo-interest-node {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 6.75rem;
  height: auto;
  box-sizing: border-box;
}
.algo-three-row--interest .algo-css-stack .algo-spine {
  flex: 0 0 auto;
}
.algo-three-row--links {
  margin: -2px 0 0;
  min-height: 1.65rem;
}
.algo-three-row--lanes {
  align-items: stretch;
}
.algo-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0;
  height: 100%;
}
/*
 * Lane foot: same join language as .algo-col-link above
 * (solid 2px stem from box edge + chevron arrow into the next section).
 */
.algo-col-foot {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 1.65rem;
  margin-top: -2px;
  padding: 0;
  position: relative;
}
/* Pull the stem flush to the bottom edge of the lane box above */
.algo-col > .algo-lane {
  margin-bottom: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.algo-col-foot-line {
  flex: 1 1 auto;
  width: 2px;
  min-height: 1.15rem;
  margin: 0;
  border: none;
  border-radius: 0;
  background: #9aabbc;
  opacity: 1;
}
.algo-col-foot .algo-col-link-arrow {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: block;
  width: 0;
  height: 0;
  margin: 0 0 6px;
  padding: 0;
  line-height: 0;
  font-size: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #9aabbc;
}
.algo-col-foot.path-research .algo-col-foot-line {
  background: #0174bb;
}
.algo-col-foot.path-research .algo-col-link-arrow {
  border-top-color: #0174bb;
}
.algo-col-foot.path-not_hsr .algo-col-foot-line {
  background: #7c6ba8;
}
.algo-col-foot.path-not_hsr .algo-col-link-arrow {
  border-top-color: #7c6ba8;
}
.algo-col-foot.path-informational .algo-col-foot-line {
  background: #0d7a7a;
}
.algo-col-foot.path-informational .algo-col-link-arrow {
  border-top-color: #0d7a7a;
}

/* Merge join: three lane stems meet a solid bar, then one stem+arrow into contact */
.algo-merge-join {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto 0.35rem;
  max-width: 42rem;
  width: 100%;
  padding: 0 0.5rem;
}
.algo-merge-join-rail {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
  max-width: 100%;
  align-items: start;
  min-height: 0.85rem;
  margin-bottom: 0;
}
/* Short solid stubs from each column center into the horizontal bar */
.algo-merge-join-from {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 2px;
  height: 0.75rem;
  background: #9aabbc;
  border-radius: 0;
}
.algo-merge-join-from.path-research {
  background: #0174bb;
}
.algo-merge-join-from.path-not_hsr {
  background: #7c6ba8;
}
.algo-merge-join-from.path-informational {
  background: #0d7a7a;
}
.algo-merge-join-bar {
  position: absolute;
  left: 16.5%;
  right: 16.5%;
  bottom: 0;
  height: 2px;
  border-radius: 0;
  background: #6b7c8a;
  opacity: 1;
  z-index: 0;
}
.algo-merge-join-label {
  margin: 0.45rem 0 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #546e7a;
  background: #fff;
  border: 1px solid #c5d0dc;
  border-radius: 999px;
  padding: 0.28rem 0.9rem;
  box-shadow: 0 1px 3px rgba(24, 50, 98, 0.06);
}
.algo-merge-join-stem {
  width: 2px;
  height: 0.85rem;
  border-radius: 0;
  background: #6b7c8a;
  margin: 0;
}
.algo-merge-join-arrow {
  border-top-color: #6b7c8a;
  margin: 0 0 0.15rem;
}
/* Merge section sits flush under lane feet */
#algo-level-merge {
  margin-top: 0;
}
/* Lengthen column feet so stems clearly meet the outcome panel */
#algo-level-3-plus .algo-col-foot {
  min-height: 2rem;
}
#algo-level-3-plus .algo-col-foot-line {
  min-height: 1.35rem;
}
/* Interest panel → depth lane: solid stem flush to both boxes + chevron */
.algo-col-link {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 1.65rem;
  position: relative;
  margin: 0;
  padding: 0;
}
.algo-col-link::before {
  content: "";
  flex: 1 1 auto;
  width: 2px;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: #9aabbc;
  border-radius: 0;
}
.algo-col-link-arrow {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: block;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #9aabbc;
}
.algo-col-link.path-research::before {
  background: #0174bb;
}
.algo-col-link.path-research .algo-col-link-arrow {
  border-top-color: #0174bb;
}
.algo-col-link.path-not_hsr::before {
  background: #7c6ba8;
}
.algo-col-link.path-not_hsr .algo-col-link-arrow {
  border-top-color: #7c6ba8;
}
.algo-col-link.path-informational::before {
  background: #0d7a7a;
}
.algo-col-link.path-informational .algo-col-link-arrow {
  border-top-color: #0d7a7a;
}

/* Interest panels */
.algo-interest-panel {
  position: relative;
  z-index: 2;
  border: 2px solid #c5d0dc;
  border-radius: 10px;
  padding: 0.5rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: stretch;
  box-shadow: 0 1px 4px rgba(24, 50, 98, 0.05);
  box-sizing: border-box;
}
.algo-interest-panel.path-research {
  border-color: #8eb8dc;
  background: linear-gradient(180deg, #e8f3fb 0%, #fff 42px);
}
.algo-interest-panel.path-not_hsr {
  border-color: #9b8bc0;
  background: linear-gradient(180deg, #f0ebf8 0%, #fff 42px);
}
.algo-interest-panel.path-informational {
  border-color: #6bb3b0;
  background: linear-gradient(180deg, #e6f6f5 0%, #fff 42px);
}
.algo-panel-title {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  padding: 0.38rem 0.4rem;
  background: #546e7a;
  margin: 0;
}
.algo-panel-title.path-research { background: #0174bb; }
.algo-panel-title.path-not_hsr { background: #7c6ba8; }
.algo-panel-title.path-informational { background: #0d7a7a; }

.algo-interest-node {
  max-width: none !important;
  min-width: 0 !important;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.5rem;
  box-sizing: border-box;
}
.algo-interest-node .algo-node-title {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  width: 100%;
}
.algo-node.path-not_hsr {
  border-left: 3px solid #7c6ba8;
}
.algo-node.path-informational {
  border-left: 3px solid #0d7a7a;
}
.algo-node.path-research {
  border-left: 3px solid #0174bb;
}

/* Depth lanes */
.algo-lane {
  background: #fff;
  border-radius: 10px;
  border: 2px solid #c5d0dc;
  padding: 0.55rem 0.5rem 0.45rem;
  min-width: 0;
  box-shadow: 0 1px 4px rgba(24, 50, 98, 0.05);
}
.algo-lane.path-research {
  border-color: #8eb8dc;
  background: linear-gradient(180deg, #e8f3fb 0%, #fff 36px);
}
.algo-lane.path-not_hsr {
  border-color: #9b8bc0;
  background: linear-gradient(180deg, #f0ebf8 0%, #fff 36px);
}
.algo-lane.path-informational {
  border-color: #6bb3b0;
  background: linear-gradient(180deg, #e6f6f5 0%, #fff 36px);
}
.algo-lane-title {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  background: #546e7a;
  border-radius: 5px;
  padding: 0.38rem 0.45rem;
  margin: 0 0 0.5rem;
}
.algo-lane.path-research .algo-lane-title,
header.algo-lane-title:not(.path-not_hsr):not(.path-informational) {
  background: #0174bb;
}
.algo-lane.path-not_hsr .algo-lane-title,
header.algo-lane-title.path-not_hsr {
  background: #7c6ba8;
}
.algo-lane.path-informational .algo-lane-title,
header.algo-lane-title.path-informational {
  background: #0d7a7a;
}
.algo-lane-blurb {
  font-size: 0.68rem;
  line-height: 1.4;
  color: #5c6670;
  margin: 0 0 0.55rem;
  padding: 0 0.15rem;
}

/* Stacks + local spines (inside columns only) */
.algo-css-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.algo-stack-node {
  max-width: none !important;
  width: 100%;
  text-align: left;
  padding: 0.38rem 0.5rem;
}
.algo-stack-node .algo-node-title {
  font-size: 0.7rem;
  text-align: left;
  line-height: 1.3;
  font-weight: 600;
}
/* Stack nodes: shaft meets the box border; head sits below the shaft */
.algo-css-stack .algo-spine {
  width: 2px;
  height: 18px;
  margin: -2px auto 6px;
  background: none;
  position: relative;
  border-radius: 0;
  flex-shrink: 0;
}
.algo-css-stack .algo-spine::before {
  content: "";
  position: absolute;
  left: 0;
  width: 2px;
  top: 0;
  bottom: 4px;
  background: #9aabbc;
}
.algo-css-stack .algo-spine::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #9aabbc;
}
.algo-css-stack .algo-spine.path-research::before {
  background: #5aa0d4;
}
.algo-css-stack .algo-spine.path-research::after {
  border-top-color: #5aa0d4;
}
.algo-css-stack .algo-spine.path-not_hsr::before {
  background: #9b8bc0;
}
.algo-css-stack .algo-spine.path-not_hsr::after {
  border-top-color: #9b8bc0;
}
.algo-css-stack .algo-spine.path-informational::before {
  background: #4aa3a0;
}
.algo-css-stack .algo-spine.path-informational::after {
  border-top-color: #4aa3a0;
}

.algo-char-band {
  margin: 0.55rem 0 0.45rem;
  padding: 0.32rem 0.45rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: #183262;
  background: #dcecf8;
  border: 1px solid #a8cce6;
  border-radius: 5px;
}
/* Research / Care lanes: pinch the shared frame at each section band. */
.algo-lane.path-research > .algo-char-band,
.algo-lane.path-not_hsr > .algo-char-band {
  display: block;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  width: calc(100% + 1rem + 12px);
  max-width: none;
  margin: 1.15rem calc(-0.5rem - 6px) 0.75rem;
  padding: 0.42rem 0.75rem;
  border: 2px solid #8eb8dc;
  border-radius: 8px;
  background: #dcecf8;
  box-shadow: none;
}
.algo-lane.path-not_hsr > .algo-char-band {
  border-color: #9b8bc0;
  background: #efeaf7;
}

/*  Merge: shared contact hub + lane-aligned endpoints : :  */
.algo-merge-block {
  text-align: center;
  padding-top: 0;
  margin-top: 0;
}
/* Column feet land on the shared outcome panel (no intermediate contact hub) */
#algo-level-merge {
  margin-top: 0;
  padding-top: 0;
}

/* Single terminal panel: review summary → submit inquiry → PDF next steps */
.algo-outcome-panel {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 1.1rem 1.15rem 1.2rem;
  box-sizing: border-box;
  background: #fff;
  border: 2px solid #1e4384;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(24, 50, 98, 0.08);
  position: relative;
  z-index: 1;
}
.algo-outcome-head {
  text-align: center;
  margin: 0;
  padding: 0 0.5rem;
  border-bottom: none;
}
.algo-outcome-title {
  margin: 0 0 0.45rem;
  font-family: var(--font-heading, system-ui, sans-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: #1e4384;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.algo-outcome-lede {
  margin: 0 auto;
  max-width: 44rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #3d4650;
  font-weight: 400;
}

/* Endpoints: even grid (not sparse per-lane columns) */
.algo-ep-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem 0.55rem;
  margin: 0;
  align-items: stretch;
}

/* Lane-colored endpoint cards (Research / Care / Learn) */
.algo-ep-grid .algo-ep {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.7rem 0.75rem;
  min-height: 3.25rem;
  height: 100%;
  box-sizing: border-box;
  text-align: left;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.35;
  box-shadow: 0 1px 2px rgba(24, 50, 98, 0.06);
  border: 1.5px solid #c5d0dc;
  border-left-width: 4px;
  background: #fff;
  color: #1a2430;
}
.algo-ep-grid .algo-ep-title {
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
}
.algo-ep-grid .algo-ep.path-research {
  background: #e8f3fb;
  border-color: #8eb8dc;
  border-left-color: #0174bb;
  color: #0b3d66;
}
.algo-ep-grid .algo-ep.path-not_hsr {
  background: #f0ebf8;
  border-color: #c4b5df;
  border-left-color: #7c6ba8;
  color: #3d2f5c;
}
.algo-ep-grid .algo-ep.path-informational {
  background: #e6f6f5;
  border-color: #8ec9c5;
  border-left-color: #0d7a7a;
  color: #0a4a4a;
}

@media (max-width: 1100px) {
  .algo-ep-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .algo-ep-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 420px) {
  .algo-ep-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .algo-person-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .algo-three-row {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .algo-three-row--links {
    display: none;
  }
  .algo-ep-by-lane {
    gap: 1rem;
  }
  .algo-col-foot {
    min-height: 1.15rem;
  }
  body.mode-map .algo-map {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .algo-canvas {
    padding: 1rem 0.75rem 1.5rem;
  }
}
@media (max-width: 520px) {
  .algo-outcome-panel {
    padding: 0.9rem 0.75rem 1rem;
  }
  .algo-outcome-title {
    font-size: 1.05rem;
  }
  .algo-outcome-lede {
    font-size: 0.9rem;
  }
  .algo-person-grid {
    grid-template-columns: 1fr;
  }
  /* Scale down full-map type so phone columns remain readable without overflow */
  body.mode-map .algo-map .algo-level-label {
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
  }
  body.mode-map .algo-map .algo-person-node .algo-node-title,
  body.mode-map .algo-map .algo-interest-node .algo-node-title {
    font-size: 0.95rem;
  }
  body.mode-map .algo-map .algo-lane-title {
    font-size: 0.92rem;
  }
  body.mode-map .algo-map .algo-lane-blurb {
    font-size: 0.9rem;
    line-height: 1.45;
  }
  body.mode-map .algo-map .algo-char-band {
    font-size: 0.82rem;
  }
  body.mode-map .algo-map .algo-ep-by-lane .algo-ep-title {
    font-size: 0.88rem;
  }
}

/*
 * Full-map readability: larger type across the algorithm canvas.
 * Placed late so it wins over earlier compact map sizes.
 */
body.mode-map .algo-map .algo-level-label {
  font-size: 1.12rem;
  letter-spacing: 0.04em;
  margin-bottom: 1.1rem;
}
body.mode-map .algo-map .algo-level-note,
body.mode-map .algo-map .algo-flow-badge,
body.mode-map .algo-map .algo-merge-join-label {
  font-size: 1rem;
}
body.mode-map .algo-map .algo-person-node,
body.mode-map .algo-map .algo-person-node.path-research,
body.mode-map .algo-map .algo-person-node.path-not_hsr,
body.mode-map .algo-map .algo-person-node.path-informational,
body.mode-map .algo-map .algo-node.algo-person-node.path-research,
body.mode-map .algo-map .algo-node.algo-person-node.path-informational {
  padding: 0.85rem 0.65rem;
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-left-width: 2px;
  border-left-color: #36454f;
}
body.mode-map .algo-map .algo-person-node .algo-node-title {
  font-size: 1.08rem;
  line-height: 1.4;
  font-weight: 600;
  min-height: 2.8em;
}
body.mode-map .algo-map .algo-panel-title {
  font-size: 1.08rem;
  padding: 0.55rem 0.6rem;
}
body.mode-map .algo-map .algo-interest-node {
  padding: 0.7rem 0.75rem;
  min-height: 6.75rem;
}
body.mode-map .algo-map .algo-interest-node .algo-node-title {
  font-size: 1.12rem;
  line-height: 1.45;
}
body.mode-map .algo-map .algo-lane-title {
  font-size: 1rem;
  padding: 0.55rem 0.65rem;
}
body.mode-map .algo-map .algo-lane-blurb {
  font-size: 1rem;
  line-height: 1.5;
}
body.mode-map .algo-map .algo-char-band {
  font-size: 0.95rem;
  padding: 0.48rem 0.65rem;
}
body.mode-map .algo-map .algo-css-stack .algo-spine,
body.mode-map .algo-map .algo-spine {
  height: 28px;
  margin: 0.2rem auto 0.4rem;
  background: none;
}
body.mode-map .algo-map .algo-css-stack .algo-spine::after,
body.mode-map .algo-map .algo-spine::after {
  bottom: 0;
}
body.mode-map .algo-map .algo-level-join {
  margin: 0 0 6px;
  padding: 0;
  min-height: 0;
}
body.mode-map .algo-map .algo-col-link {
  height: 2.35rem;
}
body.mode-map .algo-map .algo-three-row--links {
  min-height: 2.35rem;
}
body.mode-map .algo-map .algo-col-foot {
  min-height: 2.35rem;
}
body.mode-map .algo-map .algo-char-band {
  margin: 0.85rem 0 0.65rem;
}
body.mode-map .algo-map .algo-lane.path-research > .algo-char-band,
body.mode-map .algo-map .algo-lane.path-not_hsr > .algo-char-band {
  margin: 1.25rem calc(-0.5rem - 6px) 0.85rem;
  width: calc(100% + 1rem + 12px);
}
body.mode-map .algo-map .algo-stack-node {
  padding: 0.7rem 0.8rem;
}
body.mode-map .algo-map .algo-stack-node .algo-node-title,
body.mode-map .algo-map .algo-node-title {
  font-size: 1.05rem;
  line-height: 1.45;
  font-weight: 600;
}
body.mode-map .algo-map .algo-outcome-title {
  font-size: 1.3rem;
}
body.mode-map .algo-map .algo-outcome-lede {
  font-size: 1.02rem;
}
body.mode-map .algo-map .algo-ep-grid .algo-ep {
  font-size: 1rem;
  line-height: 1.4;
  padding: 0.8rem 0.85rem;
  min-height: 3.5rem;
}
body.mode-map .algo-map .algo-ep-grid .algo-ep-title {
  font-size: 1rem;
  line-height: 1.4;
}
/* Legacy / unused compact map chrome still present in stylesheet */
body.mode-map .algo-map .algo-lane-title.path-merge,
body.mode-map .algo-map .algo-sublane-label,
body.mode-map .algo-map .algo-then-chip,
body.mode-map .algo-map .algo-then-note,
body.mode-map .algo-map .algo-col-note,
body.mode-map .algo-map .algo-bypass-note {
  font-size: 0.95rem;
}

body.mode-walk .box.decision.gate {
  border-color: #c23b2a;
  border-width: 2px;
}


/* =========================================================
   Walk choice tiles: uniform collapse + parting-water expand/select
   ========================================================= */

/* Base lists: allow reflow via order / grid-column: same language for Level 1 + later */
body.mode-walk [data-node].is-current .opts,
body.mode-walk [data-node].is-current .person-grid {
  transition: gap 0.28s cubic-bezier(0.25, 0.8, 0.3, 1);
}

/* --- Uniform collapsed tiles --- */
body.mode-walk [data-node].is-current .person-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  align-items: stretch;
  grid-auto-rows: 1fr;
}
body.mode-walk [data-node].is-current .opts:not(.person-grid) {
  /* Multi-option steps that aren't person-grid: equal tiles when 3+ */
  align-items: stretch;
}
body.mode-walk [data-node].is-current .opts:not(.person-grid):not(.has-expanded-choice):not(.has-selected-focus) {
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

body.mode-walk [data-node].is-current .teach-choice {
  transition:
    border-color 0.22s cubic-bezier(0.25, 0.8, 0.3, 1),
    box-shadow 0.28s cubic-bezier(0.25, 0.8, 0.3, 1),
    opacity 0.28s cubic-bezier(0.25, 0.8, 0.3, 1);
  /* transform reserved for FLIP only: avoids fighting expand/confirm motion */
}
body.mode-walk [data-node].is-current .teach-choice:not(.is-expanded):not(.is-selecting) .opt {
  padding: 0.7rem 0.85rem;
  min-height: 4.35rem;
  /* Fill the whole card surface (equal-height grid cells) for click/tap */
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
/* Confirm / choose-another stay outside the fill button when expanded */
body.mode-walk [data-node].is-current .teach-choice .choice-confirm-bar {
  flex: 0 0 auto;
  pointer-events: auto;
}
body.mode-walk [data-node].is-current .teach-choice:not(.is-expanded):not(.is-selecting) .choice-title {
  /* Shared title block height so tiles match */
  min-height: 2.6em;
  margin-bottom: 0;
  align-items: flex-start;
}

/* Interest panel stacks: full-width cards; height follows title text */
body.mode-walk [data-node].is-current .interest-panel .opts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
}
body.mode-walk [data-node].is-current .interest-panel .teach-choice:not(.is-expanded):not(.is-selecting) .opt {
  min-height: 0;
  height: auto;
  padding: 0.75rem 0.85rem;
}
body.mode-walk [data-node].is-current .interest-panel .teach-choice:not(.is-expanded):not(.is-selecting) .choice-title {
  min-height: 0;
}

/*
 * Hide teaching bullets until the card is expanded / selecting.
 * !important: earlier .as-facts { display:flex } rules must not leak open panels.
 */
body.mode-walk [data-node].is-current .teach-choice:not(.is-expanded):not(.is-selecting) .teach-points,
body.mode-walk [data-node].is-current .teach-choice:not(.is-expanded):not(.is-selecting) .teach-points.as-facts,
.gp-root.mode-walk-host [data-node].is-current .teach-choice:not(.is-expanded):not(.is-selecting) .teach-points,
.gp-root.mode-walk-host [data-node].is-current .teach-choice:not(.is-expanded):not(.is-selecting) .teach-points.as-facts {
  display: none !important;
  margin: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}
body.mode-walk [data-node].is-current .teach-choice.is-expanded .teach-points,
body.mode-walk [data-node].is-current .teach-choice.is-expanded .teach-points.as-facts,
body.mode-walk [data-node].is-current .teach-choice.is-selecting .teach-points,
body.mode-walk [data-node].is-current .teach-choice.is-selecting .teach-points.as-facts,
.gp-root.mode-walk-host [data-node].is-current .teach-choice.is-expanded .teach-points,
.gp-root.mode-walk-host [data-node].is-current .teach-choice.is-expanded .teach-points.as-facts,
.gp-root.mode-walk-host [data-node].is-current .teach-choice.is-selecting .teach-points,
.gp-root.mode-walk-host [data-node].is-current .teach-choice.is-selecting .teach-points.as-facts {
  display: flex !important;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.15rem !important;
  height: auto !important;
  overflow: visible !important;
  visibility: visible !important;
}
body.mode-walk [data-node].is-current .teach-choice.is-expanded .teach-points li,
body.mode-walk [data-node].is-current .teach-choice.is-selecting .teach-points li {
  display: block !important;
}
body.mode-walk [data-node].is-current .teach-choice.is-expanded .teach-points.as-facts li p,
body.mode-walk [data-node].is-current .teach-choice.is-selecting .teach-points.as-facts li p {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.55;
  color: #1f2933;
  font-weight: 400;
}

/* Interest lane panels: each starts collapsed; click its header to expand only that panel */
body.mode-walk [data-node].is-current .interest-panel:not(.is-panel-open) .opts {
  display: none !important;
}
body.mode-walk [data-node].is-current .interest-panel:not(.is-panel-open) .interest-panel-lead {
  display: none !important;
}
body.mode-walk [data-node].is-current .interest-panel.is-panel-open .opts {
  display: flex !important;
  flex-direction: column;
  gap: 0.5rem;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
}
body.mode-walk [data-node].is-current .interest-panel.is-panel-open .interest-panel-lead {
  display: none !important; /* leads removed from product copy */
}
body.mode-walk [data-node].is-current .interest-panel-head {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  position: relative;
}
body.mode-walk [data-node].is-current .interest-panel-head::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid rgba(255, 255, 255, 0.9);
  border-bottom: 2px solid rgba(255, 255, 255, 0.9);
  transform: rotate(45deg);
  margin-top: -0.15rem;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
body.mode-walk [data-node].is-current .interest-panel.is-panel-open .interest-panel-head::after {
  transform: rotate(225deg);
  margin-top: 0.15rem;
}
body.mode-walk [data-node].is-current .interest-panel:not(.is-panel-open) {
  padding-bottom: 0.55rem;
  /* Closed lanes stay header-sized (no empty stretched column) */
  height: auto;
  min-height: 0;
  align-self: start;
}
/* Open panel: full choice titles and expanded teach text must not clip */
body.mode-walk [data-node].is-current .interest-panel.is-panel-open .teach-choice {
  overflow: visible;
}
body.mode-walk [data-node].is-current .interest-panel.is-panel-open .teach-choice .opt {
  overflow: visible;
  min-height: 0;
  height: auto;
}
body.mode-walk [data-node].is-current .interest-panel.is-panel-open .teach-choice .choice-title {
  min-height: 0 !important;
  height: auto;
  white-space: normal;
  overflow: visible;
}
body.mode-walk [data-node].is-current .interest-panel.is-panel-open .teach-choice.is-expanded .teach-points,
body.mode-walk [data-node].is-current .interest-panel.is-panel-open .teach-choice.is-expanded .teach-points.as-facts {
  display: flex !important;
  flex-direction: column;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  margin-top: 0.35rem !important;
}

/* --- Expand: parting water (full-width rise, siblings reflow below): Level 1 + all steps --- */
body.mode-walk [data-node].is-current .opts.has-expanded-choice,
body.mode-walk [data-node].is-current .person-grid.has-expanded-choice {
  align-items: start;
}
/* Same grid reflow for person-grid (Level 1) and multi-option opts */
body.mode-walk [data-node].is-current .person-grid.has-expanded-choice,
body.mode-walk [data-node].is-current .opts.has-expanded-choice:not(.person-grid) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
body.mode-walk [data-node].is-current .opts.has-expanded-choice > .teach-choice.is-expanded,
body.mode-walk [data-node].is-current .person-grid.has-expanded-choice > .teach-choice.is-expanded {
  grid-column: 1 / -1;
  order: -1;
  /* Content-sized: collapsed tiles use height:100% for full-card hit; that
     must NOT apply when expanded or Confirm paints over the sibling row
     (and steals their clicks). */
  height: auto;
  min-height: 0;
  align-self: start;
  z-index: 1;
  border-color: var(--cmd);
  box-shadow: 0 8px 22px var(--cmd-shadow);
  overflow: visible;
}
/* Expanded .opt: drop fill-cell flex so teach + confirm stay in-flow inside the card */
body.mode-walk [data-node].is-current .opts.has-expanded-choice > .teach-choice.is-expanded .opt,
body.mode-walk [data-node].is-current .person-grid.has-expanded-choice > .teach-choice.is-expanded .opt,
body.mode-walk [data-node].is-current .teach-choice.is-expanded .opt,
body.mode-walk [data-node].is-current .teach-choice.is-selecting .opt {
  height: auto;
  min-height: 0;
  flex: 0 0 auto;
}
body.mode-walk [data-node].is-current .opts.has-expanded-choice > .teach-choice:not(.is-expanded),
body.mode-walk [data-node].is-current .person-grid.has-expanded-choice > .teach-choice:not(.is-expanded) {
  position: relative;
  z-index: 0;
  height: auto;
  min-height: 0;
  opacity: 0.88;
}
body.mode-walk [data-node].is-current .opts.has-expanded-choice > .teach-choice:not(.is-expanded) .opt,
body.mode-walk [data-node].is-current .person-grid.has-expanded-choice > .teach-choice:not(.is-expanded) .opt {
  min-height: 3.5rem;
  height: auto;
  padding: 0.55rem 0.7rem;
}
body.mode-walk [data-node].is-current .opts.has-expanded-choice > .teach-choice:not(.is-expanded) .choice-title,
body.mode-walk [data-node].is-current .person-grid.has-expanded-choice > .teach-choice:not(.is-expanded) .choice-title {
  min-height: 0;
  font-size: 1.08rem;
}

/* Interest panels: flex column: expand pushes siblings down */
body.mode-walk [data-node].is-current .interest-panel .opts.has-expanded-choice > .teach-choice.is-expanded {
  order: -1;
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
}
body.mode-walk [data-node].is-current .interest-panel .opts.has-expanded-choice > .teach-choice:not(.is-expanded) {
  opacity: 0.9;
}

/* Select affordance under facts */
/* Legacy text hint (replaced by Confirm / Choose another buttons) */
body.mode-walk [data-node].is-current .teach-choice .choice-select-hint {
  display: none !important;
}

/* Confirm / Choose another: prominent actions on expanded cards (all steps) */
body.mode-walk [data-node].is-current .teach-choice .choice-confirm-bar {
  display: none;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  flex: 0 0 auto;
  position: relative;
  z-index: 0;
  margin: 0.65rem 0 0;
  padding: 0.65rem 0.85rem 0.85rem;
  border-top: 1px solid var(--cmd-ring);
}
body.mode-walk [data-node].is-current .teach-choice.is-expanded .choice-confirm-bar {
  display: flex;
}
body.mode-walk [data-node].is-current .choice-confirm-btn,
body.mode-walk [data-node].is-current .choice-another-btn {
  font-family: var(--font-heading, "Oswald", system-ui, sans-serif);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  border-radius: 8px;
  padding: 0.6rem 1.25rem;
  min-height: 2.9rem;
  cursor: pointer;
  touch-action: manipulation;
  border: 1.5px solid transparent;
  line-height: 1.2;
}
body.mode-walk [data-node].is-current .choice-confirm-btn {
  background: var(--cmd);
  color: #fff;
  border-color: var(--cmd);
  box-shadow: 0 2px 8px var(--cmd-shadow);
}
body.mode-walk [data-node].is-current .choice-confirm-btn:hover {
  background: var(--cmd-hover);
  border-color: var(--cmd-hover);
}
/* Path-switch Confirm: mark sits in existing padding. Do not grow the button. */
body.mode-walk [data-node].is-current .choice-confirm-btn.is-path-switch {
  position: relative;
}
body.mode-walk [data-node].is-current .choice-confirm-btn.is-path-switch::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.48rem;
  width: 0.72rem;
  height: 0.72rem;
  margin-top: -0.36rem;
  pointer-events: none;
  opacity: 0.72;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 10.4V4.15A1.15 1.15 0 0 1 4.15 3h5.25' stroke='%23fff' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.55 1.2 10.4 3 7.55 4.8' stroke='%23fff' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.walk-switch-dialog {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.walk-switch-dialog-back {
  position: absolute;
  inset: 0;
  background: rgba(24, 50, 98, 0.4);
}
.walk-switch-dialog-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 26rem;
  padding: 1.25rem 1.35rem 1.2rem;
  background: #fff;
  border: 1px solid #c5d0dc;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(24, 50, 98, 0.22);
  font-family: var(--font);
}
.walk-switch-dialog-panel h2 {
  margin: 0 0 1rem;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--navy-deep, #183262);
}
.walk-switch-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.walk-switch-dialog-yes,
.walk-switch-dialog-no {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.2;
  padding: 0.55rem 0.85rem;
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
  border: 1.5px solid transparent;
}
.walk-switch-dialog-yes {
  background: var(--cmd, #0174bb);
  color: #fff;
  border-color: var(--cmd, #0174bb);
  box-shadow: 0 2px 8px var(--cmd-shadow, rgba(1, 116, 187, 0.28));
}
.walk-switch-dialog-yes:hover,
.walk-switch-dialog-yes:focus-visible {
  background: var(--cmd-hover, #015f99);
  border-color: var(--cmd-hover, #015f99);
  outline: none;
}
.walk-switch-dialog-no {
  background: #fff;
  color: var(--cmd, #0174bb);
  border-color: var(--cmd, #0174bb);
}
.walk-switch-dialog-no:hover,
.walk-switch-dialog-no:focus-visible {
  border-color: var(--cmd-hover, #015f99);
  color: var(--cmd-hover, #015f99);
  outline: none;
}
body.mode-walk [data-node].is-current .choice-another-btn {
  background: #fff;
  color: var(--cmd);
  border-color: var(--cmd);
}
body.mode-walk [data-node].is-current .choice-another-btn:hover {
  border-color: var(--cmd-hover);
  color: var(--cmd-hover);
  background: var(--cmd-soft);
}
body.mode-walk [data-node].is-done .choice-confirm-bar,
body.mode-walk [data-node].is-current .teach-choice.is-selecting .choice-confirm-bar {
  display: none !important;
}

/* --- Select: center chosen, others still visible below (no scale: FLIP owns motion) --- */
body.mode-walk [data-node].is-current .opts.has-selected-focus,
body.mode-walk [data-node].is-current .person-grid.has-selected-focus {
  align-items: start;
}
body.mode-walk [data-node].is-current .opts.has-selected-focus > .teach-choice.is-selecting,
body.mode-walk [data-node].is-current .person-grid.has-selected-focus > .teach-choice.is-selecting {
  grid-column: 1 / -1;
  order: -1;
  max-width: 32rem;
  width: 100%;
  margin-inline: auto;
  border-color: var(--cmd);
  border-width: 2px;
  box-shadow: 0 10px 28px var(--cmd-shadow);
  z-index: 3;
}
body.mode-walk [data-node].is-current .opts.has-selected-focus > .teach-choice:not(.is-selecting),
body.mode-walk [data-node].is-current .person-grid.has-selected-focus > .teach-choice:not(.is-selecting) {
  opacity: 0.78;
  /* no transform:scale: was fighting FLIP / felt like Level-1-only pop */
}
body.mode-walk [data-node].is-current .opts.has-selected-focus > .teach-choice:not(.is-selecting) .opt,
body.mode-walk [data-node].is-current .person-grid.has-selected-focus > .teach-choice:not(.is-selecting) .opt {
  min-height: 3.1rem;
  padding: 0.45rem 0.65rem;
}


/* Chosen (done) cards keep facts visible */
body.mode-walk [data-node].is-done .teach-choice.is-chosen .teach-points,
body.mode-walk [data-node].is-done .teach-choice.is-chosen .teach-points.as-facts {
  display: flex !important;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.45rem;
}
body.mode-walk [data-node].is-done .teach-choice.is-chosen .choice-title::after {
  display: none;
}
body.mode-walk [data-node].is-done .teach-choice.is-chosen .choice-select-hint {
  display: none;
}

/* Done step layout also covered above in “Done steps: selected card centered…” */

@media (max-width: 900px) {
  body.mode-walk [data-node].is-current .person-grid,
  body.mode-walk [data-node].is-current .person-grid.has-expanded-choice,
  body.mode-walk [data-node].is-current .opts.has-expanded-choice:not(.person-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  body.mode-walk [data-node].is-current .person-grid,
  body.mode-walk [data-node].is-current .person-grid.has-expanded-choice,
  body.mode-walk [data-node].is-current .opts.has-expanded-choice:not(.person-grid) {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mode-walk [data-node].is-current .teach-choice,
  body.mode-walk [data-node].is-current .opts,
  body.mode-walk [data-node].is-current .person-grid {
    transition: none;
  }
}

/* =========================================================
   End-of-path survey terminal + PDF preview
   ========================================================= */
.survey-terminal {
  width: 100%;
  max-width: var(--max, 52rem);
  margin: 1.75rem auto 2rem;
  padding: 1.5rem 1.35rem 1.75rem;
  background: #fff;
  border: 1px solid var(--border, #c5d0dc);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(24, 50, 98, 0.08);
}
.survey-terminal[hidden] {
  display: none !important;
}
.survey-eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary, #0174bb);
}
.survey-terminal-head h2 {
  margin: 0 0 0.5rem;
  font-size: 1.45rem;
  color: var(--navy-deep, #183262);
}
.survey-lede {
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #3a4550;
}
.survey-contact-form {
  margin-bottom: 1.25rem;
}
.survey-answer-log {
  margin: 0 0 1.25rem;
  padding: 1rem 1.05rem 1.1rem;
  border: 1px solid #d5dee8;
  border-radius: 12px;
  background: #fff;
}
.survey-answer-log-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--navy-deep, #183262);
}
.survey-answer-log-lede {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  line-height: 1.45;
  font-weight: 400;
  color: #3a4550;
}
.survey-answer-table-wrap {
  overflow-x: auto;
}
.survey-answer-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.survey-answer-table th,
.survey-answer-table td {
  padding: 0.55rem 0.65rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #e6ebf1;
}
.survey-answer-table thead th {
  background: #f4f7fb;
  color: #5c6670;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.survey-answer-table tbody th {
  font-weight: 600;
  color: #183262;
  width: 28%;
}
.survey-answer-table tbody td {
  width: 36%;
}
.survey-answer-note {
  width: 36%;
}
.survey-answer-note-lab {
  display: block;
  margin: 0 0 0.28rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #183262;
}
.survey-answer-note-lab abbr {
  text-decoration: none;
  border: none;
}
.survey-answer-note textarea {
  display: block;
  width: 100%;
  min-height: 4.2rem;
  resize: vertical;
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.4;
  padding: 0.45rem 0.55rem;
  border: 1.5px solid #c5d0dc;
  border-radius: 8px;
  color: #1a2028;
  background: #fafcfe;
  box-sizing: border-box;
}
.survey-answer-note textarea:focus {
  outline: none;
  border-color: var(--charcoal);
  box-shadow: 0 0 0 3px rgba(54, 69, 79, 0.16);
  background: #fff;
}
.survey-answer-note textarea.is-invalid {
  border-color: #dc2626;
  background: #fff8f8;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
@media (max-width: 720px) {
  .survey-answer-table,
  .survey-answer-table thead,
  .survey-answer-table tbody,
  .survey-answer-table tr,
  .survey-answer-table th,
  .survey-answer-table td {
    display: block;
    width: 100%;
  }
  .survey-answer-table thead {
    display: none;
  }
  .survey-answer-table tbody tr {
    margin: 0 0 0.85rem;
    padding: 0 0 0.75rem;
    border-bottom: 1px solid #d8dee6;
  }
  .survey-answer-table tbody tr:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .survey-answer-table tbody th,
  .survey-answer-table tbody td {
    padding: 0.2rem 0;
    border: 0;
  }
}
.survey-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
}
.survey-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy-deep, #183262);
}
.survey-field-full {
  grid-column: 1 / -1;
}
.survey-field .hint {
  font-weight: 500;
  color: #6b7c8a;
  font-size: 0.78rem;
}
/* Kill browser dotted underline under required * (abbr[title]) */
.survey-field abbr {
  text-decoration: none;
  border-bottom: none;
  cursor: inherit;
}
.survey-field input,
.survey-field textarea {
  font: inherit;
  font-weight: 500;
  font-size: 0.92rem;
  padding: 0.55rem 0.65rem;
  border: 1.5px solid #c5d0dc;
  border-radius: 8px;
  color: #1a2028;
  background: #fafcfe;
}
.survey-field input:focus,
.survey-field textarea:focus {
  outline: none;
  border-color: var(--charcoal);
  box-shadow: 0 0 0 3px rgba(54, 69, 79, 0.16);
  background: #fff;
}
.survey-field input.is-invalid {
  border-color: #dc2626;
  background: #fff8f8;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.survey-field input.is-invalid:focus {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}
/* Format alert under email/phone on blur */
.survey-field-error {
  margin: 0;
  padding: 0.4rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  color: #9b1c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 7px;
}
.survey-field-error[hidden] {
  display: none !important;
}
.survey-error {
  margin: 0.65rem 0 0;
  padding: 0.55rem 0.75rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #9b1c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
}
/* Second format/validation bubble under Submit / Download PDF (only after those clicks) */
.survey-action-error {
  margin-top: 0.75rem;
  white-space: pre-line;
}
.survey-action-error[hidden] {
  display: none !important;
}
.survey-docs {
  margin: 0 0 1.25rem;
  padding: 1rem 1.05rem 1.1rem;
  border: 1px solid #d5dee8;
  border-radius: 12px;
  background: #f8fafc;
}
.survey-docs-title {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  color: var(--navy-deep, #183262);
}
.survey-docs-lede {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #3a4550;
}
.survey-docs-pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.survey-docs-pick-label {
  display: inline-block;
  padding: 0.5rem 0.85rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy-deep, #183262);
  background: #fff;
  border: 1.5px solid #c5d0dc;
  border-radius: 8px;
}
.survey-docs-pick:hover .survey-docs-pick-label {
  border-color: var(--charcoal);
  color: var(--charcoal);
}
.survey-docs-pick input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.survey-docs-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.survey-docs-list[hidden] {
  display: none !important;
}
.survey-docs-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  padding: 0.45rem 0.65rem;
  background: #fff;
  border: 1px solid #d5dee8;
  border-radius: 8px;
  font-size: 0.88rem;
}
.survey-docs-name {
  font-weight: 600;
  color: #1a2028;
  word-break: break-word;
}
.survey-docs-size {
  color: #6b7c8a;
  font-size: 0.82rem;
}
.survey-docs-remove {
  margin-left: auto;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: #9b1c1c;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0.15rem 0.25rem;
}
.survey-docs-remove:hover {
  color: #7f1d1d;
}
.survey-docs-hint {
  margin: 0.65rem 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #5c6670;
}
.survey-docs-error {
  margin-top: 0.55rem;
}
.survey-packet {
  margin: 1rem 0 0.5rem;
}
.survey-packet-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.85rem;
  margin: 0 0 0.75rem;
  background: #f4f8fb;
  border: 1px solid #c5d8ea;
  border-radius: 12px;
}
.survey-packet-bar[hidden] {
  display: none !important;
}
.survey-packet-chip {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #0d5c3d;
  background: #e8f5ef;
  border: 1px solid #7bc4a0;
  border-radius: 10px;
  padding: 0.35rem 0.75rem;
  max-width: min(100%, 42rem);
  white-space: normal;
  line-height: 1.4;
}
.survey-packet-chip::before {
  content: "✓";
  font-weight: 800;
}
.survey-packet-expand {
  margin-left: auto;
  min-height: 36px;
  padding: 0.4rem 0.85rem;
  font-size: 0.82rem;
}
.survey-packet[data-collapsed="true"] .survey-packet-body {
  display: none;
}
.survey-preview-wrap {
  margin: 0 0 1.25rem;
}
.survey-preview-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #546e7a;
  margin-bottom: 0.45rem;
}
.survey-pdf-preview {
  /* Grow with content: page scrolls; no nested overflow trap */
  max-height: none;
  overflow: visible;
  border: 1px solid #c5d0dc;
  border-radius: 10px;
  background: #e8edf2;
  padding: 1rem;
}
.survey-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}
.survey-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, var(--font, inherit));
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.2;
  border-radius: 8px;
  padding: 0.6rem 1.25rem;
  cursor: pointer;
  border: 1.5px solid transparent;
  min-height: 2.9rem;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
}
.survey-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.survey-btn.is-busy,
.survey-btn.is-busy:disabled {
  opacity: 1;
  cursor: wait;
  gap: 0.5rem;
}
.survey-btn-spinner {
  display: inline-block;
  width: 0.95rem;
  height: 0.95rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: survey-btn-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes survey-btn-spin {
  to {
    transform: rotate(360deg);
  }
}
.survey-btn-primary {
  background: var(--charcoal);
  color: #fff;
  border-color: var(--charcoal);
  box-shadow: 0 2px 8px rgba(54, 69, 79, 0.26);
}
.survey-btn-primary:hover:not(:disabled) {
  background: #2a333a;
  border-color: #2a333a;
  outline: 2px solid var(--charcoal);
  outline-offset: 2px;
  box-shadow: 0 3px 12px rgba(24, 50, 98, 0.28);
}
.survey-btn-primary.is-submitted,
.survey-btn-primary.is-submitted:disabled {
  opacity: 1;
  cursor: default;
  background: #0d7a4f;
  border-color: #0d7a4f;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.survey-submit-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  font-weight: 800;
  font-size: 0.85rem;
  line-height: 1;
}
.survey-btn-outline {
  background: #fff;
  color: #12264a;
  border-color: #5a7390;
  box-shadow: 0 2px 8px rgba(30, 67, 132, 0.1);
}
.survey-btn-outline:hover:not(:disabled) {
  border-color: var(--charcoal);
  color: var(--charcoal);
  outline: 2px solid #5a7390;
  outline-offset: 2px;
  box-shadow: 0 3px 12px rgba(24, 50, 98, 0.16);
}
.survey-btn-danger {
  background: #fff;
  color: #8a1212;
  border-color: #d07070;
  margin-left: auto;
  box-shadow: 0 2px 8px rgba(138, 18, 18, 0.12);
}
.survey-btn-danger:hover:not(:disabled) {
  background: #fef2f2;
  border-color: #b91c1c;
  color: #7f1d1d;
  outline: 2px solid #d07070;
  outline-offset: 2px;
  box-shadow: 0 3px 12px rgba(138, 18, 18, 0.18);
}
.survey-status {
  margin: 0.85rem 0 0;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
}
.survey-status.is-ok {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.survey-status.is-err {
  background: #fef2f2;
  color: #9b1c1c;
  border: 1px solid #fecaca;
}
/* Off-screen but fully painted: required for non-blank html2canvas capture */
.survey-print-root {
  position: fixed;
  left: 0;
  top: 0;
  width: 794px;
  max-width: 100vw;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  overflow: visible;
}
.survey-print-root.is-exporting {
  /* Fully painted in viewport so html2canvas does not capture blank */
  opacity: 1;
  z-index: 2147483000;
  left: 0;
  top: 0;
  background: #fff;
}

/* ---- PDF document look ---- */
.survey-pdf-doc {
  position: relative;
  background: #fff;
  color: #1a2028;
  font-family: "Quattrocento", Georgia, "Times New Roman", serif;
  font-size: 11pt;
  line-height: 1.5;
  padding: 1.35rem 1.5rem 1.75rem;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(24, 30, 40, 0.08);
  overflow: hidden;
  isolation: isolate;
}
.survey-pdf-doc .pdf-logo-wrap {
  margin: 0 0 0.75rem;
}
.survey-pdf-doc .pdf-logo {
  display: block;
  height: 42px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
}
.survey-pdf-doc h1,
.survey-pdf-doc h2,
.survey-pdf-doc .pdf-org,
.survey-pdf-doc .pdf-ep,
.survey-pdf-doc .pdf-status,
.survey-pdf-doc .pdf-step-title,
.survey-pdf-doc .pdf-step-n {
  font-family: "Oswald", system-ui, sans-serif;
}
.survey-pdf-doc .pdf-contact-list {
  margin: 0.25rem 0 0.85rem;
}
.survey-pdf-doc .pdf-body {
  position: relative;
  z-index: 1;
}
/* Watermark ON TOP of all content */
.survey-pdf-doc .pdf-watermark {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  overflow: hidden;
}
.survey-pdf-doc .pdf-watermark-stamp {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-32deg);
  font-size: clamp(1.5rem, 5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(185, 28, 28, 0.22);
  white-space: nowrap;
  text-align: center;
  user-select: none;
  border: 3px solid rgba(185, 28, 28, 0.2);
  padding: 0.35rem 1rem;
  border-radius: 4px;
}
.survey-pdf-doc .pdf-watermark-stamp--2 {
  top: 22%;
  transform: translate(-50%, -50%) rotate(-32deg);
  opacity: 0.85;
}
.survey-pdf-doc .pdf-watermark-stamp--3 {
  top: 78%;
  transform: translate(-50%, -50%) rotate(-32deg);
  opacity: 0.85;
}
.survey-pdf-doc:not(.is-draft) .pdf-watermark {
  display: none;
}
.survey-pdf-doc .pdf-org {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0174bb;
  margin: 0 0 0.25rem;
}
/* Brand treatment: + sits top-aligned with caps (not baseline-centered) */
.survey-pdf-doc .pdf-org-plus {
  display: inline-block;
  vertical-align: top;
  position: relative;
  top: 0.05em;
  font-size: 0.92em;
  line-height: 1;
  font-weight: 800;
}
.survey-pdf-doc h1 {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
  color: #183262;
  line-height: 1.25;
}
.survey-pdf-doc .pdf-meta {
  font-size: 0.8rem;
  color: #5c6670;
  margin: 0 0 0.85rem;
}
.survey-pdf-doc .pdf-status {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.survey-pdf-doc .pdf-status.is-draft-banner {
  background: #fef2f2;
  color: #9b1c1c;
  border: 1px solid #fecaca;
}
.survey-pdf-doc .pdf-status.is-submitted-banner {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.survey-pdf-doc h2 {
  margin: 1.1rem 0 0.4rem;
  font-size: 0.95rem;
  color: #183262;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 0.25rem;
  page-break-after: avoid;
  break-after: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
.survey-pdf-doc .pdf-section {
  clear: both;
}
.survey-pdf-doc .pdf-section--tight {
  page-break-inside: avoid;
  break-inside: avoid;
}
.survey-pdf-doc .pdf-section--break-before {
  page-break-before: always;
  break-before: page;
}
.survey-pdf-doc .pdf-section > h2 + table,
.survey-pdf-doc .pdf-section > h2 + ul,
.survey-pdf-doc .pdf-section > h2 + ol,
.survey-pdf-doc .pdf-section > h2 + p {
  page-break-before: avoid;
  break-before: avoid;
}
.survey-pdf-doc .pdf-after-log {
  page-break-inside: auto;
}
.survey-pdf-doc p,
.survey-pdf-doc li {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
}
.survey-pdf-doc ul,
.survey-pdf-doc ol {
  margin: 0.25rem 0 0.5rem;
  padding-left: 1.2rem;
}
.survey-pdf-doc table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.82rem;
  margin: 0.35rem 0 0.65rem;
  table-layout: fixed;
  border: 1px solid #c5d0dc;
}
.survey-pdf-doc th,
.survey-pdf-doc td {
  border: 1px solid #c5d0dc;
  padding: 0.4rem 0.5rem;
  text-align: left;
  vertical-align: top;
}
.survey-pdf-doc th {
  background: #e8eef5;
  font-weight: 700;
  color: #183262;
}
.survey-pdf-doc .pdf-footer {
  margin-top: 1.25rem;
  padding-top: 0.65rem;
  border-top: 1px solid #e2e8f0;
  font-size: 0.72rem;
  color: #6b7c8a;
  line-height: 1.4;
}
.survey-pdf-doc .pdf-footer .pdf-org-plus {
  display: inline-block;
  vertical-align: text-top;
  position: relative;
  top: 0;
  font-size: 0.85em;
  line-height: 1;
  font-weight: 400;
  margin: 0 0.04em;
}
/* Callouts after answer log (dual-gate reinforce and/or site-compliance guidance) */
.survey-pdf-doc .pdf-reinforce {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 1rem 0 0.85rem;
  padding: 0.85rem 1rem;
  border: 1px solid #c5d0dc;
  border-left: 4px solid #0174bb;
  border-radius: 0 8px 8px 0;
  background: #f3f9fd;
  page-break-inside: avoid;
  break-inside: avoid;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.survey-pdf-doc .pdf-reinforce + .pdf-reinforce {
  margin-top: 0.75rem;
}
.survey-pdf-doc .pdf-reinforce--training {
  border-left-color: #c27803;
  background: #fffbeb;
}
.survey-pdf-doc .pdf-reinforce--compliance {
  border-left-color: #0d7a4f;
  background: #f0fdf6;
}
.survey-pdf-doc .pdf-reinforce h2 {
  margin: 0 0 0.45rem;
  font-size: 0.95rem;
  border-bottom: none;
  padding: 0;
}
.survey-pdf-doc .pdf-reinforce p {
  margin: 0 0 0.45rem;
  font-size: 0.86rem;
  line-height: 1.45;
}
.survey-pdf-doc .pdf-reinforce ul {
  margin: 0.35rem 0 0.45rem;
  padding-left: 1.15rem;
}
.survey-pdf-doc .pdf-reinforce li {
  margin: 0 0 0.4rem;
  font-size: 0.84rem;
  line-height: 1.45;
}
.survey-pdf-doc .pdf-reinforce-foot {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: #5c6670;
  line-height: 1.45;
}
.survey-pdf-doc .pdf-ep {
  font-size: 1.05rem;
  font-weight: 700;
  color: #183262;
  margin: 0 0 0.25rem;
}

@media (max-width: 640px) {
  .survey-fields {
    grid-template-columns: 1fr;
  }
  .survey-btn-danger {
    margin-left: 0;
  }
}

@media print {
  body * {
    visibility: hidden !important;
  }
  body.printing-survey .survey-print-root,
  body.printing-survey .survey-print-root * {
    visibility: visible !important;
  }
  body.printing-survey .survey-print-root {
    position: static !important;
    left: auto !important;
    width: 100% !important;
    display: block !important;
  }
  body.printing-survey .survey-print-root[hidden] {
    display: block !important;
  }
  .survey-pdf-doc {
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }
}

/* PDF / preview next-steps (numbered list only: no flowchart boxes) */
.survey-pdf-doc .pdf-next-chart {
  margin: 0 0 0.4rem;
  font-size: 0.88rem;
  line-height: 1.4;
  color: #36454f;
}
.survey-pdf-doc .pdf-next-intro {
  margin: 0.35rem 0 0.75rem;
  font-size: 0.9rem;
  line-height: 1.45;
}
.survey-pdf-doc .pdf-next-list {
  margin: 0.25rem 0 0.65rem;
  padding: 0;
  list-style: none;
}
.survey-pdf-doc .pdf-step-item {
  margin: 0 0 0.7rem;
  padding: 0.65rem 0.75rem 0.7rem 0.8rem;
  border-left: 4px solid #0174bb;
  background: #f8fafc;
  border-radius: 0 8px 8px 0;
  page-break-inside: avoid;
  break-inside: avoid;
}
.survey-pdf-doc .pdf-step-head {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0 0 0.35rem;
}
.survey-pdf-doc .pdf-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #0174bb;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
}
.survey-pdf-doc .pdf-step-title {
  font-size: 0.95rem;
  color: #183262;
  line-height: 1.3;
}
.survey-pdf-doc .pdf-step-detail {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #1a2028;
}
.survey-pdf-doc .pdf-step-action {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.4;
  color: #183262;
}
.survey-pdf-doc .pdf-next-foot {
  margin: 0.55rem 0 0.25rem;
  font-size: 0.78rem;
  color: #5c6670;
  line-height: 1.45;
}
.survey-pdf-doc .pdf-status {
  max-width: 100%;
  word-break: break-word;
  white-space: normal;
  line-height: 1.35;
}
.survey-pdf-doc table {
  table-layout: fixed;
}
.survey-pdf-doc tr {
  page-break-inside: avoid;
  break-inside: avoid;
}
.survey-pdf-doc th,
.survey-pdf-doc td {
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.survey-pdf-doc .pdf-answer-table .pdf-col-step,
.survey-pdf-doc .pdf-answer-table .pdf-cell-step {
  width: 30%;
}
.survey-pdf-doc .pdf-answer-table .pdf-col-resp,
.survey-pdf-doc .pdf-answer-table .pdf-cell-resp {
  width: 34%;
}
.survey-pdf-doc .pdf-answer-table .pdf-col-note,
.survey-pdf-doc .pdf-answer-table .pdf-cell-note {
  width: 36%;
}