/* Satellite Landing Pages -- shared styles for sheet.today, dingers.live, touchdowns.live */

:root {
    --electric-mint: 27 77% 52%;
    --brand: 27 77% 52%;
    --data-blue: 27 77% 42%;
    --deep-midnight: 228 29% 5%;
    --surface-navy: 220 22% 7%;
    --background: 228 29% 5%;
    --foreground: 225 22% 93%;
    --card: 220 22% 7%;
    --card-foreground: 225 22% 93%;
    --muted: 222 17% 12%;
    --muted-foreground: 218 14% 55%;
    --border: 222 14% 15%;
    --mint-text: 27 77% 52%;
    --success: 142 71% 45%;
    --error: 0 84% 60%;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

/* ---- Top Bar ---- */

.sat-topbar {
    border-bottom: 1px solid hsl(var(--border));
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    background: hsl(var(--card));
}

.sat-topbar-left {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.sat-domain {
    font-family: var(--cond), 'Champion Gothic', sans-serif;
    font-size: 1.25rem;
    color: hsl(var(--foreground));
    text-decoration: none;
}

.sat-domain .sat-tld {
    color: hsl(var(--electric-mint));
}

.sat-topbar-sub {
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
}

.sat-topbar-sub a {
    color: hsl(var(--electric-mint));
    text-decoration: none;
    font-weight: 500;
}

.sat-topbar-sub a:hover { text-decoration: underline; }

/* ---- Main ---- */

.sat-main { flex: 1; }

.sat-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ---- Footer ---- */

.sat-footer {
    border-top: 1px solid hsl(var(--border));
    padding: 2rem 1.5rem;
    text-align: center;
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
    margin-top: auto;
}

.sat-footer a {
    color: hsl(var(--electric-mint));
    text-decoration: none;
}

.sat-footer a:hover { text-decoration: underline; }

.sat-footer-sep {
    margin: 0 0.5rem;
    opacity: 0.4;
}

/* ---- Cards ---- */

.sat-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 0.75rem;
    overflow: hidden;
}

.sat-card-accent {
    height: 3px;
    background: linear-gradient(90deg, hsl(var(--electric-mint)), hsl(var(--data-blue)));
}

/* ---- Buttons ---- */

.sat-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s;
    cursor: pointer;
    border: none;
    font-family: inherit;
}

.sat-btn-mint {
    background: hsl(var(--electric-mint));
    color: #0f172a;
}

.sat-btn-mint:hover { opacity: 0.9; }

.sat-btn-outline {
    background: transparent;
    border: 1px solid hsl(var(--border));
    color: hsl(var(--foreground));
}

.sat-btn-outline:hover {
    border-color: hsl(var(--electric-mint));
    color: hsl(var(--electric-mint));
}

/* ---- Typography ---- */

.text-mint { color: hsl(var(--electric-mint)); }
.text-muted { color: hsl(var(--muted-foreground)); }
.text-fg { color: hsl(var(--foreground)); }
.font-mono { font-family: 'JetBrains Mono', monospace; }
.font-chunk { font-family: var(--cond), 'Champion Gothic', sans-serif; }

h1 { font-family: var(--cond), 'Champion Gothic', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.2; }
h2 { font-weight: 700; line-height: 1.3; }

/* ---- Badges ---- */

.sat-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sat-badge-high { background: rgba(34, 197, 94, 0.15); color: hsl(var(--success)); }
.sat-badge-medium { background: rgba(251, 191, 36, 0.15); color: #F59E0B; }
.sat-badge-low { background: rgba(239, 68, 68, 0.15); color: hsl(var(--error)); }

.sat-badge-nba { background: rgba(224, 125, 42, 0.15); color: #e07d2a; }
.sat-badge-nhl { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.sat-badge-mlb { background: rgba(0, 51, 160, 0.15); color: #4d8aff; }
.sat-badge-nfl { background: rgba(1, 51, 105, 0.15); color: #5ba3f5; }
.sat-badge-tennis { background: rgba(224, 125, 42, 0.15); color: #e07d2a; }

/* ---- Sport links ---- */

.sat-sport-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
}

.sat-sport-links a {
    color: hsl(var(--electric-mint));
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
}

.sat-sport-links a:hover { text-decoration: underline; }

/* ---- Loading / Empty States ---- */

.sat-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
}

@keyframes sat-spin {
    to { transform: rotate(360deg); }
}

.sat-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid hsl(var(--border));
    border-top-color: hsl(var(--electric-mint));
    border-radius: 50%;
    animation: sat-spin 0.8s linear infinite;
}

/* ---- Responsive ---- */

@media (max-width: 640px) {
    .sat-topbar { padding: 0.625rem 1rem; }
    .sat-domain { font-size: 1.125rem; }
    .sat-container { padding: 0 0.75rem; }
}