/*
 * Report widget content, independent of the report's saved grid coordinates.
 * The report controller opts in actual report articles only. PDF, print and
 * widget-builder previews intentionally never receive this attribute.
 *
 * Named queries use the article's width, even inside ABM/media containers.
 * Explicit --widget-*-size settings remain authoritative: responsive defaults
 * use bounded container units, while large chosen text can wrap and scroll.
 */
@media screen {
  .widget[data-responsive-widget="true"] {
    container-name: report-widget;
    container-type: inline-size;
    --responsive-content-gap: clamp(10px, 2cqi, 20px);
    --responsive-content-padding: clamp(12px, 2.5cqi, 24px);
  }

  /* Preserve the consultant's existing named queries as well. */
  .widget[data-responsive-widget="true"].type-consultant_spotlight {
    container-name: report-widget consultant-profile;
  }

  .widget[data-responsive-widget="true"] > .widget-body {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior-y: auto;
    scrollbar-width: thin;
  }

  .widget[data-responsive-widget="true"] > .widget-body > * {
    min-width: 0;
    max-width: 100%;
    flex-shrink: 0;
  }

  /* Very short manual heights keep an actual content scrollport. 96px stays
     below the controller's 150px 'short' threshold, avoiding resize loops. */
  .widget[data-responsive-widget="true"][data-responsive-height="short"] {
    overflow: auto;
    scrollbar-width: thin;
  }

  .widget[data-responsive-widget="true"][data-responsive-height="short"] > .widget-body {
    flex: 1 0 96px;
    min-height: 96px;
  }

  /* Chrome keeps configured ordering, visibility and alignment. */
  .widget[data-responsive-widget="true"] > .widget-header {
    min-width: 0;
    flex-wrap: wrap;
    gap: 8px;
    padding: clamp(10px, 2.5cqi, 16px);
  }

  .widget[data-responsive-widget="true"] .widget-heading {
    min-width: 0;
    flex: 1 1 100px;
  }

  .widget[data-responsive-widget="true"] .widget-heading h3 {
    font-size: var(--widget-title-size, 13px);
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .widget[data-responsive-widget="true"]:not(.widget-subtitle-hidden) > .widget-header .widget-heading p {
    display: block;
    font-size: var(--widget-subtitle-size, 10px);
    white-space: normal;
    overflow-wrap: anywhere;
    overflow: visible;
    text-overflow: clip;
  }

  .widget[data-responsive-widget="true"] .widget-actions,
  .widget[data-responsive-widget="true"] .widget-chrome-tools {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }

  .widget[data-responsive-widget="true"] > .widget-footer,
  .widget[data-responsive-widget="true"] > .widget-tabs {
    min-width: 0;
    flex-wrap: wrap;
  }

  .widget[data-responsive-widget="true"] > .widget-footer {
    gap: 5px 8px;
    overflow-wrap: anywhere;
  }

  .widget[data-responsive-widget="true"] .footer-status {
    min-width: 0;
    max-width: 100%;
  }

  .widget[data-responsive-widget="true"] > .data-warning {
    flex-shrink: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    max-height: 6em;
    overflow: auto;
  }

  .widget[data-responsive-widget="true"] .comparison-delta,
  .widget[data-responsive-widget="true"] .comparison-strip > span,
  .widget[data-responsive-widget="true"] .comparison-caption {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    flex-wrap: wrap;
  }

  .widget[data-responsive-widget="true"] .empty-state,
  .widget[data-responsive-widget="true"] .widget-skeleton {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* All six single-metric designs retain their structure and colour scheme. */
  .widget[data-responsive-widget="true"] :is(.single-metric-content, .single-metric-compact, .single-metric-bars, .single-metric-sparkline-card, .single-metric-premium) {
    flex: 1 0 auto;
    height: auto;
    min-height: 140px;
    min-width: 0;
    padding: var(--responsive-content-padding);
    overflow: visible;
  }

  .widget[data-responsive-widget="true"] :is(.single-metric-content, .single-metric-premium) {
    gap: clamp(8px, 2cqi, 12px);
  }

  .widget[data-responsive-widget="true"] .single-metric-value {
    font-size: var(--widget-value-size, clamp(26px, 9cqi, 52px));
  }

  .widget[data-responsive-widget="true"] .single-metric-compact-value {
    font-size: var(--widget-value-size, clamp(25px, 8cqi, 42px));
  }

  .widget[data-responsive-widget="true"] .single-metric-sparkline-card > strong {
    font-size: var(--widget-value-size, clamp(25px, 8cqi, 39px));
  }

  .widget[data-responsive-widget="true"] .single-metric-premium-value {
    font-size: var(--widget-value-size, clamp(27px, 9cqi, 54px));
  }

  .widget[data-responsive-widget="true"] :is(.single-metric-value, .single-metric-compact-value, .single-metric-sparkline-card > strong, .single-metric-premium-value, .single-period-row > strong) {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .widget[data-responsive-widget="true"] :is(.single-metric-bars-head, .single-metric-compact-compare, .single-metric-premium-foot) {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 6px 12px;
  }

  .widget[data-responsive-widget="true"] :is(.single-metric-bars-head > b, .single-metric-compact-compare > b, .single-metric-compact-compare > span, .single-metric-premium-trend, .single-metric-sparkline-delta) {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .widget[data-responsive-widget="true"] .single-period-row {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, .8fr) minmax(50px, 1.25fr) minmax(0, 1fr);
    gap: 8px;
  }

  .widget[data-responsive-widget="true"] .single-period-track {
    min-width: 0;
    grid-column: auto;
    grid-row: auto;
  }

  .widget[data-responsive-widget="true"] .single-metric-sparkline-chart {
    flex: 0 0 auto;
    min-width: 0;
    height: clamp(50px, 16cqi, 80px);
  }

  /* KPI grids and calculated metrics: no viewport rule may discard a field. */
  .widget[data-responsive-widget="true"] .kpi-content {
    flex: 1 0 auto;
    min-width: 0;
    padding: var(--responsive-content-padding);
    gap: var(--responsive-content-gap);
  }

  .widget[data-responsive-widget="true"] .kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr));
    gap: 10px;
  }

  .widget[data-responsive-widget="true"] .kpi-tile {
    min-width: 0;
    min-height: 110px;
    padding: 12px;
  }

  .widget[data-responsive-widget="true"] .kpi-value {
    font-size: var(--widget-value-size, clamp(20px, 5cqi, 32px));
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .widget[data-responsive-widget="true"] .kpi-hint {
    display: flex;
    flex-wrap: wrap;
  }

  .widget[data-responsive-widget="true"] :is(.kpi-label, .kpi-unit, .kpi-hint, .spark-header) {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .widget[data-responsive-widget="true"] .spark-header {
    flex-wrap: wrap;
    gap: 6px;
  }

  .widget[data-responsive-widget="true"] .formula-content {
    flex: 1 0 auto;
    min-width: 0;
    padding: var(--responsive-content-padding);
  }

  .widget[data-responsive-widget="true"] .formula-result-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  .widget[data-responsive-widget="true"] .formula-breakdown {
    display: block;
    min-width: 0;
  }

  .widget[data-responsive-widget="true"] :is(.formula-box, .formula-result, .formula-tokens, .token-chip) {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .widget[data-responsive-widget="true"] .formula-result .value {
    font-size: var(--widget-value-size, clamp(23px, 7cqi, 36px));
    overflow-wrap: anywhere;
  }

  .widget[data-responsive-widget="true"] .formula-breakdown > div {
    flex-wrap: wrap;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Measured SVG charts keep a useful plotting area at short manual heights.
     resizeCharts owns SVG geometry; never stretch the axes with CSS transforms. */
  .widget[data-responsive-widget="true"] .chart-container {
    flex: 1 0 220px;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 220px;
    max-width: 100%;
    padding: clamp(10px, 2cqi, 18px) clamp(8px, 2cqi, 16px) 12px;
  }

  .widget[data-responsive-widget="true"] .chart-responsive {
    flex: 1 0 180px;
    min-width: 0;
    min-height: 180px;
    height: auto;
    overflow: auto;
    scrollbar-width: thin;
  }

  .widget[data-responsive-widget="true"] .chart-responsive-mini {
    min-height: 70px;
    flex-basis: 70px;
    height: 100%;
  }

  .widget[data-responsive-widget="true"] .chart-legend {
    gap: 6px 12px;
    font-size: var(--widget-axis-size, 10px);
    min-width: 0;
    height: auto;
    flex-wrap: wrap;
  }

  .widget[data-responsive-widget="true"] .chart-legend > span {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* Donut/pie designs retain slices, depth, colours, totals and legend choice. */
  .widget[data-responsive-widget="true"] :is(.donut-view, .donut-summary, .donut-modern) {
    min-width: 0;
    min-height: 210px;
    height: auto;
    flex: 1 0 auto;
  }

  .widget[data-responsive-widget="true"] .donut-view {
    flex-wrap: nowrap;
  }

  .widget[data-responsive-widget="true"] .donut-view > svg {
    min-width: 0;
    width: 50%;
    height: auto;
    flex: 1 1 50%;
  }

  .widget[data-responsive-widget="true"] .donut-summary {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    padding: var(--responsive-content-padding);
    gap: var(--responsive-content-gap);
  }

  .widget[data-responsive-widget="true"] :is(.donut-legend, .donut-summary-legend, .donut-modern-legend) {
    min-width: 0;
    font-size: var(--widget-axis-size, 10px);
  }

  .widget[data-responsive-widget="true"] :is(.donut-legend span, .donut-summary-legend span, .donut-modern-legend-row span) {
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }

  .widget[data-responsive-widget="true"] :is(.donut-legend b, .donut-summary-legend b, .donut-summary-legend em, .donut-modern-legend-row b) {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .widget[data-responsive-widget="true"] .donut-modern {
    flex-wrap: nowrap;
    align-content: normal;
  }

  .widget[data-responsive-widget="true"] .donut-modern-plot {
    min-width: 0;
    min-height: 160px;
    height: auto;
    max-height: none;
  }

  .widget[data-responsive-widget="true"] .donut-modern-plot svg {
    height: auto;
    max-width: 100%;
  }

  .widget[data-responsive-widget="true"] .donut-modern-legend {
    max-height: 240px;
    overflow: auto;
  }

  .widget[data-responsive-widget="true"] .donut-modern.legend-bottom .donut-modern-legend {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr));
    max-height: 160px;
  }

  /* Goals, funnels, progress lists and conversion breakdowns. */
  .widget[data-responsive-widget="true"] :is(.goal-content, .goal-track-card) {
    flex: 1 0 auto;
    height: auto;
    min-width: 0;
    padding: var(--responsive-content-padding);
  }

  .widget[data-responsive-widget="true"] :is(.goal-heading, .goal-footer, .goal-track-bottom) {
    min-width: 0;
    flex-wrap: wrap;
    gap: 6px 12px;
  }

  .widget[data-responsive-widget="true"] :is(.goal-metric, .goal-state, .goal-track-title, .goal-track-status) {
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
  }

  .widget[data-responsive-widget="true"] .goal-gauge {
    display: grid;
    grid-template-areas: "gauge";
    width: min(310px, 100%);
    min-width: 0;
  }

  .widget[data-responsive-widget="true"] .goal-gauge > svg {
    grid-area: gauge;
  }

  .widget[data-responsive-widget="true"] .goal-value {
    grid-area: gauge;
    position: static;
    transform: none;
    align-self: end;
    justify-self: center;
    max-width: 85%;
    margin-bottom: 10px;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }

  .widget[data-responsive-widget="true"] .goal-value strong {
    font-size: var(--widget-value-size, clamp(23px, 7cqi, 31px));
  }

  .widget[data-responsive-widget="true"] .goal-track-title strong {
    font-size: var(--widget-value-size, 18px);
    overflow-wrap: anywhere;
  }

  .widget[data-responsive-widget="true"] :is(.metric-funnel, .conversion-breakdown, .metric-funnel-shape) {
    flex: 1 0 auto;
    min-width: 0;
    padding: var(--responsive-content-padding);
  }

  .widget[data-responsive-widget="true"] :is(.metric-funnel-step, .conversion-breakdown-row, .metric-funnel-shape-row, .rank-progress-row) {
    flex-shrink: 0;
    min-width: 0;
  }

  .widget[data-responsive-widget="true"] :is(.metric-funnel-head, .conversion-breakdown-head, .rank-progress-head, .metric-funnel-shape-copy) {
    min-width: 0;
    flex-wrap: wrap;
    gap: 5px 12px;
  }

  .widget[data-responsive-widget="true"] :is(.metric-funnel-head > span, .conversion-breakdown-head > span, .rank-progress-head > span, .rank-progress-head strong, .metric-funnel-shape-copy > span) {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }

  .widget[data-responsive-widget="true"] .metric-funnel-shape-row {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
    gap: clamp(10px, 2.4cqi, 22px);
  }

  .widget[data-responsive-widget="true"] .rank-progress-list {
    flex: 1 0 auto;
    padding: var(--responsive-content-padding);
    overflow: visible;
  }

  /* Analytical layouts respond to their own allocated width. */
  .widget[data-responsive-widget="true"] :is(.what-if-simulator, .growth-drivers, .geo-distribution) {
    min-width: 0;
    padding: var(--responsive-content-padding);
    gap: var(--responsive-content-gap);
  }

  .widget[data-responsive-widget="true"] .what-if-simulator {
    grid-template-columns: minmax(0, 1fr) minmax(0, .6fr);
  }

  .widget[data-responsive-widget="true"] .growth-drivers {
    grid-template-columns: minmax(0, 1fr) minmax(0, .42fr);
  }

  .widget[data-responsive-widget="true"] .growth-driver-row {
    grid-template-columns: minmax(0, .8fr) minmax(35px, 1fr) minmax(0, .5fr);
    gap: 10px;
  }

  .widget[data-responsive-widget="true"] .geo-distribution {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
  }

  .widget[data-responsive-widget="true"] :is(.what-if-controls, .what-if-result, .growth-driver-list, .growth-drivers-total, .denmark-map, .geo-legend) {
    min-width: 0;
  }

  .widget[data-responsive-widget="true"] :is(.what-if-controls label > span, .what-if-result > div) {
    flex-wrap: wrap;
    min-width: 0;
  }

  .widget[data-responsive-widget="true"] :is(.what-if-result > strong, .growth-drivers-total > strong) {
    font-size: var(--widget-value-size, clamp(26px, 6cqi, 43px));
    overflow-wrap: anywhere;
  }

  .widget[data-responsive-widget="true"] .what-if-result > b {
    font-size: var(--widget-value-size, clamp(18px, 4cqi, 27px));
    overflow-wrap: anywhere;
  }

  .widget[data-responsive-widget="true"] :is(.growth-driver-row > strong, .what-if-result em, .geo-legend strong, .geo-legend small) {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .widget[data-responsive-widget="true"] .denmark-map {
    min-height: 0;
  }

  .widget[data-responsive-widget="true"] .denmark-map svg {
    max-width: 100%;
    height: auto;
  }

  .widget[data-responsive-widget="true"] .geo-legend > div {
    grid-template-columns: minmax(0, 1fr) minmax(0, .45fr) minmax(0, .65fr);
    gap: 8px;
  }

  .widget[data-responsive-widget="true"] .geo-legend strong {
    text-align: right;
  }

  .widget[data-responsive-widget="true"] .device-performance {
    width: 100%;
    min-width: 0;
    padding: var(--responsive-content-padding);
    overflow: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  .widget[data-responsive-widget="true"] :is(.device-performance-head, .device-performance-row) {
    min-width: calc(125px + var(--device-columns, 4) * 100px);
    grid-template-columns: minmax(125px, 1.1fr) repeat(var(--device-columns, 4), minmax(100px, 1fr));
  }

  .widget[data-responsive-widget="true"] :is(.device-performance-head > span, .device-performance-row > strong) {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .widget[data-responsive-widget="true"] .device-glyph {
    flex-shrink: 0;
  }

  .widget[data-responsive-widget="true"] .product-treemap {
    min-width: 0;
    padding: var(--responsive-content-padding);
  }

  .widget[data-responsive-widget="true"] .product-treemap-tile {
    min-width: min(100%, 125px);
    min-height: 112px;
    overflow: visible;
  }

  .widget[data-responsive-widget="true"] .product-treemap-tile b {
    font-size: var(--widget-value-size, clamp(19px, 5cqi, 28px));
    overflow-wrap: anywhere;
  }

  .widget[data-responsive-widget="true"] .product-treemap-tile small {
    font-size: var(--widget-label-size, 10px);
    overflow-wrap: anywhere;
  }

  /* Product/customer and professional demographic lists preserve ranking. */
  .widget[data-responsive-widget="true"] :is(.top-products-summary, .klaviyo-list-summary) {
    min-width: 0;
  }

  .widget[data-responsive-widget="true"] .klaviyo-list-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .widget[data-responsive-widget="true"] :is(.top-products-summary strong, .klaviyo-list-summary strong) {
    font-size: var(--widget-value-size, clamp(20px, 5cqi, 28px));
    overflow-wrap: anywhere;
  }

  .widget[data-responsive-widget="true"] .top-product-row {
    grid-template-columns: 26px minmax(0, 1.05fr) minmax(0, 1.7fr);
  }

  .widget[data-responsive-widget="true"] .top-product-visual {
    grid-column: auto;
  }

  .widget[data-responsive-widget="true"] :is(.top-product-info strong, .top-product-info span, .top-product-values span, .linkedin-demographic-main > strong) {
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }

  .widget[data-responsive-widget="true"] .top-product-values {
    flex-wrap: wrap;
    gap: 4px 10px;
  }

  .widget[data-responsive-widget="true"] .linkedin-demographic-row {
    grid-template-columns: 26px minmax(0, 1.1fr) minmax(0, 1fr);
  }

  .widget[data-responsive-widget="true"] .linkedin-demographic-values {
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-column: auto;
  }

  .widget[data-responsive-widget="true"] .linkedin-demographic-values :is(span, small, b) {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .widget[data-responsive-widget="true"] .linkedin-demographic-summary {
    min-width: 0;
    flex-wrap: wrap;
  }

  /* Tables keep all selected columns, totals, heatmap cells and drill controls.
     The table owns scrolling; its mobile opt-in is restored below unchanged. */
  .widget[data-responsive-widget="true"] > .widget-body:has(.table-wrap) {
    overflow: hidden;
  }

  .widget[data-responsive-widget="true"] .table-wrap {
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    scrollbar-width: thin;
  }

  .widget[data-responsive-widget="true"] :is(.table-drill-navigation, .drill-breadcrumbs, .table-drill-pagination, .drill-pagination) {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    overflow-wrap: anywhere;
  }

  .widget[data-responsive-widget="true"] :is(.drill-breadcrumbs button, .table-drill-navigation button, .table-sort) {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .widget[data-responsive-widget="true"] .table-drill-tree {
    overflow: auto;
  }

  /* Feeds: media/card content has its own container, while density is decided
     by the report article. Creative links, expand controls and carousels stay. */

  /* Reading-mode Meta feeds grow with their complete content. Keep the body
     independent of the allocated grid height, so observing .meta-feed-grid
     sees image/video loading and copy expansion without a scrollport or a
     short-widget minimum feeding back into the next height measurement.
     Card edge clipping, copy toggles and carousel scrolling stay unchanged. */
  [data-report-layout="read"] .widget.type-meta_ads_feed[data-responsive-widget="true"][data-responsive-auto-height="true"] {
    overflow: visible;
  }

  [data-report-layout="read"] .widget.type-meta_ads_feed[data-responsive-widget="true"][data-responsive-auto-height="true"] > .widget-body {
    flex: 0 0 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .widget[data-responsive-widget="true"] .meta-feed-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    min-width: 0;
    gap: 16px;
    padding: var(--responsive-content-padding);
    align-items: start;
  }

  .widget[data-responsive-widget="true"] :is(.meta-feed-card, .google-display-card, .gpc-card) {
    container-name: report-media-card;
    container-type: inline-size;
    min-width: 0;
    max-width: 100%;
  }

  .widget[data-responsive-widget="true"] :is(.meta-feed-card-head, .google-display-head, .meta-native-story-head, .meta-native-link-panel) {
    min-width: 0;
  }

  .widget[data-responsive-widget="true"] :is(.meta-feed-ad-name strong, .meta-feed-ad-name span, .meta-native-actor strong, .meta-native-link-copy strong, .meta-native-domain, .meta-native-description, .meta-native-price) {
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }

  .widget[data-responsive-widget="true"] .meta-native-link-panel {
    flex-wrap: wrap;
  }

  .widget[data-responsive-widget="true"] .meta-native-link-copy {
    flex-basis: 140px;
  }

  .widget[data-responsive-widget="true"] .meta-native-cta {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .widget[data-responsive-widget="true"] .meta-native-media {
    min-height: 0;
  }

  .widget[data-responsive-widget="true"] .meta-native-media:not(.carousel-media) :is(img, video) {
    max-height: clamp(180px, 135cqi, 650px);
  }

  .widget[data-responsive-widget="true"] :is(.meta-native-media.missing, .meta-feed-preview-missing) {
    min-height: clamp(140px, 70cqi, 280px);
    padding: 18px;
  }

  .widget[data-responsive-widget="true"] .meta-feed-metrics {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 105px), 1fr));
  }

  .widget[data-responsive-widget="true"] .meta-feed-metric :is(span, strong) {
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }

  .widget[data-responsive-widget="true"] .linkedin-native-preview {
    width: 100%;
    height: clamp(320px, 135cqi, 580px);
    flex-shrink: 0;
  }

  .widget[data-responsive-widget="true"].type-snapchat_ads_feed .snapchat-feed-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  }

  .widget[data-responsive-widget="true"].type-snapchat_ads_feed .snapchat-feed-card {
    max-width: 350px;
  }

  .widget[data-responsive-widget="true"].type-snapchat_ads_feed .snapchat-native-preview {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: 590px;
    aspect-ratio: 9 / 16;
  }

  .widget[data-responsive-widget="true"] .google-display-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    min-width: 0;
    gap: 14px;
    padding: var(--responsive-content-padding);
  }

  .widget[data-responsive-widget="true"] :is(.google-display-preview, .google-display-html5-frame) {
    min-width: 0;
    min-height: 0;
  }

  .widget[data-responsive-widget="true"] .google-display-preview > img {
    aspect-ratio: auto;
    height: auto;
    max-height: clamp(180px, 100cqi, 420px);
    object-fit: contain;
  }

  .widget[data-responsive-widget="true"] .google-display-html5-frame iframe {
    min-height: 160px;
    height: clamp(180px, 65cqi, 320px);
    flex: 0 0 auto;
  }

  .widget[data-responsive-widget="true"] .google-display-missing {
    min-height: 160px;
  }

  /* Product cards: the saved 2/3/4 column choice is an upper limit at narrow
     widths. List/card presentation, sort order and every metric stay intact. */
  .widget[data-responsive-widget="true"] .google-products-list {
    min-width: 0;
    padding: clamp(8px, 2cqi, 16px);
  }

  .widget[data-responsive-widget="true"] .google-product-row {
    grid-template-columns: 34px minmax(0, 1.1fr) minmax(0, 2fr);
    min-width: 0;
    gap: 10px;
  }

  .widget[data-responsive-widget="true"] .google-product-metrics {
    grid-column: auto;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 86px), 1fr));
    min-width: 0;
  }

  .widget[data-responsive-widget="true"] .gpc-grid {
    grid-template-columns: repeat(var(--gpc-columns, 4), minmax(0, 1fr));
  }

  .widget[data-responsive-widget="true"] .gpc-showcase {
    min-width: 0;
  }

  .widget[data-responsive-widget="true"] :is(.gpc-toolbar, .gpc-toolbar label, .gpc-primary-stats, .gpc-id-line) {
    min-width: 0;
    flex-wrap: wrap;
  }

  .widget[data-responsive-widget="true"] .gpc-toolbar select {
    min-width: 0;
    max-width: 100%;
  }

  .widget[data-responsive-widget="true"] :is(.gpc-overview-card > strong, .gpc-primary-stats strong, .gpc-mini-grid b) {
    font-size: var(--widget-value-size, clamp(15px, 6cqi, 23px));
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }

  .widget[data-responsive-widget="true"] :is(.gpc-campaign, .gpc-id, .gpc-brand, .gpc-winner) {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .widget[data-responsive-widget="true"] .gpc-product-title {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    font-size: var(--widget-body-size, 11px);
  }

  .widget[data-responsive-widget="true"] .gpc-image {
    min-height: 0;
  }

  /* ABM manager and performance retain their existing responsive company
     cards, filters, selections, rule editor and horizontal table scroll. */
  .widget[data-responsive-widget="true"]:is(.type-linkedin_abm, .type-linkedin_abm_performance, .type-pipedrive_pipeline) > .widget-body {
    overflow: hidden;
  }

  .widget[data-responsive-widget="true"] :is(.linkedin-abm-widget, .linkedin-abm-performance-widget, .pipedrive-board-shell) {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    overflow: auto;
    overscroll-behavior-y: auto;
  }

  .widget[data-responsive-widget="true"] .linkedin-abm-widget > * {
    flex-shrink: 0;
  }

  .widget[data-responsive-widget="true"] .abm-header-copy strong {
    font-size: var(--widget-title-size, clamp(16px, 2.6cqi, 21px));
    overflow-wrap: anywhere;
  }

  .widget[data-responsive-widget="true"] .abm-stat strong,
  .widget[data-responsive-widget="true"] .abmp-stat strong {
    font-size: var(--widget-value-size, clamp(23px, 4.5cqi, 34px));
    overflow-wrap: anywhere;
  }

  .widget[data-responsive-widget="true"] :is(.abm-header, .abm-header-actions, .abm-filter-head, .abm-filter-head-actions, .abm-rule-preview-box) {
    min-width: 0;
    flex-wrap: wrap;
  }

  .widget[data-responsive-widget="true"] :is(.abm-button, .abm-link-button, .abmp-button, .abm-stat-share, .abmp-chart-heading > span) {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .widget[data-responsive-widget="true"] :is(.abm-list-picker, .abm-selection-info, .abm-rule-group-name > input, .abm-manager--advanced .abm-create-row > input, .abm-manager--advanced .abm-create-row > select) {
    min-width: 0;
    max-width: 100%;
  }

  .widget[data-responsive-widget="true"] .abm-campaign-menu {
    width: min(335px, calc(var(--responsive-body-width, 360px) - 48px));
    min-width: 0;
    max-width: 100%;
  }

  .widget[data-responsive-widget="true"] .abmp-campaigns > div {
    width: min(300px, calc(var(--responsive-body-width, 360px) - 48px));
    max-width: 100%;
  }

  .widget[data-responsive-widget="true"] :is(.abmp-chart-row > span, .abmp-chart-row > strong, .abmp-legend > span, .abm-rule-preview-box small) {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* The pipeline is deliberately a horizontally scrollable board, never
     a clipped row or a reordered list of stages. */
  .widget[data-responsive-widget="true"] .pipedrive-board-lane {
    min-width: min(210px, 82cqi);
    flex-basis: min(255px, 82cqi);
  }

  .widget[data-responsive-widget="true"] .pipedrive-board-shell.classic-variant .pipedrive-board-lane {
    flex-basis: min(292px, 82cqi);
  }

  .widget[data-responsive-widget="true"] :is(.pipedrive-board-group-head, .pipedrive-board-lane-side, .pipedrive-board-lane-summary, .pipedrive-board-card-footer) {
    min-width: 0;
    flex-wrap: wrap;
  }

  .widget[data-responsive-widget="true"] :is(.pipedrive-board-group-head small, .pipedrive-board-lane-probability, .pipedrive-board-lane-total, .pipedrive-board-card-amount, .pipedrive-board-lane-summary strong) {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Text, image, consultant and sandboxed HTML are content, not grid policy. */
  .widget[data-responsive-widget="true"] .text-note {
    min-width: 0;
    max-width: 100%;
    flex-shrink: 0;
    overflow: visible;
    /* Dedicated text-widget font size must win over generic widget typography. */
    font-size: var(--note-font, 14px);
  }

  .widget[data-responsive-widget="true"] .text-note-body :is(h1, h2, h3, h4, a, p, div, blockquote) {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .widget[data-responsive-widget="true"] .image-widget {
    flex: 1 0 140px;
    min-width: 0;
    min-height: 140px;
    height: auto;
    overflow: visible;
  }

  .widget[data-responsive-widget="true"] .image-widget-media {
    min-width: 0;
    min-height: 80px;
  }

  .widget[data-responsive-widget="true"] .image-widget figcaption {
    flex-shrink: 0;
    font-size: var(--widget-body-size, 10px);
    overflow-wrap: anywhere;
  }

  .widget[data-responsive-widget="true"] .consultant-spotlight {
    flex: 1 0 auto;
  }

  .widget[data-responsive-widget="true"] :is(.consultant-spotlight-title, .consultant-spotlight-description, .consultant-spotlight-payoff-key strong, .consultant-spotlight-payoff-key span, .consultant-spotlight-payoff-text, .consultant-spotlight-button) {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .widget[data-responsive-widget="true"].typo-title .consultant-spotlight-title {
    font-size: var(--widget-title-size);
  }

  .widget[data-responsive-widget="true"].typo-value .consultant-spotlight-payoff-key strong {
    font-size: var(--widget-value-size);
  }

  .widget[data-responsive-widget="true"].typo-body :is(.consultant-spotlight-description, .consultant-spotlight-payoff-text) {
    font-size: var(--widget-body-size);
  }

  .widget[data-responsive-widget="true"] .isolated-html-widget {
    flex: 1 0 180px;
    min-width: 0;
    width: 100%;
    height: auto;
    min-height: 180px;
  }

  .widget[data-responsive-widget="true"]:is(.type-spacer, .type-grid_spacer) > .widget-body {
    min-height: 0;
    flex: 1 1 0;
    overflow: hidden;
  }

  /* Opt-in measured numeric fit from report-responsive-text.js. The controller
     removes this marker before reading the author's requested font size, then
     only reduces it when the complete number/currency string cannot fit.
     The narrow !important overrides legacy .typo-value rules for fitted values
     alone; configured variables and every other typography setting stay intact. */
  .widget[data-responsive-widget="true"] > .widget-body [data-responsive-value-fit="true"] {
    font-size: var(--responsive-value-size) !important;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }

  @container report-widget (max-width: 1050px) {
    .widget[data-responsive-widget="true"] .gpc-grid:not([data-gpc-columns="2"]) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @container report-widget (max-width: 760px) {
    .widget[data-responsive-widget="true"] .gpc-grid,
    .widget[data-responsive-widget="true"] .gpc-grid[data-gpc-columns] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .widget[data-responsive-widget="true"] .gpc-overview {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .widget[data-responsive-widget="true"] .google-product-row {
      grid-template-columns: 30px minmax(0, 1fr);
    }

    .widget[data-responsive-widget="true"] .google-product-metrics {
      grid-column: 1 / -1;
    }
  }

  @container report-widget (max-width: 660px) {
    .widget[data-responsive-widget="true"] :is(.what-if-simulator, .growth-drivers, .geo-distribution) {
      grid-template-columns: minmax(0, 1fr);
    }

    .widget[data-responsive-widget="true"] .top-product-row,
    .widget[data-responsive-widget="true"] .linkedin-demographic-row {
      grid-template-columns: 26px minmax(0, 1fr);
    }

    .widget[data-responsive-widget="true"] .top-product-visual,
    .widget[data-responsive-widget="true"] .linkedin-demographic-values {
      grid-column: 2;
    }

    .widget[data-responsive-widget="true"] .meta-feed-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .widget[data-responsive-widget="true"] .abm-campaign-details[open] .abm-campaign-menu,
    .widget[data-responsive-widget="true"] .abmp-campaigns[open] > div {
      position: static;
      width: 100%;
      max-width: 100%;
      margin-top: 6px;
    }
  }

  @container report-widget (max-width: 520px) {
    .widget[data-responsive-widget="true"] .formula-result-row,
    .widget[data-responsive-widget="true"] .donut-summary {
      grid-template-columns: minmax(0, 1fr);
    }

    .widget[data-responsive-widget="true"] .donut-view,
    .widget[data-responsive-widget="true"] .donut-modern.legend-right {
      flex-direction: column;
      gap: 12px;
    }

    .widget[data-responsive-widget="true"] .donut-view > svg {
      width: min(100%, 220px);
      flex-basis: auto;
    }

    .widget[data-responsive-widget="true"] .donut-summary-chart svg {
      width: min(100%, 220px);
    }

    .widget[data-responsive-widget="true"] .donut-modern.legend-right .donut-modern-plot {
      width: 100%;
      flex: 0 0 auto;
    }

    .widget[data-responsive-widget="true"] .donut-modern.legend-right .donut-modern-legend {
      width: 100%;
      flex: 0 0 auto;
      max-height: 200px;
    }

    .widget[data-responsive-widget="true"] .gpc-grid,
    .widget[data-responsive-widget="true"] .gpc-grid[data-gpc-columns] {
      grid-template-columns: minmax(0, 1fr);
    }

    .widget[data-responsive-widget="true"] .single-period-row {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .widget[data-responsive-widget="true"] .single-period-track {
      grid-column: 1 / -1;
      grid-row: 2;
    }

    .widget[data-responsive-widget="true"] .growth-driver-row {
      grid-template-columns: minmax(0, 1fr) minmax(0, .6fr);
      gap: 6px 10px;
    }

    .widget[data-responsive-widget="true"] .growth-driver-row > strong {
      grid-column: 2;
      grid-row: 1;
      text-align: right;
    }

    .widget[data-responsive-widget="true"] .growth-driver-track {
      grid-column: 1 / -1;
      grid-row: 2;
    }

    .widget[data-responsive-widget="true"] .klaviyo-list-summary {
      grid-template-columns: minmax(0, 1fr);
    }

    .widget[data-responsive-widget="true"] .metric-funnel-shape-row {
      grid-template-columns: minmax(0, .5fr) minmax(0, 1fr);
    }

    .widget[data-responsive-widget="true"] .abmp-chart-row {
      grid-template-columns: minmax(0, 1fr) minmax(0, .7fr);
      gap: 6px 10px;
    }

    .widget[data-responsive-widget="true"] .abmp-chart-row > span {
      grid-column: 1;
      grid-row: 1;
    }

    .widget[data-responsive-widget="true"] .abmp-chart-row > strong {
      grid-column: 2;
      grid-row: 1;
    }

    .widget[data-responsive-widget="true"] .abmp-chart-row > .abmp-chart-track {
      grid-column: 1 / -1;
      grid-row: 2;
    }
  }

  @container report-widget (max-width: 360px) {
    .widget[data-responsive-widget="true"] .goal-value {
      grid-area: auto;
      max-width: 100%;
      margin-top: -5px;
    }

    .widget[data-responsive-widget="true"] .geo-legend > div,
    .widget[data-responsive-widget="true"] .donut-summary-legend > div {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .widget[data-responsive-widget="true"] .geo-legend > div > span,
    .widget[data-responsive-widget="true"] .donut-summary-legend > div > span {
      grid-column: 1 / -1;
    }

    .widget[data-responsive-widget="true"] .geo-legend strong {
      text-align: left;
    }

    .widget[data-responsive-widget="true"] .gpc-overview,
    .widget[data-responsive-widget="true"] .top-products-summary,
    .widget[data-responsive-widget="true"] .abm-summary,
    .widget[data-responsive-widget="true"] .abmp-stats {
      grid-template-columns: minmax(0, 1fr);
    }

    .widget[data-responsive-widget="true"] .top-products-summary > div + div {
      border-left: 0;
      border-top: 1px solid var(--border, #e5e7eb);
    }

    .widget[data-responsive-widget="true"] .abm-toolbar {
      grid-template-columns: minmax(0, 1fr);
    }

    .widget[data-responsive-widget="true"] .abm-toolbar > * {
      grid-column: 1 / -1;
    }

    .widget[data-responsive-widget="true"] .gpc-mini-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .widget[data-responsive-widget="true"] .linkedin-demographic-values {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 90px), 1fr));
    }
  }

  /* Keep the existing deliberate mobile table scrolling interaction. This
     is a viewport/touch affordance; table density still follows widget width. */
  @media (max-width: 760px) {
    .widget[data-responsive-widget="true"] .table-wrap {
      overflow-x: hidden;
      overflow-y: hidden;
      touch-action: pan-y;
      overscroll-behavior: auto;
    }

    .widget[data-responsive-widget="true"].mobile-table-scroll-active .table-wrap {
      overflow-x: auto;
      overflow-y: auto;
      touch-action: pan-x pan-y;
      overscroll-behavior: contain;
    }

    .widget[data-responsive-widget="true"] .mobile-table-scroll-toggle {
      flex-shrink: 0;
      max-width: 100%;
      white-space: normal;
      overflow-wrap: anywhere;
    }
  }
}

/* Executive summary: content height is owned by the read-view grid projection.
   Only the interactive screen report is affected; authoring and PDF keep the
   precise manually selected rows. With height:auto the measurement can grow
   and shrink when decision cards wrap or the source card becomes narrower. */
@media screen {
  [data-report-layout="read"] .widget:is(
    .type-ga4_channel_card,.type-google_ads_channel_card,.type-meta_ads_channel_card,
    .type-linkedin_ads_channel_card,.type-strategic_decisions,.type-consultant_contact_card
  )[data-responsive-auto-height="true"] {
    overflow: visible;
  }
  [data-report-layout="read"] .widget:is(
    .type-ga4_channel_card,.type-google_ads_channel_card,.type-meta_ads_channel_card,
    .type-linkedin_ads_channel_card,.type-strategic_decisions,.type-consultant_contact_card
  )[data-responsive-auto-height="true"] > .widget-body {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible !important;
  }
  [data-report-layout="read"] .widget[data-responsive-auto-height="true"]
    :is(.exw-channel,.exw-strategic,.exw-consultant){
    height:auto;min-height:0;
  }
  [data-report-layout="read"] .widget[data-responsive-auto-height="true"]
    .exw-channel-body {flex:0 0 auto;min-height:0;}
}