/* ======================================================================
   Status pages (Components/Shared/StatusView): 404, 410, 429, 401, 403, 500…
   ====================================================================== */
.status-page {
    --tone: var(--muted);
    max-width: 560px;
    margin: 56px auto 40px;
    text-align: center;
    display: grid;
    justify-items: center;
}
.status-page.tone-warn { --tone: var(--accent); }
.status-page.tone-bad { --tone: var(--danger); }

/* The big number, with the icon badge tucked into its corner. */
.status-code { position: relative; margin-bottom: 18px; }
.status-code > span:first-child {
    display: block;
    font-size: clamp(5rem, 22vw, 8.5rem);
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(160deg, var(--tone) 10%, color-mix(in srgb, var(--tone) 25%, var(--surface)) 95%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: status-rise .5s cubic-bezier(.2, .9, .3, 1.2) both;
}
.status-code .status-icon {
    --tone: inherit;
    position: absolute;
    right: -18px;
    bottom: -8px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    color: var(--tone);
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--tone) 40%, var(--border));
    box-shadow: 0 8px 24px color-mix(in srgb, var(--tone) 25%, transparent);
    animation: status-pop .45s .2s cubic-bezier(.3, 1.5, .5, 1) both;
}
.status-code .status-icon .i { width: 22px; height: 22px; }

.status-kicker { margin: 0 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tone); }
.status-page h1 { margin: 0 0 10px; font-size: clamp(1.5rem, 5vw, 2rem); }
.status-desc { margin: 0; color: var(--muted); font-size: 1.02rem; line-height: 1.55; max-width: 460px; }

.status-path {
    display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
    margin: 18px 0 0; padding: 6px 12px; border-radius: 999px;
    border: 1px dashed var(--border); background: var(--surface);
    color: var(--muted); font-size: .85rem;
}
.status-path .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.status-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.status-actions .btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.status-ref { margin: 22px 0 0; color: var(--muted); font-size: .8rem; }

@keyframes status-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes status-pop { from { opacity: 0; transform: scale(.4) rotate(-12deg); } }
@media (prefers-reduced-motion: reduce) {
    .status-code > span:first-child, .status-code .status-icon { animation: none; }
}

@media (max-width: 480px) {
    .status-page { margin-top: 32px; }
    .status-actions { width: 100%; }
    .status-actions .btn { flex: 1 1 100%; justify-content: center; }
}