/* ----------------------------------------------------------------------- */
/* Site shell                                                               */
/* ----------------------------------------------------------------------- */

.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--col-wide);
  margin: 0 auto;
  padding: var(--gap-7) var(--gap-5) var(--gap-8);
}
.site-main--narrow { max-width: var(--col-narrow); }
.site-main--medium { max-width: var(--col); }

.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-muted);
}
.site-footer__inner {
  max-width: var(--col-wide);
  margin: 0 auto;
  /* Vertical breathing room top + bottom (previously zero bottom — the
     content sat against the footer's outer edge, which read as
     "cramped" no matter the inner gap). Horizontal pad still aligns
     with the rest of the chrome. */
  padding: var(--gap-3) var(--gap-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-3);
  min-height: var(--bottom-strip-h);
}
.site-footer__brand {
  color: var(--ink-faint);
  font-size: 0.8rem;
  letter-spacing: 0.005em;
}
/* Right-side link cluster. `gap` carries the spacing; no separator
   spans needed. margin-left: auto pushes it to the end of the row
   regardless of how many siblings sit on the left. */
.site-footer__right {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-4);
  margin-left: auto;
}
.site-footer__link {
  color: var(--ink-soft);
  text-decoration: none;
  /* Inline-flex + vertical-align fixes the half-pixel baseline drift
     between <a> (text baseline) and <button> (button baseline) so the
     Report trigger sits cleanly inline with Status / Changelog. */
  display: inline-flex;
  align-items: center;
  line-height: 1;
  transition: color 0.12s ease;
}
.site-footer__link:hover,
.site-footer__link:focus-visible { color: var(--ink); }
.site-footer__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
/* The "Report" trigger lives among the other footer links but is a
   <button> (it opens a dialog, not a navigation). Strip the native
   button chrome so it matches the surrounding <a>s exactly. */
.site-footer__link--button {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
}

/* Page-level header */
.page-header {
  margin-bottom: var(--gap-6);
}
.page-header h1 { margin-bottom: var(--gap-2); }
.page-header__lede {
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin: 0;
  max-width: 48rem;
}
.page-header--with-actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-4);
  flex-wrap: wrap;
}

/* Back / forward link affordances */
.back-link, .forward-link {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  margin-bottom: var(--gap-3);
}
.back-link::before    { content: "← "; margin-right: 0.15rem; }
.forward-link::after  { content: " →"; margin-left: 0.15rem; }
.back-link:hover, .forward-link:hover {
  color: var(--accent);
}