/* Compatibility lock: the shared catalog remains the visual source of truth. */

.bondsmap-product-header {
  --atlantic-navy: #0f2233;
  --ocean-blue: #15324a;
  --north-sea: #274c63;
  --deep-ocean: #355e78;
  --sea-foam: #d8e2e7;
  --pure-white: #ffffff;
  --line: rgba(216, 226, 231, 0.18);
  --glass-dark: rgba(216, 226, 231, 0.11);
  --glass-border: rgba(255, 255, 255, 0.38);
  --glass-highlight: rgba(255, 255, 255, 0.48);
  --market-positive: #68d5a4;
  --market-negative: #ff7b8a;
  --market-neutral: #a9bfd0;
  --shadow: 0 22px 56px rgba(3, 15, 25, 0.26);
  --title-size: clamp(32px, 4.2vw, 54px);
  --description-size: clamp(15px, 1.5vw, 18px);
  --control-height: 54px;
  --utility-radius: 27px;
  --utility-font-size: 14px;
  --radius-panel: 34px;
  color: var(--pure-white);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.bondsmap-product-header .product-header__title {
  margin: 0;
  color: var(--pure-white);
}

.bondsmap-product-header .product-header__description {
  margin: 14px 0 0;
}

/* The legacy page defines .period-toolbar later in the cascade. These rules
   restore the exact desktop component contract from header-system.css. */
.bondsmap-product-header .product-header__controls .header-liquid-glass.period-toolbar {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
  width: min(560px, 100%);
  min-width: 0;
  height: 54px;
  margin: 0;
  padding: 4px;
}

.bondsmap-product-header .header-liquid-glass .period-btn,
.bondsmap-product-header .header-liquid-glass .period-btn.is-active {
  min-height: 0;
  height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  border-color: transparent !important;
  background: transparent !important;
  color: rgba(216, 226, 231, 0.82) !important;
  box-shadow: none !important;
}

.bondsmap-product-header .header-liquid-glass .period-btn[aria-selected="true"] {
  color: var(--atlantic-navy) !important;
}

.bondsmap-product-header .header-block--market {
  min-height: 188px;
}

.bondsmap-product-header .market-indicator__chart {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.bondsmap-product-header .market-indicator__chart .spark {
  display: block;
  width: 100%;
  height: 100%;
}

.bondsmap-product-header .market-indicator__chart polyline {
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.bondsmap-product-header .market-indicator__delta,
.bondsmap-product-header .market-indicator__delta.positive,
.bondsmap-product-header .market-indicator__delta.negative {
  color: #ffffff !important;
  background: var(--delta-background) !important;
}

.bondsmap-product-header .metric-tooltip,
.bondsmap-product-header .metric-crosshair {
  display: none !important;
}

@media (max-width: 720px) {
  .bondsmap-product-header {
    --radius-panel: 26px;
  }

  .bondsmap-product-header .product-header__controls .header-liquid-glass.period-toolbar {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    width: 100%;
    height: 54px;
    margin: 0;
    padding: 4px;
    overflow-x: auto;
  }

  .bondsmap-product-header .header-liquid-glass .period-btn,
  .bondsmap-product-header .header-liquid-glass .period-btn.is-active {
    flex: 0 0 54px !important;
    min-height: 44px !important;
    height: 44px;
    padding: 0 8px !important;
  }
}