/* lc-kit 1 sha256:3826ac490290828bea026f076ec9db5f6634e213db90dc56bda41ad94e5b64cb */
/* Libre Computer hardware-tool shell — shared by the GPIO pinout, the board
   layout viewer and the power tree.
 *
 * These two sites had grown the same header, the same board picker, the same
 * search box and the same footer twice, with the same seven token names holding
 * the same seven values in both. This is that shell, defined once.
 *
 * THEME. Three states, matching libre.computer: light, dark, and auto, which
 * follows the OS and is the default -- a visitor whose desktop is dark should
 * not have to ask twice. The switch is a `dark` class on <html>, set before
 * first paint by the inline script in each page's <head>, so a dark visitor
 * never sees a white flash. Light is the base and dark is the override, because
 * a stylesheet that loses its media query should degrade to the more legible
 * of the two.
 *
 * The dark values are exactly what both sites shipped before this file existed,
 * so adopting the kit changes nothing for a dark visitor and adds a light theme
 * that did not exist.
 *
 * WHAT BELONGS HERE. The shell and nothing else: page frame, top bar, brand,
 * the controls slot, notices, footer, form controls, focus, and the theme
 * button. A site's own subject matter -- the pinout's mux-class colours, the
 * layout viewer's copper-layer colours -- stays in that site's stylesheet,
 * because nothing is shared by having one file know about both.
 *
 * This file is VENDORED. Edit tools/lc-ui-kit/lc-kit.css in the monorepo and
 * run tools/lc-ui-kit/sync.py; a hand-edit here fails each site's CI.
 */

:root {
  color-scheme: light;

  --bg: #ffffff;
  --bg-raised: #f8fafc;
  --bg-sunken: #eef2f6;
  --border: #d8e0e8;
  --text: #0f172a;
  --text-dim: #5a6673;
  /* Blue TEXT on the page ground, so it darkens on white (#0077b0 is 4.92:1)
     and lightens on the dark ground below. Same two shades libre.computer
     uses, and for the same contrast reason. */
  --accent: #0077b0;
  --brass: #8a6a10;
  --warn: #b45309;
  --danger: #b42318;

  --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
}

html.dark {
  color-scheme: dark;

  --bg: #14161a;
  --bg-raised: #1d2026;
  --bg-sunken: #0e1013;
  --border: #33383f;
  --text: #e8eaed;
  --text-dim: #9aa0a6;
  --accent: #4da3ff;
  --brass: #c9a227;
  --warn: #f76b15;
  --danger: #f5a3a6;

  --shadow: none;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:where(button, select, input, a):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---- top bar ---------------------------------------------------------- */

.lc-topbar {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
  z-index: 10;
}

/* CENTRED, NOT BASELINE-ALIGNED. The name's first flex item is the logo, an
   empty box, so the name's baseline is synthesised from the logo's bottom edge
   -- and baseline alignment sat the site links' text on that edge, about 6px
   below the brand text and the controls. Centring puts the logo, the name, the
   links and (via the bar's own centring) the controls on one centre line. */
.lc-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 9px;
  min-width: 0;
}

.lc-brand-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--text);
  white-space: nowrap;
}

/* The Libre Computer mark before the name, light and dark cuts. Embedded as
   data URIs -- libre.computer's own navLogo.webp and navLogo_dark.webp,
   about 2 KB each -- so every site gets it from this one vendored file with
   no image to copy, and nothing loads from another origin. Decorative: the
   name beside it is the link text. */
.lc-brand-name::before {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  background: center / contain no-repeat url("data:image/webp;base64,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");
}
html.dark .lc-brand-name::before {
  background-image: url("data:image/webp;base64,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");
}
.lc-brand-name:hover { text-decoration: none; color: var(--accent); }

.lc-brand-sub {
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
}

/* SIGNAL CLASS PALETTE -- shared, because the two tools colour the SAME pins.
   The pinout draws a board's header and the layout draws that header's pads on
   the PCB, and a visitor moving between them reads the colour as meaning the
   same thing. It did not live here at first, when only one tool used it; a
   second copy in the layout's own stylesheet would be a second answer the
   first time a colour changed. Both sites now take the one definition, and
   check-kit.py fails the build if a vendored copy drifts.

   RAILS RAMP BY VOLTAGE, red through orange to yellow as the supply falls:
   12V and PoE deepest, 5V red, 3.3V orange, 1.8V yellow. The ramp used to run
   red into brown, which made 3.3V a burnt orange and 1.8V a tan -- neither
   nameable as a colour, and the three rails a reader actually reaches for on
   a header are the three that have to be told apart at a glance.

   I2C yellow / SPI blue / GPIO green match the board silkscreen. */
:root {
  --c-poe: #6e0011;
  --c-power12v: #b8000f;
  --c-power5v: #d32f2f;
  --c-power3v3: #e8730c;
  --c-powerlv: #e0a800;   /* 1.8V / 3.0V */
  --c-gnd: #454b54;
  --c-nc: #6b6547;        /* not connected */
  --c-gpio: #2f7d3f;
  --c-i2c: #9a7b0a;
  --c-spi: #1f5fd0;
  --c-uart: #7c30cc;
  --c-pwm: #c4295a;
  --c-i2s: #0b6f80;
  --c-pcm: #0b5566;
  --c-tdm: #13876b;
  --c-spdif: #7a2490;
  --c-pdm: #4a7a0a;
  --c-dac: #076a4c;
  --c-adc: #5b8a12;
  --c-clk: #6b737b;
  --c-jtag: #c25a06;
  --c-cec: #5334c4;
  --c-ir: #c33a6a;
  --c-sdio: #0d7f95;
  --c-nand: #6d5449;
  --c-video: #a81c4c;
  --c-pcie: #6a4fc4;
  --c-usb: #1f6fb5;
  --c-eth: #0d8f6a;
  --c-misc: #5a6570;
}

/* THE SERIAL CONSOLE HEADER IS COLOURED AS THE CABLE, not as a signal class.
   Ground black, TX white, RX green -- the USB-TTL lead everyone plugs into it,
   and the colours our own documentation has always named for that header:
   "2J1 Connector Highlighted in Red: Ground (BLACK) TX (WHITE) RX (GREEN)".
   Someone at the board with the cable in their hand is matching wire to pin,
   so the pin should be the colour of the wire.

   These are wire colours, so they do NOT flip with the theme -- a black lead
   is black on both. They sit on the drawn board rather than on the page. */
:root, html.dark {
  --c-wire-gnd: #14161a;
  --c-wire-tx:  #f3f5f7;
  --c-wire-rx:  #2ea043;
}

html.dark {
  --c-poe: #6e0011;
  --c-power12v: #cc0f1b;
  --c-power5v: #e5484d;
  --c-power3v3: #f76b15;
  --c-powerlv: #f5c518;   /* 1.8V / 3.0V */
  --c-gnd: #454b54;
  --c-nc: #3c3a2e;
  --c-gpio: #46a758;
  --c-i2c: #eac54f;
  --c-spi: #3b82f6;
  --c-uart: #a855f7;
  --c-pwm: #ec5f87;
  --c-i2s: #1098ad;
  --c-pcm: #0b7285;
  --c-tdm: #63e6be;
  --c-spdif: #862e9e;
  --c-pdm: #5c940d;
  --c-dac: #087f5b;
  --c-adc: #94d82d;
  --c-clk: #adb5bd;
  --c-jtag: #ff922b;
  --c-cec: #7048e8;
  --c-ir: #f06595;
  --c-sdio: #66d9e8;
  --c-nand: #8d6e63;
  --c-video: #c2255c;
  --c-pcie: #b197fc;
  --c-usb: #74c0fc;
  --c-eth: #12b886;
  --c-misc: #6c757d;
}

/* The switch between the two hardware tools. It sits where the subtitle used
   to, because it says the same thing -- which tool this is -- and additionally
   says what the other one is, which a visitor otherwise has no way to find out
   from here. The current tool stays plain text: a link to the page you are on
   is a dead control that costs a click to discover. */
/* The site links wrap. Five sites in one unbreakable row ran 131px past a
   375px phone and dragged every page sideways; wrapped, the row simply gets
   taller. The brand wraps for the same reason. */
.lc-sites {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 13px;
  min-width: 0;
}

.lc-site {
  white-space: nowrap;
  color: var(--text-dim);
}
.lc-site[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}
a.lc-site:hover { color: var(--accent); text-decoration: none; }
a.lc-site:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Separator drawn rather than typed, so it is not read out as a word and not
   selected when the visitor copies the heading. */
.lc-site + .lc-site::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 11px;
  margin-right: 10px;
  vertical-align: -1px;
  background: var(--border);
}

/* A pill for a state the visitor should not have to infer, e.g. that the board
   picker is currently listing boards nobody can buy yet. */
.lc-flag {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--warn);
  /* Page ground, not white. White clears on the light caution brown and
     fails on the dark theme's bright caution orange; the dark ground on
     that orange clears. */
  color: var(--bg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  white-space: nowrap;
}

/* A <select> sizes itself to its widest option and will not shrink below it,
   so without the min-width:0 / max-width pair a long board name pushes the
   whole bar sideways on a phone -- measured at 495px of control on a 375px
   viewport, which moved the entire page 125px. A flex item's automatic minimum
   is its content, so flex-shrink alone never reaches it. */
.lc-controls {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-left: auto;
  min-width: 0;
  max-width: 100%;
}
.lc-controls label { color: var(--text-dim); font-size: 13px; }
.lc-controls select { min-width: 0; max-width: 100%; }

select,
input[type="search"],
input[type="text"] {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px 8px;
  font: inherit;
  font-size: 13px;
}
select:hover,
input[type="search"]:hover,
input[type="text"]:hover { border-color: var(--text-dim); }
input[type="search"] { width: 190px; }
input[type="search"]::placeholder { color: var(--text-dim); }

/* ---- theme button ------------------------------------------------------ */

.lc-theme-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  white-space: nowrap;
}
.lc-theme-btn:hover { border-color: var(--text-dim); }
.lc-theme-icon { font-size: 1rem; line-height: 1; }

/* Auto is the default, so it reads as the quiet state; an explicit choice is
   marked, which is the whole point of showing the state rather than a bare
   "Theme". */
.lc-theme-btn[data-theme="auto"] { color: var(--text-dim); }
.lc-theme-btn[data-theme="light"],
.lc-theme-btn[data-theme="dark"] { border-color: currentColor; }

/* THE THEME CONTROL KEEPS THE CORNER. The topbar wraps, and the button is its
   last child, so on a narrow screen it wrapped onto a line of its own below
   the board picker and the search box -- the one control whose position a
   reader relies on, moving with the content around it. Pinned to the top
   right, it is where it is on a desktop, and the row it used to occupy goes
   back to the page. The padding reserves its width so a long select cannot
   run underneath. */
@media (max-width: 820px) {
  .lc-topbar { position: relative; padding-right: 104px; }
  .lc-theme-btn { position: absolute; top: 8px; right: 16px; }
}

@media (max-width: 560px) {
  /* The label goes before the control does: the icon plus the title attribute
     still say which state is active. */
  .lc-theme-label { display: none; }
  .lc-topbar { padding-right: 56px; }
}

/* THE NARROW BAR IS DELIBERATE ROWS, not whatever wrapping leaves. Below the
   desktop width the brand and the site links share the first row with the
   pinned theme button, whose width that row (and only that row) reserves; the
   controls get the next row and start at the left edge instead of floating
   right. The site links never wrap: a wrapped bar put one link and a dangling
   separator on a line of their own. When they do not fit they scroll
   sideways. Every link and control is at least 40px tall, the touch minimum.
   819.98px, not 820px: at exactly 820 the bar keeps the layout it already had
   there. */
@media (max-width: 819.98px) {
  .lc-topbar { padding: 8px 16px 10px; row-gap: 6px; }
  .lc-brand {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0 14px;
    padding-right: 88px;
  }
  .lc-brand-name { flex: none; min-height: 40px; }
  .lc-theme-btn { min-width: 40px; min-height: 40px; justify-content: center; }

  /* No visible scrollbar: it would sit on top of the links. */
  .lc-sites {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .lc-sites::-webkit-scrollbar { display: none; }
  .lc-site { display: inline-block; padding: 10px 0; line-height: 20px; }

  .lc-controls { flex: 1 1 100%; margin-left: 0; }
  .lc-controls select,
  .lc-controls input { min-height: 40px; }
}

/* A phone has no room for the links beside the brand, so they take a row of
   their own under it, and the theme button keeps the brand row's corner. The
   row bleeds to the screen edges, so a link scrolled under the edge is cut by
   the screen rather than by the bar's padding -- the cut-off word is the cue
   that the row scrolls. */
@media (max-width: 699.98px) {
  .lc-brand { flex-wrap: wrap; padding-right: 0; }
  .lc-sites {
    flex: 0 0 calc(100% + 32px);
    margin: 0 -16px;
    padding: 0 16px;
  }
}

/* ---- notices ----------------------------------------------------------- */

.lc-notices { flex: none; }

.lc-notice {
  margin: 0;
  padding: 7px 16px;
  font-size: 13px;
  background: color-mix(in srgb, var(--warn) 14%, var(--bg));
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.lc-notice.error {
  background: color-mix(in srgb, var(--danger) 14%, var(--bg));
}
.lc-notice code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* The accent on the caution wash is too light for the notice's type.
   The underline is what says the words are a link. */
.lc-notice a { color: var(--text); text-decoration: underline; }

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

.lc-footer {
  flex: none;
  padding: 7px 16px;
  background: var(--bg-raised);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-dim);
}

/* ---- shared bits both tools grew separately ---------------------------- */

.lc-main { flex: 1; display: flex; min-height: 0; }

.lc-panel {
  flex: none;
  background: var(--bg-raised);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 12px;
}

.lc-panel h3 {
  margin: 16px 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--text-dim);
}
.lc-panel h3:first-child { margin-top: 0; }

.lc-seg { display: flex; gap: 5px; }
.lc-seg button {
  flex: 1;
  padding: 6px 8px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-dim);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.lc-seg button:hover { border-color: var(--text-dim); color: var(--text); }
.lc-seg button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 16%, var(--bg));
  border-color: var(--accent);
  /* The accent is the border and the wash. As 12px ink on the light wash
     it is too light. The words stay page ink in both themes. */
  color: var(--text);
}

.lc-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 2px;
  padding: 4px 7px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.lc-toggle:hover { background: var(--bg-sunken); }
/* Off is dimmer type and a faded swatch, not a faded control. Opacity on
   the whole row takes the label below body text in both themes. */
.lc-toggle[aria-pressed="false"] { color: var(--text-dim); }
.lc-toggle[aria-pressed="false"] .lc-swatch { opacity: .45; }
.lc-toggle .lc-swatch { flex: none; width: 11px; height: 11px; border-radius: 2px; }
.lc-toggle .lc-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lc-toggle .lc-count { flex: none; color: var(--text-dim); font-size: 11px; }

[hidden] { display: none !important; }