/* The site around the catalog on the /ui pages.

   The site's baseline (app/shared/styles/page.css) styles the chrome: the
   topbar, the search palette and the footer are the site's. The package's
   token contract and themes are confined to .ui-root (../styles, written by
   tools/sync-ui-catalog.mjs), so the look picker restyles the catalog and
   nothing around it. What is here: the type rules that keep the page's
   prose in the site's type while the demos take the theme's, the site rules
   that step back inside the catalog, and the page's own pieces. */

/* The site's type, captured above the catalog, where the tokens are still
   the site's, so the prose below can read it after a theme has redefined
   them. The theme's own fonts are captured on .ui-root for the stages. */
.page-chrome-main {
  --site-sans:    var(--font-sans);
  --site-mono:    var(--font-mono);
  --site-text:    var(--text-base);
  --site-leading: var(--leading-body);
}

.ui-root {
  --theme-body:    var(--font-body);
  --theme-heading: var(--font-heading);
  --theme-ui:      var(--font-ui);
  --theme-mono:    var(--font-mono);
}

/* The page around the demos reads in the site's type at the site's body
   size, as the manual does: the title, the intro, the tree, the toolbar,
   the usage and the reference. The package's scoped body and heading rules
   are layered, so these win inside the catalog. */
.catalog-content,
.ui-root .sidebar,
.ui-root .sidebar-sheet {
  --font-body:    var(--site-sans);
  --font-heading: var(--site-sans);
  --font-ui:      var(--site-sans);
  --font-mono:    var(--site-mono);
  font-family: var(--site-sans);
  font-size:   var(--site-text);
  line-height: var(--site-leading);
}

/* Only what is inside a demo stage takes the theme's fonts, which is the
   point of the toolbar. */
.demo-stage {
  --font-body:    var(--theme-body);
  --font-heading: var(--theme-heading);
  --font-ui:      var(--theme-ui);
  --font-mono:    var(--theme-mono);
  font-family: var(--font-body);
  font-size:   var(--text-base);
  line-height: var(--leading-body);
}

/* Headings as the manual sets them. */
.catalog-content :is(h1, h2, h3, h4) {
  font-family:    var(--site-sans);
  letter-spacing: var(--tracking-tight);
}

.doc-header h1 {
  font-size:      var(--page-title);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height:    var(--leading-none);
}

/* There is no lede: the first paragraph under a title is body text like the
   paragraphs after it. */
.catalog-content .lede,
.doc-description,
.index-intro p {
  margin:      0;
  max-width:   none;
  font-size:   inherit;
  line-height: inherit;
  color:       inherit;
}

.index-intro p + p { margin-top: var(--space-3); }

/* Inline code in the prose is the manual's: monospace, no box. A code
   element a page classes itself (a swatch's token name) keeps its own rules. */
.catalog-content :not(pre):not(.demo-stage *) > code:not([class]) {
  font-family:   var(--site-mono);
  font-size:     0.875em;
  color:         var(--ink);
  background:    none;
  border:        0;
  padding:       0;
  border-radius: 0;
  overflow-wrap: anywhere;
}

/* The site's own rules for toggles, kbd, inline code and the button text
   baseline step back inside the catalog, where those classes and elements
   are the package's. revert-layer hands each property back to the layered
   package styles; the chained class outranks every site toggle selector. */
.ui-root .toggle.toggle.toggle.toggle,
.ui-root .toggle.toggle.toggle.toggle::after {
  all: revert-layer;
}

.ui-root kbd {
  all: revert-layer;
}

.ui-root .demo-stage :not(pre) > code {
  all: revert-layer;
}

.ui-root :where(button, .button) {
  padding-top:    revert-layer;
  padding-bottom: revert-layer;
}

/* The sidebar (the package's own Sidebar) holds the section's heading, the
   mode buttons over the look select, the search box and the tree. Its
   trigger sits at the top of the content column; collapsed, the content
   takes the full width. */
.catalog-frame {
  --sidebar-width: 16rem;
  /* The topbar's own width and gutter (topbar/style.css, .topbar-inner),
     so the tree's edge lines up with the logo above it. */
  max-width:      1240px;
  margin-inline:  auto;
  padding-inline: 1.5rem;
  /* The two columns start on one line, the breadcrumb row's, and the tree
     is a closed panel that keeps the same margin above and below it as it
     follows the page. */
  padding-block:  var(--space-16);
  --sidebar-height: calc(100svh - 2 * var(--space-16));
}
.catalog-frame > .sidebar { top: var(--space-16); }
.catalog-frame > .sidebar[data-variant="sidebar"][data-side="left"] > .sidebar-container {
  border: 1px solid var(--rule);
}
@media (max-width: 48rem) {
  /* The same margin above and below as on desktop, at the phone topbar's
     gutter, so the rail lines up with the logo. */
  .catalog-frame { padding: var(--space-6) 1rem; --sidebar-height: 100svh; }
  .catalog-frame > .sidebar { top: 0; }
}
.catalog-nav-head {
  gap:     var(--space-3);
  padding: var(--space-2) var(--space-3) var(--space-4);
  /* A rule under the toolbar, so the tree visibly scrolls under it rather
     than folding into it. */
  border-bottom: 1px solid var(--rule);
}
/* The tree fades out at both ends of its scroll, so a half-clipped row
   reads as scrolled away, not cut off, and room under the last row so it
   can scroll clear of the bottom edge. */
.ui-root .sidebar-content {
  padding-top:    var(--space-3);
  padding-bottom: var(--space-12);
  mask-image:     linear-gradient(to bottom, transparent 0, #000 var(--space-5), #000 calc(100% - var(--space-5)), transparent 100%);
}
.catalog-switcher {
  flex-direction: column;
  align-items:    stretch;
  gap:            var(--space-2);
}
.catalog-switcher .mode-switch { display: flex; }
.catalog-switcher .mode-switch-button { flex: 1; }
.catalog-switcher label { display: block; }
.catalog-switcher select { width: 100%; }
.catalog-search { width: 100%; }
.catalog-nav-tree {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}
.catalog-nav-empty {
  margin:  0;
  padding: var(--space-2) var(--space-4);
  color:   var(--ink-faint);
}
.catalog-nav-row {
  display:         flex;
  justify-content: flex-end;
}

/* The tree reads as a table of contents: tighter rows than a menu. */
.catalog-nav-tree .sidebar-menu-button {
  height:  1.625rem;
  padding: 0 var(--space-2);
}
.catalog-nav-tree .sidebar-group {
  padding-block: var(--space-2);
}

/* Collapsed to the icon rail, only the trigger stays in the header, and
   the toolbar's rule goes with the toolbar: there is nothing under it. */
.sidebar-wrapper[data-state="collapsed"] .catalog-nav-head {
  border-bottom: 0;
  padding: var(--space-1);
}
.sidebar-wrapper[data-state="collapsed"] .catalog-nav-row { justify-content: center; }
.sidebar-wrapper[data-state="collapsed"] .catalog-nav-head > :not(.catalog-nav-row),
.sidebar-wrapper[data-state="collapsed"] .ui-root .sidebar-content,
.sidebar-wrapper[data-state="collapsed"] .sidebar-content {
  display: none;
}

.catalog-page {
  padding: 0 var(--space-10) var(--space-24);
}
/* On a phone the sidebar is a sheet, so its trigger sits outside it, in
   the same left rail the collapsed desktop panel is: a bordered column
   with the trigger at the top, beside the page. */
.catalog-phone-bar { display: none; }
@media (max-width: 48rem) {
  /* A small box at the top left holding the trigger; the page runs the
     full width under it. The sheet opens from the box's own corner. */
  .catalog-phone-bar {
    display:         inline-flex;
    align-self:      flex-start;
    border:          1px solid var(--rule);
    padding:         var(--space-1);
    margin-bottom:   var(--space-4);
  }
  .catalog-page {
    min-width: 0;
    padding:   0 0 var(--space-16);
  }
  /* The title fits the phone instead of running off it. */
  .doc-header h1 { font-size: 2.25rem; overflow-wrap: anywhere; }
}
html:has(.ui-root) { scroll-padding-top: 0; }

/* A template's main example, under the title and before the usage code. */
.doc-main-demo { margin-bottom: var(--space-14); }

/* The reference is the manual page: the whole box is the link. */
.doc-reference {
  display:         flex;
  flex-direction:  column;
  gap:             var(--space-1);
  margin-top:      var(--space-14);
  padding:         var(--space-5) var(--space-6);
  border:          1px solid var(--rule);
  border-radius:   var(--radius-md);
  background:      var(--bg);
  color:           inherit;
  text-decoration: none;
  transition:      border-color 120ms ease, background-color 120ms ease;
}
.doc-reference:hover {
  border-color: var(--accent-edge);
  background:   var(--bg-soft);
}
.doc-reference-label {
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--ink-dim);
}
.doc-reference-title {
  font-weight: var(--weight-semibold);
  color:       var(--ink);
}
.doc-reference:hover .doc-reference-title { color: var(--accent-deep); }
.doc-reference-text {
  font-size: var(--text-sm);
  color:     var(--ink-soft);
}

/* The manual's footer navigation (nav-icons/style.css) sits under the box. */
.catalog-content .nav-footer-row { margin-top: var(--space-8); }

/* A long first line in a code block runs under the copy button otherwise. */
.code pre { padding-right: var(--space-12); }

/* The tree sits on the page, not on a panel of its own. */
.ui-root .sidebar-inner,
.ui-root .sidebar-wrapper {
  background: transparent;
}

/* The content column centers in whatever width the sidebar leaves it. */
.ui-root .catalog-content {
  margin-inline: auto;
}

/* Text runs the same width as the cards and the demos under it. */
.ui-root .doc-header .lede,
.ui-root .doc-section > ul {
  max-width: none;
}

/* The phone sheet is the rail widened: the same left edge, the same top
   (measured from the rail when the trigger is pressed), the same border,
   and the trigger in the same place, now closing it. */
.ui-root .dialog.sheet.sidebar-sheet {
  top:           var(--catalog-sheet-top, 0px);
  bottom:        var(--space-6);
  height:        auto;
  left:          1rem;
  width:         var(--sidebar-w);
  max-width:     calc(100vw - 2rem);
  background:    var(--bg);
  border:        1px solid var(--rule);
  border-radius: 0;
}
.ui-root .sidebar-sheet .catalog-nav-head { padding-top: var(--space-1); }

/* The breadcrumb row, the manual's (app/pages/man/style.css). */
.catalog-crumbs {
  font-family:   var(--site-mono);
  font-size:     var(--text-xs);
  line-height:   var(--leading-body);
  color:         var(--ink-dim);
  margin-bottom: var(--space-4);
}
.catalog-crumbs a {
  color:                 var(--ink-soft);
  text-decoration:       underline;
  text-decoration-color: color-mix(in oklab, currentColor 30%, transparent);
  text-underline-offset: 0.25em;
}
.catalog-crumb-sep { padding: 0 0.4em; }
.catalog-crumb-current { color: var(--ink); }

/* A token or theme name in a table cell is one word: the cell sizes to it
   instead of breaking it across lines. */
.catalog-content :is(td, th) > code {
  overflow-wrap: normal;
  white-space:   nowrap;
}