/* FootageDrop in a browser: the app's own stylesheet (app/renderer/app.css)
   does the look; this adds what a web page needs (no window chrome, text
   that can be selected in content) and the phone layout, where the sidebar
   becomes a menu. */

html.web, html.web body { height: 100%; }
html.web body { user-select: auto; cursor: auto; }
html.web button, html.web [data-open], html.web summary { cursor: pointer; }
html.web #app { height: 100vh; height: 100dvh; }
/* No title bar to leave room for, and nothing to drag. */
html.web #app > aside { padding-top: 20px; }
html.web #app > aside::before { display: none; }
html.web .bar { -webkit-app-region: no-drag; }
html.web .page { user-select: text; }

/* Signed out: just the welcome. */
body.signed-out #app { grid-template-columns: minmax(0, 1fr); }
body.signed-out #app > aside, body.signed-out .menu-btn { display: none !important; }

.app-only { align-items: center; }
.app-only .btn { flex: none; }
.web-acts, .qs-picks { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.box.web-files { gap: 14px; }
.clip-row .row-acts { flex-wrap: wrap; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--track); border-top-color: var(--rust); animation: fd-spin .8s linear infinite; }
@keyframes fd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
iframe.fd-dl { display: none; }

.menu-btn { display: none; }
#menu-scrim { display: none; }

/* ---------- Phones and narrow windows ---------- */
@media (max-width: 760px) {
  html.web #app { grid-template-columns: minmax(0, 1fr); }
  html.web #app > aside {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 45; width: min(300px, 86vw);
    transform: translateX(-105%); transition: transform .22s ease; box-shadow: none; padding-top: 16px;
  }
  body.menu-open #app > aside { transform: none; box-shadow: 0 0 60px rgba(0, 0, 0, .35); }
  body.menu-open #menu-scrim { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(29, 27, 24, .4); }
  .menu-btn {
    display: flex; align-items: center; justify-content: center; position: fixed; top: 9px; left: 10px; z-index: 9; /* under sheets */
    width: 40px; height: 40px; border-radius: var(--r-pill); border: 0; background: var(--card); color: var(--text);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
  }
  .menu-btn.dot::after { content: ''; position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--rust); border: 2px solid var(--card); }
  @media (prefers-reduced-motion: reduce) { html.web #app > aside { transition: none; } }

  html.web .bar { height: auto; min-height: 58px; padding: 9px 12px 9px 60px; flex-wrap: wrap; row-gap: 8px; }
  html.web .bar .title { font-size: 19px; }
  html.web .bar .search { order: 5; width: 100%; margin-left: 0 !important; }
  html.web .bar-acts { flex-wrap: wrap; }
  html.web .crumb { min-width: 0; flex-wrap: wrap; row-gap: 2px; }
  html.web .page { padding: 12px 16px 40px; gap: 16px; }
  html.web .hero-title { font-size: 34px; }
  html.web .empty { padding: 28px 18px; }
  html.web .empty h2 { font-size: 24px; }

  /* Projects: name, status and the menu; the rest is on the project. */
  html.web .stats { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  html.web .stat .v { font-size: 30px; }
  html.web .table { padding: 4px 14px 8px; }
  html.web .table .row { grid-template-columns: minmax(0, 1fr) 28px; row-gap: 6px; padding: 12px 0; min-height: 0; }
  html.web .table .row.head { display: none; }
  html.web .table .row > .r { display: none; }
  html.web .table .row > .status { grid-column: 1; grid-row: 2; }
  html.web .table .row > .iconbtn { grid-column: 2; grid-row: 1; }
  html.web .table .row:not(.head):hover { margin: 0; padding: 12px 0; }
  html.web .bin-table .row { grid-template-columns: minmax(0, 1fr); }
  html.web .bin-table .row > .bin-when, html.web .bin-table .row > .bin-acts { grid-column: 1; }

  /* A project. */
  html.web .proj-head { flex-direction: column; align-items: stretch; gap: 14px; }
  html.web .tiles { flex-wrap: wrap; }
  html.web .tiles .tile { flex: 1 1 100px; min-width: 0; }
  html.web .tile .v { font-size: 26px; }
  html.web .steps, html.web .duo.two-up, html.web .plans, html.web .two, html.web .drives { grid-template-columns: minmax(0, 1fr); }
  html.web .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.web .hero { flex-direction: column; align-items: stretch; gap: 14px; }
  html.web .hero .pct { font-size: 64px; }
  html.web .frows { grid-template-columns: 40px minmax(0, 1fr) auto; row-gap: 10px; }
  html.web .frows .pbar, html.web .frows .fsize { display: none; }
  html.web .frows .facts2 { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
  html.web .person { flex-wrap: wrap; }
  html.web .person .who { flex: 1 1 160px; }
  html.web .row-acts { margin-left: 0; justify-content: flex-start; width: 100%; }
  html.web .person.msg-bar { border-radius: var(--r-lg); flex-wrap: nowrap; }
  html.web .panel, html.web .box, html.web .section { padding-left: 16px; padding-right: 16px; }
  html.web .box-head { flex-wrap: wrap; }
  html.web .box-acts { flex-wrap: wrap; }
  html.web .notice { flex-wrap: wrap; }
  html.web .notice .btn { margin-left: 0 !important; }

  /* Sheets fill the screen's width. */
  html.web .scrim { padding: 12px 8px; align-items: flex-start; }
  html.web .sheet { width: 100% !important; max-height: calc(100dvh - 24px); }
  html.web .sheet .top { padding: 20px 18px 12px; }
  html.web .sheet .top b { font-size: 22px; }
  html.web .sheet .mid { padding: 0 18px; }
  html.web .sheet .end { padding: 14px 18px 18px; flex-wrap: wrap; }
  html.web .sheet.browse .br-tools { flex-wrap: wrap; }
  html.web .sheet.browse .br-tools .search { width: 100%; }
  html.web .bell-panel { left: 8px; right: 8px; width: auto; }
  html.web #uploads { width: 100vw; }
  html.web .menu { width: min(230px, calc(100vw - 16px)); }
  html.web .signin { width: 100%; padding: 28px 18px; }
  html.web .qs-row { flex-direction: column; align-items: stretch; }
  html.web .qs-compose .foot { flex-wrap: wrap; }
  html.web .qs-compose .foot .btn { margin-left: 0 !important; width: 100%; justify-content: center; }
  html.web .inbox .thread { padding-left: 12px; padding-right: 12px; }
}