@layer base {
  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;
  }

  .menu__section:not(:has(.row:not([hidden]))) {
    display: none;
  }

  .filtered-section:not(:has([data-quick-find-target~="item"]:not([hidden]))) {
    display: none;
  }
}

@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);
  }

  /* A name field set as the page title it makes (.project__title). The line under it shows only while it is empty or focused. */
  .input--title {
    --input-border-radius: 0;
    --input-border-size: 0;
    --input-padding: 0.1em 0;

    border-block-end: 1px solid transparent;
    display: block;
    font-size: var(--text-x-large);
    font-weight: 800;
    letter-spacing: -0.024em;
    line-height: 1.15;

    @media (width >= 640px) {
      font-size: var(--text-xx-large);
    }

    /* Firefox dims a placeholder unless the opacity is set. */
    &::placeholder {
      color: var(--color-ink-dark);
      opacity: 1;
    }

    &:invalid {
      border-block-end-color: var(--color-ink-light);
    }

    &:focus {
      border-block-end-color: var(--color-ink-medium);
      outline: none;
    }

    &:user-invalid {
      border-block-end-color: var(--color-negative);
    }
  }

  /* Without field-sizing, the autoresize clone sets the height, so it takes the title's type. */
  @supports not (field-sizing: content) {
    .autoresize__wrapper:has(> .input--title) {
      font-size: var(--text-x-large);
      font-weight: 800;
      letter-spacing: -0.024em;
      line-height: 1.15;

      @media (width >= 640px) {
        font-size: var(--text-xx-large);
      }

      &::after {
        border-block-end: 1px solid transparent;
        padding: 0.1em 0;
      }

      /* Empty, the clone is empty too, so it takes the placeholder, or one that wraps is clipped. */
      &:has(> :placeholder-shown)::after {
        content: attr(data-autoresize-placeholder) " ";
      }
    }
  }

  /* 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);
  }
}