/* =============================================================================
   ics-messager (component-specs/ics-messager.md section 7). PUBLIC classes
   kept: .messager-body (the BankCardDisburse page override contract, F-20) +
   .messager-icon.messager-{warning|error|info|question}. Severity glyphs are
   CSS-DRAWN (no sprite, no emoji, F-8): shapes distinguish at 32px even
   without color - warning = triangle+!, error = circle+X, info = circle+i,
   question = circle+?. Colors ride the semantic tokens (theme-free).
   ============================================================================= */

/* ---- THE MESSAGE / CONFIRM / PROMPT BOX (owner ruling 2026-08-19) -------------
   ics window frame (flat brand-gold title bar, no corner chip - the window is
   opened closable:false), the message on the surface, and a footer BAND: soft
   surface-alt fill under a gold rule, buttons right-aligned. The box source div is
   the window body: its frame inset is cancelled so the band runs edge to edge.
   Width comes from the window (380 message / 400 confirm+prompt); height = content. */
.ics-messager > .ics-window__bodysrc { margin: 0; }

/* content element (.messager-body stays PUBLIC - page overrides land, F-20) */
.messager-body {
  padding: var(--space-6) var(--space-5) var(--space-6) var(--space-5);
  overflow: auto;
  color: var(--ics-text);
  font-family: var(--ics-font);
  font-size: var(--ics-font-size);
  line-height: var(--lh-base);
  white-space: pre-line;                         /* server messages carry line breaks */
}
.ics-messager__msg { overflow-wrap: break-word; }

/* 32x32 icon floated left, 10px gap; 2-arg alerts render NO icon element
   and therefore no reserved gutter (F-1) */
.messager-icon {
  float: left;
  width: 32px;
  height: 32px;
  margin: 0 10px 10px 0;
  position: relative;
  border-radius: 50%;
  color: #fff;
}
.messager-icon::after {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 20px/1 system-ui, sans-serif;
}
.messager-warning {
  border-radius: 0;
  background: var(--ics-warning);
  clip-path: polygon(50% 4%, 98% 96%, 2% 96%);
}
.messager-warning::after { content: '!'; padding-top: 8px; }
.messager-error   { background: var(--ics-danger); }
.messager-error::after   { content: '\00d7'; }              /* multiplication x */
.messager-info    { background: var(--ics-info); }
.messager-info::after    { content: 'i'; font-style: italic; }
.messager-question { background: var(--ics-info); }
.messager-question::after { content: '?'; }

/* footer band: buttons right-aligned, own ics-buttons (face/height/glyph from
   button.css + the engine); the first (Ok/Yes) is auto-focused - focus VISIBLE.
   ORDER (owner order 2026-08-19): affirmative FIRST - Ok / Yes on the LEFT, No /
   Cancel on its right; the band stays right-aligned. The order is DOM order, set
   by the caller's `buttons` array in messager.js - never re-order it here with
   `order:` / `row-reverse`, or the tab ring and the DOM stop agreeing. */
.messager-button {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-4);
  clear: both;
  padding: var(--space-4) var(--space-5);
  background: var(--ics-surface-alt);
  border-top: var(--border-1) solid var(--ics-border);
}
.ics-messager__btn { min-width: 64px; }          /* short captions (OK / No) still read as buttons */
.ics-messager__btn:focus-visible,
.ics-messager__btn:focus {
  outline: 2px solid var(--ics-focus-ring);
  outline-offset: 1px;
}

/* prompt input (IcsPrompt) - only rendered when the dialog carries one */
.ics-messager__input {
  width: 100%;
  box-sizing: border-box;
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border: var(--border-1) solid var(--ics-border);
  border-radius: var(--radius-1);
  background: var(--ics-surface);
  color: inherit;
  font: inherit;
}
.ics-messager__input:focus {
  outline: 2px solid var(--ics-focus-ring);
  outline-offset: 1px;
}

/* ---- bridge facades (spec section 12.1/12.4) - V2.2 button standard + toast types --
   PRIMARY TIER RETIRED (owner 2026-08-10 later-2): Yes/OK and No both render
   the ONE bordered design the .ics-messager__btn base already rides from the
   tokens; only DANGER (destructive Yes) keeps a distinct face - that is
   severity semantics, not a tier. */
.ics-messager__btn--yes,
.ics-messager__btn--no { font-weight: var(--fw-semibold); }
/* the ONE red face that survives: the destructive Yes (severity at the point of no
   return - the exception the button face contract itself names, button.css PART C1).
   The contract paints every .ics-btn at 2-1-0 !important, so this rule states the same
   :is(#\9, …) form plus the two box classes (2-3-0 !important) to be the one that wins. */
.ics-btn:is(#\9, .ics-btn):is(#\9, .ics-btn).ics-messager__btn--yes.ics-danger,
.ics-btn:is(#\9, .ics-btn):is(#\9, .ics-btn).ics-messager__btn--yes.ics-danger:hover {
  background: var(--ics-danger) !important;
  color: #fff !important;
  border-color: var(--danger-500) !important;
}
.ics-btn.ics-messager__btn--yes.ics-danger .ics-btn__icon { filter: brightness(0) invert(1); }   /* white glyph on the red face */

/* IcsModalDialog (2026-08-19): a child page framed inside an own modal window.
   The source div is the window body (flex child, scroll owner); it carries NO
   padding so the frame fills the body edge to edge, and the frame itself has no
   border. The window is resizable - the frame follows because both are 100%. */
.ics-modal-dialog {
  min-height: 0;
  padding: 0;
  overflow: hidden;
  display: flex;                                     /* the frame is the one flex child: it takes ALL the body height */
  flex-direction: column;
}
.ics-modal-dialog__frame {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  border: 0;
  background: var(--ics-surface, #fff);
}

/* ---- THE TOAST (owner ruling 2026-08-19: the toaster unification) ------------------
   ONE toaster for the product (toastr retired): a solid severity-coloured card with the
   severity glyph from the own ics-icons set (owner 2026-08-19: success = ok-check, error =
   back-undo, warning = notify, info = info) on a white badge, a BOLD TITLE line and the
   message, stacked in a fixed column at the viewport's BOTTOM-RIGHT corner - the newest card
   nearest the corner, older ones above it. FACES ride the semantic tokens (the theme owns
   them) and the INK is chosen per face for AA contrast, toast-scoped - see the ink block
   below; geometry is fixed here: 300px wide, content-high. The × shows on hover;
   the card fades/slides in and out (200 ms, none under reduced motion). */
.ics-toast-host {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: var(--ics-z-toast, 7000);
  display: flex;
  flex-direction: column;                        /* newest appended = nearest the corner */
  align-items: flex-end;
  gap: 6px;
  width: 300px;
  max-width: calc(100vw - 24px);
  pointer-events: none;                          /* the gaps never block the page */
}
.ics-toast {
  pointer-events: auto;
  position: relative;
  box-sizing: border-box;
  width: 300px;
  max-width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 28px 10px 12px;                  /* right room for the × */
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-md);
  background: var(--ics-info);
  --ics-toast-ink: #FFFFFF;
  color: var(--ics-toast-ink);
  font-family: var(--ics-font);
  font-size: var(--ics-font-size);
  line-height: var(--lh-base);
  opacity: 1;                                    /* full contrast at rest: the fade lives in --pre/--out */
  transition: opacity .2s ease, transform .2s ease;
}
.ics-toast:hover { box-shadow: var(--shadow-lg); }
.ics-toast--success { background: var(--ics-success); }
.ics-toast--error   { background: var(--ics-danger); }
.ics-toast--warning { background: var(--ics-warning); }
.ics-toast--info    { background: var(--ics-info); }

/* ---- THE INK IS TOAST-SCOPED (owner ruling 2026-08-19) ----------------------------
   WCAG AA wants 4.5:1 for this text size. Measured white-on-face against the four
   semantic tokens as they stand:
       danger  #C0492F  4.96 PASS        info    #3A6EA5  5.31 PASS
       warning #C7912F  2.79 FAIL        success #3F8F5B  3.97 FAIL
   So the two failing faces carry a NEAR-BLACK ink instead - 6.74 on the gold, 4.74 on
   the green - and the two passing faces keep white. `--ink` (#2F2B26) is NOT dark enough
   for the green: it measures 3.54 there. The green is the binding constraint in both
   directions - its own luminance caps white at 3.97 and pure black at 5.29 - which is why
   the ink has to go this dark rather than merely darker.
   EVERY value here lives inside .ics-toast. The semantic tokens are untouched, so the
   messager's warning triangle, the destructive Yes button, the validation bubbles and every
   badge reading --warning-500/--success-500 render exactly as they did before. Changing a
   face means re-measuring its pair: nothing else in the sheet enforces the ratio. */
.ics-toast--warning,
.ics-toast--success { --ics-toast-ink: #131110; }
.ics-toast--pre,
.ics-toast--out     { opacity: 0; transform: translateX(24px); }
.ics-toast--clickable { cursor: pointer; }

/* the glyph: an ics-icons element (.ics-icon-<name> paints the SVG background) in its OWN
   colours, on a 26px white badge - the same glyph the recall list shows, so the two read as
   one; the badge is what keeps every glyph legible on every face (a white-invert flattened
   the info disc). background-origin keeps the SVG inside the badge's padding. */
.ics-toast__icon,
.ics-toast .ics-toast__icon[class*="ics-icon-"] {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  margin-top: 0;
  padding: 4px;
  box-sizing: border-box;
  vertical-align: top;
  border-radius: 50%;
  background-color: #fff;
  background-origin: content-box;
  background-clip: border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
}

.ics-toast__body  { flex: 1 1 auto; min-width: 0; }
.ics-toast__title { font-weight: var(--fw-bold); margin-bottom: 2px; overflow-wrap: break-word; }
.ics-toast__msg   { white-space: pre-line; overflow-wrap: break-word; }
.ics-toast__close {
  position: absolute;
  top: 3px;
  right: 6px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--ics-toast-ink);       /* follows the face's ink, never a fixed white */
  opacity: 0;
  cursor: pointer;
  font: 700 18px/1 system-ui, sans-serif;
  transition: opacity .15s;
}
.ics-toast:hover .ics-toast__close,
.ics-toast__close:focus-visible { opacity: .9; }
@media (prefers-reduced-motion: reduce) {
  .ics-toast, .ics-toast__close { transition: none; }
}