/* -------------------------------------------------------------------------- */
/* surfaces / cards */

.card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-1);
    padding: var(--space-5);
}
.card:hover { box-shadow: var(--shadow-2); }

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

.card h3 {
    font-weight: var(--font-weight-light);
    /* text-transform: uppercase; */
    /* letter-spacing: var(--all-caps-space); */
    /* word-spacing: var(--all-caps-word-space); */
}

/* footer block sits at the bottom; center contents */
.card__footer {
    margin-top: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);    /* room if you add a button next to the badge */
}

/* -------------------------------------------------------------------------- */
/* Grid */

.grid {
    display: grid;
    gap: var(--space-5);
    padding: 0 20px;
}
@media (min-width: 48rem) {
    .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------------------- */
/* KPIs */

.kpi-row {
    display:grid;
    gap: var(--space-5);
    grid-template-columns: repeat(3, minmax(0,1fr));
}
.kpi-row.autofit {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))
}
@media (max-width: 900px) {
    .kpi-row {
        grid-template-columns: 1fr;
    }
}

.kpi {
    text-align: center;
    padding: var(--space-4);
}
.kpi .value {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-black);
    font-size: var(--font-size-huge);
    color: var(--accent);
    line-height: 1;
}
.kpi .label {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-medium);
    margin-top: var(--space-1);
}
.kpi .note {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-light);
    color: var(--muted-text);
    margin-top: calc(0.5 * var(--space-1));
}



/* -------------------------------------------------------------------------- */
/* Badges (e.g. signal labels)  */

.badge {
    display: inline-block;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-smaller);
    line-height: 1;
    padding: var(--space-1) var(--space-2);
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--muted-text);
}
/* Badges/labels */
.badge--primary {
    background: var(--accent);
    color: var(--accent-contrast);
    border-color: color-mix(in srgb, var(--accent) 80%, black);
}
.badge--pos {
    background: color-mix(in srgb, var(--pos) 12%, var(--surface));
    color: var(--pos);
    border-color: color-mix(in srgb, var(--pos) 35%, var(--border));
}
.badge--neu {
    background: color-mix(in srgb, var(--neu) 12%, var(--surface));
    color: var(--neu);
    border-color: color-mix(in srgb, var(--neu) 35%, var(--border));
}
.badge--neg {
    background: color-mix(in srgb, var(--neg) 12%, var(--surface));
    color: var(--neg);
    border-color: color-mix(in srgb, var(--neg) 35%, var(--border));
}


/* -------------------------------------------------------------------------- */
/* chips (or tags) */

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-3);
}

.chip {
    padding: var(--space-1) var(--space-4);
    border-radius: 999px;
    background: var(--accent-muted-bg);
    border: 1.5px solid var(--accent-border);
    font-weight: var(--font-weight-medium);
}

/* -------------------------------------------------------------------------- */
/* alerts */
/* Component */
.success, .alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4);
    color: var(--alert-text);
    background: var(--alert-bg);
    border: 1.5px solid var(--alert-border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-2);
}

.success .success__icon, .alert .alert__icon {
    flex: none;
    margin-top: 2px;
    color: var(--alert-icon);
}

.success {
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    color: var(--success-text);
}

.success .success__icon {
    color: var(--success-icon);
}

.expiring-soon, .expired {
    color: var(--alert-text);
    background: var(--alert-bg);
    font-weight: var(--font-weight-black);
}

/* -------------------------------------------------------------------------- */
/* Dropzone */
.dropzone{
    position: relative;
    border: 2px dashed color-mix(in srgb, var(--accent) 50%, #fff);
    border-radius: var(--border-radius);
    background: color-mix(in srgb, var(--accent) 20%, #fff);
    padding: var(--space-5);
    text-align: center;
}

.dropzone input[type=file]{
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
}

.dropzone .dz-label{
    font-weight: var(--font-weight-medium);
}
.dropzone .dz-sub {
    margin-top: var(--space-1);
    color: var(--muted-text);
    font-size: var(--font-size-small);
}

.dropzone .dz-file {
    margin-top: var(--space-2);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dropzone .dz-actions { display: none; margin-top: var(--space-2); }
.dropzone.has-file .dz-actions { display: inline-flex; gap: var(--space-2); }
.dropzone.has-file .dz-label { opacity: .65; } /* subtle shift when selected */
.dropzone .dz-actions button { z-index: 100; }


/* -------------------------------------------------------------------------- */
/* details */

details summary {
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: var(--all-caps-space);
    margin-bottom: var(--space-3);
}

details {
    border: 1px solid var(--border);
    background: var(--light-surface);
    border-radius: var(--border-radius);
    padding: var(--space-3);
}

/* -------------------------------------------------------------------------- */
/* stytch */

.stytch table.sessions {
    font-size: 80%;
    margin-top: var(--space-3);
}

div.oauth, div.email-magic-link {
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

span.oauth-logo {
    width: 24px;
    height: 24px;
}

span.oauth-logo-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: var(--space-1);
}

div.form-divider {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

div.form-divider span.left,
div.form-divider span.right{
    flex-grow: 1;
    border-bottom: 2px solid var(--muted-text);
}
div.form-divider span.left {
    margin-right: var(--space-3);
}
div.form-divider span.right {
    margin-left: var(--space-3);
}
div.form-divider span.text {
    flex-grow: 0;
    transform: translateY(0.1em);
}


/* -------------------------------------------------------------------------- */
/* API Keys */

.long-key {
    white-space: normal;
    overflow-wrap: anywhere;
}