/*
 * Page shells. Both layouts render one <nav>: .kidnav for children and parents, .appbar for
 * coaches (see navigation.css). Page content sits in <main class="container page">.
 */
@layer components {
  [data-theme] {
    .site-header {
      position: relative;
      z-index: var(--z-nav);
    }

    /* Simple vertical rhythm, so views stay plain headings, paragraphs, tables and forms. */
    .page {
      padding-block: var(--space-5) var(--space-7);

      > * + * {
        margin-top: var(--space-4);
      }

      > :where(h1) + * {
        margin-top: var(--space-5);
      }

      > :where(h2) {
        margin-top: var(--space-6);
      }

      /* button_to forms are boxless elsewhere; here they take part in the rhythm. */
      > form.button_to {
        display: block;
      }

      > :where(h3) {
        margin-top: var(--space-5);
      }

      > :where(form) + :where(form) {
        margin-top: var(--space-6);
      }

      /* Sections carry their own heading, so they are spaced like one. */
      > :where(section) + :where(section) {
        margin-top: var(--space-6);
      }
    }

    /* Leaves room for the tab bar fixed to the bottom of a phone. */
    .page--kids {
      padding-bottom: 8rem;

      @media (min-width: 40rem) {
        padding-bottom: var(--space-7);
      }
    }

    /* Screens without navigation: sign in, password reset, landing. */
    .page--centered {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100dvh;
    }

    .flash-region > .flash {
      margin: var(--space-4) 0 0;
    }

    .kidnav {
      display: grid;
      border-bottom: var(--border-width) solid var(--color-border);
      background: var(--color-surface);

      .topbar {
        border-bottom: 0;
      }

      @media (min-width: 40rem) {
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 0 var(--space-4);
        padding: var(--space-2) var(--space-5) 0;

        .topbar {
          display: contents;
        }

        .wordmark {
          grid-area: 1 / 1;
        }

        .tabbar {
          grid-area: 1 / 2;
          justify-self: center;
        }

        .player-chip {
          grid-area: 1 / 3;
        }

        .account-links {
          grid-area: 2 / 1 / 3 / 4;
          margin-inline: calc(-1 * var(--space-5));
          margin-top: var(--space-2);
        }
      }
    }

    /* Grown-up actions, kept small so the child's tabs stay the obvious choice. */
    .account-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: var(--space-1) var(--space-4);
      padding: var(--space-1) var(--space-4);
      background: var(--color-surface-sunken);
      font-size: var(--text-sm);

      :where(a, .link-button) {
        display: inline-flex;
        align-items: center;
        min-height: 2.25rem;
        color: var(--color-text-muted);
        font-weight: var(--weight-strong);
        text-decoration: none;

        &:hover,
        &[aria-current="page"] {
          color: var(--color-text);
          text-decoration: underline;
        }
      }

      @media (min-width: 40rem) {
        padding-inline: var(--space-5);
      }
    }

    .link-button {
      padding: 0;
      border: 0;
      background: none;
      font: inherit;
      cursor: pointer;
    }

    /* Name/value pairs on backoffice detail pages. */
    .details {
      display: grid;
      gap: var(--space-1) var(--space-5);
      margin: var(--space-4) 0 0;
      padding: var(--card-padding);
      border: var(--border-width) solid var(--color-border);
      border-radius: var(--radius-card);
      background: var(--color-surface);

      :where(dt) {
        color: var(--color-text-muted);
        font-size: var(--text-sm);
        font-weight: var(--weight-strong);
      }

      :where(dd) {
        margin: 0;
        max-width: none;
      }

      :where(dd + dt) {
        margin-top: var(--space-3);
      }

      @media (min-width: 40rem) {
        grid-template-columns: minmax(10rem, max-content) 1fr;

        :where(dd + dt) {
          margin-top: 0;
        }

        :where(dt) {
          padding-top: 0.15em;
        }
      }
    }

    /* Plain lists of links, such as the coach's teams. */
    .link-list {
      display: grid;
      gap: var(--space-2);
      padding: 0;
      list-style: none;

      :where(li) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2) var(--space-4);
        padding: var(--space-3) var(--space-4);
        border: var(--border-width) solid var(--color-border);
        border-radius: var(--radius-card);
        background: var(--color-surface);
      }
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-3) var(--space-4);
    }

    .auth-card {
      display: flex;
      flex-direction: column;
      gap: var(--space-5);
      padding: var(--space-5);
      border: var(--border-width) solid var(--color-border);
      border-radius: var(--radius-card);
      background: var(--color-surface);
      box-shadow: var(--shadow-card);

      .wordmark {
        font-size: var(--text-2xl);
      }
    }

    .palette-picker {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
      gap: var(--space-3);
    }

    .palette-option {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-4) var(--space-3);
      border: var(--border-width) solid var(--color-border-strong);
      border-radius: var(--radius-card);
      background: var(--color-surface);
      cursor: pointer;

      :where(input) {
        width: 1.25rem;
        height: 1.25rem;
        margin: 0;
        accent-color: var(--color-brand);
      }

      &:has(:checked) {
        border-color: var(--color-brand);
        background: var(--color-brand-soft);
        box-shadow: 0 0 0 1px var(--color-brand);
      }

      &:has(:focus-visible) {
        outline: 3px solid var(--color-focus);
        outline-offset: 2px;
      }
    }

    /* Carries its own data-palette, so it shows that palette whatever the page uses. */
    .palette-option__swatch {
      width: 100%;
      height: 3rem;
      border-radius: var(--radius-md);
      background: linear-gradient(90deg, var(--p-brand) 0 50%, var(--p-accent) 50% 75%, var(--p-bg) 75%);
      box-shadow: inset 0 0 0 1px var(--p-border-strong);
    }
  }
}