/* Model Arena (/arena/). Uses th.css tokens only, so both themes follow. */

.arena{display:flex; flex-direction:column; gap:1.25rem}
.ar-count{font:600 var(--t-2xs)/1 var(--f-ui); font-variant-numeric:tabular-nums; background:var(--bg-2); color:var(--ink-2); border-radius:999px; padding:.18rem .42rem; min-width:1.2rem; text-align:center}
.ar-count:empty{display:none}

/* ── composer ──────────────────────────────────────────────────────── */
.ar-composer .panel-body{gap:.85rem; padding:.95rem 1rem 1rem}
.ar-sys-toggle{all:unset; box-sizing:border-box; display:flex; align-items:center; gap:.45rem; cursor:pointer; max-width:100%; padding:.2rem .1rem; border-radius:var(--r)}
.ar-sys-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.ar-sys-toggle svg{width:1.05rem; height:1.05rem; flex:none; color:var(--ink-3); transform:rotate(-90deg); transition:transform .15s ease}
.ar-sys-toggle[aria-expanded="true"] svg{transform:none}
.ar-sys-toggle .lab{color:var(--ink-2); flex:none}
.ar-sys-toggle:hover .lab,.ar-sys-toggle:hover svg{color:var(--ink)}
.ar-sys-sum{font:400 var(--t-xs)/1.3 var(--f-mono); color:var(--ink-3); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ar-sys-toggle[aria-expanded="true"] .ar-sys-sum{display:none}
.ar-sys-box{margin-top:.5rem}
.ar-sys-box .textarea{max-height:40vh}
.ar-prompt{min-height:7.5rem; max-height:40vh; font-size:.98rem; line-height:1.55}
.field > .lab label{cursor:pointer}
.ar-meta{font:400 var(--t-xs)/1 var(--f-ui); letter-spacing:0; color:var(--ink-3); font-variant-numeric:tabular-nums}

.ar-vars{display:flex; flex-direction:column; gap:.65rem; padding:.75rem .85rem .85rem; border:1px dashed color-mix(in srgb, var(--accent) 38%, var(--line)); border-radius:var(--r); background:linear-gradient(var(--accent-wash),var(--accent-wash)),var(--panel)}
.ar-vars-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .8rem}
.ar-vars-head .hint{font-size:var(--t-xs)}
.ar-vars-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr)); gap:.6rem .8rem}
.ar-vars .lab .var{letter-spacing:0; font-size:.8rem}
.ar-var-in{min-height:2.35rem; max-height:14rem; resize:vertical; font:400 var(--t-sm)/1.45 var(--f-ui); padding:.5rem .65rem}

/* the run bar stays in reach while the prompt is long */
.ar-bar{gap:.65rem .8rem; padding:.7rem 1rem; align-items:center}
@media (min-width:44rem){ .ar-bar{position:sticky; bottom:0; z-index:4; background:var(--panel); border-radius:0 0 var(--r-lg) var(--r-lg); box-shadow:0 -12px 18px -18px rgba(0,0,0,.35)} }
.ar-models{display:flex; align-items:center; gap:.65rem; min-width:0; flex:1 1 20rem}
.ar-models-pick{min-width:0; flex:1}
.ar-models .modelpick{width:100%; min-height:2.5rem}
.ar-models .modelpick .mpill{max-width:13rem}
.ar-bar-opts{display:flex; align-items:center; gap:.65rem; flex-wrap:wrap}
.ar-setbtn{min-height:2.5rem; min-width:0; max-width:100%}
.ar-setbtn .sub{min-width:0; overflow:hidden; text-overflow:ellipsis}
.ar-setbtn .sub{font-size:var(--t-2xs); letter-spacing:0; color:var(--ink-3); opacity:1; font-variant-numeric:tabular-nums}
.ar-setbtn:hover .sub{color:inherit}
.ar-setbtn[aria-expanded="true"]{border-color:var(--ink)}
.ar-blind{font:500 var(--t-sm)/1 var(--f-ui); letter-spacing:0; color:var(--ink-2); padding:.3rem .1rem}
.ar-bar-run{display:flex; align-items:center; gap:.5rem}
.ar-run{min-height:2.6rem; padding-inline:1rem 1.1rem; font-size:.9rem; gap:.55rem}
.ar-run svg{width:.85rem; height:.85rem}
.ar-run.is-busy{opacity:.6}
.ar-kbd{background:transparent; border-color:color-mix(in srgb, currentColor 35%, transparent); color:inherit; opacity:.8; margin-left:.15rem; font-size:.66rem}
.ar-kbd:empty{display:none}
#arStop svg{width:.7rem; height:.7rem}
@media (hover:none){ .ar-kbd{display:none} }
@media (max-width:40rem){
  .ar-models{flex-basis:100%; flex-direction:column; align-items:stretch; gap:.35rem}
  .ar-bar > .spacer{display:none}
  .ar-bar-run{flex:1 1 100%}
  .ar-bar-run .ar-run{flex:1}
  .ar-bar-opts{flex:1 1 100%; flex-wrap:nowrap; justify-content:space-between; min-width:0}
  .ar-setbtn{flex:0 1 auto}
}

/* settings popover */
.ar-pop{position:absolute; z-index:60; width:min(22rem, calc(100vw - 1rem)); background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-pop); padding:1rem; display:flex; flex-direction:column; gap:1rem; animation:ar-pop .14s ease-out}
.ar-pop .hint{font-size:var(--t-xs); line-height:1.4}
.ar-pop .input{max-width:9rem}
.ar-temp{display:grid; grid-template-columns:minmax(0,1fr) 2.4rem; gap:.7rem; align-items:center}
.ar-temp input:disabled{opacity:.4}
.ar-tval{text-align:right; color:var(--ink-2)}
.ar-eff{align-self:flex-start}
@keyframes ar-pop{from{opacity:0; transform:translateY(-4px)}}

/* ── results ───────────────────────────────────────────────────────── */
.ar-results{display:flex; flex-direction:column; gap:.75rem; scroll-margin-top:calc(var(--bar-h) + .75rem); min-width:0}
.ar-reshead{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .85rem; min-height:2.3rem}
.ar-reshead .h3{font-size:1.3rem}
.ar-status{font:400 var(--t-xs)/1.3 var(--f-ui); color:var(--ink-3); font-variant-numeric:tabular-nums}
.ar-viewwrap{display:flex; align-items:center; gap:.55rem}
.ar-note .btns{margin-top:.6rem}
.ar-note-prompt{display:block; margin-top:.4rem; font-family:var(--f-serif); color:var(--ink-2)}
.ar-note-prompt q{font-style:italic}
.ar-empty{padding:2.4rem 1.3rem}
.ar-empty > span{max-width:42ch}

.ar-grid{--cols:3; display:grid; grid-template-columns:repeat(var(--cols), minmax(0,1fr)); gap:1rem; align-items:stretch}
.ar-grid[data-cols="1"]{--cols:1; max-width:56rem}
.ar-grid[data-cols="2"]{--cols:2}
@media (max-width:72rem){ .ar-grid[data-cols="3"]{--cols:2} }

/* mobile: one answer per screen, swipe between them, chips to jump */
.ar-tabs{display:none}
@media (max-width:44rem){
  .ar-tabs:not([hidden]){display:flex; gap:.4rem; overflow-x:auto; scrollbar-width:none; margin-inline:calc(var(--gut) * -1); padding:0 var(--gut) .1rem}
  .ar-tabs::-webkit-scrollbar{display:none}
  .ar-grid{display:flex; align-items:flex-start; overflow-x:auto; scroll-snap-type:x mandatory; gap:.7rem; margin-inline:calc(var(--gut) * -1); padding:0 var(--gut) .35rem; scroll-padding-inline:var(--gut); scrollbar-width:none; position:relative}
  .ar-grid::-webkit-scrollbar{display:none}
  .ar-grid::after{content:""; flex:0 0 1px}
  .ar-grid > .ac{flex:0 0 calc(100% - 1.6rem); scroll-snap-align:start; scroll-snap-stop:always}
  .ar-grid[data-n="1"] > .ac{flex-basis:100%}
  .ac[data-state="done"] .ac-status{display:none}
}
.ar-tab{all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:.42rem; padding:.45rem .65rem; border:1px solid var(--line); border-radius:999px; font:500 var(--t-xs)/1 var(--f-ui); color:var(--ink-2); background:var(--field); white-space:nowrap; cursor:pointer; max-width:13rem; flex:none}
.ar-tab:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.ar-tab[aria-current="true"]{border-color:var(--ink); color:var(--ink); background:var(--panel)}
.ar-tab b{font-weight:650}
.ar-tab-n{overflow:hidden; text-overflow:ellipsis; color:var(--ink-3); font-family:var(--f-mono)}
.ar-tab-dot{width:.45rem; height:.45rem; border-radius:50%; background:var(--ink-4); flex:none}
.ar-tab[data-state="wait"] .ar-tab-dot,.ar-tab[data-state="stream"] .ar-tab-dot{background:var(--hi); animation:pulse 1s ease-in-out infinite}
.ar-tab[data-state="done"] .ar-tab-dot{background:var(--good)}
.ar-tab[data-state="error"] .ar-tab-dot{background:var(--bad)}

/* ── one column ────────────────────────────────────────────────────── */
.ac{position:relative; display:flex; flex-direction:column; min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:border-color .25s, box-shadow .25s}
.ac::before{content:""; position:absolute; top:0; left:0; width:38%; height:2px; background:linear-gradient(90deg, transparent, var(--hi-strong), transparent); transform:translateX(-110%); opacity:0; pointer-events:none; z-index:2}
.ac[data-state="wait"]::before,.ac[data-state="stream"]::before{opacity:1; animation:ac-scan 1.5s ease-in-out infinite}
@keyframes ac-scan{to{transform:translateX(280%)}}
.ac[data-state="stream"]{border-color:color-mix(in srgb, var(--hi) 45%, var(--line))}
.ac[data-state="error"]{border-color:color-mix(in srgb, var(--bad) 45%, var(--line))}
.ac.picked{border-color:var(--hi); box-shadow:0 0 0 1px var(--hi), var(--shadow)}

.ac-head{display:flex; align-items:center; flex-wrap:wrap; gap:.45rem .55rem; padding:.62rem .75rem; border-bottom:1px solid var(--line-2); min-height:3.05rem}
.ac-letter{display:inline-grid; place-items:center; width:1.5rem; height:1.5rem; flex:none; border:1px solid var(--ink); border-radius:var(--r); font:650 var(--t-xs)/1 var(--f-ui); color:var(--ink); background:var(--field)}
.ac-letter.sm{width:1.2rem; height:1.2rem; font-size:var(--t-2xs)}
.ac.blind .ac-letter{background:var(--ink); color:var(--panel)}
.ac-title{flex:1 1 7rem; min-width:0; display:flex; align-items:center; font:inherit; margin:0}
.ac-title .mpill{font-size:var(--t-sm)}
.ac-anon{font:650 1.02rem/1.2 var(--f-ui); letter-spacing:-.005em}
.ac-tags{display:inline-flex; flex-wrap:wrap; gap:.3rem}
.ac-tags:empty{display:none}
.ac-status{margin-left:auto}
.ac-status.plain{color:var(--ink-3)}
.ac.revealed .ac-title{animation:ac-reveal .45s ease-out}
@keyframes ac-reveal{from{opacity:.2}}

.ac-bodywrap{position:relative; flex:1 1 auto; display:flex; flex-direction:column; min-height:0}
.ac-body{flex:1 1 auto; min-height:12rem; max-height:min(34rem, 66vh); overflow:auto; padding:.9rem 1rem 1.05rem; scrollbar-width:thin; scrollbar-color:var(--line) transparent}
.ac-body:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.ac-skel{display:flex; flex-direction:column; gap:.6rem; padding-top:.25rem}
.ac-skel i{display:block; height:.68rem; min-height:0; border-radius:2px}
.ac-skel i:nth-child(1){width:88%} .ac-skel i:nth-child(2){width:96%} .ac-skel i:nth-child(3){width:54%}
.ac-empty{font:400 var(--t-sm)/1.4 var(--f-serif); color:var(--ink-3)}
.ac-jump{position:absolute; bottom:.65rem; left:50%; transform:translateX(-50%); font:600 var(--t-xs)/1 var(--f-ui); letter-spacing:0; padding:.5rem .7rem; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--ink); box-shadow:var(--shadow-pop); animation:rise .15s ease-out}
.ac-jump:hover{border-color:var(--ink)}

/* answer text */
.ac-out{font:400 .94rem/1.62 var(--f-ui); color:var(--ink); overflow-wrap:anywhere; min-width:0}
.ac-out.raw{font:400 .8rem/1.62 var(--f-mono); white-space:pre-wrap}
.ac-out .cursor{display:inline-block; width:.48em; height:1.05em; margin-left:2px; background:var(--hi-strong); vertical-align:-.16em; border-radius:1px; animation:pulse 1s step-end infinite}
.md > * + *{margin-top:.72em}
.md > :first-child{margin-top:0}
.md h3,.md h4,.md h5,.md h6{font-family:var(--f-ui); color:var(--ink); line-height:1.22; letter-spacing:-.005em}
.md * + h3,.md * + h4,.md * + h5,.md * + h6{margin-top:1.15em}
.md h3{font-family:var(--f-head); font-size:1.2rem; font-weight:420; letter-spacing:-.012em}
.md h4{font-size:1.04rem; font-weight:650}
.md h5,.md h6{font-size:.94rem; font-weight:650}
.md strong{font-weight:650}
.md a{color:var(--accent); overflow-wrap:anywhere}
.md code{font:500 .84em/1.4 var(--f-mono); background:var(--bg-2); padding:.08em .32em; border-radius:2px}
.md pre{position:relative; background:var(--field); border:1px solid var(--line-2); border-radius:var(--r); padding:.7rem .8rem; overflow:auto; font:400 .78rem/1.58 var(--f-mono); white-space:pre; tab-size:2; max-height:28rem}
.md pre[data-lang]{padding-top:1.55rem}
.md pre[data-lang]::before{content:attr(data-lang); position:absolute; top:.4rem; left:.8rem; font:500 var(--t-2xs)/1 var(--f-mono); letter-spacing:0; color:var(--ink-3)}
.md pre code{background:none; padding:0; font:inherit; border-radius:0; white-space:inherit}
.md ul,.md ol{padding-left:1.3rem}
.md ul{list-style:disc} .md ol{list-style:decimal}
.md ul ul{list-style:circle}
.md li{padding-left:.15rem}
.md li + li{margin-top:.28em}
.md li > ul,.md li > ol{margin-top:.28em}
.md li::marker{color:var(--ink-3)}
.ac-full{font-size:1rem; max-width:72ch}
.ac-full.raw{max-width:none}
.ac-expand .runmeta{padding-top:.6rem; border-top:1px solid var(--line-2)}

.ac-err{margin-top:.85rem}
.ac-err .btns{margin-top:.6rem}
.ac-err.stopped{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem; font:400 1rem/1.45 var(--f-serif); color:var(--ink-3); border-top:1px dashed var(--line); padding-top:.65rem}
.ac-out:empty ~ .ac-err{margin-top:0; border-top:0; padding-top:0}

.ac-judge{display:flex; flex-direction:column; gap:.25rem; padding:.6rem 1rem .65rem; border-top:1px solid var(--line-2); background:linear-gradient(var(--accent-wash),var(--accent-wash)),var(--panel)}
.ac-judge p{font:400 var(--t-sm)/1.42 var(--f-serif); color:var(--ink-2)}
.ac-rank{font-variant-numeric:tabular-nums}

.ac-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line-2); margin:0}
.ac-stat{padding:.48rem .75rem .52rem; min-width:0; border-right:1px solid var(--line-2)}
.ac-stat:nth-child(3n){border-right:0}
.ac-stat:nth-child(n+4){border-top:1px solid var(--line-2)}
.ac-stat dt{font:600 var(--t-xs)/1.2 var(--f-ui); letter-spacing:0; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:help}
.ac-stat dd{margin-top:.22rem; font:500 .8rem/1.2 var(--f-mono); font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ac[data-state="wait"] .ac-stat dd,.ac[data-state="stream"] .ac-stat dd{color:var(--ink-2)}

.ac-foot{display:flex; align-items:center; gap:.2rem; padding:.42rem .5rem .42rem .75rem; border-top:1px solid var(--line-2); background:color-mix(in srgb, var(--bg-2) 35%, var(--panel))}
.ac-seg button{padding:.45rem .58rem}
.ac-foot .btn.icon svg{width:1.05rem; height:1.05rem}

/* ── blind vote ────────────────────────────────────────────────────── */
.ar-vote{position:sticky; bottom:calc(env(safe-area-inset-bottom, 0px) + .75rem); z-index:6; display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1.2rem; padding:.85rem 1rem; background:var(--stage); color:var(--stage-ink); border:1px solid var(--stage-line); border-radius:var(--r-lg); box-shadow:var(--shadow-pop)}
.ar-vote p{font:400 var(--t-sm)/1.45 var(--f-ui)}
.ar-vote b{color:var(--stage-ink)}
.ar-vote-q{display:flex; flex-direction:column; gap:.15rem; margin-right:auto}
.ar-vote-q b{font:650 1.05rem/1.2 var(--f-ui)}
.ar-vote-q span{font:italic 400 1rem/1.3 var(--f-serif); color:var(--stage-dim)}
.ar-vote-btns{display:flex; flex-wrap:wrap; align-items:center; gap:.45rem}
.ar-vote .btn{border-color:var(--stage-line); color:var(--stage-ink); background:transparent}
.ar-vote .btn:hover:not(:disabled){background:var(--stage-ink); border-color:var(--stage-ink); color:var(--stage)}
.ar-vote .btn:focus-visible{outline-color:var(--hi-strong)}
.ar-vote-pick{font-weight:400}
.ar-vote-pick b{font-weight:600; color:var(--hi-strong); margin-right:.15rem}
.ar-vote-pick:hover b{color:inherit}
.ar-vote-sep{width:1px; height:1.6rem; background:var(--stage-line); margin-inline:.2rem}
.ar-vote .linkbtn{color:var(--stage-dim); font-size:var(--t-xs)}
.ar-vote .linkbtn:hover{color:var(--stage-ink)}
.ar-vote.done{position:static; background:var(--panel); color:var(--ink-2); border-color:var(--line); box-shadow:none; padding:.7rem .95rem; gap:.4rem 1rem}
.ar-vote.done b{color:var(--ink)}
.ar-vote.done p{display:flex; flex-wrap:wrap; align-items:center; gap:.3rem}
.ar-vote.done .linkbtn{color:var(--accent)}
@media (max-width:40rem){
  .ar-vote{padding:.6rem .7rem .7rem; gap:.45rem .6rem}
  .ar-vote-q b{font-size:.98rem}
  .ar-vote-q span{display:none}
  .ar-vote-skip{order:1}
  .ar-vote-btns{order:2; width:100%; gap:.3rem; flex-wrap:nowrap}
  .ar-vote-word{display:none}
  .ar-vote-pick{flex:1 1 0; min-width:1.9rem; padding-inline:.2rem}
  .ar-vote-btns .btn.sm{flex:none; padding-inline:.42rem}
  .ar-vote-pick b{margin:0; font-size:.95rem}
  .ar-vote-sep{display:none}
}

/* ── below the results ─────────────────────────────────────────────── */
.ar-after{display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); grid-template-rows:auto 1fr; grid-template-areas:"sum judge" "rec judge"; gap:1rem; align-items:start; margin-top:.5rem}
.ar-summary{grid-area:sum}
.ar-judge{grid-area:judge}
.ar-record{grid-area:rec}
@media (max-width:64rem){ .ar-after{grid-template-columns:minmax(0,1fr); grid-template-rows:auto; grid-template-areas:"sum" "judge" "rec"} }

.ar-sorthint{font-size:var(--t-xs)}
@media (max-width:40rem){ .ar-sorthint{display:none} }
.ar-sumwrap{overflow-x:auto}
.ar-sum{min-width:42rem}
.ar-sum th,.ar-sum td{padding-inline:.6rem}
.ar-sum th:first-child{padding-left:.9rem}
.ar-sum th{background:var(--panel)}
.ar-sum tbody th{font:inherit; letter-spacing:0; color:var(--ink); white-space:normal; position:static; border-bottom:1px solid var(--line-2); padding:.6rem .6rem .6rem .9rem; vertical-align:top}
.ar-sum tbody tr:last-child th{border-bottom:0}
.ar-sum-model{min-width:12rem}
.ar-sum-who{display:flex; align-items:center; gap:.5rem; min-width:0}
.ar-sum-who .mpill{max-width:16rem}
.ar-sum-marks{display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.4rem}
.ar-sum-err{display:inline-block; margin-top:.35rem; font:600 var(--t-xs)/1.3 var(--f-ui); letter-spacing:0; color:var(--bad)}
.ar-sum tr.failed td{color:var(--ink-3)}
.ar-sum td.win{color:var(--ink); font-weight:600}
.ar-sum td.win::before{content:"◆ "; font-size:.62em; vertical-align:.15em; color:var(--good)}
.ar-sum-wait{padding:1rem; font:400 var(--t-sm)/1.45 var(--f-serif); color:var(--ink-3)}
.ar-bv{display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .7rem; font:400 var(--t-sm)/1.5 var(--f-ui); color:var(--ink-2)}
.ar-bv b{color:var(--ink); font-weight:650}
.ar-bv .lab{color:var(--good)}

.ar-judge .panel-body{gap:.85rem}
.ar-crit{min-height:5.5rem; max-height:20rem; font:400 var(--t-sm)/1.5 var(--f-ui)}
.ar-reset{font:500 var(--t-xs)/1.3 var(--f-ui); letter-spacing:0}
.ar-judge .modelpick{width:100%}
.ar-bias{font-size:var(--t-xs)}
.ar-fam{margin-top:.45rem; color:var(--ink); font-weight:500}
.ar-why{font-size:var(--t-xs)}
.ar-judging{display:flex; align-items:center; gap:.6rem; font:400 1rem/1.4 var(--f-serif); color:var(--ink-2)}
.ar-verdict{display:flex; flex-direction:column; gap:.75rem; border-top:1px solid var(--line-2); padding-top:.85rem}
.ar-verdict-head{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .7rem}
.ar-ranks{display:flex; flex-direction:column; border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden}
.ar-ranks li{display:grid; grid-template-columns:1.2rem auto minmax(0,1fr) auto; align-items:center; gap:.55rem; padding:.5rem .7rem; border-top:1px solid var(--line-2); font-size:var(--t-sm)}
.ar-ranks li:first-child{border-top:0}
.ar-ranks li.top{background:var(--good-wash)}
.ar-ranks-n{font:600 var(--t-xs)/1 var(--f-mono); font-variant-numeric:tabular-nums; color:var(--ink-3)}
.ar-ranks li.top .ar-ranks-n{color:var(--good)}
.ar-ranks-name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ar-ranks-score{font:600 var(--t-sm)/1 var(--f-mono); font-variant-numeric:tabular-nums}
.ar-verdict-sum{font:400 .98rem/1.5 var(--f-serif); color:var(--ink-2)}

.ar-record .panel-body{gap:.7rem}
.ar-recwrap{overflow-x:auto; border:1px solid var(--line-2); border-radius:var(--r)}
.ar-rec{min-width:20rem}
.ar-rec td{vertical-align:middle}
.ar-rec-n{color:var(--ink-3); width:2rem}
.ar-rec-model{display:flex; flex-direction:column; gap:.35rem; min-width:0}
.ar-rec-model .mpill{max-width:16rem}
.ar-rec-model .meter{max-width:9rem}
.ar-rec-elo{font-weight:600}
.ar-rec-empty{padding:1.2rem 1rem; font-size:.95rem}

/* ── share dialog and history drawer ───────────────────────────────── */
.ar-share-row{display:flex; gap:.5rem}
.ar-share-row .input{flex:1; min-width:0}
@media (max-width:30rem){ .ar-share-row{flex-direction:column} }

dialog.modal.ar-drawer{margin:0 0 0 auto; width:min(30rem, 100vw); height:100vh; height:100dvh; max-height:none; border-radius:0; border-width:0 0 0 1px; animation:ar-slide .18s ease-out}
@keyframes ar-slide{from{transform:translateX(1.5rem); opacity:0}}
.ar-drawer .modal-body{flex:1 1 auto}
.ar-hist{display:flex; flex-direction:column; gap:.5rem}
.ar-hrow{display:grid; grid-template-columns:minmax(0,1fr) auto; border:1px solid var(--line-2); border-radius:var(--r); background:var(--field); transition:border-color .12s}
.ar-hrow:hover{border-color:var(--line)}
.ar-hrow.cur{border-color:var(--accent); box-shadow:inset 3px 0 0 var(--accent)}
.ar-hopen{all:unset; box-sizing:border-box; cursor:pointer; padding:.7rem .8rem; display:flex; flex-direction:column; gap:.4rem; min-width:0; border-radius:var(--r)}
.ar-hopen:hover .ar-hsnip{color:var(--accent)}
.ar-hopen:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.ar-hmeta{display:flex; flex-wrap:wrap; gap:.2rem .6rem; font:500 var(--t-xs)/1.3 var(--f-ui); letter-spacing:0; color:var(--ink-3); font-variant-numeric:tabular-nums}
.ar-hsnip{font:400 var(--t-sm)/1.42 var(--f-ui); color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ar-hmodels{display:flex; flex-wrap:wrap; gap:.3rem .8rem}
.ar-hmodels .mpill{font-size:var(--t-2xs); max-width:12rem}
.ar-hdel{margin:.45rem .4rem 0 0}

/* ── how it works ──────────────────────────────────────────────────── */
.ar-info{max-width:70ch}
.ar-info h3:first-child{margin-top:0}
.ar-faq{display:flex; flex-direction:column; border-bottom:1px solid var(--line-2); margin-top:.6rem}
.ar-faq details{border-top:1px solid var(--line-2)}
.ar-faq summary{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.8rem 0; cursor:pointer; list-style:none; font:600 1.02rem/1.35 var(--f-ui); color:var(--ink)}
.ar-faq summary::-webkit-details-marker{display:none}
.ar-faq summary::after{content:"+"; font:400 1.1rem/1 var(--f-ui); color:var(--ink-3); flex:none}
.ar-faq details[open] summary::after{content:"−"}
.ar-faq summary:hover{color:var(--accent)}
.ar-faq summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.ar-faq details p{padding:0 0 .9rem}
.ar-ranks-chg{font:600 var(--t-xs)/1 var(--f-ui); letter-spacing:0; color:var(--hi)}
dialog.modal.ar-drawer{max-width:100vw}
.ar-drawer-foot{justify-content:space-between}
.ar-vote-msg:focus{outline:none}
.ar-vote-msg:focus-visible{outline:2px solid var(--accent); outline-offset:3px}