/*
 * API-reference-only styles (/api): the sidebar layout, the aligned
 * reference tables and the example blocks. Shared page chrome (tokens,
 * header, code blocks, placeholders) lives in docs/site.css.
 */

/* The reference renders from docs/data.js; hold space so nothing leaps */
#sections:empty { min-height: 100vh; }
#nav:empty      { min-height: 50vh; }

html { scroll-padding-top: calc(var(--header-h) + 16px); }

body { font-size: 15.5px; }

/* The sidebar toggle (a jelly-button) only exists on narrow screens */
#navToggle { display: none; }

/* ============================ Layout ============================ */
.layout {
  display:               grid;
  grid-template-columns: 240px minmax(0, 1fr);
  width:                 min(1360px, 100%);
  margin-inline:         auto;
}

.sidebar {
  position:          sticky;
  top:               var(--header-h);
  height:            calc(100vh - var(--header-h));
  height:            calc(100dvh - var(--header-h));
  overflow-y:        auto;
  padding:           22px 18px 40px;
  border-inline-end: 1px solid var(--line);
}

.nav-group { margin-block-end: 18px; }
.nav-title {
  margin:         0 0 6px;
  font:           660 11px/1 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color:          var(--muted);
}
.nav-group a {
  display:         block;
  padding:         5px 10px;
  border-radius:   8px;
  font:            500 13.5px/1.4 var(--body);
  color:           var(--muted);
  text-decoration: none;
}
.nav-group a:hover  { color: var(--text); background: var(--field); }
.nav-group a.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* ============================ Sections ============================ */
main { min-width: 0; }

.intro {
  padding:       clamp(34px, 5vw, 60px) clamp(20px, 4vw, 56px) clamp(22px, 3vw, 36px);
  border-bottom: 1px solid var(--line);
}
.intro h1 {
  margin: 0;
  font:   680 clamp(30px, 4vw, 44px)/1.1 var(--display);
  letter-spacing: -0.02em;
}
.intro p { max-width: 64ch; color: var(--muted); margin: 12px 0 0; }
.intro a { color: var(--accent); }

.component {
  padding:       clamp(34px, 4.5vw, 56px) clamp(20px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
}

.component-head .kicker {
  margin:         0 0 8px;
  font:           660 11px/1 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color:          var(--accent);
}
.component-head h2 {
  margin: 0;
  font:   650 clamp(24px, 2.6vw, 32px)/1.1 var(--display);
  letter-spacing: -0.02em;
}
.component-head .summary     { margin: 10px 0 0; max-width: 68ch; color: var(--muted); }
.component-head .description { margin: 8px 0 0; max-width: 72ch; color: var(--muted); font-size: 14px; }
.showcase-link {
  display:         inline-block;
  margin-top:      10px;
  font:            600 13.5px var(--body);
  color:           var(--accent);
  text-decoration: none;
}
.showcase-link:hover { text-decoration: underline; }

.api-group { margin-top: 24px; }
.api-group h3 {
  margin:         0 0 10px;
  font:           660 11.5px/1 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color:          var(--muted);
}

/* Aligned reference tables: fixed layout + shared column widths (set in
   docs/api/index.js) so every table on the page sits on one vertical grid */
.table-scroll {
  overflow-x:    auto;
  border:        1px solid var(--line);
  border-radius: 12px;
}

table {
  width:           100%;
  min-width:       560px;
  border-collapse: collapse;
  table-layout:    fixed;
  font-size:       13.5px;
}
th, td {
  padding:        9px 14px;
  text-align:     start;
  border-bottom:  1px solid var(--line);
  vertical-align: top;
  overflow-wrap:  break-word;
}
tr:last-child td { border-bottom: 0; }
th {
  background:     var(--field);
  font:           620 11.5px/1.4 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color:          var(--muted);
}
td { color: var(--muted); }
td code { color: var(--text); }

.example    { margin-top: 24px; }
.example h4 { margin: 0 0 10px; font: 620 14.5px/1.3 var(--display); }

footer {
  padding: 40px clamp(20px, 4vw, 56px) 70px;
}

/* ============================ Mobile ============================ */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }

  #navToggle { display: inline-block; }

  .sidebar {
    position:           fixed;
    inset-block:        var(--header-h) 0;
    inset-inline-start: 0;
    z-index:            40;
    width:              min(300px, 84vw);
    background:         var(--bg);
    transform:          translateX(-104%);
    transition:         transform 0.22s ease;
  }
  .sidebar.open { transform: none; }

  [dir="rtl"] .sidebar { transform: translateX(104%); }
  [dir="rtl"] .sidebar.open { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-jelly-motion="no-preference"]) .sidebar { transition: none; }
}

:root[data-jelly-motion="reduce"] .sidebar { transition: none; }