:root{
  --bg:#0A0F15;--panel:#111923;--panel-2:#15202C;--panel-3:#0D141C;
  --text:#F3F6F8;--muted:#93A2B1;--grid:#24303B;--border:#2B3946;
  --cyan:#43C7F3;--brass:#C6A96B;--green:#2BCB7F;--yellow:#E7B84B;
  --red:#F06464;--neutral:#8D98A5;--shadow:0 18px 46px rgba(0,0,0,.22);
  --radius:12px;--radius-sm:9px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 18% -10%,rgba(198,169,107,.035),transparent 30%),var(--bg);color:var(--text);font-family:Inter,"Segoe UI",Arial,sans-serif;line-height:1.5}a{color:inherit;text-decoration:none}.app-shell{min-height:100vh}


.page{width:min(1680px,calc(100% - 72px));margin:0 auto;padding:30px 0 76px}.section{margin-top:22px}.breadcrumb{display:flex;gap:9px;align-items:center;margin-bottom:18px;color:var(--muted);font-size:12px}.breadcrumb a:hover{color:var(--cyan)}.breadcrumb strong{color:var(--text);font-weight:650}.eyebrow,.section-kicker{color:var(--cyan);font-size:10px;font-weight:750;letter-spacing:.16em}
.monitor-hero{display:grid;grid-template-columns:minmax(0,1fr) 270px;border:1px solid rgba(43,57,70,.9);background:linear-gradient(145deg,rgba(17,25,35,.99),rgba(13,20,28,.96));box-shadow:var(--shadow);border-radius:var(--radius);overflow:hidden}.hero-main{padding:30px 34px}.hero-title-row{display:flex;justify-content:space-between;gap:30px;align-items:flex-start;margin-top:10px}.hero-title-row h1{margin:0;font-size:clamp(34px,3.3vw,54px);line-height:1.04;letter-spacing:-.032em;font-weight:720}.hero-summary{max-width:980px;margin:17px 0 0;color:#A4B2C0;font-size:14px;line-height:1.72}.status-badge,.signal-badge{flex:0 0 auto;padding:8px 11px;border:1px solid currentColor;background:rgba(255,255,255,.02);font-size:9px;font-weight:800;letter-spacing:.11em}.status-badge{color:var(--green)}.hero-meta{border-left:1px solid var(--border);padding:30px;display:flex;flex-direction:column;justify-content:center;gap:28px}.hero-meta div{display:flex;flex-direction:column;gap:6px}.hero-meta span{color:var(--muted);font-size:9px;letter-spacing:.12em}.hero-meta strong{font-size:15px}
.signal-panel{margin-top:20px;display:grid;grid-template-columns:minmax(0,1fr) 540px;border:1px solid rgba(43,57,70,.9);background:var(--panel);border-radius:var(--radius);overflow:hidden}.signal-copy{padding:27px 32px}.signal-row{display:flex;align-items:center;gap:16px;margin-top:8px}.signal-row h2{margin:0;font-size:32px}.signal-copy p{max-width:820px;margin:16px 0 0;color:var(--muted);font-size:13px;line-height:1.7}.signal-facts{display:grid;grid-template-columns:repeat(3,1fr)}.signal-facts>div{border-left:1px solid var(--border);padding:30px 22px;display:flex;flex-direction:column;justify-content:center}.signal-facts span{color:var(--muted);font-size:9px;letter-spacing:.1em}.signal-facts strong{margin-top:7px;font-size:15px}
.section-heading{display:flex;justify-content:space-between;gap:24px;align-items:flex-end}.section-heading h2,.read-note h2{margin:3px 0 0;font-size:24px;letter-spacing:-.018em}.section-heading p{max-width:520px;margin:0;color:var(--muted);font-size:12px;text-align:right}.metrics-grid{display:none}.metric{min-height:0;padding:14px 15px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(17,25,35,.98),rgba(14,21,29,.98));border-radius:var(--radius-sm)}.metric span{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.09em}.metric strong{display:block;margin-top:6px;font-size:19px}

/* Standardized chart footprint. Existing Python PNGs are never cropped or stretched. */
.chart-shell{margin:18px auto 0;width:min(86vw,1320px);padding:14px;border:1px solid var(--border);background:var(--panel);aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;border-radius:var(--radius)}
.chart-shell img{display:block;width:100%;height:100%;object-fit:contain;background:var(--bg)}

/* Interactive chart: fixed 16:9 research viewport, responsive width. */
.interactive-chart-shell{margin:14px auto 0;width:min(96vw,1600px);border:1px solid var(--border);background:var(--panel);overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow)}
.interactive-chart-toolbar{min-height:38px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid var(--border);color:var(--muted);font-size:9px;font-weight:700;letter-spacing:.1em}
.interactive-chart-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 250px;
  align-items:stretch;
  min-width:0
}
.current-readings-side{
  border-left:1px solid var(--border);
  background:linear-gradient(180deg,rgba(15,23,32,.98),rgba(11,17,24,.98));
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px
}
.current-readings-title{
  color:var(--text);
  font-size:14px;
  font-weight:700;
  letter-spacing:-.01em;
  padding-bottom:10px;
  border-bottom:1px solid rgba(43,57,70,.72)
}
.metrics-side-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px
}
.metrics-side-grid .metric{
  border:1px solid var(--border);
  background:rgba(17,25,35,.9);
  border-radius:var(--radius-sm)
}
.metrics-side-grid .metric span{
  font-size:8px;
  letter-spacing:.09em
}

.interactive-chart{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  height:auto;
  min-width:0;
  min-height:0;
  margin:0 auto;
  background:linear-gradient(180deg,rgba(21,30,40,.55),rgba(10,15,21,.96));
  overflow:hidden
}
.interactive-chart svg{display:block;width:100%;height:100%}
.chart-grid-line{stroke:rgba(156,168,180,.15);stroke-width:1;vector-effect:non-scaling-stroke}
.chart-axis-line{stroke:rgba(156,168,180,.28);stroke-width:1;vector-effect:non-scaling-stroke}
.chart-axis-label{fill:#83909C;font-size:11px;font-family:Inter,"Segoe UI",Arial,sans-serif}
.chart-line{fill:none;stroke:var(--cyan);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.chart-line.animate{animation:draw-line 2.25s cubic-bezier(.2,.7,.2,1) forwards}
.chart-endpoint{fill:var(--cyan);stroke:#0B0F14;stroke-width:2;vector-effect:non-scaling-stroke;opacity:0}
.chart-endpoint.show{animation:endpoint-in .20s ease 2.14s forwards}
.chart-crosshair{stroke:rgba(242,245,247,.33);stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}
.chart-hover-dot{fill:var(--text);stroke:var(--bg);stroke-width:2;vector-effect:non-scaling-stroke;pointer-events:none}
.chart-tooltip{position:absolute;z-index:4;min-width:150px;max-width:230px;padding:10px 12px;border:1px solid rgba(76,201,232,.32);background:rgba(11,15,20,.94);box-shadow:0 12px 34px rgba(0,0,0,.32);pointer-events:none;transform:translate(12px,-50%);opacity:0;transition:opacity .08s ease}
.chart-tooltip.visible{opacity:1}.chart-tooltip-date{color:var(--muted);font-size:9px;letter-spacing:.08em}.chart-tooltip-value{margin-top:4px;color:var(--text);font-size:13px;font-weight:700}
.chart-empty{height:100%;display:grid;place-items:center;color:var(--muted);font-size:12px}

@keyframes draw-line{to{stroke-dashoffset:0}}
@keyframes endpoint-in{from{opacity:0}to{opacity:1}}


.research-details{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.research-details article{min-height:210px;padding:25px;border:1px solid var(--border);background:var(--panel);border-radius:var(--radius-sm)}.research-details h3{margin:8px 0 16px;font-size:18px}.research-details p,.source-item{color:var(--muted);font-size:12px;line-height:1.65}.source-item{padding:9px 0;border-bottom:1px solid rgba(48,58,70,.65)}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}.related-card{padding:20px;border:1px solid var(--border);background:var(--panel);border-radius:var(--radius-sm);transition:.16s ease}.related-card:hover{transform:translateY(-2px);border-color:rgba(76,201,232,.48)}.related-card span{color:var(--muted);font-size:9px;letter-spacing:.09em;text-transform:uppercase}.related-card strong{display:block;margin-top:9px;font-size:15px}.related-card em{display:block;margin-top:9px;color:var(--cyan);font-size:9px;font-style:normal;font-weight:800;letter-spacing:.09em}.read-note{display:grid;grid-template-columns:.9fr 1.4fr;gap:28px;align-items:center;padding:20px 24px;border:1px solid var(--border);background:var(--panel);border-radius:var(--radius-sm)}.read-note h2{font-size:20px}.read-note p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}
.tone-strongly_constructive,.tone-constructive{color:var(--green)!important}.tone-neutral{color:var(--neutral)!important}.tone-cautious{color:var(--yellow)!important}.tone-risk_off{color:var(--red)!important}.error-card{padding:24px;margin-bottom:18px;border:1px solid rgba(240,100,100,.45);background:rgba(240,100,100,.055);color:var(--red);white-space:pre-wrap}
footer{border-top:1px solid var(--border);padding:26px max(24px,calc((100% - 1440px)/2));display:flex;justify-content:space-between;color:var(--muted);font-size:9px;letter-spacing:.11em}
.detail-link{display:inline-flex;margin-top:14px;color:var(--cyan);font-size:9px;font-weight:800;letter-spacing:.10em}.detail-link:hover{color:var(--text)}
@media(max-width:1240px){}
@media(max-width:1080px){.monitor-hero,.signal-panel{grid-template-columns:1fr}.hero-meta{border-left:0;border-top:1px solid var(--border);display:grid;grid-template-columns:1fr 1fr}.signal-facts{border-top:1px solid var(--border)}.research-details{grid-template-columns:1fr}.related-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.page{width:min(100% - 28px,1680px);padding-top:18px}.hero-main{padding:22px}.hero-title-row{flex-direction:column}.signal-facts{grid-template-columns:1fr}.signal-facts>div{border-left:0;border-top:1px solid var(--border)}.related-grid{grid-template-columns:1fr}.section-heading{align-items:flex-start;flex-direction:column}.section-heading p{text-align:left}.read-note{grid-template-columns:1fr;gap:16px}footer{gap:16px;flex-direction:column}.chart-shell{aspect-ratio:4/3}}
@media(prefers-reduced-motion:reduce){.chart-line.animate{animation:none;stroke-dashoffset:0!important}.chart-endpoint.show{animation:none;opacity:1}}

@media(max-width:900px){
  .interactive-chart-shell,.chart-shell{width:min(96vw,100%)}
  .interactive-chart-layout{grid-template-columns:1fr}
  .current-readings-side{border-left:0;border-top:1px solid var(--border)}
  .metrics-side-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .metrics-side-grid{grid-template-columns:1fr}
}



/* V3.8 — requested monitor-page refinements */
#brandLine{display:none!important}
.signal-panel .section-kicker{
  font-size:24px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:-.018em;
  color:var(--cyan)
}

/* V3.9 — current signal value aligned right on the CURRENT SIGNAL row */
.signal-heading-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  width:100%
}
.signal-current-value{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  margin-left:auto;
  text-align:right
}
.signal-current-value h2{
  margin:0;
  font-size:32px
}
.signal-heading-row + #summary{
  margin-top:16px
}
@media(max-width:700px){
  .signal-heading-row{
    align-items:flex-start
  }
  .signal-current-value{
    gap:10px
  }
  .signal-current-value h2{
    font-size:26px
  }
}

/* V3.10 — remove redundant large signal text and hero LIVE badge */
#heroStatus[hidden]{display:none!important}
.signal-current-value{
  justify-content:flex-end
}

/* V3.11 — compatibility cleanup after removing redundant signal/hero elements */
#statusBadge[hidden]{display:none!important}

/* V3.12 — all website charts are animated; no primary/secondary hierarchy */
.interactive-charts-stack{
  display:flex;
  flex-direction:column;
  gap:24px
}
.animated-chart-block{
  width:100%
}
.animated-chart-block .section-heading{
  width:min(96vw,1600px);
  margin:0 auto
}
.animated-chart-block + .animated-chart-block{
  margin-top:8px
}
.animated-chart-block .interactive-chart-shell{
  width:min(96vw,1600px)
}
.animated-chart-block.with-readings .interactive-chart-layout{
  grid-template-columns:minmax(0,1fr) 250px
}
.animated-chart-block:not(.with-readings) .interactive-chart-layout{
  grid-template-columns:1fr
}
.animated-chart-block:not(.with-readings) .interactive-chart{
  width:min(86vw,1320px,calc((100dvh - 190px) * 16 / 9))
}
@media(max-width:900px){
  .animated-chart-block .section-heading,
  .animated-chart-block .interactive-chart-shell{
    width:min(96vw,100%)
  }
  .animated-chart-block.with-readings .interactive-chart-layout{
    grid-template-columns:1fr
  }
}


/* V3.13 — multi-series animated chart colors */
.chart-line.chart-series-1{stroke:var(--cyan)}
.chart-line.chart-series-2{stroke:var(--text)}
.chart-line.chart-series-3{stroke:#9A7CF8}
.chart-line.chart-series-4{stroke:var(--brass, #C6A96B)}
.chart-line.chart-series-5{stroke:var(--green)}

.chart-hover-dot.chart-series-1{fill:var(--cyan)}
.chart-hover-dot.chart-series-2{fill:var(--text)}
.chart-hover-dot.chart-series-3{fill:#9A7CF8}
.chart-hover-dot.chart-series-4{fill:var(--brass, #C6A96B)}
.chart-hover-dot.chart-series-5{fill:var(--green)}


/* ============================================================
   V3.14 — VIEWPORT-FIT CHART CARDS + LEGENDS
   Goal: title + toolbar + legend + full chart should fit
   comfortably inside the visible browser viewport.
   ============================================================ */

/* Each chart becomes its own readable "screen". */
.animated-chart-block{
  width:100%;
  scroll-margin-top:92px;
}

/* Keep heading compact so it does not consume chart space. */
.animated-chart-block .section-heading{
  min-height:42px;
  align-items:center;
  gap:18px;
  margin-bottom:8px;
}
.animated-chart-block .section-heading h2{
  font-size:22px;
  line-height:1.15;
  margin:0;
}
.animated-chart-block .section-heading p{
  font-size:11px;
  line-height:1.4;
}

/*
Desktop sizing logic:
- browser/header/title/toolbar/legend need vertical room;
- the actual plot keeps 16:9;
- the full chart block is constrained by viewport HEIGHT as well as width.

First chart has a 250px readings sidebar, so total width =
plot width + sidebar.
*/
.animated-chart-block.with-readings .interactive-chart-shell{
  width:min(
    94vw,
    1500px,
    calc((100dvh - 285px) * 16 / 9 + 250px)
  );
}

/* Charts without readings use only the chart width. */
.animated-chart-block:not(.with-readings) .interactive-chart-shell{
  width:min(
    88vw,
    1320px,
    calc((100dvh - 255px) * 16 / 9)
  );
}

/* Toolbar can wrap on narrow monitors without hiding content. */
.animated-chart-block .interactive-chart-toolbar{
  min-height:40px;
  height:auto;
  padding:7px 14px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  column-gap:18px;
  row-gap:7px;
}

/* Compact legend inside the toolbar. */
.chart-legend{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:7px 16px;
  min-width:0;
}
.chart-legend-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  color:var(--muted);
  font-size:9px;
  font-weight:700;
  letter-spacing:.04em;
}
.chart-legend-swatch{
  width:19px;
  height:3px;
  border-radius:999px;
  flex:0 0 auto;
}
.chart-legend-swatch.chart-series-1{background:var(--cyan)}
.chart-legend-swatch.chart-series-2{background:var(--text)}
.chart-legend-swatch.chart-series-3{background:#9A7CF8}
.chart-legend-swatch.chart-series-4{background:var(--brass)}
.chart-legend-swatch.chart-series-5{background:var(--green)}

/* The plot itself is always geometrically correct — never stretched. */
.animated-chart-block .interactive-chart{
  width:100%;
  aspect-ratio:16 / 9;
  height:auto;
  min-height:0;
  max-height:none;
}

/* Keep the readings sidebar compact enough to fit the full chart vertically. */
.animated-chart-block.with-readings .current-readings-side{
  padding:13px;
  gap:9px;
}
.animated-chart-block.with-readings .current-readings-title{
  padding-bottom:8px;
  font-size:13px;
}
.animated-chart-block.with-readings .metrics-side-grid{
  gap:8px;
}
.animated-chart-block.with-readings .metric{
  padding:10px 12px;
}
.animated-chart-block.with-readings .metric strong{
  margin-top:4px;
  font-size:17px;
}

/* Short desktop/laptop displays: become more conservative. */
@media(max-height:820px) and (min-width:901px){
  .animated-chart-block.with-readings .interactive-chart-shell{
    width:min(
      92vw,
      1360px,
      calc((100dvh - 255px) * 16 / 9 + 235px)
    );
  }
  .animated-chart-block.with-readings .interactive-chart-layout{
    grid-template-columns:minmax(0,1fr) 235px;
  }

  .animated-chart-block:not(.with-readings) .interactive-chart-shell{
    width:min(
      84vw,
      1180px,
      calc((100dvh - 230px) * 16 / 9)
    );
  }

  .animated-chart-block .section-heading{
    min-height:36px;
    margin-bottom:6px;
  }
  .animated-chart-block .section-heading h2{
    font-size:20px;
  }
}

/* Very short browser windows: prioritize full visibility over width. */
@media(max-height:700px) and (min-width:901px){
  .animated-chart-block.with-readings .interactive-chart-shell{
    width:min(
      88vw,
      1220px,
      calc((100dvh - 220px) * 16 / 9 + 220px)
    );
  }
  .animated-chart-block.with-readings .interactive-chart-layout{
    grid-template-columns:minmax(0,1fr) 220px;
  }
  .animated-chart-block:not(.with-readings) .interactive-chart-shell{
    width:min(
      80vw,
      1050px,
      calc((100dvh - 205px) * 16 / 9)
    );
  }
}

/* Tablet/mobile: stack readings underneath; preserve full chart width. */
@media(max-width:900px){
  .animated-chart-block.with-readings .interactive-chart-shell,
  .animated-chart-block:not(.with-readings) .interactive-chart-shell{
    width:min(96vw,100%);
  }

  .animated-chart-block .interactive-chart-toolbar{
    grid-template-columns:1fr auto;
  }
  .animated-chart-block .chart-legend{
    grid-column:1 / -1;
    grid-row:2;
    justify-content:flex-start;
  }
}

/* Small phones: toolbar becomes one column. */
@media(max-width:560px){
  .animated-chart-block .interactive-chart-toolbar{
    grid-template-columns:1fr;
  }
  .animated-chart-block .chart-legend{
    grid-column:1;
    grid-row:auto;
    justify-content:flex-start;
  }
}


/* ============================================================
   V3.16 — chart title + descriptive text INSIDE chart box
   ============================================================ */

.chart-box-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:14px 16px 10px;
  border-bottom:1px solid var(--border);
  background:rgba(14,21,29,.78)
}
.chart-box-heading h2{
  margin:0;
  color:var(--text);
  font-size:21px;
  line-height:1.2;
  letter-spacing:-.018em
}
.chart-box-heading p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:10px;
  line-height:1.45
}

/* The old outside heading is no longer used for animated charts. */
.animated-chart-block > .section-heading{
  display:none
}

/* Slightly tighter total card height now that heading is inside the panel. */
.animated-chart-block .interactive-chart-shell{
  margin-top:0
}

@media(max-height:820px) and (min-width:901px){
  .chart-box-heading{
    padding:10px 14px 8px
  }
  .chart-box-heading h2{
    font-size:19px
  }
  .chart-box-heading p{
    margin-top:3px;
    font-size:9px
  }
}

@media(max-width:700px){
  .chart-box-heading{
    padding:11px 12px 8px
  }
  .chart-box-heading h2{
    font-size:18px
  }
}


/* ============================================================
   V3.17 — animated chart panels match project hero-panel width
   ============================================================ */

/*
The Market Liquidity Index hero is a normal block inside .page, so its width
is 100% of the page content area. Give every animated chart shell the same
outer width and remove the previous narrower viewport caps.
*/
.animated-chart-block,
.animated-chart-block .interactive-chart-shell,
.animated-chart-block.with-readings .interactive-chart-shell,
.animated-chart-block:not(.with-readings) .interactive-chart-shell{
  width:100%;
  max-width:none;
}

/* No horizontal auto-narrowing: align box edges with the project hero panel. */
.animated-chart-block .interactive-chart-shell{
  margin-left:0;
  margin-right:0;
}

/*
Keep the actual plotted chart geometrically correct.
For the first chart, the sidebar occupies its own grid column.
For later charts, the 16:9 SVG stays centered and never stretches.
*/
.animated-chart-block:not(.with-readings) .interactive-chart{
  width:min(
    100%,
    1320px,
    calc((100dvh - 255px) * 16 / 9)
  );
  margin-left:auto;
  margin-right:auto;
}

/* On shorter desktop windows, preserve full card width while shrinking only
   the actual plotted chart to fit vertically. */
@media(max-height:820px) and (min-width:901px){
  .animated-chart-block.with-readings .interactive-chart-shell,
  .animated-chart-block:not(.with-readings) .interactive-chart-shell{
    width:100%;
  }

  .animated-chart-block:not(.with-readings) .interactive-chart{
    width:min(
      100%,
      1180px,
      calc((100dvh - 230px) * 16 / 9)
    );
  }
}

@media(max-height:700px) and (min-width:901px){
  .animated-chart-block.with-readings .interactive-chart-shell,
  .animated-chart-block:not(.with-readings) .interactive-chart-shell{
    width:100%;
  }

  .animated-chart-block:not(.with-readings) .interactive-chart{
    width:min(
      100%,
      1050px,
      calc((100dvh - 205px) * 16 / 9)
    );
  }
}

/* Mobile/tablet: still fill the same page width. */
@media(max-width:900px){
  .animated-chart-block .interactive-chart-shell,
  .animated-chart-block.with-readings .interactive-chart-shell,
  .animated-chart-block:not(.with-readings) .interactive-chart-shell{
    width:100%;
  }
}


/* ============================================================
   V3.18 — FULL-WIDTH BOX + VIEWPORT-FIT COMPLETE CHART
   Keep the box as wide as the Market Liquidity Index panel,
   but fit title + toolbar + legend + full x-axis inside screen.
   ============================================================ */

/* Outer chart panel remains exactly full-width. */
.animated-chart-block,
.animated-chart-block .interactive-chart-shell,
.animated-chart-block.with-readings .interactive-chart-shell,
.animated-chart-block:not(.with-readings) .interactive-chart-shell{
  width:100%;
  max-width:none;
}

/*
The actual chart canvas is height-driven, not width-driven.
This prevents the chart from becoming too tall on wide monitors.

The SVG itself still has viewBox 1200x675 with
preserveAspectRatio="xMidYMid meet", so it is NEVER stretched.
*/
.animated-chart-block .interactive-chart{
  width:100%;
  height:clamp(360px,calc(100dvh - 315px),610px);
  aspect-ratio:auto;
  margin:0 auto;
}

/* First chart has Current Readings on the right. Keep that sidebar inside
   the same viewport-height budget. */
.animated-chart-block.with-readings .interactive-chart-layout{
  align-items:stretch;
}
.animated-chart-block.with-readings .current-readings-side{
  max-height:clamp(360px,calc(100dvh - 315px),610px);
  overflow:auto;
}

/* Compact title/toolbar slightly so the entire card is easier to view at once. */
.chart-box-heading{
  padding:10px 14px 8px;
}
.chart-box-heading h2{
  font-size:20px;
}
.chart-box-heading p{
  margin-top:3px;
  font-size:9px;
}
.animated-chart-block .interactive-chart-toolbar{
  min-height:36px;
  padding:6px 12px;
}

/* Short laptop windows: use a smaller chart height. */
@media(max-height:820px) and (min-width:901px){
  .animated-chart-block .interactive-chart{
    height:clamp(330px,calc(100dvh - 285px),540px);
  }
  .animated-chart-block.with-readings .current-readings-side{
    max-height:clamp(330px,calc(100dvh - 285px),540px);
  }
}

/* Very short browser windows: prioritize seeing the entire chart card. */
@media(max-height:700px) and (min-width:901px){
  .animated-chart-block .interactive-chart{
    height:clamp(280px,calc(100dvh - 250px),450px);
  }
  .animated-chart-block.with-readings .current-readings-side{
    max-height:clamp(280px,calc(100dvh - 250px),450px);
  }
}

/* Tablet/mobile: use a more natural width-driven chart again. */
@media(max-width:900px){
  .animated-chart-block .interactive-chart{
    width:100%;
    height:auto;
    aspect-ratio:16 / 9;
  }
  .animated-chart-block.with-readings .current-readings-side{
    max-height:none;
    overflow:visible;
  }
}


/* ============================================================
   V3.19 — CURRENT READINGS ON EVERY CHART + SERIES-COLOR LOGIC
   ============================================================ */

/* Every chart now has the same right-side Current Readings column. */
.animated-chart-block.with-readings .interactive-chart-layout{
  grid-template-columns:minmax(0,1fr) 250px;
}

/* Use matching chart-series colors when a metric corresponds to a plotted line. */
.metrics-side-grid .metric{
  position:relative;
  overflow:hidden;
}

.metrics-side-grid .metric::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:transparent;
}

.metrics-side-grid .metric strong{
  transition:color .15s ease;
}

/* Series 1 = cyan / Weighted FCI */
.metrics-side-grid .metric.metric-series-1::before{background:var(--cyan)}
.metrics-side-grid .metric.metric-series-1 strong{color:var(--cyan)}

/* Series 2 = white / S&P 500 */
.metrics-side-grid .metric.metric-series-2::before{background:var(--text)}
.metrics-side-grid .metric.metric-series-2 strong{color:var(--text)}

/* Series 3 = purple / NASDAQ */
.metrics-side-grid .metric.metric-series-3::before{background:#9A7CF8}
.metrics-side-grid .metric.metric-series-3 strong{color:#9A7CF8}

/* Additional plotted series */
.metrics-side-grid .metric.metric-series-4::before{background:var(--brass)}
.metrics-side-grid .metric.metric-series-4 strong{color:var(--brass)}

.metrics-side-grid .metric.metric-series-5::before{background:var(--green)}
.metrics-side-grid .metric.metric-series-5 strong{color:var(--green)}

/* Logical colors for metrics without a corresponding chart line. */
.metrics-side-grid .metric.metric-logical-green::before{background:var(--green)}
.metrics-side-grid .metric.metric-logical-green strong{color:var(--green)}

.metrics-side-grid .metric.metric-logical-gold::before{background:var(--brass)}
.metrics-side-grid .metric.metric-logical-gold strong{color:var(--brass)}

.metrics-side-grid .metric.metric-logical-red::before{background:var(--red)}
.metrics-side-grid .metric.metric-logical-red strong{color:var(--red)}

.metrics-side-grid .metric.metric-logical-neutral::before{background:var(--neutral)}
.metrics-side-grid .metric.metric-logical-neutral strong{color:var(--text)}

/* Keep the sidebar compact on every chart. */
.animated-chart-block.with-readings .current-readings-side{
  padding:13px;
  gap:9px;
}
.animated-chart-block.with-readings .metrics-side-grid{
  gap:8px;
}
.animated-chart-block.with-readings .metric{
  padding:10px 12px 10px 14px;
}

/* Short displays retain the same responsive sidebar behavior. */
@media(max-height:820px) and (min-width:901px){
  .animated-chart-block.with-readings .interactive-chart-layout{
    grid-template-columns:minmax(0,1fr) 235px;
  }
}

@media(max-height:700px) and (min-width:901px){
  .animated-chart-block.with-readings .interactive-chart-layout{
    grid-template-columns:minmax(0,1fr) 220px;
  }
}

/* Tablet/mobile: readings move under every chart. */
@media(max-width:900px){
  .animated-chart-block.with-readings .interactive-chart-layout{
    grid-template-columns:1fr;
  }
  .animated-chart-block.with-readings .current-readings-side{
    border-left:0;
    border-top:1px solid var(--border);
  }
}




/* ============================================================
   V3.23 — HOW TO READ THIS MONITOR heading
   ============================================================ */
.how-to-read h2,
.how-to-read-title,
.read-monitor-title{
  color:var(--cyan) !important;
}


/* Static chart fallback while an interactive series bundle is being prepared. */
.static-chart-block .interactive-chart-shell { width: 100%; }
.static-monitor-chart { display: block; width: 100%; height: auto; max-height: 74vh; object-fit: contain; background: #F7F7F5; }


/* Galaxy Oscillation: chart-first layout for this descriptive BIS monitor only.
   Other monitors retain the standard universal title and signal panels. */
html.go-central-bank-chart-first .monitor-hero,
html.go-central-bank-chart-first #signalPanel {
  display: none !important;
}

/* Hidden Macro breadcrumb items must not occupy flex layout space. */
#macroCategoryLink[hidden],
#macroCategorySeparator[hidden] {
  display: none !important;
}


/* =======================================================================
   GALAXY OSCILLATION — CENTRAL BANK MONITOR READING WORKSPACE v3.27
   Two equal-width panels: stationary interactive chart / scrollable article.
   Restricted to central_bank_assets_to_gdp. No change to other monitors.
   ======================================================================= */
.go-monitor-study-layout { display: contents; }

@media (min-width: 1260px) {
  html.go-central-bank-chart-first .go-monitor-study-layout {
    display: grid;
    grid-template-columns: minmax(0,2fr) minmax(0,1fr);
    gap: clamp(16px, 1.4vw, 24px);
    align-items: stretch;
    height: clamp(420px, calc(100dvh - 215px), 740px);
    min-height: 0;
    margin-top: 22px;
    /* The chart and article remain together underneath the fixed breadcrumb. */
    position: sticky;
    top: 168px;
  }
  html.go-central-bank-chart-first .go-monitor-study-layout > #interactiveSection,
  html.go-central-bank-chart-first .go-monitor-study-layout > .read-note {
    min-width: 0;
    min-height: 0;
    height: 100%;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
  }
  html.go-central-bank-chart-first .go-monitor-study-layout > #interactiveSection[hidden] {
    display: none !important;
  }
  html.go-central-bank-chart-first .go-monitor-study-layout #interactiveCharts,
  html.go-central-bank-chart-first .go-monitor-study-layout .animated-chart-block,
  html.go-central-bank-chart-first .go-monitor-study-layout .interactive-chart-shell {
    min-width: 0;
    min-height: 0;
    width: 100% !important;
    height: 100%;
    margin: 0 !important;
    max-width: none !important;
  }
  html.go-central-bank-chart-first .go-monitor-study-layout .animated-chart-block,
  html.go-central-bank-chart-first .go-monitor-study-layout .interactive-chart-shell {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  html.go-central-bank-chart-first .go-monitor-study-layout .chart-box-heading,
  html.go-central-bank-chart-first .go-monitor-study-layout .interactive-chart-toolbar {
    flex-shrink: 0;
  }
  html.go-central-bank-chart-first .go-monitor-study-layout .chart-box-heading h2 {
    font-size: clamp(15px, 1.3vw, 20px);
  }
  html.go-central-bank-chart-first .go-monitor-study-layout .interactive-chart-toolbar {
    gap: 9px;
    flex-wrap: wrap;
    font-size: 8px;
    letter-spacing: .06em;
    padding: 8px 10px;
  }
  html.go-central-bank-chart-first .go-monitor-study-layout .interactive-chart-layout,
  html.go-central-bank-chart-first .go-monitor-study-layout .animated-chart-block.with-readings .interactive-chart-layout {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0,1fr) clamp(155px, 24%, 205px);
    align-items: stretch;
    overflow: hidden;
  }
  html.go-central-bank-chart-first .go-monitor-study-layout .interactive-chart {
    width: 100%;
    height: 100% !important;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto !important;
  }
  html.go-central-bank-chart-first .go-monitor-study-layout .current-readings-side,
  html.go-central-bank-chart-first .go-monitor-study-layout .animated-chart-block.with-readings .current-readings-side {
    min-width: 0;
    min-height: 0;
    height: 100%;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 12px;
  }
  html.go-central-bank-chart-first .go-monitor-study-layout .static-chart-block .interactive-chart-layout {
    display: block;
  }
  html.go-central-bank-chart-first .go-monitor-study-layout .static-monitor-chart {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
  }
  html.go-central-bank-chart-first .go-monitor-study-layout .read-note {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 18px;
    padding: clamp(20px, 2vw, 30px);
  }
  html.go-central-bank-chart-first .go-monitor-study-layout .read-note h2 {
    margin: 0;
    flex: 0 0 auto;
    color: var(--cyan);
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.25;
  }
  /* Only the interpretation text scrolls; the article heading remains visible. */
  html.go-central-bank-chart-first .go-monitor-study-layout #howToReadText {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 0 16px 0 0;
    font-size: 14px;
    line-height: 1.8;
    white-space: pre-line;
    color: #B4C3CF;
    scrollbar-width: thin;
    scrollbar-color: #526171 transparent;
  }
  html.go-central-bank-chart-first .go-monitor-study-layout #howToReadText:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
    border-radius: 3px;
  }
}

/* Preserve chart readability instead of forcing two tiny columns on tablets. */
@media (max-width: 1259px) {
  html.go-central-bank-chart-first .go-monitor-study-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 20px;
  }
  html.go-central-bank-chart-first .go-monitor-study-layout > #interactiveSection,
  html.go-central-bank-chart-first .go-monitor-study-layout > .read-note {
    margin: 0;
    width: 100%;
  }
  html.go-central-bank-chart-first .go-monitor-study-layout > .read-note {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  html.go-central-bank-chart-first .go-monitor-study-layout > .read-note #howToReadText {
    max-height: 55dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 12px;
  }
}

/* v3.28: central-bank desktop workspace ratio only: 2/3 chart, 1/3 article.
   Independent article scrolling and fixed breadcrumb remain unchanged. */
@media (min-width: 1260px) {
  html.go-central-bank-chart-first .go-monitor-study-layout > .read-note {
    min-width: 0;
  }
}


/* Galaxy Oscillation • Central Bank monitor v3.29
   Four latest bank readings shown IN THE SVG beside the corresponding lines.
   No sidebar, no artificial zero for missing quarters; article receives 40%.
   Other monitor layouts and readouts remain untouched. */
.go-chart-end-labels { pointer-events: none; }
.go-chart-end-labels .go-end-leader {
  fill: none;
  stroke-width: 1.4;
  stroke-dasharray: 4 4;
  opacity: .75;
  vector-effect: non-scaling-stroke;
}
.go-chart-end-labels .go-end-point {
  stroke: #111b25;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.go-chart-end-labels .go-end-reading {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  stroke: none !important;
  paint-order: normal;
}
.go-chart-end-labels .go-end-quarter {
  fill: #9CA8B4;
  font-size: 13px;
  font-weight: 500;
}
.go-chart-end-labels .chart-series-1 { stroke: var(--cyan); }
.go-chart-end-labels .chart-series-2 { stroke: var(--text); }
.go-chart-end-labels .chart-series-3 { stroke: #9A7CF8; }
.go-chart-end-labels .chart-series-4 { stroke: var(--brass, #C6A96B); }
.go-chart-end-labels .chart-series-5 { stroke: var(--green); }
.go-chart-end-labels .go-end-reading.chart-series-1 { fill: var(--cyan); }
.go-chart-end-labels .go-end-reading.chart-series-2 { fill: var(--text); }
.go-chart-end-labels .go-end-reading.chart-series-3 { fill: #9A7CF8; }
.go-chart-end-labels .go-end-reading.chart-series-4 { fill: var(--brass, #C6A96B); }
.go-chart-end-labels .go-end-reading.chart-series-5 { fill: var(--green); }
.go-chart-end-labels .go-end-point.chart-series-1 { fill: var(--cyan); }
.go-chart-end-labels .go-end-point.chart-series-2 { fill: var(--text); }
.go-chart-end-labels .go-end-point.chart-series-3 { fill: #9A7CF8; }
.go-chart-end-labels .go-end-point.chart-series-4 { fill: var(--brass, #C6A96B); }
.go-chart-end-labels .go-end-point.chart-series-5 { fill: var(--green); }

@media (min-width: 1260px) {
  html.go-central-bank-chart-first .go-monitor-study-layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
  html.go-central-bank-chart-first .go-monitor-study-layout
  .animated-chart-block.with-end-labels .interactive-chart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    flex: 1;
    min-width: 0;
    min-height: 0;
  }
  html.go-central-bank-chart-first .go-monitor-study-layout
  .animated-chart-block.with-end-labels .interactive-chart {
    width: 100%;
    height: 100% !important;
    max-width: none;
    min-width: 0;
    min-height: 0;
    aspect-ratio: auto !important;
  }
}
@media (max-width: 1259px) {
  html.go-central-bank-chart-first .animated-chart-block.with-end-labels
  .interactive-chart-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The original monitor stylesheet named the fourth series --gold, but its
   palette defines --brass. Keep BoJ visible in the same gold as the legend. */
.chart-line.chart-series-4 { stroke: var(--brass, #C6A96B); }
.chart-hover-dot.chart-series-4 { fill: var(--brass, #C6A96B); }


/* Galaxy Oscillation — Central Bank monitor v3.30
   Identical chart/article desktop width; numeric-only colored end labels;
   legible regular-weight axis ticks; Online-green hover affordance.
   All selectors are scoped to this monitor so other universal monitor
   layouts stay untouched. */
@media (min-width: 1260px) {
  html.go-central-bank-chart-first .go-monitor-study-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* The SVG's native viewBox is 1200 wide and scales down to its panel.
   17 SVG units appear roughly 11–12 screen px in a half-width desktop
   chart, similar to the toolbar's information line, without bold text. */
html.go-central-bank-chart-first .go-monitor-study-layout
  .interactive-chart .chart-axis-label {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  fill: #9CA8B4;
}

/* One compact numeric value beside each end point; legend remains
   available to identify the bank, hover retains the actual quarter. */
html.go-central-bank-chart-first
  .go-chart-end-labels .go-end-reading {
  font-size: 19px;
  font-weight: 700;
}

/* Identical green used by the site header's ONLINE status. */
html.go-central-bank-chart-first .go-monitor-study-layout
  .interactive-chart-toolbar > span:last-child {
  color: #2BCB7F;
}

/* V3.31 — Source/credit inside the Central Bank chart box.
   The chart stays in place; only the article scrolls independently.
   The credit is a separate, non-overlay row below the plot. */
html.go-central-bank-chart-first .go-chart-source-credit {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 9px 15px 10px;
  border-top: 1px solid rgba(150, 169, 185, .18);
  background: rgba(8, 15, 23, .74);
  color: #9CA8B4;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  overflow-wrap: break-word;
}
@media (max-width: 760px) {
  html.go-central-bank-chart-first .go-chart-source-credit {
    padding: 10px 12px;
    font-size: 10px;
  }
}


/* ================================================================
   Galaxy Oscillation v3.32 — dated research archive, central bank only.
   Keep heading visible; scroll the article list independently of the chart.
   ================================================================ */
html.go-central-bank-chart-first .go-monitor-study-layout .read-note:has(.go-article-archive:not([hidden])) {
  gap: 16px;
}
html.go-central-bank-chart-first .go-monitor-study-layout .read-note > #howToReadText[hidden] {
  display: none !important;
}
.go-article-archive[hidden], .go-article-body[hidden] { display: none !important; }
html.go-central-bank-chart-first .go-article-archive {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}
html.go-central-bank-chart-first .go-article-archive-list {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #526171 transparent;
  padding-right: 8px;
}
html.go-central-bank-chart-first .go-article-item {
  padding: 18px 0 21px;
  border-bottom: 1px solid rgba(147,162,177,.27);
}
html.go-central-bank-chart-first .go-article-item:first-child { padding-top: 0; }
html.go-central-bank-chart-first .go-article-item:last-child { border-bottom: 0; }
html.go-central-bank-chart-first .go-article-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
html.go-central-bank-chart-first .go-article-date {
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  color: #4EC8F4;
  font: 700 13px/1.4 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing: .07em;
  cursor: pointer;
  text-align: left;
}
html.go-central-bank-chart-first .go-article-date:hover { color: #A7E9FF; }
html.go-central-bank-chart-first .go-article-toggle {
  flex: 0 0 auto;
  border: 1px solid rgba(78,200,244,.4);
  background: rgba(67,199,243,.06);
  color: var(--cyan);
  border-radius: 6px;
  width: 30px;
  height: 30px;
  padding: 0;
  font: 500 23px/1 Arial,sans-serif;
  cursor: pointer;
  display: grid;
  place-items: center;
}
html.go-central-bank-chart-first .go-article-toggle:hover {
  color: #E3F8FF;
  border-color: #75D5F7;
  background: rgba(67,199,243,.13);
}
html.go-central-bank-chart-first .go-article-date:focus-visible,
html.go-central-bank-chart-first .go-article-toggle:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}
html.go-central-bank-chart-first .go-article-title {
  margin: 6px 0 0;
  color: #EDF3F7;
  font-size: clamp(15px,1.3vw,18px);
  font-weight: 650;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
html.go-central-bank-chart-first .go-article-item.is-open .go-article-title {
  margin-bottom: 16px;
}
html.go-central-bank-chart-first .go-article-body {
  color: #B4C3CF;
  font-size: 14px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
html.go-central-bank-chart-first .go-article-body p { margin: 0 0 15px; }
html.go-central-bank-chart-first .go-article-body p:last-child { margin-bottom: 0; }
html.go-central-bank-chart-first .go-article-body h4 {
  font-size: 15px;
  line-height: 1.5;
  color: #EBF2F7;
  margin: 16px 0 7px;
  font-weight: 650;
}
@media (max-width: 1259px) {
  html.go-central-bank-chart-first .go-article-archive {
    flex: 0 1 auto;
    overflow: visible;
  }
  html.go-central-bank-chart-first .go-article-archive-list {
    height: auto;
    max-height: 55dvh;
    overflow-y: auto;
  }
}


/* ================================================================
   Galaxy Oscillation v3.33 — one-line article/date headings & readability.
   Applies ONLY to the Central Bank monitor. Charts and other pages unchanged.
   ================================================================ */
html.go-central-bank-chart-first .go-article-topline {
  display: grid;
  grid-template-columns: max-content minmax(0,1fr) 32px;
  align-items: center;
  column-gap: clamp(12px, 1.5vw, 22px);
  width: 100%;
  min-width: 0;
}
html.go-central-bank-chart-first .go-article-topline .go-article-title {
  margin: 0;
  min-width: 0;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.4;
  font-weight: 650;
  overflow-wrap: break-word;
}
html.go-central-bank-chart-first .go-article-item.is-open .go-article-topline .go-article-title {
  margin: 0;
}
html.go-central-bank-chart-first .go-article-item.is-open .go-article-body {
  margin-top: 17px;
}
html.go-central-bank-chart-first .go-article-body {
  font-size: 16px;
  line-height: 1.76;
  color: #B9C9D5;
}
html.go-central-bank-chart-first .go-article-body h4 {
  font-size: 16px;
}
html.go-central-bank-chart-first .go-article-body .go-article-byline {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 550;
  color: #8EACBF;
  margin: 0 0 14px;
}
@media (max-width: 720px) {
  html.go-central-bank-chart-first .go-article-topline {
    grid-template-columns: max-content minmax(0,1fr) 30px;
    column-gap: 9px;
  }
  html.go-central-bank-chart-first .go-article-topline .go-article-date {
    font-size: 11px;
    letter-spacing: .025em;
  }
  html.go-central-bank-chart-first .go-article-topline .go-article-title {
    font-size: 14px;
  }
  html.go-central-bank-chart-first .go-article-body { font-size: 15.5px; }
}


/* ================================================================
   Galaxy Oscillation v3.34 — article text readability.
   Explicitly scoped to the Central Bank monitor. Preserve compact
   breadcrumb (12px), article dates, archive sorting and chart layout.
   ================================================================ */
html.go-central-bank-chart-first .go-article-body {
  font-size: 18px;
  line-height: 1.7;
}
html.go-central-bank-chart-first .go-article-body h4 {
  font-size: 18px;
  line-height: 1.45;
}
/* Keep the byline visually secondary to the body text. */
html.go-central-bank-chart-first .go-article-body .go-article-byline {
  font-size: 13px;
}
@media (max-width: 720px) {
  html.go-central-bank-chart-first .go-article-body {
    font-size: 17px;
    line-height: 1.7;
  }
  html.go-central-bank-chart-first .go-article-body h4 {
    font-size: 17px;
  }
}


/* ================================================================
   Galaxy Oscillation v3.36 — balanced, readable article typography.
   Explicitly override the older .read-note p rule (12px) while
   avoiding the oversized 20px style from v3.35.
   ================================================================ */
html.go-central-bank-chart-first .go-article-body {
  font-size: 16px;
  line-height: 1.65;
  color: #C9D5DF;
}
html.go-central-bank-chart-first .go-monitor-study-layout .read-note .go-article-body p {
  font-size: 16px;
  line-height: 1.65;
  color: #C9D5DF;
  font-weight: 400;
  margin: 0 0 16px;
}
html.go-central-bank-chart-first .go-article-body h4 {
  font-size: 17px;
  line-height: 1.45;
}
html.go-central-bank-chart-first .go-monitor-study-layout .read-note .go-article-body p.go-article-byline {
  font-size: 13px;
  line-height: 1.5;
  color: #A5BECE;
  margin-bottom: 16px;
  font-weight: 550;
}
@media (max-width: 720px) {
  html.go-central-bank-chart-first .go-article-body,
  html.go-central-bank-chart-first .go-monitor-study-layout .read-note .go-article-body p {
    font-size: 15px;
    line-height: 1.6;
  }
  html.go-central-bank-chart-first .go-article-body h4 {
    font-size: 16px;
  }
}


/* ===================================================================
   Galaxy Oscillation v3.37 — editorial serif typography & aligned heading
   Central Bank article archive only. Keep chart, navigation, byline,
   date labels, and interactive controls unchanged.
   Georgia is a Windows/macOS standard font; works without web requests.
   =================================================================== */
/* Align the bottom of “Articles” with the left chart title baseline.
   The chart uses a 10px top inset; the older archive had ~30px. */
@media (min-width: 1260px) {
  html.go-central-bank-chart-first .go-monitor-study-layout > .read-note:has(.go-article-archive:not([hidden])) {
    padding-top: 12px;
  }
}
html.go-central-bank-chart-first .go-monitor-study-layout .read-note:has(.go-article-archive:not([hidden])) > #howToReadHeading {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 730;
  letter-spacing: -.018em;
  text-transform: none;
}
/* Reference image: classic, high-contrast newspaper display serif. */
html.go-central-bank-chart-first .go-article-topline .go-article-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.012em;
}
/* Reference image: readable newspaper body serif (16px, not 20px).
   Specific paragraph selector overrides legacy .read-note p rule. */
html.go-central-bank-chart-first .go-article-body,
html.go-central-bank-chart-first .go-monitor-study-layout .read-note .go-article-body p:not(.go-article-byline) {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
}
html.go-central-bank-chart-first .go-article-body h4 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 700;
}
/* Preserve existing sanserif corporate bylines and date labels. */
html.go-central-bank-chart-first .go-monitor-study-layout .read-note .go-article-body p.go-article-byline {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}
@media (max-width: 720px) {
  html.go-central-bank-chart-first .go-article-topline .go-article-title { font-size: 16px; }
  html.go-central-bank-chart-first .go-article-body,
  html.go-central-bank-chart-first .go-monitor-study-layout .read-note .go-article-body p:not(.go-article-byline) {
    font-size: 15px;
    line-height: 1.65;
  }
}


/* =============================================================
   v3.38 — Long-form article typography, citation links and sourcing
   Scoped to central-bank research; no chart or layout modifications.
   ============================================================= */
html.go-central-bank-chart-first .go-article-body h4.go-article-subtitle {
  font: italic 400 16px/1.5 Georgia, "Times New Roman", serif;
  color: #B9D6E5;
  margin: 2px 0 17px;
}
html.go-central-bank-chart-first .go-monitor-study-layout .read-note .go-article-body p.go-article-source-date {
  font: 400 12px/1.45 Inter, "Segoe UI", Arial, sans-serif;
  color: #91A9B9;
  margin: -7px 0 18px;
}
html.go-central-bank-chart-first .go-article-body .go-article-references-heading {
  margin-top: 26px;
  border-top: 1px solid rgba(147,162,177,.25);
  padding-top: 20px;
  font-weight: 700;
  font-size: 17px;
}
html.go-central-bank-chart-first .go-article-references {
  color: #B9C9D5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.6;
  padding-left: 22px;
  margin: 9px 0 20px;
}
html.go-central-bank-chart-first .go-article-references li {
  margin: 0 0 18px;
  padding-left: 2px;
  overflow-wrap: anywhere;
}
html.go-central-bank-chart-first .go-article-references a {
  color: #6BD1F2;
  display: block;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  overflow-wrap: anywhere;
  text-decoration: underline;
  margin-top: 3px;
}
html.go-central-bank-chart-first .go-monitor-study-layout .read-note .go-article-body p.go-article-publication-note {
  border-top: 1px solid rgba(147,162,177,.25);
  padding-top: 15px;
  color: #9CADBB;
  font: 400 12px/1.6 Inter, "Segoe UI", Arial, sans-serif;
}
@media (max-width: 720px) {
  html.go-central-bank-chart-first .go-article-body h4.go-article-subtitle {font-size: 15px;}
  html.go-central-bank-chart-first .go-article-references {font-size: 13px;}
}


/* ================================================================
   Galaxy Oscillation v3.39 — persistent article bar and visible bibliography.
   While an article's text scrolls, its date, title and +/- button stay at the
   top of the reading area. This is scoped ONLY to the central-bank monitor.
   The archive's title (Articles) stays outside the scrolling element.
   ================================================================ */
html.go-central-bank-chart-first .go-article-item.is-open > .go-article-topline {
  position: sticky;
  top: 0;
  z-index: 12;
  background: #111923;
  border-bottom: 1px solid rgba(147,162,177,.24);
  padding: 9px 0 11px;
  box-shadow: 0 8px 16px -12px rgba(0,0,0,.9);
}
html.go-central-bank-chart-first .go-article-topline .go-article-title {
  min-width: 0;
}
html.go-central-bank-chart-first .go-article-references-jump {
  display: inline-flex;
  align-items: center;
  width: auto;
  padding: 0;
  margin: -5px 0 18px;
  border: 0;
  background: transparent;
  color: #67D1F4;
  font: 600 13px/1.5 Inter, "Segoe UI", Arial, sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
html.go-central-bank-chart-first .go-article-references-jump:hover {
  color: #B2EFFF;
}
html.go-central-bank-chart-first .go-article-references-jump:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}
html.go-central-bank-chart-first .go-article-references-heading {
  scroll-margin-top: 68px;
}


/* ==============================================================
   Galaxy Oscillation v3.40 — stable article header geometry.
   Open and closed states share EXACTLY the same grid, border,
   padding and line-height. The expanded header remains sticky.
   Reserve the scrollbar gutter, even while collapsed, so article
   title and +/- do not shift left or right on expansion.
   =============================================================== */
html.go-central-bank-chart-first .go-article-archive-list {
  scrollbar-gutter: stable;
}
html.go-central-bank-chart-first .go-article-topline,
html.go-central-bank-chart-first .go-article-item.is-open > .go-article-topline {
  box-sizing: border-box;
  padding: 9px 0 11px;
  border-bottom: 1px solid transparent;
  min-height: 51px;
  align-items: center;
  background: #111923;
}
html.go-central-bank-chart-first .go-article-item.is-open > .go-article-topline {
  position: sticky;
  top: 0;
  z-index: 12;
  border-bottom-color: rgba(147,162,177,.24);
  box-shadow: 0 8px 16px -12px rgba(0,0,0,.9);
}
/* Keep all article text, but remove the unused v3.39 jump-link styling. */

/* Stage 1: non-blocking notice when the protected Worker API is unavailable. */
.chart-api-warning{margin:12px auto 0;width:min(96vw,1600px);padding:9px 13px;border:1px solid rgba(198,169,107,.32);border-radius:8px;background:rgba(198,169,107,.07);color:var(--muted);font-size:11px}


/* =====================================================================
   Galaxy Oscillation v3.43 — maximize reading area, one-line attribution.
   Central Bank archive only; no changes to other monitors or the chart.
   ===================================================================== */
html.go-central-bank-chart-first .go-monitor-study-layout .read-note > #howToReadHeading[hidden] {
  display: none !important;
}
html.go-central-bank-chart-first .go-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 16px;
  row-gap: 3px;
  min-width: 0;
  margin: 0 0 19px;
}
html.go-central-bank-chart-first .go-monitor-study-layout .read-note .go-article-body .go-article-meta > p.go-article-byline,
html.go-central-bank-chart-first .go-monitor-study-layout .read-note .go-article-body .go-article-meta > p.go-article-source-date {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
/* At phone widths, keep both metadata labels together without reducing
   the legibility of the actual research paragraphs. */
@media (max-width: 720px) {
  html.go-central-bank-chart-first .go-article-meta {
    flex-wrap: nowrap;
    column-gap: 6px;
  }
  html.go-central-bank-chart-first .go-monitor-study-layout .read-note .go-article-body .go-article-meta > p.go-article-byline,
  html.go-central-bank-chart-first .go-monitor-study-layout .read-note .go-article-body .go-article-meta > p.go-article-source-date {
    font-size: 11px;
    line-height: 1.5;
  }
}
@media (max-width: 360px) {
  html.go-central-bank-chart-first .go-article-meta { flex-wrap: wrap; }
}


.chart-tooltip-value.chart-series-1{color:var(--cyan)}
.chart-tooltip-value.chart-series-2{color:var(--text)}
.chart-tooltip-value.chart-series-3{color:#9A7CF8}
.chart-tooltip-value.chart-series-4{color:var(--brass)}
.chart-tooltip-value.is-na{opacity:.65;font-weight:600}


/* ===========================================================================
   Galaxy Oscillation v3.45 — single-line Central Bank chart heading.
   On desktop the article date/title divider shares the exact same vertical
   position as the chart title divider, including its expanded/sticky state.
   Leave other monitors and stacked tablet/mobile layouts unchanged.
   =========================================================================== */
@media (min-width: 1260px) {
  html.go-central-bank-chart-first .go-monitor-study-layout .chart-box-heading {
    box-sizing: border-box;
    height: 44px;
    min-height: 44px;
    padding: 0 14px;
    align-items: center;
  }
  html.go-central-bank-chart-first .go-monitor-study-layout > .read-note:has(.go-article-archive:not([hidden])) {
    padding-top: 0;
  }
  html.go-central-bank-chart-first .go-article-topline,
  html.go-central-bank-chart-first .go-article-item.is-open > .go-article-topline {
    height: 44px;
    min-height: 44px;
    padding: 8px 0 9px;
    align-items: center;
  }
}


/* GO Social Sharing v1.0: unobtrusive footer actions, outside chart plot. */
.go-share-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;padding:8px 15px;border-top:1px solid rgba(150,169,185,.18);background:rgba(8,15,23,.86);flex-shrink:0;min-height:38px;box-sizing:border-box}
.go-share-buttons{display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.go-share-action{display:inline-flex;align-items:center;justify-content:center;border:1px solid #41505E;border-radius:5px;background:transparent;color:#D9E7EE!important;font:700 10px/1.25 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:.01em;text-decoration:none!important;padding:7px 10px;cursor:pointer;transition:background .15s,border-color .15s}
.go-share-action:hover,.go-share-action:focus-visible{background:rgba(76,201,232,.11);border-color:#4CC9E8;color:#FFFFFF!important}
.go-share-action:disabled{opacity:.5;cursor:wait}
.go-share-status{font:500 10px/1.4 Inter,"Segoe UI",Arial,sans-serif;color:#A3BAC7}
@media(max-width:760px){.go-share-bar{padding:10px 12px}.go-share-action{font-size:10px}}