/* 04-insights.css
   data mode toggle and movement explanations

   Split out of styles.css. The numeric prefix is load-bearing: the server
   loads styles.css first, then styles/*.css alphabetically, and the cascade
   here is the original file's order. Renaming these out of sequence changes
   which rule wins.

   A few blocks are filed by position rather than by subject — the mobile
   header sits inside launch, a shared chart rule inside game stats — because
   moving them would reorder the cascade. Worth relocating one at a time with
   a visual check, not in bulk.
   ======================================================================== */

/* ===========================================================================
   Global data mode toggle
   ======================================================================== */

/* One control, two segments — not two buttons that happen to sit together.
   On the unified model both of these can be on at once, and as separate
   rounded pills that read as "two things I pressed" rather than "one switch
   with both halves live". Segmented instead: the buttons sit flush, only the
   outer corners are rounded, and a 1px gap lets the group's own background
   through as the divider between them. That last part is why there is no
   border or shadow doing the dividing — the hairline is the same colour
   whichever combination of segments is filled, so it never has to adapt. */
.data-mode {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-sunk);
}

.data-mode[hidden] {
  display: none;
}

.data-mode button {
  appearance: none;
  border: 0;
  /* Square by default; the ends get their curve back below. */
  border-radius: 0;
  padding: 7px 10px;
  background: transparent;
  color: var(--ink-faint);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color .14s ease,
    color .14s ease,
    box-shadow .14s ease;
}

/* The outer edges follow the group's own corner, one pixel in for its padding.
   `:only-child` so a page offering a single mode still reads as a pill rather
   than a square tab — Master Report pages hide the control entirely, but a
   one-mode page that showed it would look broken. */
.data-mode button:first-child,
.data-mode button:only-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.data-mode button:last-child,
.data-mode button:only-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.data-mode button:hover {
  color: var(--ink);
  background: var(--surface);
}

.data-mode button[aria-disabled="true"] {
  /* The last mode left on. Still looks selected, because it is — only the
     affordance to switch it off is withdrawn. */
  cursor: default;
}

/* On is the accent, filled — not a raised white pill.
   These are two independent switches on the unified model, so "which of these
   is on" has to be readable at a glance rather than inferred from a shadow. A
   lifted-but-pale pressed state reads as "hovered" next to an unpressed one,
   and with both on it read as neither. Filled accent against faint ink cannot
   be misread either way round.
   The same treatment the date-range presets already use, so the two control
   groups either side of the header agree on what selected looks like. */
.data-mode button[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
  box-shadow: none;
}

.data-mode button[aria-pressed="true"]:hover {
  background: var(--accent);
  color: #fff;
}

/* An off switch that can still be turned on gets a hint of where it is going;
   the one that cannot be turned off gets none, since there is nothing to
   preview. */
.data-mode button[aria-pressed="false"]:hover {
  color: var(--accent);
}

@media (max-width: 760px) {
  .data-mode {
    order: -1;
  }

  .data-mode button {
    padding: 7px 9px;
  }
}

/* ===========================================================================
   Data-backed movement explanations
   ======================================================================== */

.chart-insight-marker {
  cursor: pointer;
  outline: none;
}

.chart-insight-marker__connector {
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.8;
  pointer-events: none;
}

.chart-insight-marker__circle {
  stroke-width: 2;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.24));
  transition: transform 0.12s var(--ease), stroke-width 0.12s var(--ease);
}

.chart-insight-marker__glyph {
  fill: var(--ink);
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  pointer-events: none;
  user-select: none;
}

.chart-insight-marker:hover .chart-insight-marker__circle,
.chart-insight-marker:focus .chart-insight-marker__circle {
  stroke-width: 3;
  transform: scale(1.08);
}

.chart-tip--insight {
  width: min(330px, calc(100vw - 24px));
  min-width: 240px;
  padding: 10px 12px;
}

.chart-tip__insight-title {
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  margin-bottom: 7px;
}

.chart-tip__insight-line {
  color: var(--ink-soft);
  line-height: 1.35;
  margin-top: 4px;
}

.chart-tip__hint {
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 10.5px;
  margin-top: 8px;
  padding-top: 7px;
}

.movement-insight {
  margin-top: 20px;
  overflow: hidden;
}

.movement-insight[hidden] {
  display: none;
}

.movement-insight__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px 10px;
}

.movement-insight__eyebrow {
  display: block;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.movement-insight__title {
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
  margin: 0;
}

.movement-insight__close {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink-faint);
  cursor: pointer;
  font: inherit;
  font-size: 20px;
  height: 30px;
  line-height: 25px;
  padding: 0;
  width: 30px;
}

.movement-insight__close:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.movement-insight__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 11px;
  padding: 0 18px 12px;
}

.movement-insight__confidence {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-soft);
  padding: 3px 7px;
}

.movement-insight__confidence.is-high,
.movement-insight__confidence.is-medium {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  color: var(--accent);
}

.movement-insight__body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.movement-insight__group {
  min-width: 0;
  padding: 14px 18px;
}

.movement-insight__group + .movement-insight__group {
  border-left: 1px solid var(--line);
}

.movement-insight__group h4 {
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.movement-insight__group ul {
  display: grid;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.movement-insight__group li,
.movement-insight__empty {
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
}

.movement-insight__empty {
  grid-column: 1 / -1;
  padding: 14px 18px;
}

.movement-insight__foot {
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 10.5px;
  line-height: 1.4;
  margin: 0;
  padding: 10px 18px 12px;
}

@media (max-width: 900px) {
  .movement-insight__body {
    grid-template-columns: 1fr;
  }

  .movement-insight__group + .movement-insight__group {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* ===========================================================================
   Movement explanations V3 — business-readable movers
   ======================================================================== */

.chart-tip--insight {
  width: min(390px, calc(100vw - 24px));
}

.chart-tip__event {
  margin: 3px 0 9px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 650;
}

.chart-tip__driver {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.chart-tip__driver-kind {
  color: var(--ink-faint);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.chart-tip__driver-name {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-tip__driver-values {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 10.5px;
  white-space: nowrap;
}

.chart-tip__driver-values b {
  color: var(--ink);
  font-weight: 650;
}

.chart-tip__driver-values em {
  font-style: normal;
  font-weight: 700;
}

.chart-tip__driver-values .is-up,
.movement-insight .is-up {
  color: var(--positive);
}

.chart-tip__driver-values .is-down,
.movement-insight .is-down {
  color: var(--negative);
}

.chart-tip__driver-values .is-flat,
.movement-insight .is-flat {
  color: var(--ink-faint);
}

.movement-insight__body {
  display: block;
}

.movement-insight__event-card {
  margin: 16px 18px 0;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.movement-insight__section {
  padding: 16px 18px;
}

.movement-insight__section + .movement-insight__section {
  border-top: 1px solid var(--line);
}

.movement-insight__section-label {
  display: block;
  margin: 0 0 9px;
  color: var(--ink-faint);
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.movement-insight__event-title {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.movement-insight__event-detail {
  margin-top: 5px;
  color: var(--ink-soft);
  font-size: 11px;
}

.movement-insight__drivers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.movement-insight__driver-card {
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-sunk) 70%, transparent);
}

.movement-insight__driver-label {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-faint);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.movement-insight__driver-name {
  overflow: hidden;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.movement-insight__driver-movement {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.movement-insight__amount {
  font-size: 13px;
  font-weight: 700;
}

.movement-insight__percent {
  font-size: 11px;
  font-weight: 750;
}

.movement-insight__share {
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-faint);
  font-size: 9.5px;
  font-weight: 650;
}

.movement-insight__driver-context {
  margin-top: 6px;
  color: var(--ink-faint);
  font-size: 10px;
  line-height: 1.35;
}

.movement-insight__signals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.movement-insight__signal {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 135px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface-sunk) 62%, transparent);
}

.movement-insight__signal-label {
  color: var(--ink-faint);
  font-size: 10px;
}

.movement-insight__signal-value {
  font-size: 11px;
  font-weight: 750;
}

.movement-insight__summary {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .movement-insight__drivers {
    grid-template-columns: 1fr;
  }

  .chart-tip__driver {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .chart-tip__driver-values {
    grid-column: 2;
  }
}