/* Adversarial App Audit demo. A request walks the app, finds the missing check,
   the finding writes itself, the fix lands as a diff and the request is stopped. */
.aa code,.aa pre {font-family:'Martian Mono',ui-monospace,monospace;font-size:.75rem;line-height:1.7;font-variant-ligatures:none}
.aa pre {margin:0;white-space:normal}

.aa-ask {max-width:62rem}
.aa-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)}
.aa-caret {display:inline-block;width:.06em;height:.82em;margin-left:.08em;vertical-align:-.06em;background:var(--oxide);animation:aa-blink 1s steps(1) infinite}
.aa:not([data-phase="asking"]) .aa-caret {opacity:0;animation:none}
@keyframes aa-blink {50%{opacity:0}}
.aa-pick {display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-top:1.4rem}
.aa-pick button {padding:.3rem 0;font:inherit;font-size:.9375rem;color:var(--ink-2);background:none;border:0;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.35em;transition:color .25s,text-decoration-color .25s}
.aa-pick button:hover {color:var(--ink);text-decoration-color:var(--rule)}
.aa-pick button[aria-pressed="true"] {color:var(--ink);text-decoration-color:var(--oxide)}
.aa button:focus-visible {outline:1px solid var(--oxide);outline-offset:4px}

/* The path: request and response at the browser end, then the app drawn on one line. */
.aa-path {position:relative;margin-top:clamp(3rem,5vw,4.5rem);padding-top:clamp(2rem,3vw,2.6rem);border-top:1px solid var(--rule)}
.aa-io {min-height:3.6rem;margin-bottom:2.2rem}
.aa-io p {display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .9rem;transition:opacity .4s var(--ease),transform .5s var(--ease)}
.aa-io code {font-size:.8125rem;color:var(--ink)}
.aa-dir {width:1rem;font-size:.875rem;color:var(--ink-2)}
.aa-as {font-size:.8125rem;color:var(--ink-2)}
.aa-res.is-leak code,.aa-res.is-leak .aa-dir {color:var(--oxide)}

.aa-track {position:relative;height:0}
.aa-line,.aa-fill {position:absolute;left:0;right:0;top:0;height:1px}
.aa-line {background:var(--rule)}
.aa-fill {background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
.aa-fill.is-leak {background:var(--oxide)}
.aa-headway {position:absolute;left:0;top:0;width:100%;height:0;pointer-events:none}
.aa-head {position:absolute;left:-4px;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--ink);opacity:0;transition:opacity .25s}
.aa-head.is-on {opacity:1}
.aa-head.is-leak {background:var(--oxide)}

.aa-nodes {position:relative;list-style:none;margin:0;padding:0;min-height:7.4rem}
.aa-node {position:absolute;top:0;left:calc(var(--x) * 100%);transform:translateX(-50%);padding-top:1.5rem;display:grid;justify-items:center;text-align:center;font-size:.9375rem;line-height:1.35;white-space:nowrap}
.aa-node::before {content:'';position:absolute;top:-3px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--ink-2);transition:background-color .3s}
.aa-node.is-lit::before {background:var(--ink)}
.aa-node strong {font-weight:500;color:var(--ink);transition:color .3s}
.aa-sub {font-size:.8125rem;color:var(--ink-2);transition:opacity .4s,color .3s}
.aa-node[data-n="browser"] {transform:none;justify-items:start;text-align:left}
.aa-node[data-n="browser"]::before {left:0;margin-left:-1px}
.aa-end {transform:translateX(-100%);justify-items:end;text-align:right}
.aa-end::before {left:auto;right:0;margin:0 -1px 0 0}
.aa-end.is-leak::before {background:var(--oxide)}

/* The check: a gate across the line. Dashed while missing, solid once the fix is in. */
.aa-gate::before {top:-17px;width:1px;height:35px;margin-left:0;border-radius:0;background:repeating-linear-gradient(to bottom,var(--ink-2) 0 3px,transparent 3px 7px);opacity:.75}
.aa-gate::after {content:'';position:absolute;top:-21px;left:50%;width:1px;height:43px;background:var(--ink);transform:scaleY(0);transition:transform .7s var(--ease)}
.aa-gate.is-shut::after {transform:scaleY(1)}
.aa-gate.is-shut::before {opacity:0}
.aa-gate.is-open .aa-gate-name,.aa-gate.is-open .aa-gate-state {color:var(--oxide)}
.aa-gate.is-hit::after {animation:aa-hit .5s var(--ease)}
@keyframes aa-hit {30%{transform:scaleY(1.18)}}

.aa-records {list-style:none;margin:.55rem 0 0;padding:0;display:grid;justify-items:end}
.aa-records li {display:flex;gap:.9rem;color:var(--ink-2);transition:color .35s}
.aa-records li code {font-size:.75rem;color:inherit}
.aa-records li code:first-child {opacity:.7}
.aa-records li.is-leak {color:var(--oxide)}
.aa-records li.is-leak code:first-child {opacity:1}

/* The report: the finding on the left, the fix and its proof on the right. */
.aa-report {display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(3rem,7vw,7rem);margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(2rem,3vw,2.6rem);border-top:1px solid var(--rule)}
.aa-report section {min-width:0}
.aa-title,.aa-fix-title {font:400 clamp(1.45rem,2.1vw,2rem)/1.2 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.025em;color:var(--ink);max-width:24ch;min-height:2.4em}
.aa-meta {display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1.1rem;margin-top:.9rem;font-size:.8125rem;color:var(--ink-2)}
.aa-meta code {color:var(--ink-2)}
.aa-sev {font-weight:500;color:var(--oxide)}
.aa-text {margin-top:1.3rem;font:400 clamp(1.05rem,1.3vw,1.2rem)/1.6 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--ink);max-width:40ch;min-height:6.4em}
.aa-w {display:inline-block;animation:aa-word .6s var(--ease) both}
@keyframes aa-word {from{opacity:0;filter:blur(5px);transform:translateY(.18em)}to{opacity:1;filter:none;transform:none}}

.aa .aa-evidence {margin-top:1.8rem}
.aa-ev {display:block;padding-left:1rem;border-left:1px solid var(--rule);color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere}
.aa-ev-hit {color:var(--oxide)}

.aa .aa-diff {margin-top:1.5rem}
.aa-d {display:block;position:relative;padding-left:1.7rem;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere}
.aa-d::before {content:attr(data-k);position:absolute;left:0;width:1rem;text-align:center}
.aa-d[data-k="-"] {text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:var(--ink-2)}
.aa-d[data-k="-"]::before {color:var(--ink-2)}
.aa-d[data-k="+"] {color:var(--ink)}
.aa-d[data-k="+"]::before {color:var(--oxide)}
.aa[data-state] .aa-d[data-k="-"]:not(.is-struck) {text-decoration-color:transparent}
.aa-d[data-k="-"] {transition:text-decoration-color .5s,opacity .4s,transform .5s var(--ease)}

.aa-verify {margin-top:1.6rem;display:grid;gap:.15rem}
.aa-verify p {display:flex;flex-wrap:wrap;gap:.1rem 1rem;font-size:.875rem;color:var(--ink-2)}
.aa-v-file {margin-bottom:.35rem}
.aa-v-file span {font-size:.8125rem}
.aa-v b {width:3.6rem;font-weight:500;color:var(--ink)}

/* Running: parts start hidden and arrive with .is-on. Before the script, everything shows. */
.aa-meta,.aa-ev,.aa-d,.aa-verify p,.aa-fix-title,.aa-gate-state,.aa-req,.aa-res {transition:opacity .45s var(--ease),transform .55s var(--ease)}
.aa[data-state] :is(.aa-meta,.aa-ev,.aa-d,.aa-verify p,.aa-req,.aa-res,.aa-gate-state):not(.is-on) {opacity:0;transform:translateY(5px)}
.aa[data-state] .aa-d[data-k="+"]:not(.is-on) {transform:translateX(-10px)}

@media(max-width:900px){
 .aa-report {grid-template-columns:1fr;gap:2.6rem}
 .aa-title,.aa-fix-title,.aa-text {min-height:0}
}
@media(max-width:640px){
 .aa-node {font-size:.8125rem}
 .aa-sub {font-size:.75rem}
 .aa-node[data-n="api"] .aa-sub {display:none}
 .aa-records {margin-top:2.3rem}
 .aa-nodes {min-height:8.6rem}
 .aa-records li {gap:.6rem}
 .aa-records li code,.aa code,.aa pre {font-size:.6875rem}
 .aa-io code {font-size:.75rem}
}