/* ============================================================
   Zenxo strategy card · the redesigned dashboard card, coded so it
   works: point at delete and it spells itself out (and the versions
   pill steps back), open the versions list, switch leg tabs, and
   flip it between "tested" and "not tested yet", where the orbit
   runs. It sits straight on the section, no plate behind it.
   Behaviour lives in scripts/meet-zen.js (initCard).
   ============================================================ */

.zc-plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 8px 0 16px;            /* no plate: the card sits on the section itself */
}
/* the caption lines up under the card, not the empty column edge */
.zc-plate + figcaption { text-align: center; }

/* state toggle: under the paragraph in the text column, left-aligned with it */
.spread__text > .zc-switch { margin-top: 28px; }
.zc-switch {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .08);
}
.zc-switch button {
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: rgba(0, 0, 0, .55);
  font: 500 11px/1 var(--font);
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.zc-switch button[aria-pressed="true"] { background: #fff; color: #1a1a1a; }

/* zero-specificity reset, so each button class below sets its own size */
:where(.zc button) { font-family: inherit; color: inherit; cursor: pointer; }

.zc {
  display: flex;
  flex-direction: column;
  width: min(300px, 100%);
  min-height: 470px;
  padding: 18px 18px 20px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .25);
  color: #1a1a1a;
  font-family: var(--font);
}

/* header */
.zc__head { display: flex; align-items: center; gap: 10px; }
/* not tested yet: the header steps back and versions shrink to an icon */
.zc[data-state="ready"] .zc__name { opacity: .45; }
.zc[data-state="ready"] .zc__icon { opacity: .75; }
.zc[data-state="ready"] .zc__ver .zc__label,
.zc[data-state="ready"] .zc__ver em { max-width: 0; opacity: 0; }
.zc__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 7px;
  background: linear-gradient(145deg, #FF8A3D, #F2601A);
}
.zc__icon svg { width: 16px; height: 16px; }
.zc__name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zc__name b { font-size: 13px; font-weight: 500; }
.zc__name small { font-size: 9.5px; color: #8a8a8a; }
.zc__tools { display: flex; align-items: center; gap: 6px; align-self: flex-start; }
.zc__tools svg { width: 10px; height: 10px; }
.zc__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 17px;
  border-radius: 4px;
  min-width: 17px;
  padding: 0 5px;
  justify-content: center;
  border: 0;
  font-size: 8.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .2s, padding .25s ease, gap .25s ease;
}
/* a pill with its words folded away is a 17px square: no leftover padding or gap.
   Applies to delete at rest, and to versions while delete is open or the
   strategy is untested. */
.zc__del,
.zc__tools:has(.zc__del:hover, .zc__del:focus-visible) .zc__ver,
.zc[data-state="ready"] .zc__ver { padding: 0; gap: 0; }
.zc__tools:has(.zc__del:hover, .zc__del:focus-visible) .zc__del { padding: 0 6px; gap: 4px; }
.zc__pill em { font-style: normal; font-size: 7px; }

/* Delete is an icon until you reach for it; then it spells itself out and
   the versions pill steps back to an icon to make room. */
.zc__label, .zc__pill em {
  display: inline-block;
  overflow: hidden;
  max-width: 60px;
  transition: max-width .25s ease, opacity .2s ease;
}
.zc__del .zc__label { max-width: 0; opacity: 0; }
.zc__tools:has(.zc__del:hover, .zc__del:focus-visible) .zc__del .zc__label { max-width: 40px; opacity: 1; }
.zc__tools:has(.zc__del:hover, .zc__del:focus-visible) .zc__ver .zc__label,
.zc__tools:has(.zc__del:hover, .zc__del:focus-visible) .zc__ver em { max-width: 0; opacity: 0; }
.zc__del:hover { background: #FBD5D5; }
.zc__ver:hover, .zc__ver[aria-expanded="true"] { background: #D9E5FB; }

/* versions list */
/* flex, not inline: an inline wrapper sits on the text baseline and drops the pill */
.zc__versions { position: relative; display: flex; }
.zc__menu {
  position: absolute;
  z-index: 2;
  top: calc(100% + 4px);
  right: 0;
  display: flex;
  flex-direction: column;
  min-width: 96px;
  padding: 4px;
  border: 1px solid #ececec;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .25);
}
.zc__menu[hidden] { display: none; }
.zc__menu button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border: 0;
  border-radius: 4px;
  background: none;
  font-size: 10px;
  text-align: left;
}
.zc__menu button:hover { background: #f4f4f4; }
.zc__menu button[aria-checked="true"] { color: #3D6BD6; font-weight: 600; }
.zc__menu small { font-size: 8px; color: #8a8a8a; font-weight: 400; }
.is--blue { background: #E7EEFC; color: #3D6BD6; }
.is--red  { background: #FDE6E6; color: #E04848; }

/* numbers */
.zc__pl { display: flex; align-items: baseline; gap: 22px; margin-top: 20px; }
.zc__pl b { font-size: 25px; font-weight: 500; letter-spacing: -.01em; color: #E5453B; }
.zc__pl small, .zc__stats small { font-size: 8.5px; color: #8a8a8a; letter-spacing: .02em; }
.zc__stats { display: flex; justify-content: space-between; margin-top: 18px; font-size: 13px; }
.zc__stats span { display: flex; flex-direction: column; gap: 1px; }
.zc__chart { display: block; width: 100%; height: 82px; margin-top: 10px; overflow: visible; }
.zc__chart text { font-size: 6px; fill: #8a8a8a; }

/* legs */
.zc__tabs {
  display: flex;
  gap: 30px;
  margin-top: 20px;
  border-bottom: 1px solid #ececec;
  font-size: 8.5px;
  color: #8a8a8a;
}
.zc__tabs button {
  padding: 0 14px 7px;
  border: 0;
  border-bottom: 1.5px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: #8a8a8a;
  font-size: 8.5px;
}
.zc__tabs button[aria-selected="true"] { color: #1a1a1a; font-weight: 600; border-bottom-color: #1a1a1a; }
.zc__empty { margin: 0; padding: 22px 14px; font-size: 10px; color: #8a8a8a; }
.zc__leg {
  display: grid;
  grid-template-columns: 1.6fr 1fr .5fr 1.2fr .4fr;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 9.5px;
}
.zc__leg > span:first-child { font-size: 8px; letter-spacing: .12em; color: #7a7a7a; }
.zc__leg i {
  justify-self: start;
  padding: 1px 5px;
  border-radius: 8px;
  font-style: normal;
  font-size: 6.5px;
  font-weight: 600;
}
.zc__leg i.is--sell { border: 1px solid #F09A9A; color: #E04848; background: #FFF4F4; }
.zc__leg i.is--buy  { border: 1px solid #8FD9A8; color: #1E9E55; background: #F1FBF4; }

/* actions */
.zc__actions { display: flex; gap: 14px; margin-top: auto; padding-top: 22px; }
.zc__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  background: #fff;
  font-size: 11px;
  transition: background .2s, border-color .2s;
}
.zc__btn:hover { background: #f5f5f5; border-color: #cfcfcf; }
.zc__btn.is--dark:hover { background: #222; }
.zc__btn em { font-style: normal; font-size: 10px; }
/* icon and label share one centre line: the icon is a fixed box that
   can't shrink, the label sits on line-height 1 so no baseline gap pushes it */
.zc__btn { line-height: 1; }
.zc__btn svg { flex: none; display: block; width: 13px; height: 13px; }
.zc__btn.is--dark { border-color: #2e2e2e; background: #333; color: #fff; }

/* the two views swap with a short fade; the P&L curve draws in each time */
.zc__view { display: flex; flex-direction: column; flex: 1; }
.zc__view[hidden] { display: none; }
/* ── motion ─────────────────────────────────────────────────────────────
   meet-zen.js adds .is-armed (hidden, waiting) and then .is-in when the card
   scrolls into view or its state flips. The card rises, then its parts follow
   top to bottom: number, stats, curve (drawn), tabs, each leg row, buttons.
   Net P/L counts up in JS alongside. Without JS or with reduced motion the
   card is simply there. */
@media (prefers-reduced-motion: no-preference) {
  .zc {
    transition: opacity .6s ease, transform .8s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease;
  }
  .zc.is-armed:not(.is-in) { opacity: 0; transform: translateY(28px); }
  .zc.is-in:hover { transform: translateY(-4px); box-shadow: 0 32px 56px -24px rgba(0, 0, 0, .32); }

  .zc.is-armed .zc__view > *,
  .zc.is-armed .zc__leg { opacity: 0; }
  .zc.is-in .zc__view > *,
  .zc.is-in .zc__leg { animation: zcRise .6s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--d, 0ms); }
  .zc.is-in .zc__view > :nth-child(1) { --d: 150ms; }
  .zc.is-in .zc__view > :nth-child(2) { --d: 230ms; }
  .zc.is-in .zc__view > :nth-child(3) { --d: 310ms; }
  .zc.is-in .zc__view > :nth-child(4) { --d: 390ms; }
  .zc.is-in .zc__view > :nth-child(5) { --d: 430ms; }
  .zc.is-in .zc__view > :nth-child(6) { --d: 470ms; }
  .zc.is-in .zc__view > :nth-child(7) { --d: 700ms; }
  .zc.is-in .zc__leg:nth-child(1) { --d: 480ms; }
  .zc.is-in .zc__leg:nth-child(2) { --d: 540ms; }
  .zc.is-in .zc__leg:nth-child(3) { --d: 600ms; }
  .zc.is-in .zc__leg:nth-child(4) { --d: 660ms; }

  .zc .zc__curve { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .zc.is-in .zc__view.is--tested .zc__curve { animation: zcDraw 1.6s cubic-bezier(.65, 0, .35, 1) .35s both; }
  .zc:not(.is-armed) .zc__curve { stroke-dashoffset: 0; }

  /* the orbit fades up from the centre */
  .zc.is-in .zc__view.is--ready .zc__orbit { animation: zcOrbitIn 1s cubic-bezier(.16, 1, .3, 1) .25s both; }
}
@keyframes zcRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes zcDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes zcOrbitIn { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }

/* ── ready to test: the waiting state ─────────────────────────────────── */
.zc__ready {
  margin: 22px 0 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
  color: #555;
}
.zc__ready em { font-style: normal; font-weight: 600; color: #FF6F20; }
.zc__orbit { display: grid; place-items: center; margin-top: 4px; }
.zc__orbit svg { width: 168px; height: 168px; overflow: visible; }

/* Three rings turn at different speeds and directions, each carrying a dot,
   while the gear turns slowly in the middle. Nothing loops in step, so it
   never reads as a spinner stuck on repeat. */
.zc__ring, .zc__gear { transform-origin: 80px 80px; transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
  .zc__ring.is--1 { animation: zcSpin 5s linear infinite; }
  .zc__ring.is--2 { animation: zcSpin 8s linear infinite reverse; }
  .zc__ring.is--3 { animation: zcSpin 12s linear infinite; }
  .zc__gear       { animation: zcSpin 9s linear infinite; }
}
@keyframes zcSpin { to { transform: rotate(360deg); } }