/* Shared spacing fixes for tablet, phone and the installed app. Loaded last on every page. */
:root{--gutter:16px}
@media (max-width:1280px){
  /* Team pages: header grows with its title instead of a fixed 60px, and keeps breathing room */
  .site-header{height:auto; min-height:var(--hh,60px); padding-top:max(10px,env(safe-area-inset-top,0px)); padding-bottom:10px}
  .site-header .site-title{padding-block:2px}
  .main{padding-bottom:max(32px,calc(env(safe-area-inset-bottom,0px) + 24px))}
  .bar{gap:10px 12px; flex-wrap:wrap; align-items:center}
  .bar>div{min-width:0}
  .btn.menu-btn{min-height:44px; padding-inline:18px}
  .side{padding-left:max(16px,env(safe-area-inset-left,0px)); padding-bottom:max(18px,env(safe-area-inset-bottom,0px))}
}
/* Tilly pages (own stylesheets): header row wraps cleanly, button and title never touch the edge */
.site-header .header-row{flex-wrap:wrap; row-gap:10px; column-gap:14px}
.site-header .wrap{padding-left:max(var(--gutter),env(safe-area-inset-left,0px)); padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
@media (max-width:1280px){
  .site-header .header-row{padding-top:max(4px,env(safe-area-inset-top,0px)); padding-bottom:4px}
  .top.wrap{display:flex; flex-wrap:wrap; align-items:center; gap:12px 14px; padding-top:18px; padding-bottom:6px}
  main.wrap{padding-left:max(var(--gutter),env(safe-area-inset-left,0px)); padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
}
@media (max-width:520px){
  :root{--gutter:14px}
  .content,.main{padding-left:max(14px,env(safe-area-inset-left,0px)); padding-right:max(14px,env(safe-area-inset-right,0px))}
  .site-header{margin-left:-14px; margin-right:-14px; padding-left:14px; padding-right:14px}
  .card.pad,.pad{padding:16px}
  .cols3{gap:16px}
  .vseg{max-width:100%}
  .btn{max-width:100%}
}
/* Installed app window: keep content clear of rounded corners and the home bar */
@media (display-mode:standalone){
  body{padding-bottom:env(safe-area-inset-bottom,0px)}
}

/* Same dark green top bar on every page, content always centered */
.site-header{background:#183D32; border-bottom:3px solid #F2678E; color:#fff}
.site-header .site-title,.site-header .brand{color:#fff}
.content,.sh-in,.wrap{margin-left:auto; margin-right:auto}
.menu-row{display:flex; padding-top:16px; padding-bottom:0}
.menu-row .menu-btn{margin:0}
.menu-row .menu-btn[hidden]{display:none}
.menu-row:has(.menu-btn[hidden]){display:none}
@media (min-width:1281px){.menu-row{display:none}}


/* One menu everywhere: below 1281px the side panel slides in from the left over the page, on every hub, the same way
   Tilly's panel does. Wide screens keep the panel pinned. */
@media (max-width:1280px){
  .side{position:fixed; left:0; top:0; bottom:0; width:min(448px,92vw); display:flex; z-index:90; overflow-y:auto; transform:translateX(-105%); visibility:hidden;
    transition:transform .25s ease,visibility 0s linear .25s; padding-top:max(22px,env(safe-area-inset-top)); box-shadow:none}
  .side.open{transform:none; visibility:visible; transition:transform .25s ease,visibility 0s; box-shadow:6px 0 24px rgba(0,0,0,.25)}
  .side-scrim{position:fixed; inset:0; z-index:89; background:rgba(37,37,35,.4)}
  .side-scrim[hidden]{display:none}
}
@media (min-width:1281px){.side-scrim{display:none!important}}
@media (prefers-reduced-motion:reduce){.side,.side.open{transition:none}}