/* /personal-agents/: chapters, cards and the protocol explainers (components/protocol-scene.tsx). Everything above the
   last block is the static version; all motion sits in the prefers-reduced-motion: no-preference block at the end. */
.pa-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font: 500 0.8125rem/1 var(--sans); color: var(--muted); }
.pa-eyebrow span { font-family: var(--mono); color: var(--accent); }
.pa-chapter .product-pair { align-items: center; }
.pa-chapter.flip .pa-visual { order: -1; }
.pa-text h2 { font-size: clamp(1.875rem, 3.5vw, 2.75rem); margin-bottom: 18px; }
.pa-sub { color: var(--muted); font-size: 1.0625rem; }
.pa-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pa-points li { position: relative; padding-left: 22px; }
.pa-points li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.pa-visual { min-width: 0; }

/* Cards: the two doors, the controls, live and next */
.pa-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.pa-cards > * { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.pa-cards h3 { font-size: 1.125rem; letter-spacing: -0.02em; margin-bottom: 10px; }
.pa-cards p { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.pa-cards .pa-what { color: var(--ink); margin-bottom: 8px; }
.pa-controls { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.pa-status { margin-top: 32px; }
.pa-status ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--muted); font-size: 0.9375rem; }
.pa-status > :first-child { border-top: 2px solid var(--human); }
.pa-status > :last-child { border-top: 2px solid var(--agent); }
.pa-more, .pa-links { margin: 24px 0 0; color: var(--muted); font-size: 0.875rem; }

/* A sample Callers row */
.pa-caller { margin: 0; }
.pa-caller dl { margin: 0; padding: 8px 16px; }
.pa-caller dl > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 0.875rem; }
.pa-caller dt { color: var(--muted); }
.pa-caller dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.pa-tag { display: inline-flex; align-items: center; min-height: 20px; padding: 4px 8px; border-radius: var(--r-pill); font: 600 11px/1 var(--sans); }
.pa-tag[data-tone="agent"] { color: var(--agent); background: var(--agent-soft); }
.pa-note { color: var(--faint); font-size: 0.75rem; }
.pa-violation { display: grid; gap: 4px; margin: 0; padding: 12px 16px 16px; font-size: 0.875rem; color: var(--muted); }
.pa-violation b { color: var(--blown); font-weight: 600; }

/* Protocol explainers: a window with actor columns, one row per step, and the label Double Agent ends with */
.pa-scenes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 16px; }
.pa-scene { margin: 0; display: flex; flex-direction: column; }
.pa-scene .badge[data-live] { color: var(--human); border-color: color-mix(in srgb, var(--human) 40%, transparent); }
.pa-board { padding: 18px 12px 8px; flex: 1; }
.pa-scene figcaption { padding: 14px 16px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.875rem; }
.pa-scene figcaption b { color: var(--ink); font-weight: 600; }
.pa-replay { align-self: flex-end; margin: -4px 12px 12px; }
.pa-scene[data-motion="static"] .pa-replay { display: none; }

.pa-grid { --cols: 3; }
/* One lifeline down the middle of each actor's column. */
.pa-steps { position: relative; }
.pa-steps::before {
  content: ""; position: absolute; inset: -10px 0 0; pointer-events: none;
  background: repeating-linear-gradient(to right, transparent 0 calc(50% / var(--cols) - 0.5px), var(--line-strong) calc(50% / var(--cols) - 0.5px) calc(50% / var(--cols) + 0.5px), transparent calc(50% / var(--cols) + 0.5px) calc(100% / var(--cols)));
}
.pa-actors, .pa-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.pa-actors li { position: relative; display: grid; justify-items: center; gap: 4px; padding: 0 2px 10px; text-align: center; font: 500 0.75rem/1.2 var(--sans); color: var(--muted); }
.pa-actors svg { padding: 6px; width: 32px; height: 32px; box-sizing: border-box; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); }
.pa-actors [data-icon="agent"] svg { color: var(--agent); border-color: var(--agent); background: var(--agent-soft); }
.pa-actors [data-icon="human"] svg { color: var(--human); border-color: var(--human); background: var(--human-soft); }
.pa-actors [data-icon="keys"] svg { color: var(--bot); background: var(--bot-soft); }
.pa-actors [data-icon="double-agent"] svg { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.pa-steps { row-gap: 6px; }
.pa-steps li { position: relative; display: grid; justify-items: center; padding-top: 6px; }
.pa-msg { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; padding: 2px 6px; text-align: center; font-size: 0.8125rem; line-height: 1.35; background: var(--surface); border-radius: var(--r-sm); }
.pa-msg code { font-size: 0.6875rem; }
/* The arrow runs from the middle of the first column it spans to the middle of the last. */
.pa-arrow { --tip: var(--ink); position: relative; justify-self: stretch; height: 12px; margin-inline: calc(50% / var(--span)); }
.pa-arrow::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; border-radius: 2px; background: var(--ink); }
.pa-arrow::after { content: ""; position: absolute; top: 1px; width: 0; height: 0; border-block: 5px solid transparent; }
[data-dir="right"] .pa-arrow::after { right: -2px; border-left: 8px solid var(--tip); }
[data-dir="left"] .pa-arrow::after { left: -2px; border-right: 8px solid var(--tip); }
/* A check an actor makes itself: a ring on its lifeline under a full-width line of text. */
[data-dir="self"] .pa-arrow { margin: 0; }
[data-dir="self"] .pa-arrow::before { left: calc((var(--at) + 0.5) * 100% / var(--cols) - 6px); right: auto; top: 0; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); background: var(--surface); box-sizing: border-box; }
[data-dir="self"] .pa-arrow::after { display: none; }
.pa-result { display: flex; justify-content: center; margin: 14px 0 6px; }
.pa-result span {
  display: inline-block; max-width: 100%; padding: 6px 10px 5px; border: 2px solid currentColor; border-radius: 3px; transform: rotate(-2deg);
  font: 700 0.75rem/1.3 var(--type); letter-spacing: 0.1em; text-transform: uppercase; text-align: center; color: var(--agent);
}
.pa-result[data-tone="human"] span { color: var(--human); }

/* The verification ladder: each rung a longer bar, coloured by what it proves */
.pa-ladder { list-style: none; margin: 0; padding: 4px 4px 8px; display: grid; gap: 12px; }
.pa-ladder li { --c: var(--bot); display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 4px 14px; align-items: center; font-size: 0.875rem; }
.pa-ladder li[data-tone="agent"] { --c: var(--agent); }
.pa-ladder li[data-tone="human"] { --c: var(--human); }
.pa-ladder b { color: var(--c); font-weight: 600; }
.pa-ladder li > span:last-child { grid-column: 2; color: var(--muted); }
.pa-rung-bar { grid-row: span 2; align-self: stretch; display: flex; align-items: center; height: 10px; margin-block: auto; border-radius: var(--r-pill); background: var(--hover); overflow: hidden; }
.pa-rung-bar i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--c); }

@media (max-width: 700px) {
  .pa-chapter.flip .pa-visual { order: 0; }
  .pa-visual { margin-top: 24px; }
  .pa-board { padding-inline: 4px; }
  .pa-msg { padding-inline: 2px; font-size: 0.75rem; }
  .pa-ladder li { grid-template-columns: 5rem minmax(0, 1fr); }
  .pa-caller dl > div { grid-template-columns: 5.5rem minmax(0, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
  .pa-scene[data-motion="wait"] .pa-steps li,
  .pa-scene[data-motion="wait"] .pa-ladder li,
  .pa-scene[data-motion="wait"] .pa-result { opacity: 0; }
  .pa-scene[data-motion="play"] .pa-steps li { animation: pa-in 0.4s ease-out both; animation-delay: calc(var(--i) * 0.9s + 0.2s); }
  .pa-scene[data-motion="play"] .pa-arrow::before { animation: pa-draw 0.5s ease-out both; animation-delay: calc(var(--i) * 0.9s + 0.35s); }
  .pa-scene[data-motion="play"] [data-dir="right"] .pa-arrow::before { transform-origin: left; }
  .pa-scene[data-motion="play"] [data-dir="left"] .pa-arrow::before { transform-origin: right; }
  .pa-scene[data-motion="play"] [data-dir="self"] .pa-arrow::before { animation-name: pa-ping; }
  .pa-scene[data-motion="play"] .pa-arrow::after { animation: pa-in 0.2s ease-out both; animation-delay: calc(var(--i) * 0.9s + 0.8s); }
  .pa-scene[data-motion="play"] .pa-result { animation: pa-stamp 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) both; animation-delay: calc(var(--n) * 0.9s + 0.4s); }
  .pa-scene[data-motion="play"] .pa-ladder li { animation: pa-in 0.4s ease-out both; animation-delay: calc(var(--i) * 0.6s + 0.2s); }
  .pa-scene[data-motion="play"] .pa-rung-bar i { animation: pa-grow 0.6s ease-out both; animation-delay: calc(var(--i) * 0.6s + 0.35s); }
  @keyframes pa-in { from { opacity: 0; transform: translateY(6px); } }
  @keyframes pa-draw { from { transform: scaleX(0); } }
  @keyframes pa-ping { from { transform: scale(0); } 60% { transform: scale(1.4); } }
  @keyframes pa-stamp { from { opacity: 0; transform: scale(1.5); } }
  @keyframes pa-grow { from { width: 0; } }
}