/* ============================================================
   bar.css — the machine bar and the footer, once.

   Every page but the landing one opens with the same dark strip:
   where you are, how to get back, and whatever that page keeps on
   the right. The footer is the same strip at the other end.

   These lived in three stylesheets and had already drifted — the
   reading room and the record footers had hard-coded greys where
   the crossing used tokens, and projects.html, which loads neither
   of those files, rendered its bar as underlined blue links on
   white. One file, four consumers: index.html (footer only),
   projects.html, blog.html, cv.html and every article page.

   Colours are all panel tokens, so the strip stays a dark machine
   surface in the light appearance and in the dark one.
   ============================================================ */

/* ---------- the bar ----------------------------------------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 0.55rem clamp(0.9rem, 3vw, 1.8rem);
  background: var(--panel-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--panel-text);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  border-bottom: 1px solid var(--panel-line);
}
.bar__left { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.bar__right { display: flex; align-items: center; gap: 0.8rem; white-space: nowrap; }

/* The bar sets a 12.5px mono line, so nothing in it is 44px tall on
   its own. Each link carries its own padding rather than a reaching
   pseudo-element: the strip is tall enough to hold it, and a real
   box is a target every measuring tool agrees about. */
.bar__home {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding-inline: 0.35rem;
  margin-inline: -0.35rem;
  color: var(--panel-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-breath) var(--ease-sand);
}
.bar__home:hover { color: var(--panel-strong); }
.bar__sep { opacity: 0.35; }
.bar__host { color: var(--panel-text); white-space: nowrap; }
.bar__path { color: var(--panel-dim); white-space: nowrap; }

/* the reading room's workspace filters */
.bar__ws { display: flex; gap: 0.35rem; margin-inline: auto; }
.bar__tag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 44px;
  padding: 0.3rem 0.7rem;
  border-radius: 0.45rem;
  color: var(--panel-dim);
  border: 1px solid transparent;
  transition: color var(--dur-breath) var(--ease-sand), background var(--dur-breath) var(--ease-sand), border-color var(--dur-breath) var(--ease-sand);
}
.bar__tag i { font-style: normal; opacity: 0.85; font-size: 0.9em; }
.bar__tag:hover { color: var(--panel-strong); background: var(--panel-shade); }
.bar__tag.is-active {
  color: var(--panel-strong);
  background: var(--panel-shade);
  border-color: var(--panel-line);
}
.bar__tag .ph,
.bar .ph { border-bottom-color: rgba(255, 255, 255, 0.32); }

.bar__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background-color: var(--panel-strong);
  box-shadow: 0 0 0 3px var(--panel-shade);
}

/* the record's download, when there is a PDF to download */
.bar__dl {
  display: inline-flex; align-items: center;
  min-height: 44px;
  color: var(--panel-text);
  text-decoration: none;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--panel-line);
  border-radius: 0.45rem;
  white-space: nowrap;
  transition: background var(--dur-breath) var(--ease-sand), color var(--dur-breath) var(--ease-sand);
}
.bar__dl:hover { background: var(--panel-shade); color: var(--panel-strong); }

/* ---------- the footer -------------------------------------- */
.footer { background: var(--panel-bg); border-top: 1px solid var(--panel-line); }
.footer__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.4rem 2rem; flex-wrap: wrap;
  padding-block: 0.6rem;
}
.footer__prompt { font-family: var(--font-mono); font-size: var(--text-micro); }
.footer__host { color: var(--panel-text); }
.footer__path { color: var(--panel-dim); }
.footer__note { font-family: var(--font-mono); font-size: var(--text-micro); color: var(--panel-dim); }
/* `cd ~` is the way home from the foot of every page, and it was a
   28x21px word. Real padding, not a pseudo-element: the row has the
   height to give it and a real box is what a thumb and a measuring
   tool both see. */
.footer__top {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding-inline: 0.5rem;
  margin-inline: -0.5rem;
  font-family: var(--font-mono); font-size: var(--text-micro);
  color: var(--panel-dim); text-decoration: none;
  transition: color var(--dur-breath) var(--ease-sand);
}
.footer__top:hover { color: var(--panel-strong); }

html.no-motion .bar__home,
html.no-motion .bar__tag,
html.no-motion .bar__dl,
html.no-motion .footer__top { transition: none; }