/* nb_glass_tooltip.css, Glass Canon mouseover boxes for LearnNote desk chrome.
   Native title= cannot be styled. #nb-glass-tip is the themed replacement.
   Also retints the glossary hover popover and STREAM pointer label into the
   same navy-glass / cyan-hairline register. Tokens from brand/learnnote. */

#nb-glass-tip {
  position: fixed;
  z-index: 80;
  max-width: min(22rem, calc(100vw - 16px));
  padding: 6px 10px;
  margin: 0;
  pointer-events: none;
  border: 1px solid var(--glass-border-hover, rgba(84, 239, 255, 0.40));
  border-radius: var(--radius-sm, 4px);
  background:
    linear-gradient(170deg, var(--ct-navy-top, #172B4D) 0%, var(--ct-navy-bottom, #0F1D3A) 100%);
  color: var(--ct-text, #F5F9FC);
  font-family: Montserrat, Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-drop, 0 8px 32px rgba(0, 0, 0, 0.5));
  backdrop-filter: blur(var(--blur-card, 10px));
  white-space: normal;
}

#nb-glass-tip[hidden] { display: none; }

#nb-glass-tip.is-in {
  opacity: 1;
}

#nb-glass-tip.is-from-focus {
  box-shadow: var(--shadow-focus, 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 16px rgba(84, 239, 255, 0.20));
}

@media (prefers-reduced-motion: no-preference) {
  #nb-glass-tip.is-in {
    animation: nb-glass-tip-in var(--nb-enter-ms, 1500ms) ease;
  }
}

@keyframes nb-glass-tip-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #nb-glass-tip.is-in {
    animation: none;
  }
}

/* Glossary mouseover/tap box: same glass, text leads, cyan as hairline only. */
.nb2-gloss-pop {
  border-color: var(--glass-border-hover, rgba(84, 239, 255, 0.40));
  background:
    linear-gradient(170deg, var(--ct-navy-top, #172B4D) 0%, var(--ct-navy-bottom, #0F1D3A) 100%);
  color: var(--ct-text, #F5F9FC);
  font-family: Montserrat, Inter, ui-sans-serif, system-ui, sans-serif;
  box-shadow: var(--shadow-drop, 0 8px 32px rgba(0, 0, 0, 0.5));
  backdrop-filter: blur(var(--blur-card, 10px));
}

.nb2-gloss-pop-term {
  color: var(--ct-cyan, #54efff);
}

.nb2-gloss-pop-src {
  color: var(--ct-text-muted, rgba(245, 249, 252, 0.75));
  border-color: var(--glass-border-quiet, rgba(84, 239, 255, 0.20));
}

.nb2-gloss-pop-exp {
  color: var(--ct-text, #F5F9FC);
}

/* STREAM pointer label: instrument chip, not a receded glass plate.
   Solid canvas navy so body copy cannot bleed through. Hairline cyan only. */
.nb-pointer-helper-label {
  padding: 4px 8px;
  opacity: 1;
  isolation: isolate;
  border: 1px solid var(--glass-border-hover, rgba(84, 239, 255, 0.40));
  border-radius: var(--radius-sm, 4px);
  background: var(--ct-navy-bottom, #0F1D3A);
  background-color: var(--ct-navy-bottom, #0F1D3A);
  color: var(--ct-text, #F5F9FC);
  font-family: Montserrat, Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  text-shadow: none;
  box-shadow: 0 0 4px rgba(84, 239, 255, 0.16);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.eink #nb-glass-tip,
body.eink .nb2-gloss-pop,
body.eink .nb-pointer-helper-label {
  background: #ffffff;
  border-color: #000000;
  color: #000000;
  box-shadow: none;
  backdrop-filter: none;
}

body.eink .nb2-gloss-pop-term,
body.eink .nb2-gloss-pop-src,
body.eink .nb2-gloss-pop-exp {
  color: #000000;
}