/* ============================================================
   0data.net — refined.css
   Refinement layer loaded AFTER inline styles in index.html.
   Uses the existing design tokens (--bg-dark, --accent-green,
   etc.) defined in :root. Do not redefine them here unless
   gracefully degrading for forced light mode.
   ============================================================ */

/* ---------- 1. Fluid typography scale ----------------------- */
:root {
    --fs-xs:    clamp(0.78rem, 0.74rem + 0.18vw, 0.85rem);
    --fs-sm:    clamp(0.85rem, 0.81rem + 0.20vw, 0.95rem);
    --fs-base:  clamp(0.95rem, 0.90rem + 0.25vw, 1.05rem);
    --fs-lg:    clamp(1.10rem, 1.02rem + 0.40vw, 1.25rem);
    --fs-xl:    clamp(1.35rem, 1.20rem + 0.75vw, 1.60rem);
    --fs-2xl:   clamp(1.80rem, 1.50rem + 1.50vw, 2.40rem);
    --fs-3xl:   clamp(2.40rem, 1.80rem + 3.00vw, 3.75rem);

    --line-tight:  1.2;
    --line-snug:   1.4;
    --line-normal: 1.6;
    --line-loose:  1.75;

    --shadow-soft: 0 6px 24px -8px rgba(0, 0, 0, 0.6);
    --shadow-glow-green: 0 0 0 1px var(--accent-green),
                         0 8px 32px -12px rgba(0, 255, 136, 0.35);
    --ring-color: color-mix(in oklab, var(--accent-green) 70%, white 0%);
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-med:  280ms cubic-bezier(0.4, 0, 0.2, 1);
}

html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-size: var(--fs-base);
    line-height: var(--line-normal);
    font-feature-settings: "ss01", "cv11", "kern";
    font-variant-ligatures: common-ligatures contextual;
}

/* Optical sizing where the browser supports it */
@supports (font-optical-sizing: auto) {
    body { font-optical-sizing: auto; }
}

h1, .hero h1 {
    font-size: var(--fs-3xl);
    line-height: var(--line-tight);
    letter-spacing: -0.02em;
}

h2, .section-title {
    font-size: var(--fs-xl);
    line-height: var(--line-snug);
    letter-spacing: -0.015em;
}

h3 { font-size: var(--fs-lg); line-height: var(--line-snug); }

.hero p { font-size: var(--fs-lg); line-height: var(--line-snug); }

code, pre, .tag, .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ---------- 2. Focus rings (accessibility) ------------------ */
:focus { outline: none; }

:focus-visible {
    outline: 2px solid var(--ring-color);
    outline-offset: 3px;
    border-radius: 6px;
    transition: outline-offset var(--transition-fast);
}

a:focus-visible,
button:focus-visible,
.tool-card:focus-visible,
.network-card:focus-visible {
    outline: 2px solid var(--accent-green);
    outline-offset: 4px;
    box-shadow: 0 0 0 4px rgba(0, 255, 136, 0.15);
}

/* Skip-link target should be obvious */
:target {
    scroll-margin-top: 6rem;
}

/* ---------- 3. Link underline behaviour --------------------- */
a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-skip-ink: auto;
}

/* Body copy links: underline on rest, accent on hover */
main p a,
.privacy-promise p a,
footer a {
    color: var(--accent-green);
    text-decoration: underline;
    text-decoration-color: rgba(0, 255, 136, 0.35);
    transition: text-decoration-color var(--transition-fast),
                color var(--transition-fast);
}

main p a:hover,
.privacy-promise p a:hover,
footer a:hover {
    text-decoration-color: var(--accent-green);
}

/* Nav + card links never get default underline */
nav a, .tool-card, .network-card, .logo { text-decoration: none; }

/* ---------- 4. Smoother button / card hover ----------------- */
.tool-card,
.network-card,
.badge,
nav a {
    transition:
        background-color var(--transition-med),
        border-color var(--transition-med),
        color var(--transition-fast),
        transform var(--transition-med),
        box-shadow var(--transition-med);
    will-change: transform;
}

.tool-card:hover {
    box-shadow: var(--shadow-glow-green);
    transform: translateY(-4px) scale(1.005);
}

.network-card:hover {
    box-shadow: var(--shadow-soft);
    transform: translateY(-2px);
}

/* Active state — gives tactile feedback on press */
.tool-card:active,
.network-card:active { transform: translateY(-1px) scale(0.998); }

/* Generic button polish — applies wherever <button> appears */
button {
    font: inherit;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    border-radius: 10px;
    padding: 0.6rem 1.1rem;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}
button:hover { background: var(--bg-card-hover); border-color: var(--accent-green); }
button:active { transform: translateY(1px); }

/* ---------- 5. Selection color ------------------------------ */
::selection {
    background: var(--accent-green);
    color: var(--bg-dark);
}

/* ---------- 6. Scroll-driven reveal animations -------------- */
/* IntersectionObserver-friendly: JS toggles `.is-visible` on
   elements that already carry `.reveal` / `.reveal-delayed`.
   Falls back to instantly visible if JS / observer disabled. */

.reveal,
.reveal-delayed {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.reveal-delayed { transition-delay: 140ms; }

.reveal.is-visible,
.reveal-delayed.is-visible {
    opacity: 1;
    transform: none;
}

/* If JS never runs, show content after a brief grace period */
@media (prefers-reduced-motion: no-preference) {
    .reveal:not(.is-visible),
    .reveal-delayed:not(.is-visible) {
        animation: revealFallback 1s 1.5s forwards;
    }
}

@keyframes revealFallback {
    to { opacity: 1; transform: none; }
}

/* Native scroll-driven animations where supported (progressive) */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .reveal,
        .reveal-delayed {
            animation: revealOnView linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 60%;
        }
        @keyframes revealOnView {
            from { opacity: 0; transform: translateY(18px); }
            to   { opacity: 1; transform: none; }
        }
    }
}

/* ---------- 7. prefers-reduced-motion overrides ------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal,
    .reveal-delayed {
        opacity: 1 !important;
        transform: none !important;
    }

    .badge-dot { animation: none !important; }

    .tool-card:hover,
    .network-card:hover {
        transform: none !important;
    }
}

/* ---------- 8. prefers-color-scheme: light fallback --------- */
/* Graceful degrade only — site is dark-first by design.
   We re-tune tokens so forced-light browsers don't end up with
   white-on-white or invisible accents. */
@media (prefers-color-scheme: light) {
    :root {
        --bg-dark:        #f7f8f9;
        --bg-card:        #ffffff;
        --bg-card-hover:  #f0f2f4;
        --border:         #e4e7eb;
        --text-primary:   #0a0a0a;
        --text-secondary: #4a5160;
        --text-muted:     #7a8090;
        --accent-green:   #00a85a;
        --accent-blue:    #0066cc;
        --accent-purple:  #6b3ed1;
        --accent-red:     #d93636;
        --accent-yellow:  #b8860b;
    }

    header {
        background: rgba(255, 255, 255, 0.85);
    }

    .hero {
        background: radial-gradient(ellipse at center top,
                    rgba(0, 168, 90, 0.08) 0%, transparent 55%);
    }

    .hero h1 {
        background: linear-gradient(135deg,
                    var(--text-primary) 0%, var(--accent-green) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .privacy-promise {
        background: linear-gradient(135deg,
                    rgba(0, 168, 90, 0.05),
                    rgba(0, 102, 204, 0.05));
    }

    .tag { background: rgba(0, 0, 0, 0.05); }

    ::selection { color: #ffffff; }
}

/* ---------- 9. Print-friendly stylesheet -------------------- */
@media print {
    :root {
        --bg-dark:        #ffffff;
        --bg-card:        #ffffff;
        --bg-card-hover:  #ffffff;
        --border:         #cccccc;
        --text-primary:   #000000;
        --text-secondary: #333333;
        --text-muted:     #555555;
        --accent-green:   #006633;
        --accent-blue:    #003399;
    }

    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body {
        font-size: 11pt;
        line-height: 1.5;
        color: #000;
    }

    header,
    nav,
    footer .footer-network,
    .hero-badges,
    .badge-dot {
        display: none !important;
    }

    .hero {
        padding: 1rem 0;
        border: none;
        text-align: left;
    }

    .hero h1 {
        font-size: 22pt;
        -webkit-text-fill-color: #000 !important;
        background: none !important;
    }

    main {
        padding: 0;
        max-width: 100%;
    }

    .tools-grid,
    .network-grid {
        display: block;
    }

    .tool-card,
    .network-card,
    .privacy-promise {
        page-break-inside: avoid;
        border: 1px solid #ccc !important;
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        border-radius: 4px;
    }

    /* Print URL after every external link */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #333 !important;
        word-break: break-all;
    }

    .reveal,
    .reveal-delayed {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ---------- 10. Misc polish --------------------------------- */
hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 2.5rem 0;
}

img, svg, video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Tiny helper for visually-hidden but screen-reader available */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}