/* ==========================================================================
   vdm.css - VideoDistanceMarking documentation skin
   --------------------------------------------------------------------------
   Loaded only by the pages under /tournament/vdm/, always AFTER the site-wide
   /styles.css. It supplies the documentation treatments the site shell lacks
   (callouts, code blocks, doc tables, cards, badges, download blocks) and
   re-tames the few site defaults that are sized for marketing heroes rather
   than for long technical prose.

   HARD RULE: /styles.css is the site-wide stylesheet and must NEVER be edited
   to accommodate these pages. Everything the docs need lives here, and every
   selector below is scoped under .vdm-doc or .vdm-docnav so no rule can leak
   onto any other page of the site.

   Colours come from the site design tokens on :root in styles.css. Semantic
   mapping: note -> --brand, tip -> --green, warn -> --gold,
   critical -> --accent. Tints are derived with color-mix(); each tinted rule
   carries a plain fallback declaration first for older engines.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Doc shell. .case-section already sets max-width + horizontal padding,
   so we only add vertical room and a reading measure for prose children.
   -------------------------------------------------------------------------- */
.vdm-doc {
  --vdm-measure: 74ch;
  --vdm-mono: Consolas, "Cascadia Mono", "Cascadia Code", Menlo,
              "SFMono-Regular", "Liberation Mono", monospace;
  --vdm-anchor-offset: 6.5rem;
  padding-bottom: 3.5rem;
}

/* .case-section > p mutes and enlarges every direct paragraph, which is wrong
   for documentation body copy. Restore normal ink at a readable measure. */
.case-section.vdm-doc > p {
  max-width: var(--vdm-measure);
  margin-bottom: 1rem;
  color: var(--ink);
  font-size: 1rem;
}

.vdm-doc > ul,
.vdm-doc > ol,
.vdm-doc > dl { max-width: var(--vdm-measure); }

/* Intro paragraph directly under the h1. */
.case-section.vdm-doc > .page__lede,
.vdm-doc .page__lede {
  max-width: var(--vdm-measure);
  margin: 0 0 2rem;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   2. Section navigation. Wraps freely; Downloads is the primary CTA.
   -------------------------------------------------------------------------- */
.vdm-docnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.4rem;
  margin: 0 0 2rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}

.vdm-docnav a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.3rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  font: 650 0.92rem/1.4 inherit;
  text-decoration: none;
  white-space: nowrap;
}

.vdm-docnav a:hover {
  background: var(--brand-soft);
  border-color: var(--brand-soft);
  color: var(--brand-dark);
}

.vdm-docnav a[aria-current="page"] {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-dark);
  font-weight: 800;
}

.vdm-docnav .vdm-docnav-dl {
  margin-left: auto;
  padding: 0.35rem 1rem;
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 800;
}

.vdm-docnav .vdm-docnav-dl::before { content: "\2193"; margin-right: 0.4rem; }

.vdm-docnav .vdm-docnav-dl:hover,
.vdm-docnav .vdm-docnav-dl[aria-current="page"] {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}

/* --------------------------------------------------------------------------
   3. Headings and prose. scroll-margin-top keeps the ~70 in-page #anchor
   links clear of the sticky site header.
   -------------------------------------------------------------------------- */
.vdm-doc h1,
.vdm-doc h2,
.vdm-doc h3,
.vdm-doc h4 {
  color: var(--ink);
  line-height: 1.25;
  scroll-margin-top: var(--vdm-anchor-offset);
}

.vdm-doc h1 { margin: 0 0 0.5rem; font-size: clamp(1.95rem, 3.2vw, 2.65rem); line-height: 1.15; }

.vdm-doc h2 {
  margin: 2.75rem 0 0.9rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.4rem, 2.1vw, 1.7rem);
}

.vdm-doc h3 { margin: 2rem 0 0.6rem; font-size: 1.15rem; }
.vdm-doc h4 { margin: 1.5rem 0 0.45rem; color: var(--brand-dark); font-size: 1rem; font-weight: 700; }
.vdm-doc p { margin-bottom: 1rem; }

.vdm-doc a {
  color: var(--brand-dark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.16em;
}

.vdm-doc a:hover { color: var(--accent); }
.vdm-doc hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--line); }
.vdm-doc strong { font-weight: 700; }
.vdm-doc abbr[title] { text-decoration: underline dotted; cursor: help; }

/* --------------------------------------------------------------------------
   4. Lists
   -------------------------------------------------------------------------- */
.vdm-doc ul,
.vdm-doc ol { margin: 0 0 1.1rem; padding-left: 1.5rem; }

.vdm-doc li { margin-bottom: 0.4rem; }

.vdm-doc li > ul,
.vdm-doc li > ol { margin-top: 0.4rem; margin-bottom: 0; }

.vdm-doc dl { margin: 0 0 1.5rem; padding: 0; }
.vdm-doc dt { margin-top: 0.7rem; color: var(--ink); font-weight: 700; }
.vdm-doc dd { margin: 0.15rem 0 0; color: var(--muted); }

/* Ordered "start here" path. */
.vdm-doc .steps { max-width: var(--vdm-measure); margin: 0 0 2rem; padding-left: 1.5rem; }
.vdm-doc .steps > li { margin-bottom: 0.8rem; padding-left: 0.25rem; }
.vdm-doc .steps > li::marker { color: var(--brand); font-weight: 800; }

/* --------------------------------------------------------------------------
   5. Code. pre blocks carry ASCII pipeline diagrams: never wrap, scroll.
   Inline code is deliberately lighter than a pre block.
   -------------------------------------------------------------------------- */
.vdm-doc code {
  padding: 0.1em 0.36em;
  border-radius: 4px;
  background: var(--surface-strong);
  background: color-mix(in srgb, var(--brand) 7%, var(--surface-strong));
  color: var(--brand-dark);
  font-family: var(--vdm-mono);
  font-size: 0.88em;
}

.vdm-doc pre {
  margin: 0 0 1.4rem;
  padding: 0.95rem 1.05rem;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: pre;
  tab-size: 4;
  line-height: 1.5;
}

.vdm-doc pre code {
  display: block;
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--ink);
  font-size: 0.86rem;
  white-space: pre;
}

.vdm-doc kbd {
  padding: 0.1em 0.42em;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--vdm-mono);
  font-size: 0.82em;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   6. Tables. Authored inside .table-wrap so a wide table scrolls itself and
   never makes the page scroll sideways.
   -------------------------------------------------------------------------- */
.vdm-doc .table-wrap {
  margin: 0 0 1.6rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.vdm-doc table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.vdm-doc .table-wrap table { min-width: 34rem; }

.vdm-doc caption {
  caption-side: top;
  padding: 0.6rem 0.85rem;
  color: var(--muted);
  font: italic 0.88rem/1.5 inherit;
  text-align: left;
}

.vdm-doc th,
.vdm-doc td {
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.vdm-doc thead th {
  background: var(--surface-strong);
  background: color-mix(in srgb, var(--brand) 8%, var(--surface-strong));
  border-bottom: 2px solid var(--line);
  color: var(--ink);
  font-weight: 800;
  white-space: nowrap;
}

.vdm-doc tbody tr:nth-child(even) { background: var(--surface-strong); }
.vdm-doc tbody tr:last-child td { border-bottom: 0; }

.vdm-doc td code,
.vdm-doc th code { white-space: nowrap; }

/* Settings-key reference tables: the first column is a config key. */
.vdm-doc .keys td:first-child { white-space: nowrap; font-weight: 650; }

/* --------------------------------------------------------------------------
   7. Callouts: note -> brand, tip -> green, warn -> gold, critical -> accent
   -------------------------------------------------------------------------- */
.vdm-doc .callout {
  margin: 0 0 1.5rem;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 5px solid var(--muted);
  border-radius: var(--radius);
  color: var(--ink);
}

.vdm-doc .callout > :last-child { margin-bottom: 0; }
.vdm-doc .callout a { font-weight: 700; }

.vdm-doc .callout__title {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.vdm-doc .callout--note {
  background: var(--brand-soft);
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
  border-left-color: var(--brand);
}
.vdm-doc .callout--note .callout__title { color: var(--brand-dark); }

.vdm-doc .callout--tip {
  background: var(--surface-strong);
  background: color-mix(in srgb, var(--green) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--green) 30%, var(--line));
  border-left-color: var(--green);
}
.vdm-doc .callout--tip .callout__title { color: var(--green); }

.vdm-doc .callout--warn {
  background: var(--surface-strong);
  background: color-mix(in srgb, var(--gold) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--gold) 35%, var(--line));
  border-left-color: var(--gold);
}
.vdm-doc .callout--warn .callout__title { color: var(--gold); }

.vdm-doc .callout--critical {
  background: var(--surface-strong);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  border-left: 6px solid var(--accent);
}
.vdm-doc .callout--critical .callout__title { color: var(--accent); }

/* Machine-specific values get their own unmistakable frame. */
.vdm-doc .machine-block {
  margin: 2rem 0;
  padding: 1.2rem 1.3rem 0.6rem;
  background: var(--surface);
  background: color-mix(in srgb, var(--brand) 5%, var(--surface));
  border: 2px solid var(--brand-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.vdm-doc .machine-block > h2,
.vdm-doc .machine-block > h3 { margin-top: 0; color: var(--brand-dark); border-bottom-color: var(--brand); }
.vdm-doc .machine-block .table-wrap { border-color: var(--brand); }

/* --------------------------------------------------------------------------
   8. Card grid
   -------------------------------------------------------------------------- */
.vdm-doc .cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
  margin: 0 0 2rem;
  padding: 0;
  max-width: none;
  list-style: none;
}

.vdm-doc .cards li { margin: 0; }

.vdm-doc .card {
  display: block;
  height: 100%;
  padding: 1rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 18px rgba(23, 32, 51, 0.05);
  color: var(--ink);
  font-weight: 400;
  text-decoration: none;
}

.vdm-doc .card:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--ink); }
.vdm-doc .card__title { display: block; margin-bottom: 0.3rem; color: var(--brand-dark); font-weight: 800; }
.vdm-doc .card__desc { display: block; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }

/* --------------------------------------------------------------------------
   9. Badges - load-bearing editorial signals, deliberately not subtle
   -------------------------------------------------------------------------- */
.vdm-doc .badge {
  display: inline-block;
  padding: 0.08rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

/* "verify on target hardware": gold frame + amber fill + ink text, so it is
   high-contrast and impossible to skim past. */
.vdm-doc .badge--verify {
  background: #fdf3e0;
  background: color-mix(in srgb, var(--gold) 20%, var(--surface));
  border: 2px solid var(--gold);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   10. Table of contents
   -------------------------------------------------------------------------- */
.vdm-doc .toc {
  max-width: var(--vdm-measure);
  margin: 0 0 2rem;
  padding: 0.95rem 1.15rem 0.95rem 2.2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  font-size: 0.95rem;
}

.vdm-doc .toc li { margin-bottom: 0.3rem; }
.vdm-doc .toc a { font-weight: 650; text-decoration: none; }
.vdm-doc .toc a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   11. Downloads
   -------------------------------------------------------------------------- */
.vdm-doc .vdm-dl-card {
  margin: 1.5rem 0 2rem;
  padding: 1.25rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 6px solid var(--brand);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.vdm-doc .vdm-dl-card > :first-child { margin-top: 0; }
.vdm-doc .vdm-dl-card > :last-child { margin-bottom: 0; }

.vdm-doc .vdm-dl-list { margin: 0.75rem 0 0; padding: 0; max-width: none; list-style: none; }
.vdm-doc .vdm-dl-list > li { margin: 0; padding: 0.55rem 0; border-top: 1px solid var(--line); }
.vdm-doc .vdm-dl-list > li:first-child { border-top: 0; }
.vdm-doc .vdm-dl-list a { font-weight: 800; }

.vdm-doc .vdm-dl-verify {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 0.92rem;
}

/* Artifact table: file / size / SHA-256. */
.vdm-doc .vdm-dl-table td:first-child { font-weight: 650; }
.vdm-doc .vdm-dl-table td:nth-child(2) { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 64-char digests must wrap rather than blow out the layout on mobile.
   Beats the `td code { white-space: nowrap }` rule above on specificity. */
.vdm-doc .vdm-hash {
  display: inline-block;
  max-width: 100%;
  padding: 0.1em 0.4em;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  font-family: var(--vdm-mono);
  font-size: 0.8rem;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* --------------------------------------------------------------------------
   12. Narrow screens
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .vdm-doc { --vdm-anchor-offset: 9rem; padding-bottom: 2.5rem; }

  .vdm-docnav { gap: 0.3rem; margin-bottom: 1.5rem; }
  .vdm-docnav a { padding: 0.28rem 0.6rem; font-size: 0.86rem; }

  /* Nothing to push against once the nav wraps: give the CTA its own row. */
  .vdm-docnav .vdm-docnav-dl {
    margin: 0.35rem 0 0;
    width: 100%;
    justify-content: center;
  }

  .vdm-doc .page__lede { font-size: 1.05rem; }
  .vdm-doc h2 { margin-top: 2.1rem; }
  .vdm-doc pre { padding: 0.75rem 0.8rem; }
  .vdm-doc pre code { font-size: 0.8rem; }
  .vdm-doc table { font-size: 0.88rem; }

  .vdm-doc th,
  .vdm-doc td { padding: 0.45rem 0.6rem; }

  .vdm-doc .callout,
  .vdm-doc .vdm-dl-card { padding: 0.8rem 0.9rem; }

  .vdm-doc .machine-block { padding: 0.9rem 1rem 0.4rem; }
  .vdm-doc .toc { padding: 0.8rem 0.9rem 0.8rem 1.9rem; }
  .vdm-doc .cards { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   13. Print
   -------------------------------------------------------------------------- */
@media print {
  .vdm-docnav { display: none; }
  .vdm-doc pre { background: #f4f4f4; border-color: #999; white-space: pre-wrap; }
  .vdm-doc .table-wrap { overflow: visible; border-color: #999; }
  .vdm-doc a { color: #000; }

  .vdm-doc h2,
  .vdm-doc h3,
  .vdm-doc h4 { break-after: avoid; }

  .vdm-doc .callout,
  .vdm-doc .machine-block,
  .vdm-doc .vdm-dl-card,
  .vdm-doc tr { break-inside: avoid; }
}