/* The published install guide (scripts/build-docs.ts, design-rationale §237),
   loaded after help.css and overriding what it gets wrong for this content.
   The file rides in the image beside the other stylesheets, because the build
   copies styles/ whole, and nothing in the app loads it.

   The app's help pages are short task guides, and 42rem is the right measure
   for them. The same chrome carries the deploy guide — over a thousand lines,
   with three-column tables whose last column is a paragraph. At 42rem such a
   table becomes a horizontal scroller, which hides the column an operator came
   for. Prose at 76rem is a worse read than prose at 52rem, and a page sized
   for its widest table wastes the line length everywhere else. So the column
   stays a comfortable measure, and a wide table breaks out of it. The in-app
   guides load help.css alone. */

.help {
  max-width: 52rem;
}

/* A table of three or more columns takes the page rather than the column:
   centred on the viewport, capped so it stays readable on a wide screen, and
   never wider than the window. Wrapping beats scrolling here — the reader is
   looking for one row, and a row they have to scroll sideways to finish is a
   row they read wrong. A two-column table fits the column and keeps its own
   width there. */
.help .md-table-scroll:has(th:nth-child(3)) {
  position: relative;
  left: 50%;
  width: min(84rem, calc(100vw - 3rem));
  transform: translateX(-50%);
}

.help .md-table-scroll:has(th:nth-child(3)) .md-table {
  width: 100%;
}

.help .md-table th,
.help .md-table td {
  vertical-align: top;
}

/* A variable name, a path or a default in the first two columns is one token
   a reader matches by eye, and `ARKUSH_PUB / LIC_URL` broken across two lines
   defeats that. The token stays whole, and its column sizes to the longest
   token it holds — a table of short names stays narrow. */
.help .md-table td:nth-child(-n + 2) code {
  white-space: nowrap;
}

/* The description column is prose and wraps like prose. */
.help .md-table td:last-child {
  overflow-wrap: break-word;
}

/* A long document earns visible section breaks — at 42rem the heading rhythm
   carried them, and over a thousand lines the eye needs the rule. */
.help h2 {
  border-top: 1px solid var(--border);
  padding-top: var(--space-6);
}

/* An anchored heading is a link target; give it somewhere to land clear of
   the top of the viewport. */
.help h2,
.help h3 {
  scroll-margin-top: var(--space-6);
}