/*
 * App-specific styles for screens not covered by the Veeqo auth kit.
 * Tokens only — every value is a --ps-* custom property from the Pickscan
 * Design System (square corners, 1px lines, no shadows).
 */

.dash {
    max-width: var(--ps-container);
    margin: 0 auto;
    padding: var(--ps-space-5) var(--ps-page-pad);
}

.dash__eyebrow {
    font-family: var(--ps-font-mono);
    font-size: var(--ps-eyebrow-size);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ps-ink-3);
    margin: 0;
}

.dash__account {
    font-family: var(--ps-font-display);
    font-weight: var(--ps-fw-black);
    font-size: var(--ps-title-size);
    line-height: var(--ps-title-lh);
    letter-spacing: -0.01em;
    color: var(--ps-ink);
    margin: var(--ps-space-1) 0 0;
}

.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--ps-space-3);
    margin-top: var(--ps-space-4);
}

.ps-kpi {
    background: var(--ps-white);
    border: var(--ps-border);
    border-radius: var(--ps-radius);
    padding: var(--ps-space-4);
}

.ps-kpi__label {
    font-family: var(--ps-font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ps-ink-3);
    margin: 0 0 var(--ps-space-2);
}

.ps-kpi__value {
    font-family: var(--ps-font-mono);
    font-weight: var(--ps-fw-bold);
    font-size: 34px;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--ps-ink);
}

.dash__actions {
    margin-top: var(--ps-space-5);
}

/* Secondary button — ink outline, square, Ubuntu caps (DS secondary variant). */
.dash-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--ps-space-2);
    font-family: var(--ps-font-display);
    font-weight: var(--ps-fw-bold);
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 10px 18px;
    background: var(--ps-white);
    color: var(--ps-ink);
    border: 1px solid var(--ps-ink);
    border-radius: var(--ps-radius);
    cursor: pointer;
    transition: background var(--ps-dur-fast) var(--ps-ease);
}

.dash-btn-secondary:hover {
    background: var(--ps-paper-2);
}