/* Site footer — single-line chrome with unified adaptive type */

:root {
  --footer-bg: var(--shell-frame-bg);
  --footer-border: var(--shell-chrome-hairline);
  --footer-fg: var(--shell-chrome-fg);
  --footer-muted: var(--shell-chrome-muted);
  --footer-pad-x: var(--shell-gutter);
  --footer-line-height: 1.35;
  --footer-tracking: var(--shell-chrome-tracking);
  --footer-item-radius: 8px;
  --footer-min-height: var(--topbar-height, 52px);
}

[data-theme="dark"] {
  --footer-bg: var(--shell-frame-bg);
  --footer-border: var(--shell-chrome-hairline);
}

.site-footer {
  flex-shrink: 0;
  margin-top: auto;
  border-top: 0.7px solid var(--footer-border);
  background: var(--footer-bg);
  color: var(--footer-fg);
  font-family: var(--font-stack-body);
  -webkit-font-smoothing: antialiased;
}

.site-footer__inner {
  container-type: inline-size;
  container-name: site-footer;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.375rem, 0.25rem + 0.65cqi, 0.75rem);
  width: 100%;
  min-height: var(--footer-min-height);
  padding: 0 var(--footer-pad-x);
  --footer-type-size: var(--kit-fs-sm);
  --footer-item-pad-x: clamp(0.25rem, 0.12rem + 0.42cqi, 0.75rem);
  --footer-item-pad-y: clamp(0.2rem, 0.12rem + 0.18cqi, 0.375rem);
  --footer-nav-gap: clamp(0.0625rem, -0.05rem + 0.34cqi, 0.75rem);
}

/* Product + marketing pages — same white canvas as homepage / kit */
body:has(.app-shell) .site-footer,
body:has(.page-shell) .site-footer {
  background: var(--shell-frame-bg);
  border-top: 0.7px solid var(--footer-border);
}

body:has(.app-shell) .site-footer__inner,
body:has(.page-shell) .site-footer__inner {
  padding: 0 var(--footer-pad-x);
}

body:has(.app-shell) .site-footer__brand,
body:has(.app-shell) .site-footer__nav,
body:has(.app-shell) .site-footer__note,
body:has(.page-shell) .site-footer__brand,
body:has(.page-shell) .site-footer__nav,
body:has(.page-shell) .site-footer__note {
  background: transparent;
}

/* Static marketing pages — same footer inset as kit / homepage */
.page-shell > .site-footer .site-footer__inner,
.page-shell + .site-footer .site-footer__inner {
  padding-inline: var(--footer-pad-x);
}

.site-footer__brand,
.site-footer__nav a,
.site-footer__note,
.site-footer__note-long,
.site-footer__note-short {
  font-family: var(--font-body);
  font-size: var(--footer-type-size);
  line-height: var(--footer-line-height);
  letter-spacing: var(--footer-tracking);
}

.site-footer__brand {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  margin: 0;
  font-weight: var(--font-medium);
  color: var(--footer-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-footer__brand::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: var(--brand-mark, url("/assets/top20-mark.svg?v=6")) center / contain no-repeat;
}

.site-footer__nav {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: var(--footer-nav-gap);
  min-width: 0;
  overflow: hidden;
}

.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: calc(var(--footer-type-size) * var(--footer-line-height) + var(--footer-item-pad-y) * 2);
  padding: var(--footer-item-pad-y) var(--footer-item-pad-x);
  border-radius: var(--footer-item-radius);
  font-weight: var(--font-regular);
  color: var(--footer-muted);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color 140ms ease-out,
    background-color 140ms ease-out;
}

.site-footer__nav a:hover {
  color: var(--footer-fg);
  background: color-mix(in srgb, var(--footer-fg) 5%, transparent);
}

[data-theme="dark"] .site-footer__nav a:hover {
  background: color-mix(in srgb, var(--footer-fg) 8%, transparent);
}

.site-footer__note {
  flex: 0 0 auto;
  margin: 0;
  font-weight: var(--font-regular);
  font-variant-numeric: tabular-nums;
  color: var(--footer-muted);
  white-space: nowrap;
}

.site-footer__note-short {
  display: none;
}

@container site-footer (max-width: 34rem) {
  .site-footer__note-long {
    display: none;
  }

  .site-footer__note-short {
    display: inline;
  }
}

@media (max-width: 768px) {
  body:has(.app-shell) .site-footer__inner {
    padding: var(--space-2) var(--space-3);
  }

  .site-footer__inner {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--space-2);
    min-height: auto;
    padding-block: var(--space-2);
  }

  .site-footer__brand {
    flex: 1 1 auto;
    justify-content: center;
    max-width: 100%;
  }

  .site-footer__nav {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
    row-gap: 0;
    column-gap: clamp(0.125rem, 1vw, 0.5rem);
  }

  .site-footer__note {
    flex: 1 1 100%;
    text-align: center;
    white-space: normal;
  }
}

@media (max-width: 640px) {
  :root {
    --footer-pad-x: var(--space-3);
  }
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

#app {
  flex: 1;
}

.page-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
}