/*
 * Responsive safety below the Figma width (Plan 5, Task 4). Every rule sits inside the media
 * query, so the 1440 px layout is untouched. Logical properties only; no letter-spacing.
 */
@media (max-width: 1439px) {
  /* Tables scroll inside their own card instead of widening the page. */
  .dash-table {
    overflow-x: auto;
  }

  /* The frame stroke is an outline so it stays put while the rows scroll under it. */
  .dash-table::after {
    display: none;
  }

  .dash-table {
    outline: 2px solid rgba(47, 43, 61, 0.08);
    outline-offset: -2px;
  }

  .dash-table__head,
  .dash-row {
    min-inline-size: 960px;
  }

  /* The report body gives up its fixed 875 px column. */
  .rp-doc {
    margin-inline: clamp(16px, 3vw, 40px);
  }

  .rp-main {
    flex: 1 1 0;
    max-inline-size: 100%;
  }

  .rp-cells:not(.rp-cells--stack) {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }

  /* The footer wordmark is wider than the screen: crop it, do not scroll. */
  .hm-wordmark {
    overflow: hidden;
  }

  /* The dashboard's KPI row wraps instead of keeping its fixed 658 px card. */
  .dash-kpis {
    flex-wrap: wrap;
    block-size: auto;
  }

  .dash-total {
    flex: 1 1 480px;
    inline-size: auto;
    min-block-size: 290px;
  }

  .dash-sectors {
    flex-basis: 280px;
    min-block-size: 290px;
  }

  /* Fluid page gutters. */
  .cl-nav {
    padding-inline: clamp(16px, 3vw, 40px);
  }

}

/* adminportal.css stacks the admin layout at <= 900 px: stay out of its way. */
@media (min-width: 901px) and (max-width: 1439px) {
  .ad-layout {
    padding-inline: clamp(16px, 3vw, 40px);
  }
}

/* The admin sidebar shrinks to icons. */
@media (min-width: 901px) and (max-width: 1024px) {
  .ad-layout {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .ad-nav__item {
    justify-content: center;
    padding-inline: 8px;
  }

  .ad-nav__item span {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}