/**
 * The development banner, and it is its own file because two unrelated pages
 * draw it.
 *
 * **It lived in `fallow.css` and the marketing home page does not load that.**
 * So `site/index.html` carried the markup with none of the rules: the notice
 * went unstyled and the coffee glyph — an inline `<svg>` with no width — grew
 * to fill the screen, because that is what an unconstrained SVG does. Reported
 * 2026-10-16 as *top bar broken on home page*.
 *
 * Moved rather than copied. A second copy is the thing `DEVELOPMENT.md` refuses
 * by name, and the failure here was a copy that never happened rather than one
 * that drifted — the next edit would have had to be made twice.
 *
 * Needs `tokens.css`, which both pages already load.
 */

:root { --dev-note-h: 41px; }

.dev-note {
  display: block; text-decoration: none;
  background: var(--warm); color: var(--text);
  text-align: center;
  font: 400 14px/19px var(--read);
  padding: 11px var(--space-md);
  position: sticky; top: 0; z-index: 11;
}
.dev-note:hover { filter: brightness(1.04); }
/* **The notice is the bold half and the ask is the quiet one.** Joshua's
   wording, kept as written. */
.dev-note b { font-weight: 700; }
.dev-note .sup { font-weight: 400; opacity: .78; margin-left: 7px; }
@media (max-width: 560px) { .dev-note .sup { display: none; } }
.dev-note svg {
  width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px;
  /* Stroked rather than filled, so it holds up small and in greyscale — the
     same reason `DESIGN.md` gives for the app's set being outline. */
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}