/* Agent-Ready Audit demo. Six readiness scales drawn on the page, each measured
   against what the first agent needs; the gap is the only thing in the accent. */
.ar-brief {max-width:62rem}
.ar-q {min-height:1.05em;font:400 clamp(2.2rem,4.4vw,4.6rem)/1.02 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.025em;color:var(--ink)}
.ar-caret {display:inline-block;width:.06em;height:.82em;margin-left:.08em;vertical-align:-.06em;background:var(--oxide);animation:ar-blink 1s steps(1) infinite}
.ar[data-state="done"] .ar-caret,.ar[data-phase]:not([data-phase="asking"]) .ar-caret,.ar:not([data-state]) .ar-caret {opacity:0;animation:none}
@keyframes ar-blink {50%{opacity:0}}
.ar-goal {max-width:44ch;margin-top:1.2rem;font:400 clamp(1.1rem,1.45vw,1.35rem)/1.5 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--ink-2)}

.ar-stage {display:grid;grid-template-columns:minmax(0,1.6fr) minmax(16rem,.72fr);gap:clamp(3rem,6vw,7rem);margin-top:clamp(2.6rem,4.5vw,4rem)}

/* Chart: name | scale | score, then the finding under the scale. */
.ar-axis,.ar-row {display:grid;grid-template-columns:minmax(11rem,15rem) minmax(0,1fr) 4.5rem;column-gap:clamp(1.2rem,2.4vw,2.4rem)}
.ar-axis {align-items:end;padding-bottom:.8rem}
.ar-views {display:flex;gap:1.3rem}
.ar-views button,.ar-head {font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.ar-views button {padding:.25rem 0;font-size:.9375rem;color:var(--ink-2);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.35em;transition:color .25s,text-decoration-color .25s}
.ar-views button:hover {color:var(--ink);text-decoration-color:var(--rule)}
.ar-views button[aria-pressed="true"] {color:var(--ink);text-decoration-color:var(--oxide)}
.ar-views button:disabled {cursor:default;opacity:.45}
.ar-legend {position:relative;display:flex;justify-content:space-between;font-size:.75rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ar-legend-need {display:inline-flex;align-items:center;gap:.45rem;margin:0 1.4rem 0 auto}
.ar-legend-need i {display:inline-block;width:1px;height:.9rem;background:var(--ink)}

.ar-rows {list-style:none;margin:0;padding:0;border-bottom:1px solid var(--rule)}
.ar-row {grid-template-rows:auto auto;padding:.85rem 0 .95rem;border-top:1px solid var(--rule);align-items:center;position:relative;background:none}
.ar-group {padding:1.7rem 0 .65rem;font-size:.9375rem;color:var(--ink-2);animation:ar-in .6s var(--ease) both}
.ar-group[data-group="fix"] {padding-top:.4rem;color:var(--oxide)}
.ar:not([data-view="plan"]) .ar-group {display:none}

.ar-head {grid-column:1;display:flex;align-items:baseline;gap:.55rem;text-align:left;font-size:1.0625rem;line-height:1.3;color:var(--ink)}
.ar-head:focus-visible,.ar-views button:focus-visible {outline:1px solid var(--oxide);outline-offset:4px}
.ar-rank {min-width:.7rem;font-weight:500;color:var(--oxide);font-variant-numeric:tabular-nums}
.ar:not([data-view="plan"]) .ar-rank {display:none}
.ar-name {transition:color .4s}
.ar-head:hover .ar-name {text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:.3em}
.ar-row.is-block .ar-name {color:var(--oxide)}
.ar-plus {position:relative;flex:none;width:.6rem;height:.6rem;margin-left:.15rem;align-self:center;opacity:.55;transition:transform .35s var(--ease),opacity .25s}
.ar-plus::before,.ar-plus::after {content:'';position:absolute;inset:50% 0 auto;height:1px;background:currentColor}
.ar-plus::after {transform:rotate(90deg)}
.ar-head:hover .ar-plus {opacity:1}
.ar-head[aria-expanded="true"] .ar-plus {transform:rotate(45deg);opacity:1}

.ar-scale {--p:var(--s);grid-column:2;position:relative;height:1.4rem}
.ar-scale > * {position:absolute;top:50%;left:0}
.ar-track {right:0;height:1px;background:var(--rule)}
.ar-fill {width:100%;height:2px;margin-top:-.5px;background:var(--ink);transform-origin:left;transform:scaleX(calc(var(--p) / 100));transition:transform 1.1s var(--ease)}
.ar-gapline {display:none;left:calc(var(--s) * 1%);width:calc((var(--n) - var(--s)) * 1%);height:2px;margin-top:-.5px;background:repeating-linear-gradient(90deg,var(--oxide) 0 5px,transparent 5px 8px);transform-origin:left;transition:transform .8s var(--ease) .15s}
.ar-row.is-gap .ar-gapline {display:block}
.ar-need {left:calc(var(--n) * 1%);width:1px;height:1.1rem;margin:-.55rem 0 0 -.5px;background:var(--ink);transition:opacity .4s,transform .5s var(--ease)}
.ar-slide {width:100%;height:0;transform:translateX(calc((var(--p) - 100) * 1%));transition:transform 1.1s var(--ease)}
.ar-dot {position:absolute;right:-.34rem;top:-.34rem;width:.68rem;height:.68rem;border-radius:50%;background:var(--ink)}
.ar-row.is-gap .ar-dot {background:var(--oxide)}

.ar-score {grid-column:3;display:flex;flex-direction:column;align-items:flex-end;line-height:1;font-variant-numeric:tabular-nums;transition:opacity .4s}
.ar-score b {font:400 2.1rem/1 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.02em;color:var(--ink)}
.ar-score span {margin-top:.3rem;font-size:.75rem;color:var(--ink-2);white-space:nowrap}
.ar-row.is-gap .ar-score span {color:var(--oxide)}

.ar-finding {grid-column:2/4;margin-top:.3rem;max-width:58ch;font:400 1.0625rem/1.45 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--ink);min-height:1.5em}
.ar-w {display:inline-block;animation:ar-word .6s var(--ease) both}
@keyframes ar-word {from{opacity:0;filter:blur(5px);transform:translateY(.15em)}to{opacity:1;filter:none;transform:none}}
.ar-action {grid-column:2/4;margin-top:.55rem;padding-left:1rem;border-left:1px solid var(--oxide);max-width:60ch;font-size:.9375rem;line-height:1.5;color:var(--ink);animation:ar-in .6s var(--ease) both}
.ar-action span {display:block;margin-top:.1rem;font-size:.8125rem;color:var(--ink-2)}
.ar-row:not(.is-gap) .ar-action {border-left-color:var(--rule);color:var(--ink-2)}
.ar:not([data-view="plan"]) .ar-action {display:none}

.ar-ev {grid-column:2/4;margin-top:.9rem;animation:ar-in .45s var(--ease) both}
.ar-ev ul {list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.ar-ev li {padding-left:1rem;border-left:1px solid var(--rule);font-size:.875rem;line-height:1.5;color:var(--ink)}
.ar-ev code {display:block;margin-top:.2rem;font:400 .6875rem/1.5 'Martian Mono',ui-monospace,monospace;color:var(--ink-2);word-break:break-word}
@keyframes ar-in {from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Run states set by the script. */
.ar-row.is-off-need .ar-need {opacity:0;transform:scaleY(0)}
.ar-row.is-off-score .ar-scale {--p:0}
.ar-row.is-off-score .ar-score {opacity:0}
.ar-row.is-off-gap .ar-gapline {transform:scaleX(0)}
.ar .is-hidden {opacity:0;transform:translateY(8px)}
.ar-goal,.ar-legend,.ar-overall,.ar-block,.ar-why,.ar-next > div,.ar-seq li {transition:opacity .6s var(--ease),transform .7s var(--ease)}

/* Verdict: the blocker leads, the overall number stays small. */
.ar-verdict {align-self:start;padding-top:.3rem}
.ar-overall {font-size:.875rem;line-height:1.55;color:var(--ink-2)}
.ar-overall b {font:400 1.7rem/1 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--ink);font-variant-numeric:tabular-nums;margin-right:.1rem}
.ar-overall span {display:block}
.ar-block {margin-top:clamp(1.6rem,3vw,2.4rem);font:400 clamp(1.9rem,2.5vw,2.6rem)/1.06 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.025em;color:var(--ink)}
.ar-block span {color:var(--oxide)}
.ar-why {margin-top:1.1rem;font:400 1.0625rem/1.55 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--ink-2);max-width:36ch}
.ar-next {margin:1.6rem 0 0}
.ar-next > div {display:grid;grid-template-columns:6.2rem minmax(0,1fr);gap:1rem;padding:.65rem 0;border-top:1px solid var(--rule)}
.ar-next dt {font-size:.8125rem;line-height:1.55;color:var(--ink-2)}
.ar-next dd {margin:0;font-size:.9375rem;line-height:1.5;color:var(--ink)}
.ar-seq {list-style:none;margin:2rem 0 0;padding:0;display:grid}
.ar-seq li {position:relative;display:grid;gap:.15rem;padding:0 0 1.1rem 1.3rem;border-left:1px solid var(--rule)}
.ar-seq li:last-child {padding-bottom:0}
.ar-seq li::before {content:'';position:absolute;left:-.25rem;top:.4rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--ink-2)}
.ar-seq li:first-child::before {background:var(--oxide)}
.ar-seq b {font-weight:500;font-size:.875rem;color:var(--ink)}
.ar-seq span {font-size:.875rem;line-height:1.5;color:var(--ink-2)}

@media(max-width:1100px){
 .ar-stage {grid-template-columns:1fr}
 .ar-verdict {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:3rem;align-items:start}
 .ar-overall,.ar-block,.ar-why {grid-column:1}
 .ar-next {grid-column:2;grid-row:1/4;margin-top:0}
 .ar-seq {grid-column:2;margin-top:1.4rem}
}
@media(max-width:700px){
 .ar-axis,.ar-row {grid-template-columns:minmax(0,1fr) 4.5rem;column-gap:1rem}
 .ar-axis {grid-template-rows:auto auto;row-gap:.9rem}
 .ar-legend {grid-column:1}
 .ar-head {grid-column:1;grid-row:1}
 .ar-score {grid-column:2;grid-row:1/3;align-self:start}
 .ar-scale {grid-column:1;grid-row:2;margin-top:.5rem}
 .ar-finding,.ar-action,.ar-ev {grid-column:1/3}
 .ar-score b {font-size:1.9rem}
 .ar-verdict {display:block}
 .ar-next {margin-top:1.6rem}
 .ar-seq {margin-top:2rem}
}
.ar[data-reset] *,.ar[data-reset] *::before,.ar[data-reset] *::after {transition:none!important}