/* ==========================================================================
   CodeForge 8.0 — app shell (titlebar, nav pane, responsive rail/drawer)
   Real window layout (not the prototype's simulated .window box): the shell
   fills the whole browser/PWA window. Breakpoints use @media on the actual
   viewport width, matching the prototype's container-query breakpoints
   (900px -> icon rail, 600px -> overlay drawer).
   ========================================================================== */
html,body{background:var(--ground)}
.app-shell{display:grid;grid-template-rows:var(--titlebar-h) minmax(0,1fr);height:100vh;height:100dvh;background:var(--mica);position:relative}

/* ---- title bar ---- */
.titlebar{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px) minmax(0,1fr);
  align-items:center;gap:12px;height:var(--titlebar-h);padding:0 12px;
  background:var(--mica);border-bottom:1px solid var(--stroke);
  -webkit-app-region:drag;app-region:drag;position:relative;z-index:var(--z-nav);
}
.tb-left{display:flex;align-items:center;gap:10px;min-width:0}
.tb-left button,.tb-search,.tb-right>*{-webkit-app-region:no-drag;app-region:no-drag}
.logo{width:20px;height:20px;flex:none}
.app-name{font-size:var(--fs-caption);font-weight:600;letter-spacing:.01em;white-space:nowrap}
.app-ver{font-size:var(--fs-caption);color:var(--text-3)}
.tb-search{height:32px;display:flex;align-items:center;gap:8px;padding:0 6px 0 10px;background:var(--layer);border:1px solid var(--stroke);border-bottom-color:var(--stroke-strong);border-radius:var(--r-control);color:var(--text-3);cursor:text;text-align:left;width:100%}
.tb-search:hover{background:var(--card)}
.tb-search span{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}
.tb-right{display:flex;justify-content:flex-end;align-items:center;height:100%;gap:8px}
.tb-plan{display:flex;align-items:center}
.nav-toggle{display:none}

/* Window Controls Overlay: the titlebar area is drawn by the OS caption
   buttons on the right; env(titlebar-area-*) tells us exactly where our
   draggable region sits so we don't double-pad it. js/app.js also listens
   to navigator.windowControlsOverlay 'geometrychange' and mirrors the box
   into --wco-x/--wco-w/--wco-h for browsers that fire it after this CSS
   already applied once. */
@media (display-mode: window-controls-overlay){
  .titlebar{
    position:fixed;top:0;
    left:env(titlebar-area-x,0px);
    width:env(titlebar-area-width,100%);
    height:env(titlebar-area-height,40px);
  }
  /* The fixed titlebar leaves the grid flow, so size row 1 to the real
     titlebar height (no extra padding — that pushed .body into the 40px
     row and collapsed the whole app in the installed PWA). */
  :root{--titlebar-h:env(titlebar-area-height,40px)}
  .app-shell{grid-template-rows:env(titlebar-area-height,40px) minmax(0,1fr)}
}
html[data-wco="1"] .titlebar{
  left:var(--wco-x,env(titlebar-area-x,0px));
  width:var(--wco-w,env(titlebar-area-width,100%));
  height:var(--wco-h,env(titlebar-area-height,40px));
}
html[data-wco="1"]{--titlebar-h:var(--wco-h,env(titlebar-area-height,40px))}
html[data-wco="1"] .app-shell{grid-template-rows:var(--wco-h,env(titlebar-area-height,40px)) minmax(0,1fr)}

/* ---- body: nav + content ---- */
/* Always row 2 — even when the titlebar is position:fixed (out of flow). */
.body{grid-row:2;display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr);min-height:0}
.content{background:var(--layer);border-top:1px solid var(--stroke);min-height:0;overflow:auto;position:relative}
.content:focus{outline:none}

/* ---- offline indicator ---- */
.offline-indicator{display:none;align-items:center;gap:6px;font-size:12px;color:var(--warn);white-space:nowrap}
.offline-indicator.visible{display:flex}

/* ---- responsive: icon rail below 900px ---- */
@media (max-width:900px){
  .body{grid-template-columns:var(--rail-w) minmax(0,1fr)}
  .nav .label,.nav .chip-pro,.nav-heading,.plan-card,.credits span{display:none}
  .nav-item{justify-content:center;padding:0}
  .nav-group{margin-top:6px;padding-top:6px;border-top:1px solid var(--stroke)}
  .nav-group:first-child{border-top:0}
  .nav-group.collapsed .nav-list{display:grid}
  .credits{justify-content:center;padding:0}
  .nav-foot .rail-pro{display:flex}
  .page{padding:20px 20px 32px}
  .titlebar{grid-template-columns:auto minmax(0,1fr) auto}
  .app-ver{display:none}
}

/* ---- responsive: overlay drawer below 600px ---- */
@media (max-width:600px){
  .body{grid-template-columns:minmax(0,1fr)}
  .nav{position:fixed;top:var(--titlebar-h);bottom:0;left:0;width:min(300px,86%);z-index:var(--z-flyout);background:var(--mica);border-right:1px solid var(--stroke);box-shadow:var(--shadow-dialog);transform:translateX(-102%);transition:transform var(--dur) var(--ease)}
  .app-shell.drawer-open .nav{transform:none}
  .app-shell.drawer-open::after{content:"";position:fixed;inset:var(--titlebar-h) 0 0 0;background:var(--scrim);z-index:calc(var(--z-flyout) - 1)}
  .nav .label,.credits span{display:inline}
  .nav .chip-pro{display:inline-flex}
  .plan-card{display:grid}
  .nav .nav-heading{display:flex}
  .nav-item{justify-content:flex-start;padding:0 8px 0 12px}
  .nav-group{border-top:0;padding-top:0;margin-top:10px}
  .nav-foot .rail-pro{display:none}
  .credits{justify-content:flex-start;padding:0 12px}
  .nav-toggle{display:inline-flex}
  .app-name,.app-ver{display:none}
  .titlebar{padding-left:6px;padding-right:8px}
  .tb-search .kbd{display:none}
  .plans,.features{grid-template-columns:1fr}
  .page-head .ph-actions{width:100%;justify-content:flex-start;margin-left:0}
  .page-head{flex-wrap:wrap}
  .home-cols{grid-template-columns:minmax(0,1fr)}
  .status-card{position:static}
  .jwt-grid{grid-template-columns:minmax(0,1fr)}
  .panes{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1100px){
  .home-cols{grid-template-columns:minmax(0,1fr)}
  .status-card{position:static}
  .jwt-grid{grid-template-columns:minmax(0,1fr)}
}

/* Tool route gutter — header and body share one column and one gutter,
   matching the prototype's .page (28px/36px, 1280px max). */
#toolHeader{padding:24px 36px 0;max-width:1280px;margin:0 auto;width:100%;margin-bottom:16px}
.tool-content{padding:0 36px 40px;max-width:1280px;margin:0 auto;width:100%}
.tool-content > .page{padding-inline:0}
@media (max-width:900px){#toolHeader{padding:20px 20px 0}.tool-content{padding:0 20px 32px}}
@media (max-width:600px){#toolHeader{padding:16px 16px 0}.tool-content{padding:0 16px 24px}}