/* Team walkthrough only. Computer cards and recipient selection use the same
   surfaces as the app; the surrounding sample desktop is illustrative. */
.team-demo .scene-viewport{aspect-ratio:1120/920}
.team-demo .scene-canvas{height:920px}
.team-demo .team-panel{top:54px;left:100px;width:920px;z-index:2}
.team-demo .team-more-wrap{overflow:hidden;will-change:height;visibility:hidden}
.team-demo .q-more-computers{padding-top:14px;box-sizing:border-box}
.team-demo .secondary .q-box{background:light-dark(#e9edf2,#25282e)}
.team-demo .team-active{background:var(--q-well)}
.team-demo .team-more>svg{transform-origin:center}
.team-demo .q-multi-drop.drag-hot{outline:2px solid var(--q-accent);outline-offset:2px;box-shadow:0 0 0 5px color-mix(in srgb,var(--q-accent) 17%,transparent);background:var(--q-tint)}
.team-demo .q-multi-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 12px;min-height:52px}
.team-demo .q-multi-banner>span{display:flex;align-items:center;gap:7px;font-size:12px}
.team-demo .q-multi-banner>div{display:flex;align-items:center;gap:5px}
.team-demo .team-send{background:var(--q-well);color:var(--q-dim);min-width:88px}
.team-demo .team-send.ready{color:white;background:var(--q-accent)}
.team-demo .team-choosing .q-computer:not(.q-public-tile) .q-box{border:1.5px solid var(--q-line)}
.team-demo .team-choosing .q-computer.chosen .q-box{border-color:var(--q-accent);box-shadow:inset 0 0 0 1px var(--q-accent);background:var(--q-tint)}
.team-demo .q-checkmark{position:absolute;right:8px;top:8px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--q-line);background:var(--q-surface)}
.team-demo .chosen .q-checkmark{border-color:var(--q-accent);background:var(--q-accent);color:white}
.team-demo .q-checkmark svg{width:15px;height:15px}
.team-demo .team-choosing .q-public-tile{opacity:.46}
.team-demo .finder-window{z-index:3;left:644px;top:610px;width:330px;height:147px;box-shadow:0 12px 38px #00000022}
.team-demo .finder-file .paper-icon{position:relative;font-size:12px;background:var(--q-tint);border-color:var(--q-accent-text);color:var(--q-accent-text);box-shadow:3px -3px 0 -1px var(--q-card),3px -3px 0 0 var(--q-line)}
.team-demo .finder-other{font-size:9px}
.team-demo .demo-toast{top:auto;bottom:49px;z-index:8}
.team-demo .demo-click{z-index:35;pointer-events:none}
.team-demo .team-scene-note{position:absolute;left:20px;right:20px;bottom:18px;text-align:center;font-size:10px;letter-spacing:.1px;color:var(--q-dim)}
.team-demo .q-recent-group{overflow:auto;scrollbar-width:thin}
.team-demo .q-file-row{min-height:45px}
.team-demo .demo-steps{flex-wrap:wrap}
@media(max-width:600px){
  .team-demo .scene-viewport{height:1180px;aspect-ratio:auto}
  .team-demo .scene-canvas{width:100%;height:1180px}
  .team-demo .team-panel{top:49px;left:10px;width:calc(100% - 20px)}
  .team-demo .q-panel-head{padding:6px 8px}
  .team-demo .q-heading{gap:5px}
  .team-demo .q-heading>svg{width:16px;height:16px}
  .team-demo .q-heading strong{font-size:13px}
  .team-demo .q-brand-descriptor{font-size:10px;margin-left:2px}
  .team-demo .q-head-tools{gap:0}
  .team-demo .q-head-tools .q-icon{width:22px;padding:4px}
  .team-demo .q-panel-body{padding:0 8px 8px}
  .team-demo .q-computers{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 9px}
  .team-demo .q-box{height:180px}
  .team-demo .q-box-toolbar{gap:0;padding:5px 3px 3px 6px}
  .team-demo .q-box-toolbar .q-icon{width:22px;padding:4px}
  .team-demo .q-recent-hint{font-size:10px;padding:2px 3px}
  .team-demo .q-destination-icon{gap:2px;font-size:10px}
  .team-demo .q-meta{gap:3px;min-height:40px}
  .team-demo .q-meta-with-icon{gap:4px}
  .team-demo .q-meta-symbol{width:18px}
  .team-demo .q-meta-symbol svg{width:17px;height:17px}
  .team-demo .q-meta-copy small{font-size:10px}
  .team-demo .q-ownership,.team-demo .q-expand{width:17px}
  .team-demo .q-empty-drop{font-size:10px;padding:24px 6px}
  .team-demo .q-drop-line{font-size:9px;gap:4px;padding:6px 3px}
  .team-demo .q-file-list{padding:0 6px}
  .team-demo .q-file-row{grid-template-columns:minmax(0,1fr) auto 18px;gap:3px;min-height:37px}
  .team-demo .q-file-copy strong{font-size:10px}
  .team-demo .q-file-copy small,.team-demo .q-row-status{font-size:9px}
  .team-demo .q-file-row .q-icon{width:18px;padding:3px}
  .team-demo .q-sharing-tools{flex-wrap:wrap;gap:4px;padding:8px 0 4px}
  .team-demo .q-sharing-tools .q-action{padding:5px;font-size:10px}
  .team-demo .q-sharing-tools svg{width:13px;height:13px}
  .team-demo .q-sharing-tools .q-multi-drop{flex-basis:100%;margin:3px 0 0;border:1px solid var(--q-line);min-height:31px}
  .team-demo .q-multi-banner{flex-wrap:wrap;gap:5px;min-height:75px;padding-bottom:10px}
  .team-demo .q-multi-banner>span{font-size:11px;flex-basis:100%}
  .team-demo .q-multi-banner>div{margin-left:auto}
  .team-demo .q-multi-banner .q-action{font-size:11px;min-height:28px;padding:4px 8px}
  .team-demo .q-checkmark{width:20px;height:20px;right:8px;top:8px}
  .team-demo .q-account-storage{margin:8px -8px -8px;padding:7px 8px;gap:0;flex-wrap:wrap}
  .team-demo .q-account-trigger{flex-basis:100%;padding:4px 0;gap:5px;font-size:10px}
  .team-demo .q-account-trigger .q-storage-track{min-width:20px;max-width:80px;margin:0 2px}
  .team-demo .q-plan-badge{font-size:9px;padding:2px 4px}
  .team-demo .q-upgrade{font-size:10px;min-height:23px;margin-left:auto;padding:2px}
  .team-demo .finder-window{left:24px;width:calc(100% - 48px);max-width:330px;height:130px;grid-template-columns:65px 1fr}
  .team-demo .finder-sidebar{padding:9px 4px;font-size:7px}
  .team-demo .finder-files{padding:8px}
  .team-demo .finder-file{padding:7px;gap:8px}
  .team-demo .finder-other{padding:6px;font-size:8px}
  .team-demo .demo-toast{bottom:86px;width:max-content;max-width:calc(100% - 30px);padding:10px 12px}
  .team-demo .demo-toast small{font-size:10px}
  .team-demo .team-scene-note{bottom:19px;font-size:9px}
  .team-demo .demo-steps{justify-content:flex-start;gap:3px}
  .team-demo .demo-steps button{font-size:10px;padding:6px 8px;min-height:30px}
}
@media(max-width:360px){
  .team-demo .q-recent-hint{display:none}
  .team-demo .q-head-tools .q-icon{width:20px}
  .team-demo .q-meta-copy strong{font-size:10px}
}