@font-face {
  font-family: "Tiempos Text";
  src: url("../fonts/TiemposText-Regular.bb60ab47e55b.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

.tqc-heading--tiempos-text-regular {
  font-family: "Tiempos Text", serif;
  font-weight: 400;
}

/*
  fixes iOS default button color for non-pitviper buttons
  which we use for proper semantics on interactive elements
*/
button {
  color: var(--color-text-body);
}

/* hide the recaptcha badge */
.grecaptcha-badge {
  visibility: hidden;
}

/* mapbox style overrides */
.mapboxgl-map {
  font-family: var(--font-family-body, HK Grotesk, sans-serif) !important;
}

.mapboxgl-popup {
  padding-top: 28px;
  &:focus-within {
    border-color: var(--color-background-brand-highlight);
  }
}

.mapboxgl-popup-content {
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  a:focus {
    outline: none;
  }
}

.mapboxgl-popup-tip {
  display: none;
}

.mapboxgl-map .mapboxgl-popup-close-button {
  position: fixed;
  top: 6px;
  right: 6px;
  font-size: 20px;
  color: #6e7784;
}

/* Custom spacing because we can't use pv-inset-squish. Mapbox overwrites
   the style attribute on Markers, so we can't adjust the inset size. */
.map-marker {
  padding: 0px 4px;
}
/* end mapbox style overrides */

.tqc-map-loader {
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-background-brand-accent);

  transition: opacity 150ms ease-out;

  &.tqc-map-loader--show {
    opacity: 1;
    visibility: visible;
  }
}

/* Styles for HTMX */

.htmx-request #results-main {
  position: relative;
  &:after {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    content: "";
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.7) 50%,
      rgba(255, 255, 255, 0.1) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

button,
[role="button"] {
  cursor: pointer;
}

.overflow-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/**
 * The search bar is largely similar between the home and search
 * results pages, with subtle differences. The home page is considered
 * the common style. Overrides for the search result page appear in
 * following block.
 *
 * Within the bar:
 *   .search-bar__group is a spacing/border container for each input
 *   .pv-input-search needs custom overrides of Pit Viper styles
 *      to align with the other inputs
 */
search-form {
  display: block;
}

.search-bar {
  /* begin search bar styles common to both pages */
  @media (min-width: 768px) {
    display: grid;
    padding: 0.7rem;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 48px;
  }

  .search-bar__group {
    position: relative;
    min-width: auto;
    padding: 0.75rem;
    border: 0;
    border-block-end: 1px solid var(--color-border, #dcdfe4);

    insurance-selector {
      overflow: hidden;
      --inset-size: 0.2rem;
    }

    insurance-selector[member-id] {
      --inset-size: 0rem;

      .tqc-insurance-selector-border {
        border-block-end: unset;
        border-inline-end: unset;
      }

      .insurance-plan-and-id {
        flex-direction: column;
      }

      @media (max-width: 767px) {
        .tqc-insurance-selector-border {
          padding-bottom: 0rem;
        }
      }
    }

    @media (min-width: 768px) {
      border: 0;

      &:has(insurance-selector) {
        padding-top: 0rem;
        padding-bottom: 0rem;
      }

      &:nth-child(1 of .search-bar__group:not(.tqc-search-error)),
      &:nth-child(2 of .search-bar__group:not(.tqc-search-error)) {
        border-inline-end: 1px solid var(--color-border, #dcdfe4);
      }

      .search-bar--stacked & {
        border-inline-end: none;
      }
    }
  }

  insurance-selector {
    #insurance-selector-member-id {
      display: none;
    }

    &[member-id] {
      @media (min-width: 768px) {
        .tqc-insurance-selector-border {
          padding-right: 1rem;
        }
        .insurance-plan-and-id {
          flex-direction: row;
        }
        .tqc-insurance-change-button {
          padding-left: 1rem;
        }
      }
      @media (max-width: 767px) {
        .insurance-plan-and-id {
          flex-direction: column;
        }
        .tqc-insurance-change-button {
          display: flex;
          justify-content: center;
          /* --flex-justify: center; */
        }
      }

      #insurance-selector-member-id {
        display: flex;
      }
    }
  }
  /* end common search bar styles */
}

.tqc-stacked-search-container {
  padding: 16px 14px;
  border-radius: 10px;
  background: linear-gradient(
    to bottom,
    rgba(22, 105, 109, 1),
    rgba(22, 105, 109, 0)
  );
  position: relative;
}

.tqc-stacked-search-gradient-matte {
  background: white;
  position: relative;
  border-radius: 8px;
}

.tqc-stacked-search-gradient {
  padding: 3px;
  border-radius: 8px;
  background: linear-gradient(
    to top right,
    rgba(229, 160, 0, 0.5),
    rgba(198, 60, 128, 0.5)
  );
}

.search-bar--stacked {
  display: block;
  background: white;
  padding: 0;
  position: relative;
  border-radius: 0.5rem;

  .search-bar__group {
    padding: 1rem 0.75rem;
    & > label {
      font-size: 1rem;
      color: #16696d;
      font-weight: 600;
    }
  }

  .search-bar__group:nth-child(1),
  .search-bar__group:nth-child(2) {
    border-bottom: 1px solid #e3e7ea;
  }

  .search-bar__group:nth-child(3) {
    border-bottom: none;
  }

  .ts-wrapper.single .ts-control,
  .ts-wrapper.single .ts-control input,
  .insurance-selector-toggle {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  insurance-selector {
    display: block;
  }
}

/* begin search results page-specific search bar styles */
.search-bar--popover {
  @media (max-width: 767px) {
    width: 100vw;
    height: 100vh;
    max-height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: fixed;
    background-color: #fff;
    box-shadow:
      0px 0px 1px rgba(0, 0, 0, 0.3),
      0px 8px 12px -4px rgba(0, 0, 0, 0.08),
      0px 12px 16px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    top: 0;
    left: 0;
    z-index: 50;

    .search-bar .pv-input-search {
      font-size: 1.25rem;
    }
  }

  .search-bar {
    @media (min-width: 768px) {
      display: grid;
      padding: 0.5rem;

      .search-bar__group {
        padding-top: unset;
        padding-bottom: unset;
      }
    }
    grid-template-columns: repeat(3, minmax(0, 1fr)) 36px;

    .search-bar__group {
      padding-inline: 0.5rem;
    }
  }
}
/* end search results page-specific search bar styles */

.tqc-filter[data-dropdown] + .pv-popover {
  visibility: visible;
  opacity: 1;
  border-radius: 5px;
}

.search-filter {
  .pv-button-primary {
    /* override the caret PV adds to any button inside a pv-dropdown */
    background-image: none !important;
    padding: 0.75rem 1.25rem !important;
  }

  @media (max-width: 767px) {
    .pv-popover {
      height: 100vh;
      width: 100vw;
      position: fixed;
      top: 0;

      .control-container {
        position: fixed;
        width: 100%;
      }
    }
  }
}

@media (max-width: 767px) {
  [class*="pv-modal"].tqc-full-screen-mobile-modal {
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    max-width: none;
    border-radius: 0;

    .control-container {
      position: fixed;
      width: 100%;
    }
  }
}

.tqc-full-screen-mobile-modal--flex {
  display: none;

  &[open] {
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .filter-buttons {
    overflow-x: scroll;
  }
}

/* Chrome, Safari, Edge, Opera Remove Number Input Arrows */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox Remove Number Input Arrows */
input[type="number"] {
  -moz-appearance: textfield;
}

/* Use correct styles for Safari date input */
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-text {
  color: var(--color-text-body, #02363d);
  -webkit-text-fill-color: var(--color-text-body, #02363d);
}

.embedded {
  font-family: var(--font-family-body, HK Grotesk, HKGrotesk, sans-serif);
  font-weight: 400;
  font-size: 100%;
  line-height: 1.5;
  color: var(--color-text-body, #02363d);
  background: transparent;
  -webkit-font-smoothing: antialiased;
}

/* tom-select custom styles */
#service_code {
  /* hide the service dropdown until tomselect loads */
  &:not(.tomselected) {
    display: none;
  }

  /* once tomselect loads, hide the loading text */
  &.tomselected ~ .tqc-inline-loader {
    display: none;
  }
}

.ts-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

.ts-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;

  .item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &.single .ts-control,
  &.single .ts-control input {
    font-size: 18px;
    cursor: pointer;
    width: 100%;
  }

  &.single.input-active .ts-control {
    cursor: text;
  }

  input {
    background: inherit;
    padding: 0;
    border: none;
    &:focus {
      outline: none;
    }
  }

  &.input-hidden {
    input {
      opacity: 0;
      position: absolute;
    }
  }

  &.input-active {
    .item {
      display: none;
    }
  }
}

.ts-dropdown {
  /* z-index needs to beat .pv-sticky, which is set to 10 */
  z-index: 11;
  width: 100%;
  padding: 0;

  background: #fff;
  border-radius: 5px;

  .option,
  .optgroup-header,
  .no-results,
  .create {
    padding: 0.5rem 1rem 0.5rem 0;

    @media (min-width: 768px) {
      margin-inline: 0.5rem;
      padding: 0.5rem;
      padding-inline-end: 1rem;
    }

    background-image: var(--chevron-right);
    background-position: right;
    background-repeat: no-repeat;
  }
  .option:first-child {
    margin-top: 0.5rem;
  }
  .option:last-child {
    margin-bottom: 0.5rem;
  }

  .loading + & .option {
    display: none;
  }

  .overhang-autocomplete ~ & {
    position: absolute;
    top: 100%;
    left: 0;

    box-shadow:
      0px 0px 1px rgba(0, 0, 0, 0.3),
      0px 8px 12px -4px rgba(0, 0, 0, 0.08),
      0px 12px 16px rgba(0, 0, 0, 0.1);

    .option,
    .optgroup-header,
    .no-results,
    .create {
      padding-inline-start: 0.5rem;
    }
    .ts-dropdown-content {
      overflow: hidden auto;
      max-height: 260px;
    }
  }

  :not(.overhang-autocomplete) ~ & {
    @media (min-width: 768px) {
      overflow: hidden;
      max-height: 260px;
    }
  }

  [data-selectable] {
    cursor: pointer;
    overflow: hidden;

    .highlight {
      background: var(--color-background-brand-accent);
      font-weight: bold;
    }
  }

  .active {
    background-color: #f8f8fa;
  }

  .tq-loader {
    display: block;
    width: 30px;
    height: 30px;
    margin: 1rem auto;
  }

  .optgroup + .optgroup {
    & > .optgroup-header {
      border-top: 1px solid var(--color-border);
      &:empty {
        padding-top: 0;
      }
      &:not(:empty) {
        padding-top: 1rem;
      }
    }
  }
}

.tq-loader {
  animation: wobble 2s ease-in-out infinite;
  transform: scale(1) rotateY(0deg);
}
@keyframes wobble {
  0% {
    transform: scale(1) rotateY(0deg);
  }

  25% {
    transform: scale(0.95) rotateY(-30deg);
  }

  50% {
    transform: scale(1.2) rotateY(0deg);
  }

  75% {
    transform: scale(0.95) rotateY(30deg);
  }

  100% {
    transform: scale(1) rotateY(0deg);
  }
}

.pv-avatar-lg:has(img),
.pv-avatar-md:has(img) {
  background: transparent !important;
  border: 1px solid #dcdfe4 !important;
}

.tqc-package-result-card {
  /*
    this magic number prevents the sticky filter bar
    from covering the list items, when they're scrolled into
    view after clicking a map marker
  */
  scroll-margin-top: 68px;

  .tqc-see-cost-breakdown {
    text-decoration-line: underline;
    color: var(--color-text-body, #02363d);
  }

  &:hover {
    box-shadow: 0px 8px 16px 0px rgba(12, 12, 12, 0.1);
    text-decoration: none;

    .tqc-see-cost-breakdown,
    .tqc-provider-name {
      color: var(--color-text-interactive, #176f6f);
    }
  }

  .tqc-verifiers {
    display: none;
  }

  @media (max-width: 767px) {
    --flex-wrap: wrap;
  }

  &.tqc-verified {
    @media (min-width: 768px) {
      .tqc-verifiers-container {
        border-left: 1px solid var(--color-border, #dcdfe4);
      }

      .tqc-verifiers {
        display: block;
      }
    }

    @media (max-width: 767px) {
      .tqc-package-result-overview {
        flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
      }

      .tqc-verifiers {
        display: flex;
        --flex-justify: space-between;
        flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
      }

      .tqc-verifiers-container {
        border-top: 1px solid var(--color-border, #dcdfe4);
      }
    }
  }
}

.tqc-care-quality:hover {
  text-decoration: underline;
}

.tqc-logo path:first-of-type {
  fill: white;
}

.tqc-map-mover {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 2;
}

/* Override Pit-Viper padding for cost calculator */
.cost-calculator {
  .pv-label-selectable {
    padding: 12px 16px;
    border-radius: 5px;
  }
}

/*
  The services in the hero animation are invisible, overlapping, absolute-positioned elements

  We want to fade them into view over a half second,
  hold them still for ~3s, then fade them out over a half second
  (so, ~4 of total activity per item)

  This is accomplished by having each item run a long, looping animation
  with each item's start-time staggered by ~4s
*/
.tqc-rotating-services {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1lh;
  .tqc-service-item {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(100%);
    /*
      the 28s magic number comes from how many services we want to rotate:
        step 1: determine desired per-element timing
          (transition-in time [0.5s] + hold time [3s] + transition-out time [0.5s])
        step 2: get total animation time
          (number of elements [7] x per-element timing [4s])

      this needs to be updated whenever we update the service list
    */
    animation: rotating-text 28s infinite ease-in-out;

    @media (prefers-reduced-motion) {
      /* just display the first item for users who who prefer no animation */
      animation: none;
      &:first-child {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }

  .tqc-hidden-service-sizer {
    visibility: hidden;
    white-space: nowrap;
  }
}

@keyframes rotating-text {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  /*
    the fade-in will happen from 0 to 2% of the total animation duration
      0.02 * 28 is about a half second
  */
  2%,
  13% {
    /*
      the length of this keyframe segment should match how long we want each item
      to be held in-view

      so if we want it to display for ~3 seconds,
        from 2 to 13 = 11% of 28s, which is about 3
    */
    opacity: 1;
    transform: translateY(0);
  }
  /*
    the fade-in will happen from 18 to 20% of the total animation duration
      again, about a half second
  */
  15%,
  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}

.tqc-footer-list {
  @media (min-width: 768px) {
    --flex-gap: 24px;

    .tqc-footer-list-extra-col {
      align-self: end;
    }
  }

  @media (max-width: 767px) {
    --flex-gap: 12px;
  }
}

.tqc-toast-container {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1000;
  transform: translateY(200%);
  transition: transform 0.5s ease-in-out;
}

.tqc-toast-container.show {
  transform: translateY(0);
}

/* Override Pit Viper's hardcoded toast SVG fill colors */
.pv-surface-success svg:not([class*="pv-button"] svg) {
  fill: currentColor !important;
}

.tqc-back-to-results {
  @media (min-width: 768px) {
    padding-top: 24px;
  }
}
.tqc-hero-headline {
  font-size: clamp(3rem, 1.5rem + 2.75vw, 5rem);
  max-width: 12ch;
  @media (min-width: 768px) {
    max-width: 28ch;
  }
}

/* pv-label-selectable missed states */
.pv-label-selectable:has(:disabled) {
  color: #6e7784;
  border: 2px solid var(--color-border);
  cursor: auto;
}
.pv-label-selectable:has(:disabled):hover {
  color: #6e7784;
  border: 2px solid var(--color-border);
}

/* HOMEPAGE */
/* modifications for mobile */
@media (max-width: 768px) {
  .tqc-enterprise-solutions {
    /* override pv-figure-details grid display */
    margin-top: 128px;
  }
  .tqc-enterprise-figure-details {
    display: inline;
  }
}
/* used with pv-inset-block to make the inset size responsive to the screen size */
.tqc-responsive-inset {
  --inset-size: clamp(3rem, 3.714rem + 4.762vw, 5rem);
}

.tqc-desktop-top-section {
  @media (min-width: 768px) {
    padding: 24px 32px 0 32px;
  }
}

.tqc-inset-block-128-responsive {
  padding-top: 128px;
  padding-bottom: 128px;

  @media (max-width: 768px) {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

.tq-header-nav nav.tq-mobile-menu-section {
  display: none;
  padding: 0px;
  width: 100%;
}

body[data-menu] {
  overflow-y: hidden;

  .tq-header-nav .tq-mobile-header {
    height: 100dvh;
  }

  .tq-header-nav .tq-mobile-menu-section {
    display: flex;
  }
}

/* Language Modal */
.tq-language-modal-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: white;
  overflow-y: auto;
  z-index: 100;
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
}

body[data-language-modal] {
  overflow-y: hidden;

  .tq-language-modal-section {
    display: flex !important;
    transform: translateY(0);
  }
}

/* Insurance Selector */
#insurance-selector-popover label:hover {
  cursor: pointer;
}
.insurance-selector-toggle {
  line-height: 1.1;
  --inset-size: 0;
}
.tqc-responsive-corners {
  border-radius: clamp(0.75rem, 0.5rem + 0.833vw, 1.25rem);
}

#orbit-group {
  animation: orbit 3s linear infinite;
  transform-origin: 30px 10px;
}

@keyframes orbit {
  0% {
    transform: rotate(0deg) translateX(17px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(17px) rotate(-360deg);
  }
}

/* Screen reader */
/* styling borrowed from https://www.a11y-collective.com/blog/skip-to-main-content/ */
.tqc-screen-reader {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1em;
  background-color: black;
  color: white;
  opacity: 0;

  &:focus {
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
  }
}

viewport-intersection-observer {
  display: block;
}

.price-relativity-overview-container {
  @media (min-width: 768px) {
    align-self: start;
  }
}

.tcq-gfe-provider {
  background-color: #c86628;
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
}

#insurance-selector-dialog {
  --max-height: 680px;
  height: 100%;
  --max-width: 490px;

  .tqc-dialog-viewport {
    height: 100%;
  }

  .htmx-request {
    .tqc-modal-step,
    .tqc-close-button {
      display: none;
    }

    .tqc-modal-indicator {
      display: flex;

      .tqc-close-button {
        display: block;
      }
    }
  }

  .tqc-modal-step {
    --max-height: 680px;
    height: 100%;
    --max-width: 490px;
    --flex-align: stretch;
    --flex-gap: 0;
  }

  label .pv-company-xl {
    background-color: unset;
  }
}

@media (max-width: 767px) {
  #insurance-selector-dialog {
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;

    .tqc-modal-step {
      max-width: 100vw;
      max-height: 100vh;
      width: 100%;
    }
  }
}

.tqc-yellow-dark {
  color: #e5a000;
}

.tqc-text-interactive {
  color: var(--color-text-interactive);
}

.tqc-popular-services-grid {
  --grid-col-min: auto;
  @media (min-width: 768px) {
    --grid-col-min: 360px;
  }
}

tqc-sticky-header {
  display: block;
}

.tqc-invisible {
  opacity: 0;
  pointer-events: none;
}

.tq-header-nav {
  &:not([logged-in]) .tqc-logged-in {
    display: none;
  }

  &[logged-in] .tqc-not-logged-in {
    display: none;
  }
}

a[data-action] {
  cursor: pointer;
}

.tqc-guidance-card {
  --inset-size: 1.5rem;

  .tqc-home-guidance-carousel & {
    --radius: 0.75rem;
    --inset-size: 2rem;
    &.pv-bordered {
      border: 0;
    }
    &.pv-shadow {
      box-shadow:
        0px 13px 27px -5px rgba(2, 54, 61, 0.2),
        0px 8px 16px -8px rgb(2 54 61 / 0%);
    }

    h2 {
      font-size: 1.25rem;
      line-height: 1.2;
      font-weight: 700;
    }

    img {
      max-width: 88px;
    }
  }
}

tqc-carousel {
  /*
      magic number to prevent overflow clipping of our box shadow, which is
      8px y-offset + 16px blur radius (pit-viper 1)
    */
  --buffer-padding-for-shadow: 24px;

  .tqc-home-guidance-carousel & {
    /* turquoise customer has a bigger shadow */
    --buffer-padding-for-shadow: 36px;
  }
  .tqc-carousel-dots {
    display: flex;
    justify-content: center;
    column-gap: 0.5rem;
    button {
      background: none;
      border: none;
      padding: 0;
    }
    & svg {
      fill: var(--button-primary-background-color);
      opacity: 0.15;
    }

    & .tqc-carousel--active svg {
      opacity: 1;
    }

    @media screen and (min-width: 768px) {
      display: none;
    }
  }

  .tqc-carousel-row {
    display: flex;
    gap: 1rem;

    /* needed to make carousel children same-height */
    align-items: stretch;

    @media screen and (max-width: 767px) {
      overflow-x: auto;
      scrollbar-width: none;
      scroll-snap-type: x mandatory;
      gap: 0.5rem;
      padding-bottom: var(--buffer-padding-for-shadow);

      /*
        prevent x-axis clipping. magic numbers here align with the container padding.
        if changed, corresponding changes need to be made to `NEGATIVE_MARGIN_BUFFER` in tqc-carousel.js.
      */
      scroll-padding-inline-start: 24px;
      padding-left: 24px;
      margin-left: -24px;
      padding-right: 24px;
      margin-right: -24px;
    }
  }

  .tqc-carousel-item {
    transition:
      transform 200ms ease,
      box-shadow 200ms ease;

    &:not(.tqc-carousel--active) {
      transform: scale(0.95);

      @media screen and (min-width: 768px) {
        transform: none;
      }
    }

    flex: 0 0 calc(100% - 1rem);
    scroll-snap-align: start;

    /* along with align-items: stretch on the container, this is needed
       to make carousel children same-height. items are flex-columns, and their
       children are allowed to grow. */
    display: flex;
    flex-direction: column;
    > * {
      flex: 1;
    }

    @media screen and (min-width: 768px) {
      /*
        explaining the shorthand since flex-basis: 0 is not intuitive --
          flex-grow 1: grow if space is available
          flex-shrink 1: shrink if needed
          flex-basis 0: pretend I'm 0 width and grow from there
      */
      flex: 1 1 0;
      scroll-snap-align: none;
    }
  }
}

/*
  <tqc-tooltip> needs to move visible tooltips to the end of
  document.body to resolve various issues with overlapping stacking.
    (a.k.a., "portaling to the body")

  pit-viper tooltip styles depend on being inside a hovered .pv-tooltip,
  so they won't apply when the element is moved. hence this duplication
  which may need to be kept up to date with pit-viper upgrades.

  https://github.com/turquoisehealth/pit-viper/blob/main/_src/assets/scss/components/_tooltips.scss#L10-L27
*/
tqc-tooltip [role="tooltip"] {
  display: none;
}

[role="tooltip"].tqc-tooltip-visible {
  display: inline-block;
  position: fixed;
  width: max-content;
  max-width: var(--max-width, 20rem);
  background-color: #011214;
  color: #ffffff;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.42857143;
  box-shadow:
    0px 12px 16px 0px rgba(0, 0, 0, 0.1),
    0px 8px 12px -4px rgba(0, 0, 0, 0.08),
    0px 0px 1px 0px rgba(0, 0, 0, 0.3);
  z-index: 50;
  border: 1px solid transparent;
  /*
    when the tooltip trigger is near the edge, the tooltip content
    can reveal itself under the cursor, which will fire a mouseleave
    on the trigger and immediately hide the tooltip content.

    pointer-events:none prevents the tooltip content from capturing the mouse
    and fixes this issue, but also means we cannot have links or interactive
    elements in the tooltip content. we don't currently, but if we do,
    we need to remove this style and add more complexity to the event
    handling in tqc-tooltip.
  */
  pointer-events: none;
}

/* Debug Panel Styles */
.ui-blocks-highlight :has(> [data-ui-block]) {
  outline: 2px dashed #6933ff;
  outline-offset: 4px;
}
#debug-panel-trigger {
  position: fixed;
}
#block-json-content {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}
#debug-panel-drawer {
  --max-width: 400px;
}

#debug-panel-drawer .tqc-debug-panel-close-form {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
}

.tqc-debug-panel-flow {
  --flow-size: 2.5rem;
}

#block-json-viewer {
  --max-height: 600px;
}

#block-json-viewer .tqc-debug-panel-close-form {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

@media print {
  .tqc-hide-on-print {
    display: none;
  }
}

@media not print {
  .tqc-show-on-print {
    display: none;
  }
}