/* sp-b: small helpers for KB articles built on sp-a's template (prefix kb-b-) */

/* ---------- 1. Mock-UI rows that wrap instead of truncating on phones ----------
   Usage: <div class="kb-ui__rows kb-b-rows" style="--cols:…; --cols-m:1fr 1fr"> (--cols-m:1fr stacks
   each row), and add .kb-b-xs-hide to cells or rows that can drop out on narrow screens. */
@media (max-width: 640px) {
  .kb-b-rows .kb-ui__row { grid-template-columns: var(--cols-m, 1fr 1fr) !important; align-items: start; }
  .kb-b-rows .kb-ui__row > * { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
  .kb-b-rows .kb-ui__row > .kb-b-xs-hide, .kb-b-rows .kb-ui__row.kb-b-xs-hide { display: none; }
  .kb-b-rows .kb-ui__row:not(.kb-ui__row--head) { row-gap: 5px; }
  .kb-b-rows .kb-ui__row.kb-b-xs-hide + .kb-ui__row { border-top: 0; }
  .kb-b-rows .kb-ui__pill { height: auto; min-height: 20px; padding: 2px 8px; line-height: 1.35; white-space: normal; }
}
/* a status that needs attention, next to the green "validated" pills */
.kb-ui__pill.kb-b-pill--warn { background: color-mix(in srgb, var(--amber) 16%, var(--card)); color: color-mix(in srgb, var(--amber) 55%, var(--ink)); }
/* keeps a short token ("(ea-php81)", "SC-081", "EV ₹12,999") on one line */
.kb-b-nw { white-space: nowrap; }

/* ---------- 2. Text: no single word left alone on the last line of a heading ---------- */
.kb-prose :is(h2, h3), .kb-fix > summary { text-wrap: balance; }
.kb-prose :is(p, li) { text-wrap: pretty; }

/* "Before you start" facts: a value starts right under its label, even when the fact beside it
   runs to two lines (the grid would otherwise share the extra height between label and value) */
.kb-before__facts > div { align-content: start; }

/* ---------- 3. Tables ---------- */
/* the first line of every cell shares one baseline, so mono values sit level with the text beside them
   (no effect in sp-a's "rows" and "cards" layouts, where cells are grid items or blocks) */
.kb-table tbody :is(th, td) { vertical-align: baseline; }
@media (min-width: 641px) {
  /* .kb-b-key: short row names stay on one line; the longer text columns wrap instead */
  .kb-b-key tbody th[scope="row"] { white-space: nowrap; }
  /* .kb-b-val: short values ("7 days (licences excluded)") stay on one line next to a long row name */
  .kb-b-val tbody td { white-space: nowrap; }
  /* .kb-b-cmds: a command is never broken across lines */
  .kb-b-cmds td.kb-mono { white-space: nowrap; }
}
/* a row name that has to wrap breaks into even lines ("Automatic / updates on", not "Automatic updates / on") */
.kb-table tbody th { text-wrap: balance; }