/* Two columns: L2 | L1 */
.pair-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: 0;           /* optional */
  align-items: start;
}

/* Each cell fills row height; allow text to wrap within column width */
.cell {
  padding: .15rem 0;
  border-bottom: 1px solid #eee;
  align-self: stretch;
  min-width: 0;         /* IMPORTANT: lets long text wrap instead of forcing new row */
  overflow-wrap: anywhere;
}

/* Full UD tag palette (pastel, readable) */
.upos-ADJ   { background:#fff3cd }  /* Adjective */
.upos-ADP   { background:#e2f0d9 }  /* Adposition (pre/postposition) */
.upos-ADV   { background:#ede7f6 }
.upos-AUX   { background:#e0f7fa }
.upos-CCONJ { background:#fce4ec }
.upos-DET   { background:#f3e5f5 }
.upos-INTJ  { background:#ffe0b2 }
.upos-NOUN  { background:#e6f4ff }
.upos-NUM   { background:#f1f8e9 }
.upos-PART  { background:#f8bbd0 }
.upos-PRON  { background:#e8f5e9 }
.upos-PROPN { background:#dcedc8 }
.upos-PUNCT { background:#eeeeee }
.upos-SCONJ { background:#f0f4c3 }
.upos-SYM   { background:#ffecb3 }
.upos-VERB  { background:#e8ffe6 }
.upos-X     { background:#f5f5f5 }  /* Other/unknown */

/* Legend chips */
.legend { display:flex; flex-wrap:wrap; gap:.4rem; margin:.5rem 0 1rem }
.legend .chip { font-size:.85em; border:1px solid #ddd; border-radius:.5rem; padding:.15rem .4rem }
.legend .chip .swatch { display:inline-block; width:.85em; height:.85em; border-radius:.2em; margin-right:.35em; vertical-align:-0.15em; }

.tok { cursor: pointer; border-radius:.25rem; padding:0 .15rem }
.tok.hl { outline: 2px solid rgba(0,0,0,.2); background: rgba(255,235,59,.25); }


/* Optional: remove any mobile stacking you might have added earlier */
@media (max-width: 640px) {
  /* If you want to KEEP two columns even on mobile, leave this empty */
  /* If you want stacking on mobile, put grid-template-columns: 1fr here */
}