/* Notices (src/ui/notice.js, D143, К-25) on the carved sign's field: a success in leaf green, an error in fire red,
   a fact in the field's ink; the close button always there. ok and info fade by themselves (MOTION --t-fade; reduced
   motion — base.css drops the transition and the notice just goes), an error stays until closed. */
.notice {
  display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; padding: 6px 4px 6px 10px; border-radius: 8px;
  font-family: var(--font-ui); font-size: 12.5px; line-height: 1.4; color: var(--ink); background: rgba(255, 248, 225, .55);
  box-shadow: inset 0 0 0 1px rgba(110, 66, 28, .25);
  opacity: 1; transition: opacity var(--t-fade) var(--ease-fade);
}
.notice[hidden] { display: none; }
.notice.notice-leaving { opacity: 0; }
.notice-ok { color: #34501F; background: rgba(120, 160, 96, .18); box-shadow: inset 0 0 0 1px rgba(78, 106, 46, .35); }
.notice-err { color: #7D2F22; background: rgba(165, 73, 58, .12); box-shadow: inset 0 0 0 1px rgba(125, 47, 34, .3); }
.notice-text { flex: 1 1 auto; min-width: 0; padding-top: 3px; text-wrap: pretty; overflow-wrap: anywhere; }
.notice-close {
  position: relative; display: grid; place-items: center; flex: none; width: 26px; height: 26px; padding: 0; border: 0;
  border-radius: 50%; color: inherit; background: none; opacity: .8;
}
.notice-close::after { content: ""; position: absolute; inset: -9px; }   /* a 44 px target around the small cross */
.notice-close:hover { opacity: 1; background: rgba(138, 85, 40, .12); }
.notice-close .ico { width: 14px; height: 14px; }