/** minimal styles, tooltip polish, rhyme chips */
/* assets/app.css */
:root{
  --chip-radius: 6px;
}
body{ font-family: ui-sans-serif, system-ui; }

/* Tooltip baseline (your code already adds .annotated-tooltip) */
.annotated-tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted transparent;
}
.annotated-tooltip .tooltiptext {
  visibility: hidden;
  background-color: #111827; /* slate-900 */
  color: #fff;
  border-radius: 4px;
  padding: 4px 8px;
  position: absolute;
  z-index: 20;
  bottom: 130%; left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity .2s ease-in-out;
  font-size: 12px;
  white-space: pre-line;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.annotated-tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Chips (themes/devices) share style; color via .t{id}/.p{id} classes generated server-side */
.theme-chip,.device-chip{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:2px 8px;border-radius:var(--chip-radius);
  font-size:.75rem;font-weight:600;margin:.15rem .3rem .15rem 0;
  line-height:1.35;
}

/* Rhyme group underline (CSS generated from PHP adds .r1, .r2, …) */
[class^="r"], [class*=" r"] { text-decoration-thickness: .18rem; text-underline-offset: .12rem; }

/* Grade header */
#gradeArea.hidden{ display:none; }