/* chrome.css — the bar that runs across the top of every internal page.
 *
 * Taken from the style editor, which had the only version of it, and made
 * shared so that moving between the route picker, a route, the dispatcher
 * board and the request queue feels like one application rather than four
 * pages that happen to share a server.
 *
 * Markup, kept identical on every page:
 *
 *   <header class="app-bar">
 *     <h1><span class="app-mark"></span><span class="app-name"></span>
 *         <span class="app-page">Dispatch</span></h1>
 *     <nav><a href="/">Routes</a><a href="/dispatch">Dispatch</a></nav>
 *   </header>
 *
 * The mark and the name are empty on purpose — they are drawn from
 * --appbar-mark and --appbar-name, which the server writes into every page
 * from the saved settings. That is what makes them editable on pages that do
 * not load the style system at all.
 *
 * It is CSS and markup only — no script. Pages like the error log and the
 * notes page set their own palettes, and pulling the style system into them
 * just to draw a bar would let the editor's inline variables override those
 * palettes. The colours below are editable on the pages that do load the
 * style system, and fall back everywhere else.
 */

.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: var(--appbar-bg, #111611);
  border-bottom: 1px solid var(--appbar-border, #2a332d);
  flex-shrink: 0;
}

.app-bar h1 {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--appbar-text, #ffffff);
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

/* Content from a custom property. The server always writes both, quoted;
   the fallbacks here are what a page shows if it is opened straight off disk. */
.app-mark::before { content: var(--appbar-mark, "🌿"); }
.app-name::before { content: var(--appbar-name, "EverGreen"); }

.app-mark { font-size: 15px; }
.app-name { white-space: nowrap; }

/* The page's own name, quieter than the product name beside it. */
.app-page {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--appbar-link, #9fb8a8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-bar nav {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.app-bar nav a {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--appbar-link, #9fb8a8);
  text-decoration: none;
  white-space: nowrap;
  /* 18px of text, hit like 44. The padding grows the target; the equal
     negative margin leaves the bar exactly the height it already was. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  margin: -13px 0;
}
.app-bar nav a:hover,
.app-bar nav a:focus-visible { color: var(--appbar-text, #ffffff); }

/* The page you are on is not a link anywhere. */
.app-bar nav a[aria-current="page"] {
  color: var(--appbar-text, #ffffff);
  font-weight: 600;
}

@media (max-width: 520px) {
  .app-bar { padding: 10px 12px; gap: 10px; }
  .app-bar nav { gap: 12px; }
  .app-page { display: none; }   /* the nav matters more than the label */
}

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