/* Shared by the home and Process Automation pages. */
/* One case, start to finish: the case travels between people, Amy and your systems, and each card writes its
   line as it arrives. Flat like the rest of the page: one accent, hairlines, no glow. */
.case-run { padding: 30px 32px 34px; border: 1px solid var(--hairline); border-radius: 16px; background: var(--plane); }
.concept-grid + .case-run { margin-top: 28px; }
.case-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; padding-bottom: 22px; border-bottom: 1px solid var(--hairline); }
.case-head .eyebrow { margin-bottom: 8px; }
.case-head h3 { font-size: 1.2rem; line-height: 1.35; letter-spacing: -.02em; }
.case-sub { color: var(--muted); font-size: .86rem; margin-top: 6px; max-width: 62ch; }
.case-play { flex: none; cursor: pointer; font: inherit; font-size: .72rem; font-weight: 550; color: var(--accent); background: var(--plane); border: 1px solid var(--hairline); border-radius: 999px; padding: 8px 15px; min-height: 34px; }
.case-play:hover { border-color: var(--line-strong); }
.case-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.case-play[hidden], .case-play > span { display: none; }
.case-run:is([data-state="idle"], [data-state="paused"]) [data-when="play"], .case-run[data-state="playing"] [data-when="pause"], .case-run[data-state="done"] [data-when="again"] { display: inline; }

.case-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "people-label . systems-label" "people amy systems"; gap: 10px 88px; align-items: center; margin-top: 26px; }
.case-label-people { grid-area: people-label; }
.case-label-systems { grid-area: systems-label; }
.case-people { grid-area: people; }
.case-amy { grid-area: amy; }
.case-systems { grid-area: systems; }
.case-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.case-wire, .case-trail { fill: none; stroke-linecap: round; }
.case-wire { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 4; opacity: .7; }
.case-trail { stroke: var(--accent); stroke-width: 1.6; opacity: 0; }
.case-end { fill: var(--plane); stroke: var(--line-strong); stroke-width: 1; transition: stroke 220ms var(--ease); }
.case-end.is-lit { stroke: var(--accent); }
.case-token { fill: var(--accent); stroke: var(--plane); stroke-width: 2; opacity: 0; }

.case-side { display: grid; gap: 12px; align-content: center; }
.case-label { font-size: .61rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.case-card, .case-amy { border: 1px solid var(--hairline); background: var(--plane); transition: border-color 220ms var(--ease); }
.case-card { border-radius: 12px; padding: 12px 14px; }
.case-amy { border-color: var(--line-strong); border-radius: 14px; padding: 16px 18px 18px; }
.case-card[data-state="done"] { border-color: var(--line-strong); }
.case-card[data-state="active"], .case-amy[data-state="active"] { border-color: var(--accent); }
.case-who { display: flex; align-items: center; gap: 10px; }
.case-who h4 { margin: 0; font-size: .82rem; font-weight: 650; line-height: 1.3; color: var(--ink); }
.case-who p { font-size: .66rem; color: var(--muted); }
.case-avatar, .case-who img { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--sun-wash); }
.case-avatar { display: grid; place-items: center; color: var(--accent); font-size: .66rem; font-weight: 650; transition: background-color 220ms var(--ease), color 220ms var(--ease); }
.case-who img { object-fit: cover; }
.case-card[data-state="active"] .case-avatar { background: var(--accent); color: var(--plane); }

.case-lines { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 5px; }
.case-lines li { position: relative; padding-left: 13px; font-size: .72rem; line-height: 1.45; color: var(--ink); }
.case-lines li::before { content: ""; position: absolute; left: 0; top: .52em; width: 5px; height: 5px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--plane); }
.case-lines li[data-written]::before { border-color: var(--accent); background: var(--accent); }
/* Each line writes itself left to right; the dot stays visible as the place it will appear. */
.case-run.is-live .case-lines li { clip-path: inset(0 calc((100% - 13px) * (1 - var(--write, 0))) -12px 0); }

.case-rule { margin: 14px 0 0; padding: 8px 11px; border-left: 2px solid var(--line-strong); border-radius: 0 7px 7px 0; background: var(--sun-wash); font-size: .74rem; line-height: 1.45; color: var(--ink); transition: border-color 220ms var(--ease); }
.case-rule span { display: block; margin-bottom: 2px; font-size: .58rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); transition: color 220ms var(--ease); }
.case-rule[data-state="active"] { border-left-color: var(--accent); }
.case-rule[data-state="active"] span { color: var(--accent); }
.case-log { margin-top: 14px; gap: 8px; }
.case-log li { font-size: .76rem; }
.case-log li:not(:last-child)::after { content: ""; position: absolute; left: 2px; top: calc(.52em + 7px); bottom: -9px; width: 1px; background: var(--hairline); }

@media (max-width: 900px) {
  .case-run { padding: 22px 18px 24px; }
  .case-head { flex-direction: column; align-items: flex-start; }
  .case-stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "people-label" "people" "amy" "systems" "systems-label"; gap: 10px 0; margin-top: 24px; }
  .case-amy { margin: 46px 0; }
  .case-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-systems { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .case-side .case-lines, .case-side .case-who p { display: none; }
  .case-card { padding: 10px 8px; text-align: center; }
  .case-side .case-who { flex-direction: column; justify-content: center; gap: 6px; }
  .case-amy { padding: 14px 15px 16px; }
}