/* Comparison pages: model against model, the any-pair tool and the match-up index.
   Built on the tokens in models/model.css: flat panels, the teal accent for the first model and
   the amber highlight for the second. No gradients or glows. */

/* Anything the scripts hide stays hidden, whatever display its class sets. */
.cmp [hidden]{display:none!important}
.cmp .answer{font-size:1.0625rem;line-height:1.6;color:var(--text);font-weight:500;max-width:80ch;margin:12px 0 4px}
.cmp-sec{margin-top:var(--sp-section)}
.cmp-sec > h2:first-child{margin-top:0}
.cmp-sec h3{font-size:1.125rem;margin:36px 0 8px}
.cmp-cards .stat .v{font-size:2.25rem}
.cmp-cards .stat .v small:first-of-type{margin-top:6px;color:var(--text-soft);font-size:.875rem}
.cmp-cards .stat .k .key{font-size:1rem;font-weight:700}
/* The two cards share their rows, so the Elo figures line up when one model name wraps. */
.statgrid.primary.cmp-cards .stat{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0;align-content:start}

/* ---- range chart: one row per setting, dot = Writing Elo, bar = 95% range ---- */
.rc{position:relative;padding:16px 22px 12px;margin:12px 0 18px;overflow:hidden;--L:250px;--V:52px;--P:22px;--G:14px}
.rc-grid{position:absolute;top:16px;bottom:12px;left:calc(var(--P) + var(--L) + var(--G));
  right:calc(var(--P) + var(--V) + var(--G));pointer-events:none}
.rc-row{position:relative;display:grid;grid-template-columns:var(--L) minmax(0,1fr) var(--V);gap:0 var(--G);
  align-items:center;min-height:30px}
.rc-a{--c:var(--accent)} .rc-b{--c:var(--highlight)}
.rc-lab{font-size:.8125rem;line-height:1.3;color:var(--text-soft);overflow-wrap:anywhere}
.rc-trk{position:relative;height:24px}
.rc-gl{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.rc-ci{position:absolute;top:10px;height:4px;border-radius:2px;background:var(--c);opacity:.5}
.rc-dot{position:absolute;top:6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--c);
  border:2px solid var(--panel)}
.rc-val{text-align:right;font-size:.875rem;font-variant-numeric:tabular-nums}
.rc-axisrow{min-height:20px}
.rc-axis{height:18px}
.rc-axis span{position:absolute;top:0;transform:translateX(-50%);font-size:.6875rem;color:var(--muted);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.rc-axis span:first-child{transform:none}
.rc-axis span:last-child{transform:translateX(-100%)}
.rc-row.picked .rc-lab{color:var(--text);font-weight:700}
.rc-row.picked .rc-dot{border-color:var(--text)}

/* ---- tables ---- */
.cmp-tablewrap{overflow-x:auto;margin:10px 0 6px;padding:2px 12px}
.cmp-levels{min-width:0}
.cmp-levels th,.cmp-lv th,.cmp-scripts th,.cmp-tablewrap .vtab th.num{white-space:normal;vertical-align:bottom;line-height:1.3}
.cmp-levels td{padding:9px 8px}
.cmp-levels th{padding:12px 8px 8px}
.cmp-levels td.full a{font-weight:650}
.cmp-levels td.full .key{white-space:normal;align-items:baseline}
.cmp-levels tr.picked td{background:var(--accent-soft)}
.cmp-lv,.cmp-scripts{min-width:520px}
.cmp-scripts td.full small{display:block;color:var(--muted);font-size:.75rem;line-height:1.3}
.cmp-cons{table-layout:fixed}
.cmp-cons th,.cmp-cons td{overflow-wrap:anywhere}
.cmp-cons th:first-child,.cmp-cons td:first-child{width:38%}
.cmp-cons td.num{white-space:normal}
.cmp-cons td small{display:block;font-size:.75rem;font-weight:400;color:var(--muted)}
.cmp-foot{font-size:.8125rem;margin-top:8px}

/* ---- head-to-head findings ---- */
.hl{list-style:none;padding:0;margin:12px 0 4px;display:grid;gap:10px}
.hl li{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;
  padding:12px 18px;font-size:.9375rem;line-height:1.6;color:var(--text-soft);max-width:none}
.hl li b{color:var(--text)}

/* ---- setting pickers and model pickers ---- */
.cmp-ctl,.cmp-pick{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;margin:10px 0 14px}
.cmp-ctl label,.cmp-pick label{display:flex;flex-direction:column;gap:4px;flex:1 1 220px;min-width:0;
  font-size:.8125rem;font-weight:650;color:var(--muted)}
.cmp-ctl select,.cmp-pick select{font:inherit;font-size:.9375rem;font-weight:500;color:var(--text);background:var(--panel);
  border:1px solid var(--line2);border-radius:8px;padding:8px 10px;min-height:42px;width:100%;max-width:100%}
.cmp-ctl select:focus-visible,.cmp-pick select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cmp-btn{font:inherit;font-size:.9375rem;font-weight:650;color:var(--on-accent);background:var(--accent);
  border:1px solid var(--accent);border-radius:8px;padding:9px 20px;min-height:42px;cursor:pointer}
.cmp-btn:hover{background:var(--accent-hover)}
.cmp-btn:focus-visible,.cmp-swap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cmp-swap{font:inherit;font-size:1.125rem;line-height:1;min-height:42px;min-width:46px;border-radius:8px;
  border:1px solid var(--line2);background:var(--panel);color:var(--text);cursor:pointer}
.cmp-swap:hover{border-color:var(--accent);color:var(--accent)}
.cmp-pick-top{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.duelcard{padding:12px 24px}

/* ---- picks and verdict: the picks sit right under the cards, the configuration name largest ---- */
.cmp-sec.cmp-first{margin-top:36px}
.cmp-pickgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0 16px}
.cmp-pick-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 20px}
.cmp-pick-card .pk-k{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;font-size:.875rem;
  font-weight:650;color:var(--text-soft)}
.cmp-pick-card .pk-tag{font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--on-accent);background:var(--accent);border-radius:4px;padding:2px 6px;line-height:1.4}
.cmp-pick-card .pk-v{font-size:1.375rem;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--text);
  margin:8px 0 6px}
.cmp-pick-card .pk-t{font-size:.9375rem;line-height:1.55;color:var(--text-soft);margin:0}
.cmp-disclose{font-size:.8125rem;margin:10px 0 0}
.cmp-howread{margin-top:24px}
.cmp-near{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.cmp-near a{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border:1px solid var(--line);
  border-radius:999px;background:var(--panel);color:var(--text);font-size:.875rem;font-weight:600}
.cmp-near a:hover{border-color:var(--accent);text-decoration:none}

/* ---- links, verdict, method note ---- */
.cmp-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:12px 0 4px}
.cmp-links .stat .k{text-transform:none;letter-spacing:0;font-size:.9375rem;color:var(--text);font-weight:700}
.cmp-links .stat .v{font-size:.8125rem;font-weight:500;color:var(--muted);letter-spacing:0}
.cmp-verdict{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 24px}
.cmp-verdict p{font-size:1rem;line-height:1.7;color:var(--text);margin:0}
.cmp-picks{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:.9375rem}
.cmp-method{margin-top:28px;font-size:.8125rem}

/* ---- pair.html ---- */
.pp-msg{color:var(--text-soft);margin:8px 0 0;max-width:80ch}
.pp-msg:empty{display:none}
.pp-msg a.pp-written{font-weight:700}
.pp-sum{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:14px 0 0;padding:10px 14px;width:fit-content;max-width:100%;
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;font-weight:650;color:var(--text)}
.pp-sum .pp-change{font-size:.875rem;font-weight:650;padding:0 14px;min-width:0}

/* ---- index ---- */
.fx-labs{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.fx-labs .stat .k{text-transform:none;letter-spacing:0;font-size:.8125rem;font-weight:650}
.fx-labs .stat .v{font-size:1.0625rem;line-height:1.3}
.mx-bar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:8px 0 20px}
.mx-bar label{font-size:.875rem;font-weight:650}
.mx-bar input{font:inherit;font-size:.9375rem;flex:1 1 260px;min-width:0;padding:9px 12px;border:1px solid var(--line2);
  border-radius:8px;background:var(--panel);color:var(--text)}
.mx-bar input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.mx-count{font-size:.8125rem;color:var(--muted)}
.mx-jump{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.mx-jump a{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border:1px solid var(--line);
  border-radius:999px;background:var(--panel);color:var(--text);font-size:.875rem;font-weight:600}
.mx-jump a:hover{border-color:var(--accent);text-decoration:none}
.mx-terms{font-size:.9375rem;color:var(--text-soft)}
.mx-keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:12px 0 4px}
.mx-key .k{text-transform:none;letter-spacing:0;font-size:.8125rem;color:var(--muted);font-weight:650}
.mx-key .v{font-size:1.125rem;line-height:1.3;color:var(--text)}
.mx-key .v small{font-size:.875rem;color:var(--text-soft);margin-top:6px}
.mx-key .v small.mx-kp{color:var(--muted)}
.mx-group{margin:0 0 18px}
.mx-group summary{display:flex;align-items:baseline;gap:10px;cursor:pointer;list-style:none;margin:0 0 10px;padding:4px 0}
.mx-group summary::-webkit-details-marker{display:none}
.mx-group summary::before{content:"";flex:none;width:7px;height:7px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(-45deg);position:relative;top:-2px}
.mx-group[open] summary::before{transform:rotate(45deg);top:-4px}
.mx-group summary h3{margin:0;font-size:1.0625rem}
.mx-n{font-size:.8125rem;font-weight:500;color:var(--muted)}
.mx-c{font-size:.6875rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-soft);
  border:1px solid var(--line2);border-radius:4px;padding:0 5px}
.mx-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.mx-list a{display:inline-flex;align-items:baseline;gap:8px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;
  background:var(--panel);color:var(--text);font-size:.875rem;font-weight:600}
.mx-list a:hover{border-color:var(--accent);text-decoration:none}
.mx-e{font-size:.8125rem;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.mx-v{font-size:.6875rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
.mx-group[hidden],.mx-list li[hidden],.mx-empty[hidden]{display:none}

/* The eight-column settings table stacks into cards below desktop width (four per row on a
   tablet, three on a phone), so it never scrolls sideways. */
@media(max-width:1060px){
  .cmp-levels thead{display:none}
  .cmp-levels,.cmp-levels tbody,.cmp-levels tr,.cmp-levels td{display:block;width:100%}
  .cmp-levels tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 12px;padding:14px 4px;
    border-top:1px solid var(--line)}
  .cmp-levels tr:first-child{border-top:none}
  .cmp-levels td{border-top:none;padding:0;text-align:left;white-space:normal}
  .cmp-levels td[data-label]::before{content:attr(data-label);display:block;font-size:.6875rem;font-weight:600;
    letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:1px}
  .cmp-levels td.full{grid-column:1 / -1;font-size:1rem}
  .cmp-levels tr.picked{background:var(--accent-soft);border-radius:10px;padding:14px 10px}
  .cmp-levels tr.picked td{background:none}
}

@media(max-width:759px){
  .cmp-levels tr{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rc{--L:0px;--V:46px;--P:14px;--G:10px;padding:12px 14px 10px}
  .rc-grid{top:12px;bottom:10px;left:var(--P)}
  .rc-row{grid-template-columns:minmax(0,1fr) var(--V);padding:3px 0}
  .rc-lab{grid-column:1 / -1}
  .rc-axisrow .rc-lab{display:none}
  .cmp-tablewrap{overflow-x:visible;padding:2px 12px}
  .cmp-levels,.cmp-lv,.cmp-scripts{min-width:0}
  .cmp-tablewrap .stack td{white-space:normal;overflow-wrap:anywhere}
  .rc-axis span:nth-child(even){display:none}
  .cmp-levels tr.picked{background:var(--accent-soft);border-radius:10px;padding:14px 10px}
  .cmp-levels tr.picked td{background:none}
  .cmp-cons{font-size:.875rem}
  /* Both cards side by side on a phone, so the picks start near the first screen. */
  .statgrid.primary.cmp-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
  .statgrid.primary.cmp-cards .stat{padding:12px 14px}
  .cmp-cards .stat .v{font-size:1.5rem}
  .cmp-cards .stat .v small{font-size:.75rem;line-height:1.4}
  .cmp-cards .stat .v small:first-of-type{font-size:.8125rem}
  .cmp .answer{font-size:1rem}
  .duelcard{padding:8px 14px}
  .mx-list{flex-direction:column;flex-wrap:nowrap}
  .mx-list a{display:flex;justify-content:space-between;border-radius:10px;padding:10px 12px}
  .cmp-pick label,.cmp-ctl label{flex-basis:100%}
  .cmp-btn{width:100%}
  .cmp-pickgrid{grid-template-columns:1fr}
  .cmp-pick-card .pk-v{font-size:1.25rem}
  .mx-group summary{min-height:44px;align-items:center;border-bottom:1px solid var(--line);margin:0 0 8px}
  .mx-group{margin:0 0 6px}
  .mx-group[open] .mx-list{margin-bottom:14px}
}