/* ============================================================
   MEAXTIME — shared auth design system
   Single source of truth for the LEFT BRAND PANEL + font shared
   by the login (two_factor/_base.html) and signup (landing_register.html).

   Loaded LAST in both templates, so even if the inline <style> blocks
   drift, the two screens stay identical. Grouped selectors cover both
   scopes (.mx-login / .mx-signup) and both class-name variants
   (.brand-list / .bullets, .brand-logo-left / .brand-logo).
   ============================================================ */

/* ---- shared base typography ----
   Pinned here so the auth screens don't inherit a different base
   font-size/color from the surrounding Sneat chrome (login is a full
   Sneat doc; signup lives inside base_site.html). Keeps both identical. */
.mx-login,
.mx-signup {
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  /* Match base_site.html body smoothing: login lacked it, so its text
     rendered subpixel (heavier / less "white") vs the antialiased signup. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- brand panel: layout ---- */
.mx-login .brand-panel,
.mx-signup .brand-panel {
  padding: 52px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 34px;
}

/* ---- brand panel: copy ---- */
.mx-login .brand-copy,
.mx-signup .brand-copy { margin-top: auto; }

.mx-login .brand-copy h1,
.mx-signup .brand-copy h1 {
  margin: 0 0 18px;
  max-width: 16ch;
  color: #fff;
  font-size: 36px;
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -.03em;
}

.mx-login .brand-copy p,
.mx-signup .brand-copy p {
  margin: 0 0 34px;
  max-width: 35ch;
  color: rgba(255,255,255,.78);
  font-size: 16px;
  line-height: 1.7;
}

/* ---- brand panel: bullet list (both class names) ---- */
.mx-login .brand-list, .mx-login .bullets,
.mx-signup .brand-list, .mx-signup .bullets {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 17px;
  list-style: none;
}

.mx-login .brand-list li, .mx-login .bullets li,
.mx-signup .brand-list li, .mx-signup .bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: rgba(255,255,255,.92);
  font-size: 15px;
  line-height: 1.4;
}

.mx-login .brand-list .tick, .mx-login .bullets .tick,
.mx-signup .brand-list .tick, .mx-signup .bullets .tick {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--brand);
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(27,22,96,.16);
}

/* ---- brand panel: footer / reassure ---- */
.mx-login .brand-footer,
.mx-signup .brand-footer {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.16);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  color: rgba(255,255,255,.9);
  font-size: 13.5px;
}

.mx-login .reassure,
.mx-signup .reassure {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mx-login .reassure .ck,
.mx-signup .reassure .ck {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.2);
  color: #fff;
}

/* ---- brand panel: logo (both variants) ---- */
.mx-login .brand-logo-left,
.mx-signup .brand-logo {
  display: block;
  align-self: flex-start;
  height: 42px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(15,23,42,.28));
}

/* ---- mobile: hide the brand panel, show only the form ----
   Must live here (loaded last) or the .brand-panel{display:flex} above
   overrides the templates' inline @media display:none. */
@media (max-width: 1000px) {
  .mx-login .brand-panel,
  .mx-signup .brand-panel { display: none !important; }
}