@layer reset, base, site, layout;

@layer site {
  .skip-link {
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 1100;
    padding: 0.55rem 0.8rem;
    color: var(--text);
    background: var(--surface-strong);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow-soft);
    transform: translateY(-150%);

    &:focus {
      transform: translateY(0);
    }
  }

  .site-header {
    --dock-action-height: 2.35rem;
    --dock-shell-padding: 0.42rem;
    --dock-shell-height: calc(var(--dock-action-height) + (var(--dock-shell-padding) * 2) + 2px);

    position: sticky;
    top: 0;
    z-index: 1000;
    min-height: var(--header-height);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
    background: transparent;

    & .header-actions {
      grid-column: 3;
      justify-self: end;
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      min-width: 0;
    }

    & .language-picker,
    & .theme-picker,
    & sf-weather {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      min-width: 0;
      min-height: var(--dock-shell-height);
      padding: var(--dock-shell-padding);
      color: var(--text-muted);
      background: color-mix(in srgb, var(--surface-strong) 78%, transparent);
      border: 1px solid var(--border);
      border-radius: 999px;
      box-shadow: var(--shadow-soft);
      backdrop-filter: var(--blur-glass);
      -webkit-backdrop-filter: var(--blur-glass);
    }

    & sf-weather {
      font-weight: 650;
    }

    & .sf-weather__icon {
      min-width: 1.35rem;
      margin-left: 0.22rem;
      text-align: center;
      font-size: 1.05rem;
      line-height: 1;
    }

    & .sf-weather__record {
      display: flex;
      align-items: center;
      margin: 0;
    }

    & .sf-weather__temperature {
      padding-right: 0.55rem;
      white-space: nowrap;
    }

    & .sf-weather__retry {
      min-height: var(--dock-action-height);
      padding: 0 0.75rem;
      color: inherit;
      font-weight: 650;
      line-height: 1;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 999px;
      cursor: pointer;

      &:hover,
      &:focus-visible {
        color: var(--text);
        background: var(--surface-subtle);
        border-color: var(--border);
      }
    }

    & .theme-picker__icon {
      width: 1.05rem;
      aspect-ratio: 1;
      margin-left: 0.25rem;
      background: currentColor;
      mask: url("../images/icons/sun-moon.svg") center / contain no-repeat;
    }

    & .theme-picker select {
      min-height: var(--dock-action-height);
      padding: 0 0.75rem 0 0.15rem;
      color: inherit;
      font-weight: 650;
      line-height: 1;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 999px;
      cursor: pointer;
      appearance: none;

      &:hover,
      &:focus-visible {
        color: var(--text);
        background: var(--surface-subtle);
        border-color: var(--border);
      }
    }
  }

  .profile-panel {
    display: grid;
    gap: var(--space-4);
    justify-items: center;
    padding: var(--space-6) var(--space-5);
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-glass);
    backdrop-filter: var(--blur-glass);
    -webkit-backdrop-filter: var(--blur-glass);

    & > img {
      width: 7.5rem;
      aspect-ratio: 1;
      border-radius: 50%;
      object-fit: cover;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-soft);
    }

    & h2 {
      font-size: 1.35rem;
    }

    & p {
      font-size: 0.96rem;
    }

    & nav.profile-links {
      & ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-3);
        padding: 0;
        list-style: none;
      }

      & a {
        display: grid;
        place-items: center;
        width: 2.35rem;
        aspect-ratio: 1;
        background: var(--surface-subtle);
        border: 1px solid var(--border);
        border-radius: 999px;
        box-shadow: 0 0.45rem 1rem rgba(21, 31, 56, 0.08);

        &:hover {
          transform: translateY(-2px);
        }

        & img {
          width: 1.25rem;
          height: 1.25rem;
        }
      }
    }
  }

  .site-footer {
    width: fit-content;
    max-width: calc(100% - 2rem);
    margin: var(--space-8) auto var(--space-4);
    padding: 0.75rem 1rem;
    color: var(--text-muted);
    text-align: center;
    background: color-mix(in srgb, var(--surface-strong) 78%, transparent);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow-soft);
    backdrop-filter: var(--blur-glass);
    -webkit-backdrop-filter: var(--blur-glass);

    & p {
      color: inherit;
    }
  }
}

@layer layout {
  main {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    gap: var(--space-8);
    width: min(calc(100% - 2rem), var(--content-width));
    margin: var(--space-10) auto 0;
    align-items: start;

    & > .profile-sidebar {
      display: grid;
      gap: var(--space-5);
      min-width: 0;
      position: sticky;
      top: calc(var(--header-height) + var(--space-6));
      grid-column: 1;
      grid-row: 1;
      align-self: start;
    }

    & > .page-content {
      grid-column: 2;
      grid-row: 1;
      min-width: 0;
      display: grid;
      gap: var(--space-8);
    }

    & > .page-content.project-detail,
    & > .page-content.project-summary {
      display: block;
    }

    & > .page-content:not(.project-detail):not(.project-summary) > * + * {
      margin-top: 0;
    }

    & > :not(.profile-sidebar):not(.page-content) {
      grid-column: 2;
      min-width: 0;
    }

    & > .page-content.project-detail,
    & > .page-content.project-summary,
    & > noscript,
    & > .page-content:not(.project-detail):not(.project-summary) > section,
    & > .page-content:not(.project-detail):not(.project-summary) > article {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-glass);
      backdrop-filter: var(--blur-glass);
      -webkit-backdrop-filter: var(--blur-glass);
    }

    & > .page-content.project-detail,
    & > .page-content.project-summary,
    & > .page-content:not(.project-detail):not(.project-summary) > section,
    & > .page-content:not(.project-detail):not(.project-summary) > article {
      padding: var(--space-8);
    }

    & > noscript {
      padding: var(--space-4) var(--space-5);
    }
  }

  section,
  article {
    & > * + * {
      margin-top: var(--space-4);
    }
  }

  .project-detail > section {
    padding-block: var(--space-5);
    border-top: 1px solid var(--border-muted);

    &:first-of-type {
      border-top: 0;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    main > .page-content.project-detail,
    main > .page-content.project-summary,
    main > .page-content:not(.project-detail):not(.project-summary) > section,
    main > .page-content:not(.project-detail):not(.project-summary) > article,
    main > noscript,
    .profile-panel {
      animation: glass-enter 520ms ease both;
    }

    @keyframes glass-enter {
      from {
        opacity: 0;
        transform: translateY(0.65rem);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }

  @media (max-width: 60rem) {
    .site-header {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: var(--space-2);
      padding-inline: var(--space-3);

      & > nav {
        grid-column: 1;
        justify-self: end;
        width: auto;
      }

      & .header-actions {
        grid-column: 2;
      }
    }

    main {
      display: grid;
      grid-template-columns: 3.5rem minmax(0, 1fr);
      gap: var(--space-4);
      width: min(calc(100% - 1rem), var(--content-width));
      margin-top: var(--space-6);

      & > :not(.profile-sidebar) {
        grid-column: 2;
      }

      & > .profile-sidebar {
        top: calc(var(--header-height) + var(--space-4));
        grid-column: 1;
        z-index: 900;
        gap: var(--space-3);
      }

      & > .profile-sidebar > .profile-panel {
        width: 3.5rem;
        max-height: calc(100svh - var(--header-height) - var(--space-8));
        overflow: hidden;
        padding: var(--space-3) var(--space-2);
        gap: var(--space-2);
        justify-items: center;
        transition: width 180ms ease, box-shadow 180ms ease;

        &:hover,
        &:focus-within {
          width: min(15rem, calc(100vw - 2rem));
        }

        & > img {
          width: 2rem;
          min-width: 2rem;
        }

        & h2,
        & p {
          max-width: 0;
          opacity: 0;
          overflow: hidden;
          transform: translateX(-0.35rem);
          transition: max-width 180ms ease, opacity 140ms ease, transform 180ms ease;
          white-space: nowrap;
        }

        &:hover h2,
        &:hover p,
        &:focus-within h2,
        &:focus-within p {
          max-width: 12rem;
          opacity: 1;
          transform: translateX(0);
          white-space: normal;
        }

        & nav.profile-links {
          width: 100%;
        }

        & nav.profile-links ul {
          display: grid;
          grid-template-columns: 1fr;
          justify-items: center;
          justify-content: center;
          gap: var(--space-2);
        }

        & nav.profile-links a {
          width: 1.85rem;
          box-shadow: none;
          transition: width 180ms ease, box-shadow 180ms ease, transform 160ms ease;
        }

        & nav.profile-links a img {
          width: 0.95rem;
          height: 0.95rem;
        }

        &:hover nav.profile-links ul,
        &:focus-within nav.profile-links ul {
          display: flex;
        }

        &:hover nav.profile-links a,
        &:focus-within nav.profile-links a {
          width: 2.35rem;
        }

        &:hover nav.profile-links a img,
        &:focus-within nav.profile-links a img {
          width: 1.25rem;
          height: 1.25rem;
        }
      }

      & > .page-content.project-detail,
      & > .page-content.project-summary,
      & > .page-content:not(.project-detail):not(.project-summary) > section,
      & > .page-content:not(.project-detail):not(.project-summary) > article {
        padding: var(--space-5);
      }
    }
  }

  @media (max-width: 35rem) {
    .site-header {
      --dock-action-height: 2.2rem;
      --dock-shell-padding: 0.34rem;

      gap: var(--space-1);
      padding-inline: var(--space-2);

      & > nav ul {
        gap: 0;
      }

      & > nav a {
        padding: 0.38rem 0.52rem;
        font-size: 0.9rem;
      }

      & .header-actions,
      & .theme-picker,
      & sf-weather {
        gap: 0;
      }

      & .sf-weather__icon {
        min-width: 1.8rem;
        margin-left: 0;
      }

      & .sf-weather__record,
      & .sf-weather__retry {
        width: 0;
        max-width: 0;
        padding: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
      }

      & .theme-picker__icon {
        margin: 0;
      }

      & .theme-picker {
        position: relative;
        justify-content: center;
        width: calc(var(--dock-action-height) + (var(--dock-shell-padding) * 2) + 2px);
        aspect-ratio: 1;
      }

      & .theme-picker select {
        position: absolute;
        inset: 0;
        width: 100%;
        padding: 0;
        color: transparent;
      }
    }
  }
}

@layer layout {
  @media (max-width: 24rem) {
    :root { --header-height: 7rem; }
    .site-header {
      grid-template-columns: minmax(0, 1fr);
      & > nav { grid-column: 1; justify-self: center; }
      & .header-actions { grid-column: 1; justify-self: center; }
    }
  }
}