.bank {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  gap: var(--space-3);
}

/* The field takes the row, the toggle is pinned to the panel edge — otherwise it floats in the
   emptiness between them. */
.search {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
}

.toolbar {
  display: flex;
  gap: var(--space-3);
  flex-direction: column;
  align-items: stretch;
}

/* The source side is one step larger: a hanzi at the same size reads smaller than Cyrillic, and
   in the pair "term → translation" it lost weight to what is derived from it. */
.src {
  overflow: hidden;
  flex: 0 1 auto;
  min-width: 0;
  color: var(--color-text);
  font-size: var(--font-size-source);
  text-overflow: ellipsis;
}

.dst {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The window is a suffix, not a column — almost no row has one. It shrinks FIRST: the term
   matters more than the note attached to it. */
.window {
  overflow: hidden;
  margin-left: var(--space-2);
  flex: 0 100 auto;
  min-width: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.quiet,
.absent {
  color: var(--color-text-secondary);
}

/* Revealed, it is ordinary text that ellipsizes. Nothing fades: a darkening tail reads as damage. */
.sense {
  display: block;
  overflow: hidden;
  min-width: 0;
  color: var(--color-text-secondary);
  text-overflow: ellipsis;
  transition: filter 140ms ease;
}

/* A plain blur and nothing else — two rules were learned the hard way here:
   - NOTHING may clip it. A blur mixes in what lies outside the ink, so a box ending at the glyphs
     ends the blur with a straight edge. That rules out `text-shadow` (own ink, cut by own
     `overflow`) and a mask (works over the box, and a blur reaches past it on all four sides).
   - The RADIUS decides whether this reads as blurred text or as grey bricks: at 5px words of this
     size fuse into slabs, at 3px their shapes survive and nothing is legible.
   `user-select` closes the plainest way round a spoiler — selecting the column copied every
   description at once. Find-in-page still reaches it; nothing that keeps text in the document can
   stop that. */
.senseCell .sense {
  overflow: visible;
  filter: blur(3px);
  user-select: none;
}

/* Two deliberate ways to reveal: hovering the cell (mouse) and the toggle, which opens the whole
   column (keyboard and screen reader — only it drops `aria-hidden`). */
.senseCell:hover .sense {
  filter: none;
  user-select: auto;
}

.state {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding-inline: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}