@layer content {
    social-icons {
      display: flex;
      gap: 1ch;
    }
  }
@layer content {
    author-bio {
      display: block;
      margin-block-start: 1lh;
    }
  }
@layer tools {
    color-control {
      align-content: start;
      display: grid;
      gap: 0.5lh;
    }

    input-control {
      display: grid;
    }
  }
@layer layout {
    main-nav {
      --button-padding: var(--shim);
      position: relative;

      a:any-link {
        display: inline flow-root;
        padding: var(--button-padding);
      }

      button[popovertarget] {
        &::before {
          content: '▸';
          content: '▸' / '';
          display: inline-block;
          margin-inline-end: 0.4ch;
          rotate: var(--dropdown-icon-rotate, 0turn);
          transition: rotate 150ms;
        }
      }

      li:has(:popover-open) button[popovertarget] {
        --button-color-state: var(--active-color);
        --dropdown-icon-rotate: 0.25turn;
      }

      [popover] {
        margin-block-start: var(--shim);
        position-area: end span-start;

        @supports not (position-area: end) {
          inset: calc(var(--gap) * 1.5) var(--gap) auto auto;
        }
      }
    }

    [data-loggedin='false'] #my-account-item {
      display: none;
    }

    [data-loggedin='true'] #signin-item {
      display: none;
    }
  }
@layer layout {
  #banner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    grid-area: banner;
    justify-content: space-between;
  }

  home-link {
    a{
      text-decoration: none;
    }

    [data-logo] {
      block-size: calc(1lh * var(--logo-scale, 1));
      fill: var(--link-state, var(--text-color));
      inline-size: auto;
      translate: 0 var(--svg-logo-baseline-offset);
      vertical-align: bottom;
    }

    [logo-accent] {
      fill: var(--accent-fill, var(--accent-color));
    }
  }

  home-link,
  main-nav {
    padding: var(--banner-item-padding);
  }
}