/* The frame: header, bottom bar, page gutters, footer.
 *
 * Navigation is split by device on purpose. A phone gets a thumb-reachable bar
 * at the bottom — the pattern every marketplace app uses, because the top of a
 * 6-inch screen is not reachable one-handed. A desktop gets the same links in
 * the header, where a pointer already is, and the bottom bar disappears.
 */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-4);
}
@media (min-width: 48rem) { .wrap { padding-inline: var(--s-6); } }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.brand {
  font-weight: 800;
  font-size: var(--t-md);
  letter-spacing: -0.03em;
  color: var(--ink);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  /* The mark is only ~26px, so the padding is what makes home a 44px target.
   * The header centres its row, so the extra height costs no layout. */
  padding-block: 0.56rem;
}
.brand-mark {
  width: 1.65rem; height: 1.65rem;
  border-radius: 9px;
  background: var(--ink);
  color: #fff;
  display: grid; place-items: center;
  font-size: 0.8rem; font-weight: 800;
  flex: none;
}
.brand span { color: var(--gold); }

/* "Beta" pill beside the wordmark: live, but improvements ongoing. Overrides
 * the gold .brand span colour above since it is itself a span. */
.brand .beta-badge {
  color: var(--ok);
  background: var(--ok-soft);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  border-radius: 999px;
  align-self: flex-start;
  margin-top: 0.1rem;
  flex: none;
}

.site-header nav {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--s-1);
}
/* The header's own links are desktop-only; on a phone they live in the bottom
 * bar instead, so the header keeps room for the brand and the search. */
.nav-link { display: none; }
@media (min-width: 48rem) {
  .nav-link {
    display: inline-flex;
    padding: 0.5rem 0.7rem;
    border-radius: var(--r-sm);
    font-size: var(--t-base);
    font-weight: 600;
    color: var(--ink-2);
    transition: background var(--ease), color var(--ease);
  }
  .nav-link:hover { background: var(--surface-2); color: var(--ink); }
  .nav-link[aria-current="page"] { color: var(--ink); background: var(--surface-2); }
}

/* ── Bottom bar (phones) ────────────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--bottomnav-h);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--muted);
}
.bottom-nav a[aria-current="page"] { color: var(--ink); }
.bottom-nav a[aria-current="page"] svg { stroke: var(--gold); }
.bottom-nav svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.bottom-nav .is-cta { color: var(--ink); }
.bottom-nav .is-cta svg { stroke: var(--gold); }

@media (min-width: 48rem) {
  .bottom-nav { display: none; }
  body { padding-bottom: 0; }
}

/* ── Page body ──────────────────────────────────────────────────────────── */
main { display: block; padding-block: var(--s-5) var(--s-10); }

.stack > * + * { margin-top: var(--s-4); }

.back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--muted);
  padding: var(--s-2) 0;
  min-height: 44px;                 /* a real tap target, not just text */
  white-space: nowrap;
}
/* Without an explicit size an inline SVG falls back to 300x150 and shoves the
   label onto three lines. */
.back svg {
  width: 18px; height: 18px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 2;
}
.back:hover { color: var(--ink); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-block: var(--s-8);
  margin-top: var(--s-10);
}
.site-footer .wrap { display: grid; gap: var(--s-2); }
.site-footer p { font-size: var(--t-sm); color: var(--muted); }
.site-footer strong { color: var(--ink); }
/* Negative margin keeps the row looking the same while the padding grows each
 * link to a 44px target — a line of text is only ~23px tall, which is a miss
 * for a thumb. The gap carries the extra padding so they can't overlap. */
.footer-links {
  display: flex; flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  margin-top: calc(var(--s-2) - 0.6rem);
  margin-bottom: -0.6rem;
}
.footer-links a {
  font-weight: 600; color: var(--ink-2);
  padding-block: 0.6rem;
}
.footer-links a:hover { color: var(--gold); }