/* The one global bar (public/global-nav.js). Single source of truth for its
   look in both apps: command-center carries a byte-identical copy.

   Self-contained on purpose: every rule is under .gn- classes with its own
   colour tokens, and every box property a host stylesheet might touch is set
   here (the portal's .page button rules, Tailwind preflight, Tracking's bare
   nav/ul/a/button/h1/h2 rules). No page stylesheet may target .gn- classes;
   both repos have a test for that.

   Theme: html[data-theme=dark|light] wins; with no data-theme (the dashboard's
   Auto) the system setting decides.

   Height: one 52px row (+1px border, + the iPhone safe area), sticky at the
   top. Pages read the offset from --gn-offset; the dashboard also publishes it
   as --primary-nav-offset (its existing consumers). The values below are the
   one-row fallback; observeOffset() in global-nav.js sets the measured height,
   which differs only when large text puts the title on a second row.

   Text: sizes are in rem, so the bar follows the reader's text size, while tap
   targets stay 44px. Widths are container queries in em on the bar itself,
   so with large text the bar switches to its compact layout at a
   proportionally wider screen instead of overflowing (1em = 16px at 100%). */

html:has(.gn-bar) {
  --gn-offset: calc(53px + env(safe-area-inset-top, 0px));
  --primary-nav-offset: calc(53px + env(safe-area-inset-top, 0px));
}

.gn-bar {
  --gn-bg: rgb(255 255 255 / 0.94);
  --gn-paper: #ffffff;
  --gn-ink: #0f1f38;
  --gn-muted: #3f4d63;
  --gn-line: #d5dce7;
  --gn-control-line: #64748b; /* a control's edge: 3:1 or more on the bar */
  --gn-hover: #e8edf4;
  --gn-sel: #e9eef6;
  --gn-accent: #1a365d;
  --gn-accent-hover: #10243f;
  --gn-on-accent: #ffffff;
  --gn-mark: #c2410c;
  --gn-focus: #c2410c;
  --gn-shadow: 0 12px 32px rgb(15 31 56 / 0.18);
  --gn-current: #1a365d;
  --gn-brand-bg: transparent;
  --gn-brand-pad: 0 2px;
  color-scheme: light;

  position: sticky;
  top: 0;
  z-index: 60;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: env(safe-area-inset-top, 0px) 0 0;
  container: gnbar / inline-size;
  border: 0;
  border-bottom: 1px solid var(--gn-line);
  border-radius: 0;
  background: var(--gn-bg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: none;
  color: var(--gn-ink);
  font: 500 1rem/1.25 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: normal;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

/* Theme. The page's data-theme decides (the portal's switch, the dashboard's
   cc-theme); with none set, the system setting. The dashboard also sets
   data-gn-theme on the bar from its own choice, because Tracking pages run a
   separate switch that rewrites the page's data-theme: the bar then looks the
   same on every page. data-gn-theme always wins. */
html[data-theme="dark"] .gn-bar,
.gn-bar.gn-bar[data-gn-theme="dark"] {
  --gn-bg: rgb(13 26 47 / 0.94);
  --gn-paper: #0d1a2f;
  --gn-ink: #f3f6fb;
  --gn-muted: #b7c3d6;
  --gn-line: #263a58;
  --gn-control-line: #7189ab;
  --gn-hover: #182c4a;
  --gn-sel: #1c3253;
  --gn-accent: #f36c21;
  --gn-accent-hover: #ff8a4c;
  --gn-on-accent: #0b1220;
  --gn-mark: #ff9a5c;
  --gn-focus: #ff9a5c;
  --gn-shadow: 0 12px 32px rgb(0 0 0 / 0.5);
  --gn-current: #ff9a5c;
  --gn-brand-bg: #f5f7fa;
  --gn-brand-pad: 2px 8px 2px 4px;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .gn-bar {
    --gn-bg: rgb(13 26 47 / 0.94);
    --gn-paper: #0d1a2f;
    --gn-ink: #f3f6fb;
    --gn-muted: #b7c3d6;
    --gn-line: #263a58;
    --gn-control-line: #7189ab;
    --gn-hover: #182c4a;
    --gn-sel: #1c3253;
    --gn-accent: #f36c21;
    --gn-accent-hover: #ff8a4c;
    --gn-on-accent: #0b1220;
    --gn-mark: #ff9a5c;
    --gn-focus: #ff9a5c;
    --gn-shadow: 0 12px 32px rgb(0 0 0 / 0.5);
    --gn-current: #ff9a5c;
    --gn-brand-bg: #f5f7fa;
    --gn-brand-pad: 2px 8px 2px 4px;
    color-scheme: dark;
  }
}

.gn-bar.gn-bar[data-gn-theme="light"] {
  --gn-bg: rgb(255 255 255 / 0.94);
  --gn-paper: #ffffff;
  --gn-ink: #0f1f38;
  --gn-muted: #3f4d63;
  --gn-line: #d5dce7;
  --gn-control-line: #64748b; /* a control's edge: 3:1 or more on the bar */
  --gn-hover: #e8edf4;
  --gn-sel: #e9eef6;
  --gn-accent: #1a365d;
  --gn-accent-hover: #10243f;
  --gn-on-accent: #ffffff;
  --gn-mark: #c2410c;
  --gn-focus: #c2410c;
  --gn-shadow: 0 12px 32px rgb(15 31 56 / 0.18);
  --gn-current: #1a365d;
  --gn-brand-bg: transparent;
  --gn-brand-pad: 0 2px;
  color-scheme: light;
}

.gn-bar *,
.gn-bar *::before,
.gn-bar *::after {
  box-sizing: border-box;
}

/* The accent line along the bottom edge (the portal's brand stripe). */
.gn-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, #1a365d, #2c5282 22%, #f36c21 52%, #ffb070 70%, #f36c21 84%, #1a365d);
}

.gn-bar .gn-row{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  min-width: 0;
  margin: 0;
  padding: 4px max(12px, env(safe-area-inset-right, 0px)) 4px max(12px, env(safe-area-inset-left, 0px));
}

.gn-bar .gn-brand{
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: var(--gn-brand-pad);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  background: var(--gn-brand-bg);
}

.gn-bar .gn-brand-icon{
  display: block;
  flex: none;
  width: 32px;
  height: 32px;
  max-width: none;
  margin: 0;
  object-fit: contain;
}

.gn-bar .gn-brand-word{
  display: none;
  flex: none;
  width: auto;
  height: 30px;
  max-width: none;
  margin: 5px 0 0;
  object-fit: contain;
}

.gn-bar .gn-divider{
  display: none;
  flex: none;
  width: 1px;
  height: 24px;
  margin: 0 4px;
  background: var(--gn-line);
}

.gn-bar .gn-title{
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  color: var(--gn-ink);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  /* Allow enlarged titles to wrap and contain Firefox font metrics.
     The measured bar offset follows the title height. */
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-transform: none;
}

/* Inline links: hidden on phones; shown by rank as width allows. */
.gn-bar .gn-links{
  display: none;
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  min-width: 0;
  margin: 0 auto 0 4px;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
}

.gn-bar .gn-link,
.gn-bar .gn-item{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--gn-ink);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}

/* The inline destinations are pills: real links (href, new tab, Back and
   keyboard all work), drawn as rounded buttons; the current page is filled. */
.gn-bar .gn-link{
  padding: 0 14px;
  border: 1px solid var(--gn-control-line);
  border-radius: 999px;
  background: var(--gn-paper);
}

.gn-bar.gn-bar .gn-link:hover,
.gn-bar.gn-bar .gn-item:hover{
  background: var(--gn-hover);
  color: var(--gn-ink);
}

.gn-bar .gn-item[aria-current="page"]{
  background: var(--gn-sel);
  color: var(--gn-current);
}

.gn-bar.gn-bar .gn-link[aria-current="page"]{
  border-color: var(--gn-accent);
  background: var(--gn-accent);
  color: var(--gn-on-accent);
}

.gn-bar .gn-slot{
  display: inline-flex;
  flex: none;
  align-items: center;
}

.gn-bar .gn-slot:empty{
  display: none;
}

/* A page control placed in the slot (Magic's Tracking menu) gets the bar's
   button look and the 44px target, whatever its own stylesheet says. */
.gn-bar .gn-slot button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--gn-control-line);
  border-radius: 8px;
  background: var(--gn-paper);
  color: var(--gn-ink);
  font: inherit;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}

.gn-bar.gn-bar .gn-slot button:hover,
.gn-bar .gn-slot button[aria-expanded="true"] {
  background: var(--gn-hover);
}

.gn-bar .gn-slot button:focus-visible {
  outline: 2px solid var(--gn-focus);
  outline-offset: 2px;
}

.gn-bar .gn-cta,
.gn-bar .gn-menu-btn,
.gn-bar .gn-theme,
.gn-bar .gn-close{
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--gn-control-line);
  border-radius: 8px;
  background: var(--gn-paper);
  color: var(--gn-ink);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}

.gn-bar .gn-cta{
  display: none;
  border-color: var(--gn-accent);
  background: var(--gn-accent);
  color: var(--gn-on-accent);
}

.gn-bar.gn-bar .gn-cta:hover{
  border-color: var(--gn-accent-hover);
  background: var(--gn-accent-hover);
  color: var(--gn-on-accent);
}

.gn-bar .gn-cta[aria-current="page"]{
  box-shadow: inset 0 -3px 0 var(--gn-mark);
}

.gn-bar.gn-bar .gn-menu-btn:hover,
.gn-bar.gn-bar .gn-theme:hover,
.gn-bar.gn-bar .gn-close:hover{
  background: var(--gn-hover);
}

.gn-bar .gn-menu-btn{
  min-width: 72px;
}

.gn-bar .gn-menu-btn[aria-expanded="true"]{
  background: var(--gn-sel);
}

.gn-bar .gn-theme{
  min-width: 64px;
  padding: 0 10px;
}

.gn-bar .gn-brand:focus-visible,
.gn-bar .gn-link:focus-visible,
.gn-bar .gn-item:focus-visible,
.gn-bar .gn-cta:focus-visible,
.gn-bar .gn-menu-btn:focus-visible,
.gn-bar .gn-theme:focus-visible,
.gn-bar .gn-close:focus-visible{
  outline: 2px solid var(--gn-focus);
  outline-offset: 2px;
}

/* Menu panel: every destination for this viewer, grouped. */
.gn-bar .gn-menu{
  position: absolute;
  top: calc(100% + 1px);
  right: max(8px, env(safe-area-inset-right, 0px));
  z-index: 61;
  display: block;
  width: min(24rem, calc(100vw - 16px));
  max-height: calc(100dvh - var(--gn-offset, 53px) - 16px);
  margin: 6px 0 0;
  padding: 6px 12px 12px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--gn-line);
  border-radius: 12px;
  background: var(--gn-paper);
  color: var(--gn-ink);
  box-shadow: var(--gn-shadow);
}

.gn-bar .gn-menu[hidden]{
  display: none;
}

.gn-bar .gn-menu-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.gn-bar .gn-menu-title{
  font-size: 0.875rem;
  font-weight: 650;
}

.gn-bar .gn-group{
  display: block;
  margin: 0;
  padding: 0;
}

.gn-bar .gn-group-label{
  display: block;
  margin: 10px 0 4px;
  padding: 0 12px;
  color: var(--gn-muted);
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.gn-bar .gn-list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 2px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gn-bar .gn-list > li{
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gn-bar .gn-item{
  display: flex;
  width: 100%;
  font-size: 0.875rem;
  white-space: normal;
}

.gn-bar .gn-account{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  margin: 10px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--gn-line);
}

.gn-bar .gn-name{
  min-width: 0;
  padding: 0 12px;
  color: var(--gn-muted);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.gn-bar .gn-name:empty{
  display: none;
}

.gn-bar .gn-signout{
  width: auto;
  flex: none;
}

/* Home serves signed-out visitors too: until it knows who is signed in, the
   links and Menu keep their space but are not shown or reachable. */
.gn-bar[data-gn-pending] .gn-links,
.gn-bar[data-gn-pending] .gn-cta,
.gn-bar[data-gn-pending] .gn-menu-btn {
  visibility: hidden;
}

/* Hover rules use .gn-bar twice: the portal's .page button:hover:not(:disabled)
   is more specific than one class plus :hover. */

/* ---------- Widths (the breakpoints the screenshot check tests) ----------
   Container queries on the bar, in em: at 100% text 48em = 768px, 64em =
   1024px, 80em = 1280px, 90em = 1440px; with larger text each switch comes at a
   wider screen. */

@container gnbar (min-width: 48em) {
  .gn-bar .gn-divider{ display: block; }
  /* A fixed width, so the links sit in the same place on every page. */
  .gn-bar .gn-title{ flex: 0 0 9.5rem; max-width: 9.5rem; }
  .gn-bar .gn-links{ display: flex; gap: 6px; }
  .gn-bar .gn-link{ display: none; }
  .gn-bar .gn-link[data-gn-rank="1"]{ display: inline-flex; }
  /* A destination shown as a pill is not repeated in the Menu. */
  .gn-bar .gn-menu .gn-li:has(> .gn-item[data-gn-rank="1"]){ display: none; }
  .gn-bar .gn-menu .gn-group:not(:has(.gn-li:not(:has(> .gn-item[data-gn-rank="1"])))){ display: none; }
}

@container gnbar (min-width: 64em) {
  .gn-bar .gn-cta{ display: inline-flex; }
  /* The button beside Menu is not repeated in the Menu either. */
  .gn-bar .gn-menu .gn-li:has(> .gn-item[data-gn-id="new-request"]){ display: none; }
}

@container gnbar (min-width: 90em) {
  .gn-bar .gn-brand-word{ display: block; }
}

/* Narrow phones: tighter controls, a slightly smaller title. */
@container gnbar (max-width: 23.75em) {
  .gn-bar .gn-row{ gap: 6px; }
  .gn-bar .gn-menu-btn{ min-width: 60px; padding: 0 10px; }
  .gn-bar .gn-theme{ min-width: 52px; padding: 0 8px; }
  .gn-bar .gn-title{ font-size: 0.9375rem; }
}

/* Under 20em (large text on a phone) the title takes its own row under the
   controls, rather than being squeezed out. */
@container gnbar (max-width: 19.9375em) {
  .gn-bar .gn-row{ flex-wrap: wrap; row-gap: 0; }
  .gn-bar .gn-title{ order: 10; flex: 1 0 100%; padding: 0 0 4px; }
  .gn-bar .gn-brand{ margin-right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .gn-bar .gn-link,
  .gn-bar .gn-item,
  .gn-bar .gn-cta,
  .gn-bar .gn-menu-btn,
  .gn-bar .gn-theme,
  .gn-bar .gn-close{
    transition: none;
  }
}

@media (forced-colors: active) {
  .gn-bar::after { background: CanvasText; }
  .gn-bar .gn-link[aria-current="page"],
  .gn-bar .gn-item[aria-current="page"]{ outline: 2px solid Highlight; outline-offset: -2px; }
}

@media print {
  .gn-bar { display: none; }
}