/* SandSpace on phones and small tablets.
   Loaded after the page's own styles. Rules: nothing scrolls sideways, tap targets are at least 40px,
   and every pop-up is a floating card with a margin on all sides, never full screen and never edge to edge. */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video,canvas,svg{max-width:100%}

/* ---------- pop-ups everywhere: a centred card with room around it ---------- */
@media(max-width:820px){
  .modal-root{place-items:center!important;padding:20px 16px!important;overflow:auto;overscroll-behavior:contain}
  .modal-root>.modal,.modal{width:min(480px,100%)!important;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow:auto;border-radius:20px;padding:20px;margin:0 auto;overscroll-behavior:contain}
  .modal.wide,.modal.rz,.modal.dpm,.modal.vid-modal,.modal.av-modal,.modal.tpv-m{width:min(480px,100%)!important}
  .modal h2{font-size:17px;padding-right:8px}
  .modal .mf{flex-wrap:wrap;gap:8px}.modal .mf .btn{flex:1 1 auto;justify-content:center;min-height:42px}
  .modal input,.modal select,.modal textarea{font-size:16px}  /* stops the browser zooming in when a field is tapped */
  .scrim{backdrop-filter:blur(2px)}
}
/* the canvas picker is a floating card too */
@media(max-width:820px){
  .dpick{padding:16px!important;place-items:center}
  .dpick-card{width:100%!important;height:min(680px,calc(100vh - 32px))!important;height:min(680px,calc(100dvh - 32px))!important;border-radius:24px!important}
  .dp-g{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:420px){.dp-g{grid-template-columns:1fr 1fr!important;gap:10px!important}}

/* ---------- the dashboard ---------- */
@media(max-width:820px){
  .shell{height:100vh;height:100dvh;grid-template-columns:minmax(0,1fr)!important}
  .center{grid-template-columns:minmax(0,1fr)!important}
  .center,.body{min-width:0;max-width:100vw}
  .bar,.status{min-width:0;max-width:100%;overflow:hidden}
  .status{flex-wrap:nowrap}
  .bar>*{min-width:0}
  .bar{gap:6px;padding:6px 10px;min-height:56px}
  .bar .rail-toggle{display:none}
  .bar .only-sm{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;flex:none}
  .bar .crumbs{flex:1;min-width:0;overflow:hidden;font:600 16px var(--sans)}
  .bar .crumbs a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
  .bar .crumbs a:not(:last-child),.bar .crumbs .sep{display:none}
  .bar .crumbs{display:flex}
  .bar .find{width:40px!important;min-width:40px!important;height:40px!important;padding:0!important;margin:0!important;justify-content:center;border-radius:50%!important;flex:none!important}
  .bar .find span,.bar .find kbd{display:none!important}
  .bar .clk{display:none}
  .acts{gap:2px;flex:none}.acts .ibtn{width:40px;height:40px}
  .acts a[href="#/assets"]{display:none}
  .view{padding:16px 14px 40px}
  .ph{flex-direction:column;align-items:stretch;gap:12px}.ph h1{font-size:22px}
  .phacts{flex-wrap:wrap;gap:8px}.phacts .btn{min-height:42px}
  .btn{min-height:40px}
  .status{padding:6px 12px;font-size:12px}.status .mono,.status [data-act=density],.status [data-act=shortcuts]{display:none}
  /* the menu opens as a drawer over a dimmed page */
  .rail{width:min(300px,86vw)!important;border-radius:0 24px 24px 0;box-shadow:none}
  .rail-open .rail{box-shadow:0 0 60px rgba(0,0,0,.35)}
  .shell.rail-open:after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:24;animation:mfade .2s}
  .rail .ni{min-height:46px;padding:10px 12px}
  @keyframes mfade{from{opacity:0}to{opacity:1}}
}
@media(max-width:820px){
  /* home */
  .hx-box{border-radius:22px}
  .hm-hero{padding:0}
  /* lists */
  .pj-tool{flex-direction:column;align-items:stretch}.pj-pills{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;margin:0 -14px;padding-left:14px;padding-right:14px;scrollbar-width:none}.pj-pills::-webkit-scrollbar{display:none}.pj-pill{flex:none}
  .pj-right{flex-wrap:wrap}.pj-right .pj-search{flex:1 1 100%}.pj-right .sel{flex:1}
  .pj-row{grid-template-columns:44px minmax(0,1fr) auto!important;gap:10px;padding:10px}.pj-th{width:44px;height:36px;border-radius:8px}.pj-ck{left:20px}
  .pj-open{padding:8px 14px}
  .pj-board{grid-template-columns:minmax(0,1fr)}
  /* project page */
  .rv-strip{padding:14px 16px}.rv-steps{grid-template-columns:1fr 1fr!important;gap:12px}
  .pd-tabs{overflow-x:auto;flex-wrap:nowrap;margin-left:-14px;margin-right:-14px;padding:0 14px;scrollbar-width:none}.pd-tabs button{flex:none}
  .pd-grid{grid-template-columns:minmax(0,1fr)!important}
  .pn.pd-card>header{padding:16px 18px 0}.pn.pd-card>.pb{padding:14px 18px 18px}
  .pd-r{grid-template-columns:84px 1fr}
  .rv{grid-template-columns:minmax(0,1fr)!important}
  .rv-btns .btn{flex:1 1 auto;justify-content:center}
  /* calendar */
  .phacts .cal-views{width:100%}.phacts .cal-views button{flex:1}
  .cal-nav{width:100%;justify-content:space-between}.cal-today{flex:1}
  .phacts .btn.pri{width:100%;justify-content:center}
  .two.cal{padding:4px 0 30px!important}.two.cal .mh{font-size:20px!important;margin:8px 0 14px!important}
  .two.cal .cg{gap:4px!important}
  .two.cal .cg .dc,.cg .dc{min-height:62px!important;padding:5px!important;border-radius:12px!important}
  .two.cal .dh{padding:0 2px 2px!important;font-size:10px!important;text-align:center}
  .cg .dtop .dadd{display:none}
  .cg .ev2{height:7px;min-height:0;padding:0;font-size:0;overflow:hidden;border-radius:4px}.cg .ev2 *{display:none}
  .cg .more{font-size:10px;padding:0}
  .wk{grid-template-columns:minmax(0,1fr)}
  .cal-side{margin-top:20px}
  /* templates, assets */
  .view .tool{flex-direction:column;align-items:stretch}.view .tool .inp{min-width:0;width:100%}
  .tcats{flex-wrap:nowrap;overflow-x:auto;margin:0 -14px 18px;padding:0 14px;scrollbar-width:none}.tcats::-webkit-scrollbar{display:none}.tcats .dchip{flex:none}
  .tgrid.big{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .tcard .tc-meta{padding:10px 12px 12px}
  .tcard .gd-ov{opacity:1;background:none;align-items:flex-end;padding:8px}.tcard .gd-ov .btn:not(.pri){display:none}
  .sf-head{flex-direction:column;align-items:stretch}.sf-g.dash{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .sf-x{opacity:1}
  .av-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* tables scroll inside their own box instead of stretching the page */
  .tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .acct{grid-template-columns:minmax(0,1fr)}
  .bk-strip{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .toast{max-width:calc(100vw - 32px)}
}
@media(hover:none){.sf-x,.pd-tasks .ibtn{opacity:1}}

/* ---------- the design studio ---------- */
@media(max-width:700px){
  #editor{height:100vh;height:100dvh}
  .top{height:52px;gap:2px;padding:0 6px;overflow:hidden;flex-wrap:nowrap}
  .top .ibtn{width:36px;height:36px;flex:none}
  .top #sizeb,.top #snapb,.top .save,.top .sep,.top .zoom,.top #pgchip,.top .hide-sm{display:none!important}
  .top .dname{flex:1 1 70px;min-width:48px;width:auto;font-size:15px}
  .top .ftag{padding:6px 8px}
  .top #present,.top #exp{font-size:0;gap:0;padding:0;width:40px;height:40px;justify-content:center;border-radius:12px}
  .top #present svg,.top #exp svg:first-child{width:19px;height:19px}
  .top #exp svg:last-child{display:none}
  .top .menu-wrap{position:static}
  .menu,.top .menu{position:fixed!important;left:12px!important;right:12px!important;top:58px!important;width:auto!important;max-width:none!important;max-height:calc(100vh - 150px);overflow:auto;border-radius:18px;z-index:60;box-shadow:0 24px 60px -12px rgba(0,0,0,.4)}

  .body{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important}
  .stagecol{grid-column:1!important;grid-row:1!important;padding-bottom:64px}
  /* the tool rail moves to the bottom, scrolls sideways */
  .lrail{position:fixed!important;left:0;right:0;bottom:0;top:auto!important;height:64px;width:auto!important;flex-direction:row!important;justify-content:flex-start!important;align-items:stretch;overflow-x:auto!important;overflow-y:hidden!important;padding:4px 8px!important;gap:2px!important;border-right:0!important;border-top:1px solid var(--line);background:var(--bg)!important;z-index:30;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .lrail::-webkit-scrollbar{display:none}
  .lrail::after{display:none!important}
  .lrail button{flex:0 0 64px!important;min-height:0!important;max-height:none!important;height:56px;border-radius:14px}
  .lrail button span{font-size:10.5px}
  /* panels float above the rail as cards */
  .lpanel,.props{position:fixed!important;left:12px!important;right:12px!important;top:auto!important;bottom:76px!important;width:auto!important;max-width:none!important;height:auto!important;max-height:min(60vh,520px)!important;border:1px solid var(--line)!important;border-radius:22px!important;box-shadow:0 24px 64px -16px rgba(0,0,0,.45)!important;overflow:auto!important;z-index:40;transform:none!important;animation:none!important}
  .lpanel[hidden]{display:none!important}
  .props:not(.open){visibility:hidden;pointer-events:none}
  .lp-head{border-radius:22px 22px 0 0}
  .lpanel .lp-body,.props .pg{padding-left:16px;padding-right:16px}
  /* quick menu pill stays inside the screen */
  .tools{max-width:calc(100vw - 24px)!important;bottom:12px!important;overflow-x:auto}
  .pages{max-height:96px}
  .fontpanel{left:12px!important;right:12px!important;width:auto!important;top:60px!important;height:auto!important;max-height:calc(100vh - 160px);border-radius:20px}
  .pr-bar{max-width:calc(100vw - 24px)}
  .tplvar{left:12px!important;right:12px!important;width:auto!important;top:80px!important;max-height:calc(100vh - 170px);overflow:auto;border-radius:20px}
}

/* ---------- public pages (home, about, terms, privacy) ---------- */
@media(max-width:760px){
  .top{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .lt{margin-left:0}
  table{display:block;overflow-x:auto}
  .btn,.tin,.tcta{min-height:44px}
  /* sign in, About, Terms and Privacy float as cards over a dimmed page, with a margin all round */
  .layer{inset:16px!important;border-radius:24px!important;box-shadow:0 0 0 100vmax rgba(14,14,16,.45),0 30px 80px -20px rgba(0,0,0,.4)!important;border:1px solid var(--line,#E5E5E0)}
}

/* grids that sized themselves to their widest child */
@media(max-width:820px){.bk,.dash,.two,.hm-split,.hm-cal,.pd-main,.pd-side,.pd-one{grid-template-columns:minmax(0,1fr)}.bk>*,.pd-main>*,.pd-side>*{min-width:0}}

/* ===== phone: simple top bar (logo, notifications, account) and everything a size smaller ===== */
.mob-logo,.rail-mob{display:none}
@media(max-width:820px){
  .bar{min-height:54px;padding:6px 12px}
  .bar .only-sm,.bar .crumbs,.bar .find,.bar .themebtn,.bar .clk,.bar .acts a[href="#/assets"]{display:none!important}
  .bar .mob-logo{display:grid!important;place-items:center;width:40px;height:40px;border-radius:12px;flex:none;margin-left:-6px}
  .bar .mob-logo .logo{width:26px;height:26px}
  .bar .acts{margin-left:auto;gap:8px}
  .bar .acts .ibtn{width:38px;height:38px}
  .rail-mob{display:grid;gap:2px;padding:4px 0 10px;margin-bottom:6px;border-bottom:1px solid var(--line)}
  .rail-mob .ni{width:100%;text-align:left;background:none;border:0;color:inherit;cursor:pointer}
  .rail-mob .ni svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .rail .ni{font-size:14px}
  /* content a size smaller so more fits on the screen */
  .view{padding:12px 12px 32px}
  .ph h1{font-size:20px}.ph p{font-size:13px}
  .btn{font-size:13.5px}
  .hx-k{font-size:12.5px}
  .hx-h{font-size:24px;margin-bottom:18px}
  .hx-box{padding:6px 6px 6px 10px}
  .hx-go{width:38px;height:38px}.hx-go svg{width:17px;height:17px}
  .hx-acts{gap:10px 4px;margin:24px 0 22px}
  .hx-a{width:calc(20% - 4px);min-width:0;gap:6px;font-size:11.5px;white-space:nowrap}
  .hx-ai{width:44px;height:44px;border-radius:12px}.hx-ai svg{width:19px;height:19px}
  .hx-ban{min-height:170px;border-radius:20px}.hx-sl{padding:22px 16px 40px}.hx-st h3{font-size:19px}.hx-st p{font-size:12.5px}.hx-try{padding:8px 16px;font-size:13px}
  .hx-sh h2{font-size:15px}.hx-recent{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .hx-rc strong{font-size:12.5px}
  .pj-name{font-size:14px}.pj-pill{padding:6px 12px;font-size:13px}
  .pd-r{font-size:13px}.rv-act h3,.rv-h{font-size:15px}
}


@media(max-width:820px){.hx-in{font-size:15px;text-overflow:ellipsis}.hx-in::placeholder{font-size:14px}}

/* the idea box stays one tidy row on a phone: plus, text, send */
@media(max-width:820px){
  .hx-box{flex-wrap:nowrap!important;border-radius:99px!important;padding:5px 5px 5px 8px;gap:4px}
  .hx-in{flex:1 1 0!important;flex-basis:0!important;order:0!important;padding:8px 4px}
  .hx-go{margin-left:0!important}
  .hx-sel{padding:0 4px 0 2px;height:38px}
}

/* the side-panel button, just before the notifications */
.mob-panel{display:none!important}
@media(max-width:820px){
  .bar .acts .mob-panel{display:grid!important;place-items:center;border-radius:12px}
  .mob-panel svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round}
  .mob-panel .mp-fill{fill:currentColor;opacity:.14;stroke:none;transition:opacity .2s}
  .shell.rail-open .mob-panel{background:var(--hover);color:var(--ink)}.shell.rail-open .mob-panel .mp-fill{opacity:.5}
}

/* phone sizes, set directly (no page zoom, which browsers handle differently) */
@media(max-width:820px){
  .ph h1{font-size:19px}.ph p{font-size:12.5px}
  .btn{min-height:38px;padding:0 12px;font-size:13px}.btn svg{width:14px;height:14px}
  .phacts .btn.pri{border-radius:999px}
  .pj-pill{padding:5px 11px;font-size:12.5px}.pj-pill b{font-size:11px}
  .pj-name{font-size:13.5px}.pj-sub{font-size:12px}.pj-open{padding:6px 12px;font-size:12.5px}
  .pj-search,.pj-right .sel,.pj-selbtn{height:36px;font-size:13px}.pj-right .seg button{padding:4px 12px;font-size:12.5px}
  .tcats .dchip{padding:6px 12px;font-size:12.5px}
  .hx-h{font-size:22px}
}