/* Journeys — Human vs AI Performance accordion section. */
.j-perf {
  margin-top: 28px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #E6E6E6;
  box-shadow: none;
  padding: 22px 24px 18px;
}

/* ── header ── */
.j-perf__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.j-perf__htext { min-width: 0; }
.j-perf__title { margin: 0; font: 500 18px/1.2 "Satoshi","Nunito Sans",system-ui,sans-serif; letter-spacing: -0.01em; color: var(--a2-color-neutral-900); }
.j-perf__sub { margin: 5px 0 0; font: 400 13px/1.4 "Inter",system-ui,sans-serif; color: var(--a2-color-neutral-500); }
.j-perf__hright { display: flex; align-items: center; gap: 28px; flex: 0 0 auto; }
.j-perf__legend { display: flex; align-items: center; gap: 16px; }
.j-perf__leg { display: inline-flex; align-items: center; gap: 7px; font: 500 12px/1 "Inter",system-ui,sans-serif; color: var(--a2-color-neutral-700); }
.j-perf__leg-sw { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 12px; }
.j-perf__leg-sw--ai { background: #0265DC; }
.j-perf__leg-sw--hu { background: var(--a2-color-neutral-400); }
.j-perf__adv { text-align: right; line-height: 1; }
.j-perf__adv-v { display: block; font: 600 26px/1 "Satoshi","Nunito Sans",system-ui,sans-serif; color: #1a7a4a; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.j-perf__adv-l { display: block; margin-top: 5px; font: 400 11px/1.2 "Inter",system-ui,sans-serif; color: var(--a2-color-neutral-500); }

/* active filter chip */
.j-perf__filter { display: none; align-items: center; gap: 8px; margin-top: 14px; }
.j-perf.is-filtered .j-perf__filter { display: flex; }
.j-perf__filter-lbl { font: 400 12px/1 "Inter",system-ui,sans-serif; color: var(--a2-color-neutral-500); }
.j-perf__chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 11px; border-radius: 999px; border: 1px solid var(--a2-color-neutral-200); background: var(--a2-color-neutral-30); cursor: pointer; font: 600 12px/1 "Inter",system-ui,sans-serif; color: var(--a2-color-neutral-800); }
.j-perf__chip:hover { background: var(--a2-color-neutral-50); }
.j-perf__chip svg { width: 13px; height: 13px; }

/* ── rows ── */
.j-perf__rows { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.jpf-row { border: 1px solid var(--a2-color-neutral-100); border-radius: 12px; overflow: hidden; transition: border-color 160ms ease, box-shadow 160ms ease; }
.jpf-row.is-open { border-color: var(--a2-color-neutral-200); box-shadow: 0 2px 10px 0 rgba(41,41,41,0.06); }
.jpf-row.is-hidden { display: none; }

/* summary bar (clickable header) */
.jpf-sum { display: grid; grid-template-columns: 38px minmax(186px, 1.1fr) minmax(280px, 2fr) auto 24px; align-items: center; gap: 16px; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; padding: 14px 16px; }
.jpf-sum:hover { background: var(--a2-color-neutral-20); }
.jpf-sum__icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent); }
.jpf-sum__icon .material-icons-round { font-size: 21px; }
.jpf-sum__id { min-width: 0; }
.jpf-sum__name { display: block; font: 600 14px/1.25 "Inter",system-ui,sans-serif; color: var(--a2-color-neutral-900); }
.jpf-sum__badge { display: inline-block; margin-top: 5px; padding: 2px 8px; border-radius: 999px; background: var(--a2-color-neutral-50); font: 500 11px/1.3 "Inter",system-ui,sans-serif; color: var(--a2-color-neutral-500); }

/* twin bars */
.jpf-sum__bars { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.jpf-barg { min-width: 0; display: block; }
.jpf-barg__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.jpf-barg__tag { font: 700 9px/1 "Inter",system-ui,sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--a2-color-neutral-400); }
.jpf-barg__pct { font: 600 13px/1 "Satoshi","Nunito Sans",system-ui,sans-serif; color: var(--a2-color-neutral-900); font-variant-numeric: tabular-nums; }
.jpf-bar { display: block; position: relative; height: 7px; border-radius: 999px; background: var(--a2-color-neutral-80); overflow: hidden; }
.jpf-bar__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.jpf-bar__fill--ai { background: var(--accent); }
.jpf-bar__fill--hu { background: var(--a2-color-neutral-400); }
.jpf-barg__vol { display: block; margin-top: 6px; font: 400 11px/1.2 "Inter",system-ui,sans-serif; color: var(--a2-color-neutral-500); font-variant-numeric: tabular-nums; }

/* lift badge + chevron */
.jpf-lift { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; background: #e6f4ed; color: #1a7a4a; font: 600 12px/1.2 "Inter",system-ui,sans-serif; white-space: nowrap; font-variant-numeric: tabular-nums; }
.jpf-sum__chev { color: var(--a2-color-neutral-400); display: flex; align-items: center; justify-content: center; transition: transform 200ms ease; }
.jpf-sum__chev .material-icons-round { font-size: 22px; }
.jpf-row.is-open .jpf-sum__chev { transform: rotate(180deg); }

/* ── expandable detail ── */
.jpf-detail-wrap { overflow: hidden; max-height: 0; }
.jpf-row.is-open .jpf-detail-wrap { max-height: none; }
.jpf-detail { min-height: 0; }
.jpf-detail__inner { padding: 4px 16px 16px; border-top: 1px solid var(--a2-color-neutral-80); margin-top: 0; }
.jpf-thead { display: grid; grid-template-columns: minmax(180px, 1.5fr) 1fr 1fr 64px; gap: 16px; padding: 12px 4px 8px; }
.jpf-th { font: 700 10px/1.2 "Inter",system-ui,sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--a2-color-neutral-400); }
.jpf-th--lift { text-align: right; }

.jpf-tp { display: grid; grid-template-columns: minmax(180px, 1.5fr) 1fr 1fr 64px; gap: 16px; align-items: center; padding: 10px 4px; border-top: 1px solid var(--a2-color-neutral-50); }
.jpf-tp__name { font: 600 13px/1.3 "Inter",system-ui,sans-serif; color: var(--a2-color-neutral-900); }
.jpf-tp__metric { margin-top: 3px; font: 400 11px/1.2 "Inter",system-ui,sans-serif; color: var(--a2-color-neutral-500); }

.jpf-card { border-radius: 10px; padding: 9px 12px; border: 1px solid; }
.jpf-card--ai { border-color: color-mix(in srgb, var(--accent) 45%, #fff); background: color-mix(in srgb, var(--accent) 8%, #fff); }
.jpf-card--hu { border-color: var(--a2-color-neutral-100); background: var(--a2-color-neutral-20); }
.jpf-card__pct { font: 600 19px/1 "Satoshi","Nunito Sans",system-ui,sans-serif; color: var(--a2-color-neutral-900); font-variant-numeric: tabular-nums; }
.jpf-card__bar { position: relative; height: 6px; border-radius: 999px; background: rgba(41,41,41,0.07); overflow: hidden; margin: 8px 0 7px; }
.jpf-card__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.jpf-card--ai .jpf-card__fill { background: var(--accent); }
.jpf-card--hu .jpf-card__fill { background: var(--a2-color-neutral-400); }
.jpf-card__vol { font: 400 11px/1.2 "Inter",system-ui,sans-serif; color: var(--a2-color-neutral-500); font-variant-numeric: tabular-nums; }
.jpf-tp__lift { justify-self: end; display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; background: #e6f4ed; color: #1a7a4a; font: 600 12px/1.2 "Inter",system-ui,sans-serif; white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .jpf-sum { grid-template-columns: 34px 1fr auto; }
  .jpf-sum__bars { display: none; }
  .jpf-thead, .jpf-tp { grid-template-columns: 1fr; }
  .jpf-th--ai, .jpf-th--hu, .jpf-th--lift { display: none; }
}