/* A how-it-works clip (ClipPlayer.tsx): a clear poster, play on tap, a calm frame in the light popups. */
.zs-clip {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: #eef0f3;
  border: 1px solid #e3e1db;
  box-shadow: 0 1px 2px rgba(20, 23, 31, 0.06), 0 10px 28px rgba(20, 23, 31, 0.08);
  isolation: isolate;
}
.zs-clip img, .zs-clip video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.zs-clip-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  color: #14171f;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(20, 23, 31, 0.1);
  box-shadow: 0 2px 8px rgba(20, 23, 31, 0.1);
  pointer-events: none;
}
/* the play button sits in the middle until the clip runs, then moves to a corner out of the way */
.zs-clip-play {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #0d1a00;
  background: #a3ff12;
  box-shadow: 0 0 0 6px rgba(163, 255, 18, 0.28), 0 10px 24px rgba(20, 23, 31, 0.22);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
.zs-clip-play svg { margin-left: 2px; }
.zs-clip-play:hover { transform: scale(1.06); }
.zs-clip-play:focus-visible { outline: 3px solid #14171f; outline-offset: 3px; }
.zs-clip.is-playing .zs-clip-play {
  left: auto;
  top: auto;
  right: 10px;
  bottom: 10px;
  width: 40px;
  height: 40px;
  margin: 0;
  color: #fff;
  background: rgba(20, 23, 31, 0.62);
  box-shadow: none;
  opacity: 0.85;
}
.zs-clip.is-playing .zs-clip-play svg { margin: 0; }
.zs-clip.is-playing .zs-clip-play:hover { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .zs-clip-play { transition: none; }
}

/*
 * Side panels and small touch / direction fixes (scoped to the chart workspace).
 * Kept apart from styles.css so it can land on its own; same tokens as styles.css.
 */

/* ---- object tree: the chart's asset, then its compares, indicators and drawings ---- */
.zs-ws .zs-objtree { padding-bottom: 12px; }
.zs-ws .zs-obj-current {
  display: flex; align-items: center; gap: 10px; margin: 10px 12px 4px; padding: 10px 12px;
  border: 1px solid var(--zs-border); border-radius: 8px; background: var(--zs-surface);
}
.zs-ws .zs-obj-current-main { display: grid; min-width: 0; flex: 1; gap: 2px; }
.zs-ws .zs-obj-current-tk { font-size: 14px; font-weight: 600; color: var(--zs-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs-ws[dir='rtl'] .zs-obj-current-tk { text-align: right; }
/* line-height leaves room for Arabic / Hebrew marks above and below (no clipped glyphs) */
.zs-ws .zs-obj-current-name { font-size: 12px; line-height: 1.5; color: var(--zs-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs-ws .zs-obj-current-meta { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; flex: none; }
.zs-ws .zs-obj-none { padding: 2px 12px 6px; font-size: 12px; line-height: 1.6; color: var(--zs-muted); }
.zs-ws .zs-obj-empty { display: grid; justify-items: center; gap: 6px; padding: 18px 20px 8px; text-align: center; }
.zs-ws .zs-obj-empty .zs-empty-mark { width: 48px; height: 48px; }
.zs-ws .zs-obj-empty-title { font-size: 13px; font-weight: 500; line-height: 1.6; color: var(--zs-text); }
.zs-ws .zs-obj-empty-hint { font-size: 12px; line-height: 1.7; color: var(--zs-muted); max-width: 260px; }
.zs-ws .zs-obj-row:focus-visible { outline: 2px solid var(--zs-focus); outline-offset: -2px; }
/* the selection mark sits on the row's start edge in both directions */
.zs-ws[dir='rtl'] .zs-obj-row.is-selected { box-shadow: inset -3px 0 0 var(--zs-link); }

/* ---- replay bar: controls follow the page direction (it was right-to-left in English too) ---- */
.zs-ws[dir='ltr'] .zs-replay { direction: ltr; }

/*
 * ---- touch: the legend's title and collapse button get a 44 px hit area without moving the legend ----
 * Insets count from the padding box (1 px borders). The title grows downwards (the toolbar sits right
 * above it); the legend is always LTR, so the collapse button grows more to its right than its left.
 * z-index keeps the hit area above the legend lines it overlaps. Measured: 113x45 and 45x44.
 */
@media (pointer: coarse) {
  .zs-ws .zs-legend-title, .zs-ws .zs-collapse { position: relative; z-index: 1; }
  .zs-ws .zs-legend-title::after { content: ''; position: absolute; inset: -3px -5px -20px; }
  .zs-ws .zs-collapse::after { content: ''; position: absolute; inset: -14px -16px -14px -12px; }
}