@property --gutter-length {
  syntax: "<length>";
  inherits: true;
  initial-value: 12px;
}

@property --border-radius-length {
  syntax: "<length>";
  inherits: true;
  initial-value: 8px;
}

html {
  --gutter-length: 0.75rem;
  background-color: white;
  scroll-behavior: smooth;
  /* relevant to the mobile navbar's font-size */
  scroll-padding-top: calc(2lh + var(--gutter-length, 12px));
}

body {
  container: body / inline-size;
  max-width: 800px;
  display: grid;
  grid:
    "header"
    "nav"
    "main"
    / 100%;
  gap: var(--gutter-length, 12px);

  > header {
    grid-area: header;
  }

  > main {
    grid-area: main;
  }

  > nav {
    grid-area: nav;
    align-self: start;
  }

  @media (min-width: 600px) {
    grid:
      "header header"
      "main nav"
      / minmax(0, 60ch) minmax(min-content, 1fr);
    /* beware of text that won't wrap */

    margin-inline: max(var(--gutter-length, 12px), (100% - 800px) / 2);
  }
}

body > header {
  background-image: url("assets/header.jpg");
  background-size: cover;
  background-position: center;
  color: white;
  text-shadow: 1px 1px black;
  padding: 2rem;

  display: flex;
  justify-content: center;
  align-items: center;
}

body > main {
  margin-inline: var(--gutter-length, 12px);

  > section {
    margin-block: 1.5em;

    &:first-child {
      margin-top: unset;
    }
  }

  @media (min-width: 600px) {
    margin-inline: unset;
  }
}

body > nav {
  background-color: white;
  /* border is temporary until I can integrate dithering in CSS gradients */
  border-block: solid 1px rgb(0, 0, 0, 0.38);
  font-family: "Roboto Serif Variable";
  position: sticky;
  top: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  z-index: 1;

  @media (min-width: 600px) {
    border-block: unset;
    top: var(--gutter-length, 12px);
    z-index: unset;
  }

  a {
    text-decoration-line: none;
  }

  > ol {
    --num-links: 6;
    width: calc(50% * (var(--num-links) + 1));
    display: flex;
    justify-content: center;
    padding-left: 0px;
    list-style-type: none;

    @media (min-width: 600px) {
      width: unset;
      flex-direction: column;
    }

    > li {
      width: calc(100% / (var(--num-links) + 1));
      align-content: center;
      text-align: center;
      scroll-snap-align: center;
      text-wrap: balance;

      @media (min-width: 600px) {
        width: unset;
        text-align: unset;

        + li {
          margin-top: 0.5em;
        }
      }
    }
  }
}

/* assuming that these elements are in flow layout */
p,
aside,
hr:not(.v-divider),
.figure {
  margin-block: 1em;

  &:first-child {
    margin-top: unset;
  }

  &:last-child {
    margin-bottom: unset;
  }
}

hr {
  border: none;
  height: 1px;
  font-size: 2em;
  background: linear-gradient(
    to right,
    black calc(50% - 2em),
    transparent calc(50% - 1em) calc(50% + 1em),
    black calc(50% + 2em)
  );
  display: flex;
  justify-content: center;
  align-items: center;
}

aside {
  background-color: #f9f2f4;
  color: #c7254e;
  border-radius: var(--border-radius-length, 8px);
  padding: 1em;
}

/* would like to prevent scroll chaining, but cannot */
iframe {
  display: block;
  width: 100%;
  border: solid 1px rgb(0, 0, 0, 0.38);
}

pre > code {
  font-family: "iA Writer Mono", monospace;
  border-radius: var(--border-radius-length, 8px);
}

blockquote {
  margin-left: 3ch;
  font-style: italic;
  font-family: "Roboto Serif Variable";
}

h1,
h2,
h3,
h4,
h5,
h6,
hgroup {
  font-family: "Roboto Serif Variable";
  text-wrap: balance;
  &:not(hgroup) {
    line-height: 1.25em;
  }
}

code,
kbd,
samp {
  font-family: "iA Writer Duo";
}

/* Add space after inline, italicized text */
i,
em {
  margin-right: calc(tan(15deg) * (1em - 1ex));
}

s {
  filter: opacity(0.5);
  text-decoration-line: underline;
  text-underline-offset: calc(-1em / 3);
  text-decoration-skip-ink: none;
  text-decoration-thickness: 0.15em;
  white-space: preserve wrap;

  &::before {
    content: " ";
  }

  &::after {
    content: " ";
  }
}

a:link {
  color: #008aff;
}

ol,
ul {
  padding-left: 3ch;
}

fieldset {
  padding: 0em 1em 1em 1em;
  border: solid 1px rgb(0, 0, 0, 0.38);
  border-radius: var(--border-radius-length, 8px);

  > legend {
    padding-inline: calc(1em / 3);
    color: rgb(0, 0, 0, 0.6);
  }
}

.figure {
  > .figure-caption {
    text-align: center;
    font-size: smaller;
    text-wrap: balance;
  }
}

.language-json {
  white-space: preserve wrap;
}

span.mdi {
  vertical-align: bottom;
}

#hr-📌::after {
  content: "📌";
}

#hr-📖::after {
  content: "📖";
}

#hr-🖼️::after {
  content: "🖼️";
}

#hr-🎓::after {
  content: "🎓";
}

#hr-⭐️::after {
  content: "⭐️";
}

#hr-📁::after {
  content: "📁";
}

#hr-🖇️::after {
  content: "🖇️";
}

#hr-🫚::after {
  content: "🫚";
}

#hr-⭐️📁🖇️🫚 {
  background: linear-gradient(
    to right,
    black calc(50% - 4em),
    transparent calc(50% - 3em) calc(50% + 3em),
    black calc(50% + 4em)
  );

  &::after {
    content: "⭐️ 📁 🖇️ 🫚";
  }
}

#embed-bsky-app {
  height: calc(100lvh - 2lh - 44px * 2);
  border-radius: var(--border-radius-length, 8px);
}

#carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: var(--gutter-length, 12px);
  margin-block: 1em;

  > .figure {
    margin-block: unset;
    width: calc(100% - var(--gutter-length, 12px) - 44px);
    flex-shrink: 0;
    scroll-snap-align: center;
  }

  #pinksea-art,
  #whtwnd-com {
    height: calc(100lvh - 2lh - 44px * 2);
    border-radius: var(--border-radius-length, 8px);
  }
}

:is(#login-form, #create-bookmark-form, #create-collection-form)
  .submit-button {
  display: grid;
  margin-inline: auto;
  min-width: calc(100% / 3);
}

/* FIXME: :is() doesn't work here */
#login-form > *,
#login-form > .v-form > *,
#create-bookmark-form > .v-form > *,
#create-collection-form > .v-form > * {
  margin-block: 1em;

  &:first-child {
    margin-top: unset;
  }

  &:last-child {
    margin-bottom: unset;
  }
}

:is(#create-bookmark-form, #create-collection-form) output {
  display: block;
  padding: 1em;
  background-color: #fdf6e3;
  color: #0085a1;
  border-radius: var(--border-radius-length, 8px);
}

#create-bookmark-form,
#create-collection-form {
  display: grid;
  container-type: inline-size;

  > .v-form,
  &::after {
    grid-row: 1;
    grid-column: 1;
  }

  &::after {
    place-self: start center;
    transform: translateY(36px);
    line-height: 1;
    font-size: 40cqmin;
    pointer-events: none;
    z-index: 1;
    filter: opacity(0.1) contrast(0.5) grayscale(1);
    transition: filter 0.25s;
  }

  &:focus-within::after {
    filter: opacity(0.05) contrast(0.5) grayscale(1);
  }
}

#create-bookmark-form::after {
  content: "⭐️";
}

#create-collection-form::after {
  content: "📁";
}

#bookmark-manager-container {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;

  @media (min-width: 600px) {
    width: 100cqw;
  }

  > #bookmark-manager {
    overflow-x: auto;
    border-radius: var(--border-radius-length, 8px);

    @media (min-width: 600px) {
      --extra: 50cqw;
      --clamped-extra: min(100vw - 100cqw, var(--extra));
      width: calc(
        100cqw + var(--clamped-extra) - 2 * var(--gutter-length, 12px)
      );
      z-index: 1;
    }
  }
}

#bookmark-manager > .v-table {
  height: calc(100lvh - 2lh - 44px * 2);

  .v-toolbar-title__placeholder {
    overflow-x: auto;
  }

  .v-table__wrapper {
    background-color: rgb(0, 0, 0, 0.02);
  }

  tbody {
    white-space: preserve nowrap;
  }

  td {
    max-width: 60ch;
    overflow-x: clip;
    text-overflow: ellipsis;
  }
}

.bookmark-manager-item-title:empty,
.bookmark-manager-breadcrumb-title:empty {
  &::before {
    content: "Untitled Member";
    font-style: italic;
  }
}

.copy-aturi-actions {
  display: inline grid;
  grid: "copy-aturi delete-member";
  gap: var(--gutter-length, 12px);

  .copy-aturi-icon,
  .did-copy-aturi-icon {
    grid-area: copy-aturi;
  }

  .delete-member-icon {
    grid-area: delete-member;
  }
}

.copy-aturi-icon {
  &.v-enter-active {
    transition: filter 0.25s;
  }

  &.v-enter-from {
    filter: opacity(0);
  }
}

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

.did-copy-aturi-icon {
  &.v-enter-active {
    animation: bounce-in 0.25s;
  }

  &.v-leave-active {
    transition: filter 0.25s;
  }

  &.v-leave-to {
    filter: opacity(0);
  }
}