/* Jr Labs RC18.4 — Wide task workspace
   Keep internal tools close to the viewport edges on desktop/tablet.
   Tiny Breaks keeps its deliberately narrower game layout. */

:root{
  --jr-task-gutter-desktop:18px;
  --jr-task-gutter-tablet:16px;
}

/* Desktop: same near-edge shell used by SVG Studio. */
@media(min-width:1101px){
  .app-view:not(.tiny-breaks-view) .app-bar-inner,
  .app-view:not(.tiny-breaks-view) .app-content,
  .app-view:not(.tiny-breaks-view) .devtool-content,
  .app-view:not(.tiny-breaks-view) .json-formatter-content,
  .app-view:not(.tiny-breaks-view) .jwt-viewer-content{
    width:calc(100% - (var(--jr-task-gutter-desktop) * 2))!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* Tablet/small laptop: remove the old 960px cap while keeping breathing room. */
@media(min-width:721px) and (max-width:1100px){
  .app-view:not(.tiny-breaks-view) .app-bar-inner,
  .app-view:not(.tiny-breaks-view) .app-content,
  .app-view:not(.tiny-breaks-view) .devtool-content,
  .app-view:not(.tiny-breaks-view) .json-formatter-content,
  .app-view:not(.tiny-breaks-view) .jwt-viewer-content{
    width:calc(100% - (var(--jr-task-gutter-tablet) * 2))!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* Mobile already uses a compact 11px side gutter in the product UI system. */
@media(max-width:720px){
  .app-view:not(.tiny-breaks-view) .app-bar-inner,
  .app-view:not(.tiny-breaks-view) .app-content,
  .app-view:not(.tiny-breaks-view) .devtool-content,
  .app-view:not(.tiny-breaks-view) .json-formatter-content,
  .app-view:not(.tiny-breaks-view) .jwt-viewer-content{
    width:calc(100% - 22px)!important;
    max-width:none!important;
  }
}