/* A response is a handoff, an executed change, and a read-back. */
/* Clip horizontal overflow without making the body a sticky scroll container. */
body:has(.response-flow) { overflow-x: clip; }
.story-hero h1 { max-width: 16ch; font-size: clamp(3.1rem, 5.2vw, 5.1rem); }
.response-case { display: flex; align-items: center; gap: 13px; padding: 18px 24px; border-bottom: 1px solid #43514a; background: #18231e; }
.response-case p { font-size: .87rem; color: #d8e1da; }
.response-case strong { color: #fff; font-weight: 600; margin-right: 12px; }
.response-case > span:last-child { margin-left: auto; color: #b5c8bb; font-size: .72rem; white-space: nowrap; }
.response-case__signal { width: 9px; height: 9px; border-radius: 50%; background: #ff817b; flex: 0 0 9px; }
.response-flow .flow-steps { background: #101a15; }
.response-board { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: 'detect investigate approve' 'verify microsoft respond' 'receipt receipt receipt'; gap: 26px 75px; padding: 26px 52px 22px; background: #101914; overflow: hidden; }
.response-links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; }
.response-links path { fill: none; stroke: #334b3c; stroke-width: 1; }
.response-links path.is-active { stroke: #83dbb1; stroke-width: 2; }
.response-links .response-direction { stroke: #a5e7bf; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .6; transform-origin: 0 0; }
.response-actor { display: flex; align-items: center; flex-direction: column; min-width: 0; text-align: center; }
.response-actor--detect { grid-area: detect; }
.response-actor--investigate { grid-area: investigate; }
.response-actor--approve { grid-area: approve; }
.response-actor--respond { grid-area: respond; }
.response-actor--microsoft { grid-area: microsoft; }
.response-actor--verify { grid-area: verify; }
.response-agent { width: 54px; height: 54px; display: grid; place-items: center; position: relative; color: #9bb5a3; background: #192a1f; border: 1px solid #526b5a; border-radius: 15px; margin-bottom: 12px; }
.response-agent > svg { width: 36px; height: 36px; }
.response-agent::before { content: ''; position: absolute; inset: -7px; border: 1px solid #76c69a; border-radius: 24px; opacity: 0; }
.response-inbox { position: absolute; width: 26px; height: 6px; border: 1px solid currentColor; border-top: 0; left: calc(50% - 13px); bottom: -5px; background: #101914; }
.response-actor > strong { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; line-height: 1.25; color: #edf5ee; padding: 3px 7px; background: #101914; }
.response-actor > small { color: #b0c6b7; font-size: .77rem; line-height: 1.5; margin-top: 5px; padding: 2px 6px; background: #101914; }
.response-actor.is-active .response-agent { background: #234631; border-color: #a0edbe; color: #c0ffd6; box-shadow: 0 7px 22px #0005; }
.response-actor--approve .response-agent { border-radius: 50%; border-color: #bc9d69; color: #e6c792; background: #342c1e; }
.response-actor--approve .response-agent::before { border-radius: 50%; border-color: #e6c792; }
.response-actor--approve.is-active .response-agent { border-color: #f6d898; color: #ffe5b1; background: #443620; }
.response-human { margin-top: 12px; color: #f1d29c; font-size: .7rem; border: 1px solid #786343; padding: 5px 9px; background: #29251c; }
.response-target { width: 100%; margin-top: 12px; padding: 10px 12px; border: 1px solid #5e5444; background: #24271e; min-height: 90px; position: relative; }
.response-target > span:first-child { display: block; color: #dee4d7; font-size: .72rem; margin-bottom: 5px; }
.response-target strong { display: block; font-size: .78rem; color: #ffaea2; font-weight: 500; }
.response-target .response-role-after { position: absolute; inset: 32px 4px auto; opacity: 0; color: #a3f0bd; }
.response-target .response-check-pending, .response-target .response-check-done { position: absolute; inset: auto 4px 9px; font: .65rem var(--font-mono); opacity: 0; color: #d9c69a; }
.response-target .response-check-done { color: #a3f0bd; }
.has-executed .response-role-before { opacity: 0; }
.has-executed .response-role-after, .has-executed .response-check-pending { opacity: 1; }
.has-verified .response-check-pending { opacity: 0; }
.has-verified .response-check-done { opacity: 1; }
.has-executed .response-target { border-color: #537960; background: #1e3326; }
.response-receipt { grid-area: receipt; justify-self: center; position: relative; display: flex; align-items: center; gap: 16px; width: min(100%, 650px); min-height: 70px; padding: 15px 20px; background: #17271d; border: 1px dashed #5a7562; color: #bcd1c2; }
.response-receipt > svg { flex: 0 0 28px; width: 28px; height: 32px; }
.response-receipt strong { font-family: var(--font-display); font-size: 1rem; font-weight: 500; display: block; }
.response-receipt span { font-size: .73rem; line-height: 1.5; display: block; margin-top: 4px; }
.response-receipt b { font-size: .7rem; font-weight: 500; margin-left: auto; white-space: nowrap; opacity: 0; }
.has-receipt .response-receipt { color: #17251b; background: #edf1e4; border: 1px solid #edf1e4; }
.has-receipt .response-receipt b { opacity: 1; color: #1b5e36; }
.response-packet { position: absolute; left: 0; top: 0; z-index: 4; opacity: 0; pointer-events: none; background: #e8f5d8; color: #123520; border: 1px solid #c0e7a6; box-shadow: 0 6px 14px #0007; padding: 10px 13px; font: .7rem var(--font-mono); white-space: nowrap; border-radius: 3px; }
.response-packet::before { content: ''; display: inline-block; width: 7px; height: 9px; border: 1px solid currentColor; margin-right: 9px; vertical-align: -1px; }
.response-flow.is-playing .response-packet { will-change: transform, opacity; }
.response-detail { padding: 30px 34px; border-top: 1px solid #43514a; display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; min-height: 215px; align-items: start; background: #19261f; }
.response-detail h3 { font-size: clamp(1.55rem, 2.4vw, 2.25rem); line-height: 1.15; max-width: 24ch; }
.response-detail p { font-size: 1rem; line-height: 1.6; color: #d2e0d5; max-width: 61ch; }
.response-detail .response-boundary { font-size: .8rem; color: #abc3b2; line-height: 1.55; margin-top: 16px; }
.response-detail .btn, .response-detail a { margin-top: 20px; }
.response-detail a { font-size: .85rem; }
.response-flow .flow-controls { position: sticky; top: 92px; z-index: 8; gap: 14px; flex-wrap: wrap; background: #192a20; border-bottom: 1px solid #43514a; }
.response-flow .flow-controls .response-approve { font-size: .77rem; }
.response-flow .flow-controls [data-flow-play] { min-width: 145px; }
.response-flow .response-motion-control { border: 0; text-decoration: underline; text-underline-offset: 4px; color: #b7d3c0; }
.response-flow .response-direction-control { border: 0; color: #b7d3c0; font-size: .75rem; text-decoration: underline; text-underline-offset: 4px; }
.has-motion .response-role-before, .has-motion .response-role-after { transition: opacity 220ms ease-out, transform 350ms var(--ease); }
.has-motion .response-role-after { transform: translateY(8px); }
.has-motion.has-executed .response-role-before { transform: translateY(-8px); }
.has-motion.has-executed .response-role-after { transform: translateY(0); }
.has-motion.has-receipt .response-receipt { animation: receipt-delivered 600ms var(--ease) both; }
.has-motion.is-playing .response-actor.is-active .response-agent::before { animation: response-signal 1500ms ease-out 3; }
.has-motion.is-playing .response-actor.is-active .response-agent > svg { animation: response-working 1800ms ease-in-out 2; }
.response-flow:not(.is-playing) *, .response-flow:not(.is-playing) *::before { animation-play-state: paused !important; }
@keyframes response-signal { from { opacity: .65; transform: scale(.94); } to { opacity: 0; transform: scale(1.25); } }
@keyframes response-working { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-4px); } 60% { transform: translateY(2px); } }
@keyframes receipt-delivered { from { opacity: .35; transform: translateY(-14px) rotate(-1.5deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@media (max-width: 1000px) {
  .response-board { padding-inline: 28px; gap: 26px 30px; }
  .response-actor > strong { font-size: 1rem; }
  .response-target { padding-inline: 6px; }
  .response-detail { gap: 30px; }
}
@media (max-width: 700px) {
  .story-hero h1 { font-size: clamp(2.7rem, 9.7vw, 4rem); }
  .response-case { padding: 14px 16px; gap: 10px; align-items: start; }
  .response-case p { font-size: .78rem; }
  .response-case strong { display: block; margin-bottom: 3px; }
  .response-case > span:last-child { display: none; }
  .response-case__signal { margin-top: 5px; }
  .response-board { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: 'detect investigate' 'approve respond' 'verify microsoft' 'receipt receipt'; gap: 26px 18px; padding: 25px 16px 22px; }
  .response-agent { width: 51px; height: 51px; border-radius: 13px; margin-bottom: 13px; }
  .response-agent > svg { width: 34px; height: 34px; }
  .response-agent::before { inset: -5px; border-radius: 18px; }
  .response-actor > strong { font-size: .88rem; padding-inline: 1px; }
  .response-actor > small { font-size: .66rem; padding-inline: 2px; }
  .response-human { font-size: .6rem; padding: 4px; }
  .response-target { margin-top: 10px; padding: 8px 4px; min-height: 96px; }
  .response-target strong { font-size: .68rem; }
  .response-target > span:first-child { font-size: .65rem; }
  .response-target .response-role-after { top: 30px; }
  .response-target .response-check-pending, .response-target .response-check-done { font-size: .55rem; }
  .response-receipt { gap: 10px; padding: 13px 11px; min-height: 76px; }
  .response-receipt > svg { flex-basis: 23px; width: 23px; }
  .response-receipt strong { font-size: .87rem; }
  .response-receipt span { font-size: .65rem; }
  .response-receipt b { display: none; }
  .response-packet { font-size: .56rem; padding: 8px; max-width: 150px; }
  .response-packet::before { margin-right: 5px; }
  .response-detail { grid-template-columns: 1fr; gap: 18px; padding: 24px 20px; min-height: 320px; }
  .response-detail h3 { font-size: 1.6rem; }
  .response-detail p { font-size: .9rem; }
  .response-detail .response-boundary { font-size: .77rem; }
  .response-detail .btn { font-size: .77rem; padding-inline: 13px; }
  .response-flow .flow-controls { display: grid; grid-template-columns: 1fr auto; gap: 8px; top: 76px; padding: 10px 12px; }
  .response-flow .flow-controls > div { grid-column: 1 / -1; grid-row: 2; }
  .response-flow .response-motion-control { grid-column: 2; grid-row: 1; padding: 4px; min-height: 32px; font-size: .66rem; }
  .response-flow .response-direction-control { grid-column: 1 / -1; grid-row: 3; min-height: 32px; padding: 4px; font-size: .7rem; }
  .response-flow .response-approve { grid-column: 1 / -1; grid-row: 4; }
  .response-flow .flow-controls [data-flow-play] { min-width: 0; }
  .response-flow .flow-controls > span { align-self: center; }
}