/*!
 * Copyright (c) 2026 Daki.cc — Niclas Specht. All rights reserved.
 * Proprietary and confidential.
 */

/* Status page (daki.cc/status): page header, live board around the
   HetrixTools report, and the help section. Colours follow subpages.css. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #111111;
    color: #fff;
    font-family: 'Work Sans', sans-serif;
    overflow-x: clip;
}

:root {
    --st-ok: #3ddc84;
    --st-ok-rgb: 61, 220, 132;
}

/* ── Header ────────────────────────────────────────────────────── */
.hero-header {
    position: relative;
    overflow: hidden;
    padding-bottom: 3.5rem;
    text-align: center;
}
.hero-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(164, 50, 192, 0.55) 1px, transparent 1.5px);
    background-size: 26px 26px;
    opacity: 0.1;
    -webkit-mask-image: radial-gradient(120% 95% at 50% 25%, transparent 0%, transparent 42%, #000 100%);
            mask-image: radial-gradient(120% 95% at 50% 25%, transparent 0%, transparent 42%, #000 100%);
}
.hero-header::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(192, 38, 211, 0.55), transparent);
    box-shadow: 0 0 14px rgba(196, 38, 211, 0.4);
}
.hero-header > .container { position: relative; z-index: 2; }
.page-title { margin-bottom: 12px; }
.page-title .accent {
    background: linear-gradient(118deg, #e29bf0 0%, #c026d3 55%, #a432c0 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.page-subtitle { max-width: 620px; margin: 0 auto; font-size: 1.05rem; line-height: 1.6; }

/* Pulsing status dot (live board header) */
.st-dot { position: relative; width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%; background: var(--st-ok); box-shadow: 0 0 10px rgba(var(--st-ok-rgb), 0.7); }
.st-dot::after {
    content: '';
    position: absolute;
    inset: -5px;
    border: 2px solid rgba(var(--st-ok-rgb), 0.55);
    border-radius: 50%;
    animation: st-ping 2.4s ease-out infinite;
}
@keyframes st-ping {
    0% { transform: scale(.4); opacity: 1; }
    80%, 100% { transform: scale(1.5); opacity: 0; }
}

.st-header-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.st-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1px solid #3a3140;
    border-radius: 10px;
    background: #1b171f;
    color: #f2edf5;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.st-btn:hover { border-color: #855493; background: #221a27; color: #fff; }
.st-btn--primary { border-color: transparent; background: linear-gradient(135deg, #6b0882 0%, #8c10ae 100%); color: #fff; box-shadow: 0 6px 18px rgba(118, 9, 145, 0.4); }
.st-btn--primary:hover { border-color: transparent; background: linear-gradient(135deg, #7d0a9c 0%, #9e12c6 100%); box-shadow: 0 8px 24px rgba(140, 16, 174, 0.5); }
.st-btn--sm { padding: 8px 13px; border-radius: 9px; font-size: .82rem; font-weight: 500; }
.st-icon { width: 16px; height: 16px; flex-shrink: 0; }
.st-btn--sm .st-icon { width: 14px; height: 14px; }
.st-btn.is-spinning .st-icon { animation: st-spin .8s linear; }
@keyframes st-spin { to { transform: rotate(360deg); } }

/* ── Main ──────────────────────────────────────────────────────── */
.st-main { flex-grow: 1; padding: 2.5rem 0 4.5rem; }
.st-board,
.st-help-card {
    border: 1px solid var(--sp-border, #343039);
    border-radius: 13px;
    background:
        radial-gradient(ellipse at var(--glow-x, 85%) var(--glow-y, 0%), rgba(118, 9, 145, var(--glow-opacity, .08)), transparent 70%),
        var(--sp-surface, #181818);
}

/* ── Live board ────────────────────────────────────────────────── */
.st-board { --glow-x: 50%; --glow-opacity: .12; overflow: hidden; }
.st-board-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.st-board-title { display: flex; align-items: center; gap: 12px; margin: 0; }
.st-board-title h2 { margin: 0; color: #f2edf5; font: 600 1.15rem/1.3 'Poppins', sans-serif; letter-spacing: -.01em; }
.st-board-title small { display: block; margin-top: 2px; color: var(--sp-muted, #a99eb0); font-size: .8rem; }
.st-board-tools { display: flex; flex-wrap: wrap; gap: 8px; }

.st-frame-wrap { position: relative; min-height: 460px; background: #0c0c0d; }
/* iframe-resizer needs width:1px + min-width:100% to size correctly. */
.st-frame { display: block; width: 1px; min-width: 100%; min-height: 460px; border: 0; }

/* Skeleton shown until the board reports it is ready */
.st-skeleton {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 20px;
    background: #0c0c0d;
    transition: opacity .45s ease;
}
.st-skeleton.is-hidden { opacity: 0; pointer-events: none; }
.st-skel-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) 70px; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 10px; }
.st-skel-row > span,
.st-skel-row > div > span {
    display: block;
    height: 10px;
    border-radius: 6px;
    background: linear-gradient(90deg, #1a161d 0%, #2a2230 50%, #1a161d 100%);
    background-size: 200% 100%;
    animation: st-shimmer 1.4s ease-in-out infinite;
}
.st-skel-row > span:first-child { width: 18px; height: 18px; border-radius: 50%; }
.st-skel-row > div { display: flex; flex-direction: column; gap: 8px; }
.st-skel-row > div > span:last-child { width: 55%; height: 6px; }
@keyframes st-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.st-skel-note { margin: 6px 0 0; color: var(--sp-muted, #a99eb0); font-size: .85rem; text-align: center; }

.st-board-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--sp-muted, #a99eb0);
    font-size: .8rem;
}
.st-board-foot a { color: var(--sp-link, #cc96de); text-decoration: none; }
.st-board-foot a:hover { color: #fff; }

/* ── Help ──────────────────────────────────────────────────────── */
.st-help { margin-top: 56px; text-align: center; }
.st-help h2 { margin: 0 0 8px; font: 700 clamp(1.6rem, 3.4vw, 2.1rem)/1.15 'Poppins', sans-serif; letter-spacing: -.03em; }
.st-help > p { max-width: 560px; margin: 0 auto 26px; color: var(--sp-muted, #a99eb0); }
.st-help-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; text-align: left; }
.st-help-card { position: relative; display: flex; flex-direction: column; padding: 22px; color: inherit; text-decoration: none; transition: border-color .25s ease, transform .3s ease, box-shadow .25s ease; }
.st-help-card:hover { transform: translateY(-4px); border-color: #855493; box-shadow: 0 14px 34px -14px rgba(192, 38, 211, 0.45); color: inherit; }
.st-help-step { margin-bottom: 14px; color: #d796ec; font: 600 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; }
.st-help-card b { margin-bottom: 6px; color: #f2edf5; font: 600 1.05rem/1.3 'Poppins', sans-serif; letter-spacing: -.01em; }
.st-help-card b small { color: var(--sp-muted, #a99eb0); font-family: 'Work Sans', sans-serif; font-size: .78em; font-weight: 500; }
.st-help-card > span { flex-grow: 1; color: var(--sp-text, #d8d0dc); font-size: .9rem; line-height: 1.55; }
.st-help-card em { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--sp-link, #cc96de); font-size: .86rem; font-style: normal; font-weight: 600; }
.st-help-card em .st-icon { width: 14px; height: 14px; transition: transform .25s ease; }
.st-help-card:hover em .st-icon { transform: translateX(3px); }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .st-help-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    .st-board-head, .st-board-foot { padding-left: 14px; padding-right: 14px; }
    .st-board-tools { width: 100%; }
    .st-board-tools .st-btn { flex: 1; justify-content: center; }
    .st-skel-row { grid-template-columns: 18px minmax(0, 1fr); }
    .st-skel-row > span:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .st-dot::after, .st-skel-row span, .st-btn.is-spinning .st-icon { animation: none; }
    .st-help-card, .st-btn { transition: none; }
    .st-help-card:hover { transform: none; }
}