/* The legal footer: Terms, Privacy and Contact on the app's first screen. services/bff/src/landing.ts injectLegal writes the markup
   into the two shell documents (/chat, the desktop's, and /?sbw-shell=phone, the phone's boot page), apps/host/src/landing-theme-client.ts
   (legalFooterBoot) takes it away once the visitor is in the app, and the build copies this file to /landing/legal.css. Host-owned:
   the vendored apps are not touched, and none of their rules reach it (every selector starts at .sbw-legal, which nothing else uses).

   Look plan. Surface: mobile web + landing page. The footer is a quiet utility row, not a feature: it carries no picture, no
   button and no accent.
   - Palette, four named values per scheme, the same ones the ad card paints (landing.css), all from the boot palette
     (apps/host/src/boot-palette.json) except the hairline, which is the app's own (vendor/superbot-mobile src/design-system/themes.ts):
       dark phone    canvas #000000   ink #ececec   muted #b3b3b3   hairline #2a2a2a
       dark desktop  canvas #0d0d0d   ink #e6e8ee   muted #b0b4bf   hairline #2a2a2a
       light         canvas #faf8f3   ink #141310   muted #5f5b52   hairline #e3dfd6
     The scheme is the one the page already resolved: <html data-scheme> when the page states it, else the browser's
     prefers-color-scheme; every ground that is not light takes the dark set (landing.css, build.mjs bootPanelCss).
   - Accent: none. A link is the muted ink with a 1px underline; hover and keyboard focus raise it to the ink (focus adds a 2px
     ink ring). One accent at most is the rule; the footer spends none, so the ad card's Continue stays the only one.
   - Type: one family, the boot page's "SF Pro Rounded", ui-rounded, system-ui (no font file ships), 14/20 at 400 (text-body-medium).
   - Radius: none but the focus ring's 4px (radius-4). No shadow, no gradient, no card.
   - Size: a 48px row (spacing-48, the touch floor) plus the bottom safe-area inset; each link is 48px tall and at least 48px wide.
   - Motion: none. Nothing animates, so there is no reduced-motion branch to guard.

   THE BAND. The footer is fixed to the bottom of the viewport, over the app's own controls (the phone look step's Continue sits on the
   bottom safe area, the composer under it), so while the head script states <html data-sbw-legal> the app's <body> gives up the
   footer's height at its bottom edge (padding-bottom, border-box: inside the body's own height whether the page fixes the body to the
   viewport, as the phone's web-base.css does, or leaves it in the flow at 100%, as the desktop renderer does; the PWA install nudge
   reserves its band the same way, at the top). The app lays itself out in what is left, so nothing of it sits under the footer. The
   ad card's fixed layer ends above the footer (landing.css). When the head script removes the footer it removes the attribute, and the
   band is given back. With no script nothing is behind the footer to cover.

   Every number is a design-tokens value (~/.cosmos/skills/design-tokens/dist/tokens.css): spacing 4, 8, 16, 24 and 48; radius-4;
   text-body-medium 14/20. The 1px hairline and underline are borders, not spacing. */

:root {
  /* The footer's height: the 48px row and the bottom safe area (viewport-fit=cover makes the inset non-zero on a notched phone). */
  --sbw-legal-h: calc(48px + env(safe-area-inset-bottom, 0px));
}

.sbw-legal {
  --lg-bg: #faf8f3;
  --lg-fg: #141310;
  --lg-muted: #5f5b52;
  --lg-line: #e3dfd6;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Under the edge bands (build.mjs edgeBandCss, 2147483647), level with the ad card's layer, which ends above this one. */
  z-index: 2147483646;
  box-sizing: border-box;
  height: var(--sbw-legal-h);
  margin: 0;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--lg-line);
  background-color: var(--lg-bg);
  color: var(--lg-muted);
  font-family: "SF Pro Rounded", ui-rounded, system-ui, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-color-scheme: dark) {
  html:not([data-scheme]) .sbw-legal {
    --lg-bg: #000000;
    --lg-fg: #ececec;
    --lg-muted: #b3b3b3;
    --lg-line: #2a2a2a;
  }
  html:not([data-scheme]) .sbw-legal[data-shell='desktop'] {
    --lg-bg: #0d0d0d;
    --lg-fg: #e6e8ee;
    --lg-muted: #b0b4bf;
  }
}

html[data-scheme]:not([data-scheme='light']) .sbw-legal {
  --lg-bg: #000000;
  --lg-fg: #ececec;
  --lg-muted: #b3b3b3;
  --lg-line: #2a2a2a;
}

html[data-scheme]:not([data-scheme='light']) .sbw-legal[data-shell='desktop'] {
  --lg-bg: #0d0d0d;
  --lg-fg: #e6e8ee;
  --lg-muted: #b0b4bf;
}

/* A reload of a page the visitor already took past its first screen never shows the footer, and reserves no band. */
html[data-sbw-legal-skip] .sbw-legal {
  display: none;
}

.sbw-legal nav {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 8px;
}

.sbw-legal a {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 48px;
  height: 48px;
  padding: 0 8px;
  color: var(--lg-muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .sbw-legal a:hover {
    color: var(--lg-fg);
  }
}

.sbw-legal a:focus-visible {
  color: var(--lg-fg);
  outline: 2px solid var(--lg-fg);
  outline-offset: -2px;
  border-radius: 4px;
}

/* The band: the app's body gives up the footer's height at its bottom edge while the footer is live. */
html[data-sbw-legal] body {
  box-sizing: border-box;
  padding-bottom: var(--sbw-legal-h);
}

/* The phone's keyboard follow (web-base.css html[data-sbw-vv-follow]): the visible area ends where the keyboard starts, the footer
   would sit under it, so it steps aside and gives the band back while a field has focus. */
html[data-sbw-legal][data-sbw-vv-follow] body {
  padding-bottom: 0;
}

html[data-sbw-vv-follow] .sbw-legal {
  display: none;
}