:root {
  --color-sorption: #00649e;
  --color-separation: #2a9187;
  --color-destruction: #eb7c32;
}

.navbar-nav .nav-link,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: white !important;
}

.navbar-nav .nav-link.active {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 0.375rem;
}

.accordion-title {
  font-weight: bold;
}

/* Accordion panel shading */
.accordion-button {
  background-color: #f2f4f6;
}

.accordion-button:not(.collapsed) {
  background-color: #edf1f5;
}

/* Virtual select z-index */
.vscomp-dropbox-container {
  z-index: 99999 !important;
}

/* Pad accordion bottom so dropdowns aren't clipped */
.sidebar-content .accordion {
  padding-bottom: 300px;
}

/* Force Virtual Select to open downward */
.position-top {
  transform: translate3d(0px, 39.6px, 0px) !important;
}

/* Reactable expanded row style */
.rt-tr-details {
  background-color: #eee;
  box-shadow: inset 2px 0 0 0 #ffa62d;
}

/* Wrap cell text only in the selected row, so long values are fully
   visible without affecting the row height of the rest of the table.
   !important is needed to beat reactable's own .rt-nowrap rule, which
   has equal selector specificity. */
.rt-tr-selected .rt-td-inner {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;
}

/* Performance Evaluation scroll panes (Triangle Chart card, Technology
   Summary, Individual Study table).

   Each of these has its own scroll area nested inside the scrolling page,
   and with default browser styling the inner and outer scrollbars are
   indistinguishable. Give the inner ones a blue thumb so it's clear which
   scrollbar belongs to the panel. The track is left transparent on
   purpose - a filled track draws a hard line the full height/width of the
   panel, which reads as a border and pulls more attention than the
   scrollbar deserves. The page scrollbar keeps the browser default.

   .pe-scroll-pane is set on the panel wrapper; the element that actually
   scrolls is the wrapper itself (Technology Summary), the reactable's
   .rt-table (Individual Study), or the card body (Triangle Chart). */
.pe-scroll-pane,
.pe-scroll-pane .rt-table,
.pe-scroll-pane .card-body {
  /* Firefox */
  scrollbar-width: auto;
  scrollbar-color: rgba(0, 100, 158, 0.6) transparent;
}

/* WebKit/Blink (Chrome, Edge, Safari) */
.pe-scroll-pane::-webkit-scrollbar,
.pe-scroll-pane .rt-table::-webkit-scrollbar,
.pe-scroll-pane .card-body::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.pe-scroll-pane::-webkit-scrollbar-track,
.pe-scroll-pane .rt-table::-webkit-scrollbar-track,
.pe-scroll-pane .card-body::-webkit-scrollbar-track {
  background: transparent;
}

.pe-scroll-pane::-webkit-scrollbar-thumb,
.pe-scroll-pane .rt-table::-webkit-scrollbar-thumb,
.pe-scroll-pane .card-body::-webkit-scrollbar-thumb {
  background: rgba(0, 100, 158, 0.6);
  border-radius: 6px;
  /* Transparent border + background-clip insets the thumb inside the
     track, so the track stays visible on both sides of the thumb. */
  border: 3px solid transparent;
  background-clip: content-box;
}

.pe-scroll-pane::-webkit-scrollbar-thumb:hover,
.pe-scroll-pane .rt-table::-webkit-scrollbar-thumb:hover,
.pe-scroll-pane .card-body::-webkit-scrollbar-thumb:hover {
  background: var(--bs-primary, #00649e);
  background-clip: content-box;
}

.pe-scroll-pane::-webkit-scrollbar-corner,
.pe-scroll-pane .rt-table::-webkit-scrollbar-corner,
.pe-scroll-pane .card-body::-webkit-scrollbar-corner {
  background: transparent;
}

/* Popovers */
.popover {
  --bs-popover-max-width: 450px;
}

/* Tooltips */
.tooltip .tooltip-inner {
  text-align: left;
  max-width: 350px; /* adjust as needed */
}

/* Home Page - scroll within viewport, stopping at navbar */
/* Quick Start Guide is also a long static page and needs the same override */
.tab-pane[data-value="Home"],
.tab-pane[data-value="Quick Start Guide"] {
  overflow-y: auto;
}

/* Home Page */
/* Add dividers between sections */
.content-section {
  padding: 1rem 0;
  border-bottom: 1px solid var(--bs-gray-200);
}

.content-section:last-child {
  border-bottom: none;
}

.hero-section {
  background-image: url("BannerImage.JPG");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-overlay {
  background-color: rgba(255, 255, 255, 0.85);
  padding: 3rem 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
  max-width: 900px;
  margin: 2rem;
  border: 2px solid rgba(0, 0, 0, 0.1);
}

.hero-overlay h1 {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
}
/* Make subtitle text easier to read with the image background */
.hero-overlay .lead {
  font-weight: 500;
}

.stat-card {
  background: white;
  color: #000000;
  padding: 2rem 1.5rem;
  border-radius: 0 0 1rem 1rem;
  text-align: center;
  height: 100%;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  border-top: 4px solid var(--bs-primary);
  border-left: none;
  border-right: none;
  border-bottom: none;
}

.stat-number {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 0.5rem;
  display: block;
}

.stat-number .fas {
  color: var(--bs-primary);
}

.stat-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bs-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Section heading left-border accent */
.section-heading {
  padding-left: 0.875rem;
  border-left: 4px solid var(--bs-primary);
  margin-bottom: 1rem;
}

.section-heading h4 {
  color: var(--bs-primary);
  font-weight: 700;
  margin-bottom: 0;
}

/* ─── Tech Showcase Block (carousel + lists) ───────────────────── */
.tech-showcase-block {
  background: var(--bs-gray-100);
  border-radius: 0.5rem;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.tech-media-panel {
  background: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* ─── Tech Showcase Carousel ───────────────────────────────────── */
.tc-carousel-wrapper {
  position: relative;
  padding: 0 3.5rem;
  margin-bottom: 1.75rem;
}

#tech-carousel .carousel-control-prev,
#tech-carousel .carousel-control-next {
  width: 2.25rem;
  height: 2.25rem;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  opacity: 1;
  transition: box-shadow 0.15s ease;
}

#tech-carousel .carousel-control-prev {
  left: -2.875rem;
}
#tech-carousel .carousel-control-next {
  right: -2.875rem;
}

#tech-carousel .carousel-control-prev:hover,
#tech-carousel .carousel-control-next:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

#tech-carousel .carousel-control-prev-icon,
#tech-carousel .carousel-control-next-icon {
  width: 1rem;
  height: 1rem;
  filter: invert(1);
}

#tech-carousel .carousel-indicators {
  bottom: -2rem;
}

#tech-carousel .carousel-indicators [data-bs-target] {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  background: var(--bs-secondary);
  opacity: 0.35;
}

#tech-carousel .carousel-indicators .active {
  opacity: 1;
  background: var(--bs-body-color);
}

/* ─── Cards ────────────────────────────────────────────────────── */
.tc-card {
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.tc-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.tc-img-link {
  display: block;
}

.tc-img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  display: block;
  padding: 0.5rem;
}

.tc-body {
  padding: 0.6rem 0.75rem 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.tc-title {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
}

.tc-title a {
  color: inherit;
  text-decoration: none;
}

.tc-title a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tc-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.tc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border-radius: 0.2rem;
  color: white;
  white-space: nowrap;
}

.tc-badge i {
  font-size: 0.65rem;
}

.tc-badge-situ {
  background: transparent;
  color: #6c757d;
  border: 1px solid #6c757d;
  opacity: 0.85;
  padding-top: 0.05rem;
}

.tc-badge-media {
  background: transparent;
  color: #6c757d;
  border: 1px solid #6c757d;
  opacity: 0.85;
  padding-top: 0.05rem;
  font-size: 0.65rem;
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 767px) {
  .tech-showcase-block {
    padding: 1rem;
  }
  .tc-carousel-wrapper {
    padding: 0 2rem;
  }
}

/* Ex-Situ / In-Situ section divider in tech panels */
.tech-situ-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6c757d;
  margin: 1rem 0 0.5rem;
}

.tech-situ-divider:first-child {
  margin-top: 0;
}

/* Media-level divider (higher hierarchy than Ex/In-Situ) */
.tech-media-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #343a40;
  margin-bottom: 1rem;
}

.tech-media-divider::after {
  content: "";
  flex: 1;
  height: 2px;
}

.tech-media-liquid::after,
.tech-media-solid::after {
  background: #6c757d;
  opacity: 0.35;
}

.tech-situ-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #dee2e6;
}

/* Flat technology list */
.tech-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.tech-list-item {
  font-size: 1rem;
  line-height: 1.4;
  padding: 0.1rem 0;
}

/* Propagate the category color down to links via a custom property */
.tech-type-group:has(.tech-type-header-sorption) {
  --tech-color: var(--color-sorption);
}
.tech-type-group:has(.tech-type-header-separation) {
  --tech-color: var(--color-separation);
}
.tech-type-group:has(.tech-type-header-destruction) {
  --tech-color: var(--color-destruction);
}

.tech-snapshot-link {
  color: inherit;
  text-decoration: none;
}

.tech-snapshot-link:hover {
  color: var(--bs-body-color);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--tech-color, var(--bs-secondary));
}

/* Category badges */
.tech-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 0.25rem;
  flex-shrink: 0;
  width: 5.75rem;
  text-align: center;
  color: white;
}

.tech-badge-sorption {
  background: var(--color-sorption);
}
.tech-badge-separation {
  background: var(--color-separation);
}
.tech-badge-destruction {
  background: var(--color-destruction);
}

/* Side-by-side Ex-Situ / In-Situ columns within each media card */
.situ-columns {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 0 1.25rem;
  align-items: start;
}

.situ-column {
  min-width: 0;
}

/* Type-group grid: 2 columns at top level, collapse to 1 inside situ-columns */
.tech-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1rem;
  margin-bottom: 0.25rem;
}

.situ-column .tech-type-grid {
  grid-template-columns: 1fr;
}

/* Grouped technology type sections */
.tech-type-group {
  margin-bottom: 0;
}

.tech-type-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.tech-type-header::after {
  content: "";
  flex: 1;
  height: 1px;
  opacity: 0.2;
}

.tech-type-header-sorption::after {
  background: var(--color-sorption);
}
.tech-type-header-separation::after {
  background: var(--color-separation);
}
.tech-type-header-destruction::after {
  background: var(--color-destruction);
}

.tech-list-grouped {
  padding: 0 0 0 0.5rem;
  margin: 0;
}

/* Technology Snapshots - Markdown Content Styling */
.snapshot-content {
  padding: 2rem 1.5rem;
}

.snapshot-content h1,
.snapshot-content h2,
.snapshot-content h3,
.snapshot-content h4,
.snapshot-content h5,
.snapshot-content h6 {
  color: var(--bs-primary);
  font-weight: bold;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.snapshot-content h1 {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
  border-bottom: 3px solid var(--bs-primary);
  padding-bottom: 0.85rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.snapshot-content h2 {
  font-size: 1.5rem;
}

.snapshot-content h3 {
  font-size: 1.25rem;
}

.snapshot-content h4 {
  font-size: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.snapshot-content p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.snapshot-content strong {
  color: var(--bs-primary);
  font-weight: 700;
}

.snapshot-content ul,
.snapshot-content ol {
  margin-bottom: 1rem;
  padding-left: 2rem;
}

.snapshot-content li {
  margin-bottom: 0.25rem;
  line-height: 1.6;
}

.snapshot-content li > ul > li > p,
.snapshot-content li > ol > li > p {
  margin-bottom: 0rem;
}

.snapshot-content li > p:has(+ ul),
.snapshot-content li > p:has(+ ol) {
  margin-bottom: 0rem;
}

/* Technology metadata: single horizontal strip directly below the title */
.tech-meta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0;
  margin: 0 0 1.5rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  font-size: 0.9rem;
}

.tech-meta-item {
  padding: 0 1rem;
  border-right: 1px solid var(--bs-border-color, #dee2e6);
  white-space: nowrap;
  line-height: 1.3;
}

.tech-meta-item:first-child {
  padding-left: 0;
}
.tech-meta-item:last-child {
  border-right: none;
}

.tech-meta-item strong {
  color: var(--bs-primary);
  font-weight: 600;
}

/* Technology graphic: floats right inside the HOW IT WORKS text */
.tech-graphic {
  float: right;
  width: 460px;
  max-width: 55%;
  margin: 0 0 1.25rem 1.75rem;
  text-align: center;
}

.tech-graphic a {
  display: inline-block;
}

.tech-graphic img {
  max-width: 100%;
  max-height: 420px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.tech-graphic img:hover {
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
}

/* Clearfix so the float never escapes snapshot-content */
.snapshot-content::after {
  content: "";
  display: table;
  clear: both;
}

/* Narrow viewports: drop the float, stack image centred */
@media (max-width: 900px) {
  .tech-graphic {
    float: none;
    width: 100%;
    max-width: 460px;
    margin: 0 auto 1.5rem auto;
  }
  .tech-meta-item {
    white-space: normal;
  }
}

/* Hanging indent for reference/resource paragraphs */
.snapshot-content #references ~ p:has(~ #additional-resources),
.snapshot-content #additional-resources ~ p {
  padding-left: 2.5em;
  text-indent: -2.5em;
}

/* ─── Navbar action buttons (Cite, Contact Us) ─────────────────── */
.navbar-action-btn {
  font-size: 0.8rem;
  padding: 0.3rem 0.75rem;
  border-radius: 1rem;
  opacity: 0.9;
  margin-left: 0.5rem;
  transition:
    opacity 0.15s ease,
    background-color 0.15s ease;
}

.navbar-action-btn:hover {
  opacity: 1;
}

/* ─── Force light background on all modals ─────────────────────── */
.modal-content {
  background-color: #ffffff;
  color: var(--bs-body-color);
}

.modal-body {
  background-color: #ffffff;
  color: #000000;
}

.modal-footer {
  color: var(--bs-body-color);
}

/* ─── Shared modal header accent ───────────────────────────────── */
.pfas-modal-header {
  background-color: var(--bs-primary);
  color: white;
  border-bottom: none;
  border-radius: calc(0.5rem - 1px) calc(0.5rem - 1px) 0 0;
}

.pfas-modal-header .modal-title {
  font-weight: 600;
  font-size: 1rem;
}

/* ─── Citation blockquote in modal ─────────────────────────────── */
.pfas-citation-wrapper {
  position: relative;
}

.pfas-copy-btn {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  padding: 0.2rem 0.4rem;
  font-size: 0.75rem;
  color: #6c757d;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.pfas-citation-wrapper:hover .pfas-copy-btn {
  opacity: 1;
}

.pfas-copy-btn:hover {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.pfas-copy-btn--copied {
  color: #198754 !important;
  border-color: #198754 !important;
  opacity: 1 !important;
}

.pfas-citation-block {
  border-left: 4px solid var(--bs-primary);
  background: var(--bs-gray-100);
  border-radius: 0 0.375rem 0.375rem 0;
  padding: 0.875rem 1rem;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #212529;
}

/* Session-disconnect notification */
/* Non-blocking corner toast (not a full-screen overlay) so the Triangle Chart
   and study table stay visible and scrollable while disconnected. */
#custom-disconnect {
  position: fixed;
  inset: 0;
  z-index: 2000; /* above the bslib busy-indicator spinner and Bootstrap modals */
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  background: rgb(0 0 0 / 30%);
  padding: 1rem;
  pointer-events: none; /* let clicks/drags on the chart pass through */
}

#custom-disconnect-box {
  pointer-events: auto;
  background: #fff;
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  max-width: 360px;
  text-align: left;
  border-left: 4px solid var(--bs-danger);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.4);
  animation: custom-disconnect-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#custom-disconnect-box h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

#custom-disconnect-box p {
  margin-bottom: 1rem;
}

@keyframes custom-disconnect-pop {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ─── Quick Start Guide: Performance Evaluation page cards ───────── */
.qs-card-row {
  max-width: 640px;
}

.qs-card {
  border: 1px solid var(--bs-gray-200);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.qs-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.qs-card-img {
  height: 130px;
  object-fit: contain;
  object-position: center;
  background: var(--bs-gray-100);
  padding: 0.5rem;
  border-bottom: 1px solid var(--bs-gray-200);
}

.qs-card .card-body {
  padding: 0.85rem 1rem;
}

.qs-card .card-title {
  font-size: 0.95rem;
}

.qs-card .card-text {
  font-size: 0.85rem;
}

/* Figure screenshots: a touch more separation from the white page */
.quickstart-guide .figure-img {
  border-color: var(--bs-gray-400) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* ─── Data-collected metric panels (Individual Study Data) ─────── */
.qs-metrics-panel {
  background: #fff;
  border: 1px solid var(--bs-gray-200);
  border-radius: 0.5rem;
  padding: 1rem 1.15rem;
}

.qs-metrics-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--bs-gray-800);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--bs-gray-200);
}

.qs-metrics-header i {
  color: var(--bs-primary);
}

.qs-metrics-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.4rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qs-metrics-list li {
  position: relative;
  padding-left: 1.15rem;
  line-height: 1.35;
}

.qs-metrics-list li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bs-gray-500);
}

/* Small anchor offset so jumped-to headings aren't flush against the top */
.quickstart-guide [id] {
  scroll-margin-top: 1.5rem;
}

/* ─── Page title header (spans full width above the TOC + content) ─ */
.qs-page-header {
  margin-bottom: 1.5rem;
  padding-bottom: 0.85rem;
  border-bottom: 3px solid var(--bs-primary);
  text-align: center;
}

.qs-page-header h1 {
  margin: 0;
  color: var(--bs-primary);
  font-weight: 700;
  font-size: 2.25rem;
  letter-spacing: -0.01em;
}

/* ─── On-page table of contents (left vertical sidebar) ────────── */
.qs-layout {
  display: flex;
  gap: 1.75rem;
  align-items: flex-start;
}

.qs-content {
  flex: 1 1 auto;
  min-width: 0; /* allow wide figures/tables to shrink instead of overflow */
}

.qs-toc {
  position: sticky;
  top: 0;
  z-index: 5;
  flex: 0 0 230px;
  width: 230px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 0.5rem 1rem;
}

.qs-toc-label {
  font-weight: 700;
  color: var(--bs-primary);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 0.75rem;
  margin-bottom: 0.5rem;
}

.qs-toc a {
  display: block;
  font-size: 0.9rem;
  line-height: 1.3;
  padding: 0.45rem 0.75rem;
  color: var(--bs-gray-700);
  text-decoration: none;
  border-left: 3px solid transparent;
  border-radius: 0 0.3rem 0.3rem 0;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.qs-toc a:hover {
  background: var(--bs-gray-100);
  color: var(--bs-primary);
}

.qs-toc a.is-active {
  background: rgba(0, 100, 158, 0.08);
  border-left-color: var(--bs-primary);
  color: var(--bs-primary);
  font-weight: 600;
}

/* Collapse the sidebar into a horizontal pill bar on small screens */
@media (max-width: 767.98px) {
  .qs-layout {
    flex-direction: column;
  }

  .qs-toc {
    position: static;
    width: auto;
    flex: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.5rem;
  }

  .qs-toc a {
    border-left: none;
    border-radius: 999px;
    background: var(--bs-gray-100);
    padding: 0.2rem 0.7rem;
    font-size: 0.8rem;
  }

  .qs-toc a.is-active {
    border-left: none;
    background: var(--bs-primary);
    color: #fff;
  }
}

/* ─── Heading hierarchy ────────────────────────────────────────── */
/* Tier 1 — top-level section headers (Overview / the two PE pages):
   flat, icon + primary title + full-width underline, no background box. */
.qs-section-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.5rem 0 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--bs-primary);
  color: var(--bs-primary);
}

.qs-section-head i {
  font-size: 1.3rem;
}

.qs-section-head h2 {
  margin: 0;
  font-weight: 700;
  font-size: 1.6rem;
}

/* Tier 2 — subsection headers (blue left-bar). Sized down slightly inside the
   guide so Tier 1 clearly outranks them (scoped so the homescreen is untouched). */
.quickstart-guide .section-heading h4 {
  font-size: 1.25rem;
}

/* Tier 3 — sub-subsection headers: muted grey so they read as subordinate to
   the blue Tier-2 headings (was primary blue, which flattened the hierarchy). */
.qs-subhead {
  margin-top: 1.25rem;
  margin-bottom: 0.4rem;
  color: var(--bs-gray-800);
  font-weight: 600;
  font-size: 1.1rem;
}

/* ─── Data-point symbol legend ─────────────────────────────────── */
.qs-symbol-legend {
  margin: 0.5rem 0;
}

.qs-symbol-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.35rem 0;
}

.qs-symbol {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  background: var(--bs-primary);
}

.qs-symbol--circle {
  border-radius: 50%;
}

.qs-symbol--square {
  border-radius: 3px;
}

.qs-symbol--hollow {
  background: transparent;
  border: 2.5px solid var(--bs-primary);
  border-radius: 50%;
}

.qs-symbol--color {
  border-radius: 50%;
  background: conic-gradient(#e15759, #59a14f, #4e79a7, #f28e2b, #e15759);
}

/* Caption beneath the symbol legend (not a symbol itself) */
.qs-symbol-note {
  margin: 0.4rem 0 0;
  padding-left: 0.15rem;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--bs-gray-600);
}

/* ─── OOM table ────────────────────────────────────────────────── */
/* Neutral grey header */
.qs-oom-table > thead > tr > th {
  background-color: var(--bs-gray-200);
  color: var(--bs-gray-800);
  border-bottom: 2px solid var(--bs-gray-400);
  font-weight: 600;
  vertical-align: middle;
}

/* Zebra striping and row separators so the rows clearly read as a table */
.qs-oom-table > tbody > tr > td {
  border-bottom: 1px solid var(--bs-gray-200);
}

.qs-oom-table > tbody > tr:nth-of-type(even) > td {
  background-color: rgba(0, 0, 0, 0.04);
}

/* ─── Icon-ified Liquid / Solid media panels ───────────────────── */
.qs-media-panel {
  height: 100%;
  background: #fff;
  border: 1px solid var(--bs-gray-200);
  border-radius: 0.5rem;
  padding: 1rem 1.15rem;
}

.qs-media-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--bs-gray-200);
}

.qs-media-header i {
  font-size: 1.15rem;
}

.qs-media-liquid .qs-media-header,
.qs-media-liquid .qs-media-header i {
  color: #1c7ec4;
}

.qs-media-solid .qs-media-header,
.qs-media-solid .qs-media-header i {
  color: #b5651d;
}

.qs-media-panel ul {
  margin-bottom: 0;
  padding-left: 1.1rem;
}

/* ─── Callout boxes (tip / next-steps) ─────────────────────────── */
.qs-callout {
  display: flex;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  margin: 1.25rem 0;
  border-radius: 0.4rem;
  border-left: 4px solid;
}

.qs-callout i {
  font-size: 1.15rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.qs-callout .qs-callout-title {
  font-weight: 700;
  display: block;
  margin-bottom: 0.15rem;
}

.qs-callout p {
  margin-bottom: 0;
}

.qs-callout--tip {
  background: #fff8e1;
  border-left-color: #f1a72c;
}

.qs-callout--tip i,
.qs-callout--tip .qs-callout-title {
  color: #b9791a;
}

.qs-callout--next {
  background: #e8f3fb;
  border-left-color: var(--bs-primary);
}

.qs-callout--next i,
.qs-callout--next .qs-callout-title {
  color: var(--bs-primary);
}

/* ─── Back-to-top floating button ──────────────────────────────── */
.qs-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1030;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--bs-primary);
  color: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s;
  cursor: pointer;
}

.qs-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.qs-to-top:hover {
  background: #0a4d78;
}