/* =============================================================================
   Playbooks — page styles (prefix pb-)

   Layout and the diagram kit only. Every form control, chip, empty state and
   disclaimer on this page comes from tools-shared.css; every card, badge,
   button and stat comes from kit.css. If a rule here looks like it belongs in
   one of those, it does — move it rather than copy it.

   The diagram section (5) is most of this file. The SVGs carry no presentation
   attributes at all, so the whole visual language of the twelve families lives
   in these classes and every colour stays a token.
   ========================================================================== */

/* =============================================================================
   1. PAGE SHELL
   ========================================================================== */
html[data-ui='v2'][data-v2] .pb-page {
  padding-bottom: var(--v2-s8);
}

/* The one line that says what a playbook is for. Sits under the subtitle
   because a reader who already knows can skip both in one glance. */
html[data-ui='v2'][data-v2] .pb-howto {
  margin: var(--v2-s3) 0 0;
  max-width: 74ch;
  font: 400 var(--v2-t-sm)/1.6 var(--v2-sans);
  color: var(--v2-ink-3);
}
html[data-ui='v2'][data-v2] .pb-howto strong {
  color: var(--v2-ink-2);
  font-weight: 600;
}

/* =============================================================================
   2. FILTER BAR
   -----------------------------------------------------------------------------
   Four chip facets and a search box. Every facet is multi-select and additive
   within itself, AND across facets, which is the only combination a trader can
   predict without a legend.
   ========================================================================== */
html[data-ui='v2'][data-v2] .pb-filters {
  align-items: flex-start;
  gap: var(--v2-s4);
  margin-top: var(--v2-s6);
}
html[data-ui='v2'][data-v2] .pb-facets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v2-s4) var(--v2-s5);
  flex: 1 1 460px;
  min-width: 0;
}
html[data-ui='v2'][data-v2] .pb-facet {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s2);
  min-width: 0;
}
html[data-ui='v2'][data-v2] .pb-facet-label {
  font: 600 var(--v2-t-xs)/1.4 var(--v2-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-ink-3);
}
html[data-ui='v2'][data-v2] .pb-search-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s2);
  flex: 0 1 260px;
  min-width: 0;
}
html[data-ui='v2'][data-v2] .pb-filter-actions {
  display: flex;
  align-items: flex-end;
  gap: var(--v2-s2);
}
html[data-ui='v2'][data-v2] .pb-count {
  margin: var(--v2-s4) 0 var(--v2-s3);
  font: 400 var(--v2-t-sm)/1.5 var(--v2-sans);
  color: var(--v2-ink-3);
  font-variant-numeric: tabular-nums;
}

/* Timeframe chips are the only place a number is a label, so they get the
   mono face to stop 1h and 1d looking like prose. */
html[data-ui='v2'][data-v2] .pb-chip-tf {
  font-family: var(--v2-mono);
  font-variant-numeric: tabular-nums;
}

/* =============================================================================
   3. CARD GRID
   ========================================================================== */
html[data-ui='v2'][data-v2] .pb-grid {
  display: grid;
  gap: var(--v2-s4);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* The whole card is the control — a card with a "read more" link inside it
   gives the pointer two targets for one action. */
html[data-ui='v2'][data-v2] .pb-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: var(--v2-r-lg);
  background: var(--v2-surface);
  box-shadow: var(--v2-e1);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow var(--v2-fast) var(--v2-ease),
              transform var(--v2-fast) var(--v2-ease);
}
html[data-ui='v2'][data-v2] .pb-card:hover {
  box-shadow: var(--v2-e2);
  transform: translateY(-1px);
}
html[data-ui='v2'][data-v2] .pb-card:focus-visible {
  outline: none;
  box-shadow: var(--v2-ring), var(--v2-e2);
}
html[data-ui='v2'][data-v2] .pb-card-dia {
  display: block;
  padding: var(--v2-s3) var(--v2-s3) 0;
  background: var(--v2-sunk);
}
html[data-ui='v2'][data-v2] .pb-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s2);
  padding: var(--v2-s4);
  flex: 1 1 auto;
}
html[data-ui='v2'][data-v2] .pb-card-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v2-s2);
}
html[data-ui='v2'][data-v2] .pb-card-name {
  font: 600 var(--v2-t-lg)/1.3 var(--v2-sans);
  letter-spacing: var(--v2-tight);
  color: var(--v2-ink);
}
html[data-ui='v2'][data-v2] .pb-card-line {
  font: 400 var(--v2-t-sm)/1.55 var(--v2-sans);
  color: var(--v2-ink-2);
}
html[data-ui='v2'][data-v2] .pb-card-chips { margin-top: var(--v2-s1); }
html[data-ui='v2'][data-v2] .pb-card-foot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--v2-s2);
  margin-top: auto;
  padding-top: var(--v2-s3);
  box-shadow: inset 0 1px 0 0 var(--v2-line);
}
html[data-ui='v2'][data-v2] .pb-card-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
html[data-ui='v2'][data-v2] .pb-card-stat-k {
  font: 500 var(--v2-t-xs)/1.3 var(--v2-sans);
  color: var(--v2-ink-3);
}
html[data-ui='v2'][data-v2] .pb-card-stat-v {
  font: 550 var(--v2-t-xs)/1.35 var(--v2-mono);
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
  overflow-wrap: anywhere;
}
html[data-ui='v2'][data-v2] .pb-empty { grid-column: 1 / -1; }

/* =============================================================================
   4. DETAIL VIEW
   -----------------------------------------------------------------------------
   A full-width takeover rather than a drawer: the record is 1,500 words and a
   drawer would put it in a 420px column.
   ========================================================================== */
html[data-ui='v2'][data-v2] .pb-detail-inner {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s5);
}
html[data-ui='v2'][data-v2] .pb-back { align-self: flex-start; }
html[data-ui='v2'][data-v2] .pb-detail-head { margin-top: var(--v2-s2); }
html[data-ui='v2'][data-v2] .pb-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v2-s2);
  margin-bottom: var(--v2-s3);
}
html[data-ui='v2'][data-v2] .pb-detail-title { font-size: var(--v2-t-2xl); }

html[data-ui='v2'][data-v2] .pb-hero {
  display: grid;
  gap: var(--v2-s5);
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  padding: var(--v2-s5);
}
/* Stretched to the copy column's height with the drawing centred inside it,
   rather than left sitting at the top of a tall empty well. */
html[data-ui='v2'][data-v2] .pb-hero-dia {
  display: grid;
  align-content: center;
  padding: var(--v2-s4);
  border-radius: var(--v2-r-md);
  background: var(--v2-sunk);
}
html[data-ui='v2'][data-v2] .pb-hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s3);
  min-width: 0;
}
html[data-ui='v2'][data-v2] .pb-hero-copy .mi-body { max-width: 62ch; }

html[data-ui='v2'][data-v2] .pb-profile {
  display: grid;
  gap: var(--v2-s3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: var(--v2-s2);
}
html[data-ui='v2'][data-v2] .pb-stat {
  padding: var(--v2-s3);
  border-radius: var(--v2-r-md);
  background: var(--v2-sunk-2);
}
/* Not .mi-stat-value: these are short sentences, not figures, so they need to
   wrap and must not inherit the display-size numeral treatment. */
html[data-ui='v2'][data-v2] .pb-stat-value {
  display: block;
  margin-top: var(--v2-s1);
  font: 500 var(--v2-t-sm)/1.45 var(--v2-sans);
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
}

html[data-ui='v2'][data-v2] .pb-block { padding: var(--v2-s5); }

/* Conditions checklist. The boxes are a real tool — a trader can tick them
   against a live chart — so they behave like a form, not like decoration. */
html[data-ui='v2'][data-v2] .pb-check-list {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s2);
  margin: var(--v2-s4) 0 0;
  padding: 0;
  list-style: none;
}
html[data-ui='v2'][data-v2] .pb-check-item {
  display: flex;
  align-items: flex-start;
  gap: var(--v2-s3);
  padding: var(--v2-s3);
  border-radius: var(--v2-r-md);
  background: var(--v2-sunk);
}
html[data-ui='v2'][data-v2] .pb-check-item input { margin-top: 2px; }
html[data-ui='v2'][data-v2] .pb-check-item label {
  font: 400 var(--v2-t-sm)/1.6 var(--v2-sans);
  color: var(--v2-ink-2);
  cursor: pointer;
  min-width: 0;
}
html[data-ui='v2'][data-v2] .pb-check-item input:checked + label { color: var(--v2-ink); }
html[data-ui='v2'][data-v2] .pb-check-progress {
  margin: var(--v2-s3) 0 0;
  font: 500 var(--v2-t-xs)/1.5 var(--v2-sans);
  color: var(--v2-ink-3);
  font-variant-numeric: tabular-nums;
}
html[data-ui='v2'][data-v2] .pb-check-progress.is-complete { color: var(--v2-bull); }

/* Entry / stop / targets, three across. */
html[data-ui='v2'][data-v2] .pb-rules { --mit-cols: 3; }
html[data-ui='v2'][data-v2] .pb-rule { padding: var(--v2-s4); }
html[data-ui='v2'][data-v2] .pb-rule .mi-body { margin-top: var(--v2-s3); }

html[data-ui='v2'][data-v2] .pb-list {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s2);
  margin: var(--v2-s3) 0 0;
  padding-left: var(--v2-s4);
}
html[data-ui='v2'][data-v2] .pb-list li {
  font: 400 var(--v2-t-sm)/1.6 var(--v2-sans);
  color: var(--v2-ink-2);
}
html[data-ui='v2'][data-v2] .pb-list li::marker { color: var(--v2-ink-4); }
html[data-ui='v2'][data-v2] .pb-list--mistakes li::marker { color: var(--v2-bear); }
html[data-ui='v2'][data-v2] .pb-list--sources li { color: var(--v2-ink-3); font-size: var(--v2-t-xs); }

html[data-ui='v2'][data-v2] .pb-invalidation { max-width: none; }

/* Works when / fails when. Green and red are used here as data semantics —
   this is the regime the setup lives in and the regime that kills it, which is
   the single most load-bearing pair of facts on the page. */
html[data-ui='v2'][data-v2] .pb-regimes { --mit-cols: 2; }
html[data-ui='v2'][data-v2] .pb-regime { padding: var(--v2-s5); }
html[data-ui='v2'][data-v2] .pb-regime--works {
  background: var(--v2-bull-soft);
  box-shadow: inset 3px 0 0 0 var(--v2-bull), var(--v2-e1);
}
html[data-ui='v2'][data-v2] .pb-regime--fails {
  background: var(--v2-bear-soft);
  box-shadow: inset 3px 0 0 0 var(--v2-bear), var(--v2-e1);
}
html[data-ui='v2'][data-v2] .pb-regime--works .mi-eyebrow { color: var(--v2-bull); }
html[data-ui='v2'][data-v2] .pb-regime--fails .mi-eyebrow { color: var(--v2-bear); }
html[data-ui='v2'][data-v2] .pb-regime .mi-body { margin-top: var(--v2-s3); max-width: 60ch; }

/* The worked example is arithmetic in prose, so the numerals get the mono
   figures without the whole paragraph turning into code. */
html[data-ui='v2'][data-v2] .pb-example {
  margin: var(--v2-s4) 0 0;
  padding: var(--v2-s4);
  border-radius: var(--v2-r-md);
  background: var(--v2-sunk-2);
  font: 400 var(--v2-t-sm)/1.75 var(--v2-sans);
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink-2);
  max-width: 78ch;
}

/* "Run it in MacroInsight" — numbered, each step naming a real page. */
html[data-ui='v2'][data-v2] .pb-flow {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s3);
  margin: var(--v2-s4) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
html[data-ui='v2'][data-v2] .pb-flow-item {
  display: flex;
  gap: var(--v2-s3);
  padding: var(--v2-s3) var(--v2-s4);
  border-radius: var(--v2-r-md);
  background: var(--v2-sunk);
}
html[data-ui='v2'][data-v2] .pb-flow-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--v2-r-pill);
  background: var(--v2-sunk-2);
  box-shadow: var(--v2-hairline);
  font: 600 var(--v2-t-xs)/1 var(--v2-mono);
  color: var(--v2-ink-3);
}
html[data-ui='v2'][data-v2] .pb-flow-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--v2-s2);
  min-width: 0;
}
html[data-ui='v2'][data-v2] .pb-flow-step {
  font: 600 var(--v2-t-sm)/1.45 var(--v2-sans);
  color: var(--v2-ink);
}
html[data-ui='v2'][data-v2] .pb-flow-where {
  padding: 2px var(--v2-s2);
  border: 0;
  border-radius: var(--v2-r-xs);
  background: var(--v2-accent-soft);
  box-shadow: 0 0 0 1px var(--v2-accent-line);
  color: var(--v2-accent-text);
  font: 600 var(--v2-t-xs)/1.5 var(--v2-sans);
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
}
html[data-ui='v2'][data-v2] button.pb-flow-where:hover { background: var(--v2-hover-2); }
html[data-ui='v2'][data-v2] .pb-flow-where:focus-visible { outline: none; box-shadow: var(--v2-ring); }
/* A page we cannot route to is a label, not a button, so it never looks clickable. */
html[data-ui='v2'][data-v2] .pb-flow-where--plain {
  background: var(--v2-sunk-2);
  box-shadow: var(--v2-hairline);
  color: var(--v2-ink-3);
  cursor: default;
}
html[data-ui='v2'][data-v2] .pb-flow-detail {
  flex: 1 1 100%;
  font: 400 var(--v2-t-sm)/1.6 var(--v2-sans);
  color: var(--v2-ink-2);
  max-width: 82ch;
}

html[data-ui='v2'][data-v2] .pb-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--v2-s4);
  padding: var(--v2-s5);
}
html[data-ui='v2'][data-v2] .pb-actions-copy { flex: 1 1 380px; min-width: 0; }
html[data-ui='v2'][data-v2] .pb-actions-copy .mi-body { margin-top: var(--v2-s2); max-width: 62ch; }
html[data-ui='v2'][data-v2] .pb-actions-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v2-s2);
}
html[data-ui='v2'][data-v2] .pb-sources { padding: 0 var(--v2-s1); }

/* =============================================================================
   5. DIAGRAM KIT
   -----------------------------------------------------------------------------
   Twelve families, one visual language. The SVG markup carries no colour at
   all; everything below is a token. Stroke widths are in user units, so the
   miniature restates them larger to survive being scaled down on a card.
   ========================================================================== */
html[data-ui='v2'][data-v2] .pb-dia {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
/* No max-height on the miniature: capping the height would letterbox the
   viewBox and shrink the drawing into the middle of the card. It keeps its
   natural 2:1 aspect and the card is sized around it. */
html[data-ui='v2'][data-v2] .pb-dia--full { max-height: 250px; }

/* --- candles --- */
html[data-ui='v2'][data-v2] .pb-d-wick { stroke: var(--v2-ink-3); stroke-width: 1; fill: none; }
html[data-ui='v2'][data-v2] .pb-d-up { fill: var(--v2-bull); }
html[data-ui='v2'][data-v2] .pb-d-down { fill: var(--v2-bear); }

/* --- lines --- */
html[data-ui='v2'][data-v2] .pb-d-price {
  fill: none;
  stroke: var(--v2-ink);
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}
html[data-ui='v2'][data-v2] .pb-d-price-2 {
  fill: none;
  stroke: var(--v2-ink-3);
  stroke-width: 1.6;
  stroke-dasharray: 5 3;
  stroke-linejoin: round;
}
html[data-ui='v2'][data-v2] .pb-d-mean {
  fill: none;
  stroke: var(--v2-ink-2);
  stroke-width: 1.4;
}
html[data-ui='v2'][data-v2] .pb-d-band-edge {
  fill: none;
  stroke: var(--v2-ink-3);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
/* Opacity, not a paler token: the soft tokens are tuned for a filled chip on
   the page background, and at full strength here they read as blocks rather
   than as tints over the candles. */
html[data-ui='v2'][data-v2] .pb-d-band {
  fill: var(--v2-chop-soft);
  fill-opacity: 0.55;
  stroke: none;
}
/* The level the whole setup is built around. */
html[data-ui='v2'][data-v2] .pb-d-level {
  stroke: var(--v2-ink-2);
  stroke-width: 1.3;
  stroke-dasharray: 6 4;
}
/* Secondary guides: a midpoint, a moving average, a benchmark. */
html[data-ui='v2'][data-v2] .pb-d-guide {
  stroke: var(--v2-ink-4);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
html[data-ui='v2'][data-v2] .pb-d-sep {
  stroke: var(--v2-ink-4);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

/* --- order levels --- */
html[data-ui='v2'][data-v2] .pb-d-mark { stroke-width: 1.4; stroke-dasharray: 3 3; }
html[data-ui='v2'][data-v2] .pb-d-entry { stroke: var(--v2-accent); }
html[data-ui='v2'][data-v2] .pb-d-stop { stroke: var(--v2-bear); }
html[data-ui='v2'][data-v2] .pb-d-target { stroke: var(--v2-bull); }

/* --- zones --- */
html[data-ui='v2'][data-v2] .pb-d-zone {
  stroke-width: 1;
  fill-opacity: 0.32;
  stroke-opacity: 0.55;
}
html[data-ui='v2'][data-v2] .pb-d-zone--bull { fill: var(--v2-bull-soft); stroke: var(--v2-bull); }
html[data-ui='v2'][data-v2] .pb-d-zone--bear { fill: var(--v2-bear-soft); stroke: var(--v2-bear); }
html[data-ui='v2'][data-v2] .pb-d-zone--chop { fill: var(--v2-chop-soft); stroke: var(--v2-chop); }
html[data-ui='v2'][data-v2] .pb-d-zone--warn { fill: var(--v2-warn-soft); stroke: var(--v2-warn); }
html[data-ui='v2'][data-v2] .pb-d-zone--neutral { fill: var(--v2-accent-soft); stroke: var(--v2-accent-line); }

/* --- ranked bars (rotation / breadth) --- */
html[data-ui='v2'][data-v2] .pb-d-bar { stroke: none; }
html[data-ui='v2'][data-v2] .pb-d-bar--bull { fill: var(--v2-bull); }
html[data-ui='v2'][data-v2] .pb-d-bar--bear { fill: var(--v2-bear); }
html[data-ui='v2'][data-v2] .pb-d-bar--flat { fill: var(--v2-ink-4); }

/* --- regime cells --- */
html[data-ui='v2'][data-v2] .pb-d-cell { stroke: none; }
html[data-ui='v2'][data-v2] .pb-d-cell--chop { fill: var(--v2-chop); }
html[data-ui='v2'][data-v2] .pb-d-cell--bull { fill: var(--v2-bull); }

/* --- arrows and labels --- */
html[data-ui='v2'][data-v2] .pb-d-arrow { stroke: var(--v2-ink-2); stroke-width: 1.4; }
html[data-ui='v2'][data-v2] .pb-d-arrow-head { fill: var(--v2-ink-2); stroke: none; }
html[data-ui='v2'][data-v2] .pb-d-txt {
  fill: var(--v2-ink-3);
  font: 600 9px/1 var(--v2-mono);
  letter-spacing: 0.02em;
}
html[data-ui='v2'][data-v2] .pb-d-txt-entry { fill: var(--v2-accent-text); }
html[data-ui='v2'][data-v2] .pb-d-txt-stop { fill: var(--v2-bear); }
html[data-ui='v2'][data-v2] .pb-d-txt-target { fill: var(--v2-bull); }

/* The miniature is the same markup at roughly a third the size, so hairlines
   would vanish and 9px labels would be unreadable. Thicken, and drop the text. */
html[data-ui='v2'][data-v2] .pb-dia--mini .pb-d-txt { display: none; }
html[data-ui='v2'][data-v2] .pb-dia--mini .pb-d-wick { stroke-width: 1.8; }
html[data-ui='v2'][data-v2] .pb-dia--mini .pb-d-price { stroke-width: 3.2; }
html[data-ui='v2'][data-v2] .pb-dia--mini .pb-d-price-2 { stroke-width: 3; stroke-dasharray: 8 5; }
html[data-ui='v2'][data-v2] .pb-dia--mini .pb-d-mean { stroke-width: 2.6; }
html[data-ui='v2'][data-v2] .pb-dia--mini .pb-d-level { stroke-width: 2.4; stroke-dasharray: 9 6; }
html[data-ui='v2'][data-v2] .pb-dia--mini .pb-d-mark { stroke-width: 2.4; stroke-dasharray: 6 5; }
html[data-ui='v2'][data-v2] .pb-dia--mini .pb-d-band-edge { stroke-width: 2; }
html[data-ui='v2'][data-v2] .pb-dia--mini .pb-d-guide,
html[data-ui='v2'][data-v2] .pb-dia--mini .pb-d-sep { stroke-width: 1.8; }
html[data-ui='v2'][data-v2] .pb-dia--mini .pb-d-arrow { stroke-width: 2.4; }

/* =============================================================================
   6. NARROW
   ========================================================================== */
@media (max-width: 900px) {
  html[data-ui='v2'][data-v2] .pb-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  html[data-ui='v2'][data-v2] .pb-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-ui='v2'][data-v2] .pb-facets { flex-direction: column; gap: var(--v2-s3); }
  html[data-ui='v2'][data-v2] .pb-search-wrap { flex: 1 1 auto; width: 100%; }
  html[data-ui='v2'][data-v2] .pb-hero,
  html[data-ui='v2'][data-v2] .pb-block,
  html[data-ui='v2'][data-v2] .pb-regime,
  html[data-ui='v2'][data-v2] .pb-actions { padding: var(--v2-s4); }
  html[data-ui='v2'][data-v2] .pb-card-foot { grid-template-columns: minmax(0, 1fr); gap: var(--v2-s1); }
  html[data-ui='v2'][data-v2] .pb-card-stat { flex-direction: row; justify-content: space-between; gap: var(--v2-s3); }
  html[data-ui='v2'][data-v2] .pb-actions-btns .mi-btn { flex: 1 1 auto; }
  html[data-ui='v2'][data-v2] .pb-detail-title { font-size: var(--v2-t-xl); }
}

/* =============================================================================
   7. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html[data-ui='v2'][data-v2] .pb-card { transition: none; }
  html[data-ui='v2'][data-v2] .pb-card:hover { transform: none; }
}