/* layout.css — the page shell, the container, the board grid and the two
   panel layouts. Nothing here knows what a card looks like.
   See docs/02c-space-motion.md. */

/* ---- Page shell -------------------------------------------------------- */
/* Footer sits at the bottom of a short page without a fixed position. */
body {
  display: flex;
  flex-direction: column;
}

.site-main { flex: 1 0 auto; }

/* ---- Container --------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- Vertical rhythm --------------------------------------------------- */
/* --space-6 between page sections, --space-7 at the top and bottom of the
   page. The footer carries its own top margin, so the last section on a page
   does not add a second one. */
.section { margin-block: var(--space-6); }
.section:last-child { margin-block-end: 0; }
.section--first { margin-block-start: var(--space-7); }

/* ---- Board page -------------------------------------------------------- */
/* Every value between the header and the first card is a fold cost, so they
   are all one step tighter than the page rhythm elsewhere. The order is
   fixed by docs/05a-board.md: the illustrative statement comes before the
   featured panel because the featured panel is the first price on the page. */
.board-page { padding-block-start: var(--space-2); }

.board-page > .wrap > * + * { margin-block-start: var(--space-2); }

.featured {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 62rem) {
  .featured {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

/* ---- Board grid -------------------------------------------------------- */
/* auto-fill, never auto-fit: auto-fit collapses empty tracks and lets a
   single remaining card stretch to full width, which breaks the
   one-anatomy rule the moment a filter narrows the board to one result. */
.board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--board-min-col), 1fr));
  gap: var(--board-gap);
  align-items: start;
}

/* The empty state is a grid item and spans every column it is given. */
.board__empty { grid-column: 1 / -1; }

/* Below 360px a 288px minimum track would overflow the gutter. */
@media (max-width: 22.5rem) {
  .board { grid-template-columns: 1fr; }
}

/* ---- Document layout --------------------------------------------------- */
/* The market page and the four written pages. One column, capped measure. */
.doc { padding-block-start: var(--space-6); }
.doc__body > * + * { margin-block-start: var(--space-4); }
.doc__body > h2 { margin-block-start: var(--space-6); }
.doc__body > h3 { margin-block-start: var(--space-5); }

/* The measure applies to prose, not to every block in the document. A
   three-up row of contact tiles squeezed into 65ch wraps every line four
   times; a fee table does not need to be as narrow as a paragraph. */
.doc__body > p,
.doc__body > h2,
.doc__body > h3,
.doc__body > ul,
.doc__body > ol { max-width: var(--measure); }

.doc__body > .toc,
.doc__body > .table-wrap,
.doc__body > .registry { max-width: 44rem; }

.doc__body > .tiles { max-width: 62rem; }

/* ---- Market page ------------------------------------------------------- */
.market { padding-block-start: var(--space-5); }

.market__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-block-start: var(--space-5);
}

.market__head + .statement { margin-block-start: var(--space-5); }

/* The summary — probability, meter, trend and the two controls — is capped
   rather than run to the full container. A 4px meter and a pair of 44px
   controls stretched across the container read as a stretched layout, not as
   a confident one. It is a panel rather than a bare block because it carries
   the split bar, and the flag fills clear 3:1 on --surface-card and do not
   clear it on --surface-page. docs/02a-color.md. */
.market__summary {
  max-width: 46rem;
  margin-block-start: var(--space-5);
}

.market__summary > * + * { margin-block-start: var(--space-3); }
.market__summary > .chart { margin-block-start: var(--space-4); }
.market__summary > .market__positions { margin-block-start: var(--space-4); }

.market__split { margin-block-start: var(--space-5); }
.market__col > * + * { margin-block-start: var(--space-4); }
.market__prose { max-width: var(--measure); }

/* Above the two-column breakpoint the ticket sits beside the settlement
   block and stays with it while the settlement block is read. Everything
   else in the left column keeps that column as tall as the ticket, so no
   run of dead space opens up beneath it. */
@media (min-width: 60rem) {
  .market__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
    gap: var(--space-5);
    align-items: start;
  }

  .market__aside {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-4));
  }
}

@media (max-width: 59.99rem) {
  .market__aside { margin-block-start: var(--space-5); }
}