/* Entrance pages: login, signup, e-mail confirmation, password reset and the
   identity consent screens. They share the public website's look (Onest,
   paper background, ink and blue) so an account created from corementor.be
   feels like one product. The shell's own theme still loads underneath; this
   sheet overrides it inside the entrance card only. */

@font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../shell/fonts/onest-latin.3db826ed1c5d.woff2") format("woff2");
}

body:has(.cm-login) {
    --entrance-paper: #f9f8f5;
    --entrance-paper-soft: #fcfbf9;
    --entrance-paper-deep: #eeece5;
    --entrance-ink: #172139;
    --entrance-ink-soft: #303a50;
    --entrance-blue: #2e5a90;
    --entrance-red: #931b1e;
    --entrance-muted: #697185;
    --entrance-line: rgba(23, 33, 57, 0.13);
    --entrance-font: "Onest", "Instrument Sans", Arial, sans-serif;
    background: var(--entrance-paper);
}

.cm-public-surface:has(.cm-login) {
    padding: 0;
}

.cm-login {
    display: grid;
    min-height: 100dvh;
    padding: 48px 20px;
    place-items: center;
    background: var(--entrance-paper);
    color: var(--entrance-ink);
    font-family: var(--entrance-font);
}

.cm-login-forwarding .cm-login-card {
    display: none;
}

.cm-login-forwarding-note {
    color: var(--entrance-muted);
    font-family: var(--entrance-font);
}

.cm-login .cm-card,
.cm-login .cm-login-card {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: 36px 36px 32px;
    border: 1px solid var(--entrance-line);
    border-radius: 10px;
    background: var(--entrance-paper-soft);
    box-shadow: 0 12px 34px rgba(20, 29, 49, 0.06);
    color: var(--entrance-ink);
}

.cm-login .cm-authorize-card {
    max-width: 560px;
}

.cm-login-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 28px;
    color: var(--entrance-ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.cm-login-brand img {
    width: 24px;
    height: 24px;
}

.cm-login .cm-eyebrow {
    margin: 0 0 10px;
    color: var(--entrance-blue);
    font-family: var(--entrance-font);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cm-login .cm-title,
.cm-login .cm-title-xl,
.cm-login h1 {
    margin: 0;
    color: var(--entrance-ink);
    font-family: var(--entrance-font);
    font-size: clamp(28px, 4vw, 34px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.08;
}

.cm-login .cm-content-stack {
    display: grid;
    gap: 6px;
}

.cm-login .cm-muted,
.cm-login .cm-text-sm,
.cm-login p {
    color: var(--entrance-muted);
    font-family: var(--entrance-font);
    font-size: 14px;
    line-height: 1.6;
}

.cm-login .cm-content-stack + form,
.cm-login .cm-content-stack + .cm-btn-primary,
.cm-login h1 + form,
.cm-login h1 + .cm-alert-error,
.cm-login h1 + .cm-alert-info,
.cm-login h1 + p,
.cm-login h1 + .cm-muted {
    margin-top: 22px;
}

.cm-login-form {
    display: grid;
    gap: 16px;
}

.cm-login .cm-form-group {
    display: grid;
    gap: 7px;
    margin: 0;
}

.cm-login .cm-label,
.cm-login .cm-form-group > label {
    margin: 0;
    color: var(--entrance-ink);
    font-family: var(--entrance-font);
    font-size: 13px;
    font-weight: 700;
}

.cm-login input[type="text"],
.cm-login input[type="email"],
.cm-login input[type="password"],
.cm-login .cm-input {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid var(--entrance-line);
    border-radius: 6px;
    background: var(--entrance-paper);
    color: var(--entrance-ink);
    font-family: var(--entrance-font);
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cm-login input::placeholder {
    color: var(--entrance-muted);
    opacity: 0.8;
}

.cm-login input:focus,
.cm-login .cm-input:focus {
    border-color: var(--entrance-blue);
    box-shadow: 0 0 0 3px rgba(46, 90, 144, 0.14);
}

.cm-login .has-error input {
    border-color: var(--entrance-red);
}

.cm-login .errorlist {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    color: var(--entrance-red);
    font-family: var(--entrance-font);
    font-size: 12.5px;
    line-height: 1.5;
    list-style: none;
}

/* The password rules: shown only under a password that failed them. */
.cm-entrance-help {
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--entrance-paper-deep);
    color: var(--entrance-ink-soft);
    font-size: 12.5px;
    line-height: 1.55;
}

.cm-entrance-help ul {
    margin: 0;
    padding-left: 18px;
}

.cm-alert-error {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(147, 27, 30, 0.3);
    border-radius: 6px;
    background: rgba(147, 27, 30, 0.06);
    color: var(--entrance-red);
    font-family: var(--entrance-font);
    font-size: 13px;
    line-height: 1.5;
}

.cm-alert-error + form,
.cm-alert-error + .cm-btn-primary,
.cm-alert-error + .cm-btn-subtle,
.cm-alert-info + form,
.cm-alert-info + .cm-alert-error {
    margin-top: 16px;
}

.cm-alert-info {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--entrance-line);
    border-radius: 6px;
    background: var(--entrance-paper-deep);
    color: var(--entrance-ink-soft);
    font-family: var(--entrance-font);
    font-size: 13px;
    line-height: 1.5;
}

.cm-login .cm-btn-primary,
.cm-login .cm-btn-subtle,
.cm-login-provider {
    display: inline-flex;
    width: 100%;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 13px 20px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: var(--entrance-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease;
}

.cm-login .cm-btn-primary {
    color: var(--entrance-paper-soft);
    background: var(--entrance-ink);
    box-shadow: 0 10px 25px rgba(23, 33, 57, 0.13);
}

.cm-login .cm-btn-primary:hover,
.cm-login .cm-btn-primary:focus-visible {
    background: var(--entrance-blue);
    box-shadow: 0 16px 34px rgba(46, 90, 144, 0.2);
    transform: translateY(-2px);
}

.cm-login .cm-btn-primary span {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.cm-login .cm-btn-primary:hover span {
    transform: translate(3px, -1px);
}

.cm-login .cm-btn-subtle,
.cm-login-provider {
    border-color: var(--entrance-line);
    background: #ffffff;
    color: var(--entrance-ink);
}

.cm-login .cm-btn-subtle:hover,
.cm-login .cm-btn-subtle:focus-visible,
.cm-login-provider:hover,
.cm-login-provider:focus-visible {
    border-color: var(--entrance-ink);
    transform: translateY(-2px);
}

.cm-login-submit {
    margin-top: 6px;
}

.cm-login-providers {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.cm-login-providers form {
    margin: 0;
}

.cm-login-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 4px;
    color: var(--entrance-muted);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cm-login-divider::before,
.cm-login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--entrance-line);
}

.cm-login-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 24px 0 0;
    color: var(--entrance-muted);
    font-size: 13.5px;
}

.cm-login-foot a,
.cm-login a.cm-text-sm {
    color: var(--entrance-blue);
    font-family: var(--entrance-font);
    font-size: 13.5px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cm-login a.cm-text-sm {
    display: inline-block;
    margin-top: 20px;
}

.cm-apple-signin {
    display: block;
    width: 100%;
    max-width: 23.4375rem;
    height: auto;
    margin-inline: auto;
}

/* Identity consent screen (Studio and CoMpanion clients). */
.cm-authorize-form {
    display: grid;
    gap: 22px;
    margin-top: 22px;
}

.cm-authorize-label {
    margin: 0 0 10px;
    color: var(--entrance-muted);
    font-size: 13px;
    font-weight: 600;
}

.cm-authorize-scopes {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cm-authorize-scopes li {
    position: relative;
    padding: 12px 14px 12px 44px;
    border: 1px solid var(--entrance-line);
    border-radius: 8px;
    background: var(--entrance-paper);
    color: var(--entrance-ink);
    font-size: 13.5px;
}

.cm-authorize-scopes li::before {
    content: "✓";
    position: absolute;
    top: 12px;
    left: 16px;
    color: var(--entrance-blue);
    font-weight: 700;
}

.cm-authorize-actions {
    display: grid;
    gap: 10px;
}

@media (max-width: 520px) {
    .cm-login {
        padding: 24px 14px;
    }

    .cm-login .cm-card,
    .cm-login .cm-login-card {
        padding: 28px 22px 26px;
    }
}