/* --- Chart-Kachel und Mini-Kerzenchart (DESIGN 5, AP 3.6, Ä-17) -------------------------------
   Raster aus Kacheln, je Kachel ein Link in den Chart (das Kürzel deckt sie mit ::after ab wie
   die Tabellenzeile). Der Mini-Kerzenchart ist ein SVG vom Server (core/minichart.py), auf die
   Breite der Kachel gezogen (preserveAspectRatio="none"); Striche behalten mit
   `vector-effect: non-scaling-stroke` ihre Stärke in Bildpunkten. Farben wie DESIGN 6:
   Kerzen auf/ab, Zone Bernstein, Impuls in Richtungsfarbe, laufend gestrichelt, beendet halb
   deckend, das Ereignis mit Bernstein-Glow und einer Bernstein-Strecke über seine Tage. */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--grid-gap-compact);
  margin: 0;
  padding: 0;
  list-style: none;
}

.chart-grid > li {
  display: flex;
  min-width: 0;
}

.chart-tile {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: var(--space-3) var(--space-4) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-tile);
  background: var(--surface-1);
  cursor: pointer;
  transition: border-color var(--ease);
  container: chart-tile / inline-size;
}

.chart-tile:hover {
  border-color: var(--border-strong);
}

.chart-tile:has(.chart-tile__link:focus-visible) {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.chart-tile__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

/* Links Kürzel und Name, rechts Kurs und „bis …“ – je zwei Zeilen, damit die Charts einer Reihe
   auf gleicher Höhe beginnen, ob ein Wert gekennzeichnet ist oder nicht. */
.chart-tile__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Einzeilig: Ein umbrechender Chip schöbe den Chart dieser Kachel nach unten. */
.chart-tile__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.chart-tile__link {
  color: var(--text-1);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.chart-tile__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.chart-tile__link:focus-visible {
  outline: none;
}

.chart-tile__price {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
}

/* „Kurse bis …“ liegt über dem Link – sonst erreichte der Zeiger seinen Tooltip (title) nie. */
.chart-tile__flag {
  position: relative;
  z-index: 2;
}

.chart-tile__name {
  overflow: hidden;
  color: var(--text-2);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Signal und Nebenangabe je genau eine Zeile: Umbräche eine, begänne der Chart dieser Kachel
   tiefer als die ihrer Reihe (Review AP 3.6). */
.chart-tile__signal {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 22px;
  min-width: 0;
  margin: 0;
  color: var(--text-2);
  font-size: 0.75rem;
  white-space: nowrap;
}

.chart-tile__signal > .signal-badge,
.chart-tile__state {
  flex: none;
}

/* Die Zeile läuft nie über die Kachel hinaus: Wird es eng, kürzen Richtung und Beschriftungen
   (Ellipse); Badge, Wert und Symbole bleiben ganz. */
.chart-tile__direction {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Die Kennzahl, nach der sortiert ist: rechts, der Wert immer ganz, die Beschriftung notfalls
   gekürzt. */
.chart-tile__metric {
  display: inline-flex;
  gap: 4px;
  min-width: 0;
  margin-left: auto;
}

.chart-tile__metric-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bewertung als Symbole: Beschriftung (vorläufig) und Symbole stehen als eigene Teile in der Zeile
   – die Beschriftung kürzt notfalls, die Symbole nie. Neben einer sortierten Kennzahl rücken sie an sie
   heran. Ihr Tooltip liegt über dem Link (sonst erreichte ihn der Zeiger nie) und öffnet nach
   unten über den Chart, rechtsbündig. */
.chart-tile__stars {
  display: contents;
}

.chart-tile__stars > :first-child {
  margin-left: auto;
}

.chart-tile__metric + .chart-tile__stars > :first-child {
  margin-left: 0;
}

.chart-tile__stars > .chart-tile__metric-label {
  min-width: 0;
  margin-right: -4px;
}

.chart-tile__stars .scans__metric {
  z-index: 2;
  flex: none;
  max-width: none;
}

/* Schmale Kachel: statt der Symbolreihe die Kurzform „★ 3/4“ bzw. „☆ ≤3“ (components/stars.html),
   ohne Beschriftung – „≤“ und der Umriss sagen „vorläufig“, ausgeschrieben steht es im Tooltip.
   Unter 270 px hätte die Reihe neben Badge und Richtung keinen Platz mehr (1024 px: drei Kacheln). */
@container chart-tile (width < 270px) {
  .chart-tile .stars--full,
  .chart-tile__stars > .chart-tile__metric-label {
    display: none;
  }

  .chart-tile .stars.stars--short {
    display: inline-flex;
  }

  .chart-tile__stars > .chart-tile__metric-label + .scans__metric {
    margin-left: auto;
  }

  .chart-tile__metric + .chart-tile__stars > .chart-tile__metric-label + .scans__metric {
    margin-left: 0;
  }
}

.chart-tile__stars .cell-note__full {
  top: calc(100% + 4px);
  bottom: auto;
}

.chart-tile__metric strong {
  flex: none;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.chart-tile__details {
  overflow: hidden;
  min-height: 16px;
  margin: -2px 0 0;
  color: var(--text-2);
  font-size: 0.75rem;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Gekürzt: über dem Link, damit der Zeiger den Tooltip (title) erreicht. */
.chart-tile__details[title] {
  position: relative;
  z-index: 2;
}

/* Bezugsrahmen für den Hinweis „Ereignis vor dem Zeitraum“. Als positioniertes Element läge der
   Chart über dem Link (::after) – Klicks gehen deshalb durch ihn hindurch in den Link. */
.chart-tile__chart {
  position: relative;
  height: 120px;
  margin-top: var(--space-1);
  pointer-events: none;
}

/* „Ereignis vor dem Zeitraum“: klein oben links im Chart, ohne ihn zu verdecken. */
.chart-tile__outside {
  position: absolute;
  top: 0;
  left: 0;
  padding: 1px 6px;
  border: 1px solid rgba(240, 174, 102, 0.35);
  border-radius: 6px;
  background: var(--surface-1);
  color: var(--text-2);
  font-size: 0.6875rem;
  line-height: 16px;
}

.chart-tile__missing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 100%;
  margin: 0;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-2);
  font-size: 0.8125rem;
}

.chart-tile__note {
  display: block;
  font-size: 0.75rem;
}

/* Die Notiz steht unten links: Ihr Tooltip beginnt an ihrer linken Kante und öffnet nach oben. */
.chart-tile__note .cell-note__full {
  left: 0;
  right: auto;
}

.mini-chart {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mini-chart path,
.mini-chart rect {
  vector-effect: non-scaling-stroke;
}

.mini-chart__wick {
  fill: none;
  stroke-width: 1px;
}

.mini-chart__wick--up { stroke: var(--pos); }
.mini-chart__wick--down { stroke: var(--neg); }
.mini-chart__body--up { fill: var(--pos); }
.mini-chart__body--down { fill: var(--neg); }

.mini-chart__span {
  fill: rgba(240, 174, 102, 0.12);
}

.mini-chart__zone {
  fill: rgba(240, 174, 102, 0.1);
  stroke: rgba(240, 174, 102, 0.55);
  stroke-width: 2px;
  filter: drop-shadow(0 0 4px rgba(240, 174, 102, 0.55));
}

.mini-chart__impulse {
  fill: none;
  stroke-width: 2.5px;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(240, 174, 102, 0.85));
}

.mini-chart__ends {
  fill: none;
  stroke-width: 7px;
  stroke-linecap: round;
}

.mini-chart__impulse--up,
.mini-chart__ends--up { stroke: var(--pos); }
.mini-chart__impulse--down,
.mini-chart__ends--down { stroke: var(--neg); }
.mini-chart__impulse--neutral,
.mini-chart__ends--neutral { stroke: var(--accent); }

.mini-chart__zone--running,
.mini-chart__impulse--running {
  stroke-dasharray: 5 4;
}

.mini-chart__zone--faded,
.mini-chart__impulse--faded,
.mini-chart__ends--faded {
  opacity: 0.5;
}

/* --- Werkzeuge im Fuß der Watchlist-Kachel (Ä-83) ---------------------------------------------
   Links der Griff (Punkte, nur Zeichen – die ganze Kachel bzw. Zeile zieht), rechts das Menü
   „Verschieben nach …“ (öffnet nach oben über den eigenen Chart, die gewählte Untersektion mit
   Haken und gesperrt), das Notiz-Symbol und „✕“. Alles über dem Link der Kachel (z-index). */
.drag-grip {
  position: relative;
  z-index: 2;
  display: inline-block;
  flex: none;
  width: 10px;
  height: 16px;
  margin-right: auto;
  background-image: radial-gradient(circle, var(--text-3) 1.25px, transparent 1.6px);
  background-size: 5px 5px;
  cursor: grab;
}

.move-menu,
.tile-remove {
  position: relative;
  z-index: 2;
}

.move-menu[open] {
  z-index: 4;
}

.move-menu__button,
.tile-remove__button {
  width: 32px;
  padding: 0;
  border-radius: 50%;
}

.move-menu__button {
  list-style: none;
}

.move-menu__button::-webkit-details-marker {
  display: none;
}

.move-menu__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  display: flex;
  flex-direction: column;
  width: max-content;
  min-width: 200px;
  max-width: min(280px, 80vw);
  max-height: 220px;
  overflow-y: auto;
  padding: var(--space-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-input);
  background: var(--surface-2);
  box-shadow: var(--shadow-float);
}

.move-menu__title {
  margin: 0;
  padding: 6px 10px 4px;
  color: var(--text-2);
  font: var(--text-label);
}

.move-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: 6px 10px 6px calc(26px + var(--space-2));
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text-1);
  font: var(--text-body);
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.move-menu__item:hover,
.move-menu__item:focus-visible {
  outline: none;
  background: var(--surface-pill);
}

.move-menu__item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.move-menu__item:disabled {
  padding-left: 10px;
  color: var(--text-2);
  background: none;
  cursor: default;
}

.move-menu__item:disabled .icon {
  color: var(--accent);
}