.turbo-progress-bar {
  visibility: hidden;
}

.material-symbols {
  font-family: 'Material Symbols';
  font-weight: 300;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'liga';
}

.app-hidden {
  display: none;
}

.display-contents {
  display: contents;
}

[data-controller~="popover"] .fbf-popover {
  opacity: 0;
  scale: 0.95;
  transition: opacity 150ms ease-in, scale 150ms ease-in;
}

[data-controller~="popover"]:not([data-popover-is-open-value="true"]) .fbf-popover {
  pointer-events: none;
}

[data-controller~="popover"][data-popover-is-open-value="true"] .fbf-popover {
  opacity: 1;
  scale: 1;
}

aside.transition-view-left {
  view-transition-name: sidebar-left;
}

aside.transition-view-right {
  view-transition-name: sidebar-right;
}

html[data-turbo-visit-direction="forward"]::view-transition-old(sidebar-left):only-child,
html[data-turbo-visit-direction="forward"]::view-transition-old(sidebar-right):only-child,
html[data-turbo-visit-direction="forward"]::view-transition-new(sidebar-left):only-child,
html[data-turbo-visit-direction="forward"]::view-transition-new(sidebar-right):only-child {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-turbo-visit-direction="forward"]::view-transition-old(sidebar-left):only-child {
  animation-name: slide-out-left;
}

html[data-turbo-visit-direction="forward"]::view-transition-new(sidebar-left):only-child {
  animation-name: slide-in-left;
}

html[data-turbo-visit-direction="forward"]::view-transition-old(sidebar-right):only-child {
  animation-name: slide-out-right;
}

html[data-turbo-visit-direction="forward"]::view-transition-new(sidebar-right):only-child {
  animation-name: slide-in-right;
}

.step-nav {
  view-transition-name: step-nav;
}

::view-transition-group(step-nav) {
  z-index: 1;
}

::view-transition-old(step-nav) {
  display: none;
}

::view-transition-new(step-nav) {
  animation: none;
}

.step-nav-fade {
  background: linear-gradient(
    to bottom,
    transparent 50%,
    color-mix(in srgb, var(--color-beige-200) 10%, transparent) 60%,
    color-mix(in srgb, var(--color-beige-200) 35%, transparent) 72%,
    color-mix(in srgb, var(--color-beige-200) 65%, transparent) 84%,
    var(--color-beige-200) 100%
  );
}

.step-nav-stepper {
  view-transition-name: step-nav-stepper;
}

::view-transition-group(step-nav-stepper) {
  z-index: 2;
}

::view-transition-old(step-nav-stepper),
::view-transition-new(step-nav-stepper) {
  animation: none;
}

.stepper-dot {
  view-transition-name: stepper-dot;
}

/* Stepper dot: the group handles horizontal slide natively,
   we layer a vertical bounce on top via the image pair */
::view-transition-group(stepper-dot) {
  z-index: 2;
  animation-duration: 500ms;
  animation-timing-function: ease-in-out;
}

::view-transition-image-pair(stepper-dot) {
  isolation: auto;
}

::view-transition-old(stepper-dot) {
  animation: stepper-dot-up 500ms ease-in-out forwards;
  mix-blend-mode: normal;
}

::view-transition-new(stepper-dot) {
  animation: stepper-dot-down 500ms ease-in-out forwards;
  mix-blend-mode: normal;
}

@keyframes stepper-dot-up {
  0%   { transform: translateY(0); opacity: 1; }
  49%  { transform: translateY(-16px); opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes stepper-dot-down {
  0%   { opacity: 0; }
  50%  { transform: translateY(-16px); opacity: 0; }
  51%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes slide-out-left {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes slide-out-right {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes slide-in-left {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.tabs.tabs--numbered > * {
  counter-increment: tab-number;
}

.tabs--numbered > *::before {
  content: "0" counter(tab-number) ". ";
}

.tabs > * {
  padding: 16px;
  border-radius: 16px;
}

.tabs > .active {
  background-color: var(--color-beige-500);
}

.fbf-floating-sidebar-container {
  container: floating-sidebar-container / size;
  padding-inline: 32px;
  padding-block: 24px;
  height: 100%;
  scroll-behavior: smooth;

  aside {
    position: sticky;
    top: 0;
    height: 100cqh;
  }
}

.fbf-panel {
  background-color: var(--color-beige-100);
  border-radius: 32px;
  box-shadow: var(--shadow-100);
  height: 100%;
  overflow: hidden;
}

.fbf-panel__content {
  box-sizing: border-box;
  padding: 24px 32px;
  overflow-y: auto;
  max-height: 100%;

  > .fbf-heading {
    margin-bottom: 16px;
  }
}

.rich-text {
  word-wrap: break-word;
  overflow-wrap: break-word;

  h1 { font-size: 2em; font-weight: 600; }
  h2 { font-size: 1.5em; font-weight: 600; }
  h3 { font-size: 1.17em; font-weight: 600; }
  h4 { font-size: 1em; font-weight: 600; }
  h5 { font-size: 0.83em; font-weight: 500; }
  h6 { font-size: 0.67em; font-weight: 500; }

  * + p, * + hr, * + img, * + table, * + ol, * + ul {
    margin-top: 8px;
    margin-bottom: 0;
  }

  h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p { margin-top: 0; }

  img { max-width: 100%; }

  p, ol, ul, pre, blockquote, h1, h2, h3, h4, h5, h6 {
    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }

  ol, ul { padding-left: 1.5em; }
  ol > li, ul > li { list-style-type: none; padding: 2px 0; }

  ul > li::before { content: '\2022'; color: var(--color-grey-800); }
  ul li::before, ol li::before {
    display: inline-block;
    white-space: nowrap;
    width: 1.2em;
    margin-left: -1.5em;
    margin-right: 0.3em;
  }

  li h1, li h2, li h3, li h4, li h5, li h6, li p, li small { margin: 0; }

  ol li {
    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
    counter-increment: list-0;
  }
  ol li::before { content: counter(list-0, decimal) '. '; }
  ol li.indent-1 { counter-increment: list-1; counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; }
  ol li.indent-1::before { content: counter(list-1, lower-alpha) '. '; }
  ol li.indent-2 { counter-increment: list-2; counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9; }
  ol li.indent-2::before { content: counter(list-2, lower-roman) '. '; }
  ol li.indent-3 { counter-increment: list-3; counter-reset: list-4 list-5 list-6 list-7 list-8 list-9; }
  ol li.indent-3::before { content: counter(list-3, decimal) '. '; }
  ol li.indent-4 { counter-increment: list-4; counter-reset: list-5 list-6 list-7 list-8 list-9; }
  ol li.indent-4::before { content: counter(list-4, lower-alpha) '. '; }
  ol li.indent-5 { counter-increment: list-5; counter-reset: list-6 list-7 list-8 list-9; }
  ol li.indent-5::before { content: counter(list-5, lower-roman) '. '; }
  ol li.indent-6 { counter-increment: list-6; counter-reset: list-7 list-8 list-9; }
  ol li.indent-6::before { content: counter(list-6, decimal) '. '; }
  ol li.indent-7 { counter-increment: list-7; counter-reset: list-8 list-9; }
  ol li.indent-7::before { content: counter(list-7, lower-alpha) '. '; }
  ol li.indent-8 { counter-increment: list-8; counter-reset: list-9; }
  ol li.indent-8::before { content: counter(list-8, lower-roman) '. '; }
  ol li.indent-9 { counter-increment: list-9; }
  ol li.indent-9::before { content: counter(list-9, decimal) '. '; }

  ul li, ol li {
    &.indent-1 { padding-left: calc(1 * 3em + 1.5em); }
    &.indent-2 { padding-left: calc(2 * 3em + 1.5em); }
    &.indent-3 { padding-left: calc(3 * 3em + 1.5em); }
    &.indent-4 { padding-left: calc(4 * 3em + 1.5em); }
    &.indent-5 { padding-left: calc(5 * 3em + 1.5em); }
    &.indent-6 { padding-left: calc(6 * 3em + 1.5em); }
    &.indent-7 { padding-left: calc(7 * 3em + 1.5em); }
    &.indent-8 { padding-left: calc(8 * 3em + 1.5em); }
    &.indent-9 { padding-left: calc(9 * 3em + 1.5em); }
  }

  pre {
    flex-direction: column;
    background-color: var(--color-grey-900);
    overflow: auto;
    > code { background-color: transparent; color: white; border: none; }
    p { margin-bottom: 0; color: white; }
  }

  blockquote {
    border-left: 4px solid var(--color-grey-500);
    margin: 5px 0;
    padding-left: 16px;
  }
}

.fade-view-transition {
  view-transition-name: fade-view-transition;
}

::view-transition-old(fade-view-transition) {
  animation: fade-in 250ms ease-out reverse forwards;
}

::view-transition-new(fade-view-transition) {
  animation: fade-in-up 400ms ease-out 250ms both;
}