/* Docs chrome - everything here is prefixed d- so it can never collide with
   a component class being documented. Built from the same tokens. */
html{scroll-padding-top:24px;}
body.d{background:var(--surface);font-size:var(--t-ui);}
.d-app{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100dvh;}

/* ---- sidebar ---- */
.d-side{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;padding:16px 12px 12px;}
.d-brand{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 8px;text-decoration:none;color:var(--ink);}
.d-brand img{height:30px;width:auto;display:block;}
[data-theme="dark"] .d-brand img,[data-theme="dark"] .d-invert{filter:invert(1);}
.d-brand span{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-left:auto;}
.d-search{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;margin:10px 0 8px;padding:0 8px 0 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--paper);color:var(--mut);cursor:pointer;text-align:left;}
.d-search:hover{border-color:var(--tint);}
.d-search .kbd{margin-left:auto;}
.d-nav{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 0 16px;scrollbar-width:thin;margin:0 -4px;padding-inline:4px;}
.d-nav h3{font-size:var(--t-ui);font-weight:400;color:var(--mut);padding:18px 8px 6px;}
.d-nav h3:first-child{padding-top:6px;}
.d-nav a{display:flex;align-items:center;gap:8px;min-height:32px;padding:0 8px;border-radius:var(--r-sm);color:var(--ink-2);text-decoration:none;}
.d-nav a:hover{background:var(--surface-2);color:var(--ink);}
.d-nav a[aria-current="page"]{background:var(--surface-3);color:var(--ink);font-weight:var(--w-head);}
.d-nav a .d-st{margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--line-2);}
.d-nav a .d-st.shipped{background:var(--ink);}
.d-nav a .d-st.tools{background:var(--ink-3);}
.d-foot{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--line);}
.d-foot .seg button{min-height:36px;}
.d-foot .btn{min-height:40px;}

/* ---- main panel ---- */
.d-main{padding:8px 8px 8px 0;min-width:0;}
.d-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);min-height:calc(100dvh - 16px);display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:32px;padding:0 32px 0 56px;}
.d-doc{max-width:860px;width:100%;padding:56px 0 64px;min-width:0;}
.d-toc{position:sticky;top:0;align-self:start;padding:64px 0 24px;max-height:100dvh;overflow:auto;}
.d-toc b{display:block;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:400;margin-bottom:8px;}
.d-toc a{display:block;padding:5px 0 5px 12px;border-left:1px solid var(--line);color:var(--mut);text-decoration:none;font-size:13px;line-height:1.4;}
.d-toc a:hover{color:var(--ink);}
.d-toc a.on{color:var(--ink);border-left-color:var(--ink);}

/* ---- page head ---- */
.d-head{padding-bottom:28px;margin-bottom:8px;border-bottom:1px solid var(--line);}
.d-eyebrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.d-head h1{font-size:var(--t-sub-lg);font-weight:var(--w-head);letter-spacing:-.025em;line-height:1.1;}
.d-head h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ink-2);}
.d-head .d-lede{margin-top:12px;font-size:var(--t-body);line-height:1.6;color:var(--mut);max-width:62ch;}
.d-used{margin-top:14px;font-size:var(--t-ui);color:var(--mut);display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center;}
.d-used a{color:var(--ink-2);}

/* ---- body copy ---- */
.d-doc > h2,.d-doc section > h2{font-size:var(--t-sub);font-weight:var(--w-head);letter-spacing:-.015em;line-height:1.2;margin:48px 0 14px;}
.d-doc h3{font-size:var(--t-body);font-weight:var(--w-head);margin:28px 0 10px;}
.d-doc > p,.d-doc li,.d-doc section > p,.d-p{font-size:16px;line-height:1.65;color:var(--ink-body);max-width:68ch;}
.d-doc > p + p,.d-doc section > p + p{margin-top:12px;}
.d-doc > ul,.d-doc > ol,.d-doc section > ul{margin:10px 0 0 20px;display:grid;gap:6px;}
.d-doc p a,.d-doc li a,.d-doc td a{color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--tint);}
.d-doc code{font-family:var(--mono);font-size:.86em;padding:.1em .35em;border-radius:var(--r-xs);background:var(--surface-2);color:var(--ink);}
.d-doc strong{color:var(--ink);font-weight:var(--w-strong);}

/* ---- example ---- */
.d-ex{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);margin:16px 0 8px;overflow:hidden;}
.d-stage{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;padding:40px 28px;min-height:140px;position:relative;}
.d-stage.col{flex-direction:column;align-items:stretch;justify-content:flex-start;}
.d-stage.block{display:block;}
.d-stage.left{justify-content:flex-start;}
.d-stage.surface{background:var(--surface);}
.d-stage.tall{min-height:320px;}
.d-stage.flush{padding:0;}
.d-stage.narrow > *{width:min(360px,100%);}
.d-stage.inv{background:var(--ink-inv);}
.d-code{border-top:1px solid var(--line);background:var(--surface);}
.d-code summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 10px 0 14px;cursor:pointer;color:var(--ink-3);font-size:13px;}
.d-code summary::-webkit-details-marker{display:none;}
.d-code summary .icon{transition:transform var(--d-move) var(--ease-snap);}
.d-code[open] summary .icon{transform:rotate(90deg);}
.d-code summary:hover{color:var(--ink);}
.d-copy{margin-left:auto;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:var(--r-sm);background:none;color:var(--ink-3);cursor:pointer;}
.d-copy:hover{background:var(--surface-2);color:var(--ink);}
.d-code pre{margin:0;padding:4px 18px 18px;overflow-x:auto;font-family:var(--mono);font-size:12.5px;line-height:1.65;color:var(--ink-2);tab-size:2;max-height:440px;}
.d-code .t{color:var(--ink);} .d-code .a{color:var(--ink-3);} .d-code .s{color:var(--ink-body);font-style:italic;} .d-code .c{color:var(--mut);}

/* ---- token tables + swatches ---- */
.d-sw{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin:16px 0 8px;}
.d-sw figure{margin:0;}
.d-chip{display:block;width:100%;border:0;cursor:copy;background:var(--c);height:84px;border-radius:var(--r-md);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent);position:relative;overflow:hidden;}
.d-chip i{position:absolute;inset:auto 0 0 50%;top:0;background:var(--dk);}
.d-sw figcaption{padding-top:8px;display:grid;gap:2px;}
.d-sw figcaption b{font-weight:var(--w-head);font-size:13px;color:var(--ink);}
.d-sw figcaption code{background:none!important;padding:0!important;font-size:12px!important;color:var(--ink-3)!important;}
.d-sw figcaption span{font-family:var(--mono);font-size:11px;color:var(--mut);}
.d-tbl{width:100%;border-collapse:collapse;margin:16px 0 8px;font-size:13.5px;}
.d-tbl th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:400;padding:0 12px 10px 0;border-bottom:1px solid var(--line);}
.d-tbl td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-body);line-height:1.5;}
.d-tbl td:first-child{white-space:nowrap;}
.d-tbl code{white-space:nowrap;}
.d-scroll{overflow-x:auto;}

/* ---- do / don't ---- */
.d-dd{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0 8px;}
.d-dd > div{border:1px solid var(--line);border-radius:var(--r-md);padding:18px;border-top:3px solid var(--ok);}
.d-dd > div.dont{border-top-color:var(--danger);}
.d-dd b{display:flex;align-items:center;gap:6px;font-size:var(--t-label);font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px;color:var(--ok);font-weight:400;}
.d-dd .dont b{color:var(--danger);}
.d-dd p,.d-dd li{font-size:14.5px;line-height:1.6;color:var(--ink-body);}
.d-dd ul{margin-left:18px;display:grid;gap:4px;}
.d-note{margin:16px 0 8px;padding:14px 18px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);font-size:14.5px;line-height:1.6;color:var(--ink-body);}
.d-note b{color:var(--ink);font-weight:var(--w-head);}

/* ---- prev / next ---- */
.d-pn{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:64px;}
.d-pn a{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;transition:border-color var(--d-move);}
.d-pn a:hover{border-color:var(--ink-3);}
.d-pn small{display:block;color:var(--mut);margin-bottom:4px;}
.d-pn b{font-weight:var(--w-head);font-size:var(--t-body);}
.d-pn .n{text-align:right;grid-column:2;}

/* ---- intro bento ---- */
.d-hero{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;min-height:300px;display:grid;place-items:center;text-align:center;background:var(--paper);}
.d-hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;-webkit-mask-image:radial-gradient(55% 65% at 50% 50%,transparent 35%,#000 100%);mask-image:radial-gradient(55% 65% at 50% 50%,transparent 35%,#000 100%);}
[data-theme="dark"] .d-hero img.bg{filter:invert(1);opacity:.35;}
.d-hero .in{position:relative;padding:40px 24px;}
.d-hero h1{font-size:var(--t-head);font-weight:var(--w-head);letter-spacing:-.035em;line-height:1.02;}
.d-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ink-2);}
.d-hero p{margin:16px auto 0;max-width:46ch;font-size:var(--t-body);line-height:1.55;color:var(--mut);}
.d-bento{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:12px;}
.d-tile{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:28px;grid-column:span 2;position:relative;}
.d-tile.w3{grid-column:span 3;} .d-tile.w4{grid-column:span 4;} .d-tile.w6{grid-column:span 6;}
.d-tile > small{position:absolute;left:16px;top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}
.d-tile > small a{color:inherit;text-decoration:none;}
.d-tile > small a:hover{color:var(--ink);}
.d-grid-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:16px;}
.d-grid-links a{display:block;border:1px solid var(--line);border-radius:var(--r-md);padding:16px;text-decoration:none;color:var(--ink);transition:border-color var(--d-move);}
.d-grid-links a:hover{border-color:var(--ink-3);}
.d-grid-links b{display:block;font-weight:var(--w-head);font-size:15px;margin-bottom:4px;}
.d-grid-links span{font-size:13px;line-height:1.5;color:var(--mut);}
.d-grid-links img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-sm);margin-bottom:12px;border:1px solid var(--line);}

/* ---- demo helpers (docs only) ---- */
.d-w-full{width:100%;}
.d-w-sm{width:min(360px,100%);}
.d-w-md{width:min(520px,100%);}
.d-stack{display:grid;gap:14px;}
.d-spec{display:flex;align-items:baseline;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);}
.d-spec > code{flex:none;width:120px;}
.d-spec > span:last-child{min-width:0;}
.d-box{width:96px;height:96px;background:var(--surface-2);border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--ink-3);}
.d-bar{height:16px;background:var(--ink);border-radius:2px;}
.d-motion{width:44px;height:44px;border-radius:var(--r-sm);background:var(--ink);}
.d-motion-track{position:relative;height:44px;border-bottom:1px dashed var(--line-2);}
.d-motion-track .d-motion{position:absolute;left:0;top:0;}
.d-motion-track.go .d-motion{left:calc(100% - 44px);}

/* ---- search ---- */
.d-k{width:min(560px,calc(100vw - 32px));padding:0;margin:12vh auto auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);color:var(--ink);box-shadow:var(--shadow-pop);}
.d-k::backdrop{background:color-mix(in srgb,var(--ink-inv) 30%,transparent);}
.d-k input{width:100%;border:0;border-bottom:1px solid var(--line);padding:0 18px;height:56px;font-size:var(--t-body);background:none;outline:none;}
.d-k ul{list-style:none;max-height:min(420px,60vh);overflow:auto;padding:6px;}
.d-k li a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:var(--r-sm);text-decoration:none;color:var(--ink-2);}
.d-k li a small{margin-left:auto;color:var(--mut);font-size:12px;}
.d-k li a[aria-selected="true"],.d-k li a:hover{background:var(--surface-2);color:var(--ink);}
.d-k .empty{padding:18px;color:var(--mut);}

/* ---- mobile ---- */
.d-top{display:none;}
@media (max-width:1180px){.d-panel{grid-template-columns:minmax(0,1fr);padding:0 40px;}.d-toc{display:none;}}
@media (max-width:900px){
  .d-app{grid-template-columns:1fr;}
  .d-top{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:var(--z-nav);padding:6px 12px 6px 16px;background:var(--surface);border-bottom:1px solid var(--line);}
  .d-top img{height:26px;display:block;}
  .d-side{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:var(--z-overlay);background:var(--surface);border-right:1px solid var(--line);transform:translateX(-100%);transition:transform var(--d-move) var(--ease-snap);}
  body.d-open .d-side{transform:none;box-shadow:var(--shadow-pop);}
  .d-main{padding:0;}
  .d-panel{border-radius:0;border-width:0;padding:0 16px;}
  .d-doc{padding:28px 0 48px;}
  .d-bento{grid-template-columns:1fr 1fr;}
  .d-tile,.d-tile.w3,.d-tile.w4,.d-tile.w6{grid-column:span 2;}
  .d-dd{grid-template-columns:1fr;}
  .d-hero h1{font-size:var(--t-sub-lg);}
}
@media (prefers-reduced-motion:reduce){.d-side,.d-code summary .icon,.d-pn a{transition:none;}}

/* ---- foundation demo helpers ---- */
.d-md{font-size:var(--t-sub-md);}
.d-bar.d-s1{width:var(--s-1)}.d-bar.d-s2{width:var(--s-2)}.d-bar.d-s3{width:var(--s-3)}.d-bar.d-s4{width:var(--s-4)}.d-bar.d-s5{width:var(--s-5)}.d-bar.d-s6{width:var(--s-6)}.d-bar.d-s7{width:var(--s-7)}.d-bar.d-s8{width:var(--s-8)}.d-bar.d-s10{width:var(--s-10)}.d-bar.d-s11{width:var(--s-11)}.d-bar.d-s14{width:var(--s-14)}.d-bar.d-s16{width:var(--s-16)}.d-bar.d-s21{width:var(--s-21)}
.d-box.r-xs{border-radius:var(--r-xs)}.d-box.r-sm{border-radius:var(--r-sm)}.d-box.r-md{border-radius:var(--r-md)}.d-box.r-lg{border-radius:var(--r-lg)}.d-box.r-device{border-radius:var(--r-device)}.d-box.r-pill{border-radius:var(--r-pill)}
.d-stack{justify-items:center;}
.pop.d-static{position:static;}
.d-gray{filter:grayscale(1);transition:filter var(--d-slow) ease;border-radius:var(--r-md);width:min(360px,100%);height:auto;}
.d-gray:hover{filter:none;}
.d-focus{outline:2px solid var(--ink);outline-offset:2px;}
.d-motion-track{width:100%;}
.d-motion-track .d-motion{transition:left 900ms var(--ease-out);}
.d-motion-track.ease-io .d-motion{transition-timing-function:var(--ease-io);}
.d-motion-track.ease-snap .d-motion{transition-timing-function:var(--ease-snap);}
@media (prefers-reduced-motion:reduce){.d-motion-track .d-motion,.d-gray{transition:none;}}
.d-drawer-body{margin-top:20px;}
.d-p25{--p:.25}.d-p40{--p:.4}.d-p60{--p:.6}.d-p90{--p:.9}
.d-w-60{width:60%}.d-w-40{width:40%}
.d-row{display:flex;align-items:center;gap:12px;}
.d-row .skel-circle{flex:none;}

/* ---- pattern demo helpers ---- */
.d-mt{margin-top:20px;}
.d-thumb{height:180px;width:auto;border-radius:var(--r-md);border:1px solid var(--line);}
.d-vid-demo{--vp:.42;}
.d-center{text-align:center;margin-inline:auto;max-width:13ch;}
.d-hero-demo{display:grid;gap:40px;justify-items:center;padding:40px 0;}
.d-cred{font-size:var(--t-body);color:var(--ink-2);text-align:center;}
.d-dot{color:var(--ink-3);margin:0 .5em;}
.d-case{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center;}
.d-case .case-link{margin-top:6px;}
.d-case .prose{margin:14px 0 18px;}
.pins{border-radius:var(--r-md);overflow:visible;}
.d-pinimg{display:block;width:100%;height:auto;border-radius:var(--r-md);border:1px solid var(--line);}
.d-pin1{--x:22%;--y:30%;}.d-pin2{--x:70%;--y:62%;}
.d-grid-demo{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:120px auto 120px;gap:10px;padding:10px;}
.d-grid-cap{padding:20px!important;}
.d-grid-demo img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-sm);filter:grayscale(1);transition:filter var(--d-slow) ease;}
.d-grid-demo img:hover{filter:none;}
.d-grid-cap{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:0 20px;}
.d-grid-cap .h3{max-width:20ch;}
.d-drum{display:inline-grid;vertical-align:middle;line-height:1.05;text-align:left;}
.d-drum span{font-size:.5em;color:var(--mut);opacity:.5;}
.d-drum b{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ink-2);}
.d-tool{display:grid;grid-template-columns:260px 1fr;min-height:420px;background:var(--surface-2);}
.d-tool-rail{background:var(--paper);border-right:1px solid var(--line);padding:20px;display:grid;gap:14px;align-content:start;}
.d-tool-stage{position:relative;display:grid;place-items:center;padding:28px 28px 84px;}
.d-tool-stage img{width:100%;max-width:520px;height:auto;border-radius:var(--r-sm);}
.d-dock{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:4px;padding:4px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:var(--shadow-pop);white-space:nowrap;}
@media (max-width:900px){.d-case,.d-tool{grid-template-columns:1fr;}.d-grid-demo{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-rows:100px;}.d-dock .kbd{display:none;}}
@media (prefers-reduced-motion:reduce){.d-grid-demo img{transition:none;}}
@media (max-width:900px){.d-tbl{display:block;overflow-x:auto;}.d-doc li code,.d-doc p code{overflow-wrap:anywhere;}}
.d-hero .btn-group{justify-content:center;margin-top:24px;}
.d-chip i{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent);}
@media (max-width:900px){.d-hero img.bg{opacity:.22;}.d-hero p{font-size:var(--t-ui);}}