/* Living style guide (/design/). Page-only styles, prefix ds-. Uses tokens from rf.css only. */

.ds-head{padding-block:clamp(32px,5vw,56px) clamp(20px,3vw,32px);border-bottom:1px solid var(--line)}
.ds-head h1{margin-top:12px}
.ds-head .lead{margin-top:12px}
.ds-head .row{margin-top:20px}
.ds-body{padding-block:clamp(24px,4vw,40px) clamp(48px,8vw,96px)}
.ds-nav{max-height:calc(100vh - var(--hdr) - 48px);overflow:auto}
.ds-main{min-width:0}
.ds-sec{padding-block:40px 8px;border-top:1px solid var(--line)}
.ds-sec:first-child{border-top:0;padding-top:0}
.ds-sec>h2{margin-bottom:8px}
.ds-sec>h3{margin:32px 0 4px;font-size:15px}
.ds-sec>p{max-width:68ch;color:var(--mute)}
.ds-sec>p+p{margin-top:.8em}

/* demo frame: caption bar with class names, stage below */
.ds-demo{margin-top:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden;min-width:0}
.ds-cap{padding:8px 14px;border-bottom:1px solid var(--line);background:var(--panel2);font:12px/1.5 var(--mono);color:var(--mute);overflow-wrap:anywhere}
.ds-stage{padding:20px;min-width:0}
.ds-stage.page{background:var(--bg)}
.ds-stage.col{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.ds-stage.col>*{max-width:420px}
.ds-stage.wide>*{max-width:none}
.ds-stage>.tabs{margin-bottom:0}

/* principles */
.ds-prin{list-style:none;padding:0;margin:20px 0 0;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);counter-reset:p}
.ds-prin li{display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:4px 12px;padding:16px 18px;border-top:1px solid var(--line);counter-increment:p}
.ds-prin li:first-child{border-top:0}
.ds-prin li::before{content:counter(p,decimal-leading-zero);font:500 12px/1.9 var(--mono);color:var(--acc)}
.ds-prin strong{display:block}
.ds-prin span{grid-column:2;color:var(--mute)}
.ds-dd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
@media (max-width:640px){.ds-dd{grid-template-columns:minmax(0,1fr)}}
.ds-dd>div{border:1px solid var(--line);border-top-width:3px;border-radius:var(--r);padding:14px 16px;background:var(--panel)}
.ds-dd .do{border-top-color:var(--good)}.ds-dd .dont{border-top-color:var(--bad)}
.ds-dd h3{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.ds-dd .do h3{color:var(--good)}.ds-dd .dont h3{color:var(--bad)}
.ds-dd ul{margin:0;padding-left:1.1em;display:grid;gap:6px;font-size:14px;color:var(--mute)}

/* colour table */
.ds-colors{min-width:760px}
.ds-colors td{vertical-align:middle}
.ds-colors tr.ds-grp th{background:var(--panel2);font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding-block:6px}
.ds-sw{display:block;width:44px;height:28px;border-radius:var(--r-sm);border:1px solid var(--line-strong)}
.ds-cr{display:inline-flex;gap:8px;align-items:center;white-space:nowrap;font-size:12.5px}
.ds-cr .num{font-size:12.5px}
.ds-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:16px}
.ds-strip div{padding:44px 12px 10px;font:12px/1.4 var(--mono)}
.ds-strip .a{background:var(--bg)}.ds-strip .b{background:var(--panel)}.ds-strip .c{background:var(--acc);color:var(--acc-fg)}.ds-strip .d{background:var(--ember);color:var(--ember-fg)}.ds-strip .e{background:var(--fg);color:var(--bg)}
@media (max-width:560px){.ds-strip div{padding:36px 8px 8px;font-size:11px}}
.ds-sw-bg{background:var(--bg)}
.ds-sw-side{background:var(--side)}
.ds-sw-panel{background:var(--panel)}
.ds-sw-panel2{background:var(--panel2)}
.ds-sw-fg{background:var(--fg)}
.ds-sw-mute{background:var(--mute)}
.ds-sw-faint{background:var(--faint)}
.ds-sw-line{background:var(--line)}
.ds-sw-line2{background:var(--line2)}
.ds-sw-line-strong{background:var(--line-strong)}
.ds-sw-acc{background:var(--acc)}
.ds-sw-acc-fg{background:var(--acc-fg)}
.ds-sw-acc-soft{background:var(--acc-soft)}
.ds-sw-acc-line{background:var(--acc-line)}
.ds-sw-ember{background:var(--ember)}
.ds-sw-ember-fg{background:var(--ember-fg)}
.ds-sw-ember-hover{background:var(--ember-hover)}
.ds-sw-ember-active{background:var(--ember-active)}
.ds-sw-ember-line{background:var(--ember-line)}
.ds-sw-good{background:var(--good)}
.ds-sw-good-soft{background:var(--good-soft)}
.ds-sw-bad{background:var(--bad)}
.ds-sw-bad-soft{background:var(--bad-soft)}
.ds-sw-warn{background:var(--warn)}
.ds-sw-warn-soft{background:var(--warn-soft)}
.ds-sw-info{background:var(--info)}
.ds-sw-info-soft{background:var(--info-soft)}

/* type */
.ds-type{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 20px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line2)}
.ds-type:last-child{border-bottom:0}
.ds-type>code{background:none;border:0;padding:0;color:var(--mute);font-size:12px}
@media (max-width:640px){.ds-type{grid-template-columns:minmax(0,1fr)}}
.ds-zh{font-size:17px}

/* spacing, radius, elevation */
.ds-bars{display:grid;gap:8px}
.ds-bars div{display:grid;grid-template-columns:5.5rem 3rem minmax(0,1fr);align-items:center;gap:12px;font:12px var(--mono);color:var(--mute)}
.ds-bar{display:block;height:12px;background:var(--ember);border-radius:2px;width:calc(var(--v,0)*1px);max-width:100%}
.ds-boxes{display:flex;flex-wrap:wrap;gap:16px}
.ds-box{width:112px;height:72px;display:grid;place-items:center;border:1px solid var(--line-strong);background:var(--panel2);font:12px var(--mono);color:var(--mute)}
.ds-box.r-sm{border-radius:var(--r-sm)}.ds-box.r{border-radius:var(--r)}.ds-box.r-lg{border-radius:var(--r-lg)}.ds-box.r-pill{border-radius:var(--r-pill)}
.ds-box.e0{background:var(--panel);border-color:var(--line)}.ds-box.e1{background:var(--panel);border-color:var(--line);box-shadow:var(--sh1)}.ds-box.e2{background:var(--panel);border-color:var(--line);box-shadow:var(--sh2)}

/* layout demos */
.ds-cell{padding:10px 12px;border:1px dashed var(--line-strong);border-radius:var(--r-sm);background:var(--panel2);font:12px var(--mono);color:var(--mute);text-align:center}

/* misc */
.ds-ledger{max-width:420px}
.ds-tabpanel p{max-width:60ch}
.ds-anat{display:grid;gap:8px;font-size:14px}
.ds-list{margin:0;padding-left:1.2em;display:grid;gap:6px;color:var(--mute)}
.ds-list strong{color:var(--fg)}
.ds-mt{margin-top:16px}.ds-mt-sm{margin-top:10px}
.ds-h1,.ds-h2,.ds-h3,.ds-h4{font-weight:600;line-height:1.2;text-wrap:balance}
.ds-h1{font-size:var(--fs-2xl);letter-spacing:-.025em}.ds-h2{font-size:var(--fs-xl);letter-spacing:-.018em}.ds-h3{font-size:var(--fs-md)}.ds-h4{font-size:14px}
.ds-nav .caps{margin:14px 0 4px;padding:0 10px}
.ds-narrow{max-width:260px}
.ds-sec>.ds-demo+p{margin-top:20px}
.ds-list{margin-top:12px}
.ds-colors td:nth-child(2) code{white-space:nowrap}
@media (max-width:860px){
  .ds-nav{display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;padding-bottom:10px;border-bottom:1px solid var(--line);scrollbar-width:thin;max-height:none}
  .ds-nav .caps{display:none}
  .ds-nav a{white-space:nowrap;flex:none;min-height:36px;display:inline-flex;align-items:center}
}