/* /evals/ only: the overview tables at the top and the product headings between the cards.
 *
 * The page used to open on twelve long cards. A reader had to scroll all of them to learn
 * what was tested, and a build's format (TWX48, TWFP4, TWX4) was named on one card in five.
 * The overview says every result in one line, grouped by product, and names the build each
 * model row was measured on. The cards below it keep the detail and have not changed shape.
 *
 * Tokens come from app.css; nothing here sets a colour of its own except through them.
 */
.eglance{margin-top:26px}
.eglance[hidden]{display:none}
.eg + .eg{margin-top:34px}
.eg-h{display:flex;flex-direction:column;gap:6px;margin:0 0 4px;
  font-size:calc((21px) * var(--ts));line-height:1.25;letter-spacing:-.015em}
.eg-k,.egroup-k{font-family:var(--mono);font-size:calc((12.5px) * var(--ts));font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--eg, var(--mint))}
.eg[data-group="models"],.egroup[data-group="models"]{--eg:var(--p-models)}
.eg[data-group="context"],.egroup[data-group="context"]{--eg:var(--p-context)}
.eg[data-group="governance"],.egroup[data-group="governance"]{--eg:var(--p-gov)}

table.eg-table{width:100%;margin-top:10px;border-top:2px solid var(--eg, var(--line2))}
table.eg-table th{white-space:nowrap}
table.eg-table td{vertical-align:top}
table.eg-table td.eg-name{font-weight:600;color:var(--txt);min-width:11.5em}
table.eg-table td.eg-name a{color:inherit;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
table.eg-table td.eg-name a:hover{text-decoration-color:var(--eg, var(--mint))}
table.eg-table td.eg-name small{display:block;margin-top:2px;font-weight:400}
table.eg-table td.eg-fig{font-family:var(--mono);color:var(--txt);white-space:nowrap}
table.eg-table td.eg-fig small{display:block;margin-top:2px;white-space:nowrap}
table.eg-table td.eg-say{color:var(--dim)}

/* A build's format, shown the way the model library shows it: a name, never an explanation. */
.ebuild{display:inline-block;font-family:var(--mono);font-size:calc((12px) * var(--ts));font-weight:600;
  letter-spacing:.04em;line-height:1;padding:4px 7px;border-radius:6px;white-space:nowrap;
  color:var(--p-models);background:color-mix(in srgb,var(--p-models) 11%,transparent)}
.brow-k .ebuild{margin-left:7px;vertical-align:1px}

/* A figure row on a card is its label on the left and its figure on the right, on one line. When the two
   cannot share the card's width, the figure drops to a line of its own under the label, still at the right.
   Only a figure too wide for a line of its own breaks, into balanced lines held to the right, so "52 of 80"
   does not leave the 80 alone and the figure stays in the column the others are in. The label's zero basis
   means a row breaks only when the label, squeezed to its longest word, still leaves the figure no room, so a
   row that fit before keeps its layout. Without this, "24.2 GB · identical to the original" (app.css keeps
   .brow-v on one line) set the card's narrowest width, and below about 430px that pushed the one-column grid
   past the screen. test/evals-phone-width-browser.test.mjs holds it. */
.brow-t{flex-wrap:wrap;row-gap:2px}
.brow-k{flex:1 1 0}
.brow-v{margin-left:auto;white-space:normal;text-wrap:balance;text-align:right}

/* The heading that opens each product's cards. It spans the grid, and evals.js hides it when
   a filter leaves none of its cards showing. */
.egroup{grid-column:1/-1;display:flex;flex-direction:column;gap:6px;margin:26px 0 2px;
  padding-top:22px;border-top:1px solid var(--line);
  font-size:calc((21px) * var(--ts));line-height:1.25;letter-spacing:-.015em;scroll-margin-top:82px}
.egroup[hidden]{display:none}
.evalgrid > .egroup:first-child{margin-top:8px}

@media(max-width:720px){
  table.eg-table{border-top:none}
  table.eg-table td.eg-name{min-width:0;font-size:calc((17px) * var(--ts))}
  table.eg-table td.eg-name::before{content:none}
  table.eg-table td.eg-fig{white-space:normal}
}