/* API reference. Layers on book.css and takes every colour from its theme
   tokens, so the five book themes drive this page with no palette of its own. */

/* `width: 100%` is load-bearing, not decoration. The shell lays this out as a
   column flex item, which resolved its cross size to max-content -- and the
   category table carries `min-width: 680px`, so max-content was 769px however
   narrow the viewport got. The table's own scroll container bounds the
   *overflow* but still feeds max-content, so the whole page was dragged wide
   and every child stretched with it. A definite width stops that at the top
   and lets the table scroll inside itself, which is what it is there for. */
.api-page {
  width: 100%; box-sizing: border-box;
  max-width: 1180px; margin: 0 auto; padding: 0 28px 64px;
}
.api-lede { color: var(--fg); opacity: .82; max-width: 68ch; }

/* Verification band ------------------------------------------------------ */
.api-band {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 32px; margin: 22px 0 30px; padding: 20px 22px;
  border: 1px solid var(--table-border); border-radius: var(--radius-lg);
  background: var(--table-alt-bg);
}
@media (max-width: 860px) { .api-band { grid-template-columns: 1fr; gap: 20px; } }
.api-band p { margin: 0 0 10px; max-width: 66ch; }
.api-band p:last-child { margin-bottom: 0; }
.api-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--links); margin: 0 0 8px;
}
.api-ledger {
  border: 1px solid var(--table-border); border-radius: var(--radius-md);
  background: var(--bg); overflow: hidden; align-self: start;
}
.api-ledger div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 8px 13px; border-bottom: 1px solid var(--table-border); font-size: 13px;
}
.api-ledger div:last-child { border-bottom: 0; }
.api-ledger .k { opacity: .72; }
.api-ledger .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.api-ledger .v.ok { color: var(--sidebar-active); }
.api-ledger .v.open { color: var(--inline-code-fg); }

/* Metrics ---------------------------------------------------------------- */
.api-metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--table-border); border: 1px solid var(--table-border);
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 26px;
}
@media (max-width: 760px) { .api-metrics { grid-template-columns: repeat(2, 1fr); } }
.api-metric { background: var(--bg); padding: 15px 17px; }
.api-metric .b {
  font-family: var(--font-mono); font-size: 25px; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.15; color: var(--fg-heading);
}
.api-metric .b span { font-size: 13px; opacity: .55; font-weight: 400; }
.api-metric .l { font-size: 12px; opacity: .75; margin-top: 2px; }
.api-metric .s { font-size: 11.5px; opacity: .6; margin-top: 6px; font-family: var(--font-mono); }
.api-bar { height: 4px; border-radius: 2px; background: var(--table-border); margin-top: 9px; overflow: hidden; }
/* The same coverage ramp as the operation meters. This carried a fixed hue
   while its markup already asked for a step class, so the summary and backend
   bars read on a different scale from every other bar on the page. */
.api-bar i { display: block; height: 100%; background: var(--cov-9); }
.api-bar i.cov-1 { background: var(--cov-1); }
.api-bar i.cov-2 { background: var(--cov-2); }
.api-bar i.cov-3 { background: var(--cov-3); }
.api-bar i.cov-4 { background: var(--cov-4); }
.api-bar i.cov-5 { background: var(--cov-5); }
.api-bar i.cov-6 { background: var(--cov-6); }
.api-bar i.cov-7 { background: var(--cov-7); }
.api-bar i.cov-8 { background: var(--cov-8); }
.api-bar i.cov-9 { background: var(--cov-9); }

/* Controls --------------------------------------------------------------- */
.api-controls {
  position: sticky; top: var(--menu-bar-height); z-index: 5; background: var(--bg);
  padding: 12px 0; border-bottom: 1px solid var(--table-border);
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.api-search { flex: 1 1 250px; min-width: 190px; }
.api-search input {
  width: 100%; padding: 8px 12px; border: 1px solid var(--table-border);
  border-radius: var(--radius-md); background: var(--table-alt-bg); color: var(--fg);
  font-family: var(--font-mono); font-size: 13px;
}
.api-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.api-chip {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; line-height: 1;
  padding: 7px 11px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--table-border); background: var(--table-alt-bg); color: var(--fg);
}
.api-chip:hover { border-color: var(--sidebar-active); }
.api-chip[aria-pressed="true"] {
  background: var(--sidebar-active); border-color: var(--sidebar-active); color: #fff;
}
.api-count {
  margin-left: auto; font-family: var(--font-mono); font-size: 12.5px;
  opacity: .7; font-variant-numeric: tabular-nums;
}

/* Matrix ----------------------------------------------------------------
   A two-column list, not a four-column table: a column per backend forced a
   min-width wider than a phone, so the first screenshot of this page showed
   one backend and a horizontal scrollbar. The backend strip carries its own
   labels instead, and wraps. */
.api-list { border: 1px solid var(--table-border); border-radius: var(--radius-lg); overflow: hidden; margin-top: 16px; }
.api-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 20px;
  align-items: center; padding: 11px 15px; width: 100%; text-align: left;
  background: transparent; border: 0; border-bottom: 1px solid var(--table-border);
  color: inherit; font: inherit; cursor: pointer;
}
.api-row:last-of-type { border-bottom: 0; }
.api-row:hover { background: var(--table-alt-bg); }
.api-row[aria-expanded="true"] { background: var(--sidebar-active-bg); }
@media (max-width: 640px) { .api-row { grid-template-columns: 1fr; gap: 10px; } }
.api-id { min-width: 0; }
.api-name {
  font-family: var(--font-mono); font-size: 13.5px; color: var(--fg-heading);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.api-fam {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; opacity: .6; padding: 2px 6px; border-radius: 3px;
  border: 1px solid var(--table-border);
}
.api-desc {
  font-size: 12.5px; opacity: .72; margin-top: 3px; max-width: 72ch;
  /* A structural line is a run of mono identifiers with no spaces to break at
     -- `AdaptivePool2dAttributes`, `::adaptive_avg_pool2d`. Without this they
     set the row's minimum width and push the whole page wider than the
     viewport, which is what the first phone screenshot showed. */
  overflow-wrap: anywhere;
}
.api-desc.structural { font-family: var(--font-mono); font-size: 11.5px; opacity: .5; }
.api-name { overflow-wrap: anywhere; }

/* Coverage strip: one meter per backend, labelled, so no column headers and
   no minimum width are needed. */
.api-strip { display: grid; grid-template-columns: repeat(4, 76px); gap: 8px; }
@media (max-width: 640px) { .api-strip { grid-template-columns: repeat(4, 1fr); } }
.api-meter { display: flex; flex-direction: column; gap: 4px; }
.api-meter .lab {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em;
  text-transform: uppercase; opacity: .55; display: flex; justify-content: space-between;
  gap: 6px;
}
/* `4/4` rather than `4`: the ratio is the point, and spelling it out means the
   bar reinforces the number instead of being the only place it is stated. An
   earlier version encoded the count as a number and the ratio as a fill depth,
   so two rows both reading `1` could look different for a reason nothing on
   screen explained. */
.api-meter .lab b {
  font-weight: 600; font-variant-numeric: tabular-nums; opacity: .95;
  letter-spacing: 0; text-transform: none;
}
/* The denominator is the same on every row, so it is stated but not shouted. */
.api-meter .lab b em { font-style: normal; font-weight: 400; opacity: .45; }
/* No `overflow: hidden`: the reference tick deliberately stands proud of the
   track so it reads as a mark on a scale rather than as part of the fill. */
.api-track { position: relative; height: 6px; border-radius: 3px; background: var(--table-border); }
/* The best any backend reaches on this same operation. Present only when some
   backend reaches further than this one, so a tick always means "there is more
   to have here". */
.api-ref {
  position: absolute; top: -3px; height: 12px; width: 2px; margin-left: -1px;
  border-radius: 1px; background: var(--fg); opacity: .45;
}
/* The bar says how much, and nothing else. Length and colour encode the same
   one quantity -- coverage -- so the colour reinforces the reading instead of
   smuggling in a second variable, which is what made an earlier version of
   this page unreadable. Implementation is a separate fact and gets its own
   mark beside the operation name.

   The ramp is stepped, not smooth: the quantity is a count of element types,
   so every stop is a whole type and a continuous gradient would imply
   precision the data does not carry. Lightness rises along with hue, so the
   steps stay distinguishable without relying on red/green discrimination. */
.api-fill { display: block; height: 100%; border-radius: 3px; background: var(--cov-9); }
/* The book stamps one of five themes as a class on <html>: navy, coal and ayu
   are dark, light and rust are light, and navy is the default. So the ramp
   defaults to its dark form and the two light themes override it -- not
   `prefers-color-scheme`, which this page never consults, and not a
   `data-theme="dark"` that no theme here ever sets. */
:root {
  --cov-1: #e2594a; --cov-2: #e8734a; --cov-3: #ee8f45;
  --cov-4: #f0ad48; --cov-5: #e8c94c; --cov-6: #cfd451;
  --cov-7: #a8cc58; --cov-8: #79bd62; --cov-9: #4dad6b;
}
/* Not `html:not(.js)`: this shell overwrites html.className with the theme
   name, so the `js` class is never present and that selector matches every
   theme, which handed the light ramp to all five. */
.light, .rust {
  --cov-1: #c8483b; --cov-2: #d2603a; --cov-3: #d97b38;
  --cov-4: #dc9a3c; --cov-5: #c9a93a; --cov-6: #a8ad3c;
  --cov-7: #83a041; --cov-8: #5c9048; --cov-9: #37804c;
}
.api-fill.cov-1 { background: var(--cov-1); }
.api-fill.cov-2 { background: var(--cov-2); }
.api-fill.cov-3 { background: var(--cov-3); }
.api-fill.cov-4 { background: var(--cov-4); }
.api-fill.cov-5 { background: var(--cov-5); }
.api-fill.cov-6 { background: var(--cov-6); }
.api-fill.cov-7 { background: var(--cov-7); }
.api-fill.cov-8 { background: var(--cov-8); }
.api-fill.cov-9 { background: var(--cov-9); }

/* Composed, marked once beside the operation it describes. */
.api-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--inline-code-fg); margin-left: 7px; vertical-align: middle;
  flex: none;
}

/* The public entry point, in the shape the reader will type. */
.api-sig {
  display: block; font-family: var(--font-mono); font-size: 12px;
  opacity: .62; margin-top: 3px; overflow-wrap: anywhere; background: none;
  padding: 0; border: 0;
}
.api-meter.none .lab { opacity: .3; }
.api-meter.none .api-track { visibility: hidden; }

.api-detail-in {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1px; background: var(--table-border); border-bottom: 1px solid var(--table-border);
}
/* Grid items default to min-width:auto, which lets one long code line widen
   the whole track past a phone viewport. The figures keep their own
   horizontal scroll; the page must not scroll. */
.api-detail-in > *, #flowSteps > .api-step, #shapeGallery > .api-ex { min-width: 0; }
.api-dcell { background: var(--bg); padding: 12px 15px; min-width: 0; }
/* The worked example is a full-width strip, not a seventh narrow column:
   code squeezed into a 215px auto-fit track is what clipped every readout. */
.api-dcell.api-example { grid-column: 1 / -1; }
.api-dcell.api-example .api-usage { border-bottom: 0; padding-bottom: 0; }
.api-dcell h4 {
  margin: 0 0 8px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; opacity: .7; border: 0; padding: 0;
}
.api-dcell.on h4 { color: var(--links); opacity: 1; }
.api-kv { display: flex; gap: 8px; font-size: 12.5px; margin-bottom: 5px; align-items: baseline; }
.api-kv .k { opacity: .55; min-width: 58px; flex: none; font-size: 11.5px; }
.api-kv .v { font-family: var(--font-mono); word-break: break-word; }
.api-dts { display: flex; flex-wrap: wrap; gap: 4px; }
.api-dt {
  font-family: var(--font-mono); font-size: 11px; line-height: 1; padding: 3px 6px;
  border-radius: 3px; background: var(--table-alt-bg); border: 1px solid var(--table-border);
}
.api-none { opacity: .5; font-size: 12.5px; font-style: italic; }
.api-empty { padding: 34px; text-align: center; opacity: .7; }
/* The key sits above the table it explains: a reader meets the encoding before
   the marks, rather than scrolling past 179 rows to find out what they meant. */
.api-key {
  border: 1px solid var(--table-border); border-radius: var(--radius-lg);
  padding: 14px 16px; margin: 18px 0 4px; display: flex; flex-direction: column; gap: 12px;
}
.api-key-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.api-key-cap {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; opacity: .6; flex: none;
}
.api-ramp { display: flex; gap: 2px; flex: none; }
.api-ramp i { display: block; width: 17px; height: 9px; border-radius: 2px; }
.api-ramp i.cov-1 { background: var(--cov-1); }
.api-ramp i.cov-2 { background: var(--cov-2); }
.api-ramp i.cov-3 { background: var(--cov-3); }
.api-ramp i.cov-4 { background: var(--cov-4); }
.api-ramp i.cov-5 { background: var(--cov-5); }
.api-ramp i.cov-6 { background: var(--cov-6); }
.api-ramp i.cov-7 { background: var(--cov-7); }
.api-ramp i.cov-8 { background: var(--cov-8); }
.api-ramp i.cov-9 { background: var(--cov-9); }
.api-key-note { font-size: 12.5px; opacity: .75; flex: 1 1 260px; min-width: 0; }
.api-key-note b { font-weight: 600; opacity: .95; }
.api-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-start; font-size: 12.5px; opacity: .8; }
.api-legend > span { flex: 1 1 240px; min-width: 0; display: flex; gap: 7px; align-items: baseline; }
.api-dot-key {
  width: 7px; height: 7px; border-radius: 50%; background: var(--inline-code-fg);
  display: block; flex: none; position: relative; top: 3px;
}
.api-legend span { display: inline-flex; align-items: center; gap: 6px; }
.api-legend i { flex: none; display: block; }
.api-legend i.api-ref-key {
  width: 2px; height: 12px; border-radius: 1px; background: var(--fg); opacity: .45;
  position: relative; top: 3px;
}

/* Category + surface tables keep a scroll container of their own. */
.api-tablewrap { overflow-x: auto; border: 1px solid var(--table-border); border-radius: var(--radius-lg); margin-top: 16px; }
.api-tablewrap table { border-collapse: collapse; width: 100%; min-width: 680px; margin: 0; }
.api-tablewrap thead th {
  background: var(--table-header-bg); text-align: left; font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; opacity: .85;
  padding: 9px 14px; border-bottom: 1px solid var(--table-border); white-space: nowrap;
}
.api-tablewrap tbody tr { border-bottom: 1px solid var(--table-border); }
.api-tablewrap tbody tr:last-child { border-bottom: 0; }
.api-tablewrap td { padding: 8px 14px; vertical-align: middle; }
.api-tablewrap td.name { font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; }

/* Surface + notes -------------------------------------------------------- */
.api-surface {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px;
  background: var(--table-border); border: 1px solid var(--table-border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.api-scell { background: var(--bg); padding: 13px 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.api-scell .n { font-family: var(--font-mono); font-size: 13px; opacity: .85; }
.api-scell .c { font-family: var(--font-mono); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg-heading); }
.api-notes { border-left: 3px solid var(--sidebar-active); padding-left: 16px; }
.api-notes p { max-width: 70ch; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* The docs.rs reference for an operation, in its expanded detail. */
.api-docs {
  display: inline-block; font-family: var(--font-mono); font-size: 12px;
  color: var(--links); text-decoration: none; overflow-wrap: anywhere;
}
.api-docs:hover, .api-docs:focus-visible { text-decoration: underline; }

/* -- section nav --------------------------------------------------------
   Sticky, so the reader never scrolls back up to switch reference sections.
   Horizontally scrollable on narrow viewports instead of wrapping off-screen. */
.api-tabs {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 22px 0 4px;
  border-bottom: 1px solid var(--table-border);
  position: sticky; top: var(--menu-bar-height); z-index: 6;
  background: var(--bg); padding-top: 6px;
}
@media (max-width: 700px) {
  .api-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .api-tab { flex: none; }
}
.api-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 13.5px; color: inherit; opacity: .6;
  padding: 9px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.api-tab:hover { opacity: .85; }
.api-tab[aria-selected="true"] {
  opacity: 1; font-weight: 600; border-bottom-color: var(--sidebar-active);
}
.api-tab:focus-visible { outline: 2px solid var(--links); outline-offset: -2px; }

/* -- cards shared by element types and backends ------------------------- */
.api-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px; margin-top: 16px;
}
.api-card {
  border: 1px solid var(--table-border); border-radius: var(--radius-lg);
  padding: 14px 16px; min-width: 0;
}
.api-card h3 {
  margin: 0 0 6px; font-size: 15px; font-weight: 600;
}
.api-card h3 code { font-family: var(--font-mono); font-size: 14px; }
.api-card p { margin: 0 0 10px; font-size: 12.5px; opacity: .75; }
.api-card .api-kv { margin-top: 5px; }
.api-card .api-bar { margin: 0 0 10px; }

/* -- data flow ---------------------------------------------------------- */
.api-flow { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.api-step {
  border: 1px solid var(--table-border); border-left: 3px solid var(--sidebar-active);
  border-radius: var(--radius-md); padding: 12px 16px; counter-increment: flow;
}
.api-step h3 {
  margin: 0 0 5px; font-size: 14px; font-weight: 600;
  font-family: var(--font-mono);
}
.api-step h3::before { content: counter(flow) ". "; opacity: .5; }
.api-flow { counter-reset: flow; }
.api-step p { margin: 0; font-size: 13px; opacity: .8; }
.api-err {
  display: inline-block; margin-top: 8px; font-family: var(--font-mono);
  font-size: 11.5px; color: var(--inline-code-fg); background: none; padding: 0; border: 0;
}

/* -- type reference ----------------------------------------------------- */
.api-tyrow {
  display: grid; grid-template-columns: 58px minmax(0, 200px) minmax(0, 1fr);
  gap: 10px; align-items: baseline; min-width: 0;
  padding: 7px 4px; border-bottom: 1px solid var(--table-border);
}
.api-tyrow:last-child { border-bottom: 0; }
@media (max-width: 640px) {
  .api-tyrow { grid-template-columns: 58px minmax(0, 1fr); }
  .api-tyrow .api-typath { grid-column: 2; }
}
.api-tykind {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .05em; opacity: .55; padding-top: 2px;
}
.api-tyname {
  font-family: var(--font-mono); font-size: 13px; color: var(--links);
  text-decoration: none; overflow-wrap: anywhere;
}
.api-tyname:hover, .api-tyname:focus-visible { text-decoration: underline; }
.api-tyname.plain { color: inherit; opacity: .8; }
.api-typath {
  font-family: var(--font-mono); font-size: 11.5px; opacity: .5;
  overflow-wrap: anywhere; word-break: break-word; min-width: 0;
  background: none; padding: 0; border: 0;
}

/* -- layouts, shapes, target -------------------------------------------- */
.api-h { font-size: 14px; font-weight: 600; margin: 22px 0 6px; }
.api-h code { font-family: var(--font-mono); font-size: 13px; }
.api-grp { margin-bottom: 14px; }
.api-lrow {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 200px);
  gap: 10px 20px; align-items: center;
  padding: 10px 4px; border-bottom: 1px solid var(--table-border);
}
.api-lrow:last-child { border-bottom: 0; }
@media (max-width: 640px) { .api-lrow { grid-template-columns: 1fr; } }
.api-lname { font-weight: 600; font-size: 13.5px; }
.api-strip.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.api-card h3 .api-fam { margin-left: 8px; }
.api-typath.doc {
  font-family: var(--font-body); font-size: 12.5px; opacity: .7;
}
.api-note {
  border: 1px solid var(--table-border); border-left: 3px solid var(--inline-code-fg);
  border-radius: var(--radius-md); padding: 12px 16px; margin-top: 14px;
}
.api-note p { margin: 0 0 8px; font-size: 13px; opacity: .85; }
.api-note p:last-child { margin-bottom: 0; }

/* -- guide figures -------------------------------------------------------- */
.api-ex {
  margin: 0 0 12px; border: 1px solid var(--table-border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.api-ex figcaption {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline;
  justify-content: space-between;
  padding: 9px 14px; border-bottom: 1px solid var(--table-border);
  background: var(--table-header-bg); font-size: 12.5px;
}
.api-ex figcaption a { color: var(--links); text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.api-ex figcaption a:hover { text-decoration: underline; }
.api-extag {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; opacity: .6; flex: none; color: var(--inline-code-fg);
}
.api-extag.ok { color: var(--cov-9); opacity: .85; }
.api-ex pre {
  margin: 0; padding: 12px 14px; overflow-x: auto; background: none;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.55;
}
.api-ex code { background: none; padding: 0; border: 0; font: inherit; white-space: pre; }

/* -- expandable items --------------------------------------------------- */
.api-cardbtn, .api-tyrow.open {
  appearance: none; background: none; border: 0; font: inherit; color: inherit;
  text-align: left; width: 100%; cursor: pointer; padding: 0; min-width: 0;
}
.api-tyrow.open {
  display: grid; grid-template-columns: 58px minmax(0, 200px) minmax(0, 1fr);
  gap: 10px; align-items: baseline; padding: 7px 4px; min-width: 0;
  border-bottom: 1px solid var(--table-border);
}
@media (max-width: 640px) { .api-tyrow.open { grid-template-columns: 58px minmax(0, 1fr); } }
.api-cardbtn:hover .api-tyname, .api-tyrow.open:hover .api-tyname { text-decoration: underline; }
.api-cardbtn:focus-visible, .api-tyrow.open:focus-visible {
  outline: 2px solid var(--links); outline-offset: 2px; border-radius: var(--radius-sm);
}
.api-tyrow.open[aria-expanded="true"] { font-weight: 600; }
.api-usage {
  padding: 10px 0 14px; border-bottom: 1px solid var(--table-border);
  min-width: 0; max-width: 100%;
}
/* One header per example cell: the cell already carries the EXAMPLE label,
   so figures inside only need captions, not a second heading. */
.api-usage .api-ex { max-width: 100%; min-width: 0; }
.api-usage .api-ex pre { max-width: 100%; }
.api-usage h4 {
  margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  opacity: .55; font-family: var(--font-mono);
}
.api-card .api-usage { border-bottom: 0; padding-bottom: 0; }

/* -- per-item example buttons ------------------------------------------------ */
.api-exbtn {
  appearance: none; width: 100%; margin-top: 10px; padding: 6px 10px;
  border: 1px solid var(--table-border); border-radius: var(--radius-sm);
  background: var(--table-alt-bg); color: var(--fg); font: inherit; font-size: 12px;
  cursor: pointer;
}
.api-exbtn:hover { text-decoration: underline; }
.api-exbtn:focus-visible { outline: 2px solid var(--links); outline-offset: 2px; }
.api-exbtn[aria-expanded="true"] { font-weight: 600; }
#shapeGallery { display: grid; gap: 12px; margin: 12px 0 6px; }
.api-tylink {
  display: inline-block; font-family: var(--font-mono); font-size: 11px;
  color: var(--links); text-decoration: none; margin: 0 0 6px 68px;
}
.api-tylink:hover { text-decoration: underline; }

/* -- code that fits a phone --------------------------------------------- */
/* A code block is the one thing here that must not be reflowed: a wrapped Rust
   line is harder to read than a scrolled one. So the block scrolls inside
   itself and spans the detail grid.

   What keeps it from widening the page is the `min-width: 0` on
   `.api-detail-in > *` above -- a grid item otherwise takes its content's
   min-content width, which for a `pre` is its longest line. Verified by
   removing that rule, which makes the page scroll sideways at 375px. The rule
   is stated there once rather than repeated here. */
.api-dcell.wide { grid-column: 1 / -1; }
.api-ex.bare { border: 0; border-radius: 0; margin: 0; }
.api-ex.bare pre {
  border: 1px solid var(--table-border); border-radius: var(--radius-md);
  padding: 10px 12px;
}
.api-ex pre { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.api-ex code { white-space: pre; display: block; }
@media (max-width: 640px) {
  .api-ex pre { font-size: 11.5px; line-height: 1.5; padding: 9px 10px; }
}
/* Says what `B` is once, beside the code, rather than repeating a `use` block
   in all 59 examples. */
.api-exnote {
  border: 0; background: none; padding: 7px 2px 0; font-size: 11.5px; opacity: .6;
  display: block;
}
.api-exnote code { font-family: var(--font-mono); font-size: 11px; }