/* Settora — small additions only; Tailwind CDN handles the rest. */

:root {
    --receipt-bg: #0b0f17;
}

/* Shared graphite theme background glow (matches the landing page). */
body {
    background-image:
        radial-gradient(circle at 76% -8%, rgba(36, 92, 255, 0.18), transparent 30%),
        radial-gradient(circle at 0% 40%, rgba(54, 95, 176, 0.08), transparent 27%);
    background-attachment: fixed;
}

/* Monospace "engineered" display type + terminal grid, shared with landing. */
.font-mono-display { font-family: "DM Mono", ui-monospace, monospace; }
.signal-grid {
    background-image:
        linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 28px 28px;
}
.wordmark-engineered { letter-spacing: -.07em; }

/* Monospace receipt / ledger metadata blocks. */
.receipt {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: var(--receipt-bg);
    border: 1px solid #1e293b;
    border-radius: 0.5rem;
}

/* Visible focus ring for keyboard users on custom controls. */
.focus-ring:focus-visible {
    outline: 2px solid #5b86ff;
    outline-offset: 2px;
}

/* Status pills. */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.pill-approved { background: rgba(16,185,129,0.15); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.4); }
.pill-review   { background: rgba(234,179,8,0.12);  color: #fde68a; border: 1px solid rgba(234,179,8,0.4); }
.pill-paused   { background: rgba(148,163,184,0.12); color: #cbd5e1; border: 1px solid rgba(148,163,184,0.35); }
.pill-failed   { background: rgba(239,68,68,0.12);  color: #fca5a5; border: 1px solid rgba(239,68,68,0.4); }
.pill-live     { background: rgba(59,107,255,0.15); color: #7aa2ff; border: 1px solid rgba(59,107,255,0.4); }

/* Internal example data banner. */
.example-banner {
    background: repeating-linear-gradient(45deg, rgba(234,179,8,0.06), rgba(234,179,8,0.06) 10px, transparent 10px, transparent 20px);
    border: 1px dashed rgba(234,179,8,0.5);
    color: #fde68a;
}

@media (max-width: 375px) {
    .receipt { font-size: 0.72rem; }
}