@layer page {
/* ============================================================
   API
   Styles for API reference hub and class/method pages.
   ============================================================ */

/* --- Hub --- */
.api-hub {
  padding: calc(var(--nav-h) + var(--space-16)) var(--gutter) var(--space-16);
  max-width: 80rem;
  margin-inline: auto;
}
.api-hub-hero {
  text-align: center;
  margin-bottom: var(--space-12);

  .kicker {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: var(--space-3);
  }

  h1 {
    font-size: var(--text-4xl);
    font-weight: 200;
    color: var(--text-0);

    em {
      font-style: normal;
      color: var(--accent-text);
    }
  }

  p {
    font-size: var(--text-lg);
    color: var(--text-1);
    max-width: 36rem;
    margin-inline: auto;
    margin-bottom: var(--space-8);
  }
}

/* --- Search --- */
.api-search {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 32rem;
  margin: 0 auto var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);

  svg {
    width: 18px;
    height: 18px;
    stroke: var(--text-2);
    stroke-width: 2;
    fill: none;
  }

  input {
    flex: 1;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    background: transparent;
    border: none;
    color: var(--text-0);
    outline: none;
  }
}
.api-search-hint {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-2);
  margin-bottom: var(--space-10);

  kbd {
    font-family: var(--font-mono);
    padding: 1px 6px;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
  }
}

/* --- Stats --- */
.api-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-12);
  margin-bottom: var(--space-8);
}
.api-stat { text-align: center; }
.api-stat-val {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 300;
  color: var(--text-0);
}
.api-stat-label {
  font-size: var(--text-xs);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- Version bar --- */
.api-version-bar {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-2);
  margin-bottom: var(--space-12);

  .version-badge {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--text-0);
  }
}

/* --- Featured grid --- */
.api-featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-16);
}
.api-featured-card {
  display: block;
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--duration-fast);

  &:hover {
    border-color: oklch(0.72 0.22 var(--fh, var(--hue-brand)));
  }

  .featured-eyebrow {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: oklch(0.72 0.22 var(--fh, var(--hue-brand)));
    margin-bottom: var(--space-2);
  }

  h3 {
    font-size: var(--text-2xl);
    font-weight: 400;
    color: var(--text-0);
    margin-bottom: var(--space-2);
  }

  p {
    font-size: var(--text-sm);
    color: var(--text-1);
    margin-bottom: var(--space-4);
  }
}
.method-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.method-item {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-1);

  .ret {
    color: var(--text-2);
  }
}

/* --- Namespace section --- */
.ns-section {
  margin-bottom: var(--space-16);
}
.ns-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-6);

  h2 {
    font-size: var(--text-2xl);
    font-weight: 300;
    color: var(--text-0);
  }
}
.ns-path {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-2);
}
.ns-count {
  font-size: var(--text-xs);
  color: var(--text-2);
  margin-left: auto;
}

/* --- API hub: module grid (used on /api index) --- */
.api-modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
}
.api-module-card {
  position: relative; /* hosts the stretched card-link on the title */
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  transition:
    background var(--duration-normal) var(--ease-out-expo),
    transform var(--duration-normal) var(--ease-out-expo);

  &:hover {
    background: var(--surface-2);
    transform: translateY(-2px);
  }

  .api-module-name a {
    color: inherit;
    text-decoration: none;
  }
}
.api-module-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.api-module-name {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--accent-text);
  margin: 0;
}
.api-module-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.api-usage {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent-text);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  overflow-x: auto;
  white-space: pre;
}
.api-module-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-1);

  .more { color: var(--text-3); }
}


/* --- Class card grid --- */
.class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}
.class-card {
  display: block;
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: border-color var(--duration-fast);

  &:hover {
    border-color: oklch(0.72 0.22 var(--ch, var(--hue-brand)));
  }
}
.class-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.class-kind {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-2);
}
.class-name {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text-0);
}
.class-desc {
  font-size: var(--text-sm);
  color: var(--text-1);
  margin-bottom: var(--space-3);
}
.class-meta {
  font-size: var(--text-xs);
  color: var(--text-2);
}

/* --- API shell (topbar + sidebar + main + footer) ---
   Shell + footer placement here; the accordion nav (.nav-group / .nav-link)
   is shared with the docs sidebar and lives in pages/docs.css. */
.api-shell {
  display: grid;
  grid-template-columns: var(--layout-sidebar-width) minmax(0, 1fr) var(--layout-sidebar-width);
  grid-template-rows: var(--nav-h, 56px) auto 1fr auto;
  height: 100vh;
}
.api-shell > .site-footer {
  grid-column: 1 / -1;
}
.api-sidebar {
  padding: 0 var(--space-4) var(--space-6);
  border-right: 1px solid var(--border-subtle);
  overflow-y: auto;
  height: 100%;
  scrollbar-color: transparent transparent;

  &:hover {
    scrollbar-color: color-mix(in oklch, black 80%, var(--accent, currentColor) 20%) transparent;
  }
}

/* --- Column filter fields (classes on the left, methods on the right) --- */
.api-filter {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-4) var(--space-3);
  margin-bottom: var(--space-2);
  background: var(--surface-0);

  svg {
    flex: none;
    width: 13px;
    height: 13px;
    fill: none;
    stroke: var(--text-3);
    stroke-width: 1.8;
    stroke-linecap: round;
  }

  input {
    flex: 1;
    min-width: 0;
    padding: var(--space-1) var(--space-3);
    border: 0;
    border-radius: var(--radius-full);
    background: var(--surface-1);
    color: var(--text-0);
    font-family: var(--font-mono-ui);
    font-size: var(--text-xs);

    &::placeholder { color: var(--text-3); }
    &:focus { outline: none; background: var(--surface-2); }
    &::-webkit-search-cancel-button { display: none; }
  }
}

/* display: flex/block on these beats the UA [hidden] rule; the filter
   relies on the attribute, so restate it. */
.api-tree-dir[hidden],
.api-tree-file[hidden],
.api-toc-link[hidden] {
  display: none;
}

/* --- Sidebar file explorer ---
   Mirrors the library's src/ tree: <details> directories, class files
   as links. Directory state is native; no JS besides scroll-to-active. */
.api-tree {
  font-family: var(--font-mono-ui);
  font-size: var(--text-xs);
  interpolate-size: allow-keywords;
}
.api-tree-root {
  padding: var(--space-1) var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.api-tree-dir > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  font-weight: var(--weight-medium);
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: color var(--duration-fast), background var(--duration-fast);

  &::-webkit-details-marker { display: none; }

  &:hover {
    color: var(--text-0);
    background: var(--surface-1);
  }
}
.api-tree-chevron {
  flex: none;
  width: 11px;
  height: 11px;
  color: var(--text-3);
  transition: transform var(--duration-fast) var(--ease-out-expo);
}
.api-tree-dir[open] > summary .api-tree-chevron { transform: rotate(90deg); }
.api-tree-folder,
.api-tree-icon {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--text-3);
}
.api-tree-dir[open] > summary .api-tree-folder { color: var(--accent-text); }
.api-tree-children { padding-inline-start: var(--space-5); }
.api-tree-dir::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size var(--duration-normal) var(--ease-out-expo), content-visibility var(--duration-normal);
  transition-behavior: allow-discrete;
}
.api-tree-dir[open]::details-content { block-size: auto; }
.api-tree-file {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* Left inset mirrors the chevron width + gap, so file icons line
     up under folder icons instead of hugging the edge. */
  padding: var(--space-1) var(--space-2) var(--space-1) calc(var(--space-4) + 11px);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  font-weight: var(--weight-regular);
  text-decoration: none;
  transition: color var(--duration-fast), background var(--duration-fast);

  &:hover {
    color: var(--text-0);
    background: var(--surface-1);
  }

  &.active {
    color: var(--accent-text);
    background: var(--accent-soft);

    .api-tree-icon { color: var(--accent-text); }
  }
}
.api-tree-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.api-tree-ext { color: var(--text-3); }
.badge-sm {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-2);
}

.api-main {
  padding: var(--space-8) var(--space-12);
  overflow-y: auto;
  scrollbar-color: transparent transparent;

  &:hover {
    scrollbar-color: color-mix(in oklch, black 80%, var(--accent, currentColor) 20%) transparent;
  }
}
/* Center the content column for a calmer reading measure. */
.api-main > * { max-width: 76rem; margin-inline: auto; }
.api-content {
  max-width: 48rem;
  min-width: 0;

  .method-title {
    font-family: var(--font-body);
    font-size: var(--text-5xl);
    font-weight: var(--weight-light);
    letter-spacing: -0.02em;
    /* Tight leading so the namespace eyebrow sits right on top. */
    line-height: 1.05;
    color: var(--text-0);
    margin-bottom: var(--space-8);
    word-break: break-all;
  }
}

/* --- Right column: method index, mirror of the sidebar --- */
.api-toc-col {
  height: 100%;
  overflow-y: auto;
  padding: 0 var(--space-4) var(--space-6);
  border-left: 1px solid var(--border-subtle);
  scrollbar-color: transparent transparent;

  &:hover {
    scrollbar-color: color-mix(in oklch, black 80%, var(--accent, currentColor) 20%) transparent;
  }

  &:empty { border-left: 0; }
}
.api-toc-title {
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  font-family: var(--font-mono-ui);
  padding: var(--space-1) var(--space-2) var(--space-3);
}
.api-toc-link + .api-toc-title { margin-top: var(--space-4); }

.api-toc-link {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--font-mono-ui);
  font-size: var(--text-xs);
  color: var(--text-1);
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast), background var(--duration-fast);

  &:hover {
    color: var(--text-0);
    background: var(--surface-1);
  }

  &.active {
    color: var(--accent-text);
    background: var(--accent-soft);
  }
}
/* Hub hero: its first line sits at the same viewport height as the
   guide and getting-started heroes. The shell's in-flow bars already
   cleared the top, so the hero cancels the main padding and keeps
   only a hair of its own. */
.api-content > .sec-hero.large {
  min-height: 0;
  margin-block-start: calc(var(--space-8) * -1);
  padding-block: var(--space-20) var(--space-12);
  /* .api-main already pads this column. The hero adding the page gutter on
     top of it cost 120px of measure and broke the intro to four words a
     line. */
  padding-inline: 0;

  /* The shared rule caps the intro at min(48ch, 80%). The 80% is there to
     keep a full-width hero readable; inside a column that is already narrow
     it only subtracts. Characters alone do the job here. */
  > .body-lg {
    max-width: 48ch;
  }
}

/* Orientation line under the hub hero. */
.api-hub-hint {
  text-align: center;
  color: var(--text-1);
  font-size: var(--text-lg);
  text-wrap: balance;
  max-width: 40ch;
  margin-inline: auto;
}

.api-type-suggestions {
  max-width: 38rem;
  margin-inline: auto;
  margin-block-start: var(--space-16);
}

.api-type-intro {
  margin-block-end: var(--space-6);

  h2 {
    color: var(--text-0);
  }
}

.api-type-list {
  border-block-start: 1px solid var(--border-subtle);
}

.api-type-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "namespace arrow"
    "name arrow"
    "summary arrow";
  column-gap: var(--space-6);
  padding-block: var(--space-6);
  border-block-end: 1px solid var(--border-subtle);
  color: inherit;
  text-decoration: none;

  &:hover {
    .api-type-name { color: var(--accent-text); }
    .api-type-arrow { translate: var(--space-1) 0; }
  }
}

.api-type-namespace {
  grid-area: namespace;
  margin-block-end: var(--space-2);
  color: var(--text-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-light);
  letter-spacing: 0.06em;
}

.api-type-name {
  grid-area: name;
  color: var(--text-0);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  transition: color var(--duration-fast);
}

.api-type-arrow {
  grid-area: arrow;
  align-self: center;
  color: var(--accent-text);
  transition: translate var(--duration-fast) var(--ease-out-expo);
}

.api-type-summary {
  grid-area: summary;
  margin-block-start: var(--space-3);
  color: var(--text-2);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* --- Namespace breadcrumb (the only breadcrumb on class pages) --- */
.api-ns {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
  color: var(--accent-text);

  a {
    color: var(--accent-text);
    text-decoration: none;
    transition: color var(--duration-fast);

    &:hover { color: var(--text-0); }
  }
  .sep { color: var(--text-3); }
}

/* --- Namespace page: flat class list --- */
.api-ns-item {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--text-0);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  transition: background var(--duration-fast);

  &:hover { background: var(--surface-2); }
}
/* --- Class page: heading block --- */
.class-head {
  --cluster-gap: var(--space-4);
  /* Same beat as summary -> description below. */
  margin-bottom: var(--space-8);

  .method-title { margin-bottom: 0; }
}
.class-summary {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--text-0);
  margin-bottom: var(--space-8);
}
.class-long-desc {
  color: var(--text-1);
  line-height: 1.6;
  margin-bottom: var(--space-8);
}

/* --- Class page: method entries --- */
.method-list-simple {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.method-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.method-name {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);

  a { color: var(--text-0); }
}
.method-badges {
  display: flex;
  gap: var(--space-2);
}
/* Keywords and the method name reuse the shared .t-kw / .t-fn
   highlight tokens; only the parameter parts need local colors. */
.method-signature {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  overflow-x: auto;
}
.sig-type { color: var(--accent-text); }
.sig-var { color: var(--text-1); }
.method-summary {
  color: var(--text-1);
  margin-bottom: var(--space-4);
}
.method-notes {
  font-size: var(--text-base);
  color: var(--text-1);
  margin-bottom: var(--space-4);
}
.params-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-block: var(--space-4) var(--space-2);
}

/* --- Namespace page --- */
.ns-count {
  font-size: var(--text-lg);
  color: var(--text-1);
  margin-bottom: var(--space-8);
}
.api-ns-groups .api-section-title { margin-block: 0; }
.api-section-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-1);
  margin-bottom: var(--space-4);
  margin-top: var(--space-12);
}
.param-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
  margin-bottom: var(--space-6);

  th {
    text-align: left;
    font-weight: var(--weight-medium);
    color: var(--text-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-default);
  }

  td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-1);
  }

  .type {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent-text);
  }
}

/* The right column narrows first, then folds; the sidebar follows. */
@media (width <= 1440px) {
  .api-shell { grid-template-columns: var(--layout-sidebar-width-compact) minmax(0, 1fr) var(--layout-rail-width-compact); }
}
@media (width <= 900px) {
  .api-shell { grid-template-columns: var(--layout-sidebar-width-compact) minmax(0, 1fr); }
  .api-toc-col { display: none; }
}
@media (width <= 768px) {
  .api-shell { grid-template-columns: 1fr; }
  .api-sidebar { display: none; }
  .api-stats { gap: var(--space-6); }
}
}