/* =====================================================================================
   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; }
/* Was: .roto-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 8px; width: 100%; }
   .roto-scope-note { margin: 0; color: #fff; font-size: .92rem; font-weight: 650; flex: 1 1 280px; }
   .roto-scope-pick { min-width: 240px; flex: 0 1 360px; }
   The menu is its own row with the Showing line and Show all teams, not a sibling of Compare radar to.
   The pick and the button keep their columns when the button hides, so the menu does not jump right. */
.roto-scope { display: grid; grid-template-columns: minmax(0, 1fr) calc(36ch + 3.5rem) 11rem; align-items: center; column-gap: 12px; row-gap: 8px; margin: 0 0 16px; width: 100%; max-width: none; min-width: 0; }
.ix-controls > .roto-scope,
.nx-app .ix-controls > .roto-scope { display: grid; width: 100%; min-width: 100%; max-width: none; flex: 1 0 100%; align-self: stretch; }
.roto-scope-note { margin: 0; color: #fff; font-size: .92rem; font-weight: 650; min-width: 0; }
.roto-scope-pick { width: 100%; min-width: 0; max-width: none; flex: none; }
.roto-scope-pick .mud-input-slot,
.roto-scope-pick input.mud-input-root { text-overflow: clip; overflow: hidden; white-space: nowrap; }
.roto-scope-all { width: 11rem; min-width: 0; display: flex; align-items: center; justify-content: flex-end; }
.roto-scope-all-hide { visibility: hidden; pointer-events: none; }
.roto-lazy { position: relative; }
.roto-lazy > .roto-chart-skel { position: absolute; inset: 0; border-radius: 10px; background: rgba(166, 120, 255, .08); border: 1px solid rgba(166, 120, 255, .14); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
    .roto-lazy > .roto-chart-skel { animation: roto-chart-skel 1.8s ease-in-out infinite; }
}
@keyframes roto-chart-skel {
    50% { background: rgba(166, 120, 255, .16); }
}
.roto-lazy:has(.apexcharts-canvas) > .roto-chart-skel,
.roto-lazy:has(.apexcharts-svg) > .roto-chart-skel { display: none; }
@media (max-width: 720px) {
    .roto-scope { grid-template-columns: minmax(0, 1fr); }
    .roto-scope-pick { width: 100%; min-width: 0; }
    .roto-scope-all:has(.roto-scope-all-hide) { display: none; }
}
.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; }

/* Opt-in light surface for a second-theme check. The live shell never adds this class. */
html.phx-light {
    --nx-bg: #f6f3fb;
    --nx-panel: #ffffff;
    --nx-panel2: #f3eefc;
    --nx-line: #d9d0ea;
    --nx-text: #241b3a;
    --nx-muted: #5c5474;
    --mud-palette-background: #f6f3fb;
    --mud-palette-surface: #ffffff;
    --mud-palette-drawer-background: #ffffff;
    --mud-palette-appbar-background: #ffffff;
    --mud-palette-text-primary: #241b3a;
    --mud-palette-text-secondary: #5c5474;
    color-scheme: light;
}

/* Oct 29: new home (HomeV2Wasm) and the Roto Oso Podcast page (PodcastContent). preview341 only until their Preview341Release flags flip. */
.hv2 { display: flex; flex-direction: column; min-width: 0; }
.hv2-card { background: var(--nx-panel); border: 1px solid var(--nx-line); border-radius: 10px; min-width: 0; box-sizing: border-box; }
.hv2-eyebrow { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--nx-green); font-weight: 700; }
/* Oct 30 (Stephen): featured headline smaller, about section-heading size, scales with clamp(). Was:
.hv2-h1 { font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: #f4f1fb; margin: 10px 0 0; }
*/
/* Oct 30 (Stephen, 0015): featured headline = the Latest card titles' type (shared rule below). Was (0013):
.hv2-h1 { font-size: clamp(.86rem, .55vw + .62rem, 1.1rem); font-weight: 700; line-height: 1.25; color: #f4f1fb; margin: 10px 0 0; }
*/
.hv2-h1 { color: #f4f1fb; margin: 10px 0 0; }
.hv2-h2 { font-size: 1.05rem; font-weight: 700; color: #f4f1fb; }
.hv2-copy { color: var(--nx-muted); margin: 12px 0 0; font-size: .9rem; line-height: 1.45; }
.hv2-fine { font-size: .7rem; color: var(--nx-muted); }
.hv2-sec { margin: 28px 0 12px; }
.hv2-sec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hv2-hero { display: flex; gap: 32px; padding: 24px 26px; background: linear-gradient(135deg, #1d1636, var(--nx-panel) 60%); }
.hv2-hero-text { flex: 0 0 330px; display: flex; flex-direction: column; min-width: 0; }
.hv2-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.hv2-actions .pod-btn { padding: 7px 12px; }
.hv2-mm { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
/* The featured map: the tool's vertical layout, sized to the card. No inner scroll, no empty detail box. */
.hv2-mm .p339-map { max-height: none; overflow: visible; padding-bottom: 0; }
.hv2-mm .p339-path.is-empty { display: none; }
/* Oct 30 (Stephen): the featured map is display only (DraftMindTree Static): plain boxes, no pointer cursor. */
.hv2-mm .p339-featured .p339-node { cursor: default; }
.hv2-mm .p339-map.p339-vert { gap: 10px; }
.hv2-mm .p339-map.p339-vert .p339-phases { gap: 12px; }
.hv2-mm .p339-map.p339-vert .p339-phase > .p339-node { flex: 0 0 120px; width: 120px; min-width: 0; max-width: 120px; font-size: .85rem; padding: 7px 9px; }
.hv2-mm .p339-map.p339-vert .p339-poswrap { flex-wrap: nowrap; gap: 8px; }
.hv2-mm .p339-map.p339-vert .p339-pos { flex: 1 1 0; width: auto; min-width: 0; max-width: 170px; gap: 5px; }
.hv2-mm .p339-map.p339-vert .p339-node,
.hv2-mm .p339-map.p339-vert .p339-pos > .p339-node,
.hv2-mm .p339-map.p339-vert .p339-leaf { font-size: .82rem; padding: 6px 9px; border-radius: 8px; }
.hv2-mm .p339-map.p339-vert .p339-meta,
.hv2-mm .p339-map.p339-vert .p339-leaf .p339-meta { font-size: .7rem; }
.hv2-mm .p339-map.p339-vert .p339-leaf b { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv2-mm .wk-legend { order: 2; margin-top: 4px; }
.hv2-mm .p339-board { order: 1; }
.hv2-latest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding: 18px 20px; }
.hv2-li { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.hv2-li-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.hv2-ico { width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: color-mix(in srgb, var(--hv2-acc, var(--nx-purple)) 16%, transparent); color: var(--hv2-acc, var(--nx-purple)); }
.hv2-acc-green { --hv2-acc: var(--nx-green); }
.hv2-acc-purple { --hv2-acc: var(--nx-purple); }
.hv2-acc-blue { --hv2-acc: var(--nx-blue); }
.hv2-acc-orange { --hv2-acc: var(--nx-orange); }
.hv2-kicker { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--hv2-acc, var(--nx-purple)); }
.hv2-li-title { background: none; border: 0; padding: 0; margin: 2px 0 0; font: inherit; font-weight: 700; color: #f4f1fb; text-align: left; cursor: pointer; line-height: 1.3; }
.hv2-li-title:hover { text-decoration: underline; }
.hv2-li-title.hv2-static { cursor: default; }
.hv2-li-title.hv2-static:hover { text-decoration: none; }
/* Oct 30 (Stephen): one type style for the Latest card titles and the featured headline, so they stay in sync.
   .hv2-li-title already has font: inherit / 700 / 1.3; the h1 picks up the same (inherit, not the browser's 2em h1). */
.hv2-li-title, .hv2 .hv2-h1 { font-size: inherit; font-weight: 700; line-height: 1.3; }
.hv2-li-sub { font-size: .75rem; color: var(--nx-muted); margin-top: 3px; }
.hv2-note { font-size: .75rem; color: #c9b8ff; font-style: italic; margin: 6px 0 8px; }
.hv2-link { background: none; border: 0; padding: 0; margin-top: 8px; font: inherit; font-size: .8rem; font-weight: 700; color: var(--nx-green); cursor: pointer; }
.hv2-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hv2-tool { display: flex; flex-direction: column; align-items: stretch; text-align: left; padding: 16px; font: inherit; color: var(--nx-text); cursor: pointer; transition: border-color .15s; }
.hv2-tool:hover, .hv2-tool:focus-visible { border-color: var(--hv2-acc, var(--nx-purple)); outline: none; }
.hv2-tool-head { display: flex; gap: 12px; align-items: center; }
.hv2-tool-name { display: block; font-weight: 700; font-size: .98rem; color: #f4f1fb; }
.hv2-tool-where { display: block; font-size: .7rem; color: var(--nx-muted); }
.hv2-tool-blurb { display: block; font-size: .78rem; color: var(--nx-muted); margin-top: 9px; min-height: 36px; line-height: 1.4; }
/* Oct 31 (Stephen): extra description lines on a highlight card. Same type as the blurb, each on its own line. */
.hv2-tool-line { display: block; margin-top: 4px; }
.hv2-prev { display: block; height: 70px; margin-top: 12px; border-radius: 6px; background: var(--nx-bg); border: 1px solid var(--nx-panel2); overflow: hidden; }
.hv2-prev-svg { display: block; width: 100%; height: 100%; }
.pod-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pod-links-sm { margin-top: 0; gap: 6px; }
.pod-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: .82rem; font-weight: 700; padding: 7px 14px; border-radius: 999px; border: 1px solid #3a3160; color: var(--nx-text); text-decoration: none; background: transparent; }
.pod-btn:hover { border-color: var(--nx-purple); }
.pod-btn-main { background: var(--nx-purple); border-color: var(--nx-purple); color: #0c0818; }
.pod-btn-main:hover { filter: brightness(1.08); }
.pod-links-sm .pod-btn { font-size: .72rem; padding: 3px 10px; font-weight: 600; }
.pod-links-sm .pod-btn .mud-icon-root { font-size: .95rem; }
.pod-page { display: flex; flex-direction: column; gap: 18px; max-width: 920px; min-width: 0; }
.pod-banner { border: 1px solid color-mix(in srgb, var(--nx-purple) 55%, transparent); background: color-mix(in srgb, var(--nx-purple) 12%, var(--nx-panel)); color: #f4f1fb; border-radius: 10px; padding: 12px 16px; font-weight: 600; }
.pod-head { display: flex; gap: 22px; align-items: center; background: var(--nx-panel); border: 1px solid var(--nx-line); border-radius: 10px; padding: 20px; min-width: 0; }
.pod-cover { width: 132px; height: 132px; flex: none; border-radius: 12px; background: var(--nx-bg); border: 1px solid var(--nx-line); object-fit: contain; padding: 10px; box-sizing: border-box; }
.pod-head-text { min-width: 0; }
.pod-title { font-size: 1.6rem; font-weight: 700; color: #f4f1fb; margin: 6px 0 0; line-height: 1.2; }
.pod-sub { color: var(--nx-muted); font-size: .9rem; margin-top: 6px; }
.pod-eps-title { margin-top: 6px; }
.pod-eps { display: flex; flex-direction: column; gap: 10px; }
.pod-ep { display: flex; gap: 14px; background: var(--nx-panel); border: 1px solid var(--nx-line); border-radius: 10px; padding: 14px 16px; min-width: 0; }
.pod-ep-num { flex: 0 0 44px; font-weight: 700; color: var(--nx-purple); font-size: .85rem; padding-top: 2px; }
.pod-ep-body { min-width: 0; }
.pod-ep-title { font-weight: 700; color: #f4f1fb; }
.pod-ep-meta { font-size: .75rem; color: var(--nx-muted); margin-top: 2px; }
.pod-ep-sum { font-size: .85rem; color: var(--nx-text); margin-top: 6px; line-height: 1.45; }
/* Oct 30 (Stephen): All Tools = the earlier home's cards (Home336Wasm, nx-card / nx-link), compact. 3 columns desktop, 1 phone. */
.nx-app .nx-cards.nx-cards-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nx-app .nx-cards-compact .nx-card { padding: 10px 12px; border-radius: 10px; }
.nx-app .nx-cards-compact .nx-card:hover { transform: none; }
/* Oct 31 (Stephen): All Tools names are the normal text colour. The icon keeps the accent (.nx-card-icon). Greyed soon rows stay muted on the rule below. Was:
.nx-app .nx-cards-compact .nx-card-head { font-size: .9rem; gap: 8px; margin-bottom: 8px; color: var(--acc); }
*/
.nx-app .nx-cards-compact .nx-card-head { font-size: .9rem; gap: 8px; margin-bottom: 8px; color: var(--nx-text); }
.nx-app .nx-cards-compact .nx-card-icon { padding: 5px; border-radius: 8px; }
.nx-app .nx-cards-compact .nx-card-icon .mud-icon-root { font-size: 1.1rem; }
.nx-app .nx-cards-compact .nx-card-links { gap: 5px; }
.nx-app .nx-cards-compact .nx-link { font-size: .72rem; padding: 2px 8px; }
.nx-app .nx-cards-compact .nx-card-off { opacity: .45; }
.nx-app .nx-cards-compact .nx-card-off .nx-card-head { margin-bottom: 0; color: var(--nx-muted); }
.nx-app .nx-cards-compact .nx-card-off:hover { border-color: var(--nx-line); box-shadow: none; }
@media (max-width: 1100px) { .nx-app .nx-cards.nx-cards-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .nx-app .nx-cards.nx-cards-compact { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
/* Oct 30 (Stephen): short mission at the top of the home, then Latest, then the featured hero. */
.hv2-mission { padding: 14px 20px; background: linear-gradient(135deg, #1d1636, var(--nx-panel) 60%); }
.hv2-mission-text { margin: 0; color: var(--nx-muted); font-size: .9rem; line-height: 1.45; }
.hv2-mission-lead { color: #f4f1fb; font-size: 1.02rem; font-weight: 700; }
.hv2-mission-tag { margin-top: 4px; font-size: .78rem; font-style: italic; color: #c9b8ff; }
.hv2-sec.hv2-sec-latest { margin-top: 22px; }
/* Oct 30 (Stephen): mission restyle. Left-aligned (not centred), text 720px wide at most, lead line on its own, thin brand bar above it.
   First try was centred: .hv2-mission { text-align: center; } .hv2-mission-in { margin: 0 auto; } and the bar at margin: 0 auto 12px. */
.hv2-mission { padding: 20px 24px 18px; text-align: left; }
.hv2-mission-in { max-width: 720px; margin: 0; }
/* Oct 30 (Stephen): accent bar removed, brand icon on the left instead. Was:
.hv2-mission-in::before { content: ""; display: block; width: 56px; height: 3px; margin: 0 0 12px; border-radius: 3px; background: linear-gradient(90deg, var(--nx-purple), var(--nx-green)); }
*/
/* Oct 30 (Stephen): icon in a square tile that scales 44-64px with the width. Was:
.hv2-mission-row { display: flex; align-items: flex-start; gap: 18px; max-width: 720px; }
.hv2-mission-icon { flex: 0 0 64px; width: 64px; height: 64px; object-fit: contain; margin-top: 2px; }
*/
/* Oct 31 (Stephen): the mission lines stack. The row was for an icon beside the text. Was:
.hv2-mission-row { display: flex; align-items: center; gap: clamp(12px, 1.2vw + 7px, 18px); max-width: 720px; }
*/
.hv2-mission-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0; max-width: 46rem; }
/* Oct 30 (Stephen): no inner tile; the icon itself fills the square slot (small 5% buffer), slot 48-68px. Was:
.hv2-mission-tile { flex: 0 0 auto; position: relative; width: clamp(44px, 2.4vw + 30px, 64px); aspect-ratio: 1 / 1; display: grid; place-items: center;
    box-sizing: border-box; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--nx-purple) 35%, transparent);
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--nx-purple) 16%, transparent), transparent 70%), color-mix(in srgb, var(--nx-panel) 85%, #000); }
(note) First try used padding: 12% on the tile; % padding follows the row width, so the tile grew. The icon now insets 12% inside the square.
.hv2-mission-tile .hv2-mission-icon { position: absolute; inset: 12%; display: block; width: 76%; height: 76%; object-fit: contain; }
*/
/* Oct 30 (Stephen): the slot reads as a visible square (light card-style frame), never stretched, 56-80px. Was (0014):
.hv2-mission-tile { flex: 0 0 auto; position: relative; width: clamp(48px, 2.4vw + 34px, 68px); aspect-ratio: 1 / 1; box-sizing: border-box; }
.hv2-mission-tile .hv2-mission-icon { position: absolute; inset: 5%; display: block; width: 90%; height: 90%; object-fit: contain; }
*/
/* Oct 30 (Stephen, 0016): replaced by the podcast cover treatment (.pod-cover) below. Was (0015):
.hv2-mission-tile { --hv2-tile: clamp(56px, 4.4vw + 23px, 80px); flex: 0 0 auto; align-self: center; position: relative;
    width: var(--hv2-tile); height: var(--hv2-tile); min-height: 0; max-height: var(--hv2-tile); aspect-ratio: 1 / 1; box-sizing: border-box;
    border: 1px solid var(--nx-line); border-radius: 10px; background: color-mix(in srgb, var(--nx-purple) 7%, var(--nx-panel)); }
.hv2-mission-tile .hv2-mission-icon { position: absolute; inset: 4.5%; display: block; width: 91%; height: 91%; object-fit: contain; }
*/
/* Oct 30 (Stephen, 0016): the mission icon IS the podcast page cover (.pod-cover: same image, radius, border, background, padding,
   object-fit), scaled from 132px to 64-96px. Padding keeps the cover's ratio (10px at 132px). */
/* Oct 30 (Stephen, 0017): no icon in the mission block any more. Was:
.pod-cover.hv2-mission-icon { --hv2-cover: clamp(64px, 3.1vw + 52px, 96px); width: var(--hv2-cover); height: var(--hv2-cover);
    padding: calc(var(--hv2-cover) * 10 / 132); align-self: center; }
*/
.hv2-mission-row .hv2-mission-in { flex: 1 1 auto; min-width: 0; max-width: none; }
/* Oct 31 (Stephen): first sentence is bold and a step larger than the paragraph, smaller than the old 1.35rem headline. Was:
.hv2-mission .hv2-mission-lead { display: block; font-size: 1.35rem; line-height: 1.25; }
*/
.hv2-mission .hv2-mission-lead { display: block; font-size: 1.16rem; line-height: 1.3; font-weight: 700; margin-bottom: 6px; }
/* Oct 31 (Stephen): the mission is one paragraph, easy to read, not a headline plus a cramped line. Was:
.hv2-mission .hv2-mission-text { margin: 6px 0 0; font-size: .95rem; line-height: 1.5; color: var(--nx-text); opacity: .85; }
*/
.hv2-mission .hv2-mission-text { margin: 0; max-width: 46rem; font-size: 1.02rem; line-height: 1.55; color: var(--nx-text); }
/* Oct 31 (Stephen): tagline and name, same relationship as About (italic line, then Stephen | Stevoswerve). Was: .hv2-mission .hv2-mission-tag { margin-top: 8px; } */
.hv2-mission .hv2-mission-tag { margin: 14px 0 0; font-size: 1.02rem; line-height: 1.45; font-style: italic; color: var(--nx-text); }
.hv2-mission .hv2-mission-by { margin: 8px 0 0; font-size: 1.02rem; line-height: 1.45; color: var(--nx-text); }
.hv2-subline { margin-top: 6px; font-size: .82rem; font-style: italic; color: #c9b8ff; }   /* Oct 30: featured note under the headline */
.hv2-hero.hv2-hero-after { margin-top: 28px; }
@media (max-width: 600px) {
    /* Oct 30: was padding 10px 12px; lead .88rem inline with the text. Phones: left-aligned, lead on its own line. */
    .hv2-mission { padding: 12px 14px; text-align: left; }
    /* Oct 30: accent bar removed. Was: .hv2-mission-in::before { margin: 0 0 8px; width: 40px; } */
    /* Oct 30: the tile now scales with clamp() above. Was:
    .hv2-mission-row { gap: 12px; }
    .hv2-mission-icon { flex-basis: 44px; width: 44px; height: 44px; margin-top: 0; } */
    /* Oct 30: no tile frame any more. Was: .hv2-mission-tile { border-radius: 11px; } */
    /* Oct 31: a smaller step on a phone than the old 1.02rem lead. Was: .hv2-mission .hv2-mission-lead { font-size: 1.02rem; } */
    .hv2-mission .hv2-mission-lead { font-size: 1rem; }
    /* Oct 31: the paragraph stays visible on a phone. Was: .hv2-mission .hv2-mission-text { margin-top: 3px; font-size: .8rem; line-height: 1.4; } */
    .hv2-mission .hv2-mission-text { margin: 0; font-size: .92rem; line-height: 1.5; }
    /* Oct 31: tagline and name stay body-sized on a phone. Was: .hv2-mission .hv2-mission-tag { font-size: .72rem; margin-top: 4px; } */
    .hv2-mission .hv2-mission-tag, .hv2-mission .hv2-mission-by { font-size: .92rem; }
    .hv2-sec.hv2-sec-latest { margin-top: 16px; }
    .hv2-subline { margin-top: 3px; font-size: .74rem; }
    .hv2-hero.hv2-hero-after { margin-top: 20px; }
}
@media (max-width: 1100px) {
    .hv2-hero { flex-direction: column; gap: 18px; }
    .hv2-hero-text { flex-basis: auto; }
}
@media (max-width: 900px) {
    .hv2-latest, .hv2-tools { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .hv2-hero { padding: 18px 14px; }
    /* Oct 30: .hv2-h1 now sized by clamp() above. Was: .hv2-h1, .pod-title { font-size: 1.35rem; } */
    .pod-title { font-size: 1.35rem; }
    .hv2-mm .p339-map.p339-vert .p339-phase { flex-direction: column; gap: 6px; }
    .hv2-mm .p339-map.p339-vert .p339-phase > .p339-node { flex-basis: auto; width: 100%; max-width: none; }
    .hv2-mm .p339-map.p339-vert .p339-poswrap { flex-wrap: wrap; width: 100%; }
    .hv2-mm .p339-map.p339-vert .p339-pos { flex: 0 1 calc(50% - 4px); max-width: none; }
    .pod-head { flex-direction: column; align-items: flex-start; padding: 16px; }
    .pod-cover { width: 96px; height: 96px; }
    .pod-ep { padding: 12px; gap: 10px; }
    .pod-ep-num { flex-basis: 36px; }
}
/* Oct 30 (Stephen): compact featured Mind Map hero on phones, so Latest comes up fast. Same DraftMindMapWasm/DraftMindTree
   markup, restyled here only under .hv2-mm. All 10 picks and "Open the full Mind Map" stay; desktop is unchanged. */
@media (max-width: 600px) {
    .hv2-hero { padding: 12px 12px 10px; gap: 10px; }
    .hv2-eyebrow { font-size: .62rem; }
    /* Oct 30: font-size now from clamp() above. Was: .hv2-h1 { font-size: 1.08rem; margin-top: 4px; } */
    .hv2-h1 { margin-top: 4px; }
    .hv2-copy { display: none; }
    .hv2-actions { margin-top: 8px; }
    .hv2-actions .pod-btn { padding: 5px 10px; font-size: .8rem; }
    .hv2-mm .p339-map.p339-vert { gap: 6px; }
    .hv2-mm .p339-center { padding: 4px 8px; font-size: .74rem; gap: 0 8px; }
    .hv2-mm .p339-map.p339-vert .p339-phases { gap: 6px; }
    .hv2-mm .p339-map.p339-vert .p339-phase { gap: 3px; }
    .hv2-mm .p339-map.p339-vert .p339-phase > .p339-node { padding: 0 2px; background: none; border: 0; font-size: .7rem; color: var(--nx-green); text-transform: uppercase; letter-spacing: .06em; }
    .hv2-mm .p339-map.p339-vert .p339-phase > .p339-node .p339-meta { display: none; }
    .hv2-mm .p339-map.p339-vert .p339-poswrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
    .hv2-mm .p339-map.p339-vert .p339-pos { flex: none; width: auto; max-width: none; gap: 3px; flex-direction: column; align-items: stretch; }
    .hv2-mm .p339-map.p339-vert .p339-pos > .p339-node { padding: 2px 6px; font-size: .68rem; min-width: 0; max-width: none; }
    .hv2-mm .p339-map.p339-vert .p339-pos > .p339-node .p339-meta { display: none; }
    .hv2-mm .p339-map.p339-vert .p339-players { display: flex; flex-direction: column; gap: 3px; }
    .hv2-mm .p339-map.p339-vert .p339-leaf { flex-direction: column; align-items: flex-start; gap: 0; padding: 3px 6px; font-size: .72rem; border-radius: 6px; width: 100%; }
    .hv2-mm .p339-map.p339-vert .p339-leaf b { font-size: .72rem; }
    .hv2-mm .p339-map.p339-vert .p339-leaf .p339-meta { font-size: .64rem; }
    .hv2-mm .p339-map.p339-vert .p339-leaf .p339-meta:last-child { display: none; }   /* the "1 drafts · 2026" line; rater $ stays */
    .hv2-mm .wk-legend { font-size: .62rem; gap: 4px 8px; margin-top: 2px; }
    .hv2-mm .wk-legend i { width: 8px; height: 8px; }
}

/* Oct 30 (Stephen): featured map on the home, Rounds 1, 2, 3: smaller boxes, and player names wrap instead of being cut.
   Home only (.hv2-mm); the full Mind Map tool is unchanged. Was (line above): .hv2-mm .p339-map.p339-vert .p339-leaf b { ... text-overflow: ellipsis; white-space: nowrap; } */
.hv2-hint { margin-top: 8px; font-size: .74rem; line-height: 1.4; color: var(--nx-muted); }
.hv2-mm .p339-map.p339-vert .p339-leaf b { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: break-word; line-height: 1.2; }
.hv2-mm .p339-map.p339-vert .p339-meta { white-space: normal; }
.hv2-mm .p339-map.p339-vert { gap: 6px; }
.hv2-mm .p339-map.p339-vert .p339-phases { gap: 8px; }
.hv2-mm .p339-map.p339-vert .p339-phase > .p339-node { flex: 0 0 92px; width: 92px; max-width: 92px; font-size: .78rem; padding: 5px 8px; }
.hv2-mm .p339-map.p339-vert .p339-poswrap { gap: 6px; }
.hv2-mm .p339-map.p339-vert .p339-pos { max-width: 150px; gap: 3px; }
.hv2-mm .p339-map.p339-vert .p339-pos > .p339-node,
.hv2-mm .p339-map.p339-vert .p339-leaf { font-size: .74rem; padding: 4px 7px; border-radius: 6px; }
.hv2-mm .p339-map.p339-vert .p339-meta,
.hv2-mm .p339-map.p339-vert .p339-leaf .p339-meta { font-size: .64rem; }
.hv2-mm .p339-map.p339-vert .p339-players { gap: 3px; }
@media (max-width: 600px) {
    .hv2-hint { margin-top: 4px; font-size: .7rem; }
    .hv2-mm .p339-map.p339-vert .p339-phase > .p339-node { flex-basis: auto; width: 100%; max-width: none; padding: 0 2px; font-size: .7rem; }
    .hv2-mm .p339-map.p339-vert .p339-pos { max-width: none; }
    .hv2-mm .p339-map.p339-vert .p339-pos > .p339-node { padding: 2px 5px; font-size: .66rem; }
    .hv2-mm .p339-map.p339-vert .p339-leaf { padding: 3px 5px; font-size: .68rem; }
    .hv2-mm .p339-map.p339-vert .p339-leaf b { font-size: .68rem; }
    .hv2-mm .p339-map.p339-vert .p339-leaf .p339-meta { font-size: .6rem; }
}

/* Oct 31 (Stephen): featured hero carousel. CarouselEnabled false keeps the single .hv2-hero above (no dots, no extra wrapper). */
.hv2-hero.hv2-hero-carousel { display: block; position: relative; padding-bottom: 48px; }
.hv2-slides { display: grid; align-items: stretch; }
.hv2-slide { grid-area: 1 / 1; display: flex; gap: 32px; min-width: 0; opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.hv2-slide.is-on { opacity: 1; pointer-events: auto; z-index: 1; }
.hv2-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; align-items: center; gap: 4px; z-index: 2; }
.hv2-dot { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; }
.hv2-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--nx-text) 40%, transparent); }
.hv2-dot.is-on::before { background: var(--nx-green); width: 10px; height: 10px; }
.hv2-dot:focus-visible { outline: 2px solid var(--nx-green); outline-offset: 1px; }
.hv2-mm-card { justify-content: stretch; }
.hv2-placeholder { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 140px; border-radius: 10px; background: var(--nx-bg); border: 1px solid var(--nx-panel2); padding: 16px; }
.hv2-placeholder .hv2-prev-svg { width: min(100%, 420px); height: 92px; }
@media (max-width: 1100px) {
    .hv2-slide { flex-direction: column; gap: 18px; }
}
@media (max-width: 600px) {
    /* Oct 31 (Stephen): the row was the height of the tallest slide, and the shorter ones stretched to match.
       On a phone the visible slide sets the height. The others stay stacked for the fade and do not add blank space. */
    .hv2-hero.hv2-hero-carousel { padding-bottom: 44px; }
    .hv2-slides { align-items: start; position: relative; }
    .hv2-slide { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: auto; gap: 10px; }
    .hv2-slide.is-on { position: relative; }
    .hv2-hero-carousel .hv2-mm { flex: 0 0 auto; justify-content: flex-start; }
    .hv2-dots { bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .hv2-slide { transition: none; }
}
/* Oct 31 (Stephen): home crops of Roster Timeline and Pitching Decisions. The tools themselves are unchanged. */
.hv2-mm-roster .wk-wrap, .hv2-mm-pitch .wk-wrap { gap: 8px; }
.hv2-mm-roster .wk-head h2 { font-size: 1rem; }
.hv2-mm-roster .wk-head .wk-sub { font-size: .75rem; }
.hv2-mm-roster .wk-card { padding: 8px 10px; background: transparent; border: 0; }
.hv2-mm-roster .wk-timeline table { font-size: .68rem; }
.hv2-mm-roster .wk-timeline th { min-width: 16px; font-size: .68rem; padding: 0; }
.hv2-mm-roster .wk-weeks { gap: 3px; }
.hv2-mm-roster .wk-weeks button { min-width: 26px; padding: 2px 0; font-size: .72rem; cursor: default; }
.hv2-mm-roster .wk-timeline td.c { width: 14px; height: 12px; }
.hv2-mm-roster .wk-timeline td.c.big::after { inset: 1px; border-width: 1px; }
.hv2-mm-roster .wk-timeline td.n { max-width: 128px; font-size: .7rem; }
.hv2-mm-roster .wk-legend, .hv2-mm-pitch .wk-legend { font-size: .68rem; gap: 6px 10px; }
.hv2-mm-pitch .wk-card { padding: 8px 10px; }
.hv2-mm-pitch .wk-card h3 { font-size: .9rem; }
.hv2-mm-pitch .wk-take { display: none; }
.hv2-mm-pitch .wk-mix2 th { min-width: 16px; }
.hv2-mm-pitch .wk-mix2 td.h, .hv2-mm-pitch .wk-mix2 .h { width: 16px; height: 16px; font-size: .55rem; }
.hv2-mm-pitch .wk-mix2 td.n, .hv2-mm-pitch .wk-mix2 .n { font-size: .68rem; max-width: 200px; white-space: normal; overflow: visible; text-overflow: clip; }
.hv2-mm-pitch .wk-mix2 td.n small, .hv2-mm-pitch .wk-mix2 .n small { white-space: normal; overflow-wrap: break-word; line-height: 1.25; }
@media (max-width: 600px) {
    .hv2-mm-roster .wk-timeline th { min-width: 11px; }
    .hv2-mm-roster .wk-timeline td.c { width: 11px; height: 10px; }
    .hv2-mm-roster .wk-timeline td.n { max-width: 96px; }
    .hv2-mm-pitch .wk-mix2 td.h, .hv2-mm-pitch .wk-mix2 .h { width: 12px; height: 14px; font-size: .5rem; }
    .hv2-mm-pitch .wk-mix2 td.n, .hv2-mm-pitch .wk-mix2 .n { max-width: 148px; }
    /* Oct 31 (Stephen): on a phone the name cell wraps, so the table row grew and the colour squares
       stretched with it (a td height is only a minimum). Flex rows keep each square 12×14. The carousel
       still sizes to the visible slide (the rule above); this does not stretch the other slides. */
    .hv2-hero-carousel .hv2-mm-pitch .wk-wrap,
    .hv2-hero-carousel .hv2-mm-pitch .wk-card,
    .hv2-hero-carousel .hv2-mm-pitch .wk-timeline,
    .hv2-hero-carousel .hv2-mm-pitch .wk-mix2 { height: auto; flex: 0 0 auto; }
    .hv2-hero-carousel .hv2-mm-pitch .wk-mix2 { display: block; }
    .hv2-hero-carousel .hv2-mm-pitch .wk-mix2 tr { display: flex; align-items: center; gap: 2px; margin-bottom: 2px; }
    .hv2-hero-carousel .hv2-mm-pitch .wk-mix2 td.n,
    .hv2-hero-carousel .hv2-mm-pitch .wk-mix2 tr > th:first-child { flex: 0 0 132px; width: 132px; max-width: 132px; }
    .hv2-hero-carousel .hv2-mm-pitch .wk-mix2 td.h {
        flex: 0 0 12px; width: 12px; min-width: 12px; height: 14px; max-height: 14px; aspect-ratio: 6 / 7; box-sizing: border-box;
    }
    .hv2-hero-carousel .hv2-mm-pitch .wk-mix2 th:not(:first-child) { flex: 0 0 12px; width: 12px; min-width: 12px; }
}