/* design.css v2: /design/ in the Notes article layout. Tokens only (see base.css + tokens.css). */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ds-narrow{max-width:760px}
.ds-hero .page-title{margin:var(--s-4) 0 var(--s-3)}
.ds-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);margin-top:var(--s-5)}
.ds-meta,.ds-note{font-size:var(--t-sm);color:var(--fg-muted)}
.ds-facts{list-style:none;padding:0;margin:var(--s-6) 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
.ds-facts li{padding:var(--s-4);border-radius:var(--r);background:var(--bg-sunken);font-size:var(--t-sm);color:var(--fg-2);line-height:1.5}
.ds-facts b{display:block;color:var(--fg);font-weight:var(--w-semibold);margin-bottom:var(--s-1)}
.ds-agent{margin-top:var(--s-6)}.ds-agent .ds-note{margin:var(--s-1) 0 var(--s-3)}
.ds-agent .ai-btn,.ds-agent .copy{min-height:44px}
.ds-h3{font-size:var(--t-lg);font-weight:500;letter-spacing:-.02em;margin:var(--s-6) 0 var(--s-3)}
.ds-agent .ds-h3{margin-top:0}
/* layout: sticky index (desktop) / jump select (mobile) */
.ds-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s-7);padding-bottom:var(--s-8)}
.ds-index{position:sticky;top:calc(var(--hh,62px) + var(--s-5));align-self:start}
.ds-index-k{font-size:var(--t-xs);color:var(--fg-muted);margin:0 0 var(--s-2);text-transform:uppercase;letter-spacing:.06em}
.ds-index ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ds-index a{display:flex;align-items:center;min-height:44px;padding:0 var(--s-3);border-radius:var(--r-sm);color:var(--fg-2);text-decoration:none;font-size:var(--t-sm)}
.ds-index a:hover{background:var(--bg-sunken);color:var(--fg)}
.ds-index a[aria-current="true"]{background:var(--bg-sunken);color:var(--fg);box-shadow:inset 3px 0 0 var(--accent)}
.ds-index a:focus-visible,#ds-jump:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.ds-jumpbar{display:none}
.ds-sec{scroll-margin-top:calc(var(--hh,62px) + var(--s-5));padding-top:var(--s-6);min-width:0}
.ds-sec+.ds-sec{border-top:1px solid var(--line);margin-top:var(--s-7)}
.ds-sec>h2{font-size:var(--t-2xl);font-weight:500;letter-spacing:var(--track-tight)}
.ds-p{color:var(--fg-2);max-width:62ch}
.ds-p a,.ds-sec code{color:var(--fg)}
code{font-family:var(--mono);font-size:.85em}
/* tokens */
.ds-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s-3)}
.ds-sw,.ds-tv{display:grid;gap:2px;font-size:var(--t-xs);color:var(--fg-muted)}
.ds-sw i{display:block;height:56px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line-2);margin-bottom:var(--s-1)}
.ds-sw code,.ds-tv code{color:var(--fg)}
[data-val]{font-family:var(--mono);overflow-wrap:anywhere}
.ds-ramp{display:grid;gap:var(--s-4)}
.ds-ty{display:grid;gap:2px;min-width:0}.ds-ty-s{color:var(--fg);overflow-wrap:anywhere}.ds-ty-m{font-size:var(--t-xs);color:var(--fg-muted)}
.ds-spaces{display:grid;gap:var(--s-2)}
.ds-sp{display:grid;grid-template-columns:100px 60px 1fr;align-items:center;gap:var(--s-3);font-size:var(--t-xs);color:var(--fg-muted)}
.ds-sp i{order:3;display:block;height:12px;border-radius:calc(var(--r-sm) / 4);background:var(--accent)}
.ds-radii{display:flex;flex-wrap:wrap;gap:var(--s-4)}
.ds-rd{display:grid;gap:var(--s-1);justify-items:center;font-size:var(--t-xs)}
.ds-rd i{display:block;width:72px;height:72px;background:var(--bg-sunken);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.ds-motion{display:grid;gap:var(--s-3)}
.ds-track{position:relative;height:28px;border-radius:var(--r-pill);background:var(--bg-sunken)}
.ds-track i{position:absolute;left:4px;top:4px;width:20px;height:20px;border-radius:var(--r-pill);background:var(--accent);transition:transform var(--d-base) var(--ease)}
.ds-track.go i{transform:translateX(calc(var(--tw,200px) - 28px))}
@media (prefers-reduced-motion:reduce){.ds-track i{transition:none}}
/* components */
.ds-comp{margin-top:var(--s-6)}.ds-comp h3{font-size:var(--t-lg);font-weight:500}.ds-comp h3 code{font-size:var(--t-sm);color:var(--fg-muted)}
.ds-a11y{font-size:var(--t-sm);color:var(--fg-2);margin:var(--s-1) 0 var(--s-3)}
.ds-demo{border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--line-2);overflow:hidden;margin-bottom:var(--s-3)}
.ds-demo-head{display:flex;align-items:center;justify-content:space-between;padding:var(--s-1) var(--s-1) var(--s-1) var(--s-4);font-size:var(--t-xs);color:var(--fg-muted);border-bottom:1px solid var(--line)}
.ds-copy{min-height:44px!important;height:44px!important}
.ds-stage{padding:var(--s-5);background:var(--bg-page);display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:flex-start}
.ds-stage>.c-card,.ds-stage>.c-plate{width:min(100%,360px)}.ds-stage>.c-section{width:100%;padding-block:0}
.ds-stage>.c-sticky{width:100%}
.ds-stage .c-chip{min-height:44px}
.ds-stage p{margin:0}.ds-stage h3{font-size:var(--t-lg)}
.ds-code summary{display:flex;align-items:center;min-height:44px;padding:0 var(--s-4);cursor:pointer;font-size:var(--t-xs);color:var(--fg-2);border-top:1px solid var(--line)}
.ds-code summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.ds-code pre{margin:0;padding:var(--s-3) var(--s-4);background:var(--bg-sunken);font:12.5px/1.6 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--fg)}
.ds-ph{display:grid;place-items:center;aspect-ratio:16/9;width:100%;background:repeating-linear-gradient(135deg,var(--bg-sunken) 0 10px,var(--bg-raised) 10px 20px);color:var(--fg-muted);font-size:var(--t-xs)}
.c-plate .ds-ph{border-radius:calc(var(--r-lg) - 6px)}
/* themes */
.ds-chips{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-4)}.ds-chips .c-chip{min-height:44px}
.ds-themewrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s-5);align-items:start}
.ds-tvals{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.ds-tv i{display:block;height:36px;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--line-2)}
.ds-mini,.ds-wf-frame{border-radius:var(--r-lg);background:var(--bg-page);box-shadow:var(--shadow-1),var(--border);overflow:hidden}
.ds-mini-h,.ds-wf-h{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-4);background:var(--chrome);border-bottom:1px solid var(--line)}
.ds-mini-b{display:grid;gap:var(--s-3);padding:var(--s-5) var(--s-4);justify-items:start}
.ds-mini-f{padding:var(--s-3) var(--s-4);background:var(--bg-sunken)}
.ds-mini-card{width:100%;padding:var(--s-4)}
.ds-mini-btn{pointer-events:none;min-height:36px}
.ds-dot{width:16px;height:16px;border-radius:var(--r-pill);background:var(--accent);flex:none}
.ds-bar{display:block;height:8px;width:100%;border-radius:var(--r-pill);background:var(--line-2)}.ds-bar.s{width:66%}.ds-bar.xs{width:36%}
.ds-big{font-size:var(--t-xl);font-weight:500;letter-spacing:var(--track-tight);color:var(--fg)}
/* pages */
.ds-wfs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.ds-wf{margin:0}.ds-wf figcaption{font-size:var(--t-sm);color:var(--fg-2);margin-top:var(--s-2)}
.ds-wf-frame{display:grid;gap:var(--s-3);padding-bottom:var(--s-4);align-content:start;min-height:100%}
.ds-wf-frame>*:not(.ds-wf-h){margin-inline:var(--s-4)}.ds-wf-frame>.c-pill{justify-self:start}
.ds-wf-hero{display:grid;gap:var(--s-2)}
.ds-wf-lead{padding:var(--s-3);border-radius:var(--r);background:var(--bg-raised);box-shadow:var(--border),inset 0 3px 0 var(--accent);display:grid;gap:var(--s-2)}
.ds-wf-2,.ds-wf-2b{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.ds-ph-s{aspect-ratio:16/9;border-radius:var(--r);background:repeating-linear-gradient(135deg,var(--bg-sunken) 0 8px,var(--bg-raised) 8px 16px);box-shadow:var(--border)}
.ds-wf-band{padding:var(--s-3);border-radius:var(--r);background:var(--fg)}.ds-wf-band .ds-bar{background:var(--bg-page);opacity:.5}
.ds-wf-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2)}
.ds-wf-prompt{padding:var(--s-3);border-radius:var(--r);background:var(--bg-sunken);display:grid;gap:var(--s-2)}
.ds-files{flex-wrap:wrap;margin-top:var(--s-5)}.ds-files .post-link{min-height:44px}
@media (max-width:1023px){
 .ds-layout{grid-template-columns:minmax(0,1fr)}
 .ds-index{display:none}
 .ds-jumpbar{display:block;padding-inline:var(--s-4)}
 #ds-jump{width:100%;max-width:760px;display:block;margin:0 auto;min-height:44px;padding:0 var(--s-3);border-radius:var(--r);border:0;background:var(--bg-raised);color:var(--fg);box-shadow:var(--border-strong);font:var(--w-medium) var(--t-sm)/1 var(--font)}
 .ds-sec{scroll-margin-top:calc(var(--hh,62px) + 76px)}
}
@media (max-width:640px){
 .ds-facts{grid-template-columns:1fr}
 .ds-cta .c-btn{flex:1 1 100%;justify-content:center}
 .ds-themewrap,.ds-wfs{grid-template-columns:minmax(0,1fr)}
 .ds-sp{grid-template-columns:80px 50px 1fr}
 .ds-stage{padding:var(--s-4)}
}
.ds-sec:last-child{min-height:calc(100vh - var(--hh,62px) - 40px)}
.ds-sec h2:focus{outline:none}
.ds-jumpbar{top:var(--ds-hh,var(--hh,62px))}
@media (max-width:1023px){.ds-sec{scroll-margin-top:calc(var(--ds-hh,var(--hh,62px)) + 76px)}}
.ds-mini,.ds-wf-frame{box-shadow:var(--shadow-1);border:1px solid var(--line-2)}
.ds-wf-frame{min-height:0;height:100%}
.ds-wfs{align-items:stretch}
.ds-wf{display:flex;flex-direction:column}.ds-wf-frame{height:auto;flex:1}
/* Brandy: hero starts on the content column (right of the index) on desktop */
@media (min-width:1024px){.ds-hero .ds-narrow{max-width:var(--container);padding-left:calc(24px + 200px + var(--s-7))}.ds-hero .ds-narrow>*{max-width:760px}}
/* QA14 + QA15 tidy */
.ds-stage .c-card__foot{min-height:44px;display:flex;align-items:center}
.ds-sec:last-child{min-height:0}
.ds-agent{margin-top:var(--s-6)}
.art-hero .ds-agent{margin-top:var(--s-6)}
.ds-demo{margin-bottom:var(--s-2)}
.ds-demo-head{padding-block:2px}
.ds-t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-stage .c-section__head>div:first-child,.ds-stage .c-card>div:first-child:not([class]){font-size:var(--t-lg);font-weight:var(--w-medium);color:var(--fg)}
/* Rum staging: Agentic Design System layout + preview presets */
.ds-sec+.ds-sec{margin-top:120px}
.ds-comp{margin-top:64px}.ds-preview>.ds-comp:first-child{margin-top:var(--s-6)}
.ds-comp .ds-a11y{margin:0 0 var(--s-3)}
.ds-demo{border:1px solid var(--line-2);box-shadow:none;border-radius:calc(var(--r) + 4px);overflow:hidden;background:var(--bg-raised);margin:0 0 var(--s-3)}
.ds-demo-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-1) var(--s-1) var(--s-1) var(--s-4);border-bottom:1px solid var(--line);font-size:var(--t-sm);color:var(--fg)}
.ds-demo-head h3,.ds-demo-head>span{margin:0;font-size:var(--t-sm);font-weight:500;color:var(--fg);min-width:0}
.ds-demo-head h3 code,.ds-comp h3 code{font:400 13px/1 var(--mono);color:var(--fg-muted);margin-left:6px}
.ds-stage{padding:24px;background:var(--bg-page)}
.ds-stage>.c-plate{width:100%;max-width:360px;margin-inline:auto}
#c-plate .ds-stage{justify-content:center}
.ds-ghost{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--s-3);border:0;border-radius:var(--r-sm);background:transparent;color:var(--fg-2);font:500 13px var(--font);cursor:pointer}
.ds-copy.ds-ghost{height:44px!important;transform:none}
.ds-ghost svg{width:14px;height:14px;color:var(--accent)}
[data-mode="light"] .ds-ghost svg{color:var(--fg)}
.ds-ghost:hover{background:var(--bg-sunken);color:var(--fg)}
.ds-ghost:focus-visible,.ds-seg button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.ds-ghost.is-done{background:var(--bg-sunken);color:var(--fg)}
.ds-code summary{border-top:1px solid var(--line)}
/* preset control */
.ds-preset{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);margin:var(--s-4) 0 0;padding:var(--s-3) var(--s-4);border:1px solid var(--line-2);border-radius:calc(var(--r) + 4px)}
.ds-preset-k{flex:1 0 100%;margin:0;font-size:var(--t-xs);color:var(--fg-muted);text-transform:uppercase;letter-spacing:.06em}
.ds-seg{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px;padding:2px;border-radius:var(--r);background:var(--bg-sunken)}
.ds-seg-k{font-size:var(--t-xs);color:var(--fg-muted);padding:0 var(--s-2)}
.ds-seg button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--s-3);border:0;border-radius:calc(var(--r) - 2px);background:transparent;color:var(--fg-2);font:500 var(--t-sm) var(--font);cursor:pointer}
.ds-seg button i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);flex:none}
.ds-seg button[aria-checked="true"]{background:var(--bg-raised);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line-2)}
.ds-copytok{margin-left:auto}
/* presets: scoped to the demo area */
/* text and secondary tokens follow the surface so demos stay readable */
.ds-preview[data-surface="paper"] .ds-demo .ds-ghost svg{color:var(--fg)}
@media (max-width:640px){.ds-stage{padding:var(--s-4)}.ds-sec+.ds-sec{margin-top:80px}.ds-copytok{margin-left:0}}
.ds-demo .ds-a11y{margin:0;padding:var(--s-2) var(--s-4);font-size:var(--t-xs);color:var(--fg-muted);border-bottom:1px solid var(--line)}
.ds-preset{margin:var(--s-5) 0 0}