/* KrIO documentation — theme
   Palette, type and the § section device follow noahpaladino.com so the docs
   read as part of the same site. Tokens below are that site's, verbatim. */

:root {
  --ink:            #0b0d12;
  --ink-raised:     #15181f;
  --paper:          #f2ede0;
  --paper-raised:   #e8dfc9;

  --accent:         #28429e;
  --accent-bright:  #7194f7;

  --text-on-ink:        #d9d4c5;
  --text-on-ink-muted:  #8a8d99;
  --text-on-paper:      #201d18;
  --text-on-paper-muted:#6c6151;

  --rule-on-ink:   rgba(113, 148, 247, 0.32);
  --rule-on-paper: rgba(32, 29, 24, 0.2);

  --font-display: "Playfair Display", Georgia, serif;
  --font-body:    "Source Serif 4", Charter, Georgia, serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Surface roles — remapped wholesale in dark mode. */
  --surface:       var(--paper);
  --surface-raised:var(--paper-raised);
  --text:          var(--text-on-paper);
  --text-muted:    var(--text-on-paper-muted);
  --rule:          var(--rule-on-paper);
  --link:          var(--accent);

  --status-fault: #9d2b20;
  --status-pass:  #2f6b41;
  --status-open:  #8a6208;

  --sidebar: 17.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface:        var(--ink);
    --surface-raised: var(--ink-raised);
    --text:           var(--text-on-ink);
    --text-muted:     var(--text-on-ink-muted);
    --rule:           var(--rule-on-ink);
    --link:           var(--accent-bright);

    --status-fault: #e8776c;
    --status-pass:  #7fb587;
    --status-open:  #d7b155;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.65;
}

/* ---------- shell ---------- */

.shell { display: flex; align-items: flex-start; }

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: #fff;
  padding: .6rem 1rem; z-index: 30; font-family: var(--font-mono); font-size: .8rem;
}
.skip:focus { left: .5rem; top: .5rem; }

/* Sidebar is always ink — it is chrome, not content. */
.nav {
  width: var(--sidebar);
  flex: 0 0 var(--sidebar);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 2.75rem 1.6rem 2rem;
  background: var(--ink);
  color: var(--text-on-ink);
}

.brand { display: block; text-decoration: none; color: inherit; margin-bottom: 2.5rem; }
.brand-mark {
  display: block;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
  line-height: 1;
}
.brand-rule {
  display: block; height: 2px; width: 2.75rem; margin: .8rem 0 0;
  background: var(--accent-bright);
}
.brand-sub {
  display: block; margin-top: .85rem;
  font-size: .84rem; line-height: 1.45; color: var(--text-on-ink-muted);
}

.navhead {
  font-family: var(--font-mono);
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-on-ink-muted);
  margin: 2rem 0 .7rem;
}

.navlist { list-style: none; margin: 0; padding: 0; }
.navlist a {
  display: flex; gap: .6rem; align-items: baseline;
  padding: .36rem 0 .36rem .8rem;
  border-left: 2px solid var(--rule-on-ink);
  font-family: var(--font-mono);
  font-size: .8rem;
  text-decoration: none;
  color: var(--text-on-ink-muted);
}
.navlist a:hover { color: #fff; border-left-color: var(--accent-bright); }
.navlist a[aria-current="page"] { color: #fff; border-left-color: var(--accent-bright); }
.nav-num { color: var(--accent-bright); font-size: .7rem; }

/* Child pages of a section, indented under their parent and set a step down so
   the numbered top level still reads as the spine of the nav. */
.navsub { list-style: none; margin: 0; padding: 0; }
.navsub a {
  padding-left: 2.2rem;
  font-size: .74rem;
  border-left-color: transparent;
}
.navsub a:hover,
.navsub a[aria-current="page"] { border-left-color: var(--accent-bright); }

.navtoggle-input, .navtoggle { display: none; }

.main { flex: 1 1 auto; min-width: 0; }

.wrap { max-width: 46rem; padding: 3.5rem clamp(1.25rem, 5vw, 4.5rem); }

/* ---------- § section device ---------- */

.sec { margin: 0; padding: 3.25rem clamp(1.25rem, 5vw, 4.5rem); }
.sec-inner { max-width: 46rem; }

/* Full-bleed ink band, as on the main site. */
.sec--ink {
  background: var(--ink);
  color: var(--text-on-ink);
}
.sec--ink .sec-num { color: var(--accent-bright); }
.sec--ink h2 { color: #fff; border-bottom-color: var(--rule-on-ink); }
.sec--ink a { color: var(--accent-bright); }
.sec--ink .lede, .sec--ink p { color: var(--text-on-ink); }
.sec--ink .muted { color: var(--text-on-ink-muted); }

.sec-num {
  font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .18em;
  color: var(--accent);
  margin: 0 0 .7rem;
  display: block;
}

/* ---------- type ---------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 1rem;
}
.sec--ink .eyebrow { color: var(--accent-bright); }

h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -.01em;
  margin: 0 0 1.1rem;
}
.hero h1 { font-size: clamp(3rem, 9vw, 6rem); }
.hero { padding-top: 4.5rem; padding-bottom: 4rem; }

.lede {
  font-size: 1.2rem; line-height: 1.55; margin: 0 0 1rem;
  max-width: 34em; color: var(--text);
}
.hero .lede { font-size: clamp(1.15rem, 2.2vw, 1.45rem); }

h2 {
  font-family: var(--font-display);
  font-size: 1.75rem; font-weight: 700; line-height: 1.2;
  margin: 2.75rem 0 1.25rem; padding-bottom: .6rem;
  border-bottom: 1px solid var(--rule);
}
/* On the home page each h2 opens its own <section>, which already supplies the
   space above it. In markdown pages the headings sit in the flow and need it. */
.sec-inner > h2:first-child,
.sec-num + h2 { margin-top: 0; }

h3 {
  font-family: var(--font-mono);
  font-size: .95rem; font-weight: 600; letter-spacing: .01em;
  margin: 2.25rem 0 .7rem;
}

h4 {
  font-family: var(--font-mono);
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); margin: 1.75rem 0 .5rem;
}

p { margin: 0 0 1.15rem; }
.muted { color: var(--text-muted); }

ul, ol { margin: 0 0 1.2rem; padding-left: 1.25rem; }
li { margin-bottom: .5rem; }
li::marker { color: var(--accent); }
.sec--ink li::marker { color: var(--accent-bright); }

a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

code {
  font-family: var(--font-mono); font-size: .84em;
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  padding: .1em .35em; border-radius: 2px; overflow-wrap: break-word;
}
.sec--ink code { background: rgba(113,148,247,.18); }

pre {
  background: var(--surface-raised);
  border-left: 3px solid var(--accent);
  padding: 1rem 1.1rem; overflow-x: auto;
  font-size: .84rem; line-height: 1.55;
}
pre code { background: none; padding: 0; font-size: inherit; }

blockquote {
  margin: 1.5rem 0; padding: .2rem 0 .2rem 1.2rem;
  border-left: 3px solid var(--accent); color: var(--text-muted);
}

.stamp {
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted);
  margin: 1rem 0 0;
}

.phead { margin-bottom: 2.75rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--rule); }

/* ---------- tables ---------- */

table {
  width: 100%; border-collapse: collapse; margin: 1.5rem 0 1.8rem;
  font-family: var(--font-mono); font-size: .78rem; line-height: 1.5;
  display: block; overflow-x: auto;
}
th, td {
  text-align: left; padding: .55rem .85rem .55rem 0;
  border-bottom: 1px solid var(--rule); vertical-align: top;
}
th {
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  font-size: .66rem; color: var(--text-muted); white-space: nowrap;
}
tr:hover td { background: color-mix(in srgb, var(--accent) 7%, transparent); }

.spec th { width: 11rem; }
.spec td { font-family: var(--font-body); font-size: .96rem; }

/* ---------- name gloss + have/build split ---------- */

.namegloss {
  font-size: 1rem; line-height: 1.6; max-width: 34em;
  color: var(--text-on-ink-muted);
  border-left: 2px solid var(--accent-bright);
  padding-left: 1rem; margin-top: 1.75rem;
}
.namegloss strong { color: #fff; font-weight: 600; }

.split { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 2rem 0; }
.split-col { flex: 1 1 17rem; }
.split-col h3 {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; margin: 0 0 .8rem; padding-bottom: .5rem;
  border-bottom: 2px solid currentColor;
}
.split-col--have h3  { color: var(--status-pass); }
.split-col--build h3 { color: var(--text-muted); }
.split-col ul { margin: 0; padding-left: 1.1rem; }
.split-col li { font-size: .93rem; margin-bottom: .45rem; }
.split-col--build li::marker { color: var(--text-muted); }

/* ---------- topology diagram (signature) ---------- */

.topo { margin: 2rem 0 .5rem; font-family: var(--font-mono); }

.topo-node {
  border: 1px solid var(--rule-on-ink);
  background: var(--ink-raised);
  padding: .85rem 1rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem;
}
.topo-node b { font-size: .88rem; font-weight: 600; color: #fff; }
.topo-node span { font-size: .72rem; color: var(--text-on-ink-muted); }

.topo-node--self {
  border: 2px solid var(--accent-bright);
  background: linear-gradient(180deg, rgba(40,66,158,.42), rgba(40,66,158,.16));
  padding: 1.1rem 1rem;
}
.topo-sub { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; width: 100%; }
.topo-sub div {
  flex: 1 1 12rem;
  border: 1px dashed var(--rule-on-ink);
  padding: .5rem .7rem;
  font-size: .7rem; color: var(--text-on-ink);
}
.topo-sub b { display: block; font-size: .74rem; margin-bottom: .15rem; }

/* Connector rung between nodes. */
.topo-link {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem 0 .5rem 1.4rem;
  position: relative;
  font-size: .68rem; color: var(--text-on-ink-muted);
}
.topo-link::before {
  content: ""; position: absolute; left: .55rem; top: 0; bottom: 0;
  border-left: 2px solid var(--accent-bright);
}
.topo-link em {
  font-style: normal; color: var(--accent-bright); letter-spacing: .04em;
}

.topo-fan { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; align-items: stretch; }
.topo-fan > div { flex: 1 1 13rem; display: flex; }
.topo-fan .topo-node { flex: 1; align-content: flex-start; }

/* ---------- status chips ---------- */

.chip {
  display: inline-block; font-family: var(--font-mono);
  font-size: .58rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  padding: .2em .55em; border: 1px solid currentColor; border-radius: 2px;
  vertical-align: .18em; margin-right: .5rem; white-space: nowrap;
}
.chip-fault { color: var(--status-fault); }
.chip-pass  { color: var(--status-pass); }
.chip-open  { color: var(--status-open); }
.sec--ink .chip-pass { color: #7fb587; }
.sec--ink .chip-open { color: #d7b155; }
.sec--ink .chip-fault{ color: #e8776c; }

/* ---------- stackup ---------- */

.stack {
  position: relative; padding-right: 4.5rem;
  border: 1px solid var(--rule); background: var(--surface-raised);
  margin: 1.5rem 0 .75rem;
}
.ly {
  display: flex; align-items: center; gap: .7rem; padding: 0 .9rem;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em;
  white-space: nowrap; overflow: hidden;
}
.ly b { font-weight: 600; }
.ly i { font-style: normal; opacity: .8; }
.ly.cu { height: 1.5rem; background: #c9a227; color: #17150c; }
.ly.cu.pwr { height: 1.5rem; background: var(--accent); color: #fff; }
.ly.di { height: 2.4rem; background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text-muted); }
.ly.di.tall { height: 4.5rem; }
.ly.di.known { background: color-mix(in srgb, var(--text) 16%, transparent); color: var(--text); }

.stack-total {
  position: absolute; top: 0; right: 0; bottom: 0; width: 4.5rem;
  display: flex; align-items: center; justify-content: center;
  border-left: 1px solid var(--rule);
}
.stack-total span {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; color: var(--text-muted); writing-mode: vertical-rl;
}

/* ---------- cards ---------- */

.cards { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.cards li { padding: 1.15rem 0; border-top: 1px solid var(--rule); margin: 0; }
.cards li:last-child { border-bottom: 1px solid var(--rule); }
.cards a {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; text-decoration: none;
}
.card-title {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 700;
  color: var(--link);
}
.cards a:hover .card-title { text-decoration: underline; text-underline-offset: 4px; }
.card-stamp {
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted);
}
.cards p { margin: .45rem 0 0; font-size: .96rem; color: var(--text-muted); max-width: 40em; }

/* ---------- figures ---------- */

figure { margin: 1.75rem 0; }
img { max-width: 100%; height: auto; display: block; }
figure img { border: 1px solid var(--rule); background: var(--surface-raised); }
figcaption {
  margin-top: .6rem; font-family: var(--font-mono);
  font-size: .72rem; color: var(--text-muted);
}

/* ---------- footer ---------- */

.foot {
  margin-top: 4rem; padding: 2rem clamp(1.25rem, 5vw, 4.5rem);
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  font-size: .78rem; color: var(--text-muted);
  font-family: var(--font-mono);
}
.foot a { color: var(--text-muted); }

/* ---------- floors ---------- */

a:focus-visible, .navtoggle:focus-visible {
  outline: 2px solid var(--accent-bright); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .shell { display: block; }
  .navtoggle {
    display: block; position: sticky; top: 0; z-index: 20;
    padding: .95rem 1.25rem; background: var(--ink); color: #fff;
    font-family: var(--font-mono); font-size: .72rem;
    letter-spacing: .18em; text-transform: uppercase; cursor: pointer;
  }
  .navtoggle::before { content: "\2261\00a0\00a0"; }
  .nav {
    display: none; width: auto; height: auto; position: static;
    padding: 1.75rem 1.25rem;
  }
  .navtoggle-input:checked ~ .nav { display: block; }
  .brand { margin-bottom: 1.5rem; }
  .wrap, .sec { padding-left: 1.25rem; padding-right: 1.25rem; }
  .hero { padding-top: 2.75rem; }
  .stack { padding-right: 3.25rem; }
  .stack-total { width: 3.25rem; }
  .ly { font-size: .6rem; gap: .45rem; padding: 0 .55rem; }
}


/* ---- J3 pinout diagram (generated by gen-connector.py) ------------------- */
/* Signal-group hues: the three HD banks share one hue at three steps, because
   they are one family; everything else is a distinct hue. Contrast against the
   paper ground is low for some of them, so the legend, the hover titles and the
   full pin table below all carry the same information. */
:root {
  --j3-gnd:   #8d8578;
  --j3-hda:   #86b6ef;
  --j3-hdb:   #3987e5;
  --j3-hdc:   #1c5cab;
  --j3-hp:    #eb6834;
  --j3-p3v3:  #eda100;
  --j3-p12v:  #9d2b20;
  --j3-i2c:   #1baf7a;
  --j3-prsnt: #4a3aa7;
  --j3-notch: rgba(32, 29, 24, 0.14);
  --bom-board: #e6dfcc;
  --bom-part: #2a78d6;
  --bom-part-back: #8d8578;
  --bom-hot: #eb6834;
  --bom-selrow: rgba(42, 120, 214, 0.13);
}
@media (prefers-color-scheme: dark) {
  :root {
    --j3-gnd:   #7d776c;
    --j3-hda:   #a9cdf7;
    --j3-hdb:   #5598e7;
    --j3-hdc:   #1c5cab;
    --j3-hp:    #d95926;
    --j3-p3v3:  #c98500;
    --j3-p12v:  #e8776c;
    --j3-i2c:   #199e70;
    --j3-prsnt: #9085e9;
    --j3-notch: rgba(217, 212, 197, 0.16);
    --bom-board: #191c24;
    --bom-part: #3987e5;
    --bom-part-back: #6c6a63;
    --bom-hot: #d95926;
    --bom-selrow: rgba(57, 135, 229, 0.18);
  }
}

.j3 .pad { stroke: var(--surface); stroke-width: 1; }
.j3 .pad:hover { stroke: var(--text); stroke-width: 1.5; }
.j3 .gnd { fill: var(--j3-gnd); }
.j3 .hda { fill: var(--j3-hda); }
.j3 .hdb { fill: var(--j3-hdb); }
.j3 .hdc { fill: var(--j3-hdc); }
.j3 .hp { fill: var(--j3-hp); }
.j3 .p3v3 { fill: var(--j3-p3v3); }
.j3 .p12v { fill: var(--j3-p12v); }
.j3 .i2c { fill: var(--j3-i2c); }
.j3 .prsnt { fill: var(--j3-prsnt); }
/* A slot cut clean through the card edge -- drawn as absence, not as a part. */
.j3-notch { fill: var(--surface); stroke: var(--text-muted); stroke-width: 1;
            stroke-dasharray: 3 3; }
.j3-num, .j3-row, .j3-face, .j3-notchlabel {
  font-family: var(--font-mono); fill: var(--text-muted); font-size: 11px;
}
.j3-row { font-size: 13px; fill: var(--text); }
.j3-face { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.j3-notchlabel { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

/* The diagram never squeezes below a readable pitch; on a narrow screen it
   scrolls inside its own box rather than compressing 120 contacts into a smear. */
.j3-scroll { overflow-x: auto; margin: .4rem 0 1.4rem; }
.j3 { display: block; min-width: 46rem; width: 100%; height: auto; overflow: visible; }

table.j3-legend { width: auto; min-width: 22rem; margin: 1.4rem 0 .4rem; }
table.j3-legend td:first-child { white-space: nowrap; }
table.j3-legend td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.j3-legend td.eg { color: var(--text-muted); }
table.j3-legend .sw {
  display: inline-block; width: .75rem; height: .75rem; border-radius: 2px;
  margin-right: .55rem; vertical-align: -0.05em; flex: none;
}
table.j3-legend .sw.gnd { background: var(--j3-gnd); }
table.j3-legend .sw.hda { background: var(--j3-hda); }
table.j3-legend .sw.hdb { background: var(--j3-hdb); }
table.j3-legend .sw.hdc { background: var(--j3-hdc); }
table.j3-legend .sw.hp { background: var(--j3-hp); }
table.j3-legend .sw.p3v3 { background: var(--j3-p3v3); }
table.j3-legend .sw.p12v { background: var(--j3-p12v); }
table.j3-legend .sw.i2c { background: var(--j3-i2c); }
table.j3-legend .sw.prsnt { background: var(--j3-prsnt); }

/* Front and back renders on the overview. */
.boardviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
              gap: 1.6rem; margin: 1.4rem 0 .6rem; }
.boardviews figure { margin: 0; }
.boardviews img { width: 100%; height: auto; border-radius: 3px; }
.boardnote { color: var(--text-muted); font-size: .92rem; }

/* ---- interactive BOM (generated by docs/gen-bom.py) --------------------- */
/* Breaks out of the 46rem prose measure: the board and the table sit side by
   side, and neither is usable squeezed into a column of body text. */
.bomview {
  width: min(calc(100vw - var(--sidebar) - 4rem), 82rem);
  margin: 1.4rem 0 1.6rem calc(-1 * clamp(1.25rem, 5vw, 4.5rem));
}
@media (max-width: 60rem) { .bomview { width: min(calc(100vw - 2rem), 82rem); } }

.bomtools {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.2rem;
  margin-bottom: .9rem;
}
.bomsearch { flex: 1 1 16rem; }
.bomsearch input {
  width: 100%; padding: .42rem .7rem;
  font-family: var(--font-mono); font-size: .78rem;
  color: var(--text); background: var(--surface-raised);
  border: 1px solid var(--rule); border-radius: 3px;
}
.bomsearch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bomsides { display: flex; }
.bomsides button {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em;
  padding: .42rem .8rem; cursor: pointer;
  color: var(--text-muted); background: var(--surface-raised);
  border: 1px solid var(--rule); border-left-width: 0;
}
.bomsides button:first-child { border-left-width: 1px; border-radius: 3px 0 0 3px; }
.bomsides button:last-child { border-radius: 0 3px 3px 0; }
.bomsides button.on { color: var(--surface); background: var(--accent); border-color: var(--accent); }
.bomsides button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bomcount { margin: 0; font-family: var(--font-mono); font-size: .72rem; color: var(--text-muted); }
.bomcount b { color: var(--text); }

.bomsplit { display: grid; grid-template-columns: minmax(18rem, 26rem) 1fr; gap: 1.4rem; }
@media (max-width: 60rem) { .bomsplit { grid-template-columns: 1fr; } }

.bomboardwrap {
  border: 1px solid var(--hair); border-radius: 3px; padding: .8rem;
  background: var(--surface-raised); align-self: start; position: sticky; top: 1rem;
}
.bomboard { display: block; width: 100%; height: auto; }
.bomboard .edge {
  fill: var(--bom-board); stroke: var(--text-muted); stroke-width: .25;
  vector-effect: non-scaling-stroke;
}
.bomboard .cmp {
  fill: var(--bom-part); stroke: none; cursor: pointer;
  transition: fill .08s linear, opacity .08s linear;
}
.bomboard .cmp.B { fill: var(--bom-part-back); }
.bomboard .cmp.unfit { fill: none; stroke: var(--text-muted); stroke-width: .18;
                       vector-effect: non-scaling-stroke; }
.bomboard .cmp.dim { opacity: .12; pointer-events: none; }
.bomboard .cmp.hot { fill: var(--bom-hot); }
/* With a row selected, everything else recedes so the highlight actually reads. */
.bomview.has-sel .bomboard .cmp:not(.hot) { opacity: .22; }
.bomboard .cmp:hover { fill: var(--bom-hot); }
.bomboard .cmp:focus-visible { outline: none; fill: var(--bom-hot); }

.bomtablewrap { overflow: auto; max-height: min(78vh, 48rem); }
table.bomtable { width: 100%; }
table.bomtable thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
table.bomtable tbody tr { cursor: pointer; }
table.bomtable tbody tr:hover td { background: var(--surface-raised); }
table.bomtable tbody tr.sel td { background: var(--bom-selrow); }
table.bomtable tbody tr.unfitted td { color: var(--text-muted); font-style: italic; }
table.bomtable tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
table.bomtable td.refs { max-width: 20rem; word-break: break-word; color: var(--text-muted); }
table.bomtable td.num { text-align: right; font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- build-path picker -------------------------------------------------- */
/* The reader chooses a Linux build path once and the whole page follows.
   Everything below is scoped so that with JavaScript off, no block is hidden:
   both paths render, each under its own label. */

.pathpick {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--link);
  background: var(--surface-raised);
  padding: 1rem 1.15rem 0.9rem;
  margin: 2rem 0;
}
.pathpick-q {
  margin: 0 0 0.7rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.pathpick-opts { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pathpick-opt {
  flex: 1 1 12rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: left;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.pathpick-opt b { font-family: var(--font-display); font-size: 1rem; }
.pathpick-opt i {
  font-style: normal;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.35;
}
.pathpick-opt:hover { border-color: var(--link); }
.pathpick-opt:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.pathpick-opt[aria-pressed="true"] {
  border-color: var(--link);
  box-shadow: inset 3px 0 0 var(--link);
  background: var(--surface-raised);
}
.pathpick-hint {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.pathpick-nojs { margin: 0; font-size: 0.9rem; color: var(--text-muted); }

/* The buttons do nothing without JavaScript, so do not offer them -- and do not
   leave the question hanging unanswerable either. */
html:not([data-pathjs]) .pathpick-q,
html:not([data-pathjs]) .pathpick-opts,
html:not([data-pathjs]) .pathpick-hint { display: none; }
[data-pathjs] .pathpick-nojs { display: none; }

.pathblock-tag {
  margin: 0 0 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
html:not([data-pathjs]) .pathblock {
  border-left: 2px solid var(--rule);
  padding-left: 1rem;
  margin: 1.5rem 0;
}

/* With JavaScript, show only the chosen path. CSS cannot compare one attribute
   against another, so each path needs its own pair of rules. */
[data-pathjs] .pathblock-tag { display: none; }
[data-pathjs] .pathblock { display: none; }
[data-pathjs][data-path="petalinux"] .pathblock[data-path="petalinux"],
[data-pathjs][data-path="yocto"]     .pathblock[data-path="yocto"] { display: block; }

/* ---- assembled-board photographs -------------------------------------- */
/* The hero photograph sits below the copy at the same 46rem measure as every
   other section, so the top of the page lines up with what follows it. */
.herogrid { display: block; }
.hero-copy > :last-child { margin-bottom: 0; }

.hero-shot { margin: 2.25rem 0 0; }
.hero-shot img {
  width: 100%; height: auto; display: block;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.hero-shot figcaption {
  font-size: .78rem; margin-top: .65rem;
  color: var(--text-on-ink-muted);
  font-family: var(--font-mono);
}

.boardshot { margin: 1.4rem 0 0; }
.boardshot img {
  width: 100%; height: auto; display: block;
  border-radius: 4px; border: 1px solid var(--rule);
}
.boardshot figcaption {
  font-size: .92rem; margin-top: .7rem; line-height: 1.5;
  color: var(--text-muted);
}
.boardsub {
  margin-top: 2.25rem;
  font-size: 1rem; letter-spacing: .02em;
}

/* ---- schematic walkthrough (generated by docs/gen-schematic.py) --------- */
/* The diagram is the tab control. Panels are hidden only once the script has
   marked the document, so without JavaScript every sheet stays on the page. */
.schem { margin: 1.6rem 0 2rem; }
.schem-map { margin-bottom: 1.5rem; }
.schem-svg { width: 100%; height: auto; display: block; color: var(--text); }
.schem-g { cursor: pointer; }
.schem-box {
  fill: var(--surface-raised); stroke: var(--rule); stroke-width: 1;
}
/* The hub reads as the hub through its accent outline, not through a
   different fill: --surface is the page background in dark mode. */
.schem-box--hub { fill: var(--surface-raised); stroke: var(--accent); stroke-width: 1.5; }
.schem-g:hover .schem-box { stroke: var(--accent); }
.schem-g[aria-selected="true"] .schem-box { stroke: var(--accent); stroke-width: 2.5; }
.schem-g:focus-visible { outline: none; }
.schem-g:focus-visible .schem-box { stroke: var(--accent); stroke-width: 2.5; }
.schem-box-name {
  font-family: var(--font-body, inherit); font-size: 13px; font-weight: 600;
  fill: var(--text);
}
.schem-box-meta { font-family: var(--font-mono); font-size: 9.5px; fill: var(--text-muted); }
.schem-edge { stroke: var(--text-muted); stroke-width: 1.2; opacity: .55; }
.schem-edge--global { stroke-dasharray: 4 3; }
/* Halo in the page colour so an edge passing behind a label does not run
   through the text. paint-order puts the stroke under the fill. */
.schem-edge-label {
  font-family: var(--font-mono); font-size: 9px; fill: var(--text-muted);
  paint-order: stroke; stroke: var(--surface); stroke-width: 3px;
  stroke-linejoin: round;
}

.schem-panel { border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.schem-panel h3 { margin: 0 0 .5rem; }
.schem-file { font-family: var(--font-mono); font-size: .78rem; color: var(--text-muted); }
.schem-sig-head {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-muted); margin: 1.2rem 0 .5rem;
}
.schem-sigs { list-style: none; margin: 0; padding: 0;
  display: grid; gap: .18rem .9rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.schem-sigs li {
  display: flex; justify-content: space-between; align-items: baseline; gap: .6rem;
  border-bottom: 1px dotted var(--rule); padding-bottom: .18rem; font-size: .84rem;
}
.schem-dir { font-family: var(--font-mono); font-size: .66rem; color: var(--text-muted); }
[data-schemjs] .schem-panel[aria-hidden="true"] { display: none; }
[data-schemjs] .schem-panel { border-top: none; padding-top: 0; }