/* ============================================================
   RESPONSIVE.CSS
   ============================================================ */

@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  :root { --sidebar-width: 210px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .view { padding: var(--sp-4); }
}

@media (max-width: 900px) {
  #app-shell {
    grid-template-columns: 0 1fr;
  }
  #sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: var(--sidebar-width);
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-in-out);
  }
  #app-shell.mobile-nav-open #sidebar {
    transform: translateX(0);
    box-shadow: var(--shadow-raised);
  }
  .sidebar-collapse-btn { display: none; }
  .sql-workspace, .linux-workspace, .git-workspace, .topology-workspace {
    grid-template-columns: 1fr;
  }
}

/* ---- v10: every screen size ---- */
html,body{max-width:100%;overflow-x:hidden}
#main-content,.view,.panel,.wb-grid,.wb-pane,.wb-body{min-width:0}
img,svg,video,canvas{max-width:100%}
pre,.result-table-wrap,.table-wrap,.cm-scroller{max-width:100%;overflow-x:auto}
table{max-width:100%}
.stack{display:grid;gap:var(--sp-3)}
#topbar{min-width:0;gap:8px}
.topbar-breadcrumb{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-breadcrumb strong{overflow:hidden;text-overflow:ellipsis}
.topbar-right{flex:0 0 auto;gap:6px}
.nav-burger{display:none}
@media (max-width:900px){
  .nav-burger{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;flex:0 0 auto}
  .sector-pill{display:none}
  .btn,.nav-item,.tier-chip,.theme-toggle,.wb-collapse{min-height:40px}
  .view{padding:var(--sp-3)}
  .wb-right>div{height:min(460px,70vh)!important}
  input,select,textarea,.terminal-input{font-size:16px}
}
@media (max-width:640px){
  #topbar{padding-left:var(--sp-2);padding-right:var(--sp-2)}
  .topbar-breadcrumb span:not(:last-child){display:none}
  .xp-pill>*:not(:first-child){display:none}
  .xp-pill{padding:4px 8px}
  .topbar-right{gap:4px}
  .lv-chip{padding:2px 7px}
  .grid-2,.grid-3,.path-grid{grid-template-columns:1fr!important}
  .row-between{flex-wrap:wrap;gap:var(--sp-2)}
  .lu-card{padding:20px 16px}.lu-stats{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .tier-group{padding:8px}
}
@media (max-width:380px){.lv-chip{display:none}.topbar-right .streak-badge span:last-child{display:none}}
@media (hover:none){.tier-chip:hover,.btn:hover{transform:none}}
@media (max-width:900px){#app-shell.mobile-nav-open::after{content:'';position:fixed;inset:0;background:var(--bg-overlay);z-index:55}#sidebar{z-index:60}}
.tier-nav{grid-template-columns:minmax(0,1fr)}.tier-group,.tier-row{min-width:0}