/* shared-web/whats-new.css — the one-time feature walkthrough overlay
   (shared-web/whats-new.js). Symlinked into both apps as css/whats-new.css.
   Self-contained: only the apps' shared :root palette is assumed, never the
   driver app's .consent-* chrome (the dispatcher app has none). Modeled on
   that gate so the two read as one system. z-index 9400 sits UNDER the
   driver consent gate (9500) and the PSAuth account control (9998). */
.whatsnew-gate {
  position: fixed; inset: 0; z-index: 9400;
  display: flex; align-items: flex-start; justify-content: center;
  background: #F4F5F7; padding: 24px; overflow: auto;
}
.whatsnew-gate[hidden] { display: none; }
.whatsnew-card {
  background: white; border-radius: 12px;
  border-top: 4px solid var(--crimson, #8C0930);
  padding: 30px 26px 24px; max-width: 560px; width: 100%;
  box-shadow: 0 10px 30px rgba(30, 58, 95, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  margin: 6vh 0 24px; position: relative;
}
.whatsnew-brand {
  font-family: 'Edwardian Script ITC', 'Apple Chancery', cursive;
  font-size: 36px; line-height: 1.05; color: var(--crimson, #8C0930);
  text-align: center; margin: 0 0 2px;
}
.whatsnew-title {
  font-size: 16px; color: var(--navy, #1E3A5F); text-align: center; margin: 0 0 14px;
  font-weight: bold;
}
.whatsnew-intro {
  font-size: 14px; line-height: 1.55; color: var(--dark-gray, #374151); margin: 0 0 16px;
}
.whatsnew-step { margin: 0 0 22px; }
.whatsnew-step__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; margin-right: 8px;
  background: var(--crimson, #8C0930); color: #fff; font-size: 14px; font-weight: bold;
}
.whatsnew-step__title {
  font-size: 15px; font-weight: bold; color: var(--navy, #1E3A5F); margin: 0 0 6px;
  text-align: left;
}
.whatsnew-step__text {
  font-size: 14px; line-height: 1.55; color: var(--dark-gray, #374151); margin: 0 0 10px;
}
.whatsnew-step__img {
  display: block; width: 100%; height: auto; border-radius: 8px;
  border: 1px solid var(--border, #E5E7EB); background: #fff;
}
.whatsnew-done {
  display: block; width: 100%; min-height: 48px; margin: 18px 0 0;
  font-size: 16px; font-weight: bold; color: white;
  background: var(--crimson, #8C0930); border: 0; border-radius: 8px; cursor: pointer;
}
.whatsnew-done:active { background: var(--crimson-dark, #6B0724); }
.whatsnew-close {
  position: absolute; top: 8px; right: 8px; width: 36px; height: 36px;
  font-size: 22px; line-height: 1; color: var(--mid-gray, #9CA3AF);
  background: none; border: 0; cursor: pointer;
}