/* ============================================================
   BASE - reset, typography, layout primitives, accessibility.
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: var(--fs-base);
  color: var(--c-ink);
  background: var(--c-bg);
  line-height: 1.45;
}

h1, h2, h3, h4 { margin: 0 0 var(--s-3); line-height: 1.2; color: var(--c-ink); }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
p { margin: 0 0 var(--s-3); }
a { color: var(--c-green); }

/* Keyboard focus is always visible for accessibility */
:focus-visible { outline: 3px solid var(--c-teal); outline-offset: 2px; }

/* The page container centres content at a comfortable reading width */
.page-root {
  max-width: var(--maxw);
  margin: var(--s-5) auto;
  padding: 0 var(--s-4);
}

/* The two-column layout used by the Find page (filters + results) */
.split { display: grid; grid-template-columns: 280px 1fr; gap: var(--s-5); align-items: start; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
/* FUTURE: a dedicated mobile-friendly layout for the webapp - a responsive nav (hamburger /
   drawer), stacked or collapsible filters, touch-sized controls, and single-column cards.
   Captured as a future feature on request; current rules are only lightly responsive. */

.muted { color: var(--c-muted); }
.small { font-size: var(--fs-sm); }
.row { display: flex; align-items: center; gap: var(--s-3); }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.stack > * + * { margin-top: var(--s-3); }
.center { text-align: center; }
[hidden] { display: none !important; }

/* Demo banner across the very top */
.demo-banner {
  background: #fff4d6; color: #7a5b00; text-align: center;
  font-size: var(--fs-sm); padding: var(--s-2) var(--s-4);
  border-bottom: 1px solid #ecd9a0;
}
.link-btn {
  background: none; border: none; color: #7a5b00; text-decoration: underline;
  cursor: pointer; font: inherit; padding: 0 var(--s-2);
}

/* Empty-state block shown before a search or when a list is empty */
.empty-state { text-align: center; color: var(--c-muted); padding: var(--s-7) var(--s-4); }
.empty-state .big { font-size: 2.5rem; margin-bottom: var(--s-2); }