/* =============================================================================
   OpenMFDA Foundry — library.css
   Styles for the catalog index page (/library/index.html). All colours come
   from tokens defined in main.css. Per the sparing-orange rule, --color-accent
   and --mesh-warmth do NOT appear here — keeping the orange-surface budget at
   the canonical 4 (hero mesh, .pillar-card--phase2 stripe + number, .badge-phase2).
   ========================================================================== */


/* -- Hero / page-header overrides ----------------------------------------- */
.lib-hero {
  background: var(--bg-soft);
  border-bottom: 1px solid rgba(28, 114, 147, 0.12);
  padding: var(--sp-12) 0 var(--sp-8);
}

.lib-hero h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-800);
  color: var(--color-navy);
  margin-bottom: var(--sp-4);
}

.lib-hero__lede {
  font-family: var(--font-sans);
  color: var(--fg-muted);
  max-width: 48rem;
  font-size: var(--fs-500);
  line-height: 1.6;
}


/* -- Toolbar (layer toggle + search + sort) ------------------------------- */
.lib-toolbar {
  background: var(--bg-page);
  border-bottom: 1px solid rgba(28, 114, 147, 0.10);
  padding: var(--sp-4) 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.lib-toolbar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}

.lib-layer-toggle {
  display: inline-flex;
  border: 1px solid rgba(28, 114, 147, 0.20);
  border-radius: var(--radius);
  overflow: hidden;
}

.lib-layer-toggle button {
  background: var(--bg-page);
  color: var(--fg-body);
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  border: 0;
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  border-right: 1px solid rgba(28, 114, 147, 0.20);
}

.lib-layer-toggle button:last-child { border-right: 0; }

.lib-layer-toggle button[aria-pressed="true"] {
  background: var(--color-deep-blue);
  color: var(--color-white);
}

.lib-layer-toggle button:hover:not([aria-pressed="true"]) {
  background: var(--bg-soft-hover);
}

.lib-search {
  flex: 1 1 14rem;
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid rgba(28, 114, 147, 0.20);
  border-radius: var(--radius);
  background: var(--bg-page);
  color: var(--fg-body);
  min-width: 0;
}

.lib-search:focus {
  outline: 2px solid var(--color-teal);
  outline-offset: 1px;
}

.lib-sort {
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid rgba(28, 114, 147, 0.20);
  border-radius: var(--radius);
  background: var(--bg-page);
  color: var(--fg-body);
}


/* -- Layout: sidebar + grid ----------------------------------------------- */
.lib-layout {
  padding: var(--sp-8) 0 var(--sp-16);
}

.lib-layout__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 64em) {
  .lib-layout__inner {
    grid-template-columns: 16rem 1fr;
    gap: var(--sp-8);
  }
}


/* -- Sidebar filters ------------------------------------------------------ */
.lib-filters {
  font-family: var(--font-sans);
}

.lib-filters__mobile-toggle {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bg-soft);
  border: 1px solid rgba(28, 114, 147, 0.15);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  cursor: pointer;
  margin-bottom: var(--sp-4);
}

.lib-filters__panel {
  display: none;
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: var(--sp-4);
}

.lib-filters[data-open="true"] .lib-filters__panel { display: block; }

@media (min-width: 64em) {
  .lib-filters__mobile-toggle { display: none; }
  .lib-filters__panel { display: block; position: sticky; top: 4.5rem; max-height: calc(100vh - 5rem); overflow-y: auto; }
}

.lib-filter-group {
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid rgba(28, 114, 147, 0.12);
}

.lib-filter-group:last-child { border-bottom: 0; }

.lib-filter-group > summary {
  font-weight: 600;
  font-size: var(--fs-400);
  color: var(--color-navy);
  cursor: pointer;
  margin-bottom: var(--sp-2);
  list-style: none;
}

.lib-filter-group > summary::-webkit-details-marker { display: none; }

.lib-filter-group > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: var(--sp-2);
  font-size: 0.75em;
  color: var(--color-teal);
  transition: transform 0.15s ease;
}

.lib-filter-group[open] > summary::before { transform: rotate(90deg); }

.lib-filter-group label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-300);
  color: var(--fg-body);
  padding: var(--sp-1) 0;
  cursor: pointer;
}

.lib-filter-group input[type="checkbox"] {
  accent-color: var(--color-deep-blue);
}

/* Sub-heading inside the Category group. Only rendered on the All tab, where
   component and chip categories are separate vocabularies shown together, and
   for the "From another tab" group that surfaces an active category the
   current tab's vocabulary does not contain. On a single-layer tab there is
   one vocabulary and no heading. */
.lib-filter-group__sub {
  margin: var(--sp-3) 0 var(--sp-1);
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.lib-filter-group__sub:first-of-type { margin-top: var(--sp-1); }

/* A type, listed under the category it belongs to (a mixing chamber is a type
   of mixer): indented, so the checkbox reads as part of the one above it. */
.lib-filter-group label.lib-filter-type { padding-left: 1.5rem; }

/* An active filter whose category is not in this tab's vocabulary — from a
   deep link, or left ticked when the tab changed. Marked so it does not read
   as part of the list, but still operable: the whole point is that the reader
   can see what is narrowing the grid and switch it off. */
.lib-filter-orphan span {
  font-style: italic;
  color: var(--fg-muted);
}

.lib-filter-count {
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  font-size: 0.875em;
}

.lib-filters__reset {
  background: transparent;
  color: var(--color-deep-blue);
  border: 0;
  padding: var(--sp-2) 0;
  font-family: var(--font-sans);
  cursor: pointer;
  text-decoration: underline;
}


/* -- Result count --------------------------------------------------------- */
.lib-result-count {
  font-family: var(--font-sans);
  color: var(--fg-muted);
  font-size: var(--fs-300);
  margin-bottom: var(--sp-4);
}


/* -- Grid + cards --------------------------------------------------------- */
.lib-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

@media (min-width: 40em) {
  .lib-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
  .lib-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 96em) {
  .lib-grid { grid-template-columns: repeat(4, 1fr); }
}

/* -- Catalog sections ------------------------------------------------------
   #lib-grid swaps between two shapes. Flat mode (the components layer) keeps
   class="lib-grid" with cards as direct children, exactly as before, so every
   /library/#layer=components deep link lands on the grid it always did.
   Sectioned mode swaps the class to .lib-sections — a plain block container
   holding one <section> per heading, each with its OWN .lib-grid inside. The
   cards therefore stay direct children of a real grid, which is what both
   grid-template-columns and the :nth-child entrance stagger require. */
.lib-sections {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.lib-section__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid rgba(28, 114, 147, 0.18);
}

.lib-section__title {
  font-family: var(--font-serif);
  font-size: var(--fs-600);
  line-height: 1.2;
  color: var(--color-navy);
  margin: 0;
}

.lib-section__count {
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  color: var(--fg-muted);
}

/* Escape hatch for a capped section — links to that category's full flat
   listing so nothing is ever hidden without a way through to it. */
.lib-section__more {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  color: var(--link);
  text-decoration: none;
  white-space: nowrap;
}

.lib-section__more:hover,
.lib-section__more:focus-visible {
  color: var(--link-hover);
  text-decoration: underline;
}

/* Declared-but-unpopulated sections. Dashed, muted and deliberately quiet —
   they mark where the library is heading without competing with real cards. */
.lib-section__empty {
  margin: 0;
  padding: var(--sp-8) var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  font-style: italic;
  color: var(--fg-muted);
  text-align: center;
  background: var(--bg-soft);
  border: 1px dashed rgba(92, 112, 128, 0.30);
  border-radius: var(--radius);
}

.lib-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
  border: 1px solid rgba(28, 114, 147, 0.15);
  border-radius: var(--radius);
  padding: var(--sp-4);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  overflow: hidden;          /* clips the full-bleed thumbnail to the card's radius */
  /* Block 15: restrained Stripe/Linear-style lift — 200ms ease, teal-tinted
     hover shadow (no orange). */
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.lib-card:hover,
.lib-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(28, 114, 147, 0.12);
  border-color: var(--color-teal);
  outline: none;
}

/* -- Chip render thumbnail (Block 15) ------------------------------------- */
/* Full-bleed top-down render at the top of chip cards. Negative margins cancel
   the .lib-card padding so the image meets the card edges; the card's
   overflow:hidden + border-radius round the top corners. The aspect-ratio
   reserves space so the grid doesn't reflow as PNGs lazy-load. Cards without a
   render (components/benchmarks) omit this div and keep the text-only layout.
   Tokens only; no orange. */
.lib-card__thumb {
  margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-4);
  aspect-ratio: 3 / 2;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--color-ice);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lib-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lib-card__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.lib-badge {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid;
  text-transform: lowercase;
}

.lib-badge--category {
  background: var(--bg-soft);
  color: var(--color-deep-blue);
  border-color: rgba(6, 90, 130, 0.20);
}

.lib-badge--layer-chip,
.lib-badge--layer-benchmark {
  background: var(--color-deep-blue);
  color: var(--color-white);
  border-color: var(--color-deep-blue);
}

.lib-badge--status-validated {
  background: var(--color-teal);
  color: var(--color-white);
  border-color: var(--color-teal);
}

.lib-badge--status-demo {
  background: var(--bg-soft);
  color: var(--color-teal);
  border-color: rgba(28, 114, 147, 0.40);
}

/* Wet-lab-validated chips (Gale Lab urinalysis family). Deep-blue/white — the
   highest tier on the ladder. Mirrors the .lib-badge--layer-chip recipe. */
.lib-badge--status-wlv {
  background: var(--color-deep-blue);
  color: var(--color-white);
  border-color: var(--color-deep-blue);
}

/* ---- Physical status tiers ---------------------------------------------
   The two SOLID FILLS on this ladder — teal (validated) and deep-blue (wlv) —
   are reserved for chips that have bench data. A chip that has not been
   fluidically tested must never be styled like one that has, so both tiers
   below are OUTLINES in colours the proven tiers never use. Replaces the old
   .lib-badge--status-design-verified, which conflated CAD geometry checking
   with physical progress; geometry verification now shows in the entry's own
   Verification table on the detail page instead. */

/* not-tested: modelled and geometry-verified in CAD, never printed. Palest
   treatment on the ladder — muted grey, no hue borrowed from the proven tiers. */
.lib-badge--status-not-tested {
  background: var(--bg-soft);
  color: var(--fg-muted);
  border-color: rgba(92, 112, 128, 0.45);
}

/* test: a physical article exists — printed on the Gale Lab Phrozen 12K at
   print-adapted dimensions — but nothing has been measured through it. The only
   orange badge in the catalog, so it is unmistakable at a glance and impossible
   to read as teal-validated. Orange as border + ink, never as a fill, which
   keeps --color-accent's background use exclusive to .badge-phase2. */
.lib-badge--status-test {
  background: var(--bg-soft);
  color: var(--color-accent-ink);
  border-color: var(--color-accent);
}

/* concept: declared in the ladder, zero entries today. Styled anyway so it can
   never ship as an unstyled pill — which is exactly what the retired
   `unpublished` value would have done, since it had a filter entry and no rule. */
.lib-badge--status-concept {
  background: var(--bg-page);
  color: var(--fg-muted);
  border-color: rgba(92, 112, 128, 0.30);
}

.lib-card__name {
  font-family: var(--font-serif);
  font-size: var(--fs-500);
  color: var(--color-navy);
  margin: 0 0 var(--sp-2);
  word-break: break-word;
}

.lib-card__id {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--fg-muted);
  margin-bottom: var(--sp-3);
}

.lib-card__desc {
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  color: var(--fg-body);
  line-height: 1.5;
  margin: 0 0 var(--sp-3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lib-card__files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0 0 var(--sp-3);
  padding: 0;
}

.lib-card__files li {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  background: var(--bg-soft);
  color: var(--color-teal);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.lib-card__credit {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--fg-muted);
  margin-top: auto;
  padding-top: var(--sp-2);
  border-top: 1px dashed rgba(28, 114, 147, 0.15);
}


/* -- Loading / empty states ---------------------------------------------- */
.lib-status {
  grid-column: 1 / -1;
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  font-family: var(--font-sans);
  color: var(--fg-muted);
}

.lib-status--error {
  color: var(--color-deep-blue);
  background: var(--bg-soft);
  border: 1px solid rgba(6, 90, 130, 0.20);
  border-radius: var(--radius);
}


/* =============================================================================
   Component detail page (/library/components/<cat>/<id>/index.html)
   Selectors with .detail-* prefix. Coexists with .chip-* in detail.css —
   different prefix, no overlap.
   ========================================================================== */
.detail-hero {
  background: var(--bg-soft);
  border-bottom: 1px solid rgba(28, 114, 147, 0.12);
  padding: var(--sp-8) 0 var(--sp-6);
}

.detail-breadcrumb {
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  color: var(--fg-muted);
  margin-bottom: var(--sp-3);
}

.detail-breadcrumb a { color: var(--color-deep-blue); text-decoration: none; }
.detail-breadcrumb a:hover { text-decoration: underline; }

.detail-name {
  font-family: var(--font-serif);
  font-size: var(--fs-800);
  color: var(--color-navy);
  margin-bottom: var(--sp-2);
  word-break: break-word;
}

.detail-id {
  font-family: var(--font-mono);
  font-size: var(--fs-400);
  color: var(--fg-muted);
  margin-bottom: var(--sp-3);
}

.detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.detail-credit {
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  color: var(--fg-muted);
}


/* -- Detail body grid (main + sidebar) ----------------------------------- */
.detail-body {
  padding: var(--sp-8) 0 var(--sp-12);
}

.detail-body__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}

@media (min-width: 64em) {
  .detail-body__grid {
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: var(--sp-12);
  }
}

.detail-main { min-width: 0; }

.detail-section {
  margin-bottom: var(--sp-8);
}

.detail-section h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-600);
  color: var(--color-navy);
  margin-bottom: var(--sp-3);
}

.detail-section p {
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  line-height: 1.6;
  color: var(--fg-body);
}


/* -- File list ---------------------------------------------------------- */
.detail-files {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.detail-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-soft);
  border: 1px solid rgba(28, 114, 147, 0.15);
  border-radius: var(--radius);
}

.detail-file__type {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-deep-blue);
  color: var(--color-white);
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  min-width: 4rem;
  text-align: center;
}

.detail-file__name {
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  color: var(--color-navy);
  flex: 1 1 auto;
  word-break: break-all;
}

.detail-file__size {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

.detail-file__btn {
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  padding: var(--sp-2) var(--sp-4);
  background: var(--color-deep-blue);
  color: var(--color-white);
  border-radius: var(--radius);
  text-decoration: none;
  border: 0;
}

.detail-file__btn:hover,
.detail-file__btn:focus-visible {
  background: var(--color-teal);
  outline: none;
}

.detail-file__note {
  flex-basis: 100%;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--fg-muted);
}

/* A mesh offered for looking inside a part, not for printing: said on its
   row, in the darkened accent that marks what is unsettled (6.3:1 on ice). */
.detail-file__note--inspect {
  font-size: var(--fs-300);
  color: var(--color-accent-ink);
}


/* -- Pin table --------------------------------------------------------- */
.detail-pins {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--fs-300);
}

.detail-pins th,
.detail-pins td {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid rgba(28, 114, 147, 0.10);
}

.detail-pins th {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--color-navy);
  background: var(--bg-soft);
}

.detail-pins td:first-child {
  font-family: var(--font-mono);
  color: var(--color-deep-blue);
}

.detail-pins__empty {
  font-family: var(--font-sans);
  color: var(--fg-muted);
  font-style: italic;
}


/* -- Tags ------------------------------------------------------------- */
.detail-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.detail-tags li {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: var(--bg-soft);
  color: var(--color-teal);
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  border: 1px solid rgba(28, 114, 147, 0.15);
}


/* -- Used in chips backlink ------------------------------------------- */
.detail-usedin {
  margin-bottom: var(--sp-8);
}

.detail-usedin h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-600);
  color: var(--color-navy);
  margin-bottom: var(--sp-3);
}

.detail-usedin ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

@media (min-width: 48em) {
  .detail-usedin ul { grid-template-columns: 1fr 1fr; }
}

.detail-usedin a {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-soft);
  border: 1px solid rgba(28, 114, 147, 0.15);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.detail-usedin a:hover,
.detail-usedin a:focus-visible {
  border-color: var(--color-teal);
  box-shadow: var(--shadow-card);
  outline: none;
}

.detail-usedin__id {
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  color: var(--color-deep-blue);
  display: block;
}

.detail-usedin__name {
  font-family: var(--font-serif);
  font-size: var(--fs-400);
  color: var(--color-navy);
  margin: 0;
}


/* -- Sidebar metadata ------------------------------------------------ */
.detail-meta {
  background: var(--bg-soft);
  border: 1px solid rgba(28, 114, 147, 0.12);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-6);
  height: fit-content;
  font-family: var(--font-sans);
  font-size: var(--fs-300);
}

.detail-meta h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-500);
  color: var(--color-navy);
  margin-bottom: var(--sp-3);
}

.detail-meta__dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sp-4);
  row-gap: var(--sp-1);
}

.detail-meta__dl dt {
  font-weight: 600;
  color: var(--fg-muted);
}

.detail-meta__dl dd {
  margin: 0;
  color: var(--fg-body);
  word-break: break-word;
}


/* -- Source & print adaptation (reference chips) ---------------------- */
/* Reuses .detail-meta__dl's auto/1fr grid in the page body rather than the
   sidebar, so the source-vs-ours pairs line up with the rest of the detail
   page. Only the row rhythm and the trailing qualifier need their own rules. */
.detail-dims {
  row-gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.detail-dims__src {
  color: var(--fg-muted);
  font-size: var(--fs-300);
}


/* -- Citation strip -------------------------------------------------- */
.detail-citation {
  background: var(--bg-soft);
  border-top: 1px solid rgba(28, 114, 147, 0.12);
  padding: var(--sp-6) 0;
}

.detail-citation h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-500);
  color: var(--color-navy);
  margin-bottom: var(--sp-2);
}

.detail-citation p {
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  color: var(--fg-body);
  margin-bottom: var(--sp-1);
}

.detail-citation__lic {
  color: var(--fg-muted);
}


/* =============================================================================
   Chip detail page + benchmark page additions
   ========================================================================== */

/* -- Topology SVG container ------------------------------------------------ */
.chip-topology {
  background: var(--bg-soft);
  border: 1px solid rgba(28, 114, 147, 0.15);
  border-radius: var(--radius);
  padding: var(--sp-4);
  overflow-x: auto;
}

.chip-topology__svg {
  display: block;
  max-width: 100%;
  height: auto;
  min-width: 600px;
}

.chip-topology__note {
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  color: var(--fg-muted);
  margin-top: var(--sp-2);
}


/* -- Chip geometry (real OpenSCAD-rendered top + iso PNGs) ----------------- */
/* Two-column grid showing the placed-and-routed chip from two angles.
   Replaces the abstract block-diagram pattern of .chip-topology on the new
   chip detail pages. Reuses existing spacing/color tokens; no orange. */
.chip-geometry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  margin: var(--sp-6) 0 var(--sp-4);
}

.chip-geometry__view {
  display: block;
}

.chip-geometry__view img {
  width: 100%;
  height: auto;
  border: 1px solid var(--color-ice);
  border-radius: var(--radius);
  background: var(--color-white);
}

.chip-geometry__caption {
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  color: var(--fg-muted);
  text-align: center;
  margin: var(--sp-3) 0 var(--sp-2);
}

.chip-geometry__downloads {
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  color: var(--fg-muted);
  text-align: center;
  margin-top: var(--sp-2);
}

.chip-geometry__downloads a {
  color: var(--link);
  text-decoration: none;
}

.chip-geometry__downloads a:hover,
.chip-geometry__downloads a:focus {
  color: var(--link-hover);
  text-decoration: underline;
}

@media (max-width: 48em) {
  .chip-geometry {
    grid-template-columns: 1fr;
  }
}


/* -- Components-used list -------------------------------------------------- */
.chip-components {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
}

@media (min-width: 48em) {
  .chip-components { grid-template-columns: 1fr 1fr; }
}

.chip-components a {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-page);
  border: 1px solid rgba(28, 114, 147, 0.15);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-navy);
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  transition: border-color 0.15s ease;
}

.chip-components a:hover,
.chip-components a:focus-visible {
  border-color: var(--color-teal);
  outline: none;
}

.chip-components__cat {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  color: var(--color-teal);
  margin-left: var(--sp-2);
}


/* -- Verilog netlist embed -------------------------------------------------- */
.chip-verilog {
  background: var(--color-navy);
  color: var(--color-ice);
  border-radius: var(--radius);
  overflow: hidden;
}

.chip-verilog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(0, 0, 0, 0.20);
  border-bottom: 1px solid rgba(28, 114, 147, 0.20);
}

.chip-verilog__actions button,
.chip-verilog__actions a {
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  padding: var(--sp-1) var(--sp-3);
  background: var(--color-deep-blue);
  color: var(--color-white);
  border: 0;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
}

.chip-verilog__actions button:hover,
.chip-verilog__actions a:hover {
  background: var(--color-teal);
}

.chip-verilog pre {
  margin: 0;
  padding: var(--sp-4);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.45;
}

.chip-verilog pre code {
  white-space: pre;
  font-family: inherit;
  color: inherit;
}


/* -- Validation block ------------------------------------------------------ */
.chip-validation {
  background: var(--color-teal);
  color: var(--color-white);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-6);
}

.chip-validation h2 {
  color: var(--color-white);
  margin-bottom: var(--sp-2);
}

.chip-validation p { color: var(--color-white); }
.chip-validation cite { color: rgba(255, 255, 255, 0.78); font-style: normal; font-size: var(--fs-300); }


/* -- Benchmark page -------------------------------------------------------- */
.bench-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--fs-300);
}

.bench-table th,
.bench-table td {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid rgba(28, 114, 147, 0.10);
}

.bench-table th {
  font-weight: 600;
  color: var(--color-navy);
  background: var(--bg-soft);
}

.bench-table td.bench-count {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* "This metric has real data behind it" — a property of a TABLE CELL, not a
   validation claim about the chip. It used to be var(--color-teal), the exact
   colour of the .lib-badge--status-validated badge, so six teal cells rendered
   on chamberchip_f584 — a page whose own prose says it is not validated and not
   wet-lab-validated. Navy carries the same "populated, trustworthy" weight
   without colliding with any status badge on the ladder. */
.bench-table td.bench-status--real { color: var(--color-navy); font-weight: 600; }
.bench-table td.bench-status--empty { color: var(--fg-muted); font-style: italic; }

.bench-categories {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

@media (min-width: 48em) {
  .bench-categories { grid-template-columns: 1fr 1fr 1fr; }
}

.bench-category-card {
  background: var(--bg-soft);
  border: 1px solid rgba(28, 114, 147, 0.15);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
}

.bench-category-card h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-500);
  color: var(--color-navy);
  margin-bottom: var(--sp-2);
}

.bench-category-card p {
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  color: var(--fg-body);
  line-height: 1.5;
}

/* .featured-lib* rules moved to home.css — the featured strip lives on the
   landing page and no longer depends on this stylesheet. */


/* =============================================================================
   Tools & Resources page (/tools/index.html)
   Section-grouped tool cards. Reuses .detail-hero (above) for the page hero.
   Every colour is an existing token; per the sparing-orange rule NO
   --color-accent / --mesh-warmth / --accent appears here — the canonical
   4-surface orange budget is held. New classes are .tool-* only.
   ========================================================================== */

/* Hero lede beneath the reused .detail-hero h1. */
.tool-hero__lede {
  font-family: var(--font-sans);
  font-size: var(--fs-500);
  line-height: 1.6;
  color: var(--fg-body);
  max-width: 64ch;
  margin-top: var(--sp-3);
}

/* Page body + section groups */
.tool-body {
  background: var(--bg-page);
  padding-block: var(--sp-12);
}

.tool-group { margin-bottom: var(--sp-16); }
.tool-group:last-child { margin-bottom: 0; }

.tool-group__title {
  font-family: var(--font-serif);
  font-size: var(--fs-700);
  color: var(--color-navy);
  position: relative;
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-6);
}

/* Teal accent rule under each group heading — mirrors main.css .section-heading
   (teal, never orange). */
.tool-group__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  border-radius: 1.5px;
  background: var(--color-teal);
}

/* Card grid: single column on mobile; two-card groups go side-by-side at 64em. */
.tool-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 64em) {
  .tool-cards--two { grid-template-columns: 1fr 1fr; }
}

/* The card — ice fill + hairline border (matches .bench-category-card, roomier).
   White <pre> inside contrasts against the ice card. */
.tool-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-soft);
  border: 1px solid rgba(28, 114, 147, 0.15);
  border-radius: var(--radius);
  padding: var(--sp-6);
}

.tool-card__name {
  font-family: var(--font-serif);
  font-size: var(--fs-600);
  color: var(--color-navy);
  margin-bottom: var(--sp-2);
  word-break: break-word;
}

/* Monospace when the card title IS a repo name. */
.tool-card__name code {
  font-family: var(--font-mono);
  font-size: 0.82em;
  color: var(--color-navy);
}

.tool-card__sub {
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  color: var(--fg-muted);
  margin-bottom: var(--sp-2);
}

/* Status row — small-caps mono, teal; visually distinct from body copy. */
.tool-card__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: var(--sp-3);
}

.tool-card__tagline {
  font-family: var(--font-sans);
  font-size: var(--fs-500);
  font-weight: 600;
  color: var(--fg-body);
  line-height: 1.45;
  margin-bottom: var(--sp-4);
}

.tool-card__body > * + * { margin-top: var(--sp-3); }

.tool-card__body p {
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  line-height: 1.6;
  color: var(--fg-body);
}

/* Quickstart code block: label + <pre><code>. Base <pre> (overflow-x auto,
   radius, padding) comes from main.css; flipped white for contrast on the ice
   card and height-capped so a long block scrolls instead of dominating. */
.tool-quickstart { margin-top: var(--sp-4); }

.tool-quickstart__label {
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--sp-2);
}

.tool-card pre {
  background: var(--bg-page);
  border: 1px solid rgba(28, 114, 147, 0.15);
  max-height: 22rem;
  margin: 0;
}

.tool-card pre code {
  white-space: pre;
  color: var(--fg-body);
}

/* "Heads up" note — teal left rule, muted text on white. Teal, not orange. */
.tool-card__note {
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  line-height: 1.55;
  color: var(--fg-muted);
  background: var(--bg-page);
  border-left: 3px solid var(--color-teal);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-4);
}

.tool-card__note strong { color: var(--color-navy); }

/* Footer rows: authors / citation / repo. Dashed top rule matches
   .lib-card__credit. Pushed to the card bottom with margin-top:auto. */
.tool-card__foot {
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px dashed rgba(28, 114, 147, 0.20);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  color: var(--fg-muted);
}

.tool-card__foot p { margin: 0; line-height: 1.5; }

.tool-card__foot-key {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-navy);
  margin-right: var(--sp-2);
}

.tool-card__foot a { color: var(--link); text-decoration: none; word-break: break-word; }
.tool-card__foot a:hover,
.tool-card__foot a:focus-visible { color: var(--link-hover); text-decoration: underline; }

/* The .tool-group spacing collapses tighter on the smallest screens. */
@media (max-width: 48em) {
  .tool-group { margin-bottom: var(--sp-12); }
  .tool-card { padding: var(--sp-4); }
}

/* The library index's no-JavaScript fallback. Generated into library/index.html
   by scripts/build_product_pages.py. It is plain content on purpose — the point
   is that the catalogue is readable without running anything, not that it looks
   like the grid. */
.lib-noscript {
  padding: var(--sp-4) 0;
}

.lib-noscript__note {
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-left: 4px solid var(--color-teal);
  background: rgba(28, 114, 147, 0.07);
  font-size: var(--fs-300);
}

.lib-noscript h2 {
  margin: var(--sp-5) 0 var(--sp-2);
  font-size: var(--fs-500);
}

.lib-noscript h3 {
  margin: var(--sp-4) 0 var(--sp-1);
  font-size: var(--fs-300);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}

.lib-noscript ul { margin: 0 0 var(--sp-2) var(--sp-4); }
.lib-noscript li { padding: 0.15rem 0; }

/* Design-grid note on the two uncatalogued leftover component pages. Same
   statement the product pages carry: `px` here is the design grid, not the
   printer's pixel. */
.detail-gridnote {
  border-left: 4px solid var(--color-teal);
  background: rgba(28, 114, 147, 0.07);
  padding: var(--sp-3);
  margin: var(--sp-3) 0;
  font-size: var(--fs-300);
  line-height: 1.6;
}


/* -- Narrow screens: nothing on a library page pushes it sideways ----------
   Since 2026-09-30 the crawl opens every page 375 px wide and fails one that
   is wider than the window. Identifiers, file names and paths have no spaces
   to break at: a file's note, a product's title and a variant's name break
   where they have to. A block of code scrolls inside its own box (main.css),
   and on a narrow screen so does a table wider than the column, as the
   product pages' parameter tables already did (products.css). Written once
   here for every chip, component, benchmark and product page, whether a
   script wrote it or a hand did. */
.detail-file__note,
.pd-title,
.pv__name { overflow-wrap: anywhere; }

@media (max-width: 40rem) {
  .detail-main table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* --------------------------------------------------------------------------
   Design review 2026-10-03, item 2: the library's controls on a phone. They
   wrap on purpose (search, then the five layer buttons, each whole, then
   sort), and the taller toolbar scrolls away instead of sticking.
   -------------------------------------------------------------------------- */
@media (max-width: 40rem) {
  .lib-toolbar { position: static; padding-block: .75rem; }
  .lib-toolbar__inner { gap: .75rem; }
  .lib-search { order: 0; flex: 1 1 100%; min-height: 44px; }
  .lib-layer-toggle {
    order: 1;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: .5rem;
    border: 0;
    overflow: visible;
  }
  .lib-layer-toggle button {
    flex: 0 1 auto;
    min-height: 44px;
    padding: .5rem .75rem;
    white-space: nowrap;
    border: 1px solid var(--color-muted);
    border-radius: var(--radius);
  }
  .lib-layer-toggle button:last-child { border-right: 1px solid var(--color-muted); }
  .lib-sort { order: 2; width: 100%; min-height: 44px; }
  .lib-filters__mobile-toggle { min-height: 44px; }
}

/* --------------------------------------------------------------------------
   Design review 2026-10-03, item 3 (with main.css): the same title scale and
   prose measure on the library, chip, component and maker pages.
   -------------------------------------------------------------------------- */
.lib-hero h1, .detail-name {
  font-size: clamp(2rem, 1.6rem + 2vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -.015em;
}

.detail-section > p:not(.tool-card__note) { max-width: 68ch; }
.lib-hero__lede { font-size: 1rem; line-height: 1.6; max-width: 68ch; }

/* --------------------------------------------------------------------------
   Design review 2026-10-03, item 4: library cards with room, the name first.
   Cards keep a useful minimum width (two columns at 1440 px, one on a phone),
   and a one-card section does not stretch its card across the row. The
   picture is shown whole. library.js renders the name before the badges.
   -------------------------------------------------------------------------- */
.lib-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1.5rem;
}

.lib-card { padding: 1.25rem; box-shadow: none; }

.lib-card__thumb {
  margin: -1.25rem -1.25rem 1.25rem;
  aspect-ratio: 16 / 9;
  /* The pictures are on navy, edge to edge (library pictures, 2026-10-05). */
  padding: 0;
  background: var(--color-navy);
}

.lib-card__thumb img { object-fit: contain; }
.lib-card__name { font-size: 1.25rem; line-height: 1.25; margin-bottom: .75rem; }
.lib-card__head { gap: .375rem; margin-bottom: .75rem; }
.lib-card__desc { font-size: 1rem; line-height: 1.5; }
.lib-card__id, .lib-card__credit { font-size: .875rem; line-height: 1.5; }
.lib-card__files li { font-size: .75rem; }

.lib-card:focus-visible {
  outline: 3px solid var(--color-deep-blue);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Design review 2026-10-03, item 9 (chip pages): the technical figures at a
   useful size. They stack, each the column's full width; each picture's link
   shows its own label (its aria-label, already on the page) under it, so the
   full-resolution file is easy to find; captions read left-aligned.
   -------------------------------------------------------------------------- */
.chip-geometry { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.chip-geometry__view { cursor: zoom-in; }
.chip-geometry__view img { width: 100%; height: auto; object-fit: contain; }

.chip-geometry__view::after {
  content: attr(aria-label);
  display: block;
  margin-top: .5rem;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--link);
  text-decoration: underline;
}

.chip-geometry__caption, .chip-geometry__downloads {
  text-align: left;
  max-width: 68ch;
  font-size: .875rem;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Design review 2026-10-03, item 10 (with main.css): white content cards
   with a light border; controls outlined in the control-border colour.
   -------------------------------------------------------------------------- */
.tool-card { background: var(--color-white); border-color: var(--color-border); }
.lib-card { border-color: var(--color-border); }
.tool-card__meta { letter-spacing: .02em; }
.lib-search, .lib-sort { border-color: var(--color-control-border); }
.lib-search::placeholder { color: var(--color-muted); opacity: 1; }

/* --------------------------------------------------------------------------
   Library pictures (2026-10-05): a chip's or the benchmark suite's picture at
   the top of its page, and each product variant's in its section. Rendered
   on navy, so they sit on navy while they load.
   -------------------------------------------------------------------------- */
.lib-picture { margin: 0 0 var(--sp-8); }
.lib-picture img,
.pv__picture img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--color-navy);
}
.lib-picture figcaption {
  margin-top: var(--sp-2);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: 68ch;
}
.pv__picture { margin: .75rem 0 1rem; }