/* OptionGap — RRG (Relative Rotation Graph) tab */

.rrg-root {
  max-width: 1480px;
  margin: 0 auto;
  padding: 16px 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Controls bar ─────────────────────────────────────────────────── */

.rrg-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.rrg-bench-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--fg-2, #8a91a0);
  font-weight: 500;
}
.rrg-bench-pick select {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--fg-0, #fff);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 26px 7px 12px;
  border-radius: 8px;
  outline: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238a91a0' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.rrg-bench-pick select:focus {
  border-color: hsl(var(--accent-h, 268) 80% 60% / 0.5);
}
.rrg-bench-pick select option {
  background: #10131a;
  color: #f5f6fa;
}
.rrg-asof {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
}
.rrg-asof-l { color: var(--fg-2, #8a91a0); }
.rrg-asof-v { color: var(--fg-0, #fff); font-weight: 600; }

/* ── Timeline / scrubber ──────────────────────────────────────────── */

.rrg-timeline {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rrg-tl-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rrg-tl-row--sub {
  padding-top: 6px;
  border-top: 1px dashed rgba(255,255,255,0.06);
}

.rrg-tl-play, .rrg-tl-step {
  appearance: none;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--fg-0, #fff);
  width: 32px; height: 30px;
  border-radius: 8px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.rrg-tl-play {
  width: 38px;
  background: hsl(var(--accent-h, 268) 70% 55%);
  border-color: transparent;
}
.rrg-tl-play:disabled, .rrg-tl-step:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.rrg-tl-step:hover:not(:disabled) {
  background: rgba(255,255,255,0.08);
}

.rrg-tl-slider, .rrg-tl-tail-slider {
  flex: 1;
  height: 4px;
  accent-color: hsl(var(--accent-h, 268) 70% 55%);
  cursor: pointer;
}
.rrg-tl-tail-slider { max-width: 240px; }

.rrg-tl-date {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 180px;
  justify-content: flex-end;
  margin-left: 8px;
}
.rrg-tl-date-l { font-size: 11px; color: var(--fg-2, #8a91a0); text-transform: uppercase; letter-spacing: 0.04em; }
.rrg-tl-date-v { font-size: 14px; font-weight: 700; color: var(--fg-0, #fff); }

.rrg-tl-tail-l { font-size: 11.5px; color: var(--fg-2, #8a91a0); white-space: nowrap; }
.rrg-tl-tail-v { font-size: 12px; font-weight: 600; min-width: 30px; }
.rrg-tl-tail-range {
  margin-left: auto;
  font-size: 11px;
  color: var(--fg-2, #8a91a0);
}

/* ── Layout grid: chart + side table ──────────────────────────────── */

.rrg-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 14px;
  align-items: start;
}

@media (max-width: 1180px) {
  .rrg-grid { grid-template-columns: 1fr; }
}

/* ── Chart card ───────────────────────────────────────────────────── */

.rrg-chart-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 8px;
  position: relative;
}
.rrg-chart-svg {
  width: 100%;
  height: auto;
  display: block;
}
.rrg-empty {
  padding: 60px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--fg-2, #8a91a0);
}

/* In-SVG type */
.rrg-axis {
  font-size: 10px;
  fill: var(--fg-2, #8a91a0);
  font-family: inherit;
}
.rrg-axis-ttl {
  font-size: 11px;
  fill: var(--fg-1, #c8d0db);
  font-family: inherit;
  font-weight: 500;
  letter-spacing: 0.03em;
}
.rrg-qlbl {
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}
.rrg-qlbl.improving { fill: hsl(199 80% 60%); }
.rrg-qlbl.leading   { fill: hsl(150 70% 55%); }
.rrg-qlbl.lagging   { fill: hsl(0 80% 62%);   }
.rrg-qlbl.weakening { fill: hsl(38 90% 60%);  }

.rrg-trace { cursor: pointer; }
.rrg-trace-lbl {
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  pointer-events: none;
  opacity: 0.85;
}
.rrg-trace-lbl.is-hover {
  font-size: 12px;
  font-weight: 700;
  opacity: 1;
}

/* ── Table card ───────────────────────────────────────────────────── */

.rrg-table-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  max-height: 620px;
  overflow: hidden;
}
.rrg-table-hd {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-1, #c8d0db);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.rrg-table-hint {
  font-size: 11px;
  color: var(--fg-2, #8a91a0);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.rrg-table-scroll {
  overflow: auto;
  flex: 1;
}
.rrg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.rrg-table thead th {
  position: sticky;
  top: 0;
  background: rgba(15, 17, 24, 0.95);
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2, #8a91a0);
  padding: 8px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  z-index: 1;
}
.rrg-table tbody td {
  padding: 7px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}
.rrg-table tbody tr {
  transition: background 0.12s;
}
.rrg-table tbody tr.is-hover {
  background: rgba(255,255,255,0.04);
}
.rrg-table tbody tr.is-off { opacity: 0.4; }

.rrg-th-chk, .rrg-td-chk { width: 28px; text-align: center; padding-left: 10px !important; }
.rrg-td-chk input { accent-color: hsl(var(--accent-h, 268) 70% 55%); cursor: pointer; }

.rrg-tbl-name {
  font-weight: 600;
  color: var(--fg-0, #fff);
  font-size: 12.5px;
}
.rrg-tbl-name.rrg-tbl-link {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.2);
  text-underline-offset: 3px;
  transition: color 0.12s, text-decoration-color 0.12s;
}
.rrg-tbl-name.rrg-tbl-link:hover {
  color: hsl(var(--accent-h, 268) 80% 70%);
  text-decoration-color: hsl(var(--accent-h, 268) 80% 70% / 0.5);
}
.rrg-tbl-sym  { font-size: 10.5px; color: var(--fg-2, #8a91a0); margin-top: 1px; }

.rrg-tbl-d {
  display: inline-block;
  margin-left: 6px;
  font-size: 10.5px;
  font-weight: 500;
}
.rrg-tbl-d.up { color: hsl(150 70% 60%); }
.rrg-tbl-d.dn { color: hsl(0 80% 65%); }

/* ── Quadrant cell: badge + dwell + signal ─────────────────────── */

.rrg-tbl-q-cell {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.rrg-tbl-q {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.rrg-tbl-dwell {
  font-size: 10px;
  font-weight: 500;
  color: var(--fg-2, #8a91a0);
  white-space: nowrap;
}
.rrg-tbl-signal {
  font-size: 10px;
  font-weight: 700;
  cursor: default;
}
.rrg-signal-improving { color: hsl(150 70% 60%); }   /* green ▲ — fresh improving */
.rrg-signal-weak      { color: hsl(38 90% 60%);  }   /* amber ▼ — just turned weak */

/* ── Footer caption ───────────────────────────────────────────────── */

.rrg-foot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--fg-2, #8a91a0);
  padding: 10px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}
.rrg-foot b { color: var(--fg-1, #c8d0db); font-weight: 600; }

.rrg-loading {
  padding: 60px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--fg-2, #8a91a0);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
}

/* ── Benchmark sparkline bar ──────────────────────────────────────── */

.rrg-bench-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 10px 16px;
}
.rrg-bench-l { display: flex; flex-direction: column; gap: 3px; min-width: 130px; }
.rrg-bench-name { font-size: 11px; color: var(--fg-2, #8a91a0); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.rrg-bench-px { font-size: 18px; font-weight: 700; color: var(--fg-0, #fff); }
.rrg-bench-svg { flex: 1; height: 64px; display: block; }


/* ── Mobile (<= 768px) ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .rrg-root { gap: 12px; padding: 0; }

  /* Controls + benchmark stack vertically */
  .rrg-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px;
  }
  .rrg-bench-pick { width: 100%; }
  .rrg-asof { justify-content: flex-end; font-size: 11px; }

  .rrg-bench-bar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
  }
  .rrg-bench-l { min-width: 0; flex: 1 1 auto; }
  .rrg-bench-px { font-size: 16px; }
  .rrg-bench-svg { width: 100%; flex: 1 1 100%; height: 50px; }

  /* Timeline controls — stack vertically, no awkward right-side date overflow */
  .rrg-timeline { padding: 10px; }
  .rrg-tl-row {
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }
  .rrg-tl-row--sub { flex-wrap: wrap; gap: 8px; }
  .rrg-tl-tail-slider { max-width: none; flex: 1 1 100%; }
  .rrg-tl-date {
    flex: 1 1 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    border-top: 1px solid var(--bd-1);
    padding-top: 8px;
  }
  .rrg-tl-date-v { font-size: 13px; white-space: nowrap; }
  .rrg-tl-tail-range {
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 11px;
  }

  /* Charts grid stacks */
  .rrg-grid { grid-template-columns: 1fr; gap: 12px; }
  .rrg-chart-card { padding: 10px; }

  /* Indices table — horizontal scroll */
  .rrg-table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rrg-table-scroll { min-width: 520px; }
  .rrg-table-hd { padding: 10px 12px; flex-wrap: wrap; gap: 6px; }
}