/* v180 — Product and advisory layout. Presentation only; data and scoring are unchanged. */

/* Product workspace: hierarchy, shared baselines and resilient content widths. */
#page-products :is(.chart-view-dashboard, .product-compare-dashboard) {
  gap: var(--ux-gap, 20px);
  min-width: 0;
}
#page-products :is(.chart-product-hero, .spotlight-header-card, .compare-selector-card,
  .chart-panel-card, .holdings-card) {
  padding: var(--ux-inset, 20px);
  min-width: 0;
}
#page-products :is(.hero-product-name, .hero-product-name a) {
  font-size: 22px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
#page-products :is(.hero-desc-text, .strategy-point-text, .suitability-text,
  .donut-item-row, .industry-label-row, .stock-name-text, .stock-pct-val,
  .dossier-highlights-content, .dossier-raw-body, .compare-diagnosis-content,
  .diag-summary-box) {
  font-size: var(--ux-body, 14px);
  line-height: 1.65;
}
#page-products :is(.chart-panel-title, .section-heading-text, .directory-title,
  .market-indicators-heading h3) {
  font-size: var(--ux-title, 18px);
  line-height: 1.45;
}
#page-products :is(.chart-panel-header, .holdings-section-header, .compare-header-top-row) {
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
#page-products :is(.chart-panel-title, .compare-header-title-wrap) {
  min-width: 0;
  flex-wrap: wrap;
}
#page-products :is(.spotlight-input, .product-mode-tab-btn, .risk-filter-btn,
  .product-quick-chip[data-id], .chips-expand-toggle-btn, .timeframe-btn,
  .market-indicators-controls button, .directory-filters-row .filter-select.mini) {
  font-size: var(--ux-body, 14px);
  line-height: 1.5;
}
#page-products :is(.timeframe-btn, .market-indicators-controls button,
  .risk-filter-btn, .chips-expand-toggle-btn) {
  min-height: var(--ux-control, 40px);
  padding: 8px 12px;
  height: auto;
}
#page-products .product-quick-chip[data-id] {
  min-height: 36px;
  height: auto;
  padding: 6px 12px;
  white-space: normal;
  text-align: left;
}
#page-products .quick-chips-tier-row {
  padding: 12px;
  gap: 12px;
  grid-template-columns: 112px minmax(0, 1fr);
}
#page-products .quick-chips-tier-items { gap: 8px; }
#page-products .hero-actions-group { align-self: flex-start; }

/* Six KPIs share one scale. Full labels and source notes remain readable. */
#page-products .kpi-metrics-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 154px), 1fr));
  gap: 12px;
  align-items: stretch;
}
#page-products .kpi-metric-card {
  min-height: 124px;
  height: auto;
  padding: 16px;
  gap: 8px;
  justify-content: flex-start;
  border-radius: 12px;
  overflow: visible;
}
#page-products .kpi-label {
  min-height: 0;
  font-size: var(--ux-body, 14px);
  line-height: 1.5;
  white-space: normal;
  overflow: visible;
  margin: 0;
}
#page-products .kpi-value {
  margin: auto 0 0;
  font-size: 24px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
#page-products .kpi-value.compact-bm,
#page-products #chartKpiGrid .kpi-value[title] {
  font-size: var(--ux-body, 14px);
  line-height: 1.55;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
#page-products .kpi-sub {
  font-size: var(--ux-small, 12px);
  line-height: 1.55;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

/* Chart heights are deliberate; surrounding cards grow with content. */
#page-products .charts-main-grid {
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: var(--ux-gap, 20px);
  align-items: stretch;
}
#page-products :is(.charts-bottom-grid, .holdings-content-grid) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ux-gap, 20px);
  align-items: start;
}
#page-products :is(.chart-trend-panel, .chart-radar-panel) .chart-canvas-container {
  height: 320px !important;
  min-height: 320px !important;
  max-width: 100%;
  flex: 1 1 320px;
}
#page-products .chart-no-data-placeholder {
  padding: 24px 16px;
  min-height: 280px;
  justify-content: center;
}
#page-products :is(.chart-legend-row, .compare-chart-legend) {
  gap: 12px 20px;
  font-size: var(--ux-small, 12px);
  line-height: 1.6;
  flex-wrap: wrap;
}
#page-products .data-source-pill {
  max-width: 100%;
  white-space: normal;
  font-size: var(--ux-small, 12px);
  line-height: 1.5;
}

/* Market cards use available width instead of forcing five cramped columns. */
#page-products .market-scope-card {
  padding: 0 var(--ux-inset, 20px) var(--ux-inset, 20px);
  border-radius: var(--ux-radius, 14px);
}
#page-products .market-indicators-heading {
  margin: 0 calc(-1 * var(--ux-inset, 20px)) 20px;
  padding: 16px var(--ux-inset, 20px);
  align-items: flex-start;
  flex-wrap: wrap;
}
#page-products .market-indicators-heading > div:first-child { gap: 8px 12px; }
#page-products .timing-signal {
  padding: 20px;
  gap: 24px;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: stretch;
}
#page-products :is(.timing-overview, .timing-contributions) { min-width: 0; }
#page-products #timingScore { font-size: 40px; line-height: 1.1; }
#page-products :is(#fundTimingName, .timing-contributions h4, .holdings-card-title) {
  font-size: 16px;
  line-height: 1.5;
  white-space: normal;
}
#page-products :is(.timing-overview p, .timing-scale-labels, .market-indicator-caption,
  .market-indicator-note, #marketStyleWindowStatus, .timing-context-note,
  .market-source-status) {
  font-size: var(--ux-small, 12px);
  line-height: 1.65;
  overflow-wrap: anywhere;
}
#page-products :is(.timing-factor, #timingFactors) {
  font-size: var(--ux-body, 14px);
  line-height: 1.65;
}
#page-products :is(.macro-merged-facts-grid, .timing-fact-grid, .single-product-core-grid) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 12px;
  align-items: stretch;
}
#page-products .macro-style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#page-products :is(.timing-fact, .market-indicator-card) {
  min-height: 142px;
  height: auto;
  padding: 16px;
  gap: 8px;
  justify-content: flex-start;
  border-radius: 12px;
}
#page-products .timing-fact-header { align-items: flex-start; flex-wrap: wrap; gap: 6px 8px; }
#page-products .timing-fact-header > span,
#page-products .market-indicator-label {
  font-size: var(--ux-body, 14px) !important;
  line-height: 1.5 !important;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
#page-products .timing-fact-header > small,
#page-products .timing-fact-footer > small,
#page-products .timing-fact-footer > details {
  font-size: var(--ux-small, 12px) !important;
  line-height: 1.6 !important;
  white-space: normal;
}
#page-products .timing-fact > strong,
#page-products .market-indicator-value {
  margin: 0;
  font-size: 24px !important;
  line-height: 1.3 !important;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
#page-products .timing-fact > p {
  font-size: var(--ux-small, 12px) !important;
  line-height: 1.65 !important;
  margin: 0;
  display: block;
  -webkit-line-clamp: unset;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
#page-products .timing-fact-footer { margin-top: auto; padding-top: 8px; gap: 8px; }
#page-products .market-style-toolbar { gap: 12px; align-items: center; flex-wrap: wrap; }
#page-products :is(.timing-more > summary, .compare-market-context > summary) {
  font-size: var(--ux-body, 14px);
  line-height: 1.5;
  min-height: var(--ux-control, 40px);
  padding: 12px 16px;
}

/* Product data tables: aligned numbers and complete, wrapping names/statuses. */
#page-products :is(.allocation-directory-table, .compare-indicator-table, .compare-table) {
  font-size: var(--ux-body, 14px);
  line-height: 1.6;
}
#page-products .allocation-directory-table :is(th, td) { padding: 14px 12px; vertical-align: top; }
#page-products .allocation-directory-table { min-width: 1140px; }
#page-products .allocation-directory-table thead th small { white-space: nowrap; }
#page-products .allocation-directory-table td.directory-action-cell { min-width: 232px; max-width: 248px; }
#page-products .allocation-directory-table td:first-child strong {
  font-size: var(--ux-body, 14px);
  line-height: 1.6;
  white-space: normal;
  overflow-wrap: anywhere;
}
#page-products :is(.allocation-directory-table small, .directory-detail-grid p,
  .directory-detail-grid p strong, .allocation-directory-table th small) {
  font-size: var(--ux-small, 12px);
  line-height: 1.6;
  white-space: normal;
  overflow-wrap: anywhere;
}
#page-products .directory-filters-row :is(.filter-select, .hs-dropdown-toggle, .search-box) {
  min-height: var(--ux-control, 40px);
  height: auto;
}
#page-products .directory-row-actions { gap: 8px; }
#page-products .directory-row-actions .btn {
  min-height: 36px;
  padding: 7px 10px;
  font-size: 13px;
  line-height: 1.5;
}
/* The polarity legend and explicit timing status carry the meaning once. */
#page-products .timing-fact > strong:is(.tone-good, .tone-bad)::after,
#page-products .market-indicator-value:is(.tone-good, .tone-bad)::after,
#page-products .kpi-metric-card:is(.tone-good, .tone-bad) .kpi-label::after,
#page-products .compare-indicator-table td strong:is(.tone-good, .tone-bad)::after,
#page-products .allocation-directory-table td.dir-metric-cell:is(.tone-good, .tone-bad)::after,
#page-products .timing-factor:is(.tone-good, .tone-bad)::after {
  content: none;
  display: none;
}
#page-products .compare-multi-slots-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 12px;
}
#page-products :is(.compare-header-actions, .raw-actions, .directory-section-header) { flex-wrap: wrap; }
#page-products .compare-hero-item-title { font-size: var(--ux-body, 14px); line-height: 1.55; white-space: normal; }
#page-products .compare-hero-item-ret { font-size: 24px; line-height: 1.3; }
#page-products :is(.compare-slot-select, .compare-slot-badge-label) { font-size: var(--ux-body, 14px); line-height: 1.5; }
#page-products .compare-slot-select { min-height: var(--ux-control, 40px); }
#page-products .compare-indicator-table :is(thead, tbody) :is(th, td),
#page-products .compare-indicator-table :is(th, td) strong,
#page-products .compare-table :is(th, td) { font-size: var(--ux-body, 14px); line-height: 1.6; }
#page-products .compare-indicator-table small { font-size: var(--ux-small, 12px); line-height: 1.6; }
#page-products .raw-content-wrapper.collapsed { max-height: 360px; }
#page-products .raw-text-styled-container { font-size: var(--ux-reading, 15px); line-height: 1.7; }

/* Advisory: content-led column heights; no fixed 720/500 px frames. */
#page-advisory .advisory-flow-container {
  grid-template-columns: minmax(240px, .82fr) minmax(350px, 1.25fr) minmax(310px, 1.08fr);
  gap: var(--ux-gap, 20px);
  height: auto;
  min-height: 0;
  align-items: start;
}
#page-advisory .advisory-col {
  height: auto;
  min-height: 0;
  border-radius: var(--ux-radius, 14px);
  align-self: start;
  overflow: visible;
}
#page-advisory .advisory-col-header {
  min-height: 76px;
  padding: 16px;
  border-radius: var(--ux-radius, 14px) var(--ux-radius, 14px) 0 0;
  gap: 12px;
}
#page-advisory .col-title-group { min-width: 0; white-space: normal; flex-shrink: 1; }
#page-advisory .col-title { font-size: var(--ux-title, 18px); line-height: 1.45; white-space: normal; }
#page-advisory .col-subtitle { font-size: var(--ux-small, 12px); line-height: 1.55; white-space: normal; }
#page-advisory :is(.advisory-col-scrollable-body, .advisory-col-output .advisory-output-body) {
  padding: 16px;
  gap: 16px;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  flex: 0 1 auto;
}
#page-advisory :is(.advisory-customer-scroll, .advisory-matches-scroll) { gap: 12px; }
#page-advisory .advisory-customer-scroll {
  max-height: min(520px, 56dvh);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}
#page-advisory .advisory-matches-scroll { max-height: none; overflow: visible; }
#page-advisory :is(.client-select, .advisory-script-toolbar .filter-select,
  .allocation-controls select, .allocation-controls input[type=number],
  .allocation-question-grid input, .allocation-question-grid select,
  .portfolio-history-panel input:not([type=checkbox]):not([type=radio]), .portfolio-history-panel select) {
  min-height: var(--ux-control, 40px);
  height: auto;
  font-size: var(--ux-body, 14px);
  line-height: 1.5;
  padding: 9px 10px;
}
#page-advisory :is(.advisory-sub-title-row, .allocation-q-heading, .client-stack-item-name,
  .rec-match-name, .portfolio-plan-title, .pie-meta-title, .custom-drawer-title) {
  font-size: var(--ux-body, 14px);
  line-height: 1.5;
}
#page-advisory :is(.client-meta-grid, .client-meta-chip, .client-notes-card,
  .client-stack-item, .rec-match-card, .advisory-client-card,
  .advisory-portfolio-plan-card) { min-width: 0; }
#page-advisory :is(.client-stack-item, .rec-match-card, .advisory-client-card,
  .advisory-portfolio-plan-card) { padding: 14px; gap: 12px; }
#page-advisory :is(.client-profile-header, .client-name-box, .client-stack-item-top,
  .client-item-name-group) { flex-wrap: wrap; }
#page-advisory .client-profile-name { font-size: 18px; line-height: 1.5; }
#page-advisory :is(.client-occupation-pill, .meta-label, .client-notes-header-line,
  .client-stack-item-desc, .pie-meta-sub, .allocation-draft-header p,
  .allocation-note, #allocationMetricStatus, #allocationPoolStatus) {
  font-size: var(--ux-small, 12px);
  line-height: 1.65;
  white-space: normal;
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
#page-advisory :is(.meta-val, .client-notes-text, .asset-reason-text, .rec-match-desc,
  .allocation-controls label, .allocation-question-grid label) {
  font-size: var(--ux-body, 14px);
  line-height: 1.65;
  white-space: normal;
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
#page-advisory .allocation-profile-summary {
  padding: 10px 12px !important;
  font-size: var(--ux-small, 12px) !important;
  line-height: 1.65 !important;
  white-space: normal;
  overflow: visible;
}
#page-advisory .allocation-custom-drawer-body { padding: 16px; gap: 16px; }
#page-advisory :is(.allocation-controls, .allocation-question-grid) { gap: 12px; }
#page-advisory .allocation-controls { padding: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#page-advisory .allocation-controls label { display: flex; flex-direction: column; gap: 6px; }
#page-advisory .allocation-controls label.allocation-risk-toggle {
  flex-direction: row;
  min-height: var(--ux-control, 40px);
  height: auto;
  align-self: end;
  padding: 10px;
  font-size: var(--ux-body, 14px);
}
#page-advisory .allocation-questionnaire-section { padding: 12px; gap: 12px; }
#page-advisory .allocation-question-grid label { display: flex; flex-direction: column; gap: 6px; }
#page-advisory .allocation-metric-toolbar { flex-wrap: wrap; padding: 12px; gap: 10px; }
#page-advisory #allocationMeasure { min-height: var(--ux-control, 40px); height: auto; font-size: var(--ux-body, 14px); }
#page-advisory .allocation-style-options label { min-height: 36px; font-size: var(--ux-body, 14px); }
#page-advisory .allocation-configure-button { min-height: 52px; padding: 14px 16px; }
#page-advisory .allocation-configure-label { font-size: 16px; }
#page-advisory .allocation-pie-wrap { padding: 16px; gap: 12px; }
#page-advisory :is(.allocation-pie-headbar, .pie-headbar-left) { flex-wrap: wrap; }
#page-advisory .allocation-pie-stage { gap: 16px; align-items: center; }
#page-advisory .allocation-pie { width: 124px; height: 124px; }
#page-advisory .pie-center-eyebrow { font-size: 12px; line-height: 1.4; }
#page-advisory .pie-center-num { font-size: 20px; line-height: 1.3; }
#page-advisory .allocation-pie-meta { min-width: 0; }
#page-advisory .bucket-card { min-height: 60px; padding: 10px; }
#page-advisory .bucket-card-top { gap: 4px 8px; flex-wrap: wrap; font-size: var(--ux-small, 12px); }
#page-advisory .bucket-card-top span { font-size: var(--ux-small, 12px); line-height: 1.5; white-space: nowrap; }
#page-advisory .bucket-card-top strong { margin-left: auto; font-size: var(--ux-body, 14px); line-height: 1.5; }
#page-advisory .allocation-plan-body { gap: 12px; }
#page-advisory .portfolio-items-list { gap: 12px; }
#page-advisory .allocation-tool { padding: 14px; }
#page-advisory .allocation-tool strong { display: block; margin: 6px 0 0; font-size: var(--ux-body, 14px); line-height: 1.55; overflow-wrap: anywhere; }
#page-advisory .allocation-tool small { display: block; margin-top: 4px; font-size: var(--ux-small, 12px); line-height: 1.55; }
#page-advisory .allocation-tool p,
#page-advisory .allocation-plan-body > .allocation-note {
  display: block;
  margin: 6px 0 0;
  font-size: var(--ux-small, 12px);
  line-height: 1.65;
  white-space: normal;
  -webkit-line-clamp: unset;
  overflow: visible;
  text-overflow: clip;
}
#page-advisory :is(.allocation-role, .allocation-risk, .allocation-status, .allocation-evidence span,
  .script-status-pill, .script-style-tag, .ctx-label) { font-size: var(--ux-small, 12px); line-height: 1.5; }
#page-advisory .script-context-item strong { font-size: var(--ux-body, 14px); line-height: 1.55; white-space: normal; }
#page-advisory .script-context-item small { font-size: var(--ux-small, 12px); line-height: 1.55; white-space: normal; }

/* Historical portfolios retain controls/tables without squeezing their text. */
#page-advisory .portfolio-history-panel { padding: 16px; margin: 0; border-radius: 12px; }
#page-advisory .portfolio-history-heading { align-items: flex-start; gap: 12px; }
#page-advisory .portfolio-history-heading h3 { font-size: 16px; line-height: 1.5; }
#page-advisory :is(.portfolio-history-heading p, .portfolio-history-status p,
  .portfolio-history-cash, .portfolio-history-actions label,
  .portfolio-history-note, .portfolio-history-chart-heading small,
  .portfolio-history-item small, .portfolio-benchmark-caption) {
  font-size: var(--ux-small, 12px) !important;
  line-height: 1.65;
}
#page-advisory .portfolio-history-search-row { flex-wrap: wrap; }
#page-advisory .portfolio-history-search-row select { width: auto; flex: 1 1 120px; }
#page-advisory .portfolio-history-search-row input { flex: 1 1 180px; }
#page-advisory .portfolio-history-item { grid-template-columns: minmax(0, 1fr) 86px auto; gap: 10px; padding: 14px 0; }
#page-advisory .portfolio-history-item strong { font-size: var(--ux-body, 14px); line-height: 1.55; }
#page-advisory .portfolio-history-item input { width: 64px; }
#page-advisory .portfolio-history-item.is-readonly { grid-template-columns: minmax(0, 1fr) auto; }
#page-advisory .portfolio-history-item .btn { min-height: 36px; font-size: 13px; }
#page-advisory .portfolio-history-actions { gap: 10px; align-items: center; }
#page-advisory .portfolio-history-actions > label { flex: 1 0 100%; }
#page-advisory .portfolio-history-actions .btn { min-height: var(--ux-control, 40px); font-size: var(--ux-body, 14px); white-space: nowrap; flex: 1 0 auto; }
#page-advisory .portfolio-history-panel .portfolio-benchmark-options input { width: 15px; height: 15px; min-height: 0; padding: 0; }
#page-advisory .portfolio-history-chart { height: 240px; }
#page-advisory :is(.portfolio-history-table-scroll, .portfolio-benchmark-scroll) { scrollbar-gutter: stable; }
#page-advisory :is(.portfolio-history-table-scroll table, .portfolio-benchmark-scroll table) { font-size: 13px; }
#page-advisory :is(.portfolio-history-table-scroll td, .portfolio-benchmark-scroll td) { padding: 12px; }
#page-advisory .portfolio-history-stats strong { font-size: 24px; font-variant-numeric: tabular-nums; }
#page-advisory .portfolio-benchmark-options label { min-height: 36px; font-size: 13px; }

/* Long-form advisory copy follows the same reading scale as product dossiers. */
#page-advisory .advisory-script-toolbar {
  overflow: visible;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px;
  gap: 8px;
}
#page-advisory .advisory-script-toolbar .filter-select { min-width: min(100%, 200px); max-width: 100%; flex: 1 1 200px; }
#page-advisory .advisory-script-toolbar .btn { min-height: var(--ux-control, 40px); height: auto; font-size: 13px; padding: 8px 10px; }
#page-advisory #copyScriptBtn { min-height: var(--ux-control, 40px); height: auto; }
#page-advisory .live-script-card { flex: 0 1 auto; min-height: 0; }
#page-advisory .script-rendered-box { padding: 16px; height: auto; overflow: visible; gap: 16px; }
#page-advisory :is(.script-editable-content, .script-editable-content p,
  .script-editable-content li, .script-editable-content blockquote) {
  font-size: var(--ux-reading, 15px);
  line-height: 1.7;
  overflow-wrap: anywhere;
}
#page-advisory .script-editable-content h3 { font-size: var(--ux-title, 18px); line-height: 1.5; }
#page-advisory .script-editable-content h2 { font-size: 20px; line-height: 1.5; }
#page-advisory .script-editable-content h1 { font-size: 22px; line-height: 1.5; }
#page-advisory .script-editable-content h4 { font-size: 16px; line-height: 1.5; }
#page-advisory :is(.script-context-strip, .script-ready-card, .script-outline-preview) { padding: 14px; }
#page-advisory :is(.script-ready-title, .script-outline-step strong) { font-size: var(--ux-body, 14px); line-height: 1.55; white-space: normal; }
#page-advisory :is(.script-ready-desc, .script-outline-step p, .script-context-item) {
  font-size: var(--ux-small, 12px);
  line-height: 1.65;
  display: block;
  -webkit-line-clamp: unset;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

@media (max-width: 1359px) and (min-width: 769px) {
  #page-advisory .advisory-flow-container { grid-template-columns: minmax(240px, .85fr) minmax(350px, 1.35fr); }
  #page-advisory .advisory-col-output { grid-column: 1 / -1; height: auto; }
  #page-advisory .advisory-col-output .script-editable-content { max-width: 90ch; }
}
@media (max-width: 1100px) {
  #page-products .charts-main-grid { grid-template-columns: minmax(0, 1fr); }
  #page-products .chart-radar-panel .chart-canvas-container { flex: 0 1 300px; height: 300px !important; min-height: 300px !important; }
}
@media (max-width: 1050px) {
  #page-products .allocation-directory-table { min-width: 0; }
  #page-products .allocation-directory-table tr[data-directory-id] > td.directory-action-cell { min-width: 0; max-width: none; }
  #page-products .allocation-directory-table :is(th, td) { padding: 0; }
  #page-products .allocation-directory-table tr[data-directory-id] { padding: 16px; gap: 16px; }
  #page-products .allocation-directory-table tr[data-directory-id] > td.dir-metric-cell::before { font-size: var(--ux-small, 12px); line-height: 1.55; }
  #page-products .allocation-directory-table tr[data-directory-id] > td.dir-metric-cell { text-align: left; }
  #page-products .directory-row-actions .btn { min-height: var(--ux-control, 40px); }
  #page-products .allocation-directory-table .directory-timing-reason { margin-top: 6px; font-size: var(--ux-small, 12px); }
}
@media (max-width: 960px) and (min-width: 769px) {
  #page-advisory .advisory-flow-container { grid-template-columns: minmax(0, 1fr); }
  #page-advisory .advisory-col-output { grid-column: auto; }
  #page-advisory .advisory-customer-scroll { max-height: 320px; }
}
@media (max-width: 768px) {
  #page-products :is(.chart-product-hero, .spotlight-header-card, .compare-selector-card,
    .chart-panel-card, .holdings-card) { padding: 16px !important; }
  #page-products :is(.charts-bottom-grid, .holdings-content-grid, .macro-style-grid, .timing-signal) { grid-template-columns: minmax(0, 1fr); }
  #page-products .hero-product-name { font-size: 20px; }
  #page-products .kpi-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px !important; }
  #page-products .kpi-metric-card { min-height: 120px; padding: 14px; }
  #page-products .kpi-value { font-size: 24px !important; }
  #page-products .kpi-value.compact-bm,
  #page-products #chartKpiGrid .kpi-value[title] { font-size: var(--ux-body, 14px) !important; }
  #page-products .timeframe-btn { min-height: 44px; font-size: var(--ux-body, 14px) !important; padding: 8px 12px !important; }
  #page-products .timing-signal { padding: 16px; gap: 16px; }
  #page-products .timing-scale-labels { gap: 8px; }
  #page-products .timing-fact-header { flex-wrap: wrap; }
  #page-products .quick-chips-tier-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #page-products .quick-chips-tier-badge { justify-self: start; }
  #page-products .market-indicators-heading { gap: 12px; }
  #page-products .directory-section-header { padding: 16px; }
  #page-products .directory-filters-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; width: 100%; gap: 8px; }
  #page-products .directory-filters-row :is(.filter-select, .hs-dropdown, .search-box) { flex: none; width: 100%; min-width: 0; max-width: 100%; }
  #page-products .directory-filters-row > :is(.search-box, .btn),
  #page-products .directory-filters-row > .hs-dropdown:has(select:is(#productAllocationClass, #productCategoryFilter, #productSortFilter)) { grid-column: 1 / -1; }
  #page-products .directory-filters-row .hs-dropdown-toggle { height: auto; min-height: 44px; padding: 10px 12px; }
  #page-products .directory-filters-row .hs-dropdown-toggle-text { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.5; }
  #page-advisory .advisory-flow-container { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #page-advisory .advisory-col-output { grid-column: auto; }
  #page-advisory .advisory-col-header { min-height: 72px; }
  #page-advisory .advisory-customer-scroll { max-height: 380px; }
  #page-advisory :is(.allocation-controls, .allocation-question-grid) { grid-template-columns: minmax(0, 1fr); }
  #page-advisory .allocation-question-grid label:last-child { grid-column: auto; }
  #page-advisory .portfolio-history-item { grid-template-columns: minmax(0, 1fr) 80px auto; gap: 8px; }
  #page-advisory .portfolio-history-item.is-readonly { grid-template-columns: minmax(0, 1fr) auto; }
  #page-advisory .portfolio-history-heading { flex-wrap: wrap; }
  #page-advisory .portfolio-history-heading .btn { min-height: 40px; }
  #page-advisory .allocation-pie-stage { flex-wrap: wrap; justify-content: center; }
  #page-advisory .allocation-pie-meta { flex: 1 1 180px; }
  #page-advisory .portfolio-history-custom { flex-wrap: wrap; }
  #page-advisory .portfolio-history-chart-heading { flex-wrap: wrap; }
  #page-products :is(input, select, textarea),
  #page-advisory :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { font-size: 16px !important; }
}
@media (max-width: 480px) {
  /* renderKPIs places the contract benchmark second and the threshold sixth. */
  #page-products #chartKpiGrid > .kpi-metric-card:nth-child(2) { grid-column: 1 / -1; order: 2; min-height: 0; }
  #page-products #chartKpiGrid > .kpi-metric-card:nth-child(6) { grid-column: 1 / -1; order: 1; min-height: 0; }
  #page-advisory .portfolio-history-item:not(.is-readonly) { grid-template-columns: minmax(0, 1fr) auto; }
  #page-advisory .portfolio-history-item:not(.is-readonly) > div:first-child { grid-column: 1 / -1; }
  #page-advisory .portfolio-history-item:not(.is-readonly) > label { justify-self: start; }
}
@media (pointer: coarse) {
  #page-products :is(.timeframe-btn, .risk-filter-btn, .market-indicators-controls button,
    .directory-row-actions .btn, .product-quick-chip[data-id]),
  #page-advisory :is(.advisory-script-toolbar .btn, .portfolio-history-item .btn,
    .allocation-style-options label, .portfolio-benchmark-options label) { min-height: 44px; }
}