/* ============================================================
   v3.3 PROBLEMS & CASES — stable opposing marquee
   Upper concerns: left -> right / Lower case cards: right -> left
   Motion is driven by JS (requestAnimationFrame), not CSS keyframes.
   This keeps the original v3.1 card geometry intact.
   ============================================================ */

#empathy-ledger.v31-cases {
  --v33-coral: #f47b6d;
  --v33-navy: #173555;
  --v33-glow: rgba(244, 123, 109, .16);
}

/* Viewport only: never changes the section's intrinsic vertical layout. */
#empathy-ledger .v33-marquee,
#empathy-ledger .v32-marquee {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.8%, #000 97.2%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 2.8%, #000 97.2%, transparent 100%);
}

/* Tracks: fixed one-row flex strips. No CSS animation here. */
#empathy-ledger .v33-track,
#empathy-ledger .v32-marquee-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
  gap: 12px !important;
  grid-template-columns: none !important;
  animation: none !important;
  transform: translate3d(0,0,0);
  will-change: transform;
  backface-visibility: hidden;
  contain: layout style;
}

/* Upper concern strip */
#empathy-ledger .v32-marquee--concerns {
  padding: 5px 4px 14px;
}
#empathy-ledger .v32-marquee--concerns .v31-concern-tags > span {
  flex: 0 0 188px !important;
  width: 188px !important;
  min-width: 188px !important;
  box-sizing: border-box;
}

/* Lower case strip — preserve v3.1 cards exactly, only make them fixed-width. */
#empathy-ledger .v32-marquee--cases {
  padding: 4px 4px 10px;
  margin: 0 0 30px;
}
#empathy-ledger .v32-marquee--cases .v31-case-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
}
#empathy-ledger .v32-marquee--cases .v31-case-card {
  flex: 0 0 205px !important;
  width: 205px !important;
  min-width: 205px !important;
  min-height: 160px !important;
  box-sizing: border-box;
}

/* Keep content readable even if animation initialization is delayed or unavailable. */
#empathy-ledger .v32-marquee:not(.is-ready) .v32-marquee-track {
  visibility: visible;
}
#empathy-ledger .v32-marquee.is-ready .v32-marquee-track {
  visibility: visible;
}

/* Deliberate pause/link state */
#empathy-ledger [data-sync].is-linked {
  position: relative;
  z-index: 10;
  border-color: rgba(244,123,109,.9) !important;
  box-shadow: 0 0 0 4px var(--v33-glow), 0 10px 26px rgba(244,123,109,.11) !important;
  transform: translateY(-2px) scale(1.018);
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

#empathy-ledger .v31-concern-tags > span[data-sync].is-linked::before,
#empathy-ledger .v31-case-card[data-sync].is-linked::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--v33-coral);
  box-shadow: 0 0 0 6px rgba(244,123,109,.12);
  transform: translateX(-50%);
  animation: v33Pulse .72s ease-in-out infinite alternate;
}
#empathy-ledger .v31-concern-tags > span[data-sync].is-linked::before { bottom: -19px; }
#empathy-ledger .v31-case-card[data-sync].is-linked::before { top: -16px; }

@keyframes v33Pulse {
  from { opacity: .55; scale: .88; }
  to   { opacity: 1; scale: 1.12; }
}

#empathy-ledger .v33-link-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 7;
}
#empathy-ledger .v33-link-path {
  fill: none;
  stroke: var(--v33-coral);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 5 7;
  opacity: 0;
  filter: drop-shadow(0 2px 4px rgba(244,123,109,.12));
}
#empathy-ledger.is-linking .v33-link-path {
  opacity: .72;
  animation: v33Draw .42s ease-out both;
}
@keyframes v33Draw {
  from { stroke-dashoffset: 50; opacity: 0; }
  to { stroke-dashoffset: 0; opacity: .72; }
}


/* v3.4: hard reset legacy .karte-stack vertical/grid layout inside the moving row.
   karte.css defines flex-direction:column on .karte-stack, which caused the cards
   to stack vertically even though display:flex was overridden. */
#empathy-ledger .v32-marquee--cases #karteGrid.karte-stack {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 12px !important;
}
#empathy-ledger .v32-marquee--cases #karteGrid.karte-stack > .karte-card {
  flex: 0 0 205px !important;
  width: 205px !important;
  min-width: 205px !important;
  margin: 0 !important;
  scroll-snap-align: none !important;
}

/* Mobile: still a single-row marquee, but slightly smaller cards. */
@media (max-width: 900px) {
  #empathy-ledger .v31-concern-row {
    grid-template-columns: minmax(0,1fr) 140px;
  }
  #empathy-ledger .v32-marquee--concerns .v31-concern-tags > span {
    flex-basis: 174px !important;
    width: 174px !important;
    min-width: 174px !important;
  }
  #empathy-ledger .v32-marquee--cases .v31-case-card,
  #empathy-ledger .v32-marquee--cases #karteGrid.karte-stack > .karte-card {
    flex: 0 0 190px !important;
    width: 190px !important;
    min-width: 190px !important;
  }
}

@media (max-width: 680px) {
  #empathy-ledger .v31-concern-row { grid-template-columns: minmax(0,1fr); }
  #empathy-ledger .v31-thinking-beaver { display: none; }
  #empathy-ledger .v33-link-layer { display: none; }
}

/* Respect reduced motion: return to the original static v3.1 grids. */
@media (prefers-reduced-motion: reduce) {
  #empathy-ledger .v32-marquee {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  #empathy-ledger .v32-marquee-track {
    transform: none !important;
    visibility: visible !important;
  }
  #empathy-ledger .v32-marquee--concerns .v31-concern-tags {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0,1fr)) !important;
  }
  #empathy-ledger .v32-marquee--concerns .v31-concern-tags > span {
    width: auto !important;
    min-width: 0 !important;
  }
  #empathy-ledger .v32-marquee--cases .v31-case-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0,1fr)) !important;
  }
  #empathy-ledger .v32-marquee--cases .v31-case-card {
    width: auto !important;
    min-width: 0 !important;
  }
  #empathy-ledger .v33-link-layer { display: none !important; }
}

/* Keep the selected pair readable while its connection is shown. */
#empathy-ledger.is-linking .v32-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.2%, #000 98.8%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 1.2%, #000 98.8%, transparent 100%);
}

/* v3.6 — softer visual hand-off into/out of the snap. */
#empathy-ledger .v32-marquee-track {
  transform-style: preserve-3d;
}
#empathy-ledger [data-sync].is-linked {
  transform: translateY(-1px) scale(1.012);
  transition: transform .34s cubic-bezier(.2,.8,.2,1),
              border-color .34s ease,
              box-shadow .34s ease;
}
#empathy-ledger.is-linking .v33-link-path {
  animation-duration: .5s;
}

/* ============================================================
   v3.9 — manual browsing for both moving rows
   Drag / swipe horizontally without breaking the auto marquee.
   ============================================================ */
#empathy-ledger .v32-marquee {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior-x: contain;
}
#empathy-ledger .v32-marquee.is-dragging {
  cursor: grabbing;
}
#empathy-ledger .v32-marquee.is-dragging .v32-marquee-track {
  pointer-events: none;
}
#empathy-ledger .v32-marquee img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}
#empathy-ledger .v31-case-lead::after {
  content: "  ↔ ドラッグして見られます";
  display: inline-block;
  margin-left: .7em;
  color: #9a6c67;
  font-size: .78em;
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
}
@media (max-width: 680px) {
  #empathy-ledger .v31-case-lead::after {
    display: block;
    margin: .35em 0 0;
  }
}

/* ============================================================
   v4.0 polish
   - keep the three example cards the same height on desktop
   - keep arrows vertically centered between equal-height cards
   ============================================================ */
@media (min-width: 961px) {
  #empathy-ledger .v31-example-steps {
    align-items: stretch !important;
  }

  #empathy-ledger .v31-example-steps > article {
    min-height: 204px !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  #empathy-ledger .v31-example-steps > article ul {
    flex: 1 1 auto;
  }

  #empathy-ledger .v31-example-steps > .v31-step-arrow {
    align-self: center;
  }
}