/* ==========================================================================
   DGF-Bench website: page styles for get-started.html and about.html only.
   Loaded after site.css. Uses the tokens of site.css; no hard-coded colours.
   ========================================================================== */

/* On-this-page navigation (hero of get-started.html) */
.toc {
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.toc__title {
  margin: 0 0 var(--sp-2);
  color: var(--c-muted);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.toc ol { margin: 0; padding: 0; list-style: none; column-gap: var(--sp-6); }
@media (min-width: 560px) { .toc ol { columns: 2; } }
@media (min-width: 960px) { .toc ol { columns: 3; } }
.toc li { break-inside: avoid; padding: 3px 0; }
.toc a { font-weight: 600; text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.toc__step { display: inline-block; min-width: 1.6em; color: var(--c-muted); font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Hero actions under the lede */
.guide-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-5); }

/* Detailed process steps: several blocks per step */
.steps--detailed > li > * + * { margin-top: var(--sp-3); }
.steps--detailed > li > .steps__title + * { margin-top: 0; }
.steps--detailed ul { padding-left: 1.3em; color: var(--c-text-2); }
.steps--detailed ul li + li { margin-top: var(--sp-1); }

/* Console line printed by the command (a quoted line of output) */
.console {
  padding: 8px 12px;
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-primary);
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.console samp { font-size: inherit; }

/* Sub-blocks inside a section */
.subsection { margin-top: var(--sp-7); }
.subsection > h3 + * { margin-top: var(--sp-3); }
.subsection > * + * { margin-top: var(--sp-4); }
.flow > * + * { margin-top: var(--sp-4); }
.flow { max-width: 72ch; }
.flow ul, .flow ol { padding-left: 1.4em; }
.flow li + li { margin-top: var(--sp-2); }
.flow li::marker { color: var(--c-muted); }

/* Routes shown as gate chains */
.route-set { display: grid; gap: var(--sp-4); }

/* Creator block (about.html#creator) */
.creator {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 720px) {
  .creator { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: var(--sp-6); }
}
.creator__mark {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--c-primary-soft);
  color: var(--c-high-text);
  font-size: 1.5rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}
.creator__body > * + * { margin-top: var(--sp-3); }
.creator__name { font-size: 1.5rem; line-height: 1.2; }
.creator__text { color: var(--c-text-2); max-width: 60ch; }
.creator .btn-row { margin-top: var(--sp-4); }
.creator .btn { white-space: normal; overflow-wrap: anywhere; text-align: left; }

/* Release list */
.version-tag { font-family: var(--font-mono); font-weight: 700; color: var(--c-ink); }

/* Anchored sections land below the sticky header */
main [id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* Readable measure for step text; bullets inside the steps */
.steps--detailed > li > p:not(.console), .steps--detailed > li > ul { max-width: 78ch; }
.steps--detailed ul { list-style: disc; }

/* Compact gate chains so a six-gate route fits one line in a half-width column */
.route-set .route__gate { font-size: 0.8125rem; min-height: 36px; padding: 4px 10px; }

/* Stat strip: keep the divider between the 2nd and 3rd stat when the strip is one row
   (site.css removes it with .stat:nth-child(2n) at every width). */
@media (min-width: 880px) {
  .stats .stat:nth-child(2n) { border-right: 1px solid var(--c-line); }
  .stats .stat:last-child { border-right: 0; }
}

/* Steps holding code blocks: let the single grid column shrink below the code's width
   (site.css .steps is a grid whose items default to min-width: auto). */
.steps--detailed { grid-template-columns: minmax(0, 1fr); }
.steps--detailed > li { min-width: 0; }

/* Tables: long row headers may wrap, so the other columns keep room on phones. */
.table tbody th[scope="row"] { white-space: normal; }
@media (max-width: 639px) {
  .table tbody th[scope="row"] { min-width: 7.5rem; }
}

/* Stacked tables on phones (options of dgf-bench run, attack ids): one block per row.
   The markup carries explicit table roles, so the semantics survive the display change. */
@media (max-width: 639px) {
  .table--stack thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack th, .table--stack td { display: block; }
  .table--stack tbody tr { padding: 10px 14px; border-bottom: 1px solid var(--c-line); }
  .table--stack tbody tr:last-child { border-bottom: 0; }
  .table--stack tbody th, .table--stack tbody td { min-width: 0; padding: 2px 0; border: 0; text-align: left; white-space: normal; background: none; }
  .table--stack.table--zebra tbody tr:nth-child(even) { background: var(--c-surface-2); }
  .table--stack.table--zebra tbody tr:nth-child(even) > * { background: none; }
  .table--stack td[data-label]::before { content: attr(data-label) ": "; color: var(--c-muted); font-size: 0.875rem; }
  .table--stack td:empty { display: none; }
  .table--ids tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
  .table--ids tbody td.num { min-width: 1.5rem; color: var(--c-muted); }
}

/* Phones: commands, messages, the canary string and the BibTeX entry wrap instead of being cut
   at the screen edge (copy buttons copy the original lines). The run-directory tree keeps its
   columns and scrolls. */
@media (max-width: 559px) {
  .code-block pre { padding-inline: var(--sp-4); white-space: pre-wrap; overflow-wrap: anywhere; }
  .code-block--tree pre { white-space: pre; overflow-wrap: normal; }
}
/* Command tokens such as --dossier-number or z-ai/glm-5.3 wrap as a whole, never after a hyphen. */
.code-block pre .nw { white-space: nowrap; }

/* About: the routes figure is as wide as its longest chain */
.route-figure { width: fit-content; max-width: 100%; }

/* About, "What DGF-Bench is": from 1200px the routes figure sits beside the prose instead of
   below it (it left the right part of the section empty); its chains get a little tighter so
   the six-gate Buy route stays on one line. */
@media (min-width: 1200px) {
  .about-what { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-7); align-items: start; }
  .about-what .route-figure { margin-top: 3.5rem; }
  .about-what .route-figure figcaption { width: 0; min-width: 100%; }  /* the chains, not the caption, set the width */
  .about-what .route__gate { padding-inline: 8px; }
  .about-what .route__gate + .route__gate { margin-left: 22px; }
  .about-what .route__gate + .route__gate::before { left: -19px; width: 15px; }
}