/* ===== AIST SHELL FRAME (port of aist-app SidebarClient/TopBar skin) ===== */
/* App shell pinned to the viewport: the frame never scrolls, only .app-main does,
   so the sidebar stays put. (Body-scroll + position:sticky was not holding here.) */
.app-frame{display:flex;height:100vh;overflow:hidden}

/* Sidebar: full-height white panel — fixed within the non-scrolling frame */
.app-frame > .sidebar{
  width:240px;flex-shrink:0;
  background:var(--sidebar);
  border-right:1px solid var(--sidebar-border);
  display:flex;flex-direction:column;
  height:100%;overflow-y:auto;
  max-height:none; /* override generic .sidebar max-height (serves .split layouts) */
  transition:width .2s;
}
.app-frame > .sidebar.collapsed{width:56px}

/* Panel header: brand + collapse toggle */
.sb-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  height:var(--topbar-h);flex-shrink:0;
  padding:0 16px;border-bottom:1px solid var(--sidebar-border)}
.app-frame .sidebar.collapsed .sb-head{padding:14px 8px;justify-content:center}
.sb-brand{min-width:0}
.sb-brand-name{font-family:var(--font-head);font-weight:800;font-size:1.05rem;
  color:var(--primary);letter-spacing:-.01em}
.sb-brand-sub{font-size:.68rem;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.app-frame .sidebar.collapsed .sb-brand{display:none}
.sb-toggle{border:0;background:none;cursor:pointer;padding:4px;
  border-radius:var(--r-sm);color:var(--muted);display:flex;flex-shrink:0}
.sb-toggle:hover{background:var(--sidebar-accent)}
.sb-toggle svg{width:16px;height:16px}

/* Nav */
.sb-nav{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:2px}
.sb-group{margin-bottom:16px}
/* Section header: matches lk-shell group label (Commissioner 11px 600 uppercase) */
.sb-section-label{
  padding:4px 12px;
  font-family:var(--font-head);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);
}
.sb-ic{display:flex;flex-shrink:0}
.sb-ic svg{width:16px;height:16px}
/* Menu item: Inter 14px, muted-on-neutral → primary when active */
.app-frame .sidebar-link{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:var(--r-sm);
  color:var(--sidebar-fg);text-decoration:none;font-size:.875rem;
  transition:background .12s,color .12s;
}
.app-frame .sidebar-link:hover{background:var(--sidebar-accent)}
.app-frame .sidebar-link.active{background:var(--sidebar-accent);color:var(--primary);font-weight:500}
.sb-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Cohort tag «№N» — flat rectangular label (not a round count pill) */
.sb-badge{flex:0 0 auto;display:inline-flex;align-items:center;
  padding:1px 7px;border-radius:5px;
  background:var(--muted-bg);color:var(--muted);
  font-size:.7rem;font-weight:600;white-space:nowrap}
.sb-badge::before{content:"№"}
.app-frame .sidebar-link.active .sb-badge{background:var(--accent-soft);color:var(--primary)}
.app-frame .sidebar.collapsed .sb-label{display:none}
.app-frame .sidebar.collapsed .sb-badge{display:none}
.app-frame .sidebar.collapsed .sb-section-label{display:none}
.app-frame .sidebar.collapsed .sidebar-link{justify-content:center;padding:8px}
.app-frame .sidebar-sub{margin-left:24px;display:flex;flex-direction:column;gap:2px;padding-top:2px}
.app-frame .sidebar-sub .sidebar-link{font-size:.835rem;padding:6px 10px}
/* User section: pinned to the bottom of the sidebar (lk-shell footer block) */
.sb-user{
  padding:8px;
  border-top:1px solid var(--sidebar-border);
  flex-shrink:0;
}

/* Right column: topbar → tabs → content */
.app-main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow-y:auto}
.topbar{
  height:var(--topbar-h);flex-shrink:0;
  display:flex;align-items:center;gap:16px;
  background:var(--card);border-bottom:1px solid var(--border);
  padding:0 24px;
  position:sticky;top:0;z-index:10;
}
.topbar-title{flex:1;min-width:0;margin:0;
  font-family:var(--font-body);font-size:.9rem;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.content-tabs{display:flex;gap:4px;overflow:visible;
  padding:0 24px;border-bottom:1px solid var(--border);background:var(--card)}
.content-tabs:empty{display:none}
.content-tabs a{display:block;padding:10px 12px;white-space:nowrap;
  color:var(--muted);text-decoration:none;font-size:.875rem;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.content-tabs a:hover{color:var(--fg)}
.content-tabs a.active{color:var(--fg);font-weight:600;border-bottom-color:var(--primary)}

/* Tab with a dropdown submenu (ported from compass nav-has-sub) */
.content-tabs .tab-item{position:relative;display:flex}
.content-tabs .tab-parent{display:flex;align-items:center;gap:3px}
.tab-caret{width:14px;height:14px;flex:0 0 auto;opacity:.7}
.content-tabs .tab-sub{position:absolute;top:100%;left:0;z-index:50;
  display:none;padding-top:6px}
.content-tabs .tab-item:hover .tab-sub,
.content-tabs .tab-item:focus-within .tab-sub{display:block}
.tab-sub-card{display:flex;flex-direction:column;gap:2px;min-width:210px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 10px 28px rgba(0,0,0,.10);padding:6px}
.tab-sub-card a{padding:8px 10px;border-bottom:0;margin-bottom:0;border-radius:8px;
  color:var(--fg);white-space:nowrap}
.tab-sub-card a:hover{background:var(--accent-soft);color:var(--primary)}
.tab-sub-card a.active{background:var(--accent-soft);color:var(--primary);font-weight:600}

/* Content fills the available width (viewport minus sidebar). No max-width cap
   so dashboards/bento reach the screen edges; side padding keeps breathing room. */
.app-main > main#app{flex:1;min-width:0;width:100%;
  margin:0;padding:var(--sp-xl) var(--sp-lg)}

/* Overview entry page: full-bleed, no frame */
body.is-overview .app-frame > .sidebar,
body.is-overview .topbar,
body.is-overview .content-tabs{display:none}
/* No sidebar on overview → keep the landing centered and readable (text-width cap) */
body.is-overview .app-main > main#app{max-width:var(--container-max);margin:0 auto}

/* ===== MOBILE (≤900px): sidebar → horizontal strip, no collapse ===== */
@media(max-width:900px){
  /* Mobile stacks vertically → revert to normal body scroll (no pinned frame). */
  .app-frame{flex-direction:column;height:auto;overflow:visible}
  .app-main{overflow-y:visible}
  .app-frame > .sidebar{
    width:100%;height:auto;position:static;
    border-right:0;border-bottom:1px solid var(--sidebar-border);
  }
  .app-frame > .sidebar.collapsed{width:100%}
  .sb-head{display:none}
  .sb-nav{flex-direction:row;overflow-x:auto;overflow-y:hidden;
    padding:8px 16px;gap:0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .sb-nav::-webkit-scrollbar{display:none}
  .app-frame .sidebar-link{white-space:nowrap;padding:8px 10px}
  /* collapse is a desktop affordance — neutralize it on mobile */
  .app-frame .sidebar.collapsed .sb-label{display:inline}
  .app-frame .sidebar.collapsed .sidebar-link{justify-content:flex-start;padding:8px 10px}
  .sb-ic{display:none}
  .app-frame .sidebar-sub{display:none}
  .sb-section-label{display:none}
  .sb-user{display:none}
  .topbar{padding:0 16px}
  .content-tabs{padding:0 16px}
}