/* Docs-site chrome only. Anything a component needs belongs in src/sass. */

body {
  padding-bottom: 4rem;
}

.build-warning {
  padding: 1rem;
  text-align: center;
}

code {
  background-color: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

section :is(button, a.button):not(nav :is(button, a.button)) {
  margin-right: 0.5rem;
  margin-bottom: 0.35rem;
}

/* Embed a navigation rail without 100dvh of empty column. */
.rail-demo {
  display: flex;
  height: 32rem;
  overflow: hidden;
  background-color: var(--md-sys-color-surface);
  border-radius: 16px;
}

.rail-demo .navigation-rail {
  min-height: 100%;
  height: 100%;
}

/* In-flow sidenav so examples can sit in a docs section. */
:is(.sidenav, .navigation-drawer).navigation-drawer-demo {
  position: static;
  transform: none;
  height: auto;
  max-width: 20rem;
  z-index: auto;
  margin: 0 0 1rem;
}

/* Offset documentation pages so they sit beside the fixed sidenav. */
@media (width >= 840px) {
  body.docs > header,
  body.docs > main,
  body.docs > footer {
    padding-left: var(--md-comp-nav-drawer-width, 300px);
  }
}

/* Hero banner on documentation pages. */
#index-banner {
  border-radius: 24px;
}

#index-banner .docs-page-title {
  margin: 0;
  font-family: var(--md-sys-typescale-display-medium-font-family-name);
  font-size: var(--md-sys-typescale-display-medium-font-size);
  font-weight: var(--md-sys-typescale-display-medium-font-weight);
  line-height: var(--md-sys-typescale-display-medium-line-height);
  letter-spacing: var(--md-sys-typescale-display-medium-letter-spacing);
  text-wrap: balance;
}

#index-banner .docs-page-description {
  max-width: 42ch;
  margin: 0.5rem 0 0;
  text-wrap: balance;
}

@media (width >= 840px) {
  #index-banner .docs-page-title {
    font-family: var(--md-sys-typescale-display-large-font-family-name);
    font-size: var(--md-sys-typescale-display-large-font-size);
    font-weight: var(--md-sys-typescale-display-large-font-weight);
    line-height: var(--md-sys-typescale-display-large-line-height);
    letter-spacing: var(--md-sys-typescale-display-large-letter-spacing);
  }
}

/* Documentation prose uses the public ExpressiveCSS type roles. Component
   examples keep their own typography because these selectors only address
   direct documentation content. */
.docs-page-content {
  color: var(--md-sys-color-on-surface);
}

.docs-page-content .docs-section {
  padding-block: clamp(1.5rem, 1rem + 1vw, 2.5rem);
}

.docs-page-content .docs-section-title {
  max-width: 28ch;
  margin-bottom: 1rem;
  text-wrap: balance;
}

.docs-page-content .docs-section > h4:not(.docs-section-title) {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-family: var(--md-sys-typescale-title-large-font-family-name);
  font-size: var(--md-sys-typescale-title-large-font-size);
  font-weight: var(--md-sys-typescale-title-large-font-weight);
  line-height: var(--md-sys-typescale-title-large-line-height);
  letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
  text-wrap: balance;
}

.docs-page-content .docs-section > h5:not(.docs-section-title) {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-family: var(--md-sys-typescale-title-medium-font-family-name);
  font-size: var(--md-sys-typescale-title-medium-font-size);
  font-weight: var(--md-sys-typescale-title-medium-font-weight);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
}

.docs-page-content .docs-section > :is(p, ul, ol, blockquote) {
  max-width: 68ch;
}

.docs-page-content .docs-section > .flow-text:first-child {
  max-width: 52ch;
  margin-bottom: 1.5rem;
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-sys-typescale-title-large-font-family-name);
  font-size: var(--md-sys-typescale-title-large-font-size);
  font-weight: var(--md-sys-typescale-title-large-font-weight);
  line-height: var(--md-sys-typescale-title-large-line-height);
  letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
}

.docs-page-content .docs-section > :is(ul, ol) {
  margin-block: 0 1.5rem;
  padding-inline-start: 1.5rem;
  font-family: var(--md-sys-typescale-body-large-font-family-name);
  font-size: var(--md-sys-typescale-body-large-font-size);
  font-weight: var(--md-sys-typescale-body-large-font-weight);
  line-height: var(--md-sys-typescale-body-large-line-height);
  letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
}

.docs-page-content .docs-section > :is(ul, ol) li + li {
  margin-top: 0.375rem;
}

/* A Menu is injected as a sibling of its trigger, so a trigger written inside
   a prose paragraph leaves the whole popover inside that <p>. This rule is for
   prose links and must not reach into component markup that lands there - the
   framework's own `text-decoration: none` cannot defend itself, because these
   docs styles are unlayered and beat anything in @layer components. */
.docs-page-content
  .docs-section
  > :is(p, ul, ol, blockquote)
  a:not(.button, .icon-button, menu a) {
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.docs-page-content .docs-section > table {
  margin-block: 1.5rem 2rem;
  font-family: var(--md-sys-typescale-body-medium-font-family-name);
  font-size: var(--md-sys-typescale-body-medium-font-size);
  font-weight: var(--md-sys-typescale-body-medium-font-weight);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
}

.docs-page-content .docs-section > table th {
  font-family: var(--md-sys-typescale-label-large-font-family-name);
  font-size: var(--md-sys-typescale-label-large-font-size);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  line-height: var(--md-sys-typescale-label-large-line-height);
  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
}

.docs-page-content :not(pre) > code {
  font-family:
    ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: var(--md-sys-typescale-body-medium-font-size);
  font-weight: var(--md-sys-typescale-body-medium-font-weight);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
}

.scrollspy {
  scroll-margin-top: 5rem;
}

/* Pin the in-page TOC under the app bar. Native sticky replaces Pushpin. */
.toc-wrapper {
  position: sticky;
  top: 5rem;
}

/* Code samples — Highlight.js supplies the spans; docs tokens supply the theme. */
.code-block {
  position: relative;
  margin: 1rem 0;
}

pre {
  margin: 1rem 0;
  padding: 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 12px;
  background-color: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  font-family:
    ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9rem);
  line-height: 1.65;
  tab-size: 2;
  white-space: pre;
}

.code-block > pre {
  margin: 0;
  padding-top: 3.5rem;
}

pre code {
  display: block;
  box-sizing: border-box;
  min-width: 100%;
  width: max-content;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
}

.code-language {
  position: absolute;
  z-index: 1;
  top: 0.9rem;
  left: 1.25rem;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 2rem;
  text-transform: uppercase;
  user-select: none;
}

.code-block > .code-copy-button {
  position: absolute;
  z-index: 2;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 0;
  height: 2rem;
  margin: 0;
  padding: 0 0.65rem;
  gap: 0.35rem;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 8px;
  background-color: var(--md-sys-color-surface-container-highest);
  box-shadow: none;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  text-transform: none;
}

.code-block > .code-copy-button:hover {
  border-color: var(--md-sys-color-outline);
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  box-shadow: none;
}

.code-block > .code-copy-button:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.code-block > .code-copy-button[data-state="copied"] {
  color: var(--md-sys-color-primary);
}

.code-block > .code-copy-button[data-state="error"] {
  color: var(--md-sys-color-error);
}

.code-copy-button .material-symbols {
  font-size: 1rem;
}

/* Syntax colors use system roles so highlighting follows light, dark, and seed themes. */
.hljs-comment,
.hljs-quote {
  color: var(--md-sys-color-outline);
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-name,
.hljs-built_in,
.hljs-type {
  color: var(--md-sys-color-primary);
}

.hljs-string,
.hljs-doctag,
.hljs-regexp,
.hljs-attribute,
.hljs-template-tag,
.hljs-template-variable {
  color: var(--md-sys-color-tertiary);
}

.hljs-title,
.hljs-title.function_,
.hljs-section,
.hljs-selector-class,
.hljs-selector-id {
  color: var(--md-sys-color-secondary);
}

.hljs-number,
.hljs-symbol,
.hljs-bullet,
.hljs-variable,
.hljs-meta {
  color: var(--md-sys-color-error);
}

.hljs-tag,
.hljs-selector-pseudo,
.hljs-params,
.hljs-property {
  color: var(--md-sys-color-on-surface-variant);
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: 700;
}

/* Container-toggle demo. */
body.containers-off .container {
  width: 98%;
}

/* Fake browser used by the container / layout illustrations. */
.browser-window {
  overflow: hidden;
}

.browser-window .browser-circles {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
}

.browser-window .browser-circles .circle {
  width: 10px;
  height: 10px;
}

.docs-bar {
  height: 1.5rem;
  width: 80%;
  margin: 1.5rem auto;
}

.docs-bar.small {
  width: 25%;
}

.docs-bar.full {
  width: 100%;
}

.site-layout-top {
  height: 42px;
}

.site-layout-pane {
  min-height: 12rem;
}

/* Alignment demo: valign-wrapper only reads as centered when the box is tall. */
.valign-demo {
  height: 16rem;
}

/* Navbar seed-color action picks up the live primary so the icon tracks the seed. */
header:has(> :is(nav, .bar)) > :is(nav, .bar) #source-color-toggle {
  color: var(--md-sys-color-primary);
}

/* Source-color dialog: preset grid, custom picker, and live role chips. */
#source-color-dialog {
  max-height: min(90vh, calc(100% - 48px));
}

#source-color-dialog .source-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 16px;
}

#source-color-dialog .source-color-swatch {
  display: block;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  border: 2px solid color-mix(in oklab, var(--md-sys-color-outline) 40%, transparent);
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
  appearance: none;
  background-clip: padding-box;
}

#source-color-dialog .source-color-swatch:hover {
  border-color: var(--md-sys-color-on-surface);
}

#source-color-dialog .source-color-swatch:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 3px;
}

#source-color-dialog .source-color-swatch[aria-checked="true"] {
  border-color: var(--md-sys-color-on-surface);
  box-shadow: 0 0 0 3px var(--md-sys-color-surface), 0 0 0 5px var(--md-sys-color-primary);
}

#source-color-dialog .source-color-custom,
#source-color-dialog .source-color-preview {
  color: var(--md-sys-color-on-surface);
}

#source-color-dialog .source-color-custom {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

#source-color-dialog .source-color-custom .field {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

#source-color-dialog #source-color-input {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--md-sys-color-outline);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

#source-color-dialog #source-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

#source-color-dialog #source-color-input::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

#source-color-dialog #source-color-input::-moz-color-swatch {
  border: none;
  border-radius: 50%;
}

#source-color-dialog .source-color-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

#source-color-dialog .source-color-chip {
  display: block;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
}

#source-color-dialog #source-color-reset {
  margin-right: auto;
}

/* Color page: stacked palette swatches. */
.color-swatch {
  padding: 0.85rem 1rem;
  font-size: 0.875rem;
}

.color-swatch:first-child {
  border-radius: 8px 8px 0 0;
}

.color-swatch:last-child {
  border-radius: 0 0 8px 8px;
}

/* Shadow page: equal tiles so z-depth levels can be compared. */
.shadow-demo {
  width: 100px;
  height: 100px;
  margin: 1.25rem auto;
  line-height: 100px;
  text-align: center;
}

/* FAB page: inline demos must not all pin to the viewport corner. */
.fab-demo {
  position: relative;
  height: 70px;
}

.fab-demo :is(.fab, .fixed-action-btn) {
  position: absolute;
  inset-inline-end: 24px;
  bottom: 0;
}

/* A reference table wider than a compact window scrolls in place, rather
   than pushing the whole page sideways. */
.docs-table-scroll {
  overflow-x: auto;
}

/* FAB page: the size and extended examples, each disc over its caption. */
.fab-size-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.5rem;
  margin-block: 1.5rem;
}

.fab-size-demo > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.fab-size-demo .body-small {
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
}

/* FAB page: the FAB menu examples, in flow with room above for the expanded
   list. The host keeps `position: relative` - it is the containing block the
   list hangs off, so unpinning it to `static` would drop the list on the
   viewport instead. */
.fab-menu-demo {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 1.5rem;
  min-height: 18rem;
  margin-block: 1.5rem;
}

.fab-menu-demo .fab-menu {
  position: relative;
  inset: auto;
  z-index: auto;
}

/* Tabs page: swipeable panels become a carousel (default 400px). */
.tabs-swipe-demo {
  --carousel-height: 8rem;
}

/* Panes docs: use the shared page row while giving wide demos more room. */
@media (width >= 840px) {
  .container.panes-page {
    --md-comp-container-width: 90%;
    --md-comp-container-max-width: 1400px;
  }
}

.panes-page .docs-page-content > .section > :is(p, .flow-text) {
  max-width: 42rem;
}

.panes-page .toc-wrapper {
  margin-top: 0.5rem;
}

/* Embed a pane layout without 100% of the viewport. */
.panes-demo {
  --md-comp-pane-list-width: min(360px, 42%);
  --md-comp-pane-supporting-width: min(280px, 32%);
  height: 28rem;
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 16px;
  margin: 0 0 1rem;
}

.panes-demo.separated,
.panes-demo.floating {
  background-color: var(--md-sys-color-surface-container);
}

/* Force compact (single-pane) so the docs can show .active without
   shrinking the window. The component uses display:flex !important
   at 840px, so inactive panes are stacked and hidden instead. */
.panes-demo.compact {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr;
}

.panes-demo.compact > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane) {
  grid-column: 1;
  grid-row: 1;
  visibility: hidden;
  z-index: 0;
  pointer-events: none;
  border-inline-end: none !important;
}

.panes-demo.compact > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane).active,
.panes-demo.compact:not(:has(> :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane).active)) > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane):first-child {
  visibility: visible;
  z-index: 1;
  pointer-events: auto;
}

/* Search page: a docked view hangs off the bar and is out of flow, so the demo
   reserves the room it drops into instead of letting it cover the prose. */
.search-demo {
  min-height: 18rem;
  margin-block: 1.5rem;
}

/* Drag handle page: the handle only reads as a splitter with panes either side. */
.drag-handle-demo {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 12px;
  overflow: hidden;
}

.drag-handle-demo > div {
  flex: 1 1 0;
  min-width: 0;
  padding: 24px 16px;
  background-color: var(--md-sys-color-surface-container-low);
}