/* Neutral replacement for the Anubis interstitial stylesheet.
 *
 * nginx serves this file at the exact URL the challenge page loads its stock
 * stylesheet from (/.within.website/x/xess/xess.min.css), because open-source
 * Anubis v1.27.0 has no overlay mechanism (OVERLAY_FOLDER, CHALLENGE_TITLE and
 * custom assets are BotStopper-only). Combined with FORCED_LANGUAGE=nb on the
 * anubis container this yields a Norwegian, unbranded page without forking.
 *
 * The selectors are written against the v1.27.0 DOM (h1#title, img#image,
 * p#status, div#progress > .bar-inner, details, footer). A version bump can
 * change that DOM or the stylesheet URL: re-verify the interstitial in the
 * harness whenever the pinned anubis image changes.
 *
 * The challenge page carries inline <style> rules that come after this file
 * in the cascade; "main #x" outranks their "#x" on specificity, which is why
 * these selectors carry the main prefix.
 *
 * Error pages (cookies disabled, invalid response) share this stylesheet but
 * have no #progress element; main:has(#progress) scopes the challenge-only
 * copy so error pages keep their accurate native text, also debranded.
 */

* { box-sizing: border-box; }

body {
    background: #f5f8f9;
    color: #16232e;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.55;
    padding: 1.5rem;
}

main {
    background: #ffffff;
    border: 1px solid #dde5e9;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(22, 35, 46, 0.06);
    max-width: 26rem;
    width: 100%;
    padding: 2.4rem 2rem 2.2rem;
    text-align: center;
}

main h1 {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 1.1rem;
    line-height: 1.3;
}

main p {
    font-size: 0.95rem;
    margin: 0.6rem 0;
}

main a {
    color: #0c526c;
}

/* No mascot, no Techaro/Anubis branding, no explainer accordion. */
main img,
main details,
main footer {
    display: none !important;
}

#testarea {
    display: none;
}

main #status {
    color: #5b6b77;
    font-size: 0.95rem;
    margin: 1.1rem 0 0.4rem;
}

/* Challenge page only (error pages have no progress bar). */
main:has(#progress) #title {
    font-size: 0;
    line-height: 0;
    margin: 0;
}

main:has(#progress) #title::before {
    content: "Sjekker tilkoblingen din...";
    display: block;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.3;
}

main:has(#progress) #title::after {
    content: "Checking your connection...";
    display: block;
    font-size: 0.9rem;
    font-weight: 400;
    color: #5b6b77;
    margin-top: 0.35rem;
    line-height: 1.4;
}

main:has(#progress) #status::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    margin: 1.4rem auto 1rem;
    border: 3px solid #d8e1e5;
    border-top-color: #106b8c;
    border-radius: 50%;
    animation: ap-spin 0.9s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    main:has(#progress) #status::before { animation: none; }
}

/* Slim neutral progress bar; the stock one is 2rem tall with a purple
 * outline. JS toggles its visibility and drives .bar-inner's width. */
main #progress {
    height: 6px;
    background: #e3edf1;
    border-radius: 99px;
    outline: none;
    overflow: hidden;
    margin: 1rem auto 0.5rem;
    max-width: 16rem;
}

main .bar-inner {
    background-color: #106b8c;
    height: 100%;
    border-radius: 99px;
}