/* Microphones.Like.Audio — all page styles.
   Loaded by index.html; the markup carries no <style> block of its own.

   The house colour is #f4902c (R244 G144 B44). It drives --accent: every
   divider, rule and highlight is a step of that hue. Two companions keep it
   readable: --accent-ink is what sits on top of a filled accent surface, and
   --accent-text is the darkened step used when the accent has to be small
   text on the page background — #f4902c itself is far too light there. */

:root {
  --bg: #f9f6f2;
  --panel: #ffffff;
  --panel-2: #fdf9f4;
  --border: #ecd6bc;
  --border-soft: #f5e7d7;
  --text: #1c1710;
  --muted: #756853;
  --faint: #a3937c;
  --accent: #f4902c;
  --accent-text: #a35505;
  --accent-ink: #22160a;
  --accent-soft: #fdeada;
  --chip: #f4ece2;
  --shadow: 0 1px 2px rgba(16, 22, 34, .06);
  /* Categorical series, fixed slot order — validated for CVD separation
     against this surface. Never cycled, never reassigned by rank. */
  --s1: #2a78d6;  /* condenser */
  --s2: #eb6834;  /* dynamic   */
  --s3: #1baf7a;  /* ribbon    */
  --s4: #eda100;  /* other     */
  --s5: #e87ba4;  /* hybrid    */
  --s6: #7c5cd6;  /* wireless  */
  --s7: #0d8b99;  /* mixed kit */
  --grid: #f0dcc4;
}
:root:not([data-theme="light"]) {
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14110d;
    --panel: #1b1712;
    --panel-2: #211c15;
    --border: #3d2e1d;
    --border-soft: #2c2318;
    --text: #efe7dc;
    --muted: #a8977f;
    --faint: #7a6a55;
    --accent: #f4902c;
    --accent-text: #f4902c;
    --accent-ink: #22160a;
    --accent-soft: #3a2611;
    --chip: #2a231a;
    --shadow: none;
    /* Same hues, re-stepped for the dark surface — not an automatic flip. */
    --s1: #3987e5;
    --s2: #d95926;
    --s3: #199e70;
    --s4: #c98500;
    --s5: #d55181;
    --s6: #8f74e0;
    --s7: #19a0b0;
    --grid: #33281a;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14110d;
  --panel: #1b1712;
  --panel-2: #211c15;
  --border: #3d2e1d;
  --border-soft: #2c2318;
  --text: #efe7dc;
  --muted: #a8977f;
  --faint: #7a6a55;
  --accent: #f4902c;
  --accent-text: #f4902c;
  --accent-ink: #22160a;
  --accent-soft: #3a2611;
  --chip: #2a231a;
  --shadow: none;
  --s1: #3987e5;
  --s2: #d95926;
  --s3: #199e70;
  --s4: #c98500;
  --s5: #d55181;
  --s6: #8f74e0;
  --s7: #19a0b0;
  --grid: #33281a;
}

* { box-sizing: border-box; }
/* Beats the display: grid/flex the view containers set. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }

/* ---------- header ---------- */
header {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex: none;
}
.brandmark { font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
/* The capsule mark, the same file the browser tab loads. */
.logo { width: 22px; height: 22px; vertical-align: -5px; margin-right: 7px; }
.brandmark small { display: block; font-weight: 400; font-size: 11px; color: var(--faint); letter-spacing: 0; }
#search {
  flex: 1; max-width: 460px;
  padding: 7px 11px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
}
#search:focus { outline: none; border-color: var(--accent); }
.nav { display: flex; gap: 2px; flex: none; }
.navlink {
  padding: 6px 12px; border-radius: 7px; font-size: 13px;
  color: var(--muted); text-decoration: none; white-space: nowrap;
}
.navlink:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
.navlink.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }

/* ---------- polar-pattern picker ----------
   Its own strip below the tabs and above the facet chips. Eleven 30px buttons
   are more than a header can hold at any laptop width, and they filter the
   same two panes the chips underneath them do — so they belong with the
   filters, not with the navigation. */
.patbar {
  flex: none; display: flex; flex-direction: column; gap: 4px;
  padding: 6px 14px; background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.pat {
  width: 28px; height: 28px; padding: 0;
  display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 7px; cursor: pointer; color: var(--muted);
}
.pat:hover { border-color: var(--accent); color: var(--text); }
.pat.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pat svg { width: 22px; height: 22px; display: block; }
.pat svg .fillp { fill: currentColor; opacity: .95; }
.pat svg .strokep { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .95; }
.pat.on svg .fillp, .pat.on svg .strokep { opacity: 1; stroke-width: 2; }

.spacer { flex: 1; }
.stat { font-size: 12px; color: var(--muted); white-space: nowrap; }
.iconbtn {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 7px; padding: 6px 10px; cursor: pointer; font-size: 13px;
}
.iconbtn:hover { border-color: var(--accent); }

/* ---------- install offer ----------
   A bar along the bottom, shown once. It floats over the panes rather than
   pushing them: the app is usable while it is up, and dismissing it must not
   reflow what someone is reading. */
.installbar {
  position: fixed; z-index: 40; left: 50%; bottom: 14px;
  transform: translate(-50%, 130%);
  transition: transform .22s ease;
  display: flex; align-items: center; gap: 12px;
  width: min(560px, calc(100vw - 24px));
  padding: 11px 14px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .28);
}
.installbar.up { transform: translate(-50%, 0); }
.installbar .ibicon { flex: none; }
.ibwords { flex: 1; min-width: 0; line-height: 1.35; }
.ibwords b { display: block; font-size: 13.5px; }
.ibwords span { font-size: 11.5px; color: var(--muted); }
.ibacts { flex: none; display: flex; gap: 6px; }
.ibacts .chip { padding: 5px 11px; font-size: 12px; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

@media (max-width: 520px) {
  .installbar { flex-wrap: wrap; }
  .ibacts { width: 100%; justify-content: flex-end; }
}

/* ---------- layout ---------- */
main {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 290px 340px minmax(0, 1fr);
  gap: 1px;
  background: var(--border);
}
.pane { background: var(--bg); min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.pane-head {
  flex: none; padding: 4px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px;
  min-height: 38px;
}
.pane-head h2 {
  margin: 0; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--faint); font-weight: 600;
  flex: none;
}
.ribbon-icons {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 3px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ribbon-icons::-webkit-scrollbar {
  display: none;
}
.pane-controls {
  margin-left: auto;
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.pane-controls select {
  font-size: 11.5px; padding: 3px 6px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
}
.pane-controls select.on { border-color: var(--accent); color: var(--text); }
.pane-head .sub { font-size: 11.5px; color: var(--muted); margin-left: auto; flex: none; }
.pane-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* ---------- brand tree ---------- */
.brand { border-bottom: 1px solid var(--border-soft); }
.brand-row {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px 7px 6px; cursor: pointer; user-select: none;
}
.brand-row:hover { background: var(--panel-2); }
.brand.sel > .brand-row { background: var(--accent-soft); }
.twisty {
  flex: none; width: 18px; height: 18px; display: grid; place-items: center;
  color: var(--faint); font-size: 10px; transition: transform .12s ease; border-radius: 4px;
}
.brand.open .twisty { transform: rotate(90deg); }
.brand-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.count { flex: none; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.brand-kids { display: none; padding-bottom: 4px; }
.brand.open .brand-kids { display: block; }
.leaf {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 30px; cursor: pointer;
  font-size: 13px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.leaf:hover { background: var(--panel-2); color: var(--text); }
.leaf.sel { background: var(--accent-soft); color: var(--text); font-weight: 500; }
.leaf .dot {
  flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--tc, var(--faint));
}

/* Transducer colour coding — one mapping shared by tree dots, list chips and
   charts, so a type keeps its hue everywhere. Always paired with its label.
   Each rule also publishes --tc so more specific selectors (.leaf .dot,
   .tag.type) can pick the hue up without a specificity fight. */
.t-condenser { background: var(--s1); --tc: var(--s1); }
.t-dynamic   { background: var(--s2); --tc: var(--s2); }
.t-ribbon    { background: var(--s3); --tc: var(--s3); }
.t-boundary  { background: var(--s4); --tc: var(--s4); }
.t-hybrid    { background: var(--s5); --tc: var(--s5); }
.t-wireless  { background: var(--s6); --tc: var(--s6); }
.t-mixed     { background: var(--s7); --tc: var(--s7); }
.t-unknown   { background: var(--faint); --tc: var(--faint); }

/* ---------- filter bar ----------
   A strip across the top of the browse view, above the panes: these facets
   narrow the brand tree as much as the model list, so they belong to neither. */
.filters {
  flex: none; display: flex; flex-direction: column; gap: 6px;
  padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--border);
}
.frow { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.frow .push { margin-left: auto; }
.pat, .chip {
  width: 28px; height: 28px; padding: 0;
  display: inline-grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 7px; cursor: pointer; color: var(--muted); flex: none;
}
.pat:hover, .chip:hover { border-color: var(--accent); color: var(--text); }
.pat.on, .chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pat svg, .chip svg { width: 22px; height: 22px; display: block; }
.pat svg .fillp, .chip svg .fillp { fill: currentColor; opacity: .95; }
.pat svg .strokep, .chip svg .strokep { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .95; }
.pat.on svg .fillp, .pat.on svg .strokep, .chip.on svg .fillp, .chip.on svg .strokep { opacity: 1; stroke-width: 2; }
.chip span { display: none; }
.chip.clear { border-style: dashed; }
.filters select {
  font-size: 11.5px; padding: 3px 6px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
}
.filters select.on { border-color: var(--accent); color: var(--text); }
.showmore {
  display: block; width: calc(100% - 22px); margin: 10px 11px 16px;
  padding: 7px; font-size: 12px; cursor: pointer; color: var(--muted);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 7px;
}
.showmore:hover { border-color: var(--accent); color: var(--text); }
.card {
  display: flex; gap: 10px; padding: 9px 11px;
  border-bottom: 1px solid var(--border-soft); cursor: pointer;
}
.card:hover { background: var(--panel-2); }
.card.sel { background: var(--accent-soft); }
.card .thumb {
  flex: none; width: 54px; height: 54px; border-radius: 6px;
  background: var(--chip); display: grid; place-items: center; overflow: hidden;
}
.card .thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.card .info { min-width: 0; flex: 1; }
.card .title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .desc { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .meta { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tag {
  font-size: 10.5px; padding: 1px 6px; border-radius: 4px;
  background: var(--chip); color: var(--muted); white-space: nowrap;
}
.tag.price { color: var(--text); font-variant-numeric: tabular-nums; }
.tag.disc { color: #d97706; }
.tag.type { background: var(--tc, var(--chip)); color: #fff; }
.tag.tagbtn { border: 1px solid transparent; cursor: pointer; font: inherit; font-size: 10.5px; }
.tag.tagbtn:hover { border-color: var(--accent); color: var(--text); }
.chip.tagchip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.card .brandline { font-size: 11px; color: var(--faint); }

/* ---------- detail ---------- */
/* No column cap: a wide window is width the drawing and the tables can use.
   Only running prose gets a measure, because a 200-character line is unreadable
   however much room there is for it. */
.detail { padding: 20px 24px 60px; }
.detail h1 { margin: 0 0 2px; font-size: 22px; letter-spacing: -.015em; }
.detail .sub { color: var(--muted); margin-bottom: 12px; }
.hero { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 18px; flex-wrap: wrap; }
.hero .photo {
  flex: none; width: 180px; border-radius: 10px; background: var(--panel);
  border: 1px solid var(--border); padding: 10px; display: grid; place-items: center;
}
.hero .photo img { max-width: 100%; height: auto; }
.hero .facts { flex: 1; min-width: 240px; }
.badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.price { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.price small { font-size: 12px; font-weight: 400; color: var(--muted); }

section.block { margin-top: 20px; }
section.block > h3 {
  margin: 0 0 8px; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--faint); font-weight: 600;
}
.kv { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 4px 16px; max-width: 760px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.box {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 9px; padding: 12px 14px; box-shadow: var(--shadow);
}
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.prose { color: var(--text); }
.prose p, .prose ul, .prose blockquote { max-width: 82ch; }
.prose p { margin: 0 0 10px; }
/* Scraped copy embeds full-size photos — keep them inside the pane. */
.prose img { max-width: min(100%, 300px); height: auto; border-radius: 6px; margin: 4px 12px 8px 0; }
.prose a { overflow-wrap: anywhere; }
.prose ul { margin: 0 0 10px; padding-left: 20px; }
blockquote {
  margin: 0 0 10px; padding: 8px 0 8px 12px;
  border-left: 3px solid var(--border); color: var(--muted);
}
blockquote cite { display: block; margin-top: 5px; font-size: 12px; color: var(--faint); font-style: normal; }
.rel { display: flex; flex-wrap: wrap; gap: 8px; }
.rel-item {
  display: flex; gap: 8px; align-items: center; width: 260px;
  padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); cursor: pointer;
}
.rel-item:hover { border-color: var(--accent); }
.rel-item img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.rel-item .n { font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.rel-item .n span { display: block; color: var(--faint); font-size: 11px; }
/* The transducer hue of one microphone in a kit, in the same mapping the tree
   dots and list chips use. */
.rel-item .dot {
  flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tc, var(--faint));
}

/* ---------- kits ----------
   A kit is a box of microphones, so it says how many and then hands the page
   over to them: one chain per included model, each headed by its own name. */
.tag.kit { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
/* What is in a mixed kit, beside the "Mixed kit" tag that names it. */
.tag.mix { background: transparent; border: 1px solid var(--s7); color: var(--s7); }
/* The lines the pane uses to say where a drawing or a spec came from. */
.detail .note { font-size: 11.5px; color: var(--faint); margin: 6px 0 10px; max-width: 82ch; }
.kitchain + .kitchain { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.kithead { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; }
.kitlink {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--accent-text);
}
.kitlink:hover { text-decoration: underline; }
.kithead .sub { font-size: 12px; color: var(--muted); }
.graphs { display: flex; flex-wrap: wrap; gap: 12px; }
.graph { border: 1px solid var(--border); border-radius: 8px; padding: 8px; background: var(--panel); }
.graph img { display: block; max-width: 260px; height: auto; background: #fff; border-radius: 4px; }
.graph .cap { font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.linklist { list-style: none; margin: 0; padding: 0; }
.linklist li { padding: 3px 0; }
.linklist .lt { font-size: 11px; color: var(--faint); margin-left: 6px; }
table.raw { border-collapse: collapse; width: 100%; font-size: 12.5px; }
table.raw th, table.raw td {
  border: 1px solid var(--border); padding: 5px 8px;
  text-align: left; vertical-align: top; white-space: pre-line;
}
table.raw th { background: var(--panel-2); color: var(--muted); font-weight: 600; }
details.rawdump > summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }

/* ---------- statistics view ---------- */
.statsview { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 26px 70px; }
/* Wide enough for three chart columns on a large screen, still short
   enough that a heading line does not run away from the eye. */
.statswrap { max-width: 1560px; margin: 0 auto; }
.statsview h2.vh {
  margin: 30px 0 12px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--faint); font-weight: 600;
}
.statsview h2.vh:first-child { margin-top: 0; }

/* ---------- tag vocabulary ---------- */
.tagbar { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.tagbar input {
  flex: 1; min-width: 180px; max-width: 340px; padding: 6px 10px; font-size: 13px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
}
.tagbar input:focus { outline: none; border-color: var(--accent); }
.tagbar select {
  font-size: 12px; padding: 5px 7px; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 7px;
}
.taggrid {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.tagcell {
  display: flex; align-items: baseline; gap: 8px; text-align: left;
  padding: 7px 10px; font-size: 13px; cursor: pointer; color: var(--text);
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
}
.tagcell:hover { border-color: var(--accent); }
.tagcell.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tagcell .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tagcell .c { flex: none; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.tagcell.on .c { color: var(--accent-ink); opacity: .75; }
.tagcell .bar {
  position: absolute; left: 0; bottom: 0; height: 2px; background: var(--accent); opacity: .35;
}
.tagcell { position: relative; overflow: hidden; }
.tagcell.on .bar { background: var(--accent-ink); opacity: .35; }

/* ---------- gallery ----------
   One block per manufacturer, each a grid of photos, packed as tightly as the
   pictures allow: no tile frame, no tile padding, hairline gaps. What separates
   one mic from the next is the gap and the caption, not a box drawn around it —
   a border and 8px of padding per tile costs a column on a laptop and reads as
   chrome rather than catalogue.

   The picture is contained rather than cropped: a mic cropped to a square stops
   being recognisable, which is the whole point of this view. Portrait mics
   therefore leave side margins inside a fixed-height frame — that space belongs
   to the photograph, so it is left transparent rather than boxed in. */
.ggroup { margin-bottom: 16px; }
.ghead {
  display: flex; align-items: baseline; gap: 7px; margin: 0 0 5px;
  padding: 3px 0 3px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 2; background: var(--bg);
}
.ghead .gb { font-size: 12.5px; font-weight: 650; letter-spacing: -.01em; }
.ghead .gc { font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.ggrid { display: grid; gap: 4px 3px; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); }
.gcell {
  display: flex; flex-direction: column; gap: 1px; padding: 2px;
  font: inherit; text-align: center; cursor: pointer; color: var(--text);
  background: none; border: 1px solid transparent; border-radius: 6px;
}
.gcell:hover { background: var(--panel-2); border-color: var(--border); }
.gthumb {
  height: 78px; border-radius: 4px;
  display: grid; place-items: center; overflow: hidden;
}
.gthumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* No photo on file: a flat placeholder keeps the mic in the grid rather than
   silently dropping it from a view that claims to hold everything. */
.gthumb.none { background: var(--chip); }
.gthumb.none::after {
  content: "no photo"; font-size: 10px; color: var(--faint); letter-spacing: .04em;
}
.gname {
  font-size: 11px; line-height: 1.25; overflow: hidden; color: var(--muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.gcell:hover .gname { color: var(--text); }
#gallery .statswrap { max-width: none; }
#gallery { padding: 14px 16px 40px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 10px; }
.tile {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow);
}
.tile .n { font-size: 25px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile .l { font-size: 12px; color: var(--muted); margin-top: 1px; }
.tile .sub2 { font-size: 11px; color: var(--faint); margin-top: 3px; }

.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(390px, 1fr)); gap: 12px; }
figure.fig {
  margin: 0; background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px 16px; box-shadow: var(--shadow);
}
figure.fig.wide { grid-column: 1 / -1; }
figure.fig figcaption { margin-bottom: 2px; font-weight: 600; font-size: 13.5px; }
figure.fig .note { font-size: 11.5px; color: var(--faint); margin-bottom: 12px; }
.figbar { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.figbar select {
  font-size: 11.5px; padding: 3px 6px; background: var(--panel-2);
  color: var(--text); border: 1px solid var(--border); border-radius: 6px;
}

.legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 12px; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: block; }

/* Horizontal bars: label · track · value. 4px rounded data-end on the
   free end only, so every bar stays anchored to a common baseline. */
.rows { display: flex; flex-direction: column; gap: 6px; }
.row { display: grid; grid-template-columns: var(--labelw, 122px) 1fr auto; gap: 10px; align-items: center; }
.row .rl { font-size: 12.5px; color: var(--muted); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .rl.link { cursor: pointer; }
.row .rl.link:hover { color: var(--accent-text); }
.track { height: 15px; display: flex; gap: 2px; background: var(--grid); border-radius: 0 4px 4px 0; overflow: hidden; }
.track > b { display: block; height: 100%; min-width: 1px; }
.track > b:last-child { border-radius: 0 4px 4px 0; }
.row .rv { font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; min-width: 44px; }
.row .rv small { color: var(--faint); font-size: 11px; }

/* Vertical histogram */
.hist { display: flex; align-items: flex-end; gap: 4px; height: 150px; }
.hist .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.hist .col b { display: block; background: var(--s1); border-radius: 4px 4px 0 0; min-height: 2px; }
.hist .col em { display: block; font-style: normal; font-size: 11px; color: var(--text); text-align: center; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.histx { display: flex; gap: 4px; margin-top: 6px; }
.histx span { flex: 1; text-align: center; font-size: 10.5px; color: var(--faint); }

/* Data explorer */
.expbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.expbar input, .expbar select {
  font-size: 12.5px; padding: 5px 8px; background: var(--panel-2);
  color: var(--text); border: 1px solid var(--border); border-radius: 7px;
}
.expbar input { min-width: 190px; }
.expbar .grow { flex: 1; }
.tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
table.data { border-collapse: collapse; width: 100%; font-size: 12.5px; }
table.data th {
  position: sticky; top: 0; z-index: 1;
  background: var(--panel-2); border-bottom: 1px solid var(--border);
  padding: 8px 10px; text-align: left; white-space: nowrap; cursor: pointer;
  font-weight: 600; color: var(--muted);
}
table.data th:hover { color: var(--text); }
table.data th .ind { color: var(--accent-text); }
table.data td { border-bottom: 1px solid var(--border-soft); padding: 6px 10px; white-space: nowrap; }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.wrap { white-space: normal; min-width: 180px; }
table.data tbody tr { cursor: pointer; }
table.data tbody tr:hover { background: var(--panel-2); }
table.data .swatch { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.more { text-align: center; padding: 10px; }

.tip {
  position: fixed; z-index: 50; pointer-events: none;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 7px;
  padding: 6px 9px; font-size: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.22);
  max-width: 260px;
}
.tip b { font-weight: 600; }
.tip .tv { color: var(--muted); }

.empty { padding: 40px 24px; color: var(--faint); text-align: center; }
.notice {
  margin: 24px; padding: 16px 18px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--border);
}
.notice code {
  display: block; margin: 8px 0; padding: 8px 10px; border-radius: 6px;
  background: var(--chip); font-size: 12.5px; overflow-x: auto;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--faint); }

/* ---------- narrow screens ----------
   The panes stop being columns and become rows, but the page stays a
   fixed-height app rather than one long scroll. The model list goes away
   entirely: the brand tree already folds out to models and routes straight to
   the device, so a second list of the same rows only costs screen. That
   leaves the tree with the half the two lists had between them, and the
   device with everything else. Each pane still scrolls inside itself. */
@media (max-width: 980px) {
  .pane-head h2 { display: none; }
  .pane:first-child .pane-head { display: none; }
  #modelPane { display: none; }
  main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 50% minmax(0, 1fr);
  }

  /* dvh so the browser's collapsing toolbar cannot push main off-screen. */
  body { height: 100dvh; }

  .detail { padding: 14px 14px 50px; }
  .statsview { padding: 16px 14px 60px; }
}

/* Drop words on chips and wrap menus when window narrows */
@media (max-width: 960px) {
  .chip span { display: none; }
  .chip {
    padding: 4px 6px;
    border-radius: 7px;
    min-width: 28px;
    min-height: 28px;
    justify-content: center;
  }
  .chip svg { width: 16px; height: 16px; }
  .patbar, .ribbon-icons { flex-wrap: nowrap; gap: 3px; }
}

/* The header stops being one line well before the panes stop being columns: a
   laptop window is already too narrow for the tabs, the search box and the
   catalogue count side by side. Here the tabs take a row of their own and
   search takes the next, each scrolling sideways rather than stacking — a
   wrapped header grows tall enough to shove the panes off the screen. */
@media (max-width: 1180px) {
  header {
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 10px;
    padding: 8px 12px;
    align-items: center;
  }
  .brandmark { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .stat { order: 1; }
  #theme { order: 2; }
  .spacer { display: none; }

  /* Sideways-scrolling strips, in order: tabs, then search. */
  .nav {
    order: 3; width: 100%;
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .navlink { flex: none; }

  #search { order: 4; flex: 1 0 100%; max-width: none; }

  .patbar {
    flex-wrap: wrap;
    padding: 6px 8px;
    gap: 4px;
  }
  .pat { flex: none; }
}

/* ---------- signal-chain diagram ---------- */
.dgblock { display: block; }
.dgwrap {
  overflow-x: auto; padding: 4px 0 2px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 9px; margin-bottom: 9px;
}
/* The drawing fits the pane by scaling down rather than scrolling. diagram.js
   puts a floor on that in the element's own style — past it the captions stop
   being readable, and a scrollbar is the better answer. */
.dg { display: block; max-width: 100%; height: auto; }
.dg .dg-shape { fill: var(--panel); stroke-width: 1.4; }
.dg .dg-ant { fill: none; stroke-width: 1.4; }
.dg .dg-line { fill: none; stroke-width: 1.6; }
.dg .dg-dash { stroke-dasharray: 4 3; }
.dg text {
  font-family: inherit; text-anchor: middle;
  fill: var(--text); dominant-baseline: middle;
}
.dg .dg-title { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; }
.dg .dg-cap { font-size: 9.5px; fill: var(--muted); }
.dg .dg-muted { fill: var(--faint); font-style: italic; }
.dg .dg-term { font-size: 10px; font-weight: 600; text-anchor: start; }
/* The name of one parallel path — LEFT/RIGHT, MID/SIDE — beside its row. */
.dg .dg-row { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-anchor: start; fill: var(--faint); }
.dg .dg-left { text-anchor: start; }
.dg .dg-feed { font-size: 9.5px; text-anchor: start; font-weight: 600; }

.dglegend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: var(--muted); }
.dglegend span { display: inline-flex; align-items: center; gap: 5px; }
.dglegend i { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }

table.dgdetail { width: 100%; border-collapse: collapse; font-size: 11.5px; }
table.dgdetail th {
  text-align: left; padding: 5px 8px; color: var(--faint); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; font-size: 10px;
  border-bottom: 1px solid var(--border);
}
table.dgdetail td { padding: 4px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
table.dgdetail .dgb { font-weight: 600; white-space: nowrap; }
table.dgdetail .dgs { color: var(--muted); }
table.dgdetail .dgf code { font-size: 10.5px; color: var(--faint); }
table.dgdetail .dgv { color: var(--text); }

/* ---------- wireless list ---------- */
.rfaxis {
  display: flex; justify-content: space-between;
  font-size: 10.5px; color: var(--faint); margin: 14px 0 4px;
  font-variant-numeric: tabular-nums;
}
.rflist { display: grid; gap: 7px; }
.rfcard {
  padding: 9px 12px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border); border-radius: 9px;
}
.rfcard:hover { border-color: var(--accent); }
.rfhead { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-bottom: 7px; }
.rfbrand { font-size: 11.5px; color: var(--faint); }
.rfmodel { font-weight: 600; margin-right: 4px; }
.rftrack {
  position: relative; height: 10px; border-radius: 3px;
  background: var(--chip); overflow: hidden;
}
.rftrack b { position: absolute; top: 0; bottom: 0; background: var(--s6); border-radius: 2px; }
.rfcov { margin-top: 5px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
td.dim { color: var(--faint); }

/* ---------- AES-X230 ----------
   One status palette, shared by the device panel and the X230 tab so a colour
   means the same thing in both: green the catalogue answered, orange it said
   "not there", grey it cannot say, amber the draft never decided. */
.x230, .x230wrap {
  --x-map: var(--s3);
  --x-abs: var(--s2);
  --x-nul: var(--faint);
  --x-open: var(--s4);
  --x-run: var(--s5);
  --x-na: var(--border);
}

/* --- the per-device panel --- */
.x230meter { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--chip); }
.x230meter b { display: block; }
.x230meter b.s-mapped { background: var(--x-map); }
.x230meter b.s-absent { background: var(--x-abs); }
.x230meter b.s-unknown { background: var(--x-nul); }
.x230meter b.s-undefined-in-profile { background: var(--x-open); }
.x230meter b.s-runtime { background: var(--x-run); }
.x230meter b.s-not-applicable { background: var(--x-na); }

.x230sum { margin: 7px 0 4px; font-size: 11.5px; color: var(--muted); }
.x230note {
  font-size: 11.5px; color: var(--faint); line-height: 1.5;
  border-left: 2px solid var(--border); padding-left: 9px; margin-bottom: 10px;
}
.x230grp {
  margin: 14px 0 6px; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; color: var(--faint);
}
.x230row {
  border-left: 3px solid var(--x-na); padding: 6px 0 7px 10px; margin-bottom: 5px;
  background: var(--panel-2); border-radius: 0 7px 7px 0;
}
.x230row.s-mapped { border-left-color: var(--x-map); }
.x230row.s-absent { border-left-color: var(--x-abs); }
.x230row.s-unknown { border-left-color: var(--x-nul); }
.x230row.s-undefined-in-profile { border-left-color: var(--x-open); }
.x230row.s-runtime { border-left-color: var(--x-run); }
.x230head { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.x230name { font-weight: 600; font-size: 12.5px; }
.x230st {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--faint); white-space: nowrap;
}
.s-mapped > .x230st, .tag.x230st.s-mapped { color: var(--x-map); }
.s-absent > .x230st, .tag.x230st.s-absent { color: var(--x-abs); }
.s-undefined-in-profile > .x230st, .tag.x230st.s-undefined-in-profile { color: var(--x-open); }
.s-runtime > .x230st, .tag.x230st.s-runtime { color: var(--x-run); }
.x230val { margin-top: 2px; font-size: 12.5px; }
.x230val.nul { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--faint); font-size: 11.5px; }
.x230bind { margin-top: 3px; font-size: 10.5px; color: var(--accent-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.x230acc { font-size: 10.5px; color: var(--muted); }
.x230why { margin-top: 3px; font-size: 11px; color: var(--faint); line-height: 1.45; }
.tag.x230blk.b-instantiated { color: var(--x-map); }
.tag.x230blk.b-unknown { color: var(--x-nul); }
.tag.x230blk.b-not-instantiated { color: var(--faint); opacity: .6; }
details.x230na { margin-top: 12px; }
details.x230na > summary { cursor: pointer; font-size: 11.5px; color: var(--faint); }
details.x230na .x230row { opacity: .7; }

/* --- the X230 tab --- */
.x230wrap { max-width: 1560px; margin: 0 auto; display: grid; gap: 16px; }
/* Grid items default to min-width:auto, so one long line inside the schema
   <pre> would widen the whole column and push the cards past the page. */
.x230wrap > * { min-width: 0; }
.x230mast h2 { margin: 0 0 8px; font-size: 21px; }
.x230meta { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.x230purpose { margin: 0 0 8px; font-size: 14px; line-height: 1.6; max-width: 74ch; }
.x230src { font-size: 11px; color: var(--faint); }
.x230card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow);
}
.x230card > h3 {
  margin: 0 0 12px; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--faint); font-weight: 600;
}
.x230card h4 { margin: 18px 0 8px; font-size: 13px; }
.x230prose p { margin: 0 0 10px; line-height: 1.65; max-width: 78ch; font-size: 13.5px; }
.x230prose p:last-child { margin-bottom: 0; }
.x230sum2 { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; max-width: 78ch; }
.x230no { margin-top: 6px; font-size: 11.5px; color: var(--faint); }

.x230bind4 { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.x230step {
  flex: 1 1 150px; display: grid; gap: 2px; padding: 9px 11px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px;
}
.x230step .k { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.x230step .v { font-weight: 600; font-size: 13px; }
.x230step .n { font-size: 11px; color: var(--muted); }

.x230blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.x230bcard { padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); }
.x230bcard .n { font-weight: 600; }
.x230bcard .d { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin-bottom: 5px; }
.x230bcard .p { font-size: 12px; color: var(--muted); line-height: 1.5; }
.x230bcard .no { margin-top: 6px; font-size: 11px; color: var(--faint); }
.x230bcard.d-audio { border-left: 3px solid var(--s1); }
.x230bcard.d-rf { border-left: 3px solid var(--s6); }
.x230bcard.d-device { border-left: 3px solid var(--s4); }

.x230diags { display: grid; gap: 12px; }
.x230diag { background: var(--panel-2); }
.x230chain { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }
.x230chain .arr { align-self: center; color: var(--faint); }
.x230node {
  display: grid; gap: 2px; padding: 8px 11px; min-width: 92px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
}
.x230node.round { border-radius: 40px; }
.x230node.cp { border-color: var(--s2); }
.x230node .lb { font-size: 11.5px; font-weight: 600; }
.x230node .pt { font-size: 10.5px; color: var(--muted); }
.x230bnd { margin-top: 8px; font-size: 11px; color: var(--faint); }
.x230ports { margin-top: 10px; display: grid; gap: 5px; }
.x230port { display: flex; flex-wrap: wrap; gap: 5px; align-items: baseline; }
.x230port .k { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); min-width: 48px; }
.tag.f-audio { color: var(--s3); }
.tag.f-digital { color: var(--s1); }
.tag.f-rf { color: var(--s6); }
.tag.f-control { color: var(--s5); }
.tag.cp { border: 1px solid var(--s2); }

table.x230tab { border-collapse: collapse; width: 100%; font-size: 12px; margin-top: 4px; display: block; overflow-x: auto; }
table.x230tab th {
  text-align: left; padding: 6px 9px; border-bottom: 1px solid var(--border);
  color: var(--muted); font-weight: 600; white-space: nowrap;
}
table.x230tab td { padding: 5px 9px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
table.x230tab td.nm { font-weight: 600; white-space: nowrap; }
table.x230tab td.ph { color: var(--x-open); font-style: italic; }
table.x230tab tr.open { background: color-mix(in srgb, var(--x-open) 7%, transparent); }

.x230issues { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 7px; }
.x230issues li { font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.x230issues .s {
  display: inline-block; margin-right: 8px; font-size: 10.5px; color: var(--faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.x230legend { display: grid; gap: 6px; }
.x230legend > div { display: flex; gap: 9px; align-items: baseline; font-size: 12px; color: var(--muted); }
.x230legend .tag { white-space: nowrap; }

/* The X230 score, on a model card and at the head of the device panel. Bands of
   ten so the colour reads as "how well documented" without needing a legend. */
.tag.x230pct { font-variant-numeric: tabular-nums; color: var(--faint); }
.tag.x230pct.q2, .tag.x230pct.q3 { color: var(--s4); }
.tag.x230pct.q4, .tag.x230pct.q5 { color: var(--s1); }
.tag.x230pct.q6, .tag.x230pct.q7, .tag.x230pct.q8, .tag.x230pct.q9 { color: var(--s3); }
.x230score { display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px; }
.x230score b { font-size: 26px; font-variant-numeric: tabular-nums; line-height: 1; }
.x230score span { font-size: 11.5px; color: var(--muted); }

/* ---------- X230: schema view and corpus statistics ---------- */
.x230tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
pre.jsoncode {
  margin: 10px 0 0; padding: 13px 15px; max-height: 520px; overflow: auto;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  font: 11.5px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--muted); white-space: pre; tab-size: 2;
}
pre.jsoncode .jk { color: var(--text); font-weight: 600; }   /* object key   */
pre.jsoncode .js { color: var(--s3); }                        /* string value */
pre.jsoncode .jn { color: var(--s1); }                        /* number       */
pre.jsoncode .jl { color: var(--s5); }                        /* true/false/null */

.x230tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.x230tile {
  padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel-2); display: grid; gap: 3px;
}
.x230tile b { font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.x230tile span { font-size: 11px; color: var(--muted); }

.x230hist { display: flex; align-items: flex-end; gap: 6px; height: 150px; margin: 6px 0 4px; }
.x230bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; text-align: center; }
.x230bar i { display: block; background: var(--s1); border-radius: 3px 3px 0 0; min-height: 2px; }
.x230bar.zero i { background: var(--border); }
.x230bar .n { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; margin-bottom: 3px; }
.x230bar .x { font-size: 10px; color: var(--faint); margin-top: 5px; white-space: nowrap; }

table.x230tab td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.x230tab td.fillcell { width: 34%; min-width: 110px; }
.x230fill { height: 7px; border-radius: 4px; background: var(--chip); overflow: hidden; }
.x230fill i { display: block; height: 100%; background: var(--s3); border-radius: 4px; }