/* kit/banner.css — the one in-page banner (app/banner.js · paneBanner): a `.pane` strip, icon + one line + an optional action.
   Tones come from the kit tokens: info = neutral glyph · warn = --ntc · error = --crt. The text is always ink; only the glyph carries
   the tone. A strip, not a card: it never stretches to fill a page, it takes its own height. */
.pane.banner{display:flex;align-items:center;gap:10px;flex:none;min-height:40px;height:auto;margin:0;padding:6px 12px;font:var(--t-body);color:var(--ink-1)}
.pane.banner>.i{flex:none;width:16px;height:16px;color:var(--glyph)}
.pane.banner.warn>.i{color:var(--ntc)}
.pane.banner.error>.i{color:var(--crt)}
.pane.banner>.bn-t{flex:1 1 0%;min-width:0;overflow-wrap:anywhere}
.pane.banner>.btn{flex:none;margin-left:auto}
.is-phone .pane.banner{padding:8px 12px}
@media (forced-colors:active){.pane.banner{border:1px solid CanvasText}}
/* A page whose status line is written as text into a `<p class="as-status">` (Agency settings): the same banner when it has something to say,
   drawn in CSS (a mask of the kit's info / alert glyph in the tone colour). Empty means nothing is drawn. */
.as-status:not(:empty){display:flex;align-items:center;gap:10px;min-height:40px;margin-top:8px;padding:6px 12px;border-radius:var(--r-card);box-shadow:inset 0 0 0 .5px var(--hair-2);font:var(--t-body);color:var(--ink-1)}
.as-status:not(:empty)::before{content:"";flex:none;width:16px;height:16px;background:var(--glyph);-webkit-mask:var(--bn-glyph) center/16px no-repeat;mask:var(--bn-glyph) center/16px no-repeat;
  --bn-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E")}
.as-status[role=alert]:not(:empty)::before{background:var(--crt);--bn-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E")}