/* 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; }
#groups .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; }
#groups .site strong { display: block; font-weight: 600; }
#groups .site small { display: block; margin-top: 2px; color: #98a2a9; word-break: break-all; }
#groups .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; }
  #groups .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; } }

/* The dashboard shell: measured from the CMS itself (1920px wide): a 56px
   top bar and 240px menu on #1e2124, 40px platform rows with 19px icons,
   32px website rows with 10px between and 24px Material Symbols, the same
   colours, and locked rows at 45% opacity. */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-display: swap; font-weight: 200 900; src: url(https://cdn.jsdelivr.net/fontsource/fonts/source-sans-3:vf@5.3.0/latin-wght-normal.woff2) format("woff2-variations"); }
.ms { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; font-feature-settings: "liga"; }
body.dashboard { overflow: hidden; }
.shell { position: relative; display: grid; grid-template-columns: 240px 1fr; grid-template-rows: 56px 1fr; height: 100vh; height: 100dvh; background: #1e2124; font: 400 15px/1.2 "Source Sans 3", system-ui, sans-serif; }
.shell-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 0; padding: 0 8px; background: #1e2124; }
.shell-logo { width: 40px; height: 40px; margin-right: 18px; }
.picker { display: flex; align-items: center; gap: 0; margin-right: 12px; color: #aeb6bc; font-size: 14px; }
.picker span { width: 54px; }
.picker select { width: 320px; height: 40px; padding: 0 10px; border: 1px solid #505960; border-radius: 3px; background: #15191c; color: #edf0f2; font: 400 14px "Source Sans 3", system-ui, sans-serif; }
.shell-spacer { flex: 1; }
.shell-leads { height: 36px; margin-right: 26px; padding: 0 12px; border: 2px solid #2271b1; border-radius: 3px; background: #2271b1; color: #fff; font: 600 15px "Source Sans 3", system-ui, sans-serif; }
.shell-icon-button { display: grid; place-items: center; width: 32px; height: 32px; margin-left: 4px; padding: 0; border: 1px solid #2271b1; border-radius: 3px; background: #2271b1; color: #fff; }
.shell-icon-button .ms { font-size: 22px; }
.shell-menu-wrap { position: relative; }
.shell-menu { position: absolute; top: 40px; right: 0; z-index: 20; min-width: 220px; padding: 6px; border: 1px solid #343a40; border-radius: 4px; background: #1e2124; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.shell-menu a, .shell-menu button, .shell-menu p { display: block; width: 100%; margin: 0; padding: 7px 10px; border: 0; border-radius: 3px; background: transparent; color: #dce1e4; font: 400 14px "Source Sans 3", system-ui, sans-serif; text-align: left; text-decoration: none; cursor: pointer; }
.shell-menu p { color: #aeb6bc; cursor: default; }
.shell-menu a:hover, .shell-menu button:hover { background: #343a40; color: #fff; }
#create-menu a { margin-bottom: 4px; background: #2271b1; color: #fff; }
.shell-menu hr { margin: 6px 0; border: 0; border-top: 1px solid #343a40; }
.shell-nav { overflow-y: auto; padding: 20px 11px 20px 12px; background: #1e2124; scrollbar-color: #4b5359 #1e2124; }
.shell-nav a { display: flex; align-items: center; gap: 10px; width: 201px; min-height: 40px; margin: 0; padding: 0 13px; border-radius: 3px; color: #b8c0c6; text-decoration: none; }
.shell-nav a svg { flex: none; width: 19px; height: 19px; }
.shell-nav a.site { gap: 4px; min-height: 32px; margin-bottom: 10px; padding: 0 6px; color: #b9bfc6; }
.shell-nav a.site .ms { flex: none; width: 24px; }
.shell-nav a.after-site { margin-top: 0; margin-bottom: 10px; }
.shell-nav .section-gap { height: 31px; }
.shell-nav a:hover, .shell-nav a:focus-visible, .shell-nav a[aria-current="page"] { background: #343a40; color: #fff; }
.shell-nav a.locked { opacity: .45; }
.shell-nav .chevron { margin-left: auto; color: #818c98; }
.shell-nav .forms-icon { width: 24px; text-align: center; font-size: 17px; }
.workspace { width: 100%; height: 100%; border: 0; background: #15191c; }
.shell-flyout { position: fixed; z-index: 30; min-width: 190px; padding: 6px; border: 1px solid #343a40; border-radius: 4px; background: #1e2124; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.shell-flyout a { display: block; padding: 8px 12px; border-radius: 3px; color: #dce1e4; font: 400 14.5px "Source Sans 3", system-ui, sans-serif; text-decoration: none; }
.shell-flyout a:hover { background: #343a40; color: #fff; }
.shell-toast { position: fixed; left: 50%; bottom: 24px; z-index: 40; max-width: min(560px, calc(100% - 32px)); margin: 0; padding: 12px 16px; border-radius: 4px; background: #2e3439; color: #fff; font: 400 14.5px "Source Sans 3", system-ui, sans-serif; transform: translateX(-50%); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
  .shell-bar { flex-wrap: wrap; gap: 8px; padding: 8px; }
  .picker select { width: auto; max-width: 60vw; }
  .shell-nav { display: flex; gap: 6px; overflow-x: auto; padding: 8px; }
  .shell-nav a, .shell-nav a.site { flex: none; width: auto; margin: 0; }
  .shell-nav .section-gap { display: none; }
}
body.dashboard > header.bar, body.dashboard > main:not(.loading-screen) { display: none !important; }