/* Ketnoi overrides, linked last in index.html by the element-web initContainer
   (?v=<branding checksum> busts Cloudflare's cache). Embedded welcome pages
   are sanitized (no <style>/classes), so they're styled from here. */

/* Responsive welcome card: only the welcome page is resized — other auth
   screens (login, verification) keep Element's own sizing. */
.mx_AuthPage_modal:has(.mx_Welcome) { margin: clamp(12px, 6vh, 100px) auto auto; max-width: calc(100vw - 24px); }
.mx_Welcome { width: min(520px, calc(100vw - 24px)); padding: clamp(16px, 4vh, 40px) clamp(16px, 5vw, 48px) clamp(12px, 3vh, 24px); }

/* Welcome page content: centered, logo sized to the card. */
.mx_WelcomePage_body { text-align: center; }
.mx_WelcomePage_body img { width: clamp(64px, 14vh, 112px); height: auto; display: block; margin: 0 auto 8px; }
.mx_WelcomePage_body h1 { margin: 4px 0; font-size: clamp(24px, 4vh, 32px); }
.mx_WelcomePage_body p { margin: 8px 0; line-height: 1.5; }
.mx_WelcomePage_body p:nth-of-type(2) a, .mx_WelcomePage_body p:nth-of-type(3) a {
  display: inline-block; min-width: min(280px, 100%); padding: 10px 16px; border-radius: 10px;
  font-weight: 600; text-decoration: none; box-sizing: border-box;
}
.mx_WelcomePage_body p:nth-of-type(2) a { background: linear-gradient(135deg, #14B8A6, #2563EB); color: #fff; }
.mx_WelcomePage_body p:nth-of-type(3) a { border: 1px solid #2563EB; color: #2563EB; }
.mx_WelcomePage_body p:nth-of-type(4) { font-size: 14px; opacity: 0.85; }

/* Language picker: larger, and its menu opens upwards so it stays on screen. */
.mx_Welcome .mx_AuthBody_language { width: min(260px, 100%); margin: 16px auto 4px; font-size: 16px; }
.mx_Welcome .mx_AuthBody_language .mx_Dropdown_input { padding: 8px 12px; border: 1px solid #2563EB; border-radius: 10px; }
.mx_Welcome .mx_AuthBody_language .mx_Dropdown_menu { top: auto; bottom: 100%; max-height: min(320px, 45vh); }

/* Footer: replace "Powered by Matrix" with the Ketnoi line (links from config). */
.mx_AuthFooter a[href="https://matrix.org"] { display: none; }
.mx_AuthFooter { padding: 12px 8px; line-height: 1.8; }
.mx_AuthFooter a:link, .mx_AuthFooter a:visited, .mx_AuthFooter a:hover { margin: 0; }
.mx_AuthFooter a:nth-child(2)::before { content: " | Accelerating Growth with "; color: #fff; }
.mx_AuthFooter a:nth-child(3)::before, .mx_AuthFooter a:nth-child(4)::before { content: ", "; color: #fff; }
.mx_AuthFooter a:nth-child(5)::before { content: " and "; color: #fff; }

/* Avatar-menu Sign out confirmation (ketnoi.js) — independent of Element's
   dialogs; uses Element's Compound colour tokens so it matches both themes. */
.ketnoi-confirm { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.45); padding: 16px; }
.ketnoi-confirm-card { width: min(420px, 100%); box-sizing: border-box; padding: 24px; border-radius: 16px;
  background: var(--cpd-color-bg-canvas-default, #fff); color: var(--cpd-color-text-primary, #1b1d22);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); font-family: inherit; }
.ketnoi-confirm-card h2 { margin: 0 0 8px; font-size: 20px; }
.ketnoi-confirm-card p { margin: 0 0 20px; line-height: 1.5; color: var(--cpd-color-text-secondary, #656d77); }
.ketnoi-confirm-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.ketnoi-confirm-actions button { padding: 8px 20px; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--cpd-color-border-interactive-secondary, #9199a4); background: transparent; color: inherit; }
.ketnoi-confirm-actions [data-act="ok"] { border-color: var(--cpd-color-bg-critical-primary, #d51928);
  background: var(--cpd-color-bg-critical-primary, #d51928); color: #fff; }
[data-ketnoi-signout] { color: var(--cpd-color-text-critical-primary, #d51928); }