/* =================================================================
   ATOM × Material 3 — App shell (docs site layout)
   ================================================================= */

:root{--rail-w:300px;--bar-h:64px;--content-max:960px}

/* ---------- Top app bar ---------- */
.app-bar{
  position:sticky;top:0;z-index:100;height:var(--bar-h);
  display:flex;align-items:center;gap:16px;padding:0 16px 0 12px;
  background:color-mix(in srgb,var(--md-surface) 85%,transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--md-outline-variant);
}
.app-bar .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;padding:0 4px}
.app-bar .brand .conv{height:26px;width:auto;display:block}
.app-bar .brand .brand-logo{height:25px;width:auto;display:block}
.app-bar .brand .brand-x{font-size:16px;font-weight:400;color:var(--md-outline);margin:0 -2px}
.app-bar .brand .lockup{display:flex;flex-direction:column;line-height:1}
.app-bar .brand .lockup b{font-family:var(--md-font-brand);font-weight:700;font-size:14px;letter-spacing:0.01em;color:var(--md-on-surface)}
.app-bar .brand .lockup span{font-size:11px;font-weight:600;color:var(--md-on-surface-variant);letter-spacing:0.04em;margin-top:3px}
.app-bar .bar-spacer{flex:1}
.app-bar .search{
  display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;min-width:200px;
  background:var(--md-surface-container-high);border-radius:var(--md-shape-full);
  color:var(--md-on-surface-variant);cursor:text;
}
.app-bar .search .md-i{width:20px;height:20px}
.app-bar .search input{border:none;background:transparent;outline:none;font-family:var(--md-font-plain);
  font-size:var(--md-body-medium);color:var(--md-on-surface);width:160px}
.app-bar .search kbd{font-family:var(--md-font-mono);font-size:11px;background:var(--md-surface);
  border:1px solid var(--md-outline-variant);border-radius:4px;padding:1px 6px;color:var(--md-on-surface-variant)}
.menu-btn{display:none}

/* ---------- Layout ---------- */
.layout{display:flex;min-height:calc(100vh - var(--bar-h))}

/* ---------- Navigation drawer / rail ---------- */
.nav-rail{
  width:var(--rail-w);flex:0 0 var(--rail-w);position:sticky;top:var(--bar-h);
  height:calc(100vh - var(--bar-h));overflow-y:auto;padding:16px 12px 48px;
  border-right:1px solid var(--md-outline-variant);background:var(--md-surface);
  scrollbar-width:thin;scrollbar-color:var(--md-outline-variant) transparent;
}
.nav-rail::-webkit-scrollbar{width:8px}
.nav-rail::-webkit-scrollbar-thumb{background:var(--md-outline-variant);border-radius:99px}
.nav-section{margin-bottom:8px}
.nav-section>.nav-head{
  display:flex;align-items:center;gap:12px;width:100%;padding:10px 16px;border:none;cursor:pointer;
  background:transparent;color:var(--md-on-surface-variant);
  font-family:var(--md-font-brand);font-weight:600;font-size:var(--md-label-large);
  letter-spacing:0.06em;text-transform:uppercase;border-radius:var(--md-shape-full);
}
.nav-section>.nav-head .md-i{width:18px;height:18px}
.nav-section>.nav-head .chev{margin-left:auto;transition:transform var(--md-dur-short) var(--md-ease-standard)}
.nav-section.collapsed .chev{transform:rotate(-90deg)}
.nav-links{display:flex;flex-direction:column;gap:2px;overflow:hidden;
  transition:max-height var(--md-dur-medium) var(--md-ease-standard)}
.nav-section.collapsed .nav-links{max-height:0 !important}
.nav-link{
  --state:var(--md-on-surface);
  display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:var(--md-shape-full);
  color:var(--md-on-surface-variant);text-decoration:none;cursor:pointer;
  font-family:var(--md-font-brand);font-weight:500;font-size:var(--md-body-medium);
}
.nav-link .dot{width:6px;height:6px;border-radius:50%;background:var(--md-outline);flex:0 0 auto;margin-left:6px;transition:all var(--md-dur-short)}
.nav-link.active{background:var(--md-secondary-container);color:var(--md-on-secondary-container);font-weight:600;--state:var(--md-on-secondary-container)}
.nav-link.active .dot{background:var(--md-on-secondary-container);transform:scale(1.5)}

/* ---------- Content ---------- */
.content{flex:1;min-width:0;display:flex;justify-content:center;gap:56px;align-items:flex-start;padding:0 40px}
#pageHost{width:100%;max-width:var(--content-max)}
.page{width:100%;padding:48px 0 120px}
.page>*{animation:blockIn .55s var(--md-ease-decel) both;animation-delay:calc(var(--rin,0)*42ms)}
@keyframes blockIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.page>*{animation:none}}

/* ---------- On this page (TOC) ---------- */
.toc-rail{position:sticky;top:calc(var(--bar-h) + 56px);width:176px;flex:0 0 176px;align-self:flex-start;
  max-height:calc(100vh - var(--bar-h) - 88px);overflow:auto;padding-bottom:24px}
.toc-rail.empty{display:none}
.toc-head{font-family:var(--md-font-brand);font-weight:700;font-size:var(--md-label-medium);letter-spacing:.1em;
  text-transform:uppercase;color:var(--md-on-surface-variant);margin:0 0 14px;padding-left:15px}
.toc-link{display:block;position:relative;padding:7px 0 7px 15px;color:var(--md-on-surface-variant);
  text-decoration:none;font-size:var(--md-body-medium);line-height:1.35;cursor:pointer;
  border-left:2px solid var(--md-outline-variant);transition:color var(--md-dur-short),border-color var(--md-dur-short)}
.toc-link:hover{color:var(--md-on-surface)}
.toc-link.active{color:var(--md-primary);border-left-color:var(--md-primary);font-weight:600}
@media(max-width:1240px){.toc-rail{display:none}}

.breadcrumb{display:flex;align-items:center;gap:8px;font-size:var(--md-label-large);color:var(--md-on-surface-variant);margin-bottom:20px}
.breadcrumb .md-i{width:14px;height:14px}
.breadcrumb b{color:var(--md-primary)}

.page-title{font-family:var(--md-font-brand);font-weight:800;font-size:var(--md-display-small);
  letter-spacing:-0.02em;color:var(--md-on-surface);margin:0 0 12px}
.page-lede{font-size:var(--md-body-large);color:var(--md-on-surface-variant);max-width:64ch;margin:0 0 8px;line-height:1.6}

.section-head{display:flex;align-items:baseline;gap:12px;margin:64px 0 8px}
.section-head .eyebrow{font-family:var(--md-font-brand);font-weight:700;font-size:var(--md-label-medium);
  letter-spacing:0.14em;text-transform:uppercase;color:var(--md-primary)}
.section-title{font-family:var(--md-font-brand);font-weight:700;font-size:var(--md-headline-small);
  color:var(--md-on-surface);margin:6px 0 6px}
.section-desc{font-size:var(--md-body-medium);color:var(--md-on-surface-variant);max-width:62ch;margin:0 0 24px;line-height:1.6}

/* ---------- Spec / demo panel ---------- */
.demo{background:var(--md-surface-container-low);border:1px solid var(--md-outline-variant);
  border-radius:var(--md-shape-lg);padding:32px;margin-bottom:16px}
.demo--checker{
  background-image:
    linear-gradient(45deg,var(--md-surface-container) 25%,transparent 25%),
    linear-gradient(-45deg,var(--md-surface-container) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,var(--md-surface-container) 75%),
    linear-gradient(-45deg,transparent 75%,var(--md-surface-container) 75%);
  background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0;
}
.demo-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.demo-grid{display:grid;gap:16px}

/* ---------- Code / token chips ---------- */
.code{font-family:var(--md-font-mono);font-size:13px;background:var(--md-surface-container-high);
  color:var(--md-on-surface);border-radius:var(--md-shape-sm);padding:2px 8px}
.codeblock{font-family:var(--md-font-mono);font-size:13px;line-height:1.7;background:var(--md-inverse-surface);
  color:var(--md-inverse-on-surface);border-radius:var(--md-shape-md);padding:18px 20px;overflow-x:auto;white-space:pre}
.token-copy{cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:var(--md-font-mono);
  font-size:12px;color:var(--md-on-surface-variant);background:transparent;border:none;padding:0}
.token-copy .md-i{width:14px;height:14px;opacity:.6}
.token-copy:hover{color:var(--md-primary)}
.token-copy.copied{color:var(--md-success)}

/* ---------- Cards grid generic ---------- */
.card-grid{display:grid;gap:16px}
.spec-pair{display:flex;flex-direction:column;gap:2px}
.spec-pair .k{font-size:var(--md-label-medium);color:var(--md-on-surface-variant);text-transform:uppercase;letter-spacing:0.06em;font-weight:600}
.spec-pair .v{font-family:var(--md-font-mono);font-size:13px;color:var(--md-on-surface)}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);
  background:var(--md-inverse-surface);color:var(--md-inverse-on-surface);
  padding:14px 22px;border-radius:var(--md-shape-sm);box-shadow:var(--md-elev-3);
  font-size:var(--md-body-medium);font-weight:500;opacity:0;visibility:hidden;
  transition:all var(--md-dur-medium) var(--md-ease-emphasized);z-index:300}
.toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
  :root{--rail-w:264px}
  .app-bar .search{display:none}
}
@media(max-width:860px){
  .menu-btn{display:inline-flex}
  .nav-rail{position:fixed;left:0;top:var(--bar-h);z-index:90;transform:translateX(-100%);
    transition:transform var(--md-dur-medium) var(--md-ease-emphasized);box-shadow:var(--md-elev-3)}
  .nav-rail.open{transform:none}
  .content{padding:0 20px}
  .page{padding:32px 0 100px}
  .nav-scrim{position:fixed;inset:var(--bar-h) 0 0;background:var(--md-scrim);opacity:0;visibility:hidden;
    transition:opacity var(--md-dur-medium);z-index:80}
  .nav-scrim.open{opacity:1;visibility:visible}
}
@media(min-width:861px){.nav-scrim{display:none}}