/* The same charcoal and blue as the CMS, so the front door and the CMS read
   as one product. */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #202427; color: #edf0f2; font: 400 15px/1.5 system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; }
[hidden] { display: none !important; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; border-bottom: 1px solid #343a3f; background: #1d2124; }
.logo { display: block; width: 132px; height: auto; }
.account { display: flex; align-items: center; gap: 12px; color: #c2cad0; font-size: 13.5px; }
main { width: min(880px, 100% - 32px); margin: 40px auto; }
h1 { margin: 0 0 6px; font-size: 22px; font-weight: 600; }
h2 { margin: 28px 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #98a2a9; }
button, .button { display: inline-block; padding: 9px 14px; border: 2px solid #2271b1; border-radius: 3px; background: #2271b1; color: #fff; font: inherit; text-decoration: none; cursor: pointer; }
button:hover, button:focus-visible, .button:hover { border-color: #135e96; background: #135e96; }
button:disabled { opacity: .6; cursor: wait; }
button.quiet { padding: 5px 10px; border-color: #4b5359; background: transparent; color: #dce1e4; }
.panel { max-width: 420px; margin: 12vh auto 0; padding: 32px; border: 1px solid #343a3f; border-radius: 3px; background: #1d2124; text-align: center; }
.panel p { color: #c2cad0; }
.panel .logo { margin: 0 auto 18px; width: 150px; }
.head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; }
input[type="search"] { width: min(320px, 100%); padding: 9px 12px; border: 1px solid #4b5359; border-radius: 3px; background: #15191c; color: inherit; font: inherit; }
.site { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid #343a3f; border-radius: 3px; background: #1d2124; margin-bottom: 8px; }
.site strong { display: block; font-weight: 600; }
.site small { display: block; margin-top: 2px; color: #98a2a9; word-break: break-all; }
.site button { flex: none; }
.note { color: #c2cad0; font-size: 13.5px; }
body.centred { display: grid; place-items: center; min-height: 100vh; }
body.centred .panel { margin: 0; }
@media (max-width: 560px) {
  .bar { padding: 12px 16px; }
  .site { flex-direction: column; align-items: stretch; }
}

/* The loading screen: identical to the website's "Opening CMS…" page. */
.loading-screen { display: none; }
body.loading { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 24px; background: #202427; }
body.loading > :not(.loading-screen):not(script) { display: none !important; }
body.loading .loading-screen { display: flex; flex-direction: column; align-items: center; width: min(100%, 360px); margin: 0; text-align: center; }
.loading-logo { display: block; max-width: 160px; max-height: 92px; width: auto; height: auto; margin-bottom: 28px; object-fit: contain; }
.loading-screen h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: .01em; font-family: system-ui, sans-serif; }
.loading-screen p { margin: 8px 0 28px; color: #b8c0c6; font-size: 14px; font-family: system-ui, sans-serif; }
.progress { width: 180px; height: 3px; overflow: hidden; border-radius: 3px; background: #3a4248; }
.progress::after { display: block; width: 40%; height: 100%; border-radius: inherit; background: #aebbc5; content: ''; animation: advance 1.25s ease-in-out infinite alternate; }
@keyframes advance { from { transform: translateX(-100%); } to { transform: translateX(350%); } }
@media (prefers-reduced-motion: reduce) { .progress::after { animation: none; width: 100%; opacity: .75; } }