/* nav-button.css -- THE ONE DEFINITION OF SPACH'S NAV BUTTON (.drawer-btn), shared by the main nav (index.html:
   Invoice Entry, Ask Spach, Settings), the Monthly P&L toolbar (/month) and the statement toolbar (/period/:id).
   Moved here out of styles.css on 2026-09-26 so the three toolbars cannot drift; the pages link this file rather
   than copying the rule.

   ⚠ LITERAL VALUES, NOT PAGE VARIABLES. /period/:id defines its own --line / --bg / --ink / --accent with different
   values (statement.js ROOT_VARS), so a rule reading page variables would render differently there. The literals are
   styles.css's :root tokens -- --sans, --line, --bg, --ink, --accent -- and test-nav-button.js asserts they still are.

   ⚠ font-family IS NAMED HERE. Before this file the rule set none, so the <a> (Invoice Entry) inherited Inter from
   the page while the <button>s (Ask Spach, Settings) fell back to the browser's control font -- measured in Chrome
   2026-09-26: Inter and Arial side by side in one nav. line-height is named for the same reason: an <a> inherits
   the page's, a <button> does not. */
.drawer-btn {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px; font-weight: 600; line-height: normal; padding: 8px 14px;
  border: 1px solid rgba(168, 132, 62, 0.32); background: #f4efe6; color: #211c16;
  border-radius: 9px; cursor: pointer;
  text-decoration: none; display: inline-block;
}
.drawer-btn:hover { border-color: #a8843e; color: #a8843e; }

/* THE ONE NAV TOOLBAR ROW (2026-09-26). Every served page puts its page-level navigation in ONE <nav class="nav-bar">,
   Home first, every link a .drawer-btn -- no page styles its own nav (test-page-nav.js fails if one does). margin-left:auto
   pushes the row to the right inside a page's flex header and is inert anywhere else. */
.nav-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
/* Navigation is never part of a printed page, on any page. */
@media print { .nav-bar { display: none; } }