/* FAQ term underline and tooltip chrome.
   Markup and positioning logic live in lib/components/faq_term.dart. */

.term {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(0, 109, 68, 0.45);
  padding-bottom: 1px;
  cursor: help;
  transition: border-color 200ms ease, background 200ms ease;
}

.term:hover {
  border-bottom-color: #006d44;
  background: rgba(0, 109, 68, 0.05);
}

.faq-tip {
  z-index: 30;
  width: 360px;
  max-width: calc(100vw - 32px);
  padding: 20px;
  background: #fcf9f4;
  color: #1c1c19;
  border-radius: 8px;
  box-shadow:
    0 24px 48px rgba(0, 10, 30, 0.18),
    0 0 0 1px rgba(28, 28, 25, 0.06);
}

.faq-tip::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 32px;
  width: 14px;
  height: 14px;
  background: #fcf9f4;
  transform: rotate(45deg);
  border-radius: 2px;
  box-shadow: -1px -1px 0 rgba(28, 28, 25, 0.06);
}

.faq-tip-close {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 0;
  background: none;
  border: none;
  color: rgba(28, 28, 25, 0.35);
  cursor: pointer;
}

.faq-tip-close:hover {
  color: #1c1c19;
}

.faq-tip-backdrop {
  display: none;
}

@keyframes faq-sheet-up {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes faq-sheet-fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .faq-tip-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 10, 30, 0.45);
    z-index: 29;
    animation: faq-sheet-fade 200ms ease;
  }

  .faq-tip {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0;
    bottom: 64px;
    width: auto;
    max-width: none;
    max-height: calc(85vh - 64px);
    overflow-y: auto;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -16px 48px rgba(0, 10, 30, 0.28);
    animation: faq-sheet-up 260ms cubic-bezier(.2, 0, 0, 1);
  }

  .faq-tip::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-tip,
  .faq-tip-backdrop {
    animation: none;
  }
}