/* Stage framing only. q-* surfaces come from the shared homepage stylesheet;
   history rows follow FilelaneApp.tsx and tossby.css's current four-column layout. */
.pd-demo{margin:0}.pd-demo .pd-relationship{font-size:12px;line-height:1.7;text-align:center;color:var(--dim);margin:0;padding:18px 24px;background:var(--paper)}
.pd-demo .pd-context{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 24px;font-size:12px;background:var(--card)}
.pd-context>[data-view-label]{font-size:9px;letter-spacing:1.2px;color:var(--dim)}.pd-context>[data-device-state]{margin-left:auto;color:var(--dim);font-size:11px}
.pd-demo .pd-stage{position:relative;min-height:705px;padding:32px 0 28px;background:radial-gradient(ellipse at 80% 90%,var(--scene-glow),transparent 65%),var(--scene-bg);overflow:hidden;isolation:isolate}
.pd-demo .pd-sender .hero-panel{position:relative;inset:auto;width:calc(100% - 64px);max-width:920px;margin:0 auto 24px}
.pd-demo .pd-sender .finder-window{position:relative;inset:auto;width:360px;max-width:calc(100% - 48px);height:154px;margin:24px auto 0;z-index:2}
.pd-demo .q-history-list{padding:0 16px}.seo-home-demo .pd-demo .detail-panel.receiver{position:relative;inset:auto;width:calc(100% - 64px);max-width:920px;height:auto;min-height:285px;margin:42px auto 24px}
.pd-demo .q-detail-heading{flex-wrap:wrap;gap:16px;padding:22px 20px}.pd-demo .q-detail-identity{gap:12px;min-width:0}.pd-demo .q-detail-identity>div{min-width:0}.pd-demo .q-detail-symbol{width:42px;height:42px;border-radius:12px;background:var(--q-tint);color:var(--q-accent-text)}
.pd-demo .q-detail-actions{flex-wrap:wrap}.pd-demo .q-detail-actions .q-action{padding:9px 11px;font-size:11px}.pd-demo .q-history-row{display:grid;grid-template-columns:36px minmax(0,1fr) 145px 138px;gap:16px;padding:15px 8px;min-height:88px}
.pd-demo .q-history-icon{width:36px;height:36px}.pd-demo .q-history-copy{min-width:0}.pd-demo .q-history-copy strong{white-space:normal;overflow-wrap:anywhere;font-size:12px}.pd-demo .q-history-copy small{line-height:1.5;font-size:11px}
.pd-demo .q-history-state{margin:0;font-size:11px}.pd-demo .q-history-state strong{font-size:11px;font-weight:500;color:var(--q-green)}.pd-demo .q-history-state small{display:block;color:var(--q-dim);margin-top:4px;font-size:11px}
.pd-demo .q-history-row.awaiting .q-transfer-status{color:var(--q-accent-text)}.pd-demo .q-history-row .q-progress-track{position:static;margin-top:6px;height:3px}.pd-demo .pd-action{display:inline-flex;gap:7px;align-items:center;justify-content:center;justify-self:end;background:var(--q-well);border:1px solid var(--q-line);border-radius:7px;font-size:11px;padding:9px 11px;white-space:nowrap}
.pd-demo .q-settings-footer{padding:12px 0;margin-top:15px}.pd-demo .q-public-tile-row{position:relative}.pd-demo .pd-note,.pd-demo .pd-pasted{position:relative;width:480px;max-width:calc(100% - 48px);margin:24px auto 0;background:var(--q-surface);border:1px solid var(--q-line);border-radius:12px;overflow:hidden;box-shadow:0 10px 30px var(--q-shadow)}
.pd-demo .pd-note p,.pd-demo .pd-pasted p{font-size:15px;line-height:1.7;padding:12px 18px;margin:0}.pd-demo .pd-note small,.pd-demo .pd-pasted small{display:block;font-size:11px;color:var(--q-dim);padding:0 18px 16px}.pd-note mark{background:var(--q-tint);color:var(--q-ink)}
.pd-demo .pd-ribbon-work{position:relative;height:310px;margin:0 auto;max-width:920px;background:var(--q-card);border:1px solid var(--q-line);border-radius:12px;width:calc(100% - 64px)}
.pd-demo .pd-ribbon-work .q-ribbon-layout{inset:80px auto auto 50%;transform:translateX(-50%);width:max-content}.pd-demo .pd-ribbon-hint{display:block;padding:22px;font-size:11px;color:var(--q-dim)}
.pd-demo .pd-cloud-wait{position:relative;margin:24px auto 0;width:calc(100% - 48px);max-width:620px;z-index:3;background:var(--q-surface);border:1px solid var(--q-line);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px;color:var(--q-dim)}.pd-demo .pd-cloud-wait>svg{width:42px;height:42px}.pd-demo .pd-cloud-wait strong{font-size:18px;color:var(--q-ink);line-height:1.6}.pd-demo .pd-cloud-wait span{font-size:12px;line-height:1.6}
.pd-demo .pd-ghost{position:absolute;z-index:8;padding:10px 14px;display:flex;align-items:center;gap:9px;border:1px solid var(--q-accent-text);border-radius:10px;background:var(--q-surface);box-shadow:0 8px 20px var(--q-shadow);font-size:12px;max-width:250px;pointer-events:none}.pd-demo .pd-ghost span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pd-demo .pd-cursor{position:absolute;z-index:9;pointer-events:none}.pd-demo .pd-cursor>svg{width:23px;height:29px;fill:var(--q-ink);stroke:var(--q-surface);stroke-width:1.5;filter:drop-shadow(0 2px 2px #0004)}.pd-cursor>i{display:none;position:absolute;left:-11px;top:-10px;width:30px;height:30px;border:2px solid var(--q-accent-text);border-radius:50%}.pd-cursor[data-click=true]>i{display:block}
.pd-demo .pd-toast{display:flex;align-items:center;justify-content:center;gap:9px;position:relative;width:max-content;max-width:calc(100% - 40px);margin:22px auto 0;padding:12px 16px;background:var(--q-surface);border:1px solid var(--q-line);border-radius:10px;font-size:12px;color:var(--q-green);z-index:4}
.pd-demo .pd-hot{outline:2px solid var(--q-accent-text);outline-offset:2px;background:var(--q-tint)}
/* The public viewer keeps its own typography and real layout. */
.pd-demo .pd-browser{background:var(--paper);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);width:calc(100% - 40px);margin:0 auto;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.pd-demo .pd-browser .site-header{padding:20px 24px;width:100%;margin:0}.pd-demo .pd-browser .header-note{font-size:8px}.pd-demo .pd-browser .brand{font-size:24px}.pd-demo .pd-browser .brand-mark{color:white}
.pd-demo .pd-browser .share-layout{width:calc(100% - 48px);gap:0 32px}.pd-demo .pd-browser .delivery-card{max-height:none}.pd-demo .pd-browser .share-intro .pd-share-title{font-size:44px;line-height:1.1;letter-spacing:-2px;font-weight:550;margin:15px 0 12px}
.pd-demo .pd-browser .share-folder .bundle-folder{transform:scale(.65)}.pd-demo .pd-browser .share-folder{height:170px}.pd-demo .pd-browser .bundle-folder svg{width:24px;height:24px}
.pd-demo .pd-address{display:flex;gap:7px;align-items:center;padding:10px 18px;border-bottom:1px solid var(--line);background:var(--wash);color:var(--dim);font-size:11px}.pd-demo .pd-address>span{margin-left:auto;font-size:9px}.pd-demo .pd-browser button{pointer-events:none}
.pd-demo .pd-browser #pd-files{max-height:280px}.pd-demo .pd-browser .privacy-note{margin-bottom:0}.pd-demo .pd-browser .file{animation:none!important}.pd-demo .pd-browser .folder-paper{animation:none!important}
@media(max-width:800px){.pd-demo .q-history-row{grid-template-columns:28px minmax(0,1fr) 115px 110px;gap:10px}.pd-demo .q-detail-heading{padding:18px 16px}.pd-demo .pd-browser .share-layout{display:block;width:calc(100% - 40px)}.pd-demo .pd-browser .share-folder{display:none}.pd-demo .pd-browser .intro-copy{margin-bottom:20px}.pd-demo .pd-browser .delivery-card{max-width:520px;margin:0 auto}.pd-demo .pd-browser .privacy-note{margin:15px 0 0}.pd-demo .pd-browser .share-intro .pd-share-title{font-size:36px}.pd-demo .pd-browser .header-note{display:none}}
@media(max-width:600px){
 .pd-demo .pd-stage{min-height:900px;padding-top:20px}.pd-demo[data-delivery=link] .pd-stage{min-height:940px}.pd-demo[data-product-demo=clipboard] .pd-stage{min-height:920px}
 .pd-demo .pd-sender .hero-panel{width:calc(100% - 20px);inset:auto}.pd-demo .pd-context{flex-wrap:wrap;gap:7px;padding:12px 16px}.pd-context>[data-device-state]{flex-basis:100%;margin-left:0}.pd-demo .pd-relationship{padding:14px 16px;font-size:11px}
 .seo-home-demo .pd-demo .detail-panel.receiver{width:calc(100% - 20px);margin:16px auto 22px}.pd-demo .q-detail-identity{flex-basis:100%}.pd-demo .q-detail-actions .q-action:first-child,.pd-demo .q-detail-actions .q-action:nth-child(2){display:inline-flex}.pd-demo .q-detail-actions .q-action{font-size:10px;padding:7px 8px}.pd-demo .q-detail-identity h3{font-size:18px}
 .pd-demo .q-history-list{padding:0 12px}.pd-demo .q-history-row{grid-template-columns:28px minmax(0,1fr);gap:8px 12px;padding:14px 2px}.pd-demo .q-history-icon{grid-column:1;grid-row:1;align-self:start;width:28px;height:28px}.pd-demo .q-history-copy{grid-column:2}.pd-demo .q-history-state{grid-column:2}.pd-demo .pd-action{grid-column:2;justify-self:start}.pd-demo .q-settings-footer{flex-wrap:wrap;gap:5px;margin-inline:12px}
 .pd-demo .pd-ribbon-work{width:calc(100% - 20px);height:370px}.pd-demo .pd-ribbon-work .q-ribbon-layout{width:calc(100% - 24px);left:12px;right:12px;top:80px;transform:none;flex-direction:row}.pd-demo .pd-ribbon-work .q-mini{width:100%;flex-direction:row;gap:3px;padding:6px}.pd-demo .pd-ribbon-work .q-mini-target{min-width:0;width:auto;flex:1;height:85px}.pd-demo .pd-ribbon-work .q-mini-tools{width:auto;flex-direction:column;border-top:0;border-left:1px solid var(--q-line);padding:0 0 0 4px}.pd-demo .pd-ribbon-work .q-mini-tools>.q-icon{width:28px;height:38px}.pd-demo .pd-ribbon-work .q-mini-utilities{grid-template-columns:24px;grid-template-rows:repeat(2,20px)}.pd-demo .pd-ribbon-work .q-mini-utilities .q-icon{height:20px;padding:3px}
 .pd-demo .pd-sender .finder-window{height:154px;max-width:calc(100% - 32px);grid-template-columns:65px 1fr}.pd-demo .finder-file strong{overflow-wrap:anywhere;font-size:10px}.pd-demo .pd-browser{width:calc(100% - 20px)}.pd-demo .pd-browser .site-header{padding:16px}.pd-demo .pd-browser .share-layout{width:calc(100% - 28px)}.pd-demo .pd-browser .delivery-card{padding:14px}.pd-demo .pd-browser .card-seal{margin-inline:-14px;margin-bottom:-14px}.pd-demo .pd-browser #pd-files{padding:0 8px;max-height:280px}.pd-demo .pd-browser .file>span:first-child{display:none}.pd-demo .pd-browser .file button{font-size:10px;padding:8px}.pd-demo .pd-browser .file strong{font-size:11px}.pd-demo .pd-browser .brand{font-size:22px}.pd-demo .pd-address{font-size:10px;padding:10px}.pd-demo .pd-address>span{display:none}.pd-demo .pd-ghost{max-width:180px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){.pd-demo *{animation:none!important;transition:none!important}.pd-demo .pd-ghost,.pd-demo .pd-cursor{display:none!important}}

@media(max-width:400px){.pd-demo .pd-browser .file{display:grid;grid-template-columns:minmax(0,1fr);gap:7px}.pd-demo .pd-browser .file button{justify-self:start}.pd-demo .pd-browser .file strong{font-size:12px}.pd-demo .pd-browser #pd-files{max-height:290px}.pd-demo .pd-browser .file>span:first-child{display:none}}