/* XPRODUCT identity in the engineering application's shared header. */
body.xproduct-gangstas .masthead {
  align-items: center;
  gap: 20px;
  padding-inline: 20px;
}

body.xproduct-gangstas .masthead .xproduct-home-link {
  flex: 0 0 auto;
  color: var(--ink);
}

body.xproduct-gangstas .xproduct-circle {
  background: currentColor;
}

body.xproduct-gangstas .xproduct-section {
  color: var(--ink-2);
}

body.xproduct-gangstas .masthead .xproduct-back-link {
  margin-left: auto;
  min-height: 44px;
  color: var(--ink-2);
}

body.xproduct-gangstas .masthead .xproduct-back-link:hover {
  color: var(--ink);
  border-color: var(--rule-strong);
}

@media (max-width: 1100px) {
  body.xproduct-gangstas .masthead {
    gap: 12px;
    padding-inline: 12px;
  }
}

@media (orientation: portrait) and (max-width: 767px) {
  body.xproduct-gangstas .app,
  body.xproduct-gangstas .app.panel-closed {
    grid-template-rows: auto minmax(240px, 46dvh) minmax(0, 1fr) auto;
    grid-template-areas: "head" "stage" "panel" "dock";
  }

  body.xproduct-gangstas .app.free-camera,
  body.xproduct-gangstas .app.free-camera.panel-closed {
    grid-template-rows: auto minmax(300px, 60dvh) minmax(0, 1fr) auto;
  }

  body.xproduct-gangstas .masthead {
    display: flex;
    min-height: calc(44px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 12px 0;
    gap: 12px;
  }

  body.xproduct-gangstas .masthead .tabs { display: none; }
  body.xproduct-gangstas .toolbar { padding-top: 8px; }
}

@media (orientation: landscape) and (max-height: 560px) {
  body.xproduct-gangstas .app,
  body.xproduct-gangstas .app.panel-closed {
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "head head head" "dock stage panel";
  }

  body.xproduct-gangstas .masthead {
    display: flex;
    min-height: calc(44px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
    gap: 12px;
  }

  body.xproduct-gangstas .masthead .tabs { display: none; }
}