/* ===================================================================
   TS-GMRI chart module — TSM Indices Navy flavor
   (Navy + blue accent palette — standard finance UI; not affiliated with
    any third-party data terminal.)
   Drop-in via: <div data-gmri-chart="<slug>" data-flavor="blue"></div>
   =================================================================== */

:root[data-theme-flavor="blue"]{
  --gmri-bg:           #0b1d3a;
  --gmri-bg-soft:      #11264b;
  --gmri-bg-card:      #ffffff;
  --gmri-bg-card-dk:   #0f2347;
  --gmri-accent:       #1e5fb8;   /* TSM Indices accent (cyan-tinted navy blue) */
  --gmri-accent-soft:  #dbe7ff;
  --gmri-accent-mid:   #2f6fd3;
  --gmri-text:         #0b1d3a;
  --gmri-text-muted:   #5a6b87;
  --gmri-text-faint:   #97a5bf;
  --gmri-border:       #d6e0f0;
  --gmri-grid:         #e9eef8;
  --gmri-up:           #047857;
  --gmri-down:         #b91c1c;
}

/* ---- Container card ---- */
.gmri-chart-card{
  background:#fff;
  border:1px solid var(--gmri-border, #d6e0f0);
  border-radius:14px;
  box-shadow:0 1px 2px rgba(11,29,58,.04), 0 8px 24px rgba(11,29,58,.04);
  padding:1.25rem 1.25rem 1rem;
  margin:0 0 2rem;
  display:flex;
  flex-direction:column;
  gap:.75rem;
  font-family:var(--font-display, system-ui, -apple-system, sans-serif);
}
.gmri-chart-card[data-state="pending"]{
  background:repeating-linear-gradient(135deg,
    #fafcff 0 10px, #f3f6fc 10px 20px);
}

.gmri-chart-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.gmri-chart-titlewrap{display:flex;flex-direction:column;gap:.15rem}
.gmri-chart-title{
  font-family:var(--font-mono, ui-monospace, "SF Mono", monospace);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.06em;
  color:var(--gmri-text, #0b1d3a);
  text-transform:uppercase;
}
.gmri-chart-sub{
  font-size:.78rem;
  color:var(--gmri-text-muted, #5a6b87);
  letter-spacing:.01em;
}

/* ---- Last / Chg readout (TSM Indices Navy readout) ---- */
.gmri-chart-stats{
  display:flex;
  gap:1.25rem;
  align-items:baseline;
  flex-wrap:wrap;
  font-family:var(--font-mono, ui-monospace, "SF Mono", monospace);
}
.gmri-stat{display:flex;flex-direction:column;gap:.05rem;min-width:0}
.gmri-stat__lbl{
  font-size:.65rem;
  letter-spacing:.12em;
  color:var(--gmri-text-faint, #97a5bf);
  text-transform:uppercase;
}
.gmri-stat__val{
  font-weight:700;
  font-size:1.1rem;
  font-variant-numeric:tabular-nums;
  color:var(--gmri-text, #0b1d3a);
}
.gmri-stat__val.is-up{color:var(--gmri-up, #047857)}
.gmri-stat__val.is-down{color:var(--gmri-down, #b91c1c)}

/* ---- Toolbar row (range tabs + CSV button) ---- */
.gmri-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  flex-wrap:wrap;
}

/* ---- CSV download button ---- */
.gmri-csv{
  appearance:none;
  border:1px solid var(--gmri-border, #d6e0f0);
  background:#fff;
  color:var(--gmri-text, #0b1d3a);
  font-family:var(--font-mono, ui-monospace, "SF Mono", monospace);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.06em;
  padding:.4rem .8rem;
  border-radius:8px;
  cursor:pointer;
  transition:background .12s, border-color .12s, color .12s;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}
.gmri-csv:hover{
  background:var(--gmri-accent, #1e5fb8);
  border-color:var(--gmri-accent, #1e5fb8);
  color:#fff;
}
.gmri-csv:focus-visible{outline:2px solid var(--gmri-accent, #1e5fb8); outline-offset:2px}

/* ---- Compare toolbar (overlay toggles) ---- */
.gmri-compare{
  display:flex;
  align-items:center;
  gap:.4rem;
  flex-wrap:wrap;
  padding:.5rem .65rem;
  background:#f4f7fc;
  border:1px solid var(--gmri-border, #d6e0f0);
  border-radius:8px;
  font-family:var(--font-mono, ui-monospace, "SF Mono", monospace);
  font-size:.72rem;
}
.gmri-compare__lbl{
  color:var(--gmri-text-faint, #97a5bf);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  font-size:.65rem;
  padding-right:.25rem;
}
.gmri-compare__btn{
  appearance:none;
  border:1px solid var(--gmri-border, #d6e0f0);
  background:#fff;
  color:var(--gmri-text, #0b1d3a);
  font-family:inherit;
  font-weight:600;
  font-size:.7rem;
  letter-spacing:.02em;
  padding:.25rem .55rem;
  border-radius:999px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  transition:background .12s, opacity .12s, border-color .12s;
}
.gmri-compare__btn[data-role="family"]{
  border-style:dashed;
}
.gmri-compare__btn:hover{background:#e7eef9}
.gmri-compare__btn:not(.is-on){opacity:.42; background:#f4f7fc}
.gmri-compare__btn:not(.is-on) .gmri-compare__dot{filter:grayscale(1)}
.gmri-compare__dot{
  width:8px; height:8px;
  border-radius:50%;
  flex-shrink:0;
}
.gmri-compare__btn:focus-visible{outline:2px solid var(--gmri-accent, #1e5fb8); outline-offset:2px}

/* ---- Range tabs ---- */
.gmri-range{
  display:inline-flex;
  border:1px solid var(--gmri-border, #d6e0f0);
  border-radius:8px;
  overflow:hidden;
  background:#f4f7fc;
}
.gmri-range button{
  appearance:none;
  border:none;
  background:transparent;
  color:var(--gmri-text-muted, #5a6b87);
  font-family:var(--font-mono, ui-monospace, "SF Mono", monospace);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.06em;
  padding:.4rem .65rem;
  cursor:pointer;
  border-right:1px solid var(--gmri-border, #d6e0f0);
  transition:background .12s, color .12s;
}
.gmri-range button:last-child{border-right:none}
.gmri-range button:hover{background:#e7eef9;color:var(--gmri-text, #0b1d3a)}
.gmri-range button.is-active{
  background:var(--gmri-accent, #1d4ed8);
  color:#fff;
}

/* ---- Chart frame ---- */
.gmri-chart-frame{
  position:relative;
  width:100%;
  height:340px;
  background:#fff;
  border-radius:8px;
  overflow:hidden;
}
.gmri-chart-frame[data-mini="1"]{height:200px}
.gmri-chart-host{width:100%;height:100%}

/* watermark for pending charts */
.gmri-watermark{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:2;
  font-family:var(--font-mono, ui-monospace, "SF Mono", monospace);
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:.08em;
  color:#bcc8e0;
  text-transform:uppercase;
  text-align:center;
  padding:1rem;
  line-height:1.4;
}
.gmri-watermark__sub{
  display:block;
  margin-top:.4rem;
  font-size:.7rem;
  letter-spacing:.04em;
  font-weight:500;
  color:#9fadc8;
  text-transform:none;
}

/* ---- Legend (series chips) ---- */
.gmri-legend{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  font-family:var(--font-mono, ui-monospace, "SF Mono", monospace);
  font-size:.72rem;
  margin-top:.25rem;
}
.gmri-legend__chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.25rem .55rem;
  border:1px solid var(--gmri-border, #d6e0f0);
  background:#fff;
  border-radius:14px;
  cursor:pointer;
  color:var(--gmri-text, #0b1d3a);
  user-select:none;
  transition:background .12s, border-color .12s, opacity .12s;
}
.gmri-legend__chip[data-on="0"]{opacity:.4}
.gmri-legend__chip:hover{background:#f0f4fc}
.gmri-legend__dot{
  width:9px; height:9px;
  border-radius:50%;
  flex-shrink:0;
}
.gmri-legend__name{font-weight:600;letter-spacing:.02em}
.gmri-legend__val{
  color:var(--gmri-text-muted, #5a6b87);
  font-variant-numeric:tabular-nums;
}

/* ---- Footer note ---- */
.gmri-chart-foot{
  font-size:.72rem;
  color:var(--gmri-text-faint, #97a5bf);
  letter-spacing:.01em;
  line-height:1.5;
  margin-top:.25rem;
}
.gmri-chart-foot a{color:var(--gmri-accent, #1d4ed8);text-decoration:none;border-bottom:1px dotted currentColor}
.gmri-chart-foot a:hover{color:var(--gmri-accent-mid, #2563eb)}

/* ---- Tooltip (custom, TSM Indices Navy) ---- */
.gmri-tooltip{
  position:absolute;
  z-index:5;
  background:#0b1d3a;
  color:#fff;
  border-radius:6px;
  padding:.5rem .65rem;
  font-family:var(--font-mono, ui-monospace, "SF Mono", monospace);
  font-size:.72rem;
  line-height:1.45;
  box-shadow:0 8px 24px rgba(11,29,58,.25);
  pointer-events:none;
  white-space:nowrap;
  opacity:0;
  transition:opacity .08s;
}
.gmri-tooltip.is-on{opacity:1}
.gmri-tooltip__date{
  color:#a9c1ec;
  font-size:.65rem;
  letter-spacing:.06em;
  margin-bottom:.2rem;
  text-transform:uppercase;
}
.gmri-tooltip__row{display:flex;justify-content:space-between;gap:1.25rem}
.gmri-tooltip__row > span:first-child{color:#a9c1ec}
.gmri-tooltip__row > span:last-child{font-weight:700}

/* ---- Legend chips: read-only now (toggling moved to Compare toolbar) ---- */
.gmri-legend__chip{
  cursor:default;
}
.gmri-legend__chip:hover{background:#fff}

/* ---- Tight mobile ---- */
@media (max-width:640px){
  .gmri-chart-card{padding:1rem .85rem .85rem}
  .gmri-chart-frame{height:280px}
  .gmri-chart-stats{gap:.85rem}
  .gmri-stat__val{font-size:1rem}
  .gmri-range button{padding:.35rem .5rem;font-size:.68rem}
  .gmri-toolbar{gap:.5rem}
  .gmri-csv{padding:.35rem .65rem;font-size:.68rem}
  .gmri-compare{padding:.4rem .5rem;gap:.3rem}
  .gmri-compare__btn{padding:.22rem .45rem;font-size:.65rem}
  .gmri-compare__lbl{font-size:.6rem}
}