/* ============================================================
   nav.css  ·  the one inverted band (v12 MASTHEAD)
   Permanently solid ink — not a scroll-triggered flip. The
   hysteresis scroll handler in main.js still runs (required);
   it now just adds a hairline/shadow on scroll, not a background.
   ============================================================ */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: 0 50%; z-index: 120;
  will-change: transform;
}

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
  /* padding-top clears the iPhone notch/Dynamic Island (paired with
     viewport-fit=cover in each page's <meta viewport>); without both
     together, iOS Safari's toolbar-collapse animation can flash
     already-scrolled content in the status-bar strip above this bar. */
  padding: calc(16px + env(safe-area-inset-top, 0px)) var(--gutter) 16px;
  background: var(--band-bg); color: var(--band-fg);
  transition: box-shadow var(--dur-1) var(--ease-out);
}
/* geometry never changes on scroll — animating nav padding wobbles on iOS */
.nav.scrolled { box-shadow: 0 1px 0 var(--band-line); }
.nav-mark { display: inline-flex; font-size: 1.2rem; }
.nav-links { display: flex; align-items: center; gap: var(--s4); }
.nav-link {
  font-family: var(--f-mono); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--band-fg-2);
  transition: color var(--dur-1) var(--ease-out);
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--band-fg); }
.nav-link[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
@media (max-width: 680px) { .nav-links .nav-link:not(.nav-cta) { display: none; } }
.nav-cta {
  color: var(--on-red); background: var(--red);
  padding: 9px 18px;
  transition: background var(--dur-1) var(--ease-out);
}
.nav-cta:hover { color: var(--on-red); background: var(--red); filter: brightness(0.86); }

/* spacer so fixed nav never overlaps page content — grows with the
   same safe-area allowance the nav's own padding-top uses */
.nav-spacer { height: calc(76px + env(safe-area-inset-top, 0px)); }

/* The theme control reads as one of the nav's tracked labels, not a widget
   bolted on: same mono register, same tracking, a hairline box so it is
   visibly pressable without becoming a second CTA competing with Contact. */
.nav-theme {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--band-fg-2);
  border: 1px solid var(--band-line);
  padding: 5px 10px;
  margin-left: var(--s1);
  transition: color var(--dur-1), border-color var(--dur-1);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.nav-theme:hover { color: var(--band-fg); border-color: var(--band-fg); }
.nav-theme:active { transform: translateY(1px); }

/* ============================================================
   THE ACCOUNT CHIP
   Signing in is optional on this site, so the control must not
   look like a demand. It borrows .nav-theme's register exactly
   — mono, tracked, hairline box — which puts it in the class of
   "small settings that live in the bar" rather than making it a
   second CTA arguing with Contact for the same attention.
   ============================================================ */
.nav-acct { display: inline-flex; }
.acct { display: inline-flex; align-items: center; gap: var(--s1); }

.acct-btn {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--band-fg-2);
  background: none;
  border: 1px solid var(--band-line);
  padding: 5px 10px;
  cursor: pointer;
  transition: color var(--dur-1), border-color var(--dur-1);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.acct-btn:hover { color: var(--band-fg); border-color: var(--band-fg); }
.acct-btn:active { transform: translateY(1px); }

/* Once you are signed in, your own name is the thing worth reading and
   Sign out is the afterthought — so the name loses the box and the button
   loses its border. */
.acct-who {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--band-fg);
  max-width: 14ch;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-avatar {
  width: 20px; height: 20px; border-radius: 50%;
  object-fit: cover; flex: none;
  filter: var(--img-filter);
}
.acct-btn--quiet { border-color: transparent; padding-inline: 4px; }
.acct-btn--quiet:hover { border-color: transparent; color: var(--band-fg); text-decoration: underline; text-underline-offset: 4px; }

/* On a phone the nav already drops its links to keep the bar to one line,
   so the chip has to earn its width. The NAME is what gives: an avatar
   already says who you are, and the first draft of this hid Sign out
   instead — which reads as tidier right up until somebody signs in on
   their phone and finds no way back out. A control you cannot reach is
   worse than one that is cramped. */
@media (max-width: 680px) {
  .acct-who { max-width: 7ch; gap: 5px; letter-spacing: 0.04em; }
  .acct-who:has(.acct-avatar) { max-width: none; font-size: 0; gap: 0; }
  .acct-btn { padding: 5px 8px; }
  .acct-btn--quiet { padding-inline: 2px; }
}

/* A failed sign-in has to look different from one never attempted. */
.acct-btn--failed { border-color: var(--red); color: var(--band-fg); }
.acct-warn {
  font-family: var(--f-mono); font-size: var(--t-micro);
  letter-spacing: 0.06em; color: var(--red);
  white-space: nowrap;
}
@media (max-width: 680px) { .acct-warn { display: none; } }