/* Moved out of index.html so the Content-Security-Policy needs no 'unsafe-inline'. */
/* Page-local components. Candidates to move into design-system/ (see not_done). */
[hidden] { display: none !important; }
.callouts { margin: 0 0 var(--s-3); border-radius: var(--r-md); border: 1px solid var(--hairline-strong);
  background: color-mix(in srgb, var(--surface) 60%, transparent); overflow: hidden; }
.callouts:empty { display: none; }
.note {
  display: flex; align-items: flex-start; gap: 10px; min-width: 0;
  padding: 8px 14px; font-size: 12.5px; color: var(--text-dim); line-height: 1.5;
  transition: background-color var(--dur-fast) var(--ease);
}
.note + .note { border-top: 1px solid var(--hairline); }
.note:hover { background: color-mix(in srgb, var(--surface-2) 50%, transparent); }
.note > .ic { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.note.warn > .ic { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.note.bad  > .ic { color: var(--no);   background: color-mix(in srgb, var(--no) 14%, transparent); }
.note b { color: var(--text); font-weight: 600; }
.note details { min-width: 0; }
.note summary { cursor: pointer; list-style: none; }
.note summary::-webkit-details-marker { display: none; }
.note summary .more { color: var(--text-faint); font-size: 11.5px; margin-left: 6px; white-space: nowrap; }
.note summary .more::after { content: ' ▾'; }
.note details[open] summary .more::after { content: ' ▴'; }
.note details > div { margin-top: 6px; color: var(--text-faint); }

.eyebrow.acc { color: var(--accent); }
.ttl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* hero */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: end; }
/* An annualised spread is not a return: neutral colour, no glow. */
.hero-op .big { font-family: var(--num); font-size: 52px; font-weight: 600; letter-spacing: -0.055em; line-height: 1; color: var(--text); }
.hero-op .big small { font-size: 22px; color: var(--text-faint); margin-left: 2px; letter-spacing: -0.02em; }
.hero-op .row-a { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-top: 16px; }
.hero-op .row-a .cap { color: var(--text-faint); font-size: 11.5px; line-height: 1.4; padding-bottom: 6px; }
.legbar-wrap .eyebrow { display: flex; justify-content: space-between; gap: 8px; }
.legbar { display: flex; height: 12px; border-radius: var(--r-pill); overflow: hidden; margin: 10px 0 8px;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--yes) 26%, transparent) 0 4px, color-mix(in srgb, var(--yes) 10%, transparent) 4px 8px);
  box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.legbar i { display: block; height: 100%; background: var(--accent-strong); border-right: 1px solid var(--bg); transition: filter var(--dur-fast) var(--ease); }
.legbar i:nth-child(even) { background: color-mix(in srgb, var(--accent-strong) 62%, var(--series-b)); }
.legbar i:hover { filter: brightness(1.35); }
.leglist { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--text-faint); }
.leglist span b { color: var(--text-dim); font-family: var(--num); font-weight: 500; }
.hero-actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }

/* KPI icon */
.kpi .ico { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.kpi .k { padding-right: 40px; }
.kpi .v.word { font-size: 22px; letter-spacing: -0.03em; }

/* section heading outside panels */
.sechead { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 36px 0 12px; }
.sechead h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.025em; }
.sechead .sub { color: var(--text-faint); font-size: 12.5px; }

/* cross-venue funnel */
.xv-bridge { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.vnode { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; }
.vnode .icon-tile { width: 28px; height: 28px; font-family: var(--mono); font-size: 12px; color: var(--text); }
.vlink { flex: 1; min-width: 40px; height: 2px; border-radius: 2px; position: relative;
  background: linear-gradient(90deg, var(--series-a), var(--series-b)); opacity: .7; }
.vlink.off { background: repeating-linear-gradient(90deg, var(--text-faint) 0 6px, transparent 6px 12px); opacity: .6; }
.vlink::after { content: attr(data-l); position: absolute; left: 50%; top: -22px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); white-space: nowrap; background: var(--surface); padding: 0 6px; }
.funnel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fstep { position: relative; padding: 18px 18px 16px; border-right: 1px solid var(--hairline); min-width: 0; transition: background-color var(--dur-fast) var(--ease); }
.fstep:last-child { border-right: 0; }
.fstep:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.fstep:not(:last-child)::after { content: ''; position: absolute; right: -6px; top: 50%; width: 10px; height: 10px; z-index: 1;
  transform: translateY(-50%) rotate(45deg); background: var(--surface); border-top: 1px solid var(--hairline-strong); border-right: 1px solid var(--hairline-strong); }
.fstep .n { font-family: var(--num); font-size: 30px; font-weight: 600; letter-spacing: -0.05em; line-height: 1.1; margin-top: 8px; }
.fstep .n.zero { color: var(--text-dim); }
.fstep .s { color: var(--text-faint); font-size: 11.5px; margin-top: 6px; line-height: 1.45; }
.fstep .scope { margin-top: 8px; }
.fstep.hl .n { color: var(--accent); }
.xv-foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--hairline); flex-wrap: wrap;
  background: color-mix(in srgb, var(--warn) 5%, transparent); font-size: 12.5px; color: var(--text-dim); }
.xv-foot b { color: var(--text); }

/* spreads table */
.filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--hairline); }
.catrow { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 18px; border-bottom: 1px solid var(--hairline); }
.catf { background: transparent; border: 1px solid var(--hairline-strong); border-radius: var(--r-pill); padding: 4px 10px;
  font-size: 12px; font-weight: 500; color: var(--text-dim); gap: 7px; }
.catf:hover { background: var(--surface-2); color: var(--text); }
.catf .c { font-family: var(--num); font-size: 11px; color: var(--text-faint); }
.catf.on { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.catf.on .c { color: var(--accent); }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-dim); cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .tr { width: 30px; height: 18px; border-radius: 99px; background: var(--surface-3); position: relative; transition: background-color var(--dur) var(--ease); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.switch .tr::after { content: ''; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-dim); transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.switch input:checked + .tr { background: var(--accent-strong); }
.switch input:checked + .tr::after { transform: translateX(12px); background: var(--on-accent); }
.switch input:focus-visible + .tr { box-shadow: var(--ring); }
table.grid th.sort > button { all: unset; cursor: pointer; user-select: none; border-radius: 4px; }
table.grid th.sort > button:hover { color: var(--text-dim); }
table.grid th.sort > button:focus-visible { box-shadow: var(--ring); }
table.grid th.sort[aria-sort] > button::after { content: ' ↓'; color: var(--accent); }
table.grid th.sort[aria-sort=ascending] > button::after { content: ' ↑'; }
table.grid th .hnote { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 10.5px; color: var(--text-faint); margin-top: 2px; white-space: normal; max-width: 96px; margin-left: auto; }
tr.group-row td { padding: 14px 18px 10px; background: color-mix(in srgb, var(--warn) 5%, transparent); border-top: 1px solid var(--hairline-strong);
  font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
tr.group-row b { color: var(--text); }
tr.row.research td { opacity: .92; }
.nc { font-family: var(--sans); font-size: 12px; color: var(--text-faint); display: inline-block; max-width: 72px; white-space: normal; line-height: 1.3; text-align: right; }
@media (max-width: 640px) { .nc { text-align: left; } }
label.ctl.sort-sm { display: none; }
@media (max-width: 640px) { label.ctl.sort-sm { display: inline-flex; } .sort-sm select { max-width: 200px; } }
.empty .btnrow { margin-top: 10px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
a.feed-row { display: block; color: inherit; text-decoration: none; }
a.feed-row:hover { text-decoration: none; }
a.feed-row:focus-visible { box-shadow: inset var(--ring); outline: none; }
.rq-more { display: block; padding: 10px 18px; font-size: 12px; border-top: 1px solid var(--hairline); color: var(--text-faint); }
.warnbadge { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.vwarn { font-size: 12px; color: var(--warn); margin-top: 4px; line-height: 1.45; }
.banner { margin: 12px 0 0; padding: 10px 14px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  background: color-mix(in srgb, var(--warn) 8%, transparent); color: var(--text); font-size: 13px; }
table.grid td { vertical-align: middle; }
table.grid tbody tr.row { cursor: pointer; }
table.grid tbody tr.row.sel { background: var(--surface-3); box-shadow: inset 3px 0 0 var(--accent); }
tr.legs-row td { padding: 0; background: color-mix(in srgb, var(--bg) 55%, transparent); }
.legs-in { padding: 12px 18px 14px 56px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px 18px; font-size: 12px; }
.legs-in .lg { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--hairline); padding: 4px 0; min-width: 0; }
.legs-in .lg span:first-child { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legs-in .lg span:last-child { font-family: var(--num); color: var(--text-faint); text-align: right; flex: none; max-width: 62%; }
.tt { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tt .icon-tile { color: var(--text-dim); }
.tt .t { font-weight: 600; min-width: 240px; max-width: 420px; letter-spacing: -0.005em; line-height: 1.35; }
.tt .m { display: flex; gap: 10px; align-items: center; margin-top: 3px; flex-wrap: wrap; }
.ann { font-family: var(--num); font-size: 17px; font-weight: 600; letter-spacing: -0.04em; }
.ann .c { font-size: 11px; color: var(--text-faint); margin-left: 1px; }
#table .costbar { min-width: 56px; }  /* keeps the 8-column table inside the split column at 1440 */
.more-row { display: flex; justify-content: center; padding: 12px; border-top: 1px solid var(--hairline); }

/* rail */
.vcard { display: flex; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--hairline); align-items: flex-start; transition: background-color var(--dur-fast) var(--ease); }
.vcard:last-child { border-bottom: 0; }
.vcard:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.vcard .icon-tile { font-family: var(--mono); font-weight: 600; color: var(--text); }
.vcard .vn { font-weight: 700; letter-spacing: -0.01em; }
.vcard .big { font-family: var(--num); font-size: 20px; font-weight: 600; letter-spacing: -0.04em; margin-top: 6px; }
.vcard .big small { font-size: 11.5px; color: var(--text-faint); font-family: var(--sans); letter-spacing: 0; margin-left: 4px; font-weight: 500; }
.stack { display: flex; height: 8px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-3); margin: 10px 0 10px; }
.stack i { display: block; height: 100%; min-width: 0; }
.stack i + i { border-left: 1px solid var(--bg); }
.slegend { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 12.5px; color: var(--text-dim); }
.slegend span:nth-child(even) { font-family: var(--num); color: var(--text); text-align: right; }
.slegend .cat-dot { margin-right: 8px; vertical-align: 1px; }
.rq-row .conf { display: flex; align-items: center; gap: 8px; }
.rq-row .cbar { width: 54px; height: 4px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.rq-row .cbar i { display: block; height: 100%; background: var(--accent); }
.rq-row .mk { display: flex; gap: 8px; align-items: baseline; margin-top: 6px; font-size: 12.5px; color: var(--text-dim); min-width: 0; }
.rq-row .mk .badge { flex: none; }
.rq-row .mk span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.scatter .quad { fill: color-mix(in srgb, var(--accent) 5%, transparent); }
.scatter circle.best { filter: drop-shadow(0 0 6px var(--accent)); }
.skel-rows td { padding: 14px; }

@media (max-width: 1100px) {
  .funnel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fstep:nth-child(3)::after { display: none; }
  .fstep:nth-child(3) { border-right: 0; }
  .fstep:nth-child(n+4) { border-top: 1px solid var(--hairline); }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
/* Narrow widths: the nav scrolls sideways; fade the edge that still has links behind it. */
@media (max-width: 760px) {
  .nav.more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  .nav.more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px); mask-image: linear-gradient(90deg, transparent, #000 44px); }
  .nav.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
}
@media (max-width: 640px) {
  .hide-sm { display: none; }
  table.grid tbody tr.group-row { display: block; }
  table.grid tbody tr.group-row td { display: block; padding: 12px 14px; }
  .hero-op .big { font-size: 42px; }
  .funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fstep, .fstep:nth-child(3) { border-right: 1px solid var(--hairline); }
  .fstep:nth-child(2n) { border-right: 0; }
  .fstep:nth-child(3)::after { display: block; }
  .fstep:nth-child(2n)::after { display: none; }
  .fstep:nth-child(n+3) { border-top: 1px solid var(--hairline); }
  .fstep:last-child { grid-column: 1 / -1; }
  .fstep .n { font-size: 26px; }
  .tt .icon-tile { display: none; }
  .tt .t { max-width: none; min-width: 0; }
  .legs-in { padding-left: 14px; }
  .filters, .catrow { padding-left: 14px; padding-right: 14px; }
  .catrow { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .catrow::-webkit-scrollbar { display: none; }
  .catf { flex: none; }
  .sechead { margin-top: 28px; }
  .xv-bridge { padding: 14px; gap: 8px; }
  .vlink { display: none; }
  .xv-foot { flex-wrap: nowrap; align-items: flex-start; padding: 12px 14px; }
  .note { padding: 9px 12px; }
  table.grid thead { display: none; }
  table.grid tbody tr.row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; padding: 14px; border-bottom: 1px solid var(--hairline); }
  table.grid tbody tr.row td { padding: 0; border: 0; }
  table.grid tbody tr.row td:nth-child(2) { grid-column: 1 / -1; }
  table.grid tbody tr.row td.num { text-align: left; }
  table.grid tbody tr.row td.num::before { content: attr(data-l); display: block; font: 600 10px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 3px; }
  table.grid tbody tr.row td:last-child { text-align: right; }
  table.grid tbody tr.row td:last-child::before { text-align: right; }
  tr.legs-row { display: block; }
  tr.legs-row td { display: block; }
}
@media (max-width: 520px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 14px 14px 12px; }
  .kpi .ico { display: none; }
  .kpi .k { padding-right: 0; font-size: 9.5px; }
  .kpi .v { font-size: 22px; }
  .kpi .v.word { font-size: 17px; }
  .kpi .s { font-size: 10.5px; }
}