/* The credit and the legal links at the end of every page, and the status bar under every page: both as on
   docs.compass-platform.dev (apps/docs/src/styles.ts, .site-footer, its links and .status-bar), in the film
   page's own tokens (--ink, --ink-2, --line, --raised, --ember, --ember-ink, --type-body, dark first with a light
   block); the legal pages define the same tokens below. The fallbacks are the film page's dark values. */
:root { --status-bar-height: 30px; }

/* Clear the fixed status bar, as docs does: nothing is ever hidden behind it. Recording mode keeps its own
   padding (html.recording body outranks this rule). */
body { padding-bottom: calc(var(--status-bar-height) + 1px + env(safe-area-inset-bottom, 0px)); }

/* An ordinary footer in the page's flow, after its last content, so it never covers anything and a reader
   reaches it by scrolling (operator, 2026-10-19). It lines up with the page's content column, and stacks like
   the film page's .app so the page's fixed watermark stays behind it. */
.legal-links {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: var(--legal-column, 1240px);
  margin: 5.5rem auto 0;
  padding: 2.2rem 0 3rem;
  border-top: 1px solid var(--line, rgb(242 237 227 / 12%));
  color: var(--ink-2, rgb(242 237 227 / 64%));
  font-family: var(--type-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-size: 0.85rem;
  line-height: 1.6;
}
.legal-links a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--ember-ink, #eca068) 55%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 140ms ease;
}
.legal-links a:hover { text-decoration-color: var(--ember-ink, #eca068); }

/* The status bar: slim, fixed, branding only, never a tap target. */
.status-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  background: color-mix(in oklab, var(--raised, #242424) 88%, transparent);
  border-top: 1px solid var(--line, rgb(242 237 227 / 12%));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  pointer-events: none;
  /* docs' body sets these and its bar inherits them; the film page's body does not */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .status-bar {
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .status-bar { background: var(--raised, #242424); }
}
/* Scoped to the bar so that a page rule such as .legal p (0,1,1) cannot give the line a margin: the bar
   keeps exactly the height the body padding clears. */
.status-bar .status-line {
  margin: 0;
  height: var(--status-bar-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  font-family: var(--type-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--ink-2, rgb(242 237 227 / 64%));
  white-space: nowrap;
}
.status-line .status-wordmark { color: var(--ink-2, rgb(242 237 227 / 64%)); font-weight: 500; }
.status-mark { display: inline-flex; align-items: center; }
.status-mark svg { height: 0.95rem; width: auto; display: block; }
.status-mark .p-stem, .status-mark .p-bowl { fill: var(--mark-ink, var(--ink, #f2ede3)); }
.status-mark .p-dot { fill: var(--mark-dot, var(--ember, #de8d51)); }

/* Video renders show the film only: the recording hashes (#aufnahme-*) set html.recording. */
html.recording .status-bar { display: none !important; }

/* Impressum and Datenschutz: the film page's ground, ink and ember, system type, one reading column. */
.legal {
  --ground: #1b1b1b;
  --raised: #242424;
  --ink: #f2ede3;
  --ink-2: color-mix(in oklab, var(--ink) 64%, transparent);
  --line: color-mix(in oklab, var(--ink) 12%, transparent);
  --ember: #de8d51;
  --ember-ink: #eca068;
  --legal-column: 680px;
  color-scheme: dark;
  margin: 0;
  padding: 40px 16px;
  padding-bottom: calc(var(--status-bar-height) + 1px + env(safe-area-inset-bottom, 0px));
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: light) {
  .legal { --ground: #f2ede3; --raised: #f8f5ee; --ink: #1b1b1b; --ember-ink: #9a5221; color-scheme: light; }
}
.legal main { max-width: 680px; margin: 0 auto; }
.legal h1 { font-size: 30px; line-height: 1.2; margin: 0 0 24px; }
.legal h2 { font-size: 19px; line-height: 1.3; margin: 32px 0 8px; }
.legal p, .legal ul { margin: 0 0 12px; }
.legal main a { color: var(--ember-ink); overflow-wrap: anywhere; }
.legal .back { margin-top: 40px; }