/*
 * Layout styles.
 * Page structure, containers, grid systems.
 */
@layer base {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    background: var(--surface-0);
    color: var(--text-on-surface-0);
    font-family: var(--font-sans);
    font-size: var(--text-normal);
    line-height: 1.5;
  }

  a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-skip-ink: auto;
  }

  :focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }
}

@layer components {
  /*
   * Application layout
   * Standard layout with header, main content, and optional footer
   */
  .layout-app {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-block-size: 100dvh;
  }

  .layout-app__header {
    padding-block-start: env(safe-area-inset-top, 0);
  }

  .layout-app__main {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .pad-sections > section {
    padding-inline: var(--main-padding);
  }

  .layout-app__footer {
    padding-block-end: env(safe-area-inset-bottom, 0);
  }

  /*
   * Authentication layout
   * Centered card for sign in, sign up, password reset, etc.
   */
  .layout-auth {
    display: grid;
    grid-template-rows: 1fr auto;
    min-block-size: 100dvh;
    padding: var(--main-padding);
    padding-block-start: calc(var(--main-padding) + env(safe-area-inset-top, 0));
    padding-block-end: calc(var(--main-padding) + env(safe-area-inset-bottom, 0));
  }

  .layout-auth__container {
    align-self: center;
    inline-size: 100%;
    justify-self: center;
  }

  .layout-auth__footer {
    justify-self: center;
  }
}