/* Layout shell: the top nav, the preview banner, and the per-league header.
 *
 * These were three <style> blocks inline in _Layout and _LeagueLayout. They are all
 * static CSS, so they live in a file instead — which lets the Content-Security-Policy
 * refuse a <style> element outright (style-src-elem 'self'). An injected <style> is the
 * genuinely dangerous form of CSS injection: it can read attribute values through
 * selectors and exfiltrate them with a background url(). Style ATTRIBUTES are still
 * allowed, because ~970 of them carry server-computed values.
 */

        /* ═══ AXI-VR — top-nav esports shell (crimson / black / white) ═══ */
        :root { --nl-topnav-h: 66px; }

        .nl-topnav {
            position: fixed; top: 0; left: 0; right: 0; z-index: 1030; height: var(--nl-topnav-h);
            display: flex; align-items: center; gap: 6px; padding: 0 clamp(14px, 3vw, 30px);
            background: rgba(8,8,11,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--m-border-strong); box-shadow: 0 6px 26px rgba(0,0,0,.55);
        }
        .nl-topnav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
            background: linear-gradient(90deg, var(--m-crimson), transparent 42%); }

        .nl-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: 12px; }
        .nl-logo { filter: drop-shadow(0 0 8px var(--m-crimson-glow)); transition: transform .2s ease; }
        .nl-brand:hover .nl-logo { transform: rotate(-3deg) scale(1.06); }
        .nl-brand-text { font-family: var(--font-display); font-weight: 800; letter-spacing: .04em; line-height: 1; font-size: 18px; color: var(--m-text); white-space: nowrap; }
        .nl-brand-text small { display: block; font-size: 8px; letter-spacing: .2em; color: var(--m-text-dim); margin-top: 3px; }
        .nl-brand-accent { color: var(--m-crimson); }

        .nl-nav { display: flex; align-items: center; gap: 2px; }
        .nl-nav a {
            position: relative; font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
            letter-spacing: .06em; font-size: 13px; color: var(--m-text-muted); text-decoration: none;
            padding: 10px 16px; transition: color .15s, background .15s;
            clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
        }
        .nl-nav a:hover { color: var(--m-text); background: rgba(255,255,255,.04); }
        .nl-nav a.active { color: #fff; background: var(--m-crimson-dim); }
        .nl-nav a.active::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: 5px; height: 2px;
            background: var(--m-crimson); box-shadow: 0 0 8px var(--m-crimson-glow); }

        .nl-topnav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
        .nl-signin { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
            font-size: 13px; color: #fff; background: var(--m-crimson); border: none; border-radius: 7px; padding: 9px 20px;
            text-decoration: none; box-shadow: 0 0 14px var(--m-crimson-dim); transition: background .15s, transform .15s; }
        .nl-signin:hover { background: var(--m-crimson-bright); transform: translateY(-1px); color: #fff; }

        .nl-user-wrap { position: relative; }
        .nl-user { display: flex; align-items: center; gap: 9px; background: var(--m-surface); border: 1px solid var(--m-border-strong);
            border-radius: 8px; padding: 5px 10px 5px 6px; color: var(--m-text); cursor: pointer; font: inherit; transition: border-color .15s; }
        .nl-user:hover, .nl-user-wrap.open .nl-user { border-color: var(--m-crimson); }
        .nl-user-avatar { width: 30px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
            font-family: var(--font-display); font-weight: 800; font-size: 14px; color: #fff;
            background: linear-gradient(150deg, var(--m-crimson), #7a0f1f); flex-shrink: 0; overflow: hidden; }
        .nl-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
        .nl-user-name { font-family: var(--font-display); font-size: 14px; letter-spacing: .02em; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .nl-user-caret { font-size: 10px; color: var(--m-text-dim); transition: transform .2s; }
        .nl-user-wrap.open .nl-user-caret { transform: rotate(180deg); color: var(--m-crimson); }
        .nl-user-badge { background: var(--m-crimson); color: #fff; font-family: var(--font-display); font-size: 11px; min-width: 18px;
            height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
        .nl-user-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px; z-index: 60; list-style: none; margin: 0; padding: 6px;
            display: none; background: var(--m-surface); border: 1px solid var(--m-border-strong); border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.6); }
        .nl-user-wrap.open .nl-user-menu { display: block; }
        .nl-user-menu li a { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 7px; color: var(--m-text-muted);
            text-decoration: none; font-size: 14px; transition: background .12s, color .12s; }
        .nl-user-menu li a:hover { background: var(--m-surface-hover); color: var(--m-text); }
        .nl-user-menu li a i { width: 16px; text-align: center; opacity: .7; }
        .nl-user-menu li a.logout, .nl-user-menu li button.logout { color: #ff6b6b; }
        .nl-user-menu li button.logout { width: 100%; background: none; border: 0; cursor: pointer; font: inherit;
            display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 7px; text-align: left; }
        .nl-user-menu li button.logout:hover { background: var(--m-surface-hover); }
        .nl-user-menu li button.logout i { width: 16px; text-align: center; opacity: .7; }
        .nl-user-menu li form { margin: 0; }
        .nl-user-menu li button.menu-act { width: 100%; background: none; border: 0; cursor: pointer; font: inherit; color: var(--m-text-muted);
            display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 7px; text-align: left; transition: background .12s, color .12s; }
        .nl-user-menu li button.menu-act:hover { background: var(--m-surface-hover); color: var(--m-text); }
        .nl-user-menu li button.menu-act i { width: 16px; text-align: center; opacity: .7; }
        .nl-user-divider { height: 1px; background: var(--m-border); margin: 5px 6px; }

        .nl-hamburger { display: none; background: none; border: 1px solid var(--m-border-strong); border-radius: 7px; width: 40px; height: 38px;
            color: var(--m-text); cursor: pointer; align-items: center; justify-content: center; }

        .nl-content { padding-top: var(--nl-topnav-h); min-height: 100vh; display: flex; flex-direction: column; }
        .nl-main { padding: clamp(18px, 3vw, 34px); max-width: 1240px; margin: 0 auto; width: 100%; flex: 1; }
        .nl-page-title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 4px; }
        .nl-page-title span { color: var(--m-crimson); }
        .nl-page-sub { color: var(--m-text-muted); margin: 0 0 22px; }
        .nl-footer { border-top: 1px solid var(--m-border); margin-top: 40px; padding: 20px clamp(18px,3vw,34px); display: flex; gap: 18px;
            flex-wrap: wrap; align-items: center; color: var(--m-text-dim); font-size: 13px; }
        .nl-footer a { color: var(--m-text-muted); text-decoration: none; }
        .nl-footer a:hover { color: var(--m-crimson); }

        /* Plain CSS, so a single @. This read "@@media" — Razor's escape for a literal
           at-sign, left behind when the shell's <style> block became a static file. The
           browser sees an unknown at-rule and drops the whole block, which is every
           responsive rule the shell has: the hamburger kept "display: none", the nav
           never became a drawer, and ".nl-nav.open" styled nothing. On a phone that
           left no menu button and the links themselves off the right-hand edge, so
           navigation was unreachable. One character. */
        @media (max-width: 900px) {
            .nl-hamburger { display: inline-flex; }
            .nl-nav { position: fixed; top: var(--nl-topnav-h); left: 0; right: 0; flex-direction: column; align-items: stretch;
                gap: 2px; background: var(--m-nav); border-bottom: 1px solid var(--m-border-strong); padding: 10px; display: none; }
            .nl-nav.open { display: flex; }
            .nl-nav a { clip-path: none; border-radius: 7px; padding: 12px 14px; }
            .nl-user-name { display: none; }
        }

/* Read-only preview lens: disable submits inside the preview wrapper. The server
   guard is the real mechanism; this makes the page tell the truth. */
                    .nl-previewing button[type=submit]:not(.nl-preview-ok),
                    .nl-previewing input[type=submit]:not(.nl-preview-ok),
                    .nl-previewing form:not(.nl-preview-ok) button:not([type=button]):not(.nl-preview-ok) {
                        opacity: .45;
                        cursor: not-allowed;
                        pointer-events: none;
                    }

/* Per-league banner and sub-navigation (_LeagueLayout). */
    .nl-league-banner { position:relative; border-radius:var(--m-radius-lg); overflow:hidden; padding:26px 28px; margin:0 0 4px; border:1px solid var(--m-border-strong); }
    .nl-league-banner::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(to right, #fff6, transparent 55%); }
    .nl-league-title { font-family:var(--font-display); font-weight:800; font-size:clamp(28px,5vw,48px); color:#fff; line-height:1; letter-spacing:.02em; text-shadow:0 2px 18px rgba(0,0,0,.5); }
    .nl-league-sub { font-family:var(--font-display); color:rgba(255,255,255,.8); font-size:14px; letter-spacing:.04em; margin-top:8px; }
    /* A themed (paid custom-page) league gets its own wallpaper behind the content; the
       cards keep their own surfaces, so a busy background shows through the gaps the
       MySpace way. Only the tagline needs a rule; the rest is inline token overrides. */
    .nl-league-theme { padding-bottom:28px; }
    .nl-league-tagline { font-family:var(--font-display); color:rgba(255,255,255,.92); font-size:14px; font-style:italic; letter-spacing:.02em; margin-top:6px; }
    .nl-community-badge { position:absolute; top:16px; right:16px; font-family:var(--font-display); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#fff; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.3); padding:4px 11px; border-radius:20px; }
    .nl-subnav { display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--m-border); margin:0 0 22px; padding-top:8px; }
    .nl-subnav-link { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.05em; font-size:13px; color:var(--m-text-muted); text-decoration:none; padding:10px 15px; border-bottom:2px solid transparent; transition:color .15s, border-color .15s; }
    .nl-subnav-link:hover { color:var(--m-text); }
    .nl-subnav-link.active { color:var(--m-orange); border-bottom-color:var(--m-orange); }