/* Hyke Studio — The documentation home and quick start (site-content-docs/docs-home__c).
 * Built from the approved design's own styles: the brand tokens live in tokens.css alone, the shared bar and
 * footer in site.css, and the design canvas's review aid and theme hooks are left out — the documentation
 * starts Light, and goes dark only by the visitor's own choice (Decisions 278, 387). The four example forms switch with a radio-and-label group, no script; the one
 * script on the page is copy-button.js, which puts a Copy control's value on the clipboard.
 * Owning section(s): §38 */

/* Variables the approved pages declare beyond the brand package's tokens.css. */
:root {
  --hs-card-border: rgba(26,25,23,0.12);
  --hs-hairline: rgba(26,25,23,0.10);
}
html[data-theme="dark"] {
  --hs-amber-ink: #E09A12;
  --hs-card-border: rgba(251,248,239,0.14);
  --hs-hairline: rgba(251,248,239,0.10);
}

/* Split layout: three rows in the left column (the narrative, the reliability note, the full-and-basic block) and the
   code rail in the right column spanning all three. Below 980 the four become one column in reading order:
   01 → the rail (02, 03, the examples) → reliability → full-and-basic. */
.docs-split { display: grid; grid-template-columns: 1fr 420px; gap: 36px 48px; padding: 36px 0 40px; align-items: start; }
.docs-narrative { grid-column: 1; grid-row: 1; }
.docs-reliability { grid-column: 1; grid-row: 2; }
.plans-block { grid-column: 1; grid-row: 3; }
.docs-rail { grid-column: 2; grid-row: 1 / span 3; }
@media (max-width: 980px) {
  .docs-split { grid-template-columns: 1fr; }
  .docs-narrative, .docs-reliability, .plans-block, .docs-rail { grid-column: 1; grid-row: auto; }
  .docs-narrative { order: 1; } .docs-rail { order: 2; } .docs-reliability { order: 3; } .plans-block { order: 4; }
}

.docs-narrative { display: flex; flex-direction: column; gap: 36px; min-width: 0; overflow: hidden; }
.docs-kicker { font-family: var(--hs-font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; color: var(--hs-amber-ink); }
.docs-kicker--floor { color: var(--hs-ink-body); }
.docs-hero { display: flex; flex-direction: column; gap: 14px; }
.docs-title { margin: 0; font-size: clamp(28px, 4.4vw, 42px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.08; color: var(--hs-ink); }
.docs-subtitle { margin: 0; font-size: 15px; line-height: 1.6; color: var(--hs-ink-body); max-width: 560px; }
.docs-section-heading { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; color: var(--hs-ink); }
/* The brand sentence is the documentation's first line (Decision 157). */
.docs-brand-line { margin: 6px 0 4px; max-width: 62ch; font-size: 15px; line-height: 1.55; color: var(--hs-ink-body); }

.qs-step-head { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--hs-hairline); padding-bottom: 8px; margin-bottom: 12px; }
.qs-step-number { font-family: var(--hs-font-mono); font-size: 11px; font-weight: 600; color: var(--hs-amber-ink); }
.qs-step-heading { font-family: var(--hs-font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--hs-ink); }
.qs-step-text { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: var(--hs-ink-body); max-width: 520px; }
.qs-step-cta { margin-top: 4px; }
.docs-narrative-note { margin: 0; font-size: 14px; line-height: 1.6; color: var(--hs-ink-body); max-width: 520px; }

.docs-reliability { display: flex; flex-direction: column; gap: 10px; }
.docs-reliability-text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--hs-ink-body); max-width: 520px; }
.docs-reliability-text a { color: var(--hs-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; }
.docs-reliability-text a:hover { text-decoration-color: var(--hs-amber); }

/* The rail is pinned 7px under the site's bar, with its own scroll only when a short window cannot hold it. The bar's
   height is the one js/nav-menu.js measures (--site-bar-height): it wraps onto a second row between 640px and about
   1,010px, so a fixed offset would slide the rail under it; without the script it is the one-row 77px. At the page's
   last scroll position the rail must fit between that line and the grid's 152px foot, so its height is capped at the
   window's height minus the bar, the gap and the foot (at 1,440×900 the whole rail shows; at 1,280×720 it scrolls
   inside its card). */
.docs-rail { position: sticky; top: calc(var(--site-bar-height, 77px) + 7px); align-self: start; max-height: calc(100vh - var(--site-bar-height, 77px) - 159px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; display: flex; flex-direction: column; gap: 22px; background: var(--hs-surface); border: 1px solid var(--hs-card-border); border-radius: var(--hs-r-card); box-shadow: var(--hs-lift); padding: 22px; min-width: 0; }
@media (max-width: 980px) { .docs-rail { position: static; max-height: none; overflow: hidden; } }
.rail_block { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.rail_block + .rail_block { border-top: 1px solid var(--hs-hairline); padding-top: 20px; }
.rail_mono-heading { font-family: var(--hs-font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; color: var(--hs-ink-muted); text-transform: uppercase; margin: 0; }
.rail_step-head { display: flex; align-items: baseline; gap: 10px; }

.qs-address-field { display: flex; align-items: center; gap: 8px; background: var(--hs-surface-sunk); border: 1px solid var(--hs-card-border); border-radius: var(--hs-r-field); padding: 10px 12px; overflow: hidden; }
/* The address wraps inside its box instead of being cut with "…". */
.qs-address-code { font-family: var(--hs-font-mono); font-size: 11px; line-height: 1.5; color: var(--hs-ink-body); white-space: normal; overflow-wrap: anywhere; flex: 1 1 auto; min-width: 0; }
.copy-btn { flex-shrink: 0; font-family: var(--hs-font-mono); font-size: 10.5px; font-weight: 600; color: var(--hs-ink); background: var(--hs-surface); border: 1px solid var(--hs-card-border); border-radius: var(--hs-r-chip); height: 28px; padding: 0 10px; cursor: pointer; }
.copy-btn:hover, .copy-btn[data-copied="true"] { border-color: var(--hs-amber); }

.rail_result-card { display: flex; flex-direction: column; gap: 10px; }
.qs-result-stage { display: flex; align-items: center; justify-content: center; min-height: 96px; border-radius: var(--hs-r-tile);
  background-color: #EDE9E0;
  background-image: radial-gradient(130% 78% at 50% 28%, rgba(255,253,247,0.98) 0%, rgba(255,253,247,0.35) 46%, rgba(255,253,247,0) 68%), linear-gradient(180deg, #F3F0E9 0%, #EFEBE3 48%, #E6E1D5 60%, #D2CCBD 100%);
}
html[data-theme="dark"] .qs-result-stage {
  background-color: #1B1915;
  background-image: radial-gradient(128% 76% at 50% 26%, rgba(102,92,70,0.55) 0%, rgba(102,92,70,0.16) 44%, rgba(102,92,70,0) 66%), linear-gradient(180deg, #121110 0%, #1B1915 44%, #262319 58%, #0D0C0A 100%);
}
.qs-result-img { display: block; aspect-ratio: 3 / 2; height: auto; object-fit: contain; object-position: center; }
/* The vehicle sits on the surface: a tight shadow for contact, a wide soft one for the light in the room. */
.qs-result-img { filter: drop-shadow(0 8px 6px rgba(0,0,0,.34)) drop-shadow(0 20px 16px rgba(0,0,0,.22)); }
.qs-result-img--car { width: min(100%, 220px); }
.qs-result-img--other-kind { width: min(100%, 200px); }
.qs-result-facts { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; }
.qs-result-facts div { display: flex; flex-direction: column; gap: 1px; }
.qs-result-facts dt { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.1em; color: var(--hs-ink-muted); text-transform: uppercase; margin: 0; }
.qs-result-facts dd { font-family: var(--hs-font-mono); font-size: 11.5px; color: var(--hs-ink); margin: 0; }
.qs-disclosure { margin: 0; font-size: 10.5px; line-height: 1.5; color: var(--hs-ink-muted); }

/* The four ways to call it — switched by a radio-and-label group, no script anywhere. */
.docs-examples .ex-tabbar { display: flex; gap: 5px; flex-wrap: wrap; }
.docs-examples .ex-tab { display: inline-flex; align-items: center; font-family: var(--hs-font-mono); font-size: 11.5px; font-weight: 500; color: var(--hs-ink-body); background: transparent; border: none; border-radius: var(--hs-r-field); height: 30px; padding: 0 11px; cursor: pointer; }
.docs-examples .ex-panel-wrap { position: relative; }
.docs-examples .ex-panel { margin: 0; background: var(--hs-surface-sunk); border: 1px solid var(--hs-card-border); border-radius: var(--hs-r-field); padding: 0 76px 0 16px; max-height: 0; overflow: hidden; border-top-width: 0; border-bottom-width: 0; }
/* A long line wraps inside the panel instead of running off to the right. */
.docs-examples .ex-panel code { font-family: var(--hs-font-mono); font-size: 11px; line-height: 1.6; color: var(--hs-ink-body); white-space: pre-wrap; overflow-wrap: anywhere; display: block; overflow: auto; max-height: 192px; }
.docs-examples .ex-copy-btn { position: absolute; top: 10px; right: 10px; }
.docs-examples .ex-radio { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; padding: 0; border: 0; pointer-events: none; }
.ex-radio--webpage:checked ~ .ex-tabbar .ex-tab--webpage,
.ex-radio--curl:checked ~ .ex-tabbar .ex-tab--curl,
.ex-radio--js:checked ~ .ex-tabbar .ex-tab--js,
.ex-radio--python:checked ~ .ex-tabbar .ex-tab--python { background: var(--hs-action); color: var(--hs-on-action); font-weight: 600; }
.ex-radio--webpage:checked ~ .ex-panel-wrap .ex-panel--webpage,
.ex-radio--curl:checked ~ .ex-panel-wrap .ex-panel--curl,
.ex-radio--js:checked ~ .ex-panel-wrap .ex-panel--js,
.ex-radio--python:checked ~ .ex-panel-wrap .ex-panel--python { max-height: none; padding-top: 14px; padding-bottom: 14px; border-top-width: 1px; border-bottom-width: 1px; }
.ex-radio--webpage:focus-visible ~ .ex-tabbar .ex-tab--webpage,
.ex-radio--curl:focus-visible ~ .ex-tabbar .ex-tab--curl,
.ex-radio--js:focus-visible ~ .ex-tabbar .ex-tab--js,
.ex-radio--python:focus-visible ~ .ex-tabbar .ex-tab--python { outline: 2px solid var(--hs-amber); outline-offset: 2px; }

/* Full and basic requests — the whole explanation, basic requests with the same care as the full ones. */
.plans-block { margin-top: 36px; background: var(--hs-surface); border: 1px solid var(--hs-card-border); border-radius: var(--hs-r-card); padding: 22px 24px 20px; container-type: inline-size; }
.plans-kicker { font-family: var(--hs-font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; color: var(--hs-amber-ink); display: block; margin-bottom: 8px; }
.plans-heading { margin: 0 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -0.03em; color: var(--hs-ink); }
.plans-intro { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--hs-ink-body); max-width: 720px; }
.plans-intro strong { color: var(--hs-ink); font-weight: 600; }
.plans-table-wrap { overflow-x: auto; }
/* The table is at least 560 wide; where the block is narrower the table scrolls sideways and a line under it says so.
   Where the whole table fits the line is collapsed — never display: none. */
.plans-scroll-hint { margin: 0; max-height: 0; overflow: hidden; visibility: hidden; font-family: var(--hs-font-mono); font-size: 10.5px; line-height: 1.6; color: var(--hs-ink-muted); }
@container (max-width: 559.98px) { .plans-scroll-hint { max-height: none; visibility: visible; margin-top: 8px; } }
.plans-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.plans-table th, .plans-table td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--hs-hairline); font-size: 13.5px; color: var(--hs-ink-body); vertical-align: top; }
.plans-table thead th { font-family: var(--hs-font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--hs-ink-muted); text-transform: uppercase; font-weight: 600; }
.plans-table tbody th { font-weight: 600; color: var(--hs-ink); white-space: nowrap; padding-right: 20px; }
.plans-table tbody tr:last-child th, .plans-table tbody tr:last-child td { border-bottom: none; }
.plans-table .plans-col-basic { color: var(--hs-ink); font-weight: 600; }
.plans-note { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--hs-ink-muted); }
main [id] { scroll-margin-top: calc(var(--site-bar-height, 77px) + 15px); }