/* Responsive desktop-fit layer.
 * Fluid viewport sizing only: no browser zoom, no event/handler changes.
 * Mobile breakpoints remain owned by the existing portal styles.
 */
:root{
  --skillo-desktop-gutter:clamp(16px,2.2vw,48px);
  --skillo-desktop-gap:clamp(12px,1.8vw,36px);
}

@media (min-width:901px){
  html,body{min-width:0!important}
  body.public-landing-active{
    width:100%!important;
    max-width:none!important;
    padding-inline:var(--skillo-desktop-gutter)!important;
    box-sizing:border-box!important;
  }
  body.public-landing-active #loginScreen.front-home{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding-inline:0!important;
    gap:var(--skillo-desktop-gap)!important;
    box-sizing:border-box!important;
  }
  body.public-landing-active #loginScreen.front-home>.front-nav,
  body.public-landing-active #loginScreen.front-home>.front-hero,
  body.public-landing-active #loginScreen.front-home>.front-showcase,
  body.public-landing-active #loginScreen.front-home>.front-status-banner,
  body.public-landing-active #loginScreen.front-home>.front-highlights,
  body.public-landing-active #loginScreen.front-home>.front-tool-catalog,
  body.public-landing-active #loginScreen.front-home>#landingPolicyStrip,
  body.public-landing-active #loginScreen.front-home>#landingMetrics,
  body.public-landing-active #loginScreen.front-home>#landingArticles,
  body.public-landing-active #loginScreen.front-home>.op-footer{
    min-width:0!important;
    max-width:none!important;
    box-sizing:border-box!important;
  }
  body.public-landing-active #loginScreen.front-home>.front-hero{
    padding:clamp(28px,3vw,64px)!important;
  }
  body.public-landing-active #loginScreen.front-home>.front-hero h1{
    font-size:clamp(30px,2.8vw,64px)!important;
    line-height:1.16!important;
  }
  body.public-landing-active #loginScreen.front-home>.front-showcase{
    height:clamp(380px,46dvh,760px)!important;
    min-height:clamp(380px,46dvh,760px)!important;
  }
  body.public-landing-active #loginScreen.front-home .front-tool-catalog .catalog-grid{
    grid-template-columns:repeat(auto-fit,minmax(clamp(220px,15vw,340px),1fr))!important;
    gap:clamp(10px,1vw,18px)!important;
  }

  /* Authenticated dashboard and operation pages use the full desktop canvas. */
  #mainApp:is([style*="display: block"],[style*="display: grid"]){
    width:calc(100% - var(--skillo-desktop-gutter) - var(--skillo-desktop-gutter))!important;
    max-width:none!important;
    min-width:0!important;
    margin-inline:auto!important;
    box-sizing:border-box!important;
  }
  #mainApp.workspace-tool-focused{
    width:calc(100% - var(--skillo-desktop-gutter) - var(--skillo-desktop-gutter))!important;
    max-width:none!important;
    min-width:0!important;
  }
  #mainApp.workspace-tool-focused>.container,
  #mainApp.workspace-tool-focused .tab-content.active{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  #mainApp.workspace-tool-focused>.container{
    padding-inline:clamp(12px,1.4vw,32px)!important;
  }
  #mainApp.workspace-tool-focused .tab-content.active{
    padding:clamp(14px,1.5vw,30px)!important;
  }
  #mainApp.workspace-tool-focused .tab-content.active :is(.control-panel,.upload-section,.preview-container,.btn-group,.action-panel,.operation-panel,.tool-panel){
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  #mainApp.workspace-tool-focused .tab-content.active :is(.upload-box,.preview-box,.control-panel){
    min-width:0!important;
  }
  #mainApp.workspace-tool-focused .workspace-header-row{
    padding-inline:clamp(12px,1.4vw,30px)!important;
  }

  /* Dashboard cards expand into the available desktop width instead of
     remaining a fixed four-column strip on large monitors. */
  #mainApp .workspace-tool-grid,
  #mainApp .workspace-tool-grid>.dashboard-tool-launcher{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  #mainApp .workspace-tool-grid .dashboard-tool-launcher{
    grid-template-columns:repeat(auto-fit,minmax(clamp(210px,14vw,340px),1fr))!important;
    gap:clamp(10px,1vw,18px)!important;
    padding:clamp(14px,1.5vw,30px)!important;
  }
  #mainApp .workspace-tool-grid .dashboard-card{
    min-width:0!important;
    min-height:clamp(82px,6vw,116px)!important;
    padding:clamp(14px,1.3vw,24px)!important;
  }

  /* Public free-tool pages were capped at 1120px; keep their controls
     readable while letting the document use a wide desktop viewport. */
  #mainApp.public-free-mode{
    width:calc(100% - var(--skillo-desktop-gutter) - var(--skillo-desktop-gutter))!important;
    max-width:none!important;
    min-width:0!important;
    margin:var(--skillo-desktop-gutter) auto!important;
    padding:clamp(16px,2vw,36px)!important;
    box-sizing:border-box!important;
  }
  #mainApp.public-free-mode>.workspace-top-shell,
  #mainApp.public-free-mode>.container,
  #mainApp.public-free-mode .tab-content.active{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  #mainApp.public-free-mode .public-free-toolbar{
    padding:clamp(12px,1.3vw,24px)!important;
    gap:clamp(10px,1.2vw,22px)!important;
  }
  #mainApp.public-free-mode .public-free-toolbar-heading>strong{
    font-size:clamp(17px,1.35vw,30px)!important;
  }
  #mainApp.public-free-mode #publicFreeToolsNav{
    gap:clamp(8px,1vw,16px)!important;
  }
  #mainApp.public-free-mode #publicFreeToolsNav>a{
    min-height:clamp(37px,2.8vw,50px)!important;
    padding-inline:clamp(12px,1.2vw,24px)!important;
    font-size:clamp(12px,.9vw,16px)!important;
  }
  #mainApp.public-free-mode .tab-content.active{
    padding:clamp(14px,1.6vw,32px)!important;
  }
}

@media (min-width:1600px){
  #mainApp.workspace-tool-focused .workspace-header-row>strong{
    font-size:clamp(18px,1.2vw,30px)!important;
  }
  #mainApp.workspace-tool-focused .tab-content.active :is(h1,h2,h3){
    font-size:clamp(18px,1.25vw,32px)!important;
  }
  #mainApp.public-free-mode .public-free-toolbar-heading>span,
  #mainApp.public-free-mode .public-free-tool-hint{
    font-size:clamp(11px,.7vw,15px)!important;
  }
}


/* Match the authenticated dashboard's existing high-specificity selector. */
@media (min-width:901px){
  #mainApp:is([style*="display: block"],[style*="display: grid"]):not(.workspace-tool-focused):not(.public-free-mode){
    width:calc(100% - var(--skillo-desktop-gutter) - var(--skillo-desktop-gutter))!important;
    max-width:none!important;
    min-width:0!important;
    margin-inline:auto!important;
    box-sizing:border-box!important;
  }
}


/* Match the core operation selector that carries the 1480px cap. */
@media (min-width:901px){
  #mainApp:is([style*="display: block"],[style*="display: grid"]).workspace-tool-focused,
  #mainApp:is([style*="display: block"],[style*="display: grid"]).public-free-mode.workspace-tool-focused{
    width:calc(100% - var(--skillo-desktop-gutter) - var(--skillo-desktop-gutter))!important;
    max-width:none!important;
    min-width:0!important;
    margin-inline:auto!important;
    box-sizing:border-box!important;
  }
}