/* ===== SPO App Shell Upgrade - mobile app feel, safe edges, PWA polish ===== */
:root{
  --spo-safe-top:env(safe-area-inset-top,0px);
  --spo-safe-right:env(safe-area-inset-right,0px);
  --spo-safe-bottom:env(safe-area-inset-bottom,0px);
  --spo-safe-left:env(safe-area-inset-left,0px);
  --spo-app-shadow:0 14px 34px rgba(0,109,159,.10);
  --spo-soft-shadow:0 8px 24px rgba(0,109,159,.08);
  --spo-glass:rgba(255,255,255,.86);
}
html{-webkit-text-size-adjust:100%;}
body{overscroll-behavior-y:none;}
a,button,.btn,.pill,.card,.board-card,.dash-item{-webkit-tap-highlight-color:transparent;}
.btn,.pill,.board-card,.dash-item,.card,button{touch-action:manipulation;}
@media (hover:hover){
  .spo-bottom-nav a:hover{transform:translateY(-2px);}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important;}
}

.spo-bottom-nav{display:none;}

@media(max-width:768px){
  body{
    background:
      radial-gradient(circle at top left, rgba(57,182,255,.16), transparent 34%),
      linear-gradient(to bottom,#fff,#f5fbff 54%,#eef8ff);
    padding-bottom:calc(96px + var(--spo-safe-bottom));
  }
  .container{
    padding-left:max(18px, calc(14px + var(--spo-safe-left)))!important;
    padding-right:max(18px, calc(14px + var(--spo-safe-right)))!important;
  }
  .nav{
    padding-top:var(--spo-safe-top);
    border-bottom:0!important;
    background:rgba(255,255,255,.82)!important;
    box-shadow:0 8px 26px rgba(0,109,159,.08);
  }
  .nav-inner{
    min-height:58px!important;
    padding:8px 0!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:10px!important;
  }
  .nav-links{display:none!important;}
  .nav-actions{gap:8px!important;}
  .brand-img{max-width:190px;height:auto!important;max-height:48px;object-fit:contain;}
  .brand-text{font-size:20px;}
  .section{padding:38px 0!important;}
  .hero{padding-top:42px!important;}
  .hero-title,h1{letter-spacing:-.9px;}
  .hero-actions{gap:9px!important;}
  .hero .btn,.btn{border-radius:16px!important;min-height:44px;}
  .card,.plan,.hero-dashboard,.board-card{
    border-radius:24px!important;
    box-shadow:var(--spo-soft-shadow)!important;
    border-color:rgba(57,182,255,.33)!important;
  }
  .hero-dashboard{padding:16px!important;}
  .dash-item{border-radius:18px!important;}
  .pill{border-radius:999px!important;min-height:40px;}
  .resource{gap:10px!important;}
  .btn:active,.pill:active,.board-card:active,.dash-item:active,button:active{
    transform:scale(.975)!important;
  }
  input,textarea,select{
    font-size:16px!important;
    border-radius:16px!important;
  }
  footer{padding-bottom:calc(100px + var(--spo-safe-bottom))!important;}

  .spo-bottom-nav{
    position:fixed;
    z-index:9998;
    left:max(10px, var(--spo-safe-left));
    right:max(10px, var(--spo-safe-right));
    bottom:max(10px, var(--spo-safe-bottom));
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:4px;
    min-height:66px;
    padding:7px;
    border:1px solid rgba(57,182,255,.32);
    border-radius:26px;
    background:var(--spo-glass);
    box-shadow:0 18px 48px rgba(0,109,159,.22);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
  .spo-bottom-nav a{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    min-width:0;
    border-radius:19px;
    color:#13202a;
    font-size:11px;
    font-weight:850;
    letter-spacing:-.1px;
    transition:transform .16s ease, background .16s ease, box-shadow .16s ease;
  }
  .spo-bottom-nav .spo-nav-emoji{
    font-size:19px;
    line-height:1;
  }
  .spo-bottom-nav a.is-active{
    background:linear-gradient(180deg,#e6f7ff,#ffffff);
    box-shadow:inset 0 0 0 1px rgba(57,182,255,.55), 0 8px 18px rgba(0,109,159,.10);
  }
  .spo-bottom-nav a:active{transform:scale(.94);}
  .spo-mobile-install-hint{
    display:none;
  }
}

@media(min-width:769px){
  .spo-mobile-only{display:none!important;}
}

/* ===== SPO compact mobile header fix - prevents top-bar crowding on board/resource pages ===== */
.spo-screen-title-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.spo-title-stack{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.spo-screen-title{
  font-weight:950;
  letter-spacing:-.2px;
  min-width:0;
}
.spo-header-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
@media(max-width:768px){
  .spo-subpage-nav .nav-inner{
    min-height:58px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    flex-wrap:nowrap!important;
    gap:10px!important;
  }
  .spo-screen-title-row{
    flex:1 1 auto;
    min-width:0;
    gap:9px;
  }
  .spo-title-stack{
    flex:1 1 auto;
    min-width:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:7px;
  }
  .spo-screen-title{
    font-size:clamp(15px,4.2vw,18px)!important;
    line-height:1.05!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    max-width:100%!important;
  }
  .spo-home-chip{
    flex:0 0 auto;
    padding:8px 10px!important;
    min-height:38px!important;
    font-size:13px!important;
    border-radius:14px!important;
  }
  .spo-tier-chip{
    flex:0 0 auto;
    white-space:nowrap!important;
    min-height:0!important;
    padding:4px 7px!important;
    font-size:10.5px!important;
    line-height:1!important;
    border-radius:999px!important;
    max-width:none!important;
  }
  .spo-header-actions{
    display:none!important;
  }
}