/* Nav bar states. Additive — styles.css untouched.
 *
 * The complaint this fixes: the nav read as dead. styles.css gives each link
 * `border:1px solid transparent` at rest, so there was no plate at all —
 * grey text floating on near-black, indistinguishable from a caption. Only
 * hover produced a surface, which means the bar looked inert until you
 * happened to point at it.
 *
 * Fix is a real tab strip: every link sits on its own faint plate at rest,
 * so the row reads as a set of controls before any interaction. Three states
 * must stay distinguishable, or two of them collide and neither reads:
 *
 *   rest     dark plate,  hairline border,   muted text
 *   hover    lime fill,   lime border,       pitch text     (pointing at)
 *   current  raised dark, lime underline,    bright text    (you are here)
 *
 * SELECTOR NOTE: router.js sets aria-current="page" (the correct token for a
 * routed view). An earlier version of this file matched
 * aria-current="true" and therefore styled nothing.
 */

.hud nav { gap: 3px; }

/* ---- rest: a plate exists, so the bar reads as controls ---- */
.hud nav a {
  background: #ffffff08;
  border-color: #ffffff1a;
  color: #c6c2b6;
}

/* ---- hover: what you are pointing at ---- */
.hud nav a:hover {
  color: var(--pitch);
  background: var(--lime);
  border-color: var(--lime);
  box-shadow: 0 2px 0 #ffffff2b;
}

/* ---- current: where you are ----
   Deliberately NOT the lime fill: "here" and "pointing at" must not look the
   same. Raised plate + lime underline rail + brightest text. */
.hud nav a[aria-current="page"] {
  color: #f2efe6;
  background: #ffffff14;
  border-color: #ffffff33;
  box-shadow: inset 0 -2px 0 var(--lime);
}

/* Hover still wins while the pointer is on the current item, so the two
   states never fight for the same pixels. */
.hud nav a[aria-current="page"]:hover {
  color: var(--pitch);
  background: var(--lime);
  border-color: var(--lime);
  box-shadow: 0 2px 0 #ffffff2b;
}

.hud nav a:active { transform: translateY(1px); box-shadow: none; }

/* Keyboard users get the same affordance as the pointer. */
.hud nav a:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .hud nav a { transition: none; }
}

/* ---- the status pill is a real control now ----
   It was a <span> with cursor:help: it looked like a lime button and a click
   did nothing. It is a <button> that re-pulls /api/quotes, so it needs the
   browser's default chrome stripped and a real affordance put back. */
#feedstate {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: #cfe6b0;
  background: #ffffff0d;
  border: 1px solid #ffffff26;
  border-radius: 2px;
  /* min-height + centring, not padding alone: at 11px/4px this button measured
     27px tall and failed the 32px touch-target floor. */
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}

#feedstate:hover {
  color: var(--pitch);
  background: var(--lime);
  border-color: var(--lime);
}

#feedstate:active { transform: translateY(1px); }

#feedstate:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 1px;
}

/* Mid-fetch: dim it and take the pointer away so a double click cannot queue
   a second request while the first is in flight. */
#feedstate[data-busy] {
  opacity: .55;
  cursor: progress;
}

/* The live dot belongs to the pill's story, so it should not animate while a
   refresh is pending — a breathing dot next to a dimmed pill reads as broken. */
#feedstate[data-busy] ~ .dotlive,
.clockbox:has(#feedstate[data-busy]) .dotlive { animation: none; }

@media (prefers-reduced-motion: reduce) {
  #feedstate { transition: none; }
}