/* CDL-870 · the platform surface — chrome, footer and the platform home.
 *
 * Owner ruling 2026-08-01, deck https://claude.ai/code/artifact/4e849b49-9775-4e43-8f46-f84248001920
 *   Variant B ("the doorway"), simplified: keep the serif title, drop the
 *   "Your workspace" column label, and — the main point — the footer is styled
 *   correctly and sits within the SAME BOUNDS as the header.
 *
 * Why this file exists at all. The chrome partials are shared with the auth
 * shell, but the auth shell's layout rules are scoped `.onb-shell …` — a
 * selector no platform page matches. That scoping was the whole fault: the
 * footer got no container, no centring and no spacing, and the page body never
 * adopted `--bg` / `--ink`, so the Tailwind-authored content beneath the
 * token-authored chrome tore into separate slabs the moment dark mode split
 * the two palettes apart.
 *
 * EVERYTHING here is scoped to `.platform-surface`, a body class set only when
 * `chrome_base_template` resolves to the neutral base — i.e. a platform or
 * unbound surface. A tenant site renders the same `public/base.html` body, so
 * an unscoped rule here would repaint every tenant page.
 *
 * No new colours and no new type: every value is an onboarding.css token or a
 * face already in the brand lockup.
 */

/* ---------------------------------------------------------------- shell -- */

.platform-surface {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------------- measure -- */
/* One column width from the header to the footer. `--pchrome-measure` is the
   single source for it, so the two can never drift. */
.platform-surface { --pchrome-measure: 1180px; --pchrome-gutter: 24px; }

.pchrome {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.pchrome-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--pchrome-measure, 1180px);
  margin: 0 auto;
  padding: 16px var(--pchrome-gutter, 24px);
  min-height: 32px;
}
/* Unpin the two marks the auth shell fixes to the viewport. */
.pchrome .onb-brand,
.pchrome .onb-affordances {
  position: static;
  top: auto; left: auto; right: auto;
  z-index: auto;
}

/* -------------------------------------------------------------- footer -- */
/* One markup, two layouts. The auth shell keeps its centred column — that page
   is a full-screen card and a centred footer belongs to it. */
.onb-shell .onb-auth-footer .pfoot-in {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

/* On a platform page the footer takes the header's own measure and gutter, so
   the entity line and the legal links land on the header's left and right
   edges. This is the owner's "same bounds as the header". */
.platform-surface .onb-auth-footer {
  margin-top: auto;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  color: var(--ink-4);
  font-size: 11.5px;
  text-align: left;
}
.platform-surface .onb-auth-footer .pfoot-in {
  max-width: var(--pchrome-measure, 1180px);
  margin: 0 auto;
  padding: 0 var(--pchrome-gutter, 24px);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
}
.platform-surface .onb-auth-footer a,
.platform-surface .onb-auth-footer .onb-auth-footer-btn {
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.platform-surface .pfoot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

/* `Cookie settings` is a <button> among <a>s — strip the control affordances so
   it reads as the sibling link it is. */
.onb-auth-footer-btn {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------- the platform home --- */
/* Variant B as ratified. CDL-873 — "centre it" meant centre the PAGE in the
   viewport, not centre the text: the composition stays Variant B's left-aligned
   masthead with the door set apart behind a hairline, and the whole block is
   centred vertically in the space between header and footer. The eyebrow stays
   removed (CDL-871). */

.platform-surface main { flex: 1; display: flex; flex-direction: column; }
.phome {
  flex: 1;                 /* fill the space between header and footer … */
  display: flex;
  align-items: center;     /* … and sit in the middle of it */
  padding: clamp(40px, 6vh, 72px) 0;
}
.phome-wrap {
  width: 100%;
  max-width: var(--pchrome-measure, 1180px);
  margin: 0 auto;
  padding: 0 var(--pchrome-gutter, 24px);
}
.phome-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
}
/* Owner ruling: the serif title stays. `Source Serif 4` is already the face of
   the wordmark, so it is not a new voice on the page. */
.phome-title {
  margin: 0 0 20px;
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: clamp(44px, 6vw, 76px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--ink);
}
.phome-sub {
  margin: 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-3);
  text-wrap: pretty;
}
/* Owner ruling: no column label — the button alone. */
.phome-door {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 6px;
  padding-left: clamp(24px, 3vw, 40px);
  border-left: 1px solid var(--line);
}
.phome-door .onb-btn { text-decoration: none; }

@media (max-width: 860px) {
  .phome-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    align-items: start;
  }
  .phome-door {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 28px;
  }
}
@media (max-width: 640px) {
  .pchrome-row { padding: 12px 16px; }
  .platform-surface { --pchrome-gutter: 16px; }
}