/* A small reading note beneath the verse, using its existing word meanings. */
body .urdu-word[data-word-note] {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
body .urdu-word[data-word-note]::before,
body .urdu-word[data-word-note]::after { content: none !important; }
body .urdu-word[data-word-note][aria-expanded="true"] {
  color: var(--text);
  border-bottom: 1px solid currentColor;
}
body .urdu-word[data-word-note]:hover {
  color: var(--text);
  border-bottom-color: currentColor;
}
body .urdu-word[data-word-note]:focus-visible {
  color: var(--text);
  border-bottom-color: currentColor;
  outline: 1px solid var(--text);
  outline-offset: 5px;
  border-radius: 1px;
}
.word-note {
  position: relative;
  width: min(100%, 520px);
  min-height: 118px;
  margin: 34px auto 0;
  padding: 22px 44px 22px 0;
  border-top: 1px solid var(--border);
  text-align: left;
  font-style: normal;
  letter-spacing: 0;
}
.word-note__label {
  display: block;
  margin-bottom: 12px;
  font: 400 9px/1.5 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-sec);
}
.word-note__reading {
  display: grid;
  grid-template-columns: minmax(90px, .8fr) minmax(0, 1.4fr);
  align-items: baseline;
  gap: 12px 28px;
}
.word-note__word {
  font: 400 24px/1.35 var(--serif);
  color: var(--text);
  overflow-wrap: anywhere;
}
.word-note__meaning {
  font: 400 13px/1.7 var(--sans);
  color: var(--text);
  overflow-wrap: anywhere;
}
.word-note__hint {
  grid-column: 1 / -1;
  font: 400 12px/1.8 var(--sans);
  color: var(--text-sec);
}
.word-note__close {
  position: absolute;
  right: -8px;
  top: 28px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-sec);
  font: 300 20px/1 var(--sans);
  cursor: pointer;
}
.word-note__close:hover { color: var(--text); }
.word-note__close:focus-visible { outline: 1px solid var(--text); outline-offset: 2px; }
.word-note__close[hidden] { display: none; }
@media (max-width: 600px) {
  .word-note { margin-top: 28px; min-height: 126px; padding-right: 32px; }
  .word-note__reading { grid-template-columns: 1fr; gap: 6px; }
  .word-note__word { font-size: 23px; }
  .word-note__close { top: 12px; }
}
@media print {
  .word-note { display: none; }
  body .urdu-word[data-word-note],
  body .urdu-word[data-word-note][aria-expanded="true"] { border: 0; color: inherit; }
}