/* Canonical responsive behavior. Breakpoints: compact <640, medium 640–1023, wide >=1024. */
html { overflow-wrap: break-word; overflow-x: clip; }
body { max-inline-size: 100%; overflow-x: clip; }
img, svg, video, canvas { max-inline-size: 100%; }

.ts-scroll-region {
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.ts-dialog-panel { max-block-size: min(88dvh, 56rem); overflow: auto; }
.ts-form-actions { display: flex; flex-wrap: wrap; gap: var(--ts-space-3); }
.ts-chart-selection { color: var(--ts-color-text-secondary); font-size: var(--ts-font-body-small); min-block-size: 1.5rem; }

@media (max-width: 639px) {
  .container-app { padding-inline: var(--ts-space-3); }
  .section { padding-block: var(--ts-space-12); }
  .section-tight { padding-block: var(--ts-space-8); }

  .ts-dialog-panel {
    inline-size: 100%;
    max-inline-size: none;
    max-block-size: 100dvh;
    min-block-size: min(100dvh, 42rem);
    margin: 0;
    border-radius: 0;
    padding-block-end: max(var(--ts-space-6), env(safe-area-inset-bottom));
  }

  .ts-form-actions > * { flex: 1 1 10rem; }

  /* Tables explicitly marked as stackable preserve headers through data-label. */
  table.ts-table-stack thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.ts-table-stack,
  table.ts-table-stack tbody,
  table.ts-table-stack tr,
  table.ts-table-stack td { display: block; inline-size: 100%; }
  table.ts-table-stack tr { border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-md); margin-block-end: var(--ts-space-3); padding: var(--ts-space-2); }
  table.ts-table-stack td { display: grid; grid-template-columns: minmax(7rem, 42%) 1fr; gap: var(--ts-space-3); border: 0; padding: var(--ts-space-2); text-align: end; }
  table.ts-table-stack td::before { content: attr(data-label); color: var(--ts-color-text-muted); font-size: var(--ts-font-caption); font-weight: 600; text-align: start; }
  table.ts-table-stack td[colspan] { display: block; text-align: center; }
  table.ts-table-stack td[colspan]::before { content: none; }

  body.dashboard-layout main { padding-inline: var(--ts-space-3) !important; }
  body.dashboard-layout .panel { padding: var(--ts-space-4); }
  body.dashboard-layout .history-row > .flex { flex-wrap: wrap; }
  body.dashboard-layout .report-section-wrap { scroll-margin-block-start: 5rem; }
  body.dashboard-layout .settings-modal-panel { flex-direction: column; border-radius: 0 !important; max-block-size: 100dvh !important; min-block-size: 100dvh; }
  body.dashboard-layout .settings-modal-nav { inline-size: 100% !important; flex-direction: row !important; overflow-x: auto; padding: var(--ts-space-12) var(--ts-space-3) var(--ts-space-2) !important; }
  body.dashboard-layout .settings-modal-nav > div { display: none; }
  body.dashboard-layout .settings-modal-nav .stab { flex: 0 0 auto; }
  body.dashboard-layout .settings-modal-content { padding: var(--ts-space-5) var(--ts-space-4) !important; }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .container-app { padding-inline: var(--ts-space-6); }
  .ts-dialog-panel { inline-size: min(92vw, 46rem); }
}

@media (orientation: landscape) and (max-height: 560px) {
  .ts-dialog-panel { max-block-size: 100dvh; }
}