/* Discount Genie docs (/docs/discount-genie/...). Pairs with details.css + details.js (brand kit) and docs.js.
   Tokens, header and footer are copied from the v4 redesign (releases/v4/index.html); the docs body is a calm
   reading layout, with the playful kit (sticker shadow, gold spark, lilac dots) only on the header, docs home hero, search and view switcher.
   Three views of the same HTML, picked by one class on <html> (inline head script + docs.js, saved in localStorage "docs-view"):
     .view-tree  Stripe-style 3 columns: full nav tree | article | "On this page" rail (the default; what JS-off visitors get)
     .view-tabs  Mintlify-style: section tabs under the header, nav shows only the current section, boxed TOC
     .view-hub   help center: search-first home (chips, cards, videos), slim nav, "On this page" dropdown, no rail
   Layout is mobile-first: the shell is one column, and every multi-column grid lives in a min-width media query,
   so the <=768px layout never loses a specificity fight to a desktop selector. */
:root{
  --white:#ffffff; --wash:#f5f3ff; --lilac:#e5ceff; --purple:#6310c3; --purple-2:#6c13d2;
  --ink:#1e1b34; --night:#0c0628; --gold:#fbbf24; --paper:#f7f7f9;
  --text:rgb(30 27 52/.8); --muted:rgb(30 27 52/.6); --hair:1px solid rgb(30 27 52/.08); --line:rgb(30 27 52/.1);
  --shadow:0 1px 2px rgb(30 27 52/.06),0 8px 24px -8px rgb(30 27 52/.12);
  --sticker:11px 10px 0 var(--ink); --sticker-sm:5px 5px 0 var(--ink);
  --r-ctl:10px; --r-card:20px; --r-pill:999px;
  --serif:"Lora",Georgia,serif; --sans:"Inter",system-ui,sans-serif; --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --wrap:1200px; --gut:clamp(20px,4vw,40px); --top:65px;
}
@font-face{font-family:"Lora";font-weight:400;font-display:swap;src:url(/assets/lora-400.woff2) format("woff2")}
@font-face{font-family:"Lora";font-weight:700;font-display:swap;src:url(/assets/lora-700.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(/assets/inter-400.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:700;font-display:swap;src:url(/assets/inter-700.woff2) format("woff2")}

*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--top) + 24px)}
body{margin:0;background:var(--white);color:var(--text);font:400 16px/1.65 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--purple)}
h1,h2,h3{color:var(--ink);margin:0}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:100;padding:8px 12px;background:var(--ink);color:var(--white);border-radius:var(--r-ctl)}
.skip-link:focus{left:8px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--purple-2);outline-offset:3px}
kbd{font:600 11px/1 var(--mono);padding:3px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;background:var(--white);color:var(--muted)}

/* header (v4) */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
header{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:var(--hair)}
.docs header .wrap{max-width:none}
.bar{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:700 18px/1 var(--sans);letter-spacing:-.01em}
.brand img{width:34px;height:34px;border-radius:8px}
.bar nav{display:flex;gap:24px;margin-left:auto}
.bar nav a{color:var(--ink);text-decoration:none;font-size:15px}
.bar nav a[aria-current="page"]{color:var(--purple);font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:var(--r-ctl);font:700 15px/1 var(--sans);text-decoration:none}
.btn-primary{background:var(--purple);color:var(--white)}
.btn-primary:hover{background:var(--ink)}
.dh__menu{display:none;align-items:center;gap:6px;min-height:44px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--white);color:var(--ink);font:600 14px var(--sans);cursor:pointer}
.dh__search{display:flex;align-items:center;gap:8px;width:min(260px,22vw);height:40px;padding:0 10px 0 12px;border:1.5px solid var(--ink);border-radius:var(--r-ctl);background:var(--white);color:var(--muted);text-decoration:none;font-size:14px;box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.dh__search:hover{transform:translate(-1px,-1px);box-shadow:var(--sticker-sm)}
.dh__search kbd{margin-left:auto}
html.ss-scrolled header{box-shadow:0 6px 18px -12px rgb(30 27 52/.35)}

/* shell (mobile first: one column; the grids are in the min-width queries at the end) */
.shell{display:grid;grid-template-columns:minmax(0,1fr);gap:0;max-width:1360px;margin:0 auto;padding:0 var(--gut)}
.side{position:sticky;top:var(--top);align-self:start;max-height:calc(100vh - var(--top));overflow:auto;padding:28px 8px 40px 0;border-right:var(--hair)}
.side__in{display:flex;flex-direction:column}
.side__home{display:block;margin-bottom:18px;color:var(--ink);font-weight:700;font-size:14px;text-decoration:none}
.side__k{display:none;margin:6px 0 8px;padding-top:14px;border-top:var(--hair);color:var(--muted);font:700 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.ng{margin-bottom:18px}
.ng__label a{display:block;margin-bottom:6px;color:var(--ink);font:700 11.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.ng__list{list-style:none;margin:0;padding:0}
.nl{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;color:var(--text);font-size:14.5px;line-height:1.35;text-decoration:none}
.nl:hover{background:var(--wash);color:var(--ink)}
.nl.is-active{background:var(--wash);color:var(--purple);font-weight:700;box-shadow:inset 3px 0 0 var(--purple)}
.ic--vid{width:13px;height:13px;color:var(--purple);opacity:.7;stroke:none}
.main{min-width:0;padding:32px 0 72px}
.rail{display:none;position:sticky;top:var(--top);align-self:start;max-height:calc(100vh - var(--top));overflow:auto;padding:36px 0 40px}
.toc__k{margin-bottom:10px;color:var(--ink);font:700 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.toc-list{list-style:none;margin:0;padding:0;border-left:var(--hair)}
.toc-list a{display:block;margin-left:-1px;padding:4px 0 4px 14px;border-left:2px solid transparent;color:var(--muted);font-size:13.5px;line-height:1.4;text-decoration:none}
.toc-list .toc-h3 a{padding-left:26px;font-size:13px}
.toc-list a:hover{color:var(--ink)}
.toc-list a.is-active{border-left-color:var(--purple);color:var(--purple);font-weight:700}
.toc-m{margin:0 0 20px;border:var(--hair);border-radius:var(--r-ctl);background:var(--paper)}
.toc-m summary{display:flex;align-items:center;gap:10px;padding:10px 14px;color:var(--ink);font-weight:700;font-size:14px;cursor:pointer;list-style:none}
.toc-m summary::-webkit-details-marker{display:none}
.toc-m summary .ic{margin-left:auto;transition:transform .2s}
.toc-m[open] summary .ic{transform:rotate(180deg)}
.toc-m__k{color:var(--muted);font:700 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.toc-m__cur{overflow:hidden;color:var(--purple);text-overflow:ellipsis;white-space:nowrap}
.toc-m .toc-list{max-height:50vh;overflow:auto;margin:0 14px 12px}

/* article */
.doc{max-width:72ch}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:16px;font-size:13.5px;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--purple)}
.crumbs__sep{width:14px;height:14px;opacity:.5}
.doc h1{font:700 clamp(32px,4vw,44px)/1.1 var(--serif);letter-spacing:-.02em}
.doc .lede{margin-top:12px;font-size:18px;line-height:1.55;color:var(--text)}
.meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:16px 0 28px;font-size:13.5px;color:var(--muted)}
.meta span{display:inline-flex;align-items:center;gap:6px}
.prose{color:var(--text)}
.prose h2{margin:44px 0 12px;font:700 26px/1.25 var(--serif);letter-spacing:-.01em}
.prose h3{margin:28px 0 8px;font:700 19px/1.3 var(--sans)}
.prose p,.prose ul,.prose ol{margin:0 0 16px}
.prose li{margin:6px 0}
.prose strong{color:var(--ink)}
.prose a,.callout a{text-decoration:underline;text-decoration-color:rgb(99 16 195/.35);text-underline-offset:3px}
.prose code{padding:2px 6px;border-radius:6px;background:var(--wash);color:var(--ink);font:500 .88em var(--mono)}
.prose pre{overflow:auto;padding:16px;border-radius:var(--r-ctl);background:var(--night);color:var(--white)}
.prose pre code{padding:0;background:none;color:inherit}
.prose img{display:block;margin:20px 0;border:var(--hair);border-radius:var(--r-ctl)}
.prose blockquote{margin:20px 0;padding-left:16px;border-left:3px solid var(--lilac)}
.anchor{margin-left:6px;color:var(--lilac);text-decoration:none;opacity:0;transition:opacity .15s}
:is(h2,h3):hover>.anchor,.anchor:focus{opacity:1}
.callout{margin:20px 0;padding:14px 16px 14px 18px;border:1px solid var(--line);border-left:3px solid var(--purple);border-radius:var(--r-ctl);background:var(--wash);font-size:15px}
.callout>strong{display:block;margin-bottom:2px;color:var(--ink);font-size:13px}
.callout p{margin:0}
.callout--tip{border-left-color:#15925a;background:#f1faf5}
.callout--warn{border-left-color:var(--gold);background:#fffbeb}
.table-scroll{overflow-x:auto;margin:20px 0}
.table-scroll table{width:100%;border-collapse:collapse;font-size:14.5px}
.table-scroll th,.table-scroll td{padding:10px 12px;border-bottom:var(--hair);text-align:left;vertical-align:top}
.table-scroll th{color:var(--ink);background:var(--paper)}

/* video facade: a link to the video until pressed, then docs.js swaps in the player */
.video{position:relative;aspect-ratio:16/9;margin:0 0 28px;border-radius:var(--r-card);overflow:hidden;background:var(--night)}
.video__btn{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--white);text-decoration:none}
.video__glow{position:absolute;inset:0;background:radial-gradient(60% 70% at 30% 20%,rgb(99 16 195/.7),transparent 70%),radial-gradient(50% 60% at 80% 90%,rgb(251 191 36/.25),transparent 70%)}
.video__play{position:relative;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--white);color:var(--purple);box-shadow:var(--sticker-sm);transition:transform .15s}
.video__play .ic{width:28px;height:28px;stroke:none;margin-left:4px}
.video__btn:hover .video__play{transform:scale(1.06)}
.video__cap{position:relative;display:grid;gap:4px;text-align:center}
.video__t{font-weight:700}
.video__s{font-size:13px;opacity:.75}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* was this helpful + prev/next */
.helpful{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:48px;padding:16px 0;border-top:var(--hair);border-bottom:var(--hair);font-size:14.5px;color:var(--ink)}
.helpful button{min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--white);color:var(--ink);font:600 14px var(--sans);cursor:pointer}
.helpful button:hover{border-color:var(--ink)}
.helpful__sep{flex:1}
.helpful__c{font-weight:600}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.pn__a{display:grid;gap:4px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-ctl);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.pn__a:hover{border-color:var(--ink);box-shadow:var(--sticker-sm)}
.pn__a--next{text-align:right}
.pn__k{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}
.pn__a--next .pn__k{justify-content:flex-end}
.pn__k .ic{width:14px;height:14px}
.pn__t{color:var(--ink);font-weight:700}

/* cards (group pages, docs home) */
.sec-h{margin:44px 0 16px;font:700 24px/1.25 var(--serif)}
.cards{display:grid;gap:14px;margin-top:28px}
.cards--3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:0}
.card{display:grid;gap:6px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.card:hover{border-color:var(--ink);box-shadow:var(--sticker-sm);transform:translate(-2px,-2px)}
.card__t{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:700}
.card__arrow{margin-left:auto;color:var(--purple)}
.card__d{color:var(--muted);font-size:14.5px;line-height:1.5}
.gcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(240px,calc((100% - 48px)/4)),1fr));gap:16px} /* max 4 per row (3 gaps = 48px) */
.gc{display:grid;align-content:start;gap:8px;padding:20px;border:1.5px solid var(--ink);border-radius:var(--r-card);background:var(--white);text-decoration:none;transition:box-shadow .15s,transform .15s}
.gc:hover{box-shadow:var(--sticker-sm);transform:translate(-2px,-2px)}
.gc__t{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;color:var(--ink);font:700 19px/1.25 var(--serif)}
.gc__n{color:var(--purple);font:700 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.gc__d{color:var(--muted);font-size:14.5px;line-height:1.5}
.gc__l{margin:4px 0 0;padding-left:18px;color:var(--text);font-size:14px}

/* docs home hero: the playful kit */
.doc--home{max-width:none}
.docs-hero{position:relative;isolation:isolate;margin-bottom:8px;padding:44px 40px;border:1.5px solid var(--ink);border-radius:var(--r-card);background:var(--wash);box-shadow:var(--sticker)}
.docs-hero .dots{top:-120px;right:-120px;--w:360px;--dot:#dcc2ff}
.eyebrow{display:inline-flex;margin-bottom:14px;padding:6px 12px;border-radius:var(--r-pill);background:var(--lilac);color:var(--purple);font:700 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.docs-hero h1{font-size:clamp(36px,5vw,56px)}
.docs-hero h1 .spark{top:-10px;right:-28px}
.hs{display:flex;align-items:center;gap:10px;max-width:520px;height:52px;margin-top:24px;padding:0 14px;border:1.5px solid var(--ink);border-radius:var(--r-ctl);background:var(--white);color:var(--muted);text-decoration:none;box-shadow:var(--sticker-sm)}
.hs kbd{margin-left:auto}

/* search dialog (docs.js) */
.sm{width:min(640px,calc(100vw - 32px));max-height:min(560px,80vh);margin:10vh auto auto;padding:0;border:1.5px solid var(--ink);border-radius:var(--r-card);box-shadow:var(--sticker);overflow:hidden}
.sm::backdrop{background:rgb(12 6 40/.45)}
.sm__bar{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:var(--hair)}
.sm__in{flex:1;border:0;outline:0;font:400 17px var(--sans);color:var(--ink)}
.sm__res{max-height:420px;overflow:auto;padding:8px}
.sr{display:grid;gap:2px;padding:10px 12px;border-radius:var(--r-ctl);color:var(--ink);text-decoration:none}
.sr.is-sel{background:var(--wash)}
.sr__t{font-weight:700}
.sr__s{color:var(--muted);font-size:13px}
.sr mark{background:var(--lilac);color:inherit;border-radius:3px}
.sm__empty{padding:20px 12px;color:var(--muted)}

/* footer (v4) */
footer{background:var(--night);color:rgb(255 255 255/.6);font-size:15px;padding:56px 0 40px}
footer .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px}
footer h4{margin:0 0 12px;color:var(--white);font:700 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{color:rgb(255 255 255/.75);text-decoration:none}
footer a:hover{color:var(--white)}
footer .brand{color:var(--white)}
footer .copy{margin-top:16px}

/* view switcher (header): JS only; the active view's button is filled purple */
.vs{display:none;align-items:center;gap:2px;padding:3px;border:1.5px solid var(--ink);border-radius:var(--r-pill);background:var(--white);box-shadow:3px 3px 0 var(--ink)}
.js .vs{display:flex}
.vs__k{padding:0 6px 0 8px;color:var(--ink);font:700 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.vs button{position:relative;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer;transition:background .15s,color .15s,transform .15s}
.vs button:hover{background:var(--wash);color:var(--purple)}
.vs button .ic{width:17px;height:17px}
.vs__l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.view-tree .vs [data-view=tree],.view-tabs .vs [data-view=tabs],.view-hub .vs [data-view=hub]{background:var(--purple);color:var(--white)}
.vs button.pop{animation:vs-pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes vs-pop{40%{transform:scale(1.25) rotate(-8deg)}}
.vs__hint{display:none;padding:0 10px 0 6px;color:var(--muted);font-size:12px;white-space:nowrap}
.vs__hint kbd{padding:1px 5px}
.vt{position:fixed;left:50%;bottom:24px;z-index:90;padding:10px 16px;border:1.5px solid var(--ink);border-radius:var(--r-pill);background:var(--ink);color:var(--white);font:700 14px/1 var(--sans);box-shadow:4px 4px 0 var(--gold);transform:translate(-50%,0);transition:opacity .2s,transform .2s;pointer-events:none}
.vt[hidden]{display:block;opacity:0;transform:translate(-50%,12px)}

/* section tabs (tabs view only) */
.tabs{display:none;position:sticky;top:65px;z-index:40;background:var(--white);border-bottom:var(--hair)}
.tabs__in{display:flex;gap:4px;max-width:1360px;margin:0 auto;padding:0 var(--gut);overflow-x:auto;scrollbar-width:none}
.tabs a{flex:none;padding:13px 12px 11px;border-bottom:2px solid transparent;color:var(--muted);font-size:14.5px;text-decoration:none;white-space:nowrap}
.tabs a:hover{color:var(--ink)}
.tabs a.is-cur{border-bottom-color:var(--purple);color:var(--ink);font-weight:700}

/* hub-only home pieces: "Try" chips and the videos row */
.chips,.vids,.hub-only{display:none}
.chips{flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:16px;color:var(--muted);font-size:13.5px}
.chip{padding:6px 12px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--white);color:var(--ink);text-decoration:none}
.chip:hover{border-color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.vids{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.vid{display:grid;gap:4px;padding:0 0 14px;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;text-decoration:none;transition:box-shadow .15s,transform .15s}
.vid:hover{box-shadow:var(--sticker-sm);transform:translate(-2px,-2px)}
.vid__p{display:grid;place-items:center;aspect-ratio:16/9;margin-bottom:8px;background:radial-gradient(60% 70% at 30% 20%,rgb(99 16 195/.75),transparent 70%),var(--night);color:var(--white)}
.vid__p .ic{width:30px;height:30px;stroke:none}
.vid__t{padding:0 16px;color:var(--ink);font-weight:700}
.vid__s{padding:0 16px;color:var(--muted);font-size:13px}
.sr__x{color:var(--muted);font-size:13px;line-height:1.45}

/* ---- view: tabs (Mintlify): numbered quick starts, boxed TOC ---- */
.view-tabs{--top:113px}
.view-tabs .tabs{display:block}
.view-tabs .side__home{display:none}
.view-tabs .ng.is-cur .ng__label a{font-size:12px;color:var(--purple)}
.view-tabs .toc{padding:16px 16px 12px;border:var(--hair);border-radius:16px;box-shadow:var(--shadow)}
.view-tabs .toc-list{border-left:0}
.view-tabs .toc-list a{margin:0;padding:5px 8px;border:0;border-radius:6px}
.view-tabs .toc-list a.is-active{background:var(--wash)}
.view-tabs .cards--3{counter-reset:qs}
.view-tabs .cards--3 .card{counter-increment:qs;padding-top:52px;position:relative}
.view-tabs .cards--3 .card::before{content:counter(qs);position:absolute;top:16px;left:20px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--gold);font:700 13px/1 var(--mono)}
.view-tabs .docs-hero{text-align:center;box-shadow:var(--sticker-sm)}
.view-tabs .docs-hero .hs{margin-inline:auto}
.view-tabs .gcs{grid-template-columns:repeat(auto-fill,minmax(max(200px,calc((100% - 48px)/4)),1fr))}

/* ---- view: hub (help center): search-first home, slim nav, TOC dropdown ---- */
.view-hub .rail{display:none}
.view-hub .toc-m{position:sticky;top:calc(var(--top) + 10px);z-index:5;background:var(--white);box-shadow:var(--shadow)}
.view-hub .side__home{order:-2;color:var(--muted);font-weight:400}
.view-hub .side__home::before{content:"← "}
.view-hub .ng.is-cur{order:-1}
.view-hub .side__k{display:block;order:0}
.view-hub .ng{order:1;margin-bottom:4px}
.view-hub .ng:not(.is-cur) .ng__list{display:none}
.view-hub .ng:not(.is-cur) .ng__label a{padding:5px 10px;color:var(--text);font:400 14px/1.4 var(--sans);letter-spacing:0;text-transform:none}
.view-hub .ng.is-cur .ng__label a{padding:0 10px;font:700 16px/1.4 var(--serif);letter-spacing:0;text-transform:none}
.view-hub .docs--home .side__k{display:none}
.view-hub .docs-hero{padding:56px 24px 40px;border:0;border-radius:0 0 var(--r-card) var(--r-card);box-shadow:none;background:linear-gradient(var(--wash),var(--white));text-align:center}
.view-hub .docs-hero .eyebrow{display:none}
.view-hub .docs-hero .hs{max-width:640px;height:60px;margin-inline:auto;font-size:17px;box-shadow:var(--sticker)}
.view-hub .chips{display:flex}
.view-hub .vids{display:grid}
.view-hub .hub-only{display:block}
.view-hub .cards--3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 24px}
.view-hub .cards--3 .card{padding:12px 4px;border:0;border-bottom:var(--hair);border-radius:0}
.view-hub .cards--3 .card:hover{box-shadow:none;transform:none}
.view-hub .cards--3 .card__d{display:none}
.view-hub .gcs{grid-template-columns:repeat(auto-fill,minmax(max(260px,calc((100% - 48px)/4)),1fr))}
.view-hub .gc{border:1px solid var(--line)}

/* ---- tablet + desktop grids (only here: see the header note) ---- */
@media (min-width:769px){
  .shell{grid-template-columns:240px minmax(0,1fr);gap:40px}
  .view-tabs .ng:not(.is-cur){display:none}
  .view-tabs .docs--home .shell,.view-hub .docs--home .shell{grid-template-columns:minmax(0,1fr)}
  .view-tabs .docs--home .side,.view-hub .docs--home .side{display:none}
  .view-hub .shell{grid-template-columns:220px minmax(0,1fr)}
}
@media (min-width:1200px){
  .shell{grid-template-columns:260px minmax(0,1fr) 220px;gap:48px}
  .shell--norail{grid-template-columns:260px minmax(0,1fr)}
  .view-hub .shell{grid-template-columns:220px minmax(0,1fr)}
  .rail{display:block}
  .toc-m{display:none}
  .view-hub .toc-m{display:block}
  .view-hub .rail{display:none}
}
@media (min-width:1600px){.vs__hint{display:inline}}
@media (max-width:1299px){.bar .btn{display:none}}
@media (max-width:1199px){.bar nav{display:none}}
@media (max-width:959px){.bar nav{display:none}.vs__k{display:none}}

/* ---- mobile (<=768px): nav becomes a drawer, rail folds into "On this page" ---- */
@media (max-width:768px){
  .bar{gap:10px}
  .dh__menu{display:inline-flex}
  .dh__search{margin-left:auto;width:40px;padding:0;justify-content:center}
  .dh__search-t,.dh__search kbd{display:none}
  .vs button{width:28px;height:28px}
  .side{position:fixed;z-index:60;top:0;bottom:0;left:0;width:min(300px,85vw);max-height:none;padding:24px 16px;background:var(--white);border-right:var(--hair);transform:translateX(-102%);transition:transform .2s ease-out,visibility .2s;visibility:hidden}
  .drawer-open .side{transform:none;visibility:visible}
  .scrim{position:fixed;inset:0;z-index:55;background:rgb(12 6 40/.4);display:none}
  .drawer-open .scrim{display:block}
  .docs-hero{padding:32px 22px;box-shadow:var(--sticker-sm)}
  .pn{grid-template-columns:1fr}
  .helpful__sep{display:none}
}
@media (max-width:480px){.brand span{display:none}}
@media (max-width:760px){footer .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}footer .wrap>div:first-child{grid-column:1/-1}}

/* view change: a short morph (View Transitions API; docs.js skips it under reduced motion) */
.side{view-transition-name:docs-side}
.doc>h1{view-transition-name:docs-h1}
.rail{view-transition-name:docs-rail}
.tabs{view-transition-name:docs-tabs}
::view-transition-group(*){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){*,::view-transition-group(*){animation:none!important;transition:none!important}}