*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: var(--text-color);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.4;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}


html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  & {
    --toolbar-background-color: rgb(247, 247, 247);
    --content-background-color: rgb(243, 242, 248);
    --notification-background-color: rgb(255, 255, 255);
    --active-color: rgb(0, 117, 249);
    --text-color: rgb(20, 20, 20);
    --contrast-color: rgb(0, 0, 0);
  }

  @media (prefers-color-scheme: dark) {
    --toolbar-background-color: rgb(18, 18, 18);
    --content-background-color: rgb(0, 0, 0);
    --notification-background-color: rgb(28, 28, 30);
    --active-color: rgb(10, 132, 255);
    --text-color: rgb(236, 236, 236);
    --contrast-color: rgb(255, 255, 255);
  }

  --toolbar-height: 3.85rem;
  --button-height: 3.85rem;

  &[installed] {
    background: black;
  }
}

html,
body {
  width: 100%;
  height: 100%;
  overscroll-behavior: none;
}

body {
  font-size: 1.6rem;


  > dialog {
    border: none;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header"
      "main"
      "footer";
    align-content: start;
    isolation: isolate;
    overscroll-behavior: none;

    &:is(.initial) {
      &:is(html[installed] *) {
        height: 100lvh;
      }
    }

    &:is(.sheet) {
      --translate-top: calc(env(safe-area-inset-top) + 100%);
      --border-radius: 1.2rem;
      --toolbar-height: 4.8rem;
      inset: 0;
      top: env(safe-area-inset-top);
      height: auto;
      border-top-left-radius: var(--border-radius);
      border-top-right-radius: var(--border-radius);
      transition-property: translate, display, overlay;
      transition-duration: 0.4s;
      transition-behavior: allow-discrete;

      &:not([open]) {
        display: none;
        translate: 0 var(--translate-top);

        &::backdrop {
          opacity: 0;
        }
      }

      @starting-style {
        display: grid;
        translate: 0 var(--translate-top);

        &::backdrop {
          opacity: 0;
        }
      }

      &::backdrop {
        background: black;
        transition-property: opacity, display, overlay;
        transition-duration: inherit;
        transition-behavior: allow-discrete;
      }
    }


    > :is(
      header,
      footer
    ) {
      --toolbar-border: 0.05rem solid color-mix(in srgb, var(--contrast-color), transparent 75%);
      --padding-inline: 0.8rem;
      position: sticky;
      padding-left: calc(env(safe-area-inset-left) + var(--padding-inline));
      padding-right: calc(env(safe-area-inset-right) + var(--padding-inline));
      display: flex;
      background-color: var(--toolbar-background-color);
      z-index: 1;
      isolation: isolate;

      &:is(header) {
        grid-area: header;
        top: 0;
        border-bottom: var(--toolbar-border);
        height: var(--toolbar-height);

        &:is(.initial > *) {
          padding-top: env(safe-area-inset-top);
          height: calc(var(--toolbar-height) + env(safe-area-inset-top));
        }
      }

      &:is(footer) {
        grid-area: footer;
        bottom: 0;
        border-top: var(--toolbar-border);
        height: calc(var(--toolbar-height) + env(safe-area-inset-bottom));
      }


      > * {
        flex: 0 0 auto;
      }


      > h1 {
        position: absolute;
        inset: 0;
        top: auto;
        height: var(--toolbar-height);
        display: grid;
        place-items: center;
        font-size: 1.7rem;
        font-weight: 600;
        z-index: -1;
      }


      > hr {
        flex: 1 1;
        border: none;
      }


      > button {
        appearance: none;
        outline: none;
        padding-inline: 0.8rem;
        min-width: var(--button-height);
        border: none;
        display: grid;
        place-items: center;
        background: transparent;
        color: var(--active-color);
        font-size: 1.7rem;
        font-weight: 500;

        &:active {
          opacity: 0.5;
        }


        > svg {
          --size: 2.2rem;
          width: var(--size);
          height: var(--size);
          fill: var(--active-color);
        }
      }
    }


    > main {
      background-color: var(--content-background-color);

      &:is(header ~ main) {
        grid-row-start: main;
      }

      &:not(:is(header ~ main)) {
        grid-row-start: header;
      }

      &:has(~ footer) {
        grid-row-end: main;
      }

      &:not(:has(~ footer)) {
        grid-row-end: footer;
      }
    }
  }
}


#install,
#activate,
#api-docs {
  &:is(
    html[installed] #install,
    html:not([installed]) #activate,
    html[activated] #activate
  ) {
    display: none;
  }


  > main {
    padding-block: 1.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;

    &::before,
    &::after {
      content: "";
      flex: 1 1;
    }


    > img {
      width: 14.8rem;
    }


    > h2 {
      margin-bottom: 1rem;
    }


    > p {
      margin-bottom: 1.5rem;
      padding-inline: 2rem;
      text-align: center;
      text-wrap: balance;

      > code {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

        &.copy {
          -webkit-user-select: auto;
          user-select: auto;
        }
      }
    }
  }
}


#notifications {
  &:is(html:not([activated]) *) {
    display: none;
  }


  > main {
    overflow: hidden;


    > .list {
      max-height: 100%;
      padding-bottom: calc(env(safe-area-inset-bottom) + 0.8rem);
      display: grid;
      grid-auto-flow: row;
      isolation: isolate;
      overflow-y: auto;


      > .group {
        display: contents;


        > time {
          --padding: 1.6rem;
          position: sticky;
          top: 0;
          margin-top: 1.6rem;
          padding-block: 0.8rem;
          padding-left: calc(env(safe-area-inset-left) + var(--padding));
          padding-right: calc(env(safe-area-inset-right) + var(--padding));
          z-index: 1;
          background: color-mix(in srgb, var(--content-background-color), transparent 15%);
          backdrop-filter: blur(0.3rem);
          font-size: 1.7rem;
          font-weight: 600;
        }


        > .notification {
          --border-radius: 1.2rem;
          --margin: 1.4rem;
          --padding: 1rem;

          margin-left: calc(env(safe-area-inset-left) + var(--margin));
          margin-right: calc(env(safe-area-inset-right) + var(--margin));
          display: grid;
          grid-template-columns: auto 1fr auto;
          grid-template-rows: repeat(3, auto);
          grid-template-areas:
            "dot title time"
            ".   body  body"
            ".   divider divider";
          place-content: start;
          background-color: var(--notification-background-color);
          overflow: hidden;

          &:first-of-type {
            border-top-left-radius: var(--border-radius);
            border-top-right-radius: var(--border-radius);
          }

          &::before {
            content: "";
            grid-area: dot;
            width: 2.4rem;
          }

          &:not(:last-of-type) {
            &::after {
              content: "";
              grid-area: divider;
              height: 0.1rem;
              transform: scaleY(0.5);
              background-color: color-mix(in srgb, var(--contrast-color), transparent 75%);
            }
          }

          &:last-of-type {
            border-bottom-left-radius: var(--border-radius);
            border-bottom-right-radius: var(--border-radius);
          }


          > :is(
            .title,
            .time
          ) {
            padding-top: var(--padding);

            &:is(.title) {
              grid-area: title;
              font-size: 1.6rem;
            }


            &:is(.time) {
              grid-area: time;
              padding-inline: var(--padding);
              opacity: 0.5;
            }
          }


          > .body {
            grid-area: body;
            padding-top: calc(var(--padding) / 2);
            padding-right: var(--padding);
            padding-bottom: var(--padding);
            white-space: pre-line;
          }
        }
      }
    }
  }
}