/* guess the next word: model tabs, sentence numbers, the sentence, top guesses, word tabs */
.pr { flex: 1; display: flex; flex-direction: column; gap: 2.4vh; min-width: 0; }
.pr .prompt-line { font-size: 2rem; margin-top: 1vh; }
.pr .bars { flex: none; gap: .6rem; }
.pr .bar-row { font-size: 1.15rem; grid-template-columns: 10em 1fr 5em; }
.pr .bar-row .track { height: 1.2em; }
.web-stages.pr-steps { justify-content: flex-start; gap: .4rem; }
.web-stages.pr-steps span { cursor: pointer; }

/* polite on the surface: two framed boxes (riemer.fyi style); the "underneath" box wipes in.
   Uses .rc-label (cards.css) and .dl-* (dialect.css) for the header and the word boxes. */
.po { flex: 1; display: flex; flex-direction: column; gap: 2.4vh; min-width: 0; }
.po-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.8vw; align-content: center; }
.po-col { display: flex; flex-direction: column; min-width: 0; container-type: inline-size; border: var(--rule) solid var(--ink); }
.po-col .rc-label { font-size: 3.4cqi; padding: 2.4cqi 4.5cqi; }
.po-q { font-size: 4.4cqi; font-weight: 700; padding: 3.5cqi 4.5cqi; border-bottom: var(--rule) solid var(--ink); }
.po-q .x { background: var(--ink); color: var(--bg); padding: 0 .18em; }
.po-body { padding: 3.5cqi 4.5cqi 4.5cqi; display: grid; gap: 2cqi; align-content: start; }
.po-a { font-size: 3.9cqi; line-height: 1.4; }
.po-col:last-child { clip-path: inset(0 100% 0 0); transition: clip-path .5s cubic-bezier(.7,0,.2,1); }
.po-col:last-child.on { clip-path: inset(0 0 0 0); }
.po .po-words { clip-path: none; }   /* the whole box wipes in, not the list (overrides .dl-jobs) */