/* =========================================================
   Variables & palette
   ========================================================= */
:root {
    --color-bg: #10141b;
    --color-frame: #5a6478;
    --color-text: #e7e9ee;
    --color-text-muted: #8893a6;
    --color-accent: #e8a33d;
    --color-status: #7fae6f;
    --font-mono: ui-monospace, "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace;
}

/* =========================================================
   Reset & base
   ========================================================= */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-mono);
}

/* =========================================================
   Layout
   ========================================================= */
main {
    display: flex;
    justify-content: center;
    padding: 32px 16px;
    overflow-x: auto;
}

/* =========================================================
   Card (the whole hardcoded ASCII block)
   ========================================================= */
.card {
    margin: 0;
    font-size: 16px;
    line-height: 1.25;
    white-space: pre;
}

/* =========================================================
   Frame characters (+, =, -)
   ========================================================= */
.frame {
    color: var(--color-frame);
}

/* =========================================================
   Banner (ASCII name art)
   ========================================================= */
.banner-text {
    color: var(--color-accent);
}

/* =========================================================
   Status line
   ========================================================= */
.status-dot {
    color: var(--color-status);
    animation: status-pulse 2.4s ease-in-out infinite;
}

.status-role {
    color: var(--color-text-muted);
}

@keyframes status-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}

/* =========================================================
   Group labels
   ========================================================= */
.group-label {
    color: var(--color-accent);
}

/* =========================================================
   Link rows
   ========================================================= */
.link-row {
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.15s ease;
}

    .link-row:hover,
    .link-row:focus-visible {
        color: var(--color-accent);
    }

    .link-row:focus-visible {
        outline: 1px dashed var(--color-accent);
        outline-offset: 2px;
    }

/* =========================================================
   Accessibility utilities
   ========================================================= */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* =========================================================
   Card (the whole hardcoded ASCII block)
   ========================================================= */
.card {
    margin: 0;
    line-height: 1.25;
    white-space: pre;
}

.desktop-card {
    font-size: clamp(12px, 2vw, 22px);
}

.mobile-card {
    display: none;
    font-size: clamp(12px, 3.6vw, 28px);
}

@media (max-width: 760px) {
    main {
        padding: 20px 0;
    }

    .desktop-card {
        display: none;
    }

    .mobile-card {
        display: block;
    }
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .status-dot {
        animation: none;
    }

    .link-row {
        transition: none;
    }
}