/* Gekoppelte Makro-Charts und Kachelansicht (Ä-73): dezenter Umschalter über RSP/SPY, MRX und
   globaler M2 (Symbolknopf wie die Ghost-Knöpfe, DESIGN 5), in der Kachelansicht links davon die
   Zeitraum-Pills. Die Kacheln stehen 2 × 2 in Fensterhöhe (links SPY über RSP, rechts MRX über
   M2), unter 900 px untereinander. Linienfarben als Tokens je Kachel – pages/macro_tiles.js liest
   sie für den Chart. */

.macro-sync__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}

.macro-sync__range {
  margin-right: auto;
}

.macro-sync__toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}

.macro-sync__toggle:hover {
  border-color: var(--border-subtle);
  background: var(--surface-pill);
  color: var(--text-1);
}

.macro-sync__toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.macro-sync__toggle[aria-pressed="true"] {
  border-color: var(--border-subtle);
  background: var(--surface-pill);
  color: var(--text-2);
}

/* Das Symbol zeigt, wohin der Knopf wechselt: Raster in der Liste, Zeilen in den Kacheln. */
.macro-sync__icon--list,
.macro-sync__toggle[aria-pressed="true"] .macro-sync__icon--tiles {
  display: none;
}

.macro-sync__toggle[aria-pressed="true"] .macro-sync__icon--list {
  display: block;
}

/* Zwei Reihen in der Fensterhöhe unter dem Kopf der Seite, nie niedriger als lesbar. */
.sync-tiles {
  display: grid;
  grid-template-areas:
    "spy mrx"
    "rsp m2";
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap-compact);
  height: calc(100dvh - var(--header-height) - 72px);
  min-height: 560px;
  margin-bottom: var(--grid-gap);
}

.sync-tile {
  gap: var(--space-2);
  min-height: 0;
  margin: 0;
}

.sync-tile--spy {
  --tile-line: var(--sky);
  grid-area: spy;
}

.sync-tile--rsp {
  --tile-line: var(--accent);
  grid-area: rsp;
}

.sync-tile--mrx {
  --tile-line: #d4d4d8;
  grid-area: mrx;
}

.sync-tile--m2 {
  --tile-line: var(--accent);
  grid-area: m2;
}

.sync-tile__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--space-2);
  min-width: 0;
  color: var(--text-2);
  font: var(--text-label);
}

.sync-tile__title {
  color: var(--text-1);
  font-weight: 600;
}

.sync-tile__value {
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}

.sync-tile__date {
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* Lightweight Charts misst den Rahmen (autoSize). */
.sync-tile__plot {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.sync-tile__canvas {
  position: absolute;
  inset: 0;
}

.sync-tile__hint {
  margin: auto 0;
  color: var(--text-2);
  font: var(--text-body);
  text-align: center;
}

@media (width < 900px) {
  .sync-tiles {
    grid-template-areas:
      "spy"
      "rsp"
      "mrx"
      "m2";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: 300px;
    height: auto;
    min-height: 0;
  }
}