/*
 * THE PAGE'S READING COLUMN. One box carries the cap AND the gutter, on the body
 * and on the footer alike: split across two elements — the padding outside, the
 * cap inside — they compute different edges the moment a cap is in play and the
 * box is wider than it, which is how a footer's totals came to sit 32px off the
 * column they total.
 *
 * The cap and the gutter are both CONTAINER questions, so the shell establishes
 * one: a page in a 700px pane beside an open chat panel is not capped to a
 * phone's column, and does not spend 15% of the pane on margin either. The
 * gutter's rungs are the PAIR `--lotics-page-pad` resolves between, so a list
 * and the record it opens share one left edge and a theme that moves the pair
 * moves both; the token itself is that pair read off a media query, which is the
 * only axis a `:root` declaration has.
 */
@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%;
    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 the scroller 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 own box, not the window — for BOTH rungs below. A capped
   * column inside a narrow pane would leave the pane's remaining width unusable,
   * which is the case `size` exists to avoid rather than to create; and a page
   * in a 700px pane beside an open chat panel spends 15% of it on margin if it
   * takes the wide gutter. `fullscreen` owns the whole box by definition, 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 TO DECIDE, and the sheet reads what it wrote.
     * Bound to `[data-size]` instead, a shell that named no job rendered
     * uncapped — the one screen nobody sized was the one screen with no reading
     * column — and the attribute said "capped" while the property that does the
     * capping was never written. `fullscreen` owns the whole box by definition,
     * so its header never carries the property and there is nothing to read.
     *
     * THE CAP IS THE CONTENT COLUMN, and the gutter is added OUTSIDE it. Every
     * kit box is `border-box`, so a bare `max-width` made the rung the padded
     * box and spent 64 of it on margin: the register rung reached the record
     * page as 976, under the 1016 its own two-region fork asks for, and a
     * record inside the shell never opened its facts aside. A job's number is
     * now the width the reader's content is, which is what the rung MEANS.
     */
    .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));
    }
  }
}