.knowledge-tooltip {
  position: fixed;
  z-index: 9999;

  width:
    min(
      340px,
      calc(100vw - 24px)
    );

  max-height:
    min(
      520px,
      calc(100vh - 28px)
    );

  overflow-y: auto;

  padding:
    12px 12px 10px;

  pointer-events: none;
  visibility: hidden;
  opacity: 0;

  transform:
    translateY(6px)
    scale(0.98);

  transition:
    opacity 0.12s ease,
    transform 0.12s ease,
    visibility 0s linear 0.12s;

  background:
    rgba(20, 20, 20, 0.97);

  color:
    #f4ecd8;

  border:
    1px solid
    rgba(255, 255, 255, 0.14);

  border-radius:
    12px;

  box-shadow:
    0 14px 40px
    rgba(0, 0, 0, 0.45);

  font-family:
    inherit;
}

.knowledge-tooltip.visible {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;

  transform:
    translateY(0)
    scale(1);

  transition-delay: 0s;
}

.knowledge-tooltip .kt-title {
  margin-bottom: 4px;

  color: #f1c40f;

  font-family:
    "Cinzel", serif;

  font-size: 14px;
  font-weight: 700;

  letter-spacing: 0.3px;
}

.knowledge-tooltip .kt-meta {
  margin-bottom: 8px;

  display: flex;
  flex-wrap: wrap;

  gap: 6px;

  font-size: 10px;

  opacity: 0.9;
}

.knowledge-tooltip .kt-pill {
  display: inline-block;

  padding: 2px 7px;

  background:
    rgba(241, 196, 15, 0.14);

  border:
    1px solid
    rgba(241, 196, 15, 0.2);

  border-radius:
    999px;
}

.knowledge-tooltip .kt-section {
  margin-top: 8px;
}

.knowledge-tooltip .kt-section-title {
  margin-bottom: 4px;

  color: #dda15e;

  font-size: 10px;

  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.knowledge-tooltip ul {
  margin: 0;
  padding-left: 18px;

  font-size: 12px;
  line-height: 1.35;
}

.knowledge-tooltip p {
  margin: 0;

  font-size: 12px;
  line-height: 1.4;
}

.knowledge-tooltip .kt-actions {
  margin-top: 10px;
  padding-top: 9px;

  display: flex;
  justify-content: flex-end;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.12);
}

.knowledge-tooltip .kt-codex-link {
  min-height: 34px;
  padding: 7px 14px;

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

  color: #17130a;
  font-family: "Cinzel", serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;

  background:
    linear-gradient(
      180deg,
      #f1c40f,
      #d4a90d
    );

  border:
    1px solid
    rgba(255, 229, 138, 0.8);

  border-radius: 8px;

  cursor: pointer;
}

.knowledge-tooltip .kt-codex-link:hover {
  color: #17130a;
  filter: brightness(1.08);
}

.knowledge-tooltip .kt-codex-link:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

.tooltip-trigger {
  cursor: help;
}

label.tooltip-trigger,
span.tooltip-trigger,
h2.tooltip-trigger,
h3.tooltip-trigger {
  text-decoration:
    underline dotted
    rgba(92, 64, 51, 0.55);

  text-underline-offset:
    2px;
}

.tooltip-trigger:hover {
  text-decoration-color:
    rgba(192, 57, 43, 0.85);
}

.tooltip-trigger:focus-visible {
  outline:
    2px solid
    var(
      --accent-color,
      #8b4513
    );

  outline-offset:
    2px;
}

@media screen and (max-width: 640px) {
  .knowledge-tooltip {
    width:
      calc(100vw - 16px);

    left: 8px !important;
  }

  .knowledge-tooltip .kt-codex-link {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .knowledge-tooltip {
    transition: none;
  }
}


/* ==========================================================
   SPELL KNOWLEDGE CARDS
   ========================================================== */

.knowledge-tooltip .kt-spell-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}

.knowledge-tooltip .kt-spell-grid > div {
  padding: 6px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 7px;
  background: rgba(255,255,255,0.035);
}

.knowledge-tooltip .kt-spell-grid span,
.knowledge-tooltip .kt-spell-grid strong {
  display: block;
}

.knowledge-tooltip .kt-spell-grid span {
  margin-bottom: 2px;
  color: #dda15e;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.knowledge-tooltip .kt-spell-grid strong {
  font-size: 11px;
  line-height: 1.3;
}

@media screen and (max-width: 420px) {
  .knowledge-tooltip .kt-spell-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   KNOWLEDGE CARD PREFERENCE SWITCH
   ========================================================== */

.knowledge-card-control {
  margin-top: -2px;
}

.knowledge-card-switch {
  width: 100%;
  min-height: 34px;
  padding: 6px 7px;

  display: flex;
  align-items: center;
  gap: 8px;

  color: #ffffff;

  background:
    rgba(255, 255, 255, 0.055);

  border:
    1px solid
    rgba(255, 255, 255, 0.13);

  border-radius: 5px;

  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;

  cursor: pointer;
}

.knowledge-card-switch:hover {
  background:
    rgba(255, 255, 255, 0.09);
}

.knowledge-card-switch input {
  width: 1px;
  height: 1px;
  margin: 0;

  position: absolute;

  opacity: 0;
  pointer-events: none;
}

.knowledge-card-switch-track {
  width: 32px;
  height: 18px;

  flex: 0 0 32px;

  position: relative;

  background:
    #6b7280;

  border:
    1px solid
    rgba(255, 255, 255, 0.25);

  border-radius: 999px;

  transition:
    background 0.18s ease;
}

.knowledge-card-switch-knob {
  width: 12px;
  height: 12px;

  position: absolute;
  top: 2px;
  left: 2px;

  background:
    #ffffff;

  border-radius: 50%;

  box-shadow:
    0 1px 3px
    rgba(0, 0, 0, 0.45);

  transition:
    transform 0.18s ease;
}

.knowledge-card-switch input:checked +
.knowledge-card-switch-track {
  background:
    #27ae60;
}

.knowledge-card-switch input:checked +
.knowledge-card-switch-track
.knowledge-card-switch-knob {
  transform:
    translateX(14px);
}

.knowledge-card-switch input:focus-visible +
.knowledge-card-switch-track {
  outline:
    2px solid
    #ffffff;

  outline-offset:
    2px;
}


/* ==========================================================
   KNOWLEDGE CARDS DISABLED
   ========================================================== */

.knowledge-cards-disabled .tooltip-trigger {
  cursor: inherit;

  text-decoration:
    none !important;
}

.knowledge-cards-disabled
.spell-info-button,
.knowledge-cards-disabled
.class-feature-info {
  display:
    none !important;
}

.knowledge-cards-disabled
.knowledge-tooltip {
  display:
    none !important;
}