/* Umbrella edition · responsive layout: tablet (≤ 900 px), phone (≤ 600 px). */
@media (max-width: 900px) {
  [data-skin='studio'] .topbar {
    gap: 10px;
    padding: 0 10px;
  }
  [data-skin='studio'] .brand span {
    display: none; /* the logo is enough */
  }
  [data-skin='studio'] #tabs {
    flex: 1;
    min-width: 0;
    scrollbar-width: none;
  }
  [data-skin='studio'] #topStatus .chip.source {
    display: none;
  }
  [data-skin='studio'] .view {
    padding: var(--sp-2) var(--sp-3) var(--sp-4);
  }
  [data-skin='studio'] .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  [data-skin='studio'] .kit-kpis > .is-focus {
    transform: none; /* no overlap with the neighbour tile on narrow rows */
  }
}
@media (max-width: 600px) {
  [data-skin='studio'] .topbar {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--topbar-h);
    padding: 6px 10px 0;
  }
  [data-skin='studio'] #tabs {
    order: 3;
    flex-basis: 100%;
    height: 44px;
    justify-content: space-evenly; /* equal gaps, including at the edges, when the tabs fit */
    padding: 0 4px;
  }
  [data-skin='studio'] #topStatus .chip:not(.running, button) {
    display: none;
  }
  [data-skin='studio'] .plant {
    top: var(--topbar-live, 96px); /* the measured bar height; 96 px = one-row bar + tab row */
  }
  [data-skin='studio'] .kpis {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-skin='studio'] .view {
    padding: var(--sp-2) 16px var(--sp-4);
  }
  [data-skin='studio'] .view .grid {
    display: block;
    overflow-x: auto;
  }
  [data-skin='studio'] .view .grid :is(td, th) {
    white-space: nowrap; /* the table scrolls inside its card instead of breaking words */
  }
  [data-skin='studio'] .kit-pager button:not([aria-current], :first-of-type, :last-of-type) {
    display: none; /* phone: ‹ current › */
  }
}