/* Control Room — room for longer languages. French is 20–30 % longer than English and Russian more, so buttons, tabs and labels may wrap,
   boxes may grow, and a long word may break; nothing is cut off and nothing makes the page scroll sideways.
   Loaded last so it wins over the one-line rules of the other sheets. Check with ?lang=pseudo (every string +40 % and accented). */
body { overflow-wrap: break-word; }

/* buttons: a label may take two lines (the pill grows) */
.btn, .pbtn { white-space: normal; height: auto; padding-top: 6px; padding-bottom: 6px; line-height: 1.2; text-align: center; max-width: 100%; }
.btn.plain { padding-left: 8px; padding-right: 8px; }
.btn { flex: none; }          /* a button keeps the width of its label in a row (a long label is capped by max-width and wraps); it is the text beside it that gives way, never the button squeezed into a circle */
.btn kbd { flex: none; }

/* segmented controls and tab strips: equal-width pieces whose labels wrap, or a strip that wraps onto a second line */
.seg button, .seg a { white-space: normal; height: auto; min-width: 0; padding: 6px 10px; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.seg.full { flex-wrap: nowrap; }
.mode-card .seg.mode button { white-space: normal; padding: 6px 8px; }
.seg.sx-many { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); overflow-x: visible; }          /* the tabs of the Pipeline: one row when there is room, otherwise rows of equal cells (no ragged second row) */
.seg.sx-many a { white-space: normal; flex: 1 1 auto; }
/* the tabs of Prepare (up to ten): a tab is never broken inside a word. A phone scrolls the strip sideways, a wider window lays the tabs out in rows of equal cells */
.seg.pr-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.seg.pr-tabs::-webkit-scrollbar { display: none; }
.seg.pr-tabs a { white-space: nowrap; overflow-wrap: normal; flex: 1 0 auto; padding: 6px 12px; }
@media (min-width: 600px) { .seg.pr-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); overflow-x: visible; } }
.seg.pal-tabs a { white-space: nowrap; overflow-wrap: normal; flex: 1 0 auto; padding: 6px 12px; }
@media (min-width: 600px) { .seg.pal-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); overflow-x: visible; } }
/* a phone: a label of a segmented control gets a smaller type and tighter sides before a word is broken in two */
@media (max-width: 420px) { .seg button, .seg a { padding: 6px 4px; font-size: 13px; hyphens: auto; } .seg.pr-tabs a, .seg.pal-tabs a { padding: 6px 12px; font-size: 14px; } }
.auth-form .seg button { min-height: 40px; }

/* grids of equal columns: 1fr would not shrink below the longest word */
.funnel, .stepper { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.funnel .cell small, .funnel .cell em, .stepper li { overflow-wrap: anywhere; hyphens: auto; }
.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tiles > div span, .stat span { overflow-wrap: anywhere; }

/* list rows: the name and the right-hand note may wrap under each other */
.row .t { flex-wrap: wrap; row-gap: 0; }
.row .value { white-space: normal; text-align: right; }
.row .t .when { white-space: normal; }
.sig:not(.dot-only), .cost, .plan-tag, .tag, .ch, .camp-chip { white-space: normal; }
.tag, .ch, .plan-tag { height: auto; min-height: 22px; padding-top: 2px; padding-bottom: 2px; line-height: 1.2; }
.chip { white-space: normal; height: auto; padding-top: 6px; padding-bottom: 6px; line-height: 1.2; }
.chips:not(.wrap) .chip { white-space: nowrap; }          /* a scrolling strip of chips keeps one line per chip */
.pr-dec button { white-space: nowrap; }          /* GO / NO GO: one line, one size, never a circle */

/* the language chooser must not push anything out */
.lang-menu { max-width: 100%; }

/* the one-column layouts of the phone: a grid column would not shrink below its longest word */
.today > *, .agent-grid > *, .brief-grid > * { min-width: 0; }
@media (max-width: 899px) { .today { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1099px) { .agent-grid, .brief-grid { grid-template-columns: minmax(0, 1fr); } }
.letter, .subj, .bubble, .md, .quote, .src-body, .thread-empty, .empty-note, .foot, .help, .fail, .lede { overflow-wrap: anywhere; }

/* rows of buttons: they wrap instead of running out of the box */
.actions { min-width: 0; max-width: 100%; }
.pr-panel .actions { flex: 0 1 auto; }

/* settings rows: a long label leaves the control below it instead of pushing it out */
.form-row { flex-wrap: wrap; row-gap: 6px; }
.form-row label, .form-row .lbl { flex: 1 1 150px; min-width: 0; }
.form-row.stack { flex-wrap: nowrap; }

/* small captions under icons and in the client cards: wrap (with a hyphen) instead of an ellipsis */
.s4-stage small { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; hyphens: auto; line-height: 1.15; }
.sm-ladder small, .funnel .cell small { white-space: normal; overflow-wrap: anywhere; hyphens: auto; }
.row .body, .row .t, .row .s { overflow-wrap: anywhere; }

/* client cards: the name keeps a readable width (the waiting badge goes under it when it must), the numbers share the row */
.cl-head { flex-wrap: wrap; }
.cl-head .body { flex: 1 1 130px; }
.cl-head .wait { margin-left: auto; white-space: normal; height: auto; min-height: 26px; padding-top: 3px; padding-bottom: 3px; line-height: 1.2; }
.cl-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cl-nums span { overflow-wrap: anywhere; hyphens: auto; }
.cl-nums b { overflow-wrap: anywhere; font-size: clamp(18px, 6vw, 24px); }
.tiles-cl, .stats, .kv { min-width: 0; }
.cl-name small { white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }       /* the client's own name keeps its ellipsis */

/* the three buttons under a message: equal shares that can shrink, labels wrap */
.qcard .q-act { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); }
.qcard .q-act .btn { padding-left: 8px; padding-right: 8px; }

/* the head of a dialog: Cancel, the title and the main button; with long words the title takes its own line instead of pushing a button out */
.sheet-head { flex-wrap: wrap; row-gap: 4px; }
.sheet-head h2 { flex: 1 1 120px; min-width: 0; overflow-wrap: anywhere; }
.sheet-head .btn { max-width: 100%; }