/* Web edition layout. Light theme, matching dogbench.ai. Works from 320 px up with the navigation bar's 18 px
   side gutter. Type sizes come from the scale in base.css. The hero and the chapter cards' numerals, headings,
   and tile numbers are their own display type, in multiples of the body size. */

/* dogbench.ai's own font stacks, so the guide reads as part of the site. */
:root {
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --pl-font-sans: var(--sans);
  --pl-font-display: var(--sans);
  --pl-font-mono: var(--mono);
  /* SVG charts render at a fixed width, so their text lands on the scale: 600 px (1 px per unit), and 744 px in
     a wide figure once the main column is 744 px wide. Below 636 px they pan inside their frame. */
  --svg-w: 600px; --svg-k: 1;
  /* The hero, the page layout, and the footer share the navigation bar's content edges (.nav-inner in nav.css):
     at most 1080 px wide, with 24 px side padding, or 18 px at 900 px and below. */
  --edge-max: 1080px; --edge-pad: 24px;
}
@media (max-width: 900px) {
  :root { --edge-pad: 18px; }
}

html { scroll-padding-top: 76px; }
/* The contents rail and the footer take the small step. */
.toc-rail ol, footer.site-footer { font-size: var(--type-small); line-height: var(--leading-small); }
body { background: #fff; }
/* The site's navigation bar keeps the focus ring it has on every site page. */
:is(a, summary, button):focus-visible:not(.nav *) { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* The skip link shows over the navigation bar, which nav.css stacks at z-index 20. */
.skip { position: absolute; left: -9999px; top: 8px; background: var(--navy); color: #fff; padding: 8px 12px; border-radius: 6px; z-index: 30; }
.skip:focus { left: 16px; }

/* Hero */
.hero { background: var(--panel); position: relative; overflow: hidden; }
.hero .inner { max-width: var(--edge-max); margin: 0 auto; padding: 72px var(--edge-pad) 64px; position: relative; }
.hero .paws { position: absolute; right: -40px; top: -20px; width: 520px; height: 520px; }
.hero .paws path, .hero .paws ellipse { fill: var(--pl-brand-200); }
.hero h1 { font-size: clamp(2.1 * var(--type-body), 5vw, 3.4 * var(--type-body)); line-height: 1.05; letter-spacing: -0.035em; max-width: 15em; position: relative; }
.hero .subtitle { font-size: calc(1.35 * var(--type-body)); color: var(--panel-ink); font-weight: 500; margin-top: 12px; position: relative; }
.hero .lockup { margin-top: 28px; color: var(--ink-soft); font-weight: 500; position: relative; }
.hero .pl-wordmark { --wordmark-h: 1.84em; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; position: relative; }
.hero .actions a { font-weight: 600; text-decoration: none; padding: 10px 16px; border-radius: 8px; }
.hero .actions .primary { background: var(--accent); color: #fff; }

/* Page layout: the contents rail and the main column, inside the navigation bar's content edges. Every block in the
   main column starts at its left edge. Text keeps a measure of at most 640 px, about 70 characters at the body size,
   and the blocks that span the column end at its right edge: chapter openers, wide figures, tables, and callouts.
   At 900 px and below, the contents and the main column share one column. */
.layout { --rail: 256px; --main: 744px; --gap: 32px; --measure: 640px; max-width: var(--edge-max); margin: 0 auto; padding: 0 var(--edge-pad); display: grid; grid-template-columns: minmax(0, 1fr); }
:is(.chapter-body, .back-body, .with-note) > :not(.fig.wide, table, .with-note, .why, .callout, .example) { max-width: var(--measure); }
.toc-rail { padding: 24px 0 0; }
.toc-rail details { border: 1px solid var(--rule); border-radius: 10px; padding: 10px 14px; }
.toc-rail summary { font-weight: 600; cursor: pointer; }
.toc-rail ol { list-style: none; padding: 0; margin: 0; }
.toc-rail .toc-groups { margin-top: 14px; }
.toc-rail .toc-groups > li { margin: 0 0 18px; }
.toc-rail .toc-groups > li:last-child { margin-bottom: 4px; }
.toc-rail .toc-group { display: block; margin-bottom: 8px; font-family: var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
/* A chapter number is one tabular figure, 1ch wide, and a word space (0.25em) sets it off from its title. The title sits in its own grid column, so a wrapped title hangs under its first letter. */
.toc-rail li li { display: grid; grid-template-columns: auto 1fr; column-gap: 0.25em; align-items: baseline; margin: 0 0 10px; }
.toc-rail li.back { grid-template-columns: 1fr; }
.toc-rail li .n { width: 1ch; font-family: var(--mono); color: var(--accent-text); }
.toc-rail a { color: var(--ink-soft); text-decoration: none; }
.toc-rail a:hover { color: var(--accent-text); }
/* The main column is a size container, so a wide SVG chart scales up only when the column has room for it. */
main { min-width: 0; padding-bottom: 96px; container-type: inline-size; }


/* Typography */
.chapter-body h3, main h2.front, main h2.back { margin: 52px 0 14px; }
main figure.front { margin-top: 52px; }
.chapter-body > h4 { margin: 36px 0 8px; }
.chapter-body > h3:first-child { margin-top: 40px; }
.chapter, .back-matter { margin-top: 64px; }

/* Openers become hero cards */
.opener { border-radius: 18px; padding: 40px 32px 32px; margin: 0; }
.opener .chapter-num { font-weight: 900; font-size: calc(4.5 * var(--type-body)); line-height: 0.9; letter-spacing: -0.04em; margin-bottom: 14px; }
.opener h2 { font-size: clamp(1.8 * var(--type-body), 4vw, 2.5 * var(--type-body)); line-height: 1.1; letter-spacing: -0.03em; max-width: 18em; }
.opener .lede { margin-top: 16px; max-width: 34em; }
.opener .tiles { margin-top: 32px; flex-wrap: wrap; }
.opener .tile { min-width: 200px; }
.opener .tile b { font-size: calc(3.6 * var(--type-body)); margin-bottom: 8px; }
/* The paw band ends above the chapter heading, which starts 123 px down the card (107 px on phones). */
.opener .paws { width: 275px; height: 110px; right: 8px; top: 4px; }

/* Figures and components */
.fig { margin: 48px 0 52px; }
.fig-head { margin-bottom: 20px; }
.fig-title { font-weight: 800; letter-spacing: -0.025em; }
.fig-note { margin-top: 16px; }
.fig-data { margin-top: 10px; }
.fig-body > svg { width: var(--svg-w); max-width: none; }
.bars { --bar-h: 20px; --bar-gap: 20px; }
.bars.stack { --bar-h: 34px; --bar-gap: 20px; }
.bars.dense { --bar-gap: 14px; }
.bar-label small { margin-top: 2px; }
.score-agent small { margin-top: 2px; }
.stat span { margin-top: 4px; }
.glance .stat span { margin-top: 0; }
.card { padding: 14px 16px; }
.card .catch { padding: 10px 12px; }
.chip { padding: 4px 12px; margin: 0 4px 6px 0; }
.doc-head { padding: 10px 14px; }
.pants-flow { padding: 16px 20px; }
.doc-body { padding: 8px; }
.doc-line { padding: 3px 6px; }
.mark-n { width: 26px; height: 26px; }
.notes-list li { margin-bottom: 10px; }
.callout { padding: 24px 28px; }
.example { padding: 16px 20px; }
.why { padding: 20px 28px 22px; margin: 28px 0 32px; }
.why .label { margin-bottom: 8px; }
.why .why-stat { column-gap: 20px; padding: 12px 0; }
.why p { margin: 14px 0 0; }
.checklist h4 { margin: 22px 0 8px; }
.checklist li { margin-bottom: 8px; }
.checklist .box { width: 14px; height: 14px; margin-top: 5px; }
.questions dt { margin-top: 18px; }
.glossary { row-gap: 10px; }
.link-card { padding: 12px 16px; }
.link-card svg { width: 96px; height: 96px; }
table.leaderboard tbody th, table.leaderboard tbody td { padding-top: 10px; padding-bottom: 10px; }
.fig-body .scroll { overflow-x: auto; }
.cover, .front-page, .print-only { display: none !important; }
footer.site-footer { border-top: 1px solid var(--rule); color: var(--muted); }
footer.site-footer .inner { max-width: var(--edge-max); margin: 0 auto; padding: 24px var(--edge-pad); display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }

@media (max-width: 640px) {
  :root.web { --type-title: 26px; }
  /* Bar charts put each label above its bar, so the bar gets the full width. SVG charts keep a readable
     size and pan inside their frame; the page itself never scrolls sideways. */
  .fig-body:has(> svg) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bar-row { grid-template-columns: minmax(0, 1fr) var(--value-w); row-gap: 6px; }
  .bar-row .bar-label { grid-column: 1 / -1; }
  .bar-row .bar-sub { order: 1; margin-top: -6px; }
  .bar-row .bar-track { order: 2; }
  .bar-row .bar-value { order: 3; }
  .bars.stack .bar-row { grid-template-columns: minmax(0, 1fr); }
  .bars { --bar-gap: 18px; }
  .score-table { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .score-head > :first-child { display: none; }
  .score-row > .score-agent { grid-column: 1 / -1; padding-bottom: 0.2em; }
  .score-row > .score-agent ~ * { border-top: 0; padding-top: 0; }
  /* The glossary sets each term over its definition, so the definition gets the full width. */
  .glossary { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .glossary dd { margin-bottom: 14px; }
  .opener .tile b { font-size: calc(2.9 * var(--type-body)); }
  /* The leaderboard turns each row into a block: the agent and its composite score, then its three other measures. */
  table.leaderboard thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.leaderboard, table.leaderboard tbody { display: block; }
  table.leaderboard tbody tr { display: grid; grid-template-columns: 1.4em repeat(3, minmax(0, 1fr)); column-gap: 10px; row-gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  table.leaderboard tbody th, table.leaderboard tbody td { padding: 0; }
  table.leaderboard td.rank { grid-column: 1; grid-row: 1; }
  table.leaderboard th[scope="row"] { grid-column: 2 / 4; grid-row: 1; }
  table.leaderboard td.composite { grid-column: 4; grid-row: 1; font-size: var(--type-value); }
  table.leaderboard td[data-label] { grid-row: 2; align-self: end; text-align: left; }
  table.leaderboard td:nth-child(4) { grid-column: 2; }
  table.leaderboard td:nth-child(5) { grid-column: 3; }
  table.leaderboard td:nth-child(6) { grid-column: 4; }
  table.leaderboard td[data-label]::before { content: attr(data-label); display: block; font-family: var(--sans); font-size: var(--type-small); line-height: var(--leading-small); color: var(--muted); margin-bottom: 2px; }
  .pf-grid { grid-template-columns: 1fr; row-gap: 0.6em; }
  .pf-arrow { transform: rotate(90deg); justify-self: center; }
  .pf-rules, .docs-pair, .cards.three, .cards.two-uneven, .tiles-grid.glance, .tiles-grid.three, ol.path { grid-template-columns: 1fr; }
  .glance .stat, .person { grid-template-columns: 1fr; }
  .glance .stat span { margin-top: 6px; }
  .glance .stat a { text-align: left; margin-top: 4px; }
  .opener .tile { min-width: 0; }
  .opener { padding: 28px 20px 24px; border-radius: 14px; }
  /* On a 320 px phone, a narrower band keeps the paws right of the numeral. */
  .opener .paws { width: 190px; height: 76px; }
  .opener .tiles { gap: 16px; }
  /* Each stat in a "why it matters" note sets its number over its words, so the words get the note's full width. */
  .why { padding: 18px 20px 20px; }
  .why .why-stat { flex-direction: column; align-items: flex-start; row-gap: 6px; }
  .why .why-stat b { flex: none; }
  .hero .paws { opacity: 0.45; right: -200px; }
}

/* The case study's four stages stack in reading order below 768 px, where two cards to a row get too narrow. */
@media (max-width: 767px) {
  .cards.stages { grid-template-columns: minmax(0, 1fr); }
}

/* From 901 px, the contents rail sits beside the main column. The main column takes up to 744 px first, and the
   rail takes the rest, from 180 px up to 256 px. At the full 1032 px content width, from a 1080 px window up, that
   is a 256 px rail, a 32 px gap, and a 744 px main column. At 256 px, no entry in the rail runs past two lines. At
   901 px the main column is 641 px, so text keeps its full measure at every width. */
@media (min-width: 901px) {
  .layout { grid-template-columns: clamp(180px, 100% - var(--gap) - var(--main), var(--rail)) minmax(0, 1fr); column-gap: var(--gap); }
  .toc-rail { position: sticky; top: 76px; align-self: start; max-height: calc(100vh - 96px); overflow: auto; padding-top: 48px; }
  .toc-rail details { border: 0; padding: 0; }
  .toc-rail summary { list-style: none; font-family: var(--mono); font-size: var(--type-small); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
  .toc-rail summary::-webkit-details-marker { display: none; }
}

/* The reading guide's panels are cards, one to a row, and two to a row once the main column is 600 px wide. */
.explainer { gap: 16px; }
.ex-panel { grid-template-rows: auto auto 1fr auto; row-gap: 10px; border: 1px solid var(--rule); border-radius: 12px; padding: 18px 20px 20px; }
/* The text's wrapper dissolves, so the label, the claim, and the caption are the card's rows, and the diagram sets
   between the claim and the caption. */
.ex-diagram { order: 3; }
.ex-caption { order: 4; }
.ex-text { display: contents; }
.ex-text > .label { order: 1; }
.ex-claim { order: 2; }
.ex-diagram { padding: 6px 0 4px; align-self: center; }
.ex-head, .ex-crit, .ex-result { padding: 5px 10px; }
.ex-composite { row-gap: 8px; }
.ex-measure { --bar-h: 12px; row-gap: 2px; }
.ex-eq { margin-bottom: 14px; }
.ex-chip { padding: 6px 0; }
.ex-agent .ex-k { margin-bottom: 6px; }
.ex-pairs { row-gap: 2px; }
.ex-split { column-gap: 20px; }
.ex-split .ex-units { width: 190px; }
.ex-pill { padding: 3px 10px; margin-top: 8px; }
@container (min-width: 600px) {
  .explainer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A wide SVG chart fills a main column of 744 px or more, at 1.24 px per unit. */
@container (min-width: 744px) {
  .fig.wide { --svg-w: 744px; --svg-k: 1.24; }
}