/* ───────────────────────────────────────────────────────────────────
   App Header — shared component (loaded on every page via _app_header.html)
   
   Depends on these CSS variables being defined in the page's own stylesheet:
     --bg, --bg-2, --surface, --rule, --ink, --ink-soft, --ink-mute,
     --accent, --accent-2, --accent-soft, --serif, --sans, --mono
   
   All page-level stylesheets already define these (they share the same
   GMS-branded design tokens), so this drop-in works everywhere.
   ─────────────────────────────────────────────────────────────────── */

.app-header{
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid var(--rule);
  padding:16px 32px 14px;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  background:var(--bg);
  transition:box-shadow .2s, background .2s;
}
.app-header.scrolled{
  background:rgba(250, 246, 239, 0.94);
  backdrop-filter:blur(10px);
  box-shadow:0 4px 16px -10px rgba(0,0,0,.08);
}

.app-header .brand{
  display:flex; align-items:center; gap:14px;
}
.app-header .brand-mark{
  width:40px; height:40px; border-radius:10px;
  background:var(--accent);
  display:grid; place-items:center;
  color:#fff; font-family:var(--serif); font-style:italic;
  font-size:22px; font-weight:600;
  box-shadow:0 4px 12px -3px rgba(193,74,60,.4);
  flex-shrink:0;
}
.app-header .brand-text h1{
  margin:0; font-family:var(--serif); font-weight:600; letter-spacing:-.015em;
  font-size:21px; line-height:1.05; color:var(--ink);
}
.app-header .brand-text h1 em{ color:var(--accent); font-style:italic; font-weight:500 }
.app-header .brand-text .sub{
  display:block; margin-top:4px;
  font-family:var(--mono); font-size:10.5px; color:var(--ink-mute);
  text-transform:uppercase; letter-spacing:.2em;
}

/* ──── Nav ──── */
.app-header .header-nav{
  display:flex; gap:4px; align-items:center;
}
.app-header .header-nav a{
  color:var(--ink-soft); text-decoration:none;
  padding:7px 14px; border-radius:6px;
  font-size:13px; font-weight:500;
  transition:background .12s, color .12s;
}
.app-header .header-nav a:hover{ background:var(--bg-2); color:var(--ink); }
.app-header .header-nav a.active{ background:var(--bg-2); color:var(--ink); font-weight:600; }

@media (max-width: 720px){
  .app-header{ padding:14px 18px 12px; }
  .app-header .header-nav{
    width:100%; order:3; justify-content:center;
    padding-top:8px; border-top:1px solid var(--rule); margin-top:6px;
    overflow-x:auto; flex-wrap:nowrap;
  }
  .app-header .header-nav a{ white-space:nowrap; }
  .app-header .brand-text h1{ font-size:17px; }
  .app-header .brand-text .sub{ font-size:9.5px; letter-spacing:.16em; }
}

/* ──── Right-side widgets (user pill, quota, etc.) ──── */
.app-header .header-right{
  display:flex; align-items:center; gap:12px;
}
.app-header .user-widget{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px;
  color:var(--ink-soft); letter-spacing:.06em;
}
.app-header .user-widget.loading{ color:var(--ink-mute); }
.app-header .spinner-small{
  display:inline-block; width:13px; height:13px;
  border:2px solid currentColor; border-right-color:transparent;
  border-radius:50%; animation:app-spin .8s linear infinite;
}
@keyframes app-spin{ to{ transform:rotate(360deg) } }

.app-header .user-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 5px 5px 12px;
  border-radius:999px; background:var(--surface);
  border:1px solid var(--rule);
  font-family:var(--sans); font-size:13px; color:var(--ink);
  font-weight:500; cursor:pointer;
  transition:border-color .12s, background .12s;
}
.app-header .user-pill:hover{ border-color:var(--ink-mute); }
.app-header .user-pill .avatar{
  width:26px; height:26px; border-radius:50%;
  background:var(--accent); color:#fff;
  display:grid; place-items:center;
  font-family:var(--mono); font-size:11px; font-weight:600;
  text-transform:uppercase;
}
.app-header .user-pill .name{
  max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.app-header .user-pill.pro{
  border-color:rgba(193,74,60,.4);
  background:linear-gradient(135deg, rgba(193,74,60,.06), var(--surface));
}
.app-header .user-pill .pro-badge{
  display:inline-grid; place-items:center;
  width:20px; height:20px; margin-right:5px;
  background:linear-gradient(135deg, #c14a3c, #d65848);
  color:#fff; border-radius:50%;
  font-size:11px; font-weight:700;
  line-height:1;
  box-shadow:0 2px 6px -2px rgba(193,74,60,.5);
}

.app-header .login-link{
  background:var(--accent); color:#fff;
  padding:8px 16px; border-radius:6px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:500;
  text-decoration:none;
  transition:background .2s, transform .12s;
}
.app-header .login-link:hover{ background:var(--accent-2); transform:translateY(-1px) }

/* ──── User dropdown menu ──── */
.app-header .user-pill-wrap{
  position:relative;
}
.app-header .user-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:200;
  background:var(--surface); border:1px solid var(--rule);
  border-radius:8px; padding:4px;
  box-shadow:0 12px 32px -12px rgba(0,0,0,.18);
  min-width:220px; display:none;
}
.app-header .user-menu.open{ display:block }
.app-header .user-menu .menu-label{
  padding:8px 12px 4px; font-family:var(--mono); font-size:10px;
  color:var(--ink-mute); text-transform:uppercase; letter-spacing:.1em;
}
.app-header .user-menu .menu-info{
  padding:0 12px 8px; color:var(--ink-soft); font-size:12px; line-height:1.4;
}
.app-header .user-menu .menu-sep{
  height:1px; background:var(--rule); margin:4px 0;
}
.app-header .user-menu a, .app-header .user-menu button{
  display:flex; align-items:center; gap:10px; width:100%;
  background:transparent; border:0; cursor:pointer;
  padding:9px 12px; border-radius:5px;
  font-family:var(--sans); font-size:13px; color:var(--ink); font-weight:400;
  text-align:left; text-decoration:none;
  transition:background .1s;
}
.app-header .user-menu a:hover, .app-header .user-menu button:hover{
  background:var(--bg-2);
}
.app-header .user-menu .menu-pro-tag{
  padding:8px 12px;
  background:linear-gradient(135deg, rgba(193,74,60,.08), rgba(193,74,60,.02));
  border-bottom:1px solid var(--rule);
  font-size:11px; color:var(--accent); font-family:var(--mono);
  letter-spacing:.1em; text-transform:uppercase; font-weight:600;
}
.app-header .user-menu .menu-logout{
  color:var(--accent-2) !important;
}