/* bdibranding docs typography and production menu-glass, with a clear reading layout. */
@import url('../styles.css?v=20260924-bdibranding-nav');
html:has(body.docs-page){scroll-behavior:auto}
.docs-page{
  --bg:var(--bdi-color-background);--amber:var(--bdi-color-text);--amber-b:var(--bdi-color-text);--amber-d:var(--bdi-color-text-muted);
  --ink:var(--bdi-color-text);--ink-d:var(--bdi-color-text-muted);--line:var(--bdi-color-border);--panel:var(--bdi-color-surface);
  --ph-rgb:242,232,214;--ph-bright-rgb:242,232,214;
  /* A reflection of fixed depth stays consistent as cards expand or the page scrolls. */
  --menu-glass:linear-gradient(180deg,rgba(var(--ph-bright-rgb),.075),rgba(var(--ph-rgb),.025) 96px,rgba(var(--ph-rgb),.018) 220px),linear-gradient(rgba(14,11,8,.82),rgba(14,11,8,.82));
  --glass-rim:inset 0 1px 0 rgba(var(--ph-bright-rgb),.08);
  font:20px/1.55 var(--bdi-font-body);
  background:var(--bg);
  isolation:isolate;
}
.docs-page a{text-underline-offset:3px}
.docs-page :focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:fixed;left:20px;top:-80px;z-index:100;padding:10px 18px;background:var(--amber);color:#111}
.skip-link:focus{top:10px}
.docs-shell{position:relative;z-index:5;display:grid;max-width:1380px;margin:0 auto;grid-template-columns:228px minmax(0,1fr);gap:32px;padding:32px 40px 80px}
.docs-side{position:sticky;top:104px;align-self:start;max-height:calc(100dvh - 128px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--menu-glass);box-shadow:var(--glass-rim);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.docs-side a{text-decoration:none}
.side-home{display:block;font-weight:400;margin:0 0 16px;font-size:22px;color:var(--amber-b)}
.side-quick{display:grid;gap:4px;margin-bottom:20px}
.side-quick a{display:block;padding:8px;font-size:18px;line-height:1.3;color:var(--ink-d);border:1px solid transparent;border-radius:6px}
.side-quick a:hover{color:var(--amber-b);background:var(--panel)}
.side-quick a.active{color:var(--amber-b);background:var(--menu-glass);border-color:var(--line);box-shadow:var(--glass-rim)}
.side-label{margin:0 6px 8px;font-size:14px;line-height:1.4;letter-spacing:1px;text-transform:uppercase;color:var(--amber-d)}
.side-group{margin:0 0 4px}
.side-title{display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:pointer;font-size:18px;font-weight:400;color:var(--ink);line-height:1.2;gap:8px;padding:10px 6px}
.side-title::-webkit-details-marker{display:none}
.side-title::after{content:'›';color:var(--amber-d);font-size:24px;line-height:1}
.side-group[open]>.side-title::after{transform:rotate(90deg)}
.side-group>a{display:block;padding:7px 10px;border-left:1px solid var(--line);color:var(--ink-d);font-size:17px;line-height:1.3;margin:2px 0 2px 6px}
.side-group>a:hover{color:var(--ink);background:var(--panel)}
.side-group>a.active{color:var(--amber-b);background:var(--menu-glass);border-left:2px solid var(--amber);border-radius:0 6px 6px 0;box-shadow:var(--glass-rim)}
.side-toggle{display:none}
.docs-page:not(.docs-enhanced) .side-toggle{display:none}
.side-search{display:none;position:relative;margin:0 0 16px}.docs-enhanced .side-search{display:block}
#docs-search{appearance:none;width:100%;border:1px solid var(--line);padding:11px 32px 11px 12px;color:var(--ink);font:18px var(--bdi-font-body);border-radius:9px;background:linear-gradient(145deg,rgba(var(--ph-bright-rgb),.045),rgba(var(--ph-rgb),.018)),rgba(0,0,0,.18);box-shadow:inset 0 1px 0 rgba(var(--ph-bright-rgb),.055);caret-color:var(--amber-b)}
#docs-search::placeholder{color:var(--ink-d)}
.search-key{position:absolute;right:10px;color:var(--amber-d);border:1px solid var(--line);padding:0 6px;top:11px;font:16px/20px var(--bdi-font-body);border-radius:3px}
.ss-results{position:relative;z-index:20;margin-top:6px;border:1px solid var(--line);background:var(--menu-glass),#100b06;max-height:50vh;overflow-y:auto;border-radius:9px;box-shadow:var(--glass-rim)}
.ss-hit{display:flex;flex-direction:column;gap:4px;padding:12px;border-bottom:1px solid var(--line)}
.ss-hit:last-child{border:0}
.ss-hit:hover,.ss-hit:focus{background:rgba(var(--ph-rgb),.09)}
.ss-g{color:var(--amber-d);font-size:15px;line-height:1.4}
.ss-t{font-size:19px;line-height:1.45;color:var(--ink);font-weight:400}
.ss-s{font-size:16px;line-height:1.5;color:var(--ink-d)}
.ss-results mark{color:var(--amber-b);background:rgba(var(--ph-rgb),.2)}
.ss-none{padding:14px;color:var(--ink-d);font-size:18px}
.docs-main{min-width:0;max-width:860px;outline:none}
.docs-overview .docs-main{max-width:none}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:16px;line-height:1.6;color:var(--amber-d);margin:0 0 24px}
.crumbs a{text-decoration:none;color:var(--amber-d)}
.crumbs .sep{color:var(--amber-d)}
.crumbs .here{color:var(--ink-d)}
.doc-kind{font:15px/1.4 var(--bdi-font-body);text-transform:uppercase;letter-spacing:.06em;color:var(--amber-d)}
.docs-main h1{font:400 48px/1.1 var(--bdi-font-body);letter-spacing:.4px;margin:0 0 18px;text-wrap:balance;color:var(--amber-b)}
.docs-main .doc-sub{color:var(--amber-d);font-size:19px;margin:0 0 28px}
.docs-main h2{margin:40px 0 16px;font:400 30px/1.15 var(--bdi-font-body);letter-spacing:.4px;scroll-margin-top:120px;color:var(--amber-b)}
.docs-main h3{margin:24px 0 12px;font:25px/1.4 var(--bdi-font-body);scroll-margin-top:120px;color:var(--amber-b)}
.docs-main h4{font-size:20px;margin:24px 0 8px;color:var(--amber-b);font-weight:400}
.docs-main p,.docs-main li{font-size:20px;color:var(--ink-d);line-height:1.55}
.docs-main p{margin:0 0 16px}
.docs-main ul,.docs-main ol{padding-left:24px}
.docs-main li{margin:6px 0}
.docs-main b,.docs-main strong{font-weight:400;color:var(--amber-b)}
.docs-main img,.docs-main svg{max-width:100%}
.h-anchor{font:20px var(--bdi-font-body);margin-left:10px;color:var(--amber-d);opacity:0;text-decoration:none}
h2:hover .h-anchor,h3:hover .h-anchor,.h-anchor:focus{opacity:1}
.docs-main code{color:var(--amber-b);background:rgba(var(--ph-rgb),.06);border:1px solid var(--line);padding:2px 5px;border-radius:3px;overflow-wrap:anywhere;font:13px/1.6 ui-monospace,Consolas,monospace}
.docs-main pre{margin:18px 0;padding:18px;background:rgba(0,0,0,.3);border:1px solid var(--line);overflow:auto;border-radius:9px;box-shadow:var(--glass-rim)}
.docs-main pre code{background:none;border:0;padding:0;overflow-wrap:normal}
.pre-wrap{position:relative}.pre-wrap pre{padding-top:40px}
.pre-copy{position:absolute;right:8px;top:8px;background:var(--panel);color:var(--ink-d);border:1px solid var(--line);border-radius:4px;padding:3px 9px;font:16px var(--bdi-font-body);cursor:pointer}
.pre-copy.ok{color:var(--amber-b)}
.table-wrap{width:100%;overflow:auto;margin:18px 0;border:1px solid var(--line);border-radius:5px}
.docs-main table{border-collapse:collapse;width:100%;font-size:19px}
.docs-main th,.docs-main td{text-align:left;padding:12px 14px;border:1px solid var(--line);vertical-align:top;line-height:1.65;overflow-wrap:anywhere}
.docs-main th{background:var(--menu-glass);color:var(--ink);font-weight:400}.docs-main td{color:var(--ink-d)}
.callout{border:1px solid var(--line);border-left:3px solid var(--amber);padding:16px 24px;margin:24px 0;font-size:20px;color:var(--ink-d);background:var(--menu-glass);box-shadow:var(--glass-rim);border-radius:0 9px 9px 0;line-height:1.5}
.docs-main kbd{color:var(--ink);background:rgba(var(--ph-rgb),.08);border:1px solid var(--line);border-radius:3px;padding:2px 6px;font:12px ui-monospace,monospace}
.doc-pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:1px solid var(--line);margin-top:48px;padding-top:24px}
.pg{display:flex;flex-direction:column;gap:7px;padding:18px;border:1px solid var(--line);text-decoration:none;background:var(--menu-glass);box-shadow:var(--glass-rim);border-radius:10px}
.pg:hover{border-color:rgba(var(--ph-rgb),.55)}.pg.next{text-align:right}
.pg-k{color:var(--amber-d);font-size:15px;letter-spacing:.04em}.pg-t{font-size:20px;color:var(--ink)}
.docs-toc{display:none}
@media(min-width:1280px){.docs-shell.has-toc{grid-template-columns:228px minmax(0,1fr) 174px;gap:32px}.docs-toc{display:block;position:sticky;top:104px;align-self:start;max-height:calc(100dvh - 128px);overflow-y:auto}.toc-title{font-size:16px;font-weight:400;color:var(--ink);margin:0 0 16px}.docs-toc ol{margin:0;padding:0;list-style:none;border-left:1px solid var(--line)}.docs-toc a{display:block;color:var(--ink-d);text-decoration:none;padding:6px 0 6px 14px;font-size:16px;line-height:1.5}.docs-toc a.on{color:var(--amber-b);border-left:1px solid var(--amber);margin-left:-1px}.toc-top{margin-top:16px}}
.read-progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--amber);transform:scaleX(0);transform-origin:left;z-index:70}
.doc-intro{margin:0 0 32px;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--menu-glass);box-shadow:var(--glass-rim);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.docs-main .eyebrow{font:15px/1.5 var(--bdi-font-body);color:var(--amber);letter-spacing:.15em;margin-bottom:16px}
.doc-intro .intro-text{max-width:650px;font-size:21px;line-height:1.5;margin-bottom:0}
.section-label{display:flex;justify-content:space-between;gap:16px;align-items:baseline;margin:0 0 16px}
.section-label h2{margin:0;font-size:25px}.section-label>span,.section-label>a{font-size:16px;color:var(--amber-d)}
.quickstart-block{margin-bottom:40px}
.learning-path{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.start-step{display:flex;flex-direction:column;gap:12px;text-decoration:none;border:1px solid var(--line);background:var(--menu-glass);padding:24px;border-radius:12px;box-shadow:var(--glass-rim);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.start-step:first-child{border-color:rgba(var(--ph-rgb),.45)}
.start-step:hover{border-color:rgba(var(--ph-rgb),.55);background-color:rgba(var(--ph-rgb),.035)}
.step-number{color:var(--amber-d);font:15px/1.4 var(--bdi-font-body);letter-spacing:.04em}
.start-step strong{letter-spacing:.4px;font-size:24px;line-height:1.2}
.start-step>span:not(.step-number){color:var(--ink-d);font-size:18px;line-height:1.4}
.start-step>b{margin-top:auto;color:var(--amber-b);font-size:16px}
.topic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.topic{display:grid;grid-template-rows:auto 1fr;min-width:0;border:1px solid var(--line);background:var(--menu-glass);scroll-margin-top:120px;border-radius:12px;box-shadow:var(--glass-rim)}
.topic-head{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;padding:24px}
.topic-number{color:var(--amber-d);font:16px/1.4 var(--bdi-font-body);padding-top:3px}
.docs-main .topic h3{margin:0 0 8px;font-size:24px;line-height:1.2}
.topic .topic-desc{margin:0;color:var(--ink-d);font-size:18px;line-height:1.4}
.topic-links{border-top:1px solid var(--line);padding:8px 24px 16px}
.topic-links a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;text-decoration:none;padding:12px 0;font-size:18px;line-height:1.4;border-bottom:1px solid var(--line)}
.topic-links a:hover>span{text-decoration:underline;text-underline-offset:4px}
.topic-links a:last-child{border:0}.topic-links small{font-size:14px;color:var(--amber-d);white-space:nowrap}
/* Shared rows align the titles, descriptions and destinations without fixed card heights. */
@supports(grid-template-rows:subgrid){.start-step{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:12px}.topic{grid-template-rows:subgrid;grid-row:span 2;row-gap:0}}
.support-strip{display:flex;align-items:center;flex-wrap:wrap;gap:16px 24px;margin:40px 0 24px;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.support-strip>div{flex:1;min-width:180px}.support-strip strong{font-size:20px}.support-strip p{margin:3px 0 0;font-size:18px}.support-strip>a{font-size:16px}
.docs-main .docs-version-note{font-size:16px;color:var(--amber-d);max-width:680px}
.guide-section{margin:40px 0}.guide-section .eyebrow{margin-bottom:8px}.guide-section h2{margin-top:0}.guide-section>p{font-size:19px}
.guide-list{border:1px solid var(--line);border-radius:12px;background:var(--menu-glass);box-shadow:var(--glass-rim)}
.guide-row{display:flex;justify-content:space-between;align-items:center;gap:24px;border-bottom:1px solid var(--line);text-decoration:none;padding:24px}
.guide-row strong{font-size:20px;display:block;margin-bottom:5px}.guide-row span span{display:block;font-size:18px;color:var(--ink-d)}.guide-row:hover{background:var(--panel)}
.doc-cards,.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
.doc-card,.help-card{display:block;padding:24px;text-decoration:none;border:1px solid var(--line);background:var(--menu-glass);border-radius:12px;box-shadow:var(--glass-rim)}
.doc-card:hover,.help-card:hover{border-color:rgba(var(--ph-rgb),.55)}
.dc-title,.hc-title{display:block;color:var(--ink);font-size:20px;font-weight:400;margin:8px 0;letter-spacing:0}.dc-kicker,.hc-glyph{color:var(--amber);font-size:18px}
.help-card p,.doc-card p{font-size:18px;margin:0}
.faq details{border:1px solid var(--line);margin:10px 0;background:var(--menu-glass);border-radius:10px;box-shadow:var(--glass-rim)}
.faq summary{padding:16px 18px;cursor:pointer;color:var(--ink);font:20px/1.6 var(--bdi-font-body);letter-spacing:0}
.docs-page .faq details p{padding:0 18px 18px;font:19px/1.5 var(--bdi-font-body);color:var(--ink-d);margin:0}.faq details ul{padding:0 20px 16px 38px}
.help-contact{display:grid;grid-template-columns:1fr;gap:10px}.help-contact a{padding:18px;border:1px solid var(--line);text-decoration:none;border-radius:10px;overflow-wrap:anywhere;background:var(--menu-glass);box-shadow:var(--glass-rim)}
.hk,.hn{display:block;font-size:16px;color:var(--ink-d)}.hv{display:block;font-size:20px;margin:4px 0}
.keys{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}.keyrow{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:12px 0}.kd{font-size:19px}.kk{white-space:nowrap}
.gloss dt{font-size:25px;font-weight:400;color:var(--ink);margin:24px 0 6px;scroll-margin-top:120px}.gloss dt .app{font-size:15px;font-weight:400;color:var(--amber-d);margin-left:10px}.gloss dd{font-size:20px;color:var(--ink-d);margin:0;padding-left:16px;border-left:2px solid var(--line)}.gloss-jump{display:flex;flex-wrap:wrap;gap:12px;font-size:18px}
@media(max-width:980px){.docs-shell{grid-template-columns:220px minmax(0,1fr);gap:24px;padding:32px 24px 64px}.learning-path,.keys,.topic-grid{grid-template-columns:1fr}.start-step,.topic{grid-row:auto;grid-template-rows:auto}.start-step{gap:8px}.topic-head{padding:24px}.doc-cards,.help-grid{grid-template-columns:1fr}}
@media(max-width:760px){.docs-shell{display:block;padding:24px 20px 56px}.docs-side{position:static;max-height:none;overflow:visible;padding:12px;margin:0 0 24px}.side-home{display:none}.side-search{margin-bottom:12px}.search-key{display:none}#docs-search{font-size:22px}.side-toggle{display:block;width:100%;text-align:left;padding:12px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:8px;font:19px var(--bdi-font-body);cursor:pointer}.docs-enhanced .side-nav{display:none}.docs-enhanced .docs-side.open .side-nav{display:block}.side-nav{margin-top:12px}.ss-results{max-height:48vh}.crumbs{margin-bottom:24px}.section-label{flex-wrap:wrap;gap:8px}.learning-path,.help-grid,.doc-cards,.keys{grid-template-columns:1fr}.pg{padding:16px}}

/* The website chrome follows the same station material as the documentation. */
.docs-page .topbar{padding-inline:max(40px,calc((100% - 1380px)/2 + 40px));background:var(--menu-glass),rgba(10,8,6,.86);box-shadow:var(--glass-rim);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.docs-page .topnav a,.docs-page .topbar-right{color:var(--ink-d)}
.docs-page .topnav a{white-space:nowrap}
.docs-page .topbar-right a{color:var(--ink-d)}
.docs-page .topnav a.on,.docs-page .topnav a:hover{color:var(--amber-b)}
.docs-page .footer-line{font:18px/1.5 var(--bdi-font-body);color:var(--ink-d)}
.docs-page .footer-links a{font:16px/1.4 var(--bdi-font-body);color:var(--amber-d);letter-spacing:.5px}
.docs-page .footer-fine{font:15px/1.5 var(--bdi-font-body);color:var(--amber-d)}
.guide-row:last-child{border:0}
/* Integer type sizes keep the pixel face stable between viewport widths. */
@media(min-width:1280px){.docs-main h1{font-size:56px}}
@media(max-width:980px){.docs-main h1{font-size:42px}}
@media(max-width:760px){.docs-main h1{font-size:38px}}
@media(max-width:980px){.docs-page .topbar{padding-inline:24px}}
@media(max-width:760px){.docs-page .topbar{padding-inline:20px}.docs-page .topnav{gap:16px}.doc-intro,.start-step,.doc-card,.help-card,.guide-row{padding:20px}.topic-head{padding:20px;grid-template-columns:20px minmax(0,1fr)}.topic-links{padding:8px 20px 12px}}