@charset "UTF-8";

@layer reset, font, base, modifier, elements, custom;

@property --clr-text {
  syntax: '<color>';
  inherits: true;
  initial-value: currentColor;
}

@property --clr-text-candidate {
  syntax: '<color>';
  inherits: true;
  initial-value: currentColor;
}

@property --fraction-background-opacity {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

@property --size-padding {
  syntax: '<length>';
  inherits: false;
  initial-value: 0;
}

@layer reset {

  :where(:root) {
    color-scheme: dark light;
    text-decoration-skip-ink: all;
    text-size-adjust: none;

    @media not (prefers-reduced-motion) {
      interpolate-size: allow-keywords;
    }
  }

  :where(
    *,
    *::after,
    *::before
  ) {
    box-sizing: border-box;
    text-underline-offset: 0.15em;
  }

  :where(*) {
    margin: 0;
  }

  :where(
    :root:dir(rtl) html,
    html.translated-rtl
  ) {
    --is-rtl: 1;
    direction: rtl;
  }

  :where(body) {
    min-block-size: 100dvb;
  }

  :where(
    button,
    input,
    select,
    textarea
  ) {
    color: inherit;
    font: inherit;

    &:where(textarea) {
      resize: block;
    }
  }

  :where(
    canvas,
    img,
    picture,
    svg,
    video
  ) {
    block-size: auto;
    display: block;
    max-inline-size: 100%;
  }

  :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6
  ) {
    text-wrap: balance;
  }

  :where(p) {
    text-wrap: pretty;
  }
}

@layer font {

  @font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 500;
    src:
      local('Material Symbols Outlined'),
      url('/assets/font/material-symbols-outlined.ttf') format('truetype');
  }

  @font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src:
      local('DM Sans'),
      url('/assets/font/dm-sans.ttf') format('truetype');
    unicode-range:
      U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
      U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  :where(
    :where(
      *,
      *::after,
      *::before
    ):not(.icon)
  ) {
    font-family: 'DM Sans', sans-serif;
  }

  :where(.icon) {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 1.5em;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    overflow-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  }
}

@layer base {

  @media not (prefers-reduced-motion) {

    @view-transition {
      navigation: auto;
    }
  }

  :where(:root) {
    --css-loaded: true;

    --root-clr-accent: #ff0088;
    --root-clr-base: light-dark(#f1f3f6, #04080c);
    --root-clr-contrast: #373535;
    --root-clr-primary: #9cd137;
    --root-clr-secondary: #00c2ff;
    --root-clr-tertiary: #003d56;

    --root-clr-warning: #ffb71d;
    --root-clr-caution: #ff8d8d;

    --fraction-dark-contrast-lightness: 0.83;
    --fraction-dark-color-lightness: 0.6;
    --fraction-dark-color-chroma: 0.5;
    --fraction-more-contrast-lightness: 0.25;
    --fraction-more-contrast-chroma: 1.25;

    --calc-fraction-lightness: calc(
      (1 - var(--dark-mode) * (1 - var(--fraction-dark-color-lightness))) * 1 +
        var(--more-contrast) *
        (
          var(--dark-mode) * (var(--fraction-more-contrast-lightness) * 2) -
            var(--fraction-more-contrast-lightness)
        )
    );
    --calc-fraction-chroma: calc(
      1 - var(--dark-mode) * (1 - var(--fraction-dark-color-chroma)) *
        (
          var(--dark-mode) * (var(--fraction-more-contrast-chroma) * 2) -
            var(--fraction-more-contrast-chroma)
        )
    );
    --calc-text-fraction-lightness: calc(1 + var(--dark-mode) * 0.5);

    --clr-accent: oklch(
      from var(--root-clr-accent) calc(l * var(--calc-fraction-lightness))
        calc(c * var(--calc-fraction-chroma)) h
    );
    --clr-base: var(--root-clr-base);
    --clr-contrast: oklch(
      from var(--root-clr-contrast)
        calc(l + var(--dark-mode) * var(--fraction-dark-color-lightness))
        calc(c * var(--calc-fraction-chroma)) h
    );
    --clr-muted: color-mix(
      in oklch,
      var(--clr-contrast),
      var(--clr-base) calc(60% * (1 - var(--calc-fraction-lightness)))
    );
    --clr-primary: oklch(
      from var(--root-clr-primary) calc(l * var(--calc-fraction-lightness))
        calc(c * var(--calc-fraction-chroma)) h
    );
    --clr-primary-text: oklch(
      from var(--clr-primary) calc(l * var(--calc-text-fraction-lightness)) c h
    );
    --clr-secondary: oklch(
      from var(--root-clr-secondary) calc(l * var(--calc-fraction-lightness))
        calc(c * var(--calc-fraction-chroma)) h
    );
    --clr-secondary-text: oklch(
      from var(--clr-secondary) calc(l * var(--calc-text-fraction-lightness)) c h
    );
    --clr-tertiary: oklch(
      from var(--root-clr-tertiary) calc(l * var(--calc-fraction-lightness))
        calc(c * var(--calc-fraction-chroma)) h
    );
    --clr-tertiary-text: oklch(
      from var(--clr-tertiary) calc(l * var(--calc-text-fraction-lightness)) c h
    );
    --clr-caution: oklch(
      from var(--root-clr-caution) calc(l * var(--calc-fraction-lightness))
        calc(c * var(--calc-fraction-chroma)) h
    );
    --clr-warning: oklch(
      from var(--root-clr-warning) calc(l * var(--calc-fraction-lightness))
        calc(c * var(--calc-fraction-chroma)) h
    );

    --root-size-container-max: 80rem;
    --root-size-gap: 1rem;

    --dark-mode: 1;

    @media (prefers-color-scheme: light) {
      --dark-mode: 0;
    }

    --more-contrast: 0;

    @media (prefers-contrast: more) {
      --clr-light: #ffffff;
      --clr-base: light-dark(var(--clr-light), contrast-color(var(--clr-light)));
      --clr-contrast: contrast-color(var(--clr-base));
      --more-contrast: 1;
    }

    --root-clr-card-bg: light-dark(#ffffff, #161b22);
    --root-clr-card-border: light-dark(transparent, #30363d);

    --clr-card-bg: oklch(
      from var(--root-clr-card-bg)
        calc(l * (1 - var(--more-contrast) * var(--fraction-more-contrast-lightness))) c h
    );
    --clr-card-border: oklch(
      from var(--root-clr-card-border)
        calc(l * (1 - var(--more-contrast) * var(--fraction-more-contrast-lightness))) c h
    );

    --card-shadow: 0.1875rem 0.125rem 0.3125rem 0.125rem rgb(0 0 0 / 0.125);

    @media (prefers-color-scheme: dark) {
      --card-shadow: 0 0.125rem 0.3125rem 0.125rem rgb(0 0 0 / 0.5);
    }
  }

  :where(*) {
    --clr-text: var(--clr-text-candidate);
    --clr-text-candidate: contrast-color(var(--clr-background, white));
    --size-container-max: var(--root-size-container-max);
    --size-gap: calc(var(--root-size-gap) * 2);
    color: var(--clr-text, inherit);
    padding: var(--size-padding, 0);

    @media not (prefers-contrast: more) {
      --clr-text: var(--clr-contrast, var(--clr-text-candidate));

      @container style(--clr-text-candidate: white) {
        --clr-text: light-dark(var(--clr-base), var(--clr-contrast));
      }
    }
  }

  :where(html) {
    container: html / scroll-state;
    overflow-y: scroll;

    @media not (prefers-reduced-motion) {
      scroll-behavior: smooth;
    }
  }

  :where(body) {
    --clr-background: var(--clr-base);
    background: var(--clr-background, white);
    contain: content;
    line-height: 1.618;
  }

  @media (prefers-color-scheme: dark) and (not (prefers-contrast: more)) {

    :where(picture:not(.no-dimming)) {
      filter: brightness(var(--fraction-dark-contrast-lightness));
    }
  }

  :where(a) {
    --clr-text: var(--clr-secondary-text, currentColor);
    text-decoration: none;
    text-underline-offset: 0.2em;

    &:where(:hover) {
      text-decoration: underline 10%;
    }
  }

  :where(li) {
    --padding-block: calc(var(--padding-inline) / 2);
    --padding-fallback: 1rem;
    --padding-inline: var(--padding, var(--padding-fallback));
    margin-inline: calc(var(--padding-inline) * 1.5) var(--padding, var(--padding-fallback));
    padding-block: var(--padding-block);
    padding-inline: var(--padding-inline);

    &::marker {
      color: var(--clr-muted);
      content: '\29C8';
      font-size: 1rem;
      margin-inline-end: 1rem;
    }
  }
}

@layer modifier {

  .pad {
    --size-padding: calc(var(--root-size-gap) * 3);
    padding-block: calc(var(--size-padding) - var(--size-padding-block-inherit));
    padding-inline: min(4dvi, var(--size-padding));
  }
}

@layer elements {

  body {
    grid-template-rows: auto 1fr;
    display: grid;
    font-family: 'DM Sans', system-ui, sans-serif;
    min-height: 100dvb;
  }

  header {
    --clr-background: var(--clr-card-bg);
    background: var(--clr-background);
    border-block-end: solid 0.0625rem transparent;
    box-shadow: 0 0.25rem 0.125rem -0.125rem rgb(0 0 0 / 0.25);
    display: grid;
    justify-items: center;

    @media (prefers-color-scheme: dark) {
      border-color: var(--clr-card-border);
    }

    > div {
      align-items: center;
      display: flex;
      inline-size: 100%;
      justify-content: space-between;
      max-inline-size: var(--size-container-max);
      padding: 1rem;
    }

    .brand-logo {
      block-size: 4rem;

      img {
        height: 100%;
      }
    }
  }

  footer {
    --size-padding: calc(var(--size-gap) / 2);
    --padding-block: var(--size-gap);
    inline-size: min(100%, var(--size-container-max));
    justify-self: center;
    padding-block: 0 var(--padding-block);

    & > p {
      --clr-text: var(--clr-muted);
    }

    a {
      color: inherit;
      position: relative;

      @media not (prefers-reduced-motion) {
        transition: none cubic-bezier(1, 0, 1, 1) 1s;
        transition-property: color, text-shadow;
      }

      &::before {
        background: radial-gradient(
          ellipse farthest-side at center,
          var(--clr-primary),
          transparent
        );
        content: '';
        inset-block: -0.5em;
        inset-inline: -1.5rem;
        opacity: 0;
        position: absolute;
        z-index: -1;

        @media not (prefers-reduced-motion) {
          transition: inherit;
          transition-property: opacity;
        }
      }

      &:hover {
        --color: light-dark(var(--clr-primary), var(--clr-primary-text));
        color: white;
        text-decoration: none;
        text-shadow:
          -0.0625rem -0.0625rem 0.25rem var(--color),
          0 -0.0625rem 0.25rem var(--color),
          0.0625rem -0.0625rem 0.25rem var(--color),
          -0.0625rem 0 0.25rem var(--color),
          0.0625rem 0 0.25rem var(--color),
          -0.0625rem 0.0625rem 0.25rem var(--color),
          0 0.0625rem 0.25rem var(--color),
          0.0625rem 0.0625rem 0.25rem var(--color);

        @media not (prefers-reduced-motion) {
          transition-timing-function: cubic-bezier(0, 0.25, 0, 1);
        }

        &::before {
          opacity: 1;
        }
      }
    }
  }

  hr {
    background: linear-gradient(90deg, #406d72, #73686f, #656b73, #747261);
    block-size: 0.125rem;
    border: none;
    filter: brightness(calc(1 + (var(--dark-mode) * -1 + 1) * 0.75));
    inline-size: 2rem;
    margin-block-start: 0.5rem;
  }

  code {
    font-family: monospace;
  }

  .tag {
    --padding-block: 0.5rem;
    --padding-inline: calc(var(--padding-block) * 1.5);
    --clr-background: oklch(
      from var(--color) calc(l - var(--dark-mode) * 0.25) calc(c - var(--dark-mode) * 0.025) h
    );
    background: var(--clr-background);
    border-radius: 0.3em;
    border: solid 0.0625rem oklch(var(--dark-mode) 0 0 / 0.2);

    --clr-text: contrast-color(var(--clr-background));
    corner-shape: scoop;
    display: inline-block;
    font-size: 1rem;
    padding-block: var(--padding-block);
    padding-inline: var(--padding-inline);
    text-shadow: 0 0.0625rem color-mix(var(--clr-background), contrast-color(currentColor));

    &.added {
      --color: #c4eec4;
    }

    &.changed {
      --color: #dfdf00;
    }

    &.deprecated {
      --color: #ffaa00;
    }

    &.removed {
      --color: #ff7272;
    }

    &.fixed {
      --color: #ab3cd6;
    }

    &.security {
      --color: #1c53a7;
    }
  }

  .url-text {
    --clr-text: var(--clr-secondary-text);
    font-weight: 700;
    word-break: break-all;
  }

  .button {
    --clr-background: var(--button-color);
    --clr-button: var(--clr-secondary);
    --button-color: oklch(
      from var(--clr-button-hover, var(--clr-button, var(--clr-background)))
        calc(l * var(--color-fraction, 1)) c h
    );
    --clr-text: white;
    --padding: 0.625rem;
    align-items: center;
    background: var(--clr-background);
    border-radius: 6.25rem;
    border: 0.0625rem solid var(--button-color);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.9rem;
    font-weight: 600;
    inline-size: 100%;
    justify-content: center;
    padding-block: var(--padding);
    padding-inline: calc(var(--padding) * 1.5);
    text-decoration: none;
    user-select: none;

    @media not (prefers-reduced-motion) {
      transition:
        background-color 0.25s ease-in,
        color 0.25s ease-in;
    }

    &.ghost {

      @media (prefers-color-scheme: dark) {
        --color-fraction: 1.25;
      }

      &:not(
        :hover,
        :focus-visible
      ) {
        backdrop-filter: blur(2rem);
        background: transparent;

        --clr-text: var(--button-color);
      }
    }

    &:hover,
    &:focus-visible {
      --button-color: oklch(from var(--clr-button) calc(l * 1.1) calc(c * 1.1) h);

      &:active {
        --button-color: oklch(from var(--clr-button) calc(l * 0.9) calc(c * 0.9) h);
      }
    }
  }

  select {
    border: solid 0.0625rem var(--clr-accent);
    cursor: pointer;
    display: none; /* Hide i18n switch for now */
    font-size: 0.8125rem;
    padding: 0.5rem;
  }

  main {
    --center-if-margin-lt: 40dvb;
    --center-on-top-fraction: 0.8;
    --size-padding-block: var(--root-size-gap);
    --size-padding-inline: calc(var(--size-padding-block) * 1.5);
    --size-padding-block-inherit: var(--size-padding-block);
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    block-size: calc-size(
      fit-content,
      max(
        sign(100% - size - var(--size-padding-block) - var(--center-if-margin-lt)) * -100%,
        max((size + var(--size-padding-block)), 100% * var(--center-on-top-fraction))
      )
    );
    box-sizing: border-box;
    display: grid;
    padding-block: var(--size-padding-block);
    padding-inline: var(--size-padding-inline);

    &:not(.align-start) {
      place-content: center;
    }

    .card,
    .content {
      --clr-background: var(--clr-card-bg);
      --size-padding: var(--root-size-gap);
      --size-padding-block: var(--size-padding);
      --size-padding-inline: calc(var(--size-padding) * 1.5);
      --this-card-shadow: var(--card-shadow);
      background: var(--clr-background);
      border: 0.0625rem solid var(--clr-card-border);
      border-radius: 0.5rem;
      box-shadow: var(--this-card-shadow);
      padding-block: var(--size-padding-block);
      padding-inline: var(--size-padding-inline);
      position: relative;

      @media (prefers-color-scheme: dark) {
        --this-card-shadow: inset 0 0 0.125rem var(--clr-card-border), var(--card-shadow);
      }

      &.card {
        max-inline-size: 30rem;
      }

      &.content {
        max-inline-size: var(--size-container-max);
      }

      .icon {
        --margin-block: 1.5rem;
        --clr-text: var(--clr-primary);
        font-size: 3rem;
        margin-block: calc(var(--margin-block) - var(--size-padding-block)) var(--margin-block);
      }

      .scopes {
        --row-rule: solid 0.0625rem oklch(from var(--clr-contrast) l c h / 0.15);
        border-block: var(--row-rule);
        display: grid;
        font-size: 0.8em;
        margin: 0;
        row-rule: var(--row-rule);

        li {
          padding: var(--size-padding-block);
        }
      }
    }
  }

  .prose {

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ol,
    ul {

      &:where(
        p,
        ol,
        ul
      ) {
        max-inline-size: 65ch;
      }

      &:where(& + &) {
        margin-block-start: max(0.5em, 0.75rem);

        &:not(
          :where(
            h1,
            h2,
            h3,
            h4,
            h5,
            h6
          ) + :where(
            h1,
            h2,
            h3,
            h4,
            h5,
            h6
          )
        ) {
          margin-block-start: 1em;
        }
      }
    }
  }

  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--root-size-gap);
    margin-block-start: calc(var(--root-size-gap) * 1.5);

    form {
      flex: 1;
    }
  }

  h1 {
    font-size: 1.25rem;
  }

  h2 {
    font-size: 1rem;

    &:not(:first-child) {
      margin-block: 2em 1em;
    }

    &:has(time) {
      margin-block: 2em 1em;
      font-size: 1.25rem;
      border-bottom: 0.125rem dashed oklch(var(--dark-mode) 0 0 / 0.2);
      padding-block: 1rem;
    }
  }

  .intro {
    font-size: 0.95rem;
  }

  .detail {
    --clr-text: var(--clr-muted);
    font-size: 0.875rem;
  }

  .notify {
    font-size: 0.875rem;
    border: solid 0.0625rem var(--color);
    padding: 1rem;
    border-radius: 1rem;
    background-color: color-mix(in oklch, var(--color), var(--clr-background) 75%);

    &.caution {
      --color: var(--clr-caution);
    }

    &.warning {
      --color: var(--clr-warning);
    }

    @media (prefers-contrast: more) {
      text-shadow: 0 0 0.375em contrast-color(var(--clr-text));
    }
  }
}

@layer custom {

  .align-center {
    display: grid;
    place-items: center;
    text-align: center;
  }

  .text-pop {
    text-shadow: 0 0.0625rem 0.0625rem
      color-mix(contrast-color(var(--clr-contrast)), var(--clr-background) 25%);
  }

  .no-margin {
    margin: 0;
  }

  [data-view] {
    view-transition-name: attr(data-view type(<custom-ident>), none);
  }
}