/* ==========================================================================
   Docs-site styles. HAND-WRITTEN. These style the documentation pages only
   (shell, nav, tables, swatches, demo stages). The system itself lives in
   tokens.css, components.css and case-study.css. Role tokens only.
   ========================================================================== */

:root { --arche-docs-header-h: 72px; }
@media (min-width: 768px) { :root { --arche-docs-header-h: 80px; } }
html { scroll-padding-top: var(--arche-space-base-96); }
body {
  margin: 0;
  background: var(--arche-surface-neutral-base);
  color: var(--arche-text-neutral-body);
  font-family: var(--arche-type-body-font);
  font-weight: var(--arche-type-body-weight);
  font-size: var(--arche-type-body-size);
  line-height: var(--arche-type-body-line);
}
.visually-hidden-fallback { position: absolute; }

/* ----- Header ----- */
.docs-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--arche-space-base-16);
  height: var(--arche-docs-header-h);
  padding: 0 var(--arche-page-pad);
  background: var(--arche-surface-neutral-base);
  border-bottom: var(--arche-stroke-1) solid var(--arche-border-neutral-default);
}
.docs-header__name { margin: 0; color: var(--arche-text-neutral-primary); text-decoration: none; }
.docs-header__name:focus-visible { outline: var(--arche-focus-ring-width) solid var(--arche-border-focus-ring); outline-offset: var(--arche-focus-ring-offset); }
.docs-header__tools { display: flex; align-items: center; gap: var(--arche-space-base-16); }
.docs-header__portfolio { display: none; }
/* Below 1024px the bar names the section and page; from 1024px up the Arche name returns. */
.docs-header__page { display: flex; flex-direction: column; min-width: 0; margin: 0; flex: 1 1 auto; }
.docs-header__section { color: var(--arche-text-neutral-secondary); }
.docs-header__title { overflow: hidden; color: var(--arche-text-neutral-primary); text-overflow: ellipsis; white-space: nowrap; }
.docs-header__tools { flex: 0 0 auto; }
@media (max-width: 1023.98px) { .docs-header__name { display: none; } }
@media (min-width: 1024px) { .docs-header__page { display: none; } .docs-header__name { flex: 1 1 auto; } }
@media (min-width: 768px) { .docs-header__portfolio { display: inline-flex; } }
/* The theme toggle is in the bar from 1024px up and in the footer below that, so the bar keeps room for the section and page. */
@media (max-width: 1023.98px) { .docs-header__theme { display: none; } }
@media (min-width: 1024px) { .docs-footer__theme { display: none; } }

/* ----- Shell: side nav + content ----- */
.docs-shell { display: block; padding: 0 var(--arche-page-pad); }
@media (min-width: 1024px) {
  .docs-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: var(--arche-space-base-64); }
}
.docs-nav { padding: var(--arche-space-base-16) 0; }
@media (min-width: 1024px) {
  .docs-nav {
    position: sticky;
    top: 80px;
    align-self: start;
    box-sizing: border-box;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    padding: var(--arche-space-base-48) 0;
  }
}
/* The Menu button lives in the header bar. It needs JavaScript, so it stays hidden until the "js" class is on <html>, and it is not needed from 1024px up. */
.docs-menu-button { display: none; }
.js .docs-menu-button { display: inline-flex; }
.docs-menu-button .icon { transition: transform var(--arche-motion-fast) var(--arche-motion-ease); }
.docs-menu-button[aria-expanded="true"] .icon { transform: rotate(180deg); }
@media (min-width: 1024px) { .js .docs-menu-button { display: none; } }

/* Below 1024px (with JavaScript) the nav is a dropdown panel under the sticky bar. Without JavaScript it stays a plain list in the page. */
.docs-dim { display: none; }
@media (max-width: 1023.98px) {
  .js .docs-nav {
    display: none;
    position: fixed;
    z-index: 30;
    top: var(--arche-docs-header-h);
    left: 0;
    right: 0;
    /* About 70% of the screen, so a strip of dimmed page stays visible below it. Tapping the strip closes the menu. */
    max-height: 70vh;
    max-height: 70dvh;
    overflow-y: auto;
    box-sizing: border-box;
    padding: var(--arche-space-base-16) var(--arche-page-pad) var(--arche-space-base-24);
    background: var(--arche-surface-neutral-base);
    border-bottom: var(--arche-stroke-1) solid var(--arche-border-neutral-default);
  }
  .js .docs-nav.is-open { display: block; }
  .js .docs-dim.is-open {
    display: block;
    position: fixed;
    z-index: 25;
    inset: var(--arche-docs-header-h) 0 0 0;
    background: var(--arche-surface-overlay-scrim);
    opacity: 0.5;
  }
}
/* Tablet: a narrower dropdown, right-aligned under the Menu button. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .js .docs-nav {
    left: auto;
    right: var(--arche-page-pad);
    width: min(400px, calc(100vw - 2 * var(--arche-page-pad)));
    min-width: 360px;
    border: var(--arche-stroke-1) solid var(--arche-border-neutral-default);
    border-top: 0;
  }
}
.docs-nav__count { margin: 0; color: var(--arche-text-neutral-secondary); }
@media (min-width: 1024px) { .docs-nav__count { display: none; } }
.docs-nav__group { margin-top: var(--arche-space-base-24); }
.docs-nav__heading { margin: 0 0 var(--arche-space-fine-8); color: var(--arche-text-neutral-secondary); }
.docs-nav__list { margin: 0; padding: 0; list-style: none; }
.docs-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--arche-space-fine-12);
  color: var(--arche-text-neutral-primary);
  text-decoration: none;
  transition: background-color var(--arche-motion-fast) var(--arche-motion-ease);
}
@media (hover: hover) { .docs-nav__link:hover { background: var(--arche-interactive-button-tertiary-fill-hover); } }
.docs-nav__link:focus-visible { outline: var(--arche-focus-ring-width) solid var(--arche-border-focus-ring); outline-offset: var(--arche-focus-ring-offset); }
.docs-nav__link[aria-current="page"] { font-weight: 600; }
.docs-nav__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--arche-stroke-4);
  background: var(--arche-interactive-link-nav-indicator, var(--arche-text-brand-primary));
}

/* ----- Main column ----- */
.docs-main { min-width: 0; padding: var(--arche-space-base-40) 0 var(--arche-space-base-96); max-width: 960px; }
@media (min-width: 1024px) { .docs-main { padding-top: var(--arche-space-base-64); } }
.docs-content { margin-top: 0; }
.docs-content > section + section { margin-top: var(--arche-space-base-64); }
.docs-content h2 { margin: 0 0 var(--arche-space-base-16); padding-top: var(--arche-space-base-16); border-top: var(--arche-stroke-2) solid var(--arche-border-neutral-emphasis); color: var(--arche-text-neutral-primary); }
.docs-content h3 { margin: var(--arche-space-base-32) 0 var(--arche-space-fine-12); color: var(--arche-text-neutral-primary); }
.docs-content p { margin: 0 0 var(--arche-space-base-16); max-width: 66ch; text-wrap: pretty; }
.docs-content ul, .docs-content ol { margin: 0 0 var(--arche-space-base-16); padding-left: var(--arche-space-base-24); max-width: 66ch; }
.docs-content li { margin-bottom: var(--arche-space-fine-8); }
.docs-content a:not(.link):not(.button) { color: var(--arche-text-brand-primary); font-weight: 600; text-underline-offset: 0.2em; }
.docs-content a:not(.link):not(.button):focus-visible { outline: var(--arche-focus-ring-width) solid var(--arche-border-focus-ring); outline-offset: var(--arche-focus-ring-offset); }
.docs-content code, .tok {
  padding: 1px 6px;
  background: var(--arche-surface-brand-primary-subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  color: var(--arche-text-neutral-primary);
  overflow-wrap: anywhere;
}
/* ----- Next-page band ----- */
.docs-next { margin-top: var(--arche-space-base-96); padding: var(--arche-space-base-48) var(--arche-space-base-16); background: var(--arche-surface-brand-primary); color: var(--arche-text-on-brand-body); }
@media (min-width: 768px) { .docs-next { padding: var(--arche-space-base-64) var(--arche-space-base-32); } }
.docs-next__kicker { margin: 0 0 var(--arche-space-fine-8); color: var(--arche-text-on-brand-secondary); }
.docs-next__title { margin: 0; color: var(--arche-text-on-brand-primary); }
.docs-next__desc { margin: var(--arche-space-fine-12) 0 var(--arche-space-base-24); max-width: 52ch; color: var(--arche-text-on-brand-body); }
.docs-next__actions { display: flex; flex-direction: column; align-items: flex-start; }
.docs-next__back { margin: var(--arche-space-base-24) 0 0; }
/* From 1024px the text sits left and the actions right, with the back link under the button. Below that everything stacks. */
@media (min-width: 1024px) {
  .docs-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--arche-space-base-48); align-items: end; padding: var(--arche-space-base-80) var(--arche-space-base-64); }
  .docs-next__desc { margin-bottom: 0; }
}
.docs-footer { margin-top: var(--arche-space-base-48); padding-top: var(--arche-space-base-16); border-top: var(--arche-stroke-1) solid var(--arche-border-neutral-default); color: var(--arche-text-neutral-secondary); }
.docs-footer p { margin: 0; }
.docs-footer__theme { margin: 0 0 var(--arche-space-base-16) calc(-1 * var(--arche-space-fine-12)); }

/* ----- Overview stat row ----- */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--arche-space-base-24) var(--arche-space-base-16); margin: var(--arche-space-base-32) 0 0; padding: var(--arche-space-base-24) 0 0; border-top: var(--arche-stroke-2) solid var(--arche-border-neutral-emphasis); }
@media (min-width: 768px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.facts > div { margin: 0; }
.facts dd { margin: 0; color: var(--arche-text-brand-primary); }
.facts dt { margin: var(--arche-space-fine-4) 0 0; color: var(--arche-text-neutral-secondary); }
.facts { counter-reset: none; }
.facts div { display: flex; flex-direction: column-reverse; }

/* ----- Cards linking to sections ----- */
.cards { display: grid; gap: var(--arche-space-base-16); padding: 0; list-style: none; grid-template-columns: 1fr; }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cards li { margin: 0; }
.card { display: block; height: 100%; box-sizing: border-box; padding: var(--arche-space-base-24); background: var(--arche-surface-brand-primary-subtle); color: var(--arche-text-neutral-primary); text-decoration: none; box-shadow: inset 0 var(--arche-stroke-2) 0 var(--arche-border-neutral-emphasis); transition: background-color var(--arche-motion-fast) var(--arche-motion-ease); }
@media (hover: hover) { .card:hover { background: var(--arche-interactive-button-tertiary-fill-pressed); } }
.card:focus-visible { outline: var(--arche-focus-ring-width) solid var(--arche-border-focus-ring); outline-offset: var(--arche-focus-ring-offset); }
.card h3 { margin: 0 0 var(--arche-space-fine-8); }
.card p { margin: 0; max-width: none; color: var(--arche-text-neutral-body); }

/* ----- Tables ----- */
.table-wrap { overflow-x: auto; margin: var(--arche-space-base-16) 0 var(--arche-space-base-24); }
.table-wrap:focus-visible { outline: var(--arche-focus-ring-width) solid var(--arche-border-focus-ring); outline-offset: var(--arche-focus-ring-offset); }
.docs-table { width: 100%; border-collapse: collapse; min-width: 560px; text-align: left; }
.docs-table caption { text-align: left; padding-bottom: var(--arche-space-fine-8); color: var(--arche-text-neutral-secondary); }
.docs-table th, .docs-table td { padding: var(--arche-space-fine-12) var(--arche-space-fine-16) var(--arche-space-fine-12) 0; border-bottom: var(--arche-stroke-1) solid var(--arche-border-neutral-default); vertical-align: top; }
.docs-table thead th { border-bottom: var(--arche-stroke-2) solid var(--arche-border-neutral-emphasis); color: var(--arche-text-neutral-secondary); font-weight: 600; }
.docs-table tbody th { font-weight: 600; color: var(--arche-text-neutral-primary); }
.pass, .fail { display: inline-block; font-weight: 600; }
.fail { color: var(--arche-text-system-alert); }

/* ----- Swatches ----- */
.swatch-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--arche-space-fine-8); margin: var(--arche-space-base-16) 0 var(--arche-space-base-24); padding: 0; list-style: none; }
@media (min-width: 768px) { .swatch-row { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.swatch { margin: 0; }
.swatch__chip { display: block; height: 64px; box-shadow: inset 0 0 0 var(--arche-stroke-1) var(--arche-black-alpha-50); }
.swatch__meta { display: block; margin-top: var(--arche-space-fine-4); color: var(--arche-text-neutral-primary); }
.swatch__meta strong { display: block; font-weight: 600; }
.swatch__meta span { display: block; color: var(--arche-text-neutral-secondary); overflow-wrap: anywhere; }
.dot { display: inline-block; width: 20px; height: 20px; vertical-align: -5px; margin-right: var(--arche-space-fine-8); box-shadow: inset 0 0 0 var(--arche-stroke-1) var(--arche-black-alpha-50); }

/* ----- Type specimens ----- */
.specimen { padding: var(--arche-space-base-24) 0; border-bottom: var(--arche-stroke-1) solid var(--arche-border-neutral-default); }
.specimen__sample { margin: 0 0 var(--arche-space-fine-12); color: var(--arche-text-neutral-primary); max-width: none; overflow-wrap: anywhere; }
.specimen__meta { display: flex; flex-wrap: wrap; gap: var(--arche-space-fine-4) var(--arche-space-base-24); margin: 0; color: var(--arche-text-neutral-secondary); max-width: none; }
.specimen__meta b { font-weight: 600; color: var(--arche-text-neutral-primary); }

/* ----- Spacing bars ----- */
.space-bar { display: block; height: 16px; background: var(--arche-surface-brand-primary); }
.stroke-bar { display: block; width: 160px; background: var(--arche-text-neutral-primary); }

/* ----- Demo: live example above its code ----- */
.demo { margin: var(--arche-space-base-24) 0 var(--arche-space-base-32); }
.demo__stage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--arche-space-base-16); padding: var(--arche-space-base-32) var(--arche-space-base-24); background: var(--arche-surface-neutral-base); box-shadow: inset 0 0 0 var(--arche-stroke-1) var(--arche-border-neutral-default); }
.demo__stage--brand { background: var(--arche-surface-brand-primary); box-shadow: none; }
.demo__stage--tint { background: var(--arche-surface-brand-primary-subtle); box-shadow: none; }
.demo__stage--block { display: block; padding: 0; }
.demo__stage--block .docs-next { margin-top: 0; }
/* Inside a page the prose h2 and p rules would otherwise win over the band. */
.docs-content .docs-next .docs-next__title { margin: 0; padding: 0; border-top: 0; color: var(--arche-text-on-brand-primary); }
.docs-content .docs-next .docs-next__desc { margin: var(--arche-space-fine-12) 0 var(--arche-space-base-24); max-width: 52ch; }
.docs-content .docs-next .docs-next__back { margin: var(--arche-space-base-24) 0 0; }
@media (min-width: 1024px) { .docs-content .docs-next .docs-next__desc { margin-bottom: 0; } }
.demo__stage .link-card { width: 100%; max-width: 416px; }
.demo__stage--form { display: grid; gap: var(--arche-space-base-24); max-width: 420px; }
.demo__code { box-shadow: inset 0 0 0 var(--arche-stroke-1) var(--arche-border-neutral-default); border-top: 0; }
.demo__code summary { display: flex; align-items: center; min-height: 44px; padding: 0 var(--arche-space-fine-16); cursor: pointer; font-weight: 600; color: var(--arche-text-brand-primary); }
.demo__code summary:focus-visible { outline: var(--arche-focus-ring-width) solid var(--arche-border-focus-ring); outline-offset: calc(-1 * var(--arche-focus-ring-width)); }
.demo__code pre { margin: 0; padding: var(--arche-space-fine-16); overflow-x: auto; background: var(--arche-surface-brand-primary-subtle); border-top: var(--arche-stroke-1) solid var(--arche-border-neutral-default); }
.demo__code pre:focus-visible { outline: var(--arche-focus-ring-width) solid var(--arche-border-focus-ring); outline-offset: calc(-1 * var(--arche-focus-ring-width)); }
.demo__code code { padding: 0; background: none; font-size: 0.8125rem; line-height: 1.6; white-space: pre; overflow-wrap: normal; }
.demo__caption { margin-top: var(--arche-space-fine-8); color: var(--arche-text-neutral-secondary); }

/* ----- Do / Don't ----- */
.rules { display: grid; gap: var(--arche-space-base-16); margin: var(--arche-space-base-16) 0 var(--arche-space-base-24); grid-template-columns: 1fr; }
@media (min-width: 768px) { .rules { grid-template-columns: 1fr 1fr; } }
.rule { padding: var(--arche-space-fine-16) var(--arche-space-base-24) var(--arche-space-base-24); box-shadow: inset 0 var(--arche-stroke-4) 0 var(--arche-border-neutral-emphasis); background: var(--arche-surface-neutral-raised); border: var(--arche-stroke-1) solid var(--arche-border-neutral-default); border-top: 0; }
.rule h3 { margin: var(--arche-space-fine-8) 0 var(--arche-space-fine-8) !important; }
.rule ul { margin: 0; padding-left: var(--arche-space-base-16); }
.rule li { margin-bottom: var(--arche-space-fine-8); }

/* The stat strip and quote bring page padding from case-study pages; inside a demo they fill the stage. */
.demo__stage--block .cs-stats { padding-inline: var(--arche-space-base-24); }
.demo__stage--block .cs-quote { margin: 0; padding-inline: var(--arche-space-base-24); }
.demo__stage--block .cs-more { padding-inline: var(--arche-space-base-24); padding-block: var(--arche-space-base-24); }

/* Lists used as layouts must beat the prose list rules above (.docs-content ul). */
.docs-content .cards,
.docs-content .swatch-row,
.docs-content .cs-more__list { max-width: none; padding-left: 0; }
.docs-content .cards li,
.docs-content .swatch-row li { margin-bottom: 0; }
.docs-content .cs-more__list { margin-bottom: 0; }

/* ----- Color mode pages ----- */
.mode-try { margin: 0 0 var(--arche-space-base-24); }
.docs-content .mode-try { display: none; }
.js .docs-content .mode-try { display: block; }
.mode-pairs td, .mode-pairs th { white-space: normal; }
.tok-line { display: block; color: var(--arche-text-neutral-secondary); }

/* ----- Preview frames: a page shown inside an iframe at a fixed width, so a tablet or mobile layout can be seen on any screen. ----- */
.preview-body { margin: 0; background: var(--arche-surface-neutral-base); color: var(--arche-text-neutral-primary); font-family: var(--arche-type-body-font); }
.preview-pad { padding: var(--arche-space-base-24) var(--arche-page-pad); }
.preview-menu { max-width: 400px; background: var(--arche-surface-neutral-base); box-shadow: inset 0 0 0 var(--arche-stroke-1) var(--arche-border-neutral-default); }
.preview-frame { margin: var(--arche-space-base-24) 0 var(--arche-space-base-32); }
.preview-frame__scroller { overflow-x: auto; border: var(--arche-stroke-1) solid var(--arche-border-neutral-default); }
.preview-frame__scroller:focus-visible { outline: var(--arche-focus-ring-width) solid var(--arche-border-focus-ring); outline-offset: var(--arche-focus-ring-offset); }
.preview-frame iframe { display: block; max-width: none; border: 0; background: var(--arche-surface-neutral-base); }
.preview-frame__caption { margin-top: var(--arche-space-fine-8); color: var(--arche-text-neutral-secondary); }