/* ==========================================================================
   docs.css — layout and styling for the documentation site itself
   --------------------------------------------------------------------------
   This file styles the "frame" around the components: the sidebar, page
   headers, section headings, placeholder boxes, overview cards and the
   foundation swatches. It does NOT style the components themselves —
   that is components.css.

   Every value comes from tokens.css via var(--token-name).

   Contents
   1. Base / reset
   2. Page layout (sidebar + content)
   2b. Top bar
   3. Sidebar navigation
   4. Page header
   5. Doc sections and placeholders
   6. Overview card grid
   7. Foundations (swatches, contrast matrix, type scale, spacing scale)
   8. Small screens
   9. Print (the "Download PDF" button)
   ========================================================================== */

/* 1. Base / reset ========================================================== */

/* Make width/height include padding and border — much easier to reason about */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* When jumping to a #section, stop it hiding under the sticky top bar */
html {
  scroll-padding-top: var(--layout-topbar-height);
}

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}

h1,
h2,
h3 {
  margin: 0;
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

p {
  margin: 0;
}

a {
  color: inherit;
}

code {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
}

/* Visible outline when navigating with the keyboard */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-primary);
  outline-offset: var(--focus-ring-offset);
}

/* "Skip to content" link: hidden until a keyboard user tabs to it */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--layer-skip-link);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-on-primary);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* 1b. Icons ===================================================================== */

/* Icons: until Lucide swaps each <i data-lucide> for its <svg>, the empty
   <i> already takes the icon's space (20px here; places with other sizes
   set them next to their svg rules), so nothing moves when they load. */
/* (:where = no priority, so any rule that sizes an icon by its class wins) */
:where(i[data-lucide]) {
  display: inline-block;
  flex-shrink: 0;
  width: var(--space-5);
  height: var(--space-5);
  vertical-align: middle;
}

/* 2. Page layout =========================================================== */

/* Two columns: fixed-width sidebar on the left, content fills the rest */
.layout {
  display: grid;
  grid-template-columns: var(--layout-sidebar-width) minmax(0, 1fr); /* minmax(0, …) stops wide content (like tables) stretching the page */
  min-height: calc(var(--layout-full-height) - var(--layout-topbar-height));
}

/* The main content: centred in the space next to the sidebar, never wider
   than --layout-content-max-width (plus its padding), so lines of text
   don't get too long on big screens */
.content {
  width: 100%;
  max-width: calc(var(--layout-content-max-width) + 2 * var(--space-12));
  margin: 0 auto;
  /* 64px above the page title (same as the space between sections),
     48px on the sides and bottom */
  padding: var(--space-16) var(--space-12) var(--space-12);
}

/* 2a. Footer ============================================================== */

/* The footer sits below the content, in the same column (the sidebar runs
   down beside both). On narrow screens there's one column, so it's full width. */
.layout {
  grid-template-rows: 1fr auto;
}

.layout > .sidebar {
  grid-row: 1 / span 2;
}

/* pink-900, 32px padding. Every colour here is a token. */
.site-footer {
  grid-column: -2 / -1;
  padding: var(--space-8);
  background: var(--pink-900);
  color: var(--grey-0);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

/* 4 columns on desktop, 2 on tablet, 1 on mobile (see the media queries) */
.site-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
}

/* Column 1: the white logo, "Weave" and "Design System" */
.site-footer-brand {
  display: flex;
  align-items: center;
  align-self: start;
  gap: var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--grey-0);
  text-decoration: none;
}

.site-footer-logo {
  flex-shrink: 0;
  width: var(--space-8);
  height: var(--space-8);
  /* assets/logo-white.svg: left thread white, right thread 60% white */
}

.site-footer-name {
  display: block;
  color: var(--grey-0);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--type-body-line-height);
}

.site-footer-tagline {
  display: block;
  color: var(--pink-200);
}

/* Column headings: pink-200, 13px medium. (There's no 13px token, so it's
   halfway between the 12px and 14px ones.) */
.site-footer .site-footer-heading {
  margin: 0 0 var(--space-3);
  color: var(--pink-200);
  font-size: calc((var(--font-size-xs) + var(--font-size-sm)) / 2);
  font-weight: var(--font-weight-medium);
  line-height: var(--type-caption-line-height);
  letter-spacing: normal;
}

.site-footer-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Links use the Inverse link style (.ds-link--inverse, components.css):
   white and underlined, 2px on hover, with a white focus ring */
.site-footer-brand:hover .site-footer-name {
  text-decoration: underline;
  text-decoration-thickness: var(--border-width-thin);
  text-underline-offset: var(--link-underline-offset);
}

/* Focus: a white ring (the usual pink ring wouldn't show on pink-900) */
.site-footer-brand:focus-visible {
  outline: var(--focus-ring-width) solid var(--grey-0);
  outline-offset: var(--focus-ring-offset);
}

/* Bottom bar: a 1px pink-800 line, credit on the left, copyright on the right */
.site-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border-width-thin) solid var(--pink-800);
}

.site-footer-bottom p {
  margin: 0;
}

.site-footer-copyright {
  color: var(--pink-200);
}

/* Tablet: 2 columns. Mobile: 1. (CSS can't use var() in @media.) */
@media (max-width: 1023px) {
  .site-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .site-footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 2b. Top bar ============================================================= */

/* White bar across the top, built by main.js. Three columns: the outer two
   share the leftover space equally, so the menu sits exactly in the centre. */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--layer-sticky);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--layout-topbar-height);  /* can grow if text is enlarged */
  padding: 0 var(--space-6);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

/* Left: the menu button (under 1024px) and the logo */
.topbar-start {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-self: start;
}

/* Menu button: hidden on wide screens. A 44 × 44px click area with a
   "menu" icon, which turns into an "x" while the drawer is open. */
.topbar-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--size-control-standard);
  height: var(--size-control-standard);
  margin-left: calc(-1 * var(--space-2));   /* line the icon up with the page edge */
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--grey-900);
  cursor: pointer;
}

.topbar-menu-button:hover {
  background: var(--grey-100);
}

.topbar-menu-button:focus-visible {
  outline: var(--focus-ring-width) solid var(--pink-600);
  outline-offset: calc(-1 * var(--focus-ring-width));
}

.topbar-menu-button svg,
.topbar-menu-button i[data-lucide] {
  width: var(--space-6);
  height: var(--space-6);
}

.topbar-menu-icon-close,
.is-menu-open .topbar-menu-icon-open {
  display: none;
}

.is-menu-open .topbar-menu-icon-close {
  display: block;
}

/* Left: logo + "Weave" */
.topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3); /* 12px between logo and name */
  justify-self: start;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

/* 32 × 32px logo */
.topbar-logo {
  flex-shrink: 0;
  width: var(--space-8);
  height: var(--space-8);
}

/* Centre: "Get started" / "Components" */
.topbar-menu {
  display: flex;
  align-self: stretch;  /* full bar height, so the underline sits on the bottom edge */
  gap: var(--space-8);
}

.topbar-link {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.topbar-link:hover {
  color: var(--color-text);
}

/* The current section: pink-600 text with a 2px pink-600 underline.
   main.js adds aria-current="true" to the matching link. */
.topbar-link[aria-current] {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.topbar-link[aria-current]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--border-width-thick);
  background: var(--color-primary);
}

/* Right: the search */
.topbar-search {
  position: relative;
  justify-self: end;
}

/* 3. Sidebar navigation ==================================================== */

/* The sidebar stays in place while the page scrolls, and scrolls on its own
   if the nav is taller than the screen. */
.sidebar {
  position: sticky;
  top: var(--layout-topbar-height);  /* sits just below the top bar */
  height: calc(var(--layout-full-height) - var(--layout-topbar-height));
  overflow-y: auto;
  padding: var(--space-6) var(--space-4) var(--space-10);
  background: var(--color-surface-muted);  /* no border: the grey background separates it */
}

/* "Get started" / "Components" at the top of the drawer: only on mobile,
   where the top bar hides them */
.nav-section--top {
  display: none;
}

/* Each section: "Get started", "Foundations", "Components" */
.nav-section + .nav-section {
  margin-top: var(--space-6);
}

/* Group labels ("Foundations", "Components"): sentence case, regular
   weight, lighter grey than the menu items below them */
.nav-heading {
  margin-bottom: var(--space-1);
  padding: 0 var(--space-3);
  color: var(--grey-500);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each link is also a .ds-nav-item (main.js adds both classes). Its look
   (14px text, padding, corners, hover, the selected pink-50 + 3px bar,
   the focus ring) is the shared "Navigation item" style in
   components.css, the same one Vertical tabs use, so the two always
   match. Only the layout is set here. main.js adds aria-current="page" to
   the current page's link, so screen readers say "current page". */
.nav-link {
  display: block;
}

/* 4. Page header =========================================================== */

.page-header {
  margin-bottom: var(--space-16);
}

/* Page title: H1 style from the type scale */
.page-header h1 {
  margin-bottom: var(--space-3);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-line-height);
  font-weight: var(--type-h1-weight);
  letter-spacing: var(--type-h1-letter-spacing);
}

/* One-line description under the title: Body large style */
.lead {
  color: var(--color-text-muted);
  font-size: var(--type-body-large-size);
  line-height: var(--type-body-large-line-height);
}

/* Intro panel: every component page starts with its description paragraph
   in this light panel, right under the heading and intro line. */
.intro-panel {
  margin-bottom: var(--space-16);   /* the usual gap before the next section */
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--grey-50);
}

/* The text runs the full width of the panel */
.intro-panel p {
  color: var(--grey-800);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
}

/* Sits 24px under the heading and intro line, instead of the usual 64px */
.page-header:has(+ .intro-panel) {
  margin-bottom: var(--space-6);
}

/* 5. Doc sections and placeholders ========================================= */

/* 64px between sections */
.doc-section {
  margin-bottom: var(--space-16);
}

/* Section headings: no divider line, 16px space before their description */
.doc-section h2 {
  margin-bottom: var(--space-4);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

/* A section heading with a button on the right, e.g. "Neutrals … Copy CSS" */
.section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.doc-section .section-heading h2 {
  margin: 0;
}

/* Smaller headings: 8px space before their description.
   (Not for headings that use a .ds-text-* type style, e.g. in examples.) */
.doc-section h3:not([class*="ds-text-"]) {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.doc-section p + p {
  margin-top: var(--space-3);
}

/* Intro paragraph that sits above a grid or list */
.section-intro {
  margin-bottom: var(--space-6);
  color: var(--color-text-muted);
}

/* Small info note, e.g. "Click any colour to copy its hex value." */
.hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-info-bg);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* A hint inside the page header sits 24px below the intro line */
.page-header .hint {
  margin-top: var(--space-6);
}

.hint-icon {
  flex-shrink: 0;
  width: var(--space-4);
  height: var(--space-4);
  color: var(--color-info);
}

/* Dashed box that marks content still to be written */
.placeholder {
  padding: var(--space-6);
  border: var(--border-width-thin) dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
  text-align: center;
}

/* Bigger placeholder for live examples */
.placeholder--example {
  padding: var(--space-16) var(--space-6);
}

/* Two columns side by side: "When to use / When not to use", "Do / Don't" */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.split-panel {
  padding: var(--space-5);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Do / Don't panels get a thick top edge: solid for Do, dashed for Don't */
.split-panel--do {
  border-top: var(--border-width-thick) solid var(--color-text);
}

.split-panel--dont {
  border-top: var(--border-width-thick) dashed var(--color-border-strong);
}

.split-panel .placeholder {
  margin-top: var(--space-3);
}

/* Overview banner: pale pink panel, name on the left, a faint hand-drawn
   weave on the right that's cropped by the edge */
.brand-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--layout-banner-min-height);  /* grows if text is enlarged */
  margin-bottom: var(--space-16);  /* same 64px gap as between sections */
  padding: var(--space-8) var(--space-10);
  overflow: hidden;  /* crops the weave pattern */
  border-radius: var(--radius-xl);
  background: linear-gradient(to right, var(--pink-50), var(--pink-100));
}

/* Text sits above the pattern. grey-900 on pale pink is well above AA. */
.brand-banner-text {
  position: relative;
  color: var(--grey-900);
}

.brand-banner-name {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--type-h4-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-h4-line-height);
}

.brand-banner-logo {
  flex-shrink: 0;
  width: var(--space-12);   /* 48px */
  height: var(--space-12);
}

.brand-banner-title {
  margin-top: var(--space-2);
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-line-height);
  letter-spacing: var(--type-h1-letter-spacing);
}

/* The weave pattern fills the right side and runs off the edge */
.brand-banner-art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%;
  opacity: var(--opacity-decorative);
  /* Fade in from the left, so the pattern has no hard edge */
  -webkit-mask-image: linear-gradient(to right, transparent, black 50%);
  mask-image: linear-gradient(to right, transparent, black 50%);
}

.brand-banner-art svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 6. Overview card grid ==================================================== */

/* As many columns as fit, each at least --layout-card-min-width wide */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--layout-card-min-width), 1fr));
  gap: var(--space-4);
}

.overview-card {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* keeps the illustration inside the rounded corners */
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-decoration: none;
  transition:
    border-color var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard);
}

.overview-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

/* The card is one link: on hover its title is underlined like a standalone
   link (2px, 3px below the text) */
.overview-card:hover h3,
.page-nav-link:hover .page-nav-name {
  text-decoration: underline;
  text-decoration-thickness: var(--border-width-thick);
  text-underline-offset: var(--link-underline-offset);
}

/* The hand-drawn illustration area at the top of each card.
   js/illustrations.js draws an <svg> inside it. Every card uses the same
   shape (--layout-card-art-ratio), so all illustrations line up. */
.overview-card-art {
  aspect-ratio: var(--layout-card-art-ratio);
  border-bottom: var(--border-width-thin) solid var(--color-border);
  background: var(--pink-50);
}

.overview-card-art svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Softer, rounded ends on the sketchy lines */
.overview-card-art path {
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Name and one-sentence purpose */
.overview-card-body {
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.overview-card h3 {
  margin-bottom: var(--space-1);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.overview-card p {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* 7. Foundations =========================================================== */

/* Token name / value captions */
.token-name {
  display: block;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
}

.token-value {
  display: block;
  color: var(--color-text-subtle);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
}

/* --- Colour swatches ----------------------------------------------------- */

/* Every swatch on the page is the same fixed width (--layout-swatch-width),
   so rows line up across sections. As many fit per row as there's room for. */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--layout-swatch-width));
  gap: var(--space-4) var(--space-3);
}

/* Each swatch is a button, so it can be clicked (or reached by keyboard)
   to copy its hex code. These lines remove the default button look. */
.swatch {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* The coloured block */
.swatch-color {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--space-16);
  margin-bottom: var(--space-2);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  transition: box-shadow var(--duration-fast) var(--easing-standard);
}

.swatch:hover .swatch-color {
  box-shadow: var(--shadow-md);
}

/* "Pink 50" */
.swatch-name {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

/* "#FDF0F5" */
.swatch-hex {
  display: block;
  color: var(--color-text-subtle);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
}

/* Small tag, e.g. "Primary" or "Main" */
.tag {
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--grey-100);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

/* On a swatch, the tag sits in the top-left corner of the colour block,
   on white so it's readable on any colour */
.swatch-color .tag {
  position: absolute;
  top: var(--space-1);
  left: var(--space-1);
  background: var(--color-surface);
  color: var(--color-text);
  line-height: var(--line-height-normal);
}

/* Check icon that appears for a moment after copying.
   It sits in a white circle so it shows up on any colour. */
.swatch-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  opacity: 0;
}

.swatch-check svg,
.swatch-check i[data-lucide] {
  width: var(--space-4);
  height: var(--space-4);
}

/* main.js adds .is-copied on click; the animation fades the check in,
   holds it, then fades it out. main.js removes the class when it ends. */
.swatch.is-copied .swatch-check {
  animation: copied var(--duration-feedback) var(--easing-standard);
}

@keyframes copied {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Alert colours: one block per status, two per row (one per row on phones).
   Each block is exactly 4 swatches wide, so the second block lines up with
   the 5th swatch column in the sections above. */
.alert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, min(calc(4 * var(--layout-swatch-width) + 3 * var(--space-3)), 100%));
  gap: var(--space-8) var(--space-3);
}

/* Data visualisation: Main, Light and Dark rows, then the contrast table */
.dataviz-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* "Aa" in a dark shade on its light shade */
.dataviz-sample {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-semibold);
}

/* "Success", "Warning"… above each group of swatches */
.alert-colour-title {
  margin-bottom: var(--space-3);
}

/* --- Typography page ------------------------------------------------------ */

/* 1. Typeface: big "Aa" next to the character set */
.typeface-specimen {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-10) var(--space-12);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

.typeface-aa {
  font-size: var(--type-specimen-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-none);
  letter-spacing: var(--letter-spacing-tight);
}

.typeface-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.typeface-chars {
  color: var(--color-text-muted);
  font-size: var(--type-body-large-size);
  line-height: var(--type-body-large-line-height);
  overflow-wrap: anywhere;  /* lets the alphabet wrap on small screens */
}

/* Links styled as the outline button lose their underline */
a.button-outline {
  text-decoration: none;
}

/* 2. How to use: code with a header bar and a copy button */
.code-sample {
  overflow: hidden;
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-md);
}

.code-sample-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-bottom: var(--border-width-thin) solid var(--color-border);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
}

.code-sample .code-block {
  border: 0;
  border-radius: 0;
  background: var(--color-surface);
}

/* Space above the second code sample's intro */
.code-sample-intro {
  margin-top: var(--space-6);
}

/* 3. Font weights: four cards in a row */
.weight-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.weight-card {
  padding: var(--space-6);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
}

.weight-sample {
  margin-bottom: var(--space-4);
  font-size: var(--type-display-size);
  line-height: var(--type-display-line-height);
}

.weight-name {
  font-weight: var(--font-weight-semibold);
}

.weight-usage {
  color: var(--color-text-muted);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

/* 4. Type scale: one row per style, details on the left, example on the right */
.type-specimen {
  display: grid;
  grid-template-columns: var(--layout-type-meta-width) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-bottom: var(--border-width-thin) solid var(--color-border);
}

.type-specimen-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--color-text-subtle);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

.type-specimen-name {
  color: var(--color-text);
  font-size: var(--type-body-small-size);
  font-weight: var(--font-weight-semibold);
}

/* Breakpoint mockups: four flat device mockups in one row, sharing one
   bottom line, with equal gaps. main.js builds them, shrinks all four
   screens by the same amount (zoom). No mockup is highlighted. Same flat style as the Placement mockups on component pages:
   a white screen in a grey-50 frame, grey-100 blocks, real text. */
.breakpoint-art {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;     /* all mockups sit on the same bottom line */
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-10);
}

/* Forces the 2 × 2 wrap on phones (hidden otherwise) */
.bp-break {
  display: none;
  flex-basis: 100%;
}

.bp-figure {
  flex: none;
  margin: 0;
}

/* The grey-50 frame round each screen */
.bp-device {
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--grey-50);
}

/* The screen, at its real size (set by main.js) and then shrunk */
.bp-screen {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--border-width-thin) solid var(--grey-200);
  border-radius: var(--radius-lg);
  background: var(--grey-0);
}

.bp-header {
  flex-shrink: 0;
  height: var(--space-16);
  background: var(--grey-100);
}

.bp-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-10) var(--bp-pad);
}

/* Real text in this breakpoint's H1 and Body sizes */
.breakpoint-art .bp-h1 {
  margin: 0;
  color: var(--grey-900);
  font-size: var(--bp-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--bp-h1-line-height);
  letter-spacing: var(--type-h1-letter-spacing);
}

.breakpoint-art .bp-body {
  max-width: var(--layout-measure);
  margin: 0 0 var(--space-6);
  color: var(--grey-700);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
}

/* Grey-100 placeholder lines of text */
.bp-line {
  display: block;
  max-width: var(--layout-measure);
  height: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--grey-100);
}

.bp-line--long { width: 90%; }
.bp-line--mid { width: 70%; }
.bp-line--short { width: 40%; }

/* Label centred under its own screen (even if it's wider than the screen) */
.bp-figure figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  white-space: nowrap;
}

/* The same dark colour for every breakpoint */
.breakpoint-name {
  color: var(--color-text);
  font-size: var(--type-body-small-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-body-small-line-height);
}

.breakpoint-range {
  color: var(--color-text-subtle);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

/* Numbers line up neatly in columns */
.type-scale-table td {
  font-variant-numeric: tabular-nums;
}

/* 5. Usage: an example article with its spacing shown as blue bands.
   The right padding leaves room for the "16px" labels. */
.rhythm {
  max-width: calc(var(--layout-measure) + var(--space-16));
  padding-right: var(--space-16);
}

/* Only the blue bands set the spacing, so remove any default margins */
.rhythm > * {
  margin: 0;
}

.rhythm-gap {
  position: relative;
  height: var(--gap);  /* set on each band, e.g. --gap: var(--space-4) */
  border-top: var(--border-width-thin) dashed var(--color-info-border);
  border-bottom: var(--border-width-thin) dashed var(--color-info-border);
  background: var(--color-info-bg);
}

.rhythm-label {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--space-2));
  color: var(--color-info);
  font-family: var(--font-family-mono);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  white-space: nowrap;
  transform: translateY(-50%);
}

/* 6. Do / Don't: pairs of example cards side by side */
.dd-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

/* For examples that need the full width (e.g. line length) */
.dd-pair--stacked {
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-8);
}

.dd-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}

/* A pair followed by a note: keep the note close to it */
.dd-pair:has(+ .dd-note) {
  margin-bottom: 0;
}

/* Short note under a set of examples */
.dd-note {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

/* Green "Do" / red "Don't" label */
.dd-label {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  border: var(--border-width-thin) solid;
  border-radius: var(--radius-full);
  font-size: var(--type-label-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-label-line-height);
}

.dd-label svg,
.dd-label i[data-lucide] {
  width: var(--space-3);
  height: var(--space-3);
}

.dd-label--do {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success);
}

.dd-label--dont {
  border-color: var(--color-error-border);
  background: var(--color-error-bg);
  color: var(--color-error);
}

/* The example itself */
.dd-preview {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.dd-card figcaption {
  color: var(--color-text-muted);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

.dd-muted {
  color: var(--color-text-muted);
}

.dd-caps {
  text-transform: uppercase;
}

/* A narrow column, so justified text shows its uneven gaps */
.dd-narrow {
  max-width: calc(var(--layout-measure) / 3);
}

.dd-measure {
  max-width: var(--layout-measure);
}

/* --- Typography page: Accessibility examples --------------------------------- */

/* "Resizable text  WCAG 1.4.4" */
.a11y-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.wcag-ref {
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--grey-100);
  color: var(--color-text-muted);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-line-height);
}

/* The slider or toggle above an example */
.a11y-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--type-body-small-size);
  font-weight: var(--font-weight-medium);
}

.a11y-control input[type="range"] {
  accent-color: var(--color-primary);  /* it's a control, so it's pink */
}

.a11y-control output {
  min-width: var(--space-10);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* 1. Text that grows with the slider (main.js sets --text-scale) */
.a11y-scalable {
  font-size: calc(var(--type-body-size) * var(--text-scale, 1));
  line-height: calc(var(--type-body-line-height) * var(--text-scale, 1));
}

/* The deliberately broken examples: a fixed height. Anything that doesn't
   fit is hidden; the dashed line marks where the box ends. */
.a11y-fixed {
  height: var(--layout-example-fixed-height);
  overflow: hidden;
  border-bottom: var(--border-width-thin) dashed var(--color-error);
}

/* 2. Text spacing example */
.a11y-spacing-text p + p {
  margin-top: var(--space-2);
}

/* "Test text spacing" switched on: WCAG 1.4.12 values */
.is-spaced .a11y-spacing-text p {
  line-height: var(--a11y-test-line-height);
  letter-spacing: var(--a11y-test-letter-spacing);
  word-spacing: var(--a11y-test-word-spacing);
}

.is-spaced .a11y-spacing-text p + p {
  margin-top: var(--a11y-test-paragraph-spacing);
}

/* 4. Contrast ratio + badge under a sample */
.a11y-ratio {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--type-body-small-size);
}

/* 5. Heading outline diagram */
.outline {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--type-body-small-size);
}

/* Each level indents a step further (--level is set on each row) */
.outline-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-left: calc((var(--level) - 1) * var(--space-6));
}

.outline-tag {
  min-width: var(--space-8);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--grey-100);
  font-family: var(--font-family-mono);
  font-size: var(--type-caption-size);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

/* The level that was skipped to */
.outline-tag--error {
  background: var(--color-error-bg);
  color: var(--color-error);
}

/* Example links (not real links, so they don't take you anywhere) */
.a11y-link {
  color: var(--color-primary);
  text-decoration: underline;
}

.a11y-link--colour-only {
  text-decoration: none;
}

/* --- Spacing page --------------------------------------------------------- */

/* 1. A 4px grid (pale lines every 4px, darker every 16px) with a card on it */
/* Room round the card: 48px above and below (for the spacing labels on the
   right-hand one), 32px at the sides. The same on both examples, so the two
   cards stay identical. */
.grid-demo {
  padding: var(--space-12) var(--space-8);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  background-image:
    linear-gradient(to right, var(--pink-200) var(--border-width-thin), transparent var(--border-width-thin)),
    linear-gradient(to bottom, var(--pink-200) var(--border-width-thin), transparent var(--border-width-thin)),
    linear-gradient(to right, var(--pink-50) var(--border-width-thin), transparent var(--border-width-thin)),
    linear-gradient(to bottom, var(--pink-50) var(--border-width-thin), transparent var(--border-width-thin));
  background-size:
    var(--space-4) var(--space-4),
    var(--space-4) var(--space-4),
    var(--space-1) var(--space-1),
    var(--space-1) var(--space-1);
  outline: var(--border-width-thin) solid var(--color-border);
  outline-offset: calc(-1 * var(--border-width-thin));
}

/* Two versions side by side (stacked on phones) */
.grid-demo-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.grid-demo-figure {
  margin: 0;
}

.grid-demo-figure figcaption {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
  text-align: center;
}

/* Right-hand version: no grid, so the annotations are easy to read */
.grid-demo--plain {
  background-image: none;
  background-color: var(--color-surface-muted);
}

/* The sample card: every size is a multiple of 4px */
.grid-demo-card {
  position: relative;  /* the annotation bands are placed inside it */
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: calc(var(--space-24) * 4);  /* 384px */
  /* On narrower screens, round the width down to a multiple of 4px so the
     card still lands on the grid */
  width: round(down, 100%, var(--space-1));
  padding: var(--space-4);
  /* Outline drawn inside the card instead of a border, so the border
     doesn't add 2px and knock the card off the 4px grid */
  outline: var(--border-width-thin) solid var(--color-border-strong);
  outline-offset: calc(-1 * var(--border-width-thin));
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.grid-demo-avatar {
  flex-shrink: 0;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-full);
  background: var(--pink-200);
}

.grid-demo-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);  /* 4px between the title and the description */
  min-width: 0;
}

/* No extra paragraph margins here (the section style adds 12px between
   paragraphs), so the gap above is the only space */
.grid-demo .grid-demo-text > * {
  margin: 0;
}

/* Spacing annotations, drawn by main.js from the card's real measurements.
   Same look as the Usage example on the Typography page. */
.spacing-annotation {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-width-thin) dashed var(--color-info-border);
  background: var(--color-info-bg);
  pointer-events: none;
}

.spacing-annotation-label {
  color: var(--color-info);
  font-family: var(--font-family-mono);
  font-size: var(--type-caption-size);
  line-height: var(--line-height-none);
  white-space: nowrap;
}

/* Tall, narrow bands: the label runs top to bottom */
.spacing-annotation--vertical .spacing-annotation-label {
  writing-mode: vertical-rl;
}

/* Bands too thin for a label (the 4px gap): the label sits just above,
   at the right-hand end */
.spacing-annotation--thin .spacing-annotation-label {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-1));
}

/* Label just below the band, centred */
.spacing-annotation--below .spacing-annotation-label {
  position: absolute;
  top: calc(100% + var(--space-1));
}

/* Label to the right of the band */
.spacing-annotation--side .spacing-annotation-label {
  position: absolute;
  left: calc(100% + var(--space-2));
}

/* Just a dashed outline (e.g. around an icon), so what's inside shows */
.spacing-annotation--outline,
.spacing-annotation--clear {
  background: transparent;
}

/* Label below the band, lined up with its right edge or its left edge */
.spacing-annotation--below-end .spacing-annotation-label {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
}

.spacing-annotation--below-start .spacing-annotation-label {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
}

.grid-demo-muted {
  color: var(--color-text-muted);
}

.grid-demo-button {
  padding: var(--space-1) var(--space-3);
  outline: var(--border-width-thin) solid var(--color-border-strong);
  outline-offset: calc(-1 * var(--border-width-thin));
  border-radius: var(--radius-md);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-line-height);
}

/* 2. Guidelines: value + bar | rule | hand-drawn example */
.spacing-rules {
  display: flex;
  flex-direction: column;
}

.spacing-rule {
  display: grid;
  grid-template-columns: var(--layout-type-meta-width) minmax(0, 1fr) var(--layout-spacing-art-width);
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-bottom: var(--border-width-thin) solid var(--color-border);
}

.spacing-rule-value {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.spacing-rule-px {
  font-size: var(--type-h4-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-h4-line-height);
}

/* A pink bar exactly as wide as the spacing value */
.spacing-bar {
  display: block;
  min-width: var(--border-width-thick);  /* so --space-0 still shows a sliver */
  height: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--pink-600);
}

.spacing-rule-title {
  font-weight: var(--font-weight-semibold);
}

.spacing-rule-example {
  color: var(--color-text-muted);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

/* Friendly token name, e.g. "Spacing 4" */
.spacing-rule-tokens {
  margin-top: var(--space-1);
  color: var(--color-text-subtle);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

/* Same pale pink box as the Overview card illustrations */
.spacing-rule-art {
  aspect-ratio: var(--layout-card-art-ratio);
  border-radius: var(--radius-md);
  background: var(--pink-50);
}

.spacing-rule-art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.spacing-rule-art path {
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 3. Token table: the bar column */
.space-table td:last-child {
  width: 40%;
}

/* 4. Do / Don't examples ------------------------------------------------- */

/* Plain grey blocks standing in for content */
.sp-box {
  min-height: var(--space-6);
  border-radius: var(--radius-sm);
  background: var(--grey-200);
}

.sp-box--short {
  width: 60%;
}

/* A stack of blocks with labelled gaps; room on the right for the labels */
.sp-stack {
  padding-right: var(--space-12);
}

/* Form: labels and inputs */
.sp-form {
  display: flex;
  flex-direction: column;
}

.sp-label {
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-line-height);
}

.sp-input {
  min-height: var(--space-10);
  border: var(--border-width-thin) solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

/* Dashed outline: shows exactly where a container starts and ends */
.sp-outline {
  border: var(--border-width-thin) dashed var(--color-border-strong);
}

.sp-list {
  display: flex;
  flex-direction: column;
}

.sp-list--gap {
  gap: var(--space-4);
}

/* Don't: a margin on every item, including the last */
.sp-box--margin {
  margin-bottom: var(--space-4);
}

/* Do: padding on the container */
.sp-padded {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}

/* Don't: no container padding; each child pushes itself in (except one) */
.sp-list--stacked {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) 0;
}

.sp-box--inset {
  margin: 0 var(--space-4);
}

/* Alignment: a dashed centre line shows whether the icon and text line up */
.sp-align {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--space-16);
  padding: 0 var(--space-8);  /* leaves the guide line showing on both sides */
}

.sp-centre-guide {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  border-top: var(--border-width-thin) dashed var(--color-error);
}

/* Sits on top of the guide line, with a white background so the line
   doesn't run through the text */
.sp-align-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-2);
  background: var(--color-surface);
}

.sp-align-icon {
  flex-shrink: 0;
  width: var(--space-5);
  height: var(--space-5);
}

/* Don't: line things up by eye with a small nudge instead of alignment */
.sp-align-row--nudged {
  align-items: flex-start;
}

.sp-align-row--nudged .sp-align-icon {
  margin-top: var(--space-example-nudge);
}

/* Two cards of the same kind */
.sp-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.sp-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Don't: the second card has different padding */
.sp-card--tight {
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
}

.sp-line {
  display: block;
  min-height: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--grey-200);
}

/* --- Button page ------------------------------------------------------------ */

/* 2. Variants: name and "when to use" on the left, examples on the right */
.variant-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-bottom: var(--border-width-thin) solid var(--color-border);
}

/* The examples in a variant row: right-aligned to the content edge,
   vertically centred with the text, 8px apart (stacked and left-aligned
   on phones, see the end of this file) */
.variant-examples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.doc-section .variant-name {
  margin-bottom: var(--space-2);
}

.variant-when {
  color: var(--grey-700);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

/* 3. States grid: one roomy cell per state.
   The number of columns depends on how much room the grid has (a container
   query), so cells never get too narrow for their button:
   6 columns from 840px wide, 3 from 420px, otherwise 2.
   (CSS can't use var() in container queries, so the widths are written here.) */
.states-grid-wrap {
  container-type: inline-size;
}

.states-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@container (min-width: 420px) {
  .states-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container (min-width: 840px) {
  .states-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.state-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: var(--layout-state-cell-min-height);
  padding: var(--space-6);
  border: var(--border-width-thin) solid var(--grey-200);
  border-radius: var(--radius-lg);
  text-align: center;
}

.state-cell-variant {
  font-size: var(--type-body-small-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-body-small-line-height);
}

.state-cell-state {
  color: var(--grey-600);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

/* Dark cells: light text (grey-0 and grey-400 on grey-900: 17.7:1 and 7.07:1) */
.state-cell.ds-surface-dark {
  border-color: var(--grey-900);
}

.state-cell.ds-surface-dark .state-cell-variant {
  color: var(--grey-0);
}

.state-cell.ds-surface-dark .state-cell-state {
  color: var(--grey-400);
}

/* The button sits centred in the space left below the names */
.state-cell-demo {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding-top: var(--space-4);
}

.state-demo {
  position: relative;
  display: inline-flex;
}

/* Little cursor beside Hover and Pressed buttons: white fill, dark outline,
   so it shows on light and dark cells */
.state-cursor {
  position: absolute;
  right: calc(-1 * var(--space-3));
  bottom: calc(-1 * var(--space-3));
  width: var(--space-5);
  height: var(--space-5);
  color: var(--grey-900);
  fill: var(--grey-0);
  pointer-events: none;
}

/* 5. Sizes: each button is measured and annotated by main.js */
.size-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* Space between the summary table and the first size */
.table-scroll + .size-list {
  margin-top: var(--space-10);
}

.size-examples {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-8);
  margin-top: var(--space-6);
  /* Extra room on the left and top for the measurement labels */
  padding: var(--space-10) var(--space-6) var(--space-8) var(--space-10);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

[data-annotate-button],
[data-annotate-gaps] {
  position: relative;
}

/* 6. Groups */
.group-examples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}

.group-example {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-10) var(--space-8) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

.group-example figcaption,
.mini-screen-label,
.disabled-hint,
.focus-demo-hint,
.press-count {
  color: var(--color-text-muted);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

/* An example that takes the full width of the grid */
.group-example--wide {
  grid-column: 1 / -1;
}

.group-stacked-demo {
  width: var(--layout-card-min-width);
  max-width: 100%;
}

/* 7. Do / Don't examples */

/* In the Do / Don't grouping examples, a destructive button that ends a
   group sits at the far right edge (margin-left: auto pushes it there);
   the other buttons stay together on the left. A Delete placed in the
   middle (the "Don't") is left where it is. */
#do-dont .ds-button-group > .ds-button--destructive:last-of-type,
#do-dont .ds-button-group > .ds-button--destructive-filled:last-of-type {
  margin-left: auto;
}

/* Don't: uneven gaps (4px, then 20px) */
.uneven-gaps {
  gap: 0;
}

.uneven-gaps > :nth-child(2) {
  margin-left: var(--space-1);
}

.uneven-gaps > :nth-child(3) {
  margin-left: var(--space-5);
}

/* A small "screen" holding a button group */
.mini-screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-md);
}

/* A small confirmation modal */
.mini-modal {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.mini-modal-title {
  font-weight: var(--font-weight-semibold);
}

.mini-modal-text {
  color: var(--color-text-muted);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

.mini-modal-actions {
  justify-content: flex-end;
  margin-top: var(--space-3);
}

/* A narrow phone screen */
.phone-frame {
  width: min(var(--layout-phone-example-width), 100%);
  padding: var(--space-4);
  overflow: hidden;
  border: var(--border-width-thin) solid var(--color-border-strong);
  border-radius: var(--radius-lg);
}

/* Buttons inside example cards may wrap onto two lines on narrow screens,
   instead of poking out of the card (e.g. the long "Don't" label) */
.dd-preview .ds-button {
  white-space: normal;
}

/* Don't: buttons forced onto one line, so they run off the screen */
.squeezed-group {
  flex-wrap: nowrap;
}

.squeezed-group .ds-button,
.dd-preview .fixed-width-example {
  white-space: nowrap;
}

/* 8. Don't: a button with a fixed width cuts off longer labels */
.fixed-width-example {
  width: var(--size-example-fixed-button);
  overflow: hidden;
  justify-content: flex-start;
}

/* 9. Accessibility */
.target-demo,
.non-text-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-10);
  margin-bottom: var(--space-4);
}

.target-demo figure,
.non-text-demo figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

.non-text-demo figure {
  align-items: flex-start;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
}

.non-text-demo figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.non-text-dark figcaption {
  color: var(--grey-0);
}

/* The 24px minimum target */
.target-min {
  display: block;
  width: var(--size-target-minimum);
  height: var(--size-target-minimum);
  border: var(--border-width-thin) dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
}

.button-contrast-table td {
  vertical-align: middle;
}

/* Example column: 24px before the contrast column */
.button-contrast-table .contrast-example {
  padding-right: var(--space-6);
}

/* Dark rows: the button sits in a grey-900 box with 12px corners and 16px
   all round, so it doesn't touch the edges. The box lines up with the
   buttons in the light rows. */
.contrast-dark-box {
  display: inline-flex;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
}

.focus-demo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-6);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* Keyboard keys, e.g. Tab */
kbd {
  display: inline-block;
  padding: 0 var(--space-1);
  border: var(--border-width-thin) solid var(--color-border-strong);
  border-bottom-width: var(--border-width-thick);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-family: var(--font-family-mono);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

.disabled-demo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

/* --- Anatomy diagrams (reusable on any component page) ---------------------
   <div class="anatomy-grid" data-anatomy-diagram>
     <div class="anatomy-panel">
       <span class="anatomy-badge">1</span>
       <div class="anatomy-stage"> …example with data-anatomy-part="A"… </div>
     </div>
   </div>
   main.js draws a lettered callout for every [data-anatomy-part]. Labels
   and icons get theirs above, containers below (change with
   data-anatomy-side="top" or "bottom"). */

/* 2 × 2 panels on grey-50, with thin grey-200 lines between them
   (the grid's grey-200 background shows through the 1px gaps) */
.anatomy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--border-width-thin);
  overflow: hidden;
  border: var(--border-width-thin) solid var(--grey-200);
  border-radius: var(--radius-lg);
  background: var(--grey-200);
}

.anatomy-panel {
  position: relative;
  padding: var(--space-10);
  background: var(--grey-50);
}

/* A panel that spans the full width (e.g. an odd one out at the end) */
.anatomy-panel--wide {
  grid-column: 1 / -1;
}

/* Numbered badge in the top-left corner */
.anatomy-badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-full);
  background: var(--grey-900);
  color: var(--grey-0);
  font-size: var(--type-label-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-label-line-height);
}

/* The example, centred, with room above and below for the callouts */
.anatomy-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) 0;
}

/* The callouts layer (drawn by main.js) */
.anatomy-panel > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.anatomy-callout-line {
  fill: none;
  stroke: var(--grey-900);
  stroke-width: var(--border-width-thin);
}

.anatomy-callout-dot {
  fill: var(--grey-900);
}

/* The lettered circle: a 24px button, placed by main.js at the end of its
   line. It shows the part's name in a tooltip on hover, focus and tap. */
.anatomy-letter {
  position: absolute;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--space-6);
  height: var(--space-6);
  margin: 0;
  padding: 0;
  border: var(--border-width-thin) solid var(--grey-900);
  border-radius: var(--radius-full);
  background: var(--grey-0);
  color: var(--grey-900);
  font-family: var(--font-family-sans);
  font-size: var(--type-label-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  cursor: help;
}

/* Hovered, or its name hovered in the legend */
.anatomy-letter:hover,
.anatomy-letter.is-highlighted {
  background: var(--pink-50);
}

.anatomy-letter:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-primary);
  outline-offset: var(--focus-ring-offset);
}

/* A name in the legend: highlighted with its letter */
.anatomy-legend-part {
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) var(--easing-standard);
}

.anatomy-legend-part.is-highlighted {
  background: var(--pink-50);
  box-shadow: 0 0 0 calc(var(--space-1) / 2) var(--pink-50);   /* 2px more colour around it, without moving the text */
}

@media (prefers-reduced-motion: reduce) {
  .anatomy-legend-part {
    transition: none;
  }
}

/* "Anatomy of buttons" + a 2-column list of the parts */
.anatomy-caption {
  margin-top: var(--space-2);
  font-weight: var(--font-weight-semibold);
}

.anatomy-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-4);
}

.anatomy-legend-title {
  font-size: var(--type-body-small-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-body-small-line-height);
}

.doc-section .anatomy-legend-parts {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

/* --- Alert page ------------------------------------------------------------ */

/* Types: one block per type, each showing all four variants */
.alert-types {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.alert-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-6);
}

/* Sizes (any component page): one annotated example per size, on a grey
   panel with extra room round it for the measurement labels (drawn by
   main.js) */
.annotated-size-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-top: var(--space-10);
}

.annotated-size-stage {
  margin-top: var(--space-6);
  padding: var(--space-10) var(--space-10) var(--space-10) var(--space-12);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

[data-annotate-alert],
[data-annotate-accordion] {
  position: relative;
  max-width: var(--layout-measure);
}

/* --- Card page --------------------------------------------------------------- */

/* Variants: the shared variant rows (like the Alert page). The card fills
   the right half of the row; on phones it goes full width below the text. */
.card-variant-example {
  width: 100%;
}

.card-example {
  max-width: calc(var(--space-24) * 4);   /* 384px: a typical card width */
  margin-top: var(--space-6);
}

/* Anatomy: the card at a typical width, centred in the panel */
.card-anatomy-card {
  width: 100%;
  max-width: calc(var(--space-24) * 4);   /* 384px */
}

/* States: each card fills its cell */
.state-demo > .ds-card {
  width: 100%;
}

/* Sizes: cards measured by main.js */
[data-annotate-card] {
  position: relative;
  /* a typical card width, with room on the right for the gap labels */
  max-width: min(calc(var(--space-24) * 4), calc(100% - var(--space-12)));
}

/* Placement mockups: grids of mini cards (real cards, shown smaller) */
.wf-card-grid {
  display: grid;
  gap: var(--space-6);
}

.wf-card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wf-card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wf-card-grid--1 { grid-template-columns: minmax(0, 1fr); }

.wf-card-grid .ds-card-body {
  gap: var(--space-2);
  padding: var(--space-3);
}

.wf-frame--tablet .wf-page {
  max-width: calc(var(--space-24) * 3);   /* 288px */
  margin-inline: auto;
}

/* Do / Don't: two cards side by side */
.card-dd-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}

/* Don't: a long title that isn't cut off, and a square image */
.ds-card .dd-card-unclamped {
  display: block;
}

.dd-card-square .ds-card-media {
  aspect-ratio: 1 / 1;
}

/* --- Drawer page ------------------------------------------------------------- */

/* Example content in the drawers: a label with its value below.
   Each group is one child of .ds-drawer-content, so groups are 16px apart. */
.drawer-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
}

.drawer-field dt,
.drawer-field .drawer-field-label {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--type-caption-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--type-caption-line-height);
}

.drawer-field dd {
  margin: 0;
  color: var(--grey-900);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

/* Activity list in the live drawer, 8px apart */
.drawer-activity {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--grey-900);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

.drawer-activity span {
  color: var(--color-text-muted);
}

/* Drawer pictures: a mini page (grey wireframe lines) with the real
   drawer docked on the right, 80% of the width, over the 40% grey-900
   overlay. Pictures only: aria-hidden, nothing to click.
   <div class="drawer-stage">
     <div class="drawer-stage-page">…wf-heading, wf-line…</div>
     <div class="drawer-stage-overlay"></div>
     <div class="ds-drawer-panel">…</div>
   </div> */
.drawer-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 4fr);
  overflow: hidden;
  border: var(--border-width-thin) solid var(--grey-200);
  border-radius: var(--radius-lg);
  background: var(--grey-0);
  pointer-events: none;
}

.drawer-stage-page {
  display: flex;
  flex-direction: column;
  grid-area: 1 / 1 / 2 / -1;   /* the whole stage, behind the drawer */
  gap: var(--space-2);
  padding: var(--space-4);
}

.drawer-stage-overlay {
  grid-area: 1 / 1;
  background: color-mix(in srgb, var(--grey-900) 40%, transparent);
}

/* The drawer shown in place: no sliding, as tall as its content */
.drawer-stage > .ds-drawer-panel {
  grid-area: 1 / 2;
  width: auto;
  max-width: none;
  height: auto;
  transform: none;
  transition: none;
}

.drawer-stage .ds-drawer-content {
  overflow: hidden;
}

/* Left: the drawer on the left, the overlay on the right */
.drawer-stage--left {
  grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
}

.drawer-stage--left > .drawer-stage-overlay {
  grid-area: 1 / 2;
}

.drawer-stage--left > .ds-drawer-panel {
  grid-area: 1 / 1;
}

/* Short: the drawer stops at 320px, so long content is cut off */
.drawer-stage--short > .ds-drawer-panel {
  max-height: calc(var(--space-20) * 4);   /* 320px */
}

/* Don't: a second drawer on top of the first, 48px in */
.drawer-stage--stacked > .ds-drawer-panel + .ds-drawer-panel {
  margin-left: var(--space-12);
}

/* Anatomy legend: one item, across the full width */
.drawer-legend > div {
  grid-column: 1 / -1;
}

/* Variants: the picture fills the right half of the row */
.drawer-variant-example {
  width: 100%;
}

/* Anatomy: one picture, centred, at most 576px wide */
.drawer-anatomy-stage {
  width: 100%;
  max-width: calc(var(--space-24) * 6);   /* 576px */
}

/* Sizes: the real drawer at its real width, measured by main.js. The
   room on the right is for the measurement labels. */
[data-annotate-drawer] {
  position: relative;
}

[data-annotate-drawer] > .ds-drawer-panel {
  max-width: calc(100% - var(--space-12));
  height: auto;
  transform: none;
  transition: none;
}

[data-annotate-drawer] .ds-drawer-content {
  overflow: hidden;
}

/* Behaviour across breakpoints: three screens side by side */
.dd-pair--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* A screen in the middle of its frame, with its own shape:
   desktop 16:10, tablet 3:4, phone 9:16. (Two classes, so these win over
   the .wf-page base rule further down.) */
.wf-frame--screen {
  align-items: center;
  justify-content: center;
}

/* Screens with a fixed shape: at least 16px below their content */
.wf-page--drawer .wf-body {
  padding-bottom: var(--space-4);
}

.wf-frame--screen > .wf-page--drawer {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 10;
}

.wf-frame--screen > .wf-page--tablet {
  width: 72%;
  aspect-ratio: 3 / 4;
}

.wf-frame--screen > .wf-page--phone {
  width: 52%;
  max-width: calc(var(--space-24) * 2);   /* 192px, like the other phone mockups */
  aspect-ratio: 9 / 16;
}

/* The drawer in the mockups: white, with a dark title line, a pink Save
   button and grey content lines, over the 40% grey-900 overlay. Its width
   is a share of the screen: 480px of 1440px on desktop, 80% on tablet,
   all of it on a phone. */
.wf-drawer-overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--grey-900) 40%, transparent);
}

.wf-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: calc(100% / 3);
  background: var(--grey-0);
  box-shadow: var(--shadow-md);
}

.wf-drawer--tablet { width: 80%; }
.wf-drawer--narrow { width: 85%; }

.wf-drawer--full {
  width: 100%;
  box-shadow: none;
}

.wf-drawer-header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  border-bottom: var(--border-width-thin) solid var(--grey-200);
}

.wf-drawer-title {
  width: 50%;
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--grey-900);
}

.wf-drawer-icon {
  flex-shrink: 0;
  width: var(--space-3);
  height: var(--space-3);
  color: var(--grey-700);
}

.wf-drawer-title + .wf-drawer-icon {
  margin-left: auto;   /* the close "x" at the far right */
}

.wf-drawer-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
}

.wf-drawer-footer {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2);
  border-top: var(--border-width-thin) solid var(--grey-200);
}

.wf-drawer-button {
  width: var(--space-6);
  height: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--grey-100);
}

.wf-drawer-button--primary {
  background: var(--color-primary);
}

/* A simple bulleted list, 8px apart (Drawer and Dropdown pages) */
.bullet-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-5);
  list-style: disc;
}

/* When to use / when not to use: two grey panels side by side */
.usage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}

.usage-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

/* Accessibility: a single picture with its caption below (8px) */
.drawer-figure {
  margin-bottom: var(--space-6);
}

.drawer-figure > .drawer-stage {
  max-width: calc(var(--space-24) * 6);   /* 576px */
}

/* The "Open drawer" button with its focus ring, on a grey panel */
.drawer-a11y-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
  pointer-events: none;
}

/* Phones: pictures show the drawer full screen with no overlay, like the
   real thing; the two-column blocks stack */
@media (max-width: 767px) {
  .drawer-stage,
  .drawer-stage--left {
    grid-template-columns: minmax(0, 1fr);
  }

  .drawer-stage-overlay {
    display: none;
  }

  .drawer-stage > .ds-drawer-panel {
    grid-area: 1 / 1;
  }

  /* Sizes: keep each drawer's own width (up to the room there is) */
  [data-annotate-drawer] > .ds-drawer-panel {
    width: var(--drawer-width, calc(var(--space-24) * 5));
    max-width: calc(100% - var(--space-12));
  }

  .usage-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Dropdown page ----------------------------------------------------------- */

/* Pictures of dropdowns (not live): the menu sits in the page flow, 8px
   below its trigger, instead of floating. Nothing to click. */
.dropdown-static {
  pointer-events: none;
}

.dropdown-static .ds-dropdown-control {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dropdown-static .ds-dropdown-menu {
  position: static;
  z-index: auto;   /* in the page flow, so it scrolls under the top bar */
  overflow: hidden;
}

/* Menus from a button or avatar line up with its right edge */
.dropdown-static.ds-dropdown--menu .ds-dropdown-control {
  align-items: flex-end;
}

/* Opened above the field */
.dropdown-static--up .ds-dropdown-control {
  flex-direction: column-reverse;
}

/* The Open state: the menu floats over the helper text, like the real
   one, with room left below it in the cell */
.dropdown-static--float .ds-dropdown-control {
  display: block;
}

.dropdown-static--float .ds-dropdown-menu {
  position: absolute;
}

.dropdown-static--float {
  margin-bottom: calc(var(--space-24) + var(--space-6));   /* 120px: the menu stays clear of the card edge */
}

/* Just the menu, without its trigger */
.dropdown-menu-only > .ds-dropdown-label,
.dropdown-menu-only .ds-dropdown-control > :first-child {
  display: none;
}

/* Don't: a long list cut off at 192px */
.dropdown-short .ds-dropdown-menu {
  max-height: calc(var(--space-24) * 2);
}

/* A picture's width: fields are 288px (full width on phones) */
.dropdown-box {
  width: 100%;
  max-width: calc(var(--space-24) * 3);   /* 288px */
}

.dropdown-box--narrow {
  max-width: calc(var(--space-24) * 2);   /* 192px */
}

/* Variants: the example on the right of its row */
.dropdown-variant-example {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

/* Field vs menu: the live examples, 8px from their note */
.dropdown-try {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.dropdown-try-note {
  color: var(--color-text-muted);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

/* Try it: every variant, working, 32px apart */
.dropdown-try-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--space-24) * 2.5), 1fr));
  align-items: start;
  gap: var(--space-8);
}

.dropdown-try-menus {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-6);   /* level with the fields under their labels */
}

/* States grids with fields: 3 per row with room, 2, then 1 */
.states-grid--thirds {
  grid-template-columns: minmax(0, 1fr);
}

@container (min-width: 560px) {
  .states-grid--thirds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (min-width: 840px) {
  .states-grid--thirds {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.states-grid--thirds .state-cell-demo {
  position: relative;
  align-items: flex-start;
  align-self: stretch;
}

.states-grid--thirds .state-cell-demo > .ds-dropdown {
  flex: 1;
}

.states-grid--thirds .state-cell-demo > .ds-dropdown--menu {
  display: flex;
}

/* The little cursor on the Hover cells, over the field or item */
.state-cursor.dropdown-cursor {
  top: 50%;
  right: 30%;
  bottom: auto;
}

/* Anatomy: each example 288px wide, centred. Menus from a button or
   avatar are a little wider (240px), so their callouts have room. */
.dropdown-anatomy-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-16);   /* room for the callouts between example and inset */
  width: 100%;
  max-width: calc(var(--space-24) * 3);
}

.dropdown-anatomy-item > .ds-dropdown--menu {
  align-self: flex-end;
}

/* A lettered item label pointed at from below: only as wide as its text,
   so the line lands on the words */
.dropdown-anatomy-item .ds-dropdown-item-label[data-anatomy-side="bottom"] {
  flex: 0 1 auto;
  margin-right: auto;
}

.dropdown-anatomy-wide .ds-dropdown-menu {
  min-width: calc(var(--space-20) * 3);   /* 240px */
}

/* Searchable: a small "No results" inset below the main example */
.dropdown-anatomy-inset {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: calc(var(--space-24) * 2);   /* 192px */
}

.dropdown-anatomy-inset-title {
  color: var(--color-text-muted);
  font-size: var(--type-caption-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-caption-line-height);
}

/* Sizes: the real dropdowns, measured by main.js, with room on the right
   for the labels */
.dropdown-size-host {
  position: relative;
  max-width: min(calc(var(--space-24) * 3), calc(100% - var(--space-16)));
}

/* A field and a button side by side, bottoms lined up */
.dropdown-align-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  max-width: calc(100% - var(--space-8));
}

.dropdown-align-row > .ds-dropdown {
  flex: 1;
  max-width: calc(var(--space-24) * 3);
}

.dropdown-align-row > .ds-button {
  flex-shrink: 0;
}

/* Placement mockups: a heading with an action menu on the right */
.dropdown-wf-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

/* The phone sheet picture: the menu fills the screen, with its header */
.dropdown-sheet-picture .ds-dropdown-menu {
  max-height: none;
  padding: var(--space-3);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.dropdown-sheet-picture .ds-dropdown-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

/* Accessibility: a single picture with its caption below (8px) */
.dropdown-figure {
  margin-bottom: var(--space-6);
}

/* Phones: examples go full width */
@media (max-width: 767px) {
  .dropdown-variant-example {
    justify-content: flex-start;
  }

  .dropdown-variant-example > .dropdown-box {
    max-width: none;
  }
}

/* --- Link page ---------------------------------------------------------------- */

/* A line of body text with a link in it */
.link-sentence {
  color: var(--grey-900);
}

/* Inverse: a wide pink-900 strip, like a mini footer, so the link reads
   as a link on a dark background (not a button) */
.link-dark-panel {
  width: 100%;
  margin: 0;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--pink-900);
  color: var(--grey-0);
}

/* States: 4 per row with room (Default, Hover, Focus, Pressed), else 2 */
.states-grid--quads {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@container (min-width: 560px) {
  .states-grid--quads {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Text sizes: links take the size of the text around them */
.link-size--sm {
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

.link-size--md {
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
}

.link-size--lg {
  font-size: var(--type-body-large-size);
  line-height: var(--type-body-large-line-height);
}

/* Sizes and the 24px click area: measured by main.js */
[data-annotate-link] {
  position: relative;
  display: inline-block;
  padding: var(--space-6) var(--space-12) 0 var(--space-2);
}

/* A zero-size mark on the text's baseline, so main.js can measure the
   underline offset from it */
.link-baseline {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: baseline;
}

/* Anatomy: the text in its own box, with a marker on its underline */
.link-anatomy-text {
  position: relative;
}

.link-underline-marker {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--border-width-thin);
}

/* Do / Don't: a link shown by colour alone (no underline) */
.link-dd-colour-only .ds-link {
  text-decoration: none;
}

/* A list of links (e.g. a footer column), 4px apart */
.link-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Link vs button: the example, left-aligned */
.link-vs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

/* Accessibility: a single picture with its caption below (8px) */
.link-figure {
  margin-bottom: var(--space-6);
}

/* Contrast table: each sample on its real background */
.link-contrast-sample {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.link-contrast-sample--dark {
  background: var(--pink-900);
}

/* --- Modal page --------------------------------------------------------------- */

/* Modal pictures (not live): the modal as a normal box, on a band of the
   40% grey-900 overlay colour. Pictures only: aria-hidden, nothing to click. */
.modal-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--grey-900) 40%, var(--grey-0));
  pointer-events: none;
}

.modal-static {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 100%;
  max-height: none;
  animation: none;
}

/* Scrolling content picture: the body cut off, as if scrolled */
.modal-static.ds-modal--scrolling .ds-modal-body {
  max-height: calc(var(--space-24) + var(--space-12));   /* 144px */
  overflow: hidden;
}

/* Don't: a second modal on top of the first, offset */
.modal-stage--stacked {
  display: grid;
}

.modal-stage--stacked > .ds-modal {
  grid-area: 1 / 1;
}

.modal-stage--stacked > .ds-modal + .ds-modal {
  width: 80%;
  margin: var(--space-12) 0 0 var(--space-12);
}

/* Variants: the picture fills the right half of the row */
.modal-variant-example {
  width: 100%;
}

/* Anatomy: each picture fills its panel */
.modal-anatomy {
  width: 100%;
}

/* Sizes: the real modal at its real width, measured by main.js, with room
   above for the width and on the right for the labels */
[data-annotate-modal] {
  position: relative;
  padding-top: var(--space-12);
}

[data-annotate-modal] > .ds-modal {
  width: var(--modal-width);
  max-width: calc(100% - var(--space-12));
}

/* Breakpoint mockups: the modal in the middle of the screen. Its width is
   a share of the screen: 560px of 1440px on desktop, at most 90% on
   tablet, full width less 16px margins on a phone. */
.wf-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 40%;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--grey-0);
  box-shadow: var(--shadow-md);
  transform: translate(-50%, -50%);
}

.wf-modal--tablet { width: 70%; }
.wf-modal--phone { width: calc(100% - var(--space-4)); }

.wf-modal-title {
  width: 60%;
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--grey-900);
}

.wf-modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

/* Phones: buttons stacked full width, the primary on top */
.wf-modal--phone .wf-modal-buttons {
  flex-direction: column-reverse;
}

.wf-modal--phone .wf-drawer-button {
  width: 100%;
}

/* Modal vs drawer vs alert: three panels */
.usage-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Accessibility: a single picture with its caption below (8px) */
.modal-figure {
  margin-bottom: var(--space-6);
}

/* Try it: one button per variant */
.modal-try {
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .usage-grid--three {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Get started pages --------------------------------------------------------- */

/* "Version 1.0 · October 2026" above the title. The text lives in one token
   (--site-version in tokens.css), so it's a one-line change for version 2. */
.version-label {
  margin: 0 0 var(--space-2);
  color: var(--color-primary);
  font-size: var(--type-body-small-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-body-small-line-height);
}

.version-label::before {
  content: var(--site-version);
}

/* Cards: white, 1px grey-200 border, 12px corners, 16px padding, 16px apart.
   Two per row (one on phones). */
.gs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.gs-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gs-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: var(--border-width-thin) solid var(--grey-200);
  border-radius: var(--radius-lg);
  background: var(--grey-0);
}

/* 20px pink icon above the title */
.gs-card-icon {
  width: var(--space-5);
  height: var(--space-5);
  color: var(--color-primary);
}

.doc-section .gs-card .gs-card-title {
  margin: 0;
  color: var(--grey-900);
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-body-line-height);
}

.gs-card-text {
  color: var(--grey-700);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

/* Next steps: pink-50 with a pink-200 border, a pink-700 title and an
   arrow. The whole card is one link; its title underlines on hover. */
.gs-next-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border: var(--border-width-thin) solid var(--pink-200);
  border-radius: var(--radius-lg);
  background: var(--color-primary-subtle);
  text-decoration: none;
  transition: box-shadow var(--duration-fast) var(--easing-standard);
}

.gs-next-card:hover {
  box-shadow: var(--shadow-md);
}

.gs-next-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--pink-700);
  font-weight: var(--font-weight-semibold);
}

.gs-next-title svg,
.gs-next-title i[data-lucide] {
  flex-shrink: 0;
  width: var(--space-5);
  height: var(--space-5);
}

.gs-next-card:hover .gs-next-title span {
  text-decoration: underline;
  text-decoration-thickness: var(--border-width-thick);
  text-underline-offset: var(--link-underline-offset);
}

.gs-next-text {
  color: var(--grey-700);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

@media (max-width: 767px) {
  .gs-grid,
  .gs-grid--three {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* --- Pagination page ----------------------------------------------------------- */

/* Variants: pagination is wide, so the example sits below its text, full
   width (like the Accordion page), 24px below */
.variant-row--stacked {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

/* Table pagination pictures and the live table: a bordered box with the
   table on top and the bar underneath */
/* (No overflow: hidden, so the dropdown menus in the bar can open past
   the box. Nothing inside has a background, so the corners stay round.) */
.pagination-table-box {
  border: var(--border-width-thin) solid var(--grey-200);
  border-radius: var(--radius-lg);
  background: var(--grey-0);
}

.pagination-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

.pagination-table th,
.pagination-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width-thin) solid var(--grey-200);
  text-align: left;
}

.pagination-table th {
  color: var(--grey-900);
  font-weight: var(--font-weight-semibold);
}

.pagination-table tr:last-child td {
  border-bottom: 0;
}

/* Ellipsis rules: one row per example, the label above its page numbers */
.ellipsis-examples {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.ellipsis-example {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ellipsis-example-label {
  color: var(--grey-700);
  font-size: var(--type-body-small-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-body-small-line-height);
}

/* Anatomy: a marker on the table bar's top border, for its callout */
.pagination-border-marker {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--border-width-thin);
  height: var(--border-width-thin);
}

.pagination-anatomy-table {
  width: 100%;
}

/* Sizes: the real pagination, measured by main.js */
[data-annotate-pagination] {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding: var(--space-8) var(--space-4) var(--space-8) var(--space-8);
}

[data-annotate-pagination="bar"] {
  display: block;
  padding: var(--space-6) var(--space-8);
}

/* Try it: a list of 120 items, one page at a time */
.pagination-demo {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  scroll-margin-top: calc(var(--layout-topbar-height) + var(--space-6));
}

.doc-section .pagination-demo-heading {
  margin: 0;
  border-radius: var(--radius-sm);
}

.pagination-demo-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--grey-900);
}

.pagination-demo-number {
  display: inline-block;
  min-width: var(--space-8);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Do / Don't */
.pg-dd-colour-only .ds-pagination-page[aria-current="page"] {
  background: transparent;
  color: var(--color-primary);
  font-weight: var(--font-weight-regular);
}

.pg-phone {
  width: 100%;
  max-width: calc(var(--space-24) * 2.5);   /* 240px: a phone's width, roughly */
  padding: var(--space-3);
  overflow: hidden;
  border: var(--border-width-thin) solid var(--grey-200);
  border-radius: var(--radius-lg);
}

/* Breakpoint mockups and the comparison: grey list lines with the
   pagination (or load more, or a loader) in colour below */
.wf-pg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.wf-pg-num,
.wf-pg-step {
  display: block;
  height: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--grey-200);
}

.wf-pg-num {
  width: var(--space-3);
}

.wf-pg-num--current {
  border: var(--border-width-thin) solid var(--pink-700);
  background: var(--color-primary-subtle);
}

.wf-pg-step {
  width: var(--space-6);
}

.wf-pg-gap {
  width: var(--space-2);
  height: var(--space-1);
  border-bottom: var(--border-width-thick) dotted var(--grey-400);
}

.wf-pg-status {
  width: var(--space-10);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--grey-900);
}

.wf-load-more {
  align-self: center;
  width: 50%;
  height: var(--space-5);
  margin-top: var(--space-1);
  border: var(--border-width-thin) solid var(--color-primary);
  border-radius: var(--radius-sm);
}

.wf-loader {
  align-self: center;
  width: var(--space-4);
  height: var(--space-4);
  color: var(--color-primary);
}

@media (max-width: 767px) {
  .pagination-demo-list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Pictures that always show page numbers: just the arrows on phones, and
     a little less room round the Sizes examples, so they fit */
  .pg-picture .ds-pagination-step-label {
    display: none;
  }

  .pagination-sizes .annotated-size-stage {
    padding-left: var(--space-4);
  }

  [data-annotate-pagination] {
    padding-right: 0;
    padding-left: var(--space-6);
  }
}

/* --- Popover page ----------------------------------------------------------- */

/* Popover pictures (not live): the popover in the page flow, 8px below its
   trigger (or beside it), with its caret pointing at the trigger */
.popover-static {
  position: relative;
  display: block;
  width: max-content;
  max-width: min(100%, calc(var(--space-20) * 4));   /* 320px, or less if there isn't room */
}

.popover-static.ds-popover--wide {
  max-width: min(100%, calc(var(--space-24) * 5));  /* 480px */
}

.popover-pic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--space-2) + var(--space-2));   /* 8px to the caret tip + the 8px caret */
  pointer-events: none;
}

/* No caret: the popover itself is 8px from the trigger */
.popover-pic:has(.ds-popover--no-caret) {
  gap: var(--space-2);
}

.popover-pic--start {
  align-items: flex-start;
}

/* Bottom end: the trigger and the popover both line up with the right edge */
.popover-pic--end {
  align-items: flex-end;
}

.popover-pic {
  position: relative;
  min-width: 0;      /* can shrink in a narrow panel, so the popover wraps */
  max-width: 100%;
}

/* Do / Don't, "doesn't cover what it explains": an IBAN field (up to 320px)
   with a 16px info icon 4px after its label. The popover is placed from the
   icon, like the real one: its caret tip 8px away, aimed at the icon's middle
   (20px in from the corner, clear of the 12px rounding). */
.popover-field-pic {
  container-type: inline-size;   /* so the popover can shrink on phones */
  width: 100%;
  pointer-events: none;
}

/* Do: room above the field, where the popover grows upwards */
.popover-field-pic--right {
  padding-top: var(--space-24);
}

/* Don't: room below, where the popover hangs over the input */
.popover-field-pic--below {
  padding-bottom: var(--space-20);
}

.popover-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: calc(var(--space-20) * 4);   /* 320px */
}

.popover-field-label-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);   /* 4px from the label to the icon */
}

/* The icon (and the point the popover is placed from) */
.popover-field-anchor {
  position: relative;
  display: inline-flex;
}

.popover-field-info {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--grey-700);
}

.popover-field-info svg,
.popover-field-info i[data-lucide] {
  width: var(--space-4);
  height: var(--space-4);
}

.popover-field-anchor > .ds-popover {
  position: absolute;
  /* 240px, the same in both pictures; narrower on phones so it stays inside */
  width: min(calc(var(--space-20) * 3), calc(100cqw - var(--space-20)));
  max-width: none;
}

/* Right end: 16px right of the icon (8px gap + 8px caret), the caret 16px
   up from the bottom corner and level with the icon's middle, so the
   popover ends just above the input */
.popover-field-pic--right .ds-popover {
  --caret-offset: calc(100% - var(--radius-lg) - var(--space-1));
  bottom: calc(50% - var(--radius-lg) - var(--space-1));
  left: calc(100% + var(--space-4));
}

/* Below: 16px under the icon, the caret 20px in from the left corner and
   under the icon's middle, so the popover lies over the input */
.popover-field-pic--below .ds-popover {
  --caret-offset: calc(var(--radius-lg) + var(--space-2));
  top: calc(100% + var(--space-4));
  left: calc(50% - var(--radius-lg) - var(--space-2));
}

/* The pointer in the hover picture: over the popover */
.state-cursor.popover-cursor {
  top: 55%;
  right: auto;
  bottom: auto;
  left: 55%;
}

/* Anatomy: an invisible dot in the middle of the caret (which is drawn
   with zero-size shapes), for its callout to point at */
.popover-caret-marker {
  position: absolute;
  top: calc(var(--popover-caret) * -0.5);
  left: var(--caret-offset);
  width: var(--border-width-thin);
  height: var(--border-width-thin);
}

/* Anatomy (Without caret): an invisible dot in the middle of the 8px gap
   between the trigger and the popover */
.popover-gap-marker {
  position: absolute;
  top: calc(var(--space-2) * -0.5);
  left: 50%;
  width: var(--border-width-thin);
  height: var(--border-width-thin);
}

/* Where the caret sits in a picture: near the start or end edge */
.popover-caret-start { --caret-offset: calc(var(--radius-lg) + var(--space-4)); }
.popover-caret-end { --caret-offset: calc(100% - var(--radius-lg) - var(--space-4)); }

/* Variants: the picture on the right of its row */
.popover-variant-example {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

/* Placement: 12 small examples, 3 per row (one per side), 1 per row on
   narrow screens. Each is a trigger and a mini popover, laid out like the
   real thing, with its name below. */
.placement-grid-wrap {
  container-type: inline-size;
}

.placement-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

@container (min-width: 640px) {
  .placement-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.placement-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);   /* the 8px between an example and its caption */
  margin: 0;
}

.placement-cell figcaption {
  color: var(--grey-700);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
  text-align: center;
}

.placement-cell-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--space-24) * 1.5);   /* 144px */
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

/* The mini popover: just the word, roomy enough for its caret */
.ds-popover.placement-mini {
  min-width: calc(var(--space-24) * 1.5);   /* 144px: wider than the trigger, so start / end shows */
  padding: var(--space-3) var(--space-4);
  white-space: nowrap;
}

/* Lay out the trigger and popover for each side: above, below, beside */
.placement-pic--top { flex-direction: column-reverse; }
.placement-pic--bottom { flex-direction: column; }
.placement-pic--right { flex-direction: row; }
.placement-pic--left { flex-direction: row-reverse; }

/* …and line them up at the start, middle or end */
.placement-pic--start { align-items: flex-start; }
.placement-pic--center { align-items: center; }
.placement-pic--end { align-items: flex-end; }

/* Headings inside the Triggers panels (h4, under the Triggers h3) */
.usage-panel h4.variant-name {
  margin-top: 0;
}

/* A sub-heading straight after a section heading: 16px, like a description */
.doc-section > h2 + .subheading {
  margin-top: var(--space-4);
}

/* Flip example: a dashed box stands for the edge of the screen */
.flip-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);   /* 8px to the caret tip */
  padding: var(--space-2) var(--space-6) var(--space-6);
  border: var(--border-width-thin) dashed var(--grey-400);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

.flip-demo-edge {
  align-self: flex-start;
  color: var(--color-text-muted);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

/* States: two groups (32px apart), each with a small heading and its own
   grid of cards 16px apart */
.states-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.doc-section .states-group-title {
  margin: 0 0 var(--space-4);
  color: var(--grey-700);
  font-size: var(--type-body-small-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-body-small-line-height);
}

/* 4 (or 3) per row with room, 2 on tablets, 1 on phones */
.states-grid--four,
.states-grid--three {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

@container (min-width: 420px) {
  .states-grid--four,
  .states-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (min-width: 840px) {
  .states-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .states-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The mini popover in the close button cards: at most 220px, so it fits */
.ds-popover.popover-close-mini {
  max-width: min(100%, calc(var(--space-20) * 2.75));   /* 220px */
}

/* Triggers / comparison panels: the picture below the text */
.popover-panel-pic {
  display: flex;
  justify-content: center;
  padding: var(--space-4) 0;
}

/* Sizes: each real popover, measured by main.js, with at least 48px round
   it and a column on each side for the labels */
.popover-size-host {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);   /* 8px to the caret tip + the 8px caret */
  padding: var(--space-12) calc(var(--space-24) + var(--space-4)) var(--space-16) calc(var(--space-24) + var(--space-6));
}

.popover-size-host:has(.ds-popover--no-caret) {
  gap: var(--space-2);
}

/* Every marked example (also the close button one in Accessibility) */
[data-annotate-popover] {
  position: relative;
}

/* Basic: the short and the long message side by side */
.popover-size-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* (Basic only labels its left side, so it needs no column on the right) */
.popover-size-pair .popover-size-host {
  padding-right: var(--space-4);
}

/* The leader lines from labels to their outlines */
.spacing-annotation.annotation-leaders {
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  border: 0;
  background: none;
}

.annotation-leader {
  stroke: var(--color-info);
  stroke-width: var(--border-width-thin);
}

/* Try it: the placement demo panel and its buttons */
.popover-placement-demo {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.popover-placement-demo-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--space-24) * 4);   /* 384px: room all round */
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

.popover-place-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* The chosen placement: the selected style */
.popover-place-buttons .ds-button[aria-pressed="true"] {
  background: var(--color-primary-subtle);
  color: var(--pink-700);
}

.popover-try-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

/* Try it, "Hover and click": two equal columns, 32px apart. Both triggers
   are Secondary Small (32px), so they sit on the same line; each caption
   is 8px below its trigger. Stacks on phones (see the 767px rules). */
.popover-try-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-8);
}

.popover-try-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.popover-try-caption {
  margin: 0;
  color: var(--grey-600);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

/* Flip in Try it: the trigger near the top of a panel */
.popover-flip-panel {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: calc(var(--space-24) * 3);   /* 288px */
  padding-top: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

/* Comparison: four panels (2 on tablets, 1 on phones) */
/* Popover vs tooltip vs dropdown vs modal: four cards. The grid is sized by
   its own width (not the screen's), so 4 columns only appear when each card
   has room for the 160px menu with space round it: 4 from 928px, 2 from
   440px, otherwise 1. */
.cmp-grid-wrap {
  container-type: inline-size;
}

.usage-grid.cmp-grid {
  grid-template-columns: minmax(0, 1fr);
}

@container (min-width: 440px) {
  .usage-grid.cmp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 928px) {
  .usage-grid.cmp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Each card uses the grid's rows (subgrid), so the text blocks in a row of
   cards are the same height and the pictures start on the same line */
.cmp-panel {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: var(--space-4);
}

/* The picture area: the same height in every card, picture centred */
.cmp-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--space-24) + var(--space-20));   /* 176px */
}

/* Popover: a one-line message, at most 200px wide */
.ds-popover.cmp-popover {
  min-width: 0;
  max-width: calc(var(--space-20) * 2.5);   /* 200px */
}

/* Dropdown: a 160px menu, 8px below its more-horizontal button. Smaller
   than a real button menu (192px minimum), so it fits the narrow card. */
.cmp-dropdown .ds-dropdown-menu {
  width: calc(var(--space-20) * 2);   /* 160px */
  min-width: 0;
}

/* Modal: the mini screen, as wide as the menu */
.cmp-visual > .wf-frame {
  width: 100%;
  max-width: calc(var(--space-20) * 2);
}

/* Breakpoint mockups: the popover next to a trigger, in colour */
.wf-pop-trigger {
  display: block;
  width: var(--space-10);
  height: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--grey-300);
}

.wf-pop {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 60%;
  padding: var(--space-2);
  border: var(--border-width-thin) solid var(--grey-200);
  border-radius: var(--radius-sm);
  background: var(--grey-0);
  box-shadow: var(--shadow-md);
}

/* Its caret: 8px, pointing up at the trigger, its tip 8px from it */
.wf-pop-trigger + .wf-pop {
  margin-top: var(--space-2);   /* with the column's 8px gap: 8px gap + 8px caret */
}

.wf-pop::before,
.wf-pop::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: calc(var(--space-10) / 2 - var(--space-2));   /* under the middle of the trigger */
  border: var(--space-2) solid transparent;
  border-top: 0;
}

.wf-pop::before {
  border-bottom-color: var(--grey-200);
}

.wf-pop::after {
  margin-bottom: calc(var(--border-width-thin) * -1);
  border-bottom-color: var(--grey-0);
}

.wf-pop-sheet::before,
.wf-pop-sheet::after {
  display: none;
}

.wf-pop--full {
  width: 100%;
}

.wf-pop-title {
  width: 60%;
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--grey-900);
}

.wf-pop-button {
  width: var(--space-6);
  height: var(--space-3);
  margin-top: var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
}

/* The bottom sheet: across the bottom of the phone */
.wf-pop-sheet {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.wf-pop-image {
  height: var(--space-8);
  border-radius: var(--radius-sm);
  background: var(--color-primary-subtle);
}

@media (max-width: 767px) {
  /* Variants: below the text, lined up on the left */
  .popover-variant-example {
    justify-content: flex-start;
  }

  .popover-variant-example .popover-pic--end {
    align-items: flex-start;
  }

  /* Do / Don't IBAN field: the popover wraps to more lines, so more room
     above the field for it */
  .popover-field-pic--right {
    padding-top: calc(var(--space-24) + var(--space-8));
  }

  /* Try it, "Hover and click": stack the two columns */
  .popover-try-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Sizes: the labels need their columns, so each example scrolls sideways
     on its own rather than squashing the marks */
  .popover-sizes .annotated-size-stage {
    overflow-x: auto;
    padding-inline: var(--space-2);
  }

  .popover-size-host {
    width: max-content;
  }
}

/* --- Breadcrumb page --------------------------------------------------------- */

/* The live example right after the intro panel */
.breadcrumb-example {
  padding: var(--space-8);
  border: var(--border-width-thin) solid var(--grey-200);
  border-radius: var(--radius-lg);
}

/* States: each cell's breadcrumb starts on the left */
.state-demo > .ds-breadcrumb {
  max-width: 100%;
}

/* Sizes: examples measured by main.js */
[data-annotate-breadcrumb] {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

/* A page title under a breadcrumb (Sizes and Do / Don't examples) */
.doc-section .breadcrumb-title {
  margin: 0;
}

/* Mobile-width examples (back link, squeezed trail) */
.breadcrumb-mobile {
  width: calc(var(--space-24) * 2 + var(--space-8));   /* 224px */
  max-width: 100%;
  padding: var(--space-4);
  border: var(--border-width-thin) solid var(--grey-200);
  border-radius: var(--radius-lg);
}

/* Don't examples: separators as slashes, and a trail that wraps */
.dd-breadcrumb-slash {
  color: var(--grey-400);
}

.dd-breadcrumb-wrap .ds-breadcrumb-list {
  flex-wrap: wrap;
}

.dd-breadcrumb-link-current {
  color: var(--grey-600);
  text-decoration: underline;
}

/* In the mockups: 24px (at the mockup's scale) between the breadcrumb or
   back link and the page heading. The column already adds an 8px gap. */
.wf-main > .wf-breadcrumb {
  /* (this element is itself shown at the mockup scale, so its margin is too) */
  margin-bottom: calc(var(--space-6) - var(--space-2) / var(--mockup-scale));
}

/* Placement mockups: a narrow mobile frame, and the breadcrumb sitting in
   the content area */
.wf-frame--mobile .wf-page {
  max-width: calc(var(--space-24) * 2);    /* 192px */
  margin-inline: auto;
}

/* --- Badge page -------------------------------------------------------------- */

/* A row of examples */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}

/* Types: one block per type */
.badge-types {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.badge-example {
  margin-top: var(--space-6);
}

/* Icons that aren't buttons (e.g. in the Sizes and Anatomy examples) */
.badge-icon {
  color: var(--grey-700);
}

/* A small navigation list with standalone counts ("Inbox 12") */
.badge-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: calc(var(--space-24) * 2 + var(--space-12));   /* 240px */
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.badge-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--grey-900);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

.badge-nav-item.is-current {
  background: var(--grey-100);
  font-weight: var(--font-weight-semibold);
}

.badge-nav-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.badge-nav-label svg,
.badge-nav-label i[data-lucide] {
  width: var(--space-4);
  height: var(--space-4);
  color: var(--grey-600);
}

/* Badges on icons stick out above the icon by half their height (4px for
   a dot, 10px for a count). Rows of them get that room on top, so the badge
   itself sits a full 24px below the text above, never touching it. */
.badge-row:has(.badge-icon > .ds-badge--dot) {
  padding-top: calc(var(--space-2) / 2);
}

.badge-row:has(.badge-icon > .ds-badge:not(.ds-badge--dot)) {
  padding-top: calc(var(--space-5) / 2);
}

/* Each example with a caption underneath */
.badge-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.doc-section .badge-figure figcaption {
  color: var(--color-text-muted);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

/* Sizes: examples measured by main.js, with room round them for labels */
.badge-size-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-4) var(--space-8);
}

[data-annotate-badge] {
  position: relative;
  display: inline-flex;
}

/* Live demo: the bell, the buttons that change the count, and the message */
.badge-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.doc-section .badge-demo-status {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

/* Don't examples: badges in the wrong corner */
.dd-badge-top-left > .ds-badge {
  right: auto;
  left: 0;
  translate: -50% -50%;
}

.dd-badge-bottom-right > .ds-badge {
  top: auto;
  bottom: 0;
  translate: 50% 50%;
}

/* Placement mockups: a sidebar with a navigation list, and a chat button
   in the bottom-right corner of the page */
.wf-sidebar.wf-sidebar--nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-2);
  background: transparent;
  outline: var(--border-width-thin) solid var(--grey-100);
}

.wf-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.wf-nav-item .wf-line {
  flex: 1;
}

.wf-page:has(.wf-launcher) {
  position: relative;
}

.wf-launcher {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
}

/* Grey icons inside the mockups */
.wf-icon {
  color: var(--grey-600);
}

/* --- Avatar page ------------------------------------------------------------- */

/* A row of avatars */
.avatar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}

/* A row of avatars placed straight in a section (e.g. an Accessibility
   example): 24px below it, so it never touches the code or panel after it */
.doc-section > .avatar-row {
  margin-bottom: var(--space-6);
}

/* Types: one block per type */
.avatar-types {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.avatar-example {
  margin-top: var(--space-6);
}

/* An avatar with a small caption underneath (e.g. the six colours) */
.avatar-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.doc-section .avatar-figure figcaption {
  color: var(--color-text-muted);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  text-align: center;
}

/* Name demo: type a name, see the initials and colour */
.avatar-name-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
}

.doc-section .avatar-name-result {
  color: var(--color-text-muted);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

/* Fallback order: three steps with arrows between */
.avatar-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-8);
}

.avatar-step-arrow {
  width: var(--space-5);
  height: var(--space-5);
  margin-top: var(--space-2);
  color: var(--grey-400);
}

/* Sizes: an initials avatar, a placeholder and a group, measured by main.js */
.avatar-size-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-24);   /* room for the labels under each example */
}

[data-annotate-avatar] {
  position: relative;
}

/* Two rows of avatars in a Do / Don't, with a small label above each */
.avatar-dd-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.doc-section .avatar-dd-label {
  color: var(--color-text-muted);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

/* Don't examples */
.dd-avatar-squeeze {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-tight);
}

.ds-avatar .dd-avatar-stretched {
  object-fit: fill;
}

.ds-avatar .dd-avatar-offcentre {
  object-position: left top;
}

.ds-avatar.dd-avatar-tiny {
  --avatar-size: var(--space-4);
  --avatar-text: var(--font-size-xs);
}

/* Placement mockups: a header with the account avatar on the right, and
   comments with an avatar beside each */
.wf-header.wf-header--avatar,
.wf-header.wf-header--icons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: var(--space-10);
  padding-inline: var(--space-2);
}

.wf-comment {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.wf-comment-lines {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-1);
}

/* --- Accordion page ---------------------------------------------------------- */

/* Examples are no wider than a comfortable reading line */
.accordion-example {
  max-width: var(--layout-measure);
}

/* Variants: the name and its description in one row, the example below
   across the full width */
.accordion-variant-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}

.doc-section .accordion-variant-heading .variant-name {
  margin-bottom: 0;
}

.accordion-variant-example {
  margin-top: var(--space-6);
}

/* Types: one block per type */
.accordion-types {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.accordion-types .accordion-example {
  margin-top: var(--space-6);
}

/* Single open vs multiple open, side by side */
.accordion-type-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-6);
}

.doc-section .accordion-type-label {
  margin-bottom: var(--space-2);
  font-size: var(--type-body-small-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-body-small-line-height);
}

/* States grid with 2 wide cells per row, for components wider than a
   button (1 per row when there's less than 520px; CSS can't use var() in
   container queries, so the width is written here). The cells' side
   padding (36px) makes the example the same width as in the Anatomy
   panels next to each other. */
.states-grid--pairs {
  grid-template-columns: minmax(0, 1fr);
}

@container (min-width: 520px) {
  .states-grid--pairs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.states-grid--pairs .state-cell {
  padding-inline: calc(var(--space-10) - var(--space-1));
}

/* The example fills the cell (cells centre their content by default) */
.states-grid--pairs .state-cell-demo {
  align-self: stretch;
}

.state-cell-demo > .state-demo:has(.ds-accordion) {
  width: 100%;
}

.state-demo > .ds-accordion {
  flex: 1;
}

/* Don't: a panel with a fixed height and its own scroll bar */
.wf-scroll-panel .ds-accordion-content {
  position: relative;
  max-height: var(--space-20);
  overflow: hidden;
}

.wf-scrollbar {
  position: absolute;
  top: var(--space-2);
  right: var(--space-1);
  width: var(--space-1);
  height: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--grey-300);
}

/* Reduced motion demo: the switch turns the animation off */
.is-reduced-motion .ds-accordion .ds-accordion-item,
.is-reduced-motion .ds-accordion .ds-accordion-header,
.is-reduced-motion .ds-accordion .ds-accordion-chevron,
.is-reduced-motion .ds-accordion .ds-accordion-panel {
  transition: none;
}

.motion-demo-toolbar {
  margin-bottom: var(--space-4);
}

/* Alerts fill the width of anatomy panels and demos */
.anatomy-stage > .ds-accordion,
[data-annotate-alert] > .ds-alert,
.anatomy-stage > .ds-alert,
.alert-keyboard-demo,
.alert-live-demo {
  width: 100%;
}

.alert-live-demo:empty {
  display: none;
}

/* "Show alert again" after dismissing an example */
.alert-restore {
  align-self: flex-start;
}

/* Placement and behaviour: flat page wireframes (mockups).
   <div class="wf-frame">            grey-50 frame
     <div class="wf-page">           white page
       <div class="wf-header"></div> grey bar across the top
       <div class="wf-body">         sidebar + main (wf-body--full: no sidebar)
         <div class="wf-sidebar"></div>
         <div class="wf-main"> …wf-heading, wf-line, wf-field, wf-buttons, wf-alert… </div>
   Everything is grey-100 except the alert, which is the real component,
   shown smaller (wf-alert), so it's the one thing that stands out. The
   mockups sit in the Do / Don't cards (.dd-pair, .dd-card), so they line up
   in pairs and stack on phones. */
.wf-frame {
  display: flex;
  flex: 1;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--grey-50);
  pointer-events: none;   /* a picture, not something to click */
}

/* overflow: clip (not hidden) keeps the rounded corners but still lets a
   screen grow taller than its shape when its content needs the room, so
   nothing inside is ever cut off */
.wf-page {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: clip;
  border: var(--border-width-thin) solid var(--grey-200);
  border-radius: var(--radius-md);
  background: var(--grey-0);
}

.wf-header {
  flex-shrink: 0;
  height: var(--space-6);
  background: var(--grey-100);
}

.wf-body {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: var(--space-3);
  padding: var(--space-3);
}

.wf-body--full {
  grid-template-columns: minmax(0, 1fr);
}

.wf-sidebar {
  border-radius: var(--radius-sm);
  background: var(--grey-100);
}

.wf-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Grey placeholder blocks */
.wf-heading,
.wf-line,
.wf-field,
.wf-button {
  display: block;
  background: var(--grey-100);
}

.wf-heading {
  width: 50%;
  height: var(--space-4);
  border-radius: var(--radius-sm);
}

/* A line of text */
.wf-line {
  height: var(--space-2);
  border-radius: var(--radius-full);
}

.wf-line--long { width: 90%; }
.wf-line--mid { width: 70%; }
.wf-line--short { width: 30%; }

/* A form field */
.wf-field {
  height: var(--space-6);
  border-radius: var(--radius-sm);
}

/* Save and Cancel */
.wf-buttons {
  display: flex;
  gap: var(--space-2);
}

.wf-button {
  width: var(--space-12);
  height: var(--space-6);
  border-radius: var(--radius-sm);
}

.wf-button--primary {
  background: var(--grey-300);
}

/* Extra space after the heading, before the content */
.wf-heading + * {
  margin-top: var(--space-1);
}

/* Pairs of mockups: the label, frame and caption rows line up across
   the pair, so both frames are the same height */
.dd-pair--mockups {
  grid-template-rows: auto 1fr auto;
}

.dd-pair--mockups > .dd-card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

.dd-pair--mockups .dd-label {
  justify-self: start;
}

.dd-pair--mockups .wf-frame {
  grid-row: 2;
}

.dd-pair--mockups figcaption {
  grid-row: 3;
}

/* The real component, shown smaller */
.wf-alert,
.wf-component {
  zoom: var(--mockup-scale);
}

/* A little cursor on a mockup (e.g. hovering a header) */
.wf-component {
  position: relative;
}

/* (placed over the middle of the first header) */
.wf-cursor {
  position: absolute;
  top: var(--space-6);
  left: 45%;
  width: var(--space-5);
  height: var(--space-5);
  color: var(--grey-900);
  fill: var(--grey-0);
}

/* "Just now" / "5 minutes later": a grey version of the Do / Don't label */
.dd-label--neutral {
  border-color: var(--grey-200);
  background: var(--grey-100);
  color: var(--grey-700);
}

/* Timing "Don't": a countdown bar under the alert */
.doc-section .alert-timer-label {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

.alert-timer {
  display: block;
  height: var(--space-1);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--grey-200);
}

.alert-timer span {
  display: block;
  width: 40%;
  height: 100%;
  background: var(--grey-500);
}

/* --- Previous / Next links at the bottom of component pages ---------------- */
.page-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-16);
}

.page-nav-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--easing-standard);
}

.page-nav-link:hover {
  border-color: var(--color-primary);
}

.page-nav-link--next {
  grid-column: 2;
  align-items: flex-end;
  text-align: right;
}

.page-nav-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

.page-nav-label svg,
.page-nav-label i[data-lucide] {
  width: var(--space-4);
  height: var(--space-4);
}

.page-nav-name {
  font-weight: var(--font-weight-semibold);
}

/* --- Accessibility section ------------------------------------------------ */

/* Smaller headings inside a section, e.g. "Minimum contrast" */
.subheading {
  margin-top: var(--space-12);
}

/* Simple two-column table for the contrast rules */
.rules-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.rules-table th,
.rules-table td {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: var(--border-width-thin) solid var(--color-border);
  text-align: left;
}

.rules-table th {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}

/* WCAG level badges: AAA, AA, AA18, DNP */
.badge {
  display: inline-block;
  padding: 0 var(--space-2);
  border: var(--border-width-thin) solid;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.badge--aaa,
.badge--aa {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success);
}

.badge--aa18 {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.badge--dnp {
  border-color: var(--color-error-border);
  background: var(--color-error-bg);
  color: var(--color-error);
}

/* Key explaining the badges */
.badge-legend {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  font-size: var(--font-size-sm);
}

.badge-legend .badge {
  min-width: var(--space-12);
  margin-right: var(--space-2);
  text-align: center;
}

/* Wide tables scroll sideways inside this box, not the whole page */
.table-scroll {
  overflow-x: auto;
}

/* The contrast matrix */
.contrast-matrix {
  border-collapse: collapse;
  font-size: var(--font-size-xs);
}

.contrast-matrix th,
.contrast-matrix td {
  min-width: var(--layout-matrix-cell-width);
  padding: var(--space-2);
  border: var(--border-width-thin) solid var(--color-border);
  text-align: center;
  vertical-align: top;
}

.contrast-matrix thead th {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}

/* Row headings stay visible while the matrix scrolls sideways */
.contrast-matrix tbody th {
  position: sticky;
  left: 0;
  background: var(--color-surface);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  white-space: nowrap;
}

.contrast-corner {
  color: var(--color-text-subtle);
  font-weight: var(--font-weight-regular);
}

/* Small dot showing the background colour next to each row heading */
.contrast-chip {
  display: inline-block;
  width: var(--space-3);
  height: var(--space-3);
  margin-right: var(--space-2);
  border: var(--border-width-thin) solid var(--color-border-strong);
  border-radius: var(--radius-full);
  vertical-align: middle;
}

/* The "Text" sample: background and text colour are set by main.js */
.contrast-sample {
  display: block;
  margin-bottom: var(--space-1);
  padding: var(--space-2) 0;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.contrast-ratio {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-family-mono);
}

/* A heading with a button on the right, e.g. "Contrast matrix … Download PDF" */
.section-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-8) 0 var(--space-3);
}

.doc-section .section-toolbar h3 {
  margin: 0;
}

/* Outlined button with an icon, e.g. "Download PDF" */
.button-outline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width-thin) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard);
}

.button-outline:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
}

/* Smaller version of the outlined button */
.button-small {
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
}

/* Copy buttons show "Copy CSS" normally and "Copied" for a moment after
   clicking (main.js adds .is-copied, then removes it) */
.copy-idle,
.copy-done {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.copy-done,
.is-copied .copy-idle {
  display: none;
}

.is-copied .copy-done {
  display: inline-flex;
}

.button-outline.is-copied {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success);
}

.button-icon {
  flex-shrink: 0;
  width: var(--space-4);
  height: var(--space-4);
}

/* --- Icons page ----------------------------------------------------------- */

/* A block of example code */
.code-block {
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

/* Search box + "Showing 1,857 icons" */
.icon-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.icon-count {
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
}

/* Grid of icon tiles: as many columns as fit */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--layout-icon-tile-min-width), 1fr));
  gap: var(--space-2);
}

/* The loading / error message spans the whole grid */
.icon-grid > .placeholder {
  grid-column: 1 / -1;
}

/* One icon: the icon, its name, and (on hover) two buttons */
.icon-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-2) var(--space-3);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--easing-standard);
}

/* Tiles hidden by the search (display: flex above would otherwise win) */
.icon-tile[hidden] {
  display: none;
}

.icon-tile:hover,
.icon-tile:focus-within {
  border-color: var(--color-border-strong);
}

.icon-tile-glyph svg {
  display: block;
  width: var(--space-6);
  height: var(--space-6);
}

/* Long names get "…" instead of breaking the layout */
.icon-tile-name {
  width: 100%;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Copy + download buttons: hidden until the tile is hovered or a button
   inside it has keyboard focus */
.icon-tile-actions {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  display: flex;
  gap: var(--space-1);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--easing-standard);
}

.icon-tile:hover .icon-tile-actions,
.icon-tile:focus-within .icon-tile-actions {
  opacity: 1;
}

/* Touch screens can't hover, so always show the buttons there */
@media (hover: none) {
  .icon-tile-actions {
    opacity: 1;
  }
}

.icon-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  cursor: pointer;
}

.icon-action:hover {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}

.icon-action svg,
.icon-action i[data-lucide] {
  width: var(--space-4);
  height: var(--space-4);
}

/* After copying, main.js adds .is-copied for a moment:
   the copy icon is swapped for a check */
.icon-action .icon-check,
.icon-action.is-copied .icon-copy {
  display: none;
}

.icon-action.is-copied .icon-check {
  display: block;
}

.icon-action.is-copied {
  background: var(--color-success-bg);
  color: var(--color-success);
}

/* Credit line at the bottom of a page */
.credit {
  padding-top: var(--space-6);
  border-top: var(--border-width-thin) solid var(--color-border);
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
}

/* Hidden on screen but still read out by screen readers */
.visually-hidden {
  position: absolute;
  width: var(--border-width-thin);
  height: var(--border-width-thin);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 8. Small screens ========================================================= */

/* Mobile and tablet (under 1024px): the sidebar becomes a drawer.
   Hidden until the menu button is tapped, then it slides in from the left
   (280px wide, white, the full height below the top bar) over the page,
   which is dimmed with grey-900 at 40%. The page can't scroll while it's
   open. (CSS can't use var() in @media, so 1023px is written here.) */
@media (max-width: 1023px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .topbar-menu-button {
    display: inline-flex;
  }

  .sidebar {
    position: fixed;
    top: var(--layout-topbar-height);
    bottom: 0;
    left: 0;
    z-index: var(--layer-drawer);
    width: min(var(--layout-drawer-width), 100%);
    height: auto;
    background: var(--grey-0);
    box-shadow: var(--shadow-md);
    visibility: hidden;   /* also keeps its links out of Tab order when closed */
    transform: translateX(-100%);
    transition:
      transform var(--duration-normal) var(--easing-standard),
      visibility var(--duration-normal);
  }

  .is-menu-open .sidebar {
    visibility: visible;
    transform: none;
  }

  .menu-overlay {
    position: fixed;
    inset: var(--layout-topbar-height) 0 0;
    z-index: var(--layer-overlay);
    background: color-mix(in srgb, var(--grey-900) 40%, transparent);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--duration-normal) var(--easing-standard),
      visibility var(--duration-normal);
  }

  .is-menu-open .menu-overlay {
    opacity: 1;
    visibility: visible;
  }

  /* The top bar (with the close button) stays above the dimmed page */
  .is-menu-open .topbar {
    z-index: var(--layer-drawer);
  }

  /* No page scrolling behind the open drawer */
  html.is-menu-open {
    overflow: hidden;
  }
}

/* Wide screens: no drawer, no overlay */
@media (min-width: 1024px) {
  .menu-overlay {
    display: none;
  }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .sidebar,
  .menu-overlay {
    transition: none;
  }
}

/* Note: CSS does not allow var() inside @media, so this breakpoint (767px)
   is the one value that has to be written here instead of in tokens.css.
   On narrow screens the sidebar sits above the content instead of beside it. */
@media (max-width: 767px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Top bar: logo on the left, search icon on the right, no centre menu */
  .topbar {
    grid-template-columns: 1fr auto;
    padding: 0 var(--space-4);
  }

  .topbar-menu {
    display: none;
  }

  /* The drawer starts with the top bar's menu */
  .nav-section--top {
    display: block;
  }

  .content {
    padding: var(--space-8) var(--space-6) var(--space-6);  /* 32px top, 24px sides and bottom */
  }

  /* Overview banner: shorter, with less padding */
  .brand-banner {
    min-height: var(--layout-banner-min-height-mobile);
    padding: var(--space-6);
  }

  /* Narrower pattern, so it stays clear of the text */
  .brand-banner-art {
    width: 45%;
  }

  /* Variant rows stack: text on top, examples below, left-aligned */
  .variant-examples {
    justify-content: flex-start;
  }

  .split,
  .variant-row,
  .group-examples,
  .grid-demo-pair,
  .spacing-rule,
  .typeface-specimen,
  .type-specimen,
  .dd-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .typeface-specimen {
    gap: var(--space-6);
    padding: var(--space-6);
  }

  .weight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Alert page: one alert per row */
  /* Alert sizes: less room round the example, so the text fits */
  .annotated-size-stage {
    padding: var(--space-8) var(--space-4) var(--space-8) var(--space-10);
  }

  /* Accordion types: single and multiple open stack */
  .accordion-type-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Mockups stack in one column, each card in its own order again */
  .dd-pair--mockups {
    grid-template-rows: none;
  }

  .dd-pair--mockups > .dd-card {
    display: flex;
    grid-row: auto;
  }

  .alert-stack {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Anatomy diagrams: one panel and one legend item per row */
  .anatomy-grid,
  .anatomy-legend {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Intro panel: less padding on phones */
  .intro-panel {
    padding: var(--space-6);
  }

  /* Previous / Next: one per row */
  .page-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-nav-link--next {
    grid-column: 1;
  }

  /* Breakpoint mockups: 2 × 2 (Mobile + Tablet, then Desktop + XL),
     each row centred with equal gaps */
  .breakpoint-art {
    gap: var(--space-6) var(--space-4);
  }

  .bp-break {
    display: block;
  }

  /* Overview cards: one per row, illustration on the left, text on the
     right, so the list stays compact on a phone */
  .card-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .overview-card {
    flex-direction: row;
  }

  .overview-card-art {
    flex: 0 0 var(--layout-card-art-width-mobile);
    aspect-ratio: auto;
    border-right: var(--border-width-thin) solid var(--color-border);
    border-bottom: 0;
  }

  .overview-card-body {
    padding: var(--space-3) var(--space-4);
  }
}

/* 9. Print ================================================================= */

/* These rules only apply when a "Download PDF" button is used.
   main.js adds .is-printing-section to <body> and .is-print-target to the
   part being saved. Normal printing (Ctrl+P) is not affected. */
@media print {
  /* Hide everything except the target, the elements that contain it,
     and everything inside it */
  body.is-printing-section *:not(:has(.is-print-target)):not(.is-print-target):not(.is-print-target *) {
    display: none;
  }

  /* Remove the sidebar column and page padding so the target fills the page */
  body.is-printing-section .layout {
    display: block;
  }

  body.is-printing-section .content {
    max-width: none;
    padding: 0;
  }

  body.is-printing-section .doc-section {
    margin: 0;
  }

  /* Print in landscape. "page: section-landscape" links the target to the
     @page rule below, so only this printout is landscape. */
  .is-print-target {
    page: section-landscape;
    zoom: var(--print-scale); /* shrink slightly so it fits one page */
  }

  /* Keep background colours (browsers drop them when printing by default) */
  .is-print-target,
  .is-print-target * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* The button isn't useful on paper */
  .is-print-target [data-print-target] {
    display: none;
  }

  .is-print-target .section-toolbar {
    margin-top: 0;
  }

  /* Let the matrix use the full page width instead of scrolling */
  .is-print-target .table-scroll {
    overflow: visible;
  }

  .is-print-target .contrast-matrix {
    width: 100%;
  }

  .is-print-target .contrast-matrix th,
  .is-print-target .contrast-matrix td {
    min-width: 0;
    padding: var(--space-1);
  }

  .is-print-target .contrast-matrix tbody th {
    position: static;
  }

  /* Tighter spacing so the whole matrix fits on one page */
  .is-print-target .badge-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    margin-bottom: var(--space-4);
  }

  .is-print-target .section-intro {
    margin-bottom: var(--space-3);
  }

  .is-print-target .contrast-sample {
    padding: var(--space-1) 0;
  }

  /* Ratio and badge side by side instead of stacked */
  .is-print-target .contrast-ratio {
    display: inline;
    margin: 0 var(--space-1) 0 0;
  }

  /* Don't split a row across two pages */
  .is-print-target tr {
    break-inside: avoid;
  }

  /* Button states grid: keep each cell whole (it may run onto a second
     page, but never cuts a cell in half), and drop the section's bottom
     margin so no blank page follows */
  .is-print-target .state-cell {
    min-height: 0;             /* more compact on paper */
    padding: var(--space-4);
    break-inside: avoid;
  }

  /* Keep the closing note on the same page as the last rows */
  .is-print-target .states-grid-wrap + .dd-note {
    break-before: avoid;
  }

  .is-print-target.doc-section {
    margin-bottom: 0;
  }
}

@page section-landscape {
  size: landscape;
}

/* ==========================================================================
   Progress page (components/progress.html)
   ========================================================================== */

/* Variants split by sub-headings: 8px from a sub-heading to its first row
   (the sub-heading's own 8px margin), and no browser margin above an h4 name */
.subheading + .variant-list > .variant-row:first-child {
  padding-top: 0;
}

.variant-row .variant-name {
  margin-top: 0;
}

/* Variants: bars fill the right half of the row; circles sit on the right */
.progress-variant-example {
  width: 100%;
}

/* States: bars fill their cell, text lined up on the left */
.state-demo.progress-state {
  display: block;
  width: 100%;
  text-align: left;
}

/* Anatomy: two bars (running, then Success), and two rings side by side.
   48px at the sides leaves room for the side callouts; 64px between the
   bars, for the status icon's callout above the second one. */
.progress-anatomy-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
  padding-inline: var(--space-12);
}

.progress-anatomy-rings {
  display: flex;
  align-items: flex-start;
  gap: var(--space-24);
}

/* Sizes: the real components with room round them for the labels.
   Bars: a 320px column, labels on the right. Circles: in a row. */
.progress-size-host {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: max-content;
  padding: var(--space-4) calc(var(--space-24) + var(--space-20)) var(--space-4) 0;
}

.progress-size-host .ds-progress {
  width: calc(var(--space-20) * 4);   /* 320px */
}

.progress-size-host--circle {
  flex-direction: row;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-12) var(--space-8);
}

[data-annotate-progress] {
  position: relative;
}

/* Behaviour across breakpoints: a flat bar in the wireframes. Grey lines
   for the text, the track and fill in their real colours. */
.wf-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 70%;   /* on its own: up to 640px of a wide page */
}

.wf-progress--wrap {
  width: 100%;
}

.wf-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wf-progress-value {
  width: var(--space-4);
  height: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--grey-200);
}

.wf-progress-track {
  display: block;
  height: var(--space-1);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-border);
}

.wf-progress-fill {
  display: block;
  width: 60%;
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary);
}

/* A small ring beside a line of text: it keeps its size on every screen */
.wf-ring-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.wf-ring {
  flex-shrink: 0;
  width: var(--space-3);
  height: var(--space-3);
  border: var(--border-width-thick) solid var(--color-border);
  border-top-color: var(--color-primary);
  border-right-color: var(--color-primary);
  border-radius: var(--radius-full);
}

.wf-ring-row .wf-line {
  margin: 0;
}

/* Behaviour cards (Progress page): a flat mockup in each grey frame, centred.
   White mini panels with grey lines; only the progress is in colour. */
.wf-frame.pb-frame {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--space-24) * 2);   /* 192px */
  padding: var(--space-6);
}

/* Frames side by side (with arrows between them), or stacked */
.pb-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: 100%;
}

.pb-row--tight {
  gap: var(--space-2);
}

.pb-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
}

.pb-row > .pb-panel {
  flex: 1;
}

/* A frame with a small note under it */
.pb-step {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

/* A white mini panel: a grey heading line, then the progress */
.pb-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.pb-panel .wf-line {
  height: var(--space-1);
  margin: 0;
}

.pb-panel--wide {
  max-width: calc(var(--space-20) * 3);   /* 240px */
}

.pb-panel > .ds-button {
  align-self: flex-start;
}

/* Notes, helper text, arrows, and the tick and cross */
.pb-note,
.pb-helper {
  color: var(--color-text-muted);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  text-align: center;
}

.pb-helper {
  text-align: left;
}

.pb-arrow {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  color: var(--grey-500);
}

.pb-arrow svg,
.pb-arrow i[data-lucide] {
  width: var(--space-4);
  height: var(--space-4);
}

.pb-arrow-text {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

.pb-mark {
  flex-shrink: 0;
  width: var(--space-5);
  height: var(--space-5);
}

.pb-mark--yes { color: var(--color-success); }
.pb-mark--no { color: var(--color-error); }

/* Timing: what shows in each stretch of time, over a timeline (0s, 1s, 10s+) */
.pb-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-3);
  width: 100%;
}

.pb-timeline-cell {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
}

.pb-timeline-axis {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  padding-top: var(--space-1);
  border-top: var(--border-width-thin) solid var(--color-border-strong);
}

/* Each time label, with a small tick on the line above it */
.pb-timeline-axis span {
  position: relative;
  color: var(--color-text-muted);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

.pb-timeline-axis span::before {
  content: "";
  position: absolute;
  top: calc(var(--space-2) * -1);
  left: 0;
  width: var(--border-width-thin);
  height: var(--space-2);
  background: var(--color-border-strong);
}

@media (max-width: 767px) {
  .wf-frame.pb-frame {
    padding: var(--space-4);
  }
}

/* Try it: the bar and the circle side by side on a grey panel, the buttons
   below (the Indeterminate toggle on the right) */
.progress-try {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.progress-try-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

.progress-try-stage .ds-progress-circle {
  min-width: calc(var(--space-24) + var(--space-16));   /* 160px: room for its longest label */
}

.progress-try-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Progress vs spinner vs skeleton: 3 cards (1 on phones) */
@container (min-width: 640px) {
  .usage-grid.cmp-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cmp-progress {
  width: 100%;
}

/* A skeleton picture: a grey avatar and grey lines */
.cmp-skeleton {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.cmp-skeleton-avatar {
  flex-shrink: 0;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-full);
  background: var(--grey-100);
}

.cmp-skeleton-lines {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
}

.cmp-skeleton-lines .wf-line {
  margin: 0;
}

/* Do / Don't pictures */
.progress-dd {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
}

/* Content: a retry link button in the helper text, the same size as the
   words around it */
.progress-dd .ds-progress-helper .ds-button--link {
  min-height: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  vertical-align: baseline;
}

/* "Before" and "After", one above the other */
.progress-dd-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.progress-dd-tag {
  color: var(--color-text-muted);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

/* Don't: where the bar was, now empty */
.progress-gone {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: var(--border-width-thin) dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}

.progress-gone .wf-line {
  margin: 0;
}

.progress-gone-note {
  color: var(--color-text-muted);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

/* Don't: a spinner next to the bar for the same task */
.progress-dd-double {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Accessibility pictures */
.progress-figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: calc(var(--space-24) * 4);   /* 384px */
}

.progress-figure-pair {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* What a screen reader says */
.a11y-sr-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  color: var(--grey-700);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

.a11y-sr-note svg,
.a11y-sr-note i[data-lucide] {
  flex-shrink: 0;
  width: var(--space-5);
  height: var(--space-5);
}

@media (max-width: 767px) {
  /* Try it: the circle drops below the bar */
  .progress-try-stage {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-6);
  }

  /* Anatomy: narrower sides so the labels stay on one line, and the rings
     stack with 128px between them, so their callouts don't meet */
  .progress-anatomy-bars {
    padding-inline: var(--space-8);
  }

  .progress-anatomy-rings {
    flex-direction: column;
    align-items: center;
    gap: calc(var(--space-24) + var(--space-8));
  }

  /* Sizes: the bars' label column needs its room, so each example scrolls
     sideways on its own rather than squashing the marks */
  .annotated-size-stage:has(.progress-size-host) {
    overflow-x: auto;
  }
}

/* ==========================================================================
   Skeleton page (components/skeleton.html)
   ========================================================================== */

/* Variants: shapes on the right of their row; patterns fill the right half
   (Card at the real card's 288px, Table full width below its text) */
.skeleton-variant-example {
  width: 100%;
}

.skeleton-example {
  width: 100%;
}

.skeleton-example--card {
  max-width: calc(var(--space-24) * 3);   /* 288px */
}

.variant-row--stacked .skeleton-variant-example {
  justify-content: flex-start;
}

/* Anatomy and Sizes: the shapes keep still, so they're easy to read */
.skeleton-static-pictures .ds-skeleton::after {
  display: none;
}

/* Anatomy: one panel per variant, each as tall as its own picture (so a
   short one doesn't stretch to match its neighbour): separate panels with
   16px between them, instead of the joined grid */
.anatomy-grid.anatomy-grid--separate {
  align-items: start;
  gap: var(--space-4);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
}

/* …or with the two panels in a row kept the same height (pair similar
   sizes, so neither is left mostly empty), the picture centred in each */
.anatomy-grid.anatomy-grid--even {
  align-items: stretch;
}

.anatomy-grid--even .anatomy-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.anatomy-grid--separate .anatomy-panel {
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* 32px above and below the picture (plus the panel's 40px): room for the
   callouts */
.anatomy-grid--separate .anatomy-stage {
  padding: var(--space-8) 0;
}

/* Each picture's width, leaving room at the sides for callouts */
.skeleton-anatomy-box {
  width: 100%;
  max-width: calc(var(--space-20) * 3);   /* 240px */
}

.skeleton-anatomy-box--list {
  max-width: calc(var(--space-20) * 3.5);   /* 280px */
}

.skeleton-anatomy-box--table {
  max-width: calc(var(--space-20) * 7);   /* 560px */
}

/* Invisible dots for the parts that aren't shapes: the gap between two lines
   (Text, B) and a row's divider (Table, E) */
.skeleton-gap-host,
.anatomy-grid--separate .ds-skeleton-table-row {
  position: relative;
}

.skeleton-gap-marker {
  position: absolute;
  top: var(--space-5);   /* the line between the first two 20px slots */
  right: 0;
  width: var(--border-width-thin);
  height: var(--border-width-thin);
}

.skeleton-divider-marker {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--border-width-thin);
  height: var(--border-width-thin);
}

/* The list pattern in a box, like a list on a page (anatomy A. Container) */
.skeleton-anatomy-box--list .ds-skeleton-list,
.skeleton-size-host .ds-skeleton-list,
.skeleton-dd .ds-skeleton-list,
.skeleton-try-list .ds-skeleton-list {
  padding: var(--space-4);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

/* States: each cell's list item fills the cell, lined up on the left */
.state-demo.skeleton-state {
  display: block;
  width: 100%;
  text-align: left;
}

/* Sizes: each example with room round it for the labels: 48px above, 64px
   below (two rows of labels), 136px on the left and 176px on the right */
.skeleton-size-host {
  position: relative;
  width: max-content;
  padding: var(--space-12) calc(var(--space-24) + var(--space-20)) var(--space-16) calc(var(--space-24) + var(--space-10));
}

.skeleton-size-example--text {
  width: calc(var(--space-20) * 4);   /* 320px */
}

.skeleton-size-example--card {
  width: calc(var(--space-24) * 3);   /* 288px, a card */
}

.skeleton-size-example--table {
  width: calc(var(--space-24) * 5);   /* 480px */
}

.skeleton-size-row {
  gap: var(--space-12);
}

/* Button: each skeleton above its real button */
.skeleton-size-buttons {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
}

.skeleton-size-button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

[data-annotate-skeleton] {
  position: relative;
}

/* The real content used in States, Try it and Accessibility */
.skeleton-real-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.skeleton-try-list .skeleton-real-list {
  padding: var(--space-4);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.skeleton-real-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.skeleton-real-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.skeleton-real-name {
  color: var(--color-text);
  font-size: var(--type-body-small-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-body-small-line-height);
}

.skeleton-real-role {
  color: var(--color-text-muted);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

/* The real table: the same rows, columns and padding as the skeleton table */
.skeleton-real-table {
  width: 100%;
  overflow: hidden;
  border: var(--border-width-thin) solid var(--color-border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
  text-align: left;
}

.skeleton-real-table th,
.skeleton-real-table td {
  padding: var(--space-3) var(--space-4);   /* 44px rows, like the skeleton */
  border-bottom: var(--border-width-thin) solid var(--color-border);
}

.skeleton-real-table tr:last-child td {
  border-bottom: 0;
}

.skeleton-real-table th {
  background: var(--color-surface-muted);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.skeleton-real-table td {
  color: var(--grey-700);
}

.skeleton-real-table th:nth-child(1) { width: 37.5%; }   /* 3 : 2 : 2 : 1 */
.skeleton-real-table th:nth-child(2),
.skeleton-real-table th:nth-child(3) { width: 25%; }

/* Behaviour across breakpoints: grids of flat skeleton cards */
.wf-skel-grid {
  display: grid;
  gap: var(--space-2);
}

.wf-skel-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wf-skel-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wf-skel-grid--1 { grid-template-columns: minmax(0, 1fr); }

.wf-skel-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-bottom: var(--space-2);
  overflow: hidden;
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.wf-skel-image {
  aspect-ratio: 16 / 9;
  margin-bottom: var(--space-1);
  background: var(--skeleton-base);
}

.wf-skel-line {
  height: var(--space-1);
  margin-inline: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--skeleton-base);
}

.wf-skel-line--mid { width: 60%; }
.wf-skel-line--short { width: 35%; }

/* Behaviour cards: the same frames as the Progress page (.pb-*), holding
   the real Skeleton list or the real content it stands in for */
.sb-panel {
  gap: var(--space-2);
}

/* Don't: the header and navigation as real 12px text skeletons, about as
   wide as a navigation word */
.ds-skeleton.sb-nav-skeleton {
  width: var(--space-12);
}

/* Fading: the content half faded in over the skeleton */
.sb-cross {
  position: relative;
  display: block;
}

.sb-cross-over {
  position: absolute;
  inset: 0;
  background: var(--color-surface);
  opacity: var(--opacity-decorative);
}

/* A small page: header and navigation (real) beside the loading content */
.sb-page {
  width: 100%;
  max-width: calc(var(--space-24) * 3);   /* 288px */
  overflow: hidden;
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.sb-page-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width-thin) solid var(--color-border);
}

.sb-page-header .ds-skeleton.sb-line {
  width: var(--space-10);
}

.sb-page-body {
  display: grid;
  grid-template-columns: calc(var(--space-16) + var(--space-2)) minmax(0, 1fr);   /* 72px sidebar */
}

.sb-page-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-right: var(--border-width-thin) solid var(--color-border);
}

.sb-page-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
}

.sb-logo,
.sb-nav {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

.sb-logo {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

.sb-nav {
  color: var(--grey-700);
}

/* Try it: the toggles, then the card beside the list, the table below */
.skeleton-try {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* The Loading and Shimmer toggles, 24px apart */
.skeleton-try-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

.skeleton-try-stage {
  display: grid;
  grid-template-columns: calc(var(--space-24) * 3) minmax(0, 1fr);   /* 288px card */
  align-items: start;
  gap: var(--space-6);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

.skeleton-try-table {
  grid-column: 1 / -1;
}

/* Skeleton vs spinner vs progress bar: a button with a small spinner */
.skeleton-spinner-button {
  gap: var(--space-2);
  pointer-events: none;
}

/* Do / Don't pictures */
.skeleton-dd {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: calc(var(--space-24) * 3);   /* 288px */
  margin-inline: auto;
}

.skeleton-dd-note {
  color: var(--color-text-muted);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

/* Don't: one big block */
.ds-skeleton.skeleton-dd-block {
  width: 100%;
  height: calc(var(--space-24) * 3);   /* 288px, about a card */
}

/* Don't: a long list, cut off at the bottom of the card */
.skeleton-dd-long {
  max-height: calc(var(--space-24) * 3);
  overflow: hidden;
  border-radius: var(--radius-lg);
}

/* Don't: colour, icons and words in the shapes */
.skeleton-dd-colour .ds-skeleton {
  background: var(--dataviz-2-light);
}

.skeleton-dd-colour .ds-skeleton--pill {
  background: var(--dataviz-1-light);
}

.skeleton-dd-colour .ds-skeleton::after {
  display: none;
}

.ds-skeleton.skeleton-dd-words {
  height: auto;
  padding-inline: var(--space-2);
  color: var(--dataviz-2-dark);
  font-size: var(--type-body-small-size);
  line-height: var(--space-5);
}

.ds-skeleton.skeleton-dd-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dataviz-2-dark);
}

.skeleton-dd-icon svg {
  width: var(--space-4);
  height: var(--space-4);
}

/* Accessibility pictures */
.skeleton-a11y-figure {
  margin-top: var(--space-6);
}

.skeleton-figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: calc(var(--space-24) * 4);   /* 384px */
}

/* Two pictures side by side get more room */
.skeleton-figure:has(.skeleton-figure-pair) {
  max-width: calc(var(--space-20) * 8);   /* 640px */
}

.skeleton-figure-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.skeleton-figure-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.skeleton-focus-demo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.skeleton-focus-demo > div {
  width: 100%;
}

@media (max-width: 767px) {
  .skeleton-try-stage {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-4);
  }

  .skeleton-figure-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Behaviour, Fade in: the three frames stack, arrows pointing down */
  .pb-row.sb-steps {
    flex-direction: column;
  }

  .sb-steps > .pb-step {
    width: 100%;
    max-width: calc(var(--space-24) * 2);   /* 192px */
  }

  .sb-steps > .pb-arrow {
    flex-direction: row;
    gap: var(--space-1);
  }

  .sb-steps > .pb-arrow svg {
    transform: rotate(90deg);
  }

  /* Sizes: the card's label columns need their room, so it scrolls
     sideways on its own rather than squashing the marks */
  .annotated-size-stage:has(.skeleton-size-host) {
    overflow-x: auto;
  }
}

/* ==========================================================================
   Spinner page (components/spinner.html)
   ========================================================================== */

/* Anatomy and Sizes: the spinners keep still (indicator from the top to the
   right), so the parts are easy to point at */
.spinner-static .ds-spinner-ring {
  animation: none;
}

/* Buttons shown in several states keep one width (Save / Saving… / Saved) */
.ds-button.spinner-same-width {
  min-width: calc(var(--space-24) + var(--space-8));   /* 128px */
}

.ds-button.spinner-same-width--sm {
  min-width: calc(var(--space-24) + var(--space-6));   /* 120px */
}

/* Section: a card with the spinner centred in it */
.spinner-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: calc(var(--space-20) * 3);   /* 240px */
  min-height: calc(var(--space-24) + var(--space-16));   /* 160px */
  padding: var(--space-6);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

/* Inverse: a dark pink-900 panel */
.spinner-dark {
  display: inline-flex;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--pink-900);
}

.spinner-variant-example {
  width: 100%;
}

/* Sizes: room round each example for the labels */
.spinner-size-host {
  position: relative;
  display: inline-flex;
  padding: var(--space-16) var(--space-8) var(--space-12) calc(var(--space-24) + var(--space-8));
}

/* Behaviour across breakpoints: a white card with the spinner centred */
.wf-spinner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: calc(var(--space-24) + var(--space-4));   /* 112px */
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.wf-spinner-card .wf-line {
  margin: 0;
}

/* Behaviour cards (the shared .pb-* frames) */
.spinner-panel {
  align-items: flex-start;
}

.spinner-panel--centre {
  align-items: center;
  padding-block: var(--space-4);
}

.spinner-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}


/* Try it: the Save panel beside the activity card */
.spinner-try {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-6);
}

.spinner-try-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

#spinner-save-result {
  width: 100%;
}

.doc-section .spinner-try-title {
  margin: 0;
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-body-line-height);
}

.spinner-try-card {
  align-items: stretch;
  border: var(--border-width-thin) solid var(--color-border);
  background: var(--color-surface);
}

.spinner-try-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* The body keeps its height while the spinner shows, so nothing jumps */
.spinner-try-card-body {
  display: flex;
  min-height: calc(var(--space-24) + var(--space-12));   /* 144px */
}

.spinner-activity {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--grey-700);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

.spinner-activity li {
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width-thin) solid var(--color-border);
}

/* The list or the spinner: whichever isn't hidden */
.spinner-activity[hidden],
.spinner-try-section[hidden] {
  display: none;
}

.spinner-try-section {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

/* Do / Don't pictures */
.spinner-dd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
}

.spinner-dd-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

.spinner-dd-tag {
  color: var(--color-text-muted);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

/* "Save changes" and "Saving…" share one width */
.ds-button.spinner-dd-save {
  min-width: calc(var(--space-24) + var(--space-16) + var(--space-2));   /* 168px */
}

.spinner-dd-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(var(--space-24) + var(--space-8));   /* 128px */
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* One area vs several spinners: a small page of cards */
.spinner-page {
  width: 100%;
  overflow: hidden;
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-md);
}

.spinner-page-header {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width-thin) solid var(--color-border);
}

.spinner-page-header .wf-line {
  height: var(--space-2);
  margin: 0;
}

.spinner-page-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-3);
}

.spinner-page-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--space-16) + var(--space-4));   /* 80px */
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
}

.spinner-page-card--wide {
  grid-column: 1 / -1;
  min-height: calc(var(--space-24) + var(--space-16));   /* 160px */
}

/* Colours: the right spinner on each background, and the wrong one */
.spinner-dd-colours {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.spinner-dd-pink .ds-spinner {
  --spinner-indicator: var(--color-primary);
  --spinner-track: var(--color-border);
}

.spinner-pink {
  display: inline-flex;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--pink-600);
  color: var(--color-on-primary);
}

.spinner-pink .ds-spinner {
  color: inherit;
}

/* Accessibility pictures */
.spinner-figure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  width: 100%;
  max-width: calc(var(--space-24) * 4);   /* 384px */
}

@media (max-width: 767px) {
  .spinner-try {
    grid-template-columns: minmax(0, 1fr);
  }

  .annotated-size-stage:has(.spinner-size-host) {
    overflow-x: auto;
  }
}

/* ==========================================================================
   Checkbox page (components/checkbox.html)
   ========================================================================== */

/* Variants: the checkboxes on the right; groups keep their own left edge */
.checkbox-variant-example {
  text-align: left;
}

.checkbox-cards-example {
  width: 100%;
  max-width: calc(var(--space-20) * 4);   /* 320px */
}

/* States: each cell's checkbox, with its message for Error */
.state-demo.checkbox-state {
  display: inline-flex;
  text-align: left;
}

.checkbox-error-demo {
  display: flex;
  flex-direction: column;
}

/* Anatomy: room round each picture for the callouts */
.checkbox-anatomy-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.checkbox-anatomy-card {
  width: calc(var(--space-20) * 3);   /* 240px */
}

/* Anatomy: 40px above and below each picture for the callouts, and the
   invisible dots for the gap (Horizontal group), the indent (Indeterminate)
   and the selected border (Selection card) */
.checkbox-anatomy-stage {
  padding-block: var(--space-10);
}

.checkbox-anatomy-card .ds-checkbox-card {
  position: relative;
}

.checkbox-gap-marker,
.checkbox-indent-marker,
.checkbox-border-marker {
  position: absolute;
  width: var(--border-width-thin);
  height: var(--border-width-thin);
}

.checkbox-gap-marker {
  top: 50%;
  right: calc(var(--space-3) * -1);   /* the middle of the 24px gap */
}

.checkbox-indent-marker {
  top: 50%;
  left: calc((var(--space-5) + var(--space-2)) / -2);   /* the middle of the 28px indent */
}

.checkbox-border-marker {
  top: calc(var(--border-width-thin) * -1);
  right: var(--space-8);
}

/* Sizes: room round each example for the labels (at least 48px: 120px on
   the left, 208px on the right for the longest labels, 72px below for two
   rows of labels) */
.checkbox-size-host {
  position: relative;
  display: inline-flex;
  padding: var(--space-12) calc(var(--space-24) * 2 + var(--space-4)) calc(var(--space-16) + var(--space-2)) calc(var(--space-24) + var(--space-6));
}

/* Single: Small and Medium side by side, each with its own label room */
.checkbox-size-pair {
  display: flex;
  flex-wrap: wrap;
}

.checkbox-size-pair .checkbox-size-host {
  padding-right: calc(var(--space-24) + var(--space-12));
}

.checkbox-size-cards {
  width: calc(var(--space-20) * 3.5);   /* 280px */
}

[data-annotate-checkbox] {
  position: relative;
}

/* Behaviour across breakpoints: flat checkboxes (the boxes in colour) */
.wf-check-row {
  display: flex;
  gap: var(--space-3);
}

.wf-check {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.wf-check .wf-line {
  margin: 0;
}

/* Touch: each row a 44px-style click area, shown with a dashed outline */
.wf-check--touch {
  min-height: var(--space-6);
  padding-inline: var(--space-1);
  border: var(--border-width-thin) dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
}

.wf-check-box {
  flex-shrink: 0;
  width: var(--space-2);
  height: var(--space-2);
  border: var(--border-width-thin) solid var(--grey-500);
  border-radius: calc(var(--radius-sm) / 2);
  background: var(--color-surface);
}

.wf-check-box--on {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

/* Behaviour cards (the shared .pb-* frames). A wide one spans both columns. */
.dd-pair--mockups > .pb-card--wide {
  grid-column: 1 / -1;
}

.checkbox-panel {
  gap: var(--space-2);
}

.checkbox-panel > .ds-button {
  align-self: flex-start;
}

/* A pointer over the label */
.checkbox-cursor-demo {
  position: relative;
  display: inline-flex;
}

.state-cursor.checkbox-label-cursor {
  top: 50%;
  right: auto;
  left: calc(var(--space-16) + var(--space-4));
}

/* Try it: the form */
.checkbox-try {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

.checkbox-try .ds-checkbox-cards {
  width: 100%;
  max-width: calc(var(--space-20) * 4);
}

.checkbox-try-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.checkbox-try-status {
  margin: 0;
  color: var(--color-success);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

/* Checkbox vs radio vs toggle */
.cmp-checks {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Do / Don't pictures */
.checkbox-dd {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

/* Don't: only the box can be clicked (the words are plain text) */
.checkbox-split {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.checkbox-split-text {
  color: var(--color-text);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
}

.checkbox-narrow {
  max-width: calc(var(--space-20) * 3.5);   /* 280px */
}

/* Accessibility pictures */
.checkbox-figure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

/* The click area, outlined */
.checkbox-target-demo .ds-checkbox {
  outline: var(--border-width-thin) dashed var(--color-info);
  outline-offset: var(--space-1);
}

/* Checkbox page, small pictures: they stay compact on touch screens (no
   44px rows; those are for the real checkboxes) */
@media (pointer: coarse), (max-width: 767px) {
  .pb-frame .ds-checkbox,
  .checkbox-dd .ds-checkbox,
  .cmp-visual .ds-checkbox {
    min-height: var(--size-target-minimum);
    padding-block: 0;
  }

  .pb-frame .ds-checkbox-options,
  .pb-frame .ds-checkbox-nested,
  .pb-frame .ds-checkbox-children {
    gap: var(--space-2);
  }
}

@media (max-width: 767px) {
  /* Behaviour: the frames stack, arrows pointing down */
  .checkbox-behaviour .pb-row {
    flex-direction: column;
    align-items: stretch;
  }

  .checkbox-behaviour .pb-arrow svg {
    transform: rotate(90deg);
  }
}

@media (max-width: 767px) {
  /* Sizes: the labels need their room, so each example scrolls sideways
     on its own rather than the page */
  .annotated-size-stage:has(.checkbox-size-host) {
    overflow-x: auto;
  }
}

/* ==========================================================================
   Date picker page (components/date-picker.html)
   ========================================================================== */

/* Pictures shown open: the calendar sits in the page, 8px under the field */
.datepicker-static .ds-datepicker-control {
  max-width: none;
}

.datepicker-static .ds-datepicker-control > .ds-datepicker-field,
.datepicker-static .ds-datepicker-range {
  max-width: calc(var(--space-24) * 3);   /* 288px, like the live field */
}

.datepicker-static .ds-datepicker-range {
  max-width: calc(var(--space-24) * 4);   /* 384px for two fields */
}

.datepicker-static .ds-datepicker-popup,
.ds-datepicker-popup.datepicker-static-popup {
  position: static;
  width: max-content;
  margin-top: var(--space-2);
}

.datepicker-picture {
  display: flex;
  justify-content: flex-end;
  max-width: 100%;
}

.variant-row--stacked .datepicker-picture {
  justify-content: flex-start;
}

.datepicker-variant-example {
  width: 100%;
  overflow-x: auto;   /* the wide pictures scroll on small screens */
}

/* States: fields at the width of the cell, single days and strips */
.state-demo.datepicker-state {
  display: block;
  width: 100%;
  text-align: left;
}

.state-cell-demo:has(.datepicker-state) {
  align-self: stretch;   /* the field takes the cell's width */
}

.state-demo.datepicker-state .ds-datepicker-control {
  max-width: none;
}

/* Day cells: just the day (so the hover pointer sits next to it) */
.state-demo.datepicker-state:has(.datepicker-day-demo) {
  display: inline-flex;
  width: auto;
}

.state-cell-demo:has(.datepicker-day-demo) {
  align-self: center;
}

.ds-calendar.datepicker-day-demo {
  justify-content: center;
  padding: 0;
}

.ds-calendar-week.datepicker-strip {
  grid-template-columns: repeat(3, var(--day-size));
}

/* Anatomy: wide panels for the pictures, room for the callouts */
.datepicker-anatomy-stage {
  justify-content: flex-start;
  padding: var(--space-12) var(--space-16);
  overflow-x: auto;
}

/* Sizes */
.datepicker-size-host {
  position: relative;
  display: inline-flex;
  padding: var(--space-12) calc(var(--space-24) + var(--space-16)) var(--space-16) calc(var(--space-24) + var(--space-8));
}

[data-annotate-datepicker] {
  position: relative;
}

/* Anatomy on narrower screens: the wide pictures scroll in their panel,
   and callouts past its edge are cut off rather than widening the page */
.anatomy-panel:has(.datepicker-anatomy-stage) {
  overflow: clip;
}

/* The wide examples scroll inside their panel when the page is narrower */
.annotated-size-stage:has(.datepicker-size-host) {
  overflow-x: auto;
}

/* Presets: its one label sits above, so it needs little room at the sides */
.datepicker-size-host--tight {
  padding-inline: var(--space-4);
}

/* Wide variants line up on the left, under their text */
.variant-row--stacked .datepicker-variant-example {
  justify-content: flex-start;
}

.datepicker-size-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: calc(var(--space-24) * 3);
}

.datepicker-size-fields .ds-datepicker-hint {
  display: none;
}

/* Behaviour across breakpoints: flat fields and calendars */
.wf-dp-fields {
  display: flex;
  gap: var(--space-1);
}

.wf-dp-field {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  max-width: calc(var(--space-20) + var(--space-4));
  padding: var(--space-1);
  border: var(--border-width-thin) solid var(--grey-500);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.wf-main > .wf-dp-field {
  flex: none;   /* on its own (phone), just the field's height */
}

.wf-dp-field .wf-line {
  margin: 0;
}

.wf-dp-icon {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: calc(var(--radius-sm) / 2);
  background: var(--grey-400);
}

.wf-dp-popup {
  display: inline-flex;
  align-self: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.wf-dp-month {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* The tiny calendar: 6 weeks of 7 squares */
.wf-cal {
  display: grid;
  grid-template-columns: repeat(7, var(--space-2));
  gap: calc(var(--space-1) / 2);
}

.wf-cal-day {
  position: relative;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: calc(var(--radius-sm) / 2);
  background: var(--grey-100);
}

.wf-cal-day.is-outside { background: var(--grey-50); }
.wf-cal-day.is-range { background: var(--color-primary-subtle); box-shadow: 0 0 0 var(--border-width-thin) var(--pink-200); }
.wf-cal-day.is-preview { background: var(--color-primary-subtle); outline: var(--border-width-thin) dashed var(--color-primary); }
.wf-cal-day.is-on { background: var(--color-primary); }
.wf-cal-day.is-off { background: var(--grey-50); }
.wf-cal-day.is-off::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: var(--border-width-thin);
  background: var(--grey-300);
}
.wf-cal-day.is-today { box-shadow: inset 0 calc(var(--border-width-thick) * -1) 0 var(--color-primary); }

.wf-cal-title {
  display: block;
  min-height: var(--space-2);
  color: var(--color-text);
  font-size: var(--type-caption-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-caption-line-height);
  text-align: center;
}

.wf-cal-title:empty {
  width: 50%;
  min-height: var(--space-1);
  margin: 0 auto;
  border-radius: var(--radius-full);
  background: var(--grey-200);
}

/* A pointer on a day in the small calendars */
.wf-cal-day.has-cursor::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--space-2);
  height: var(--space-2);
  border-top: var(--border-width-thick) solid var(--grey-900);
  border-left: var(--border-width-thick) solid var(--grey-900);
  transform: rotate(-15deg);
}

/* The phone's bottom sheet, over a dimmed page */
.wf-page--sheet {
  position: relative;
}

.wf-dp-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--grey-900) 40%, transparent);
}

.wf-dp-sheet {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--color-surface);
}

.wf-dp-chips {
  display: flex;
  align-self: stretch;
  gap: var(--space-1);
}

.wf-dp-chip {
  width: var(--space-6);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--grey-100);
}

.wf-dp-chip.is-on { background: var(--color-primary-subtle); box-shadow: inset 0 0 0 var(--border-width-thin) var(--pink-200); }

.wf-dp-sheet .wf-cal {
  grid-template-columns: repeat(7, var(--space-3));
}

.wf-dp-sheet .wf-cal-day {
  width: var(--space-3);
  height: var(--space-3);
}

.wf-dp-apply {
  align-self: stretch;
  height: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
}

/* Try it: the four pickers in a grid; room below for the calendars */
.datepicker-try {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-8);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

/* Do / Don't, Content and Accessibility pictures */
.datepicker-dd,
.datepicker-figure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 100%;
  overflow-x: auto;
}

.datepicker-dd-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.datepicker-dd-note {
  color: var(--color-text-muted);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

.datepicker-dd-text {
  margin: 0;
  color: var(--color-text);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

@media (max-width: 767px) {
  .datepicker-try {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-4);
  }

  .annotated-size-stage:has(.datepicker-size-host) {
    overflow-x: auto;
  }
}

/* ==========================================================================
   Text input page (components/text-input.html)
   ========================================================================== */

/* Variants: each example on the right, at its own width */
.ti-variant-example {
  width: 100%;
}

.ti-picture {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.ti-picture > .ds-field {
  flex: 1;
}

/* Prefix and suffix: two short fields side by side */
.ti-affixes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-4);
  width: 100%;
}

/* Input types: 4 cards, 2 per row (1 on phones) */
.ti-types {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.ti-type {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

.doc-section .ti-type .variant-name {
  margin: 0;
}

.ti-type-keyboard {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

.ti-type-keyboard svg,
.ti-type-keyboard i[data-lucide] {
  flex-shrink: 0;
  width: var(--space-4);
  height: var(--space-4);
}

/* States: each field at the cell's width */
/* Field state grids: each field sits at the top of its card (not centred),
   so labels and fields line up across a row even when one card has a
   message below its field */
.states-grid--fields .state-cell-demo {
  align-items: flex-start;
}

.state-cell-demo:has(.ti-state) {
  align-self: stretch;
}

.state-demo.ti-state {
  display: block;
  width: 100%;
  text-align: left;
}

/* Anatomy: room round each field for the callouts */
.ti-anatomy-stage {
  padding: var(--space-12) var(--space-16);
}

.ti-anatomy-stage > .ds-field,
.ti-anatomy-stage > .ti-affixes {
  width: 100%;
}

.ti-anatomy-stage > .ti-affixes {
  justify-content: flex-start;
}

/* Sizes: room round each example for the labels */
.annotated-size-stage:has(.ti-size-host) {
  overflow-x: auto;
}

.ti-size-host {
  position: relative;
  display: inline-flex;
  padding: var(--space-12) calc(var(--space-24) + var(--space-20)) var(--space-16) calc(var(--space-24) + var(--space-12));
}

.ti-size-host [data-size-example] {
  width: calc(var(--space-24) * 3);   /* 288px */
}

.ti-size-host .ti-affixes {
  justify-content: flex-start;
}

.ti-size-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

[data-annotate-input] {
  position: relative;
}

/* Behaviour across breakpoints: flat fields, the boxes in their real look */
.wf-ti {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.wf-ti-label {
  width: var(--space-10);
  height: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--grey-300);
}

.wf-ti-box {
  display: block;
  flex: 1;
  height: var(--space-3);
  border: var(--border-width-thin) solid var(--field-border);
  border-radius: calc(var(--radius-sm) / 2);
  background: var(--color-surface);
}

.wf-ti--short .wf-ti-box { width: var(--space-10); flex: none; }
.wf-ti--long .wf-ti-box { width: 70%; flex: none; }
.wf-ti--full .wf-ti-box { width: 100%; }

.wf-ti-join {
  display: flex;
  width: 70%;
}

.wf-ti-join .wf-ti-box {
  border-radius: calc(var(--radius-sm) / 2) 0 0 calc(var(--radius-sm) / 2);
}

.wf-ti-button {
  width: var(--space-8);
  height: var(--space-3);
  border-radius: 0 calc(var(--radius-sm) / 2) calc(var(--radius-sm) / 2) 0;
  background: var(--color-primary);
}

/* Phone: the button drops below the field, full width */
.wf-ti--stacked .wf-ti-join {
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
}

.wf-ti--stacked .wf-ti-box,
.wf-ti--stacked .wf-ti-button {
  width: 100%;
  border-radius: calc(var(--radius-sm) / 2);
}

/* Behaviour cards (the shared .pb-* frames). Frames wrap onto a new line
   when there isn't room for them side by side. */
.dd-card .pb-row:has(.ti-panel) {
  flex-wrap: wrap;
}

.ti-panel {
  gap: var(--space-3);
}

.ti-panel .ds-field {
  max-width: none;
}

.ti-panel .ds-field--narrow {
  max-width: calc(var(--space-24) + var(--space-8));
}

/* Autofill: the browser's suggestion under the field */
.ti-autofill {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

.ti-autofill svg,
.ti-autofill i[data-lucide] {
  width: var(--space-4);
  height: var(--space-4);
  color: var(--color-text-muted);
}

/* Try it: the form beside the search */
.ti-try {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: start;
  gap: var(--space-8);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

.ti-try-form,
.ti-try-search {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;   /* never wider than its column, so both stay inside the grey box's padding */
}

.ti-try .ds-field {
  max-width: min(100%, calc(var(--space-24) * 4));   /* 384px, or the column if narrower */
}

.doc-section .ti-try-title {
  margin: 0;
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-body-line-height);
}

.ti-try-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.ti-try-status {
  margin: 0;
  color: var(--color-success);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

.ti-results {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

.ti-results li {
  padding: var(--space-2) 0;
  border-bottom: var(--border-width-thin) solid var(--color-border);
  color: var(--color-text);
}

.ti-results li[hidden] {
  display: none;
}

/* Do / Don't, Content and Accessibility pictures */
.ti-dd,
.ti-figure {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
  width: 100%;
  max-width: calc(var(--space-24) * 4);   /* 384px */
}

.ti-dd-wide .ds-field + .ds-field {
  margin-top: var(--space-4);
}

/* Don't: the hint hidden behind an icon */
.ti-tip-label {
  position: relative;
}

.ti-tip {
  position: absolute;
  top: 0;
  left: calc(var(--space-20) + var(--space-1));
  color: var(--color-text-muted);
}

.ti-tip svg,
.ti-tip i[data-lucide] {
  width: var(--space-4);
  height: var(--space-4);
}

/* The 24px clear button, outlined */
.ti-target-demo .ds-input-clear {
  outline: var(--border-width-thin) dashed var(--color-info);
  outline-offset: var(--border-width-thick);
}

@media (max-width: 767px) {
  .ti-types,
  .ti-try {
    grid-template-columns: minmax(0, 1fr);
  }

  .ti-try {
    padding: var(--space-4);
  }

  .ti-picture,
  .ti-affixes {
    justify-content: flex-start;
  }
}

/* ==========================================================================
   Accessibility: "For developers" line
   Each accessibility point leads with a plain-language rule (.section-intro).
   Any code sits below it in this small grey line, 8px under the rule and
   24px above the example. It's the only place code appears in page text
   (apart from Copy CSS).
   ========================================================================== */
.section-intro:has(+ .a11y-dev) {
  margin-bottom: var(--space-2);
}

.doc-section p.a11y-dev {
  margin: 0 0 var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

.a11y-dev-label {
  margin-right: var(--space-1);
  font-weight: var(--font-weight-semibold);
}

.a11y-dev code {
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--grey-100);
  color: var(--grey-700);
  font-family: var(--font-family-mono);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  overflow-wrap: anywhere;   /* long attributes wrap on phones */
}

/* ==========================================================================
   Radio button page (components/radio-button.html)
   It pairs with the Checkbox page and reuses its docs classes (checkbox-dd,
   checkbox-figure, checkbox-size-host, checkbox-try, checkbox-behaviour…).
   These are the extra bits for radio buttons.
   ========================================================================== */

[data-annotate-radio] {
  position: relative;
}

/* Variants, Anatomy and Sizes: room for the follow-up field */
.radio-followup-example,
.radio-try-followup {
  width: 100%;
  max-width: calc(var(--space-24) * 4);   /* 384px */
}

.radio-anatomy-followup,
.radio-size-followup {
  width: calc(var(--space-20) * 4);       /* 320px */
}

.radio-panel-followup {
  width: calc(var(--space-24) * 2 + var(--space-12));   /* 240px */
}

/* Behaviour across breakpoints: round radio buttons and selection cards */
.wf-check-box--round {
  border-radius: var(--radius-full);
}

.wf-check-box--round.wf-check-box--on {
  border-color: var(--color-primary);
  background: var(--color-primary);
  box-shadow: inset 0 0 0 var(--border-width-thick) var(--color-surface);   /* a ring with a dot */
}

.wf-radio-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
}

.wf-radio-cards--stacked {
  grid-template-columns: minmax(0, 1fr);
}

.wf-radio-card {
  display: flex;
  padding: var(--space-1);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.wf-radio-card--on {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
}

/* Behaviour: a pointer over the circle */
.state-cursor.radio-dot-cursor {
  top: 50%;
  right: auto;
  left: var(--space-2);
}

/* Radio vs checkbox vs dropdown, and Do / Don't: a closed dropdown picture */
.radio-dropdown-pic {
  width: calc(var(--space-24) * 2 + var(--space-12));   /* 240px */
}

/* Don't: a long list of radio buttons */
.radio-long-list .ds-radio-options {
  gap: var(--space-1);
}

/* Accessibility: the group in black and white */
.radio-greyscale {
  filter: grayscale(1);
}

/* The click area, outlined */
.checkbox-target-demo .ds-radio {
  outline: var(--border-width-thin) dashed var(--color-info);
  outline-offset: var(--space-1);
}

/* Small pictures stay compact on touch screens (44px rows are for the real ones) */
@media (pointer: coarse), (max-width: 767px) {
  .pb-frame .ds-radio,
  .checkbox-dd .ds-radio,
  .cmp-visual .ds-radio,
  .checkbox-figure .ds-radio {
    min-height: var(--size-target-minimum);
    padding-block: 0;
  }

  .pb-frame .ds-radio-options,
  .checkbox-dd .ds-radio-options,
  .cmp-visual .ds-radio-options {
    gap: var(--space-2);
  }
}

/* --- Table page --------------------------------------------------------------- */

/* Variants and table states: each table fills the row, below its text */
.table-variant-example {
  display: block;
  width: 100%;
  min-width: 0;
}

.table-picture {
  position: relative;
  width: 100%;
}

/* Filterable: the Filter popover is shown open, floating over the table
   like the real one. The picture keeps room below for it. */
.table-picture--filter {
  padding-bottom: var(--space-12);   /* 48px: the Small popover reaches about 20–28px below the table */
}

.table-filter-anchor {
  position: relative;
}

.table-filter-anchor .ds-popover.popover-static {
  position: absolute;
  top: calc(100% + var(--space-2) + var(--space-2));   /* 8px to the caret tip + the 8px caret */
  left: calc(50% - var(--radius-lg) - var(--space-4)); /* the caret points at the button's middle */
  z-index: var(--layer-dropdown);
  width: max-content;
  max-width: calc(var(--space-20) * 4);   /* 320px, the popover's usual limit */
}

/* Status and Owner side by side in the popover */
.table-filter-groups {
  display: flex;
  gap: var(--space-8);
  margin-top: var(--space-3);
}

/* The Filter button while its popover is open keeps its Secondary look */
.table-filter-open {
  pointer-events: none;
}

/* Row actions: the open menu floats over the rows below it */
.table-menu-open.dropdown-static--float {
  margin-bottom: 0;
}

.table-menu-open .ds-dropdown-control {
  position: relative;
  display: block;
}

.table-menu-open .ds-dropdown-menu {
  position: absolute;
  top: calc(100% + var(--space-1));   /* 4px from the trigger, like the live menus */
  right: 0;
  z-index: var(--layer-dropdown);
  text-align: left;
}

/* Scrolling: a short box, so the sticky header shows when you scroll down */
.table-scroll-demo {
  max-height: calc(var(--space-16) * 4);   /* 256px: the header and about 5 rows */
}

/* Row and cell states: each mini table fills its cell */
.state-demo.table-state {
  display: block;
  width: 100%;
  text-align: left;
}

/* A header row on its own: the box's border is its bottom line */
.table-state thead th {
  border-bottom: 0;
}

/* The mini tables fill the cell's width */
.state-cell-demo:has(> .table-state) {
  align-self: stretch;
}

.state-cursor.table-cursor {
  top: 50%;
  right: var(--space-8);
  bottom: auto;
}

/* Thead-only mini tables (sort steps, focus pictures): the box's border is
   the header's bottom line */
.table-head-only thead th {
  border-bottom: 0;
}

/* A picture: inert, never clickable */
.table-pic {
  min-width: 0;
  pointer-events: none;
}

/* 5. Anatomy: each table up to 640px wide, centred, leaving room for the
   callouts at the sides */
.table-anatomy-box {
  width: 100%;
  max-width: calc(var(--space-20) * 8);   /* 640px */
}

/* Export and New project, marked together as "Actions" */
.table-anatomy-group {
  display: inline-flex;
  gap: var(--space-2);
}

/* 6. Sizes and 7. Alignment: the real table, with room around it for the
   labels (main.js, section 37) */
.table-size-stage {
  overflow-x: auto;
}

.table-size-host {
  position: relative;
  width: max-content;
  padding: var(--space-12) calc(var(--space-24) + var(--space-4)) var(--space-12) calc(var(--space-24) + var(--space-4));
}

.table-size-example {
  width: calc(var(--space-20) * 6);   /* 480px */
}

.table-size-example--wide {
  width: calc(var(--space-20) * 8);   /* 640px */
}

/* Row density: three small tables side by side (they wrap on small
   screens), each with its row height on the left */
.table-density-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.table-size-host--density {
  flex: 1 1 calc(var(--space-24) * 2);
  width: auto;
  padding: 0 0 0 var(--space-10);
}

.doc-section .table-size-name {
  margin: 0 0 var(--space-2);
  color: var(--grey-700);
  font-size: var(--type-body-small-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-body-small-line-height);
}

.table-size-host--align {
  padding-top: calc(var(--space-16) + var(--space-2));   /* two rows of labels above */
  padding-bottom: var(--space-6);
}

.table-align-list {
  margin-top: var(--space-6);
}

/* The toolbar on its own: no line under it */
.table-size-toolbar,
.table-dd-toolbar {
  border-bottom: 0;
}

/* 8. Behaviour across breakpoints: a flat table in each screen. Greys
   for everything; the tags and the Primary button keep their colour. */
.wf-tbl {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--border-width-thin) solid var(--grey-200);
  border-radius: var(--radius-sm);
  background: var(--grey-0);
}

.wf-tbl-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-bottom: var(--border-width-thin) solid var(--grey-200);
}

.wf-tbl-search {
  flex: 0 1 40%;
  height: var(--space-3);
  border: var(--border-width-thin) solid var(--grey-300);
  border-radius: var(--radius-sm);
}

.wf-tbl-buttons {
  display: flex;
  gap: var(--space-1);
}

.wf-tbl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-3);
  box-sizing: border-box;
  border: var(--border-width-thin) solid var(--grey-300);
  border-radius: var(--radius-sm);
  color: var(--grey-500);
}

.wf-tbl-btn--primary {
  width: var(--space-8);
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.wf-tbl-btn--more {
  width: var(--space-3);
}

.wf-tbl-btn svg,
.wf-tbl-btn i[data-lucide] {
  width: var(--space-2);
  height: var(--space-2);
}

/* Phones: search on its own line, full width; the More button below it */
.wf-tbl--phone .wf-tbl-search {
  flex-basis: 100%;
}

.wf-tbl--phone .wf-tbl-buttons {
  margin-left: auto;
}

.wf-tbl-viewport {
  overflow: hidden;
}

.wf-tbl-grid {
  display: grid;
}

.wf-tbl-grid--5 { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); }
.wf-tbl-grid--3 { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }

/* Phones: the columns are wider than the screen; Name stays on the left */
.wf-tbl--phone .wf-tbl-grid {
  width: 190%;
}

.wf-tbl-cell {
  display: flex;
  align-items: center;
  min-height: var(--space-4);
  padding: 0 var(--space-1);
  border-bottom: var(--border-width-thin) solid var(--grey-100);
  background: var(--grey-0);
}

.wf-tbl-cell--head {
  background: var(--grey-50);
}

.wf-tbl-cell--num {
  justify-content: flex-end;
}

.wf-tbl-cell--sticky {
  border-right: var(--border-width-thin) solid var(--grey-300);
}

.wf-tbl-line {
  width: 60%;
  height: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--grey-200);
}

.wf-tbl-line--long { width: 80%; }

.wf-tbl-line--dark {
  width: 50%;
  background: var(--grey-400);
}

.wf-tbl-tag {
  width: 70%;
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--grey-200);
}

.wf-tbl-tag--info     { background: var(--blue-200); }
.wf-tbl-tag--warning  { background: var(--amber-200); }
.wf-tbl-tag--positive { background: var(--green-200); }

/* 9. Behaviour cards: the real table parts (Small controls) in the grey
   frames. These rules only size and space the pictures; the parts keep
   their own styles. */
.tb-wide {
  width: 100%;
  max-width: calc(var(--space-20) * 4);   /* 320px */
}

/* Wide cards (both columns): the picture fills the frame, up to 640px */
.tb-full,
.tb-batch-steps,
.tb-filter-steps {
  width: 100%;
  max-width: calc(var(--space-20) * 8);   /* 640px */
}

.tb-filter-steps {
  max-width: calc(var(--space-20) * 4);   /* 320px */
}

.pb-rows > .pb-step,
.tb-batch-steps,
.tb-filter-steps {
  align-items: center;
}

.tb-batch-steps > .ds-table-container,
.tb-filter-steps > .ds-table-container {
  width: 100%;
}

/* Sort steps: three header cells in a row */
.tb-sort-steps .pb-step {
  flex: 0 1 auto;
}

/* Changing pages: the real Small pagination under the batch bar, 12px 16px
   around it like the table's toolbar */
.tb-pagination {
  display: flex;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
}

.tb-page-steps > .pb-step {
  flex: 1 1 0;
  min-width: 0;
}

/* Deleting: the real Small modal (400px) fits beside the menu */
.ds-modal.tb-modal-pic {
  width: calc(var(--space-20) * 5);   /* 400px */
  max-width: 100%;
}

/* Cursors pointing at a tag's x and a group header */
.tb-cursor-host {
  position: relative;
  display: inline-flex;
}

.tb-wide.tb-cursor-host {
  display: block;
}

.state-cursor.tb-tag-cursor {
  top: 40%;
  right: calc(-1 * var(--space-2));
}

.state-cursor.tb-group-cursor {
  top: 66%;
  right: 60%;
}

/* 10. Try it */
.table-try {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.table-try-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
}

.table-try-density {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.table-try-label {
  color: var(--color-text);
  font-size: var(--type-body-small-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-body-small-line-height);
}

.table-try-density .ds-dropdown {
  width: calc(var(--space-24) + var(--space-8));   /* 128px */
}

/* 12. Do / Don't and 13. Content pictures */
.table-dd {
  width: 100%;
}

.ds-table th.table-dd-centre,
.ds-table td.table-dd-centre {
  text-align: center;
}

/* Long headers that wrap onto two lines (the Don't) */
.table-dd-headers .ds-table thead th {
  white-space: normal;
}

/* The name pushed off the right-hand edge (the Don't) */
.table-dd-cut {
  overflow: hidden;
}

.table-dd-empty .table-dd-blank > td {
  height: calc(var(--space-24) + var(--space-12));   /* 144px of nothing */
  padding: 0;
}

/* Delete from the row menu: the open menu floats over the table */
.table-dd-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: var(--space-16);
}

.table-dd-menu .ds-table-scroll {
  overflow: visible;
}

/* 14. Accessibility pictures */
.table-a11y-pic {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.doc-section .table-a11y-caption {
  margin: 0 0 var(--space-2);
  font-size: var(--type-body-small-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-body-small-line-height);
}

.table-greyscale {
  filter: grayscale(1);
}

.table-focus-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  padding: var(--space-2) 0;   /* room for the rings above and below */
}

/* Each part: its label on top, then the control centred in a 44px slot,
   so all four labels and all four controls line up across the row */
.table-focus-item {
  display: grid;
  grid-template-rows: auto var(--size-control-standard);
  justify-items: center;
  align-items: center;
  gap: var(--space-3);
}

.table-focus-name {
  color: var(--grey-700);
  font-size: var(--type-caption-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-caption-line-height);
}

.table-focus-checkbox {
  display: inline-flex;
  padding: var(--space-1);
}

@media (max-width: 767px) {
  .table-focus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Sorting card: each header picture as wide as its header */
.tb-sort-steps .ds-table-container,
.table-focus-item .ds-table-container {
  width: max-content;
}

/* (The scroll box normally sizes itself from the space it's in, which is
   none here, so let it size to the header instead) */
.tb-sort-steps .ds-table-scroll,
.table-focus-item .ds-table-scroll {
  container-type: normal;
}

/* Sizes, Toolbar: wide enough for the search to reach its 320px, with the
   padding label below instead of at the side */
.table-size-host--toolbar {
  padding-inline: var(--space-4);
}

.table-size-example--toolbar {
  width: calc(var(--space-24) * 8);   /* 768px */
}

/* Behaviour card: the row menu picture, 4px below its trigger and at least
   160px wide, like the menus opened from the table */
.table-menu-pic .ds-dropdown-control {
  gap: var(--space-1);
}

.table-menu-pic .ds-dropdown-menu {
  min-width: calc(var(--space-20) * 2);   /* 160px */
}

/* Sizes: the expanded row. Wider label columns on both sides, since its
   labels are longer than the other tables' */
.table-size-host--details {
  padding-right: calc(var(--space-24) + var(--space-8));   /* 128px */
  padding-left: calc(var(--space-24) * 2);    /* 192px */
}

/* Deleting: the menu and modal side by side, then the alert below them */
.tb-delete-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

/* Progress, Behaviour: the real indeterminate bar as it looks with reduced
   motion turned on (the same rule as in components.css, shown always) */
.progress-reduced-pic .ds-progress-fill {
  width: 100%;
  transform: none;
  animation: ds-progress-fade calc(var(--progress-loop) * 2) var(--easing-standard) infinite alternate;
}

/* Date picker, Behaviour: the real Date picker at the mockup scale (75%),
   so the 336px calendar fits the card */
.dp-pic-scale {
  zoom: var(--mockup-scale);
  pointer-events: none;
}

.dp-steps {
  align-items: flex-start;
}

/* Table, Behaviour on phones: the two Changing pages steps stack, so the
   real batch bar and pagination keep their size */
@media (max-width: 767px) {
  .tb-page-steps {
    flex-direction: column;
  }

  .tb-page-steps > .pb-step {
    width: 100%;
  }

  .tb-page-steps > .pb-arrow {
    transform: rotate(90deg);
  }
}

/* Sizes, With avatars: two rows of labels above the table */
.table-size-host--avatars {
  padding-top: calc(var(--space-16) + var(--space-4));   /* 80px */
  padding-right: var(--space-24);                            /* 96px */
  padding-left: calc(var(--space-24) + var(--space-12));   /* 144px: room for the left label */
}

.table-size-host--avatars .table-size-example {
  width: calc(var(--space-20) * 7);   /* 560px: the names stay on one line */
}

/* ==========================================================================
   Tooltip page. The pictures use the real .ds-tooltip; these rules only
   place it in the page flow and lay out the pictures.
   ========================================================================== */

/* A tooltip shown in a picture: in the page flow instead of floating */
.ds-tooltip.tooltip-static {
  position: relative;
  pointer-events: none;
}

/* Trigger and tooltip: the tooltip on the chosen side, 16px away (the 8px
   caret, then 8px from its tip to the trigger) */
.tooltip-pic {
  position: relative;
  display: inline-flex;
  flex-direction: column-reverse;   /* top: the tooltip above */
  align-items: center;
  gap: var(--space-4);
  pointer-events: none;
}

.tooltip-pic--bottom { flex-direction: column; }
.tooltip-pic--left { flex-direction: row-reverse; }
.tooltip-pic--right { flex-direction: row; }

/* No tooltip showing: the same room above, so triggers line up */
.tooltip-pic--rest {
  padding-top: calc(var(--type-body-small-line-height) + var(--space-1) * 3 + var(--space-4));   /* 48px: a one-line tooltip (32px) + the caret and gap (16px) */
}

/* A cut-off label (Truncated text): one line, ellipsis */
.tooltip-cut {
  display: inline-block;
  max-width: calc(var(--space-20) * 2);   /* 160px */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* A dark area, like the footer (Light variant) */
.tooltip-dark {
  display: inline-flex;
  justify-content: center;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--pink-900);
}

/* Variants: the picture on the right, like the Alert page */
.tooltip-variant-example {
  display: flex;
  justify-content: flex-end;
}

/* States: the cursor sits on the trigger */
.state-demo.tooltip-state {
  display: flex;
  justify-content: center;
}

.state-cursor.tooltip-cursor {
  right: calc(50% - var(--space-6));
  bottom: calc(-1 * var(--space-2));
}

/* Stays put: the cursor is on the tooltip itself */
.state-cursor.tooltip-cursor--on-tip {
  right: auto;
  bottom: auto;
  top: var(--space-3);
  left: 60%;
}

/* Anatomy: tooltips are small, so the pictures are shown 1.5 times their
   size, leaving room for the letters */
.tooltip-anatomy-grid .anatomy-stage {
  min-height: calc(var(--space-24) * 2);   /* 192px */
}

.tooltip-anatomy-grid .anatomy-stage > * {
  zoom: 1.5;
}

/* Sizes: room for the labels on both sides */
.tooltip-size-host {
  position: relative;
  display: flex;
  justify-content: center;
  width: max-content;
  padding: var(--space-12) calc(var(--space-24) * 2);
}

/* Breakpoints: the real tooltip at the mockup scale inside the wireframe */
.tooltip-wf {
  zoom: var(--mockup-scale);
  display: flex;
  justify-content: center;
  padding-block: var(--space-2);
}

.tooltip-field {
  max-width: calc(var(--space-24) * 2);   /* 192px */
  text-align: left;
}

.tooltip-field .ds-input .ds-button {
  margin-right: calc(-1 * var(--space-2));
}

/* Behaviour: a row of three toolbar buttons */
.tooltip-toolbar {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}

.tooltip-place-row {
  flex-wrap: wrap;
  row-gap: var(--space-6);
}

.ds-popover.tooltip-cmp-popover {
  min-width: 0;
  max-width: calc(var(--space-20) * 2.5);   /* 200px */
}

/* Comparison: three cards in a row on wide screens */
@container (min-width: 700px) {
  .usage-grid.cmp-grid.tooltip-cmp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Do / Don't: a heading with a help icon, then a paragraph. The tooltip
   sits above (clear of the text) or below (covering it). */
.tooltip-reading {
  max-width: calc(var(--space-24) * 3);   /* 288px */
  text-align: left;
}

.tooltip-reading-head {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}

.tooltip-reading-title {
  padding-bottom: var(--space-1);
  font-weight: var(--font-weight-semibold);
}

.doc-section .tooltip-reading-text {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

/* Below: the tooltip floats over the paragraph, like the real one would */
.tooltip-reading--bottom .tooltip-pic {
  height: var(--size-control-compact);
}

.tooltip-reading--bottom .tooltip-pic > .ds-tooltip {
  position: absolute;
  top: calc(100% + var(--space-4));   /* the caret, then 8px to the trigger */
  left: 50%;
  transform: translateX(-50%);
}

/* A plain icon, not a button (Accessibility Don't) */
.tooltip-plain-icon {
  display: inline-flex;
  color: var(--grey-700);
}

.tooltip-plain-icon svg,
.tooltip-plain-icon i[data-lucide] {
  width: var(--space-5);
  height: var(--space-5);
}

/* Try it */
.tooltip-try {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.tooltip-try-placement {
  width: calc(var(--space-24) + var(--space-8));   /* 128px */
}

.tooltip-try-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-16) var(--space-6);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
}

.tooltip-try-toolbar {
  display: flex;
  gap: var(--space-2);
}

.doc-section .tooltip-try-sample {
  margin: 0;
  text-align: center;
}

.tooltip-try-sample.is-bold { font-weight: var(--font-weight-bold); }
.tooltip-try-sample.is-italic { font-style: italic; }
.tooltip-try-sample.is-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: var(--link-underline-offset);
}

.tooltip-try-name {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--type-body-small-size);
}

.tooltip-try-name-label {
  color: var(--color-text-muted);
}

/* Sizes: the label columns need their room, so on narrow screens each
   example scrolls sideways on its own rather than squashing the marks */
.annotated-size-stage:has(.tooltip-size-host) {
  overflow-x: auto;
}

/* Behaviour on phones: steps stack (arrows point down), and the four
   placements sit in a 2 × 2 grid */
@media (max-width: 767px) {
  .tooltip-behaviour .pb-row {
    flex-direction: column;
  }

  .tooltip-behaviour .pb-row > .pb-arrow {
    flex-direction: column;
  }

  .tooltip-behaviour .pb-row > .pb-arrow > svg,
  .tooltip-behaviour .pb-row > .pb-arrow > i[data-lucide] {
    transform: rotate(90deg);
  }

  .tooltip-behaviour .pb-row.tooltip-place-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
  }
}

/* Definition: the term in a sentence (Behaviour and Try it) */
.doc-section .tooltip-def-sentence,
.doc-section .tooltip-try-definition {
  margin: 0;
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

.doc-section .tooltip-try-definition {
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  text-align: center;
}

/* Phones: anatomy pictures at their real size, so 280px tooltips fit */
@media (max-width: 767px) {
  .tooltip-anatomy-grid .anatomy-stage > * {
    zoom: 1;
  }
}

/* ==========================================================================
   Tabs page (components/tabs.html). The pictures use the real .ds-tabs;
   these rules only size, space or scale them, or lay out the page.
   ========================================================================== */

/* Pictures: can't be clicked; the tabs fill the width they're given */
.tabs-picture {
  width: 100%;
  min-width: 0;
  pointer-events: none;
}

/* Variants: the tabs fill the right half of the row (or the full width
   below the text, for Vertical and Scrollable) */
.tabs-variant-example {
  width: 100%;
  min-width: 0;
}

/* Grey placeholder content inside a picture's panel */
.tabs-pic-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* States: a single tab, centred in its cell */
.state-demo.tabs-state {
  justify-content: center;
}

/* Anatomy: the tabs as wide as the panel allows, with room at the sides
   for the callouts */
.tabs-anatomy-stage {
  padding-inline: var(--space-8);
}

.tabs-anatomy-stage > .ds-tabs {
  width: 100%;
}

/* Sizes: marks are drawn inside these (main.js, section 39) */
.tabs-size-host {
  position: relative;
  width: fit-content;
  max-width: 100%;
}

.tabs-size-host--wide {
  width: 100%;
  max-width: calc(var(--space-24) * 5);   /* 480px */
}

/* Vertical: extra room on the left for the "3px bar" label, and below for
   the "14px text" label */
.tabs-size-host--inset {
  margin-left: var(--space-16);
  margin-bottom: var(--space-6);
}

/* Narrow, so the tabs scroll */
.tabs-size-host--scroll {
  width: 100%;
  max-width: calc(var(--space-24) * 4);   /* 384px */
}

/* Behaviour across breakpoints: flat wireframe tabs. Grey label blocks
   on a grey-200 line; only the selected tab is in colour. */
.wf-tabs {
  display: flex;
  flex-shrink: 0;
  min-width: 0;
  box-shadow: inset 0 calc(var(--border-width-thin) * -1) 0 var(--grey-200);
}

.wf-tab {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
}

.wf-tab-label {
  display: block;
  width: var(--space-5);
  height: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--grey-200);
}

.wf-tab-label--long {
  width: var(--space-8);
}

.wf-tab.is-on {
  box-shadow: inset 0 calc(var(--border-width-thick) * -1) 0 var(--color-primary);
}

.wf-tab.is-on .wf-tab-label {
  background: var(--color-primary);
}

.wf-tabs--full .wf-tab {
  flex: 1;
}

/* More tabs than fit: cut off, with a fade at one or both edges */
.wf-tabs--clip {
  overflow: clip;
}

.wf-tabs--fade-end {
  mask-image: linear-gradient(to left, transparent, var(--grey-900) var(--space-6));
}

.wf-tabs--fade-both {
  mask-image: linear-gradient(to right, transparent, var(--grey-900) var(--space-6),
    var(--grey-900) calc(100% - var(--space-6)), transparent);
}

/* Scrolled along a little, so the selected tab is in view */
.wf-tabs--shift > .wf-tab {
  translate: calc(var(--space-3) * -1) 0;
}

/* Tablet: arrows either side of the tabs, the line under all of it */
.wf-tabs-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  box-shadow: inset 0 calc(var(--border-width-thin) * -1) 0 var(--grey-200);
}

.wf-tabs-row > .wf-tabs {
  flex: 1;
  box-shadow: none;
}

.wf-tab-arrow {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--grey-500);
}

.wf-tab-arrow svg,
.wf-tab-arrow i[data-lucide] {
  width: var(--space-3);
  height: var(--space-3);
}

/* Vertical tabs: a list on the left (selected: pink-50 with a pink bar),
   the content on the right */
.wf-vtabs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: var(--space-3);
}

.wf-vtabs-list {
  display: flex;
  flex-direction: column;
  padding-right: var(--space-1);
  box-shadow: inset calc(var(--border-width-thin) * -1) 0 0 var(--grey-200);
}

/* Square on the left, rounded on the right, like a sidebar item */
.wf-vtab {
  position: relative;
  display: flex;
  padding: var(--space-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.wf-vtab.is-on {
  background: var(--color-primary-subtle);
  box-shadow: inset calc(var(--border-width-thin) * 3) 0 0 var(--color-primary);
}

.wf-vtab.is-on .wf-tab-label {
  background: var(--color-primary);
}

.wf-vtabs-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Phones: vertical tabs become a dropdown field */
.wf-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: var(--border-width-thin) solid var(--field-border);
  border-radius: var(--radius-sm);
  color: var(--grey-500);
}

.wf-select .wf-line {
  flex: 1;
}

.wf-select svg,
.wf-select i[data-lucide] {
  flex-shrink: 0;
  width: var(--space-3);
  height: var(--space-3);
}

/* Behaviour cards: real Small tabs, shown smaller in the mini panels */
.tabs-pb-panel > .ds-tabs {
  zoom: var(--mockup-scale);
}

/* "No jumping": both panels the same height; the short one's kept room
   is outlined */
.pb-row:has(.tabs-pic-keep) {
  align-items: stretch;
}

.pb-row:has(.tabs-pic-keep) .pb-panel,
.tabs-pic-keep,
.tabs-pic-keep .ds-tabs-panels {
  flex: 1;
}

.tabs-pic-keep .ds-tabs-panels {
  outline: var(--border-width-thin) dashed var(--grey-300);
  outline-offset: var(--space-1);
  border-radius: var(--radius-sm);
}

/* "Keeps its place": the page address above the tabs */
.tabs-address {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: calc(var(--space-1) / 2) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-family: var(--font-family-mono);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

.tabs-address svg,
.tabs-address i[data-lucide] {
  flex-shrink: 0;
  width: var(--space-3);
  height: var(--space-3);
}

/* "Disabled tabs": the tooltip above the disabled tab, with room for it */
.tabs-tip-set {
  padding-top: var(--space-12);
}

.ds-tabs-list.tabs-tip-list {
  overflow: visible;
}

.tabs-tip-anchor {
  position: relative;
  display: flex;
}

.ds-tooltip.tooltip-static.tabs-tip {
  position: absolute;
  bottom: calc(100% + var(--space-4));   /* the caret's tip 8px from the tab */
  left: 50%;
  translate: -50% 0;
}

/* Try it: three examples, 48px apart */
.tabs-try {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.tabs-try-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.doc-section .tabs-try-title,
.doc-section .tabs-try-card-title {
  margin: 0;
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-body-line-height);
}

.doc-section .tabs-try-text {
  margin: 0;
  max-width: var(--layout-measure);
}

.doc-section .tabs-try-text + .tabs-try-text {
  margin-top: var(--space-3);
}

/* The card holding the Contained tabs */
.tabs-try-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: calc(var(--space-24) * 5);   /* 480px */
  padding: var(--space-6);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

/* Tabs vs navigation: two cards side by side */
.usage-grid.tabs-cmp {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tabs-cmp .pb-row {
  width: 100%;
}

.tabs-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  zoom: var(--mockup-scale);
}

/* Do / Don't: the tabs fill the preview */
.tabs-dd {
  display: flex;
  align-items: center;
  min-height: 100%;
}

/* Don't: labels squeezed onto two lines (a deliberate mistake) */
.tabs-dd-wrap .ds-tab {
  max-width: var(--space-24);
  white-space: normal;
  text-align: left;
}

/* Accessibility pictures */
.tabs-a11y-figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
}

.tabs-a11y-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

/* The greyscale copy of the tabs (Not colour alone) */
.tabs-greyscale {
  filter: grayscale(1);
}

.tabs-a11y-sizes {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* The keys list under the keyboard picture */
.doc-section .tabs-keys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--grey-700);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

.tabs-keys span + .tabs-key {
  margin-left: var(--space-2);
}

.tabs-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-6);
  padding: 0 calc(var(--space-1) * 1.5);
  border: var(--border-width-thin) solid var(--grey-300);
  border-radius: var(--radius-sm);
  background: var(--grey-50);
  color: var(--grey-900);
  font-family: inherit;
  font-size: var(--type-caption-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--type-body-small-line-height);
}

@media (max-width: 767px) {
  .usage-grid.tabs-cmp,
  .tabs-a11y-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .tabs-anatomy-stage {
    padding-inline: var(--space-6);
  }

  /* Sizes: each example scrolls sideways on its own rather than squashing
     the marks */
  .annotated-size-stage:has(.tabs-size-host) {
    overflow-x: auto;
  }
}

/* ==========================================================================
   Tag page (components/tag.html). The pictures use the real .ds-tag; these
   rules only size, space or lay out the pictures and the page.
   ========================================================================== */

/* Pictures can't be clicked */
.tag-picture {
  min-width: 0;
  pointer-events: none;
}

/* Variants: the tags lined up on the right (left on phones) */
.tag-variant-example .tag-picture {
  display: flex;
  justify-content: flex-end;
}

.tag-list-end {
  justify-content: flex-end;
}

.tag-list-centre {
  justify-content: center;
}

/* Colour tokens: one card per colour, the tag on its colour at the top */
.doc-section .tag-colours-heading {
  margin-bottom: var(--space-2);
}

.doc-section .tag-colours-heading:first-of-type {
  margin-top: var(--space-6);
}

.tag-swatch-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.tag-swatch-grid--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1023px) {
  .tag-swatch-grid,
  .tag-swatch-grid--five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tag-swatch {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

/* The colour itself, with the tag on it */
.tag-swatch-sample {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--space-20);   /* 80px */
}

.tag-swatch-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.doc-section .tag-swatch-name {
  margin: 0 0 var(--space-1);
  font-size: var(--type-body-small-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-body-small-line-height);
}

.tag-swatch-extra {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
}

.doc-section .tag-swatch-token {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

.tag-swatch-token code {
  color: var(--color-text);
  font-size: var(--type-caption-size);
}

.tag-swatch-info .a11y-ratio {
  margin-top: var(--space-1);
}

/* States: the tag centred in its cell */
.state-demo.tag-state {
  justify-content: center;
}

/* Anatomy: room round the tag for the callouts */
.tag-anatomy-stage {
  padding-inline: var(--space-12);
}

.tag-anatomy-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Sizes: marks are drawn inside these (main.js, section 36) */
.tag-size-host {
  position: relative;
  width: fit-content;
  margin-left: var(--space-16);   /* room on the left for the height label */
}

/* Narrow, so the group wraps onto a second line */
.tag-size-host--group {
  width: calc(var(--space-24) * 3);   /* 288px */
}

/* Behaviour across breakpoints: flat wireframe tags. Each is a soft pill
   with a line of its text colour; only the tags are in colour. */
.wf-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.wf-tag-row--scroll {
  flex-wrap: nowrap;
  overflow: clip;
  mask-image: linear-gradient(to left, transparent, var(--grey-900) var(--space-6));
}

.wf-tag {
  --wf-tag-bg: var(--tag-neutral-bg);
  --wf-tag-text: var(--tag-neutral-text);
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: calc(var(--space-1) / 2);
  height: var(--space-3);
  padding: 0 var(--space-1);
  border-radius: var(--radius-full);
  background: var(--wf-tag-bg);
}

.wf-tag-text {
  display: block;
  width: var(--space-4);
  height: calc(var(--space-1) / 2);
  border-radius: var(--radius-full);
  background: var(--wf-tag-text);
}

.wf-tag-text--long { width: var(--space-6); }
.wf-tag-text--cut  { width: var(--space-12); }

.wf-tag--info    { --wf-tag-bg: var(--tag-info-bg);    --wf-tag-text: var(--tag-info-text); }
.wf-tag--success { --wf-tag-bg: var(--tag-success-bg); --wf-tag-text: var(--tag-success-text); }
.wf-tag--warning { --wf-tag-bg: var(--tag-warning-bg); --wf-tag-text: var(--tag-warning-text); }
.wf-tag--purple  { --wf-tag-bg: var(--tag-purple-bg);  --wf-tag-text: var(--tag-purple-text); }
.wf-tag--teal    { --wf-tag-bg: var(--tag-teal-bg);    --wf-tag-text: var(--tag-teal-text); }
.wf-tag--pink    { --wf-tag-bg: var(--tag-pink-bg);    --wf-tag-text: var(--tag-pink-text); }

/* Selectable filters: white with a grey edge, or chosen (pink) */
.wf-tag--chip {
  --wf-tag-bg: var(--color-surface);
  height: var(--space-4);
  box-shadow: inset 0 0 0 var(--border-width-thin) var(--grey-300);
}

.wf-tag--on {
  --wf-tag-bg: var(--color-primary-subtle);
  --wf-tag-text: var(--color-primary);
  height: var(--space-4);
  box-shadow: inset 0 0 0 var(--border-width-thin) var(--color-primary);
}

/* "…" after cut text: three dots */
.wf-tag-dots {
  width: var(--space-2);
  height: calc(var(--space-1) / 2);
  background: radial-gradient(circle, var(--wf-tag-text) 50%, transparent 51%) 0 0 / calc(var(--space-2) / 3) 100% repeat-x;
}

/* Behaviour cards */
.tag-cursor-host {
  position: relative;
  display: inline-flex;
}

.tag-overflow-pic {
  display: inline-flex;
}

/* Try it */
.tag-try {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.tag-try-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.doc-section .tag-try-title {
  margin: 0;
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-body-line-height);
}

.tag-try-table {
  max-width: calc(var(--space-24) * 6);   /* 576px */
}

/* Tags in a table cell stay on one line */
.tag-list-nowrap {
  flex-wrap: nowrap;
}

/* Tag vs badge vs button */
.tag-cmp-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Do / Don't */
.tag-dd {
  display: flex;
  align-items: center;
  min-height: 100%;
}

.tag-confirm-pic {
  gap: var(--space-3);
  max-width: calc(var(--space-20) * 3.5);   /* 280px */
  padding: var(--space-4);
  box-shadow: var(--shadow-md);
}

.doc-section .tag-confirm-text {
  margin: 0;
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

/* Accessibility pictures */
.tag-a11y-figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
}

.tag-a11y-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.tag-greyscale {
  filter: grayscale(1);
}

.tag-a11y-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

@media (max-width: 767px) {
  .tag-variant-example .tag-picture,
  .tag-list-end {
    justify-content: flex-start;
  }

  .tag-a11y-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .tag-anatomy-stage {
    padding-inline: var(--space-8);
  }

  .annotated-size-stage:has(.tag-size-host) {
    overflow-x: auto;
  }
}

/* ==========================================================================
   Toast page (components/toast.html). The pictures use the real .ds-toast;
   these rules only size, space or lay out the pictures, or show a moment
   in time (entering, leaving).
   ========================================================================== */

/* Pictures can't be clicked */
.toast-picture {
  min-width: 0;
  pointer-events: none;
}

/* Variants: the toast on the right (left on phones) */
.toast-variant-example .toast-picture {
  display: flex;
  justify-content: flex-end;
}

/* A toast shown smaller (75%), so it fits in a card */
.toast-scaled {
  zoom: var(--mockup-scale);
}

/* Toasts stacked like they are on screen: 8px apart, newest at the bottom */
.toast-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

/* States: the toast centred in its cell */
.state-demo.toast-state {
  justify-content: center;
}

/* Anatomy: room round the toast for the callouts */
.toast-anatomy-stage {
  padding-inline: var(--space-12);
}

/* Sizes: marks are drawn inside these (main.js, section 40). Room on the
   left for the height label and on the right for the close button's. */
.toast-size-host {
  position: relative;
  width: fit-content;
  margin-left: var(--space-16);
  margin-right: calc(var(--space-24) + var(--space-6));   /* 120px */
}

/* Room below for the labels under the toast: a second row of gap labels,
   or the width */
.toast-size-host[data-annotate-toast~="action"] {
  margin-bottom: var(--space-6);
}

.toast-size-host[data-annotate-toast~="min"],
.toast-size-host[data-annotate-toast~="max"] {
  margin-bottom: var(--space-16);
}

/* Placement: the stack, with room below for nothing and right for labels */
.toast-stack-stage {
  margin-top: 0;
  padding: var(--space-6);
}

.toast-size-host--stack {
  margin-left: 0;
  margin-right: var(--space-16);
}

/* Moments in time: just appearing (lower, see-through) and leaving */
.toast-pic-entering {
  opacity: 0.4;
  margin-top: var(--space-2);   /* 8px lower than where it ends up */
}

.toast-pic-leaving {
  opacity: 0.4;
}

/* Behaviour across breakpoints: flat wireframe toasts. A dark grey bar
   with a white line (and a green dot for success); only the toasts are in
   colour. Positions are shares of each screen. */
.wf-frame--screen > .wf-page {
  position: relative;
}

.wf-toasts {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--space-1) / 2);
}

/* Desktop: 24px of 1440px from the edges, toasts about 360px wide */
.wf-toasts--desktop {
  bottom: 4%;
  left: 2%;
  width: 25%;
}

/* Tablet: 24px of 768px */
.wf-toasts--tablet {
  bottom: 3%;
  left: 3%;
  width: 47%;
}

/* Phone: 16px of 390px each side, above the bottom navigation */
.wf-toasts--phone {
  right: 4%;
  bottom: calc(var(--space-6) + var(--space-1));
  left: 4%;
  align-items: stretch;
}

.wf-toast {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  box-sizing: border-box;
  width: 100%;
  height: var(--space-3);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--toast-bg);
}

.wf-toasts--phone .wf-toast {
  height: var(--space-4);
}

.wf-toast-dot {
  display: none;
  flex-shrink: 0;
  width: calc(var(--space-1) * 1.5);
  height: calc(var(--space-1) * 1.5);
  border-radius: var(--radius-full);
  background: var(--toast-icon-success);
}

.wf-toast--success .wf-toast-dot {
  display: block;
}

.wf-toast-text {
  width: 50%;
  height: calc(var(--space-1) / 2);
  border-radius: var(--radius-full);
  background: var(--toast-text);
}

/* The phone's bottom navigation bar */
.wf-bottom-nav {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--space-6);
  border-top: var(--border-width-thin) solid var(--grey-200);
  background: var(--grey-100);
}

/* Behaviour cards */
.toast-cursor-host {
  position: relative;
  display: inline-flex;
}

.toast-timing {
  gap: var(--space-3);
}

.toast-focus-panel .ds-input {
  width: 100%;
}

/* Try it */
.toast-try {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.toast-try-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.doc-section .toast-try-title {
  margin: 0;
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-body-line-height);
}

/* A sub-heading with its description, 8px apart */
.toast-try-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.doc-section .toast-try-text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

.toast-try-buttons {
  flex-wrap: wrap;
}

/* The project that can be deleted, and the message left in its place */
.toast-project {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--space-24) * 4);   /* 384px */
  min-height: calc(var(--space-16) + var(--space-2));   /* 72px: the same with or without the project */
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.toast-project[hidden] {
  display: none;
}

.toast-project--empty {
  border-style: dashed;
  background: var(--color-surface-muted);
}

.doc-section .toast-project-name {
  margin: 0;
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-body-line-height);
}

.doc-section .toast-project-meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

/* Do / Don't */
.toast-dd {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}

/* Accessibility pictures */
.toast-a11y-figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
}

.toast-a11y-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.toast-a11y-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.toast-greyscale {
  filter: grayscale(1);
}

.toast-a11y-stage {
  width: 100%;
  margin-top: 0;
}

@media (max-width: 767px) {
  .toast-variant-example .toast-picture {
    justify-content: flex-start;
  }

  .toast-a11y-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .toast-anatomy-stage {
    padding-inline: var(--space-8);
  }

  .annotated-size-stage:has(.toast-size-host) {
    overflow-x: auto;
  }

  /* Room above and below for the labels, so the scrolling stage doesn't
     cut them off */
  .toast-size-host {
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
  }
}

/* ==========================================================================
   Toggle page (components/toggle.html). It shares the Checkbox page's docs
   classes (checkbox-*); these rules only size, space or lay out the
   pictures, or show a moment in time (sliding).
   ========================================================================== */

/* Variants and pictures with the label on the left: a settings-panel width */
.toggle-wide-example,
.toggle-dd-list {
  width: 100%;
  max-width: calc(var(--space-20) * 4);   /* 320px */
}

.toggle-anatomy-wide {
  width: calc(var(--space-20) * 3.5);     /* 280px */
}

/* Anatomy: an invisible dot on the line between two rows (the divider) */
.ds-toggle-list-item:has(> .toggle-divider-marker) {
  position: relative;
}

.toggle-divider-marker {
  position: absolute;
  top: calc(var(--border-width-thin) * -1);
  left: var(--space-16);
  width: var(--border-width-thin);
  height: var(--border-width-thin);
}

/* Sizes: wide pictures get a settings-panel width */
.toggle-size-wide [data-size-example] {
  width: calc(var(--space-20) * 4);       /* 320px */
}

/* A moment in time: the thumb halfway across */
.ds-toggle.is-sliding .ds-toggle-input:checked + .ds-toggle-thumb {
  transform: translateX(calc((var(--toggle-width) - var(--toggle-thumb) - var(--toggle-inset) * 2) / 2));
}

/* Behaviour across breakpoints: flat toggles (the toggles in colour) */
.wf-toggle {
  position: relative;
  flex-shrink: 0;
  width: var(--space-4);
  height: calc(var(--space-2) + var(--space-1) / 2);   /* 10px */
  border-radius: var(--radius-full);
  background: var(--field-border);
}

.wf-toggle::after {
  content: "";
  position: absolute;
  top: var(--border-width-thin);
  left: var(--border-width-thin);
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-surface);
}

.wf-toggle--on {
  background: var(--color-primary);
}

.wf-toggle--on::after {
  left: auto;
  right: var(--border-width-thin);
}

.wf-toggle-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.wf-toggle-list--half {
  width: 60%;
}

/* A settings row: label line on the left, toggle on the right, a line below */
.wf-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-1);
  border-bottom: var(--border-width-thin) solid var(--grey-200);
}

.wf-toggle-row .wf-line {
  margin: 0;
}

/* Touch: each row a 44px-style click area, shown with a dashed outline */
.wf-toggle-row--touch {
  min-height: var(--space-6);
  padding-inline: var(--space-1);
  border: var(--border-width-thin) dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
}

.wf-toggle-row--touch + .wf-toggle-row--touch {
  margin-top: var(--space-1);
}

/* Behaviour: a pointer over the label */
.state-cursor.toggle-label-cursor {
  top: 50%;
  right: auto;
  left: calc(var(--space-16) + var(--space-2));
}

/* If it fails: the toggle with the error toast under it (75%) */
.toggle-fail-pic {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.toggle-toast-pic {
  zoom: var(--mockup-scale);
}

/* Try it */
.doc-section .toggle-try-title {
  margin: 0;
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-body-line-height);
}

.toggle-try-list {
  width: 100%;
  max-width: calc(var(--space-24) * 5);   /* 480px */
}

.toggle-try {
  gap: var(--space-2);
}

/* Do / Don't */
.toggle-dd-pairs,
.toggle-dd-scattered {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.toggle-dd-indent {
  padding-left: var(--space-12);
}

/* Accessibility pictures */
.toggle-greyscale {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  filter: grayscale(1);
}

.toggle-a11y-steps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
}

/* The click area, outlined */
.toggle-target-demo .ds-toggle {
  outline: var(--border-width-thin) dashed var(--color-info);
  outline-offset: var(--space-1);
}

/* Small pictures stay compact on touch screens (44px rows are for the real ones) */
@media (pointer: coarse), (max-width: 767px) {
  .pb-frame .ds-toggle,
  .checkbox-dd .ds-toggle,
  .cmp-visual .ds-toggle,
  .checkbox-figure .ds-toggle,
  .checkbox-state .ds-toggle,
  .anatomy-stage .ds-toggle,
  [data-annotate-toggle] .ds-toggle {
    min-height: var(--size-target-minimum);
    padding-block: 0;
  }

  .checkbox-dd .ds-toggle-list-item,
  .anatomy-stage .ds-toggle-list-item,
  [data-annotate-toggle] .ds-toggle-list-item {
    padding-block: var(--space-4);
  }
}

/* States: the pointer over the track, clear of the label */
.state-cursor.toggle-track-cursor {
  top: 50%;
  right: auto;
  left: var(--space-6);
}

/* Toggle vs checkbox vs radio: the Save button keeps its own width */
.cmp-checks > .ds-button {
  align-self: flex-start;
}

/* Phones: settings lists and label-on-the-left toggles go full width */
@media (max-width: 767px) {
  .toggle-wide-example,
  .toggle-try-list {
    max-width: none;
  }
}

/* ==========================================================================
   Search page (components/search.html). The pictures use the real Search
   component (and the Text input, Dropdown menu and Spinner inside it);
   these rules only size, space or lay out the pictures.
   ========================================================================== */

/* Pictures can't be clicked; they're a field's width */
.search-picture {
  width: 100%;
  max-width: calc(var(--space-24) * 4);   /* 384px */
  pointer-events: none;
}

.search-variant-example {
  text-align: left;
}

.search-variant-example .search-picture {
  display: flex;
  justify-content: flex-end;
}

.search-picture > .ds-search-trigger,
.search-picture > .search-toolbar-pic,
.search-picture > .search-expand-pic {
  flex-shrink: 0;
}

/* Expandable: the icon button, an arrow, the open field */
.search-expand-pic {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.search-expand-pic .ds-search {
  width: calc(var(--space-24) * 2.5);     /* 240px */
}

/* In a table toolbar: the search and a Filter button, 8px apart */
.search-toolbar-pic {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

/* States: each cell's search at a field's width */
.state-demo.search-state {
  display: block;
  width: calc(var(--space-20) * 3.5);   /* 280px */
  max-width: 100%;
  text-align: left;
}

/* The pointer over the field */
.state-cursor.search-field-cursor {
  top: 50%;
  right: var(--space-12);
  bottom: auto;
}

/* Anatomy: room round each picture for the callouts */
.search-anatomy-stage {
  padding: var(--space-10) var(--space-12);
}

.search-anatomy-stage > .ds-search {
  width: calc(var(--space-20) * 3.5);     /* 280px */
}

.search-anatomy-stage .search-expand-pic .ds-search {
  width: calc(var(--space-24) * 2);       /* 192px */
}

/* Sizes: marks are drawn inside these (main.js, section 42). Room on the
   left for the height label, above for the icon, below for two rows. */
.search-size-host {
  position: relative;
  width: calc(var(--space-20) * 4);       /* 320px */
  margin: var(--space-12) var(--space-24) var(--space-16) var(--space-20);
}

.search-size-host > .ds-search-trigger {
  width: calc(var(--space-20) * 3.5);
}

/* With a menu: more room on the right for its labels */
.search-size-host--menu {
  margin-right: calc(var(--space-24) * 2.5);
}

/* Behaviour across breakpoints: the top bar holds the search */
.wf-header--search {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--space-1);
}

/* A flat search field: white, the field border, a grey icon and line */
.wf-search {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  box-sizing: border-box;
  height: var(--space-4);
  padding: 0 var(--space-1);
  border: var(--border-width-thin) solid var(--field-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.wf-search--top {
  width: 30%;
}

.wf-search--full {
  width: 100%;
  height: var(--space-6);
  border-color: var(--color-primary);
}

.wf-search-icon {
  flex-shrink: 0;
  width: var(--space-2);
  height: var(--space-2);
  border: var(--border-width-thick) solid var(--grey-500);
  border-radius: var(--radius-full);
}

.wf-search-text {
  width: 50%;
  height: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--grey-300);
}

/* Tablet and phone: the icon button */
.wf-search-button {
  width: var(--space-4);
  height: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-surface) radial-gradient(circle at 45% 45%, transparent 28%, var(--grey-700) 30%, var(--grey-700) 42%, transparent 44%);
}

/* Phone: the full-screen search, with suggestion rows */
.wf-search-sheet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-surface);
}

.wf-search-row {
  height: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--grey-100);
}

/* Behaviour cards */
.search-panel {
  width: 100%;
  max-width: calc(var(--space-20) * 3.5);   /* 280px */
}

.search-panel--menu {
  padding-bottom: var(--space-3);
}

.search-count {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

.search-mini-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
  list-style: none;
}

.search-results-title {
  font-size: var(--type-body-small-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-body-small-line-height);
}

.search-keys {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.search-keys .pb-note {
  margin: 0;
}

/* A small version of the search panel */
.search-mini-dialog {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: calc(var(--space-24) * 2);       /* 192px */
  padding: var(--space-3);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.search-mini-dialog .wf-line {
  height: var(--space-1);
}

/* Try it */
.search-try {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.search-try-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.search-try-block > .ds-search {
  width: 100%;
}

.doc-section .search-try-title {
  margin: 0;
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-body-line-height);
}

/* The 20 projects, in columns */
.search-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--space-24) * 2), 1fr));
  gap: var(--space-2) var(--space-6);
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
  list-style: none;
}

.search-list > [hidden] {
  display: none;
}

.search-try-empty {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.search-try-empty[hidden] {
  display: none;
}

.doc-section .search-try-empty-title,
.doc-section .search-try-empty-tip,
.doc-section .search-try-status,
.doc-section .search-try-hint {
  margin: 0;
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

.doc-section .search-try-empty-title {
  font-weight: var(--font-weight-semibold);
}

.doc-section .search-try-empty-tip,
.doc-section .search-try-status,
.doc-section .search-try-hint {
  color: var(--color-text-muted);
}

.search-try-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

/* Search vs filter */
.search-filter-pic {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

/* Do / Don't */
.search-dd {
  width: 100%;
  max-width: calc(var(--space-20) * 3.5);   /* 280px */
}

.search-dd > .ds-search {
  width: 100%;
}

/* "An empty page": a dashed box with nothing in it */
.search-blank {
  width: 100%;
  height: var(--space-16);
  border: var(--border-width-thin) dashed var(--color-border-strong);
  border-radius: var(--radius-md);
}

/* A page top: heading, the search (or a menu), lines */
.search-page-pic {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

.search-page-pic .wf-heading,
.search-page-pic .wf-line {
  margin: 0;
  background: var(--grey-100);
}

.search-menu-pic {
  align-self: flex-end;
}

.search-hidden-menu {
  position: static;
  align-self: flex-end;
  width: auto;
  min-width: calc(var(--space-24) * 1.5);   /* 144px */
  --dropdown-height: var(--size-control-compact);
  --dropdown-pad: var(--space-3);
  font-size: var(--type-body-small-size);
}

/* Accessibility pictures */
.search-figure > .ds-search {
  width: 100%;
  max-width: calc(var(--space-20) * 3.5);
}

.search-footer-pic {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  max-width: calc(var(--space-20) * 6);   /* 480px */
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

/* The click areas, outlined */
.search-target-demo {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.search-target-demo .ds-search {
  width: calc(var(--space-20) * 3.5);
}

.search-target-demo .ds-input-clear,
.search-target-demo .ds-search-expand {
  outline: var(--border-width-thin) dashed var(--color-info);
  outline-offset: 0;
}

@media (max-width: 767px) {
  .search-variant-example .search-picture {
    justify-content: flex-start;
  }

  .annotated-size-stage:has(.search-size-host) {
    overflow-x: auto;
  }

  .search-target-demo {
    flex-wrap: wrap;
  }
}

/* Search pictures: no extra space round the menu's paragraphs */
.doc-section .ds-search-empty p,
.doc-section .ds-search-group-row p {
  margin: 0;
}

/* Search vs filter: two columns (one on phones) */
.search-cmp-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 767px) {
  .search-cmp-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Phones: state pictures fit their (narrower) cells */
@media (max-width: 767px) {
  .state-demo.search-state {
    width: 100%;
  }
}

/* Designing with Weave page (get-started/designing.html) ================== */

/* The page map: a numbered list of cards, no bullets */
.gs-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Sub-sections: 48px above (from .subheading), 8px to the description,
   24px from the description to the example */
.doc-section .gs-subheading {
  margin-bottom: var(--space-2);
}

.gs-subintro {
  margin-bottom: var(--space-6);
  color: var(--color-text-muted);
}

/* Token table: the "Looks like" pictures are drawn with the token itself */
.gs-token-table td {
  vertical-align: middle;
}

.gs-token-pic {
  display: inline-block;
  vertical-align: middle;
  width: var(--space-8);
  height: var(--space-8);
}

.gs-token-pic--colour {
  border-radius: var(--radius-sm);
  background: var(--pink-600);
}

.gs-token-pic--space {
  width: var(--space-4);
  background: var(--grey-300);
}

.gs-token-pic--type {
  width: auto;
  height: auto;
  color: var(--grey-900);
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-body-line-height);
}

.gs-token-pic--radius {
  border: var(--border-width-thin) solid var(--field-border);
  border-radius: var(--radius-control);
  background: var(--grey-0);
}

.gs-token-pic--shadow {
  border: var(--border-width-thin) solid var(--grey-200);
  border-radius: var(--radius-sm);
  background: var(--grey-0);
  box-shadow: var(--shadow-md);
}

/* Do / Don't: one line of code, as it would appear in a stylesheet */
.gs-code {
  margin: 0;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  color: var(--grey-900);
}

.gs-code-name {
  color: var(--grey-600);
}

/* Rule cards: a grey-50 picture panel above the title */
.gs-rule .gs-rule-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--space-24) + var(--space-16));   /* 160px */
  margin-bottom: var(--space-2);
  padding: var(--space-6);
  border-radius: var(--radius-container);
  background: var(--color-surface-muted);
}

.gs-pic-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.gs-pic-row--bottom {
  align-items: flex-end;
}

.gs-pic-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* 4px grid: squares 4, 8, 12, 16, 24 and 32px, labelled below */
.gs-scale-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.gs-scale-block {
  width: var(--gs-step);
  height: var(--gs-step);
  background: var(--grey-300);
}

.gs-scale-label {
  color: var(--grey-700);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

/* Selected: a short menu and three navigation items */
.gs-pic-menu {
  width: calc(var(--space-20) * 2);   /* 160px */
}

.gs-pic-nav {
  display: flex;
  flex-direction: column;
  width: calc(var(--space-20) * 1.5);   /* 120px */
}

.gs-pic-nav .ds-nav-item {
  display: block;
}

/* Corners: fields beside their buttons */
.gs-pic-field {
  width: calc(var(--space-20) * 2);   /* 160px */
}

.gs-pic-row .gs-pic-field {
  flex: none;
}

/* Smaller in tables: a one-row table */
.gs-pic-table {
  width: 100%;
  background: var(--grey-0);
}

@media (max-width: 767px) {
  .gs-pic-field {
    width: calc(var(--space-20) * 1.5);   /* 120px */
  }
}

/* Accessibility page (get-started/accessibility.html) ===================== */

/* The WCAG reference under each card's text, pushed to the bottom */
.gs-card .gs-card-tag {
  align-self: flex-start;
  margin-top: auto;
}

/* A line after a grid or list: 24px above it */
.gs-after-grid {
  margin-top: var(--space-6);
  color: var(--color-text-muted);
}

/* Not by colour alone: the error field fills its picture */
.gs-pic-error {
  width: 100%;
}

/* Designer's checklist: the count and Clear all above the cards */
.gs-checklist-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}

.gs-checklist-count {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line-height);
}

/* Each group is a card (a fieldset, so its name is read with each checkbox) */
.gs-check-group {
  min-width: 0;
  margin: 0;
}

.doc-section .gs-check-group .gs-check-legend {
  float: left;          /* keeps the legend inside the card's padding */
  width: 100%;
  margin-bottom: var(--space-3);
  padding: 0;
}

.gs-check-group .ds-checkbox-options {
  clear: both;
}

/* Known gaps: the list 24px below the alert, 8px between items */
.gs-gaps-alert {
  margin-bottom: var(--space-6);
}

.gs-gaps {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-5);
}

/* Search page: the search panel as a picture (its real header, and the key
   hints along the bottom). --phone is narrower, like a phone screen. */
.search-panel-pic {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--space-20) * 5);   /* 400px */
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-container);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.search-panel-pic .ds-search {
  flex: 1;
  max-width: none;
}

.search-panel-pic--phone {
  max-width: calc(var(--space-20) * 4);   /* 320px */
}

.search-panel-pic-footer {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}

/* Behaviour card: two small panels side by side */
.search-panel-pic--mini {
  width: calc(var(--space-24) * 2.5);    /* 240px */
}

.search-panel-pic--mini .ds-search-dialog-header {
  padding: var(--space-3);
}

/* Phones: the small panels go full width */
@media (max-width: 767px) {
  .search-panel-pic--mini {
    width: 100%;
  }
}