/* ─────────────────────────────────────────────────────────────────────────────
   Demo-owned layer that reconciles the vendored marketing stylesheet (site.css)
   with the full-page application shell.

   site.css is VENDORED and must not be edited here (see its header), but it was
   written for marketing pages: it styles the bare `section` element with big
   vertical padding and a top border, and it expects content to sit inside a
   `.container`/`.wrap` width box. The demo page is now a full-page application —
   the shell owns everything between the site header and footer, and its internal
   markup uses <section> — so those marketing rules bled into the app as stray
   rules and dead vertical gaps.

   This file scopes the marketing design system back to the site chrome only.
   Load order: site.css -> chrome.css -> content-trust-workspace.css.
   ───────────────────────────────────────────────────────────────────────────── */

/* The application region owns its own layout. Neutralise the marketing `section`
   rule (84px padding + border-top) inside the shell; the workspace stylesheet
   sets its own spacing for the surfaces it renders.
   
   `:not([class])` is load-bearing. This was `#app section`, an ID selector, which
   beats any class — so it did not merely neutralise the marketing rule, it also
   blocked the workspace from SETTING padding on its own panels. Every panel
   rendered with zero left padding, text flush against its 3px accent rule, and no
   amount of class specificity in the workspace stylesheet could win.
   
   Restricting it to unclassed sections keeps the intent (a bare <section> inside
   the shell is not a marketing band) while letting a classed panel style itself. */
#app section:not([class]) {
  padding: 0;
  border-top: 0;
}

/* The shell is a full-bleed application surface, not a centred prose column. */
#app {
  display: block;
  width: 100%;
}

/* The footer kept its `.wrap`-era width box when the marketing <main class="wrap">
   was removed; restore it on the footer's own container so the chrome stays
   centred and aligned with the site header. */
.site-footer .inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px 24px;
}

.site-footer .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-footer .links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

/* Keep the site header's bar aligned to the same width box as the footer. */
.site-header .bar {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}