:root{--tabbar-h:64px;--slide:180ms ease}
.shell{min-height:100vh}
.rail,.panel,.panel-toggle{display:none}
.main{
  padding:0 var(--gutter) calc(var(--tabbar-h) + 84px + env(safe-area-inset-bottom,0px));
  max-width:var(--col-main);
  margin:0 auto;
}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(8px + env(safe-area-inset-top,0px)) 0 4px;
}

.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:10;
  display:grid;grid-template-columns:repeat(8,1fr);
  background:var(--bg-2);
  border-top:1px solid var(--line);
  padding:6px 8px env(safe-area-inset-bottom,0px);
}
.tab{
  min-height:52px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--muted);font-size:var(--fs-tab);line-height:1;text-decoration:none;
  transition:color var(--fade);
}
.tab span{display:none}
.tab[aria-current="page"]{color:var(--text);font-weight:600}
.tab[aria-current="page"] span{display:block}

.tellbar{
  position:fixed;left:0;right:0;z-index:9;
  bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px));
  background:var(--bg);
  border-top:1px solid var(--line);
  padding:10px var(--gutter);
}

/* 760 to 1100: rail plus one column */
@media (min-width:760px){
  .shell{display:grid;grid-template-columns:232px minmax(0,1fr);gap:0}
  .tabbar,.topbar{display:none}
  .rail{
    display:flex;flex-direction:column;
    position:sticky;top:0;height:100vh;
    padding:28px 16px 20px 24px;
    background:var(--bg-2);
    border-right:1px solid var(--line);
  }
  .rail .lockup{margin:0 0 28px 0}
  .main{padding:40px 40px 0;margin:0;display:flex;flex-direction:column;min-height:100vh}
  .main .content{flex:1;padding-bottom:32px}
  .tellbar{position:sticky;left:auto;right:auto;bottom:0;padding:12px 0 16px}
}

/* Over 1100: the tablet layout, plus a context panel that pushes the content when open */
@media (min-width:1100px){
  .shell{transition:padding-right var(--slide)}
  .main{width:100%;max-width:calc(var(--col-main) + 96px);margin:0 auto;padding:44px 48px 0}
  .main .content{padding-bottom:64px}
  .panel{
    display:block;
    position:fixed;top:0;right:0;bottom:0;z-index:20;
    width:var(--col-panel);overflow-y:auto;
    padding:44px 28px 32px;
    background:var(--bg-2);
    border-left:1px solid var(--line);
    transform:translateX(100%);visibility:hidden;
    transition:transform var(--slide),visibility 0s linear 180ms;
  }
  .panel-toggle{display:grid}
  [data-panel="open"] .shell{padding-right:var(--col-panel)}
  [data-panel="open"] .panel{transform:none;visibility:visible;transition:transform var(--slide),visibility 0s}
  [data-panel="open"] .panel-toggle{transform:translateX(calc(-1 * var(--col-panel)))}
  [data-panel="open"] .tellbar{display:none}
}