/*
  phpframework.org - site skeleton styles
  Palette and shell shared by every page.
*/

:root {
  --burgundy: #8A1C3D;
  --teal: #16BFA6;
  --black: #111111;
  --white: #FFFFFF;
  --metal: #AEB6BF;
  --bg: #eef1f4;          /* light grey main content background */
  --ink: #24303a;
  --muted: #5b6b78;
  --line: #d7dee4;

  --curve-h: 28px;        /* height of the curve band in the small/resting header */
  --head-big: 324px;      /* content offset on the homepage (clears the large header) */
  --head-small: 150px;    /* content offset on inner pages (clears the small header) */
  --logo-big: 380px;      /* homepage logo width at the top of the page */
  --logo-small: 104px;    /* logo width once shrunk, and on inner pages */

  --sans: 'Helvetica Neue', Arial, Helvetica, sans-serif;
  --heavy: 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

/* no smooth scroll: arriving at the #start anchor must jump instantly, never animate
   down (an animated scroll makes the header flick large->small on the way). */

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
}

a { color: var(--burgundy); }

/* ---------------------------------------------------------------- header

  The header is FIXED (overlaid), never in normal flow. Its size therefore has
  no effect on page height or scroll position: shrinking it moves nothing on the
  page. The content below is pushed clear of it by a constant offset on
  .page-body (--head-big on the homepage, --head-small on inner pages).

  On the homepage a small scroll handler toggles body.shrink past a threshold,
  and toggles it back off at a slightly lower threshold (hysteresis to absorb
  scroll jitter). The size change is a plain CSS transition, smooth everywhere
  including mobile.
*/

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
}

.header-inner {
  position: relative;
  z-index: 2;
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 2px;
  transition: padding .28s ease, gap .28s ease;
}

.logo-link { display: block; line-height: 0; }

.logo {
  display: block;
  height: auto;
  width: var(--logo-small);
  transition: width .28s ease;
}

/* the big oval curve at the bottom of the header */
.header-curve {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  width: 100%;
  height: var(--curve-h);
  display: block;
  z-index: 1;
  filter: drop-shadow(0 5px 4px rgba(17, 17, 17, 0.06));
  transition: height .28s ease;
}

/* ------------------------------------------------------- construction badge

  A temporary "under construction" ribbon pinned to the top-left of the header,
  mirroring the search control top-right, so every page makes clear the site is
  not finished yet. Styled like the palette swatches (black border and hard
  shadow). Remove this rule and its media-query override at launch.
*/

.site-header::before {
  content: "Under construction";
  position: absolute;
  top: 16px;
  left: 18px;
  z-index: 4;
  padding: 5px 11px;
  font: 700 0.62rem/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--burgundy);
  border: 2px solid var(--black);
  border-radius: 8px;
  box-shadow: 3px 3px 0 0 var(--black);
  transform: rotate(-3deg);
  pointer-events: none;
}

/* on narrow screens the centred logo and the two top corners get tight, so drop
   to a compact dot-free label that still reads */
@media (max-width: 560px) {
  .site-header::before { top: 12px; left: 10px; padding: 4px 8px; font-size: 0.54rem; }
}

/* ------------------------------------------------------------- top nav */

.top-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.top-nav a {
  display: block;
  padding: 9px 20px;
  border-radius: 10px;
  border: 2px solid transparent;
  font: 700 0.82rem/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  transition: color .12s, border-color .12s, background .12s;
}

.top-nav a:hover {
  border-color: var(--teal);
  color: var(--burgundy);
}

.top-nav a.selected {
  background: var(--burgundy);
  color: var(--white);
  border-color: var(--burgundy);
}

/* --------------------------------------------- homepage large / small */

/* large state (at the top of the homepage). the small state is the base rule
   above, so it also defines the header on every inner page - they match exactly. */
body.home .logo { width: var(--logo-big); }
body.home .header-inner { padding-top: 34px; padding-bottom: 8px; gap: 18px; }
body.home .header-curve { height: 46px; }

/* small state (once scrolled past the threshold). the bottom padding AND the curve
   both shrink, so the menu tucks nearer the curve as the header gets small. */
body.home.shrink .logo { width: var(--logo-small); }
body.home.shrink .header-inner { padding-top: 20px; padding-bottom: 2px; gap: 12px; }
body.home.shrink .header-curve { height: var(--curve-h); }

/* Arriving via the #start anchor: the page loads already scrolled down to #start
   (past the shrink threshold), and this class makes the header start SMALL from the
   first paint so it neither flashes nor animates. header.js then hands off to the
   normal .shrink class, so scrolling back up to the top still grows the header as
   usual. html.preload suppresses transitions until that first paint has settled. */
html.preload .logo,
html.preload .header-inner,
html.preload .header-curve { transition: none; }

html.at-start .logo { width: var(--logo-small); }
html.at-start .header-inner { padding-top: 20px; padding-bottom: 2px; gap: 12px; }
html.at-start .header-curve { height: var(--curve-h); }

/* #start sits (head-big - head-small) down the page. Loading index.html#start scrolls
   to it, which lines the homepage title up with the inner-page titles and leaves the
   big header reachable by scrolling back to the top. */
#start {
  position: absolute;
  left: 0;
  top: calc(var(--head-big) - var(--head-small));
  width: 1px;
  height: 1px;
}

/* --------------------------------------------------------- page body */

.page-body {
  max-width: 1180px;
  width: 100%;
  margin: var(--head-small) auto 0;
  padding: 0 24px 50px;
  flex: 1 0 auto;   /* grow so a short page still pushes the footer to the bottom */
}

/* the homepage sits below the large header. it has no side menu, so its content
   fills the same content area as every other page (the 1180px cap on .page-body),
   centred with the same margin each side, just with nothing to its left. */
body.home .page-body { margin-top: var(--head-big); }

/* content sits under the curve, clear of it. matches the inner-page .layout top
   padding so the homepage title lines up with the inner-page titles. */
.content { padding-top: 66px; }

.content h1 {
  margin: 0 0 12px;
  font-family: var(--heavy);
  font-size: 2.2rem;
  color: var(--burgundy);
  letter-spacing: -0.01em;
}

.content section { margin: 0 0 22px; }

.content h2 {
  margin: 26px 0 10px;
  font-size: 1.4rem;
  color: var(--black);
}

.content section > :first-child { margin-top: 0; }

.content p { margin: 0 0 16px; }

.lead { font-size: 1.12rem; color: var(--muted); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  margin: 0 0 18px;
}

/* no double spacing above the first thing inside a card */
.card > :first-child { margin-top: 0; }

/* ------------------------------------------------- two column layout */

.layout {
  display: flex;
  align-items: flex-start;
  gap: 34px;
  padding-top: 66px;
}

.layout .content {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0;
}

.side-nav {
  /* fixed width, identical on every page that has a side menu; min-width:0 stops
     a long unbreakable module name from stretching it wider than 244px */
  flex: 0 0 244px;
  min-width: 0;
  /* the menu flows with the page (no internal scroll); its extra top padding
     keeps it starting where it did before the content was moved up 30px */
  padding: 36px 14px 20px 0;
}

.side-nav section { margin: 0 0 20px; }

.side-nav h3 {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--teal);
  font: 700 0.72rem/1.2 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--burgundy);
}

.side-nav ul {
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
}

.side-nav li { margin: 0; }

.side-nav a {
  display: block;
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-nav a:hover { background: #e2e8ee; color: var(--burgundy); }
.side-nav a.selected { background: var(--burgundy); color: var(--white); }

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

@media (max-width: 820px) {
  .layout { flex-direction: column; gap: 10px; }
  .side-nav {
    position: static;
    flex-basis: auto;
    width: 100%;
    max-height: none;
  }
}

/* respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
  .logo, .header-inner { transition: none; }
}

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

  White like the header, stuck to the bottom of the viewport when the page is
  short (body is a flex column and .page-body grows), or pushed below the fold
  when the content is tall. Its top edge is the header curve mirrored vertically.
*/

.site-footer {
  position: relative;
  flex: 0 0 auto;
  background: var(--white);
  padding: 22px 0 26px;
}

.footer-curve {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  width: 100%;
  height: var(--curve-h);
  display: block;
  filter: drop-shadow(0 -5px 4px rgba(17, 17, 17, 0.06));
}

.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 0.85rem;
  color: var(--muted);
}

.footer-inner a { color: var(--burgundy); }

/* a tall filler used only to demonstrate scrolling in the skeleton */
.scroll-filler { min-height: 55vh; }

/* ----------------------------------------------------------------- code

  Code samples sit in a dark box on the light page. A small language tab is
  pinned to the top-right corner (add a language class to the <code>, e.g.
  <code class="php"> or <code class="bash">), and copy.js drops a Copy button
  into every <pre><code> that is not marked class="plain".

  Light per-token highlighting comes from hand-added spans inside the block:
    .com comment · .kw keyword · .type class or type · .fn function or method
    .str string · .var $variable · .num number
*/

.content pre {
  position: relative;
  margin: 0 0 18px;
  background: #10171e;
  border: 1px solid #0a0f14;
  border-radius: 12px;
  padding: 16px 18px;
  overflow: auto;
}

.content pre code {
  display: block;
  font: 0.86rem/1.6 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  color: #d6dee6;
  white-space: pre;
}

/* language tab, top-right */
.content pre > code.php,
.content pre > code.bash,
.content pre > code.sql,
.content pre > code.dockerfile,
.content pre > code.filesystem { padding-top: 16px; }

.content pre > code.php::before,
.content pre > code.bash::before,
.content pre > code.sql::before,
.content pre > code.dockerfile::before,
.content pre > code.filesystem::before {
  position: absolute;
  top: 0;
  right: 0;
  padding: 3px 10px;
  font: 700 0.64rem/1 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--metal);
  background: rgba(255, 255, 255, 0.05);
  border-left: 1px solid #2a3742;
  border-bottom: 1px solid #2a3742;
  border-radius: 0 12px 0 12px;
}
.content pre > code.php::before { content: "php"; }
.content pre > code.bash::before { content: "bash"; }
.content pre > code.sql::before { content: "sql"; }
.content pre > code.dockerfile::before { content: "dockerfile"; }
.content pre > code.filesystem::before { content: "filesystem"; }

/* per-token highlight classes */
.content pre .com { color: #7d8b98; }
.content pre .kw { color: var(--teal); }
.content pre .type { color: #7fe0cd; }
.content pre .fn { color: #8fb7ff; }
.content pre .str { color: #e6b877; }
.content pre .var { color: #cbd5dd; }
.content pre .num { color: #f0a3a3; }

/* filesystem listing: a directory tree that names a directory, a file, and a short
   italic description of each entry to its right. Mark up as
   <pre class="plain"><code class="filesystem">, with .dir on directories (keep the
   trailing slash), .file on files, and .desc on the description. Reads as an
   illustration, so it carries the plain lighter box and no copy button. */
.content pre .dir { color: #8fb7ff; }
.content pre .file { color: #7fe0cd; }
.content pre .desc { color: #7d8b98; font-style: italic; }

/* an illustrative block (a folder tree, a diagram) reads lighter and carries no
   copy button: it is a picture, not a snippet to lift */
.content pre.plain { background: #1a222b; }
.content pre.plain code { color: #b9c4cd; }

/* inline code in prose: a light chip in the burgundy ink */
.content :not(pre) > code {
  background: #dfe6ec;
  color: var(--burgundy);
  padding: 1px 6px;
  border-radius: 6px;
  font: 0.86em/1.4 'SF Mono', Menlo, Consolas, monospace;
}

/* Copy button injected by copy.js. Hovers in the bottom-right of a code box,
   turns teal and reads "Copied" for a moment on success. */
.code-copy {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-width: 5.4em;
  padding: 3px 10px;
  font: 650 0.72rem/1.4 var(--sans);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .18s ease, background .15s ease, color .15s ease, border-color .15s ease;
}

pre:hover .code-copy,
.code-copy:focus { opacity: 1; transform: none; }

.code-copy.copied {
  background: var(--teal);
  color: #04231d;
  border-color: var(--teal);
}

/* a caption line directly under a code block reads as a figure caption */
.content pre + p.caption {
  margin-top: -10px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}

/* ------------------------------------------------------------- reference

  Pieces used by the module reference pages under modules/: a grid of module
  family cards on the landing page, module-name chips, and a heading anchor
  offset so in-page contents links land clear of the fixed header.
*/

/* in-page anchor targets must clear the fixed header when jumped to */
.content h2,
.content h3,
.content h4 { scroll-margin-top: calc(var(--head-small) + 12px); }

/* grid of module family cards on the modules landing page */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  margin: 0 0 18px;
}
.module-grid .card { margin: 0; }
.module-grid .card h3 { margin: 0 0 8px; font-size: 1.02rem; color: var(--burgundy); }
.module-grid .card p { margin: 0 0 10px; font-size: 0.94rem; max-width: none; }

/* guide landing: each section card lists the pages in that section as a clean
   link list under its heading */
.module-grid .card ul { margin: 2px 0 0; padding: 0; list-style: none; }
.module-grid .card li { margin: 0; }
.module-grid .card li a {
  display: block;
  padding: 4px 8px;
  border-radius: 7px;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--ink);
}
.module-grid .card li a:hover { background: #e2e8ee; color: var(--burgundy); }

/* a wrapped row of module-name chips inside a family card. the module that has
   a page is a burgundy link; the rest are plain grey until their page exists */
.mods { display: flex; flex-wrap: wrap; gap: 6px; }
.mods a,
.mods span {
  font: 0.78rem/1.4 'SF Mono', Menlo, Consolas, monospace;
  padding: 2px 7px;
  border-radius: 6px;
  background: #dfe6ec;
  border: 1px solid var(--line);
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.mods a { color: var(--burgundy); border-color: var(--teal); font-weight: 600; }
.mods a:hover { background: var(--teal); color: var(--white); }

/* --------------------------------------------------- pure reference pages

  The standard for a module reference: a breadcrumb, a short intro that links to
  the guide for how-to, an index of the classes on the page, then every class as
  an <h3> with its members grouped under <h4> category headings. Each member is
  one row of a .members list: a monospace signature line and a short description.
  Usage examples belong in the guide, not here - a reference only catalogues the
  data objects, classes, properties and functions the module exposes.
*/

/* breadcrumb trail above the page title */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--muted);
}
.breadcrumb li { display: flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before { content: "/"; color: var(--metal); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* the index of classes near the top of a reference page (inside a .card) */
.ref-index { list-style: none; margin: 4px 0 0; padding: 0; }
.ref-index li { padding: 4px 0; }
.ref-index li + li { border-top: 1px solid var(--line); }

/* a class opens with a card listing every function as a monospace link chip */
.fn-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.fn-list a {
  font: 0.8rem/1.4 'SF Mono', Menlo, Consolas, monospace;
  padding: 2px 8px;
  border-radius: 6px;
  background: #dfe6ec;
  border: 1px solid var(--line);
  color: var(--burgundy);
  text-decoration: none;
  white-space: nowrap;
}
.fn-list a:hover { background: var(--teal); color: var(--white); border-color: var(--teal); }

/* each function is its own subsection: the name as the heading, then the
   burgundy signature line, a one-line description, a parameter table, and the
   return type */
.content h3.fn-name {
  margin: 28px 0 8px;
  font-size: 1.14rem;
  color: var(--black);
  font-family: var(--sans);
}

/* the full signature: burgundy monospace. overrides the inline code chip so it
   is a plain wrapping line, not a filled pill */
.content .sig {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: none;
  font: 0.86rem/1.55 'SF Mono', Menlo, Consolas, monospace;
  color: var(--burgundy);
  white-space: pre-wrap;
  word-break: break-word;
}

.content .desc { margin: 0 0 12px; }

/* parameter table under a function */
.content .params {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 12px;
  font-size: 0.92rem;
}
.content .params th,
.content .params td {
  text-align: left;
  vertical-align: top;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
}
.content .params thead th {
  font: 700 0.7rem/1.2 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid var(--teal);
}
.content .params td.nowrap { white-space: nowrap; }

/* the return type line after the table */
.content .returns { margin: 0 0 6px; }
.content .returns .label {
  display: inline-block;
  margin-right: 8px;
  font: 700 0.7rem/1.2 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ----------------------------------------------------------------- search

  A magnifying-glass control pinned to the top-right corner of the header. It is
  absolutely positioned, so it never shifts the centred logo or menu. Closed, it
  is just the glass in a rounded box; clicking it (search.js) folds an input out
  to the left, and the glass becomes the submit button. On the search page the
  control carries .selected and lights up burgundy, standing in for the selected
  menu item. Below that, the search page's own big box and results table.
*/

.nav-search {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 3;
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: 10px;
  transition: border-color .15s, background .15s;
}

.nav-search-input {
  width: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: 0.95rem/1 var(--sans);
  opacity: 0;
  transition: width .22s ease, padding .22s ease, opacity .18s ease;
}

.nav-search.open { background: var(--white); border-color: var(--teal); }
.nav-search.open .nav-search-input { width: 200px; padding: 0 2px 0 12px; opacity: 1; }

.nav-search-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: color .12s;
}
.nav-search-btn:hover { color: var(--burgundy); }
.nav-search-btn svg { display: block; width: 17px; height: 17px; }

/* on the search page the glass stands in for a selected menu item */
.nav-search.selected { background: var(--burgundy); border-color: var(--burgundy); }
.nav-search.selected .nav-search-btn { color: var(--white); }
.nav-search.open .nav-search-btn { color: var(--muted); }

/* live suggestions dropdown, filled by search.js from the data.phpframework.org
   `suggest` endpoint. Shown while the control is focused and has matches. */
.nav-suggest {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 260px;
  max-width: 78vw;
  padding: 6px;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(36, 48, 58, 0.16);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
}
.nav-search:focus-within .nav-suggest:not(:empty) { visibility: visible; opacity: 1; transform: none; }
.nav-suggest a {
  display: block;
  padding: 6px 10px;
  border-radius: 7px;
  color: var(--ink);
  font: 0.9rem/1.3 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-suggest a:hover, .nav-suggest a:focus { background: #e2e8ee; color: var(--burgundy); outline: none; }
.nav-suggest a.more {
  margin-top: 4px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  border-radius: 0;
  color: var(--burgundy);
  font-weight: 700;
}

@media (max-width: 480px) {
  .nav-search.open .nav-search-input { width: 44vw; }
}

/* --------------------------------------------------------- search page

  A single centred column: a large search box, then the results below it. The
  results are rendered from window.SEARCH by the inline script on the page.
*/

.search-page .content { max-width: 760px; margin: 0 auto; }

#searchform {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 6px 0 8px;
}
#searchform input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 50px;
  padding: 0 16px;
  font: 1.05rem/1 var(--sans);
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--line);
  border-right: 0;
  border-radius: 12px 0 0 12px;
  outline: none;
}
#searchform input[type="search"]:focus { border-color: var(--teal); }
#searchform button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 22px;
  font: 700 0.82rem/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--burgundy);
  border: 2px solid var(--burgundy);
  border-radius: 0 12px 12px 0;
  cursor: pointer;
}
#searchform button:hover { background: #741832; border-color: #741832; }
#searchform button svg { display: block; width: 16px; height: 16px; }

#results { margin-top: 18px; }
#results[hidden] { display: none; }
#results .count { margin: 0 0 12px; color: var(--muted); font-size: 0.92rem; }
#results .empty { margin: 0; color: var(--muted); }
#results table { width: 100%; border-collapse: collapse; table-layout: fixed; }
#results th,
#results td {
  text-align: left;
  vertical-align: top;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
#results thead th {
  font: 700 0.7rem/1.2 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid var(--teal);
}
#results th:nth-child(1),
#results td:nth-child(1) { width: 44%; }
#results th:nth-child(2),
#results td:nth-child(2) { width: 15%; }
#results td.kind { color: var(--muted); font-size: 0.86rem; }
#results td.desc {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#results td code {
  padding: 0;
  background: none;
  border: 0;
  color: var(--burgundy);
  font: 0.88rem/1.4 'SF Mono', Menlo, Consolas, monospace;
}
#results a { text-decoration: none; }
#results a:hover code { text-decoration: underline; }
#results b { color: var(--teal); font-weight: 700; }