/* Sign-in pages (templates/public/login, totp, password_*; frame in fragments/auth.html). Builds on maske.css (tokens,
   fonts, .btn, the wordmark), light and dark like the portal.
   - Left the form: wordmark and light/dark on top, one calm column of at most 400 px, the links to the legal page below.
   - Right (desktop only, edge to edge) the evening of the landing: its video in a loop over the still picture, darker
     towards every edge, with the claim.
   - Fields are 50 px high with a visible label; one orange button per page that turns into a spinner while it sends.
   - Reduced motion: the still picture, no spinner turn, no shake. */

body.au { font-size: 15px; line-height: 1.55; }
.au-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; min-height: 100svh; }

/* ---------- The form column ---------- */
.au-main {
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; padding: 24px clamp(24px, 5vw, 72px) 22px;
  background: radial-gradient(70% 45% at 0% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%);
}
.au-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.au-brand { display: inline-flex; border-radius: 8px; text-decoration: none; }
.au-brand .cm-logo { font-size: 24px; }
.au-theme {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: none;
  color: var(--ink2); cursor: pointer; transition: background-color .15s, color .15s;
}
.au-theme:hover { background: var(--sunken); color: var(--ink); }
.au-theme .ic { width: 18px; height: 18px; }
.au-theme .i-sun, :root[data-theme="dark"] .au-theme .i-moon { display: none; }
:root[data-theme="dark"] .au-theme .i-sun { display: block; }

.au-form { width: 100%; max-width: 400px; margin: auto; padding: 48px 0; animation: au-in .6s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes au-in { from { opacity: 0; transform: translateY(10px); } }
.au h1 { margin: 0; font-family: var(--font-d); font-size: clamp(30px, 2.6vw, 38px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.au-lead { margin: 10px 0 28px; color: var(--ink2); font-size: 16px; text-wrap: pretty; }
.au-badge { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 22px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-text); }
.au-badge.ok { background: var(--ok-soft); color: var(--ok); }
.au-badge.bad { background: var(--bad-soft); color: var(--bad); }
.au-badge .ic { width: 24px; height: 24px; }

/* what the last request left behind; an error shakes once so it is not missed */
.au-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 22px; padding: 12px 14px; border: 1px solid transparent; border-radius: 12px; color: var(--ink); font-size: 14px; line-height: 1.45; }
.au-note .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.au-note.bad { border-color: var(--bad-line); background: var(--bad-soft); }
.au-note.bad .ic { color: var(--bad); }
.au-note.bad { animation: au-shake .45s cubic-bezier(.36, .07, .19, .97) .15s both; }
@keyframes au-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.au-note.ok { background: var(--ok-soft); }
.au-note.ok .ic { color: var(--ok); }
.au-note.warn { background: var(--warn-soft); }
.au-note.warn .ic { color: var(--warn); }
.au-note a { color: inherit; font-weight: 600; }

/* ---------- Fields ---------- */
.au-field { display: grid; gap: 7px; margin: 0 0 18px; }
.au-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--ink); font-size: 14px; font-weight: 600; }
.au-label a { border-radius: 4px; color: var(--accent-text); font-size: 13.5px; font-weight: 500; text-decoration: none; }
.au-label a:hover { text-decoration: underline; text-underline-offset: 3px; }
.au :is(input[type="email"], input[type="password"], input[type="text"]) {
  width: 100%; height: 50px; padding: 0 16px; border: 1px solid var(--line2); border-radius: 12px; background: var(--surface); color: var(--ink);
  font-size: 16px; transition: border-color .15s, box-shadow .15s;
}
/* the message of the contact form: same field, grows with the text, scrollbar in the portal style */
.au textarea {
  display: block; width: 100%; min-height: 150px; max-height: 360px; padding: 13px 16px; border: 1px solid var(--line2); border-radius: 12px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; line-height: 1.5; resize: vertical; field-sizing: content;
  scrollbar-width: thin; scrollbar-color: var(--line2) transparent; transition: border-color .15s, box-shadow .15s;
}
.au :is(input, textarea):hover:not(:focus) { border-color: color-mix(in srgb, var(--ink3) 45%, var(--line2)); }
.au :is(input, textarea):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.au :is(input, textarea):user-invalid { border-color: var(--bad); }
.au :is(input, textarea)::placeholder { color: var(--ink3); opacity: .7; }
@supports (field-sizing: content) { .au textarea { resize: none; } }
.au-count { color: var(--ink3); font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
/* spam trap: off screen for people, still in the form for bots */
.au-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* the password with its eye */
.au-pw { position: relative; display: block; }
.au-pw input { padding-right: 52px; }
.au-pw input::-ms-reveal { display: none; }
.au-eye {
  position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 9px;
  background: none; color: var(--ink3); cursor: pointer; transition: background-color .15s, color .15s;
}
.au-eye:hover { background: var(--sunken); color: var(--ink); }
.au-eye .ic { width: 18px; height: 18px; }
.au-eye .i-hide, .au-eye[aria-pressed="true"] .i-show { display: none; }
.au-eye[aria-pressed="true"] .i-hide { display: block; }
.au-caps { display: inline-flex; align-items: center; gap: 6px; color: var(--warn); font-size: 13px; font-weight: 500; }
.au-caps:empty { display: none; }
.au-caps .ic { width: 14px; height: 14px; }
/* the code from the authenticator app: big and spaced like on the phone */
.au .au-code { height: 62px; font-family: var(--font-d); font-size: 26px; font-weight: 700; letter-spacing: .28em; text-align: center; font-variant-numeric: tabular-nums; }
.au .au-code::placeholder { letter-spacing: .28em; }
/* a new password: the rules tick off while typing */
.au-rules { display: grid; gap: 6px; margin: -6px 0 22px; padding: 0; list-style: none; color: var(--ink3); font-size: 13.5px; }
.au-rules li { display: flex; align-items: center; gap: 8px; transition: color .2s; }
.au-rules .ic { width: 16px; height: 16px; padding: 3px; border-radius: 50%; background: var(--sunken); color: transparent; stroke-width: 2.6; transition: background-color .25s, color .25s, transform .35s cubic-bezier(.34, 1.4, .64, 1); }
.au-rules li.is-met { color: var(--ink); }
.au-rules li.is-met .ic { background: var(--ok); color: var(--surface); transform: scale(1.08); }

/* ---------- The button ---------- */
.au-submit { position: relative; width: 100%; height: 52px; margin-top: 6px; font-size: 16px; text-decoration: none; }
.au-submit[aria-busy="true"] { pointer-events: none; filter: saturate(.8); }
.au-submit[aria-busy="true"]::before { content: ""; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: au-spin .7s linear infinite; }
@keyframes au-spin { to { transform: rotate(360deg); } }

/* ---------- Below the form ---------- */
.au-new { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--line); }
.au-new h2 { margin: 0 0 12px; color: var(--ink2); font-family: var(--font); font-size: 14px; font-weight: 600; }
.au-new-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .2s;
}
.au-new-row + .au-new-row { margin-top: 10px; }
a.au-new-row:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow); }
.au-new-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-text); }
.au-new-ic .ic { width: 18px; height: 18px; }
.au-new-row b { display: block; font-size: 14.5px; font-weight: 600; }
.au-new-row small { display: block; color: var(--ink2); font-size: 13.5px; line-height: 1.4; }
.au-new-go { width: 18px; height: 18px; color: var(--ink3); rotate: -90deg; transition: translate .2s, color .15s; }
a.au-new-row:hover .au-new-go { translate: 3px 0; color: var(--accent-text); }
.au-small { margin: 22px 0 0; color: var(--ink2); font-size: 14px; }
.au-small a { color: var(--accent-text); font-weight: 500; }
.au-back, .au-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 26px; padding: 0; border: 0; border-radius: 6px; background: none;
  color: var(--ink2); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; transition: color .15s;
}
.au-back:hover, .au-link:hover { color: var(--ink); }
.au-back .ic, .au-link .ic { width: 16px; height: 16px; }
.au-out { margin: 0; }
.au-out .au-link { margin-top: 20px; }
.au-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--ink3); font-size: 13.5px; }
.au-foot a { border-radius: 4px; color: inherit; text-decoration: none; transition: color .15s; }
.au-foot a:hover { color: var(--ink); }

/* ---------- The evening (desktop) ---------- */
/* edge to edge with the window (no light frame around it); picture and video share one geometry, 2 % larger than the
   panel so the dark first rows of the video stay outside, and no transform, so the browser keeps the video under the shade */
.au-panel { position: relative; isolation: isolate; overflow: hidden; background: #1a120d; color: #f5efe6; }
.au-panel-img, .au-panel-video { position: absolute; top: -2%; left: -2%; z-index: 0; width: 104%; height: 104%; object-fit: cover; object-position: 50% 60%; }
.au-panel-video { opacity: 0; transition: opacity 1.2s ease; }
.au-panel-video.is-on { opacity: 1; }
/* pause (WCAG 2.2.2), top right in the panel */
.au-vid-btn {
  position: absolute; top: 20px; right: 20px; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .26); border-radius: 50%; background: rgba(10, 9, 8, .42); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .15s, border-color .15s;
}
.au-vid-btn:hover { background: rgba(10, 9, 8, .62); border-color: rgba(255, 255, 255, .45); }
.au-vid-btn .ic { width: 16px; height: 16px; }
.au-vid-btn .i-play, .au-vid-btn[aria-pressed="true"] .i-pause { display: none; }
.au-vid-btn[aria-pressed="true"] .i-play { display: block; }
/* the shade above both: darker towards every edge, darkest at the bottom behind the text */
.au-panel::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(125% 95% at 50% 38%, rgba(14, 13, 12, 0) 48%, rgba(14, 13, 12, .55) 100%),
    linear-gradient(180deg, rgba(14, 13, 12, .32) 0%, rgba(14, 13, 12, 0) 20%, rgba(14, 13, 12, .18) 48%, rgba(14, 13, 12, .92) 100%);
}
.au-panel-t { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 48px clamp(32px, 4vw, 60px) 52px; }
.au-claim { margin: 0 0 26px; color: #fff; font-family: var(--font-d); font-size: clamp(32px, 3vw, 46px); font-weight: 700; line-height: 1.06; letter-spacing: -.025em; }
.au-claim span { color: #ffc49b; }
.au-facts { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; color: rgba(255, 255, 255, .84); font-size: 15px; }
.au-facts li { display: flex; align-items: center; gap: 11px; }
.au-facts .ic { width: 18px; height: 18px; color: #ffc49b; }
.au-claim { animation: au-in .8s cubic-bezier(.16, 1, .3, 1) both; }
.au-facts li { animation: au-in .8s cubic-bezier(.16, 1, .3, 1) both; }
.au-facts li:nth-child(1) { animation-delay: .25s; }
.au-facts li:nth-child(2) { animation-delay: .35s; }
.au-facts li:nth-child(3) { animation-delay: .45s; }

/* ---------- Narrow: the form alone ---------- */
@media (max-width: 1023px) {
  .au-wrap { grid-template-columns: minmax(0, 1fr); }
  .au-panel { display: none; }
}
@media (max-width: 560px) {
  .au-main { padding: 16px 16px 20px; }
  .au-form { padding: 36px 0 40px; }
  .au-lead { margin-bottom: 24px; font-size: 15.5px; }
  .au-foot { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .au-form, .au-claim, .au-facts li, .au-note.bad { animation: none; }
  .au-submit[aria-busy="true"]::before { animation: none; border-right-color: currentColor; opacity: .6; }
}