/* Bitmomo Market Context Explorer — chart/data-visualization ownership.
 * Progressive enhancement only: the server-rendered Decision View remains authoritative.
 */

.bm-bi{max-width:var(--bm-shell-width,1180px)}
.bm-bi--market-context{
  --bmc-btc:var(--bm-series-btc,#f1f4f6);
  --bmc-gold:var(--bm-series-gold, #c6a45f);
  --bmc-eth:var(--bm-series-eth, #7f91c7);
  --bmc-sol:var(--bm-series-sol, #d8d2ff);
  --bmc-grid:var(--bm-chart-grid, rgba(143,156,172,.13));
  --bmc-border:var(--bm-border-strong, rgba(255,255,255,.14));
  --bmc-panel:var(--bm-bg, #0b1118);
  --bmc-chart:var(--bm-surface-terminal, #090f16);
  max-width:var(--bm-shell-width,1180px)
}

/* Existing BTC surface refinements retained by this enhancement layer. */
.bm-bi--market-context .bm-bi__hero{padding-top:38px;padding-bottom:22px}
.bm-bi--market-context .bm-bi__hero h1{font-size:clamp(34px,4.5vw,52px)}
.bm-bi--market-context .bm-bi__snapshot{
  padding:26px;
  background:linear-gradient(180deg,rgba(var(--bm-bg-elevated-rgb, 17, 25, 35), .97),rgba(var(--bm-surface-terminal-rgb, 9, 15, 22), .94));
  border-color:var(--bm-border-strong, rgba(255,255,255,.14))
}
.bm-bi--market-context .bm-bi__section-head--terminal>div{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bm-bi--market-context .bm-bi__market-state{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:30px;
  padding:0 9px;
  border-left:2px solid var(--bmi-neutral);
  background:rgba(var(--bm-white-rgb, 255, 255, 255), .025)
}
.bm-bi--market-context .bm-bi__market-state[hidden]{display:none}
.bm-bi--market-context .bm-bi__market-state span{
  color:var(--bmi-subtle);
  font:800 var(--bm-type-micro, 12px)/1 var(--bmi-mono);
  letter-spacing:.1em
}
.bm-bi--market-context .bm-bi__market-state strong{
  color:var(--bm-text, #f1f4f6);
  font:800 var(--bm-type-micro, 12px)/1 var(--bmi-mono);
  letter-spacing:.04em;
  text-transform:uppercase
}
.bm-bi--market-context .bm-bi__market-state.is-expansion{border-left-color:var(--bmi-bull)}
.bm-bi--market-context .bm-bi__market-state.is-capitulation{border-left-color:var(--bmi-bear)}
.bm-bi--market-context .bm-bi__market-state.is-transition{border-left-color:var(--bm-warning,#c6a46a)}
.bm-bi--market-context .bm-bi__snapshot-grid{margin-top:20px}
.bm-bi--market-context .bm-bi__snapshot-grid>div:first-child strong{
  font-size:clamp(23px,3vw,30px);
  letter-spacing:-.02em
}
.bm-bi--market-context .bm-bi__brief-grid{
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  margin-top:20px;
  border-color:var(--bm-border-strong, rgba(255,255,255,.14));
  background:var(--bm-bg-soft, #16202b)
}
.bm-bi--market-context .bm-bi__brief-panel:last-child{
  order:-1;
  background:var(--bm-bg-elevated, #111923);
  box-shadow:inset 2px 0 0 var(--bmi-teal)
}
.bm-bi--market-context .bm-bi__brief-panel:last-child h3{color:var(--bmi-teal)}
.bm-bi--market-context .bm-bi__brief-panel:first-child{background:var(--bm-bg, #0b1118)}

/* Market Context heading */
.bm-mc{position:relative}
.bm-mc__heading{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,280px);
  gap:32px;
  align-items:start
}
.bm-mc__heading h2{
  max-width:760px;
  margin:0;
  font-size:clamp(25px,3vw,36px);
  line-height:1.08;
  letter-spacing:-.035em
}
.bm-mc__heading>div:first-child>p:last-child{
  max-width:720px;
  margin:10px 0 0;
  color:var(--bm-text-muted, #98a4b1);
  font-size:var(--bm-type-meta, 13px);
  line-height:1.6
}
.bm-mc__mode{
  display:grid;
  gap:5px;
  padding:11px 13px;
  border:1px solid var(--bmi-border-soft);
  border-radius:8px;
  background:rgba(var(--bm-white-rgb, 255, 255, 255), .018);
  text-align:left
}
.bm-mc__mode span,.bm-mc__control-label{
  display:block;
  color:var(--bmi-subtle);
  font:800 var(--bm-type-micro, 12px)/1.3 var(--bmi-mono);
  letter-spacing:.12em
}
.bm-mc__mode strong{
  color:var(--bm-text, #f1f4f6);
  font:800 var(--bm-type-micro, 12px)/1.35 var(--bmi-mono)
}
.bm-mc__mode small{
  color:var(--bm-text-subtle, #7f8b98);
  font:700 var(--bm-type-micro, 12px)/1.4 var(--bmi-mono)
}

/* Range and comparison controls */
.bm-mc__controls{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:26px;
  align-items:end;
  margin-top:20px;
  padding:9px 0;
  border-top:1px solid var(--bmi-border-soft);
  border-bottom:1px solid var(--bmi-border-soft)
}
.bm-mc__range,.bm-mc__series-controls{
  display:flex;
  align-items:stretch;
  gap:2px;
  min-width:0
}
.bm-mc__range button,.bm-mc__series-button{
  appearance:none;
  min-height:44px;
  min-width:44px;
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  color:var(--bm-text-muted, #98a4b1);
  cursor:pointer;
  font:800 var(--bm-type-micro, 12px)/1 var(--bmi-mono)
}
.bm-mc__range button{padding:0 12px}
.bm-mc__range button:hover,.bm-mc__series-button:hover{
  color:var(--bmi-text);
  background:rgba(var(--bm-white-rgb, 255, 255, 255), .025)
}
.bm-mc__range button:focus-visible,.bm-mc__series-button:focus-visible,.bm-mc__chart:focus-visible{
  outline:2px solid var(--bmi-teal);
  outline-offset:2px
}
.bm-bi--market-context .bm-mc__series-button:focus-visible{background:var(--bmc-panel)}
.bm-mc__range button[aria-pressed="true"]{
  border-bottom-color:var(--bmi-teal);
  color:var(--bm-text, #f1f4f6);
  background:rgba(var(--bm-neutral-rgb, 137, 150, 166), .045)
}
.bm-mc__compare{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:11px;
  min-width:0
}
.bm-mc__series-button{
  position:relative;
  display:grid;
  min-width:76px;
  align-content:center;
  gap:4px;
  padding:0 10px 0 21px;
  text-align:left
}
.bm-mc__series-button:before{
  content:"";
  position:absolute;
  left:8px;
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:currentColor;
  transform:translateY(-50%)
}
.bm-mc__series-button span{font-size:var(--bm-type-micro, 12px)}
.bm-mc__series-button small{
  color:var(--bm-text-subtle, #7f8b98);
  font:700 var(--bm-type-micro, 12px)/1 var(--bmi-mono);
  white-space:nowrap
}
.bm-mc__series-button[aria-pressed="true"]{
  border-bottom-color:currentColor;
  color:var(--bm-text, #f1f4f6)
}
.bm-mc__series-button.is-gold{color:var(--bmc-gold)}
.bm-mc__series-button.is-eth{color:var(--bmc-eth)}
.bm-mc__series-button.is-sol{color:var(--bmc-sol)}
.bm-mc__series-button:disabled{cursor:default;opacity:1}
.bm-mc__series-button.is-btc:disabled{opacity:1;color:var(--bmc-btc)}

/* Chart */
.bm-mc__chart{
  position:relative;
  min-height:390px;
  margin-top:16px;
  overflow:hidden;
  border:1px solid var(--bmc-border);
  border-radius:10px;
  background:
    linear-gradient(180deg,rgba(var(--bm-white-rgb, 255, 255, 255), .012),transparent 26%),
    linear-gradient(180deg,var(--bm-surface-terminal-elevated, #0e1620),var(--bmc-chart))
}
.bm-mc__svg{
  display:block;
  width:100%;
  height:auto;
  min-height:350px;
  touch-action:pan-y
}
.bm-mc__gridline,.bm-mc__baseline,.bm-mc__x-gridline{
  stroke:var(--bmc-grid);
  stroke-width:1;
  vector-effect:non-scaling-stroke
}
.bm-mc__x-gridline{stroke:rgba(var(--bm-neutral-rgb, 137, 150, 166), .075)}
.bm-mc__baseline{
  stroke:rgba(var(--bm-white-rgb, 255, 255, 255), .31);
  stroke-dasharray:5 5
}
.bm-mc__axis-label{
  fill:var(--bm-text-subtle, #7f8b98);
  font:700 var(--bm-type-micro, 12px)/1 var(--bmi-mono)
}
.bm-mc__axis-label.is-baseline{
  fill:var(--bm-text-secondary, #b7c0ca);
  font-weight:800
}
.bm-mc__line{
  stroke-width:2.15;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  stroke-linejoin:round
}
.bm-mc__line.is-btc{stroke:var(--bmc-btc);stroke-width:2.9}
.bm-mc__line.is-eth{stroke:var(--bmc-eth);stroke-dasharray:5 3}
.bm-mc__line.is-sol{stroke:var(--bmc-sol);stroke-dasharray:10 3 2 3}
.bm-mc__line.is-gold{stroke:var(--bmc-gold);stroke-dasharray:8 3}
.bm-mc__crosshair{
  stroke:var(--bm-neutral, #8996a6);
  stroke-width:1;
  stroke-dasharray:3 4;
  vector-effect:non-scaling-stroke;
  pointer-events:none
}
.bm-mc__hit-area{fill:transparent;cursor:crosshair}
.bm-mc__marker{pointer-events:none}
.bm-mc__marker-stem{
  stroke:currentColor;
  stroke-width:1;
  opacity:.58;
  vector-effect:non-scaling-stroke
}
.bm-mc__marker circle,.bm-mc__marker path{
  fill:var(--bm-surface-terminal-elevated, #0e1620);
  stroke:currentColor;
  stroke-width:2;
  vector-effect:non-scaling-stroke
}
.bm-mc__marker.is-decision{color:var(--bmi-orange)}
.bm-mc__marker.is-state{color:var(--bmi-teal)}

/* Tooltip */
.bm-mc__tooltip{
  position:absolute;
  top:14px;
  z-index:4;
  min-width:236px;
  max-width:min(310px,86vw);
  padding:11px 12px;
  border:1px solid var(--bm-border-strong, rgba(255,255,255,.14));
  border-radius:8px;
  background:rgba(var(--bm-header-rgb, 8, 13, 19), .97);
  box-shadow:0 14px 34px rgba(var(--bm-black-rgb, 0, 0, 0), .34);
  transform:translateX(-50%);
  pointer-events:none
}
.bm-mc__tooltip.is-left{transform:translateX(0)}
.bm-mc__tooltip.is-right{transform:translateX(-100%)}
.bm-mc__tooltip time{
  display:block;
  padding-bottom:7px;
  border-bottom:1px solid var(--bm-bg-soft, #16202b);
  color:var(--bm-text-muted, #98a4b1);
  font:800 var(--bm-type-micro, 12px)/1.3 var(--bmi-mono)
}
.bm-mc__tooltip-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:3px 11px;
  align-items:center;
  margin-top:8px
}
.bm-mc__tooltip-row>span{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--bm-text-secondary, #b7c0ca);
  font-size:var(--bm-type-micro, 12px)
}
.bm-mc__tooltip-row i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--bmc-btc)
}
.bm-mc__tooltip-row i.is-gold{background:var(--bmc-gold)}
.bm-mc__tooltip-row i.is-eth{background:var(--bmc-eth)}
.bm-mc__tooltip-row i.is-sol{background:var(--bmc-sol)}
.bm-mc__tooltip-row strong{
  color:var(--bm-text, #f1f4f6);
  font:800 var(--bm-type-micro, 12px)/1.2 var(--bmi-mono)
}
.bm-mc__tooltip-row small{
  grid-column:1 / -1;
  padding-left:14px;
  color:var(--bm-text-subtle, #7f8b98);
  font:700 var(--bm-type-micro, 12px)/1.35 var(--bmi-mono)
}
.bm-mc__tooltip-events{
  display:grid;
  gap:6px;
  margin-top:10px;
  padding-top:9px;
  border-top:1px solid var(--bm-bg-soft, #16202b)
}
.bm-mc__tooltip-events>b{
  color:var(--bm-neutral, #8996a6);
  font:800 var(--bm-type-micro, 12px)/1 var(--bmi-mono);
  letter-spacing:.08em;
  text-transform:uppercase
}
.bm-mc__tooltip-event{
  display:flex;
  gap:7px;
  align-items:flex-start;
  color:var(--bm-text-secondary, #b7c0ca);
  font-size:var(--bm-type-micro, 12px);
  line-height:1.35
}
.bm-mc__tooltip-event.is-decision>span{color:var(--bmi-orange)}
.bm-mc__tooltip-event.is-state>span{color:var(--bmi-teal)}

/* Loading and unavailable states keep geometry stable. */
.bm-mc__loading,.bm-mc__unavailable{
  display:grid;
  place-content:center;
  gap:7px;
  min-height:388px;
  padding:28px;
  text-align:center;
  color:var(--bm-text-muted, #98a4b1);
  font-size:var(--bm-type-micro, 12px)
}
.bm-mc__unavailable strong{color:var(--bm-text-secondary, #b7c0ca);font-size:var(--bm-type-body-sm, 14px)}
.bm-mc__unavailable span{max-width:440px;line-height:1.55}
.bm-mc.is-loading .bm-mc__controls{opacity:1;pointer-events:none}

/* Active-series summary. Flex avoids the old empty-grid-cell visual gap. */
.bm-mc__legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:9px
}
.bm-mc__legend:empty{display:none}
.bm-mc__legend-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:4px 12px;
  align-items:center;
  flex:1 1 220px;
  min-width:0;
  padding:11px 12px;
  border:1px solid var(--bm-bg-soft, #16202b);
  border-radius:7px;
  background:var(--bmc-panel)
}
.bm-mc__legend-item>span{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--bm-text-secondary, #b7c0ca);
  font-size:var(--bm-type-micro, 12px)
}
.bm-mc__legend-item i{
  width:16px;
  height:2px;
  background:var(--bmc-btc)
}
.bm-mc__legend-item.is-gold i{background:var(--bmc-gold)}
.bm-mc__legend-item.is-eth i{background:var(--bmc-eth)}
.bm-mc__legend-item.is-sol i{background:var(--bmc-sol)}
.bm-mc__legend-item strong{
  color:var(--bm-text, #f1f4f6);
  font:800 var(--bm-type-micro, 12px)/1 var(--bmi-mono)
}
.bm-mc__legend-item small{
  grid-column:1 / -1;
  color:var(--bm-text-subtle, #7f8b98);
  font:700 var(--bm-type-micro, 12px)/1.35 var(--bmi-mono);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

/* Explicit explanation for Bitmomo markers on the line. */
.bm-mc__marker-key{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:8px;
  min-height:24px
}
.bm-mc__marker-key[hidden]{display:none}
.bm-mc__marker-key-label{
  color:var(--bmi-subtle);
  font:800 var(--bm-type-micro, 12px)/1 var(--bmi-mono);
  letter-spacing:.1em
}
.bm-mc__marker-key-items{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap
}
.bm-mc__marker-key-items>span{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--bm-neutral, #8996a6);
  font:700 var(--bm-type-micro, 12px)/1.25 var(--bmi-mono)
}
.bm-mc__marker-key-items i{
  display:inline-block;
  width:8px;
  height:8px
}
.bm-mc__marker-key-items i.is-decision{
  border:2px solid var(--bmi-orange);
  border-radius:50%
}
.bm-mc__marker-key-items i.is-state{
  border:2px solid var(--bmi-teal);
  transform:rotate(45deg)
}

.bm-mc__status{
  min-height:18px;
  margin:6px 0 0;
  color:var(--bm-text-subtle, #7f8b98);
  font-size:var(--bm-type-micro, 12px);
  line-height:1.45
}

/* Pro context remains an honest descriptor, not a fake public overlay. */
.bm-mc__pro-overlays{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-top:18px;
  padding:14px 0;
  border-top:1px solid var(--bmi-border-soft);
  border-bottom:1px solid var(--bmi-border-soft)
}
.bm-mc__pro-copy{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0
}
.bm-mc__pro-copy>span{
  flex:0 0 auto;
  color:var(--bmi-orange);
  font:800 var(--bm-type-micro, 12px)/1 var(--bmi-mono);
  letter-spacing:.11em
}
.bm-mc__pro-copy p{
  margin:0;
  color:var(--bm-text-muted, #98a4b1);
  font-size:var(--bm-type-dense, 13px);
  line-height:1.45
}
.bm-mc__pro-items{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:15px;
  flex-wrap:wrap
}
.bm-mc__pro-items span{
  color:var(--bm-text-secondary, #b7c0ca);
  font:700 var(--bm-type-micro, 12px)/1.3 var(--bmi-mono);
  white-space:nowrap
}

@media (max-width:900px){
  .bm-mc__heading{grid-template-columns:1fr;gap:14px}
  .bm-mc__mode{
    grid-template-columns:auto 1fr;
    align-items:center
  }
  .bm-mc__mode small{grid-column:1 / -1}
  .bm-mc__controls{grid-template-columns:1fr;gap:4px}
  .bm-mc__compare{
    justify-content:flex-start;
    align-items:flex-start;
    flex-direction:column;
    gap:3px
  }
  .bm-mc__series-controls{
    width:100%;
    overflow-x:auto;
    scrollbar-width:none
  }
  .bm-mc__series-controls::-webkit-scrollbar{display:none}
  .bm-mc__pro-overlays{display:block}
  .bm-mc__pro-items{justify-content:flex-start;margin-top:10px}
}

@media (max-width:640px){
  .bm-bi--market-context{padding-left:16px;padding-right:16px}
  .bm-bi--market-context .bm-bi__hero{display:block;padding-top:28px}
  .bm-bi--market-context .bm-bi__hero>small{
    display:block;
    max-width:none;
    margin-top:14px;
    text-align:left
  }
  .bm-bi--market-context .bm-bi__snapshot{padding:18px 16px}
  .bm-bi--market-context .bm-bi__section-head--terminal{align-items:flex-start}
  .bm-bi--market-context .bm-bi__headline-meta{
    width:100%;
    justify-content:space-between;
    margin-top:9px
  }
  .bm-bi--market-context .bm-bi__snapshot-grid{grid-template-columns:1fr}
  .bm-bi--market-context .bm-bi__snapshot-grid>div{
    padding:13px 0;
    border-left:0;
    border-top:1px solid var(--bmi-border-soft)
  }
  .bm-bi--market-context .bm-bi__snapshot-grid>div:first-child{border-top:0}
  .bm-bi--market-context .bm-bi__brief-grid{grid-template-columns:1fr}
  .bm-bi--market-context .bm-bi__brief-panel:last-child{
    order:-1;
    box-shadow:inset 2px 0 0 var(--bmi-teal)
  }

  .bm-mc__heading h2{font-size:clamp(24px,8vw,31px)}
  .bm-mc__mode{padding:10px 11px}
  .bm-mc__range{
    width:100%;
    overflow-x:auto;
    scrollbar-width:none
  }
  .bm-mc__range::-webkit-scrollbar{display:none}
  .bm-mc__range button,.bm-mc__series-button{min-height:44px}
  .bm-mc__series-button{min-width:82px}
  .bm-mc__chart{
    min-height:300px;
    border-radius:8px
  }
  .bm-mc__svg{min-height:298px}
  .bm-mc__loading,.bm-mc__unavailable{min-height:298px}
  .bm-mc__tooltip{
    top:9px;
    min-width:205px;
    max-width:86vw;
    padding:9px 10px
  }
  .bm-mc__legend{display:grid;grid-template-columns:1fr;gap:6px}
  .bm-mc__legend-item{padding:9px 10px}
  .bm-mc__marker-key{
    align-items:flex-start;
    flex-direction:column;
    gap:6px
  }
  .bm-mc__pro-copy{
    align-items:flex-start;
    flex-direction:column;
    gap:6px
  }
  .bm-mc__pro-items{
    display:grid;
    grid-template-columns:1fr;
    gap:8px
  }
  .bm-mc__pro-items span{
    min-height:28px;
    display:flex;
    align-items:center;
    border-bottom:1px solid var(--bmi-border-soft)
  }
}

@media (prefers-reduced-motion:reduce){
  .bm-mc *{
    scroll-behavior:auto;
    transition:none;
    animation:none
  }
}