/* The site header — one bar, one stylesheet, on every page: the plugin
   pages import it (webPage.ts mountPageHeader), and scripts/build-web.ps1
   copies it into the site for the credits page. Change it here, for all.

   Markup:
     <header class="bw-header">
       <a class="bw-header-home" href="../">← BRAIDWORKS</a>
       <span class="bw-header-title">…</span>
       <span class="bw-header-note">…</span>          (fills, ellipsis)
       <a class="bw-header-link" href="…">…</a>      (optional)
       <div class="bw-theme">…DARK / LINEN buttons…</div>
       <button class="bw-header-button">RESET</button>
     </header>

   Its colours are its own (Linen Dark by default, Linen under
   data-theme='linen' on <html>), so it reads the same under the site's and
   the plugins' theme variables. */

.bw-header {
  --hdr-text: #e6ddcc;
  --hdr-muted: rgba(230, 221, 204, 0.62);
  --hdr-line: rgba(230, 221, 204, 0.14);
  --hdr-hover: #d09068;
  --hdr-accent: #98a0cf;
  --hdr-on-accent: #1d1a16;
  --hdr-fill: rgba(230, 221, 204, 0.05);

  /* Stays in view while the page scrolls; it needs a fill of its own for the
     content passing under it (the page tokens: themes.css / site.css). */
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-top);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hdr-line);
  color: var(--hdr-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: normal;
}

[data-theme='linen'] .bw-header {
  --hdr-text: #2a2631;
  --hdr-muted: rgba(42, 38, 49, 0.62);
  --hdr-line: rgba(42, 38, 49, 0.16);
  --hdr-hover: #3b4cb8;
  --hdr-accent: #3b4cb8;
  --hdr-on-accent: #f4efe3;
  --hdr-fill: rgba(42, 38, 49, 0.05);
}

/* Narrow: the controls wrap onto a second line rather than run off the edge
   (the note gives way first). */
@media (max-width: 720px) {
  .bw-header {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .bw-header-note {
    display: none;
  }
}

.bw-header a {
  color: inherit;
  text-decoration: none;
}

.bw-header-home {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--hdr-muted) !important;
}

.bw-header-title {
  flex: none;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.bw-header-note {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--hdr-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bw-header-link,
.bw-header-button {
  flex: none;
  padding: 5px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--hdr-text);
  background: var(--hdr-fill);
  border: 1px solid var(--hdr-line);
  border-radius: 6px;
  cursor: pointer;
}

.bw-header-home:hover,
.bw-header-link:hover,
.bw-header-button:hover {
  color: var(--hdr-hover) !important;
  border-color: var(--hdr-hover);
}

.bw-header-button[aria-pressed='true'] {
  color: var(--hdr-on-accent);
  background: var(--hdr-accent);
  border-color: var(--hdr-accent);
}

/* DARK | LINEN (also the landing page's, placed by site.css). */
.bw-theme {
  --hdr-text: #e6ddcc;
  --hdr-accent: #98a0cf;
  --hdr-on-accent: #1d1a16;
  --hdr-line: rgba(230, 221, 204, 0.2);
  flex: none;
  display: inline-flex;
  border: 1px solid var(--hdr-line);
  border-radius: 8px;
  overflow: hidden;
}

[data-theme='linen'] .bw-theme {
  --hdr-text: #2a2631;
  --hdr-accent: #3b4cb8;
  --hdr-on-accent: #f4efe3;
  --hdr-line: rgba(42, 38, 49, 0.2);
}

.bw-theme button {
  padding: 6px 12px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--hdr-text);
  background: transparent;
  border: 0;
  opacity: 0.65;
  cursor: pointer;
}

.bw-theme button[aria-pressed='true'] {
  opacity: 1;
  color: var(--hdr-on-accent);
  background: var(--hdr-accent);
}