/* AI Lab (/leaderboard/): what I use, where it stands, my own eval, and the full boards. */

/* Clean-room neutral slate/ivory surfaces with emerald/cyan accents */
.leaderboard{--accent:var(--fg);--accent2:var(--muted);--accent3:var(--muted);
  --lab-card:var(--t-soft,var(--surface));--lab-border:var(--t-border,var(--hair));--lab-r:0px}
/* light page is already warm ivory, so cards go white to stay distinct */
[data-theme=paper] .leaderboard{--lab-card:var(--t-card,#fff);--lab-border:rgba(20,22,30,.09)}

/* ---------- section rhythm ---------- */
.lab-sec{margin-top:clamp(4.5rem,9vw,7rem);scroll-margin-top:116px}
.lab-use{margin-top:clamp(2rem,4vw,3rem)}
.lab-h{margin:0;text-align:center;font:700 clamp(1.9rem,3.6vw,2.7rem)/1.08 var(--disp);letter-spacing:-.025em;text-wrap:balance}
.lab-line{max-width:38rem;margin:.65rem auto 0;text-align:center;font:400 clamp(1rem,1.3vw,1.12rem)/1.5 var(--body);color:var(--muted);text-wrap:pretty}
.lab-sec > .ap-eyebrow{text-align:center;justify-content:center}
.lab-note{max-width:44rem;margin:1.1rem auto 0;text-align:center;font:400 .8rem/1.55 var(--body);color:var(--muted);text-wrap:pretty}
.lab-note a{color:var(--t-link,var(--fg));text-decoration:underline;text-underline-offset:2px;text-decoration-color:color-mix(in srgb,var(--t-link,var(--fg)) 40%,transparent)}
.lab-note code{font:.76rem var(--mono)}

/* ---------- what I use & best/worst tried ---------- */
.lab-use{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px}
.lab-use > .lab-h,.lab-use > .lab-line,.lab-use > .lab-legend,.lab-use > .lab-group:first-of-type{grid-column:1/-1}
.lab-legend{max-width:52rem;margin:0 auto .5rem;padding:.65rem 1rem;background:var(--lab-card);border:1px solid var(--lab-border);font:400 .88rem/1.5 var(--body);color:var(--muted);text-align:center;text-wrap:pretty}
.lab-legend code{font:500 .8rem var(--mono);color:var(--fg)}
.lab-tried{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);column-gap:10px}
.lab-tried > .lab-h,.lab-tried > .lab-line{grid-column:1/-1}
.lab-group{margin-top:2.75rem;min-width:0;scroll-margin-top:116px}
.lab-group-h{margin:0;font:600 1.2rem/1.2 var(--disp);letter-spacing:-.012em}
.lab-group-lead{margin:.25rem 0 0;font:400 .92rem/1.45 var(--body);color:var(--muted)}
.taste-grid{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lab-use > .lab-group:first-of-type .taste-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.lab-group-best .taste-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.lab-group-worst .taste-grid{grid-template-columns:1fr}
.taste-card{display:flex;flex-direction:column;gap:.15rem;min-width:0;padding:1.35rem 1.35rem 1.45rem;background:var(--lab-card);border:1px solid var(--lab-border);border-radius:var(--lab-r);box-shadow:var(--t-spec,none)}
.taste-ico{flex:none;display:grid;place-items:center;width:2.75rem;height:2.75rem;margin-bottom:.85rem;border-radius:12px;background:color-mix(in oklab,var(--c,var(--t-link,#2ee6b8)) 14%,#f1eee7);border:1px solid rgba(255,255,255,.22);box-shadow:0 2px 8px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.75)}
.taste-ico img{display:block;width:66%;height:66%;object-fit:contain}
.taste-ico.sm{width:1.6rem;height:1.6rem;margin:0;border-radius:7px;box-shadow:none}
.taste-body{min-width:0}
.taste-name{margin:0;font:600 1.08rem/1.25 var(--disp);letter-spacing:-.01em;display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem}
.taste-ver{display:inline-block;padding:.1rem .42rem;border:1px solid var(--lab-border);border-radius:4px;font:500 .74rem/1.3 var(--mono);color:var(--muted)}
.taste-meta{margin:.2rem 0 0;font:500 .76rem/1.4 var(--mono);color:var(--muted)}
.taste-reason{margin:.6rem 0 0;font:400 .93rem/1.5 var(--body);color:var(--fg);opacity:.86}
/* pros cyan-teal/emerald, cons red; the colour sits on the badge so the text stays readable */
.leaderboard{--pro:#2ee6b8;--pro-bg:rgba(46,230,184,.16);--con:#ff5f57;--con-bg:rgba(255,95,87,.16)}
[data-theme=paper] .leaderboard{--pro:#08664f;--pro-bg:rgba(8,102,79,.12);--con:#c62828;--con-bg:rgba(198,40,40,.1)}
.lab-reveal:focus-within,.leaderboard .will-reveal:focus,.leaderboard .will-reveal:focus-within{opacity:1!important;transform:none!important;transition:none!important}
.taste-pts{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.4rem;font:400 .9rem/1.4 var(--body)}
.taste-pts li{display:grid;grid-template-columns:1.25rem minmax(0,1fr);column-gap:.55rem;align-items:start;color:var(--fg)}
.taste-pts .pts-mark{display:grid;place-items:center;width:1.25rem;height:1.25rem;margin-top:.03rem;border-radius:50%;font:700 .9rem/1 var(--body);user-select:none}
.taste-pts .is-pro .pts-mark{color:var(--pro);background:var(--pro-bg)}
.taste-pts .is-con .pts-mark{color:var(--con);background:var(--con-bg)}

@media(max-width:1000px){
  .lab-use,.lab-tried{grid-template-columns:1fr}
  .lab-use > .lab-group:first-of-type .taste-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .taste-grid,.lab-use > .lab-group:first-of-type .taste-grid,.lab-group-best .taste-grid{grid-template-columns:1fr;gap:12px}
  .lab-group{margin-top:2.25rem}
  .taste-card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.9rem;padding:1.1rem 1.15rem}
  .taste-ico{margin:0;width:2.5rem;height:2.5rem}
}

/* ---------- where they stand ---------- */
.stand-wrap{max-width:46rem;margin:2rem auto 0;padding:.5rem 1.5rem;background:var(--lab-card);border:1px solid var(--lab-border);border-radius:var(--lab-r);box-shadow:var(--t-spec,none)}
.stand-table{width:100%;border-collapse:collapse;font:400 .95rem/1.3 var(--body);font-variant-numeric:tabular-nums}
.stand-table th,.stand-table td{padding:.85rem .5rem;border-bottom:1px solid var(--lab-border);text-align:left;vertical-align:middle}
.stand-table tbody tr:last-child > *{border-bottom:0}
.stand-table thead th{padding-top:.9rem;font:600 .8rem/1.25 var(--body);color:var(--muted)}
.stand-table thead a{color:inherit;text-decoration:none}
.stand-table thead a:hover{color:var(--fg);text-decoration:underline}
.stand-table thead small{display:block;margin-top:.1rem;font-weight:400;font-size:.74rem}
.stand-num{width:7.5rem;text-align:right!important}
.stand-model{font:600 .98rem/1.25 var(--disp)}
.stand-model-in{display:flex;align-items:center;gap:.65rem}
.stand-model .taste-ver{font-weight:500}
.stand-link{display:inline-block;padding:.15rem .1rem;font:600 1.05rem var(--mono);color:var(--fg);text-decoration:none;border-radius:6px}
.stand-link:hover{color:var(--t-link);text-decoration:underline;text-underline-offset:3px}
.stand-num.none{color:var(--muted)}
@media(max-width:560px){
  .stand-wrap{padding:.25rem .85rem}
  .stand-table th,.stand-table td{padding:.75rem .3rem}
  .stand-num{width:auto}
  .stand-model{font-size:.9rem}
  .stand-model-in{gap:.5rem}
  .stand-model .taste-ico{display:none}
  .stand-model .taste-ver{display:block;font-size:.76rem}
  .stand-link{font-size:.98rem}
  .stand-table thead th{font-size:.74rem}
}

/* ---------- my own eval ---------- */
.lab-eval .lab-h{font-size:clamp(1.6rem,2.8vw,2.1rem)}
.lab-eval .ap-eyebrow{margin-bottom:.45rem}
.lab-eval .lab-line{max-width:42rem}
.lab-shot{margin:1.75rem auto 0;max-width:58rem}
.lab-shot img{display:block;width:100%;height:auto}
.lab-eval-window{text-align:left;background:var(--lab-card);border:1px solid var(--lab-border);border-radius:var(--lab-r);overflow:hidden}
.lab-eval-trace{display:grid;gap:1.1rem;padding:1.35rem 1.5rem 1.55rem}
.lab-eval-input,.lab-eval-out{min-width:0;padding:.95rem 1.1rem;border:1px solid var(--lab-border);border-radius:var(--lab-r);background:color-mix(in srgb,var(--fg) 3%,transparent)}
.lab-eval-diff{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.lab-eval-out.is-pass{border-color:color-mix(in srgb,var(--pro,#2ee6b8) 38%,var(--lab-border))}
.lab-eval-out.is-fail{border-color:color-mix(in srgb,var(--con,#ff5f57) 38%,var(--lab-border))}
.lab-eval-pane-head{display:flex;align-items:center;justify-content:space-between;gap:.65rem;flex-wrap:wrap;margin-bottom:.65rem}
.lab-eval-kicker{margin:0;font:500 .95rem/1.25 var(--disp);letter-spacing:0;text-transform:none;color:var(--muted)}
.lab-eval-tag,.lab-eval-badge{padding:.18rem .55rem;border:1px solid var(--lab-border);border-radius:999px;font:600 .68rem/1.2 var(--mono);color:var(--muted);white-space:nowrap}
.lab-eval-badge.is-pass{color:var(--pro);background:var(--pro-bg);border-color:transparent}
.lab-eval-badge.is-fail{color:var(--con);background:var(--con-bg);border-color:transparent}
.lab-eval-pre{margin:0;padding:0;overflow-x:auto;font:400 .78rem/1.55 var(--mono);color:var(--fg);tab-size:4}
.lab-eval-pre code{font:inherit;background:none;padding:0}
@media(max-width:860px){
  .lab-eval-trace{padding:1.1rem}
  .lab-eval-diff{grid-template-columns:1fr}
}

/* ---------- full boards ---------- */
.lb{min-width:0;margin-top:2rem;background:var(--lab-card);border:1px solid var(--lab-border);border-radius:var(--lab-r);overflow:hidden;box-shadow:var(--t-spec,none)}
.lb-toolbar{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.9rem 1.1rem;border-bottom:1px solid var(--lab-border)}
.lb-tabs{display:flex;gap:.4rem;flex-wrap:wrap}
.lb-tab,.lb-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:.4rem 1rem;background:transparent;color:var(--fg);border:1px solid color-mix(in srgb,var(--fg) 22%,transparent);border-radius:999px;font:500 .88rem var(--body);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.lb-tab span{margin-left:.35rem;font-size:.74rem;font-family:var(--mono);opacity:.65;font-variant-numeric:tabular-nums}
.lb-tab:hover,.lb-toggle:hover{border-color:var(--fg)}
.lb-tab[aria-pressed="true"],.lb-toggle[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--t-page,var(--bg))}
.lb-filters{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-left:auto}
.lb-search input{width:15rem;min-width:0;min-height:40px;padding:.4rem .95rem;background:transparent;color:var(--fg);border:1px solid color-mix(in srgb,var(--fg) 22%,transparent);border-radius:999px;font:400 .9rem var(--body)}
.lb-search input::placeholder{color:var(--muted)}

.lb-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
.lb-table{width:100%;border-collapse:collapse;font:400 .9rem/1.4 var(--body);font-variant-numeric:tabular-nums}
.lb-caption{caption-side:top;padding:.8rem 1.1rem;text-align:left;border-bottom:1px solid var(--lab-border);color:var(--muted);font:400 .8rem/1.5 var(--body)}
.lb-table th{padding:.6rem .8rem;border-bottom:1px solid var(--lab-border);font:600 .76rem var(--body);color:var(--muted);text-align:left;white-space:nowrap}
.lb-table td{padding:.5rem .8rem;border-bottom:1px solid color-mix(in oklab,var(--lab-border) 70%,transparent);vertical-align:middle}
.lb-table tbody tr:last-child td{border-bottom:0}
.lb-table tbody tr:hover td{background:color-mix(in srgb,var(--fg) 4%,transparent)}
.lb-rank{width:3.4rem;text-align:right;color:var(--muted);font-family:var(--mono)}
.lb-table th.lb-rank,.lb-table th.lb-score{text-align:right}
.lb-model{min-width:16rem}
.lb-logo{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;margin-right:.55rem;vertical-align:-.42rem;background:var(--t-logo-bg,#f1eee7);border:1px solid rgba(20,22,30,.09);border-radius:6px}
.lb-logo img{display:block;width:72%;height:72%;object-fit:contain}
.lb-mono{font:600 .64rem var(--mono);color:#555}
.lb-name{color:var(--fg)}
.lb-lab{color:var(--muted);white-space:nowrap}
.lb-score{text-align:right;white-space:nowrap;font-family:var(--mono)}
.lb-score b{color:var(--fg);font-weight:600}
.lb-score small{display:block;font-size:.7rem;color:var(--muted)}
.lb-lic{display:inline-block;max-width:11rem;padding:.06rem .5rem;border:1px solid var(--lab-border);border-radius:999px;font:.7rem var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.lb-lic.is-open{border-color:color-mix(in srgb,var(--t-link,var(--fg)) 45%,transparent);color:var(--t-link,var(--fg))}
.lb-pick{display:inline-block;margin-left:.4rem;padding:.05rem .5rem;background:var(--t-link,var(--fg));color:var(--t-page,var(--bg));border-radius:999px;font:600 .64rem/1.5 var(--mono);vertical-align:.08rem;white-space:nowrap}
.lb-row.is-pick td{background:color-mix(in srgb,var(--t-link,var(--fg)) 6%,transparent)}
.lb-row.is-pick td:first-child{box-shadow:inset 3px 0 0 var(--t-link,var(--fg))}
.lb-row:focus{outline:2px solid var(--fg);outline-offset:-2px}
.lb-row.is-flash td{animation:lb-flash 1.7s ease-out}
@keyframes lb-flash{0%,18%{background:color-mix(in srgb,var(--fg) 20%,transparent)}100%{background:transparent}}
.lb-foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;padding:.9rem 1.1rem;border-top:1px solid var(--lab-border)}
.lb-count{font:400 .84rem var(--body);color:var(--muted)}

/* progressive enhancement: without JS both tables are plain and complete */
html.js .lb-panel:not(.is-active){display:none}
html.js .lb-row[data-over="1"]{display:none}
html.js .lb-panel.is-expanded .lb-row[data-over="1"],html.js .lb-panel.is-filtered .lb-row[data-over="1"]{display:table-row}
html.js .lb-row[hidden]{display:none!important}
html:not(.js) .lb-tabs,html:not(.js) .lb-filters,html:not(.js) .lb-more{display:none}

.lb-tab:focus-visible,.lb-toggle:focus-visible,.lb-more:focus-visible,.lb-search input:focus-visible,.stand-link:focus-visible,.lab-note a:focus-visible,.stand-table thead a:focus-visible{outline:2px solid var(--focus,var(--fg));outline-offset:2px}

/* phones: touch-sized toolbar, and each board row becomes a two-line card */
@media(max-width:760px){
  .lb-toolbar{padding:.8rem;gap:.55rem}
  .lb-tabs{width:100%}
  .lb-tab{flex:1 1 0;min-width:0;min-height:44px;padding:.45rem .6rem;white-space:normal;text-align:center;line-height:1.25}
  .lb-filters{width:100%;margin-left:0}
  .lb-search{flex:1 1 100%;min-width:0}
  .lb-search input{width:100%;min-height:44px;font-size:16px}
  .lb-toggle{min-height:44px;flex:1 1 100%}
  .lb-caption{display:block;padding:.7rem .85rem}
  .lb-foot{padding:.8rem}
  .lb-more{width:100%}

  .lb-scroll{overflow:visible}
  .lb-table{display:block;font-size:.86rem}
  .lb-table thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .lb-table tbody{display:block}
  .lb-table tbody tr{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;grid-template-areas:"rank model score" "rank lab lic";gap:.15rem .55rem;padding:.7rem .85rem;border-bottom:1px solid var(--lab-border)}
  .lb-table tbody tr:last-child{border-bottom:0}
  .lb-table td{display:block;min-width:0;padding:0;border:0}
  .lb-table tbody tr:hover td{background:transparent}
  .lb-table .lb-rank{grid-area:rank;width:auto;text-align:left;padding-top:.12rem;font-weight:600}
  .lb-table .lb-model{grid-area:model;min-width:0}
  .lb-name{overflow-wrap:break-word}
  .lb-table .lb-lab{grid-area:lab;white-space:normal;font-size:.76rem;overflow-wrap:anywhere}
  .lb-table .lb-score{grid-area:score;align-self:start}
  .lb-table .lb-lic-cell{grid-area:lic;text-align:right;min-width:0}
  .lb-lic{max-width:100%;font-size:.68rem;white-space:normal}
  .lb-table .lb-row.is-pick{background:color-mix(in srgb,var(--fg) 6%,transparent);box-shadow:inset 3px 0 0 var(--fg)}
  .lb-table .lb-row.is-pick td{background:none;box-shadow:none}
  /* expanding or filtering must not fall back to display:table-row and break the grid */
  html.js .lb-panel.is-expanded .lb-row[data-over="1"],html.js .lb-panel.is-filtered .lb-row[data-over="1"]{display:grid}
}

@media(prefers-reduced-motion:reduce){
  .lb-tab,.lb-toggle{transition:none}
  .lb-row.is-flash td{animation:none;background:color-mix(in srgb,var(--fg) 14%,transparent)}
}