/* ReuseForge simulator (/demo/). Page-specific CSS on top of rf.css tokens. No inline styles anywhere:
   dynamic widths come from the --w custom property set by demo.js. */

.demo-page{--demo-top:calc(var(--hdr) + 84px)}
.demo-page :is(h2,h3,input,textarea,select,button,summary,[tabindex="-1"]){scroll-margin-top:var(--demo-top)}

/* ---------- page head ---------- */
.demo-head{padding-block:clamp(32px,5vw,60px) clamp(16px,2.5vw,24px)}
.demo-head h1{margin-top:.5em;max-width:18ch;font-size:clamp(34px,5.2vw,56px);line-height:1.06;letter-spacing:-.032em}
:lang(zh) .demo-head h1{max-width:none;font-size:clamp(28px,5vw,48px);line-height:1.2;letter-spacing:0}
.demo-head .lead{margin-top:.9em;max-width:62ch}
.demo-head-cta{margin-top:20px;gap:8px 12px}

/* ---------- persistent banner: contained like the other notes, sticky on wide screens ---------- */
.demo-banner-wrap{z-index:40;padding-block:0 4px}
.demo-banner{background:var(--warn-soft);border:1px solid color-mix(in oklch,var(--warn) 40%,transparent);border-radius:var(--r);color:var(--fg)}
.demo-banner-in{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:10px 14px;font-size:14px;line-height:1.45}
.demo-banner strong{font-weight:600;font-size:15px}
.demo-banner .badge{background:var(--panel);flex:none}
@media (min-width:821px){.demo-banner-wrap{position:sticky;top:calc(var(--hdr) - 1px);background:var(--bg);padding-block:8px}}

/* ---------- tabs ---------- */
.demo-tabs-wrap{padding-top:16px}
.demo-tabs{min-height:44px}
.demo-tabs [role=tab]{min-height:44px}

/* ---------- workbench ---------- */
.demo-bench{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:clamp(16px,3vw,32px);align-items:start;padding-block:24px clamp(40px,6vw,72px)}
.demo-side,.demo-main{display:grid;gap:16px;min-width:0;align-content:start}
@media (max-width:900px){.demo-bench{grid-template-columns:minmax(0,1fr)}}
.demo-side h2,.demo-main h2{font-size:18px;letter-spacing:-.012em}
.demo-main h3{font-size:15px}
.demo-side .sheet>.hd,.demo-main .sheet>.hd{padding-top:16px}
.demo-sub{color:var(--mute);font-size:14px;margin-top:4px;max-width:62ch}
.demo-actions{margin-top:16px}
.demo-actions .btn{flex:none}
.demo-examples{margin-top:16px;padding-top:14px;border-top:1px solid var(--line2)}
.demo-examples .label{color:var(--mute);margin-bottom:8px}
.demo-examples .btn{white-space:normal;text-align:left;line-height:1.3;padding-block:6px;min-height:34px}
.demo-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.demo-fields .field{margin-top:0}
.demo-fs{border:1px solid var(--line);border-radius:var(--r);padding:4px 12px 14px;margin:16px 0 0;min-width:0}
.demo-fs legend{font-size:13px;font-weight:600;padding:0 6px}
.demo-fs .field{margin-top:10px}
.demo-form-title{margin-bottom:2px}
.demo-hint{font-size:13.5px;color:var(--mute);max-width:62ch}
.demo-hint strong{color:var(--fg);font-weight:600}
.demo-inline{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.demo-inline .field{margin-top:0;flex:1 1 140px;min-width:0}
.demo-inline .btn{flex:none}
.demo-err-row{flex:1 0 100%}
.demo-sep{margin-top:16px}
.demo-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:12px}
.demo-links .help{margin:0;max-width:52ch}

/* ---------- details folds ---------- */
.demo-fold{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);min-width:0}
.demo-fold>summary{cursor:pointer;font-weight:500;padding:0 16px;min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;border-radius:var(--r)}
.demo-fold>summary::-webkit-details-marker{display:none}
.demo-fold>summary::after{content:"+";font-family:var(--mono);color:var(--mute)}
.demo-fold[open]>summary::after{content:"\2212"}
.demo-fold>summary:hover{background:var(--panel2)}
.demo-fold[open]>summary{border-bottom:1px solid var(--line2);border-end-start-radius:0;border-end-end-radius:0}
.demo-fold>.bd{padding:14px 16px 16px}
.demo-fold.flat{border:0;background:none}
.demo-fold.flat>summary{padding:0;min-height:40px;justify-content:flex-start;gap:8px;color:var(--acc);font-weight:500;font-size:14px}
.demo-fold.flat>summary::after{order:-1}
.demo-fold.flat[open]>summary{border:0}
.demo-fold.flat>.bd{padding:8px 0 0}

/* ---------- your blocks, log ---------- */
.demo-mine{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:6px}
.demo-mine li{display:flex;gap:10px;align-items:center;justify-content:space-between;border:1px solid var(--line2);border-radius:var(--r-sm);padding:6px 8px 6px 12px;font-size:13.5px}
.demo-mine li>span{min-width:0;overflow-wrap:anywhere}
.demo-log{list-style:none;margin:10px 0 0;padding:0;font:12px/1.5 var(--mono);max-height:260px;overflow:auto;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--panel2)}
.demo-log li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 10px;padding:6px 10px;border-bottom:1px solid var(--line2)}
.demo-log li:last-child{border-bottom:0}
.demo-log .lg-id{color:var(--faint)}
.demo-log .lg-kind{color:var(--fg);overflow-wrap:anywhere}
.demo-log time{color:var(--faint)}
.demo-log .lg-data{grid-column:2/-1;color:var(--mute);overflow-wrap:anywhere}
.demo-log-empty{margin-top:10px;font-size:13.5px;color:var(--mute)}
.demo-stat{font-size:13px;color:var(--mute)}
.demo-stat .mono{color:var(--fg)}

/* ---------- metrics ---------- */
.demo-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:14px 0 0}
.demo-metrics>div{background:var(--panel);padding:12px 14px;min-width:0}
.demo-metrics dt{font-size:12.5px;color:var(--mute)}
.demo-metrics dd{margin:2px 0 0;font:600 clamp(18px,2.2vw,22px)/1.25 var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
@media (max-width:560px){.demo-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
.demo-risk .good{color:var(--good)}.demo-risk .warn{color:var(--warn)}.demo-risk .bad{color:var(--bad)}
.demo-metrics dd.demo-risk,.demo-risk{font-family:var(--sans);letter-spacing:-.01em}
.demo-risk .dim{color:var(--mute);font-weight:500;font-family:var(--mono);font-size:.82em}
.demo-metrics.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.demo-metrics.two dd{font-size:clamp(15px,1.6vw,17px)}

/* ---------- tables ---------- */
.demo-table{min-width:0}
.demo-table td,.demo-table th{padding-inline:10px}
.demo-table td:first-child,.demo-table th:first-child{padding-left:0}
.demo-table td:last-child,.demo-table th:last-child{padding-right:0}
.demo-table .sub{display:block;font-size:12.5px;color:var(--mute);margin-top:2px;max-width:60ch}
.demo-table .hits{font:12px var(--mono);color:var(--faint)}
.demo-table tfoot td{border-top:1px solid var(--line);border-bottom:0;font-weight:600}
.demo-table .addr{font:12px var(--mono);color:var(--mute);overflow-wrap:anywhere;white-space:normal;max-width:30ch}
.demo-table .num.wrap-ok{white-space:normal}
.demo-table .tag-rec{margin-left:6px}
.demo-table .btn{white-space:nowrap}
.demo-table .badge{white-space:normal;text-align:left;height:auto;min-height:22px;line-height:1.35;padding-block:2px;border-radius:var(--r-sm)}
.fit>i,.progress>i{width:var(--w,0%)}
.progress{height:8px}
.fit{width:52px}
.build{color:var(--warn);font-weight:500}
@media (max-width:640px){
  .demo-table.stack{display:block}
  .demo-table.stack thead{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .demo-table.stack tbody,.demo-table.stack tr,.demo-table.stack td{display:block}
  .demo-table.stack tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:12px 0;border-bottom:1px solid var(--line2)}
  .demo-table.stack tr:last-child{border-bottom:0}
  .demo-table.stack td{border:0;padding:0}
  .demo-table.stack td.c-need{font-weight:600}
  .demo-table.stack td.c-need{grid-column:1;grid-row:1}
  .demo-table.stack td.c-cost{grid-column:2;grid-row:1;text-align:right}
  .demo-table.stack td.c-what{grid-column:1/-1;grid-row:2}
  .demo-table.stack td.c-fit{grid-column:1/-1;grid-row:3;display:flex;align-items:center;justify-content:flex-start;gap:10px;margin-top:4px}
  .demo-table.stack td.c-fit .fit{flex:0 0 96px}
  .demo-table.cards{display:block}
  .demo-table.cards thead{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .demo-table.cards tbody,.demo-table.cards tfoot,.demo-table.cards tr,.demo-table.cards td{display:block}
  .demo-table.cards tr{padding:12px 0;border-bottom:1px solid var(--line2)}
  .demo-table.cards tr:last-child{border-bottom:0}
  .demo-table.cards td{border:0;padding:4px 0}
  .demo-table.cards td:empty{display:none}
  .demo-table.cards tfoot td.num{display:flex;justify-content:space-between;gap:12px}
  .demo-table.cards tfoot td[data-label]::before{display:inline;margin-right:12px}
  .demo-table.cards td[data-label]::before{content:attr(data-label);display:block;font-size:12px;color:var(--faint)}
}

/* ---------- steps (timeline) ---------- */
.demo-steps{margin:14px 0 4px}
.demo-steps li{position:relative;padding-top:8px;padding-right:8px;min-width:0}
.demo-steps li::before{content:counter(s,decimal-leading-zero);display:block;font:500 11px/1 var(--mono);color:var(--faint);margin-bottom:4px}
.demo-steps li .st{display:block;font:12px/1.4 var(--mono);color:var(--faint);margin-top:2px}
.demo-steps li.done .st{color:var(--good)}
.demo-steps li.cur .st{color:var(--acc)}
.demo-steps.refund li.cur .st{color:var(--bad)}
.demo-steps.s3{grid-template-columns:repeat(3,minmax(0,1fr))}
.demo-steps.s3 li{row-gap:0}
@media (max-width:560px){.demo-steps.s3{grid-template-columns:repeat(3,minmax(0,1fr))}.demo-steps li{font-size:12.5px}}

/* ---------- escrow, receipt ---------- */
.demo-head-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.demo-order{font:13px/1.5 var(--mono);color:var(--mute);margin-top:6px;overflow-wrap:anywhere}
.demo-order b{font-weight:500;color:var(--fg)}
.demo-box{border:1px solid var(--line);border-radius:var(--r);background:var(--panel2);padding:12px 14px;margin-top:14px;min-width:0}
.demo-box h3{margin-bottom:8px}
.demo-receipt{border:1px solid var(--line-strong);border-radius:var(--r);background:var(--panel2);padding:14px 16px;margin-top:14px;min-width:0}
.demo-receipt .rc-hd{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font:12px var(--mono);color:var(--mute);padding-bottom:10px;border-bottom:1px dashed var(--line-strong);margin-bottom:6px}
.demo-receipt h3{margin-bottom:4px}
.demo-basket{list-style:none;margin:0;padding:0}
.demo-basket li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line2)}
.demo-basket li:last-child{border-bottom:0}
.demo-basket .mono{white-space:nowrap}
.demo-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.demo-btns .btn{white-space:normal;text-align:center;line-height:1.25;padding-block:8px;min-height:40px}
.btn[aria-busy="true"]{cursor:progress}
.demo-why{font-size:13px;color:var(--mute);margin-top:8px}
.demo-done{color:var(--good);font-weight:500;display:inline-flex;align-items:center;gap:6px}

/* ---------- chart ---------- */
.demo-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--mute);margin:12px 0 4px;padding:0;list-style:none}
.demo-legend li{display:inline-flex;align-items:center;gap:8px}
.lg-sw{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid var(--acc);background:var(--panel);flex:none}
.lg-sw.sel{background:var(--acc)}
.lg-sw.rec{border-color:var(--ember);border-style:dashed;background:none}
.ch{display:block;width:100%;height:auto;overflow:visible;margin-top:4px}
.ch-grid{stroke:var(--line2);stroke-width:1}
.ch-axis{stroke:var(--line-strong);stroke-width:1}
.ch-t{fill:var(--mute);font:12px var(--sans)}
.ch-t.ttl{fill:var(--fg);font-weight:500}
.ch-line{fill:none;stroke:var(--line-strong);stroke-width:1.5}
.ch-pt{cursor:pointer;outline:none}
.ch-pt .hit{fill:transparent;stroke:transparent;stroke-width:2}
.ch-pt .dotc{fill:var(--panel);stroke:var(--acc);stroke-width:2}
.ch-pt .rec{fill:none;stroke:var(--ember);stroke-width:2;stroke-dasharray:3 2}
.ch-pt[aria-selected="true"] .dotc{fill:var(--acc)}
.ch-pt:hover .dotc{stroke-width:3.5}
.ch-pt:focus-visible .hit{stroke:var(--fg);stroke-dasharray:none}
.ch.locked .ch-pt{cursor:not-allowed}
.ch-n{fill:var(--faint);font:11px var(--mono);pointer-events:none}

/* ---------- misc states ---------- */
.demo-skel{display:grid;gap:12px;padding:4px 0}
.demo-empty-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.demo-page .empty{padding:36px 20px}
.demo-page .empty h3{font-size:17px}
.demo-page .empty p{margin-inline:auto}
.demo-how{margin:12px 0 0;padding-left:1.3em;display:grid;gap:10px;max-width:64ch}
.demo-how li{padding-left:4px}
.demo-how strong{font-weight:600}
.demo-code{margin-top:12px}
.demo-papers{list-style:none;margin:0;padding:0}
.demo-papers li{padding:12px 0;border-bottom:1px solid var(--line2)}
.demo-papers li:last-child{border-bottom:0}
.demo-papers a{font-weight:500}
.demo-papers p{color:var(--mute);font-size:14px;margin-top:2px;max-width:64ch}
.demo-conn{padding-block:24px clamp(40px,6vw,72px);display:grid;gap:16px;max-width:var(--wrap)}
.demo-conn h2{font-size:18px}
.demo-conn .badge{margin-top:6px}
.demo-lang-en{font-feature-settings:"tnum" 1}
.ext::after{content:"\2197";font-size:.85em;margin-left:.2em;color:var(--faint);text-decoration:none;display:inline-block}
.demo-noscript{margin-top:16px}

@media (max-width:560px){
  .demo-btns .btn{flex:1 1 100%}
  .demo-inline .btn{flex:1 1 100%}
}