/* GraniteShares NAV price chart (test build)
   Palette tokens: adjust here if the site stylesheet uses different values. */
.gspc {
  --gspc-accent: #8a86e9;        /* NAV line (matches product chart) */
  --gspc-accent-fill: rgba(138, 134, 233, 0.16);
  --gspc-accent-2: #2f48e4;      /* distributions-reinvested line (site tab/legend blue) */
  --gspc-ink: #162224;           /* headline figures, active range chip */
  --gspc-muted: #6e7472;
  --gspc-border: #e4e3df;
  --gspc-grid: #e9e9ee;
  --gspc-chip: #f0efec;
  --gspc-surface: #ffffff;
  --gspc-pos: #1f8a5b;
  --gspc-neg: #c8413b;
  --gspc-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  position: relative;
  box-sizing: border-box;
  background: var(--gspc-surface);
  border: 1px solid var(--gspc-border);
  border-radius: 4px;
  padding: 28px 28px 20px;
  color: var(--gspc-ink);
  font-family: inherit;
}
.gspc *, .gspc *::before, .gspc *::after { box-sizing: border-box; }
.gspc[hidden] { display: none !important; }

/* Header */
.gspc__head { display: flex; flex-wrap: wrap; gap: 16px 24px; justify-content: space-between; align-items: flex-start; }
.gspc__label { font-family: var(--gspc-mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--gspc-muted); margin-bottom: 6px; }
.gspc__value-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.gspc__value { font-size: clamp(32px, 5vw, 44px); font-weight: 600; line-height: 1.05; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.gspc__change { font-family: var(--gspc-mono); font-size: 16px; color: var(--gspc-accent); font-variant-numeric: tabular-nums; }
.gspc__period { font-family: var(--gspc-mono); font-size: 16px; color: var(--gspc-muted); }
.gspc__adj-row { margin-top: 8px; font-family: var(--gspc-mono); font-size: 13px; color: var(--gspc-muted); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.gspc__adj-row strong { color: var(--gspc-accent-2); font-weight: 600; font-size: 15px; }

/* Range selector */
.gspc__ranges { display: inline-flex; background: var(--gspc-chip); border-radius: 6px; padding: 4px; gap: 2px; }
.gspc__range {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--gspc-mono); font-size: 14px; color: var(--gspc-ink);
  padding: 8px 14px; border-radius: 4px; min-width: 48px; line-height: 1.2;
}
.gspc__range:hover { background: rgba(22, 34, 36, .06); }
.gspc__range[aria-pressed="true"] { background: var(--gspc-ink); color: #fff; }
.gspc__range:focus-visible, .gspc__toggle:focus-visible, .gspc__plot:focus-visible { outline: 2px solid var(--gspc-accent-2); outline-offset: 2px; }

/* Plot */
.gspc__plot { position: relative; margin-top: 20px; touch-action: pan-y; outline: none; }
.gspc__svg { display: block; width: 100%; overflow: visible; }
.gspc__grid line { stroke: var(--gspc-grid); stroke-width: 1; }
.gspc__axis text { font-family: var(--gspc-mono); font-size: 12px; fill: var(--gspc-muted); }
.gspc__nav-line { fill: none; stroke: var(--gspc-accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.gspc__adj-line { fill: none; stroke: var(--gspc-accent-2); stroke-width: 2; stroke-dasharray: 6 4; stroke-linejoin: round; stroke-linecap: round; }
.gspc__end-dot { fill: var(--gspc-accent); }
.gspc__end-dot--adj { fill: var(--gspc-accent-2); stroke: #fff; stroke-width: 1.5; }
.gspc__cross line { stroke: var(--gspc-ink); stroke-opacity: .35; stroke-dasharray: 3 3; }
.gspc__cross circle { stroke: #fff; stroke-width: 2; }
.gspc__area, .gspc__nav-line, .gspc__adj-line, .gspc__end-dot, .gspc__cross, .gspc__bar-rule, .gspc__empty { padding: 60px 0; text-align: center; color: var(--gspc-muted); font-family: var(--gspc-mono); font-size: 13px; }

/* Tooltip */
.gspc__tip {
  position: absolute; top: 0; left: 0; z-index: 5; pointer-events: none;
  background: var(--gspc-ink); color: #fff; border-radius: 4px; padding: 10px 12px;
  font-family: var(--gspc-mono); font-size: 12px; line-height: 1.55; min-width: 170px;
  box-shadow: 0 6px 18px rgba(22, 34, 36, .18); white-space: nowrap;
}
.gspc__tip[hidden] { display: none; }
.gspc__tip.is-pinned { pointer-events: auto; }
.gspc__tip-date { color: rgba(255,255,255,.7); margin-bottom: 4px; }
.gspc__tip-row { display: flex; justify-content: space-between; gap: 16px; }
.gspc__tip-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.gspc__tip-key { display: inline-flex; align-items: center; gap: 6px; }
.gspc__tip-key::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gspc-accent); }
.gspc__tip-key--adj::before { background: var(--gspc-accent-2); }
.gspc__tip-key--dist::before { border-radius: 1px; transform: rotate(45deg); background: #fff; }
.gspc__tip-sep { border-top: 1px solid rgba(255,255,255,.18); margin: 6px 0; }

/* Footer */
.gspc__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
.gspc__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--gspc-mono); font-size: 13px; color: var(--gspc-muted); }
.gspc__legend-item { display: inline-flex; align-items: center; gap: 8px; }
.gspc__legend-item[hidden] { display: none; }
.gspc__swatch { width: 28px; height: 3px; border-radius: 2px; background: var(--gspc-accent); }
.gspc__swatch--adj { background: repeating-linear-gradient(90deg, var(--gspc-accent-2) 0 6px, transparent 6px 10px); }
.gspc__toggle {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--gspc-mono); font-size: 13px; color: var(--gspc-ink);
  background: var(--gspc-chip); border: 1px solid transparent; border-radius: 6px; padding: 9px 14px;
}
.gspc__toggle:hover { border-color: var(--gspc-border); }
.gspc__toggle[aria-pressed="true"] { background: var(--gspc-accent-2); color: #fff; }
.gspc__toggle-icon { width: 9px; height: 9px; border: 2px solid currentColor; transform: rotate(45deg); border-radius: 1px; }

/* Distribution panel */
.gspc__dist { margin-top: 18px; border-top: 1px solid var(--gspc-border); padding-top: 16px; }
.gspc__dist[hidden] { display: none; }
.gspc__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 24px; margin-bottom: 14px; }
.gspc__stat-label { font-family: var(--gspc-mono); font-size: 12px; color: var(--gspc-muted); margin-bottom: 2px; }
.gspc__stat-value { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gspc__table-wrap { overflow-x: auto; }
.gspc__table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.gspc__table th { text-align: left; font-family: var(--gspc-mono); font-weight: 400; font-size: 12px; color: var(--gspc-muted); padding: 6px 10px 6px 0; border-bottom: 1px solid var(--gspc-border); }
.gspc__table td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--gspc-grid); white-space: nowrap; }
.gspc__table th:last-child, .gspc__table td:last-child { text-align: right; padding-right: 0; }
.gspc__badge { display: inline-block; margin-left: 8px; font-family: var(--gspc-mono); font-size: 11px; padding: 1px 6px; border-radius: 3px; background: var(--gspc-chip); color: var(--gspc-ink); }
.gspc__note { margin: 12px 0 0; font-size: 12px; color: var(--gspc-muted); max-width: 70ch; }

@media (max-width: 640px) {
  .gspc { padding: 20px 16px 16px; }
  .gspc__ranges { width: 100%; justify-content: space-between; }
  .gspc__range { flex: 1; padding: 8px 6px; min-width: 0; }
}

/* Distribution bar chart: its own framed chart under the price chart */
.gspc__bars { border: 1px solid var(--gspc-border); border-radius: 4px; padding: 18px 20px 12px; margin-bottom: 18px; background: var(--gspc-surface); }
.gspc__bars-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.gspc__bars-head .gspc__label { margin-bottom: 0; }
.gspc__bars-sub { font-family: var(--gspc-mono); font-size: 13px; color: var(--gspc-muted); }
.gspc__bars-plot { position: relative; margin-top: 10px; }
.gspc__bar { cursor: default; outline: none; }
.gspc__bar-shape { fill: var(--gspc-accent-2); }
.gspc__bar:hover .gspc__bar-shape, .gspc__bar:focus .gspc__bar-shape { fill: var(--gspc-ink); }
.gspc__bar-value { font-family: var(--gspc-mono); font-size: 11px; fill: var(--gspc-ink); pointer-events: none; }
.gspc__bars-base { stroke: var(--gspc-ink); stroke-opacity: .4; }
.gspc__tip-key--bar::before { border-radius: 1px; background: var(--gspc-accent-2); }
.gspc__empty--bars { padding: 36px 0; }

/* Ex-date markers on the price chart */
.gspc__marker { cursor: pointer; }
.gspc__marker:focus { outline: none; }
.gspc__marker--static { pointer-events: none; cursor: default; }
.gspc__marker-hit { fill: transparent; }
.gspc__marker-rule { stroke: var(--gspc-accent-2); stroke-opacity: .25; stroke-dasharray: 2 3; pointer-events: none; }
.gspc__marker-shape { fill: var(--gspc-surface); stroke: var(--gspc-accent-2); stroke-width: 2; }
.gspc__marker:hover .gspc__marker-shape, .gspc__marker:focus-visible .gspc__marker-shape, .gspc__marker.is-active .gspc__marker-shape { fill: var(--gspc-accent-2); }