/* ==========================================================================
   Voiceland AI documentation shell
   Loaded by the generated /docs pages only, AFTER site.css: everything here
   builds on the same tokens, radii and rhythm. Three parts: the docs top bar
   (which replaces the marketing header on docs pages), the three column
   layout (sidebar, article, "On this page" rail), and the pieces the shell
   scripts need (search overlay, theme toggle, copy button) plus the table
   and method-badge styles the API reference tab renders into.
   Breakpoints: 48em (tablet), 64em (desktop, sidebar appears), 78em (rail).
   ========================================================================== */

/* ------------------------------------------------------- method badges -- */
/* The one place the docs need hues the site palette does not carry: the
   HTTP method of a reference endpoint. Same three-block pattern as the site
   tokens: light default, media dark for "no choice", data-theme overrides
   for an explicit one. */

:root {
  --method-get:         #0369a1;
  --method-get-wash:    #e0f2fe;
  --method-post:        #15803d;
  --method-post-wash:   #dcfce7;
  --method-put:         #92600a;
  --method-put-wash:    #fef3c7;
  --method-delete:      #b3261e;
  --method-delete-wash: #fbe9e7;
}

@media (prefers-color-scheme: dark) {
  :root {
    --method-get:         #7dd3fc;
    --method-get-wash:    #0d3247;
    --method-post:        #86efac;
    --method-post-wash:   #123322;
    --method-put:         #fcd34d;
    --method-put-wash:    #3a2e0e;
    --method-delete:      #ffb4ab;
    --method-delete-wash: #3a1712;
  }
}

html[data-theme="dark"] {
  --method-get:         #7dd3fc;
  --method-get-wash:    #0d3247;
  --method-post:        #86efac;
  --method-post-wash:   #123322;
  --method-put:         #fcd34d;
  --method-put-wash:    #3a2e0e;
  --method-delete:      #ffb4ab;
  --method-delete-wash: #3a1712;
}

html[data-theme="light"] {
  --method-get:         #0369a1;
  --method-get-wash:    #e0f2fe;
  --method-post:        #15803d;
  --method-post-wash:   #dcfce7;
  --method-put:         #92600a;
  --method-put-wash:    #fef3c7;
  --method-delete:      #b3261e;
  --method-delete-wash: #fbe9e7;
}

/* ------------------------------------------------------------- top bar -- */
/* Same skeleton as .site-header: static on phones (the tab row wraps to a
   second line there), sticky from 48em up. */

.docs-topbar {
  border-bottom: 1px solid var(--hairline);
  background: var(--header-bg);
  z-index: 50;
}

.docs-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  padding-block: var(--sp-3);
}

.docs-topbar__tools {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-inline-start: auto;
}

.docs-tabs {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  order: 3;
  width: 100%;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--hairline);
}

.docs-tabs a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--t--1);
  font-weight: var(--fw-medium);
  padding-block: var(--sp-1);
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.docs-tabs a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.docs-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* The search opener reads as a field, not as a button: muted text, hairline
   box, the shortcut hint on the right. */
.docs-search-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--muted);
  font-size: var(--t--2);
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.docs-search-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.docs-search-btn .icon { flex: none; }
.docs-search-btn__text { display: none; }

.docs-search-btn kbd,
.docs-search-overlay kbd {
  display: none;
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.4;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0 0.35rem;
  white-space: nowrap;
}

.docs-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.docs-theme:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-wash); }

/* The icon names the theme a click switches TO: the moon on a light page,
   the sun on a dark one. Driven by the same signals as the tokens. */
.docs-theme__sun { display: none; }
@media (prefers-color-scheme: dark) {
  .docs-theme__sun { display: block; }
  .docs-theme__moon { display: none; }
}
html[data-theme="dark"] .docs-theme__sun { display: block; }
html[data-theme="dark"] .docs-theme__moon { display: none; }
html[data-theme="light"] .docs-theme__sun { display: none; }
html[data-theme="light"] .docs-theme__moon { display: block; }

/* -------------------------------------------------------- three columns -- */

.docs-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  padding-block: var(--sp-5) var(--sp-8);
}

.docs-article { min-width: 0; }

.docs-article__head {
  border-bottom: 1px solid var(--hairline);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.docs-article__head h1 { font-size: var(--t-4); }
.docs-article__head .lede { margin-top: var(--sp-3); }

/* The "last updated" line, under the article's lede. Quiet, because it is a
   provenance note rather than part of the article. */
.docs-updated { margin-top: var(--sp-3); color: var(--muted); font-size: var(--t--2); }
.docs-updated time { font-variant-numeric: tabular-nums; }
.docs-article__tools { margin-top: var(--sp-4); }

.docs-copy {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-soft);
  font-size: var(--t--2);
  font-weight: var(--fw-medium);
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.docs-copy:hover { border-color: var(--ink); color: var(--ink); background: var(--surface); }
.docs-copy .icon { flex: none; }

/* Heading hash links: invisible until the heading is hovered or the link is
   focused, so the prose stays prose. */
.docs-hash {
  margin-inline-start: 0.35em;
  text-decoration: none;
  color: var(--faint);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}
h2:hover .docs-hash,
h3:hover .docs-hash,
h4:hover .docs-hash,
h5:hover .docs-hash,
h6:hover .docs-hash,
.docs-hash:focus-visible { opacity: 1; }
.docs-hash:hover { color: var(--accent-ink); }

/* A rail or sidebar jump must not land the heading under the sticky bar. */
.docs-prose h2[id],
.docs-prose h3[id],
.docs-prose h4[id],
.docs-area h2[id] { scroll-margin-top: 5rem; }

/* ------------------------------------------------------------- sidebar -- */
/* One markup, two behaviours: a closed disclosure on phones, a plain sticky
   column from 64em up (assets/js/docs.js opens the disclosure there and the
   summary row disappears; without JS the summary stays clickable). */

.docs-sidebar { min-width: 0; }

.docs-sidebar__d {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
}
.docs-sidebar__d > summary {
  cursor: pointer;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--t--1);
  font-weight: var(--fw-medium);
  color: var(--ink-soft);
}
.docs-sidebar__d[open] > summary { border-bottom: 1px solid var(--hairline); }

.docs-sidenav { padding: var(--sp-4); }

.docs-sidenav__area {
  font-size: var(--t--2);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-2);
}
.docs-sidenav__area + ul { margin-bottom: var(--sp-5); }
.docs-sidenav > ul:last-child { margin-bottom: 0; }

.docs-sidenav ul { display: grid; gap: 2px; }
.docs-sidenav a {
  display: block;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--t--1);
  padding: 0.3rem var(--sp-3);
  border-radius: var(--radius-sm);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.docs-sidenav a:hover { color: var(--ink); background: var(--surface-2); }
.docs-sidenav a[aria-current="page"] {
  color: var(--accent-ink);
  background: var(--accent-wash);
  font-weight: var(--fw-medium);
}

/* ---------------------------------------------------------------- rail -- */

.docs-rail { display: none; }

.docs-rail__title {
  font-size: var(--t--2);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-3);
}
.docs-rail ul {
  display: grid;
  gap: var(--sp-2);
  border-inline-start: 1px solid var(--hairline);
}
.docs-rail li { padding-inline-start: var(--sp-4); }
.docs-rail__sub { padding-inline-start: var(--sp-6); }
.docs-rail a {
  color: var(--muted);
  text-decoration: none;
  font-size: var(--t--1);
}
.docs-rail a:hover { color: var(--accent-ink); }

/* ------------------------------------------------------- search overlay -- */
/* Markup is created by assets/js/docs.js on first open; the pages themselves
   stay free of controls. */

.docs-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20, 18, 26, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh var(--sp-4) var(--sp-4);
}

.docs-search-panel {
  width: 100%;
  max-width: 38rem;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.docs-search-panel input[type="search"] {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: var(--t-0);
  padding: var(--sp-4) var(--sp-5);
}
.docs-search-panel input[type="search"]:focus { outline: none; }

.docs-search-results {
  max-height: min(50vh, 26rem);
  overflow-y: auto;
  padding: var(--sp-2);
}

.docs-search-group {
  font-size: var(--t--2);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--sp-3) var(--sp-3) var(--sp-1);
}

.docs-search-results a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--t--1);
  font-weight: var(--fw-medium);
}
.docs-search-results a .docs-search-sum {
  display: block;
  color: var(--muted);
  font-weight: var(--fw-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.docs-search-results a:hover,
.docs-search-results a[aria-selected="true"] {
  background: var(--accent-wash);
  color: var(--accent-ink);
}

.docs-search-empty {
  padding: var(--sp-5);
  color: var(--muted);
  font-size: var(--t--1);
}

/* ------------------------------------------------- reference primitives -- */
/* Used by the reference tab; defined with the shell so every tab shares one
   visual language. .docs-table is the scroll container: the table inside may
   be as wide as it needs, the page never scrolls sideways. */

.docs-table {
  overflow-x: auto;
  contain: paint;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  -webkit-overflow-scrolling: touch;
}
.docs-table table {
  width: 100%;
  min-width: 32rem;
  font-size: var(--t--1);
}
.docs-table th,
.docs-table td {
  text-align: start;
  vertical-align: top;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--hairline);
}
.docs-table thead th {
  background: var(--surface);
  font-size: var(--t--2);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.docs-table tbody tr:last-child th,
.docs-table tbody tr:last-child td { border-bottom: 0; }
.docs-table code { font-family: var(--mono); font-size: 0.9em; }

.docs-method {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  line-height: 1.6;
  border-radius: var(--radius-sm);
  padding: 0 0.45rem;
  white-space: nowrap;
}
.docs-method--get    { color: var(--method-get);    background: var(--method-get-wash); }
.docs-method--post   { color: var(--method-post);   background: var(--method-post-wash); }
.docs-method--put,
.docs-method--patch  { color: var(--method-put);    background: var(--method-put-wash); }
.docs-method--delete { color: var(--method-delete); background: var(--method-delete-wash); }

.docs-endpoint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  font-family: var(--mono);
  font-size: var(--t--1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--sp-3) var(--sp-4);
}

/* ------------------------------------------------- changelog primitives -- */
/* Used by the changelog tab: date blocks with the date on a left rail and
   the entries as a list, each opening with a category chip. Same pill
   language as the site's .badge; the hues reuse the method palette above,
   so both themes are already handled. Security is the one chip that must
   not be skimmed past: it keeps a full-strength border on its wash. */

.cl-rss {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--t--2);
  font-weight: var(--fw-medium);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.cl-rss:hover { border-color: var(--ink); color: var(--ink); background: var(--surface); }
.cl-rss .icon { flex: none; }

.cl-days { display: grid; }

.cl-day {
  display: grid;
  gap: var(--sp-3) var(--sp-6);
  align-items: start;
  padding-block: var(--sp-5);
}
.cl-day + .cl-day { border-top: 1px solid var(--hairline); }
.cl-day[id] { scroll-margin-top: 5rem; }

.cl-day__date {
  font-size: var(--t--1);
  font-weight: var(--fw-medium);
  color: var(--ink-soft);
  white-space: nowrap;
}

.cl-day__list { display: grid; gap: var(--sp-4); }

.cl-item {
  display: grid;
  gap: var(--sp-2);
  justify-items: start;
}
.cl-item p { max-width: var(--measure); }

.cl-chip {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-size: var(--t--2);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  white-space: nowrap;
}
.cl-chip--new         { color: var(--method-post);   background: var(--method-post-wash); }
.cl-chip--improvement { color: var(--method-get);    background: var(--method-get-wash); }
.cl-chip--fix         { color: var(--method-put);    background: var(--method-put-wash); }
.cl-chip--security {
  color: var(--method-delete);
  background: var(--method-delete-wash);
  border-color: var(--method-delete);
  font-weight: var(--fw-bold);
}

/* --------------------------------------------------------- breakpoints -- */

@media (min-width: 48em) {
  .docs-topbar { position: sticky; top: 0; }
  @supports (backdrop-filter: blur(8px)) {
    .docs-topbar { backdrop-filter: saturate(150%) blur(8px); }
  }
  .docs-search-btn__text { display: inline; }
  .docs-search-btn kbd { display: inline-block; }

  /* The date takes the left rail of its block, ai-coustics style. */
  .cl-day { grid-template-columns: 10rem minmax(0, 1fr); }
}

@media (min-width: 64em) {
  .docs-topbar__inner { flex-wrap: nowrap; padding-block: var(--sp-3); }
  .docs-tabs {
    order: 0;
    width: auto;
    padding-top: 0;
    border-top: 0;
    /* No leading margin: the row starts with the tabs now that the brand
       lives in the main menu above. */
    white-space: nowrap;
  }

  .docs-shell {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--sp-7);
    padding-block: var(--sp-6) var(--sp-9);
  }

  .docs-sidebar__d {
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .docs-sidebar__d[open] > summary { display: none; }
  .docs-sidenav {
    padding: 0;
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    padding-inline-end: var(--sp-3);
    border-inline-end: 1px solid var(--hairline);
  }
}

@media (min-width: 78em) {
  .docs-shell { grid-template-columns: 15rem minmax(0, 1fr) 13rem; }
  .docs-rail {
    display: block;
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    align-self: start;
  }
}

/* ------------------------------------------------------------- page width -- */

/* Docs pages run 20% wider than the marketing pages: three columns need the
   room, and reference tables were wrapping at the site's 72rem. Scoped by
   loading: this sheet ships on docs pages only, so every .wrap on the page
   (top bar, shell, panels, footer) widens together and stays aligned. */
.wrap { max-width: calc(var(--wrap) * 1.2); }

/* --------------------------------------------------------- touch targets -- */

/* Same measurement, same reasoning as the marketing sheet: at 375px the docs
   tab row rendered at 34px, the sidebar entries at 34px and the search and
   theme controls under 44px. These are the controls a reader on a phone uses
   to move around the documentation, so they get the full target; the heading
   anchors stay small on purpose, since they are a hover affordance for
   copying a link rather than a navigation control.

   Only below 48em: on a pointer device 34px is comfortable and the extra
   height would stretch the sidebar past a screenful for no gain. */
@media (max-width: 63.99em), (pointer: coarse) {
  .docs-tabs a,
  .docs-sidenav a,
  .docs-sidebar__d > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .docs-search-btn,
  .docs-theme { min-height: 44px; min-width: 44px; }
  .docs-copy,
  .docs-pager__all { min-height: 44px; }
}