/* Shared status panels. Change severity colours here. */
:root {
  --message-info-bg:#f2f4f5; --message-info-border:#ccd2d6; --message-info-accent:#77838c; --message-info-text:#46525b;
  --message-success-bg:#edf9f1; --message-success-border:#a2d5b2; --message-success-accent:#238442; --message-success-text:#175d32;
  --message-warning-bg:#fff9e8; --message-warning-border:#ead18b; --message-warning-accent:#b88608; --message-warning-text:#765607;
  --message-error-bg:#fff0f0; --message-error-border:#e4aaaa; --message-error-accent:#c13b3b; --message-error-text:#942b2b;
}
.message-panel, .notice, .login-error {
  --message-bg:var(--message-success-bg); --message-border:var(--message-success-border); --message-accent:var(--message-success-accent); --message-text:var(--message-success-text);
  display:block; box-sizing:border-box; padding:12px 16px; margin:12px 0;
  border:1px solid var(--message-border); border-left:4px solid var(--message-accent); border-radius:0 5px 5px 0;
  background:var(--message-bg); color:var(--message-text); font-size:.875rem; font-weight:500; line-height:1.5; overflow-wrap:anywhere;
}
.message-panel:not([data-tone]), .message-panel[data-tone=info], .notice.info {
  --message-bg:var(--message-info-bg); --message-border:var(--message-info-border); --message-accent:var(--message-info-accent); --message-text:var(--message-info-text);
}
.message-panel[data-tone=warning], .notice.warning {
  --message-bg:var(--message-warning-bg); --message-border:var(--message-warning-border); --message-accent:var(--message-warning-accent); --message-text:var(--message-warning-text);
}
.message-panel[data-tone=error], .notice.error, .login-error {
  --message-bg:var(--message-error-bg); --message-border:var(--message-error-border); --message-accent:var(--message-error-accent); --message-text:var(--message-error-text);
}
.message-panel:empty, .notice:empty, .login-error:empty { display:none; }
.message-panel[hidden] { display:none!important; }

#preview-status.message-panel, #map-position-status.message-panel { color:var(--message-text); padding:12px 16px; margin:12px 0; }