.monex-advanced-chart,
.monex-advanced-chart * { box-sizing: border-box; }
.monex-advanced-chart { --navy:#12314d; --blue:#3d839f; --border:#d4e2e9; --muted:#687e8e; width:100%; max-width:100%; box-sizing:border-box; container-type:inline-size; container-name:monex-advanced-chart; margin:0 auto; color:var(--navy); font-family:"Open Sans",Arial,sans-serif;
  /* Element default container — FINAL (recorded): app padding + flat
     #ffffff. The decorative Blue Card style belongs to the inner chart
     card/frame via the blue="true" modifier, not this container. */
  padding: clamp(22px, 3.4vw, 46px);
  background: #ffffff;
}
.monex-advanced-chart button { appearance:none; border:0; background:none; color:inherit; font:inherit; cursor:pointer; }
.monex-advanced-chart__topbar { display:flex; align-items:stretch; flex-direction:column; gap:22px; margin-bottom:20px; }
.monex-advanced-chart__intro { max-width:980px; }
.monex-advanced-chart__intro p {padding:0px 0px 10px 0px;max-width:100% !important;}

.single-knowledge  .bde-rich-text .monex-advanced-chart__intro p {padding:0px 0px 10px 0px !important;}

/*
 * Phase 2i — typography reads from CSS custom properties with the previous
 * hard-coded values as fallbacks. !important removed from typography
 * declarations so Breakdance native typography presets (Design tab) can
 * override via natural cascade — the Element wrapper class raises specificity
 * enough to win. CSS custom-property fallbacks preserved for standalone
 * shortcode callers who set title_color / title_font_size / etc. attributes.
 * !important remains on non-typography rules in this file (peak toggle, PDF
 * button, layout) where it still legitimately fights theme resets.
 */
.monex-advanced-chart .monex-advanced-chart__intro h2 { margin:0; color:var(--monex-title-color, #161b2a); font-family:var(--monex-title-font-family, inherit); font-size:var(--monex-title-font-size, clamp(2rem,3.2vw,2.9rem)); letter-spacing:-0.04em; 
  font-weight:var(--monex-title-font-weight, 600)!important; line-height:1.12; letter-spacing:-.025em; text-transform:none; }
.monex-advanced-chart.monex-advanced-chart--bold-title .monex-advanced-chart__intro h2 { font-weight:var(--monex-title-font-weight, 800); }
.monex-advanced-chart .monex-advanced-chart__intro p { margin:10px 0 0; color:var(--monex-description-color, #43474d); font-family:var(--monex-description-font-family, inherit); font-size:var(--monex-description-font-size, 1.1rem); font-weight:var(--monex-description-font-weight, 400); line-height:1.65; }
.monex-advanced-chart__controls { display:flex; width:100%; min-width:0; justify-content:space-between; align-items:center; gap:18px; }
.monex-advanced-chart__ranges,.monex-advanced-chart__modes,.monex-advanced-chart__averages,.monex-advanced-chart__intervals { display:inline-flex; min-width:0; min-height:0; gap:6px; padding:5px; border:1px solid rgba(63,122,150,.18); border-radius:12px; background:rgba(255,255,255,.72); box-shadow:0 10px 26px rgba(41,69,96,.07); }
.monex-advanced-chart__ranges button,.monex-advanced-chart__modes button,.monex-advanced-chart__averages button,.monex-advanced-chart__intervals button { min-width:58px; height:40px; padding:0 16px; border-radius:8px; color:#536777; font-size:13.44px; font-weight:700; line-height:1; white-space:nowrap; transition:.16s ease; }
.monex-advanced-chart__averages button { min-width:74px; }
.monex-advanced-chart__ranges button:hover,.monex-advanced-chart__modes button:hover,.monex-advanced-chart__averages button:hover,.monex-advanced-chart__intervals button:hover { background:#edf5f8; color:var(--navy); }
.monex-advanced-chart__ranges button.is-active,.monex-advanced-chart__modes button.is-active,.monex-advanced-chart__averages button.is-active,.monex-advanced-chart__intervals button.is-active { background:#3f7a96; color:#fff; box-shadow:0 7px 16px rgba(63,122,150,.22); }
.monex-advanced-chart__pdf { display:grid; min-width:48px!important; place-items:center; }
.monex-advanced-chart__pdf svg { width:25px; height:25px; }
.monex-advanced-chart__pdf:disabled { cursor:not-allowed; opacity:.42; }
.monex-advanced-chart__peak-toggle { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 18px!important; border:1px solid rgba(63,122,150,.18)!important; border-radius:12px; background:rgba(255,255,255,.72)!important; box-shadow:0 10px 26px rgba(41,69,96,.07); color:#536777!important; font-size:13.44px!important; font-weight:700!important; }
.monex-advanced-chart__peak-toggle span { position:relative; width:34px; height:19px; border-radius:10px; background:#c9d5dc; transition:.16s; }
.monex-advanced-chart__peak-toggle span:after { position:absolute; top:3px; left:3px; display:block; width:13px; height:13px; border-radius:50%; background:#fff; content:""; box-shadow:0 1px 4px rgba(41,69,96,.28); transition:.16s; }
.monex-advanced-chart__peak-toggle.is-active span { background:var(--blue); }
.monex-advanced-chart__peak-toggle.is-active { color:#294560!important; }
.monex-advanced-chart__peak-toggle.is-active span:after { transform:translateX(15px); }

/* Compare (Dow / S&P) cluster — mirrors the base-chart .monex-charts__comparisons pill row visually while using the advanced-chart control shell (border, background, shadow) so it sits flush with the other clusters. */
.monex-advanced-chart__comparisons { display:inline-flex; align-items:center; min-width:0; min-height:0; gap:5px; padding:5px; border:1px solid rgba(63,122,150,.18); border-radius:12px; background:rgba(255,255,255,.72); box-shadow:0 10px 26px rgba(41,69,96,.07); }
.monex-advanced-chart__comparisons-label { padding:0 7px 0 6px; color:#6b7f8e; font-size:11.52px; font-weight:700; letter-spacing:.06em; line-height:1; text-transform:uppercase; white-space:nowrap; }
.monex-advanced-chart__comparisons button { display:inline-flex; align-items:center; justify-content:center; min-width:82px; height:36px; padding:0 13px; border:0; border-radius:8px; background:transparent; color:#536777; font:inherit; font-size:12.8px; font-weight:700; line-height:1; white-space:nowrap; cursor:pointer; transition:color 160ms ease,background 160ms ease,box-shadow 160ms ease; }
.monex-advanced-chart__comparisons button:hover:not(:disabled) { color:#294560; background:rgba(126,166,185,.12); }
.monex-advanced-chart__comparisons button.is-active { color:#fff; background:#3f7a96; box-shadow:0 7px 16px rgba(63,122,150,.22); }
.monex-advanced-chart__comparisons button:focus-visible { outline:3px solid rgba(63,122,150,.25); outline-offset:2px; }
.monex-advanced-chart__comparison-swatch { display:inline-block; flex:0 0 auto; width:12px; height:4px; margin-right:8px; border-radius:2px; vertical-align:middle; }
.monex-advanced-chart__comparison-loading[hidden] { display:none; }
.monex-advanced-chart__comparison-loading { display:inline-block; width:10px; height:10px; margin-left:8px; border-radius:50%; border:2px solid rgba(63,122,150,.4); border-top-color:transparent; animation:monex-advanced-chart-spin 720ms linear infinite; }
@keyframes monex-advanced-chart-spin { to { transform:rotate(360deg); } }

.monex-advanced-chart__card { padding:12px 12px 18px; overflow:visible; border-radius:10px; background:#fbfcff; box-shadow:0 26px 54px rgba(151,147,184,.10),inset 0 1px 0 rgba(255,255,255,.72); }

/*
 * Phase 2h — Blue Card Style, universal variant. Applied via root modifier
 * class .monex-advanced-chart--blue set by shortcode attribute blue="true"
 * or Breakdance's Card Style > Blue Card Style toggle. Replaces the earlier
 * SSR-wrapper approach; no extra wrapper div in the DOM. Only background +
 * border differ from default; padding, radius, overflow, and box-shadow
 * inherit unchanged from the .monex-advanced-chart__card rule above.
 */
.monex-advanced-chart--blue .monex-advanced-chart__card {
  background: radial-gradient(circle at 78% 12%, #7ea6b929, #0000 34%), linear-gradient(145deg, #f7f9ff 0%, #eef2fb 100%);
  border: 1px solid #3f7a9629;
}
.monex-advanced-chart__frame { position:relative; min-height:420px; overflow:visible; border-radius:24px; }
.monex-advanced-chart__state { display:grid; min-height:400px; place-items:center; color:var(--muted); font-size:15px; font-weight:700; }
.monex-advanced-chart__state[hidden] { display:none; }
.monex-advanced-chart__plot { position:relative; width:100%; min-height:400px; padding:58px 14px 0; outline:none; touch-action:pan-y; user-select:none; }
.monex-advanced-chart__plot svg { position:relative; z-index:2; display:block; width:100%; height:auto; overflow:visible; }
.monex-advanced-chart__grid line { stroke:#cfdee5; stroke-width:1; vector-effect:non-scaling-stroke; }
.monex-advanced-chart__grid text { fill:#657d8f; font-size:13px; font-weight:700; }
.monex-advanced-chart__border {    fill: #ffffff42 !important;stroke:#bfd4de; stroke-width:1.2; vector-effect:non-scaling-stroke; }
.monex-advanced-chart__area { stroke:none; }
.monex-advanced-chart__price-line { fill:none; stroke:#a97b16; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.monex-advanced-chart__sma-line { fill:none; stroke:#3d839f; stroke-width:2.5; stroke-dasharray:8 6; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.monex-advanced-chart__current-guide { stroke:rgba(63,122,150,.42); stroke-width:1; stroke-dasharray:6 7; vector-effect:non-scaling-stroke; }
.monex-advanced-chart__guide { stroke:#7895a8; stroke-width:1.2; stroke-dasharray:4 5; vector-effect:non-scaling-stroke; }
.monex-advanced-chart__dot { fill:var(--navy); stroke:#fff; stroke-width:4; vector-effect:non-scaling-stroke; filter:drop-shadow(0 3px 5px rgba(18,49,77,.28)); }
.monex-advanced-chart__watermark { position:absolute; z-index:1; top:50%; left:50%; width:min(125px,16%); max-height:125px; object-fit:contain; opacity:.065; transform:translate(-50%,-46%); pointer-events:none; }
.monex-advanced-chart__tooltip { position:absolute; z-index:8; display:grid; gap:3px; min-width:132px; padding:10px 12px; border:1px solid rgba(41,69,96,.12); border-radius:6px; background:rgba(255,255,255,.96); color:var(--navy); box-shadow:0 12px 26px rgba(16,47,73,.16); backdrop-filter:blur(10px); pointer-events:none; }
.monex-advanced-chart__tooltip[hidden] { display:none; }
.monex-advanced-chart__tooltip small { color:#72818c; font-size:11.52px; font-weight:600; white-space:nowrap; }
.monex-advanced-chart__tooltip strong { color:#102f49; font-size:16px; line-height:1.25; white-space:nowrap; }
.monex-advanced-chart__sma-legend { position:absolute; z-index:6; top:16px; right:16px; display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid rgba(41,69,96,.12); border-radius:5px; color:#294560; background:rgba(255,255,255,.88); box-shadow:0 5px 15px rgba(16,47,73,.08); font-size:12px; font-weight:700; pointer-events:none; }
.monex-advanced-chart__sma-legend span { width:22px; height:0; border-top:2px dashed #a47d22; }
.monex-advanced-chart__tooltip .monex-advanced-chart__tooltip-sma { color:#8a6d1f; font-size:11.52px; font-weight:700; white-space:nowrap; }
.monex-advanced-chart__tooltip span { display:flex; align-items:center; justify-content:space-between; gap:14px; color:#3f4b5a; font-size:12.5px; font-weight:600; white-space:nowrap; }
.monex-advanced-chart__tooltip span b { color:#102f49; font-weight:700; }
.monex-advanced-chart__tooltip .is-positive { color:#2e9666; }
.monex-advanced-chart__tooltip .is-negative { color:#b9544a; }
.monex-advanced-chart__tooltip .monex-advanced-chart__tooltip-comparison { justify-content:flex-start; }
.monex-advanced-chart__tooltip .monex-advanced-chart__tooltip-comparison b { margin-left:auto; }
.monex-advanced-chart__peak-marker { position:absolute; z-index:7; width:0; height:0; pointer-events:none; }
.monex-advanced-chart__peak-card { position:absolute; left:50%; bottom:8px; width:264px; padding:20px 22px 16px; border-radius:0; background:rgba(255,255,255,.90); box-shadow:0 18px 32px rgba(117,124,148,.16),0 1px 0 rgba(255,255,255,.72) inset; backdrop-filter:blur(12px); transform:translateX(-50%); }
.monex-advanced-chart__peak-card:after { position:absolute; left:50%; bottom:-12px; width:0; height:0; border-left:12px solid transparent; border-right:12px solid transparent; border-top:12px solid rgba(255,255,255,.92); content:""; transform:translateX(-50%); filter:drop-shadow(0 8px 10px rgba(117,124,148,.08)); }
.monex-advanced-chart__peak-marker.is-left .monex-advanced-chart__peak-card { transform:translateX(-12%); }
.monex-advanced-chart__peak-marker.is-left .monex-advanced-chart__peak-card:after { left:12%; }
.monex-advanced-chart__peak-marker.is-right .monex-advanced-chart__peak-card { transform:translateX(-88%); }
.monex-advanced-chart__peak-marker.is-right .monex-advanced-chart__peak-card:after { left:88%; }
.monex-advanced-chart__peak-card > span { display:block; margin-bottom:8px; color:#2f3945; font-size:12.48px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
.monex-advanced-chart__peak-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:nowrap; }
.monex-advanced-chart__peak-row strong { color:#1f2b37; font-size:19.52px; letter-spacing:-.03em; white-space:nowrap; }
.monex-advanced-chart__peak-row em { color:#61b36e; font-size:14.72px; font-style:normal; font-weight:700; white-space:nowrap; }
.monex-advanced-chart__peak-card small { display:block; margin-top:8px; color:#7d8794; font-size:12.8px; font-weight:500; }
.monex-advanced-chart__footer { display:flex; justify-content:space-between; gap:16px; padding:0 18px; color:#8d93a2; font-size:14.4px; }
.monex-charts-error { padding:13px 16px; border-left:4px solid #c65348; background:#fff4f3; color:#7c3029; }
/*
 * Phase 2g — Container-width responsive layout. Breakpoint blocks below are
 * @container queries against .monex-advanced-chart (container-type declared
 * on the root at the top of this file). A chart in a narrow Breakdance column
 * on a wide desktop viewport collapses to its compact layout based on the
 * chart's actual rendered width, not the browser viewport size. Same
 * breakpoint values as the previous @media viewport queries so behavior on
 * genuinely narrow viewports is unchanged.
 */

@container monex-advanced-chart (max-width:1000px) {
  .monex-advanced-chart__intro { max-width:none; }
  .monex-advanced-chart__controls { flex-wrap:wrap; justify-content:flex-start; }
  .monex-advanced-chart__ranges { width:100%; }
  .monex-advanced-chart__peak-toggle { margin-left:auto; }
}

/*
 * Toolbar single-row override for chart types with only three control
 * groups: Ratio, Product, Performance (ranges + modes + optional peak).
 * These render without .__averages, so :not(:has(.__averages)) singles
 * them out and leaves Moving Average — which has four groups and genuinely
 * needs the 1000 px stack point — untouched.
 *
 * Minimum required width (ranges 324 + modes 226 + peak 170 + 2×18 gaps)
 * is ~756 px. 761 px min gives a small safety margin for text-metric
 * variance, and keeps the container's own 700 px grid layout below untouched.
 */
@container monex-advanced-chart (min-width:761px) {
  .monex-advanced-chart:not(:has(.monex-advanced-chart__averages)) .monex-advanced-chart__controls {
    flex-wrap:nowrap;
  }
  .monex-advanced-chart:not(:has(.monex-advanced-chart__averages)) .monex-advanced-chart__ranges {
    width:auto;
  }
}
@container monex-advanced-chart (max-width:700px) {
  .monex-advanced-chart { margin-bottom:36px; }
  .monex-advanced-chart__controls { gap:12px; }
  .monex-advanced-chart__peak-toggle,.monex-advanced-chart__peak-marker { display:none!important; }
  .monex-advanced-chart__ranges,.monex-advanced-chart__modes,.monex-advanced-chart__averages,.monex-advanced-chart__intervals { display:grid; width:100%; height:54px; padding:5px; overflow:hidden; }
  .monex-advanced-chart__ranges--5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .monex-advanced-chart__ranges--6 { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .monex-advanced-chart__modes { grid-template-columns:1fr 1fr 44px; }
  .monex-advanced-chart__averages { grid-template-columns:repeat(3,minmax(0,1fr)) 44px; }
  .monex-advanced-chart__intervals { grid-template-columns:1fr 1fr; }
  .monex-advanced-chart__ranges button,.monex-advanced-chart__modes button,.monex-advanced-chart__averages button,.monex-advanced-chart__intervals button { display:flex; align-items:center; justify-content:center; min-width:0; height:44px; padding:0 5px; font-size:12.16px; }
  .monex-advanced-chart__card { padding:18px 8px 14px; }
  .monex-advanced-chart__frame,.monex-advanced-chart__plot { min-height:0; }
  .monex-advanced-chart__state { min-height:220px; }
  .monex-advanced-chart__plot { padding-top:44px; }
  .monex-advanced-chart__plot svg { height:auto; min-height:0; }
  .monex-advanced-chart__tooltip { min-width:132px; padding:10px 12px; }
  .monex-advanced-chart__peak-card { width:184px; padding:14px 14px 12px; }
  .monex-advanced-chart__peak-row strong { font-size:15.68px; }
  .monex-advanced-chart__peak-row em { font-size:12.8px; }
  .monex-advanced-chart__peak-card small { font-size:11.84px; }
  .monex-advanced-chart__footer { padding-left:28px; font-size:11px; }
  .monex-advanced-chart__footer span:nth-child(2),.monex-advanced-chart__footer span:nth-child(3) { display:none; }
}

/*
 * Phase 2b tightening (container-scoped as of Phase 2g). Placed after the 700
 * block so its declarations win the cascade on all containers ≤768px. Chart
 * geometry itself is chosen by the JS bundle at render time (viewBox becomes
 * 500x340 on mobile); this block only handles CSS: whitespace between
 * controls and plot, intrinsic SVG aspect ratio, and re-showing footer
 * :nth-child(2)/(3) spans because the JS now emits the correct count (3)
 * rather than 4 with hidden middles. NO transforms — real geometry lives in JS.
 */
@container monex-advanced-chart (max-width:768px) {
  .monex-advanced-chart__card { padding:10px 6px 10px; }
  .monex-advanced-chart__plot { padding:16px 4px 0; }
  .monex-advanced-chart__plot svg { width:100%; height:auto; aspect-ratio: 500 / 340; }
  .monex-advanced-chart__footer { padding:8px 8px 0; font-size:11px; }
  .monex-advanced-chart__footer span { display:inline-block; }
  .monex-advanced-chart__footer span:nth-child(2),.monex-advanced-chart__footer span:nth-child(3) { display:inline-block; }
}

@media (prefers-reduced-motion: reduce) {
  .monex-advanced-chart__comparisons button { transition:none; }
  .monex-advanced-chart__comparison-loading { animation:none; }
}