/* Vanilla adapter for design-toolkit b623a6d comparison primitives. */
.cm-toolkit-scope {
  --dt-color-brand: var(--research-green,#0b695e);
  --dt-color-brand-hover: #064c44;
  --dt-color-on-brand: #fff;
  --dt-color-background: var(--research-paper,var(--bg));
  --dt-color-surface: var(--research-surface,var(--bg-card));
  --dt-color-surface-muted: color-mix(in srgb,var(--research-paper,var(--bg)) 58%,#fff);
  --dt-color-text: var(--research-ink,var(--text));
  --dt-color-text-muted: var(--research-muted,var(--text-muted));
  --dt-color-border: var(--research-rule,var(--border));
  --dt-color-border-strong: color-mix(in srgb,var(--research-muted,var(--text-muted)) 30%,var(--research-rule,var(--border)));
  --dt-color-focus: color-mix(in srgb,var(--research-green,#0b695e) 22%,transparent);
  --dt-color-success: #16835d;
  --dt-color-danger: #c53228;
  --dt-radius-sm: .5rem;
  --dt-radius-md: .75rem;
  --dt-radius-lg: 1rem;
  --dt-shadow-sm: 0 .25rem .75rem rgb(16 18 15 / 6%);
  --dt-shadow-md: 0 1.125rem 2.75rem rgb(11 105 94 / 10%);
  --dt-font-interface: "DM Sans",ui-sans-serif,system-ui,sans-serif;
  --dt-font-compact: Manrope,ui-sans-serif,system-ui,sans-serif;
  --dt-font-editorial: "DM Serif Display",Georgia,serif;
  --dt-control-height: 2.75rem;
  --dt-control-height-sm: 2.25rem;
}

html[data-theme="dark"] .cm-toolkit-scope {
  --dt-color-brand: #79c8bb;
  --dt-color-brand-hover: #9bd8cf;
  --dt-color-on-brand: #10201c;
  --dt-color-surface-muted: #202922;
  --dt-color-focus: rgb(121 200 187 / 28%);
}

html[data-cm-density="compact"] .cm-toolkit-scope {
  --dt-control-height: 2.25rem;
  --dt-control-height-sm: 1.875rem;
}

.dt-icon-button { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 50%; color: var(--dt-color-text-muted); cursor: pointer; display: inline-flex; height: var(--dt-control-height); justify-content: center; padding: 0; transition: background-color 150ms ease,border-color 150ms ease,color 150ms ease,transform 150ms ease; width: var(--dt-control-height); }
.dt-icon-button svg { height: 1.125rem; width: 1.125rem; }
.dt-icon-button:hover:not(:disabled) { color: var(--dt-color-text); transform: translateY(-1px); }
.dt-icon-button:focus-visible { outline: .1875rem solid var(--dt-color-focus); outline-offset: 2px; }
.dt-icon-button:disabled { cursor: not-allowed; opacity: .45; }
.dt-icon-button--subtle:hover:not(:disabled) { background: var(--dt-color-surface-muted); }
.dt-icon-button--outlined { background: var(--dt-color-surface); border-color: var(--dt-color-border); }
.dt-icon-button--outlined:hover:not(:disabled) { border-color: var(--dt-color-brand); color: var(--dt-color-brand); }
.dt-icon-button--small { height: var(--dt-control-height-sm); width: var(--dt-control-height-sm); }
.dt-icon-button--small svg { height: 1rem; width: 1rem; }

.dt-asset-logo { align-items: center; background: color-mix(in srgb,var(--dt-color-brand) 8%,var(--dt-color-surface)); border: 1px solid color-mix(in srgb,var(--dt-color-brand) 22%,var(--dt-color-border)); color: var(--dt-color-brand); display: inline-flex; flex: 0 0 auto; font-family: var(--dt-font-compact); font-weight: 850; justify-content: center; overflow: hidden; }
.dt-asset-logo--circle { border-radius: 50%; }
.dt-asset-logo--rounded { border-radius: .75rem; }
.dt-asset-logo--md { font-size: .75rem; height: 2.75rem; width: 2.75rem; }
.dt-asset-logo img { height: 100%; object-fit: contain; width: 100%; }

.dt-price-change { display: inline-grid; gap: .125rem; justify-items: end; }
.dt-price-change__value { color: var(--dt-color-text); font-family: var(--dt-font-compact); font-size: 1rem; font-weight: 800; }
.dt-price-change__change { font-size: .6875rem; font-weight: 750; }
.dt-price-change--positive .dt-price-change__change { color: var(--dt-color-success); }
.dt-price-change--negative .dt-price-change__change { color: var(--dt-color-danger); }
.dt-price-change--neutral .dt-price-change__change { color: var(--dt-color-text-muted); }

.dt-combobox { display: grid; gap: .4375rem; min-width: 18rem; position: relative; }
.dt-combobox__input { background: var(--dt-color-surface); border: 1px solid var(--dt-color-border); border-radius: var(--dt-radius-sm); color: var(--dt-color-text); min-height: var(--dt-control-height); outline: 0; padding: .625rem .75rem; width: 100%; }
.dt-combobox__input:focus { border-color: var(--dt-color-brand); box-shadow: 0 0 0 3px var(--dt-color-focus); }
.dt-combobox__menu { background: var(--dt-color-surface); border: 1px solid var(--dt-color-border); border-radius: var(--dt-radius-sm); box-shadow: var(--dt-shadow-md); display: grid; gap: .25rem; left: 0; margin: .25rem 0 0; max-height: 14rem; overflow-y: auto; padding: .375rem; position: absolute; right: 0; top: 100%; z-index: 20; }
.dt-combobox__menu[hidden] { display: none; }
.dt-combobox__option { background: none; border: 0; border-radius: .375rem; color: var(--dt-color-text); cursor: pointer; padding: .625rem .75rem; text-align: left; }
.dt-combobox__option:hover,.dt-combobox__option[aria-selected="true"] { background: color-mix(in srgb,var(--dt-color-brand) 10%,var(--dt-color-surface)); color: var(--dt-color-brand); }
.dt-combobox__empty { color: var(--dt-color-text-muted); font-size: .8125rem; padding: .75rem; }
.dt-combobox--asset { min-width: min(32rem,calc(100vw - 2rem)); }
.dt-combobox--asset .dt-combobox__menu { border-radius: var(--dt-radius-lg); gap: .125rem; max-height: 28rem; min-width: min(32rem,calc(100vw - 2rem)); padding: .5rem; }
.dt-combobox__option--asset { align-items: center; border: 1px solid transparent; border-radius: .6875rem; display: grid; gap: .6875rem; grid-template-columns: 2.375rem minmax(0,1fr) auto; margin: .125rem 0; padding: .6875rem; transition: background 150ms ease,border-color 150ms ease,transform 150ms ease; }
.dt-combobox__option--asset:hover,.dt-combobox__option--asset[aria-selected="true"] { border-color: color-mix(in srgb,var(--dt-color-brand) 34%,var(--dt-color-border)); transform: translateY(-1px); }
.dt-combobox__asset-icon { align-items: center; align-self: start; background: color-mix(in srgb,var(--dt-color-brand) 7%,var(--dt-color-surface)); border: 1px solid color-mix(in srgb,var(--dt-color-brand) 24%,var(--dt-color-border)); border-radius: 50%; color: var(--dt-color-brand); display: inline-flex; font-size: .625rem; font-weight: 850; height: 2.25rem; justify-content: center; letter-spacing: .03em; overflow: hidden; position: relative; width: 2.25rem; }
.dt-combobox__asset-icon > img { background: var(--dt-color-surface); height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.dt-combobox__asset-icon .asset-logo { border: 0; border-radius: inherit !important; height: 100%; width: 100%; }
.dt-combobox__asset-main { display: grid; min-width: 0; text-align: left; }
.dt-combobox__asset-main > strong { color: var(--dt-color-text); font-size: .8125rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-combobox__asset-main > small { color: var(--dt-color-text-muted); font-size: .6875rem; margin-top: .125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-combobox__asset-tags { display: flex; flex-wrap: wrap; gap: .3125rem; margin-top: .4375rem; }
.dt-combobox__asset-tags > span { align-items: center; background: color-mix(in srgb,var(--dt-color-brand) 8%,var(--dt-color-surface)); border-radius: 999px; color: var(--dt-color-brand); display: inline-flex; font-size: .5625rem; font-weight: 750; min-height: 1.25rem; padding: .1875rem .4375rem; }
.dt-combobox__asset-value { align-items: end; display: grid; justify-items: end; min-width: 6.75rem; text-align: right; }
.dt-combobox__asset-value > small { color: var(--dt-color-text-muted); font-size: .5625rem; font-weight: 800; letter-spacing: .06em; }
.dt-combobox__asset-value > strong { color: var(--dt-color-text); font-size: .8125rem; margin-top: .0625rem; }
.dt-combobox__asset-change { font-size: .625rem; font-weight: 750; margin-top: .1875rem; }
.dt-combobox__asset-change--positive { color: var(--dt-color-success); }
.dt-combobox__asset-change--negative { color: var(--dt-color-danger); }
.dt-combobox__asset-change--neutral { color: var(--dt-color-text-muted); }

.dt-instrument-card { background: var(--dt-color-surface); border: 1px solid var(--dt-color-border); border-radius: 1rem; box-shadow: var(--dt-shadow-sm); color: var(--dt-color-text); display: block; padding: 1rem; position: relative; text-decoration: none; transition: border-color .18s ease,box-shadow .18s ease,transform .18s ease; width: min(28rem,calc(100vw - 2rem)); }
.dt-instrument-card:hover,.dt-instrument-card.is-selected { border-color: color-mix(in srgb,var(--dt-color-brand) 45%,var(--dt-color-border)); box-shadow: var(--dt-shadow-md); transform: translateY(-1px); }
.dt-instrument-card > header { align-items: center; display: grid; gap: .75rem; grid-template-columns: auto minmax(0,1fr) auto; }
.dt-instrument-card > header > div > span { color: var(--dt-color-brand); font-family: var(--dt-font-compact); font-size: .5rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.dt-instrument-card h3 { font-size: .875rem; margin: .2rem 0 0; }
.dt-instrument-card header p { color: var(--dt-color-text-muted); font-family: var(--dt-font-compact); font-size: .625rem; font-weight: 700; margin: .125rem 0 0; }
.dt-instrument-card dl { border-block: 1px solid var(--dt-color-border); display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 1rem 0 .75rem; }
.dt-instrument-card dl > div { border-right: 1px solid var(--dt-color-border); padding: .75rem; }
.dt-instrument-card dl > div:first-child { padding-left: 0; }
.dt-instrument-card dl > div:last-child { border-right: 0; }
.dt-instrument-card dt { color: var(--dt-color-text-muted); font-family: var(--dt-font-compact); font-size: .5rem; font-weight: 800; text-transform: uppercase; }
.dt-instrument-card dd { font-size: .75rem; font-weight: 700; margin: .25rem 0 0; }
.dt-instrument-card > footer { display: flex; flex-wrap: wrap; gap: .375rem; }
.dt-instrument-card > footer span { background: color-mix(in srgb,var(--dt-color-brand) 8%,var(--dt-color-surface)); border-radius: 999px; color: var(--dt-color-brand); font-family: var(--dt-font-compact); font-size: .5rem; font-weight: 750; padding: .25rem .5rem; }

.dt-mf-comparison { display: grid; gap: .65rem; grid-template-columns: repeat(3,minmax(0,1fr)); width: min(48rem,calc(100vw - 2rem)); }
.dt-mf-comparison__slot { background: var(--dt-color-surface); border: 1px solid var(--dt-color-border); border-radius: .75rem; display: grid; gap: .3rem; min-height: 6rem; padding: .875rem 2.4rem .875rem .875rem; position: relative; }
.dt-mf-comparison__slot.is-empty { align-content: center; border-style: dashed; }
.dt-mf-comparison__slot strong { font-size: .68rem; line-height: 1.35; }
.dt-mf-comparison__slot small { color: var(--dt-color-text-muted); font-size: .57rem; }
.dt-mf-comparison__remove { align-items: center; background: transparent; border: 1px solid var(--dt-color-border); border-radius: 50%; color: var(--dt-color-text-muted); display: flex; height: 1.5rem; justify-content: center; position: absolute; right: .65rem; top: .65rem; width: 1.5rem; }
.dt-mf-comparison__index { color: var(--dt-color-brand); font: 850 .52rem var(--dt-font-compact); letter-spacing: .08em; text-transform: uppercase; }

.cm-comparison-grid-page .cmp-hero-search.dt-combobox { min-width: 0; width: 100%; }
.cm-comparison-grid-page .cmp-comparison-grid { grid-template-columns: minmax(0,1fr); }
.cm-comparison-grid-page .cmp-selected-strip { grid-template-columns: repeat(3,minmax(0,1fr)); }
.cm-comparison-grid-page.cm-toolkit-scope .cmp-hero-search.dt-combobox .dt-combobox__input {
  background: var(--dt-color-surface) !important;
  border: 1px solid var(--dt-color-border) !important;
  border-radius: var(--dt-radius-sm) !important;
  box-shadow: none !important;
  box-sizing: border-box;
  color: var(--dt-color-text);
  font-size: 1rem !important;
  min-height: var(--dt-control-height) !important;
  padding: .625rem .75rem .625rem 3.25rem !important;
}
.cm-comparison-grid-page.cm-toolkit-scope .cmp-hero-search.dt-combobox .dt-combobox__input:focus {
  border-color: var(--dt-color-brand) !important;
  box-shadow: 0 0 0 3px var(--dt-color-focus) !important;
}
.cm-comparison-grid-page.cm-toolkit-scope .cmp-hero-search.dt-combobox:focus-within {
  border-color: transparent !important;
  box-shadow: none !important;
}
.cm-comparison-grid-page .cmp-hero-search .dt-combobox__menu { max-height: min(28rem,var(--cmp-suggestions-room,28rem)); z-index: 1200; }
.cm-comparison-grid-page .cmp-selected-strip.dt-mf-comparison { max-width: none; width: 100%; }
.cm-comparison-grid-page .cmp-selected-item { min-width: 0; position: relative; }
.cm-comparison-grid-page .cmp-selected-item .dt-instrument-card { box-sizing: border-box; height: 100%; max-width: none; width: 100%; }
.cm-comparison-grid-page .cmp-selected-item .cmp-remove { position: absolute; right: .75rem; top: .75rem; z-index: 2; }
.cm-comparison-grid-page .cmp-selected-item .dt-instrument-card > header { padding-right: 2.75rem; }
.cm-comparison-grid-page .dt-asset-logo .asset-logo { border: 0; border-radius: inherit !important; height: 100%; width: 100%; }

@media (max-width: 48rem) {
  .cm-comparison-grid-page .cmp-selected-strip,.dt-mf-comparison { grid-template-columns: 1fr; }
  .dt-combobox__option--asset { grid-template-columns: 2.25rem minmax(0,1fr); }
  .dt-combobox__asset-value { grid-column: 2; justify-items: start; min-width: 0; text-align: left; }
}
