@layer base {
  /* Signed in, the shell puts the sidebar beside the frame (top bar and
     page); signed out there is only the frame. See shell.css. */
  body.shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }

  /* One explicit column, minmax(0, 1fr): the implicit one is `auto`, which
     grows to the min-content width of the page (a wide table, the top bar)
     and on a phone pushes the frame past the screen, where html and body
     clip it. */
  .shell__frame {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--nav-height) 1fr;
    min-block-size: 100vh;
    min-inline-size: 0;
  }

  #main-content {
    inline-size: 100%;
    max-inline-size: var(--content-width);
    margin-inline: auto;
    padding: var(--space-8) var(--main-padding) var(--space-12);
  }
}

@layer utilities {
  .container {
    inline-size: 100%;
    max-inline-size: var(--content-width);
    margin-inline: auto;
    padding-inline: var(--main-padding);
  }

  .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--space-6);
    gap: var(--space-4);

    h1 {
      font-size: var(--text-2xl);
      font-weight: var(--weight-semibold);
    }
  }

  .back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-link);
    margin-block-end: var(--space-2);

    &:hover {
      color: var(--color-link-hover);
    }
  }

  /* Practice show — meta bar */
  .practice-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    margin-block-end: var(--space-8);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
  }

  /* 3-column layout grid */
  .cols-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);

    @media (max-width: 60rem) {
      grid-template-columns: 1fr;
    }
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-end: var(--space-2);
  }

  .narrow-form {
    inline-size: 100%;
    max-inline-size: 32rem;
  }

  .wide-form {
    inline-size: 100%;
    max-inline-size: 48rem;
  }

  /* Document review in two panels (Fase 5): the document on the left, held
     in view while the values on the right are checked; one column on a
     narrow screen, the document first. */
  .review-split {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
  }

  .review-split__viewer {
    position: sticky;
    inset-block-start: calc(var(--nav-height) + var(--space-3));
    block-size: calc(100vh - var(--nav-height) - var(--space-6));
    border: var(--border);
    border-radius: var(--radius-md);
    background: var(--color-canvas);
    overflow: auto;
  }

  .review-split__frame {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
  }

  .review-split__image { display: block; inline-size: 100%; block-size: auto; }

  @media (max-width: 64rem) {
    .review-split { grid-template-columns: 1fr; }
    .review-split__viewer { position: static; block-size: 70vh; }
  }
}