/* ============================================================
   annotations.css — key-term highlights, notes, tooltips,
   discussion cards, focus mode
   ============================================================ */

/* ============ key terms ============ */

.term {
  background: var(--term-bg, var(--accent-soft));
  border-bottom: 1px dotted var(--accent-deep);
  border-radius: 3px 3px 0 0;
  padding: 0 2px 1px;
  cursor: help;
  transition: background 0.12s;
}

.term:hover,
.term:focus-visible {
  background: var(--term-bg-hover, var(--accent-glow));
  outline: none;
}

.term:focus-visible {
  box-shadow: 0 0 0 2px var(--accent);
}

/* ============ notes column ============ */

.notes {
  display: grid;
  gap: 12px;
  align-content: start;
}

.note {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elev);
}

.note-icon {
  font-size: 14px;
  line-height: 1.5;
  flex: none;
}

.note-body {
  min-width: 0;
}

.note h4 {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.note p {
  margin: 0;
  font-size: 14px;
  line-height: 1.62;
  color: var(--text);
}

.note strong { font-weight: 700; }
.note em { font-style: italic; }

.note-info {
  background: var(--note-info-bg);
  border-color: var(--note-info-border);
}
.note-info .note-icon { color: var(--text-soft); }

.note-why {
  background: var(--note-why-bg);
  border-color: var(--note-why-border);
}
.note-why .note-icon { color: var(--ok); }

.note-warn {
  background: var(--note-warn-bg);
  border-color: var(--note-warn-border);
}
.note-warn .note-icon { color: var(--err); }

/* ============ discussion ============ */

.discussion li {
  color: var(--text);
}

/* ============ tooltip ============ */

.tooltip {
  position: fixed;
  z-index: 80;
  max-width: 300px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 10px 13px;
  box-shadow: var(--shadow);
  pointer-events: none;
}

.tooltip h5 {
  margin: 0 0 4px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--accent-deep);
}

.tooltip p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
}

/* ============ focus mode ============ */

body.focus .section {
  opacity: 0.14;
}

body.focus .section.is-active {
  opacity: 1;
}

body.focus .section {
  transition: opacity 0.35s ease;
}

/* keep hero & footer readable when focus is on */
body.focus .hero,
body.focus .legend,
body.focus .glossary,
body.focus .references,
body.focus .site-footer {
  opacity: 0.35;
  transition: opacity 0.35s ease;
}

/* ============ footnote ref ============ */

.fn-ref {
  text-decoration: none;
  font-weight: 700;
  font-size: 0.8em;
  vertical-align: super;
  color: var(--accent-deep);
}