/* =========================================================
   Fluid / zoom-responsive layout layer
   Browser zoom changes the CSS viewport width. These rules let the
   application grow on zoom-out and collapse earlier on zoom-in.
   ========================================================= */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  padding-block:clamp(22px,2.2vw,42px);
  padding-inline:clamp(12px,1.8vw,30px);
}

/* Keep the familiar size at normal widths, but progressively use more
   viewport space when the browser is zoomed out / viewport gets wider. */
.app{width:min(1180px,100%);}

@media (min-width:1600px){
  .app{width:min(1280px,calc(100vw - 64px));}
}

@media (min-width:2000px){
  .app{width:min(1420px,calc(100vw - 80px));}
}

@media (min-width:2500px){
  .app{width:min(1600px,calc(100vw - 96px));}
}

@media (min-width:3200px){
  .app{width:min(1800px,calc(100vw - 120px));}
}

/* Let the main tool grids use the additional width instead of staying
   visually frozen at their former fixed canvas size. */
.grid,
.splitter-layout,
.name-layout{
  min-width:0;
}

/* Spreadsheet: the slider now behaves as a minimum working width.
   On a wider/zoomed-out page the table expands with its container. */
.name-review-table{
  width:max(100%,var(--name-table-width));
}

/* Dialogs also gain useful width on large / zoomed-out viewports. */
@media (min-width:1600px){
  .admin-dialog{width:min(1280px,calc(100vw - 72px));}
  .cloud-dialog{width:min(820px,calc(100vw - 72px));}
}

@media (min-width:2200px){
  .admin-dialog{width:min(1440px,calc(100vw - 96px));}
  .cloud-dialog{width:min(920px,calc(100vw - 96px));}
}

/* Collapse dense two-column workspaces earlier while zooming in so the
   interface does not feel squeezed. */
@media (max-width:1080px){
  .name-layout{grid-template-columns:1fr;}
  .name-output-shell{max-height:640px;}
}

@media (max-width:980px){
  .splitter-layout{grid-template-columns:1fr;}
}

@media (max-width:900px){
  .home-page{padding-top:32px;}
  .tool-card-grid{grid-template-columns:1fr;}
  .tool-launch-card{min-height:165px;}
  .tool-launch-icon{margin-bottom:18px;}
}

@media (max-width:760px){
  body{padding:20px 12px 28px;}
  .home-hero h1{font-size:clamp(34px,10vw,50px);}
  .card{padding:clamp(14px,4vw,18px);}
  .admin-dialog,.cloud-dialog{max-height:calc(100dvh - 24px);}
}

@media (max-width:520px){
  .topbar{flex-wrap:wrap;}
  .account-button{max-width:100%;}
  .home-info-strip>span{padding:12px 13px;}
  .tool-launch-card{padding:17px;}
}