/* Theme 2.0 Today. Prefix .td. Sizes from the prototype: H1 52/400, panel title 18/500, big figures 48/400, labels 12 to 13, gap 6. */
.td-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 12px 0 18px; }
.td-head .t2-lead { font-size: 14px; max-width: 680px; margin-top: 10px; }
.td-range { position: relative; z-index: 35; }
.td-range__btn { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--pbd); background: var(--seg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--tx); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.td-range__btn svg { width: 14px; height: 14px; }
.td-range__btn:focus-visible, .td-range__menu button:focus-visible { outline: 2px solid var(--r3); outline-offset: 2px; }
.td-range__menu { position: absolute; right: 0; top: 54px; width: 190px; padding: 6px; border-radius: 10px; display: flex; flex-direction: column; gap: 2px; }
.td-range__menu[hidden] { display: none; }
.td-range__menu button { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--tx); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.td-range__menu button:hover { background: var(--seg); }
.td-range__menu button[aria-checked="true"] { background: var(--seg); font-weight: 500; }

/* Hero: flow on the canvas (2fr), conviction panel (1fr) */
.td-hero { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap); align-items: stretch; margin-bottom: var(--gap); }
.td-flow { min-width: 0; padding: 8px 0 0; display: flex; flex-direction: column; gap: 18px; }
.td-flow__stat { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 14px; min-height: 90px; flex-direction: column; }
.td-flow__num { font-size: 64px; font-weight: 400; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.td-flow__chip { font-size: 12px; font-weight: 500; }
.td-flow__cap { font-size: 12px; }
.td-flowchart { height: 520px; }
.td-flow__note { max-width: 760px; margin: 0; }
.td-conv-panel { display: flex; flex-direction: column; gap: 14px; }
.td-conv-panel .t2-panel-head { margin-bottom: 0; }
.td-dim { align-self: flex-start; }
.td-conv { flex: 1; min-height: 360px; }
.td-conv-note { margin: 0; }
.td-conv-ssr { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.td-conv-ssr li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.td-conv-ssr a { color: var(--t2); }
.td-conv-ssr b { font-weight: 500; }
.t2-chart.is-ready .td-conv-ssr { display: none; }

/* Panel rows */
.td-row { margin-bottom: var(--gap); }
.td-row--k { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.td-row--k.has-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.td-row--k.has-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.td-pan { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.td-pan .t2-panel-head { margin-bottom: 0; }
.td-pan p { margin: 0; }
.td-empty { color: var(--td); }

/* Standout */
.td-stand__name { display: block; font-size: 13px; font-weight: 400; color: var(--t2); }
.td-stand__name:hover { color: var(--tx); text-decoration: underline; }
.td-stand__num { font-size: 48px; font-weight: 400; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; margin: 4px 0 8px; }
.td-stand__chart { height: 110px; }
.td-stand__row { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--grid); }
.td-stand__row b { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.td-stand__r { text-align: right; }
#tdStandBody { display: flex; flex-direction: column; gap: 6px; flex: 1; }
#tdStandBody > p.t2-sub { margin-top: auto; }

/* Next five */
.td-next { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; flex: 1; }
.td-next li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--grid); }
.td-next li:first-child { border-top: 0; padding-top: 0; }
.td-next__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.td-next__id:hover .t2-name { text-decoration: underline; }
.td-next b { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.t2-ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Macro events */
.td-mac-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.td-mac-num { font-size: 48px; font-weight: 400; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.td-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--rad-btn); background: var(--ghost); font-size: 12px; font-weight: 500; white-space: nowrap; }
.td-chip i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.td-ticks { height: auto; }
.td-mac-txt { font-size: 13px; color: var(--t2); }
.td-ai { margin-top: auto !important; }

/* Country and manager */
.td-cty-stats, .td-mg-stats { display: flex; gap: 32px; flex-wrap: wrap; }
.td-cty-num { font-size: 32px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.td-cty-chart { height: 280px; }
.td-mg-h { margin-top: 4px; }
.td-mg-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 13px; color: var(--t2); }
.td-mg-row b { font-weight: 500; color: var(--tx); font-variant-numeric: tabular-nums; }
.td-mg-row .t2-rampbar { grid-column: 1 / -1; }
.td-mg-fund { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--grid); font-size: 13px; color: var(--tx); }
.td-mg-fund:hover span { text-decoration: underline; }
.td-mg-fund b { font-weight: 500; font-variant-numeric: tabular-nums; }

/* Gauges */
.td-gauges { margin-bottom: var(--gap); }
.td-g-num { font-size: 36px; font-weight: 400; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.td-g-chart { height: auto; min-height: 150px; margin-top: 4px; }

.td-source { margin: 14px 0 18px; max-width: 900px; }
.td-explore { margin-top: var(--gap); }
.td-explore-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.td-explore-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.td-explore-cols a { font-size: 13px; color: var(--t2); }
.td-explore-cols a:hover { color: var(--tx); text-decoration: underline; }

/* Tablet 1024 */
@media (max-width: 1279px) {
  .td-hero, .td-row--k.has-3, .td-row--k.has-2 { grid-template-columns: 1fr; }
  .td-flowchart { height: 420px; }
  .td-explore-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .td-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 1023px) { .td-flow__num { font-size: 48px; } .td-flowchart { height: 360px; } }

.td-about { margin: var(--gap) 0 0; padding: 24px 0 8px; max-width: 900px; display: flex; flex-direction: column; gap: 10px; }
.td-about p { margin: 0; color: var(--t2); }
.td-basis { margin-top: auto; }
.td-basis summary { cursor: pointer; width: fit-content; }
.td-basis summary:hover { color: var(--tx); }
.td-basis p { margin-top: 6px; }
.td-prov { margin-left: 8px; vertical-align: middle; font-weight: 500; letter-spacing: 0.02em; color: var(--t2); }

/* Keyword copy and crawl links, collapsed by default (still in the server HTML for crawlers) */
.td-more { margin: var(--gap) 0 24px; }
.td-more > summary { cursor: pointer; width: fit-content; list-style: none; font-size: 13px; color: var(--td); padding: 8px 0; }
.td-more > summary::-webkit-details-marker { display: none; }
.td-more > summary::after { content: ' +'; }
.td-more[open] > summary::after { content: ' \2212'; }
.td-more > summary:hover { color: var(--tx); }

/* Fund names are the click targets of Today: bold, larger, underlined in the brand colour, with a link arrow, so they stand out from the supporting text */
.td-stand__name, .td-next__id .t2-name, .td-mg-fund > span:first-child { font-weight: 700; color: var(--tx); text-decoration: underline; text-decoration-color: var(--r2); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.td-stand__name { font-size: 18px; line-height: 1.3; margin-top: 2px; }
.td-stand__name::after, .td-next__id .t2-name::after, .td-mg-fund > span:first-child::after { content: ' \2197'; font-weight: 500; color: var(--r2); text-decoration: none; display: inline-block; }
.td-next__id .t2-name { font-size: 15px; }
.td-mg-fund > span:first-child { font-size: 14px; }
.td-stand__name:hover, .td-next__id:hover .t2-name, .td-mg-fund:hover > span:first-child { color: var(--r1); text-decoration-color: var(--r1); }
.td-next li { padding: 12px 8px; margin: 0 -8px; border-radius: 10px; }
.td-next li:hover { background: var(--ghost); }
.td-next__id .t2-sub { margin-top: 2px; }
.td-mg-fund { padding: 10px 8px; margin: 0 -8px; border-radius: 10px; }
.td-mg-fund:hover { background: var(--ghost); }
.td-mg-fund:hover span { text-decoration: underline; }

/* Country slot: big numbers with change chips (target) */
.td-big { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: flex-start; }
.td-big .td-cty-num { font-size: 48px; line-height: 1; letter-spacing: -0.03em; }
.td-stat__top { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 6px; }
.td-delta { display: inline-block; margin-top: 2px; padding: 3px 8px; border-radius: 8px; background: var(--ghost); font-size: 12px; font-weight: 500; white-space: nowrap; }
.td-cty-chart { height: 300px; }
/* Sector slot */
.td-sec__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.td-sec__num { font-size: 48px; font-weight: 400; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.td-sec__leg { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding-top: 6px; }
.td-sec__leg span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.td-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.td-dot--a { background: var(--tx); }
.td-dot--b { background: var(--td); opacity: 0.6; }
.td-sec__tabs { align-self: flex-start; }
.td-sec__chart { height: 230px; }
.td-sec__foot { display: flex; gap: 32px; padding-top: 12px; border-top: 1px solid var(--grid); }
.td-sec__foot b { display: block; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; margin-top: 2px; }
.td-sec__ocf { flex: 1; }
.td-sec__ocf b { font-size: 14px; line-height: 1.4; }

/* ── 1:1 pass against the target (FundsBenchmark Site, Today), 1440 wide ── */
.td-head { margin: -10px 0 18px; }
.td-hero { grid-template-columns: minmax(0, 1fr) 340px; }
.td-flow__stat { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 4px 10px; min-height: 0; }
.td-flow__num { font-size: 48px; }
.td-flow__chip { margin-top: 10px; }
.td-flow__cap { flex-basis: 100%; }
.td-flowchart { height: 380px; }
.td-pan { gap: 8px; }
.td-stand__row b { font-size: 13px; }
.td-stand__row b:last-child, .td-stand__r b { font-weight: 700; }
.td-next li { padding: 9px 8px; }
.td-next b { font-size: 13px; font-weight: 700; }
.td-sec__tabs { align-self: center; }
.td-mgr .td-cty-num { font-size: 48px; }
.td-mgr .t2-panel-head .t2-sub { font-weight: 700; }
.td-mg-h { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.td-mg-row b, .td-mg-fund b { font-weight: 700; }
.td-g-num { font-size: 48px; }
.td-g-chart { min-height: 0; }
.td-cty-chart { height: 250px; }
.td-mg-row { gap: 3px 12px; }
.td-mg-fund { padding: 7px 8px; }
/* height trims toward the target's panel heights */
.td-cty-chart { height: 200px; }
.td-stand__chart { height: 90px; }
.td-g-chart svg { max-width: 250px; margin: 0 auto; }
.td-sec__chart { height: 200px; }

/* Weekly allocation shift chart (the new target's flow hero), shown when /aggregate/shift-weekly has data; the Sankey stays as the fallback */
.td-combo { display: none; flex-direction: column; gap: 14px; margin-top: auto; }
.td-hero.is-combo .td-combo { display: flex; }
.td-hero.is-combo .td-flowchart, .td-hero.is-combo .td-flow__note { display: none; }
.td-hero.is-combo .td-flow { grid-column: 1 / -1; grid-row: 1; }
.td-hero.is-combo .td-conv-panel { grid-column: 2; grid-row: 1; z-index: 2; }
.td-hero.is-combo .td-flow > .t2-title, .td-hero.is-combo .td-flow__stat, .td-hero.is-combo .td-combo__leg { margin-right: 372px; }
.td-combo__leg { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.td-combo__leg span { display: inline-flex; align-items: center; gap: 7px; }
.td-sq { width: 8px; height: 8px; display: inline-block; }
.td-sq--a { background: var(--r2); } .td-sq--b { background: var(--tx); } .td-sq--c { background: var(--td); }
.td-combo__chart { position: relative; height: 380px; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 600px), rgba(0,0,0,0.3) calc(100% - 380px), transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 600px), rgba(0,0,0,0.3) calc(100% - 380px), transparent 100%); }
.td-combo__yl { position: absolute; left: 0; top: 0; bottom: 26px; width: 44px; }
.td-combo__yl span { position: absolute; left: 0; transform: translateY(-50%); font-size: 11px; color: var(--td); font-variant-numeric: tabular-nums; }
.td-combo__plot { position: absolute; left: 48px; right: 0; top: 0; bottom: 26px; }
.td-combo__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.td-combo__xl { position: absolute; left: 48px; right: 0; bottom: 0; display: flex; justify-content: space-between; font-size: 11px; color: var(--td); }
.td-combo__lab { position: absolute; display: flex; align-items: center; gap: 7px; padding: 3px 9px 3px 7px; border-radius: 7px; background: color-mix(in srgb, var(--panelsolid) 70%, transparent); backdrop-filter: blur(8px); font-size: 12px; color: var(--t2); white-space: nowrap; pointer-events: none; }
.td-combo__dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--tx); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tx) 18%, transparent); pointer-events: none; }
.td-combo__tip { position: absolute; top: 4%; padding: 14px 18px; border-radius: 12px; background: color-mix(in srgb, var(--panelsolid) 78%, transparent); backdrop-filter: blur(16px); border: 1px solid var(--pbd); display: flex; flex-direction: column; gap: 6px; pointer-events: none; min-width: 200px; }
.td-combo__tip b { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.td-combo__tip em { font-style: normal; padding: 3px 8px; border-radius: 7px; background: var(--ghost); font-size: 12px; font-weight: 700; margin-left: 10px; font-variant-numeric: tabular-nums; }
@media (max-width: 1279px) { .td-combo__chart { -webkit-mask-image: none; mask-image: none; } .td-hero.is-combo .td-flow, .td-hero.is-combo .td-conv-panel { grid-column: auto; grid-row: auto; } .td-hero.is-combo .td-flow > .t2-title, .td-hero.is-combo .td-flow__stat, .td-hero.is-combo .td-combo__leg { margin-right: 0; } }
.td-flow__num { background: linear-gradient(90deg, var(--r1), var(--r2) 55%, var(--r3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.td-flow__num.t2-pos, .td-flow__num.t2-neg, .td-flow__num.t2-flat { color: transparent; }
.td-stand__leg { display: flex; gap: 18px; align-items: center; color: var(--t2); }
.td-stand__leg span { display: inline-flex; align-items: center; gap: 7px; }
.td-dot--f { background: var(--r2); } .td-dot--p { background: var(--td); }
.td-sec__chart { height: 220px; }

/* ── traffic brief G: visitor CTAs, locked personal modules, "as at" lines ── */
.td-asat { margin-top: 12px !important; color: var(--td); font-size: 12px; font-variant-numeric: tabular-nums; }
.td-pan .td-asat, .td-conv-panel .td-asat { margin-top: auto !important; padding-top: 12px; }
.td-flow .td-asat { margin-top: 6px !important; }
.td-you { margin: 0 0 24px; }
.td-lock { display: flex; flex-direction: column; gap: 12px; }
.td-lock .t2-panel-head { margin-bottom: 0; }
.td-lock__ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--rad-btn); border: 1px solid var(--grid); background: var(--ghost); color: var(--td); flex: none; }
.td-lock__ghost { display: grid; gap: 10px; padding: 4px 0; opacity: 0.55; filter: blur(1.5px); }
.td-lock__ghost i { display: block; height: 10px; border-radius: 6px; background: var(--seg); }
.td-lock__ghost i:nth-child(1) { width: 92%; } .td-lock__ghost i:nth-child(2) { width: 70%; } .td-lock__ghost i:nth-child(3) { width: 82%; }
.td-lock__txt { color: var(--t2); }
.td-lock__btn { align-self: flex-start; margin-top: auto; text-decoration: none; }

/* ── cutover gate (375 and 768): single column under 900, nothing wider than the viewport. Placed last so it beats the desktop hero rule above. ── */
@media (max-width: 1279px) { .td-hero { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 899px) {
  .td-explore-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .td-row--k.has-3, .td-row--k.has-2 { grid-template-columns: minmax(0, 1fr); }
  .td-lock__btn { min-height: 44px; align-self: stretch; justify-content: center; }
  .td-range__menu { width: min(190px, calc(100vw - 32px)); }
  .td-combo__tip { max-width: calc(100vw - 64px); }
  .td-stand__row, .td-mg-stats, .td-sec__top, .td-cty-stats { flex-wrap: wrap; gap: 12px; }
  .td-head .t2-lead, .td-flow__note, .td-asat { font-size: 14px; }
  .td-mac-txt, .td-lock__txt, .td-about .t2-body { font-size: 16px; }
}

/* mobile gate, round 2 (verified at 375): the chart kit's hidden data table was 658px wide and widened the page (stopgap here; the root fix belongs in base.css .t2-vh) */
table.t2-vh { display: block; overflow: hidden; }
@media (max-width: 899px) {
  .td-combo__lab { display: none; }                       /* the legend above the chart names the series */
  .td-stand__name { display: flex; align-items: center; min-height: 44px; }
  .td-dim button, .td-sec__tabs button, .td-range__btn { min-height: 44px; }
  .td-sec__tabs button { min-width: 44px; }
  .td-basis summary { display: flex; align-items: center; min-height: 44px; }
  .td-mg-fund { min-height: 44px; align-items: center; }
  .td-explore-cols a { display: flex; align-items: center; min-height: 44px; }
  .td-head .t2-iconbtn, .t2-panel-head .t2-iconbtn { width: 44px; height: 44px; }
}

/* mobile gate, round 3: 14px minimum text on phones (chart tick labels stay 12px) */
@media (max-width: 899px) {
  .td .t2-sub, .td .t2-label, .td .t2-label-2, .td-next__id .t2-sub, .td-mg-row, .td-mg-fund, .td-stand__name { font-size: 14px; }
  .td .t2-chart .t2-sub, .td-combo__chart .t2-sub { font-size: 12px; }
  .td-sec__foot b, .td-stat .t2-label { font-size: 14px; }
}

/* mobile gate, round 4: remaining sub-14px text outside the charts (chart tick labels stay 12px) */
@media (max-width: 899px) {
  .td b, .td-chip, .td-delta, .td-flow__chip, .td-dim button, .td-sec__tabs button { font-size: 14px; }
  .td .t2-chart b { font-size: 12px; }
  .td-combo__chart span { font-size: 12px; }
}
.td-you[hidden] { display: none !important; }


/* drift backfill (Luke): estimated weeks are hatched and labelled, never counted */
.td-sq--e { background: repeating-linear-gradient(45deg, var(--td) 0 1.2px, transparent 1.2px 3.6px) !important; border: 1px solid var(--td); }
.td-combo__note { margin: 6px 0 0; }

/* approved panel headings: sub-lines and captions that sit under a heading or chart */
.td-flow__sub { margin: 2px 0 8px; }
.td-g-cap, #tdNextCap { margin-top: 8px; }

/* hero chart on wide screens: the plot ends where the Where-fund-weightings-changed panel begins, so the latest (measured) weeks are not hidden under it or faded out */
@media (min-width: 1280px) {
  .td-combo__chart { -webkit-mask-image: none; mask-image: none; }
  .td-combo__plot, .td-combo__xl { right: 372px; }
}

/* phones: panel-head text links ("Open Explore") get a 44px hit area (SEO tap gate) */
@media (max-width: 899px) { .t2-panel-head .t2-link { display: inline-flex; align-items: center; min-height: 44px; } }

/* Macro events panel: the longer lean label ("Leaning slightly negative") must not squeeze the big number onto two lines */
.td-mac-top { flex-wrap: wrap; }
.td-mac-num { white-space: nowrap; }

/* Today hero (12 Oct revision): the "Largest gap above peers" panel at full width; the conviction panel moved into the first slot of the row below. */
.td-herostand { margin-bottom: var(--gap); }
.td-herostand .td-stand-hero { gap: 12px; padding: 24px 28px; }
.td-herostand .td-stand__name { font-size: 20px; }
.td-herostand .td-stand__num { font-size: 64px; margin: 2px 0 4px; }
.td-herostand .td-stand__leg { gap: 6px 18px; flex-wrap: wrap; font-size: 12px; }
.td-herostand .td-stand__chart { height: 400px; margin-top: 4px; }
.td-herostand .td-stand__row { max-width: 560px; }
@media (max-width: 1279px) { .td-herostand .td-stand__chart { height: 320px; } .td-herostand .td-stand-hero { padding: 20px; } }
@media (max-width: 899px) { .td-herostand .td-stand__chart { height: 260px; } .td-herostand .td-stand__num { font-size: 48px; } .td-herostand .td-stand__leg { font-size: 14px; } .td-herostand .td-stand-hero { padding: 16px; } }

/* Macro events: a sentence in place of the big number ("Not enough events to compare yet", "No events in the previous 60 days") */
.td-mac-num.is-note { font-size: 22px; font-weight: 500; letter-spacing: 0; line-height: 1.25; white-space: normal; margin-bottom: 0; }

/* Manager in focus: the manager's name in the heading links to its page; heading text style unchanged */
.td-mgr .t2-title .td-mg-name { color: inherit; font: inherit; text-decoration: underline; text-decoration-color: var(--r2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.td-mgr .t2-title .td-mg-name:hover { color: var(--r1); text-decoration-color: var(--r1); }
.td-mgr .t2-title .td-mg-name:focus-visible { outline: 2px solid var(--r3); outline-offset: 2px; border-radius: 2px; }

/* ═════════ Layout revision (Luke, 20 Oct 2026): hero in three areas, two quiet sections, more whitespace. Layout only: chart styles, series colours and panel surfaces are untouched. ═════════ */
.td { --td-gap: var(--gap); --td-sec: 36px; --td-pad: 24px; }   /* Delta 8: every Today grid gap is the dashboard token --gap (6px, as on Find); panel padding stays 24; 36px between sections (as the Find shelves) */
.td-head { margin: 20px 0 32px; }
.td .td-pan { padding: var(--td-pad); }

/* Hero (delta 2): row 1 = open chart + tall Latest insight card (1280px and up); row 2 = the asset class strip across the full width, bleeding off the right page edge. Under 1280px each is its own row. */
.td-hero2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); margin: 0 0 var(--td-sec); align-items: stretch; }
.td-hero2__chart, .td-hero2__strip { min-width: 0; }
/* Delta 5 (target "Lender Workspace"): ONE row from 1280px: open chart (left, takes the free width) | tall Latest insight card | asset cards as a two-row strip that bleeds off the right screen edge (first card fully visible plus a sliver of the next column). 1100 to 1279: chart on its own row, then insight card and strip side by side. Under 1100: one column, the strip is a single swipe row. */
.td { --td-card: 352px; --td-ins: 280px; --td-hero-gap: var(--gap); --td-gz: 0.85; }   /* hero: one gutter (--gap, 6px) between chart, insight card and strip; the insight card is 280px at 1280 growing to 460px at 1440 and above and as tall as the two stacked asset cards (stretched, not square); asset cards 352px wide with the kit gauge and legend scaled by zoom 0.85 (legend text 11px), measured: 352px is the narrowest width at which all four legends keep two rows (320px wraps Bonds and Multi-asset to three rows and the card heights differ) */
@media (min-width: 1280px) { .td { --td-ins: clamp(280px, calc(280px + (100vw - 1280px) * 1.125), 460px); } }   /* Delta 10: the insight card grows from 280px at 1280 to 460px at 1440 and stays 460px above (the chart keeps about 500 to 520px between 1280 and 1440 instead of jumping, and takes all the extra width above 1440) */
@media (min-width: 1280px) {
  .td-hero2.has-insight.has-strip { grid-template-columns: minmax(0, 1fr) var(--td-ins) calc(var(--td-card) + 4px); }
  .td-hero2.has-insight:not(.has-strip) { grid-template-columns: minmax(0, 1fr) var(--td-ins); }
  .td-hero2.has-strip:not(.has-insight) { grid-template-columns: minmax(0, 1fr) calc(var(--td-card) + 4px); }
  .td-hero2__chart { grid-column: 1; grid-row: 1; }
  .td-hero2.has-insight .td-insight { grid-column: 2; grid-row: 1; min-height: 0; align-self: stretch; }
  .td-hero2.has-insight.has-strip .td-hero2__strip { grid-column: 3; grid-row: 1; }
  .td-hero2.has-strip:not(.has-insight) .td-hero2__strip { grid-column: 2; grid-row: 1; }
  .td-hero2__strip { margin-right: calc(var(--page-x) * -1); }
  /* Delta 7: with the insight card, the strip wrapper dissolves into the grid so row 1 is exactly the two stacked asset cards (+ the gap between them) and the insight card stretches to it (top and bottom edges aligned with the strip); the prev/next buttons take row 2 under the strip, the chart spans both rows. */
  .td-hero2.has-insight.has-strip { row-gap: var(--gap); }
  .td-hero2.has-insight.has-strip .td-hero2__strip { display: contents; }
  .td-hero2.has-insight.has-strip .td-hero2__chart { grid-row: 1 / span 2; }
  .td-hero2.has-insight.has-strip .td-strip { grid-column: 3; grid-row: 1; margin-right: calc(var(--page-x) * -1); min-width: 0; }
  .td-hero2.has-insight.has-strip .td-strip__nav { grid-column: 3; grid-row: 2; margin-right: 0; }
  .td-hero2.has-insight .td-insight__txt { padding-right: var(--td-pad); }
  .td-hero2.has-insight .td-insight__chip { top: var(--td-pad); bottom: auto; }
  .td-hero2.has-strip .td-hero2__chart > .td-stand--open, .td-hero2.has-insight .td-hero2__chart > .td-stand--open { height: 100%; }
  .td-hero2 .td-stand--open .td-stand__chart { flex: 1 1 auto; height: auto; min-height: 320px; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .td-hero2.has-insight.has-strip { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .td-hero2.has-insight.has-strip .td-hero2__chart { grid-column: 1 / -1; grid-row: 1; }
  .td-hero2.has-insight.has-strip .td-insight { grid-column: 1; grid-row: 2; }
  .td-hero2.has-insight.has-strip .td-hero2__strip { grid-column: 2; grid-row: 2; margin-right: calc(var(--page-x) * -1); }
}

/* Left: the chart is open on the page (no panel surface). Same chart, figures, region control and notes. */
.td-hero2 .td-stand--open.t2-panel { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; border-radius: 0; gap: 12px; }
.td-hero2 .td-stand--open .td-stand__name { font-size: 20px; }
.td-hero2 .td-stand--open .td-stand__num { font-size: 64px; margin: 2px 0 4px; }
.td-hero2 .td-stand--open .td-stand__leg { gap: 6px 18px; flex-wrap: wrap; font-size: 12px; }
.td-hero2 .td-stand--open .td-stand__chart { height: 360px; margin-top: 4px; }
.td-hero2 .td-stand--open .td-stand__row { max-width: 560px; }
@media (max-width: 1279px) { .td-hero2 .td-stand--open .td-stand__chart { height: 320px; } }
@media (max-width: 899px) { .td-hero2 .td-stand--open .td-stand__chart { height: 260px; } .td-hero2 .td-stand--open .td-stand__num { font-size: 48px; } .td-hero2 .td-stand--open .td-stand__leg { font-size: 14px; } }

/* Middle: Latest insight. Full bleed card, text over a dark fade (4.5:1 guaranteed by the fade, with or without an image). */
.td-insight { --td-fade: var(--inktx); position: relative; display: block; min-height: 280px; border-radius: 26px; overflow: hidden; isolation: isolate; background: var(--glass); color: var(--onglass, white); text-decoration: none; }
[data-theme="light"] .td-insight { --td-fade: var(--ink); }
.td-insight__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.td-insight__fade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, color-mix(in srgb, var(--td-fade) 94%, transparent) 0%, color-mix(in srgb, var(--td-fade) 86%, transparent) 42%, color-mix(in srgb, var(--td-fade) 0%, transparent) 100%); }
.td-insight__txt { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 8px; padding: var(--td-pad); padding-right: 76px; }
.td-insight__label { order: -1; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.td-insight__title { font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.td-insight__meta { font-size: 14px; }
.td-insight__deck, .td-insight__read { display: none; }   /* Delta 10: standfirst and read-time line only from 1280px, where the card is tall; 1100 to 1279 and phones keep the delta 9 card */
@media (min-width: 1280px) {
  .td-insight__deck { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 1.45; font-weight: 400; color: var(--onglass, white); }
  .td-insight__read { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--onglass, white); }
  .td-insight__read svg { flex: none; }
}
.td-insight__chip { position: absolute; right: var(--td-pad); bottom: var(--td-pad); width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--onglass, white); color: var(--inktx); }
[data-theme="light"] .td-insight__chip { color: var(--ink); }
.td-insight:hover .td-insight__title { text-decoration: underline; text-underline-offset: 3px; }
.td-insight:focus-visible { outline: 2px solid var(--r3); outline-offset: 3px; }
@media (max-width: 1279px) { .td-insight { aspect-ratio: 4 / 3; min-height: 0; align-self: start; width: 100%; } }   /* narrower layouts keep a 4:3 card (never taller than wide, not stretched to the strip) */

/* Asset classes: one row of four cards in a horizontally scrolling strip (snap, drag, arrow keys, prev/next buttons, edge fades). The kit gauge centres its label at 34% of its own height, so cards are 396px wide (measured: at 364px the Bonds and Multi-asset legends wrap to three rows, at 396px all four keep two rows); no gauge restyle. */
.td-hero2__strip { position: relative; display: flex; flex-direction: column; gap: var(--gap); align-self: start; }
.td-strip { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x proximity; cursor: grab; outline-offset: 2px; -webkit-mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 28px), transparent 100%); }
.td-strip::-webkit-scrollbar { display: none; }
.td-hero2__strip.at-start .td-strip { -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%); }
.td-hero2__strip.at-end .td-strip { -webkit-mask-image: linear-gradient(to right, transparent 0, black 20px, black 100%); mask-image: linear-gradient(to right, transparent 0, black 20px, black 100%); }
.td-hero2__strip.at-start.at-end .td-strip { -webkit-mask-image: none; mask-image: none; }
.td-strip:focus-visible { outline: 2px solid var(--r3); border-radius: 12px; }
.td-strip__track { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: var(--td-card); gap: var(--td-hero-gap); padding-right: 28px; }
@media (min-width: 1100px) { .td-strip__track { padding-right: calc(var(--page-x) + 28px); } .td-strip__nav { margin-right: var(--page-x); } }
@media (max-width: 1099px) { .td-strip__track { grid-template-rows: auto; } }
.td-strip .td-gauge { scroll-snap-align: start; min-height: 0; }
.td-strip .td-g-num { font-size: 32px; font-weight: 300; }
.td-strip .td-g-slot { min-height: 190px; }   /* the scaled gauge with a two-row legend (221px x 0.85) */
@media (min-width: 900px) { .td-strip .td-g-chart { zoom: var(--td-gz); } }   /* the mounted gauge with a two-row legend; reserved so nothing moves when it mounts */
.td-strip .td-g-chart { height: auto; min-height: 0; margin-top: 0; }
.td-strip__nav { display: flex; gap: var(--gap); justify-content: flex-end; }
.td-strip__btn:disabled { opacity: 0.4; cursor: default; }
.td-strip__btn:focus-visible { outline: 2px solid var(--r3); outline-offset: 2px; }
@media (max-width: 899px) { .td-strip .td-g-slot { min-height: 314px; } }   /* phones: card inner 295px, legends wrap to up to four 44px rows; reserved so nothing moves */
@media (max-width: 759px) { .td-strip__track { grid-auto-columns: min(396px, calc(100vw - 32px)); } }

/* Sections: quiet headings, 36px rhythm (--td-sec), 12px under the section heading, rows of three (single column under 1100px) */
.td-block { margin: 0 0 var(--td-sec); }
.td-sech { margin: 0 0 12px; }
.td-sech__t { font-size: 17px; font-weight: 400; letter-spacing: 0; line-height: 1.3; color: var(--tx); }
.td-sech__s { margin: 4px 0 0; font-size: 13px; color: var(--td); max-width: 640px; }
.td-row--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--td-gap); margin-bottom: 0; }
.td-row--3.has-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.td-row--3.has-1 { grid-template-columns: minmax(0, 1fr); }
.td-row--3 > .td-pan { align-self: stretch; }
@media (max-width: 1099px) { .td-row--3, .td-row--3.has-2 { grid-template-columns: minmax(0, 1fr); } }




/* ═════════ Lender Workspace delta (Luke, 20 Oct): soft translucent panels, more white space, Manager in focus and Macro events as side cards. The panel surface comes from Menus' `.t2-panel--soft` (components.css, a dependency of this pack; the Today panels carry the class). Here: type and layout only, scoped under body.t2 .td, no chart change. ═════════ */
body.t2 .td .td-pan .t2-title { font-size: 17px; font-weight: 400; }
body.t2 .td .td-pan .t2-panel-head .t2-sub { font-size: 13px; font-weight: 400; color: var(--td); }
@media (min-width: 900px) {
  body.t2 .td .td-pan :is(.td-asat, .td-conv-note, .td-cty-note, .td-g-cap, #tdNextCap, #tdSecNote) { font-size: 12px; color: var(--td); }
}
/* headline figures 40px / 300 (the hero chart figure and the compact asset cards keep their own sizes) */
body.t2 .td .td-pan :is(.td-cty-num, .td-sec__num, .td-mac-num:not(.is-note)) { font-size: 40px; font-weight: 300; letter-spacing: -0.03em; }
body.t2 .td .td-hero2__assets .td-g-num { font-weight: 300; }
/* more white space: panels size to their content, rows line up to the tallest */
body.t2 .td .td-conv { min-height: 0; }
.td-head { margin-bottom: 32px; }


/* ═════════ Delta 2: descriptions and as-at lines live in tooltips (FB2Tip, Today scoped) ═════════ */
.td-tips { position: static; }
.td-tip { position: fixed; left: 0; top: 0; z-index: 60; max-width: min(320px, calc(100vw - 16px)); padding: 8px 12px; border-radius: 8px; border: 1px solid var(--pbd); background: var(--panelsolid); color: var(--tx); font-size: 13px; line-height: 1.45; box-shadow: none;
  /* visually hidden when closed (stays in the DOM for crawlers and aria-describedby) */
  clip-path: inset(50%); clip: rect(0 0 0 0); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; pointer-events: none; }
.td-tip.is-open { clip-path: none; clip: auto; width: max-content; height: auto; overflow: visible; white-space: normal; pointer-events: auto; animation: tdTipIn 0.12s ease-out; }
.td-tip p { margin: 0; }
.td-tip p + p { margin-top: 6px; }
.td-tip .td-tip__asat { color: var(--t2); }
@keyframes tdTipIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .td-tip.is-open { animation: none; } }
/* the trigger: a dotted underline on figures, a small "i" ring after titles; no change to size */
[data-tip] { cursor: help; text-decoration: underline dotted; text-decoration-color: var(--td); text-decoration-thickness: 1px; text-underline-offset: 6px; }
h2[data-tip] { text-decoration: none; }
h2[data-tip]::after { content: "i"; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 8px; border: 1px solid var(--td); border-radius: 50%; color: var(--td); font-size: 10px; font-weight: 500; line-height: 1; font-style: normal; vertical-align: 2px; }
[data-tip]:focus-visible { outline: 2px solid var(--r3); outline-offset: 3px; border-radius: 4px; }
.td-source { max-width: none; }


/* ═════════ Delta 5 (Luke: "Today page is wrong" against the Lender Workspace target) ═════════ */
/* 2. One heading style on every panel and section heading, one lighter sub-label style (desktop; phones keep the 14px minimum text size from the mobile gate). Unified selectors: .td-pan .t2-title (hero chart, asset cards, Manager in focus, Next five, Macro events, country, sector, weightings), .td-explore .t2-title, .td-sech__t (section headings), .td-pan .t2-label / .t2-sub (data labels, brand lines, legends), .td-mg-h, .td-sech__s. */
body.t2 .td :is(.td-pan, .td-explore, .td-about) .t2-title, body.t2 .td .td-sech__t { font-size: 17px; font-weight: 400; line-height: 1.3; letter-spacing: 0; color: var(--tx); }
@media (min-width: 900px) {
  body.t2 .td :is(.td-pan, .td-explore) :is(.t2-label, .t2-sub), body.t2 .td .td-sech__s { font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--td); }
  body.t2 .td .td-pan .td-mg-h { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }
}
/* 3. Air: 24px after a heading before the content, 24px below a chart, the same 24px padding on every panel (asset cards included) */
body.t2 .td :is(.td-pan, .td-explore) { padding: 24px; gap: 20px; }
body.t2 .td :is(.td-pan, .td-explore) > .t2-panel-head { margin-bottom: 4px; }
body.t2 .td .td-pan :is(.t2-chart, .td-g-slot) { margin-bottom: 4px; }
body.t2 .td .td-stand--open { padding: 0; }
/* 4. Icon tiles (door arrow, minimise chevron, strip arrows): one size and radius, no border, a very light white fill from tokens; 44px hit area kept (a larger invisible target on desktop, the real size on phones); focus ring kept */
.td { --td-icon-bg: color-mix(in srgb, white 8%, transparent); --td-icon-bg-hover: color-mix(in srgb, white 14%, transparent); }
[data-theme="light"] .td { --td-icon-bg: var(--panel); --td-icon-bg-hover: var(--panelsolid); }
body.t2 .td .t2-iconbtn { position: relative; width: 32px; height: 32px; border: 0; border-radius: 8px; background: var(--td-icon-bg); color: var(--t2); }
body.t2 .td .t2-iconbtn:hover { background: var(--td-icon-bg-hover); color: var(--tx); }
body.t2 .td .t2-iconbtn::before { content: ""; position: absolute; inset: -6px; }
body.t2 .td .t2-iconbtn:focus-visible { outline: 2px solid var(--r3); outline-offset: 2px; }
@media (max-width: 899px) { body.t2 .td .t2-iconbtn { width: 44px; height: 44px; } body.t2 .td .t2-iconbtn::before { display: none; } }
/* 5. Rows of equal height, no dead minimum heights (Manager in focus lost its "Highest 1Y return funds" block) */
.td-row--3 { align-items: stretch; }
body.t2 .td .td-sec__chart, body.t2 .td .td-cty-chart { min-height: 0; }

@media (min-width: 1100px) and (max-width: 1279px) { .td-strip__track { grid-template-rows: auto; } }   /* 1100 to 1279: the strip is one row (the square card sits beside it with no dead space) */