/* CSS domain: responsive overrides */
    @media (max-width: 1100px) {
      /* Responsive domain: shared insight layout */
      .insights-row-3 {
        grid-template-columns: 1fr;
      }

      .insights-row-2 {
        grid-template-columns: 1fr;
      }

      .weather-top {
        grid-template-columns: 1fr;
      }

      /* Responsive domain: energy */
      .energy-hero-grid {
        grid-template-columns: 1fr;
      }

      .energy-stat-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .energy-price-meta-row.is-optional {
        display: none;
      }

      .energy-phase-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .energy-context-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .energy-quarter-summary {
        white-space: normal;
      }

      /* Responsive domain: controls */
      .controls-grid-4 {
        grid-template-columns: repeat(3, 1fr);
      }

      /* Responsive domain: climate */
      .climate-controls-grid {
        grid-template-columns: 1fr 1fr;
      }

      .climate-room-grid {
        grid-template-columns: 1fr 1fr;
      }

      .climate-detail-grid {
        grid-template-columns: 1fr;
      }

      .climate-lock-message {
        grid-column: 1 / -1;
      }
    }

    @media (orientation: portrait) {
      /* Responsive domain: base layout */
      .placeholder-page {
        grid-template-rows: 1fr auto;
        height: 100vh;
      }

      /* Responsive domain: shared insight layout */
      .insights-layout {
        grid-template-rows: auto auto 1fr;
        align-content: start;
      }

      .insights-row-3 {
        grid-template-columns: repeat(3, 1fr);
      }

      .insights-row-2 {
        grid-template-columns: 1fr 1fr;
      }

      .insight-card {
        min-height: var(--dashboard-insight-card-compact-min-height);
        padding: var(--dashboard-insight-card-compact-padding);
      }

      .insight-label {
        font-size: var(--dashboard-insight-label-compact-size);
      }

      .insight-value {
        font-size: var(--dashboard-insight-value-compact-size);
      }

      .insight-subvalue {
        font-size: var(--dashboard-insight-subvalue-compact-size);
      }

      .phase-list {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--dashboard-insight-phase-list-gap);
      }

      .phase-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--dashboard-insight-phase-item-gap);
      }

      /* Responsive domain: weather */
      .weather-top {
        grid-template-columns: 1fr;
        gap: var(--dashboard-weather-portrait-top-gap);
      }

      .weather-condition {
        font-size: var(--dashboard-weather-condition-portrait-size);
      }

      .weather-stats {
        grid-template-columns: 1fr 1fr;
        gap: var(--dashboard-weather-stats-portrait-gap);
      }

      .weather-chart-panel {
        padding: var(--dashboard-insight-report-compact-padding);
      }

      .weather-chart-svg {
        height: 100%;
        min-height: var(--dashboard-weather-chart-compact-min-height);
      }

      .weather-page-layout {
        gap: var(--dashboard-weather-page-portrait-gap);
        grid-template-rows: var(--dashboard-weather-page-portrait-rows);
      }

      .weather-local-card {
        gap: var(--dashboard-weather-local-card-portrait-gap);
      }

      .weather-local-content {
        grid-template-columns: var(--dashboard-weather-local-content-portrait-columns);
        gap: var(--dashboard-weather-local-content-portrait-gap);
      }

      .weather-local-value {
        font-size: var(--dashboard-weather-local-value-portrait-size);
      }

      .weather-summary-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--dashboard-weather-summary-grid-portrait-gap);
      }

      .weather-forecast-extreme-value {
        font-size: var(--dashboard-weather-forecast-extreme-portrait-size);
      }

      .weather-chart-card {
        padding: var(--dashboard-weather-chart-card-portrait-padding);
      }

      .weather-chart-svg {
        min-height: var(--dashboard-weather-chart-wide-min-height);
      }

      /* Responsive domain: energy */
      .energy-layout {
        gap: var(--dashboard-energy-portrait-gap);
      }

      .energy-hero-grid {
        grid-template-columns: var(--dashboard-energy-hero-portrait-columns);
      }

      .energy-panel,
      .energy-stat-card,
      .energy-phase-item,
      .energy-context-item {
        padding: var(--dashboard-energy-panel-portrait-padding);
      }

      .energy-quarter-card {
        padding-bottom: var(--dashboard-energy-quarter-portrait-padding-bottom);
      }

      .energy-phase-item {
        padding: var(--dashboard-energy-phase-item-portrait-padding);
      }

      .energy-quarter-strip {
        height: var(--dashboard-energy-quarter-strip-portrait-height);
        margin-bottom: var(--dashboard-energy-quarter-strip-portrait-margin);
      }

      /* Responsive domain: overlays */
      .insight-embed-frame {
        width: var(--dashboard-overlay-embed-portrait-width);
        height: var(--dashboard-overlay-embed-portrait-height);
        transform: scale(var(--dashboard-overlay-embed-portrait-scale));
      }

      .insight-embed-viewport-secondary {
        margin-top: var(--dashboard-overlay-secondary-portrait-offset);
      }

      /* Responsive domain: climate */
      .climate-controls-grid {
        grid-template-columns: var(--dashboard-climate-controls-portrait-columns);
      }

      .climate-room-grid {
        grid-template-columns: var(--dashboard-climate-room-portrait-columns);
      }

      .climate-detail-grid {
        grid-template-columns: var(--dashboard-climate-detail-portrait-columns);
      }

      /* Responsive domain: navigation */
      .tabbar {
        left: var(--dashboard-tabbar-portrait-inset);
        right: var(--dashboard-tabbar-portrait-inset);
        bottom: var(--dashboard-tabbar-portrait-inset);
        padding: var(--dashboard-tabbar-portrait-padding);
      }

      .tabbar-button {
        min-height: var(--dashboard-tabbar-button-portrait-height);
      }

      .tabbar-button.is-home {
        min-height: var(--dashboard-tabbar-home-button-portrait-height);
      }
    }