/*
 * DataGenius Auth
 *
 * Hand-written and deliberately small. The sign-in surface loads no third-party CSS or
 * script, which is what lets the Content-Security-Policy stay at 'self' with no inline
 * allowances -- the single most useful control available to a page that handles
 * credentials.
 */

:root {
    --dtg-bg: #f6f7f9;
    --dtg-surface: #ffffff;
    --dtg-border: #dfe3e8;
    --dtg-text: #1b1f24;
    --dtg-text-muted: #5c6670;
    --dtg-accent: #1f6feb;
    --dtg-accent-hover: #1a5fd0;
    --dtg-success: #1a7f37;
    --dtg-danger: #b42318;
    --dtg-radius: 10px;
    --dtg-shadow: 0 1px 2px rgba(27, 31, 36, .06), 0 8px 24px rgba(27, 31, 36, .06);
}

@media (prefers-color-scheme: dark) {
    :root {
        --dtg-bg: #0d1117;
        --dtg-surface: #161b22;
        --dtg-border: #30363d;
        --dtg-text: #e6edf3;
        --dtg-text-muted: #9198a1;
        --dtg-accent: #4493f8;
        --dtg-accent-hover: #6cb0ff;
        --dtg-success: #3fb950;
        --dtg-danger: #f85149;
        --dtg-shadow: 0 1px 2px rgba(1, 4, 9, .3), 0 8px 24px rgba(1, 4, 9, .4);
    }
}

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--dtg-bg);
    color: var(--dtg-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

a {
    color: var(--dtg-accent);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    text-decoration: underline;
}

:focus-visible {
    outline: 2px solid var(--dtg-accent);
    outline-offset: 2px;
}

/* Keyboard users must be able to skip the header on every page. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: .6rem 1rem;
    background: var(--dtg-surface);
    border: 1px solid var(--dtg-border);
    border-radius: 0 0 var(--dtg-radius) 0;
    z-index: 10;
}

.skip-link:focus {
    left: 0;
}

.site-header {
    border-bottom: 1px solid var(--dtg-border);
    background: var(--dtg-surface);
}

.site-header__inner,
.site-footer__inner,
.page {
    width: 100%;
    max-width: 46rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.75rem;
}

.brand {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    color: var(--dtg-text);
    font-weight: 600;
    letter-spacing: -.01em;
}

.brand:hover {
    text-decoration: none;
}

.brand__mark {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
    background: var(--dtg-accent);
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    align-self: center;
}

.brand__suffix {
    color: var(--dtg-text-muted);
    font-weight: 400;
}

main {
    flex: 1 0 auto;
    padding: 3rem 0;
}

.card {
    background: var(--dtg-surface);
    border: 1px solid var(--dtg-border);
    border-radius: var(--dtg-radius);
    box-shadow: var(--dtg-shadow);
    padding: 2rem;
}

h1 {
    margin: 0 0 .5rem;
    font-size: 1.5rem;
    line-height: 1.3;
    letter-spacing: -.02em;
}

h2 {
    margin: 2rem 0 .75rem;
    font-size: 1.0625rem;
    letter-spacing: -.01em;
}

.lede {
    margin: 0 0 1.5rem;
    color: var(--dtg-text-muted);
}

.status-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--dtg-border);
    border-radius: var(--dtg-radius);
    overflow: hidden;
}

.status-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--dtg-border);
}

.status-list li:last-child {
    border-bottom: 0;
}

.status-list dt,
.status-list__label {
    color: var(--dtg-text-muted);
}

.status-list__value {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .875rem;
}

.badge {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid currentColor;
}

.badge--pending {
    color: var(--dtg-text-muted);
}

.badge--ready {
    color: var(--dtg-success);
}

.site-footer {
    border-top: 1px solid var(--dtg-border);
    background: var(--dtg-surface);
    padding: 1.25rem 0;
    color: var(--dtg-text-muted);
    font-size: .875rem;
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    justify-content: space-between;
}

code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .875em;
    padding: .1rem .35rem;
    border-radius: 4px;
    background: var(--dtg-bg);
    border: 1px solid var(--dtg-border);
}

@media (max-width: 30rem) {
    main {
        padding: 1.5rem 0;
    }

    .card {
        padding: 1.25rem;
    }
}

/* ---------------------------------------------------------------------------
 * Account pages
 *
 * Forms are styled with real elements and real labels. There is no JavaScript on
 * these pages at all: validation messages are rendered server-side, which keeps
 * the Content-Security-Policy at 'self' with no inline allowance and means the
 * sign-in form works even when script does not.
 * ------------------------------------------------------------------------ */

.site-nav {
    display: flex;
    gap: 1.25rem;
    font-size: .9375rem;
}

.card--narrow {
    max-width: 27rem;
    margin: 0 auto;
}

.field {
    margin-bottom: 1.125rem;
}

.field label {
    display: block;
    margin-bottom: .35rem;
    font-size: .9375rem;
    font-weight: 500;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"] {
    width: 100%;
    padding: .625rem .75rem;
    font: inherit;
    font-size: .9375rem;
    color: var(--dtg-text);
    background: var(--dtg-surface);
    border: 1px solid var(--dtg-border);
    border-radius: 8px;
}

.field input:focus-visible {
    border-color: var(--dtg-accent);
    outline: 2px solid var(--dtg-accent);
    outline-offset: 1px;
}

.field input[readonly] {
    background: var(--dtg-bg);
    color: var(--dtg-text-muted);
}

.field--inline {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.field--inline label {
    margin: 0;
    font-weight: 400;
}

.field__hint {
    margin: .35rem 0 0;
    font-size: .8125rem;
    color: var(--dtg-text-muted);
}

.field__optional {
    color: var(--dtg-text-muted);
    font-weight: 400;
}

.field__error {
    display: block;
    margin-top: .35rem;
    font-size: .8125rem;
    color: var(--dtg-danger);
}

.button {
    display: inline-block;
    width: 100%;
    padding: .7rem 1rem;
    font: inherit;
    font-size: .9375rem;
    font-weight: 600;
    text-align: center;
    color: var(--dtg-text);
    background: var(--dtg-surface);
    border: 1px solid var(--dtg-border);
    border-radius: 8px;
    cursor: pointer;
}

.button:hover {
    border-color: var(--dtg-text-muted);
    text-decoration: none;
}

.button--primary {
    color: #fff;
    background: var(--dtg-accent);
    border-color: var(--dtg-accent);
}

.button--primary:hover {
    background: var(--dtg-accent-hover);
    border-color: var(--dtg-accent-hover);
}

.alert {
    padding: .75rem 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid;
    border-radius: 8px;
    font-size: .9375rem;
}

.alert:empty {
    display: none;
}

.alert--error {
    color: var(--dtg-danger);
    border-color: var(--dtg-danger);
    background: color-mix(in srgb, var(--dtg-danger) 8%, transparent);
}

.alert ul {
    margin: 0;
    padding-left: 1.1rem;
}

.card__links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--dtg-border);
    font-size: .9375rem;
}

.muted {
    color: var(--dtg-text-muted);
    font-size: .9375rem;
}

/* Federated provider buttons, and the rule that separates them from the email form. */

.providers form {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.button--provider {
    font-weight: 500;
}

.divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.25rem 0;
    color: var(--dtg-text-muted);
    font-size: .8125rem;
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--dtg-border);
}

/* The product a sign-in or sign-up was reached on behalf of -- its mark paired with
   DataGenius's own, the same pairing Atlassian's account pages show for Jira or
   Bitbucket. --app-brand is set inline per page, from that product's own registered
   color; it falls back to the DataGenius accent when a product has none configured. */

.app-context {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.app-mark {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
    background: var(--app-brand, var(--dtg-accent));
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
}

/* A registered product's own logo image, in place of the initial-letter fallback above. */
.app-mark--image {
    background: none;
    object-fit: contain;
}

.app-context__joiner {
    color: var(--dtg-text-muted);
    font-size: .875rem;
}

/* Organization pages: inline member actions sit beside each row. */

.member-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.inline-form {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.button--small {
    width: auto;
    padding: .3rem .6rem;
    font-size: .8125rem;
    font-weight: 500;
}

select {
    padding: .45rem .5rem;
    font: inherit;
    font-size: .875rem;
    color: var(--dtg-text);
    background: var(--dtg-surface);
    border: 1px solid var(--dtg-border);
    border-radius: 8px;
}

.field select {
    width: 100%;
}

.alert--ok {
    color: var(--dtg-success);
    border-color: var(--dtg-success);
    background: color-mix(in srgb, var(--dtg-success) 8%, transparent);
}