/* slab-banner.css - THE ONE BANNER (.bnr). Approved by Adrienne 2026-10-14
   (docs: design board "Slab Banner System", section "Approved: B Button + D Link").
   Build with public/slab-banner.js (SlabBanner.render / SlabBanner.html) or write the same markup by hand:

     <div class="bnr" data-tone="attention" role="status">
       <i class="mi bnr-ico">info</i>
       <div class="bnr-body"><div class="bnr-t">Title</div><div class="bnr-s">Sub-line</div></div>
       <div class="bnr-acts">
         <button class="bnr-link" title="...">Link <i class="mi">open_in_new</i></button>
         <button class="bnr-btn"  title="...">Main Action <i class="mi">arrow_forward</i></button>
       </div>
       <button class="bnr-x" title="Dismiss This Banner"><i class="mi">close</i></button>
     </div>

   Sits INSIDE the page's .pg-col (or .cnt): width 100%, no side margin or padding of its own.
   Mobile: add .bnr-m (SlabBanner picks it on pages that carry the mobile light tokens).
   Self-contained: mobile pages never load slab-tokens.css, so every var() has a literal fallback.
   EVERY button / link colour lives in the token block below - a later tweak is one edit here.

   Tones: info | attention | alert | success | neutral.
   MAIN ACTION  = tinted ghost: the banner's tone at low alpha, lightened tone text, 1px border = the banner's
                  own border (--b-bd). Never a solid fill, never blue/green/red fill.
   SECOND ACTION = a text link (no box), max one, left of the button. */

:root{
  /* tone surface (desktop dark). Falls back to the literal board values when slab-tokens.css is absent. */
  --bnr-info-bg:var(--status-info-bg,rgba(37,133,182,.16));   --bnr-info-bd:var(--status-info-bd,rgba(37,133,182,.36));   --bnr-info-fg:var(--status-info-fg,#7BACD9);
  --bnr-attention-bg:var(--status-warn-bg,rgba(242,193,78,.14)); --bnr-attention-bd:var(--status-warn-bd,rgba(242,193,78,.38)); --bnr-attention-fg:var(--status-warn-fg,#F2C14E);
  --bnr-alert-bg:var(--status-alert-bg,rgba(178,58,34,.18));  --bnr-alert-bd:var(--status-alert-bd,rgba(178,58,34,.4));   --bnr-alert-fg:var(--status-alert-fg,#E06B54);
  --bnr-success-bg:var(--status-ok-bg,rgba(46,94,78,.35));    --bnr-success-bd:var(--status-ok-bd,rgba(82,168,130,.4));   --bnr-success-fg:var(--status-ok-fg,#52A882);
  --bnr-neutral-bg:rgba(255,255,255,.04); --bnr-neutral-bd:var(--border-strong,#2A3A52); --bnr-neutral-fg:var(--text-3,#9DACCB);
  /* main-action (tinted ghost) fill + hover, lightened label colour; second-action link colour */
  --bnr-btn-info-bg:rgba(37,133,182,.30);      --bnr-btn-info-hover:rgba(37,133,182,.36);
  --bnr-btn-attention-bg:rgba(242,193,78,.20); --bnr-btn-attention-hover:rgba(242,193,78,.25);
  --bnr-btn-alert-bg:rgba(178,58,34,.32);      --bnr-btn-alert-hover:rgba(178,58,34,.38);
  --bnr-btn-success-bg:rgba(46,94,78,.49);     --bnr-btn-success-hover:rgba(46,94,78,.55);
  --bnr-btn-neutral-bg:rgba(255,255,255,.12);  --bnr-btn-neutral-hover:rgba(255,255,255,.16);
  --bnr-lite-info:#9CC6EA; --bnr-lite-attention:#F6D27A; --bnr-lite-alert:#FF9B82; --bnr-lite-success:#6ED4A0; --bnr-lite-neutral:var(--text-2,#C0CAE2);
  /* mobile main action: fill = 25% of the banner border mixed into its wash (pressed 40%); see .bnr-m below */
  --bnr-mobile-mix:25%; --bnr-mobile-mix-hover:40%;
  --bnr-mobile-ink-info:#1F5C8E; --bnr-mobile-ink-attention:#7A5700; --bnr-mobile-ink-alert:#A33420; --bnr-mobile-ink-success:#2E5E4E; --bnr-mobile-ink-neutral:#3A4A5E;
  /* mobile second-action link colour per tone (board token table): attention + alert differ from the button ink */
  --bnr-mobile-link-info:#1F5C8E; --bnr-mobile-link-attention:#8A6300; --bnr-mobile-link-alert:#B23A22; --bnr-mobile-link-success:#2E5E4E; --bnr-mobile-link-neutral:#3A4A5E;
}
/* light desktop theme: the lightened-on-dark label colours would vanish, use dark inks */
html[data-theme="light"]{
  --bnr-btn-info-bg:rgba(37,133,182,.14);      --bnr-btn-info-hover:rgba(37,133,182,.24);
  --bnr-btn-attention-bg:rgba(242,193,78,.30); --bnr-btn-attention-hover:rgba(242,193,78,.42);
  --bnr-btn-alert-bg:rgba(178,58,34,.12);      --bnr-btn-alert-hover:rgba(178,58,34,.20);
  --bnr-btn-success-bg:rgba(46,94,78,.14);     --bnr-btn-success-hover:rgba(46,94,78,.24);
  --bnr-btn-neutral-bg:rgba(20,28,40,.06);     --bnr-btn-neutral-hover:rgba(20,28,40,.12);
  --bnr-lite-info:#1F5C8E; --bnr-lite-attention:#8A6300; --bnr-lite-alert:#B23A22; --bnr-lite-success:#2E5E4E; --bnr-lite-neutral:#2E3A4C;
  --bnr-neutral-bg:rgba(20,28,40,.04);
}

.bnr{--b-bg:var(--bnr-info-bg);--b-bd:var(--bnr-info-bd);--b-fg:var(--bnr-info-fg);--b-btn:var(--bnr-btn-info-bg);--b-btn-h:var(--bnr-btn-info-hover);--b-lite:var(--bnr-lite-info);
  box-sizing:border-box;display:flex;align-items:flex-start;gap:12px;width:100%;max-width:100%;margin:0;
  padding:12px 16px;border-radius:12px;border:1px solid var(--b-bd);background:var(--b-bg);
  color:var(--text,#E0E6F2);font-size:15px;line-height:1.45;font-family:inherit}
.bnr *{box-sizing:border-box}
.bnr[data-tone="info"]{--b-bg:var(--bnr-info-bg);--b-bd:var(--bnr-info-bd);--b-fg:var(--bnr-info-fg);--b-btn:var(--bnr-btn-info-bg);--b-btn-h:var(--bnr-btn-info-hover);--b-lite:var(--bnr-lite-info)}
.bnr[data-tone="attention"]{--b-bg:var(--bnr-attention-bg);--b-bd:var(--bnr-attention-bd);--b-fg:var(--bnr-attention-fg);--b-btn:var(--bnr-btn-attention-bg);--b-btn-h:var(--bnr-btn-attention-hover);--b-lite:var(--bnr-lite-attention)}
.bnr[data-tone="alert"]{--b-bg:var(--bnr-alert-bg);--b-bd:var(--bnr-alert-bd);--b-fg:var(--bnr-alert-fg);--b-btn:var(--bnr-btn-alert-bg);--b-btn-h:var(--bnr-btn-alert-hover);--b-lite:var(--bnr-lite-alert)}
.bnr[data-tone="success"]{--b-bg:var(--bnr-success-bg);--b-bd:var(--bnr-success-bd);--b-fg:var(--bnr-success-fg);--b-btn:var(--bnr-btn-success-bg);--b-btn-h:var(--bnr-btn-success-hover);--b-lite:var(--bnr-lite-success)}
.bnr[data-tone="neutral"]{--b-bg:var(--bnr-neutral-bg);--b-bd:var(--bnr-neutral-bd);--b-fg:var(--bnr-neutral-fg);--b-btn:var(--bnr-btn-neutral-bg);--b-btn-h:var(--bnr-btn-neutral-hover);--b-lite:var(--bnr-lite-neutral)}
.bnr[hidden]{display:none}

.bnr>.bnr-ico{font-size:22px;line-height:1;color:var(--b-fg);margin-top:0;flex-shrink:0}
/* Top-aligned: the icon and X stay on the first line of text however long the message runs. The X is taller than a line, and a button taller still, so offsets keep them centred on that line. */
@media(min-width:761px){
  .bnr:not(.bnr-m,.bnr-narrow,.bnr-attn,.bnr-panel)>.bnr-x{margin-top:-3px}
  .bnr:not(.bnr-m,.bnr-narrow,.bnr-attn,.bnr-panel):has(>.bnr-acts .bnr-btn)>.bnr-ico,.bnr:not(.bnr-m,.bnr-narrow,.bnr-attn,.bnr-panel):has(>.bnr-acts .bnr-btn)>.bnr-body{margin-top:6px}
  .bnr:not(.bnr-m,.bnr-narrow,.bnr-attn,.bnr-panel):has(>.bnr-acts .bnr-btn)>.bnr-x{margin-top:3px}
}
.bnr .bnr-body{flex:1 1 220px;min-width:0}
.bnr .bnr-t{font-weight:700;color:var(--text-strong,#F0F4FF)}
.bnr .bnr-t b{font-weight:700}
.bnr .bnr-s{color:var(--text-2,#C0CAE2);margin-top:2px}
.bnr .bnr-acts{display:flex;gap:8px;flex-shrink:0;align-items:center;flex-wrap:wrap}
.bnr .spin{animation:bnr-spin 1s linear infinite}
@keyframes bnr-spin{to{transform:rotate(360deg)}}

/* MAIN ACTION: tinted ghost (the tone at low alpha), border = the banner's own border */
.bnr .bnr-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--control-h,34px);padding:0 14px;border-radius:8px;
  border:1px solid var(--b-bd);background:var(--b-btn);color:var(--b-lite);font-weight:600;font-size:14px;line-height:1;font-family:inherit;cursor:pointer;white-space:nowrap;text-decoration:none}
.bnr .bnr-btn:hover{background:var(--b-btn-h)}
.bnr .bnr-btn:disabled,.bnr .bnr-btn[aria-disabled="true"]{opacity:.55;cursor:default}
.bnr .bnr-btn .mi,.bnr .bnr-link .mi{font-size:18px}
/* SECOND ACTION: a text link, no box */
.bnr .bnr-link{display:inline-flex;align-items:center;gap:6px;background:none;border:0;border-radius:6px;padding:4px 6px;color:var(--b-lite);font-weight:700;font-size:14px;line-height:1.2;font-family:inherit;cursor:pointer;white-space:nowrap;text-decoration:none}
.bnr .bnr-link:hover{text-decoration:underline;text-underline-offset:3px}
.bnr .bnr-link:disabled{opacity:.55;cursor:default}
/* DISMISS */
.bnr .bnr-x{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;margin-left:0;flex-shrink:0;background:var(--b-btn);border:1px solid var(--b-bd);border-radius:8px;color:var(--b-lite);cursor:pointer}
.bnr .bnr-x:hover{background:var(--b-btn-h)}
.bnr .bnr-x .mi{font-size:18px}
.bnr .bnr-btn:focus-visible,.bnr .bnr-link:focus-visible,.bnr .bnr-x:focus-visible{outline:2px solid var(--b-lite);outline-offset:2px}

/* NARROW DESKTOP (board section 4): wrap, the actions take their own row indented to the text, the X after the button on that row */
@media(max-width:760px){
  .bnr:not(.bnr-m){flex-wrap:wrap}
  .bnr:not(.bnr-m)>.bnr-ico{order:0}.bnr:not(.bnr-m) .bnr-body{order:1}.bnr:not(.bnr-m) .bnr-x{order:4;align-self:center}
  .bnr:not(.bnr-m) .bnr-acts{order:3;flex:1 1 calc(100% - 40px);box-sizing:border-box;padding-left:34px;align-self:auto}
  .bnr:not(.bnr-m) .bnr-list{order:4;margin-left:0}
  .bnr:not(.bnr-m) .bnr-body{flex:1 1 0}   /* wrapped: the text sits beside the icon, never under it */
}
/* NARROW BY ITS OWN WIDTH: slab-banner.js adds .bnr-narrow when the banner itself is under 520px (a dialog on a wide screen); same layout as the 760px block */
.bnr.bnr-narrow:not(.bnr-m){flex-wrap:wrap}
.bnr.bnr-narrow:not(.bnr-m)>.bnr-ico{order:0}.bnr.bnr-narrow:not(.bnr-m) .bnr-body{order:1}.bnr.bnr-narrow:not(.bnr-m) .bnr-x{order:4;align-self:center}
.bnr.bnr-narrow:not(.bnr-m) .bnr-acts{order:3;flex:1 1 calc(100% - 40px);box-sizing:border-box;padding-left:34px;align-self:auto}
.bnr.bnr-narrow:not(.bnr-m) .bnr-list{order:4;margin-left:0}
.bnr.bnr-narrow:not(.bnr-m) .bnr-body{flex:1 1 0}
/* ATTENTION LIST (board addition 2026-10-21): ONE banner with a header and a row per item, e.g. the Directory card's Needs Attention.
   Each row = text column + its actions. The text keeps at least 40% of the row and takes all spare width; when the actions do not fit
   beside it they wrap UNDER the text (never a one-word-per-line column). The row X dismisses that row only. */
.bnr.bnr-attn{flex-wrap:wrap;align-items:center}
.bnr.bnr-attn .bnr-body{display:contents}   /* the header sits beside the icon; the rows and the footnote take the FULL width under it */
.bnr.bnr-attn .bnr-t{flex:1 1 0;min-width:0}
.bnr.bnr-attn .bnr-items{flex:0 0 100%;display:grid;gap:12px;margin-top:10px}
.bnr.bnr-attn .bnr-item{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-width:0}
.bnr.bnr-attn .bnr-it-tx{flex:1 1 40%;min-width:40%;overflow-wrap:break-word}
.bnr.bnr-attn .bnr-it-t{font-weight:700;color:var(--text-strong,#F0F4FF)}
.bnr.bnr-attn .bnr-it-s{color:var(--text-2,#C0CAE2);font-size:14px;font-weight:400;margin-top:2px}
.bnr.bnr-attn .bnr-it-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto;min-width:0}
.bnr.bnr-attn .bnr-it-acts .bnr-btn{max-width:100%}
.bnr.bnr-attn .bnr-foot{flex:0 0 100%;margin-top:10px;font-size:13px;color:var(--text-3,#9DACCB)}
.bnr.bnr-attn .bnr-btn{white-space:normal;text-align:left;height:auto;min-height:var(--control-h,34px);padding:6px 14px}
.bnr.bnr-attn.bnr-m .bnr-it-acts{width:100%;margin-left:0}
/* PANEL NEEDS ATTENTION (board section 4b, approved 2026-10-26): the attention list at the top of a narrow side panel
   (SlabBanner.html with list:{rows} on desktop adds .bnr-panel). Radius 8, padding 12, the tone's border and fill.
   Header: 18px tone icon + "Needs Attention" 15/700 (+ " · N" only when more than one). ONE item: its action + Clear on the
   header line, top-right. SEVERAL: the header is a tone band edge to edge (the tone at the button alpha minus .12, white
   icon, 1px tone line under it) and each item's action + Clear sit bottom-right, 8px under its text. Items split by a 1px line
   at 60% of the tone border. Clear is a labelled button, never a bare X. The clearing note: 13px neutral grey mixed from the
   text colour, a 1px line above it. */
:root{--bnr-band-info:rgba(37,133,182,.18);--bnr-band-attention:rgba(242,193,78,.08);--bnr-band-alert:rgba(178,58,34,.20);--bnr-band-success:rgba(46,94,78,.37);--bnr-band-neutral:rgba(255,255,255,0)}
.bnr.bnr-panel{display:grid;gap:12px;padding:12px;border-radius:8px;align-items:start}
.bnr.bnr-panel[data-tone="info"]{--b-band:var(--bnr-band-info)}.bnr.bnr-panel[data-tone="attention"]{--b-band:var(--bnr-band-attention)}
.bnr.bnr-panel[data-tone="alert"]{--b-band:var(--bnr-band-alert)}.bnr.bnr-panel[data-tone="success"]{--b-band:var(--bnr-band-success)}
.bnr.bnr-panel[data-tone="neutral"]{--b-band:var(--bnr-band-neutral)}
.bnr.bnr-panel .bnr-hd{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;min-width:0}
.bnr.bnr-panel .bnr-hd>.bnr-ico{font-size:18px;line-height:1;color:var(--b-fg);flex-shrink:0}
.bnr.bnr-panel .bnr-hd>.bnr-t{flex:1 1 auto;min-width:0;font-size:15px;font-weight:700;color:var(--text-strong,#F0F4FF)}
.bnr.bnr-panel .bnr-hd>.bnr-it-acts{margin-left:auto;flex-shrink:0}
.bnr.bnr-panel.bnr-panel-many .bnr-hd{margin:-12px -12px 0;padding:10px 12px;background:var(--b-band);border-bottom:1px solid var(--b-bd);border-radius:7px 7px 0 0}
.bnr.bnr-panel.bnr-panel-many .bnr-hd>.bnr-ico{color:var(--text-strong,#F0F4FF)}
.bnr.bnr-panel .bnr-items{display:grid;gap:12px;margin:0;min-width:0}
.bnr.bnr-panel .bnr-item{display:grid;grid-template-columns:minmax(0,1fr);row-gap:2px;min-width:0}
.bnr.bnr-panel .bnr-item+.bnr-item{border-top:1px solid color-mix(in srgb,var(--b-bd) 60%,transparent);padding-top:12px}
.bnr.bnr-panel .bnr-it-t{font-size:15px;font-weight:700;line-height:1.35;color:var(--text-strong,#F0F4FF);text-wrap:balance}
.bnr.bnr-panel .bnr-it-s{font-size:15px;font-weight:400;line-height:1.45;color:var(--text-2,#C0CAE2);margin:0}
.bnr.bnr-panel .bnr-it-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.bnr.bnr-panel.bnr-panel-many .bnr-item .bnr-it-acts{justify-self:end;margin-top:8px;margin-left:0}
.bnr.bnr-panel .bnr-btn{white-space:nowrap;height:var(--control-h,34px);min-height:0;padding:0 14px}
.bnr.bnr-panel .bnr-foot{margin:0;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--b-bd) 60%,transparent);font-size:13px;color:color-mix(in srgb,var(--text,#E0E6F2) 68%,var(--b-bg))}
/* WORKING: neutral + a spinning icon, no buttons, clears itself */
.bnr.bnr-working>.bnr-ico{animation:bnr-spin 1s linear infinite}
/* the slot a page paints later (SlabBanner.set); no paint until it is filled */
.bnr-slot:not(.bnr){display:block}
.bnr-slot[hidden]{display:none}

/* inside a card */
.bnr.bnr-card{border-radius:8px;padding:10px 12px}
.bnr.bnr-card>.bnr-ico{font-size:18px}

/* multi-item: "N Things ..." with a Review button that toggles the list */
.bnr.bnr-multi{flex-wrap:wrap}
.bnr .bnr-list{flex-basis:100%;min-width:0;margin:6px 0 0 34px;border-top:1px solid var(--b-bd);display:none}
.bnr.bnr-open .bnr-list{display:block}
.bnr .bnr-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid color-mix(in srgb,var(--b-bd) 60%,transparent)}
.bnr .bnr-row:last-child{border-bottom:0}
.bnr .bnr-row .bnr-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bnr .bnr-row .bnr-nm em{font-style:normal;color:var(--text-3,#9DACCB)}
.bnr.bnr-open .bnr-chev{transform:rotate(180deg)}

/* a banner that floats at the bottom (change-orders .werr, takeoff .tk-conflict) keeps its position, takes this layout */
.bnr.bnr-fixed{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;width:min(720px,calc(100% - 32px));z-index:900;box-shadow:0 8px 28px rgba(0,0,0,.35);background:linear-gradient(var(--b-bg),var(--b-bg)),var(--surface-menu,Canvas)}
/* fixed banners float over content: the tone wash sits on a solid surface so page text never shows through (2026-10-23 click-through) */

/* ===== MOBILE (light, treatment B): .bnr-m ===== */
.bnr.bnr-m{
  align-items:flex-start;
  --m-ink:var(--bnr-mobile-ink-info);
  --b-bg:var(--st-info-bg,#E3EEF8);--b-bd:var(--st-info-bd,#B4D0EA);--b-fg:var(--st-info-fg,#1F5C8E);--b-btn:color-mix(in srgb,var(--b-bd) var(--bnr-mobile-mix),var(--b-bg));--b-btn-h:color-mix(in srgb,var(--b-bd) var(--bnr-mobile-mix-hover),var(--b-bg));--b-lite:var(--bnr-mobile-ink-info);--b-link:var(--bnr-mobile-link-info);
  flex-wrap:wrap;gap:8px 10px;padding:12px 14px;border-radius:14px;font-size:14px;line-height:1.4;color:var(--text,#272E2B)}
.bnr.bnr-m[data-tone="info"]{--b-bg:var(--st-info-bg,#E3EEF8);--b-bd:var(--st-info-bd,#B4D0EA);--b-fg:var(--st-info-fg,#1F5C8E);--b-btn:color-mix(in srgb,var(--b-bd) var(--bnr-mobile-mix),var(--b-bg));--b-btn-h:color-mix(in srgb,var(--b-bd) var(--bnr-mobile-mix-hover),var(--b-bg));--b-lite:var(--bnr-mobile-ink-info);--b-link:var(--bnr-mobile-link-info)}
.bnr.bnr-m[data-tone="attention"]{--b-bg:var(--st-warn-bg,#FBEFD6);--b-bd:var(--st-warn-bd,#E8D19A);--b-fg:var(--st-warn-fg,#8A6300);--b-btn:color-mix(in srgb,var(--b-bd) var(--bnr-mobile-mix),var(--b-bg));--b-btn-h:color-mix(in srgb,var(--b-bd) var(--bnr-mobile-mix-hover),var(--b-bg));--b-lite:var(--bnr-mobile-ink-attention);--b-link:var(--bnr-mobile-link-attention)}
.bnr.bnr-m[data-tone="alert"]{--b-bg:var(--st-bad-bg,#FBE2DC);--b-bd:var(--st-bad-bd,#F0B8A8);--b-fg:var(--st-bad-fg,#B23A22);--b-btn:color-mix(in srgb,var(--b-bd) var(--bnr-mobile-mix),var(--b-bg));--b-btn-h:color-mix(in srgb,var(--b-bd) var(--bnr-mobile-mix-hover),var(--b-bg));--b-lite:var(--bnr-mobile-ink-alert);--b-link:var(--bnr-mobile-link-alert)}
.bnr.bnr-m[data-tone="success"]{--b-bg:var(--st-ok-bg,#DBEBE6);--b-bd:var(--st-ok-bd,#A8C2B9);--b-fg:var(--st-ok-fg,#2E5E4E);--b-btn:color-mix(in srgb,var(--b-bd) var(--bnr-mobile-mix),var(--b-bg));--b-btn-h:color-mix(in srgb,var(--b-bd) var(--bnr-mobile-mix-hover),var(--b-bg));--b-lite:var(--bnr-mobile-ink-success);--b-link:var(--bnr-mobile-link-success)}
.bnr.bnr-m[data-tone="neutral"]{--b-bg:#FFFFFF;--b-bd:#D0D9D6;--b-fg:#667771;--b-btn:color-mix(in srgb,var(--b-bd) var(--bnr-mobile-mix),var(--b-bg));--b-btn-h:color-mix(in srgb,var(--b-bd) var(--bnr-mobile-mix-hover),var(--b-bg));--b-lite:var(--bnr-mobile-ink-neutral);--b-link:var(--bnr-mobile-link-neutral)}
.bnr.bnr-m .bnr-t{color:var(--text,#272E2B)}
.bnr.bnr-m .bnr-s{color:var(--text-muted,#667771);font-size:13px;margin-top:1px}
.bnr.bnr-m .bnr-body{flex:1 1 0}
/* board section 6: icon, text, X on the first row (X top-right); the actions wrap to a full-width 44px row underneath */
.bnr.bnr-m>.bnr-ico{order:0}.bnr.bnr-m .bnr-body{order:1}.bnr.bnr-m .bnr-x{order:2;margin-left:0}.bnr.bnr-m .bnr-acts{order:3}.bnr.bnr-m .bnr-list{order:4}
.bnr.bnr-m .bnr-acts{flex-basis:100%;align-self:stretch;gap:8px;flex-wrap:nowrap}
.bnr.bnr-m .bnr-btn{flex:1;height:44px;border-radius:12px;font-size:14px;font-weight:700}
.bnr.bnr-m .bnr-link{flex:0 0 auto;min-height:44px;padding:0 12px;font-size:14px;color:var(--b-link)}
.bnr.bnr-m .bnr-x{width:32px;height:32px;border-radius:8px}
.bnr.bnr-m .bnr-x:hover{background:var(--b-btn-h)}
.bnr.bnr-m .bnr-list{margin-left:0}
/* phone 3: the whole banner is the tap target, chevron at the right, no button */
.bnr.bnr-tap{cursor:pointer;text-decoration:none;color:inherit}
.bnr.bnr-tap .bnr-go{order:2;align-self:center;font-size:22px;color:var(--text-muted,#667771)}
/* phone 3: compact inline button (36px) sits on the first row next to the text */
.bnr.bnr-m.bnr-inline .bnr-acts{flex-basis:auto;align-self:center;order:2}
.bnr.bnr-m .bnr-btn.bnr-compact{flex:0 0 auto;height:36px;padding:0 12px;border-radius:10px;font-size:13px;font-weight:700;gap:6px}

/* ===== SHARED PAINT FOR THE IN-DIALOG / IN-CARD MESSAGE STRIPS =====
   These classes are written by many small JS fillers (<i class="mi">icon</i><span>text</span>), so their markup stays; they take
   the banner's in-card geometry and tone tokens from here so there is ONE paint (a tweak to a tone token moves them too).
   Pages keep only their slot margin. Error = alert tone, warn = attention tone. */
.mo-err,.mo-warn,.ie-err,.ed-err,.dm-modal-err{
  --b-bg:var(--bnr-alert-bg);--b-bd:var(--bnr-alert-bd);--b-fg:var(--bnr-alert-fg);
  box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;
  border:1px solid var(--b-bd);background:var(--b-bg);color:var(--text,#E0E6F2);font-size:15px;line-height:1.45}
.dm-modal-err.hide{display:none}
.mo-warn,.ie-err.ie-warn{--b-bg:var(--bnr-attention-bg);--b-bd:var(--bnr-attention-bd);--b-fg:var(--bnr-attention-fg)}
.mo-err[hidden],.ed-err[hidden]{display:none}
.mo-err>i,.mo-warn>i,.ie-err>i,.ed-err>i,.dm-modal-err>i{font-size:18px;line-height:1;color:var(--b-fg);flex:0 0 auto}
.mo-err b,.mo-warn b,.ed-err b{color:var(--text-strong,#F0F4FF);font-weight:700}