/* Zappocity homepage styles on top of Bootstrap 5.3. */
:root {
  --cs-accent: #3b5bdb;
  --cs-accent-2: #7048e8;
}
.icon { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; }
.icon-lg { width: 2rem; height: 2rem; }
.hero {
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(112, 72, 232, .12), transparent 60%),
    radial-gradient(50rem 25rem at -10% 10%, rgba(59, 91, 219, .12), transparent 60%);
}
.mock .dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--bs-secondary-bg); display: inline-block; }
.mock-row { display: flex; flex-direction: column; padding: .6rem 0; border-bottom: 1px solid var(--bs-border-color); }
.mock-row:last-child { border-bottom: 0; }
.feature, .step { border: 1px solid var(--bs-border-color); transition: transform .15s ease, box-shadow .15s ease; }
.feature:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .08); }
.feature .badge { font-size: .65rem; vertical-align: middle; }
.step-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--cs-accent); color: #fff; font-weight: 700;
}
.code { font-size: .85rem; background: var(--bs-tertiary-bg); white-space: pre-wrap; }
.narrow { max-width: 48rem; }
.faq { border-bottom: 1px solid var(--bs-border-color); padding: 1rem 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq p { margin: .75rem 0 0; }
.cta { background: linear-gradient(135deg, var(--cs-accent), var(--cs-accent-2)); }
@media (prefers-reduced-motion: reduce) { .feature { transition: none; } }
.plan-card { cursor: pointer; border-width: 2px; transition: border-color .15s ease; }
.btn-check:checked + .plan-card { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.btn-check:focus-visible + .plan-card { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.new-version { position: fixed; z-index: 1080; bottom: 1rem; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 2rem); }

/* Secondary buttons. Bootstrap's outline-secondary is grey text on a grey
   border, which reads as disabled (in dark mode especially). These keep
   full-strength text, a filled surface and a clear border, and take the
   accent colour on hover; disabled ones still fade. */
.btn-outline-secondary {
  --bs-btn-color: var(--bs-emphasis-color);
  --bs-btn-bg: var(--bs-body-bg);
  --bs-btn-border-color: rgba(var(--bs-emphasis-color-rgb), .28);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--cs-accent);
  --bs-btn-hover-border-color: var(--cs-accent);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #3249b8;
  --bs-btn-active-border-color: #3249b8;
  --bs-btn-focus-shadow-rgb: 59, 91, 219;
  --bs-btn-disabled-color: var(--bs-secondary-color);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-border-color);
  font-weight: 500;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .06);
}
[data-bs-theme=dark] .btn-outline-secondary {
  --bs-btn-bg: rgba(255, 255, 255, .05);
  --bs-btn-border-color: rgba(255, 255, 255, .22);
  --bs-btn-hover-bg: #4c6ef5;
  --bs-btn-hover-border-color: #4c6ef5;
  box-shadow: none;
}
.btn-outline-secondary .icon { opacity: .9; }
.btn-outline-secondary:hover .icon { opacity: 1; }
.btn-check:checked + .btn-outline-secondary { --bs-btn-active-bg: var(--cs-accent); --bs-btn-active-border-color: var(--cs-accent); }

/* Developer pages: the table of contents stays below the menu. */
.dev-toc { top: 5rem; max-height: calc(100vh - 6rem); overflow-y: auto; }

/* The signed-in name in the menu bar, and its menu. */
.session-menu { position: relative; }
.session-menu .session-name { max-width: 14rem; }
.session-menu .dropdown-menu { right: 0; left: auto; margin-top: .25rem; }
.mention-menu { min-width: 16rem; }

/* Knowledge base articles (/kb). */
.kb-article { max-width: 52rem; }
.kb-article h1 { font-size: 1.9rem; margin-bottom: 1rem; }
.kb-article h2 { font-size: 1.35rem; margin-top: 2rem; }
.kb-article h3 { font-size: 1.1rem; margin-top: 1.5rem; }
.kb-article pre { background: var(--bs-tertiary-bg); padding: .75rem 1rem; border-radius: .375rem; overflow-x: auto; }
.kb-article code { overflow-wrap: anywhere; }
.kb-article pre code { overflow-wrap: normal; }
.kb-article blockquote { border-left: .25rem solid var(--bs-border-color); padding-left: 1rem; color: var(--bs-secondary-color); }
.kb-search { max-width: 28rem; }

/* Forum posts (/forum), rendered from Markdown by the server. */
.forum-post-body > :last-child { margin-bottom: 0; }
.forum-post-body pre { background: var(--bs-tertiary-bg); padding: .5rem .75rem; border-radius: .375rem; overflow-x: auto; }
.forum-post-body img { max-width: 100%; }
/* Keyboard shortcut help and pickers (ui.js keys). */
.shortcuts-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 1080; padding: 1rem; }
.shortcuts-overlay .card { max-width: 26rem; width: 100%; }
.kb-cursor { box-shadow: inset 3px 0 0 var(--bs-primary); }
/* Notes in webmail. */
.note-card { color: inherit; }
.note-card:focus-visible { outline: 2px solid var(--bs-primary); }
.note-preview { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }

/* A domain's own sign-in page (ui.js signinLook): centered, a card on the
   page's colour; split, the logo and words on a coloured panel beside the
   form. The accent colours the button and links. */
.signin-look { min-height: 100vh; min-height: 100dvh; }
.signin-look.centered { padding: 3rem 1rem; }
.signin-look .signin-words { margin-bottom: 1.5rem; }
.signin-look.centered .signin-words { text-align: center; }
.signin-look .signin-words:empty { display: none; }
.signin-logo { display: block; max-width: 14rem; max-height: 5rem; object-fit: contain; margin-bottom: 1rem; }
.signin-look.centered .signin-logo { margin-left: auto; margin-right: auto; }
.signin-title { font-size: 1.6rem; font-weight: 700; margin-bottom: .5rem; overflow-wrap: anywhere; }
.signin-message { white-space: pre-line; overflow-wrap: anywhere; margin-bottom: 0; opacity: .9; }
.signin-look.centered.has-bg { color: var(--signin-on-bg); }
.signin-look.centered.has-bg .signin > .text-body-secondary, .signin-look.centered.has-bg .signin > p { color: var(--signin-on-bg) !important; opacity: .85; }
.signin-look.centered.has-bg .signin > p a { color: inherit; text-decoration: underline; }
.signin-look.split { display: flex; }
.signin-side { flex: 0 0 42%; display: flex; align-items: center; padding: 3rem; }
.signin-side .signin-logo { max-height: 6rem; }
.signin-side .signin-title { font-size: 2rem; }
.signin-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 3rem 1rem; background: var(--bs-body-bg); }
.signin-look.has-accent .btn-primary { --bs-btn-bg: var(--signin-accent); --bs-btn-border-color: var(--signin-accent); --bs-btn-color: var(--signin-accent-text);
  --bs-btn-hover-bg: var(--signin-accent); --bs-btn-hover-border-color: var(--signin-accent); --bs-btn-hover-color: var(--signin-accent-text);
  --bs-btn-active-bg: var(--signin-accent); --bs-btn-active-border-color: var(--signin-accent); --bs-btn-active-color: var(--signin-accent-text);
  --bs-btn-disabled-bg: var(--signin-accent); --bs-btn-disabled-border-color: var(--signin-accent); --bs-btn-disabled-color: var(--signin-accent-text); }
.signin-look.has-accent .btn-primary:hover { filter: brightness(.92); }
.signin-look.has-accent .signin-main a, .signin-look.has-accent.centered:not(.has-bg) a, .signin-look.has-accent .card a { color: var(--signin-accent); }
.signin-look.has-accent .form-control:focus { border-color: var(--signin-accent); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--signin-accent) 30%, transparent); }
@media (max-width: 767.98px) {
  .signin-look.split { flex-direction: column; }
  .signin-side { flex: none; padding: 2rem 1.5rem; }
  .signin-side .signin-title { font-size: 1.5rem; }
}
/* The admin panel's preview of a sign-in page, drawn smaller. */
.signin-preview { border: 1px solid var(--bs-border-color); border-radius: .5rem; overflow: hidden; height: 26rem; position: relative; background: var(--bs-body-bg); }
.signin-preview > .signin-look { transform: scale(.6); transform-origin: 0 0; width: 166.667%; min-height: 166.667%; pointer-events: none; }
/* Note colours: a stripe on cards and titles, and the editor's swatches. */
.note-c-red { --note-c: var(--bs-red); } .note-c-orange { --note-c: var(--bs-orange); } .note-c-yellow { --note-c: var(--bs-yellow); }
.note-c-green { --note-c: var(--bs-green); } .note-c-teal { --note-c: var(--bs-teal); } .note-c-blue { --note-c: var(--bs-blue); }
.note-c-purple { --note-c: var(--bs-purple); } .note-c-pink { --note-c: var(--bs-pink); } .note-c-gray { --note-c: var(--bs-gray); }
.note-card[class*="note-c-"] { border-left: 4px solid var(--note-c); }
.note-title[class*="note-c-"] { border-left: 4px solid var(--note-c); padding-left: .5rem; }
.note-card { cursor: pointer; }
.note-tag { font-weight: 500; }
.note-swatch { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid var(--bs-border-color); background: var(--note-c, var(--bs-body-bg));
  display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--bs-secondary-color); }
.note-swatch.active { outline: 2px solid var(--bs-primary); outline-offset: 2px; }

/* In-page notices and dialogs (ZUI.toast, ZUI.ask, ZUI.askText). */
.z-toasts { z-index: 1090; max-width: min(26rem, calc(100vw - 1rem)); pointer-events: none; }
.z-toast { pointer-events: auto; width: 100%; border: 0; border-left: .25rem solid var(--z-toast-accent); background: var(--bs-body-bg); color: var(--bs-body-color); box-shadow: var(--bs-box-shadow); animation: z-toast-in .2s ease-out; transition: opacity .2s, transform .2s; }
.z-toast-text { white-space: pre-line; overflow-wrap: anywhere; font-size: .9rem; }
.z-toast-icon { color: var(--z-toast-accent); }
.z-toast-danger { --z-toast-accent: var(--bs-danger); }
.z-toast-success { --z-toast-accent: var(--bs-success); }
.z-toast-warning { --z-toast-accent: var(--bs-warning); }
.z-toast-info { --z-toast-accent: var(--bs-primary); }
.z-toast-out { opacity: 0; transform: translateX(1.5rem); }
@keyframes z-toast-in { from { opacity: 0; transform: translateX(1.5rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .z-toast { animation: none; transition: none; } }
.z-dialog { overflow-y: auto; }
.z-dialog-text { white-space: pre-line; overflow-wrap: anywhere; }