/* ==========================================================================
   Acephal — account.acephal.cloud (central sign-in)
   Mobile-first. Night-blue page, light form card for readability.
   Builds on the shared design tokens (variables.css / base.css).
   ========================================================================== */

:root {
    --surface: var(--acephal-white);
    --text-strong: var(--acephal-night);
    --text-body: var(--acephal-text-muted);
    --line-light: #DCE5F0;
    --field-border: #B9C6D6;
    --accent-on-light: #1565E0;
    --error: #B42318;
    --error-bg: #FEF3F2;
    --info-bg: #EEF5FF;
    --radius-panel: 16px;
}

body.account {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    background:
        radial-gradient(ellipse at 80% 110%, color-mix(in srgb, var(--acephal-blue) 35%, transparent) 0%, transparent 55%),
        linear-gradient(165deg, var(--acephal-night) 0%, var(--acephal-night-deep) 100%);
    background-attachment: fixed;
}

/* ---- Header ------------------------------------------------------------ */
.account-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: max(1rem, env(safe-area-inset-top)) var(--gutter) var(--space-4);
}

.account-brand {
    --brand-mark-size: 2.4rem;
    --brand-name-size: 1.4rem;
    --brand-tagline-size: 0.48rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.brand__mark {
    width: var(--brand-mark-size);
    height: auto;
}

.brand__text {
    display: flex;
    flex-direction: column;
}

.brand__name {
    font-size: var(--brand-name-size);
    font-weight: var(--weight-semibold);
    line-height: 1;
    letter-spacing: var(--tracking-title);
}

/* Domain extension next to the name ("Acephal .eu"): half the size of the name. */
.brand__ext {
    font-size: 0.5em;               /* half the size of the name */
    color: var(--acephal-cyan);
}

.brand__tagline {
    margin-top: 0.9em;
    font-size: var(--brand-tagline-size);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--acephal-gray);
}

.account-header__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    column-gap: var(--space-4);
}

.account-header__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.85rem;
    font-weight: var(--weight-medium);
    color: var(--acephal-gray);
    text-align: right;
    white-space: nowrap;
}

/* ---- Main card --------------------------------------------------------- */
.account-main {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-4) var(--space-3) var(--space-7);
}

.card {
    width: 100%;
    max-width: 28rem;
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-panel);
    background: var(--surface);
    color: var(--text-strong);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}

.card--wide {
    max-width: 40rem;
}

.card__eyebrow {
    margin-bottom: var(--space-2);
    font-size: 0.8rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;            /* no uppercase: the brand is written "Acephal" */
    color: var(--accent-on-light);
}

.card__title {
    font-size: 1.6rem;
    font-weight: var(--weight-bold);
    line-height: 1.2;
}

.card__lead {
    margin-top: var(--space-3);
    line-height: 1.55;
    color: var(--text-body);
}

.card__lead strong {
    color: var(--text-strong);
}

.card__subtitle {
    margin-top: var(--space-6);
    font-size: 1.05rem;
    font-weight: var(--weight-bold);
}

.card__switch {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line-light);
    font-size: 0.9rem;
    text-align: center;
    color: var(--text-body);
}

.card a {
    color: var(--accent-on-light);
    font-weight: var(--weight-medium);
}

/* ---- Forms ------------------------------------------------------------- */
.form {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.form__row {
    display: grid;
    gap: var(--space-4);
}

.field {
    display: grid;
    gap: var(--space-2);
}

.form__row-help {
    grid-column: 1 / -1;
    margin-top: calc(-1 * var(--space-2));
}

.field label {
    font-size: 0.85rem;
    font-weight: var(--weight-semibold);
}

/* 16px font size prevents iOS from zooming on focus. */
.field input[type="email"],
.field input[type="text"],
.field input[type="password"] {
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--field-border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-strong);
    font: inherit;
    font-size: 1rem;
}

.field input:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--acephal-blue) 45%, transparent);
    outline-offset: 1px;
    border-color: var(--acephal-blue);
}

.field__help {
    font-size: 0.8rem;
    color: var(--text-body);
}

.field--check {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--space-3);
}

.field--check input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
    accent-color: var(--accent-on-light);
}

.field--check label {
    font-weight: var(--weight-regular);
    line-height: 1.5;
    color: var(--text-body);
}

.form__aside {
    margin-top: calc(-1 * var(--space-2));
    font-size: 0.85rem;
    text-align: right;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: 3rem;
    padding: 0.8rem 1.4rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--accent-on-light);
    color: var(--acephal-white);
    font: inherit;
    font-size: 0.95rem;
    font-weight: var(--weight-semibold);
    text-decoration: none;
    cursor: pointer;
    transition: filter var(--duration) var(--ease);
}

.card a.button {
    color: var(--acephal-white);
}

.button:hover {
    filter: brightness(1.1);
}

.button--ghost-light {
    border: 1px solid var(--accent-on-light);
    background: transparent;
    color: var(--accent-on-light);
}

.form__submit {
    width: 100%;
    margin-top: var(--space-2);
}

.link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent-on-light);
    font: inherit;
    font-weight: var(--weight-semibold);
    text-decoration: underline;
    cursor: pointer;
}

/* ---- Alerts ------------------------------------------------------------ */
.alert {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: 10px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.alert ul {
    display: grid;
    gap: var(--space-1);
    padding-left: var(--space-4);
    list-style: disc;
}

.alert--info {
    background: var(--info-bg);
    color: var(--text-strong);
}

.alert--error {
    background: var(--error-bg);
    color: var(--error);
}

/* ---- Account: access list ---------------------------------------------- */
.access-list {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.access {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--line-light);
    border-radius: 12px;
}

/* The whole panel opens the site. */
.card a.access--link {
    flex-wrap: wrap;
    row-gap: var(--space-2);
    color: inherit;
    font-weight: var(--weight-regular);
    text-decoration: none;
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.card a.access--link:hover {
    border-color: var(--accent-on-light);
    box-shadow: 0 6px 18px -12px rgba(21, 101, 224, 0.6);
}

.access--link:hover .access__name {
    color: var(--accent-on-light);
}

.access__name {
    display: block;
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}

.access__name::after {
    content: " ›";
}

.access__meta {
    display: block;
    margin-top: var(--space-1);
    font-size: 0.82rem;
    color: var(--text-body);
}

.status {
    flex: none;
    white-space: nowrap;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: var(--weight-semibold);
}

.status--active { background: #E7F7EF; color: #0B7A5C; }
.status--pending { background: #FFF6E5; color: #A15C00; }
.status--suspended { background: var(--error-bg); color: var(--error); }
.status--none { background: #EEF2F7; color: var(--text-body); }

/* ---- Footer ------------------------------------------------------------ */
.account-footer {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-5) var(--gutter) max(1.5rem, env(safe-area-inset-bottom));
    font-size: 0.78rem;
    text-align: center;
    color: color-mix(in srgb, var(--acephal-gray) 70%, transparent);
}

/* ---- Larger screens ---------------------------------------------------- */
@media (min-width: 600px) {
    .account-main {
        align-items: center;
        padding-top: var(--space-6);
    }

    .card {
        padding: var(--space-7) var(--space-7);
    }

    .form__row {
        grid-template-columns: 1fr 1fr;
    }

    .account-brand {
        --brand-mark-size: 3rem;
        --brand-name-size: 1.75rem;
        --brand-tagline-size: 0.55rem;
    }
}

/* ---- Desktop: spread content sideways so pages fit a 16:9 screen -------- */
@media (min-width: 1024px) {
    .account-header {
        padding-top: var(--space-4);
        padding-bottom: 0;
    }

    .account-main {
        padding: var(--space-4) var(--gutter);
    }

    /* Split card: intro + switch link on the left, form on the right. */
    .card--split {
        display: grid;
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        grid-template-areas:
            "intro main"
            "switch main";
        grid-template-rows: 1fr auto;
        column-gap: var(--space-7);
        max-width: 62rem;
        padding: var(--space-6) var(--space-7);
    }

    .card--split .card__intro {
        grid-area: intro;
    }

    .card--split .card__title {
        font-size: 2rem;
    }

    .card--split .card__main {
        grid-area: main;
        display: grid;
        align-content: center;
        gap: var(--space-4);
        padding-left: var(--space-7);
        border-left: 1px solid var(--line-light);
    }

    .card--split .card__main > .alert,
    .card--split .card__main > .form {
        margin-top: 0;
    }

    .card--split .card__switch {
        grid-area: switch;
        text-align: left;
    }

    /* Account page: two columns of site access. */
    .card--wide {
        max-width: 62rem;
        padding: var(--space-6) var(--space-7);
    }

    .access-list {
        grid-template-columns: 1fr 1fr;
    }

    /* Footer on a single line. */
    .account-footer {
        display: flex;
        justify-content: center;
        gap: var(--space-2);
        padding-top: var(--space-2);
        padding-bottom: var(--space-4);
    }

    .account-footer p + p::before {
        content: "·";
        margin-right: var(--space-2);
    }
}