/* ---------------------------------------------------------------------------
   Messages.

   ONE presentation for everything the site has to say: a centred card over the
   page. There used to be a corner toast as well, for form outcomes, and it was
   easy to miss — which is the opposite of what a message is for.

   THE OVERLAY IS THE DEFAULT, from CSS alone — no JavaScript needed to see it.

   It was once the other way round: a plain block that the script promoted to an
   overlay by adding .is-open. The reasoning was that a visitor without
   JavaScript should not be trapped behind a panel they cannot dismiss. But it
   made the message invisible whenever the script did not run — including, in
   practice, when a browser was still serving a cached copy of ui.js from before
   the card existed. A message you only see if a script loads is not a message.

   Nothing to be trapped behind, either: it carries no button and no controls,
   it says its piece and then moves on — by <meta refresh> with no scripts, or a
   moment sooner via ui.js when there are.
--------------------------------------------------------------------------- */

.ui-modal{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;padding:22px;
  background:rgba(11,26,51,.55);
  animation:ui-modal-fade .16s ease-out;
  /* Scrollable, so a long list on a short screen is still readable. */
  overflow:auto;
}

.ui-modal-card{
  background:var(--white);
  border-radius:var(--r-lg);
  border:0;
  box-shadow:0 24px 60px rgba(11,26,51,.32);
  padding:34px 32px 32px;
  width:min(440px,100%);
  margin:auto;
  text-align:center;
  animation:ui-modal-rise .18s ease-out;
}

.ui-modal-icon{width:54px;height:54px;color:#2E9E5B;margin:0 auto 16px;display:block}

.ui-modal-card h2{
  font-family:var(--disp);font-size:23px;font-weight:600;
  margin:0 0 9px;color:var(--ink);letter-spacing:-.01em;
}
.ui-modal-card p{margin:0;font-size:15.5px;color:var(--slate);line-height:1.6}
.ui-modal-card p + p{margin-top:10px}

/* Several validation messages in one card. Left-aligned: a bulleted list
   centred on the page is hard to scan. */
.ui-modal-list{
  margin:0;padding:0 0 0 20px;list-style:disc;
  text-align:left;font-size:15.5px;color:var(--slate);line-height:1.6;
}
.ui-modal-list li{margin:0 0 5px}
.ui-modal-list li:last-child{margin-bottom:0}

/* The icon colour carries the tone; the card itself stays neutral so the text
   is never fighting a tinted background for contrast. */
.ui-modal.is-error   .ui-modal-icon{color:var(--crimson)}
.ui-modal.is-success .ui-modal-icon{color:#2E9E5B}
.ui-modal.is-info    .ui-modal-icon{color:var(--teal-dark)}

@keyframes ui-modal-fade{from{opacity:0}to{opacity:1}}
@keyframes ui-modal-rise{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

/* An animated entrance is decoration; the message is the point. */
@media (prefers-reduced-motion:reduce){
  .ui-modal,.ui-modal .ui-modal-card{animation:none}
}

@media (max-width:600px){
  .ui-modal{padding:16px}
  .ui-modal-card{padding:30px 22px 26px}
}

/* Body does not scroll behind an open card. */
body.ui-modal-open{overflow:hidden}