/* Documentation shares the product typography and palette.
   docs.html owns the .docs-article and .guide-* rules. uql-docs.html also loads this file but only uses
   .docs-page and the .reference-sidebar / .docs-callout light rules at the end.
   Docs are reference reading: no entrance and no scroll reveals (brief section 7). */

/* Docs base */
.docs-page{background:var(--paper);color:var(--paper-heading)}
.docs-article{max-width:800px}
.docs-article h1{font-size:clamp(2.5rem,1.5rem + 4vw,4.125rem);line-height:1.04;letter-spacing:var(--track-display);font-weight:400;margin:0 0 var(--s-5)}
.docs-article .eyebrow{color:var(--paper-muted)}
.docs-article .lead{font-size:var(--step-1);line-height:1.65;color:var(--paper-muted)}
.docs-article section{margin-top:var(--s-7);padding-top:var(--s-6);border-top:1px solid var(--dark-line);scroll-margin-top:var(--s-2)}
.docs-article h2{font-size:var(--step-3);letter-spacing:var(--track-h2);margin:0 0 var(--s-5)}
.docs-article h3{font-size:1.125rem;font-weight:600}
.docs-article p,.docs-article li{font-size:var(--step-0);line-height:1.7;color:var(--paper-text)}
.docs-article li{padding-left:6px;margin-bottom:var(--s-2)}
.docs-article figure{margin-inline:0}
.docs-article details{border-color:var(--dark-line)}
.docs-article details p{color:var(--paper-muted)}
/* Inline links in the prose: the shared quiet underline (styles.css), in the accent colour. */
.guide-article :is(p,li,td,.guide-note) a:not([class]){color:var(--green)}
.guide-note a:not([class]){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--green-40)}

/* Layout */
.guide-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:72px;padding-block:var(--s-8) 90px;align-items:start}
.guide-layout [hidden]{display:none!important}
.guide-article{min-width:0;max-width:850px}

/* Sidebar and scrollspy: the current topic gets ink colour and a 2px green bar (aria-current="location"). */
.guide-sidebar{position:sticky;top:calc(var(--header-h) + var(--s-6));max-height:calc(100vh - var(--header-h) - var(--s-7));overflow:auto;overscroll-behavior:contain;padding-right:var(--s-4);scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.guide-contents{border:0}
.guide-contents>summary{min-height:0;padding:0 0 var(--s-5);font:var(--label)/1.6 var(--mono);letter-spacing:var(--track-label);color:var(--paper-muted)}
.guide-contents>summary>span{font-size:1rem;color:var(--paper-muted)}
.guide-contents[open]>summary>span{transform:rotate(180deg)}
.guide-nav-group{margin:0 0 var(--s-5)}
.guide-nav-group h2{font-size:var(--step--1);font-weight:600;line-height:1.5;letter-spacing:0;margin:0 0 var(--s-2);color:var(--paper-heading)}
.guide-nav-group>a{display:flex;align-items:baseline;gap:var(--s-2);padding:6px 0 6px var(--s-3);border-left:2px solid transparent;font-size:var(--step--1);line-height:1.45;color:var(--paper-muted);transition:color var(--dur-in) var(--ease-ui),border-color var(--dur-in) var(--ease-ui)}
.guide-nav-group>a:hover{color:var(--paper-heading);border-left-color:var(--line-strong)}
.guide-nav-group>a[aria-current]{color:var(--paper-heading);border-left-color:var(--green)}
.nav-dev{flex:none;margin-left:auto;font:var(--label)/1.4 var(--mono);letter-spacing:var(--track-label);color:var(--paper-muted)}

/* Hero */
.guide-hero .lead{max-width:600px;margin-bottom:var(--s-5)}
.guide-meta{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);font:var(--step--1)/1.6 var(--mono);color:var(--paper-muted)}
.guide-version-note{display:flex;gap:var(--s-4);background:var(--paper-panel);border-radius:var(--radius-1);padding:var(--s-4) var(--s-5);margin:var(--s-6) 0}
.guide-version-note p{margin:0;max-width:68ch;font-size:.9375rem;line-height:1.7;color:var(--paper-muted)}
.version-mark{display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:50%;height:20px;width:20px;flex:none;font:var(--label) var(--mono);margin-top:2px;color:var(--paper-muted)}

/* Search: a "/" key hint inside the field, a live result count and an empty state that says what to do next. */
.guide-search-area{scroll-margin-top:var(--s-2)}
.guide-search-controls>label{font-size:var(--step--1);font-weight:600;display:block;margin-bottom:var(--s-2)}
.search-input-wrap{position:relative}
.search-input-wrap>span{position:absolute;left:16px;top:50%;translate:0 -52%;font-size:1.5rem;line-height:1;color:var(--paper-muted);pointer-events:none}
.search-input-wrap input{width:100%;min-height:52px;padding:13px 52px 13px 46px;border:1px solid var(--line-strong);border-radius:var(--radius-1);background:var(--paper-panel);color:var(--paper-heading);font:1rem var(--font)}
.search-input-wrap input::placeholder{color:var(--paper-muted);opacity:1}
.search-input-wrap kbd{position:absolute;right:14px;top:50%;translate:0 -50%;min-width:24px;text-align:center;font:var(--label)/1.6 var(--mono);border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:var(--radius-1);padding:0 6px;color:var(--paper-muted);background:var(--paper);pointer-events:none}
.search-input-wrap:focus-within kbd{display:none}
.guide-filter-row{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-3);font-size:var(--step--1);color:var(--paper-muted)}
.guide-filter-row select{min-height:44px;padding:8px 28px 8px 12px;background:var(--paper-panel);border:1px solid var(--line-strong);border-radius:var(--radius-1);color:var(--paper-heading);font:var(--step--1) var(--font);max-width:100%}
.guide-filter-row button{margin-left:auto;min-height:44px;padding:0;background:transparent;font-size:var(--step--1);color:var(--paper-muted);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;transition:color var(--dur-in) var(--ease-ui)}
.guide-filter-row button:hover{color:var(--paper-heading)}
.guide-article .guide-results-count{margin:var(--s-4) 0;font:var(--step--1)/1.6 var(--mono);color:var(--paper-muted)}
.guide-start-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.guide-article .guide-start-links>a{display:block;padding:var(--s-4);border:1px solid var(--dark-line);border-radius:var(--radius-1);background:var(--paper-panel);color:var(--paper-heading);font-size:.9375rem;font-weight:500;line-height:1.5;text-decoration:none}
.guide-article .guide-start-links>a:focus-visible{border-color:var(--green-40)}
@media (hover:hover) and (pointer:fine){.guide-article .guide-start-links>a:hover{border-color:var(--green-40)}}
.guide-start-links span{display:block;margin-bottom:var(--s-2);font:var(--label)/1.6 var(--mono);letter-spacing:var(--track-label);color:var(--paper-muted)}
.guide-empty{margin-top:var(--s-6);padding:var(--s-6);background:var(--paper-panel);border-radius:var(--radius-1)}
.guide-article .guide-empty h2{font-size:var(--step-2);letter-spacing:var(--track-h2);margin:0 0 var(--s-2)}
.guide-article .guide-empty p{margin:0 0 var(--s-5);color:var(--paper-muted)}

/* Topics: one rule between topics; prose at 68ch, 16px+, line-height 1.7. */
.guide-topic{margin-top:var(--s-7);padding-top:var(--s-6)}
.guide-kicker{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s-2) var(--s-3);margin-bottom:var(--s-4);font:var(--label)/1.6 var(--mono);letter-spacing:var(--track-label);color:var(--paper-muted)}
.guide-badge{padding:3px 8px;border-radius:var(--radius-1);font:var(--label)/1.6 var(--mono);letter-spacing:.02em;background:var(--paper-panel);color:var(--paper-muted)}
.guide-badge.dev{--badge-bg:#302d22;--badge-text:#c8bd93;background:var(--badge-bg);color:var(--badge-text)}
.topic-heading{display:flex;align-items:baseline;gap:var(--s-2);margin:0 0 var(--s-2)}
.guide-article .topic-heading h2{flex:0 1 auto;min-width:0;overflow-wrap:break-word;margin:0;font-size:clamp(1.625rem,1.4rem + .9vw,2rem);font-weight:500;letter-spacing:var(--track-h2);line-height:1.2;color:var(--paper-heading)}
.topic-anchor{position:relative;flex:none;display:inline-grid;place-items:center;width:44px;height:44px;margin:-10px 0 -10px -6px;border-radius:var(--radius-1);font:500 1.25rem/1 var(--mono);color:var(--paper-muted);text-decoration:none;opacity:1;transition:opacity var(--dur-in) var(--ease-ui),color var(--dur-in) var(--ease-ui)}
.topic-anchor:focus-visible{outline-offset:-4px;color:var(--green)}
.topic-anchor::after{content:'Link copied';position:absolute;right:0;bottom:calc(100% - 2px);white-space:nowrap;padding:2px 8px;border-radius:var(--radius-1);background:var(--paper-panel);font:var(--label)/1.6 var(--mono);letter-spacing:var(--track-label);color:var(--green);opacity:0;pointer-events:none;transition:opacity var(--dur-in) var(--ease-ui)}
.topic-anchor.is-copied{opacity:1;color:var(--green)}
.topic-anchor.is-copied::after{opacity:1}
@media (hover:hover) and (pointer:fine){
  .topic-anchor{opacity:0}
  .topic-heading:hover .topic-anchor,.topic-anchor:focus-visible{opacity:1}
  .topic-anchor:hover{color:var(--green)}
}
.guide-topic .topic-intro{max-width:68ch;margin:0 0 var(--s-5);font-size:1.0625rem;color:var(--paper-muted)}
.guide-topic>p,.guide-topic>ol,.guide-topic>ul,.guide-topic>.guide-note{max-width:68ch}
.guide-topic ol,.guide-topic ul{padding-left:var(--s-5);margin:var(--s-4) 0}
.guide-topic li{padding-left:6px;margin-bottom:var(--s-2)}
.guide-topic li::marker{color:var(--paper-muted);font-weight:600}
.guide-topic h3{font-size:1.125rem;font-weight:600;margin:var(--s-6) 0 var(--s-2)}
.guide-topic strong{font-weight:600;color:var(--paper-heading)}
.guide-topic code{font:.875em/1.6 var(--mono);color:var(--green);background:var(--paper-panel);padding:2px 5px;border-radius:var(--radius-1);overflow-wrap:anywhere}
.guide-note{background:var(--paper-panel);border-radius:var(--radius-1);padding:var(--s-4) var(--s-5);margin:var(--s-5) 0;font-size:.9375rem;line-height:1.7;color:var(--paper-muted)}
.guide-topic figure{margin:var(--s-5) 0}
.guide-topic img{margin:0;border:1px solid var(--dark-line);border-radius:var(--radius-1)}
.guide-topic figcaption{margin-top:var(--s-2);font-size:var(--step--1);line-height:1.6;color:var(--paper-muted)}
.guide-article .back-to-guides{margin-top:var(--s-2);font-size:var(--step--1);color:var(--paper-muted)}
.guide-table-wrap{overflow-x:auto;margin:var(--s-5) 0;border:1px solid var(--dark-line);border-radius:var(--radius-1)}
.guide-table-wrap:focus-visible{outline-offset:2px}
.guide-table-wrap table{width:100%;border-collapse:collapse;text-align:left;font-size:.875rem;line-height:1.6}
.guide-table-wrap th{background:var(--paper-panel);color:var(--paper-heading);font-size:var(--step--1);font-weight:600}
.guide-table-wrap th,.guide-table-wrap td{padding:11px 14px;border-bottom:1px solid var(--dark-line)}
.guide-table-wrap tbody tr:last-child td{border-bottom:0}
.guide-table-wrap td:first-child{width:150px;white-space:nowrap}
.guide-table-wrap td{color:var(--paper-muted)}
.guide-topic details p{margin-right:0}
/* Code blocks: copy.js adds a "Copy" button before each <pre> inside [data-copy-all] (none in the guides yet). */
.guide-topic pre{max-width:100%;overflow-x:auto;margin:0 0 var(--s-5);padding:var(--s-4);background:var(--paper-panel);border-radius:var(--radius-1);font:.875rem/1.6 var(--mono);color:var(--paper-text)}
.guide-topic pre code{background:none;padding:0;color:inherit;font:inherit}
.guide-topic .copy-button{display:flex;margin:var(--s-4) 0 var(--s-2) auto;min-height:32px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--radius-1);background:transparent;font:500 var(--step--1)/1 var(--font);color:var(--paper-muted);transition:transform var(--dur-in) var(--ease-ui),border-color var(--dur-in) var(--ease-ui),color var(--dur-in) var(--ease-ui)}
.guide-topic .copy-button:active{transform:scale(.97);transition-duration:var(--dur-press)}
.guide-topic .copy-button:is(:hover,:focus-visible,.is-copied){border-color:var(--green-40);color:var(--green)}

@media(min-width:1450px){.guide-layout{gap:100px}.guide-article{max-width:900px}}
@media(max-width:1100px){
  .guide-layout{grid-template-columns:210px minmax(0,1fr);gap:40px}
  .guide-start-links{grid-template-columns:1fr}
  .guide-start-links span{display:inline-block;min-width:150px;margin:0 var(--s-3) 0 0}
}
@media(max-width:800px){
  .guide-layout{grid-template-columns:1fr;gap:var(--s-6);padding-top:var(--s-6)}
  .guide-sidebar{position:static;max-height:none;overflow:visible;padding:0;border-bottom:1px solid var(--dark-line)}
  .guide-contents>summary{min-height:44px;padding:0 0 var(--s-3)}
  .guide-contents nav{max-height:340px;overflow:auto;padding-bottom:var(--s-3);columns:2;column-gap:var(--s-5)}
  .guide-nav-group{break-inside:avoid}
  .guide-version-note{padding:var(--s-4);margin-block:var(--s-5)}
  .guide-topic{margin-top:var(--s-6);padding-top:var(--s-5)}
}
@media (pointer:coarse){
  .guide-nav-group>a{align-items:center;min-height:44px;padding-block:4px}
  .search-input-wrap kbd{display:none}
  .guide-contents>summary,.guide-topic .copy-button{min-height:44px}
  .search-input-wrap input{padding-right:16px}
}
@media(max-width:520px){
  .guide-contents nav{columns:1}
  .guide-start-links span{min-width:0;display:block;margin-bottom:var(--s-1)}
  .guide-filter-row{flex-wrap:wrap}
  .guide-filter-row select{flex:1}
  .guide-filter-row button{margin-left:0}
  .guide-table-wrap th,.guide-table-wrap td{padding:9px}
  .guide-table-wrap td:first-child{width:115px}
  .guide-version-note{gap:var(--s-3)}
  .guide-empty{padding:var(--s-5)}
}

/* Light theme for the docs pages (moved from themes.css in the shared style pass). */
:root[data-theme="light"] :is(.guide-sidebar, .reference-sidebar) { scrollbar-color: #8b997d transparent; }
:root[data-theme="light"] .guide-badge.dev { --badge-bg: #e7ddcf; --badge-text: #705039; }
:root[data-theme="light"] .guide-badge.core { background: var(--surface-2); color: var(--accent-soft); }
:root[data-theme="light"] .guide-badge.planned { background: #e0e2d9; color: var(--paper-muted); }
:root[data-theme="light"] :is(.search-input-wrap input, .guide-filter-row select) { border-color: var(--theme-field-line); }
:root[data-theme="light"] .docs-callout { border-left-color: #6e8d58; }
:root[data-theme="light"] .version-mark { border-color: var(--theme-field-line); }