/* Trigram tooltip — used in book.html (Shao Yun grid) and i-ching/index.html (cast result) */

[data-top-bits][data-bottom-bits] { cursor: help; }

#tt-root {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  width: min(440px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  background: #15110d;
  border: 1px solid #2a2520;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  padding: 4px;
  font-family: 'Charter', 'Iowan Old Style', 'Georgia', serif;
  color: #e8e6e0;
  font-size: 14px;
  line-height: 1.5;
  display: none;
}
#tt-root.tt-visible { display: block; }

.tt-card {
  padding: 12px 14px;
  border-radius: 6px;
}
.tt-card + .tt-card { margin-top: 4px; border-top: 1px dashed #2a2520; padding-top: 14px; }

.tt-card-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.tt-pos {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6760;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  padding: 2px 6px;
  border: 1px solid #2a2520;
  border-radius: 999px;
}
.tt-vis {
  display: inline-flex; flex-direction: column; gap: 2px;
}
.tt-line { display: flex; width: 22px; height: 2.5px; gap: 4px; }
.tt-line.tt-yin { gap: 6px; }
.tt-line .tt-seg { flex: 1; height: 100%; background: #d4a04c; border-radius: 1px; }
.tt-title { font-weight: 600; color: #e8e6e0; font-size: 14.5px; }

.tt-headline {
  color: #f1d37a;
  font-weight: 600;
  font-size: 14.5px;
  margin-bottom: 6px;
}
.tt-body {
  color: #e8e6e0;
  margin-bottom: 8px;
  font-size: 13.5px;
  line-height: 1.55;
}
.tt-attrs {
  color: #9a978f;
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.6;
}
.tt-attr { display: block; }
.tt-attr em { color: #b88c3e; font-style: normal; font-weight: 500; margin-right: 4px; }

@media (max-width: 480px) {
  #tt-root { width: calc(100vw - 16px); font-size: 13px; }
  .tt-card { padding: 10px 11px; }
}