/* The docs page, after common.css and code.css: the docs tokens for each color scheme, the main
   grid with its breadcrumb, side menu and document (every section, each with its header), smooth
   scrolling for nav clicks, the rules of single sections (the oracle's main.page-<id> rules), and
   the docs components: the menu's focus style, the Theme picker card, the color families (with
   readable text on every shade) and color dialog of the Colors section, the color dots of the
   Themes table, inline example dialogs and headings. */

/**
 * Docs color schemes
 */

/* Light color scheme (Default)
   Can be forced with data-theme="light" */
[data-theme=light],
:root:not([data-theme=dark]),
:host:not([data-theme=dark]) {
  /* Aside */
  --femto-aside-link-current-background-color: #eff1f4;
}

/* Forced dark color scheme */
[data-theme=light] article footer.code[data-theme=dark],
:root:not([data-theme=dark]) article footer.code[data-theme=dark],
:host:not([data-theme=dark]) article footer.code[data-theme=dark] {
  --femto-card-background-color: #181c25;
  --femto-card-border-color: var(--femto-card-background-color);
  --femto-card-box-shadow: var(--femto-box-shadow);
  --femto-card-sectioning-background-color: rgb(28, 33, 43.5);
}

/* Dark color scheme (Auto)
   Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]),
  :host:not([data-theme]) {
    /* Aside */
    --femto-aside-link-current-background-color: #202632;
  }
}

/* Dark color scheme (Forced)
   Enabled if forced with data-theme="dark" */
[data-theme=dark] {
  /* Aside */
  --femto-aside-link-current-background-color: #202632;
}

/**
 * Docs: Main
 */
body {
  --femto-main-top-offset: 0rem;
}

body > header.is-fixed-above-lg + main {
  --femto-main-top-offset: var(--femto-header-height);
}

body > main {
  display: grid;
  grid-template-rows: 1fr;
  row-gap: 2rem;
  margin-bottom: calc(var(--femto-spacing) * 4);
  padding: 0;
}

body > main > * {
  min-width: 0;
  margin-bottom: 0;
}

/* Side nav and content. The content column keeps the width the oracle's routes gave it: from 1280px
   the width of a route with a table of contents, whose column is now the empty third track (the
   oracle's 10rem tracks from 1536px applied only to routes without one: its 10.5rem rule for a route
   with one has the higher specificity) */
@media (min-width: 1024px) {
  body > main {
    grid-template-columns: 11rem 1fr;
    grid-template-areas: "menu body";
    column-gap: 3rem;
  }

  body > main > nav[aria-label=breadcrumb] {
    display: none;
  }

  body > main > aside > nav {
    margin-top: calc(var(--femto-block-spacing-vertical) / 2);
  }

  body > main > aside > nav.is-sticky-above-lg {
    position: sticky;
    top: calc(var(--femto-main-top-offset) + var(--femto-block-spacing-vertical) / 2);
    max-height: calc(var(--max-height) - var(--femto-spacing));
    overflow: auto;
    transition: top var(--femto-transition);
    transition-delay: 0.05s;
  }

  body > main > aside#documentation-menu {
    grid-area: menu;
  }

  body > main > [role=document] {
    grid-area: body;
  }
}

@media (min-width: 1280px) {
  body > main {
    grid-template-columns: 10.5rem 1fr 10.5rem;
    grid-template-areas: "menu body .";
  }
}

html {
  scroll-padding-top: calc(var(--femto-breadcrumb-height) + 1rem);
}

/* Smooth scrolling only for a nav click (Decision 10): docs.js sets the class while the click's
   scroll runs. On html itself, Chrome would also animate the jump to a deep link's #hash on load and
   every back and forward, from the top of the page */
@media (prefers-reduced-motion: no-preference) {
  html.is-scrolling-to-link {
    scroll-behavior: smooth;
  }
}

@media (min-width: 1024px) {
  html {
    scroll-padding-top: calc(var(--femto-header-height) + 2rem - 0.375rem);
  }
}

/**
 * Docs: Breadcrumb
 */
html {
  --femto-breadcrumb-height: calc(3.5rem + var(--femto-border-width));
}

main > [aria-label=breadcrumb] {
  z-index: 3;
  position: sticky;
  top: -1px;
  margin: 0 calc(var(--femto-spacing) * -1);
  margin-top: calc(var(--femto-block-spacing-vertical) / 2);
  padding: 0 var(--femto-spacing);
  border-bottom: var(--femto-border-width) solid transparent;
  background-color: var(--femto-background-color);
  transition: border var(--femto-transition), box-shadow var(--femto-transition);
}

/* Full bleed in the sm and md containers (510px and 700px wide) */
@media (min-width: 576px) and (max-width: 1023px) {
  main > [aria-label=breadcrumb] {
    margin: 0 calc((100vw - 510px) / 2 * -1);
    padding: 0 calc((100vw - 510px) / 2);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  main > [aria-label=breadcrumb] {
    margin: 0 calc((100vw - 700px) / 2 * -1);
    padding: 0 calc((100vw - 700px) / 2);
  }
}

main > [aria-label=breadcrumb].is-sticky {
  border-bottom-color: var(--femto-header-border-color);
  box-shadow: var(--femto-card-box-shadow);
}

main > [aria-label=breadcrumb] ul {
  max-width: 100%;
}

main > [aria-label=breadcrumb] ul li {
  flex-shrink: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

main > [aria-label=breadcrumb] ul li:not(:last-child)::after {
  content: ">";
}

/* The Documentation button, which opens the menu, is a <button type="button"> drawn as the
   breadcrumb's secondary link it replaced: femto's breadcrumb link box, no border or background,
   the secondary link color and underline on hover, and femto's link focus ring on keyboard focus.
   No transition: Firefox styles the docs page once before the site's stylesheets apply (docs.html
   links them after the head scripts), so a transition here would run on load from femto's button
   colors, white on the primary background */
main > [aria-label=breadcrumb] ul li:first-child button {
  display: inline-block;
  max-width: none;
  margin: calc(var(--femto-nav-link-spacing-vertical) * -1) 0;
  margin-inline-start: calc(var(--femto-nav-link-spacing-horizontal) * -1);
  padding: var(--femto-nav-link-spacing-vertical) var(--femto-nav-link-spacing-horizontal);
  border: 0;
  border-radius: var(--femto-border-radius);
  background-color: transparent;
  box-shadow: none;
  color: var(--femto-secondary);
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  text-decoration-color: var(--femto-secondary-underline);
  text-underline-offset: 0.125em;
  transition: none;
}

main > [aria-label=breadcrumb] ul li:first-child button:hover {
  color: var(--femto-secondary-hover);
  text-decoration-line: underline;
  text-decoration-color: var(--femto-secondary-hover-underline);
}

main > [aria-label=breadcrumb] ul li:first-child button:focus-visible {
  box-shadow: 0 0 0 var(--femto-outline-width) var(--femto-primary-focus);
}

main > [aria-label=breadcrumb] ul li:last-child {
  flex-shrink: 1;
}

@media (min-width: 576px) {
  main > [aria-label=breadcrumb] ul li:first-child::after {
    display: inline-block;
  }
}

/* The Documentation button's menu character ☰ (Decision 18), which is small for its em, so it is
   drawn larger without changing the line */
main > [aria-label=breadcrumb] span[role=img] {
  margin-right: var(--femto-nav-link-spacing-horizontal);
  font-size: 1.125rem;
  transform: translateY(-0.0625rem) scale(1.25);
}

main > [aria-label=breadcrumb] a[aria-current] {
  pointer-events: auto;
}

/**
 * Docs: Aside
 */
main > aside {
  --femto-font-size: 16px;
  font-size: var(--femto-font-size);
}

main > aside nav details:last-of-type {
  margin-bottom: 0;
}

main > aside nav details summary {
  font-weight: 600;
  line-height: var(--femto-line-height);
}

main > aside nav details summary:focus-visible:not([role]) {
  outline-offset: 0;
}

main > aside nav details summary::after {
  height: calc(1em * var(--femto-line-height));
}

@media (min-width: 1024px) {
  main > aside nav details summary:not(:focus-visible)::after {
    display: none;
  }
}

main > aside nav details[open] > summary {
  margin-bottom: calc(var(--femto-spacing) * 0.5);
}

main > aside nav details[open] > summary:not([role]):not(:focus) {
  color: inherit;
}

main > aside nav details ul {
  border-left: var(--femto-border-width) solid var(--femto-muted-border-color);
}

main > aside nav details ul:first-of-type {
  margin: 0;
  padding: 0;
}

main > aside nav details ul li {
  margin: 0;
  padding: calc(var(--femto-nav-element-spacing-vertical) * 0.25) 0;
}

/* The -webkit-text-decoration item is kept for Safari 17.5 to 26.1, where it is what animates the
   underline, as femto keeps it in content/link.css */
main > aside nav details ul li a {
  margin: 0;
  margin-left: calc(var(--femto-border-width) * -1);
  padding: 0;
  padding-left: calc(var(--femto-nav-element-spacing-horizontal) * 1.5);
  border-left: var(--femto-border-width) solid transparent;
  border-radius: 0;
  font-weight: 400;
  transition: background-color var(--femto-transition), color var(--femto-transition), text-decoration var(--femto-transition), box-shadow var(--femto-transition), border-color var(--femto-transition), font-weight var(--femto-transition), -webkit-text-decoration var(--femto-transition);
}

main > aside nav details ul li a:hover {
  border-color: var(--femto-secondary-underline);
}

main > aside nav details ul li a[aria-current] {
  border-color: var(--femto-primary);
  color: var(--femto-primary-hover);
  font-weight: 600;
}

main > aside nav details ul li a[aria-current]:hover {
  text-decoration: none;
}

/**
 * Docs: Documentation Menu
 */
main > aside#documentation-menu {
  position: relative;
}

main > aside#documentation-menu header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  height: var(--femto-header-height);
  margin-bottom: var(--femto-spacing);
}

main > aside#documentation-menu header h2 {
  --femto-font-size: 1.25rem;
  margin-bottom: 0;
}

/* The Close button, a <button type="button"> drawn as the secondary link it replaced: its icon in the
   secondary link colors at 0.8 opacity, full on hover, and femto's link focus ring on keyboard
   focus. At 0.8 the icon keeps at least 3:1 on the menu's background (3.5:1 light, 4.7:1 dark;
   WCAG 1.4.11, criterion 10). Only its opacity transitions: Firefox styles the docs page once before
   the site's stylesheets apply (docs.html links them after the head scripts), so a color transition
   would run on load from femto's button colors, white on the primary background */
main > aside#documentation-menu header button {
  --femto-color: var(--femto-secondary);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  color: var(--femto-color);
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  opacity: 0.8;
  transition: opacity var(--femto-transition);
}

main > aside#documentation-menu header button:is(:hover, :active, :focus) {
  --femto-color: var(--femto-secondary-hover);
}

main > aside#documentation-menu header button:focus-visible {
  box-shadow: 0 0 0 var(--femto-outline-width) var(--femto-primary-focus);
}

main > aside#documentation-menu header button > span[role=img] {
  display: block;
  font-size: 1.125rem;
}

main > aside#documentation-menu header button:hover {
  opacity: 1;
}

@media (min-width: 1024px) {
  main > aside#documentation-menu header {
    display: none;
  }
}

/* Below lg the menu is a full-screen panel that slides in from the left */
@media (max-width: 1023px) {
  main > aside#documentation-menu {
    display: grid;
    z-index: 4;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    grid-template-rows: auto 1fr;
    transform: translateX(calc(-100% - var(--femto-spacing)));
    transition: transform var(--femto-transition);
  }

  main > aside#documentation-menu header,
  main > aside#documentation-menu nav {
    padding: 0 var(--femto-spacing);
  }

  main > aside#documentation-menu nav {
    margin-bottom: var(--femto-spacing);
    margin-block: calc(var(--femto-outline-width) * -1);
    padding-block: var(--femto-outline-width);
    overflow: auto;
  }

  main > aside#documentation-menu::before {
    z-index: -1;
    position: fixed;
    inset: 0;
    background-color: var(--femto-background-color);
    content: "";
  }

  main > aside#documentation-menu.is-open-on-mobile {
    transform: translateX(0);
  }
}

/* The open panel keeps to the sm and md containers (510px and 700px wide) */
@media (min-width: 576px) and (max-width: 1023px) {
  main > aside#documentation-menu.is-open-on-mobile {
    max-width: calc(510px + var(--femto-spacing) * 2);
    margin-right: auto;
    margin-left: auto;
  }

  main > aside#documentation-menu.is-open-on-mobile::before {
    inset: 0 calc((100vw - 510px) / 2 * -1);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  main > aside#documentation-menu.is-open-on-mobile {
    max-width: calc(700px + var(--femto-spacing) * 2);
  }

  main > aside#documentation-menu.is-open-on-mobile::before {
    inset: 0 calc((100vw - 700px) / 2 * -1);
  }
}

@media (min-width: 1024px) {
  main > aside#documentation-menu {
    transition: none;
  }
}

@media (max-width: 1023px) {
  html:has(aside#documentation-menu.is-open-on-mobile) {
    overflow: hidden;
  }
}

/**
 * Docs: Header, each section's hgroup. Its margins keep the space the oracle's grid gave the header
 * of a route: its top margin from lg, and the row gap below it
 */
main > [role=document] > section > hgroup {
  margin-bottom: 2rem;
}

@media (min-width: 1024px) {
  main > [role=document] > section > hgroup {
    margin-top: calc(var(--femto-block-spacing-vertical) / 2);
    margin-bottom: 3rem;
  }
}

@media (min-width: 1280px) {
  main > [role=document] > section > hgroup {
    margin-bottom: 4rem;
  }
}

@media (min-width: 1536px) {
  main > [role=document] > section > hgroup {
    margin-bottom: 5rem;
  }
}

main > [role=document] > section > hgroup p.chapter {
  margin-bottom: calc(var(--femto-spacing) * 0.25);
}

main > [role=document] > section > hgroup h1 {
  margin-bottom: calc(var(--femto-spacing) * 0.5);
  font-family: "Figtree", var(--femto-font-family);
}

@media (min-width: 576px) {
  main > [role=document] > section > hgroup h1 {
    --femto-font-size: 2.5rem;
  }
}

/* The oracle's Sass nests this h1 in the h1 rule, so it matches no element; kept as compiled */
@media (min-width: 1536px) {
  main > [role=document] > section > hgroup h1 h1 {
    --femto-font-size: 3rem;
  }
}

main > [role=document] > section > hgroup p {
  /* eslint-disable-next-line css/use-baseline -- text-wrap: pretty is not Baseline; a browser without it wraps the text as usual, a progressive enhancement femto's feature tiers allow for text-wrap */
  text-wrap: pretty;
}

/**
 * Docs: Document
 */
main > [role=document] section {
  margin-bottom: calc(var(--femto-spacing) * 3);
}

main > [role=document] article > *:last-child:not(footer, .grid),
main > [role=document] article form > *:last-child:not(footer, .grid) {
  margin-bottom: 0;
}

main > [role=document] .edit-on-github span[role=img] {
  margin-right: calc(var(--femto-spacing) * 0.25);
  font-size: 1rem;
  transform: translateY(-0.0625rem);
}

/**
 * Sections: the oracle's main.page-<id> rules, each scoped to the section whose h1 has that id.
 * The :where() keeps each selector's weight: [role=document] > section weighs what main.page-<id>
 * did, so every rule wins and loses where it did on its route
 */

/**
 * Section: Card
 */

/* Remove responsive spacings to demo this component
   because it's not the default behavior anymore. */
[role=document] > section:where(:has(> hgroup > h1[id=card])) article {
  --femto-block-spacing-vertical: var(--femto-spacing);
  --femto-block-spacing-horizontal: var(--femto-spacing);
}

/**
 * Section: Color schemes
 */
[role=document] > section:where(:has(> hgroup > h1[id=color-schemes])) article#theme-switcher button {
  display: block;
  width: 100%;
  margin-inline: auto;
}

@media (min-width: 576px) {
  [role=document] > section:where(:has(> hgroup > h1[id=color-schemes])) article#theme-switcher button {
    width: 50%;
    min-width: fit-content;
  }
}

/**
 * Section: Grid
 */
[role=document] > section:where(:has(> hgroup > h1[id=grid])) .btn-group button {
  width: 100%;
  margin-bottom: var(--femto-spacing);
}

[role=document] > section:where(:has(> hgroup > h1[id=grid])) .btn-group button > span[role=img] {
  margin-right: 0.5em;
}

@media (min-width: 576px) {
  [role=document] > section:where(:has(> hgroup > h1[id=grid])) .btn-group button {
    width: auto;
  }

  [role=document] > section:where(:has(> hgroup > h1[id=grid])) .btn-group button:not(:last-child) {
    margin-right: var(--femto-spacing);
  }
}

[role=document] > section:where(:has(> hgroup > h1[id=grid])) .grid > div {
  padding: calc(var(--femto-spacing) / 2) 0;
  border-radius: var(--femto-border-radius);
  background-color: var(--femto-code-background-color);
  color: var(--femto-muted-color);
  font-size: 0.875rem;
  text-align: center;
}

/**
 * Section: Loading
 */
[role=document] > section:where(:has(> hgroup > h1[id=loading])) .grid#buttons {
  margin-bottom: var(--femto-spacing);
}

/**
 * Section: Modal
 */
[role=document] > section:where(:has(> hgroup > h1[id=modal])) article#modal-demo button {
  display: block;
  width: 100%;
  margin-inline: auto;
}

@media (min-width: 576px) {
  [role=document] > section:where(:has(> hgroup > h1[id=modal])) article#modal-demo button {
    width: 50%;
    min-width: fit-content;
  }
}

/**
 * Section: Nav
 */
[role=document] > section:where(:has(> hgroup > h1[id=nav])) section#overflow article nav {
  border: 1px dashed var(--femto-del-color);
}

[role=document] > section:where(:has(> hgroup > h1[id=nav])) section#overflow article nav:not(:last-child) {
  border-bottom-color: transparent;
}

[role=document] > section:where(:has(> hgroup > h1[id=nav])) section#overflow article nav ul li a.focused {
  box-shadow: 0 0 0 var(--femto-outline-width) var(--femto-primary-focus);
  color: var(--femto-primary-hover);
}

/* The icon links example's Menu link: its menu character ☰ (Decision 18) is small for its em, so it
   is drawn larger without changing the line, as the breadcrumb's is */
[role=document] > section:where(:has(> hgroup > h1[id=nav])) nav[data-nav-example] a > span[role=img] {
  transform: scale(1.25);
}

/**
 * Section: Typography
 */
[role=document] > section:where(:has(> hgroup > h1[id=typography])) table#responsive-font-sizes {
  font-size: 16px;
}

[role=document] > section:where(:has(> hgroup > h1[id=typography])) table#responsive-font-sizes caption {
  display: none;
}

/* Seven columns: 100% / 7 */
[role=document] > section:where(:has(> hgroup > h1[id=typography])) table#responsive-font-sizes th,
[role=document] > section:where(:has(> hgroup > h1[id=typography])) table#responsive-font-sizes td {
  width: 14.2857142857%;
  padding: calc(var(--femto-spacing) / 2);
  white-space: nowrap;
}

[role=document] > section:where(:has(> hgroup > h1[id=typography])) table#responsive-font-sizes [data-tooltip] {
  border-bottom-color: var(--femto-muted-color);
}

[role=document] > section:where(:has(> hgroup > h1[id=typography])) table#responsive-font-sizes [data-tooltip]::before,
[role=document] > section:where(:has(> hgroup > h1[id=typography])) table#responsive-font-sizes [data-tooltip]::after {
  font-size: 12px;
}

/**
 * Section: Colors. The names table writes placeholders such as --femto-color-<color>-<shade>, where
 * Fira Code's ligatures would draw -< and >- as arrows
 */
[role=document] > section:where(:has(> hgroup > h1[id=colors])) td > code {
  font-variant-ligatures: none;
}

/**
 * Section: Themes, a dot of each theme color before its name in the table of the 20 colors
 */
[role=document] > section:where(:has(> hgroup > h1[id=themes])) td > span[class^="femto-background-"] {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-inline-end: 0.5em;
  border-radius: 50%;
  vertical-align: -0.125em;
}

/**
 * Docs nav: the menu's keyboard focus
 */
main > aside > nav details > summary:focus-visible:not([role]),
main > aside > nav details > ul li a:not([role=button]):focus-visible:not([role]) {
  outline: 0;
  box-shadow: none;
  color: var(--femto-primary-hover);
  text-decoration: underline;
}

/**
 * Card: color picker (the Theme picker section)
 */
article.color-picker > header {
  grid-gap: var(--femto-block-spacing-horizontal);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  overflow: hidden;
  border-top-right-radius: var(--femto-border-radius);
  border-top-left-radius: var(--femto-border-radius);
}

/* Each swatch is a size container, whose width the grid sets, for its check's size */
article.color-picker > header a {
  container-type: inline-size;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  border-radius: 50%;
}

/* The picked swatch's check ✓ (Decision 18): half the swatch's width, at most 1.5rem, as the SVG it
   replaced was, in bold and drawn in with common.css's icon-check */
article.color-picker > header a > span[role=img] {
  font-weight: bold;
  font-size: min(1.5rem, 50cqi);
  opacity: 0.875;
  animation: icon-check 0.2s ease-out;
}

/* The focused swatch draws its ring inside: a contrast ring with an inverse ring within it, which
   shows on light and dark swatches in both schemes (WCAG 2.4.7). femto's outer ring, a translucent
   primary, is faint on dark swatches in the dark scheme, and from 1280px, where the swatches have
   no gaps, it is painted under the next swatch and clipped by the header. */
article.color-picker > header a:focus-visible {
  box-shadow:
    inset 0 0 0 var(--femto-outline-width) var(--femto-contrast-inverse),
    inset 0 0 0 calc(var(--femto-outline-width) * 2) var(--femto-contrast);
}

@media (min-width: 768px) {
  article.color-picker > header {
    grid-gap: calc(var(--femto-block-spacing-horizontal) * 0.5);
    grid-template-columns: repeat(10, 1fr);
  }
}

@media (min-width: 1280px) {
  article.color-picker > header {
    grid-gap: 0;
    grid-template-columns: repeat(20, 1fr);
    padding: 0;
  }

  article.color-picker > header a {
    border-radius: 0;
  }
}

article.color-picker h2 {
  color: var(--femto-primary);
  font-size: 1.5rem;
  line-height: 1.175;
}

article.color-picker > hgroup,
article.color-picker > form {
  transition: opacity var(--femto-transition), filter var(--femto-transition);
}

/* The theme example's row of fields is a div.grid, and its switch a bare <label>, not fieldsets,
   which would need a legend (criterion 9, wcag/h71); the row keeps the space below it that femto
   gives a fieldset */
article.color-picker > form > .grid {
  margin-bottom: var(--femto-spacing);
}

/* The option switches share one fieldset with a legend (criterion 9, wcag/h71), so each note follows
   its <label>, not a fieldset of its own: it gets femto's helper text style for a <small> after a
   fieldset, at the same distance from its switch */
[data-picker-options] fieldset > label + small {
  display: block;
  width: 100%;
  margin-top: calc(var(--femto-spacing) * 0.625);
  margin-bottom: var(--femto-spacing);
  color: var(--femto-muted-color);
}

[data-picker-options] fieldset > small:last-child {
  margin-bottom: 0;
}

/**
 * Color families (the Colors section)
 */
.color-families {
  grid-column-gap: 2rem;
  grid-row-gap: 4rem;
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .color-families {
    grid-template-columns: 1fr 1fr;
  }
}

.color-families .family {
  margin: 0;
  padding: 0;
  background-color: transparent;
  box-shadow: none;
}

.color-families .family header {
  aspect-ratio: 16/9;
  margin: 0;
  margin-bottom: 0.75rem;
  padding: 0;
  padding: 1rem 2rem;
  border-radius: var(--femto-border-radius);
  border-color: transparent;
  text-align: left;
  cursor: pointer;
}

.color-families .family .shades {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
}

.color-families .family .shades > button {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  margin-bottom: 0;
  padding: 0;
  border-width: 0;
  border-radius: var(--femto-border-radius);
  font-size: 0.75rem;
}

/* Black text on the 31 shades whose .femto-background-* class sets white text with a contrast below
   4.5:1 (WCAG AA for text of this size); black has at least 4.69:1 on each. Only the swatches and
   the color dialog's header change: the classes keep femto's text colors, and the Colors section
   says so above the swatches (colors.html). The swatches' color is
   not transitioned: Firefox can style them before this file has loaded, and then fades their text
   from white to black, which axe read mid-fade (#212121) in one run */
.color-families .family .shades > button {
  transition: background-color var(--femto-transition), border-color var(--femto-transition), box-shadow var(--femto-transition);
}

.color-families .family .shades > button:is(.femto-background-red-450, .femto-background-pink-450,
  .femto-background-fuchsia-450, .femto-background-fuchsia-500, .femto-background-purple-500,
  .femto-background-violet-500, .femto-background-indigo-500, .femto-background-blue-500,
  .femto-background-azure-400, .femto-background-azure-450, .femto-background-azure-500,
  .femto-background-cyan-350, .femto-background-cyan-400, .femto-background-cyan-450,
  .femto-background-cyan-500, .femto-background-jade-350, .femto-background-jade-400,
  .femto-background-jade-450, .femto-background-jade-500, .femto-background-green-400,
  .femto-background-green-450, .femto-background-lime-400, .femto-background-lime-450,
  .femto-background-yellow-450, .femto-background-amber-450, .femto-background-pumpkin-450,
  .femto-background-orange-450, .femto-background-sand-500, .femto-background-grey-500,
  .femto-background-zinc-500, .femto-background-slate-500),
dialog.color > article > header:is(.femto-background-red-450, .femto-background-pink-450,
  .femto-background-fuchsia-450, .femto-background-fuchsia-500, .femto-background-purple-500,
  .femto-background-violet-500, .femto-background-indigo-500, .femto-background-blue-500,
  .femto-background-azure-400, .femto-background-azure-450, .femto-background-azure-500,
  .femto-background-cyan-350, .femto-background-cyan-400, .femto-background-cyan-450,
  .femto-background-cyan-500, .femto-background-jade-350, .femto-background-jade-400,
  .femto-background-jade-450, .femto-background-jade-500, .femto-background-green-400,
  .femto-background-green-450, .femto-background-lime-400, .femto-background-lime-450,
  .femto-background-yellow-450, .femto-background-amber-450, .femto-background-pumpkin-450,
  .femto-background-orange-450, .femto-background-sand-500, .femto-background-grey-500,
  .femto-background-zinc-500, .femto-background-slate-500) {
  color: var(--femto-color-dark);
}

/**
 * Dialog: color (the Colors section)
 */
dialog.color {
  --femto-font-size: 0.875rem;
  padding: 0;
}

dialog.color > article {
  transform: translate3d(0, 0, 0);
  background: var(--femto-background-color);
  box-shadow: 0 0 0 var(--femto-border-width) var(--femto-secondary-focus), 0 0 6rem 0 var(--femto-glowing-color), var(--femto-box-shadow);
  transition: box-shadow var(--femto-transition);
}

@media (min-width: 1024px) {
  dialog.color > article {
    max-width: 950px;
  }
}

dialog.color > article p {
  color: inherit;
}

dialog.color > article p,
dialog.color > article pre {
  margin-bottom: 0;
}

dialog.color > article header {
  font-weight: bold;
  transition: color var(--femto-transition), background-color var(--femto-transition);
}

/* The close button: the header's own close icon (Decision 18's ✕) in its text color,
   without femto's background icon, and a focus ring on keyboard focus only, as the link it replaced
   had */
dialog.color > article header button.close {
  z-index: 1;
  position: relative;
  height: inherit;
  border-radius: 0;
  background-image: none;
  background-position: inherit;
  background-size: inherit;
  background-repeat: inherit;
  box-shadow: none;
  color: inherit;
  font-weight: inherit;
  line-height: initial;
}

/* Its icon at about the size of the 24px SVG it replaced (20px at the root's base size), which
   overflowed femto's 1rem button as this does */
dialog.color > article header button.close > span[role=img] {
  font-size: 1.25rem;
}

dialog.color > article header button.close:focus-visible {
  box-shadow: 0 0 0 var(--femto-outline-width) var(--femto-primary-focus);
}

dialog.color > article header hgroup {
  margin-bottom: 0;
}

dialog.color > article header hgroup h3 {
  color: inherit;
}

/* The shade's name, smaller than the title and not bold, at full opacity: the header's text color
   has 4.5:1 on its swatch color, and half opacity would bring it below that (criterion 10) */
dialog.color > article header hgroup p {
  --femto-font-size: 0.875em;
  font-weight: normal;
}

dialog.color > article pre {
  --femto-block-spacing-vertical: var(--femto-spacing);
}

dialog.color > article .grid .code {
  margin-bottom: 0;
  box-shadow: none;
}

@media (min-width: 768px) {
  dialog.color > article .grid {
    grid-template-columns: min-content auto;
    align-items: center;
    white-space: nowrap;
  }
}

/**
 * Dialog: example, a modal shown open inside the page
 */
dialog.example {
  z-index: inherit;
  position: relative;
  min-height: inherit;
  margin: 0 calc(var(--femto-spacing) * -1) var(--femto-block-spacing-vertical) calc(var(--femto-spacing) * -1);
  inset: inherit;
}

@media (min-width: 576px) {
  dialog.example {
    margin: 0;
    margin-bottom: var(--femto-block-spacing-vertical);
  }
}

dialog.example > article {
  animation: none;
}

/**
 * Headings (their # anchors are gone with the one page)
 */
:is(h1, h2, h3, h4, h5, h6) {
  position: relative;
}