/* =====================================================================================
   nfbc-app.css: styles for the NEW page only (/app, Pages/NFBCAppPage.razor).
   Everything is under .nx-app, so the classic page (/ and /nfbc/...) is not affected.
   Colors: green first, then purple and blue, neon red/orange accents on a purple-leaning dark background.
   ===================================================================================== */
:root {
    --nx-green: #2ee59d;
    --nx-purple: #a678ff;
    --nx-blue: #3fb6ff;
    --nx-red: #ff3b6b;
    --nx-orange: #ff8a3d;
    --nx-bg: #110c20;
    --nx-panel: #1a1430;
    --nx-panel2: #211a3d;
    --nx-line: #2d2550;
    --nx-text: #ddd8f3;
    --nx-muted: #a49cc4;
}

/* Brand wordmark. IBM Plex Mono 600, latin subset, self-hosted (no CDN). */
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF;
}

body:has(.nx-app) {
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(166,120,255,0.13), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(46,229,157,0.08), transparent 60%),
        var(--nx-bg);
    /* Oct 7: was "fixed". A fixed background makes the browser repaint the whole gradient on every scroll frame. */
    background-attachment: scroll;
}
.nx-app .mud-layout { background: transparent; }

/* ---------- top bar ---------- */
.nx-app .nx-appbar {
    /* Oct 7: solid bar, no blur (the blur re-rendered everything behind the bar on every scroll). Was: backdrop-filter: blur(10px); */
    background: #110c20 !important;
    border-bottom: 1px solid var(--nx-line);
    box-shadow: 0 1px 0 rgba(166,120,255,0.15), 0 8px 30px rgba(0,0,0,0.35);
    padding: 0 12px 0 6px;
    gap: 6px;
}
.nx-app .nx-appbar::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, var(--nx-green), var(--nx-purple) 45%, var(--nx-blue) 75%, var(--nx-orange));
    opacity: .7;
}
.nx-app .nx-burger { color: var(--mud-palette-secondary); transition: transform .2s; } /* post-deploy (Stephen): the purple of the title (theme Secondary #a678ff). Was: color: var(--mud-palette-primary) */
.nx-app .nx-burger-closed { transform: scaleX(-1); }
.nx-app .nx-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-left: 2px; cursor: pointer; user-select: none; }
.nx-app .nx-brand-text {
    position: relative; display: inline-flex; align-items: baseline;
    /* 12ch word + 2ch prompt + 1ch cursor, reserved so the bar does not jump on click. */
    width: 15ch; white-space: nowrap; line-height: 1; vertical-align: middle;
    font-family: "IBM Plex Mono", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.45rem; font-weight: 600; letter-spacing: 0; font-variant-ligatures: none;
    /* Oct 7: the classic purple (#7e6fff, MainLayout.razor Primary). Was: color: var(--nx-purple); */
    color: #7e6fff;
}
.nx-app .nx-brand-run { display: inline-block; }
.nx-app .nx-brand-type { display: inline-block; width: 12ch; overflow: hidden; white-space: nowrap; }
.nx-app .nx-brand-prompt, .nx-app .nx-brand-caret {
    position: absolute; top: 0; opacity: 0; pointer-events: none; line-height: 1; font-weight: 600;
}
.nx-app .nx-brand-prompt { left: 0; width: 2ch; color: var(--nx-purple); white-space: pre; }
.nx-app .nx-brand-caret { left: 14ch; width: 1ch; color: #7e6fff; }
.nx-app .nx-brand-dot { opacity: .8; }
/* Click only. Prompt fades in, the word slides, then types for 1.6s. The caret trails each step,
   blinks twice after the o, then the word slides back and the prompt and caret fade. 2.8s total.
   The slide is on .nx-brand-run, not the clipping box: a transform on the overflow element drops the
   opacity:.8 ".io" layer in Chromium for the whole animation. */
.nx-app .nx-brand-text.is-typing .nx-brand-prompt { animation: nx-brand-prompt 2.8s linear forwards; }
.nx-app .nx-brand-text.is-typing .nx-brand-run { animation: nx-brand-slide 2.8s linear forwards; }
.nx-app .nx-brand-text.is-typing .nx-brand-type { animation: nx-brand-type 1.6s steps(12, end) .12s both; }
.nx-app .nx-brand-text.is-typing .nx-brand-caret {
    animation: nx-brand-caret-x 1.6s steps(12, end) .12s both, nx-brand-caret 2.8s linear forwards;
}
@keyframes nx-brand-prompt {
    0% { opacity: 0; }
    8% { opacity: .5; }
    86% { opacity: .5; }
    100% { opacity: 0; }
}
@keyframes nx-brand-slide {
    0% { transform: translateX(0); }
    8% { transform: translateX(2ch); }
    86% { transform: translateX(2ch); }
    100% { transform: translateX(0); }
}
@keyframes nx-brand-type { from { width: 0; } to { width: 12ch; } }
@keyframes nx-brand-caret-x { from { left: 2ch; } to { left: 14ch; } }
@keyframes nx-brand-caret {
    /* Hidden until the first glyph, solid while typing, two quick off/on blinks, then the fade. */
    0%, 9% { opacity: 0; }
    9.2%, 63% { opacity: 1; }
    63.2%, 68% { opacity: 0; }
    68.2%, 73% { opacity: 1; }
    73.2%, 78% { opacity: 0; }
    78.2%, 86% { opacity: 1; }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .nx-app .nx-brand-text.is-typing .nx-brand-prompt,
    .nx-app .nx-brand-text.is-typing .nx-brand-caret,
    .nx-app .nx-brand-text.is-typing .nx-brand-run,
    .nx-app .nx-brand-text.is-typing .nx-brand-type { animation: none; }
}
/* While the word types, keep the bar above the home spinner so the animation stays visible. */
.nx-app:has(.nx-brand-text.is-typing) .nx-appbar { z-index: 1600 !important; }
.nx-app .nx-contest { width: 380px; max-width: 46vw; }
.nx-app .nx-contest .mud-input-control { margin: 0; }
.nx-app .nx-contest .mud-input-outlined-border { border-color: #4a3f7a; }
.nx-app .nx-contest .mud-input { background: rgba(26,20,48,.75); border-radius: 8px; }

/* ---------- sidebar ---------- */
.nx-app .nx-drawer { border-right: 1px solid var(--nx-line); background: linear-gradient(180deg, #160f2b, #120c22) !important; }
.nx-app .nx-nav { padding: 12px 10px 24px; display: flex; flex-direction: column; gap: 6px; }
.nx-app .nx-nav-home, .nx-app .nx-item {
    display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none;
    padding: 7px 10px; border-radius: 8px; color: var(--nx-text); font-size: .86rem;
    border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.nx-app .nx-nav-home { font-weight: 600; letter-spacing: .3px; }
/* Idle icons, including Home. The green (or the row's accent) is only the active row. */
.nx-app .nx-nav-home .mud-icon-root,
.nx-app .nx-item .mud-icon-root { color: var(--nx-muted); transition: color .15s; }
.nx-app .nx-nav-home:hover, .nx-app .nx-item:hover { background: rgba(166,120,255,.10); }
.nx-app .nx-group { margin-top: 8px; }
.nx-app .nx-group-title {
    display: flex; align-items: center; gap: 8px; padding: 4px 10px 6px;
    font-size: .72rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--nx-muted);
}
.nx-app .nx-group .nx-item .mud-icon-root { color: var(--nx-muted); font-size: 1.1rem; }
.nx-app .nx-item.nx-sub { margin-left: 22px; font-size: .8rem; padding: 5px 10px; }
.nx-app .nx-item.nx-dim { opacity: .45; }
.nx-app .nx-nav-home.active { background: rgba(46,229,157,.12); border-color: rgba(46,229,157,.35); }
.nx-app .nx-nav-home.active .mud-icon-root { color: var(--nx-green); }

/* accent per group: the title icon, and the active item glow */
.nx-app .nx-acc-green  { --acc: var(--nx-green); }
.nx-app .nx-acc-purple { --acc: var(--nx-purple); }
.nx-app .nx-acc-blue   { --acc: var(--nx-blue); }
.nx-app .nx-acc-orange { --acc: var(--nx-orange); }
.nx-app .nx-group-title .mud-icon-root { color: var(--acc); }
.nx-app .nx-group.active .nx-group-title { color: var(--nx-text); }
.nx-app .nx-item.active {
    background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 22%, transparent), color-mix(in srgb, var(--acc) 5%, transparent));
    border-color: color-mix(in srgb, var(--acc) 45%, transparent);
    color: #fff; font-weight: 600;
    box-shadow: 0 0 14px color-mix(in srgb, var(--acc) 25%, transparent);
}
.nx-app .nx-item.active .mud-icon-root { color: var(--acc); }
.nx-app .nx-nav-foot { margin-top: 18px; padding: 10px; font-size: .74rem; color: var(--nx-muted); border-top: 1px dashed var(--nx-line); }
.nx-app .nx-nav-foot a { color: var(--nx-blue); }

/* ---------- main ---------- */
.nx-app .nx-main { padding: 76px 22px 40px; min-height: 100vh; }
.nx-app .nx-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; font-size: .9rem; color: #fff; } /* Phase 3 #1: white (was --nx-muted) */
.nx-app .nx-crumbs .mud-icon-root { font-size: 1.05rem; margin-right: 4px; vertical-align: -3px; color: var(--acc); }
.nx-app .nx-crumb { display: inline-flex; align-items: center; }
.nx-app .nx-crumb-strong { color: var(--nx-text); font-weight: 600; }
.nx-app .nx-sep { opacity: .5; }
/* Oct 9: one-line tool description under the breadcrumb (NavItem.Desc) */
.nx-app .nx-desc { margin: -6px 0 14px; max-width: 980px; font-size: .86rem; line-height: 1.45; color: #fff; } /* Phase 3 #1 */
.nx-app .nx-chip {
    padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .5px;
    color: #0c0818; background: linear-gradient(90deg, var(--nx-green), #62f0bd);
    box-shadow: 0 0 12px rgba(46,229,157,.35);
}
.nx-app .nx-content { min-width: 0; }

/* The views' own old icon menus (icon row + collapsible list) are replaced by the sidebar on this page */
/* (MudBlazor 9 renders MudStack as a plain "d-flex flex-column" div, so match that too.) */
.nx-app .nx-content .mud-stack:has(> .mud-collapse-container),
.nx-app .nx-content .d-flex.flex-column:has(> .mud-collapse-container) { display: none !important; }

/* panels a bit more "glass" */
.nx-app .nx-content .mud-paper, .nx-app .nx-content .mud-table, .nx-app .nx-content .mud-data-grid {
    border-radius: 10px;
}
.nx-app .nx-msg { border: 1px solid var(--nx-line); background: var(--nx-panel); }

/* ---------- home ---------- */
.nx-app .nx-hero {
    padding: 26px 26px 22px; border-radius: 16px; margin-bottom: 18px;
    background:
        radial-gradient(500px 200px at 90% 0%, rgba(63,182,255,.18), transparent 70%),
        radial-gradient(500px 220px at 0% 100%, rgba(46,229,157,.16), transparent 70%),
        linear-gradient(135deg, #1d1538, #160f2b);
    border: 1px solid var(--nx-line);
}
.nx-app .nx-hero-title {
    /* Oct 5: new tagline "phantasea.io, the future of roto" sits just under the top-bar "phantasea" title (1.45rem).
       Was: font-size: 2rem; letter-spacing: -1px; (for the old "NFBC data, live.") */
    font-size: 1.35rem; font-weight: 800; letter-spacing: -0.5px;
    background: linear-gradient(90deg, var(--nx-green), var(--nx-purple) 55%, var(--nx-orange));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nx-app .nx-hero-sub { color: var(--nx-muted); margin-top: 4px; }
.nx-app .nx-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; justify-content: inherit; }
.nx-app .nx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.nx-app .nx-card {
    padding: 16px; border-radius: 14px; background: var(--nx-panel); border: 1px solid var(--nx-line);
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.nx-app .nx-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--acc) 55%, transparent); box-shadow: 0 6px 24px color-mix(in srgb, var(--acc) 18%, transparent); }
.nx-app .nx-card-head { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--nx-text); font-size: 1.02rem; }
.nx-app .nx-card-icon { display: inline-flex; padding: 7px; border-radius: 10px; color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); }
.nx-app .nx-card-blurb { color: var(--nx-muted); font-size: .84rem; margin: 8px 0 10px; min-height: 2.4em; }
.nx-app .nx-card-links { display: flex; flex-wrap: wrap; gap: 6px; }
.nx-app .nx-link {
    cursor: pointer; font-size: .76rem; padding: 3px 9px; border-radius: 999px; color: var(--nx-text);
    border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); background: color-mix(in srgb, var(--acc) 8%, transparent);
}
.nx-app .nx-link:hover { background: color-mix(in srgb, var(--acc) 22%, transparent); color: #fff; }
.nx-app .nx-note { margin-top: 18px; color: var(--nx-muted); font-size: .86rem; display: flex; align-items: center; gap: 10px; }
.nx-app .nx-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--nx-orange); box-shadow: 0 0 0 0 rgba(255,138,61,.7); animation: nxpulse 1.6s infinite; }
@keyframes nxpulse { 70% { box-shadow: 0 0 0 10px rgba(255,138,61,0); } 100% { box-shadow: 0 0 0 0 rgba(255,138,61,0); } }

.nx-app .nx-empty { text-align: center; padding: 50px 20px; border: 1px dashed #3a3066; border-radius: 16px; background: rgba(26,20,48,.6); }
.nx-app .nx-empty .nx-quick { justify-content: center; }
.nx-app .nx-empty-title { font-size: 1.35rem; font-weight: 700; margin-top: 6px; color: var(--nx-text); }
.nx-app .nx-empty-sub { color: var(--nx-muted); margin-top: 4px; }

/* ---------- narrow screens ---------- */
@media (max-width: 959px) {
    .nx-app .nx-main { padding: 70px 10px 30px; }
}
@media (max-width: 600px) {
    .nx-app .nx-hide-xs { display: none !important; }
    /* Wordmark stays (mono, 15ch). The contest shrinks beside it instead of the title disappearing. */
    .nx-app .nx-brand { flex: 0 0 auto; }
    .nx-app .nx-contest { width: auto; flex: 1 1 auto; min-width: 0; max-width: none; margin-left: 8px; }
    .nx-app .nx-appbar > .mud-toolbar > .flex-grow-1, .nx-app .nx-appbar .mud-spacer, .nx-app .nx-appbar .flex-grow-1 { display: none; }
    .nx-app .nx-hero-title { font-size: 1.2rem; } /* was 1.5rem */
}

/* ---------- home spinner after clicking the "phantasea" title or the top-right icon (BrandHome) ---------- */
/* Same logo size and spin speed as the first-load splash screen (App.razor + .spinning-logo in app.css: 200px, 20s per turn),
   but the page still shows through the translucent background. Shown for 2.25s (HomeSpinMs in NFBCAppPage.razor.cs). */
.nx-app .nx-home-spin {
    position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center;
    background: rgba(17,12,32,.72); backdrop-filter: blur(2px);
    animation: nx-home-fade .35s ease-out;
}
.nx-app .nx-home-spin-logo { width: 200px; max-width: 400px; height: auto; }
@keyframes nx-home-fade { from { opacity: 0; } to { opacity: 1; } }

/* ===================== Oct 7 batch ===================== */
/* Greyed-out (preview only) tools in the sidebar: not clickable, "soon" tag. With preview mode on they get a "preview" tag. */
.nx-app .nx-item.nx-locked { opacity: .38; cursor: not-allowed; }
.nx-app .nx-item.nx-locked:hover { background: transparent; }
/* Same greyed soon row, on a section chip or a home link. The badge is the existing .nx-soon. */
.nx-app .phx-viewcard.nx-locked,
.nx-app .nx-link.nx-locked,
.nx-app .d335-open.nx-locked { opacity: .38; cursor: not-allowed; color: #fff; }
.nx-app .phx-viewcard.nx-locked:hover,
.nx-app .nx-link.nx-locked:hover,
.nx-app .d335-open.nx-locked:hover { background: transparent; color: #fff; }
.nx-app .d335-open.nx-locked::after { content: none; }
.nx-app .phx-viewcard.nx-locked .nx-soon,
.nx-app .nx-link.nx-locked .nx-soon { margin-left: 6px; }
/* preview336 sidebar only: same greyed rows, arrow cursor. The title tooltip stays. */
.nx-app .nx-nav-336 .nx-item.nx-locked,
.nx-app .nx-nav-336 .nx-item.nx-locked * { cursor: default; }
.nx-app .nx-soon {
    margin-left: auto; font-size: .62rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
    padding: 1px 6px; border-radius: 6px; border: 1px solid var(--nx-line); color: var(--nx-muted);
}
.nx-app .nx-soon.nx-soon-on { color: var(--nx-orange); border-color: rgba(255,138,61,.5); }
/* Oct 7: "NEW" tag on the new tools (list: NewViews in NFBCAppPage.razor.cs) */
.nx-app .nx-soon.nx-new { color: var(--nx-green); border-color: rgba(46,229,157,.55); background: rgba(46,229,157,.08); }
/* Tiny badge in the top bar while preview mode is on */
.nx-app .nx-preview-badge {
    margin-left: 10px; font-size: .62rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    padding: 2px 7px; border-radius: 6px; color: var(--nx-orange); border: 1px solid rgba(255,138,61,.55);
}
/* Home: a single short message. Oct 7 (Stephen): small and subtle, one compact line, no card. */
.nx-app .nx-home-msg {
    display: flex; align-items: center; gap: 6px; margin: 2px 0 10px; padding: 0;
    color: #fff; font-size: .85rem; /* Phase 3 #18: white (was --nx-muted) */
}
.nx-app .nx-home-msg b { color: var(--nx-text); }
/* Oct 7: NEW tag inside a home-card link (same tag as the sidebar, a bit smaller, not pushed right) */
.nx-app .nx-link .nx-link-new { margin-left: 5px; font-size: .55rem; padding: 0 4px; vertical-align: 1px; }
/* No contest picked inside a tool: the same slim line, chips left-aligned right under it */
.nx-app .nx-pick { margin: 2px 0 10px; }
.nx-app .nx-pick-msg { display: flex; align-items: center; gap: 6px; color: var(--nx-muted); font-size: .85rem; }
/* "Pick a contest" chips (OC 26', ME 26', ...) */
.nx-app .nx-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; margin-top: 8px; max-width: 720px; }
.nx-app .nx-contest-chip {
    font: inherit; font-size: .78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; cursor: pointer;
    color: var(--nx-text); background: var(--nx-panel2); border: 1px solid var(--nx-line); transition: border-color .15s, background .15s;
}
.nx-app .nx-contest-chip:hover { border-color: var(--nx-purple); background: rgba(166,120,255,.16); }

/* New tools (Components/NFBCViews/Insights) */
.ix-wrap { display: flex; flex-direction: column; gap: 12px; }
.ix-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.ix-controls > * { min-width: 170px; max-width: 320px; flex: 0 1 auto; }
.ix-caption { font-size: .82rem; color: var(--nx-muted, #a49cc4); line-height: 1.45; }
.ix-note { font-size: .82rem; line-height: 1.5; color: var(--nx-text, #ddd8f3); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--nx-line, #2d2550); background: var(--nx-panel, #1a1430); }
.ix-note b { color: #fff; }
.ix-preview { font-size: .78rem; color: var(--nx-orange, #ff8a3d); border: 1px dashed rgba(255,138,61,.5); border-radius: 8px; padding: 6px 10px; }
.ix-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.ix-stat { padding: 6px 10px; border-radius: 10px; background: var(--nx-panel2, #211a3d); border: 1px solid var(--nx-line, #2d2550); font-size: .8rem; color: var(--nx-muted, #a49cc4); }
.ix-stat b { color: var(--nx-text, #ddd8f3); font-size: .9rem; margin-left: 4px; }
.ix-stat.hl b { color: var(--nx-green, #2ee59d); }
.ix-chart { border: 1px solid var(--nx-line, #2d2550); border-radius: 12px; background: var(--nx-panel, #1a1430); padding: 8px; }
.ix-table-wrap { overflow: auto; max-height: 70vh; border: 1px solid var(--nx-line, #2d2550); border-radius: 12px; }
table.ix-table { width: 100%; border-collapse: collapse; font-size: .82rem; color: var(--nx-text, #ddd8f3); }
table.ix-table th { position: sticky; top: 0; z-index: 1; background: #1d1636; text-align: right; padding: 7px 10px; font-weight: 700; color: var(--nx-muted, #a49cc4); white-space: nowrap; border-bottom: 1px solid var(--nx-line, #2d2550); }
table.ix-table th.sortable { cursor: pointer; user-select: none; }
table.ix-table th.sortable:hover { color: #fff; }
table.ix-table th.sorted { color: var(--nx-green, #2ee59d); }
table.ix-table td { text-align: right; padding: 6px 10px; border-bottom: 1px solid rgba(45,37,80,.6); white-space: nowrap; }
table.ix-table th:first-child, table.ix-table td:first-child, table.ix-table td.l, table.ix-table th.l { text-align: left; }
table.ix-table tr:hover td { background: rgba(166,120,255,.07); }
table.ix-table td.good { color: var(--nx-green, #2ee59d); font-weight: 600; }
table.ix-table td.dim { color: var(--nx-muted, #a49cc4); }
table.ix-table td.bad { color: var(--nx-orange, #ff8a3d); font-weight: 600; } /* Oct 7: CLQ Detailed rank drop */
.ix-bar { display: inline-block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--nx-purple, #a678ff), var(--nx-green, #2ee59d)); vertical-align: middle; }
/* Browser-drawn hover box for the scatter charts (window.phxTeamTip in uiJS.js) */
.ptt.ptt-team { min-width: 210px; }
.ptt.ptt-team .ptt-row { display: flex; justify-content: space-between; gap: 14px; font-size: 12px; padding: 1px 0; }
.ptt.ptt-team .ptt-row span:first-child { color: #a49cc4; }

/* ===================== Oct 8: consistency pass (branch ui-consistency-pass) ===================== */
/* The older views now use the same compact control row as the new tools (.ix-controls): boxes side by side, left-aligned,
   fixed widths, instead of one full-width box per row. Only looks: same boxes, same values. */
.nx-app .ix-controls.ix-top { margin: 6px 0 14px; }
/* Slim "pick something first" hint under the control row (same as the new tools) */
.nx-app .ix-hint { margin: -4px 0 12px; }
.nx-app .ix-controls > .ix-w-l { flex: 0 0 320px; width: 320px; max-width: 100%; }  /* NFBC player */
.nx-app .ix-controls > .ix-w-m { flex: 0 0 240px; width: 240px; max-width: 100%; }  /* week */
.nx-app .ix-controls > .ix-w-s { flex: 0 0 190px; width: 190px; max-width: 100%; }  /* position / percentile */
.nx-app .ix-controls .mud-input-control { margin: 0; }

/* Info / "no data" boxes (MudAlert) in the older views: same quiet panel as .ix-note in the new tools, instead of the bright blue box */
.nx-app .nx-content .mud-alert.mud-alert-text-info,
.nx-app .nx-content .mud-alert.mud-alert-filled-info,
.nx-app .nx-content .mud-alert.mud-alert-outlined-info {
    background: var(--nx-panel); border: 1px solid var(--nx-line); border-radius: 10px; color: var(--nx-text);
    font-size: .85rem; line-height: 1.5; padding: 8px 12px;
}
.nx-app .nx-content .mud-alert.mud-alert-text-info .mud-alert-icon { color: var(--nx-blue); }
.nx-app .nx-content .mud-alert b { color: #fff; }

/* League pickers (Leagues Tool, Roto View, Roto Standings, Table View): small chips like the contest chips, instead of big
   filled buttons. The leagues of the picked NFBC player stay highlighted (was the pink "Secondary" button, now a purple chip). */
.nx-app .ix-league-picker { gap: 8px !important; }
.nx-app .ix-league-picker .mud-button-root {
    min-width: 0; padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; letter-spacing: .3px; box-shadow: none;
    color: var(--nx-text); background: var(--nx-panel2); border: 1px solid var(--nx-line); text-transform: none;
}
.nx-app .ix-league-picker .mud-button-root:hover { border-color: var(--nx-green); background: rgba(46,229,157,.12); }
.nx-app .ix-league-picker .mud-button-filled-secondary {
    color: #fff; background: rgba(166,120,255,.28); border-color: var(--nx-purple); box-shadow: 0 0 10px rgba(166,120,255,.35);
}
/* "Close League": a small button on the left instead of a full-width bar */
.nx-app .ix-close-league { width: auto !important; margin-bottom: 12px; text-transform: none; }

/* (Draft / Auction switch: left out of this pass, handled in the draft consolidation PR) */

/* The line break that sat under each view's old icon menu (hidden on this page) left a big empty gap: hide it too */
.nx-app .nx-content .mud-stack:has(> .mud-collapse-container) + br,
.nx-app .nx-content .d-flex.flex-column:has(> .mud-collapse-container) + br { display: none; }
/* Category Percentile charts: fill the row (they were drawn at 475% / 675% and ran off the right edge) */
.nx-app .ix-chart-fill > * { flex: 1 1 auto; min-width: 0; }
/* post-deploy: small About button at the top of home (replaces the top-bar info icon) */
.nx-app .nx-home-msg .nx-about-btn { margin-left: auto; text-transform: none; padding: 1px 12px; min-width: 0; font-size: .8rem; border-radius: 999px; }
.nx-app .nx-home-msg .nx-about-btn + .nx-about-btn { margin-left: 8px; }   /* Part B: All tools button sits right after About */

/* Phase 3 #7: Auction Allocation donuts, same size and aligned */
.phx-donuts { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 270px; }
.phx-donut { width: 260px; height: 320px; }
/* Phase 3 #2: My Teams > Draft Data view cards (instead of the tabs) */
.phx-viewcards { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 14px; }
.phx-viewcard { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left;
    min-width: 190px; padding: 9px 14px; border-radius: 10px; cursor: pointer; color: #fff; background: rgba(166,120,255,.06);
    border: 1px solid rgba(166,120,255,.30); font: inherit; transition: background .15s, border-color .15s; }
.phx-viewcard .mud-icon-root { grid-row: 1 / span 2; color: #a678ff; }
.phx-viewcard-t { font-weight: 700; font-size: .9rem; }
.phx-viewcard-c { font-size: .75rem; color: #cfc8e8; }
.phx-viewcard:hover { background: rgba(166,120,255,.14); }
.phx-viewcard.on { background: rgba(166,120,255,.22); border-color: #a678ff; box-shadow: 0 0 0 1px #a678ff inset; }

/* ===== Part B (Oct 13): New Tools (preview only): question + takeaways + tabs, question home, description pages ===== */
.nt-q { font-size: 1.15rem; font-weight: 700; color: var(--nx-text, #ece8fb); margin: 2px 0 10px; }
.nt-take { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.nt-take li { font-size: .88rem; color: var(--nx-text, #ddd8f3); padding: 7px 11px; border-radius: 9px; background: rgba(166,120,255,.10); border-left: 3px solid #a678ff; }
.nt-notice { font-size: .82rem; color: #ffd9a8; background: rgba(255,138,61,.10); border-left: 3px solid #ff8a3d; padding: 6px 10px; border-radius: 8px; margin: 0 0 12px; }
.nt-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; border-bottom: 1px solid #2d2550; padding-bottom: 8px; }
.nt-tab { background: transparent; border: 1px solid #3a3160; color: #c9c1e8; border-radius: 999px; padding: 5px 13px; font-size: .84rem; cursor: pointer; }
.nt-tab:hover { border-color: #a678ff; color: #fff; }
.nt-tab.on { background: #a678ff; border-color: #a678ff; color: #0c0818; font-weight: 700; }
.nt-btn { background: transparent; border: 1px solid #3a3160; color: #c9c1e8; border-radius: 8px; padding: 5px 12px; font-size: .84rem; cursor: pointer; }
.nt-btn:hover { border-color: #a678ff; color: #fff; }
.nt-btn-on { background: #a678ff; border-color: #a678ff; color: #0c0818; font-weight: 700; }
.nt-btn-on:hover { color: #0c0818; filter: brightness(1.08); }
.nt-btn-l { padding: 8px 18px; font-size: .95rem; }
.nt-link { background: none; border: 0; color: #a678ff; cursor: pointer; text-decoration: underline; font-size: .85rem; padding: 0; }
.nt-home { max-width: 1180px; }
.nt-hero { padding: 18px 20px; border-radius: 14px; background: linear-gradient(135deg, rgba(166,120,255,.18), rgba(63,182,255,.08)); border: 1px solid #2d2550; margin-bottom: 16px; }
.nt-hero-t { font-size: 1.6rem; font-weight: 800; color: #fff; letter-spacing: .3px; }
.nt-hero-s { color: #c9c1e8; margin-top: 4px; font-size: .95rem; }
.nt-hero-pick { color: #ffd9a8; margin-top: 8px; font-size: .85rem; }
.nt-qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.nt-qcard { border: 1px solid #2d2550; border-radius: 12px; padding: 14px; background: rgba(20,14,40,.6); display: flex; flex-direction: column; gap: 6px; }
.nt-qcard:hover { border-color: #a678ff; }
.nt-qcard-q { font-weight: 700; color: #fff; font-size: 1.02rem; }
.nt-qcard-b { color: #b3abd6; font-size: .85rem; flex: 1; }
.nt-qcard-a { display: flex; gap: 6px; margin-top: 4px; }
.nt-home-foot { margin-top: 14px; color: #8f87b3; font-size: .82rem; }
.nt-info { max-width: 1180px; }
.nt-info-sec { color: #a678ff; font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; }
.nt-info-h { margin: 2px 0 2px; color: #fff; font-size: 1.6rem; }
.nt-info-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.3fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .nt-info-grid { grid-template-columns: 1fr; } }
.nt-info-k { color: #a678ff; font-weight: 700; font-size: .85rem; margin-top: 8px; }
.nt-info p { color: #d6d0ef; font-size: .92rem; margin: 2px 0 6px; }
.nt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.nt-chip { border: 1px solid #3a3160; border-radius: 999px; padding: 2px 10px; font-size: .78rem; color: #c9c1e8; }
.nt-shot img { width: 100%; border-radius: 12px; border: 1px solid #2d2550; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
/* Part B item 7 (Oct 13): the old spinning logo is back as a brief spinner when going home in the WASM app (live).
   It reuses .nx-home-spin + .spinning-logo above; to remove it, set HomeSpinMs = 0 in Client/Roto/AppWasm.razor. */
/* Oct 14 (Stephen): back to the earlier splash look: 200px logo, 20s per turn (no quick override), shown 2.25s. */
/* Part B (Oct 13): Tools page (every live tool) */
.tp { max-width: 1180px; }
.tp-h { color: #fff; margin: 0 0 2px; font-size: 1.6rem; }
.tp-sub { color: #b3abd6; font-size: .92rem; margin-bottom: 14px; }
.tp-sec { margin: 0 0 18px; }
.tp-sec-h { color: #a678ff; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: .8rem; display: flex; align-items: center; gap: 6px; margin-bottom: 8px; border-bottom: 1px solid #2d2550; padding-bottom: 6px; }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.tp-card { border: 1px solid #2d2550; border-radius: 12px; padding: 12px 14px; background: rgba(20,14,40,.6); display: flex; flex-direction: column; gap: 6px; }
.tp-card:hover { border-color: #a678ff; }
.tp-name { color: #fff; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.tp-name .mud-icon-root { color: #a678ff; }
.tp-tag { margin-left: auto; font-size: .68rem; color: #c9b8ff; border: 1px solid #4a3d80; border-radius: 999px; padding: 1px 8px; font-weight: 600; }
.tp-desc { color: #cfc8ea; font-size: .86rem; flex: 1; }
.tp-open { align-self: flex-start; background: transparent; border: 1px solid #a678ff; color: #c9b8ff; border-radius: 8px; padding: 3px 12px; font-size: .82rem; cursor: pointer; }
.tp-open:hover { background: #a678ff; color: #0c0818; }
/* Oct 14 (Stephen): merged tools switch sections in a labeled box (like Draft Lab's "Teams" box) */
.nx-app .nt-section { margin: 4px 0 14px; padding-bottom: 10px; border-bottom: 1px solid #2d2550; align-items: center; }
.nx-app .nt-section-count { color: #9d93c7; font-size: .8rem; }
/* Oct 15: merged-tool section cards (same .phx-viewcard as Draft Data); a bit narrower so 8-11 sections fit, 2 per row on phones */
.nt-sections .phx-viewcard { min-width: 170px; }
@media (max-width: 600px) { .nt-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .nt-sections .phx-viewcard { min-width: 0; padding: 8px 10px; } }
/* Oct 15 mock (My Season only): compact glance tiles + Details toggle */
.nt-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 4px 0 8px; }
.nt-glance-tile { background: rgba(166,120,255,.08); border: 1px solid rgba(166,120,255,.30); border-radius: 10px; padding: 10px 14px; font-size: .9rem; font-weight: 600; color: #fff; }
.nt-details-btn { background: none; border: 0; color: #a678ff; cursor: pointer; font-size: .8rem; padding: 0 0 10px; }
.nt-details-btn:hover { text-decoration: underline; }
/* Oct 15: per-tool Dashboard (first section card): compact panels of existing views */
.nt-dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 14px; }
.nt-dash-panel { border: 1px solid rgba(166,120,255,.30); border-radius: 12px; background: rgba(166,120,255,.04); padding: 10px 12px; min-width: 0; }
.nt-dash-h { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 6px; }
.nt-dash-open { background: none; border: 0; color: #a678ff; cursor: pointer; font-size: .8rem; }
.nt-dash-note { font-size: .78rem; color: #cfc8e8; margin-bottom: 6px; } .nt-dash-note::before { content: "Why it matters: "; color: #a678ff; font-weight: 700; }
.nt-dash-body { max-height: 440px; overflow: hidden; position: relative; }
.nt-dash-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(transparent, #120d22); pointer-events: none; }
@media (max-width: 600px) { .nt-dash { grid-template-columns: 1fr; } .nt-dash-body { max-height: 360px; } }
/* Oct 15 (preview334): "All tools" expander under the merged tools */
.nx-alltools { display: flex; align-items: center; gap: 8px; margin: 10px 8px 4px; padding: 7px 10px; border-top: 1px solid #2d2550; color: #c9c1e8; cursor: pointer; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.nx-alltools:hover { color: #fff; }
.nx-app .nt-dash-h span, .nt-dash-h span { color: #fff; font-size: .95rem; }
.nt-dash-body .ix-note, .nt-dash-body .phx-viewcards { display: none; }   /* dashboard panels: no explainer text or nested view cards */

/* ===== Oct 15 preview335: command deck. New classes only, so preview334's .nt-dash is untouched. ===== */
.d335-q { margin: 0 0 12px; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; color: #fff; line-height: 1.2; }
.d335-pick { max-width: 380px; margin-bottom: 4px; }
.d335-empty { border: 1px solid rgba(166,120,255,.22); border-radius: 14px; background: rgba(166,120,255,.05); color: #cfc8e8; padding: 22px 18px; font-size: .95rem; }
.d335-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 2px 0 12px; }
.d335-kpi { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(166,120,255,.12), rgba(22,16,40,.55)); border: 1px solid rgba(166,120,255,.22); border-radius: 14px; padding: 12px 14px 11px; min-width: 0; }
.d335-kpi::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: #a678ff; opacity: .85; }
.d335-kpi.good::before { background: #2ee59d; }
.d335-kpi .v { font-variant-numeric: tabular-nums; font-size: 1.55rem; font-weight: 700; letter-spacing: -.03em; color: #fff; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d335-kpi.good .v { color: #2ee59d; }
.d335-kpi .l { margin-top: 5px; font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #a49cc4; }
.d335-kpi .h { margin-top: 2px; font-size: .75rem; color: #ddd8f3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d335-board { display: grid; gap: 12px; align-items: stretch; }
.d335-board.duo { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.d335-board.stack { grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); }
.d335-board.stack .hero { grid-row: span 2; }
.d335-board.quad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.d335-board.duo .d335-panel.wide, .d335-board.quad .d335-panel.wide { grid-column: 1 / -1; }
.d335-sparks { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.d335-spark { background: rgba(8, 6, 18, .45); border: 1px solid rgba(166,120,255,.16); border-radius: 12px; padding: 8px 10px 2px; min-width: 0; }
.d335-spark .t { font-variant-numeric: tabular-nums; font-size: 1.15rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: #fff; }
.d335-spark .n { margin-top: 2px; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #a49cc4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d335-board.solo { grid-template-columns: minmax(0, 1fr); }
.d335-panel { background: linear-gradient(180deg, rgba(32,24,58,.72), rgba(18,13,34,.92)); border: 1px solid rgba(166,120,255,.20); border-radius: 16px; padding: 12px 14px 14px; min-width: 0; transition: border-color .2s ease; }
.d335-panel:hover { border-color: rgba(166,120,255,.48); }
.d335-ph { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.d335-ph h3 { margin: 0; font-size: .95rem; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.d335-open { background: none; border: 0; color: #a678ff; cursor: pointer; font-size: .75rem; font-weight: 700; letter-spacing: .04em; padding: 0; text-transform: uppercase; }
.d335-open:hover { color: #fff; }
.d335-open::after { content: " ›"; }
.d335-cap { margin: 3px 0 10px; color: #a49cc4; font-size: .78rem; line-height: 1.35; }
.phx-apex { width: 100%; min-width: 0; }
.phx-apex .apexcharts-canvas, .phx-apex .apexcharts-svg { background: transparent; }
.phx-alloc { width: 100%; min-width: 680px; }
.phx-alloc .phx-apex { overflow: visible; }
.phx-alloc .apexcharts-legend-text { color: #ddd8f3 !important; }
.d335-roster { display: flex; flex-direction: column; gap: 6px; }
.d335-roster .slot { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 7px 10px; border-radius: 10px; background: rgba(8, 6, 18, .45); border: 1px solid rgba(166,120,255,.14); }
.d335-roster .k { font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.d335-roster .v { font-size: .84rem; font-weight: 650; color: #fff; line-height: 1.35; }
.d335-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.d335-chip { min-width: 72px; border: 1px solid #a678ff; border-radius: 12px; padding: 8px 10px 7px; background: rgba(166,120,255,.06); display: flex; flex-direction: column; gap: 2px; }
.d335-chip .r { color: #a49cc4; font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.d335-chip .p { color: #fff; font-size: .95rem; font-weight: 700; }
.phx-notes,
.ix-controls > .phx-notes,
.nx-app .ix-controls > .phx-notes { display: block; width: 100%; min-width: 100%; max-width: none; flex: 1 0 100%; align-self: stretch; }
.phx-notes > .d335-notes { width: 100%; max-width: none; }
.phx-notes-sec { margin: 0 0 6px; color: #a49cc4; font-size: .78rem; font-weight: 650; }
.d335-notes { border: 1px solid rgba(166,120,255,.22); border-radius: 12px; background: rgba(166,120,255,.045); margin: 0 0 12px; }
.d335-notes summary { cursor: pointer; list-style: none; padding: 8px 12px; display: flex; align-items: center; gap: 8px; color: #a678ff; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.d335-notes summary::-webkit-details-marker { display: none; }
.d335-notes summary::before { content: "▸"; font-size: .8rem; }
.d335-notes[open] summary::before { content: "▾"; }
.d335-notes summary em { margin-left: auto; font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; color: #a49cc4; font-size: .8rem; }
.d335-notes.has-caveat summary span::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: #ff8a3d; vertical-align: middle; }
.d335-notes .body { padding: 0 14px 12px; }
.d335-why { margin: 0 0 8px; color: #fff; font-size: .9rem; }
.d335-note-list { margin: 0 0 8px; padding: 0 0 0 16px; color: #cfc8e8; font-size: .86rem; }
.d335-note-list li { margin: 4px 0; }
@media (max-width: 900px) {
    .d335-kpis { grid-template-columns: 1fr 1fr; }
    .d335-board.duo, .d335-board.stack, .d335-board.quad { grid-template-columns: 1fr; }
    .d335-sparks { grid-template-columns: 1fr 1fr; }
    .d335-board.stack .hero { grid-row: auto; }
}

/* Oct 17 preview336: Roto standings board and the shared percentile boards. Live grids are untouched. */
.rsb { display: flex; flex-direction: column; gap: 8px; }
.rsb.embedded { gap: 6px; }
.nx-app .rsb .ix-controls.ix-top { margin: 0; }
.rsb .rsb-bar { align-items: center; }
.rsb .rsb-bar > .mud-switch { min-width: 0; max-width: none; flex: 0 0 auto; }
.rsb .rsb-compare { min-width: 180px; }
.rsb .rsb-order { min-width: 160px; }
.rsb-scroll { overflow-x: auto; overflow-y: hidden; }
.rsb-grid { display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 0; }
.rsb-card { position: relative; background: linear-gradient(180deg, rgba(32,24,58,.78), rgba(16,12,32,.94)); border: 1px solid rgba(166,120,255,.22); border-radius: 12px; min-width: 0; width: 100%; transition: border-color .2s ease; }
.rsb-card::before { content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 2px; border-radius: 2px; background: #a678ff; opacity: .85; }
.rsb-card.top::before { background: #2ee59d; }
.rsb-card:hover { border-color: rgba(166,120,255,.5); }
.rsb-line { display: flex; align-items: stretch; gap: 8px; height: 400px; width: max-content; min-width: max-content; box-sizing: border-box; padding: 4px 8px 6px 0; }
.rsb-id { position: sticky; left: 0; z-index: 2; flex: 0 0 168px; display: flex; gap: 6px; align-items: center; align-self: stretch; padding: 4px 8px 4px 8px; background: #161022; box-shadow: 10px 0 14px rgba(8,6,18,.45); }
.rsb-rank { flex: 0 0 auto; min-width: 32px; height: 32px; padding: 0 6px; display: grid; place-items: center; border-radius: 8px; background: rgba(166,120,255,.14); color: #fff; font-weight: 700; font-size: .86rem; font-variant-numeric: tabular-nums; }
.rsb-card.top .rsb-rank { background: rgba(46,229,157,.16); color: #2ee59d; }
.rsb-who { min-width: 0; }
.rsb-name { color: #fff; font-weight: 700; font-size: .9rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 118px; }
.rsb-sub { color: #a49cc4; font-size: .7rem; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 118px; }
.rsb-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; font-size: .72rem; color: #fff; font-variant-numeric: tabular-nums; }
.rsb-meta em { font-style: normal; color: #a49cc4; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .6rem; margin-right: 3px; }
.rsb-radars { display: flex; align-items: stretch; gap: 16px; flex: 0 0 auto; height: 100%; }
.rsb-faab { display: flex; flex-direction: column; align-items: stretch; align-self: stretch; flex: 0 0 320px; width: 320px; min-width: 320px; height: 100%; }
.rsb-faab .phx-apex { flex: 1 1 auto; min-height: 0; }
.rsb-chart { position: relative; flex: 0 0 336px; width: 336px; min-width: 336px; height: 100%; display: flex; flex-direction: column; align-items: stretch; overflow: visible; }
.rsb-chart .rsb-cap { position: static; text-align: center; line-height: 1.1; }
.rsb-spark { flex: 0 0 320px; width: 320px; min-width: 320px; height: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 0; overflow: visible; }
.rsb-cap { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #a49cc4; margin: 0 0 2px; white-space: nowrap; }
.rsb-spark .rsb-cap, .rsb-faab .rsb-cap, .rsb-moves > .rsb-cap { width: auto; text-align: center; }
.rsb-more { width: 100%; min-width: 0; padding: 0 10px 10px; }
.rsb-moves { flex: 0 0 280px; width: 280px; min-width: 280px; height: 100%; margin: 0; display: flex; flex-direction: column; align-items: stretch; }
.rsb-moves > .rsb-cap { margin-bottom: 4px; }
.rsb-empty { margin: 0; color: #a49cc4; font-size: .82rem; }
.rsb-moves-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid rgba(166,120,255,.2); border-radius: 10px; }
.rsb-moves-table { width: 100%; border-collapse: collapse; font-size: .78rem; color: #ddd8f3; }
.rsb-moves-table th { position: sticky; top: 0; z-index: 1; background: #1d1636; text-align: left; padding: 6px 8px; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: #a49cc4; font-weight: 700; }
.rsb-moves-table td { padding: 4px 8px; border-top: 1px solid rgba(45,37,80,.7); }
.rsb-moves-table td:first-child { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rsb-moves-table th.r, .rsb-moves-table td.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rsb-moves-table tr:hover td { background: rgba(166,120,255,.07); }
.rsb-weeks { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 8px; margin-top: 4px; }
.rsb-pager { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: #a49cc4; font-size: .82rem; }
.rsb-pager p { margin: 0; font-variant-numeric: tabular-nums; }
.rsb .rsb-pagesize { min-width: 88px; max-width: 120px; }
.rsb-pager-nav { display: flex; align-items: center; }
.pct { display: flex; flex-direction: column; gap: 12px; }
.pct-panel { background: linear-gradient(180deg, rgba(32,24,58,.72), rgba(18,13,34,.92)); border: 1px solid rgba(166,120,255,.20); border-radius: 16px; padding: 12px 14px 14px; min-width: 0; }
.pct-panel h3 { margin: 0; font-size: .95rem; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.pct-panel .cap { margin: 3px 0 10px; color: #a49cc4; font-size: .78rem; line-height: 1.35; }
.pct-switch { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.pct-switch button { background: rgba(8,6,18,.45); border: 1px solid rgba(166,120,255,.22); color: #ddd8f3; border-radius: 999px; padding: 4px 10px; font-size: .75rem; font-weight: 700; cursor: pointer; }
.pct-switch button.on { background: rgba(166,120,255,.22); border-color: #a678ff; color: #fff; }
.pct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.pct-chart h4 { margin: 0 0 2px; color: #fff; font-size: .82rem; font-weight: 700; }
.pct-scroll { overflow-x: auto; }
.pct-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; min-width: 760px; }
.pct-table.slim { min-width: 420px; }
.pct-table th { text-align: left; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: #a49cc4; font-weight: 700; padding: 0 6px; }
.pct-key { display: inline-flex; align-items: center; gap: 6px; }
.pct-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.pct-table td { padding: 0 4px; }
.pct-cat { color: #fff; font-weight: 700; font-size: .86rem; white-space: nowrap; }
.pct-cat em { display: block; font-style: normal; font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; color: #a49cc4; font-weight: 700; }
.pct-table tr.on .pct-cat { color: #2ee59d; }
.pct-cell { position: relative; display: block; height: 28px; border-radius: 8px; overflow: hidden; background: rgba(8,6,18,.55); border: 1px solid rgba(166,120,255,.12); }
.pct-cell .bar { position: absolute; left: 0; top: 0; bottom: 0; opacity: .55; }
.pct-cell .n { position: relative; z-index: 1; display: flex; align-items: center; height: 100%; padding: 0 8px; color: #fff; font-variant-numeric: tabular-nums; font-size: .8rem; font-weight: 650; }
@media (max-width: 800px) { .pct-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .rsb-weeks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
    .rsb-scroll { overflow-x: auto; overflow-y: hidden; }
    .rsb-more { min-width: 0; padding: 0 8px 8px; }
}
.ob > .phx-viewcards { flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin: 0 0 6px; padding-bottom: 2px; }
.ob > .phx-viewcards .phx-viewcard { min-width: max-content; flex: 0 0 auto; padding: 5px 10px; }
.ob > .phx-viewcards .phx-viewcard-t,
.ob > .phx-viewcards .phx-viewcard-c { white-space: nowrap; }
/* Desktop: every big tool's section row (.ob > .phx-viewcards: Standings, League, Rater, My Teams, FAAB Lab,
   Overall Breakdown, Draft/Auction Lab) wraps onto extra rows. Was My Teams only (.mt-shell, PR #54). Mobile keeps its layout. */
@media (min-width: 601px) {
    .ob > .phx-viewcards { flex-wrap: wrap; overflow-x: visible; }
    .ob > .phx-viewcards .phx-viewcard { flex: 0 1 auto; }
}
/* Standings dashboard stacks Notes, then each panel, each on its own row. */
.ob-dash { display: flex; flex-direction: column; gap: 12px; }
/* The shared Notes rule uses flex-basis 100% so a control strip wraps it. In these
   column layouts that basis is height, so keep the row only as tall as the dropdown. */
.ob > .phx-notes,
.ob-dash > .phx-notes,
.rsb > .phx-notes,
.ob .phx-notes { flex: 0 0 auto; min-width: 0; width: 100%; }

/* League dropdown in a controls row. Compact, same height as Compare. */
.nx-app .ix-controls > .lg-switch { flex: 0 0 200px; width: 200px; min-width: 160px; max-width: 220px; }
.rsb .rsb-bar > .lg-switch { flex: 0 0 200px; width: 200px; min-width: 160px; max-width: 220px; }

/* League View stats table: readable columns, scroll sideways, player column pinned. */
.lg-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; }
.lg-table-scroll .mud-table-container { overflow-x: auto !important; max-width: 100%; }
.lg-table-scroll table { width: max-content; min-width: 1680px; border-collapse: separate; }
.lg-table-scroll .mud-table-cell,
.lg-table-scroll th,
.lg-table-scroll td { white-space: nowrap; min-width: 108px; }
.lg-table-scroll .lg-pin,
.lg-table-scroll .mud-table-sticky-left,
.lg-table-scroll td:first-child,
.lg-table-scroll th:first-child {
    position: sticky; left: 0; z-index: 2; min-width: 220px; max-width: 280px;
    background: #161022; box-shadow: 8px 0 12px rgba(8,6,18,.35);
}
.lg-table-scroll thead .lg-pin,
.lg-table-scroll thead .mud-table-sticky-left,
.lg-table-scroll thead th:first-child { z-index: 4; background: #1c1630; }

/* preview336 Draft Boards: shared pick cards. The live rectangles stay MudAlerts. */
.phx-pick-host { display: block; }
.phx-pick { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; row-gap: 1px; align-items: center; min-width: 156px; max-width: 196px; padding: 6px 8px 6px 10px; border-radius: 8px; background: #120e1c; border: 1px solid rgba(255,255,255,.07); box-shadow: inset 3px 0 0 var(--phx-pos, #8d96ad); text-align: left; }
.phx-pick-pos { grid-row: 1 / span 2; font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: var(--phx-pos, #cfc8e8); font-variant-numeric: tabular-nums; }
.phx-pick-name { color: #f7f4ff; font-size: .8rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phx-pick-sub { color: #a49cc4; font-size: .68rem; font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phx-pick-tip { background: #161022 !important; color: #f4f1fb; border: 1px solid rgba(166,120,255,.4); border-radius: 10px; box-shadow: 0 12px 28px rgba(0,0,0,.5); padding: 8px 10px 9px; }
.phx-pick-detail { min-width: 180px; max-width: 260px; }
.phx-pick-detail strong { display: block; color: #fff; font-size: .86rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.phx-pick-detail .pos { margin: 1px 0 6px; color: var(--phx-pos, #cfc8e8); font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.phx-pick-detail dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; font-size: .75rem; }
.phx-pick-detail dt { color: #a49cc4; font-weight: 650; }
.phx-pick-detail dd { margin: 0; color: #f4f1fb; font-variant-numeric: tabular-nums; }

/* Oct 17: CLQ Standings grid (ClqRotoTable), tight again. Dense team block, fixed-size radars. */
.clq-team { border-collapse: collapse; font-size: .8rem; white-space: nowrap; }
.clq-team td { padding: 1px 10px 1px 0; color: #a49cc4; border: 0; }
.clq-team td + td { color: #fff; text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
.clq-team .clq-team-name { color: #fff; font-weight: 700; font-size: .9rem; padding-bottom: 4px; text-align: left; }
.clq-radar { width: 340px; min-width: 340px; max-width: 340px; display: flex; justify-content: center; }
/* My Teams > Movement: Weekly wraps the same radar box. Tri-week and Quarterly give each pair its own column so the percent width cannot collapse. */
.mv-radar-wrap { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; width: min(1080px, calc(100vw - 64px)); }
.mv-radar-col { width: 352px; min-width: 352px; max-width: 352px; vertical-align: middle; }
@media (max-width: 720px) { .mv-radar-wrap { width: min(1080px, calc(100vw - 28px)); } }
/* Team Info uses width:1px so the column shrinks to the nowrap table. Percent widths collapse under Container mode. */
.clq-grid .clq-team { width: max-content; }

/* High Stakes leagues and Tommy John. Same dark ground and purple accent as the other big tools. */
.hs-league { margin: 0 0 16px; padding: 12px 14px; border: 1px solid rgba(166,120,255,.22); border-radius: 12px; background: linear-gradient(180deg, rgba(32,24,58,.78), rgba(16,12,32,.94)); }
.hs-feature { border-color: rgba(166,120,255,.55); }
.hs-league-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.hs-league-h h2 { margin: 0; font-size: 1.05rem; color: #f4f1fb; }
.hs-open { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; padding: 0; }
.hs-open:hover h2 { color: #a678ff; }
.hs-tag { color: #cfc8e8; font-size: .75rem; }
.hs-wait { margin: 0 0 8px; color: #cfc8e8; }
.hs-sub { margin: 16px 0 8px; color: #f4f1fb; font-size: 1rem; }
.hs-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.hs-table th { text-align: left; color: #cfc8e8; font-weight: 650; padding: 4px 8px; border-bottom: 1px solid rgba(166,120,255,.28); }
.hs-table td { padding: 4px 8px; color: #f4f1fb; border-bottom: 1px solid rgba(166,120,255,.12); }
.hs-table tr.hs-win td { background: rgba(46,229,157,.12); }
.hs-table tr.hs-cash td { background: rgba(166,120,255,.16); }
.hs-notes { margin: 0; padding-left: 18px; color: #f4f1fb; }
.hs-notes li { margin: 4px 0; }