/* The door pass (js/pass.js) on the home page. The ring and bar change
 * colour every 15 seconds so the front desk can tell it is live. */
.xpass { --xp-hue: 215; max-width: 340px; margin: 0 auto; text-align: center; }
.xpQr { padding: 12px; border: 6px solid hsl(var(--xp-hue), 62%, 44%); border-radius: 16px; background: #fff; transition: border-color .4s; }
.xpQr svg { display: block; width: 100%; height: auto; }
.xpLive { height: 6px; margin: 14px 0 6px; border-radius: 3px; background: #e2e6ec; overflow: hidden; }
.xpFill { display: block; height: 100%; width: 100%; background: hsl(var(--xp-hue), 62%, 44%); transition: width .25s linear; }
.xpClock { font-size: 22px; font-weight: 600; color: #111827; font-variant-numeric: tabular-nums; }
.xpAlt { width: auto; min-height: 0; margin-top: 12px; padding: 6px 12px; border: 1px solid #cdd4de; border-radius: 8px; background: #fff;
    color: #111827; font-size: 14px; font-weight: 500; }
.xpAlt:hover { background: #f3f5f8; border-color: #cdd4de; }
.xpBar { display: block; width: 100%; margin-top: 12px; }
.xpBar[hidden] { display: none; }
.xpErr { color: #b42318; }