/* Home: the Agent Blend #1 feature (#blend, .agb-), 2026-10-30. Jay: feature the PM1 section on the home page, below the picks: the blend,
   its top performer by range, the live and latest trades, and Ultra Pro. Tokens only (site.css), so the light/dark toggle moves it.
   Every live region keeps its size whatever it holds: the top card, three runner slots, one blend line, the panel's rows. */
.hb{padding:56px 0;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.agb-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px;align-items:stretch}
.agb-main{display:flex;flex-direction:column;min-width:0}
.agb-h{margin:10px 0 10px}
.agb-h span{display:block}
.agb-lede{font-size:17px;line-height:1.55;color:var(--ink-2);max-width:34em}
.agb-tabs{align-self:flex-start;display:inline-flex;gap:4px;margin:20px 0 14px;padding:4px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line-2)}
.agb-tabs button{min-height:40px;min-width:84px;padding:0 16px;border:0;border-radius:999px;background:none;font:700 14px var(--sans);color:var(--ink-3);cursor:pointer}
.agb-tabs button[aria-selected="true"]{background:var(--paper);color:var(--ink);box-shadow:var(--shadow)}
.agb-top{position:relative;min-height:236px;border-radius:var(--r-lg);background:var(--bg);border:2px solid var(--brand);padding:20px 22px;box-shadow:var(--shadow)}
.agb-top-k{display:flex;align-items:center;gap:8px;font:700 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--warn-ink)}
.agb-top-k i{width:8px;height:8px;border-radius:50%;background:var(--warn)}
.agb-top-row{display:flex;align-items:center;gap:16px;margin-top:14px}
.agb-face{width:64px;height:64px;border-radius:50%;background:var(--paper);border:1px solid var(--line-2);flex:none;padding:6px}
.agb-name{font:800 22px/1.15 var(--sans);color:var(--ink)}
.agb-mkt{font-size:14px;color:var(--ink-3);margin-top:2px}
.agb-big{margin-left:auto;text-align:right}
.agb-big{min-width:12ch}
.agb-big b{display:block;font:800 clamp(30px,3.6vw,40px)/1 var(--sans);letter-spacing:-.02em;color:var(--gain);font-variant-numeric:tabular-nums}
.agb-big small{display:block;margin-top:6px;font:600 13px/1.3 var(--sans);color:var(--ink-2)}
.agb-pill{display:inline-block;margin-top:6px;padding:3px 9px;border-radius:999px;background:var(--gain-soft);color:var(--gain);font:800 13px/1.2 var(--sans)}
.agb-runners{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line-2)}
.agb-run{display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;row-gap:2px;align-items:center;min-height:62px;padding:10px 12px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line)}
.agb-run img{grid-row:1 / span 2;width:32px;height:32px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);padding:2px}
.agb-run-n{font:700 14px/1.2 var(--sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agb-run-n small{font:600 12px var(--sans);color:var(--ink-3);margin-left:4px}
.agb-run b{font:800 15px/1.2 var(--sans);font-variant-numeric:tabular-nums}
.agb-run b.up{color:var(--gain)} .agb-run b.dn{color:var(--drop)}
.agb-total{display:flex;flex-wrap:nowrap;gap:6px 12px;align-items:baseline;min-height:24px;margin-top:14px;font-size:14.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden}
.agb-total [data-agb-tots]{overflow:hidden;text-overflow:ellipsis;min-width:0}
.agb-total b{font-weight:800;font-variant-numeric:tabular-nums}
.agb-total b.dn{color:var(--drop)} .agb-total b.up{color:var(--gain)}
.agb-cta{margin-top:auto!important;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:22px;padding:18px 20px;border-radius:var(--r);background:var(--brand-soft)}
.agb-cta p{flex:1 1 260px;font-size:15px;line-height:1.5;color:var(--ink)}
.agb-cta p b{font-weight:800}
.agb-fine{margin-top:12px}
.agb-panel{display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line-2);box-shadow:var(--shadow);overflow:hidden;min-width:0}
.agb-list{flex:1;display:flex;flex-direction:column}
.agb-list .agb-tr{flex:1 1 auto;max-height:96px}
.agb-tr-m span{white-space:nowrap}
.agb-ph{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line-2)}
.agb-ph h3{font:800 17px/1.2 var(--sans);color:var(--ink)}
.agb-live{display:inline-flex;align-items:center;gap:6px;font:700 12.5px var(--sans);color:var(--ink-3)}
.agb-live i{width:8px;height:8px;border-radius:50%;background:var(--gain)}
.agb-sub{padding:10px 18px 0;font:700 11.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.agb-empty{margin:10px 18px 4px;padding:12px 14px;border:1px dashed var(--line-3);border-radius:var(--r-sm);font-size:14px;color:var(--ink-2)}
.agb-tr{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line)}
.agb-tr:last-child{border-bottom:0}
.agb-tr img{width:40px;height:40px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);padding:3px}
.agb-tr-t{font:700 15px/1.25 var(--sans);color:var(--ink)}
.agb-side{display:inline-block;margin-right:6px;padding:2px 8px;border-radius:999px;border:1px solid var(--line-3);font:700 12px/1.3 var(--sans);color:var(--ink)}
.agb-side.up{border-color:transparent;background:var(--brand-soft);color:var(--brand-ink)}
.agb-tr-m{margin-top:3px;font-size:13px;color:var(--ink-3)}
.agb-tr-n{text-align:right;font:800 16px/1.2 var(--sans);font-variant-numeric:tabular-nums}
.agb-tr-n.up{color:var(--gain)} .agb-tr-n.dn{color:var(--drop)}
.agb-tr-n small{display:block;font:600 12.5px var(--sans);color:var(--ink-3)}
.agb-links{display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px;border-top:1px solid var(--line-2);background:var(--surface-2)}
.agb-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--line-3);background:var(--paper);font:700 14px var(--sans);color:var(--ink)}
@media (max-width:900px){.agb-grid{grid-template-columns:1fr}}
@media (max-width:560px){.hb{padding:40px 0}.agb-top{padding:16px}.agb-top-row{flex-wrap:wrap}.agb-big{margin-left:0;text-align:left;flex-basis:100%}.agb-runners{grid-template-columns:1fr}.agb-cta .btn{width:100%}}

/* open trade card: same row grid as a closed one, a live badge, the price now and the window's clock as a bar */
.agb-open{margin:8px 12px 4px;padding:12px 14px;border-radius:var(--r);border:2px solid var(--brand);background:var(--surface-2)}
.agb-open .agb-tr{padding:0;border:0}
.agb-badge{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink);font:800 11px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;vertical-align:2px}
.agb-badge i{width:6px;height:6px;border-radius:50%;background:var(--brand)}
.agb-clock{display:flex;align-items:center;gap:10px;margin-top:10px;font:700 12.5px var(--sans);color:var(--ink-3);font-variant-numeric:tabular-nums}
.agb-clock span{flex:1;height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.agb-clock span i{display:block;height:100%;border-radius:999px;background:var(--brand)}
.agb-tr-n em{display:block;font:700 11px/1.3 var(--sans);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:900px){.agb-top{min-height:0}}
@media (max-width:560px){.agb-runners{grid-template-columns:1fr}.agb-run{min-height:56px}.agb-total{flex-wrap:wrap;white-space:normal;min-height:52px}}
/* states: before the feeds answer, and when they never do */
.agb-run.is-empty{color:var(--ink-3);font-size:13px}
.agb-run.is-empty .agb-run-n{color:var(--ink-3);font-weight:600}
.hb [data-agb-wait]{color:var(--ink-3)}
.agb-skel{display:block;height:14px;border-radius:6px;background:var(--line)}
.agb-tabs button:focus-visible,.agb-links a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.agb-big b.dn{color:var(--drop)}
.agb-pill.dn{background:var(--drop-soft);color:var(--drop)}
@media (prefers-reduced-motion:no-preference){.agb-clock span i{transition:width 1s linear}}

/* links: the agent's name, its runner card and each trade row open the desk where it trades. The card and the row are whole targets
   (the link's ::after covers them), so a tap anywhere on them works; the underline shows on hover and focus only */
.agb-name a,.agb-tr-a,.agb-run-n{color:inherit;text-decoration:none}
.agb-name a:hover,.agb-tr-a:hover,.agb-run-n:hover{text-decoration:underline;text-underline-offset:3px}
.agb-run,.agb-tr{position:relative}
.agb-run-n::after,.agb-tr-a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.agb-run:hover,.agb-list .agb-tr:hover{background:var(--surface-2)}
.agb-name a:focus-visible,.agb-tr-a:focus-visible,.agb-run-n:focus-visible{outline:none}
.agb-run:focus-within,.agb-tr:focus-within{outline:2px solid var(--focus);outline-offset:-2px}
/* the roster: every agent's desk as plain links in the page, so a reader (and a crawler) can open any of them without the feeds */
.agb-roster{grid-column:1 / -1;margin-top:8px;padding-top:20px;border-top:1px solid var(--line)}
.agb-roster h3{font:800 15px/1.2 var(--sans);color:var(--ink);margin-bottom:12px}
.agb-roster ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px;list-style:none}
.agb-roster a{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 12px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--bg);color:var(--ink)}
.agb-roster a:hover{border-color:var(--brand)}
.agb-roster a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.agb-roster img{width:32px;height:32px;border-radius:50%;background:var(--paper);border:1px solid var(--line);padding:2px;flex:none}
.agb-roster b{display:block;font:700 14px/1.2 var(--sans)}
.agb-roster small{display:block;font:600 12px/1.3 var(--sans);color:var(--ink-3)}
@media (max-width:560px){.agb-roster ul{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Agent cards (.agc-), the hubs' roster, 2026-10-30 (Jay: "showcase everything better, like it's Agent Brad").
   One card per agent: the moving face (site.js [data-face-scope]), name to the profile, market, one line of character, the live line
   and today's line (both from the agent's own feed, the 'agent:latest' event site.js fires), the real-money chip (Agent Blend #1 today),
   and Watch live / Profile. Every line keeps its height whatever it says. */
.agc-sec{padding:56px 0}
.agc-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:22px}
.agc-head .h2 span{display:block}
.agc-stats{display:flex;flex-wrap:wrap;gap:8px}
.agc-stat{min-width:120px;padding:10px 14px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line-2)}
.agc-stat b{display:block;font:800 22px/1.1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.agc-stat b.up{color:var(--gain)} .agc-stat b.dn{color:var(--drop)}
.agc-stat small{display:block;margin-top:3px;font:700 11.5px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.agc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;list-style:none}
.agc{position:relative;display:flex;flex-direction:column;min-width:0;padding:18px 16px 16px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line-2);box-shadow:var(--shadow);border-top:3px solid var(--brand)}
.agc-top{display:flex;align-items:center;gap:12px}
.agc-face{width:72px;height:72px;flex:none;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);overflow:hidden;display:grid;place-items:center}
.agc-face img,.agc-face svg{width:72px;height:72px}
.agc-name{font:800 19px/1.15 var(--sans);color:var(--ink)}
.agc-name a{color:inherit}
.agc-name a:hover{text-decoration:underline;text-underline-offset:3px}
.agc-mkt{margin-top:3px;font:700 12px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--brand-ink)}
.agc-tag{margin-top:12px;min-height:3.9em;font-size:14px;line-height:1.3;color:var(--ink-2)}
.agc-lines{margin-top:12px;padding:10px 12px;border-radius:var(--r-sm);background:var(--surface-2);display:grid;gap:6px}
.agc-line{display:flex;justify-content:space-between;gap:8px;min-height:20px;font-size:13px;color:var(--ink-3);white-space:nowrap}
.agc-line b{font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.agc-line b[data-dir="up"]{color:var(--gain)} .agc-line b[data-dir="down"]{color:var(--drop)}
.agc-pm1{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:10px;min-height:26px;padding:3px 10px;border-radius:999px;background:var(--chip);font:700 12.5px/1.2 var(--sans);color:var(--ink-2)}
.agc-pm1 b.up{color:var(--gain)} .agc-pm1 b.dn{color:var(--drop)}
.agc-go{display:flex;gap:8px;margin-top:auto;padding-top:14px}
.agc-go .btn{flex:1;min-height:44px}
@media (max-width:1100px){.agc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.agc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.agc-grid{grid-template-columns:1fr}.agc-tag{min-height:0}.agc-stat{flex:1 1 40%}}
/* 2026-10-30 (Jay: "Mobile version looks ugly ... the cards are all like stacked up"): on a phone the agent cards become one swipe row
   with the next card peeking, and the three runners sit side by side as small tiles. The row scrolls inside itself, edge to edge
   of the gutter, so the page never scrolls sideways. */
.agc-swipe{display:none}
@media (max-width:520px){
  .agc-grid{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
    margin-inline:calc(-1 * var(--gutter));padding:4px var(--gutter) 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .agc-grid::-webkit-scrollbar{display:none}
  .agc{flex:0 0 82%;scroll-snap-align:start}
  .agc-tag{min-height:3.9em}
  .agc-swipe{display:flex;align-items:center;gap:8px;margin:-6px 0 12px;font:600 13px/1.3 var(--sans);color:var(--ink-3)}
  .agc-swipe b{flex:none;min-width:52px;padding:2px 8px;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink);font-weight:800;text-align:center;font-variant-numeric:tabular-nums}
  .agb-runners{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .agb-run{grid-template-columns:1fr;grid-template-rows:auto;justify-items:center;text-align:center;row-gap:4px;min-height:98px;padding:10px 6px}
  .agb-run img{grid-row:auto;width:30px;height:30px}
  .agb-run-n{max-width:100%;font-size:13px}
  .agb-run-n small{display:none}
  .agb-run b{font-size:14px}
  .agb-run.is-empty .agb-run-n{white-space:normal;font-size:12px;line-height:1.3}
}
/* 2026-10-30: the account curve and the proof line (Ross's add-ons). Fixed height, so nothing moves when the feed lands. */
.agb-curve{margin-top:12px;padding:10px 12px 8px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line-2)}
.agb-curve svg{display:block;width:100%;height:56px}
.agb-curve-0{stroke:var(--line-3);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.agb-curve-l{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.agb-curve-l.up{stroke:var(--gain)} .agb-curve-l.dn{stroke:var(--drop)}
.agb-curve-a{stroke:none;opacity:.14} .agb-curve-a.up{fill:var(--gain)} .agb-curve-a.dn{fill:var(--drop)}
.agb-curve-k{margin-top:6px;min-height:20px;font-size:13px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agb-curve-k b{font-weight:800} .agb-curve-k b.up{color:var(--gain)} .agb-curve-k b.dn{color:var(--drop)}
.agb-proof{margin-top:12px;font-size:13px;line-height:1.45;color:var(--ink-2)}
.agb-proof a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:520px){.agb-curve-k{white-space:normal;min-height:40px;line-height:1.45}}
/* 2026-10-31: the contract count in /n's brand ticket (nz-cash.css .nzt-tk / .nzt-tki), so a trade looks the same on the home page and on PM1 */
.agb-tk{display:inline-flex;align-items:center;gap:5px;color:var(--brand-ink);font:600 13px/1.2 var(--sans);vertical-align:-2px}
.agb-tk b{font-weight:800;font-variant-numeric:tabular-nums}
.agb-tki{width:19px;height:12px;color:var(--brand);flex:none;filter:drop-shadow(0 1px 1px rgba(36,89,240,.25))}
/* 2026-10-31: compact, winners-only while the group is behind in every range (pickDefault): no group total, no curve */
.agb-win .agb-total,.agb-win .agb-curve{display:none}
