/* The hosted UpIdentity pages — sign in, sign up, verify, recover, account
   settings, error.
   =========================================================================

   Compiled into the binary and served at /assets/identity-<hash>.css, which
   is what lets the pages' CSP say `style-src 'self'` with no
   'unsafe-inline': there is no inline <style> and no style attribute
   anywhere in the rendered HTML.

   VISUAL LANGUAGE: the UpAgents app's own — warm paper in light, warm
   graphite in dark, ember as the single accent, the same radii. The tokens
   below are the subset those pages need, with the same names they carry in
   agentrunner/frontend/app/src/theme/tokens.css so the two can be read
   against each other.

   FONTS: the system stack only. A hosted sign-in page must not fetch a
   webfont — nothing may leave this origin, and the CSP does not permit it.

   SCHEME: light is the default and dark follows the reader's OS. There is no
   pin: this page has no account to remember one in.

   Every text-on-background pair here is one of the app's AA-cleared pairs. */

:root {
    color-scheme: light dark;

    --bg-page: #f8f6f1;
    --bg-surface: #fdfcfa;
    --bg-inset: #efece5;
    --text-primary: #1d1b18;
    --text-secondary: #4a4640;
    --text-muted: #635e56;
    --text-on-accent: #faf7f2;

    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-default: rgba(0, 0, 0, 0.12);
    --border-strong: rgba(0, 0, 0, 0.2);

    --ember-500: #b8502f;
    --ember-400: #a8482a;
    --ember-600: #9d4227;
    --ember-text: #a8482a;
    --ember-wash: rgba(184, 80, 47, 0.12);
    --focus-ring: 0 0 0 2px rgba(184, 80, 47, 0.45);

    --ok-text: #25663f;
    --ok-wash: rgba(47, 122, 79, 0.1);
    --ok-border: rgba(47, 122, 79, 0.3);
    --danger-text: #a02f2f;
    --danger-wash: rgba(192, 58, 58, 0.1);
    --danger-border: rgba(192, 58, 58, 0.35);
    --info-wash: rgba(94, 154, 214, 0.1);
    --info-border: rgba(94, 154, 214, 0.3);

    --r-control: 8px;
    --r-card: 12px;
    --r-modal: 16px;

    --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-page: #161514;
        --bg-surface: #1c1b19;
        --bg-inset: #121110;
        --text-primary: #f2f0eb;
        --text-secondary: #c9c5bc;
        --text-muted: #918d82;
        --text-on-accent: #2a1109;

        --border-subtle: rgba(255, 255, 255, 0.06);
        --border-default: rgba(255, 255, 255, 0.09);
        --border-strong: rgba(255, 255, 255, 0.15);

        --ember-500: #df6e4b;
        --ember-400: #e8815f;
        --ember-600: #c75b3a;
        --ember-text: #ed9273;
        --ember-wash: rgba(223, 110, 75, 0.1);
        --focus-ring: 0 0 0 2px rgba(223, 110, 75, 0.45);

        --ok-text: #7fbd95;
        --ok-wash: rgba(98, 168, 124, 0.12);
        --ok-border: rgba(98, 168, 124, 0.3);
        --danger-text: #ea8080;
        --danger-wash: rgba(226, 93, 93, 0.12);
        --danger-border: rgba(226, 93, 93, 0.35);
        --info-wash: rgba(94, 154, 214, 0.12);
        --info-border: rgba(94, 154, 214, 0.35);
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    padding: 0 16px 48px;
    background: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

main {
    width: 100%;
    max-width: 26rem;
    margin: 0 auto;
    padding: 24px 0 0;
}

/* ── the brand row ─────────────────────────────────────────────────────
   The realm's name, or — when an application sent this person here — that
   application's display name and what signing in is for. */

.brand {
    padding: 8px 0 20px;
}
.brand .mark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 580;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}
.brand .mark::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--ember-500);
}
.brand .app {
    margin: 10px 0 0;
    font-size: 20px;
    font-weight: 580;
    letter-spacing: -0.01em;
}
.brand .app-hint {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

/* ── the card ──────────────────────────────────────────────────────── */

.card {
    padding: 24px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-modal);
    background: var(--bg-surface);
}

h1 {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 580;
    letter-spacing: -0.015em;
}
h2 {
    margin: 0;
    font-size: 13px
        /* section heads are labels, not titles */;
    font-weight: 580;
    color: var(--text-secondary);
}
.lede {
    margin: 0 0 20px;
    color: var(--text-muted);
    font-size: 14px;
}

/* ── methods ───────────────────────────────────────────────────────────
   One form, the identifier shared at the top, each authentication method
   its own block below. Kratos decides which blocks exist; this file only
   decides that they read as separate ways in. */

form {
    display: block;
}

.shared {
    display: grid;
    gap: 14px;
}

.method {
    display: grid;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border-subtle);
}
.method:first-of-type {
    margin-top: 20px;
}
.method p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}

/* "or continue with" — the rule between the upstream button and Kratos'
   own methods. */
.divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 4px;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-default);
}

/* ── fields ─────────────────────────────────────────────────────────── */

label {
    display: grid;
    gap: 6px;
}
label > span {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

input {
    width: 100%;
    /* 16px exactly: iOS Safari zooms the page on focus below it. */
    font: inherit;
    font-size: 16px;
    padding: 11px 12px;
    color: var(--text-primary);
    background: var(--bg-page);
    border: 1px solid var(--border-default);
    border-radius: var(--r-control);
    appearance: none;
}
input:hover:not(:disabled) {
    border-color: var(--border-strong);
}
input:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: var(--ember-500);
}
input:disabled,
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
input[type="checkbox"],
input[type="radio"] {
    width: auto;
    margin: 0;
}
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
}
label:has(> input[type="checkbox"]) > span,
label:has(> input[type="radio"]) > span {
    order: 2;
}

/* ── actions ───────────────────────────────────────────────────────── */

/* Every Kratos submit and button node is a <button> whose text is the node's
   label (see push_button in routes.rs); a link styled as one is .button. */
button[type="submit"],
button[type="button"],
.button {
    display: inline-block;
    width: 100%;
    padding: 11px 16px;
    font: inherit;
    font-size: 15px;
    font-weight: 580;
    text-align: center;
    text-decoration: none;
    color: var(--text-primary);
    background: var(--bg-inset);
    border: 1px solid var(--border-default);
    border-radius: var(--r-control);
    cursor: pointer;
    appearance: none;
}
button[type="submit"]:hover,
button[type="button"]:hover,
.button:hover {
    border-color: var(--border-strong);
}

/* Ember is budgeted to ONE action per page: the upstream sign-in button
   where it exists, and the method's own submit otherwise. */
.button.primary,
.method button[type="submit"] {
    color: var(--text-on-accent);
    background: var(--ember-500);
    border-color: transparent;
}
.button.primary:hover,
.method button[type="submit"]:hover {
    background: var(--ember-400);
    border-color: transparent;
}
.button.primary:active,
.method button[type="submit"]:active {
    background: var(--ember-600);
}
/* …and only the FIRST method keeps it. The rest are quiet. */
.method ~ .method button[type="submit"] {
    color: var(--text-primary);
    background: var(--bg-inset);
    border-color: var(--border-default);
}
.method ~ .method button[type="submit"]:hover {
    background: var(--bg-inset);
    border-color: var(--border-strong);
}
/* A page with the upstream button has spent the ember there. */
.has-upstream .method button[type="submit"] {
    color: var(--text-primary);
    background: var(--bg-inset);
    border-color: var(--border-default);
}

a {
    color: var(--ember-text);
    text-decoration-color: color-mix(in srgb, var(--ember-text) 40%, transparent);
    text-underline-offset: 2px;
}

/* ── messages ──────────────────────────────────────────────────────── */

.message {
    margin: 0 0 16px;
    padding: 10px 12px;
    border: 1px solid var(--info-border);
    border-radius: var(--r-card);
    background: var(--info-wash);
    font-size: 14px;
}
.message.error {
    border-color: var(--danger-border);
    background: var(--danger-wash);
    color: var(--danger-text);
}
.message.success {
    border-color: var(--ok-border);
    background: var(--ok-wash);
    color: var(--ok-text);
}

/* A field's own error sits under the field, not in the banner. */
.field-error {
    margin: -4px 0 0;
    color: var(--danger-text);
    font-size: 13px;
}

/* ── footer ────────────────────────────────────────────────────────── */

footer {
    display: grid;
    gap: 8px;
    justify-items: center;
    margin-top: 20px;
    font-size: 13px;
}
footer p {
    margin: 0;
}
footer a {
    color: var(--text-muted);
}

nav {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

img {
    max-width: 100%;
    border-radius: var(--r-card);
    background: #fff;
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
}

@media (min-width: 420px) {
    main {
        padding-top: 7vh;
    }
}

@media (prefers-reduced-motion: no-preference) {
    input,
    .button,
    button {
        transition: background-color 120ms ease, border-color 120ms ease,
            box-shadow 120ms ease;
    }
}