/* Agent Relationship Audit demo. Three example answers, checked claim by claim. */
.ra-ask {max-width:64rem}
.ra-q {min-height:2.1em;font:400 clamp(2.3rem,4.6vw,4.8rem)/1.02 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.025em;color:var(--ink)}
.ra-caret {display:inline-block;width:.06em;height:.82em;margin-left:.08em;vertical-align:-.06em;background:var(--oxide);animation:ra-blink 1s steps(1) infinite}
.ra:not([data-phase="asking"]) .ra-q .ra-caret {opacity:0;animation:none}
@keyframes ra-blink {50%{opacity:0}}
.ra-pick {display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-top:1.4rem}
.ra-pick button {padding:.3rem 0;font:inherit;font-size:.9375rem;color:var(--ink-2);text-align:left;background:none;border:0;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.35em;transition:color .25s,text-decoration-color .25s}
.ra-pick button:hover {color:var(--ink);text-decoration-color:var(--rule)}
.ra-pick button[aria-pressed="true"] {color:var(--ink);text-decoration-color:var(--oxide)}
.ra button:focus-visible,.ra-fixes li:focus-visible {outline:1px solid var(--oxide);outline-offset:4px}

/* Key: the three marks, drawn the way they appear in the answers. */
.ra-key {display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.4rem 1.8rem;margin-top:clamp(2.4rem,4vw,3.4rem);font:400 1rem/1.4 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--ink)}
.ra-key .ra-gap .ra-note {font-size:.875rem;font-weight:400}

.ra-stage {margin-top:.9rem;padding-top:clamp(1.8rem,3vw,2.4rem);border-top:1px solid var(--rule)}
.ra-answers {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,4.5rem)}
.ra-col {display:flex;flex-direction:column;min-width:0}
.ra-who {display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem;margin:0 0 1rem;font:500 .9375rem/1.3 'Hanken Grotesk','Hanken Fallback',Arial,sans-serif;letter-spacing:0;color:var(--ink)}
.ra-who span {font-weight:400;font-size:.8125rem;color:var(--ink-2)}
.ra-a {flex:1;margin:0;font:400 clamp(1.15rem,1.45vw,1.42rem)/1.5 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.01em;color:var(--ink);transition:color .6s}

/* Words stream in. */
.ra-w {display:inline-block}
.ra[data-state] .ra-w {opacity:0}
.ra[data-state] .ra-w.is-in {opacity:1;animation:ra-word .6s var(--ease) both}
@keyframes ra-word {from{opacity:0;filter:blur(5px);transform:translateY(.18em)}to{opacity:1;filter:none;transform:none}}

/* Once checking starts, the answer recedes and the claims about Atlas & Co. stand out. */
.ra:not([data-state]) .ra-a,.ra[data-phase="checking"] .ra-a,.ra[data-phase="verdict"] .ra-a,.ra[data-phase="fixed"] .ra-a,.ra[data-state="done"] .ra-a {color:var(--ink-2)}
.ra-said {transition:color .4s,text-decoration-color .4s}
.ra-said,.ra-said .ra-w {text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:transparent;transition:color .4s,text-decoration-color .4s,opacity .4s}
.ra-m {transition:opacity .35s}

/* Accurate: kept, underlined in ink. */
.ra-ok.is-judged .ra-said,.ra:not([data-state]) .ra-ok .ra-said,.ra-key .ra-ok .ra-said {color:var(--ink)}
.ra-ok.is-judged .ra-said,.ra-ok.is-judged .ra-said .ra-w,.ra:not([data-state]) .ra-ok .ra-said,.ra:not([data-state]) .ra-ok .ra-w,.ra-key .ra-ok .ra-said {text-decoration-color:color-mix(in srgb,var(--ink) 60%,transparent)}

/* Outdated: struck through, the current fact written after it. */
.ra-old.is-judged .ra-said,.ra-old.is-judged .ra-said .ra-w,.ra:not([data-state]) .ra-old .ra-said,.ra:not([data-state]) .ra-old .ra-w,.ra-key .ra-old .ra-said {text-decoration-line:line-through;text-decoration-thickness:1.5px;text-decoration-color:var(--oxide)}
.ra-old.is-judged .ra-said,.ra:not([data-state]) .ra-old .ra-said {color:color-mix(in srgb,var(--ink-2) 80%,transparent)}
.ra-note {font:500 .78em/1.3 'Hanken Grotesk','Hanken Fallback',Arial,sans-serif;letter-spacing:-.005em;color:var(--oxide)}
.ra-old .ra-note::before {content:'→ ';font-weight:400}
.ra-old .ra-note {margin-left:.35em}

/* Missing: a gap marker where the fact should have been. */
.ra-bar {display:inline-block;width:2px;height:1.05em;margin:0 .32em 0 .1em;vertical-align:-.17em;background:var(--oxide);transform-origin:50% 100%}
.ra-gap .ra-note {text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:.28em;text-decoration-color:color-mix(in srgb,var(--oxide) 70%,transparent)}

/* Before a claim is checked its notes stay out of the line. */
.ra[data-state] .ra-stage .ra-m:not(.is-judged) .ra-note,.ra[data-state] .ra-stage .ra-gap:not(.is-judged) {display:none}
.ra-m.is-judged .ra-note {animation:ra-note .55s var(--ease) both}
.ra-gap.is-judged .ra-bar {animation:ra-bar .5s var(--ease) both}
@keyframes ra-bar {from{transform:scaleY(0)}to{transform:none}}
@keyframes ra-note {from{opacity:0;transform:translateY(.25em)}to{opacity:1;transform:none}}

/* Tally per answer. */
.ra-tally {display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin:1.4rem 0 0;padding-top:.85rem;border-top:1px solid var(--rule);font:400 .8125rem/1.4 'Hanken Grotesk','Hanken Fallback',Arial,sans-serif;color:var(--ink-2);transition:opacity .5s,transform .6s var(--ease)}
.ra-tally b {font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.ra-t-name {flex-basis:100%;font-weight:500;color:var(--ink)}
.ra-t-name.is-no {color:var(--oxide)}
.ra[data-state] .ra-col:not(.is-tallied) .ra-tally {opacity:0;transform:translateY(6px)}

/* Verdict and fixes. */
.ra-close {display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.5rem,6vw,7rem);align-items:start;margin-top:clamp(3rem,6vw,5rem)}
.ra-punch {max-width:16ch;margin:0;font:400 clamp(1.8rem,3.3vw,3.3rem)/1.06 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.025em;color:var(--ink);transition:opacity .7s,transform .8s var(--ease)}
.ra-punch span {color:var(--oxide)}
.ra-fix {padding-top:.5rem;transition:opacity .6s}
.ra-fix h3 {margin:0 0 1rem;font:500 1rem/1.3 'Hanken Grotesk','Hanken Fallback',Arial,sans-serif;letter-spacing:0;color:var(--ink)}
.ra-fixes {list-style:none;margin:0;padding:0}
.ra-fixes li {display:grid;grid-template-columns:1.6rem minmax(0,1fr) auto;gap:.3rem clamp(1rem,2.5vw,2.5rem);align-items:baseline;padding:1rem 0;border-top:1px solid var(--rule);font-size:.9375rem;line-height:1.45;color:var(--ink-2);cursor:default;transition:opacity .45s,transform .6s var(--ease)}
.ra-fixes li:last-child {border-bottom:1px solid var(--rule)}
.ra-fn {font-weight:500;color:var(--oxide);font-variant-numeric:tabular-nums}
.ra-fixes strong {font-weight:500;color:var(--ink)}
.ra-what {display:grid;gap:.25rem}
.ra-where {font-size:.8125rem}
.ra-corr {font-size:.8125rem;color:var(--ink);text-align:right;white-space:nowrap}
.ra[data-state] .ra-punch:not(.is-on) {opacity:0;transform:translateY(10px)}
.ra[data-state] .ra-fix:not(.is-on) {opacity:0}
.ra[data-state] .ra-fixes li:not(.is-on) {opacity:0;transform:translateY(8px)}

/* A fix and the claims it corrects light up together. */
.ra[data-focus] .ra-m:not(.is-focus) {opacity:.32}
.ra[data-focus] .ra-fixes li.is-on:not(.is-focus) {opacity:.4}
.ra-fixes li.is-focus .ra-corr,.ra-fixes li.is-focus strong {color:var(--oxide)}
.ra-m.is-focus .ra-said {color:var(--ink)}

@media(max-width:900px){
 .ra-key {justify-content:flex-start}
 .ra-answers {grid-template-columns:1fr;gap:2.4rem}
 .ra-close {grid-template-columns:1fr;gap:2rem}
 .ra-punch {max-width:22ch}
}
@media(max-width:600px){
 .ra-fixes li {grid-template-columns:1.6rem minmax(0,1fr)}
 .ra-corr {grid-column:2;text-align:left}
}