/* ==========================================================================
   JETSKI POOLS shared shell — QUBIC edition
   --------------------------------------------------------------------------
   The same shell the production pool sites (NO1DSKI / PEARLSKI / QUANTUSKI)
   run: self-hosted fonts, the slide-out nav rail (JETSKI POOLS hub link,
   gliding hover, current-page marker) and the footer. Ported from pearlski's
   responsive.css / payouts.html and drawn in the Qubic neon palette (pink
   text, cyan accent, purple borders) — each page keeps its own :root.

   Not ported, on purpose — the Qubic pool doesn't use them: the neural network
   background (neural-bg.js), the nav rail's FX switch that controls it, the
   rail's OTHER POOLS section, and the title glitch (glitch.js).

   Loaded LAST in <head>, after each page's inline <style>, so these rules win.
   Behaviour lives in navrail.js.
   ========================================================================== */

/* Shell colours are fixed here rather than read from each page's --text-color,
   which differs (get-started.html uses grey body text), so the rail and the
   footer look the same on every page. */
:root {
    --shell-pink: #ff2db6;                      /* rail links and icons, footer text */
    --shell-muted: #a07cc8;                     /* rail stat labels, POOLS after the wordmark */
    --shell-rail-bg: linear-gradient(180deg, #0a0015 0%, #150030 50%, #200040 100%);
    --shell-glide: rgba(80, 0, 170, 0.45);      /* the hover highlight gliding between rows */
    --shell-marker-glow: rgba(0, 247, 255, 0.55);
}

/* --- Self-hosted fonts (SIL OFL, licences in fonts/) ---------------------- */
@font-face {
    font-family: "Press Start 2P";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/press-start-2p-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Slide-out nav rail ---------------------------------------------------- */
.nav-rail {
    position: fixed;
    top: 0;
    left: 0;
    width: 52px;
    height: 100%;
    box-sizing: border-box;
    background: var(--shell-rail-bg);
    border-right: 2px solid var(--border-color);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    font-family: "Press Start 2P", monospace;   /* not the page's: get-started's body is monospace */
    transition: width 0.3s ease;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}
.nav-rail::-webkit-scrollbar {
    display: none;
}
.nav-rail:hover {
    width: 220px;
    box-shadow: 3px 0 25px rgba(255, 0, 255, 0.4);
}
.nav-rail-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    color: var(--shell-pink);
    font-family: "Press Start 2P", monospace;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: color 0.25s ease;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
}
.nav-rail-link:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
}
.nav-rail-icon {
    min-width: 24px;
    width: 24px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    line-height: 1;
    flex-shrink: 0;
    color: var(--shell-pink);
    filter: drop-shadow(0 0 4px var(--glow-color));
    transition: color 0.25s ease;
}
.nav-rail-label {
    font-size: 0.65em;
    opacity: 0;
    transition: opacity 0.2s ease 0.1s, color 0.25s ease;
    text-align: left;
    flex: 1;
}
.nav-rail:hover .nav-rail-label {
    opacity: 1;
}
.nav-rail-divider {
    height: 1px;
    margin: 8px 12px;
    background: var(--border-color);
    opacity: 0.6;
    flex-shrink: 0;
}

/* Current page: the cyan marker (navrail.js) plus a cyan icon and label */
.nav-rail-link.active .nav-rail-icon,
.nav-rail-link.active .nav-rail-label {
    color: var(--accent-color);
}

/* Hover highlight and current-page marker, moved by navrail.js with the Web
   Animations API (beui.dev shared-layout-bg / bounce-sidebar, as on the other
   pools). Absolutely positioned, so they take no room in the rail's flex flow. */
.nav-rail-glide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    height: 46px;
    background: var(--shell-glide);
    opacity: 0;
    pointer-events: none;
}
.nav-rail-marker {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 3px;
    height: 22px;
    background: var(--accent-color);
    box-shadow: 0 0 8px var(--shell-marker-glow);
    pointer-events: none;
}

/* JETSKI POOLS, the way back to the hub (pool.jetskipool.ai): the same markup
   and wordmark on every pool site — JETSKI slanted with the hub's orange/blue
   split, POOLS quiet after it, a faint accent line under it. */
.nav-rail .nav-rail-index .nav-rail-label {
    display: flex;
    align-items: baseline;
    gap: 0.9em;
    white-space: nowrap;
}
.nav-rail-wordmark {
    display: inline-block;
    font-size: 1.25em;
    color: #f4f1ea;
    transform: skewX(-12deg);
    text-shadow: -1px 0 #ff8a3d, 1px 0 #3db5ff;
}
.nav-rail-pools {
    font-size: 0.8em;
    letter-spacing: 1.5px;
    color: var(--shell-muted);
}
.nav-rail .nav-rail-index + .nav-rail-divider {
    background: rgba(0, 247, 255, 0.35);
}

/* Bottom group: live stats, socials. The rail's free space sits in one empty
   flex item (::after) above it, so the group stays at the foot. While the rail
   is collapsed the stats take no room, so the social icons sit at the visible
   foot of the strip; on hover the stats fade back in above them. */
.nav-rail::after {
    content: "";
    margin-top: auto;
}
.nav-rail-stats,
.nav-rail-social {
    order: 1;
    flex-shrink: 0;
}
.nav-rail-stats {
    border-top: 1px solid var(--border-color);
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    white-space: nowrap;
    font-size: 0.6em;
    transition: opacity 0.2s ease 0.1s, display 0.3s allow-discrete;
}
.nav-rail-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.nav-rail-stat-label {
    color: var(--shell-muted);
    font-size: 0.8em;
}
.nav-rail-stat-value {
    color: var(--accent-color);
}
.nav-rail-social .nav-rail-divider {
    margin-block: 4px;
}
.nav-rail:not(:hover) .nav-rail-stats {
    display: none;
    animation: nav-rail-hide 0.2s ease 0.1s both;
}
.nav-rail:hover .nav-rail-stats {
    animation: nav-rail-reveal 0.2s ease 0.1s both;
}
@keyframes nav-rail-reveal {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes nav-rail-hide {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* --- Inline separator ("HASHRATE | 5M") ------------------------------------ */
.sep {
    margin: 0 0.75em 0 0.5em;
    letter-spacing: 0;
    opacity: 0.5;
}

/* --- Footer (same markup as the other pools) -------------------------------- */
/* One footer look on every page (pool / payout / live-stats had it; tracker and
   get-started had drifted). margin-top stays with each page: it depends on
   whether that page's body is a flex column. */
.retro-footer {
    box-sizing: border-box;   /* several pages give it width: 100%: keep the padding inside */
    text-align: center;
    padding: 15px;
    border-top: 2px solid var(--border-color);
    background: linear-gradient(0deg, #0a0015 0%, #200040 100%);
    color: var(--shell-pink);
    font-family: "Press Start 2P", monospace;
    font-size: 0.7em;
    text-shadow: none;
}
.retro-footer a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
.retro-footer a:hover {
    color: var(--shell-pink);
    text-shadow: 0 0 10px var(--glow-color);
}

/* --- Square pixel buttons, as on the other pools ----------------------------
   Outlined in purple, cyan on hover; no rounded corners, no lift. The wallet
   search buttons on POOL and PAYOUT (.search-btn, .history-toggle-btn) keep
   their own original look from each page: the owner prefers it there. */
.link-button {
    clip-path: none;
    border-radius: 0;
    padding: 14px 24px;
    font-family: "Press Start 2P", monospace;
    font-size: 0.8em;
    line-height: 1;
    letter-spacing: 1px;
    transform: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    color: var(--shell-pink);
    background: rgba(80, 0, 170, 0.25);
    border: 2px solid var(--border-color);
}
.link-button:hover {
    color: var(--accent-color);
    background: rgba(80, 0, 170, 0.25);
    border-color: var(--accent-color);
    box-shadow: 0 0 10px rgba(0, 247, 255, 0.25);
    transform: none;
}

/* --- Search boxes: a placeholder you can read ------------------------------
   (the wallet search box on POOL and PAYOUT keeps its original look) */
.search-input::placeholder {
    color: var(--shell-muted);
    opacity: 1;
}

/* Fonts: each page keeps its own (the pixel font for identities, wallets and
   labels). A JetBrains Mono pass for long data was tried and turned down by the
   owner (2026-11-09); don't override page fonts here. */

/* --- Rolling numbers, copied from Pearl -------------------------------- */
/* Number ticker (ticker.js): a vanilla port of beui.dev's motion
   NumberTicker. Each digit is a column clipped to its line (plus room for a
   glow) over an invisible in-flow digit that keeps the text baseline; its
   0-9 strip rolls to the position its tick-N class names. */
.tick-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.tick-row {
    display: inline-flex;
    align-items: baseline;
    font-variant-numeric: tabular-nums;
    user-select: none;
}
.tick-char {
    white-space: pre;
}
.tick-digit {
    --tick-g: 0px;
    position: relative;
    display: inline-block;
    clip-path: inset(calc(-1 * var(--tick-g)) -0.6em);
}
.tick-ghost {
    visibility: hidden;
}
.tick-strip {
    position: absolute;
    top: calc(-1 * var(--tick-g));
    left: 0;
    display: flex;
    flex-direction: column;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.tick-strip > span {
    box-sizing: border-box;
    height: calc(1lh + 2 * var(--tick-g));
    padding-block: var(--tick-g);
}
.tick-1 { transform: translateY(calc(-1 * (1lh + 2 * var(--tick-g)))); }
.tick-2 { transform: translateY(calc(-2 * (1lh + 2 * var(--tick-g)))); }
.tick-3 { transform: translateY(calc(-3 * (1lh + 2 * var(--tick-g)))); }
.tick-4 { transform: translateY(calc(-4 * (1lh + 2 * var(--tick-g)))); }
.tick-5 { transform: translateY(calc(-5 * (1lh + 2 * var(--tick-g)))); }
.tick-6 { transform: translateY(calc(-6 * (1lh + 2 * var(--tick-g)))); }
.tick-7 { transform: translateY(calc(-7 * (1lh + 2 * var(--tick-g)))); }
.tick-8 { transform: translateY(calc(-8 * (1lh + 2 * var(--tick-g)))); }
.tick-9 { transform: translateY(calc(-9 * (1lh + 2 * var(--tick-g)))); }