/*
The catalog chrome: shell, nav, page header, demos, API tables. Reads
tokens only, so switching the theme re-skins the catalog itself.
*/

@import "https://assets.elements.dev/assets/app/shared/ui-catalog/catalog/page.7f7f5e2559b28e6e.css";

@layer components {

/* Shell */

.catalog {
  min-height:     100vh;
  display:        flex;
  flex-direction: column;
  background:     var(--bg);
  color:          var(--ink);
}

.catalog-bar {
  position:        sticky;
  top:             0;
  z-index:         var(--z-sticky);
  display:         flex;
  align-items:     center;
  gap:             var(--space-4);
  height:          3.5rem;
  padding:         0 var(--space-5);
  padding-right:   calc(var(--space-5) + var(--scrollbar-gap, 0px));
  background:      color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom:   1px solid var(--rule);
}

/* Whatever the page scrolls into view (a find match, a focused row, an
   anchor) lands below the sticky bar, not under it. */
html:has(.catalog) {
  scroll-padding-top: 3.5rem;
}

.catalog-brand {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-2);
  color:           var(--ink);
  font-family:     var(--font-heading);
  font-weight:     var(--weight-heading);
  font-size:       var(--text-md);
  letter-spacing:  var(--tracking-heading);
  white-space:     nowrap;
  text-decoration: none;
}

.catalog-brand-mark {
  width:         1.5rem;
  height:        1.5rem;
  display:       grid;
  place-items:   center;
  border-radius: var(--radius-control);
  background:    var(--accent);
  color:         var(--accent-ink);
}

.catalog-brand-tag {
  font-family:    var(--font-mono);
  font-size:      var(--text-2xs);
  font-weight:    var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding:        var(--space-0-5) var(--space-1-5);
  border:         1px solid var(--rule);
  border-radius:  var(--radius-tag);
  color:          var(--ink-dim);
}

.catalog-bar-spacer {
  flex: 1;
}

.catalog-body {
  flex:                  1;
  display:               grid;
  grid-template-columns: 15rem minmax(0, 1fr);
}

.catalog-nav {
  position:    sticky;
  top:         3.5rem;
  align-self:  start;
  height:      calc(100vh - 3.5rem);
  overflow-y:  auto;
  padding:     var(--space-6) var(--space-3) var(--space-10) var(--space-5);
  border-right: 1px solid var(--rule-soft);
}

.catalog-nav-group + .catalog-nav-group {
  margin-top: var(--space-6);
}

.catalog-nav-heading {
  margin:         0 0 var(--space-2);
  padding-left:   var(--space-2);
  font-family:    var(--font-ui);
  font-size:      var(--text-2xs);
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color:          var(--ink-faint);
}

.catalog-nav-list {
  list-style: none;
  margin:     0;
  padding:    0;
}

.catalog-nav-link {
  display:         flex;
  align-items:     center;
  gap:             var(--space-2);
  padding:         var(--space-1) var(--space-2);
  border-radius:   var(--radius-item);
  font-family:     var(--font-ui);
  font-size:       var(--text-ui);
  color:           var(--ink-dim);
  text-decoration: none;
}

.catalog-nav-link:hover {
  background: var(--item-highlight);
  color:      var(--item-highlight-ink);
}

.catalog-nav-link[aria-current="page"] {
  background:  var(--item-selected);
  color:       var(--item-selected-ink);
  font-weight: var(--weight-ui);
}

.catalog-nav-link.is-spec {
  color: var(--ink-faint);
}

.catalog-main {
  min-width: 0;
  padding:   var(--space-10) var(--space-10) var(--space-24);
}

.catalog-content {
  max-width: 56rem;
}

@media (max-width: 48rem) {
  .catalog-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .catalog-nav {
    display: none;
  }

  .catalog-bar {
    padding: 0 var(--space-4);
    gap:     var(--space-2);
  }

  /* Roomy themes have wide controls; the theme picker gives up width
     before the brand wraps or the bar overflows. */
  .theme-switcher,
  .theme-switcher label {
    display:   flex;
    min-width: 0;
  }

  .theme-switcher select {
    min-width: 0;
  }

  .mode-switch {
    flex-shrink: 0;
  }

  .catalog-brand-tag {
    display: none;
  }

  .catalog-main {
    padding: var(--space-6) var(--space-4) var(--space-16);
  }
}

/* Status */

.status-dot {
  flex:          none;
  width:         0.5rem;
  height:        0.5rem;
  border-radius: var(--radius-full);
  border:        1.5px solid var(--ink-faint);
}

.status-dot.is-building {
  border-color: var(--warning);
  background:   var(--warning);
}

.status-dot.is-verified {
  border-color: var(--success);
  background:   var(--success);
}

.status {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-1-5);
  height:         var(--tag-height);
  padding:        0 var(--tag-padding-x);
  border:         1px solid var(--rule);
  border-radius:  var(--radius-pill);
  font-family:    var(--font-ui);
  font-size:      var(--tag-font-size);
  font-weight:    var(--tag-weight);
  color:          var(--ink-dim);
  white-space:    nowrap;
}

/* Theme Switcher */

.theme-switcher {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
}

.theme-switcher select {
  height:        var(--control-height-sm);
  width:         auto;
  padding-right: var(--space-8);
  font-size:     var(--text-ui);
}

.mode-switch {
  display:       inline-flex;
  padding:       2px;
  gap:           2px;
  border:        var(--control-border-width) solid var(--control-border);
  border-radius: var(--radius-control);
  background:    var(--control-bg);
}

.mode-switch-button {
  display:       grid;
  place-items:   center;
  width:         calc(var(--control-height-sm) - 6px);
  height:        calc(var(--control-height-sm) - 6px);
  padding:       0;
  border:        0;
  border-radius: calc(var(--radius-control) - 2px);
  background:    transparent;
  color:         var(--ink-dim);
}

.mode-switch-button:hover {
  background: var(--bg-muted);
  color:      var(--ink);
}

.mode-switch-button[aria-pressed="true"] {
  background: var(--bg-muted);
  color:      var(--ink);
}

.mode-switch-button:active {
  background:          color-mix(in oklab, var(--bg-muted) 85%, var(--ink));
  color:               var(--ink);
  transition-duration: 0s;
}

/* Page Header */

.doc-header {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  padding-bottom: var(--space-8);
  margin-bottom:  var(--space-10);
  border-bottom:  1px solid var(--rule-soft);
}

.doc-header h1 {
  margin: 0;
}

.doc-header .lede {
  margin:    0;
  max-width: var(--measure);
}

.doc-meta {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--space-2);
}

/* Sections */

.doc-section {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
  scroll-margin-top: 5rem;
}

.doc-section + .doc-section {
  margin-top: var(--space-14);
}

.doc-section > h2 {
  margin:    0;
  font-size: var(--text-h4);
}

.doc-section > p,
.doc-section > ul {
  margin:    0;
  max-width: var(--measure);
  color:     var(--ink-soft);
}

.doc-section > ul {
  padding-left: var(--space-5);
  list-style:   disc;
}

.doc-section > ul li + li {
  margin-top: var(--space-1-5);
}

/* Demo */

.demo {
  border:        var(--surface-border-width) solid var(--surface-border);
  border-radius: var(--radius-surface);
  background:    var(--surface-bg);
  overflow:      hidden;
}

.demo + .demo {
  margin-top: var(--space-6);
}

.demo-head {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
  padding:        var(--space-4) var(--space-5);
  border-bottom:  1px solid var(--rule-soft);
}

.demo-title {
  margin:      0;
  font-family: var(--font-heading);
  font-size:   var(--text-base);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-heading);
}

.demo-description {
  margin:    0;
  font-size: var(--text-sm);
  color:     var(--ink-dim);
}

.demo-stage {
  display:          flex;
  flex-wrap:        wrap;
  align-items:      center;
  justify-content:  center;
  gap:              var(--space-3);
  min-height:       9rem;
  padding:          var(--space-10) var(--space-6);
  background-color: var(--bg);
  background-image: radial-gradient(color-mix(in oklab, var(--ink) 9%, transparent) 1px, transparent 1px);
  background-size:  14px 14px;
}

.demo-stage.is-start {
  justify-content: flex-start;
  align-items:     flex-start;
}

.demo-stage.is-column {
  flex-direction: column;
}

/* A demo log: the line under a demo that echoes what it reports (a value,
   an event, a list of changes). It wraps, so every character shows at any
   width, and its box is a fixed number of lines, so a longer or shorter
   echo never moves a control or changes the demo's height. A page sets the
   lines a log can reach with --demo-log-lines, and --demo-log-lines-phone
   for phone width, or with a modifier: is-wrap (one line, two on a phone)
   for a log of several fields, is-tall (two lines, three on a phone) for a
   long one or a list that grows. A log that outgrows its lines (one that appends without
   bound) scrolls: the catalog keeps its newest entry in view and makes it a
   named Tab stop while it overflows (catalog/demo-log.ts). It takes a line
   of its own in a row or a column and adds no width to a row it sits in
   (contain: inline-size). */
.demo-log {
  display:         block;
  box-sizing:      border-box;
  flex:            none;
  align-self:      stretch;
  inline-size:     100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  block-size:      calc(var(--demo-log-lines, 1) * 1lh);
  margin:          0;
  padding:         0;
  overflow-x:      hidden;
  overflow-y:      auto;
  contain:         inline-size;
  font-family:     var(--font-mono);
  font-size:       var(--text-xs);
  line-height:     var(--leading-snug);
  color:           var(--ink-dim);
  white-space:     normal;
  overflow-wrap:   anywhere;
}

/* Under centered controls the echo is centered too. */
.demo-stage:not(.is-start) > .demo-log {
  text-align: center;
}

/* Several logs under one demo: a log of state fields (is-fields, which
   keeps its first line in view) and a log per list that grows. The group
   takes the line one log would and carries the demo's testid. */
.demo-log-group {
  display:         block;
  box-sizing:      border-box;
  flex:            none;
  align-self:      stretch;
  inline-size:     100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  margin:          0;
  padding:         0;
  contain:         inline-size;
}

.demo-stage:not(.is-start) > .demo-log-group > .demo-log {
  text-align: center;
}

.demo-log.is-wrap {
  --demo-log-lines:       1;
  --demo-log-lines-phone: 2;
}

.demo-log.is-tall {
  --demo-log-lines:       2;
  --demo-log-lines-phone: 3;
}

.demo-log:focus-visible {
  outline:    none;
  box-shadow: var(--focus-ring);
}

@media (max-width: 40rem) {
  .demo-log {
    block-size: calc(var(--demo-log-lines-phone, var(--demo-log-lines, 1)) * 1lh);
  }
}

.demo-code {
  border-top: 1px solid var(--rule-soft);
}

.demo-code > summary {
  padding:     var(--space-2-5) var(--space-5);
  font-family: var(--font-ui);
  font-size:   var(--text-ui);
  color:       var(--ink-dim);
  cursor:      pointer;
  list-style:  none;
}

.demo-code > summary::-webkit-details-marker {
  display: none;
}

.demo-code > summary::before {
  content:      "+";
  display:      inline-block;
  width:        1em;
  font-family:  var(--font-mono);
}

.demo-code[open] > summary::before {
  content: "\2212";
}

.demo-code > summary:hover {
  color: var(--ink);
}

.demo-code .code {
  border:        0;
  border-top:    1px solid var(--rule-soft);
  border-radius: 0;
}

/* Code */

.code {
  position:      relative;
  border:        1px solid var(--rule);
  border-radius: var(--radius-surface);
  background:    var(--bg-soft);
}

.code pre {
  margin:      0;
  padding:     var(--space-4) var(--space-5);
  overflow-x:  auto;
  background:  transparent;
  color:       var(--ink);
  font-family: var(--font-mono);
  font-size:   var(--text-sm);
  line-height: var(--leading-relaxed);
  border:      0;
  border-radius: 0;
}

/* A code block that scrolls sideways is a Tab stop while it overflows
   (catalog/scroll-region.ts). */
.code pre:focus-visible {
  outline:       none;
  border-radius: inherit;
  box-shadow:    var(--focus-ring);
}

/* Both labels share one grid cell, so the button is always as wide as the
   longer one and only the text changes. */
.swap-label {
  display: inline-grid;
}

.swap-label > * {
  grid-area: 1 / 1;
  text-align: center;
}

.swap-label[data-state="off"] > .swap-on,
.swap-label[data-state="on"] > .swap-off {
  visibility: hidden;
}

/* The copy control: an icon that turns into a check, the same size in both
   states. Quiet until hovered, focused or just used. */
.code-copy {
  position:        absolute;
  top:             var(--space-2);
  right:           var(--space-2);
  display:         inline-grid;
  place-items:     center;
  width:           var(--space-8);
  height:          var(--space-8);
  padding:         0;
  border:          0;
  border-radius:   var(--radius-sm);
  background:      transparent;
  color:           var(--ink-dim);
  opacity:         0.7;
  cursor:          pointer;
  transition:      opacity var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.code-copy:hover,
.code-copy:focus-visible,
.code-copy.is-copied {
  opacity:    1;
  color:      var(--ink);
  background: color-mix(in oklab, currentColor 10%, transparent);
}

.code-copy .icon {
  --icon-stroke: 1.5;
}

@media (max-width: 40rem) {
  .code-copy {
    display: none;
  }
}

.hl-t { color: var(--info-ink); }
.hl-a { color: var(--ink-dim); }
.hl-s { color: var(--success-ink); }
.hl-k { color: var(--danger-ink); }
.hl-c { color: var(--ink-faint); font-style: italic; }

/* Api Tables */

.doc-table-wrap {
  overflow-x:    auto;
  border:        1px solid var(--rule);
  border-radius: var(--radius-surface);
}

/* A table that scrolls sideways is a Tab stop while it overflows
   (catalog/scroll-region.ts). */
.doc-table-wrap:focus-visible {
  outline:    none;
  box-shadow: var(--focus-ring);
}

.doc-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--text-sm);
}

.doc-table th {
  text-align:     left;
  padding:        var(--space-2) var(--space-4);
  background:     var(--bg-soft);
  font-family:    var(--font-ui);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color:          var(--ink-dim);
  border-bottom:  1px solid var(--rule);
}

.doc-table td {
  padding:        var(--space-2-5) var(--space-4);
  vertical-align: top;
  color:          var(--ink-soft);
  border-top:     1px solid var(--rule-soft);
}

.doc-table tr:first-child td {
  border-top: 0;
}

.doc-table code {
  font-size:   var(--text-xs);
  white-space: nowrap;
}

.doc-table td:first-child code {
  color:       var(--ink);
  font-weight: var(--weight-medium);
}

.doc-table .doc-type code {
  white-space: normal;
  color:       var(--info-ink);
}

.doc-part {
  display:   block;
  margin-top: var(--space-0-5);
  font-size: var(--text-xs);
  color:     var(--ink-faint);
}

.doc-bind {
  margin-left:    var(--space-1);
  font-family:    var(--font-ui);
  font-size:      var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color:          var(--accent);
}

kbd.doc-key {
  font-size: var(--text-xs);
}

/* Index */

.index-hero {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
  margin-bottom:  var(--space-12);
}

.index-hero h1 {
  margin:    0;
  font-size: var(--text-h1);
}

.index-hero .lede {
  margin:    0;
  max-width: 40rem;
}

.index-counts {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-2);
}

.index-category + .index-category {
  margin-top: var(--space-12);
}

.index-category-head {
  display:       flex;
  align-items:   baseline;
  gap:           var(--space-3);
  margin-bottom: var(--space-4);
}

.index-category-head h2 {
  margin:    0;
  font-size: var(--text-h4);
}

.index-category-head span {
  font-family: var(--font-ui);
  font-size:   var(--text-ui);
  color:       var(--ink-faint);
}

.index-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap:                   var(--space-3);
  list-style:            none;
  margin:                0;
  padding:               0;
}

.index-card {
  display:         flex;
  flex-direction:  column;
  gap:             var(--space-2);
  height:          100%;
  padding:         var(--space-4);
  border:          var(--surface-border-width) solid var(--surface-border);
  border-radius:   var(--radius-surface);
  background:      var(--surface-bg);
  color:           var(--ink);
  text-decoration: none;
  transition:      var(--transition-colors), var(--transition-shadow);
}

.index-card:hover {
  border-color: var(--rule-strong);
  box-shadow:   var(--shadow-sm);
}

.index-card.is-spec {
  background: transparent;
  border-style: dashed;
}

.index-card-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-2);
}

.index-card-title {
  font-family:    var(--font-heading);
  font-weight:    var(--weight-strong);
  letter-spacing: var(--tracking-heading);
}

.index-card.is-spec .index-card-title {
  color: var(--ink-dim);
}

.index-card-description {
  font-size:   var(--text-sm);
  line-height: var(--leading-snug);
  color:       var(--ink-dim);
}


/* Search And Jumps */

.catalog-search {
  width: 100%;
}

.catalog-nav .catalog-search,
.catalog-sheet-nav .catalog-search {
  margin-bottom: var(--space-5);
}

.catalog-nav-empty {
  margin:      0;
  padding:     var(--space-1) var(--space-2);
  font-family: var(--font-ui);
  font-size:   var(--text-ui);
  color:       var(--ink-faint);
}

/* The menu button and its sheet stand in for the sidebar on a phone. */
.button.catalog-menu-button {
  display: none;
}

.catalog-sheet-nav {
  padding: 0;
}

.catalog-sheet-nav .catalog-nav-group + .catalog-nav-group {
  margin-top: var(--space-5);
}

@media (max-width: 48rem) {
  .button.catalog-menu-button {
    display:     inline-flex;
    flex-shrink: 0;
  }
}

.index-find {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

.index-find .catalog-search {
  max-width: 32rem;
}

.index-jumps {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-2);
  list-style: none;
  margin:     0;
  padding:    0;
}

.index-jump {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-1-5);
  padding:         var(--space-1) var(--space-2-5);
  border:          1px solid var(--rule);
  border-radius:   var(--radius-full);
  font-family:     var(--font-ui);
  font-size:       var(--text-ui);
  color:           var(--ink-dim);
  text-decoration: none;
}

.index-jump:hover {
  background: var(--item-highlight);
  color:      var(--item-highlight-ink);
}

.index-jump-count {
  color: var(--ink-faint);
}

.index-category {
  scroll-margin-top: var(--space-4);
}

.index-empty {
  color: var(--ink-dim);
}

}