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