/* Small parts the book-search, data and result panels reuse: the sentence bar and the flow of boxes with arrows. */
.sentence { padding: 10px 14px; border-radius: 12px; background: rgb(255 255 255 / 0.08); font: 600 clamp(17px, 1.6vw, 20px)/1.35 var(--display); } /* a sentence or question */
.flow { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* boxes joined by arrows */
.flow-box { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid rgb(255 255 255 / 0.24); border-radius: 10px; font: 500 13px/1.3 var(--mono); } /* one step in a flow */
.flow-box.strong { border-color: transparent; background: var(--world-background); } /* the step that does the work */
.flow-arrow { position: relative; flex: none; width: 22px; height: 2px; background: var(--paper-faint); } /* arrow line */
.flow-arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border: solid var(--paper-faint); border-width: 2px 2px 0 0; transform: rotate(45deg); transform-origin: 70% 30%; } /* arrow head */
@media (max-width: 479px) { /* narrow phones: long flows stack so no arrow dangles at a line end */
  .flow-stack { flex-direction: column; align-items: flex-start; gap: 6px; } /* one box per row */
  .flow-stack .flow-arrow { width: 2px; height: 16px; margin-left: 14px; } /* arrow points down */
  .flow-stack .flow-arrow::after { left: -2.5px; right: auto; top: auto; bottom: 0; transform: rotate(135deg); transform-origin: center; } /* head points down */
}