/* ---------------------------------------------------------------------------
 * continuwuity's login.css, VENDORED, with Pikkolo brand overrides appended.
 *
 * continuwuity compiles its account-UI assets into the binary (memory_serve),
 * so they cannot be edited on disk. Caddy instead serves this file at
 * /_continuwuity/resources/login.css, shadowing the built-in one. login.css is
 * the last of the three stylesheets the page loads, so the overrides at the
 * bottom win the cascade without touching layout.
 *
 * The upstream half below is copied verbatim from continuwuity 26.8.1. If you
 * upgrade continuwuity and the sign-up page looks wrong, re-copy the upstream
 * half from /_continuwuity/resources/login.css and re-append the overrides.
 * ------------------------------------------------------------------------- */

/* ===== upstream: continuwuity 26.8.1 ===== */
.centered-links {
    display: flex;
    justify-content: space-between;

    :last-child {
        margin-left: auto;
    }
}

.text-rule {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--secondary);
}

.text-rule::before, .text-rule::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--secondary);
}

.text-rule:not(:empty)::before {
  margin-right: 1rem;
}

.text-rule:not(:empty)::after {
  margin-left: 1rem;
}

.username-input {
    display: flex;
    padding: 0.5em;
    margin-bottom: 0.5em;
    line-height: 1;
    align-items: baseline;

    border-radius: var(--border-radius-sm);
    border: 2px solid var(--secondary);

    &:has(input:focus-visible) {
        outline: 2px solid var(--c1);
        border-color: transparent;
    }

    input {
        flex: 1;
        padding: 0;
        margin: 0;
        border: none;
        outline: none;
    }

    span {
        flex: 0;
        color: var(--secondary);

        &:first-of-type {
            margin-inline-end: 0.5em;
        }
    }
}

/* ===== Pikkolo brand overrides ===== */

@font-face {
    font-family: 'Space Grotesk';
    src: url('/branding/fonts/SpaceGrotesk.woff2') format('woff2-variations');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

/* Declared outside any media query, and repeated inside the dark one, so the
   page looks the same either way rather than depending on source order
   against upstream's own prefers-color-scheme block. */
:root,
:root:has(*) {
    --font-stack: 'Space Grotesk', Inter, system-ui, -apple-system, sans-serif;

    --c1: #ff206e;
    --c2: #ff206e;
    --avatar-color: #ff206e;

    --bg: #0c0f0a;
    --panel-bg: #ffffff;
    --text-color: #0c0f0a;
    --secondary: #5b5f66;

    --name-lightness: 0.55;
    --border-radius-sm: 8px;
    --border-radius-lg: 14px;

    --background-gradient: none;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0c0f0a;
        --panel-bg: #ffffff;
        --text-color: #0c0f0a;
        --secondary: #5b5f66;
        --name-lightness: 0.55;
        --background-gradient: none;
    }
}

/* The same carrier-tape field the Element sign-in page uses, so the two
   screens read as one product. */
html {
    background-color: var(--bg);
    background-image: url('/branding/login-bg.svg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.panel {
    background-color: var(--panel-bg);
    border: 1px solid rgba(12, 15, 10, 0.08);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
}

h1 {
    letter-spacing: -0.02em;
    font-weight: 700;
}

/* Upstream tints the panel-relative surfaces off --panel-bg with oklch; now
   that the panel is white, nudge them to the brand's light grey instead. */
.card {
    background-color: #f8f8f8;
}

button,
input[type="submit"] {
    font-family: var(--font-stack);
    font-weight: 600;
    letter-spacing: 0.01em;
}

a {
    color: #c2185b;
}

.username-input {
    border-color: #e0e0e0;
    background: #ffffff;

    input {
        font-family: var(--font-stack);
        background: transparent;
        color: var(--text-color);
    }
}

/* The footer sits on the dark tape field, not on the panel, so upstream's
   dark-on-light footer colours are unreadable here. Attribution to
   continuwuity is kept deliberately -- it is their software -- just calmed
   down so it stops competing with the brand mark behind it. */
footer {
    color: rgba(248, 248, 248, 0.62);
    font-size: var(--small-font-size);
    text-align: center;

    a {
        color: rgba(248, 248, 248, 0.82);
        text-decoration-color: rgba(248, 248, 248, 0.35);
    }

    .logo {
        height: 34px;
        width: auto;
        opacity: 0.45;
        filter: grayscale(0.4);
    }
}