/* Public full dashboard: retain the original UI, with phone-sized controls and local table scrolling. */
@media (max-width: 1100px) {
  html, body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: visible;
  }

  .mobile-nav-toggle {
    top: calc(12px + env(safe-area-inset-top, 0px));
    left: max(12px, env(safe-area-inset-left, 0px));
    min-width: 56px;
    min-height: 44px;
    touch-action: manipulation;
  }

  .sidebar,
  .sidebar:has(.twinkle-clock-widget) {
    height: 100dvh;
    max-height: 100dvh;
    padding-top: max(20px, env(safe-area-inset-top, 0px));
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    overscroll-behavior: contain;
  }

  .product-nav button,
  .nav-group summary,
  .toolbar :is(a, button, select),
  .comparison-controls :is(input, button, select),
  .ranking-trend-controls :is(input, button),
  .global-search-close {
    min-height: 44px;
    touch-action: manipulation;
  }

  .product-nav button { height: auto; padding-block: 8px; }
  .power-trend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .dashboard {
    padding-top: calc(72px + env(safe-area-inset-top, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
    padding-left: max(14px, env(safe-area-inset-left, 0px));
  }

  .dashboard :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select),
  .global-search-shell input {
    min-width: 0;
    max-width: 100%;
    font-size: 16px;
  }

  :is(.table-wrap, .order-detail-table-wrap, .ranking-detail-table-wrap, .customer-table-wrap, .api-table-wrap, .api-analysis-table, .ops-table-wrap, .seg-table-wrap, .seg-api-table-wrap, .business-table-wrap, .report-table-wrap, .power-detail-table-wrap, .four-cloud-yoy-table-wrap, .operations-table-wrap) {
    min-width: 0;
    max-width: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  dialog {
    max-width: calc(100% - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
  }
}

@media (max-width: 680px) {
  .topbar { align-items: stretch; flex-direction: column; }
  .toolbar { gap: 8px; }
  .toolbar > * { flex: 1 0 auto; }

  .kpi-grid,
  .period-grid,
  .rank-grid,
  .summary-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .kpi { min-width: 0; padding: 14px 12px; }
  .kpi strong { font-size: clamp(21px, 5.6vw, 28px); overflow-wrap: anywhere; }
  .kpi :is(span, em) { overflow-wrap: anywhere; }

  .market-detail-grid,
  .ranking-trend-grid,
  .power-trend-grid,
  .power-detail-grid,
  .metric-charts {
    grid-template-columns: minmax(0, 1fr);
  }

  .seg-count-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .seg-count-grid button { min-width: 0; padding: 12px 8px; }
  .seg-count-grid span { font-size: 12px; overflow-wrap: anywhere; }

  .panel-header,
  .ranking-trend-controls { flex-wrap: wrap; gap: 10px; }
  .panel-header > *,
  .ranking-trend-controls > * { min-width: 0; max-width: 100%; }
  .ranking-trend-controls label { flex: 1 1 130px; }
  .ranking-trend-controls input { width: 100%; }
  .comparison-controls label,
  .comparison-controls input { min-width: 0; width: 100%; }

  .global-search-dialog { width: calc(100% - 24px); }
  .global-search-shell { padding: 16px; }
  .global-search-shell > header > div { min-width: 0; }
  .global-search-close { flex: none; }
}