/* Demo-only layout. All llselect-* visual rules live in dist/themes/*.css
   (loaded via <link> and swapped by the theme picker). */

/* Bootstrap 3's reset sets html{font-size:10px}, which shrinks this demo's
   rem-based text (that theme only). Pin html to the 16px browser default so rem
   is consistent across every theme; the demo loads Bootstrap first, so this
   rule wins the cascade. */
html { font-size: 16px; }

body {
  font-family: system-ui, sans-serif;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  color: #222;
}

code { background: #f4f4f4; padding: 0.1em 0.3em; border-radius: 3px; }

/* Back-to-top (both examples pages; injected by ../toc.js). Mirrors the site
   pages' button in scripts/build-site.mjs. */
.back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.9rem;
  font: inherit;
  font-weight: 600;
  color: #333;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.back-to-top:hover { background: #f2f2f2; }
.back-to-top svg { width: 1em; height: 1em; }

/* angularjs 8f: minimal look for ui-bootstrap's uib-tooltip (this page loads
   no Bootstrap CSS; opacity: 1 also counters Bootstrap's .tooltip fade base
   if one ever loads). The arrow div is unstyled markup without Bootstrap
   CSS, so draw it here; the example pins tooltip-placement="top", so only
   the top arrow is needed. */
.tooltip { position: absolute; z-index: 1100; font-size: 0.8rem; opacity: 1; }
.tooltip.top { padding: 5px 0; }
.tooltip-inner {
  background: #333;
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  max-width: 220px;
}
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #333;
}

h1 {
  font-size: 2rem;
  margin: 0 0 0.5rem;
  border-bottom: 2px solid #222;
  padding-bottom: 0.4rem;
}

h2 {
  margin-top: 3rem;
  font-size: 1.4rem;
  border-left: 4px solid #4a90e2;
  padding-left: 0.7rem;
}

h3 {
  margin-top: 1.5rem;
  font-size: 1.05rem;
  color: #444;
}

section { margin: 2rem 0 3rem; }
article { margin: 1.5rem 0 2rem 1rem; }

.demo-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  margin-top: 0.5rem;
}

@media (max-width: 800px) {
  .demo-split { grid-template-columns: 1fr; }
}

.demo-pane { min-width: 0; }

.code-toggle { min-width: 0; }

.code-toggle > summary {
  cursor: pointer;
  user-select: none;
  display: block;
  width: fit-content;
  margin-left: auto;             /* push right without affecting siblings */
  padding: 0.4rem 0.9rem;
  border: 1px solid #888;
  border-radius: 4px;
  background: #fafafa;
  color: #444;
  font-size: 0.9rem;
  font-family: ui-monospace, monospace;
  list-style: none;
}

.code-toggle > summary::-webkit-details-marker { display: none; }
.code-toggle > summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform 0.15s;
}
.code-toggle[open] > summary::before { transform: rotate(90deg); }

/* Open code escapes the half-width split: span the full row below the demo
   pane. The summary button KEEPS its right-edge position in both states
   (base rule margin-left: auto) - only the code block widens. */
.code-toggle[open] {
  grid-column: 1 / -1;
}

.code-toggle[open] > summary {
  margin-bottom: 0.4rem;
}

.code-toggle > pre {
  margin: 0;
  background: #282c34;
  color: #abb2bf;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  overflow: auto;
  max-height: 30rem;
}

.code-toggle > pre code {
  background: transparent;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
}

/* caption between a demo's JS block and its demo-CSS block */
.code-caption {
  margin: 0.5rem 0 0.2rem;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  color: #777;
}

/* Minimal JS syntax highlight (One Monokai). */
.hl-comment { color: #676f7d; font-style: italic; }
.hl-string  { color: #e6db74; }
.hl-keyword { color: #f92672; }
.hl-number  { color: #ae81ff; }
.hl-func    { color: #a6e22e; }

.hint { color: #666; font-size: 0.9rem; margin: 0.3rem 0; }

.out {
  margin-top: 0.5rem;
  font-family: ui-monospace, monospace;
  color: #444;
}

.demo-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.arrow-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.arrow-label {
  display: block;
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 0.25rem;
}

/* Direct child only: a descendant selector also styles the buttons llselect
   builds inside its own trigger (the clear x), which the widget's theme owns. */
.demo-row > button {
  padding: 0.4rem 0.8rem;
  border: 1px solid #888;
  border-radius: 4px;
  background: #fafafa;
  cursor: pointer;
  font: inherit;
}

.scroll-container {
  height: 12rem;
  overflow-y: auto;
  border: 1px solid #ccc;
  background: #fafafa;
  padding: 1rem;
  border-radius: 4px;
}

.scroll-spacer-top { height: 16rem; }
.scroll-spacer-bottom { height: 16rem; }

/* #region 2.2 */
/* transform creates a fixed-position containing block - the ancestor class
   the top-layer (Popover API) path is immune to. */
.transform-container {
  transform: translateZ(0);
  border: 1px dashed #c9821a;
  background: #fffaf0;
  padding: 1rem;
  border-radius: 4px;
}
/* #endregion */

.page-filler { height: 80vh; }

.theme-picker {
  position: sticky;
  top: 0;
  background: #fff;
  padding: 0.5rem 0;
  border-bottom: 1px solid #ddd;
  margin-bottom: 1rem;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.theme-picker label {
  font-size: 0.9rem;
  color: #555;
  align-self: center;
}

#data-panel {
  position: relative;            /* anchor for the floating <pre> */
  margin-left: auto;             /* push to the right end of the bar */
  font-size: 0.85rem;
}

#data-panel > summary {
  cursor: pointer;
  user-select: none;
  padding: 0.3rem 0.7rem;
  border: 1px solid #888;
  border-radius: 4px;
  background: #fafafa;
  color: #333;
  list-style: none;             /* hide default disclosure triangle */
}

#data-panel > summary::-webkit-details-marker { display: none; }
#data-panel > summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform 0.15s;
}
#data-panel[open] > summary::before {
  transform: rotate(90deg);
}

#data-panel[open] > pre code {
  background: transparent;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
}

#data-panel[open] > pre {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.5rem;
  width: min(40rem, 90vw);
  max-height: 60vh;
  background: #282c34;
  color: #abb2bf;
  padding: 1rem;
  border-radius: 4px;
  border: 1px solid #444;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  overflow: auto;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  z-index: 2000;
}

/* #region 14.1 */
/* align the subclass-prepended checkbox with the label */
#mount-subclass-checkbox .llselect-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
/* #endregion */

/* Icon + text rows for rich item content (core 5.4-5.6, 11.x, 13.2;
   angularjs 7). */
.lang-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* core 11.5 / angularjs 7: primary text + faded hint pushed to the row's
   right edge. */
.user-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
}
.user-row .hint { margin-left: auto; }

/* ui-select's own one-line look for its `highlight` filter (angularjs 8a);
   its CSS is not bridged, so the demo carries this rule the same way app.js
   carries the filter. */
.ui-select-highlight { font-weight: bold; }

/* #region 11.6 */
/* core 11.6 / angularjs 7e: the ONE thing the renderer's inline styles
   cannot reach - the option element's own padding. Zero it so the row
   (padded inline) can paint the full option; a smaller padding would leave
   an untinted ring, but negative margins on the row would overflow under
   themes with smaller item padding. */
.lang-tinted .llselect-item { padding: 0; }
/* #endregion */

/* #region 6.2 6.3 6.4 */
/* Constrain the trigger so the chosen text actually overflows (an
   unconstrained inline-block root would just grow to fit). 6.1 deliberately
   omits this. */
#mount-long-wrap,
#mount-long-ellipsis,
#mount-long-fitcontent {
  max-width: 18rem;
}
/* #endregion */

/* #region 6.4 */
/* ellipsis opt-in for long items - the library never applies this */
#mount-long-ellipsis .llselect-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* #endregion */

/* #region 4.4 */
/* CSS-only arrow: bypass the arrow slot entirely, draw a triangle on a
   pseudo-element; [data-state] drives the rotation. */
#mount-ind-css .llselect-trigger::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.15s;
  color: #666;
  margin-inline-start: 0.4rem;
}

#mount-ind-css .llselect-trigger[data-state='open']::after {
  transform: rotate(180deg);
}
/* #endregion */

/* #region 14.2 */
/* Tree caret: a real hit target, not a bare glyph - a centered 1.6em box
   with hover feedback; negative vertical margin keeps the row height as if
   the box were glyph-sized. The hover tint is accent-colored, because a
   plain dark alpha drowns in the row's own hover background. The leaf
   spacer matches the box width so sibling branch / leaf texts align. */
.tree-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  margin-block: -0.3em;
  border-radius: 4px;
  cursor: pointer;
  color: #555;
}
/* Scale the GLYPH (the mdi ::before), not the box - the box and the leaf
   spacer share the row's em, so they stay aligned. */
.tree-caret::before { font-size: 1.5em; }
.tree-caret:hover { background: rgba(36, 86, 166, 0.18); color: #2456a6; }
/* The single chevron points right (collapsed); rotate it down when the
   branch row says expanded. */
.llselect-item[data-tree-state='expanded'] .tree-caret { transform: rotate(90deg); }
.tree-caret-spacer { display: inline-block; width: 1.6em; }
/* The classic file-manager palette, so branches read at a glance. */
.tree-folder { color: #fbc02d; }
.tree-file { color: #42a5f5; }
/* #endregion */

/* --- shared interactive TOC (both examples pages; injected by toc.js) ----
   Wide screens: sticky left sidebar with scrollspy + filter. Below 62rem
   (the site pages' sidebar breakpoint): off-canvas left drawer behind a
   fixed "Sections" button. Colors mirror .demo-nav / the site sidebar. */
html { scroll-behavior: smooth; }
section, main h3 { scroll-margin-top: 4.5rem; } /* clear the sticky theme bar */

.page-layout.has-toc {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.toc {
  position: sticky;
  top: var(--toc-top, 0px); /* set by toc.js below the core page's sticky bar */
  max-height: calc(100vh - var(--toc-top, 0px)); /* fallback; toc.js fits it to the visible viewport */
  box-sizing: border-box; /* the JS-fitted max-height is the real outer height */
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.5rem 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
}
.toc-bar { flex: none; }
.toc-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain; /* wheel at the edge must not scroll the page */
  padding-bottom: 2rem;
}
.toc input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.6rem;
  padding: 0.3rem 0.5rem;
  font: inherit;
  color: #222;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.toc ul { list-style: none; margin: 0; padding-left: 0.85rem; }
.toc ul.toc-tree { padding-left: 0; }
.toc a {
  display: block;
  padding: 0.15rem 0.4rem;
  color: #333;
  text-decoration: none;
  border-radius: 3px;
  overflow-wrap: anywhere;
}
.toc a:hover { background: #eef3fb; }
.toc a.active { background: #eef3fb; color: #2456a6; font-weight: 600; }
.toc .toc-section > a { font-weight: 600; color: #222; margin-top: 0.4rem; }
.toc .toc-section > a.active { color: #2456a6; }
/* filter-match highlight; explicit padding/background so Bootstrap's global
   mark rule (0.2em padding) cannot bloat the rows when a BS theme is active */
.toc mark { padding: 0; background: #ffe066; color: inherit; border-radius: 2px; }

/* Scroll-following block highlight: the content answers the sidebar's active
   row, same look as the site API pages (build-site.mjs .current-block).
   Constant padding + compensating margins keep geometry net-zero, so
   toggling the class never shifts layout mid-scroll; the article override
   preserves its 1rem left indent (0.4rem margin + 0.6rem padding). Gated on
   .has-toc: without the injected TOC nothing paints and nothing changes. */
.has-toc main section { padding: 0 0.6rem; margin: 2rem -0.6rem 3rem; border-radius: 4px; transition: background-color 0.15s; }
.has-toc main article { padding: 0 0.6rem; margin: 1.5rem -0.6rem 2rem 0.4rem; border-radius: 4px; transition: background-color 0.15s; }
.has-toc main .current-block { background: #eef3fb; box-shadow: inset 3px 0 0 #2456a6; }

/* drawer chrome exists only below the breakpoint */
.toc-toggle { display: none; }
.toc-backdrop { display: none; }

@media (max-width: 62rem) {
  .page-layout.has-toc { display: block; }
  .toc {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 3000; /* above the sticky bar (100), #data-panel (2000), popups (1000) */
    width: min(17rem, 85vw);
    max-height: none;
    padding: 1rem 1rem 0;
    background: #fff;
    border-right: 1px solid #ccc;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);
    transform: translateX(-100%);
    visibility: hidden; /* unreachable by Tab / AT while closed */
    transition: transform 0.2s ease, visibility 0.2s;
  }
  body.toc-open .toc { transform: none; visibility: visible; }
  body.toc-open { overflow: hidden; } /* page stays put while the drawer scrolls */
  .toc-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 1500;
    padding: 0.45rem 0.9rem;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: #2456a6;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
  .toc-toggle svg { width: 1.1em; height: 1.1em; }
  .toc-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 2900;
    background: rgba(0, 0, 0, 0.35);
  }
  .toc-backdrop[hidden] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .toc { transition: none; }
}

/* --- multi-page navigation (hub / examples / benchmark) ------------------ */
.demo-nav {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin: 0 0 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #ddd;
}
.demo-nav a {
  padding: 0.35rem 0.8rem;
  color: #2456a6;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
}
.demo-nav a:hover { background: #eef3fb; }
.demo-nav a.current { background: #2456a6; color: #fff; }

/* second nav tier (AngularJS section): identity label + in-section items */
.demo-subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin: -1rem 0 1.5rem;
  padding: 0.4rem 0.5rem;
  font-size: 0.92em;
  background: #f4f4f4;
  border-radius: 6px;
}
.demo-subnav .subnav-label { display: flex; align-items: center; gap: 0.3rem; margin-right: 0.5rem; font-weight: 600; }
.demo-subnav .subnav-label svg { width: 1.15em; height: 1.15em; color: #dd1b16; }
.demo-subnav a {
  padding: 0.25rem 0.7rem;
  color: #2456a6;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
}
.demo-subnav a:hover { background: #eef3fb; }
.demo-subnav a.current { background: #2456a6; color: #fff; }


/* --- benchmark (benchmark.html) ----------------------------------------- */
/* Controls: both sections stack .bench-row lines in a .bench-toolbar (interaction:
   items / checkboxes / button; mass: scenario / checkboxes / buttons). */
.bench-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.bench-toolbar { display: flex; flex-direction: column; gap: 0.6rem; margin: 1.25rem 0; }
.bench-row select { padding: 0.25rem; }
.bench-row button { font: inherit; padding: 0.35rem 1rem; cursor: pointer; border: 1px solid #2456a6; background: #2456a6; color: #fff; border-radius: 4px; }
.bench-row button:hover { background: #1d4788; }
.bench-row button:disabled { opacity: 0.45; cursor: not-allowed; }
/* Collapsed column reference under a results table. */
.bench-cols { margin: 0.25rem 0 1rem; font-size: 0.9rem; }
.bench-cols > summary { cursor: pointer; user-select: none; color: #2456a6; }
.bench-cols[open] > summary { margin-bottom: 0.3rem; }
#status { color: #555; font-size: 0.9rem; }
/* Table captions spell out what one number means (per-widget vs total, median vs sum). */
#results caption, .ix-table caption { caption-side: top; text-align: left; font-size: 0.85rem; color: #555; padding: 0 0 0.4rem; }
/* Star on a tuned library's name: hover shows the tuning applied (title attribute). */
.tune-star { color: #c9821a; cursor: help; font-weight: 700; margin-right: 0.2em; }
#results, #sizes { border-collapse: collapse; width: 100%; margin: 0.5rem 0 1rem; }
#results th, #results td, #sizes th, #sizes td { border: 1px solid #ccc; padding: 5px 10px; text-align: right; }
#results th:first-child, #results td:first-child, #sizes th:first-child, #sizes td:first-child { text-align: left; }
#results thead th, #sizes thead th { background: #f6f8fa; }
#results td.best { background: #e6f4ea; color: #1a7f37; font-weight: 700; }
.bench-legend, .bench-caveats, .bench-fair { font-size: 0.9rem; color: #333; }
.bench-legend li, .bench-caveats li, .bench-fair li { margin: 0.35rem 0; }
.bench-warn { font-size: 0.9rem; color: #8a5a00; background: #fff6e5; border-left: 4px solid #e0a100; padding: 0.5rem 0.85rem; border-radius: 4px; }
/* Fairness caveat at the top of the interaction section - light red. */
.bench-fairness-note { font-size: 0.9rem; color: #7a2230; background: #fdecec; border-left: 4px solid #d0454c; padding: 0.6rem 0.95rem; border-radius: 4px; margin: 1rem 0; }
.bench-fairness-note code { background: #f6d8db; }
.bench-fairness-note ul { margin: 0.4rem 0; padding-inline-start: 1.4rem; }
.bench-fairness-note li { margin: 0.15rem 0; }
.bench-libbuttons { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin: 0 0 1rem; font-size: 0.9rem; }
.bench-libbuttons button { font: inherit; font-size: 0.85rem; padding: 0.25rem 0.7rem; cursor: pointer; border: 1px solid #bbb; background: #fff; color: #222; border-radius: 4px; }
.bench-libbuttons button:hover { border-color: #2456a6; color: #2456a6; }
/* Interaction: the per-mode "Build + measure" primary button, blue among the secondary per-lib ones. */
.bench-libbuttons button.ix-run-all { font-size: inherit; padding: 0.35rem 1rem; border-color: #2456a6; background: #2456a6; color: #fff; }
.bench-libbuttons button.ix-run-all:hover { background: #1d4788; color: #fff; }
/* Scroll area where a run's widgets actually render. Fixed height so 10k
   widgets stay scrollable rather than growing the page. */
.bench-stage {
  height: 420px;
  overflow: auto;
  border: 1px dashed #ccc;
  border-radius: 6px;
  padding: 0.5rem;
  background: #fafafa;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px;
}
.bench-widget { width: 250px; }
.bench-stage h2 { display: none; }

/* --- benchmark comparison chart (pure CSS bars, no chart library) -------- */
/* Sized container: Chart.js runs with maintainAspectRatio off and fills it. */
.bench-chart { position: relative; height: 260px; margin: 0.25rem 0 1rem; }

/* --- interaction latency: one dedicated widget per library, side by side -- */
.ix-stage { display: flex; flex-wrap: wrap; gap: 12px; margin: 0.5rem 0 1rem; }
.ix-cell { width: 220px; border: 1px solid #e2e2e2; border-radius: 6px; padding: 8px; background: #fff; }
.ix-lab { font-size: 0.8rem; color: #555; font-weight: 600; margin-bottom: 6px; }
.ix-mount { min-height: 34px; }
.ix-table { border-collapse: collapse; width: 100%; margin: 0.5rem 0 1rem; }
.ix-table th, .ix-table td { border: 1px solid #ccc; padding: 5px 10px; text-align: right; }
.ix-table th:first-child, .ix-table td:first-child { text-align: left; }
.ix-table thead th { background: #f6f8fa; }
.ix-table td.best { background: #e6f4ea; color: #1a7f37; font-weight: 700; }

/* --- benchmark table of contents (not collapsible) ---------------------- */
.bench-toc { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; margin: 0.5rem 0 1.5rem; padding: 0.6rem 0.9rem; background: #f6f8fa; border: 1px solid #e2e2e2; border-radius: 6px; font-size: 0.9rem; }
.bench-toc span { color: #555; font-weight: 600; }
.bench-toc a { color: #2456a6; text-decoration: none; border-radius: 3px; }
.bench-toc a:hover { text-decoration: underline; }
.bench-toc a.active { background: #eef3fb; font-weight: 600; }
/* On a large desktop the quick-jump list docks to the LEFT GUTTER of the
   centered 1200px body as a small fixed panel - deliberately NOT
   full-height, it is only a jump list. 100rem keeps it out of the gutter
   until (viewport - body) / 2 genuinely fits it. bench-toc.js drives the
   scrollspy .active in both layouts. */
@media (min-width: 100rem) {
  .bench-toc {
    position: fixed;
    left: 1rem;
    top: 5.5rem;
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    gap: 0.1rem;
    width: 10.5rem;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }
  .bench-toc span { margin-bottom: 0.25rem; }
  .bench-toc a { padding: 0.15rem 0.4rem; }
  .bench-toc a:hover { text-decoration: none; background: #eef3fb; }
}

/* --- benchmark scroll-block overlay during a run ------------------------- */
#bench-overlay { position: fixed; inset: 0; z-index: 9999; display: none; align-items: flex-start; justify-content: center; background: rgba(20, 30, 50, 0.06); cursor: progress; }
.bench-overlay-box { margin-top: 1.5rem; max-width: 32rem; background: #2456a6; color: #fff; padding: 0.7rem 1.1rem; border-radius: 6px; font-size: 0.95rem; text-align: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }
.bench-overlay-box small { display: block; margin-top: 0.35rem; font-size: 0.8rem; font-weight: normal; opacity: 0.9; }

/* Stop button on the run overlay (the page's own Stop would be behind it). */
#bench-overlay-stop { display: block; margin: 0.7rem auto 0; font: inherit; padding: 0.4rem 1.4rem; cursor: pointer; border: 1px solid #fff; background: #c0392b; color: #fff; border-radius: 4px; font-weight: 600; }
#bench-overlay-stop:hover { background: #a83226; }
#bench-overlay-stop:disabled { opacity: 0.6; cursor: default; }

/* --- 12. label integration ---------------------------------------------- */
/* The demo styles its own label the way an app would: llselect themes touch
   only .llselect-* elements, never the app's label. (Bootstrap 3/4 CDN themes
   restyle bare <label> on their own; BS5 uses .form-label, Tailwind resets.) */
.field-label { display: block; font-weight: 600; margin-bottom: 0.3rem; }