/* the new look: market area (class-only, .u- prefix). Market (Conditions + News) and Compare. */

/* ── shared bits ── */
.u-market-mid{ color:var(--u-gold); }
.u-chg.u-market-mid{ color:var(--u-gold); }
.u-market-gold{ color:var(--u-gold); }
.u-stat .v.u-market-mid{ color:var(--u-gold); }
.u-market-wait{ margin:18px var(--u-pad) 0; color:var(--u-t3); font-size:15px; }
.u-market-small{ margin:10px var(--u-pad) 0; font-size:13px; color:var(--u-t3); line-height:1.5; }
.u-market-secsub{ margin:0 var(--u-pad); font-size:13.5px; color:var(--u-t3); }
.u-market-src{ margin-left:auto; font-size:13px; font-weight:500; color:var(--u-t3); letter-spacing:0; }
@media (min-width:1024px){ .u-market-wait, .u-market-small, .u-market-secsub{ margin-left:0; margin-right:0; } }
.u-market-idx-h small svg, .u-market-mstat svg, .u-market-tile .p svg{ flex:none; }

/* ── Market Score: the big number, its word, a thin band bar ── */
.u-market-hero{ margin-top:16px; }
.u-market-lab{ margin-top:14px; font-size:16px; font-weight:600; color:var(--u-t2); }
.u-market-hero .u-big{ margin-top:2px; }
.u-market-of{ font-size:20px; font-weight:600; color:var(--u-t3); margin-left:6px; letter-spacing:0; }
.u-market-hero .u-term b{ font-weight:600; }
.u-market-bar{ max-width:520px; margin-top:16px; }
.u-market-bar-t{ position:relative; display:flex; gap:3px; height:6px; }
.u-market-bar-t span{ height:100%; border-radius:3px; }
.u-market-bar-t .w{ flex:45; background:var(--u-red); }
.u-market-bar-t .n{ flex:10; background:var(--u-gold); }
.u-market-bar-t .s{ flex:45; background:var(--u-green); }
.u-market-bar-t i{ position:absolute; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%;
                   background:var(--u-t1); box-shadow:0 0 0 3px var(--u-bg); }
.u-market-bar-l{ display:grid; grid-template-columns:1fr auto 1fr; gap:8px; margin-top:8px; font-size:13px; color:var(--u-t3); }
.u-market-bar-l span:nth-child(2){ text-align:center; }
.u-market-bar-l span:last-child{ text-align:right; }

/* ── the four indexes: name, level, change, a small chart ── */
.u-market-idxs{ display:grid; grid-template-columns:minmax(0,1fr); gap:0 28px; padding:0 var(--u-pad); }
@media (min-width:700px){ .u-market-idxs{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .u-market-idxs{ padding:0; } }
.u-market-idx{ padding:12px 0 14px; border-bottom:1px solid var(--u-line); min-width:0; }
.u-market-idx-h{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:start; }
.u-market-idx-h .t{ font-size:16px; font-weight:600; }
.u-market-idx-h .s{ font-size:13.5px; color:var(--u-t3); margin-top:2px; }
.u-market-idx-h .v{ font-size:20px; font-weight:700; letter-spacing:-.01em; text-align:right; white-space:nowrap; }
.u-market-idx-h .v.mute{ color:var(--u-t3); }
.u-market-idx-h .v small{ display:flex; align-items:center; justify-content:flex-end; gap:4px; margin-top:1px; font-size:14px; font-weight:600; color:var(--u-t3); letter-spacing:0; }
.u-market-idx-h .v small.u-up{ color:var(--u-green); } .u-market-idx-h .v small.u-down{ color:var(--u-red); }
.u-chart.u-market-spark{ height:92px; margin:10px 0 0; }
@media (min-width:1024px){ .u-chart.u-market-spark{ height:112px; } }
.u-market-sess{ width:100%; }
.u-market-idx-x{ height:92px; margin-top:10px; display:flex; align-items:center; justify-content:center; color:var(--u-t3); font-size:14.5px; }
@media (min-width:1024px){ .u-market-idx-x{ height:112px; } }
.u-market-idxnote .u-note .u-btn{ margin-left:auto; flex:none; }
.u-market-idxnote .u-note span{ align-self:center; }

/* ── the economy (FRED): stats you can tap for what they mean ── */
.u-market-mstat{ display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; width:100%; text-align:left; background:none; color:inherit; cursor:pointer;
                 border:0; border-bottom:1px solid var(--u-line); border-radius:0; }
.u-market-mstat .h span{ display:inline-flex; align-items:center; gap:4px; }
.u-market-mstat .h.u-market-more{ color:var(--u-green); font-weight:600; font-size:13px; margin-top:4px; }
.u-market-mstat:hover .u-market-more{ text-decoration:underline; }
.u-market-explain .u-market-ex-h{ display:flex; align-items:center; gap:10px; }
.u-market-explain .u-market-ex-h b{ font-size:16px; }
.u-market-explain .u-market-ex-h .u-btn{ margin-left:auto; }
.u-market-explain p{ margin:8px 0 0; font-size:14.5px; line-height:1.5; color:var(--u-t2); }
.u-market-explain p b{ color:var(--u-t1); }

/* ── the Money Map: a heat map of sector flows ── */
.u-market-map{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:0 var(--u-pad); margin-top:12px; }
@media (min-width:700px){ .u-market-map{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:1024px){ .u-market-map{ padding:0; } }
.u-market-tile{ min-width:0; padding:10px 12px; border-radius:var(--u-r-sm); background:var(--u-raise); }
.u-market-tile .n{ font-size:13.5px; font-weight:600; color:var(--u-t2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.u-market-tile .p{ display:flex; align-items:center; gap:5px; margin-top:2px; font-size:18px; font-weight:700; color:var(--u-t1); white-space:nowrap; }
.u-market-tile .c{ font-size:13px; color:var(--u-t3); margin-top:1px; }
.u-market-tile[class*=" up"] .p svg{ color:var(--u-green); }
.u-market-tile[class*=" dn"] .p svg{ color:var(--u-red); }
.u-market-tile.up1{ background:color-mix(in srgb, var(--u-green) 9%, var(--u-raise)); }
.u-market-tile.up2{ background:color-mix(in srgb, var(--u-green) 17%, var(--u-raise)); }
.u-market-tile.up3{ background:color-mix(in srgb, var(--u-green) 26%, var(--u-raise)); }
.u-market-tile.up4{ background:color-mix(in srgb, var(--u-green) 35%, var(--u-raise)); }
.u-market-tile.dn1{ background:color-mix(in srgb, var(--u-red) 9%, var(--u-raise)); }
.u-market-tile.dn2{ background:color-mix(in srgb, var(--u-red) 17%, var(--u-raise)); }
.u-market-tile.dn3{ background:color-mix(in srgb, var(--u-red) 26%, var(--u-raise)); }
.u-market-tile.dn4{ background:color-mix(in srgb, var(--u-red) 35%, var(--u-raise)); }
.u-market-tile[class*=" up"] .c, .u-market-tile[class*=" dn"] .c{ color:var(--u-t2); }

/* ── News: which headlines, then one row per headline ── */
.u-market-chips{ display:flex; gap:4px; padding:12px var(--u-pad) 4px; overflow-x:auto; scrollbar-width:none; }
.u-market-chips::-webkit-scrollbar{ display:none; }
@media (min-width:1024px){ .u-market-chips{ padding:14px 0 4px; } }
.u-market-chips button{ flex:none; display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 14px; border-radius:999px;
                        border:0; background:none; color:var(--u-t3); font-size:15px; font-weight:600; }
.u-market-chips button:hover{ color:var(--u-t1); }
.u-market-chips button small{ font-size:13px; font-weight:600; opacity:.8; }
.u-market-chips button.on{ background:var(--u-green-t); color:var(--u-green); }
@media (min-width:1024px){ .u-market-newslist{ max-width:880px; } }
.u-row.u-market-news{ grid-template-columns:minmax(0,1fr) 16px; min-height:72px; padding:12px 0; }
.u-market-nb{ min-width:0; }
.u-market-nm{ display:flex; align-items:center; gap:8px; min-width:0; font-size:13px; color:var(--u-t3); }
.u-market-tk{ flex:none; padding:4px 7px; border-radius:6px; font-size:13px; font-weight:700; line-height:1.1; background:var(--u-blue-t); color:var(--u-blue); }
.u-market-tk.pos{ background:var(--u-gold-t); color:var(--u-gold); }
.u-market-tk.sig{ background:var(--u-green-t); color:var(--u-green); }
.u-market-held{ flex:none; font-size:13px; font-weight:600; color:var(--u-gold); }
.u-market-nh{ margin-top:6px; font-size:16px; font-weight:600; line-height:1.35; color:var(--u-t1); overflow-wrap:anywhere; }
a.u-market-news:hover .u-market-nh{ text-decoration:underline; text-underline-offset:3px; }

/* ── Compare: line colours (identity only — green and red stay for up and down) ── */
.u-market-c-backtest{ color:var(--u-blue); }
.u-market-c-paper{ color:var(--u-gold); }
.u-market-c-real{ color:var(--u-pink); }
/* Compare › Your tests: up to six tests, one colour each (never green or red) */
.u-market-c-t0{ color:var(--u-blue); } .u-market-c-t1{ color:var(--u-gold); } .u-market-c-t2{ color:var(--u-pink); }
.u-market-c-t3{ color:#a78bfa; } .u-market-c-t4{ color:#38c6d9; } .u-market-c-t5{ color:#f0935a; }
:root[data-theme="light"] .u-market-c-t3{ color:#6d4fd1; } :root[data-theme="light"] .u-market-c-t4{ color:#0e7f93; } :root[data-theme="light"] .u-market-c-t5{ color:#b85a1c; }
.u-market-c-none{ color:var(--u-t3); opacity:.45; }
@media (min-width:1024px){ .u-market-nocmp{ max-width:760px; } }
.u-market-sw{ display:inline-block; flex:none; width:14px; height:4px; border-radius:2px; background:currentColor; margin-right:9px; vertical-align:middle; position:relative; top:-1px; }
.u-market-dot{ display:inline-block; flex:none; width:10px; height:10px; border-radius:50%; border:2px solid currentColor; margin-right:9px; vertical-align:middle; position:relative; top:-1px; }
.u-market-cov.has .u-market-dot{ background:currentColor; }
.u-market-covrows{ margin-top:6px; }
.u-market-cov .u-ellip, .u-market-cov .s{ white-space:normal; }

/* the chart: % change from each line's own start, by day; labels in gutters left and right */
.u-market-cmp{ position:relative; height:240px; margin:22px var(--u-pad) 0; }
@media (min-width:1024px){ .u-market-cmp{ height:320px; margin:24px 0 0; } }
.u-chart.u-market-cmp{ height:240px; }
@media (min-width:1024px){ .u-chart.u-market-cmp{ height:320px; } }
.u-market-yl{ position:absolute; right:calc(100% - 40px); transform:translateY(-50%); text-align:right; font-size:13px; color:var(--u-t3); white-space:nowrap; }
.u-market-plot{ position:absolute; top:0; bottom:0; left:46px; right:64px; touch-action:pan-y; }
@media (min-width:1024px){ .u-market-yl{ right:calc(100% - 48px); } .u-market-plot{ left:58px; right:72px; } }
.u-market-plot svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.u-market-xl{ position:absolute; bottom:0; font-size:13px; color:var(--u-t3); white-space:nowrap; }
.u-market-el{ position:absolute; left:100%; margin-left:8px; transform:translateY(-50%); display:flex; align-items:center; gap:5px;
              font-size:13px; font-weight:700; color:var(--u-t1); white-space:nowrap; }
.u-market-el i, .u-market-tip i{ display:block; flex:none; width:8px; height:8px; border-radius:50%; background:currentColor; }
.u-market-scrub{ position:absolute; top:0; width:1px; background:var(--u-t3); opacity:0; pointer-events:none; }
.u-market-tip{ position:absolute; top:-6px; display:flex; flex-direction:column; gap:2px; padding:6px 10px; border-radius:10px; background:var(--u-raise2);
               box-shadow:var(--u-pop); font-size:13px; font-weight:600; white-space:nowrap; opacity:0; pointer-events:none; }
.u-market-tip span{ display:flex; align-items:center; gap:6px; color:var(--u-t1); }
.u-market-plot.scrub .u-market-scrub, .u-market-plot.scrub .u-market-tip{ opacity:1; }

/* the window picker: windows two lines don't both cover are greyed out */
.u-market-winrow{ display:flex; align-items:center; gap:10px; min-width:0; }
.u-market-winrow .u-ranges{ flex:1; min-width:0; }
.u-ranges.u-market-wins button:disabled{ opacity:.35; cursor:not-allowed; }
.u-ranges.u-market-wins button:disabled:hover{ color:var(--u-t3); }
@media (max-width:1023px){ .u-ranges.u-market-wins button{ height:44px; } }
.u-market-upd{ flex:none; padding-right:var(--u-pad); font-size:13px; color:var(--u-t3); }
@media (min-width:1024px){ .u-market-upd{ padding-right:0; } }

/* the lines: one row each, with its return and a switch */
.u-row.u-market-leg{ grid-template-columns:minmax(0,1fr) auto 40px; }
.u-row.u-market-leg.off{ grid-template-columns:minmax(0,1fr) auto; }
.u-row.u-market-leg .t{ display:flex; align-items:center; }
@media (min-width:1024px){ .u-row.u-market-leg .u-ellip, .u-row.u-market-leg .s{ white-space:normal; } }
.u-row.u-market-leg.hid .t{ color:var(--u-t3); text-decoration:line-through; }
.u-row.u-market-leg.hid .v{ color:var(--u-t3); }
.u-row.u-market-leg.off .u-market-sw{ opacity:.4; }
.u-market-pick{ margin:14px var(--u-pad) 0; }
@media (min-width:1024px){ .u-market-pick{ margin:14px 0 0; } }

/* side by side: stacked rows on a phone, a table on a computer */
.u-market-cmptable{ display:none; }
.u-market-cmptable td small{ display:block; font-size:13px; color:var(--u-t3); margin-top:1px; }
.u-market-cmptable th{ white-space:normal; vertical-align:bottom; }
.u-market-cmptable td.n{ font-weight:600; font-size:15.5px; }
.u-market-cmptable td.u-up{ color:var(--u-green); } .u-market-cmptable td.u-down{ color:var(--u-red); }
.u-market-cmpphone{ padding:0 var(--u-pad); }
@media (min-width:1024px){ .u-market-cmptable{ display:block; } .u-market-cmpphone{ display:none; } }
.u-market-cmpm{ padding:12px 0; border-bottom:1px solid var(--u-line); }
.u-market-cmpm:last-child{ border-bottom:0; }
.u-market-cmpm .k{ font-size:15px; font-weight:600; }
.u-market-cmpm .k small{ font-size:13px; font-weight:500; color:var(--u-t3); }
.u-market-vs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:6px; }
.u-market-vs.n2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.u-market-vs.n1{ grid-template-columns:minmax(0,1fr); }
.u-market-vs > div{ min-width:0; }
.u-market-vs .nm{ display:flex; align-items:center; font-size:13px; color:var(--u-t3); white-space:nowrap; overflow:hidden; }
.u-market-vs .nm .u-market-sw{ margin-right:6px; width:10px; }
.u-market-vs .x{ margin-top:1px; font-size:18px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.u-market-vs .x.u-up{ color:var(--u-green); } .u-market-vs .x.u-down{ color:var(--u-red); }

/* Compare: the two tabs (your tests / test · practice · real) */
.u-market-modes{ margin:4px 0 6px; }
/* Compare › Your tests: a test that is off is greyed, not struck through */
.u-market-tests .u-row.u-market-leg.hid .t{ text-decoration:none; }
.u-row.u-market-leg.blocked{ opacity:.55; cursor:not-allowed; }
.u-market-cmptable th small{ display:block; margin-top:2px; font-size:12.5px; font-weight:500; color:var(--u-t3); white-space:nowrap; }
/* on a phone, one line per test under each number: its name can be long */
.u-market-vs.list{ grid-template-columns:minmax(0,1fr); gap:4px; }
.u-market-vs.list > div{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.u-market-vs.list .nm{ font-size:14px; color:var(--u-t2); min-width:0; }
.u-market-vs.list .nm .u-ellip{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.u-market-vs.list .x{ flex:none; font-size:16px; margin-top:0; }
.u-market-retry{ margin-top:12px; padding:0 var(--u-pad); }
@media (min-width:1024px){ .u-market-retry{ padding:0; } }
/* Compare › Your tests with the AI review's 70/30 split (coach-combo, 2026-11-01): the cut, the stretches, the trades that differ */
.u-market-split{ position:absolute; top:0; width:0; border-left:1.5px dashed var(--u-gold); pointer-events:none; }
.u-market-splitl{ position:absolute; top:2px; transform:translateX(-50%); font-size:11.5px; font-weight:600; color:var(--u-gold);
                  background:var(--u-bg); padding:1px 5px; border-radius:6px; white-space:nowrap; pointer-events:none; }
.u-market-split3{ display:grid; gap:14px; min-width:0; }
.u-market-period h4, .u-market-diff h4{ margin:0 0 6px; font-size:15px; font-weight:700; line-height:1.35; overflow-wrap:anywhere; }
.u-market-period h4 small, .u-market-diff h4 small{ display:block; font-size:13px; font-weight:500; color:var(--u-t3); }
.u-market-diffs{ display:grid; gap:14px; min-width:0; }
.u-market-difflist{ margin:4px 0 8px; padding-left:18px; display:grid; gap:3px; font-size:14px; line-height:1.4; color:var(--u-t2); overflow-wrap:anywhere; }
.u-market-aitests{ margin-bottom:4px; }
@media (max-width:1023px){ .u-market-period-off{ display:none; } }
.u-market-periodtabs .u-tabs{ flex-wrap:wrap; }