/* site6-media.css: editorial restructure for the build, gallery and card-viewer
   pages. Unlayered, loaded after site6.css on those three pages only.

   The build page is the centre of the maker's-log idea: a recipe card with the
   bill of materials and the tools on the left and the method on the right.

   .bom, .tools, .stamp and .log-date are shared primitives and live in the
   shared sheet. This file only ever narrows them for a page's own layout, and
   must never redefine them: --s6-grid keeps a local fallback because it is a
   token rather than a rule, consumed as var(--s6-grid, var(--s6m-grid)).

   Hex literals only in :root. */

:root {
  /* Local fallback only. The shared token takes over the moment it exists. */
  --s6m-grid: rgba(255, 255, 255, 0.045);
  /* Local fallbacks for the shared palette tokens, used only until the shared
     sheet defines them. Consumed as var(--c-accent, var(--s6m-accent)). */
  --s6m-accent: #00d4ff;
  --s6m-green:  #22c55e;
  --s6m-amber:  #f59e0b;
  --s6m-purple: #7c3aed;
  --s6m-tool-tint: rgba(255, 255, 255, 0.03);
  --s6m-grid-lines:
    repeating-linear-gradient(to right, var(--s6m-grid) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(to bottom, var(--s6m-grid) 0 1px, transparent 1px 40px);
}

/* --------------------------------------------------------------------------
   Build: hero
   -------------------------------------------------------------------------- */

/* --s6-grid is a whole background-image, not a colour, so it could not sit
   inside another gradient: the shorthand this rule used to carry was invalid
   and the graph paper never painted. The hero wears the shared .has-grid hook
   instead, which puts the ruling and its fade on a pseudo-element underneath
   rather than on the section, so the headline and the quantities line are not
   faded out along with it. The local fallback is still the ruling this page
   would draw if the shared token were ever missing. */
.s6-hero { overflow-x: clip; }
.s6-hero::before { background-image: none; }
.s6-hero::after { background-image: var(--s6-grid, var(--s6m-grid-lines)); }

.s6-hero .bleed-right { align-items: center; }

/* The shared .bleed-right pulls its last column right with a percentage
   margin, and a percentage margin on a grid item resolves against that item's
   own track rather than the container, so the photograph overshoots the
   viewport by a couple of hundred pixels and loses its right edge to the clip.
   Here the container is widened to the viewport instead and its left padding
   rebuilt, which lands the image exactly on the edge at any width. */
@media (min-width: 60rem) {
  .s6-hero .bleed-right {
    max-width: none;
    padding-left: max(var(--space-gutter), calc((100% - var(--container)) / 2));
    padding-right: 0;
  }
  .s6-hero .bleed-right > :last-child { margin-right: 0; }
}
.s6-hero-copy > h1 { margin-bottom: var(--step-2); }
.s6-hero-media img { display: block; width: 100%; height: auto; }

@media (max-width: 60rem) {
  .s6-hero-media { margin-top: var(--step-6); }
}

/* --------------------------------------------------------------------------
   Build: the recipe card
   -------------------------------------------------------------------------- */

.s6-recipe { overflow-x: clip; }

.s6-recipe-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--step-8);
}
@media (min-width: 64rem) {
  .s6-recipe-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--step-9, var(--step-8));
    align-items: start;
  }
  /* The two columns are one sheet of paper, so a hairline separates them. */
  .s6-recipe-do {
    padding-left: var(--step-7);
    border-left: 1px solid var(--s6-hair);
  }
}

.s6-recipe-h {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s6-mute);
  margin: var(--step-7) 0 var(--step-3);
  padding-bottom: var(--step-2);
  border-bottom: 1px solid var(--s6-hair);
}

/* The assembly steps start folded: step one in full, step two fading out at
   the bottom, the rest hidden, and one control under the fade. Only with
   script running; without it the list is simply open. */
.s6-todo > .s6-recipe-h { margin-bottom: var(--step-4); }

.js .s6-steps.is-folded > li:nth-child(n + 3),
.js .s6-steps.is-folded ~ .s6-steps-rest { display: none; }
.s6-steps-rest > .s6-steps { margin-top: var(--step-5); }

.js .s6-steps.is-folded > li:nth-child(2) {
  max-height: 9rem;
  overflow: hidden;
  border-bottom: 0;
  -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0) 0%, rgb(0 0 0 / 0.55) 55%, transparent 100%);
  mask-image: linear-gradient(180deg, rgb(0 0 0) 0%, rgb(0 0 0 / 0.55) 55%, transparent 100%);
}

.s6-expand {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--step-3);
  padding: 0.55rem 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: none;
  border: 1px solid var(--s6-hair, rgba(255, 255, 255, 0.09));
  border-radius: 4px;
  cursor: pointer;
}
.js .s6-expand { display: inline-flex; }
.s6-expand:hover { border-color: var(--color-accent); }
.s6-expand:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.s6-expand svg { transition: transform 160ms ease; }
.s6-expand.is-open svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .s6-expand svg { transition: none; } }

.bom-legend {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s6-quiet);
  margin: 0 0 var(--step-2);
}
.bom-foot { margin-top: var(--step-4); font-size: var(--size-sm); }

/* The shared bill of materials goes three columns wide on a wide VIEWPORT, but
   here it lives in the narrow half of the recipe card whatever the viewport is
   doing, so the note stays on its own line and the cost keeps the right edge. */
.s6-recipe-need .bom > li {
  grid-template-columns: minmax(0, 1fr) 4.5rem;
  grid-template-areas: "item qty" "note note";
  align-items: baseline;
}
.s6-recipe-need .bom-item > .stamp { margin-left: 0.4em; vertical-align: 0.1em; }
.s6-recipe-need .bom > li > p { margin: 0; }
.s6-recipe-need .tools { margin-top: var(--step-2); }

/* Steps: the giant numeral comes from a counter, so no numbering text is
   added to the document and the list keeps its own semantics. */
.s6-steps { counter-reset: s6step; list-style: none; }
.s6-steps-from-3 { counter-reset: s6step 2; }
.s6-steps > .row { counter-increment: s6step; }
.s6-steps > .row > .row-num::before { content: counter(s6step, decimal-leading-zero); }

.s6-recipe-do .row.has-media {
  grid-template-columns: minmax(3rem, 5rem) minmax(0, 1fr);
  grid-template-areas: "num body" "num media";
}
.s6-recipe-do .row-num { font-size: clamp(2.4rem, 5vw, 4rem); }
.s6-recipe-do .row-media { margin-top: var(--step-3); max-width: 15rem; }
.s6-recipe-do .row-media img { width: 100%; height: auto; display: block; }

.s6-warning-shot { margin: var(--step-5) 0; max-width: 20rem; }
.s6-warning-shot img { width: 100%; height: auto; display: block; }

@media (max-width: 40rem) {
  .s6-recipe-do .row.has-media {
    grid-template-columns: 1fr;
    grid-template-areas: "num" "body" "media";
  }
}

/* --------------------------------------------------------------------------
   Plain numbered lists: first run, and the six flashing steps
   -------------------------------------------------------------------------- */

.s6-numlist {
  counter-reset: s6n;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--s6-hair);
}
/* Absolute numerals rather than a grid: these list items mix bare text with
   inline spans, and bare text in a grid container becomes an anonymous item
   that fights the numeral for column one. */
.s6-numlist > li {
  counter-increment: s6n;
  position: relative;
  padding: var(--step-4) 0 var(--step-4) 4.5rem;
  margin: 0;
  border-bottom: 1px solid var(--s6-hair);
}
.s6-numlist > li::before {
  content: counter(s6n, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--step-4);
  width: 3.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--s6-num);
}

/* --------------------------------------------------------------------------
   Build: the flasher sits in a plain hairline section, but the console itself
   keeps every bit of its moulded treatment. It is the one physical object on
   the page.
   -------------------------------------------------------------------------- */

.s6-flash-plain {
  background: none;
  border: 0;
  border-top: 1px solid var(--s6-hair);
  border-radius: 0;
  box-shadow: none;
  padding: var(--step-6) 0 0;
}
.s6-flash-plain::before,
.s6-flash-plain::after { content: none; }

.stamp-fw { margin-left: var(--step-2); vertical-align: 0.35em; }

.flash-needs {
  border-top: 1px solid var(--s6-hair);
  margin-bottom: var(--step-7);
}
.flash-need {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--s6-hair);
  border-radius: 0;
  box-shadow: none;
  padding: var(--step-3) 0;
}

/* --------------------------------------------------------------------------
   Build: the specification table, kept as a table and set in the spec rhythm
   -------------------------------------------------------------------------- */

.s6-spectable .table-wrap { overflow-x: auto; }
.s6-spectable .data-table { background: none; border: 0; }
.s6-spectable .data-table thead th {
  background: none;
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--s6-quiet);
  border-bottom: 1px solid var(--s6-hair);
}
.s6-spectable .data-table th,
.s6-spectable .data-table td {
  border-bottom: 1px solid var(--s6-hair);
  padding-inline: 0 var(--step-4);
}

/* --------------------------------------------------------------------------
   Rows without numerals: the limits list and the three next-step links
   -------------------------------------------------------------------------- */

.rows-plain > .row {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "body" "media";
}
.rows-plain > .row > .row-num { display: none; }

.rows-links > .row {
  display: grid;
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur-1, 150ms) ease;
}
.rows-links > .row:hover { background: var(--s6-hair-soft); }
.rows-links > .row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.row-foot { margin: var(--step-2) 0 0; font-size: var(--size-sm); color: var(--color-accent); }

@media (min-width: 48rem) {
  .rows-links > .row,
  .rows-plain > .row {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    grid-template-areas: "head body" "head foot";
    column-gap: var(--step-6);
  }
  .rows-links > .row > .row-foot,
  .rows-plain > .row > .row-foot { grid-area: foot; }
}

/* --------------------------------------------------------------------------
   The questions, as plain disclosure rows
   -------------------------------------------------------------------------- */

.faq summary > h3 {
  display: inline;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

/* --------------------------------------------------------------------------
   The facts strip, reduced to a hairline inline list
   -------------------------------------------------------------------------- */

.facts {
  background: none;
  border: 0;
  border-top: 1px solid var(--s6-hair);
  border-bottom: 1px solid var(--s6-hair);
  border-radius: 0;
  box-shadow: none;
  padding-block: var(--step-3);
  gap: var(--step-5);
}
.facts > div {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.facts .fact-label {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s6-quiet);
}

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

/* The gallery hero is a .bleed-right now, so the 12-column placements from the
   card layout have to stop applying or both children land in one cell. The
   photograph runs to the right edge, which means it also gives up the moulded
   stock, the chamfer and the cast shadow it carried while it floated. */
.hero .bleed-right > .hero-copy,
.hero .bleed-right > .hero-media { grid-column: auto; }

.hero-media:not(.bezel) {
  background: none;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.hero-media img,
.hero-media:not(.bezel) img {
  border-radius: 0;
  box-shadow: none;
}

/* The moulded stock is gone, so the 8px of it that showed as padding around the
   photograph goes too: the image has to reach the box's own right edge, which
   is the viewport's. The 4:3 crop the shared sheet gives every hero photograph
   is kept, so the gallery's first screen is the same shape as every other. */
.hero .bleed-right > .hero-media { padding: 0; max-width: none; }


/* The caption has to be exactly as wide as the frame above it, or the grid
   stops reading as a contact sheet. Both are the full width of the cell. */
.grid-uneven > figure { width: 100%; margin: 0; }
.grid-uneven > figure > a { display: block; }
.grid-uneven > figure img { display: block; width: 100%; height: auto; }
.grid-uneven figcaption { line-height: 1.5; }
.grid-uneven figcaption .stamp { margin-right: 0.4em; }

/* --------------------------------------------------------------------------
   Card viewer
   -------------------------------------------------------------------------- */

/* The instrument sheet positions a lamp absolutely against its module. These
   three are inline marks in a heading, so the positioning and the glow are
   released here or all three stack in the hero's top right corner. */
.s6-routes > .row > .row-head .led {
  position: static;
  box-shadow: none;
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--color-accent);
  margin-right: 0.5em;
  vertical-align: 0.12em;
}
.s6-routes > .row > .row-head .stamp { margin-right: 0.5em; vertical-align: 0.2em; }
.s6-routes { counter-reset: s6route; }
.s6-routes > .row { counter-increment: s6route; }
.s6-routes > .row > .row-num::before { content: counter(s6route, decimal-leading-zero); }

@media (prefers-reduced-motion: reduce) {
  .rows-links > .row { transition: none; }
}

@media (forced-colors: active) {
  .bom > li,
  .tools > li,
  .s6-numlist > li,
  .facts,
  .s6-recipe-do,
  .s6-flash-plain,
  .flash-need { border-color: CanvasText; }
  .stamp { border-color: CanvasText; color: CanvasText; }
}


/* --------------------------------------------------------------------------
   Tool strip and tool card

   Fallback definitions only. The shared sheet owns both primitives; these are
   wrapped in :where() so a single class selector there beats every rule here
   without needing !important, and this block can be deleted once it lands.
   -------------------------------------------------------------------------- */

:where(.tool-strip) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--step-3);
  align-items: center;
  margin-top: var(--step-7);
  padding: 0;
  list-style: none;
}

:where(.tool-strip-link) {
  display: inline-flex;
  align-items: center;
  gap: var(--step-2);
  padding: var(--step-2) var(--step-4);
  border: 1px solid var(--s6-hair);
  border-left-width: 3px;
  border-left-color: var(--c-accent, var(--s6m-accent));
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
}

:where(.tool-strip-link[data-tool="viewer"])  { border-left-color: var(--c-green,  var(--s6m-green)); }
:where(.tool-strip-link[data-tool="usbtest"]) { border-left-color: var(--c-amber,  var(--s6m-amber)); }
:where(.tool-strip-link[data-tool="beta"])    { border-left-color: var(--c-purple, var(--s6m-purple)); }

:where(.tool-strip-link:hover) { background: var(--s6m-tool-tint); }

:where(.tool-card) {
  display: grid;
  gap: var(--step-2);
  max-width: 44rem;
  margin-top: var(--step-6);
  padding: var(--step-6);
  border: 1px solid var(--s6-hair);
  border-left: 4px solid var(--c-accent, var(--s6m-accent));
  background: var(--s6m-tool-tint);
  text-decoration: none;
  color: inherit;
}

:where(.tool-card[data-tool="viewer"])  { border-left-color: var(--c-green,  var(--s6m-green)); }
:where(.tool-card[data-tool="usbtest"]) { border-left-color: var(--c-amber,  var(--s6m-amber)); }
:where(.tool-card[data-tool="beta"])    { border-left-color: var(--c-purple, var(--s6m-purple)); }

:where(.tool-card-eyebrow) {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--s6-quiet);
}

:where(.tool-card-title) {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.15;
}

:where(.tool-card-body) { color: var(--s6-quiet); max-width: 46ch; }

:where(.tool-card-go) {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-accent, var(--s6m-accent));
}

:where(.tool-card:hover .tool-card-go) { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Release notes

   The version is the giant numeral, so it is set smaller than a counter would
   be: "v0.15.3" in the .row-num size overruns its column at every width.
   -------------------------------------------------------------------------- */

/* The page sheet drops the numeral gutter from any row list that is not
   counter-numbered, and this one is numbered by hand: the version IS the
   numeral. So the two-column grid is restored here rather than by borrowing
   .rows-num, whose counter would print 01, 02, 03 over the versions. */
.rows.rows-releases:not(.rows-num) > .row {
  grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr);
  grid-template-areas: "num head" "num body";
}

@media (max-width: 39.99rem) {
  .rows.rows-releases:not(.rows-num) > .row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "num" "head" "body";
    row-gap: var(--step-2);
  }
}

.rows-releases > .row > .row-num {
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  word-break: break-word;
}

.rows-releases .row-head {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  display: flex;
  flex-wrap: wrap;
  gap: var(--step-3);
  align-items: baseline;
}

.rel-stage { color: var(--s6-quiet); }

.rows-releases .stamp { vertical-align: middle; }

.rel-head {
  font-weight: 700;
  margin: var(--step-5) 0 var(--step-2);
}

.rel-head:first-of-type { margin-top: 0; }

.rel-list { margin: 0 0 var(--step-3); padding-left: 1.1rem; }
.rel-list li { margin-bottom: var(--step-2); max-width: 70ch; }

/* --------------------------------------------------------------------------
   Touch targets on these pages.

   Three controls here were between 18 and 40 pixels tall, which is under the
   44 a thumb needs. The breadcrumb links take their height as padding and give
   it straight back as margin, so the row above the hero does not move.
   -------------------------------------------------------------------------- */
.s6-expand { min-height: 44px; }

.tool-strip a { min-height: 44px; }

.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0.75rem;
  margin-block: -0.75rem;
}

/* A release note names a C function now and then, and at 320 a word like
   dexcom_reopen_persistent_client() is wider than the column it is set in, so
   it pushed the whole page sideways. Notes are the one place on the site where
   an unbreakable token is normal, so they are the one place that may break a
   word mid-way. */
.rows-releases .row-body { overflow-wrap: anywhere; }