/* Eval Suite demo. Forty cases as a field of short lines: the model in production on top,
   the new model under it. A failed case is the only thing in the accent. */
.es-brief {max-width:62rem}
.es-q {min-height:1.05em;font:400 clamp(2.3rem,4.6vw,4.8rem)/1.02 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.025em;color:var(--ink)}
.es-caret {display:inline-block;width:.06em;height:.82em;margin-left:.08em;vertical-align:-.06em;background:var(--oxide);animation:es-blink 1s steps(1) infinite}
.es[data-state="done"] .es-caret,.es[data-phase]:not([data-phase="asking"]) .es-caret,.es:not([data-state]) .es-caret {opacity:0;animation:none}
@keyframes es-blink {50%{opacity:0}}
.es-goal {max-width:46ch;margin-top:1.2rem;font:400 clamp(1.1rem,1.45vw,1.35rem)/1.5 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--ink-2)}

.es-stage {display:grid;grid-template-columns:minmax(0,1.25fr) minmax(17rem,.8fr);gap:clamp(3rem,6vw,7rem);margin-top:clamp(2.6rem,4.5vw,4rem);padding-top:clamp(2rem,3vw,2.6rem);border-top:1px solid var(--rule)}

/* Legend: the two line weights the grid uses. */
.es-legend {display:flex;flex-wrap:wrap;gap:.4rem 2rem;margin:0 0 1.4rem;font-size:.875rem;color:var(--ink-2)}
.es-legend > span {display:inline-flex;align-items:center;gap:.6rem}
.es-legend i {display:inline-block;width:1.6rem;height:1px;background:var(--ink-2)}
.es-lg-b {color:var(--ink)}
.es-lg-b i {height:2px;background:var(--ink)}

/* The field of cases. */
.es-grid {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.2rem clamp(.6rem,1.4vw,1.3rem)}
.es-case {display:grid;width:100%;gap:.38rem;align-content:start;grid-template-rows:auto 3px 3px;align-items:center;padding:.55rem 0 .8rem;font:inherit;color:inherit;text-align:left;background:none;border:0;cursor:default}
.es[data-phase="done"] .es-case {cursor:pointer}
.es-n {font-size:.75rem;line-height:1;color:var(--ink-2);font-variant-numeric:tabular-nums;transition:color .3s}
.es-case[aria-pressed="true"] .es-n {color:var(--oxide)}
.es[data-phase="done"] .es-case:hover .es-n {color:var(--ink)}
.es-case:focus-visible {outline:1px solid var(--oxide);outline-offset:3px}
.es-m {display:block;height:1px;background:var(--ink-2);transform-origin:left;transform:scaleX(0);transition:transform .45s var(--ease),background-color .3s,opacity .3s}
.es-mb {height:2px;background:var(--ink)}
.es-m.is-run {transform:scaleX(.55);opacity:.35;animation:es-run .5s var(--ease) infinite alternate}
@keyframes es-run {from{transform:scaleX(.2)}to{transform:scaleX(.8)}}
.es-m.is-pass {transform:scaleX(1)}
.es-m.is-fail {transform:scaleX(1);height:2px;background:var(--oxide)}
.es-mb.is-fail {height:3px}
.es-case[aria-pressed="true"] .es-m {transform:scaleX(1)}

.es-ticker {min-height:1.5em;margin-top:1rem;font-size:.875rem;line-height:1.5;color:var(--ink-2)}
.es-ticker b {font-weight:500;color:var(--oxide);font-variant-numeric:tabular-nums;margin-right:.4rem}

/* One case, opened. */
.es-detail {margin-top:.4rem;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.es-detail.is-off {opacity:0;transform:translateY(8px)}
.es-d-head {font-size:.875rem;color:var(--ink-2)}
.es-d-req {margin-top:.5rem;max-width:40ch;font:400 clamp(1.35rem,1.9vw,1.75rem)/1.3 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.015em;color:var(--ink)}
.es-d-rows {margin:1.3rem 0 0}
.es-d-rows > div {display:grid;grid-template-columns:7rem minmax(0,1fr);gap:1rem;padding:.6rem 0;border-top:1px solid var(--rule)}
.es-d-rows dt {font-size:.8125rem;line-height:1.6;color:var(--ink-2)}
.es-d-rows dd {display:flex;justify-content:space-between;gap:1rem;margin:0;font-size:.9375rem;line-height:1.5;color:var(--ink)}
.es-d-rows b {flex:none;font-weight:500;font-size:.8125rem;line-height:1.75}
.es-ok {color:var(--ink-2)}
.es-no {color:var(--oxide)}
.es-d-rows .is-fail dd {color:var(--oxide)}
.es-d-rule {display:grid;gap:.15rem;margin-top:.9rem;padding-left:1rem;border-left:1px solid var(--rule);font-size:.9375rem;line-height:1.5;color:var(--ink)}
.es-d-rule.is-fail {border-left-color:var(--oxide)}
.es-d-rule span {font-size:.8125rem;color:var(--ink-2)}

/* Quality, cost and speed. */
.es-metrics {display:grid;gap:1.5rem;transition:opacity .6s var(--ease),transform .7s var(--ease)}
.es-metrics.is-off {opacity:0;transform:translateY(8px)}
.es-mname {margin-bottom:.45rem;font-size:.875rem;color:var(--ink-2)}
.es-mrow {display:grid;grid-template-columns:4.6rem minmax(0,1fr) 4.6rem;align-items:center;gap:.9rem;padding:.32rem 0}
.es-who {font-size:.875rem;color:var(--ink-2)}
.es-mrow[data-k="b"] .es-who {color:var(--ink)}
.es-track {position:relative;height:1px;background:var(--rule)}
.es-bar {position:absolute;left:0;top:0;width:100%;height:1px;background:var(--ink-2);transform-origin:left;transform:scaleX(var(--v,0));transition:transform 1.1s var(--ease)}
.es-mrow[data-k="b"] .es-bar {top:-1px;height:3px;background:var(--ink)}
.es-val {font:400 1.25rem/1 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.01em;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.es-mrow[data-k="a"] .es-val {font-size:1.05rem;color:var(--ink-2)}

.es-verdict {min-height:4.2em;margin-top:clamp(2rem,3.5vw,2.8rem);font:400 clamp(1.45rem,2vw,1.85rem)/1.28 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.018em;color:var(--ink);transition:opacity .4s}
.es-verdict.is-off {opacity:0}
.es-w {display:inline-block;animation:es-word .6s var(--ease) both}
@keyframes es-word {from{opacity:0;filter:blur(5px);transform:translateY(.15em)}to{opacity:1;filter:none;transform:none}}
.es-drop {display:inline-flex;align-items:center;gap:.6rem;margin-top:1.6rem;padding:.3rem 0;font:inherit;font-size:.9375rem;color:var(--ink);background:none;border:0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--oxide);text-underline-offset:.35em;transition:color .25s,opacity .3s}
.es-drop::before {content:'';width:.55rem;height:.55rem;border-radius:50%;background:var(--oxide)}
.es-drop:hover {color:var(--oxide)}
.es-drop:disabled {opacity:.35;cursor:default}
.es-drop:focus-visible,.es .demo-replay:focus-visible {outline:1px solid var(--oxide);outline-offset:4px}
.es[data-reset] *,.es[data-reset] *::before,.es[data-reset] *::after {transition:none!important}

@media(max-width:1000px){
 .es-stage {grid-template-columns:1fr;gap:2.6rem}

 .es-detail {margin-top:.6rem}
}
@media(max-width:560px){
 .es-grid {grid-template-columns:repeat(8,minmax(0,1fr));column-gap:.45rem}
 .es-n {font-size:.6875rem}
 .es-d-rows > div {grid-template-columns:5.2rem minmax(0,1fr);gap:.7rem}
 .es-d-rows dd {flex-direction:column;gap:.1rem}
 .es-mrow {grid-template-columns:4.2rem minmax(0,1fr) 4.2rem;gap:.7rem}
}