/* WTWR_STRATEGY_FINDER_REBUILD_V1 -- new tool's own stylesheet.
Split out of wtwr-strategy-finder-customer-v3.css (2026-09-12) so
that file can be deleted cleanly once the old tool is retired,
without needing a partial-file edit at deletion time. */
/* WTWR_STRATEGY_FINDER_REBUILD_V1: colours missing from the V3 chip set --
EMERALD replaces the old (mis-coloured, same-as-purple) deep-purple
rule above; that rule is left in place for anything still using it. */
#strategy .wtwr-sf-colour-emerald{color:#3ecf82}
#strategy .wtwr-sf-colour-lime{color:#5fff9a}
#strategy .wtwr-sf-colour-teal{color:#4fb8b8}
#strategy .wtwr-sf-colour-amber{color:#daa520}
#strategy .wtwr-sf-colour-slate{color:#7f95ab}
#strategy .wtwr-sf-colour-magenta{color:#ff66ff}
/* WTWR_STRATEGY_FINDER_REBUILD_V1 (2026-09-12) -- new components only.
Everything above this point still styles the reused three-panel
shell, evidence badges and colour chips; nothing above was removed. */
#strategy .strategy-time-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 14px}
#strategy .strategy-time-tabs button{
padding:8px 14px;border-radius:999px;border:1px solid rgba(120,150,180,.22);
background:rgba(8,15,24,.6);color:#8fa0b3;font-size:11px;font-weight:800;
letter-spacing:.03em;cursor:pointer;
}
#strategy .strategy-time-tabs button.active{
border-color:rgba(88,169,255,.56);background:linear-gradient(180deg,rgba(20,57,85,.5),rgba(8,25,39,.85));
color:#9fd1ff;
}
#strategy .sf-pick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#strategy .sf-pick-col{
display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:10px;
border:1px solid rgba(120,150,180,.12);background:rgba(6,12,19,.5);
}
#strategy .sf-pick-label{font-size:9px;font-weight:900;letter-spacing:.08em;color:#6f8299}
#strategy .sf-pick-col label{display:flex;flex-direction:column;gap:4px}
#strategy .sf-pick-col input[type="number"]{
min-height:38px;border-radius:8px;border:1px solid rgba(120,150,180,.22);
background:rgba(8,15,24,.72);color:#e8eef5;padding:0 10px;font-size:12px;
}
#strategy .sf-race-type{margin-bottom:10px}
#strategy .sf-broad-tags,#strategy .sf-discipline-tags{display:flex;flex-wrap:wrap;gap:6px}
/* WTWR_HIDDEN_ATTR_FIX_V1 (2026-09-19): pre-existing bug, found while
testing the new matrix panel's discipline-tags row (which reuses this
same class) -- the plain display:flex above always beat the native
[hidden]{display:none} UA rule, so toggling .hidden on this row (both
the pre-existing Build-mode one and the new matrix one) never actually
hid it. Same fix, same reasoning as the Strategy Tabs modal-backdrop
fix earlier tonight -- must come after the rule above, equal
specificity, source order decides. */
#strategy .sf-discipline-tags[hidden]{display:none}
#strategy .sf-discipline-tags{margin-top:7px;padding-left:14px;border-left:2px solid rgba(120,150,180,.18)}
#strategy .sf-broad-tags button,#strategy .sf-discipline-tags button{
padding:7px 12px;border-radius:8px;border:1px solid rgba(120,150,180,.2);
background:rgba(8,15,24,.6);color:#8fa0b3;font-size:10.5px;font-weight:800;cursor:pointer;
}
#strategy .sf-broad-tags button.active,#strategy .sf-discipline-tags button.active{
border-color:rgba(88,169,255,.56);background:linear-gradient(180deg,rgba(20,57,85,.5),rgba(8,25,39,.85));
color:#9fd1ff;
}
#strategy .wtwr-sf-hero-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0}
#strategy .wtwr-sf-hero-empty{
grid-column:1/-1;padding:22px;text-align:center;color:#7f91a5;font-size:12px;
border:1px dashed rgba(120,150,180,.22);border-radius:12px;
}
#strategy .wtwr-sf-hero-card{
padding:16px 18px;border-radius:14px;border:1px solid rgba(120,150,180,.18);
background:linear-gradient(180deg,rgba(12,27,41,.9),rgba(8,19,30,.9));
}
#strategy .wtwr-sf-hero-card.wtwr-sf-below-min{border-style:dashed;opacity:.92}
#strategy .wtwr-sf-hero-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
#strategy .wtwr-sf-hero-head>span:first-child{font-size:11px;font-weight:900;letter-spacing:.06em;color:#e8eef5}
#strategy .wtwr-sf-min-warning{
margin-bottom:10px;padding:8px 10px;border-radius:8px;font-size:10.5px;line-height:1.5;
color:#d8c789;background:#1a1200;border:1px solid #3a2c00;
}
#strategy .wtwr-sf-hero-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:8px}
#strategy .wtwr-sf-hero-grid div{display:flex;flex-direction:column;gap:2px}
#strategy .wtwr-sf-hero-grid span{font-size:8.5px;font-weight:900;letter-spacing:.06em;color:#6f8299;text-transform:uppercase}
#strategy .wtwr-sf-hero-grid strong{font-size:17px;color:#e8eef5}
#strategy .wtwr-sf-hero-grid strong.profit{color:#73e2a6}
#strategy .wtwr-sf-hero-grid strong.loss{color:#f27575}
#strategy .wtwr-sf-hero-card>small{color:#6f8299;font-size:9.5px}
#strategy #sfClear{min-height:44px}
@media(max-width:820px){
#strategy .sf-pick-grid{grid-template-columns:1fr!important}
#strategy .wtwr-sf-hero-wrap{grid-template-columns:1fr}
}
/* WTWR_STRATEGY_FINDER_REBUILD_V1 -- mode tabs, price bands, leaderboard */
#strategy .strategy-mode-tabs{display:flex;gap:7px;margin:0 0 14px}
#strategy .strategy-mode-tabs button{
padding:9px 16px;border-radius:10px;border:1px solid rgba(120,150,180,.22);
background:rgba(8,15,24,.6);color:#8fa0b3;font-size:11.5px;font-weight:800;cursor:pointer;
}
#strategy .strategy-mode-tabs button.active{
border-color:rgba(88,169,255,.56);background:linear-gradient(180deg,rgba(20,57,85,.5),rgba(8,25,39,.85));color:#9fd1ff;
}
#strategy .sf-price-bands{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 6px}
#strategy .sf-price-bands button{
padding:6px 9px;border-radius:7px;border:1px solid rgba(120,150,180,.2);
background:rgba(8,15,24,.6);color:#8fa0b3;font-size:10px;font-weight:800;cursor:pointer;
}
#strategy .sf-price-bands button.active{
border-color:rgba(88,169,255,.56);background:linear-gradient(180deg,rgba(20,57,85,.5),rgba(8,25,39,.85));color:#9fd1ff;
}
#strategy .sf-pick-col input[type="number"]#sfP1CustomOdds,
#strategy .sf-pick-col input[type="number"]#sfP2CustomOdds{
min-height:36px;border-radius:8px;border:1px solid rgba(120,150,180,.22);
background:rgba(8,15,24,.72);color:#e8eef5;padding:0 10px;font-size:11.5px;
}
#strategy tr.wtwr-sf-lb-below{opacity:.6}
#strategy tr.wtwr-sf-lb-below td{font-style:italic}
/* WTWR_STRATEGY_FINDER_BUILD_PANEL_LAYOUT_FIX_V1 (2026-09-19): "Build My
Own Pattern"'s three-column shell used the grid default (align-
items:stretch), so every column's bordered box stretched to match the
tallest one -- "Model" (colour/rank/price/custom odds for two picks),
by far the densest -- leaving "View" (one dropdown, one button) as a
tall box with a large empty gap in it. align-items:start lets each
column's box size to its own content instead, closing that gap; the
three columns stay equal-width regardless of screen width (unchanged,
already correct) via the existing repeat(3,minmax(0,1fr)) rule. */
#strategy .strategy-filter-shell{align-items:start}
/* WTWR_STRATEGY_FINDER_MATRIX_V1 -- pivot table, its own filter strip. */
#strategy #sfMatrixPanel .sf-mx-filter-row{
display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:8px 0 12px;
}
/* WTWR_STRATEGY_FINDER_MATRIX_SCOPE_LABEL_V1 (2026-09-19): must be
impossible to miss -- every row's numbers share this one active scope,
direct user instruction ("explicit and visible... could be misread as a
strategy that works everywhere when it may not"). Deliberately louder
than the plain-text count line beneath it. */
#strategy .wtwr-sf-mx-scope{
display:inline-block;margin:4px 0 10px;padding:7px 12px;border-radius:8px;
border:1px solid rgba(255,184,77,.4);background:rgba(255,184,77,.1);
color:#ffd27d;font-size:11px;font-weight:800;letter-spacing:.02em;
}
#strategy #sfMatrixPanel .sf-mx-price-bands{margin:0}
#strategy .sf-mx-price-bands button{
display:flex;flex-direction:column;align-items:center;gap:2px;min-width:64px;padding:6px 8px;
}
#strategy .sf-mx-price-bands button small{font-size:8.5px;font-weight:700;opacity:.75;font-variant-numeric:tabular-nums}
#strategy #sfMxCustomOdds{
min-height:34px;border-radius:8px;border:1px solid rgba(120,150,180,.22);
background:rgba(8,15,24,.72);color:#e8eef5;padding:0 10px;font-size:11.5px;max-width:220px;
}
#strategy #sfMatrixPanel label{display:flex;flex-direction:column;gap:4px;font-size:10px;color:#8fa0b3;font-weight:800}
#strategy #sfMatrixPanel select{
min-height:34px;border-radius:8px;border:1px solid rgba(120,150,180,.22);
background:rgba(8,15,24,.72);color:#e8eef5;padding:0 8px;font-size:11px;
}
/* WTWR_STRATEGY_FINDER_TABLE_WIDTH_FIX_V2 (2026-09-19): first attempt
(fixed 130px label column, width:auto table) overcorrected -- the table
no longer filled the container, leaving empty space on the right
instead of the left. This version: table width:100% (fills the
container, no void on either side), label column width:1% (the
standard table-layout:auto trick for "shrink this column to its
content, no more" -- NOT a literal 1% render width), data columns left
unconstrained so they absorb 100% of the remaining space, splitting it
evenly since all three have near-identical content shape (N/W/Win%/
Points every time). Layout only -- no data/calculation change. */
/* WTWR_STRATEGY_FINDER_ALLTIME_ALIGN_FIX_V1 (2026-09-19): real bug found
while investigating -- an old rule in the shared base stylesheet
(styles-member-results-strategy-monitor-...css, "WTWR STRATEGY NUMERIC
VISUAL POSITION -- 2026-08-13") applies position:relative;left:-60px to
columns 3+ on ANY .strategy-real-table whose header has exactly 10 or
15 columns, last-child-matched -- written for a much older table, with
no idea a new 10-column table (the Race-Condition leaderboard: 7 label
columns + 3 time windows = 10) would ever exist and accidentally match
it. Confirmed via computed style: every data column in that table was
shifted 60px left of its true centred position. Neutralised outright
for every table this file owns, regardless of column count, so this
can never silently reappear if a table's column count changes later. */
#strategy .wtwr-sf-mx-table th,#strategy .wtwr-sf-mx-table td{
position:static!important;left:auto!important;
}
/* WTWR_STRATEGY_FINDER_MINWIDTH_FIX_V1 (2026-09-19): the real cause of the
user's "All-Time column pushed off to the right" report. These new
tables all carry the legacy .strategy-real-table class (for its base
card/border styling), which also carries an old
".strategy-real-table{min-width:1540px}" floor from the shared base
stylesheet -- written for the old curated-card tables, before this
Matrix/Leaderboard rebuild existed. That floor silently overrode every
width fix already applied in this file (the 1%-shrink label column,
the two-line cell stacking): on any screen narrower than ~1580px the
table was still forced to 1540px wide, triggering horizontal scroll,
which clipped the rightmost (All-Time) column out of view -- exactly
what looked like "left-aligned/pushed toward the right edge". Missed
until now because the test harness used to verify the two-line-cell
fix never loaded the shared base stylesheet, so it never saw this
floor. Neutralised here, scoped to only the tables this file owns. */
#strategy .wtwr-sf-mx-table{min-width:0!important}
#strategy .wtwr-sf-mx-table{font-variant-numeric:tabular-nums;width:100%}
#strategy .wtwr-sf-mx-table th{
font-size:9px;letter-spacing:.04em;text-align:center;
border-bottom:1px solid rgba(120,150,180,.18);padding-bottom:6px;
}
#strategy .wtwr-sf-mx-table th small{display:block;font-size:8px;font-weight:600;opacity:.6;letter-spacing:0;margin-top:2px}
#strategy .wtwr-sf-mx-label{white-space:nowrap;font-size:11px;width:1%}
#strategy .wtwr-sf-mx-table th:first-child{width:1%}
#strategy .wtwr-sf-mx-vs{opacity:.5;font-size:9px;margin:0 3px}
/* WTWR_STRATEGY_FINDER_TWO_LINE_CELLS_V1 (2026-09-19): the cell itself no
longer forces nowrap -- that's what let table-layout:auto's minimum
content width exceed a normal screen's, overflowing the table wider
than its own width:100% container regardless of that setting. Each
line (N/W/Win%, then Points/P&L beneath) keeps nowrap individually so
neither line's own short text ever wraps awkwardly mid-number; the two
lines stacking is what actually narrows the column. Font-size/padding
trimmed slightly too, per direct user instruction ("both"). */
#strategy .wtwr-sf-mx-window{
text-align:center;padding:5px 7px;font-size:9.5px;border-left:1px solid rgba(120,150,180,.18);
}
#strategy .wtwr-sf-mx-line1{white-space:nowrap}
#strategy .wtwr-sf-mx-window span{display:inline-block;margin:0 2px}
#strategy .wtwr-sf-mx-n{color:#8fa0b3}
#strategy .wtwr-sf-mx-w{color:#8fa0b3}
#strategy .wtwr-sf-mx-pct{color:#c9d2e0}
#strategy .wtwr-sf-mx-pl{font-weight:800;white-space:nowrap;margin-top:2px}
#strategy .wtwr-sf-mx-pl.profit{color:#73e2a6}
#strategy .wtwr-sf-mx-pl.loss{color:#f27575}
#strategy .wtwr-sf-mx-window.wtwr-sf-below-min{opacity:.45;font-style:italic}
#strategy .sf-lb-subhead{
margin:22px 0 8px;font-size:13px;font-weight:900;color:#e8eef5;letter-spacing:.02em;
}
#strategy .sf-lb-subhead:first-of-type{margin-top:10px}
@media(max-width:1100px){
#strategy .wtwr-sf-mx-table{font-size:10px}
}
/* WTWR_STRATEGY_FINDER_TWO_SIDED_V1 (2026-09-20, direct user instruction):
research-tool disclaimer, deliberately louder than the plain muted intro
text -- same visual language as the matrix scope banner (amber), a
different fact being flagged so it gets its own colour (blue) rather
than competing with the scope banner for the same "pay attention" cue. */
#strategy .wtwr-sf-disclaimer{
margin:10px 0 14px;padding:10px 12px;border-radius:8px;
border:1px solid rgba(88,169,255,.32);background:rgba(88,169,255,.08);
color:#bcdcff;font-size:11px;line-height:1.6;
}
/* WTWR_STRATEGY_FINDER_TWO_SIDED_V1: one period cell now holds both
sides' own N/W/Win%/P/L(ROI), stacked, each with its own small "P1"/
"P2" label so which side a number belongs to is never left to be
inferred from column position alone. */
/* WTWR_STRATEGY_FINDER_TWO_SIDED_LAYOUT_FIX_V1: flex lives on this inner
div (rendered inside a plain | , which keeps
its normal table-cell display and existing padding) -- never on the |
itself, which would drop out of table column layout entirely. */
#strategy .wtwr-sf-mx-window-2up{display:flex;flex-direction:column;gap:6px}
#strategy .wtwr-sf-mx-side{padding-top:2px}
#strategy .wtwr-sf-mx-side+.wtwr-sf-mx-side{border-top:1px solid rgba(120,150,180,.14);padding-top:6px}
#strategy .wtwr-sf-mx-side-label{
font-size:7.5px;font-weight:900;letter-spacing:.07em;color:#5d7088;margin-bottom:1px;
}
#strategy .wtwr-sf-mx-today-empty{
text-align:center;padding:10px 7px;font-size:9.5px;font-style:italic;color:#7f91a5;
}
/* WTWR_STRATEGY_FINDER_COLOUR_SWATCHES_V1 (2026-09-20, direct user
instruction): "Display each selector in its actual colour" -- filled
pill buttons using --sf-swatch (set inline per button from SWATCH_HEX),
same active/inactive pattern as every other button-bar filter in this
file (bordered when inactive, filled when active), just coloured by the
pick colour itself rather than the generic blue accent. */
#strategy .wtwr-sf-swatch-row{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
#strategy .wtwr-sf-swatch{
padding:7px 11px;border-radius:8px;border:1px solid color-mix(in srgb, var(--sf-swatch, #7f91a5) 55%, transparent);
background:color-mix(in srgb, var(--sf-swatch, #7f91a5) 12%, #08111c);
color:var(--sf-swatch, #8fa0b3);font-size:10.5px;font-weight:800;cursor:pointer;
}
#strategy .wtwr-sf-swatch.active{
border-color:var(--sf-swatch, #58a9ff);
background:color-mix(in srgb, var(--sf-swatch, #58a9ff) 55%, #08111c);
color:#0a0f16;text-shadow:0 1px 0 rgba(255,255,255,.25);
}
#strategy .wtwr-sf-swatch-any{--sf-swatch:#8fa0b3}
/* WTWR_STRATEGY_FINDER_TWO_SIDED_V1: shared-sample note above the two
Build-mode hero cards -- states once, explicitly, that both cards below
are computed from the same matched race set (never left for the reader
to notice on their own). */
#strategy .wtwr-sf-shared-sample{
grid-column:1/-1;margin:0 0 4px;padding:8px 10px;border-radius:8px;
background:rgba(120,150,180,.08);border:1px solid rgba(120,150,180,.18);
color:#a9b8c9;font-size:10.5px;
}
/* WTWR_STRATEGY_FINDER_SAVED_V1 (2026-09-20, direct user instruction):
"Save this strategy" bar + saved list, same input/button chrome already
used elsewhere in this panel (#sfMxCustomOdds/.sf-price-bands button). */
#strategy .wtwr-sf-save-bar{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 10px}
#strategy .wtwr-sf-save-bar input[type="text"]{
flex:1 1 260px;min-height:38px;border-radius:8px;border:1px solid rgba(120,150,180,.22);
background:rgba(8,15,24,.72);color:#e8eef5;padding:0 12px;font-size:12px;
}
#strategy .wtwr-sf-save-bar button{
min-height:38px;padding:0 16px;border-radius:8px;border:1px solid rgba(88,169,255,.4);
background:linear-gradient(180deg,rgba(20,57,85,.6),rgba(8,25,39,.9));color:#9fd1ff;
font-size:11.5px;font-weight:800;cursor:pointer;
}
#strategy .wtwr-sf-save-bar #sfSaveStrategyCancelEdit{
border-color:rgba(120,150,180,.3);background:rgba(8,15,24,.6);color:#8fa0b3;
}
#strategy .wtwr-sf-saved-list-wrap{margin:10px 0 4px}
#strategy .wtwr-sf-saved-list{display:flex;flex-direction:column;gap:6px;margin-top:6px}
#strategy .wtwr-sf-saved-empty{
padding:14px;text-align:center;color:#7f91a5;font-size:11px;
border:1px dashed rgba(120,150,180,.22);border-radius:10px;
}
#strategy .wtwr-sf-saved-item{
display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;
padding:9px 12px;border-radius:10px;border:1px solid rgba(120,150,180,.16);
background:rgba(6,12,19,.5);
}
#strategy .wtwr-sf-saved-item-main{display:flex;flex-direction:column;gap:2px}
#strategy .wtwr-sf-saved-item-main strong{font-size:12px;color:#e8eef5}
#strategy .wtwr-sf-saved-item-def{font-size:10px;color:#8fa0b3}
#strategy .wtwr-sf-saved-item-actions{display:flex;gap:6px}
#strategy .wtwr-sf-saved-item-actions button{
padding:6px 10px;border-radius:7px;border:1px solid rgba(120,150,180,.22);
background:rgba(8,15,24,.6);color:#8fa0b3;font-size:10px;font-weight:800;cursor:pointer;
}
#strategy .wtwr-sf-saved-item-actions button[data-action="delete"]{
border-color:rgba(242,117,117,.35);color:#f29a9a;
}
@media(max-width:820px){
#strategy .wtwr-sf-save-bar{flex-direction:column;align-items:stretch}
#strategy .wtwr-sf-saved-item{flex-direction:column;align-items:flex-start}
}
|