/* The page's reading column. One box carries both cap and gutter, on body and footer: split across two
   elements they compute different edges once the box is wider than the cap. Both are container questions,
   so a page in a 700px pane beside a chat panel is neither phone-capped nor 15% margin. The gutter rungs
   are the pair `--lotics-page-pad` resolves between, so a list and its record share one left edge. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-page-content {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 0%;
    width: 100%;
    min-width: 0;
    min-height: 0;
  }

  .lotics-page-content__header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    margin-inline: auto;
    padding-top: var(--lotics-space-16);
    padding-inline: var(--lotics-page-pad-narrow);
  }

  .lotics-page-content__scroller {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 0%;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .lotics-page-content__viewport {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 0 auto;
    min-width: 0;
    padding-top: var(--lotics-space-16);
    padding-bottom: var(--lotics-space-8);
  }

  /* The header band above already opened the page. */
  .lotics-page-content__viewport[data-banded] {
    padding-top: 0;
  }

  .lotics-page-content__column {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    margin-inline: auto;
    padding-inline: var(--lotics-page-pad-narrow);
  }

  .lotics-page-content__body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 0%;
    min-width: 0;
    min-height: 0;
  }

  /* The rule spans the page; the content sits on the body's column. */
  .lotics-page-content__footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 0 auto;
    min-width: 0;
    border-top: 1px solid var(--border);
  }

  .lotics-page-content__footer-column {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    margin-inline: auto;
    padding-top: var(--lotics-space-16);
    padding-bottom: var(--lotics-space-24);
    padding-inline: var(--lotics-page-pad-narrow);
  }

  /* 768 is the shell's box, not the window: a capped column in a narrow pane would strand its width, and
     the wide gutter would spend 15% of a 700px pane. `fullscreen` owns the whole box, so its header takes
     no cap. */
  @container (min-width: 768px) {
    .lotics-page-content__header,
    .lotics-page-content__column,
    .lotics-page-content__footer-column {
      padding-inline: var(--lotics-page-pad-wide);
    }

    /* The cap is the component's property, not `[data-size]`, so an unsized shell still gets a reading
       column. It is the content column with the gutter added outside: under `border-box` a bare
       `max-width` spent 64px of the rung on margin, and the record page missed its two-region fork. */
    .lotics-page-content__header,
    .lotics-page-content__column,
    .lotics-page-content__footer-column {
      max-width: calc(var(--lotics-page-content-max) + 2 * var(--lotics-page-pad-wide));
    }
  }
}