/* macro_charts.css — the Charts view on Macro ▸ ▦ Market × sector · 🌐 Countries · 🏦 Bonds (web/macro_charts.js).
   The panels reuse Competitor Analysis ▸ Charts' cmp-* classes (company_compare.css) so the two pages look alike;
   this file only adds what a market chart needs on top: the face switch, the strip, tails, the read line. */

/* the table hides while Charts is chosen (the HTML is still built, so switching back is instant) */
.rot-board.mch-on.mch-f-countries > .ctry-tablewrap,
.rot-board.mch-on.mch-f-countries > .ctry-viz,
.rot-board.mch-on.mch-f-countries > .cvwm-slot[data-cvwm="ctrycurve"],
.rot-board.mch-on.mch-f-bonds > .ctry-tablewrap,
.rot-board.mch-on.mch-f-sectors .ctry-viz-scroll,
.rot-board.mch-on.mch-f-sectors .ctry-viz > .rot-legend { display: none !important; }
.rot-board.mch-on .seg-bar, .rot-board.mch-on .ctry-segrow .seg-chips { display: none; }
.mch-slot { display: none; }
.rot-board.mch-on .mch-slot { display: block; margin: 8px 0 6px; }

/* the face switch sits first in the header's chip groups and reads like them */
.mch-viewg .ctry-mix[data-mch-view="charts"]::before { content: '◔ '; }

.mch { position: relative; }
.mch-bar { position: static; margin: 6px 0 10px; top: auto; }
.mch-bar .mch-what { font-size: 12px; font-weight: 650; color: var(--text); margin-right: 4px; }
.mch-bar .mch-what em { font-style: normal; font-weight: 400; color: var(--muted); }
.mch-bar select.cmp-add { max-width: 200px; }
.mch-bar .cmp-chip { padding: 3px 9px; }
.mch-bar .mch-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 2px; }
.mch-grid { grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); }
.mch-grid .mch-wide { grid-column: 1 / -1; }
.mch-panel .cmp-plot { min-height: 0; cursor: crosshair; }
.mch-panel .cmp-plot.mch-strip { cursor: pointer; }
.mch-read { margin: 1px 0 4px; font-size: 11.5px; line-height: 1.45; color: var(--text); min-height: 16px; }
.mch-read b { font-weight: 650; }
.mch-read .g { color: var(--bull); font-weight: 650; }
.mch-read .r { color: var(--bear); font-weight: 650; }
.mch-read .k { color: var(--muted); }
/* a pick's own colour, pulled a fifth toward the text colour so it clears 4.5:1 on light looks too */
.mch-read .p { font-weight: 700; color: color-mix(in srgb, var(--c, var(--text)) 78%, var(--text)); }
.mch-empty { padding: 22px 8px; text-align: center; font-size: 12px; color: var(--muted); }

/* tails: where the market stood one horizon ago → where it is now */
.cmp-svg .mch-tail { stroke: var(--muted); stroke-width: 1.1; opacity: .42; fill: none; }
.cmp-svg .mch-tail.pin { stroke: var(--c); stroke-width: 1.6; opacity: .9; }
.cmp-svg .mch-tail0 { fill: var(--panel); stroke: var(--muted); stroke-width: 1; opacity: .55; }
.cmp-svg .mch-tail0.pin { stroke: var(--c); opacity: .95; }
.cmp-svg .cmp-dot.mch-stale { stroke-dasharray: 2.2 1.6; }
/* resting on few companies (or few priced bonds): drawn, faded, never named in a read — the dot fades further than
   its label, which stays readable (audit 2026-10-25: labels at .36 measured 1.65:1) */
.cmp-svg .mch-thin { opacity: .36; }
.cmp-svg .cmp-lab.mch-thin { opacity: .72; }
.mch .cmp-svg .mch-thin.hl { opacity: 1; }
.mch .cmp-svg .cmp-dot.self { fill: var(--accent); stroke: var(--panel); stroke-width: 1.6; }
.mch .cmp-svg .cmp-lab.self { fill: var(--accent); font-weight: 650; }
/* a halo behind every label and corner caption, so tails, grid lines and nearby dots never cut through the text */
.mch .cmp-svg .cmp-lab, .mch .cmp-svg .cmp-ql, .mch .cmp-svg .mch-ext {
  paint-order: stroke; stroke: var(--panel); stroke-width: 2.6px; stroke-linejoin: round;
}

/* the ▦ strip: one row per sector */
.cmp-svg .mch-row { stroke: var(--border); stroke-width: 1; opacity: .5; }
.cmp-svg .mch-row.all { stroke: var(--muted); opacity: .55; }
.cmp-svg .mch-rowlab { fill: var(--muted); font-size: 10.5px; }
.cmp-svg .mch-rowlab.all { fill: var(--text); font-weight: 650; }
/* the world figure: a text-coloured tick (orange is pick #1's colour, so an orange tick read as a pick) */
.cmp-svg .mch-wtick { stroke: var(--text); stroke-width: 2.2; stroke-linecap: round; opacity: .7; }
.cmp-svg .mch-ext { fill: var(--muted); font-size: 9px; pointer-events: none; }

/* linked hover: the hovered market everywhere, everything else faded (own attribute, so Competitor Analysis'
   handlers never see these dots) */
.mch.hovering .cmp-svg [data-mk]:not(.hl) { opacity: .14; }
.mch.hovering .cmp-svg .cmp-dot.pin:not(.hl), .mch.hovering .cmp-svg .mch-tail.pin:not(.hl) { opacity: .45; }
.mch .cmp-svg .mch-tail.hl { stroke: var(--text); opacity: 1; stroke-width: 1.8; }
.mch .cmp-svg .mch-tail0.hl { stroke: var(--text); opacity: 1; }
.mch .cmp-pin.hl { box-shadow: 0 0 0 2px var(--c) inset; }
.mch .cmp-pin { cursor: default; }

.mch-foot { margin: 8px 2px 0; font-size: 11px; color: var(--muted); line-height: 1.5; }
.mch-foot details { display: inline; }
.mch-foot summary { display: inline; cursor: pointer; color: var(--accent); }
.mch-foot details[open] > div { margin-top: 4px; color: var(--muted); }
.mch-foot .w { color: var(--amber); }

@media (max-width: 760px) {
  .mch-grid { grid-template-columns: 1fr; }
  .mch-bar .cmp-hint { display: none; }
  .mch-bar select.cmp-add { max-width: 150px; }
}