/*
 * The docs site's own styles: the shell from the Figma "Oddkin Docs Website" file, on Oddkin
 * tokens and the published CSS recipes (layout, button, link, table). Arrangements use the
 * layout classes in the markup; this sheet sets sizes, spacing, and type.
 */

.odd-button[hidden] {
  display: none;
}

.icon {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  vertical-align: middle;
}

.skip-link {
  position: absolute;
  inset-block-start: var(--odd-space-xs);
  inset-inline-start: var(--odd-space-xs);
  z-index: 2;
  padding: var(--odd-space-xs) var(--odd-space-sm);
  border-radius: var(--odd-radius-sm);
  background: var(--odd-color-surface-default);
  transform: translateY(-200%);
}

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

/* Header */

.site-header {
  --odd-row-gap: var(--odd-space-md);
  padding: var(--odd-space-xl);
  border-block-end: var(--odd-border-width-default) solid var(--odd-color-border-default);
}

.brand,
.footer-brand .brand-name {
  color: var(--odd-color-text-primary);
  text-decoration: none;
  white-space: nowrap;
}

/* Figma 20:291: brand 188 px and navigation 500 px; the row spreads the five groups between. */
.brand {
  --odd-row-gap: var(--odd-space-xs);
  flex: 0 1 11.75rem;
}

.brand-name {
  font-family: var(--odd-type-display-family);
  font-size: 1.75rem;
  font-weight: var(--odd-type-display-weight);
  line-height: 1.15;
  letter-spacing: var(--odd-type-display-letter-spacing);
}

.brand-docs {
  color: var(--odd-color-text-secondary);
}

.primary-nav {
  --odd-row-gap: var(--odd-space-lg);
  flex: 0 1 31.25rem;
}

.primary-nav a {
  color: var(--odd-color-text-primary);
  font-family: var(--odd-type-ui-family);
  font-size: var(--odd-type-ui-size);
  font-weight: var(--odd-type-ui-weight);
  line-height: var(--odd-type-ui-line-height);
  text-decoration: none;
  white-space: nowrap;
}

.primary-nav a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.primary-nav a[aria-current] {
  color: var(--odd-color-link);
}

.search-group {
  --odd-row-gap: var(--odd-space-sm);
}

/* Figma "Search trigger": a secondary button, its label at the start and a 16 px icon at the end. */
.search-trigger {
  --odd-button-padding-inline: var(--odd-space-sm);
  justify-content: space-between;
  min-inline-size: 15.5rem;
  text-decoration: none;
}

.search-trigger .icon {
  inline-size: 1rem;
  block-size: 1rem;
}

.shortcut,
.version {
  white-space: nowrap;
}

.icon-button {
  --odd-button-padding-inline: var(--odd-space-xs);
  min-inline-size: var(--odd-control-height-md);
}

.mode-toggle .icon + .icon,
.mode-toggle[aria-pressed='true'] .icon:first-of-type,
.menu-toggle .icon + .icon,
.menu-toggle[aria-expanded='true'] .icon:first-of-type {
  display: none;
}

.mode-toggle[aria-pressed='true'] .icon + .icon,
.menu-toggle[aria-expanded='true'] .icon + .icon {
  display: inline;
}

/* The icon says which mode is on; the recipe's pressed fill would read as a selected tool. */
.mode-toggle[aria-pressed='true'] {
  border-color: transparent;
  background: transparent;
  color: var(--odd-color-text-primary);
}

@media (hover: hover) {
  .mode-toggle[aria-pressed='true']:hover {
    background: var(--odd-color-surface-hover);
  }
}

@media (width >= 55.5rem) {
  .menu-toggle {
    display: none;
  }
}

/* Sidebar and content */

.site-layout {
  --odd-split-side-width: 15.5rem;
  --odd-split-main-min: 38rem;
  --odd-split-gap: 0;
  align-items: start;
}

.side-nav {
  position: sticky;
  inset-block-start: 0;
  max-block-size: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
  padding: var(--odd-space-lg);
}

.nav-group,
.nav-heading {
  margin: 0;
  color: var(--odd-color-text-secondary);
  font-family: var(--odd-type-eyebrow-family);
  font-size: var(--odd-type-eyebrow-size);
  font-weight: var(--odd-type-eyebrow-weight);
  line-height: var(--odd-type-eyebrow-line-height);
  letter-spacing: var(--odd-type-eyebrow-letter-spacing);
  text-transform: uppercase;
}

.nav-group:not(:first-child) {
  margin-block-start: var(--odd-space-md);
}

.side-nav > a {
  color: var(--odd-color-text-primary);
}

.side-nav > a[aria-current='true'] {
  font-weight: var(--odd-font-weight-semibold);
}

.side-nav > a.nav-child {
  padding-inline-start: calc(var(--odd-navigation-item-padding-inline) + var(--odd-space-md));
  color: var(--odd-color-text-secondary);
}

.side-nav > a.nav-child[aria-current='page'] {
  color: var(--odd-color-text-primary);
}

.nav-footer {
  --odd-stack-gap: var(--odd-space-2xs);
  /* The footer region is a row: the note fills it, so the divider spans the sidebar. */
  flex: 1;
  padding-block-start: var(--odd-space-md);
  border-block-start: var(--odd-border-width-default) solid var(--odd-color-border-default);
  color: var(--odd-color-text-secondary);
  font-size: var(--odd-type-small-size);
  line-height: var(--odd-type-small-line-height);
}

.nav-footer > p {
  margin: 0;
}

.nav-footer.nav-global {
  margin-block-start: var(--odd-space-md);
  padding-block-start: var(--odd-space-lg);
}

/* A child page shows while its parent is open (`hidden` otherwise, over the recipe's display). */
.side-nav > [hidden] {
  display: none;
}

/*
 * Wide screens show the section's sidebar (Figma "Docs / Components sidebar" and its siblings):
 * heading, links, and note 16 px apart, and the links 4 px apart (the design binds that gap to
 * space.2xs, tighter than the side-nav's default navigation.item.gap). The narrow-screen menu
 * shows the site map.
 */
@media (width >= 55.5rem) {
  .side-nav[data-section] {
    --odd-navigation-item-gap: var(--odd-space-2xs);
    background: var(--odd-color-surface-default);
  }

  .side-nav[data-section] > .nav-global {
    display: none;
  }

  .side-nav[data-section]::part(base) {
    gap: var(--odd-space-md);
  }

  /* Before odd-side-nav registers: the same column and gaps, so its links do not move as it upgrades. */
  .side-nav[data-section]:not(:defined) {
    display: flex;
    flex-direction: column;
    gap: var(--odd-navigation-item-gap);
  }

  .side-nav[data-section]:not(:defined) > [slot='header'] {
    margin-block-end: calc(var(--odd-space-md) - var(--odd-navigation-item-gap));
  }

  .side-nav[data-section]:not(:defined) > [slot='footer'] {
    margin-block-start: calc(var(--odd-space-md) - var(--odd-navigation-item-gap));
  }
}

@media (width < 55.5rem) {
  .side-nav > .nav-section {
    display: none;
  }
}

/* Before odd-side-nav upgrades, its entries are plain links: one per line. */
odd-side-nav:not(:defined) > a {
  display: block;
  padding: var(--odd-space-xs) var(--odd-space-sm);
  color: var(--odd-color-text-primary);
  font-weight: var(--odd-type-ui-weight);
  text-decoration: none;
}

/* main is an odd-box around an odd-container (.page-column) whose #content is an odd-stack of the
   page's sections. The inset follows the viewport; the column centres at most 90rem wide. */
#main {
  --odd-box-inset: clamp(var(--odd-space-lg), 4vi, var(--odd-space-2xl));
  min-block-size: 65vh;
}

#main:focus {
  outline: none;
}

.page-column {
  --odd-container-measure: 90rem;
}

#content {
  --odd-stack-gap: var(--odd-space-2xl);
}

.eyebrow {
  margin: 0;
  color: var(--odd-color-text-secondary);
  font-family: var(--odd-type-eyebrow-family);
  font-size: var(--odd-type-eyebrow-size);
  font-weight: var(--odd-type-eyebrow-weight);
  line-height: var(--odd-type-eyebrow-line-height);
  letter-spacing: var(--odd-type-eyebrow-letter-spacing);
  text-transform: uppercase;
}

.page-header > * {
  margin: 0;
}

.page-header > * + * {
  margin-block-start: var(--odd-space-md);
}

/* Figma "Component metadata" (20:2200): status, package (a 360 px column), and source, 16 px apart. */
.component-meta {
  --odd-cluster-gap: var(--odd-space-md);
  align-items: center;
}

.component-meta > code {
  flex: 0 1 22.5rem;
  color: var(--odd-color-text-secondary);
  font-family: var(--odd-type-code-family);
  font-size: var(--odd-type-code-size);
  line-height: var(--odd-type-code-line-height);
}

.component-meta > .odd-link {
  font-family: var(--odd-type-ui-family);
  font-size: var(--odd-type-ui-size);
  font-weight: var(--odd-type-ui-weight);
  line-height: var(--odd-type-ui-line-height);
}

/* Figma Docs/TabStrip (19:874): equal tabs 24 px apart, the selected one in the link colour over a
   1 px rule; two by two on a phone. */
.component-tabs {
  --odd-auto-grid-min: 7rem;
  --odd-auto-grid-gap: var(--odd-space-xs) var(--odd-space-lg);
}

.component-tabs > [role='tab'] {
  margin: 0;
  padding: 0 0 var(--odd-space-xs);
  border: 0;
  border-block-end: var(--odd-border-width-default) solid transparent;
  background: none;
  color: var(--odd-color-text-secondary);
  font-family: var(--odd-type-ui-family);
  font-size: var(--odd-type-ui-size);
  font-weight: var(--odd-type-ui-weight);
  line-height: var(--odd-type-ui-line-height);
  text-align: start;
  cursor: pointer;
}

.component-tabs > [aria-selected='false']:hover {
  color: var(--odd-color-text-primary);
}

.component-tabs > [aria-selected='true'] {
  border-color: var(--odd-color-action-default);
  color: var(--odd-color-link);
}

@media (forced-colors: active) {
  .component-tabs > [role='tab'] {
    border-color: Canvas;
  }

  .component-tabs > [aria-selected='true'] {
    border-color: Highlight;
  }
}

#main h1 {
  font-family: var(--odd-type-display-family);
  font-size: var(--odd-type-display-size);
  font-weight: var(--odd-type-display-weight);
  line-height: var(--odd-type-display-line-height);
  letter-spacing: var(--odd-type-display-letter-spacing);
}

#main h2 {
  margin: 0 0 var(--odd-space-lg);
  font-family: var(--odd-type-section-family);
  font-size: var(--odd-type-section-size);
  font-weight: var(--odd-type-section-weight);
  line-height: var(--odd-type-section-line-height);
  letter-spacing: var(--odd-type-section-letter-spacing);
}

#main h3 {
  margin: 0;
  font-family: var(--odd-type-title-family);
  font-size: var(--odd-type-title-size);
  font-weight: var(--odd-type-title-weight);
  line-height: var(--odd-type-title-line-height);
  letter-spacing: var(--odd-type-title-letter-spacing);
}

.lede {
  color: var(--odd-color-text-secondary);
}

.content-section > :is(p, ul, ol, figure, .table-scroll, .note) {
  margin-block: var(--odd-space-md) 0;
}

.content-section > h2 + * {
  margin-block-start: 0;
}

/* Prose keeps a reading measure; card and specimen lists (role="list") take the column. */
.content-section > :is(p, ul, ol, .note):not([role='list']),
.page-header > p,
.lede {
  max-inline-size: 72ch;
}

/* Prose lists; card and specimen lists (role="list") keep their own spacing. */
.content-section :is(ul, ol):not([role='list']) > li + li {
  margin-block-start: var(--odd-space-xs);
}

#main code {
  font-family: var(--odd-type-code-family);
  font-size: 0.9em;
}

.note {
  padding: var(--odd-space-md);
  border-radius: var(--odd-radius-md);
  background: var(--odd-color-surface-specimen);
}

.toc ul {
  --odd-cluster-gap: var(--odd-space-xs) var(--odd-space-lg);
  margin: var(--odd-space-xs) 0 0;
  padding: 0;
  list-style: none;
}

.toc a {
  font-family: var(--odd-type-ui-family);
  font-size: var(--odd-type-ui-size);
  font-weight: var(--odd-type-ui-weight);
}

/* Figma "Link / /installation" (20:708–20:709): an odd-link 48 px below a full-width divider
   (the line is the link's own UI type, so nothing adds to the 48). */
.page-next {
  padding-block-start: var(--odd-space-2xl);
  border-block-start: var(--odd-border-width-default) solid var(--odd-color-border-default);
  font-size: var(--odd-type-ui-size);
  line-height: var(--odd-type-ui-line-height);
}

/* Code blocks */

.code-block {
  --odd-row-gap: var(--odd-space-md);
  margin-inline: 0;
  padding: var(--odd-space-lg);
  border-radius: var(--odd-radius-lg);
  background: var(--odd-color-surface-sunken);
}

/* The copy button (a small control) registers after the first paint: hold its height meanwhile. */
.code-toolbar {
  min-block-size: var(--odd-control-height-sm);
}

.code-label {
  color: var(--odd-color-text-primary);
  font-size: var(--odd-font-size-sm);
}

.code-block pre {
  margin: var(--odd-space-md) 0 0;
  overflow-x: auto;
  font-family: var(--odd-type-code-family);
  font-size: var(--odd-type-code-size);
  line-height: var(--odd-type-code-line-height);
}

#main .code-block pre code {
  font-size: inherit;
}

.code-block figcaption {
  margin-block-start: var(--odd-space-sm);
  color: var(--odd-color-text-secondary);
  font-size: var(--odd-type-small-size);
}

/* Cards */

.card-list {
  --odd-auto-grid-min: 18rem;
  --odd-auto-grid-gap: var(--odd-space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.resource-card {
  --odd-card-padding: var(--odd-space-lg);
  --odd-card-gap: var(--odd-space-md);
  --odd-card-radius: var(--odd-radius-lg);
  --odd-card-background: var(--odd-color-surface-default);
  --odd-card-border-color: var(--odd-color-border-default);
}

/* Until odd-card registers (on first use, after the first paint) a card has the box and column it
   upgrades to, so a link in it stays under the pointer as it upgrades. */
.resource-card:not(:defined) {
  display: flex;
  flex-direction: column;
  gap: var(--odd-card-gap);
  padding: var(--odd-card-padding);
  border: var(--odd-border-width-default) solid var(--odd-card-border-color);
  border-radius: var(--odd-card-radius);
  background: var(--odd-card-background);
}

/* The upgraded card's body is one region: no gap between its paragraphs. */
.resource-card:not(:defined) > :not([slot]) + :not([slot]) {
  margin-block-start: calc(-1 * var(--odd-card-gap));
}

.resource-card:not(:defined) > [slot='footer'] {
  margin-block-start: auto;
}

.resource-card > p:not([slot]),
.card-meta {
  margin: 0;
  color: var(--odd-color-text-secondary);
}

/* Figma Docs/ResourceCard: a 1 px rule, then the package line and the action, a card gap apart. */
.card-footer {
  --odd-stack-gap: var(--odd-space-md);
  padding-block-start: var(--odd-space-md);
  border-block-start: var(--odd-border-width-default) solid var(--odd-color-border-default);
}

.resource-card .odd-button {
  text-decoration: none;
}

/* Tables */

.table-scroll {
  overflow-x: auto;
}

.table-scroll .odd-table {
  inline-size: 100%;
}

/* Words stay whole when the columns are sized; the region scrolls instead. */
.table-scroll .odd-table :is(th, td) {
  overflow-wrap: break-word;
}

/* Foundations: each preview is drawn by its own token, set by the shell (data-preview). */
.token-preview {
  display: inline-block;
  vertical-align: middle;
}

.token-preview-color {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border: var(--odd-border-width-default) solid var(--odd-color-border-default);
  border-radius: var(--odd-radius-sm);
}

/* A swatch stays beside its value. */
.odd-table td:has(> .mode-scope) {
  white-space: nowrap;
}

.token-preview-radius {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: var(--odd-border-width-strong) solid var(--odd-color-border-strong);
  background: var(--odd-color-surface-sunken);
}

.token-preview-space {
  block-size: 0.75rem;
  background: var(--odd-color-action-default);
}

.token-preview-font-size {
  font-family: var(--odd-font-family-sans);
  line-height: 1;
}

.ramp {
  margin: 0 0 var(--odd-space-xl);
}

.ramp figcaption,
.mode-specimen figcaption,
.reflow-specimen figcaption {
  margin-block-end: var(--odd-space-sm);
  font: var(--odd-type-ui-weight) var(--odd-type-ui-size) / var(--odd-type-ui-line-height)
    var(--odd-type-ui-family);
}

.ramp-steps {
  gap: var(--odd-space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ramp-steps li {
  inline-size: 3.5rem;
  gap: var(--odd-space-3xs);
  font-size: var(--odd-type-small-size);
}

.ramp-steps .token-preview-color {
  inline-size: 100%;
  block-size: 3rem;
}

.ramp-steps code {
  color: var(--odd-color-text-secondary);
}

.mode-specimens {
  margin-block: var(--odd-space-lg);
}

.mode-specimen {
  margin: 0;
  padding: var(--odd-space-lg);
  border: var(--odd-border-width-default) solid var(--odd-color-border-default);
  border-radius: var(--odd-radius-lg);
  background: var(--odd-color-canvas);
  color: var(--odd-color-text-primary);
}

.elevation-tiles,
.role-swatches,
.tone-list,
.reflow-specimen ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.elevation-tile {
  min-inline-size: 7rem;
  padding: var(--odd-space-md);
  border-radius: var(--odd-radius-md);
  background: var(--odd-color-surface-raised);
}

.role-swatches li {
  gap: var(--odd-space-sm);
}

.reflow-specimen {
  margin: 0;
  padding: var(--odd-space-md);
  border: var(--odd-border-width-default) dashed var(--odd-color-border-strong);
  border-radius: var(--odd-radius-md);
}

.reflow-specimen li {
  padding: var(--odd-space-sm);
  border-radius: var(--odd-radius-sm);
  background: var(--odd-color-surface-sunken);
}

.duration-meter {
  inline-size: 8rem;
}

/* Footer */

.site-footer {
  padding: var(--odd-space-2xl);
  background: var(--odd-color-surface-sunken);
}

.footer-columns {
  --odd-cluster-gap: var(--odd-space-xl) var(--odd-space-3xl);
  align-items: start;
}

.footer-brand {
  inline-size: min(22.5rem, 100%);
}

.footer-brand p {
  margin: 0;
}

.footer-brand p + p {
  margin-block-start: var(--odd-space-md);
  color: var(--odd-color-text-secondary);
}

.footer-nav {
  --odd-cluster-gap: var(--odd-space-xl) var(--odd-space-3xl);
  align-items: start;
}

/* Figma Docs/Footer 5:1240: 240 px columns. */
.footer-column {
  inline-size: 15rem;
}

.footer-heading {
  margin: 0 0 var(--odd-space-md);
  font-family: var(--odd-type-ui-family);
  font-size: var(--odd-type-ui-size);
  font-weight: var(--odd-type-ui-weight);
  line-height: var(--odd-type-ui-line-height);
}

.footer-column ul {
  --odd-stack-gap: var(--odd-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-column a,
.footer-meta {
  color: var(--odd-color-text-secondary);
  font-size: var(--odd-type-small-size);
  line-height: var(--odd-type-small-line-height);
}

.footer-column a,
.footer-meta a {
  text-decoration: none;
}

.footer-column a:hover,
.footer-meta a:hover {
  text-decoration: underline;
}

.footer-meta {
  --odd-cluster-gap: var(--odd-space-xs) var(--odd-space-3xl);
  margin-block-start: var(--odd-space-xl);
  padding-block-start: var(--odd-space-md);
  border-block-start: var(--odd-border-width-default) solid var(--odd-color-border-default);
}

.footer-meta p {
  margin: 0;
}

.footer-meta a {
  color: inherit;
}

.footer-meta .icon {
  inline-size: 1rem;
  block-size: 1rem;
  margin-inline-start: var(--odd-space-2xs);
}

.odd-link .icon {
  inline-size: 1rem;
  block-size: 1rem;
  margin-inline-start: var(--odd-space-xs);
}

/* Home: full width, without the sidebar on wide screens; sections centre an 82rem column. */

[data-home] > #main {
  --odd-box-inset: 0;
}

[data-home] #content {
  --odd-stack-gap: 0;
}

.home-hero,
.home-section {
  padding: var(--odd-space-3xl) max(var(--odd-space-3xl), calc((100% - 82rem) / 2));
}

/* Figma 20:294: the copy is 616 px beside the specimen, 48 px apart; below that they stack. */
.hero-split {
  --odd-split-side-width: 38.5rem;
  --odd-split-main-min: 30rem;
  --odd-split-gap: var(--odd-space-2xl);
  align-items: center;
}

.hero-copy > *,
.section-heading > *,
.tool-panel > * {
  margin: 0;
}

.hero-copy .eyebrow,
.section-heading .eyebrow,
.page-header .eyebrow {
  color: var(--odd-color-link);
}

/* Figma 20:297: 64 px, line height 1.15, off the type scale (no variable is bound). */
#main .hero-title {
  font-size: 4rem;
  line-height: 1.15;
}

/* Figma 20:299: 20 px, line height 1.15, 520 px wide. */
.hero-lede {
  max-inline-size: 32.5rem;
  color: var(--odd-color-text-secondary);
  font-size: var(--odd-font-size-xl);
  line-height: 1.15;
}

.hero-actions {
  --odd-cluster-gap: var(--odd-space-md);
}

.hero-actions .odd-button {
  text-decoration: none;
}

/* Figma 20:304: the 1 px stroke is inside the 32 px padding, so the content is 584 px wide. */
.specimen {
  padding: calc(var(--odd-space-xl) - var(--odd-border-width-default));
  border: var(--odd-border-width-default) solid var(--odd-color-border-default);
  border-radius: var(--odd-radius-2xl);
  background: var(--odd-color-surface-specimen);
}

/* Figma 20:308: two 280 px columns, 24 px apart; the card centred beside the controls. */
.specimen-components {
  --odd-auto-grid-min: 17.5rem;
  --odd-auto-grid-gap: var(--odd-space-lg);
  align-items: center;
}

.specimen odd-card p {
  margin: 0;
}

/* Figma 20:319: five 108 px tiles, 8 px apart. */
.token-palette {
  --odd-auto-grid-min: 6.75rem;
  --odd-auto-grid-gap: var(--odd-space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.token-palette code {
  color: var(--odd-color-text-secondary);
  font-size: var(--odd-type-small-size);
}

.swatch {
  display: block;
  block-size: 4rem;
  margin-block-end: var(--odd-space-xs);
  border: var(--odd-border-width-default) solid var(--odd-color-border-default);
  border-radius: var(--odd-radius-md);
}

.swatch-action {
  background: var(--odd-color-action-default);
}

.swatch-text {
  background: var(--odd-color-text-primary);
}

.swatch-surface {
  background: var(--odd-color-surface-raised);
}

.swatch-success {
  background: var(--odd-color-success-foreground);
}

.swatch-warning {
  background: var(--odd-color-warning-foreground);
}

#main h2.eyebrow {
  margin: 0;
  font-family: var(--odd-type-eyebrow-family);
  font-size: var(--odd-type-eyebrow-size);
  font-weight: var(--odd-type-eyebrow-weight);
  line-height: var(--odd-type-eyebrow-line-height);
  letter-spacing: var(--odd-type-eyebrow-letter-spacing);
}

.path-list {
  --odd-auto-grid-min: 11rem;
  --odd-auto-grid-gap: var(--odd-space-lg);
  margin: var(--odd-space-lg) 0 0;
  padding: 0;
  list-style: none;
}

.path,
.path > span {
  display: block;
}

.path {
  color: var(--odd-color-text-secondary);
  text-decoration: none;
}

.path-number {
  font-size: var(--odd-type-ui-size);
}

.path-title {
  margin-block: var(--odd-space-sm) var(--odd-space-xs);
  color: var(--odd-color-text-primary);
  font-family: var(--odd-type-title-family);
  font-size: var(--odd-type-title-size);
  font-weight: var(--odd-type-title-weight);
  line-height: var(--odd-type-title-line-height);
}

.path:hover .path-title {
  color: var(--odd-color-link);
  text-decoration: underline;
}

.path-text {
  font-size: var(--odd-type-small-size);
}

.section-heading > * + * {
  margin-block-start: var(--odd-space-md);
}

#main .section-heading h2 {
  margin: var(--odd-space-md) 0 0;
  font-family: var(--odd-type-display-family);
  font-size: var(--odd-type-display-size);
  font-weight: var(--odd-type-display-weight);
  line-height: var(--odd-type-display-line-height);
  letter-spacing: var(--odd-type-display-letter-spacing);
}

.home-section > .section-heading + * {
  margin-block-start: var(--odd-space-xl);
}

.tool-list {
  --odd-auto-grid-min: 22rem;
  --odd-auto-grid-gap: var(--odd-space-lg);
}

.tool-panel {
  padding: var(--odd-space-xl);
  border-radius: var(--odd-radius-lg);
  background: var(--odd-color-surface-sunken);
}

.tool-panel > * + * {
  margin-block-start: var(--odd-space-lg);
}

#main .tool-panel h3 {
  font-family: var(--odd-type-section-family);
  font-size: var(--odd-type-section-size);
}

.tool-panel p {
  color: var(--odd-color-text-secondary);
}

.theme-scopes {
  --odd-auto-grid-min: 10rem;
  --odd-auto-grid-gap: var(--odd-space-lg);
}

.theme-scope {
  padding: var(--odd-space-md);
  border: var(--odd-border-width-default) solid var(--odd-color-border-default);
  border-radius: var(--odd-radius-md);
  background: var(--odd-color-canvas);
}

.tool-preview {
  --odd-cluster-gap: var(--odd-space-md);
}

.home-quick-start {
  --odd-split-side-width: 28.5rem;
  --odd-split-main-min: 26rem;
  --odd-split-gap: var(--odd-space-2xl);
  align-items: start;
}

.quick-start-text .odd-link,
.tool-panel > .odd-link {
  display: inline-block;
  margin-block-start: var(--odd-space-lg);
}

.quick-start-code > * + * {
  margin-block-start: var(--odd-space-md);
}

@media (width >= 55.5rem) {
  [data-home] > .side-nav {
    display: none;
  }
}

/* Narrow screens: the header keeps the brand, search, and the menu that discloses the sidebar. */

@media (width < 55.5rem) {
  .site-header {
    padding: var(--odd-space-lg);
  }

  .primary-nav,
  .shortcut,
  .version {
    display: none;
  }

  .search-trigger {
    --odd-button-padding-inline: var(--odd-space-xs);
    justify-content: center;
    min-inline-size: var(--odd-control-height-md);
  }

  .search-label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  [data-docs-js] .side-nav:not([data-open]) {
    display: none;
  }

  .side-nav {
    position: static;
    max-block-size: none;
    border-block-end: var(--odd-border-width-default) solid var(--odd-color-border-default);
  }

  .site-footer,
  .home-hero,
  .home-section {
    padding: var(--odd-space-lg);
  }
}

/* At the 320 px reflow width the brand and three header buttons fit only when tighter. */
@media (width < 22rem) {
  .site-header {
    --odd-row-gap: var(--odd-space-2xs);
    padding-inline: var(--odd-space-md);
  }

  .site-header .brand-name {
    font-size: var(--odd-font-size-2xl);
  }

  .site-header > .odd-button,
  .search-group .odd-button {
    --odd-button-height: var(--odd-control-height-sm);
    min-inline-size: var(--odd-control-height-sm);
  }
}