/**
 * OpenWorld brand layer
 * Loaded after styles.css — carries the identity of www.openworld.rip into the
 * cabinet: deep-space background, ice accent, Geologica/JetBrains Mono, the
 * planet mark, and the soft glow that the landing page uses as its light source.
 */

/* ===== Base type ============================================== */

body {
    font-weight: var(--font-weight-light);
    letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6,
.card-title,
.stat-value,
.logo {
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-tight);
}

h1 { font-size: var(--font-size-2xl); }

strong, b { font-weight: var(--font-weight-medium); }

::selection {
    background: var(--ow-ice);
    color: #050608;
}

:focus-visible {
    outline: 1.5px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius-md);
}

/* Numerals, identifiers and money read as data, not prose */
.stat-value,
.balance-amount,
.key-card-country span:nth-child(2),
.account-group-meta strong,
code, kbd, pre, .mono {
    font-family: var(--font-family-mono);
    font-variant-numeric: tabular-nums;
}

/* ===== Starfield ============================================== */
/*
 * The landing page scatters stars with JS; here it is a single fixed,
 * pointer-transparent layer built from radial gradients — no scripting, no
 * per-frame work, and it disappears entirely in the light theme.
 */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--z-stars);
    pointer-events: none;
    opacity: var(--stars-opacity, 1);
    transition: opacity var(--transition-slow);
    background-image:
        radial-gradient(1.4px 1.4px at 12% 18%, rgba(207, 214, 228, .55), transparent 100%),
        radial-gradient(1.2px 1.2px at 78% 9%,  rgba(169, 201, 255, .50), transparent 100%),
        radial-gradient(1px 1px   at 34% 62%,   rgba(207, 214, 228, .40), transparent 100%),
        radial-gradient(1.6px 1.6px at 88% 44%, rgba(207, 214, 228, .45), transparent 100%),
        radial-gradient(1px 1px   at 58% 82%,   rgba(169, 201, 255, .38), transparent 100%),
        radial-gradient(1.2px 1.2px at 5% 74%,  rgba(207, 214, 228, .35), transparent 100%),
        radial-gradient(1px 1px   at 46% 28%,   rgba(207, 214, 228, .30), transparent 100%),
        radial-gradient(1.3px 1.3px at 68% 66%, rgba(169, 201, 255, .34), transparent 100%),
        radial-gradient(1px 1px   at 24% 92%,   rgba(207, 214, 228, .28), transparent 100%),
        radial-gradient(1.1px 1.1px at 94% 76%, rgba(207, 214, 228, .30), transparent 100%),
        /* the faint ice haze the planet casts across the page */
        radial-gradient(circle at 50% -10%, rgba(169, 201, 255, .10), transparent 60%);
}

/* Content sits above the stars */
.page-wrapper { position: relative; z-index: 1; }

/* ===== Header & logo ========================================== */

.header {
    background-color: var(--color-nav-bg);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
}

.logo {
    font-size: 1.05rem;
    gap: 9px;
}

.logo-icon {
    width: 22px;
    height: 22px;
    flex: none;
    color: var(--ow-ice);
}

[data-theme="light"] .logo-icon { color: var(--color-primary); }

/* "vpn" badge, as on the landing page */
.logo-badge {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 22px;
    flex: none;
    margin-left: 1px;
    border: 1.5px solid rgba(169, 201, 255, .35);
    border-radius: 6.25px;
    font-family: var(--font-family-mono);
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    letter-spacing: .08em;
    line-height: 1;
    color: var(--ow-ice);
}

[data-theme="light"] .logo-badge {
    border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
    color: var(--color-primary);
}

/* Domain tag in the footer of the header, mirroring .dom on the site */
.brand-domain {
    font-family: var(--font-family-mono);
    font-size: 10.5px;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-tertiary);
}

.nav-link { font-weight: var(--font-weight-normal); }

.nav-link.active {
    background-color: var(--color-primary-light);
    box-shadow: inset 0 0 0 1px rgba(169, 201, 255, .16);
}

[data-theme="light"] .nav-link.active { box-shadow: none; }

/* ===== Surfaces =============================================== */

.card,
.stat-card,
.key-card,
.modal {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-xl);
}

.stat-card,
.key-card {
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.key-card:hover,
.stat-card:hover {
    border-color: rgba(169, 201, 255, .28);
    box-shadow: var(--glow-ice-md);
}

[data-theme="light"] .key-card:hover,
[data-theme="light"] .stat-card:hover {
    border-color: var(--color-border-secondary);
    box-shadow: var(--shadow-md);
}

/* Short metric captions get the site's spaced-out treatment; form labels keep
   normal casing so long localized strings stay readable. */
.stat-label {
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.form-label {
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
}

/* ===== Controls =============================================== */

.btn {
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    letter-spacing: 0;
}

.btn-primary {
    box-shadow: 0 0 0 1px rgba(169, 201, 255, .25), var(--glow-ice-sm);
}

.btn-primary:hover:not(:disabled) {
    box-shadow: 0 0 0 1px rgba(220, 233, 255, .45), var(--glow-ice-md);
}

[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-primary:hover:not(:disabled) {
    box-shadow: var(--shadow-sm);
}

.btn-outline {
    border-color: var(--color-border-secondary);
}

.btn-outline:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/*
 * The keys page marks the "add key" link disabled by adding .disabled; without
 * a rule it stayed fully clickable. Anchors ignore :disabled, so block pointer
 * events explicitly.
 */
.btn.disabled,
.btn[aria-disabled="true"] {
    opacity: .45;
    pointer-events: none;
    cursor: not-allowed;
}

.form-input,
.form-select {
    border-radius: var(--radius-md);
}

.form-input:focus,
.form-select:focus {
    box-shadow: 0 0 0 3px rgba(169, 201, 255, .14);
}

/* ===== Badges & alerts ======================================== */

.badge {
    font-family: var(--font-family-mono);
    font-size: 10.5px;
    letter-spacing: .04em;
    border-radius: var(--radius-full);
}

.alert { border-radius: var(--radius-lg); }

/* ===== Modal ================================================== */

.modal-overlay {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.modal { box-shadow: var(--shadow-xl), var(--glow-ice-sm); }

[data-theme="light"] .modal { box-shadow: var(--shadow-xl); }

/* ===== Hero planet (home page) ================================ */
/*
 * A scaled-up logo mark with the landing page's breathing halo. Purely
 * decorative: aria-hidden in the markup, and the animation is dropped for
 * prefers-reduced-motion further down.
 */
.hero-planet {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto var(--spacing-8);
    display: grid;
    place-items: center;
    color: var(--color-primary);
}

.hero-planet::before {
    content: "";
    position: absolute;
    inset: -34px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(169, 201, 255, .26), transparent 64%);
    opacity: .5;
    animation: ow-breathe 5s ease-in-out infinite;
}

[data-theme="light"] .hero-planet::before { opacity: .28; }

.hero-planet svg {
    position: relative;
    width: 100%;
    height: 100%;
}

@keyframes ow-breathe {
    0%, 100% { opacity: .42; transform: scale(1); }
    50%      { opacity: .68; transform: scale(1.05); }
}

/* ===== Empty states =========================================== */

.empty-state-icon {
    color: var(--color-primary);
    opacity: .55;
}

/* ===== Scrollbar ============================================== */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-scrollbar-thumb) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar-thumb);
    border-radius: var(--radius-full);
    border: 3px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--color-scrollbar-thumb-hover); background-clip: content-box; }

/* ===== Motion preferences ===================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}