/* lc-kit 1 sha256:01a3593f5a493ef218f9acd4c7ba61a1d0033705a1d5e2420c07b28e9c751ab0 */
/* 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;
  /* one monospace stack for every site (pad names, addresses, code, keys) */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --bg: #ffffff;
  --bg-raised: #f8fafc;
  --bg-sunken: #eef2f6;
  --border: #d8e0e8;
  /* A field's edge is the only thing that says "type here", so it needs 3:1
     on the page (WCAG 1.4.11); --border is a divider and stays quiet.
     3.56:1 on --bg, 3.41:1 on --bg-raised. */
  --border-field: #7d8996;
  --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;
  --border-field: #6b737d;   /* 3.77:1 on --bg, 3.40:1 on --bg-raised */
  --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%; }

/* Two page shapes. An app shell (the layout viewer, the power tree) is one
   window tall and scrolls only inside its panes. A document page (the
   pinout, the memory map, education) scrolls as a whole: its body carries
   class="lc-doc" and grows with its content -- a body held to the window
   would be the sticky title bar's containing block, and the bar would ride
   off the top after one screen. */
body.lc-doc { height: auto; min-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; }

/* Monospace text in the one stack (zero specificity: a site's own rule wins) */
:where(code, kbd, samp, pre) { font-family: var(--mono); }

:where(button, select, input, a, [role="button"][tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

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

/* Sticky on every site (from 700px up; a phone's bar is too tall to pin, see
   below): an app-shell page never scrolls, so it changes nothing there; a
   document page (body.lc-doc: the pinout, the memory map, education) keeps
   its title bar in view, the same everywhere. */
.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);
  position: sticky;
  top: 0;
  z-index: 10;
  font-size: 14px;  /* (the bar's own, whatever size a site sets its body text) */
}

/* 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 Libre Computer sites (written by sync.py, NAV). It
   says which site this is and what the others are. The current one is a link
   to its own root, marked aria-current: on a multi-page site it is the way
   home, and on a tool it resets the page (the query is dropped). */
/* 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] {
  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);
}

/* The board's own pages, beside the board picker (setBoardLinks). Small and
   dim like the site links, so the picker and the search stay the controls. */
.lc-board-links {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 13px;
}
.lc-board-links[hidden] { display: none; }
.lc-board-links a { color: var(--text-dim); white-space: nowrap; }
.lc-board-links a:hover { color: var(--accent); text-decoration: none; }
.lc-board-links a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
@media (max-width: 819.98px) {
  .lc-board-links a { display: inline-block; padding: 10px 0; line-height: 20px; }
}

/* The second bar under the title bar, for a family of sites behind one switcher
   entry (Software: U-Boot, Memory, Linux). Its label and site links are
   written by sync.py (SUBNAV); the site's own pages sit at the far end, in
   .lc-subnav-pages. The same voice as education's section bar. */
.lc-subnav {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding: 7px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  align-items: baseline;
}
.lc-subnav-sites,
.lc-subnav-pages {
  display: flex;
  align-items: baseline;
  gap: 4px 18px;
}
.lc-subnav-pages { margin-left: auto; }
.lc-subnav a { color: var(--text-dim); white-space: nowrap; }
.lc-subnav a:hover { color: var(--accent); text-decoration: none; }
.lc-subnav a[aria-current] { color: var(--text); font-weight: 600; }
.lc-subnav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.lc-subnav-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
/* A phone: one sideways-scrolling row, not a wrap of single links. */
@media (max-width: 819.98px) {
  .lc-subnav {
    flex-wrap: nowrap;
    padding-top: 0;
    padding-bottom: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .lc-subnav::-webkit-scrollbar { display: none; }
  .lc-subnav a { display: inline-block; padding: 10px 0; line-height: 20px; }
  .lc-subnav-label,
  .lc-subnav-sites,
  .lc-subnav-pages { flex: none; }
}

/* 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-field);
  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); }

/* ---- skip link, visually hidden ----------------------------------------- */

/* The first Tab stop on every page: past the title bar to the page's own
   content (<a class="lc-skip" href="#main">, the target the page's <main>,
   id="main" unless it already has an id). */
.lc-skip {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 50;
  padding: 6px 10px;
  background: var(--bg-raised);
  color: var(--text);
  border: 1px solid var(--border-field);
  border-radius: 5px;
}
.lc-skip:focus { left: 8px; top: 8px; }

/* Read by a screen reader, not shown: a page heading the layout carries
   visually already, a status line. */
.lc-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- 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, at every width. The topbar wraps, and
   the button is its last child, so whenever the controls filled the first row
   (a phone; a tool's board picker, board links and search below ~1370px) it
   wrapped onto a line of its own at the left -- the one control whose
   position a reader relies on, moving with the content around it. Pinned to
   the top right it is always in the same place, and the row it used to take
   goes back to the page. The padding reserves its width so a long select
   cannot run underneath. (The bar is positioned -- sticky, or relative on a
   phone -- so it is the button's containing block.) The reserve applies to
   every row, so when a tool's controls wrap to a second row (about 820 to
   1430px) that row ends 104px short of the edge: the cost of a button that
   never moves. */
.lc-topbar { 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; }
}

/* 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; }
  /* The search box grows into whatever its row leaves, so the board's own
     links (setBoardLinks) share its row instead of taking one of their own. */
  .lc-controls input[type="search"] { flex: 1 1 9rem; width: auto; min-width: 0; }
}

/* 16px exactly on a narrow screen or any touch screen (a tablet is wider
   than the narrow layout): below it Safari zooms the page when a field takes
   focus, and the only way back out of that zoom is a pinch. */
@media (max-width: 819.98px), (pointer: coarse) {
  .lc-controls select,
  .lc-controls input { font-size: 16px; }
}

/* 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) {
  /* Four rows of bar (brand, sites, picker, search) are a quarter of a phone
     screen: on a phone the bar scrolls away with the page instead of pinning.
     Still positioned, so the theme button keeps its corner. */
  .lc-topbar { position: relative; }
  .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: var(--mono); }
/* 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; }

/* A data table, the same on every site: ruled rows, small dim uppercase
   column headers like the panel headings above. A site adds only what its
   data needs (a sticky header, a highlighted row, a reading size). Wrap it in
   .lc-table-scroll where it may be wider than a phone: the table keeps its
   columns and scrolls sideways inside its own box, never the page. */
.lc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.lc-table caption { text-align: left; color: var(--text-dim); padding-bottom: .4rem; }
.lc-table th,
.lc-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--border);
}
.lc-table thead th,
.lc-table > tr:first-child > th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--text-dim);
}
.lc-table tbody th { font-weight: 600; }
.lc-table-scroll { overflow-x: auto; }

/* The small dim uppercase label: a panel heading, a column title, a
   section kicker -- the same voice as .lc-panel h3 and a table's header. */
.lc-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--text-dim);
}

/* A colour swatch: one small rounded square, wherever a colour is keyed (a
   legend, a slot in a list, a toggle). The site sets its colour; a site that
   also shows a state with it (the power tree's on/off) adds that itself. */
.lc-swatch {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  flex: none;
  vertical-align: -1px;
}

/* The hover tooltip: follows the theme like the panels, never a fixed dark
   box. The site positions it (fixed to the window or absolute in its stage)
   and picks its font (the pinout's pad names are monospace). */
.lc-tooltip {
  z-index: 20;
  pointer-events: none;
  max-width: 340px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-raised);
  color: var(--text);
  box-shadow: var(--shadow);
  font-size: 12px;
}
.lc-tooltip[hidden] { display: none; }

/* A chip: a small bordered token that picks one of a set (a mux on the
   pinout's pin, a step of the power sequence). It is a <button> with
   aria-pressed, so it takes focus and says which one is picked. Pressed is
   an inset accent ring plus the accent wash: not an outline, which is the
   focus ring, and not the border, which a site may use for a state (the
   power tool's on and absent). The site adds a dot or a font. */
.lc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.lc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
}
.lc-chip:hover { border-color: var(--text-dim); }
.lc-chip[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px var(--accent);
  background-color: color-mix(in srgb, var(--accent) 16%, var(--bg));
  color: var(--text);
}

.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-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; }