/* The bar's own height. Deliberately not `--topbar`: several apps declare
   that on :root for their own headers, and this component was picking the
   value up from whichever app it happened to be mounted in - so the same bar
   was 62px, 56px or 88px depending on the page you were on. Nothing but this
   file sets --gn-h. */
:root {
  --gn-h: 62px;
  --gn-ink: #0b0b0c;
  --gn-surface: #111114;
  --gn-surface-2: #16161a;
  --gn-surface-3: #202026;
  --gn-line: #26262b;
  --gn-line-soft: #1c1c21;
  --gn-text: #e8e6e1;
  --gn-text-2: #a5a29b;
  --gn-text-3: #77747b;
  --gn-brass: #F5A623;
  --gn-brass-dim: rgba(245,166,35,.15);
  --gn-bad: #d96b64;
  --gn-sans: 'Inter', system-ui, sans-serif;
  --gn-display: 'Bebas Neue', sans-serif;
  --gn-ease: cubic-bezier(.2,.7,.3,1);
  --gn-gutter: 22px;
}
@media (max-width: 800px) { :root { --gn-h: 56px; } }

/* Global navigation bar.
 *
 * Loaded by the dashboard, the wardrobe and the offers app. It deliberately
 * declares no colors of its own beyond fallbacks: every value reads a token
 * the host app already defines, so the bar inherits whatever palette it lands
 * in rather than three near-misses drifting apart.
 *
 * Mobile first. The bar is the one element guaranteed to be on every page, so
 * if it is not usable on a phone nothing else is.
 */

.gn {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--gn-h);
  background: color-mix(in srgb, var(--gn-ink) 94%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gn-line);
  font-family: var(--gn-sans);
}

.gn-skip { position: absolute; left: -9999px; }
.gn-skip:focus {
  left: 12px; top: 12px; z-index: 5;
  background: var(--gn-surface-3); color: var(--gn-text); padding: 10px 14px;
}

.gn-inner {
  height: 100%; display: flex; align-items: center; gap: 14px;
  padding: 0 var(--gn-gutter); max-width: 1600px; margin: 0 auto;
}

.gn-mark { flex: 0 0 auto; display: flex; align-items: center; text-decoration: none; }
.gn-glyph {
  font-family: var(--gn-display);
  font-size: 17px; letter-spacing: .06em; line-height: 1;
  color: var(--gn-brass); border: 1px solid var(--gn-brass-dim);
  padding: 6px 7px 3px;
}

/* ------------------------------------------------------------------- links */
.gn-links { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; }
.gn-links a {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gn-text-3); text-decoration: none;
  padding: 9px 12px; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s;
}
.gn-links a:hover { color: var(--gn-text-2); }
.gn-links a[aria-current="page"] { color: var(--gn-brass); border-bottom-color: var(--gn-brass); }

/* ------------------------------------------------------------------ avatar */
.gn-right { flex: 0 0 auto; position: relative; margin-left: auto; display: flex; align-items: center; gap: 9px; }

/* Per-app controls - the dashboard's command palette and focus mode - sit
   beside the avatar rather than in a header of their own. */
.gn-action {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gn-text-2); background: none;
  border: 1px solid var(--gn-line); padding: 8px 12px;
  transition: border-color .15s, color .15s;
}
.gn-action:hover { border-color: var(--gn-text-3); color: var(--gn-text); }
.gn-action kbd {
  font: inherit; font-size: 9px; color: var(--gn-text-3);
  border: 1px solid var(--gn-line); padding: 1px 4px;
}
@media (max-width: 1100px) { .gn-action span { display: none; } .gn-action kbd { display: none; } }
.gn-avatar {
  width: 32px; height: 32px; padding: 0; cursor: pointer;
  border: 1px solid var(--gn-line); background: var(--gn-surface-2);
  color: var(--gn-text-2); font: 600 11px/1 var(--gn-sans); letter-spacing: .04em;
  display: grid; place-items: center; overflow: hidden; border-radius: 50%;
  transition: border-color .15s;
}
.gn-avatar:hover { border-color: var(--gn-brass-dim); color: var(--gn-text); }
.gn-avatar img { width: 100%; height: 100%; object-fit: cover; }

.gn-menu {
  position: absolute; top: calc(100% + 9px); right: 0; min-width: 232px;
  background: var(--gn-surface); border: 1px solid var(--gn-line);
  display: grid; padding: 5px; z-index: 2;
}
/* An author `display` beats the browser's own [hidden] rule, so without this
   the menu is declared hidden and shows anyway - permanently open over the
   page. Same for the mobile scrim. */
.gn-menu[hidden], .gn-scrim[hidden] { display: none; }
.gn-menu a {
  display: block; padding: 10px 12px; text-decoration: none;
  font-size: 13px; color: var(--gn-text-2);
}
.gn-menu a:hover { background: var(--gn-surface-2); color: var(--gn-text); }
.gn-menu .gn-out { color: var(--gn-bad); border-top: 1px solid var(--gn-line-soft); margin-top: 4px; }

.gn-who { padding: 11px 12px 12px; border-bottom: 1px solid var(--gn-line-soft); display: grid; gap: 2px; margin-bottom: 4px; }
.gn-who strong { font-size: 13px; font-weight: 500; color: var(--gn-text); }
.gn-who span { font-size: 11px; color: var(--gn-text-3); overflow-wrap: anywhere; }
.gn-who em {
  justify-self: start; margin-top: 5px; font-style: normal;
  font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gn-brass); border: 1px solid var(--gn-brass-dim); padding: 2px 6px;
}

/* ------------------------------------------------------------------ burger */
.gn-burger { display: none; width: 34px; height: 34px; padding: 8px; cursor: pointer;
  background: none; border: 1px solid var(--gn-line); }
.gn-burger span { display: block; height: 1px; background: var(--gn-text-2); margin: 3px 0; transition: transform .18s, opacity .18s; }
.gn-open .gn-burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.gn-open .gn-burger span:nth-child(2) { opacity: 0; }
.gn-open .gn-burger span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

.gn-scrim { position: fixed; inset: var(--gn-h) 0 0; background: rgba(0,0,0,.55); z-index: -1; }

/* -------------------------------------------------------------- narrow view */
/* THE navigation breakpoint. Below it every app takes the same shape: a
   drawer instead of the app row, a strip instead of a rail. 1100 because the
   bar needs ~1079px to fit nine apps on one row - under that the links
   overflowed their container and the last app sat on the avatar. The rails in
   the app stylesheets are held to this same number. */
@media (max-width: 1100px) {
  .gn-burger { display: block; }
  .gn-links {
    position: fixed; top: var(--gn-h); left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--gn-surface); border-bottom: 1px solid var(--gn-line);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform .18s var(--gn-ease), opacity .18s;
    /* Six apps with their sections expanded is taller than a phone. Without
       this the overflow is simply unreachable - the drawer is fixed, so the
       page behind it scrolls instead of the menu. */
    max-height: calc(100dvh - var(--gn-h));
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .gn-open .gn-links { transform: none; opacity: 1; pointer-events: auto; }
  /* Block, and explicitly so.
     On the wide bar these are flex items, which blockifies them. In the drawer
     each one sits inside a `.gn-app` span instead, so it fell back to `inline`
     - and vertical padding on an inline box paints without taking any layout
     space. Every row was 46px of tap target crammed into 22px of height,
     overlapping its neighbours: the links looked squashed together and a tap
     near an edge hit the wrong one. */
  .gn-links a {
    display: flex; align-items: center; min-height: 48px;
    padding: 12px var(--gn-gutter); font-size: 13px;
    border-bottom: 1px solid var(--gn-line-soft);
  }
  .gn-links a[aria-current="page"] {
    border-bottom-color: var(--gn-line-soft);
    box-shadow: inset 2px 0 0 var(--gn-brass);
  }
  .gn-menu { position: fixed; top: calc(var(--gn-h) + 6px); right: 8px; left: 8px; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) { .gn * { transition: none !important; } }

/* ------------------------------------------------------ section dropdowns */
/* An app with sections shows them under its own name rather than in a second
   bar, so the global nav stays one row however many an app has. */
.gn-app { position: relative; display: flex; align-items: center; }
.gn-app.has-sub > a { padding-right: 4px; }
.gn-caret {
  background: none; border: 0; cursor: pointer; padding: 8px 8px 8px 2px;
  color: var(--gn-text-3); font-size: 13px; line-height: 1;
}
.gn-caret:hover, .gn-caret[aria-expanded="true"] { color: var(--gn-brass); }
.gn-app.has-sub:hover .gn-caret { color: var(--gn-brass); }

/* Opens on hover for a mouse, and stays a click for everything else.
   Scoped to a fine pointer because a touch device reports a sticky hover on
   first tap - the menu would open, then the same tap would fall through to
   whatever is underneath it. */
@media (hover: hover) and (pointer: fine) {
  .gn-app.has-sub:hover .gn-sub[hidden] { display: grid; }
  /* The menu sits 6px below the bar, and crossing that gap with the pointer
     would drop the hover and close it mid-reach. This bridges the gap without
     drawing anything. */
  .gn-app.has-sub::after {
    content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 8px;
  }
}

.gn-sub {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 184px; z-index: 3;
  background: var(--gn-surface); border: 1px solid var(--gn-line);
  padding: 5px; display: grid;
}
.gn-sub[hidden] { display: none; }
.gn-sub a {
  display: block; padding: 9px 12px; text-decoration: none;
  font-size: 12px; letter-spacing: .04em; text-transform: none;
  color: var(--gn-text-2); border-bottom: 0;
}
.gn-sub a:hover { background: var(--gn-surface-2); color: var(--gn-text); }
.gn-sub a.on { color: var(--gn-brass); }

@media (max-width: 800px) {
  .gn-app { display: block; position: relative; }
  /* Room for the caret, so a long app name never slides under it. */
  .gn-app.has-sub > a { padding-right: 60px; }
  /* Full-height and wider than it looks: the caret opens a submenu and used to
     be a 36px square floating near the top of a 48px row, which on a phone is
     a coin toss between it and the link beside it. */
  .gn-caret {
    position: absolute; top: 0; right: 0; height: 48px; width: 56px;
    display: flex; align-items: center; justify-content: center;
    padding: 0; font-size: 15px;
  }
  /* A hairline between the link and the control that sits on top of it, so it
     reads as two targets rather than one wide row. */
  .gn-app.has-sub .gn-caret::before {
    content: ""; position: absolute; left: 0; top: 12px; bottom: 12px;
    width: 1px; background: var(--gn-line-soft);
  }
  /* Inline rather than floating: a dropdown inside a drawer is a menu inside a
     menu, and on a phone there is room to just show them. */
  .gn-sub {
    position: static; min-width: 0; border: 0; border-bottom: 1px solid var(--gn-line-soft);
    background: var(--gn-surface-2); padding: 0;
  }
  /* Same treatment as the top-level rows - these are inline by default too. */
  .gn-sub a {
    display: flex; align-items: center; min-height: 44px;
    padding: 10px var(--gn-gutter) 10px calc(var(--gn-gutter) + 14px);
    font-size: 12.5px;
  }
  .gn-sub a + a { border-top: 1px solid var(--gn-line-soft); }
}