/* the engine leaderboard, laid out as Artificial Analysis sets its models and drawn as a Mac app would: an outline down
   the left, large section titles, roomy cards, wide bars carrying their numbers */
#board.method { display: flex; flex-direction: column; overflow: hidden; scrollbar-gutter: auto; }  /* the bar above, fixed; the content scrolls under it */
#board.method[hidden] { display: none; }
.board-scroll { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }  /* a short page still sets its footer at the bottom */
.board-scroll > .board-inner { flex: none; width: 100%; }
.board-scroll > .board-footer { margin-top: auto; }

.board-bar { justify-content: flex-start; gap: 16px; }
.board-inner { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; max-width: 980px; margin: 0 auto; padding: 48px var(--edge) 48px; }  /* centred, as Artificial Analysis sets its column; the first title a little further under the bar than each later one below its section */
.board-main { min-width: 0; }

/* the outline: a small square before each section, the one in view filled and in the label colour */
.board-outline { position: sticky; top: 48px; align-self: start; display: flex; flex-direction: column; gap: 0; }  /* the rows touch, so their highlights meet as a sidebar's do */
.board-outline-head { padding: 16px 8px 4px; font-size: 11px; font-weight: 600; color: var(--color-label-tertiary); }  /* the sidebar's heading */
.board-outline-head:first-child { padding-top: 4px; }
.board-outline-item { display: flex; align-items: center; gap: 8px; height: var(--control-height); padding: 0 8px; border: 0; border-radius: var(--radius-control); background: none; font: inherit; font-size: 13px; text-align: left; color: var(--color-label); cursor: pointer; }  /* the sidebar's row: its card's colour, then its name */

.board-outline-item:focus:not(:focus-visible) { outline: none; }  /* a click leaves no ring; the keyboard still gets one */
.board-outline-item.is-current { background: none; }  /* the fill is the thumb below, gliding between rows */
.board-outline { position: sticky; }
.board-outline-item { position: relative; z-index: 1; }
.board-outline-thumb { position: absolute; top: 0; left: 0; right: 0; border-radius: var(--radius-control); background: var(--color-selection); pointer-events: none; transition: transform .35s cubic-bezier(.22, 1, .36, 1), height .35s cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) { .board-outline-thumb { transition: none; } }  /* the section in view, filled as the sidebar fills its selection; no fill under the pointer, as there */
.board-outline-dot { width: 8px; height: 8px; flex: none; margin: 0 2px; border-radius: 2px; transition: width .22s cubic-bezier(.2, .8, .2, 1), height .22s cubic-bezier(.2, .8, .2, 1), margin .22s cubic-bezier(.2, .8, .2, 1), border-radius .22s ease; }  /* the card's colour as a small square, as the engines' key marks theirs */
.board-outline-item.is-current .board-outline-dot { width: 12px; height: 12px; margin: 0; border-radius: 3px; }  /* the section in view: its square grows, the name keeps its place */
.board-outline-item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* a section: a large title after a square, as the outline marks it */
.board-title { display: flex; align-items: center; gap: 8px; margin: 0 0 1px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--color-label); }
.board-title:not(:first-child) { margin-top: 32px; }  /* a section's room above its title */
/* the model, picked after its section's title in the site's own pop-up button: the maker's tile, the name, the chevrons,
   as the bar's Engine and Makers buttons read, centred on the title */
.board-title-pick { display: inline-flex; align-items: center; gap: 5px; height: 24px; margin-left: auto; padding: 0 8px 0 4px; border: 0; border-radius: var(--radius-control); font: 400 12px/1 var(--font-text); letter-spacing: 0; color: var(--color-label); background: var(--color-fill); cursor: pointer; vertical-align: middle; }  /* a card's pick, its size and colours, with the maker's tile at its start */
.board-title-pick:hover, .board-title-pick[aria-expanded="true"] { background: var(--color-fill-secondary); }
.board-title-pick .model-badge { width: 16px; height: 16px; border-radius: 4px; flex: none; }  /* 4px from the button's edge on three sides */
.board-title-pick .model-badge img { width: 11px; height: 11px; }
.board-title-pick .popup-chevron { width: 8px; height: 12px; margin-left: 2px; }
.board-title-pick:focus:not(:focus-visible) { outline: none; }
.board-lede { margin: 0 0 24px; font-size: 12px; color: var(--color-label-secondary); }
.board-legend { display: inline-flex; flex-wrap: wrap; gap: 16px; padding-left: 14px; font-size: 12px; color: var(--color-label-secondary); }  /* the key starts where the other pages' first label does, inside its control's 2px rim and 12px of padding */
.board-key { display: inline-flex; align-items: center; gap: 6px; }
a.board-key { color: inherit; text-decoration: none; }
a.board-key:hover { color: var(--color-label); text-decoration: underline; text-underline-offset: 2px; }  /* a link to the engine's repo */
.board-dot { width: 8px; height: 8px; border-radius: 2px; }

.board-grid-cards.is-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 12px; }  /* rows twice as far apart as columns */
/* each section's platforms as one row that pages sideways: two cards in view, the rest a swipe or a paddle away, as
   Apple's pages carry a row of tiles; each card snaps to the row's start */
.board-grid-cards.is-matrices { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 24px) / 2); gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.board-grid-cards.is-matrices::-webkit-scrollbar { display: none; }
.board-grid-cards.is-matrices > * { scroll-snap-align: start; }
/* the rows' paddles: the cards' view switch at the section head's right, after its pick where it has one */
.board-section-head > .board-carousel-nav { flex: none; margin: 0 0 0 auto; }  /* a 24px group centred on the line, as the pick beside it */
.board-section-head > .board-title-pick + .board-carousel-nav { margin-left: -10px; }  /* 6px from the pick (the head's 16px gap less 10), as the page pairs its pills */
.board-carousel-nav[hidden] { display: none; }
.board-carousel-nav .plain-button:disabled { opacity: .35; cursor: default; }
.board-grid-cards.is-matrices .board-card { padding-left: 11px; padding-right: 11px; }  /* a little more room for the grids */
.board-grid-cards.is-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
/* By Model: each measure's small heading, as a card's title and lines, over its row of platform cards, its paddles at
   the right on the last line, as a section's sit on its description */
.board-row-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 8px; padding: 0 11px; scroll-margin-top: 48px; }
.board-row-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--color-label); }  /* a size over its cards' titles */
.board-row-head .board-sub { margin-bottom: 0; }
.board-row-head > .board-carousel-nav { flex: none; margin-left: auto; }
.board-carousel + .board-row-head, .board-empty + .board-row-head { margin-top: 24px; }
.board-row-head + .board-carousel .board-card-body > .board-chart { height: auto; }  /* no grid to share a height with: the bars at their own */
@media (max-width: 899px) {
  /* phones: By Model's two picks side by side under its description, not one over the other */
  .board-section-head:has(> .board-title-pick + .board-title-pick) { flex-flow: row wrap; align-items: center; column-gap: 16px; }  /* 8px apart, the second pulled 8px in */
  .board-section-head:has(> .board-title-pick + .board-title-pick) > .board-section-text { flex-basis: 100%; }
}
.board-card { scroll-margin-top: 48px; padding: 14px 16px 10px; border-radius: 12px; background: none; box-shadow: none; }  /* a card is its content on the page, no outline around it */
.board-card h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: var(--color-label); }
.board-badge { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18); }  /* the sidebar's tile, at its size */
.board-badge svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }  /* 3px in from each side of the 20px tile, on whole pixels, so the symbol sits sharp and dead centre */
.board-sub { margin: 2px 0 8px 20px; font-size: 11px; line-height: 1.4; color: var(--color-label-secondary); }  /* under the title's words, past its badge */
.board-empty { margin: 48px 0; font-size: 13px; text-align: center; color: var(--color-label-tertiary); }
.board-note { margin: 4px 0 6px; font-size: 11px; text-align: center; color: var(--color-label-tertiary); }

.board-chart { display: block; width: 100%; height: auto; font-family: inherit; overflow: visible; }
.board-grid { stroke: var(--color-separator); stroke-width: 1; stroke-dasharray: 3 3; }  /* dashed, so the bars stand in front of them; at full strength, since a dash carries half the ink */
.board-axis { stroke: var(--color-separator); stroke-width: 1; }
.board-value { font-size: 11px; font-weight: 500; text-anchor: middle; fill: var(--color-label-secondary); font-variant-numeric: tabular-nums; }
.board-value.is-inside { dominant-baseline: central; font-size: 12px; font-weight: 600; letter-spacing: -.01em; fill: #fff; }  /* centred in its bar in SF's semibold, as Swift Charts sets an overlay annotation */
.board-group { font-size: 11px; font-weight: 600; text-anchor: middle; fill: var(--color-label); }
.board-group.is-turned { text-anchor: end; }  /* an engine's name runs down to the left from under its logo */
.board-glyph { overflow: visible; fill: var(--color-label); }
.board-glyph .is-stroked { fill: none; stroke: var(--color-label); stroke-linecap: round; stroke-linejoin: round; }
.board-glyph .is-faint { fill: var(--color-label-tertiary); }
.board-machine { font-size: 10px; text-anchor: middle; fill: var(--color-label-secondary); }
.board-hit { fill: transparent; }
.board-tick { font-size: 10px; text-anchor: middle; fill: var(--color-label-tertiary); font-variant-numeric: tabular-nums; }
.board-tick.is-y { text-anchor: end; }
.board-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.board-dot-mark { stroke: var(--color-row); stroke-width: 2; }
.board-ideal { fill: none; stroke: var(--color-label-tertiary); stroke-width: 1; stroke-dasharray: 4 4; }
.board-value.is-start, .board-machine.is-start { text-anchor: start; }
.board-col { font-size: 11px; font-weight: 600; fill: var(--color-label-secondary); }
.board-stripe { fill: var(--color-fill); opacity: .5; }
.board-row-name { font-size: 12px; fill: var(--color-label); }
.board-row-platform { font-weight: 600; }
.board-end { font-size: 11px; font-weight: 600; fill: var(--color-label); }
.board-series { transition: opacity .15s ease; }
.board-chart.has-near .board-series:not(.is-near) { opacity: .35; }  /* the line nearest the pointer stays lit; board.js picks it */
.board-band { fill: transparent; }
.board-sheen { fill: url(#board-sheen); pointer-events: none; }
.board-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.board-bar:hover .board-band { fill: var(--color-fill); }  /* the hovered bar's slot greys behind it; the other bars keep their colour */
.chart-tooltip.is-board { min-width: 0; padding: 6px 10px; white-space: nowrap; }  /* a compact card, as Artificial Analysis sets its chart's */
.board-tip-head { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; color: var(--color-label); }  /* the bars' own figure size, small and quiet */
.board-tip-logo { width: 11px; height: 11px; flex: none; overflow: visible; }
.board-tip-value { margin-top: 1px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-label); }
.board-tip-note { margin-top: 1px; font-size: 10px; color: var(--color-label-secondary); }
/* a head-to-head battle's card: the two engines, then a row per figure, its name in grey and its value to the right */
.board-tip-vs { color: var(--color-label-tertiary); font-weight: 400; }
.board-tip-row { display: flex; justify-content: space-between; gap: 16px; margin-top: 3px; font-size: 11px; color: var(--color-label-secondary); }
.board-tip-row b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-label); }
.board-tip-battle .board-tip-head, .board-tip-battle .board-tip-row { font-size: 9px; }  /* the grid's own figure size */
.board-tip-battle .board-tip-head { gap: 4px; }
.board-tip-battle .board-tip-row { gap: 12px; margin-top: 2px; }

/* narrow windows: the outline gives its column to the charts */
@media (max-width: 1100px) {
  .board-inner { grid-template-columns: minmax(0, 1fr); }
  .board-outline { display: none; }
}
/* the engines' key stays one line at every width and scrolls sideways, as the grid's bar does, its scrollbar hidden */
.platform-bar.board-bar { overflow-x: auto; scrollbar-width: none; }
.platform-bar.board-bar::-webkit-scrollbar { display: none; }
.board-bar .board-legend { flex-wrap: nowrap; white-space: nowrap; }
@media (max-width: 899px) {
  .board-inner { padding: 12px var(--edge) 32px; }
}

/* under the rankings: the banner across two thirds, the changelog beside it at the same height */
.board-hero { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 24px 12px; height: 200px; margin-top: 32px; }  /* the cards' columns and gaps, so its edges meet theirs; as far below the cards as the next title sits below it */
.board-hero .board-banner { grid-column: span 1; }  /* the banner, the recommender and the changelog, a third each, on the cards' columns */
.board-hero .board-banner { height: auto; margin: 0; border-radius: 12px; }  /* the cards' corner */
/* the banner in the site's own type and controls: a small "New" tag, as the cards' tags read, over the headline at
   the banner's 28pt, both at the foot; the arrow a frosted toolbar button in the corner */
.board-banner { display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; color: #fff; }  /* the tag and headline at the foot */
.board-banner-foot { position: relative; pointer-events: none; }  /* the card's link takes every click */
.board-banner-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.board-banner-badge { padding: 1px 6px; border-radius: 5px; font-size: 10px; font-weight: 600; color: #fff; background: rgba(255, 255, 255, .22); backdrop-filter: blur(12px); }  /* the cards' tag, frosted */
.board-banner-title { margin: 0; font: 700 20px/1.1 var(--font-display); letter-spacing: -.01em; text-shadow: 0 1px 12px rgba(30, 20, 90, .25); }
/* the whole banner opens pie-project.org, as a card opens its page: a layer over the gradient takes the click; a frosted
   toolbar button in the corner says so, brighter when the banner is hovered */
.board-banner-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.board-banner-go { position: absolute; top: 20px; right: 20px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-field); background: rgba(255, 255, 255, .2); backdrop-filter: blur(12px); transition: background .15s ease; }
.board-banner-go svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.board-banner-link:hover .board-banner-go { background: rgba(255, 255, 255, .34); }
.board-banner-link:focus-visible { outline: 3px solid rgba(255, 255, 255, .7); outline-offset: -3px; }
/* the changelog as an outlined card, its runs on a timeline that scrolls inside it, as Artificial Analysis lists its own */
.board-log { display: flex; flex-direction: column; min-height: 0; padding: 14px 0 0 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--color-separator); }
.board-log-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 22px; margin: 0 16px 10px 0; }  /* one height, the bell's, open or closed, so the list never moves */
.board-log-title { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: var(--color-label); }
/* the bell beside the title, a toolbar button's size and hover, the accent while its form is open */
.board-log-bell { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--color-label-secondary); cursor: pointer; }
.board-log-title { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.board-log-check { width: 13px; height: 13px; fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }  /* "Subscribed" in the title's own type, after an accent checkmark */
.board-log-bell.is-subscribed { color: var(--color-accent); }
.board-log-bell.is-subscribed svg { fill: currentColor; }  /* bell.fill: on */
.board-log-bell:hover { background: var(--color-fill); color: var(--color-label); }
.board-log-bell.is-on { color: var(--color-accent); }
.board-log-bell svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* its form: a field and a button on the title's line */
.board-subscribe { flex: 1; display: flex; gap: 6px; margin: 0; contain: inline-size; }
.board-log-head.is-open .board-log-title, .board-log-head.is-open .board-log-bell { display: none; }  /* the field in the title's and the bell's place; a click elsewhere closes it */  /* takes the width the list sets, never widens the card */
.board-subscribe[hidden] { display: none; }
.board-subscribe input { flex: 1; min-width: 0; height: 22px; padding: 0 8px; border: 0; border-radius: var(--radius-control, 6px); font: inherit; font-size: 12px; color: var(--color-label); background: var(--color-fill); outline: none; }
.board-subscribe button { display: grid; place-items: center; flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; color: #fff; background: var(--color-accent); cursor: pointer; }
.board-subscribe button svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.board-subscribe button:disabled { opacity: .5; }
.board-log-list { flex: 1; min-height: 0; margin: 0; padding: 0 16px 14px 0; list-style: none; overflow-y: auto; scrollbar-width: none; mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); }  /* scrolls with no bar showing, as the sidebar does; the last line fades out to say there is more */
.board-log-list::-webkit-scrollbar { display: none; }
.board-log-item { position: relative; padding: 0 0 14px 20px; }
.board-log-item::before { content: ""; position: absolute; left: 0; top: 3px; width: 9px; height: 9px; border-radius: 2px; background: var(--color-accent); }  /* the run's dot */
.board-log-item:not(:last-child)::after { content: ""; position: absolute; left: 4px; top: 12px; bottom: -3px; width: 1px; background: var(--color-separator); }  /* the line to the next */
.board-log-kind { font-size: 11px; white-space: nowrap; color: var(--color-label-secondary); }
.board-log-text { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 11px; color: var(--color-label); }
.board-log-text > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-log-text .sidebar-glyph[style] { width: 16px; height: 16px; flex: none; border-radius: 4px; }
.board-log-text .sidebar-glyph[style] svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.board-log-text .sidebar-glyph svg .is-filled { fill: #fff; stroke: none; }
.board-log-text .model-badge { flex: none; }
.board-log-glyph { display: inline-flex; flex: none; }
.board-log-glyph svg { width: 12px; height: 12px; fill: none; stroke: var(--color-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 899px) {
  .board-hero { grid-template-columns: 1fr; height: auto; }
  .board-hero .board-banner { grid-column: auto; }
  .board-grid-cards.is-three, .board-grid-cards.is-two { grid-template-columns: 1fr; }
  .board-grid-cards.is-matrices { grid-auto-columns: 100%; }  /* one card in view on a phone */
  .board-hero .board-banner { height: 240px; }
  .board-log { height: 300px; }
}

/* a card's own pick, at the far end of its title: a small pop-up button, as the bar's are */
.board-card-pick { height: 24px; padding: 0 8px 0 8px; border: 0; border-radius: var(--radius-control); font: inherit; font-size: 12px; color: var(--color-label); background: var(--color-fill); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.board-card-pick:hover, .board-card-pick[aria-expanded="true"] { background: var(--color-fill-secondary); }
.board-card-pick .mode-icon { width: 12px; height: 12px; margin-right: 2px; }
.board-card-tool { --tool-ink: #000; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-control); color: var(--tool-ink); background: none; cursor: pointer; }
:root[data-theme="dark"] .board-card-tool { --tool-ink: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .board-card-tool { --tool-ink: #fff; } }
.board-card-tool:hover { background: var(--color-fill); }
.board-card-tool:hover svg { opacity: .85; }
.board-card-tool svg { width: 16px; height: 16px; opacity: .5; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }  /* SF Symbols' regular weight; drawn in a solid ink and faded as one, so where two lines cross they are no darker than either */
.board-card-tool:focus:not(:focus-visible) { outline: none; }
/* a card's head: its title and description on the left; on the right its tools, a small borderless button each as a
   toolbar's, and under them the pick of what it shows */
.board-card-head { display: flex; align-items: flex-start; gap: 12px; }
.board-card-titles { flex: 1; min-width: 0; }
.board-card-side { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 6px; }
.board-card-tools { display: inline-flex; gap: 2px; margin-top: -2px; }  /* their right edge on the pick's under them */
/* the Hardware Recommender: the banner's card in a deep plum, as Artificial Analysis sets its recommender beside its
   product card; its name at the top, what it does at the foot */
.board-banner.is-recommender { justify-content: space-between; background: radial-gradient(70% 60% at 85% 10%, rgba(191, 90, 242, .45), transparent 70%), radial-gradient(60% 60% at 10% 100%, rgba(94, 92, 230, .5), transparent 70%), linear-gradient(150deg, #2b1452, #4a1a5e); }
.board-banner-title.is-top { position: relative; max-width: calc(100% - 48px); pointer-events: none; }  /* clear of the arrow beside it */
.board-banner.is-recommender .board-banner-sub { position: relative; margin: 0; font-size: 11px; font-weight: 400; line-height: 1.4; text-wrap: balance; color: rgba(255, 255, 255, .8); pointer-events: none; }  /* the cards' description type, in white; two lines, never a word alone on a third */
.board-title-pick .mode-icon { width: 12px; height: 12px; margin-left: 4px; }  /* a degree mark sits where a maker's tile would, inset to its middle */
.board-logo { clip-path: inset(0 round 22%); }  /* a logo drawn on its own tile (Splash's) gets an app icon's corners */
/* the rankings' Speculation, a small toggle as a Mac toolbar sets one: grey while off, the accent's tint with its word and
   its double chevron in the accent while on; a size under the section pickers', so it reads as a setting, not a menu */
.board-toggle { display: inline-flex; align-items: center; gap: 4px; height: 24px; margin-left: auto; padding: 0 8px; border: 0; border-radius: var(--radius-control); font: 400 12px var(--font-text); letter-spacing: 0; color: var(--color-label); background: var(--color-fill); cursor: pointer; }  /* a card's pick, its size and colours */
.board-toggle:hover { background: var(--color-fill-secondary); }
.board-toggle svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.board-toggle.is-on { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.board-toggle.is-on:hover { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.board-toggle:focus:not(:focus-visible) { outline: none; }
/* a section's head with a control: its title and description on the left, the control at the right end on the
   description's line, centred on it, so the title reads alone */
.board-section-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }  /* the controls centred on the title and its lines */
.board-section-head:not(:first-child) { margin-top: 48px; }  /* 64px seen: the cards above end 16px under their last words */
.board-section-text { flex: 1; min-width: 0; }
.board-section-text .board-title { margin-top: 0; }
.board-section-text .board-lede { margin-bottom: 0; }
.board-section-head > .board-title-pick { margin: 0 0 0 auto; }  /* a 24px button centred on the 16px line */
.board-section-head > .board-toggle { margin: 0 0 0 auto; }  /* a 24px one the same */
.board-title-dot { width: 12px; height: 12px; flex: none; border-radius: 3px; }  /* the card's colour as a plain square before its title, as Artificial Analysis marks its charts */
/* Mobile's black square keeps a hairline edge on a dark card, where its tile colour is the card's own */
:root[data-theme="dark"] .board-title-dot[style*="#1C1C1E"] { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .board-title-dot[style*="#1C1C1E"] { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); } }
/* the page's foot: a quiet band under a hairline, its links small and grey, as a Mac site closes a page */
.board-footer { margin-top: 0; background: none; font-size: 11px; line-height: 1.4; color: var(--color-label-secondary); }  /* the cards' description type */
.board-footer-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; max-width: 980px; margin: 0 auto; padding: 40px var(--edge) 32px; }
.board-footer-brand { display: grid; grid-template-columns: 16px auto; column-gap: 8px; align-items: center; align-content: start; }  /* the sidebar's mark and name, the line under the name */
.board-footer-brand > div { display: contents; }
.board-footer-brand svg { width: 16px; height: 16px; fill: none; stroke: var(--color-label); stroke-width: 8; }
.board-footer-name { font: 700 15px/20px var(--font-display); letter-spacing: -.01em; color: var(--color-label); }
.board-footer-line { grid-column: 2; margin-top: 2px; }
.board-footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.board-footer-cols h3 { margin: 0 0 8px; font-size: 11px; font-weight: 600; color: var(--color-label); }
.board-footer-cols ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.board-footer a { color: var(--color-label-secondary); text-decoration: none; }
.board-footer a:hover { color: var(--color-label); }
.board-footer-base { display: flex; justify-content: space-between; gap: 16px; width: calc(100% - 2 * var(--edge)); max-width: calc(980px - 2 * var(--edge)); margin: 0 auto; padding: 16px 0 28px; border-top: .5px solid color-mix(in srgb, var(--color-separator) 45%, transparent); font-size: 11px; line-height: 1.4; color: var(--color-label-tertiary); }  /* the cards' description size, a shade lighter: the page's last word, quieter than the links above */
.board-footer-base a { color: inherit; }
.board-footer-base a:hover { color: var(--color-label-secondary); }
.board-footer-sep { margin: 0 6px; }
@media (max-width: 899px) {
  .board-footer-inner { grid-template-columns: 1fr; }
  .board-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.board-pick-logo { width: 13px; height: 13px; flex: none; overflow: visible; }  /* an engine's logo before its name in a pick */
.popover .board-pick-logo { margin-right: 6px; }
.board-log-glyph svg .is-filled { fill: var(--color-accent); stroke: none; }  /* the changelog's bars, solid as the sidebar's */

/* iPhone: the page as an iOS one reads, the desktop's same parts set for a narrow screen */
@media (max-width: 899px) {
  /* a card's tools and its pick move under its words, the pick first and the tools at the row's end */
  .board-card-head { flex-direction: column; gap: 10px; }
  .board-card-side { flex-direction: row-reverse; align-self: stretch; align-items: center; justify-content: space-between; }
  .board-card-tools { margin: 0; }
  /* a section's pick or toggle goes under its description, at the start of the line */
  .board-section-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
  .board-section-head > .board-title-pick + .board-carousel-nav, .board-section-head > .board-view:not(.board-carousel-nav) { margin-left: 0; }  /* each control on its own line from the same edge */
  .board-section-head > .board-title-pick, .board-section-head > .board-toggle { margin: 0; }
  /* the banner, the recommender and the changelog stacked, each a phone's size */
  .board-hero .board-banner { height: 200px; }
  .board-hero .board-banner.is-recommender { height: 170px; }
  .board-log { height: 280px; }
  /* the foot's last line as two lines */
  .board-footer-base { flex-direction: column; gap: 4px; }
}

/* head to head on a platform, laid out as LMArena's battles and drawn in the page's own hand: the share of setups the
   row won against the column on soft rounded tiles, tinted green where it leads and blue where it trails, a little
   deeper the wider the margin, never louder than the page's bars; the names upright over the columns and before the
   logos down the rows; the diagonal blank; a stepped scale to the right */
.board-matrix { margin: 0 0 4px; border-collapse: separate; border-spacing: 2px; font-size: 9px; font-variant-numeric: tabular-nums; }
.board-matrix th, .board-matrix td { height: 20px; padding: 0; text-align: center; }
.board-matrix td { --tile: var(--color-fill); border-radius: 3px; color: var(--color-label); background: var(--tile); }  /* a small corner, so a wide tile reads as a cell, not a pill */
.board-matrix thead th { font-weight: 400; vertical-align: bottom; padding-bottom: 4px; }
.board-matrix th[scope="row"] { text-align: right; padding: 0 2px 0 0; white-space: nowrap; }  /* as wide as its names, so a logo never meets a tile */
.board-matrix td { width: 42px; min-width: 42px; max-width: 42px; }
.board-matrix-engine { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 400; color: var(--color-label-secondary); }
.board-matrix-engine.is-col { flex-direction: column; gap: 4px; }
.board-matrix-engine.is-col .board-matrix-name { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9px; }  /* read bottom to top, as a chart's upright labels */
.board-matrix-logo { width: 12px; height: 12px; flex: none; overflow: visible; }
.board-matrix-slot { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; }  /* each logo centred in a square of one size, so they line up down the rows */
.board-matrix-logo.is-wide { width: 15px; }
.board-matrix td.is-none { color: var(--color-label-tertiary); }
.board-matrix td[data-tip-head] { transition: opacity .15s ease; }
.board-matrix:has(td[data-tip-head]:hover) td[data-tip-head]:not(:hover) { opacity: .4; }  /* the battle under the pointer stays, the rest fade, as the page's bars do */
.board-matrix td.is-self, .board-matrix td.board-matrix-total { background: none; }
.board-matrix td[data-step="4"] { color: #fff; }  /* only the deepest step turns its figure white */
/* a battle measured with speculation: the tile keeps its colour under fine white lines at 45 degrees, as pie's bars wear
   theirs */
.board-card-body .board-matrix td.is-spec { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .28) 0 1.6px, transparent 1.6px 5px), var(--tile); }
/* its key, at the foot's left, level with Engine B */
.board-matrix-spec { position: absolute; left: 0; bottom: 1px; display: flex; align-items: center; gap: 4px; font-size: 9px; line-height: 1; color: var(--color-label-secondary); }
.board-matrix-spec i { width: 12px; height: 8px; border-radius: 2px; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .45) 0 1.2px, transparent 1.2px 3.5px), var(--color-label-tertiary); }
.board-card-body { --board-win: #34c759; --board-loss: var(--color-accent); }  /* Apple's system green, and the site's accent blue */
/* the steps in the site's own green and blue, the system colours its marks wear, stronger the wider the margin */
.board-card-body .is-win[data-step="1"] { --tile: color-mix(in srgb, var(--board-win) 18%, var(--color-fill)); background: var(--tile); }
.board-card-body .is-win[data-step="2"] { --tile: color-mix(in srgb, var(--board-win) 34%, var(--color-fill)); background: var(--tile); }
.board-card-body .is-win[data-step="3"] { --tile: color-mix(in srgb, var(--board-win) 52%, var(--color-fill)); background: var(--tile); }
.board-card-body .is-win[data-step="4"] { --tile: color-mix(in srgb, var(--board-win) 80%, var(--color-fill)); background: var(--tile); }
.board-card-body .is-loss[data-step="1"] { --tile: color-mix(in srgb, var(--board-loss) 18%, var(--color-fill)); background: var(--tile); }
.board-card-body .is-loss[data-step="2"] { --tile: color-mix(in srgb, var(--board-loss) 34%, var(--color-fill)); background: var(--tile); }
.board-card-body .is-loss[data-step="3"] { --tile: color-mix(in srgb, var(--board-loss) 52%, var(--color-fill)); background: var(--tile); }
.board-card-body .is-loss[data-step="4"] { --tile: color-mix(in srgb, var(--board-loss) 80%, var(--color-fill)); background: var(--tile); }
.board-matrix-total { min-width: 20px; font-weight: 500; color: var(--color-label); }
.board-matrix thead .board-matrix-total { font-size: 10px; font-weight: 400; color: var(--color-label-secondary); }
/* the axes' names, small and grey: Engine A turned up the left side, Engine B centred under the grid */
.board-matrix-axis { font-size: 10px; font-weight: 400; color: var(--color-label-secondary); text-align: center; }
.board-matrix-axis.is-a span { position: absolute; left: 0; top: 50%; line-height: 1; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); }
.board-matrix-axis.is-b { position: absolute; left: 0; right: 0; bottom: 1px; line-height: 1; }  /* 11px off the card's foot, as Engine A and the scale sit off its sides */
.board-matrix-frame { position: relative; display: flex; align-items: center; justify-content: center; height: 200px; padding: 0 20px 22px 14px; }  /* one fixed height: the axes' names and the scale sit at the same spot on every card, whatever the grid holds */
/* the scale: nine steps stacked from a clean sweep down to none, its two ends marked over and under it */
.board-matrix-key { position: absolute; right: 0; top: calc(50% - 11px); transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; }  /* centred on the room above Engine B, its ends marked over and under it */
.board-matrix-bar { display: inline-flex; flex-direction: column; gap: 2px; }
.board-matrix-bar i { width: 8px; height: 8px; border-radius: 2px; background: var(--color-fill); }  /* rounded squares, as the page's keys and outline mark their colours */
.board-matrix-tick { font-size: 9px; color: var(--color-label-secondary); font-variant-numeric: tabular-nums; }

/* a platform card's view switch in its corner: the platform pages' setup control, its symbols alone, the picked one in
   the accent with nothing behind it */
.board-view { gap: 0; }
.board-view .plain-button { display: grid; place-items: center; height: 20px; padding: 0 6px; transition: none; }
.board-view .plain-button.is-active, :root[data-theme="dark"] .board-view .plain-button.is-active { color: var(--color-accent); background: transparent; box-shadow: none; }
.board-view svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.board-matrix, .is-matrices .board-chart { cursor: grab; user-select: none; }
@media (pointer: fine) { .board-matrix { touch-action: none; } .is-matrices .board-chart { touch-action: pan-y; } }  /* a finger still scrolls the page past it */
.board-matrix.is-tugged, .board-chart.is-tugged, .board-legend.is-tugged { cursor: grabbing; user-select: none; }
.board-matrix.is-tugged td, .board-chart.is-tugged .board-bar { pointer-events: none; }  /* no hover card while it is held */
/* a platform card is one height whichever view it shows: the bars sit in the grid's 200px, scaled to fit */
.is-matrices .board-card-body > .board-chart { height: auto; margin-top: 7px; }  /* the bars at their own height: no letterbox above or below them */
.board-card-pick:focus:not(:focus-visible) { outline: none; }  /* no ring after a click, only for the keyboard */
/* the footer's last line, as OpenAI sets its own: the name and year, then a few links spaced apart with no dots, an icon at
   the right; the data's date sits under the brand */
.board-footer-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.board-footer-links a { color: inherit; text-decoration: none; }
.board-footer-links a:hover { color: var(--color-label); }
/* a star for the repo in the Log in button's black (white in dark mode), the GitHub mark before its label */
.board-footer a.board-footer-star { grid-column: 3; justify-self: end; align-self: center; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 12px; font-size: 13px; font-weight: 500; color: #fff; background: #1d1d1f; }
:root[data-theme="dark"] .board-footer a.board-footer-star { color: #1d1d1f; background: #f5f5f7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .board-footer a.board-footer-star { color: #1d1d1f; background: #f5f5f7; } }
.board-footer a.board-footer-star:hover { opacity: .85; }
.board-footer a.board-footer-star:active { opacity: .7; }
.board-footer-star svg { width: 14px; height: 14px; fill: currentColor; }
@media (max-width: 899px) { .board-footer a.board-footer-star { grid-column: auto; justify-self: start; } }  /* phones: under the line, at its start */
.board-footer-line.is-date { margin-top: 10px; color: var(--color-label-tertiary); }
/* no brand block: the link columns take the row, the mark leads the last line */
.board-footer-inner { display: block; }
.board-footer-mark { display: inline-flex; align-items: center; gap: 6px; }
.board-footer-mark svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 6; transform: translateY(-1px); }  /* the triangle's weight sits high: nudged onto the text's middle */
.board-footer-date { margin: -4px 0 8px; color: var(--color-label-tertiary); }
/* the footer band: what the data is and when, the links that back it, a way to hear of the next release */
.board-footer-band { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; max-width: 980px; margin: 0 auto; padding: 32px var(--edge) 24px; }
.board-footer-lead { margin: 0 0 6px; font-size: 13px; line-height: 1.45; color: var(--color-label); }
.board-footer-meta { margin: 0; color: var(--color-label-tertiary); }
.board-footer-trust { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.board-footer-trust a { color: var(--color-label-secondary); text-decoration: none; }
.board-footer-trust a:hover { color: var(--color-label); }
@media (max-width: 899px) { .board-footer-band { grid-template-columns: 1fr; gap: 20px; } }

/* the Accuracy card's chart in the Overview's own hand: its ticks, gridlines and labels as the bar charts draw theirs,
   the key as the engines' key reads, rounded squares before grey words */
.board-card .qc-chart .qc-grid { stroke: var(--color-separator); stroke-dasharray: none; opacity: .6; }
.board-card .qc-chart .qc-grid.is-zero { stroke: var(--color-label-tertiary); opacity: 1; }
.board-card .qc-chart .qc-tick { font-size: 10px; fill: var(--color-label-tertiary); }
.board-card .qc-chart .qc-row { font-size: 11px; fill: var(--color-label); }
.board-card .qc-chart .qc-mark.is-off .qc-row { font-weight: 600; fill: var(--color-negative); }
.board-card .qc-chart .qc-band { fill: var(--color-fill); }
.board-card .qc-chart .qc-err { stroke: var(--color-label-tertiary); stroke-width: 2; }
.board-card .qc-chart .qc-dot { fill: var(--color-label-secondary); stroke: var(--color-row); stroke-width: 2; }
.board-card .qc-chart .qc-mark.is-off .qc-dot { fill: var(--color-negative); }
.board-card .qc-chart .qc-mark { transition: opacity .15s ease; }
.board-card .qc-chart:hover .qc-mark { opacity: .45; }
.board-card .qc-chart:hover .qc-mark:hover { opacity: 1; }  /* the row under the pointer stays, the rest fade, as the bars do */
.board-card .qc-chart-key { gap: 16px; margin: 6px 0 4px; font-size: 12px; color: var(--color-label-secondary); }
.board-card .qc-key-band, .board-card .qc-key-dot { width: 8px; height: 8px; border-radius: 2px; }
/* phones: a card whose corner holds only the bars-or-grid switch keeps it beside the title, as on a desktop */
@media (max-width: 899px) {
  .board-card-head:has(.board-view):not(:has(.board-card-tools)) { flex-direction: row; }
  .board-card-head:has(.board-view):not(:has(.board-card-tools)) .board-card-side { align-self: flex-start; }
}
@media (max-width: 899px) {
  .board-card .qc-chart { min-width: 640px; }  /* the gap chart keeps readable labels and scrolls sideways in its card, as the bar charts do */
  .board-footer-base { align-items: flex-start; }
  .board-footer-links { gap: 6px 16px; }
}
@media (max-width: 899px) {
  .board-view .plain-button { min-width: 40px; padding: 0 8px; }  /* phones: wider segments, a thumb's width each */
  .board-view svg { width: 16px; height: 16px; }
}
/* phones: the model, measure and engine picks as the bar's capsules, the card's tools as round grey buttons, as the
   top bar now draws its own */
@media (max-width: 899px) {
  .board-title-pick, .board-card-pick { height: 34px; padding: 0 12px 0 8px; border-radius: 999px; font-size: 15px; }
  .board-title-pick .model-badge, .board-card-pick .board-pick-logo { width: 20px; height: 20px; }
  .board-card-tools { gap: 6px; }
  .board-card-tool { width: 34px; height: 34px; border-radius: 999px; background: var(--color-fill); }
  .board-card-tool svg { width: 16px; height: 16px; }
}
/* phones: a card's head in two halves along its top edge, the title and its lines on the left, the pick and the tools
   on the right, wrapping under one another there when they need to */
@media (max-width: 899px) {
  .board-card-head:not(:has(.board-view)) { flex-direction: row; align-items: flex-start; }
  .board-card-head:not(:has(.board-view)) > .board-card-titles { flex: 1 1 50%; min-width: 0; }
  .board-card-head:not(:has(.board-view)) > .board-card-side { flex: 1 1 50%; min-width: 0; flex-direction: row-reverse; flex-wrap: wrap-reverse; align-self: flex-start; justify-content: flex-start; gap: 8px; }
}
@media (max-width: 899px) {
  .board-card-head:has(.board-view) > .board-card-titles { flex: 1 1 auto; min-width: 0; }  /* the title and its line wrap before the switch */
  .board-card-head:has(.board-view) > .board-card-side { flex: none; }
  .board-card-head:has(.board-view) .board-sub { overflow-wrap: anywhere; }
}
@media (max-width: 899px) { .board-card-titles .board-sub { overflow-wrap: anywhere; } }
/* phones: the footer in iOS's sizes, its links in one row */
@media (max-width: 899px) {
  .board-footer-band { gap: 24px; padding: 28px var(--edge) 20px; }
  .board-footer-lead { font-size: 15px; }
  .board-footer-meta { font-size: 13px; }
  .board-footer-trust { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; }
  .board-footer-base { padding: 16px 0 calc(24px + env(safe-area-inset-bottom)); font-size: 13px; }
}
/* phones, as an iOS form: links in the accent, a rounded field over a full-width Subscribe button, the small print centred */
@media (max-width: 899px) {
  .board-footer-trust a { color: var(--color-accent); }
  .board-footer-base { justify-content: center; text-align: center; }
  .board-footer-links { justify-content: center; }
}
@media (max-width: 899px) {
  }
.board-pick-logo.is-wide { width: 22px; }  /* MLX's wordmark */
@media (max-width: 899px) { .board-card-pick .board-pick-logo.is-wide { width: 34px; } }
/* coverage: engines down, platforms across, each cell a count over a thin bar in the engine's colour */
.cov-scroll { overflow-x: auto; scrollbar-width: none; margin-top: 4px; }
.cov-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.cov-table th, .cov-table td { height: 36px; padding: 0 12px; border-top: .5px solid var(--color-separator); }
.cov-table thead th { height: 28px; border-top: 0; font-size: 11px; font-weight: 500; color: var(--color-label-secondary); text-align: left; }
.cov-table tbody th { font-weight: 400; text-align: left; white-space: nowrap; }
.cov-name { display: inline-flex; align-items: center; gap: 6px; color: var(--color-label); }
.cov-table td { min-width: 90px; }
.cov-n { display: block; font-weight: 500; color: var(--color-label); }
.cov-track { display: block; height: 4px; margin-top: 3px; border-radius: 2px; background: var(--color-fill); overflow: hidden; }
.cov-track i { display: block; height: 100%; border-radius: 2px; }
.cov-table td.is-none { color: var(--color-label-quaternary); }
.cov-table .cov-total { font-weight: 600; color: var(--color-label); text-align: right; }
.cov-table thead th:last-child { text-align: right; }
/* Pie's gain, cell by cell: a dot per cell, green where pie is ahead and red where it trails, the row's median a short
   rule with its number; the dot under the pointer stays, the rest fade, as the bars do */
.board-axis.is-faint { opacity: .5; }
.board-cell-dot { fill: var(--color-label-tertiary); fill-opacity: .85; }
/* inside the band (20% slower to 50% faster) green, outside it red; the band's edges dotted */
.board-cell .board-cell-dot { fill: #2ea84a; fill-opacity: .75; }
.board-cell.is-outlier .board-cell-dot { fill: #e0352b; }
:root[data-theme="dark"] .board-cell .board-cell-dot { fill: #30d158; }
:root[data-theme="dark"] .board-cell.is-outlier .board-cell-dot { fill: #ff453a; }
.board-band-edge { stroke: var(--color-label-tertiary); stroke-width: 1.5; stroke-dasharray: 2 4; stroke-linecap: round; }  /* every border alike: even, and each platform's limit */
.board-cell:hover .board-cell-dot { fill-opacity: 1; stroke: var(--color-label); stroke-width: 1.5; }
.board-swarm .board-cell { transition: opacity .15s ease; }
.board-swarm:has(.board-cell:hover) .board-cell:not(:hover) { opacity: .35; }
.board-median-label { font-size: 10px; font-weight: 600; text-anchor: middle; fill: var(--color-label); font-variant-numeric: tabular-nums; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .board-swarm .board-cell { transition: none; } }

/* Pie's gain: each platform's name as the bars above name their engines; its median in a card while the pointer is on it */
.board-row-label .board-row-name { font-size: 12px; font-weight: 600; fill: var(--color-label); }  /* as the engines are named under the bars above, the same size on screen */
.board-tip-row b.is-ahead { color: var(--color-positive); }
.board-tip-row b.is-behind { color: var(--color-negative); }


/* the Outliers card's Reports button beside its setup pick, a pick's size and shape, its flag and open count */
.board-card-picks { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 6px; }  /* the setup pick, Reports under it, both at the right */
.board-pick-flag { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.board-pick-count { margin-left: 2px; color: var(--color-label-secondary); font-variant-numeric: tabular-nums; }
/* Spread: each dot in its engine's colour; one above the theoretical limit ringed in orange, a measurement to check */
.board-cell.is-over .board-cell-dot { stroke: #FF9500; stroke-width: 1.6; }
/* On one model is a different reading (one model, not the medians above): a hairline and more room set it apart */
.board-section-head.is-apart { margin-top: 18px; padding-top: 28.5px; border-top: .5px solid var(--color-separator); }  /* a divider centred in the 64px seen between sections: 32px of space on each side */

/* the welcome over the Overview, set as each section below it: its title and line with the two links at the right as
   the sections' picks, then the site's counts as the Welcome chapter's row of figures across the width */
.board-welcome { margin: 0 0 32px; }  /* 32px seen above the divider under it */
.board-welcome .board-welcome-stats { margin: 0; }
.board-welcome-actions { display: flex; flex: none; gap: 6px; margin: 0 0 -4px auto; }  /* 24px pills centred on the line, as a section's pick */
.board-welcome-actions > * { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border: 0; border-radius: var(--radius-control); font: 400 12px/1 var(--font-text); color: var(--color-label); text-decoration: none; background: var(--color-fill); cursor: pointer; white-space: nowrap; }  /* the sections' pick, "Single Decode" */
.board-welcome-actions > *:hover { background: var(--color-fill-secondary); }
.board-welcome-actions svg { width: 12px; height: 12px; fill: currentColor; }
.board-welcome-secondary svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }  /* the Bench Book's open book, as the sidebar draws it */


/* the foot: one line under the cards' grey hairline, on the page's own white */
.board-footer-simple { display: flex; flex-wrap: wrap; gap: 6px 20px; max-width: 980px; margin: 0 auto; padding: 20px var(--edge) 24px; font-size: 12px; color: var(--color-label-tertiary); }
.board-scroll > .board-footer { background: none; }  /* the sidebar's own line */
.board-footer-updated { margin-left: auto; }

/* Methodology ends on the overview's foot, set at the bottom of a short chapter */
#approach.method:not([hidden]) { display: flex; flex-direction: column; }
#approach > .board-inner { flex: none; width: 100%; }
#approach > .board-footer { margin-top: auto; background: none; }
.board-outline-head { font-weight: 400; }  /* the outlines' section names plain, as the sidebar's */
/* At a Glance: the counts as small solid chips, each in a colour of the site's palette, the figure and its word in
   white; two rows of three packed left (the effort, then the coverage), the two links stacked level with them at the right */
.board-welcome { position: relative; }
.board-welcome .board-welcome-stats { display: flex; flex-wrap: wrap; gap: 0 8px; margin-top: 20px; }
.board-welcome .board-welcome-stats::before { content: ""; order: 1; flex-basis: 100%; height: 0; }  /* the break after the third */
.board-welcome .board-welcome-stats > div, .board-welcome .board-welcome-stats > div:first-child {
  display: flex; flex: none; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 5px;
  height: 24px; padding: 0 10px; border: 0; border-radius: 6px; background: var(--chip); }
/* the figures in the buttons' grey, the number in the label's colour, its word in the secondary */
.board-welcome .board-welcome-stats > div { --chip: var(--color-fill); }
.board-welcome .board-welcome-stats > div[data-board-go-page] { cursor: pointer; transition: background-color .15s ease; }  /* each opens its page */
.board-welcome .board-welcome-stats > div[data-board-go-page]:hover { --chip: var(--color-fill-secondary); }
.board-welcome .board-welcome-stats > div[data-board-go-page]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.board-welcome .board-welcome-stats > div:nth-child(n + 4) { order: 2; margin-top: 8px; }
.board-welcome .board-welcome-stats dt { font-size: 12px; line-height: 1; color: var(--color-label-secondary); text-transform: lowercase; }
.board-welcome .board-welcome-stats dd { margin: 0; font: 600 12px/1 var(--font-text, inherit); letter-spacing: 0; color: var(--color-label); }
.board-welcome .board-welcome-actions { position: absolute; right: 0; bottom: 0; margin: 0; flex-direction: column; align-items: flex-end; gap: 8px; }
.board-welcome .board-welcome-actions > * { justify-content: flex-start; }
/* Head to Head's one bars-or-grid switch sits before the paddles, as Kernel Efficiency's setup pick does */
.board-section-head > .board-view:not(.board-carousel-nav) { flex: none; margin: 0 -8px 0 auto; }  /* 8px from the paddles, as the setup pick sits from them */
.board-section-head > .board-view:not(.board-carousel-nav) + .board-carousel-nav { margin-left: 0; }
.board-section-head > .board-view:not(.board-carousel-nav):last-child { margin-right: 0; }
.board-section-head > .board-title-pick + .board-view:not(.board-carousel-nav) { margin-left: -8px; }  /* a pick then the view switch, 8px apart, as How we count sits from its paddles */  /* with no paddles after it, it meets the edge as they do */
.board-section-head > .board-title-pick + .board-title-pick { margin-left: -8px; }  /* two picks side by side 8px apart, as a pick and its paddles */
.board-title-pick.is-text { padding: 0 10px; }  /* a button with only a word: the same room at both ends */
.board-card.board-compare, #board-support { padding-left: 11px; padding-right: 11px; }  /* inset as the other sections' platform cards */
.board-compare .board-chart { margin-left: calc(2.63% - 1.2px); width: calc(97.37% + 1.2px); }  /* its axis where theirs is: 24 of 456 units of a half-row card */
@media (max-width: 899px) { .board-compare .board-chart { margin-left: 5.26%; width: 94.74%; } }  /* a phone's cards fill the row */
.board-compare .board-title-dot { display: none; }  /* the platform is named in the head's pick: no colour square to read */
.board-compare .board-sub:empty { display: none; }
.board-compare h2 > .board-title-dot { display: none; }  /* the platform tile stands in for the title dot */
.board-compare h2 > .sidebar-glyph[style] { margin-left: 0; }  /* the platform tile flush with the card edge, the name after it */
.board-compare-name { display: inline-flex; align-items: center; gap: 6px; text-decoration: underline dotted var(--color-label-tertiary); text-underline-offset: 4px; cursor: help; outline-offset: 2px; }  /* the specs wait on hover */
.board-compare-info { width: 13px; height: 13px; fill: none; stroke: var(--color-label-tertiary); stroke-width: 1.3; stroke-linecap: round; }
.board-compare .board-card-head { align-items: baseline; margin-bottom: 16px; }  /* the link on the machine name's line */
.board-compare .board-card-side { align-self: baseline; }
.board-compare .board-chart.is-narrow { display: none; }
@media (max-width: 899px) { .board-compare .board-chart.is-wide { display: none; } .board-compare .board-chart.is-narrow { display: block; } }  /* a phone draws the half-card chart, its words at their size */
.board-compare-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 160px; text-align: center; }  /* a headline and one plain line, centred in the card */
.board-compare-empty b { font-size: 13px; font-weight: 600; color: var(--color-label); }
.board-compare-empty span { font-size: 13px; color: var(--color-label-secondary); }
.board-compare-empty .platform-nofit { width: 20px; height: 20px; margin-bottom: 4px; stroke: var(--color-label-tertiary); }
@media (max-width: 899px) { .board-section-head:has(> .board-title-pick + .board-title-pick) { column-gap: 8px; row-gap: 8px; } .board-section-head:has(> .board-title-pick + .board-title-pick) > .board-title-pick + .board-title-pick { margin-left: 0; } }  /* phones: Compare's four picks wrap 8px apart, each line from the same edge */
.board-footer-simple { font-size: 12px; color: var(--color-label-secondary); }  /* the update date in the section ledes' size and grey */
.board-footer-simple { font-size: 11px; }  /* the update date at the cards' subtitle size */

/* the page's head: the title in bold without a stop, then a plain sentence under it, smaller and lighter */
.board-welcome .board-welcome-title { display: block; font-size: 24px; line-height: 1.2; letter-spacing: -.015em; }
.board-welcome .board-welcome-sub { margin: 6px 0 0; font-size: 15px; line-height: 1.4; color: var(--color-label-secondary); }
@media (max-width: 599px) { .board-welcome .board-welcome-title { font-size: 21px; } }
/* on a narrow screen the two links leave the pills' corner for a row of their own under them */
@media (max-width: 760px) {
  .board-welcome { display: flex; flex-direction: column; }
  .board-welcome > .board-section-head { display: contents; }
  .board-welcome .board-welcome-stats { order: 1; }
  .board-welcome .board-welcome-actions { order: 2; position: static; flex-direction: row; align-self: flex-start; margin: 16px 0 0 -8px; }
}
/* Platform Support: a segment per platform in its colour, its name in white, an empty slot for each one missing */

/* Platform Support in the head-to-head grids' own tiles, scale and labels (.board-matrix): its frame grows with its rows
   instead of their fixed height, the platform tiles small in the logos' slots, the count of platforms a quiet last column */
.board-matrix-frame.is-support { height: auto; padding: 4px 28px 18px 0; }
#board-support + .board-section-head { margin-top: 32px; }
.board-matrix.is-support td.is-ran { --tile: var(--color-fill); }  /* a check on the grey tile: ran here */
.board-support-check { width: 12px; height: 12px; vertical-align: middle; fill: none; stroke: #34C759; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }  /* its keys end the card close under the grid, so the line comes sooner */
.board-support-keys { position: absolute; left: 0; bottom: 1px; display: flex; gap: 12px; font-size: 9px; line-height: 1; color: var(--color-label-secondary); }  /* at the foot's left, as Speculative sits */
.board-support-keys span { display: inline-flex; align-items: center; gap: 4px; }
.board-support-keys i { width: 12px; height: 8px; border-radius: 2px; background: var(--color-fill); }
.board-support-keys i.is-blank { background: none; box-shadow: inset 0 0 0 .5px var(--color-label-tertiary); }
.board-matrix.is-support .sidebar-glyph { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 4px; background: var(--tint); box-shadow: inset 0 0 0 .5px rgba(128, 128, 128, .4); }  /* a hairline keeps Mobile's black tile on a dark page */
.board-matrix.is-support .sidebar-glyph svg { width: 9px; height: 9px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.board-matrix.is-support .sidebar-glyph svg .is-filled { fill: #fff; stroke: none; }
.board-matrix.is-support td.board-matrix-total { padding-left: 6px; font-weight: 400; color: var(--color-label-secondary); }
.board-matrix.is-support thead .board-matrix-total { padding-left: 6px; vertical-align: bottom; }
@media (max-width: 599px) {
  /* a phone keeps the tiles and the names: the scale and the count go, the tiles narrow, the grid starts at the left */
  .board-matrix-frame.is-support { justify-content: flex-start; padding-right: 0; }
  .board-matrix-frame.is-support .board-matrix-key, .board-matrix.is-support .board-matrix-total { display: none; }
  .board-matrix.is-support td { width: 34px; min-width: 34px; max-width: 34px; }
}