/* ============================================================
   APP SHELL — LIGHTWEIGHT PRO
============================================================ */

.shell{
  position:relative;
  z-index:1;

  display:grid;
  grid-template-columns:var(--side-w) minmax(0,1fr);

  width:100%;
  min-height:100dvh;
}


/* ============================================================
   SIDEBAR
============================================================ */

.side{
  position:sticky;
  top:0;

  display:flex;
  flex-direction:column;

  width:100%;
  height:100dvh;
  min-height:0;

  padding:12px;

  background:rgba(247,244,237,.97);

  border-right:1px solid var(--cream-3);

  overflow-x:hidden;
  overflow-y:auto;

  overscroll-behavior:contain;
  scrollbar-gutter:stable;

  -webkit-overflow-scrolling:touch;
}


/* Optional blur only on devices that support it comfortably */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .side{
    background:rgba(247,244,237,.94);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
  }
}


/* ============================================================
   SIDEBAR HEADER
============================================================ */

.side-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  min-height:42px;

  padding:4px 4px 11px;
}


/* ============================================================
   BRAND
============================================================ */

.brand{
  display:flex;
  align-items:center;

  min-width:0;

  gap:10px;

  color:var(--ink);

  font-size:12px;
  font-weight:650;
  line-height:1.2;

  letter-spacing:.025em;
}

.brand>div{
  min-width:0;
}

.brand>div>b,
.brand>div>strong{
  display:block;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.brand>div>span{
  display:block;

  margin-top:3px;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:var(--muted);

  font-size:9px;
  font-weight:500;
  line-height:1.2;

  letter-spacing:.09em;
}

.brand-mark{
  display:grid;
  place-items:center;

  flex:0 0 30px;

  width:30px;
  height:30px;

  border-radius:8px;

  background:var(--ink);
  color:var(--cream-2);

  font-size:13px;
  font-weight:650;
  line-height:1;

  user-select:none;
}


/* ============================================================
   SIDEBAR NAVIGATION
============================================================ */

.side-nav{
  display:flex;
  flex-direction:column;

  min-width:0;

  gap:2px;

  padding-bottom:16px;
}


/* ============================================================
   SIDEBAR FOOTER
============================================================ */

.side-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:8px;

  margin-top:auto;

  padding:11px 4px 2px;

  border-top:1px solid var(--cream-3);
}


/* ============================================================
   MAIN
============================================================ */

.main{
  min-width:0;
  width:100%;

  min-height:100dvh;

  overflow:clip;
}


/* ============================================================
   TOP BAR
============================================================ */

.top{
  position:sticky;
  top:0;
  z-index:20;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:18px;

  width:100%;
  min-height:var(--top-h);

  padding:8px 24px;

  background:rgba(247,244,237,.97);

  border-bottom:1px solid var(--cream-3);
}


/* Lightweight optional blur */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .top{
    background:rgba(247,244,237,.94);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
  }
}


/* ============================================================
   TOP CONTENT
============================================================ */

.top-left,
.top-actions{
  display:flex;
  align-items:center;

  min-width:0;

  gap:9px;
}

.top-left{
  flex:1 1 auto;
}

.top-actions{
  flex:0 0 auto;
}


/* ============================================================
   WORKSPACE HEADER
============================================================ */

.workspace-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  width:100%;
  max-width:1280px;

  gap:32px;

  padding:40px 32px 20px;
}

.workspace-head>div{
  min-width:0;
}

.workspace-head h2{
  max-width:900px;

  margin:0;

  font-size:clamp(30px,4vw,52px);
  font-weight:650;
  line-height:.98;

  letter-spacing:-.035em;

  text-wrap:balance;
  overflow-wrap:anywhere;
}


/* ============================================================
   WORK AREA
============================================================ */

.work{
  width:100%;

  padding:
    12px
    32px
    calc(80px + env(safe-area-inset-bottom));
}

.wrap{
  width:100%;
  max-width:1280px;

  min-width:0;
}


/* ============================================================
   MOBILE HEADER
============================================================ */

.mob{
  display:none;
}


/* ============================================================
   COMPACT SIDEBAR
============================================================ */

.side.compact{
  width:78px;
  padding-inline:10px;
}


/* Existing :has support */
@supports selector(.shell:has(.side.compact)){
  .shell:has(.side.compact){
    grid-template-columns:78px minmax(0,1fr);
  }
}


/* Optional fallback:
   add .side-compact to .shell via your existing JS
*/
.shell.side-compact{
  grid-template-columns:78px minmax(0,1fr);
}


.side.compact .brand>div,
.side.compact .side-search input,
.side.compact .side-search kbd,
.side.compact .nav-copy,
.side.compact .side-nav kbd,
.side.compact .grp,
.side.compact .mini-health>div{
  display:none;
}

.side.compact .brand{
  justify-content:center;
}

.side.compact .side-nav button{
  justify-content:center;

  padding-inline:6px;
}

.side.compact .side-search{
  justify-content:center;

  padding-inline:6px;
}

.side.compact .side-head{
  justify-content:center;
}

.side.compact .side-foot{
  justify-content:center;
}

.side.compact .side-collapse{
  display:none;
}


/* ============================================================
   TABLET
============================================================ */

@media(max-width:1100px){

  .workspace-head{
    gap:24px;
    padding:
      34px
      24px
      18px;
  }

  .work{
    padding:
      10px
      24px
      calc(72px + env(safe-area-inset-bottom));
  }

  .top{
    padding-inline:18px;
  }
}


/* ============================================================
   MOBILE
============================================================ */

@media(max-width:960px){

  .shell,
  .shell.side-compact{
    display:block;

    min-height:100dvh;
  }

  .main{
    width:100%;
    min-height:100dvh;

    overflow:visible;
  }


  /* sidebar becomes off-canvas */
  .side,
  .side.compact{
    display:none;

    position:fixed;

    top:0;
    bottom:0;
    left:0;

    z-index:100;

    width:min(320px,88vw);
    height:100dvh;

    padding:12px;

    border-right:1px solid var(--cream-3);

    background:var(--cream);

    overflow-y:auto;

    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  .side.open,
  .side.compact.open{
    display:flex;
  }


  /* compact mode is disabled while mobile drawer is open */
  .side.compact .brand>div,
  .side.compact .nav-copy,
  .side.compact .grp,
  .side.compact .mini-health>div{
    display:initial;
  }

  .side.compact .brand>div,
  .side.compact .nav-copy,
  .side.compact .mini-health>div{
    display:block;
  }

  .side.compact .grp{
    display:block;
  }

  .side.compact .side-search input{
    display:block;
  }

  .side.compact .side-head{
    justify-content:space-between;
  }

  .side.compact .brand{
    justify-content:flex-start;
  }

  .side.compact .side-nav button{
    justify-content:flex-start;
    padding-inline:9px;
  }

  .side.compact .side-search{
    justify-content:flex-start;
    padding-inline:9px;
  }


  .mob{
    position:sticky;
    top:0;
    z-index:60;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:10px;

    min-height:54px;

    padding:
      max(7px,env(safe-area-inset-top))
      max(14px,env(safe-area-inset-right))
      7px
      max(14px,env(safe-area-inset-left));

    background:var(--cream);

    border-bottom:1px solid var(--cream-3);
  }


  .top{
    top:54px;

    min-height:48px;

    padding:7px 16px;

    gap:10px;

    background:rgba(247,244,237,.98);

    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }


  .workspace-head{
    align-items:flex-start;
    flex-direction:column;

    gap:16px;

    padding:
      30px
      20px
      16px;
  }

  .workspace-head h2{
    font-size:clamp(30px,7vw,42px);
  }


  .work{
    padding:
      8px
      20px
      calc(64px + env(safe-area-inset-bottom));
  }
}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media(max-width:640px){

  .top{
    padding-inline:12px;
  }

  .top-left,
  .top-actions{
    gap:6px;
  }

  .workspace-head{
    padding:
      24px
      14px
      12px;
  }

  .workspace-head h2{
    font-size:clamp(29px,9vw,36px);
    line-height:1;
  }

  .work{
    padding:
      6px
      14px
      calc(56px + env(safe-area-inset-bottom));
  }

  .side,
  .side.compact{
    width:min(310px,90vw);
  }
}


/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media(max-width:420px){

  .workspace-head{
    padding-inline:12px;
  }

  .work{
    padding-left:12px;
    padding-right:12px;
  }

  .side,
  .side.compact{
    width:min(300px,92vw);
  }
}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media(prefers-reduced-motion:reduce){

  .shell,
  .side,
  .top{
    scroll-behavior:auto;
  }
}