/* compare.css: proposed /design/ components for the model compare page. Tokens only.
   c-compare, c-modelchip, c-metric, c-bars, c-reason, c-summary-chip, c-cache-tag, c-limit-notice, c-model-slot-busy */
:root{--m1:#6aa8ff;--m2:#ff8a5c;--m3:#4fd1a5;--m4:#f2c94c;--m5:#ff6f91;--m6:#9aa4b2}
[data-mode="light"]{--m1:#2f6fd6;--m2:#d9622b;--m3:#16956d;--m4:#a77a00;--m5:#c93d64;--m6:#5f6b7a}
.mc{max-width:1200px;margin:0 auto;padding:calc(var(--hh,62px) + var(--s-7)) var(--gutter) var(--s-8)}
.mc h1{font-size:var(--t-2xl);letter-spacing:var(--track-tight);line-height:var(--lh-snug);margin:0 0 var(--s-3)}
.mc-intro{color:var(--muted);max-width:62ch;margin:0 0 var(--s-4)}
.mc-lead{color:var(--fg);font-size:var(--t-md);line-height:var(--lh-body);max-width:62ch;margin:0 0 var(--s-3)}
.mc-invite{color:var(--fg-muted);font-size:var(--t-sm);max-width:62ch;margin:0 0 var(--s-5)}
.mc-smallprint{color:var(--fg-muted);font-size:var(--t-sm);margin:var(--s-7) 0 0}
.crumb{margin-bottom:var(--s-5)}
.mc-example{display:inline-flex;margin-bottom:var(--s-4)}
.mc-label{font-size:var(--t-sm);font-weight:var(--w-medium);color:var(--fg);margin:0 0 var(--s-2)}
.mc-hint{font-size:var(--t-xs);color:var(--fg-muted);margin:var(--s-2) 0 0}
.mc-setup{display:grid;gap:var(--s-5)}
.mc-row{display:flex;flex-wrap:wrap;gap:var(--s-2)}
/* c-modelchip: toggle chip with model colour dot. Selected = inset accent line, no fill. Disabled at cap. */
.c-modelchip{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-4) 0 var(--s-3);border:0;border-radius:var(--r-pill);background:transparent;color:var(--fg-2);box-shadow:var(--border-strong);font:var(--w-medium) var(--t-sm)/1 var(--font);cursor:pointer}
.c-modelchip i,.c-dot{width:10px;height:10px;border-radius:50%;background:var(--mc,var(--m6));flex:none}
.c-modelchip small{color:var(--fg-muted);font-weight:var(--w-regular)}
.c-modelchip[aria-pressed="true"]{color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--accent)}
.c-modelchip:disabled{opacity:.45;cursor:not-allowed}
.c-modelchip:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.mc .c-chip{min-height:44px;padding:0 var(--s-4)}
.mc-prompt{width:100%;box-sizing:border-box;min-height:96px;padding:var(--s-3) var(--s-4);border:0;border-radius:var(--r);background:var(--bg-sunken);color:var(--fg);box-shadow:var(--border);font:var(--t-md)/var(--lh-body) var(--font);resize:vertical}
.mc-prompt:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.mc-runbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3)}
.mc-runbar .c-btn[disabled]{opacity:.6;cursor:progress;transform:none}
.mc-progress{font-size:var(--t-sm);color:var(--fg-2)}
/* sticky model strip (uses c-sticky) */
.mc-strip{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;margin:var(--s-6) calc(-1 * var(--gutter)) 0;padding-inline:var(--gutter)}
.mc-strip span{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--t-sm);color:var(--fg)}
.mc-strip .mc-strip__end{margin-left:auto;display:flex;gap:var(--s-2)}
/* c-summary-chip */
.mc-summary{display:flex;gap:var(--s-2);flex-wrap:wrap;margin:var(--s-5) 0 var(--s-4)}
.c-summary-chip{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-4);border:0;border-radius:var(--r-pill);background:transparent;color:var(--fg-2);box-shadow:var(--border-strong);font:var(--w-medium) var(--t-sm)/1 var(--font);cursor:pointer;white-space:nowrap}
.c-summary-chip b{color:var(--fg);font-weight:var(--w-semibold)}
.c-summary-chip[aria-pressed="true"]{color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--accent)}
/* c-compare: equal columns, one surface each, no nested cards */
.c-compare{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:var(--s-4);align-items:stretch}
.c-compare__col{display:grid;grid-template-rows:auto 1fr auto auto auto;gap:var(--s-4);padding:var(--s-5);border-radius:var(--r-lg);background:var(--bg-raised);box-shadow:var(--shadow-1),var(--border);min-width:0}
.c-compare__col.is-win{box-shadow:var(--shadow-1),inset 0 0 0 1.5px var(--accent)}
.c-compare__head{display:flex;align-items:flex-start;gap:var(--s-2);flex-wrap:wrap}
.c-compare__name{font-weight:var(--w-semibold);font-size:var(--t-md);margin:0;display:flex;align-items:center;gap:var(--s-2);width:100%}
.c-compare__prov{font-size:var(--t-xs);color:var(--fg-muted)}
.c-compare__answer{font-size:var(--t-sm);line-height:var(--lh-body);color:var(--fg-2)}
.c-compare__answer p{margin:0 0 var(--s-2)}
.c-compare__answer ul{margin:0;padding-left:18px}
/* c-metric */
.c-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2);padding-top:var(--s-3);box-shadow:inset 0 1px 0 var(--line)}
.c-metric{display:grid;gap:2px}
.c-metric dt{font-size:var(--t-xs);color:var(--fg-muted)}
.c-metric dd{margin:0;font:var(--w-medium) var(--t-md)/1.2 var(--mono);color:var(--fg);font-variant-numeric:tabular-nums}
/* c-bars: normalised comparison strip, shorter is better except length */
.c-bars{display:grid;gap:6px;font-size:var(--t-xs);color:var(--fg-muted)}
.c-bars div{display:grid;grid-template-columns:56px 1fr;align-items:center;gap:var(--s-2)}
.c-bars s{display:block;height:6px;border-radius:var(--r-pill);background:var(--bg-sunken);text-decoration:none;position:relative;overflow:hidden}
.c-bars s::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--v,50%);border-radius:inherit;background:var(--mc,var(--fg-muted))}
/* c-reason: disclosure */
.c-reason{border-radius:var(--r);background:var(--bg-sunken)}
.c-reason summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 var(--s-3);cursor:pointer;font-size:var(--t-sm);font-weight:var(--w-medium);list-style:none}
.c-reason summary::-webkit-details-marker{display:none}
.c-reason summary::after{content:"+";color:var(--fg-muted)}
.c-reason[open] summary::after{content:"−"}
.c-reason ol{margin:0;padding:0 var(--s-4) var(--s-3) 32px;font-size:var(--t-sm);color:var(--fg-2)}
.c-reason--none summary{cursor:default;color:var(--fg-muted);font-weight:var(--w-regular)}
.c-reason--none summary::after{content:""}
/* skeleton */
.c-skel{display:block;height:12px;border-radius:var(--r-sm);background:var(--bg-sunken);margin-bottom:10px}
@media (prefers-reduced-motion:no-preference){.c-skel{animation:mcpulse 1.4s ease-in-out infinite}}
@keyframes mcpulse{50%{opacity:.5}}
/* c-cache-tag */
.c-cache-tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 var(--s-2);border-radius:var(--r-sm);background:var(--bg-sunken);color:var(--fg-2);font-size:var(--t-xs);font-weight:var(--w-medium)}
.c-cache-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.c-tag--quiet{background:var(--bg-sunken);color:var(--fg-2);font-weight:var(--w-medium)}
/* c-model-slot-busy */
.c-model-slot-busy{display:grid;align-content:center;justify-items:start;gap:var(--s-3);padding:var(--s-4);border-radius:var(--r);background:var(--bg-sunken);color:var(--fg-2);font-size:var(--t-sm)}
.c-model-slot-busy strong{color:var(--fg);font-weight:var(--w-medium)}
/* c-limit-notice: calm inline, no card nesting (sits on page) */
.c-limit-notice{display:grid;grid-template-columns:auto 1fr;gap:var(--s-2) var(--s-3);padding:var(--s-4) var(--s-5);border-radius:var(--r);background:var(--bg-sunken);box-shadow:var(--border)}
.c-limit-notice svg{width:20px;height:20px;color:var(--fg-2);margin-top:2px}
.c-limit-notice p{margin:0;color:var(--fg-2);font-size:var(--t-sm)}
.c-limit-notice strong{display:block;color:var(--fg);font-size:var(--t-md);font-weight:var(--w-medium);margin-bottom:2px}
.c-limit-notice .mc-row{grid-column:2;margin-top:var(--s-2)}
.c-meter{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--t-xs);color:var(--fg-muted)}
.c-meter s{width:64px;height:4px;border-radius:var(--r-pill);background:var(--bg-sunken);box-shadow:var(--border);position:relative;overflow:hidden;text-decoration:none}
.c-meter s::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--v);background:var(--fg-2)}
/* history */
.mc-history{margin-top:var(--s-7)}
.mc-history h2{font-size:var(--t-lg);margin:0 0 var(--s-2)}
.mc-history ul{list-style:none;margin:var(--s-3) 0 0;padding:0}
.mc-history li{display:flex;align-items:center;gap:var(--s-3);min-height:52px;box-shadow:inset 0 -1px 0 var(--line);font-size:var(--t-sm)}
.mc-history li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-history time{color:var(--fg-muted);font-size:var(--t-xs)}
.mc-x{min-width:44px;min-height:44px;border:0;background:transparent;color:var(--fg-muted);border-radius:var(--r-sm);cursor:pointer}
.mc-switch{display:none;margin-bottom:var(--s-4)}
@media (max-width:640px){
  .mc-switch{display:flex}
  .mc-switch button{flex:1}
  .c-compare{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s-3);margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) var(--s-2)}
  .c-compare__col{flex:0 0 86%;scroll-snap-align:start;padding:var(--s-4)}
  .mc-summary{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
  .mc-strip .mc-strip__end{margin-left:0;width:100%}
  .c-limit-notice{padding:var(--s-4)}
}
/* 4-column mode tightens padding */
.c-compare--4{--cols:4;gap:var(--s-3)}.c-compare--4 .c-compare__col{padding:var(--s-4)}
.c-compare__col{grid-template-rows:auto auto 1fr auto}
.c-compare__tools{margin-left:auto;display:flex;gap:4px}
.c-iconbtn{display:inline-grid;place-items:center;min-width:44px;min-height:44px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--fg-muted);cursor:pointer}
.c-iconbtn[aria-pressed="true"]{color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--accent)}
.c-iconbtn svg{width:18px;height:18px}
.c-iconbtn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.c-ref{display:inline-flex;align-items:center;height:22px;padding:0 var(--s-2);border-radius:var(--r-sm);box-shadow:var(--border-strong);font-size:var(--t-xs);font-weight:var(--w-medium);color:var(--fg)}
/* diff: semantic token, not lime */
:root{--diff-bg:var(--surface-2);--diff-line:var(--accent)}
[data-mode="light"]{--diff-bg:var(--frame);--diff-line:var(--ink-2)}
.c-diff{background:var(--diff-bg);box-shadow:inset 0 -1px 0 var(--diff-line);border-radius:3px;padding:0 2px;color:var(--fg)}
.c-diffchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:var(--t-xs);color:var(--fg-muted)}
.c-diffchips span{display:inline-flex;align-items:center;height:22px;padding:0 var(--s-2);border-radius:var(--r-sm);background:var(--diff-bg);color:var(--fg)}
.c-checklist{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 var(--s-2);border-radius:var(--r-sm);box-shadow:var(--border);font-size:var(--t-xs);color:var(--fg-2)}
/* summary strip above answers (table) */
.c-sumstrip{width:100%;border-collapse:collapse;font-size:var(--t-sm);margin:var(--s-4) 0 var(--s-5)}
.c-sumstrip th,.c-sumstrip td{text-align:left;padding:var(--s-2) var(--s-3);box-shadow:inset 0 -1px 0 var(--line);white-space:nowrap}
.c-sumstrip th{font-size:var(--t-xs);font-weight:var(--w-regular);color:var(--fg-muted)}
.c-sumstrip td{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--fg-2)}
.c-sumstrip td:first-child{font-family:var(--font);color:var(--fg);font-weight:var(--w-medium)}
.c-sumstrip td small{display:block;font-size:11px;color:var(--fg-muted)}
.c-sumstrip-wrap{overflow-x:auto}
.c-cachebar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);font-size:var(--t-sm);color:var(--fg-2)}
.c-linkbtn{min-height:44px;border:0;background:transparent;color:var(--fg);text-decoration:underline;text-underline-offset:3px;font:inherit;cursor:pointer;padding:0 var(--s-1)}
/* c-injection-note / c-history-note: one-line inline notes */
.c-injection-note,.c-history-note{display:flex;gap:var(--s-2);align-items:flex-start;font-size:var(--t-sm);color:var(--fg-2);margin:0}
.c-injection-note::before{content:"i";flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;box-shadow:var(--border-strong);font:600 11px/1 var(--font);margin-top:2px}
.c-history-note{font-size:var(--t-xs);color:var(--fg-muted)}
/* c-all-failed, c-link-invalid reuse c-limit-notice shell */
/* c-stability-disclosure */
.c-stability{margin-top:var(--s-6);font-size:var(--t-sm);color:var(--fg-2)}
.c-stability summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;color:var(--fg);font-weight:var(--w-medium)}
.c-stability ul{margin:var(--s-2) 0 0;padding-left:20px;display:grid;gap:4px;max-width:62ch}
.mc-foot{font-size:var(--t-xs);color:var(--fg-muted);margin-top:var(--s-4)}
.mc-mini{display:none}
@media (max-width:640px){
  .c-sumstrip-wrap{display:none}
  .mc-mini{display:flex;gap:var(--s-3);overflow-x:auto;font:var(--t-xs)/1.3 var(--mono);color:var(--fg-2);padding-block:var(--s-2)}
  .mc-mini span{display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
  .c-compare--4 .c-compare__col{flex-basis:86%}
}
@media (prefers-reduced-motion:reduce){.c-skel{animation:none}}
.c-pop{padding:var(--s-4);border-radius:var(--r);background:var(--bg-raised);box-shadow:var(--shadow-2),var(--border);max-width:360px;font-size:var(--t-sm);color:var(--fg-2)}
.c-pop input{width:100%;box-sizing:border-box;min-height:44px;padding:0 var(--s-3);border:0;border-radius:var(--r-sm);background:var(--bg-sunken);color:var(--fg);box-shadow:var(--border);font:var(--t-sm) var(--mono);margin:var(--s-2) 0}
.c-pop p{margin:var(--s-1) 0}
.c-sumstrip caption{caption-side:top;margin-bottom:4px}
/* Conversation lab additions */
.mc-eyebrow{margin:0 0 var(--s-2);font-size:var(--t-xs);font-weight:var(--w-medium);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted)}
.mc-hint--top{margin:0 0 var(--s-2)}
.mc-input{width:100%;box-sizing:border-box;min-height:44px;padding:0 var(--s-4);border:0;border-radius:var(--r);background:var(--bg-sunken);color:var(--fg);box-shadow:var(--border);font:var(--t-md) var(--font)}
.mc-input:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
label.mc-label{display:block}
.mc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mc-sample{border-radius:var(--r);background:var(--bg-sunken);font-size:var(--t-sm)}
.mc-sample summary{min-height:44px;display:flex;align-items:center;padding:0 var(--s-3);cursor:pointer;font-weight:var(--w-medium)}
.mc-turns{margin:0;padding:0 var(--s-4) var(--s-3) 32px;color:var(--fg-2);display:grid;gap:6px}
.mc-turns b{color:var(--fg);font-weight:var(--w-medium)}
.mc-empty{margin:var(--s-6) 0 0;color:var(--fg-2);font-size:var(--t-sm)}
.mc-allow{margin:0;font-size:var(--t-sm);color:var(--fg-2)}
.mc-h2{font-size:var(--t-lg);margin:0}
.mc-h3{font-size:var(--t-sm);font-weight:var(--w-medium);color:var(--fg-muted);margin:var(--s-5) 0 0}
.mc-bench{margin:0 0 var(--s-4);font-size:var(--t-sm);color:var(--fg-2)}
.mc-bench summary{min-height:44px;display:inline-flex;align-items:center;cursor:pointer;font-weight:var(--w-medium);color:var(--fg)}
.mc-bench ul{margin:var(--s-2) 0 0;padding-left:20px}
.c-reason .mc-kp{margin:0;padding:var(--s-1) var(--s-3) 0;font-size:var(--t-xs);color:var(--fg-muted)}
.c-reason .mc-none{margin:0;padding:0 var(--s-3) var(--s-3);font-size:var(--t-xs);color:var(--fg-muted)}
.mc-path{margin:0 var(--s-3) var(--s-3);border-radius:var(--r-sm);box-shadow:var(--border)}
.mc-path summary{min-height:44px;display:flex;align-items:center;padding:0 var(--s-3);cursor:pointer;font-size:var(--t-xs);font-weight:var(--w-medium)}
.mc-path ol{padding:0 var(--s-3) var(--s-3) 28px;font-size:var(--t-xs)}
.c-compare__answer p{white-space:pre-wrap;overflow-wrap:anywhere}
.mc-col-note{font-size:var(--t-xs);color:var(--fg-muted);margin:0}
.c-pop[hidden],.c-limit-notice[hidden],#res[hidden],.mc-allow[hidden]{display:none}
.mc-history li button.mc-open{flex:1;min-width:0;min-height:44px;display:flex;gap:var(--s-3);align-items:center;border:0;background:transparent;color:var(--fg);font:inherit;text-align:left;cursor:pointer;padding:0}
.mc-history li small{color:var(--fg-muted);font-size:var(--t-xs);white-space:nowrap}
.c-iconbtn{gap:6px;padding:0 var(--s-2);font:var(--w-medium) var(--t-xs)/1 var(--font)}
.c-compare__col{grid-template-rows:auto auto 1fr auto auto}
.mc [hidden]{display:none!important}
@media (max-width:640px){.mc-mini{display:none}.mc-strip{margin-inline:0;padding-inline:0;flex-wrap:wrap}.c-compare__col .mc-col-note{overflow-wrap:anywhere}}
.c-limit-notice#allfail{grid-template-columns:auto 1fr;margin-top:var(--s-5)}
@media (max-width:640px){.mc-switch{max-width:100%;overflow-x:auto}.mc-switch button{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
.mc-history li button.mc-open{flex-wrap:wrap;gap:2px var(--s-3)}
.mc-hl{display:flex;gap:var(--s-2);align-items:baseline;flex:1 1 100%;min-width:0;overflow:hidden;white-space:nowrap}
.mc-hlabel{min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.mc-hl small{min-width:0;overflow:hidden;text-overflow:ellipsis;flex:1 1 0}
.mc-history li button.mc-open time{flex:1 1 100%;white-space:nowrap}
#expired{margin:0 0 var(--s-5)}
@media (max-width:640px){.mc-h3--trade{display:none}}

/* Clear history foot row (layout only) + inline undo (reuses c-limit-notice look) */
.mc-history-foot{margin-top:var(--s-5);display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.mc-history-foot[hidden],.mc-undo[hidden]{display:none}
.mc-history-foot .c-history-note{margin:0}
.mc-undo{margin-top:var(--s-5)}
.mc-undo-row{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.mc-undo-row .c-btn{min-height:44px}
.mc-undo{align-items:center}.mc-undo>svg{margin-top:0}

/* Phase 1: first-run (M6), how to read (N1), share copy (M2, N8) */
.mc-howto{margin:4px 0 var(--s-5);max-width:62ch;font-size:var(--t-sm);color:var(--muted,inherit);opacity:.85}
.mc-first #presets .c-chip{padding:12px 18px;min-height:48px;font-size:1rem}
.mc-sumbox{display:block;width:100%;margin-top:8px;font:inherit;font-size:var(--t-sm);padding:8px;border:0;box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r-sm);background:transparent;color:inherit;resize:vertical}
.mc-sumbox[hidden],.mc-howto[hidden],#firsthint[hidden],.mc-copyfail[hidden]{display:none}