/* a real page scrolls (the comps were fixed frames) */
html,body{height:auto;overflow:auto}
.app{height:auto;min-height:100vh;align-items:start}
.rail{position:sticky;top:0;height:100vh;overflow:auto}
.main{min-height:100vh}
.content{overflow:visible}
a.tile{display:block}
.clipview{height:auto;min-height:calc(100vh - 75px)} .clipview>*{min-width:0} .stage{overflow:hidden}
@media (max-width:1040px){.clipview{grid-template-columns:1fr} .inspector{border-left:0;border-top:1px solid var(--line)}}
.top .search{flex:1 1 160px;min-width:0}
/* thinkdrive shell: what the comps did not need — links, states, list view, search results, the sheet, the phone layout */
a.nav,a.btn,a.more,.theme,.viewbtn,.tile,.folder,.moment,.opt,.chip{cursor:pointer}
.nav:hover{background:var(--card);color:var(--ink)} html.dark .nav:hover{background:var(--card2)}
.tile:hover{box-shadow:var(--shadow2)} .tile img{transition:opacity .15s ease}
.topright{display:flex;align-items:center;gap:10px;margin-left:auto}
.avatar{margin-left:0}
.views{display:inline-flex;border:1px solid var(--line2);border-radius:999px;padding:3px;gap:2px;background:var(--card)} html.dark .views{background:var(--card2)}
.viewbtn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;font:500 12.5px/1 Inter;color:var(--sub);border:0;background:transparent}
.viewbtn svg{width:14px;height:14px}
.viewbtn.on{background:var(--ink);color:var(--paper)}
.preview{font:600 10.5px/1 Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--cap);border:1px solid var(--line2);border-radius:999px;padding:6px 9px}
/* list view: the same tiles as rows, easy to scroll */
.grid.list{display:flex;flex-direction:column;gap:6px}
.grid.list>div{display:grid;grid-template-columns:112px 1fr auto;align-items:center;gap:14px;padding:6px 10px 6px 6px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
html.dark .grid.list>div{background:var(--card2)}
.grid.list .tile{width:112px;aspect-ratio:16/9;border-radius:8px;box-shadow:none}
.grid.list .tile .kind{display:none}
.grid.list .tile .who{display:none}
.grid.list .meta{margin:0;min-width:0}
.grid.list .meta b{font-size:13.5px}
.grid.list>div::after{content:attr(data-right);font:500 12px/1 Inter;color:var(--cap);white-space:nowrap}
/* search */
.search{position:relative;cursor:text}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;color:var(--ink)}
.search input::placeholder{color:var(--cap)}
.results{position:absolute;left:0;top:50px;width:min(620px,calc(100vw - 280px));min-width:100%;z-index:40;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow2);overflow:hidden;display:none;max-height:70vh;overflow-y:auto}
html.dark .results{background:var(--card2)}
.results.show{display:block}
.results .hd{padding:10px 14px;font:600 11px/1 Inter;letter-spacing:.16em;text-transform:uppercase;color:var(--cap);border-bottom:1px solid var(--line)}
.results a{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--line);color:var(--ink)}
.results a:hover{background:var(--drive-soft)}
.results img{width:72px;height:44px;object-fit:cover;border-radius:6px}
.results b{display:block;font-weight:500;font-size:13px}
.results span{font-size:12px;color:var(--cap)}
.results mark{background:rgba(52,211,153,.28);color:inherit;border-radius:3px;padding:0 2px}
.results .t{font:500 12px/1 Inter;color:var(--cap)}
.results .none{padding:16px 14px;color:var(--cap);font-size:13px}
/* the sheet (share to a hive) */
.sheetwrap{display:none} .sheetwrap.show{display:block}
.dim{z-index:50} .modal{z-index:51}
/* upload tray states */
.sheet .urow.done .bar{display:none}
/* phone */
@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .rail{position:fixed;left:0;right:0;bottom:0;z-index:30;height:84px;padding:10px 6px 0;flex-direction:row;justify-content:space-around;align-items:flex-start;border-right:0;border-top:1px solid var(--line);background:var(--card);gap:0}
  html.dark .rail{background:var(--card2)}
  .rail .brand,.rail .sec,.rail .foot,.rail .nav{display:none}
  .rail{height:84px;overflow:visible;position:fixed;top:auto}
  .rail .nav[data-tab]{display:flex;flex:1 1 0;flex-direction:column;align-items:center;gap:4px;padding:0;background:transparent;box-shadow:none;font:500 10.5px/1 Inter;color:var(--cap);min-width:0;white-space:nowrap}
  .rail .nav[data-tab] svg{width:22px;height:22px;opacity:1}
  .rail .nav[data-tab].on{color:var(--drive)}
  .rail .nav[data-tab] .n,.rail .nav[data-tab] .dot{display:none}
  .rail .nav[data-tab="plus"] svg{width:22px;height:22px;color:#fff}
  .rail .nav[data-tab="plus"] span{display:none}
  .rail .nav[data-tab="plus"]{flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:var(--blue);margin:-16px 6px 0;box-shadow:0 8px 20px rgba(62,104,222,.4);justify-content:center}
  .main{padding-bottom:96px}
  .top{padding:12px 12px;gap:6px}
  .top .views{padding:2px} .top .viewbtn{height:28px}
  .topright{gap:6px} .topright .avatar{width:30px;height:30px}
  .top .btn.primary span{display:none}
  .top .btn.primary{width:38px;padding:0}
  .top .btn.ghost.sm span{display:none} .top .btn.ghost.sm{width:34px;padding:0}
  .search .k{display:none}
  .content{padding:16px 16px 40px;gap:18px}
  h1{font-size:22px}
  .folders{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 6px}
  .folder{min-width:150px;width:150px;scroll-snap-align:start}
  .grid,.grid.g6,.grid.g4{grid-template-columns:repeat(3,1fr);gap:8px}
  .tile{aspect-ratio:3/4;border-radius:10px}
  .meta{display:none}
  .grid.list{display:flex} .grid.list .meta{display:flex}
  .grid.list>div{grid-template-columns:84px 1fr}
  .grid.list>div::after{display:none}
  .grid.list .tile{width:84px;aspect-ratio:16/9}
  .steve{flex-wrap:wrap} .steve .files{margin-left:0;width:100%;overflow-x:auto}
  .clipview{grid-template-columns:1fr;height:auto}
  .stage{padding:12px 16px}
  .inspector{border-left:0;border-top:1px solid var(--line);padding:16px}
  .title{flex-direction:column} .title .acts{margin-left:0;flex-wrap:wrap}
  .sprite img{width:calc((100% - 20px)/6)} .sprite img:nth-child(n+7){display:none}
  .sheet{left:12px;right:12px;bottom:96px;width:auto}
  .modal{width:calc(100% - 24px);max-height:84vh;overflow-y:auto}
  .segs span{font-size:11.5px;padding:7px 4px}
  .results{position:fixed;left:12px;right:12px;top:64px;width:auto;min-width:0}
  .topright .preview{display:none}
  .viewbtn span{display:none} .viewbtn{padding:0 9px}
}

/* real tiles + the real clip page */
.tile .scrub{position:absolute;inset:0;opacity:0;transition:opacity .12s;background-repeat:no-repeat;pointer-events:none}
.stile{width:calc((100% - 44px)/12);aspect-ratio:16/9;border-radius:6px;flex:none;background-color:var(--card2);background-repeat:no-repeat;cursor:pointer}
.stile.on{outline:2px solid var(--live);outline-offset:-2px}
.results .aud,.moment .aud{display:grid;place-items:center;width:72px;height:44px;border-radius:6px;background:var(--drive-soft);color:var(--drive);font-size:18px}
.moment .aud{width:64px;height:40px}
.wline[data-t]{cursor:pointer} .wline[data-t]:hover span{color:var(--ink)}
.player video{cursor:pointer}
@media (max-width:760px){.stile{width:calc((100% - 20px)/6)} .stile:nth-child(n+7){display:none}}