/* Dark mode, after Chakra: a near-black page with cards one step up on the brand's Ink (the hero's
   and the picture tiles' color) and a quiet border. Light mode keeps the library's Neutral, and
   examples keep the library's grays in both schemes, on the page's own background (below). */
:root.site {
  /* The brand's Ember for pictograms, which keep it while the chrome is Ink. */
  --site-ember-soft: light-dark(#fdebdf, rgb(242 106 27 / 0.18));
  --site-ember-text: light-dark(#b8480b, #ff9a5c);
  --ib-color-background: light-dark(#fafafa, #08090b);
  --ib-color-surface: light-dark(#ffffff, #0d0e11);
  --ib-color-fill-subtle: light-dark(#f3f3f5, #14161a);
  --ib-color-fill: light-dark(#e9e9ec, #1b1d22);
  --ib-color-fill-strong: light-dark(#dfdfe3, #23252b);
  --ib-color-surface-overlay: light-dark(#ffffff, #17191d);
  --ib-color-border: light-dark(#dcdce0, #2e3138);
  --ib-color-outline: light-dark(#b8b8bf, #44474f);
}
/* Not in examples: they keep the library's card on the surface, so a footer bar or a filled card
   shows against it as in an app. */
:root.site .ib-card-outline:not(.ex-theme *) { --ib-card-bg: light-dark(#ffffff, #14161a); }
.site-why-intro { max-inline-size: 44rem; margin-block-end: var(--ib-space-2); }
/* Each point's heading and text share rows across the band, so a heading that wraps doesn't push its text below the others'. */
.site-why > * { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--ib-space-2); }

/* The home page's band ("Why SSR first"): gray in light mode; in dark mode a shade above the hero's
   Ink, with a hairline, so the two read as separate bands. */
:root.site .site-band {
  background: light-dark(var(--ib-color-fill-subtle), #191b20);
  border-block-start: 1px solid light-dark(transparent, var(--ib-color-border));
}

/*
 * The docs site's own styles: page layout, the example viewer and API reference blocks. Everything
 * else is IzzyBlazor's. Unlayered, so these win over the library's layers where they meet.
 */

/* Brand: the wordmark's ink and gray follow the color scheme. */
.site-logo { display: block; width: auto; height: 22px; }
.site-logo-ink { fill: light-dark(#14161a, #f5f4f1); }
.site-logo-soft { fill: light-dark(#5a6069, #a9aeb6); }

/* The home page's hero, after brand/hero/hero-dark: ink in either scheme, Bricolage Grotesque for
   the headline, Ember for its second line, and the glowing knob behind the example. */
.site-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #14161a;
}
.site-hero-grid { position: relative; z-index: 1; }
.site-hero-glow {
  position: absolute;
  z-index: 0;
  /* A fixed distance from the top, not the band's middle: the band grows when the example shows
     its code, and the glow stays put. */
  top: 22rem;
  right: -18rem;
  width: 52rem;
  height: 52rem;
  translate: 0 -50%;
  pointer-events: none;
}
.site-hero-wordmark { display: block; align-self: flex-start; width: auto; height: 3.5rem; max-width: 100%; margin: 0; }
.site-hero-title {
  font-family: "Bricolage Grotesque", var(--ib-font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f5f4f1;
}
.site-hero-title span { color: #f26a1b; }
@media (max-width: 63.98rem) {
  /* One column: the glow sits behind the top corner instead of the example. */
  .site-hero-glow { top: 0; right: -30rem; translate: 0 -45%; opacity: 0.35; }
  .site-hero-wordmark { height: 2.5rem; }
}

.site-hero .site-install { background: #1b1d22; border-color: #2c2f36; }
/* The hero's example is a near-black window set into the Ink band (ExampleViewer Deep), with a
   lighter edge and a shadow off the glow. */
.site-hero .ex-box {
  background: #0d0e11;
  border-color: #2c2f36;
  box-shadow: 0 1.5rem 4rem -1rem rgb(0 0 0 / 0.7);
}
.site-install {
  width: fit-content;
  padding: var(--ib-space-1) var(--ib-space-1) var(--ib-space-1) var(--ib-space-3);
  border: 1px solid var(--ib-color-border);
  border-radius: var(--ib-radius-md);
  background: var(--ib-color-surface);
}
.site-install code { background: none; padding: 0; }

/*
 * Docs and demos: the sidebar, content and outline centered as one group (as on Chakra's docs),
 * once the sidebar is a column (768px, AppSidebar's Md breakpoint). Widths match SiteWidths.cs.
 */
@media (min-width: 48rem) {
  .ib-shell.site-shell {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 58rem) auto minmax(0, 1fr);
    grid-template-areas:
      "banner banner banner banner banner"
      "header header header header header"
      ". sidebar main aside ."
      "footer footer footer footer footer";
  }
  /* The empty side columns read as the same surface as the columns between them. */
  .ib-shell.site-shell { background: var(--ib-color-surface); }
  .site-shell .site-article { padding-inline: var(--ib-space-8); }
  /* The header's and footer's content line up with the sidebar's text, 1.5rem in from the columns'
     edges (SiteWidths.TextInset), also where the columns fill the window. */
  .site-shell-home > .ib-shell-main { --ib-bleed-gutter: var(--ib-space-6); }
  :is(.site-shell, .site-shell-home) > :is(.ib-shell-header, .ib-shell-footer) {
    padding-inline: max(var(--ib-space-6), round(down, var(--ib-shell-measure-pad), 1px));
  }
  .site-shell-demos .site-article { padding-inline-end: var(--ib-space-6); }
  /* The outline column comes last in the HTML, after the content; the browser paints before it
     arrives, so an auto track would start empty and the whole group would slide over when it
     came. Docs pages always have it from 1024px (AppAside's breakpoint): keep its 15rem
     (SiteWidths.Aside) from the start. */
  @media (min-width: 64rem) {
    .ib-shell.site-shell-docs { grid-template-columns: minmax(0, 1fr) auto minmax(0, 58rem) 15rem minmax(0, 1fr); }
  }
  /* Demos have no outline: the frame gets its width. */
  .ib-shell.site-shell-demos { grid-template-columns: minmax(0, 1fr) auto minmax(0, 73rem) minmax(0, 1fr); grid-template-areas: "banner banner banner banner" "header header header header" ". sidebar main ." "footer footer footer footer"; }
}

/* Pages: headings break the flow into sections. */
.site-article {
  display: flex;
  flex-direction: column;
  gap: var(--ib-space-4);
  width: 100%;
  margin-inline: auto;
  padding-block: var(--ib-space-8) var(--ib-space-16);
}
/* Phones: the docs and demos content keeps the page gutter (wider screens set it below). */
:where(.site-shell) .site-article { padding-inline: var(--ib-space-4); }
.site-article > h2 { margin-block-start: var(--ib-space-6); }
.site-article > .ib-prevnext, .site-article > nav:last-child { margin-block-start: var(--ib-space-8); }
.site-pagehead { margin-block-end: var(--ib-space-2); }

.site-footer { width: 100%; }
/* The footer's links wrap on a phone, rather than scrolling sideways as a horizontal NavMenu does. */
.site-footer .ib-nav-horizontal { flex-wrap: wrap; overflow-x: visible; }

/* Scenario links under a component in the demos sidebar. */

/* Pictograms: an icon on a tile tinted with the accent. */
.site-picto {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--ib-radius-md);
  background: var(--site-ember-soft);
  color: var(--site-ember-text);
  font-size: 1.25rem;
}
.site-picto .ib-icon { width: 1em; height: 1em; }
/* On the home page's gray band the tint washes out: a white tile with a hairline in light mode. */
.site-band .site-picto {
  background: light-dark(var(--ib-color-surface), var(--site-ember-soft));
  box-shadow: inset 0 0 0 1px light-dark(var(--ib-color-border), transparent);
}
.site-picto-sm { width: 2rem; height: 2rem; font-size: 1rem; }
.site-picto-lg { width: 3rem; height: 3rem; font-size: 1.5rem; border-radius: var(--ib-radius-lg); }
.site-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ib-space-2); }

/* Component pictograms (Services/Pictures.cs): ink tiles in either scheme, like the hero. */
.pg {
  /* Paper tiles with ink lines in light, ink tiles with paper lines in dark (as the monogram's i
     switches); the knob and the rings are Ember in both. */
  --pg-bg: light-dark(#f5f4f1, #14161a);
  --pg-line: light-dark(#14161a, #f5f4f1);
  --pg-steel: light-dark(#a9aeb6, #5c616b);
  --pg-faint: light-dark(#dcdcd8, #33373f);
  --pg-raised: light-dark(#ffffff, #1d2026);
  --pg-muted: light-dark(#e7e5e0, #2a2e36);
  --pg-strong: light-dark(#5a6069, #c9ccd1);
  display: block; width: 100%; height: auto; aspect-ratio: 160 / 96; background: var(--pg-bg);
}
.pg :is(rect, circle, path) { fill: none; }
.pg .pg-rings circle { fill: light-dark(rgb(242 106 27 / .5), #f26a1b); }
.pg .s { stroke: var(--pg-line); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pg .d { stroke: var(--pg-steel); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pg .d0 { stroke: var(--pg-faint); stroke-width: 1.5; }
.pg .es { stroke: #f26a1b; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pg .ink-s { stroke: #14161a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pg .w2 { stroke-width: 2; } .pg .w3 { stroke-width: 3; }
.pg .dash { stroke-dasharray: 4 5; }
.pg .f { fill: var(--pg-raised); } .pg .m { fill: var(--pg-muted); } .pg .bgf { fill: var(--pg-bg); }
.pg .e { fill: #f26a1b; } .pg .a { fill: #ffb020; }
.pg .h { fill: #f26a1b; fill-opacity: .08; } .pg .h2 { fill: #f26a1b; fill-opacity: .22; } .pg .hs { fill: #f26a1b; fill-opacity: .12; }
.pg .t { fill: var(--pg-steel); } .pg .p { fill: var(--pg-strong); } .pg .p0 { fill: var(--pg-line); } .pg .inv { fill: var(--pg-bg); } .pg .ink { fill: #14161a; }
.pg .o55 { opacity: .55; }

/* A card's picture with a tag on its corner (the mode, or the component a demo is about), so the
   card reads picture, title, text. */
.site-media { position: relative; }
.site-media-tag { position: absolute; top: var(--ib-space-3); left: var(--ib-space-3); display: inline-flex; gap: var(--ib-space-1); }

/* Link cards: they take you somewhere, so they read as links rather than content: a small
   pictogram on the left, the title and the description beside it. */
.site-linkcard .ib-card-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--ib-space-3);
  row-gap: var(--ib-space-1);
  align-items: center;
}
.site-linkcard .ib-card-heading > .site-picto { grid-row: 1 / span 2; align-self: start; }
.site-linkcard .ib-card-title { grid-column: 2; }
.site-linkcard .ib-card-description { grid-column: 2; margin: 0; }
.site-linkcard:hover { border-color: var(--ib-color-primary); }
.site-linkcard .ib-card-body:empty { display: none; }

/* Mode chips: "none" is struck through, so the color isn't the only signal. */
.site-modes { display: inline-flex; flex-wrap: wrap; gap: var(--ib-space-1); vertical-align: middle; }
.site-mode-none { text-decoration: line-through; }
/* The mode table's marks: a check, or a dash for partly; no mark is "no". */
.site-mark { display: inline-flex; font-size: 1.125rem; vertical-align: middle; }
.site-mark .ib-icon { stroke-width: 2.5; }
.site-mark-yes { color: var(--ib-color-success-text); }
.site-mark-partly { color: var(--ib-color-warning-text); }

/* API reference */
.site-type, .site-default, .site-signature {
  font-family: var(--ib-font-mono);
  font-size: 0.8125rem;
  color: var(--ib-color-muted);
  background: none;
  padding: 0;
  overflow-wrap: break-word;
}
/* Parameter tables (as MUI's): the description gets most of the row; types and defaults are small
   chips that wrap inside a narrow column. */
.site-params :is(.site-type, .site-default) {
  display: inline-block;
  max-width: 16rem;
  padding: 1px var(--ib-space-1);
  border: 1px solid var(--ib-color-border);
  border-radius: var(--ib-radius-sm);
  background: var(--ib-color-fill-subtle);
  font-size: 0.75rem;
  line-height: 1.5;
  white-space: normal;
}
.site-params .site-default { color: var(--ib-color-on-surface); }
.site-params .site-member-name code { color: var(--ib-color-primary-text); }
/* Prop · Default · Type with the description under it (as Chakra's): the last column takes the rest. */
.site-params td:last-child, .site-params th:last-child { width: 100%; }
.site-params td:not(:last-child) { white-space: nowrap; vertical-align: top; }
.site-params td:last-child { vertical-align: top; }
.site-params .site-param-text { margin-block-start: var(--ib-space-1); }
/* Compact (Overviews): prop and its first sentence in one cell, type and default beside it. */
.site-params-compact td:first-child, .site-params-compact th:first-child { width: 100%; white-space: normal; }
.site-params-compact td:last-child, .site-params-compact th:last-child { width: auto; }
.site-params-compact .site-param-text { display: block; color: var(--ib-color-muted); font-size: var(--ib-text-sm); }
.site-none { color: var(--ib-color-subtle); }
/* "Required" in place of a default: the one thing to notice in that column. */
.site-required { font-size: var(--ib-text-sm); font-weight: 600; color: var(--ib-color-on-surface); }
code .site-required { font-size: inherit; }
.site-default { color: var(--ib-color-on-surface); }
.site-member-name { display: inline-flex; align-items: center; gap: var(--ib-space-2); text-decoration: none; }
.site-member-name code { font-weight: 600; color: var(--ib-color-on-surface); }
a.site-member-name:hover code { color: var(--ib-color-primary-text); }
.site-params .ib-prose p { margin: 0; }
.site-params .site-modes { margin-block-start: var(--ib-space-1); }

/* API members: a list with dividers rather than a box. Each reads as a declaration (name, type,
   default) over its description, at a readable width. */
.site-members { border-block-start: 1px solid var(--ib-color-border); }
.site-member {
  display: flex;
  flex-direction: column;
  gap: var(--ib-space-2);
  padding-block: var(--ib-space-5);
  border-block-end: 1px solid var(--ib-color-border);
  scroll-margin-block-start: calc(var(--ib-control-h-md) + var(--ib-space-10));
}
.site-member:target {
  background: var(--ib-color-primary-soft);
  margin-inline: calc(-1 * var(--ib-space-3));
  padding-inline: var(--ib-space-3);
  border-radius: var(--ib-radius-md);
}
.site-member .ib-prose p { margin: 0; }
.site-member-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ib-space-1) var(--ib-space-3); }
.site-member-head .site-member-name code { font-size: 1rem; }
.site-member-type { font-size: var(--ib-text-sm); color: var(--ib-color-muted); background: none; padding: 0; }
.site-member-default { color: var(--ib-color-subtle); }
.site-member-text { max-inline-size: 42rem; color: var(--ib-color-on-surface); }
/* In descriptions, code is a light tint and a member link is underlined mono text, not both. */
.site-member-text code { border: 0; padding: 0.05em 0.3em; font-size: 0.875em; }
.site-member-text a:has(> code) { text-decoration-color: var(--ib-color-outline); text-underline-offset: 0.2em; }
.site-member-text a > code { background: none; padding: 0; }
.site-member-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ib-space-1) var(--ib-space-3);
  margin-inline-start: auto;
  font-size: var(--ib-text-sm);
  color: var(--ib-color-muted);
}
.site-part, .site-type-block {
  display: flex;
  flex-direction: column;
  gap: var(--ib-space-3);
  padding-block-start: var(--ib-space-4);
  scroll-margin-block-start: calc(var(--ib-control-h-md) + var(--ib-space-10));
}
.site-inherit { font-size: var(--ib-text-sm); }

/*
 * The example viewer: one row (Preview · Code tabs at the left; "Always Live" and any width or
 * mode switch at the right), then a box holding only the preview or the code, then the example's
 * note for its mode. On demos (no tabs) the row has the title, and the code box follows the
 * preview. The preview renders in the page, in the page's mode (ExampleViewer).
 */
.ex {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--ib-space-4);
  align-items: end;
  /* Under the sticky header when the address names it; where it was on the screen when its own
     link or form loaded the page again (App's script in <head>, site.js). */
  scroll-margin-top: 5rem;
}
.ex:target {
  scroll-margin-top: var(--site-return-top, 5rem);
}
.ex > .ex-tabs { display: contents; }
.ex > .ex-tabs > .ib-tabs-list { grid-row: 1; grid-column: 1; justify-self: start; }
.ex > .ex-tabs > .ib-tab-panel { grid-row: 2; grid-column: 1 / -1; min-width: 0; padding: var(--ib-space-3) 0 0; }
.ex-title { grid-row: 1; grid-column: 1; font-size: var(--ib-text-sm); font-weight: 600; min-width: 0; padding-block-end: var(--ib-space-1); }
.ex-panels { grid-row: 2; grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--ib-space-3); min-width: 0; padding-block-start: var(--ib-space-3); }
.ex-tools {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: var(--ib-space-3);
  min-width: 0;
  padding-block-end: var(--ib-space-1);
}
.ex-tools:not(:has(> *)) { display: none; }
.ex-box {
  border: 1px solid var(--ib-color-border);
  border-radius: var(--ib-radius-lg);
  overflow: hidden;
  min-width: 0;
}
/* An example sits on the page's own background, marked off by the border: the library's
   background, a different gray, read as a brighter panel in dark mode. */
.ex-stage {
  background: var(--ib-color-surface);
  --ib-example-padding: var(--ib-space-6);
}
/* Each top-level part of a sample at most as wide as the box; not over an example's own
   MaxWidth (an unlayered max-width here would beat the library's). */
.ex-stage > .ib-example-preview > :not(.ib-maxw) { max-width: 100%; }
.ex-stage > .ib-example-preview > .ib-maxw { max-width: min(100%, var(--ib-maxw)); }
/* The example's own theme (IzzyTheme) paints its scheme's background on a square box behind the
   rounded one, and on a band of another color (the home hero) its corners showed outside the
   curve: the box paints the background itself. */
.ex-theme { background: none; }
/* The home hero's window: the site's near-black inside the dark band. */
.ex-deep .ex-stage { background: #0d0e11; }
.ex-fixed-mode { margin: 0; white-space: nowrap; }
.ex-needs-live { display: flex; align-items: center; justify-content: center; padding: var(--ib-space-6); }
.ex-below { grid-row: 3; grid-column: 1 / -1; padding-block-start: var(--ib-space-2); }
/* The note's lines line up after the mode's name, not under it. */
.ex-note { display: flex; align-items: baseline; gap: var(--ib-space-2); margin: 0; text-wrap: pretty; }
/* The mode's name, drawn like the mode switch's selected option, so the note reads as about it. */
.ex-note-mode {
  flex: none;
  padding: 0 var(--ib-space-2);
  border-radius: var(--ib-radius-sm);
  background: var(--ib-color-fill-strong);
  color: var(--ib-color-on-surface);
  font-weight: 500;
}
.ex-frame {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color-scheme: normal;
}
/* A demo's phone width: the window narrows, so the page in it lays out as on a phone. */
.ex:has(.ex-widths input[value="phone"]:checked) .ex-window {
  width: 390px;
  max-width: 100%;
  margin-inline: auto;
}
.ex-source .ib-code-block, .ex-source pre { margin: 0; border: 0; border-radius: 0; }
/* Phones: the note and switches take their own row under the tabs. */
@media (width < 640px) {
  .ex-tools { grid-row: 2; grid-column: 1 / -1; justify-self: start; flex-wrap: wrap; padding-block: var(--ib-space-2) 0; }
  .ex > .ex-tabs > .ib-tab-panel, .ex-panels { grid-row: 3; }
  .ex-below { grid-row: 4; }
}

/* Demos: hiding the code under the preview. */
.ex:has(.ex-code-input:not(:checked)) .ex-source { display: none; }
.ex-code-show, .ex-code-toggle:has(input:not(:checked)) .ex-code-hide { display: none; }
.ex-code-toggle:has(input:not(:checked)) .ex-code-show { display: inline; }

/* The code toggle and the width switch: buttons drawn around native inputs. */
.ex-code-toggle, .ex-widths label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ib-space-1);
  height: var(--ib-control-h-sm);
  padding-inline: var(--ib-space-2);
  border-radius: var(--ib-radius-md);
  font-size: var(--ib-text-sm);
  font-weight: 500;
  color: var(--ib-color-muted);
  cursor: pointer;
  user-select: none;
}
.ex-code-toggle input, .ex-widths input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ex-code-toggle:hover, .ex-widths label:hover { background: var(--ib-color-fill); color: var(--ib-color-on-surface); }
.ex-widths label:has(input:checked) {
  background: var(--ib-color-fill-strong);
  color: var(--ib-color-on-surface);
}
.ex-code-toggle:has(input:focus-visible), .ex-widths label:has(input:focus-visible) {
  outline: 2px solid var(--ib-color-focus);
  outline-offset: 1px;
}
.ex-widths { display: inline-flex; gap: 2px; margin: 0; padding: 0; border: 0; min-width: 0; }

/*
 * The page's mode switch (ModeSwitch): segmented link Tabs, then a line on what the current mode
 * means. In the right column on wide screens, at the top of the content below that,
 * and in an example's row on a page that is one example. Hidden on pages with no example.
 */
.site-modeswitch { display: flex; flex-direction: column; gap: var(--ib-space-2); }
.site-modeswitch-label { font-size: var(--ib-text-sm); font-weight: 600; }
.site-modeswitch-text { margin: 0; }
.site-modeswitch-aside { margin-block-end: var(--ib-space-6); }
.site-modeswitch-top { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--ib-space-3); }
.site-modeswitch-top .site-modeswitch-text { flex-basis: 100%; }
body:not(:has(.ex)) :is(.site-modeswitch-aside, .site-modeswitch-top) { display: none; }

/* The docs home: concepts, and the library by category. */
.site-concept-title { margin: 0; }
.site-box-category {
  display: flex;
  flex-direction: column;
  gap: var(--ib-space-1);
  padding: var(--ib-space-3) var(--ib-space-4);
  border: 1px solid var(--ib-color-border);
  border-radius: var(--ib-radius-lg);
  background: var(--ib-color-surface);
}
.site-box-title { margin: 0; }
.site-box-title a { color: var(--ib-color-on-surface); }
.site-box-count { margin-inline-start: var(--ib-space-1); font-weight: 400; color: var(--ib-color-muted); font-size: var(--ib-text-sm); }
/* One place at a time: the right column shows from 1024px (AppAside's breakpoint). */
@media (width >= 1024px) { .site-modeswitch-top { display: none; } }
@media (width < 1024px) { .site-modeswitch-aside { display: none; } }

/* A demo's frame: a page of its own, scrolling inside its window. */
/* The docs page's background (its --ib-color-surface), so an example sits on the page; the
   frame has the library's own theme, which would put its own gray here. */
html:has(> body > .frame), html:has(> body > .frame) body { background: light-dark(#ffffff, #0d0e11); }
/* No strip kept for a scrollbar: AppShell keeps one on its page so locking it doesn't shift the
   page, but a frame that doesn't scroll would show it as an empty band down the right edge. */
html:has(> body > .frame) { scrollbar-gutter: auto; }
html:has(> body > .frame) body { margin: 0; }
.frame-page { padding: var(--ib-space-4); }
/* A whole app (AppShell) fills its frame: no padding, or its 100dvh would grow the frame with
   every resize. */
.frame-page:has(> .ib-shell) { padding: 0; }

/* Reference tables in articles scroll sideways on phones rather than widening the page. */
.site-table { overflow-x: auto; }
.site-table table { min-width: 32rem; }
.site-table code { white-space: nowrap; }

/* The components index: categories flowing down columns as one dense list of links (after the
   indexes on Telerik's and DevExtreme's sites), so the library fits on a screen or two. */
.site-index {
  columns: 9.5rem;
  column-gap: var(--ib-space-6);
  margin-block-start: var(--ib-space-2);
}
.site-index-group {
  break-inside: avoid;
  padding-block-end: var(--ib-space-6);
}
.site-index-heading {
  margin: 0 0 var(--ib-space-2);
  font-size: var(--ib-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ib-color-on-surface);
  scroll-margin-top: 5rem;
}
.site-index-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-index-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ib-space-1) var(--ib-space-2);
  padding-block: 0.3125rem;
}
/* Names in the muted gray under strong group headings, as in the docs sidebar; full color on
   hover and focus. */
.site-index-list a {
  color: var(--ib-color-muted);
  font-size: var(--ib-text-sm);
  text-decoration: none;
}
.site-index-list a:is(:hover, :focus-visible) { color: var(--ib-color-on-surface); text-decoration: underline; }

/* Search (the /search page and the header's dialog): a heading per group, then a list of links,
   each a title with the matched words marked and where it is, and a line about it below. */
.site-search-count { margin: 0; min-height: 1lh; font-size: var(--ib-text-sm); color: var(--ib-color-muted); }
.site-search-group { display: flex; flex-direction: column; gap: var(--ib-space-2); }
.site-search-group + .site-search-group { margin-block-start: var(--ib-space-6); }
.site-search-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.site-search-item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding-block: var(--ib-space-2);
  border-block-end: 1px solid var(--ib-color-border);
}
.site-search-item:last-child { border-block-end: 0; }
.site-search-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--ib-space-2);
  width: fit-content;
  color: var(--ib-color-on-surface);
  font-weight: 500;
  text-decoration: none;
}
.site-search-link:is(:hover, :focus-visible) .site-search-title { text-decoration: underline; }
.site-search-context { font-size: var(--ib-text-sm); font-weight: 400; color: var(--ib-color-muted); }
.site-search-summary { margin: 0; font-size: var(--ib-text-sm); color: var(--ib-color-muted); }
.site-search-all { width: fit-content; margin-block-start: var(--ib-space-4); }

/* The header's search button: room for the word and the shortcut, which shows only with script
   (it needs site.js); its box stays without, so the button is one width either way. */
.site-search-button { min-width: 12rem; justify-content: flex-start; color: var(--ib-color-muted); font-weight: 400; }
.site-search-button .ib-btn-label { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: var(--ib-space-2); }
@media (scripting: none) {
  .site-search-key { visibility: hidden; }
}

/* The search dialog: one height whatever it shows, so typing never resizes it; the results
   scroll between the field and the key hints. Full screen on phones. */
.site-search-dialog { height: min(36rem, calc(100dvh - 4rem)); }
.site-search-dialog .ib-dialog-body { display: flex; flex-direction: column; overflow: hidden; }
.site-search-head {
  display: flex;
  align-items: center;
  gap: var(--ib-space-2);
  padding: var(--ib-space-4) var(--ib-space-4) var(--ib-space-2);
}
.site-search-form { display: flex; flex: 1 1 auto; align-items: flex-end; gap: var(--ib-space-2); min-width: 0; }
.site-search-dialog-count { padding-inline: var(--ib-space-4); }
.site-search-results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--ib-space-2) var(--ib-space-4) var(--ib-space-4);
  border-block-start: 1px solid var(--ib-color-border);
}
.site-search-results .site-search-group + .site-search-group { margin-block-start: var(--ib-space-4); }
.site-search-foot {
  display: flex;
  gap: var(--ib-space-4);
  padding: var(--ib-space-2) var(--ib-space-4);
  border-block-start: 1px solid var(--ib-color-border);
  font-size: var(--ib-text-xs);
  color: var(--ib-color-muted);
}
/* Without script there are no results as you type and no keys: a Search button submits. */
@media (scripting: enabled) {
  .site-search-submit { display: none; }
}
@media (scripting: none) {
  .site-search-foot { display: none; }
}
@media (max-width: 639.98px) {
  .site-search-dialog { width: 100%; height: 100dvh; max-height: none; border-radius: 0; }
  .site-search-foot { display: none; }
}