/* ══════════════════════════════════════════════════════════════════
   STATUS CARD — branded replacement for bare <p> error/not-found text.
   Adapted from Chronos' .circuit-card (wwwroot/css/chronos/20-spinner.css).
   ══════════════════════════════════════════════════════════════════ */

.status-card-wrap {
    min-height: calc(100vh - 3.5rem);
    display: grid;
    place-items: center;
    padding: var(--gap-lg);
}

.status-card {
    width: min(420px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 28px 24px 24px;
    border-radius: var(--radius-xl);
    background: var(--surface-dialog);
    border: 1px solid var(--border-subtle);
    color: var(--text-high);
    text-align: center;
    box-shadow: var(--elevation-3);
}

/* Two classes on purpose: the Google Fonts stylesheet (linked after this file in
   index.html) defines .material-symbols-rounded { display:inline-block; font-size:24px;
   line-height:1 } with the same specificity and would win, leaving the glyph stuck at
   the top of the 52px circle instead of centred. */
.material-symbols-rounded.status-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: rgba(157, 36, 153, 0.16);
    color: var(--color-primary);
    font-size: 28px;
    line-height: 1;
}

.status-card-title {
    margin: 0 0 6px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-high);
}

.status-card-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-medium);
}

.status-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 18px;
}

@media (max-width: 480px) {
    .status-card { width: calc(100vw - 24px); padding: 22px 18px 18px; }
}