@layer base {
  /* The ground is the canvas everywhere, in light and dark. Set on the body: the tokens are resolved on the root. */
  body {
    --color-page: var(--color-canvas);
    --color-body: var(--color-canvas);
  }

  body.public #footer {
    color: var(--color-ink-medium);
    font-size: var(--text-small);
    margin-top: 4rem;
    padding: 2rem 1rem 1.5rem;
    text-align: center;
  }

  @media screen {
    body:not(.public) #main > :first-child {
      margin-block-start: 0;

      &:not(.project, .verdict) > :first-child,
      &:not(.project, .verdict) > div:not([class]):first-child > :first-child {
        margin-block-start: 0;
      }
    }
  }

  .toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block: 0.25rem 1rem;
  }

  .validity {
    :is(.validity__none, .validity__dates, .validity__term, .validity__monthly, .validity__yearly) {
      display: none;
    }

    &:has(option[value="none"]:checked) .validity__none,
    &:has(option[value="dates"]:checked) .validity__dates,
    &:has(option[value="term"]:checked) .validity__term,
    &:has(option[value="monthly"]:checked) .validity__monthly,
    &:has(option[value="yearly"]:checked) .validity__yearly {
      display: block;
    }
  }

  .unread-dot {
    background-color: var(--color-link);
    block-size: 0.5em;
    border-radius: 50%;
    display: inline-block;
    flex: none;
    inline-size: 0.5em;
    margin-inline-start: 0.35em;
    vertical-align: middle;
  }
}

@layer components {
  .btn {
    line-height: normal;
  }

  /* A paper sheet sizes its own fields, on the public layout too. */
  .public form:not(.paper__page) .input {
    font-size: var(--text-large);
  }

  .input--inline {
    inline-size: auto;
    vertical-align: middle;
  }

  /* Validation feedback only after interaction */
  .input:user-invalid {
    --input-border-color: var(--color-negative);
  }

  /* On a white ground the centred card needs its edge back. */
  .panel.panel--centered {
    --panel-border-size: 1px;
  }

  /* The gate's search: one large field on the canvas, holding its glyph and its button. */
  .input--gate {
    --input-background: var(--color-canvas);
    --input-border-color: var(--color-ink-light);
    --input-border-radius: var(--radius-xl);
    --input-padding: 0 0.6em 0 1em;
    --column-gap: 0.7em;
    --gate-input-size: 64px;
    --icon-size: 1.1em;

    font-size: var(--text-medium);
    min-block-size: var(--gate-input-size);
  }

  /* The one a menu is currently showing. */
  .btn[aria-current="page"] {
    --btn-background: var(--color-ink-lightest);
  }

  /* A settings block inside a page has one column: Fizzy's side-by-side panels, each half wide, are for the account settings in #main. */
  .page > .settings {
    flex-direction: column;

    .settings__panel {
      max-inline-size: 100%;
    }
  }
}