/* Mission Control branding overrides for Element Web (loaded from index.html <head>).
   Scope: auth pages (login / welcome / register / forgot) + global font. Re-apply on Element upgrades. */
@font-face{font-family:"Inter Tight";src:url("fonts/intertight.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{--mc-ink:#16130E;--mc-ink-2:#1C1912;--mc-paper:#F2EFE7;--mc-paper-2:rgba(242,239,231,.72);--mc-orange:#FF4A1C;--mc-line:rgba(242,239,231,.14)}
body,.mx_MatrixChat_wrapper,.mx_AuthPage{font-family:"Inter Tight",Inter,"Twemoji","Apple Color Emoji","Segoe UI Emoji",Arial,Helvetica,sans-serif}

/* Auth page shell */
.mx_AuthPage{background:var(--mc-ink) url("mc/bg.jpg") center/cover no-repeat !important}
.mx_AuthPage_modal{background:transparent !important;box-shadow:none !important;border-radius:18px;overflow:hidden}
.mx_AuthPage_modal.mx_AuthPage_modal_withBlur{box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px var(--mc-line) !important}
.mx_AuthPage_modal.mx_AuthPage_modal_withBlur .mx_AuthPage_modalContent{background:transparent !important}
.mx_AuthPage_modal .mx_AuthPage_modalContent{display:flex;flex-direction:column;align-items:center;background:var(--mc-ink)}
/* Compound "Glass" wrapper (hashed class _glass_xxx) around the modal content */
.mx_AuthPage_modalContent>[class*="_glass_"]{background:rgba(22,19,14,.6) !important;outline-color:var(--mc-line) !important}
.mx_AuthPage_modal:has(.mx_Welcome) [class*="_glass_"]{background:transparent !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;padding:0 !important;border:none !important;outline:none !important;box-shadow:none !important}

/* Header logo (wordmark) */
.mx_AuthHeader{background:transparent !important;width:100% !important;max-width:none !important;align-items:center}
.mx_AuthHeader .mx_AuthBody_language,.mx_AuthHeader .mx_Dropdown{width:160px !important;margin:0 auto 8px}
.mx_AuthHeaderLogo{padding:36px 0 20px !important;flex:none !important;margin-top:0 !important}
.mx_AuthHeaderLogo img,.mx_AuthHeader img{width:210px !important;max-width:none !important;height:auto !important;flex:none !important}
.mx_AuthHeader .mx_AuthHeaderLogo{display:flex;justify-content:center}

/* Body / form */
.mx_AuthBody{background:transparent !important;color:var(--mc-paper-2) !important;border-radius:0 18px 18px 0 !important}
.mx_AuthBody h1,.mx_AuthBody h2,.mx_AuthBody h3{color:var(--mc-paper) !important;letter-spacing:-.02em}
.mx_AuthBody h1{font-size:1.75rem !important;font-weight:700 !important}
.mx_AuthBody h2{color:var(--mc-paper-2) !important}
.mx_AuthBody a,.mx_AuthBody a:visited,.mx_AuthBody a:link{color:var(--mc-orange) !important}
.mx_AuthBody .mx_Field{--cpd-color-bg-canvas-default:var(--mc-ink)}
.mx_AuthBody .mx_Field input,.mx_AuthBody .mx_Field select,.mx_AuthBody input[type=text],.mx_AuthBody input[type=password]{background:var(--mc-ink-2) !important;color:var(--mc-paper) !important;border-color:var(--mc-line) !important}
.mx_AuthBody .mx_Field label{color:var(--mc-paper-2) !important;background:var(--mc-ink-2) !important}
.mx_AuthBody .mx_Field_focused label{color:var(--mc-orange) !important}
.mx_AuthBody .mx_Field_focused input,.mx_AuthBody .mx_Field_focused select{border-color:var(--mc-orange) !important}
.mx_AuthBody .mx_Field_labelAlwaysTopLeft label,.mx_AuthBody .mx_Field input:not(:placeholder-shown)+label,.mx_AuthBody .mx_Field input:focus+label{background:var(--mc-ink-2) !important}
.mx_AuthBody .mx_Login_submit,.mx_AuthBody .mx_AccessibleButton_kind_primary,.mx_AuthBody button[type=submit],.mx_AuthBody input[type=submit],
.mx_AuthBody .mx_Login_fullWidthButton{background:var(--mc-orange) !important;color:var(--mc-ink) !important;border:none !important;border-radius:999px !important;font-weight:700 !important;letter-spacing:-.01em;height:40px !important;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.mx_AuthBody .mx_Login_submit:hover,.mx_AuthBody .mx_AccessibleButton_kind_primary:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(255,74,28,.3)}
.mx_AuthBody .mx_AccessibleButton_kind_link,.mx_AuthBody .mx_AccessibleButton_kind_link_inline{color:var(--mc-orange) !important}
.mx_AuthBody .mx_SSOButtons .mx_SSOButton{border-color:var(--mc-line) !important;color:var(--mc-paper) !important;background:var(--mc-ink-2) !important}
.mx_AuthBody .mx_Dropdown,.mx_AuthBody .mx_Dropdown_input,.mx_AuthBody .mx_Dropdown_menu{background:var(--mc-ink-2) !important;color:var(--mc-paper) !important;border-color:var(--mc-line) !important}
.mx_AuthBody .mx_Dropdown_option{color:var(--mc-paper) !important}
.mx_AuthBody .mx_Dropdown_option_highlight{background:rgba(255,74,28,.18) !important}
.mx_AuthBody .mx_ServerPicker_server{color:var(--mc-paper) !important}
.mx_AuthBody .mx_ServerPicker_change{color:var(--mc-orange) !important}
.mx_AuthBody_language .mx_Dropdown_input{background:var(--mc-ink-2) !important}
.mx_AuthBody .mx_ErrorMessage,.mx_AuthBody .mx_Login_error{color:#FF8A66 !important}

/* ---------- Welcome page (welcome.html) ----------
   Element sanitises the embedded page (no <style>/<svg>/class attrs survive), so the whole look is driven from here
   by structure: .mx_WelcomePage_body > div > [img.mark, img.wordmark, h1, p, a, p]. */
.mx_AuthPage_modal:has(.mx_Welcome),.mx_AuthPage_modal:has(.mx_Welcome) .mx_AuthPage_modalContent{background:transparent !important;box-shadow:none !important}
.mx_Welcome{background:transparent !important;padding:24px 16px 8px !important}
.mx_WelcomePage_body>div{position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;width:min(760px,calc(100vw - 32px));
  padding:clamp(28px,5vw,44px) clamp(28px,6vw,64px) clamp(24px,4vw,36px);border-radius:18px;background:var(--mc-ink);color:var(--mc-paper);
  font-family:"Inter Tight",Inter,system-ui,sans-serif;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px var(--mc-line)}
/* moving grid (::before) + drifting starfield (::after), pure CSS */
.mx_WelcomePage_body>div::before,.mx_WelcomePage_body>div::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1}
.mx_WelcomePage_body>div::before{background-image:linear-gradient(rgba(242,239,231,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(242,239,231,.09) 1px,transparent 1px);
  background-size:48px 48px;animation:mc-grid 12s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 80%)}
.mx_WelcomePage_body>div::after{opacity:.55;animation:mc-drift 45s linear infinite;background-size:100% 100%;background-image:
  radial-gradient(1.2px 1.2px at 12% 18%,var(--mc-paper) 50%,transparent 60%),radial-gradient(1px 1px at 28% 72%,var(--mc-paper) 50%,transparent 60%),
  radial-gradient(1.5px 1.5px at 44% 32%,var(--mc-paper) 50%,transparent 60%),radial-gradient(1px 1px at 61% 84%,var(--mc-paper) 50%,transparent 60%),
  radial-gradient(1.2px 1.2px at 73% 22%,var(--mc-paper) 50%,transparent 60%),radial-gradient(1px 1px at 86% 58%,var(--mc-paper) 50%,transparent 60%),
  radial-gradient(1.6px 1.6px at 92% 12%,var(--mc-paper) 50%,transparent 60%),radial-gradient(1px 1px at 6% 90%,var(--mc-paper) 50%,transparent 60%),
  radial-gradient(1.2px 1.2px at 52% 8%,var(--mc-paper) 50%,transparent 60%),radial-gradient(1px 1px at 37% 95%,var(--mc-paper) 50%,transparent 60%),
  radial-gradient(1px 1px at 20% 40%,var(--mc-paper) 50%,transparent 60%),radial-gradient(1px 1px at 66% 48%,var(--mc-paper) 50%,transparent 60%),
  radial-gradient(1.3px 1.3px at 80% 80%,var(--mc-paper) 50%,transparent 60%),radial-gradient(1px 1px at 33% 15%,var(--mc-paper) 50%,transparent 60%),
  radial-gradient(1px 1px at 95% 35%,var(--mc-paper) 50%,transparent 60%),radial-gradient(1.4px 1.4px at 15% 62%,var(--mc-paper) 50%,transparent 60%)}
/* orange arrow mark lifting off */
.mx_WelcomePage_body>div>img:first-of-type{display:block;width:clamp(56px,8vw,72px);height:auto;margin:0 auto 18px;transform-origin:50% 100%;
  animation:mc-lift 3.2s cubic-bezier(.45,0,.55,1) infinite;filter:drop-shadow(0 10px 24px rgba(255,74,28,.35))}
/* wordmark (draw-in animation lives inside mc/wordmark-paper-draw.svg) */
.mx_WelcomePage_body>div>img:nth-of-type(2){display:block;width:min(340px,70%);height:auto;margin:0 auto 24px}
.mx_WelcomePage_body>div>h1{font-size:clamp(24px,3.6vw,32px);line-height:1.05;letter-spacing:-.02em;font-weight:700;margin:0 0 10px;color:var(--mc-paper)}
.mx_WelcomePage_body>div>p{font-size:clamp(15px,2vw,18px);line-height:1.5;color:var(--mc-paper-2);margin:0 auto 24px;max-width:38ch}
.mx_WelcomePage_body>div>p:last-of-type{margin:26px auto 0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,239,231,.42)}
.mx_WelcomePage_body>div>a{position:relative;display:inline-block;background:var(--mc-orange);color:var(--mc-ink) !important;text-decoration:none !important;
  font-weight:700;font-size:17px;letter-spacing:-.01em;padding:15px 40px 15px 34px;border-radius:999px;box-shadow:0 10px 30px rgba(255,74,28,.28);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.mx_WelcomePage_body>div>a::after{content:"";display:inline-block;width:14px;height:14px;margin-left:10px;vertical-align:-1px;
  background:url("mc/mark-ink.svg") center/contain no-repeat;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.mx_WelcomePage_body>div>a:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(255,74,28,.4)}
.mx_WelcomePage_body>div>a:hover::after{transform:translateY(-3px)}
/* hand-drawn pen ring on hover (site motif), drawn with an SVG data: URL mask */
.mx_WelcomePage_body>div>a::before{content:"";position:absolute;left:-8%;top:-26%;width:116%;height:152%;pointer-events:none;opacity:0;transition:opacity .45s;
  background:url("mc/pen.svg") center/100% 100% no-repeat}
.mx_WelcomePage_body>div>a:hover::before{opacity:1}
@keyframes mc-grid{from{background-position:0 0,0 0}to{background-position:0 48px,48px 0}}
@keyframes mc-drift{from{background-position:0 0}to{background-position:0 -100%}}
@keyframes mc-lift{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-12px) scale(1.04)}}
@media (prefers-reduced-motion:reduce){
  .mx_WelcomePage_body>div::before,.mx_WelcomePage_body>div::after,.mx_WelcomePage_body>div>img:first-of-type{animation:none}
  .mx_WelcomePage_body>div>a,.mx_WelcomePage_body>div>a::before,.mx_WelcomePage_body>div>a::after{transition:none}
}
.mx_Welcome .mx_AuthBody_language{margin-top:18px !important}
.mx_Welcome .mx_AuthBody_language .mx_Dropdown_input{background:rgba(22,19,14,.85) !important;color:var(--mc-paper) !important;border-color:var(--mc-line) !important}
.mx_Welcome .mx_AuthBody_language .mx_Dropdown_arrow{filter:invert(1)}

/* Footer */
.mx_AuthFooter{background:linear-gradient(transparent,rgba(22,19,14,.9)) !important;opacity:1 !important;font-family:"Inter Tight",Inter,sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.mx_AuthFooter a,.mx_AuthFooter a:link,.mx_AuthFooter a:visited,.mx_AuthFooter a:hover{color:rgba(242,239,231,.55) !important;text-decoration:none !important;margin:0 14px}
.mx_AuthFooter a:hover{color:var(--mc-orange) !important}
/* "powered by Matrix" blurb if ever rendered */
.mx_AuthFooter .mx_AuthFooter_poweredBy,.mx_AuthPage_poweredBy{display:none !important}

/* App chrome accents for the Mission Control theme */
.cpd-theme-dark .mx_MatrixChat .mx_RoomHeader,.cpd-theme-dark .mx_RoomView_body{font-family:"Inter Tight",Inter,sans-serif}

/* registration is closed on this server */
.mx_AuthBody_changeFlow{display:none !important}