@crvouga/atlas 0.10.2 → 0.12.0

package/packages/visualizer/src/explorer/explorer.module.css

@@ -1,1238 +0,0 @@
-/* The test explorer: list on the left, the open test beside it. White, hairlines, one blue; outcome colors only for outcomes. */
-
-.explorer {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  height: 100%;
-  min-height: 0;
-  background: var(--bg);
-}
-
-.explorer[data-split] {
-  grid-template-columns: minmax(0, 1fr) minmax(24rem, 40rem);
-}
-
-.main,
-.side {
-  min-height: 0;
-  overflow: auto;
-}
-
-.main {
-  padding: 28px 40px 80px;
-}
-
-.main > * {
-  max-width: 72rem;
-}
-
-.side {
-  border-left: 1px solid var(--line);
-  padding: 16px 24px 80px;
-}
-
-.head {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 8px 24px;
-  margin-bottom: 18px;
-  border-bottom: 1px solid var(--line);
-}
-
-.title {
-  margin: 0 0 12px;
-  font-size: 1.375rem;
-  font-weight: 650;
-  letter-spacing: -0.01em;
-  line-height: 1.25;
-}
-
-.tabs {
-  display: flex;
-  gap: 20px;
-}
-
-.tabs a {
-  padding: 0 0 10px;
-  border-bottom: 2px solid transparent;
-  color: var(--ink-3);
-  font-size: 0.9375rem;
-  text-decoration: none;
-}
-
-.tabs a[aria-selected='true'] {
-  border-bottom-color: var(--place);
-  color: var(--ink);
-  font-weight: 600;
-}
-
-.tabs a span {
-  color: var(--ink-3);
-  font-size: 0.8125rem;
-  font-weight: 400;
-  font-variant-numeric: tabular-nums;
-}
-
-.label {
-  margin: 0 0 6px;
-  color: var(--ink-3);
-  font-size: 0.75rem;
-  font-weight: 600;
-}
-
-.quiet {
-  margin: 12px 0;
-  color: var(--ink-3);
-  font-size: 0.875rem;
-}
-
-.notice {
-  margin: 12px 0;
-  padding: 10px 12px;
-  border-radius: 8px;
-  background: var(--bg-2);
-  color: var(--ink-2);
-  font-size: 0.875rem;
-}
-
-.link {
-  padding: 0;
-  border: 0;
-  background: none;
-  color: var(--place);
-  font-size: 0.8125rem;
-  font-weight: 500;
-  cursor: pointer;
-}
-
-.link:hover {
-  text-decoration: underline;
-}
-
-.kinds {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 4px 16px;
-  margin-bottom: 18px;
-}
-
-.kinds .label {
-  margin: 0;
-}
-
-.kinds ul {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 16px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.kinds a {
-  color: var(--place);
-  font-size: 0.875rem;
-  text-decoration: none;
-}
-
-.kinds a span {
-  color: var(--ink-3);
-}
-
-/* Insight strip */
-
-.insights {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
-  gap: 10px;
-  margin-bottom: 18px;
-}
-
-.tile {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  min-width: 0;
-  padding: 12px 14px;
-  border: 1px solid var(--line-2);
-  border-radius: 12px;
-  background: var(--bg);
-  color: var(--ink);
-  font: inherit;
-  text-align: left;
-  text-decoration: none;
-}
-
-.tile[data-wide] {
-  grid-column: span 2;
-}
-
-button.tile,
-a.tile {
-  cursor: pointer;
-}
-
-button.tile:hover,
-a.tile:hover {
-  border-color: var(--faint);
-}
-
-.tile[aria-pressed='true'] {
-  border-color: var(--place);
-  background: var(--place-soft);
-}
-
-.tileLabel {
-  color: var(--ink-3);
-  font-size: 0.75rem;
-  font-weight: 600;
-}
-
-.tileValue {
-  font-size: 1.5rem;
-  font-weight: 650;
-  line-height: 1.2;
-}
-
-.tileValue[data-warn] {
-  color: var(--flaky-ink);
-}
-
-.tileValue[data-none] {
-  color: var(--faint);
-}
-
-.tileNote {
-  color: var(--ink-3);
-  font-size: 0.75rem;
-  line-height: 1.35;
-}
-
-.tileCounts {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 2px 10px;
-  margin-top: 2px;
-}
-
-.tileCounts button,
-.envList button {
-  padding: 0;
-  border: 0;
-  border-radius: 4px;
-  background: none;
-  color: var(--ink-3);
-  font-size: 0.8125rem;
-  font-variant-numeric: tabular-nums;
-  cursor: pointer;
-}
-
-.tileCounts button:hover,
-.envList button:hover {
-  color: var(--ink);
-  text-decoration: underline;
-}
-
-.tileCounts button[data-status='failed'] {
-  color: var(--failed);
-  font-weight: 600;
-}
-
-.tileCounts button[data-status='failed']:disabled {
-  color: var(--ink-3);
-  font-weight: 400;
-  cursor: default;
-  text-decoration: none;
-}
-
-.tileCounts button[data-status='running'] {
-  color: var(--place);
-}
-
-.tileCounts button[aria-pressed='true'],
-.envList button[aria-pressed='true'] {
-  background: var(--place-soft);
-  box-shadow: 0 0 0 3px var(--place-soft);
-  color: var(--place);
-}
-
-.envList {
-  display: grid;
-  gap: 4px;
-  margin: 2px 0 0;
-  padding: 0;
-  list-style: none;
-}
-
-.envList button {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 0 8px;
-  width: 100%;
-  text-align: left;
-}
-
-.envList button > span + span::before {
-  margin-right: 8px;
-  color: var(--faint);
-  content: '·';
-}
-
-.envName {
-  color: var(--ink);
-  font-weight: 600;
-}
-
-.envList [data-status='failed'] {
-  color: var(--failed);
-  font-weight: 600;
-}
-
-.more {
-  grid-column: 1 / -1;
-  font-size: 0.8125rem;
-}
-
-.more summary {
-  color: var(--ink-3);
-  font-weight: 500;
-  cursor: pointer;
-}
-
-.moreLists {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
-  gap: 12px 24px;
-  margin-top: 10px;
-}
-
-.moreLists ol {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.moreLists a {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 3px 0;
-  color: var(--ink);
-  text-decoration: none;
-}
-
-.moreLists a:hover .insightName {
-  color: var(--place);
-}
-
-.insightName {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.insightValue {
-  flex: none;
-  color: var(--ink-3);
-  font-variant-numeric: tabular-nums;
-}
-
-/* Toolbar */
-
-.toolbar {
-  display: grid;
-  gap: 10px;
-  margin-bottom: 8px;
-}
-
-.searchRow,
-.filterRow {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px 12px;
-}
-
-.searchBox {
-  flex: 1 1 18rem;
-  min-width: 0;
-  height: 2.25rem;
-  padding: 0 12px;
-  border: 1px solid var(--line-2);
-  border-radius: var(--pill);
-  background: var(--bg);
-  color: var(--ink);
-  font: inherit;
-  font-size: 0.9rem;
-}
-
-.searchBox:focus {
-  outline: 2px solid var(--place-soft);
-  border-color: var(--place);
-}
-
-.select {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--ink-3);
-  font-size: 0.8125rem;
-}
-
-.select select {
-  height: 2.125rem;
-  max-width: 16rem;
-  padding: 0 8px;
-  border: 1px solid var(--line-2);
-  border-radius: var(--pill);
-  background: var(--bg);
-  color: var(--ink);
-  font: inherit;
-  font-size: 0.8125rem;
-}
-
-.segments,
-.chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-
-.segments button,
-.chips button {
-  padding: 4px 10px;
-  border: 1px solid transparent;
-  border-radius: var(--pill);
-  background: none;
-  color: var(--ink-3);
-  font-size: 0.8125rem;
-  font-weight: 500;
-  white-space: nowrap;
-  cursor: pointer;
-}
-
-.chips button {
-  border-color: var(--line-2);
-}
-
-.segments button:hover,
-.chips button:hover {
-  background: var(--bg-2);
-}
-
-.segments button[aria-pressed='true'],
-.chips button[aria-pressed='true'] {
-  border-color: var(--place);
-  background: var(--place-soft);
-  color: var(--place);
-  font-weight: 600;
-}
-
-.segments button span,
-.chips button span {
-  font-weight: 400;
-  font-variant-numeric: tabular-nums;
-  opacity: 0.8;
-}
-
-.segments button[data-status='failed'] span {
-  color: var(--failed);
-  font-weight: 600;
-  opacity: 1;
-}
-
-.showing {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 6px 12px;
-  margin: 0;
-  color: var(--ink-3);
-  font-size: 0.8125rem;
-}
-
-.activeChip {
-  padding: 2px 10px;
-  border: 1px solid var(--place);
-  border-radius: var(--pill);
-  background: var(--place-soft);
-  color: var(--place);
-  font-size: 0.75rem;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-/* The grouped list */
-
-.list {
-  margin-top: 8px;
-}
-
-.listHead {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 6px 14px;
-  color: var(--ink-3);
-  font-size: 0.75rem;
-  font-weight: 600;
-}
-
-.listHead > span:first-child {
-  flex: 1;
-}
-
-.listTools {
-  display: flex;
-  gap: 12px;
-}
-
-.listTools .link {
-  font-size: 0.75rem;
-}
-
-.columns {
-  display: grid;
-  flex: none;
-  grid-template-columns: 4.5rem 3.25rem 3rem 4.25rem;
-  gap: 8px;
-  color: var(--ink-3);
-  font-size: 0.8125rem;
-  text-align: right;
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-}
-
-.columns[data-one] {
-  grid-template-columns: 5rem;
-}
-
-.listHead .columns {
-  font-size: 0.75rem;
-}
-
-.columns [data-low] {
-  color: var(--ink);
-  font-weight: 600;
-}
-
-.domainHeading {
-  margin: 18px 0 6px;
-  color: var(--ink-3);
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: none;
-}
-
-.groupWrap + .groupWrap .group {
-  margin-top: 6px;
-}
-
-.group {
-  border: 1px solid var(--line-2);
-  border-radius: 12px;
-  overflow: hidden;
-}
-
-.group + .group {
-  margin-top: 6px;
-}
-
-.groupHead {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  padding: 9px 14px;
-  border: 0;
-  background: var(--bg);
-  color: var(--ink);
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.groupHead[data-static] {
-  cursor: default;
-  background: var(--bg-2);
-}
-
-button.groupHead:hover {
-  background: var(--bg-2);
-}
-
-.group[data-open] > .groupHead {
-  border-bottom: 1px solid var(--line);
-}
-
-.groupName {
-  display: flex;
-  flex: 1;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 0 10px;
-  min-width: 0;
-  font-size: 0.9rem;
-  font-weight: 600;
-}
-
-.groupName code {
-  overflow: hidden;
-  color: var(--ink-3);
-  font-family: var(--mono);
-  font-size: 0.75rem;
-  font-weight: 400;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.groupMeter {
-  flex: none;
-  width: 5rem;
-}
-
-.groupTally {
-  display: flex;
-  flex: none;
-  gap: 10px;
-  color: var(--ink-3);
-  font-size: 0.75rem;
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-}
-
-.groupTally strong {
-  color: var(--failed);
-  font-weight: 600;
-}
-
-.chevron {
-  flex: none;
-  width: 7px;
-  height: 7px;
-  margin: 0 3px 2px 1px;
-  border-right: 1.5px solid var(--faint);
-  border-bottom: 1.5px solid var(--faint);
-  transform: rotate(-45deg);
-  transition: transform var(--fade) var(--ease);
-}
-
-.group[data-open] .chevron,
-.chevron[data-open] {
-  transform: rotate(45deg);
-}
-
-.rows {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.row + .row {
-  border-top: 1px solid var(--line);
-}
-
-.rowLink {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 14px;
-  color: var(--ink);
-  text-decoration: none;
-}
-
-.rowLink:hover {
-  background: var(--bg-2);
-}
-
-.rowLink[aria-current='true'] {
-  background: var(--place-soft);
-}
-
-.rowLink > svg {
-  align-self: flex-start;
-  margin-top: 2px;
-}
-
-.rowMain {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 3px;
-  min-width: 0;
-}
-
-.rowTitle {
-  font-size: 0.9rem;
-  font-weight: 500;
-  line-height: 1.3;
-}
-
-.row[data-status='not-run'] .rowTitle {
-  color: var(--ink-2);
-}
-
-.rowMeta {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 4px 10px;
-  color: var(--ink-3);
-  font-size: 0.75rem;
-}
-
-.rowError {
-  overflow: hidden;
-  color: var(--failed-ink);
-  font-family: var(--mono);
-  font-size: 0.75rem;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.moreRow {
-  padding: 8px 14px;
-  border-top: 1px solid var(--line);
-}
-
-.envChips {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 4px 10px;
-}
-
-.envChips > span {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  color: var(--ink-3);
-}
-
-.envChips > span[data-status='failed'] {
-  color: var(--failed-ink);
-  font-weight: 600;
-}
-
-.envChips > span[data-status='passed'] {
-  color: var(--passed-ink);
-}
-
-.badges {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-
-.badges > span {
-  padding: 0 6px;
-  border: 1px solid var(--line-2);
-  border-radius: var(--pill);
-  color: var(--ink-3);
-  font-size: 0.6875rem;
-  line-height: 1.5;
-}
-
-.badges > span[data-badge='flaky'] {
-  border-color: var(--flaky);
-  color: var(--flaky-ink);
-}
-
-.badges > span[data-badge='live'] {
-  border-color: var(--place);
-  color: var(--place);
-}
-
-/* Test detail */
-
-.detail {
-  display: grid;
-  gap: 18px;
-}
-
-.detailTop {
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: -18px;
-}
-
-.close {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  border-radius: var(--pill);
-  color: var(--ink-3);
-  font-size: 1.25rem;
-  text-decoration: none;
-}
-
-.close:hover {
-  background: var(--bg-2);
-  color: var(--ink);
-}
-
-.detailEmpty {
-  display: grid;
-  gap: 8px;
-  justify-items: start;
-}
-
-.detailHead {
-  display: grid;
-  gap: 6px;
-}
-
-.detailSpec {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0 8px;
-  margin: 0;
-  font-size: 0.8125rem;
-}
-
-.detailSpec a {
-  color: var(--place);
-  text-decoration: none;
-}
-
-.detailSpec a + a::before {
-  margin-right: 8px;
-  color: var(--faint);
-  content: '›';
-}
-
-.detailTitle {
-  margin: 0;
-  font-size: 1.125rem;
-  font-weight: 650;
-  line-height: 1.3;
-}
-
-.detailStatus {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 4px 10px;
-  margin: 0;
-  font-size: 0.875rem;
-}
-
-.detailStatus strong[data-status='failed'] {
-  color: var(--failed);
-}
-
-.detailStatus strong[data-status='passed'] {
-  color: var(--passed-ink);
-}
-
-.flaky {
-  color: var(--flaky-ink);
-  font-size: 0.8125rem;
-}
-
-.mono {
-  overflow-wrap: anywhere;
-  color: var(--ink-3);
-  font-family: var(--mono);
-  font-size: 0.75rem;
-}
-
-.detailBlock {
-  display: grid;
-  gap: 8px;
-  padding-top: 14px;
-  border-top: 1px solid var(--line);
-}
-
-.detailBlock > * {
-  margin: 0;
-}
-
-.tableScroll {
-  overflow-x: auto;
-}
-
-.table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.8125rem;
-}
-
-.table th,
-.table td {
-  padding: 6px 8px;
-  border-bottom: 1px solid var(--line);
-  text-align: left;
-  vertical-align: top;
-  white-space: nowrap;
-}
-
-.table th {
-  color: var(--ink-3);
-  font-size: 0.75rem;
-  font-weight: 600;
-}
-
-.table a {
-  color: var(--place);
-  text-decoration: none;
-}
-
-.table a:hover {
-  text-decoration: underline;
-}
-
-.table code {
-  font-size: 0.75rem;
-}
-
-.num {
-  text-align: right !important;
-  font-variant-numeric: tabular-nums;
-}
-
-.ellipsis {
-  max-width: 12rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.detailCell {
-  max-width: 18rem;
-  overflow: hidden;
-  color: var(--ink-3);
-  text-overflow: ellipsis;
-}
-
-.table tr[data-status='failed'] .detailCell {
-  color: var(--failed-ink);
-}
-
-.cellStatus {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-}
-
-.param {
-  color: var(--ink-3);
-}
-
-.stats {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
-  gap: 10px 14px;
-}
-
-.stats div {
-  min-width: 0;
-}
-
-.stats dt {
-  color: var(--ink-3);
-  font-size: 0.75rem;
-}
-
-.stats dd {
-  margin: 0;
-  font-size: 0.9375rem;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-}
-
-.stats dd span {
-  color: var(--ink-3);
-  font-size: 0.75rem;
-  font-weight: 400;
-}
-
-.trend {
-  display: grid;
-  gap: 8px;
-}
-
-.spark {
-  margin: 0;
-}
-
-.spark figcaption {
-  margin-bottom: 4px;
-  color: var(--ink-3);
-  font-size: 0.75rem;
-}
-
-.spark svg {
-  display: block;
-  width: 100%;
-  height: 56px;
-  overflow: visible;
-}
-
-.sparkBase {
-  stroke: var(--line-2);
-  stroke-width: 1;
-  vector-effect: non-scaling-stroke;
-}
-
-.sparkLine {
-  fill: none;
-  stroke: var(--ink-3);
-  stroke-width: 2;
-  stroke-linejoin: round;
-  stroke-linecap: round;
-  vector-effect: non-scaling-stroke;
-}
-
-.spark circle {
-  fill: var(--ink-3);
-  stroke: var(--bg);
-  stroke-width: 1;
-}
-
-.spark circle[data-status='failed'] {
-  fill: var(--failed);
-}
-
-.sparkHit {
-  fill: transparent;
-}
-
-.sparkHit:hover {
-  fill: var(--place-soft);
-  fill-opacity: 0.5;
-}
-
-.strip {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 2px;
-}
-
-.strip span {
-  width: 8px;
-  height: 14px;
-  border-radius: 2px;
-  background: var(--not-reached);
-}
-
-.strip span[data-status='passed'] {
-  background: var(--passed);
-}
-
-.strip span[data-status='failed'] {
-  background: var(--failed);
-}
-
-.strip span[data-status='running'] {
-  background: var(--place);
-}
-
-.tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 8px;
-  font-size: 0.8125rem;
-}
-
-.tags > * {
-  padding: 1px 8px;
-  border: 1px solid var(--line-2);
-  border-radius: var(--pill);
-  color: var(--ink-2);
-  text-decoration: none;
-}
-
-.tags a {
-  color: var(--place);
-}
-
-/* Runs */
-
-.runs {
-  display: grid;
-  gap: 10px;
-}
-
-.runs > * {
-  margin: 0;
-}
-
-.runMeter {
-  display: inline-block;
-  width: 4rem;
-  margin-right: 8px;
-  vertical-align: middle;
-}
-
-.runCounts {
-  display: inline-flex;
-  gap: 8px;
-  color: var(--ink-3);
-  font-variant-numeric: tabular-nums;
-}
-
-.runCounts strong {
-  color: var(--failed);
-}
-
-.runCounts [data-status='running'] {
-  color: var(--place);
-}
-
-.runTitle {
-  font-size: 1.125rem;
-  font-weight: 650;
-}
-
-.runMeta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0 10px;
-  color: var(--ink-3);
-  font-size: 0.8125rem;
-}
-
-.runMeta > * + *::before {
-  margin-right: 10px;
-  color: var(--faint);
-  content: '·';
-}
-
-.runSummary {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  font-size: 0.875rem;
-}
-
-.back {
-  display: inline-flex;
-  gap: 6px;
-  color: var(--place);
-  font-size: 0.875rem;
-  font-weight: 500;
-  text-decoration: none;
-}
-
-.actionsLine {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 14px;
-  font-size: 0.875rem;
-}
-
-.actionsLine a {
-  color: var(--place);
-}
-
-.actionsLine a.primary {
-  padding: 6px 14px;
-  border-radius: var(--pill);
-  background: var(--place);
-  color: #fff;
-  font-weight: 600;
-  text-decoration: none;
-}
-
-/* Index */
-
-.indexHeading {
-  margin: 14px 10px 4px;
-  color: var(--ink-3);
-  font-size: 0.75rem;
-  font-weight: 600;
-}
-
-.indexDomainHead {
-  display: flex;
-  align-items: center;
-}
-
-.indexDomainHead > a {
-  flex: 1;
-  min-width: 0;
-}
-
-.indexToggle {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 28px;
-  padding: 0;
-  border: 0;
-  background: none;
-  cursor: pointer;
-}
-
-.indexSpecs {
-  padding-left: 14px !important;
-}
-
-/* Too narrow for two columns: the open test above the list, one scroll. */
-@media (max-width: 1100px) {
-  .explorer[data-split] {
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-  }
-
-  .explorer[data-split] .side {
-    order: -1;
-    flex: none;
-    overflow: visible;
-    border-left: 0;
-    border-bottom: 1px solid var(--line);
-  }
-
-  .explorer[data-split] .main {
-    flex: none;
-    overflow: visible;
-  }
-}
-
-@media (max-width: 760px) {
-  .explorer,
-  .explorer[data-split] {
-    height: auto;
-    overflow: visible;
-  }
-
-  .main,
-  .side {
-    overflow: visible;
-  }
-
-  .main {
-    padding: 20px 16px 48px;
-  }
-
-  .side {
-    padding: 16px;
-  }
-
-  .tile[data-wide] {
-    grid-column: auto;
-  }
-
-  .columns {
-    grid-template-columns: 4rem 3rem;
-  }
-
-  .columns > span:nth-child(n + 3) {
-    display: none;
-  }
-
-  .groupMeter {
-    display: none;
-  }
-}