/* Page-level rules — scoped to the standalone predictor page so the
   stylesheet is safe to load inside the Academy course (where these
   selectors would otherwise restyle the course's body / main / grid). */
body[data-page="predictor"] { background-color: #f8f9fa; }
body[data-page="predictor"] .main-content { padding: 20px; }
body[data-page="predictor"] .container-fluid { padding-left: 0; padding-right: 0; }

/* KPI tile core look — navy gradient + orange rate. Inlined here so the
   embedded predictor widget renders correctly on pages that don't load
   the global site.css (e.g. inside the Academy course module). On the
   standalone predictor page these rules are dominated by site.css's
   identical values, so they're a no-op there. */
.site-main-wrap .kpi-card,
.site-main-wrap .kpi-card.dashboard-kpi-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0a2540 0%, #143659 60%, #1a4775 100%) !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(10, 37, 64, 0.25) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
}
.site-main-wrap .kpi-card .kpi-header {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  font-size: 0.78rem !important;
  text-transform: uppercase;
  padding: 0.5rem 0.75rem;
  border-bottom: none !important;
}
.site-main-wrap .kpi-card .rate-value,
.site-main-wrap .kpi-card .kpi-value {
  color: #fd7e14 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

/* PWLB Tracker — KPI cards reuse the dashboard PWLB style (175px,
   compact, sparkline below the changes line). Override Bootstrap's
   h-100 with !important so the height takes effect. Selector
   excludes the strip container (#pt-kpi-strip) which also matches
   `[id^="pt-kpi-"]` — otherwise the row gets clamped to 175px and
   the second/third rows of tiles overflow on mobile, ending up
   under the chart card. */
.site-main-wrap [id^="pt-kpi-"]:not(#pt-kpi-strip).h-100,
.site-main-wrap [id^="pt-kpi-"]:not(#pt-kpi-strip) {
  height: 175px !important;
  min-height: 175px !important;
  max-height: 175px !important;
}
.site-main-wrap [id^="pt-kpi-"]:not(#pt-kpi-strip) .kpi-header {
  flex-shrink: 0;
}
/* Sparkline anchored to the bottom of the tile, taller than the
   dashboard equivalent because the predictor tiles carry less text
   (just delta + "since X:XX reset", no 1d/1w lines). */
.site-main-wrap [id^="pt-kpi-"]:not(#pt-kpi-strip) .p-2.position-relative {
  padding-bottom: 2px !important;
}
.site-main-wrap [id^="pt-kpi-"]:not(#pt-kpi-strip) .kpi-spark {
  height: 60px;
  width: 100%;
  margin-top: 2px;
}
/* Slightly smaller rate-value on the tracker so 3dp values like
   "5.312%" comfortably fit a narrow lg-2 card. */
.site-main-wrap [id^="pt-kpi-"]:not(#pt-kpi-strip) .rate-value {
  font-size: 2rem !important;
  line-height: 1.1 !important;
  font-variant-numeric: tabular-nums;
}
.site-main-wrap [id^="pt-kpi-"]:not(#pt-kpi-strip) .pt-kpi-delta {
  font-size: 0.85rem;
  font-weight: 700;
}

/* Quiet "AS OF" strip — same look as the PWLB page, no shouty
   dark band. Includes "x ago" relative timestamp. */
.pt-asof-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #6c757d;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}
.pt-asof-strip .pt-asof-eyebrow {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #495057;
  font-weight: 600;
}
.pt-asof-strip .pt-asof-time {
  font-variant-numeric: tabular-nums;
  color: #212529;
  font-weight: 600;
}
.pt-asof-strip .pt-asof-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #28a745;
  display: inline-block;
}
.pt-asof-strip .pt-asof-sep { opacity: 0.4; }
.pt-asof-strip .pt-asof-since { color: #6c757d; font-style: italic; }
.pt-asof-strip .pt-asof-trail { margin-left: auto; }

/* Predicted KPI tiles: same shape as PWLB page tiles but visibly
   distinct. Tiny pulsing live-dot in the header; "IMPLIED" eyebrow
   instead of "RATE"; the active tile (driving the chart) gets an
   orange ring. Clickable. */
.site-main-wrap [id^="pt-kpi-"] {
  cursor: pointer;
}
/* No hover shadow on Predictor KPI tiles. The cursor:pointer + the
   pt-kpi-active orange ring (when clicked) are enough affordance —
   a shifting drop shadow under the cursor reads as distracting
   motion on KPIs. */
.site-main-wrap [id^="pt-kpi-"].pt-kpi-active {
  box-shadow: 0 0 0 2px #fd7e14, 0 6px 18px rgba(253, 126, 20, .35);
}
.site-main-wrap [id^="pt-kpi-"] .kpi-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.site-main-wrap [id^="pt-kpi-"] .pt-kpi-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fd7e14;
  flex-shrink: 0;
}
.site-main-wrap [id^="pt-kpi-"] .pt-kpi-eyebrow-tail {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(253, 126, 20, 0.85);
  font-weight: 600;
  margin-left: auto;
  align-self: center;
}

/* Plain-English commentary card. Light orange-accented panel that sits
   between the KPI strip and the chart. Code-generated copy, but styled
   so it reads as a thoughtful note, not a UI element. */
.pt-commentary {
  background: rgba(253, 126, 20, 0.05);
  border: 1px solid rgba(253, 126, 20, 0.22);
  border-left: 3px solid #fd7e14;
  border-radius: 6px;
  padding: 10px 14px 11px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #1a1a1a;
}
.pt-commentary[hidden] { display: none; }

/* When the AS OF strip is moved into the commentary panel (by the
 * inline script in predictor.html), float it inline with the
 * "Since the reset" eyebrow — same row, pushed right. The body text
 * below then has the full panel width to breathe. Only the eyebrow
 * shares the row with the strip; the body underneath ignores it. */
.pt-commentary { position: relative; }
.pt-commentary > .pt-commentary-eyebrow {
  padding-right: 520px;          /* reserve room for the single-line strip */
}
.pt-commentary > .pt-asof-strip {
  position: absolute;
  top: 12px;
  right: 14px;
  margin: 0;
  padding: 0;
  border: none;
  display: inline-flex;
  flex-wrap: nowrap;             /* one line, never wrap */
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 11px;
  line-height: 1;
  color: #6c757d;
  text-align: right;
  white-space: nowrap;
}
/* Keep the live cluster visible but show ONLY its green status dot —
 * a "● this data is live" cue (our core differentiator). The "As of
 * date · time" text inside it is hidden; the Notice line carries the
 * time context. */
.pt-commentary > .pt-asof-strip > .d-inline-flex {
  display: inline-flex !important;
  gap: 0 !important;
}
.pt-commentary > .pt-asof-strip > .d-inline-flex .pt-asof-eyebrow,
.pt-commentary > .pt-asof-strip > .d-inline-flex .pt-asof-time {
  display: none !important;
}
.pt-commentary > .pt-asof-strip .pt-asof-dot {
  display: inline-block !important;
  width: 7px; height: 7px; border-radius: 50%;
  background: #28a745;                 /* green = live */
  margin: 0;
}
/* Source link sits inline alongside the rest of the strip — same row. */
.pt-commentary > .pt-asof-strip .pt-asof-trail {
  margin-left: 0;
  flex-basis: auto;
}
/* Drop the leftover bullet separator left behind by the hidden As-of
 * text — it's the 2nd child of the strip (1st is the dot cluster). */
.pt-commentary > .pt-asof-strip > :nth-child(2) { display: none !important; }

/* Narrow viewports — eyebrow padding-right wastes a lot of space.
 * Drop the strip back to a separate top line above the eyebrow. */
@media (max-width: 980px) {
  .pt-commentary > .pt-commentary-eyebrow { padding-right: 14px; }
  .pt-commentary > .pt-asof-strip {
    position: static;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(253, 126, 20, 0.18);
    justify-content: flex-start;
  }
}

/* On narrower viewports the commentary needs all its width — let the
 * AS OF strip flow back into the document flow above the eyebrow. */
@media (max-width: 820px) {
  .pt-commentary { padding-right: 14px; }
  .pt-commentary > .pt-asof-strip {
    position: static;
    width: auto;
    margin: 0 0 8px;
    padding: 0 0 8px;
    border-bottom: 1px solid rgba(253, 126, 20, 0.18);
    justify-content: flex-start;
    text-align: left;
  }
}
.pt-commentary .pt-commentary-body {
  /* Full-width commentary: body sizes to its content. The previous
     flex: 1 1 0 + overflow:auto only made sense inside the old
     pt-context-left half-height column. */
}
.pt-commentary-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #c84a00;
  margin-bottom: 4px;
}
.pt-commentary-eyebrow .pt-commentary-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #28a745;                  /* green = live, was orange */
  flex-shrink: 0;
  /* Pulsing "live" halo */
  box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.55);
  animation: pt-commentary-pulse 2s ease-out infinite;
}
@keyframes pt-commentary-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(40, 167, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .pt-commentary-eyebrow .pt-commentary-dot { animation: none; }
}
.pt-commentary-body strong { color: #1a1a1a; font-weight: 700; }
.pt-commentary-body em {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.pt-commentary-body em.pt-cm-up { color: #c84a00; }
.pt-commentary-body em.pt-cm-down { color: #0a7e3f; }
.pt-commentary-body em.pt-cm-flat { color: #495057; }
.pt-commentary-body em.pt-cm-briefing {
  font-style: italic;
  font-weight: 500;
  color: #2c3e50;
  background: rgba(253, 126, 20, 0.10);
  padding: 0 5px;
  border-radius: 3px;
}
.pt-commentary-fresh {
  color: #495057;
  font-style: italic;
}
.pt-commentary-skel {
  display: inline-block;
  width: 78%;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    rgba(253, 126, 20, 0.08) 0%,
    rgba(253, 126, 20, 0.22) 50%,
    rgba(253, 126, 20, 0.08) 100%);
  background-size: 200% 100%;
  animation: pt-skel-shimmer 1.4s ease-in-out infinite;
}
@keyframes pt-skel-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Curve shape & move bar chart — sits in the bottom half of the
   left column, with the commentary card above. Two grouped columns
   per tenor (step + live), color-coded by sign so curve shape reads
   at a glance. */
.pt-bars-body { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.pt-bars-container {
  width: 100%;
  flex: 1 1 0;
  min-height: 180px;
  position: relative;
}

/* KPI grid (2×3) on the left, chart on the right. The row has a
   fixed min-height that matches three rows of 175px KPI cards plus
   gaps, so the right-hand chart card stretches to the same height
   as the KPI grid. */
.pt-context-row { min-height: 557px; }
/* Columns are flex containers so .h-100 children fill the column. Was
 * `display: flex` (default row direction) — that made any second child
 * (like the inline academy badge) sit beside the KPI strip / chart card
 * instead of stacking above/below it. Column direction fixes both. */
.pt-context-row > [class*="col-"] { display: flex; flex-direction: column; }
.pt-context-row > [class*="col-"] > #pt-kpi-strip,
.pt-context-row > [class*="col-"] > .pt-chart-card {
  width: 100%;
  flex: 1 1 auto;             /* fill remaining height after the badge */
  min-height: 0;
}
/* KPI tiles in the new 2×3 grid: keep the 175px tile size so each
   card is dense and consistent with the dashboard's PWLB rate
   tiles. The inner Bootstrap row wraps to two cards per visual row;
   three visual rows × 175px + two 16px gaps = 557px. */
#pt-kpi-strip > .col-6 { display: flex; }
#pt-kpi-strip > .col-6 > .kpi-card { width: 100%; }

/* styles.css has `.card.d-flex.flex-column { height: 340px !important; }`
   meant for dashboard KPI cards — override it for the chart card and
   bars card so they fill their flex parents in this layout. */
.pt-chart-card.card.d-flex.flex-column {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}
/* Bump selector specificity to beat the generic
   `.card-body > div { display:flex; flex-direction:column; flex:1 1 auto; }`
   rule from styles.css. */
.pt-bars-card .pt-bars-legend {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: #495057;
  padding: 0 2px 4px;
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: hidden;
}
.pt-bars-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.pt-bars-pair {
  display: inline-flex;
  gap: 1px;
  flex-shrink: 0;
}
.pt-bars-swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}
.pt-bars-step-up { background: #fbc890; }
.pt-bars-step-down { background: #7fc99c; }
.pt-bars-live-up { background: #fd7e14; }
.pt-bars-live-down { background: #0a7e3f; }
.pt-bars-legend-hint {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  margin-left: 4px;
}

/* Briefing card — sits alongside the bar chart on md+ screens.
   Carries the editorial WHY behind the numeric move. Orange-accented
   left border so it reads as a piece of curated context, not a UI
   element. */
.pt-briefing-card { border-left: 3px solid #fd7e14; }
.pt-briefing-body {
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pt-briefing-badge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(253, 126, 20, 0.18);
  color: #fd7e14;
}
.pt-briefing-headline {
  font-size: 15px;
  line-height: 1.45;
  color: #1a1a1a;
  font-weight: 600;
  flex-grow: 1;
}
.pt-briefing-headline strong {
  color: #c84a00;
}
.pt-briefing-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e9ecef;
}
.pt-briefing-eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6c757d;
  font-weight: 600;
}
.pt-briefing-link {
  font-size: 12px;
  font-weight: 600;
  color: #fd7e14;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .12s;
}
.pt-briefing-link:hover {
  color: #c84a00;
}

/* ── Soft paywall overlay ────────────────────────────────────────
   After a short free preview the predictor's content blurs out and
   an explainer card invites the user to sign up. The overlay is
   fixed to the viewport with its left edge offset by the sidebar
   width (--shell-sidebar-w, which auto-shrinks when the sidebar
   collapses), so the left nav is the ONLY thing left fully
   clickable. The top header, the predictor content, and the
   floating "Take the tour" pill (z-index 1040) all sit behind the
   overlay's blur — at z-index 1050 it lifts above the tour pill
   and the page chrome. */
.pt-paywall {
  position: fixed;
  top: var(--shell-header-h);
  right: 0;
  bottom: 0;
  left: var(--shell-sidebar-w);
  z-index: 1050;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 24px 24px;
  background: linear-gradient(180deg,
    rgba(10, 37, 64, 0.42) 0%,
    rgba(10, 37, 64, 0.62) 100%);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  animation: pt-paywall-fade 0.35s ease-out;
  overflow-y: auto;
  /* Smoothly follow the sidebar when it expands / collapses. */
  transition: left 0.18s ease;
}
/* On narrow viewports the sidebar slides off-screen and a hamburger
   button in the header drives it. The overlay should cover the full
   viewport so the rest of the chrome reads as gated, but the
   hamburger and (once opened) the drawer need to sit above the
   overlay so the user can still reach the other tools. */
@media (max-width: 900px) {
  .pt-paywall { left: 0; }
  body.pt-paywalled .site-mobile-nav-toggle { z-index: 1060; position: relative; }
  body.pt-paywalled.mobile-nav-open aside#site-sidebar { z-index: 1060; }
  body.pt-paywalled.mobile-nav-open .site-mobile-nav-backdrop { z-index: 1055; }
}
.pt-paywall[hidden] { display: none; }
@keyframes pt-paywall-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.pt-paywall-card {
  width: min(560px, 100%);
  background: #ffffff;
  border-radius: 14px;
  padding: 26px 30px 24px;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.40);
  text-align: left;
  font-family: inherit;
  color: #1a1a1a;
}
.pt-paywall-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c84a00;
  margin-bottom: 8px;
}
.pt-paywall-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fd7e14;
  flex-shrink: 0;
}
.pt-paywall-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: #0a2540;
  margin: 0 0 14px;
}
.pt-paywall-body {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #495057;
  margin: 0 0 10px;
}
.pt-paywall-body strong { color: #1a1a1a; font-weight: 700; }
.pt-paywall-body em {
  font-style: italic;
  color: #1a1a1a;
}
.pt-paywall-pitch {
  background: rgba(253, 126, 20, 0.08);
  border-left: 3px solid #fd7e14;
  padding: 10px 12px;
  margin-top: 14px;
  border-radius: 0 6px 6px 0;
  color: #1a1a1a;
}
.pt-paywall-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.pt-paywall-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: #fd7e14;
  color: #ffffff !important;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 16px rgba(253, 126, 20, 0.35);
  transition: background 0.15s, box-shadow 0.15s;
}
.pt-paywall-cta:hover,
.pt-paywall-cta:focus-visible {
  background: #e76b07;
  box-shadow: 0 8px 20px rgba(253, 126, 20, 0.45);
  outline: none;
}
.pt-paywall-cta i { font-size: 1rem; }
.pt-paywall-secondary {
  color: #495057 !important;
  text-decoration: underline;
  text-decoration-color: rgba(73, 80, 87, 0.35);
  font-size: 0.88rem;
}
.pt-paywall-secondary:hover { color: #1a1a1a !important; }
.pt-paywall-footnote {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e9ecef;
  font-size: 0.82rem;
  color: #6c757d;
  line-height: 1.5;
}
.pt-paywall-footnote strong { color: #495057; font-weight: 600; }
.pt-paywall-test-skip {
  display: block;
  margin: 10px 0 0;
  padding: 4px 8px;
  background: transparent;
  border: 1px dashed rgba(108, 117, 125, 0.45);
  border-radius: 6px;
  color: #6c757d;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  width: 100%;
}
.pt-paywall-test-skip:hover {
  color: #fd7e14;
  border-color: rgba(253, 126, 20, 0.6);
}
@media (max-width: 576px) {
  .pt-paywall { padding: 40px 14px 14px; }
  .pt-paywall-card { padding: 22px 22px 20px; }
  .pt-paywall-title { font-size: 1.25rem; }
}

/* Take-the-tour trigger — fixed-position pill in the bottom-right of
   the viewport. Orange brand pill, always visible regardless of scroll
   position; sits above page content but below modals (Shepherd tour
   uses z-index 9999+). */
/* The author display:inline-flex below would otherwise override the
 * HTML `hidden` attribute (author CSS beats the UA [hidden] rule), so
 * the tour pill kept showing despite hidden. This guard restores it. */
.pt-tour-fab[hidden] { display: none !important; }
.pt-tour-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1040;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  background: #fd7e14;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 18px rgba(10, 37, 64, 0.35);
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.pt-tour-fab:hover,
.pt-tour-fab:focus-visible {
  background: #e76b07;
  box-shadow: 0 8px 22px rgba(10, 37, 64, 0.45);
  outline: none;
}
.pt-tour-fab i {
  font-size: 1.05rem;
  line-height: 1;
}
/* Mobile: shrink slightly so it doesn't dominate small screens. */
@media (max-width: 576px) {
  .pt-tour-fab {
    right: 12px;
    bottom: 12px;
    padding: 8px 14px;
    font-size: 0.78rem;
  }
}

/* Shepherd theme tweaks so the tour cards feel native to pwlbtoday. */
.shepherd-element.shepherd-theme-pwlb {
  max-width: 380px;
}
.shepherd-element.shepherd-theme-pwlb .shepherd-content {
  background: #0a2540;
  color: #fff;
  border-radius: 8px;
  border: 1px solid rgba(253, 126, 20, 0.5);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4);
}
.shepherd-element.shepherd-theme-pwlb .shepherd-header {
  background: transparent;
  padding: 14px 18px 4px;
}
.shepherd-element.shepherd-theme-pwlb .shepherd-title {
  color: #fd7e14;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.shepherd-element.shepherd-theme-pwlb .shepherd-cancel-icon {
  color: rgba(255, 255, 255, 0.6);
}
.shepherd-element.shepherd-theme-pwlb .shepherd-cancel-icon:hover {
  color: #fff;
}
.shepherd-element.shepherd-theme-pwlb .shepherd-text {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.85rem;
  line-height: 1.55;
  padding: 4px 18px 14px;
}
.shepherd-element.shepherd-theme-pwlb .shepherd-text strong {
  color: #fd7e14;
}
.shepherd-element.shepherd-theme-pwlb .shepherd-footer {
  padding: 0 14px 14px;
  gap: 8px;
}
.shepherd-element.shepherd-theme-pwlb .shepherd-button {
  background: #fd7e14;
  color: #212529;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 6px 14px;
  border-radius: 999px;
  border: 0;
}
.shepherd-element.shepherd-theme-pwlb .shepherd-button:hover {
  background: #ff8a2a;
  color: #212529;
}
.shepherd-element.shepherd-theme-pwlb .shepherd-button.shepherd-button-secondary {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.shepherd-element.shepherd-theme-pwlb .shepherd-button.shepherd-button-secondary:hover {
  color: #fff;
  border-color: #fff;
}
.shepherd-element.shepherd-theme-pwlb .shepherd-arrow:before {
  background: #0a2540;
  border: 1px solid rgba(253, 126, 20, 0.5);
}
.shepherd-modal-overlay-container {
  opacity: 0.55;
}

/* Segmented control inside the chart card header (matches the
   Latest Rates control on the PWLB page). */
.pt-segmented {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.pt-segmented .pt-seg {
  background: transparent;
  color: #fff;
  border: 0;
  padding: 3px 12px;
  font-size: 0.75rem;
  line-height: 1.5;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background .12s, color .12s;
}
.pt-segmented .pt-seg + .pt-seg {
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}
.pt-segmented .pt-seg:hover:not(.is-active) {
  background: rgba(253, 126, 20, 0.18);
}
.pt-segmented .pt-seg.is-active {
  background: #fd7e14;
  color: #212529;
  font-weight: 600;
}

/* === Academy question-strip =========================================
 * Question-led entry points to the academy — compact single row. The
 * buttons answer what a treasury officer is actually wondering about
 * this data, so they read as "get this answer" not "go buy a course".
 * Calm orange-tinted container with a 3px left accent — present but not
 * garish, right for a conservative LA audience. */
.pt-learn-q {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 8px 14px;
  background: rgba(253, 126, 20, 0.05);
  border: 1px solid rgba(253, 126, 20, 0.18);
  border-left: 3px solid var(--pt-orange, #fd7e14);
  border-radius: 10px;
}
.pt-learn-q-intro {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.pt-learn-q-intro .bi-mortarboard-fill {
  color: var(--pt-orange, #fd7e14);
  font-size: 1rem;
}
.pt-learn-q-brand {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--pt-navy, #0a2540);
  white-space: nowrap;
}
.pt-learn-q-brand .accent { color: var(--pt-orange, #fd7e14); }
.pt-learn-q-tag {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--pt-muted, #6c757d);
  white-space: nowrap;
}
.pt-learn-q-buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pt-learn-q-btn {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pt-orange, #fd7e14);
  background: #ffffff;
  border: 1px solid rgba(253, 126, 20, 0.35);
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.12s;
}
.pt-learn-q-btn:hover {
  background: var(--pt-orange, #fd7e14);
  color: #ffffff;
  border-color: var(--pt-orange, #fd7e14);
  transform: translateY(-1px);
}

/* NEW badge on the wide academy strip — sits inline with the brand
 * wordmark, matching the sidebar's .new-badge treatment. */
.pt-learn-bar-new {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #ffffff;
  background: #4ade80;                   /* green like the live ticker */
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: 1px;
}

/* Small mortarboard icon prefix on the chart CTA pills — tells the
 * user this is an academy course link before they read the label. */
.pt-academy-cta-icon { font-size: 0.85em; opacity: 0.95; }

/* Academy CTA — single solid-orange pill, no brand wordmark. Used
 * inline with the chart card-header segmented controls (Maturity /
 * EIP / Annuity) and below the KPI grid. Click opens the course modal. */
.pt-academy-cta {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 4px;
  height: 26px;                      /* matches the .pt-segmented control height */
  padding: 0 11px;
  background: var(--pt-orange, #fd7e14);
  color: #ffffff;
  border: 1px solid var(--pt-orange, #fd7e14);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.12s, box-shadow 0.12s;
}
.pt-academy-cta:hover {
  background: #e06b00;
  border-color: #e06b00;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(253, 126, 20, 0.30);
}
.pt-academy-cta .bi { font-size: 0.9rem; line-height: 1; }
/* KPI-side variant — sits below the grid with a small top margin so it
 * doesn't hug the last tile row, and a touch larger since the
 * surrounding tiles don't squeeze it. */
.pt-academy-cta-mt {
  margin-top: 10px;
  height: 30px;
  padding: 0 14px;
  font-size: 0.85rem;
}
/* Lift specificity to 0,4,1 so site.css's
 * .site-main-wrap .card-header.bg-dark span { color: orange !important }
 * doesn't paint our CTA text orange. */
.site-main-wrap button.pt-academy-cta { color: #ffffff !important; }
.site-main-wrap button.pt-academy-cta .bi { color: #ffffff !important; }

/* Inline academy badge — a uniform "PWLBacademy · Reading the course"
   button used adjacent to each chart and KPI cluster. Same shape
   everywhere so users learn to recognise it as the entry point to
   the matching course. Click opens the .pt-academy-modal. */
.pt-academy-inline {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;            /* never stretch with a flex parent */
  width: fit-content;
  max-width: 100%;
  height: 34px;                       /* fixed pill height — stops vertical stretch */
  gap: 10px;
  padding: 0 6px 0 14px;             /* tighter on the right for the action pill */
  background: var(--pt-orange-soft, #fff5e9);
  border: 1px solid rgba(253, 126, 20, 0.20);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  margin-bottom: 8px;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.pt-academy-inline.pt-academy-inline-mt { margin-top: 10px; margin-bottom: 0; }

/* Dark-background variant — used inside the chart card-header (bg-dark).
 * Brighten the brand wordmark to white so PWLB reads against the navy.
 * The !important is necessary to defeat site.css's blanket
 * .site-main-wrap .card-header.bg-dark span { color: orange !important }
 * which would otherwise paint the whole brand wordmark orange. */
.pt-academy-inline.pt-academy-inline-on-dark {
  margin-bottom: 0;
  background: rgba(253, 126, 20, 0.15);
  border-color: rgba(253, 126, 20, 0.45);
}
/* site.css loads AFTER predictor.css, so on a same-specificity tie its
 * .site-main-wrap .card-header.bg-dark span (0,3,1) wins. We bump
 * to 0,4,1 by prefixing .site-main-wrap to defeat it outright. */
.site-main-wrap .pt-academy-inline.pt-academy-inline-on-dark span.pt-academy-inline-brand {
  color: #ffffff !important;
}
.site-main-wrap .pt-academy-inline.pt-academy-inline-on-dark span.site-brand-text-accent {
  color: var(--pt-orange, #fd7e14) !important;
}
.site-main-wrap .pt-academy-inline.pt-academy-inline-on-dark span.pt-academy-inline-action {
  color: #ffffff !important;
}
.pt-academy-inline.pt-academy-inline-on-dark:hover {
  background: rgba(253, 126, 20, 0.25);
  border-color: var(--pt-orange, #fd7e14);
}
.pt-academy-inline:hover {
  border-color: var(--pt-orange, #fd7e14);
  box-shadow: 0 3px 10px rgba(253, 126, 20, 0.18);
  transform: translateY(-1px);
}
.pt-academy-inline-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pt-navy, #0a2540);
  font-weight: 700;
  white-space: nowrap;
}
.pt-academy-inline-brand .bi-mortarboard-fill {
  color: var(--pt-orange, #fd7e14);
  font-size: 0.95rem;
}
.pt-academy-inline-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;                       /* pinned so it fits cleanly inside the 34px outer pill */
  background: var(--pt-orange, #fd7e14);
  color: #ffffff;
  font-weight: 600;
  border-radius: 999px;
  padding: 0 12px 0 14px;
  white-space: nowrap;
  transition: background 0.12s;
}
.pt-academy-inline:hover .pt-academy-inline-action { background: #e06b00; }
.pt-academy-inline-action .bi-arrow-right { font-size: 0.95rem; line-height: 1; }

/* Academy cross-link bar — (LEGACY) wide horizontal strip with intro +
   four pills. Removed from predictor in favour of the inline badges
   above but the styles stay defined in case it's re-enabled. */
.pt-learn-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* no space-between — pills flow left, directly after the intro text */
  gap: 8px 16px;
  padding: 6px 2px 10px;
  /* Quiet line — no orange band. A thin bottom rule separates it from
   * the commentary below. Reserving solid orange for the data + the
   * single contextual chart CTA. */
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--pt-line, #e9ecef);
  border-radius: 0;
}
.pt-learn-bar-intro {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-width: 0;
}
.pt-learn-bar-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--pt-navy, #0a2540);
  white-space: nowrap;
}
.pt-learn-bar-eyebrow .bi-mortarboard-fill { font-size: 1rem; color: var(--pt-orange, #fd7e14); }
/* PWLB part of the brand wordmark — navy on the light orange-tinted
   strip bg (mirrors the sidebar item's two-tone treatment, where PWLB
   is the body colour and `.site-brand-text-accent` carries the orange). */
.pt-learn-bar-brand { color: var(--pt-navy, #0a2540); }
.pt-learn-bar-blurb {
  font-size: 0.84rem;
  color: var(--pt-muted, #6c757d);
  font-weight: 500;
}
.pt-learn-bar-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pt-learn-bar-links .pt-learn-link {
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  /* Navy-outline, NOT solid orange — these are supporting links, not the
   * page's primary action. Solid orange is reserved for the live data
   * and the single contextual chart CTA. Warms to orange on hover. */
  color: var(--pt-navy, #0a2540);
  background: #ffffff;
  border: 1px solid rgba(10, 37, 64, 0.18);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.pt-learn-bar-links .pt-learn-link:hover {
  background: var(--pt-orange-soft, #fff5e9);
  border-color: var(--pt-orange, #fd7e14);
  color: var(--pt-orange, #fd7e14);
}

/* === Academy course modal ============================================= */
.pt-academy-modal {
  position: fixed; inset: 0;
  z-index: 1080;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.pt-academy-modal[hidden] { display: none; }
.pt-academy-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 37, 64, 0.55);
  backdrop-filter: blur(2px);
}
.pt-academy-modal-card {
  position: relative;
  background: #ffffff;
  border-radius: 14px;
  width: 100%; max-width: 560px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 32px 32px 28px;
  box-shadow: 0 20px 60px rgba(10, 37, 64, 0.30);
  animation: pt-academy-modal-in 0.18s ease-out;
}
@keyframes pt-academy-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.pt-academy-modal-close {
  position: absolute; top: 14px; right: 14px;
  background: transparent; border: none;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--pt-muted, #6c757d);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.pt-academy-modal-close:hover {
  background: rgba(10, 37, 64, 0.06);
  color: var(--pt-navy, #0a2540);
}
.pt-academy-modal-close .bi { font-size: 1.05rem; }

.pt-academy-modal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--pt-orange, #fd7e14);
  margin-bottom: 10px;
}
.pt-academy-modal-eyebrow .bi-mortarboard-fill { font-size: 1.05rem; }
/* Brand wordmark inside the eyebrow + about paragraph — PWLB navy,
   academy orange via .site-brand-text-accent. Mirrors the sidebar
   treatment for visual consistency. */
.pt-academy-modal-brand { color: var(--pt-navy, #0a2540); font-weight: 700; }
/* Quiet "course" tail after the wordmark */
.pt-academy-modal-eyebrow-tail {
  color: var(--pt-muted, #6c757d);
  font-weight: 500;
}

.pt-academy-modal-title {
  font-size: 1.5rem; font-weight: 800; line-height: 1.2;
  color: var(--pt-navy, #0a2540);
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.pt-academy-modal-sub {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--pt-text, #243240);
  margin: 0 0 14px;
}

.pt-academy-modal-stats {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 18px;
}
.pt-academy-modal-stat {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.78rem; font-weight: 600;
  color: var(--pt-muted, #6c757d);
  background: rgba(10, 37, 64, 0.04);
  border-radius: 999px;
  padding: 5px 11px;
}
.pt-academy-modal-stat .bi { font-size: 0.85rem; }
.pt-academy-modal-stat-cpd {
  background: var(--pt-orange-soft, #fff5e9);
  color: var(--pt-orange, #fd7e14);
}

.pt-academy-modal-section {
  margin-bottom: 16px;
}
.pt-academy-modal-section-head {
  font-size: 0.74rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pt-muted, #6c757d);
  margin-bottom: 8px;
}
.pt-academy-modal-list {
  margin: 0; padding-left: 18px;
  font-size: 0.9rem; line-height: 1.55;
  color: var(--pt-text, #243240);
}
.pt-academy-modal-list li { margin-bottom: 4px; }
.pt-academy-modal-list li::marker {
  color: var(--pt-orange, #fd7e14);
}

.pt-academy-modal-about {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--pt-muted, #6c757d);
  background: rgba(10, 37, 64, 0.03);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 18px;
}
.pt-academy-modal-about strong { color: var(--pt-navy, #0a2540); }

.pt-academy-modal-cta {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--pt-orange, #fd7e14);
  color: #ffffff;
  font-size: 1rem; font-weight: 700;
  border-radius: 10px;
  padding: 13px 22px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(253, 126, 20, 0.28);
  transition: background 0.15s, box-shadow 0.15s, transform 0.12s;
}
.pt-academy-modal-cta:hover {
  background: #e06b00;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(253, 126, 20, 0.38);
  transform: translateY(-1px);
}
.pt-academy-modal-cta .bi { font-size: 1.05rem; }

/* Lock body scroll when modal is open */
body.pt-academy-modal-open { overflow: hidden; }

@media (max-width: 540px) {
  .pt-academy-modal-card { padding: 26px 22px 22px; }
  .pt-academy-modal-title { font-size: 1.3rem; }
}

/* Methodology + buyer-beware footnote — quiet enough not to compete
   with the chart, prominent enough to be read before acting. */
.pt-disclaimer {
  background: rgba(10, 37, 64, 0.035);
  border-left: 3px solid rgba(253, 126, 20, 0.7);
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.55;
  color: #495057;
}
.pt-disclaimer-hd {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #495057;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pt-disclaimer-hd .bi-info-circle {
  color: #fd7e14;
  font-size: 13px;
}
.pt-disclaimer-body {
  margin: 0 0 4px;
  color: #6c757d;
}
.pt-disclaimer-body:last-child { margin-bottom: 0; }
.pt-disclaimer-body strong { color: #495057; font-weight: 600; }

/* Pulse the most recent reset marker so users can find the live
   segment's anchor at a glance. CSS animations on SVG circle r/
   stroke-width are widely supported (Chromium, Firefox). */
.pt-latest-reset-series .highcharts-point {
  animation: pt-reset-pulse 1.8s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes pt-reset-pulse {
  0%, 100% { stroke-width: 3; r: 8; opacity: 1; }
  50%      { stroke-width: 5; r: 10; opacity: 0.85; }
}

/* Live tip — red dot at the end of the orange line, sitting still.
   The pulse is two expanding-then-fading halo rings (defined below)
   that radiate outward from the dot every 1.6s, staggered by half
   a cycle so there's always a wave in flight. Classic "live now"
   visual — much more visible than scaling the dot itself. */
.pt-live-tip-series .highcharts-point {
  filter: drop-shadow(0 0 4px rgba(214, 40, 40, 0.55));
}
.pt-live-halo {
  transform-origin: center;
  transform-box: fill-box;
  animation: pt-live-halo-expand 1.6s ease-out infinite;
  pointer-events: none;
}
.pt-live-halo-delay {
  animation-delay: 0.8s;
}
@keyframes pt-live-halo-expand {
  0%   { r: 6;  opacity: 0.95; stroke-width: 3; }
  80%  { opacity: 0; }
  100% { r: 26; opacity: 0;    stroke-width: 1; }
}

/* KPI tile sparkline live tip — solid orange dot, no animation.
   The pulsing halo this used to drive was removed across all KPI
   surfaces (per user request: no bumping on KPIs). The .pt-spark-halo
   markup may still appear on the SVG; the class is intentionally
   left without an animation so existing markup is harmless. */
.pt-spark-halo {
  pointer-events: none;
}

/* Empty state inside the movement chart */
.pt-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  color: rgba(255,255,255,0.78);
  font-size: 0.85rem;
  background: linear-gradient(120deg, #0a2540 0%, #143659 60%, #1a4775 100%);
  border-radius: 8px;
  padding: 16px;
}
.pt-chart-empty .pt-orange {
  color: #fd7e14;
  font-weight: 700;
}

/* Stale gilt-feed warning — banner overlaid on the movement chart when the
   feed looks frozen/stopped during business hours (see pwlbTracker.js). */
#pt-movement-chart { position: relative; }
.pt-feed-warning {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(253, 126, 20, 0.96);
  color: #2b1400;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 6px 18px -6px rgba(10, 37, 64, 0.5);
}
.pt-feed-warning i { font-size: 0.95rem; flex: none; }

/* KPI tile when the feed is stale/unanchored — mute the held value and tint
   the "since … reset" line amber so it never reads as a fresh live print. */
.pt-kpi-stale .rate-value { opacity: 0.6; }
.pt-kpi-stale .pt-kpi-since { color: #c25e00; font-weight: 600; }

/* ── Mobile (≤767px) — column-stack fixes ─────────────────────────
   On mobile the .pt-context-row's two columns stack into a single
   column. The desktop-only fixed heights would otherwise either
   crush the bars card (clipping the "Curve shape & move" header)
   or push the chart card off the visible area. */
@media (max-width: 767.98px) {
  /* Drop the 630px min-height — let content drive each card's size
     on mobile. Each card already has its own min-height as a floor. */
  .pt-context-row { min-height: 0; }
  /* Remove the flex-grow proportions that were splitting the column
     1:3 between commentary and bars on desktop. On mobile each
     card just takes its natural height. */
  .pt-context-left > .pt-commentary,
  .pt-context-left > .pt-bars-card { flex: 0 0 auto; min-height: auto; }
  /* Bars card AND commentary stack header + body naturally — without
     these the body inherits flex:1 1 0 which collapses to ~16px since
     the parent card no longer has a flex-defined height to distribute. */
  .pt-bars-card .card-body,
  .pt-bars-body,
  .pt-commentary .pt-commentary-body {
    flex: 0 0 auto;
    min-height: 0;
    height: auto;
    overflow-y: visible;
  }
  /* Commentary itself can grow with content on mobile — drop the
     hidden overflow that was clipping the prose. */
  .pt-commentary { overflow: visible; }
  /* Give the bars chart room — at narrow widths the legend + chart
     need a sensible minimum. */
  .pt-bars-container {
    flex: 0 0 auto;
    height: 240px;
    min-height: 240px;
  }
  /* Hide the help / tour trigger on mobile — the chart card header
     is already busy with the brand, picker pills and profile pills. */
  #pt-tour-trigger { display: none !important; }
  /* Predictor chart card on mobile: drop the inline 630px min-height
     from the markup so the card can grow to its chart's natural size,
     and pin a generous 480px floor so the line chart doesn't get
     squashed against the X-axis at narrow widths. */
  .pt-chart-card { min-height: 0 !important; }
  .pt-chart-card.card.d-flex.flex-column {
    height: auto !important;
    min-height: 480px !important;
  }
  /* Tenor pill row — 9 tenors (1Y..50Y) don't fit at 390px wide.
     The segmented's parent is allowed to be wider than the viewport
     (Bootstrap's negative-margin gutters etc.), so we anchor the
     scroll boundary to a 100% width AND a viewport-wide ceiling.
     The horizontal scroll keeps every tenor reachable. */
  .pt-segmented {
    display: flex;
    flex-wrap: nowrap;
    max-width: calc(100vw - 60px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Hide the scrollbar but keep scrolling functional — the pills
       are the visible affordance. */
    scrollbar-width: none;
  }
  .pt-segmented::-webkit-scrollbar { display: none; }
  .pt-segmented .pt-seg { flex: 0 0 auto; }
}

/* ── Free-preview countdown pill ─────────────────────────────────────────────
   Floats bottom-left of the viewport during the 15-second preview window,
   matching the tour pill on the bottom-right. Hidden once the gate fires
   or the user is signed in. */
.pt-preview-countdown {
  position: fixed;
  bottom: 68px;   /* sits just above the tour pill */
  right: 20px;
  z-index: 1040;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(13, 33, 69, 0.88);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
  padding: 6px 14px;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background .3s;
  pointer-events: none;
}

.pt-preview-countdown::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e8a020;
  animation: pt-dot-pulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

.pt-preview-countdown-urgent {
  background: rgba(160, 20, 20, 0.88) !important;
}

.pt-preview-countdown-urgent::before {
  background: #ff6b6b;
}

@keyframes pt-dot-pulse {
  0%, 100% { transform: scale(1);    opacity: 1;  }
  50%       { transform: scale(1.4); opacity: .7; }
}