/*
 * info.css: the help and reference pages (Requirements, Install, FAQ, Troubleshooting, the Practice and
 * Replays guides, Source and Privacy).
 * Builds on site.css. Every colour here is a site.css token, so both themes work
 * and `node contrast.mjs` covers them. No new colour values.
 *
 * The shared pieces these pages started (.page-meta, .page-next, .data-kv,
 * .cell-note, .steps, .addr, the one-line note under a table, the 44 px link in
 * a cell) now live in site.css. What is left is used only by these pages:
 *   section spacing  a slightly tighter rhythm for short sections
 *   .data-machines   the three-column test-laptop table on small phones
 *   .contact-box     the contact line in a framed box (Source, Privacy)
 *   .not-yet         "(not public yet)" after an address
 */

/* Sections on these pages sit a little closer than the default: they are
   short, and the long pages (Privacy) read as one document. */
.page-col > .section {
  margin-top: var(--s-10);
}

.page-col > .section > h2 {
  margin-bottom: var(--s-3);
}

/* Paragraphs in the reading column: 18/28, 12 px apart. */
.page-col > .section > p {
  margin-bottom: var(--s-3);
}

.page-col > .section > :last-child {
  margin-bottom: 0;
}

/* Machines table: three short columns; tighter cells on small phones. */
@media (max-width: 479.98px) {
  .data-machines th,
  .data-machines td,
  .data-machines caption {
    padding-inline: 10px;
  }
}

/* The shared contact partial inside a step. */
.steps .contact {
  color: var(--text-1);
}

/* ------------------------------------------------------------------------
   Source and Privacy
   ------------------------------------------------------------------------ */

/* The contact line in a framed box, with a small label. */
.contact-box {
  margin: var(--s-5) 0 0;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-box);
  background: var(--surface);
}

.contact-box-label {
  margin: 0 0 2px;
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.contact-box .contact {
  margin: 0;
  color: var(--text-1);
  font-weight: 600;
}

.not-yet {
  color: var(--text-2);
}

/* Mark preview-only placeholders. */
[data-placeholder] {
  outline: 2px dashed var(--warn);
  outline-offset: 3px;
}

/* Forced colours drop the surface fill, so the contact box would lose its
   edge: draw it, as .notice does. */
@media (forced-colors: active) {
  .contact-box {
    border: 1px solid CanvasText;
  }
}

/* A one-word title longer than a phone column ("Troubleshooting") shrinks to
   fit instead of breaking mid-word. 13.6 is the title's width per pixel of
   font size in PBD Display; 40 px is the column's side padding. */
.page-head .h1-fit {
  font-size: min(var(--fs-title), calc((100vw - 40px) / 13.6));
}