/* Layout
 * Page scaffolding that did not exist in the prototype.
 *
 * Everything the prototype already styled — the header, the stat row, the
 * wheel, the charts — lives in its own component file next to this one,
 * lifted unchanged. This file is only for what the rewrite added: the
 * background canvas, the stacking context it needs, and the development
 * banner.
 *
 * Every colour resolves through a token in tokens.css.
 */

/* ---------- background canvas ---------- */
/* Sits behind all content and never takes a click. Stays hidden unless
   background-canvas.js selects a mode, so the CSS star field on <body> shows
   through untouched — that field is the original design, not a fallback. */
.bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.bg-canvas[hidden] { display: none; }

/* Content stacks above the canvas. The sticky header sets its own z-index. */
/* The page fills the viewport at minimum, so the footer sits at the bottom of
   a short page instead of floating up under the content — /invite-required and
   a signed-out /signin are both far shorter than a screen.
 *
 * dvh, not vh: on iOS the browser chrome expands and contracts as you scroll,
 * and 100vh is the LARGEST of those states. Using it leaves a strip of the
 * footer below the fold on first paint and a page that scrolls when it has no
 * business scrolling. dvh tracks the real viewport. vh stays first as the
 * fallback for anything that does not know dvh.
 *
 * This app is installed to home screens, where that difference is the whole
 * visible frame. */
.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* A flex item's min-width defaults to `auto`, meaning "never smaller than my
   content" — so making .page-content a flex column let the home page's
   widest child push the whole document 244px past the right edge of a phone,
   where block layout had been constraining it. Measured, not guessed. */

/* Takes the slack, so the footer is pushed to the bottom rather than pinned
   there — a long page still scrolls past it normally.
 *
 * flex-shrink 0 matters: without it a tall page's content would be squeezed to
 * fit the viewport instead of overflowing it, which is the classic way this
 * pattern goes wrong. The padding is the gap that used to be the footer's
 * margin-top; as a margin it would have collapsed to nothing here. */
/* The 48px gap above the footer, and — since the footer sits below it — the
   clearance the save pill needs too.
 *
 * That clearance used to be `padding-bottom: 56px` on <body>, put there
 * because the pill is `position: fixed` near the bottom of the window and the
 * last of the content has to scroll clear of it. The footer now does that job
   by existing: the last content element ends 121px above the bottom of the
   document, comfortably past the pill. The pill can still pass over the
   footer itself, which is decorative and transient enough not to matter —
   and giving the footer its own gutter made it visibly taller on the home
   page than on every other, which was worse than the thing it fixed. */
.page-content { flex: 1 0 auto; padding-bottom: 48px; }

/* Only the pages that centre a card in the space above the footer become flex
   columns.
 *
 * This was briefly applied to .page-content on every page, which broke the
 * home page at phone width: `.wrap` has `margin: 0 auto`, and an auto margin
 * in the cross axis DISABLES `align-items: stretch`. It sized to its content
 * instead of the viewport and pushed the document 244px wide. Nothing needs
 * the flex column except the auth pages, whose only child is the card. */
.page-center .page-content { display: flex; flex-direction: column; }

/* ---------- page shell ---------- */
.wrap {
  max-width: 900px; margin: 0 auto;
  padding-left: calc(18px + env(safe-area-inset-left, 0px));
  padding-right: calc(18px + env(safe-area-inset-right, 0px));
}

/* ---------- development banner ---------- */
/* Only ever rendered when the server runs with SEVENF_DEV=1. Deliberately
   loud: if this is visible in production, something is wrong with the build. */
.devbanner {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 50;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  font-size: 13.5px;
  box-shadow: var(--shadow-card);
}
.devbanner.show { display: inline-flex; }

/* ---------- site footer ---------- */
/*
 * © MMFP Solutions, the VEO mark, and the running version. Mirrors GSSM's
 * footer in content and in the glyph's geometry, but not in its construction:
 * that one carries inline styles and an inline script that fetches the version
 * from an API. Both are out here — hard rules 1 and 2 — and neither is needed,
 * because Version is already on PageData and comes from the VERSION file at
 * build time. One less request, and it cannot disagree with the binary.
 */

.sitefoot {
  flex: none;
  border-top: 1px solid var(--line);
  /* The bottom inset is the home indicator on a notched iPhone — without it
     the footer sits under the bar you swipe to leave the app. */
  padding: 18px 0 calc(28px + env(safe-area-inset-bottom, 0px));
}

.sitefoot-inner {
  max-width: 900px;
  margin: 0 auto;
  padding-left: calc(18px + env(safe-area-inset-left, 0px));
  padding-right: calc(18px + env(safe-area-inset-right, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-faint);
}

.sitefoot-brand { display: flex; align-items: center; gap: 6px; }
.sitefoot-brand a { color: var(--accent-ink); text-decoration: none; }
.sitefoot-brand a:hover { text-decoration: underline; }

/* currentColor, so the mark inherits the muted footer ink and themes itself
   in light and dark without a second colour to keep in step. */
.veo-tag { margin-left: 4px; opacity: .65; color: currentColor; }

.sitefoot-meta { flex: none; display: flex; align-items: center; gap: 6px; }
.sitefoot-meta a { color: var(--ink-faint); text-decoration: none; }
.sitefoot-meta a:hover { color: var(--accent-ink); text-decoration: underline; }
.sitefoot-sep { opacity: .5; }
.sitefoot-version { font-variant-numeric: tabular-nums; }

@media (max-width: 480px) {
  /* Four items is too many for 390px on one line, so let it wrap and centre
     both halves rather than leaving the version stranded against the edge. */
  .sitefoot-inner {
    padding: 0 16px;
    font-size: 12.5px;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
}