/* ============================================================
 * Grizat App Shell
 * grizat.com = public website chrome
 * app.grizat.com = private product chrome
 * ============================================================ */

.grizat-mobile-nav { display:none; }
.grizat-desktop-app-header { display:none; }

/* Astra/public chrome must never render inside the private app shell. */
body.grizat-app-shell #masthead,
body.grizat-app-shell .site-header,
body.grizat-app-shell .ast-primary-header-bar,
body.grizat-app-shell .main-header-bar,
body.grizat-app-shell #colophon,
body.grizat-app-shell .site-footer,
body.grizat-app-shell footer.site-footer {
  display:none !important;
}

@media (min-width:922px) {
  .grizat-desktop-app-header {
    position:sticky;
    top:0;
    z-index:99980;
    min-height:58px;
    display:flex;
    align-items:center;
    gap:var(--grizat-space-6);
    padding:0 clamp(20px,3vw,48px);
    background:rgba(8,17,26,.98);
    border-bottom:1px solid rgba(255,255,255,.09);
    box-shadow:0 4px 18px rgba(0,0,0,.12);
    backdrop-filter:blur(14px);
  }

  .grizat-desktop-app-brand {
    flex:0 0 auto;
    color:var(--grizat-text) !important;
    text-decoration:none !important;
    font-size:var(--grizat-text-lg);
    font-weight:800;
    letter-spacing:-.02em;
  }

  .grizat-desktop-app-nav {
    min-width:0;
    flex:1;
    display:flex;
    align-items:center;
    gap:var(--grizat-space-1);
  }

  .grizat-desktop-app-nav-item {
    position:relative;
    display:flex;
    align-items:center;
    gap:var(--grizat-space-2);
    min-height:58px;
    padding:0 14px;
    color:var(--grizat-text-secondary) !important;
    text-decoration:none !important;
    font-size:var(--grizat-text-sm);
    font-weight:700;
    white-space:nowrap;
  }

  .grizat-desktop-app-nav-item:hover,
  .grizat-desktop-app-nav-item:focus-visible,
  .grizat-desktop-app-nav-item.is-active {
    color:var(--grizat-text) !important;
  }

  .grizat-desktop-app-nav-item.is-active::after {
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:0;
    height:3px;
    border-radius:3px 3px 0 0;
    background:var(--grizat-accent);
  }

  .grizat-desktop-app-nav-item:focus-visible {
    outline:2px solid var(--grizat-accent);
    outline-offset:-4px;
    border-radius:var(--grizat-radius-md);
  }

  .grizat-desktop-app-profile { margin-left:auto; }

  .grizat-desktop-app-avatar {
    width:30px !important;
    height:30px !important;
    margin:0 !important;
    border:1px solid rgba(255,255,255,.22);
    border-radius:50%;
    object-fit:cover;
    background:var(--grizat-surface);
  }

  .grizat-desktop-app-profile.is-active .grizat-desktop-app-avatar {
    border-color:var(--grizat-accent);
  }

  .grizat-desktop-app-profile-icon {
    width:26px;
    height:26px;
    display:grid;
    place-items:center;
  }

  .grizat-desktop-app-profile-icon svg {
    width:24px;
    height:24px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
}

@media (max-width:921px) {
  body.grizat-app-shell {
    padding-bottom:calc(70px + env(safe-area-inset-bottom));
  }

  .grizat-desktop-app-header { display:none !important; }

  .grizat-mobile-nav {
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:99990;
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    min-height:64px;
    padding:5px max(7px,env(safe-area-inset-right))
      calc(5px + env(safe-area-inset-bottom))
      max(7px,env(safe-area-inset-left));
    background:rgba(8,17,26,.97);
    border-top:1px solid rgba(255,255,255,.1);
    box-shadow:0 -8px 24px rgba(0,0,0,.18);
    backdrop-filter:blur(14px);
  }

  .grizat-mobile-nav-item {
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:5px 2px;
    color:#8f9aa8 !important;
    text-decoration:none !important;
    font-size:var(--grizat-text-xs);
    font-weight:650;
    line-height:1.1;
  }

  .grizat-mobile-nav-item svg {
    width:24px;
    height:24px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .grizat-mobile-nav-avatar {
    position:relative;
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    flex:0 0 28px;
  }

  .grizat-mobile-nav-avatar-img {
    position:relative;
    z-index:2;
    width:28px !important;
    height:28px !important;
    margin:0 !important;
    border:1px solid rgba(255,255,255,.22);
    border-radius:50%;
    object-fit:cover;
    background:var(--grizat-surface);
  }

  .grizat-mobile-nav-avatar-fallback {
    position:absolute;
    inset:1px;
    z-index:1;
    display:grid;
    place-items:center;
  }

  .grizat-mobile-nav-avatar-fallback svg { width:24px; height:24px; }
  .grizat-mobile-nav-item.is-active .grizat-mobile-nav-avatar-img { border-color:var(--grizat-accent); }
  .grizat-mobile-nav-item.is-active { color:var(--grizat-accent) !important; }

  .grizat-mobile-nav-item:focus-visible {
    outline:2px solid var(--grizat-accent);
    outline-offset:-2px;
    border-radius:var(--grizat-radius-md);
  }
}

/* C48: legible navigation labels while preserving the five destinations. */
.grizat-desktop-app-nav-item{font-size:15px}
@media(max-width:921px){.grizat-mobile-nav-item{font-size:12px;min-height:48px;color:#b8c7d8!important}}
/* C53: guests own an app header rather than falling through to Astra. */
.grizat-guest-app-header {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px;padding:10px clamp(16px,3vw,40px);background:#08111a;border-bottom:1px solid #ffffff18;color:#edf1f6}
.grizat-guest-brand {display:flex;align-items:center;gap:9px;color:#edf1f6!important;text-decoration:none;font-size:19px;font-weight:700}
.grizat-guest-brand img {width:28px;height:28px;object-fit:contain}
.grizat-guest-app-header nav {display:flex;align-items:center;gap:8px}
.grizat-guest-app-header nav a {display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;color:#c3cdda!important;text-decoration:none;font-size:14px;border-radius:8px}
.grizat-guest-app-header nav a:last-child {border:1px solid #465267;color:#edf1f6!important}
body.grizat-app-shell:not(.logged-in) {padding-bottom:0}