/* skeuo-doc.css: instrument skin for this surface only. Unlayered, loaded after skeuo-a.css. Hex literals only in :root. */

/* ==========================================================================
   Documentation surfaces: the setup pages, the two use-case pages, and the
   about page.

   The rule these pages are held to is restraint. Everything physical here is a
   container or a marker: the plate a question is stamped into, the chip that
   carries a step number, the groove between two table rows. Every word of
   running text sits on a flat reading slab with no texture, no gradient and no
   glow behind it.
   ========================================================================== */

:root {
  /* Fallbacks. The shared sheet owns --surface-panel and --surface-reading; if
     they are not there yet these stand in, derived from the same ramp. */
  --doc-slab-fallback:   #131a27;
  --doc-slab-2-fallback: #0f151f;
  --doc-chip-ink:        #0b111c;

  --doc-slab:   var(--surface-reading, var(--doc-slab-fallback));
  --doc-slab-2: var(--doc-slab-2-fallback);

  /* One groove, two tones, drawn from the shared edge tokens so the light on
     these pages comes from the same place as the light on the home page. */
  --doc-groove-dark: var(--sk-cast);
  --doc-groove-lit:  var(--sk-edge-lit-2, rgba(212, 228, 255, 0.14));

  /* A cut plate: shallow inset, lit along its bottom lip. Callouts, question
     plates and the disclaimer all share it so they read as one operation. */
  --doc-engrave:
    inset 0 2px 5px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(0, 0, 0, 0.85),
    inset 0 -1px 0 var(--doc-groove-lit);
}

/* --------------------------------------------------------------------------
   Reading slabs. Flat, near-solid, one hairline. Nothing else.
   -------------------------------------------------------------------------- */
.doc-slab {
  padding: var(--step-5) var(--step-6);
  border-radius: var(--radius-sm);
  background-color: var(--doc-slab);
  background-image: none;
  border: 1px solid var(--doc-groove-dark);
  box-shadow: 0 1px 0 var(--doc-groove-lit);
  max-width: none;
}

/* The slab is the container; the measure still governs the text inside it. */
.doc-slab > * { max-width: var(--measure); }

/* --------------------------------------------------------------------------
   Section headings cut into the panel.

   A true engrave would drop the fill to near the ground colour and lose the
   contrast a heading needs, so the cut is carried by the shadow and the groove
   under the words rather than by the fill.
   -------------------------------------------------------------------------- */
.doc-engraved {
  position: relative;
  padding-bottom: var(--step-3);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08),
    0 -1px 1px rgba(0, 0, 0, 0.85);
}

.doc-engraved::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(9rem, 42%);
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    var(--doc-groove-dark) 0 2px,
    var(--doc-groove-lit) 2px 3px);
}

/* --------------------------------------------------------------------------
   The name plate on the about masthead.

   Real text on a small screwed plate. The letters themselves are never
   embossed or debossed, only the plate they are mounted on.
   -------------------------------------------------------------------------- */
.doc-nameplate {
  position: relative;
  display: inline-block;
  padding: var(--step-4) calc(var(--step-6) + var(--step-4));
  border-radius: var(--radius-tight);
  background-color: var(--sk-metal);
  background-image: var(--sk-plate-face), var(--sk-brush);
  border: 1px solid var(--sk-cast);
  box-shadow:
    var(--sk-bevel),
    0 2px 3px rgba(0, 0, 0, 0.6),
    0 12px 26px rgba(0, 0, 0, 0.5);
}

/* Four fixings, one layer. */
.doc-nameplate::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    var(--sk-screw), var(--sk-screw-b), var(--sk-screw-b), var(--sk-screw);
  background-repeat: no-repeat;
  background-size: 11px 11px;
  background-position:
    9px 9px,
    calc(100% - 9px) 9px,
    9px calc(100% - 9px),
    calc(100% - 9px) calc(100% - 9px);
}

/* The portrait is mounted in a lighter frame than a device gets: this is a
   photograph on a wall, not a screen behind glass. */
.hero-media.doc-portrait {
  padding: 10px;
  border-radius: var(--radius-sm);
  background-color: var(--sk-metal-lo);
  background-image: var(--sk-plate-face);
  border: 1px solid var(--sk-cast);
  box-shadow:
    inset 0 1px 0 var(--sk-edge-lit-2, rgba(212, 228, 255, 0.14)),
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 16px 34px rgba(0, 0, 0, 0.45);
}

.hero-media.doc-portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-tight);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7);
}

/* --------------------------------------------------------------------------
   The non-affiliation line: a flat engraved plate, small caps, muted. It is a
   statement of fact, so it gets no metal and no lift.
   -------------------------------------------------------------------------- */
.doc-plate {
  padding: var(--step-3) var(--step-4);
  border-radius: var(--radius-tight);
  background-color: var(--doc-slab-2);
  border: 1px solid var(--doc-groove-dark);
  box-shadow: var(--doc-engrave);
  font-size: var(--size-xs);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* --------------------------------------------------------------------------
   Numbered steps. The chip is the only physical element in a setup section.
   -------------------------------------------------------------------------- */
.doc-steps {
  list-style: none;
  counter-reset: doc-step;
  padding-left: 0;
  margin-left: 0;
}

.doc-steps > li {
  counter-increment: doc-step;
  position: relative;
  padding-left: calc(var(--step-7) + var(--step-2));
  min-height: 1.9rem;
}

.doc-steps > li + li { margin-top: var(--step-4); }

.doc-steps > li::before {
  content: counter(doc-step);
  position: absolute;
  left: 0;
  top: 0.05em;
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: var(--radius-tight);
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  font-weight: 600;
  /* The numeral is a step's only identifier, so it is printed on the chip in
     readable ink rather than cut into it. */
  color: var(--color-text);
  text-shadow: 0 1px 1px var(--doc-chip-ink);
  background-color: var(--sk-metal-lo);
  background-image: var(--sk-plate-face), var(--sk-brush);
  border: 1px solid var(--sk-cast);
  box-shadow:
    var(--sk-bevel),
    0 1px 2px rgba(0, 0, 0, 0.6),
    0 5px 12px rgba(0, 0, 0, 0.45);
}

/* --------------------------------------------------------------------------
   Question and answer blocks: engraved plates in a recessed bay.

   The question is the stamped label on the plate; the answer stays flat body
   copy underneath it.
   -------------------------------------------------------------------------- */
.qa {
  /* The bay is a container, so the measure belongs to the answers inside it
     rather than to the enclosure. */
  max-width: none;
  display: grid;
  gap: 3px;
  padding: 7px;
  border-top: 0;
  border-radius: calc(var(--radius-sm) + 7px);
  background-color: var(--sk-cast);
  background-image: var(--sk-knurl);
  box-shadow:
    var(--sk-recess),
    inset 0 0 0 1px rgba(0, 0, 0, 0.9),
    0 1px 0 var(--doc-groove-lit);
}

.qa > * {
  padding: var(--step-5) var(--step-5) var(--step-5);
  border-top: 0;
  border-radius: var(--radius-tight);
  background-color: var(--doc-slab);
  box-shadow: var(--doc-engrave);
}

.qa > * + * { border-top: 0; }

.qa h3 {
  margin-bottom: var(--step-3);
  padding-bottom: var(--step-3);
  font-size: var(--size-base);
  color: var(--color-text);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07),
    0 -1px 1px rgba(0, 0, 0, 0.85);
  border-bottom: 1px solid var(--doc-groove-dark);
  box-shadow: 0 1px 0 var(--doc-groove-lit);
}

.qa p { color: var(--color-text-muted); }

@media (min-width: 48rem) {
  .qa { padding: 8px; }
  .qa > * { padding-inline: var(--step-6); }
}

/* --------------------------------------------------------------------------
   Data tables.

   The table is a printed card mounted on the panel: flat fill, no texture
   behind a cell, and one two-tone groove between rows doing all of the work.

   The edge fades are the standard local/scroll background pair, so they appear
   only while the table actually overflows its region and disappear the moment
   it fits or stacks.
   -------------------------------------------------------------------------- */
.table-wrap {
  border-radius: var(--radius-sm);
  border: 1px solid var(--doc-groove-dark);
  background-color: var(--doc-slab);
  box-shadow:
    inset 0 1px 0 var(--doc-groove-lit),
    0 2px 4px rgba(0, 0, 0, 0.45);
  background-image:
    linear-gradient(90deg, var(--doc-slab) 40%, rgba(19, 26, 39, 0)),
    linear-gradient(270deg, var(--doc-slab) 40%, rgba(19, 26, 39, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-size: 34px 100%, 34px 100%, 18px 100%, 18px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

.table-wrap:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}

.data-table thead th {
  background-color: var(--doc-slab-2);
  border-bottom: 1px solid var(--doc-groove-dark);
  box-shadow: inset 0 -2px 0 -1px var(--doc-groove-lit);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* The etched groove between rows: a dark cut with a lit lip below it. */
.data-table tbody tr + tr > * {
  border-top: 1px solid var(--doc-groove-dark);
  box-shadow: inset 0 1px 0 var(--doc-groove-lit);
}

.data-table tbody td { border-bottom: 0; }

.data-table td { color: var(--color-text-muted); }
.data-table td:first-child { color: var(--color-text); }

/* Stacked mode. The groove moves to the row, since there are no columns left
   to separate, and the fades are meaningless with nothing to scroll. */
@container (max-width: 34rem) {
  .table-wrap { background-image: none; }

  .data-table tbody tr {
    padding-inline: var(--step-4);
    border-bottom: 0;
  }

  .data-table tbody tr + tr {
    border-top: 1px solid var(--doc-groove-dark);
    box-shadow: inset 0 1px 0 var(--doc-groove-lit);
  }

  .data-table tbody tr + tr > * {
    border-top: 0;
    box-shadow: none;
  }
}

/* --------------------------------------------------------------------------
   Forced colours and reduced motion.

   Nothing here animates, so reduced motion has nothing to switch off. Forced
   colours drops every cut and every stamp: boundaries come back as real
   borders, which each of these components already carries.
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .doc-slab,
  .doc-plate,
  .doc-nameplate,
  .hero-media.doc-portrait,
  .qa,
  .qa > *,
  .table-wrap {
    background-image: none;
    box-shadow: none;
    border: 1px solid CanvasText;
  }

  .doc-engraved,
  .doc-plate,
  .qa h3,
  .doc-steps > li::before,
  .data-table thead th { text-shadow: none; }

  .doc-steps > li::before { border: 1px solid CanvasText; }
}

/* --------------------------------------------------------------------------
   A bare URL used as its own link text has no break opportunity in it, so on a
   narrow screen it pushes the whole page sideways. Body copy may break one
   anywhere it has to; headings and labels are left alone.
   -------------------------------------------------------------------------- */
.prose :is(p, li, dd) a,
.doc-slab :is(p, li, dd) a {
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Stacked mode again. A table box never shrinks below its own min-content
   width, so on a narrow screen the table stayed wider than the region and the
   value column was cut off mid-word behind a sideways scroll. The stacked cell
   is a block with its label above it, so the only thing left to do here is let
   a long unbroken value break rather than set the floor.
   -------------------------------------------------------------------------- */
@container (max-width: 34rem) {
  .data-table { width: 100%; }
  .data-table td { overflow-wrap: anywhere; }
}

/* --------------------------------------------------------------------------
   Status modules.

   A rail of modules is a rack of readouts, not a row of cards with footers to
   line up: the subgrid stretch left a two-line module as tall as a six-line
   one, with an inch of empty plate under the text. Each module is only as tall
   as what it says.
   -------------------------------------------------------------------------- */
.rail-aligned:has(> .card.module) { align-items: start; }