/* ==========================================================================
   Greenwald Engineering — brand system
   Dark theme. Brand green sampled from the logo: #44883F
   #44883F only scores 4.11:1 on the dark background, so it is used for
   fills and marks only. Text and links use --brand-lit (7.7:1).
   ========================================================================== */

:root{
  /* surfaces */
  --bg:        #0B0F14;
  --surface:   #131A22;
  --raised:    #1A2430;
  --line:      #223040;
  --line-soft: #1B2531;

  /* type */
  --ink:       #E9EDF2;
  --ink-mid:   #B9C6D4;
  --muted:     #93A2B3;

  /* brand */
  --brand:     #44883F;   /* logo green — fills, marks, never small text */
  --brand-lit: #6FB767;   /* text + links on dark  (7.68:1) */
  --brand-hi:  #8ACB83;   /* hover */
  --brand-dp:  #2F6A2B;   /* solid button bg, white text (6.5:1) */
  --brand-wash:rgba(68,136,63,.13);
  --brand-edge:rgba(111,183,103,.32);

  /* status */
  --warn:      #E0B341;
  --danger:    #E06C5F;

  --header-h:  64px;
  --radius:    10px;
  --radius-lg: 14px;
  --maxw:      1140px;

  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.28);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body.ge{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.6 var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.ge-wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px }

a{ color:var(--brand-lit) }
a:hover{ color:var(--brand-hi) }

:focus-visible{
  outline:2px solid var(--brand-lit);
  outline-offset:2px;
  border-radius:4px;
}

/* ---------------------------------------------------------------- header */

/* `header.ge-header` (0,1,1) beats any page-level bare `header{}` rule (0,0,1).
   App pages style their own <header> — the injected one must not inherit it. */
header.ge-header{
  position:sticky; top:0; z-index:1000;
  display:block; padding:0; margin:0; gap:0;
  align-items:normal; justify-content:normal; flex-wrap:nowrap;
  font:400 16px/1.6 var(--font);
  background:rgba(19,26,34,.86);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
}
/* green hairline that reads as brand without shouting */
.ge-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--brand-edge) 22%, var(--brand-edge) 78%, transparent);
  pointer-events:none;
}

.ge-header__bar{
  max-width:var(--maxw); margin:0 auto; padding:0 24px;
  height:var(--header-h);
  display:flex; align-items:center; gap:28px;
}

.ge-brand{ display:flex; align-items:center; flex:none; text-decoration:none }
.ge-brand img{ display:block; height:34px; width:auto }
.ge-brand .ge-brand__mark{ display:none }
.ge-brand:hover{ opacity:.88 }

.ge-nav{ display:flex; align-items:center; gap:4px; margin-left:auto }

.ge-nav a,
.ge-nav__trigger{
  position:relative;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:8px;
  font-size:14.5px; font-weight:500; letter-spacing:.005em;
  color:var(--ink-mid); text-decoration:none;
  background:none; border:0; cursor:pointer; font-family:inherit;
  white-space:nowrap;
}
.ge-nav a:hover,
.ge-nav__trigger:hover{ color:var(--ink); background:rgba(255,255,255,.045) }

.ge-nav a[aria-current="page"]{ color:var(--brand-lit) }
.ge-nav a[aria-current="page"]::after{
  content:""; position:absolute; left:12px; right:12px; bottom:2px; height:2px;
  border-radius:2px; background:var(--brand-lit);
}

/* apps dropdown — hidden until /.auth/me confirms a signed-in user.
   [hidden] needs an explicit rule here because .ge-menu sets display. */
.ge-menu{ position:relative }
.ge-menu[hidden]{ display:none }

/* data-ge-nav="minimal": the bar carries nothing for an anonymous visitor,
   so hide it outright rather than render an empty strip */
header.ge-header[hidden]{ display:none }

.ge-menu__caret{ width:9px; height:9px; opacity:.65; transition:transform .15s ease }
.ge-menu[data-open="true"] .ge-menu__caret{ transform:rotate(180deg) }
.ge-menu[data-open="true"] .ge-nav__trigger{ color:var(--ink); background:rgba(255,255,255,.06) }

.ge-menu__panel{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:246px; padding:6px;
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow);
  display:none;
}
.ge-menu[data-open="true"] .ge-menu__panel{ display:block }

.ge-menu__item{
  display:block; padding:9px 12px; border-radius:8px;
  color:var(--ink); text-decoration:none;
}
.ge-menu__item:hover{ background:var(--brand-wash); color:var(--ink) }
.ge-menu__item span{ display:block; font-size:14.5px; font-weight:550 }
.ge-menu__item small{ display:block; color:var(--muted); font-size:12.5px; font-weight:400; margin-top:1px }
.ge-menu__sep{ height:1px; background:var(--line); margin:6px 4px }

/* signed in, no role — distinguishes "no access" from "nothing here".
   `.ge-nav a.ge-nav__note` (0,2,1) — a bare .ge-nav__note (0,1,0) loses to
   the generic `.ge-nav a` rule above (0,1,1) and renders as plain text. */
.ge-nav a.ge-nav__note{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:8px;
  font-size:14px; font-weight:500; text-decoration:none;
  color:#E5C061; background:rgba(224,179,65,.12);
  border:1px solid rgba(224,179,65,.28); white-space:nowrap;
}
.ge-nav a.ge-nav__note:hover{ color:#E5C061; background:rgba(224,179,65,.18) }

/* Apps sit inline in the bar, not in a dropdown (Jake, 18 Aug). They inherit
   the .ge-nav a treatment; this only separates them from the public links so
   the bar reads as "site | your apps | you". */
.ge-nav a.ge-app{ color:var(--ink) }
.ge-nav a.ge-app:first-of-type{ margin-left:6px; padding-left:14px; border-left:1px solid var(--line) }
.ge-nav a.ge-app--muted{ color:var(--ink-mid) }

/* Sign in. The only thing an anonymous visitor sees in the bar, so it is the
   one element allowed to look like a button. */
.ge-nav a.ge-signin{
  color:var(--brand-lit);
  border:1px solid rgba(111,183,103,.45);
  background:rgba(111,183,103,.10);
  font-weight:600;
  margin-left:8px;
}
.ge-nav a.ge-signin:hover{ background:rgba(111,183,103,.20); color:var(--ink) }

/* auth chip */
.ge-auth{
  display:flex; align-items:center; gap:10px;
  padding-left:18px; margin-left:4px;
  border-left:1px solid var(--line);
  font-size:13px; color:var(--muted); white-space:nowrap;
}
.ge-auth__who{ max-width:190px; overflow:hidden; text-overflow:ellipsis }
.ge-auth a{ color:var(--brand-lit); text-decoration:none; font-weight:500 }
.ge-auth a:hover{ text-decoration:underline }

/* mobile toggle */
.ge-burger{
  display:none; margin-left:auto;
  width:40px; height:40px; padding:0;
  align-items:center; justify-content:center;
  background:none; border:1px solid var(--line); border-radius:9px;
  color:var(--ink); cursor:pointer;
}
.ge-burger:hover{ background:rgba(255,255,255,.05) }

@media (max-width: 860px){
  .ge-brand img{ height:30px }
  .ge-brand .ge-brand__full{ display:none }
  .ge-brand .ge-brand__mark{ display:block }

  .ge-burger{ display:inline-flex }

  .ge-nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:2px;
    margin:0; padding:10px 16px 16px;
    background:var(--surface); border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);
    display:none;
  }
  .ge-header[data-nav="open"] .ge-nav{ display:flex }
  .ge-nav a, .ge-nav__trigger{ padding:11px 12px; font-size:15.5px; width:100% }
  .ge-nav a[aria-current="page"]::after{ display:none }
  .ge-menu__panel{
    position:static; display:block; min-width:0;
    background:none; border:0; box-shadow:none; padding:4px 0 4px 10px;
    border-left:2px solid var(--line); margin:2px 0 6px 12px; border-radius:0;
  }
  .ge-menu__caret{ display:none }
  .ge-auth{
    border-left:0; border-top:1px solid var(--line);
    padding:12px 12px 0; margin:6px 0 0;
  }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
}

/* ------------------------------------------------------- shared elements */

.ge-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:9px;
  font-size:15px; font-weight:600; text-decoration:none; cursor:pointer;
  border:1px solid transparent; font-family:inherit;
  background:var(--brand-dp); color:#fff;
}
.ge-btn:hover{ background:var(--brand); color:#fff }
.ge-btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line) }
.ge-btn--ghost:hover{ background:rgba(255,255,255,.05); border-color:var(--brand-edge); color:var(--ink) }

.ge-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:22px;
}
.ge-eyebrow{
  font-size:12px; font-weight:650; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brand-lit); margin:0 0 22px;
}

.ge-footer{
  border-top:1px solid var(--line);
  padding:34px 0; margin-top:8px;
  color:var(--muted); font-size:14px;
}
.ge-footer .ge-wrap{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap }
.ge-footer a{ color:var(--muted); text-decoration:none }
.ge-footer a:hover{ color:var(--brand-lit) }