/* Market charts: only #market. Static SVG works without JS. */
.h-market > .wrap { display: block; max-width: 1280px; }
.h-market__head { max-width: 62ch; margin-bottom: var(--spacing-40); }
.h-market__head .body-large { margin-top: var(--spacing-20); }
.mc-grid-2 { display: grid; gap: var(--spacing-24); grid-template-columns: minmax(0,5fr) minmax(0,7fr); align-items: stretch; }
.mc-card { margin: 0; padding: clamp(18px,2.4vw,32px); background: #1c1c1e; border: 1px solid #3a3a3c; border-radius: 20px; }
.mc-kicker { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-calibration-gray); }
.mc-card h3 { margin: 6px 0 var(--spacing-16); font-family: var(--font-display); font-weight: 400; font-size: clamp(22px,2.4vw,32px); line-height: 1.1; color: var(--color-lab-white); }
.mc-pie__svg, .mc-bars__svg { display: block; width: 100%; height: auto; }
.mc-pie__svg { max-width: 340px; margin: 0 auto; }
.mc-bars { display: flex; flex-direction: column; }
.mc-bars__svg { flex: 1; min-height: 0; }
.mc-bars .mc-key { margin-top: 20px; }
.mc-slice { stroke: #1c1c1e; stroke-width: 2; cursor: pointer; transition: opacity .25s, transform .25s; transform-origin: 110px 110px; }
.mc-slice[data-slice="hs"] { fill: #00d959; }
.mc-slice[data-slice="he"] { fill: #0071e3; }
.mc-pie.has-active .mc-slice:not(.is-active) { opacity: .35; }
.mc-slice.is-active { transform: scale(1.04); }
.mc-pie__pct { font: 600 15px var(--font-display, sans-serif); fill: #04120a; pointer-events: none; }
.mc-pie__pct + .mc-pie__pct { fill: #fff; font-size: 12px; }
.mc-legend { list-style: none; margin: var(--spacing-16) 0 0; padding: 0; display: grid; gap: 10px; }
.mc-legend small { display: block; padding: 4px 14px 0 44px; color: var(--color-calibration-gray); font-size: 13px; }
.mc-legend__btn { width: 100%; display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: center; min-height: 48px; padding: 8px 14px; text-align: left; font: inherit; color: var(--color-lab-white); background: transparent; border: 1px solid #3a3a3c; border-radius: 12px; cursor: pointer; }
.mc-legend__btn:hover, .mc-legend__btn[aria-pressed="true"] { border-color: var(--color-lab-white); background: #2a2a2d; }
.mc-legend__btn:focus-visible, .mc-slice:focus-visible { outline: 3px solid var(--color-lab-white); outline-offset: 2px; }
.mc-sw { display: inline-block; width: 16px; height: 16px; border-radius: 4px; }
.mc-sw--hs { background: #00d959; } .mc-sw--he { background: #0071e3; }
.mc-sw--solid { background: #ff6a13; } .mc-sw--range { background: rgba(255,106,19,.38); border: 1px solid #ff6a13; }
.mc-readout { min-height: 3em; margin: var(--spacing-16) 0 0; font-size: 15px; color: var(--color-lab-white); }
.mc-note { margin: var(--spacing-16) 0 0; font-size: 13px; line-height: 1.55; color: var(--color-calibration-gray); }
.mc-grid { stroke: #3a3a3c; stroke-width: 1; }
.mc-tick { fill: #aeaeb2; font: 13px var(--font-body, sans-serif); }
.mc-lab { fill: #fff; font: 600 22px var(--font-body, sans-serif); }
.mc-value { fill: #c7c7cc; font: 16px var(--font-body, sans-serif); }
.mc-row-divider { stroke: #505054; stroke-width: 1; }
.mc-solid { fill: #ff6a13; }
.mc-range { fill: rgba(255,106,19,.38); stroke: #ff6a13; stroke-width: 1; }
.mc-key { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 0; margin: var(--spacing-8, 8px) 0 0; font-size: 13px; color: #c7c7cc; }
.mc-key li { display: flex; align-items: center; gap: 8px; }
.mc-context { display: grid; gap: var(--spacing-24); grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--spacing-40) 0 0; }
.mc-context__card { display: flex; flex-direction: column; gap: 14px; text-align: center; min-width: 0; }
.mc-context__card dt { font-size: 17px; line-height: 1.5; }
.mc-context__card .mc-kicker { margin-bottom: 8px; }
.mc-context__card dd { margin: auto 0 0; font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 44px); line-height: 1.15; }
.mc-context__card dd span { font-size: .45em; }
.mc-context__card dd.mc-context__detail { margin-top: 0; font: inherit; font-size: 14px; line-height: 1.5; color: var(--color-calibration-gray); }
.mc-mobile-bars { display: none; }
/* Language changes text direction, never the zero-based chart coordinates. */
.mc-pie__svg, .mc-bars__svg, .mc-mobile-track, .mc-mobile-ticks { direction: ltr; }
.mc-legend__btn { text-align: start; }
.mc-legend__btn b { direction: ltr; unicode-bidi: isolate; }
.market-audit { text-align: start; line-height: 1.6; scroll-margin-top: 100px; overflow-wrap: anywhere; }
.market-audit summary { cursor: pointer; font-weight: 700; }
[dir="rtl"] .mc-legend small { padding: 4px 44px 0 14px; }
/* Fixed SVG labels cannot wrap. Use the equivalent HTML chart for RTL text. */
[dir="rtl"] .mc-bars__svg { display: none; }
[dir="rtl"] .mc-mobile-bars { display: block; margin: 24px 0; }
.mc-mobile-row + .mc-mobile-row { margin-top: 28px; padding-top: 24px; border-top: 1px solid #505054; }
.mc-mobile-row p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.mc-mobile-row strong { display: block; direction: ltr; unicode-bidi: isolate; }
.mc-mobile-track { height: 42px; position: relative; background: repeating-linear-gradient(to right, #3a3a3c 0 1px, transparent 1px 25%); border-right: 1px solid #3a3a3c; }
.mc-mobile-solid, .mc-mobile-range { position: absolute; top: 0; height: 100%; box-sizing: border-box; }
.mc-mobile-solid { left: 0; background: #ff6a13; }
.mc-mobile-range { background: rgba(255,106,19,.38); border: 1px solid #ff6a13; }
.mc-mobile-ticks { display: flex; justify-content: space-between; margin-top: 12px; font-size: 11px; color: #aeaeb2; }
@media (max-width: 600px) {
  .mc-bars__svg { display: none; }
  .mc-mobile-bars { display: block; margin: 24px 0; }
}
@media (max-width: 900px) { .mc-grid-2, .mc-context { grid-template-columns: 1fr; } .mc-context { margin-top: var(--spacing-24); } }
@media (max-width: 520px) { .mc-legend__btn { grid-template-columns: 20px 1fr; } .mc-legend__btn b { grid-column: 2; } }
@media (prefers-reduced-motion: reduce) { .mc-slice { transition: none; } .mc-slice.is-active { transform: none; stroke: #fff; stroke-width: 4; } }
