/* ═══════════════════════════════════════════════════════════════════════
   v6-wheels — "INSTANT READS" turntable
   Ported from design-refs/wheels-approved.html (owner-approved mockup).

   OWNER-APPROVED CONSTANTS — do not retune without sign-off:
     STEP   48deg  (angle between cards on the ring)
     RADIUS 720px  (--pulse-r; ring translateZ(-R), cards translateZ(+R))
     perspective 1600px, perspective-origin 50% 40%
     material transition 0.45s

   THE TWO-MATERIAL SYSTEM (the whole point of the design):
     resting cards  = clear liquid glass  (translucent white, specular,
                      hairline border, layered shadow — ZERO blur)
     the focused card BECOMES matte black (#101013) over ~0.45s, and every
     control inside it swaps to its dark variant in the same beat.

   NOIR RULES OBSERVED: no [class*=], no !important, zero backdrop-filter
   blur (clear-glass doctrine), tabular-nums on every numeral, and exactly
   TWO whitelisted uses of var(--signal) in this sheet —
     (1) .pulse-stat__you   — the red "you" tick on the report stat bar
     (2) .pulse-marble--red — the red marbles in the Two Jars illustration
   Both are enforced by tools/color-audit.mjs (§ WHEELS_SIGNAL_WHITELIST).
   Every other value in this file is grayscale (chroma spread <= 8).
   ═══════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ── stage ─────────────────────────────────────────────────────────── */
  .pulse {
    --pulse-card-w: min(560px, 92vw);
    --pulse-card-h: 500px;
    --pulse-r: 720px;              /* RADIUS — read back by wheels.js */
    --pulse-step: 48;              /* STEP in degrees (JS reads this too) */
    position: relative;
  }

  .pulse__stage-wrap {
    position: relative;
    height: clamp(560px, 74vh, 760px);
    margin-top: var(--sp-5);
  }

  .pulse__aura {
    position: absolute;
    left: 50%;
    top: 36%;
    width: 70vmin;
    height: 70vmin;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
  }

  .pulse__stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--d-med) var(--e-emphasized);
    perspective: 1600px;
    perspective-origin: 50% 40%;
  }
  .pulse__stage.is-on { opacity: 1; pointer-events: auto; }

  .pulse__wheel {
    position: absolute;
    left: 50%;
    top: calc(50% - 14px);
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .pulse__wheel.is-dragging { transition: none; }

  /* ── the card ──────────────────────────────────────────────────────── */
  .pulse-card {
    position: absolute;
    left: calc(var(--pulse-card-w) / -2);
    top: calc(var(--pulse-card-h) / -2);
    width: var(--pulse-card-w);
    height: var(--pulse-card-h);
    transition: opacity var(--d-long) var(--e-emphasized);
  }
  .pulse-card__inner {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 26px 28px 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* CLEAR liquid glass — translucent fill + specular + layered shadow.
       No backdrop-filter: the aura behind is already a soft gradient, so
       translucency alone reproduces the glass read at zero GPU cost. */
    background: var(--glass-clear);
    border: 1px solid var(--hairline-strong);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 -14px 22px rgba(255, 255, 255, 0.3),
      0 18px 44px rgba(10, 10, 14, 0.1);
    transition:
      background var(--d-long) var(--e-emphasized),
      border-color var(--d-long) var(--e-emphasized),
      box-shadow var(--d-long) var(--e-emphasized),
      color var(--d-long) var(--e-emphasized);
  }
  .pulse-card.is-near { opacity: 0.55; }
  .pulse-card.is-far { opacity: 0; }
  .pulse-card.is-near .pulse-card__inner,
  .pulse-card.is-far .pulse-card__inner { pointer-events: none; }
  .pulse-card.is-live { z-index: 4; }

  /* ── MATERIAL SWITCH: the live card becomes matte black ────────────── */
  .pulse-card.is-live .pulse-card__inner {
    background: #101013;
    border-color: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    box-shadow: 0 30px 70px rgba(10, 10, 14, 0.38);
  }
  .pulse-card.is-live .pulse-card__title { color: #ffffff; }
  .pulse-card.is-live .pulse-card__eyebrow { color: #8a8a90; }
  .pulse-card.is-live .pulse-card__sub { color: #b9b9c0; }
  .pulse-card.is-live .pulse-card__hint { color: #6d6d75; }

  .pulse-card.is-live .pulse-reveal {
    background: #ffffff;
    color: #0b0b0c;
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  }
  .pulse-card.is-live .pulse-reveal:hover:not(:disabled) { background: #ececef; }

  .pulse-card.is-live .pulse-opt {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.16);
    color: #ffffff;
  }
  .pulse-card.is-live .pulse-opt:hover { border-color: rgba(255, 255, 255, 0.45); }
  .pulse-card.is-live .pulse-opt.is-sel {
    background: #ffffff;
    color: #0b0b0c;
    border-color: #ffffff;
  }

  .pulse-card.is-live .pulse-jar {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.16);
    color: #ffffff;
  }
  .pulse-card.is-live .pulse-jar.is-sel {
    background: #ffffff;
    color: #0b0b0c;
    border-color: #ffffff;
  }

  .pulse-card.is-live .pulse-track {
    background: #1c1c20;
    border-color: rgba(255, 255, 255, 0.12);
  }
  .pulse-card.is-live .pulse-fill { background: #ffffff; }
  .pulse-card.is-live .pulse-thumb { background: #101013; border-color: #ffffff; }
  .pulse-card.is-live .pulse-slider__val { color: #ffffff; }
  .pulse-card.is-live .pulse-tlbl { color: #8a8a90; }

  .pulse-card.is-live .pulse-alloc { border-color: rgba(255, 255, 255, 0.14); }

  .pulse-card.is-live .pulse-row {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: #ffffff;
  }
  .pulse-card.is-live .pulse-row__grip,
  .pulse-card.is-live .pulse-row__n { color: #8a8a90; }
  .pulse-card.is-live .pulse-row.is-lift {
    background: #ffffff;
    color: #0b0b0c;
    border-color: #ffffff;
  }
  .pulse-card.is-live .pulse-row.is-lift .pulse-row__grip,
  .pulse-card.is-live .pulse-row.is-lift .pulse-row__n { color: #8a8a90; }

  .pulse-card.is-live .pulse-scrub__big { color: #ffffff; }
  .pulse-card.is-live .pulse-ticks { color: #3a3a3e; }

  .pulse-card.is-live .pulse-pad {
    background:
      linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 100% 25%,
      linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 25% 100%,
      #141418;
    border-color: rgba(255, 255, 255, 0.14);
  }
  .pulse-card.is-live .pulse-pad__axis { background: rgba(255, 255, 255, 0.22); }
  .pulse-card.is-live .pulse-pad__dot { background: #ffffff; border-color: #101013; }
  .pulse-card.is-live .pulse-pad__lab { color: #8a8a90; }
  .pulse-card.is-live .pulse-pad__read { color: #b9b9c0; }
  .pulse-card.is-live .pulse-pad__read b { color: #ffffff; }

  .pulse-card.is-live .pulse-report { background: #101013; color: #ffffff; }
  .pulse-card.is-live .pulse-report p { color: #b9b9c0; }
  .pulse-card.is-live .pulse-report__h { color: #8a8a90; }
  .pulse-card.is-live .pulse-bar { background: #26262b; }
  .pulse-card.is-live .pulse-bar__fill { background: #ffffff; }
  .pulse-card.is-live .pulse-stat__labels { color: #8a8a90; }
  .pulse-card.is-live .pulse-stat__cap { color: #5c5c64; }
  .pulse-card.is-live .pulse-report__body { scrollbar-color: #3a3a3e transparent; }
  .pulse-card.is-live .pulse-report__body::-webkit-scrollbar-thumb { background: #3a3a3e; }

  .pulse-card.is-live .pulse-glassbtn {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      0 8px 20px rgba(0, 0, 0, 0.3);
  }
  .pulse-card.is-live .pulse-closer { color: #8a8a90; }

  /* ── card head ─────────────────────────────────────────────────────── */
  .pulse-card__eyebrow {
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    font-variant-numeric: tabular-nums;
  }
  .pulse-card__title {
    /* explicit: the base layer colours h1-h3 directly, so inheriting the
       card's colour is not enough to survive the material switch */
    color: var(--ink);
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    line-height: 1.22;
    letter-spacing: -0.015em;
    font-weight: 600;
    margin-bottom: 6px;
  }
  .pulse-card__title em {
    font-family: var(--font-script);
    font-style: italic;
    font-weight: 400;
  }
  .pulse-card__sub {
    font-size: 0.92rem;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-bottom: 18px;
  }
  .pulse-card__control {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    min-height: 0;
  }
  .pulse-card__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
  }
  .pulse-card__hint {
    margin-left: auto;
    font-size: 11px;
    color: var(--ink-mute);
  }

  .pulse-reveal {
    font: inherit;
    font-size: 13.5px;
    padding: 11px 20px;
    border-radius: var(--r-pill);
    cursor: pointer;
    background: #101013;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 10px 26px rgba(10, 10, 14, 0.28);
    transition: transform var(--d-fast) var(--e-overshoot), background var(--d-fast) linear;
  }
  .pulse-reveal:hover:not(:disabled) { transform: translateY(-1px); background: #17171b; }
  .pulse-reveal:disabled { opacity: 0.35; cursor: default; transform: none; }

  /* ── builder: binary options ───────────────────────────────────────── */
  .pulse-opts { display: flex; flex-direction: column; gap: 10px; }
  .pulse-opt {
    font: inherit;
    text-align: left;
    font-size: 0.95rem;
    padding: 13px 16px;
    border-radius: 14px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--hairline-strong);
    color: var(--ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: border-color var(--d-fast) linear, background var(--d-fast) linear;
  }
  .pulse-opt:hover { border-color: rgba(0, 0, 0, 0.28); }
  .pulse-opt.is-sel { background: #101013; color: #ffffff; border-color: #101013; }

  /* ── builder: illustrated jars ─────────────────────────────────────── */
  .pulse-jars { display: flex; gap: 16px; justify-content: center; }
  .pulse-jar {
    width: 150px;
    padding: 14px 12px 16px;
    border-radius: var(--r-md);
    cursor: pointer;
    text-align: center;
    font: inherit;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--hairline-strong);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  .pulse-jar.is-sel { border-color: #101013; background: #101013; color: #ffffff; }
  .pulse-jar__glass {
    position: relative;
    height: 92px;
    margin: 0 auto 10px;
    width: 86px;
    border: 2px solid currentColor;
    border-top-width: 6px;
    border-radius: 6px 6px 16px 16px;
    opacity: 0.85;
  }
  .pulse-marble {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #101013;
  }
  /* WHITELISTED SIGNAL USE 2/2 — the question's content REQUIRES red
     marbles ("draw a red marble, win $100"); a grayscale marble would make
     the Ellsberg item unreadable. Jar B's unknown mix stays neutral gray. */
  .pulse-marble--red { background: var(--signal); }
  .pulse-marble--unknown { background: #9a9aa0; opacity: 0.6; }
  .pulse-jar__lbl { font-size: 0.85rem; font-weight: 600; }
  .pulse-jar__d { font-size: 0.74rem; opacity: 0.7; margin-top: 2px; }

  /* ── builder: slider ───────────────────────────────────────────────── */
  .pulse-slider { padding: 6px 2px; }
  .pulse-slider__val {
    font-family: var(--font-script);
    font-style: italic;
    font-size: 2.6rem;
    text-align: center;
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
  }
  .pulse-track {
    position: relative;
    height: 44px;
    border-radius: var(--r-sm);
    background: linear-gradient(90deg, #f3f3f4, #dcdcdf);
    border: 1px solid var(--hairline-strong);
    cursor: ew-resize;
    touch-action: none;
  }
  .pulse-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: #101013;
    border-radius: var(--r-sm) 0 0 var(--r-sm);
    opacity: 0.9;
  }
  .pulse-thumb {
    position: absolute;
    top: 50%;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #101013;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  }
  .pulse-tlbl {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: 11px;
    color: var(--ink-mute);
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
  }

  /* ── builder: divider-drag allocation bar ──────────────────────────── */
  .pulse-alloc {
    position: relative;
    height: 56px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--hairline-strong);
    display: flex;
    touch-action: none;
  }
  .pulse-seg {
    position: relative;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
  }
  .pulse-seg small {
    font-weight: 400;
    opacity: 0.8;
    margin-left: 5px;
    font-variant-numeric: tabular-nums;
  }
  .pulse-seg:nth-child(1) { background: #0e0e10; }
  .pulse-seg:nth-child(2) { background: #3a3a3e; }
  .pulse-seg:nth-child(3) { background: #7c7c82; }
  .pulse-seg:nth-child(4) { background: #c9c9cd; color: #0b0b0c; }
  .pulse-div {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 22px;
    margin-left: -11px;
    cursor: col-resize;
    z-index: 3;
    touch-action: none;
    background: none;
    border: 0;
    padding: 0;
  }
  .pulse-div::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 8px;
    bottom: 8px;
    width: 3px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
  }

  /* ── builder: drag-to-rank ─────────────────────────────────────────── */
  .pulse-rank { display: flex; flex-direction: column; gap: 8px; touch-action: none; }
  .pulse-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--hairline-strong);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    cursor: grab;
    user-select: none;
    font: inherit;
    color: var(--ink);
    text-align: left;
    width: 100%;
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .pulse-row__grip { color: var(--ink-mute); letter-spacing: 2px; font-size: 13px; }
  .pulse-row__t { flex: 1; }
  .pulse-row__n {
    margin-left: auto;
    font-size: 11px;
    color: var(--ink-mute);
    font-variant-numeric: tabular-nums;
  }
  .pulse-row.is-lift {
    transition: none;
    z-index: 5;
    position: relative;
    cursor: grabbing;
    background: #101013;
    color: #ffffff;
    border-color: #101013;
  }
  .pulse-row.is-lift .pulse-row__grip,
  .pulse-row.is-lift .pulse-row__n { color: rgba(255, 255, 255, 0.6); }

  /* ── builder: number scrub ─────────────────────────────────────────── */
  .pulse-scrub {
    text-align: center;
    cursor: ew-resize;
    touch-action: none;
    padding: 8px 0;
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    width: 100%;
    display: block;
  }
  .pulse-scrub__big {
    font-family: var(--font-script);
    font-style: italic;
    font-size: 5.4rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .pulse-scrub__u {
    font-size: 11px;
    color: var(--ink-mute);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 6px;
  }
  .pulse-ticks {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
    margin: 14px 6px 0;
    color: #d5d5d8;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
  }

  /* ── builder: 2-D pad ──────────────────────────────────────────────── */
  .pulse-padwrap { display: flex; gap: 14px; align-items: stretch; }
  .pulse-pad {
    position: relative;
    flex: 1;
    aspect-ratio: 1.35;
    border-radius: var(--r-md);
    border: 1px solid var(--hairline-strong);
    cursor: crosshair;
    touch-action: none;
    padding: 0;
    background:
      linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px) 0 0 / 100% 25%,
      linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px) 0 0 / 25% 100%,
      #fbfbfc;
  }
  .pulse-pad__axis {
    position: absolute;
    background: rgba(0, 0, 0, 0.18);
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
  }
  .pulse-pad__dot {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #101013;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transform: translate(-50%, -50%);
  }
  .pulse-pad__lab {
    position: absolute;
    font-size: 10px;
    color: var(--ink-mute);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
  }
  .pulse-pad__lab--l { left: 8px; top: 50%; transform: translateY(-140%); }
  .pulse-pad__lab--r { right: 8px; top: 50%; transform: translateY(-140%); }
  .pulse-pad__lab--t { top: 6px; left: 50%; transform: translateX(-50%); }
  .pulse-pad__lab--b { bottom: 6px; left: 50%; transform: translateX(-50%); }
  .pulse-pad__read {
    width: 118px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    font-size: 12px;
    color: var(--ink-soft);
  }
  .pulse-pad__read b {
    display: block;
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
  }

  /* ── report overlay ────────────────────────────────────────────────── */
  .pulse-report {
    position: absolute;
    inset: 0;
    background: #ffffff;
    border-radius: 22px;
    padding: 8px 26px 20px;
    display: flex;
    flex-direction: column;
    transform: translateY(103%);
    transition: transform var(--d-long) cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 6;
    visibility: hidden;
  }
  .pulse-report.is-on { transform: translateY(0); visibility: visible; }

  /* Internally scrollable: reports run 150-230 words and must fit a card
     that is only ~500px tall (less on a 390px device). Momentum scroll,
     top fade, thin styled scrollbar. */
  .pulse-report__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* the 14px pad matches the fade band, so at rest the gradient sits over
       empty space and only dims content once it actually scrolls under */
    padding: 14px 8px 0 0;
    scrollbar-width: thin;
    scrollbar-color: #c9c9cd transparent;
    mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
  }
  .pulse-report__body::-webkit-scrollbar { width: 6px; }
  .pulse-report__body::-webkit-scrollbar-track { background: transparent; }
  .pulse-report__body::-webkit-scrollbar-thumb {
    background: #c9c9cd;
    border-radius: 3px;
  }
  .pulse-report__t {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 10px;
    padding-right: 28px;
  }
  .pulse-report__t em {
    font-family: var(--font-script);
    font-style: italic;
    font-weight: 400;
  }
  .pulse-report__h {
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin: 14px 0 6px;
  }
  .pulse-report p {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--ink-soft);
    margin-bottom: 9px;
  }
  .pulse-report ul {
    margin: 0 0 9px;
    padding-left: 18px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ink-soft);
  }
  .pulse-report li { margin-bottom: 5px; }

  .pulse-stat { padding-top: 12px; flex: none; }
  .pulse-stat__labels {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: 11px;
    color: var(--ink-mute);
    margin-bottom: 5px;
    font-variant-numeric: tabular-nums;
  }
  .pulse-bar {
    position: relative;
    height: 10px;
    border-radius: 6px;
    background: #ececee;
    overflow: visible;
  }
  .pulse-bar__fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 6px;
    background: #101013;
  }
  /* WHITELISTED SIGNAL USE 1/2 — the "you" tick. This is the single mark
     that separates the reader from the distribution; it is the one place
     in the report where color carries irreplaceable meaning. */
  .pulse-stat__you {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 3px;
    border-radius: 2px;
    background: var(--signal);
  }
  .pulse-stat__cap {
    font-size: 10px;
    color: #b7b7bc;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
  }

  .pulse-report__actions { display: flex; gap: 10px; margin-top: 14px; flex: none; }
  .pulse-glassbtn {
    font: inherit;
    font-size: 12.5px;
    padding: 9px 16px;
    border-radius: var(--r-pill);
    cursor: pointer;
    color: var(--ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    background: var(--glass-clear);
    border: 1px solid var(--hairline-strong);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -8px 12px rgba(255, 255, 255, 0.28),
      0 8px 20px rgba(10, 10, 14, 0.1);
  }
  .pulse-closer {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 2;
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: var(--ink-mute);
    cursor: pointer;
    padding: 4px 8px;
  }

  /* ── arrows + dots + tabs ──────────────────────────────────────────── */
  .pulse-arrow {
    position: absolute;
    top: 44%;
    z-index: 8;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    color: var(--ink);
    background: var(--glass-clear);
    border: 1px solid var(--hairline-strong);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 10px 24px rgba(10, 10, 14, 0.12);
  }
  .pulse-arrow:disabled { opacity: 0.2; cursor: default; }
  .pulse-arrow--l { left: max(14px, calc(50% - var(--pulse-card-w) / 2 - 74px)); }
  .pulse-arrow--r { right: max(14px, calc(50% - var(--pulse-card-w) / 2 - 74px)); }

  .pulse-dots {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 8;
  }
  .pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d9d9dc;
    cursor: pointer;
    border: 0;
    padding: 0;
  }
  .pulse-dot.is-on { background: #101013; }

  .pulse-tabs {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .pulse-tab {
    position: relative;
    font: inherit;
    font-size: 12.5px;
    padding: 8px 16px;
    border-radius: var(--r-pill);
    cursor: pointer;
    background: var(--glass-clear);
    color: var(--ink-soft);
    border: 1px solid var(--hairline-strong);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -8px 12px rgba(255, 255, 255, 0.28),
      0 6px 16px rgba(10, 10, 14, 0.07);
    transition: transform var(--d-fast) var(--e-overshoot);
  }
  .pulse-tab:hover { transform: translateY(-1px); }
  /* Active tab is matte black ALONE — the mockup's red tab dot is
     deliberately NOT carried into production (color budget). */
  .pulse-tab.is-on {
    background: #101013;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 10px 26px rgba(10, 10, 14, 0.28);
  }

  /* ── no-JS / SEO fallback list ─────────────────────────────────────── */
  .pulse-fallback { margin-top: var(--sp-6); }
  .pulse-fallback__note {
    font-size: 0.85rem;
    color: var(--ink-mute);
    margin-bottom: var(--sp-5);
  }
  .pulse-fallback__wheel { margin-bottom: var(--sp-6); }
  .pulse-fallback__wheel h2 {
    font-size: 0.78rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: var(--sp-4);
  }
  .pulse-fallback__q {
    padding: var(--sp-4) 0;
    border-top: 1px solid var(--border);
  }
  .pulse-fallback__q h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
  }
  .pulse-fallback__q h3 em {
    font-family: var(--font-script);
    font-style: italic;
    font-weight: 400;
  }
  .pulse-fallback__q p {
    font-size: 0.88rem;
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: 6px;
  }
}

@layer utilities {

  /* Visible focus ring per the noir spec — component box-shadows would
     otherwise swallow the outline (v6.1-E fix, same pattern). */
  .pulse-tab:focus-visible,
  .pulse-arrow:focus-visible,
  .pulse-dot:focus-visible,
  .pulse-opt:focus-visible,
  .pulse-jar:focus-visible,
  .pulse-track:focus-visible,
  .pulse-div:focus-visible,
  .pulse-row:focus-visible,
  .pulse-scrub:focus-visible,
  .pulse-pad:focus-visible,
  .pulse-reveal:focus-visible,
  .pulse-glassbtn:focus-visible,
  .pulse-closer:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }
  .pulse-card.is-live .pulse-opt:focus-visible,
  .pulse-card.is-live .pulse-jar:focus-visible,
  .pulse-card.is-live .pulse-track:focus-visible,
  .pulse-card.is-live .pulse-div:focus-visible,
  .pulse-card.is-live .pulse-row:focus-visible,
  .pulse-card.is-live .pulse-scrub:focus-visible,
  .pulse-card.is-live .pulse-pad:focus-visible,
  .pulse-card.is-live .pulse-reveal:focus-visible,
  .pulse-card.is-live .pulse-glassbtn:focus-visible,
  .pulse-card.is-live .pulse-closer:focus-visible {
    outline-color: #ffffff;
  }

  .pulse-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ── mobile: shrink the ring so side cards still peek at 390px ───────── */
@media (max-width: 620px) {
  .pulse {
    --pulse-card-h: 480px;
    --pulse-r: 460px;
  }
  .pulse__stage-wrap { height: clamp(560px, 72vh, 700px); }
  /* Below ~620px the ring is wider than the gutter, so centred arrows would
     sit ON the card and cover its controls. Drop them to the bottom rail
     alongside the dots, where they stay reachable and overlay nothing. */
  .pulse-arrow {
    width: 40px;
    height: 40px;
    font-size: 16px;
    top: auto;
    bottom: 2px;
  }
  .pulse-arrow--l { left: 14px; }
  .pulse-arrow--r { right: 14px; }
  .pulse-dots { bottom: 20px; }
  .pulse-card__inner { padding: 22px 20px 20px; }
  .pulse-report { padding: 20px 20px 18px; }
  .pulse-jars { gap: 10px; }
  .pulse-jar { width: 100%; }
  .pulse-padwrap { flex-direction: column; }
  .pulse-pad__read { width: auto; flex-direction: row; gap: var(--sp-5); }
  .pulse-scrub__big { font-size: 4.2rem; }
}

@media (max-width: 420px) {
  .pulse { --pulse-r: 380px; }
  .pulse-card__hint { display: none; }
}

/* ── reduced motion: no 3D spin — cards crossfade flat, springs instant,
      but the two-material switch is PRESERVED (it carries meaning) ───── */
@media (prefers-reduced-motion: reduce) {
  .pulse .pulse__wheel {
    transform: none;
    transform-style: flat;
    transition: none;
  }
  .pulse .pulse__stage { perspective: none; }
  .pulse .pulse-card {
    transform: none;
    left: calc(var(--pulse-card-w) / -2);
    top: calc(var(--pulse-card-h) / -2);
    transition: opacity var(--d-med) linear;
  }
  .pulse .pulse-card.is-near,
  .pulse .pulse-card.is-far {
    opacity: 0;
    pointer-events: none;
  }
  .pulse .pulse-report { transition: none; }
  .pulse .pulse-row { transition: none; }
  .pulse .pulse-tab { transition: none; }
  .pulse .pulse-reveal { transition: background var(--d-fast) linear; }
  .pulse .pulse-tab:hover,
  .pulse .pulse-reveal:hover:not(:disabled) { transform: none; }
  /* material switch intentionally KEPT — it is state, not decoration */
}

/* ── reduced transparency: clear glass becomes solid white ───────────── */
@media (prefers-reduced-transparency: reduce) {
  .pulse .pulse-card__inner,
  .pulse .pulse-tab,
  .pulse .pulse-arrow,
  .pulse .pulse-glassbtn,
  .pulse .pulse-opt,
  .pulse .pulse-jar,
  .pulse .pulse-row {
    background: #ffffff;
  }
  .pulse .pulse__aura { display: none; }
  /* the live card stays matte black — it is opaque already */
  .pulse .pulse-card.is-live .pulse-card__inner { background: #101013; }
  .pulse .pulse-card.is-live .pulse-opt,
  .pulse .pulse-card.is-live .pulse-jar,
  .pulse .pulse-card.is-live .pulse-row { background: #1c1c20; }
  .pulse .pulse-card.is-live .pulse-glassbtn { background: #1c1c20; }
  .pulse .pulse-card.is-live .pulse-opt.is-sel,
  .pulse .pulse-card.is-live .pulse-jar.is-sel,
  .pulse .pulse-card.is-live .pulse-row.is-lift { background: #ffffff; }
}