/* The satelle header — ONE component shared by the landing site and the app
   (templates/partials/header.html). Both surfaces link this sheet; neither
   styles.css nor app.css declares header rules. Colour/font tokens (--ink,
   --line, --accent, --chip, --display) come from the page's own stylesheet. */

.site-header {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--line);
}

/* ◐ satelle wordmark — a LEADING accent moon-phase mark then the ink word.
   The mark leads (a satellite is a body in phase) so it never reads as a
   trailing end-stop. */
.brand {
  font-family: var(--display, inherit);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
  text-decoration: none;
}
/* The ◐ mark is the logo — accent-coloured, upright, wherever the wordmark
   renders; the glyph is swapped for the inline animated terminator-sweep SVG. */
.mark { color: var(--accent); font-style: normal; }
.wordmark { font-style: normal; }
/* The animated terminator-sweep mark sits in text like the ◐ glyph it replaces:
   the visible circle is ~x-height of the lowercase wordmark, centred on the line
   (the circle fills 80% of the SVG box, hence the box is slightly larger). */
.mark .mark-sweep { width: 0.75em; height: 0.75em; vertical-align: -0.07em; }
.mark .sweep-static { display: none; }
@media (prefers-reduced-motion: reduce) {
  .mark .sweep-anim { display: none; }
  .mark .sweep-static { display: block; }
}

.site-header nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.site-header nav a {
  color: var(--ink);
  text-decoration: none;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
}
.site-header nav a:hover { background: var(--chip); }
.site-header nav a.active { color: var(--accent); }

/* GitHub icon button — a compact control in the right cluster, styled like the
   theme toggle (outlined square, border-lift on hover, never underlined or
   chip-filled) rather than a text nav link. */
.site-header nav a.github-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
}
.site-header nav a.github-btn:hover { background: none; border-color: var(--ink); }

/* Account control — the farthest-right header item. */
.account { position: relative; display: inline-flex; }
/* Circular avatar: the uppercased email initial, outlined like the other
   controls; border-lift on hover, never underlined. */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font-family: var(--display, inherit);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  text-transform: uppercase;
}
.avatar:hover { border-color: var(--ink); }
/* Dropdown: a hairline panel anchored to the avatar's right edge. */
.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 168px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  background: var(--panel, var(--bg));
  border: 1px solid var(--line);
  border-radius: 8px;
  z-index: 30;
}
.account-menu[hidden] { display: none; }
/* Menu links inherit the no-underline nav-link treatment; only spacing here. */
.site-header nav .account-menu a { display: block; padding: 0.4rem 0.6rem; }
.account-email {
  padding: 0.35rem 0.6rem;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono, monospace);
  font-size: var(--text-meta, 12px);
  word-break: break-all;
}
/* Signed-out affordance: a plain nav-link to the login page. */
.signin { color: var(--ink); }

/* On mobile the account control folds into the collapsed nav; the dropdown
   then flows inline rather than floating off the narrow viewport. */
@media (max-width: 640px) {
  .account { display: block; }
  .account-menu { position: static; right: auto; min-width: 0; margin-top: 4px; }
}

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.nav-toggle:hover { border-color: var(--ink); }

/* Theme toggle: outlined, transparent, normal-colour text — same in both themes. */
.theme-toggle {
  border: 1px solid var(--line);
  background: none;
  color: var(--ink);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--ink); }
/* Moon in light theme (click for dark), sun in dark theme (click for light) —
   the common convention, swapped in CSS alone so theme.js stays icon-free. */
.theme-toggle .theme-icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-sun { display: inline; }

/* Mobile: the nav collapses behind the hamburger. */
@media (max-width: 640px) {
  .site-header { flex-wrap: wrap; }
  .nav-toggle { display: inline-block; }
  .site-header nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 0;
    margin-top: 0.75rem;
  }
  .site-header nav.open { display: flex; }
}