/*
 * docs.css — layout and components for the /docs/ documentation tree only.
 * Loaded in addition to css/base.css, css/pricing.css and css/components.css
 * (tokens, header, footer, buttons — all shared; together they are the
 * site's former single site.css, split to stay under the 600-line
 * file-size limit). Kept as its own file rather than growing that shared
 * CSS further: this section has its own sidebar/breadcrumb/search/
 * definition-list vocabulary that no other page uses.
 *
 * Uses the same tokens as the rest of the site (css/tokens.css) — no new
 * colors, no new type scale.
 */

/* ---- Shell: sidebar + content ---- */
.docs-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
  padding-block: var(--space-6) var(--space-8);
}

.docs-sidebar-wrap {
  position: sticky;
  top: calc(64px + var(--space-5));
  max-height: calc(100vh - 64px - var(--space-6));
  overflow-y: auto;
}

.docs-sidebar__group {
  margin-block-end: var(--space-5);
}

.docs-sidebar__group-label {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--ink-muted);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-2);
}

.docs-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.docs-sidebar__list a {
  display: block;
  padding: 6px var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--ink-secondary);
  text-decoration: none;
  font-size: var(--text-body);
  line-height: var(--leading-snug);
}

.docs-sidebar__list a:hover {
  color: var(--ink);
  background: var(--surface-sunken);
}

.docs-sidebar__list a[aria-current='page'] {
  color: var(--accent);
  background: var(--accent-tint);
  font-weight: var(--weight-semibold);
}

/* No collapse mechanism: the sidebar is a plain, always-present <nav>. A
   <details> disclosure was considered for narrow viewports, but a details
   element's content is hidden from assistive tech whenever its native
   `open` state is false — regardless of a CSS override forcing it visually
   open on desktop — so a CSS-only "open on desktop, closed on mobile"
   disclosure would read as collapsed to screen readers even where sighted
   users see it expanded. Simpler and fully accessible: let it stack above
   the content on narrow screens instead (see the @media block below). */

/* ---- Breadcrumbs ---- */
.docs-breadcrumbs {
  font-size: var(--text-caption);
  color: var(--ink-muted);
  margin: 0 0 var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.docs-breadcrumbs a {
  color: var(--ink-secondary);
  text-decoration: none;
}

.docs-breadcrumbs a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.docs-breadcrumbs__sep {
  color: var(--ink-muted);
}

.docs-breadcrumbs__current {
  color: var(--ink);
  font-weight: var(--weight-medium);
}

/* ---- Search ---- */
.docs-search {
  position: relative;
  margin-block-end: var(--space-5);
}

.docs-search__field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: var(--hairline) solid var(--rule-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: var(--space-2) var(--space-3);
}

.docs-search__field svg {
  width: 16px;
  height: 16px;
  color: var(--ink-muted);
  flex: none;
}

.docs-search__input {
  border: none;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--text-body);
  width: 100%;
}

.docs-search__input::placeholder {
  color: var(--ink-muted);
}

.docs-search__results {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 360px;
  overflow-y: auto;
  padding: var(--space-2);
  display: none;
}

.docs-search__results.is-open {
  display: block;
}

.docs-search__result {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
}

.docs-search__result:hover,
.docs-search__result.is-active {
  background: var(--surface-sunken);
}

.docs-search__result-title {
  display: block;
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
}

.docs-search__result-context {
  display: block;
  color: var(--ink-secondary);
  font-size: var(--text-caption);
  margin-block-start: 2px;
}

.docs-search__empty {
  padding: var(--space-3);
  color: var(--ink-muted);
  font-size: var(--text-caption);
}

.docs-search__hint {
  font-size: var(--text-caption);
  color: var(--ink-muted);
  margin: var(--space-2) 0 0;
}

/* No-JS: the search box is decorative; say so plainly rather than showing a
   box that silently does nothing. Hidden once js/docs-search.js runs. */
.docs-search__noscript {
  font-size: var(--text-caption);
  color: var(--ink-muted);
  margin: var(--space-2) 0 0;
}

.js .docs-search__noscript {
  display: none;
}

/* ---- Docs content ---- */
.docs-content {
  min-width: 0;
}

.docs-content .lede {
  max-width: none;
}

.docs-content h2 {
  margin-block-start: var(--space-7);
  scroll-margin-top: calc(64px + var(--space-4));
}

.docs-content h2:first-of-type {
  margin-block-start: 0;
}

.docs-content h3 {
  margin-block-start: var(--space-6);
  scroll-margin-top: calc(64px + var(--space-4));
}

.docs-content table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--space-4);
  font-size: var(--text-body);
  background: var(--surface);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.docs-content th,
.docs-content td {
  text-align: left;
  padding: var(--space-3);
  border-bottom: var(--hairline) solid var(--rule);
  vertical-align: top;
}

.docs-content tr:last-child td {
  border-bottom: none;
}

.docs-content th {
  background: var(--surface-sunken);
  font-weight: var(--weight-semibold);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--ink-secondary);
}

/* "How we calculate it" definitions */
.calc-list {
  margin: var(--space-4) 0;
  padding: 0;
  border-inline-start: 3px solid var(--accent-tint);
}

.calc-list dt {
  font-weight: var(--weight-semibold);
  color: var(--ink);
  padding: var(--space-3) 0 2px var(--space-4);
}

.calc-list dd {
  margin: 0;
  padding: 0 0 var(--space-2) var(--space-4);
  color: var(--ink-secondary);
}

.calc-list code,
.docs-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--surface-sunken);
  border-radius: 4px;
  padding: 1px 5px;
}

/* ---- Callouts: tip / limit / note ---- */
.callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-block: var(--space-5);
  background: var(--surface);
}

.callout__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-md);
}

.callout__icon svg {
  width: 15px;
  height: 15px;
}

.callout__body {
  min-width: 0;
}

.callout__label {
  display: block;
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  font-weight: var(--weight-bold);
  margin-block-end: var(--space-1);
}

.callout__body p {
  margin: 0;
  color: var(--ink);
}

.callout__body p + p {
  margin-block-start: var(--space-2);
}

.callout__body ul,
.callout__body ol {
  margin: var(--space-2) 0 0;
  padding-inline-start: 1.2em;
}

.callout--tip {
  border-color: var(--rule);
  background: var(--accent-tint);
}

.callout--tip .callout__icon {
  background: var(--accent-fill);
  color: var(--accent-on);
}

.callout--tip .callout__label {
  color: var(--accent);
}

.callout--limit {
  border-color: var(--warning-mark);
  background: var(--warning-tint);
}

.callout--limit .callout__icon {
  background: var(--warning-mark);
  color: var(--warning-tint);
}

.callout--limit .callout__label {
  color: var(--warning-text);
}

.callout--note {
  border-color: var(--rule);
  background: var(--surface-sunken);
}

.callout--note .callout__icon {
  background: var(--rule-strong);
  color: var(--ink);
}

.callout--note .callout__label {
  color: var(--ink-secondary);
}

/* ---- Screenshot slot (reserved space; no file yet) ---- */
.screenshot-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  color: var(--ink-muted);
  padding: var(--space-7) var(--space-5);
  margin-block: var(--space-5);
  font-size: var(--text-caption);
}

.screenshot-slot svg {
  width: 28px;
  height: 28px;
  color: var(--ink-muted);
}

.screenshot-slot code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--surface);
  border: var(--hairline) solid var(--rule);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--ink-secondary);
}

/* ---- Docs screenshot (real image, once captured) ---- */
.docs-screenshot {
  display: block;
  width: 100%;
  height: auto;
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-block: var(--space-5);
  background: var(--surface);
}

/* ---- Prev / next ---- */
.docs-prevnext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-6);
  border-top: var(--hairline) solid var(--rule);
}

.docs-prevnext__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.docs-prevnext__link:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.docs-prevnext__link--next {
  text-align: right;
  align-items: flex-end;
  grid-column: 2;
}

.docs-prevnext__eyebrow {
  font-size: var(--text-caption);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
}

.docs-prevnext__title {
  font-weight: var(--weight-semibold);
}

/* ---- Docs index page: the tree as cards ---- */
.docs-tree-group {
  margin-block-end: var(--space-6);
}

.docs-tree-group h3 {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--ink-muted);
  margin-block-end: var(--space-3);
}

.docs-tree-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

.docs-tree-list a {
  display: block;
  padding: var(--space-3) var(--space-4);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
  font-weight: var(--weight-medium);
  transition: box-shadow var(--duration) var(--ease);
}

.docs-tree-list a:hover {
  box-shadow: var(--shadow-sm);
  color: var(--accent);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .docs-shell {
    grid-template-columns: 1fr;
  }

  .docs-sidebar-wrap {
    position: static;
    max-height: none;
    overflow: visible;
    margin-block-end: var(--space-6);
    padding-block-end: var(--space-5);
    border-bottom: var(--hairline) solid var(--rule);
  }

  .docs-prevnext {
    grid-template-columns: 1fr;
  }

  .docs-prevnext__link--next {
    grid-column: 1;
    text-align: left;
    align-items: flex-start;
  }
}