/* The Creator login page (login.php), and nothing else: every rule sits under .cx-login, the class of that page's
   <html>, and the font families have names of their own. Light page, form on the left; wider than 960 px the x of the
   logo on the right, on a pale teal that fades out towards the form. Brand fonts are the files chunkx.io uses. */
@font-face {
  font-family: 'cx-login-nunito';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('../fonts/nunito-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'cx-login-roboto';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/roboto-latin.woff2') format('woff2');
}

.cx-login {
  --teal: #00D4D4;
  --teal-hover: #00C2C4;
  --teal-text: #0E6B78;      /* teal that is readable as text on white */
  --teal-tint: #EBF8F8;
  --ink: #0A2849;
  --ink-soft: #4B6078;
  --deep: #06323C;
  --line: #C6D1DB;
  --error: #C2185B;
  --error-tint: #FCEEF3;
  --error-deep: #7E1240;
  --font-head: 'cx-login-nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'cx-login-roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.cx-login *, .cx-login *::before, .cx-login *::after { box-sizing: border-box; }
.cx-login, .cx-login body { height: 100%; margin: 0; }
.cx-login body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.cx-login h1, .cx-login p { margin: 0; }
.cx-login a { color: inherit; }
.cx-login button, .cx-login input { font: inherit; color: inherit; }
.cx-login button { cursor: pointer; }
.cx-login [hidden] { display: none !important; }

.cx-login .split {
  position: relative; min-height: 100%; display: grid; grid-template-columns: minmax(480px, 42%) 1fr;
  /* white behind the form, full tint from the middle of the x panel on */
  background: linear-gradient(90deg, #fff 0, #fff 30%, #F6FCFC 42%, #EFF9F9 56%, var(--teal-tint) 74%);
}

/* ── left: the form ────────────────────────────────────────────── */
.cx-login .side {
  display: grid; grid-template-rows: auto 1fr auto;
  padding: 36px clamp(28px, 4.2vw, 96px) 28px;
  min-height: 100%;
}
.cx-login .brand { display: block; height: 54px; width: auto; margin-left: -3px; }
.cx-login main { width: 100%; max-width: 384px; align-self: center; padding: 32px 0 5vh; }

.cx-login h1 {
  font-family: var(--font-head); font-weight: 700;
  font-size: 44px; line-height: 1.1; letter-spacing: -0.025em;
  margin-bottom: 32px;
}
/* The note a ?action= brings (signed out, timed out, password changed ...). Errors (SSO, no Creator access) get the
   same shape in the error colour. The icon sits on the first line, so long texts read as one block. */
.cx-login .note {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 24px; padding: 12px 14px; border-radius: 12px;
  background: var(--teal-tint); color: var(--deep); font-size: 15px;
}
.cx-login .note svg { flex: none; width: 18px; height: 18px; margin-top: 2.5px; stroke: var(--teal-text); }
.cx-login .note[data-kind="error"] { background: var(--error-tint); color: var(--error-deep); }
.cx-login .note[data-kind="error"] svg { stroke: var(--error); }

.cx-login .field { margin-bottom: 20px; }
.cx-login .field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cx-login label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 7px; }
.cx-login .forgot { font-size: 14px; color: var(--teal-text); text-decoration: none; }
.cx-login .forgot:hover { text-decoration: underline; }
.cx-login input {
  width: 100%; height: 54px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  font-size: 16px; outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.cx-login input:hover { border-color: #9FB0BF; }
.cx-login input:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(0, 212, 212, .28); }
.cx-login form[data-invalid] #password { border-color: var(--error); }
.cx-login .pw { position: relative; }
.cx-login .pw input { padding-right: 104px; }
.cx-login [data-toggle-pw] {
  position: absolute; right: 6px; top: 7px; height: 40px; padding: 0 12px;
  border: 0; border-radius: 8px; background: none; font-size: 14px; color: var(--ink-soft);
}
.cx-login [data-toggle-pw]:hover { background: #F1F4F7; color: var(--ink); }
.cx-login .error { margin: -6px 0 18px; font-size: 14.5px; color: var(--error); }
.cx-login [data-submit] {
  width: 100%; height: 54px; margin-top: 8px;
  display: grid; place-items: center;
  border: 0; border-radius: 12px; background: var(--teal); color: var(--deep);
  font-family: var(--font-head); font-weight: 700; font-size: 17px;
  transition: background .12s;
}
.cx-login [data-submit]:hover { background: var(--teal-hover); }
.cx-login :is(a, button):focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Spinner in the submit button while the sign-in runs */
.cx-login .spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid currentColor; border-right-color: transparent;
  animation: cx-login-spin .7s linear infinite;
}
@keyframes cx-login-spin { to { transform: rotate(360deg); } }
.cx-login form[aria-busy="true"] [data-submit] .label { display: none; }
.cx-login form:not([aria-busy="true"]) [data-submit] .spinner { display: none; }
.cx-login form[aria-busy="true"] [data-submit] { pointer-events: none; }

.cx-login footer { display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: 14px; color: var(--ink-soft); }
.cx-login footer a { text-decoration: none; }
.cx-login footer a:hover { color: var(--ink); text-decoration: underline; }

/* ── right: the x from the logo on the light panel ──────────── */
.cx-login .panel { display: grid; place-items: center; overflow: hidden; }
.cx-login .x { width: min(35vw, 64vh); overflow: visible; pointer-events: none; }
.cx-login .x line { stroke-width: 10.2; stroke-linecap: round; fill: none; }
.cx-login .x g { animation: cx-login-grow .7s cubic-bezier(.2, .9, .3, 1.12) both; }
.cx-login .x g:nth-child(1) { animation-delay: .05s; }
.cx-login .x g:nth-child(2) { animation-delay: .13s; }
.cx-login .x g:nth-child(3) { animation-delay: .21s; }
.cx-login .x g:nth-child(4) { animation-delay: .29s; }
@keyframes cx-login-grow { from { transform: scale(0); opacity: 0; } 30% { opacity: 1; } to { transform: scale(1); opacity: 1; } }

/* Tablet and phone: one column, no x. Logo, form and footer share one left edge. */
@media (max-width: 960px) {
  .cx-login .split { grid-template-columns: 1fr; background: #fff; }
  .cx-login .panel { display: none; }
  .cx-login .side { padding: 28px 24px 24px; justify-items: center; }
  .cx-login header, .cx-login main, .cx-login footer { width: 100%; max-width: 384px; }
  .cx-login .brand { height: 46px; }
  .cx-login main { align-self: start; padding: clamp(36px, 9vh, 112px) 0 40px; }
  .cx-login h1 { font-size: 36px; margin-bottom: 26px; }
  .cx-login footer { gap: 6px 16px; font-size: 13px; }
}
/* Tablet: the form sits in the middle of the page instead of under the logo. */
@media (min-width: 600px) and (max-width: 960px) and (min-height: 641px) {
  .cx-login main { align-self: center; padding: 32px 0 8vh; }
}
/* Narrow phones: the footer links as tidy rows of two instead of three and a leftover. */
@media (max-width: 380px) {
  .cx-login footer { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 6px 28px; }
}
/* Low windows (laptop with a short browser window, phone held sideways): less air, nothing cut off. */
@media (max-height: 640px) {
  .cx-login .side { padding-top: 24px; padding-bottom: 20px; }
  .cx-login main { padding-top: 32px; padding-bottom: 24px; }
  .cx-login h1 { font-size: 36px; margin-bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .cx-login *, .cx-login *::before, .cx-login *::after {
    animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important;
  }
}