/* PreciousCalc branded header + application navigation */
body main{
  padding-top:0;
}

/* Desktop: align the placard with the calculator workspace, not the sidebar. */
#preciousBrandHeader{
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  column-gap:18px;
  align-items:center;
  width:100%;
  padding:10px 0 8px;
  margin:0 auto;
}

#preciousBrandHeader .brand-banner-link{
  grid-column:2;
  display:block;
  width:min(55%,490px);
  margin:0;
  line-height:0;
}

#preciousBrandHeader .brand-banner{
  display:block;
  width:100%;
  height:auto;
}

.menu-toggle{
  display:none;
  border:0;
  background:transparent;
  color:#202124;
  font-size:28px;
  line-height:1;
  padding:8px;
  cursor:pointer;
}

body[data-metal] .metal-tabs{margin-top:0}

.app-shell{
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:18px;
  align-items:start;
}

.app-content{min-width:0}
.site-sidebar{position:sticky;top:14px;padding:10px 8px 12px 0}
.site-sidebar nav{display:block}
.nav-section{padding:8px 0 12px;border-bottom:1px solid #d9dde3}
.nav-section:last-child{border-bottom:0}
.nav-heading{padding:0 10px 5px;color:#7a828d;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.site-sidebar a{display:block;padding:7px 10px;border-radius:7px;color:#3f4650;text-decoration:none;font-size:14px;line-height:1.25}
.site-sidebar a:hover,.site-sidebar a:focus{background:#e7e9ec;text-decoration:none}
.site-sidebar a[aria-current="page"]{background:#dedfe2;color:#202124;font-weight:700}
.sidebar-scrim{display:none}

/* Mobile/tablet: hamburger has a fixed home at the upper-left; placard remains centered. */
@media(max-width:760px){
  body main{padding-top:2px}
  #preciousBrandHeader{
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 44px;
    column-gap:6px;
    align-items:center;
    padding:4px 0 6px;
  }
  .menu-toggle{
    display:block;
    grid-column:1;
    grid-row:1;
    justify-self:start;
  }
  #preciousBrandHeader .brand-banner-link{
    grid-column:2;
    grid-row:1;
    justify-self:center;
    width:min(100%,430px);
  }
  .app-shell{display:block}
  .site-sidebar{
    position:fixed;
    z-index:1200;
    top:0;left:0;bottom:0;
    width:min(290px,84vw);
    padding:18px 14px;
    background:#f7f8f9;
    box-shadow:8px 0 24px rgba(0,0,0,.16);
    transform:translateX(-105%);
    transition:transform .2s ease;
    overflow-y:auto;
  }
  body.menu-open .site-sidebar{transform:translateX(0)}
  .sidebar-scrim{position:fixed;z-index:1100;inset:0;background:rgba(0,0,0,.28)}
  body.menu-open .sidebar-scrim{display:block}
  body.menu-open{overflow:hidden}
  .nav-heading{font-size:12px}
  .site-sidebar a{padding:9px 10px;font-size:15px}
}


/* Planned destinations remain visible without behaving like links. */
.site-sidebar .nav-disabled{
  display:block;
  padding:7px 10px;
  border-radius:7px;
  color:#a1a7b0;
  font-size:14px;
  line-height:1.25;
  cursor:default;
  user-select:none;
}
@media(max-width:760px){
  .site-sidebar .nav-disabled{padding:9px 10px;font-size:15px}
}
