/* =========================================================================
   legacy.css — back-compat aliases only. Every rule here is a duplicate of
   a current rule elsewhere (header.css, components.css, pages.css) applied
   to an older selector name (`header.nav`, `.card-plain`, `button.ghost`,
   `.badge.permit-src`, `.status`, `.headline`), plus a few once-standalone
   legacy classes (`.kind`, `.sub`) that never got a current replacement.
   Grep the HTML/JS for these selector names before deleting a rule here —
   once nothing references a given legacy selector, delete that rule (and,
   once this whole file is empty, delete the file and its <link>).

   LOAD ORDER: last, after tokens.css, base.css, layout.css, components.css,
   header.css, pages.css. Every declaration below is byte-identical to its
   current-class counterpart, so load position doesn't change rendering
   even where specificity happens to tie (e.g. `.status` vs `.status-line`,
   both (0,1,0)) — this file is ordered last purely so it reads as the
   "these can go" pile, not because correctness depends on it.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Header + profile menu — header.nav alias for .app-header* (see header.css)
   ------------------------------------------------------------------------- */
header.nav {
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-3) var(--space-8);
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
header.nav .brand {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  letter-spacing: .04em;
  color: var(--text-heading);
  text-decoration: none;
  white-space: nowrap;
}
header.nav .brand:hover { text-decoration: none; color: var(--text-heading); }

header.nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: var(--space-1) 0;
  position: relative;
}
header.nav a:hover { color: var(--text-body); text-decoration: none; }
header.nav a.on {
  color: var(--text-heading);
}
header.nav a.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--brand); border-radius: var(--radius-pill);
}

header.nav .spacer { flex: 1; }

/* -------------------------------------------------------------------------
   Surfaces — .card-plain alias for .card (see components.css)
   ------------------------------------------------------------------------- */
.card-plain {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-top: var(--space-3);
  box-shadow: var(--shadow-card);
}

/* -------------------------------------------------------------------------
   Controls — button.ghost alias for .btn--ghost (see components.css)
   ------------------------------------------------------------------------- */
button.ghost {
  background: transparent; color: var(--text-body);
  border: 1px solid var(--border-default);
}
button.ghost:hover { background: var(--surface-raised); border-color: var(--border-strong); }

/* -------------------------------------------------------------------------
   Feedback — .badge.permit-src alias for .badge--ok, .status alias for
   .status-line (see components.css)
   ------------------------------------------------------------------------- */
.badge.permit-src { background: var(--success-soft); border-color: var(--success-soft); color: var(--success); }
.status { margin: var(--space-4) 2px; color: var(--text-muted); min-height: 22px; font-size: var(--text-sm); }

/* -------------------------------------------------------------------------
   Data — .kind, once a stand-alone permit/solar-kind marker with no
   current replacement (see components.css for the shared table primitives)
   ------------------------------------------------------------------------- */
.kind { font-weight: var(--weight-semibold); white-space: nowrap; }
.kind.solar { color: var(--warning); }
.kind.roof { color: var(--brand-text); }

/* -------------------------------------------------------------------------
   Result headline — .headline alias for .result-headline (see pages.css)
   ------------------------------------------------------------------------- */
.headline {
  display: flex; gap: var(--space-8); flex-wrap: wrap; align-items: center;
}

/* -------------------------------------------------------------------------
   Page head — generic "sub" / "desc" text used stand-alone (legacy +
   descriptions in permit rows) — kept distinct from .page-head .desc
   (layout.css). `.desc` and `.muted`, the still-current members of this
   original group, live in layout.css next to `.page-head`.
   ------------------------------------------------------------------------- */
.sub { color: var(--text-muted); margin: 0 0 var(--space-6); font-size: var(--text-sm); }

/* =========================================================================
   Responsive — header.nav alias for the header-owned half of app.css's
   original max-width:719.98 block (see header.css's Responsive section).
   ========================================================================= */
@media (max-width: 719.98px) {
  header.nav { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
  header.nav { row-gap: var(--space-2); }
}