/* _base.css */
@font-face {
  font-family: "Lora";
  src: url("Lora-VariableFont_wght.ttf");
  font-display: swap;
}

:root {
  --radius-lg: 1rem 1.5rem / 1.5rem 3rem;
  --radius-md: 0.5rem 1rem / 0.75rem 1.5rem;
  --radius-sm: 0.25rem 0.5rem / 0.375rem 1rem;
  --radius-xs: 0.1rem 0.2rem / 0.15rem 0.3rem;

  --gap-xl: min(11vw, 3rem);
  --gap-lg: min(6vw, 2rem);
  --gap-md: min(3vw, 1rem);
  --gap-sm: min(1vw, 0.5rem);
  --gap-xs: min(0.5vw, 0.25rem);

  --breakpoint: 768px;

  --screen-width: calc(100vw - 2 * var(--gap-lg));
  --page-width: min(1600px, var(--screen-width));
  --line-width: min(50rem, var(--screen-width));
  --aside-gap: var(--gap-lg);
  --aside-offset: calc(var(--line-width) + var(--aside-gap));
  --aside-width: calc(var(--page-width) - var(--aside-gap) - var(--aside-offset));

  --hue: 92deg;
}

* {
  --surface: oklch(97% 1% var(--hue));
  --onSurface: oklch(27% 1% var(--hue));
  --surfaceDim: oklch(93% 2% var(--hue));
  --onSurfaceDim: oklch(44% 4% var(--hue));

  --accentBright: oklch(58% 23% var(--hue));
  --accent: oklch(48% 23% var(--hue));
  --onAccent: oklch(100% 0% var(--hue));
  --accentContainer: oklch(92% 10% var(--hue));
  --onAccentContainer: oklch(40% 22% var(--hue));

  --outlineBright: oklch(57% 3% var(--hue));
  --outline: oklch(85% 0.1% var(--hue));
  --outlineDim: oklch(57% 3% var(--hue) / 0.1);

  --shadow-sm: 0px 1px 1px 0px var(--outlineDim), 0 2px 1px -6px var(--outlineDim);
  --shadow-md: 0px 4px 8px 0px var(--outlineDim), 0 8px 3px -6px var(--outlineDim);
  --shadow-lg: 0 20px 25px -5px var(--outlineDim), 0 8px 10px -6px var(--outlineDim);

  box-sizing: border-box;
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);

  font-family: "Lora", sans-serif;
  color: var(--onSurface);
  font-size: 1rem;
  hyphens: auto;
  line-height: 1.5;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-font-smoothing: subpixel-antialiased;

  margin: 0;
  padding: 0;
}

::selection {
  background: var(--onSurfaceDim);
  color: var(--surfaceDim);
}

body {
  padding: 0 var(--gap-lg);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
  background: var(--surface);

  > header {
    --header-height: min(50vh, 170px);
    --sticky-header-height: 72px;
    display: flex;
    gap: var(--gap-md);
    align-items: center;
    max-width: var(--screen-width);
    z-index: 100;
    margin-top: var(--gap-xs);
    border-radius: var(--radius-lg);
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    background-color: var(--surface);
    
    img {
      width: var(--header-height);
      height: var(--header-height);
      border-radius: var(--radius-lg);
    }
    
    &.sticky {
      background-color: transparent;
      backdrop-filter: blur(6px);
      mask:      linear-gradient(to bottom, #000000 60%, rgba(0, 0, 0, 0) 99%);
      position: sticky;
      top: 0;
      z-index: 99;
      margin-top: calc(-1 * (var(--gap-lg) + var(--header-height)));
      margin-bottom: calc(var(--header-height) - var(--sticky-header-height));
      border: 1px solid var(--outlineDim);
      border-top: none;
      border-radius: var(--radius-sm);
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      box-shadow: var(--shadow-sm);
      
      img {
        width: var(--sticky-header-height);
        height: var(--sticky-header-height);
        border-radius: var(--radius-sm);
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }

  > main {
    width: var(--page-width);
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    padding: 0;
    overflow-x: hidden;
  }

  > footer {
    width: var(--page-width);
    padding-bottom: var(--gap-lg);
  }
}

section {
  max-width: var(--line-width);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.hidden {
  display: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: -0.02em;
}

h1 {
  font-size: min(2rem, calc((var(--line-width) - var(--gap-md) - 72px) / 7));
  line-height: 1.1;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

a {
  color: var(--accent);
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

.icon {
  width: 1.5rem;
  height: 1.5rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.edit-indicator {
  position: fixed;
  right: var(--gap-lg);
  bottom: var(--gap-lg);
  z-index: 200;
  max-width: min(24rem, calc(100vw - 2 * var(--gap-lg)));
  color: color-mix(in oklab, var(--onSurfaceDim) 72%, transparent);
  font-size: 0.82rem;
  line-height: 1.35;
  opacity: 0.7;
  pointer-events: none;
  user-select: none;
}

body.config-edit-mode [data-source-file] {
  cursor: pointer;
  outline: 2px solid color-mix(in oklab, var(--accent) 70%, white);
  outline-offset: 0.35rem;
}

body.config-edit-mode [data-source-file]:hover {
  box-shadow: 0 0 0 0.35rem color-mix(in oklab, var(--accentContainer) 80%, white);
}


/* altmetrics_fixes.css */
.__dimensions_badge_embed__ {
  .__dimensions_Badge_style_small_circle .__db_background {
    box-shadow: none !important;
  }

  .__dimensions_Badge_Legend_hover .__dimensions_Badge_Legend {
    border: 1px solid var(--outline) !important;
    box-shadow: none !important;
    background: var(--surface) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--onSurface) !important;
  }
}

div.altmetric-embed[id^="_altmetric_popover_el"] div.altmetric_container div.altmetric-popover-inner {
  background: var(--surface) !important;
  border: 1px solid var(--outline) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--onSurface) !important;
  box-shadow: none !important;

  .altmetric-popover-content {
    background: var(--surface) !important;
  }

  a.altmetric_details {
    color: var(--accent) !important;
  }
}


/* education.css */
.education {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 0 6rem 1rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--outline) transparent;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  gap: var(--gap-md);
  width: var(--screen-width);

  > div {
    scroll-snap-align: start;
    border: 1px solid var(--outline);
    border-radius: var(--radius-lg);
    padding: var(--gap-md);
    max-width: 24rem;
    flex-shrink: 0;
    display: flex;
    gap: var(--gap-xs);
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    background-image: url("/groovepaper.png");
    background-repeat: repeat;

    .degree {
      display: flex;
      gap: var(--gap-xs);
      align-items: center;
      justify-content: space-between;

      .distinction {
        font-size: 0.7rem;
        background-color: var(--accentContainer);
        color: var(--onAccentContainer);
        padding: 0.1rem 0.5rem;
        border-radius: var(--radius-sm);
      }

      .degree-name {
        font-size: 1.1em;
        font-weight: 500;
      }
    }

    .institution {
      display: flex;
      gap: var(--gap-sm);
      justify-content: space-between;

      img {
        height: 4rem;
        max-width: calc(var(--line-width) / 10);
        object-fit: contain;
      }

      p {
        font-weight: 500;
        color: var(--accent);
        &.years {
          font-size: 0.9rem;
          color: var(--onSurfaceDim);
        }
      }
    }

    .thesis {
      font-size: 0.9rem;
      font-style: italic;
    }

    .supervisors {
      font-size: 0.8rem;
    }

    .description {
      font-size: 0.9rem;
    }
  }
}

.education-swipe {
  text-align: center;
  font-style: italic;
}


/* experience.css */
.experience {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 0 6rem 1rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--outline) transparent;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  gap: var(--gap-md);
  width: var(--screen-width);

  > div {
    scroll-snap-align: start;
    border: 1px solid var(--outline);
    border-radius: var(--radius-lg);
    padding: var(--gap-md);
    max-width: 24rem;
    flex-shrink: 0;
    display: flex;
    gap: var(--gap-xs);
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    background-image: url("/groovepaper.png");
    background-repeat: repeat;

    .institution {
      display: flex;
      gap: var(--gap-sm);
      justify-content: space-between;
      img {
        height: 4rem;
        max-width: calc(var(--line-width) / 10);
        object-fit: contain;
      }
    }

    .title {
      font-size: 1.1em;
      font-weight: 500;
    }

    .description {
      font-size: 0.9em;
    }
  }
}

.experience-swipe {
    text-align: center;
    font-style: italic;
  }
  

/* featured_media.css */
.featured-media {
  background: var(--surfaceDim);
  padding: var(--gap-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md);
  justify-content: center;

  a {
    img {
      height: 3rem;
      max-width: min(9rem, calc(var(--line-width) / 4));
      object-fit: contain;
    }
  }
}


/* media.css */
.media {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);

  > div {
    display: flex;
    flex-direction: column;

    > div {
      display: flex;
      justify-content: space-between;

      span {
        font-size: 0.9em;
        color: var(--onSurfaceDim);
      }
    }
  }
}


/* nemo.css */
video {
  border-radius: var(--radius-lg);
  border: 0.5rem solid var(--outlineDim);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.nemo-box {
  background: var(--surfaceDim);
  padding: var(--gap-lg);
  border-radius: var(--radius-lg);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: var(--gap-sm);
  flex-direction: column;
  
  img {
    height: 2.5rem;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: var(--gap-md);
  }

  p + p {
    display: block;
    font-style: italic;
    font-size: 0.9em;
    color: var(--onSurfaceDim);
  }

  a {
    display: flex;
    justify-content: space-between;
    gap: var(--gap-md);
  }
}


/* reference.css */
.topic-tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--gap-xs);

  span {
    padding: var(--gap-sm) var(--gap-md);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    border-radius: var(--radius-sm);
    background-color: var(--surfaceDim);
    color: var(--onSurface);

    &.active {
      background-color: var(--accentContainer);
      color: var(--onAccentContainer);
    }

    &.selected {
      background-color: var(--accent);
      color: var(--onAccent);
    }
  }
}

.topic-desc {
  padding: var(--gap-md);
  background: oklch(from var(--accent) l c h / 0.05);
  border-radius: var(--radius-sm);

  h3 {
    color: var(--accent);
  }
}

.reference {
  container-type: inline-size;
  inline-size: var(--line-width);
  display: grid;
  grid-template-areas:
    "year source topic"
    "year title title"
    "gap authors authors"
    "badges abstract abstract";
  grid-template-columns: min-content 1fr 1fr;
  transition: 0.3s ease;
  padding: var(--gap-md);
  background-image: url("/groovepaper.png");
  background-repeat: repeat;
  border-radius: var(--radius-md);
  gap: 0 var(--gap-md);
  align-items: start;
  border: 1px solid var(--outline);
  box-shadow: var(--shadow-md);

  &:hover {
    border-color: var(--outlineBright);
    box-shadow: var(--shadow-lg);
  }

  .source {
    grid-area: source;
    align-self: end;
  }

  .year {
    grid-area: year;
    justify-self: center;
    color: var(--accent);
    font-size: 1.5rem;
    font-weight: 500;
  }

  .topic {
    grid-area: topic;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--onAccentContainer);
    background-color: var(--accentContainer);
    border-radius: var(--radius-sm);
    padding: 0 var(--gap-sm);
    justify-self: end;
    align-self: center;
    white-space: nowrap;
    overflow-x: scroll;
    max-width: calc(100% - var(--gap-xs));
  }

  .title {
    grid-area: title;

    a {
      color: inherit;
      text-decoration: none;
      transition: color 0.2s ease;
      font-size: 1.4rem;
      letter-spacing: -0.01rem;
      line-height: 1.2;
      font-weight: 500;

      &:hover {
        color: var(--accent);
      }
    }

    span {
      font-size: 0.8rem;
      color: var(--onSurfaceDim);
      margin-left: 0.5rem;
    }
  }

  .badges {
    grid-area: badges;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .authors {
    grid-area: authors;

    margin: var(--gap-md) 0;

    .author-match {
      text-decoration: underline;
    }

    .author-toggle {
      transition: opacity 2s ease, width 0s ease;
    }
    .author-ellipsis,
    .author-toggle {
      display: inline-block;
      text-wrap-mode: nowrap;
    }

    .author-match,
    .author-visible,
    .author-ellipsis,
    &.expanded .author-toggle {
      margin-right: 0.5ch;
    }

    .author-ellipsis,
    &.expanded .author-toggle {
      width: fit-content;
      opacity: 1;
    }

    .author-toggle,
    &.expanded .author-ellipsis {
      width: 0;
      opacity: 0;
      margin-right: 0;
    }

    &:not(.expanded):hover {
      opacity: 0.8;
    }

    &:not(.expanded) {
      cursor: pointer;
    }
  }

  .abstract {
    grid-area: abstract;
    padding: var(--gap-sm);
    border: 1px solid var(--outlineDim);
    background-color: var(--surface);
    border-radius: var(--radius-sm);

    div {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      max-height: 230px;
      font-size: 0.8rem;
      line-height: 1.5;
      color: var(--onSurface);
    }
  }
}

@media (max-width: 768px) {
  .topic-tags {
    flex-direction: column;
  }

  .reference {
    grid-template-areas:
      "year topic"
      "source source"
      "title title"
      "authors authors"
      "abstract abstract"
      "badges badges";
    grid-template-columns: 1fr 3fr;

    .title {
      font-size: 1.2rem;
    }

    .year {
      justify-self: start;
    }

    .badges {
      flex-direction: row;
      justify-content: space-evenly;
      margin-top: var(--gap-md);
    }
  }
}

.endocrinology {
  --hue: 15deg;
}

.access-to-medicine {
  --hue: 195deg;
}

.clinical-trial-transparency {
  --hue: 270deg;
}