/* Site header: quiet chrome, slim and sticky, hairline shadow separation;
   nav items are transparent pill buttons, active = tinted pill. */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  background: var(--paper);
  box-shadow: var(--hairline-shadow);
}
.site-nav {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  min-block-size: var(--header-block-size);
  padding-inline: clamp(var(--space-4), 3vw, var(--space-7));
}
.site-nav .brand {
  color: var(--ink);
  font-weight: 700;
  font-size: var(--text-4);
  text-decoration: none;
  margin-inline-end: var(--space-2);
}
.nav-links {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  min-inline-size: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  flex: 1;
}
.nav-links a {
  text-decoration: none;
  color: var(--muted);
  font-weight: 500;
  font-size: var(--text-3);
  white-space: nowrap;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-2);
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-links a:hover { background: var(--surface); color: var(--ink); }
.nav-links a[aria-current="page"] {
  background: var(--accent-tint);
  color: var(--accent);
}
.nav-links .badge { font-size: var(--text-0); vertical-align: middle; }
.nav-divider {
  inline-size: 1px;
  block-size: 1.5rem;
  background: var(--border);
  flex: none;
}
/* Fiscal-year switcher: a quiet select that sits just left of the account
   menu. The label is visually hidden; the fallback button is JS-hidden. */
.fiscal-year-switch {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}
.fiscal-year-switch select {
  font: inherit;
  font-size: var(--text-3);
  color: var(--ink);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  background: var(--paper);
}
.nav-menu > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  font-weight: 600;
  font-size: var(--text-3);
  color: var(--ink);
  transition: background 0.15s ease;
}
.nav-menu > summary::after { content: "▾"; color: var(--muted); font-size: 0.8em; }
.nav-avatar {
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 700;
  font-size: var(--text-1);
}
.nav-menu .menu-panel { min-inline-size: 14rem; }

/* Section tabs (Kirjanpito): the main nav's learned pill grammar, one
   notch quieter — neutral hover, tinted pill + weight bump when active
   (never color alone). */
.sub-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-block-end: var(--space-5);
  font-size: var(--text-3);
}
/* Groups read as one row until the eye needs them apart: a hairline, not a
   heading, keeps the section index calm (design_system.md). */
.sub-nav-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: baseline;
  min-inline-size: 0;
}
.sub-nav-group + .sub-nav-group {
  margin-inline-start: var(--space-2);
  padding-inline-start: var(--space-3);
  border-inline-start: 1px solid var(--border);
}
.sub-nav a {
  text-decoration: none;
  color: var(--muted);
  font-weight: 500;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-2);
  transition: background 0.15s ease, color 0.15s ease;
}
.sub-nav a:hover { background: var(--surface); color: var(--ink); }
.sub-nav a[aria-current="page"] {
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 600;
}
/* The last group collapses: the filing and setup pages are the section's
   least frequent, and the row had grown to two lines. The trigger is one
   more pill in the same grammar — tinted when the page you are on is
   inside it, since a closed panel can say nothing for itself. */
.sub-nav-menu > summary {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-2);
  font-weight: 500;
  color: var(--muted);
}
.sub-nav-menu > summary::after { content: "▾"; color: var(--muted); font-size: 0.8em; }
.sub-nav-menu > summary[aria-current="true"] {
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 600;
}
/* menu.css hangs the panel off the trigger's end edge — right for the
   account menu at the window's edge, wrong for a trigger mid-row. */
.sub-nav-menu .menu-panel { inset-inline-end: auto; inset-inline-start: 0; }
.sub-nav-menu .menu-panel a { display: block; }