.office-ui .context-notice {
  --notice-border: #becbe8;
  --notice-accent: #3456a3;
  --notice-background: #f0f4fc;
  --notice-ink: #344563;
  display: grid; grid-template-columns: 1.65rem minmax(0,1fr); gap: .75rem;
  align-items: start; min-width: 0; max-width: none; margin: 0 0 1.25rem;
  padding: .9rem 1rem; border: 1px solid var(--notice-border);
  border-left: 3px solid var(--notice-accent); border-radius: var(--register-radius,2px);
  background: var(--notice-background); color: var(--notice-ink);
  font-size: .875rem; line-height: 1.55; text-align: left; overflow-wrap: anywhere;
}
.office-ui .context-notice.is-warning {
  --notice-border: #e5cf9e; --notice-accent: #9a6614;
  --notice-background: #fff8eb; --notice-ink: #70501f;
}
.office-ui .context-notice.is-warning.is-outcome-warning {
  --notice-border: var(--outcome-warning-border);
  --notice-accent: var(--outcome-warning-accent);
  --notice-background: var(--outcome-warning-background);
  --notice-ink: var(--outcome-warning-ink);
}
.office-ui .context-notice.is-error {
  --notice-border: #e1b4ac; --notice-accent: #ad352b;
  --notice-background: #fff1ee; --notice-ink: #862d26;
}
.office-ui .context-notice.is-success {
  --notice-border: #b9d5c6; --notice-accent: #28704c;
  --notice-background: #edf7f1; --notice-ink: #285b43;
}
.office-ui .context-notice-icon {
  /* Centred on the FIRST LINE of the copy, not on the block: the notice is
     `align-items: start`, so a box taller than one line hangs the icon below
     the line it belongs to. The height is this notice's own line box
     (font-size .875rem x line-height 1.55 = 1.55em here); change one and the
     other follows. */
  width: 1.65rem; height: 1.55em; display: inline-grid; place-items: center;
  margin: 0; border: 0; border-radius: 0; background: transparent; color: var(--notice-accent);
}
.office-ui .context-notice-icon svg {
  width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.office-ui .context-notice-content { min-width: 0; }
.office-ui .context-notice-title { display: block; margin: 0 0 .4rem; color: inherit; font-size: 1rem; line-height: 1.4; }
.office-ui .context-notice p { max-width: none; margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.office-ui .context-notice p + p { margin-top: .6rem; }
.office-ui .context-notice :is(b,strong) { color: inherit; }
.office-ui .context-notice-content > :first-child { margin-top: 0; }
.office-ui .context-notice-content > :last-child { margin-bottom: 0; }
.office-ui .context-notice-content .ui-button { margin-top: .6rem; }
.office-ui .tool-form > .context-notice { grid-column: 1 / -1; }
@media (max-width: 39rem) {
  .office-ui .context-notice { gap: .6rem; padding: .8rem; }
}