@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400..700;1,400..700&display=swap");

/* Reference page chrome only. Never styles canon- classes outside the
   chrome, never sets inherited typography on what the examples show. */
.ref-layout, .ref-pg-page {
  --ref-fg: light-dark(#09090b, #fafafa);          /* zinc-950 / zinc-50 */
  --ref-muted: light-dark(#71717a, #a1a1aa);       /* zinc-500 / zinc-400 */
  --ref-text: light-dark(#3f3f46, #d4d4d8);        /* zinc-700 / zinc-300 */
  --ref-line: light-dark(#e4e4e7, #27272a);        /* zinc-200 / zinc-800 */
  --ref-hover: light-dark(#f4f4f5, #27272a);       /* zinc-100 / zinc-800 */
  --ref-bg: light-dark(#ffffff, #09090b);          /* white / zinc-950 */
  --ref-top: 3.5rem;
  /* Type, from the Canon Design System's text styles: a size and its
     line height, both on the 4- and 8-point grid. */
  --ref-heading-lg: 3rem;      --ref-heading-lg-lh: 3.5rem;   /* 48/56 */
  --ref-heading-md: 2.5rem;    --ref-heading-md-lh: 3rem;     /* 40/48 */
  --ref-heading-sm: 2rem;      --ref-heading-sm-lh: 2.5rem;   /* 32/40 */
  --ref-text-lg: 1.5rem;       --ref-text-lg-lh: 2rem;        /* 24/32 */
  --ref-text-md: 1rem;         --ref-text-md-lh: 1.5rem;      /* 16/24 */
  --ref-text-sm: 0.875rem;     --ref-text-sm-lh: 1.25rem;     /* 14/20 */
  --ref-text-xs: 0.75rem;      --ref-text-xs-lh: 1rem;        /* 12/16 */
  --ref-text-2xs: 0.625rem;    --ref-text-2xs-lh: 0.75rem;    /* 10/12 */
  --ref-caption: 0.625rem;     --ref-caption-lh: 1rem;        /* 10/16 */
  --ref-code-md: 0.875rem;     --ref-code-md-lh: 1.5rem;      /* 14/24 */
  --ref-code-sm: 0.75rem;      --ref-code-sm-lh: 1.25rem;     /* 12/20 */
}
.ref-layout {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr) 15rem;
  grid-template-rows: auto 1fr;
  grid-template-areas: "top top top" "nav main toc";
  min-block-size: 100dvh;
  margin: 0;
  background-color: var(--ref-bg);
}

/* With the Playground open, the right column holds its controls, a little wider. */
body[data-view="playground"] { grid-template-columns: 16rem minmax(0, 1fr) 17rem; }

/* Top bar */
.ref-top {
  grid-area: top;
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  /* The page's own columns: the brand over the navigation, the tools
     at the end. */
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  block-size: var(--ref-top);
  box-sizing: border-box;
  padding-inline: 1.5rem;
  border-block-end: 1px solid var(--ref-line);
  background-color: color-mix(in srgb, var(--ref-bg) 88%, transparent);
  backdrop-filter: blur(10px);
}
.ref-brand { display: inline-flex; align-items: center; gap: 0.625rem; color: var(--ref-fg); font-size: var(--ref-text-md); line-height: var(--ref-text-md-lh); font-weight: 600; letter-spacing: -0.01em; text-decoration: none; }
.ref-logo { inline-size: 1.5rem; block-size: 1.5rem; flex: none; }
.ref-brand { grid-area: 1 / 1; justify-self: start; }
.ref-top-tools { grid-area: 1 / -2; justify-self: end; display: flex; align-items: center; gap: 0.25rem; }
.ref-top-menu { display: none; }
.ref-theme-label { margin-inline-end: 0.25rem; color: var(--ref-muted); font-size: var(--ref-text-sm); line-height: var(--ref-text-sm-lh); white-space: nowrap; }
.ref-theme-select { inline-size: 10.5rem; margin-inline-end: 1rem; }
.ref-search { margin-inline-end: 0.5rem; }
/* A phone's bar has room for the theme or Search's words: Search is its
   icon, and Canon's name and the theme's label are for screen readers
   only (the smallest phones get a narrower theme menu too). */
@media (width < 24rem) {
  .ref-top .ref-theme-select { inline-size: 6rem; }
}
@media (width < 40rem) {
  .ref-theme-label, .ref-brand > span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .ref-theme-select { inline-size: 8rem; }
  .ref-search { min-inline-size: 2rem; padding-inline: 0.5rem; }
  .ref-search > :is(.canon-button-label, .canon-kbd) { display: none; }
}

/* Components: a card per component, running, its name and a line under it
   linking to its page. At most three a row (fewer when narrow), sharing
   the column; on wide windows the cards grow and their previews keep their
   shape, never more cards a row. What a preview shows is drawn at its own
   size, smaller only when it doesn't fit (--ref-z, set by the page's
   script). The notes keep their reading width. */
.ref-page:has(> .ref-section > .ref-catalog) { max-inline-size: 112rem; }
.ref-catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 16rem), (100% - 2rem) / 3), 1fr)); gap: 1rem; margin-block: 1rem 2.5rem; }
.ref-catalog-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--ref-line); border-radius: 0.75rem; background-color: var(--ref-bg); }
.ref-catalog-preview { display: grid; place-items: center; aspect-ratio: 4 / 3; min-inline-size: 0; overflow: hidden; padding: 1rem; border-block-end: 1px solid var(--ref-line); background-color: light-dark(#fafafa, #0c0c0e); }
/* The stage lays a preview out at its natural width, then zooms it to fit (components.html). */
.ref-catalog-stage { display: grid; justify-items: center; inline-size: max-content; zoom: var(--ref-z, 1); }
/* What opens over the page, at full size (the stage's zoom undone). */
.ref-catalog-stage :is([popover], dialog) { zoom: calc(1 / var(--ref-z, 1)); }
.ref-catalog-frame { box-sizing: border-box; overflow: hidden; border: 1px solid var(--ref-line); border-radius: 0.75rem; background-color: var(--ref-bg); }
/* A card's name and line grow with the card: 14 / 13px on 20px lines at
   16rem, up to 17 / 15px at about 28rem; the padding and the gap with
   them (12 / 16px to 16 / 20px). */
.ref-catalog-card, .ref-catalog-pattern { container-type: inline-size; }
.ref-catalog-foot, .ref-catalog-pattern { display: grid; align-content: start; gap: 0.25rem; padding: 0.75rem 1rem 1rem; color: inherit; text-decoration: none; }
.ref-catalog-foot {
  gap: 0.25rem;
  padding: 1rem 1.25rem 1.25rem;
}
.ref-catalog-name { color: var(--ref-fg); font-size: var(--ref-text-md); font-weight: 600; line-height: var(--ref-text-md-lh); }
.ref-catalog-text { color: var(--ref-muted); font-size: var(--ref-text-sm); line-height: var(--ref-text-sm-lh); }
.ref-catalog-foot:hover .ref-catalog-name, .ref-catalog-pattern:hover .ref-catalog-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ref-catalog-foot:focus-visible, .ref-catalog-pattern:focus-visible { outline: 2px solid light-dark(#2563eb, #60a5fa); outline-offset: -2px; border-radius: 0 0 0.75rem 0.75rem; }
/* Patterns: whole screens, so a card of words. */
.ref-catalog-pattern { border: 1px solid var(--ref-line); border-radius: 0.75rem; transition: background-color 0.12s; }
.ref-catalog-pattern:hover { background-color: var(--ref-hover); }
.ref-catalog-pattern:focus-visible { border-radius: 0.75rem; }

/* Introduction */
.ref-plain { margin-block: 1rem 1.5rem; }
/* Code inside Canon components on the Introduction (the notes' highlighter leaves those alone): the same chip. */
.ref-plain :not(pre) > code { padding: 0 0.25rem; border-radius: 0.125rem; background-color: light-dark(#f4f4f5, #27272a); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.875em; font-variant-ligatures: none; }
/* Themes page: the same sample in each theme, a frame of its own. */
.ref-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1rem; align-items: start; }
.ref-theme-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--ref-line); border-radius: 0.75rem; }
.ref-theme-card-head { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 0.75rem; padding: 1rem; border-block-end: 1px solid var(--ref-line); }
.ref-section .ref-theme-card .ref-theme-card-head h3 { margin: 0; color: var(--ref-fg); font-size: var(--ref-text-md); font-weight: 600; line-height: var(--ref-text-md-lh); }
.ref-theme-card-head p { margin: 0; color: var(--ref-text); font-size: var(--ref-text-sm); line-height: var(--ref-text-sm-lh); }
.ref-theme-frame { display: block; inline-size: 100%; block-size: 22rem; border: 0; }
.ref-principles { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.ref-principle .canon-card-body { gap: 0.5rem; }
.ref-principle p { margin: 0; color: var(--ref-text); font-size: var(--ref-text-sm); line-height: var(--ref-text-sm-lh); }
.ref-principle-title { margin: 0.25rem 0 0; color: var(--ref-fg); font-size: var(--ref-text-md); font-weight: 600; line-height: var(--ref-text-md-lh); }
.ref-principle-icon { display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 0.5rem; background-color: var(--ref-hover); color: var(--ref-fg); }
/* The scheme toggle says it with its icon (a sun in dark, a moon in light), not a pressed fill. */
.ref-github > .canon-icon { --canon-theme-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 0 0-3.16 19.49c.5.09.68-.22.68-.48v-1.7c-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.61.07-.61 1 .07 1.53 1.03 1.53 1.03.89 1.53 2.34 1.09 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02a9.56 9.56 0 0 1 5 0c1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85v2.74c0 .27.18.58.69.48A10 10 0 0 0 12 2Z'/></svg>"); }
.ref-top .ref-scheme-toggle[aria-pressed="true"]:not(:hover, :active) { background-color: transparent; }
.ref-brand:focus-visible, .ref-nav a:focus-visible, .ref-toc a:focus-visible { outline: 2px solid light-dark(#2563eb, #60a5fa); outline-offset: 2px; border-radius: 4px; }

/* Navigation */
.ref-aside {
  grid-area: nav;
  position: sticky;
  inset-block-start: var(--ref-top);
  align-self: start;
  block-size: calc(100dvh - var(--ref-top));
  overflow-y: auto;
  box-sizing: border-box;
  padding: 1.5rem 0.75rem 3rem 1.25rem;
  border-inline-end: 1px solid var(--ref-line);
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
/* Its scrollbar shows only while the pointer is over it. */
.ref-aside:hover { scrollbar-color: light-dark(#d4d4d8, #3f3f46) transparent; }
.ref-nav { font-size: var(--ref-text-sm); line-height: var(--ref-text-sm-lh); }
.ref-nav h2 { margin: 1.5rem 0 0.375rem; padding-inline: 0.625rem; color: var(--ref-fg); font-size: var(--ref-text-sm); font-weight: 600; line-height: var(--ref-text-sm-lh); }
.ref-nav > h2:first-child { margin-block-start: 0; }
.ref-nav ul { display: grid; gap: 1px; list-style: none; margin: 0; padding: 0; }
.ref-nav a { display: block; padding: 0.375rem 0.625rem; border-radius: 0.375rem; color: var(--ref-muted); text-decoration: none; transition: background-color 0.12s, color 0.12s; }
.ref-nav a:hover { color: var(--ref-fg); background-color: var(--ref-hover); }
.ref-nav a[aria-current="page"] { color: var(--ref-fg); background-color: var(--ref-hover); font-weight: 500; }
/* The drawer's own head shows only when it's a drawer (narrow). */
.ref-aside-head { display: none; }
@media (max-width: 56rem) {
  .ref-aside-head { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .ref-aside, body::after { transition: none; }
}
/* Planned: listed, not a link yet. */
.ref-nav-soon { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.25rem 0.625rem; color: color-mix(in oklab, var(--ref-muted) 70%, transparent); cursor: default; }

/* "On this page" */
.ref-toc {
  grid-area: toc;
  position: sticky;
  inset-block-start: var(--ref-top);
  align-self: start;
  max-block-size: calc(100dvh - var(--ref-top));
  overflow-y: auto;
  box-sizing: border-box;
  padding: 2.5rem 1.5rem 2rem 0.5rem;
  font-size: var(--ref-text-sm);
  line-height: var(--ref-text-sm-lh);
}
.ref-toc[hidden] { display: none; }
.ref-toc p { margin: 0 0 0.5rem; color: var(--ref-fg); font-weight: 600; }
.ref-toc ul { display: grid; gap: 0.375rem; list-style: none; margin: 0; padding: 0; }
.ref-toc a { color: var(--ref-muted); text-decoration: none; transition: color 0.12s; }
.ref-toc a:hover, .ref-toc a[aria-current] { color: var(--ref-fg); }

/* The page */
.ref-page { grid-area: main; box-sizing: border-box; inline-size: 100%; max-inline-size: 58rem; margin: 0 auto; padding: 2.5rem 3rem 6rem; color: var(--ref-fg); }
.ref-page > h1 { margin: 0 0 0.75rem; font-size: var(--ref-heading-sm); font-weight: 700; line-height: var(--ref-heading-sm-lh); letter-spacing: -0.025em; }
/* A component's tier tags beside its title; each opens its meaning. */
.ref-tiers { display: inline-flex; gap: 0.375rem; vertical-align: 0.45em; }
.ref-tier { display: inline-flex; margin: 0; padding: 0; border: 0; border-radius: 999px; background: none; font: inherit; line-height: 1; cursor: default; }
.ref-tier:focus-visible { outline: 2px solid light-dark(#2563eb, #60a5fa); outline-offset: 2px; }
.ref-page > h1 + .ref-note { margin-block: 0 2rem; color: var(--ref-muted); font-size: var(--ref-text-md); line-height: var(--ref-text-md-lh); }
.ref-section { margin-block: 3rem 0; scroll-margin-block-start: calc(var(--ref-top) + 1.5rem); }
.ref-section > h2 { margin: 0 0 0.75rem; padding-block-end: 0.5rem; border-block-end: 1px solid var(--ref-line); font-size: var(--ref-text-lg); font-weight: 600; line-height: var(--ref-text-lg-lh); letter-spacing: -0.015em; }
.ref-section h3:not([class*="canon-"]) { margin: 2rem 0 0.5rem; font-size: var(--ref-text-md); font-weight: 600; line-height: var(--ref-text-md-lh); }
.ref-note { max-inline-size: 46rem; margin-block: 0.75rem; color: var(--ref-text); font-size: var(--ref-text-md); line-height: var(--ref-text-md-lh); }
.ref-page > .ref-support { max-inline-size: 46rem; margin-block: 0 2rem; }
.ref-note a, .ref-page > h1 + .ref-note a { color: var(--ref-fg); font-weight: 500; text-decoration-line: underline; text-decoration-color: var(--ref-line); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ref-note a:hover { text-decoration-color: currentColor; }

/* Examples: a preview frame around each run of demos. */
.ref-example { --ref-example-pad: 2rem; margin-block: 1.25rem 1.75rem; padding: var(--ref-example-pad); border: 1px solid var(--ref-line); border-radius: 0.75rem; }
/* A resizable demo: the frame itself is dragged (ref.js), from the demo's width plus its padding. */
.ref-example[data-resizable] { resize: horizontal; overflow: hidden; inline-size: calc(var(--ref-resizable-size, 100%) + 2 * var(--ref-example-pad) + 2px); max-inline-size: 100%; min-inline-size: 10rem; }
.ref-example[data-resizable][data-flush] { inline-size: var(--ref-resizable-size, 100%); }
.ref-example[data-resizable] > :not(dialog, [popover]) { inline-size: auto; min-inline-size: 0; }
/* The contract check's warnings about an example, right under its frame. */
.ref-example + .canon-debug-report { margin-block: -0.5rem 1.75rem; }
/* The first and last demo touch the frame's padding. Dialogs and popovers sit over the page (their
   auto margins center them): left alone, and not counted (a closed dialog after its button). */
.ref-example > :nth-child(1 of :not(dialog, [popover], template, script, style)) { margin-block-start: 0; }
.ref-example > :nth-last-child(1 of :not(dialog, [popover], template, script, style)) { margin-block-end: 0; }
/* Demos stacked in a frame, apart (ref.js marks them). */
.ref-example:not([data-flush]) > .ref-apart { margin-block-start: 1.5rem; }
.ref-example[data-flush] { padding: 0; overflow: hidden; }
.ref-example[data-flush] > :not(dialog, [popover]) { border: 0 !important; border-radius: 0 !important; max-inline-size: none; margin-block: 0 !important; }
/* Several in one frame: a line between them. */
.ref-example[data-flush] > :not(dialog, [popover]) ~ :not(dialog, [popover]) { border-block-start: 1px solid var(--ref-line) !important; }
/* Preview / HTML (ref.js): the frame and its markup in one box, a bar on top choosing which shows.
   The box takes the frame's edge and spacing; the frame inside keeps only its padding. */
.ref-demo { margin-block: 1.25rem 1.75rem; border: 1px solid var(--ref-line); border-radius: 0.75rem; }
.ref-demo-bar { display: flex; justify-content: flex-end; padding: 0.5rem; border-block-end: 1px solid var(--ref-line); }
.ref-demo > .ref-example { margin: 0; border: 0; border-radius: 0 0 calc(0.75rem - 1px) calc(0.75rem - 1px); }
.ref-demo > .ref-example + .canon-debug-report { margin: 0; padding: 0.75rem 1rem; }
.ref-demo-code { padding: 1rem; }
.ref-demo-code > .canon-code-block { --canon-code-block-max-height: 32rem; }
/* One view at a time. */
.ref-demo[data-view="preview"] > .ref-demo-code,
.ref-demo[data-view="html"] > :not(.ref-demo-bar, .ref-demo-code) { display: none; }
/* A resizable frame: the box follows its width, the bar and code with it. */
.ref-demo:has(> .ref-example[data-resizable]) { inline-size: fit-content; max-inline-size: 100%; }
.ref-demo[data-view="html"]:has(> .ref-example[data-resizable]) { inline-size: auto; }
.ref-demo > .ref-example[data-resizable] { max-inline-size: 100%; }
/* Frames inside a preview are quieter: a solid line, not a dashed one. */
.ref-example :is(.ref-shell-frame, .ref-split-frame, .ref-top-bar-frame, .ref-page-header-frame, .ref-section-demo, .ref-sidebar, .ref-resizable, .ref-shell-box) { border-style: solid; border-color: var(--ref-line); }

.ref-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-block: 0.75rem; }
/* Fields beside buttons: align the input's text with the button's label. */
.ref-row-baseline { align-items: last baseline; }
.ref-stack { display: grid; gap: 1.5rem; max-inline-size: 24rem; margin-block: 0.75rem; }
.ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.5rem; margin-block: 0.75rem; }
/* Calendars and codes are wider than a 16rem column. */
.ref-grid:has(.canon-calendar, .canon-otp) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 23rem), 1fr)); }
/* Set by ref.js on a demo wider than its frame: it scrolls in place, with room for focus rings. */
.ref-scroll { overflow-x: auto; padding: 0.25rem; margin-inline: -0.25rem; }
.ref-matrix td, .ref-matrix th { padding: 0.5rem; text-align: start; }
/* Reference tables scroll in place when wider than the page, like a canon-table frame. */
.ref-matrix, .ref-table { display: block; max-inline-size: max-content; overflow-x: auto; }
.ref-check { display: flex !important; align-items: center; gap: 0.375rem !important; }

/* Tabs: Reference / Playground */
.ref-tabs { display: flex; gap: 1.5rem; margin-block: 0 0.5rem; border-block-end: 1px solid var(--ref-line); }
.ref-tabs [role="tab"] {
  margin-block-end: -1px;
  padding: 0.5rem 0 0.625rem;
  border: 0;
  border-block-end: 2px solid transparent;
  background: none;
  color: var(--ref-muted);
  font: inherit;
  font-size: var(--ref-text-sm);
  line-height: var(--ref-text-sm-lh);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.ref-tabs [role="tab"]:hover { color: var(--ref-fg); }
.ref-tabs [role="tab"][aria-selected="true"] { border-block-end-color: var(--ref-fg); color: var(--ref-fg); }
.ref-tabs [role="tab"]:focus-visible { outline: 2px solid light-dark(#2563eb, #60a5fa); outline-offset: 2px; border-radius: 4px; }

/* Narrower windows: no "On this page"; then the navigation opens over the page. */
@media (max-width: 80rem) {
  .ref-layout { grid-template-columns: 16rem minmax(0, 1fr); grid-template-areas: "top top" "nav main"; }
  .ref-top-tools { grid-area: 1 / 2; }
  .ref-toc { display: none; }
  body[data-view="playground"] { grid-template-columns: 16rem minmax(0, 1fr) 17rem; grid-template-areas: "top top top" "nav main toc"; }
  body[data-view="playground"] .ref-top-tools { grid-area: 1 / -2; }
}
@media (max-width: 56rem) {
  .ref-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
  .ref-top { display: flex; gap: 0.75rem; padding-inline: 0.75rem 1rem; }
  .ref-top-tools { margin-inline-start: auto; }
  .ref-top-menu { display: inline-flex; }
  /* The navigation: a drawer, as an App Shell's sidebar is on a narrow
     screen. Sliding in from the start over a scrim, the brand at its top,
     the page under it kept still. */
  .ref-aside {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 50;
    inline-size: min(18rem, calc(100vw - 3rem));
    align-self: stretch; /* the window's height: start would size it to its content */
    block-size: auto;
    padding: 0 0.75rem 3rem;
    border-inline-end: 1px solid var(--ref-line);
    background-color: light-dark(#ffffff, #18181b);                  /* white / zinc-900 */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    scrollbar-color: light-dark(#d4d4d8, #3f3f46) transparent;
    translate: -100% 0;
    visibility: hidden;
    transition: translate 0.2s ease, visibility 0.2s;
  }
  .ref-aside:dir(rtl) { translate: 100% 0; }
  /* Visible at once when it opens (so focus can go in), until it has slid
     away when it closes. */
  body[data-nav-open] .ref-aside { translate: 0; visibility: visible; transition: translate 0.2s ease, visibility 0s; }
  .ref-aside-head {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    block-size: var(--ref-top);
    padding-inline: 0.625rem;
    background-color: inherit;
  }
  /* The scrim: over the page and its bar, under the drawer. */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 45;
    background-color: rgb(0 0 0 / 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
  }
  body[data-nav-open]::after { opacity: 1; visibility: visible; }
  html:has(body[data-nav-open]) { overflow: hidden; }
  body[data-view="playground"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main" "toc"; }
  .ref-page { padding: 1.75rem 1rem 4rem; }
  .ref-example { --ref-example-pad: 1.25rem; }
}

/* ---------------------------------------------------------------------- */
/* Playground                                                              */
/* ---------------------------------------------------------------------- */
.ref-playground { margin-block: 1.5rem; }

/* The controls: an inspector in the page's right column (where "On this
   page" is on the Reference tab), as in a design tool. The full height
   under the top bar, a line at its start; a head with Reset; sections
   divided by lines, each a small title and rows of "label | control";
   yes-or-no options as Switches at the row's end. */
.ref-inspector { display: none; }
body[data-view="playground"] .ref-inspector {
  display: block;
  grid-area: toc;
  position: sticky;
  inset-block-start: var(--ref-top);
  align-self: start;
  block-size: calc(100dvh - var(--ref-top));
  overflow-y: auto;
  box-sizing: border-box;
  border-inline-start: 1px solid var(--ref-line);
  background-color: var(--ins-panel);
  scrollbar-width: thin;
}
/* The inspector's look, also for its controls used elsewhere
   (.ref-ins-host: the Introduction's playground). Three surfaces, one
   step apart: the panel; fields and tracks recessed into it (a shade in,
   a soft shadow at their top edge); the chosen option raised out of its
   track on a plate (a shade out, a crisp shadow under it, in the dark a
   lit top edge). No outlines: one accent marks what's on, what's chosen
   and what has focus. One height and one radius, a plate's radius its
   track's less the gap between them. */
.ref-inspector {
  container: ref-inspector / inline-size;
}
:is(.ref-inspector, .ref-ins-host) {
  --ins-fg: var(--ref-fg);
  --ins-muted: light-dark(#71717a, #a1a1aa);                       /* zinc-500 / zinc-400 */
  --ins-faint: light-dark(#a1a1aa, #52525b);                       /* zinc-400 / zinc-600 */
  --ins-panel: light-dark(#fafafa, #121214);
  --ins-field: light-dark(#efeff1, #08080a);
  --ins-field-hover: light-dark(#e7e7ea, #1c1c20);
  --ins-plate: light-dark(#ffffff, #2e2e34);
  --ins-line: light-dark(rgb(0 0 0 / 0.07), rgb(255 255 255 / 0.07));
  --ins-sunken: inset 0 1px 2px light-dark(rgb(0 0 0 / 0.07), rgb(0 0 0 / 0.6));
  --ins-raised: 0 0 0 0.5px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.5)), 0 1px 2px light-dark(rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.5)), inset 0 1px 0 light-dark(transparent, rgb(255 255 255 / 0.08));
  --ins-accent: light-dark(#2563eb, #60a5fa);                      /* blue-600 / blue-400 */
  --ins-focus: var(--ins-accent);
  --ins-h: 1.75rem;
  --ins-r: 0.5rem;
  --ins-gap: 2px;
  font-size: var(--ref-text-xs);
  line-height: var(--ref-text-xs-lh);
}
.ref-inspector-head {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: 2.5rem;
  box-sizing: border-box;
  padding-inline: 1rem 0.5rem;
  border-block-end: 1px solid var(--ins-line);
  background-color: var(--ins-panel);
}
.ref-inspector-head h2 { margin: 0; color: var(--ins-fg); font-size: var(--ref-text-xs); font-weight: 600; line-height: var(--ref-text-xs-lh); }
.ref-ins-reset {
  block-size: 1.5rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: var(--ins-r);
  background: none;
  color: var(--ins-muted);
  font: inherit;
  cursor: pointer;
}
.ref-ins-reset:hover { background-color: var(--ins-field-hover); color: var(--ins-fg); }
.ref-ins-reset:focus-visible { outline: 2px solid var(--ins-focus); outline-offset: 1px; }
.ref-pg-controls fieldset {
  display: grid;
  gap: 0.375rem;
  min-inline-size: 0;
  margin: 0;
  padding: 0.875rem 1rem 1rem;
  border: 0;
  border-block-end: 1px solid var(--ins-line);
}
/* Floated, the legend is an ordinary first row, not drawn on the border:
   small capitals, quiet, as a tool's section names. */
.ref-pg-controls legend {
  float: inline-start;
  inline-size: 100%;
  margin: 0 0 0.375rem;
  padding: 0;
  color: var(--ins-muted);
  font-size: var(--ref-caption);
  font-weight: 600;
  line-height: var(--ref-caption-lh);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ref-pg-controls [hidden] { display: none !important; }

/* Narrow: under the playground, as tall as it needs, a line above. */
@media (max-width: 56rem) {
  body[data-view="playground"] .ref-inspector { position: static; block-size: auto; overflow: visible; border-inline-start: 0; border-block-start: 1px solid var(--ref-line); }
  .ref-inspector-head { position: static; }
  body[data-view="playground"] .ref-page { padding-block-end: 1.5rem; }
}

/* Wide (under the playground on a narrow window): the sections flow into
   columns, packed top to bottom, a line between columns; the head across. */
@container ref-inspector (width > 34rem) {
  .ref-pg-controls { columns: 16rem; column-gap: 0; column-rule: 1px solid var(--ins-line); }
  .ref-inspector-head { column-span: all; }
  .ref-pg-controls fieldset { break-inside: avoid; }
}

/* A row: the label (one line, cut with its whole text as a tooltip), then
   the control. A yes-or-no row: the label across, the switch at the end. */
.ref-ins-row {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  align-items: center;
  column-gap: 0.5rem;
  min-block-size: var(--ins-h);
}
.ref-ins-row[data-switch] { grid-template-columns: minmax(0, 1fr) auto; }
.ref-ins-label {
  overflow: hidden;
  color: var(--ins-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* A label with more to say: its words on hover. */
.ref-ins-label[data-hint] { cursor: help; }

/* Fields: recessed, no outline; a shade lighter on hover, the accent's
   ring with focus. */
.ref-ins-input,
.ref-ins-select > select {
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  block-size: var(--ins-h);
  margin: 0;
  padding: 0 0.5rem;
  border: 0;
  border-radius: var(--ins-r);
  background-color: var(--ins-field);
  box-shadow: var(--ins-sunken);
  color: var(--ins-fg);
  font: inherit;
  outline: none;
  transition: background-color 0.12s, box-shadow 0.12s;
}
.ref-ins-input::placeholder { color: var(--ins-faint); opacity: 1; }
.ref-ins-input:hover,
.ref-ins-select > select:hover { background-color: var(--ins-field-hover); }
.ref-ins-input:focus-visible,
.ref-ins-select > select:focus-visible { box-shadow: var(--ins-sunken), 0 0 0 1.5px var(--ins-focus); }
.ref-ins-input[type="number"] { font-variant-numeric: tabular-nums; }
.ref-ins-select { position: relative; display: block; min-inline-size: 0; }
.ref-ins-select > select {
  appearance: none;
  padding-inline-end: 1.5rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.ref-ins-select::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0.5rem;
  inline-size: 0.75rem;
  background-color: var(--ins-muted);
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center / contain no-repeat;
  pointer-events: none;
}

/* The switch: a recessed track, its knob a plate; the accent fills the
   track when on. */
.ref-ins-switch {
  appearance: none;
  position: relative;
  inline-size: 2rem;
  block-size: 1.25rem;
  margin: 0;
  border-radius: 999px;
  background-color: light-dark(#e2e2e6, #2a2a30);
  box-shadow: var(--ins-sunken);
  cursor: pointer;
  transition: background-color 0.15s;
}
.ref-ins-switch:hover { background-color: light-dark(#d8d8dd, #34343b); }
.ref-ins-switch::before {
  content: "";
  position: absolute;
  inset-block-start: var(--ins-gap);
  inset-inline-start: var(--ins-gap);
  inline-size: calc(1.25rem - 2 * var(--ins-gap));
  block-size: calc(1.25rem - 2 * var(--ins-gap));
  border-radius: 50%;
  background-color: light-dark(#ffffff, #d4d4d8);
  box-shadow: var(--ins-raised);
  transition: translate 0.18s cubic-bezier(0.3, 1.3, 0.5, 1);
}
.ref-ins-switch:checked { background-color: var(--ins-accent); }
.ref-ins-switch:checked::before { background-color: #ffffff; translate: 0.75rem 0; }
.ref-ins-switch:focus-visible { outline: 2px solid var(--ins-focus); outline-offset: 2px; }

/* Reset has nothing to do until something changed. */
.ref-ins-reset:disabled { opacity: 0.45; cursor: default; }
.ref-ins-reset:disabled:hover { background: none; color: var(--ins-muted); }

/* A stacked row: the label and the current value on one line, the
   control across under them. */
.ref-ins-row { --_line: var(--ins-h); position: relative; }
.ref-ins-row[data-stack] {
  --_line: 1.5rem;
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: 0.125rem;
  padding-block: 0.125rem 0.25rem;
}
.ref-ins-row[data-stack] > :last-child { grid-column: 1 / -1; }
.ref-ins-row[data-stack] > .ref-ins-label { line-height: var(--_line); }
.ref-ins-value {
  overflow: hidden;
  color: var(--ins-fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Changed: the label in the text color. */
.ref-ins-row[data-changed] > .ref-ins-label { color: var(--ins-fg); }

/* Options as radios in boxes: the radio covers its box, unseen. */
.ref-ins-option {
  position: relative;
  display: grid;
  place-items: center;
  min-inline-size: 0;
  border-radius: calc(var(--ins-r) - var(--ins-gap));
  color: var(--ins-muted);
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s, box-shadow 0.12s;
}
.ref-ins-option > input {
  position: absolute;
  inset: 0;
  margin: 0;
  appearance: none;
  border-radius: inherit;
  cursor: pointer;
}
.ref-ins-option > input:focus-visible { outline: 2px solid var(--ins-focus); outline-offset: 1px; }
.ref-ins-option > :not(input) { position: relative; pointer-events: none; }
/* Off: faded, its reason on hover (the box, not the radio, takes it). */
.ref-ins-option:has(> input:disabled) { opacity: 0.4; cursor: not-allowed; }
.ref-ins-option > input:disabled { pointer-events: none; }
.ref-ins-option:has(> input:disabled):hover { color: var(--ins-muted); }

/* Segmented and tiles: options in a recessed track, the chosen one
   raised on a plate (a segmented control's slides to it). */
.ref-ins-seg,
.ref-ins-tiles:not(.ref-ins-icons) {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  padding: var(--ins-gap);
  border-radius: var(--ins-r);
  background-color: var(--ins-field);
  box-shadow: var(--ins-sunken);
}
.ref-ins-seg::before {
  content: "";
  position: absolute;
  inset-block: var(--ins-gap);
  inset-inline-start: var(--ins-gap);
  inline-size: calc((100% - 2 * var(--ins-gap)) / var(--n));
  border-radius: calc(var(--ins-r) - var(--ins-gap));
  background-color: var(--ins-plate);
  box-shadow: var(--ins-raised);
  translate: calc(var(--at, 0) * 100%) 0;
  transition: translate 0.22s cubic-bezier(0.3, 1.3, 0.5, 1);
}
.ref-ins-seg > .ref-ins-option { block-size: calc(var(--ins-h) - 2 * var(--ins-gap)); padding-inline: 0.25rem; }
.ref-ins-seg > .ref-ins-option > span {
  overflow: hidden;
  max-inline-size: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ref-ins-seg > .ref-ins-option:hover { color: var(--ins-fg); }
.ref-ins-seg > .ref-ins-option:has(:checked) { color: var(--ins-fg); font-weight: 500; }

/* Tiles: a picture each, grey until chosen. */
.ref-ins-tiles:not(.ref-ins-icons) > .ref-ins-option { block-size: calc(var(--ins-h) + 0.25rem); }
.ref-ins-tiles:not(.ref-ins-icons) > .ref-ins-option:hover { background-color: light-dark(rgb(0 0 0 / 0.04), rgb(255 255 255 / 0.05)); color: var(--ins-fg); }
.ref-ins-tiles:not(.ref-ins-icons) > .ref-ins-option:has(:checked) { background-color: var(--ins-plate); box-shadow: var(--ins-raised); color: var(--ins-fg); }
/* Icons, in their popover: a grid of boxes, the chosen one in the accent. */
.ref-ins-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(1.75rem, 1fr)); gap: 0.125rem; }
.ref-ins-icons > .ref-ins-option { block-size: 1.75rem; color: var(--ins-fg); --canon-icon-size: 1rem; }
.ref-ins-icons > .ref-ins-option:hover { background-color: var(--ins-field-hover); }
.ref-ins-icons > .ref-ins-option:has(:checked) { background-color: color-mix(in srgb, var(--ins-accent) 14%, transparent); color: var(--ins-accent); }

/* Meanings: each its icon, in its color once chosen; "none" a dashed ring. */
:is(.ref-inspector, .ref-ins-host) {
  --ins-info: light-dark(#2563eb, #60a5fa);                        /* blue-600 / blue-400 */
  --ins-success: light-dark(#16a34a, #4ade80);                     /* green-600 / green-400 */
  --ins-warning: light-dark(#d97706, #fbbf24);                     /* amber-600 / amber-400 */
  --ins-danger: light-dark(#dc2626, #f87171);                      /* red-600 / red-400 */
  --ins-neutral: light-dark(#52525b, #d4d4d8);                     /* zinc-600 / zinc-300 */
}
.ref-ins-option[data-tone="auto"] { --_tone: var(--ins-fg); --_icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-dasharray='3.5 3'><circle cx='12' cy='12' r='9'/></svg>"); }
.ref-ins-option[data-tone="neutral"] { --_tone: var(--ins-neutral); --_icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'><circle cx='12' cy='12' r='10'/><circle cx='12' cy='12' r='4' fill='black'/></svg>"); }
.ref-ins-option[data-tone="info"] { --_tone: var(--ins-info); --_icon: var(--canon-theme-icon-info); }
.ref-ins-option[data-tone="success"] { --_tone: var(--ins-success); --_icon: var(--canon-theme-icon-circle-check); }
.ref-ins-option[data-tone="warning"] { --_tone: var(--ins-warning); --_icon: var(--canon-theme-icon-triangle-alert); }
.ref-ins-option[data-tone="danger"] { --_tone: var(--ins-danger); --_icon: var(--canon-theme-icon-circle-alert); }
.ref-ins-glyph {
  inline-size: 1rem;
  block-size: 1rem;
  background-color: currentColor;
  mask: var(--_icon) center / contain no-repeat;
  transition: background-color 0.12s;
}
.ref-ins-option:has(:checked) > .ref-ins-glyph { background-color: var(--_tone); }

/* Emphasis: a tiny button at each level, grey until chosen, then in the
   chosen meaning's color. */
:is(.ref-inspector, .ref-ins-host) { --ins-tone: var(--ins-accent); }
:is(.ref-inspector, .ref-ins-host)[data-tone="neutral"] { --ins-tone: var(--ins-neutral); }
:is(.ref-inspector, .ref-ins-host)[data-tone="info"] { --ins-tone: var(--ins-info); }
:is(.ref-inspector, .ref-ins-host)[data-tone="success"] { --ins-tone: var(--ins-success); }
:is(.ref-inspector, .ref-ins-host)[data-tone="warning"] { --ins-tone: var(--ins-warning); }
:is(.ref-inspector, .ref-ins-host)[data-tone="danger"] { --ins-tone: var(--ins-danger); }
.ref-ins-pill {
  --_t: var(--ins-muted);
  display: grid;
  place-items: center;
  box-sizing: border-box;
  inline-size: 1.75rem;
  block-size: 0.875rem;
  border-radius: 0.25rem;
  color: var(--_t);
}
.ref-ins-option:has(:checked) > .ref-ins-pill { --_t: var(--ins-tone); }
.ref-ins-pill::after { content: ""; inline-size: 0.75rem; block-size: 2px; border-radius: 1px; background-color: currentColor; }
.ref-ins-pill[data-emphasis="high"] { background-color: var(--_t); color: var(--ins-plate); }
.ref-ins-pill[data-emphasis="medium"] { background-color: color-mix(in srgb, var(--_t) 22%, transparent); }
.ref-ins-pill[data-emphasis="low"] { border: 1px solid color-mix(in srgb, var(--_t) 45%, transparent); }
.ref-ins-pill[data-emphasis="auto"] { border: 1px dashed var(--_t); }

/* Icons: a field showing the chosen one, opening a grid of them. None
   is a crossed-out circle. */
.ref-ins-picker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  block-size: var(--ins-h);
  margin: 0;
  padding: 0 1.5rem 0 0.5rem;
  border: 0;
  border-radius: var(--ins-r);
  background-color: var(--ins-field);
  box-shadow: var(--ins-sunken);
  color: var(--ins-fg);
  font: inherit;
  text-align: start;
  cursor: pointer;
  --canon-icon-size: 1rem;
  transition: background-color 0.12s, box-shadow 0.12s;
}
.ref-ins-picker:hover { background-color: var(--ins-field-hover); }
.ref-ins-picker:focus-visible { outline: none; box-shadow: var(--ins-sunken), 0 0 0 1.5px var(--ins-focus); }
.ref-ins-picker:has(+ :popover-open) { box-shadow: var(--ins-sunken), 0 0 0 1.5px var(--ins-focus); }
.ref-ins-picker::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0.5rem;
  inline-size: 0.75rem;
  background-color: var(--ins-muted);
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center / contain no-repeat;
}
.ref-ins-picked-icon { flex: none; color: var(--ins-fg); }
.ref-ins-picked-icon.ref-ins-none { color: var(--ins-muted); }
.ref-ins-picked-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* The popover floats over the page: the panel's surface, raised. */
.ref-ins-pop {
  position: fixed;
  inset: auto;
  inline-size: 14rem;
  box-sizing: border-box;
  margin: 0;
  padding: 0.375rem;
  border: 0;
  border-radius: calc(var(--ins-r) + 0.375rem);
  background-color: var(--ins-panel);
  color: var(--ins-fg);
  box-shadow: 0 0 0 1px var(--ins-line), 0 12px 32px light-dark(rgb(0 0 0 / 0.14), rgb(0 0 0 / 0.6)), 0 2px 6px light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.4));
  font-size: var(--ref-text-xs);
  line-height: var(--ref-text-xs-lh);
}
.ref-ins-none {
  inline-size: 1rem;
  block-size: 1rem;
  background-color: currentColor;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='m5.7 5.7 12.6 12.6'/></svg>") center / contain no-repeat;
}

/* Scale: a slider with a dot at each stop and the stop's name over it;
   the current name in the text color. An Auto stop (the theme's
   choice, when it isn't one of the others) is a ring. The track is
   recessed, the thumb a plate. */
.ref-ins-scale {
  --thumb: 0.875rem;
  position: relative;
  display: grid;
  grid-template-rows: 1rem 1.25rem;
  padding-inline: 0.125rem;
}
/* Beside its label: the label level with the track, under the names. */
.ref-ins-row[data-widget="scale"]:not([data-stack]) { align-items: start; }
.ref-ins-row[data-widget="scale"]:not([data-stack]) > .ref-ins-label { margin-block-start: 1rem; line-height: 1.25rem; }
.ref-ins-scale > input {
  grid-row: 2;
  inline-size: 100%;
  block-size: 1.25rem;
  margin: 0;
  appearance: none;
  background: none;
  cursor: pointer;
}
.ref-ins-scale > input::-webkit-slider-runnable-track { block-size: 4px; border-radius: 2px; background-color: var(--ins-field); box-shadow: var(--ins-sunken); }
.ref-ins-scale > input::-moz-range-track { block-size: 4px; border-radius: 2px; background-color: var(--ins-field); box-shadow: var(--ins-sunken); }
.ref-ins-scale > input::-webkit-slider-thumb {
  appearance: none;
  inline-size: var(--thumb);
  block-size: var(--thumb);
  margin-block-start: calc(2px - var(--thumb) / 2);
  border-radius: 50%;
  background-color: light-dark(#ffffff, #d4d4d8);
  box-shadow: var(--ins-raised);
  transition: scale 0.12s;
}
.ref-ins-scale > input::-moz-range-thumb {
  box-sizing: border-box;
  inline-size: var(--thumb);
  block-size: var(--thumb);
  border: 0;
  border-radius: 50%;
  background-color: light-dark(#ffffff, #d4d4d8);
  box-shadow: var(--ins-raised);
}
.ref-ins-scale > input:hover::-webkit-slider-thumb { scale: 1.12; }
.ref-ins-scale > input:focus-visible { outline: none; }
.ref-ins-scale > input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--ins-focus), var(--ins-raised); }
.ref-ins-scale > input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--ins-focus), var(--ins-raised); }
.ref-ins-ticks { position: absolute; inset: 0 0.125rem; pointer-events: none; }
.ref-ins-tick {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--i) / (var(--stops) - 1));
  translate: -50% 0;
  block-size: 1rem;
  padding: 0 0.125rem;
  border: 0;
  border-radius: 0.25rem;
  background: none;
  color: var(--ins-muted);
  font: inherit;
  font-size: var(--ref-text-xs);
  line-height: var(--ref-text-xs-lh);
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  transition: color 0.12s;
}
.ref-ins-tick:hover { color: var(--ins-fg); }
.ref-ins-tick[data-current] { color: var(--ins-fg); font-weight: 600; }
.ref-ins-tick::before {
  content: "";
  position: absolute;
  inset-block-start: calc(1.625rem - 2px);
  inset-inline-start: 50%;
  inline-size: 4px;
  block-size: 4px;
  margin-inline-start: -2px;
  border-radius: 50%;
  background-color: var(--ins-faint);
  pointer-events: none;
}
.ref-ins-tick[data-auto]::before { box-sizing: border-box; border: 1px solid var(--ins-faint); background: var(--ins-panel); inline-size: 6px; block-size: 6px; margin-inline-start: -3px; inset-block-start: calc(1.625rem - 3px); }
.ref-ins-tick[data-current]::before { visibility: hidden; }

/* Number: − and + inside the field's end; the label scrubs. */
.ref-ins-number { position: relative; display: block; min-inline-size: 0; }
.ref-ins-number > input { padding-inline-end: 3rem; appearance: textfield; }
.ref-ins-number > input::-webkit-inner-spin-button,
.ref-ins-number > input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.ref-ins-number > button {
  position: absolute;
  inset-block: 0.25rem;
  display: grid;
  place-items: center;
  inline-size: 1.25rem;
  padding: 0;
  border: 0;
  border-radius: calc(var(--ins-r) - 0.25rem);
  background: none;
  color: var(--ins-muted);
  cursor: pointer;
  --canon-icon-size: 0.75rem;
}
.ref-ins-number > button[data-nudge="-1"] { inset-inline-end: 1.5rem; }
.ref-ins-number > button[data-nudge="1"] { inset-inline-end: 0.25rem; }
.ref-ins-number > button:hover { background-color: var(--ins-plate); box-shadow: var(--ins-raised); color: var(--ins-fg); }
.ref-ins-row[data-widget="number"] > .ref-ins-label { cursor: ew-resize; touch-action: none; user-select: none; }
.ref-ins-row[data-scrubbing] > .ref-ins-label { color: var(--ins-focus); }

@media (prefers-reduced-motion: reduce) {
  .ref-ins-seg::before, .ref-ins-option, .ref-ins-switch, .ref-ins-switch::before { transition: none; }
}
.ref-pg-output { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-inline-size: 0; }
.ref-pg-preview { border: 1px solid var(--ref-line); border-radius: 0.75rem; overflow: hidden; }
.ref-pg-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: 3rem;
  box-sizing: border-box;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border-block-end: 1px solid var(--ref-line);
  color: var(--ref-muted);
  font-size: var(--ref-text-sm);
  line-height: var(--ref-text-sm-lh);
  font-weight: 500;
}
.ref-pg-bar > :first-child { margin-inline-end: auto; }
.ref-pg-edited { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--ref-muted); }
.ref-pg-edited[hidden] { display: none; }
/* The HTML pane: the code on zinc-50 (dark halfway from zinc-950 to
   zinc-900), 13px on a 1.6 line, 16px in. */
.ref-pg-code {
  border: 1px solid var(--ref-line);
  border-radius: 0.75rem;
  overflow: hidden;
}
.ref-pg-canvas {
  display: grid;
  place-items: center;
  overflow-x: auto;
  min-block-size: 18rem;
  background: var(--ref-bg);
}
/* The preview's width (ref.js): a ruler on top, its ticks every
   8px and 40px from the middle, the frame's span tinted, the width as a
   button in the middle that opens the presets. The frame fills the canvas
   (Full) or takes --ref-pg-w; a side on each end drags it from its middle. */
.ref-pg-ruler {
  --ref-pg-tick: color-mix(in srgb, currentColor 22%, transparent);
  position: relative;
  display: grid;
  place-items: center;
  block-size: 1.5rem;
  border-block-end: 1px solid var(--ref-line);
  color: var(--ref-muted);
  background:
    linear-gradient(to right, var(--ref-pg-tick) 1px, transparent 1px) calc(50% + 20px) 100% / 40px 0.5rem repeat-x,
    linear-gradient(to right, var(--ref-pg-tick) 1px, transparent 1px) calc(50% + 4px) 100% / 8px 0.25rem repeat-x;
}
.ref-pg-ruler::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  inline-size: var(--ref-pg-w, 100%);
  max-inline-size: 100%;
  translate: -50% 0;
  background-color: color-mix(in srgb, currentColor 6%, transparent);
  pointer-events: none;
}
.ref-pg-width {
  position: relative;
  padding: 0 0.375rem;
  border: 0;
  border-radius: 0.25rem;
  background-color: var(--ref-bg);
  color: var(--ref-fg);
  font: 500 var(--ref-text-xs)/var(--ref-text-xs-lh) "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.ref-pg-width:is(:hover, [aria-expanded="true"]) { background-color: var(--ref-hover); }
.ref-pg-width:focus-visible { outline: 2px solid light-dark(#2563eb, #60a5fa); outline-offset: 1px; }
.ref-pg-preset-size { margin-inline-start: auto; padding-inline-start: 1.5rem; color: var(--ref-muted); font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--ref-text-xs); line-height: var(--ref-text-xs-lh); font-variant-numeric: tabular-nums; }
.canon-menu-item[aria-disabled="true"] > .ref-pg-preset-size { color: inherit; }
/* The presets open centered under the width. */
#ref-pg-presets { position-area: self-block-end span-all; margin-inline: 0; }
.ref-pg-frame {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr) 1rem;
  column-gap: 0.5rem; /* the content 8px in from each side */
  align-items: center;
  justify-items: center;
  justify-self: stretch;
  align-self: stretch;
}
.ref-pg-canvas:not([data-width="full"]) > .ref-pg-frame {
  grid-template-columns: 1rem var(--ref-pg-w) 1rem;
  justify-self: center;
}
/* Narrower than the canvas, what lies beyond the frame is hatched: thin
   diagonals, faint, the frame and its sides left clear. The lines are an
   8px tile (drawn corner to corner), so each lands on the pixels the same
   way: a gradient's lines, 6px apart on the slant, fall between pixels
   differently and band. */
.ref-pg-canvas { position: relative; }
.ref-pg-canvas:not([data-width="full"])::before {
  --ref-pg-clear: calc(var(--ref-pg-w) / 2 + 1.5rem);
  content: "";
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, currentColor 5%, transparent);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-1 1l2-2M0 8l8-8M7 9l2-2' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E"),
    linear-gradient(to right, #000 calc(50% - var(--ref-pg-clear)), transparent 0 calc(50% + var(--ref-pg-clear)), #000 0);
  mask-size: 8px 8px, 100% 100%;
  mask-repeat: repeat, no-repeat;
  mask-composite: intersect;
  pointer-events: none;
}
.ref-pg-frame { position: relative; }
.ref-pg-side {
  align-self: stretch;
  justify-self: stretch;
  display: grid;
  place-items: center;
  background-color: color-mix(in srgb, currentColor 4%, transparent);
  color: var(--ref-muted);
  cursor: ew-resize;
  touch-action: none;
  outline: none;
  transition: background-color 0.12s, color 0.12s;
}
.ref-pg-side::before {
  content: "";
  inline-size: 1rem;
  block-size: 1rem;
  background-color: currentColor;
  mask: var(--canon-theme-icon-chevron-right) center / contain no-repeat;
}
.ref-pg-side[data-side="start"]::before { scale: -1 1; }
@media (hover: hover) {
  .ref-pg-side:hover { background-color: color-mix(in srgb, currentColor 9%, transparent); color: var(--ref-fg); }
}
/* Focused from the keyboard, a side takes its dragging look. */
:is(.ref-pg-frame[data-dragging] > .ref-pg-side, .ref-pg-side:focus-visible) { background-color: color-mix(in srgb, currentColor 9%, transparent); color: var(--ref-fg); }
@media (prefers-reduced-motion: reduce) {
  .ref-pg-side { transition: none; }
}
/* The preview is a page of its own (ref.js), filling the frame. */
.ref-pg-view { display: block; justify-self: stretch; align-self: stretch; inline-size: 100%; block-size: 100%; border: 0; }
.ref-pg-page { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; box-sizing: border-box; min-block-size: 100dvh; margin: 0; }
.ref-pg-stage { max-inline-size: 100%; display: grid; justify-items: center; margin-block: 2.5rem; }
.ref-pg-stage > .canon-field { inline-size: 100%; justify-self: stretch; }
/* A form is a size container: it has no width of its own to center. */
.ref-pg-stage:has(> .canon-form) { inline-size: 100%; }
.ref-pg-stage > .canon-form { inline-size: 100%; justify-self: center; }
/* A line has no content to size it: it fills the stage (the Width control). */
.ref-pg-stage > .canon-separator:not([aria-orientation="vertical"]) { justify-self: stretch; }
/* The HTML is editable: a textarea over its highlighted copy, both set
   alike so the caret sits on the colored text. Grows with its content. */
.ref-pg-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-ligatures: none;
  font-feature-settings: normal;
  font-size: var(--ref-code-md);
  line-height: var(--ref-code-md-lh);
  tab-size: 2;
  background-color: light-dark(#fafafa, color-mix(in srgb, #18181b 60%, #09090b)); /* zinc-50 / zinc-900–950 */
}
.ref-pg-editor > .ref-pg-highlight { --twp-text: light-dark(#27272a, #e4e4e7); } /* zinc-800 / zinc-200 */
.ref-pg-editor > * {
  grid-area: 1 / 1;
  box-sizing: border-box;
  min-inline-size: 0;
  margin: 0;
  padding: 1rem;
  border: 0;
  font: inherit;
  letter-spacing: 0;
  white-space: pre;
  overflow-wrap: normal;
}
.ref-pg-highlight { overflow: hidden; pointer-events: none; }
/* Wrapped (the pane's toggle): both layers wrap alike, with the same room
   (a scrollbar's gutter kept in both). */
.ref-pg-editor > * { scrollbar-gutter: stable; }
.ref-pg-editor[data-wrap] > * { white-space: pre-wrap; overflow-wrap: anywhere; }
.ref-pg-highlight pre { white-space: inherit; }
.ref-pg-highlight pre, .ref-pg-highlight code { margin: 0; padding: 0; font: inherit; background: none; }
.ref-pg-source {
  display: block;
  inline-size: 100%;
  min-block-size: 6rem;
  field-sizing: content;
  background: transparent;
  color: inherit;
  caret-color: CanvasText;
  overflow: auto;
  resize: vertical;
}
.ref-pg-editor[data-highlighted] > .ref-pg-source { color: transparent; }
.ref-pg-editor[data-highlighted] > .ref-pg-source::selection { color: transparent; background: color-mix(in srgb, Highlight 35%, transparent); }
/* Code in the notes: the editor's typeface, a touch smaller than the text around it. */
code.ref-code {
  padding: 0 0.25rem;
  border-radius: 0.125rem;
  background-color: light-dark(#f4f4f5, #3f3f46);       /* zinc-100 / zinc-700 */
  --twp-text: light-dark(#3f3f46, #f4f4f5);             /* zinc-700 / zinc-100 */
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875em;
  font-variant-ligatures: none;
  font-feature-settings: normal;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* In a heading the chip grows with it. */
:is(h1, h2, h3) > code.ref-code { padding: 0.0625em 0.3em; border-radius: 0.2em; font-size: 0.8em; }
/* Code that is a link: the link's color, no token colors. */
a code.ref-code { background-color: light-dark(#e0f2fe, #082f49); --twp-text: light-dark(#0369a1, #38bdf8); } /* sky-100 / sky-950, sky-700 / sky-400 */
a code.ref-code .tok { color: inherit; }
.ref-pg-source:focus-visible { outline: 2px solid Highlight; outline-offset: -2px; }

/* Code colors (the playground's HTML and code in the notes): the palette around Canon's zinc and blue.
   Tags blue, attributes violet, values emerald, the markup around them zinc. */
.ref-code {
  --twp-text: light-dark(#3f3f46, #d4d4d8);             /* zinc-700 / zinc-300 */
  --twp-punctuation: light-dark(#71717a, #a1a1aa);      /* zinc-500 / zinc-400 */
  --twp-comment: light-dark(#71717a, #a1a1aa);          /* zinc-500 / zinc-400 */
  --twp-tag_name: light-dark(#1d4ed8, #60a5fa);         /* blue-700 / blue-400 */
  --twp-attr_name: light-dark(#6d28d9, #a78bfa);        /* violet-700 / violet-400 */
  --twp-string: light-dark(#047857, #34d399);           /* emerald-700 / emerald-400 */
  --twp-entity: light-dark(#b45309, #fbbf24);           /* amber-700 / amber-400 */
  --twp-keyword: light-dark(#be123c, #fb7185);          /* rose-700 / rose-400 */
  --twp-number: light-dark(#b45309, #fbbf24);           /* amber-700 / amber-400 */
  --twp-property: light-dark(#0369a1, #7dd3fc);         /* sky-700 / sky-300 */
  --twp-selector: light-dark(#1d4ed8, #60a5fa);         /* blue-700 / blue-400 */
  --twp-css_variable: light-dark(#6d28d9, #a78bfa);     /* violet-700 / violet-400 */
  --twp-function: light-dark(#0369a1, #7dd3fc);         /* sky-700 / sky-300 */
  color: var(--twp-text);
}
.ref-code :is(.punctuation, .operator, .doctype) { color: var(--twp-punctuation); }
.ref-code .comment { color: var(--twp-comment); font-style: italic; }
.ref-code .tag_name { color: var(--twp-tag_name); }
.ref-code .attr_name { color: var(--twp-attr_name); }
.ref-code :is(.string, .template) { color: var(--twp-string); }
.ref-code .entity { color: var(--twp-entity); }
.ref-code :is(.keyword, .boolean) { color: var(--twp-keyword); }
.ref-code :is(.number, .unit) { color: var(--twp-number); }
.ref-code .property { color: var(--twp-property); }
.ref-code :is(.selector, .selector_class, .selector_id, .selector_pseudo) { color: var(--twp-selector); }
.ref-code .css_variable { color: var(--twp-css_variable); }
.ref-code .function { color: var(--twp-function); }


/* Tooltip page: open tooltips around a dashed stand-in for the trigger. */
.ref-tip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); column-gap: 0.5rem; margin-block: 0.75rem; }
.ref-tip-grid-wide { grid-template-columns: 1fr; padding-block-end: 6rem; }
.ref-tip-cell { display: grid; grid-template-rows: 7.5rem auto; place-items: center; margin-block-end: 1rem; }
.ref-anchor { display: block; inline-size: 1rem; block-size: 1rem; box-sizing: border-box; border: 1px dashed GrayText; }
.ref-tip-caption { color: GrayText; font-size: var(--ref-text-xs); line-height: var(--ref-text-xs-lh); text-align: center; }
/* A two-word placement: the side over the alignment, the chip as wide as the longer one. */
.ref-tip-caption:has(> span) { display: inline-block; inline-size: min-content; }
.ref-tip-caption > span { white-space: nowrap; }
.ref-rail { display: inline-flex; flex-direction: column; gap: 0.25rem; margin-block: 0.75rem; }

/* Kbd page: a gray panel, to show a kbd on a surface close to its own color. */
.ref-surface { padding: 0.75rem 1rem; border-radius: 0.5rem; background: color-mix(in srgb, currentColor 5%, Canvas); }
.ref-narrow { max-inline-size: 12rem; }

/* Avatar page */
.ref-avatar-row { gap: 0.5rem; }
.ref-person { display: inline-flex; align-items: center; gap: 0.5rem; }
.ref-table { border-collapse: collapse; }
.ref-table th { padding-inline-end: 1.5rem; font-weight: 400; text-align: start; white-space: nowrap; }
.ref-table td { padding: 0.25rem 1.5rem 0.25rem 0; }
.ref-tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; padding: 0; list-style: none; }
.ref-surface-dark { color-scheme: dark; background: Canvas; color: CanvasText; }
.ref-label-grid { display: grid; grid-template-columns: repeat(auto-fill, 12.5rem); gap: 1.5rem 2rem; margin-block: 0.75rem; }
.ref-label-tip-grid { padding-block-end: 2.5rem; }
.ref-input-grid { display: grid; grid-template-columns: repeat(auto-fill, 17.5rem); gap: 1rem 2rem; margin-block: 0.75rem; align-items: center; }
.ref-narrow > .canon-control + .canon-control { margin-block-start: 0.75rem; }
.ref-narrow > .canon-combobox + .canon-combobox { margin-block-start: 0.75rem; }
.ref-pg-stage:has(> .canon-textarea) { justify-items: stretch; inline-size: min(100%, 17.5rem); }
.ref-input-grid:has(> .canon-textarea) { align-items: start; }
.ref-combobox-wide { max-inline-size: 40rem; margin-block: 0.75rem; }
.ref-password-stack { display: grid; gap: 0.5rem; align-content: start; }
.ref-pg-stage:has(> .canon-password) { display: grid; gap: 0.5rem; justify-items: stretch; inline-size: min(100%, 17.5rem); }
.ref-pg-stage:has(> .canon-combobox) { justify-items: stretch; inline-size: min(100%, 17.5rem); }
/* A number with its buttons at the end fills its place, like a text input. */
.ref-pg-stage:has(.canon-number > input:first-child ~ .canon-button) { justify-items: stretch; inline-size: min(100%, 17.5rem); }
.ref-password-form { inline-size: min(100%, 17.5rem); justify-items: stretch; }
.ref-password-form > .canon-button { justify-self: start; margin-block-start: 0.5rem; }
.ref-resizable { resize: horizontal; overflow: hidden; inline-size: 36rem; max-inline-size: 100%; min-inline-size: 8rem; margin-block: 0.75rem; padding: 0.25rem; border: 1px dashed color-mix(in srgb, currentColor 25%, transparent); }
.ref-load-demo { max-inline-size: 24rem; }
.ref-load-list { margin: 0 0 1rem; padding: 0; list-style: none; }
.ref-load-list > li { padding-block: 0.5rem; border-block-end: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.ref-section > .canon-pagination { margin-block: 0.75rem; }
.ref-section > .canon-table, .ref-resizable > .canon-table { margin-block: 0.75rem; }
.ref-resizable-narrow { inline-size: 24rem; }
.ref-resizable-wide { inline-size: 40rem; }
.ref-section > .canon-data-table, .ref-resizable > .canon-data-table { margin-block: 0.75rem; }
.ref-skeleton-stack { display: grid; gap: 0.75rem; max-inline-size: 24rem; margin-block: 0.75rem; }
.ref-pg-stage:has(> .canon-data-table) { inline-size: 100%; justify-self: stretch; }
.ref-pg-stage:has(> .canon-description-list) { inline-size: min(100%, 40rem); justify-self: center; }
.ref-pg-stage:has(> :is(.canon-stack, .canon-cluster, .canon-grid)) { inline-size: 100%; justify-self: stretch; justify-items: stretch; }
.ref-pg-stage:has(> .canon-banner) { inline-size: 100%; justify-items: stretch; }
.ref-pg-stage:has(> .canon-alert) { inline-size: min(100%, 40rem); justify-items: stretch; }
.ref-pg-stage:has(> .canon-accordion) { inline-size: min(100%, 32rem); justify-items: stretch; }
.ref-jobs { margin-block: 1rem 0; padding-inline-start: 1.25rem; line-height: 1.75rem; }
.ref-sidebar { box-sizing: border-box; inline-size: 16rem; max-inline-size: 100%; padding: 0.75rem; border: 1px dashed color-mix(in srgb, currentColor 25%, transparent); border-radius: 0.75rem; }
.ref-sidebar-rail { inline-size: auto; display: inline-block; }
/* App Shell and Sidebar demos: a window's height, scrolling inside it. */
.ref-shell-frame { --canon-app-shell-height: 36rem; box-sizing: border-box; block-size: 36rem; max-inline-size: 100%; overflow: auto; border: 1px dashed color-mix(in srgb, currentColor 25%, transparent); border-radius: 0.75rem; }
.ref-shell-frame:has(> .canon-sidebar) { display: flex; inline-size: fit-content; }
.ref-shell-frame > .canon-sidebar { block-size: 100%; }
.ref-shell-frame-short { --canon-app-shell-height: 28rem; block-size: 28rem; }
/* Stand-ins for a page's content. */
.ref-shell-content { --canon-page-inset: 1.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem; padding: 1.5rem; }
.ref-shell-content > .canon-page-header { grid-column: 1 / -1; }
.ref-page-header-frame { box-sizing: border-box; padding-inline: 1.5rem; border: 1px dashed color-mix(in srgb, currentColor 25%, transparent); border-radius: 0.75rem; }
.ref-page-header-frame + .ref-page-header-frame { margin-block-start: 1rem; }
.ref-tabs-demo { box-sizing: border-box; max-inline-size: 100%; }
.ref-card-demo { max-inline-size: 36rem; }
.ref-card-demo + .ref-card-demo { margin-block-start: 1rem; }
.ref-section-demo { padding: 1.5rem; border: 1px dashed color-mix(in srgb, currentColor 25%, transparent); border-radius: 0.75rem; }
.ref-section-stack { display: grid; gap: 2rem; }
.ref-toast-static { display: grid; gap: 0.5rem; max-inline-size: 24rem; }
.ref-toast-static + .ref-toast-static { margin-block-start: 1rem; }
.ref-shell-form { display: block; }
.ref-form-stack { display: grid; gap: 1.25rem; }
.ref-form-stack > :not(.canon-save-bar) { max-inline-size: 32rem; }
.ref-form-stack > .canon-save-bar { margin-block-start: 0.5rem; }
.ref-pattern-frame { --canon-app-shell-height: 44rem; block-size: 44rem; }
.ref-pattern-main { display: block; }
.ref-pattern-main .canon-page-header { margin-block-end: 1rem; }
.ref-pattern-main .canon-page-header h1:focus { outline: none; }
.ref-pattern-main > .ref-view[hidden] { display: none; }
.ref-split-frame { block-size: 22rem; border: 1px dashed color-mix(in srgb, currentColor 25%, transparent); border-radius: 0.75rem; overflow: hidden; }
.ref-split-frame > .canon-split-pane { block-size: 100%; }
.ref-pane { box-sizing: border-box; padding: 1rem; }
.ref-pane > p { margin: 0; }
.ref-split-code { margin: 0; font: var(--ref-code-sm)/var(--ref-code-sm-lh) var(--canon-theme-font-mono, monospace); white-space: pre; }
.ref-split-console { margin: 0; font: var(--ref-code-sm)/var(--ref-code-sm-lh) var(--canon-theme-font-mono, monospace); }
.ref-pg-stage:has(> .canon-split-pane) { inline-size: 100%; block-size: 22rem; justify-items: stretch; }
.ref-pg-stage > .canon-split-pane { block-size: 100%; }
.ref-md-main { display: grid; min-block-size: 0; }
.ref-md-wrap { container: ref-md / inline-size; display: grid; min-block-size: 0; }
.ref-md-wrap > .canon-split-pane { block-size: 100%; }
.ref-md-list { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; }
.ref-md-list > .canon-page-header { padding-block-start: 0.25rem; }
.ref-md-detail { padding: 1rem 1.5rem; }
.ref-md-detail > .canon-empty-state { block-size: 100%; }
.ref-md-detail .canon-page-header { margin-block-end: 1rem; }
.ref-md-detail h2:focus { outline: none; }
/* The demo hides with hidden; components that set their own display (an Empty State, a list row) still go. */
.ref-md-wrap [hidden] { display: none !important; }
.ref-md-back { display: none; }
@container ref-md (width < 40rem) {
  .ref-md-wrap > .canon-split-pane { grid-template-columns: minmax(0, 1fr); }
  .ref-md-wrap > .canon-split-pane > .canon-split-pane-handle { display: none; }
  .ref-md-wrap[data-open] .ref-md-list,
  .ref-md-wrap:not([data-open]) .ref-md-detail { display: none; }
  .ref-md-back { display: inline-flex; }
}
.ref-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.ref-pg-stage:has(> :is(.canon-card, .canon-section)) { justify-items: stretch; }
.ref-tabs-demo + .ref-tabs-demo { margin-block-start: 1rem; }
.ref-tabs-demo > .canon-page-header { margin-block-end: 0.5rem; }
.ref-tabs-demo .canon-tabs-panel > p { margin: 0; }
.ref-pg-stage:has(> :is(.canon-tabs, .canon-tabs-list)) { inline-size: 100%; justify-items: stretch; }
.ref-pg-stage:has(> .canon-page-header) { inline-size: 100%; justify-items: stretch; }
.ref-shell-content > h1 { grid-column: 1 / -1; margin: 0; font-size: var(--ref-text-lg); line-height: var(--ref-text-lg-lh); }
.ref-shell-box { min-block-size: 9rem; border: 1px dashed color-mix(in srgb, currentColor 25%, transparent); border-radius: 0.75rem; }
.ref-shell-box-wide { grid-column: 1 / -1; min-block-size: 16rem; }
.ref-resize { resize: horizontal; min-inline-size: 10rem; max-inline-size: 100%; }
.ref-top-bar-frame { border: 1px dashed color-mix(in srgb, currentColor 25%, transparent); border-radius: 0.75rem; overflow: hidden; }
.ref-pg-stage:has(> .canon-nav-list:not([data-display="icon"])) { inline-size: min(100%, 16rem); justify-items: stretch; }
.ref-pg-stage:has(> .canon-sidebar) > .canon-sidebar { block-size: 36rem; }
.ref-pg-stage:has(> .canon-top-bar) { inline-size: 100%; justify-items: stretch; }
/* A frame the shell scrolls in, as a window would: the sidebar and the bar stick, the full height. */
.ref-pg-stage:has(> .canon-app-shell) { inline-size: 100%; justify-items: stretch; block-size: 100dvh; overflow: auto; }
.ref-pg-stage > .canon-app-shell { align-self: start; } /* as tall as its page, so the sidebar and the bar have room to stick */
.ref-pg-page:has(> .ref-pg-stage > .canon-app-shell) { place-items: stretch; }
.ref-pg-stage:has(> .canon-app-shell) { margin-block: 0; }
.ref-pg-stage:has(> .canon-code-block) { inline-size: min(100%, 36rem); justify-items: stretch; }
.ref-code-blocks { display: grid; gap: 1.5rem; max-inline-size: 40rem; margin-block: 0.75rem; }

/* Alert demos: a stack at a readable width; the form's fields under its summary. */
.ref-alerts { display: grid; gap: 1rem; max-inline-size: 40rem; }
.ref-alert-form { display: grid; gap: 1.25rem; }

/* Accordion demos: a stack at a readable width; fields under each other. */
.ref-accordions { display: grid; gap: 2rem; max-inline-size: 40rem; }
.ref-accordion-form { display: grid; gap: 1.25rem; }

/* Banner demos: each strip across its frame; several in a frame, 12px apart. */
.ref-banners { display: grid; }
.ref-banners + .ref-banners { margin-block-start: 0.75rem; }

/* Spinner demos: text with a spinner, a panel waiting, the delay to try. */
.ref-spinner-text { display: inline-flex; align-items: center; gap: 0.5em; }
.ref-spinner-demos { display: grid; gap: 2rem; max-inline-size: 28rem; }
.ref-spinner-panel { display: grid; place-items: center; min-block-size: 10rem; }
.ref-spinner-try > summary { cursor: pointer; margin-block-end: 0.75rem; }

/* Settings Page pattern: the page's header, then the settings' Nav List
   beside the open part; above it on a narrow page. */
.ref-settings-main { --canon-page-inset: 1.25rem; container: ref-settings / inline-size; display: grid; align-content: start; gap: 1.5rem; padding: 1.25rem; }
.ref-settings { display: grid; grid-template-columns: 9rem minmax(0, 1fr); align-items: start; gap: 1.25rem; }
.ref-settings-nav { position: sticky; inset-block-start: calc(var(--canon-sticky-offset, 0px) + 1.5rem); }
.ref-settings > .ref-view[hidden] { display: none; }
.ref-settings .canon-section-header { margin-block-end: 1.5rem; }
.ref-settings h2:focus { outline: none; }
.ref-settings-danger { margin-block-start: 2.5rem; }
/* Without room for both, the settings' Nav List goes above the part, its
   links in a row, so the form keeps its width (and its aside layout). */
@container ref-settings (width < 56rem) {
  .ref-settings { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .ref-settings-nav { position: static; }
  .ref-settings-nav > ul { display: flex; flex-wrap: wrap; gap: 0.25rem; }
}

/* Sign-in Page pattern: a page of its own (the page's color), the app's
   mark over one Card, centered; the demo's starting points above it. */
.ref-auth-starts { align-items: center; margin-block-end: 0.75rem; }
.ref-auth-starts-label { color: var(--ref-muted); font-size: var(--ref-text-sm); line-height: var(--ref-text-sm-lh); }
.ref-auth-frame { box-sizing: border-box; block-size: 46rem; overflow: auto; padding: 2.5rem 1rem; border: 1px solid var(--ref-line); border-radius: 0.75rem; background-color: light-dark(#fafafa, #09090b); }
.ref-auth { display: grid; gap: 1.5rem; inline-size: min(100%, 24rem); margin-inline: auto; }
.ref-auth-brand { display: flex; align-items: center; justify-content: center; gap: 0.625rem; margin: 0; color: var(--ref-fg); font-weight: 600; }
.ref-auth-brand svg { inline-size: 2rem; block-size: 2rem; }
.ref-auth > .ref-view[hidden] { display: none; }
.ref-auth h1:focus { outline: none; }
.ref-auth-body, .ref-auth-form { display: grid; gap: 1.25rem; }
.ref-auth-submit { inline-size: 100%; }
.ref-auth-providers { display: grid; gap: 0.75rem; }
.ref-auth-providers > .canon-button { inline-size: 100%; }
.ref-auth-footer { display: grid; gap: 0.5rem; justify-items: center; color: var(--ref-muted); font-size: var(--ref-text-sm); line-height: var(--ref-text-sm-lh); }
.ref-auth-footer > p { margin: 0; }

/* Providers' marks in their Buttons: each file as it is, at its own size,
   centered in an icon's 20px place, in the Button's text color (so it
   follows light and dark). */
.ref-provider-logo { flex: none; inline-size: 1.25rem; block-size: 1.25rem; background-color: currentColor; }
.ref-provider-logo[data-logo="google"] { mask: url("assets/logo-google.svg") center / 17.0103px 17.3582px no-repeat; }
.ref-provider-logo[data-logo="github"] { mask: url("assets/logo-github.svg") center / 17.5px 17.4991px no-repeat; }

/* Build page: the choices in columns, the summary beside the buttons,
   each file's size before its download. */
.ref-build-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-block: 1rem;
}
.ref-build-summary {
  margin: 0;
  margin-inline-start: 0.5rem;
  color: var(--ref-muted);
  font-size: var(--ref-text-sm);
  line-height: var(--ref-text-sm-lh);
}
/* The bundles: a line each, in its own frame; Core first, tinted. */
.ref-build-addons {
  display: grid;
  gap: 0.5rem;
  margin-block: 1rem 2.5rem;
}
.ref-build-addon {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--ref-line);
  border-radius: 0.75rem;
}
/* Loading: each line drawn as a skeleton of itself, as tall as it will
   be (checkbox, name and what it's for; count and size), so nothing
   moves when the bundles come. */
.ref-build-skeleton-choice {
  --_name: var(--canon-theme-label-line-height, 1.25rem);
  --_hint: var(--canon-theme-label-description-line-height, 1rem);
  display: flex;
  flex: 1;
  align-items: start;
  gap: 0.75rem;
  min-inline-size: 0;
}
.ref-build-skeleton-choice > [data-shape="square"] {
  flex: none;
  margin-block: calc((var(--_name) - var(--canon-icon-size)) / 2);
}
.ref-build-skeleton-lines {
  display: grid;
  flex: 1;
  gap: var(--canon-theme-label-description-gap, 0.375rem);
  min-inline-size: 0;
}
.ref-build-skeleton-lines > :first-child {
  margin-block: calc((var(--_name) - 0.5rem) / 2);
}
.ref-build-skeleton-lines > :last-child {
  margin-block: calc((var(--_hint) - 0.5rem) / 2);
}
.ref-build-end > .canon-skeleton,
.ref-build-summary > .canon-skeleton {
  margin-block: calc((var(--ref-text-sm-lh) - 0.5rem) / 2);
}
.ref-build-addon-core {
  background-color: light-dark(#fafafa, #111113);
}
/* A bundle's line is one big target: the pointer and a light fill say
   so; chosen, its frame darkens. */
.ref-build-addon:not(.ref-build-addon-core) {
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s;
}
.ref-build-addon:not(.ref-build-addon-core):hover {
  background-color: var(--ref-hover);
}
.ref-build-addon:not(.ref-build-addon-core):has(input:checked) {
  border-color: var(--ref-muted);
}
.ref-build-addon:not(.ref-build-addon-core) .canon-choice-label {
  cursor: pointer;
}
/* Core's checkbox is checked for good: its name stays in the text's color. */
.ref-build-addon-core .canon-choice-label {
  color: var(--ref-fg);
}
.ref-build-end {
  display: flex;
  flex: none;
  align-items: baseline;
  gap: 1.25rem;
  padding-block-start: 0.125rem;
}
/* The count: a quiet underlined word that names the components on hover
   and focus (its Tooltip). */
.ref-build-count {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ref-text);
  font: inherit;
  font-size: var(--ref-text-sm);
  line-height: var(--ref-text-sm-lh);
  text-decoration: underline dashed var(--ref-muted);
  text-underline-offset: 0.25em;
  cursor: help;
}
.ref-build-count:focus-visible {
  border-radius: 0.25rem;
  outline: 2px solid light-dark(#2563eb, #60a5fa);
  outline-offset: 2px;
}
/* The components' Tooltip: a list of names, read from its start. */
.ref-build-addons .canon-tooltip {
  text-align: start;
}
.ref-build-weight {
  min-inline-size: 4.5rem;
  color: var(--ref-muted);
  font-size: var(--ref-text-sm);
  line-height: var(--ref-text-sm-lh);
  font-variant-numeric: tabular-nums;
  text-align: end;
}
@media (width < 40rem) {
  .ref-build-addon {
    flex-direction: column;
  }
  .ref-build-end {
    padding-inline-start: 1.75rem;
  }
}
.ref-build-files dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}
.ref-build-size {
  color: var(--ref-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------- */
/* Playground: a workbench                                                 */
/* ---------------------------------------------------------------------- */
.ref-pg-grip { display: none; }

/* Wide enough, the Playground is the page: its title and the Reference /
   Playground switch in one row, then the preview over the HTML, split by a
   divider that drags, filling the window under the top bar. The
   navigation stays at the start, the controls at the end. */
@media (min-width: 56.0625rem) {
  body[data-view="playground"] .ref-page {
    position: sticky;
    inset-block-start: var(--ref-top);
    align-self: start;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    max-inline-size: none;
    block-size: calc(100dvh - var(--ref-top));
    padding: 0.75rem 1.25rem 1.25rem;
  }
  /* The page's name is in the top bar: its heading stays for screen
     readers only; the intro notes, however many, stay on the Reference. */
  body[data-view="playground"] .ref-page > h1 { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body[data-view="playground"] .ref-page > :not(h1, #ref-panel-playground) { display: none; }
  body[data-view="playground"] #ref-panel-playground { align-self: stretch; min-block-size: 0; }

  /* The view switch in the top bar: at the start of the page's column,
     its tabs the bar's height, the current one underlined at its bottom. */
  .ref-top-page { grid-area: 1 / 2; justify-self: start; align-self: stretch; display: flex; align-items: center; gap: 1.25rem; margin-inline-start: 1.25rem; }
  .ref-top-page > .ref-tabs { align-self: stretch; gap: 1.25rem; margin: 0; border: 0; }
  .ref-top-page > .ref-tabs [role="tab"] { display: flex; align-items: center; margin-block-end: -1px; padding-block: 0; }
  /* The page's name, then a short line, then the switch. */
  .ref-top-title { display: flex; align-items: center; gap: 1.25rem; color: var(--ref-fg); font-size: var(--ref-text-md); line-height: var(--ref-text-md-lh); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
  .ref-top-title::after { content: ""; inline-size: 1px; block-size: 1rem; background-color: var(--ref-line); }
  body[data-view="playground"] .ref-playground { block-size: 100%; margin: 0; }
  body[data-view="playground"] .ref-pg-output {
    block-size: 100%;
    gap: 0;
    grid-template-rows: minmax(0, calc(var(--ref-pg-split, 0.6) * (100% - 0.75rem))) 0.75rem minmax(0, 1fr);
  }
  body[data-view="playground"] :is(.ref-pg-preview, .ref-pg-code) { display: grid; grid-template-rows: auto minmax(0, 1fr); min-block-size: 0; }
  body[data-view="playground"] .ref-pg-canvas { min-block-size: 0; overflow: auto; }
  body[data-view="playground"] .ref-pg-editor { min-block-size: 0; overflow: hidden; }
  body[data-view="playground"] .ref-pg-editor > * { block-size: 100%; }
  body[data-view="playground"] .ref-pg-source { field-sizing: fixed; overflow: auto; resize: none; }
  body[data-view="playground"] .ref-pg-grip {
    display: grid;
    place-items: center;
    cursor: row-resize;
    touch-action: none;
    outline: none;
  }
  body[data-view="playground"] .ref-pg-grip::before {
    content: "";
    inline-size: 2.5rem;
    block-size: 0.25rem;
    border-radius: 999px;
    background-color: var(--ref-line);
    transition: background-color 0.12s, inline-size 0.12s;
  }
  body[data-view="playground"] .ref-pg-grip:is(:hover, [data-dragging])::before { inline-size: 4rem; background-color: var(--ref-muted); }
  body[data-view="playground"] .ref-pg-grip:focus-visible::before { inline-size: 4rem; background-color: light-dark(#2563eb, #60a5fa); }
}
@media (min-width: 56.0625rem) and (prefers-reduced-motion: reduce) {
  body[data-view="playground"] .ref-pg-grip::before { transition: none; }
}
/* Narrow: the window is already a phone's width; the bar may wrap. */
@media (max-width: 56rem) {
  .ref-pg-ruler, .ref-pg-side { display: none; }
  .ref-pg-view { block-size: 28rem; }
  .ref-pg-canvas[data-width] > .ref-pg-frame { grid-template-columns: minmax(0, 1fr); justify-self: stretch; }
  .ref-pg-bar { flex-wrap: wrap; }
}