/* layout.css — shell, topbar, nav, auth, responsive (targets existing partial classes) */

/* centered max-width container (used by topbar inner + page shell) */
.gs-content{max-width:var(--content-max);margin:0 auto;width:100%}

/* topbar */
.gs-topbar{background:#fff;border-bottom:1px solid var(--line);height:var(--topbar);position:sticky;top:0;z-index:1030}
.gs-topbar .gs-content{display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 clamp(14px,3vw,26px)}
.gs-logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;letter-spacing:-.01em;color:var(--ink)}
.gs-ghost{width:24px;height:24px}
.gs-word{font-weight:300;color:var(--muted)}
.gs-word strong{font-weight:800;color:var(--ink)}
.gs-nav{display:flex;gap:24px;align-items:center}
.gs-nav .nav-link{color:var(--muted);font-weight:600;height:var(--topbar);display:flex;align-items:center;gap:7px;
  border-bottom:2px solid transparent;border-radius:0;padding:0}
.gs-nav .nav-link .bi{font-size:15px}
.gs-nav .nav-link.active{color:var(--accent);border-bottom-color:var(--accent)}
.gs-nav .nav-link:hover{color:var(--ink)}
.gs-account{display:flex;align-items:center;gap:14px}
.gs-bell{position:relative;color:var(--muted)}
.gs-bell:hover{color:var(--ink-2)}
.gs-bell .badge{position:absolute;top:-4px;right:-6px;font-size:9px}
.gs-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#0f7a45);display:inline-block}

/* page shell: optional sidebar + main */
.gs-content.gs-shell{display:flex;gap:0;padding:22px clamp(14px,3vw,26px) 80px}
.gs-main{flex:1;min-width:0}
.gs-sidebar{width:var(--sidebar);flex:none}
.gs-sidebar:empty{display:none}
.gs-main h1{font-size:clamp(21px,3vw,26px);font-weight:800;letter-spacing:-.02em;margin:2px 0 0}

/* auth pages */
/* ---- auth screen -------------------------------------------------------------
   Split: form left on white, story right on near-black. The two halves are a grid rather than floats so
   both are full height with no gap seam, and the art column is the one that disappears on small screens —
   the form must never be the thing you scroll to find. */
.gs-auth{min-height:100vh;display:grid;place-items:center;background:var(--bg);padding:24px}
.gs-auth-body{margin:0}
.gs-auth.gs-auth-split{grid-template-columns:1fr 1fr;place-items:stretch;padding:0;background:#fff}
.gs-auth-main{display:grid;place-items:center;padding:32px 24px;background:#fff;min-width:0}
.gs-auth.gs-auth-split .gs-auth-card{border:0;box-shadow:none;background:transparent;padding:0;max-width:400px}

.gs-auth-art{position:relative;overflow:hidden;background:#0B0F14;color:#E8EDF3;
  display:grid;place-items:center;padding:40px 44px;min-width:0}
/* A soft green wash so the panel is not a flat black rectangle. */
.gs-auth-art:before{content:'';position:absolute;inset:0;
  background:radial-gradient(120% 90% at 78% 8%,rgba(31,164,99,.20),transparent 60%),
             radial-gradient(90% 70% at 10% 100%,rgba(42,111,232,.14),transparent 62%)}
.gs-auth-art-inner{position:relative;width:100%;max-width:520px}
.gs-emo{width:100%;height:auto;display:block;margin-bottom:26px}

.gs-auth-kicker{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#3AE38B;margin:0 0 10px}
.gs-auth-h{font-size:27px;line-height:1.2;font-weight:300;letter-spacing:-.02em;margin:0 0 12px;color:#fff}
.gs-auth-h b,.gs-auth-h strong{font-weight:800;color:#3AE38B}
.gs-auth-p{font-size:14px;line-height:1.65;color:#A7B2BF;margin:0 0 20px;max-width:44ch}
.gs-auth-legend{list-style:none;display:flex;gap:18px;flex-wrap:wrap;padding:0;margin:0;
  font-size:12.5px;color:#8C97A5}
.gs-auth-legend .dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:7px}
.gs-auth-legend .dot.i{background:#3AE38B}
.gs-auth-legend .dot.a{background:#7FB2FF}
.gs-auth-legend .dot.f{background:#F0A44A}

/* Waves draw themselves in, then hold. A loop here would compete with the form for attention. */
.gs-w{stroke-dasharray:900;stroke-dashoffset:900;animation:gsDraw 1.9s cubic-bezier(.22,.7,.25,1) forwards}
.gs-w2{animation-delay:.16s}
.gs-w3{animation-delay:.30s}
@keyframes gsDraw{to{stroke-dashoffset:0}}
.gs-node{opacity:0;animation:gsPop .5s ease-out forwards}
.gs-n1{animation-delay:1.5s}
.gs-n2{animation-delay:1.7s}
.gs-n3{animation-delay:1.9s}
@keyframes gsPop{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.35)}100%{opacity:1;transform:scale(1)}}
.gs-dot,.gs-halo{opacity:0;animation:gsFade .8s ease-out 1.2s forwards}
@keyframes gsFade{to{opacity:1}}

/* Below 900px the art has no room to read, so it goes rather than shrinking into a smear. Zero
   horizontal scroll either way. */
@media(max-width:900px){
  .gs-auth.gs-auth-split{grid-template-columns:1fr}
  .gs-auth-art{display:none}
  .gs-auth-main{padding:28px 20px}
  .gs-auth.gs-auth-split .gs-auth-card{max-width:420px}
}
/* Stilled entirely when the reader asked for less motion: the drawing is the point, not the animating. */
@media(prefers-reduced-motion:reduce){
  .gs-w{animation:none;stroke-dashoffset:0}
  .gs-node,.gs-dot,.gs-halo{animation:none;opacity:1}
  .gs-dot animateMotion,.gs-halo animateMotion{display:none}
}
.gs-auth-card{width:100%;max-width:420px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-1);padding:24px}
.gs-bg{background:var(--bg)}

/* chart + table areas */
.gs-chart{min-height:220px}
.gs-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* mobile: burger in, desktop nav out, zero h-scroll */
.gs-hamburger{display:none}
.gs-off{display:none!important}
@media(max-width:991.98px){
  .gs-nav-desktop{display:none!important}
  .gs-hamburger{display:inline-flex!important}
}

/* ===== top navigation — verbatim from ghoststat-v8.html (scoped to .topbar) ===== */
.topbar{display:flex;align-items:center;gap:22px;background:#fff;border-bottom:1px solid var(--line);padding:0 clamp(14px,3vw,26px);height:58px;position:sticky;top:0;z-index:40}
.topbar .brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.topbar .brand svg{width:24px;height:24px;color:var(--accent)}
.topbar .brand i{font-weight:300;font-style:normal;color:var(--muted)}
.topbar .nav{display:flex;gap:24px;margin:0 auto;flex-wrap:nowrap;padding:0;list-style:none}
.topbar .nav a{color:var(--muted);font-weight:600;height:58px;display:flex;align-items:center;gap:8px;border-bottom:2px solid transparent;cursor:pointer;transition:color .15s;text-decoration:none}
.topbar .nav a svg{width:16px;height:16px}
.topbar .nav a.active{color:var(--accent);border-bottom-color:var(--accent)}
.topbar .nav a:hover{color:var(--ink)}
.topbar .top-right{display:flex;align-items:center;gap:16px}
.topbar .switch{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border:1px solid var(--line-2);border-radius:4px;background:#fff;font-weight:600;color:var(--ink-2);font-size:13px;cursor:pointer}
.topbar .switch:hover{border-color:var(--muted-2)}
.topbar .switch .d{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.topbar .bell{position:relative;color:var(--muted);background:none;border:0;padding:0;cursor:pointer;line-height:0}
.topbar .bell:hover{color:var(--ink-2)}
.topbar .bell .dot{position:absolute;top:-6px;right:-6px;width:15px;height:15px;border-radius:50%;background:var(--coral);color:#fff;font-size:9px;display:grid;place-items:center;font-weight:700;border:1.5px solid #fff}
.topbar .acct{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#0f7a45);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px;border:0;cursor:pointer}
.topbar .burger{display:none;color:var(--ink-2);background:none;border:0;cursor:pointer;line-height:0}
@media(max-width:900px){.topbar .nav{display:none}.topbar .burger{display:block}.topbar .switch span.nm{display:none}}