/* SURPRISE is a separate tab. Reuse the existing explorer's visual tokens. */
:root {
  --gj-bar:#225ea8;
  --gj-highlight:#e8f0f8;
}
.gj-view { display:grid; gap:var(--s5); }
.gj-intro { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s5); flex-wrap:wrap; }
.gj-lede { color:var(--ink-2); margin:var(--s2) 0 0; max-width:75ch; }
.gj-level-switch { display:inline-flex; gap:var(--s1); border:1px solid var(--hairline); background:var(--well); border-radius:var(--r-md); padding:var(--s1); }
.gj-level-switch .btn { border-color:transparent; background:transparent; text-decoration:none; white-space:nowrap; }
.gj-level-switch [aria-pressed="true"] { background:var(--surface); border-color:var(--hairline-2); color:var(--ink); box-shadow:var(--e1); }
.gj-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:var(--s3); margin-top:calc(-1 * var(--s3)); }
.gj-toolbar p { margin:0 auto 0 0; }
.gj-copy-input { min-width:280px; }
.gj-filters { display:grid; grid-template-columns:1.2fr 1.65fr 1fr 1fr; gap:var(--s3); }
.gj-control { display:flex; flex-direction:column; gap:6px; min-width:0; font-size:var(--t-sm); font-weight:var(--w-med); color:var(--ink-2); }
.gj-control .select { min-width:0; max-width:100%; width:100%; color:var(--ink); }
.gj-benchmark-picker { position:relative; }
/* the picker's summary dresses as the selects beside it: text left, chevron right */
.gj-benchmark-picker summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:var(--s2); }
.gj-benchmark-picker summary::-webkit-details-marker { display:none; }
.gj-benchmark-picker summary::after { content:""; width:6px; height:6px; flex:none; margin:0 2px 3px 0; border-right:1.5px solid var(--ink-2); border-bottom:1.5px solid var(--ink-2); transform:rotate(45deg); }
.gj-benchmark-options { position:absolute; right:0; z-index:40; width:340px; max-width:calc(100vw - 64px); padding:var(--s3); background:var(--surface); border:1px solid var(--hairline-2); border-radius:var(--r-md); box-shadow:var(--e2); display:grid; gap:var(--s3); }
.gj-benchmark-list { min-width:0; max-height:240px; overflow:auto; border:0; margin:0; padding:0; }
.gj-benchmark-option { display:flex; align-items:start; gap:var(--s2); padding:var(--s2) var(--s1); cursor:pointer; color:var(--ink); overflow-wrap:anywhere; }
.gj-benchmark-option[hidden] { display:none; }
.gj-benchmark-option input { margin-top:3px; flex-shrink:0; }
.gj-benchmark-options p { margin:0; }
.gj-benchmark-scope { display:flex; align-items:center; flex-wrap:wrap; gap:var(--s2); margin:var(--s3) 0; }
.gj-all-benchmarks { font-weight:var(--w-semi); }
.gj-all-benchmarks[aria-current="true"] { background:var(--gj-highlight); border-color:var(--gj-bar); }
.gj-benchmark-chip { display:inline-flex; align-items:center; gap:var(--s2); max-width:100%; overflow-wrap:anywhere; border:1px solid var(--hairline); border-radius:var(--r-sm); padding:var(--s1) var(--s2); color:var(--ink); background:var(--well); text-decoration:none; font-size:var(--t-sm); }
.gj-benchmark-chip:hover { border-color:var(--gj-bar); }
.gj-section { min-width:0; }
.gj-legend { display:flex; align-items:flex-start; flex-wrap:wrap; gap:var(--s3) var(--s6); font-size:var(--t-sm); color:var(--ink-2); padding:var(--s2) 0 var(--s4); }
.gj-legend-title { display:flex; flex-direction:column; gap:2px; min-width:150px; }
.gj-legend-title strong { color:var(--ink); font-size:var(--t-sm); letter-spacing:var(--track-caps); }
/* the ramp is drawn in color-position space; ticks are absolutely placed at
   heatPosition(value), so the uneven spacing IS the scale */
.gj-color-key { position:relative; width:420px; max-width:100%; padding-bottom:20px; }
.gj-legend-ramp { display:block; width:100%; height:14px; border-radius:var(--r-sm); box-shadow:inset 0 0 0 1px var(--hairline); }
.gj-legend-break { position:absolute; top:-4px; height:22px; width:2px; margin-left:-1px; background:var(--ink); border-radius:1px; }
.gj-legend-ticks { position:absolute; left:0; right:0; top:18px; height:16px; font-size:var(--t-xs); font-variant-numeric:tabular-nums; color:var(--ink-2); }
.gj-legend-ticks span { position:absolute; transform:translateX(-50%); white-space:nowrap; }
.gj-legend-ticks span:first-child { transform:none; }
.gj-legend-ticks span:last-child { transform:translateX(-100%); }
.gj-scale-note { flex:1 1 260px; max-width:62ch; margin:0; font-size:var(--t-sm); line-height:var(--lh); color:var(--ink-2); }
.gj-scale-note strong { color:var(--ink); }
.gj-random-baseline { flex-basis:100%; border-left:3px solid var(--gj-bar); background:var(--plane); padding:var(--s2) var(--s3); line-height:var(--lh-loose); color:var(--ink-2); }
.gj-random-baseline strong { color:var(--ink); }
.gj-heatmap-scroll, .gj-table-scroll { overflow:auto; max-width:100%; }
.gj-heatmap-scroll { max-height:76vh; isolation:isolate; border:1px solid var(--hairline); border-radius:var(--r-md); }
.gj-heatmap { border-collapse:separate; border-spacing:3px; table-layout:fixed; width:100%; min-width:1030px; font-size:var(--t-sm); font-variant-numeric:tabular-nums; }
.gj-heatmap th { text-align:left; font-weight:var(--w-med); padding:var(--s1); }
.gj-heatmap th:first-child { width:235px; position:sticky; left:0; z-index:2; background:var(--surface); box-shadow:4px 0 0 var(--surface); }
.gj-heatmap thead th { position:sticky; top:0; z-index:3; background:var(--surface); box-shadow:0 4px 0 var(--surface); padding-top:var(--s3); padding-bottom:var(--s2); }
.gj-heatmap thead th:first-child { z-index:4; }
.gj-heatmap tbody tr[data-selected="true"] th { background:var(--well); box-shadow:inset 3px 0 var(--ink),4px 0 0 var(--surface); padding-left:var(--s2); border-radius:var(--r-sm); }
.gj-model-heading[data-selected="true"] { color:var(--ink); font-weight:var(--w-semi); box-shadow:inset 0 -2px var(--ink),0 4px 0 var(--surface); }
.gj-heatmap td { padding:0; }
.gj-model-heading { vertical-align:bottom; font-size:var(--t-sm); line-height:1.3; color:var(--ink-2); }
.gj-model-name { display:flex; align-items:baseline; gap:5px; overflow-wrap:normal; word-break:normal; hyphens:none; }
.gj-model-name .dot { transform:translateY(-1px); }
.gj-heatcell { display:block; padding:8px var(--s1); border-radius:var(--r-sm); text-decoration:none; text-align:center; color:var(--gj-cell-ink); background:var(--gj-cell-bg); font-weight:var(--w-med); transition:box-shadow var(--dur) var(--ease); }
.gj-heatcell:hover, .gj-heatcell:focus-visible { outline:none; box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink-2); }
/* selected: a surface gap then an ink ring, so it reads on light and dark cells */
.gj-heatcell[aria-current="true"] { font-weight:var(--w-bold); box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--ink); position:relative; z-index:1; }
.gj-heatcell[data-empty="true"] { background:var(--well); color:var(--ink-3); }
.gj-overall-row th, .gj-overall-row td { padding-bottom:var(--s3); border-bottom:1px solid var(--hairline); }
.gj-overall-row th { font-weight:var(--w-semi); }
.gj-scroll-hint { margin-bottom:0; }
.gj-dimension-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--s2); }
.gj-dim-count { font-size:var(--t-xs); font-weight:var(--w-med); font-variant-numeric:tabular-nums; color:var(--ink-3); white-space:nowrap; }
.gj-count-heading { font-size:var(--t-xs); color:var(--ink-2); white-space:nowrap; }
.gj-dim-label { appearance:none; background:transparent; border:0; padding:0; font:inherit; color:inherit; text-align:left; line-height:inherit; cursor:help; text-decoration:underline dotted; text-decoration-color:var(--hairline-2); text-underline-offset:4px; }
.gj-dim-label:hover { text-decoration-color:var(--gj-bar); color:var(--gj-bar); }
.gj-dim-label:focus-visible { outline:2px solid var(--gj-bar); outline-offset:3px; border-radius:2px; }
.gj-dim-pop { width:min(360px,calc(100vw - 24px)); overflow-wrap:anywhere; }
.gj-selected { display:grid; gap:var(--s4); min-width:0; }
.gj-selection-head { display:flex; justify-content:space-between; gap:var(--s4); align-items:center; flex-wrap:wrap; }
.gj-breadcrumbs { display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; font-size:var(--t-md); }
.gj-breadcrumbs a { color:var(--under); text-decoration:none; }
.gj-breadcrumbs a:hover { text-decoration:underline; }
.gj-scope-note { color:var(--ink-3); margin-left:var(--s1); }
.gj-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); }
.gj-stats .stat__value { font-size:var(--t-2xl); margin-top:var(--s2); }
.gj-alternate { margin-top:var(--s3); padding-top:var(--s2); border-top:1px solid var(--hairline); font-size:var(--t-sm); color:var(--ink-2); }
.gj-comparison { background:var(--gj-highlight); padding:var(--s3) var(--s4); border-radius:var(--r-md); font-size:var(--t-md); }
.gj-detail-tools { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; margin:var(--s4) 0; }
.gj-contribution-help { margin:var(--s3) 0; padding:var(--s3) var(--s4); background:var(--plane); border:1px solid var(--hairline); border-radius:var(--r-md); }
.gj-contribution-help summary { cursor:pointer; font-weight:var(--w-semi); font-size:var(--t-md); color:var(--ink-2); }
.gj-contribution-help summary:hover, .gj-contribution-help[open] summary { color:var(--ink); }
.gj-contribution-help p, .gj-contribution-help li { max-width:100ch; font-size:var(--t-md); line-height:var(--lh-loose); }
.gj-contribution-help li + li { margin-top:var(--s2); }
.gj-contribution-help code { white-space:normal; overflow-wrap:anywhere; }
.gj-table-note { max-width:100ch; }
.gj-table { width:100%; min-width:930px; }
.table.gj-table { table-layout:auto; }
.gj-table th { white-space:nowrap; }
.gj-table th a { position:relative; display:inline-block; color:inherit; text-decoration:none; }
.gj-table th a:hover { text-decoration:underline; }
.gj-table.table th[aria-sort]::after { content:none; }
.gj-sort-indicator { position:absolute; right:calc(100% + 3px); top:50%; transform:translateY(-50%); font-size:10px; line-height:1; }
.gj-table td { vertical-align:top; }
.gj-table .num { text-align:right; white-space:nowrap; }
.gj-table [data-selected="true"] { background:var(--gj-highlight); }
.gj-row-link { overflow-wrap:anywhere; display:inline-block; min-width:130px; }
.gj-pagination { display:flex; justify-content:space-between; align-items:center; gap:var(--s3); margin-top:var(--s3); }
.gj-method summary { cursor:pointer; font-weight:var(--w-semi); }
.gj-method summary:hover { color:var(--ink); }
.gj-benchmark-about { padding:var(--s4); margin:var(--s3) 0; background:var(--plane); border:1px solid var(--hairline); border-radius:var(--r-md); }
.gj-benchmark-about p { font-size:var(--t-md); line-height:var(--lh-loose); }
.gj-benchmark-about .gj-abstract-label { margin-bottom:var(--s1); }
.gj-benchmark-abstract { margin-top:0; max-width:100ch; }
.gj-benchmark-source { overflow-wrap:anywhere; }
.gj-method-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4) var(--s6); margin-top:var(--s3); }
.gj-method h4 { margin:var(--s2) 0; }
.gj-method p { font-size:var(--t-md); color:var(--ink-2); line-height:var(--lh-loose); }
.gj-evidence-summary { display:flex; flex-wrap:wrap; gap:var(--s3); font-size:var(--t-md); padding:var(--s3); margin-bottom:var(--s3); background:var(--well); border-radius:var(--r-md); }
.gj-evidence-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4); }
.gj-evidence-section { margin-top:var(--s3); border-top:1px solid var(--hairline); padding-top:var(--s3); }
.gj-evidence-section summary { cursor:pointer; font-size:var(--t-md); font-weight:var(--w-semi); }
.gj-evidence-text { font-family:var(--mono); font-size:var(--t-sm); line-height:var(--lh-loose); white-space:pre-wrap; overflow-wrap:anywhere; max-height:65vh; overflow:auto; padding:var(--s3); background:var(--plane); border:1px solid var(--hairline); border-radius:var(--r-md); }
.gj-demand-list { display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s3); }
.gj-demand { border:1px solid var(--hairline); padding:var(--s1) var(--s2); border-radius:var(--r-sm); font-size:var(--t-xs); color:var(--ink-2); }
.gj-demand[data-max="true"] { background:var(--gj-highlight); border-color:var(--gj-bar); color:var(--ink); }
.gj-provenance { margin:0; }
@media (max-width:1000px) {
  .gj-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px) {
  .gj-stats, .gj-method-grid, .gj-evidence-grid { grid-template-columns:1fr; }
  .gj-heatmap { min-width:950px; }
  .gj-heatmap th:first-child { width:160px; }
  .gj-dimension-heading { grid-template-columns:1fr; gap:3px; }
  .gj-dim-count { justify-self:start; }
}
@media (max-width:440px) {
  .gj-filters { grid-template-columns:1fr; }
  .gj-detail-tools .spacer { margin-left:0; }
}