/*
  BREATH LAYOUT 0010
  One supplied CIB catalog, two mechanical viewport arrangements.
  Wide browsers retain those same ordered landmarks beside the one active
  surface. Phones give the active surface the full room. No words, rank,
  routing, readiness, or meaning are selected here.
*/

#assistant:not([hidden]) {
  align-self: flex-start;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid #777;
  border-radius: 6px;
  background: #111;
  color: #fff;
  font: inherit;
}

@media (min-width: 521px) {
  body[data-shell="open"] .open:has(> .catalog:not(:empty)) {
    display: grid;
    grid-template-columns: minmax(188px, 232px) minmax(0, 1fr);
    grid-template-areas: "catalog surface";
    grid-template-rows: minmax(0, 1fr);
    gap: clamp(16px, 2vw, 28px);
    align-items: stretch;
  }

  body[data-shell="open"] .catalog:not(:empty) {
    grid-area: catalog;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    align-self: stretch;
    justify-self: stretch;
    gap: 10px;
    max-width: none;
    min-width: 0;
    padding-block: 8px;
  }

  body[data-shell="open"] .catalog .launcher {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 13px 15px;
    border-radius: 17px;
    background: rgba(12, 9, 20, 0.27);
    box-shadow: var(--highlight);
  }

  body[data-shell="open"] .catalog .launcher .glyph {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
  }

  body[data-shell="open"] .catalog .routefact {
    margin-left: auto;
  }

  body[data-shell="open"] .appsurface {
    grid-area: surface;
    min-width: 0;
  }
}

@media (max-width: 520px) {
  body[data-shell="open"] .open {
    display: block;
  }

  body[data-shell="open"] .catalog {
    display: none;
  }

  body[data-shell="open"] .appsurface {
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body[data-shell="open"] .catalog .launcher {
    background: rgba(14, 11, 20, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

html[data-reduced-transparency="true"] body[data-shell="open"] .catalog .launcher,
body[data-contrast="raised"][data-shell="open"] .catalog .launcher {
  background: rgba(14, 11, 20, 0.92);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}