/* 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; }

/* The server console (term.js): a fixed grid of text, light on dark in
   both themes, with the 16 terminal colours. */
.z-term { height: 26rem; max-height: 70vh; margin: 0; padding: 4px; overflow: hidden; background: #111; color: #ddd; border-radius: var(--bs-border-radius);
  font: 14px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; cursor: text; }
.z-term:focus { outline: 2px solid var(--bs-primary); outline-offset: 1px; }
.z-term-bold { font-weight: 700; }
.z-term-ul { text-decoration: underline; }
.z-term-cursor { background: #ddd; color: #111; }
.z-term-fg-d { color: #111; } .z-term-bg-d { background: #ddd; }
.z-term-fg-0 { color: #3a3a3a; } .z-term-fg-1 { color: #e06c6c; } .z-term-fg-2 { color: #8cc265; } .z-term-fg-3 { color: #d8b45a; }
.z-term-fg-4 { color: #6aa6e8; } .z-term-fg-5 { color: #c678dd; } .z-term-fg-6 { color: #56b6c2; } .z-term-fg-7 { color: #ccc; }
.z-term-fg-8 { color: #777; } .z-term-fg-9 { color: #ff8080; } .z-term-fg-10 { color: #a8e07a; } .z-term-fg-11 { color: #f0d070; }
.z-term-fg-12 { color: #8cc0ff; } .z-term-fg-13 { color: #e09cf0; } .z-term-fg-14 { color: #7ad8e4; } .z-term-fg-15 { color: #fff; }
.z-term-bg-0 { background: #000; } .z-term-bg-1 { background: #a33; } .z-term-bg-2 { background: #4a7a2a; } .z-term-bg-3 { background: #8a6d1e; }
.z-term-bg-4 { background: #2b5d9b; } .z-term-bg-5 { background: #7a3a8a; } .z-term-bg-6 { background: #2a7a84; } .z-term-bg-7 { background: #aaa; }
.z-term-bg-8 { background: #555; } .z-term-bg-9 { background: #d55; } .z-term-bg-10 { background: #6a6; } .z-term-bg-11 { background: #b93; }
.z-term-bg-12 { background: #47c; } .z-term-bg-13 { background: #a5b; } .z-term-bg-14 { background: #4aa; } .z-term-bg-15 { background: #eee; }

/* A dashed border for "add another" boxes. */
.border-dashed { border-style: dashed !important; }
/* Usage graphs (ZUI.usageCharts): two validated series hues per mode. */
.z-chart { --z-s1: #2a78d6; --z-s2: #eb6834; --z-grid: var(--bs-border-color-translucent); }
[data-bs-theme=dark] .z-chart { --z-s1: #3987e5; --z-s2: #d95926; }
.z-chart svg { display: block; width: 100%; height: 9rem; overflow: visible; }
.z-chart .z-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.z-chart .z-grid { stroke: var(--z-grid); stroke-width: 1; }
.z-chart .z-axis { fill: var(--bs-secondary-color); font-size: 11px; }
.z-chart .z-cross { stroke: var(--bs-secondary-color); stroke-width: 1; stroke-dasharray: 2 3; }
.z-chart .z-dot { stroke: var(--bs-body-bg); stroke-width: 2; }
.z-chart .z-tip { position: absolute; pointer-events: none; z-index: 2; white-space: nowrap; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem; box-shadow: var(--bs-box-shadow-sm); padding: .25rem .5rem; font-size: .75rem; }
.z-swatch { display: inline-block; width: .75rem; height: .2rem; border-radius: 1px; vertical-align: middle; }
@media (forced-colors: active) { .z-chart .z-line { stroke: CanvasText; } .z-chart .z-line.z-s2 { stroke-dasharray: 5 3; } }