/* The centered shell: the logged-in shell without its sidebar, one centered
   column under a header that carries ReadyNext's name, with a footer. Two
   frames are drawn in it -- every logged-out page (shared/_logged_out_shell,
   logged_out.css) and onboarding (layouts/onboarding, onboarding.css) -- so
   a visitor who signs up walks from one into the other without the frame
   changing under them. What only one of them wants lives in its own file.

   It is the real app shell -- .app-shell > .app-body > .app-header +
   .app-main + .app-footer -- carrying .app-shell--centered, so header.css
   draws the bar and its bottom rule exactly as it does for a User, and
   everything below hangs off that one modifier.

   Everything keeps .app-main's 64rem guardrail. The header and footer take
   it too, centered over the column, so their rules span the same box as the
   content: .app-header's 1.25rem inset against .app-main's 2rem gutter
   leaves each rule overhanging the content by 0.75rem a side, and the
   rows' own 0.75rem puts what they hold on the content's edges. On a phone
   nothing is capped, as .app-main is not, and header.css runs both rules
   edge to edge and gutters both rows. Each frame narrows its own column
   inside.

   Written flat, not nested: this shell draws the page shown to a browser
   too old for ReadyNext (unauthenticated.md B-10), and those are the
   browsers that cannot read nested CSS. header.css's header block is flat
   for the same reason.

   Sizing note: media queries resolve rem against 16px whatever the root
   font-size, which steps from 16px to 20px (application.css), so 40rem in a
   query is 640px. */

/* .app-main's own padding, so the page starts as far under the header as
   a logged-in page does. */
.app-shell--centered .app-main {
  margin-inline: auto;
}

/* The name at the start of the row, where the logged-in header has none. */
.app-shell--centered .app-header .inner {
  justify-content: space-between;
}

/* The flash sits after the name, where the logged-in header starts its own
   (header.css draws it, and on a phone moves it under the bar). */
.app-shell--centered .app-header .header-flash-region {
  margin-inline: 1rem auto;
}

/* ---------- The name ---------- */

/* Logged out it is a link home (shared/_brand), drawn as the name all the
   same. */
.app-shell--centered .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding-right: 0.6rem;
}

/* The initials the collapsed sidebar shows in place of the name, here
   beside it as a filled mark. */
.app-shell--centered .brand .tile {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--radius-sm);
  background: var(--color-warm-accent);
  color: var(--color-on-accent);
  font-size: 0.8rem;
}

/* ---------- The footer ---------- */

/* header.css gives it the header's inset; its rule is on the top edge. What
   it holds sits at the end of the row, as the controls do in the header. */
.app-shell--centered .app-footer .inner {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--color-warm-border-strong);
}

/* ---------- Wide: the 64rem guardrail ---------- */

/* 641px and up, where .app-main keeps its cap. */
@media (min-width: 40.0625rem) {
  .app-shell--centered .app-header,
  .app-shell--centered .app-footer {
    width: 100%;
    max-width: 64rem;
    margin-inline: auto;
  }

  /* Off the spacing scale on purpose: 0.75rem is .app-main's 2rem gutter
     less .app-header's 1.25rem inset, the one length that puts the rows'
     ends on the content's edges. */
  .app-shell--centered .app-header .inner,
  .app-shell--centered .app-footer .inner {
    padding-inline: 0.75rem;
  }
}

/* ---------- Phone ---------- */

/* 640px, the app's phone layout. header.css drops the header's and the
   footer's inset and gutters their rows. The logged-in 5rem bottom
   padding clears a floating add button this shell does not have. */
@media (max-width: 40rem) {
  .app-shell--centered .app-main {
    padding-bottom: 3rem;
  }
}