/* Agent Blend #1's page (Wave 1, 2026-10-25): tools/blend/build_blend_page.py, assets/blend/blend.js. Tokens only (assets/site.css),
   so light and dark both work; losses on --drop, gains on --gain, never colour alone (every number carries its sign). */
.bl-page{--bl-r:var(--r-lg,16px)}
.bl-page .is-up{color:var(--gain)}
.bl-page .is-down{color:var(--drop)}
.bl-hero{padding:28px 0 40px}
.bl-hero-grid{display:grid;gap:28px;align-items:start}
@media(min-width:960px){.bl-hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);gap:48px}}
.bl-crumbs{color:var(--ink-3)}
.bl-crumbs a{color:var(--ink-2)}
.bl-crumbs a:hover{color:var(--ink)}
.bl-crumbs li+li::before{content:"/";margin-right:6px;color:var(--ink-3)}
.bl-crumbs li::after{content:none}
.bl-crumbs li{list-style:none}
.bl-crumbs{padding:0}
.bl-h1{margin:10px 0 14px}
.bl-h1 span{display:block}
.bl-h1-2{color:var(--brand)}
.bl-cast{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 12px;padding:0;list-style:none}
.bl-cast li{list-style:none}
.bl-cast a{display:block;width:40px;height:40px;border-radius:50%;overflow:hidden;border:2px solid var(--paper);box-shadow:0 0 0 1px var(--line-2);background:var(--surface-2)}
.bl-cast img{width:100%;height:100%;display:block}
.bl-cast .is-paused a{opacity:.45}
.bl-cast a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.bl-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:0;list-style:none}
.bl-chips li{list-style:none;font:600 13px/1 var(--sans);color:var(--ink-2);background:var(--chip);border:1px solid var(--line);border-radius:999px;padding:8px 12px;min-width:4ch}
.bl-ctas{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.bl-card{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--bl-r);padding:22px;box-shadow:var(--shadow)}
.bl-card-k{font:600 14px/1.3 var(--sans);color:var(--ink-2);margin:0}
.bl-big{font:800 clamp(44px,6vw,64px)/1 var(--cond);margin:8px 0 16px;min-height:1em}
.bl-split{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin:0;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bl-split dt{font:500 12.5px/1.3 var(--sans);color:var(--ink-3)}
.bl-split dd{margin:4px 0 0;font:700 17px/1.2 var(--sans);min-height:1.2em}
.bl-asof{font-size:12.5px;color:var(--ink-3);margin:12px 0 0;min-height:1.5em}
.bl-verdict{background:var(--surface-2);border-bottom:1px solid var(--line)}
.bl-verdict p{margin:0;padding:18px 0;font:600 17px/1.5 var(--sans);color:var(--ink);max-width:62em;min-height:3em}
.bl-sec{padding:56px 0}
.bl-sec--alt{background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bl-h2{font:800 clamp(26px,3vw,34px)/1.05 var(--cond);text-transform:uppercase;margin:0 0 8px}
.bl-sub{color:var(--ink-2);margin:0 0 20px;max-width:46em}
.bl-chart{margin:0 0 20px;background:var(--paper);border:1px solid var(--line);border-radius:var(--bl-r);padding:12px 12px 8px}
.bl-plot{height:240px}
.bl-plot svg{display:block;max-width:100%;overflow:visible}
.bl-plot .bl-net{fill:none;stroke:var(--brand);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.bl-plot .bl-gross{fill:none;stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}
.bl-plot .bl-zero{stroke:var(--line-3);stroke-width:1;vector-effect:non-scaling-stroke}
.bl-plot .bl-ax{fill:var(--ink-3);font:500 11px/1 var(--sans)}
.bl-legend{display:flex;flex-wrap:wrap;gap:16px;font-size:12.5px;color:var(--ink-2);padding:8px 4px 0}
.bl-key::before{content:"";display:inline-block;width:18px;height:0;border-top:2.5px solid var(--brand);vertical-align:middle;margin-right:6px}
.bl-key--gross::before{border-top:1.5px dashed var(--ink-3)}
.bl-key--zero::before{border-top:1px solid var(--line-3)}
.bl-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 16px}
@media(min-width:760px){.bl-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}}
.bl-tiles>div{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px}
.bl-tiles dt{font:500 12.5px/1.3 var(--sans);color:var(--ink-3)}
.bl-tiles dd{margin:6px 0 4px;font:800 24px/1.1 var(--cond);min-height:1.1em}
.bl-tiles p{margin:0;font-size:12px;color:var(--ink-3);min-height:1.4em}
.bl-days summary,.bl-q summary{cursor:pointer;font:700 15px/1.3 var(--sans);padding:12px 0;min-height:44px;display:flex;align-items:center}
.bl-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bl-tbl{width:100%;border-collapse:collapse;font-size:14px;background:var(--paper)}
.bl-tbl th,.bl-tbl td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.bl-tbl th:first-child,.bl-tbl td:first-child{text-align:left}
.bl-tbl thead th{font:600 12px/1.2 var(--sans);color:var(--ink-3);background:var(--surface-2)}
.bl-tbl tbody th{font-weight:600}
.bl-ag{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.bl-agent{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-height:36px}
.bl-agent img{width:28px;height:28px;border-radius:50%;flex:none;background:var(--surface-2)}
.bl-agent-t{display:flex;flex-direction:column;line-height:1.2}
.bl-agent-t small{font-size:12px;color:var(--ink-3);font-weight:500}
.bl-agent:hover b{text-decoration:underline}
.bl-ag tr.is-paused th,.bl-ag tr.is-paused td{color:var(--ink-3)}
.bl-ag tr.is-paused .is-up,.bl-ag tr.is-paused .is-down{opacity:.75}
.bl-sep td{text-align:left!important;font:700 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);background:var(--surface-2)}
.bl-barc{width:22%;min-width:90px}
.bl-bar{display:block;height:8px;border-radius:4px;background:var(--gain)}
.bl-bar.is-down{background:var(--drop)}
.bl-wait{color:var(--ink-3);text-align:left!important;height:220px;vertical-align:top}
.bl-groups{margin:14px 0 0;color:var(--ink-2);font-size:14px;min-height:1.5em}
.bl-paused-note{margin-top:6px;font-size:13px}
.bl-cols{display:grid;gap:32px}
@media(min-width:900px){.bl-cols{grid-template-columns:1fr 1fr;gap:48px}}
.bl-steps{margin:12px 0 0;padding-left:20px;display:grid;gap:12px;color:var(--ink-2)}
.bl-steps b,.bl-do b{color:var(--ink)}
.bl-proof,.bl-do{margin:12px 0 0;padding-left:20px;display:grid;gap:10px;color:var(--ink-2)}
.bl-context{margin:16px 0 0;font-size:14px;color:var(--ink-2);border-left:3px solid var(--line-3);padding-left:12px}
.bl-do a{font-weight:600;white-space:nowrap}
.bl-form{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--bl-r);padding:22px;display:grid;gap:14px;align-self:start}
.bl-run p{margin:0;color:var(--ink-2)}
.bl-price b{color:var(--ink)}
.bl-form-h{font:800 22px/1.1 var(--cond);text-transform:uppercase;margin:0}
.bl-q{border-bottom:1px solid var(--line)}
.bl-q p{margin:0 0 14px;color:var(--ink-2);max-width:46em}
.bl-disc{margin-top:24px}
.bl-page [data-bl-state="error"] .bl-asof{color:var(--warn-ink)}
@media(max-width:600px){.bl-hide-sm{display:none}.bl-ctas .btn{width:100%}.bl-sec{padding:44px 0}.bl-tbl th,.bl-tbl td{padding:9px 8px}}
@media(prefers-reduced-motion:reduce){.bl-page *,.bl-chev{transition:none!important;animation:none!important}}
/* Ross's blend (2026-10-25): fees beside the headline, the last closed day, the jump row, day rows with agents, the range toggle */
.bl-big-sub{margin:-8px 0 14px;font-size:13.5px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:4px 10px;min-height:1.4em}
.bl-last{margin:12px 0 0;font-size:13px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:4px 8px;min-height:1.4em}
.bl-last b{font-weight:700;color:var(--ink)}
.bl-last b.is-down{color:var(--drop)}.bl-last b.is-up{color:var(--gain)}
.bl-jump{display:flex;flex-wrap:wrap;gap:6px 18px;padding:0 0 16px;font:600 13.5px/1.2 var(--sans)}
.bl-jump a{color:var(--brand-ink);text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.bl-jump a:hover{text-decoration:underline}
.bl-h3{font:800 20px/1.1 var(--cond);text-transform:uppercase;margin:28px 0 6px}
.bl-daylist{display:grid;gap:8px}
.bl-day{background:var(--paper);border:1px solid var(--line);border-radius:12px}
.bl-day summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:8px;align-items:center;padding:12px 14px;min-height:48px;font-size:14px}
.bl-day summary::-webkit-details-marker{display:none}
.bl-day summary .num{text-align:right}
.bl-day[open] summary{border-bottom:1px solid var(--line)}
.bl-dl-d{font-weight:700}
.bl-dl{list-style:none;margin:0;padding:6px 14px;display:grid;gap:2px}
.bl-dl li{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.2fr);gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.bl-dl li:last-child{border-bottom:0}
.bl-dl li .num{text-align:right}
.bl-dl-a{display:flex;align-items:center;gap:8px;min-width:0}
.bl-dl-a img{width:22px;height:22px;border-radius:50%;flex:none}
.bl-dl-a small{color:var(--ink-3)}
.bl-dl-log{display:inline-flex;margin:4px 14px 12px;font-weight:600;font-size:13.5px;min-height:32px;align-items:center}
.bl-ag-head{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;justify-content:space-between;margin-bottom:12px}
.bl-ag-head .bl-sub{margin:0}
.bl-seg{display:inline-flex;border:1px solid var(--line-3);border-radius:999px;padding:3px;background:var(--paper)}
.bl-seg button{border:0;background:none;font:600 13.5px/1 var(--sans);color:var(--ink-2);padding:0 14px;min-height:36px;border-radius:999px;cursor:pointer}
.bl-seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.bl-seg button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.bl-incl{display:none;font-size:11.5px;color:var(--ink-3);font-weight:500}
@media(max-width:600px){.bl-incl{display:block}}
.bl-inline{margin:10px 0 0;font-size:14px}
.bl-inline a{font-weight:600}
.bl-sh{margin:10px 0 0;color:var(--ink-2)}
.bl-sh b{color:var(--ink)}
@media(max-width:600px){.bl-day summary{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1.6fr)}.bl-dl li{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}.bl-dl li>.num:nth-child(2){display:none}}

/* 2026-10-25 (Jay: "make it collapsed first and let it be able to expand and show its best day ... allow the columns to be clickable"):
   sortable headers, rows that open to the agent's days, and the Show all button on PM1's page */
.bl-sort{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:4px;min-height:28px}
.bl-sort.is-on{color:var(--ink)}
.bl-sort:hover{color:var(--ink)}
.bl-sort:focus-visible,.bl-agent:focus-visible,.bl-showall:focus-visible{outline:3px solid var(--focus,var(--brand));outline-offset:2px;border-radius:6px}
button.bl-agent{border:0;background:none;padding:0;font:inherit;text-align:left;cursor:pointer;width:100%}
.bl-chev{width:8px;height:8px;margin-left:auto;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:transform .15s;flex:none}
.bl-agent[aria-expanded="true"] .bl-chev{transform:rotate(-135deg)}
.bl-row{cursor:pointer}
.bl-row:hover th,.bl-row:hover td{background:var(--surface-2)}
.bl-x td{text-align:left!important;white-space:normal!important;background:var(--surface-2);padding:12px 14px 14px!important}
.bl-x-in{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:flex-end}
.bl-x-s{display:flex;flex-direction:column;gap:2px;min-width:0}
.bl-x-s small{font:500 12px/1.2 var(--sans);color:var(--ink-3)}
.bl-x-s b{font:700 16px/1.2 var(--sans)}
.bl-x-s em{font:500 12.5px/1.2 var(--sans);font-style:normal;color:var(--ink-3)}
.bl-x-s b.is-up{color:var(--gain)}
.bl-x-s b.is-down{color:var(--drop)}
.bl-x-a{margin-left:auto;font:600 14px var(--sans);color:var(--brand-ink,var(--brand))}
.bl-showall{min-height:40px;padding:0 18px;border:1px solid var(--line-3);border-radius:999px;background:var(--paper);font:700 14px var(--sans);color:var(--ink);cursor:pointer}
.bl-showall:hover{border-color:var(--ink-3)}
.bl-best-usd{margin:2px 0 0!important;font:500 12.5px/1.3 var(--sans)!important;color:var(--ink-3)}

/* 2026-10-25 (Jay: "positioning of things changes - so keep it fixed so it looks good"): the agents table keeps its columns when it is
   sorted or refreshed. Fixed layout with set widths for the number columns (the agent column takes the rest), and the sort arrow's room is
   always kept, on the left of a number header so the label still lines up with the numbers under it */
.bl-ag{table-layout:fixed}
.bl-ag thead th:nth-child(2){width:7em}
.bl-ag thead th:nth-child(3){width:6.5em}
.bl-ag thead th:nth-child(4){width:7.5em}
.bl-ag thead th:nth-child(5){width:9.5em}
.bl-ag thead th:nth-child(6){width:26%}
.bl-ag td,.bl-ag th{overflow:hidden;text-overflow:ellipsis}
.bl-sort::after{content:"";flex:none;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;visibility:hidden}
.bl-sort.is-on::after{visibility:visible}
.bl-sort[data-dir="asc"]::after{transform:rotate(180deg)}
.bl-ag thead th:not(:first-child) .bl-sort{flex-direction:row-reverse}
.bl-sort:focus:not(:focus-visible){outline:0}
@media (max-width:600px){
  .bl-ag thead th:nth-child(2){width:5.4em}
  .bl-ag thead th:nth-child(3){width:4.8em}
  .bl-ag thead th:nth-child(5){width:8.4em}
  .bl-ag th,.bl-ag td{padding-left:6px;padding-right:6px}
  .bl-agent{gap:8px}
  .bl-agent-t{min-width:0}
  .bl-agent-t b,.bl-agent-t small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* a phone: Won goes, the chevron keeps its room */
@media (max-width:480px){.bl-ag thead th:nth-child(3),.bl-ag tbody td:nth-child(3){display:none}}