/* The site's header, on every page: the demo page's own header (brand,
   subtitle, render-host pill), with the site's navigation on the right.
   On the demo, index.html styles the header itself and DemoController puts
   the navigation into it; on every other page the layout draws the whole
   header with the .app-header rules below, which copy the demo's. Either
   way the navigation (.site-nav) is drawn by this file in the demo's palette
   names, so it looks the same on both. */

/* The demo's palette names, for the other pages (the demo defines the same
   names, with the same values, itself). */
.app-header,
[data-theme="light"] .app-header {
  --bg: #F5F3EF;
  --panel: #FFFFFF;
  --raise: #F7F5F1;
  --line: #E4E0D8;
  --line-hi: #D3CEC4;
  --text: #1C1B1A;
  --muted: #4A453F;
  --dim: #625D57;
  --accent: #1D5AA8;
  --accent-dim: rgba(29, 90, 168, 0.09);
  --good: #2A6E2E;
  --bad: #B02020;
}
[data-theme="dark"] .app-header {
  --bg: #0B0C0E;
  --panel: #141518;
  --raise: #1B1D21;
  --line: #24272C;
  --line-hi: #33373E;
  --text: #F5F6F7;
  --muted: #B4B8BF;
  --dim: #8A8F98;
  --accent: #5B9BF0;
  --accent-dim: rgba(91, 155, 240, 0.14);
  --good: #7FC97A;
  --bad: #FF7B72;
}

/* The demo header's own rules (index.html: header, .brand, .pill, .dot). */
.app-header {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel);
  color: var(--text); font: 13px/1.45 var(--font-body); -webkit-font-smoothing: antialiased;
}
.app-header .brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.app-header .brand b { font-weight: 600; letter-spacing: 0.22em; font-size: 14px; }
.app-header .brand span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-header .spacer { flex: 1; }
.app-header .pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px;
  border: 1px solid var(--line-hi); border-radius: 999px; background: none; color: var(--muted);
  font-size: 12px; font-weight: 400; white-space: nowrap; max-width: 52vw; overflow: hidden; text-overflow: ellipsis;
}
.app-header .pill strong { color: var(--text); font-weight: 500; }
.app-header .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); flex: none; }
.app-header .dot.ok { background: var(--good); box-shadow: 0 0 0 3px rgba(108, 196, 138, 0.15); }
.app-header .dot.bad { background: var(--bad); box-shadow: 0 0 0 3px rgba(224, 121, 108, 0.15); }

/* The navigation, on every page and inside the demo's header. */
.site-nav { display: flex; align-items: center; gap: 12px; }
.site-nav .nav-links { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.site-nav .nav-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 4px;
  color: var(--muted); text-decoration: none; font-size: 12px; font-weight: 500;
}
.site-nav .nav-link:hover { color: var(--text); background: var(--raise); }
.site-nav .nav-link.active { color: var(--accent); background: var(--accent-dim); }
.site-nav .count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 4px; border-radius: 999px; background: var(--accent); color: var(--bg); font-size: 11px; font-weight: 700;
}
.site-nav .nav-user { display: flex; align-items: center; gap: 12px; }
.site-nav .nav-user form { margin: 0; }
.site-nav .nav-username { color: var(--muted); font-size: 12px; text-decoration: none; white-space: nowrap; }
.site-nav .nav-username:hover { color: var(--accent); }
.site-nav .btn-signout {
  height: 28px; padding: 0 12px; border: 1px solid var(--line-hi); border-radius: 4px;
  background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer;
}
.site-nav .btn-signout:hover { color: var(--text); background: var(--raise); }
.site-nav .theme-switcher {
  display: flex; gap: 4px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
}
.site-nav .theme-btn {
  padding: 2px 8px; border: 0; border-radius: 4px; background: none; cursor: pointer;
  color: var(--dim); font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.site-nav .theme-btn:hover { color: var(--text); background: var(--raise); }
.site-nav .theme-btn.active { background: var(--accent); color: var(--bg); }

@media (max-width: 900px) {
  header { flex-wrap: wrap; row-gap: 8px; }
  .app-header .brand span { display: none; }
  .site-nav { order: 3; flex-basis: 100%; flex-wrap: wrap; justify-content: space-between; }
  .site-nav .nav-username { display: none; }
}