/* Site chrome. Everything inside the article is kit; only the shell lives
   here — a documentation site that needed a second design system to
   document the first one would have proved the wrong thing. */
@layer wx.site {
  .doc-topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--padding-page-x);
    border-block-end: var(--stroke-hairline) solid var(--color-border-subtle);
    background: var(--color-bg-warm);
  }
  .doc-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-md);
    color: var(--color-text-heading);
    text-decoration: none;
  }
  /* A seal specimen is an intrinsic brand asset, not editorial media. Keep
     its documented 64px scale even inside the Figure component, whose normal
     image rule intentionally expands photographs to the reading measure. */
  .doc-brand-logo {
    display: block;
    inline-size: var(--space-16);
    block-size: var(--space-16);
  }
  .wx-figure .doc-brand-logo {
    width: var(--space-16);
    height: var(--space-16);
  }
  /* These are two comparable source marks, not broad editorial media. Let
     them share a quiet grid at the reading measure, then stack only when
     even two 64px seals and their captions would no longer fit. */
  .doc-brand-assets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
    gap: var(--space-8);
  }
  .doc-brand-assets .wx-figure { margin-block: 0; }
  .doc-primary {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-inline-start: auto;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    white-space: nowrap;
  }
  .doc-primary a {
    padding-block-end: var(--space-1);
    border-block-end: var(--stroke-mark) solid transparent;
    color: var(--color-text-functional);
    text-decoration: none;
    transition:
      color var(--duration-instant) var(--ease-default),
      border-color var(--duration-instant) var(--ease-default);
  }
  .doc-primary a:hover, .doc-primary a[aria-current] { color: var(--color-text-heading); }
  .doc-primary a[aria-current] { border-block-end-color: var(--color-accent); }
  /* A block container puts its inline-block child on a text baseline, which
     left the theme switch 3.2px above the centre line the brand and nav share.
     The bar is a flex row; its end should be one too. */
  .doc-topbar__end { display: flex; align-items: center; margin-inline-start: 0; }
  .doc-navtoggle { display: none; }

  .doc-shell {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr) 13rem;
    gap: var(--space-10);
    max-inline-size: 90rem;
    margin-inline: auto;
    padding: var(--space-10) var(--padding-page-x) var(--space-24);
  }
  .doc-sidebar { align-self: start; position: sticky; inset-block-start: 5rem; }
  .doc-aside   { align-self: start; }
  @media (min-width: 64.0625rem) {
    /* Navigation remains a local reading surface. A page change restores its
       own position instead of resetting the reader to the top of the list. */
    .doc-sidebar, .doc-aside {
      max-block-size: calc(100dvh - 6rem);
      overflow-y: auto;
      overscroll-behavior-block: contain;
      scrollbar-width: thin;
      scrollbar-color: var(--color-border-strong) transparent;
    }
    .doc-aside { position: sticky; inset-block-start: 5rem; }
    .doc-sidebar::-webkit-scrollbar, .doc-aside::-webkit-scrollbar { inline-size: 0.375rem; }
    .doc-sidebar::-webkit-scrollbar-thumb, .doc-aside::-webkit-scrollbar-thumb { background: var(--color-border-strong); }
  }
  .doc-article { min-inline-size: 0; max-inline-size: 46rem; }
  /* A hub is the front of one section: no measure limit, no second table of
     contents beside the section index it already is. */
  .doc-shell--hub { grid-template-columns: 15rem minmax(0, 1fr); }
  .doc-shell--hub .doc-article { max-inline-size: 62rem; }
  .doc-shell--hub .doc-aside { display: none; }
  .doc-shell--landing { display: block; max-inline-size: 72rem; padding-block-start: 0; }
  .doc-shell--landing .doc-sidebar, .doc-shell--landing .doc-aside { display: none; }
  .doc-shell--landing .doc-article { max-inline-size: none; }

  .doc-sidebar__title {
    margin-block: 0 var(--space-5);
    padding-block-end: var(--space-3);
    border-block-end: var(--stroke-hairline) solid var(--color-border-subtle);
    font-family: var(--font-display);
    font-size: var(--text-md);
    color: var(--color-text-heading);
  }

  .doc-toc__title {
    margin-block: 0 var(--space-2);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-functional);
  }

  /* Demo — a live example above its own generated source. Separated from
     the prose by rules and whitespace, not by a card. */
  .doc-demo { margin: var(--space-8) 0; }
  .doc-demo__stage {
    padding: var(--space-8) var(--space-6);
    border-block: var(--stroke-hairline) solid var(--color-border-subtle);
  }
  .doc-demo__stage--tight { padding-block: var(--space-5); }
  /* A page prototype needs a boundary from the documentation explaining it.
     This is a viewport cue, not a card: the sides stay open, there is no
     radius or shadow, and the specimen keeps its real type and interactions. */
  .doc-demo--prototype .doc-demo__bar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin: 0;
    padding-block: var(--space-2);
    border-block-start: var(--stroke-hairline) solid var(--color-border-strong);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-functional);
  }
  .doc-demo--prototype .doc-demo__meta { white-space: nowrap; }
  .doc-demo--prototype .doc-demo__stage {
    border-block-start-color: var(--color-border-subtle);
    border-block-end-color: var(--color-border-strong);
    background: var(--color-bg-pure);
  }
  .doc-toast-example {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  /* doc-figure — framed content with no source listing. A token table is
     content, not a component demo; offering to show its markup is noise. */
  .doc-figure {
    margin-block: var(--space-8);
    padding: var(--space-6) 0;
    border-block: var(--stroke-hairline) solid var(--color-border-subtle);
    /* Tables and API contracts may need more inline space than a 390px page.
       Keep their horizontal scroll local to the figure; never widen the page. */
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
  .doc-figure > :first-child { margin-block-start: 0; }
  .doc-figure > :last-child { margin-block-end: 0; }
  .doc-code > summary {
    padding-block: var(--space-2);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--color-text-functional);
    cursor: pointer;
  }
  .doc-code__body {
    max-block-size: 32rem;
    overflow: auto;
    padding: var(--space-4);
    background: var(--code-bg);
    font-size: var(--text-sm);
  }

  /* A landing hero is sized to the viewport. Inside a demo stage that becomes
     a screenful of empty space, so the stage caps it — the page says as much
     rather than letting the reader think this is the real height. */
  .doc-demo__stage .wx-landing__hero { min-block-size: auto; padding-block: var(--space-10); }

  /* Markdown and bare HTML are documented as source-beside-render: the point
     is what the renderer emits and what it then looks like, so showing the
     input and the output apart from each other would hide the whole subject. */
  .doc-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    margin-block: var(--space-6);
    border-block: var(--stroke-hairline) solid var(--color-border-subtle);
  }
  .doc-pair > * { min-inline-size: 0; padding: var(--space-5); }
  .doc-pair > * + * { border-inline-start: var(--stroke-hairline) solid var(--color-border-subtle); }
  .doc-pair__src { margin: 0; overflow-x: auto; background: var(--code-bg); font-size: var(--text-sm); }
  .doc-pair__src code { white-space: pre; }
  .doc-pair__out > :first-child { margin-block-start: 0; }
  .doc-pair__out > :last-child { margin-block-end: 0; }
  .doc-pair__label {
    grid-column: 1 / -1;
    display: flex;
    gap: var(--space-6);
    padding-block: var(--space-2);
    border-block-end: var(--stroke-hairline) solid var(--color-border-subtle);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-functional);
  }
  .doc-pair__label > span { flex: 1; }

  /* The element reference tables run wide; they scroll rather than the page. */
  .doc-elements { overflow-x: auto; }
  .doc-elements table { inline-size: 100%; min-inline-size: 34rem; }

  /* The API table that follows most demos. */
  .doc-api { font-size: var(--text-sm); }
  .doc-api code { white-space: nowrap; }

  /* Landing pages persuade first. Each screen holds one idea and fills the
     viewport, so the reader meets exactly one thing at a time. dvh rather
     than vh: on mobile the address bar makes vh taller than the screen. */
  .doc-landing > * + * { border-block-start: var(--stroke-hairline) solid var(--color-border-subtle); }
  .doc-screen {
    display: grid;
    align-content: center;
    min-block-size: 100dvh;
    padding-block: var(--space-16);
  }
  .doc-screen__lede { max-inline-size: 34rem; margin-block: var(--space-6) 0; font-size: var(--text-lg); color: var(--color-text-secondary); }
  .doc-screen__scroll { margin-block: var(--space-16) 0; font-family: var(--font-ui); color: var(--color-text-functional); }
  @keyframes doc-scroll-cue-arrive {
    from { opacity: 0.35; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
  }
  .doc-scroll-cue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--space-12);
    min-block-size: var(--space-12);
    color: inherit;
    text-decoration: none;
  }
  .doc-scroll-cue > span {
    animation: doc-scroll-cue-arrive var(--duration-slow) var(--ease-out) both;
    transition: transform var(--duration-fast) var(--ease-out), color var(--duration-instant) var(--ease-default);
  }
  .doc-scroll-cue:hover > span,
  .doc-scroll-cue:focus-visible > span { transform: translateY(var(--space-1)); color: var(--color-accent); }
  [data-motion="E9-0"] .doc-scroll-cue > span { animation: none; }

  .doc-screen--hero { justify-items: center; text-align: center; }
  .doc-screen--hero h1 { max-inline-size: none; margin: 0; font-size: clamp(3.4rem, 9vw, 6.4rem); line-height: 1; }
  .doc-screen--hero .doc-screen__lede { margin-inline: auto; }
  .doc-landing__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-block-start: var(--space-8); }

  .doc-screen--claim { grid-template-columns: minmax(0, 1.25fr) minmax(16rem, .75fr); gap: var(--space-16); align-items: center; }
  .doc-screen--claim h2 { margin-block: var(--space-3) 0; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.15; }
  /* Real measurements, not a mock interface. A fabricated screenshot of the
     system tells the reader nothing they can check. */
  .doc-screen__stats { display: grid; gap: var(--space-10); margin: 0; }
  .doc-screen__stats > div { padding-inline-start: var(--space-6); border-inline-start: var(--stroke-mark) solid var(--color-border-strong); }
  .doc-screen__stats dd { margin: 0; }

  .doc-product-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-10); }
  .doc-product-path { display: grid; gap: var(--space-3); padding-block: var(--space-6); border-block: var(--stroke-hairline) solid var(--color-border-subtle); color: inherit; text-decoration: none; }
  .doc-product-path span { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-functional); }
  .doc-product-path strong { max-inline-size: 26rem; min-block-size: 3.5rem; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; line-height: 1.4; color: var(--color-text-heading); }
  /* Five accent arrows would spend the page's whole accent budget twice over.
     The colour arrives on hover, where it means "this one". */
  .doc-product-path i { margin-block-start: var(--space-3); font-family: var(--font-ui); font-size: var(--text-sm); font-style: normal; color: var(--color-text-functional); }
  .doc-product-path:hover strong, .doc-product-path:focus-visible strong,
  .doc-product-path:hover i, .doc-product-path:focus-visible i { color: var(--color-accent); }

  .doc-design-hub { padding-block: var(--space-16) var(--space-24); }
  .doc-design-hub > h1 { margin: 0; font-size: clamp(3rem, 7vw, 5rem); }
  .doc-design-hub > .wx-lede { max-inline-size: 38rem; margin-block-start: var(--space-5); }
  .doc-section-index { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(15rem, .9fr); gap: var(--space-10); padding-block: var(--space-8); border-block-start: var(--stroke-hairline) solid var(--color-border-subtle); }
  .doc-section-index:first-of-type { margin-block-start: var(--space-12); }
  .doc-section-index:last-child { border-block-end: var(--stroke-hairline) solid var(--color-border-subtle); }
  .doc-section-index h2 { margin: 0; }
  .doc-section-index p { margin-block-end: 0; color: var(--color-text-secondary); }
  .doc-section-index > div:last-child { display: flex; flex-wrap: wrap; align-content: start; gap: var(--space-3) var(--space-5); padding-block-start: var(--space-2); font-family: var(--font-ui); }

  /* Motion lab — one piece of content under four intensities. It uses rules,
     rhythm and the existing brand mark instead of turning the demo into a
     separate card-shaped product. */
  .doc-motion-lab {
    margin-block: var(--space-10) var(--space-16);
    padding-block: var(--space-6);
    border-block: var(--stroke-hairline) solid var(--color-border-subtle);
  }
  .doc-motion-lab__controls,
  .doc-motion-lab__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
  }
  .doc-motion-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(15rem, .85fr);
    gap: var(--space-10);
    align-items: center;
    min-block-size: 20rem;
    margin-block: var(--space-6);
    padding-block: var(--space-10);
    border-block: var(--stroke-hairline) solid var(--color-border-subtle);
  }
  .doc-motion-stage__statement { max-inline-size: 32rem; }
  .doc-motion-stage__statement > :first-child { margin-block-start: 0; }
  .doc-motion-stage__statement > :last-child { margin-block-end: 0; }
  .doc-motion-sequence { margin: 0; }
  .doc-motion-sample {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-block-start: var(--stroke-hairline) solid var(--color-border-subtle);
  }
  .doc-motion-sample:last-child { border-block-end: var(--stroke-hairline) solid var(--color-border-subtle); }
  .doc-motion-sample dt { font-family: var(--font-ui); color: var(--color-text-functional); }
  .doc-motion-sample dd { margin: 0; }
  .doc-motion-signature { display: inline-flex; align-items: baseline; gap: var(--space-2); }
  .doc-motion-lab__status { flex-basis: 100%; margin: 0; color: var(--color-text-functional); }
  .doc-motion-lab:not([data-motion-active]) .wx-seal--breathing { animation-play-state: paused; }
  .doc-motion-lab[data-motion-preview="reduced"] *,
  .doc-motion-lab[data-motion-preview="reduced"] *::before,
  .doc-motion-lab[data-motion-preview="reduced"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .doc-component-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-10); margin-block: var(--space-10); }
  .doc-component-groups section { padding-block: var(--space-6); border-block-start: var(--stroke-hairline) solid var(--color-border-subtle); }
  .doc-component-groups section:nth-last-child(-n + 2) { border-block-end: var(--stroke-hairline) solid var(--color-border-subtle); }
  .doc-component-groups h2 { margin: 0; font-size: var(--text-xl); }
  .doc-component-count { margin-inline-start: var(--space-2); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 400; color: var(--color-text-functional); white-space: nowrap; }
  .doc-component-groups p { min-block-size: 3rem; margin-block: var(--space-3); color: var(--color-text-secondary); }
  .doc-component-groups a { font-family: var(--font-ui); font-size: var(--text-sm); }
  .doc-component-directory { margin-block: var(--space-8); border-block: var(--stroke-hairline) solid var(--color-border-subtle); }
  .doc-component-directory > summary { padding-block: var(--space-4); font-family: var(--font-ui); cursor: pointer; }
  .doc-component-directory[open] > summary { border-block-end: var(--stroke-hairline) solid var(--color-border-subtle); }
  .doc-component-catalog { padding-block: var(--space-6); }
  .doc-component-catalog + .doc-component-catalog { border-block-start: var(--stroke-hairline) solid var(--color-border-subtle); }

  .doc-footer {
    padding: var(--space-10) var(--padding-page-x);
    border-block-start: var(--stroke-hairline) solid var(--color-border-subtle);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--color-text-functional);
    text-align: center;
  }
  .doc-footer p { margin: 0; }

  @media (max-width: 64rem) {
    .doc-topbar { flex-wrap: wrap; }
    .doc-primary { order: 3; flex: 1 0 100%; gap: var(--space-4); margin: 0; padding-block-start: var(--space-2); overflow-x: auto; }
    .doc-brand, .doc-topbar__end, .doc-navtoggle[data-wx-disclosure-ready] { min-block-size: var(--space-12); }
    .doc-navtoggle[data-wx-disclosure-ready] { padding-block: 0; }
    .doc-shell { grid-template-columns: minmax(0, 1fr); }
    .doc-aside { display: none; }
    .doc-navtoggle[data-wx-disclosure-ready] { display: inline-flex; }
    .doc-sidebar[data-wx-disclosure-ready] {
      display: none;
      position: static;
      padding-block-end: var(--space-6);
      border-block-end: var(--stroke-hairline) solid var(--color-border-subtle);
    }
    .doc-sidebar[data-wx-disclosure-ready][data-open] { display: block; }
    .doc-shell--landing { padding-inline: var(--padding-page-x); }
    /* Three stacked full screens become a very long scroll on a phone; the
       claim screen carries two blocks, so it is allowed to grow instead. */
    .doc-screen { min-block-size: auto; padding-block: var(--space-16); }
    .doc-screen--hero { min-block-size: 100dvh; }
    .doc-screen--claim, .doc-product-paths, .doc-section-index, .doc-component-groups, .doc-pair, .doc-motion-stage { grid-template-columns: minmax(0, 1fr); }
    .doc-pair > * + * { border-inline-start: 0; border-block-start: var(--stroke-hairline) solid var(--color-border-subtle); }
    .doc-product-paths { gap: var(--space-6); }
    .doc-component-groups section:nth-last-child(2) { border-block-end: 0; }
    .doc-demo--prototype .doc-demo__bar {
      align-items: flex-start;
      flex-direction: column;
      gap: 0;
    }
  }
}