/* ---- the live comparison on /use-cases/compare/ -------------------------------------------
   Loaded after app.css and built only from its tokens, so day, dusk and night come for free:
   no colour below is a literal. The TWX48 side wears the Models blue the way a served model
   tile does on /models/ (a 42% blue edge and a 12% blue chip); the NVFP4 side stays on the
   hairline and a neutral chip. The locked-topic line is the Governance amber at a wash, because
   a refusal here is the product doing its job, not an error: errors are the only thing on the
   page in --rose.

   Every size is calc(<len> * var(--ts)), like the rest of the site, so the reader's text-size
   control reaches this page too. */

.cmp-sec{padding-top:44px}
.cmp{position:relative}

.cmp-mock{margin:0 0 18px;padding:9px 14px;border:1px dashed var(--line-deep);border-radius:10px;
  font-family:var(--mono);font-size:calc((12.5px) * var(--ts));color:var(--dim)}
.cmp-mock[hidden]{display:none}

/* ---- use case and samples ---- */
.cmp-tabs{margin-top:0}
.cmp-docs{margin-top:14px;color:var(--dim);font-size:calc((15.5px) * var(--ts))}
.cmp-docs[hidden]{display:none}

.cmp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cmp-q{display:inline-flex;align-items:flex-start;gap:8px;max-width:100%;
  font-family:var(--sans);font-size:calc((14px) * var(--ts));line-height:1.4;color:var(--txt);text-align:left;
  background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:8px 12px;cursor:pointer;
  transition:border-color .18s,background .18s}
.cmp-q:hover{border-color:var(--p-models)}
.cmp-q:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.cmp-q:disabled{cursor:default;opacity:.55}
.cmp-q:disabled:hover{border-color:var(--line2)}
.cmp-lock{flex:none;display:block;margin-top:2px;color:var(--p-gov)}
.cmp-lock svg{display:block}
.cmp-hint{margin-top:10px;font-size:calc((13px) * var(--ts));color:var(--dim2)}
.cmp-hint[hidden]{display:none}
.cmp-hint .cmp-lock{display:inline-block;vertical-align:-2px;margin:0 2px}

/* ---- the question ---- */
.cmp-ask{margin-top:20px}
.cmp-ask textarea{display:block;width:100%;min-height:78px;resize:vertical;
  font-family:var(--sans);font-size:calc((16px) * var(--ts));line-height:1.45;color:var(--txt);
  background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:12px 14px}
.cmp-ask textarea::placeholder{color:var(--dim2)}
.cmp-ask textarea:focus-visible{outline:2px solid var(--mint);outline-offset:1px}
.cmp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}

.cmp-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;position:relative;
  font-size:calc((15px) * var(--ts));color:var(--txt)}
.cmp-switch input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.cmp-track{flex:none;position:relative;width:36px;height:20px;border-radius:999px;background:var(--line2);
  transition:background .18s}
.cmp-track::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;
  background:var(--dim2);transition:transform .18s,background .18s}
.cmp-switch input:checked + .cmp-track{background:var(--p-models)}
.cmp-switch input:checked + .cmp-track::after{transform:translateX(16px);background:var(--card)}
.cmp-switch input:focus-visible + .cmp-track{outline:2px solid var(--mint);outline-offset:2px}

.cmp .btn-p:disabled{opacity:.42;cursor:not-allowed}
.cmp .btn-p:disabled:hover{opacity:.42}

.cmp-status{margin-top:12px;min-height:1.5em;font-size:calc((14px) * var(--ts));color:var(--dim)}
.cmp-status.err{color:var(--rose)}

/* ---- a locked topic: one calm line across both panels ---- */
.cmp-guard{display:flex;align-items:flex-start;gap:12px;margin-top:16px;padding:14px 16px;
  border:1px solid color-mix(in srgb,var(--p-gov) 40%,var(--line));border-radius:12px;
  background:color-mix(in srgb,var(--p-gov) 8%,transparent);color:var(--txt);font-size:calc((15px) * var(--ts))}
.cmp-guard[hidden]{display:none}
.cmp-guard b{color:var(--p-gov);font-weight:650}
.cmp-gtile{flex:none;width:14px;height:14px;margin-top:4px;border-radius:4px;background:var(--p-gov)}

/* ---- the two panels ---- */
.cmp-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
@media(max-width:760px){.cmp-split{grid-template-columns:1fr}}

.cmp-side{min-width:0;padding:18px 18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--card);
  box-shadow:inset 0 3px 0 var(--line2);transition:opacity .2s}
.cmp-side.a{border-color:color-mix(in srgb,var(--p-models) 42%,var(--line));box-shadow:inset 0 3px 0 var(--p-models)}
.cmp-side.notrun{opacity:.6}

.cmp-head{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap}
.cmp-name{margin:0;font-size:calc((17px) * var(--ts));font-weight:600;letter-spacing:-.01em}
.cmp-prec{display:inline-flex;align-items:center;font-family:var(--mono);font-size:calc((11px) * var(--ts));
  letter-spacing:.07em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line2);border-radius:999px;padding:3px 9px}
.cmp-side.a .cmp-prec{background:color-mix(in srgb,var(--p-models) 12%,transparent);border-color:transparent;color:var(--p-models)}
.cmp-state{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:calc((12px) * var(--ts));color:var(--dim2)}
.cmp-state.live::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;
  animation:cmp-pulse 1.1s ease-in-out infinite}
.cmp-side.a .cmp-state.live{color:var(--p-models)}
@keyframes cmp-pulse{50%{opacity:.25}}
:where(html[data-motion="reduced"],html[data-motion="off"]) .cmp-state.live::before{animation:none}
:where(html[data-motion="reduced"],html[data-motion="off"]) .cmp-side{transition:none}

.cmp-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin:14px 0 0;
  padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cmp-metrics > div{min-width:0}
.cmp-metrics > .wide{grid-column:1 / -1}
.cmp-metrics dt{font-size:calc((12px) * var(--ts));color:var(--dim2);line-height:1.3}
.cmp-metrics dt small{font-size:inherit;color:var(--faint)}
.cmp-metrics dd{margin:3px 0 0;font-family:var(--mono);font-size:calc((15px) * var(--ts));color:var(--txt);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-metrics dd.est{color:var(--dim)}

.cmp-think{margin-top:14px;border:1px solid var(--line);border-radius:10px;background:var(--card2)}
.cmp-think[hidden]{display:none}
.cmp-think summary{cursor:pointer;padding:8px 12px;font-size:calc((13.5px) * var(--ts));color:var(--dim)}
.cmp-think summary:focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:10px}
.cmp-think-n{margin-left:6px;font-family:var(--mono);font-size:calc((12px) * var(--ts));color:var(--dim2)}
.cmp-think-body{max-height:18em;overflow:auto;padding:0 12px 12px;white-space:pre-wrap;overflow-wrap:anywhere;
  font-size:calc((14px) * var(--ts));line-height:1.5;color:var(--dim)}

.cmp-answer{margin-top:14px;font-size:calc((15.5px) * var(--ts));line-height:1.6;color:var(--txt);overflow-wrap:anywhere}
.cmp-answer.ph{color:var(--dim2)}
.cmp-answer p + p{margin-top:12px}
.cmp-serr{margin-top:12px;font-size:calc((14px) * var(--ts));color:var(--rose)}
.cmp-serr.note{color:var(--dim2)}
.cmp-serr[hidden]{display:none}

/* ---- once both sides finish ---- */
.cmp-verdict{margin-top:16px;padding:16px 18px;border:1px solid var(--line2);border-radius:14px;background:var(--card)}
.cmp-verdict[hidden]{display:none}
.cmp-vh{margin:0;font-family:var(--sans);font-size:calc((11px) * var(--ts));font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint)}
.cmp-vh + .cmp-vline{margin-top:8px}
.cmp-vline + .cmp-vh{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.cmp-vline{margin:4px 0 0;font-size:calc((15.5px) * var(--ts));color:var(--txt);font-variant-numeric:tabular-nums}
.cmp-vk{color:var(--dim)}

.cmp-runs{margin-top:10px}
.cmp-runs summary{cursor:pointer;font-size:calc((13.5px) * var(--ts));color:var(--mint);width:max-content}
.cmp-runs summary:focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:4px}
.cmp-runs-scroll{overflow-x:auto;margin-top:10px}
/* app.css gives every table a -10px bleed, a top rule and a 26px gap, and turns it into a block
   scroller on phones. This one already sits in its own scroller, so all of that is undone here. */
.cmp-runs table{display:table;width:100%;margin:0;border-top:0;border-collapse:collapse;font-size:calc((13.5px) * var(--ts))}
.cmp-runs th,.cmp-runs td{padding:6px 10px 6px 0;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.cmp-runs th{font-weight:600;color:var(--dim2)}
.cmp-runs td.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---- the shared sources ---- */
.cmp-sources{margin-top:16px}
.cmp-sources[hidden]{display:none}
.cmp-sources summary{cursor:pointer;width:max-content;max-width:100%;padding:8px 14px;border:1px solid var(--line2);
  border-radius:999px;font-size:calc((14px) * var(--ts));color:var(--txt)}
.cmp-sources[open] summary{background:var(--hl);color:var(--on-hl);border-color:transparent}
.cmp-sources summary:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.cmp-src-count{margin-left:4px;font-family:var(--mono);font-size:calc((12.5px) * var(--ts))}
.cmp-sources ol{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.cmp-sources li{padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);
  font-size:calc((14.5px) * var(--ts));min-width:0}
.cmp-src-n{font-family:var(--mono);color:var(--dim2);margin-right:8px}
.cmp-sources li b{font-weight:600;color:var(--txt);overflow-wrap:anywhere}
.cmp-sources li p{margin:6px 0 0;color:var(--dim);font-size:calc((14px) * var(--ts));line-height:1.5;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* ---- what the numbers mean ---- */
.cmp-defs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px;margin:26px 0 0}
.cmp-defs > div{padding:16px 18px;border:1px solid var(--line);border-radius:12px}
.cmp-defs dt{font-weight:600;font-size:calc((15px) * var(--ts));color:var(--txt)}
.cmp-defs dd{margin:6px 0 0;color:var(--dim);font-size:calc((14.5px) * var(--ts));line-height:1.5}

@media(max-width:560px){
  .cmp-sec{padding-top:32px}
  .cmp-side{padding:16px 14px 18px}
  .cmp-verdict{padding:14px}
  .cmp-row .btn{flex:1 1 auto}
}