/* Phase 3 (Oct 12): Weekly Decision views (Team Path, Team Season, League Decisions, Decision Leaders). Theme = nfbc-app.css variables. */
.wk-wrap { display: flex; flex-direction: column; gap: 14px; }
.wk-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.wk-controls > * { min-width: 240px; max-width: 360px; }
.wk-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; color: #fff; }
.wk-head h2 { margin: 0; font-size: 1.35rem; font-weight: 800; color: #fff; }
.wk-head .wk-sub { color: var(--nx-muted, #a49cc4); font-size: .9rem; }
.wk-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.wk-insight { background: linear-gradient(135deg, rgba(166,120,255,.16), rgba(46,229,157,.08)); border: 1px solid var(--nx-line, #2d2550); border-left: 4px solid #a678ff;
  border-radius: 12px; padding: 10px 14px; color: #fff; font-size: .95rem; line-height: 1.35; }
.wk-insight:nth-child(3n+2) { border-left-color: #2ee59d; } .wk-insight:nth-child(3n) { border-left-color: #3fb6ff; }
.wk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.wk-tile { background: var(--nx-panel2, #211a3d); border: 1px solid var(--nx-line, #2d2550); border-radius: 12px; padding: 10px 12px; }
.wk-tile .t { color: var(--nx-muted, #a49cc4); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.wk-tile .v { color: #fff; font-size: 1.6rem; font-weight: 800; line-height: 1.2; }
.wk-tile .c { font-size: .8rem; color: var(--nx-muted, #a49cc4); }
.wk-tile.good .v { color: #2ee59d; } .wk-tile.bad .v { color: #ff6b8a; }
.wk-card { background: var(--nx-panel, #171230); border: 1px solid var(--nx-line, #2d2550); border-radius: 14px; padding: 12px 14px; }
.wk-card h3 { margin: 0 0 4px; font-size: 1.05rem; color: #fff; font-weight: 700; }
.wk-card .wk-take { color: #ddd8f3; font-size: .9rem; margin-bottom: 6px; }
.wk-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(520px, 1fr)); gap: 14px; }
.wk-grid2 > * { min-width: 0; overflow: hidden; }
.wk-note { color: var(--nx-muted, #a49cc4); font-size: .8rem; line-height: 1.4; }
.wk-list { list-style: none; margin: 0; padding: 0; }
.wk-list li { padding: 5px 0; border-bottom: 1px solid rgba(45,37,80,.6); color: #ddd8f3; font-size: .9rem; display: flex; justify-content: space-between; gap: 10px; }
.wk-list li b { color: #fff; } .wk-list li span { color: var(--nx-muted, #a49cc4); white-space: nowrap; }
/* week picker strip */
.wk-weeks { display: flex; flex-wrap: wrap; gap: 4px; }
.wk-weeks button { display: inline-flex; flex-direction: column; align-items: stretch; border: 1px solid var(--nx-line, #2d2550); background: var(--nx-panel2, #211a3d); color: #ddd8f3; border-radius: 8px; min-width: 34px; padding: 3px 6px; cursor: pointer; font-size: .8rem; }
.wk-weeks button.on { background: #a678ff; color: #0c0818; font-weight: 800; border-color: #a678ff; }
.wk-weeks button .d { display: block; width: 100%; min-height: 4px; height: 4px; border-radius: 2px; margin-top: 2px; }
/* roster timeline */
.wk-timeline { overflow-x: auto; }
.wk-timeline table { border-collapse: separate; border-spacing: 2px; font-size: .75rem; }
.wk-timeline th { color: var(--nx-muted, #a49cc4); font-weight: 600; text-align: center; min-width: 22px; }
.wk-timeline td.n { color: var(--nx-text, #ddd8f3); white-space: nowrap; padding-right: 8px; text-align: right; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.wk-timeline td.n small { color: var(--nx-muted, #a49cc4); margin-left: 4px; }
.wk-timeline td.c { width: 22px; height: 16px; border-radius: 3px; }
.wk-timeline tr.sep td { height: 10px; }
.wk-legend { display: flex; flex-wrap: wrap; gap: 14px; color: var(--nx-muted, #a49cc4); font-size: .8rem; align-items: center; }
.wk-legend i { display: inline-block; width: 14px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
/* tables */
.wk-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.wk-table th { color: var(--nx-muted, #a49cc4); text-align: right; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--nx-line, #2d2550); cursor: pointer; white-space: nowrap; }
.wk-table th:first-child, .wk-table td:first-child, .wk-table th.l, .wk-table td.l { text-align: left; }
.wk-table td { color: #ddd8f3; text-align: right; padding: 6px 8px; border-bottom: 1px solid rgba(45,37,80,.6); }
.wk-table tr.me td { background: rgba(166,120,255,.14); }
.wk-table td.win { color: #ffd166; font-weight: 700; }
.wk-bar { display: inline-block; height: 8px; border-radius: 4px; background: #2ee59d; vertical-align: middle; margin-left: 6px; }
.wk-heat td.h { width: 26px; height: 20px; text-align: center; font-size: .7rem; color: #0c0818; border-radius: 3px; padding: 0; }
.wk-pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .75rem; background: rgba(46,229,157,.15); color: #2ee59d; margin: 2px 4px 2px 0; }
.wk-pill.miss { background: rgba(255,107,138,.15); color: #ff8aa3; }
/* Part A (Oct 13) */
/* #8 compact all-category rows */
.wk-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.wk-cat { background: var(--nx-panel2, #211a3d); border: 1px solid var(--nx-line, #2d2550); border-radius: 10px; padding: 6px 8px; text-align: center; }
.wk-cat .k { color: var(--nx-muted, #a49cc4); font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.wk-cat .g { color: #fff; font-size: 1.15rem; font-weight: 800; line-height: 1.2; }
.wk-cat .b { color: var(--nx-muted, #a49cc4); font-size: .7rem; }
.wk-cat.good .g { color: #2ee59d; } .wk-cat.bad .g { color: #ff6b8a; }
.wk-cat.top { border-color: #ffd166; box-shadow: 0 0 0 1px rgba(255,209,102,.35); }
/* #10 charts with only a few bars: narrower card */
.wk-card.wk-compact { max-width: 620px; }
.wk-path-compact .wk-tile { padding: 7px 9px; }
.wk-path-compact .wk-tile .v { font-size: 1.2rem; }
.wk-path-compact .wk-card { padding: 8px 10px; }
.wk-path-compact .wk-card h3 { font-size: .95rem; }
.wk-path-compact .wk-grid2 { gap: 10px; }
/* #9 SP-RP timeline */
.wk-mix td.n, .wk-mix .n { max-width: 360px; }
.wk-mix td.n small, .wk-mix .n small { display: block; font-size: .68rem; }
.wk-mix td.n.win, .wk-mix .n.win { color: #ffd166; }
.wk-mix td.h { color: #0c0818; font-weight: 700; }
/* #11 roster timeline hover card */
.wk-timeline td.c { cursor: default; position: relative; }
.wk-timeline td.c.big::after { content: ""; position: absolute; inset: 4px; border: 2px solid #ffd166; border-radius: 50%; }
.wk-hover { position: fixed; z-index: 2000; pointer-events: none; background: #0f0b22; border: 1px solid #a678ff; border-radius: 10px; padding: 8px 10px; color: #fff; font-size: .8rem; line-height: 1.4; box-shadow: 0 6px 24px rgba(0,0,0,.5); max-width: 320px; }
.wk-hover b { color: #2ee59d; } .wk-hover .m { color: var(--nx-muted, #a49cc4); }

/* Pitching Mix grid v2 (Oct 13): premium, low-chrome look */
.wk-mix2 { border-spacing: 3px !important; }
.wk-mix2 th { color: var(--nx-muted, #a49cc4); opacity: .7; font-weight: 500; font-size: .68rem; min-width: 20px; }
.wk-mix2 td.h, .wk-mix2 .h { width: 20px; height: 20px; border: 0; border-radius: 5px; font-size: .64rem; font-weight: 600; color: rgba(255,255,255,.82); position: relative; font-variant-numeric: tabular-nums; transition: transform .12s, filter .12s; }
.wk-mix2 td.h:hover, .wk-mix2 .h:hover { transform: scale(1.18); filter: brightness(1.25); z-index: 1; }
.wk-mix2 td.h.sw::before, .wk-mix2 .h.sw::before { content: ""; position: absolute; top: 2px; left: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--nx-text, #ddd8f3); box-shadow: 0 0 4px rgba(166,120,255,.8); }
.wk-mix2 td.n, .wk-mix2 .n { font-size: .78rem; font-weight: 500; padding-right: 12px; color: var(--nx-text, #ddd8f3); background: var(--nx-panel, #1a1430); }
.wk-mix2 td.n small, .wk-mix2 .n small { opacity: .75; }
.wk-sw-key { width: 4px !important; height: 4px !important; border-radius: 50% !important; background: var(--nx-text, #ddd8f3); box-shadow: 0 0 4px rgba(166,120,255,.8); }

/* Starts per Week: short periods flagged above the week number */
.wk-mix2 th.wk-short, .wk-mix2 .wk.wk-short { color: var(--nx-purple, #a678ff); opacity: 1; position: relative; }
.wk-mix2 th.wk-short::after, .wk-mix2 .wk.wk-short::after { content: ""; position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--nx-purple, #a678ff); }
/* Virtual rows for the team-by-team pitching grids. Same squares as the table, only the rows in view. */
.wk-virt { max-height: 70vh; overflow: auto; }
.wk-virt-head, .wk-virt-row { display: flex; align-items: center; gap: 3px; min-width: max-content; }
.wk-virt-head { position: sticky; top: 0; z-index: 3; background: var(--nx-panel, #171230); padding: 2px 0 4px; }
.wk-virt .n { position: sticky; left: 0; z-index: 2; width: 240px; min-width: 240px; max-width: 240px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; padding: 2px 8px; }
.wk-virt-head .n { z-index: 4; }
.wk-virt .n small { overflow: hidden; text-overflow: ellipsis; }
.wk-virt .h { display: flex; align-items: center; justify-content: center; flex: 0 0 20px; box-sizing: border-box; }
.wk-virt .wk { width: 20px; min-width: 20px; flex: 0 0 20px; text-align: center; font-size: .68rem; font-weight: 500; color: var(--nx-muted, #a49cc4); opacity: .7; }
.wk-short-key { color: var(--nx-purple, #a678ff); }
.wk-short-key::before { content: "\2022  "; }

/* Part A: Starts Leaderboard (clean rows, subtle dividers, purple/slate) */
.sl-intro { max-width: 980px; margin-bottom: 10px; }
.sl-table { width: 100%; border-collapse: collapse; font-size: .84rem; font-variant-numeric: tabular-nums; }
.sl-table th { color: var(--nx-muted, #a49cc4); font-weight: 500; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; text-align: right; padding: 6px 10px; border-bottom: 1px solid rgba(166,120,255,.18); }
.sl-table td { text-align: right; padding: 8px 10px; border-bottom: 1px solid rgba(45,37,80,.55); color: var(--nx-text, #ddd8f3); position: relative; }
.sl-table th.l, .sl-table td.l { text-align: left; }
.sl-table tr:last-child td { border-bottom: 0; }
.sl-table tr:hover td { background: rgba(166,120,255,.05); }
.sl-table td.rk { color: var(--nx-muted, #a49cc4); width: 34px; }
.sl-table .tm { font-weight: 600; } .sl-table small { display: block; color: var(--nx-muted, #a49cc4); font-size: .7rem; }
.sl-table .mut { color: var(--nx-muted, #a49cc4); }
.sl-table td.warn { color: #c9b6ff; }
.sl-num { position: relative; z-index: 1; font-weight: 600; }
.sl-bar { position: absolute; right: 10px; bottom: 4px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, rgba(166,120,255,.15), rgba(166,120,255,.75)); max-width: 70px; }
.sl-table tr.me td { background: rgba(255,209,102,.07); } .sl-table tr.me .tm { color: #ffd166; }
.sl-pill { font-size: .7rem; padding: 2px 8px; border-radius: 10px; }
.sl-pill.won { background: rgba(166,120,255,.22); color: #d9c8ff; } .sl-pill.cash { background: rgba(120,160,168,.22); color: #bcd3d6; }

/* WeekGrid: searched NFBC Player's rows */
.wk-mix2 td.n.me { color: #ffd166; background: rgba(255,209,102,.07); border-radius: 6px; }

/* Player Rater timeline: pinned week header and names, color squares like the roster timeline */
.rt-scroll { max-height: 70vh; overflow: auto; border: 1px solid rgba(166,120,255,.18); border-radius: 12px; }
.rt-head, .rt-row { display: flex; align-items: stretch; min-width: max-content; }
.rt-head { position: sticky; top: 0; z-index: 3; background: var(--nx-panel, #1a1430); }
.rt-name { position: sticky; left: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; width: 190px; min-width: 190px; background: var(--nx-panel, #1a1430); padding: 4px 8px; font-size: .78rem; color: var(--nx-text, #ddd8f3); overflow: hidden; border-right: 1px solid var(--nx-line, #2d2550); }
.rt-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-head .rt-name { z-index: 4; color: var(--nx-muted, #a49cc4); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; }
.rt-name small { display: block; color: var(--nx-muted, #a49cc4); font-size: .68rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-wk { width: 22px; min-width: 22px; text-align: center; font-size: .62rem; color: var(--nx-muted, #a49cc4); }
.rt-cell { width: 18px; height: 18px; min-width: 18px; margin: 2px; border-radius: 4px; }

/* Season Story: chapter strip plus a compact roster board */
.ss-play { display: flex; align-items: center; gap: 12px; margin: 8px 0 14px; }
.ss-speed { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--nx-line, #2d2550); border-radius: 999px; overflow: hidden; }
.ss-speed button { background: transparent; color: var(--nx-muted, #a49cc4); border: 0; padding: 4px 9px; font: inherit; font-size: .68rem; font-weight: 700; cursor: pointer; }
.ss-speed button.on { background: color-mix(in srgb, var(--nx-purple, #a678ff) 28%, transparent); color: var(--nx-text, #ddd8f3); }
.ss-range { flex: 1; accent-color: var(--nx-purple, #a678ff); }
.ss-chapters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; overflow-x: auto; }
.ss-ch { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; flex: 1 1 168px; width: 168px; max-width: 240px; min-width: 148px; min-height: 78px; box-sizing: border-box; text-align: left; line-height: 1.25; white-space: normal; background: rgba(166,120,255,.08); border: 1px solid rgba(166,120,255,.28); border-radius: 10px; color: var(--nx-text, #ddd8f3); padding: 8px 10px; cursor: pointer; font: inherit; overflow: hidden; }
.ss-ch .ss-eye, .ss-ch .ss-hd, .ss-ch .ss-dt { display: block; position: static; margin: 0; float: none; max-width: 100%; }
.ss-eye { color: var(--nx-muted, #a49cc4); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; }
.ss-hd { color: var(--nx-text, #ddd8f3); font-size: .95rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.ss-dt { color: var(--nx-muted, #a49cc4); font-size: .72rem; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.ss-ch.on { border-color: var(--nx-green, #2ee59d); }
.ss-stage { display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 16px; align-items: start; }
.ss-band { margin: 12px 0 6px; color: var(--nx-muted, #a49cc4); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
.ss-card { border-radius: 10px; padding: 8px 10px 8px 12px; min-height: 78px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; background: rgba(255,255,255,.04); color: var(--nx-text, #ddd8f3); position: relative; overflow: hidden; border-left: 3px solid var(--phx-pos, var(--nx-line, #2d2550)); transition: background .35s ease, opacity .35s ease, transform .35s ease, box-shadow .35s ease; }
.ss-toprow { display: flex; align-items: center; gap: 6px; width: 100%; }
.ss-pos { color: var(--phx-pos, var(--nx-muted, #a49cc4)); font-size: .66rem; font-weight: 700; letter-spacing: .06em; }
.ss-card b { font-weight: 650; font-size: .84rem; line-height: 1.25; color: inherit; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%; }
.ss-card small { color: var(--nx-muted, #a49cc4); font-size: .7rem; }
.ss-card.phx-dol-4, .ss-card.phx-dol-5, .ss-card.phx-fine-8, .ss-card.phx-fine-9, .ss-card.phx-fine-10 { color: var(--nx-bg, #110c20); }
.ss-card.phx-dol-4 small, .ss-card.phx-dol-5 small, .ss-card.phx-fine-8 small, .ss-card.phx-fine-9 small, .ss-card.phx-fine-10 small, .ss-card.phx-dol-4 .ss-money, .ss-card.phx-dol-5 .ss-money, .ss-card.phx-fine-8 .ss-money, .ss-card.phx-fine-9 .ss-money, .ss-card.phx-fine-10 .ss-money, .ss-card.phx-dol-4 .ss-ghost, .ss-card.phx-dol-5 .ss-ghost, .ss-card.phx-fine-8 .ss-ghost, .ss-card.phx-fine-9 .ss-ghost, .ss-card.phx-fine-10 .ss-ghost { color: color-mix(in srgb, var(--nx-bg, #110c20) 72%, var(--nx-muted, #a49cc4)); }
.ss-money { font-variant-numeric: tabular-nums; color: var(--nx-muted, #a49cc4); font-size: .78rem; margin-left: auto; }
.ss-empty { color: var(--nx-muted, #a49cc4); background: transparent; border: 1px dashed var(--nx-line, #2d2550); border-left: 3px solid var(--phx-pos, var(--nx-line, #2d2550)); }
.ss-fri, .ss-ghost { font-size: .62rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.ss-fri { color: var(--nx-blue, #3fb6ff); }
.ss-ghost { color: var(--nx-muted, #a49cc4); }
.ss-badge { margin-top: 2px; font-size: .68rem; font-weight: 700; color: var(--nx-bg, #110c20); background: var(--nx-orange, #ff8a3d); border-radius: 999px; padding: 1px 7px; }
.ss-drop { animation: ssOut .45s ease forwards; }
.ss-faab { box-shadow: 0 0 0 1px var(--nx-orange, #ff8a3d), 0 0 16px color-mix(in srgb, var(--nx-orange, #ff8a3d) 45%, transparent); }
.ss-in { animation: ssIn .4s ease; }
@keyframes ssIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ssOut { from { opacity: 1; transform: none; } to { opacity: .38; transform: translateY(4px); } }
.ss-facts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ss-stat, .ss-mix, .ss-vol, .ss-splitline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 10px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--nx-line, #2d2550); background: color-mix(in srgb, var(--nx-bg, #110c20) 45%, transparent); color: var(--nx-muted, #a49cc4); font-size: .72rem; }
.ss-stat b, .ss-mix b, .ss-vol b, .ss-splitline b { color: var(--nx-text, #ddd8f3); font-variant-numeric: tabular-nums; }
.ss-splitline { align-items: center; }
.ss-split { display: flex; flex-direction: column; line-height: 1.05; margin-right: 2px; }
.ss-split b { font-size: .95rem; }
.ss-split small, .ss-vol small { color: var(--nx-muted, #a49cc4); font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ss-vol small { text-transform: none; letter-spacing: 0; font-weight: 600; margin-left: 4px; }
.ss-side { position: sticky; top: 8px; background: var(--nx-panel, #1a1430); border: 1px solid var(--nx-line, #2d2550); border-radius: 14px; padding: 12px; }
.ss-ranks { display: flex; gap: 16px; margin-bottom: 12px; }
.ss-ranks b { display: block; font-size: 1.35rem; color: var(--nx-text, #ddd8f3); line-height: 1.1; }
.ss-ranks span { color: var(--nx-muted, #a49cc4); font-size: .75rem; }
.ss-ranks em, .ss-cat em { font-style: normal; font-size: .72rem; font-weight: 700; margin-left: 4px; }
.ss-up { color: var(--nx-green, #2ee59d); }
.ss-dn { color: var(--nx-red, #ff3b6b); }
.ss-cat { display: flex; align-items: center; gap: 8px; font-size: .78rem; margin-bottom: 6px; color: var(--nx-text, #ddd8f3); }
.ss-cat span { width: 36px; color: var(--nx-muted, #a49cc4); }
.ss-cat b { width: 28px; text-align: right; font-variant-numeric: tabular-nums; color: var(--nx-text, #ddd8f3); }
.ss-bar { flex: 1; height: 6px; background: rgba(255,255,255,.06); border-radius: 4px; overflow: hidden; }
.ss-bar i { display: block; height: 100%; border-radius: 4px; background: var(--nx-purple); }
@media (max-width: 860px) { .ss-stage { grid-template-columns: 1fr; } .ss-side { position: static; } }
.ss-viewbar { display: flex; margin: 6px 0 4px; }
.ss-viewbar .mud-toggle-group { border-color: #7e6fff; }
.ss-viewbar .mud-toggle-item { min-width: 88px; font-weight: 700; }
.ss-viewbar .mud-toggle-item.ss-view-on { background: #7e6fff; color: #fff; }
@media (max-width: 600px) { .ss-viewbar .mud-toggle-group { width: 100%; } .ss-viewbar .mud-toggle-item { flex: 1 1 0; min-width: 0; } }
.ss-weeks { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 14px; align-items: start; }
.ss-weeklist { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 8px; max-height: calc(100vh - 180px); overflow: auto; padding: 4px; border: 1px solid var(--nx-line, #2d2550); border-radius: 12px; background: var(--nx-panel, #1a1430); }
.ss-wk { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; background: transparent; color: var(--nx-text, #ddd8f3); border: 1px solid transparent; border-radius: 8px; padding: 4px 8px; font: inherit; font-size: .78rem; font-weight: 650; cursor: pointer; font-variant-numeric: tabular-nums; }
.ss-wk.on { background: color-mix(in srgb, var(--nx-purple, #a678ff) 28%, transparent); border-color: var(--nx-purple, #a678ff); }
.ss-wk:disabled { color: var(--nx-muted, #a49cc4); opacity: .4; cursor: default; }
.ss-wk-n { width: 1.5rem; }
.ss-wk-hint { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.ss-wk em { font-style: normal; font-size: .66rem; font-weight: 700; }
.ss-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nx-orange, #ff8a3d); flex: 0 0 auto; }
.ss-recap { margin-top: 18px; max-width: 420px; }
.ss-recap-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; color: var(--nx-muted, #a49cc4); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ss-dl { background: color-mix(in srgb, var(--nx-purple, #a678ff) 28%, transparent); color: var(--nx-text, #ddd8f3); border: 1px solid var(--nx-line, #2d2550); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: .72rem; font-weight: 700; letter-spacing: 0; text-transform: none; cursor: pointer; }
.ss-card-canvas { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--nx-line, #2d2550); background: var(--nx-bg, #110c20); }
@media (max-width: 720px) {
    .ss-weeks { grid-template-columns: 1fr; }
    .ss-weeklist { flex-direction: row; position: static; max-height: none; overflow-x: auto; overflow-y: hidden; }
    .ss-wk { width: auto; flex: 0 0 auto; }
}

/* Shared rater-$ scale. phx-dol-0 is zero or negative. phx-dol-1 is faint purple, phx-dol-5 is the deepest. */
.phx-dol-0 { background: color-mix(in srgb, var(--nx-muted) 42%, var(--nx-bg)); }
.phx-dol-1 { background: color-mix(in srgb, var(--nx-purple) 24%, transparent); }
.phx-dol-2 { background: color-mix(in srgb, var(--nx-purple) 42%, transparent); }
.phx-dol-3 { background: color-mix(in srgb, var(--nx-purple) 60%, transparent); }
.phx-dol-4 { background: color-mix(in srgb, var(--nx-purple) 80%, transparent); }
.phx-dol-5 { background: var(--nx-purple); }
.wk-legend i.phx-dol-0, .wk-legend i.phx-dol-1, .wk-legend i.phx-dol-2, .wk-legend i.phx-dol-3, .wk-legend i.phx-dol-4, .wk-legend i.phx-dol-5 { margin-right: 2px; }
.rt-scale { display: inline-flex; align-items: center; gap: 3px; }
.rt-scale i { margin-right: 0; }
/* Ten purple grades for the Player Rater timeline and Season Story. Even steps in oklch so neighbors stay apart on the dark background.
   The srgb mix is the fallback. .phx-dol-0..5 stay the coarser scale for Roster Timeline. */
.phx-fine-1 { background: color-mix(in srgb, var(--nx-purple) 10%, var(--nx-bg)); background: color-mix(in oklch, var(--nx-purple) 10%, var(--nx-bg)); }
.phx-fine-2 { background: color-mix(in srgb, var(--nx-purple) 20%, var(--nx-bg)); background: color-mix(in oklch, var(--nx-purple) 20%, var(--nx-bg)); }
.phx-fine-3 { background: color-mix(in srgb, var(--nx-purple) 30%, var(--nx-bg)); background: color-mix(in oklch, var(--nx-purple) 30%, var(--nx-bg)); }
.phx-fine-4 { background: color-mix(in srgb, var(--nx-purple) 40%, var(--nx-bg)); background: color-mix(in oklch, var(--nx-purple) 40%, var(--nx-bg)); }
.phx-fine-5 { background: color-mix(in srgb, var(--nx-purple) 50%, var(--nx-bg)); background: color-mix(in oklch, var(--nx-purple) 50%, var(--nx-bg)); }
.phx-fine-6 { background: color-mix(in srgb, var(--nx-purple) 60%, var(--nx-bg)); background: color-mix(in oklch, var(--nx-purple) 60%, var(--nx-bg)); }
.phx-fine-7 { background: color-mix(in srgb, var(--nx-purple) 70%, var(--nx-bg)); background: color-mix(in oklch, var(--nx-purple) 70%, var(--nx-bg)); }
.phx-fine-8 { background: color-mix(in srgb, var(--nx-purple) 80%, var(--nx-bg)); background: color-mix(in oklch, var(--nx-purple) 80%, var(--nx-bg)); }
.phx-fine-9 { background: color-mix(in srgb, var(--nx-purple) 90%, var(--nx-bg)); background: color-mix(in oklch, var(--nx-purple) 90%, var(--nx-bg)); }
.phx-fine-10 { background: var(--nx-purple); }

/* preview339 tools. Unused when the gate is off. */
.p339-take { color: #c4b5fd; font-size: .84rem; margin: 4px 0 8px; }
.p339-meta { color: #a49cc4; font-size: .72rem; display: block; }
.p339-cat { margin: 0 0 16px; }
.p339-cat-h { font-weight: 700; letter-spacing: .04em; color: #f4f0ff; }
.p339-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.p339-chip, .p339-years button { background: transparent; color: #ddd8f3; border: 1px solid #3a3160; border-radius: 999px; padding: 3px 10px; font: inherit; font-size: .72rem; cursor: pointer; }
.p339-chip.on, .p339-years button.on { border-color: #a678ff; background: color-mix(in srgb, #a678ff 24%, transparent); }
.p339-years { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.p339-views { flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 8px; }
.p339-groups { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.p339-groups-k { font-size: .8rem; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--nx-text, #ddd8f3); }
.p339-band { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--nx-purple, #a678ff); border-radius: 999px; padding: 1px 4px 1px 10px; background: color-mix(in srgb, var(--nx-purple, #a678ff) 18%, transparent); color: var(--nx-text, #ddd8f3); }
.p339-band-s { font-size: .8rem; font-weight: 650; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.p339-gbtn { background: transparent; color: var(--nx-text, #ddd8f3); border: 1px solid var(--nx-purple, #a678ff); border-radius: 999px; padding: 2px 12px; font: inherit; font-size: .8rem; font-weight: 650; letter-spacing: 0; text-transform: none; cursor: pointer; }
.p339-gbtn:hover, .p339-gbtn:focus-visible { background: var(--nx-purple, #a678ff); color: var(--nx-bg, #110c20); }
.p339-gbtn:disabled { opacity: .45; cursor: default; background: transparent; color: var(--nx-text, #ddd8f3); }
.p339-gbtn-x { padding: 0 6px; border: 0; line-height: 1.4; }
.p339-gerr { flex: 1 0 100%; color: #ff8aa8; font-size: .75rem; }
.p339-groups .p339-break { margin: 0; width: 72px; }
.p339-groups .p339-break .mud-input-slot { padding-top: 2px; padding-bottom: 2px; font-size: .8rem; }
.p339-groups .p339-break .mud-input-outlined-border { border-color: var(--nx-purple, #a678ff); }
.p339-groups .mud-input-root-outlined.mud-input-root-focused .mud-input-outlined-border,
.p339-groups .p339-break .mud-input-outlined:focus-within .mud-input-outlined-border { border-color: var(--nx-purple, #a678ff) !important; }
.p339-groups .p339-break .mud-icon-button { color: var(--nx-purple, #a678ff); }
.p339-groups .p339-break .mud-input-helper-text { display: none; }
/* Mind Map switches share MudToggleGroup (Season Story, Price Guide). The app primary is green and Mud uppercases buttons, so this bar pins the site purple and sentence case. */
.p339-views .mud-toggle-group { border-color: var(--nx-purple, #a678ff); border-radius: 999px; overflow: hidden; }
.p339-views .mud-toggle-item,
.p339-views .mud-toggle-item .mud-button-label { text-transform: none; letter-spacing: 0; font-size: .8rem; font-weight: 650; }
.p339-views .mud-toggle-item { min-width: 0; color: var(--nx-text, #ddd8f3); padding: 2px 12px; }
.p339-views .mud-toggle-item.ss-view-on { background: var(--nx-purple, #a678ff); color: var(--nx-bg, #110c20); }
.p339-board { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.p339-map { display: flex; flex-direction: column; gap: 8px; align-items: stretch; padding: 0 0 12px; width: 100%; min-width: 0; max-height: calc(100dvh - 280px); overflow: auto; }
.p339-phases { display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 0; }
.p339-phase { display: flex; flex-direction: row; gap: 6px; align-items: flex-start; width: 100%; min-width: 0; }
.p339-phase > .p339-node { flex: 0 0 auto; width: auto; min-width: 72px; max-width: 136px; }
.p339-poswrap { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; align-items: stretch; min-width: 0; }
.p339-pos { flex: 1 1 auto; max-width: none; width: 100%; min-width: 0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; }
.p339-pos > .p339-node { flex: 0 0 auto; width: auto; min-width: 96px; max-width: 168px; }
.p339-players { display: flex; flex: 1 1 180px; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.p339-node { display: flex; flex-direction: column; align-items: flex-start; text-align: left; background: #1c1633; color: #ddd8f3; border: 1px solid #3a3160; border-radius: 8px; padding: 4px 7px; min-width: 0; width: 100%; box-sizing: border-box; cursor: pointer; font: inherit; font-size: .75rem; }
.p339-node.hot { border-color: #a678ff; box-shadow: 0 0 0 1px #a678ff; }
.p339-center { background: #2a1b4a; border-color: #a678ff; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; width: 100%; font-size: .8rem; }
.p339-center .p339-meta { display: inline; }
.p339-map .p339-meta { font-size: .65rem; line-height: 1.2; }
.p339-leaf { width: auto; flex: 0 0 auto; min-width: 0; max-width: 100%; padding: 2px 6px; }
.p339-map .p339-leaf { flex-direction: row; flex-wrap: nowrap; align-items: baseline; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p339-map .p339-leaf .p339-meta { display: inline; }
/* .p339-node paints a solid background after the shared scale, so a tinted leaf repeats that paint here. */
.p339-map .p339-leaf.phx-dol-0 { background: color-mix(in srgb, var(--nx-muted) 42%, var(--nx-bg)); }
.p339-map .p339-leaf.phx-fine-1 { background: color-mix(in srgb, var(--nx-purple) 10%, var(--nx-bg)); background: color-mix(in oklch, var(--nx-purple) 10%, var(--nx-bg)); }
.p339-map .p339-leaf.phx-fine-2 { background: color-mix(in srgb, var(--nx-purple) 20%, var(--nx-bg)); background: color-mix(in oklch, var(--nx-purple) 20%, var(--nx-bg)); }
.p339-map .p339-leaf.phx-fine-3 { background: color-mix(in srgb, var(--nx-purple) 30%, var(--nx-bg)); background: color-mix(in oklch, var(--nx-purple) 30%, var(--nx-bg)); }
.p339-map .p339-leaf.phx-fine-4 { background: color-mix(in srgb, var(--nx-purple) 40%, var(--nx-bg)); background: color-mix(in oklch, var(--nx-purple) 40%, var(--nx-bg)); }
.p339-map .p339-leaf.phx-fine-5 { background: color-mix(in srgb, var(--nx-purple) 50%, var(--nx-bg)); background: color-mix(in oklch, var(--nx-purple) 50%, var(--nx-bg)); }
.p339-map .p339-leaf.phx-fine-6 { background: color-mix(in srgb, var(--nx-purple) 60%, var(--nx-bg)); background: color-mix(in oklch, var(--nx-purple) 60%, var(--nx-bg)); }
.p339-map .p339-leaf.phx-fine-7 { background: color-mix(in srgb, var(--nx-purple) 70%, var(--nx-bg)); background: color-mix(in oklch, var(--nx-purple) 70%, var(--nx-bg)); }
.p339-map .p339-leaf.phx-fine-8 { background: color-mix(in srgb, var(--nx-purple) 80%, var(--nx-bg)); background: color-mix(in oklch, var(--nx-purple) 80%, var(--nx-bg)); }
.p339-map .p339-leaf.phx-fine-9 { background: color-mix(in srgb, var(--nx-purple) 90%, var(--nx-bg)); background: color-mix(in oklch, var(--nx-purple) 90%, var(--nx-bg)); }
.p339-map .p339-leaf.phx-fine-10 { background: var(--nx-purple); }
.p339-map .p339-leaf.phx-fine-8,
.p339-map .p339-leaf.phx-fine-9,
.p339-map .p339-leaf.phx-fine-10 { color: var(--nx-bg, #110c20); }
.p339-map .p339-leaf.phx-fine-8 .p339-meta,
.p339-map .p339-leaf.phx-fine-9 .p339-meta,
.p339-map .p339-leaf.phx-fine-10 .p339-meta { color: color-mix(in srgb, var(--nx-bg, #110c20) 72%, var(--nx-muted, #a49cc4)); }
.p339-path { position: static; flex: 0 0 auto; background: #1a1430; border: 1px solid #3a3160; border-radius: 10px; padding: 10px 12px; margin: 0; min-height: 44px; box-sizing: border-box; color: #f4f0ff; }
.p339-path.is-empty { visibility: hidden; }
.p339-path .p339-meta { color: #e6def8; font-size: .8rem; }
/* Vertical is the pre-compact map: a round (or position) band is a row, nodes sit across it, and players stack under each node at the original card size. Rater paints stay on .p339-leaf. */
.p339-map.p339-vert { gap: 14px; }
.p339-map.p339-vert .p339-phases { gap: 18px; }
.p339-map.p339-vert .p339-phase { gap: 10px; align-items: flex-start; }
.p339-map.p339-vert .p339-phase > .p339-node { flex: 0 0 156px; width: 156px; min-width: 148px; max-width: 168px; padding: 8px 10px; border-radius: 10px; font-size: .95rem; }
.p339-map.p339-vert .p339-poswrap { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 12px 14px; }
.p339-map.p339-vert .p339-pos { flex: 0 0 196px; width: 196px; min-width: 188px; max-width: 210px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; }
.p339-map.p339-vert .p339-pos > .p339-node { flex: 0 0 auto; width: 100%; min-width: 0; max-width: none; padding: 8px 10px; border-radius: 10px; font-size: .95rem; }
.p339-map.p339-vert .p339-players { flex: 0 0 auto; width: 100%; min-width: 0; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; }
.p339-map.p339-vert .p339-node { font-size: .95rem; }
.p339-map.p339-vert .p339-meta,
.p339-map.p339-vert .p339-leaf .p339-meta { display: block; font-size: .78rem; line-height: 1.3; }
.p339-map.p339-vert .p339-center { font-size: .95rem; padding: 8px 12px; }
.p339-map.p339-vert .p339-center .p339-meta { display: inline; }
.p339-map.p339-vert .p339-leaf { width: 100%; flex: 0 0 auto; min-width: 0; max-width: none; padding: 8px 10px; border-radius: 10px; font-size: .95rem; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 1px; white-space: normal; overflow: visible; text-overflow: unset; }
@media (max-width: 800px) {
    .p339-phase { flex-direction: column; }
    .p339-phase > .p339-node { flex-basis: auto; width: 100%; max-width: none; }
    .p339-map.p339-vert .p339-pos { flex-basis: 188px; }
}

/* Shared info notice (PhxCallout). Purple comes from the site palette; the card stays readable on a phone. */
.phx-callout {
    display: flex; align-items: flex-start; gap: 10px; width: 100%; max-width: min(46rem, 100%);
    box-sizing: border-box; margin: 8px 0 12px; padding: 12px 14px; border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--nx-purple, #a678ff) 50%, var(--nx-line, #2d2550));
    background: color-mix(in srgb, var(--nx-purple, #a678ff) 16%, var(--nx-panel, #1a1430));
    color: var(--nx-text, #ddd8f3); font-size: .95rem; line-height: 1.45;
}
.phx-callout .phx-callout-icon { color: var(--nx-purple, #a678ff); flex: 0 0 auto; margin-top: 1px; }
.phx-callout-text { min-width: 0; }
.cd-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 4px 0 8px; color: var(--nx-text, #ddd8f3); font-size: .85rem; line-height: 1.3; }
.cd-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cd-legend i { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }

/* preview339 Draft Room Replay. Hidden with the section when the gate is off. */
.drr-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.drr-find-wrap { display: block; margin: 8px 0; color: var(--nx-muted, #a49cc4); font-size: .78rem; }
.drr-find { display: block; width: 100%; margin-top: 4px; box-sizing: border-box; background: transparent; color: var(--nx-text, #ddd8f3); border: 1px solid #3a3160; border-radius: 999px; padding: 8px 12px; font: inherit; font-size: .9rem; }
.drr-find:focus { outline: 2px solid var(--nx-purple, #a678ff); border-color: var(--nx-purple, #a678ff); }
.drr-list { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow: auto; margin-top: 8px; }
.drr-choice { text-align: left; background: #1a1430; color: var(--nx-text, #ddd8f3); border: 1px solid #3a3160; border-radius: 10px; padding: 8px 12px; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-height: 44px; }
.drr-choice:hover, .drr-choice:focus-visible { border-color: var(--nx-purple, #a678ff); }
.drr-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 8px 0; }
.drr-transport { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.drr-nav { display: flex; gap: 8px; }
.drr-nav .p339-gbtn { min-width: 72px; min-height: 44px; }
.drr-scrub { flex: 1 1 180px; width: 100%; accent-color: var(--nx-purple, #a678ff); min-height: 44px; }
.drr-card { background: #1a1430; border: 1px solid #3a3160; border-radius: 12px; padding: 12px; margin-top: 8px; }
.drr-card h3 { margin: 0 0 6px; font-size: 1.15rem; color: #f4f0ff; }
.drr-kicker { margin: 12px 0 4px; font-size: .75rem; font-weight: 700; letter-spacing: .02em; color: #c4b5fd; }
.drr-card .drr-kicker:first-child { margin-top: 0; }
.drr-line { margin: 4px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.drr-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 8px 0; color: #ddd8f3; font-size: .78rem; }
.drr-flag { display: inline-block; border-radius: 999px; padding: 2px 8px; font-style: normal; font-weight: 700; font-size: .72rem; color: #110c20; }
.drr-reach { background: #ff8a3d; }
.drr-value { background: #3fb6ff; }
.drr-steal { background: #2ee59d; }
.drr-ahead { background: #a678ff; }
.drr-late { background: #e6def8; }
.drr-left { background: #ffc83d; }
.drr-kinds .p339-chip { min-height: 44px; padding: 8px 12px; font-size: .8rem; }
.drr-bar .p339-gbtn, .drr-transport > .p339-gbtn { min-height: 44px; }
.drr-pos { display: inline-block; border-radius: 999px; padding: 1px 7px; font-size: .72rem; font-weight: 700; color: #110c20; }
.drr-gap { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.drr-mini { flex: 0 0 auto; border: 1px solid #3a3160; border-radius: 999px; padding: 4px 8px; font-size: .72rem; }
.drr-needs { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 6px; }
.drr-need { border: 1px solid #3a3160; border-radius: 10px; padding: 6px 8px; background: #140f24; min-height: 44px; }
.drr-need.open { border-color: #a678ff; }
.drr-need.extra { border-color: #6d658c; }
.drr-need-h { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; }
.drr-names { margin-top: 4px; color: #ddd8f3; font-size: .75rem; line-height: 1.35; }
.drr-board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.drr-board li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 8px; background: #140f24; }
.drr-board li.taken { outline: 1px solid #a678ff; }
.drr-board li.passed { outline: 1px solid #ffc83d; }
.drr-rounds { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.drr-rd { width: 46px; min-height: 44px; border-radius: 8px; color: #110c20; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .72rem; line-height: 1.1; }
.drr-takes { margin: 8px 0 0; padding-left: 18px; color: #f4f0ff; }
.drr-takes li { margin: 4px 0; }
@media (max-width: 600px) {
    .drr-transport { flex-direction: column; align-items: stretch; }
    .drr-nav { width: 100%; }
    .drr-nav .p339-gbtn { flex: 1; }
    .drr-list { max-height: none; }
}