/* site6-doc.css: the provider pages, the two use pages and the about page.
   Loaded after site6.css on those six only. The register is a maker's build
   log: hairlines, mono stamps, a bill of materials, numbered steps.

   Anything in here that duplicates a shared primitive is written with :where()
   so it carries zero specificity and the shared sheet wins the moment it
   defines the same class. Hex literals live in :root and nowhere else. */

:root {
  --doc-rule: rgba(255, 255, 255, 0.09);
  --doc-stamp: rgba(255, 255, 255, 0.46);
  --doc-grid-line: rgba(255, 255, 255, 0.035);
}

/* Fallback only. Track A's --s6-grid, once defined at :root, beats this. */
:where(:root) {
  --s6-grid:
    linear-gradient(var(--doc-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--doc-grid-line) 1px, transparent 1px);
}

/* --------------------------------------------------------------------------
   Hero

   The graph paper sits under the hero only, and fades out before the first
   section so the page does not read as squared paper all the way down.
   -------------------------------------------------------------------------- */
/* These six open the way the home page does: the graph paper, the ruling and
   the fade all come from .hero-log in the shared sheet. Only the box it paints
   into is set here, because a hero's ::before is the drifting bloom and the
   paper cannot share it. Nothing below may restate a value .hero-log owns, or
   the two openings drift apart again. */
.hero { position: relative; }
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* A breadcrumb row sits above these heroes and the home page has none. The row
   is tightened, and the hero's top padding then gives back exactly what the row
   still costs, so the eyebrow lands at the height it lands at on the home page
   rather than under an empty band. 2.4rem is the tightened row measured, not
   guessed; re-measure it before changing the row's padding or its type size. */
.container:has(> .crumbs) > .crumbs { padding-block: var(--step-2) 0; }

/* The hero below is a .container.bleed-right, which is let out to the viewport
   and has its left padding rebuilt. The crumbs container is a plain .container,
   so above 60rem the two started 24px apart; this gives the crumbs the same
   rebuilt padding so the breadcrumb and the h1 share one left edge. */
@media (min-width: 60rem) {
  .container:has(> .crumbs) {
    max-width: none;
    padding-inline: max(var(--space-gutter), calc((100% - var(--container)) / 2));
  }
}
.container:has(> .crumbs) + .hero { padding-top: calc(var(--step-9) - 2.4rem); }

/* Below 60rem the home hero's own top padding is smaller than the row, so
   there is nothing left to give back. */
@media (max-width: 59.999rem) {
  .container:has(> .crumbs) + .hero { padding-top: var(--step-6); }
}

/* The copy column starts at the top of the hero as it does on the home page.
   Without this a short hero - the about page has no buttons and no quantities
   line - centres its copy against the full-height photograph and the eyebrow
   drops a hundred pixels below where every other page puts it. */
@media (min-width: 60rem) {
  .hero-log .hero-copy { align-self: start; }
}

/* Below 60rem .hero-copy is display: contents and its children are ordered
   against the photograph. The trademark line is the one child the shared
   ordering does not name, so it defaults to order 0 and lands above the
   eyebrow. It belongs last, under the quantities line. */
@media (max-width: 59.999rem) {
  .hero-copy > p.stamp { order: 7; }
}

/* The legal footnote, set as a stamped mono line rather than a plate.

   Scoped to the paragraph: the shared stamp is an inline-flex, nowrap label for
   a short part name, and a sentence of trademark text in that box paints far
   past its right edge. The chrome's own short stamp keeps the shared rule. */
p.stamp {
  display: block;
  white-space: normal;
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  line-height: 1.6;
  color: var(--doc-stamp);
  max-width: 58ch;
  /* The skin sheets draw the short chrome stamp as a moulded plate: a box all
     round, a fill and an inner shadow. A sentence of trademark text is not a
     plate, so all of that comes off and one hairline is left above it, the way
     the home page rules its quantities line. */
  background: none;
  background-image: none;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--doc-rule);
  padding: var(--step-3) 0 0;
  margin-block: var(--step-5);
}

/* --------------------------------------------------------------------------
   Bill of materials

   A recipe list: a right-aligned mono quantity, the item, then a note. The
   shared sheet owns the real thing; this is the fallback so the page is never
   unstyled while the two sheets land at different times.
   -------------------------------------------------------------------------- */
:where(.bom) {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--doc-rule);
}
:where(.bom > li) {
  display: grid;
  grid-template-columns: minmax(3.5rem, 6rem) minmax(0, 1fr);
  column-gap: var(--step-5);
  row-gap: var(--step-1);
  padding-block: var(--step-4);
  border-bottom: 1px solid var(--doc-rule);
}
:where(.bom-qty) {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: right;
  color: var(--doc-stamp);
  padding-top: 0.25em;
}
:where(.bom-item) { margin: 0; font-weight: 600; }
:where(.bom-note) { margin: 0; grid-column: 2; color: var(--color-text-muted); max-width: 62ch; }
@media (max-width: 40rem) {
  :where(.bom > li) { grid-template-columns: 1fr; }
  :where(.bom-qty) { text-align: left; }
  :where(.bom-note) { grid-column: 1; }
}

/* The list heading above a bill of materials or a set of steps. */
.list-label {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--doc-stamp);
  margin: var(--step-6) 0 var(--step-3);
}

/* A spec list whose labels are sentences rather than field names. Uppercasing
   a full sentence in mono is unreadable, so this variant keeps the sentence. */
.spec-wide > div { grid-template-columns: minmax(12rem, 22rem) minmax(0, 1fr); }
.spec-wide dt {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--size-sm);
  color: var(--color-text);
  line-height: 1.4;
}
@media (max-width: 48rem) { .spec-wide > div { grid-template-columns: 1fr; gap: var(--step-1); } }

/* --------------------------------------------------------------------------
   Prose, tables, callouts: the plate comes off
   -------------------------------------------------------------------------- */
.doc-slab,
.prose {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.doc-slab > h3,
.prose > h3 {
  margin-top: var(--step-7);
  padding-top: var(--step-4);
  border-top: 1px solid var(--doc-rule);
}
.doc-slab > :first-child,
.prose > :first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.table-wrap {
  background: none;
  background-image: none;
  border: 0;
  border-top: 1px solid var(--doc-rule);
  border-radius: 0;
  box-shadow: none;
}
.data-table thead th {
  background: none;
  box-shadow: none;
  text-shadow: none;
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--doc-stamp);
  border-bottom: 1px solid var(--doc-rule);
}
.data-table tbody tr + tr > * {
  border-top: 1px solid var(--doc-rule);
  box-shadow: none;
}

.callout {
  background: none;
  border: 0;
  border-left: 2px solid var(--color-accent);
  border-radius: 0;
  box-shadow: none;
  padding: var(--step-2) 0 var(--step-2) var(--step-5);
}
.callout-title {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--doc-stamp);
  margin-bottom: var(--step-2);
}

/* Screenshot figures sit inside rows now, so the carousel padding is wrong. */
.row-media .screenshot { margin: 0; }

/* A capture that sits in a row is flat: the moulded plate, its radius and its
   inset top highlight belong to the standalone carousel, not to a row. The
   glass over the capture stays, because that is the shared capture treatment. */
.row-media.screenshot,
.row-media .screenshot {
  border-radius: 0;
  background-image: none;
  box-shadow: none;
}
.row-media.screenshot::before,
.row-media .screenshot::before { content: none; }
.row-media figcaption { font-family: var(--font-mono); font-size: var(--size-xs); }

/* --------------------------------------------------------------------------
   About: a two-column narrative, heading left in a narrow column
   -------------------------------------------------------------------------- */
.narrative { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--step-4); }
.narrative > h2 { margin: 0; }
@media (min-width: 60rem) {
  .narrative {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: var(--step-8);
    align-items: start;
  }
  .narrative > .eyebrow { grid-column: 1; margin: 0 0 var(--step-2); }
  .narrative > h2 { grid-column: 1; position: sticky; top: 6rem; }
  .narrative > :not(.eyebrow):not(h2) { grid-column: 2; }
  .narrative > :not(.eyebrow):not(h2) ~ :not(.eyebrow):not(h2) { margin-top: var(--step-4); }
}

/* A bare repository URL is one unbreakable word, and at 320px it is wider than
   the column it sits in. */
.narrative a { overflow-wrap: anywhere; }

@media (forced-colors: active) {
  :where(.bom), :where(.bom > li), .stamp, .table-wrap, .callout { border-color: CanvasText; }
}

/* ==========================================================================
   Original palette, sprinkled.

   One rule holds all of it together: colour never carries meaning on its own,
   so a range mark sits beside the word it belongs to and never in place of it.
   The .band and .tool-strip primitives belong to the shared sheet and are only
   used here. No hex lives in this file; the --c-* tokens hold the values.
   ========================================================================== */

/* A range mark: a small square of the tier's colour ahead of the tier's name. */
.rng::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.45em;
  vertical-align: 0.04em;
  border-radius: 2px;
  background: var(--rng, currentColor);
}
.rng-in   { --rng: var(--c-green); }
.rng-high { --rng: var(--c-yellow); }
.rng-low  { --rng: var(--c-red); }

/* A note keeps its tier in the stripe: a caution reads amber, a hard limit red. */
.callout-safety { border-left: 2px solid var(--c-amber); }
.callout-safety::before,
.callout-safety .callout-title { color: var(--c-amber); }
.callout-danger { border-left: 2px solid var(--c-red); }
.callout-danger::before,
.callout-danger .callout-title { color: var(--c-red); }

/* The purple case gets its own stamp on the caption. The hero photograph is
   framed by the device module now and carries no rule of its own. */
.stamp-purple { color: var(--c-purple); }

/* The heading above a tools strip. The strip itself is a shared primitive. */
.tool-strip-label {
  margin: 0 0 var(--step-3);
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}



/* --------------------------------------------------------------------------
   TOOLS BAND

   The same component the home page carries, so the three provider pages open
   with the identical section rather than a strip of chips. site7.css owns
   .band and .tool-card; these are the layout pieces that lived only in the
   home sheet.
   -------------------------------------------------------------------------- */
.tools-band { --tool: var(--c-accent); }

.tool-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--step-5);
  margin-top: var(--step-5);
}

@media (min-width: 48rem) {
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--step-6); }
}

.tool-head {
  margin: 0;
  font-size: var(--size-lg, 1.25rem);
  line-height: 1.25;
}

.tool-card .btn-primary:not(.flash-panel *) { background-color: var(--tool); }
.tool-card .btn-primary:not(.flash-panel *):hover {
  background-color: color-mix(in srgb, var(--tool) 84%, white);
}

.tool-rows {
  margin: var(--step-6) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--step-4);
}

@media (min-width: 48rem) {
  .tool-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--step-6); }
}

.tool-row {
  padding: var(--step-3) var(--step-4);
  border-left: 2px solid var(--tool);
}

.tool-row-head {
  margin: 0 0 var(--step-1);
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.tool-row-head a { color: var(--tool); text-decoration: none; }
.tool-row-head a:hover,
.tool-row-head a:focus-visible { text-decoration: underline; }

.tool-row-body { margin: 0; font-size: var(--size-sm); }

@media (forced-colors: active) {
  .tool-row { border-color: CanvasText; }
}

@media (min-width: 60rem) {
  .tools-band { padding-block: var(--step-4) var(--step-7); }
}

/* --------------------------------------------------------------------------
   A photograph of people, not of hardware
   -------------------------------------------------------------------------- */

/* The shared hero rules crop every photograph to fill a fixed frame: 4:3 on
   most pages, a clamped height on the build-log hero. That is right for a
   device on a bench and wrong for two faces, and here it took the top of a cap
   and both chins. This source is square, so the frame is made square too and
   the crop then has nothing to remove. The cap on the width is what stops a
   square hero growing to the height of the column it sits in. */
.hero-media.uncropped {
  /* A definite width, not a max-width: the photograph inside is sized in
     percent, and a percentage against a shrink-to-fit parent has nothing to
     resolve against and collapses to nothing. min() keeps it definite at
     every width. */
  width: min(100%, 32rem);
  margin-inline: auto;
}

.hero-media.uncropped img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}